Студия веб дизайна Luxoris Создание сайтов - модель качественной верстки

Начнем с того, что суть моей статьи в первую очередь заключается в создании удобной модели верстки наших проектов. Иногда гуляя по сети, я натыкаюсь на очень хорошо сделанные веб – сайты, но когда, начинаю разглядывать внутреннюю структуру сайта я ужасаюсь. Дело в том, что при создание сайтов разной сложности и структуры, я наработал немалый опыт и могу уверенно вам сказать, что через несколько дней, когда заказчик просит поменять в каком-то разделе цветовую схему, шрифты или еще что либо. Не очень легко это сделать, а если еще эту верстку делал другой человек то это проблематично. Но если изначально спроектировать модель, то можно очень даже легко редактировать сайт. И так наша задача состоит в том, чтобы создать модель качественной верстки, в которой с легкостью бы ориентировались другие редакторы.
Вы, наверное, спросите, что же это за модель качественной верстки. Во-первых, это изначально грамотно спроектированная структура всех файлов. Во-вторых, это заранее логически разбитые таблицы стилей (CSS) и вынесенные в отдельные файлы. Ну и, конечно же, валидный HTML. Модель качественной верстки это так же означает, то что после того как она готова, ее с легкостью могут редактировать другие верстальщики.
И так предположим у нас есть некий сайт, он состоит из 4-ех страниц, причем у каждой страницы своя цветовая схема, но шаблон HTML у всех страниц одинаковый.


На этих 2 картинках я примерно описал данную задачу. Теперь посмотрев на это нам необходимо разделить все что, мы имеем как минимум на 2 части, те которые встречаются на всех страницах и те которые относятся только к одной странице. Предлагаю следующую структуру нашего проекта, все файлы отныне мы будем называть своими именами для других редакторов, ибо они тоже должны здесь с легкостью ориентироваться.
../store//store/css//store/css/common.css – основная таблица стилей/store/css/main.css – таблица стилей для странички «main»/store/css/news.css – таблица стилей для странички «news»/store/css/shop.css – таблица стилей для странички «shop»/store/css/mail.css – таблица стилей для странички «e-Mail»/store/i/ – здесь будут наши картинки/main.html – страничка «main»/news.html – страничка «news»/shop.html – страничка «shop»/mail.html – страничка «e-Mail»
Для начала нам нужен HTML шаблон для всех страниц. Предлагаю один из самых актуальных на сегодняшний день стилей верстки Div/XHTML strict (еще раз повторюсь, что объяснять сам HTML не основная задача моей статьи, так что, надеюсь на то, что всем понятно, что написано ниже):
И так мы имеем приличный шаблон страниц и внутреннюю структуру сайта, теперь самое время заняться созданием таблиц стиля для них. Начнем с основной таблицы стиля, в ней должны быть все общие стили элементов нашего сайта, которые встречаются на всех страница. Но из-за того, что в данном случае наш сайт имеет не одну цветовую схему, есть смысл отделить цветовые схемы в отдельные файлы, от основной таблицы стилей, для удобства их редактирования.
Файл common.css - в нем мы описываем основные стили для наших страниц, такие как ширина, высота, размеры шрифтов, отступы и т.д.:
body {height:100%;font: 100% Arial,Arial Narrow; -- не лишайте пользователя возможности менять размер текстаpadding:0;margin:0;background: #FFF;overflow:auto; -- не отображает скрол когда страница подходит под размеры окна браузера}h1, h2, h3, h4, h5, h6, p {margin: 0;padding: 0;border: 0;text-align: left;}ul, li {padding: 0;margin: 0;list-style: none;}img {border: 0;}a {font-size: 0.8em;text-decoration: underline;}.clear-all {line-height: 0;height: 0;clear: both;font-size: 0;margin: 0;padding: 0;position: static;float: none;display: block;}/* Привыкайте к структурированным таблицам стиля, облегчает возможность редактирования */div.container {width: 750px;margin: 10px auto;}div.container div.header {height: 150px;background: red;}div.container div.header img {position: relative;top: 20px;left: 20px;}div.container ul.top-menu li {display: block;padding:3px;float: left;}div.container ul.top-menu li a {display: block;font-size: 1em;height:20px;text-align: center;padding:3px 10px;}div.container div.content {padding:0 20px 20px 20px;}div.container div.content h1 {font-size: 1.2em;padding-bottom:5px;padding-top:20px;}div.container div.content p {font-size: 0.8em;padding:5px 0;}
Файл main.css - в нем мы описываем все, что встречается только в этой странице, в данном случае это только цветовая схема, но никто нам не запрещает добавлять сюда еще, что - либо касающееся именно этой страницы:
/* и так первое это объединение объектов, в одну группу */import (‘common.css’); -- подключаем главную таблицу стилейdiv.container div.header,div.container div.content {background-color: red;}div.container div.content h1 {color: #57001f;}div.container div.content p {color: #FFF;}… далее могут идти какие-то дополнительные стили к этой странице
Файл news.css:
/* и так первое это объединение объектов, в одну группу */import (‘common.css’); -- подключаем главную таблицу стилейdiv.container div.header,div.container div.content {background-color: #88007d;}div.container div.content h1 {color: red;}div.container div.content p {color: #FFF;}… далее могут идти какие-то дополнительные стили к этой странице
Ну, вот, в общем - то и все, теперь мы просто к каждой странице подключаем нужную таблицу стилей и имеем: качественно и валидно оформленный HTML (чистый), интуитивно понятную другим редакторам внутреннюю структуру сайта и готовые к любым экспериментам таблицы стилей (что не очень часто встречается в сети). Попробуйте продумать собственную модель, ведь может она получиться куда лучше предложенной мной, экспериментируйте, и все у вас получится.
�
Студия Веб-дизайна Luxoris - создание и раскрутка сайтов