Використання таблиць в дизайні
Створення різноколірних таблиць
Деякі браузери дозволяють відображати кольори. Є декілька способів розфарбувати таблицю, в основному вони залежать від використовуваного браузеру.
Кольорові межі в Netscape Navigator. Ви не лише можете оточити таблицю красивою рамкою, але ще і задати для неї колір, відмінний від кольорів тексту і фону. Створіть простий сірий GIF(чи будь-який GIF, який ви хотіли б мати в якості фону) і визначите його в тегу <ВODY> як фон сторінки. Потім задайте колір фону сторінки. В результаті ваш тег <ВОDY> виглядатиме приблизно так:
<BODY ВАСКGROUND="image.gif" ВGCOLOR="#FF0000">
Ви створили подвійний фон — GIF і заданий колір. В результаті фоновий колір буде видний на усіх межах таблиць і горизонтальних лініях(<НR>). Незалежно від того, являється ваш фоновий GIF сірим або ні, кольорові лінії і межі таблиць помітно виділятимуться. Якщо фоновий GIF влаштований не занадто складно, час завантаження сторінки зросте лише трохи.
ФРЕЙМИ
У якомусь сенсі фрейм — це саме те, що означає це слово: рамка навколо картинки, віконце або сторінка. Вводячи тег <FRAME>, дизайнер НТМL— сторінки розділяє екран браузеру на частини. В результаті чоловік, що переглядає сторінку, може вивчати тільки одну її частину, незалежно від іншого вмісту. Фактично браузер, що розпізнає фрейми, завантажує різні сторінки в різні секції, або фрейми, екрану. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксований у верхній частині екрану, тоді як іншу частину сторінки користувач перегортує звичайним способом. Можна розташувати збоку кнопки навігація, яка не переміщається, коли читач клацає по них мишкою, так що змінюється тільки частина екрану, а сама смужка навігації залишається нерухомою.
Для створення фрейма використовується тег <frameset>, який замінює тег <body> у документі і застосовується для розділення екрану на області. Усередині цього тега знаходяться теги <frame>, які вказують на HTML- документ, призначений для завантаження в область.
У разі використання фреймів в першому рядку коду пишеться наступний тип документу
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Даний <!DOCTYPE> вказує браузеру, що він має справу з фреймами, цей рядок коду є обов'язковим. Контейнер <head> містить типову інформацію на зразок кодування сторінки і заголовка документу. Ось тільки врахуйте, що заголовок залишається незмінним, поки HTML- файли відкриваються усередині фреймів.
Як працюють фрейми
На перший погляд, фрейми — це щось складне, але їх легше зрозуміти, якщо провести аналогію з елементами таблиці. Розташування фреймів на екрані і комірок в таблиці задається майже однаково: теги і атрибути працюють так само, як їх табличні «родичі». Проте, хоча аналогія між одиничним фреймом на сторінці і елементом таблиці вірна, треба пам'ятати, що є і відмінності. Вміст комірки заданий в коде HTML— сторінки з таблицею. Текст або графіка, складові вміст таблиці, фактично вводяться на тій же сторінці HTML, що і тег або атрибут, що описують таблицю. Навпаки, екран з фреймами описується в НТМL— сторінці, в контейнері FRAMESET. Вміст же фрейма — це окрема HTML— сторінка, яка може знаходитися де завгодно : в іншому каталозі, на локальному сервері або на видаленому вузлі десь в мережі.
Фреймова структура визначає тільки спосіб організації екрану з фреймами і вказує, де знаходиться початковий вміст кожного фрейма. Для усіх фреймів задаються URL, що описують місцезнаходження їх даних. Як правило, на сторінці з фреймовою структурою вмісту фреймів немає. Така сторінка зазвичай невелика — вона описує тільки кадрову структуру екрану. Коли документ завантажується у фрейм, ви можете клацати мишкою на посиланні в цьому документі, щоб побачити пов'язані документи в інших кадрах, заданих у фреймовій структурі .
Створення простої сторінки з фреймами
Побудуємо сторінку з двома фреймами. Задамо ліворуч фрейм змісту із заголовками статей, а справа помістимо сторінку з самими статтями. Зробимо так, що коли користувач клацає мишкою на посиланні в тій частині екрану, де знаходиться зміст, сама стаття з'являється в правому фреймі. Це основний, найбільш поширений спосіб використання фреймів.
Завдання фреймової структури
Спершу ми повинні уявити собі загальний вигляд сторінки - де розташувати фрейми і якого вони будуть розміру. Потім можна подумати про їх зміст. Нижче наводиться код простої фреймової структури з використанням тега <FRAMESET>. Зверніть увагу: сторінка з фреймовою структурою не містить тега <ВОDY>.
<HTML>
<HEAD>
<TITLE>Приклад фреймів</TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="menu.html">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</HTML>
Ось і увесь код, необхідний для того, щоб задати фреймову структуру. В результаті ми отримали екран, розділений на два вікна. Ліве вікно займає 25% екрану і містить сторінку з назвою menu.html. Вікно справа займе 75% екрану і містить файл main.html. Поки у нас їх немає, так що ви побачите сторінку з двома порожніми фреймами. Перш ніж вона з'явиться, нам доведеться пару разів клацнути мишкою у відповідь на повідомлення про помилки, тому що браузер намагатиметься знайти неіснуючі сторінки. Зверніть увагу, що праву сторінку ми назвали «main»(<головна>) за допомогою рядка:
<FRAME SRC="main.html" NAMЕ="main">
Це означає, що фрейм під ім'ям main міститиме сторінку main.html. Помітимо, що оскільки ми не збираємося показувати в лівому фреймі ніяких сторінок, окрім menu.html, нам не треба його називати.