Як центрувати макет сторінки за допомогою полів CSS у Dreamweaver

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

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

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

тег, який містить правило стилю, яке центрує його

тег. Як ви дізнаєтеся в наступних покрокових інструкціях, створення стилю для центрування a

тег не такий очевидний, як ви можете собі уявити, але його легко реалізувати.

Поширеною практикою є використання стилю ідентифікатора для

тег, що центрує ваш дизайн, і назвати його #wrapper або #container.

Якщо ваша сторінка ще не налаштована за допомогою a

позначте тегами весь свій вміст, ось порада, як додати його. Спочатку клацніть і перетягніть, щоб вибрати весь текст, зображення та інший вміст на сторінці. Потім виберіть Вставка→Об’єкти макета→Тег Div. У діалоговому вікні «Вставити тег Div» переконайтеся, що у спадному списку «Вставити» вибрано параметр «Обгорнути виділення».

Залиште решту полів порожніми та натисніть OK, щоб додати a

позначте тегами весь вміст своєї сторінки, і ви готові до наступних кроків.

Щоб центрувати весь дизайн сторінки, переконайтеся, що a

тег оточує весь вміст сторінки, і виконайте такі дії:

Клацніть знак плюс на панелі вибору CSS Designer.

Залежно від того, що знаходиться на сторінці, до панелі вибору додається нова назва стилю або порожнє поле, куди можна ввести назву стилю.

Двічі клацніть, щоб вибрати ім’я, яке Dreamweaver додав до панелі, і змінити його на ім’я, яке потрібно для нового стилю, або клацніть, щоб вибрати порожнє поле та ввести ім’я.

Якщо ім’я не додано, введіть потрібне ім’я в порожнє поле. Ви можете називати стиль як завгодно, але не забудьте ввести крапку перед назвою, якщо ви створюєте стиль класу, або знак # для стилю ідентифікатора.

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

Ширина для контейнера

тег встановлено на 980 пікселів. Ось трюк із центруванням a

такий тег: Установіть для лівого та правого полів значення Авто. Таким чином, браузер автоматично додає однакову кількість поля на кожній стороні

тег, фактично центруючи його на сторінці.

Виберіть ідентифікатор, який оточує весь вміст сторінки.

Щоб переконатися, що ви вибрали правильний

клацніть, щоб розмістити курсор будь-де в основній частині сторінки, а потім натисніть кнопку

тег, зазначений крайній ліворуч у швидкому виборі тегів у нижній частині робочої області.

З

вибрано тег, виберіть назву стилю, який ви створили, зі спадного списку ID в інспекторі властивостей.

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

тег. У цьому прикладі результатом є розмір

тег змінено на 980 пікселів у ширину і

тег і весь його вміст по центру сторінки.

Не всі функції працюють, якщо для Dreamweaver встановлено режим Live View. Хоча перегляд у реальному часі — це чудовий спосіб попереднього перегляду того, як виглядатиме дизайн ваших сторінок у більшості сучасних веб-браузерів, використання функції перегляду в реальному часі робить багато інструментів редагування Dreamweaver непридатними. Якщо, наприклад, інспектор властивостей виявляється затемненим, коли ви хочете його використовувати, переконайтеся, що кнопка Live знято.