Редакторы Web

Редакторы Web-страниц
Структура сайта
"Виртуальный зоопарк"
1-й уровень
Главная страница.
• в начале страницы установлен якорь;
• заголовок первого уровня напечатан разноцветными
буквами;
• завлекающая фраза (выровнена по центру,
некоторые слова в тексте выделены жирным
курсивом);
• меню для навигации по сайту (внутри таблицы);
• вызов бланка письма с Web-страницы;
• авторы материалов, использованных при создании
сайта (маркированный список);
• с конца страницы ссылка на якорь, установленный в
начале.
2-й уровень
Состоит из трех страниц с одинаковой
структурой:
• заголовок первого уровня;
• фотография животного;
• рассказ о животном (картинка слева от
текста);
• в тексте рассказа с имени животного
ссылка на страницу третьего уровня;
• в нижней части страницы со слов [К
началу] ссылка для возврата на главную
страницу.
• Верблюд. Файл страницы - camel.htm,
рисунка - camel_foto.gif.
• Медведь. Файл страницы - bear.htm,
рисунка - bear_foto.gif.
• Слон .Файл страницы - elephant.htm,
рисунка - elephant_foto.gif.
3-й уровень
Три страницы с шутками о
животных:
• заголовок первого уровня;
• рисунок, выравненный по центру;
• шутка о животном (кроме страницы о
медведе - там рисунок-шутка);
• в нижней части страницы две ссылки
для навигации по сайту [Назад] - на
предыдущую страницу, [К началу] - на
главную страницу.
• Файл страницы - camel_shutka.htm,
рисунка - camel_ris.gif.
• Файл страницы - bear_shutka.htm,
рисунка - bear_ris.gif.
• Файл страницы - elephant_shutka.htm,
рисунка - elephant_ris.gif.
Начало создания Web-сайта главная страница.
• Создать папку zoo для размещения сайта.
Поместить в нее рисунки. Запустить редактор
Web-страниц FrontPage Express [Пуск Программы - FrontPage Express].
• Настроить общие параметры страницы,
вызвав команду меню: [Файл - Свойства
страницы]
• В открывшемся окне на вкладке Общие
набрать заголовок, указать кодировку HTML "Кириллица".
• Переключиться на вкладку Фон и
настроить для страницы цвет фона,
текста и гиперссылок, указать файл для
фонового изображения.
• Разметить абзацы. Для этого,
устанавливая текстовый курсор в
начале абзаца, нажимать клавишу
клавиатуры Enter.
• На панели Форматирования задать
заголовок первого уровня "Виртуальный
зоопарк".
• Раскрасить буквы заголовка в
различные цвета, воспользовавшись
кнопкой Цвет текста.
• Выровнять заголовок и первый абзац по
центру специальной кнопкой Центрировать .
• Добавить таблицу командой меню [Таблица Добавить таблицу...].
• В таблице будут 1 строка и 3 колонки.
• Ширина ее - 75% от размера окна.
• Рамка - толщиной в 1 пиксель.
• Чтобы таблица размещалась в центре
страницы, в поле Выравнивание следует
выбрать строку По центру.
• Оформить внешний вид таблицы сделать цветную рамку и фон: выделить
таблицу и выполнить команду меню
[Таблица - Свойства таблицы...]
• Если среди предлагаемых цветов не
удается подобрать подходящий, то
указать Специальный и, в открывшемся
окне, задать требуемый оттенок.
• Отдельные ячейки (или строки, или столбцы)
можно оформить иначе, чем всю остальную
таблицу. Для этого их надо выделить и,
командой меню [Таблица - Свойства
ячейки...], вызвать одноименное окно, где и
произвести необходимую настройку.
• Осталось заполнить таблицу информацией.
Поочередно выделять имена животных и
перетаскивать их в соответствующие ячейки.
• Выровнять текст внутри таблицы по центру.
• Настроить вызов бланка письма с
заполненным адресом электронной почты:
• выделить слово E-mail;
• выполнить команду меню [Вставка Гиперссылка...], или нажать соответствующую
кнопку;
• переключиться на вкладку WWW;
• в поле Тип гиперссылки выбрать "mailto:";
• в поле Адрес (URL) вписать
mailto:your_name@freemail.ru
• Создать гиперссылку с конца страницы
на якорь, установленный в начале
страницы:
• установить текстовый курсор в самом
начале страницы;
• добавить якорь, выполнив команду
меню [Правка - Закладка...];
• в появившемся окне вписать имя якоря
- "top";
• сохранить Web-страницу в папке zoo
под именем index.htm, выполнив
команду меню [Файл - Сохранить].
• выделить слова [В начало] , в нижней
части страницы;
• вызвать окно настройки гиперссылки и
на вкладке Открыть окно в поле
Открыть страницы указать имя
текущего документа;
• в поле Закладка выбрать имя "top".
• Сохранить документ. Запустить браузер
и, задав команду [Файл - Открыть],
просмотреть полученный результат.
Страницы второго уровня
сайта
• Создать новую страницу, выполнив
команду меню [Файл - Создать]. В окне
Новая страница выбрать Нормальная
страница.
Настроить общие свойства страницы:
• название страницы,
• кодировку русских букв,
• цвет текста и фона.
Набрать текст страницы.
Разметить и отформатировать заголовок
и абзацы.
• Добавить картинку и отформатировать
взаиморасположение рисунка и текста рисунок слева от массива текста:
• установить курсор в начале текстового
абзаца;
• выполнить команду меню [Вставка Изображение...];
• на вкладке Другое место в поле из файла
вписать имя соответствующего рисунка;
• выделить, полученный рисунок;
• командой меню [Правка - Свойства
изображения...] вызвать на экран окно
для настройки картинки;
• на вкладке Внешний вид в поле
Выравнивание указать - "слева".
Страницы третьего уровня
сайта
• Создать новую страницу. Настроить общие свойства
страницы. Набрать текст страницы.
• Разметить и отформатировать заголовок и абзацы.
• В отдельном абзаце разместить рисунок.
Сдвинуть рисунок в центр. Для этого установить
текстовый курсор рядом с рисунком и выполнить
операцию "выровнять абзац по центру".
• Сохранить файл HTML в папке zoo. Просмотреть
полученный результат в браузере.
• Аналогично создать остальные страницы третьего
уровня. Страницы третьего уровня сайта готовы.
Добавление гиперссылок
между страницами сайта
•
•
•
•
•
•
•
•
•
•
Открыть файл.
Выделить текст для ссылки.
Добавить гиперссылку:
выполнить команду меню [Вставка - Гиперссылка...];
на вкладке WWW в поле Адрес (URL) вписать имя
соответствующей Web-страницы.
Выполнить аналогичные действия для всех
гиперссылок.
Сохранить HTML-документ.
Настроить гиперссылки для всех страниц сайта.
Проверить взаимодействие гиперссылок в браузере.
Сайт "Виртуальный зоопарк" готов.