Студія веб дизайну 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 - створення і розкрутка сайтів

No related posts.

Comments are closed.