Dreamwevaer CS4 tutorial
Sam naslov govori o cemu je rjec nisam htjeo napravit tutorial za teške pocetnike jer se sam treba naucit gdje je za save i za pregled stranice gdje se nalazi CSS style to su osnove osnova
Dakle 1. lekcija ce obradivati Div tag nekima težak meni lagan nacin stvaranja strukture stranice. Napomena ovo se radi tek kad shvatite osnove i neke sitnice DW dakle ako ste ga upravo instalirali nemoj te odmah ovakve stvari raditi.
Div tag cu objasnit svojom recenicom necu sad nabijat neke cudne nazive i gramaticki se izražavat jer ce vas to samo zbunit
Div tag je kao okvir u kojemu ubacijemo tekst slike flash itd...bez njega bi sve izgledalo kao moja soba :)
da nema div taga vjerovatno bi svi trebali na svakoj stranici namještati rezoluciju na razlicite web stranice jer se nebi velicina ekrana podudarala s stranicom
Priprema:
Prije nego što krenemo trebamo napraviti neke sitnice.
A to je da trebamo u praznom HTML dokumentu napravit "body" i "warpper" njih napravite u CSS styles on se nalazi na desnom baru ili izborniku ako ga ne nadete odite u Window i stavite kvacicu na CSS style ako ga ne nadete prtisnite shift+F11
u njemu cete vidjeti da nema "body" i "warpper-a" pa u prozor All rules prtisnite desni klik i odaberite New i pos CSS rules nazovi te ga body i stisnite OK i opet OK nakon toga napravite istim redosljedom #warpper i ne zaboravite na >#<
nakon toga dobijete pod CSS styles body i #warpper. Kliknite na body i na 2. prozoru ispod All rules nalazi se prozor Prpertises for "body" Kliknite na Add property u napišite background a za boju stavite #bbb ponovo prtisnite Addproperty i upišite margin i na drugu stranu stavite 0 ponovo add...upišite padding i velicinu 0 ponovo Add...upišite text-align i do upišite center
nakon toga u CSS Style kliknite na #warpper i isto kao u body upišite background #fff, Margin 0 auto,text-align left,wodth 770 px.
Korak 1.
za ubacit Div tag prtisnite Insert>Layout Objects>Div tag
kada se stvori prozor insert div tag kliknite na insert i odaberite After start of tag i nakon toga do taga odaberite <body> i na ID odaberite warpper i kliknite OK i stviro vam se glavni teg body nanjemu ce se sve temeljiti head i mainContent i sidebar.
Korak 2.
nakon body-a ponovo odaberite Div tag pod Insert odaberite After start of tag i desno odaberite <div id="warpper"> nakon toga kliknite na New CSS rule kad se stvori prozor new CS rule kliknite na na opciju Selector type i daberite Compound pod selector name napišite #header i kliknite OK
nakon toga ce vam se stvoriti CSS rule Definition prozor i u ljevom izborniku odaberite Box u box-u stavite da vam je Height 110 px a u padding na TOP 0 i margin TOP 0 budite sigurni da vam je na margin i padding odobrena opcija Same for all ako nije kliknite na nju onda u izborniku odaberite Background
te upišite u backgrund color #fc0 kliknite OK i ponovo OK.I pojavit ce vam se žuti header na njemu se nalazi LOGO firme naziv i takve stvari.
Korak 3.
ponovo Insert Div tag odaberite After tag i desno odaberite <div id="header"> i kliknite na New CSS rule i opet Compound pod ime napišite #mainContent i kliknite OK kad se pojavi CSS rule prozor pod box isto kao i kod headera pading TOP 0 i margin TOP 0 i naravno opcija same for all i pod height stavite 300 px
odaberite Background i pod backgorund color upišite #cf9 nakon toga kliknite OK i ponovo OK i dobili ste mainCOntent
Korak 4.
Ponovo odaberite Div tag i pod insert odaberite After tag i desno pdaberite <div id="mainCOntent" i odaberite new CSS rule i na CSS prozoru pod Type stavite Compound a pod ime stavite naziv #sidebar i klinite OK i pod izbornik odaberite Box i napravite kao i pod mainContent ali samo padding i margin
odaberite Backgorund i pod color upišite #c9c kliknite OK i ponovo OK i dobili ste side bar.
Korak 5.
Odaberemo Div tag pod insert stavite After tag desno odaberite <div id="sidebar"> i daberite New CSS rule pod type odaberite Compound pod ime upišite #footer i kliknite OK i pod Box na height upišite 50 px a pod padding i margin na TOP stavite 0 onda background i na color upišite #999 ok i ok
prtisnite File i klinite na save All i pregledajte u svom browseru
i dobit cete ovo slika_1
kao što vidite prblem je u tome što se side bar ne nalazi gdje bi trebao pa cemo uz par koraka napraviti da se sidebar smjesti gdje mu je i namjena
Namještanje Sidebara:
Korak 1.
u CSS style kliknite na #mainContent i u properies klinite na Addproperty
i upišite width a za velicinu stavite 480px i tako smo napravili prostor za sidebar i sad moramo ponovo kliknuti na Add... i upisat float i desno upisat left tako da #warpper prepoznaje mainContent kao Div ta ljevo i ostale Div tagove ce premjestiti desno a to su Footer i side bar blizu smo. : )
Korak 2.
sada u CSS style-u kliknite na #sidebar i u properties klinite na Add Property i upišite Width a desno upišite 100px.i još jednom Add... napišite float i desno od floata napišite right i ponovo Add... upišite height 300px sad smao treba footer spustiti dolje prtisnite na sidevar u CSS stylu i na width upišite 265px
i sad vidite kao se tekst uvukao ispod jer nije bilo mjesta a footer kao tag je ostao gore izmedu sidebarai main Contenta
Korak 3.
Sad cemo footer smjestiti ispod tako da pod CSS rules kliknemo na #footer i pod properties kliknemo na Add... i upišemo clear i desno both i tako smo tisli footer dolje i to je to ako želite neke velicine mjenjat samo kliknite na npr mainContent i na height stavite auto tako dok pišete da vam se div automacki spišta sa tekstom
i konacni rezultat koji ste dobili je slika_2
Nadam se da nisam previše iskomplicira.
Ako ne uspijete odma nemojte odma odustat jer nisam baš nešto detajno pojasnio Tutorial
slika 1
slika 2
