Методичні рекомендації з дисципліни Основи Веб–дизайну, НУДПСУ
« Назад
Тема 2.3. Основи Веб–дизайну
Самостійна робота Поняття про інтерактивні веб–сторінки та засоби розробки сценаріїв. Індивідуальна робота Розробити приватну веб–сторінку засобами мови HTML і опублікувати її в мережі Інтернет. 1. Етапи проектування та розробки веб–сайту. Публікації у всесвітній павутині реалізуються у формі Веб–сайтів, які за своєю структурою нагадують журнали, що містять дані, присвяченій деякій темі чи проблемі. Як журнал складається із друкованих сторінок, так і Веб–сайт складається із комп’ютерних Веб–сторінок. Сайт, на відміну від журналу, є інтерактивним засобом подання повідомлень, у яких знаходяться посилання на його основні розділи — Веб–сторінки. Гіперпосилання також існують на інших Веб–сторінках сайта, що забезпечує можливість користувачеві вільно переміщуватися по сайту. Гіпертекст — документ, який містить посилання на інші документи. Веб–сторінки створюються за допомогою або візуальних WYSIWYG–редакторів, або редакторів коду. Найбільш популярними візуальними редакторами Веб–сторінок є Microsoft FrontPage? Adobe PageMill, Macromedia Dream Weaver. Ці програми можуть значно спростити створення HTML–документів. Основним їх недоліком є генерація надлишкового HTML–коду у вигляді зайвих дескрипторів і непотрібних атрибутів. Унаслідок цього сторінка, яка потребує 10 Кб, інколи може займати навіть 100 Кб. Ці редактори, крім того, іноді генерують некоректний код і сторінка, яка правильно відображається в Internet Explorer, може неправильно відображатися в Netscape Navigator. За допомогою редакторів коду створюють якісніші Веб–документи. Процес створення Веб–сайту можна умовно поділити на ряд етапів. Для кожного проекту ці етапи визначаються індивідуально, але в більшості випадків їх можна звести до:
Для створення Веб–сторінки користуються мовою розмітки гіпертексту — мова HTML (Hyper Text Markeup Language). Команди мови HTML називаються тегами. Теги беруться у кутові дужки. Теги бувають одинарними і парними. Документ, виконаний у форматі HTML, називають: HTML–документом, Веб–документом, Веб–сторінкою. Такі сторінки, як правило, мають розширення html або html. Група Веб–сторінок, яка належить одному автору або одному видавцю, і взаємопов’язаних гіперпосиланнями, створюють структуру, що називається Веб–вузлом або Веб–сайтом. Останнім часом з’явився термін — портал, тобто об’єднання кількох тематичних напрямів. Портал надає користувачеві персоналізовану початкову сторінку, безкоштовні послуги електронної пошти, новини і розважальні послуги, а також пошуковий механізм. Банер (від англ. вanner — вивіска, транспарант) — це невелике графічне зображення, яке розміщується на популярних і найбільш відвідуваних сайтах, забезпечують доступ до рекламної інформації. Фактично банер є гіперпосиланням, скориставшись яким можна потрапити на рекламний сайт. Кожна HTML–сторінка має свою унікальну URL–адресу, наприклад: http://www.rambler.ru/bisness/works.htm
2. Структура веб–сторінки та її об’єкти Всі документи HTML мають одну і ту ж структуру, яка визначається фіксованим набором тегів структури. Документ HTML завжди повинен починатися з подвійного тегу < HTML > тег означення HTML–файлу: <HTML> ... </HTML>. Усередині документу виділяють два основні розділи: розділ заголовку і тіло документу, які йдуть саме в такому порядку. <HEAD>...</HEAD> створюють заголовок документа. Основною частиною заголовка документа є заголовок Windows–вікна, який задають усередині парного тегу <TITLE>...</TITLE>. Основний зміст розміщується в тілі документу, яке обмежується парним тегом <BODY параметри>...</ВОDY> тобто програмують те, що має відображатися у вікні. Основні параметри тега BODY: BACKGROUND = "шлях до графічного файлу“ — задає картинку для фону; BGCOLOR = "blue" — задає колір фону (у даному разі блакитний), якщо не використовується картинка як фон; TEXT = "red" — задає колір тексту (у даному разі червоний) на сторінці. Тег <!- - текст --> позначає коментар. Текст усередині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст</COMMENT>. <HTML> <HEAD> моя перша Веб–сторінка <TITLE> Про себе докладніше </TITLE> </HEAD> <BODY> (текст — автобіографічна довідка про себе) </BODY> </HTML>
3. Основні теги мови HTML. Оформлення тексту, створення заголовківодинарні теги для розміщення тексту: <Р> — цей тег означає початок нового абзацу, його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю абзацу без відступу першого рядка. <BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка. <HR> — буде проведена горизонтальна лінія. парні теги форматування тексту: <В> текст </В> — жирний шрифт тексту; <І> текст </І> — шрифт–курсив; <U> текст </U> — підкреслений шрифт; <SUB> текст </SUB> — нижній індекс, наприклад, Н20; <SUP> текст </SUP> — верхній індекс; <BIG> текст </ВIG> — великий шрифт; <SMALL> текст </SMALL> — малий шрифт; <ЕМ> текст </ЕМ> — виділений курсивом текст (те саме, що тег І); <В> <І> текст </І></В> — жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Теги заголовків:
Заголовок за замовчуванням вирівнюється по лівому краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання: <CENTER> елемент </CENTER>— вирівнювання по центру; <RIGHT> елемент </RIGHT>— вирівнювання по правому краю. Тег задання параметрів шрифту FONT Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами FACE—тип шрифту, SIZE — розмір шрифту, COLOR – колір шрифту, ALIGN — тип вирівнювання наприклад, <FONT FACE = "Monotype Corsiva, Verdana, Courier" SIZE = +2 COLOR = "green"> текст </FONT>. Якщо на комп'ютері клієнта встановлено шрифт Monotype Corsiva, то він буде застосований до даного тексту, якщо цей шрифт відсутній — браузер застосує шрифт Verdana, далі — Courier, інакше — деякий стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде зелений.Імена основних кольорів мовою HTML наведені у табл. 2.
Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.
4. Створення списків, таблиць, графічних об’єктівСтворення списків та їх дизайн Є три типи списків: маркований, нумерований, означення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад, <LН> Це заголовок списку </LН>. Маркований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LІ>, наприклад, так: <LH> Мої улюблені предмети: </LH> <UL> <LI> економічна інформатика <LI> англійська мова <LI> вища математика </UL> На екрані отримаємо: Мої улюблені предмети:
Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так: <LH> Мої улюблені предмети:</LH> <OL TYPE="1"> <LI> економічна інформатика <LI> англійська мова <LI> вища математика </OL> На екрані отримаємо: Мої улюблені предмети:
Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" — латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) літерами. Створення таблиць та їх дизайн Таблиці створюють за допомогою таких тегів: <TABLE параметри> <ТС> Заголовок таблиці </ТС> Теги рядків і комірок </TABLE> Для заповнення комірок таблиці використовують такі парні теги (зауважимо, що закриваючі теги можна опускати): <TR>...</TR> — формують рядок таблиці; <ТН> текст </ТН> — формують комірку — заголовок рядка чи стовпця; <ТD> текст </ТD> — формують текст кожної комірки. Заголовки рядків та стовпців виводитимуться жирнішим шрифтом. Щоб об’єднати у рядку декілька послідовних комірок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN=2. Щоб об’єднати у стовпці дві комірки в одну, використовують параметр COLSPAN=2. Колір рамки таблиці задають параметром BORDERCOLOR= "колір рамки", а колір фона комірок — параметром BGCOLOR="колір фону". Товщину рамки в пікселах задають параметром BORDER="товщина рамки, наприклад, 3". Якщо значенням параметра є число нуль або параметра немає, то рамка буде невидимою. <CENTER> <TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" > <CENTER><TC> Моя успішність:</TC></CENTER> <TR BGCOLOR="white"> <TH> Назва дисципліни</TH> <TH>І семестр </TH> <TH>II семестр </TH> </TR> <TR> <TH>Економічна інформатика </TH> <TD ALIGN="center">5</TD> <TD ALIGN="center">4</TD></TR> <TR> <TH>Англійська мова</ТН> <TD ALIGN="center">4</TD> <TD ALIGN="center">5</TD></TR> <TR> <TH>Вища математика</TH> <TD ALIGN="center">4</TD> <TD ALIGN="center">5</TD></TR> </TABLE></CENTER><HR> Вирівнювання елементів За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у комірках таблиці, браузер вирівнює по лівому краю вікна документа чи коміркики. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати по центру екрана чи по правому краю. Таблиці вирівнюють відносно положення на екрані або відносно тексту, який її оточує. Текст у комірках таблиці вирівнюють по центру, по лівому чи правому краю у горизонтальному чи вертикальному напрямках. Для цього до об’єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або в тегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" — зліва, "center" — по центру, "right" — справа, "top" — вгорі, "middle" — посередині, "bottom" — внизу. Останні три значення може мати також параметр VALIGN. Для вдалого розташування таблиць чи рисунків варто поекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселах або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці у півсторінки у горизонтальному напрямку. Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії визначає червону лінію завтовшки ЗО пікселів. Додання графічних та відеофайлів Графічні зображення (фотографії, картинки тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web–сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами: <IMG SRC="адреса графічного файлу" ALT= "альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200> Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселах або відсотках сторінки. Зображення можна подати у рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселах". Праворуч і ліворуч від картинки, яку обтікає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів". За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web–сторінки: <IMG DYNSRC="адреса відео–файлу">. Адреси файлів Для доступу до файлів на локальному диску використовують протокол доступу file: “file:///диск:/ шлях до файлу". Наприклад, "file:///d:/МоиВеб/page1.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/Рисунки/Саша.bmp". Якщо графічні чи інші файли є в тому ж каталозі, що і головний html–файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "Саша.bmp". Якщо файл є в деякому каталозі images, але в тому ж надкаталозі, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати, наприклад, такий вигляд: <IMG SRC="MyFoto.bmp" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200> Додання гіперпосилань Гіперпосилання є двох різновидів: 1) на файл; 2) на деяке місце на даній сторінці: початок сторінки (top), кінець сторінки (bottom), на позначений текст. Гіперпосилання вставляють за допомогою парного тега Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо випадок, коли гіперпосиланням є текст. Нехай фразу "Про себе" з файлу file1.htm потрібно зробити гіперпосиланням на файл "file2.htm", що містить додаткові відомості. Це можна зробити так: <А HREF = "file2.htm"> Про себе докладніше </А>. У результаті цього на Web–сторінці слова Про себе докладніше буде підкреслене і зображене іншим кольором. Колір Гіперпосилання визначається у тезі BODY параметром LINK = "колір". <A HREF = "file3.htm"> Про друзів та захоплення </A> <P> <HR>. Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб Ваша фотографія , що є у файлі з ім’ям MyFoto.gif, була в рамці й стала гіперпосиланням на файл file2.htm, пишуть так: <A HREF = “file2.htm”> <IMG SRC = “MyFoto.gif” BORDER =4> </A> Будь–яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі. Розглянемо другий тип гіперпосилань — посилання в межах сторінки (їх ще називають закладками). Якщо потрібно з деякого місця веб–сторінки перейти до її початку, то в тексті коду в цьому місці потрібно вставити <А HREF="#top'' > текст гіперпосилання </А>. Аналогічно при необхідності переходу в кінець веб–сторінки використовують тег: вставити <А HREF="#bottom'' > текст гіперпосилання </А>. Для переходу в деяке інше місце, вводять тег, який називається якорем. Якір можна „кинути” в будь–якому місці тексту за допомогою того ж тега <А>...</А> з параметром NAME="#мояпозначка">: <А NAME="#мояпозначка"> Як я вчусь</А>. Далі на сторінці розміщують гіперпосилання на створені позначки (якори): <А HREF="#top" або "#bottom'' або "#мояпозначка"> текст гіперпосилання </А>. Якщо одна сторінка займає декілька екранів, то в кінці сторінки доречно вставити гіперпосилання для переходу на її початок, наприклад, так: <А HREF=="#top" > на початок </А> .
6. Динамічні ефекти та засоби їх створенняДинамічними називаються ефекти, коли графічні зображення на Web–сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст «біжить» уздовж екрана тощо. Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT ="висота в пікселах" і фон BGCOLOR = "колір фону". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме: <MARQUEE BGCOLOR="aqua" HEIGHT = 40> Особиста сторінка Ваше прізвище та ім’я</ MARQUEE>. Зауваження. За допомогою цього тега можна заставити рухатись і графічний об’єкт. Текст "Особиста сторінка Ваше прізвище та ім’я" буде пробігати у смузі справа наліво, заходитиме за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік. Обмеження кількості проходів задається параметром LOOP=число, де цифра — кількість проходів. Смугу можна центрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT=число, де число – величина швидкості руху, де конкретне значення вибирають з діапазону від 1 (повільно) до 10 (швидко).
7. Фрейми Фрейм — це частина вікна браузера, може бути оформлена рамкою, в якій можна переглядатиокремо від інших частин певні веб–сторінки. Поділ вікна браузера на фрейми виконується за допомогою спеціальних тегів. Парний тег <FRAMESET параметри > …</FRAMESET> задає кількість вертикальних чи горизонтальних фреймів та їх розмір. Одинарний тег <FRAME параметри> визначає, що буде відображатись у даному фреймі і яке ім’я матиме фрейм (хоча ім’я можна в деяких випадках не задавати). Створення фреймової структури вікна браузера зазвичай виконується в окремому файлі і код дещо відрізняється від раніше розглянутих кодів веб–сторінок. 1) Створюються три вертикальні фрейми: 1 — 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="А.HTMl"; 2 — 25% від горизонтального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 — решта 50 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="С.HTMl". Код створення такої структури має вигляд: <frameset cols="25%, 25%,*" > <frame src="a.htm" name="left”> <frame src="b.htm" name="center"> <frame src="с.htm" name="right"> </frameset>. 2) Створюються один горизонтальний фрейм і два вертикальні фрейми: 1 — 10% від вертикального розміру вікна браузера з ім’ям "center”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="А.HTM"; 2 — 25% від горизонтального розміру вікна браузера з ім’ям "left”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="В.HTM"; 3 — решта 75 % від горизонтального розміру вікна браузера з ім’ям "right”, в ньому буде відображатись веб–сторінка, код якої міститься у файлі з ім’ям ="С.HTM". Код створення такої структури має вигляд: <frameset rows="10%, *" > <frame src="a.htm" name="center”> <frameset cols="25%, *" > <frame src="b.htm" name="left"> <frame src="с.htm" name="right"> </frameset></frameset> З повагою ІЦ "KURSOVIKS"! |
||||||||||||||||||||||||||||||||||||||||||||