22.11.2021 - 28.11.2021
Тема:Створення
веб-сторінки на фреймах з різними типами даних. Реалізація HTML-кодування.
Теоретична частина
Понятття фреймів в мові розмітнки HTML
Незважаючи на те, що сайти з фреймами
зустрічаються все рідше, вивчення HTML було б неповним без розгляду теми про
фрейми. До того ж фрейми в якомусь сенсі зайняли свою нішу і
застосовуються для систем адміністрування та довідки. Там, де недоліки фреймів
не мають особливого значення, а переваги навпаки, активно затребувані.
Для створення фрейма використовується тег <frameset> , який замінює тег <body> в документі і застосовується для поділу екрана на
області. Усередині даного тега знаходяться теги <frame> , які вказують на HTML-документ, призначений для
завантаження в область
Якщо матеріали web-сайту структуризовані логічно за
темами і мають базуватися на декількох сторінках з навігацією за допомогою
гіперпосилань, то такий сайт реалізовують із застосуванням фреймів.
Фрейм у
перекладі з англійської означає кадр, рамка, прямокутна область.
Фрейми поділяють вікно браузера на частини, в яких
відображають зміст сторінок сайту. Кожній сторінці має відповідати свій
html-файл.
Кожна сторінка повинна мати логічний заголовок.
Наприклад, типовим є сайт, де вікно браузера поділене на
дві вертикальні області.
У вужчій (до 25%
від ширини вікна браузера) лівій області відображають зміст сайту у вигляді
гіперпосилань на конкретні сторінки, а в іншій — вибрану користувачем
сторінку.
Такий підхід до конструювання сайту дає змогу постійно
бачити зміст сайту і переглядати його сторінки у будь-якій послідовності.
Зміст чи у цьому випадку увесь лівий фрейм називають
навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна
браузера, справа чи де завгодно.
Часто у верхній
частині створюють третій вузький фрейм, де розташовують заголовок сайту,
логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь
продумати фреймову структуру, визначитися з кількістю фреймів, їхніми
розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами
Для створення сайту із застосуванням фреймів потрібно
скласти як мінімум три html-файли: один основний і два чи більше допоміжні.
Один допоміжний файл потрібний для заповнення стартовою інформацією лівого
фрейму, інший — правого.
Основний файл призначений для опису розташування фреймів
у вікні браузера. Тут описується структура фреймів, зазначаються адреси
html-файлів для кожного фрейму, а також пояснюється, що має відображатися на
екрані, якщо якийсь давній Браузер не підтримує фреймів.
Приклад використання тегу <FRAME>
HTML
<frameset rows="80,*" cols="*">
<frame
src="top.html" name="topFrame" scrolling="no"
noresize>
<frameset
cols="80,*">
<frame
src="left.html" name="leftFrame" scrolling="no"
noresize>
<frame
src="main.html" name="mainFrame">
</frameset>
</frameset>
У разі використання фреймів в першому рядку коду
пишеться наступний тип документа.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Даний <! DOCTYPE> вказує
браузеру, що він має справу з фреймами, цей рядок коду є
обов'язковою. Контейнер <head> містить типову інформацію на зразок
кодування сторінки і заголовка документа. Ось тільки врахуйте, що
заголовок залишається незмінним, поки HTML-файли відкриваються всередині
фреймів.
В даному прикладі вікно браузера розбивається на
дві колонки за допомогою атрибута cols , ліва колонка займає 100 пікселів, а права
- простір, що залишився, заданий символом зірочки. Ширину або висоту
фреймів можна також задавати в процентному відношенні, на зразок таблиць.
У тезі <frame> задається
ім'я HTML-файла, що завантажується в зазначену область за допомогою
атрибута src . У праве вікно буде завантажений файл,
названий mаіn.html (див. приклад ), а в ліворуч- left.html (
див. приклад). Кожному фрейму бажано поставити його унікальне ім'я, щоб
документи можна було завантажувати в вказане вікно за допомогою атрибута name .
Практична частина
Завдання 1. Набрати в текстовому редакторі
Блокнот наступний текст html-кодів і зберегти його у файл з
розширенням html.
Скопіювати HTML-кодування веб-сторінки у
цьому завданні 1.
1. Відкрити
текстовий редактор Блокнот. І вставити на сторінку коди.
2. Зберегти
даний документ під Іменем index1.html на Робочий стіл.
3. Відкрити
даний документ у веб-браузері. Протестувати активні слова на веб-сторінці
4. надіслати
скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
Кодування простої
HTML-таблиці розміром 3х3,
яка складається з трьох стовпців
і трьох рядків
При використанні фреймів необхідно як мінімум три
HTML-файлу: перший визначає фреймової структуру і ділить вікно браузера на дві
частини, а що залишилися два документа завантажуються в задані
вікна. Кількість фреймів не обов'язково дорівнює двом, може бути і більше,
але ніяк не менше двох, інакше взагалі втрачається сенс застосування фреймів.
Розглянемо етапи створення фреймів на основі
сторінки, продемонстрованої нижче. Нам знадобиться три файли: index.html -
визначає структуру документа, main.html -
завантажується в правий
фрейм і left.html -
завантажується в лівий фрейм. З них тільки index.html відрізняється
за структурою свого коду від інших файлів
Реалізація кодування
веб-сторінки на фреймах.
Три файли
зберегти в одній папці з назвою “Frameset”
Кодування 1-ого файлу index.html
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title> Приклад
6. Фрейми, проста HTML-frameset -</title>
<BASE target="right"> </BASE>
</head>
<frame
src="top.html" name="topFrame"
scrolling="auto">
<frameset
cols="800,900">
<frame
src="left.html" name="leftFrame"
scrolling="auto">
<frame
src="main.html" name="mainFrame" >
</frameset>
</frameset>
</html>
Кодування 2-ого файлу left.html
<html>
<head>
<title> Проста HTML-форма </title>
<BASE target="right"> </BASE>
</head>
<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444”
alink=”#111111” background=”bg.jpg”>
<p><Font size="50" color=”#gggggg” face=”Arial, Times
New Roman, Serif”> Зразок кодування форми</font>.
<P><Font size=40" color=”#000000” face=”Arial, Times New
Roman, Serif”>Заповніть просту форму</font>
<P><Font size="15" color=”#000000” face=”Arial, Times
New Roman, Serif”>
<forma method="post" action=”/cgi-bin/feedback.pl”
name=”FORMA2”> Прізвище:
<input type="text"
name=”secondname” size=”45” maxlength="150">
<br>
Iм'я:<input
type="text" name=”firstname”
size=”25” maxlength="150">
<br>
E-mail:<input type="text"
name=”email” size=”25” maxlength="150">
<p> Вік:
14-18:<input type="checkbox" name=”14-18” size=”25”>
19--25:<input type="checkbox" name=”19--25:” size=”25”>
26-36:<input type="checkbox" name=”26-36” size=”25”>
36-50:<input type="checkbox" name=”36-50” size=”25”>
50-100:<input type="checkbox" name=”50-100:” size=”25”>
<p> Стать:
<br>
<input type="radio"
name=”button” value=”male”>
Чоловік
<br>
<input type="radio"
name=”button” value=”female”>
Жінка
<br>
<input type="radio"
name=”button” value=”prefer not say”>
Не скажу
<p>Місто:
<select>
<OPTION name=”vinniza”
>Вінниця
<OPTION name=”bar” >Бар
<OPTION name=”zhytomyr”
>:Житомир
<OPTION name=”kiev” >Київ
</select>
<p> Додаткові відомості про себе:
<p>
<TEXTAREA rows="25" cols="78">
</TEXTAREA>
<input type="submit"
name=”button” value=”OK”>
<input type="reset"
name=”button” value=”Ні”>
</form>
</body>
</html>
Кодування 3-ого файлу main.html
<html>
<head>
<title> Проста
HTML-таблиця </title>
<BASE
target="right"> </BASE>
</head>
<BODY bgcolr=”#00bb99”
text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111”
background=”bg.jpg”>
<p><Font
size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”>
Зразок таблиці</font>.
<P><Font size=40"
color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть таблицю
числами і змініть колір тла комірок в таблиці</font>
<P><Font
size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>
<table border="3"
align=”left” cellspacing=”2” cellpading=”1”
widht=”500”>
<caption align=”midlle”> Це заголовок таблиці </caption>
<tr>
<td
align=”midlle” valign=”top” ”
widht=”150"
bgcolor="60ff00" height="97"> Заголовок 1
</td>
<td align=”left” valign=”bottom” ” widht=”125" bgcolor="11ff00" height="87">Заголовок
2 </td>
<td align=”right” valign=””midlle” ” widht=”105"
bgcolor="ddff00" height="77">Заголовок 3</td>
</tr>
<tr>
<td
bgcolor="55ff00" height="57"> Осередок 2×1 </td>
<td
bgcolor="eeee00" height="87"> Осередок 2×2 </td>
<td bgcolor="bbbb00"
height="97"> Осередок 2×3 </td>
</ tr>
<tr>
<td bgcolor="55fab0"
height="77"> Осередок 3×1 </td>
<td
bgcolor="00ff99" height="67"> Осередок 3×2
</td>
<td bgcolor="ggff00"
height="57"> Осередок 3×3 </td>
</tr>
</table>
</body>
</html>
Завдання 2. Завантажте програму-браузер файл
index.html
з
текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення.
Завдання 3. Як створити на веб-сторінці по бокам 2 вертинкальних фрейма і
4 горизонтальних фрейми в центрі?
Реалізація. У файл index.html треба внести зміни:
<frameset
cols="33%,33%,34%">
<frame src="top.html"
name="topFrame" scrolling="auto">
<frameset rows="33%,33%,34%">
<frame src="example11.html" name="Фрейм 2">
<frame src="left.html" name="leftFrame"
scrolling="auto">
<frame src="main.html" name="mainFrame" >
<frame src="left.html" name="leftFrame"
scrolling="auto">
</frameset>
<frame src="main.html" name="mainFrame" scrolling="auto">
>
</frameset>
Завдання 4. Як створити
на веб-сторінці 2 вертикальних фрейми вгорі та 1 горизонтальний фрейм внизу?
Реалізація. У файл index.html треба внести зміни:
<frameset
rows="75%, 25%">
<frameset
cols="100, *">
<frame src="left.html" name="leftFrame"
scrolling="auto">
<frame src="main.html" name="mainFrame" >
</frameset>
<frame
src="top.html" name="TOP" scrolling="no"
noresize="">
</frameset>
Завдання 5. Як створити
на веб-сторінці всередині сторінки віконце?
Реалізація. У файл index.html треба внести зміни:
Фрейм
в середині сторінки реалізується кодом:
<iframe src="top.html " width="100"
height="100" frameborder=0 scrolling="no"
noresize=""></iframe>
src - адрес веб-сторінки, яка показується у віконці
width и height - розміри віконця
Аби вимкнути рамку віконця, додали frameborder=0
Не забувайте - закриваючий тег </iframe>
Завдання 6. Як створити на веб-сторінці три фрейми: вгорі меню, під меню ліворуч
зміст, під меню праворуч со?
Реалізація.
1-ий файл index1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Приклад 6. Фрейми</title>
</head>
<frameset rows="25%, 75% ">
<frame src="top.html" name="TOP"
scrolling="no" noresize="">
<frameset cols="100, * ">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>
2-ий файл menu.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Навігація по сайту</title>
</head>
<body style="background: #f0f0f0">
МЕНЮ
</body>
</html>
3-ий файл content.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Зміст сайту</title>
</head>
<body style="background: white">
Зміст
</body>
</html>
4-ий файл top.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>ТОП-чік</title>
</head>
<body style="backgroung: white">
ТОП-чік
</body>
</html>
Результат
виконаної практичної роботи це файли( із результатами виконання програм) надіслати
вашому учителю на електронну скриньку:
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)
Немає коментарів:
Дописати коментар