Урок одиннадцатый

Работаем над дизайном

   Мы с вами на одном из уроков познакомились с таблицами. Теперь мы умеем их создавать и форматировать, объединять и разъединять ячейки, вводить и форматировать текст. Одним словом, получили минимальный набор знаний необходимый для использования его в дизайнерских целях. Вы спросите, причем здесь таблицы и дизайн? А при том, что сегодня ни одна web-страница не создается без использования таблиц. Табличный дизайн позволяет создавать страницы, больше напоминающие печатные документы, например газеты. Они включают в себя несколько колонок с текстом, множество графических иллюстраций, линеек, и прочего к чему привыкли дизайнеры полиграфисты.

   Рассказывать о табличном web-дизайне особенно нечего. Web-страница создается на основе очень большой таблицы, в разные ячейки которой помещаются заголовок или "шапка" сайта, набор гиперссылок или полоса навигации, сведения об авторских правах и основное содержимое.

   И так применим на практике то, что изучили до этого. Создаем таблицу.

   Применим классическую схему табличного дизайна. Объединим верхнюю и нижнюю строчки в одну ячейку

   Теперь произведем разметку нашей таблицы. Это тоже мы с вами умеем. Зададим ширину таблицы 750 пикселей, ширину средних ячеек 175 и 575 пикселей соответственно. Не забудем ввести атрибуты для выравнивания текста таблицы. HTML-kод страницы будет выглядеть так.

  Таблица примет примерно такой вид.

Здесь будет заголовок или шапка сайта
Здесь будет набор гиперссылок для перехода между страницами сайта	Здесь будет полезное содержимое сайта
Сведения о правах разработчика сайта

   И так схема дизайна нашего сайта готова. Эту схему мы применим , как к главной, так и к остальным страницам нашего сайта. Наполним ячейки сайта содержимым.

  Для заголовка сайта выберем картинку из знакомой нам папки images. Для этого установим курсор в строке таблицы, где будет размещен заголовок сайта и нажмем кнопку Изображение вкладки Общее панели Вставить.

   Откроется диалоговое окно Выбрать источник изображения. В поле Папка найдем папку images, и выберем рисунок stroymaster 6.gif , нажимаем кнопку ОК. Откроется еще одно диалоговое окно Атрибуты доступности тега изображения. И здесь жмем ОК. После этого ваша страница будет выглядеть ТАК.

   Теперь давайте создадим фон в ячейке, где мы собираемся размещать гиперссылки на другие страницы сайта.

  Для этого опять производим теже действия, что и в первом случае. Устанавливаем текстовой курсор в поле ячейки, а дальше действуем в несколько ином порядке. Имя фонового изображения ячейки таблицы задается в диалоговом окне Выбрать источник изображения, которое мы можем открыть в поле ввода Фон, который служит для задания интернет-адреса фонового изображения ячейки, панели свойств Параметры. В папке images находим рисунок sv 12.gif, нажимаем ОК.

Теперь страница будет выглядеть ТАК.

  С дизайном страницы мы разобрались. Теперь пришло время заняться наполнением главной страницы. Перенесем текст с персональной страницы Горбункова С.С. на вновь созданную главную страницу сайта. Теперь страница будет выглядеть ТАК.

   Нам необходимо отформатировать текст и рисунок на вновь созданной web-странице. Как это делается, мы знаем. Приступаем к творческой работе. После форматирования страница будет выглядеть ТАК.

   Создадим вторую страничку сайта-Новости. Для этого создадим новый файл 1.7.html. Перенесем в него HTML-код первой странички, за исключение текста и создадим в ней первую гиперссылку на Главную страницу сайта. В ячейке, где будут располагаться гиперссылки, пишем слово Главная. Далее выделяем его и открываем диалоговое окно Выбрать файл поля Ссылка панели свойств Параметры. Находим файл, в котором задана главная страница, в нашем случае это файл 1.6.html и нажимаем ОК. В ячейке справа пишем заголовок страницы Новости сайта.

  Теперь вторая страница будет выглядеть ТАК.

   Можете создать еще несколько страниц, для закрепления пройденного материала и создать на этих страницах гиперссылки. А мы вернемся к главной странице нашего сайта и создадим там тоже гиперссылки или маленькое меню.

   Напишем в ячейке слева два слова: Главная и Новости. Выделим их в порядке очередности и создадим ссылки на соответствующие страницы. Поместим слово Горбунков С.С. в нижнюю строку таблицы. Выделим его и откроем диалоговое окно Email ссылка вкладки Общее панели Вставить и зададим в нем электронный адрес Горбункова С.С. Перед ним установим знак © обозначающий авторские права Горбункова С.С. на данный сайт. Теперь главная страница будет выглядеть ТАК.

   Скопируем с главной страницы сайта Sevidi анимированный баннер и вставим его на вторую страницу сайта. Теперь страница будет выглядеть ТАК.

  И так сайт создан. Для того чтобы его увидели, сайт необходимо опубликовать на web-сервере. Мы уже занимались этим на первом цикле занятий. Регистрация и публикация сайта проходила вручную. А как это делает Dreamweaver, смотрите ЗДЕСЬ.