Създаване на сайт с Dreamweaver MX 2004, PHP и MySQL , Урок 1.4

Прилагане на CSS към Вашия blog


За да дефинирате CSS стил за Вашия сайт, Вие използвате Design панела. Ще предефинирате изгледа на HTML таговете <body> и <a> и ще създадете 6 нови CSS класа, както следва:

.nugget - определя форматирането на nuggets ( къс самородно злато ) вляво
.nugheader - дефинира форматирането на nugget хедъра
.nugbody - дефинира форматирането на nugget тялото
.topic - дефинира форматирането на списъка със статии
.topheader - дефинира формата на хедъра на статията
.topbody - дефинира форматирането на описанието на статията



фиг.26. nugget CSS класовете



фиг.27. CSS класове за статията

В следващите няколко стъпки ще дефинирате кожата ( skin ) на сайта. Можете да промените изгледа на Вашия сайт от единствен файл наречен blog.css. За да създадете този файл:

Отворете страницата blgtemplate.
Изберете таба CSS Styles от панела Design. Ако не е отворен, тогава Window > CSS Styles.
Кликнете иконата New CSS Style в долната част на панела. Dreamweaver отваря диалоговия прозорец New CSS Style.
Стартираме с дефиниране на основното форматиране на документа и това е тага <body>

Изберете Tag като selector type.
Изберете body от менюто Tag.
Накрая изберете да дефинирате новия стил във new style sheet file, както е показано на фиг.28
Кликнете Ok.


фиг.28 Употреба на диалоговия прозорец New CSS Style за предефиниране на body тага

Dreamweaver Ви пита дали да създаде нов CSS файл. Наименувайте го blog.css и го запишете в папката Templates на Вашия сайт.
Кликнете Save. Файла е създаден и диалоговия прозорец CSS Style Definition Ви приканва да конфигурирате форматирането на тага <body> , както е показано на фиг.29.
В категорията Type , задайте на Font: Verdana, Arial, Helvetica, sans-serif и Size:10 pixels.
В категорията Box , задайте на атрибутите Padding и Margin, за да елиминирате белите пространства между елементите на страницата.


фиг.29. CSS Style Definition за тага body

Ок.
Сега дефинирайте форматирането на линковете. Първо ще редактирате форматирането на линковете в основи ( тага <a> ) и след това ще приложите специално форматиране за ефектите посетени линкове и mouse-over.

Следвайте стъпките описани горе за дефиниране на нов CSS стил. Този път изберете a от Tag списъка. Помнете че трябва да дефинирате във същия blog.css файл. Задайте следните атрибути в категорията Type на диалоговия прозорец CSS Style Definition.

Decoration: none
Color: #004080
Редактирайте състоянието hover (навъртам се , кръжа ) на линка:

Кликнете иконата New CSS Style.
В показалия се диалогов прозорец, изберете:
Selector Type: Advanced
Selector: a:hover
Define in: blog.css
Кликнете Ок когато сте готови.
Задайте следните атрибути в категорията Type на конфигурационния прозорец CSS Style Definition.
Decoration: underline
Color: #20086B
Накрая следвайте същите стъпки за да дефинирате форматирането на състоянието посетен линк. Този път единственият атрибут който определяте е :

Color: #0080C0
Забележка: Линк таговете наследяват font атрибутите на <body> тага, освен ако не зададете други. Единственият атрибут, който е специфичен за <a> е цвета. В основи, вътрешните тагове наследяват CSS атрибутите на заобикалящите ги тагове.

След като сте финиширали с модифицирането на съществуващите HTML тагове, Вие ще дефинирате 6 CSS класа, които се използват като описаните по-нагоре. Използвайте следните стъпки за да създадете custom стил, който можете да приложите като клас атрибут към блок от текст примерно.

Кликнете иконата New CSS Style от Design панела
В диалоговия прозорец New CSS Style , задайте следната информация:
Name: Въведете име на Вашия клас, предхождано от символа ( . ) - от рода на: .nugget или .topic.
Selector type: Class
Define in: blog.css
Забележка: Имената на класовете трябва да започват с точка и могат да съдържат всяка комбинация от букжи и цифри. Ако не поставите точка Dreamweaver ще я постави вместо Вас.

Следва цялостния списък от форматиращи опции, които трябва да зададете за custom стиловете:

CSS Category CSS Properties
.nugget Box

Border
Padding: Same for all, 5 pixels

Margin: Bottom, 10 pixels

Style: Same for all, dotted

Width: Same for all, 1 pixel

Color: Same for all, #C0C0C0

--------------------------------------------------------------------------------

.nugheader Type

Background
Size: 12 pixels

Weight: bolder

Background color: #99CCFF

--------------------------------------------------------------------------------

.nugbody Background
Background-color: #F4F4F4
--------------------------------------------------------------------------------

.topic Box

Border
Padding Top: 10 pixels, Right: 7 pixels

Bottom: 10 pixels, Left: 7 pixels

Style: Same for all, dotted

Width: Same for all, 1 pixel

Color: Same for all, #C0C0C0


--------------------------------------------------------------------------------




.topheader Type

Background
Size: 12 pixels

Background color: #F4F4F4

--------------------------------------------------------------------------------

.topbody Type Style: italic

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



фиг.30. таба CSS Styles показващ стиловете за blog.css stylsheet

Убедете се че сте записали темплейта и blog.css файловете. Dreamweaver ще отправи запитване за ъпдейт на всички страници базирани на темплейта. Ъпдейтвайте. Можете да използвате дефинираните CSS стилове във всички страници базирани на blgtemplate, след като съдържа линк към blog.css файла.

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

Отворете страницата blgtemplate и приложете CSS стиловете към менюто използвайки следните стъпки.

Върху таг селектора възпроизведете дясно кликване върху тага <table> съдържащ менюто с темите и изберете Set Class > nugget от появилото се меню


фиг.31. Задаване на клас за тага <table>

По подобен начин действайте и с тага <td> съдържащ хедъра на менюто и изберете Set Class > nugheader.
Накрая с дясно кликване върху тага <td> съдържащ тялото на менюто, изберете Set Class > nugbody.
Запишете с клавишна комбинация Ctrl + S . Dreamweaver Ви пита да ъпдейтва ли страниците базирани на темплейта blgtemplate. Кликнете Update


фиг.32. Ъпдейт на файловете базирани на темплейта

Диалоговия джам Update Pages показва списък с ъпдейтваните файлове.След приключване натиснете Close.


фиг.33. Ъпдейт на страниците

Забележка: има още нещо: понеже Dreamweaver използва документ релативния линк за blog.css във blgtemplate, CSS файла е недостъпен за документите базирани на този темплейт. Следните стъпки фиксират нещата:

Отворете файла blgtemplate в Code view кликвайки бутона Code от документ прозореца
натиснете Ctrl + F за да отворите Find and Replace прозореца.
Въведете този търсен низ blg.css и кликнете Find Next.


фиг.34. ъпдейт на CSS файла използван от страниците

Dreamweaver открива текста на този ред от кода

<link href="Templates/blog.css" rel="stylesheet" type="text/css">

модифицирайте кода както следва:
<link href="Templates/blog.css" rel="stylesheet" type="text/css">

Съхранете blgtemplate и изберете да ъпдейтвате всички файлове базирани на него.
Сега отворете страницата topic.php и приложете CSS стиловете към списъка със статии:

Върху таг селектора, с дясно кликване върху тага <table> , съдържащ списъка със статии, изберете Set Class > topic от появилото се меню.
Подобно направете и за тага <tr>, съдържащ заглавието на статията и изберете Set Class > topheader.


фиг.35. Избор на клас за тага <table>

Дясно кликнете тага <td>, съдържащ описанието на статията и изберете Set Class > topbody.
Запишете страницата и я прегледайте в браузъра.
Следвайте същите процедури за да форматирате другите страници, използвайки CSS стиловете.


фиг.36. хм....добре изглежда

Използвайте въображението си!

Следва продължение с Урок 2.0


/ Трябва да сте регистриран за да напишете коментар /