glava
     

Cilji vaje:

  • uporabiti Adobe Dreamweaverjev postavitveni način,
  • ugnezditi tabelo v celico tabele,
  • poravnati vsebino v celicah tabele,
  • uporabiti sliko za prerisovanje za postavitev zgradbe spletne strani.

Načrtovanje postavitve strani z uporabo tabel

Pogosto se izkaže, da elementov na spletni strani ne moremo postaviti, kot bi želeli. Zato se velikokrat po pomoč zatečemo k  tabelam, ki jih uporabimo kot pripomoček pri načrtovanju postavitve strani. Tabele nam omogočajo, da elemente na spletni strani poljubno razporejamo. Da pa tabele ne bi motile izgleda spletne strani, jih postavimo brez obrob.

Adobe Dreamweaver CS3 omogoča delo v načinu postavitve strani, kjer lahko elemente tabele rišemo neposredno v dokumentnem oknu. Na ta način preprosto izdelujemo tabele za postavitev  elementov na strani.

Izdelati želimo spletno stran, ki nam bo služila kot izhodišče pri izdelavi spletišča. Stran naj izgleda, kot kaže slika.

s

Uporaba pogleda postavitve strani

Izdelava tabel, s katerimi postavljamo elemente na spletno stran, je zahtevna. Tabele je potrebno prilagoditi postavitvi spletne strani. Pri tem morajo biti tabele ustrezne velikosti, v posameznih vrsticah in stolpcih moramo spajati in razdvajati celice, včasih pa v celice postavljamo tudi nove, tako imenovane gnezdene tabele.

Pri tem nam pomaga Adobe Dreamweaver, saj pozna pogled načrtovanja strani, v katerem lahko rišemo, premikamo in urejamo celice tabele.

V pogled načrtovanja preklopimo tako, da v meniju View v izbiri Table Mode izberemo Layout Mode ali pa pritisnemo kombinacijo tipk Alt+F6.

s

Ko preklopimo v način načrtovanja strani, postaneta v vrstici za vstavljanje dejavna dva gumba. Prvi je namenjen risanju tabele, drugi pa risanju posameznih celic v tabeli, v katere bomo vstavili elemente spletne strani. Na aktivnost gumbov nas opozarja tudi okno Getting Started in Layout Mode.

s

Tudi v dokumentnem oknu se pojavita dve šrafirani polji, ki nas opozarjata, da se nahajamo v pogledu načrtovanja strani (Layout mode). V zgornjem šrafiranem polju je tudi gumb [exit], ki nam omogoča vrnitev v standardni pogled.

s

Dodajanje postavitvene tabele in postavitvenih celic

Sedaj pa si v dokumentnem oknu narišimo tabelo, kot je prikazana v načrtu spletne strani na sliki. Vključimo gumb za risanje tabel Draw Layout Table v vrstici za vstavljanje v Layout in narišimo tabelo, kot jo prikazuje slika. Višina in širina tabele zaenkrat nista pomembni.

s

V tabelo pa narišimo še celice, kot jih predvideva načrt na sliki. Izberemo orodje Draw Layout Cell v vrstici za vstavljanje v zavihku Layout. Pazimo na pravilno širino levega dela, ki je 200 pik, in višino, ki je 80 pik. Spodnja vrstica se razteza čez celotno širino in je visoka 20 pik. Z miško je težko narisati celice na eno piko natančno. Seveda lahko velikost že narisanih celic tudi spreminjamo. Celico moramo označiti, najpreprosteje tako, da stisnemo tipko Ctrl in kliknemo v želeno celico. Nato pa natančno velikost celice vpišemo v oknu z lastnostmi.

s

s

s
s

s

Prilagajanje velikosti tabele in celic

Ko smo vse celice narisali, jim nastavimo še pravilne velikosti. Označimo celico tako, da stisnemo Ctrl in kliknemo v celico, nato pa v oknu z lastnostmi preverimo njeno višino in širino.

s

Če želimo, da bo menijski del fiksne širine 200 pik, ostali del tabele pa naj se prilega velikosti okna, moramo desni del tabele nastaviti na samodejno prilagajanje, kar storimo v oknu z lastnostmi tako, da izberemo desno celico in potrdimo Autostretch. Sedaj bo tabela ne glede na velikost okna brskalnika zapolnila celotno okno. Če funkcijo Autostretch omogočimo za določeno celico, se raztegnejo vse celice v tem stolpcu.

Adobe Dreamweaver celicam tabele samodejno doda slike za razmik. Prosojna slika GIF velikosti ene slikovne pike se raztegne do določene širine. Ta slika v brskalniku ni vidna. Slika GIF ohranja širino vseh celic, ki niso v stolpcih, za katere velja nastavitev samodejnega prilagajanja širine. Če celicam ne dodamo slik za razmik, se skrčijo vsi stolpci, v katerih slika ni dodana.

Ko v oknu z lastnostmi potrdimo funkcijo Autostretch, nas Adobe Dreamweaver pozove z oknom Choose Spacer Image, da dodamo sliko za razmik. Pri tem lahko izbiramo med več možnostmi, kot kaže slika:

  1. kreiranje nove slike za razmik (Create a spacer image file),
  2. izbiranje že obstoječe slike za razmik (Use an existing spacer image file),
  3. brez slike za razmik (Don't use spacer images for autostretch tables).

Te nastavitve lahko kadarkoli nastavljamo tudi v meniju Edit v izbiri Preferences v rubriki Layout.

s

Mi bomo dodali novo sliko v mapo s slikami v podmapo vaja7 in jo poimenovali razmik.gif. Adobe Dreamweaver nam označi, da je vključena funkcija Autostretch in dodana slika za razmik, kot kaže slika.

s

S klikom na [exit] v razširjenem polju zapustimo način postavitve strani (Layout mode) in se vrnemo v standardni način.

s

Ko bomo v področje menija začeli vnašati besedilo, bo le to segalo od roba do roba. Tega pa ne želimo, saj bi radi besedilo od roba odmaknili za nekaj pik. Najlažje bi to storili z lastnostjo celic Cell padding (polnilom celic). Vendar pa to lastnost lahko določimo le celi tabeli in sicer vsem celicam hkrati. Pomagali si bomo tako, da bomo v celico za meni ugnezdili še eno tabelo.

Ugnezdena tabela v celici tabele

Da bi ugnezdili tabelo, postavimo kazalec v notranjost celice tabele in vstavimo novo tabelo. Mere celice tabele omejujejo ugnezdeno tabelo po višini in širini. V celico lahko ugnezdimo tudi več tabel.

Tabelo lahko ugnezdimo tudi v pogledu postavitve strani (Layout mode). Z orodjem za risanje postavitvenih tabel (Draw Layout Table) v vrstici za vstavljanje Layout narišemo novo tabelo čez obstoječe celice. Ugnezdena tabela se prilagodi celici, v katero vstavljamo tabelo.

V celico za meni in v celico za vstavljanje vsebine vstavimo novi tabeli, ki imata en stolpec in eno vrstico. Širino tabele nastavimo na 100%, tabela naj bo brez obrobe in naj ima 10 pik polnila celic, medtem ko naj bo razmik celic nastavljen na 0 pik.

s

s

Ugnezdeni tabeli nismo določili višine. To sicer ni potrebno, ker se bo višina z vstavljanjem sproti prilagajala, če pa želimo lahko s hitrim urejevalnikom kode tabeli dodamo tudi lastnost height=''100%''. To storimo tako, da označimo ugnezdeno tabelo in z desnim klikom v priročnem meniju izberemo Quick Tag Editor. V hitrem urejevalniku se postavimo za lastnost širine width=''100%'',

s

v padajočem meniju izberemo lastnost Height,

s

med dvojna narekovaja pa vpišemo vrednost za višino 100%.

s

 

Sedaj v dokumentnem oknu ni več videti, da smo ugnezdili tabelo. To lahko vidimo le v vrstici stanja v izbiralniku značk, kjer se značka <TABLE> sedaj pojavlja dvakrat, ko se postavimo v področje menija.

s

Poravnavanje vsebine v celici tabele

Vsebino v celici lahko poravnamo v navpični in vodoravni smeri. Poravnavo določimo izbrani celici oziroma izbranim celicam v oknu z lastnostmi. Pri navpični poravnavi lahko izbiramo med možnostmi:

  1. Default - privzeta poravnava, običajno poravnava vsebine na sredino,
  2. Top - vsebino celice poravna na vrh celice,
  3. Middle - vsebino celice poravna na sredino celice,
  4. Bottom - vsebino celice poravnava na dno celice,
  5. Baseline - poravnava na osnovno črto se uporablja za poravnavo spodnjih robov predmetov v več celicah v vrstici na osnovno črto.

s

Pri vodoravni poravnavi vsebino v celicah poravnavamo glede na levi in desni rob in lahko izbiramo med:

  1. Default - privzeta poravnava, vsebina se običajno poravna na levi rob,
  2. Left - vsebino celice poravna na levi rob celice,
  3. Center - vsebino celice poravna na sredino celice,
  4. Right - vsebino celice poravna na desni rob celice.

s

Nastavimo sedaj še poravnave v naši tabeli:

  1. v zgornjih dveh celicah nastavimo navpično poravnavo na Middle in vodoravno na Center,
  2. osrednji del, meni in vsebino poravnajmo navpično Top in vodoravno Left,
  3. spodnji celici pa nastavimo navpično poravnavo na Middle in vodoravno na Center.

Shranimo si naš dokument z imenom predloga.html in ga poimenujmo v orodni vrstici Predloga. Ker smo že nastavili spletišče, Adobe Dreamweaver sam poskrbi, da se datoteka shrani k ostalim datotekam spletišča.

Uporaba slike za prerisovanje za postavitev zgradbe spletne strani

Omenimo na tem mestu še eno možnost, ki jo nudi Adobe Dreamweaver pri postavitvi zgradbe spletne strani. Denimo, da pri sprehodu po medmrežju naletimo na spletno stran, ki nam je zelo všeč. Tudi sami bi radi postavili enako zgradbo spletne strani. Ali pa nam je grafični oblikovalec izdelal zapleten načrt zgradbe spletne strani. V takem primeru si lahko posnamemo zaslonsko sliko spletne strani in si jo postavimo v ozadje, kot predlogo, po kateri bomo gradili spletišče. Namesto, da bi ocenjevali, kam bomo postavili posamezne elemente spletne strani, si naložimo sliko za prerisovanje in posamezne grafične in besedilne elemente natančno poravnamo glede na sliko, ki preseva iz ozadja.

Sliko za prerisovanje v Adobe Dreamweaverju naložimo v oknu z lastnostmi strani - v meniju Modify izberemo Page Properties.. Taka slika je vidna le v Adobe Dreamweaverju, v oknu brskalnika pa se ne prikaže. Slika za poravnavanje prekriva barvo ozadja ali sliko za ozadje v Adobe Dreamweaverju, v brskalniku pa bo vidna barva ozadja oz. slika ozadja.

Za test uporabe slike za prerisovanje si izdelajmo nov prazen HTML dokument. V oknu Page Properties izberimo med kategorijami Tracing Image. Z gumbom Browse poiščemo sliko za prerisovanje prerisovanje.gif, ki se nahaja med slikami v gradivu v mapi vaja7. Z drsnikom v področju Transparency nastavimo prosojnost slike na vrednost 25%.

s

Sedaj pa se postavimo v način postavitve strani (Layout mode) in tabele lahko rišemo po predlogi slike za prerisovanje.

s

To možnost smo želeli le pokazati, zato bomo risanje tabele prekinili in začeti dokument zaprli, ne da bi ga shranili. S tem tudi zaključimo vajo načrtovanja postavitve strani z uporabo tabel.

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

na vrh