Izrada web stranica – Elementi stranice

Nakon što smo naučili izrađivati jednostavne web stranice i umetati grafičke elemente, trebalo bi se malo više pozabaviti tablicama. Zašto? Surfajući internetom, uočili ste da lijepo oblikovane web stranice sadrže mnoge slike različitih veličina i tekstove raznih pisama i veličina slova.

Ako umetnemo više slika i tekst u isti red, primjećujemo da veličinu retka određuje najviša slika.  Sigurno se pitate, možemo li slike i tekst rasporediti po stranici kako bismo htjeli. Da naravno, a u Microsoft Frontpage vizualnom HTML uređivaču uradit ćemo to pomoću tablica.

Tablice ne služe samo za prikaz tabličnih podataka, već se koriste i za oblikovanje izgleda same stranice. Bez tablica ne bismo mogli napraviti složene web stranice s izbornicima u stupcima, galerije slika, uredne obrasce i dr. Zato ćemo najprije na web stranicu umetnuti  tablicu, a zatim u zasebne ćelije umetnuti elemente stranice koje želimo oblikovati neovisno o položaju, veličini i obliku drugih elemenata.

Kako umetnuti tablicu u Microsoft Frontpageu?

Tablicu možete umetnuti rabeći gumb za umetanje tablice (Insert Table) iz alatne trake Standard ili iz izbornika Table > Insert > Table. Nakon dodavanja tablice rabeći naredbu iz izbornika otvara se dijaloški okvir Insert table.

Primjer 1. Umetanje zadane tablice

Objašnjenje dijaloškog okvira Insert Table

1. Size

Size – nam omogućuje postavljanje broja redova i stupaca. Rows su redovi, a Columns su stupci. Iznad u primjeru 1, napravili smo zadanu tablicu od 2 reda i 2 stupca.

Vježba 1. Unesi tablicu veličine 2 stupca i 4 reda.

Rješenje 1.

2. Layout

Layout  – omogućuje raspored tablice.

Alignment – poravnanje tablice [Left – lijevo, Center – Sredina, Right – Desno].

Float – plutanje ili lebdenje, tablica se lovi za lijevu ili desnu stranu ekrana ili elementa. [Left – lijevo, Right – desno].

Specify width – određivanje širine tablice u pikselima ili postocima.

Ako je označeno In percent – 100%, znači da će tablica biti široka 100% veličine prozora. S promjenom veličine prozora, tablica se uvijek prilagođava njegovoj širini u iznosu postotka. Ako je označeno In pixels, onda možemo definirati širinu stranice u pikselima. Tablica će uvijek biti navedene veličine u pikselima, bez obzira na promjenu veličine prozora.

Vježba 2. Unesi tablicu sa ovim postavkama. Float: Left, In pixels: 200.

Rješenje 2.

Vježba 3. Unesi tablicu sa ovim postavkama. Rows:4, Columns:1, Float: Right, In pixels: 50.

Rješenje 3. Tablica lebdi s desne strane.

Cell padding i cell spacing – argumenti zadaju se samo za tablicu, ne mogu se zadati za redove ili polja.
Cell padding – znači odmak sadržaja od ruba polja u kojem se taj sadržaj nalazi.
Cell spacing – je razmak između pojedinih polja tablice. Sjetite se  tipke Space (Razmaknica).

Na slici gore cell padding označen je zelenom linijom, a cell spacing crvenom linijom.
Ukoliko tablice koristimo da bismo rasporedili sadržaj na stranici, najčešće za sva tri ova argumenta zadajemo 0.

Vježba 4. Unesi tablicu s ovakvim postavkama. Rows:4, Columns:1, In pixels:100, Cell padding:15, Cell spacing:1

U svaku ćeliju dodaj jedno ime. MARKO, IVANA, DALIBOR, MANUEL.

Rješenje 4.

Vježba 5. Unesi tablicu s ovakvim postavkama. Rows:2, Columns:4, In pixels:300, Cell padding:2, Cell spacing:10.

Rješenje 5. Razmak između ćelija (Cell spacing) iznosi 10 točaka.

3. Borders

Borders – određuje postavke rubova tablice: debljinu (Size) i boju (Color).

Size – postavljanje debljine ruba stranice.

Color – postavljanje boje ruba tablice.

Vježba 6. Unesi tablicu s ovim postavkama:

Rješenje 6.

4. Background 

Color – omogućuje promjenu boje pozadine tablice.

Vježba 7. Umetni tablicu s zelenom pozadinskom bojom.

Rješenje 7.