Блоки в документах

Михайло Дубаков

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

Обладнання блоків річ цікава, але нас, як верстальників, в першу чергу цікавить верстка блоків. Звичайно, для унікально оформленого блоку доведеться створювати унікальний HTML-код, але все ж є досить багато універсальних прийомів, які зустрічаються часто - поруч.

Виділення блоків

Практично завжди сайт можна розбити на блоки. У мережі зустрічаються оригінальні сайти дизайнерів, на яких складно знайти блоки, тому що навіть меню іноді так заховано, що на його виявлення йде 5 хвилин. Але всі стандартні сайти, з якими вам і доведеться мати справу, на блоки розбити можна. На рис. 1 показана перша сторінка сайту компанії «Дизайн Артіль», яка займається веб-розробками H1 (font: 22px Arial)

DIV> H1 (font: 14px Arial)

Чесно кажучи, особливої користі від селектора спадкоємця немає, але мене вони цікавлять по іншої причини: їх не розуміє браузер Internet Explorer, але чудово розуміє браузер Mozilla! Тобто селектор спадкоємця можна використовувати для розділення оголошень.

Ось і скористаємося нею:

H1 (font: 22px Arial; margin-bottom: -20px)

BODY> H1 (margin-bottom:-14px)

Після цього нижнє поле заголовка буде абсолютно однакове в браузерах Internet Explorer і Mozilla, але тут я вирішую перевірити результат в Opera і бачу, що поле більше, ніж необхідно ... Виходить, що треба розділити оголошення стилів для Opera і IE з одного боку, і Mozilla з іншого боку. Чесно зізнаюся, я не знаю, як реалізувати такий поділ засобами CSS. Звичайно, можна написати скрипт, який визначає браузер і динамічно підключає в залежності від браузера різні таблиці стилів, але мені таке рішення проблеми на здається красивим.

Схоже, я зайшов у глухий кут. Що ж робити? Перший варіант, не звертати уваги, що в Opera нижнє поле на кілька пікселів більше. Насправді, в більшості випадків нічого страшного в цьому немає. Звичайно, якщо стиль більш складний і критичний, то так чинити не можна. У крайньому випадку можна все-таки розділити різні таблиці стилів для різних браузерів за допомогою спеціального скрипта, який буде відрізняти браузери та динамічно підключати необхідну таблицю стилів.

Ось такі проблеми виникають, коли намагаєшся реалізувати дуже простий, на перший погляд, стиль для заголовків. Що вдієш, таке життя ...

Таблиці

Обладнання таблиць можна присвятити окрему главу, але ми обмежимося декількома сторінками. Наприклад, у нас є проста таблиця, показана на рис. 24

Рис. 24 Дуже проста таблиця без стилів

Коду поки що приводити не буду, тому що він зовсім звичайний. Хіба що заголовок таблиці зроблений за допомогою елементів, а не, що абсолютно правильно. Зараз на таблицю не написано ні одного стилю, так що почнемо пробувати на ній різні варіанти оформлення.

Спочатку задамо шрифт:

TH, TD (font: 12px Verdana)

Дивимося результат у браузері і виявляємо, що заголовки не виводяться напівжирним. Стиль за умовчанням ми переписали, так що треба явно задати для заголовків напівжирний шрифт. Для цього доведеться розділити оголошення:

TH (font: bold 12px Verdana)

TD (font: 12px Verdana)

В самої таблиці злегка збільшимо відступи в осередках, прописавши cellpadding = "4". Зараз можна братися за оформлення. Одне з найпоширеніших - завдання фону для осередків. Дійсно, зазвичай виходить непогано. Ми поставимо для звичайних клітинок світло-сірий фон, а для заголовка трохи темніше, щоб явно його виділити. Як задається фон ви знаєте:

TH (background: # DDD; font: bold 12px Verdana)

TD (background: # EEE; font: 12px Verdana)

Результат показаний на рис. 25

Рис. 25 Таблиця з фоном для осередків

Як бачите, дійсно непогано виглядає. Давайте спробуємо інші види оформлення. Ще можна відокремлювати рядки таблиці лініями.

При такому способі оформлення звичайно обнуляють відстань між осередками, тому що інакше лінія буде переривчастою, що некрасиво. При це встановлюють досить великі відступи, ми встановимо cellpadding = "6". Лінія реалізується за допомогою рамки. Ми встановимо рамку для нижньої частини блоку, який являє собою комірку. Крім того, для заголовка задамо фон:

TH (background: # DDD; border-bottom: 1px solid # 666; font: bold 12px Verdana)

TD (border-bottom: 1px solid # 666; font: 12px Verdana)

Результат буде досить симпатичний, він показаний на рис. 26

Рис. 26 Таблиця з лініями між рядками

Фантазія дизайнерів безмежна, тому доводиться верстати найрізноманітніші таблиці з фоновими зображеннями, малюнками в заголовку і т.д. Для нас важливий принцип написання стилів для таблиць, а його ми вже освоїли.

Списки

Про списки ми досить детально говорили, коли розглядали меню. Особливої сенсу повторюватися немає, але взагалі можна трохи обговорити різницю в списках між браузерами. Створимо простий список і подивимося, як він буде виглядати в різних браузерах.

Рис. 27 Вид простого списку в браузерах Internet Explorer, Mozilla і Opera

Як бачите відмінності є. По-перше, списки мають різні поля ліворуч. Звичайно, в звичайному тексті це не принципово, але коли необхідні жорсткі вирівнювання меню, то різниця в 3 пікселі може бути помітна. По-друге, розмір маркерів у списку в Internet Explorer помітно менше, ніж в інших браузерів. Мені здається, що в IE розмір підібраний краще, і список виглядає акуратніше. І, нарешті, межстрочное відстань у списках різне. Якщо в Internet Explorer воно дорівнює 160%, то в Mozilla - 120% (як і елемента

). Здається, що в Opera теж задано 160%, але на самому справі, як це не дивно, в Opera теж 120%. Крім того, в Opera є відступ зверху, тоді як в інших браузерах немає.

При написанні стилів необхідно враховувати відмінності у відображенні списків, якщо це необхідно. Наприклад, якщо ви хочете, щоб маркер був однаковий у всіх браузерах, то доведеться його намалювати самостійно і підключити цей малюнок. На жаль, розмір стандартного маркера неможливо змінити. Якщо ви назвали файл із маркером circle.gif, то підключити його до всіх ненумерованого списку дуже просто:

UL (list-style-image: url (i/circle.gif))

Нам залишилося розглянути гіперпосилання.

Гіперпосилання

Обладнання гіперпосилань річ відповідальна. Відвідувач повинен чітко знати, що є посиланням, а що ні. Взагалі оформленням посилань зобов'язаний займатися дизайнер, тому що віддавати це на відкуп верстальнику небезпечно.

Якщо посилання знаходиться в тексті, то підкреслення вкрай бажано, тому що воно однозначно асоціюється з гіперпосиланням. Часто його і залишають, обмежуючись лише наказом іншого кольору. Як ви знаєте, за умовчанням посилання мають синій колір. Багато фахівців з юзабіліті люто радять не змінювати прекрасний і звичний синій колір, але естетичний погляд дизайнера не в силах дивитися на сині посилання і всіляко намагається поміняти колір. У цьому питанні я з дизайнерами солідарний.

Зазвичай застосовують різні ефекти при наведенні мишки на посилання: змінюють колір і фон, прибирають підкреслення, задають рамки і т.п. Має сенс познайомитися з ефектами ближче.

Почнемо з того, що в CSS є псевдо-клас hover, який дозволяє задавати стилі для стану при наведенні курсору миші на елемент. Наприклад, посилання у нас чорного кольору, а при наведенні курсору миші треба змінювати колір на помаранчевий. Така поведінка реалізується двома оголошеннями:

A (color: # 000)

A: hover (color: # F90)

Псевдо-клас відрізняється від звичайного тим, що його не треба явно вказувати в коді документа. Якщо ви розкажете звичайний клас, то в коді обов'язково треба його вказати, наприклад,. Псевдо-клас не треба вказувати в коді, а стилі, написані до нього, автоматично застосовуються до всіх елементів з даним поводженням. У нашому випадку псевдо-клас hover заданий для всіх посилань, так що при наведенні курсору миші посилання будуть міняти колір. Сподіваюся, вам все стало зрозуміло, тому що перейдемо до більш високих матерій.

Звичайним способом виділення посилань при наведенні є зникнення підкреслення. За ходу книги воно вже неодноразово реалізовувалося. Крім того, іноді змінюють фон. Можна і поєднати два цих прийому:

A (color: # 000)

A: hover (background: # DDD; text-decoration: none)

Результат показаний на рис. 28

Рис. 28 Зміна фону і усунення підкреслення посилання

Ще одні цікавий ефект - включення рамок при наведенні курсору. Щоправда, він не працює в браузері Internet Explorer 5, але нічого страшного в цьому немає. На перший погляд, він повинен дуже просто реалізовуватися:

A (color: # 000)

A: hover (border: 1px solid # 000; text-decoration: none)

На Насправді при такому стилі посилання при наведенні зміщуватиметься вправо на 1 піксель з-за рамки. Виглядає це некрасиво, а усувається дуже просто:

A: hover (border: 1px solid # 000; text-decoration: none; margin-left: -1px)

В результаті виходить ефект, який показано на рис. 29

Рис. 29 Рамка навколо посилання

Ще можна змінювати суцільну лінію на пунктир за допомогою фонового малюнка. Створюєте одна ланка пунктирною лінії і зберігаєте його у файл bg1.gif. Після цього залишиться написати стиль, який дублює фон у осі Х і позиціонує його вниз блоку посилання:

A: hover (background: url (i/bg1.gif) repeat-x bottom; text-decoration: none)

Результат показаний на рис. 30

Рис. 30 Заміна підкреслення пунктирною лінією

Звичайно, оформлення посилань не обмежується наведеними вище прикладами. Ви можете включити фантазію і придумати абсолютно незвичайні і оригінальні ефекти, але обережно. Є речі, які практично завжди погано використовувати. Наприклад, не рекомендується змінювати розмір і насиченість шрифту. Ще гірше змінювати сам шрифт. Наприклад, якщо у вас в тексті шрифт Verdana, а при наведенні курсору миші він змінюється на Courier, то можуть виникати проблеми в браузері і користувачі сприймають таку зміну з роздратуванням.

Крім того, якщо ви змінили колір або фон, то треба уважно дивитися, наскільки контрастні нові кольори. Наприклад, якщо у вас чорна посилання на білому фоні, а при наведенні фон змінюється на темно-сірий, посилання читатися не буде.

Резюме

Я не зачепив ще деякі види блоків, такі як локальні банери, спеціальні пропозиції, новини і т.п. У кінці книги будуть реальні приклади, де такі блоки обов'язково зустрінуться.

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

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/