Ми вже познайомилися зі структурою шаблону, навчилися визначати тип шаблону, розібрали основні команди виведення вмісту. Але ми ще не зробили найголовнішого - не зробили шаблон. У цій статті ми впритул приступимо до створення розмітки шаблону, познайомимося з створенням "гумового" шаблону.
Хотілося б уточнити, що існує два види шаблонів - фіксовані і гумові. "Гумовим" шаблоном будемо називати шаблон, який автоматично пристосовується під певну ширину вікна браузера користувача. Такий макет має кілька переваг:
- Використовується все доступне простір браузера
- У користувачів з "маленькими" моніторами не виникає горизонтальних смуг прокрутки
- Користувачі "великих" моніторів можуть порадіти, як ефективно використовується вся площа екрану, а значить, гроші на монітор були витрачені не даремно :)
- Такі шаблони зручно друкуються на папері будь-якого формату
Більшість дизайнерів використовують для створення гумового макета таблиці, або, інакше кажучи, табличну верстку шаблону. Так, безумовно, табличній верстці набагато легше навчитися, ніж верстці на шарах, але, на мій погляд, використання таблиць має недоліки, говорилося вище і ще додам:
- При великий вкладеності таблиць важко знайти потрібний шматок коду і замінити його. Уявіть, скільки часу піде на пошук двох-трьох рядків серед нескінченних table / tr / td!
І необхідно уточнити ще одну річ: при створенні макета ми будемо користуватися стилями (CSS), тому, якщо ви почули про CSS перший раз, то перед безпосереднім створенням шаблону, прочитайте керівництво "Крок за кроком" по CSS. Чому я вибрав саме це керівництво? Воно написано на літературному, легко зрозумілою мовою, і забезпечено великою кількістю прикладів.
У цьому прикладі для наочності я визначив стилі в заголовку документа, але, повторюся, лише для наочності. Пізніше, ми "винесемо" всі стилі з документа в окремий файл. Тепер приступимо до вивчення коду.
Я розмістив розмітку шаблона в загальному контейнері
, для якого поставив ширину в 80% від дозволу екрану користувача. Ліва і права колонки мають свою ширину, яка також задана в процентах. Ширина кожної колонки обчислюється від ширини батьківського контейнера (). Для кожної колонки застосований параметр float: left з метою розміщення всіх колонок по горизонталі. Для "футера" шаблону я застосував властивість clear: both, яке вказує на закінчення вирівнювання по лівому краю, і в результаті отримаємо "футер" під усіма трьома колонками.Щоб додати елегантності нашому шаблоном, а також для підвищення читабельності тексту, необхідно для елементів, що входять в кожну колонку, додати відступи від меж самих колонок. Будь-, не замислюючись, скористався властивістю padding, але Internet Explorer не завжди інтерпретує стилі так, як нам хотілося б цього. Тому, для підтримки кросбраузерності (підтримка різних браузерів) в нашому шаблоні, я для кожної з колонок додам ще один шар:
: