Инфоурок Информатика КонспектыКонспект для уроков по Web-дизайну

Конспект для уроков по Web-дизайну

Скачать материал

Обработка элементов web-дизайна

Вставка изображений, выполненных в Photoshop   и Image Ready

(фон, банер, кнопка)

 

Предварительное задание. Для проверки действия созданного фона, вставки кнопки, вставки банера создайте в сво­ей домашней папке папку BG.

     Вызвав редактор Notepad, введите HTML-код простой web-страницы для про­смотра создаваемых элементов:

<HTML>

<BODY BACKGROUND =”bgl.gif”>

</BODY>

</HTML>

Сохраните этот файл с именем bgl.htm.

 

 

1. Создание фона для web-документов

 

Вариант 1. Создать фон с полями, используя готовые кисти редактора   Photoshop.

    В соответствии с заданием, вдоль левого края страницы создается поле, заполняе­мое белым или иным сплошным цветом. Это придаст странице гораздо более ин­тересный вид, а кроме того, вы получаете место для размещения кнопок, обеспечи­вающих перемещение по гиперссылкам, и дополнительной информации, обычно находящейся на полях.

1.     Запустите Photoshop и создайте новый документ со следующими параметрами:

2.     размер — 1024х1 пикселов, разрешение — 72 пиксела на дюйм, цвет RGB, в поле Содержание выберите Белый.

3.     Выберите инструмент Лупа и увеличьте  показ изображение до 1200 %.

4.     Измените, цветовой режим с RGB на Индексированные цвета, для чего выберите команду меню Изображение > Режим > Индексированный.

5.     Выберите инструмент Ведро и залейте бледно-зеленым цветом фон. Затем выберите Кисть размером 1 пиксел. Щелкнув мышью на значке переднего цвета на панели инструментов, выберите в окне Сборщик цветов темно-зеленый цвет и щелкните на кнопке ОК. Используя Кисть, начи­найте раскрашивание. Окрасьте примерно четверть полосы (3,5 см), начиная с левого края. Возможно, вам потребуется уменьшить масштаб изображения, что­бы убедиться, что окрашена требуемая часть полосы.

6.     Сохраните созданный рисунок под именем bgl.gif, для чего выберите в меню Файл команду Сохранить для Web. В окне Save For Web в поле Settings выберите GIF Web Palette, остальные установки оставьте по умолчанию. Перейдите на вклад­ку 4-Up и выберите вариант GIF. Щелкните на кнопке ОК. В окне Save Optimized As выберите папку, введите имя файла bgl, в поле Тип файла выберите вариант Images Only(*.gif) и щелкните на кнопке Сохранить.

 

7.     Запустите web-обозреватель, например Microsoft Internet Explorer. Выберите в меню Файл команду Открыть. В окне Открыть, щелкнув на кнопке Обзор, найди­те папку и файл bgl.htm и щелкните на кнопке Открыть. В окне обозревателя от­кроется web-документ bgl.htm. Просмотрите фон и закройте окно web-обозревателя.

 

 

 

 

 

Вариант 2. Создать фон, используя свою кисть.

1.     Запустите графический редактор Photoshop и создайте новый документ, для чего выберите команду Файл > Новый и в окне Новый задайте следующие параметры: размер — 70х70 пикселов, разрешение — 72 пиксела на дюйм, RGB цвет, в поле Содержание выберите Прозрачный.

2.     Для создания своей кисти в форме цветка с пятью лепестками выберите инст­румент Овальное выделение. Выделите овал в окне рисунка, затем выберите тем­но-синий цвет и инструментом Заливка залейте выделение. Выберите команду Редактирование > Произвольная Трансформация и поверните его. Запомните лепесток в буфере обмена. Из буфера обмена вставьте его в окно рисунка и, выбрав команду Редактирование > Произвольная Трансфор­мация, создайте еще один лепесток, расположив его рядом. Повто­рив эти операции три раза, создайте еще три лепестка, затем в центре цветка выделите круг и залейте его.

3.     Выбрав в меню Редактирование команду Определить кисть, в окне Название кисти введите имя кисти, например Цветок5, и щелкните на кнопке ОК. Созданная вами кисть занесена в набор кистей.

4.     Закройте окно рисунка, в котором вы создавали кисть, и создайте новый доку­мент размером 3х3 см, разрешением 72 пиксела на дюйм, RGB-цвет, в поле Содер­жание выберите Прозрачный.

5.     Выбрав на панели инструментов кисть, раскройте на панели свойств инструмен­та в поле Кисть список кистей и выберите созданную вами кисть-цветок из пяти лепестков. Выбирая различные цвета и щелкая кистью в окне рисунка, нарисуйте узор фона.

6.     Сохраните созданный рисунок в формате GIF под именем bg2.gif.

 

7.     Отредактируйте файл bgl.htm, заменив в теге описания фона имя файла bgl.gif на bg2.gif. Строка описания тега фона примет вид <BODY BACKGROUND=bg2.gif>

8.     Сохраните web-документ под именем bg2.htm, выбрав в меню Файл команду Сохранить как и задав имя bg2.htm.

9.     Запустите web-обозреватель. Выберите в меню Файл команду Открыть. В окне Открыть, щелкнув на кнопке Обзор, найдите папку и файл bg2.htm и щелкните на кнопке Открыть. Просмотрите фон web-документа и закройте окно web-обозре­вателя.

10. Примечание! Форму кисти можно не добавлять, а выбрать из существующих в рамках PhotoShop 7

 

 

 

 

 

 

 

2. Создание кнопок для web-документов

 

Вариант 1. Создать кнопку прямоугольной формы.

1.     Создайте новое изображение, выбрав Файл > Создать. В окне Новый задайте следу­ющие параметры изображения: размер – 50х50 пикселов, разрешение – 72 пиксела на дюйм, RGB-цвет, в поле Содержание выберите Прозрачный. Создан доку­мент, состоящий из одного прозрачного слоя. Укрупните изображение, выбрав масштаб, например 200 %.

2.     Выберите цвет, допустим сиреневый. Выберите на панели инструментов Линей­ный Градиент и, щелкнув на кнопке градиента на панели свойств инструмента, откройте окно градиентного редактора. Задав параметры градиента, заполните документ.

3.     Для выделения в документе области меньшего размера выберите команду Выде­ление > Все или нажмите комбинацию клавиш Ctrl+A. Выберите Выделение > Модифицировать > Граница, в раскрывшемся окне Выбор границы в поле Ширина задайте небольшое число, например 7.

4.     Выбрав инструмент Градиент, заполните выделенную область в обратном направ­лении.

5.     Создайте новый слой с текстом с помощью инструмента Текст. Выберите шрифт Webdings, полужирного начертания и кеглем 30 пунктов. Выберите цвет надпи­си, например белый. Введите какой-нибудь символ, похожий на стрелку. Выровняйте надпись на кнопке с помощью инст­румента Перемещение.

6.     Сохраните документ в формате GIF под именем knopal.gif в свою папку, выбрав Файл > Сохранить для Web.

 

7.     Для проверки работы кнопки в документе bgl.htm вставьте гиперссылку на любой свой документ с обозначением перехода по кнопке           (<A rel="nofollow ugc" target="_blank" href="bgl.html"><IMG SRC=" knopal.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal "></A> и сохраните его под именем bgk.htm

ПРИМЕЧАНИЕ   Для создания кнопки такого же типа, но овальной формы, в окне нового документа создайте выделение окружностью. Все остальные операции по созданию кнопки— окрашивание изображения, ввод текста — выполняются аналогично предыдущему. Для создания кнопки с использованием текстуры из другого графического файла от­кройте в Photoshop файл с текстурой, выделите в нем изображение, нажав комбина­цию клавиш Ctrl+A, и запомните текстуру в буфере обмена. Перейдя в окно с изобра­жением новой кнопки, выделите область будущей кнопки, например овал, и выберите команду Редактирование > Вставить В (Shift+Ctrl+V). Текстура будет вставлена в выде­ленную область в новом окне. Все остальные операции по созданию кнопки выполня­ются аналогично предыдущему.

 

Вариант 2. Создать кнопку трехмерной овальной формы.

1.     Для изготовления кнопки потребуется изображение черно-белого трехмерного шара. Изготовьте его самостоятельно.

2.     Уменьшите размеры шара до 25х25 пикселов, выбрав команду Изображение > Размер изображения и задав соответствующие ширину и высоту изображения.

3.     Создайте две копии изображения, выбрав Изображение > Дубликат. Чтобы обре­зать правую половину у первого изображения, выберите команду Изображение > Размер холста. В диалоговом окне Размер картины уменьшите вдвое значение в поле Ширина (с 0,66 до 0,33 см). Оставьте значение в поле Высота неизменным, в поле Закрепить укажите направление изменения размеров картины, щелкнув левую кнопку в среднем ряду. Щелкните па кнопке ОК и подтвердите изменения, щелкнув на кнопке Продолжить в окне предупреждения об обрезке изображения.

4.     Аналогично, изменив направление изменения размеров холста, обрежьте у второго шара левую сторону. У третьего шара обрежьте края, чтобы его ширина   стала равна 1 пикселу. Для этого в поле Ширина задайте значение 1 пиксел и в поле Закрепить щелкните центральную кнопку для обрезки изображения слева - и справа.

5.     Активизируйте окно с третьим изображением. Снимите флажок Сохранять про­порции. Увеличьте ширину изображения до 125 пикселов, для чего выберите команду Изображение > Размер изображения, в диалоговом окне Размер изображе­ния в поле Ширина задайте значение 125 пикселов и щелкните на кнопке ОК.

6.     Перейдите в окно с первым изображением. Выделите его (Ctrl+A) и скопируйте в буфер обмена (Ctrl+C). Перейдите в окно с третьим изображением, вставьте в него первое изображение из буфера обмена (Ctrl+V) и установите его вплотную с изображением средней части будущей кнопки (простой горизонтально вытянутый цилиндр)

7.     Со вторым изображением поступите так же, только поместите его справа.

8.     Совместите все слои в один, выбрав команду Слой > Объединить с видимым.

9.     Измените цвет и насыщенность изображения кнопки, для чего выберите коман­ду Изображение > Установка > Тон/Насыщенность. В окне Тон/Насыщенность устано­вите флажки Тонирование и Предпросмотр. Задайте насыщенность около 50 и, изменяя движением ползунка значение параметра Тон, добейтесь нужного цвета.

10. Для создания текста на кнопке выберите инструмент Текст. Выберите шрифт, например Academy, в поле Размер задайте 11 точек. Щелкнув в поле Цвет, задай­те цвет символов, например белый. Введите текст надписи, допустим Вперед, и щелкните на кнопке ОК.

11. Выровняйте надпись на кнопке с помощью инструмента Перемещение.

12. Сохраните документ в формате GIF под именем knopa2.gif в свою папку, выбрав Файл > Сохранить для Web.

13. Для проверки работы кнопки в документе bgk.htm вставьте гиперссылку на любой свой документ с обозначением перехода по кнопке    (<A HREF="bgl.html"><IMG SRC=" knopa2.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal "></A>

 

Вариант 3. Создать два варианта одной кнопки прямоугольной формы.

1.     Создайте новое изображение, выбрав Файл > Новый. В окне Новый задайте сле­дующие параметры документа: размер — 100х25 пикселов, разрешение – 72 пик­села на дюйм, RGB-цвет, в поле Содержание выберите Прозрачный – и щелкните на кнопке ОК. Создан документ, состоящий из одного прозрачного слоя.

2.     Выберите основной цвет для кнопки, например темно-синий. Залейте весь слой основным цветом, выбрав Редактирование > Заполнить.

3.     Выберите в меню Слой из списка Эффекты Слоя пункт Рельефность. В диалоговом окне Стиль слоя установите флажок Фаска и рельеф.

4.     Расположите окно Стиль слоя так, чтобы было видно редактируемое изображе­ние, и, установив флажок Предпросмотр, измените параметры в области окна Фаска и рельеф, например, в списке Стиль выберите Внутренний скос, Глубина — 100 %, Размер — 8 пикселов, Мягкость — 4 пиксела. В области Затененность устано­вите Угол — 120, остальные параметры оставьте по умолчанию.

5.     Щелкните на кнопке ОК для применения заданных параметров.

6.     Создайте новый слой с текстом с помощью инструмента Текст. Выберите руси­фицированный шрифт, например TextBook, и задайте размер символов 6 точек. Выберите подходящий цвет для надписи, скажем, ярко-желтый.

7.     Введите текст Домой и выровняйте надпись на кнопке с помощью инструмента Перемещение.

8.     Создайте для этой кнопки пару — такую же, но с эффектом нажатой кнопки. Для этого создайте дубликат документа, выбрав команду Изображение > Дубликат.

9.     Установив текущим окно Без имени-1 copy с дубликатом изображения кнопки, выберите команду Слой > Эффекты Слоя > Рельефность. В диалоговом окне Эффекты задайте Угол -50, остальные параметры оставьте по умолчанию. Щелкните на кнопке ОК для применения заданных параметров.

10. Добавьте тексту тень. Для этого выберите команду Слой ^ Эффекты Слоя > Тень. Обратите внимание, что раскроется то же самое окно Стиль слоя, только с уста­новленным флажком Падающие тени. Установите флажок Предпросмотр, измените параметры в области Падающие тени, например, Расстояние — 5 пикселов, Раз­брос — 4 %, Размер — 1 пиксел. Щелкните на кнопке ОК для применения задан­ных параметров. Выполните то же самое для текста в другом окне.

11. Переведите оба документа в индексированный цвет, выбрав Изображение ^ Ре­жим > Индексированный. Щелкните на кнопке ОК в подтверждение запроса Слить слои?, затем в окне Цвет с индексом в поле Палитра выберите Web, оставив значе­ния остальных параметров по умолчанию, и щелкните на кнопке ОК.

12. Сохраните оба документа в формате GIF под именами knopa3a.gif и knopa3B.gif в свою папку, выбрав Файл > Сохранить для Web.

13. Для проверки работы кнопки в документе bgk.htm вставьте гиперссылку на любой свой документ с обозначением перехода по кнопке  (<A HREF="bgl.html"><IMG SRC=" knopa3a.jpg" WIDTH=267 HEIGHT=188 BORDER=0 ALT="knopal "></A>

 

Вариант 4. Создать два варианта одной кнопки овальной формы.

1.     Создайте новый документ, задав параметры: размер — 200х100 пикселов, разре­шение — 72 пиксела па дюйм, RGB-цвет, Прозрачный.

2.     Выбрав инструмент Овальное выделение, выделите овал в окне рисунка               Без имени-1.

3.     Выберите Линейный Градиент. Щелкнув на кнопке Изменить, в палитре Опции за­дайте его параметры и закрасьте полученный овал.

4.     Выберите команду Слой > Эффекты Слоя > Рельефность, в окне Стиль слоя в области Фаска и рельеф задайте параметры, например, в списке Стиль выберите Внутрен­ний скос. Глубина — 100 %, Размер — 7 пикселов, Мягкость (размытие) — 4 пиксела, в области Затененность задайте Угол — 120, остальные параметры оставьте по умолчанию. Щелкните на кнопке ОК для применения заданных параметров.

5.     Выбрав команду Фильтры > Texture > Texturizer, установите параметры в окне Textu-rizer, например, Texture Canvas (Холст), Scale (Масштаб) 100 %, Relief (Рельеф) 5, Light Direction (Направление света), Top (Вверх). Щелкнув на кнопке ОК, просмот­рите действие заданного фильтра.

6.     Выбрав инструмент Текст, задайте параметры символов текста: размер — 8 точек, цвет — белый, начертание — Bold Italic (жирный наклонный), укажите место ввода текста па кнопке и введите текст, например Об авторе. Уточните положе­ние текста на кнопке.

7.     Изготовьте дубликат кнопки, выбрав команду Изображение > Дубликат. В окне дубликата изображения выберите Слой 1 с изображением кнопки и выберите команду Редактирование > Трансформация > Отразить Горизонтально.

8.     В окнах обоих рисунков выберите команду Слой > Объединить с видимым.

9.     Сохранить оба документа в формате GIF.

 

 

 

 

3.Создание баннера

 

Вариант 1. Создать стандартный рекламный заголовок.

1.      Запустите Photoshop и создайте новый документ размером 800х60 пикселов, разрешение — 72 пиксела на дюйм, RGB-цвет, в поле Содержание выберите ва­риант Прозрачный.

2.      Откройте файл изображения (любой). Измените размеры этого изображения так, чтобы оно раз­мещалось в окне баннера, для чего выберите Изображение ^ Размер Изображения, в диалоговом окне Размер Изображения установите флажок Сохранять пропорции, в поле Высота задайте размер 60 - 70 пикселов и щелкните на кнопке ОК.

3.      Выбрав команду Выделение > Все, выделите изображение, а затем скопируйте его в буфер обмена, выбрав Редактирование > Копировать.

4.      Перейдите в созданное вами окно  и вставьте изображение из буфера обмена, выбрав Редактирование > Вставить. Переместите вставленное изображение в левый край баннера.

5.      Закройте окно изображения, копию которого вы вставили в баннер, без сохра­нения изменений.

6.      Используя инструмент Пипетка, возьмите образец цвета на рисунке и данным цветом выполните заливку баннера. Используя инструмент Размытие, устраните границу изображения и фона баннера.

7.      Для создания текста на баннере выберите инструмент Текст. Выберите шрифт, задайте параметры символов: начертание, размер, цвет. Введите текст надписи, например, «Интернет - это завтра человечества», и щелкните на кнопке ОК. Выров­няйте надпись на кнопке с помощью инструмента Перемещение.

8.      Сохраните полученное изображение в формате GIF, выбрав команду Файл > Со­хранить для Web. В окне Save For Web, выбрав вкладку 4-Up, отображающую четы­ре варианта

9.      оптимизации, выберите нужный вариант. В поле Settings выберите вариант оптимизации GIF Web Palette,  и щелкните на кнопке ОК. В окне Save Optimized As выберите папку, введите имя файла, напри­мер banner, и щелкните на кнопке Сохранить.

10. Сохраните созданный файл в формате PSD, для чего, выбрав команду Файл > Со­хранить как, в окне Сохранить как откройте нужную папку, введите имя файла и щелкните на кнопке Сохранить.

11. Для проверки расположения баннера в документе bgl.htm вставьте картинку со своим баннером (<IMG SRC=" banner.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner">

 

Вариант 2. Создать многослойное изображение баннера.

1.      Запустите Photoshop и откройте файл banner.psd, созданный при выполнении предыдущего задания.

2.      Открыв палитру Слои, убедитесь в том, что данный баннер представляет собой изображение из двух слоев.

3.      Вставьте в новый слой изображение из другого файла, для чего откройте файл любого изображения. Измените раз­меры этого изображения так, чтобы оно размещалось в окне баннера, для чего выберите Изображение > Размер Изображения, в диалоговом окне Размер Изобра­жения установите флажок Сохранять пропорции, в поле Высота задайте размер 60 - 70 пикселов и щелкните на кнопке ОК.

4.      Выбрав инструмент Прямоугольное выделение, выделите изображение, затем скопируйте его в буфер обмена, выбрав Редактирование > Копировать.

5.      Перейдите в окно banner.psd и вставьте изображение из буфера обмена коман­дой Редактирование > Вставить. Обратите внимание, что при этом в изображении появился новый слой .

6.      Слой 2. Переместите вставленное изображение в левый край баннера.

7.      Выделите в слое Слой 2 участок баннера, свободный от вставленного изображе­ния. Выбрав инструмент Градиент и отредактировав цвета, закрасьте этот учас­ток. Уберите выделение и, используя инструмент Размытие, подправьте переход между градиентно закрашенным рисунком и вставленным фрагментом изобра­жения.

8.      Закройте окно изображения, копию которого вы вставили в баннер, без сохра­нения изменений.

9.      Используя инструмент Текст, создайте слой с текстом, например, «А ты записался на интернет - курсы?» Чтобы цвет текста был достаточно контрастным, выберите, допустим, темно-синий цвет. Размер символов можно выбрать 9 точек.

10. Используя инструмент Текст, создайте слой с текстом этого же цвета, например (0732)-529047. В палитре Слои получилось изображение, составленное из пяти слоев: два слоя изображения и три слоя текста.

11. 10.Сохраните созданное многослойное изображение в файле banner2.psd, затем склейте слои и   сохраните полученное изображение в формате GIF, выбрав команду Файл > Со­хранить для Web

12. 11.Для проверки расположения баннера в документе bg3.htm вставьте картинку со своим баннером (<IMG SRC=" banner2.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banneri  ">

 


Для создания анимированного баннера из многослойного изображения, созданно­го в редакторе Adobe Photoshop, можно использовать редактор Adobe ImageReady.

 

 


Вариант 3. Создать анимированный баннер из многослойного изображения, создан­ного в редакторе Photoshop.

1.      Открыть панель анимации меню – Окно – анимация.

2.      Откройте файл banner2.psd с многослойным изображением, созданный при вы­полнении предыдущего задания, выбрав команду File > Open. В окне Открытие файла откройте папку, содержащую данный файл, укажите файл и щелкните на кнопке Открыть.

3.      Для операций с кадрами удобно использовать кнопки в нижней строке палитры Animation

4.      Открыв палитру Layers (Слои), просмотрите слои многослойного изображения banner2.psd. Отключите видимость всех слоев изображения, щелкнув на значке “Глаз” в каждом слое.

5.      В палитре Animation откройте вкладку Animation.

6.      В палитре Animation при открытом изображении уже есть единственный кадр анимации, он уже активен. Для отображения в нем щелкните на значке “Глаз” в первом и втором слоях: с фоном и с текстом «Интернет - это завтра человечества.»

7.      Укажите для каждого кадра нужный набор включенных слоев и время показа каждого кадра.

а) Щелкнув на кнопке Dublicates current frame (Дубликат текущего кадра) в па­литре Animation, вставьте второй кадр. Для отображения в нем включите видимость в третьем и четвертом слоях: с фоном и с текстом «А ты записался на интернет-курсы?», щелкнув на значке “Глаз”, и отмените видимость в пер­вом и втором слоях, щелкнув на значке “Глаз”.

б) Аналогично, щелкнув на кнопке Dublicates current frame в палитре Animation, вставьте третий кадр. Для отображения в нем щелкните на значке “Глаз” в третьем и пятом слоях: с фоном и текстом (0732) -52-90-47 и отмените види­мость, щелкнув на значке “Глаз”, в четвертом слое с текстом.

в) Выбрав первый кадр, щелкните мышью на стрелочке под ним и в раскрыв­шемся списке выберите время показа, например 0,5с. Аналогично определите время показа каждого кадра.

8.      Расставьте кадры в нужном порядке появления в анимации, для чего зацепите мышью кадр и перетащите в нужную позицию.

9.      Щелкнув на кнопке Select looping options (Определение числа повторов) в ниж­ней строке палитры Animation, в появившемся диалоговом окне выберите вари­ант: Once (Один раз), Forever (Всегда) или Other (Другое). Если вы выбрали Other (Другое), откроется диалоговое окно, в поле Play которого задайте число повто­рений показа анимации.

10. Для проверки действия созданного анимированного изображения щелкните на кнопке Plays animation (Проиграть анимацию) в нижней строке палитры.

11. Если вы при определении числа повторов выбрали вариант Forever (Всегда), для остановки анимации нажмите кнопку Stops animation (Остановить анимацию) в нижней строке палитры Animation.

12. Перейдите на вкладку 4-Up, отображающую четыре варианта оптимизации, и вы­берите вариант. Сохраните баннер в избранном GIF-формате, выбрав в меню Файл команду Сохранить оптимизированное как. В окне Save Optimized As выберите папку, введите имя файла, например banner3, gif, и щелкните на кнопке Сохранить.

13. Для проверки расположения баннера в документе bg3.htm вставьте картинку со своим баннером (<IMG SRC=" banner3.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner3  ">

14. Как вы уже убедились, анимированный баннер, созданный всего из трех кадров, имеет резкую смену кадров при анимации. Чтобы обеспечить смену изображений, создайте между имеющимися тремя кадрами, которые можно на­звать опорными, промежуточные. Для этого используется команда Tween (Про­межуточный) в меню палитры Animation.

15. Перейдите в окно ImageReady с изображением баннера. Указав первый кадр, выберите в меню палитры Animation команду Tween (Промежуточный). В диа­логовом окне Tween  задайте параметры плавного изменения свойств. Команда Tween используется для смены изображения от текущего кадра к сле­дующему. Поэтому после применения команды к первому кадру перейдите к седьмому кадру (это бывший второй опорный кадр) и аналогично определите параметры смены изображения до следующего опорного кадра.

16. Для создания плавного перехода от последнего кадра к первому перейдите к по­следнему кадру, используя полосу прокрутки в нижней части палитры Animation. Выберите в меню палитры Animation команду Tween, задайте смену кадров от те­кущего (последнего) к первому кадру.

17. Проверьте, как будет выглядеть анимированный баннер в web-обозревателе, для чего выберите команду File > Preview in > Internet Explorer. Обратите внимание на более плавную смену изображений. По окончании просмотра закройте окно Internet Explorer.

18. Выберите вариант оптимизации файла баннера, для чего, щелкнув на вкладке 4-Up, откройте окно с четырьмя вариантами оптимизации изображения и выбе­рите из них подходящий по цветовой палитре, объему и времени загрузки.

19. Сохраните созданный баннер как GIF-анимацию, для чего выберите команду File > Save Optimized As, выберите папку, задайте имя файла, например banner3.

20. Если вы хотите вернуть баннер в исходное состояние, отменив внесенные из­менения, выберите команду Файл > Вернуть или отмените операции в палитре History (История).

21. Для проверки действия созданного  в документе bg3.htm вставьте картинку со своим баннером (<IMG SRC=" banner3.gif" WIDTH=267 HEIGHT=188 BORDER=0 ALT=" banner3  ">

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Конспект для уроков по Web-дизайну"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Культуролог-аниматор

Получите профессию

Интернет-маркетолог

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 672 174 материала в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 16.12.2016 1102
    • DOCX 104 кбайт
    • 10 скачиваний
    • Оцените материал:
  • Настоящий материал опубликован пользователем Бесчастнова Надежда Эдуардовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    • На сайте: 7 лет и 4 месяца
    • Подписчики: 0
    • Всего просмотров: 5885
    • Всего материалов: 6

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Фитнес-тренер

Фитнес-тренер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в профессиональном образовании

Преподаватель математики и информатики

500/1000 ч.

от 8900 руб. от 4150 руб.
Подать заявку О курсе
  • Сейчас обучается 38 человек из 23 регионов
  • Этот курс уже прошли 56 человек

Курс повышения квалификации

Методика преподавания информатики в начальных классах

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Этот курс уже прошли 67 человек

Курс повышения квалификации

Применение компьютерных моделей при обучении математике и информатике в рамках ФГОС ООО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 47 человек из 26 регионов
  • Этот курс уже прошли 181 человек

Мини-курс

Уникальный образ как педагога: основные принципы позиционирования

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Этот курс уже прошли 22 человека

Мини-курс

Основы игровой деятельности дошкольников: роль игр в развитии детей

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 25 человек из 15 регионов
  • Этот курс уже прошли 21 человек

Мини-курс

Психология аддикции: понимание и распознование

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 28 человек из 20 регионов