Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення динамічних веб-сторінок засобами HTML.
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Програмного забезпечення (ПЗ)
Інформація про роботу
Рік:
2008
Тип роботи:
Лабораторна робота
Предмет:
Комп'ютерні мережі
Група:
КН
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти та науки України
Національний університет «Львівська політехніка»
Кафедра ПЗ
Звіт
Лабораторні роботи з дисципліни «Комп’ютерні мережі»
«Створення динамічних веб-сторінок засобами HTML»
Виконав : ст.гр. КН – 3
Львів 2008
Лабораторна робота № 1. Основні поняття мови HTML, структура web-сторінки
1.1. Структура web-документів
1.2. Редактор Dreamweaver для проектування web-сторінок
1.3. Функції тега <HEAD>
1.4. Основні атрибути сторінки
Лабораторна робота № 2. Опрацювання тексту мовою HTML, використання редактора Dreamweaver
2.1. Редагування HTML-коду в Dreamweaver
2.2. Коментарі
2.3. Вставка тексту в Dreamweaver та з Dreamweaver
2.4. Форматування тексту
2.5. Створення списків
2.6. Використання HTML-стилів
2.7. Вставляння графічних та відеофайлів
Лабораторна робота № 3. Забезпечення динаміки web-сторінок посиланнями
3.1. Вставка гіперпосилань
3.2. Навігаційна карта
3.3. Навігаційні панелі
3.4. Меню переходу
Лабораторна робота № 4. Формування таблиць на web-сторінці
4.1. Створення таблиць
4.2. Вставка даних
4.3. Форматування таблиць
Лабораторна робота № 5. Інструмент фреймів на web-сторінці
5.1. Поняття про фрейми
5.2. Основний html-файл
5.3. Допоміжні HTML-файли
5.4. Використання фреймів у Dreamweaver
Лабораторна робота № 6. Використання каскадних таблиць стилів у web-сайтах
6.1. Основні поняття
6.2. Мова CSS
6.3. Властивості стилів та їхні значення
6.4. Групування властивостей і успадковування
6.5. Теги <STYLE>, <SPAN>
6.6. CSS у програмі Dreamweaver
Коротркі теоретичні відомості
HTML – це не мова програмування. Це скоріше мова оформлення, розмітки документів для їх розміщення і інтернеті. Сайт по суті це сукупність пов’язаних між собою документів, які формлені за допомогою HTML. Звичайно існує багато мов які дають більші можливості, але всі вони повністю чи частково базуюютьяс на HTML. Такі сторінки пов’язіні між собою посиланнями на ту чи іншу сторінку. Ідея гіпертекстової інформаційної системи полягає в реалізації механізму перегляду документів (сторінок тексту) в довільному порядку. Для цього гіпертекст як нелінійний текст містить гіпертекстові посилання. Відомими прикладами фахівців з гіпертекстів є енциклопедії та системи довідників "Неlр" у різноманітних програмних продуктах. Механізм побудови посилань є складною задачею, оскільки він дозволяє формувати статичні посилання, динамічні посилання, асоційовані з документом в цілому або тільки з окремими його частинами, тобто контекстні посилання. Розширення поняття гіпертексту до поняття гіпермедіа. здійснено за рахунок таких інформаційних ресурсів як графіка, аудіо- та відеоінформація тощо.
На даний час є опубліковані HYPERLINK "http://www.w3.org/TR/WD-html40-970708/" матеріали специфікації HTML 4.0. Крім можливостей розмітки тексту, включення мультимедіа і формування гіпертекстових зв’язків, версія 4.0 містить засоби роботи з мультимедіа, мови програмування, таблиці стилів, засоби друку зображень та документів. Для управління сценаріями перегляду Web-сторінок (гіпертекстової базы даних, виконаної в технології World Wide Web) можна використовувати мови програмування цих сценаріїв типу JavaScript, Java и VBScript.
Основними елементами HTML є теги (tags), якими здійснюється розмітка тексту. Теги містять атрибути та інструкцій для форматування, які провідники (броузери) інтерпретують і представляють користувачу для перегляду. Теги є одинарними і парними. Наприклад, парний тег означення html-файлу: <HTML> ... </HTML>. Парні теги позначають початок і кінець області дії відповідної команди. Такі теги називаються також контейнерами. Контейнер може містити текст та інші теги.
Деякі НТМL-теги не мають кінцевої компоненти, оскільки вони є автономними елементами. Наприклад, тег <IMG> (для внесення в документ графічного зображення) кінцевої компоненти не потребую. До автономних тегів відносяться <BR> (розрив рядка), <HR> (горизонтальна лінійка), а також теги <META> і <BASE>., які містять інформацію про документ, що не впливає на його зміст.
В деяких випадках кінцеві теги в документі можна опускати. При опрацюванні тексту документу часто початковий тег сприймається як кінцевий тег попереднього. Прикладом такого типу є тег абзацу <Р>. Його переважно ставлять тільки на початку кожного абзацу. Коли абзац закінчується, наступний тег <Р> сигналізує провіднику про це та про необхідність почати наступний абзац.
НТМL-документ містить три області, позначені тегами: <НТМL>, <HEAD> (заголовок) і <BODY> (тіло документа). <HEAD> визначає web-сторінку в цілому. Цей тег нічого не відображає на сторінці. Він призначений для провідників та пошукових механізмів і містить опис того, що є всередині сторінки. У тег <HEAD>, як правило розташовують JavaScript-код. Контейнер <BODY> містить все, що відноситься саме до сторінки: текст, зображення, таблиці і т.п.
Лабораторна робота 1
Тема: Основні поняття мови HTML, структура WEB-сторінки
Мета: оволодіти засобами внесення та редагування текстової інформації на динамічну web-сторінку за допомогою програмного редактора Dreamweaver
Що не виникало проблем з кодуванням мови внесемо нвступні зміни в тег <meta>:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Щоб встановити фонофий колір та колір тексту використаємо параметри тегу <body>
<body bgcolor="#CCCCCC" text="#003366">
Всі зміни шрифту вносяться в тег <font>. Наприклад:
<font face="Courier New, Courier, monospace" size="8" color="#006600">
face - це назва шрифту; size – розмір; color – колір;
Слід зазначити що дані параметру стосуютсья лише тексту, що стоїть до закриття даного тегу <font>, тобто до </font>.
Код сторінки
<html>
<head>
<title>
Лабораторна робота 1
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#CCCCCC" text="#003366">
<h1>
Лабораторна робота 1
</h1>
<p>Тема: Основні поняття мови HTML, структура WEB-сторінки
<br>
Мета: Оволодіти структурою мови HTML для створення web-сторінок та різними способами їх побудови, в тому числі з допомогою програмного редактора Dreamweaver
<br>
<br>
<br>
` <font face="Courier New, Courier, monospace" size="8" color="#006600">
Courier New, Courier, monospace size = 8 </font>
<br>
<font face="Times New Roman, Times, serif" size="5" color="#FFCC00">
Times New Roman, Times, serif size = 5 </font>
<br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="6" color="#000000">
Verdana, Arial, Helvetica, sans-serif size = 6 </font> </p>
<p> </p>
<p><a href="index.html">На головну</a> </p>
</body>
</html>
Лабораторна робота 2
Тема: Опрацювання тексту мовою HTML, використання редактора Dreamweaver
Мета: Oволодіти засобами внесення та редагування текстової інформації на динамічну web-сторінку за допомогою програмного редактора Dreamweaver
В HTML існує три типи списків:
Ненумерований
Нумерований
Список тлумачень
Ненумерований список:
<lh>
Заголовок
</lh>
<ul>
<li> перший елемент списку
<li> другий елемент списку
<li> третій елемент списку
</ul>
Нумерований список
<lh>
Заголовок
</lh>
В параметрі type вказуємо тип нумарації (а, 1, І . . .)
<ol type=”1”>
<li> перший елемент списку
<li> другий елемент списку
<li> третій елемент списку
</ol>
Список тлумачень
<lh>
Заголовок
</lh>
<dl>
<DT> термін 1
<DD> тлумачення 1
<DD> тлумачення 2
<DT> термін 2
<DD> тлумачення 1
<DD> тлумачення 2
</dl>
Для завантаження зображення в сайт вмкористовують тег <img>. В параметрах вказують шлях до файлу, та різні опції відображення (вирівнювання, відстань в пікселях до тексту, виведення підказки при наведенні на зображення вказівника миші …) Наприклад:
<img src="0446.jpg" Alt="Зображення">
Зображення розміщене в тому самому каталозі, що й дана сторінка, при наведдені вказівника миші виведеться підказка «Зображення»
Код сторінки:
<html>
<head>
<title>
Лабораторна робота 2
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#CCCCCC" text="#003366">
<h1>
Лабораторна робота 2
</h1>
Тема: Опрацювання тексту мовою HTML, використання редактора Dreamweaver
<br>
Мета: Oволодіти засобами внесення та редагування текстової інформації на динамічну web-сторінку за допомогою програмного редактора Dreamweaver
<br> <br> <br>
<font face="Courier New, Courier, monospace" size="5" color="#006600">
<u>
<center>
Courier New, Courier, monospace size = 3
</center>
</u>
</font>
<br>
<font face="Times New Roman, Times, serif" size="5" color="#FFCC00">
<b>
<p align="right">
Times New Roman, Times, serif size = 3
</p>
</b>
</font>
<br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="6" color="#000000">
<i>
Verdana, Arial, Helvetica, sans-serif size = 3
</i>
</font>
<br>
<font face="Times New Roman, Times, serif" size="5" color="#66FF00">
<sup>
Times New Roman, Times, serif size = 3
</sup>
</font>
<br>
<font face="Georgia, Times New Roman, Times, serif" size="6" color="#6600FF">
Georgia, Times New Roman, Times, serif" size = 3
</font>
<br>
<font face="Courier New, Courier, monospace" size="5" color="#330000">
<sub>
Courier New, Courier, monospace size = 3
</sub>
</font>
<br> <br> <br> <br>
<hr>
<lh>
Ненумерований список
</lh>
<ul>
<li> перший елемент списку
<li> другий елемент списку
<li> третій елемент списку
</ul>
<lh>
Нумерований список
</lh>
<ol type=”1”>
<li> перший елемент списку
<li> другий елемент списку
<li> третій елемент списку
</ol>
<lh>
Список тлумачень
</lh>
<dl>
<DT> термін 1
<DD> тлумачення 1
<DD> тлумачення 2
<DT> термін 2
<DD> тлумачення 1
<DD> тлумачення 2
</dl>
<p><img src="0446.jpg" Alt="Зображення">
<br>
Зображення </p>
<p> </p>
<p><a href="index.html">На головну </a></p>
</body>
</html>
Лабораторна робота 3
Тема: Забезпечення динаміки WEB-сторінок посиланнями
Мета: Оволодіти засобами внесення посилань для забезпечення можливості навігації у гіпертекстовому просторі
Посилання – текст, зображення або інші елементи, що забезпечують перехід між сторінками сайту. На мові HTML це реалізовуєтясь тегом <href> в параметрах якого вказуються опції (відкривати сторінку в новому вікні, колір тексту посилання після переходу .. ) Ннаприклад:
<a href="lab3_2.html">
Текст
</a>
Власне посиланням є «Текст». Результатом буде перехід на сторінку lab3_2.html. Вона має бути розміщена в одному каталохі з даною сторінкою
Зручно також використовувати посилання, які забезпечують посилання електронних листів.
<a href="mailto:bogdan_melnu4yk@mail.ru">
Текст
</a>
Внаслідок переходу по даному посиланню запуститься поштовий клієнт, який встановлений в ОС як клієнт по замовчуванню.
Перше враження у відвідувачів сайтів складається від інтерфейсу сторінок, тобто від їх зовнішнього вигляду. Тому для різновиду переходів між сторінками часто використовують навігаційні панелі. По суті це звичайне зображення, яке може змінюватися після наведення чи натискання вказівника миші. Різні області такого зображення є посиланнями, тобто одне зображення служить для переходу на декілька сторінок. Наприклад:
<img src="10.jpg" width="400" height="270" border="0"align="left" setmap="#Map">
<map name="Map">
<area shape="rect" coords="187,2,396,132" href="Lab3_2.html" alt="Посилання 2"> <area shape="rect" coords="2,7,179,125" href="Lab3_1.html" alt="Посилання 1"> <area shape="rect" coords="10,131,172,214" href="Lab3_3.html" alt="Посилання 3">
<area shape="rect" coords="190,135,390,215"href="Lab3_4.html" alt="Посилання 4"> </map>
Для створення навігаційної панелі використовуєтсья тег <map> , в параметрах якого вказуємо ім’я. Потім визначаємо ті області зображення, що будуть служити як посилання. Це може бути прямокутна область, або коло. Вказуємо відповідні координати. Використаємо параметр тега <img setmap=”#name”> для назначення панелі на зображення.
Для групування посилань існує елемент «Випадаюче меню». Розгялнемо приклад створення такоо меню в Dreamweaver. Діалогове вікно створення меню виглядає так:
В полі Text вводимо власне текст посилання. В пункті “when selected, go to URL” вводимо шлях до сторінки, яка буде відкрита після вибору даного пункту в меню.
Код сторінки:
<html>
<head>
<title>
Лабораторна робота 1
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body bgcolor="#CCCCCC" text="#003366" onLoad="MM_preloadImages('05.JPG','10.JPG')">
<a name="top"> </a>
<h1>
Лабораторна робота 3
</h1>
Тема: Забезпечення динаміки WEB-сторінок посиланнями
<br>
Мета: Оволодіти засобами внесення посилань для забезпечення можливості навігації у гіпертекстовому просторі
<br> <br> <br>
<a href="lab3_1.html">
Посилання 1
</a>
<br> <br>
<a href="lab3_2.html">
Посилання 2
</a>
<br> <br>
<a href="lab3_3.html" target="_blank">
Посилання 3 (відкрити у новому вікні)
</a>
<br> <br>
<a href="mailto:bogdan_melnu4yk@mail.ru">
Посилання 4 (відправити лист)
</a>
<br> <br>
Посилання 5 (зображення-посилання)
<br>
<a href="lab3_4.html">
<img src="09.jpg" align="left" width="400" height="270">
</a>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="Lab3_1.html">Посилання 1</option>
<option value="Lab3_2.html">Посилання 2</option>
<option value="Lab3_3.html">Посилання 3</option>
<option value="Lab3_4.html">Посилання 4</option>
</select>
</form>
<p><br>
<img src="10.jpg" width="400" height="270" border="0" align="left" usemap="#Map">
<map name="Map">
<area shape="rect" coords="187,2,396,132" href="Lab3_2.html" alt="Посилання 2">
<area shape="rect" coords="2,7,179,125" href="Lab3_1.html" alt="Посилання 1">
<area shape="rect" coords="10,131,172,214" href="Lab3_3.html" alt="Посилання 3">
<area shape="rect" coords="190,135,390,215" href="Lab3_4.html" alt="Посилання 4">
</map>
<br><br><br>
</p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','_09','05.JPG',1)" onMouseOver="MM_nbGroup('over','_09','10.JPG','',1)" onMouseOut="MM_nbGroup('out')"><img src="09.JPG" alt="" name="_09" width="348" height="406" border="0" onload=""></a></td>
</tr>
</table>
<p><a href="#top">На початок
</a></p>
<p> </p>
<p><a href="index.html">На головну</a></p>
<p> </p>
<p> </p>
</body>
</html>
Лабораторна робота 4
Тема: Створення таблиць на сторінці
Мета: Оволодіти засобами формування та редагування таблиць на динамічній web-сторінці допомогою програмного редактора Dreamweaver
В HTML дуже зручно організована робота з таблицями. Для створення таблиці використовують тег <table> </table>. В параметрах можна вказати стиль рамки, відстань між клітинками в тадлиці в пікселях. Далі слідує тег <tr> </tr> - оголошення рядка. Ми не вказуємо кількість рядків, а будемо створювати кожну клітинку окремо. Для цього визначаємо тег <td> </td>. Кількість таких тегів визначає кількість клітинок в даному рядку. Розглянемо кілька параметрів тега. Наприклад:
<td width="30" bgcolor="#66FF66" colspan="2">
width - ширина клітинки
bgcolor – фоновий колір
colspan – для об’єднання клітинок по вертикалі, вказуємо кількість
В клітинку можна помістити не лише текст але й іншу таблицю. Так формуються вкладені таблиці. Для цього достатньо після <td> оголосити нову таблицю:
<td>
<table>
<tr>
<td>
Текст в табл 2
</td>
</tr>
</table>
</td>
Код сторінки:
<html>
<head>
<title>
Лабораторна робота 4
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#CCCCCC" text="#003366">
<h1>
Лабораторна робота 4
</h1>
<p>Тема: Створення таблиць на сторінці
<br>
Мета: оволодіти засобами формування та редагування таблиць на динамічній web-сторінці допомогою програмного редактора Dreamweaver
<br>
<br>
<table border="3">
<tr>
<td width="60" height="40" bgcolor="#FFFFFF" valign="bottom">
<center>
текст 1
</center>
</td>
<td width="60" bgcolor="#FFFFFF">
<center>
текст 2
</center>
</td>
<td width="60" bgcolor="#FFFFFF" valign="top">
<center>
текст 3
</center>
</td>
</tr>
<tr>
<td width="60" height="40" bgcolor="#FFFFFF" valign="top">
<center>
текст 4
</center>
</td>
<td width="60" bgcolor="#FFFFFF">
<center>
текст 5
</center>
</td>
<td width="60" bgcolor="#FFFFFF" valign="bottom">
<center>
текст 6
</center>
</td>
</tr>
</table>
<p> </p>
<table border="3" cellpadding="3">
<tr>
<td width="30" bgcolor="#66FF66" colspan="2"> </td>
<td width="30" bgcolor="#66FF66" colspan="2"> </td>
<td width="30" bgcolor="#66FF66" colspan="2"> </td>
<td width="30" bgcolor="#66FF66" colspan="2"> </td>
<td width="30" bgcolor="#66FF66" colspan="2"> </td>
</tr>
<tr>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
</tr>
<tr>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
</tr>
<tr>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66" rowspan="2"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66" rowspan="2"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66" rowspan="2"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66" rowspan="2"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66" rowspan="2"> </td>
</tr>
<tr>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
<td width="30" bgcolor="#66FF66"> </td>
</tr>
</table>
<p> </p>
<table border="3" cellpadding="3">
<tr>
<td bgcolor="white" width="150" height="100">
<center>
</center>
<table border="1" bordercolor="#CC0000" cellspacing="1">
<tr>
<td bgcolor="#CCCCCC" width="40" height="30">
<font color="white">
</font>
</td>
<td bgcolor="#CCCCCC" width="40" height="30">
<font color="white">
</font>
</td>
</tr>
</table>
</td>
<td bgcolor="white" width="150" height="100">
</td>
</tr>
<tr>
<td bgcolor="white" width="150" height="100">
<center>
</center>
<table border="1" bordercolor="#CC0000" cellspacing="1">
<tr>
<td width="20" bgcolor="#CCCCCC"><font color="white">
<font></font></font>
</td>
<td width="20" bgcolor="#CCCCCC"><font color="white">
<font></font></font>
</td>
<td bgcolor="#CCCCCC" width="20">
<font color="white"> </font>
</td>
</tr>
</table>
</td>
<td bgcolor="white" width="150" height="100">
</td>
</tr>
</table>
<p> </p>
<p><a href="index.html">На головну</a></p>
<p> </p>
</body>
</html>
Лабораторна робота 5
Тема: Інструмент фреймів на WEB-сторінці
Мета: Оволодіти навичками формування фреймів для сегментації динамічних web-сторінок допомогою програмного редактора Dreamweaver
Створюючи фрейми ми розміщаємо на одній сторінці декілька різних сторінок. Одна область такої сторінки буде змінюватися, а інші ні. Незмінну частину вигідно використовувати як зміст, а інша частину буде змінюватися в залежності від вказаного в змісті посилання. Для створення фрейму створимо спочатку головну сторінку, в якій потрібно вказати кількість фреймів, їх розмір, визначити яка область буде змінною, а яка ні. Далі сторінку, яка буде областю, де будуть відображатися зміни. Вміст цієї сторінки буде показано лише при завантаженні сторінки. Ну і відповідно до кількості фреймів створюємо незмінні сторінки.
Код сторінок:
lab5.html:
<html>
<head>
<title>
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<frameset rows="150,*">
<frame name="logo" target="main" src="lab5_top.html">
<frameset cols="150,*">
<frame name="menu" target="main" src="lab5_left.html">
<frame name="main" src="main.html">
</frameset>
` </frameset><noframes></noframes>
</head>
</html>
lab5_top.html
<html>
<head>
<title>
Лабораторна робота 5
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#CCCCCC" text="#003366">
<h1>
Лабораторна робота 5
</h1>
<p>Тема: Інструмент фреймів на WEB-сторінці
<br>
Мета: Оволодіти навичками формування фреймів для сегментації динамічних web-сторінок допомогою програмного редактора Dreamweaver </p>
<p><a href="index.html">На головну</a> </p>
</body>
</html>
lab5_left.html
<html>
<head>
<title>Меню</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#CCCCCC">
<a href="Lab3_1.html" target="main">
Посилання 1
</a>
<br>
<br>
<a href="Lab3_2.html" target="main">
Посилання 2
</a>
<br>
<br>
<a href="Lab3_3.html" target="main">
Посилання 3
</a>
<br>
<br>
<a href="Lab3_4.html" target="main">
Посилання 4
</a>
</body>
</html>
Лабораторна робота 6
Тема: Каскадні таблиці стилів
Мета: Оволодіти засобами створення каскадних таблиць стилів, та автоматичного редагування коду на web-сторінці за допомогою таблиць стилів.
Кожен сайт оформлений у певному стилі, за певними правилами. Таблиці стилів дозволяють згрупувати ці правила в один клас. Набагато зручніше застосувати клас до певного об’єкту, ніж кожен раз визначати ті чи інші параметри. Класи можна створювати до тексту, таблиць, посилань … Класи можуть бути зовнішні та внутрішні. Внутрішні класи передбачають звстування їх лише на тій сторінці, де вони визначені, а зовнішні описані в окремому файлі, і застосовувати їх можна до будь-якої стороінки сайту. Ось простий приклад зовнішнього стилю.
.myStyle {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
text-decoration: underline;
color: #006600;
}
Такий стиль застосовуєтся до тексту. Тут вказано шрифт, колір, розмір, декорацію.
Наступний стиль можна застосовувати до таблиці:
.myStyle3 {
color: #000000;
text-decoration: blink;
text-align: center;
background-color: #006699;
border: medium ridge #99FFCC;
}
Код сторінки:
<html>
<head>
<LINK href="myStyle.css"
TYPE - "text/css"
REL = "stylesheet"
TITLE = "myStyle"
<title>
Лабораторна робота 6
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
r.myStyle2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: oblique;
line-height: normal;
font-weight: bold;
color: #666600;
text-decoration: line-through;
}
.myStyle3 {
color: #000000;
text-decoration: blink;
text-align: center;
background-color: #006699;
border: medium ridge #99FFCC;
}
-->
</style>
<link href="myStyle.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#CCCCCC" text="#003366">
<h1>
Лабораторна робота 6
</h1>
Тема: Каскадні таблиці стилів
<br>
Мета: Оволодіти засобами створення каскадних таблиць стилів, та автоматичного редагування коду на web-сторінці за допомогою таблиць стилів
<p class="myStyle">
Стиль тексту визначений у myStyle.css
</p>
<p class="myStyle2">
Стиль тексту визначений у myStyle2.css
</p>
<table class="myStyle3" border="3" cellpadding="3">
<tr>
<td width="30" colspan="2"> </td>
<td width="30" colspan="2"> </td>
<td width="30" colspan="2"> </td>
<td width="30" colspan="2"> </td>
<td width="30" colspan="2"> </td>
</tr>
<tr>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
</tr>
<tr>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
</tr>
<tr>
<td width="30"> </td>
<td width="30" rowspan="2"> </td>
<td width="30"> </td>
<td width="30" rowspan="2"> </td>
<td width="30"> </td>
<td width="30" rowspan="2"> </td>
<td width="30"> </td>
<td width="30" rowspan="2"> </td>
<td width="30"> </td>
<td width="30" rowspan="2"> </td>
</tr>
<tr>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
<td width="30"> </td>
</tr>
</table>
<p> </p>
<p><a href="index.html">На головну</a></p>
</body>
</html>
Файл myStyle.css
.myStyle {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
text-decoration: underline;
color: #006600;
}
Висновок:
На даних лаборатоорних роботах ми навчилися оформляти web-сторінки мовою html. Вивчили прийоми для створення простих сайтів. Закріпили вивчене під час розробки власного сайту.
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора