Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Практическая работа 3 - Работа с графическими изображениями
Цель работы освоить параметры вставки и редактирования изображений.
Прим вставке изображения и дальнейшего редактирования в редакторе свойств имеются специальные параметры.
Рис. 1. Вид редактора свойств при выделенном изображении
Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения.
Поля ввода V Space и Н Space задают вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.
Поле ввода Src задает имя файла, где хранится графическое изображение.
Поле ввода Low Src аналогично полю Src, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет большего сжатия и низкого качества.
Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет.
Поле ввода Alt задает так называемый "альтернативный текст".
Раскрывающейся список Align позволяет задать выравнивание.
Browser Default расположение по умолчанию, обычно аналогично пункту Baseline;
Baseline низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);
Тор верх изображения совпадает с верхом текста;
Middle середина изображения совпадает с базовой линией текста;
Bottom низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
TextTop верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
Absolute Middle середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
Absolute Bottom низ изображения совпадает с низом самого низко сидящего символа текста;
Left изображение "прижимается" к левому краю страницы;
Right изображение "прижимается" к правому краю страницы;
Default - расположение по умолчанию, обычно аналогично пункту Baseline.
Вставьте фотографию на страницу сведений об авторе. Поместите текстовый курсор в конце слова «Фотография»и посмотрите на вкладку Common панели объектов там находится кнопка Image (рис. 2). Вы также можете воспользоваться меню Insert пунктом Image или нажать комбинацию клавиш <Ctrl>+<Shift>+<!>.
Рис. 2. Кнопка Image панели объектов
Нажмем эту кнопку. На экране появится диалоговое окно Select Image Source, показанное на рис. 3.
Рис. 3. Диалоговое окно Select Image Source
Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла. А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов вы хотите найти. Справа находится панель предварительного просмотра (так как включен флажок Preview Images).
Нажмите кнопку ОК. После этого наша страница примет такой вид, как на рис. 4.
Рис. 4. Страница сведений об авторе с его портретом
На правой и нижней границе портрета имеются небольшие черные квадратики «маркеры изменения размера». Чтобы вертикальный и горизонтальный размеры изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише <Shift>.
Задайте свойства портрета при помощи редактора свойств. Расстояния от текста 5 пикселов с обеих сторон, выравнивание по левому краю, альтернативный текст "Это я, Иван Иванович Иванов".
Сохраните страницу.
Активные изображения
Активное изображение вставляется с помощью кнопки Rollover Image (рис. 5) вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image, показанное на рис. 6.
Рис. 5. Кнопка Rollover Image панели объектов
Рис. 6. Диалоговое окно Insert Rollover Image
В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте только, действительно ли это имя уникально.
В поле ввода Original Image вводится имя файла оригинального изображение.
В поле ввода Rollover Image вводится имя файла перекрывающего изображения.
Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши.
В поле ввода Alternate Text вводится "альтернативный текст".
Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении.
Введя все нужные значения, нажмите кнопку ОК.
Карты-изображения
Изображение-гиперссылка это простейший случай графических гиперссылок, применяемых сейчас в Web-дизайне. Более сложным случаем являются активное изображение и карта-изображение, сложная графическая гиперссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой отдельные гиперссылки, называются "горячими областями".
Создайте Web-страничку на которой будет изображение.
Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств (рис. 7).
Рис. 7. Элементы управления редактора свойств, использующиеся для создания "горячих областей"
Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет разместить на изображении соответственно прямоугольную, круглую и многоугольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями".
Так как же разместить "горячую область"? Очень просто. Давайте начнем с прямоугольной. Щелкните на кнопке с изображением прямоугольника, затем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим.
После этого, как вы заметили, Dreamweaver подставит в поле ввода Map строку "Map". Что она значит? Это уникальное имя изображения-гипер-ссылки, которое будет использоваться Web-обозревателем. Если вы планируете на своей странице только одну карту-изображение, можете оставить это имя по умолчанию, в противном случае дайте ей уникальное имя, хотя бы "Мар1. Заметьте, что в таких именах допускаются только латинские буквы, цифры и знаки подчеркивания, причем начинаться имя должно с буквы.
Но Dreamweaver не только сгенерировал уникальное имя для карты-изображения. Он еще и в очередной раз изменил вид редактора свойств (рис. 4.13). Теперь вы можете задать параметры только что созданной "горячей области".
Рис. 4.13. Вид редактора свойств для выделенной "горячей области"
Все элементы управления нового редактора свойств вам уже знакомы. Это поле ввода Src, используемое для ввода интернет-адреса, раскрывающийся список Target, задающий цель гиперссылки, и поле ввода Alt, где вводится "альтернативный" текст. Здесь все понятно.
Разобравшись с тем, как вводятся параметры "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Однако перед всеми этими операциями проверьте, что из кнопок, показанных на рис. 4.12, нажата та, на которой изображена стрелка, и, если нет, нажмите ее.
Но пора двигаться дальше. Введите в поле Src имя файла Web-страницы сведений об авторе (4.1.htm) и нажмите клавишу <Enter>.
Теперь добавим на наше изображение круглую "горячую область". Для этого нажмем кнопку с изображением круга и точно так же "протащим" мышь по изображению, охватив надпись "E-mail". Dreamweaver поместит круглую область там, где мы ему указали, и активизирует ее, разместив по четырем сторонам круга маркеры изменения размеров.
Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Редактор свойств имеет в этом случае такой же вид (см. рис. 4.13). Поэтому мы не будем здесь останавливаться. Введите в поле ввода Src почтовый адрес Ивана Ивановича и нажмите клавишу <Enter>.
Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете вам придется удалить созданную "горячую" область и создать новую.
Выделите многоугольную "горячую область", если она еще не выделена, введите в поле ввода Src имя файла 3.1.htm нашей главной страницы и нажмите клавишу <Enter>. Наша карта-изображение закончена. То, что получилось, показано на рис. 4.14.
После этого можно вызвать Web-обозреватель для просмотра нашей страницы и испытать нашу карту-изображение в действии. Сделайте так она действительно работает!
Осталось описать совсем немного дополнительных функций, предлагаемых Dreamweaver для работы с картами-изображениями.
С помощью пункта Image Map Name контекстного меню вы можете изменить имя "горячей области", если редактор свойств недоступен. При выборе этого пункта на экране появится диалоговое окно Change Attribute, показанное на рис. 4.15. Введите новое значение атрибута (в нашем случае имени "горячей области") и нажмите кнопку ОК.
Рис. 4.14. Готовая карта-изображение
Пункт Link контекстного меню выводит на экран диалоговое окно Select File, где вы можете выбрать файл, на который будет ссылаться "горячая область".
Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задать "альтернативный" текст.
Рис. 4.15. Диалоговое окно Change Attribute
А о пунктах Bring To Front и Send To Back все того же неисчерпаемого контекстного меню поговорим подробнее.
Иногда случается так, что две "горячие области" перекрывают друг друга, т. е. имеют общий фрагмент. При этом при щелчке на такой "спорной территории" активизируется "горячая область", расположенная сверху, а сверху всегда появляется та область, что была создана последней. Но не всегда получается разместить "горячие области", как было предусмотрено по плану. Так вот, чтобы управлять их перекрытием, используются пункты Bring To Front и Send To Back контекстного меню. Первый переносит выделенную "горячую область" наверх, а второй -- "загоняет" ее вниз.
В последнем случае вы также можете воспользоваться пунктами Bring To Front и Send To Back подменю Arrange меню Modify.
И еще. Иногда бывает нужно избавиться от показываемых Dreamweaver "горячих областей", например, чтобы оценить, как будет выглядеть карта-изображение в окне Web-обозревателя. Конечно, можно загрузить его в самом Web-обозревателе для предварительного просмотра. Но можно сделать иначе. Отключите пункт-выключатель Image Maps в подменю Visual Aids меню View. При этом "горячие области" пропадут. Чтобы вернуть их назад, просто включите этот пункт.
Фоновые изображения
Выше мы рассмотрели, как размещаются на Web-странице всевозможные изображения в разных форматах. Все эти изображения представляли собой полезное содержание страницы и находились в "потоке" текста либо жестко к нему привязанные, либо "плавающие" в нем. Однако стандарт HTML определяет еще и так называемые фоновые изображения, помещаемые под текстом и "просвечивающие" сквозь "прозрачный" цвет графических элементов страницы. В этом смысле фоновые изображения похожи на водяные знаки на гербовой бумаге.
Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties (см. рис. 3.50), для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши <Ctrl>+<J>. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. После этого нажмите кнопку ОК. Получившийся результат может выглядеть, например, так см. рис. 4.26. (Автор создал пустую Web-страницу, поместил на нее фрагмент текста этой книги, задал для него в качестве фонового изображения файл J0143756.gif, поставляемый в составе Microsoft Office 2000, и сохранил результат в файле 4.5.htm.)
Рис. 4.26. Web-страница с фоновым изображением
Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Снова посмотрите на рис. 4.26 там текст выглядит на фоне достаточно контрастно, чтобы нормально читаться.
Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.
PAGE \* MERGEFORMAT 2