Создание HTML-сайта
Стили (продолжение)
На прошлом занятии мы создали стиль для границы главной таблицы. Теперь, открыв окно «Код», найдите тегtable и сравните его с моим. Он должен выглядеть примерно так:
Где: width="870" – ширина 870 пикселей; align="center" – выравнивание посередине; cellpadding="0" иcellspacing="0" – нулевые отступы; bgcolor="#FFFFFF" – белый фоновый цвет, class="border1" – стиль CSS.
Если у вас все получилось, давайте продолжим работу со стилями CSS. Предлагаю вначале заняться шапкой сайта. Выделяем header, для чего устанавливаем в него курсор и кликаем по тегу td внизу рабочего окна программы. Нажимаем на «Создать правило CSS» и называем его header. В окне «определение правила CSS для .header»проставляем все, так как у меня.
Почему мы создаем границу только снизу? Да потому, что header остальные границы уже имеет. Если понятно, нажимаем «Применить» и «ОК» и смотрим, что у нас вышло. Чтобы посмотреть в браузере, кликните по значку браузера в навигации рабочего окна программы (это маленький Земной Шарик) и откроется окно браузера, установленного у вас по-умолчанию.
У меня, как видите, все получилось. Идем дальше – вернее ниже. Делаем все то же самое с горизонтальной навигацией. Сначала создаем нижнюю границу. Стиль назовем nav1.
Теперь создаем стиль для ячеек горизонтальной навигации. Для первых трех. Им требуется создать по одной границе справа. Пусть стиль будет называться nav1-1.
По аналогии создаем стиль для блока вертикальной навигации и подвала. Стиль для вертикальной навигации обозначим как nav2, для ячеек навигации nav2-1, а для подвала footer.
Вот что должно у вас получиться. Все это не очень сложно, но требует внимания и аккуратности. Кстати об аккуратности! Не забывайте сохранять индексную страницу после каждого изменения!
Напоследок давайте зададим фоновый цвет странице и на этом закончим этот урок. Кликните по свободному месту рабочего окна программы, в разделе «Свойства» найдите «Свойства страницы». В открывшемся окне вам нужно выбрать категорию «Внешний вид» и указать цвет фона. Не забудьте нажать «Применить» и «ОК».
Вот, что у меня получилось. Кстати, вместо цвета можно вставить фоновое изображение.