Задание
Создайте
сайт, используя таблицы для разметки
страниц.
Внимательно
изучите сайт. Ответьте на следующие
вопросы:
Сколько
страниц в сайте.
Каким
образом осуществляется навигация по
сайту.
Попробуйте
сформулировать как размещена информация
на каждой странице, каким способом
осуществлялось размещение текстов
и графических объектов на странице.
Анализ
примера
Домашняя
страница сайта должна выглядеть
примерно так, как показано на рисунке
1.
На
странице размещены: сверху справа —
заголовок сайта, графический баннер,
слева – активные кнопки навигации с
гиперссылками на другие страницы
сайта, в основном поле — текст. Имеется
гиперссылка на адрес электронной
почты и бегущая строка с текстом. Кроме
этого, знак «копирайт» и фамилия
автора. Точное размещение всех элементов
страницы представлено на схеме 1.
Страница
«I уровень» должна выглядеть
примерно так, как показано на рисунке
2.
На
странице размещены: заголовок, тот же
графический баннер, активные кнопки
навигации с гиперссылками на другие
страницы сайта, текст, графические
изображения, а также гиперссылки с
текстовых объектов на страницы,
констатирующие правильность или
неправильность ответов. Точное
размещение всех элементов страницы
представлено на схеме 2.
Страница
«II уровень » должна выглядеть
так, как показано на рисунке 3.
На
странице размещены: заголовок,
графический баннер, активные кнопки
навигации на другие страницы, а также
таблица, в ячейках которой размещены
тексты и графические изображения.
Точное размещение всех элементов
страницы представлено на схеме 3.
Страница
«III уровень» должна выглядеть
примерно так, как показано на рисунке
4.
На
странице размещены: заголовок,
графический баннер, активные кнопки
навигации на все другие страницы
сайта, текст и графическое изображение.
Текст выглядит, как список, в котором
при двойном щелчке на конкретные
предложения происходит или их
«исчезновение» с экрана или изменение
цвета букв. Точное размещение всех
элементов страницы представлено на
схеме 4.
Страница
«IV Уровень» должна выглядеть
примерно так, как показано на рисунке
5.
На
странице размещены: заголовок,
графический баннер, текст и две активные
кнопки с гиперссылками на страницы
«История местности» и «Карта Новгорода».
Точное размещение всех элементов
страницы представлено на схеме 5.
Страница
«История местности» должна
выглядеть примерно так, как показано
на рисунке 6.
На
странице размещены: заголовок,
графический баннер, активные кнопки
навигации с гиперссылками на все
другие страницы сайта, дополнительная
активная кнопка с гиперссылкой
«Вернуться обратно», текст и графическое
изображение. Точное размещение всех
элементов страницы представлено на
схеме 6.
Страница
«Карта Новгорода» должна выглядеть
примерно так, как показано на рисунке
7.
На
странице размещены: заголовок,
графический баннер, активные кнопки
навигации с гиперссылками на все
другие страницы сайта, дополнительная
активная кнопка с гиперссылкой
«Вернуться обратно», текст и уменьшенный
эскиз графического изображения. По
щелчку эскиза откроется новая страница
с полномасштабным изображением. Точное
размещение всех элементов страницы
представлено на схеме 7.
|
Порядок выполнения
Создайте
новый сайт. В своей рабочей папке
создайте папку Web_Table,
в которой будут сохраняться страницы
сайта.
На
домашней странице сайта создайте
таблицу из 10 строк и 2 столбцов. ш ирина
таблицы — 800 пикселей, ширина левой
колонки — 20%, выравнивание таблицы —
по левому краю. Установите невидимые
границы таблицы. Объедините ячейки,
введите в них графическую и текстовую
информацию в соответствии с приведенной
ниже схемой 1.
Схема
1
Заголовок
сайта
|
|
Файл
zagolovor.gif
из
папки \FrontPage\images
|
Активная
кнопка «На главную» с гиперссылкой
на главную страницу
|
Основное
поле с подзаголовком и текстом
|
|
Активная
кнопка «I уровень» с гиперссылкой
на страницу level1.htm
|
Активная
кнопка «II уровень» с гиперссылкой
на страницу level2.htm
|
Активная
кнопка «III уровень» с гиперссылкой
на страницу level3.htm
|
Активная
кнопка «IV уровень» с гиперссылкой
на страницу level4.htm
|
файл
01.gif
из
папки \FrontPage\images
с
гиперссылкой на e-mail proba@rambler.ru
|
|
©
Иванов Иван Иванович
|
|
Примечание
В
данном упражнении для удобства
дальнейшей работы под термином
«основное поле» будем понимать
выделенные ячейки таблицы.
|
Обычно
мы начинаем изучать историю, вооружившись
учебниками, энциклопедиями, атласами,
словарями, в которых знания разложены
по полочкам, то есть представлены
четко, научно, систематично. Давайте
попробуем пройти другим путем — понять
исторический материал, внимательно
рассматривая и изучая картину,
отражающую определенный период
российской истории. Давайте посмотрим
на историю под другим углом зрения.
Почему именно картина? Потому что с
одной стороны картины красочны,
эмоциональны, а с другой стороны —
конкретны: живые люди с их заботами и
проблемами, условия их проживания,
настоящие предметы быта и производства
и многое-многое другое. Работа с
историческими картинами позволит
узнать не только новый исторический
материал, но и хоть немного овладеть
искусством «смотреть и видеть», развить
воображение и наблюдательность. Перед
вами четыре уровня работы с картиной,
на которой изображен определенный
период истории Великого Новгорода.
Внимательно изучая картину, попробуйте
понять, как жили люди в тот исторический
период, и правильно ответить на вопросы.
Советуем начать с самого простого
первого уровня и постепенно пройти
все остальные. Итак, щелкните мышью
кнопку I уровень и начните
собственное историческое исследование...
После
слов «систематично», «зрения» и
«вопросы» установите двойные разрывы
строк.
После
слов «наблюдательность» и «остальные»
начните новые абзацы.
Установите
стиль заголовка сайта — Heading
2,
курсив, цвет текста — 006600, выравнивание
— по правому краю.
Стиль
подзаголовка — Heading
3,
курсив, цвет текста — 006600.
Создайте
бегущую строку типа слайд
с
текстом «Искусство смотреть и видеть».
В
качестве фонового изображения страниц
сайта установите файл fon_table.gif
из
папки \FrontPage\images.
Создайте
активные кнопки типа Hover
Button с
гиперссылками на соответствующие
страницы.
Введите
символ «копирайт» и фамилию автора
сайта.
Отформатируйте
данные в ячейках в соответствии с
образцом.
Сохраните
данную страницу в качестве шаблона
под именем novgorod.tem.
Сохраните
страницу под именем index.htm
в
своей рабочей папке.
Создайте
новую страницу на основе разработанного
шаблона.
Удалите
текст из основного рабочего поля и
e-mail.
Вставьте
на страницу объекты в соответствии
со схемой 2 (затененные поля шаблона
заполнять не надо).
Схема
2
Заголовок
сайта
|
|
Файл
zagolovor.gif
из
папки
\FrontPage\images
п
|
Активная
кнопка «На главную» с гиперссылкой
на главную страницу
|
Фрагмент
текста 1) из файла level1.doc
из
папки \FrontPage\text
|
|
|
Активная
кнопка «I уровень» с гиперссылкой
на страницу level1.htm
|
|
Активная
кнопка «II уровень» на страницу
level2.htm
|
|
Активная
кнопка «III уровень» на страницу
level3.htm
|
|
Активная
кнопка «IV уровень» на страницу
level4.htm
|
|
|
Таблица
2а
Текст
с гиперссылкой на страницу no1.htm
|
Файл
vid.jpg из папки \FrontPage\images
|
Текст
с гиперссылкой на страницу no2.htm
|
|
Текст
с гиперссылкой на страницу yes.htm
|
|
Текст
с гиперссылкой на страницу no.htm
|
|
Фрагмент
текста 2) из файла level1.doc
из
папки \FrontPage\text
Таблица
2б
Текст
с гиперссылкой на страницу no3.htm
|
Текст
с гиперссылкой на страницу no3.htm
|
|
Текст
с гиперссылкой на страницу no3.htm
|
|
Текст
с гиперссылкой на страницу yes1.htm
|
Текст
с гиперссылкой на страницу no3.htm
|
Фрагмент
текста 3) из файла level1.doc
из
папки \FrontPage\text
Таблица
2в
Текст
с гиперссылкой на страницу no3.htm
|
Текст
с гиперссылкой на страницу no3.htm
|
Текст
с гиперссылкой на страницу no3.htm
|
Текст
с гиперссылкой на страницу no3.htm
|
Текст
с гиперссылкой на страницу yes1.htm
|
Фрагмент
текста 4) из файла level1.doc
из
папки \FrontPage\text
Файл
torg.jpg
из
папки \FrontPage\images
Фрагмент
текста 5) из файла level1.doc
из
папки \FrontPage\text
Файл
telega.jpg
из
папки \FrontPage\images
|
Далее
Вставьте
текст из файла level1.doc
из
папки \FrontPage\text
в
нижнюю правую ячейку таблицы шаблона.
«Разбейте»
текст на отдельные абзацы с помощью
клавиши Enter.
Переместите
фрагмент текста 1) на одну ячейку
вверх.
Для
заголовка «I уровень» выберите стиль
Heading
2,
курсив, цвет текста — 006600 .
Вставьте
3 таблицы в соответствии со схемой. В
первой таблице объедините требуемые
ячейки и установите значение границ
таблицы, равное 4; цвета верхней и
нижней границ таблицы соответственно
934900 и F6D08A. Для таблицы 2а установите
ширину левой колонки 40%. Во второй
таблице в центральной строке разбейте
ячейки на 2, затем объедините в
соответствии со схемой. Установите
невидимые границы таблицы 2б. Установите
фон выбранных в соответствии с образцом
ячеек таблицы 2б, равным CC8262.
Введите
в ячейки значения и отформатируйте
их в соответствии с образцом.
Создайте
две метки: на слове «подходящим», на
«2)».
Создайте
гиперссылки на страницы с правильными
и неправильными ответами в соответствии
со схемой.
Сохраните
страницу под именем level1.htm
в
своей рабочей папке.
Создайте
новую страницу на основе разработанного
шаблона.
Удалите
из шаблона текст основного поля и
e-mail.
В
верхней ячейке основного поля введите
текст:
I
уровень
Экскурсия
в глубь веков
Давайте
попытаемся представить себе, будто
мы с помощью машины времени попали на
эту торговую площадь. Мы можем обойти
все уголки, поговорить с каждым героем
картины…
Отформатируйте
данный текст в соответствии с образцом:
первый заголовок — Heading
2,
курсив, цвет — 006600, выравнивание —
по центру; второй подзаголовок —
Heading
3,
курсив, цвет — 006600, выравнивание —
по центру.
В
нижней части основного поля вставьте
таблицу из 6 строк и 2 столбцов.
Установите
выравнивание таблицы по верхнему
краю и по левой границе.
Установите
значение границ таблицы, равное 4;
цвета верхней и нижней границ
соответственно 934900 и F6D08A.
Объедините
ячейки в соответствии со схемой 3 и
вставьте в ячейки необходимую
информацию.
Отформатируйте
все данные в ячейках в соответствии
с образцом.
Сохраните
страницу под именем level2.htm
в
своей рабочей папке.
Схема
3
Фрагмент
1 из файла level2.doc
из
папки \FrontPage\text
|
Файл
med.jpg
из
папки \FrontPage\images
|
Файл
menala.jpg
из
папки \FrontPage\images
|
Фрагмент
2 из файла level2.doc
из
папки \FrontPage\text
|
Фрагмент
3 из файла level2.doc
из
папки \FrontPage\text
|
Файл
mex.jpg
из
папки \FrontPage\images
|
Фрагмент
4 из файла level2.doc
из
папки \FrontPage\text
|
Файл
knaz.jpg
из
папки \FrontPage\images
|
Фрагмент
5 из файла level2.doc
из
папки \FrontPage\text
|
Фрагмент
6 из файла level2.doc
из
папки \FrontPage\text
|
Создайте
новую страницу на основе разработанного
шаблона.
Удалите
информацию из основного поля и e-mail.
В
верхней ячейке основного поля введите
текст:
III
уровень
Рассмотрите
еще раз внимательно все детали картины
и попробуйте ответить на вопросы. При
двойном щелчке правильного ответа
буквы станут зеленого цвета, при щелчке
неправильного ответа буквы покраснеют
или слова совсем «улетят» с экрана.
Верным считается наиболее полный
ответ, однако имейте в виду, что
правильных ответов может быть несколько.
Отформатируйте
данный текст в соответствии с образцом.
Заголовок — Heading
2,
курсив, цвет текста — 006600, выравнивание
— по центру. После слов «вопросы» и
«с экрана» установите двойной разрыв
строки.
В
нижней ячейке основного поля введите
информацию в соответствии со схемой
4.
Схема
4
Файл
ploshad.jpg из папки \FrontPage\images
Файл
level3.doc из папки \FrontPage\text
|
Затем
Отформатируйте
данные в соответствии с образцом.
Установите выравнивание графического
изображения по центру. В тексте вручную
установите нумерацию, отделяя каждое
предложение клавишей Enter.
В вариантах ответов установите
абзацный отступ 45.
Вместо
маркера вставьте перед каждым вариантом
ответа графическое изображение
knopka.gif
из
папки \FrontPage\images.
Создайте
динамические HTML-эффекты на всех
вариантах ответов. По двойному щелчку
установите тип эффекта для правильных
ответов — изменение цвета букв на
цвет 006600, для неправильных ответов —
или изменение цвета букв на красный
или эффект «улетание вверх». Номер
вопроса (номера правильных ответов):
1(2), 2(2), 3(3), 4(2), 5(1), 6(4), 7(1), 8(1,2,4), 9(1,3),
10(1).
Сохраните
страницу под именем level3.htm
в
своей рабочей папке.
Создайте
новую страницу на основе разработанного
шаблона.
Удалите
информацию из основного поля и e-mail.
Введите
в нижнюю ячейку основного поля текст
из файла level4.doc,
находящегося в папке \FrontPage\text,
и разделите его в двух ячейках основного
поля в соответствии со схемой 5.
Отформатируйте
текст в соответствии с образцом.
Установите стиль заголовка — Heading
2,
выравнивание — по центру, цвет —
006600. После слов «Васнецова» и «площадь»
установите двойной разрыв строки.
После слова «преступников» установите
новый абзац.
Добавьте
таблицу из 1 строки и 2 столбцов и
установите нулевые границы.
Установите
ширину таблицы 70%, выравнивание — по
центру.
Вставьте
в ячейки таблицы активные кнопки типа
Hover
Button с
гиперссылками на соответствующие
страницы.
Отформатируйте
активные кнопки в ячейках по центру
и посередине.
Сохраните
страницу под именем level4.htm
в
своей рабочей папке.
Скопируйте
в свою рабочую папку следующие файлы
из папки \FrontPage\table:
history.htm,
karta.htm,
yes.htm,
yes1.htm,
no.htm,
no1.htm,
no2.htm,
no3.htm,
а также все графические файлы, которые
имеются на этих страницах, из этой же
папки.
Проверьте
работоспособность сайта в режиме
предварительного просмотра.
Схема
5
Фрагмент
1 файла level4.doc
из
папки \FrontPage\text
|
Фрагмент
2 файла level4.doc из папки
\FrontPage\text
Активная
кнопка с гиперссылкой на страницу
history.htm
|
Активная
кнопка с гиперссылкой на страницу
karta.htm
|
|
|