Как да създадете лента за навигация от неподреден списък с връзки в Dreamweaver

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

Кредит: Снимки от istockphoto.com

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

Кредит: Снимки от istockphoto.com

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

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

Въведете текста, който искате да служите като връзки, като ги разделите чрез натискане на клавиша Return или Enter, за да създадете връщане на параграф.

За да форматирате връзките като неподреден списък, отделете всеки ред текст, който искате да свържете с a

етикет.

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

Плъзнете, за да изберете целия набор от връзки, и след това щракнете върху иконата Неподреден списък в инспектора на свойства.

В началото на всяка връзка се появява точка. Ако някоя връзка не е отбелязана с отделен водещ символ, щракнете, за да изтриете интервала между нея и връзката преди нея, и след това натиснете Return или Enter, за да разделите връзките с абзац.

За да добавите a

маркирайте списък с връзки (или друго съдържание, което вече е на страница), изберете съдържанието и след това щракнете върху иконата Div в панела Общо вмъкване.

Отваря се диалоговият прозорец Insert Div.

Добавяне на a

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

Изберете Wrap Around Selection от падащия списък Insert.

За по-прецизен контрол върху това къде добавяте нов

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

Въведете име в полето Class или ID.

А

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

В долната част на диалоговия прозорец Вмъкване на Div щракнете върху бутона Ново CSS правило.

Новото име на CSS правило се добавя към списъка с имена на стилове в панела CSS Designer Selectors.

В панела „Свойства“ посочете желаните от вас настройки за цвят, фон, размер, полета и подпълване.

Форматирането на стила се прилага автоматично към съдържанието на

маркер, защото сте приложили стила, както сте го създали в стъпки 5–7.

За да създадете съставен стил, който ще форматира неподредения списък само когато се използва в лентата за навигация, създайте съставен стил, който включва името на класа .navbar:

Поставете курсора си навсякъде в списъка с водещи символи.

Щракнете върху знака плюс (+) в горната част на панела за избор.

В полето Име на селектора се уверете, че Dreamweaver автоматично е въвел .navbar ul като име на нов стил в панела за избор.

В панела „Свойства“ задайте полетата и допълването на 0.

Създайте комбиниран стил, за да предефинирате етикетите за елементи от списъка:

Поставете курсора си навсякъде в списъка с водещи символи.

Щракнете върху знака плюс в горната част на панела за избор.

В полето Име на селектора се уверете, че Dreamweaver автоматично е въвел .navbar ul li като име на нов стил в панела за избор.

В панела Properties задайте Display на Inline.

Променете Тип стил на списък на Няма, за да премахнете водещия символ.

Задайте лявото и дясното поле на 20 пиксела.

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

Създайте стил, за да предефинирате маркера за връзка:

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

Щракнете върху знака плюс в горната част на панела за избор.

Ако искате да промените името на стила, щракнете двукратно върху името в панела за избор и въведете името, което искате да използвате.

В секцията Text на панела Properties задайте Text-Decoration на None.

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

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

Щракнете върху знака плюс в горната част на панела за избор.

В полето Име на селектора въведете .navbar a:hover.

В секцията Text на панела Properties задайте Text-Decoration на None.

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

Създайте нов стил, за да дефинирате отново маркера за посетена връзка, така че цветът на връзката да се промени, след като потребител щракне върху връзка:

Щракнете върху знака плюс в горната част на панела за избор.

В полето Име на селектора въведете .navbar a:visited.

В секцията Text на панела Properties задайте Text-Decoration на None.

Все още в секцията „Текст“ изберете цвят от цветната ямка, за да посочите цвета на връзката, след като е била посетена.

Щракнете върху бутона На живо в горната част на работното пространство или щракнете върху бутона Визуализация, за да видите страницата в браузър, за да видите ефекта от стиловете на връзката.