Š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.
Photoshop CS6 saglabā visas iepriekšējo versiju funkcijas un pievieno jaunas, nodrošinot labāku lietotāja pieredzi, radošumu un produktivitāti. Iepazīstiet jaunas rīku iespējas un komandas.
Uzziniet, kā efektīvi sapludināt slāņus programmā Photoshop CS6, lai samazinātu faila izmēru un uzlabotu veiktspēju, izmantojot slāņu sapludināšanu un attēla saplacināšanu.
Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.
Kad esat importējis savus attēlus programmā Adobe XD, jums nav lielas rediģēšanas vadības iespējas, taču varat mainīt attēlu izmērus un pagriezt tos tāpat kā jebkuru citu formu. Varat arī viegli noapaļot importēta attēla stūrus, izmantojot stūra logrīkus. Attēlu maskēšana Nosakot slēgtu formu […]
Kad jūsu Adobe XD projektā ir teksts, varat sākt mainīt teksta rekvizītus. Šie rekvizīti ietver fontu saimi, fonta lielumu, fonta svaru, līdzinājumu, rakstzīmju atstarpes (rindstarpas un izsekošanu), rindstarpu (vadošais), aizpildījumu, apmali (pārvilkšanu), ēnu (krītošā ēna) un fona aizmiglojumu. Tātad, apskatīsim, kā šie rekvizīti tiek piemēroti. Par lasāmību un fontu […]
Tāpat kā programmā Adobe Illustrator, Photoshop zīmējumu dēļi nodrošina iespēju vienā dokumentā izveidot atsevišķas lapas vai ekrānus. Tas var būt īpaši noderīgi, ja veidojat ekrānus mobilajai lietojumprogrammai vai nelielai brošūrai. Jūs varat domāt par zīmējumu dēli kā īpašu slāņu grupas veidu, kas izveidots, izmantojot paneli Slāņi. Tā […]
Daudzi rīki, kas atrodami panelī InDesign Tools, tiek izmantoti līniju un formu zīmēšanai lapā, tāpēc jums ir vairāki veidi, kā izveidot interesantus zīmējumus savām publikācijām. Programmā InDesign varat izveidot jebko, sākot no pamata formām līdz sarežģītiem zīmējumiem, tā vietā, lai izmantotu zīmēšanas programmu, piemēram, […]
Teksta iesaiņošana programmā Adobe Illustrator CC nav gluži tas pats, kas dāvanas iesaiņošana — tas ir vienkāršāk! Teksta aplaušana liek tekstam aptīt grafiku, kā parādīts šajā attēlā. Šī funkcija var pievienot mazliet radošuma jebkuram gabalam. Grafika liek tekstam aptīt to. Vispirms izveidojiet […]
Veidojot dizainu programmā Adobe Illustrator CC, bieži vien ir nepieciešams precīzs izmērs (piemēram, 2 x 3 collas). Pēc formas izveides vislabākais veids, kā mainīt tās izmērus precīziem izmēriem, ir izmantot pārveidošanas paneli, kas parādīts šajā attēlā. Atlasiet objektu un pēc tam izvēlieties Logs → Transform to […]
Varat izmantot programmu InDesign, lai izveidotu un modificētu QR koda grafiku. QR kodi ir svītrkoda veids, kurā var saglabāt informāciju, piemēram, vārdus, ciparus, URL vai cita veida datus. Lietotājs skenē QR kodu, izmantojot savu kameru un programmatūru ierīcē, piemēram, viedtālrunī, un programmatūra izmanto […]
