Webszerkesztés

Dreamweaver használatával

Dreamweaver történelem

• 1996.: a Macromedia szoftverház bemutatja azelső WYSIWYG ( What You See Is What You Get= Amit látsz, azt kapod) webszerkesztőprogramot;

• ez a Dreamweaver (álomszövő) nevet kapta.

• Az első bemutatás óta 14 verzió került piacra afolyamatos fejlesztések következtében.

• A Dreamweaver jelenleg az AdobeSystems tulajdonában van, ami a Macromediacég felvásárlásával 2005-ben szerezte meg ajogokat.

Dreamweaver előnyök • Sok oldalúan tud együtt működni más olyan

alkalmazásokkal, melyek szintén a web-szerkesztés elengedhetetlen eszközei (pl.Adobe Flash)

• Nincs semelyik böngészőre optimalizálva,hanem legjobb tudása szerint olyan oldalakatkészít, melyek minden böngészőbenmegfelelően működni fognak.

Dreamweaver ablak felépítése

Objektum paletta • Segítségével különböző HTML objektumokat

tudunk elhelyezni az oldalon, mint például

• képek, táblázatok, hivatkozások stb.

• Kategóriák közötti váltáshoz kattintsunk aCommon felirat mellett látható háromszögre,

• majd a megjelenő menüből válasszuk ki amegfelelőt.

Properties paletta

• Egy dinamikus konfigurációs paletta

• mindig annak az objektumnak a tulajdonságaitmutatja, amelyik éppen ki van jelölve.

• Ez azért fontos, mert minden opció egy helyenérhető el, és nem kell keresgetnünk abeállításokat a menüsorban.

Site Root meghatározása

• A web szerkesztő egyik legfontosabb feladata,hogy a weboldal minden tartalmi részét egy –a weboldal szempontjából- kitűntetettkönyvtárban tárolja, mely a weboldalSiteRoot-ja.

• Mielőtt elkezdünk dolgozni, meg kellhatározni, hogy melyik site az, amelyiket mostszerkeszteni fogjuk.

Site RootKét lehetőségünk van:

1.létrehozunk egy új site-ot,

2.egy meglévő site-ot szerkesztünk.

Mindkét esetben a legfontosabb az, hogy ezáltala Dreamweaver azonosítja majd a siteroot-ot, ésa továbbiakban rábízhatjuk magunkat abból aszempontból, hogy az általunk mentettdokumentumok, vagy az általunk beszúrttartalmi elemek (pl., képek) már ebbe akönyvtárba fognak kerülni.

Új site létrehozása

Site menü-> New

Site parancsát kell

választanunk, ahol

a következő ablak

fogad bennünket:

Basic nézetben így állítjuk be site-unkat.

a) A Dreamweaver megkérdezi, hogy milyen nevetszeretnénk adni a létrehozni kívánt site-nak. Ez anév nem publikus név, ezt csak a dreamweaverarra használja, hogy nekünk könnyebb legyenazonosítani.

b) A következő beállítás arra vonatkozik, hogymilyen webcímen lesz publikálva a weboldal.Természetesen ennek kitöltése nem kötelező,mert az is leképzelhető, hogy miközbenszerkesztjük a weboldalt, még nem tudjuk, hogymilyen domain-t akarunk hozzá regisztrálni.

Site beállításaEbben az ablakban a Dreamweaver megkérdezi, hogy a weboldal szerkesztése során használunk-e server oldali technológiát, mint például php.

Site beállításaEbben az ablakban állíthatjuk be,

hogy a saját számítógépünkön

szerkesztjük-e weboldalunkat,

vagy közvetlenül a távoli

serveren.

a) Ez a lehetőség jelenti azt, hogy

a saját gépünkön dolgozunk.

Jelöljük be ezt a lehetőséget.

b) Ezt a lehetőséget kellene

választanunk, ha közvetlenül a

serverre dolgoznánk.

c) Az „a” választás függvényében

itt kell meghatároznunk, hogy

melyik könyvtár lesz a weboldal

SiteRoot-ja. A kis mappa ikonra

kattintva tudjuk kiválasztani

könyvtárunkat.

Site beállítása

Ebben az ablakban a

Dreamweaver arra kíváncsi,

hogy milyen módon

kapcsolódunk a távoli

serverhez.

A legördülő listából válasszuk a

„NONE” lehetőséget, mert nem

kapcsolódunk távoli serverhez.

Weboldalunkat majd később

publikáljuk FTP-n keresztül!

Site beállítása

Kiíródik egy

összefoglalás a site

meghatározásával

kapcsolatos

beállításainkról.

Ha mindent rendben

találtunk, kattintsunk a

„DONE” gombra!

Az új site

definiálásával készen

is vagyunk!

Kezdhetjük a munkát!

Site beállításának ellenőrzése

• Az ellenőrzést a „Files” palettán tudjuk elvégezni. Ez az a paletta, amely azt mutatja, hogy éppen melyik site van nyitva, és hogy jelen pillanatban melyik mappába dolgozunk.

• Erre a palettára van akkor is szükségünk az előzetes vizsgálathoz, ha egy meglévő site-ot akarunk szerkeszteni, és szeretnénk meggyőződni arról, hogy éppen melyik site-unk van nyitva.

• A „Files” palettát a képrenyő jobbalsó sarkában találjuk alapértelmezetten az egyéb paletták között.

• Amennyiben egy palettát látni – vagy éppen elrejteni szeretnénk, úgy a „Window” menüben érhetjük el ezek ki- és bekapcsolását.

• Amelyik paletta elnevezése előtt kis „pipát” látunk, az a paletta jelenleg be van kapcsolva és látható, amelyik előtt pedig nincs „pipa”, az jelenleg nincs bekapcsolva, azaz inaktív.

Az oldal tulajdonságainak meghatározásaA beállításhoz válasszuk a

Modify menü-> Page

properties parancsát! A

következő ablak fogad

minket:

Tulajdonság kategóriák

Appearance – megjelenés

Links – hivatkozások

Headings – címsorok

Title/Encoding – Cím és

kódolás

Tracing Image – Modellkép

Az Appearance kategória beállításai:

b., Itt állítható be a weboldal betűtípusa.

c., Megadhatjuk a a weboldal betűméretét, és a méret mértékegységét.

d., Szöveg szín meghatározása. Választhatunk a paletta színeiből, és

megadhatjuk a szín hexadecimális kódját a beviteli mezőben.

e., Háttérszín beállítása

f., Háttérkép meghatározása

g., Háttérkép elhelyezkedése, ismétlése

h., Margó méreteinek beállítása

A Links kategória beállításai:

a) Hivatkozások

betűtípusa

b) Hivatkozások

betűmérete

c) Hivatkozás

színeinek beállítása

d) Hivatkozás

aláhúzásának

beállításai

A Headings kategória beállításai

Ezeket a tag-eket minden

böngésző azonosan

jeleníti meg.

A Dreamweaver ebben a

kategóriában egyéni

megjelenést biztosít

minden heading-nek.

Az első beviteli mezőben a

heading betűméretét –

majd a második beviteli

mezőben a színét

állíthatjuk be.

A Title/Encoding kategória beállításai a) A Title meghatározása

b) A dokumentum típus

meghatározása

c) A dokumentum

karakterkódolása

(Megjegyzés: a magyar

karakterek pontos

megjelenítéséhez az ISO

8859-2 karakterkódolási

szabványra van szükség,

illetve beállítható az

UTF-8-as

karakterkódolási

szabvány is, mely

tartalmazza a világ

összes karakterét.)

A Tracing Image kategória beállításai Lehetőségünk van úgynevezett modell kép

beállítására, amely a szerkesztőfelületen

fog segítséget nyújtani számunkra a

weboldal szerkesztése során.

Ezt a funkciót akkor használjuk ha előzőleg

megszerkesztettük a weboldal

látványképét egy képszerkesztő

alkalmazásban és ezt a látványképet

szeretnénk sablonként használni a design

megalkotásához.

Ez a kép nem egyenlő a weboldal

háttérképével, mert ez publikálás során

nem jelenik meg, csak a

szerkesztőfelületen.

a., A modell kép kiválasztása

b., A modell kép átlátszóságának

beállítása