1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку

Для того, щоб знайдена інформація дійсно відображала реальний стан справ, пошук повинний задовольняти наступні критерії: . повнота охоплення ресурсів;

вірогідність інформації;

висока швидкість проведення пошуку.

Контроль повноти охоплення ресурсів - якщо необхідно мати

повне уявлення про предмет пошуку і стан справ по визначеному

питанню, краще не обмежуватися використанням тільки однієї пошукової

машини Ійг' переглядом одного каталогу. Для проведення

повномасштабного збору інформації необхідно працювати з декількома

каталогами, пошуковими машинами, базами даних, регіональними

телеконференціями, електронними дошками оголошень і аркушами

розсилань. ' " . -

Контроль достовірності інформації. Internet містить багато застарілої або недостовірної інформації.. „ В основному, контроль достовірності інформації - це аналітична робота. При цьому важливо зробити, перевірку знайденого фактичного матеріалу, з'ясувати статус документів, одержати інформацію про компетентність автора матеріалу і т.д.

Швидкість здійснення пошуку в Мережі, якщо не брати до уваги технічні характеристики підключення користувача, залежить в основному від двох факторів:

вірного планування пошукової процедури;

досвіду роботи з ресурсом обраного типу.

Особливе значення швидкість проведення пошуку має в тому випадку, коли потрібно знайти інформацію, що часто оновлюєтье*. ,

Результати пошуку. Одержавши потрібну інформацію з мережі, необхідно її перевірити. Якщо це ціни на товари чи послуги

зв'язуються з продавцем і уточнюють їх. Так само перевіряється будь-яка адресна інформація. Аналітичну і статистичну інформацію перевіряють, порівнюючи дані, отримані з декількох джерел.

Якщо передбачається використовувати отриману інформацію для публічного огляду, необхідно записати джерело (адреса в мережі), ім'я автора (чи назву організації) і дату публікації використовуваних зведень. Звертається увага на можливу наявність особливих вказівок щодо дотримання авторських прав.

Необхідно брати до уваги той факт, що якщо є можливість одержати інформацію, то в такий же спосіб її можуть одержати конкуренти.

Основні етапи пошуку інформації представлені у табл. 1. ■

Таблиця 1

Основні етапи процесу пошуку інформації

№ Етап Зміст роботи етапу

Визначення предмета пошуку

Визначаємо, що конкретно нас цікавить.

Складання списку ключових слів

Виявляємо, як може називатися те, що нас цікавить.

Вибір інформаційного простору

Визначаємо, де може знаходитися те, що нас цікавить.

Визначення інструмента для

пошуку

Приймаємо рішення про те, як простіше і швидше

знайти те, що нас цікавить.

Попередній пошук

Пробуємо знайти.

Аналіз отриманої інформації

Дивимося на отримані результати. Якщо це

необхідно (у тому випадку, коли отримані результати

нас не влаштовують), проводимо коректування всіх

попередніх дій.

Додатковий пошук

Шукаємо далі, поки не одержуємо відповідь на своє питання.

Бажано визначити час, протягом якого інформація повинна бути знайдена, оцінити альтернативні способи одержання і ступінь важливості цієї інформації.

Основні методи пошуку в мережі і їх використання

Існує два основних методи пошуку інформації в Internet - з використанням пошукової машини (системи) чи з використанням каталогу. Механізм пошуку в обох випадках практично однаковий. Розходження виникають на етапі складання списку ключових слів. Для пошукової машини - це складання списку ключових слів, а для каталогу на цьому етапі виробляється визначення тематики розділів, у яких може знаходитися необхідна інформація. Приклади пошукових систем та каталогів представлені в додатках 1, 2 відповідно.

Підбір ключових слів. Ефективний пошук інформації, багато в чому залежить від правильного підбору ключових слів. На основі попередньо отриманої інформації про предмет пошуку складається максимально широкий набір ключових слів у виді окремих термінів,

словосполучень, назв і прізвищ, тісно зв'язаних із проблемою, професійної лексики.

Загальні правила формулювання запиту для пошукової машини:

- не задається тільки одне слово. Використовуються цілі фрази, чи, принаймні, кілька слів;

- вказуються слова, що не повинні зустрічатися в шуканих документах. Для цього використовують або знак "-", або ключове слово NOT;

- власні імена, назви компаній, міст, прізвища людей і ін. починаються із великих букв, а всі інші слова пишіть тільки маленькими буквами;

- якщо необхідно знайти фразу цілком - вона записується в лапках ;

- якщо вводиться запит до пошукової машини, що складається з декількох слів, то в результаті одержується список документів, у яких зустрічається хоча б одне слово.

Пошукова машина робить сортування документів за принципом релевантності. При індексації документів пошукові машини вираховують "об'єм" слова на сторінці - співвідношення кількості повторів на сторінці заданого слова до загальної кількості слів на сторінці документа. Якщо задається запит, що складається з декількох слів, то більш релевантними будуть документи, у яких сукупна вага слів буде максимальна. Однак, при підрахунку об'єм не враховується, чи поруч, чи роздільно знаходяться дані слова, і тому немає гарантій, що в перших* документах міститься максимальна' кількість повторень словосполучень. Можливо,! що такого словосполучення там взагалі не буде. Тому, якщо необхідно знайти задане словосполучення, то запит у вікні пошукової машини записується в лапках.

Критерієм правильності вибору ключових слів буде кількість документів, знайдених пошуковою машиною при попередньому пошуку. Якщо воно обчислюється сотнями - то необхідно уточнити запит, ввівши додаткові ключові слова чи скориставшись спеціальними засобами розширеного пошуку. Якщо не знайдено жодного документа - складається список синонімів даного терміна чи перевіряється орфографія.

Вибір пошукових інструментів. Цей етап визначає всю подальшу технологію пошуку - переходити до нього слід тільки після аналізу попередньо отриманої на попередніх етапах інформації.

Пошукові машини. Для пошукової машини головним є релевантність виданих посилань, а на цей показник, крім розміру, впливає структура бази даних і синтаксис мови запитів.

Каталоги. За допомогою каталогів зручно шукати інформацію на загальні теми (природа, мистецтво, комп'ютери, медицина і т.д.). Каталог має рубрикатор. Таким чином, інформація відсортована. При рішенні стандартної пошукової задачі саме каталог, а не пошукова машина виявляються більш прийнятними для початку пошуку.

Багато в чому тип інформаційного ресурсу визначається характером Шуканої інформації:

• адресна інформація - адресні довідники;

t новини - новинні портали й інформаційні агентства, списки розсилань-

• конкретна інформація - пошукові машини;

• загальні зведення-каталоги; ... ■ статистика - сервера статистичних служб, рейтинги; |

• необхідно щось купити - Internet-магазини і дошки оголошень;

• необхідно проконсультуватися - сайти компаній, що спеціалізуються

на даній тематиці і списки розсилань;

- файли доцільно шукати за допомогою FTP-шукача. Наприклад МРЗ

(файли музичних здобутків, записані й оброблені в цифровому

форматі) - за допомогою МРЗ-розвідувача, у випадку пошуку файлів у

запиті вказується найбільш ймовірне ім'я файлу, наприклад

«name.jpg»; • ш%

• дуже рідкісна інформація - необхідно знайти ресурси, присвячені

більш загальній темі. Можливо там будуть розміщені посилання на

необхідні ресурси чи будуть опубліковані необхідні матеріали;

Алгоритм пошуку інформації у пошукових системах. Необхідно

завантажити початкову сторінку пошукової системи або зайти на будь-яку

іншу сторінку, на якій знаходяться поля для введення запиту і кнопка для

початку пошуку. і

Якщо система дозволяє послідовні уточнення області пошуку то можна перейти в розділи, які визначають межі пошуку інформації (наприклад пошук тільки у області науки або пошук серед європейських вузлів Internet). У таких системах запит в головному розділі здійснює іТошук серед всіх вузлів Internet. Якщо, наприклад, перейти в розділ "Новини", то пошук за запитом виконуватиметься тільки серед вузлів присвячених новинам. Таким чином, спочатку визначаються межа в яких слід вести пошук, і після цьоґ# відправляється запит на пошук інформації. Якщо вибрана система пошуку не дозволяє уточнити запит, то ця дія пропускається.

Вводиться запит на пошук відповідно до правил, прийнятих у вибраній системі пошуку. Можливі і складні запити з логічними операціями "І", "АБО", "НІ".

Якщо система пошуку дозволяє, то уточнюються деякі параметри запиту за допомогою додаткових полів, списків, прапорців і перемикачів які можуть знаходитися на сторінці поряд з полем запиту. В більшості випадків уточнення параметрів не потрібне. Натискається кнопка для початку пошуку, і після деякої паузи автоматично відбувається перехід на сторінку із списком документів, що задовольняють запиту.

Лабораторна робота №2 Тема: Структура HTML-документа й елементи розмітки заголовка документа. Теги тіла документу

Мета роботи: Ознайомитись з технологією створення Web-сайтів. Вивчити основні теги мови розмітки гипертексту HTML для створення Web-документу, навчитися форматувати текст, створювати нумеровані та маркеровані списки, таблиці.

Звіт: вказати номер, тему, мету роботи; створити таблицю тегів, що використовувались у роботі; включити тексти створених документів samplel.htm-sample7.htm. Зробити висновки по роботі.

ЗАВДАННЯ

1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 2. Структура HTML-документа й елементи розмітки заголовка документа. ТЕМА 3. Мова розмітки гіпертексту HTML. Теги тіла документу).

2. Перевірте наявність програмного забезпечення, що необхідне для виконання лабораторних робіт: оглядачі Internet Explorer 5.0 або вище, або FireFox, Блокнот або інший текстовий редактор.

3. Створіть файли samplel.htm-sample7.htm.

4. Створіть порівняльну таблицю всіх відомих Вам тегів. Для зручності розташуйте теги у алфавітному порядку. Створена таблиця буде постійно поповнюватись в' процесі вивчення HTML і може бути використана в якості довідкового матеріалу. Фрагмент таблиці тегів представлений у табл. 1.

Таблиця 1 Таблиця тегів

Синтаксис тегів Призначення Атрибути і їх аргументи ~-2-

<TABLE>... </TABLE> <TR> ... </TD> <ТТ»...<ЯТ»

<тй>... <ян>

<CAPTION> Створює таблицю з однією або декількома рядками (блоки <TR>)i стовпцями (блоки TD>). За бажанням можна додати заголовки стовпців (блоки <ТН>) або заголовок для всієї таблиці (<CAPTION>) ALIGN Установлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). ...

5. Оформіть звіт до лабораторної роботи. Захистіть роботу.

або

Хід роботи Приклад 1. У текстовому редакторі, наприклад WordPad Notepade (Блокнот) створіть простий HTML-документ samplel.htm:

<html>

<head>

<title>

Приклад 1

</title> </head> <body>

<.ні> ;'

Початок! •■'' '", '.,

</Н1> . <Р>

Це найпростіший приклад HTML-документа.

</Р> <Р> Цей файл samplel.htm може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл-Сохранить). Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі. </Р> </body> </html>

Для зручності читання були введені абзаци, але у HTML це не обов'язково. Оглядачі ігнорують символи кінця рідку і пропуски у HTML-файлах. Змініть samplel.htm таким чином ї збережіть зміни:

<html>

<head>

<title>npHKnafl 1 </title>

</head>

<body>

<H1> Початок! </Hl>

<Р>Це найпростіший приклад HTML-документа. </P>

<P> Цей sample.htm-файл може бути одночасно відкритий і у

Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл-Сохранить). Необхідно відкрити sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі.</Р>

</body>

</html> і

Зробіть активним вікно Internet Explorer з відкритим файлом samplel.htm і застосуйте команду Обновить.

75 Чі,

Пріклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:

<htnl> <had>

<^±1е>Приклад 2</title> </tead> <bdy>

<н; АЫОЫ=СЕЫТЕРО>Продовження!</Н1> <Н>Це складніший приклад НТМЪ-документа</Н2> <РАбзац можна.вирівнювати не тільки вліво, </Р> <Р ALIGN=CENTER> але й по центру </Р> <Р ALIGN=IIGHT> або по правому краю.</Р> </lody> </ltml>

Пергляньте файл sample2.htm у оглядачі.

Пріклад 3. У редакторі Notepade створись файл sample3.htm з таким вмістом:

<htnl> •

<h«ad>

<t:tle>Пpиклaд 3</title>

</tead>

<b<dy>

<Н>Деякі положення</Н1>

<Н>Основи роботи</Н2> «ч'лЯІ

<р;НТМЬ-файли розробляються на локальному диску <BR>

Ініими словами, комп'ютер, на якому виконуються роботи*може і не мати підключення до Internet<BR>

* . ltm-файл може бути одночасно відкритий і у Notepac (або WordPad), і у Internet Explorer. <BR>

Дл> того, щоб побачити зміни, що зроблені у

текстоюму редакторі, у Internet Explorer,

застоссвується команда Обновить <BR> </body>

</ltml> .'і,'..;

Пергляньте файл sample3.htm у оглядачі.

Пріклад 4. У редакторі Notepade створіть файл sample4.htm колекції оризонтальних ліній з таким вмістом:

<html>

<head> ■■■■ ■:•*'; Ціі"

<title>Пpиклaд 4</title>

</head>

<body>

<Н1Жолекція горизонтальних ліній</Н1>

<HR SIZE=2 WIDTH=100%XBR>'

<HR SIZE=4 WIDTH=50%XBR>

<HR SIZE=8 WIDTH=25%XBR>

<HR SIZE=16 WIDTH=12%XBR>

</body>

</html>

Перегляньте файл sample4.htm у оглядачі.

Приклад 5. У редакторі Notepade створіть файл sample5.htm з таким вмістом:

<html>

<head> :,

<title>Пpиклaд■5</title>

</head> Щ

<body> ,

<Н1>Шрифтове виділення фрагментів текста</Н1> <Р> Ми знаємо, що фрагменти тексту можна виділяти <В> жирним </В> або <І> нахиленим </І> або <и>підкресленим</и> шрифтами. Крім того, можна

включати в текст фрагменти з фіксованою шириною символу

<ТТ> (імітація друкарської машинки) </ТТХ/Р> <Р>Існує ряд логічних стилів:</Р> <РХЕМ>ЕМ - акцент </EMXBR>

<STRONG>STRONG - сильний акцент </STRONGXBR> <CODE>CODE - для фрагментів вихідних ТЄКСтів</СООЕХВК>

<SAMP>SAMP - взірець </SAMPXBR> <KBD>KBD - клавіатура</КВОХВК> <VAR>VAR - змінна </VARX/P> </body> І </html>

Перегляньте файл sample5.htm у оглядачі

77

Приклад 6. У редакторі Notepade створіть файл sample6.htm з таким вмістом:

<html>

<head>

<т;і1:1е>Приклад 6</title>

</head>

<body>

<НІ>Створення маркірованих списків</Н1>

<UL>

<LI>1 елемент рписку; </LI>

<LI>1 елемент списку; </LI>

<LI>1 елемент списку; </LI>

</UL>

<Н1>Створення нумерованих списків</Н1>

<OL>

<LI>1 елемент списку; </LI>

<LI>2 елемент списку; </LI>

<LI>3 елемент списку; </LI>

</0L>

<ОТ>Списки визначень

<DD>Ueu вид списків складніший, ніж два попередніх, але він

виглядає більш ефектно.

<Р>Списки можна вбудовувати один в другий, але не

слід вбудовувати багато рівнів. </Р>

<Р>Всередині елемента списку може знаходитись

декілька абзаців. Всі абзаци при цьому будуть^ мати однакове

ліве поле. </Р>

</DL>

</body>

</html>

Перегляньте файл sample6.htm у оглядачі.

Приклад 7. У редакторі Notepade створіть файл sample7.htm. Коментарі можна не друкувати.

<HTML>

<HEAD>

<ТІТЬЕ>Приклад 10</TITLE>

</HEAD>

<Н1>Найпростіша таблиця </Н1>

<TABLE B0RDER=1> <!-Це початок таблиці->

<CAPTION> <!-Це заголовок

таблиці->

У таблиці може бути заголовок Ш^'

</CAPTION>

<TR>

<TD>

Перший рядок,

</TD>

<TD>

Перший рядок,

</TD>

</TR>

<TR>

<TD>

Другий рядок,

</TD>

<TD>

Другий рядок,

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Перегляньте sample7.htm у оглядачі.

< !-Це початок першого рядка,->

<!-Це початок першої комірки->

перший стовпчик

< ! -Це кінець першої комірки,->

<!-Це початок другої комірки->

другий стовпчик

<!-Це кінець другої комірки-> <!-Це кінець першого рядка -> <!-Це початок другого рядка-> <!-Це початок першої комірки->

перший стовпчик

<!-Це кінець першої комірки-> <!-Це початок другої комірки->

другий стовпчик

<!

<!-Це кінець другої комірки-> <!-Це кінець другої комірки-> -Це кінець таблиці->

Лабораторна робота №3 Тема: Планування сайту. Розбиття інформації на частини за змістом (на сторінки).

Вивчення мови розмітки гіпертекстів HTML: створення загальних, контекстних посилань та гіпериосилань. Створення HTML форм.

Мета роботи: Ознайомитись з технологією створення веб-сайтів. Вивчення мови розмітки гіпертексту HTML. Навчитися створювати гіпер-, загальні та контекстні посилання. Навчитися додавати форми у HTML-документ

Звіт: накреслена на папері структура сайту. Web-сайт, який буде містити інформації} про студента, звіти до лабораторних робіт та висновки, або сайт за довільною тематикою, узгодженою з викладачем, що відповідає усім вимогам, що встановлені до основного завдання.

Хід роботи Метою Вашої роботи буде створення Web-сайту, який повинен містити:

інформацію про практичний курс дисципліни Основи Web-дизайну на головній сторінці;

інформацію про студента-виконавця (у вигляді резюме); звіти до лабораторних робіт з дисципліни Основи Web-дизайну; висновки про виконання лабораторних робіт.

Сайт повинен складатись щонайменше з 5 сторінок, об'єм HTML коду кожної з них не повинен перевищувати 10 Кб (без врахування графічних зображень) і написаний вручну, мовою HTML. Структура сайту представлена на рис. 1.

Головна S$*4t*§"l

сторінка сайту ^di

(iiidex.htm) <■' '' _^-

Звіт до Висновки

лабораторної (totalhtm)

роботи №2 (Iab2.htm)

Ш

Резюме студента Звіт до

(rez.htJBh|f"*" лабораторної

роботи ,№! (labl.htm)

Рисі.

ЗАВДАННЯ 1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 4. Навігація на Web-сайті. Створення гіпертекстових переходів Засобами HTML. HTML форми.).

2. На папері накресліть простий варіант структури сайта, з указаними основними елеменами - навігаційним меню, місцем дня логотипа, слоганом, навігаційним меню по опорним розділам. Стрілками можна вказувати звязки-посилання на "внутрішні" сторінки сайта, пунктирними лініями - логічні звязки між елементами... Продумайте і вкажіть назви кнопок, заголовків, наявність сервісів... На-цій же структурі схематично вказуються рівні вкладеності (домашня підготовка).

3. Узгодьте структуру проекта з викладачем. Варіант структури проекта повинен мати дату останньої модифікації і підпис викладача.

4. Вміст HTML-документів sample 1 .htm-sample7.htm скопіюйте у один файл і збережіть його під іменем lab2.htm.

5. На початку файлу lab2.htm створіть зміст, що складається з посилань на приклади 1-7 у середині документу. Реалізуйте зручні переходи до прикладів (лаб. 1) за допомогою контекстних посилань в середині документу. Можна також просто створити посилання на документи sample 1 .htm-sample7.htm.

6. Створіть файл labl.htm з результатами виконання першої лабораторної роботи. Продумайте зручні переходи до HTML-документів з оглядом і аналізом знайдених сайтів (лаб.1) за допомогою контекстних посилань в середині документу або загальних посилань між документами.

7. Створіть гіиерпосиланяя на сайти, що аналізувались.

8. Створіть у текстовому редакторі головну сторінку index.htm з інформацією про практичний курс дисципліни Основи Web-дизайну з довільним вмістом.

9. Створити у текстовому редакторі сторінку rez.htm з інформацією про студента у вигляді резюме.

10. Створіть у текстовому редакторі сторінку totaLhtm, яка повинна містити висновки про засвоєння лабораторного курсу. Висновки потрібно завершити після створення сайту.

11. На web-сторінках з резюме, висновками, зі звітами до лабораторних робіт,_ствоглть форми з меню, що випадає (рис.2).

І^Йабораторні роботи- щі

-Лабораторні роботи-Резшме

ШЯШШШШШШ

Лаб. робота N*2

Висновки

$ Рис.2.

Для цього у код сторінок додайте:

'<FORM name=go_razd> <SELECT

onchange=self.location=document.go_razd.go_2.value; name=go_2>

<OPTION value="" selectees-Лабораторні роботи-</OPTION>

<OPTION value=rez.htm>Pe3iOMe</OPTION> <OPTION value=labl.htm^a6. робота №1</0PTI0N> <OPTION value=lab2.htm>fla6. робота №2</0PTI0N> <OPTI0N value=total.htm>BMCHOBKM</OPTION> </SELECT> </FORM>

12. Доповніть таблицю з тегами.

13. Захистіть лабораторну роботу.

Контрольні питання

1. Що таке гіперпосилання?

2. Як створити посилання у середині документа?

3. Як створити загальне посилання на інший документ?

4. Як створити гіперпосилання? '

5. Яке призначення навігаційної панелі? *

6. Які існують основні вимоги до навігації веб-вузла?

7. Як створити форму з меню, що випадає?

Лабораторна робота №4

Тема: Основи Web-дизайну. Кольорове оформленим схоріцйк засобами HTML. Робота з WEB-графікою

Мета роботи: Навчитися використовувати колір і вивчення загальних принципів web-дизайну. Навчитися додавати зображення у HTML-документ

Звіт: покращення оформлення Web-сайту, з інформацією про студента, звіти до лабораторних робіт та висновки.

ЗАВДАННЯ 1. Покращіть ваші сторінки в плані оформлення, використовуючи теоретичний матеріал (ТЕМА 5. Основи Web-дизайну. ТЕМА б. Кольорове оформлення сторінок засобами HTML. Робота з WEB-графікою.). Можна вибрати набори кольорів з додатку 13. Задайте: фон сторінок,

кольори посилань, активних та пройдених посилань; тип та колір тексту.

2. Створіть різнокольорову навігаційну панель (вертикальну або

горизонтальну) та розмістіть її на кожній сторінці сайту. Пам'ятайте, що

посилання на поточну сторінку не створюється.

3. Внизу кожної, створеної Вами сторінки додайте інформацію про Ваш навчальний заклад, про дату останнього оновлення інформації на сайті, своє прізвище та групу. Пам'ятайте, що всі сторінки повинні бути створені у одному стилі.

4. Додайте у Ваш сайт рисунки. Це може бути Ваше фото на сторінці з резюме або будь-яке інше зображення.

5. Доповніть таблицю з тегами.

6. Захистіть лабораторну роботу.

Контрольні питання

1. Охарактеризуйте векторні та растрові зображення.

2. Назвіть основні правила оформлення веб-сторінок.

3. Параметри тегу body.

4. Як розмістити графічні зображення на веб-сторінці.

5. Які формати графічних зображень використовуються для ^ розміщення їх на веб-сторінках.

Лабораторна робота №5 Тема: Використання каскадних таблиць стилів CSS (Cascading Style Slieets).

Мета роботи: Навчитися створювати та використовувати таблиці стилів. Навчитися створювати форми у HTML-документах. Навчитись застосовувати звук у HTML-документах.

Звіт: файл style.css з описом стилів, які використовуються на web-сторінці З висновками про практичний курс web-дизайну, у висновках також визначити переваги та недоліки застосування таблиць стилів CSS; на web-сторінках зі звітами до лабораторних робіт створені форми з меню, що випадає.

Хід роботи

1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 7. Використання каскадних таблиць стилів CSS (Cascading Style Sheets).

2. Відкрийте Notepad та створіть текстовий файл з назвою styles.ess.

3. Враховуючи вже розроблений дизайн, створіть опис стилів елементів, класів, ID, що будуть використовуватись для web-документу.

Таблиця стилів повинна бути оформлена за основними правилами оптимізації:

1) таблиця стилів умовно розбивається на три блоки за селекторами:

елементи, класи, ID;

2) в кожному блоці селектори розташовуються за алфавітним порядком;

3) всі визначення для одного і того же елемента повинні знаходитись в одному місці;

4) селектори елементів рекомендується писати великими буквами.

Розглянемо теоретично приклад створення таблиці стилів. На практиці кожен студент повинен описати свої індивідуальні стилі у відповідності до дизайну, розробленого на попередній роботі. В описах стилів спочатку записується колір і фон, далі шрифт, у кінці поля і відступи. Цифри означають порядковий номер рядка і до самої таблиці стилів не відносяться.

Приклади стилів:

1. A:link {

color: #000;

font-weight: bold}

2. A:visite { color: #555; font-weight: bold}

3. A:active, A':hover { color: #F00; font-weight: bold}

4. BODY {

background-color: #EEE; margin: Opx;

padding: Opx} »к < * \^1

5- H2 { ^;,.~

color: tbrown;

font-family: Verdana, Arial Cyr, Arial;

font-weight: bold;

font-size: 14pt;

margin-left: 20%;

margin-top: 0,5 cm;

text-aiign: left;

}

6. P {

color: #000;

font-family: Times New Roman, serif;

84

text-indent: 1cm;

text-align: justify; '•.»'■■

margin-left: 15%; "'-,л

margin-right: 15%;

margin-top: Ipt;

margin-bottom: lpt; ■■

7. norm {

color: #555;

font: 12px Verdana, Helvetica, sans-serif}

8. #lnk A:link, #lnk A:visited { ' Щ color: #666}

9. #lnk A:active, #lnk A:hover {

color: #F90} 'І'Щ:

Рядки 1-3 визначають правила для посилань, 4 - правило для тіла документа. 5 - правило для заголовка другого рівня. Для даного стилю заголовки • web-сторінок, оформлені тегом <Н2>, будуть відображатися жирним шрифтом Verdana або, якщо цей шрифт не встановлений, шрифтом Arial. Розмір заголовка дорівнює 14 пунктам, колір чорний, відступ ліворуч дорівнює 20 % ширини сторінки, а відступ зверху - 0,5 см. Заголовок буде вирівнюватися по лівому краю сторінки.

6 - правило для оформлення абзацу. У цьому прикладі стилю визначено, що параграфи <Р> на всіх web-сторінках, що використовують цей опис (в нашому випадку на web-сторінці з висновками), будуть відображатися шрифтом Times New Roman або у випадку, якщо цей шрифт на машині не встановлений, іншим шрифтом, але з цього сімейства (serif). Колір шрифту встановлено чорний, вирівнювання - повне (по обидва боки). Також установлені для параграфа ряд значень відступів. У стилі параграфа установлені бічЗЙ відступи в 15 % ширини вікна і вертикальні відступи в 1 пункт.

Завдяки тому, що бічні відступи заголовка і параграфа встановлені у відсотках від ширини вікна оглядача, при перегляді web-сторінок на комп'ютерах з різним дозволом дисплея пропорції і розташування шголовка, основного тексту і відступів будуть збережені.

7-8 - блок контекстних селекторів. 4. Створіть надпис "ВИСНОВКИ", що буде виглядати тривимірним, але не буде використовуватись графіка. При застосуванні CSS можна вказувати значення відступів навколо об'єктів, як негативні величини. Це дозволяє накладати один шар тексту на інший і одержувати цікаві результати.

Створіть опис стилів для двох класів:

. zl {color: silver; margin-top: lOOpx; margin-left: 20%; font-family: Verdana; font-size: 25pt; font-weight: bold;}

.z2 {color: red; margin-top: -45px; margin-left: 20%; font-family: Verdana; font-size: 25pt; font-weight:

bold;}

5. Опишіть стилі для будь-яких інших об'єктів або класів за власним

вибором.

6. Для того щоб «прив'язати» створені стилі до web-сторінки з

висновками, в html-файл totalhtm в розділі <HEAD> помістіть рядок з

посиланням на файл стилів і з указівкою про використання CSS:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

Оскільки файл зі стилями буде знаходитися в тому ж каталозі сервера, що

й інші сторінки, параметр HREF="URL" у нашому випадку буде ім'ям

нашого файлу стилів (styles.css).

6. Для формування тривимірного надпису, що буде заголовком документа

у тілі html-документа запишіть:

<DIV class="zl">BMCHOBKH</DIV> <DIV class="z2">BMCHOBKM</DIV>

7. Використовуючи створену таблицю стилів оформіть web-документ з

висновками про практичний курс web-дизайну, за попередньо виконаними

роботами. У висновках також визначте переваги та недоліки застосування

таблиць стилів CSS,

8. Створіть фоновий звук, який би повторювався 3 рази при відкритті web-

сторінки з висновками. Вставте до сторінки звуковий файл, який би

завантажувався при натасканні на відповідне гіперпосилання.

Internet Explorer мае можливість автоматичного завантаження і

програвання фонового звука у форматах wav, .au, .mid , якщо такі файли

включені до складу Web-документа. до)вдя

Файл у форматі .wav є стандартом звукових файлів у Windows. У цьому форматі представлені всі системні звуки Windows. Формат MIDI був розроблений для управління електронними музичними інструментами і за своєю структурою повністю відрізняється від усіх інших форматів звукових файлів.

Для фонового звука використовується тег <BGSOUND>. Атрибути

тега <BGSOUND>:

- SRC=«URL» вказує місцезнаходження звукового файла;

- LOOP=n визначає кількість повторень звука (при значенні LOOP INFINITE звук відтворюється протягом всього часу, поки відкритий

документ).

Тег <BGSOUND> повинен бути розташований у заголовку документа і мати такий формат:

<BGSOUND SRC=«URL звукового файла» LOOP=infinite>

До HTML-документа можна вставити звуковий файл у вигляді

гіпертекстового посилання, при натисканні на яке завантажується

звуковий файл або відбувається супровід фоновим звуком:

<А HREF=«URL звукового файла»>Для завантаження

звукового файла натиснути т.ут</А>

9. Протестуйте Ваш web-сайт.у оглядачах Internet Explorer і FireFox. При

необхідності виправте помилки.

10. Доповніть таблицю з тегами.

11. Захистіть лабораторну роботу.

Контрольні питания

1. Призначення каскадних таблиць стилів. Переваги використання.

2. Поясніть різницю між способами підтримки стилів документа. Створення таблиць зв'язаних стилів (linked style sheet), глобальних стилів (global style sheet), внутрішніх стилів (inline style).

3. Які основні параметри кольору, фону доступні у стилях HTML?

4. Які основні параметри шрифтів доступні у стилях HTML?

5. Які основні параметри тексту доступні у стилях HTML?

6. Які основні параметри абзацу, як блокового елементу, доступні у стилях HTML? ■

7. Які основні параметри списків доступні у стилях HTML?

8. Які формати використовуються для звукових файлів, що вставляються у HTML-документ?

9. За допомогою якого тега вставляється звуковий файл?

10. Як задається кількість повторень для фонового звука?

Додаток

Додаток 12 Приклад характеристик сайтів та загальних висновків

ХАРАКТЕРИСТИКА Й АНАЛІЗ САЙТА ФАРМАЦЕВТИЧНОЇ КОРПОРАЦІЇ ШРЕЯ КОРПОРЕЙШНЖ

(schreya.ru)

Характеристика інформативності сайта

Ціль: ознайомити відвідувача з історією компанії, її діяльністю, продукцією, що випускається, налагодити контакт із потенційними клієнтами. На сайті представлена інформація:

• логотип, повна і точна назва, поштовий індекс, адреса, юридична адреса, банківські реквізити;

• загальна інформація, історія, адреси електронної пошти структурних підрозділів організації, інформація про філії;

. схема проїзду до офісу, адреса, адреса для креспонденцїї, тел/факс;

• перелік російських та закордонних постачальників, ел. адреси постачальників;

• прайс аркуші;

• пропозиції роботи;

• інформація для потенційних клієнтів:

• медичні новини;

• питання і відповіді форуму.

На сайті міститься повна інформація про корпорацію: адреси, ел. адреси, конт. тел., реквізити. Надано достатньо інформації для ознайомлення з основними напрямками діяльності компанії, назвами продукції, що випускається. Призначення препаратів не описуються, Тому; надана інформація призначена для фахівців, власників аптек, але не джР пацієнтів.

Характеристика дизайну сайта . .

• Фон: одномірний, що розмножується по вертикалі; смуга уздовж

лівого краю вікна служить для розміщення навігаційної панелі,

банерів. Уздовж верхнього краю вікна розташовані логотип і

малюнок.

« Формат основного тексту: шрифт — рублений; накреслення — пряме.

• Формат посилань і заголовків: шрифт - рублений, напівжирний, накреслення - пряме.

• Сумісність кольорів фону і тексту: колір фону - темно-синій, колір тексту - білий (кольори контрастні, текст легко читається).

• Динамічна навігація: до навігаційної панелі застосований анімаційний ефект, що змінює колір кнопки і тексту, коли над нею

проходить курсор мишки. Створено зміст, що розкривається відразу після завантаження. Зміст являє собою список розділів верхнього рівня, кожен пункт у якому у відповідь на натискання кнопки мишки розкривається, виводячи список стосовних до нього підрозділів і зрушуючи вниз розташовані нижче розділи. Розкриття іншого розділу повертає у вихідний стан попередній.

• Колір фону. Для фону використовується три-чотири кольори: насичений темно-синій (на думку психологів синій колір усиляє довіру і налаштовує на співробітництво), два інших синіх кольори, що відрізняються один від одного яскравістю і насиченістю* і бузковий колір для навігаційної панелі.

• Зображення: на всіх сторінках використаний однаковий малюнок, виконаний в одній колірній гамі з фонами сторінки. Зауваження:

1. На головній сторінці основний текст вітання розташований на

фоні малюнка, на якому зображені довільно розкладені

капсули і таблетки. Таке рішення:

- ' ускладнює читання тексту (тим більше, що букви білі, а фон -

синій);

- безладність у розташуванні ліків на фоні не гармоніює зі строгим стилем оформлення самої сторінки;

- бузковий колір навігаційної панелі не гармоніює з кольорами фону.

2. Чорні букви тексту навігаційної панелі різко контрастують з білими буквами основного тексту. Кольори букв (білий і чорний ) - контрастні, а кольори фону (темно-синій і бузковий) - не контрастні з різною яскравістю і насиченістю. Такий контраст не приємний для сприйняття.

3. Логотип оформлений чорним і червоним кольорами, до нього застосований ефект зовнішньої тіні. Сам логотип розташований на темному фоні.

Сайт Закритого Акціонерного Товариства,. «Шрея Корпорейшнл»

заслуговує високу оцінку. На ньому щонайкраще представлена інформація

про організацію. Строгий діловий дизайн, зручна навігація, дружні

звертання до відвідувачів залишають приємні враження і створюють

привабливий образ фірми.

Висновки:

!, Надання інформації про повне ім'я організації, її адресах, реквізитах...,

налаштовує до співробітництва і свідчитї^про те, що для організації

характерний серйозний підхід до роботи.

ХАРАКТЕРИСТИКА Й АНАЛІЗ САЙТА

ФАРМАЦЕВТИЧНОЇ КОМПАНІЇ SCHERING AG (schering.ru)

Характеристика інформативності сайта

Ціль сайта: ознайомити відвідувача з історією компанії її діяльністю,

продукцією, що випускається. На сайті представлена інформація:

• логотип, найменування компанії, загальна інформація, історія, дистриб'ютори; ^ ?"_

• адреси і тел. представництв;

• характеристика розробок за чотирма напрямками: препарати для гінекології, дерматології, терапії важких хронічних захворювань, діагностики. По кожному з напрямків поданий перелік препаратів, що випускаються, їх характеристики (чітко розділена інформація для пацієнтів і фахівців). У розділі гінекологія представлена стаття про планування родини, дані посилання на матеріали даної теми.

• про наявні вакансії;

• реалізовано можливість пошуку по ключовому слову і пошук препаратів в аптеках Москви;

На сайті міститься досить інформації для ознайомлення з компанією,

основними напрямками її діяльності, продукцію, що випускається,

інформація для створення зв'язку з постачальниками і клієнтами.

Характеристика дизайну сайта •

• Фон: одномірний, що розмножується по вертикалі; смуга більш

темного кольору уздовж лівого краю вікна служить для розміщення

логотипа і навігаційної панелі. Уздовж верхнього краю вікна

розташоване зображення по темі сторінки.

» Формат основного тексту: шрифт - рубаний; накреслення - пряме;

• Формат посилань і заголовків: шрифт -.рубаний, напівжирний*! накреслення - пряме, колір відмінний від чорного і різний для кожної сторінки.

• Сполучення кольорів тексту і фону: Колір фону - білий, колір тексту - чорний (на думку психологів чорний колір на білому фоні забезпечують максимальну зручність при тривалому читанні).

• Навігація: До навігаційної панелі застосований ефект, що підкреслює посилання, коли над ним проходить курсор мишки. Створено зміст, що розкривається: відразу після завантаження. Зміст являє собою список розділів верхнього рівня, кожен пункт якого у відповідь на натискання кнопки мишки розкривається і виводить список підрозділів і зрушуючи вниз розташовані наступні розділи. Розкриття іншого розділу, повертає у вихідний стан попередній. Над навігаційної панеллю розміщається пункт із найменуванням відкритого розділу.

• Зображення: зображення різні для кожної сторінки, але виконані в

94

одному стилі і відповідають змісту розділу.

• Особливості дизайну: кольори використовуються не яскраві; посилання, заголовки, елементи зображення виконані одним кольором. Колір панелі відрізняється тільки насиченістю і яскравістю, що забезпечує необхідну контрастність з кольором тексту для зручності читання. Колір панелей різних сторінок відрізняється тоном, яскравість і насиченість приблизно однакові. Зображення підібрані в тон до елементів сторінки. Для кожної сторінки створена своя колірна гама; набір кольорів для всіх елементів ретельно продуманий і збалансований; основний принцип - нічого зайвого. Результат - красиві стильні композиції, зручна навігація. Дизайн ідеальний.

• Якісний корпоративний сайт фармацевтичної компанії Schering AG заслуговує високу оцінку і за інформативністю, і за дизайном. Створює у відвідувача привабливий образ фірми.

РЕЗУЛЬТАТИ АНАЛІЗУ САЙТІВ ФАРМАЦЕВТИЧНИХ ПІДПРИЄМСТВ

У даній роботі аналізувалися сайти:

1. Фармацевтичного предприятия "Schering AG" - www.schering.ru

2. Закритого Акціонерного Товариства "Шрея Корпорэйшнл" -www.schreya.ru

Для кожного сайта представлені характеристики й аналіз інформативності й особливостей дизайну, зроблені зауваження, сформульовані висновки.

Основні висновки, зроблені в результаті аналізу інформативності сайтов

На сайті фармацевтичного підприємства необхідно представити таку інформацію:

1. Про підприємство:

о логотип, повна і Уточна назва, поштовий індекс, адреса,

юридична адреса, банківські реквізити;

о загальну інформацію, історію;

о ШБ керівників структурних підрозділів, їхньої адреси

електронної пошти (у виді табл.),

о схему проїзду до офісу, адреса, адреса для кореспонденції,

тел/файу .

Приклад схеми. Про підприємство: історія, відділи, як нас знайти, філії,

реквізити.

2. Про постачальників, дилерів, дистриб'юторів (у виді таблиці): назви, ел. адреси, посилання.

3. Про вакансії

4. Про продукти і послуги. Приклад схеми. Продукти і послуги: Медичні

Зміст