Iiі. Форматування головної сторінки сайту проекту

1. Встановити фон сторінки (таблиці) таким чином, щоб вписати колірну гаму баннера. Для цього відкрити вікно параметрів сторінки за допомогою команд Modify(Изменение)-Page Properties… (Свойства страницы…) і встановити новий фон:

2. Створити стільовий файл проекту з ім’ям styles.css та встано­вити в ньому атрибути основних тегів, які використовуються для форматування сторінки.

2.1. Для створення таблиці стилів виконати команди Window (Окно) – CSS Styles (CSS стили):

Після виконання цієї команди відкриється панель Design вкладка CSS Styles (CSS Стили):

2.2. Для створення стилю натиснути на кнопку . Відкриється вікно:

Група перемикачів Тyрe (Тип) задає елементи сторінки, до яких буде застосований новий стиль:

• перемикач Make Custom Style (class) (Создать новый стиль (класс)) дозволяє створити новий стильовий клас. Якщо його включити, то в комбінованому списку Name(Имя) вводиться ім’я створюваного стильового класу;

• перемикач Redefine HTML Tag (Переделать HTML теги) до­зволяє створити стиль перевизначення тега. Якщо обрати цей перемикач, то у списку Tag(Тег) вибирається потрібний тег для перевизначення;

• перемикач Use CSS Selector (Использовать CSS Selector) дозволяє створити стиль-селектор. Він дозволяє створити псевдо­стиль гіперпосилань або комбінований стиль. Якщо включено цей перемикач, то у комбінованому списку Selector може бути введене ім’я створюваного комбінованого стилю або селектора. Розгорнувши цей список, можна вибрати потрібний псевдостиль.

Друга група перемикачів Define In (Определить в) задає, в якій таблиці стилів буде знаходитися створюваний новий стиль:

• якщо обрано верхній перемикач, то у розташованому справа списку, можна вибрати ім’я файлу зовнішньої таблиці стилів, прив’язаної до цієї сторінки. Або можна вибрати пункт (New Style Sheet File), щоб створити нову таблицю стилів. У цьому випадку після натискання кнопки ОК на екрані з’явиться діало­гове вікно збереження файла, де вводиться ім’я файла нової таблиці стилів;

• якщо обрано перемикач This Document Only, стиль буде помі­щений у внутрішню таблицю стилів.

Перш за все слід визначити, яку таблицю стилів доцільно створю­вати. Таблицю стилів, збережену в окремому файлі, можна викорис­товувати в багатьох web-сторінках. Крім того, вона може знаходитися взагалі на іншому сайті. Внутрішня таблиця стилів за структурою аналогічна зовнішній, але різниця полягає в тому, що внутрішня таблиця стилів міститься безпосередньо в заголовку HTML-файла і, відповідно, може бути використана тільки в ньому.

У яких же випадках доцільно застосовувати той або інший спосіб завдання стилів? Тут слід з’ясувати, де і як часто буде використаний той або інший стиль. Якщо стиль необхідний у багатьох web-сторін­ках, то доцільно створити зовнішню таблицю стилів. Наприклад, якщо ви створили стиль основного тексту сторінки, що повинний бути використаний на всіх сторінках сайту, задайте його в глобальній таб­лиці стилів (одну на весь сайт). Якщо певний стиль застосовується не у всіх сторінках, а в невеликій підмножині, то визначите його у другорядній таблиці стилів, що буде використана тільки даною під­множиною сторінок. У цьому випадку ви можете визначити весь набір необхідних стилів в одній таблиці, а можете –»розкидати» по декількох.

Якщо стиль повинний бути використаний у декількох місцях одної єдиної Web-сторінки, створюйте внутрішню таблицю стилів. У результаті зовнішні таблиці стилів не будуть заповнюватися стилями, застосовуваними тільки в одній сторінці, і їхні файли збережуть компакт­ність. Можна винести всі такі стилі у зовнішню таблицю, що буде використовуватися єдиною сторінкою, але такий підхід не є опти­мальним.

Якщо ж стиль повинний бути використаний в одному єдиному місці однієї єдиної web-сторінки, вбудовуйте його прямо в HTML-тег. Так він буде «ближче до місця дії» і не стане захаращувати таблиці стилів, як внутрішню, так і зовнішні.

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

Спочатку визначаємо стиль для назви роботи і дисципліни. У вікні Новый стиль CSS задаємо тип стилю:

Після натискання кнопки ОК відкриється вікно для встанов­лення параметрів стилю, в якому встановлюємо такі значення:

Аналогічним чином створюємо стиль для пунктів меню:

3. Відформатувати текстові елементи сторінки згідно зі створени­ми стилями. Для цього встановити курсор на необхідний об’єкт і на панелі Design вкладка CSS Styles (CSS Стили) вибрати необхідний стиль форматування:

4. Відформатувати інший текст, враховуючи кольорову гаму вико­ристану на сторінці. Ця операція виконується з використанням вікна Properties для кожного текстового об’єкта. Виділити необхідний текст та встановити необхідні параметри. Наприклад: