glava
     

Cilji vaje:

  • izdelati in oblikovati tabele na spletnih straneh,
  • dodajati in razvrščati podatke v tabelii,
  • uvažati podatke v tabelo.

Tabele

Tabele so močno orodje za prikaz in ureditev podatkov. V HTML-ju tabele uporabljamo podobno kot v urejevalniku besedil. Tabelo v HTML označuje značka <TABLE></TABLE>, sestavljajo pa jo vrstice <TR></TR> in celice <TD></TD>. Tabele imajo seveda tudi stolpce, ki pa jih v HTML-ju posebej ne označujemo.

Adobe Dreamweaver CS3 pozna številne načine oblikovanja tabel, s katerimi dosežemo, da bo tabela videti natanko tako, kot smo si zamislili. Tabele, ki nimajo obrob, lahko uporabljamo tudi za razporejanje elementov na spletni strani.

Vstavljanje tabele na spletno stran

Za začetek dela s tabelami bomo spletni strani dodali tabelo z nekaj podatki. Take tabele imajo običajno obrobljene celice, ni pa nujno.

Izdelajmo si novo prazno HTML datoteko in jo shranimo v področje, kamor smo shranjevali ostale datoteke z imenom enote.html. Stran poimenujmo (Title) Osnovne fizikalne količine in enote. V mapi gradivo poiščimo datoteko enote.doc, jo odprimo in si v naš dokument prekopirajmo celotno besedilo datoteke.

s

Z vrivnikom se postavimo pred tekst Osnovne fizikalne količine ., kot kaže slika in vstavimo tabelo. To storimo lahko na več načinov. V meniju Insert izberemo ukaz Table ali pa v vrstici za vstavljanje kliknemo gumb za vstavljanje tabel.

s

Vstaviti želimo tabelo z 8 vrsticami in 3 stolpci, kar vpišemo v polji Rows: in Columns: v področju Table size. Velikost tabele lahko podamo v pikah ali pa v odstotkih. Mi bomo vstavili tabelo velikosti 80 % širine strani, kar vpišemo v polje Table width:. To pomeni, da na strani tabela ne bo imela točno določene velikosti, ampak se bo prilagajala velikosti okna. Debelina obrobe tabele naj bo 1 piko, kar vpišemo v polje Border  thickness:. V področju Header izberemo Top, kar pomeni, da ima tabela glavo tabele.

s

s

V tabelo bomo vnesli podatke, ki so v našem dokumentu prikazani pod tabelo. To lahko storimo tako, da podatke v posamezno celico vpišemo, lahko pa besedilo posamezne celice tudi označimo in ga odvlečemo v tabelo v ustrezno celico. Če smo besedilo tipkali in se nam pojavlja še vedno pod tabelo, ga po vnosu vseh podatkov v tabelo izbrišemo.

s

Izbiranje elementov tabele

Če želimo tabeli spreminjati lastnosti, jo moramo predhodno označiti. Označimo lahko tudi dele tabele, npr. vrstice, stolpce, celice. Označujemo lahko na več načinov. Lahko uporabimo meni ali označujemo z miško, zelo priročna pa je tudi uporaba izbiralnika značk v vrstici stanja.

Celotno tabelo izberemo z menijskim ukazom Modify>Table>Select Table ali pa jo označimo z miško, kar storimo tako, da se postavimo na rob tabele, da miškin kazalec dobi obliko, kot kaže slika,  in nato s klikom na tabelo označimo tabelo.

s

Če se postavimo na tabelo in kliknemo v eno od celic, se nam v vrstici stanja programa Adobe Dreamweaver pokažejo hierarhično urejene značke. Tabelo najlaže izberemo tako, da kliknemo na značko <table> v izbiralniku značk v vrstici stanja, kot kaže slika.

s

s

Za izbor celice, kliknemo vanjo. Če želimo izbrati vrstico tabele, postavimo kazalec na levo stran vrstice, da se spremeni v črno puščico. V tem trenutku kliknemo in s tem izberemo vrstico tabele. Na enak način izberemo tudi stolpec tabele, le da kazalec postavimo nad stolpec.

s

Še lažje vrstico označimo tako, da se postavimo v vrstico in kliknemo na značko <tr> v izbiralniku značk v vrstici stanja.

Celice lahko izberemo tudi tako, da najprej izberemo prvo celico, potem pritisnemo tipko Shift in po vrsti izbiramo še druge celice. Za izbiranje posameznih celic pa pritisnemo tipko Ctrl, z izbiranjem pa k izbiri dodajamo celice.

V oknu z lastnostmi so prikazane različne lastnosti in nastavitve, odvisno od tega, kaj smo izbrali. Ko je izbrana cela tabela, ima okno z lastnostmi podobo, kot jo kaže slika. Lastnosti v njem veljajo za celo tabelo.

s

Ko pa je izbrana ena ali več celic, vrstica ali stolpec, so v oknu z lastnostmi prikazane lastnosti celice, vrstice oz. stolpca.

s

Izberimo tabelo in jo poravnajmo sredinsko, kot kaže slika. To storimo tako, da v oknu z lastnostmi ob izbrani tabeli izberemo v meniju Align Center.

s

V tabeli označimo celice pod stolpcema Osnovne merske enote in Oznaka in poravnajmo tekst v celicah sredinsko tako, da v oknu z lastnostmi kliknemo na gumb za sredinsko poravnavo.

s

Dodajanje celic glave tabeli

Vsebina v celicah glave je oblikovana v krepki pisavi in poravnana na sredino. Če ima tabela na vrhu dodano vrstico glave in je ta izbrana, se v oknu z lastnostmi pojavi kljukica v potrditvenem polju Header. V tem primeru se značke celice tabele <TD> spremenijo v značke celice glave tabele <TH>. Celice glave lahko dodamo tudi na levem robu tabele kot glave vrstic. Označimo prvi stolpec in označimo polje Header v vrstici z lastnostmi.

s

Dodajanje in odstranjevanje vrstic in stolpcev

Ko želimo tabeli dodati vrstico ali stolpec, to storimo tako, da uporabimo priročni meni, ki se pojavi, če z desno tipko miške kliknemo na celico v tabeli. V priročnem meniju izberemo ukaz Table, zatem pa želeno opcijo, kot kaže slika.

s

V našem primeru bomo pred prvo vrstico vrinili vrstico. To storimo tako, da v priročnem meniju izbire Table izberemo Insert Rows or Columns.. V oknu Insert Rows or Columns izberemo Rows, v polju Number of rows povemo, da želimo samo eno vrstico, v izbiri Where pa izberemo  Above the Selection.

s

Celice, ki smo jih vstavili bomo združili v eno samo celico. Izberemo zgornjo vrstico tabele, desno kliknemo v izbrane celice in v priročnem meniju izberemo Table>Merge Cells, kot kaže slika.

s

V spojeno celico vpišemo tekst OSNOVNE FIZIKALNE KOLIČINE IN ENOTE in ga sredinsko poravnamo.

s

Spreminjanje širine stolpcev in višine vrstic

Višino vrstice in širino stolpca lahko spremenimo na več načinov in sicer tako, da vlečemo obrobe celic z miško ali pa v okno z lastnostmi v polji H in W vpišemo številčni vrednosti. Z miško širino oz. višino celice spreminjamo tako, da se postavimo na rob celice, da se kazalec spremeni v dvojno črto s puščicama, kot kaže slika, nato pa z vlečenjem prilagodimo širino oz. višino.

s

s

Nastavimo višino prve celice na 50 pik, tako da v oknu z lastnostmi v polje H (Height) vpišemo vrednost. Poleg tega nastavimo tudi širino drugega stolpca na 200 pik in širino tretjega stolpca na 100 pik kot kaže slika.

s

Spreminjanje velikosti tabele, barve obrobe in barve ozadja tabele

Podobno kot smo spreminjali velikost celic, lahko spreminjamo tudi velikost celi tabeli. Označimo tabelo in z vlečenjem spreminjamo velikost celi tabeli. Če posameznim celicam nismo določili vrednosti za širino in višino, se bodo celice pri spreminjanju celotne tabele hkrati porazdelile v razmerju. Druga možnost pa je, da v polju za širino v oknu z lastnostmi ob izbrani celotni tabeli vpišemo vrednosti v slikovnih pikah ali pa v odstotkih.

Če želimo počistiti vse vrednosti za širino in višino tabele, v meniju Modify izberemo ukaz Table. Na dnu stranskega menija so ukazi za brisanje višine ali širine celic. Na istem mestu so na voljo tudi ukazi za pretvarjanje vrednosti v slikovne pike oziroma odstotke. Gumbi s temi ukazi so na voljo tudi v oknu z lastnostmi, kadar je izbrana tabela.

s

V našem primeru bomo v tabeli spremenili barvo obrobe in ozadja, kot je prikazano na sliki:

  • nastavimo barvo obrobe tabele na modro barvo vrednosti #3399FF,
  • barvo ozadja tabele spremenimo v svetlo rumeno #FFFFCC,
  • barvo ozadja prve vrstice na modro #3399FF,
  • tekstu celotne tabele spremenimo pisavo v Arial, Helvetica, sans-serif in nastavimo velikost prve vrstice na 16 pik, ostalega teksta pa na 12 pik,
  • barvo teksta naslovne vrstice v belo #FFFFFF.

s

Nastavitev polnila celice in razmika med celicami

  • CellPad - Polnilo celic - pomeni prazen prostor med predmetom v celici in obrobo celice
  • CellSpace - Razmik med celicami - je količina prostora med celicami

V naši tabeli polnilo celic postavimo na 0 pik, celice pa razmaknimo za 5 pik.

s

V prvem stolpcu odmaknimo tekst od levega roba, tako da bomo v vsaki vrstici pred tekst vstavili dva prazna prostora. Če se postavimo pred besedo dolžina in s preslednico poskušamo vnesti presledke, ugotovimo da se le ti ne vnesejo. V HTML-ju moramo namreč namesto presledkov vnesti prazne prostore. To storimo tako, da v vrstici za vstavljanje izberemo Text, kjer potem izberemo Non-Breaking Space, kot prikazuje slika.

s

Oblikujmo še preostali dokument in sicer:

  • tekstu Osnovne fizikalne količine in enote spremenimo slog v Heading 2, spremenimo mu slog pisave v Arial, Helvetica, sans-serif in ga obarvajmo modro #0000FF,
  • ostale tri odstavke teksta pa spremenimo v neurejen seznam,
  • dodamo barvo za ozadje spletne strani #EFEFEF.

Dokument shranimo in si ga oglejmo v brskalniku.

s

 

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