Побудова вбудованих таблиць
Засоби створення таблиць, які вкладені одна в одну, дозволяє здійснювати компановку даних Web-сторінки. Перш за все треба побудувати головну таблицю, залишивши її комірки пустими. Далі треба створити підлеглі таблиці і розмістити їх у відповідних комірках головної таблиці.
Приклад:
<TD>
<TABLE>
<TR>
<TD>T1</TD>
<TD>T2</TD>
</TR>
<TR>
<TD>T3</TD>
<TD>T4</TD>
</TR>
</TABLE>
</TD>
</TABLE>
</TD>
3.1.16 Задання параметрів обтікання таблиці текстом
Атрибут ALIGN дозволяє вказати ознаку обтікання таблиць текстом. Значення left примушує браузер розмістити таблицю зліва від тексту, а right – справа від нього. Якщо необхідно, щоб форматуванню піддавався тільки певний фрагмент тексту, треба застосувати дескриптор <BR> з атрибутом CLEAR, який вказує позицію в тексті, починаючи з якої дія механізму обтікання таблиць текстом відміняється. Значення left, right, all атрибута CLEAR дозволяють визначити, з якого боку – лівого, правого чи з обох боків – текст далі буде вільний від таблиці.
Приклад:
<TABLE BORDER =”10” ALIGN=”left”>
Текст
<BR CLEAR=”all”>
Текст
Завдання для виконання роботи
1. Створити таблицю №1 3x3, внести текст в комірки таблиці
2. Виконати обрамлення таблиці №1
3. Скопіювати таблицю №1 і назвати таблиця №2 і додати заголовок таблиці і обрамлення
4. Скопіювати таблицю №1 і назвати таблиця №3, застосувати групування стовпців таблиці (структурні та не структурні групи стовпців) і застосувати форматуванні в цій групі стовпців тексту
5. Скопіювати таблицю №1 і назвати таблиця №4, застосувати групування рядків таблиці і застосувати форматуванні в цій групі рядків тексту
6. Скопіювати таблицю №1 і назвати таблиця №5, змінити кольори елементів таблиці та фон таблиці, а також кольори рамки
7. Скопіювати таблицю №1 і назвати таблиця №6, і встановити ознаки горизонтального та вертикального вирівнювання
8. Скопіювати таблицю №1 і назвати таблиця №7, змінити розміри таблиці та змінити розміри комірок таблиці
9. Скопіювати таблицю №1 і назвати таблиця №8, застосувати механізм злиття комірок таблиці
10. Скопіювати таблицю №1 і назвати таблиця №9, застосувати вирівнювання даних таблиці (CELLSPACING, CELLPADDING)
11. Скопіювати таблицю №1 і назвати таблиця №10, застосувати відображення меж і ліній розділу таблиці (BORDER, FRAME, RULES)
12. Скопіювати таблицю №1 і назвати таблиця №11, застосувати керування переносом слів в середині комірок таблиці (NOWRAP)
13. Скопіювати таблицю №1 і назвати таблицю №12, задати параметри обтікання текстом, а також відміну обтікання для певного тексту (BR CLEAR=”?”)
14. Побудувати таблицю 3х4 і в кожній комірці розмісти вкладену таблицю, використовуючи 12 створених таблиць
3.3 Контрольні питання
1. Що визначає тег <TR> ?
2. Що визначає тег <TD> ?
3. Що визначає тег <TH> ?
4. Що визначає тег < COLGROUP >?
5. Що визначає COLSPAN?
6. Що визначає ROWSPAN?
Лабораторна робота 4
Тема: Створення фреймів.
Мета: набути навичок створення фреймів.
Завдання: після теоретичних відомостей створити HTML-сторінку відповідної структури та відповідного змісту.
4.1 Теоретичні положення
4.1.1 Створення фреймів.
Фрейми дозволяють поділяти простір вікна Web-браузера на незалежні розділи. Кожний із розділів здатний відображувати певну сторінку Web-сайту. Для того, щоб побудувати фрейми, потрібно створити спеціальну Web-сторінку, яка вміщує опис струкутри фреймів, який створений за допомогою дескрипторів <FRAMESET> <FRAME>.
Дескриптор <FRAMESET> дозволяє сформувати набір фреймів, які ділять простір вікна браузера на рядки і стовбці. Далі необхідно задати значення висоти (ширини) всіх рядків (стовбців), які виражені у відсотках відносно поточних габаритів вікна браузера, екранних пікселах чи у вигляді символу зірка (*). Застосовуючи символ зірка (*), передбачається, що розміри фрейма повинні залежати від габаритів інших фреймів сторінки.
Дескриптор <FRAME> відповідає за структуру і вміст конкретного фрейму.
Комбінація декількох фреймів дає можливість будувати складні струкутри. Для цього треба всередині одного набору фреймів (між дескрипторами<FRAMESET> і </FRAMESET>) розмістити опис іншого набору.
Приклад1
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<FRAMESET ROWS=”50,100,*”>
<FRAME NAME=”n1” SRC=”b1.html”>
<FRAME NAME=”n2” SRC=”b2.html”>
<FRAME NAME=”n3” SRC=”b3.html”>
</FRAMESET>
</HTML>
Приклад2
<HTML>
<HEAD>
<TITLE> NNN </TITLE>
</HEAD>
<FRAMESET ROWS=”50,*”>
<FRAME NAME=”n1” SRC=”b1.html”>
<FRAMESET COLS=”150,*”>
<FRAME NAME=”n2”
SRC=”b2.html”>
<FRAME NAME=”n3” SRC=”b3.html”>
</FRAMESET>
</FRAMESET>
</HTML>
Використання дескриптора <NOFRAMES>
Дескриптор <NOFRAMES> дозволяє ввести альтернативну інформацію, яка буде відображена браузером який не здатний працювати з фреймами. В проміжку між дескрипторами <NOFRAMES> </NOFRAMES> можна застосовувати різноманітні конструкції мови HTML.
Приклад3
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<FRAMESET ROWS=”50,100,*”>
<FRAME NAME=”n1” SRC=”b1.html”>
<FRAME NAME=”n2” SRC=”b2.html”>
<FRAME NAME=”n3” SRC=”b3.html”>
<NOFRAMES>
<BODY>
TEXT
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Дескриптор BODY в цьому випадку є необов’язковим.
Якщо браузер підтримує функції роботи з фреймами, то інформація, яка описана дескрипторами </NOFRAMES>, не відтворюєтьяс.
4.1.2 Відтворення об’єкту гіперпосилання у вікні фрейма
Атрибут Target дескриптора <A> в якості місця, в якому повинен відображатися вміст об’єкту гіперпосилання, дозволяє вказати окремий фрейм сторінки.
<HTML>
<HEAD>
<TITLE> NN </TITLE>
</HEAD>
<BODY>
<A HREF=”b4.html” TARGET=”main”> TEXT </A>
</BODY>
Для відображення всіх гіперпосилань сторінки в одному і тому ж фреймі, треба задати в якості значення атрибуту TARGET дескриптора <BASE> найменування потрібного фрейму.
<HTML>
<HEAD>
<TITLE> NN </TITLE>
<BASE TARGET=”main”>
</HEAD>
<BODY>
<BR> <A HREF=”1.html”>TEXT1</A>
<BR> <A HREF=”2.html”>TEXT2</A>
<BR> <A HREF=”3.html”>TEXT3</A>
<BR> <A HREF=”4.html”>TEXT4</A>
для того, щоб відкрити сторінку в повному вікні боаузера треба присвоїти атрибуту TARGET значення _blank (в новому вікні без імені) чи _top (в поточному вікні із заміщенням). В стандарті HTML є ще два значення атрибуту TARGET - _self (відкриває в томуж фреймі де є гіперпосилання) та _parent (гарантує відкриття у фреймі, який належить набору фреймів більш високого рівня)
Полоси прокрутки фреймів додаються за допомогою атрибуту SCROLLING.
<FRAME NAME=”n2” SRC=”b2.html” SCROLLING=”yes”>
FRAME NAME=”n2” SRC=”b2.html” SCROLLING=”no”>
NORESIZE дозволяє визначити не можливість зміни розміру фрейма. По-замовченню – користувачі можуть переміщувати межі фреймів.
<FRAME NAME=”n2” SRC=”b2.html” NORESIZE>
Властивості меж фреймів
<FRAMESET ROWS=”50,*” BORDER=”9” BORDERCOLOR=”#0077CC”>
По замовченню товщина рамки 6 екранних пікселів.
Для того, щоб забрати межі, треба застосувати атрибут FRAMEBORDER дескриптора FRAMESET чи FRAME (для окремого фрейме).
<FRAMESET ROWS=”50,*” FRAMEBORDER=”0” >/
Для того, щоб забрати полоси чистого простору навколо фреймі, які лишилися після укриття границь, в тілі першого дескриптора FRAMESET треба ввести BORDER=”0”.
Для зміни товщини ліній меж фреймів може використовуватися атрибут FRAMESPASING=””. Цей атрибут не належить стандарту HTML.
Атрибути MARGINWIDTH (задає ширину лівого і правого полів) MARGINHIGHT (задає висоту верхнього і нижнього полів) дозволяють змінити розміри полів фрейма.
<FRAME NAME=”n2” SRC=”b2.html” MARGINWIDTH=”50” MARGINHIGHT=”50”>
Треба задавати одночасно ці атрибути, а то браузер може автоматично скоротити розміри тих полів, які не були зазначені, до найменшого з можливих значень.
Вложені набори фреймів.
</HEAD>
<FRAMESET ROWS=”50,*”>
<FRAME NAME=”n1” SRC=”b1.html”>
<FRAMESET COLS=”150,*”>
<FRAME NAME=”n2” SRC=”b2.html”>
<FRAME NAME=”n3” SRC=”b3.html”>
</FRAMESET>
</FRAMESET>
</HTML>
Не треба створювати занадто складні структури.
4.1.3 Створення плаваючих фреймів.
Дескриптор <IFRAME> дозволяє створювати плаваючі фрейми. Плаваючий фрейм – це об‘єкт, який представляє собою частину вмісту Web-сторінки і якийне вимагає (на відміну від традиційних фреймів) побудову окремої Web-сторінки з описом набору фреймів.
Атрибут NAME використовується для задання імені плаваючого фрейму, яке може використовуватися, наприклад, у визначення гіперпосилання з метою відкриття в цьому фреймі відповідної сторінки. Атрибути WIDTH та HEIGHT дають можливість визначити ширину і висоту плаваючого фрейма. Атрибут ALIGN дозволяє встановити ознаку обтікання плаваючого фрейму текстом (значення left і right).
<IFRAME SRC=”1.html” NAME=”prod” WIDHT=”400” HEIGHT=”300” ALIGN=”left”></IFRAME>.
Також використовуються атрибути MARGINWIDTH (задає ширину лівого і правого полів) MARGINHIGHT (задає висоту верхнього і нижнього полів) дозволяють змінити розміри полів фрейма. Полоси прокрутки фреймів задаються за допомогою атрибуту SCROLLING.
Завдання для виконання роботи.
1. Створити сторінку з трьома фреймами.
2. Додати на сторінку можливість виведення інформації, що буде відображена браузером який не здатний працювати з фреймами.
3. Відтворити об’єкт гіперпосилання у вікні фрейма.
4. Відобразити всі гіперпосилання сторінки в одному і тому ж фреймі.
5. Зробити, так щоб всі посилання гіперпосилань відображалися в одному, але іншому, фреймі
6. Додати полоси прокрутки фреймів.
7. Задати параметри для рамок та полів відступу фреймів.
8. Створити плаваючи фрейми.
4.3 Контрольні питання
1. Яка мета створення фреймів?
2. За що відповідає тег <FRAMESET>?
3. За що відповідає тег <FRAME>?
4. Яке використання тегу <NOFRAMES>?
5. Як створити плаваючі фрейми?
Лабораторна робота 5
Тема: Створення форм за допомоги HTML.
Мета: набути навичок cтворення форм за допомоги HTML.
5.1 Теоретичні положення
Загальна структура форми
Форми передають інформацію програмам-обробникам у вигляді пар [ім'я змінної] = [значення змінної]. Імена змінних слід задавати латинськими буквами. Значення змінних сприймаються обработчиками як рядки, навіть якщо вони містять лише цифри. Форма відкривається тегом <FORM> і закінчується міткою </ FORM>. HTML-документ може містити в собі кілька форм, однак форми не повинні знаходитися одна усередині іншої.
Тег <FORM> може містити три атрибути , один з яких є обов'язковим : ACTION – обов'язковий атрибут. Визначає , де знаходиться обробник форми.
METHOD Визначає , яким чином (інакше кажучи , за допомогою якого методу протоколу передачі гіпертекстів ) дані з форми будуть передані обробнику. Допустимі значення : METHOD = POST і METHOD = GET. Якщо значення атрибута не встановлено , за умовчанням передбачається METHOD = GET.
GET : методом " get " HTTP браузер бере значення action , додає ` ? ' до нього , потім приєднує набір даних форми , кодований з використанням типу вмісту " application / x - www - form - urlencoded " . Потім перенаправляє всі за гіперпосиланням на цей URL . У цьому сценарії дані форми обмежені кодами ASCII (не можна використовувати спецсимволи ) і імеетют вельми жорсткі обмеження на обсяг введеної інформації.
POST : методом " post " HTTP браузер проводить транзакцію HTTP " post " ( в тілі HTTP -запиту ) , використовуючи значення атрибута action і повідомлення , створене відповідно до типу вмісту , певним атрибутом enctype.
ENCTYPE Визначає , яким чином дані з форми будуть закодовані для передачі обробнику. Якщо значення атрибута не встановлено , за умовчанням передбачається ENCTYPE = application / x - www - form - urlencoded .
"Кнопка", щоб запустити процес передачі даних з форми на сервер, створюється за допомогою тега.
<INPUT TYPE=submit>виконання==>
Зустрівши таку строчку всередині форми, браузер намалює на екрані кнопку з написом Submit, при натисканні на яку всі наявні у формі дані будуть передані оброблювачу, визначеному в мітці.
Напис на кнопці можна задати будь-яку шляхом введення атрибута VALUE = "[Напис]" наприклад:
<INPUT TYPE=submit VALUE="Отправить!"> виконання==>
Напис, нанесену на кнопку, можна при необхідності передати оброблювачу шляхом введення у визначення кнопки атрибута NAME = [ім'я] наприклад:
<INPUT TYPE=submit NAME=button VALUE="Отправить!"> виконання==>
При натисканні на таку кнопку обробник разом з усіма іншими даними отримає і змінну button зі значенням Відправити! (тобто button = Відправити!, це можна бачити в адресному рядку).
У формі може бути декілька кнопок типу submit з різними іменами та / або значеннями. Оброблювач, таким чином, може діяти по-різному залежно від того, яку саме кнопку submit натиснув користувач.
Існують і інші типи елементів <INPUT>. Кожен елемент <INPUT> повинен включати атрибут NAME = [ім'я], що визначає ім'я змінної, яка буде передана обробнику. Ім'я повинно здаватися тільки латинськими буквами. Більшість елементів <INPUT> повинні включати атрибут VALUE = "[значення]", що визначає значення, яке буде передано оброблювачу під цим ім'ям.
5.1.2Основні типи елементів <INPUT>
TYPE=text
Визначає вікно для введення рядка тексту. Може містити додаткові атрибути SIZE = [число] (ширина поля для введення, в символах) і MAXLENGTH = [число] (максимально допустима довжина вводиться рядки в символах). приклад:
<INPUT TYPE=text SIZE=30 NAME=student VALUE="Вася Пупкин"> ==>
Визначає ширину поля в 30 символів, для введення тексту. За замовчуванням у вікні знаходиться текст Вася Пупкін, який користувач може редагувати. Відредагований (або невідредагований) текст передається обробнику у змінній student (student = содержімое_поля). Спробуйте відредагувати поле.
TYPE = password Визначає вікно для введення пароля. Абсолютно аналогічний типу text, тільки замість символів
тексту, що вводиться показує на екрані зірочки (*), щоб сторонній не міг прочитати. приклад:
<INPUT TYPE=password NAME=pswd SIZE=20 MAXLENGTH=10> ==>
Визначає вікно шириною 20 символів для введення пароля. Максимально допустима довжина пароля - 10 символів. Введений пароль передається обробнику у змінній pswd (pswd = содержімое_поля).
Спробуйте ввести інформацію в поле. TYPE = radio Визначає радіокнопку. Може містити додатковий атрибут checked (показує, що кнопка позначена). У групі радіокнопок з однаковими іменами може бути тільки одна помічена радіокнопка. приклад:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с ==> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с ==> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с ==> 28800 бит/с
Визначає групу з трьох радіокнопок , підписаних 9600 біт / с , 14 400 біт / с і 28800 біт / с. Спочатку позначена перша з кнопок. Якщо користувач не відзначить іншу кнопку , оброблювачу буде передана змінна modem зі значенням 9600 ( modem = 9600 ) . Якщо користувач відзначить другу кнопку , оброблювачу буде передана змінна modem зі значенням 14400 ( modem = 14400 ) .
TYPE = checkbox визначає квадрат , в якому можна зробити позначку . Може містити додатковий атрибут checked (показує , що квадрат позначений ) . На відміну від радіокнопок , в групі квадратів з однаковими іменами може бути кілька помічених квадратів .приклад :
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры ==> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции ==> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей ==> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет ==> Серверы Интернет
Визначає групу з чотирьох квадратів. Спочатку позначені другий і четвертий квадрати. Якщо користувач не справить змін, оброблювачу будуть передана одна змінна comp з двома значеннями (comp = WS і comp = IS).
TYPE = hidden визначає прихований елемент даних, який не видно користувачеві при заповненні форми і передається обробнику без змін. Такий елемент іноді корисно мати у формі, в нього можна заховати від користувача службові дані. приклад:
<INPUT TYPE=hidden NAME=id VALUE="1">
Визначає приховану змінну індексну id, яка передається обробнику зі значенням 1.
TYPE = reset визначає кнопку, при натисканні на яку форма повертається в початковий стан (обнуляється). Оскільки при використанні цієї кнопки дані оброблювачу не передаються, кнопка типу reset може і не мати атрибута name. приклад:
<INPUT TYPE=reset VALUE="Очістіть поля форми">
==>
Визначає кнопку «Очистити поля форми», при натисканні на яку форма повертається в початковий стан.
5.1.3 Елемент <SELECT>:
Меню <SELECT> з n елементів виглядає приблизно так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
OPTION VALUE="[значение n]">[текст n]
</SELECT>
[текст 1] [текст 2] [...] [текст n]
Мітка <SELECT> містить обов'язковий атрибут NAME, що визначає ім'я змінної. Мітка <SELECT> може також містити атрибут MULTIPLE, присутність якого показує, що з меню можна вибрати декілька елементів. Більшість браузерів показують меню <SELECT MULTIPLE> у вигляді вікна, в якому знаходяться елементи меню (висоту вікна у рядках можна задати атрибутом SIZE = [число]). Для вибору декількох значень одночасно утримують кнопку "SHIFT" і вибирають значення мишкою. Атрибут MULTIPLE - максимальна кількість одночасно вибраних елементів.
<SELECT MULTIPLE = 2 SIZE=3 NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
<OPTION VALUE="...">[...]
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
[текст 1] [текст 2] [...] [текст n]
Якщо вибрано одночасно кілька значень, то серверу передаються відповідне обраному кількість параметрів NAME = VALUE з однаковими значеннями NAME, але різними VALUE.
Мітка <OPTION> визначає елемент меню. Обов'язковий атрибут VALUE встановлює значення, яке буде передано оброблювачу, якщо вибраний цей елемент меню. Мітка <OPTION> може включати атрибут selected, що показує, що даний елемент відзначений за замовчуванням. приклад:
<SELECT NAME="selection">
<OPTION VALUE="option1">Вариант 1
<OPTION VALUE="option2" selected>Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
Вариант 1 Вариант 2 Вариант 3
Такий фрагмент визначає меню з трьох елементів: Варіант 1, Варіант 2 і Варіант 3. За умовчанням вибраний елемент Варіант 2. Оброблювачу буде передана змінна selection (selection = ...) значення якої може бути option1, option2 (за замовчуванням) або option3.
5.1.4 Елемент <TEXTAREA>
Приклад:
<TEXTAREA NAME=address ROWS=5 COLS=50>
Поле для ввода большого текста, разбитого на абзацы.
</TEXTAREA>
Поле для ввода большого текста, разбитого на абзацы.
Всі атрибути обов'язкові. Атрибут NAME визначає ім'я, під яким вміст вікна буде передано оброблювачу (у прикладі - address). Атрибут ROWS встановлює висоту вікна у рядках (у прикладі - 5). Атрибут COLS встановлює ширину вікна в символах (у прикладі - 50). Текст, розміщений між мітками <TEXTAREA> і </ TEXTAREA>, являє собою вміст вікна за замовчуванням. Користувач може його відредагувати або просто прибрати.
Завдання для виконання роботи 1
Створіть нову сторінку. Складіть форму-анкету (використовуючи методом POST), що включає наступні поля (усі змінні мають бути, читані, за умовчанням в значеннях мають бути ваші дані) :
· Прізвище
· Ім'я
· По батькові
· E - mail
· Вибір країни (обов'язково випадним SELECT, країн не менше 10-ть)
· Вибір міста (обов'язково за допомогою radio, змінні мають бути однаковими, кількість не менше 5-ти)
· Вибір мови (обов'язково за допомогою checkbox, змінні мають бути різними, кількість не менше 5-ти)
· Вибір професій (обов'язково за допомогою SELECT MULTIPLE, змінні мають бути різними, кількість не менше 10-ти)
· Додаткова інформація (обов'язково за допомогою TEXTAREA)
· У прихованому полі (hidden), передайте змінну student зі значенням "Ваше_ім'я"(student=Ваше_ім'я).
· Кнопка для завантаження інформації на сервер
· Кнопка для очищення форми
Дані з форми повинні посилатися оброблювачу на сервер по URI - /internet/test/form.aspx.
1. На сторінці вкажіть, у вигляді коментарів, для чого призначені використовувані для форм теги і їх властивості (атрибути).
2. Створіть нову сторінку, скопіювавши попередньою сторінку. Змініть метод передачі на GET.
Завдання для виконання роботи 2
1. Создайте новую страницу. Создайте простые поисковые формы к следующим поисковым системам:
www.yahoo.com
www.google.com.ua
www.yandex.ru
www.google.com
www.meta.ua
URL обработчика и переменные посмотрите в исходниках страниц соответствующих поисковых систем.
5.3 Контрольні питання
1. Які основні атрибути тегу <FORM>?
2. Яка відмінність між POST та GET?
3. Які основні елементи INPUT?
4. Опишіть елемент <SELECT>.
5. Як запустити процес передачі даних з форми на сервер?
Лабораторна робота 6
Тема: Розмітка сторінки за допомоги таблиць або блоків (DIV) и CSS.
Мета: набути навичок розмітки веб-сторінок за допомогою таблиць або блоків.
6.1 Теоретичні положення
6.1.1 Розмітка сторінок за допомогою таблиць
Щоб допускати мінімум помилок , треба скористатися чужим досвідом. Найбільший досвід розмітки сторінок накопичений у друкованих видань. Якщо взяти газету , журнал , книгу і т.д. , і уважно подивитися , то ми побачимо такі основні елементи:
· Як правило , використовуються білий фон і чорні літери. Уявіть товсту книгу з білими буквами і чорним фоном , прочитавши , зіпсуєте собі зір.
· Поля (праворуч і ліворуч ) і відступи ( зверху і знизу). Спробуйте роздрукувати текст без полів і відступів , читати буде не зручно.
· Абзаци вирівняні по обом сторонам. Всі рядки починаються по одній лінії , і закінчуються по іншій лінії . " Очі " до цього звикають , і читати ставати зручніше.
· Новий абзац починається з відступом першого рядка , між абзацами пробіл більше , ніж між рядків. Так легше візуально виділити абзаци .
· Застосування " колончатої структури" , особливо помітно в газетах і журналах. Таким чином , можна більш ефективно використовувати всю велику сторінку , розміщуючи маленькі тексти й елементи графіки , не залишаючи "білих плям" . Також текст у вузьких колонках можна читати зверху в низ , що не переміщує " очі " справа на ліво .
Якщо перші пункти зрозуміло як реалізувати , то з колончатой структурою можуть виникнути проблеми.Спочатку в HTML не було передбачено можливості розмітки сторінок , тому для цих цілей стали використовувати таблиці .Якщо подивитися , більшість сайтів зроблено саме з використанням таблиць для розмітки.Макетування сторінок таким способом дозволяє створити поля сторінки , розділити текст на колонки , забарвити окремі області в певний фоновий колір і навіть використовувати локальні фонові зображення.
Для подання інформації у вигляді колонок текст і зображення розміщують всередині елементів таблиці. Всередину комірок можна вкладати додаткові таблиці.Найбільш часто використовувана структура приведена нижче (див. рис. ) :
Рисунок 6.1.Приклад сторінки.
Зараз найпоширеніше дозвіл - 800х600, це означає, що ширину основної таблиці потрібно ставити не більше 750, щоб вона була повністю видно на екрані.
Розміри таблиці можна задати в процентному відношенні до вікна браузера, наприклад 80% (якщо задати 100%, то частина таблиці не буде видно, і не буде полів).
Для прискорення завантаження сторінки роблять з трьох, однакових по ширині, таблиць - верхню, основну і нижню. Також це допомагає підтримувати загальний стиль всього сайту, коли верхня частина і нижня повторюється на всіх сторінках.
Недоліки використання таблиць:
• "Повільне завантаження". Поки вся таблиці не завантажиться, інформація на екрані не з'явиться.
• Зайвий код. Доводиться створювати багато осередків і рядків, які в загальному-то, не потрібні.
• Відсутність можливості з точністю до пікселів розташувати елемент на екрані.
• Відсутність можливості "насунути" один елемент на інший.
• Відсутність можливості керувати відображенням елементів (при переповненні, таблиця просто збільшується в розмірах).
6.1.2 Розмітка сторінок за допомогою блоків (DIV) і CSS
Для чого це потрібно?
Недоліки використання таблиць:
•"Повільне завантаження". Поки вся таблиці не завантажиться, інформація на екрані не з'явиться.
•Зайвий код. Доводиться створювати багато осередків і рядків, які, загалом-то, не потрібні.
•Відсутність можливості з точністю до пікселів розташувати елемент на екрані.
•Відсутність можливості "насунути" один елемент на інший.
•Відсутність можливості керувати відображенням елементів (при переповнення, таблиця просто збільшується в розмірах). Ці проблеми можна вирішити за допомогою CSS і <DIV>.
Як це робиться ?
Тег <DIV> - служить для групування елементів у блок. До згрупованим елементів можна застосувати стилі. Подивимося на прикладах, як це робиться:
Приклади. Виділення блоку бордюром
Кордон можна легко розмістити навколо заголовка, списку, абзацу або їх групи, помістивши їх в елемент div.
Прописуємо стилі для цього блоку
Це можна використовувати з розміткою наступним чином:
<div style="border-color:#FF00FF; border-style:dotted; ">
Вміст цього елемента DIV буде укладено в переривчасту рамку.
</ div>
<div style="border:15px double #008000; ">
Вміст цього елемента DIV буде укладено в суцільну рамку шириною 15 пікселів.
</ div>
<div style="border-style: outset; border-color: #FF0000">
Вміст цього елемента DIV буде укладено в таку рамку.
</ div>
<div style="border-right: 10px solid #00FF00; border-bottom: 10px solid #00FF00">
Вміст цього елемента DIV буде укладено в таку рамку.
</ div>
<div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00">
Вміст цього елемента DIV буде укладено в таку рамку.
</ div>
Приклад . Виділення блоку кольором фону
<div style="background-color: #00FFFF">
Вміст цього елемента DIV буде виділено таким кольором.
</div>
Приклад . Позиціонування і завдання розмірів
<div style="background-color: #AAAAFF">
Вміст цього елемента DIV буде позиціонуватися тут.
</div>
<div style="float: left; width: 200; height: 200; background-color: #00FFFF">
Вміст цього елемента DIV буде позиціонуватися тут.
</div>
<div style="float: right; width: 200; height: 200; background-color: #FFFF00">
Вміст цього елемента DIV буде позиціонуватися тут.
</div>
<div style="width: 200; height: 200; position: relative; left: 20; background-color: #0FFD02">
Вміст цього елемента DIV буде позиціонуватися тут.
</div>
<div style="background-color: #FCC403">
Вміст цього елемента DIV буде позиціонуватися тут.
</div>
Так виглядає на екрані
Приклад. Позиціонування в 2,5 мірному вимірі Порядок накладення (перекриття) блоків визначається атрибутом z-index.
Майже 3D
Код цього прикладу :
<div style="position: relative; width: 200; height: 200; z-index: 0; background-color: #FFFF00">
Блок - 1
</ div >
<div style="position: relative; width: 200; height: 200; left: 100; z-index: 1; top: -100; background-color: #00FFFF">
Блок - 2
</ div >
<div style="position: relative; left: 220; top: -400; width: 200; height: 200; z-index: 2; background-color: #00FF00">
Блок - 3
</ div >
<div style="position: relative; width: 750; height: 20; z-index: 1; top: -580; background-color: #FE76AF">
Блок - 4
</ div >
<div style="position: relative; top: -600; z-index: 3; left: 100">
майже 3D
</ div >
Приклади . Управління переповненням і видимістю .
При переповненні наступного блоку :
<div style="width: 200; height: 200; background-color: #00FFFF">
</ div >
блок буде збільшуватися (тобто також як і таблиця ) .
переповненняяяяяяяяяяяяяяяяяяяяяя переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення
При переповненні наступного блоку :
<div style="overflow: auto; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не буде збільшуватися , інформацію можна переглянути за допомогою прокрутки
переповненняяяяяяяяяяяяяяяяяяяяяя переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення переповнення
При переповненні наступного блоку :
<div style="overflow: hidden; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не буде збільшуватися , інформація, що не помістилися в блок, що не буде відображена
6.1.3 Праця з зовнішнім CSS
Використовуйте будь-який редактор зображень для того, щоб намалювати наступний шаблон:
Крок № 1 Код для даного шаблону повинен виглядати так:
<html>
<head>
<title>
</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Крок № 2 - Посилання на таблицю стилів
У таблиці стилів ми визначаємо елементи дизайну сторінки. Можна створити як внутрішню таблицю стилів, так і зовнішню
Якщо Ви перегляньте Вашу сторінку в браузері зараз - нічого не з'явиться. Все тому що ми не надали нашим тегам ніякого кольору і форми. І оскільки наш CSS буде зовнішнім, першим ділом Вам необхідно переконатися в тому, що на сторінці є посилання на таблицю стилів.
Додайте наступний код між <head> </ head>:
<link rel="stylesheet" type="text/css" href="style.css" />
Крок № 3 - Створення CSS
Синтаксис CSS складається з селектора , властивості і значення . Селектор - це тег , який необхідно оформити в дизайні , властивість - тип атрибута , який Ви хочете додати , значення - кількісний вимір властивості .Селектор , крім тегу body , записується в CSS починаючи з " # " або " . " . "#" Визначає ID , а " . " (точка ) визначає class селектора. Усередині селектора може знаходитися безліч властивостей і всі вони повинні бути обрамлені {} .
# selector {
property : value ;
property : value ;
property : value ;
}
Нам необхідно оформити наступні теги за допомогою CSS:
* body
* wrapper
* header
* navigation
* menu
* content
* footer
6.1.4 Властивості і можливі значення в CSS
Властивість " background " ( фонове зображення) може задавати зображення або колір , або і те й інше . Для показу зображення , значення має складатися з шляху до зображення . Для визначення кольору використовується шістнадцятковий код .
Властивість " color " використовується для визначення кольору селектора. Значення записуються у вигляді шістнадцятирічного коду (приклад : # FFFFFF для білого) .
Властивість " font - family " дозволяє визначити шрифт , який буде використовуватися. Нормою є включення як мінімум 3 -х типів шрифтів. Це робиться на випадок , якщо браузер не може відобразити перший шрифт , буде використовуватися другий і т.д. (приклад: Trebuchet MS , Arial , Times New Roman )
Властивість " font - size " визначає розмір шрифту і має значення в пікселях .Властивість " margin " використовується для визначення позиції селектора. Значення задають відстань сторін селектора до краю вікна браузера в наступному порядку: top , left , bottom , right . Якщо нам необхідно розмістити сторінку по центру , ми пишемо " 0px auto 0px " . Вказівка усіх чотирьох сторін не є обов'язковим.
Властивість " width " задає бажану ширину в пікселях будь-якого селектора.
Властивість " height " - висота в пікселях .
Властивість " float " дозволяє нам позиціонувати елементи всередині селекторів , в більшості випадків справа або зліва .
Для створення CSS файлу відкрийте свій улюблений текстовий редактор і збережіть новий документ як style.css в папці з сторінками сайту. Додайте наступний код:
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#wrapper {
background: #FFFFFF;
margin: 60px auto;
width: 900px;
height: 1024px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 624px;
}
#content {
background: #d2d0d2;
width: 900px;
height: 624px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Завдання для виконання роботи 1
1 Створіть три сторінки за попередніми розділами.
Завдання для виконання роботи 2
1.Створіть сторінку відповідно до отриманих знань. Сторінка повинна містити не менше 4 блоків. Блоки обов'язково мають бути розділені порожніми осередками розміром 3-30 пікселів, бордюри мають бути не видимими. Верхня і нижня частина мають бути зроблені як окремі таблиці, щоб їх можна було вставляти і на інших сторінках.
2. Застосуйте на свій смак фоновий колір осередків або фоновий малюнок осередків.
3. Не забудьте також зробити посилання на першу сторінку.
4. В тексті сторінки вкажіть, у вигляді коментарів, початок кожного блоку і який це блок (правий, лівий, другий згори і так далі).
Завдання для виконання роботи 3
1. Змініть створену сторінку з застосуванням блоків та CSS ( з та без зовнішнього CSS).
2. Додайте на сторінку коллаж з малюнків або фотографій (не менше 5-ти) застосував 2,5 вимірне позицювання.
3. В коментарях поясніть властивості блоків.
6.3Контрольні питання
1. Які недоліки використання таблиць?
2. Що таке CSS?
3. Опишіть правила застосування CSS.
4. Яке використання тегу <DIV>?
5. Яке використання тегу <SPAN>?
Лабораторна робота 7
Тема: Створення шаблону Web-сайту засобами растрової графіки
Мета: Під час даної лабораторної роботи буде розглянуто, як:
• Створити шаблон сайту;
• Створити Web-публікацію.
Технічне та програмне забезпечення: текстовий редактор Microsoft Word, графічний редактор Adobe Photoshop, Adobe ImageReady
7.1 Теоретичні положення
7.1.1 Створення макету сайту: спосіб 1.
1.Створіть полотно розміром 800х600 пікселів.
2. Протягнете кілька напрямних , щоб всі частини дизайну були на своїх місцях.
B меню View треба поставити галочку навпроти команди Rulers (комбінація клавіш Ctrl + R). B цьому випадку з боків на екрані будуть відображені лінійки. Наведіть на направляючу покажчик миші і , утримуючи ліву кнопку миші , перетягніть цю направляючу на потрібне місце в зображенні. Підкоригувати розташування вже створеної направляючої можна c допомогою інструменту Move. Для видалення зайвих напрямних досить просто перетягнути їх назад на лінейкy .
Ви можете налаштувати параметри сітки за допомогою команди
Edit > Preferences > Guides & Grid (Правка > Предпочтения > Направляющие и сетка);
3. Створіть новий шар.
4.Встановіть наступні кольори для вашого фону:
5.Застосуйте градієнт для вашої сторінки, утримуючи клавішу Shift
6. Перенесіть зображення (один з файлів 00000032.jpg, 898e1f1db03b.jpg, 93834_odenwald_achatschnecke_2.jpg, 1197930006.jpg, acze.jpg, untitled.jpg) на робочий документ і подгоните розмір.
7. А тепер зробіть так, щоб зображення плавно переходило в фон. Натисніть на іконку зліва, щоб додати маску.
8.Виберіть кисть (soft!) і встановіть 100 пікселів.
9.Установіте колір переднього плану чорним і починайте зафарбовувати краї зображення, тим самим як би зливаючи фон і саме зображення.
10.Зафарбовуйте до тих пір, поки ви не будете задоволені результатом: перехід повинен виглядати м'яко.
11. Нарешті перейдіть на screen режим і встановіть прозорість до 49% (в моєму випадку це 95% інакше зовсім не буде видно малюнка).
12. Тепер зображення повинне максимально злитися з фоном.
7.1.2 Додавання елементів дизайну
1.Виберете сподобався Вам шрифт і напишіть слово ACHATINA, а потім поверніть його проти годинникової стрілки.
2.Встановіть Ваше лого в лівому верхньому кутку.
3. Створіть шар під назвою Lines (Лінії) і додайте дві лінії як показано на малюнку.
4. Час для навігації. За допомогою інструменту rectangular marquee виділіть ту частину, яка показана на малюнку і залийте її обраним Вам кольором.
5. Додайте назву посилань. Кожен текст посилання повинен розташовуватися на окремому шарі.
7.1.3 Ефект Rollover. Підготовка.
1.А тепер ми будемо застосовувати ефект Rollover до наших посиланнях. Натисніть два рази на будь-якому з шарі (де Ви збираєтеся встановлювати посилання) і перед Вам відкриється вікно,
2.Тепер можна вибрати такі ефекти: Drop Shadow, Outer Glow, Bevel and Emboss, Color Overlay. Експериментуйте з налаштуваннями - у мене вийшло ось що:
3. Потім збережіть як New Style і приминить даний стиль ко іншим посиланнях.
