Задание
Создайте сайт, используя таблицы для разметки страниц.
Внимательно изучите сайт. Ответьте на следующие вопросы:
· Сколько страниц в сайте.
· Каким образом осуществляется навигация по сайту.
· Попробуйте сформулировать как размещена информация на каждой странице, каким способом осуществлялось размещение текстов и графических объектов на странице.
Анализ примера
Домашняя страницасайта должна выглядеть примерно так, как показано на рисунке 1.
На странице размещены: сверху справа — заголовок сайта, графический баннер, слева – активные кнопки навигации с гиперссылками на другие страницы сайта, в основном поле — текст. Имеется гиперссылка на адрес электронной почты и бегущая строка с текстом. Кроме этого, знак «копирайт» и фамилия автора. Точное размещение всех элементов страницы представлено на схеме 1.
Страница «I уровень»должна выглядеть примерно так, как показано на рисунке 2.
На странице размещены: заголовок, тот же графический баннер, активные кнопки навигации с гиперссылками на другие страницы сайта, текст, графические изображения, а также гиперссылки с текстовых объектов на страницы, констатирующие правильность или неправильность ответов. Точное размещение всех элементов страницы представлено на схеме 2.
Страница «II уровень» должна выглядеть так, как показано на рисунке 3.
На странице размещены: заголовок, графический баннер, активные кнопки навигации на другие страницы, а также таблица, в ячейках которой размещены тексты и графические изображения. Точное размещение всех элементов страницы представлено на схеме 3.
Страница «III уровень»должна выглядеть примерно так, как показано на рисунке 4.
На странице размещены: заголовок, графический баннер, активные кнопки навигации на все другие страницы сайта, текст и графическое изображение. Текст выглядит, как список, в котором при двойном щелчке на конкретные предложения происходит или их «исчезновение» с экрана или изменение цвета букв. Точное размещение всех элементов страницы представлено на схеме 4.
Страница «IV Уровень»должна выглядеть примерно так, как показано на рисунке 5.
На странице размещены: заголовок, графический баннер, текст и две активные кнопки с гиперссылками на страницы «История местности» и «Карта Новгорода». Точное размещение всех элементов страницы представлено на схеме 5.
Страница «История местности»должна выглядеть примерно так, как показано на рисунке 6.
На странице размещены: заголовок, графический баннер, активные кнопки навигации с гиперссылками на все другие страницы сайта, дополнительная активная кнопка с гиперссылкой «Вернуться обратно», текст и графическое изображение. Точное размещение всех элементов страницы представлено на схеме 6.
Страница «Карта Новгорода»должна выглядеть примерно так, как показано на рисунке 7.
На странице размещены: заголовок, графический баннер, активные кнопки навигации с гиперссылками на все другие страницы сайта, дополнительная активная кнопка с гиперссылкой «Вернуться обратно», текст и уменьшенный эскиз графического изображения. По щелчку эскиза откроется новая страница с полномасштабным изображением. Точное размещение всех элементов страницы представлено на схеме 7.
| |||||||||||||||||||||
| Цель упражнения Освоение приемов разметки Web-документов с помощью таблиц. | |||||||||||||||||||||
Порядок выполнения
Обычно мы начинаем изучать историю, вооружившись учебниками, энциклопедиями, атласами, словарями, в которых знания разложены по полочкам, то есть представлены четко, научно, систематично. Давайте попробуем пройти другим путем — понять исторический материал, внимательно рассматривая и изучая картину, отражающую определенный период российской истории. Давайте посмотрим на историю под другим углом зрения. Почему именно картина? Потому что с одной стороны картины красочны, эмоциональны, а с другой стороны — конкретны: живые люди с их заботами и проблемами, условия их проживания, настоящие предметы быта и производства и многое-многое другое. Работа с историческими картинами позволит узнать не только новый исторический материал, но и хоть немного овладеть искусством «смотреть и видеть», развить воображение и наблюдательность. Перед вами четыре уровня работы с картиной, на которой изображен определенный период истории Великого Новгорода. Внимательно изучая картину, попробуйте понять, как жили люди в тот исторический период, и правильно ответить на вопросы. Советуем начать с самого простого первого уровня и постепенно пройти все остальные. Итак, щелкните мышью кнопку I уровень и начните собственное историческое исследование...
1. После слов «систематично», «зрения» и «вопросы» установите двойные разрывы строк. 2. После слов «наблюдательность» и «остальные» начните новые абзацы. 3. Установите стиль заголовка сайта — Heading 2, курсив, цвет текста — 006600, выравнивание — по правому краю. 4. Стиль подзаголовка — Heading 3, курсив, цвет текста — 006600. 5. Создайте бегущую строку типа слайд с текстом «Искусство смотреть и видеть». 6. В качестве фонового изображения страниц сайта установите файл fon_table.gif из папки \FrontPage\images. 7. Создайте активные кнопки типа Hover Button с гиперссылками на соответствующие страницы.
8. Введите символ «копирайт» и фамилию автора сайта. 9. Отформатируйте данные в ячейках в соответствии с образцом. 10. Сохраните данную страницу в качестве шаблона под именем novgorod.tem. 11. Сохраните страницу под именем index.htm в своей рабочей папке.
1. Создайте новую страницу на основе разработанного шаблона. 2. Удалите текст из основного рабочего поля и e-mail. 3. Вставьте на страницу объекты в соответствии со схемой 2 (затененные поля шаблона заполнять не надо). |
Использование таблиц для разметки Web-страниц
2015-05-30
484Поделись с друзьями:
Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:
|
|
Сейчас читают про:
7425
7227