6) Нажмите кнопку Открыть.
7) В поле Editors должна появится строка с названием нового графического редактора, выделите ее.
8) Нажмите кнопку Make Primary.
9) Щелкните на OK.
4. Фоновая графика
Чтобы украсить страницу, можно заполнить фон картинкой из графического файла. Фоновое изображение – это графический файл, содержащий картинку (желательно небольшого размера), который многократно выводится на экран, заполняя все окно. Картинка может представлять собой небольшой прямоугольник или же длинную узкую полоску. Изображение для фона должно напоминать фрагмент обоев, т. е. быть небольшим и незамысловатым, чтобы, во-первых, не замедлять загрузку, а во-вторых, текст на выбранном фоне должен легко читаться. Это совет, а не обязательное ограничение.
Как вставить изображение в качестве фона Web-страницы
1) Выберите пункты меню Modify > Page Properties.
2) В поле Background Image выберите графический файл для фона изображения.
3) Нажмите кнопку ОК.
4) Если вы хотите, чтобы фон страницы не прокручивался вместе с текстом, то добавьте в тег <body> следующий атрибут: <body... bgProperties="fixed" ...>
5) Примечание. Атрибут bgProperties должен быть добавлен к атрибутам тега <body>, а не заменить их.
5. Изображения Rollover
Rollover (чувствительные изображения) – это изображение, которое заменяется другим изображением, когда на него наводится указатель мыши. Чувствительное изображение состоит из двух «частей»: первичное изображение (т. е. выводимое при загрузке страницы) и чувствительное изображение (т. е. которое появляется, когда указатель мыши наводится на первичное изображение). Когда вы создаете чувствительное изображение, оба изображения должны иметь одинаковые линейные размеры. Если же это условие не выполнено, то Dreamweaver автоматически изменяет размеры второго изображения, чтобы сделать их равными размерам первого.
Чтобы создать чувствительное изображение, выполните следующие шаги:
1) В окне Document разместите точку ввода в том месте, куда хотите поместить чувствительное изображение.
2) Выберите в меню Insert (Вставка) пункт Interactive Image > Rollover Image (Чувствительное изображение).
3) В появившемся диалоговом окне:
4) - найдите и выберите изображение или укажите путь и имя файла первоначального изображения в поле Original Image (Первоначальное изображение);
5) - найдите и выберите изображение или укажите путь и имя файла для чувствительного изображения в поле Rollover Image (Чувствительное изображение);
6) - чтобы создать ссылку, найдите и выберите файл или замените символ # в поле When Clicked, Go To URL именем файла и путем;
7) - чтобы Dreamweaver заранее загружал изображения в буфер браузера, выберите настройку Preload Rollover Images (Загружать чувствительное изображение заранее).
8) Нажмите кнопку ОК.
6. Создание изображения-карты в Dreamweaver MX
Создание горячих областей. Изображением-картой может служить любое растровое изображение в форматах Web-графики. Создание горячих областей осуществляется следующим образом:
1) Выберите изображение.
2) В палитре Properties в левом нижнем углу введите имя карты в поле Map. Оно должно быть уникальным и состоять только из букв и цифр латинского алфатива и начинаться с буквы.
3) В палитре Properties в левом нижнем углу выберите инструмент нужной формы.
4) Нарисуйте горячую область на изображении. После этого палитра изменит свой вид.
5) В поле Link выберите страницу, на которую будет осуществляться переход по ссылке.
6) В поле Alt (Альтернативный текст) введите текстовую подсказку, относящийся к данной горячей области. Этот текст будет выводиться в виде всплывающей подсказки при наведении указателя мыши на горячую область.
7) Повторите шаги 4-6 для создания остальных горячих областей изображения-карты.
ЛАБОРАТОРНАЯ РАБОТА
Оптимизация изображений
1) Запустите программу Adobe ImageReady 7.
2) Откройте файл logo. jpeg из папки Лаб №6 .
3) Данное изображение содержит в себе логотип учебного центра. Нам нужно убрать фон и эффект тени.
4) Выберите инструмент Magic Wand Tool (Волшебная палочка) 
. В палитре свойств этого инструмента (она расположена прямо под главным меню программы) снимите флажок Contiguous.
5) Щелкните указателем мыши в любом месте на изображении логотипа, в результате логотип должен выделиться пунктирной линией.
6) Над изображением логотипа нажмите правую клавишу мыши.
7) Из контекстного меню выберите пункт Select Inverse для инвертирования области выделения. В результате должна выделиться вся область изображения, кроме логотипа.
8) Нажмите клавишу Delete, в результате область вокруг логотипа должна исчезнуть и на ее месте появится клетчатый фон.
9) Нажмите комбинацию клавиш CTRL+D, чтобы снять выделение.
10) Откройте палитру Optimize (Window > Optimize).
11) Оптимизация формата Gif
1. В окне изображения переключитесь на вкладку Optimized.
2. В нижней части окна изображения вы увидите надпись 8,076К / 4с. Эта надпись означает, что размер изображения равен 8 Кб и время загрузки изображения составляет 4 с.
3. В палитре Optimize в раскрывающемся списке Optimized File Format выберите формат Gif. Обратите внимание, что размер файла существенно уменьшился.
4. В поле Colors уменьшайте количество цветов. Это позволит существенно уменьшить размер файла изображения. Остановитесь на значении: 3.
12) Выполним обрезку изображения, чтобы удалить пустые пространства около логотипа.
13) 5. Выберите пункты главного меню Image > Trim.
14) 6. В появившемся диалоговом окне установите переключатель Based On (основываться на) в положение Transparent Pixels (Прозрачные пиксели). Нажмите ОК.
15) Таким образом, размер файла изображения получился около 1 Кб.
16) 7. Сохраним данное изображение. Выберите пункты меню File > Save Optimized As…
17) 8. В диалоговом окне сохранения файла выберите папку вашего сайта и введите имя файла logo. gif. В раскрывающемся списке Тип файла должно стоять Image Only (Только изображение).
Оптимизация формата Jpeg
1) В программе ImageReady откройте файл foto. jpeg из папки Лаб №6. Размер данного файла примерно 150 Кб. Попытаемся его уменьшить. Сначала оптимизируем размер изображения.
2) Выберите пункты меню Image > Image Size.
3) Убедитесь, что флажок Constrain Proportions выбран.
4) В поле Width поставьте значение 300. В поле Height значение измениться пропорциально. Нажмите кнопку ОК.
5) Дважды щелкните на инструменте Zoom Tool, чтобы установить масштаб изображения равным 100%.
6) Переключитесь на вкладку Optimized и оцените размер изображения. Размер файла стал примерно 20 Кб.
7) В палитре Optimize в раскрывающемся списке Optimized File Format установите JPEG.
8) В палитре Optimized перемещайте ползунок Quality влево, уменьшая качество изображения и тем самым увеличивая степень сжатия. Установите ползунок на значении 50.
9) Размер файла стал равен примерно 15 Кб, что вполне годится для изображения такого размера.
10) Сохраним данное изображение. Выберите пункты меню File > Save Optimized As…
11) В диалоговом окне сохранения файла выберите папку вашего сайта и введите имя файла foto. jpg. В раскрывающемся списке Тип файла должно стоять Image Only (Только изображение).
Вставка изображения на Web-страницу
1) Запустите программу Dreamweaver MX
2) Откройте файл avtor. htm.
3) Подставьте курсор в то место странички, где бы вы хотели разместить фотографию.
4) В панели объектов щелкните на пиктограмме Image.
5) В появившемся диалоговом окне выберите файл изображения: foto. jpg
6) Нажмите кнопку OK. Фотография должна появиться на странице.
7) 4. В панели объектов щелкните на пиктограмме Rollover Image (или выберите пункты главного меню Insert > Interactive Images > Rollover Image)
8) 5. В появившемся диалоговом окне в поле Original Image с помощью кнопки Browse выберите файл нормального состояния кнопки (button-up. gif).
9) В поле Rollover image выберите файл (button-over. gif) для состояния при наведении на кнопку указателя.
10) В поле Alternate Text укажите текст подсказки для кнопки, например, «всплывающая подсказка».
11) В поле When Clicked, Go To URL выберите страничку, на которую будет происходить переход при щелчке на данной кнопке. Например, kursy. htm.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 |
