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