Ezen információk az interneten megtalálhatók, tanulás céljából lettek összegyűjtve!
Amint látjátok a program kezelőfelülete eléggé különbözik más HTML szerkesztő programok felületétől. A megszokott menükön kívül úgynevezett "lebegő paletták" (Floating Palettes) is segítik és gyosítják a munkát. Ezek arra szolgálnak, hogy az éppen szerkesztés alatt álló objektum (szöveg, kép, link, táblázat, bármi...) jellemzőit könnyen és gyorsan be lehessen állítani, menükben való csatangolás nélkül. A palettákat a WINDOW menüben lehet ki- vagy éppen bekapcsolni.
Ahol írtam, hogy kép, ott a kérdéses palettáról, menüről találsz egy képet. A kép új ablakban nyílik meg. Nem akartam ide berakni a képeket, nehogy megőszüljetek, mire letöltődik.:)
Nézz meg egy elmentett Dreamweaver képernyőt, ahol majdnem minden paletta kint van, itt >>>
Nézzük, milyen palettái vannak a Dreamweaver-nek.
OBJECTS
Ez a paletta objektumok gyors beszúrására szolgál. Az objektumok hat csoportra vannak osztva.
Az OBJECTS PALETTA KÉPE ÉS MENÜJE, ITT >>>
COMMON (általános):
A COMMON PALETTA KÉPE, ITT >>>
Ezzel a palettával a következő objektumokat tudod beszúrni a HTML dokumentumodba:
IMAGE (kép)
Kép beszúrása.
TABLE (táblázat)
Táblázat beszúrása.
HORIZONTAL RULE (vízszintes elválasztó vonal)
No comment. :)
LAYER (réteg)
Egy réteget helyezhetsz el az oldalban. A réteg bármit tartalmazhat, szöveget képet, egyéb más objektumokat, és nagy előnye, hogy bárhova rakhatod az oldalon, csak meg kell fogni az egérrel és a kívánt helyre húzni. Csak a 4-es és a későbbi böngészők ismerik!
E-MAIL LINK
Ehhez sem kell bővebb magyarázat, remélem.
FLASH (Flash animáció)
Egy Flash animációt lehet beszúrni az oldalba.
JAVA APPLET
Java nyelven írt appleteket szúrhatsz be a dokumentumba. A doksi letöltésekor ez az applet is letöltődik az olvasó gépére majd a böngésző Java motorja lefuttatja az appletet.
PLUG-IN
Egy olyan plugint helyezhetsz el az oldalban, amelyre pl. egy animáció lejátszásához szükség lehet.
ROLLOVER IMAGE
Ez az a klasszikus effektus, hogy amikor az egeret egy kép fölé viszed, akkor a az eredeti kép helyére egy másik kerül arra az időre, amíg az egérkurzor a kép fölött van.
TABULAR DATA
Tabulátorral határolt szöveg, pompás táblázat lesz belőle... Tegyük fel, hogy egy Excel táblázatot akarsz áttenni HTML-be. Excel-ben elmentheted ugyan HTML formátumban, de az olyan lesz mint a.... Szóval lehet hogy bele kell javítanod kézzel. Viszont ha a táblázatot tabulátorral határolt szövegként mented, akkor egy olyan .TXT állományt kapsz, ahol az egyes adatok tabulátorjellel vannak elválasztva egymástól. A tabulátor jeleket felhasználva, a Dreamweaver meg tudja csinálni a táblázatot, mégpedig hibátlanul.
NAVIGATION BAR
A rolloverhez hasonló, de itt több kép van egymás mellett egy táblázatban.
LINE BREAK
Sortörés beszúrása.
DATE
Dátum beszúrása.
SHOCKWAVE
Shockwave animáció beszúrása.
FIREWORKS HTML
FIREWORKS-el készített kép vagy HTML dokumentum beszúrása.
ACTIVE-X
ActiveX objektum beszúrása.
SERVER SIDE INCLUDE
Szerver oldali beillesztés. Ha kiszolgáló támogatja, akkor a HTML dokumentum közös részeit (pl. egy táblázat) egy külső fájlban lehet tárolni és hivtkozni erre a fájlra egy HTML dokumentumban.
CHARACTERS (karakterek):
A CHARACTERS PALETTA KÉPE, ITT >>>
Még mindig az OBJECTS palettánál tartunk. Ha a legördülő menüjéből a CHARACTERS-t választod, akkor speciális karaktereket szúrhatsz be a dokumentumod szövegébe.
Ezek a speciális karakterek a következőek:
©, ®, ™, £,¥ , —, “, ”
FORMS
Ha váltasz a FORMS-ra az OBJECTS palettán, akkor űrlapot, és a következő űrlapelemeket szúrhatod be a dokumentumodba:
A FORMS PALETTA KÉPE, ITT >>>
FORM
Ezzel egy űrlapot helyezel el az oldaladban. A Dreamweaver egy piros szaggatott vonallal fogja jelölni az űrlapot. Ezen a területen belül kell elhelyezned a szükséges űrlapelemeket. Bővebbet az űrlapokról szóló fejezetben találsz.
TEXT FIELD
Egy egyszerű szövegmező beszúrása.
BUTTON
Nyomógomb beszúrása.
CHECKBOX
Jelölőnégyzet beszúrása.
RADIO BUTTON
Rádiógomb beszúrása.
LIST/MENU
Legördülő menü beszúrása.
FILE FIELD
Fájl feltöltésére szolgáló mező beszúrása.
HIDDEN FIELD
Rejtett mező beszúrása.
JUMP MENU
Hasonló a LIST/MENU elemhez, de ennek a listájában általában URL-el vannak.
FRAMES
Nyolc féleképpen oszthatod keretekre az oldaladat. Bővebbet a frame-ekről szóló fejezetben olvashatsz.
A FRAMES PALETTA KÉPE, ITT >>>
HEAD
A HEAD paletta segítségével a HTML dokumentum fejlécében található információkat illesztheted be, illetve szerkesztheted.
A HEAD PALETTA KÉPE, ITT >>>
META
Ennél az elemnél adhatsz meg minden olyan kiegészítő információt, amelyet más elemeknél nem tehetsz meg.
KEYWORDS
A HTML dokumentum kulcsszavait adhatod meg itt. Ha regisztrálod az oldaladat egy keresőbe, akkor az itt megadott kulcsszavak alapján kerül bele (vagy nem kerül bele) a találati listába az oldalad címe.
DESCRIPTION
Itt adhatod meg az oldalad rövid szöveges leírását.
REFRESH
Beállíthatod, hogy az oldalad bizonyos idő elteltével automatikusan frissüljön. Másodpercekben kell megadni, tehát ha a REFRESH értéke 120, akkor az oldalad kétpercenként automatikusan frissül a böngészőben. Az ACTION-nél két dolgot állíthatsz: vagy az oldalt frissíted, vagy ugrasz egy URL-re.
BASE
Egy dokumentum eredeti helyét jelzi. Akkor lehet hasznos, ha a dokumentum el lett mozgatva a könyvtárstruktúrán belül, és így a rá mutató hivatkozás érvénytelen lenne.
LINK
A dokumentum és más dokumentumok közötti kapcsolódást jelöl. Tipikus alkalmazása dokumentumok, stílusleíró állományok stb. kapcsolása a dokumentumhoz.
INVISIBLES
Ennek a palettának a használatával az alábbi elemek szúrhatóak be a dokumentumba:
AZ INVISIBLES PALETTA KÉPE, ITT >>>
COMMENT
Kommentet szúrhatsz be az oldaladba. A kommentként beírt szöveget a böngésző nem írja ki.
SCRIPT
Scriptet szúrhatsz be az oldalba.
NON-BREAKING SPACE
Nem törhető szóköz beszúrása.
Ezzel az OBJECTS palettákat ki is végeztük. Nézzük a továbbiakat.
A LAUNCHER paletta
A LAUNCHER PALETTA KÉPE, ITT >>>
A LAUNCHER palettával további palettákat tehetsz ki a képernyőre.
Nézzük, melyek ezek a paletták:
SITE
Az oldalak menedzseléséhez használt eszközöket találod itt.
LIBRARY
Ez egy nagyon hasznos eszköz! Tegyük fel, hogy vannak az oldalaidnak olyan ismétlődő elemei, amelyekre többször is szükség lehet. A kijelölt elemet át lehet húzni a LIBRARY-ba, majd onnan egy másik HTML oldalba bármikor beilleszteni.
HTML STYLES
Itt találod a HTML stílusokat. Bővebbet a Stílusok fejezetben olvashatsz a stílusok készítéséről és alkalmazásáról.
CSS STYLES
Itt a már meglévő CSS stílusaidat láthatod. Bővebb a Stílusok fejezetben.
BEHAVIORS
Ezzel az eszköztárral készíthesz kis JavaScripteket. Külön fejezetben tárgyalom majd ennek a lehetőségeit.
HISTORY
Ez is roppant hasznos! A HISTORY-ban látod az összes műveletet, amelyet a dokumentumodon végrehajtottál. Vissza is lehet vonni őket, természetesen. A baloldalon lévő csúszkát felfelé tolva visszavonja szépen a műveleteket. Ha a HISTORY palettán állva a jobb oldali egérgombbal kattintasz, akkor a feltáruló helyi menü parancsaival megismételheted, másolhatod, sőt, el is mentheted az egyes műveleteket.
HTML SOURCE
A HTML doksid forrását szemlélheted meg vele. Nagyon hasznos eszköz, a dokumentumon végrehajtott műveletek azonnal megjelennek a forrásban, a forráson végzett változtatások rögtön meglátszanak a dokumentumon is. Szerintem mindenféle külső HTML szerkesztőt feleslegessé tesz.
---
Feltöltés és karbantartás
A Dreamweaverben az oldalak kezelésével kapcsolatos funkciók a SITE menüben kaptak helyet. A szerkesztési munka megkezdése előtt célszerű definiálni egy könyvtárat, amely Internetes publikálásra szánt anyagaink gyökérkönyvtára lesz. Természetesen ezen a könyvtáron belül létre lehet hozni az anyagok megfelelő csoportosításához szükséges alkönyvtárakat is. A DEFINE SITES parancs kiadásával kezdjük.
A beállítandó jellemzők:
LOCAL INFO - meg kell adnunk az előbb említett lokális gyökérkönyvtárat, valamint azt az URL-t is ahová majd fel kívánjuk a dokumentumokat tölteni.
WEB SERVER INFO - ki kell választani, hogy dokumentumainkat hogyan töltjük majd fel. A SERVER ACCESS feliratú legördülő menüből választhatunk FTP-t, illetve helyi hálózatot is. FTP használat esetében meg kell adni annak a szervernek a nevét, amelyhez kapcsolódni kívánunk, valamint annak a könyvtárnak a nevét, amelybe oldalunk anyagait helyezzük majd el, végül pedig a hozzáféréshez szükséges felhasználói nevet, és jelszót kell beírni. Lokális vagy helyi hálózatra történő elhelyezés esetén csupán a megfelelő könyvtárat kell kiválasztani.
A definiálás után nekiláthatunk a publikálásnak.
Ehhez a SITE..OPEN SITE..oldal_név parancsot kell kiadnunk. Rögtön láthatóvá válik oldalunk szerkezete, láthatjuk az egyes dokumentumokat, és a közöttük fennálló kapcsolatokat. A jobb oldali ablakban látható oldalunk könyvtárszerkezete. A feltölteni kívánt dokumentumot, vagy könyvtárt ki kell választani, majd a PUT gombra való kattintással a feltöltés elindítható. Ha csak egy HTML dokumentumot töltünk fel, akkor a program meg fogja kérdezni, hogy az adott dokumentumhoz tartozó fájlokat is feltöltse-e. Érdemes élni ezzel a lehetőséggel, mert akkor nagy valószínűséggel semmi sem fog kimaradni a feltöltésből. Ha a jobb oldali ablakban valamelyik könyvtárat választjuk ki, akkor a könyvtár és teljes tartalma fel fog töltődni. Ha valamelyik állományt le akarjuk másolni a webszerverről a saját gépünkre, akkor azt az állomány kiválasztása után a GET gombra történő kattintással tehetjük meg. A REFRESH funkció használatával mindig az aktuális állapotot láthatjuk, így meggyőződhetünk arról, hogy minden állomány rendben felkerült-e a szerverre.
---
Frame-ek
A keretek segítségével a böngésző ablakát több részre lehet osztani, és mindegyik keretbe más-más dokumentumot lehet betölteni. Keretekkel nagyon látványos (és esetleg nagyon rossz) oldalakat lehet létrehozni, sok kereteket használó oldal található az Interneten.
Az oldal keretekre osztása A művelet végrehajtásához az INSERT..FRAMES parancsot kell kiadni, vagy a FRAMES palettán a kívánt felosztásra kell kattintani .
Többféle felosztás közül lehet választani:
LEFT: A baloldalon egy kisebb, a jobb oldalon egy nagyobb méretű keretet kapunk.
RIGHT: A jobb oldalra kerül a kisebb méretű keret.
TOP: Felülre kerül a kisebb méretű keret.
BOTTOM: Alulra kerül a kisebb méretű keret.
LEFT AND TOP: Ez a jobb és felső felosztás kombinációja, eredménye négy keret.
LEFT TOP: Eredménye három keret, a bal oldali keret magasságát tekintve a képernyő teljes magasságát elfoglalja, a jobb oldali keret pedig további két részre lesz osztva.
TOP LEFT: Ennek a felosztásnak is három keret az eredménye.
SPLIT: A böngésző képernyője négy egyenlő keretre lesz felosztva.
A keretek további jellemzőit a SELECTION PROPERTIES palettával , valamit a WINDOW..FRAMES parancs kiadásával lehet beállítani. A WINDOW..FRAMES parancs hatására kapsz még egy palettát. Ezen a palettán is lehet látni a képernyő aktuális felosztását. A kiválasztott keretre kattintva a SELECTION PROPERTIES palettán máris feltűnnek a keret jellemzői .
A következő jellemzőket lehet beállítani:
FRAME NAME: Az aktuális keret nevét lehet megadni ebben a mezőben. Mindegyik keretnek célszerű egyedi nevet adni.
SRC: Annak a dokumentumnak az URL-je amelyik majd ebbe a keretbe fog betöltődni.
SCROLL: Megadható, hogy a keretben lévő dokumentum görgethető legyen-e.
NO RESIZE: Ha ez a jelölőnégyzet be van jelölve, akkor a keret nem lesz átméretezhető.
BORDERS: A felosztást szegélyező keret. Ha láthatóvá akarod tenni, akkor a Yes értéket kell beállítani. Ebben az esetben a kívánt színt is be lehet állítani.
A felosztás művelete után meg kell határozni, hogy adott keretbe mely HTML dokumentumnak kell betöltődnie. A keretekre osztott oldal letöltődés után ezeket a dokumentumokat fogja tartalmazni. Fontos, hogy ha valamelyik keretbe egy hivatkozással másik dokumentumot akarunk betölteni, akkor a TARGET paraméter segítségével meg kell határozni, hogy a dokumentum melyik keretbe töltődjön be. A TARGET paraméternek a keret nevét kell tartalmaznia.
---
Hivatkozások, linkek
Az oldalak összekapcsolását könnyedén elvégezheted a Dreamweaver-ben. A kijelölt szövegrészhez úgy lehet hivatkozást kapcsolni, hogy a SELECTION PROPERTIES palettán a LINK mezőbe beíod annak a dokumentumnak, vagy valamilyen objektumnak az URL-jét, amelyre hivatkozni akarsz. Ha a hivatkozott állomány egy helyi fájl, akkor a mező melletti ikonra kattintva kiválasztható. Ha olyan hivatkozást kell készíteni, amely egy e-mail címre mutat, akkor az INSERT..E-MAIL LINK parancsot kell kiadni. Egy párbeszédablakban meg kell adni a hivatkozás szövegét, valamint azt az e-mail címet, amelyre a hivatkozásnak mutatnia kell. Ha egy képhez akarsz több hivatkozást rendelni, akkor a lehetőségeid kibővülnek az image-map-el.
Image map készítése:
A kép kijelölése után a SELECTION PROPERTIES palettán bal alsó részben találhatóak az image map készítéséhez szükséges eszközök. A MAP mezőbe be kell írni az image map nevét. Utána ki kell jelölni a képnek azt a területét, amelyhez hivatkozást szeretnéd rendelni. A kiválasztott terület négyzet, kör, vagy sokszög alakú lehet. A alakzatnak megfelelően kiválasztod a kijelölő eszközt, majd a képen kijelölöd azt a területet, amelyhez a hivatkozást kapcsolod. A kiválasztás után a LINK mezőbe beírod (kiválasztod) a kívánt URL-t. Ezzel kész is a hivatkozás. A kiválasztott terület mérete később is változtatható, ha szükséges.
---
Karakterek és bekezdések formázása
Az oldalba illesztett szöveg formázását el lehet végezni a TEXT menü parancsainak használatával.
INDENT, OUTDENT : Ezeknek a menüpontoknak a használatával lehet a szöveg behúzását növelni, vagy csökkenteni.
FORMAT: Ebben a menüben találhatóak a bekezdésformázást elvégző parancsok.
PARAGRAPH - egyszerű bekezdés
HEADING1-6 - címsorok
PREFORMATTED TEXT - előre formázott szöveg
LIST: Ebben a menüben találhatóak a felsorolások
UNORDERED LIST - nem számozott lista
ORDERED LIST - számozott lista
DEFINITION LIST - definíciós lista
ALIGNMENT: A szöveg igazításának beállítása, balra, középre, jobbra.
FONT: A dokumentum szövegének betűtípusát állíthatjuk be. Érdekessége, hogy alaphelyzetben csak olyan betűtípusokat lehet kiválasztani, amelyek majdnem minden felhasználó gépén megtalálhatóak, de természetesen ezt a listát lehet bővíteni.
STÍLUSOK: A stílusok a dokumentumban elhelyezett szöveg formázásához nyújtanak hathatós segítséget.
STYLE: A HTML nyelv által biztosított szöveg- és karakterformátumok.
HTML STYLE: HTML karakter és bekezdésformátumokat lehet létrehozni, és egy szövegre alkalmazni.
CSS STYLE: A CSS stílusleíró nyelv segítségével szintén létre lehet hozni karakter- és bekezdésformátumokat. Mivel a CSS egy szabványosított, nyelv, ezért célszerű ezt használni, annál is inkább, mert a használata módfelett kényelmessé teszi a szövegformázást.
SIZE: A karakter méretét lehet beállítani.
SIZE INCREASE: Betűméret növelése
SIZE DECREASE: Betűméret csökkentése
COLOR: Szöveg színének beállítása
A karakterformázási műveletek gyorsabban elvégezhetőek, ha a lebegő paletta használatával hajtod végre azokat. A paletta a MODIFY..SELECTION PROPERTIES parancs kiadásával kapcsolható be vagy ki. Ezen a palettán mindig annak az objetumnak a jellemzőit lehet látni, amelyet az egérrel előzőleg kiválasztottál. Szöveg esetében a már korábban említett jellemzőket könnyedén be lehet állítani a paletta alkalmazásával
---
Stílusok
A stíluslapok nagy terhet képesek levenni az oldal készítőjének válláról. Egy jól megtervezett stíluslap segítségével sokkal gyorsabban meg lehet formázni a dokumentumban található szöveget. Ha a stílusok leírását egy külső állományban vannak tárolva, akkor több dokumentumban is lehet majd ugyanazokat a stílusokat használni. Így az oldalak megjelenése egységes lesz. Az sem elhanyagolandó szempont, hogy sokkal több formázási lehetőségünk nyílik, mint a HTML szövegformázó utasításaival. Stíluslapok készítésére ma leginkább a CSS nyelvet használják.
A Dreamweaver-el két fajta stílust lehet alkalmazni.
HTML stílusok:
A HTML stílus tulajdonképpen HTML utasítások csoportjából álló formázási utasítást jelent. Pár előre definiált stílust tartalmaz a program, de bármikor lehet készíteni újat.
HTML stílus készítése:
A TEXT..HTML STYLES..NEW STYLE parancs segítségével készíthetünk új HTML stílust. Az új stílusnak adni kell egy nevet, majd ki kell választani, hogy a stílust a későbbiekben egy kijelölt szövegrészre (selection), vagy pedig egy bekezdésre (paragraph) kívánod-e majd alkalmazni. Amennyiben szövegrészre kívánjuk alkalmazni, akkor csak a betűtípust, betűméretet, betűszínt, és a karakter stílusát(félkövér, dőlt stb.) lehet beállítani. Ha azt választottad, hogy bekezdésre fogod alkalmazni a stílust, akkor a bekezdés jellemzőinek beállítására is lehetőség nyílik, és beállíthatod a bekezdésformátumot, valamint a bekezdés igazítását. A kész stílus bekerül a HTML stílusok listájába , és bármikor alkalmazható a dokumentum szövegén.
CSS stílusok
A CSS egy szabványos leíró nyelv, melynek segítségével szintén létrehozhatóak előre definiált karakter és bekezdésformátumok.
CSS stílus készítése:
Új stílus készítéséhez a TEXT..CSS STYLES..EDIT STYLE SHEET parancsot kell kiadni. Kapunk egy párbeszédablakot, amelyben láthatóak a már létező stílusok. Ha külső fájlból szeretnénk stílusdefiníciókat importálni, akkor a LINK gombra kell kattintani. Új stílus létrehozásához a NEW gombra kell kattintani. Adni kell egy nevet a stílusnak. Utána tudjuk meghatározni a stílusdefiníciókat.
A stílusjellemzők kategóriákba vannak csoportosítva:
TYPE: A karakterformázással kapcsolatos jellemzőket lehet beállítani.
FONT: A kívánt betűtípus
SIZE: A kívánt betűméret. Fontos tudni, hogy több mértékegység szerint is meghatározható a betűk mérete. A választható mértékegységek: pont, pixel, inch, cm, mm, pica, ems, exs. Érdemes lehet a pixelt választani a betűk méretezéséhez, mert akkor a böngészők nem tudják majd megnövelni a betűk méretét a megjelenítéskor, hiába adja ki a felhasználó a betűméret növelésére szolgáló parancsot. Ezzel (és gondos tervezéssel) elkerülhető az oldal esetleges széttördelődése. Azonban mindenféleképpen olyan betűméretet kell választani a szöveghez, hogy azok az emberek is el tudják olvasni a szöveget, akiknek rosszabb a szemük. Tehát meg kell találni azt a méretet ami nem túl nagy és nem is kicsi. Ez körülbelül a 13-17 pixeles tartományt jelenti a betűméret esetében.
STYLE: A szokásos betűstílusok találhatóak itt. Választható a normal az italic és az obligue stílus. Az obligue az italic-hoz hasonlóan a szöveg döntött megjelenését eredményezi. Első látásra hiányozhat a bold stílus. Ezt a stílust a Weight paraméterrel lehet beállítani. A legördülő menüből számtalan félkövér stílus közül lehet választani.
LINE HEIGHT: A szöveg sortávolságát lehet beállítani ezzel a paraméterrel.
DECORATION: Ha további karakterstílusokat is be szeretnénk állítani, akkor lehet választani még aláhúzott szöveget (underline), villogó szöveget (blink), felül áthúzott szöveget (overline) és középen áthúzott (line-through) is.
CASE: Itt beállítható, hogy nagybetűs (uppercase), kisbetűs (lowercase) szöveget akarunk-e.
COLOR: Végül a szöveg színét választhatjuk ki egy színskálából.
Jól látható, hogy a CSS stílusok használatakor nem kell beérned a HTML nyelv nyújtotta karakterformázási lehetőségekkel. Egy CSS nyelven írt stíluslap segítségével sokkal jobban formázhatóak a dokumentumban található szövegek. Természetesen nem kötelező az összes felsorolt jellemző beállítása, csak azokat kell beállítani, amelyekre szükség van.
Hátterek (Background)
Egy HTML dokumentumnak lehet háttere. A CSS nyelv segítségével a beírt szövegnek is lehet saját hátteret adni, amely háttér az oldal hátterétől független. A szövegháttér csak azt a részét tölti ki a dokumentumnak, ahol szöveg található.
BACKGROUND COLOR: Ha megelégszünk egy háttérszínnel, akkor itt lehet kiválasztani.
BACKGROUND IMAGE: Ebben a mezőben meg kell adni a kép elérési útját.
REPEAT: A háttérkép ismétlődésének beállítása. repeat-y - csak függőleges ismétlés repeat-x - vízszintes ismétlés repeat - vízszintes és függőleges ismétlés no repeat - de ki is lehet kapcsolni az ismétlést .
HORIZONTAL POSITION: A háttérkép vízszintes igazításának beállítása.
VERTICAL POSITION: A háttérkép függőleges igazításának beállítása.
Bekezdésformázás (Block)
A bekezdés formátumára vonatkozó jellemzőket lehet itt beállítani.
WORD SPACING: A szavak közötti távolság.
LETTER SPACING: A betű közötti távolság
VERTICAL ALIGNMENT: A bekezdés függőleges igazítása
TEXT ALIGN: A szöveg igazítása. Itt már ki lehet választani a sorkizárt igazítást is, nem csak balra, középre, vagy jobbra lehet igazítani a szöveget.
TEXT INDENT: A szöveg behúzásának mértéke.
WHITESPACE: A szövegben található szóközökre vonatkozik ez a beállítás. Meghatározhatod, hogy a szóközök mentén a böngésző alkalmazhasson-e automatikus sortörést vagy sem. Normál esetben a böngésző automatikusan új sorba írja azt a szöveget, amely már nem fér egy sorba. Ebben az esetben a sor hosszúsága a böngésző ablakának méretétől függ. Ha a NOWRAP beállítás választjuk, akkor a szöveg egy sorba kerül egészen addig, amíg egy <BR> elemmel le nem zárod a sort.
Keretek: (Border)
Keretet vonhatsz egy tetszőleges elem köré. Ez lehet sima szöveg, kép, táblázat stb.
WIDTH: A keret vonalainak vastagságát lehet beállítani. Az értéket külön-külön állíthatjuk a keret felső, alsó, bal -és jobb oldali vonalára vonatkozóan.
COLOR: A keretet alkotó vonalak színének beállítása: Az egyes vonalaknak akár eltérő színük is lehet.
STYLE: A keret vonalának a stílusát határozhatjuk meg.
A stílusdefiníciók meghatározása után már csak alkalmazni kell az új stílust a kiszemelt szövegrészre, objektumra. A kész stílust bármikor lehet módosítani. Figyelni kell arra, hogy a *-al jelölt paraméterek hatását a Dreamweaver szerkesztőablakában nem láthatjuk, csak a böngészőben! A szövegek formázására használt stílusokat célszerű két lépcsőben létrehozni. Először csak azokat a stílusokat készítjük el, amelyek a karakterformázással kapcsolatos jellemzőket tárolják, itt bekezdésekre vonatkozó jellemzőket nem állítunk be. A karakterstílusok után készítjük el a bekezdések formátumára vonatkozó stílusokat. az így létrejött stílusokat kombinálhatjuk stílusainkat a szövegformázás során. Természetesen olyan stílust is lehet készíteni, amelyben a karakterek jellemzői mellett a bekezdés igazítására vonatkozó információkat is definiálunk. Ebben az esetben azonban gondjaink akadhatnak a szöveg igazításával, ha az eredeti igazítást felül akarjuk bírálni egy utasítással.
A CSS Styles palettán láthatjuk a rendelkezésre álló stílusokat.
Az APPLY TO legördülő menü segítségével alkalmazhatjuk őket a dokumentum valamely részére. Ebben a legördülő menüben mindig azokat a HTML elemeket látjuk, amelyek a dokumentum azon a részén vannak, ahol a kurzor éppen áll. Tehát ha éppen egy táblázat egyik cellájában villog a kurzor, akkor a <BODY>, <TABLE>, <TR>, <TD> elemek találhatóak az APPLY TO menüben, és ezen elemek valamelyikére alkalmazhatjuk valamelyik stílusunkat. Ezért, ha valamelyik karakterstílusunkat alkalmazzuk a <TD> elemre, akkor a kérdéses cellában található (vagy később beírt) szöveg, az alkalmazott stílussal fog megjelenni.
Tegyük fel, hogy egy bekezdésre több stílust is akarunk alkalmazni. Van egy bekezdésre vonatkozó stílusunk, és van egy karakterre vonatkozó. Az APPLY TO menüben most a <BODY>, a <P> elem látható, valamint egy SELECTION menüpont. A SELECTION segítségével egy kijelölt szövegrészre alkalmazhatunk valamilyen stílust. Először a <P> elemhez hozzárendeljük bekezdés formátumát tartalmazó stílust, majd kijelöljük a szöveget, és a SELECTION-höz pedig a karakter formátumot tartalmazó stílust.
A HTML forrás ablakát megnyitva a dokumentum forrásában a következőt látjuk:
<P class="bekezdes"><SPAN class="karakter">BEKEZDÉS SZÖVEGE</SPAN></P>
Ezzel kész is a bekezdés formázása. Ha HTML utasításokkal oldottuk volna meg a formázást, akkor egy lényegesen hosszabb utasítást kaptunk volna.
---
Táblázatok
A Dreamweaver táblázatkezelése többnyire barátságos, a táblázatok könnyen kezelhetőek.
Táblázat beszúrása:
Az INSERT..TABLE parancs kiadásával, vagy az OBJECTS paletta megfelelő gombjára kattintással lehet a dokumentumba táblázatot illeszteni. Meg kell adni az oszlopszámot, a sorszámot, a táblázat méretét %-ban vagy pixelben, valamint a cella térközt és a cellák közötti távolságot. Természetesen a táblázat összes jellemzője módosítható a későbbiekben. A szükséges formázási művelek elvégzéséhez célszerű a palettát használni. Ha a frissen beillesztett táblázat ki a van jelölve, akkor a SELECTION PROPERTIES palettán a táblázat jellemzői lesznek láthatóak.
A paletta segítségével elvégezhető formázási műveletek:
Táblázat szélességének és magasságának beállítása:
A W (width) és a H (height) mezőkbe kell csupán beírni a kívánt méretet. A mezők mellett található legördülő menük segítségével ki lehet választani, hogy százalékban vagy pixelben legyen a méret beállítva.
Sorok, oszlopok beszúrása:
A ROWS és a COLUMNS mezőkbe kell beírni a kíván sor, illetve oszlopszámokat. A későbbiekben bármikor módosítható a sorok illetve az oszlopok száma.
Táblázat méretének beállítása:
Két módon állíthatóak a táblázat méretei. A táblázat határoló vonalainak egérrel történő mozgatásával. Ez a módszer a táblázat méretének gyors beállítására szolgál. Ha fontos, hogy adott méretű legyen a táblázat, akkor célszerű a magasság és a szélesség értékeit pontosan megadni.
A W (width) és a H (height) mezőkbe írt értékekkel is be lehet állítani a táblázat vízszintes és függőleges méretét. A méreteket százalékosan, vagy pixelben lehet megadni. A paletta bal oldalán található gombok segítségével a százalékos érték bármikor pixeles értékre konvertálható, és fordítva.
Az alatta lévő két gomb segítségével lehet törölni a táblázat vízszintes és függőleges méretének értékét.
Táblázat igazítása:
Az ALIGN legördülő menüből lehet kiválasztani, hogy balra, középre, vagy jobbra legyen-e igazítva a táblázat.
A táblázat hátterének beállítható valamilyen háttérszín, vagy háttérkép. Háttérszínt a BG mezőbe írt hexadecimális számmal lehet megadni, vagy pedig egy színskálából kiválasztani. Ha van valamilyen kedvenc színünk a HTML nyelv által előre definiált színek között, akkor azt is meg lehet adni. Hasonló módon lehet beállítani a táblázat keretének színét is, de ez csak akkor fog a képernyőn megjelenni, ha a keret (Border) értéke nem nulla. Újdonság a korábbi szerkesztőprogramokhoz képest, hogy meg lehet adni még egy világos, és egy sötét keretszínt is. Gyakorlati haszna meglehetősen csekély, mert csak az Internet Explorer támogatja ezt a két paramétert.
Az imént felsorolt jellemzők módosítása lehetséges a paletta segítségével. Azonban itt nem merül ki a Dreamweaver tudása a táblázatkezelés terén. A további műveleteket a MODIFY..TABLE menüben, vagy a táblázaton történő jobb gombos kattintás után megnyíló helyi menüben lehet megtalálni.
SPLIT CELL: Ezzel a paranccsal lehet egy cellát több cellára felosztani.
MERGE CELLS: A parancs a kijelölt cellákat egyesíti.
INSERT ROW: Új sor beszúrása
INSERT COLUMN: Új oszlop beszúrása
DELETE ROW, DELETE COLUMN: Sor illetve oszlop törlése a táblázatból.
INCREASE/DECREASE ROW SPAN: Ez a parancs szintén cellaösszevonásra használható, kiadása után az aktuális cella összevonásra kerül az alatta lévő cellával.
INCREASE/DECREASE COLUMN SPAN: Ez a parancs szintén cellaösszevonásra használható, kiadása után az aktuális cella összevonásra kerül az mellette lévő cellával.
---
Űrlapok
A Dreamweaver segítségével könnyedén lehet űrlapokat készíteni. Egy új űrlapot az INSERT..FORM parancs kiadásával, vagy a FORMS paletta megfelelő gombjára kattintással lehet elhelyezni a dokumentumban. A beszúrási művelet elvégzése után egy piros szaggatott vonallal határolt területet látunk a dokumentumban. Erre a területre kell elhelyezni majd az űrlapelemeket.
A SELECTION PROPERTIES palettán máris láthatóvá válnak az űrlap jellemzői.
FORM NAME: Az űrlap nevét kell megadni ebben a mezőben.
ACTION: Ebbe a mezőbe az űrlap által küldött adatokat feldolgozó program nevét kell megadni.
METHOD: Az adatok küldésének módját lehet itt beállítani. Két küldési mód közül lehet választani, ezek a POST és a GET metódusok. A GET metódus a küldött adatokat az URL-ben helyezi el, a POST metódus pedig a program standard bemenetére küldi azokat.
Az űrlap létrehozása után lehet a szükséges űrlapelemeket elhelyezni, az INSERT..FORM OBJECT parancs kiadásával.
Remélem segítettem azoknak akik komolyabban érdeklődnek a program iránt!
Amint látjátok a program kezelőfelülete eléggé különbözik más HTML szerkesztő programok felületétől. A megszokott menükön kívül úgynevezett "lebegő paletták" (Floating Palettes) is segítik és gyosítják a munkát. Ezek arra szolgálnak, hogy az éppen szerkesztés alatt álló objektum (szöveg, kép, link, táblázat, bármi...) jellemzőit könnyen és gyorsan be lehessen állítani, menükben való csatangolás nélkül. A palettákat a WINDOW menüben lehet ki- vagy éppen bekapcsolni.
Ahol írtam, hogy kép, ott a kérdéses palettáról, menüről találsz egy képet. A kép új ablakban nyílik meg. Nem akartam ide berakni a képeket, nehogy megőszüljetek, mire letöltődik.:)
Nézz meg egy elmentett Dreamweaver képernyőt, ahol majdnem minden paletta kint van, itt >>>
Nézzük, milyen palettái vannak a Dreamweaver-nek.
OBJECTS
Ez a paletta objektumok gyors beszúrására szolgál. Az objektumok hat csoportra vannak osztva.
Az OBJECTS PALETTA KÉPE ÉS MENÜJE, ITT >>>
COMMON (általános):
A COMMON PALETTA KÉPE, ITT >>>
Ezzel a palettával a következő objektumokat tudod beszúrni a HTML dokumentumodba:
IMAGE (kép)
Kép beszúrása.
TABLE (táblázat)
Táblázat beszúrása.
HORIZONTAL RULE (vízszintes elválasztó vonal)
No comment. :)
LAYER (réteg)
Egy réteget helyezhetsz el az oldalban. A réteg bármit tartalmazhat, szöveget képet, egyéb más objektumokat, és nagy előnye, hogy bárhova rakhatod az oldalon, csak meg kell fogni az egérrel és a kívánt helyre húzni. Csak a 4-es és a későbbi böngészők ismerik!
E-MAIL LINK
Ehhez sem kell bővebb magyarázat, remélem.
FLASH (Flash animáció)
Egy Flash animációt lehet beszúrni az oldalba.
JAVA APPLET
Java nyelven írt appleteket szúrhatsz be a dokumentumba. A doksi letöltésekor ez az applet is letöltődik az olvasó gépére majd a böngésző Java motorja lefuttatja az appletet.
PLUG-IN
Egy olyan plugint helyezhetsz el az oldalban, amelyre pl. egy animáció lejátszásához szükség lehet.
ROLLOVER IMAGE
Ez az a klasszikus effektus, hogy amikor az egeret egy kép fölé viszed, akkor a az eredeti kép helyére egy másik kerül arra az időre, amíg az egérkurzor a kép fölött van.
TABULAR DATA
Tabulátorral határolt szöveg, pompás táblázat lesz belőle... Tegyük fel, hogy egy Excel táblázatot akarsz áttenni HTML-be. Excel-ben elmentheted ugyan HTML formátumban, de az olyan lesz mint a.... Szóval lehet hogy bele kell javítanod kézzel. Viszont ha a táblázatot tabulátorral határolt szövegként mented, akkor egy olyan .TXT állományt kapsz, ahol az egyes adatok tabulátorjellel vannak elválasztva egymástól. A tabulátor jeleket felhasználva, a Dreamweaver meg tudja csinálni a táblázatot, mégpedig hibátlanul.
NAVIGATION BAR
A rolloverhez hasonló, de itt több kép van egymás mellett egy táblázatban.
LINE BREAK
Sortörés beszúrása.
DATE
Dátum beszúrása.
SHOCKWAVE
Shockwave animáció beszúrása.
FIREWORKS HTML
FIREWORKS-el készített kép vagy HTML dokumentum beszúrása.
ACTIVE-X
ActiveX objektum beszúrása.
SERVER SIDE INCLUDE
Szerver oldali beillesztés. Ha kiszolgáló támogatja, akkor a HTML dokumentum közös részeit (pl. egy táblázat) egy külső fájlban lehet tárolni és hivtkozni erre a fájlra egy HTML dokumentumban.
CHARACTERS (karakterek):
A CHARACTERS PALETTA KÉPE, ITT >>>
Még mindig az OBJECTS palettánál tartunk. Ha a legördülő menüjéből a CHARACTERS-t választod, akkor speciális karaktereket szúrhatsz be a dokumentumod szövegébe.
Ezek a speciális karakterek a következőek:
©, ®, ™, £,¥ , —, “, ”
FORMS
Ha váltasz a FORMS-ra az OBJECTS palettán, akkor űrlapot, és a következő űrlapelemeket szúrhatod be a dokumentumodba:
A FORMS PALETTA KÉPE, ITT >>>
FORM
Ezzel egy űrlapot helyezel el az oldaladban. A Dreamweaver egy piros szaggatott vonallal fogja jelölni az űrlapot. Ezen a területen belül kell elhelyezned a szükséges űrlapelemeket. Bővebbet az űrlapokról szóló fejezetben találsz.
TEXT FIELD
Egy egyszerű szövegmező beszúrása.
BUTTON
Nyomógomb beszúrása.
CHECKBOX
Jelölőnégyzet beszúrása.
RADIO BUTTON
Rádiógomb beszúrása.
LIST/MENU
Legördülő menü beszúrása.
FILE FIELD
Fájl feltöltésére szolgáló mező beszúrása.
HIDDEN FIELD
Rejtett mező beszúrása.
JUMP MENU
Hasonló a LIST/MENU elemhez, de ennek a listájában általában URL-el vannak.
FRAMES
Nyolc féleképpen oszthatod keretekre az oldaladat. Bővebbet a frame-ekről szóló fejezetben olvashatsz.
A FRAMES PALETTA KÉPE, ITT >>>
HEAD
A HEAD paletta segítségével a HTML dokumentum fejlécében található információkat illesztheted be, illetve szerkesztheted.
A HEAD PALETTA KÉPE, ITT >>>
META
Ennél az elemnél adhatsz meg minden olyan kiegészítő információt, amelyet más elemeknél nem tehetsz meg.
KEYWORDS
A HTML dokumentum kulcsszavait adhatod meg itt. Ha regisztrálod az oldaladat egy keresőbe, akkor az itt megadott kulcsszavak alapján kerül bele (vagy nem kerül bele) a találati listába az oldalad címe.
DESCRIPTION
Itt adhatod meg az oldalad rövid szöveges leírását.
REFRESH
Beállíthatod, hogy az oldalad bizonyos idő elteltével automatikusan frissüljön. Másodpercekben kell megadni, tehát ha a REFRESH értéke 120, akkor az oldalad kétpercenként automatikusan frissül a böngészőben. Az ACTION-nél két dolgot állíthatsz: vagy az oldalt frissíted, vagy ugrasz egy URL-re.
BASE
Egy dokumentum eredeti helyét jelzi. Akkor lehet hasznos, ha a dokumentum el lett mozgatva a könyvtárstruktúrán belül, és így a rá mutató hivatkozás érvénytelen lenne.
LINK
A dokumentum és más dokumentumok közötti kapcsolódást jelöl. Tipikus alkalmazása dokumentumok, stílusleíró állományok stb. kapcsolása a dokumentumhoz.
INVISIBLES
Ennek a palettának a használatával az alábbi elemek szúrhatóak be a dokumentumba:
AZ INVISIBLES PALETTA KÉPE, ITT >>>
COMMENT
Kommentet szúrhatsz be az oldaladba. A kommentként beírt szöveget a böngésző nem írja ki.
SCRIPT
Scriptet szúrhatsz be az oldalba.
NON-BREAKING SPACE
Nem törhető szóköz beszúrása.
Ezzel az OBJECTS palettákat ki is végeztük. Nézzük a továbbiakat.
A LAUNCHER paletta
A LAUNCHER PALETTA KÉPE, ITT >>>
A LAUNCHER palettával további palettákat tehetsz ki a képernyőre.
Nézzük, melyek ezek a paletták:
SITE
Az oldalak menedzseléséhez használt eszközöket találod itt.
LIBRARY
Ez egy nagyon hasznos eszköz! Tegyük fel, hogy vannak az oldalaidnak olyan ismétlődő elemei, amelyekre többször is szükség lehet. A kijelölt elemet át lehet húzni a LIBRARY-ba, majd onnan egy másik HTML oldalba bármikor beilleszteni.
HTML STYLES
Itt találod a HTML stílusokat. Bővebbet a Stílusok fejezetben olvashatsz a stílusok készítéséről és alkalmazásáról.
CSS STYLES
Itt a már meglévő CSS stílusaidat láthatod. Bővebb a Stílusok fejezetben.
BEHAVIORS
Ezzel az eszköztárral készíthesz kis JavaScripteket. Külön fejezetben tárgyalom majd ennek a lehetőségeit.
HISTORY
Ez is roppant hasznos! A HISTORY-ban látod az összes műveletet, amelyet a dokumentumodon végrehajtottál. Vissza is lehet vonni őket, természetesen. A baloldalon lévő csúszkát felfelé tolva visszavonja szépen a műveleteket. Ha a HISTORY palettán állva a jobb oldali egérgombbal kattintasz, akkor a feltáruló helyi menü parancsaival megismételheted, másolhatod, sőt, el is mentheted az egyes műveleteket.
HTML SOURCE
A HTML doksid forrását szemlélheted meg vele. Nagyon hasznos eszköz, a dokumentumon végrehajtott műveletek azonnal megjelennek a forrásban, a forráson végzett változtatások rögtön meglátszanak a dokumentumon is. Szerintem mindenféle külső HTML szerkesztőt feleslegessé tesz.
---
Feltöltés és karbantartás
A Dreamweaverben az oldalak kezelésével kapcsolatos funkciók a SITE menüben kaptak helyet. A szerkesztési munka megkezdése előtt célszerű definiálni egy könyvtárat, amely Internetes publikálásra szánt anyagaink gyökérkönyvtára lesz. Természetesen ezen a könyvtáron belül létre lehet hozni az anyagok megfelelő csoportosításához szükséges alkönyvtárakat is. A DEFINE SITES parancs kiadásával kezdjük.
A beállítandó jellemzők:
LOCAL INFO - meg kell adnunk az előbb említett lokális gyökérkönyvtárat, valamint azt az URL-t is ahová majd fel kívánjuk a dokumentumokat tölteni.
WEB SERVER INFO - ki kell választani, hogy dokumentumainkat hogyan töltjük majd fel. A SERVER ACCESS feliratú legördülő menüből választhatunk FTP-t, illetve helyi hálózatot is. FTP használat esetében meg kell adni annak a szervernek a nevét, amelyhez kapcsolódni kívánunk, valamint annak a könyvtárnak a nevét, amelybe oldalunk anyagait helyezzük majd el, végül pedig a hozzáféréshez szükséges felhasználói nevet, és jelszót kell beírni. Lokális vagy helyi hálózatra történő elhelyezés esetén csupán a megfelelő könyvtárat kell kiválasztani.
A definiálás után nekiláthatunk a publikálásnak.
Ehhez a SITE..OPEN SITE..oldal_név parancsot kell kiadnunk. Rögtön láthatóvá válik oldalunk szerkezete, láthatjuk az egyes dokumentumokat, és a közöttük fennálló kapcsolatokat. A jobb oldali ablakban látható oldalunk könyvtárszerkezete. A feltölteni kívánt dokumentumot, vagy könyvtárt ki kell választani, majd a PUT gombra való kattintással a feltöltés elindítható. Ha csak egy HTML dokumentumot töltünk fel, akkor a program meg fogja kérdezni, hogy az adott dokumentumhoz tartozó fájlokat is feltöltse-e. Érdemes élni ezzel a lehetőséggel, mert akkor nagy valószínűséggel semmi sem fog kimaradni a feltöltésből. Ha a jobb oldali ablakban valamelyik könyvtárat választjuk ki, akkor a könyvtár és teljes tartalma fel fog töltődni. Ha valamelyik állományt le akarjuk másolni a webszerverről a saját gépünkre, akkor azt az állomány kiválasztása után a GET gombra történő kattintással tehetjük meg. A REFRESH funkció használatával mindig az aktuális állapotot láthatjuk, így meggyőződhetünk arról, hogy minden állomány rendben felkerült-e a szerverre.
---
Frame-ek
A keretek segítségével a böngésző ablakát több részre lehet osztani, és mindegyik keretbe más-más dokumentumot lehet betölteni. Keretekkel nagyon látványos (és esetleg nagyon rossz) oldalakat lehet létrehozni, sok kereteket használó oldal található az Interneten.
Az oldal keretekre osztása A művelet végrehajtásához az INSERT..FRAMES parancsot kell kiadni, vagy a FRAMES palettán a kívánt felosztásra kell kattintani .
Többféle felosztás közül lehet választani:
LEFT: A baloldalon egy kisebb, a jobb oldalon egy nagyobb méretű keretet kapunk.
RIGHT: A jobb oldalra kerül a kisebb méretű keret.
TOP: Felülre kerül a kisebb méretű keret.
BOTTOM: Alulra kerül a kisebb méretű keret.
LEFT AND TOP: Ez a jobb és felső felosztás kombinációja, eredménye négy keret.
LEFT TOP: Eredménye három keret, a bal oldali keret magasságát tekintve a képernyő teljes magasságát elfoglalja, a jobb oldali keret pedig további két részre lesz osztva.
TOP LEFT: Ennek a felosztásnak is három keret az eredménye.
SPLIT: A böngésző képernyője négy egyenlő keretre lesz felosztva.
A keretek további jellemzőit a SELECTION PROPERTIES palettával , valamit a WINDOW..FRAMES parancs kiadásával lehet beállítani. A WINDOW..FRAMES parancs hatására kapsz még egy palettát. Ezen a palettán is lehet látni a képernyő aktuális felosztását. A kiválasztott keretre kattintva a SELECTION PROPERTIES palettán máris feltűnnek a keret jellemzői .
A következő jellemzőket lehet beállítani:
FRAME NAME: Az aktuális keret nevét lehet megadni ebben a mezőben. Mindegyik keretnek célszerű egyedi nevet adni.
SRC: Annak a dokumentumnak az URL-je amelyik majd ebbe a keretbe fog betöltődni.
SCROLL: Megadható, hogy a keretben lévő dokumentum görgethető legyen-e.
NO RESIZE: Ha ez a jelölőnégyzet be van jelölve, akkor a keret nem lesz átméretezhető.
BORDERS: A felosztást szegélyező keret. Ha láthatóvá akarod tenni, akkor a Yes értéket kell beállítani. Ebben az esetben a kívánt színt is be lehet állítani.
A felosztás művelete után meg kell határozni, hogy adott keretbe mely HTML dokumentumnak kell betöltődnie. A keretekre osztott oldal letöltődés után ezeket a dokumentumokat fogja tartalmazni. Fontos, hogy ha valamelyik keretbe egy hivatkozással másik dokumentumot akarunk betölteni, akkor a TARGET paraméter segítségével meg kell határozni, hogy a dokumentum melyik keretbe töltődjön be. A TARGET paraméternek a keret nevét kell tartalmaznia.
---
Hivatkozások, linkek
Az oldalak összekapcsolását könnyedén elvégezheted a Dreamweaver-ben. A kijelölt szövegrészhez úgy lehet hivatkozást kapcsolni, hogy a SELECTION PROPERTIES palettán a LINK mezőbe beíod annak a dokumentumnak, vagy valamilyen objektumnak az URL-jét, amelyre hivatkozni akarsz. Ha a hivatkozott állomány egy helyi fájl, akkor a mező melletti ikonra kattintva kiválasztható. Ha olyan hivatkozást kell készíteni, amely egy e-mail címre mutat, akkor az INSERT..E-MAIL LINK parancsot kell kiadni. Egy párbeszédablakban meg kell adni a hivatkozás szövegét, valamint azt az e-mail címet, amelyre a hivatkozásnak mutatnia kell. Ha egy képhez akarsz több hivatkozást rendelni, akkor a lehetőségeid kibővülnek az image-map-el.
Image map készítése:
A kép kijelölése után a SELECTION PROPERTIES palettán bal alsó részben találhatóak az image map készítéséhez szükséges eszközök. A MAP mezőbe be kell írni az image map nevét. Utána ki kell jelölni a képnek azt a területét, amelyhez hivatkozást szeretnéd rendelni. A kiválasztott terület négyzet, kör, vagy sokszög alakú lehet. A alakzatnak megfelelően kiválasztod a kijelölő eszközt, majd a képen kijelölöd azt a területet, amelyhez a hivatkozást kapcsolod. A kiválasztás után a LINK mezőbe beírod (kiválasztod) a kívánt URL-t. Ezzel kész is a hivatkozás. A kiválasztott terület mérete később is változtatható, ha szükséges.
---
Karakterek és bekezdések formázása
Az oldalba illesztett szöveg formázását el lehet végezni a TEXT menü parancsainak használatával.
INDENT, OUTDENT : Ezeknek a menüpontoknak a használatával lehet a szöveg behúzását növelni, vagy csökkenteni.
FORMAT: Ebben a menüben találhatóak a bekezdésformázást elvégző parancsok.
PARAGRAPH - egyszerű bekezdés
HEADING1-6 - címsorok
PREFORMATTED TEXT - előre formázott szöveg
LIST: Ebben a menüben találhatóak a felsorolások
UNORDERED LIST - nem számozott lista
ORDERED LIST - számozott lista
DEFINITION LIST - definíciós lista
ALIGNMENT: A szöveg igazításának beállítása, balra, középre, jobbra.
FONT: A dokumentum szövegének betűtípusát állíthatjuk be. Érdekessége, hogy alaphelyzetben csak olyan betűtípusokat lehet kiválasztani, amelyek majdnem minden felhasználó gépén megtalálhatóak, de természetesen ezt a listát lehet bővíteni.
STÍLUSOK: A stílusok a dokumentumban elhelyezett szöveg formázásához nyújtanak hathatós segítséget.
STYLE: A HTML nyelv által biztosított szöveg- és karakterformátumok.
HTML STYLE: HTML karakter és bekezdésformátumokat lehet létrehozni, és egy szövegre alkalmazni.
CSS STYLE: A CSS stílusleíró nyelv segítségével szintén létre lehet hozni karakter- és bekezdésformátumokat. Mivel a CSS egy szabványosított, nyelv, ezért célszerű ezt használni, annál is inkább, mert a használata módfelett kényelmessé teszi a szövegformázást.
SIZE: A karakter méretét lehet beállítani.
SIZE INCREASE: Betűméret növelése
SIZE DECREASE: Betűméret csökkentése
COLOR: Szöveg színének beállítása
A karakterformázási műveletek gyorsabban elvégezhetőek, ha a lebegő paletta használatával hajtod végre azokat. A paletta a MODIFY..SELECTION PROPERTIES parancs kiadásával kapcsolható be vagy ki. Ezen a palettán mindig annak az objetumnak a jellemzőit lehet látni, amelyet az egérrel előzőleg kiválasztottál. Szöveg esetében a már korábban említett jellemzőket könnyedén be lehet állítani a paletta alkalmazásával
---
Stílusok
A stíluslapok nagy terhet képesek levenni az oldal készítőjének válláról. Egy jól megtervezett stíluslap segítségével sokkal gyorsabban meg lehet formázni a dokumentumban található szöveget. Ha a stílusok leírását egy külső állományban vannak tárolva, akkor több dokumentumban is lehet majd ugyanazokat a stílusokat használni. Így az oldalak megjelenése egységes lesz. Az sem elhanyagolandó szempont, hogy sokkal több formázási lehetőségünk nyílik, mint a HTML szövegformázó utasításaival. Stíluslapok készítésére ma leginkább a CSS nyelvet használják.
A Dreamweaver-el két fajta stílust lehet alkalmazni.
HTML stílusok:
A HTML stílus tulajdonképpen HTML utasítások csoportjából álló formázási utasítást jelent. Pár előre definiált stílust tartalmaz a program, de bármikor lehet készíteni újat.
HTML stílus készítése:
A TEXT..HTML STYLES..NEW STYLE parancs segítségével készíthetünk új HTML stílust. Az új stílusnak adni kell egy nevet, majd ki kell választani, hogy a stílust a későbbiekben egy kijelölt szövegrészre (selection), vagy pedig egy bekezdésre (paragraph) kívánod-e majd alkalmazni. Amennyiben szövegrészre kívánjuk alkalmazni, akkor csak a betűtípust, betűméretet, betűszínt, és a karakter stílusát(félkövér, dőlt stb.) lehet beállítani. Ha azt választottad, hogy bekezdésre fogod alkalmazni a stílust, akkor a bekezdés jellemzőinek beállítására is lehetőség nyílik, és beállíthatod a bekezdésformátumot, valamint a bekezdés igazítását. A kész stílus bekerül a HTML stílusok listájába , és bármikor alkalmazható a dokumentum szövegén.
CSS stílusok
A CSS egy szabványos leíró nyelv, melynek segítségével szintén létrehozhatóak előre definiált karakter és bekezdésformátumok.
CSS stílus készítése:
Új stílus készítéséhez a TEXT..CSS STYLES..EDIT STYLE SHEET parancsot kell kiadni. Kapunk egy párbeszédablakot, amelyben láthatóak a már létező stílusok. Ha külső fájlból szeretnénk stílusdefiníciókat importálni, akkor a LINK gombra kell kattintani. Új stílus létrehozásához a NEW gombra kell kattintani. Adni kell egy nevet a stílusnak. Utána tudjuk meghatározni a stílusdefiníciókat.
A stílusjellemzők kategóriákba vannak csoportosítva:
TYPE: A karakterformázással kapcsolatos jellemzőket lehet beállítani.
FONT: A kívánt betűtípus
SIZE: A kívánt betűméret. Fontos tudni, hogy több mértékegység szerint is meghatározható a betűk mérete. A választható mértékegységek: pont, pixel, inch, cm, mm, pica, ems, exs. Érdemes lehet a pixelt választani a betűk méretezéséhez, mert akkor a böngészők nem tudják majd megnövelni a betűk méretét a megjelenítéskor, hiába adja ki a felhasználó a betűméret növelésére szolgáló parancsot. Ezzel (és gondos tervezéssel) elkerülhető az oldal esetleges széttördelődése. Azonban mindenféleképpen olyan betűméretet kell választani a szöveghez, hogy azok az emberek is el tudják olvasni a szöveget, akiknek rosszabb a szemük. Tehát meg kell találni azt a méretet ami nem túl nagy és nem is kicsi. Ez körülbelül a 13-17 pixeles tartományt jelenti a betűméret esetében.
STYLE: A szokásos betűstílusok találhatóak itt. Választható a normal az italic és az obligue stílus. Az obligue az italic-hoz hasonlóan a szöveg döntött megjelenését eredményezi. Első látásra hiányozhat a bold stílus. Ezt a stílust a Weight paraméterrel lehet beállítani. A legördülő menüből számtalan félkövér stílus közül lehet választani.
LINE HEIGHT: A szöveg sortávolságát lehet beállítani ezzel a paraméterrel.
DECORATION: Ha további karakterstílusokat is be szeretnénk állítani, akkor lehet választani még aláhúzott szöveget (underline), villogó szöveget (blink), felül áthúzott szöveget (overline) és középen áthúzott (line-through) is.
CASE: Itt beállítható, hogy nagybetűs (uppercase), kisbetűs (lowercase) szöveget akarunk-e.
COLOR: Végül a szöveg színét választhatjuk ki egy színskálából.
Jól látható, hogy a CSS stílusok használatakor nem kell beérned a HTML nyelv nyújtotta karakterformázási lehetőségekkel. Egy CSS nyelven írt stíluslap segítségével sokkal jobban formázhatóak a dokumentumban található szövegek. Természetesen nem kötelező az összes felsorolt jellemző beállítása, csak azokat kell beállítani, amelyekre szükség van.
Hátterek (Background)
Egy HTML dokumentumnak lehet háttere. A CSS nyelv segítségével a beírt szövegnek is lehet saját hátteret adni, amely háttér az oldal hátterétől független. A szövegháttér csak azt a részét tölti ki a dokumentumnak, ahol szöveg található.
BACKGROUND COLOR: Ha megelégszünk egy háttérszínnel, akkor itt lehet kiválasztani.
BACKGROUND IMAGE: Ebben a mezőben meg kell adni a kép elérési útját.
REPEAT: A háttérkép ismétlődésének beállítása. repeat-y - csak függőleges ismétlés repeat-x - vízszintes ismétlés repeat - vízszintes és függőleges ismétlés no repeat - de ki is lehet kapcsolni az ismétlést .
HORIZONTAL POSITION: A háttérkép vízszintes igazításának beállítása.
VERTICAL POSITION: A háttérkép függőleges igazításának beállítása.
Bekezdésformázás (Block)
A bekezdés formátumára vonatkozó jellemzőket lehet itt beállítani.
WORD SPACING: A szavak közötti távolság.
LETTER SPACING: A betű közötti távolság
VERTICAL ALIGNMENT: A bekezdés függőleges igazítása
TEXT ALIGN: A szöveg igazítása. Itt már ki lehet választani a sorkizárt igazítást is, nem csak balra, középre, vagy jobbra lehet igazítani a szöveget.
TEXT INDENT: A szöveg behúzásának mértéke.
WHITESPACE: A szövegben található szóközökre vonatkozik ez a beállítás. Meghatározhatod, hogy a szóközök mentén a böngésző alkalmazhasson-e automatikus sortörést vagy sem. Normál esetben a böngésző automatikusan új sorba írja azt a szöveget, amely már nem fér egy sorba. Ebben az esetben a sor hosszúsága a böngésző ablakának méretétől függ. Ha a NOWRAP beállítás választjuk, akkor a szöveg egy sorba kerül egészen addig, amíg egy <BR> elemmel le nem zárod a sort.
Keretek: (Border)
Keretet vonhatsz egy tetszőleges elem köré. Ez lehet sima szöveg, kép, táblázat stb.
WIDTH: A keret vonalainak vastagságát lehet beállítani. Az értéket külön-külön állíthatjuk a keret felső, alsó, bal -és jobb oldali vonalára vonatkozóan.
COLOR: A keretet alkotó vonalak színének beállítása: Az egyes vonalaknak akár eltérő színük is lehet.
STYLE: A keret vonalának a stílusát határozhatjuk meg.
A stílusdefiníciók meghatározása után már csak alkalmazni kell az új stílust a kiszemelt szövegrészre, objektumra. A kész stílust bármikor lehet módosítani. Figyelni kell arra, hogy a *-al jelölt paraméterek hatását a Dreamweaver szerkesztőablakában nem láthatjuk, csak a böngészőben! A szövegek formázására használt stílusokat célszerű két lépcsőben létrehozni. Először csak azokat a stílusokat készítjük el, amelyek a karakterformázással kapcsolatos jellemzőket tárolják, itt bekezdésekre vonatkozó jellemzőket nem állítunk be. A karakterstílusok után készítjük el a bekezdések formátumára vonatkozó stílusokat. az így létrejött stílusokat kombinálhatjuk stílusainkat a szövegformázás során. Természetesen olyan stílust is lehet készíteni, amelyben a karakterek jellemzői mellett a bekezdés igazítására vonatkozó információkat is definiálunk. Ebben az esetben azonban gondjaink akadhatnak a szöveg igazításával, ha az eredeti igazítást felül akarjuk bírálni egy utasítással.
A CSS Styles palettán láthatjuk a rendelkezésre álló stílusokat.
Az APPLY TO legördülő menü segítségével alkalmazhatjuk őket a dokumentum valamely részére. Ebben a legördülő menüben mindig azokat a HTML elemeket látjuk, amelyek a dokumentum azon a részén vannak, ahol a kurzor éppen áll. Tehát ha éppen egy táblázat egyik cellájában villog a kurzor, akkor a <BODY>, <TABLE>, <TR>, <TD> elemek találhatóak az APPLY TO menüben, és ezen elemek valamelyikére alkalmazhatjuk valamelyik stílusunkat. Ezért, ha valamelyik karakterstílusunkat alkalmazzuk a <TD> elemre, akkor a kérdéses cellában található (vagy később beírt) szöveg, az alkalmazott stílussal fog megjelenni.
Tegyük fel, hogy egy bekezdésre több stílust is akarunk alkalmazni. Van egy bekezdésre vonatkozó stílusunk, és van egy karakterre vonatkozó. Az APPLY TO menüben most a <BODY>, a <P> elem látható, valamint egy SELECTION menüpont. A SELECTION segítségével egy kijelölt szövegrészre alkalmazhatunk valamilyen stílust. Először a <P> elemhez hozzárendeljük bekezdés formátumát tartalmazó stílust, majd kijelöljük a szöveget, és a SELECTION-höz pedig a karakter formátumot tartalmazó stílust.
A HTML forrás ablakát megnyitva a dokumentum forrásában a következőt látjuk:
<P class="bekezdes"><SPAN class="karakter">BEKEZDÉS SZÖVEGE</SPAN></P>
Ezzel kész is a bekezdés formázása. Ha HTML utasításokkal oldottuk volna meg a formázást, akkor egy lényegesen hosszabb utasítást kaptunk volna.
---
Táblázatok
A Dreamweaver táblázatkezelése többnyire barátságos, a táblázatok könnyen kezelhetőek.
Táblázat beszúrása:
Az INSERT..TABLE parancs kiadásával, vagy az OBJECTS paletta megfelelő gombjára kattintással lehet a dokumentumba táblázatot illeszteni. Meg kell adni az oszlopszámot, a sorszámot, a táblázat méretét %-ban vagy pixelben, valamint a cella térközt és a cellák közötti távolságot. Természetesen a táblázat összes jellemzője módosítható a későbbiekben. A szükséges formázási művelek elvégzéséhez célszerű a palettát használni. Ha a frissen beillesztett táblázat ki a van jelölve, akkor a SELECTION PROPERTIES palettán a táblázat jellemzői lesznek láthatóak.
A paletta segítségével elvégezhető formázási műveletek:
Táblázat szélességének és magasságának beállítása:
A W (width) és a H (height) mezőkbe kell csupán beírni a kívánt méretet. A mezők mellett található legördülő menük segítségével ki lehet választani, hogy százalékban vagy pixelben legyen a méret beállítva.
Sorok, oszlopok beszúrása:
A ROWS és a COLUMNS mezőkbe kell beírni a kíván sor, illetve oszlopszámokat. A későbbiekben bármikor módosítható a sorok illetve az oszlopok száma.
Táblázat méretének beállítása:
Két módon állíthatóak a táblázat méretei. A táblázat határoló vonalainak egérrel történő mozgatásával. Ez a módszer a táblázat méretének gyors beállítására szolgál. Ha fontos, hogy adott méretű legyen a táblázat, akkor célszerű a magasság és a szélesség értékeit pontosan megadni.
A W (width) és a H (height) mezőkbe írt értékekkel is be lehet állítani a táblázat vízszintes és függőleges méretét. A méreteket százalékosan, vagy pixelben lehet megadni. A paletta bal oldalán található gombok segítségével a százalékos érték bármikor pixeles értékre konvertálható, és fordítva.
Az alatta lévő két gomb segítségével lehet törölni a táblázat vízszintes és függőleges méretének értékét.
Táblázat igazítása:
Az ALIGN legördülő menüből lehet kiválasztani, hogy balra, középre, vagy jobbra legyen-e igazítva a táblázat.
A táblázat hátterének beállítható valamilyen háttérszín, vagy háttérkép. Háttérszínt a BG mezőbe írt hexadecimális számmal lehet megadni, vagy pedig egy színskálából kiválasztani. Ha van valamilyen kedvenc színünk a HTML nyelv által előre definiált színek között, akkor azt is meg lehet adni. Hasonló módon lehet beállítani a táblázat keretének színét is, de ez csak akkor fog a képernyőn megjelenni, ha a keret (Border) értéke nem nulla. Újdonság a korábbi szerkesztőprogramokhoz képest, hogy meg lehet adni még egy világos, és egy sötét keretszínt is. Gyakorlati haszna meglehetősen csekély, mert csak az Internet Explorer támogatja ezt a két paramétert.
Az imént felsorolt jellemzők módosítása lehetséges a paletta segítségével. Azonban itt nem merül ki a Dreamweaver tudása a táblázatkezelés terén. A további műveleteket a MODIFY..TABLE menüben, vagy a táblázaton történő jobb gombos kattintás után megnyíló helyi menüben lehet megtalálni.
SPLIT CELL: Ezzel a paranccsal lehet egy cellát több cellára felosztani.
MERGE CELLS: A parancs a kijelölt cellákat egyesíti.
INSERT ROW: Új sor beszúrása
INSERT COLUMN: Új oszlop beszúrása
DELETE ROW, DELETE COLUMN: Sor illetve oszlop törlése a táblázatból.
INCREASE/DECREASE ROW SPAN: Ez a parancs szintén cellaösszevonásra használható, kiadása után az aktuális cella összevonásra kerül az alatta lévő cellával.
INCREASE/DECREASE COLUMN SPAN: Ez a parancs szintén cellaösszevonásra használható, kiadása után az aktuális cella összevonásra kerül az mellette lévő cellával.
---
Űrlapok
A Dreamweaver segítségével könnyedén lehet űrlapokat készíteni. Egy új űrlapot az INSERT..FORM parancs kiadásával, vagy a FORMS paletta megfelelő gombjára kattintással lehet elhelyezni a dokumentumban. A beszúrási művelet elvégzése után egy piros szaggatott vonallal határolt területet látunk a dokumentumban. Erre a területre kell elhelyezni majd az űrlapelemeket.
A SELECTION PROPERTIES palettán máris láthatóvá válnak az űrlap jellemzői.
FORM NAME: Az űrlap nevét kell megadni ebben a mezőben.
ACTION: Ebbe a mezőbe az űrlap által küldött adatokat feldolgozó program nevét kell megadni.
METHOD: Az adatok küldésének módját lehet itt beállítani. Két küldési mód közül lehet választani, ezek a POST és a GET metódusok. A GET metódus a küldött adatokat az URL-ben helyezi el, a POST metódus pedig a program standard bemenetére küldi azokat.
Az űrlap létrehozása után lehet a szükséges űrlapelemeket elhelyezni, az INSERT..FORM OBJECT parancs kiadásával.
Remélem segítettem azoknak akik komolyabban érdeklődnek a program iránt!
Nincsenek megjegyzések:
Megjegyzés küldése