web-design-book-
.pdf
Мал. 25
Сайт teplica.ho.ua
Сайт teplica.ho.ua (мал.25) створений на базі таблиць. Трьохколоночна верстка, з лівого боку розмішена галерея, в центральній – основний текст, у правій – рекламні банери. Зелені смужки, що розділяють комірки створені за допомогою стилю style=»border-left: 2px solid #79B652; border-right: 2px solid #79B652», який прописаний у центральну. У правій комірці фоном йде фотографія помідора, яка відображається одни раз. Це реалізовано за допомогою стиля для цієї комірки - style=»background: white url(bg.jpg) right bottom no-repeat». По черзі перераховані значення для фону – колір, файл, положення справа, внизу, і те, що він не повторюється.
Якщо необхідно розбити інформацію в таблиці на більш крупніші частини – можна об’єднувти комірки між собою: атрибут colspan=»» – для
Мал. 26
Об’єднання комірок таблиці
сполучення колонок, rowspan=»» – для об’єднання рядків. У лапках зазначається цифра скільки колонок, чи рядків необхідно об’єднати. При сполученні комірок елемент <TD> вписується стільки, скільки комірок.
<style>
Td {border: 1px solid gray; width: 400px; text-align:center; padding:10px}
table {border-collapse:collapse} </style>
<body>
<table>
<tr style=»background-color:gray»>
<td colspan=»2»><b>Браузер</b></td> <td> <b>Підтримка W3C </b></td>
</tr>
<tr>
<td rowspan=»4»> Microsoft </td>
<td> Internet Explorer 6</td>
<td rowspan=»4» style=»background-color:red»>
Не підтримує </td>
</tr>
<tr>
<td> Internet Explorer 7</td>
</tr>
118 Верстка таблицями та фреймами |
Основи веб-дизайну 119 |
Мал. 27
Розглянемо структуру сайту, що побудований об’єднанням комірок.
<tr>
<td> Internet Explorer 8</td> </tr>
<tr>
<td> Internet Explorer 9</td> </tr>
<tr>
<td> Mozilla Projects</td> <td> Mozilla Firefox </td>
<td style=»backgroundcolor:Green»> Підтримує </td>
</tr>
</table>
</body>
Комбінацією використання таблиць та фреймів є елемент <iframe> – він створює діру у вашому сайті, через яку можна відображати інші сторінки. Цей елемент має ті самі атрибути, що й <frame>.
Щоб протестувати цей елемент – створюємо у папці з документами попередніх завдань інший файл index2.html, в якому створимо таблицю з двома комірками. У лівій пишемо кнопки, а у правій іфрейм з ім’ям prava.
<table>
<tr>
<td>
<H3>Меню</h3> <A href=»1.html»
target=»prava»><img style=»border:0px» src=»button0. gif» alt=»Головна»></a><br>
<A href=»2.html» target=»prava»><img style=»border:0px» src=»button1. gif» alt=»Галерея»></a><br>
<A href=»3.html» target=»prava»><img
Мал. 28
Вид сторінки з іфреймом і тієї ж сторінки з розтягнутим іфреймом
120 Верстка таблицями та фреймами |
Основи веб-дизайну 121 |
Мал. 29 |
style=»border:0px» src=»button2. |
Розглянемо структуру |
|
сайту, що побудований |
gif» alt=»Історія видання»></ |
об’єднанням комірок. |
|
|
a><br> |
|
<A href=»4.html» |
|
target=»prava»><img |
|
style=»border:0px» src=»button3. |
|
gif» alt=»Гостьова книга»></ |
|
a><br> |
|
<A href=»5.html» |
|
target=»prava»><img |
|
style=»border:0px» src=»button4. |
|
gif» alt=»Контакти»></a><br> |
|
</td> |
|
<td> |
|
<iframe src=»1.html» |
|
name=»prava»> </iframe> |
|
</td> |
|
</tr> |
|
</table> |
Через стилі записуємо ширину і висоту іфрейма у відсотках. Щоб він займав увесь простір – виставимо їх по 100%. Оскільки ширину і висоту фрейма все-рівно обмежує комірка, тому прописуємо цей
122 Верстка таблицямисамийстиль длятакоміфреймамики,і для всієї таблиці.
style=»width:100%; height: 100%»
Вигляд у такої сторінки схожий на аналогічну сторінку з фреймами, окрім того, що наш тепер вся навігація відбувається прямо у файлі з меню.
Іфрейми можна використовувати для фото галерей, коли фотографії мають однаковий розмір. На мал. 29 фанатський сайт namshooter.ho.ua, присвячений старій комп’ютерній іграшці NAM Навігація сайту зроблена у стилістиці самої гри і знаходиться під іфреймом з зафіксованим розміром. В ньому відкриваються сторінки, які спеціально змакетовані під цей розмір.
<center><table>
<tr><td><img src=»logo.jpg»></td></tr>
<tr><td><iframe src=»g1.html» name=»nam» width=»800px» height=»400px»></iframe></td></ tr>
<tr><td><img src=»bfront.jpg»></td></tr> <tr><td><a href=»g1.html» target=nam><img width=»200px» src=»b1.jpg»></a></td></tr>
<tr><td><a href=»g2.html» target=nam><img width=»200px» src=»b2.jpg»></a></td></tr>
<tr><td><a href=»g3.html» target=nam><img width=»200px» src=»b3.jpg»></a></td></tr>
<tr><td><a href=»g4.html» target=nam><img width=»200px» src=»b4.jpg»></a></td></tr>
<tr><td><a href=»g5.html» target=nam><img width=»200px» src=»b5.jpg»></a></td>
</tr><tr><td><a href=»g7.html» target=nam><img width=»200px» src=»b7.jpg»></a></td></tr> <tr><td><a href=»g6.html» target=nam><img width=»200px» src=»b6.jpg»></a></td></tr> </table></center>
Основи веб-дизайну 123
Завдання:
Розробити сайт на базі фреймів, використовуючи файли з попередніх завдань.
Створити дизайн сайту на базі табличної верстки. Створити усі сторінки сайту, використовуючи як шаблон першу сторінку.
Запитання для самоперевірки
1)Що таке фрейм у вебдизайні?
2)Як розбити сторінку на колонки у фреймах?
3)Які переваги фреймів?
4)Що таке фіксована і плаваюча верстка сайту?
5)Як сполучити комірки таблиці між собою?
8Верстка за допомогою DIV
Проблеми табличної верстки
Об'єкти DIV
Позиціонування DIV
Верстка за допомогою об'єктів
124 Верстка таблицями та фреймами |
Основи веб-дизайну 125 |
Макетування сторінок з допомогою таблиць ускладнюється тим, що в коді відбувається нагромадження елементів, комірок та рядків, у яких розібратися стає дуже складно. Це також збільшує розмір сайту, що небажано для сучасного інтернету, де все більше застосовується мобільне підключення. Щоб вирішити ці проблеми мову HTML починаючи з версії 4 ввели додатковий елемент <DIV>
– елемент, що створює незалежний від сторінки блок, який можна розміщувати на сторінці де завгодно.
Таблиці були створені для таблиць і їх використання у верстці – від безвихідного становища, у якому опинилися вебдизайнери перших сайтів. Таблиці дуже збільшують розмір коду. Для порівняння кількості необхідних тегів для макетування наприклад слова НОВИНИ
Таблиці
<table>
<tr>
<td>НОВИНИ</td>
</tr>
</table>
DIV
<div>текст</div>
Також верстка за допомогою блоків дозволяє повністю реалізувати ідею відокремлення контенту від дизайну. Тут зміна дизайну сайту відбувається виключно у файлі стилів, а не на кожній конкретній сторінці. Тобто, управляючи одним файлом css можна рухати блоки та колонки на всьому сайті.
Недоліком верстки за допомогою <DIV> є те, що він дуже чуттєвий до браузера і його версії. Сайт, який гарно виглядає на одному браузері може «розлізтися» на іншому, який по-своємому трактує налаштування <DIV>. При такій верстці обов’язково необхідно тестувати його на всіх
доступних веб дизайнеру браузерах. Іншою проблемою <DIV> є складне налаштування позиції об’єкта, якщо верстка відбувається вручну. Тому верстка за допомогою <DIV> може швидко відбуватися тільки у веб-редакторах, таких як Microsoft FrontPage чи Adobe Dreamweaver.
Мал. 30
Сайт, створений на базі блоків
Переваги табличної верстки:
•Таблиці не перекриваються один з одним при маленьких роздільних задатностях екрану.
•Легко робити кросбраузерний дизайн (дизайн, що однаково виглядає на різних браузерах).
•Набагато простіше блокової верстки.
Недоліки табличної верстки:
•Дуже багато зайвого коду.
126 Верстка таблицями та фреймами |
Основи веб-дизайну 127 |
•Далеко не кожен дизайн можна створити за допомогою таблиць.
Переваги блочної верстки
•Значно менше HTML-коду і, як наслідок, зменшення ваги сторінки.
•Блоки завантажуються швидше таблиць (особливо великих таблиць).
•Блоки – універсальний засіб для створення будь-якого дизайну.
Недоліки блочної верстки
•Набагато складніше табличної верстки.
•Великі проблеми з кросбраузерністю.
•Блоки починають наїжджати один на одного (або зсовуватися) при маленьких роздільних задатностях екрану.
Щоб розпочати роботу з <DIV> потрібно ознайомитися з елементом <!DOCTYPE>, що вказує браузеру, яку версію HTML ми використовуємо. Якщо цей атрибут не вказаний – браузер вважає, що використовується найнижча версія. Нам не потрібен був цей елемент до нашого знайомства з <DIV>, оскільки ми працювали з текстом, зображеннями, таблицями та гіперпосиланнями, що були в наявності у базовій мові HTML. При роботі з блоками, необхідно зазначити версію мови, інакше браузер не буде відображати його налаштувань. Сторінка повинна починатися з рядків:
<!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> створюємо новий об’єкт із заголовком. У блоковій верстці управління дизайном відбувається за допомогою ідентифікатора id=» «. Він відрізняється від уже знайомого нам атрибута class=» « тим, що використовується всього один раз для одного блоку. У стилях ідентифікатор записується з діезом на початку назви #zagolovok {color:red}
<div id=»zagolovok»> <h1>Заголовок сайту</h1>
</div>
Ублочній верстці розділяється дизайн і контент. Тобто з HTML сторінки видаляються усі стилі CSS і переносяться у окремий файл, наприклад style.css, який будуть використовувати усі сторінки сайту. Таким чином управляти дизайном сайту можна, змінюючи всьогонавсього один файл. Також це забезпечує унітарність оформлення сайту та однаковість його зовнішнього вигляду.
Ублокноті створюємо нову сторінку під назвою style.css і зберігаємо його у ту саму теку, де лежить наш документ із <DIV>.
Для цього заходимо «Файл”>“Зберегти як”. У вікні вибираємо теку, куди будемо зберігати документ. У полі «Формат файлу» обираємо «Всі формати», у полі «Ім’я» вписуємо ім’я файлу, ставимо крапку і дописуємо розширення css. А у HTML сторінці у елементі <HEAD> дописуємо рядок
<HEAD>
<link href=»style.css» rel=»stylesheet» type=»text/css» />
</head>
Щоб ми могли бачити позицію блоку на сторінці потрібно зазначити у стилях границі. Для цього записуємо у файлі style.css.
128 Верстка таблицями та фреймами |
Основи веб-дизайну 129 |
Div {border: 1px solid gray}
Зберігаємо зміни і оновлюємо веб сторінку. На сторінці повинно відображатися заголовок і сіра рамка навколо нього. Оскільки заголовок займає всю ширину рядка, відповідно і блок буде розтягнутий на всю ширину браузера. Якщо цього не відбулося, потрібно перевірити наявність файлу style.css у теці з файлом html, або правильність запису елемента <LINK>, що приєднує до документа файл style.css.
Тепер варто задати блоку з заголовком ширину та позицію. Щоб від форматувати блок ми маємо записати у файлі style.css стиль
#zagolovok { position: relative; width: 1024px;
}
Існує три види позиціонування блоку. position: relative
– означає, що блок залежить від сусідніх об’єктів, тобто він вставляється у сторінку, як і інші об’єкти HTML. Інші види позицонування ми розглянемо далі.
Тепер блок звузився до ширини 1024px. Наступним кроком ми маємо вирівняти блок по середині сторінки. Елемент <CENTER>, який ми застосовували для вирівнювання по середині об’єктів, для блоків не діє. Щоб вирівняти <DIV> потрібно застосувати стиль відступів margin, якому задати зліва та справа значення auto, що поставить його по середині. Для скорочення можна використати такий вид запису:
margin: 0px auto 0px auto
У такому записі перше значення – це відступ згори, друге – праворуч, трете – знизу і останнє – ліворуч. Тобто запис відступів
здійснюється за годинниковою стрілкою, починаючи згори. Якщо значення згори-знизу, праворуч-ліворуч – однакові, можна ще скоротити запис до такого:
margin: 0px auto
Додаємо до стилю #zagolovok рядок з вирівнюванням margin: 0px auto. Блок повинен вирівнятися посередині. Далі створюємо новий блок для горизонтального меню. Для цього додаємо новий <DIV>
<div id=»menu»> </div>
А у файлі style.css записуємо аналогічні стилі для нового блоку. Щоб блоки не обтікали один-одного потрібно у обидва стиля дописати рядок clear: both; що не дозволяє елементам стояти праворуч чи ліворуч від блоку.
#menu {
position: relative; width: 1024px; margin:0px auto; clear: both;
}
У блок <div id=»menu»> додаємо посилання у вигляді списку.
<div id=»menu»>
<ul>
<li><a href=»index.html»> Головна </a> <li><a href=»poduct.html»> Продукція </a> <li><a href=»gallery.html»> Галерея </a> <li><a href=»contact.html»> Контакти </a>
</ul>
</div>
130 Верстка таблицями та фреймами |
Основи веб-дизайну 131 |
Мал. 31
Інтерактивне горизонтальне меню
Список виведеться у стандартному вигляді з круглими маркерами біля синіх посилань. Щоб форматувати пункти меню у блоковій верстці потрібно застосовувати композитний запис стилів, тобто вказувати у якому блоці буде використовуватися той чи інший стиль. Запис #menu ul li буде означати, що цей стиль застосовується лише для елементів <LI>, що знаходяться в <UL>, що знаходиться у блоці #menu. Усі інші <LI> цей стиль зачіпати не буде. Щоб поставити пункти меню горизонтально, потрібно застосувати стиль display: inline, що виведе список не один під одним, а в одну лінію. Також застосуємо стилі для кольору фону, внутрішній відступ (згори-знизу – 5px та ліворучправоруч – 10px) і білої рамки.
#menu ul li { display: inline;
background-color: red;
padding: 5px 10px; border: 1px solid white;
}
Щоб налаштувати зовнішній вид меню, потрібно додати стиль для <UL>, який здвине його ліворуч на 40 пікселів. Цей пробіл ліворуч з’являється, оскільки у списку є маркери, які зараз невидимі.
#menu ul { margin-left: -40px;
}
Для дизайну гіперпосилань використаємо стиль для налаштування кольору, гарнітури та приберемо підкреслення.
#menu ul li a { color: white;
font-family:Arial, Helvetica, sans-serif; text-decoration: none;
}
Для створення інтерактивного меню потрібно скопіювати стиль для <LI>, вставити його, дописати слово :hover до li і змінити колір фону. Якщо все зроблено правильно, пункти меню, при наведені на них курсору мишки, будуть світитися сірим кольором.
#menu ul li:hover { display: inline; background-color: gray; border: 1px solid white; padding: 5px 10px;
}
Продовжимо працювати над дизайном сайту. Створюємо новий блок для зображення. Назвемо його slider і застосуємо до нього
132 Верстка таблицями та фреймами |
Основи веб-дизайну 133 |
стилі, що аналогічні попереднім блокам. У графічному редакторі підготуємо зображення шириною 1024px і висотою 400px. Вставляємо його у блок за допомогою тега <IMG>.
УHTML сторінці.
<div id=»slider»>
<img src=»prague.jpg» width=»1024» height=»400» alt=»Прага» /> </div>
Уфайлі style.css.
#slider {
position: relative; width: 1024px; margin:0px auto; clear: both;
}
Щоб підписати картинку створюємо блок з ідентифікатором pidpys, у який ставимо заголовок, який вставляємо після картинки, але перед кінцевим тегом </div>. Щоб розмістити <DIV> над картинкою, застосуємо абсолютне позиціонування блоку – position:absolute. Таке позиціонування дозволяє блоку «не бачити» сусідні об’єкти. Позиція <DIV> визначається виключно тим блоком, у який він вставлений, тобто батьківським елементом (у нашому випадку це <div id=»slider»></div>). Для абсолютного позиціонування потрібно визначити початок відліку. Для цього у CSS існують стилі top (відлік згори), right (відлік від правого боку), bottom (відлік знизу) та left (відлік від лівого боку). Ми поставимо підпис праворуч і відступимо від гори на 250px.
#pidpys {
position: absolute;
font-family:Arial, Helvetica, sans-serif; color: gray;
Мал. 33
background-color: white; Зображення з підписом padding:10px 20px;
top:250px; right: 0px;
}
Оскільки при абсолютному позиціонуванні блоки не залежать один від одного, ми можемо накладати їх один на одного. Щоб перевірити цей ефект – копіюємо <div id=»pidpys»> і вставляємо його ще раз, змінивши ідентифікатор на id=»pidpys2».
<div id=»pidpys»><h1>Туристичне приладдя
</h1></div>
<div id=»pidpys2»><h1>Туристичне приладдя
</h1></div>
134 Верстка таблицями та фреймами |
Основи веб-дизайну 135 |
У файлі css копіюємо стилі для #pidpys і вставляємо їх ще раз, видаливши background-color: white і замінивши color: red, top:253px, right: 3px.
#pidpys2 {
position: absolute;
font-family:Arial, Helvetica, sans-serif; color: red;
padding:10px 20px; top:252px;
right: 2px;
}
Тепер можна налаштовувати колонки сайту. Створимо три колонки 255, 500, 255 пікселів відповідно. Для того, щоб вони були вирівняні по середині – їх потрібно помістити у контейнер – <div id=»container»>. Назвемо колонки left, main та right і
помістимо у них заголовки з підписом колонки.
<div id=»container»>
<div id=»left»><h2>Меню</h2></div> <div id=»main»><h2>Головна</h2></div> <div id=»right»><h2>Новини</h2></div>
</div>
Для <div id=»container»> застосуємо ті самі стилі, що і до попередніх блоків.
#container { position: relative; width: 1024px; margin:0px auto; clear: both;
}
А для колонок застосуємо обтікання float. Для left і main повинно бути float:left, а для right – float:right, оскільки це крайня колонка і вона повинна обтікати з правого боку.
#left { position:relative; width:255px; float:left;
}
#main { position:relative; width:500px; float:left;
}
#right { position:relative; width:255px; float:right;
}
Налаштуємо дизайн заголовків, здавши їм фон, колір тексту та відступи.
h2 {
color: white; background-color: red; padding: 5px;
}
Щоб наповнити колонки перенесемо у колонку left список з меню, яке ми вже використовували на сторінці, у колонку main поставимо маленьку фотографію і текст з тегами параграфа <P>, а у новини поставимо також абзац тексту.
<div id=»left»><h2>Меню</h2>
136 Верстка таблицями та фреймами |
Основи веб-дизайну 137 |