Створення сайтів – модель якісної верстки
Створення сайтів – модель якісної верстки
Почнемо з того, що суть моєї статті в першу чергу полягає у створенні зручної моделі верстки наших проектів. Іноді гуляючи по мережі, я натикаюся на дуже добре зроблені веб – сайти, але коли починаю розглядати внутрішню структуру сайту я жахаюся. Справа в тому, що при створення сайтів різної складності та структури, я напрацював чималий досвід і можу впевнено сказати, що через кілька днів, коли замовник просить змінити в якомусь розділі колірну схему, шрифти або ще що-небудь. Не дуже легко це зробити, а якщо ще цю верстку робив інший чоловік, то це проблематично. Але якщо спочатку спроектувати модель, то можна дуже навіть легко редагувати сайт. І так наша задача полягає в тому, щоб створити модель якісної верстки, в якій з легкістю б орієнтувалися інші редактори.
Ви, напевно, запитаєте, що ж це за модель якісної верстки. По-перше, це спочатку грамотно спроектована структура всіх файлів. По-друге, це заздалегідь логічно розбиті таблиці стилів (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 не основне завдання моєї статті, так що, сподіваюся на те, що всім зрозуміло, що написано нижче):
Project title
main
news
shop
e-mail
Header text
Loren ipsum dolor sit amet.
Loren ipsum dolor sit amet.
Header text
Loren ipsum dolor sit amet.
Loren ipsum dolor sit amet.
І так ми маємо пристойний шаблон сторінок і внутрішню структуру сайту, тепер саме час зайнятися створенням таблиць стилю для них. Почнемо з основної таблиці стилю, в ній мають бути всі загальні стилі елементів нашого сайту, які зустрічаються на усіх сторінка. Але з-за того, що в даному випадку наш сайт має не одну колірну схему, є сенс відокремити колірні схеми в окремі файли, від основної таблиці стилів, для зручності їх редагування.
Файл 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.8 em;
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.2 em;
padding-bottom:5px;
padding-top:20px;
}
div.container div.content p {
font-size: 0.8 em;
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 – створення та розкрутка сайтів