Создание сайта

· В режиме "С разделением" - на экране отображается Web-страница одновременно в режиме Код и в режиме Конструктор.

· В режиме "Просмотра" Web-страница имеет вид аналогичный ее отображению в Web-браузере.

Команды, которые предназначены для работы с Web-страницами и Web-узлами, расположены в меню Вид программы FrontPage:

· Страница - это режим просмотра и разработки страницы.

· Папки - отображается структура папок текущего сайта.

· Удаленный узел - узел, который находится на сервере сети Интернет.

· Отчеты - предоставляется сводка об Web - узле.

· Переходы - отображается структура переходов между страницами сайта.

· Гиперссылки - открывает список ссылок текущей страницы.

· Задачи - открывает список задач для текущего сайта

Создание Web-страниц в прикладной программе FrontPage

Создание новой пустой Web-страницы

Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.

Создание веб-страницы на основе шаблонов FrontPage

Создать новую страницу можно также на базе одного из шаблонов. Для этого необходимо выбрать команду «Другие шаблоны страниц» в области задач. На экране будет отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны страниц по категориям.

Создание веб-страницы на основе имеющихся Web-страниц в ПК

Создать веб-страницу можно и на базе имеющихся, на компьютере веб-страниц. Для этого необходимо в области задач выбрать команду «Из имеющейся страницы» и в появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.

Обучение созданию Web - страниц

Создание новой пустой Web - страницы

Если при открытии окна приложения FrontPage в нем отображается новая пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач "Пустая страница".

Попытаемся создать Главную страницу нашегоWeb -сайта!

В окне приложения появится новая пустая страница. Сохраняем страницу, но перед тем, как сохранить страницу в окне «Сохранить» создаем папку \\server\Личные папки\Фамилия Имя\Сайт «Динас», в которой создаем вложенную папку Рисунки для рисунков, а затем сохраняем страницу в папке Сайт «Динас». Имя страницы назначаем - index, что означает домашняя или главная страница. Редактор сохраняет страницу с расширением.htm. Таким образом, в папке Сайт «Динас», будет находиться вложенная папка Рисунки и файл index.htm.

Рисунки для веб - страницы должны быть заранее подготовлены и вставлены в папку Рисунки. Скопируем в папку Рисунки рисунок Офис ООО Динас для создания веб - страницы, посвященной ООО «Динас».

Чтобы созданный вами документ везде корректно определялся как написанный на русском языке, проделайте следующее:

Выберите команду Файл Свойства. Откроется диалог Свойства страницы.

На вкладке Язык в выпадающем меню Пометить текущий документ, указав: группы настроек Язык страницы выберите пункт Русский. В выпадающем меню Сохранить документ, используя группы настроек Набор знаков выберите пункт Кириллица. Ок!

Фон страницы

Чтобы станица выглядела более красочно попробуем добавить к нашей странице Фон,. Сделать это можно двумя способами:

1.Зайти в меню Формат Фон и в окне Свойства страницы выбрать через кнопку Обзор необходимый рисунок.



В итоге наша страница примет следующий вид:

Попробуйте выполнить это, но по окончании отмените это действие!

2. В качестве Фона нашей страницы можно использовать уже готовые Темы. Зайдите в меню Формат Тема. Выберите двойным щелчком Тему Волны.



Таблица в качестве каркаса Web - страницы

Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы. Можно применить Макеты страницы, которые расположены на панели задач "Макеты таблицы и ячейки" в области задач. Для этого необходимо зайти в меню Таблицы Макетные таблицы и ячейки. Таким образом, у нас появилась прекрасная возможность выбрать готовые макеты таблиц, но ведь может так получиться, что данные макеты не удовлетворяют нашим требования. Поэтому мы подробно рассмотрим использование Таблиц в качестве каркаса нашей страницы.

Выберите команду Таблица Вставить таблица. Появится диалог Вставка таблицы, позволяющий настроить параметры создаваемой таблицы. (рис.10)

џ В полях ввода со счётчиком Строк и Столбцов группы элементов настройки Размер задаётся количество строк и столбцов, которые будет содержать таблица.

џ В группе элементов управления Положение находятся элементы управления расположением таблицы на странице и положение содержимого ячеек внутри таблицы.

џ В открывающемся списке Выравнивание можно выбирать способ выравнивания содержимого ячеек. Впоследствии для каждой конкретной ячейки можно отдельно настроить параметры выравнивания её содержимого.

џ Список Обтекание задаёт способ обтекания таблицы текстом и другими элементами страницы.

џ Поле ввода со счётчиком Поля ячеек определяет расстояние между границами ячеек и их содержимым.

џ В поле ввода со счётчиком Интервал ячеек задаёт расстояние между соседними ячейками таблицы.

џ Установив флажок Задать ширину, Вы сможете это сделать в поле, находящемся чуть ниже.

џ Поле Задать высоту аналогично предыдущему.

В группе элементов управления Границы располагаются настройки, связанные с отображением границ таблицы.

џ Поле ввода со счётчиком Размер задаёт толщину границы таблицы в точках.

џ Выпадающий список Цвет позволяет выбирать цвет, которым будет отображена граница.

џ Если установить флажок Свернуть границу таблицы, то граница будет отображаться в виде одиночной линии, иначе она будет принимать псевдо-объёмный вид.

В группе Фон собраны элементы, управляющие фоновым изображением таблицы.

џ Список Цвет позволяет выбрать цвет фона таблицы.

џ Если установлен флажок Использовать фоновый рисунок, то вы сможете задать таблице в качестве фона изображение.

Если установить флажок По умолчанию для новых таблиц группы элементов По умолчанию, то все параметры, которые вы установили для этой таблицы, станут настройками по умолчанию для всех следующих таблиц.

Впоследствии, если у вас возникнет необходимость изменит параметры уже созданной таблицы, щёлкните внутри её - появится контекстное меню, в котором необходимо выбрать пункт Свойства таблицы.

Имеется возможность изменять параметры как отдельно взятой ячейки, так нескольких ячеек сразу. Для этого необходимо выделит одну или несколько ячеек, вызвать контекстное меню и выбрать в нём пункт Свойства ячейки.

В группе элементов управления Положение находятся элементы управления расположения содержимого ячейки.

· В открывающихся списках Выровнять по горизонтали и по вертикали, вы сможете выбрать способ выравнивания содержимого ячейки.

· В группе элементов управления Границы, располагаются настройки, связанные с отображением границ таблицы. Список Цвет позволяет выбрать цвет границы ячейки.

· В группе Фон собраны элементы, управляющие фоновым изображением ячейки. Список Цвет выбирает цвет её фона. Флажок Использовать фоновый рисунок задаёт в качестве фона изображение.

Имеется также дополнительные возможности: добавить и удалить столбцы, разбить и объединить ячейки. Все эти команды можно найти тоже в контекстном меню при выделении ячеек. Аналогичные команды вы уже встречали в программах Word и Eхcel, поэтому описывать их нет смысла.

Используя полученный выше теоретический материал, попытайтесь создать две таблицы.

Должно получиться нечто подобное!

Настало время написать на нашем сайте название фирмы, которой он принадлежит. Но делать мы это будем не в виде обычного текста, а при помощи объекта WordArt (Мы надеемся, что вы знаете, как это сделать!) Таким же образом вставьте слово Акция в третью ячейку нижней таблицы и Вакансия в первую ячейку.. А теперь отделите название фирмы Горизонтальной линией: Вставка Горизонтальная линия.

Текстовое оформление сайта

Существует множество вариантов оформления текстов на Web - страницах. Использование потенциала текстового форматирования позволяет делать тексты более приятными визуально, оформлять их в согласии с вашими авторскими задумками, даёт возможность явно подчёркивать важные слова и мысли.

Поскольку вы решили заняться изучением такого непростого продукта, как создание Web- сайтов, то мы просто уверены в том, что вы знаете, как форматируется текст ну, например, в такой программе, как Microsoft Word. Так вот редактирование текстов в программе FrontPage аналогично этому, поэтому, естественно на этом останавливаться мы тоже не будем.

Скажем только, что для этого используется панель форматирования либо строка меню Формат Шрифт Абзац.

Самостоятельно введите весь текст, который вы видите на рисунке15.При его редактировании можете немного пофантазировать. НО не переусердствуйте!!!

Вставка иллюстраций

Невозможно представить себе HTML - страницу без элементов графики, рисунков и т.д. Умело подобранная графика привлечёт внимание посетителей на страницу, акцентирует их внимание на тех или иных моментах нашей страницы. Поможет выделить логические подразделы и придаст нашей странице особую неповторимость, но при этом при подборе изображений следует учесть следующие моменты. Во-первых, не надо использовать в качестве фона изображение, которое затрудняет чтение текста документа. Например, слишком пёстрые, яркие и т.д. Не надо использовать большие изображения, которые затянут до бесконечности время загрузки. Если всё- -таки надо вставить изображение на страницу, то лучше создать его маленькую копию, и после этого назначить ссылку на страницу с исходным большим изображением, чтобы пользователь мог сам решить, если он очень хочет загрузить изображение в исходном виде. А так размер одного файла изображения не должен превышать 20-25 кб. На Web - страницах обычно помещают изображения двух форматов GIF и JPG. Такие изображения корректно отображаются во всех браузерах, поддерживающих показ графики. Конечно, можно вставить и файлы с другими форматами, например BMP, TIF, но при этом надо учесть, что при записи на диск FrontPage их автоматически превратит в один из двух базовых форматов.

Рассмотрим преимущества и недостатки этих форматов. GIF -это стандартный формат для небольших графических изображений, таких, как кнопки, пиктограммы. Он не поддерживает теней и полутонов и в его основе лежит палитра из 256 цветов. JPG по сравнению с GIF, поддерживает гораздо больше цветов -более 16 млн., что делает его наиболее выгодным для отображения графических изображений с плавными переходами полутонов. Кроме того, размер JPG файла можно уменьшать с различной степенью сжатия, но надо помнить, что в отличии от файлов GIF,сжатие файлов JPG производится с потерей их качества. Чем больше сжатие, тем больше потеря, но надо принять во внимание, что JPG это достаточно хороший формат: он даёт высокую степень сжатия при довольно маленьких потерях, практически не видных на глаз.

Всё, что касается график более подробно мы рассмотрим чуть дальше, пока скажем только, что вставить картинку можно опять же также, как и в других программах.

Давайте попробуем вставить в страницу фото Каталог из папки рисунки.



Подготовка графики с помощью Adobe PhotoShop и Adobe ImageReady

Внешний вид и привлекательность сайта в значительной мере зависят от наполняющей его графики. Графика - это визуальное средство подчеркивания и выделения информации, раскрываемой текстом Web-страницы, которое в то же время не должно отвлекать внимание посетителя от самого текста. Поэтому подготовке графики следует уделить самое серьезное внимание.

Среди программ профессиональной подготовки растровых изображений пожалуй нет программы более совершенной и более популярной, чем Adobe PhotoShop.

Adobe PhotoShop и Adobe ImageReady хорошо дополняют друг друга. В Adobe PhotoShop обрабатываются фотографии, создаются графические кнопки, баннеры и другие изображения для Web-сайта. А в ImageReady полученные изображения оптимизируются, разрезаются на фрагменты и т.д.

Задание 1. Создание баннера.

Баннер представляет собой рекламный рисунок для рекламы в Интернете созданного сайта. Как правило, баннер - это графическое изображение прямоугольной формы в формате Gif или Jpeg. Баннер помещается на Web-странице и имеет ссылку на сайт рекламодателя. Размеры баннеров стандартизированы.

Размер баннера в пикселах	Тип баннера
468х60	Full Banner (Стандартный баннер)
234х60	Half Banner (Баннер половинного размера)
88х31	Micro Ban (Микро полоса)
120х90	Button1 (Кнопка 1)
120х60	Button2 (Кнопка 2)
120х240	Vertical Banner (Вертикальный баннер)
125х125	Square Banner (Квадратный баннер)
728х90	Leaderboard («Перетяжка» вверху страницы)

Запустите Adobe PhotoShop (Пуск > Программы>Adobe PhotoShop CS2)

Выберите команду Файл>Новый. На экране появится диалог Новый. Заполните его по образцу:

В поле Имя в верхней части диалога можно указать имя создаваемого документа. По умолчанию предлагается Безимени-1. Не изменяйте название. Это можно сделать позже, при сохранении рисунка.

Параметр Разрешение определяет разрешение создаваемого рисунка - количество пикселов (точек, из которых строится изображение) на дюйм. Для экрана этот параметр составляет 72.

В результате получаем следующее:

Баннер, который мы будем создавать, состоит из простого логотипа компании ООО «ДИНАС» и двух сменяющих друг друга анимированных надписей, приглашающих посетить сайт компании. Начнем с подготовки логотипа, который в свою очередь будет состоять из трех объектов, размещенных один внутри другого: текста, эллипса и прямоугольника.

Нарисуем в левой части окна документа прямоугольную область размером 150х50 пикселов, которую затем зальем выбранным цветом.

Выберите инструмент Прямоугольная область на панели инструментов. Настройте панель свойств инструмента (в верхней части окна) как показано на рисунке:

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

Снимите выделение (Меню Выделение>Снять выделение).

Создадим внутри прямоугольника эллиптическую область с размерами горизонтальной и вертикальной осей 140х40 пикселей с помощью инструмента Овальная область. Если область выделения нужно будет расположить иначе, воспользуйтесь командой меню Выделение>Трансформировать выделенную область. Залейте область выделения белым цветом. Снимите выделение.

Сохраните документ в своей папке с именем Banner.psd, которое позволит нам редактировать свой документ в дальнейшем.

Добавим в создаваемый логотип надпись ООО Динас. Когда в рисунок добавляется текст, он всегда помещается на отдельный слой. Слои дают возможность редактировать отдельные элементы изображения независимо друг от друга. Управление слоями осуществляется с помощью палитры Слои. Видимость любого слоя может быть отключена при нажатии на кнопку рядом с названием слоя. Кроме того, для каждого слоя можно назначать свой стиль оформления, используя палитру Стили. Выбранный стиль присваивается всем объектам, находящимся на данном слое. С помощью кнопки в правом верхнем углу панели стилей вы можете выбрать подходящий для вас набор из выпадающего списка панели.

Нажмите кнопку Горизонтальный текст на панели инструментов, установите текстовый курсор в нужное место и напишите текст. Самостоятельно оформите его, используя возможности панели свойств. Для точного позиционирования текста можно использовать инструмент Перемещение . Должно получиться примерно следующее:

Размещено на http://www.allbest.ru/

Создадим еще 2 текстовых слоя с надписями «Ищите канцтовары недорого?» и «Заходите СЮДА!», расположенными на рисунке справа от логотипа, одна под другой так, чтобы они могли сменять друг друга. Присвойте каждому из слоев подходящий на ваш взгляд стиль. Должно получиться примерно следующее:

С помощью кнопкиНовый слой в нижней части панели Слои создайте новый слой. Измените его название на Дверь (щелкните на названии слоя в палитре слоев). Создадим здесь рисунок открытой двери, чтобы посетителю сайта, увидевшему баннер, было понятно, куда нужно заходить.

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

Сначала нарисуем основу двери с помощью инструмента . Залейте созданное выделение цветом. В дальнейшем можно использовать какой-либо стиль слоя на ваше усмотрение. Снимите выделение.

Теперь внутри данного прямоугольника нарисуем меньший прямоугольник - дверную коробку. Залейте его цветом, отличным от белого. В дальнейшем из этого прямоугольника будет создана дверь.

Теперь можно выполнить преобразование области выделения с помощью команды Редактирование>Трансформирование>Искажение. Изменим положение левого углового маркера, перетащив его на середину нижней стороны белого прямоугольника.

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

Вид баннера на данном этапе представлен на рисунке:

Сохраните файл. В дальнейшем он будет анимирован.

Задание 2. Бесшовный фон.

Фон web-страниц в значительной мере определяет стиль и привлекательность всего сайта.

В программе PhotoShop создайте документ размером 100х100 пикселов с черным цветом фона и белым цветом переднего плана. Для этого нажмите сначала кнопку, чтобы установить цвета по умолчанию, а затем кнопку чтобы поменять местами цвета переднего и заднего плана. И выберите команду Файл>Новый.

Выберите команду Фильтр>Рендеринг>Облака. Фильтр будет применен, и на изображении появится узор в виде облаков.

Теперь применим команду Фильтр>Рендеринг>Облака с наложением. Узор на изображении изменится. Повторное многократное применение этого фильтра создает эффект «прожилок», который напоминает текстуру мрамора. Для повторного применения последнего использованного фильтра достаточно нажать комбинацию клавиш Ctrl+F. Примените это сочетание несколько раз. Получится что-то вроде этого:

Выберите команду Фильтр>Стилизация>Свечение краев. В появившемся диалоговом окне настройте параметры эффекта следующим образом:

Ширина краев - 1

Яркость краев - 20

Смягчение - 1.

После применения фильтра изображение будет затемнено. Воспользуемся командой Изображение>Коррекция>Яркость/Контрастность. Установите следующие значения:

Яркость - +50

Контрастность - +30

Теперь необходимо тонировать полученное изображение, состоящее из оттенков серого с помощью команды меню Изображение>Коррекция>Цветовой тон/Насыщенность.

Установите флажок Тонирование и значения ползунков:

Цветовой тон - 216

Насыщенность - 60

Яркость - +17

Сохраните полученное изображение в своей папке под именем Fon.psd

На этом создание фоновой текстуры можно считать законченным. Но, так как рисунок будет повторен на Web-странице много раз, между фрагментами фона будут видны швы. В Adobe ImageReady имеется специальный фильтр - Конструктор мозаики, который позволяет удалить швы, создавая таким образом бесшовный фон.

Нажмите кнопку Редактировать в ImageReady в нижней части панели инструментов. Будет запущена программа Adobe ImageReady, и в ее рабочем окне откроется документ Fon.psd.

Выберите команду Фильтр>Другие>Конструктор мозаики. Данный фильтр смешивает пикселы на краях изображения для создания бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет выполняться размытие краев рисунка для исключения швов между плитками при повторении изображения, на web-странице.

В поле Width (Ширина) указывается ширина полосы у края изображения, в пределах которой должен происходить плавный переход. Обычно используются значения от 5% до 15%. Оставим значение, предложенное по умолчанию - 10%.

При установленном флажке Resize Tile to Fill Image (Изменить размер плитки для заполнения изображения), размер плитки подгоняется под размер изображения. Если сбросить этот флажок, на Web-странице плитки не будут прилегать вплотную друг к другу. Установите этот флажок.

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в котором изображение отражается по горизонтали и вертикали, создавая таким образом оригинальный узор.

Чтобы увидеть как будет выглядеть фон в программе просмотра Web-страниц следует указать программе, что данное изображение должно использоваться как фон.

Выберите команду Файл>Настройки экспорта>Фон.

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

Теперь можно просмотреть фон в браузере. Выберите команду Файл>Предварительный просмотр в>iexplore. Будет запущена программа Internet Explorer, в окне которого Вы увидите бесшовный фон. Кроме фонового рисунка в окне программы выводится информация о формате изображения, его размерах, размере файла и параметрах оптимизации, а ниже - HTML код автоматически сгенерированного файла.

Закройте окно браузера.

Чтобы созданное изображение можно было использовать как фон Web-страницы, его необходимо оптимизировать и сохранить в Web-формате.

Щелкните мышью на ярлыке 2 варианта в верхней части окна документа. Будет выполнена оптимизация с последними установленными параметрами, и вы увидите оригинальное и оптимизированное изображение.

Сохраните оптимизированный документ в своей папке на Server под именем Fon.gif с помощью команды меню Файл>Сохранить оптимизированный.

Закройте программу Adobe ImageReady без сохранения документа Fon.psd.

Откройте программу FrontPage. Для сайта ООО «Динас» создайте новую страницу на основе обычного шаблона страницы, назовите ее Kontakt.htm и сохраните в корневой папке сайта. Назначьте созданный фон данной странице с помощью команды меню Формат>Фон>Форматирование. Используя возможности макетных таблиц выберите для созданной страницы макет вида. В верхней части расположим название страницы, область слева будет служить для перехода на другие страницы нашего сайта, в центральной части будет представлена контактная информация, и в нижней части расположим служебную информацию по сайту. Все работы выполним силами графических редакторов Adobe PhotoShop и Adobe ImageReady.



Задание 3. Создание заголовка страницы.

Создайте в программе Adobe PhotoShop новый документ с размерами, соответствующими размерам заголовочной части страницы (посмотреть размер с помощью макета). Цвет фона - белый.

Выберите инструмент Градиент на панели инструментов и настройте свойства инструмента как показано на рисунке. С помощью данного инструмента задавайте различные направления перемещения указателя по документу. Каждый раз получаются самые разные изображения. Не бойтесь экспериментировать. В итого должно получиться что-то наподобие:

Используя команду меню Изображение>Коррекция>Цветовой тон/Насыщенность придайте изображению однородный цвет с помощью флажка Тонирование и самостоятельно настройте подходящие на Ваш взгляд параметры, использую возможности всех трех ползунков.

Усилим эффект с помощью команды меню Фильтр>Рендеринг>Блик со следующими настройками:

Яркость - 60%

Тип объектива - начало ролика.

В окне просмотра установите щелчком мыши блик в подходящее положение.

Добавим текстовую надпись, для которой будем использовать свой собственный металлический стиль.

Напишите текст, с помощью кнопки в нижней части панели слоев откройте диалоговое окно настройки свойств для текстового слоя.

Сначала выберите пункт Тиснение. Перейдите к пункту Контур и выберите из стандартной библиотеки стиль Double Ring. Величину объема задайте соответственно размеру текста. Настройте свойства как показано на рисунке:

Следующий шаг - выберите в окне Стиль слоя пункт Наложение градиента. Залейте надпись простым черно-белым градиентом:

Добавляем Тень:

Меняем цвет Внутреннего свечения на черный. Режим смешивания свечения установите Нормальный.

Добавляем обводку белым цветом:

Окончательный результат представлен на рисунке. Сохраните его под именем Nazvanie.jpg в корневой папке сайта.

Откройте страницу Kontakt.htm в программе FrontPage и назначьте созданное изображение верхней макетной ячейке. Сохраните результат.

Задание 4. Разрезаем изображения.

В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами является разработка интерактивной графики. Одной из разновидностей такой графики являются изображения, разбитые на фрагменты (slices). Каждый фрагмент представляет собой прямоугольный участок изображения, который становится ячейкой таблицы в HTML-файле. Каждый такой фрагмент можно «оживить», применив к нему эффект Rollover (Наведение). При просмотре в браузере, в зависимости от действий мыши, состояние этого фрагмента будет меняться.

Создадим меню для левой части страницы Kontakt.htm.

В программе FrontPage оцените размер левой части макетной таблицы. Убедившись, что в программе PhotoShop закрыты все документы, перейдите в программу ImageReady с помощью кнопки .

Установите на панели инструментов Adobe ImageReady белый цвет переднего плана и синий цвет фона и создайте новый документ с нужным размером и синим цветом фона.

Введите названия пунктов меню как показано на рисунке, так, чтобы каждый из них располагался на отдельном слое. Сохраните документ в своей папке на Server под именем menu.psd.

Теперь можно приступить к нарезке изображения. Эта операция выполняется с помощью инструмента Раскройка на панели инструментов.

Вырежем в изображении первый пользовательский фрагмент, включающий название пункта меню Главная страница. Установите указатель мыши в левом верхнем углу окна документа. Нажмите и удерживайте левую кнопку мыши. В левом верхнем углу фрагмента появится 2 серых значка-индикатора . Левый значок означает порядковый номер фрагмента, а правый - его тип - изображение. Фрагменты нумеруются по порядку слева направо и сверху вниз. Созданный фрагмент будет выделен также более ярким цветом и ему будет присвоен номер 01. автоматически будет создан фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент будет отличаться от выделенного пользовательского фрагмента оттенком. В его левом верхнем углу, кроме значков-индикаторов номера и типа, появится значок связи данного фрагмента с пользовательским. Если размер вырезанной части изображения вас не устраивает, его можно изменить, переместив маркеры выделения с помощью инструмента Выделение фрагмента. Этим же инструментом можно выделить фрагмент и переместить его.

С помощью инструмента Раскройка вырежьте все остальные фрагменты с названиями пунктов меню. Всего должно получиться 5 пользовательских фрагментов.

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

Нарезать изображение можно и другим способом - создав выделенную область и выбрав команду меню Выделение>Создать фрагмент из выделенной области.

Для каждого из полученных фрагментов создадим эффект Rollover (Наведение) таким образом, чтобы при установке указателя в браузере на каждом из пунктов меню цвет фона этого фрагмента менялся с синего на темно-синий. Начнем с первого фрагмента. Его необходимо предварительно выделить. Включите панель инструментов Web-содержимое, если она отсутствует в рабочем окне (Окно>Web-содержимое) и увеличьте высоту окна палитры, чтобы были видны все фрагменты.

В палитре Web-содержимое уже создан первый кадр эффекта для состояния Нормальный, при котором указатель мыши находится за пределами выбранного фрагмента. Фрагмент menu_01 выделен. Имя фрагмента состоит из имени файла без расширения и порядкового номера фрагмента.

Нажмите кнопку Создать состояние ролловера в нижней части панели Web-содержимое, чтобы создать кадр для следующего состояния - Курсор наведен.

Теперь нужно определить как будет выглядеть выделенный фрагмент изображения при событии Курсор наведен, т.е. когда указатель мыши находится над фрагментом. При этом цвет фона должен меняться на темно-синий. Для этого создадим из фрагмента выделенную область, поместим ее на новый слой и зальем темно-синим цветом.

Выберите команду Выделение>Создать выделенную область из фрагмента. Выделенная область будет создана.

Выделите щелчком мыши в палитре Слои слой Задний план.

Нажмите кнопку Создать новый слой в нижней части палитры Слои. Над слоем Задний план появится новый слой Слой 1.

Установите темно-синий цвет для переднего плана.

С помощью команды Редактирование>Выполнить заливку заполните выбранным цветом переднего плана выделенную область активного слоя Слой 1. Снимите выделение (Выделение>Отменить выделение фрагментов).

Таким образом мы определили состояние Курсор наведен для фрагмента изображения с надписью Главная страница.

Обратите внимание на то, что для состояния Нормальный фрагмента menu_01 индикатор видимости слоя Слой 1 должен быть сброшен. Чтобы убедиться в этом выполните следующие шаги:

Щелкните на имени фрагмента menu_01 в палитре Web-содержимое.

Если индикатор видимости слоя - значок глаза присутствует напротив слоя Слой 1 в палитре Слои, сбросьте данный индикатор щелчком мыши.

Щелкните мышью на строке Курсор наведен под фрагментом menu_01 в палитре Web-содержимое, чтобы выделить состояние эффекта Rollover для этого фрагмента.

Если индикатор видимости слоя - значок глаза отсутствует напротив слоя Слой 1 в палитре Слои, установите данный индикатор.

Аналогичным образом создайте эффект Курсор наведен для остальных 4 фрагментов.

Чтобы просмотреть как созданное Вами меню будет работать в визуальном режиме нажмите кнопку Предварительный просмотр документана панели инструментов и протестируйте созданное вами изображение с помощью мыши.

После того как изображение нарезано и для фрагментов создан эффект Курсор наведен есть 2 варианта дальнейших действий. Можно сохранить готовые фрагменты изображения и затем вручную в текстовом редакторе вставить ссылки на них в код HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe ImageReady и сохранить вместе с нарезанными частями изображения также и HTML файл, который будет создан автоматически с уже готовым меню. Назначение ссылок фрагментам изображения выполняется с помощью палитры Фрагмент (Окно>Фрагмент).

Выделите с помощью инструмента Выделение фрагмента фрагмент изображения с надписью Главная страница. Задайте свойства выделенного фрагмента в палитре Фрагмент.

В поле Имя указано имя фрагмента, предлагаемое по умолчанию - menu_01. Под этим именем фрагмент будет сохранен.

В открывающемся списке Тип можно выбрать тип фрагмента. По умолчанию тип всех фрагментов - Изображение, т.е. фрагмент содержит графические данные.

Чтобы связать выбранный фрагмент изображения с другим HTML документом, который будет загружаться в браузере после щелчка мышью на данном фрагменте, следует в поле URL ввести адрес нужного документа. Напишите в этом поле index.html т.к. с данной ссылки будет открываться главная страница.

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

В программе FrontPage создайте еще 2 новых страницы: Novosty.html и O_Nas.html. Сохраните их в корневой папке сайта.

Используя возможности палитры Фрагмент настройте ссылки с оставшихся фрагментов как показано на рисунке.

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

Выделите все фрагменты Фрагменты>Выделить все пользовательские фрагменты.

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

Теперь можно выполнить оптимизацию всех фрагментов одновременно.

Щелкните мышью на ярлыке 2 варианта в верхней части окна документа. Будет выполнена оптимизация документа с параметрами, применявшимися при последней оптимизации.

В палитре Оптимизация, которая по умолчанию находится в правом верхнем углу окна, выберите формат GIF. В открывающемся списке Цвета палитры Оптимизация выберите 16.

Перед сохранением документа желательно еще определить цвет фона Web-страницы, которая будет создана автоматически, и на которую будет помещена таблица с нарезанными частями изображения. Если цвет фона не определить, то по умолчанию будет использован белый цвет.

Выберите команду Файл>Настройки экспорта>Фон. На экране появится одноименный диалог.

Установите переключатель Изображение. В открывающемся списке Цвет фона выберите Основной цвет. Закройте диалоговое окно.

Выберите команду Файл>Сохранить оптимизированный. Сохраните документ в корневой папке сайта.

В процессе сохранения будет автоматически создана HTML-страница, имя которой - menu - предлагается по умолчанию в поле ввода Имя файла. Одновременно с файлом HTML будут сохранены также нарезанные фрагменты, так как в открывающемся списке Тип файла автоматически выбрано HTML and Images (*.html).

Откройте созданную страницу menu.html с помощью программы Блокнот. Скопируйте автоматически сгенерированный текстовый фрагмент начиная со слов <!-- ImageReady Preload Script (menu.psd) --> и заканчивая словами <!-- End ImageReady Slices --> включительно.

Откройте страницу Kontakt.html в программе FrontPage. Установите текстовый курсор в левой ячейке макетной таблице и перейдите в режим С разделением. Отследите положение текстового курсора в коде, и вставьте из буфера скопированный ранее фрагмент. Перейдите в режим конструктора. Сохраните результат и просмотрите в программе-обозревателе.

Дополните содержание страницы Kontakt.htm приведенной ниже информацией, чтобы привести ее к виду как на рисунке. Чтобы в браузере отображалось название страницы Контактная информация задайте это через свойства страницы (пункт Название). Для привлечения внимания посетителя оживим верхнюю строку текста - сделаем ее бегущей. Для этого выделите текст и воспользуйтесь командой меню Вставка>Вэб-компонент>Бегущая строка. Самостоятельно настройте параметры эффекта в соответствии со своими пожеланиями. Сохраните результат и просмотрите в браузере.

сайт web документ программа

Задание 5. Создание анимации с помощью Adobe ImageReady.

Создание анимации в программе базируется на использовании слоев. Каждый элемент анимации помещается на собственный слой. Это позволяет изменять положение и вид элемента в серии кадров, используя команды и параметры палитры Слои. Совместно с данной палитрой используется палитра Анимация. С ее помощью можно назначать каждому кадру время задержки, создавать новые кадры, автоматически генерировать промежуточные состояния и т.д.

«Оживим» баннер, сохраненный в файле Banner.psd.

Запустите программу ImageReady. Отобразите панель Анимация (Окно>Анимация). Откройте файл Banner.psd.

Самый простой вид анимации - это сменяющаяся последовательность кадров. Создадим эффект анимации баннера таким образом, чтобы надписи Ищите канцтовары недорого? и Заходите СЮДА! последовательно сменяли друг друга через определенные промежутки времени и чтобы рисунок открытой двери появлялся после надписи Заходите СЮДА!

Прежде всего необходимо определить изображение для первого кадра анимации. Это можно сделать, включив отображение нужных слоев и выключив отображение ненужных. Для первого кадра нужно выключить отображение слоя Заходите СЮДА! и слоя Дверь. Остальные слои оставьте включенными. Теперь, когда создан первый кадр анимации, создадим второй кадр.

Нажмите кнопку Создать дубликат текущего кадра в нижней части панели Анимация. В ней появится и будет выделен темной рамкой второй кадр. Темное выделение указывает на то, что теперь этот кадр активный, и к нему будут относиться все операции редактирования. Изображение на втором кадре полностью совпадает с первым, так как был создан дубликат кадра. И теперь это изображение надо изменить. Для текущего кадра выключим видимость слоя Ищите канцтовары недорого? и включим изображение слоя с надписью Заходите СЮДА!

Добавим еще один кадр анимации. В палитре Анимация появится и станет активным третий кадр, для которого включим дополнительно отображение двери.

Действуя описанным способом можно создавать для анимации любое количество кадров и для каждого из них с помощью палитры Слои определять графическое содержимое.

Время задержки для каждого кадра анимации по умолчанию равно 0 секунд. Это время отображается в палитре Анимация под миниатюрой каждого кадра. Если воспроизводить анимацию с такой задержкой, кадры будут сменять друг друга слишком быстро. Это время можно легко изменить. Предварительно кадры анимации нужно выделить, удерживая клавишу Ctrl. Щелкните мышью в палитре Анимация на миниатюрном значке треугольнике справа от надписи 0с под миниатюрой первого кадра. На экране появится меню времени задержки.

Выберите 1.0 (1 секунда). Это значение отобразится в палитре Анимация под миниатюрами всех трех кадров.

Просмотрим полученный результат.

Нажмите кнопку (Воспроизводит/останавливает анимацию) в нижней части палитры. Начнется проигрывание эффекта. Изображение кнопки изменится на. В окне документа вы увидите, как периодически сменяются надписи Ищите канцтовары недорого? и Заходите СЮДА! Причем после появления последней надписи появляется также рисунок открытой двери.

Adobe ImageReady позволяет автоматически сгенерировать последовательность кадров между двумя указанными и отличающимися друг от друга кадрами, которые в совокупности создадут плавный переход от первого кадра к последнему.

Изменим анимацию таким образом, чтобы надпись Заходите СЮДА! конкретизируя приглашение, двигалась в направлении постепенно появляющейся открытой двери и «заходила» в нее. Измените время задержки второго и третьего кадра на 0.2 секунды. Теперь для третьего кадра анимации следует изменить положение надписи так, чтобы ее правый край «заходил» в открытую дверь.

Сделайте активным третий кадр. Используя инструмент Перемещение расположите надпись как показано на рисунке.

Выделите второй и третий кадр, чтобы сгенерировать между ними последовательность кадров, которые создадут эффект анимации. Нажмите кнопку Создать промежуточные кадры в нижней части палитры Анимация. На экране появится диалог Создание промежуточных кадров. Заполните его как показано на рисунке.

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

Группа элементов управления Атрибуты слоя позволяет определить, какие атрибуты слоев будут изменяться в добавляемых кадрах - Положение, Непрозрачность, Эффекты.

Закройте диалог. В палитре Анимация между вторым и третьим кадром будет добавлено еще 10 кадров, и таким образом, создан плавный переход изображения.

Проиграйте анимацию. Вы увидите, что после исчезновения надписи Ищите канцтовары недорого? возникает надпись Заходите СЮДА! которая движется в направлении постепенно появляющейся открытой двери и «заходит» в нее. Анимация готова. Теперь ее нужно оптимизировать и сохранить в формате Gif.

Оптимизация нужна для обеспечения наименьшего размера файла при минимальных потерях качества.

Нажмите кнопку в правом верхнем углу палитры Анимация и в появившемся меню выберите команду Оптимизировать анимацию. На экране появится одноименный диалог.

При установленном флажке Ограничительная рамка Adobe ImageReady в каждом кадре удаляет те фрагменты изображения, которые присутствовали в предыдущем кадре, и сохраняет только измененные, по сравнению с предыдущим кадром, области.

При установленном флажке Удаление лишних пикселов удаляются все пикселы каждого кадра, которые не изменены по сравнению с предыдущим кадром. При установке обоих флажков подбираются наилучшие параметры оптимизации анимации. Закройте диалог.

Теперь нужно оптимизировать изображение. Настройте палитру Оптимизация как показано на рисунке.

Просмотрите созданную анимацию в браузере с помощью кнопки на панели инструментов. Должно получиться что-то в этом роде:

Чтобы в дальнейшем иметь возможность редактировать созданную анимацию, документ следует сохранить в формате psd с помощью команды Файл>Сохранить. Сохраненный таким образом файл можно будет открыть для редактирования изображения в программе Adobe PhotoShop, но в этой программе невозможно будет проигрывать анимацию и редактировать ее кадры. Такую возможность предоставляет только программа ImageReady.

Последний шаг - сохранение оптимизированного изображения для Web в формате Gif с помощью команды Файл>Сохранить оптимизированный. Сохраните полученную анимацию в своей папке на Server.

Размещено на Allbest.ru