- •Тема 1. Технології Internet та основи створення Web-вузлів
- •2, Загальні принципи створення комерційних Web-сайтів
- •3. Загальні принципи створення окремої сторінки Web-сайту "
- •4. Розміщення Web-вузла в Internet та вивір провайдера
- •Тема 2. Структура html-документа й елементи розмітки заголовка документа
- •1. Історія розвитку мови розмітки гіпертексту html
- •2. Принципи гіпертекстової розмітки. Структура html-документа
- •3. Тега, що визначають структуру документа
- •4. Призначення та основні контейнери заголовка
- •Тема 3. Мова розмітки гіпертексту html
- •5. Федорчук а. Как создаются Web-сайты: краткий курс- сПб: Питер, 2000.-224с: ил.
- •1. Теги управління розміткою
- •2. Теги керування відображенням символів
- •3. Організація тексту всередині документу
- •4. Засоби опису таблиць у html
- •Тема 4. Топологія Web-сайту. Навігація на Web-сайті. Створення гіпертекстових переходів засобами html
- •1. Топологія Web-сайту
- •2. Створення загальних посилань засобами html
- •3. Створення контекстних посилань засобами html
- •4. Створення гіперпосилань засобами html
- •5. Html форми
- •Тема 5. Основи Web-дизайну
- •2. Офермлеяня Web-сторінки. Типи фонів. Текстури. Правила
- •3. Логотип
- •4. Шрифт і текст у Web-дизайні
- •5. Кольорове коло. Системи представлення кольорів. Підбір
- •Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
- •1. Атрибути body для кольерового оформленим Web-сторінок
- •2. Оформлення таблиць
- •3. Використання графіки в html
- •Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)
- •1. Основи css
- •1.1. Призначення css
- •1.2. Додавання стилів на web-сторінку
- •1.3. Присвоєння стилів
- •2. Властивості елементів, керованих за допомогою css
- •2.2. Текст
- •2.3. Шрифти
- •1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку
- •Тема 1. Технології Internet та основи створення Web-вузлів
1.2. Додавання стилів на web-сторінку
Таблиці стилів можуть бути додані в сторінку трьома різними способами, що розрізняються за своїми можливостями:
• таблиці зв'язаних стилів (linked style sheet);
• таблиці глобальних стилів (global style sheet);
• внутрішні стилі (inline style).
Таблиці зв'язаних стилів (linked style sheet) - найпотужніший і Найзручніший спосіб, визначення стилів і правил для сайту.
Створюється текстовий файл, описуються Ы допомогою мови CSS необхідні стилі, далі розміщують цей файл на Web-сервері, as коді Web-сторінок, що будуть використовувати стилі з цього файлу, потрібно за допомогою тега <LINK> зробити посилання на нього, наприклад:
<LINK REL=STYLESHEET TYPE="text/css?' HREF="URL"> Перші два параметри цього тегу є зарезервованими іменами, які Призначені для того, щоб повідомити оглядачу, що, на цій сторінці буде використовуватися CSS. Третій параметр - HREF= «URL» - вказує на файл, що містить опис стилів.
Приклад 1. Підключення таблиці зв'язаних стилів: <html> <head>
<link'rel="stylesheet" type="text/css" href=mysite.css> </head>
<body> y •
<hl> Підключення таблиці зв'язаних стилів </hl> •' /body> </html>
Переваги даного методу:
1, Використовується один файл зі стилем для будь-якої кількості
" web-сторінок, а також можна його застосовувати на інших сайтах.
2. Мояона змінювати таблицю стилів без модифікації web-сторінок.
3. При зміні стилю в одному файлі, стиль автоматично застосовується до всіх сторінок, де є на нього посилання.
4, При використанні CSS полегшується підтримка сайту.
Файл зі стилем при першому завантаженні міститься в кеш на локальному комп'ютері, окремо від web-сторінки, тому завантаження сайту відбувається швидше.
Таблиці глобальниж стилів (global style sheet) - стиль визначається В самому документі та зазвичай розташовується в заголовку web-сторінки. За гнучкістю та можливостями цей спосіб використання стилю поступається попередньому, але також дозволяє розміщувати всі стилі в одному місці. В даному випадку, прямо в тілі документа. Визначення стилю задається тегом STYLE.
Приклад 2. Використання таблиці глобальних стилів:
<html>
<head>
<style type="text/css">
<H1 { font-size: 120%; font-family: Verdana, Axial, Helvetica, sans-serif; color: #333366; }
</style>
</head> <body>
<Hl> Використання таблиці глобальних стилів </Н1> < /body> </html>
В заголовку визначений стиль тега НІ, який надалі можна використовувати
у будь-якому місці даної web-сторінки.
Внутрішні стилі (inline style) - це розширення для одиночного тега, що використовується на web-сторінці. Для визначення стилю застосовується параметр style, а його атрибути вказуються за допомогою мови таблиці стилів.
Приклад 3. Використання внутрішніх «тилів:
<html> .
<body>
<Н1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; "> .'""■ Використання внутрішніх стилів < /Hl>
</body> пийЯ
</html>
Рекомендується використовувати внутрішній стиль для одиночних тегів або відмовитися від його використання взагалі, оскільки зміна ряду елементів стає проблематичною. Внутрішні стилі не відповідають ідеології структурованого документу, коли вміст та його оформлення розділені.
Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. Першим завжди застосовується внутрішній стиль, потім таблиця глобальних стилів і в останню чергу таблиця зв'язаних стилів. В прикладі використовуються відразу два методи додавання таблиць стилів у документ.
Приклад 4. Сполучення різних методів підключення стилів: <html>
<head>
<style type="text/css">
<Hl { font-size: 120%; font-family: Arial,
Helvetica, sans-serif; color: green; } '.'...'•'"
</style> ,. ■
</head>
<body> ''*^Щ\
<H1 style="font-size: 36px; font-family: Times,.
serif; color: red;"> Сполучення різних методів
Підключення стилів </Н1>
<Н1> Сочетание різних методів підключення стилів </н
</body>
</htral>
В приведеному прикладі перший заголовок задається червоним
кольором розміром 36 пікселів, а наступний - зеленим та іншим шрифтом.