web-design-book-

Мал. 34

Три колонки з інформацією

}

#container #main p {

font-family: Arial, Helvetica, sans-serif; font-size: 10pt;

}

#container #right h3 { font-size: 14pt; color: #F00;

}

#container #right p { font-size: 9pt; font-style: italic;

}

Результат можна подивитися на мал. 34

У кінці сайту варто поставити копірайт за допомогою блоку <div id=»copyright»>. Задаємо йому стилі для ширини та вирівнювання.

<div id=»copyright»><a href=»http://dezaici. com.ua»>Dezaici © 2013</a></div>

У файлі style.css

#copyright { position: relative; width: 1024px; margin:0px auto;

clear: both; text-align:center;

}

Прибираємо сіре обведення, яку ми поставити для блоків на початку файлу style.css. Для цього ставимо ширину обведення – 0px.

div {

border: 0px solid gray;

}

Результат можна побачити на мал. 35. Якщо у вас відрізняється зображення, чи блоки не стали у потрібні позиції – перевірте наявність clear:both у блоках, що не обтікаються. Також ситуацію можу врятувати clear:right для правої колонки. Іншою проблемою може стати збільшення ширини якоїсь колонки, тоді вона буде виштовхувати крайній блок.

При верстці блоками складно налаштовувати висоту колонок. Поки фон білий – цієї проблеми не помітно, але варто нам зафарбувати фон – стає видно, що вона не розтягується до кінця сторінки. Щоб задати блоку висоту 100%, потрібно прописати цю висоту для усіх елементів, куди вкладений <DIV>, включно з html та body. Проте навіть тоді блок

Мал. 35

Фінальний фаріант дизайну

зображення за допомогою мінусових значень margin-left:-

150px; margin-top:-150px

<img src=»istoria_mac.png» style=»position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px»>

Щоб зафіксувати об’єкт на сторінці можна застосовувати фіксоване позиціонування блоків. Наприклад сайт на мал. ??? має зафіксоване меню праворуч, що не залежить від прокрутки. До блоку застосовані стилі:

#menu { position: fixed; height: 259px; width: 213px; left: 1050px; top: 252px;

}

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

Завдання:

Зверстати першу сторінку нового сайту. Створити усі сторінки сайту, використовуючи як шаблон першу сторінку.

Створити підпис на картинці, використовуючи абсолютне позиціонування.

Запитання для самоперевірки

1)Які недоліки блочної верстки?

2)Що таке абсолютне позиціонування?

3)Як зафіксувати блок на місці, щоб він не залежав від контенту?

4)Навіщо розділяють дизайн і контент?

5)Що таке ідентифікатор?

9Декор

сайту

Помилки при оформленні сайту

Фавікон

Банер

Google Fonts

Випадаюче меню

У вебдизайні є багато можливостей для декору. Дизайнери початківці намагаються використати максимально все те, що вони знають і цим можуть перетворити сайт на хаос з кольорів, стилів та зовсім непотрібних елементів декору. За словами видатного німецького дизайнера Дітера Рамса (Dieter Rams): хороший дизайн – це якомога менше дизайну.

Для того, щоб самостійно оцінювати, що зайве у дизайні, а чого не вистачає, чи хороший він, чи неякісний, – необхідний час та практика. Щоб убезпечити вас від типових помилок, ми свідомо не пишемо про деякі декоративні можливості HTML та CSS.

Найчастіші помилки, що роблять початківці у вебдизайні:

1)Яскраво зелені та сині кольори у сполучені з іншими яскравими кольорами.

2)Створення окремої сторінки з посиланням «Вхід на сайт», після натиснення на яку ми опиняємося на сайті.

3)Використання фонової музики.

4)Використання стандартних фільтрів Photoshop, наприклад створення об’ємного тексту в шапці.

5)Мигаючий та бігаючий по сторінці текст.

6)Використання великої кількості кольорів.

7)Використання дрібних зображень.

8)Використання фотографій як фону вебсторінки

написи. На палітрі «Анімація» додаємо п’ять нових кадрів. Для цього клацаємо на кнопці «Додати новий кадр» у правому нижньому куту палітри. Переходячи між кадрами ми приховуємо ті шари, які б ми не хотіли бачити на ньому (для цього на палітрі «Шари» вимикаємо знак ока напроти написів). Тобто, на першому кадрі видно тільки «Знижка», на другому додається «на всі товари», на третьому – «5%», а четвертий і п’ятий вимикаємо «5%» і знову вмикаємо. Щоб перевірити банер потрібно увімкнути кнопку «Play» (Програти) внизу палітри «Анімація». Якщо банер мигає зашвидко – на кожному кадрі можна виставити час показу його у секундах.

Для того, щоб зберегти файл – заходимо у «File» (Файл) – Save for web (Зберегти для вебпристроїв), у вікні (див. мал. ???) обираємо формат GIF 128 Dithered і натискаємо «Save» (Зберегти). GIF – це єдиний растровий формат,

Мал. 41

Онлайн сервіс для створення фавіконів favicon.cc

Мал. 42

Сторінка Google Fonts

що зберігає анімацію. Називаємо файл baner.gif і зберігаємо у теку з нашим сайтом. Вставляємо у сайт банер, і робимо з нього посилання на сторінку akcia.html

<h2>Реклама</h2>

<a href=»akcia.html»><img src=»baner.gif» alt=»реклама»

/></a>

Використання сторонніх шрифтів

Як зазначалося у розділі 4 цієї книги – використання гарнітур різних шрифтів обмежене у веб-дизайні, оскільки на комп’ютері користувача їх може не виявитися. Тривалий час веб-дизайн використовував лише стандартні гарнітури – з засічками, без засічок

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

Сервіс знаходиться за посиланням http://www. google.com/webfonts. У лівій конці по середині потрібно перейти з латиниці (Latin) на кирилицю (Cyrillic). На сторінці з’являться шрифти, що підтримують кирилицю. Знайшовши потрібний шрифт потрібно знайти кнопку Quick use (Швидке використання), що знаходиться біля синьої кнопки Add to collection. Далі потрібно слідувати покроковій інструкції – на другому кроці виставити галочку біля кирилиці, на третьому – скопіювати рядок у вікні Add this code to your website і вставити його на сторінку у елемент <HEAD>.

Мал. 43

Порівняння стандартних та вбудованих за допомогою Google Fonts шрифтів

<link href=’http://fonts.googleapis.com/css?fa mily=Lobster&subset=latin,cyrillic-ext’ rel=’stylesheet’ type=’text/css’>

<link href=’http://fonts.googleapis.com/css?fa mily=Arimo&subset=latin,cyrillic-ext’ rel=’stylesheet’ type=’text/css’>

І останнє – прописати стиль CSS для потрібного елементу.

h2 { font-family: ‘Lobster’, cursive; } p { font-family: ‘Arimo’, sans-serif; }

Не варто використовувати більше двох шрифтів, оскільки вони збільшують час завантаження сайту.

Випадаюче меню

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

У новому документі з обов’язковим зазначенням версії HTML у елемент <body> записуємо складним списком пункти меню. Для цього вкладаємо одні списки <UL> в інші.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0

Transitional//EN» «http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»> <body>

<ul class=»menu»>

<li><a href=»fail.html»>Головна</a> </li>

<li> <a href=»fail.html»>Меню 1</a>

<ul>

<li> <a href=»fail.html»>Підменю 1</a> </li> <li> <a href=»fail.html»>Підменю 2</a> </li> <li> <a href=»fail.html»>Підменю 3</a> </li>

</ul>

</li>

<li> <a href=»fail.html»>Меню 2</a> <ul> <li> <a href=»fail.html»>Підменю4</a> </li> <li> <a href=»fail.html»>Підменю 5</a> </li> <li> <a href=»fail.html»>Підменю 6</a> </li> <li> <a href=»fail.html»>Підменю7</a> </li> <li> <a href=»fail.html»>Підменю 8</a> </li>

</ul>

</li>

</ul>

</body>

Для того, щоб меню відображалося горизонтально, використаємо стиль display: inline. Щоб приховані елементи не відображалися – ставимо для <UL>, що знаходяться в <LI> стиль display: none, а для <LI>, над яким наведений курсор – display: block (показувати блоком). Увесь список стилів, що потрібні для випадаючого меню, наведений нижче:

ul.menu { display: inline; margin: 0px; padding: 0px;

}

ul.menu li { float: left; list-style: none;

}

ul.menu li a {

Мал. 44

Етапи створення випадаючого меню

display: block; padding: 8px 20px 10px; text-decoration: none;

}

ul.menu li ul { display: none; padding-left: 10px;

}

ul.menu li:hover ul { display: block; position: absolute;

}

ul.menu li:hover ul li { float: none;

}

ul.menu li:hover ul li a { padding: 6px 0 8px;

}

Тепер можна додати дизайну для цього меню. Додамо різного кольору фон для li та li:hover і відформатуємо гіперпосилання.

ul.menu li { background-color:red; width:150px;

}

ul.menu li:hover { background-color:black;

}

ul.menu li a { color:white;

font-family:Arial, Helvetica, sans-serif; text-align:center;

}

Мал. 45

Випадаюче меню на сайті sneu.com.ua