ний приклад того, як повинен виглядати зручний для читання сайт.
Веб-дизайн успадкував компактну верстку від газет і журналів, де кожна сторінка мала певну і вельми немаленьку ціну. І зараз в газетах намагаються на одну сторінку помістити якомога більше. По початку у веб-дизайні чинили так само.
Приклади перевантажених сайтів.
Але поступово дизайнери стали розуміти, що простір на веб-сайті не обмежена, а значить можна робити більше відступів. Більше відступів - очам більше місця для відпочинку. «Стіни тексту» і велика кількість многоколончатих текстових блоків подразнюють очі.
Стандартна верстка 90х - 3-6 колонок з невеликими відступами і чіткими розділовими лініями або фонами.
Сучасна верстка - 1-3 колонки з великими відступами і не завжди з очевидними поділами. Дуже часто поділ блоків реалізується за рахунок великих відступів і/або слабких кордонів і фонів.
Відступи між текстовими блоками повинні бути відповідні розмірам текстових блоків. Тобто так, щоб відстань між текстовими блоками не відривати їх один від одного за змістом.
Приклади не переобтяжених сайтов
Висота рядка повинна бути не надто великий, щоб не сплутати її з поділом абзацу і не дуже маленькою, щоб текст не перестав бути нечитабельним. Рекомендуються пропорції від 3? 2 до 5? 3. Наприклад, якщо розмір шрифту дорівнює 12px, то висоту рядка можна ставити 18-20 px.
Раніше, у пресі, абзаци відокремлювали червоними рядками. У пресі це допустимо, оскільки з паперу читати набагато легше, ніж з екрану. В електронних документах для розділення абзаців використовують відступи між самими абзацами. Відступи дають можливість легко відрізнити, де закінчується абзац, не тільки на початку рядка, але і в її кінці.
Відстань між абзацами слід ставити в діапазоні від висоти шрифту до висоти рядка. Відстань має чітко вказувати на поділ абзаців, але не повинно зовсім розірвати їх взаємозв'язок.
Відстань від заголовка і до початку текстового блоку має дорівнювати відстані між абзацами, а відстань від кінця текстового блоку до наступного заголовка має бути приблизно в два рази більше, ніж відстань від заголовка до початку текстового блоку. Це робиться для того, щоб позначити належність тексту до певного заголовку. Існуючі настройки за замовчуванням у всіх браузерах неприйнятні, оскільки вони мають на увазі рівні відстані від заголовка до іншого вмісту зверху і знизу.
Таблиці.
Основні властивості таблиць, які не допомагають а тільки заважають сприймати інформацію: вертикальне вирівнювання і жахливі рамки. По-перше вертикальне вирівнювання має бути відповідним вмісту, вміст звичайних осередків повинно мати вирівнювання по верху, вміст заголовних осередків - по центру. Причому, якщо в горизонтальних заголовних осередках допустимо центрированное горизонтальне вирівнювання, то у вертикальних заголовних осередках - немає.
Рамку таблиці можна створити двома способами:
використовувати властивість border і border-collapse: collapse для таблиці;
використовувати різний фон для таблиці і осередків таблиці, при цьому border-collapse: separate, а відстань між осередками задається за допомогою border-spacing.
Відступи від кордону осередку до її вмісту повинні бути не менше половини висоти рядка абзацу. А текст в заголовних осередках завжди повинен відрізнятися або жирністю, або розміром шрифту.
В ідеалі, кожна непарна рядок таблиці повинна відрізнятися фоном від парної рядка.
Не варто так само забувати і про заголовок самої таблиці.
Цитати.
Існує три види елементів, що відповідають за розміщення цитат на веб-сторінці:
lt; blockquote gt;- Блок цитати. Блочний елемент, як правило використовується для публікації великого обсягу цитованого тексту;
lt; cite gt;- Джерело цитати;
lt; q gt;- Коротка цитата.
В основному використовують тільки lt; blockquote gt; для виведення цілого блоку цитованого тексту. Джерело цієї великої або короткої рядкової ( lt; q gt;) цитати якщо і вказують, то тільки не в елементі lt; cite gt ;, а даремно. Елементи lt; q gt; і lt; cite gt; Не такі складні в розумінні і використанні, щоб їх не любити. Блок цитати традиційно відображається зі Втяжка, джерело цитати - курсивом, а елемент lt; q gt; поміщає текст в лапки, які насправді не лапки а знаки дюйма.
Коротка цитата і блок цитати виглядають звичайним текстом. Обидва варіанти цитати найдоречніше виглядали б написані ...
