Тема 4 Використання таблиць, форм і фреймів Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 4. ВИКОРИСТАННЯ ТАБЛИЦЬ, ФОРМ І ФРЕЙМІВ
4.1. ТаблиціОсобливість використання таблиць полягає у тому, що вони є основним засобом форматування HTML-документів. Розміщення інформації у HTML-документі, виконане за допомогою інших засобів (тегів), має або набагато менші можливості, або не однаково відображається браузерами різних типів. Для побудови таблиці необхідно використати теги-контейнери: тег таблиці <table>, тег рядка <tr> та тег комірки даних <td> або тег комірки заголовка <th>. При цьому таблицю необхідно розмістити на тілі HTML-документа, будується вона рядками, причому кількість комірок у рядках повинна бути однакова. Таким чином, одній таблиці відповідає один тег <table> та стільки тегів <tr>,скільки рядків має таблиця. Якщо у таблиці немає об’єднання комірок, то сумарна кількість тегів <td> та <th> дорівнює добутку кількості рядків на кількість стовпчиків таблиці. Різниця між тегами <td> та <th> полягає у форматуванні та вирівнюванні розміщеного у них тексту. У тезі <td> текст відображається стандартним шрифтом із горизонтальним вирівнюванням “по лівому краю”. У тезі <th> текст відображається напівжирним шрифтом з горизонтальним вирівнюванням “по середині”. Для розміщення інформації (тексту або графіки ) у середині таблиці необхідно помістити її у тег комірки. Таблиця може мати заголовок, якому відповідає парний тег <caption>, він повинен бути розміщеним після тегу <table> до першого тегу <tr>. Наведемо приклад HTML-коду для визначення таблиці, яка складається із заголовку та трьох рядків, у кожному із яких має бути дві комірки: <table> <caption>Заголовок таблиці </caption> <tr><th>Рядок 1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr> <tr><td>Рядок 2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr> <tr><td>Рядок 3. Комірка 1</td><td> Рядок 3. Комірка 2</td></tr> </table> Для зручності ідентифікації комірок у них розміщено текст, що відповідає номеру рядка та номеру комірки у рядку. Відображення такої таблиці у вікні браузера показано на рис. 4.1. При відсутності параметра border у тегах, що визначають таблицю, її межі не відображаються. Розглянемо призначення найбільш використовуваних параметрів тегів <table>, <caption>, <tr>, <td> та <th>. Тег <caption> найчастіше використовується тільки з параметрами align та valign, що визначають відповідно горизонтальне та вертикальне вирівнювання заголовка таблиці. Можливі значення параметра align тегу <caption>: - right - заголовок вирівнюється по правому краю таблиці; - center - заголовок вирівнюється по центру таблиці; - left - заголовок вирівнюється по лівому краю таблиці. Параметр valign дозволяє розміщувати заголовок над таблицею (значення top) або під (значення bottom) таблицею. При відсутності параметрів align та valign вирівняний по центру заголовок розміщується над таблицею (див. рис. 4.1). Параметри тегу <table> та їх призначення наведені у табл. 4.1. Таблиця 4.1 Параметри тегу <table>
Розглянемо типові приклади використання параметрів тегу таблиці. Приклад 1. Побудуємо таблицю, що складається з двох рядків та двох стовпчиків шириною 400 пікселів, висотою 200 пікселів, з товщиною меж 5 пікселів, відстанню між комірками 7 пікселів та відстанню від меж комірки до даних у комірках 3 пікселів. HTML-код, що відповідає цій таблиці, такий: <table width=400 height=200 border=5 cellspacing=7 cellpadding=3 > <tr><th>Рядок 1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr> <tr><td>Рядок 2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr> </table> Відображення такої таблиці у вікні браузера подане на рис. 4.2. Якщо розміри таблиці, визначені за допомогою параметрів width та height, не достатні для коректного відображення розміщеної у ній інформації, то таблиця буде автоматично збільшена браузером. Приклад 2. Розглянемо, як можна змінити взаємне розміщення таблиці і інших елементів на HTML-сторінці за допомогою параметра align. Можливі значення цього параметра для тегу <table>: - align="center" ¾ горизонтальне вирівнювання "по центру", таблиця "не обтікається" текстом; - align="left" ¾ горизонтальне вирівнювання "по лівому краю", таблиця "обтікається" текстом із правого боку; - align="right" ¾ горизонтальне вирівнювання "по правому краю", таблиця "обтікається" текстом з лівого боку. HTML-код для розміщення у HTML-документі тексту та таблиці, вирівняної "по правому краю": <table border="1" align="right"> <tr><th>Рядок 1. Комірка 1</th><th>Рядок 1. Комірка 2</th></tr> <tr><td>Рядок 2. Комірка 1</td><td>Рядок 2. Комірка 2</td></tr> </table> Таблиця вирівняна "по правому краю". Відображення цієї таблиці та тексту у вікні браузера подане на рис 4.3. Зазначимо, що наведені у табл. 4.1 параметри bordercolor, bgcolor та background використовуються також у тегах рядків (<tr>) та комірок (<td>, <th>) для визначення кольору меж, кольору фону, фонових рисунків рядків та комірок. Крім того, як у тегах рядків, так і в тегах комірок для горизонтального та вертикального вирівнювання розміщеної у них інформації можливо використовувати параметри align та valign. У тегах <tr>, <td> та <th> параметр align може приймати значення left, center та right для горизонтального вирівнювання інформації відповідно "по лівому краю", "по центру" та "по правому краю" комірок. У тегах <tr>, <td> та <th> параметр valign може приймати значення top, middle, bottom та baseline для вертикального вирівнювання інформації відповідно "по верхньому краю", "по середині", "по нижньому краю" та "по базовій лінії тексту" комірок. Якщо параметри bordercolor, bgcolor, background, align та valign визначені у тезі <tr>, то їх дія розповсюджується на весь рядок таблиці, але ці параметри можуть бути перевизначені у будь-якій комірці. Особливістю тегів <td> та <th> є можливість використання параметрів rowspan та colspan для об’єднання декількох сусідніх комірок у одну. Параметр rowspan використовується для об’єднання комірок "по вертикалі", а параметр colspan - "по горизонталі". Синтаксис запису цих параметрів такий: rowspan="n" colspan="m", де n та m - кількість комірок, що об’єднуються. При використанні параметра rowspan="n" необхідно у наступних n-1 рядках таблиці зменшити кількість комірок. При використанні параметра colspan="m" необхідно у поточному рядку таблиці зменшити кількість таких комірок на m-1. Допускається сумісне використання параметрів rowspan та colspan для однієї комірки. Наведемо HTML-код таблиці, що складається із двох рядків та трьох стовпчиків, при цьому середня комірка займає обидва рядки: <table border="1" > <tr><td> Рядок 1. Комірка 1</td> <td rowspan="2"> Рядки 1,2. Комірка 2</td> <td> Рядок 1. Комірка 3</td></tr> <tr><td> Рядок 2. Комірка 1</td> <td> Рядок 2. Комірка 3</td></tr></table> Відображення цієї таблиці у вікні браузера подане на рис. 4.4. Наведемо HTML-код таблиці, що складається із двох рядків та трьох стовпчиків, при цьому всі комірки нижнього рядка об’єднані у одну: <table border="1" > <tr><td>Рядок 1. Комірка 1</td> <td>Рядок 1. Комірка 2</td><td>Рядок 1. Комірка 3</td></tr> <tr><td colspan="3">Рядок 2. Комірки об'єднані у одну 1</td></tr> </table> Відображення цієї таблиці у вікні браузера подане на рис. 4.5.
4.2. ФормиОсновною метою використання форм є передача інформації від клієнта на Web-сервер. Як правило, результатом такої передачі є відображення у клієнта нового HTML-документа, сформованого Web-сервером на основі переданої інформації. Форма визначається у HTML-документі за допомогою тегу-контейнера <form> та складається із набору полів вводу, що визначені за допомогою тегів <input>, <select> та <textarea>. Дані на Web-сервер передаються у вигляді: змінна = значення, де змінна - ім’я поля вводу, задане за допомогою параметра name, наприклад: <input type="text" name="mytext"> Тег <form> у вікні браузера не відображається, а поля вводу відображаються за допомогою стандартних графічних елементів управління. Основними параметрами тегу <form> є action, enctype та method. Обов’язковий параметр action визначає URL-адресу, куди передається інформація. Параметр enctype визначає формат кодування даних при їх передачі. Можливими значеннями цього параметра є application/x-www-form-urlencoded (використовується при стандартних установках) та multipart/form-data (застосовується при передачі файлів). Параметр method визначає метод передачі інформації. Можливими значеннями цього параметра є get та post. Метод get рекомендується використовувати, якщо обсяг інформації, що передається, не перевищує 255 символів. Метод post слід застосовувати при передачі великого обсягу інформації. Тег <input> використовується для генерації таких елементів управління, як кнопки та поля для вводу тексту, паролів, імен файлів. Основні параметри цього тегу подані у табл. 4.2. Таблиця 4.2 Основні параметри тегу <input>
Тег <select> призначений для того, щоб організувати на формі вибору текстових елементів із декількох заданих варіантів. Синтаксис запису цього тегу такий: <select name="ім’я елемента" size="кількість видимих рядків" multiple> <option selected >елемент вибору 1</option> <option>елемент вибору 2</option> .............................................. </select> На сервер відправляється список вибраних значень під іменем "ім’я елемента". Параметр size задає кількість елементів вибору, що можуть відображатись одночасно. Якщо size=1, то відображається випадаюче меню. Наявність параметра multiple означає можливість одночасного вибору декількох елементів із списку. Елементи вибору задаються у середині тегу <select> за допомогою тегу <option>. Для показу елемента, як вже вибраного, необхідно у тезі <option> використати параметр selected. Тег <textarea> призначений для створення у середині форми поля для вводу тексту із декількох рядків. Крім обов’язкового параметра name у цьому тезі використовуються параметри cols та rows. Ці параметри дозволять визначити кількість стовпчиків та рядків тексту, що відображається у даному елементі управління. Наведемо приклад HTML-коду для визначення форми, що містить елементи управління для вводу рядка тексту, пароля, кнопки типу submit для відправки даних на сервер та кнопки типу reset для відновлення початкового значення полів: <body><table> <form action="password.php" method="get"> <tr><td><input type="text" name="login" size="21" maxlength="21"> Введіть ім'я </td></tr> <tr><td><input type="password" name="passw" size="21" maxlength="21"> Введіть пароль </td></tr> <tr><td><input type="reset" value="Очистити" width="50" height="30"> <input type="submit" value="Відправити" width="50" height="30"></td></tr> </form> </table></body> Відображення такої форми у вікні браузера подане на рис. 4. 6. Особливості даної форми: - призначена для ідентифікації користувача на Web-сервері за допомогою персональних даних (імені та пароля); - використання таблиці для розміщення елементів управління; - використання текстових пояснень призначення елементів управління; - дані форми передаються методом get та призначені для обробки Web-додатком password.php, який знаходиться у тій самій директорії, що і HTML-документ з формою.
4.3. ФреймиФреймова структура HTML-документа дозволяє розділити вікно браузера на декілька прямокутних ділянок (фреймів), у кожну із яких можливо завантажити окремий HTML-документ. Між фреймами можливо організувати взаємодію. Сенс взаємодії між фреймами полягає у тому, що вибір посилання у одному із фреймів може призвести до завантаження вказаного HTML-документа у інший фрейм. У основному фрейми застосовуються для організації управління завантаженням HTML-документів у певну ділянку вікна браузера при роботі користувача у іншій ділянки, тобто для організації меню. Хоча на сьогодні фреймова структура досить широко застосовуються, але вона не відповідає сучасним тенденціям у галузі побудови Web-сайтів. Особливістю HTML-документа із фреймовою структурою є те, що кількість html-файлів на одиницю більша від кількості фреймів. Причиною цього є потреба у використанні окремого html-файлу для визначення фреймової структури. Фреймова структура HTML-документа визначається за допомогою тегу-контейнера <frameset>, що використовується замість тегу <body>. Тег <frameset> може мати параметри rows та cols, за допомогою яких визначається кількість та розміри ділянок, на які розділяється вікно браузера. За допомогою параметра rows вікно браузера розділяється на горизонтальні, а за допомогою параметра cols - на вертикальні ділянки. Синтаксис запису тегу: <frameset rows="висота_1, висота_2..." cols="ширина_1, ширина_1..."> Кількість заданих “висот” та “ширин” задають кількість горизонтальних та вертикальних ділянок (фреймів), на які буде розділене вікно браузера. Для коректного визначення фреймової структури необхідно, як мінімум, задати принаймні два розміри для одного із параметрів rows чи cols. Розміри фреймів можуть задаватись у пікселях, процентах від розмірів вікна браузера або відносних одиницях. Наведемо приклади. Визначення розмірів фреймів у пікселях: <frameset rows="100,500"> ¾ визначає два горизонтальні фрейми висотою 100 та 500 пікселів. Визначення розмірів фреймів у процентах: <frameset rows="10%,90%"> - визначає два горизонтальні фрейми висотою 10 % та 90 % від висоти вікна браузера. Визначення розмірів фреймів у відносних одиницях: <frameset rows="*,2*"> ¾ визначає два горизонтальні фрейми висотою 1/3 та 2/3 від висоти вікна браузера. У цьому випадку для показу відносних величин використовується символ *. У середині контейнера <frameset> можуть розміщуватись тільки теги визначення окремого фрейма <frame> або вкладені теги <frameset>. Сумарна кількість цих тегів повинна бути рівною кількості фреймів, заданих параметрами rows та cols контейнера <frameset>. Параметри тегу <frame> подані у табл. 4.3. Таблиця 4.3Параметри тегу <frame>
Наведемо приклад html-коду для визначення двох фреймів, що займають відповідно 25 % та 75 % від ширини вікна браузера. Зазначимо, що межа між фреймами повинна відображатись у вікні браузера. Лівий фрейм має ім’я fmenu, у якому завантажений файл fmenu.html. Правий фрейм має ім’я fwindow, у ньому завантажений файл fwindow.html. Поля лівого фрейма становлять 5 пікселів, а поля правого фрейма 7 пікселів. Розміри правого фрейма не можуть бути змінені користувачем. <frameset cols="25%,75%"> <frame src="fmenu.html" name="fmenu" frameborder="1" marginwidth="5" marginheight="5"> <frame src="fwindow.html" name="fwindow" marginwidth="7" marginheight="7" noresize> </frameset> Відповідне вікно браузера подане на рис. 4.7. Зазначимо, що особливостю посилань, які використовуються для навігації по фреймах, є використання параметра target для визначення імені фрейма. Наведемо приклад html-коду посилання, вибір якого призводить до завантаження у фрейм з name=" fwindow" файлу exsp.html: <a href=" exsp.html " target="fwindow"></a> 4.4. Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |