Pirms prakstiski ieviešat izkārtojumu, ir jānoskaidro daži pamata jautājumi. Tāpēc vispirms jums ir jāizlemj par izkārtojuma veidu. Pamatā šeit ir trīs iespējas.
• Fiksēta
• Elastīga
• Elastīga
CSS ļauj izveidot izkārtojumus ar fiksētām vai elastīgām dimensijām. Fiksētie izkārtojumi parasti tiek veidoti, izmantojot pikseļu mērvienības. Elastīgie izkārtojumi, savukārt, ir balstīti uz procentuālajām vērtībām. Šiem abiem izkārtojuma veidiem ir savas priekšrocības un trūkumi.
Fiksētos izkārtojumus parasti izmanto, ja grafika tiek izmantota kā izkārtojuma veidojoša sastāvdaļa. (Lai gan arī šeit, izmantojot CSS fona grafikas, var būt izņēmumi). Ja izkārtojumiem ir nepieciešama precīza elementu pozicionēšana pikseļos, parasti tiek izmantots fiksētais pozicionējums. Šajā izkārtojuma veidā vismaz izkārtojuma platums parasti tiek noteikts noteiktā pikseļu skaitā. Šis platums parasti ir paredzēts konkrētām ekrāna izšķirtspējām.
Atšķirīgi ir elastīgu izkārtojumu gadījumā. Šeit netiek norādīts fiksēts platums. Izkārtojums šeit tiek pielāgots pārlūka loga platībai.
Ar šādiem izkārtojumiem platums, piemēram, tiek norādīts procentos. Ja lietotājs maina pārlūka loga lielumu, izkārtojuma izmērs arī mainās.
Pateicoties modernām CSS īpašībām, tagad pastāv vēl viens izkārtojuma veids, proti, tā saucamais responsīvais izkārtojums. Šajā gadījumā izkārtojums tiek mainīts tā, ka, piemēram, uz viedtālruni tas izskatās pilnīgi atšķirīgi nekā uz galddatora. Šeit, uz PSD-Tutorials.de, piemēram, ir strādāts ar šādu izkārtojumu. Ja lietotājs atver lapu ar galddatoru ar "parastu" pārlūka loga lielumu, rezultātā iegūstamas šādas bilde.
Ja tagad šo logu sašaurināsiet, faktiski mainās to elementu izvietojums, kas atrodas mājas lapā.
Responsīvā izkārtojuma izveidošanas process ir salīdzinoši apjomīgs. Galu galā ir jānosaka apmeklētāja ekrāna izšķirtspēja un jānodrošina piemērots izkārtojums. Un šo piemēroto izkārtojumu jums faktiski ir jāizstrādā atbilstoši dažādām ekrāna izšķirtspējām. Apmeklētājs, kurš atver jūsu mājas lapu ar lielu monitoru, piemēram, redz trīs kolonnu izkārtojumu. Savukārt cits apmeklētājs, kurš atver jūsu mājas lapu ar viedtālruni, redz vienas kolonnas izkārtojumu.
Izvēles priekšrocības un trūkumi
Pirms jūs īstenojat izkārtojumu, jums jāpārdomā, kuru no minētajām izkārtojuma formām jūs vēlaties izmantot. Es īsi parādīšu jums, kādas priekšrocības un trūkumi ir fiksētajiem izkārtojumiem.
• Šeit noteikti visvieglāk ir ieviest dizaina sagataves.
• Ja jūs orientējaties pēc standarta izšķirtspējām, lapas attēlošanā parasti nav problēmu.
• Izkārtojumi ir viegli saprotami un izskaidrojami. (Šis ieguvums jums protams noderēs, ja kā webattīstītājs vēlaties klientam skaidrot izkārtojumu).
Taču fiksētajiem izkārtojumiem ir arī trūkumi.
• Lieluma dēļ tie ir neelastīgi un, piemēram, nepielāgojas ļoti maziem vai lieliem ekrāniem. Bieži vien tiek izšķiests daudz vietas.
• Attiecībā uz pieejamību tām ir noteiktas ierobežojumu.
Arī elastīgie izkārtojumi ir stiprās un vājās puses. Vispirms par priekšrocībām.
• Izkārtojumi automātiski pielāgojas pārlūka loga lielumam.
• Apmeklētāji var būtiski ietekmēt lapas attēlošanu.
Tāpat šeit ir arī trūkumi.
• Jums kā attīstītājam ir grūti kontrolēt rezultātus. Izkārtojuma norādījumus varētu ieviest tikai ierobežoti.
• Lapas saturam būtu jāpielāgojas sarežģīti.
• Ar lieliem ekrāniem var rasties problēmas saīsinātiem tekstiem, jo tie bieži vien atrodas tikai vienā rindā. (CSS šim nolūkam piedāvā atbilstošas īpašības kā min-width).
Vēl viens izkārtojuma veids ir vidusceļš starp fiksētiem un elastīgiem izkārtojumiem. Tas ir tā saucamais elastīgais izkārtojums. Tā galvenā pazīme ir mērvienība "em". (Jaunākajā laikā arvien vairāk kļūst modē rem. Atšķirībā no em, rem vienmēr orientējas pie saknēmum mainīzem, nevis, piemēram, pie vecākiem elementiem).
Šajos izkārtojumos platums un augstums ir elastīgi. Lapa skatās proporcioāli pārlūka loga izmēram. Šāda izveidojuma forma bez šaubām ir viskompleksākā, ja runa ir par praktisko īstenošanu. Tas vienkārši ir tāpēc, ka jums jau sākumā ļoti precīzi jāzina, kādi būs elementi, mainoties pārlūka loga izmēram. Elastiskos izkārtojumus galvenokārt izmanto tīmekļa vietnēs, kur tiek piedāvāti daudzi fotoattēli un video.
Elastisko izkārtojumu priekšrocības:
• Pieejamais telpa tiek optimāli izmantots.
• Saturs tiek parādīts proporcijāli pēc iespējas lielākā izmēra.
Taču protams, elastiskiem izkārtojumiem ir arī trūkumi.
• Šo izkārtojumu veidošana ir ļoti sarežģīta.
• Arī īstenošana ir visai sarežģīta.
Izklaides izvēle
Tātad jums ir jāizlemj, kuru no minētajām variantēm jūs vēlaties izmantot. Ja jūs esat pilnīgi sākumā savā HTML/CSS attīstībā, es sākumā ieteiktu izmantot fiksētu izkārtojumu. Savukārt, ja jums jau ir progresētas zināšanas par tīmekļa attīstības jomu, jums vajadzētu strādāt ar responsīvajiem izkārtojumiem. Šeit jūs darāt pareizi, neatkarīgi no tā, kādam galamērķim galu galā tiks atvērta jūsu tīmekļa vietne.
