Мы создали структуру страниц, теперь визуализируем ее. Есть множество подходов к верстке страниц в формате HTML, что выходит за рамки материала настоящей книги. Однако рекомендуется не отказываться от использования CSS и отделять разметку структуры от разметки представления. Вернемся к нашей структуре и создадим простейший PHP-файл, в котором отметим каждую зону тегами <div>. Получится следующий код.

Мы использовали внешний «контейнер» <div>, который включает все определенные нами зоны, отделенные друг от друга собственными тегами <div>. Теперь создадим таблицу стилей (как правило, данный файл называется template. ess) и опишем стили для каждого из блоков <div>.

Данный код — отправная точка описания стилей. Здесь определяется ширина блоков <div> в соответствии с расположением выделенных нами зон. Две зоны в левой части сайта (главное меню и форма авторизации) будут отображаться в блоках шириной 200 пикселов, а область содержимого будет шириной 700 пикселов, что в сумме составит общую ширину контейнера. Затем вы можете улучшить дизайн за счет добавления картинок и варьирования шрифтов — позвольте вашему воображению поработать над дизайном сайта.

Если вы поручили верстку кому-либо или сделали все сами, можете двигаться дальше. Измените структуру папок по образцу, приведенному ниже.

Создайте каталог для шаблона или внутри него папку для файла CSS и вторую — для изображений. Поместите в них файлы в соответствии с образцом

Дополнительный файл index. html не содержит каких-либо данных. Он необходим, чтобы любопытные пользователи не могли видеть структуру каталогов при вводе прямого URL-адреса.

После создания необходимых папок шаблона можно переходить к углубленному рассмотрению процесса разработки шаблона.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *