Upload
anna-benko
View
104
Download
1
Embed Size (px)
Citation preview
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