VIZUALNI MODEL OBLIKOVANJA

V opisu vizualnega modela se bomo seznanili z procesi in z drevesno strukturo dokumenta. V vizualnem elementu se vsak element generira v eden ali več prostorčkov v skupno drevesno strukturo. Pot teh prostih mest je odvisna od:

dimenzije prostora in tipa
pozicije sheme (normalna velikost ali apsolutna velikost)
med elementom in drevesno strukturo
zunanjosti informacije (vidno velikost, dimenzijo slike, ipd.)

Skupina elementov in škatel

Skupino elementov sestavljajo tisti elementi, kateri sestavljajo izvorno kodo tega dokumenta, največkrat imajo obliko obrazca ali vizualnega bloka (odstavka). Več vrednosti se izpiše glede na lastnosti, katere ima ta element block-level: block, list-item, compact, run-in. Block - level element generira po principu sestave škatel, katere se sestavljajo na način block box. Omenjeni princip omogoča način, v katerem se blok postavi na poljubno mesto v dokumentu.

Anonimni blok

Anonimni tip bloka izgleda v dokumentu tako:

<div>
 besedilo
 <p>še več besedila
</div>

Uporabljeni sta znački <p> in <div> zato, da se bo besedilo pokazalo na ekranu.

Margin (rob) je pregled nad petimi lastnostmi, ki se ukvarjajo z nastavitvijo obrob v slogu. Skupina margin se obnaša drugače, kot ste mogoče predvidevali na prvi pogled. Te lastnosti dodajo neviden prostor okoli elementa, tako da lahko ustvari razdaljo med sosednjimi elementi. Ko se uporablja margin, se lahko nastavi vsem 4 smerem (zgoraj, desno, spodaj in levo in) isto vrednost, lahko pa tudi vsaki smeri svojo vrednost. Pazite pri uporabi negativnih vrednosti, saj lahko dobite čudne rezultate.

Prav tako pa lahko nastavite vsako od margin lastnosti posebej, z uporabo lastnosti margin-top, margin-right, margin-bottom in margin-left. Te uporabljamo ponavadi, kadar ne potrebujemo prostora okoli vseh štirih strani elementa. Tako izberemo samo določeno stran.

Padding (polnjenje). Ko se želi ustvariti prostor med elementom in vsebino elementa, se uporabi lastnost padding. Ta lastnost ima enka učinek kot lastnost cellpadding v elementu table. Zamislite si element, ki ima rob, zunanjost in notranjost. Da torej lahko nastavite svojo besedilo, sliko ali kako drugo vsebino na točno določeno mesto znotraj tega elementa uporabite padding (polnilo po slovensko). Tako kot margin ustvari razmake med zunanjimi deli elementov, tako jih padding ustvari med vsebinami znotraj elementov. Tako torej lastnost padding vpliva na razdaljo med vsebino elementa in robom elementa.

Pri uporabljanju lastnosti padding, lahko nastavimo, da imajo vse 4 strani isto vrednost, ali pa različne vrednosti. Lahko pa tudi samo eno smer nastavite individualno z uporabo lastnosti padding-top, padding-left, padding-bottom in padding-right.

Z uporabo lastnosti border-style (slog obrobe), lahko poudarimo vsebino z izbiro obkolitve teh vsebine z 2D obrobami ali pa z 3D vzdignjenimi obrobami. Stila solid in double (dvojni) sta 2D, inset, outset, groove in ridge pa so izgleda 3D . Lahko pa tudi ustavarite obrobe z manj kot štirimi stranmi, če želite preizkušati grafično izvirnost. Poizkusite gnezditi elemente z obrobami za nekaj zanimivih učinkov. Privzeta lastnost je none (nič), kar bi lahko bilo izbano z uporabo JavaScript, če uporabljate sloge, ki se spreminjajo. Ne pozabite uporabiti lastnost border-width, kot del izdelave svojega sloga, kajti drugače se lahko zgodi, da bodo obrobe nevidne.

Ko uporabljate lastnost borer-style za prikaz svoje vsebine z grafično obrobo, pa naj bo to solid, double, inset, outset, groove ali ridge slog, morate vedno navesti eno od petih lastnosti border-width. Razlog zato je ta, da je privzeta debelina obrobe nič. Lahko imajo vse obrobe enako debelino, lahko pa tudi vsaki posebej nastavite poljubno debelino. Lahko pa imate tudi element z tremi obrobami, pri čem ima vsaka svojo debelino.

Gor e-gradiva CSS primeri min/max-width/height margin

SERŠ Maribor : Strokovna gimnazija : 2004 : Jure Štern

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri