Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Школа Web - пошаговые инструкции для создания сайта
Школа Веб - Dreamweaver
Выпуск 15 от 2001-08-07
Школа Веб
∙ Ведущий рассылки Eris
|
Эта статья является очередной из цикла статей о работе с изображениями. Работа с изображениями
Добавление изображения на страничку выполняется очень просто.
Установите курсор в ту
точку странички, куда вы хотите вставить изображение. Далее, нажмите на Ctrl-Alt-I.
Можно сделать то же самое и с помощью мышки. Если вы настроили Dreamweaver на
отображение всех инструментов в строке состояния, нажмите на кнопку 12 (см.
рис1).
На инструментальной панели (рис.2) нажмите кнопку "Вставить изображение". В появившемся окне введите путь к вашей картинке. Если ваше изображение находится за пределами корневой директории вашего проекта, то вам будет выдано соответствующее предупреждение (This file is outside of root directory...) Вам будет предложен выбор - оставить, как есть или копировать внутрь дерева каталогов вашего проекта. Копируйте внутрь, поскольку иначе при пересылке файлов на сервер, эта картинка не будет отображена. При нажатии на Yes в этом случае будет выведено окно, в котором вам будет предложено указать место, куда скопировать картинку. Вообще не принято хранить изображения и другие вспомогательные файлы в той же директории, что и сами странички. Ваше дерево, которое отображается в окне сайта, будет сильно загромождено. Рекомендую поступить таким образом. В корневой директории сайта создайте папку, в которой вы будете хранить все элементы оформления страниц, которые являются общими для всего сайта. Там вы будете хранить эмблемы, фоны, графические меню и так далее. Я обычно называю такую директорию _index_, но вы можете назвать ее как угодно. В каждом из разделов сайта можно создать директорию для картинок (у меня это обычно _pic_) в которой будут храниться изображения необходимые для оформления страничек данного раздела, и которые не являются элементами стандартного интерфейса странички. Такое разделение позволит вам быстро поменять интерфейс, не роясь в обилии файлов графики, и быстро поменять содержание странички, не удалив случайно элемент интерфейса только потому, что названия похожи. Рекомендую для стандартных элементов использовать префиксы - если это кнопка, к примеру, используйте имя типа b_back.jpg. Во-первых, будет сразу ясно, что это кнопка. Во-вторых, все кнопки в окне сайта будут отображены рядом, поскольку Dreamweaver по умолчанию сортирует имена файлов в алфавитном порядке. Можно вставить картинку и другим способом. Разместите рядом окно документов, куда вам нужно вставить страничку, и стандартное окно Windows с директорией, где у вас лежат картинки. А затем захватите мышкой нужное изображение и просто перетащите его на вашу страничку. Этот фокус проходит со всеми окнами, которые поддерживают технологию Drag-and-Drop (перетащить и отпустить). Например, вы можете перетащить картинку из другого окна Dreamweaver. Если источник находится за пределами корневой директории, вам опять же будет предложено сохранить изображение внутри проекта. Давайте взглянем теперь, что происходит в html-коде нашей странички. Настройте окно так, что бы была видна и страничка, и ее код. Щелкните на картинку и посмотрите на выделенный код вверху окна. Будет строка типа <img src="/web/dreamweaver/imgs/obj_image.png" width="69" height="171"> Здесь тег <img> означает команду создать изображение. Параметр src задает путь к изображению, параметры width и height задают размеры изображения. Если вы щелкните на картинке, вокруг нее появится рамочка выделения. Если вы потянете за один из прямоугольников, размер картинки изменится. Распространенная ошибка среди начинающих - это загрузить большую картинку, а затем сжать ее до маленького размера. Размер видимой части изменится, но размер загружаемого файла - нет. Зачем грузить 20-30 секунд картинку, которая будет показана в четверть размера? В этом случае лучше изменить ее размер графическим редактором. Если после упражнений с изменением размеров вам захочется восстановить первоначальные размеры изображения - нажмите на кнопку Reset Size. Нажатие на кнопку Edit вызовет графический редактор, в который будет загружено выше изображение. По умолчанию это Macromedia Fireworks. Как изменить редактор по умолчанию для любого типа файла я расскажу в одном из следующих уроков. И, наконец, вокруг изображения
можно сделать бордюр. Для этого достаточно щелкнуть на картинке и на панели
свойств объекта в поле Border ввести толщину рамочки в пикселях. Замечу, сразу,
что если вы сделаете ссылку на изображение, вокруг него может появиться синий
бордюр. Для того чтобы избавиться от него, достаточно ввести в это поле значение
0. Тег изображения при этом примет вид <img src="obj_image.png" alt= width="69" height="171" border="0"> Параметр border, как вы уже, наверное, догадались, означает толщину бордюра в пикселях. Вообще чрезмерная насыщенность
странички графикой - плохая штука в том плане, что страничка грузится очень
медленно. Но как быть, если вы должны насытить ее графикой по каким-либо причинам.
В этом случае можно воспользоваться трюком с двойной загрузкой картинки. Смысл
его заключается в том, что вы вначале грузите картинку с низким разрешением
или низким качеством (высокой степенью сжатия), или просто черно-белый ее вариант.
После того, как все "быстрые" картинки будут загружены, и пользователь
что-то видит, эти изображения будут заменены более качественными, которые грузятся
дольше, но этот процесс не будет раздражать пользователя, поскольку какая-то
картинка перед глазами у него уже есть. Этот трюк выполняется все так же просто,
как и все остальное. Вначале создайте в графическом редакторе для вашей картинки
вариант с низким разрешением и сохраните ее на диске в пределах вашего проекта.
Затем в поле Low Src на панели свойств объектов для выбранной картинки введите
путь к созданному изображению. В этом случае тег изображения будет выглядеть
так: <img src="obj_image.png" width="69" height="171" lowsrc="obj_image_LOW.png"> Написанный подобным образом
тег скажет броузеру: "Сейчас по-быстрому грузи obj_image_LOW.png, а потом,
как освободишься, замени ее на obj_image.png" В следующей статье будет рассказано о непростых взаимоотношениях картино и текстов на страничке. Если вы не получали предыдущих выпусков, найти их вы сможете на сайте рассылки Всего
наилучшего |
| http://subscribe.ru/
E-mail: ask@subscribe.ru | Отписаться | Рейтингуется SpyLog |
| В избранное | ||
