Kā izveidot navigācijas joslu no nesakārtota saišu saraksta pakalpojumā Dreamweaver

Šis ir lielisks CSS triks, lai ar vienkāršu apgāšanās efektu pārvērstu sarakstu ar aizzīmēm par navigācijas joslu programmā Dreamweaver. Navigācijas joslu saraksta izmantošana ar aizzīmēm ir plaši pieņemta prakse vietnēm, kas atbilst pašreizējiem pieejamības standartiem.

Kredīts: istockphoto.com fotoattēli

Tās pašas saites joprojām ir iekļautas nesakārtotajā sarakstā, taču stilu pielietojums krasi maina to izskatu.

Kredīts: istockphoto.com fotoattēli

Lai izveidotu navigācijas joslu, izmantojot CSS, lai atkārtoti definētu nesakārtoto sarakstu un saišu tagus, veiciet šīs darbības:

Noklikšķiniet, lai novietotu kursoru vietā, kur vēlaties izveidot navigācijas joslu lapā.

Ievadiet tekstu, kuru vēlaties izmantot kā saites, atdalot katru, nospiežot taustiņu Return vai Enter, lai izveidotu rindkopas atgriešanu.

Lai formatētu saites kā nesakārtotu sarakstu, atdaliet katru teksta rindiņu, kuru vēlaties saistīt ar a

tagu.

Izveidojiet saites, pēc kārtas atlasot katru teksta daļu, panelī Common Insert noklikšķinot uz hipersaites ikonas un pēc tam atlasot lapu, uz kuru vēlaties izveidot saiti, vai ievadot URL.

Velciet, lai atlasītu visu saišu kopu, un pēc tam īpašumu inspektorā noklikšķiniet uz ikonas Nesakārtots saraksts.

Katras saites sākumā tiek parādīta aizzīme. Ja kāda saite nav ieskaitīta ar atsevišķu aizzīmi, noklikšķiniet, lai dzēstu atstarpi starp to un saiti pirms tās, un pēc tam nospiediet taustiņu Return vai Enter, lai atdalītu saites ar rindkopas atgriešanu.

Lai pievienotu a

atzīmējiet saišu sarakstu (vai jebkuru citu saturu, kas jau atrodas lapā), atlasiet saturu un pēc tam noklikšķiniet uz ikonas Div panelī Common Insert.

Tiek atvērts dialoglodziņš Insert Div.

Pievienojot a

tags ap nesakārtoto saišu sarakstu ir noderīgs, ja vēlaties pievienot formatējumu.

Nolaižamajā sarakstā Ievietot izvēlieties Aplauzt atlasi.

Lai precīzāk kontrolētu, kur pievienot jaunu

tagu, varat izvēlēties opcijas nolaižamajā sarakstā Ievietot dialoglodziņa Ievietot sadalīšanas augšdaļā.

Laukā Class vai ID ievadiet nosaukumu.

A

tags ar ievadīto klases vai ID nosaukumu tiek automātiski pievienots lapai, kas aptver saišu sarakstu.

Dialoglodziņa Insert Div apakšā noklikšķiniet uz pogas Jauns CSS kārtula.

Jaunais CSS kārtulas nosaukums tiek pievienots stilu nosaukumu sarakstam panelī CSS Designer Selectors.

Rekvizītu panelī norādiet vēlamos krāsu, fona, izmēra, piemaļu un polsterējuma iestatījumus.

Stila formatējums tiek automātiski piemērots saturam

tagu, jo izmantojāt stilu, kā to izveidojāt 5.–7. darbībā.

Lai izveidotu saliktu stilu, kas formatēs nesakārtoto sarakstu tikai tad, kad tas tiek izmantots navigācijas joslā, izveidojiet saliktu stilu, kas ietver klases nosaukumu .navbar:

Novietojiet kursoru jebkurā aizzīmju sarakstā.

Noklikšķiniet uz pluszīmes (+) atlasītāju paneļa augšdaļā.

Laukā Selector Name pārliecinieties, vai Dreamweaver panelī Selectors automātiski ievadīja .navbar ul kā jauna stila nosaukumu.

Rekvizītu panelī iestatiet piemales un polsterējumu uz 0.

Izveidojiet saliktu stilu, lai atkārtoti definētu saraksta elementu tagus:

Novietojiet kursoru jebkurā aizzīmju sarakstā.

Noklikšķiniet uz pluszīmes atlasītāju paneļa augšdaļā.

Laukā Selector Name pārliecinieties, vai Dreamweaver panelī Selectors automātiski ievadīja .navbar ul li kā jaunā stila nosaukumu.

Rekvizītu panelī iestatiet displeju uz Iekļauts.

Lai noņemtu aizzīmi, mainiet saraksta stila veidu uz Nav.

Iestatiet kreiso un labo malu uz 20 pikseļiem.

Šī darbība horizontālajā sarakstā atdala saraksta vienumus vienu no otra. Varat mainīt iestatījumu, lai starp saitēm izveidotu tādu atstarpi, kas vislabāk atbilst jūsu dizainam.

Izveidojiet stilu, lai atkārtoti definētu saites tagu:

Noklikšķiniet, lai novietotu kursoru saitē navigācijas joslā.

Noklikšķiniet uz pluszīmes atlasītāju paneļa augšdaļā.

Ja vēlaties mainīt stila nosaukumu, veiciet dubultklikšķi uz nosaukuma panelī Selectors un ievadiet nosaukumu, kuru vēlaties izmantot.

Rekvizītu paneļa sadaļā Teksts iestatiet Text-Decoration uz None.

Joprojām sadaļā Teksts izvēlieties krāsu no krāsu iedobes, lai norādītu saišu krāsu, kad tās tiek ielādētas lapā.

Izveidojiet jaunu stilu, lai atkārtoti definētu virzīšanas saites tagu, lai saites krāsa mainītos, kad lietotājs virzīs kursoru virs saites:

Noklikšķiniet uz pluszīmes atlasītāju paneļa augšdaļā.

Laukā Atlasītāja nosaukums ievadiet .navbar a:hover.

Rekvizītu paneļa sadaļā Teksts iestatiet Text-Decoration uz None.

Joprojām sadaļā Teksts izvēlieties krāsu no krāsu iedobes, lai norādītu saites krāsu, kad lietotāji virza kursoru virs saites.

Izveidojiet jaunu stilu, lai atkārtoti definētu apmeklētās saites tagu, lai saites krāsa mainītos pēc tam, kad lietotājs noklikšķina uz saites:

Noklikšķiniet uz pluszīmes atlasītāju paneļa augšdaļā.

Laukā Atlasītāja nosaukums ievadiet .navbar a:visited.

Rekvizītu paneļa sadaļā Teksts iestatiet Text-Decoration uz None.

Joprojām sadaļā Teksts izvēlieties krāsu no krāsu iedobes, lai norādītu saites krāsu pēc tās apmeklēšanas.

Noklikšķiniet uz pogas Tiešraide darbvietas augšdaļā vai noklikšķiniet uz pogas Priekšskatījums, lai skatītu lapu pārlūkprogrammā un redzētu saišu stilu efektu.