Теорія » Як верстають сайти


14 квітня 2009 від admin
Ні, тут не буде покрокових інструкцій на кшалт "спочатку запустіть dreamviewer". Для початку хочеться пояснити базові принципи створення любого сайту. Розмова піде про роботу тих, кого називають html-верстальниками. Незалежно від інструментів та редакторів, якими вони користуються, на сьогоднішній день існує всьго три варіанти створити сайт. Це робиться за допомогою фреймів, таблиць, або блоків, і саме ці варіанти ми спробуємо розглянути.

Варіант 1 - фрейми.

Спробуємо створити найпростіший шаблон за допомогою фреймів. По-перше, нам знадобиться своєрідний контейнер, що буде описувати фреймову структуру. Нехай він буде зберігатися у файлі frameset.html, ось його зміст:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
<title>файл frameset.html</title>
</head>
<frameset cols="90,*" frameborder="0">
<frame src="frame_main.html" name="menu">
<frame src="frame1.html" name="content">
</frameset>
</html>
Якщо уважно переглянемо вищенаведений код (рядки 9 та 10), то побачемо, що файл frameset.html буде завантажувати ще два файли - frame_main.html, що буде відповідати за навігацію та та frame1.html, що буде містити контент. Оскільки frame_main.html відповідає за навігацію, саме він містить лінки, по яким користувачеві буде завантажуватись необхідний контент (frame1.html або frame2.html, в залежності від того, який лінк натисне користувач). Ось приклад frame_main.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame_main.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<a href="frame1.html" target="content">frame1.html</a>
<a href="frame2.html" target="content">frame2.html</a>
</body>
</html>
Файти frame1.html та frame2.html відповідають за контент (тобто зміст, саме те за чим користувач завітав на сайт). Ось приклад frame1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<p align="center">зміст файлу frame1.html</p>
<p align="justify">
Тут, власне, має буде необхідний контент. 
Саме його побачить відвідувач, якщо натисне "frame1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "frame2.html"
</p></body>
</html>
І на додачу приклад frame2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл frame1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<p align="center">зміст файлу frame2.html</p>
<p align="justify">
А це зміст файлу frame2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "frame1.html"
</p>
</body>
</html>
Якщо бажаєте, можете подивитися, як виглядає цей приклад в окремому вікні браузера.

(відкриється в новому вікні)

Здавалося б все добре, приклад працює, чому б не використовувати фрейми? Років десять тому саме так і робилась досить значна частина сайтів, але сьогодні... Давайте спробуємо переглянути код наведених файлів ще раз. По-перше, зверніть увагу на досить велику кількість інформації, що дублюється (а саме теги html, head, title, meta, body в кожному файлі). По-друге, слід пам'ятати, що велика фреймова структура (кількість вкладених фреймів) створить навантаження на браузер. По-третє, зверніть увагу на назву (для цього відкрийте приклад в окремому вікні). Незалежно від того, на який лінк, frame1.html або frame2.html ви натиснете, назва не змінеться. Це дуже погано для оптимізації сайту під пошукові системи - адже без змін залишається не тільки назва, але й деякі інші важливі параметри (наприклад keywords та description).
Варіант 2 - таблиці.
Давайте спробуємо повторити наш приклад, але замість фреймів використаємо таблиці. При використанні таблиць навігація та контент знаходяться в одному файлі, а їх місце задається за допомогою рядків, колонок або вкладених таблиць. Ось приклад файлу table1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл table1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<table border="0"><tr valign="top">
<td width="90">
<a href="table1.html">table1.html</a>
<a href="table2.html">table2.html</a>
</td><td>
<p align="center">зміст файлу table1.html</p>
<p align="justify">
Тут, власне, має буде необхідний контент. 
Саме його побачить відвідувач, якщо натисне "table1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "table2.html"
</p></td>
</tr>
</table>
</body>
</html>
А це приклад файл table2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл table2.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<table border="0">
<tr valign="top">
<td width="90">
<a href="table1.html">table1.html</a>
<a href="table2.html">table2.html</a>
</td><td>
<p align="center">зміст файлу table2.html</p>
<p align="justify">
А це зміст файлу table2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "table1.html"
</p></td>
</tr>
</table>
</body>
</html>
І звичайно ж, подивимся, як виглядає оновлений приклад в окремому вікні браузера.

(відкриється в новому вікні)

Для користувача мало що змінилося - він побачить практично таку саму інформацію, як і в першому прикладі. А для нашого сайту? По-перше, зменшився код - 50 рядків в двох файлах з використанням таблиць замість 54 в чотирьох файлах з використанням фреймів (або 1 738 байт замість 2 235, якщо вимірювати в байтах). Іншими словами, цей варіант буде швидше завантажуватись і створить менше навантаження на сервер. А якщо ми уважно подивимось на приклад в окремому вікні і спробуєм натиснути лінк table1.html чи table2.html, то побачимо, що назва змінюється в залежності від того, на який лінк ви натиснете. Все працює, із SEO завдяки унікальним назвам (а також keywords та description) проблем не буде - чому б не користуватися таблицями? Досить велика кількість студій користується таблицями навіть сьогодні... Але давайте розглянемо ще один приклад.
Варіант 3 - блоки.
Для початку додамо ще один тип файлу - CSS. Він буде відповідати за розміщення та зовнішній вигляд блоків, до яких звертаються html-файли. Хай він буде називатися style.css, а ось його приклад:
.menu {
width: 90px;
float: left;
}
.content {
margin-left: 91px;
}
Далі так само, як і в прикладі з таблицями, нам знадобляться два файли - хай це будуть div1.html та div2.html. Приклад div1.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл div1.html</title>
<link rel="stylesheet" href="style.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<div class="menu">
<a href="div1.html">div1.html</a>
<a href="div2.html">div2.html</a>
</div>
<div class="content">
<p align="center">
зміст файлу div1.html
</p>
<p align="justify">
Тут, власне, має буде необхідний контент.
Саме його побачить відвідувач, якщо натисне "div1.html".
Також ви можете побачити контент другого файлу. 
Для цього просто натисніть "div2.html"
</p></div>
</body>
</html>
Аналогічний приклад div2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>файл div2.html</title>
<link rel="stylesheet" href="style.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ua">
</head>
<body>
<div class="menu">
<a href="div1.html">div1.html</a>
<a href="div2.html">div2.html</a>
</div>
<div class="content">
<p align="center">зміст файлу div2.html</p>
<p align="justify">
А це зміст файлу div2.html.
Ви можете знову повернутися до перегляду першого файлу.
Для цього просто натисніть "div1.html"
</p></div>
</body>
</html>
І аналогічний приклад в окремому вікні браузера.

(відкриється в новому вікні)

Для користувача, що переглядає приклад знову практично все лишилося таким самим - працюючі навігація та контент, такі самі унікальні назви, як і в другому прикладі. А як поставляться до наших змін сервер та браузер користувача? Можете бути впевнені, що подякують - хоча користувач бачить те ж саме, що і в попередніх прикладах, розмір html-коду зменшився (всього 44 рядки або 1 681 байт). Щоправда, доданий ще один файл... Але він завантажується лише 1(!) раз, і згодом береться з кешу браузера.

До того ж, варто звернути увагу ще на деякі ньюанси. На практиці розміри файлів значно більші, ніж у наведених прикладах, і при використанні таблиць дуже легко заплутатись серед десятків тегів <tr> та <td>, якими позначаються рядки та колонки. Також блоки надають фантастичні можливості для маніпуляції ними за допомогою скриптів. А ті можливості, що надають блоки для SEO - це просто казка (я про position:absolute, але це тема для окремої статті).

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