В создании веб-страниц существует множество терминов, таких как CSS, HTML, DHTML, XHTML и так далее. В следующей статье мы будем использовать некоторые базовые знания об HTML. Прежде чем изучать это вводное руководство, убедитесь, что у вас уже есть определенные базовые знания HTML. Давайте начнем шаг за шагом использовать DIV+CSS для разработки макета веб-страницы.
Вообще говоря, первым шагом во всех проектах является зачатие. После замысла вам нужно использовать PhotoShop или FireWorks (далее PS или FW) и другое программное обеспечение для обработки изображений, чтобы просто нарисовать макет интерфейса, который необходимо создать. Ниже приведена схема компоновки интерфейса.
Далее нам нужно спланировать макет страницы на основе концептуальной схемы. Внимательно проанализировав схему, мы легко обнаружим, что картинка условно разделена на следующие части:
1. Верхняя часть, которая также включает ЛОГОТИП, МЕНЮ и изображение баннера;
2. Контентную часть можно разделить на боковую панель и основной контент;
3. Внизу находится информация об авторских правах.
С помощью приведенного выше анализа мы можем легко разместить наш уровень дизайна, как показано ниже:
На основе изображения выше я нарисовал еще одну фактическую диаграмму макета страницы, чтобы проиллюстрировать взаимосвязь вложенности слоев, чтобы ее было легче понять.
Структура DIV следующая:
│body {} /*Это элемент HTML, подробности объяснять не буду*/
└#Container {} /*Контейнер слоя страницы*/
├#Header {} /*Заголовок страницы*/
├#PageBody {} /*Тело страницы*/
│ ├#Боковая панель {} /*Боковая панель*/
│ └#MainBody {} /*Основное содержимое*/
└#Footer {} /*Низ страницы*/
На этом этапе макет страницы и планирование завершены, и следующее, что нам нужно сделать, — это начать писать HTML-код и CSS.
Затем мы создаем новую папку на рабочем столе и называем ее «Упражнение по макету DIV+CSS». Создайте в папке два пустых документа блокнота и введите следующее содержимое:
Это базовая структура XHTML, назовите ее index.htm, а другой документ Блокнота назовите css.css.
Далее мы пишем базовую структуру DIV в паре тегов <body></body>, код следующий:
<div id=container><!--Контейнер слоя страницы-->
<div id=Header><!--Заголовок страницы-->
</div>
<div id=PageBody><!--Тело страницы-->
<div id=Боковая панель><!--Боковая панель-->
</div>
<div id=MainBody><!--Основное содержимое-->
</div>
</div>
<div id=Footer><!--Низ страницы-->
</div>
</div>
Чтобы облегчить чтение кода в будущем, нам следует добавить соответствующие комментарии. Далее откройте файл css.css и напишите информацию CSS. Код выглядит следующим образом: