Web Dnevnik

Web dizajn, izrada web stranica


25.04.2018

Zadnja promjena 11:01:52 AM GMT

Dreamweaver div, dreamweaver CS5

Div tag je najbitniji tag za slaganje HTML strukture na web stranici. Struktura na web stranicama formira se pomoću tablica i div tagova, u ovom tutorijalu pokazat ćemo osnovno ubacivanje div taga unutar zadanog dokumenta.

1. Otvorimo Dreamweaver CS5 program i odaberemo Novi dokument > Blank Page > HTML > Create...

 

2. U desnom stupcu sučelja u kartici Insert odaberemo Insert Div Tag...

 

3. Otvara se izbornik gdje postavimo postavke:

Insert: Ako nam je prvi Div tag na stranici onda odaberemo At insertion point, to znači da će se div tag pojaviti na području gdje smo pozicionirani u glavnom Dreamweaver prozoru,

Class: Ubacimo pojedinu Classu s određenim pravilima, kod ubacivanja prvog div taga class-a nije definirana,

ID: Upisujemo ime div taga, kod odabira imena treba paziti i znati za koji točno dio strukture ubacujemo div tag, ako se radi o logu onda div tag nazovemo logo i odaberemo New CSS Rule...

 

 

4. Otvara se prozor gdje odredjujemo pojedina pravila, u ovom tutorijalu kreirat ćemo div tag i njegova pravila samo za postojeći dokument pa opcije ostavimo jednake kao na slici i odaberemo OK...

 

5. Otvara se prozor gdje određujemo pravila za sadržaj koji se nalazi unutar div taga:

U kartici Type određujemo pravila vezana uz tekst, određujemo font, veličinu fonta (Font-size), težinu fonta (Font-Weight), razmak između paragrafa, boju fonta...

 

6. U kartici Background odredjujemo pozadinu div taga, odaberemo ju na 2 načina:

1. Direktno mu odredimo boju u zadanoj paleti boja ( Background-color),

2.Ubacimo sliku kao pozadinu (Background-image)

Background-repeat: odredimo hoće li se pozadina unutar div taga ponavljati,

Background-position (X, Y): odredimo položaj pozadine unutar div taga.

 

7. U kartici Box određujemo dimenzije div taga i njegov položaj:

Kako je ovo prvi div tag u dokumentu određujemo mu širinu i visinu, kako smo odabrali div tag logo moramo ga uskladiti sa ostalim parametrima na strukturi, znači širina i visina ovisi o veličini cijele strukture na web stranici,
najbitnija stvar su Padding i Margin, uvijek pri ubacivanju div taga Padding stavimo na nulu, a Margin top i bootom na nulu dok left i right stavimo na auto da se prilagode širini. Kada vidimo na strukturi gdje se div tag pozicioniramo naknadno mu mijenjamo vrijednosti u Paddingu i Marginu kako bi došao na točno mijesto na strukturi. Obavezno se promjene pregledavati i Internet pregledniku...

 

8. U kartici Border, odredimo kako će izgledati rubovi div taga, pošto je div tag zapravo kvadrat određujemo mu sve četiri strane...

 

Nakon zadanih promjena odaberemo OK, div tag uvijek možemo i naknadno uređivati i obavezno sve promjene pratiti u Internet pregledniku...