Як верстають сайти

Опубліковано admin-ом 14 квітня 2009 в категорії Теорія Оновлено:

Ні, тут не буде покрокових інструкцій на кшалт "спочатку запустіть 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, але це тема для окремої статті).

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

 Версія для друку  Версія для друку

 (Votes: 24)
 



 Додавання коментаря:
 
Ім'я:
Пароль: (якщо зареєстрований)
Email: (обов'язково)
captcha

теги форматування
додати смайли