В создании веб-страниц существует множество терминов, таких как 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.