Тема 5 Використання динамічного html Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 5. ВИКОРИСТАННЯ ДИНАМІЧНОГО HTML
5.1. Визначення динамічного HTMLДинамічний HTML (DHTML) - це термін, який використовується для позначення HTML-сторінок із динамічно змінюваним змістом. Реалізація DHTML складається із трьох компонентів: безпосередньо HTML, каскадних таблиць стилів (CSS) та мови сценаріїв (JavaScript або VBScript). Вказані компоненти пов’язані між собою об’єктною моделлю документа (Document Object Model - DOM), що, по суті, є інтерфейсом прикладного програмування (API). Використання DOM додає простій HTML-сторінці нову якість - можливість динамічної зміни свого змісту без перезавантаження. Об’єктна модель документа робить всі елементи сторінки програмними об’єктами. За її допомогою можливо одержати доступ та керувати всім змістом сторінки. Кожен елемент HTML-сторінки доступний як індивідуальний об’єкт. Практично всі події, пов’язані з HTML-сторінкою (натиск на кнопку миші, натиск клавіші клавіатури, тощо), можуть бути перехоплені та оброблені процедурами сценарію. Зазначимо, що на сьогодні всі розповсюджені браузери підтримують CSS та JavaScript, проте різні браузери реалізують власну об’єктну модель документів. Таким чином сторінки з використанням DHTML можуть по-різному відображатись у різних браузерах, що є основним недоліком DHTML.
5.2. Визначення каскадних таблиць стилівКаскадні таблиці стилів (CSS) - це технологія визначення та з’єднання стилів з HTML-сторінкою. Для керування форматом однієї HTML-сторінки можливо використати декілька таблиць стилів. При перегляді HTML-сторінки браузер по визначеним правилами будує пріоритетність, "каскад" використання цих таблиць. Стиль - це усе те, що визначає зовнішній вигляд HTML-сторінки при її відображенні у вікні браузера. За допомогою стилів можливо змінювати більшість властивостей тегів HTML-сторінки. Наприклад, для таблиці можна змінити шрифт, колір фону, стиль, товщину та колір меж, видимість рядків та комірок, тощо. Форматування тегу за допомогою стилів дещо нагадує зміну його атрибутів, але можливості стилів набагато ширші. Таблиця стилів - це шаблон, який керує форматуванням тегів HTML-сторінки. Концепція таблиці стилів для HTML-сторінки схожа на використання стилів у текстовому редакторові Microsoft Word. Змінити зовнішній вигляд документа Word можливо простою зміною з’єднаних з ним стилів. Так само змінити зовнішній вигляд HTML-сторінки можна за допомогою зміни з’єднаної з нею таблиці стилів. Наприклад, для відображення тексту всіх абзаців червоним кольором на чорному фоні необхідно у таблиці визначити правило, подане на рис. 5.1. Правило каскадних таблиць стилів складається із селектора та однієї або декількох декларацій. Кожна декларація складається із властивості та її величини, розділених знаком : та закінчується знаком ;. У прикладі, поданому на рис. 5.1, селектором є тег P та визначено дві декларації, що записані у фігурних дужках. Перша декларація ¾ color:red; друга ¾ background-color: black;. Перша декларація задає колір шрифта (властивість color) як червоний (значення red). Друга декларація задає колір фону (властивість background-color:) як чорний (значення black). Запис декларації може бути реалізованим тільки буквами англійського алфавіту та арабськими цифрами і не чуттєвим до регістру. З’єднати HTML-сторінку з таблицею стилів можливо за допомогою: 1. Зв’язування - дозволяє використовувати одну таблицю стилів для форматування декількох HTML-сторінок. При цьому таблиця стилів зберігається у окремому текстовому файлі з розширенням css. Зв’язування реалізується за допомогою тегу link, визначеному у розділі head. Наприклад, визначимо стиль, що задає чорний фон HTML-сторінки. HTML код на сторінці: <head><link rel="stylesheet" type="text/css" href="hi.css"> Правило стилю записане у файлі hi.css: body {background-color: black;} Особливістю запису правила стилю у файлі з розширенням css є те, що тег <style> не використовується. 2. Впровадження - дозволяє задати всі правила таблиці стилів безпосередньо у самій HTML-сторінці. Для цього також використовується тег link, визначений у розділі head: <head><style type="text/css"> hr {width: 120px;} </style> На цій HTML-сторінці всі лінії, визначені за допомогою тегу hr, будуть мати довжину 120 пунктів. 3. Впровадження у тег документа - дозволяє змінювати форматування конкретних елементів HTML-сторінки. Такий стиль інколи називають інлайновим. Наприклад: <td style="background-color: black; color: red;"> Текст, розміщений у цій комірці, відображається червоним кольором на чорному фоні. </td>. При впровадженні у тег документа запис стилю має деякі особливості: - селектором є сам тег; - використовується параметр style, що є у кожному тезі; - визначення повинні бути у одинарних або подвійних лапках.
5.3. Особливості запису каскадних таблиць стилів.Якщо для різних селекторів задані однакові декларації, то для зменшення розміру таблиці стилів використовується групування селекторів. Наприклад, якщо для нумерованого та маркірованого списків необхідно визначити розмір шрифта 24 пункту, то можливо це задати одним правилом: ol, ul {font-size: 24pt;} Селектори у цьому випадку розділяються комами. На HTML-сторінці можуть бути елементи, що вбудовані у інші елементи. Якщо для елементів-батьків визначені правила стилів, то елементи-нащадки можуть успадкувати деякі із цих правил. Наприклад, якщо для нумерованого списку визначено, що текст списку буде червоного кольору: <head><style type="text/css"> ol { color: Red;}</style></head> то текст абзацу, розміщеного у такому списку, також буде червоного кольору: <body><ol><li><p>Текст абзацу червоного кольору</p></ol> У деяких випадках необхідно для формально однакових елементів (тегів) застосувати різні стилі. При цьому використовувати як селектори теги, як це було у наведених вище прикладах, не доцільно. У цих випадках для визначення правил стилів, які можна застосувати для одного або для всіх елементів HTML-сторінки, можливо використовувати класи. Ім’я класу використовується як селектор. Якщо стиль буде застосовуватися тільки для одного тегу, то синтаксис запису правила стилю такий - X.class. Де X - ім’я тегу, а class - ім’я класу. Наприклад, необхідно визначити два правила стилів для нумерованого списку. Правило a повинно визначити нумерований список із розміром 12 пунктів, а правило b - з шрифтом розміром 16 пунктів: <head><style type="text/css"> ol.a {font-size: 12pt;} ol.b {font-size: 16pt;}</style> У тілі HTML-сторінки використання цих стилів відбувається так:: <ol class="a"><li> Текст списку відображається шрифтом розміром 12 пунктів </li></ol> <ol class="b"><li> Текст списку відображається шрифтом розміром 16 пунктів </li></ol> Якщо необхідно передбачити можливість застосування стилю для всіх тегів, то синтаксис запису правила стилю - такий .class. Наприклад, визначимо стиль, що задає червоний колір шрифту: <head><style type="text/css"> .fontcolor {color: red;}</style> Використання цього стилю у тілі HTML-сторінки відбувається таким чином: <ol class="fontcolor"><li>Текст нумерованого списку червоний</li></ol> <ul class="fontcolor"><li>Текст маркірованого списку червоний</li></ul> Ще одним цікавим випадком є застосування контекстних селекторів. Вони застосовуються за необхідності визначення стилів для тегів, що вкладені у інші теги. Контекстний селектор складається із декількох простих селекторів, розділених пробілами: a b c { визначення 1; визначення 2;...}. Якості прості селектори, використовуються імена тегів. Стиль з контекстним селектором застосовується для тегу c тільки у тому випадку, коли він знаходиться між тегами a та b. Наприклад, необхідно, щоб відображались червоним кольором тільки ті абзаци, які вкладені у нумеровані списки. У цьому випадку можливо використати стиль: ol P {color: Red;} Альтернативою селектора class є селектор id, який призначений для того, щоб визначити кожному правилу стилю оригінальне ім’я. У цьому випадку вказане для id правило стилю буде застосоване для кожного тегу з тим самим id. Якщо стиль передбачено використовувати для всіх тегів, то синтаксис визначення правила стилю селектором id такий: <head><style type="text/css"> #ім’я_id {визначеня1;... } </style> Якщо необхідно передбачити застосування правила стилю тільки для конкретного тегу , то синтаксис запису такий: <head><style type="text/css"> ім’я_тегу#ім’я_id {визначеня1;... } </style> Для використання такої таблиці стилів у тілі HTML-сторінки необхідно присвоїти атрибуту id, який є у кожному тегу, ім’я, визначене у правилі стилів: <ім’я тегу id= ім’я_id> Наприклад, визначимо стиль для зображення будь-якого елемента з id="ar" шрифтом Arial та стиль для відображення абзаців з id="ver" шрифтом Verdana. <head> <style type="text/css"> #ar { font-family: Arial; } p#ver { font-family: Verdana; } </style> </head> Застосування цих стилів реалізується так: <h1 id="ar">Текст заголовку першого рівня відображається шрифтом Arial </h1> <p id="ver"> Текст абзацу відображається шрифтом Verdana </p>
5.4. Ієрархія стилівПри призначенні стилів HTML-сторінкам та тегам іноді різні декларації призначають різні стильові рішення одним і тим самим тегам. У цьому випадку реалізованим буде те стильове рішення, що стоїть вище у ієрархії стилів. Більш високим у цій ієрархії вважається те рішення, яке більш безпосередньо стосується до тегу, якому призначається визначений стиль. Таким чином, ієрархія стилів виглядає: інлайнові, впроваджені, зв’язані. Отже, в прикладі, файл style1.css визначає стиль: i {font-size: 30pt; color: red}
а інші правила стилів задані як: <head>
<link rel="stylesheet" type="text/css" href="style1.css">
<style type="text/css">
<i{color: blue; text-decoration: underline}>
</style>
</head>
<body>
<i style="font-size: 28pt; color: green">Ієрархія стилів</i>
</body>
5.5. Властивості форматування елементівЯкщо зображення буде недоступним, то як фон рядка буде використано зелений колір. Властивості категорії блок визначають параметри блокових елементів. Найбільш цікавими серед них є властивості, що визначають ширину полів (margin), товщину (border-width), колір (border-color) та стиль (border-style) границь. Наприклад, визначення таблиці з подвійними границями червоного кольору, товщиною 5 пунктів та полями у 50 пунктів можна записати так: <table border="1" style="border-color: red; border-style: double; border-width: 5pt; margin: 50 pt;"> 5.6. Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |