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

Macromedia Dreamweaver Определение сайта Табличный дизайн Создание шаблонов Создание гиперссылок

Определение нового сайта Каждый сайт содержит несколько HTML-страниц, связанных между собой гипертекстовыми ссылками. Кроме того каждая страница может содержать иллюстрации, следовательно, с ней будет связано несколько графических файлов. Таким образом, число файлов входящих в состав сайта даже в простых случаях, может измеряться десятками. Программа Dreamweaver оказывает существенную помощь в объединении разрозненных файлов в один сайт, но для этого новый сайт должен быть определён!

Определение сайта

Активизация сайта ведет к открытию панели инструментов Files (файлы). Данная панель содержит список всех файлов, входящих в состав сайта:

Задание 1 Определить сайт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задание №5 Создать на основе созданного шаблона 4 страниц для каждого пункта меню, кроме “Форум”. Сохранить созданные страницы. Главная страница должна иметь имя index.html, остальные имена латинскими буквами и без пробелов (books.html, Joanne.html, interesting.html, author.html). Заполните на каждой из страниц поля для основного текста информацией в соответствии с текстовыми документами. На странице author.html напишите, кем была создана страница (ваше ФИО).

Создание гипертекстовых ссылок Гиперссылка (англ. hyper - превышающий норму, link - связующее звено) - активный текст, изображение или кнопка на веб-странице, активизация которых вызывает переход на другую страницу. В языке HTML гиперссылки реализуются с помощью метки <A>. Для создания ссылки в Dreamweaver необходимо выделить текст или изображение, а затем на панели Properties в поле Link указать имя файла, на который будет осуществлен переход. Если это внешняя ссылка, то нужно указать полный адрес. Например: http://ssga.ru

Задание №6: Связать гиперссылками страницы созданные в предыдущей работе Открыть шаблон на основе которого были созданы все страницы. Выделить первый пункт меню, в поле Link указать имя файла, на который будет осуществлен переход (это удобней делать с помощью браузера Browse for file) Сохранить шаблон. Программа предложит обновить файлы созданные на основе этого шаблона, нужно согласиться на обновление. Сохраните обновленные страницы (File/Save all)

Создание гиперссылки внутри документа Кроме ссылки на файлы целиком имеется возможность создания ссылки на определенное место в документе – якорь. Для этого нужно создать якорь: Установить курсор на нужном месте в документе В группе инструментов Insert – Common нажать кнопку – Named Anchor. В открывшемся диалоговом окне нужно набрать условное имя (без пробелов и латинскими буквами). Например: Chapter1. После этого появиться значок с изображением якоря. Для создания ссылки на якорь в поле Link нужно будет после имени файла вписать символ # и условное имя якоря: file1.html#Chapter1. Имя файла можно опустить если якорь находиться в том же файле.

Задание №7 Сделать так, чтобы при нажатии на фразу “первая книга о Гарри Поттере” в файле interesting.html открывалась ссылка на строчку “1. Гарри Поттер и философский камень ”, располагающуюся в файле books.html.

Создание гиперссылки на почтовый адрес Иногда возникает необходимость создания ссылки на почтовый адрес. Щелчок по гиперссылке в окне браузера приведет к открытию почтовой программы (Outlook Express) с заготовкой нового письма и заполненной адресной строкой. Для этого нужно: Выделить текст для создания гипессылки Нажать кнопку Email Link (Insert - Common) В открывшемся диалоговом окне в поле Text указать тот текст, с которого будет идти ссылка, или оставить выделенный текст без изменения, а в поле e-mail – адрес электронной почты

Задание №8 Перейти на страницу author.html и сделать гиперссылку на ваш почтовый адрес. В качестве текста-ссылки – ваше ФИО. Протестируйте работу вашего сайта, открыв его в браузере.