Створення сайтів - модель якісної верстки

Створення сайтів - модель якісної верстки

Почнемо з того, що суть моєї статті насамперед полягає в створенні зручної моделі верстки наших проектів. Іноді гуляючи по мережі, я натикаюся на дуже добре зроблені веб-сервером – сайти, але коли, починаю роздивлятися внутрішню структуру сайту я жахаюся. Річ у тому, що при створення сайтів різної складності і структури, я напрацював чималий досвід і можу упевнено вам сказати, що через декілька днів, коли замовник просить поміняти в якомусь розділі колірну схему, шрифти або ще що або. Не дуже легко це зробити, а якщо ще цю верстку робила інша людина те це проблематично. Але якщо спочатку спроектувати модель, то можна дуже навіть легко редагувати сайт. І так наше завдання полягає в тому, щоб створити модель якісної верстки, в якій з легкістю б орієнтувалися інші редактори.

Ви, напевно, запитаєте, що ж це за модель якісної верстки. По-перше, це спочатку грамотно спроектована структура всіх файлів. По-друге, це заздалегідь логічно розбиті таблиці стилів (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 не основне завдання моєї статті, так що, сподіваюся на те, що всім зрозуміло, що написано нижчим):

? xml version=1.0 encoding= utf-8?! DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//en W3. org/tr/xhtml1/dtd/xhtml1-strict. Dtd html xmlns= W3. org/1999/xhtml xml: lang= en-us lang= en-us head meta http-equiv= Content-type content= text/html; charset=utf-8 / meta name= keywords content= project keywords / meta name= description content= project description / title Project title/title link rel= stylesheet type= text/css href= store/css/main. Css //head body div class= container div class= header img src= store/i/logo. Gif alt= Project slogan //div ul class= top-menu li class= main а href= main. Html main/a/li li class= news а href= news. Html news/a/li li class= shop а href= shop. Html shop/a/li li class= mail а href= mail. Html e-mail /a/li/ul div class= clear-all nbsp;/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/body/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; }а {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 а {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 - створення і розкручування сайтів