 |
||
|---|---|---|
|
Cilji vaje:
Načrtovanje postavitve strani z uporabo tabelPogosto 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.
Uporaba pogleda postavitve straniIzdelava 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.
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.
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.
Dodajanje postavitvene tabele in postavitvenih celicSedaj 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.
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.
Prilagajanje velikosti tabele in celicKo 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.
Č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:
Te nastavitve lahko kadarkoli nastavljamo tudi v meniju Edit v izbiri Preferences v rubriki Layout.
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 klikom na [exit] v razširjenem polju zapustimo način postavitve strani (Layout mode) in se vrnemo v standardni način.
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 tabeleDa 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.
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%'',
v padajočem meniju izberemo lastnost Height,
med dvojna narekovaja pa vpišemo vrednost za višino 100%.
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.
Poravnavanje vsebine v celici tabeleVsebino 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:
Pri vodoravni poravnavi vsebino v celicah poravnavamo glede na levi in desni rob in lahko izbiramo med:
Nastavimo sedaj še poravnave v naši tabeli:
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 straniOmenimo 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%.
Sedaj pa se postavimo v način postavitve strani (Layout mode) in tabele lahko rišemo po predlogi slike za prerisovanje.
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 |
||
| na vrh | ||
