КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Використання фреймів
|
|
|
|
Мова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна.
Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації сторінками сервера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою мишки на гіперпосиланні – змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими.
Подібну структуру має сторінка, вигляд якої подано на Рис.2.2.2
Рис.2.2.2.Поділ вікна на два фрейми
Код даної сторінки наведено нижче:
<HTML>
<HEAD>
<TITLE>Приклад фреймової структури документа</TITLE></HEAD>
<frameset cols="30%,70%">
<frame src="a1.htm">
<frame src="a2.htm">
</frameset>
</BODY>
</HTML>
Файл a1.htm
<HTML>
<HEAD>
<TITLE>Приклад фреймової структури документа</TITLE>
</HEAD>
<BODY bgcolor="silver" text="black" link="#ff0000">
<h3> На цій сторінці фреймової структури, як правило,
розміщують зміст Web-сайта</h3>
</BODY>
</HTML>
Файл a2.htm
<HTML>
<HEAD>
<TITLE>Приклад фреймової структури документа</TITLE>
</HEAD>
<BODY bgcolor="silver" text="black" link="#ff0000">
<h3> На цій сторінці фреймової структури, як правило, розміщують
вміст вибраного у змісті розділу</h3>
</BODY>
</HTML>
2.2.4. Створення списків, таблиць
Для створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:
| <OL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </OL> | 1. Один 2. Два 3. Три 4. Чотири 5. П’ять |
Тег <OL> може мати такі параметри:
TYPE - вид лічильника:
A - великі латинські букви
a - малі латинські букви
I - великі римські цифри
i - малі римські цифри
1 – звичайні цифри
START - встановлює число, з якого буде починатися відлік, наприклад:
| <OL TYPE="I" START="8"> <LI> Вісім <LI> Дев’ять <LI> Десять <LI> Одинадцать <LI> Дванадцать </OL> | VIII. Вісім IX. Дев’ять X. Десять XI. Одинадцать XII. Дванадцать |
Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:
| <UL> <LI> Один <LI> Два <LI> Три <LI> Чотири <LI> П’ять </UL> | oОдин oДва oТри oЧотири oП’ять |
Тег <UL> може включати параметр TYPE із значеннями disc, circle, square
| <UL TYPE=disc><LI> disc </UL> | · disc |
| <UL TYPE=circle><LI> circle </UL> | o circle |
| <UL TYPE=square><LI> square </UL> | § square |
Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто disc.
Списки визначень мають такий вид:
| <DL> <DT> Термін <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну <DD> Визначення терміну </DL> | Термін Визначення терміну Визначення терміну Визначення терміну Визначення терміну |
Таблиці у WEB-документах застосовуються не тільки для розміщення табличних даних, а й для вставки зображень і посилань, для раціонального компонування WEB- сторінки.
Елементи таблиць. Таблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE> …</TABLE> можуть вставлятися такі елементи:
TR – елемент створення рядка;
TD – елемент, що визначає вміст комірки даних;
TH – елемент, що визначає комірку заголовка.
Наприклад, для створення таблиці 3*2 використовується такий шаблон:
<TABLE>
<TR><TD>…. </TD><TD> … </TD></TR>
<TR><TD>…. </TD><TD> … </TD></TR>
<TR><TD>…. </TD><TD> … </TD></TR>
</TABLE>
де крапками позначений вміст кожної комірки.
Приклад таблиці:
Примітка: В даному прикладі створена таблиця з фіксованою шириною (WIDTH="200" пікселів), але краще використовувати проценти, т.я. в цьому випадку розмір таблиці буде змінюватися в залежності від розміру вікна. | Така таблиця реалізується наступним кодом: <TABLE BORDER="2" WIDTH="200" BGCOLOR="#00FF00"> <TR> <TD>Ячейка 1</TD> <TD>Ячейка 2</TD> </TR> <TR> <TD>Ячейка 3</TD> <TD>Ячейка 4</TD> </TR> </TABLE> |
Таблиця починається тегом <TABLE> и завершується тегом </TABLE>.
Тег <TABLE> може включати такі атрибути:
Таблиця 2.2.1.
| WIDTH="n" | Визначає ширину таблиці в пікселях або процентах, за замовчуванням ширина таблиці визначається вмістом клітинок. |
| BORDER="n" | Встанаолює товщину рамки. За замовчуанням n=0 – таблиця відображається без рамки. |
| BORDERCOLOR="#FFFFFF" | Встановлює колір обрамлення, де #FFFFFF (білий) - шістнадцяткове значення кольору. |
| BGCOLOR="#FFFFFF" | Встановлює колір фону для всієї таблиці, де #FFFFFF - шістнадцяткове значення кольору. |
| BACKGROUND="image.gif" | Заповнює фон таблиці зображенням. |
| CELLSPACING="n" | Визначає відстань між рамками клітинок таблиці в пікселях. |
| ALIGN=LEFT | Визначає положення таблиці в документі. За замовчуванням таблиця притиснута до лівого краю сторінки. Допустимі значення аттрибута: LEFT (зліва), CENTER (по центру сторінки), RIGHT (зправа). |
| FRAME="значение" | Управляє зовнішнім обрамленням таблиці і може приймати такі значення: VOID - обрамлення немає (значення за замовчуванням). ABOVE – межа тільки зверху. BELOW - межа тільки знизу. HSIDES - межа тільки зверху і знизу. VSIDES - межа тільки зліва і справа. LHS - тільки ліва межа. RHS - тільки права межа. BOX - малюються всі чотири сторони. BORDER - також всі чотири сторони. |
| RULES="n" | Управляє лініями, що розділяють клітинки таблиці. Можливі такі значення (n): NONE – немає ліній (значення за замовчуванням). GROUPS - лінії будуть тільки між групами рядів. ROWS - тільки між рядами. COLS - тільки між колонками. ALL - між всіма рядами і колонками. |
Таблиця може включати заголовок, який розміщується між тегами <CAPTION></CAPTION>. Він має бути безпосередньо після тега <TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці:
TOP – значення за замовчуванням, заголовок над таблицею по центру.
LEFT - заголовок над таблицею зліва.
RIGHT - заголовок над таблицею справа.
BOTTOM - заголовок під таблицею по центру.
Рядки таблиці починаються тегом <TR> и завершаються тегом </TR>, а кожна клітинка таблиці починається тегом <TD> и завершується </TD>. Дані теги можуть мати такі атрибути:
Таблиця 2.2.2.
| Атрибути, що можуть застосовуватися до рядків і клітинок | |
| ALIGN=LEFT | Встановлює горизонтальне вирівнювання тексту в клітинках рядка. Може приймати значення LEFT (вирівнювання вліво), CENTER (вирівнювання по центру), RIGHT (вправо). |
| VALIGN=CENTER | Встановлює вертикальне вирівнювання тексту в клітинках рядка. Допустимі значення: TOP (вирівнювання по верхньому краю), CENTER (вирівнювання по центру -це значення приймається за замовчуванням), BOTTOM (по нижньому краю). |
| BGCOLOR="#FFFFFF" | Встановлює колір фону рядка або клітинки. |
| BACKGROUND="image.gif" | Заповнює фон рядка або клітинки зображенням. |
| Атрибути, що можуть застосовуватися тільки до клітинок | |
| WIDTH="n" | Визначає ширину клітинки в n пікселях. |
| HEIGHT="n" | Визначає висоту клітинки в n пікселях |
| COLSPAN="n" | Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки. |
| ROWSPAN="n" | Розтягує клітинки по рядку. Наприклад, <TD ROWSPAN="2" означає, що клітинка буде розтягнута на два рядки таблиці. |
| NOWRAP | Цей атрибут показує, що текст буде розміщено в один рядок |
| BACKGROUND="image.gif" | Заповнює фон клітинки зображенням |
Крім цього, будь яка клітинка таблиці може бути визначена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.
Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде ( - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).
Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.
|
|
|
|
|
Дата добавления: 2014-12-07; Просмотров: 596; Нарушение авторских прав?; Мы поможем в написании вашей работы!