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

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

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

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

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

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

Рис. 1 Головна сторінка сайту www.artel.by, розбита на блоки

Я виділив 7 блоків, на малюнку вони позначені цифрами в кружечки. Пройдімося по всім блокам:

Блок з логотипом. Іноді його ще називають блок для бренду. Логотип зазвичай розташовується в лівому верхньому кутку.

Блок з меню. Меню на сайті нестандартне, розташоване в три стовпчики.

Блок новин або стрічка новин. Новини виводяться досить стандартно в один стовпчик. Кожна новина має дату та посилання «докладніше».

Два інформаційних блоку. Один з останньою роботою, а другий з рекламою системи.

Блок для роздруківки інформації про компанію. Звичайна форма з чекбоксами і графічної кнопкою.

Блок підписки на новини. Поле для введення електронної адреси та графічна кнопка.

Блок входу для клієнтів. Форма з полями для вводу логіна і пароля з графічною кнопкою.

Дизайн сторінки на рис. 1 будується саме на оформленні окремих блоків і на невеликій кількості яскравих картинок. Так буває нечасто, тому зазвичай блоки на сторінці трохи складніше ідентифікувати.

Ми зараз можемо як би структуровано поглянути на верстку окремої сторінки. Можна виділити два завдання:

створення загальної структури сторінки

створення окремих блоків

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

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

В як невеликого тренування давайте придумаємо каркас для сторінки, показаної на рис. 1. Видно, що блоки 1 і 2 можна винести в окрему таблицю. Взагалі існує загальне правило для табличної верстки: використовувати як можна більше окремих таблиць. Якщо весь вміст сторінки помістити в одну таблицю, то відвідувач побачить зміст тільки тоді, коли завантажиться весь вміст таблиці. Якщо ж розбити сторінки на кілька різних таблиць, то вони завантажуватимуться послідовник і відвідувач побачить деяку частину інформації раніше. Так ось, блок 1 і 2 можна винести в одну таблицю, яка може складатися з чотирьох стовпців.

Решта блоки відмінно вкладаються в другу таблицю з трьох стовпців, вони просто самі в неї просяться, так що логічно задовольнити їх бажання. У результаті у нас вийде дві окремі таблиці, одна з яких містить блоки 1 і 2, а друга - Всі інші блоки.

Як бачите, у наведеному прикладі продумати заздалегідь каркас сторінки дуже просто. Звичайно, подібні ситуації бувають не завжди. Іноді доводиться проводити багато часу, вирішуючи якусь принципову проблему, що стосується структури. Уява дизайнерів (особливо тих, які з HTML не знайомі) створює деколи такі шедеври, які перевести в HTML неймовірно складно.

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

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

Форми

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

Пошук

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

Рис. 2 Стандартна форма пошуку

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

Графічна кнопка малюється дизайнером, потім вирізається верстальником і зберігається в каталозі з іншими картинками. Як ви вже знаєте, каталог з картинками я завжди називаю i. Є в мене і стандартне назва кнопки submit, таку кнопку я зазвичай називаю go. За таких назвах графічна кнопка вставляється ось так:

Стандартне рішення при верстці блоку форми пошуку, показаного на рис. 2, зробити таблицю з одного рядка і двох осередків. У першу комірку вставляється поле введення тексту, а у другому - кнопка. Код буде таким:

На що треба звернути увагу? По-перше, на те, що тег варто між тегами і . Жоден валідатор коду не пропустить таку конструкцію і буде вас клятвено запевняти, що ні в якому разі не можна так вчинити наругу над HTML і вставляти тег в недозволених місцях. Так, не можна, але часто необхідно. Справа в тому, що браузери Internet Explorer, Mozilla і Opera мають зовсім різні точки зору на те, як треба відображати елемент . Internet Explorer впевнений, що треба зробити пристойний відступ від елемента , Opera робить відступ трохи менше, а Mozilla взагалі вважає, що ніякого відступу робити не треба. Ці невідповідності вирішуються так, як показано в коді, тобто приміщенням тега між тегами і . У цьому випадку відступи відсутні у всіх браузерах, що зазвичай буває необхідно. По-друге, в таблиці обнулені відступи і відстані між осередками. Практично завжди дизайнери прив'язують елементи до будь-якої вертикальної або горизонтальної лінії, щоб композиція була краща. Якщо не обнулити відступи, то в підсумку отримаємо два пикселя розбіжності. Звичайно, це не дуже-то і кидається в очі, але гостре око дизайнера відразу помітить розбіжність і попросить виправити. Обов'язково попросить, повірте моєму досвіду. По-третє, при обнулення відступів елементи форми злипаються. Проблему можна вирішити, поставивши після текстового поля нерозривний пробіл. В реальному житті форми рідко залишають у первозданному вигляді і все частіше пишуть на них стилі. Найбільш часто використовується стиль, які замість псевдотрехмерной рамки навколо полів створює звичайну рамку. Деякі оголошують такий стиль для всіх елементів , але я вважаю це поганою практикою, тому що рамки навколо чекбоксів виглядають жахливо. Для текстових полів я створюю окремий клас, який зазвичай називаю input. Якщо кнопка відсилання вмісту форми звичайна неграфіческая, то для неї я створюю клас submit. Наприклад, я хочу зробити рамку шириною 1 піксель темно-сірого кольору, і задати помаранчевий фон для кнопки. Стилі будуть такими: INPUT.input (border: 1px solid # 666) INPUT.submit (background: # F90; border: 1px solid # 666) Форма пошуку зміниться і буде виглядати значно краще. Рис. 3 Форма пошуку з рамками Іноді НЕ цьому не зупиняються. Наприклад, висота кнопки і висота поля введення трохи відрізняється. Це може дратувати естетів. Проблему легко вирішити, якщо задати однакову висоту й у поля, і у кнопки. Для завдання висоти існує властивість height. INPUT.input (border: 1px solid # 666; height: 21px) INPUT.submit (background: # F90; border: 1px solid # 666; height: 21px) Крім того, напис на кнопці читається неважливо. Краще змінити колір шрифту на білий і зробити його напівжирним. INPUT.submit (color: # FFF; font: bold 12px Verdana; background: # F90; border: 1px solid # 666; height: 21px) Після таких перетворень форма пошуку буде виглядати так, як показано на рис. 4. Рис. 4 Форма пошуку із заданою висотою і зміненим шрифтом на кнопці Звичайно, бувають абсолютно унікальні випадки оформлення форм, але нас вони не особливо цікавлять. Так що з пошуком закінчимо. Вхід для клієнтів Ще однією популярною формою є вхід для клієнтів. На рис. 1 така форма представлена блоком 7. Зазвичай форма складається з двох полів (логіна і пароля) і кнопки відправки. Іноді поруч вставляють посилання на сервіс «забув пароль». Користувачі дуже часто забувають свої паролі, так що подібний сервіс вкрай корисний. Типових розташувань елементів форми два: все елементи розташовуються в один рядок поле для введення логіна розташовується в першому рядку, а поле для введення пароля і кнопка відправки - у другому рядку (саме так зроблена форма на рис. 1) Давайте спочатку розглянемо перший варіант. Для нього відмінно підійде таблиця з трьох осередків. Будемо використовувати зображення в якості кнопки відправки і відразу поставимо ширину полів, за допомогою атрибуту size. Код буде простим: В браузері така форма буде виглядати так, як показано на рис. 5. Рис. 5 Проста форма входу для клієнтів Для повного щастя залишилося написати стилі на поля форми. Я знаю, що висота картинки рівно 19 пікселів, тому задам висоту полів теж 19 пікселів. Стиль вийде нескладним: INPUT.input (border: 1px solid # 666; height: 19px) Треба б ще назвати поля, щоб користувач знав, куди що вводити. Іноді назва поля пишуть прямо в самому полі. Для цього можна використовувати атрибут value. Крім того, нам треба задати клас input для обох полів, так що HTML-код форми трохи модифікується: А виглядатиме форма буде так, як показано на рис. 6 Рис. 6 Вид форми після написання стилів Деякі можуть заперечити, що використовувати таблицю для верстки такої простої форми абсолютно необов'язково. Давайте спробуємо зробити якомога простіше і подивимося, що з цього вийде. Якщо прибрати, таблицю, то код стане дуже простим: Він відображатиметься браузером так, як показано на рис. 7. Рис. 7 Форма без таблиць Як бачите, кнопка відправки змістилася вгору, і форма виглядає дуже неакуратно. Жоден дизайнер не пропустить таку помилку і обов'язково попросить виправити. Більш того, ні один пристойний верстальник не повинен робити такі помилки. Проблема виникає через те, що не можна здійснити вирівнювання елементів по вертикалі, якщо вони не вставлені у комірки таблиці. Проблема, насправді, глобальна, і саме вона є причиною використання таблиць навіть у таких простих випадках. Що саме противне, навіть каскадні таблиці стилів не предоставляютхорошей можливості вирівнювання блоків по вертикалі! Тому все одно доведеться користуватися звичайними таблицями. Перейдемо до другого типу форми входу для клієнтів. Таблиць теж буде досить простий. Перший рядок містить одну об'єднану клітинку з полем для логіна, а друга рядок містить два відділення: Здається, що все гаразд і має працювати. І воно працює в браузері Internet Explorer, але не працює в Mozilla і Opera. Наприклад, в Mozilla форма буде виглядати так, як показано на рис. 8 Рис. 8 Вид форми в браузері Mozilla Як бачите, поля злиплося через те, що відстані між осередками таблиці та відступи в осередках обнулені. Форма виглядає неважливо, тому треба як-небудь розсунути поля. Якщо прописати в таблиці атрибут cellspacing = "4", то це вирішить проблему, але зрушить всі поля на чотири пікселя праворуч. Часто це неприйнятно, тому що порушується вирівнювання елементів дизайну уздовж певної вертикалі, сторінка втрачає цілісність і може виглядати дещо незакінченою. Дизайнери відразу помічають дисонанс і страшно обурюються, що абсолютно справедливо. Інший варіант рішення - вставити після першого поля розпірку, тобто невидиму картинку: Я задав висоту картинки 4 пікселя. Зверніть увагу, що перед картинкою обов'язково повинен стояти новий рядок, тобто тег , інакше ніякого ефекту не буде. Такий варіант, в принципі, життєздатний і я ним часто користуюсь, але проблему можна вирішити і за допомогою CSS. Нам треба, щоб у першу осередку був відступ в 4 пікселя знизу, а в інших осередків не було. Логічно, що треба виділити першу клітинку і написати для неї стиль. Виділити краще за допомогою класу. Наприклад, назвемо клас expand-form. Для завдання відступів блоку в CSS існує властивість padding. Крім того, можна задавати відступи для певного боку блоку за допомогою властивостей padding-top, padding-right, padding-bottom, padding-left. У нашому випадку потрібно скористатися свойствомpadding-bottom. Стиль для класу expand-form буде дуже простим: . expand-form (padding-bottom: 4px) А до комірки таблиці з полем для логіна чіпляємо назва класу: Після таких перетворень поля розсунуться, і форма буде виглядати так, як показано на рис. 9 Рис. 9 Форма входу для клієнтів після усунення злипання полів Як бачите, навіть з такими простими формами виникають певні проблеми. Я, наприклад, спочатку витрачав дуже багато часу на пошуки рішення. Тільки з досвідом приходить чітке знання того, як треба діяти в певній ситуації. Навігація Навігація - Це найважливіший елемент будь-якого сайту. Вона повинна чітко показувати відвідувачу, де він знаходиться і куди може потрапити. Вкрай бажано е?? е і показувати, де він вже побував. Навігація по сайту складається з кількох елементів: самі різноманітні меню, внутрішні посилання, система пошуку, карта сайту та інші допоміжні елементи. У цьому розділі ми розглянемо, які бувають елементи навігації і як вони верстати. Меню Меню присутній практично на будь-якому сайті. Неможливо собі уявити корпоративний сайт без меню. Чітку класифікацію видів меню побудувати досить складно, але перед нами такої задачі не варто. Якщо коротко, то з одного боку меню бувають вертикальні і горизонтальні, а з іншого -- текстові, графічні та змішаного типу. Складно сказати, які види меню зустрічаються частіше, але ми коротко розглянемо загальні всі типи. Вертикальні Для Спочатку розглянемо вертикальні меню і почнемо з текстового. Текстове вертикальне меню зазвичай оформляють у вигляді списку. Приклад текстового вертикального меню показаний на рис. 10 Рис. 10 Текстове вертикальне меню на моєму сайті «Веб-анатомія» Зверніть увагу, що розділи, у яких є підрозділи, мають чорні кружечки, а кінцеві розділи мають білі кружечки. Таке відміну допомагає відвідувачам працювати з сайтом. Дуже швидко вони навчаються чітко визначати, чого чекати від розділу. Давайте з вами наведемо приблизно таке ж меню. Припустимо, у нас є чотири пункти меню: «Про компанію», «Продукція», «Послуги» і «Контакт». Відразу створюємо список: Про компанії Продукція Послуги Контакт Зазвичай на посилання в меню потрібно написати стилі, які відрізняються від стилів для звичайних посилань. Наприклад, посилання можуть відрізнятися кольором, шрифтом або не мати підкреслення. Треба б посилання в меню якось позначити. Для цього можна використовувати клас, але краще всього скористатися контекстним селектором. Ми називаємо як-небудь блок з меню (тобто ставимо блоку з меню ID), наприклад, menu, а потім пишемо стиль для всіх посилань, які знаходяться всередині блоки з id = "menu". HTML-код зміниться дуже незначно: Припустимо, нам треба, щоб посилання в меню були чорного кольору. Тоді напишемо ось такий стиль: # menu A (color: # 000) Ось так виглядає корисне використання контекстного селектора. У результаті скорочується код, тому що не треба для кожної ссилки додавати атрибут class = "menu". На елементи списку в меню задамо шрифт. Наприклад, Arial розміром 12 пікселів. Для цього теж відмінно підійде контекстний селектор: # menu LI (font: 12px Arial) Крім того, буває корисно злегка збільшити висоту рядка в меню: # menu LI (font: 12px/1.6 Arial) Нарешті, нам треба виділити розділи, у яких немає підрозділів. Для таких елементів списку треба задати висновок незакрашенних кружечків. До речі кажучи, гуртки, квадратики та інші символи, які позначають елемент списку, називають маркерами. Виділяти елементи списку можна за допомогою класу, назвемо його empty. Для завдання виду маркера в CSS є властивість list-style-type. Використовуємо селектор по класу empty і напишемо такий стиль: LI.empty (list-style-type: circle) Підсумковий HTML-код буде наступним: Про компанії Продукція Послуги Контакт А саме меню буде виглядати так, як показано на рис. 11 Рис. 11 Вертикальне текстове меню, реалізоване за допомогою ненумерованого списку Деякі види вертикальних текстових меню можна реалізувати тільки за допомогою таблиці. Наприклад, на мал. 12 показано меню, пункти якого мають задану ширину і розділяються пунктирною лінією. Поточний пункт виділений фоном, а посилання не мають підкреслення. Рис. 12 Вертикальне меню, реалізоване за допомогою таблиці Давайте з вами пройдемо нелегким шляхом, щоб створити таке саме меню. Шлях буде досить пізнавальний. Почнемо з того, що зробимо таблицю з чотирьох рядків і одного стовпця. У комірки таблиці вставимо пункти меню. Вийде ось такий код: Про компанію Продукція Послуги Контакт Звичайно, меню поки що виглядає зовсім не так, як треба. Зараз це просто таблиця з посиланнями, які ніяк не відокремлені один від одного і навіть на меню не дуже схожі. Давайте потихеньку його змінювати. Можна почати з посилань. Треба, щоб вони не мали підкреслення, були чорного кольору і виводилися шрифтом Arial розміром 14 пікселів. Як і в минулому прикладі, ми будемо користуватися контекстним селектором, для чого назвемо таблицю menu. Тоді стиль на посилання буде таким # menu A (color: # 000; font: 14px Arial; text-decoration: none) Самое складне - зробити пунктирні розділювачі між осередками таблиці. Я для таких цілей завжди використовую фонове зображення. Зараз нам потрібний фоновий малюнок шириною 3 пікселі і висотою 1 піксель. Перший піксель буде чорного кольору, а два інших білого. Якщо повторювати такий маленький малюнок по осі Х, то якраз вийде пунктирна лінія. Думаю, ви легко собі уявити, як такий малюнок формує пунктиром. Припустимо, ми таке зображення зробили, назвали його bg1.gif і зберегли в каталог i. Тепер треба задати фон для елементів таблиці. Для адресації до цих осередкам будемо використовувати контекстний селектор. # menu TD (background: url (i/bg1.gif) repeat-x) Те є всі елементи таблиці сid = "menu" будуть мати фонове зображення. Фонове зображення буде повторюватися тільки по осі Х. Має сенс подивитися на проміжний результат. Він показано на рис. 13. Рис. 13 Проміжний результат створення вертикального меню Якщо порівняти проміжний результат з рис. 12, то стає ясно, що до нього ще далеко. По-перше, не вистачає пунктиру після останнього пункту. Це й зрозуміло, тому що осередків рівно стільки, скільки пунктів меню, а пунктирних ліній на одну більше. Проблема вирішується додаванням одне зайвої рядки з порожньою осередком в кінці таблиці. Крім того, немає вирівнювання по правому краю. Необхідно в стиль для елементів таблиці додати вирівнювання за допомогою властивості text-align. # menu TD (background: url (i/bg1.gif) repeat-x; text-align: right) Далі треба задати ширину меню і збільшити відступи всередині комірки, щоб створити необхідний простір. Дизайнер зробив меню шириною 148 пікселів. Ми поставимо ширину таблиці 140 пікселів і відступи 4 пікселям. У сумі вийде як раз 148 пікселів. HTML-код трохи перетвориться: Про компанію Продукція Послуги Контакт Залишилось зробити зовсім трохи, а саме виділити пункт поточного розділу сірим фоном. Для цього можна ввести окремий клас. Назвемо його current. Стиль для класу current буде таким: # menu TD.current (background: # DDD url (i/bg1.gif) repeat-x) У вас повинен виникнути запитання, навіщо дублювати фоновий малюнок і в стилі для класу current, якщо він вже прописаний для елементів таблиці меню? Відповідь: якщо цього не зробити, то фоновий колір закриє фонове зображення і пунктиру в тій осередку, який має клас current, просто не буде. Підсумковий код ось такий: # menu TD (background: url (i/bg1.gif) repeat-x; text-align: right) # menu TD.current (background: # DDD url (i/bg1.gif) repeat-x) # menu A (color: # 000; font: 14px Arial; text-decoration: none) . . . Про компанії Продукція Послуги Контакт Простіше всього реалізуються графічні вертикальні меню. Звичайно для них вистачає таблиці з одного стовпця з обнуленими відступами і відстанями між осередками. Наводити реальний приклад немає особливого сенсу. Горизонтальні Найчастіше всього використовуються графічні горизонтальні меню. Принципово є два їх різновиди: гумові і фіксовані. Гумові меню розтягуються при збільшенні вікна браузера, а фіксовані - ні. Фіксоване меню реалізуються дуже просто: створюється таблиця з одного ряду і необхідного кількості стовпців, в що містяться пункти меню. У таблиці обнуляються відступи і відстані між осередками і жорстко встановлюється ширина. Давайте краще з вами реалізуємо гумове меню, яке показано на рис. 14 Рис. 14 Графічне горизонтальне гумове меню на сайті www.rubi.ru Особливість меню в тому, що поточний пункт позначений галочкою зверху. Для початку нам треба заготовити п'ять картинок: чотири з пунктами меню та один з галочкою. Потім почнемо створювати таблицю. Зрозуміло, що треба зробити два ряди: в першому буде галочка, а в другому пункти меню. Кожен ряд буде складатися з чотирьох клітинок. Ширину кожного осередку треба задавати пропорційно щодо ширини таблиці. Раз у нас ширина таблиці 100% а осередків чотири, то ширина кожної клітинки буде 25%. Зображення в кожній клітинці треба центрувати. Код таблиці буде ось такий: Для центрування картинок усередині таблиці можна написати такий стиль: # menu TD (text-align: center) Меню виглядатиме практично правильно, як видно на рис. 15. Рис. 15 Вид гумового горизонтального меню з невеликою помилкою Помилка в тому, що галочка прилипає до пункту меню. На макеті відступ між ними складає рівно 11 пікселів, так що необхідно його реалізувати. Є два способи: за допомогою HTML і за допомогою CSS. Для початку спробуємо зробити відступ стандартними засобами HTML. Для цього, звичайно ж, потрібна розпірка, тобто невидимий 0.gif. Його треба вставити у клітинку таблиці відразу після галочки і поставити йому висоту 11 пикселей: Другий спосіб менш надійний, але трохи більш красивий. Зображення з галочкою можна взяти в окремий блок і задати для блоку нижній відступ: На рис. 16 показаний остаточний вигляд меню при різних розмірах вікна браузера. Рис. 16 Вид горизонтального гумового меню при різних розмірах вікна браузера Як бачите, меню поводиться абсолютно правильно, тобто як і очікувалося. Звичайно, існує ще дуже багато видів меню, що реалізуються зовсім унікальним чином. Але, як ви розумієте, всього різноманіття ми не охопимо, а присвячувати цілий розділ видів меню досить нудно. Коли наприкінці книги ми будемо розглядати процес верстки реальних сайтів, то ще зустрінемося з парою-трійкою меню, а поки на цьому розмова про меню закінчимо. дублююча навігація дублююча навігація зазвичай вживається на великих сайтах. Вона розташовується внизу сторінки і являє собою дублювання посилань на найважливіші розділи сайту. Типове дублюючі меню виглядає так, як показано на рис. 17 Рис. 17 Дублирующие меню Реалізується воно дуже просто. Єдина особливість в тому, що іноді посилання в дублюючому меню відрізняються від звичайних посилань. Реалізувати таку відмінність простіше усього за допомогою контекстного селектора. Наприклад, наступним чином: # double_menu A (color: # 999; font-size: 11px) . . . Про компанії | Партнери | Рішення | Продукти | Ціни | Контакти Карта сайту Карта сайта являє собою розгорнуте дерево розділів сайту. Зазвичай воно реалізується за допомогою вкладених ненумерованих списків. Про компанії Продукція Надувні матрьошки Електробалалайкі Контакти Звичайно, якщо у сайту всього п'ять розділів, то карта сайту і не потрібна зовсім, але в даному випадку немає сенсу приводити повну карту сайту з сотні розділів. Без стилів така карта виглядає досить тривіально, як видно на рис. 18 Рис. 18 Карта дуже маленького сайту без додаткового оформлення Давайте зробимо картку більш естетичною. Для початку треба задати шрифт для елементів UL: UL (font: 11px/1.6 Verdana) Для того, щоб розрізняти карту сайту і звичайні списки в тексті, треба присвоїти їй унікальний ідентифікатор, то є id. Наприклад, назвемо нашу карту sitemap. Задамо колір посилань у карті. Звичайно ж, будемо використовувати контекстний селектор: UL # sitemap A (color: # 666) Тепер можна зайнятися маркерами. За замовчуванням у списку першого рівня маркерами є зафарбовані кружечки, а у списку другого рівня - незакрашенние, що видно на рис. 18. Давайте для елементів списку першого рівня у карті сайту задамо в якості маркера квадратик, а для елементів списку другого рівня намалюємо свою картинку, наприклад, маленьку стрілку. Для завдання типу маркера є властивість list-style-type. Його й застосуємо: UL # sitemap (color: # 666; list-style-type: square) Для завдання зображення в якості маркера існує властивість list-style-image. Нам треба задати його тільки для списків, вкладених до списку з id = "sitemap", так що будемо використовувати контекстний селектор: UL # sitemap UL (list-style-image: url (i/marker.gif)) Після таких нехитрих стилів карта сайту, показана на рис. 19, стане значно привабливішою. Рис. 19 Карта сайту після написання декількох стилів На це обговорення навігаційних блоків закінчимо. У нас попереду ще багато цікавого і корисного, зокрема інформаційні блоки та текстові елементи. Текстові елементи Буває, що дизайн сайту досить непоганий, але текст оформлений зовсім недбало. Найчастіше, оформлення тексту просто немає, хоча в дизайні сайту він іноді грає не менш важливу роль, ніж графіка. Сумно, що із завидною постійністю оформлення тексту повинні брати на себе верстальники, тому що багато дизайнерів вважають це заняття малозначним і простим. Як ви розумієте, не все так просто, як здається багатьом дизайнерам. Виникає питання, що ж робити нещасним верстальника? По-перше, можна тактовно натякнути дизайнеру, що непогано б трохи попрацювати над оформленням тексту. Якщо дизайнер зарозуміло махає рукою, заглиблюючись в Adobe Photoshop 7, залишається два варіанти: залишити все як є або спробувати оформити текст самостійно. Я завжди вибираю другий варіант, але чудово розумію, що далеко не за будь-верстальник зможе добре оформити текст, тому вам радити не буду. Крім того, я не буду вчити дизайну, тому що навряд чи зможу, але деякі приклади оформлення тексту привести корисно, хоча б з точки зору їх реалізації з допомогою HTML-коду. Простий текст Простий текст оформляти найлегше. Максимум, що можна зробити - це вказати параметри шрифту і межстрочное відстань. Мій улюблений шрифт для простого тексту - це Verdana. І зазвичай я встановлюють розмір шрифту 12 пікселів. Так що в ті таблиці стилів, які пишу я, дуже часто можна зустріти ось такий рядок: P, TD, UL, LI (font: 12px Verdana) Часто злегка збільшене межстрочное відстань покращуємо сприйняття тексту, наповнює його повітрям. Стандартне відстань складає 120% від висоти шрифту, але можна збільшувати до 140-160%. Однак для таблиць збільшувати межстрочное відстань недоцільно, тому що ще частіше в моїх таблицях стилів зустрічаютьсяось такі оголошення: P, UL, LI (font: 12px/1.4 Verdana) TD (font: 12px Verdana) Будь-які інші способи оформлення простого тексту зазвичай абсолютно зайві і шкідливі. Заголовки Існує безліч способів оформити заголовки: залишити все як є, змінити шрифт і колір, використовувати розрядку, підкреслення, колір фону або ж повністю створювати заголовки за допомогою картинок (останній спосіб жахливо негнучкий і годиться хіба що для дуже маленьких і рідко змінних сайтів). Звичайно, треба бути трохи дизайнером щоб пристойно оформити заголовки. Але відмінний верстальник завжди трохи дизайнер. Отже, почнемо з шрифту. У мене є улюблений шрифт для заголовків - це Arial. Заголовки першого рівня повинні бути досить великими, так що звичайним стилем для заголовка є такий: H1 (font: 22px Arial) Зазвичай, в документах використовується не більше трьох рівнів заголовків. Так що стилі треба писати для їх усіх. Часто стилі відрізняються тільки розміром шрифту. Типова трійка стилів для заголовків ось така: H1 (font: 22px Arial) H2 (font: 18px Arial) H3 (font: bold 14px Arial) Зверніть увагу, що для заголовків шрифт напівжирний задано, тому що інакше вони не дуже виділяються, що недобре. Іноді дуже непогано виглядає заголовок з підкресленням. Підкреслення представляємо собою рамку, яка задається для нижньої частини блоку. Ось так: H1 (font: 22px Arial; border-bottom: 1px solid # 000) Як виглядає заголовок з підкресленням, показано на рис. 20 Рис. 20 Заголовок з підкресленням Бувають випадки, коли треба задати фон для заголовка. Але тут виникає одна складність, якщо задати фон для всього блоку заголовка, наприклад, ось так: H1 (font: 22px Arial; border-bottom: 1px solid # 000; background: # DDD) то весь блок і забарвиться, включаючи порожній простір праворуч, як показано на рис. 21 Рис. 21 Фарбування всього блоку заголовка Справа в тому, що існує два типи блоків: рядкові і структурні. Структурні блоки утворюють елементи , , і т.д. Рядкові блоки утворюються елементи , , і т.п. Рядкові блоки завжди знаходяться всередині структурних блоків. Головна відмінність в тому, що структурні блоки мають на початку і в кінці переклади рядків і по ширині займають все надане їм простір. Ширина рядкових блоків суворо обмежена змістом блоку. Наприклад, у блоці важливо є п'ять букв, які і будуть визначати ширину блоку. Повернемося до нашого фону. Якщо потрібно, щоб фон фарбували весь структурний блок, то все в порядку. Але бувають випадки, коли треба, щоб фон був тільки під буквами. Цього можна досягти, якщо в структурний блок вбудувати рядковий блок. У HTML є спеціальний рядковий блок , який створений саме для таких цілей. HTML-код буде таким: Корисні поради Стилі для заголовка будуть звичайними, але крім них треба задати фон для елементу, який знаходиться всередині елемента . Як ви розумієте, для цього будемо використовувати контекстний селектор. В результаті вийде два оголошення стилів: H1 (font: 22px Arial; border-bottom: 1px solid # 000) H1 SPAN (background: # DDD) А заголовок буде виглядати так, як показано на рис. 22. Рис. 22 Оформлення заголовка за допомогою фону для строчи         Реферат Банк   Рефераты   Бесплатные рефераты                     Рефераты Банк рефератов Скачать рефераты Всё для студентов         Все права защищены. Reff.net.ua - українські реферати !