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

След като създадете нова страница с CSS оформление в Dreamweaver, имате привидно безкраен брой опции за редактирането й, но първо трябва да определите кои стилове в стиловата таблица отговарят на елементите, които искате да редактирате.

Както вероятно можете да си представите, можете да редактирате стиловете в CSS оформление по много начини, за да създадете свои собствени дизайни.

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

Как да проверите наличните стилове и да направите основни редакции

Можете да използвате същите тези основни инструкции с всяко CSS оформление, включено в Dreamweaver. За да редактирате стилове в CSS оформление, следвайте тези стъпки:

Отворете файл на страница, базиран на CSS оформление на Dreamweaver, и изберете Window→CSS Styles (или щракнете върху раздела CSS Designer, за да разгънете панела).

Панелът на CSS Designer се отваря или разширява.

Щракнете, за да изберете името на стиловата таблица в панела Източници в горната част на CSS Designer.

Всички стилове, свързани с новата страница, са изброени в панела за избор.

Изберете името на всеки стил, посочен в панела CSS Designer Selectors.

Съответните CSS правила, дефинирани за стила, се показват в панела Properties, в долната част на панела CSS Designer. Щракването върху списъка със стилове и прегледът на съответните им правила е добър начин да получите бърз преглед на дизайна и да видите къде се съхраняват различните опции за форматиране на страници.

Таговете за заглавка, .nav и долен колонтитул на HTML5 контролират основните секции на страницата. Например стилът на заглавката включва правило, което прави цвета на фона зелен. По този начин, за да промените цвета на областта на заглавката в горната част на страницата, променяте настройката за цвета на фона в правилото за заглавката.

Как да редактирате настройките за цялата страница

За да редактирате настройки за цялата страница — като например цвета на фона на страницата или основния шрифт, размер и цвят на текста, използван в цялата страница — следвайте тези стъпки:

В панела CSS Designer Selectors изберете стила с име body.

Свойствата, дефинирани в избраното правило за стил, се показват в панела Properties.

Щракнете върху иконата T в горната част на панела със свойства и променете или добавете желания шрифт и други текстови настройки.

Можете да промените шрифта, размера, стила и теглото. За да промените разстоянието между редовете с текст, променете височината на реда.

Превъртете надолу до областта на фона на панела Properties и използвайте добре цвета в полето Background-Color, за да посочите цвят за целия фон на страницата.

Като алтернатива можете да въведете произволен шестнадесетичен цветен код в полето Цвят на фона или да използвате пипетката, за да пробвате всеки цвят. За да добавите фоново изображение, щракнете в полето за URL адрес в секцията Фон и след това щракнете върху бутона Преглед, който се показва, и изберете изображението, което искате да служите като фон. Използвайте иконите за повторение на фона, за да посочите как трябва да се повтаря фоновото изображение на страницата.

Направете всякакви други промени или допълнения към правилото за стил.

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

Как да персонализирате областите със съдържание

За да промените ширината или други настройки на основните области на съдържанието, които контролират общия размер на страницата и горния, долния колонтитул и страничната лента, следвайте тези стъпки:

За да промените ширината на цялата основна област на дизайна:

Щракнете върху стила .container в панела Селектори на панела на CSS Designer.

Свойствата на правилото за стил .container се показват в панела Properties, където можете също да редактирате стила.

Променете размера в полето Ширина или въведете ново число за желаната ширина на страницата.

Ширината на дизайна на страницата се променя автоматично в зависимост от размера, който сте въвели. Когато промените ширината на стила .container, вие променяте ширината на целия дизайн, защото всички

таговете и други елементи се съдържат в

форматирани със стил .container — и всички те са готови да се разширят, за да запълнят .container

.

За да промените размера на областта на съдържанието на страницата, изберете стила с име .content и посочете размера и другите опции, които желаете в панела Properties.

Ако промените ширината на областта на съдържанието в оформление, което включва странична лента, трябва да промените и ширината на страничната лента.

За да промените цвета на фона на всеки стил на страницата, щракнете върху името на съответния стил и променете настройките в секцията Фон на панела Свойства.

Например, в оформленията на CSS в Dreamweaver страничната лента е дефинирана в стил с име .sidebar1. По този начин, за да промените цвета на фона, трябва да щракнете върху .sidebar1 в панела „Селектори“, да изберете категорията „Фон“ в панела „Свойства“ и да изберете цвета, който искате. По същия начин, за да промените цвета на фона на заглавката, изберете стила с име заглавие в панела за избор и използвайте добре цвета.

За да добавите изображение към заглавката:

Изберете изображението за място с етикет Insert Logo и натиснете клавиша Delete или Backspace.

Изберете Вмъкване → Изображение → Изображение и изберете изображение с помощта на диалоговия прозорец Избор на източник на изображение.

Заменете текст и вмъкнете изображения в страничната лента и областите на основното съдържание.

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

Изберете File→Save All, за да запазите страницата и стиловете.