Dreamweaver je program za izradu web stranica.
Izrada prve ili početne stranice
Ako smo otvorili Dreamweaver onda smo na ekranu dobili sljedeći prikaz:
Kad otvaramo novu stranicu tada odaberemo HTML iz stupca Create New, a ako otvaramo već postojeću stranicu na računalu onda je otvaramo sa Open. Dobili smo sljedeći prikaz na ekranu:
U glavnom izborniku se nalaze naredbe podijeljene u grupe. Ispod izbornika se nalaze kartice od kojih svaka predstavlja jedan dokument. Ispod kartica imamo 3 vrste prikaza stranice:
- Code – preko cijelog radnog prostora vidimo samo prazan prostor za pisanje HTML koda
- Split – na lijevoj polovici ekrana vidi se prostor za pisanje HTML koda, a u desnom se vidi kako izgleda stranica
- Design – preko cijelo ekrana možemo vidjeti kako izgleda naša stranica
Mislim da je najbolja varijanta – Split – tako da odmah vidimo što smo napravili. Kako bi promjena odmah bila vidljiva potrebno je kliknuti mišem u Design prostor, a s vremena na vrijeme treba spremiti dokument. Da se ne bi puno “muvali” po izborniku, dobro je naučiti neke PREČICE koje vam mogu spasiti vrijeme i živce.
Properties mijenja popis svojih naredbi i mogućnosti ovisno o tome što imamo selektirano u dokumentu. Sad možemo krenuti sa uređivanjem stranice i dodavanjem raznih elemenata i novih stranica.
Kako početi?
Prvo moramo napraviti web site. U izborniku odaberemo Site, pa onda New Site.
Ako radimo lokalno…
Upišemo naziv web sitea u polje Site Name i u rubrici Local Site Folder odaberemo lokaciju na računalu gdje će se nalaziti i tamo napravimo mapu, kliknemo na Open, pa onda na Select i na kraju na Save.
Prozor se zatvorio i u desnom, donjem kutu ekrana pojavilo se sljedeći prozor. Pod Files piše mojweb, desno od njega Local view. Sve što sam do sada odabrala koristim u slučaju ako želim napraviti Site na svom računalu. A ako želim stranicu nakon izrade odmah postaviti na server, onda upisujem drugačije podatke.
…a sad uređivanje stranice
Običaj je da u izborniku odaberemo naredbu Modify, a nakon toga Page Properties. Ovdje upisujemo naslov stranice, biramo boju podloge, teksta, linkova, namještamo kodnu stranicu. Najbolje je neke postavke odmah namjestiti ovdje kako bi što manje “petljali” kasnije.
Iako je puno laše raditi u Dreamweaveru u Design prikazu jer tada unosimo tekst i slike kao da radimo u Wordu, preporučam korištenje i HTML-a i CSS-a.
Znam da se nikome ne da pisati 5 kilometara dugačak kod, ali poznavanjem kodiranja možete u potpunosti imati kontrolu nad izradom svoje stranice. Lakše je pisati kod u Dreamweaveru u Split prikazu jer u isto vrijeme možete vidjeti kako napreduje i izgleda vaša stranica. CSS vam u tom slučaju olakšava grafičko oblikovanje stranice tako da u jednom koraku neka promjena može biti vidljiva na svim stranicama vašeg web sajta.
Rad sa tekstom
Čim počnemo upisivati tekst na dnu ekrana u Properties nalaze se naredbe kojima ga možemo naknadno promijeniti. Ako nam to nije dovoljno u izborniku u stupcu Format imamo veći izbor naredbi. Učinkovitiji način oblikovanja teksta je korištenje CSS-a.
Kostur stranice
Kako bismo dobili standardan prikaz stranice trebamo u HTML-u definirati osnovne dijelove. Ovo nije obavezno, nego je preporuka. Kasnije, kad savladate ovakav način izrade onda možete premještati dijelove kako vam se sviđa. Sve što ovdje vidimo nalazi se u elementu koji zovemo container.
U njemu se nalaze:
- zaglavlje
- lijevi dio
- desni dio
- podnožje
Za ovakav dizajn stranice potreban je sljedeći HTML kod:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Ovo je samo kostur stranice</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”header”>Zaglavlje</div>
<div id=”sidebar”>Lijevi dio </div>
<div id=”main”>Desni dio</div>
<div id=”footer”>Podnožje</div>
</div>
</body>
</html>
Izrada novog CSS-a
Nakon što smo prepisali i snimili gornji kod kao HTML dokument, napravit ćemo CSS za prvi selektor. Kliknemo na container u kodu i u desnom dijelu ekrana kliknemo na New CSS Rule.
Otvara se prozor za izradu novog CSS pravila u kojem je odabran #container, a mi odabiremo novo pravilo (New Style Sheet File) i kliknemo na OK.
U novom prozoru prvo odaberemo Box i definiramo širinu (width) i visinu (height) #containera. Nakon toga definiramo udaljenost sadržaja od #containera (padding) i debljinu margine (margin). Ako ostavimo kvačicu pod Same for all onda će vrijednosti biti iste za gore (top), dolje (bottom), lijevo (left) i desno (right). Ostale kategorije namještamo po vlastitoj želji. Na kraju kliknemo na OK. Isto tako definiramo dimnezije i sve ostalo za ostale elemente stranice tj. selektore.
Ostali su nam još: #header, #sidebar, #main, #footer. Sve ove elemente smo smjestili u #container kako bi mogli lakše manipulirati elementima na stranici kako bi sve izgledalo uredno i pregledno.
…ostatak CSS koda imamo ovdje:
@charset “utf-8”;
body {
color:white;
}
#container, #header, #main, #sidebar, #footer {
padding: 10px;
margin: 10px;
}
#container {
background-color: lightgreen;
width: 800px;
height: 710px;
margin: 10px auto;
}
#header {
background-color: blue;
width: 760px;
height: 200px;
}
#sidebar {
background-color: green;
float: left;
width: 30%;
height: 300px;
}
#main {
background-color: green;
float: left;
width: 60%;
height: 300px;
}
#footer {
background-color: red;
clear: both;
width:760px;
height: 100px;
}
Gotovi CSS
U slučaju da smo već prije napravili CSS onda ga samo povežemo sa HTML-om koristeći Attach Style Sheet na desnom dijelu ekrana.
U headeru HTML koda pojavit će se sljedeće:
<link href=”style.css” rel=”stylesheet” type=”text/css” />