Informatika / Palaguta_K.O._Movna_model_suchasnogo_informatsiynogo_prostorumetodichkaMetod._vkaz._ta_zavd2011
.pdf
властивість color, яка визначає колір символів, приймає значення navy – темно-синій;
за допомогою властивості font-family встановлюється шрифт для сторінки
Times New Roman, а також з використанням властивості font-size - розмір шрифту 14 пунктів.
7.2.Описується новий клас stZAG, що може використовуватися для різних тегів. Клас stZAG (стиль заголовків) здійснює таке форматування:
розмір шрифту font-size встановлюється 16 пунктів;
шрифт напівжирний font-weight:bold;
стиль шрифту – курсив font-style:italic.
7.3.Створюється клас stROW (стиль інформаційних рядків), що встановлює такі параметри форматування:
font-family:"Arial" – шрифт Arial;
font-weight:bold – напівжирний шрифт;
color:green – колір символів зелений;
letter-spacing:4 відстань між символами 4 (шрифт розріджений). 8. Збережіть таблицю стилів у власній папці з ім’ям mystyle.css.
9. Для застосування таблиці стилів її слід підключити до HTML – документів сайту і скористатися створеними класами. Відредагуйте файл main.htm
втакий спосіб:
<HTML>
<HEAD>
<LINK HREF="mystyle.css" REL="stylesheet" TYPE="text/css"> </HEAD>
<BODY>
<P CLASS=stZAG> ТОВ "Славутич" виробляє побутове обладнання </P>
<BR>
<A HREF="inf.htm" TARGET="TEXT"> загальні відомості </A><BR> <A HREF="prod.htm" TARGET="TEXT"> продукція </A>
</BODY>
</HTML>
Коментар:
9.1.У заголовній частині документа (всередині контейнеру <HEAD>) за допомогою тегу <LINK> підключається таблиця стилів mystyle.css.
9.2.Автоматично для контейнеру <BODY> застосовується стиль, описаний у таблиці стилів mystyle.css.
9.3.До першого параграфу документа застосовується стиль stZAG, визначений як значення атрибуту CLASS.
10.Відредагуйте файл prod.htm таким чином:
<HTML>
<HEAD>
<LINK HREF="mystyle.css" REL="stylesheet" TYPE="text/css"> </HEAD>
<BODY>
21
<P CLASS=stZAG> Наша продукція: </P>
<TABLE BORDER=2 ALIGN=LEFT CELLPADDING=5 CLASS=stRow> <TR ALIGN=CENTER>
<TD>Найменування </TD> <TD> Модель </TD>
<TD> Ціна, грн. </TD></TR>
<TR> <TD> кавоварка </TD> <TD> СІІ-15 </TD> <TD> 425 </TD> </TR> <TR> <TD> кавоварка </TD> <TD> VX-40 </TD> <TD> 700 </TD> </TR> <TR> <TD> тостер </TD> <TD> RoWC-7 </TD> <TD> 350 </TD> </TR> <TR> <TD> сковорідка </TD> <TD> CXZ-321 </TD> <TD> 200 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Коментар:
10.1.До документа за допомогою тегу <LINK> підключається таблиця стилів mystyle.css.
10.2.До першого абзацу застосовується клас stZAG (атрибут CLASS=stZAG). 10.3.До всіх чарунок таблиці використовується клас stRow (атрибут
CLASS=stRow). 11.Відредагуйте також файл inf.htm:
<HTML>
<HEAD>
<LINK HREF="mystyle.css" REL="stylesheet" TYPE="text/css"> </HEAD>
<BODY>
<SPAN CLASS=stZAG> Адреса підприємства: </SPAN>
<SPAN CLASS=stRow>
м.Донецьк, вул.Університетьська, 128 </SPAN> <BR>
<SPAN CLASS=stZAG> Телефони: </SPAN>
<SPAN CLASS=stRow> (062) 335-75-29 </SPAN> <BR> <SPAN CLASS=stZAG>: </SPAN>
<SPAN CLASS=stRow> slavutich@donbas.com </SPAN> <BR> </BODY>
</HTML>
Коментар:
11.1.До документа за допомогою тегу <LINK> підключається таблиця стилів mystyle.css.
11.2.Контейнери <SPAN> виділяють фрагменти документа, до яких застосовуються різні класи стилів. До назв реквізитів (адреса, телефони, e-mail) застосовується стиль заголовків stZAG, до значень реквізитів – клас stRow (стиль інформаційних рядків).
12.За допомогою файлу index.htm розчиніть сайт. Тепер у браузері ІЕ сайт виглядатиме так:
22
або так:
Індивідуальні завдання
за темою «Створення web – сайтів з використанням фреймів, каскадних листів стилів CSS»
Розробити web – сайт, в якому надається інформація про певне підприємство (реальне або уявне) з використанням фреймів, каскадних листів сти-
23
лів CSS, таблиць, списків. Вікно сайту повинно за допомогою фреймів поділятися на такі області:
|
|
|
Назва підприємства |
|
Логотип |
|
|
|
підприємства |
|
|
|
|
|
|
|
|
|
|
|
Меню сайту |
|
Область, у якій виводиться інформація |
|
|
|
відповідно до обраного пункту меню |
|
|
|
|
Меню сайту повинно вміщувати не менше 4 пунктів, серед яких можуть бути, наприклад, такі:
про компанію; продукція; інформація для клієнтів;
організаційна структура; прес – центр; новини; контактна інформація; як нас знайти; вакансії тощо.
|
Варіанти завдання |
Номер |
Завдання |
варіанта |
|
1. |
Підприємство кондитерської промисловості |
2. |
Торговельне підприємство з продажу взуття |
3. |
Аптека |
4. |
Книжковий магазин |
5. |
Комерційний банк |
6. |
Торговельне підприємство з продажу меблів |
7. |
Підприємство харчової промисловості |
8. |
Підприємство оптової торгівлі |
9. |
Ресторан |
10. |
Центр вивчення іноземних мов |
11. |
Торговельне підприємство з продажу одягу |
12. |
Фітнес - центр |
13. |
Торговельне підприємство з продажу автомобілів |
14. |
Підприємство по виробництву побутової техніки |
15. |
Туристична фірма |
16. |
Кінотеатр |
17. |
Ательє |
18. |
Підприємство по продажу музичних і відеозаписів |
19. |
Сільськогосподарське підприємство |
20. |
Торговельне підприємство з продажу косметики |
24
Приклад тесту
за темою «Створення web – сайтів з використанням фреймів, каскадних листів стилів CSS»
1)З якою метою використовуються фрейми?
a)для виведення табличних даних
b)для організації діалогу з користувачем
c)для поділу сторінки на декілька частин з метою структуризації інформації
d)для поділу сторінки на дві частини з метою структуризації інформації
2)Для поділу сторінки на декілька фреймів використовується тег …
a)FRAMESET
b)FRAME
c)LINK
d)ROWS
3)Які атрибути може вміщувати тег FRAME?
a)SRC
b)HREF
c)TARGET
d)NAME
4)Які значення можна використовувати при поділі сторінки на фрейми?
a)40%
b)*
c)?
d)120%
e)200
5)Для переходу по гіперпосиланню до іншого фрейму потрібно …
a)використати тег FRAME
b)звернутися до фрейму за допомогою атрибуту TARGET
c)попередньо привласнити ім’я фрейму (атрибут NAME), звернутися до фрейму за допомогою атрибуту TARGET
d)звернутися до фрейму за допомогою атрибуту NAME
6)Каскадні листи стилів CSS використовуються для …
a)застосування подібних засобів оформлення до різних документів одного сайту
b)швидкого та зручного змінювання зовнішнього вигляду документа
c)зменшення розміру HTML – документів
7)Що таке оголошення згідно синтаксису листа стилю?
a)атрибут форматування і його значення
b)селектор
c)клас
8)Які способи використання таблиць стилів Вам відомі?
a)глобальні зв’язані таблиці стилів
b)локальні таблиці стилів
c)зв’язані таблиці стилів
d)глобальні таблиці стилів
25
9)Які способи визначення стилів коректні?
a)H2.normal { color:black; font-style:normal;}
b).red { color:red }
c)BODY.STL{font-size:xx-large color:blue border-style:double}
d)stblue{color:blue; border-style:solid;}
10)Значення якої властивості слід встановити для того, щоб встановити напівжирний шрифт?
a)font-size
b)font-family
c)font-weight
d)font-style
11)Для чого використовується властивість text-align?
a)для вирівнювання тексту по горизонталі
b)для вирівнювання тексту по вертикалі
c)для зміни регістрів
12)Для підключення зв’язаної таблиці стилів використовується тег …
a)А
b)HREF
c)LINK
13)Яке розширення повинен мати файл з таблицею стилів?
a)css
b)html
c)exe
d)htm
14)Який атрибут використовується для застосування певного стилю до фрагменту документа?
a)STYLE
b)CLASS
c)ID
15)Для чого використовується атрибут STYLE?
a)для створення внутрішніх стилів
b)для застосування певного класу, описаного у зовнішній таблиці стилів
c)для застосування певного стилю, описаного у глобальній таблиці стилів
26
Змістовий модуль 2. Розширювана мова розмітки XML,
обробка XML – документів
Лабораторна робота №3
Тема: Створення XML – документів, опис шаблону документа.
Мета: навчитись створювати XML - документи, описувати шаблони документів DTD у XML – документах, а також у зовнішніх файлах, перевіряти правильність і валідність XML – документів, використовувати таблиці стилів CSS для демонстрації вмісту XML – документів.
Програмне забезпечення: операційна система Windows, браузер Internet Explorer, програма Open XML Editor.
Завдання
1.Виконати практичний приклад створення XML – документа і роботи з ним.
2.Виконати практичну частину лабораторної роботи у відповідності до індивідуального варіанту.
3.Оформити звіт по лабораторній роботі, у якому повинні бути такі
складові:
титульний лист;
роздруковані документи:
a.XML – документ;
b.XML – документ із внутрішнім DTD;
c.XML – документ із зовнішнім DTD;
d.файл зовнішнього шаблону документа;
e.XML – документ з підключеною таблицею стилів у вікні браузера і у вигляді коду;
f.таблиця стилів CSS.
опис процесу перевірки правильності і валідності XML - документа.
4.Підготуватись до тестування за темою з використанням тесту - прикладу.
Приклад роботи з XML – документом
У прикладі розглядається створення і робота з XML - документом, у якому міститься інформація про співробітників підприємства. XML – документ має структуру, подану на рис. 3.1.
1.Завантажте програму Блокнот. У середовищі програми Блокнот введіть такий уміст XML – документа:
<?xml version="1.0" encoding="UTF-8"?> <employees>
<employee sheetnumber="132"> <name><lname>Петренко</lname> <fname>Максим</fname>
27
Співробітники employees
Співробітник 1 |
Співробітник 2 |
СпівробітникN |
employee |
Employee . . . |
Employee . . . |
Атрибут Табельний номер sheetnumber
Ім’я |
Посада |
Освіта |
Оклад |
Кількість дітей |
name |
post |
education |
salary |
children |
Прізвище lname
Ім’я fname
По батькові mname
Рисунок 3.1 – Структура XML – документа – приклада
28
<mname>Іванович</mname></name> <post>директор</post> <education>вище</education> <salary>3000</salary> <children>2</children>
</employee>
<employee sheetnumber="133"> <name><lname>Головченко</lname> <fname>Оксана</fname> <mname>Степанівна</mname></name> <post>головний бухгалтер</post> <education>вище</education> <salary>2500</salary> <children>1</children>
</employee>
</employees>
Коментар:
1.1.Перший рядок документа – оголошення XML – документа. Атрибут version визначає, що документ створено версією 1.0 мови XML, атрибут encoding – що використовується стандарт кодування символів UTF-8.
1.2.Елементи документа визначаються відповідними тегами – іменами елементів. Кореневий елемент документа <employees> вміщує усі підпорядковані елементи <employee>, яким у свою чергу підпорядковуються
елементи <name>, <post>, <education>, <salary>, <children> . Еле-
мент <employee> має атрибут sheetnumber – табельний номер.
1.3.Елементу <name> в свою чергу підпорядковані елементи <lname>, <fname> і <mname>.
2.Збережіть документ у окремій папці з ім’ям employees.xml (обов’язково потрібно визначати тип файлу – всі файли, кодування - UTF-8).
3.Розчиніть XML - документ employees.xml у вікні браузера ІЕ. Документ буде виглядати так:
4.Скопіюйте файл employees.xml у файл з ім’ям employees1.xml у тій самій папці. Для опису шаблону документа DTD всередині XML – документа розчиніть файл employees1.xml у програмі Блокнот або за допомогою команди Вид – Просмотр HTML – кода у програмі ІЕ. Відредагуйте вміст документа в такий спосіб:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE employees [ <!ELEMENT employees (employee+)>
<!ELEMENT employee (name, post, education, salary, children)> <!ATTLIST employee sheetnumber CDATA #REQUIRED> <!ELEMENT name (lname, fname, mname)>
<!ELEMENT lname (#PCDATA)> <!ELEMENT fname (#PCDATA)> <!ELEMENT mname (#PCDATA)> <!ELEMENT post (#PCDATA)> <!ELEMENT education (#PCDATA)> <!ELEMENT salary (#PCDATA)> <!ELEMENT children (#PCDATA)> ]>
<employees>
<employee sheetnumber="132"> <name><lname>Петренко</lname> <fname>Максим</fname> <mname>Іванович</mname></name>
30