Тема: Використання програми Front Page для автоматизації створення Web-сторінки.
Мета:Навчитися використовувати можливості програми Front Page для автоматизації створення Web-сторінки.
Теоретичні відомості
В настоящее время создан ряд специальных программ, которые помогают создавать Web-страницы в автоматическом режиме, не используя теги язика HTML. К таким программа относится и программа Front Page, входящая в состав MS Office.
Задание 1. С использованием программы Front Page создать Web-страницу следующего содержания:
Ход выполнения задания:
Создать в своей папке новую папку для выполнения этой лабораторной работы, например: d:\College\...\Ivanov\LR10.
Загрузить программу MS Front Page (Пуск/Программы/…/Front Page)
Выбрать Файл/Создать/Другие шаблоны Web-узлов/Пустой Web-узел (создать новый пустой Web – узел), но в окошко «Укажите расположение нового Web-узла» скопируйте адрес новой папки: d:\College\...\Ivanov\LR10.
Выбрать в меню Файл/Создать/Другие шаблоны страниц/Страницы рамок/Вертикальная граница.
Выбрать в левом фрейме Создать страницу и ввести содержание
Выбрать в правом фрейме Создать страницу и ввести текст главной страницы.
Вставить картинку: Вставка/Рисунок/Картинки.
Преобразуйте пункты содержания в гиперссылки. (Выделите текст пункта, выберите в меню Вставка/Гиперссылка, введите в строке URL имя документа, на который будет переходить эта ссылка. Эти страницы будут созданы Вами позже.)
Создайте бегущую строку, привлекающую внимание к вашему сайту (Вставка/Веб-компонент/Бегущая строка). Текст бегущей строки : Экономика +Информатика+ Компьютерные технологии.
Примените к тексту Добро пожаловать на наш сайт анимационный эффект подобно предыдущему пункту, выберите параметры по своему усмотрению.
Просмотрите полученную страницу во вкладке Просмотр (в нижней части рабочей области). Иногда спроектированный Вами документ при просмотре выглядит несколько иначе.
Перейдите в режим Конструктора и добавьте оформление всех созданных страниц Формат/Тема.
Снова просмотрите полученный документ.
Перейдите в режим Конструктора.
Сохраните полученные страницы под именами: l.htm – левый фрейм, r.htm – правый фрейм, index.htm – всю страницу.
Перейдите к режиму Папки и просмотрите структуру файлов Web – узла.
Переместите картинки в папку Images. Ссылки, при этом будут изменены автоматически.
Задание 2. Создайте документ, содержащий сведения о назначении основных тегов HTML (список тегов и их назначение должны быть размещены в таблице).
Для вставки таблицы выбрать Таблица/Вставить/Таблица.
Задание 3. Просмотрите связи (гиперссылки) между документами, используя режим Гиперссылки (связи).
Задание 4. Просмотрите режимы Код и С разделением.
Практична робота №11
Тема: Промальовування макету Web-сторінки в редакторі Adobe PhotoShop. Створення кнопок
Мета:Навчитися промальовувати макет та створювати кнопки на Web-сторінці в редакторі Adobe PhotoShop
Завдання 1: Промалювати макет Web-сторінки.
Що робити? |
Як робити? |
Создать в программе Adobe Photoshop новый документ с параметрами: Размер: 800Х1024 Разрешение: 72 пиксель/дюйм Режим: RGB Содержание: Белый |
File, New, указать параметры, ОК
|
Вывести Линейки |
View, Rulers |
Выбрать единицу измерения на Линейках - пиксель |
ПКМ на Линейке, Пиксели
ПКМ |
Добавить Направляющие для разметки рабочих областей страницы: Баннер – не менее 60 пк Левая область навигации – 200 пк Область горизонтальной навигации – около 50 пк
|
ЛКМ на Линейке, сместить Направляющую на нужное расстояние
Область логотипа
Область баннеров
Левая область
навигации
Область основного
содержания
Область
горизонтальной навигации |
На палитре Слоев создать и назвать соответственно Top и Left два новых слоя для Баннерной области и для Левой области навигации |
Получить:
Или: Layer, New, Layer, ввести имя слоя, ОК
|
Выбрать слой Left |
ЛКМ на слое Left в палитре слоев. Выбранный слой выделяется синим прямоугольником.
|
Взять инструмент Прямоугольное выделение |
|
Выделить Левую область навигации |
|
Выбрать цвет переднего плана |
ЛКМ на Set foreground color:
Установить опцию: Only Web Colors
Выбрать цвет. Например: серый - #333333 |
Взять инструмент Заливка и раскрасить выделенную область |
ЛКМ внутри выделенной области
|
Выбрать слой Top. Инструментом Прямоугольное выделение выделить Баннерную область и окрасить ее (например, в небесно-голубой цвет) |
|
Определим Горизонтальную навигационную панель. Добавим еще одну горизонтальную Направляющую. |
ЛКМ на горизонтальной линейке и перетащить вниз.
|
Зберегти файл у своїй папці з назвою Maket.psd |
|
Завдання 2: Відкрити файл Maket.psd. Створити кнопки.
Що робити? |
Як робити? |
Выбрать серый цвет, который применили для левой панели навигации. |
Взять инструмент Eyedropper Tool и щелкнуть внутри левой навигационной области
|
Выбрать инструмент Rounded Rectangle Tool и указать следующие параметры: Shape layers, Paths, Fill pixels, Radius: 10 px |
|
Активизируйте слой Left |
|
Нарисуйте мышью кнопку |
|
Выполните растеризацию слоя с кнопкой |
ПКМ на слое Shape1, Растеризация слоя
|
Добавить эффекты слоя (тень, свечение и т.д.) |
Layer, Layer Style, Drop Shadow, подобрать настройки
Например,
|
Переместить кнопку в необходимое место на Навигационной панели |
Выбрать инструмент Перемещение
Сместить кнопку
Если необходимо, поменять местами слои Top и Left, перетащив один из них мышкой.
|
Переименуйте слой Shape1 на Button1 |
2ЛКМ на Shape1, ввести: Button1
|
Скопируйте кнопку три раза (или нужное число раз, чтобы получить необходимое количество кнопок) |
Alt+ЛКМ и перетащить
|
Выберите размещение первой и последней кнопок (для удобства можно временно установить опцию Auto Select Layer) |
|
Свяжите все слои кнопок, щелкая слева от пиктограмм слоев на палитре слоев. Вы увидите пиктограммы цепи, указывающие на связь слоев. |
|
При выбранном инструменте Move (Перемещение) Вам будут доступны кнопки Align на панели инструментов. Выберите опции Align top Edges (выровнять по верхнему краю) и Distribute horizontal centers (Распределить относительно горизонтальных центров) |
Получить:
|
Добавить текст к кнопкам |
Указать параметры надписи: цвет – белый, размер – 30, сглаживание – резкий (sharp), начертание - bold
Щелкнуть на кнопке и ввести надпись:
Таким же образом добавляем надписи на каждую кнопку (надписи должны быть в разных слоях)
|
Свяжите слои текста |
|
Слои текста выровнять и центрировать |
|
Сгруппировать слои в папки в палитре слоев |
Выберите один из текстовых слоев и убедитесь в том, что все текстовые слои связаны. Нажать на стрелку в правом верхнем углу палитры слоев, выбрать пункт New Set From Linked
Назвать созданный набор Button text:
Повторите те же операции, чтобы создать набор из кнопок и назовите его Button:
Чтобы текст появился, перетащите набор Button ниже набора Button text. |
Практична робота №12