Задание №8
Создание сайта на основе табличной верстки.
Таблицы позволяют создавать целые страницы, сайты, а не только какие-либо конкретные. Мы можем разделить текст на несколько фрагментов и поместить рядом соответствующие примечания. Мы можем сделать линии между фрагментами невидимыми, так что посетитель нашего сайта и не заметит, что для форматирования этого текста использовались таблицы.
Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого.
В этом задании мы создадим при помощи таблиц личную страницу следующего содержания:
Создайте новый HTML документ.
Создайте таблицу и заполните ее текстом, как показано на рисунке ниже. Таблица эта должна содержать три строки и два столбца, не должна иметь границы. Ширина этой таблицы должна быть равна 100%
Откройте диалоговое окно Page Properties. Задайте для новой страницы следующие параметры (вместо абстрактного Петрова можете указывать свои имена):
цвет фона — белый (#FFFFFF);
цвет текста — черный (#000000);
цвет гиперссылок — темно-красный (#990000);
цвет посещенных гиперссылок — темно-серый (#666666);
цвет активной гиперссылки — ярко-красный (#FF0000);
название страницы — "Петр П. Петров".
Поставьте текстовый курсор в верхнюю объединенную ячейку. Задайте такие значения ее параметров:
горизонтальное выравнивание (раскрывающийся список Horz) — Center;
вертикальное выравнивание (Vert) — Middle (или Default);
не переносить текст (флажок No Wrap) — включено. Остальные параметры оставьте без изменений.
Введите в ячейку текст "Петров Петр Петрович". Установите подходящий размер шрифта. Поэкспериментируйте с разными шрифтами. У вас получилось следующее
Поставьте курсор в нижнюю объединенную ячейку, где будут находиться сведения об авторских правах. Установите в ней текстовый курсор и задайте следующие значения параметров:
горизонтальное выравнивание — Right;
вертикальное выравнивание — Middle (или Default).
Введите в нижнюю ячейку данные об авторском праве.
Сохраните документ под именем d008.html.
Создайте в Photoshop’e 20 графических файлов (по 4 картинки для каждого элемента меню) (формата gif, jpg, png) для полосы навигации. Меню будет состоять из 5 пунктов: Главная, Проекты, Увлечения, Ссылки, Об авторе.
Каждый элемент навигации будет включать:
белую надпись на черном фоне, отображаемую в обычном состоянии;
красную надпись на черном фоне, отображаемую, когда пользователь помещает над ним курсор мыши;
черную надпись на белом фоне, отображаемую в "нажатом" состоянии;
красную надпись на белом фоне, отображаемую в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.
Создайте папку images в рабочей папке. Дайте каждому состоянию кнопки следующие имена
<имя страницы >_up.gif — для изображений, отображаемых в обычном состоянии;
<имя страницы>_over.gif — для изображений, отображаемых, когда пользователь помещает над ними курсор мыши;
<имя cmpaницы>_down.gif — для изображений, отображаемых в "нажатом" состоянии;
<имя страницы>_overdown.gif — для изображений, отображаемых в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.
поставьте текстовый курсор в левую ячейку таблицы и установите следующие значения параметров:
горизонтальное выравнивание — Center;
вертикальное выравнивание — Тор.
Создадим полосу навигации (меню). Чтобы создать полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку Navigation Bar страницы Common панели объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive Images меню Insert. На экране появится диалоговое окно Insert Navigation Ваг, показанное ниже.
В списке Nav Bar Elements перечислены все элементы полосы навигации, которые уже имеются. (Изначально там находится один элемент, созданный для нас Dreamweaver.) Вы можете выбрать любой из элементов и посмотреть либо изменить его параметры.
В поле ввода Element Name вводится имя элемента. Советуем давать элементам "говорящие" имена, например Projects или Links.
В поле ввода Up Image вводится имя файла изображения, отображаемого в обычном случае. Вы также можете щелкнуть кнопку Browse, расположенную справа от поля ввода, и выбрать нужный файл в диалоговом окне открытая файла Dreamweaver. Точно так же в поле ввода Over Image вводится имя файла изображения, отображаемого, когда пользователь помещает над гиперссылкой курсор мыши, в поле Down Image — имя файла изображения "нажатой" гиперссылки, а в поле Over While Down Image — имя файла изображения "нажатой" гиперссылки, над которой пользователь поместил курсор мыши. Справа от каждого поля ввода находится спасительная кнопка Browse.
В поле ввода Alternate Text вводится альтернативный текст. К сожалению, Dreamweaver неправильно обрабатывает русские буквы, поэтому вам или придется править сам код HTML, или вводить альтернативный текст на английском, как это сделали мы.
В поле ввода When Clicked, Go To URL вводится имя файла Web-страницы, на которую осуществляется переход при щелчке на гиперссылке. В раскрывающемся списке in, расположенном справа от поля ввода, выбирается фрейм, в котором будет отображена страница. Пункт Main Window этого списка позволяет открыть страницу во всем окне.
Если вы хотите, чтобы данный элемент полосы навигации изначально отображался "нажатым", включите флажок Show "Down Image" Initially, находящийся в группе Options. В частности, его нужно включить для элемента, обозначающего начальную страницу
А вот флажок Preload Images, находящийся в этой же группе, лучше всегда держать включенным. Он указывает Dreamweaver создать код, заставляющий Web-обозреватель загружать заранее все изображения, задействованные в полосе навигации, и сохранять их на жестком диске в своем кэше. Благодаря чему подстановка нужных изображений будет происходить мгновенно, не ожидая, пока они загрузятся с сайта. В противном случае Web-обозреватель будет вынужден загружать каждое изображение непосредственно перед его отображением. С одной стороны, это позволит ускорить загрузку страницы (не нужно будет загружать все изображения полосы навигации), а с другой — замедлит реакцию полосы навигации на действия пользователя, т. к. Web-обозревателю придется каждый раз загружать с сайта нужное изображение, а не брать его с кэша.
Раскрывающийся список Insert позволит задать расположение полосы навигации: горизонтальное (пункт Horizontally) или вертикальное (пункт Vertically). Флажок Use Tables заставит Dreamweaver создать полосу навигации на основе таблиц. Этот флажок по умолчанию включен, и отключать его не стоит.
Осталось рассказать о кнопках, расположенных над списком Nav Bar Elements. Кнопка со знаком "плюс" добавляет новый элемент в полосу навигации, а кнопка со знаком "минус" удаляет выбранный в списке элемент. Кнопка вверх перемещает выбранный в списке элемент на строку выше, а кнопка вниз— на строку ниже.
Закончив формирование полосы навигации, нажмите кнопку ОК. Если вы передумали вставлять полосу навигации, нажмите кнопку Cancel.
Введите в окно вставки полосы навигации данные о пяти элементах полосы навигации согласно таблице:
Страница |
Element Name |
When Clicked, Go To URL |
|||
Главная |
Main |
index.hrml |
|
||
Проекты |
Projects |
projects.html |
|
||
Увлечения |
Passions |
passions.html |
|
||
Ссылки |
Links |
links.html |
|
||
Об авторе |
About |
about.html |
|
||
В поля ввода Up Image, Over Image, Down Image и Over While Down Image введите соответствующие имена файлов. Проследите при этом, чтобы в раскрывающемся списке Relative To диалогового окна Select File был выбран пункт Document (отсчет интернет-адресов относительно текущей страницы) — задание адресов от корневой папки сайта работает только под программой Web-сервера. Элементы должны быть введены в таком порядке, в каком они перечислены в таблице. (Это общепринятый порядок перечисления элементов полосы навигации в подобных сайтах.)
На рисунке ниже представлен примерный результат. В левой колонке таблицы добавилось графическое меню.
Поставьте в оставшуюся (правую) ячейку текстовый курсор и задайте такие параметры:
горизонтальное выравнивание — Left (или Default);
вертикальное выравнивание — Тор.
Заполните ячейку таблицы
Сохраните файл.