Nenokavēti izkārtojumi Atveriet jaunas dizaina robežas
Ir daudz iemeslu neizmantot tabulas izkārtojumam . Viens no biežākajiem iemesliem, kādēļ cilvēki turpina tos izmantot, ir tas, ka ir grūti izdarīt izkārtojumu ar CSS. Lai gan CSS skripti ietver mācīšanās līkni, ja jūs saprotat, kā veikt CSS izkārtojumu, jūs varētu būt pārsteigts, cik viegli tas var. Un, kad jūs uzzināsiet, jums būs jārisina otrais visbiežākais iemesls, kādēļ cilvēki nespēj izmantot CSS - "Tas ir ātrāk rakstīt tabulas." Tas ir ātrāk, jo jūs zināt tabulas, bet, tiklīdz jūs apgūstat CSS, jūs varētu būt tikpat ātri ar to.
Pārlūkprogrammas atbalsts CSS pozicionēšanai
CSS pozicionēšana ir labi atbalstīta visās mūsdienu pārlūkprogrammās . Ja vien jūs neesat izveidojis Netscape 4 vai Internet Explorer 4 vietni, jūsu lasītājiem nevajadzētu radīt nekādas problēmas, skatot jūsu CSS izvietotās tīmekļa lapas.
Pārdomājiet, kā veidojat lapu
Kad jūs izveidojat vietni, izmantojot tabulas, jums ir jādomā tabulā . Citiem vārdiem sakot, jūs domājat par šūnām un rindām un kolonām. Jūsu tīmekļa lapas atspoguļos šo pieeju. Pārceļoties uz CSS pozicionēšanas dizainu, jūs sākat domāt par savām lapām satura ziņā, jo saturu citā satura augšpusē var ievietot visur, kur jūs vēlaties, izkārtojumā.
Dažādām vietnēm ir atšķirīgas struktūras. Lai izveidotu efektīvu lapu, pirms satura piešķiršanas tam izvērtējiet jebkuras lapas struktūru. Piemēra lapa var ietvert piecas atšķirīgas sadaļas:
- Galvenes . Mājas banner reklāmai, vietnes nosaukumam, navigācijas saitēm, raksta nosaukumam un kā arī dažām citām lietām.
- Labā sleja Šī ir labā lapas puse ar meklēšanas lodziņu, reklāmām, videoklipu kastēm un iepirkšanās vietām.
- Saturs . Raksta teksts, emuāra ziņa vai iepirkumu grozs - lapas gaļa un kartupeļi.
- Inline reklāmas . Reklāmas ievieto saturam.
- Kājene . Apakšējā navigācija, autora informācija, informācija par autortiesībām, zemākas reklāmkarogas un saistītas saites.
Tā vietā, lai notīrītu šos piecus elementus tabulā, izmantojiet HTML5 sadaļas elementus, lai noteiktu dažādas satura daļas, un pēc tam izmantojiet CSS pozicionēšanu, lai ievietotu satura elementus lapā.
Jūsu satura sadaļu noteikšana
Kad esat definējis dažādus savas vietnes satura apgabalus, jums ir jāraksta tos savā HTML formātā. Lai gan jūs parasti varat izvietot savas sadaļas jebkurā secībā, vispirms ir jāievieto vissvarīgākās lapas daļas. Šī pieeja palīdzēs arī meklētājprogrammu optimizācijai.
Lai parādītu pozicionēšanu, iestatiet lapu ar trim kolonnām, bet bez galvenes vai kājenes. Jūs varat izmantot pozicionēšanu, lai izveidotu jebkura veida izkārtojumu, kas jums patīk.
Lai izveidotu trīs kolonnu izkārtojumu, definējiet trīs sadaļas: kreisā kolonna, labā sleja un saturs.
Šīs sadaļas tiks izmēģinātas, izmantojot satura elementu ARTICLE un divu sleju divus SECTION elementus. Visam būs arī atribūts, kas to identificēs. Ja izmantojat id atribūtu, katram ID ir jāpiesaka unikāls nosaukums.
Satura pozicionēšana
Izmantojot CSS, definējiet savu ID ID elementu atrašanās vietu. Saglabājiet informāciju par savu pozīciju stila izsaukumā, piemēram:
#content {
}
Šajos elementos saturs aizņem tik daudz vietas, cik tas ir iespējams, proti, 100 procenti no pašreizējās atrašanās vietas platuma vai lapas. Lai ietekmētu sadaļas atrašanās vietu, nepiespiežot to fiksētam platumam, mainiet polsterējumu vai maržas īpašības.
Šim izkārtojumam iestatiet abas kolonnas fiksētam platumam un pēc tam iestatiet to pozīciju absolūti, lai tos neietekmētu to atrašanās vieta, kas atrodas HTML.
# kreisās slejas {
amats: absolūti;
pa kreisi: 0;
platums: 150 pikseļi;
margin-left: 10px;
margin-top: 20 pikseļi;
krāsa: # 000000;
polsterējums: 3 pikseļi;
}
# labā sleja {
amats: absolūti;
pa kreisi: 80%;
top: 20 pikseļi;
platums: 140 pikseļi;
polsterējums pa kreisi: 10 pikseļi;
z-indekss: 3;
krāsa: # 000000;
polsterējums: 3 pikseļi;
}
Tad satura apgabalam labajā un kreisajā pusē iestatiet maržas, lai saturs netiktu pārklāts abās ārpusē esošās kolonnas.
#content {
top: 0 pikseļi;
starpība: 0px 25% 0 165px;
polsterējums: 3 pikseļi;
krāsa: # 000000;
}
Lai definētu savu lapu, izmantojot CSS, nevis HTML tabulu, ir vajadzīga nedaudz vairāk tehniskās prasmes, taču peļņa izriet no elastīgākiem un atsaucīgākiem dizainparaugiem un vieglāku strukturālo pielāgošanu jūsu lapai vēlāk.