Підключення таблиць стилів

Технология CSS. Проектування оформлення web-сайту.

Фрейми

Фрейми використовуються для того, щоб розділити вікно браузеру на декілька частин, в кожній з яких може відображуватися свій HTML-документ. Є дуже багато випадків, коли їх вживання виправдане.

Фрейми бувають двох типів: звичайні і вбудовані всередину HTML-документа.

Опис фреймової структури створюється за допомогою тегів <frameset> і <frame>.

Frameset описує розділення вікна на декілька частин по горизонталі або вертикалі. Для цього використовуються атрибути rows або cols, в яких через кому вказуються розміри відповідних структур у вигляді кількості пікселів, відсотків або пропорційному вигляді.

Для опису фрейму використовується тег <frame> з атрибутами:

• name - назва фрейму
• src - URL вмісту фрейму
• noresize - заборона зміни розміру фрейму
• scrolling - вказівка наявність скролінгу (yes, no, auto (в міру необхідності))
• frameborder із значеннями 1 або 0 (наявність або відсутність рамки),
• marginwidth і marginheight — відстані між кордонами фрейму і іншими об'єктами).

<noframes> виділяє частину HTML-документа, яка не відображується в разі підтримки фреймів.

Вбудовані фрейми створюються за допомогою тегу <iframe> (за способом розміщення вони схожі на малюнки). Атрибути name, scrolling, marginwidth иmarginheight, frameborder, src мають той же сенс, що і в тегу <frame>. Атрибути align, height і width мають той же сенс, що і в тегу <img>

Технологія CSS

Каскадні таблиці стилів або CSS (від англійського Cascading Style Sheets) є наслідком подальшого розвитку HTML і дають нам можливість перейти на наступний рівень представлення інформації. Таблиці стилів дозволяють розділити смисловий вміст сторінки і його оформлення.

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

Проте з тих пір багато що змінилося, і стандарт HTML втратив первинну стрункість. Спочатку Netscape додав "покращувані теги", які дозволили ширше управляти зовнішнім виглядом інформації, що представлялася. Нововведення прижилося, і всі розширення Netscape стали стандартом de facto. Потім точно також поступила Microsoft. Коли спохопилися, то HTML був жахливою сумішшю логічних і оформлювальних тегов, несумісних розширень і повністю перестав відповідати первинній концепції - представляти інформацію на будь-якому пристрої незалежно від його характеристик по виведенню інформації.

Тоді була зроблена широкомасштабна стандартизація. Внаслідок чого на світ з'явився стандарт HTML 3.2. Він не був революційним, а лише розставив по місцях всі нововведення і виробив загальні рекомендації для виробників броузерів. Революційні зміни були введені в новому стандарті - HTML 4.0 або, як його сталі називати, Dynamic HTML. У обіг були введені шари, таблиці стилів і універсальна об'єктна модель броузера.

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

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

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

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

Підключення таблиць стилів

Для здійснення цього завдання ми можемо скористатися одним з 3-х пропонованих методів:

• зовнішній файл
• inline-опис
• опис в секції заголовка.

Inline-опис

або описи, вбудованi в тег:

<p style="color:red; text-align:center;">

Цей текст перевизначений стилем

</p>

За допомогою додаткового атрибуту style ми можемо визначити потрібні нам стильові параметри в будь-якому тегу. Це найлегший спосіб, і діє він в межах лише одного тега. Але представте, наскільки виросте розмір файлу, і наскільки незручно його виправляти, якщо ми вказуватимемо стиль в кожному тегу. Цей спосіб не дуже відрізняється, наприклад, від прямого опису зовнішнього вигляду за допомогою тега <font>.