Како направити траку за навигацију од неуређене листе веза у Дреамвеаверу

Ево одличног ЦСС трика за претварање листе са набрајањем у траку за навигацију у Дреамвеавер-у помоћу једноставног ефекта преласка. Коришћење листе за набрајање за траке за навигацију је добро прихваћена конвенција за веб локације које испуњавају тренутне стандарде приступачности.

Кредит: Фотографије истоцкпхото.цом

Исте везе се и даље налазе у неуређеној листи, али примена стилова драматично мења њихов изглед.

Кредит: Фотографије истоцкпхото.цом

Да бисте креирали траку за навигацију користећи ЦСС за редефинисање неуређене листе и ознака веза, пратите ове кораке:

Кликните да бисте поставили курсор на место где желите да направите своју навигациону траку на страници.

Унесите текст који желите да послужите као везе, одвајајући сваку притиском на тастер Ретурн или Ентер да бисте креирали повратак пасуса.

Да бисте форматирали везе као неуређену листу, одвојите сваки ред текста који желите да повежете са а

таг.

Креирајте везе тако што ћете изабрати сваки део текста редом, кликнути на икону хипервезе на панелу Цоммон Инсерт, а затим изабрати страницу на коју желите да повежете или унесете УРЛ.

Превуците да бисте изабрали цео скуп веза, а затим кликните на икону Неуређена листа у Инспектору својстава.

Тачка се појављује на почетку сваке везе. Ако било која веза није означена посебним знаком за набрајање, кликните да бисте избрисали размак између ње и везе испред ње, а затим притисните Ретурн или Ентер да бисте одвојили везе повратним параграфом.

Да бисте додали а

означите око листе веза (или било ког другог садржаја који се већ налази на страници), изаберите садржај, а затим кликните на икону Див на панелу Цоммон Инсерт.

Отвара се оквир за дијалог Инсерт Див.

Додавање а

ознака око неуређене листе веза је корисна ако желите да додате форматирање.

На падајућој листи Уметање изаберите Обмотати избор.

За прецизнију контролу над тим где додајете нови

ознаку, можете изабрати опције са падајуће листе Инсерт на врху дијалога Инсерт Див.

Унесите име у поље Цласс или ИД поље.

А

ознака са именом класе или ИД-а који сте унели се аутоматски додаје на страницу која окружује листу линкова.

На дну дијалога Уметање Див кликните на дугме Ново ЦСС правило.

Ново име ЦСС правила се додаје на листу назива стилова у панелу ЦСС Десигнер Селецторс.

У панелу Својства наведите жељена подешавања за боју, позадину, величину, маргине и паддинг.

Форматирање стила се аутоматски примењује на садржај

таг јер сте применили стил онако како сте га креирали у корацима 5–7.

Да бисте креирали сложени стил који ће форматирати неуређену листу само када се користи на траци за навигацију, креирајте сложени стил који укључује име класе .навбар:

Поставите курсор било где на листи са набрајањем.

Кликните на знак плус (+) на врху панела Селектори.

У пољу Име селектора, уверите се да је Дреамвеавер аутоматски унео .навбар ул као назив новог стила на панелу Селектори.

У панелу Својства поставите маргине и паддинг на 0.

Направите сложени стил да бисте редефинисали ознаке ставки листе:

Поставите курсор било где на листи са набрајањем.

Кликните на знак плус на врху панела Селектори.

У пољу Име селектора, уверите се да је Дреамвеавер аутоматски унео .навбар ул ли као назив новог стила на панелу Селектори.

У панелу Својства подесите екран на Инлине.

Промените Тип стила листе на Ниједан да бисте уклонили набрајање.

Поставите леву и десну маргину на 20 пиксела.

Овај корак одваја ставке листе једну од друге на хоризонталној листи. Можете да промените поставку да бисте направили количину простора између веза која најбоље одговара вашем дизајну.

Направите стил да бисте редефинисали ознаку везе:

Кликните да поставите курсор унутар везе на навигационој траци.

Кликните на знак плус на врху панела Селектори.

Ако желите да промените име стила, двапут кликните на име у панелу Селектори и унесите име које желите да користите.

У одељку Тект панела Пропертиес, подесите Тект-Децоратион на Ноне.

Још увек у одељку Текст, изаберите боју из бунара за боје да бисте одредили боју веза када се учитају на страницу.

Направите нови стил да бисте редефинисали ознаку линка за лебдење тако да ће се боја везе променити када корисник пређе курсором преко везе:

Кликните на знак плус на врху панела Селектори.

У поље Име бирача унесите .навбар а:ховер.

У одељку Тект панела Пропертиес, подесите Тект-Децоратион на Ноне.

Још увек у одељку Текст, изаберите боју из бунара за боје да бисте навели боју везе када корисници пређу курсором преко везе.

Направите нови стил да бисте редефинисали посећену ознаку везе тако да се боја везе промени након што корисник кликне на везу:

Кликните на знак плус на врху панела Селектори.

У поље Име бирача унесите .навбар а:виситед.

У одељку Тект панела Пропертиес, подесите Тект-Децоратион на Ноне.

Још увек у одељку Текст, изаберите боју из бунара за боје да бисте одредили боју везе након што је посећена.

Кликните на дугме Уживо на врху радног простора или кликните на дугме Преглед да бисте видели страницу у прегледачу и видели ефекат стилова везе.