Es ejot no mūsu prakses projekta, es pieņemu, ka mēs izmantosim tipisku kolonnu izkārtojumu. Pirms es šo projektu prezentēju tiešsaistē un krāsās, es vēlos jums ļoti konkrēti parādīt, kā jūs paši varat ieviest kolonnu izkārtojumus. Šeit fokuss būs uz divu un trīs kolonnu izkārtojumiem, jo šie joprojām veido lielāko daļu no tīmekļa lapu pamata.
Vispārīgi, tīmekļu dizaina klasika būs divkolonnas izkārtojums. Parasti kreisajā loga daļā tiek parādīta navigācija, savukārt labajā kolonnā ir redzams faktiskais saturs. Saistībā ar blogiem šī rīcība ir mainījusies. Patiesībā daudzos blogos tiek rādīta navigācija vai reklāma pa labi, kamēr pa kreisi tiek prezentēts faktiskais saturs.
Šādas lietojumprogrammas var viegli ieviest CSS. Faktiski divkolonnas ir vienkāršākā izkārtojuma forma.
Nākamajā piemērā es parādīšu divkolonnas izkārtojumu, kas tiek realizēts ar absolūtiem procentuāliem vērtībām.
Šeit ir pilns piemērs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Izkārtojums ar absolūtu pozicionēšanu</div>
<div id="nav">Navigācija</div>
<div id="main">Šis ir saturs</div>
<div id="footer">Šeit ir autortiesību informācijas</div>
</body>
</html>Un tā izskatās pārlūkā:
Pa kreisi jūs varat ļoti vienkārši pārvietot labo kolonnu uz labo. Lai to izdarītu, pielāgojiet sekojošas instrukcijas:
• Pie #nav no vērtības left: 0 padariet vērtību right: 0.
• Iz mainiet margin-left uz vienkārši margin-right.
Pēc saglabāšanas izmaiņas tiks redzamas vēlamās rezultāts.
Lai gan šādam absolūtas pozicionēšanas izkārtojumam ir problēma: ja kreisās kolonnas saturs kļūst apjomīgāks, tas iziet pāri kājām zonai.
Par to vienkārši un skaidri liecina fakts, ka absolūti pozicionētiem elementiem netiek "atvēlēts vieta". Šo problēmu var atrisināt, ievietojot atbilstošus saturs galvenajā zonā kas ir garāks nekā kreisajā kolonnā.
Lūdzu, izmantojiet šo izkārtojuma formu tikai tad, ja esat pārliecināts, ka galvenais platums ir patiesi augstāks nekā kreisais (vai labais) stāvs.
Divkolonnas izkārtojums ar peldēšanu
float īpašību. Pārstrukturētā sintakse izskatās šādi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Izkārtojums ar absolūtu pozicionēšanu</div>
<div id="nav">Navigācijas apgabals</div>
<div id="main">Šis ir saturs</div>
<div id="footer">Šeit ir autortiesību informācijas.</div>
</body>
</html>Šeit abas kolonnas tiek aprīkotas ar float īpašību. Tā rezultātā kolonnas tagad tiek rindotas blakus viena otrai.
Kreisajai kolonnai ir piešķirta platums 20 procenti. Patiešām, pārliecinieties arī par to, ka elements, kuram ir piemērota float, vienmēr prasa platuma norādi.
Faktiskajam saturam ir piešķirts 80 procenti platumā. Arī šī zona ir novietota ar float: left. Tā rezultātā šī zona tiek attēlota blakus kreisajai kolonnai.
Lai pēc iespējas redzētu pamatzonas apakšdaļā esošo apakšzonu – jebkurā gadījumā zem kolonnas – tiek izmantota šāda sintakse:
#footer {
clear: both;
}
Es jau biju norādījis iespēju definēt savu klasi šai variantai.
Trīs kolonnas ar peldēšanu
Tīmekļu dizainā trīs kolonnas ir bieži izmantota variācija. Šeit tipiskā sadalījuma izskatās šādi:
• Kreisajā kolonnā ir navigācija.
• Centrālajā kolonnā ir faktiskais saturs.
• Pa labi tiek rādīti papildu informācija vai reklāmas.
Zemāk atrodams piemērs, kurā tiek radīts elastīgs trīs kolonnu izkārtojums. Sintakse – kuru jūs nekavējoties pamanīsiet – ir diezgan līdzīga iepriekš redzamai divkolonnai. Tomēr tagad ir papildu right div-zonas, kas pārstāv galveno labo loga kolonnu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Izkārtojums ar absolūtu novietojumu</div>
<div id="nav">Navigācijas apgabals</div>
<div id="main">Tas ir saturadarbības apgabals</div>
<div id="right">Tas ir labā kolonna</div>
<div id="footer">Šeit ir autortiesību informācija.</div>
</body>
</html>
Jaunajam apgabalam tika piešķirta platums 20 procenti. Tātad sadalījums izskatās šādi:
• Kreisā un labā kolonna katra aizņem 20 procentus no pieejamās reklāmas platības.
• Vidus kolonnai ir platums 60 procenti.
Izvēlota sintakse ļauj right apgabalu patiešām parādīt pa labi.
Sintakse šajā punktā ir tomēr elastīga. Jūs varētu pielāgot main apgabalu šādi:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Šeit `float` tiek iestatīts uz `right`. Tādējādi `right` apgabals pārvietojas uz kreiso pusi.
Šajā pamācībā jūs redzējāt, cik viegli ir definēt pamatizvietojumus, balstoties uz `float`. Šis zināšanu pamats tagad veido tīmekļa lapas izstrādes pamatu. Nākamajos pamācības solos tīmekļa lapa attīstīsies soli pa solim, sākot ar pamata struktūru.
