Верстка сайту в Adobe Dreamweaver - Розробка інтерактивних Web-додатків
Збирають сторінки сайтів у кадрах, таблицях чи контейнерах. У мене використаний контейнерний дизайн, або, як його ще називають, CSS верстка, вважається на сьогоднішній час найпрогресивнішим видом верстки.
Контейнер - це спеціальний тег (особлива команда) HTML, що служить як би «упаковкою» для інших тегів. До вмісту контейнера можна використовувати стилі css.
На практиці контейнери ділять на плаваючі та вільно позиціоновані. Контейнери невіддільні від стилів CSS. Властивості контейнерів, такі як зміщуватися до краю сторінки, завдання фіксованих ширини і висоти, або, навпаки, автоматичного припасування під розмір сторінки, поля, фони - це можливості, що надаються стилями.
Створення зовнішнього контейнера. Для цього в інструментарії об'єктів активуємо пункт Макет і натисніть кнопку Вставити тег div (Insert Div Tag). У вікні вибираємо Вставити (Insert): У точці вставки (At insertion point) і тиснемо ОК. На екрані з'являється вузький штриховий прямокутник.
Далі вставляється другий контейнер і в режимі - Вставити (Insert): У точці вставки (At insertion point).
Ставимо курсор як на верхньому малюнку і вставляємо третій та наступні контейнери так само, як і другий. Написи в контейнерах видаляються у міру заповнення контейнера інформацією. Найпростіше створити всі контейнери відразу і поступово робити для них css стилі.
Для управління властивостями контейнерів створюються спеціальні правила, які називаються стилями css, які об'єднуються в таблиці стилів css. Щоб створити стиль css для зовнішнього контейнера, необхідно активувати панель CSS у правому доку, клацнувши лівою клавішою миші на назві
У нижній частині панелі клацніть на значку
У налаштуваннях задається ім'я css файлу (рисунок 1).
Малюнок 1 -Створення сторінки CSS
Далі створюються правила для вибраного стильового класу і збережемо цей клас в таблиці css стилів (рисунок 2).
Рисунок 2 - Завдання параметрів
У розділі Категорія (Category) є такі параметри:
Ч Тип (Турі) – тут задаються параметри шрифту, яким набрано текст
Ч Фон (Background) – тут задаються параметри фону елемента сторінки
Ч Блок (Block) – тут задаються параметри текстового абзацу
Рамка (Box) - тут задаються параметри, що задають розміри та розміщення елемента сторінки
Ч Кордон (Border) - тут задаються параметри, які задають колір та товщину рамки навколо будь-якої складової частини сторінки
Ч Список (List) – тут задаються параметри, що встановлюють вид маркерів списку
Ч Положення (Position) - тут визначається місцезнаходження маркера або нумерації
Таким чином створюються стилі для кожного div тега. Створений шаблон пакується. Після чого його можна використовувати для подальшого редагування та наповнення вмістом Instant CMS.
Рисунок 3 – Приклад роботи з програмою Adobe Dreamweaver.