Создание HTML-сайта
Шапка сайта (header)
На этом занятии мы займемся шапкой сайта. Сразу хочу вас предупредить, что я не ставлю перед собой цели красиво оформить сайт, созданием которого мы занимаемся. Скорее наоборот: я выбираю яркие цвета, крупный шрифт и жирные линии для того, чтобы вам лучше было все видно, поэтому его дизайн – это не пример для подражания!
Теперь пару слов о шапке и подвале сайта. Проще всего, создать для них пару графических файлов по размеру и установить их в таблицу на нужное место, но, как показал мой опыт, - это бесполезная трата места на сайте. Дело в том, что поисковые роботы текстов на картинках не читают и то, что вы там нарисуете, и напишите им по-барабану. Намного эффективнее те header-Ы и footer-Ы, в которые вы можете вставить текст, баннеры, счетчики, ссылки и т.д. Именно такую шапку и такой подвал я и предлагаю сделать для нашего HTML-сайта.
Для начала, я предлагаю поделить header на две части, а footer на три части, для того, чтобы иметь возможность разместить в них разную информацию и создавать разные стили. Воплотить наше скромное желание в жизнь очень просто: в шапку сайта мы вставим таблицу, состоящую из одной строки и двух столбцов, а в подвал соответственно таблицу из одной строки и трех столбцов. Как создавать таблицу в Adobe Dreamweaver, подробно описано в Уроке 3 этого раздела, поэтому повторять не буду, а только подскажу – чтобы вставить таблицу вheader установите в него указатель и нажмите значок таблицы, ну и в footer-Е точно также.
После того, как вы создали таблицу в header-Е, передвиньте границу столбцов влево так, чтобы левый столбец стал в 30% от ширины таблицы, а правый соответственно в 70%. В «Коде» это будет выглядеть примерно так:
В левую часть header-А мы пропишем название сайта, а в правую поместим какой-нибудь баннер. И так, устанавливайте указатель в левую часть таблицы header-А и прописывайте название сайта:
Чтобы поместить баннер в правую часть таблицы header-А, необходимо предварительно его изготовить(у меня это просто картинка 550х104px) и поместить в папку img нашего сайта. Затем зацепить этот графический файл мышкой, перетащить в правую часть таблицы и выровнять его по правой стороне (в окне «Свойства» в нижнем окне программы найти «Выровнять» и выбрать из выпадающего меню «Выровнять по правому краю»):
На сегодня, наш сайт выглядит в браузере примерно так:
На следующем занятии мы создадим стили для шапки сайта. Я периодически буду публиковать файлы нашего сайта так, чтобы вы могли их копировать (как в уроке 7) и к концу этого раздела у вас будет готовый шаблон простого сайта.