Ема. Створення Web-сайтів з використанням мови HTML. Використання фреймів та каскадних листів стилів CSS.
Мета. Оволодіти навичками для створення Web-сайтів з використанням мови HTML. Розглянути теги, які призначені створення фреймів та каскадних листів стилів CSS.
Програмне забезпечення.Операційна система Windows, браузер Internet Explorer.
Фрейми
Фрейми дозволяють розбивати вікно перегляду браузера на декілька прямокутних частин, що розташовуються поруч один з одним. У кожну з цих частин можна завантажити окремий Html-документ, перегляд якого здійснюється незалежно від інших.
Між фреймами при необхідності можна організувати взаємодію, що полягає у тому, що вибір посилання в одному із фреймів може привести до завантаження документа в інший фрейм.
При створенні сторінок із фреймами розробляються декілька Html-файлів. Документи розкладки (layout), використовуються для створення структури Web-сторінок, тобто розподілу їх на кілька частин. Документи змісту (content) призначені для заповнення інформацією кожної з частин. Розмір фреймів задається або абсолютно, в пікселях, або відносно у відсотках.
Це єдиний випадок, коли в html-документі відсутні теги <body></body>. Замість них використовуються теги <frameset></frameset>, які й указують браузеру розбити вікно на кілька областей – фреймів.
Сфера застосування фреймів:
ü при необхідності організувати управління завантаженням документів в одну з частин вікна перегляду браузера при роботі в інший частині;
ü для розташування в певному місці вікна перегляду інформації, яка повинна постійно перебувати на екрані незалежно від змісту частин екрана.
ü для представлення інформації, яку зручно розташувати в декілька суміжних частинах вікна, кожна з яких може переглядатися незалежно.
Каскадні таблиці стилів
Каскадні (багаторівневі) таблиці стилів - cascading style sheets (CSS) - це потужний стандарт на основі текстового формату, що визначає представлення даних у браузері.
Якщо формат HTML надає інформацію про склад документа, то таблиці стилів повідомляють як він повинен виглядати. У такий спосіб каскадні таблиці стилів дають можливість зберігати вміст окремо від його представлення.
Стиль включає всі типи елементів дизайну: шрифт, фон, текст, кольори посилань, поля та розташування об'єктів на сторінці.
CSS розроблялися так, щоб забезпечити більший рівень контролю над розміщенням тексту й графіки. Каскадні таблиці стилів забезпечують належний рівень єдності оформлення, організації й контролю під час розробки вузла, який є недосяжним за допомогою одного тільки HTML.
CSS передбачає 3 типа таблиць стилів - вбудовані, впроваджені (внутрішні) і зв'язані (зовнішні).
Вбудований (Inline). Цей метод дозволяє взяти будь-який тег HTML і додати до нього стиль. Використання вбудованого методу надає максимальний контроль над усіма властивостями Web-Сторінки.
Впроваджений (Embedded). Впровадження дозволяє контролювати всю сторінку HTML. При використанні тегу <style>, поміщеного усередині розділу <head> сторінки HTML, у код вставляються деталізовані атрибути стилю, які будуть застосовуватися до всієї сторінки.
Зв'язаний (Linked або External). Зв'язана таблиця стилів - потужний інструмент, який дозволяє створювати зразки стилів (master styles), які можна потім застосовувати до всього вузла.
Основний документ таблиці стилів має розширення .css.
Будь-яка сторінка, пов'язана із цим документом, буде використовувати зазначені стилі.
Синтаксис таблиці стилів
Таблиці стилів будуються відповідно до визначеного порядку. Синтаксис усіх методів практично однаковий. Таблиці стилів складаються з певних частин. Ці частини включають в собі наступні елементи:
Селектор(Selector). Селектор є елементом, до якого будуть застосовуватися призначувані атрибути. Це може бути просто тег типу заголовка (H1) або абзацу (Р).
Властивість (Property). Властивість визначає атрибути форматування для певного елементу. У властивості входять такі елементи, як поля, шрифти й фонові зображення.
Значення (Value). Значення визначають властивості.
Приклад створення фреймів
Створітьсторінкуweb-сайту яка буде поділена на два фрейми. Для оформлення сторінок необхідно застосувати каскадну таблицю стилів
Методичні вказівки
1. У середовищі програми Блокнот введіть текст стилю для HTML- документа і збережіть його в папці із своїм прізвищем з іменем fstyle.css.
2. Розгляньте синтаксис тегів які призначені для створення фреймів (таб. 9).
Таблиця 9. Синтаксис тегів для роботи з фреймами
| Ім’я тегу | Призначення тегу, атрибути |
| <FRAMESET> </ FRAMESET > | служить для поділу вікна форми на декілька областей (фрейми) Атрибути rows – вказує розбити вікно на горизонтальні області (значення можуть бути у пікселях або у відсотках). Причому, скільки значень у цього параметра, стільки й областей. Наприклад: rows="20%, 40%, *" – розбиває на три горизонтальні області. cols - вказує розбити вікно на вертикальні області |
| <FRAME > | призначає фреймам певні Web-сторінки Атрибути src - найголовніший параметр, він визначає адресу тієї html-сторінки або картинки, яка буде завантажуватися у фрейм name - ім'я фрейму, яке буде використовуватися для посилання до даного фрейму |
3. У середовищі програми Блокнот наступні файли index.htm, file1.htm, file2.htm, file3.htm.
Файл index.htm - документ розкладки (layout), розділить Web-сторінку , на дві горизонтальні частини.
Файли file1.htm, file2.htm, file3.htm - документи змісту (content) заповнять інформацією кожну з частин
4. Розчиніть файл index.htm у програмі – браузері.
Індивідуальні завдання
для виконання лабораторної роботи №.5 Тема: «Створення Web-сайтів з використанням мови HTML. Використання фреймів та каскадних листів стилів CSS»
Відредагувати web-сайту вашої компанії:
1. Додайте сторінку з фреймами;
2. Відформатуйте зовнішній вигляд web-сайту за допомогою каскадних листів стилів
Тести за темою «Загальні принципи створення Web-сайтів з використанням мови HTML.»
| Питання | Правильні варіанти відповідей | ||||
| Теги для створення списків | <ul> | <tr> | <ol> | <br> | <li> |
| Виводить заголовок документа тег | <ol> | <BODY> | <TITLE> | <font> | <b> |
| Теги для форматування тексту | <b> | <tr> | <sub> | <br> | <font> |
| Коди кольорів | #FFFFFF | $008080 | #FFFF00 | #08000 | #00FS00 |
| Текстовий абзац починає тег | <b> | <tr> | <ol> | <P> | <br> |
| Здійснює перехід на новий рядок тег | <BODY> | <sub> | <br> | <IMG> | <font> |
| Створює посилання тег | <b> | <а> | <P> | <br> | <li> |
| Створює рядок таблиці | <TD> | <TR> | <br> | <li> | <sub> |
| Одну чарунку таблиці створює тег | <sub> | <TD> | <b> | <а> | <P> |
| Тег, який відображує рисунок на сторінці | <IMG> | <ol> | <BODY> | <TITLE> | <font> |
| Які атрибути має тег table | width | border | align | title | text |
| Активні області на мапі посилань визначає тег | <BODY> | <TITLE> | <AREA> | <IMG> | <sub> |
| Для створення у формі елементів у формі призначений тег | <TD> | <b> | <INPUT> | <BODY> | <TITLE> |
| Теги HTML які не є контейнерами | <td> | <br> | <hr> | <u> | <font> |
| Тег fontмає атрибути | text | bgcolor | сolor | face | size |
| ТегOPTION>має атрибути | selected | bgcolor | сolor | value | size |
| Синтаксис тегу має вид | <тег [атрибуты] | <тег атрибут1 атрибут2 атрибут3…> | <тег атрибут1, атрибут2, атрибут3,…> | <тег атрибут1; атрибут2; атрибут3;…> | (тег атрибут1; атрибут2; атрибут3) |
| ТегTEXTAREAмає атрибути | name | сolor | face | cols | Rows |
| Який тег ділить вікно на фрейми | <FRAM> | <FRAMESET> | <AREA> | <IMG> | <sub> |
| Призначає фреймам певні Web-сторінки тег | <FRAMESET> | <AREA> | <IMG> | <sub> | <FRAM> |
Література
1. Вайнман, Л. Креативный Web-дизайн на HTML 4 : Пер. с англ. / Л. Вайнман, В. Вайнман . ─ М. и др. : ДиаСофт, 2003 .
2. Комолова, Н.В. HTML: Учебный курс / Н.В. Комолова . ─ СПБ. : Питер, 2006 . ─ 267 с.
3. Кириленко, А. Самоучитель HTML [Текст]. – СПб: Питер; Киев: Издательская группа BHV, 2005. – 272 с.
4. Хольцшлаг, М. Языки HTML и CSS : Для создания Web-сайтов / М. Хольцшлаг ; Пер. с англ. А. Климович . ─ М. : Триумф, 2006 . ─ 303 с.
| Зміст | стор. |
| Вступ | |
| Змістовий модуль 1. Розробка сайтів за допомогою мови HTML | |
| Лабораторна робота №1. Загальні принципи створення Web-сайту | |
| Завдання | |
| Індивідуальні завдання за темою: «Загальні принципи створення Web-сайту» | |
| Лабораторна робота №2. Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з текстом, списками, рисунками та таблицею | |
| Основні поняття | |
| Імена кольорів та sRGB значення | |
| Приклад створення Web-сайту | |
| Індивідуальні завдання за темою: «Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з текстом, списками, рисунками та таблицею» | |
| Лабораторна робота №3 Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з мапою посилань. | |
| Приклад створення Web-сторінки з мапою посилань | |
| Індивідуальні завдання за темою: «Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з мапою посилань» | |
| Лабораторна робота №4. Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з формою. | |
| Приклад створення форми | |
| Індивідуальні завдання за темою: «Загальні принципи створення Web-сайтів з використанням мови HTML. Робота з формою. | |
| Лабораторна робота №5. Використання фреймів та каскадних листів стилів CSS. | |
| Фрейми | |
| Каскадні таблиці стилів | |
| Приклад створення фреймів | |
| Індивідуальні завдання за темою «Створення Web-сайтів з використанням мови HTML. Використання фреймів та каскадних листів стилів CSS» | |
| Тести за темою «Загальні принципи створення Web-сайтів з використанням мови HTML» | |
| Література | |
| Додатки |
одаток 1
| МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ Донецький національний університет економіки і торгівлі імені Михайла Туган-Барановського Кафедра інформаційних систем і технологій управління | ||
| ЗВІТ З лабораторної роботи № Тема: | ||
| Виконав: студент(ка) гр._____ __________________ ПІБ Керівник: __________________ посада, ПІБ викладача Дата_______________ | ||
| Донецьк -____ рік |
Рисунок – Форма титульного листа
Навчальне видання
Спіцина Надія Миколаївна к.е.н., доцент
Шабельник Тетяна Володимирівна к.е.н., доцент
МОВНА МОДЕЛЬ
СУЧАСНОГО ІНФОРМАЦІЙНОГО ПРОСТОРУ
Методичні вказівки та індивідуальні завдання
для проведення лабораторних і самостійної роботи студентів
напряму підготовки 6.030507 «Маркетинг»
денної та заочної форм навчання
(українською мовою)
Технічний редактор О.І. Шелудько
Зведений план 2011 p., поз. №
Підписано до друку 2011 p. Формат 60х84/16. Папір офсетний.
Гарнітура Times New Roman. Друк - ризографія. Ум. друк. арк.- .
Обл.-вид. арк. Тираж прим. Зам. №
Донецький національний університет економіки і торгівлі
імені Михайла Туган-Барановського
Редакційно-видавничий відділ ННІІ
83023, м. Донецьк, вул. Харитонова, 10. Тел.: (062) 297-60-50, 297-60-45
Свідоцтво про внесення до Державного реєстру видавців, виготівників і розповсюджувачів видавничої продукції ДК № 3470 від 28.04.2009 p.