Macromedia DreamweaverТабличный дизайнСоздание шаблонов презентация

Macromedia Dreamweaver Табличный дизайн Создание шаблонов Гвасалия Д.А.

Структура Web-сайта

Дизайн страниц Прежде чем решать проблему дизайна необходимо продумать ответы на следующие вопросы: Каков характер создаваемого Web-узла? Либо это информационный сайт или основная задача сайта – развлечения Какие цвета будут использованы, шрифты, графические иллюстрации? Какими будут основные области Web-узла, доступ к которым должен быть организован с каждой страницы? Как пользователи будут переходить на страницы второго, третьего или четвертого уровней?

Эскиз Web-страницы

Готовая Web-страница

«Табличный» Web-дизайн В настоящее время наиболее популярен Табличный Web-дизайн. Web-страница создается на основе большой таблицы (так называемой таблицы разметки), в ячейки (они называются, по аналогии с таблицей разметки, ячейками разметки) которой помещается и название сайта, и набор гиперссылок, и сведения об авторских правах и, разумеется, основное содержимое. Эти таблицы почти ничем не отличаются от тех, что мы создавали на занятии 7.

Таблица разметки

Режим разметки страницы Включение режима разметки: Кнопка Layout в группе инструментов Layout панели Insert (вставка)

Разметка страницы Вариант №1

Разметка страницы Вариант №2

Порядок действий Создать новый HTML-документ Войти в режим разметки слайда Разместить ячейки для заголовка (и рисунка-эмблемы) и для основного текста Для создания меню воспользоваться опцией «Компоновка таблицы». В созданной таблице нужно разместить несколько ячеек по числу пунктов меню Выйти из режима разметки страницы

Задание №1 Создайте следующую таблицу разметки

Свойства страницы

Задание №2 Задайте в качестве фонового рисунка рисунок fon.gif. В верхнюю левую ячейку вставьте рисунок harry1.jpg Измените цвет разделительной ячейки Заполните пункты меню и задайте расположение текста по центру ячейки Заполните ячейки для заголовка и для основного текста так как показано на рисунке

Шаблоны Шаблон – это образец, “скелет” Web-страницы, который содержит общие для всех страниц элементы: заголовок, набор гиперссылок, сведения об авторских правах, таблицу разметки и т.п. Эти элементы остаются неизменными на всех страницах, созданных на основе данного шаблона, поэтому так и называются — неизменяемыми элементами. Уникальное содержимое страницы размешается в специально созданных изменяемых областях Шаблоны сохраняются в особых файлах, имеющих расширение .dwt, в папке Templates. При создании сайта можно использовать несколько шаблонов Если в шаблон вносятся изменения, то Dreamweaver предлагает применить данные изменения ко всем страницам, которые созданы на основе данного шаблона

Создание шаблонов Шаблон можно создать на основе существующей HTML страницы. Для этого в вкладке Common панели инструментов “Вставка” Insert нужно нажать кнопку Templates и в раскрывающемся списке выбрать Make Template. Дать имя новому шаблону Поместить изменяемые области Editable Region – области, которые можно будет редактировать, все остальное будет оставаться без изменений

Задание №3 Выделите текст «Основной текст сайта» и сделайте данный текст изменяемой областью (Editable Region) Сохраните шаблон (Save as Template)

Создание Web-страниц на основе шаблонов File – New…

Задание №4 Создать на основе созданного шаблона 5 страниц для каждого пункта меню Сохранить созданные страницы. Главная страница должна иметь имя index.html, остальные имена латинскими буквами и без пробелов (books.html, author.html и т.п.) Заполните поля для основного текста информацией: например «Джоан Роулинг – английская писательница, автор серии романов о Гарри Поттере, переведённых более чем на 60 языков, в том числе и на русский»