Создание сайтов - модель качественной верстки
Дело в том, что при создание сайтов разной сложности и структуры, я наработал немалый опыт и могу уверенно вам сказать, что через несколько дней, когда заказчик просит поменять в каком-то разделе цветовую схему, шрифты или еще что либо. Не очень легко это сделать, а если еще эту верстку делал другой человек то это проблематично. Но если изначально спроектировать модель, то можно очень даже легко редактировать сайт. И так наша задача состоит в том, чтобы создать модель качественной верстки, в которой с легкостью бы ориентировались другие редакторы.
Вы, наверное, спросите, что же это за модель качественной верстки. Во-первых, это изначально грамотно спроектированная структура всех файлов. Во-вторых, это заранее логически разбитые таблицы стилей (CSS) и вынесенные в отдельные файлы. Ну и, конечно же, валидный HTML. Модель качественной верстки это так же означает, то что после того как она готова, ее с легкостью могут редактировать другие верстальщики.
И так предположим у нас есть некий сайт, он состоит из 4-ех страниц, причем у каждой страницы своя цветовая схема, но шаблон HTML у всех страниц одинаковый.
На этих 2 картинках я примерно описал данную задачу. Теперь посмотрев на это нам необходимо разделить все что, мы имеем как минимум на 2 части, те которые встречаются на всех страницах и те которые относятся только к одной странице. Предлагаю следующую структуру нашего проекта, все файлы отныне мы будем называть своими именами для других редакторов, ибо они тоже должны здесь с легкостью ориентироваться.
..<br /> /store/<br /> /store/css/<br /> /store/css/common.css – основная таблица стилей<br /> /store/css/main.css – таблица стилей для странички «main»<br /> /store/css/news.css – таблица стилей для странички «news»<br /> /store/css/shop.css – таблица стилей для странички «shop»<br /> /store/css/mail.css – таблица стилей для странички «e-Mail»<br /> /store/i/ - здесь будут наши картинки<br /> /main.html – страничка «main»<br /> /news.html – страничка «news»<br /> /shop.html – страничка «shop»<br /> /mail.html – страничка «e-Mail»
Для начала нам нужен HTML шаблон для всех страниц. Предлагаю один из самых актуальных на сегодняшний день стилей верстки Div/XHTML strict (еще раз повторюсь, что объяснять сам HTML не основная задача моей статьи, так что, надеюсь на то, что всем понятно, что написано ниже):
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <meta name="keywords" content="project keywords " /><br /> <meta name="description" content="project description " /></p> <link rel="stylesheet" type="text/css" href="store/css/main.css" /> </head><br /> <body></p> <div class=”container”> <div class=”header”><img src=”store/i/logo.gif” alt=”Project slogan” /></div> <ul class=”top-menu”> <li class=”main”><a href=”main.html”>main</a></li> <li class=”news”><a href=”news.html”>news</a></li> <li class=”shop”><a href=”shop.html”>shop</a></li> <li class=”mail”><a href=”mail.html”>e-mail </a></li> </ul> <div class=”clear-all”> </div> <div class=”content”> <h1>Header text</h1> <p>Loren ipsum dolor sit amet.</p> <p>Loren ipsum dolor sit amet.</p> <h1>Header text</h1> <p>Loren ipsum dolor sit amet.</p> <p>Loren ipsum dolor sit amet.</p> </div> </div> <p></body><br /> </html>
И так мы имеем приличный шаблон страниц и внутреннюю структуру сайта, теперь самое время заняться созданием таблиц стиля для них. Начнем с основной таблицы стиля, в ней должны быть все общие стили элементов нашего сайта, которые встречаются на всех страница. Но из-за того, что в данном случае наш сайт имеет не одну цветовую схему, есть смысл отделить цветовые схемы в отдельные файлы, от основной таблицы стилей, для удобства их редактирования.
Файл common.css - в нем мы описываем основные стили для наших страниц, такие как ширина, высота, размеры шрифтов, отступы и т.д.:
body {<br />
height:100%;<br />
font: 100% Arial,Arial Narrow; -- не лишайте пользователя возможности менять размер текста<br />
padding:0;<br />
margin:0;<br />
background: #FFF;<br />
overflow:auto; -- не отображает скрол когда страница подходит под размеры окна браузера<br />
}<br />
h1, h2, h3, h4, h5, h6, p {<br />
margin: 0;<br />
padding: 0;<br />
border: 0;<br />
text-align: left;<br />
}<br />
ul, li {<br />
padding: 0;<br />
margin: 0;<br />
list-style: none;<br />
}<br />
img {<br />
border: 0;<br />
}<br />
a {<br />
font-size: 0.8em;<br />
ext-decoration: underline;<br />
}<br />
.clear-all {<br />
line-height: 0;<br />
height: 0;<br />
clear: both;<br />
font-size: 0;<br />
margin: 0;<br />
padding: 0;<br />
position: static;<br />
float: none;<br />
display: block;<br />
}<br />
/* Привыкайте к структурированным таблицам стиля, облегчает возможность редактирования */<br />
div.container {<br />
width: 750px;<br />
margin: 10px auto;<br />
}<br />
div.container div.header {<br />
height: 150px;<br />
background: red;<br />
}<br />
div.container div.header img {<br />
position: relative;<br />
top: 20px;<br />
left: 20px;<br />
}<br />
div.container ul.top-menu li {<br />
display: block;<br />
padding:3px;<br />
float: left;<br />
}<br />
div.container ul.top-menu li a {<br />
display: block;<br />
font-size: 1em;<br />
height:20px;<br />
text-align: center;<br />
padding:3px 10px;<br />
}<br />
div.container div.content {<br />
padding:0 20px 20px 20px;<br />
}<br />
div.container div.content h1 {<br />
font-size: 1.2em;<br />
padding-bottom:5px;<br />
padding-top:20px;<br />
}<br />
div.container div.content p {<br />
font-size: 0.8em;<br />
padding:5px 0;<br />
}
Файл main.css - в нем мы описываем все, что встречается только в этой странице, в данном случае это только цветовая схема, но никто нам не запрещает добавлять сюда еще, что - либо касающееся именно этой страницы:
/* и так первое это объединение объектов, в одну группу */</p>
<p>import (‘common.css’); -- подключаем главную таблицу стилей</p>
<p>div.container div.header,<br />
div.container div.content {<br />
background-color: red;<br />
}<br />
div.container div.content h1 {<br />
color: #57001f;<br />
}<br />
div.container div.content p {<br />
color: #FFF;<br />
}
… далее могут идти какие-то дополнительные стили к этой странице
Файл news.css:
/* и так первое это объединение объектов, в одну группу */</p>
<p>import (‘common.css’); -- подключаем главную таблицу стилей</p>
<p>div.container div.header,<br />
div.container div.content {<br />
background-color: #88007d;<br />
}<br />
div.container div.content h1 {<br />
color: red;<br />
}<br />
div.container div.content p {<br />
color: #FFF;<br />
}
… далее могут идти какие-то дополнительные стили к этой странице
Ну, вот, в общем - то и все, теперь мы просто к каждой странице подключаем нужную таблицу стилей и имеем: качественно и валидно оформленный HTML (чистый), интуитивно понятную другим редакторам внутреннюю структуру сайта и готовые к любым экспериментам таблицы стилей (что не очень часто встречается в сети). Попробуйте продумать собственную модель, ведь может она получиться куда лучше предложенной мной, экспериментируйте, и все у вас получится.
Разное Дизайнер (designer)