Опорний_кнспект
.pdf
Форматирование таблиц
Теперь эту простенькую таблицу можно немного приукрасить. Ниже перечислены отдельные стилевые атрибуты, предусмотренные для форматирования внешнего вида HTML таблиц.
align – Выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char. Применяется ко всем тегам.
bgcolor – Фоновый цвет. Применяется ко всем тегам.
border – Толщина разделительной линии (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегом <table>.
cellpadding – Расстояние между разделительной линий и содержимым ячейки (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
cellspacing – Расстояние между ячейками (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
colspan – Количество столбцов, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rowspan – Количество строк, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rules – Применяется для отображения линеек между ячейками; возможные значения: rows, cols и all. Применяется с тегом <table>.
valign – Выравнивание содержимого ячейки по вертикали; возможные значения: top, bottom и baseline. По умолчанию значение center. Применяется с тегами <td>, <th> и
<tr>.
width – Ширина таблицы или ячейки (значение указывается в пикселях или в процентном выражении относительно ширины страницы). Применяется со всеми тегами.
HTML-документи, які містять фрейми
Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.
Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощуе навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню вебсайту.
1. Фрейми, їхні теги та атрибути
Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися вебсторінки, на які вказують його пункти.
Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTMLдокументів. В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .
Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу с т Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.
Елемент FRAMESET
Визначення атрибутів rows = multi-length-list
Цей атрибут визначає розташування горизонтальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один рядок.
cols = multi-length-list
Цей атрибут визначає розташування вертикальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один стовпець.
Елемент FRAMESET визначає макет основного вікна користувача у вигляді прямокутних просторів.
Установка атрибуту rows визначає число горизонтальних відрізань простору в наборі фреймів. Установка атрибуту cols визначає число вертикальних відрізань. Для створення сітки можна встановити обидва атрибути одночасно.
Якщо атрибут rows не встановлений, кожен стовпець займає всю довжину сторінки. Якщо атрибут cols не встановлений, кожен рядок займає всю ширину сторінки. Якщо не встановлений жоден з цих атрибутів, фрейм займає всю сторінку.
Фрейми створюються в напрямі зліва направо для стовпців і зверху вниз для рядків. Якщо вказано обидва атрибути, розділи вікон створюються зліва направо у верхньому рядку, зліва направо в другому рядку і так далі.
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів?a другий займає те місце, що залишилося.
Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.
Розглянемо деякі варіанти поділу простору на частини:
1.Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).
<FRAMESET rows= «50%, 50%»>
.продовження визначення.
</FRAMESET>
2.Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.
<FRAMESET cols= «1*, 250,3*»>
.продовження визначення.
</FRAMESET>
3.У наступному прикладі створюється сітка 2x3.
<FRAMESET rows= «30%, 70%» cols= «33%, 34%, 33%»>
.продовження визначення.
</FRAMESET>
4.Для наступного прикладу припустимо, що вікно браузера має висоту строгі 1000 пікселів. Перший розділ отримує 30% загальної висоти (300 пікселів). Другою має висоту рівно 400 пікселів. Залишається 300 пікселів на два інші фрейма. Для четвертого фрейма задана висота «2*», так що він повинен бути удвічі вище третього, для якого задані висота «*» (еквівалентно 1*). Таким чином, третій фрейм матиме висоту 100 пікселів, а четвертий – 200.
<FRAMESET rows= «30%, 400,*, 2*»>
.продолжение визначення.
</FRAMESET>
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:
•SRC — задає ім'я файлу, що відображатиметься у фреймі;
•NAME — задає ім'я фрейму;
•MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;
•MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.
•SCROLLING — визначає наявність (значення yes ) або відсутність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);
•NORESIZE — забороняє користувачу змінювати розміри фрейму;
•BORDER — визначає ширину розділювальної смуги між фреймами в пікселах;
•BORDERCOLOR — визначає колір розділювальної смуги між фреймами;
Приведемо запис тега <FRAME> зі всіма параметрами:
<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO
MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>
На практиці в тегу <FRAME> рідко використовуються одночасно всі параметри.
Найбільш важливий параметр — SRC (скорочення від слова source). Досить часто в тегу <FRAME> задається єдиний параметр SRC.
Наприклад:
<FRAME SRC="url">.
Значення параметра SRC визначає URL-адрес документа, який буде завантажений спочатку в даний фрейм. Зазвичай така адреса записується як ім'я HTML-файла, розташованого в тому ж самому каталозі, що і основний документ. Тоді рядок визначення фрейма виглядатиме, наприклад, так:
<FRAME SRC="sample.htm">.
Зверніть увагу, що будь-який HTML-файл, заданий в описі фрейма, повинен бути повним HTML-документом, а не фрагментом. Це означає, що документ повинен мати теги HTML, HEAD, BODY і так далі.
Звичайно, як значення SRC може бути задана будь-яка допустима URL-адрес. Якщо, наприклад, фрейм використовується для відображення зображення у форматі GIF, яке розташовується на сервері видавництва книги, то слід записати:
<FRAME SRC="http://www.bhv.ru/example.gif">.
Звичайний текст, заголовки, графічні зображення і інші елементи не можуть прямо використовуватися в документі, який описує структуру фреймів. Весь зміст фреймів повинен бути визначене в окремих HTML-файлах, імена яких задаються параметром SRC тега <FRAME>.
Параметр NAME визначає ім'я фрейма, яке може використовуватися для посилання до даного фрейма. Зазвичай посилання задається з іншого фрейма, розташованого на тій же самій сторінці. Наприклад:
<FRAME SRC="sample.htm" NAME="Frame_1">.
Такий запис створює фрейм з ім'ям "Frame_1", на який може бути виконана посилання. Наприклад:
<A HREF="other.htm" TARGET="Frame_1">Натисніть тут для завантаження документа other.htm у фрейм з ім'ям Frame_1</A>.
Звернемо увагу на параметр TARGET, який посилається на ім‘я фрейма. Якщо для фрейма не задано ім'я, то буде створений фрейм без імені, і не буде можливості використовувати посилання на нього з іншого фрейма. Імена фреймів повинні починатися з алфавітно-цифрового символу.
Параметри MARGINWIDTH і MARGINHEIGHT дають можливість встановлювати ширину полів фрейма. Записується це таким чином:
MARGINWIDTH="value"
де "value" — абсолютне значення в пікселах. Наприклад:
<FRAME MARGINHEIGHT= "5" MARGINWIDTH= "7">.
Даний фрейм має поля зверху і знизу по 5 пікселів, а зліва і справа — по 7 пікселів. Не забудьте, що тут йде мова про поля, а не про рамки. Параметри MARGINWIDTH і MARGINHEIGHT визначають простір усередині фрейма, в межах якого не розташовуватиметься ніяка інформація. Мінімальне допустиме значення цих параметрів рівне 1.
Для фреймів автоматично створюватимуться і відображатимуться смуги прокрутки, якщо вміст фрейма не поміщається повністю у відведеному просторі. Іноді це порушує дизайн сторінки, тому було б зручно мати можливість управляти відображенням смуг прокрутки. Для цих цілей використовується параметр SCROLLING. Формат запису:
<FRAME SCROLLING="YES|NO|AUTO">.
Параметр SCROLLING може приймати три значення: YES, NO або AUTO. Значення AUTO діє так само, як і у разі відсутності параметра SCROLLING. Значення YES викликає поява смуг прокрутки незалежно від необхідності цього, а NO — забороняє їх появу.
Наприклад:
<FRAME SCROLLING=YES>.
Зазвичай користувач може змінювати розмір фреймів при прогляданні сторінки. Якщо встановити курсор миші на рамці фрейма, то курсор прийме форму, вказуючу на можливість зміни розмірів, і дозволить виконати переміщення рамки в потрібне місце. Це іноді порушує структуру красиво спроектованих фреймів. Для запобігання можливості зміни користувачем розміру фреймів слід скористатися параметром NORESIZE:
<FRAME NORESIZE>.
Цей параметр не вимагає ніяких значень. Природно, коли заданий параметр NORESIZE для одного з фреймів, то розмір будь-якого з суміжних фреймів також не може бути змінений. Іноді, залежно від розташування фреймів, використання параметра NORESIZE в одному з фреймів буде досить, щоб запобігти можливості зміни розмірів будь-якого з них на екрані
Атрибут frameborder = 1|0
Цей атрибут надає агентові користувача інформацію про межу фрейма. Можливі значення:
1: Агент користувача повинен зобразити роздільник цим фреймам і всіма прилеглими фреймами. Це значення використовується за умовчанням.
0: Агент користувача не повинен відображати роздільник. Звернете увагу, що роздільники можуть все одно відображатися, якщо вони задані в інших фреймах.
Тег <NOFRAMES>
Можливість роботи з фреймами не передбачалася ні в стандарті HTML 3.0, ні в HTML 3.2. Тут до останнього часу складалася достатньо типова ситуація, коли реально використовувані можливості активно застосовуються на багатьох WWWсторінках, проте не є частиною стандарту. Це означало, що браузери цілком законно могли ігнорувати фрейми. З появою стандарту HTML 4.0 ситуація змінилася — тепер підтримка фреймових структур закріплена стандартом. Відмітимо, що більшість сучасних браузерів розпізнавали фрейми і до появи HTML 4.0. Проте, необхідно надавати інформацію користувачам, що застосовують браузери без підтримки фреймів. Для таких браузерів можна передбачити альтернативну інформацію, яка записується між парою тегів <NOFRAMES> і </NOFRAMES>. Це виглядає таким чином:
<NOFRAMES>
весь HTML-документ
</NOFRAMES>
Все, що розміщене між тегами <NOFRAMES> і </NOFRAMES>, відображатиметься браузерами, що не мають можливостей підтримки фреймів. Браузери з підтримкою фреймів проігнорують всю інформацію між цими тегами.
Відмітимо, що в реальному житті розробники HTML-сторінок часто не використовують можливості тега <NOFRAMES> для створення сторінок без фреймових структур, а просто створюють дві версії своїх HTML-документів. Для такого варіанту на стартовій сторінці зазвичай пропонується вибір завантаження документа з фреймовою структурою або без неї. Далі залежно від вибору користувача завантажується тільки один варіант документа.
Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME> перед тегом <BODY> , а між <BODY> І < /BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після < /BODY> має йти </NOFRAME> .
Приклад 1
Створимо файл головної сторінки, на якій розташовано три попередньо створені документи (Рис. 1).
<HTML>
<TITLE>Навчальні заклади</TITLE>
<FRAMESET ROWS="60%, 40%">
<FRAMESET COLS="50%,50%"> <FRAME SRC="2.html"> <FRAME SRC="3.html"> </FRAMESET>
<FRAME SRC="l.html"> </FRAMESET> </HTML>
Рис.1.1 Приклад сторінки з фреймовою структурою Всі файли відображені у вікні браузера одночасно, а оскільки документи не
вмістилися у визначені для них області, то кадри мають смуги прокручування.
2.Використання посилань у фреймах
Уприкладі 1 не використані гіперпосилання — між фреймами немає взаємозв'язку. Проте це не завжди зручно: інформації може бути багато, а поділ сторінки на велику кількість фреймів призводить до розпорошування уваги відвідувача сайту. Тому розглянемо веб-сторінку з навігаційною панеллю, яка розміщена у лівій меншій частині екрана, при цьому необхідна інформація відображатиметься у більшій правій частині так, як це показано на рис .3.
Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я. Наприклад, <FRAME NAME="frame1">. Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET , значенням якого є ім'я відповідного фрейму. Наприклад:
<А HREF="2.html" TARGET="frame1">Документ 1</А>
Приклад 2
Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів.
1. Створимо HTML-документ, який розмітимо за допомогою фреймів.
<HTML>
<TITLE>Документи</TITLE> <FRAMESET COLS="25%,*"> <FRAME SRC="my_doc.html">
<FRAME NAME="framel"> </FRAMESET> </HTML>
2. Створимо HTML-документ, який міститиме навігаційну панель, і збережіть його у файлі np.html.
<HTML>
<TITLE>Мої документи</TITLE>
<BODY>
<H2><A HREF="1_name.html" TARGET="frame1">Шрифт</А></Н2> <H2><A HREF="2_name.html" TARGET="frame1">Заголовки</А></Н2> <H2><A HREF="Pr.html" TARGET="frame1">Абзаци</А></Н2>
</BODY>
</HTML>
3. Відкрийте |
файл |
index.html у вікні браузера. |
На рис. 2.16 пока |
||||
зано, |
який |
вигляд має |
поділене |
на фрейми |
вікно з навігацій- |
||
ною |
панеллю |
після |
першого |
завантаження |
веб-сторінки, |
поки |
|
користувач не вибрав гіперпосилання.
Рис.2 Приклад сторінки з навігаційною панеллю
У документі index.html у п'ятому рядку, в тегу <FRAME>, задано лише один атрибут — NAME, тому після першого завантаження веб-сторінки права частина буде порожньою. Щоб цього уникнути, використовують атрибут SRC для повідомлення адреси файлу, який повинен відкриватись у цьому фреймі під час першого завантаження сторінки. Зазвичай це файл веб-сторінки з графічними вставками та загальною інформацією про сайт.
Рис.3 Сторінка, на якій завантажена сторінка після переходу по посиланню.
Недоліки використання фреймів
Фрейми на веб-сторінках — це зручний спосіб структурування веб-сайту. Однак слід пам'ятати про те, що веб-сторінки з фреймами потребують завантаження кількох документів, і тому для їх відтворення браузеру необхідно більше часу, ніж для відтворення веб-сторінки без фреймів. Окрім цього, екран із кількома вебсторінками розпорошує увагу користувача. Іноді веб-документи, розміщені на одному екрані, мають різний стиль оформлення, що негативно впливає на загальне враження від такої сторінки.
3 Вкладені набори фреймів
Число рівнів вкладеності фреймів не обмежене. У наступному прикладі зовнішній елемент FRAMESET розділяє доступний простір на три рівні стовпці. Внутрішній елемент FRAMESET розділяє другу область на два рядки нерівної висоти.
<FRAMESET cols= «33%, 33%, 34%»>
.зміст першого фрейма.
<FRAMESET rows= «40%, 50%»>
.зміст другого фрейма, перший рядок.
.зміст другого фрейма, другий рядок.
</FRAMESET>
.зміст третього фрейма.
</FRAMESET>
У наступному прикладі документа HTML агент користувача повинен завантажувати кожен файл в окремий розділ. Вміст фрейма і його визначення не повинні знаходитися в одному документі:
<HTML>
<HEAD> <TITLE>Документ з фреймами</TITLE> </HEAD>
<FRAMESET cols= "33%, 33%, 33%"> <FRAMESET rows= "*, 200"> <FRAME src= "Fr_1.html">
<FRAME src= "smile3.jpg"> </FRAMESET>
<FRAME src= "Fr_1.html"> <FRAME src= "Fr_3.html"> </FRAMESET>
</HTML>