Как да центрирате оформление на страница с CSS полета в Dreamweaver

Dreamweaver ви позволява да центрирате оформлението си с помощта на CSS полета. Много дизайни на уеб страници са центрирани върху страницата, така че изглежда да плуват между страните на прозореца на браузъра, без значение колко широк или тесен става прозорецът. Това помага да се създаде илюзията, че дизайнът изпълва страницата, дори ако прозорецът на браузъра е много по-широк от дизайна на страницата.

Повечето дизайни на уеб страници, създадени с CSS, постигат този ефект, като създават такъв

маркер, който заобикаля цялото съдържание на страницата и след това прилага стил към него

маркер, който включва правило за стил, което центрира това

етикет. Както ще откриете в следващите инструкции стъпка по стъпка, създаване на стил за центриране на a

маркерът не е толкова очевиден, колкото може да си представите, но е лесен за изпълнение.

Честа практика е да се използва стил на ID за

маркер, който центрира вашия дизайн, и да го наречете #wrapper или #container.

Ако страницата ви все още не е настроена с a

маркирайте цялото си съдържание, ето съвет за добавяне на такъв. Първо щракнете и плъзнете, за да изберете целия текст, изображения и друго съдържание на страницата. След това изберете Insert→Layout Objects→Div Tag. В диалоговия прозорец Insert Div Tag се уверете, че опцията Wrap around Selection е избрана от падащия списък Insert.

Оставете останалите полета празни и щракнете върху OK, за да добавите a

маркирайте цялото съдържание на страницата си и сте готови за стъпките, които следват.

За да центрирате дизайн на цяла страница, уверете се, че a

тагът обгражда цялото съдържание на страницата и следвайте тези стъпки:

Щракнете върху знака плюс в панела CSS Designer Selectors.

В зависимост от това какво е на страницата, към панела за избор се добавя ново име на стил или празно поле, където можете да въведете име на стил.

Щракнете двукратно, за да изберете името, което Dreamweaver е добавил към панела и да го промените на името, което искате за вашия нов стил, или щракнете, за да изберете празното поле и въведете име.

Ако не е добавено име, въведете желаното име в празното поле. Можете да наименувате стила каквото искате, но не забравяйте да въведете точка преди името, ако създавате стил на клас, или знак # за стил на идентификация.

В панела Свойства посочете ширината, полетата и всички други настройки за форматиране, които искате да дефинирате.

Ширината за контейнера

етикетът е настроен на 980 пиксела. Ето трика за центриране на a

етикет като този: Задайте лявото и дясното поле на Автоматично. По този начин браузърът автоматично добавя еднакво количество поле от всяка страна на

маркер, ефективно центриращ го на страницата.

Изберете идентификатора, който заобикаля цялото съдържание на страницата.

За да сте сигурни, че сте избрали правилното

щракнете, за да поставите курсора някъде в основната част на страницата, след което щракнете върху

маркер, изброен най-отляво в Бърз селектор на маркери в долната част на работното пространство.

С

избран маркер, изберете името на стила, който сте създали от падащия списък с идентификатори в Инспектора на свойства.

Правилата за стил, които сте дефинирали, когато сте създали стила, се прилагат автоматично към

етикет. В този пример резултатът е, че размерът на

етикетът се променя на 980 пиксела широк и

таг и цялото му съдържание са центрирани на страницата.

Не всички функции работят, когато Dreamweaver е настроен на Live view. Въпреки че изгледът на живо е чудесен начин да визуализирате как ще изглежда дизайнът на вашите страници в повечето съвременни уеб браузъри, използването на функцията Live view прави много от инструментите за редактиране на Dreamweaver неизползваеми. Ако например инспекторът на свойствата изглежда затъмнен, когато искате да го използвате, уверете се, че бутонът на живо е премахнат.