Як редагувати стилі в макеті CSS у Dreamweaver

Після створення нової сторінки з макетом CSS у Dreamweaver у вас є, здавалося б, нескінченна кількість варіантів її редагування, але спочатку ви повинні визначити, які стилі в таблиці стилів відповідають елементам, які ви хочете редагувати.

Як ви, напевно, можете собі уявити, ви можете редагувати стилі в макеті CSS багатьма способами, щоб створити власні дизайни.

Після того, як ви налаштуєте існуючі стилі, щоб отримати базовий дизайн сторінки, як ви хочете, ви можете створити стільки додаткових стилів, скільки забажаєте.

Як перевірити доступні стилі та внести основні зміни

Ви можете використовувати ці самі основні інструкції з будь-яким макетом CSS, включеним до Dreamweaver. Щоб редагувати стилі в макеті CSS, виконайте такі дії:

Відкрийте файл сторінки, заснований на макеті CSS Dreamweaver, і виберіть «Вікно»→Стилі CSS (або натисніть вкладку «Конструктор CSS», щоб розгорнути панель).

Панель CSS Designer відкривається або розгортається.

Натисніть, щоб вибрати назву таблиці стилів на панелі «Джерела» у верхній частині конструктора CSS.

Усі стилі, пов’язані з новою сторінкою, перераховані на панелі вибору.

Виберіть назву будь-якого стилю, переліченого на панелі «Вибірники конструктора CSS».

Відповідні правила CSS, визначені для стилю, відображаються на панелі «Властивості» в нижній частині панелі «Конструктор CSS». Натискання списку стилів і перегляд відповідних правил — це хороший спосіб отримати швидкий огляд дизайну та побачити, де зберігаються різні параметри форматування сторінки.

Теги заголовка, .nav і нижнього колонтитула HTML5 керують основними розділами сторінки. Наприклад, стиль заголовка містить правило, яке робить колір фону зеленим. Таким чином, щоб змінити колір області заголовка у верхній частині сторінки, ви змінюєте налаштування кольору фону в правилі заголовка.

Як змінити налаштування всієї сторінки

Щоб змінити налаштування всієї сторінки, наприклад колір фону сторінки або основного шрифту, розмір і колір тексту, що використовується на всій сторінці, виконайте такі дії:

На панелі «Вибірники конструктора CSS» виберіть стиль із назвою body.

Властивості, визначені у вибраному правилі стилю, відображаються на панелі «Властивості».

Натисніть піктограму T у верхній частині панелі властивостей і змініть або додайте потрібний шрифт та інші параметри тексту.

Ви можете змінити шрифт, розмір, стиль і вагу. Щоб змінити відстань між рядками тексту, змініть висоту рядка.

Прокрутіть униз до області фону на панелі «Властивості» та використовуйте колір у полі «Колір фону», щоб вказати колір для всього фону сторінки.

Крім того, ви можете ввести будь-який шістнадцятковий колірний код у поле «Колір фону» або використовувати піпетку для вибірки будь-якого кольору. Щоб додати фонове зображення, клацніть поле URL-адреси в розділі «Фон», а потім натисніть кнопку «Огляд», що з’явиться, і виберіть зображення, яке ви хочете використовувати як фон. Використовуйте піктограми фонового повтору, щоб указати, як фонове зображення має повторюватися на сторінці.

Внесіть будь-які інші зміни або доповнення до правила стилю.

Зміни правил стилю на панелі «Властивості» автоматично зберігаються та застосовуються до вмісту, відформатованого за допомогою правила.

Як налаштувати області вмісту

Щоб змінити ширину або інші параметри основних областей вмісту, які контролюють загальний розмір сторінки та верхнього, нижнього колонтитула та бічної панелі, виконайте такі дії:

Щоб змінити ширину всієї основної області дизайну:

Клацніть стиль .container на панелі Selectors панелі CSS Designer.

Властивості правила стилю .container відображаються на панелі «Властивості», де ви також можете редагувати стиль.

Змініть розмір у полі Ширина або введіть нове число для бажаної ширини сторінки.

Ширина дизайну сторінки автоматично змінюється відповідно до введеного розміру. Коли ви змінюєте ширину стилю .container, ви змінюєте ширину всього дизайну, оскільки всі

теги та інші елементи містяться в

відформатовано у стилі .container — і всі вони налаштовані на розширення, щоб заповнити .container

.

Щоб змінити розмір області вмісту сторінки, виберіть стиль під назвою .content і вкажіть розмір та інші параметри, які вам потрібні, на панелі «Властивості».

Якщо ви змінюєте ширину області вмісту в макеті, який містить бічну панель, ви також повинні змінити ширину бічної панелі.

Щоб змінити колір фону будь-якого стилю на сторінці, клацніть назву відповідного стилю та змініть налаштування в розділі «Фон» панелі «Властивості».

Наприклад, у макетах CSS у Dreamweaver бічна панель визначається у стилі з назвою .sidebar1. Таким чином, щоб змінити колір фону, ви повинні натиснути .sidebar1 на панелі «Вибірки», вибрати категорію «Фон» на панелі «Властивості» та вибрати потрібний колір. Аналогічно, щоб змінити колір фону заголовка, виберіть стиль із назвою заголовка на панелі «Вибірки» та добре використовуйте колір.

Щоб додати зображення до заголовка:

Виберіть зображення-заповнювач із написом «Вставити логотип» і натисніть клавішу Delete або Backspace.

Виберіть «Вставка» → «Зображення» → «Зображення» та виберіть зображення за допомогою діалогового вікна «Вибір джерела зображення».

Замініть текст і вставте зображення на бічній панелі та в області основного вмісту.

Ви можете додавати або замінювати текст і вставляти зображення на будь-яку сторінку, створену за допомогою макета CSS, так само, як і на будь-якій іншій веб-сторінці.

Виберіть «Файл»→ «Зберегти все», щоб зберегти сторінку та стилі.