Adobe - Dreamweaver - CS4 - Tanfolyam - A - Kkonyvben - (OCR)

Dw
- -
Adobe Dreamweaver CS4 Tanfolyam a knyvben 2010 Perfact-Pro Kft. Minden jog fenntartva!
ISBN 978-963-9929-10-4 A knyv eredeti cme: Adobe Dreamweaver CS4 Classroom in a Book A magyar kiadsrt felels a Perfact-Pro Kft. Authorized translation from the English Language edition, entitled Adobe Dreamweaver CS4 Classroom in a Book, l st Edition 032157382X, by ADOBE CREATlVE TEAM, published by Pearson Education, Inc. publishing as Adobe Press, Copyright 2009 Adobe Press. Ali rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, includig photocopying, recording or by any information storage retrieval system, w. thout permission from Pe ars on Education, Inc. HUNGARIAN language edition i published by Perfact-Pro Kft. , Copyright 2010 Perfact-Pro Kft. Adobe, the Adobe logo, Classroom in a Book, Dreamweaver, Fireworks, Flash, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States andi or other countries. Apple, Mac, and Macintosh are trademarks of Apple, registered in the U.S. and other countries. Microsoft,Windows, and Windows NT are trademarks of Microsoft Corporation registered in the U .S. andlor other countries. Ali other trademarks are the property of their respective owners . . Brmilyen msols, sokszorosts, illetve adatfeldolgoz rendszerben trtn trols a kiad elze tes rsbeli hozzjrulsa nlkl tilos. Az itt kzlt informcik kizrlag az olvas szemlyes hasznlatra kszltek. Jelen m felhasznlsa ms knyvekben, kereskedelmi szoftverekben, adatbzisokbap. csak a kiad elzetes rsbeli hozzjrulsval lehetsges. A szerz s a kiad a tle elvrhat legnagyobb gondossggal jrt el a knyv s a programok ksztse sorn. A knyvben illetve a programokban tallhat esetleges hibkrt, a hasznlatukbl ered esetleges krokrt sem a szerz , sem a kiad nem vllal semminem felelssget. Fordtotta: Pataky Zsfia Szakmailag lektorlta: Magcsi Mrton Nyelvileg lektorlta: Ksa Gyrgy Trdelte: Fontol Stdi
Felels
kiad a Perfact-Pro Kft. gyvezet igazgatja 1101 Budapest, Pongrc t 9/b. Tel: 260-0990 Fax: 431-0028 info@perfact.bu www.perfactkiado.hu
Tartalom
Elinduls ., ............ . . . ............................................ 1 Mit Tudunk Letlteni? ..... .. ... .. . .......... .. ......................... 2 Leckefjlok. .. s mg sok minden ms ................ . .......... .. .......... 2 A kiad megjegyzse ......... . ... .. . . . . .... . ............. ....... .. ... . . . 2 Lessons map pa .................. .... ........................ . . . ....... 2 Adobe Press mappa* .. .. .... ......... .... .......... .... ... .. .... . .. ..... 2 Community Help mappa* .. .... .. .... .. .... . ..... ......... ' " . ... ..... ... 2 CS4 Resource Center* ..... . .... ........ ............... . .. , . ... ........ . 3 Adobe TV mappa* .. ..... . ... .. ..... .. .. .. .... .. ..... . . .. . ..... .. , .... , 3 Adobe Cerrified mappa* .... ..... .. ...... .. .... .. .. , ............... . ..... 3 Elfelttelek ............... , . .. ........ ......... , . ... ....... ....... .. . 3 A program teleptse .. ................. . . ............................... 3 A leckefjlok letltse ............. . ............... . . ..... .. . , . . ......... 4 Alapbelltsok .. ... . .. ................ . .. . ......... .. .. , ..... . ...... , . 4 A munkafellet belltsa ......... . . ....... . . , ..... . ...... , ... . .. ..... . , . 4 "r 'bb" c ,. , "I lova J JnwrmaclO a D reamweaverro . . ........... ............ ....... . .. .. . 5 Frisstsek keresse . , .. , ................................ . ....... , . . ..... 5 Tovbbi forrsok ........... . . ... ...... .... .... . ................ . ....... 6 Tovbbi hasznos linkek ............................. . ..... . . .. . . ...... . .. 6 Kedves Olvas! ..... .. . ................................................ 6
1. LECKE
A Dreamweaver CS4 gyors ttekintse . ............... . ........... 7

A lecke ttekintse . ... . ... .. .. ..... . ... ...... . ............... .. . . ...... 8 Szjt definilsa Drearnweaverben ... ... ... ..... .. . . . , ..... . . .... ......... . 8 Az dvzlkperny kezelse ... . , . . ........... ... . ..... . . .. .. .. ... . ...... 9 CSS stluslap kivlasztsa ....... , ................................. , .... . 10 Az oldal elmentse .......... .. .......... . ... . ... . ............ .. ....... 11 A dokumenrumnzet kivlasztsa ...... . . . .. . ............................. II Az oldal cmnek mdostsa ................................. . .......... 12 Cmsorok mdostsa .. ... ... . ...... ... .... . ............. .... .......... 12 Szveg beillesztse . ..... . ..... , .. ... . ...................... , . . .. , ..... . 13 j kpek hozzadsa ..... , .. .... ..... ... ... ...... .. . . ... , . ....... .... .. 13 CSS stlusok kivlasztsa s mdostsa .. . ..................... . . . .. . ...... 16 Az oldal hrcrsznnek mdostsa .. .... . . .................... . . , .. .... . .. 16 Httrkp beillesztse a cmsorba . .... . ... . ... . ......... .. ........... , .... 17 .. '" 'ak' ,. ll' , Szoveg b erunpusan es szmene k bejtasa . . ............ . ... . ........... . .. . 19 Szvegmret mdostsa. , .. . ....... . . , . .... ...... ......... . ............ 20 A Code nzet, illetve a Code and Design nzet hasznlata .................... , .. 22 A vzszintesen vagy fgglegesen osztott nzetek hasznlata . .................... 23 A Properties panel hasznlata ................ ... ... . . . . . ....... , .......... 25 Oldal elnzete Live nzetben ..... . .................. , ... .... ... . ....... 28 Oldalak elnzete bngszben . .......................... . ............... 28 sszefoglal. , ....... , . ........ .. . ...... .... ... . . ........ .. . .. . . . .... 30
IV
Elinduls
2. LECKE
Stluslapok hasznlata . .............................. . ......... 31

A lecke ttekintse .... .. .......... .. .............. . .. ..... ......... . .. 32 A ksz dokumentum megtekintse ............ .. ........ . . ... . .......... " . 32 Kls stluslap trstsa az oldalhoz . . . .......... . . ... .. ................. . . 33 A szjtszerkezet s a leckefelpts eltrsei .................................. 34 j CSS-szablyok ltrehozsa ... .. ........ ... ....... . ........... ......... 34 Szrmaztatott (descendant) cmkk stlusnak meghatrozsa ..... .. .... . .... . ... 35 Egyedi osztlyok ltrehozsa ... . . . .... . . ... .. ... ......... . ..... .. .. .... . . 39 Stlusok alkalmazsa ............... . ... .. . . ... .... .... ..... ... . ...... .. 40 Egyedi osztlyok alkalmazsa oldalrszeken ........ .. ........................ 41 Kpek lebegtetse ...... .. ... ....... .. ... ... ...... .... ........... . .... . 44 Stluslapok ltrehozsa ms mdiadpusokhoz ...... ... .. .. ..... . .. ... .... . ... 47 A Style Rendering eszkzsv megjelentse ............................ . ...... 47 Meglv stluslap talaktsa nyomtatsra sznt stluslapp ... . ..... ... .. .. .... .. 48 Nemkvnatos oldalrszek elrejtse ........................ .. .... . . .. .. ... 49 A nyomtatsi sznhelyessg belltsa...... .. . .... . ................ .... ..... 50 Szksgtelen stlusok eltvoltsa ...................... . ................... 50 sszefoglal .. ............. ...... . .. .. .. . .. ...... . ................... 52
3. LECKE
Szvegek, listk s tblzatok kezelse .......................... 53

A lecke ttekintse ................................ . ... .. .......... .... 54 A ksz dokumentum megtekintse . ....... ...... .. . ....................... 54 Szvegek bevitele ..................................... . ........ . . ... . . 54 Cmsorok, listk s egybefgg szvegrszek ltrehozsa ....... ... .... .. . ....... 57 Cmsorok ltrehozsa .......................... . ............. ....... . . . 58 Szmowtt s POntowtt listk ltrehozsa .. . ............................. . .. 59 Egybefgg szvegrszek ltrehozsa . .... .. ..... . .. ..................... . .. 60 Tblzatok ltrehozsa .............................. .... ...... .. ..... ... 62 Tblzatok formzsa CSS stluslapokkal .. .... .. .. . . ...... .... ... . . . . ... ... 64 A dokumentum helyesrsi ellenrzse ..................................... 68 Spry eszkzlersok hasznlata ... . . .................................... .. . 69 Szvegek keresse s cserje .. ....... ..... . .. .. ....... .. .... .... . ....... . . 71 sszefoglal ..... . .... .. .. . .. . .. . '...... ....... ... ........ ...... ...... 73
4. LECKE
Tervezs kpekkel ............................................ 75

A lecke ttekintse ...... ..... .... ..... ......... ......... .. . ... . . .... .. 76 A ksz dokumentum megtekintse ..... .. ...... . ............... . .......... 76 Kp beillesztse .. ... . .. . ..... .. ..... ... . . .... . ...... . ........ . ........ 76 Helyrz kpek hasznlata ....... ... ..... .... .. ..... . ...... .. .. .. . ..... . 78 Httrkpek hasznlata . ........ ...... .... .. ...... .. ......... .... .... . .. 79 A Properties panel hasznlata kpek szerkesztshez .......... . ......... ...... .. 80 A Dreamweaver grafikai eszkzei ......................................... 82 Msols s beUleszts Photoshopbl ............ .... .. . . ... . ... .. ....... . .. 83 Az Adobe Bridge alkalmazs elrse .... ......... .. ........ . . . ............. 84 Photoshop Smart objektumok hasznlata ................................... 85 sszefoglal ................................................. . ..... .. 88
5. LECKE
Hivatkozsok ltrehozsa . .......... ... ....................... . 89

A lecke ttekintse ............... . .. . ...... . ... .. ... ... ... ... .. ...... . 90 A ksz dokumentum megtekintse ... . .. ..... ..... ..................... ... 90 Hivatkozs webhelyen belli oldalakra ..................... . ............... 90 Kls hivatkozs ltrehozsa ..................... .. ...................... 93 E-maiI hivatkozsok ltrehozsa . .... . .... . ..... ... . .... ..... . ...... .. .. .. 94
ADOBE DREAMWEAVER CS4 V
Tanfolyam a knyvben
Oldalon belli hivatkozsok ltrehozsa .................................... 95 Az Ajax s a Spry megismerse ........................................... 95 Spry mensvok beszrsa .............................................. 97 A Spry mensv megjelensnek testreszabsa . .... .. ... ... .. ...... .. . ...... .. 99 Spry fles panelek ltrehozsa .. ............ ......... .. . . ..... ........... 101 Az oldal ellenrzse . ......... ..... . ......... ...... ... . ....... . . . .... .. 104 sszefoglal .. .. .. ......... ..... . ...... .... ............... . .... .. ... 106
6. LECKE
Interaktv oldalak ltrehozsa . ................................. 107

A lecke ttekintse ........... ..... .... ......... .... ............ . .... . A Drearnweaver-viselkedsek (Behaviors) megismerse ........................ A ksz dokumentum megtekintse ...... . . ...... . .................. . ..... Spry-hatsok viselkedseinek alkalmazsa ....... ..... .... ..... ... . .... ... .. XML adatok hasznlata .. . ......... . ... . . . . ..... .... .. .. ......... . ... . XML adatok beptse Spry segtsgvel ................................... Spry adattpusok . .... ...... ............. ...... ....... . ....... ... .. ... Spry harmonikapanelek ltrehozsa . ... ..... . .. . .... ... .... . ...... ..... ... Spry harmonikapanel hozzadsa ................... . ...... . ............. Tovbbi panelek hozzadsa ............................................ ~pry harmonikapanelek testreszabsa ........ . ............................ Osszefoglal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 108 110 III 112 113 116 I 17 117 119 120 123 126 126 127 127 130 132 136 141 143 145 146 147 150 152 154 154 156 157 158 158 159 160 162 163 164 166 167 169
7. LECKE
Oldalszerkezetek ltrehozsa . ................................. 125

A lecke ttekintse .. ................... . . ... . ......... . . . ... ......... A ksz dokumentum megtekintse ....................................... <div> elemek ltrehozsa az oldalszerkezetet meghatroz stlusokkal ............. Az oldal ltrehozsa s a <body> cmke meghatrozsa ........................ Kls befoglal elem ltrehozsa ......................................... Fbb oldalterletek ltrehozsa ......... . . .... . .. ...... . ... . . ... . ..... . . . Tartalmi rszek hozzadsa az oldalhoz ... . . .... .. ...... .. ... ... . ...... . ... Helyrz elemek beszrsa . . .. ... ... ... ... ...... . . .... ... .... ... . . ..... A Code nzet megismerse ............................................ . . A Code Navigator funkcik hasznlata .................................... CSS stlusok exportlsa ............................................... Vonalzk s segd vonalak hasznlata ...................................... Az oldalszerkezet ellenrzse .. ............... . .... .... ...... ......... .. . sszefoglal .... . ......... ... .......... .. ...... .... ..... .......... ..
8. LECKE
rlapok ltrehozsa . ......................................... 153

A lecke ttekintse ................................................... A ksz dokumentum megtekintse ....................................... Ismerkeds az rlapokkal .... ...... .. ..... . ....... ...... ... . . . ........ . rlap ltrehozsa az oldalon ........................ . ................... Szveges tblzatelemek beszrsa ........................................ Hozzfrhet rlapok tulajdonsgainak belltsa . ...... . ...... . ... ..... . .... Szvegmezk hasznlata .................. '. .. ........ .. ...... ... . . . .... Spry szvegmezk beszrsa .. ...... ... ........ ... ........ . ... . . . .. ... .. Fieldset cmke ltrehozsa .............................................. Felhasznlnv- s jelswmezk ltrehozsa ................................. Jelszmezk beszrsa ................................................. Szvegterletek beptse . .. . . .. ... . ...... ..... . ... ... . . ............... Vlasztgombok ltrehozsa ............................................ Jellngyzetek beszrsa ............ .... . ..... .. ................. . .. ..
VI
Elinduls
Legrdl menk hasznlata .......................... . ................. 170 Elkldgomb (Sub mit button) ltrehozsa . . ............................... 172
rlap ok formzsa stlusokkal. .. . ........................ . ............ . . 173

\
CSS-szablyok alkalmazsa ............................................. 173 A SpryAssets map pa s a hivatkozott rlapmezk .. .... . . .................... 177 sszefoglal . ....... ........ . . ............. . ........ . ... . ...... ..... 178
9. LECKE
Flash elemek hasznlata . .... . .............................. . . 179

A lecke ttekintse ......... . ........... . .... . . ........ .. . ..... . .... .. A ksz dokumentum megtekintse ....................................... Flash animcik elhelyezse az oldalon .. .... . .. .. .. . ............ .. .. . . .. . . Flash elemek begyazsa ................................. . ............. Flash vide hozzadsa az oldalhoz . . ........ ... . ......................... sszefoglal ............................ . ......... ...... .... . ...... . 180 180 180 183 183 185
10. LECKE Hatkonysgnvels ......................................... 187

A lecke ttekintse .... .. . ........ . . . ................ . .. . ....... ..... . 188 A ksz dokumentum megtekintse ........ l . . . . . . . . . . . 188 Sablon ltrehozsa .............................. .. ... .. ...... . ........ 189 Szerkeszthet rgik beillesztse ... ..... .... ... ........ .. . .. ............. 190 A sablonok frisstse ... .. .................. . . . ...... . . ....... . ...... .. 191 Gyerekoldalak ltrehozsa .... . ... ...... ... ....... . .... ........ ... ..... 192 Ismtld elemek (Library) ........................ . .................... 194 Knyvtrelemek ltrehozsa . ... ..... .. .. .. ... . ... ... . .. . ..... . ......... 194 Knyvtrelem beillesztse .. . . . . . ...... ................. . . .......... . ... 196 sszekts kapcsold fjlokkal ......................................... 196 A men hozzadsa ............. .. . ... . ..... ......... ... .. ............ 199 Knyvtrelemek frisstse .. ... . . . ..... . .... . . . ..................... . ... 199 A szerveroldali begyazsok hasznlata ...... ... .. ... . . .... .. .... .... ..'.. ... 20 l Szerveroldali begyazsok ltrehozsa . . . ............................. . .... 20 l Szerveroldali begyazsok beillesztse . . ...... . ... . ..... ... .... .. . ...... .. . 203 Szerveroldal i begyazsok hozzadsa szj tok oldalaihoz . ............. ... .. .... 206 Szerveroldali begyazsok frisstse ........................... . .. . . .... . . . 206 sszefoglal .............. . .... .... ........ . ....... . . . . ...... . .. .... 208
11. LECKE Publikls a weben .......................... . ............... 209

A lecke ttekintse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 21 O Tvoli web hely meghatrozsa ...... ... ... ....... ... .. ................. . 210 Tvoli FTP szj t belltsa . . ....... .. ... ....... . . . ........ . ......... .... 211 Kapcsolat ltrehozsa helyi vagy hlzati kiszolglval ....... .... . ... .. ... . .... 213 Mappk s fjlok lczsa . . .. .. ...... . ..... ... .. . .... . ............ . . . .. 214 sszefoglal ....................................... . ................ 218
Trgymutat .................................................... . ..... 207
Elinduls
Az Adobe- Dreamweaver CS4 a piacvezet weboldalszerkeszt szoftver. Akr hivatsszeren, akr sajt vllalkozsunk rszre szeretnnk weboldalakat kszteni, a Dreamweaver biztostja a professzionlis vgeredmny elrshez szksges sszes eszkzt.
Tanfolyam a knyvben
Az Adobe Dreamweaver CS4 Tanfolyam a knyvben kiadvny az Adobe ltal ksztett grafikai s kiadvnyszerkeszt
szofrvertermkeket bemutat hivatalos oktatsorozat rsze.
Az egyes leckk gy plnek fel, hogy mindenki a sajt ritmusa szerint haladhat. Az Adobe Dreamweaver CS4 kezd felhasznli elsajtthatjk a program kezelshez szksges alapvet ismereteket, a tapasztaltabb felhasznlknak pedig szmos fejlen funkcit, kztk a szoftver legjabb vltozatnak hasznlatval kapcsolatos tippeket s mdszereket is bemutat a knyv.
Br a kiadvny lecki lpsrllpsre vgigvezetik az olvast egy adon feladat megvalstsn, lehetsget adnak a felfedezsre s ksrletezsre is. Sorban is vgighaladhatunk a knyv fejezetein, de elvgezhetjk csak az rdekldsnknek vagy szemlyes ignyeinknek megfelel leckket is. Minden lecke sszefoglal rsszel vgzdik, amely krdseket s vlaswkat tartalmaz a tanultak tismclsre.
2
Elinduls
Mit Tudunk Letlteni?

,
Leckefjlok ... s mg sok minden ms

.Az Adobe Dreamweaver CS4 Tanfolyam a knyvben
cm kiadvny gyakorlatainak elvgzshez
szksges leckefjlokat. ilIerve olyan tovbbi anyagokat tartalmaz. amelyek elsegtik az Adobe Dreamwear CS4 minl alaposabb elsajttst. s nagyobb hatkonysggal trtn hasznlatt.
Az albbiakban ezen anyagok tartaimt rszletezzk. hogy a kedves Olvas gyorsabban megtallja
a keresert tartalmat. A knyvhz rartoz leckefjlokat s mellkJeteit az albbi cmen tudja letlteni: http://www.perfactkiado.hu/mellekJetek
A kiad megjegyzse
A Peachpit Press semmilyen. sem kifejezett. sem vlelmezett garancit vagy ktelezettSget nem vllal a swftverre. annak minsgre. teljestmnyre. forgalomkpessgre vagy adott clra val megfelel sgre. Sem a Peachpit Press. sem viswnteladi s gynkei nem felelsek a szoftver hasznlatbl vagy hasznlhatadansgbl kzvetlenl vagy kzverve add' krokrt. A letlthet szoftver s mdiafjlok szerzi joga a szerzket s a Peachpit Presst illeti meg. n nem kizrlagos jogosultsgot kap ezen programok s fjlok hasznlatra. Egyszerre egyetlen szmtgpen hasznlhatja ezeket. Hlzaton keresztl nem oszthatja meg ezeket a fjlokat tbb szmtgp kztt. A fjlokat abban az esetben msolhatja t egyetlen merevlemezre. amennyiben bizonytani tudja. hogy rendelkezik a knyv tulajdonjogval. Nem fejtheti vissza s nem fordthatja vissza a szofrvert vagy a mdiafjlokat. A Peachpit Press rsbeli beleegyezse nlkl nem mdosthatja. s nem fordthatja le sem a szoftvert. sem a mdiafjlokat. illerve nem is terjeszthet i azokat.
2009 Peachpit Press. Minden jog fenntarrva .
Lessons mappa
A Lessons mappn bell minden lecknek sajt almappja van. Az egyes leckk megkezdse eltt msoljuk t ezeket a leckefjlokat merevlemeznkre.
Adobe Press mappa*

Az Adobe termkek teljes vlasztkt lefed Adobe Press kiadvnyokrl tallunk itt informcit.
Community Help mappa*

A Communiry Help (Kzssgi sg) integrlt online krnyezet. ahol tmutatst. sztnzst s tmogatst kaphatunk a termk hasznlathoz. Az egyedi keressi funkcival knnyedn megtal\juk a szmunkra leghasznosabb tartalmakat.
ADOBE DREAMWEAVER CS4 3 Tanfolyam a knyvben
CS4 Resource Center*

A mappban a Peachpit Press CS4 termkekkel foglalkoz kiadvnyai r I tallunk informcit.
Adobe TV mappa*
Kapcsoljuk be az Adobe TV How-To (Hogyan trtnik) csatornjt, ahol egyebek kztt tbb szz oktatvidet tallunk az Adobe C reative Suite 4 termkekr!.
Adobe Cerl:i"fied mappa*

Tjkoztatst rartalmaz, hogyan vlharunk Adobe Minstett Szakrtv.
*A kiadnak nincsen sem joga, sem lehetsge a mappk tartalmt, illetve az abban tallhat, hivatkozott angol nyelv internetes oldalakat lefordtani, igy ezeket angol nyelven tekinthetjk meg.
Elfelttelek
Az Adobe Dreamweaver CS4 Tanfolyam a knyvben leckinek elvgzshez rendelkeznnk kell azokkal
a gyakorlati ismeretekkel, amelyekkel rutinosan kezelni tudjuk szmtgpnket s annak opercis rendszert. Ismernnk kell tovbb az egr mkdst, az ltalnos menk s parancsok hasznlatt, valamint a fjlok megnyitsnak, elmentsnek s bezrsnak folyamatt is. Ha gy rezzk, hogy ismereteink frisstsre swrulnak e tekintetben, rdemes lehet fellapozni a Microsoft Windows vagy Apple Macintosh opercis rendszernkhz kapott dokumentcit.
Megjegyzs: Ahol a parancsok az egyes opercis rendszerekben eltrek, elszr a Windowsparancsok szerepelnek a lersban, majd a Macintosh-parancsok. Pldul: Ossk le az Alt (Windows), illetve az Opton (Macintosh) billentyt, majd kattintsunk a kpmezn kvli terletre!
A knyv elksztse sorn feltteleztk, hogy az Olvas rendelkezik internet hozzfrssel, gy a knyv hasznlathoz szksges leckefjlok s egyb mellkletek elrse, letltse nem okoz nehzsget.
A program teleptse
A knyv leckinek megkezdse eltt gyzdjnk meg rla, hogy a szmtgpes rendszernk megfelel a Dreamweaver hardverkvetelmnyeinek, vagyis, hogy megfelelen konfigurlt, s minden szksges swftver teleptve van rajta.
Az Adobe Dreamweaver CS4 alkalmazst a knyvtl fggetlenl kell megvsrolni. A teleptsre vonatkoz rszletes lers az Adobe Dreamweaver CS4 teleptiemez How to Install (Telepts menete) llomnyban tallhat meg.
4
Elinduls
A leckefjlok letltse
\
Az Adobe Dremweaver CS4 Tanfolyam a knyvben lecki meghatrown forrsfjlokat hasznlnak. A leckk teljestshez a http://www.perfactkiado.hu/mellekletek oldalrl tltsk le merevlemeznkre, s szksg esetn csomagoljuk ki az llomnyokat. l Hozzunk ltre szmtgpnk szmunkra megfelel terletn egy j mappt, s adjuk neki a DW CIB nevet. rdemes az sszes leckemappt a merevlemez ugyanazon knyvtrba helyezni. Ez a fknyvtr lesz a 2. leckben lert helyi szjt gykrknyvtra.
Ehhez kvessk az opercis rendszernknek megfelel eljrst: Windows: Jelljk ki az Intzben azt a mappt vagy meghajtt, amelyben ltre akarjuk hozni az j knyvtrat, majd vlasszuk ki a File > New> Folder (Fjl> j > Mappa) menpontot. Ezt kveten adjuk meg az j mappa nevt. Mac OS: Vlasszuk ki a Finderben a File > New Folder parancsot. Adjuk meg az j mappa nevt, s hzzuk oda, ahol hasznlni szeretnnk. Most mr a merevlemeznkre msolhatjuk a forrsfjlokat. 2 Tltsk le merevlemeznkre a http://www.perfactkiado.hulmellekletek oldalrl a Lessons mappt (amely a LessonO l, a Lesson02 stb. nev knyvtrakat tartalmazza) - ehhez hzzuk a mappt az j DW CIB knyvtrra. Msoljuk az aktulisan hasznlt lecknek a mappjt az jonnan ltrehown knyvtrba!
Ezeken fell az albbi ngy map pt kell mg tmsolnunk a merevlemeznkn lv DW CIB knyvtrba: SpryAssets, images, movie s Scripts. Ezekre a fjlokra szmos lecke sorn szksgnk lesz, ezrt a DW CIB knyvtrban kell lennik. Amikor elkezdjk az egyes leckket, menjnk a fejezet szmnak megfelel mappba, ahol az adon lecke feladatnak teljestshez szksges sszes forrsfjl megtalljuk.
Alapbelltsok
A knyv leckinek elvgzshez ellenrizzk, hogy az alapbelltsaink megfelelk-e! l 2 3 4 5 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Vlasszuk ki az Edit> Preferences (Szerkeszts> Belltsok) (Windows), illetve a Dreamweaver > Preferences (Macintosh) menpontot!
APreferences prbeszdablakban vltsu nk az Accessibility (Hozzfrhetsg) belltsokra!

Hagyjuk a Show attributes when inserting (Tulajdonsgok megjelentse beszrskor) vlasztpanelben mind a ngy jellngyzetet bekapcsolva! Kattintsunk az OK gombra!
A munkafellet belltsa
Az Adobe szmos munkafeIletet felknl, amelyek kztt a klnbz szmtgpes rendszerek s egyni ignyeink alapjn vltogathatunk. Ehhez a knyvhz a legjobb vlaszts a Classic, azaz a klaszszikus fellet hasznlata.
ADOBE DREAMWEAVER CS4 5 Tanfolyam a knyvben
Keressk meg az Adobe Drearnweaver CS4 alkalmazsban az Application Bar (Alkalmazssv) eszkzt! Amennyiben nem lthat, vlasszuk ki megjelentshez a Window> Application Bar menpontot!
,
j:
.. O" 'I"
DEi!ICI1EIi'''
I 'b
2 Az alaprtelmezett munkafellet a Designer (Tervez) nevet viseli. A kperny jobb fels rszben lv, legrdl men hasznlatval ms munkafelletek is vlaszthatk, pldul a Coder (Kdr), a Classic vagy a Design Compact (Tervezs kompakt). Egyes munkafelleteknl az Insert (Beszrs) men nagyobb panelben jelenik meg, msoknl kisebb, tmrebb formban. 3 A leckk vgrehajtshoz a Classic munkafelletet vlasszuk, mivel a knyv legtbb illusztrcija ezt a felletet brzolja, benne az Insert mensvval. Amint befejeztk a knyv leckit, kisrletezzk s vlasszuk ki a szmunkra legmegfelelbb belltst!
Az alkalmazssv elrejtshez vlasszuk ki ismt a Window> Application Bar menpontjt!
Tovbbi informci a
Dreamweaverrl
A Dreamweaver-panelekre, -eszkz kre s ms alkalmazsokra vonatkoz teljes, napraksz informcikrt az Adobe weboldalra ltogathatunk el. Vlasszuk ki a Help> Dreamweaver Help (Sg> Dreamweaver Sg) menpontot, amivel a Dreamweaver Community Help (Kzssgi Sg) weboldalra jutunk. Itt a Dreamweaver Sgban s az alkalmazs hasznlatt tmogat dokumentumok kztt bngszhetnk, tovbb ms, Dreamweaver-felhasznlk szmra fontos weboldalakhoz frnk hozz. Lehets gnk van az Adobe Sg s az alkalmazs hasznlatt tmogat tartalmak clwtt keressre is. Ha internetkapcsolat nlkl tervezzk hasznlni a Dreamweavert, a Dreamweaver Sg aktulis verzijt a www.adobe.com/go/documentation weboldalrl PDF formtumban is letlthetjk. Tovbbi detekrt, tippekrt, mdszerekrt s a legfrissebb termkinformcikrt ltogassunk el a community.adobe.com/go/help/main cmen elrhet Adobe Community Help weboldalra!
Megjegyzs: Ha a Dreamweaver szleli, hogy az alkalmazs megnyitsakor nincs internetkapcsolatunk, a Dreamweaverhez kapcsold HTML sgoldalak megnyitshoz vlasszuk ki a Help> Dreamweaver Help menpontot! Tovbbi napraksz informcirl tekintsk meg az online sgoldalakat, vagy tltsk le az aktulis Dreamweaver Sg PDF vltozatt!
Frisstsek keresse
Az Adobe idrl idre swftverfrisstsi lehetsgeket knl fel. Ezeket a frisstseket az Adobe Updater hasznlatval s aktv internetkapcsolattal rhetjk el.
l 2
A Dreamweaveren bell vlasszuk ki a Help> Updates (Sg> Frisstsek) menpontot! Az Adobe Updater automatikusan keresi az Adobe-swftvernkhz tartoz frisstseket. Vlasszuk ki az Adobe Updater prbeszdablakban a telepteni kvnt frisstseket, majd a letltshez kattintsunk a Download and Install Updates (Frisstsek letltse s teleptse) gomb ra!
Megjegyzs: Ha szeretnnk szemlyre szabni a jvbeli frisstseket, kattintsunk a Preferences (Belltsok) menpontra! Bellthatjuk, hogy az Adobe Updater milyen gyakran keressen frisstsi lehetsgeket, hogy beazonostsa a frisstsre szorul alkalmazsokat, illetve vlaszthatunk az automatikus vagy manulis letlts kztt. Az j belltsokjvhagyshoz kattintsunk az OK gombra!
6
Elinduls
Tovbbi forrsok
Az Adobe Dreamweaver CS4 Tanfolyam a knyvben nem helyettesti az alkalmazshoz tartoz eredeti dokumentcit, s nem nyjt tfog ismertett az Adobe Dreamweaver CS4 minden egyes funkcijrl s lehetsgrl. Csak a leckkben tnylegesen hasznlt utastsokat s belltsokat trgyalj uk a knyvben. A program funkciinak rszletesebb lersrt rdemes az albbiakban felsorolt forrsokat trekinteni:
o
Adobe Dreamweaver CS4 Community Help, amit a Help> Dreamweaver Help kivlasztsval rhetnk el. Ez a sg olyan integrlt online krnyezet, ahonnan tmutatst, sztnzst s rmogatst merthetnk az alkotshoz. Sajt belltsai nk szerint kereshetnk a tmhoz kapcsold , szakrtk ltal kivlogatott tartalmak kztt az Adobe.com-on s ms weboldalakon. A Community Help egyesti az Adobe Sg, a Support (Tmogats), a Design Center, a Developer Connection (Fejleszti kapcsolatok) s a Frumok informciit, s azokat kivl online tartalmakkal s a felhasznlk munkjt segt legjobb, legfrissebb forrsokkal egszti ki. Oktatanyagokat, technikai segtsget, online termkinformcikat, videkat, cikkeket, tancsokat s technikkat, blogokat, pldkat s szmos ms forrst tallharunk az oldalon. Adobe Dreamweaver CS4 Support Center, ahol az Adobe.com tmogat s oktat anyagai kztt bngszhetnk. Ezek elrshez ltogassunk el a www.adobe.com/support/dreamweaver/ oldalra!
Adobe TV, ahol az Adobe-termkekhez kapcsold programokat tallharunk. Tbbek kztt egy profi fotsok szmra ltrehozott, illetve egy How To? (Hogyan trtnik?) csatornt, amely tbb szz, az Adobe Dreamweaver CS4-hez s az Adobe Creative Suite 4 termkcsoporthoz kapcsold filmet tartalmaz. Ezek megtekintshez ltogassunk el a http://tv.adobe.com/oldalra!
Tovbbi hasznos linkek

o
Az Adobe Dreamweaver CS4 termk honlapja: www.adobe.com/products/dreamweaverl.

Dreamweaver-felhasznli frumok az Adobe-termkekkel kapcsolatos felhasznli tapasztalatok megosztsra: www.adobe.com/support/forums/
Dreamweaver Exchange bvtmnyek, funkcik, kdok stb. elrshez: www.adobe.com/cfusion/ exchange/o
Dreamweaver-bv tmnyek: www.adobe.com/products/ plugins/dreamweaver/.
Kedves Olvas!
Elszr is szeretnnk megksznni, hogy kiadvnyunkat vlasztotta az Adobe Dreamweaver CS4
megismershez. A knyvben szerepl pldk, mivel fordtsrl van sz, az eredeti (USA) mrtkegysgekben kszltek. Hogy a pldk s a hozzjuk tartoz magyarzatok a knyvben rthetek legyenek, mi is maradtunk ezeknl a mrtkegysgeknl, szabvnyoknl. Magyarorszgon metrikus mrtkegysgeket, Eurpai szabvnyokat hasznlunk. Sajt feladatoknl ezeket rdemes hasznlni . Remljk, hogy knyvnk nagy segtsg lesz az Adobe Dreamweaver CS4 hasznlatnak elsajttsban.
A kiad, a fordt s a szakmai lektorok
1 A Dreamweaver CS4
gyors ttekintse
See Umbria with us
.. -
..
.1'
'1'-
You have the fun. We do the work.

Come enjoy the vacation of a lifetimel We do the work and you have the fun! Our tour through the hill towns of Umbria is unequalled. For two weeks, you'" enjoy worry-free pampering. Every dav, a delicious breakfast and dinner (with wlne) are included. Lunch is on your own. Travel in air conditioned buses on ten wonderful day trlps to the su rcn .. n,n i n,,] historic hill towns.
OleaLI[ITlUI
Our luxury hotel accommodations include a hot tub, poci, and nearby by night time entertainment . Your weekend ls free to schedule as you wish, but you r meals are always provlded by our excellent chefs.
Umbria HiI! Town Tours, Teml, Italy Contact Us
Ebben a leckben egy pld4webold41 elksztsvel kezdjk meg az ismerkedst az Adobe Dreamweaver CS4 alkalmazssal.
1. LECKE A Dreamweaver CS4 gyors ttekintse
A lecke ttekintse
A kvetkezket fogjuk megtanulni: Szjt definilsa Dreamweaverben A Dreamweaver kezelfelletnek hasznlata j oldal ltrehozsa a CSS (Cascading Style Sheets) oldalszerkezettel Dokumentum elmentse Oldalcm s cmsorok mdostsa Szveg beillesztse kls dokumentumbl Kpek s httrkpek hozzadsa CSS stlusok ltrehozsa, mdostsa s kivlasztsa A Code s a Code and Design nzet hasznlata
Az oldal megrekintse Live nzetben vagy
bngszben
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a http://www.perfactkiado.huJmellekletek oldalrl a Lessons mappt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a LessonOl, valamint az Images (kpek) mappt!
Megjegyzs: A leckefjlok letltse
az Elinduls fejezetben tallhat. a 2. oldalon.
A Dreamweaver mesterien megtervezett CSS-szerkezet sablonjait hasznlva pillanatok alatt sznvonalas oldalakat kszthetnk, amelyeket mr csak szemlyes tartalmunkkal kell feltlteni.
Szjt definilsa Dreamweaverben

Ennek a knyvnek a lecki egy Dreamweaver szjton bell mkdnek. A Dreamweaverben a szjt helyben trolt vltozatval (local site) dolgozunk, amely szmtgpnk merevlemeznek egy knyvrrba van lementve. Amint a szjt kszen ll a publiklsra (lsd a ll. , Publikls az interneten cm leckt!), akkor mr elkezdnk a szjt egy webszerveren, nyilvnosan elrheten trolt, tvoli vltozatn (remote site) is dolgozni. A kt weboldal knyvrrszerkezete s fjljai gyakorlatilag egyms tkrkpei.
Elszr hozzuk ltre a szjt helyi vltozatt!
~k
loc~
'1
....
,"fo
Remote In'o
Tts.unlji Strver
Vt.nl onCo n~
... """" .'?W.;!.'

local root fold~, ;
Dlf.avh lmagn
Oo;aklng
[)ul;n Notu Fllt Vitw CoIumns Contributt Ttmolatts. Sp..,
_
a.
Doc:umenu/OW
Iri
Ifj
fo"':I Dcxumenu/DW al/imagH
Unu ,.&.tM to:
DocWMnt
O sltt: root
HTTP6ddrtU: 'hnp:lj
m. Unit ChK., to d.c.tl tml' ,,"bt".t rmr to

YOU'
O'MI
This addreu is uled kw s_ ,.1&1," Ih'tu.,.nd fOl

site.
Caustr!stYoe Hnb: O UH
UH-SeMittv. link
cMdc1no
eKht:: ~ ~ Clch. The CatM maIntaJni"" and aUt{ InforlftlUon ln tht Ilte. This IPHd. up tht Auet and link
~eme"1 futur ...
pan"
H.lp
( c.nc.1 )f
OlI
} I
ADOBE DREAMWEAVER CS4 Tanfolyam a knyvben
1 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Ha most indtjuk el els alkalommal, ki kell tltennk az adatokat a regisztrcis kpernyn. 2 Vlasszuk ki a Site> New Site (Szjt> j szjt) menpontot l Ekkor megjelenik a Site Definition for DW CIB (j szjt ltrehozsa a DW CIB mapphoz) cm prbeszdabJak. Amennyiben nem Advanced (Specilis) nzetben vagyunk, kattintsunk az Advanced gombra! Br a Site Definition prbeszdablak Basic (Alap) nzete kevsb sszetettnek tnik, tbb elzetes informci bevitelt ignyli. Ha az Advanced nzetet vlasztj uk, csak a szjt meghatrozshoz szksges adatOk egy rszt kell belltanunk ahhoz, hogy nekilJhassunk a munknak.
3 Amennyiben szksges, vlasszuk ki a Site Definition prbeszdablak Local Info (Helyi vltozat adatai) kategrijt! A Site name (Szjt neve) mezbe gpeljk be a DW CIB cmet, majd ssk le a Tab billentyt! A szjtOk nevei a FiLes (Fjlok) panel ben vannak felsorolva, s ltalban egy adott projekthez vagy gyflhez kapcsoldnak. 4 Kattintsunk a LocaL rootfolder (Helyi gy'krknyvtr)
mez
melletti mappa ikonjra! Amikor
a Choose locaL root foLder for site DW CIB (Helyi gykrknyvtr kivlasztsa a DW CIB szjt rsz-
re)
5
prbeszdablak megnylik, keressk ki a letlttt fjlokat tartalmaz DW CIB mappt, majd kattintsunk a Select (Windows), illetve a Choose (Macintosh) gombra!
cm
Kattintsunk a Default images foLder (ALaprteLmezett kpek mappa) mez mellerri map pa ikonjra! Amikor megnylik a prbeszdablak, keressk ki a letlttt fjlokat tartalmaz DW CIB/images mappr! Kattintsunk a Select (Windows), illetve a Choose (Macintosh) gombra! Abelltsaink jvhagyshoz kattintsunk a Site Definition prbeszdablak OK gombjra!
Most, hogy belltOttuk szjtunkat, egyszeren meg tudjuk nyitni a fjlokat a Dreamweaveren bell. A szjt ltrehozsa elengedhetetlen kezd lps brmilyen Dreamweaver-projekt elindtsakor. A szjt gykrknyvtrnak helye meghatroz a hivatkozsok elrsi tvonala szempontjbl, s lehetv teszi olyan, teljes szj tOkra kiterjed lehetsgek hasznlatt a Dreamweaverben, mint pldul a Find and Replace (Keress s csere) funkci.
Az
Az
dvzlkperny
kezelse
gyors hozzfrst biztOst a nemrg hasznlt dokumentumokhoz, knnyen hozhatunk ltre rajta keresztl szmos oldalrpust, illetve kzvetlen] kapcsoldik sok alapvet sg-
dvzlkperny
Opf!n a RecelU !tem
Create New
Top r.ealUrtS (videos)

Itel.llN fl",
'ci
Indvc.hlml
Irtduhlml
tnUllmI a;. SpryTooItip.j$
SpryTOOItlP,fU
PtI,
ASPVlScfipt
'o
XSlT CEtlti,~ 19')
~ bovdmlnull/s .htmr
O J,lvaScript
'Ml
'" CSS
WtbWldeeu
(il t;I
Kcus .html
nylt.cu
OJnn .. .
Gettln~
_.-
..... &S<r IPtSc.lpporl
Mor ...
Slarhd
Q III
Resourcu.
Drl/~"Vl/r ~(".angl/.
10
tmhoz. Az dvzlkperny a program els elindtsakor, valamint akkor jelenik meg, amikor nincsenek nyi[Va dokumentumok. Hasznljuk az dvzlkpernyt most arra, hogy megismerjk a dokumentumok megnyitsnak klnbz mdszereit!
l
j, res oldalltrehozshoz kattintsunk az dvzlkperny Create New hozdsa) oszlopban a HTML gombra! Vlasszuk ki a File> Close (Fjl> Bezrs) menpontot! Ha brmilyen mdostst hajtunk vgre, a fjlt el kell menteni.
(O] dokumentum ltre-
2 3
Trjnk vissza az dvzlkpernyre, s kattintsunk az Open (Megnyits) menpontra! Ez lehet v teszi, hogy a megnyithat fjlok kztt bngssznk az alkalmazsban. Kattintsunk a Cancel (Mgse) gomb ra!
f) O.. n ...
a.ttlnQ Start.d
New FedttJft5
JI
Az dvzlkperny a nemrg hasznlt fjlok listjt is megjelenti. A fenti

brhoz hasonl, habr sajt alkalmazsunkban most mg valsznleg nincsenek korbban megnyitott fjlok. Ha errl a listrl vlasztunk dokumentumot, ugyanazt rjk el, mintha a File> Open (Fjl> Megnyits) menpontot hasznlnnk, m mr ltez oldalak esetn az elbbi mdszerrel idt takarthatunk meg.
Resources,
Dreamwuvcr
Ex(h~nge.
A knyvben gyakran fogjuk hasznlni az dvzlkpernyt. Ha befejeztk a knyv gyakorlatait, dnthetnk gy, hogy nem az dvzlkpernybl indulunk ki. Ebben az esetben az ablak bal als rszn tallhat Don't show agai n (Ne mutassa jbl) jellngyzettel tudjuk az dvzlkperny megjelentst kikapcsolni. Visszakapcsolshoz nyissuk meg a Preferences (Alapbelltsok) prbeszdablak General (Altalnos) kategrijt! j oldalt a File men segtsgvel nyithatunk.
CSS stluslap kivlasztsa

Az Adobe Drearnweaver CS4 alkalmazs 32 fle,
klnbz grafikai megjelens CSS stluskszletet
tartalmaz CSS llomnyt tesz elrhetv. Ebben a leckben kivlasztunk egyet, s mdostani fogjuk azt. A CSS oldalszerkezeteket alapos prbknak vetettk al, hogy megfeleljenek a webes szabvnyoknak, s minden fbb bngszben, az oldalszerkezet brmilyen talaktsa nlkl megjelenthetk legyenek. A Drearnweaver npszer kt- s hromoszlopos, ille[Ve rgztett szlessg (lakat szimblummal jellt) oldalszerkezeteket, tovbb szza!k- vagy kvirtalap (a rugalmassgot jelkpez rug szimblummal jellt), valamint a kppontok, szzalkok s kvirtek keverkt hasznl elrendezseket tartalmaz. l 2 3 Vlasszuk ki a File> New (Fjl>
o] dokumentum) menpontot!
A New Document prbeszdablak els oszlopbl vlasszuk ki a Blank Page (Ores oldal) kategrit! A Page Type (Oldaltpus) oszlopban vlasszuk ki a HTML-t! A Dreamweaverrel sokfle oldaltpust kszthetnk; alapszint weboldalak ksztsre ltalban a HTML-t hasznljuk. A Layout (Oldalszerkezet) oszlopban vlasszuk ki a 2 column fixed, left sidebar, header and footer (rgztett ktoszlopos, baloldalsv, fejlc, lblc) mintaszerkezetet! Az oldalszerkezet elnzeti kpn lakat szimblum jelzi, hogy a szlessg pixelsz.ma adott. Egyes oldalszerkezet-tpusok esetben rugt lthatunk, amely azt jelzi, hogy a szlessg a bngszablak mrethez igazodik.
5 A tbbi belltst hagyjuk alaprtelmezett rtken, majd kattintsunk a Create (Ltrehozds) gombra!
11
~~~~..,....--.~~
...
PaQeTVJM:
Layout:
[~ ~k"
~
Il&ankTemp[lCe
) jq
HIlILI
HTMlltmpl,lte
Ubully /tem
~T
<noM.>
1 c.olUll'lIl elUl!' , ctnttrt'd I coIulr'.IJ t f.l~l f(, <enIered, hucHr.ncl l column lilltd, u:nTtftd l Ih/mil flxcd. unIt/ed, nnek! and fl l coll.ltnn I!qyld. (~nttrtd l ((Ilumn lkal>ld. cenlered, MIt ! lond r 2 cofumt'l e l a~tk. left 1ldebu 2 column tlutl" lefl sldeb.Jr. Millkr J
'
. ..O C .
--
(Emitt
~gtl
!
I
~~efromT~
XSLT (Fn.grrw:ntl i:!. Actlon.Scripl:
I"
CSS
~ IJ~SuiI7l
I~
--
hg.from~
" XML
ASP J,lv.suJPI ' ASP V8Scr1pl ASP.NEr C-
"",",
ASP.NfTV'
[---""- ...... 1 rtg",
2 cel"mII eJ ank. light sldtb.l.r 2 (ohmWl eiuIle. tUJht ,Idebir. htader 2 column fill~d, Itft ,Idtb.u
li
t l,;
I
TWQ (olumns . U'MdUn ln pixel WIth Im

sIdebIr, MacH! and focner.
Coldfusle n ...!... CoIdFUlJon cGmpotltllt

>
)5p
JJj PHP
.
(
Help
"..._,.
)
( "ettffl'lCu~. )
2 colutnfl 'h:td, "debil 2 column nud, rlg'" 1ItNI, hudH a 2 column hybrid, ItM ,Ide bir 2 tofunm hybrid, If,f, "Ideb.!. huder.l 2 toIumn Irybnd, noh! sldt:bar 1 (oll/ r Irybrld, rl~hl sldf;~r , hUcHI NI 2 oolu~~ IIQufcl, left I\dtbar 2 column llQuld, ltfllldtb.lr. IlUdtr " 2 column !lquld, ri~ht lkifbir
OocType.
UyOUICS$;
l XKlloIL l.o"'~ttkWII~
I Add to Had
~
_ ti
Anach CSS mt:
U"''''.- (
M.I
f,l11D!US $1i![!I!OI
F , -
Az j oldalunk helyrz szvegekkel kitlttt dokumentumknt jelenik meg a Dreamweaverben. Ez szerkesztfellet, ahol a sajt tartalmunkat bevihetjk, s szemlyre szabhatjuk az oldal megjelenst.
Az oldal elmentse
Oldalunk ltrehozsa utn rdemes azt azonnal el is menteni. l 2 Vlasszuk ki a File> Save (Fjl> Ments) menpontot, vagy hasznljuk a Control+S (Windows), illetve a Command+S (Macintosh) gyorsbillentyt! Amikor megjelenik a Save As (Ments msknt) prbeszdablak, keressk ki a lessonOl mappt, s nyissuk meg! A Filename (Fjlnv) mezbe gpeljk be az umbria.htm vagy umbria.html cmet! Szemlyes dntsnktl fgg, hogy .htm vagy .html kiterjesztst vlasztunk az llomnyainknak, fontos viszont a kvetkezetessg. (Ebben a knyvben .html-t hasznlunk. A legtbb honlap nyitoldala az index. html fjlnevet hasznlja. A 9. leckben a knyv leckinek elvgzse sorn ltrejtt gyakorloldal nyitoldalt fogjuk felpteni.) Kattintsunk a Save gomb ra!
A dokumentumnzet kivlasztsa
Br a Dreamweaverben a legtbb, webszerkesztssel kapcsolatos mveletet a Design ablakban vgezzk, a szerkesztfelleten ngy klnbz nzet kzl vlaszmatunk:
Design (Tervez) nzet - bngsz jelleg krnyezetbe helyezi az oldalt. Code (Forrskd) nzet - megjelenti az oldal forrskdjt. Code and Design (Forrskd s Tervez) nzet - egyszerre jelenti meg mindkt nzetet. Kattintsunk a Sp/it (Osztott nzet) gombra ennek a nzetnek az elrshez! Live (l) nzet - bngszben jelenti meg az oldalt a Drearnweaveren bell.
A Design, a Code, illetve a Code and Design (Sp/it) nzet szorosan kapcsoldik egymshoz. Az egyes nzetekben vgrehajtott brmely vltoztats a tbbi nzetben is azonnal megjelenik. Mindegyik nzettel dolgozni fogunk a lecke ksbbi rszeiben.
12
1. LECKE A Dreamweaver C54 gyors ttekintse
Az oldal cmnek mdostsa

Ax oldal cme a bngszk cmsorban jelenik meg. Ax oldalcm az egyik legfontosabb elem, amit a keresmotorok figyelembe vesznek a weboldalak indexelsnl. Fontos teht, hogy a Dreamweaver alaprtelmezett Untitled Document (Cm nlkli dokumentum) oldaJcmt a sajt olda/unkhoz kapcsold cmre mdostsuk.
l Amennyiben szksges, az oldal Design nzetben val megtekintshez kattintsunk a Design gombra!
2 Jelljk ki a cmet helyettest Untitled Document elnevezst a szerkesztfellet eszkzsvjnak Title (Cm) mezjben! 3 Gpeljk be a helyre az Umbria Hill Town Tours cmet, majd ssk le az Enter (Windows) , illetve a Retum (Macintosh) billentyt!
Cmsorok mdostsa
A helyrz cmsorokat egyszeren mdosthatjuk a Dreamweaverben. Ezek a helyrz cmsorok s szvegek segtenek, hogy jobban el tudjuk kpzelni a vgleges oldalszerkezeteket. A helyrz szveg kicserlse egyszer mvelet.
J
Kijellshez kattintsunk dupln a Header helyrz szvegre, majd rjuk be a kvetkezt: See Umbria with us! A szvegszerkesztkhz hasonlan a Dreamweaver is tbbfle szvegkijellsi mdot knl- ilyen pldul a dupla kattints egyetlen sz kijellsre vagy a szvegrsz kijellse az egrrel. Hromszori kattintssal egy teljes bekezds t jellhetnk ki.
5ee Umbria with us
Helyezzk a szvegkurzort a Main Content helyrz szveg el, majd a kijellshez hzzuk vgig a szvegen!
Tipp: Az egeret lenyomott gombbal hzva brmilyen szvegtartomnyt kije//hetnk.
3 Jelljk ki a harmadik szveg brmelyik rszlett! Gpeljk be a Dreamweaverben a kijellt szvegrsz helyre a kvetkezt: You have the fon. We do the work. A szvege t gy kicserltk, a <hl > formtum mgis megmarad.
TitIe.
5ee Umbria with us You have the fun. We do the work.1

4 Vlasszuk ki a File> Save menpontot!
13
Szveg beillesztse
Abekezdsek szvegt pp olyan knnyen megvltoztathatjuk, mint a cmsorokt. A kzi bevitelen tl a Dreamweaver fejlett szvegkezelsi funkcii tmogatjk az egyb forrsokbl, pldul a Microsoft Office-bl msolt szvegek beilJesztst - igny szerint a formzs megrzsvel is. l Helyezzk a szvegkurzort a helyrz bekezds szvege el, majd hzzuk a szveg vgig gy, hogy a msodik helyrz cmsor s az sszes bekezds ki legyen jellve! Figyeljnk oda, hogy a Footer (Lb/c) helyrz szvegt ne jelljk ki! A szveg trlshez ssk le a Delete
billentyt!
3 A Windows Intz (Windows), iUetve a Finder (Macintosh) segtsgvel keressk meg az internetrl a merevlemezre letlttt fjlokat, majd nyissuk meg a lessonOl> vacation.rifdokumemumot! 4 5 Miutn megnylt a fjl, jelljk ki a benne tallhat sszes szveget, majd a msolshoz ssk le a Comrol+C (Windows), illetve a Command+C (Macintosh) gyorsbillentyt! Helyezzk a Dreamweaverben a szvegkurzort a You have the fim. w do the work. cmsor al, s a vglapra msolt szveg beillesztshez ssk le a Comrol+ V (Windows) vagy Command+ V (Macintosh) gyorsbillentyt!
Sldeb.rl Content
The backQround color on this dlv will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the _mainContent dlv If it will always contain

Come enjoy the vacation of a Ilfetimel We do the worlc and you have the funl Dur tour throu~h the hIU towns of Umbria ls unequalled. For two weeks, you'll enjoy wony free pamperlng . Every day, a delidous breakfast and dinner (wi th wlne) are induded. Lunch is on your own. Travel in ai r condltioned buses on ten wonderfuJ day trips to the surrounding beautifui , historie hIU towns .
more content.
Donec eu mt sed turpis
teuglat teug!at. Jnteger

turpis ereJ, pellentesque eget, cursus et, fermentum ut, sapIen. Fusce metus
ml, elelfend sollldtudln, molestle ld, varius et, Donec nec libera.
<~.iMD
Our luxury hotel accommodatlons include a hot tub, poci,

and nearby by night time entelta inment. Your weekend ls free to schedule as you wlsh, but your meals are always . provJded !;ly our e?<celte.nt chefs ..
A szveg bekezdsekbe p> HTML-cmkkkel) rendezse automatikus.

Megjegyzs: A szveget kzvetlenl az oldalra is begpelhetjk.
6 7
Helyezzk a szvegkurzort a lblc terletre! Jelljk ki a Footer helyrz szveget, s gpeljk be lblcnek a kvetkezt: Umbria Hill Town Tours! Hozzunk ltre sortrst a Shin+Enter (Windows), illetve a Shin+Return (Macintosh) gyorsbillenty letsvel, majd gpeljk be a kvetkezt: Contact Us!
Umbria HiII Town Tours Contact U~
Uj kpek hozzadsa
A kpek s grafikk beillesztse rendkvl egyszer a Dreamweaverben. Amint egy kpet az oldalra helyeztnk, a tulajdonsgait, gy pldul az igaztst be tudjuk lltani a Properties (Tulajdonsgok) panel segtsgvel vagy a CSS-en bell.
14
1 Jelljk ki az oldalsv teljes tartalm t, belertve a Sidebar1 Content helyrz szveget s az azt kvet kt bekezdst is! 2 A helyrz szveg trlshez ssk le a Delete billentyt! 3 Vlasszuk ki a szerkesztfellet aljn tallhat cmkevlasztban (Tag Selector) a <h 3> cmkt, majd trlshez ssk le a Delete billentyt!
<body.twoCoIFlxUHdr> <divlcontainer> <diV#Sldebarl~ h3>n
.'!.
Amennyiben az Imert (Beszrs) panel nem lthat, jelentsk meg a Window> Imert menpont kivlasztsval! Panelformban fog megjelenni (a ksbbiekben meg fogjuk tanulni, hogyan jelenthetjk meg a panelt a klasszikus munkafellet szerkezetben kompakt sv formjban). Az Insert (Beszrds) panel Common kategrijban kattintsunk az Images (Kpek) mengombra, majd vlaszszuk ki az Image (Kp) menpontot!
Navigation Bar Draw Rectang le Hotspot Draw Oval Hots pot Draw Polygon Hotspot
A Select Image Souree (Kp forrdsllomnynak kivlasztdsa) prbeszdablakban keressk ki az internetrlletlttt fjlokat, majd jelljk ki az images> seuLpted-garden.jpg kpet! Vlasztsunkat az OK (Windows) vagy Choose (Macintosh) gombra kattintva ersthetjk meg.
Az Image Tag AecessibiLity Attributes (Kpcmke-elrhetsgi jellemzk) prbeszdablak ALternate text (Helyettest szveg) mezjbe gpeljk be a scuLpted garden szavakat! Kattintsunk az OK gombra!
Altt'nltt tut: 1 :Ulptfli 9vdcnl

lDng dtKrlpClon:
E
l
Ej
011C~tl
[h"":/I
( (
Ho'.
) ) )
'f vou don't w.m to tnttr this Information WM" InHnlng objeas.
Uyngc ths A,csu/bilit( pr,fsreng:s
lehet az oldalunkat gazdagt kpekrl rvid lerst mellkelni. A helyettest szveg vagyahogy angolul nevezik - az alt text akkor lthat, amikor a kp nem jelenik meg. A mobil eszkzket, kpernyolvas programot vagy ms bngszt hasznlk nem biztos, hogy meg tudjk nzni
Clszer
See Umbria with us

):ame enjoy the vacation of ct llfetJ mel We do the work "nd you have the fonl Our tour through the hiU towns of Umbna is uocQ,ualled . For two weeks, you'lI enjoy worry free pamperino . Every dav, a delidcus breakfllst "nd dlnner (w lth wlne) are included. Lunch is on your own . Tf'!Ivel in air condltloned buscs on ten wonderful day trlps to the sUrTOund lng beauUrul, histone hlll towns . Dur luxu ry hotel accommodatlons include a hot tub, pool,
_~""'"J!_ _ _ _ _ _~ n~,-,"" ~ Y : ::ght time entertainment . Your weekend ls .:.:d n e.~rby b.t.n l
15
a kpeket. A helyettest szveg ilyenkor megjelenik, s segt az oldal rtelmezsben. Hosszabb lersra csak sszetettebb kpek, pldul tblzatok esetben van szksg. 7 8 9 Helyezzk a szvegkurzort a f, a Come enjoy szavakkal kezdd tartalmi bekezds elejre, majd kattintsunk az Insert panel Images gombjra! Jelljk ki a Select Image Source prbeszd ablakban az images> italian-hiff-town.jpg kpet, majd kattintsunk az OK (Windows), illetve a Choose (Macintosh) gombra! Gpeljk be az Italian hill town helyettest szveget, majd kattintsunk az OK gomb ra!
10 Ha a Properties panel nem lthat, megjelentshez vlasszuk ki a Window> Properties menpontot! II Maradjon kijellve a nemrg beillesztett kp, s vlasszuk ki a Properties panel Class (Osztly) fel ugr menjbl a fItrt elemet!
Ren;!ltne
Arudl StyIe Sheet. ..
Az fitrt osztly (float right -lebegtets jobbra) olyan CSS stlus, amely jobbra igaztja az objektumot. A szveg balrl fogja krbefutni a kpet. Az fit1ft osztly (float left -lebegtets balra) balra igaztja a kpet gy, hogy a szveg jobbrl futja krbe azt. Mind a harminckt CSS oldalszerkezeti vzlat tartalmaz a sdluslapjban .flm s .Rdft osztlyokat. A float (lebegtets) tulajdonsg jobbra vagy balra hzza ki azt az elemet, amire alkalmaztuk a szvegdobozon bell. (Ebben a leckben a szvegdobozt a mainContent, azaz a f tartalmi rsz jelenti.) Amikor egy elem elmozdul, a tbbi tartalom ennek megfelelen folyik kr. Amikor pldul egy elem jobbra mozdul el, a tartalom balrl futja krbe.
See Umbria wlth us

Come enjoy the vacatlon of a lifetlmel We do the work and you have the funl Dur tour through the hill towns of Umbria is unequalled . For two weeks, you'lI enjoy worry free pltmpering. EYery day, a dellcious breakfast and dinner (with wine) /!Ire ' Travel ln air condltioned buses on to the surrounding beautifui, hlsloric
your own. I day tr1ps I towns.

II
Our luxury hotel accommodations indude
hot tub, pool,
Az oldalunk most mr szvege t s kpeket is tartalmaz. Egy CSS oldalszerkezet kivlasztsval,

a szveg mdostsval s kpek hozzadsval sznvonalas weboldalt hoztunk ltre, amelyet brmely bngszben megtekinthetnnk, ha Feltltennk az internetre. A kvetkez feladatban a CSS stluslapok mdostsval tovbbfejlesztjk az oldal megjelenst. 12 Kattintsunk a File> Save gombra! ,
16
CSS stlusok kivlasztsa s mdostsa

A modern weboldalak CSS-eket (Cascading 5tyle Sheets), vagyis stluslapokat alkalmaznak a formzs s az oldalszerkezet kialaktsra. A weboldalakat gyakran hasonltjk hromlb szkhez: az ket alkot HTML, a CSS s a JavaScript a hrom lb, amin megllnak. A HTML a tartalom - az anyag, amit bevisznk a Design nzet sze rkesztablakba. A CSS az oldalszerkezet s megjelens, amelyben a klnbz elemek, sznek s htterek vannak, a JavaScript pedig az interaktivitst adja. Ebben a feladatban a meglv oldal httrsznt fogjuk megvltoztami, httrgrafikt adunk egy oldalrszhez, s szmos szvegjellemzt mdostunk. Mindezeket a vltoztatsokat a Dreamweaver CSS stluslapjainak hasznlatval fogjuk vghezvinni.
Az oldal httrsznnek mdostsa

A stluslapok segtsgvel brmely HTML-cmke, pldul a <b od y> tulajdonsgait is mdosthatjuk. l 2 Jelentsk meg a CSS Styles panelt a Window> CSS Styles menpont kivlasztsval! Amennyiben szksges, kattintsunk a CSS Styles panel tetejn lev Ali (sszes szably megjelentse) gombra, hogy rvltsunk a Current (Aktulis) mdbl! Az Alt md az aktulis oldalhoz kapcsold sszes CSS stluslapot megjelenti. Ahhoz, hogy a CSS panel stuslapjai lthatak legyenek, legalbb egy dokumentumnak megnyirva kell lennie a szerkesztfelleten. A plusz (+) (Windows), illerve a nyl (Macintosh) ikonra kattinrva bontsuk ki az Alt Rules (sszes szably) lista <sty l e> elemt! A lessonOl stlusszablyai a dokumentum fejlcben tallhatk. A dokumentumhoz tartoz bels stlusokat a Dreamweaver hegyes zrjellel jelli: <st yle >. A ksbbi leckk sorn kls stluslapon trolt stlusokkal fogunk dolgozni. A Dreamweaver nv szerint jelenti meg a CSS Styles panelben ezeket a stluslapokat (pldul: mystyles.css).
CSSS'mU
<,ty\>
.twoColFlru Hdr f!<om.lrH!r
,[WoCo)AxUHdt ..htader
.twoCoIAl/UHdr 'huekr hl
.twoColnxLJHdr isldebarl .twoColrlJ( ltHdr hNlM:amt nT

.fWOColFlxLIHdr #footer .twoCoIFlkuHc:I( Ifooler p
,font
l()O)C, VerdIna, Artl. I, HelY..
margi.
~ddi r.g
_
~
O ,O
; .~ntu
I
te.xt.,Hgn_ _ . _ Add PfOOf"Y
Vlasszuk ki a. body szelektort, majd kattintsunk a CSS Styles panel aljn a ceruzt brzol (~) Edit Rule (Szably szerkesztse) ikonra!
17
5 Amikor a CSS Rule definition for body (CSS-szably meghatrozsa a body szelektorhoz) prbeszdablak megjelenik, kattintsunk a Background (Httr) kategrira! A Background szn mintra kattintva nyissuk meg a sznvlasztt! 6 Kattintsunk a sznvlasztban a pipettval a fehr sznblokkra!
'--_ ___ _ _ _ _--'=:S =u deflnl::.::.c.:.::.cbod=v _ c s :.cR l . ll0 n f0 ' C--.
&l.ckground
"T"",, ~::--"--
h ckgrou nd
810<k
Category
!order
'0.
Background-~Iile:
U..
Posh1onlng
Exten sions
Blckground- posltk)n
8ackground-posldon
A Dreamweaver automatikusan beilleszti a fehr szn hexadecimlis rtkt (#FFF) a Background-
color (Httrszn)
7
mezbe.
A vltoztats vglegestshez kattintsunk az OK gombra! A Dreamweaver a CSS panel Properties (Tulajdonsgok) szakaszban mutatja az j sznt. lehetsges, hogy a CSS Styles panel als szlt lejjebb hzva meg kell nvelnnk a Properties szakaszt ahhoz, hogy lssuk a sznt. A teljes kpe rnys nzetre vltshoz ssk le az F4 billentyt, amivel az sszes panelt elrejtjk! Megfigyelhetjk, hogy a httrszn szrkrl fehrre vltowtt. A cmsor, az oldalsv s alblc szne vltozatlan maradt. A panelek visszalltshoz ssk le jra az F4 billentyt! A dokkolt paneleket az F4 billenty letsvel vagy a Window> Hide/Show Panels (Ablak > Panelek megjelentse/elrejtse) menpont kivlasztsval is megjelenthetjk s el rej thetj k. A rejtett paneleket gy tudjuk elhvni, ha az egrkurwrt az ablak szln a dokkolt panelek helyn tallhat, sttszrke svokra helyezzk. Amint elmozdtjuk a dokkolt panelekrl az egrkurwrt, azok megint eltnnek egszen az F4 billenty jbli letsig. A <body> elernhez hasonlan az oldal ms elemeihez, pldul a <di v # s i debarI > elemhez is lehet sajt httrsznrtkeket rendelni. Brmely elem httrsznrtknek megvltoztatshoz jelljk ki az adott elemet a cmkevlasztban, majd a vlroztatsok vgrehajtshoz kattintsunk az Edit Rule ikonra!
10 Mentsk el a mdostsokat a File > Save menpont kivlasztsval!
HUrkp beillesztse a cmsorba

Amg az eltrben lv kpeket kzvetlenl az oldalba illeszthet jk, addig httrgrafikkat a CSS stluslapok segtsgvel tudunk beszrni. l Helyezzk a szvegkurwrt a See Umbria with us cmsoron bell brhova!
2 Jelljk ki a cmkevlasztban a <di v#hea d e r > elemet! Ez a vlaszts a #header awnostval (ID) rendelkez <di v > cmkt jelli. A cmkevlasztval kivlasztott elem, ez esetben a div cmsor kk szn vonallal lesz bekeretezve a szerkesztablakban.
18
Sec Umbria with us

You have the work. . We do
Come ~oiov the ... aca tion of a lifetime! We do the work and you have the fun ! Our tour through the h;:1towns of
Umbria ls unequal1ed . For two weeks,

you'n enjoy worry free Pllmpering .
"
3 4
A CSS Styles panelen vJtsunk t Current mdba gy, hogy a Current gombra kattintunk! Amennyiben szksges, a Show cascade of ruLes for selected tag (Kivlasztott cmkk szablyainak megjelentse) ikonra kattintva vltsunk t az About fln a Rules belltsra! A Rules mez ben vlasszuk ki a . tw oCo lFi xLtHdr #header hl elemet! Lehet, hogy a CSS StyLes panel mrett meg kell nvelni ahhoz, hogy minden jllthat legyen. Amikor megjelenik a CSS Rule definitionfor . twoCo lFixL t Hd r #he ader prbeszdablak, vlasszuk ki a Background elemet, majd kattintsunk a Background-image (Httrkp) mez mell etti Browse (Bngszs) gomb ra! Ekkor megjelenik a SeLect Image Source (Kp forrsnak kivlasztsa) prbeszdablak. A Select Image Source prbeszdablakban jelljk ki az imageslcloud_header.jpg fjlt, majd kattintsunk a Choose gombra!
Category
Background
Black
Bickground-<olo,:
('DDOODD'
Box
Border
Background-lmage: !lma.ges/doud_hea.der.Jpg
}~
( Browse .. . )
Un
PosltJon ing'
Exten~ons
8ackgfound - repe:,t: lho-r~put
Background-a.n.cnme:nt: (
Background-poslllon (X) ;
Background-posltlon (Y):
,---...,
, px
---;-"l " ~I
( ...1. )
( ""oly ) ~) (
CIC
7 8
A Background-repeat (Httr ismtldse) fel ugr menbl vlasszuk ki a No repeat (Nincs ismtls) ttelt, majd kanintsunk az OK gombra! Kattintsunk brhova az oldalon bell, hogy megszntessk a cm kijellst, s megjelenjen a httrgrafika! A fekete cm elg nehezen olvashat az gsznkk httren, ezrt a kvetkez gyakorlatban tlltjuk a betsznt.
Ilf' '..,

Come enjoy the vacation of a li(et lme! We do the work and you have the funl Our tour through the hill towns of Umbria is uneQua lled . for two weeks, you'lI enjoy worry free pampering.
"
19
Szveg bettpusnak s sznnek belltsa

A CSS rendkivl nagy szabadsgot ad a stlusok meghatrozsban. Azon tl, hogy egy adott oldalon vagy az egsz webhelyen bell megvltoztathatjuk egy cmke teljes megjelenst, egy meghatrowtt helyen lv cmke stlust is bellthatjuk. l Helyezzk a szvegkurwrt brhova a See Umbria with us cmen bell!
2 A cmkevlasztban jelljk ki a <h l > cmkt!

...>,.... ',.
.
.
.... . .
.
. . .~ ...,
~.
~
You have the fun. We do the
work.
Come enJoy the vacation of a lifetlmel We do the work and you ha"", the fun! Our tour through the hill towns of Umbria ls unequalled. For two weeks, you'lI enjoy worry free pampering. <_ont.I~.r> .<d""'~ E@ ~e Q. J,F:~
A CSS Styles panelen vlasszuk ki a Current mdot! (Amennyiben Al! mdban vagyunk, kattintsunk a Current gombra!)
,.......
,...
1.1u
ml",
fOrlI
text.,llgn
loe:. Venll.... MIl. Htlv... lO000OO itft
o
1"""0
"apeldl. for ~Y"I

"uk.fedn8

- <.twoCoIfbcUHdr -o .. <div>
.rwnC'"nlFhrltNttr.
'fd~
paddlng
iFFF
_
_
o
.0
UI( ."nII.. ...,","";;",,.., i ~ v. "",".. _ ~ ... ,,
00000oo
IrAt ali I"
cenler
Asfd Prpm ny
4 5 6 7
A Rules listn kattintsunk a Show cascade ofRules for selected tag (A kivlasztott cmke szablyainak megjelentse) gombra, majd vlasszuk ki a . twoColFixLtHdr #header hl szablyt! Kattintsunk az Edit Rule gombra! Amikor megjelenik a CSS Rule definitionfor . twoColFixLtHdr #header hl prbeszdablak, a Category (Kategrik) oszlopbl vlasszuk ki a Type (Bettpus) elemet! A Fontjamily (Bettpusok) legrdl menben klnbz bettpuscsoportok (pldul Georgia, Times New Roman, Times, serif vagy ms, a listn szerepl elemek) kzl vlaszthatunk. Nem minden szmtgpen vannak ugyanazok a bettpusok teleptve, ezrt nem egyes bettpuso kat, hanem bettpuscsoporrokat lehet vlasztani. Az els csoport a listn az els vlasztsi lehet sg, a msodik a msodik s gy tovbb. A legtbb bettpus-vlaszt lista serif (talpas) vagy sans
20
1
8
serif (talp nlkli) tpusra vgzdik, gy ha egyik ltalunk vlasztOtt bettpus sem elrhet, legalbb a talpas vagy talp nlkli bettpus opci kivlasztsa rvnyesl. Hasznos lehet az Edit Font List (Bettpuslista szerkesztse) opci, mellyel j bettpuscsoportOkat tudunk hozzadni a listhoz. A sznvlasztban a pipecrv vltOz egrkurzorral vlasszuk ki a fehr sznmintt, majd kattintsunk az OK gombra a vlaszts jvhagyshoz!
C"tegory Type
I _
"
B.l.c k;round
~~~~~==.==~~ Font-fAmily: GeOfgl.JI. "Tttnes New R.0mvf. T /mts, Sttl'

font-size:
Font- style:
Font-var~nt
lI",k
Box
Border
Un
Positioning
Extenslons
lIne-height:
rI- ---=; r;:;--
Font-<k<:or.won:
o 0 -"...
o
nOM
- il
Fonl-trendorm:
Color:
underilnc
Q'r.:=,,--, ,..
D Une-thrQU9h O bj'n'
( Apply
>(
Can", )
E1IIl'#
Kattintsunk brhova az oldalon bell a cmkijells feloldshoz!
See Umbria with us
1f'
'l
'
You have the fun. We do

Ezzel sikeresen megvltoztattuk a <hl > szvegrsz bettpust s betsznt. Az oldal ms szveges elemeinek betsznt vagy bettpust ugyanilyen mdon tudjuk megvltOztarn.
Szvegmret mdostsa
Az elz feladatban bemutatOtt bettpus- s
mrett s sortvolsgt is szablyozhatjuk. l 2 Helyezzk a kurzort brhova a f tartalmi rszen bell! Vlasszuk ki a cmkevlasztban a <di v #ma in Co n tent > elemet!
betszn-mdostson
fell a CSS segtsgve! a szveg
See Umbria with us
3 4
Kattintsunk az All gombra! A CSS Sty1es panel Ali Rules svjban vlasszuk ki a . twoCo lFixLtHdr #mainCo nt e nt elemet, s kattintsunk az Edit Rule menpontra! A megjelen CSS Ruledefinitionfor. twoCo lFixL t Hd r #mai nContent prb=dablak Category oszlopban vlasszuk ki a Type kategrit!
21
CSSSTYlES
AlJ .....
<styft>
body
1
,rwoColFlxUHdr #(:ontalner
.twoColAxllHdr 'header .twoColF1xUHdc #h<l!J.der hl
.twoColFlxltHdr
'51~ba rl
lWOCoIIlxLtHdt ..... nCont.

,twoColFlxl1Hdr Ifoor.er
.twoColAxllHdr Ifooter p ,I
'ropell s tor
'"''11"
.
~ddlnq
o 21lpJc:
.
Add Propc:nv
5 A body szably szerint ennek a CSS oldalszerkezetnek a betmrete 100 %-ra van lltva. A d i v f tartalmi rsz betmretnek megvltoztatshoz rjunk be a Font-size (Betmret) mezbe 90-et, majd a szomszdos mezben vlasszuk ki a szzalk (%) mrtkegysget! A belltsok jvhagyshoz kattintsunk az OK gombra!
Cilttgory
h.t.kgr ound
810ck
Ty. .
Font~f.J.mlly :
80x Border US! Positioning

Extenslons
Font-size:
Font-!ityJe:
=-_~~ (" ~
Font-wclght:
font-viJ,rlanl: ; . - -..:...,
Une-heighr.
Font-decoration:
O underline
D overlIne
=-_--'-':..> 1i I"
Font-uansform'
Color:
r----,
o none
O line-through O bllnk
A mainContent di V rsz szvegnek betmrete ezltal valamivel kisebb lett. Br 100 %-on is megfelel mret lett volna, ez a kis vltoztats megmutatja, hogyan tudunk mdostani brmilyen betmretet a Dreamweaverben.
See Umbria with us
Jr"
.'
~"11

Come enJoy the vacation of
ill
Ihtimel
We do the wo rk and you haye the fun l Our tour through the hill lowns of Umbria ls unequa!led . For two weeks, )'Ou'lI. enjoy wony free pamperlng.
Ewry d~, ZI (fcllelems breakfest and dinner (with wine) ar. induded. lunch ls on your own. ThIveI in air conditIoned buses on ten wonderful doy trips to the surrounding beautiful, hlstoric hill towns.
Oor !uxury hotel aceommodations indude 11 hot tub, pool, and nellrby by night time entertainment . Your weekend (s free to u wish, bul you r meals are atways provlded by our - - - - - -________. .J schedule as yo ________________________ ..
~( ~.
~'
Kattintsunk a File > Save gombra amentshez!
22
A Code nzet, illetve a Code and Design nzet hasznlata

1
Ha az elz lecke befejezse utn bezrtuk az umbria.html oldal unkat, az dvzlkperny bal oldali hasbjban tallhat Open a Recent !tem (Nemrg hasznlt elem megnyitsa) terleten kattintsunk a lessonOJ > umbria. html elemre! A szveg
els
2 3
bekezdsben vlasszuk ki a w do the work, and you have thefon! sort! )!
A szerkesztablak tetejn lthat szerkeszt eszkzsvban kattintsunk a Code gombra (>
'"'
~:
(d l .... idoo".al nConterlt ")

(h l> YQJ
I...l,.....
hI:Na to.
run.
~. do the
.,..-k.<..+-o
,
... ..,...
(P )( i-V R"C"' '' /I .o9 .. LI ,.tl . . 1 .
/i tcI I OlH'I I II tOlm.j PQ"
o.r
o l too" h i tour
(>
cj
worry-free 90
~lno . < p )
97 _. ___
( p) EV4M"\I dC>.J , a delic:lous breokfost orn:j dlnner ( _ ith !;vo . ,ncs.rful d!JI.I tr l ps to tn. SlJN"OUndlno b.outl fui, hi s <p>Our- lu,xur", hotel oc~tiCH'l. lnelud. (I hot tub,
~ M~~~~ . ,. hm_~ b ut
___ _
,__ . ~
___ ., _
~"._~ ,__~~ ~. ~
__
Brmit vlasztunk ki a dokumentumban, az Code (Forrskd) nzetben is kivlasztdik. Az egyik nzetben vgzett vltoztatsok ugyangy megjelennek a msik nzetben. Nha hasznos lehet egyszerre ltni a Design (Tervezs) nzetet s a forrskdot. Ezt teszi lehetv a Code and Design (Forrskd s Tervezs) nzet. 4 5
) gombra (Osztott nzet), gy osztott A szerkesztablak eszkzsvjban kattintsunk aSplit ( kpernyn, egyms mellett lthatjuk a Code s a Design nzet mkdst!
Helyezzk az egrkurzor mutatjt a forrskd- s a Design nzet kztti hatrvonal ra, s vr-
""
~~
rt
I-i.
J:t..
YOU ~ the fun . I.J. do the L'Or'k. <,1h1> (p >(I-.c) Vf; .... . . /l /ltG I I~Il I-to.'I. j P9 o l t."h ilt t own" . ,dt,t.- - 2e0 a n. i ljlht." ' !50" c(o. .:a~ fL "l l f.t l_ 1 ~ 1 0..- tour throuoh tn. n i tt tOWt"llJ of u.brio ls u!"I.quoll
oQ"ll)
( di v i.,. .. .aIr.Conter't")
..oN'v-fr P<I'I*"lng.< p ) <p>EYr\I O\I. o d.t l clou. bN;Qkfast ond d l lY'lW' (_ i tn . Ine) or. 1nc: lucMd . LUI"'ICh 15 on yo ....... 0M'l . T t en tKJnCIr ful dely trlp. to the surroundir'19 beoutlful, h l 5tOf"' i c: n i lt t Otlrl <Ip) (p>Ot.r luXI.II"1J hot.1 occ~t l ons InchMX o hot bb, pool, ond ~rbl" b,I nl(jht t l_ eflt .... to l r'IIM
~~U .L~,~~
__________~
See Umbria with us

You have the fun. work.
the
of a Iifetimei Our tour through the hill towns of
junk, amg rvltozik vzszintes svhz kurzorr ( )! Ennek segtsgvel igaztsuk gy a kt nzet hatrvonalt, hogy egyenl arnyban foglaljk el a kpernyt! 6 Amennyiben szksges, jelljk ki jra a w do the work, and you have the fon! mondatot a Design nzetben, s gpeljk be helyette a You have the fon, and we do the work! sort! Megfigyelhetjk, hogy a mdostsunk azonnal megjelenik mindkt nzetben. A szerkesztablak Code nzeti rszben keressk ki a worry free szavakat; trljk ki a kt sz kztti szkzt s ptoljuk egy ktjellel H, hogy a worry-free vgeredmnyt kapjuk! Megfigyelhetjk, hogy a Design nzet mg nincs frisstve.
23
Kattintsunk brhova a Design nzeten bell a forrskd-vltoztatsok megerstshez s az oldal frisstshez!

" code
(hl>
~-
'
llt~
our on
()
el.
03
05
-orry-''''''
00
.7
you ~ the run . w. do th4t 1/Ot"k . <!hD ( p )< I ~ src.-, ./l ~s/i tol ion-h l\ t-tQW'l . jp<r o l t "' hi II f.t i . . 1 IM do the .,,-k ond IJOU Mo ve the (un i ()I.r tour t PO!lIPer'" 11"'oQ. <Ip) <p >E",er"\j do\J. o detl c: ious breok fos t ond d lnner- ( _ iUl tan .onder' fyl dOIJ tr !ps to tN s~lnv beautl(ul , h l (p)().r I ~ ho ta \ :: ht lons lnc lude a I"Iot tub ,
<dl ... 1d- "t;Oi"",orll. " t " )
Megjegyzs: Amikor Code nzetben dolgozunk, a Dreamweaver vr egy kicsit, hogy biztosan befejeztk-e a mdositsokat, mieltt frissten a Design nzetet. A mdosts befejezst gy tudjuk jelezni, hogya Design nzeti ablakba vagy a Refresh Design View (Design nzet frisstse) ikonra (('!) kattintunk a szerkesztablak eszkzsvjban.
A vzszintesen vagy fgglegesen osztott nzetek hasznlata

Zoom ln Zoom Ou t Magnlflcatlon Flt Selectio n
Flt Ali
Fit Wldth
Cod.
.,I
Split Code Design Code and Desig"
Amikor a Code and Design nzetben dolgozunk, vlaszthatunk a vzszintesen vagy fgglegesen osztott kpernynzet kztt. l Vlasszuk ki a View > Split Vertically (Fgglegesen osztott) nzetet a legrdl menbJ! A fgglegesen osztott Code and Design nzet pontosan ugyangy mkdik, mint a vzszintesen osztott. Az egyik nzetben vgbevitt vltoztatsok azonnal tkrzdnek a msik nzetben is. A Code and Design nzet azonban tbbet jelent ennl. Hasznos lehetsgeket knl a forrskddal folytatott munka megknnytsre.
d.'" eonlo .,.. ,
thOI
col~ ~CIOOt'
.1 11 "-CII I'! . ou c;;JO "~ thiS *-'Q 1" I f you .ar! t the .ctlr"lOont_nt d ' ... 9 t-.xt' \0 r III 'n. - .\d4Ib<Jrl ~ .-...o the:
C(N'\tllt\t ln -; lcMbor- ' ~S' /
You have the fun. work .

Come enjoy the vacaticn of a lifetime! We do the werk and you have the fun! Our tour through the hill towns of Umbri. is unequalled . For two weeks, you'lI enjoy worry free pampering. Every day, a delicious breakfast and dinner (with wlne) are Induded . Lunch is on your own . Travel in air conditIoned buse. on ten wonderful day trlps to the historic hill towns .
Our luxury hotel accommodations indude a nearby by night time entertainment. Your schedule as you wish, but your meals ere
41
42
.,
)
tha t PO'J I no i II' u-.e ~_ 'n..de th4t dili box ond .arQln la U'J09 apoot OI.lt$lde t M dl ... bOJt
poddir.g :
20px; / . tl
"
fon t-s ize: Q at;

o IFI)t,l. tHdr' - (oo t.,.. {
poddlng:
4..
4:5
lepx (I 2'9pX j /~
46 47 48
4g
th'. poddu'9 IIOteN--' the teft at I~t o f tI'W .I_..-b Ir> tM d I vs tha t appear' CIDO\r. I t . . / boekgraund: a1ft;
) .t.oCot F,xt. tw.r . too t ... p (

_ g i n : 0;
II
;Z:"'Oino tt'4
lillQlr"9ins ol ltl!a fI"a~ ~ t ...nt l "

trI\l foot ... "'III OV'Old ~
po.Jl1blll \ IJ o f
~Q,J., ~IICIP'I-e
50
a Spno:.. bu..-en dl ...... / DOdd i 1"9 : , 0px e; /+- podd I "9

0tI
tn .
~.
l...,,~ .,11 c:NIQt. Jl.Ist a:. the tto.& MIr9'n
would hCWe , \NIut , he
aor"9ll\
:s,
~llops. 'S~ .. /
eo lor":
24
Kattintsunk a Code gombra a szerkesztablak eszkzsvjban!

Zo om ln Zoom Ou t Magnification Fit Sel. t tion Fit II Flt Width
~-
:Ie~
\::leO OXO
\:' XO
Code and Design
Vlasszuk ki a View> Spfit Code (Osztott forrskd) nzetet! Ez a lehetsg az oldal forrskdjnak ktfle nzett jelenti meg egyms mellett gy, hogy egymstl fggetlenl mozoghatunk a forrskdban a kt kpernyrszen . A Spfit Code nzet hasznlatval az oldal egyik rszrl a msikra msolhatunk s illeszthetnk be elemeket. Az egyik Sp/it Code rszen eszkzlt brmilyen vltoztats a msik Sp/it Code rszen is megjelenik. Ahhoz, hogy a forrskdot jra vzszintes kpernyosztsban lssuk, vegyk ki a pipt a View > Sp/it Verticafly jellngyzetbl! A nzet vzszintes elrendezdsre vlt. A Sp/it Code nzetben vgzett mveletek, mint pldul a kdszerkeszts mindkt ablakra rvnyesek, s lthatv vlnak a Design nzetre tvltskor is.
cl
"l
,.
7
) . fltUt (/- thi. clo. . c'.ln be lU<eO to (Ioot o .I . .~t ,., t 1(\ lJOVr pog.. t/ (t oot: 'ef t; -.or~ I rH"gI"I t : 9px; } . c:li<lrftoat U"l1. don Jhould W p l ed CWI (II d . ... or br~ .I.....-t ord It'IooJld be th. ( i rY;J M / Qrt: tn.
<r
.',,_en'
10&4 o i
(I
CO'l\QI,.... thCIt t:hould f ui l y <:Gr'ltoln CI !toot . /
c:t egr :both ; h. igt.t :0 ; fon t-s ize: Ipx;
tln.-n. I9ht: 0px;
~ ~
..b l. ~
Ili,.
;II
la
22 23 24
View ~ Zoom ln xZoom Out XMagnification ~

Flt Selectio n Flt Ali Rt Width Code
v' Spl it Code
XO
' XO
\:il'XO
Design Code and Design
25
Im- COIIoI ~ SplIt lfill O"ion l r0
u ... Vi...
fo.J gJ LM code
TItIt: IUmbrii HilI Tow.n Tou",
J!t..
co).
C 0. ~
I>~ ~
CMelt P...
~
cl
< ! OOC TVPE Mml f'l.&... IC ._~~~~ ~~!O XHTt1i.. 1.13 TI"'OnS I t I onal / /EW "h t t-p :/I-. . .-J . orQ /TR /xht'l'l I IIOTO r xht.t 1 tr-oTIs l tl ono l . dtd" >
- ,. ...
7
3 4
{h tlr. t )(~ l ~ http:/ 1_ .-.3 .or'"Q / I999hcn ta \ .. > <hood' <M tCl http-eqvl y"'''Cofl tent -T~ cont . nt .. - t8 )( t l'h tllll j c: ~ r"et UTF-8"
(ti tI. >OIIbr'lo HIII TQWfI T()I.IJ" lII <!ti U a )
/>
~I
"
<1-bodv
<. t1,jl e li.IP*"' "t llx t /c: u ">

( fOl'lt: ' 10011' Vvdorra , Arial, He l vetlco , 1I:o::m s-ser I f; bodt.Wound : -FFF : IlilGl"g i n: e ; l ot I t '. Qood pr O<!tl~ t o urOl the -011'1 0I"Id po:tddl ll9 of the bodI..I. l ~t to CICCOUI'It (Of" d l "~";nQ br~' d.. 1aul\. - / podd l rKJ: e; t. x t-al lgn : cen ter; /. \1"11. c.nt ..... tn. cmt.:;Jl .....' ift II: ~ bt"OHIItf''' . The t~t tt-\ n t to t~ lart ot 19".-1 de- fCJ.I1 t I n " "
11 12 13
cl
,
9
<IDOCT\'P ht!lll PUBl i C (~ t ", 1 xa l n. "ht t p: 11_
M /t.UJC f !p"'!D -
. 3 ,or g/\r;RQ /xh h, l " >
XHTML 1.13 r r<lm'i t iOl'\a l /lEW '' http ://_
.!Ii3 .ONjI /TR /xh t. II /O TO /ICht:a II- tr'on., t i onal .d t d" >
<ht!od )
Gne to nt~-eou l v. ~Con t Qn t-Type cont~t . ~ ~tlh t. l; chars.t-uTF-S - /) <t l t l _ >U.brlo Hitt Town Tcxrs </tltl _> tv l _ typ e .~ t9x t /C U >
~
II
-
"
O
<'bO<>,;
( ront : I OO~ V$"dono , Aria l, HIIl ve tl co, sons- sli(' i fj back WOUl"\d : -FFF j IIIar"Qin : 0 ; , ,, ; t ' s 900d pt"~tice to :::... 0 tn'; 1IOr'9 , n ClrIO po4d'",,; ot tM b04Y .I_/Wint too IXCOlJnt f ".... dl (fe-I rlg tor~' defOUHS"/ poddi ng : 0; tQK t- o l i Ql'l : un ter j I- this r.:>tI'\ \ ers t,.".. cont"I.t>U' ln rE: 'S. br~frf"'s . Th4 tnt l!> then s.t to tn. le ~ t QII9"'*d doi rGl~ l t 1..-, t~ to j sa I ott. tQf' "'-; co l or": -000;
"t
le
,1,1
<ll
'" " "
" 12
13
c
}
"*"'
':
-;
. Ii
10
, t..oCo I F i ,.;l~ ItC(lnoo i r.Qr {

~~ .
:WOCoJFlxUHdr> <dIVifitont.aIMD <dlvlrNlnContf!nt> <p>
'BK 112 HC
U"Ic~
S.o Ulf-8
5 6
Kattintsunk a Design gombra a szerkesztfellet eszkzsvjban (
)!
Kattintsunk a File> Save gombra! Amennyiben folytatjuk a leckt, hagyjuk nyitva ezt a fjlt a kvetkez rsz feladatainak elvgzshez; ha nem, kattintsunk a File> Close (Bezrs) menpontra!
A Properties panel hasznlata

Br a Properties panel csak egy a Dreamweaver paneljei kzl, mgis klns figyelmet rdemel cugalmassga s a webszerkeszt k munkjban jtszott kzponti szerepe miatt. A Properties panel lehetsgei a pillanatnyi kijells fggvnyben vltoznak. Ha pldul egy szvegrszletet jellnk ki, a szvegre vonatkoz tulajdonsgok panelje jelenik meg, amivel a szveg formtum t s elrendezst szerkeszthetjk. Ha kpet jellnk ki, a kpekre vonatkoz Properties panel megmutatja a kp magassg- s szlessgrtkeit, valamint a teleptett grafikai szoftvereinkre - pldul az Adobe Photoshopra vagy az Adobe Fireworksre - vonatkoz hivatkozso kat. Ebben a gyakorlatban megnyitjuk a Properties panelt, s ttekintjk a leggyakrabban hasznlt lehetsgeinek mkdst.
Megjegyzs: A Properties panel B s I gombjai a hagyomnyos boldface (flkvr) s italics (dlt) bettpusokatjellik. Tnylegesen a B ikonhoz a <strong>, az l-hez pedig az <em> (emphasis, mint hangsly rvidtse) cmke tartozik. Egyes bngszk a <strong> cmkt flkvrknt az <em>-et pedig dltknt rtelmezik, ez azonban nem trvnyszer. t:ppen ezrt rdemes lehet CSS-szablyokat ltrehozni a <strong> s <em> cmkhez is, gy biztosan elrjk a kvnt vgeredmnyt.
1 Amennyiben bezrtuk az elz gyakorlatban hasznlt dokumentumot, nyissuk meg jra a File > Open Recent> umbria. html menpont kivlasztsval! 2 3 Ha nem lthat a Properties panel a szerkesztfeller alatt, vlasszuk ki a Window> Properties menpontot a megjelentshez! A szerk=tablak als szln tallhat cmkevlasztval vlasszuk ki a <b o dy . twoColFixLtHdr> cmkt! A Properties panel ablakt HTML s CSS nzetben is hasznlhatj uk. A megjelentett tulajdonsgok aszerint vltoznak, hogy a HTML s a CSS gombbal melyik nzetet vlasztjuk ki. A Properties panel ms belltsai, mint a Bold s az Italic gomb, kapcsolknt mkdnek: az els kattintssal kivlaszthatjuk, a msodikkal kikapcsolhatjuk ket. Az aktivlt gomb krl keret jelenik meg a panelen.
26
css
F'ormlt ... 10 lNOM
(~t= ===~~
Tuget
= ..
'.,oe: Prope"I" ...
)!
Ln ICt.m_
0]
PItOf(RnES
IfTMl
Tug ..ed Rul< ( _
CSS )
Edit Rult
Page Properties .
Kattintsunk a HTML gombra!
5 A szerkesztablakban vlasszuk ki a For tUJo weeks, you'!! enjoy worryjree pampering mondatOt! 6 A szveg dltbets kiemelshez kattintsunk az I ikonra a Properties panelen!
We do the work and you have the fun! Our tour through the hiU t owns of Umbria is unequalled. For /wo weeks, you'lI enjoy worry.yree pampering.
Kattintsunk a panel CSS gombjra!
8 A cmkevlasztban vlasszuk ki az <em> cmkt!

- - - Ca$cade - - body
.rwoc.olrlxltHdr 'cot\tainer
" .(WOColfhtltHdr .tm&lnContent

-- - NewRl,llt - - -
......
...
I
- - - Appty Class - - -
<Remove ClASS>
dtv~
fltJft fWOCoI FlxltHdr
Vlasszuk ki a <New CSS Rul e> szablyt a Properties panel Targeted Ru!e (C!zott szably) cm
legrdl menjbl!
SetKtor Tvpe:
f
(
OK
Cancel
ChooH contoXlUlI .electo< 1\'Pe lor your css rvle.
~
)
I Compound (based on your selectio n)

SeIKtor NalH:
choose
of
ernr a name tor your seleaor.

!.twoCOIFh(ltHdr '(ontal"er 'malnContent p em
ITh ls sel.ector name will appty your fUle to
aH <em> elements
that are w l.thln any <p> elements iNt are wlthln any HTML element's wlth ld -malnContenr" Iha.t are wlthln any HTML elemenIS with ld contalr'lerLoe
(
lull Otflnitkln:
Less Spedflc
)(
More Speciftc
Choose ..... r. your rule wtn be denned.
l (ThIs document only)
Hol l'
27
10 Kattintsunk a men aljn tallhat Edit Ru/e gombra! Ekkor megnylik a New CSS Ru/e (j CSS szably) nev prbeszdablak. A szelekrornv-vlasztshoz a Dreamweaver a kivlaszts nak megfelel nevet ajnl fel, amely megmagyarzza, hogy az adott szelektor mire vonatkozik.
Megjegyzs: A CSS oldalszerkezetek mind hasznlnak egy, a body elemre vonatkoz osztlyt. Ebben az oldalszerkezetben a body a .fwoColFixLtHdr osztlyhoz van rendelve. Amennyiben tbbfle oldalszerkezet kombincijt szeretnnk hasznlni - pldul hromhasbos honlapot kthasbos bels 01dalakkal-, a Selector name (Szelektornv) legrdl men alatti vlasztgombok kzl a More Specitic (Specifikusabb) bellts hasznlata javasolt. Ennek a knyvnek a leckihez azonban a Less Specific (Kevsb specifikus) szelektornvlista is megteszi.
II Kattintsunk a Less Specific gombra, hogy a Se/ector Name cm svban a #mainConte n t p e m nv jelenjen meg! 12 Kattintsunk az OK gombra! 13 A sznvlaszt ablakban vlasszunk j sznt - a fehret kivve brmelyiket (pldul az bra ltal illusztrlt #OOF rtket)! Kattintsunk az OK gombra!
C.tegory
Type Background Typo
Font-famtJy:
font-slzc:
Font-style:
8Iod
Box
Border list Pos lt.on lng Extenslons
-"'r;,.- :1 ~J'
LJn......'Vht:
font-dK:oratlon: _
J.: f
O bUl'lk
Font-tWftht:
font-vMlant!
G:: ...
l:..
r7'
px
und~/UTle
O OVt!,lfrte: O 1I11f:,rhrough CJ non.
A kiemeIt mondat szne megvlrozott. A stlusszablyok ezltal j szabllyal bvltek, amit az sszes, main Content div. rszhez hozzadott szra, mondatra s bekezds re rvnyesteni tudunk, ha a hangslyozni kvnt szvegrsz kijellse urn a Properties panel J ikonjra kattintunk. Eddig a Properties panelt kiemel t szvegrszek ltrehozsra s arra hasznltuk, hogy j CSS-szablyokat adjunk hozz a stluslapjainkhoz. Ahogy elrehaladunk a knyv leckiben, szre fogjuk venni, hogy a Dreamweaver a szveg- s kpszerkesztsre hasznlhat paneleken kvl sok ms fajta Properties panelt knl . Minden, szerkesztablakban kijellt elemhez trsul egy hozz illeszked Properties panel, emiatt a legtbb webtervez llandan nyitva hagyja a panelablakot a munkja sorn.
,rwoCo!FiltUHdr 'ttu~r ,lwoColFlxllHdr ,nuder hl .rwoCoIAxltHdr Isldtbarl

.twoColFlxltHdr .m.t lrtContt nt
.cwoColAxltHdr tfoolef
.twoCoIfhlU Hdr "ooter p
,flttt
.flt lft
~ ...)
~
lY
28
Oldal elnzete Live nzetben

A Live lehetv teszi, hogy az oldalunkat egy Dreamweaveren bell mkd, l bngszablakban tekinthessk meg. A Live nzet tovbbi lehetsgekkel is rendelkezik, amelyeket a ksbbi leckkben fogunk megismerni. l Kattintsunk a Live View gombra a szerkesztab lak eszkzsvjban! Az F I l billenty (Windows) vagy az Option+F II (Macintosh) gyorsbillenty lenyomsval is tvlthatunk Live nzetbe.
.. !!D u.. Cod,
lilit:
IUm.... Hm Town T... "
I ~t.
e.
A szerkesztablak nzett l bngsznezet vltja fel. Amennyiben az oldal linkeket, pldul JavaScript elemeket vagy Flash mozgkpeket tartalmaz, azok a Live nzetben aktvak lesznek. 2
Az Edit (Szerkeszts) mdba val visszatrshez kattintsunk jra a Live View gombra, vagy ssk
le ismt az FIl (Windows) vagy Option+F II (Macintosh) gyorsbillentyt!
Oldalak elnzete bngszben

Br a Dreamweaver remekl megjelenti a weboldalunkat a szerkesztfel leten s Live nzetben, az oldalt mindig fontos ellenrizni egy vagy tbb bngszprogramban is. A Dreamweaver lehetv teszi, hogy brmilyen, a gpnkre telepten bngszben megnzhessk a weboldalunkat, miutn a Prefer:ences (Belltsok) menpontban beazonostottuk. l Vlasszuk ki a File> Preview in Browser (Elnzet bngszben) > Edit Browser List (Bngszlista szerkesztse) menpontot! Megjelenik a Preferences (Belltsok) prbeszdablak a kategrialistn kijellt Preview in Browser elemmel.
CAtcgoty
Preview ln BrOWlcr
General A.esslblllty AP EI~ment.s

Code Coloring
[!J
EJ
( EdiL .. )
Code Formcn
Code Hints Code A.twrtting
Copy/~te
CSS Sfytu Flle Comp~re F'lle Types I Editors Fonu

HIOhllghtlng
Oefauh5:
Invislble EJements
New Document
SI..
Status Bar
O Prtmlry browser O Secondary browser
Options:
O Preview uslng temporary hle

Selection this optlon will utalt. temporary copy for
prl!Vlew and Hf'Wr debuQ9lng. To update the docurnent dlrectly pleue uncheck Ihls opllon.Note that deselectlnSJ this optlon cto.s not appty tO prevMewtng XSLT, wwtllch atways use .. temporary file.
VaJlcbtor
...1.
( can"l) (
()ol
2 3 4
. Kattintsunk az Add (Hozzads) gombra ([B), hogy j bngszt adjunk a listhoz!
Az Add Browser (Bngsz hozzadra) prbeszdablakban hagyjunk minden tintsunk a Browse gombra!
mezt resen, s kat-
Amikor megnylik a Select Browser (Bngsz kivlasztsa) prbeszdablak, vlasszuk ki a listrl a sajt bngszprogramunkat: A Firefox kivlasztshoz a Windowsban keressk meg a Program Files > Mozilla Firefox >
29
firefox.exe fjlt! Amennyiben a Firefox nem a Program fj lok kz van elmenrve, keressk meg a szmtgpnkn!
Az Internet Explorer kivlasztshoz a Windows ban keressk meg a Program Files Explorer> iexplore.exe fjlt!
5 Vlasztsunk vglegestshez kattintsunk az Open (Megnyits) gombra!
>
Internet
A Safari kivlasztshoz Macintoshban keressk meg az Applicatiom/Safari alkalmazsknyvtrat!
Megjegyzs: Ha ms bngszt hasznlunk, ugyanezzel a mdszerrel tudjuk a listhoz adni. A tesztels szempontjbl rdemes minl tbbfle bngszben megtekinteni az oldalainkat.
6 Amennyiben szksges, az Add Browser prbeszdablak Name (Nv) mezjben adjuk meg azt a bngsznevet, amit a listn ltni szeretnnk, pldul Firefox, Internet Explorer vagy Safari! 7 Pipval jelljk meg a Primary browser (Elsdleges bngszprogram) lehetsget, hogy meghatrozzuk, melyik bngsz nylj on meg, amikor az H2 (Windows) vagy Option+F12 (Macintosh) gyorsbillentyt letjk az elnyben rszestett bngsz elnzethez! Kattintsunk az OK gombra!
8 9
APreferences prbeszdablakban kattintsunk az OK gombra a belltsok befejezshez!

ssk le az F 12 (Windows) vagy Option+ F 12 (Macinrosh) gyorsbillenryt, hogy megtekinrhessk az aktulis oldal unkat az elsdleges bngszben! Ha mg nem menrettk el az oldalt, a Dreamweaver emlkeztetni fog, hogy tegyk meg.
c.tegory
General
PrevJew ln Browser
AccesslbJllty Al' Elemen.U Code Colorlng Code Format Code Hints Code RewrtttnQ Copy/P.ute CSS Stylu File Com~(e RIt! Typcs J EdltofS Fonu
Hlghllghtlng
rl El
Internet Explorer Navigator ] Opera
Ed .... )
~-w ~~IF ,, ~==~ __~l ~~. ~

Safarl
OtfauJu:
li Primar; brownr
O Sccondary blowsef
InYlslblt Elements
New Oocument
Site Status. Bv
VaHd~tor
Op'Lons:
O PrtvIew using temporary file

StSectiOn this option will (nie. temporary copy for prevtew and Strvf.( debugglng. To update the docUmtM dlreclly !)itue uncheck this opiion.Hote that deselecting this option dOH n01 appty to prevte:wtng XSlT, wtlkh .MayS USI a ttrnporary fUt.
l,
( ...1. )
( Ca.ul ) ( .... .
-i
Ha a szerkesztablak fldgmb ikonnal jellt Preview/Debug in Browser (El/JnzetlHibakeress) gombjra (C).) kattintunk, ms, nem elsdleges bngszben is megrekinmetjk az oldalunkat. 10 Miutn megtekinrettk az j weboldalunk elnzeti kpt, zrjuk be a sza a Dreamweaverhez!
bngszt,
s trjnk visz-
Gratullunk! Elksztettk az els weboldalunkat a Dreamweaverben. Egy Dreamweaver CSS oldalszerkezet segtsgvel mdostottuk aszveget, megvltoztattuk a szneket, kpeket, s j CSS-szablyokat adtunk az oldalhoz, gy rvid id alatt ltrehoztunk egy sznvonalas megjelens weboldalt. A Live nzet hasznlatval megtekinrettk az oldalunkat bngszben. Meggyzdhettnk rla, hogy a Dreamweaver egyesti a hatkonysgot az egyszer kezelhetsggel.
30
sszefoglals
sszefoglal krdsek
l 2 3 4 5 Hogyan vltoztatj uk meg az oldal sv httrsznt? Mi az els kt lps, amit meg kell tennnk, ha j oldalt szeretnnk ltrehozni egy CSS oldalszerkezetbi kiindulva? Nevezzk meg s rjuk le rviden a szerkesztfelleten vlaszthat, ngy klnbz D reamwea ver-nzetet! Miben klnbzik a CSS Styles panel kt mdja, az AI! s a Current? Mi trtnik, ha vltogat juk a HTML s CSS nzetet a Properties panel en? Mirt rdemes kztk vltani?
sszefoglal vlaszok
l Hasznljuk a leckben megtanuIt mdszert a httrszn tlltsra! A CSS panelben vlasszuk ki a .twoColFixHdr #sidebarl CSS-szablyt! Kattintsunk az Edit gombra, s vlasszuk ki a Background kategrit! Hasznljuk a sznvlasztt az j szn kivlasztshoz! Kattintsunk az OK gombra!
Mieltt
2 3
elkezdnk vltoztatn i az oldal megjelensn, a szvegen vagy a CSS-szablyokon, adjunk j cme t az oldalnak, s mentsk el!
A Design nzet bngszszer krnyezetben jelenti meg az aktulis oldalt. A Code nzet megmutatja az oldal forrskdjt. A Code and Design (megosztott) nzet egyszerre mutatja meg a Design s Code nzetet. A Live nzet egy l, interaktv bngszablakba helyezi az oldalt.
Az AIl md az aktulis oldalhoz kapcsold sszes stlust listzza, belertve a <head> cmkbe gyazott s a kls stluslapokban tallhat stlusokat is. A Current md rszletesen megmutatja, hogyan hat az oldal stlusa egy kivlasztott oldalrszre. Rszletes stlusIistt ad a Rules svon rkld szablyokrl, s Properties svo t rendel a kivlasztott stlushoz. (Ezzel a funkcival a 2. leckben fogunk rszletesebben megismerkedni.) Mindkt mdban lehet stlusokat szerkeszteni.
5 A HTML s CSS nzet kztti vltsi lehetsggel HTML- vagy CSS-tulajdonsgo kknt jelenthetjk meg a kivlasztott oldalrszeket. Egyes esetekben szksgnk lehet a HTML-tulajdonsgok lthatsgra egy link beszrshoz vagy egy kpalrs bevitelhez. Mskor inkbb a CSStulajdonsgokat szeretnnk megjelenteni, hogy egy meglv CSS-szablyt tudjunk alkalmazni, vagy j CSS-szablyt ltrehozni a kivlasztott elem rszre.
2 Stluslapok hasznlata
About Here and Back Travel

Meet our friendly staff
If'.
~
". .
''lp
When you call our office in New York City, you will be connected to one of our experienced, helpfui and friendly staff members. This ls Here and Back Travel. Elaine is the President and CEO of Here and Back Travel. She has 20 years experience in the travel industry and has traveled extensively to research the hotels and restaurants we recommend. You may lind her answering your phone calls or checking out a recommended hotel on Santorini. linda arranges ali our organized tours to make traveling easy for those of you who IIke to have ali the arrangements taken care of in advance. Linda is here to make your trip easy and restful so you can enjoy every minute.
The view from our offices ln New York City.
Tours for people with spedal needs su ch as handicap access or special dietary needs are
Ebben a leckben megtanuijuk hasznlni a Dreamweaver stluslapjait (CSS - Cascading Style Sheets).
32
2. LECKE Stluslapok hasznlata
A lecke ttekintse
A kvetkezket fogjuk megtanulni: CSS (Cascading Sryle Sheets)
Kls
stluslap hozzrendelse az oldalhoz
j CSS-szablyok meghatrozsa Stlus alkalmazsa az oldalra Egyedi osztlyok ltrehozsa Szrmaztatott szelektorok hasznlata Oldalszerkezeti elemek ltrehozsa s talaktsa Nyomtatsi stluslap ltrehozsa
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessons mappt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a Lesson02 mappt!
Megjegyzs: A leckefjlok letltse az Elinduls fejezetben tallhat, a 2. oldalon.
A lecke sorn a kiindulsi fjlokat j nv alatt fogjuk elmemeni, hogy megmaradjon a mdostatlan llomnya merevlemezen, ha vissza kell lltanunk az eredeti llapotot.
Az Adobe Dreamweaver CS4 klvl
eszkz: kpes knnyen megjelenteni, meghatrozni, alkalmazni s mdostani a stlusokat szmos klnbz mdiatpusra, belertve a kpernyt, a nyomtatt s a mobi!eszkzket.
CSS-kezel
A ksz dokumentum megtekintse

A dokumentumot, amit a 2. lecke vgre fogunk ltrehozni, megtekimhetjk egy bngszben. l 2 Nyissuk meg a Files panelben a lesson02 mappt! Vlasszuk ki benne az about-finished.html fjlt, majd ssk le az F12 (Windows) vagy Option+ F 12 (Macintosh) gyorsbillentyt!
Megjegyzs: Az aboutfinished.html oldalhoz a mystyles-finished.css stluslap van hozzrendelve.

AOOut Here and 8ack Trnvel ,. . ,.

Whe-n YtIII e.tl DU' 0I'I'k0t YQI1Ir. Cf(y, you MIl bI CIDI'II'Ot(lIfll ro _ MllII'uI ~ Irfe<d.,. ltIdf rntfI'!!Io!t'$. TNs", H9A .... e.d: T........
B-.. " tf'e ",",dMI: and CfO Dl tWl!" _ 8l< ,_ ~. s.... ..... 2OyUtS a~ " tf'e l1Ir\'eI ~ ar_~
~""" IO _tl'>el'llnl1oand~"
_.
iti ,.,..
ol
ONt' e )(;)C<ko ~,
Ywn..v 1i'lCl hH ~"G'.,.,..p/'!Ilnl'tillbOl ~ _' ~ Il0l.'': on s._.IIl.
.\10
L.JtOCIe '/f'a1lQH al! fNI ~ lOU'1 10 ~ _ _II1I;I e.uy lot II'CiIoe d you ..tIO ,:q, to ...... ali the ....~ UMrO ~ ol ..:v.lIl(2. U~ 1 htre to ~e 'f{Nt UlI' e.., _ $ ~ l1l:I you cert V1JOV _tV m l!w.A
Taln 101
lOOfCI.Il
~ It
a/w'IMy roetOI ...
tIft<S lUCI'> _ "'1'(1100 KOr'Y ot \Jft(I,I's f~. to MC 100. IQ ln UJtCl.I you ....... . ny Ptf1IrIOnII rl'f,"'~ _.
~
oo1U'1
Jtio'> t, ... ~ ~ OlN """ .
you ~ .
,., thr
bI:St; ~1IoII.fTVI!;_ ~ IIr!!I'CI, 11'11" ~H, f~, lond CWft ar, m~ ....: bila! ft!UiL
ltllOd';tior> to mollo!og ""..

~
V-
III!I
~J_.~ ~l'otIp"'l'lh ~ I~~ KlYCV
WIJ! til
W"-'I
~ ~
you _
II.
33
3 Az. oldalt megtekinthetjk az elsdleges bngsznkben. Az. oldal elrendezse, a szvegek trdelse s formzsa mind a stluslapokkal van kialaktva. 4 Zrjuk be a bngszt, s trjnk vissza a Dreamweaver 2. leckjnek megkezdshez!
Kls
stluslap trstsa az oldalhoz
A modern webtervezsi gyakorlat szerint a stlusmeghatrozsokat legjobb kls stluslapokban trolni. ]ellemzen a szjt sszes lapja a megfelel kls stluslaphoz van trstva. Ez a gyakorlat lehetv teszi egy egyedi stlusmdosts elvgzst (pldul a < hl> cmke sznnek megvltoztatst), ami a teljes szjton rvnyeslni fog. A Dreamweaverben rendkvl egyszer az egyes oldalakhoz kls stluslapot trstani. l 2 Amennyiben a Files panel nem lthat a kpernyn , vlasszuk ki a Window > Fi/es menpontot! Nyissuk meg a lesson02 > about-start.html fjljt a szerkesztablakban gy, hogy dupln a nevre kattintunk a Fi/es panelben!
......,
ltuol101
lI!VSf'piu.tn
l"'!lf l
........ ..... ...

ItnontlS
~ '" .........
1I1f1br1'.IIC$I ItnGftOl
Megjegyzs: A DW C/B o/da/unk Fi/es paneljben tallhat fjlok nem biztos, hogy teljesen megegyeznek a knyv filespanel-iIIusztrciival. A leckkben elfordul fjlnevek azonban pontosan megegyeznek a lecke fjlok neveivel.
Amint lthatjuk, az oldalon megvan az sszes alapvet tartalom - kpek, cmek s bekezdsek - , de nincs igazi stlusa s oldalszerkezete. Ebben a gyakorlatban az oldalrendezshez s stlusmeghatrozshoz szksges elemeket egy elre elksztett, kls stluslapbl fogjuk elrni. Mieltt elkezdnk dolgozni az oldalon, hozzunk ltre rla egy msolatot! 3 Vlasszuk ki a File > Save As menpontot, s mentsk el az oldalt about.html nven a lesson02 mappba! A kvetkez feladatunk, hogy kls srluslapot trsrsunk a jelenlegi oldalunkhoz.
4 Amennyiben szksges, vlasszuk ki a Window> CSS Styles menpontot! A CSS Styles panelen kattintsunk az Attach Style Sheet (Stluslap trstsa) gombra (_)! 5 A megjelen Attach External Style Sheet (Kls stluslap trstsa) prbeszdablakban kattintsunk a Browse gombra! A Select Style Sheet File (StluslapLlomny kivlasztsa) prbeszdablakban keressk ki a lesson02 knyvtrat, s jelljk ki a mystyles.css fjlt! Kattintsunk az OK (Windows), illetve a Choose (Macintosh) gombra!
Megjegyzs: A korszer CSS tmogatja a klnbz mdiatpusokat, alkalmazhat pldul kpernyn, mobileszkzkn s nyomtatn is. Ebben a gyakorlatban kpernyre sznt kls stluslapot fogunk rende/ni az oldalhoz. A lecke sorn ksbb egy msik, nyomtatsra tervezett stluslapot trstunk majd az o/dalunkhoz.
34
Ellenrizzk az Attach External Style Sheet prbeszdablakban, hogy az Add as: Link (Tirsts hi-
vatkozsknt) opci be legyen jellve! A Media legrdl menbl vlasszuk ki a screen elemet, majd kattintsunk az OK gombra!
A~JURL: lmystyles.css
Browse ...
E
(
(
Preview Caneel
Add as: (3 Link
o Import
Med1il:I~creen
) )
IID
(
Help
YOU may also enter a comma-separattd list of media typu .
Drumweawr has samph: iMe sbee" to get you staned .
Amint lthatjuk, az oldal lnyegesen megvlrozott. Szerkezett tekintve az l . lecke weboldalhoz hasonlt. Az 1. lecke oldalnak cmsorban hasznlt httrkp megismtldik a msodik oldal lbrszben is, az als rsz tartalma pedig kt oszlopba rendezve jelenik meg. 7 Vlasszuk ki a File > Save menponror!
8 Ahhoz, hogy megtekinthessk az oldalt az elsdleges bngsznkben, kattintsunk a Live View gombra, vagy ssk le az F12 (Windows), illetve az Option+Fl2 (Macintosh) gyorsbillentyt! Amikor befejeztk az oldal megtekintst, kanintsunk jra a Live View gombra az Edit mdba val visszatrshez, vagy zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez! A lesson02 mappa az umbria. html llomny fjlfrisstett verzijt is tartalmazza, amelyben a stlusok a dokumentum fejlcbllettek exportlva. Egy-egy hivatkozssal mindkt dokumentumban ugyanahhoz a stluslaphoz ktttk az umbria. html s az about.html oldalakat.
A szjtszerkezet s a leckefelpts eltrsei

Ahogy haladunk a knyv leckiben, szre fogjuk venni, hogy minden leckeknyvtrban tallhat egy mystyles.css fjl. A leckk sikeres elvgzshez nagyban hozzjrulnak az egyes leckkhez gondosan elksztett stluslapok. Amikor sajt szj tokon dolgozunk, ltalban egyetlen stluslapot hozunk ltre, s a szjt minden egyes lapjt ugyanahhoz a .css fjlhoz trs[juk. A szjt gyakran tartalmaz egy css nev knyvtrat, amelyben szmos stluslapot trolunk a kpernyre, nyomtatra vagy ms mdiatpusra szabott vltozatok elrendezsnek kialaktshoz. A kvetkez gyakorlatban a nemrg trstott stluslapunkhoz fogunk j sdLusszablyokat ltrehozni.
j CSS-szablyok ltrehozsa
Egy CSS-szably kt f rszbl ll: egy szelektorbl s egy vagy tbb rulajdonsgbl. A kvetkez CSS-szablyban pldul a szelektor a <hl > cmke, a tulajdonsgok pedig a color (szn): red s afontsize (betmret): 36px:
hl { color : red; font-size: 36px ;

}
35
A Dreamweaverben kijells-kattints mdszerrel (point-and-click) hozhatunk ltre j CSS-szablyokat, a szksges kdot a szoftver automatikusan megrja helyettnk. Ahogy egyre gyakorlottabb vlunk a CSS hasznlatban, a Dreamweaver lehetv teszi, hogy knnyen rhassunk sajt CSS-szablyokat. A Dreamweaverben brmelyik szelekrorhoz meghatrozhatunk CSS-szablyt. A kvetkez gyakorlatokban kt klnbz szelektorhoz hozunk ltre szablyt: az egyik egy szrmaztatott (szelektorra pl HTML-cmke), a msik egy egyedi CSS-szelektor, amit osztlynak neveznk.
Szrmaztatott (descendant) cmkk stlusnak meghatrozsa

A konkrt cmkkre vonatkoz szablyok azonnal s automatikusan rvnyeslnek, brmikor is alkalmazzuk az adott cmkket. A kvetkez gyakorlatban pldul egy manContent dv-hez tartoz <hl> cmkhez hatrozunk meg szablyt, amely az egyb mdostsok mellett kkre fogja vltoztarni a szveg sznt. Amint ltrehoztuk ezt a szablyt, brmely main Content div-en belli, <h l > cmkvel hatrolt szveg kkre vltozik minden olyan oldalon, amelyhez a szablyt tartalmaz kls CSS stluslap van trstva. 1 Amennyiben szksges, dupla kattintssal nyissuk meg jra a Files panel about.html Jlomnyt!
.twoColfhd.1Hdr Icontalner .twoColFlxUHdr 'huder .twoColF lxllHdr #h~ad~r hl .twoColFlxUHdr .tsldeb.J.rl

.twoColflxLtHdr 'rTWihlCo(ltent
,twoCoJFlxllHdr Ifooter
.twoColnxUHdr IfOOH!r p Jltn .fItItt
Bizonyosodjunk meg rla, hogy a CSS Styles panel Ali mdban van; ha a Current md van kivlasztva, kattintsunk az Ali gombra! Vlasszuk ki a Plus (+) gombot (Windows), illetve a hromszg jelet (Macintosh) a mystyles. css elem kibontshoz. Lthattuk, hogy az 1. leckben a stlusok a <s t y le > nyelvet hasznljk jelezve, hogy azok a dokumentum head rszhez tartoznak. Itt viszont a kls stluslap fjlnevt, a mystyles.css-t lthatjuk. Helyezzk az egrkurzort a Meet Our Friendly Staffcmsor fl a szerkesztablakban! A szerkesztablak als szln tallhat cmkevlasztban vlasszuk ki a <hl> cmkt! Kattintsunk a CSS Styles panel aljn tallhat New CSS Rule ikonra (fJ)!
3 4
5 Amikor megnylik a New CSS Rule prbeszdablak, kanintsunk ktszer a Less Specific (kevsb clzott szelektorok megjelentse) gombra a #mainConten t hl szelektor kivlasztshoz! Nyomjuk meg az OK gombot! A #mainCo ntent hl szelektor egy szrmaztatott szelektor (descendant selector, cmkestlus). Ez a fajta szably csak a #mainContent azonostj DIV-cmkn (szlelemen) bell tallhat, <h l > cmkkkel hatrolt tartalmi elemekre rvnyesl. (A mainContent eltti ketts kereszt (#) jelzi azt,
36
2. LECKE Stlus lapok hasznlata
hogy a egy azonost, amely a DIV-cmke ID-tulajdonsgvallett a cmkhez rendelve) . A #heade r azonostj DIV-rszben tallhat <hl > cmke vltozatlan marad. A szrmaztatott szelektorok a #mainContent elemhez hasonl azonostra vagy egy osztlyra alapulnak, s tbb azonost, illetve cmke megadsval hatrozzk meg, hogy az oldal mely rszeire lesz alkalmazand a bennk meghatrozott formzs. A lecke ksbbi rszben osztlyszelektort is ltre fogunk hozni.
A Dreamweaver elszr mindig a szvegkurzor aktulis helyzetnek megfelel szelektort helya a SeLector mezbe. Ez a bellts nagyon hasznos lehet sszetett szelektorok ksZtsnl, ezrt rdemes a kurzort arra az oldalrszre helyani, amelyre pp stlusszablyt ksztnk.
SeIKtOr Type:
OK
)
)
Choos. a COn!eXlUaI selector type fo< YOU' CSS rule.
! Compound (based on you, .electlon)

Choose or enter a name for your seJector.
...
!@J
Ca"cel
1 #ma.inCo",ent hl
This seleetor name will apply your (ule to
ali <hl> elements

that art wlthJn any HTML elements wlth ld "mainContent" .
(
Ru" Dt:finltlon:
u.s. Specifle
) (
Mor. Specifle
Choose who,. you, rule will be deftned.
I mystyles.css
Help)
6 A CSS Rule Definition for #mainContent hl in mystyLes.css (#mainContent hl cmkre vonatkoz CSS-szably meghatrozsa a main. css stlusIapban) prbeszdablakban ellenrizzk, hogy a Type kategria legyen kivlasztva; ha nincs, vlasszuk ki a lJpe elemet a prbeszdablak bal oldaln tallhat Category oszlopbl!
7 8 A Fontfamily (Bettpus) legrdl menbl vlasszuk ki a Georgia, Times New Roman, Times, serif kategrit vagy brmely hasonl lehetsget! A pipettval vlasszuk ki a CoLor mezben a sttkk sznr a fejlc bal szls rszn tallhat sznminta segtsgvel! A kvnt rnyalat a #345FA3, br kiss eltrnek tnhet. Ha pontosan megegya sznt szeretnnk vlasztani, a pipetta hasznlata helyett gpeljk be a #345FA3 sznkdot a Color mabe! Kattintsunk az OK gombra!
CSS Rule
for lm ..inContent hl in
Font-fAtTriIy: Georgia, "m~s New RomM', Times. swf Font"""",lght:
Borde-f
Un
Positioning
Ext~nslons
Font-YltWlt.
r-~"
Une-helght:
Fontdtcoration~
r:'~-l ~ , ~
fonl-U.nsform:
Color :
O I,Inderf!ne
O OVf't1rn~
line - through
CJ blink
O "OlIe
37
Ezltal megvltoztattuk a #mainContent <hl> cmke sznt s bettpust. Amennyiben j <hl > cmkt adunk a mainContent terlethez, ezen is rvnyeslni fog a meghatrozs. Mivel az umbria. html szintn a mystyles.css stluslaphoz trsul, megvltozik a mainConten t terlethez tartoz <hl > cmkje. Ha ezer oldalunk trsuina ehhez a stluslaphoz, egyszerre mindegyikk #mainContent <hl > eleme j bettpust s betsznt kapna. Ez jl mutatja, hogy milyen kezelsi s frsstsi elnyket jelent a kls stluslapok hasznlata. A Dreamweaver nyolc kategriba sorolja a rendelkezsre ll CSS-tulajdonsgokat. A lJpe kategria a szelektor szvegformzsra vonatkoz tulajdonsgait tartalmazza. 9 Helyezzk az egrkurzort a The view from our offices in New York City sorra! Vlasszuk ki a <p> cmkt a szerkesztablak als rszn tallhat cmkevlasztban!
10 Kattintsunk a CSS Sryles panel aljn tallhat New CSS Rt/le (j CSS-szably Ltrehozsa) ikonra (fJ)! II Amikor megnylik a New CSS Rule prbeszdablak, a #s idebarl p elem kivlaszts hoz kattintsunk dupln a Less Specific (Kevsb clzott) vlasztgombra! Nyomjuk meg az OK gombot! 12 Kattintsunk a Category oszlop lJpe ttelre! A Font-size mezbe gpeljk be a 80-at, majd a legrdl menbl rendeljk mell a % rtket! A Font-style (Betstlus) menbl vlasszuk ki az italic (dlt) elemet!
C~ego'Y
Type
Font-family:
h ckground Blo<k
80x
Font-~Ite:
[80
Border
lis! PoslrJoni"9 Exlenslons
F.nt-stvl<:
lIne-he~h l :
E .alk
("
~--"'-!"""I :::J
J:)
Fo nt-wtJght:
rL
~-'i !;i;I . J~
f!l
r;,. L=.._:-, Fonr-transform: I !

(010,:
Font-vul.nt: ! =~' ~ ~I
font-decoration: n underline
n-- -:
O owrllne
O line-through
o non.
ObIInk
(_)(c.ncol)E.... ~
Az l. leckben a Properties panel I gombjt hasznltuk <em> szveg ltrehozshoz (amely legtbbszr dlt bets szvegknt jelenik meg). A mostani leckben az italic rule (dltbetszably)
<em> megjells nlkli dlt bets szveget hoz ltre. HTML krnyezetben az <em> cmke kihangslyozza a szveget, az italic betstlus pedig inkbb eszttikai lehetsg. 13 Vltsunk t a Category listn a Box (mretek, elhelyezkeds, trkziJk) kategrira! A Margin (Marg) rszen vegyk ki a pipt a Same for al! (Mindenhol azonos) jellngyzetbl! A Top (Fels) mezbe rjunk be O-t! Kattintsunk az OK gombra! A Box kategria elemei az oldalelemek krli lthatatlan terletet szablyozzk azltal, hogy megadjk annak szlessgi, magassgi, bels, illetve kls margra s ms tulajdonsgokra vonatkoz rtkeit. Ezekre a paramterekre gyakran Box modell nven hivatkoznak. Ha a megjelens azt kvnja, hogy a marg a szelektor krl minden oldalon azonos legyen, a Same for alI jellngyze tet kell megjellnnk, s a Top mezbe a megfelel rtket bevinni. Ilyenkor a Top mezbe rt rtk automatikusan rvnyesl a Right Uobb), Bottom (Als) s Left (Bal) tulajdonsgra is. A kls s bels margmretek megegyezhetnek vagy klnbzhetnek az elem minden oldala krl, st, negatv rtkeket is megadhatunk.
38
Category
--------------------------------------Paddlnv -=, -_ __ _ _ Marv1n -:::::-_ _ _ __ _
Box
Un
Postt1onlng Ex1enslons
2
.,
!!il some for .11

T:
~h R. " t:
~
, .
r;;=::n
,..--
P ,
O So... f....1I
T :
10
II!! r(.. --'!!Jen
..:....,tp)(
light:
Ionom:
Bonom:;:::; ;'r=~' :
lett: ....:- C~",'_";''-''
( Help )
Left:
14 Vlasszuk ki a File > Save AI! (sszes mentse) gombot! 15 Ellenrizzk a vltoztatsokat Live view nzetben vagy egy bngszben! Megfigyelhetjk a <hl> cmsorban s a New Yorkot brzol kp alatti bekezdsben vgzett mdostsokat. Lthatjuk, hogy kt j meghatrozs addott hozz az Al! Rules lista vghez; ez a lista a stlusIapon tallhat CSS-szablyok sorrendjt jelenti meg. A tervezk szeretik csoportostani az egymshoz kapcsold stlusokat, hogy knnyebben meg lehessen tallni ket. A stluslap szablyainak sorrendje az egyes szablyok cascade-beli jelentsgt is tkrzi. Brmilyen stlust gyorsan thelyezhetnk brhov - a Dreamweaver elvgzi helyettnk a kd trst.
When yOU call our office in New Yoric City, you one or oor exp~rienced. helpfui and friendly Here and Back Tr~ .
Elalne is the Pr'e5ldent and Back Trevel. 5he has 20 years experience ln the has tnrveled extensiveJy to research the hatels
recommend.
You may nod her Bnsweriog your phone catls recommended hotel on Santorini.
CI(
16 A CSS Styles pane1ben hzzuk t a #mainContent hl cm, jonnan hozzadott stlust a .twoColFixLtHdr #mainC ontent soral~ 17 Hzzuk a #sidebarl p elemet a . twoColFixLtHdr # sidebari al! 18 Vlasszuk ki a File > Save Ali menpontot, hogy elmentsk a vltozsokat a HTML s CSS fjlokban is!
Ioomalnec,
.rwoColFlxllHdr
~.ild~r
.twoCofFixUHdr 'huder hl .(V(oCoIFlxltHdr Is!debarl .twoCoIFh(UHd r l malnConttm
.twoCoIFlxUHdr
Oot~r
.rwoColflxl tHdr Iffoottr p
.11ut .flt1ft
.durfloat
p
39
Egyedi osztlyok ltrehozsa

Ellenttben a szrmaztatott szelektorokkal, amelyek egy bizonyos cmkt cloznak meg egy adott kontextusban, nem minden CSS-meghatrozs rvnyesl automatikusan. A kvetkez gyakorlatban egy egyedi szelektort vagy ms nven osztlyt fogunk ltrehozni, amelyet ott alkalmazhatunk, ahol pp szksgnk van r. l Amennyiben szksges, kattintsunk ktszer az about.html elemre a Files panelben a dokumentum megnyitshoz!
2 A New CSS Rule prbeszdablak megnyitshoz vlasszuk ki a New CSS Rule ikont a CSS Styles panel als rszn! 3 Vlasszuk ki a Selector Type legrdl menben a Class (can apply to any HTML element) (Osztly - brmely HTML-elemre vonatkozhat) sort! A Selector Name mezbe gpeljk be a . name nevet! Ne felejtsk el a pontot az elejn! Ha kihagynnk, a Dreamweaver beszrja helyettnk, de jobb, ha ilyen mdon rgzl, mivel a ksbbiekben elfordulhat, hogy a stluslapba sajt kezleg visznk be osztlyt, s ez esetben szksg lesz r.
SNaorType:
COOose
~ ConI:txtual se~C1or
type for your CSS rule.
E
( Cancel )
! CI..s (an app'" to any HOML ."'ment)

s.1ector Nam.:
Choose
of
enter a name for your seltctor.
Iname
This selec.tor name will app tv vour rule to ali HTML elemenl5 witn dass "niilme",
(
Ru"- DefinMkln:
Less speciHe
) (
Mor. Sp.dHe
Choose where
yo4Jf
rule will be de6ned.
l mystyles.C5S
4
Gyzdjnk meg rla, hogy a
Help)
Rule Definition (Szably helye)
legrdl mensvban a mystyles.
css lthat, majd kattintsunk az OK gombra!

Cilte-gory
Bac.kground Block
lorder
Font-(~ty:
Font-siu:
Font-sty4e;
80'
r---=::" ~ !- ~ .,
- :,
I
Fant-welght: ( Fant-variant: )
Un
Posltlon lng
btensions
UM-~ht:
~~~~;;; ~
t~m.tI, ~p4
~ ,'-"X"---!..l' P :
fonl--transform:
Coklr:
FontoodoratJon:
O under1lne O owrline
,i-_~I f!! l
O bne-through
O bil
O ...
40
A CSS Rule Definition for . name in mystyles. css prbeszd ablakban vlasszuk ki a Type elemet a Category oszlop listjrl! A Font-variant (Bettpus-varins) legrdl menbl vlasszuk ki a smallcaps (kis kapitlisok) lehetsget, s kattintsunk az OK gombra! A mentshez vlasszuk ki a File> Save Ali menpontot!
Ezeknek a lpseknek az elvgzse utn semmilyen vltozst nem fogunk tapasztalni a Dreamweaverben azon kvl, hogy a CSS Styles panel ALI Rules listjn egy j elem szerepel. Mivel ez a meghatrozs oszrlyszelektort hasznl, sajt kezleg kell a stlust az oldal kvnt rszein alkalmazni, amit a kvetkez gyakorlatban fogunk elvgezni.
Stlusok alkalmazsa
A Dreamweaver tbbfle mdot knl a stlusok cmkkre alkalmazsra. Ebben a gyakorlatban a Properties panelt fogjuk hasznlni.
l
Amennyiben szksges, nyissuk meg az elz gyakorlatban hasznlt about.html dokumentumot gy, hogy a Fi/es panelen dupln a nevre kattintunk!
Az Elaine-rl szl bekezdsben hzzuk vgig az egrkurzort az els helyen, ahol elfordul az
Elaine nv!
ls the President and CEa of Here and years experience ln the travej Industry and has trav~ed extenslvely lo research the hotels and restaurants we
remmmend.
A nevet s a fltte lev terletet ezzel kijelltk. 3 Ha szksges, ssk le a Control+F3 (Windows), illetve a Command+F3 (Macintosh) gyorsbillentyt a Properties panel megnyitshoz! A Properties panel bal oldaln ellenrizzk, hogy a CSS gomb van-e kivlasztva!
Clsa.de
.twoCoIFhlltHdr'kOnlalntr
.twoColAxUHdr tmilnConttnt
New Ru"
<ti <New CSS Rule>

<New Inllne Style>
Apply Ous
<RetnOW! Class>
durfblt
nUh
A Properties panel Targeted Rule (Alkalmazand szably) listjrl vlasszuk ki a . name elemet! Lthat, hogy a kijellt szveg tvltozott nagybetss, s hogy a cmkevlaszt tartalmazza az osztly nevt: <span. name>. A kijellt szveghez a <span> cmke segtsgvel trsult az osztly. Mint ahogy ez a plda is mutatja, egy ltez cmkn bell is hasznlhatjuk az osztlyokat egy elem rszletnek span megvltoztatsra, de akr a teljes cmke alaprtelmezett vagy CSSben meghatrozott stlusnak (p, hl, d i v s gy tovbb) fellrsra is alkalmazhatjuk ket.
Megjegyzs: A Properties panel Targeted Rule (Alkalmazand szably) rsze a dokumentum sszes alkalmazhat osztlyt listzza, mindemellett megjelenti a szably rkltt helyt (inherited position) a stilus/apon bell.
41
5 Az oldal befejezshez ismteljk meg az elbb vgzett mveletet, s emeljk ki minden szemly nevnek els elfordulst, majd a kijellt rszre alkalmazzuk a . name osztlyt! 6 Tekintsk meg az oldal unkat Live nzetben vagy egy bngszben! Megflgyelhetjk, hogy Live nzetben vagy bngszben a nagybetsre formzott szvegrszek megfelelen jelennek meg.
2
Idep"rtment. St'le r~rches
iN
manages cur local recommendatJons

the reputation o( f!Yery 1 0ClI1 restaurant,
or other business that WI! rKOmmend to our
Ire
Ia>:'~':;~d~ listens to retumlng traveler!; comments our

10CiJ1 buslnesses.
~~~~U~:;~S~OU:"~n~d()-it."1I guy. He tekes C21re of the

th
i
this web site. Hc's also
tnvel plans and can st-ep ln to
7 8
Kattintsunk jra a Live View gombra az Edit mdba val visszatrshez, vagy zrjuk be a bngszablakunkat, s trjnk vissza a Dreamweaverhez! Kattintsunk a File> Save menponrra!
Egyedi osztlyok alkalmazsa oldalrszeken

A Dreamweaverrel knnyen illeszthetnk egy dokumentumba < di v> cmkkkel hatrolt oldalrszeket (rviden diveket) oldalszerkezeti elemek ltrehozshoz vagy az oldalfeloszts elrendezshez. A <di v> cmkhez azonostt (ID) vagy osztlyt trsthatunk. Ebben a gyakorlatban szmos <di v > oldalfelosztst fogunk ltrehozni, s mindegyikkhz ugyanazt az egyedi osztlyt fogjuk trstani. Ezek az oldalfelosztsok lehetv teszik, hogy az oldalon szerepl kpeket szabadon jobbra vagy balra rendezhessk. Amikor elemeket rendeznk ily mdon, gyakran szksg van a clear (ms elem nem illeszkedhet) rulajdonsgra. A <di v > oldalfelosztsok hasznlata lehetsget ad a clear tulajdonsg alkalmazsra is. I 2 Amennyiben szksges, nyissuk meg jra az about.html dokumentumot gy, hogy a Files panelen dupln a nevre kattintunk! Hasznljuk az egrkurzort, hogy kijelljk Elaine kpt s az alatta tallhat mindkt bekezds t!
one o our expeneneea,
Here and Bad: Tritvel.
l'\eijiflanCfi1eiiarv staR memoers . 'h
IS
Az Insert panelben vlasszuk ki a Layout elemet! A munkafellet-belltsunktl

men sv vagy panel formjban jelenik meg.
fggen
az Insert
42
"'_d
cll
Imert DivT~
mi
Ilfaw AP ()ly
2
4 5
~ sprr Menu a.r
[fd
SpryTlbbtd P"Mls
ml
~
~
scwy Aceotdton
~ spry Collllpslbte 'linel

TOiIble
Insert Row AbOYt
Vlasszuk ki az Insert Div Tag elemet! Megjelenik az Insert Div Tag prbeszdablak.
Ellenrizzk, hogy az
Insert legrdl men a Wrap around selectio n (Kivlasztott rsz krbezrsa) belltson legyen! A Class mezbe gpeljk be a . p r o f ile nevet!
c...., I'::~:':::'="'_ _ _-IIi!l

ID:
(
(
c.nc.l
H.",
)
)
l
( Now css ..."
)
)
6 7
Kattintsunk a New CSS Rule gomb ra! A New CSS Rule prbeszdablakban a Selector Type rszen (a belltsainknak megfelelen) a Class elem lesz kivlaszrva. A Selector Name mezbe gpeljk be a . profile nevet! A Ru/e Definition legrdl ment lltsuk t gy, hogy az j szablya mystyles.css fjlban legyen meghatrozva! Kattintsunk az OK gombra!
SetKtor TYPE
choose a cOIUxtWll se4taor type for your CSS ru~ .

( Cia (can IPPIy to any Iffio4L .Ie.... nt)
SetKtot Name;
olt
Cancel
,
)
ChooSI or Inter I. name for your HIe:Clor.
Ipronl<!
Thl~
I@J
seJe<lor nam~ will apply your rule to ill HTML elements wnh cla!>s prome ~ .
,:c".
( Less Specific } (
.=..
More Sp.eiRc
)
au.
DafJftidoft:"
Choost where your rUJe will b, dtftned.
! mystyl .cu
8 9
Help)
A CSS Rule Definition for .profile in mystyles.css prbeszdablak Category oszlopban vlasszuk ki a Box elemet! A Clear legrdl menben vlasszuk ki a right (jobb) lehetsget! A Category oszlopbl vlasszuk ki a Positioning (Elhelyezs) elemet! Az Overjlow (Tlcsordul tartalom kezelse) legrdl menben adjuk meg az auto (automatikus) lehetsget! Kattintsunk az OK gombra!
43
~~"""""~----.~~~~-~
Category
10.
:~
. @lod<
u..
WIdIh:
Htlghl:
B.,.
PosIlIoning
I I
J
I ~ f px
.,
If!! ( p.
~ " ---2J
,
,
, '
FIo.c
I~
eiu" Itloh'
It!!
I'
;I T)
:
Extensloru
Padding
Margin
@s..... '.....1
T",,: I., Rlghl:
Bottom:
@ SoImt kl< .11
r:'
~ ~ px
-~~ '...!.. ' px
,-- r.
lttt:l
cr ~ P)(
...
TopJ
light:
1 ~ l p.
.....:... I
,7,.p;
.....: ... L ,
Ionom:l
left:
"""'-=n
!lX
c.:: r.. --=-n
Help
( _ ) ( Canctl)
ot )
A lecke ksbbi rszben a profil kpeket fogjuk lebegtetni. A . profil e szelektor c!ear: right belltsnak hasznlatval minden j div res clhelyet tall magnak a jobb lapszlen, mieltt j <di v. prof i le> elemet hozna ltre. Ahogy azt az 1. leckben lthattuk, amikor eJmozdulnak az elemek, az sszes tbbi tartalom krjk csoportosul. A c!ear tulajdonsg megakadlyozza az egyes profilok sszetorldst s a rendezetlen oldal szerkezetek kialakulst.
Category
Posltlonlng
T"";
BKk9 r ound 810ck
Bo.
Border
""ll1ion: "'dlh:
Heighl:
i
,
f px
l~
VI,iblllty.
u..
Extens.lons
(f.--=u
I
Iku,.
( px
Z-Indtx: [
:J
0VtrfI0W:
I~
Placement
Top:
Rlghl:
Clip
-o, ~ \ .x
r...
' px
\
lonom:
...,,:
r;; ....,...
)
, J
:~
Top:
Rlght:
&ottom:
lett:
' .- -" , pac , :) (P '
( - . )( ,""ctl) (
olt
Az oveiflow tulajdonsgot egy msik, a lebegtets ltal okowtt problma megelzsre hasznljuk. Ha az oveiflow tulajdonsgot nem vltjuk t auto belltsra, az elmozdtott kp tllghat a <di v . pro f ile> aljn s a szveg vgn, Az oveiflow tulajdonsg a <di v . pro f ile> kiterjesztsvel a teljes kpet s szvege t magba foglalja. 10 A Dreamweaver jra a DivTag prbeszdablakot mutatja fel. Kattintsunk az OK gombra! A szerkesztablakban most szaggatott vonalat lthatunk a kijellt kpet s szveget tartalmaz oldalrsz krl. Ez a jells a <di v> cmke jelenltt mutatja. A tovbbi vltoztatsok elvgzsig nem lthat vltozs a lap megjelensben.
~ta,",mcn.
ELA.1NE is the President and CEO of Here and She has 20 years experlence in the travel industry and extensively to research the hatell and restaUnlnts we
~",r
phone calls or checking out a
44
2. LECKE Stlus lapok hasznlata
A hasonl. p r of ile osztly <di v> cmkk hozzadsnak folyamata valamivel eltr majd az oldal tbbi szereplje esetben, mivel a . pr o f il e osztly mr ltezik a mystyles. css fjlok kztt. 1 Jelljk ki Linda kpt s a rla szl kt bekezdst a szerkesztablakban! 2 A Dv Tag prbeszdablak megnyitshoz az Insert panel Layout flrl vlasszuk ki az Insert Dv Tag ikonr! 3 A prbeszdablak Insert legrdl menjbl vlasszuk ki a Wrap around selectio n elemet, ahogy azt mr korbban is tettk! Ezttal azonban csak a mr ltez osztlyt s proftlt vlasztj uk ki az j <di v> cmke osztlyozshoz .
2
.,
IRHrt:
( Wra2 arounct setection
*
ftttft
,
I
:l
( (
(
at
)
)
)
Class:
100
dtMftou
nc"
Help
L-
( _CSS"".. ) l
11m
.,,,,,
twoColFlxUHdl
A Lindrl szl oldalrsz most mr sajt <di v> cmkjhez tartozik. A vltozst a szerkesztab lakban megjelen szaggatott krvonal tkrzi.
emsnges ell cur organIzed tours to for tho58 of you wh o Eke to have ali the arrangements ln a""nce. Unda is here to maxe your trip easy and
so
~U
can enjoy ewry mioute.
for people with special needs such as handlcztp access or [dletarv nceds ere Unda's fBYorite to ut UP. so let Unda
4 5
Ismteljk meg jra az 1., 2. s 3. lpst a Jason, a Lin s a Charlie profiljt tartalmaz oldalrszeken! Vlasszuk ki a File> Save Ali menponrot az oldal s az j CSS-szablyok elmentshez!
Minden profilhoz klnll oldalszerkezeti rszt hoztunk ltre, s CSS-osztlyszablyokat trstortunk hozzjuk. Ezek a szablyok teszik majd lehetv az egyes kpek lebegtetst a profilokon bell, amit a kvetkez gyakorlatban fogunk elvgezni.
Kpek lebegtetse
Az elz gyakorlatban ltrehoztuk a . pro f i le nev osztlyt, amely az oldalon ltrehozott <di v > cmkkre vonatkoz clear s overflow szablyt hatrozta meg. A kvetkez gyakorlatban az t profilkpet fogjuk trendezni a float tulajdonsg segtsgve!. Az elzekben meghatrozott. pr o f i le
szablyokkal nekikezdhetnk a feladat elvgzsnek. No., .
profile
...
45
1 Amennyiben szksges, nyissuk meg jra az about.html fjlt a cmre val dupla kattintssal! 2 Jelljk ki Elaine kpt! Ellenrizzk, hogy az <img> cmke legyen kijellve a cmkevlasztban! 3 4 Vlasszuk ki a . fl t r t osztlyt a Properties panel Class legrdl menjben! Elaine kpe most a jobb oldalon lthat, s a rla szl szveg balrl veszi krbe a kpet. Vlasszuk ki Linda kpt! Ezttal a . f l t l f l osztlyt lltsuk be a Properties panelen! Linda kpe a bal oldalon marad, de mivel a krbefuttatst vlasztottuk, a szveg jobb oldalrl a kp kr rendezdik.
has 20 years
exp~nce
',,:~,~~:~n;~~::i. ;e: reseftrch the hotels
and has lraveledand
in
find her anSw@ring your phone cans out It recommended hotel on
LINDA IIrranges afl our organil:'ed tours to ma~ traveJlng easy for those of you who ~ to ha\le ali loe arrangements taken care of in advance. Linda is here to make your trlp easy and restfur so you elm enjoy every minute.
Tours for people with special needs such as hao.bp access or specilll needs are
5 6 7
Folytassuk a gyakorlatot a fennmarad hrom profilkp elmozdtsval: rendezzk Jason kpt jobbra, Lin kpt balra, vgl Charlie kpt megint jobbra! Vlasszuk ki a File> Save AI! menpontot a munknk elmentshez! Tekintsk meg az oldalt Live view nzetben vagy egy bngszben, hogy megflgyelhessk, hogyan jelenti meg az oldal az trendezett kpeket s a krjk futtatott szveget! Minden profiIt res terlet vlaszt el az eltte lvtl.
Megflgyelhetjk, hogy a Properties panelben tallhat, alkalmazhat szablyok listja mr a . profile osztlyt is tartalmazza.
EU,!Nf ls the
Presid~t
and CEO
o(
Here and
C&sCilde
body .twoColFlxltHdr KontOillner .twoCoJAxUHlfr 'rNinCQnten1
Bad< Trave/. She has 20 years experience ln the tra'nl Industry and has IrB~led extensively to research the hote!s and
restaurants we recammend.
You may "nd her en.swerlng your phone calls or checldng out a recommended hotel on
SantonnI.
LH.oA arranges ali our organized tours to mll'ke travellng easy (or tnose of you who lilce to heve ali the IIrTangements teken care of ln advlln~.
New Rule
<New CSS Rule> <New {nU ne Style>
Linda ls here to make yoor trip easy and restful so 'f<lU can enjoy every minute.
yDrtOty.
Tours for people wlth specIIII needs such as
handlcap lICCeSS or special dietary needs are Unda', favorite to set up, 50 let Unde know If
hav< ooy pet"SOl'lal requlrement5. JAsON is our transportaUon expert and will set.
you up wlth the best transportatlon

arran\jl!\Tlents induding alrllnes, trillns,
shuttles, ferries, and even car, motOf"C'(de and blke rente!s. ln addltJon to
46
Szelektorok vizsglata a CSS szablypanelben
2
"
Ebben a gyakorlatban jobban megismerjk a CSS Styles paneljeit, s megtanuljuk, hogyan szerezhetnk az egyes stlusokra s azok tulajdonsgaira vonatkoz informcikat a Dreamweaverben. l 2 3 4 Amennyiben szksges, nyissuk meg jra az about.html dokumentumot gy, hogy dupln a nevre kattintunk a Files panel ben! A szerkesztablakban helyezzk az egrmuratt egy olyan nvre, amelyre mr rvnyes a . name osztly! Kattintsunk a CSS Styles panel AlI belltsra, majd biwnyosodjunk meg rla, hogy a . name osztly van kivlasztva az Alt Styles kategrin bell! Vltsunk t a Current flre! Kattintsunk a kzps sv bal oldali, Show information about the seleeted property (Informci megjelentse a kijellt tulajdonsgrl) ikonjra ( ,, )! Az About sv megmagyarzza egy adott stlus vagy tulajdonsg eredett.
1-r.t~.t'
font-vaNnt O """rylts.tn.li dlllned tn NIC . ,.....,.- ill
Vlasszuk ki a jobb oldali, Show Caseade of rules for seleeted tag (Szablyok rkldsnek megjelentse a kijellt cmkn) ikont ( ~, hogy az About sv helyett a Rules svot lssuk! Ha a Rules sv egyik szelektora fl helyezzk az egrmutatt, megjelenik egy, az About sv tartalmval megegyez eszkzlers, amely speciflcitsi tjkoztatst is ad, ezltal segthet megszntemi a stlusmeghatrozsQk sszetkzsei t.
'om
""'" luc-alig"
fonc~stze
Jth
_
10ClJ' VCrdaN.
_"''''''''' 1
...n .....
body <body> .to.oCoIRxUHdt .... <dIV>
A Properties sv megmutatja a szelektorok tulajdonsgait. Hogy jllthat legyen, nagyobbtsuk meg a CSS Styles panelt az als szegly lejjebb hzsval! Az rtkeket kzvetlenl a Properties svban szerkeszthetjk, tovbb j tulajdonsgokat is hozzadhatunk az Add Property (Tulajcmsg hozzadsa) link segtsgve!.
"""""
. 000 2SOpx
,o20px
Add ProMrty
Tipp: Ha sszetkzs fordul el, a CSS panel thzza a szelektornevet. Ha egy thzott szelektorra helyezzk az egrmutatt, megjelenik az sszetkzs okt s lehetsges megoldst rszletez eszkzlers. Az eszkz/e rs ltalban a szerkesztablak elterben jelenik meg.
47
Stluslapok ltrehozsa ms mdiatpusokhoz

A modern webtervezs egyik f trekvse a megjelens (CSS) s a tartalom (a HTML-cmkk, szvegek s ms oldalelemek) elklntse. A CSS fjlok a tartalmat egy bizonyos mdiumra szabva kpesek megjelenteni. Az elz gyakorlatokban hasznlt stluslap pldul a szmtgp kpernyjn val megjelensre lett tervezve. Ebben a gyakorlatban egy kperny re tervezett CSS fjlt alaktunk t nyomtatsi clra alkalmas CSS llomnny. A nyomtatshoz kszlt stluslapok gyakran tlltjk a szneket, hogy azok nyomtatsban jobban rvnyesljenek, elrejtik a szksgtelen oldalrszeket, vagy az optimlis nyomtatsi kp szerint igaztjk a mreteket s oldalszerkezeteket. Egy oldalhoz tbb stluslapot is trsthatunk. Amikor egy oldalt nyomtatshoz jelent meg a bngsz, nyomtatshoz ksztett stuslapot keres. Ha tall ilyet, az abban meghatrozott CSS-szablyokat veszi figyelembe. Ha nem, a nyomtatsi kp a kperny szablyai vagy az alI-media (minden mdiatpus) esetn alkalmazand stluslapok alapjn kszl el. Hasonlkppen a mobil vagy Braille eszkzk is sajt mdiatpusuknak megfelel stluslapokat keresnek. Amennyiben ezek elrhetek, az abban meghatrozott szablyok szerint jelentik meg az oldalt.
A Style Rendering eszkzsv megjelentse

Br a Dreamweaver alaprtelmezett megjelentsi mdiuma a kperny, a Design nzetben megadott mdiumot tllthatjuk a Style Rendering (Stlus-hozzrende/) eszkzsv segtsgve\. Azltal, hogy a Design nzet a nyomtatskor alkalmazand szablyok szerint jelenti meg az oldalt, megnzhetjk, milyen hatst eredmnyeznek stlusszablyaink a nyomtatsban. l 2 Amennyiben szksges, nyissuk meg az about.htm/ dokumentumot gy, hogy dupln a nevre kattintunk a Fi/es panel ben! Vlasszuk ki a View> Toolbars > Style Rendering (Nzet> Eszkzsvok > Stlus megjelentse) menpontot!
TTY mdiatpus szerinti megjelents (halls- vagy ltssrltek rszre) Mobi! mdiatpus szerinti megjelents
Kperny
CSS sti/usok megjelentsnek ki- s bekapcsolsa Design-time stluslap szerinti megjelents TV mdiatpus szerinti megje/ents
mdiatpus _ _ szerinti megjelents Nyomtatott mdiatpus szerinti megjelents
Projektor mdiatpus szerinti megjeLents
A Style Rendering eszkzsv a szerkesztablak felett jelenik meg. Hagyjuk nyitva a kvetkez gyakorlathoz!
48
stluslap talaktsa nyomtatsra sznt stluslapp
Meglv
Br az alapoktl indulva is ltrehozhatunk nyomtatshoz kln stluslapot, ltalban sokkal gyorsabb, ha egy mr meglv, kpernyre tervezett stluslapot alakitunk t a cljainknak megfelelen. Az els lpsben mentsk el ms nven a meglv kls stluslapot! l 2 Nyissuk meg a mystyles.css stluslapot gy, hogy dupln a nevre kattintunk a Files panelben! Vlasszuk ki a File> Save As menpontor!
3 Amikor megnylik a Save As prbeszd ablak, gpeljk be a print. css cmer a File name (Fjlnv) terletre, majd vlasszuk ki a Save (Windows), iIlerve a Save As (Macintosh) menponrot! 4 Amennyiben szksges, nyissuk meg az about.html dokumentumot gy, hogy dupln a nevre kattintunk a Files panelben!
5 A CSS Styles panel ben kattintsunk az Attach Style Sheet ikonra (_)! Amikor megnylik az Attach External Style Sheet prbeszdablak, kattintsunk a Browse gombra! Megjelenik a Select Style Sheet File prbeszdablak. 6 A Select Style Sheet File prbeszdablakban keressk ki a lesson02 mappr, s vlasszuk ki benne a print. css fjlt! Kattintsunk az OK (Windows), iJlerve a Choose (Macintosh) gombra!
<02
y
... o. .nlch
...
DEVICES
(MYK screenshou
!a 101'" Mlctnto .. , !S _ ... ~
lmages
mysryles copv.css mystyles - flnl shed .C5S mystyles .css
,..
... fPlACES
.00. . . .
~t.(U
- CSS
"
URL:
..,.... to: Ir"::c--- .. Do<......-
-,.'" 'tj
Chaft9t ddauh Link hI.IM To in tM sb dtftnrtlon.
SIlea ftle n.... I<om:
( Doh Sau.m ...
) ( 50",., ... ) ( Sli. ROOI )
(Cancel ) ~ 1
External Style Sheet prbeszdablakban az Add as: Link (Hozzads: hivatkozsknt) gomb van kivlaszrva! A prbeszdablak Media legrdl menjbl vlasszuk ki a print (nyomtats) mdiarpust, majd kattintsunk az OK gombra! A CSS Styles panelben vlasszuk ki az Ali nzetet!
~ ~~~
( (
med~
Gyzdjnk meg rla, hogy az Attach
Fitt/URL: prlnlcss
( Browse... ) .
Add IS: SUnk
Preview
Olmpor!
Nedla: Iprlnt
Cancel
You mlY 1.150 enter a comma-separared Itst ol
typts.
DreaJ1'Mlelwr has ymalc StYIC lbeets to get you slaned.
H.lp
49
j elem (a print. css) addott a szablylisthoz. A kvetkez gyakorlatban nhny print.ess-szablyt fogunk mdostani.
CSS STYlES
...
pr! nun (ptint)
,rwoColflx.UHdr .kontoa lne r

.twoColflxl1 Hdr ,theoader
.twoCol AxLlHdr Ihude r hl ,twoColFlxUlfdr IlldeNrI

's fdt~ r l
,r."oeol flxUHdr #mI. lnConte nt
'lNlneontent hl .rwoColflxUHdr Mooter
Zrjuk be a print. ess fjlt a szerkesztablakban, majd az about.html ablakban vlasszuk ki a File > Save menpontot!
Nemkvnatos oldalrszek elrejtse

A Style Rendering eszkzsv hasznlatval a nyomtatsi stlusszablyok szerinti elrendezsben lthatjuk a dokumentumunkat. l 2 3 Amennyiben szksges, nyissuk meg az about.htmL dokumentumot gy, hogy dupln a nevre kattintunk a Files panel ben! Ha szksges, vlasszuk ki a View> Toolbars > Style Rendering menpontot! Kattintsunk a Render Print Media Type (Nyomtatsra sznt stluslap szerinti megjelents) ikonra (~) a 5tyle Rendering eszkzsvban! Az egyik f klnbsg az internetes s nyomtatott mdiumok kztt az, hogy a weboldalakon tallhat interaktv elemek rtelmket vesztik nyomtatsban. Ide sorolhatk az olyan navigcis eszkzk, amilyeneket mg nem adtunk hozz az about.html oldalunkhoz. A nyomtatsra sznt oldalakon e1rejthetjk a szksgtelen oldalelemeket. Helyezzk az egrmutatt brhova a JI f oo t e r div-cTIkn bell!
5 A CSS Styles panelben vlasszuk ki az ALI nzetet! Keressk meg a print. ess stluslapot, s bontsuk ki gy, hogy ki tudjuk vlasztani a . t wo Co lFixLtHd r #f oo t er szablyt! 6 Kattintsunk az Edit Rule ikonra a CSS Styles panelben!
Category
Ito<k
Word-ipaclng:
Bord tr
lHter",pKlng:
V~rtic.I-"'lgn :
Un
Po sl1/Olling
L
(
1 1,. f!!
J~
li
I ~ \ '"
""
ExteMlons
Texl-align:
TIJCt-lnde"t:
Whlle-space: Display:
px
---:r - ,, .
I
;I
Iho':1~
It!!
( Ap'" )( Conc.1 )
E~~
50
Amikor megjelenik a CSS Rule Definition for .twoColFixLtHdr #footer in print. css prbeszdablak, vlasszuk ki a Category oszlop Block elemt! A Display (Megjelents) legrdl menbl vlasszuk ki a none (nem j elenik meg) ttelt, majd kattintsunk az OK gombra!
A lblc most el van rejtve a szerkesztablakban, ha nyomtatsi mdia-elrendezsben tekintjk meg a dokumentumot. A display: none szably azt jelenti, hogy a div nem jelenik meg nyomtatsban.
A nyomtatsi sznhelyessg belltsa

Az oldalon tallhat msik elem, amit rdemes megvltOztatni, a <h 1 > cmke fehr cmsora, az About Here and Back Trave/. Amennyiben a nyomtatnk gy van beltva, hogy a weboldalak httrelemeit is nyomtassa, akkor nem jelent gondot a fehr szveg papro n megjelentse. Ha azonban nem (s ez alaprtelmezs szerint gy is van!), elfordulhat, hogy fehr httrre kerl a fehr szveg, vagyis fehr lapon lthatatlan lesz. l 2 Vlasszuk ki a . t woCo lFi x LtHdr #he a de r hl szablyt a CSS Styles panelben! Kattintsunk az Edit Rule ikonra ( )! A CSS Rule Definition for .twoColFixLtHdr #header hl in print. css prbeszdablak Category menjbl vlasszuk ki a Type elemet!
3 A sznvlaszt segtsgvel vlasszuk ki a szrke legvilgosabb, #CCC sznkd rnyalatt! Kattintsunk az OK gombra!
C&t~ory
Type
Q.ackgrollnd
.'ock Box
US!
~F-on- rlmi -:-:~Ic;:o==,::;"l1;;:m , N"' ;o:m an':;n;:= ,= :;::===.J :- t--:--:Iy , ,. , =.= = =R = :::; ' m,,=, " ,, ::;-;~::':
font-size: Font-style:
I
x -
"';') ..
t
Font""'Nf:ight.: Font..yariant:
r==~ W
Sorder
PositIoning
Extcnslons
lIne-helght: Font-dec:oratlon:
~~
=:n
I
lr --=i
font-transform:
O underilne
O o~rU"e
Color: IE:!.CCC
O line-through
f'l !>lInk
o non.
Hel. )
Apoly ) (
Con,., )
CIII. ~
Az About Here and Back Travel cmsor nyomtatsban ltszani fog, akr megjelenti a nyomtat
a stt htteret a fejlcben, akr nem. 4 Vlasszuk ki a File> Save Ali menpontot a munknk elmentshez!
Szksgtelen stlusok eltvoltsa

Jelenleg sok print. css stluslaphoz tartoz stlus pontosan megegyezik a mystyles.css stlusaival, A fjl mretnek cskkentse rdekben csak azokat a szablyokat tartjuk meg, amelyek jak, vagy a print. css stluslapban eltrnek a mystyles.css szablyaitl. A szksgtelenn vlt stlusokat a CSS Styles panelben trlhetjk. l Jelljk ki brmelyik szelektOrt a CSS Styles panelben, pldul a . twoCol FixLtHdr #cont a i ner szablyt, majd kattintsunk a Trash Can (Lomtr) ikonra (JIilI-) a trlshez!
51
.lwoColFhlUHdr 'ht: .. der

.twoCoInxUHdr jhuder hl
.twoColfl:.:ltHdr .sldtbl.rl
Isldebul
.twoCoIFbLtHdr ' mainCOI\1f~m
.lwoColFlxU Hdr #fooler

.twoColAxLJHdr .ffoottr p
Ugyanezt megtehetjk gy is, hogy a Files panel print. css llomnyt dupla kattintssal megnyitjuk a Dreamweaver szerkesztablakban, ahol a szablyokat manulisan lehet kijellni s trlni. 2 Jelljk ki s trljk az sszes stlust, kivve a . twoColFixLtFtr #footer s a . twoColFixLtHdr #header hl elemeket! Amikor ezt befejeztk, csak kt szably lesz lthat a print.css stluslapon: a .twoColFixLtFtr #f oote r s a . twoColFixLtHdr
#header hl.
Ezzel el is kszlt a nyomtatsi stluslap. Br ebben a gyakorlatban csak kt mdostst vgeztnk el, szmos ms vltoztatsi lehetsg van a nyomtatsi stluslapon. Ilyenek pldul az oldal szlessgt meghatroz szablyok, amelyek gyakran hasznosak lehetnek. A nyomtatk nem tudjk a kppontokat rtelmezni, ezrt a nyomtatsi stluslapnak millimtereket vagy pontokat kell hasznlnia a szlessgi rtkek s a betmretek meghatrozshoz. A kperny s a nyomtatsi stluslap kztti klnbsget a Style Rendering eszkzsv tlltsval flgyelhetjk meg. 3 A Style Rendering eszkzsvban vlasszuk ki a Render Screen Media Tjpe menpontot ( ~) ! A nyomtat (vagy ms mdiaeszkz) mindkt stluslapot olvasni tudja - pldul nyomtatsban tovbbra is lthat lesz a kk szn <h l > szveg a main Content terleten. Miutn a nyomtat beolvasta a mystyles.css stluslap szablyait, a print.css szablyaival folytatja. Mivel ezek a szablyok sorrendben ksbb kvetkeznek, fellrjk a megelz szablyokat. Vlasszuk ki a File > Save AI! menpontot, majd a File > Close Alt (Fjl> sszes bezrsa) menpontra kattintva zrjuk be a dokumentumokat!
tervezett nyomtatsi stluslapot alaktottunk gy t, hogy a weblap megjelense nyomtatsban is rvnyesljn.

Megjegyzs: A nyomtatsi stluslapunk ellenrzsnek msik mdja, ha egy bngszben tekintjk meg az oldalt, majd kivlasztjuk a File> Print menpontot. Amennyiben nem ll rendelkezsre nyomtat, vagy nem akarunk tintt s paprt fogyasztani, vlasszuk a File> Print Pre view (Fjl> Nyomtatsi kp) (Windows) , illetve a Preview (Elnzet) (Macintosh) menpontot a Print prbeszdablakbant
Kpernyre
52
sszefoglals
-----------------------------------------
sszefoglal krdsek
l 2 3 4 5
Hogyan tudunk meglv kls stluslapot trstani egy weboldalhoz? Vgeredmny szempontjbl mi lenne a klnbsg a #header hl s a #mainContent hl szelektorra alkalmazott CSS-szablyok kztt? Hogy nevezik ezeket a szelektorrpusokat? Hogyan alkalmazhatunk CSS-osztlyt egy HTML-cmkre? Hogyan tudunk j <di v> terleteket illeszteni egy weboldalba? Milyen CSS-tulajdonsgokat s -rtkeket hasznlhatunk a CSS stusokhoz kapcsold tartalmak elrejtsre?
sszefoglal vlaszok
l 2 Kattintsunk az Attach Sryle Sheet ikonra a CSS Sryles panel ben! Az Attach External Sryle Sheet prbeszdablakban vlasszuk ki a kvnt CSS fjlt, s hatrozzuk meg a mdiatpust! A #header hl szelekrorra vonatkoz szably csak a #header div rszben tallhat hl cmkre rvnyeslne, a #mainContent hl szelekrorra vonatkoz szably pedig csak a #mainContent div-terlet hl cmkire. Ezeket szrmaztatott szelektoroknak nevezzk, mivel az alkalmazhat6sgukat a felettk ll szlelem befolysolja a dokumentumon bell.
Az egyik md, hogy elszr a cmkt, majd utna a stlust vlasztj uk ki a Properties panel 5tyle lis-
3 4 5
tjrl.
Az Imert panel Layout flrl vlasszuk ki az Insert Div Tag ikont! Az j div krbezrhatja a kivlasztott oldaltartalmat, vagy az egrmutat ltal jellt helyre a dokumentumba
illeszthet.
lltsuk t a display (megjelents) tulajdonsgot none (nem jelenik meg) mdba a nem kvnatos tartalmak elrejtshez az oldalelemre vonatkoz CSS-szablyban!
3 Szvegek, listk s tblzatok kezelse
See Santorini's Best

Paradise by the Sea
,.,. . "i'~
.'
Santorinils perfect for beautifui oceans and funfIIled sunshlne,
Wel come to Paradise! Santorini is Greece's most fa.mous island for good reason. The scenic beauty, the stunning sunsets, the picturesque village and the friendly people ali combine to create an unparalled vacation experience.
The Villages
Ebben a Leckben cmsorokkal, bekezdsekkel s ms szvegrszekkel fogunk doLgozni.
54
3. LECKE Szvegek, listk s tblzatok kezelse
A lecke ttekintse
A kvetkezket fogjuk megtanulni:
o o o o
.' ~
Cmsor s bekezds szvegnek bevitele Szveg bevitele kls forrsbl Listk beiJlesztse
sszefgg szvegrszek beszrsa
Helyesrs-ellenrzs
o o o o
Szveg keresse s cserje Tblzatok beszrsa s mdostsa Spry ler buborkok hasznlata
A Lessons knyvciron bell helyezzk a lesson03 llomnyai t a lesson03, a kpeket pedig az images mappba! A lecke vgre j mappt fogunk ltrehozni a Lessons knyvrron bell, amely a SpryAssets mappa lesz.

A lecke els felben hasznlt fjl jobb megismershez tekintsk meg a ksz weboldalt egy bngsz ben! l 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, a Fi/es panel megnyitshoz ssk le az F8 gyorsbillentyt, majd vlaszszuk ki a listrl a DW CIB elemet! Bontsuk ki a Files panellesson03 mappjt! Vlasszuk ki a santorini-finished.html fjlt, majd ssk le az F 12 (Windows), illetve az Option+F12 (Macintosh) gyorsbillentyt! A felhasznlt szvegelemek sokflesgt figyelhet jk meg az oldalon: cmsorokat, bekezdseket, listkat, tblzatokat s a blockquote nven ismert, sszefgg szvegrszeket, amelyek egy hoszszabb szveg tredkei. Amim azt az elnzetben lthatjuk, az sszefgg szvegrszek alaprtelmezett elemknt jelennek meg a weboldalon. Zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez!
Szvegek bevitele
A kvetkez gyakorlatban cmsorokat s bekezdsszvegeket fogunk egy kls szveges dokumenrumbl az oldalba msolni. l A lesson03 > santorini-start.html fjl megnyitshoz kattintsunk dupln a nevre a Files panelben!
55
A File> Save As menpont kivlaszts val mentsk el a dokumentumot santorini.html nven! Ebben a vltozatban fogunk dolgozni, mdostaclanul hagyva a fjl eredeti verzijt.

Paradise by the Sea
.'
SanCOrlnI ls,.,;t fOr bHl,ltJ(u1

oa'.Jns and fufl..flfltW $unSll/ne.
3
Add telrt Mere
What om customers say
A Here and Back Travel szjt j lapjt lthatj uk. A kpek mr be vannak illesztve, a szveg awnban mg hinyzik. 3 Dupla kattintssal nyissuk meg a santorini.txt dokumentumot a Files panelben! A szveg megnylik a Dreamweaver szerkesztablakban, ahol a tartaImt szerkeszthet jk, msolhatjuk, vagy kzvetlenl a Dreamweaver HTML oldalunkba illeszthetjk.
pa~tQ
undar tha
flr~t
photo of tha coupl. on the sunnu rooflop.

the !5tunning ~ts.
thi p icturesc:ve
\.I e lcc1:.e to PCJr"'Qdlsa l Saltorini !! Grl!!ece'lI .-o.t fMlOUIf i . lond for good reason. The !5c flnle beout'-l. vi 1100", ond the f rll!'f'\dly peo)le oli co~bine to creote on VI'"Ipc;rolled \/ocatlon exper-ience. The Y11100es Bo
~r .
to viSi; t Firo,
tha eopi tal, CJrld
~by
Dio. Both offer
~ tl,.lFVlll"'WJ
5U<"I5et.s, tin a dinlnQ, and !!Iup6rlotive s t .;;pping.
Sontorini blvt cupolos
co lor (u t
fl o-.r-t"
01l v8 oroves dot t he landscope
Eel ectie shopping options

li i9h t
pl~Q
tha
~ost di~cQ~nlng ~hoppe~
Lif. that just ..:Ot'I't q..I l t

,
NO .ncr toqe of Swl .. ln;, . oter
~ondy
fun beat
tour~
lIlOl"e
,port~,
AlIeni ti neat' the beache,
Ll'lClude cofes, taverna", ~ b~eL IQ ~ental o::: . parasoL t l n.;!. boat tours QI1d
4 Jelljk ki a szveget a Welcome to Paradise! Santorini is ... kezdet mondattl egszen az Amenities near the beaches include cafes, tavernas, umbrella rentals, parasailing, boa t tours and more. szvegrsz vgi g!
56
....... pos t e unde r the f ir::::- t photo o f the c.ovp le on the
SU')N"I
rooftop
3
5 6
Ho Ihor toge of .andy
'VII
boot ~
1_lno.
_ter
-Porb,
A kijellt szveg msolshoz vlasszuk ki a File > Copy (Fjl> Msols) menpontot, vagy ssk le a Control+C (Windows), illetve a Command+C (Macintosh) gyorsbillentyt! Keressk meg a santorini.html flet a szerkesztablak tetejn! Kattintsunk r, hogy jra a weboldal jelenjen meg a szerkesztablakban!
Keressk meg az els kp utn, de a msodik cmsor eltt tallhat Add text here (Szveg beszrsa ide) sort, s jelljk ki!
w, ..
What our customers say
8
Az j szveg beillesztshez vlasszuk ki az Edit > Paste (Sz erkesz ts > Beilleszts) menponrot,
vagy ssk le a Control+ V (Windows), illetve a Command+ V (Macintosh) gyorsbillentyt!
Welcome to ParadIse' Santorini ls Greece's most famous island for good reason . The scenic beauty, the stunning sunsets, the plcturesque vmage and the friendly people ali combine to create an un para lied vacatk>n experience. The Vlllages Be sure to
vls~
I'
1
Fira, the capttal,
~nd
nearby Cia. Both offer stunning
sunsets, fine dining, and superlative shopping .
Stunning white-washed walls Santorini blue cupolas Colorful flowers Historlc sites everywhere you Iook live groves dot the landscape Eclectic shopping options please the most discerning shopper
I I;
Megjegyzs: A beillesztett szveg azrt rendezdtt bekezdsekbe a Dreamweaverben, mert a santorini.txt fjl kt bekezds vge" jelet hasznlt mindkt oldalrsz vgn. Ha az eredeti santorini.txt fjl csak egy "bekezds vge jelet tartalmazott volna az oldalrszek vgn, a Dreamweaver alaprtelmezett belltsa minden sor vgre sortrst <br I> helyezett volna.
57
Alaprtelmezett bellts, hogy az jonnan beillesztett szveghez a <p> formzsi cmkk trsulnak, vagyis, hogy szveg bekezdsekbe rendezdik. Megfigyelhetjk, hogy az j bekezdsek bettpusa a meglv stluslaphoz igazodik. A Properties panel segtsgvel egyszeren rendelhetnk alapvet formzsi szablyokat - pldul <hl >, <h 2> vagy <p > cmkt - brmely idzett szvegrszhez. Mieltt mdostannk a szveg formzst, msoljuk be a santorini.txt szveg tbbi rszt is a weboldalba!
A szveges oldalhoz val visszatrshez kattintsunk a santorini.txt flre!
10 Jelljk ki az oldal tbbi rszt is a Dolores and Tom . .. sorral kezdden! II Vlasszuk ki s msolj uk t a szveget gy, ahogy az 5-s lpsben tettk! 12 Kattintsunk a santorini.html flre, hogy visszajussunk a weboldalhoz! 13 Vlasszuk ki az pletrl kszlt fnykp utn s a Recommended Hotels cmsor eltt tallhat add text here sort!
Recommended Hotels
14 A 8. lpsben hasznlt mdszert kvetve msoljuk t a helyrz sor helyre aszveget! 15 A santorini. txt fjl bezrshoz kattintsunk a santorini. txt fjlnv melletti x jelre! 16 Vlasszuk ki a File> Save menpontot a munknk elmentshez! A 3. lecke ksbbiJszben tblzatot fogunk hozzadni az oldal utols rszhez, elszr azonban az j szvegrszeket formzzuk.
Cmsorok, listk s egybefgg szvegrszek ltrehozsa

A szveg formzsa tagoltabb, szervezettebb s rthetbb teszi a tartalmat. A HTML-szerkeszrsben a cmsorcmkk- <h l >, <h2>, <h 3> , <h4 >, <h5 > s <h6 > - hozzk ltre a cmsorokat. Minden bngszeszkz, legyen az szmtgp, Braille olvas vagy mobiltelefon, a cmsorcmkkkel formzott szveget cmsorknt fogja rtelmezni. A cmsorok tagoljk az oldalakat jl rthet rszekre. A HTML oldalakban tallhat cmsorcmek pp olyan hasznosak, mint egy knyv fejezetcmei. Hasonlkppen tlmutatnak a megjelens rendezettSgn a listacmkk s a bl oc kqu o t e cmkk. Jelentsbeli informcit is hordoznak, pldul segtik az olvast a felsorolsok s a hosszabb idzetek beazonostsban. Ez az elv minden HTML-cmkre rvnyes, s gyakran szemantikus ler nyelvknt emlegetik. A HTML-cmkk rtelmez kontextust adnak az oldal tartalmhoz: cmsorok, bekezdsek, listk, egybefgg szvegrszek, tblzatok, kpek stb. A kvetkez gyakorlatban alapvet rtelmez formzst fogunk vgrehajtani a Dreamweaverben a Properties panel hasznlatval.
58
Amennyiben szksges, vlasszuk ki a Window> Properties menpontot a Properties panel megnyitshoz! Ellenrizzk, hogy a bal oldalon a HTML gomb legyen kivlasztva! Mivel ehhez a weboldalhoz mr trsul egy kls stluslap, a szveg felveszi a hozz rendelt szn-, bettpus- s mrettulajdonsgokat az rvnyes CSS-szablyok szerint. Mindezek megjelennek a Properties panelen, amikor kijelljk a szveg valamely rszt, gy knny beazonostani a szveg formzst. Kattintsunk a What our customers say cmsorra! Megflgyelhetjk, hogy ez egy Heading 2 2 (Cmsor 2) elem. Az erre utal informcit a Properties panelen s a cmkevlasztban tallhatjuk meg.
"
. .... I What our customers say
<body.rwoC~FixUHdr> <d~ont~lntr> <divitNlnContent>
Unk
U10t IttlTl-
C msorok ltrehozsa
l Grgessk feljebb az oldalt, s kattintsunk brhova a The Villages szvegrszen bell!
None
../
~r.. ph Hudlng l Headlng 2
hogy a Properties panel ben a HTML gomb legyen kivlasztva! Vlasszuk ki a Heading 3 elemet a Properties panel Format (Formzs) menjbJ! A The Vi/lages rsz most a heading 3 vagy <h3> formzst kapta. A formzs jelentst trst a szvegrszhez, illetve knnyebben rtelmezhetv s rendezettebb teszi a cmsort kvet tartalmat.
Ellenrizzk,
3 Alkalmazzuk a heading 3 formzsi elemet a The Beaches szvegrszre is!

The Vilages
Be sure to vislt Fira, the capItai, and nearby Oia . Both offer st! sunsets, fine dining, and superiative shopping. Stunning wMe-washed walls Santorinl blue cupolas Colorful flowers Historic sites e""rywhere you look Oli"" groves dot the iandscape Eclectic shopping options please the most discerning shopper Night IWe that just won't quit
The B1eaches
59
Szmozott s pontozott listk ltrehozsa

A listk fontos szolglatot tesznek a weben, mivel knnyebben olvashatk, mint az egybefgg szvegtmbk, s gyorsabban meg lehet tallni a keresett informcit ltaluk. A kvetkez gyakorlatban pontozott listt fogunk ltrehozni az oldalon bell. 1 Jelljk ki a Both offir stunning summ, fine dining, and superlative shopping sor utni sszes mondattredket!
The Vilages
Be sure to
vis~
Firn, the capital, and nearby Oia. Both offer st
sunsets, fine dining, and superlative shopping .
~C (
'..l
f Q'.\'e-s
'l~
fe ~ la~
uS', wOl ~ QUlt
The Beaches
Miutn kijelltiik a szveget. kattintsunk az Unordered List (Pontozott lista) gomb ra a Properties panelen!
Megjegyzs: Amennyiben szmozott listt szeretnnk ltrehozni, a szmokkal jellt Ordered List (Szmozott lista) gombot kell kivlasztanunk.
Ezek ktlls vlasztgombok. Ha sajt listt gpelnk be, s nem szerernnk alkalmazni a felsorolsi elrendezst, kattintsunk jra a listagombra, hogy visszatrjnk az alaprtelmezett, bekezdsekbe val rendezshez! 3 4 Ismteljk meg az
elz
lpseket a The Beaches cmsor utni sszes szvegrszre!
Vlasszuk ki a File> Save menpontot!

The Villages
,----------------------------------.Be sure to vis it Firn, the capit al, and nearby Oia. Both offer stunning
sunsets, fine dining, and superlative shopping.
Stunning white-washed walls Santorini blue cupolas Colorful flowers Hlstorlc sites everywhere you Iook Olive groves dat the landscape Edettic shopping options please the most discerning shopper Night life that just won't quit
The Beaches
Beaches on every coast
No shortage of sandy fun

Swimming, water sports, boat tours Amenities near the beaches include cafes( tavernas, umbrella
Az Adobe Dreamweaver CS4 alkalmazssal
klnbz stlus listkat kszthetnk.
Az 5. leckben
az oldal hoz adott navigcis lehetsgeken keresztl tapasztalatot szerznk majd a klnfle stlus felsorolsokrl, gy egyelre meghagyj uk a listk alaprtelmezett belltst.
60
Egybefgg
szvegrszek ltrehozsa
A blockquote a HTML-programozsban sz szerint idzett szvegtmbt jelent, a gyakorlatban pedig a weboldalon bell ezzel a HTML cmkvel rudunk egyszeren behzott szvegrszeket ltrehozni. Az oldal lentebb lv rszn fogunk most dolgozni, ahol a What our customers say sor al tbb behzott szvegrszt is beillesztnk majd.
l
Helyezzk az egrmutatt brhova a
we loved Santorini more. . . bekezdsen bell!
Kattintsunk a Properties panel blockquote gombjra, amit az eszkzlers kiss pontatlanul Text Indent (Szveg behzsa) nven jell. Ezzel a gombbal rulajdonkppen <blockquote> cmkepr kz tesszk a kijellt szvegrszt. Amennyiben manulisan visszk be a tartalmat az oldalba, s a behzott szvegrsz utn szeretnnk a rendes bekezdsformzshoz visszatrni, kattintsunk a Text Outdent (Szveg kihzsa) gombra, amit a Text Indent ikontl balra tallunk meg!
Megjegyzs: A HTML-programozsban a szmozott felsorolst az <ol> (ordered list) cmke jelli, a pontozott listk pedig az <ul> (unordered list) cmkt hasznljk. Megfigyelhetjk, hogya cmkevlasztban ezek a listaopcik gy jelennek meg, hogy az <ul> s <ol> cimkk a teljes listt, az <Ii> (list items) cmkk pedig az egyes elemeket hatroljk.
Ismreljk meg a 2. lpsr a The flod at the little bistro ... , illetve a My whole family ... kezdet bekezdsen!
Dolores and Tom from Cedar Rapids wrote, We loved Santorinl more than any other spot we went. Everythlng is incredibly beautiful, every vista looks like a postcard . The food and shopping were outstanding and we loved the hotel you picked for us. Jerry and Elias said, The load at the little blstro on the rool with the caldera view of the setting sun is beyond extraordinary. We ate there faur times and every ~em we tried was wonderful. Thanks for ali your help in giving us a wanderfui trip.
I ..
Megan said,
My whole family Ioved Santorlni. Our hotel was so wonderful with mas.sages and great food . The shopping was flm. But our favorite was the beach . We like the watersports and the great litt~ tavernas near the water.
Most egy j CSS-szabllyal fogjuk mdostani a szvegtmbk stlust. 4 Kattintsunk a New CSS Rule ikonra a CSS Styles panel ben (-EJ)!
5 A New CSS Rule prbeszdablak Selector ljpe legrdl menjbl vlasszuk ki a Tag (redefines an HTML element) (Cmke -ltez HTML-cmke megjelentsnek m6dostsa) elemet! A Selector Name mezbe gpeljk be a blockquote nevet! (A blockquote nv kivlasztsra hasznlhatjuk a Selector Name mez mellerri legrdl ment is.) A Rule Definition legrdl menben ellenrizzk, hogy az j stlus ltrehozsnl a mystyles.css stluslap legyen kivlasztva! Kattintsunk az OK gombra!
61
SalKtor Type:
Choose a conltxrual seteaor type for YOU' CSS Nie.
! Tag (redeflne. an HTML element)

St*tor N&tH:
choose or enter a RoJme for your seM!ctor.
C.ncel
iblockQuote
Th Is selector name will apply your rule 10 al i < blockquote > elements .
(
RuM: Oennltlon:
Less Speci fle
) (
or. Specific
3
( Help )
Choc.. whore your rul< will be deflood.
l mystyle . css
6
A megnyl CSS Rule Definition for blockquote in mystyLes. css (CSS-szably meghatrozsa a blockquote cmkhez a mystyLes. css stlusLapon beLL) prbeszdablak Category oszlopbl vlasszuk ki a Box elemet! A Padding (Bels marg) belltsnl vegyk ki a pipt a Same for aLI (MinclenhoL egyenL) jellngyzetbl; a Right Uobb) s a Left (BaL) mezbe rjunk be 4-et, majd rendeljk hozzjuk a px (pixel, kppont) mrtkegysget a szomszdos legrdl menkbl! Trjnk t a Borcler kategrira! A Style rsz legrdl menben vlasszuk ki a soLid (egybefgg) tulajdonsgot, a Width menben pedig a thin (keskeny) jellemzt! A sznvlaszt megjelentshez kattintsunk a vlaszrngyzetre a CoLor kategriban! Vlasszuk ki a #OOC szn kd sttkk sznt! Kattintsunk az OK gombra!
Cttegory
~
ItKkground
-----------------------------\\1<1"' : [
Helght: 1 r
Iox
Blod<
Border
- --il
float:
Clur:
Un
PoslUonlng
Padding ___________ Margin __,,--_________
Exttnslons
0 50... '''' ..'

Top:
~ s'me for ali
~ f px
-:1
Top:
Right:
I p. -
7'l :
Rlght:
I po J+l
(px
~ IP,;=:n
..nom:
Lelt :
J1
Bottom:
CI f Pl(
~( po
:)
",,1._-,
lelt:
8 9
Vlasszuk ki a File> Save ALI menpontot, hogy a HTML s a CSS oldalt is elmentsk!
Az eddigi munknk megtekintshez hasznljuk a Live nzetet, vagy nyissuk meg az oldalt valamelyik bngszben!
62
3, LECKE Szvegek, listk s tblzatok kezelse
~,.........,.,..~ !
Cltqory
Berder
~round
Block
PoSitIoning Extuaslomi
Styl.
~ SAme for 1.11
Top: 1 .~ 1d
Right:
Bottam:
Width
Color
~ Same for al!
~ Same for ali

Ithl"
"
,
.IW
(7"
I~ !P;- :)
~rpX
L.:..
~
OOIld
solid
J..:...
~~
Ihl n
thln
--:)
. ~OOC
.cOC ..,OC
left: solid
...:.. r.-
r:-" ! px
t
...:...
thln
'7' \ j))t
:;
.,, .
. IOOC
Ilp
( App/y ) ( Concel ) (
olt
Tblzatok ltrehozsa
A web kezdeti idszakban mg nem hasznltak CSS stluslapokat: a weboldalakat tblzatokbl lltottk ssze, Sok bngsz a tblzatokat tovbbra is sorokba s oszlopokba rendezett adato kknt rtelmezi ahelyett, hogy az oldalszerkezet szerves rsznek tekinten azokat. A CSS megjelense utn sokan azt kezdtk hirdetni, hogy a tblzatok hasznlata helytelen, mivel az oldalelrendezseket CSS stluslapokkal kell kialaktani. Taln tlzs ezt lltani, mert br a tblzatok nem tkletesek oldalszerkezetek ltrehozsra, rendkvl hasznosak, St elengedhetetlenek az adatsorok s oszlopok megjelentshez, l 2 3 Amennyiben szksges, hasznljuk a Fi/es panelt a lesson03 mappa santorini.html dokumentumnak megnyitshoz! Grgessk le az oldalt egszen az Add a table here sorig! Trljk ki a szveget, s hagyjuk az egrmutatt ezen a helyen! Menjnk az Insert panel Layout flre, majd kattintsunk a Table ikonra! Ha az Insert panel ablak formjban jelenik meg, nem pedig a klasszikus svelrendezsben, a Layout kategria megjelense kiss eltr lehet, a Table (Asztal) ikon megjelense azonban a kt esetben megegyezik.
!,
l'
~~Ex pa~ .d L~ ~ L Im ~ e-ll.,".,_,0_"_:I_O_'1)_''_'.... ~ nd~ ~ '. ~ ___,',
layo ut
A Table prbeszdablakban a Rows (Sorok) mezbe rjunk be 6-ot, a Columns (Oszlopok) mezbe pedig 3-at! Gyzdjnk meg rla, hogy a width (szlessg), border (szegly), padding (bels marg6) s spacing (cellk kztti trkz) mez rese! A tblzat ezen tulajdonsgait CSS hasznlatval fogjuk meghatrozni, hogy a vgeredmny a kpernyn kvl minl tbb ms eszkzn is hozzfrhet s hasznlhat legyen. A Header (Cmsor) rsz bri kzl vlasszuk ki a Top (Fels) lehetsget, miltal a cmsorok mindig az oszlopok tetejn jelennek majd meg! A Caption (Cm) mezbe rjuk be a Santo rini Hotels cmet! Kattintsunk az OK gombra! A tblzat nem igazn eszttikus, sszeprselt formban jelenik meg a Dreamweaver dokumentumban, mivel jelenleg nincs benne tartalom , s nincsenek hozzrendelve paramterek. A Properties panel hasznlatval egyedi azonost nevet (ID-paramter) adhatunk tblzatunknak. rjuk be a hotels cmet a Table mezbe (ez a tblzat azonostja)!
63
Table sitt
Rows: Tabi ...,Idth:

lordtr thlcknen:
Cell pridding:
W--
Col,"",,,
ol
HHH
,pi....,
pixel,
\fij
5antonni Hotels
Cell spad"9:
Htader----
---------
AcCtSlibl11ty - - - - - - - - - - -- -
C.prioft: ' Slntorlni Hotels

Summary:
3
_ }
Hel.
CUKOI
)-
Kattintsunk a tblzat legfels sorn ak els celljba! Gpeljk bele a Town szt!
8 A tabultor letsvel ugorjunk a sor kvetkez celljra! rjuk be a Hotel szt! 9 ssk le jra a tabulto rt, majd az utols cellba rjuk be a Rating szt! Idtakarkossgi szempontbl egy elre elksztett tblzatot fogunk az oldalba msolni.
Megjegyzs: Ebben a gyakorlatban nem felttlenl szksges egyedi azonost nevet (ID) adni a tblzatnak, mivel egyetlen tblzat lesz csak az oldalon. Ha azonban tbb tblzatot szeretnk beszmi, a meghatrozs lehetv teszi, hogy minden tblzat eltr formzs legyen. Hasonlkppen azonostt adhatunk minden listnak, szvegtmbnek vagy brmely ms oldalrsznek a Properties panel segtsgvel.
10 Keressk ki a table.htm! dokumentumot a Files panel ben, majd a megnyitshoz kattimsunk dupln a nevre! 11 Kattintsunk brhova a tblzaton bell, s vlasszuk ki a <table#hotels > cmkt a cmkevlasztban!
. ---------, _ . -----_o, __ ___ ___ __
Santorln; Hotels
,
\
rr.-~!t~~~e:~~J~~~~~~ .' I'

I,
~:=::====:~~:::::::=.:j~:::=:.-:~",
:
]
t:::::::lt:::::::,C:::::' :: p
~=:===.::,..:~t::==:=.:::' ~::.::=:=.:::I I
li
Megjegyzs: Az 5. lpsben kitltttk a tblzat fels rszt, hogy tartalmazza az oszlopcmeket, azaz a <th> (table header) cmkket. Megfigyelhetjk, hogy ezek alaprtelmezett bellts szerint flkvrek. Br ez az sszeprselt tblzatban nem lthat, a <th> cimkk a cella kzepre is rendezik a szveget. Kattintsunk brmelyik res cellra a cmsor alatt, s megfigyelhetjk, hogy ezekhez a <td> (table data), vagyis tblzatcella cmke trsul. A cmkevlasztban tallhat ms tblzatelemek kztt szerepelnek a <table#hotels> s a <tr> cmkk is. A teljes tblzat kijellshez a <table#hotels>, egyetlen sor kiemelshez pedig a <tr> cmkt hasznlhatjuk. Kattintsunk a cmsorba, s megjelenik a <capton> cmke a cmkevlasztban.
12 A tblzat msolshoz vlasszuk ki az Edit > Copy menpomot, vagy ssk le a Comrol+C (Windows), illetve a Command+C (Macintosh) gyorsbillentyt! 13 Zrjuk be a table.htmL flet, s trjnk vissza a santorini.html oldalra!
64
14 A teljes tblzat kijellshez vlasszuk ki a <t ableith otels> cmkt, majd ssk le a Delete billentyt a megkezdett tblzatunk kitrlshez! 15 A teljes tblzat beillesztshez vlasszuk ki az Edit> Paste menpontot, vagy ssk le a Control+ V (Windows), illetve a Command+ V (Macintosh) gyorsbillenty t!
16 A File> Save menponttal mentsk el a munknkat!

Tipp: Abban az esetben, ha tblzatot jellnk ki, a Properties panellehetv teszi, hogy gyors vltoztatsokat hajtsunk vgre rajta, pldul, hogy j sort vagy oszlopot adjunk hozz. A tblzat trkzeit, bels margit, szeglyeit legegyszerbben a CSS hasznlatval tudjuk meghatrozni, ahogy azt a kvetkez gyakorlatban meg is tesszk. Emellett a Modify (Mdosts) menpont segtsgvel hozzadhatunk, vagyelvehetnk tblzatsorokat s oszlopokat.
Tblzatok formzsa CSS stluslapokkal

A Dreamweaver CSS-eszkzei a tblzatok sokfle megjelentst teszik lehetv. A kvetkez gyakorlatban CSS-szablyokat fogunk ltrehozni a tblzatok mretnek meghatrozsra s szeglye k hozzadsra. l 2 3 4 Amennyiben szksges, nyissuk meg jra a santorini.htmL fjlt gy, hogy a Fi/es panelben dupln a nevre kattintunk! Keressk meg a tblzatot az oldal aljn! Kattintsunk brhova a tblzaton bell, majd vlasszuk ki a <tableithotels > cmkt a cmkevlaszt ban! Kattintsunk a New CSS Rule gombra (U) a CSS Styles panelben gy, hogy kzben a tblzat ki legyen jellve!
5 A New CSS Rule prbeszdablakban vlasszuk ki a Selector Type legrdl men bl a Tag (redefines an HTML element) elemet! A Dreamweaver a Selector Name mezbe automatikusan a table nevet helyezi - a szerkesztablakban kijellt oldalrsznek megfelelen. Ellenrizzk, hogy a Rule Definition legrdl menben a mystyles.css stluslap legyen kivlasztva! Kattintsunk az OK gombra! Ezzel a lpsse! hozzadjuk a table szelektort a mystyles.css fjlhoz. A kvetkez lpsben az j szelektorra vonatkoz szablyokat fogunk ltrehozni.
65
5t5ector Ty.,.:
Choose a conttxtual selemr type for your CSS rule.
I Tag (red.finos an HTMlelement)

Sele<tor Name:
Cancel
Choose or enter a name for your seJeaor.

!table
'This seleetor name will apply your rule to ali <tabte> elements.
(
Ru"- Deflnltton:
Les' Specific
) (
Mor. Speci fle
3
( Help )
Choo.o _ro you< rUIe Will be deflned.

( mystyles.cs.
A CSS Rule Definition for table in mystyles.css prbeszdablakban vlasszuk ki a Category oszlop Box elemt! A Width mezbe rjunk be 475-t, majd trstsuk hozz a mellette lv legrdl menbl a px (pixel, kpponr) mrtkegysget! A Padding rszen rjunk be a Top mezbe 4-et! Ez az rtk automatikusan megjelenik a szvegdoboz tbbi oldaln is.
rT vp::-'----, ~: .
Bac:.kgroLlnd Ilod<
)order
CilltegOry
80x
W4dth: \.4750
u ..
....ghr
r:-- ---'i t!! ,,,,::.._,-,! ] P' :
PIiC
ele... :
'100" L I
_
To.:
J
l
_ _ _ __
Po!ottlonlng
Extensions.
Padding --;_ _ _ _ _ _ Margin _

T
:I_
Iii!! Sa... for .11

I~
('-", p. ,,
li!! Sa... for ali ~ cp;.-
!fil
Right: ~
....
i"
...:.., p.
lonom:
. C', ..- --:l

:::::'1..
\
. ' I
Left:
(Hel. )
Vlasszuk ki a Category oszlop Border ttelt! A Style terlet legrdl meniben lltsuk be a solid, a Width terleten pedig a thin jellemzt! A Color rszen vlasszuk ki a #OOC sznr! A Top, Right, Bottom s Left paramterek automatikusan kitltdnek ezekkel az rtkekkel. Kattinrsunk az OK gombra!
66
c.a~ory
lorder
Type Background Blod<
Style _ __
~~mt!fwilll
Top: & s.olld
R1ght:
Botto~:
soli~
~o,d
"'.
list
Wldth
Color
fi!iI Same for III
Poslllonlng
Exunslons
t"
I :
1n ""
thi n
1 f!! ~ PX
~ ! px
- .,, .
-ol
-~ .
~ ame for .Ifi

'#OOC
Left; solid
...
thi"
~ . 11
. M
",
IOOC #OOC
"'In
, PA
-C,
.6OOC
( Apply )( c.nc:el ) (
olt
Vlasszuk ki a File> Save Al! menpontot! Tekintsk meg az oldalunkat Live nzetben vagy egy bngszben! Lthatjuk, hogy megvltozott a szveg krli keret mrete s vastagsga. A tblzat kr szegly kerlt, az egyes cellk kr azonban nem. Figyeljk meg, hogy a keret a tblzat cmt nem foglalja magba!
Santorini Hotels Town Ara Ola lmerovlgll
Flra
Hotel Mikel's Suites Luxury Hotel Rota's Spa Hotel of Ola Greco Luxury Suites
Fira luxury Traditional Houses
Rating
**** .*** ****

****
Kamari
Eros Hotel Resort & Spa
****
A Dreamweaverhez val visszatrshez kattintsunk jra a Live View ikonra, vagy zrjuk be a bngszablakot!
10 Az j stlus ltrehozshoz kattintsunk a New CSS Rule gombra a CSS Styles panelben! A New CSS Style Rule prbeszdablakban szelektorlistt fogunk ltrehozni, amelyben az egyes szelektorok vesszvel lesznek elvlasztva egymstl. II Vlasszuk ki a Compound (based on your selection), azaz Osszetett (a kijellsnek megfelel) elemet a Selector ljpe legrdl menbl! Trljnk ki mindent a Selector Name mezb!, majd gpeljk be a th, td nevet!
Scltctor Typr.
ChOose a conleXtual selector type for your CSS rule.
! (ompound (based on you. selection)

s.lector Hame:
e_ e
fE
Cancel
Choose or enter a name for your selector.
Ilii
~
,
il
~.-
(
Itu" Ot:finition:
Less SpeCifle
) (r---; 'o- S:-- fi-- ) ~:- r.-:: p. c~l c
Choose where vour ruh! will be detlned.
I mystyles.css
Help
67
12 A Rule definition legrdl menben ellenrizzk, hogy a mystyles. css van kivlasztva, hogy az j szably ebben a stluslapban legyen meghatrozva! Kattintsunk az OK gombra! 13 A CSS Rule Definition for th, td in mystyles. css prbeszdablakban vlasszuk ki a Category oszlop Border elemt! Vlasszuk ki az elz tblzat szeglyhez megadott tulajdonsgokat (solid, thin, #OOC)! Kattintsunk az OK gombra!
Category
Border
Typ.
Background
Block
Styt.
Width
~ Slme for al!
thln
~.
Color
@ Sameforall
p><
Box
U$'
Positionln.g
Extf!Mions
I!I Sa",. lor .11

Top
I?'dl
solid
solid
ffi
..:... .... ..:..
'7'
:I
RJght: solid
Bottom:
thln
thln
....:.. , px
..... ,
(C :PX
Left:
IC
thin
. , PX
:I :l
I!J IO~C I!J IOOC I!J 100C I!J <ooc
I ( H".)
..."Iy ) (
Coo<" ) (
olt
Utols lpsben a tblzatcellk hatrvonalai kztti rst fogjuk megszntetni. A Dreamweaver CSS Rule Definition prbeszdablaka nem tartalmazza azt a tulajdonsgot, amely ehhez a CSS-szablyhoz szksges, ezrt sajt kezleg fogjuk azt hozzadni a CSS Styles panel hasznlatval.
.twoCoIFlxU:Hdr .footer
.twOColFlxLtHdr #footer p
.twoCoJF1xLtHdr #footer
.twoColFlxllHdr I'footer p .Aut

.flt1ft
.fllrt
.fh1ft
.dN.rfIoat
.n.l~
.na""
.profile
biod:q uote
.profiJe
blockqU01t th., td
..bio
Ih, Id
." (prinU
...
print.cn
thi n solid IOOC

4px
47Spx
14 Vlasszuk ki az Al! ablakot a CSS Styles panel ben, majd kattintsunk a table szelektorra az AlI Rules svban! A Properties for table (Ttiblzat tulajdonsgai) svban kattintsunk az Add Property (Tulajdomg hozzadsa) elemre! 15 Az res mezbe rjuk be a border-collapse (hatrvonal megszntetse) nevet! ssk le a tabultort, hogy a szomszdos mezbe jussunk! Gpeljk be ide a kvetkezt: collapse! ssk le az Enter (illetve a Retum) billentyt az j tulajdonsg s rtk jvhagyshoz! 16 Vlasszuk ki a File> Save AlI menpontot a teljes munkafolyamat elmentshez!
68
17 Tekintsk meg a munknk eredmnyt Live nzetben vagy egy bngszben!
s antonn I H ote s .
Town
Fira Oia Imerovigli Fira Kamari
Hotel
Mikel's Suites Luxury Hotel Rota's Spa Hotel of Ola Greco Luxury Sulte. Fira Luxury Traditionai Houses Eros Hotel Resort &. Spa
Rating
.***
****
****
**** ****
.,
Br mg mindig elg egyszer a tblzatunk, a szlessgi rtkek belltsa s a szegly hozzadsa ltal knnyebben olvashat s rthetbb lett. A tblzat megjelenst tovbb javthatjuk, ha a <capti o n>, <t a ble >, <t r >, <th>, <td> s ms tblzatelemekhez is trstunk CSS-szablyokat.
A dokumentum helyesrsi
ellenrzse
Fontos megbizonyosodnunk rla, hogy nincsenek hibk a tartalomban, amit a weben kzztesznk.
A Dreamweaver hatkony helyesrs-ellenrzt tartalmaz, amely kpes beazonostani a gyaluan hib-
san rt szavakat. tovbb szemlyre szabott sztrat tud ltrehozni. l 2 3 Amennyiben szksges, nyissuk meg jra a santorini.html fjlt gy, hogy dupln a nevre kattintunk a Files panel ben! Kattintsunk a <hl > cmkre a See Santorini's Best cmsor kiemelshez! Vlasszuk ki a Commands> Check Spelling (Parancsok> Helyesrs-ellenrzs) menpontot!
Commands
Site
Window
Help
{)o
Start Recording Plav Rec orded Comm and Edit Command List ... Cet Mor. Commands ... Cet AIR Extension .. .
Manage Extensions .. .
xx
Amikor megjelenik a Check Spel/ing prbeszdablak, rgtn megjelli az els tallt hibt vagy a szemlyes sztrbl hinyz els SZt.
word no< Ioond ln dICtIonary.
Check SP1'lIing
{)O F?
jSanlOrini
( Add to Peroon.1 )
Change to:
Suggestlons:
1s.m. !.Iio
Antoine.
"'mo
........
Change Ig.ore Ali Change Ali
Sanatoria
Sanctorum
Saunte.rin9
)
)
Snoring
San~torium
Help
) (
Close
Ha egy helytelenl rt SZt a Suggestiom Uavaslatok) rsz aktulisan javasolt szavra szeretnnk cserlni, kattintsunk a Change gomb ra! Ugyanezt elrhetjk gy is, ha a helyes szra kattintunk a Suggestiom listn, majd a Change gombbal kivlasztjuk azt. A Dreamweaver ezutn a kvetkez krdses szra ugrik. Ha biztosak vagyunk benne, hogy jl rtuk a SZt - ahogyan a mostani plda, a Santorini esetben is -, kattintsunk az Jgnore (Atugorja) gombra! A sztrunkhoz az Add to Personal (Felvtel
69
a sajt sztrba) gombra kattintva tudunk j szt hozzadni.

elfordulsa esetn nem fogja hibsnak tekinteni.
Ettl
kezdve a Dreamweaver a szt
Amennyiben a Check Spel/ing prbeszdablak egyik javaslata sem egyezik meg a sz helyes rsmdjval, a megfelel Szt begpelhetjk a Change to (Cserlje erre) mezbe. A Change gombra kattintva megtrtnik a csere.
Megjegyzs: A Dreamweaver az egrkurzor aktulis helytl kezdi a helyesrs-ellenrzst, majd amikor a dokumentum vgre rt, felajnlja, hogy amennyiben szksges, az elejtl kezdve jra ellenrzi a szve get. Ez a lps kikerlhet, ha a szvegkurzort rgtn a szveg elejre helyezzk.
Ismtelgessk ezt a folyamatot addig, amg az sszes krdses szt vagy lecserltk, vagy hozzadtuk a sajt sztrunkhoz! A Dreamweaver meg fogja krdjelezni a grg neveket, de ezek mind helyesen vannak lerva. Amikor a Dreamweaver jelzi, hogy a helyesrs-ellenrzs vget rt, kattintsunk az OK gombra a befejezshez! Ha a Dreamweaver felajnlja, hogy folytatja az ellenrzst a dokumentum elejtl, vlasszuk a No (Nem) lehetsget! Vlasszuk ki a File> Save menpontot amenrshez!
Megjegyzs: A Dreamweaver sajnos nem rendelkezik magyar helyesrs-ellenrz sztrral, gy magyarul ezt a funkcit rdemben nem hasznlhatjuk.
Spry eszkzlersok hasznlata

Az Adobe Dreamweaver CS4 tartalmaz egy Spry eszkzt, amely
teszi, hogy meghatrozhassuk a weboldalon megjelen, ler buborkok elhelyezkedst s megjelenst. Egyszer HTML-ben a ler buborkokat pldul az <a cro n ym> cmke segtsgvel hozzk ltre, az Adobe Dreamweaver CS4 Spry eszkze viszont JavaScript- s CSS-kdokat hasznl erre a clra. l 2 3 Amennyiben szksges, nyissuk meg jra a santorini.htmL fjlt, gy, hogy dupln a nevre kattintunk a Files panel ben! Jelljk ki az Oia szt a tblzat Town oszlopban! Kattintsunk a Spry Tooftip ikonra az Insert panel Spry kategrijban!
,..."
lehetv
...
"'~-.
,........-- ....... ,
...
,~'
...........
Grgessk le az oldalt egszen a szerkesztablak aljig! Keressk meg a Spry Tooitip: sprytooitipl terletet! Trljk ki a Tooltip content goes here helyrz szveget, majd rjuk be a helyre a kvetkezt:
Oia is pronounced Eea!
5 6
Vlasszuk ki a File> Save menpontot! Amennyiben ez az els Spry tooitip a szjtunkban, lehetsges, hogy a Copy Dependent Files (Kapcsold fjlok msolsa) prbeszdablak jelezni fogja, hogy kt j fjl addik a szjthoz. Kattintsunk az OK gombra! A prbeszdablak nem biztos, hogy megjelenik, mivel a lecke elejn megnyitott elnzeti oldal mr tartalmazta ezeket a fjlokat.
70
This page USti an obJt or bthaviOt (holt requlres supporting
flles. The foUowinv n~, have Men copJed to your local site. You
must upload them to your server ln order for the objut or behavIor to function cor't<tty.
SpryAs sels /SpryToolt1p.css
SpryAs sets/SpryTool[ Ip,j.
.,
7
(
GlI
'"
A ler bubork kijellshez kattintsunk annak feliratra: Spry Tooltip: sprytooltip! gy megismerkedhetnk a ler buborkra vonatkoz propertiespanel-Iehetsgekkel, amelyeket az eszkzlers belltsainak (pldul elhelyezkeds, idzts, megjelents, reakcik) mdostsra hasznl harunk majd . Egyelre ne vltoztassunk meg semmir!
CUJtoml2t (hh wldQt:t
o
O
'0I1aw .......
Hide on mouse 0lIl
lIl,a
8 ....
OlIInd
o ,.de
CSS Styles panel ben az Ali fl legyen kivlasztva! Grgessk lejjebb az Ali Rules svot, s keressk meg az j SpryTooltip.css fjlt, amely az oldal unkhoz addott! A SpryTooltip.css tartalmnak kibontshoz kattintsunk a Plus (+) gombra (Windows), illetve a nylra (Macintosh)!
Ellenrizzk, hogy a
Jltlft
.....
t.lblt
.dutflO.lt
,profUt
blockquote
th , ld
..
..
print.c.ss (print)
,Ur.ameTooltlp
"
Tipp: Minden egyes Spry eszkz, amit hasznlunk, egy CSS s egy Ja va Script fjlt ad a szjtunk gykrknyvtrnak SpryAssets mappjhoz. Figyeljnk oda, hogya szjt publiklsakor azt a mappt tltsk fel, amely mindezeket a fj/okat tartalmazza! Amikor a knyv leckinek elksztsekor hozzadtuk a SpryAssets mappt a Dreamweaver CIB knyvtrunkhoz, a mappa mr sok Ja va Script s CSS fj/t tartalmazott ezek kzl. A knyv lecki sorn szre fogjuk venni, hogya fjlok az oldalunkhoz kapcsoldnak anlkl, hogy megjelenne a Copy Dependent Files prbeszdablak.
9 Jelljk ki a . t o ol tipC o n tent elemet, majd a CSS-szably szerkesztshez kattintsunk a ceruza ikonra! 10 A CSS Rule Definition for .to oltip Content in SpryTooltip.css prbeszdablakban vlasszuk ki a Category oszlop background elemt! Vltoztassuk a httrsznt #345FA3 sznre a <h 2 > cmsorokban! Az els leckben mr megvltoztattuk a cmsor httrsznt a mystyles.css stlus lapban. Kattintsunk az OK gombra!
71
Category
--~~~(~k.-,o-n~~ o~ ,,:~ I~I3;4;5~;3~1~---------------u d - ~- : .

Bac.lcground-lrNge:
laclqjround
Block
Box
!ordt.r
L
L
( Bro........ )
Un
PositioninQ Extension!>
Bickground-repuc
Bac.kground-attKhment:
Blckground-positton (X):
, :------, r
r---":'
Background-positlon (Yl :
3
II Vlasszuk ki a File> Save Ali menponrot az sszes vltoztats menrshez! 12 Prbljuk ki a ler buborkot Live nzetben vagy egy bngszben! Az egrmutatt helyezzk az Oia sz fl az eszkzlers megtekinrshez!
13 Kattinrsunk jra a Live View gombra, vagy zrjuk be a bngszt, hogy visszatrjnk a szerkeszts mdba a Dreamweaverben!
Spry eszkzt adtunk egy alkalmazshoz, hogy olyan ler buborkot hozzunk ltre, amelynek az elhelyezkedst s megjelenst CSS stluslapokkal tudjuk meghatrozni.
Szvegek keresse s cserje

A Drearnweaver egyik leghatkonyabb funkcija a szvegek keresse s cserje. A webtervezk brmekkora mennyisg kijellt szvegre kereshetnek - st, akr res terleteket, sortrseket jelenr karakterekre, szkzkre s ms szvegelemekre is - az aktulis dokurnenrumon vagy egy teljes szjton belill. Kereshetnk csak az oldal szvegben, csak a kdban vagy egyszerre mindkettben. A halad felhasznlk akr minrakeres algoritmusokat is rhatnak az sszetettebb keressi s helyettestsi feladatokra. Ezeket az algoritmusokat regular expressiom (szablyos kifejezsek) nven ismerjk. Ebben a gyakorlatban egyeden kifejezst fogunk megkeresni s lecserlni az aktulis dokumenrumon bell. l 2 Amennyiben szksges, nyissuk meg a santorini.htmL fjlt gy, hogy a Fi/es panelben dupln a nevre kattinrunk! Vlasszuk ki az Edit> Find and Replace (Keress s csere) menpontot! Amikor megnylik a Find and RepLace prbeszdablak, vlasszuk ki a Current Document (AktuLis dokumentum) lehetsget a Find in (Keress helye) legrdl menbl! Hasznos lehet a Find in s a Search (Keress) menben elrhet lehetsgek alaposabb megismerse. A Find in menben a keress helyt adhatjuk meg; a rendelkezsre ll lehetsgek: seLected text (kijeLlt szvegrsz), current document (aktulis dokumentum), open documents (megnyitott doku-
72
mentumok), specified folder (meghatrozott mappa), documents chosen in the Fi/es panel (a Files panelben kivlasztott dokumentumok), illetve a current site (aktulis szjt). A Search menben a keress hatkrt hatrozhatjuk meg: Source Code (forrskdban), text in Design view (a szvegben Design nzetben), text located within set code, or specific tags (meghatrozott kdrszletek vagy cmkk szvegben). Ebben a gyakorlatban a shopper szt fogjuk megkeresni s lecserlni a buyer szra.
rjuk be a shopper szt a Find (Keresett szveg) mezbe, majd kattintsunk a Find Next (Kvetkez elforduls megkeresse) gombra! A Dreamweaver megtallja a keresett kifejezs els elfordulst. A Find Next gomb hasznlatval vgignzhetjk a keresett szveg sszes elfordulst, egyenknt megvizsglhatjuk azokat, s eldnthetjk, hogy lecserljk-e.
::
'.d
~~~'~~~~____________~9~e- ~~ ~ ~
I'
-""'' 1<----'_ _---'-'I

Opl\Dl'l$:
o MItCh
MUd'! ""W WhOIt .VnS
~ 10Il0l. ""'"UPKW
lM ,~l~ upt,,~
rjuk be a buyer szt a Replace mezbe, majd kattintsunk a Replace gombra! A Dreamweaver lecserli a keresett szveg els elfordulst, majd rgtn megkeresi a kvetkezt. Amikor az sszes elfordulst megtekintettk, a Dreamweaver egy kis zenettel jelzi a prbeszdablak aljn, hogy a kifejezs nem szerepel tbbszr a szvegben. Kattintsunk a Close gombra!
Ebben a gyakorlatban szvege t msoltunk be egy weboldalba, formztuk a cmsorait, bekezdseit, listit s behzott szvegrszeit. Ezutn tblzatot hoztunk ltre az oldalon, majd ler buborkot kapcsoltunk hozz. A Dreamweaver helyesrs-ellenrz s szvegkeres, illetve -helyettest eszkzeivel tnztk a weboldal szvegt, tovbb sszefgg szvegrszt, tblzatot s ler buborkot formztunk a CSS segtsgve!.
73
sszefoglals
sszefoglal krdsek
l 2 3 4 5 Hogyan formzunk egy Heading 1 vagy Heading 2 elemet? Fejtsk ki, hogyan lehet egy szveges dokumentumbl egyszeren szveget kimsolni, majd beilleszteni egy Dreamweaver weboldalba! Ebben a leckben pontozott listt hoztunk ltre. Hogyan kszthetnnk szmozott listt a weboldal rszre a tz legrdekesebb santorini clpontrl? Hogyan formzhatjuk a tblzat cmsort? Milyen keressi-helyettests i lehetsgeket alkalmazhatunk a Dreamweaverben?
6 Hogyan adhatunk hozz a tblzathoz ler buborkot, amely megmagyarzza, hogy a Fira sz msik rsmdja Thera? Mi befolysolja ennek a ler buborknak a formzst?
sszefoglal vlaszok
1
A Properties panel hasznlatval trsithatunk cmsorcmkket a szveghez, hl > -tl <h6>-ig).
elstl
hatodik szintig
2 3
A Dreamweaver meg tudja nyitni az elterjedt szvegesdokumentum-tpusokat, melyekbl tmsolharjuk s beilleszthetjk a szveget a weboldalunkba. rjuk be a lista szvegt a Dreamweaver szerkesztablakba, jelljk ki a teljes szvege t, majd kattintsunk az Ordered List gombra a Properties panelen! A msik lehetsg, hogy a Properties panel Ordered List gombjra kattintunk, begpeljk a listt, majd jra kivlasztjuk az Ordered List gombot alistaformtum szvegbevitel kikapcsolshoz. Hozzunk ltre a tblzatcm cmkjre th vonatkoz CSS-szablyt, majd formzzuk ignyeink szerint!
5 A Dreamweaver tud keresni a forrskdban, a Design nzetben megjelentett szvegben vagy mindkettben. A keress hatkre kiterjedhet egy kijellt szvegrszletre, az aktulis oldalra, oldalakat tartalmaz mappra vagy akr a teljes szjtra is.
6 Hasznljuk az els ler buborknl hasznlt mdszert! Vlasszunk ki egy szt, majd kattintsunk a Spry Tooltip gombra az Insert panel Spry kategrijban! Grgessk a szerkesztablakot az oldal aljig a ler bubork szerkesztshez! Az j eszkzlers a SpryTooltip.css fjl szablyai szerint lesz
formzva, gy tkrzi az elzleg vgrehajtott httrszn-mdostst.
4 Tervezs kpekkel
Charming N axos
The essential Greek isle
tr - ~"~
...
Na.<OS is a large Island wlth charming sea51de vlllage5, mountain viJ/ages, h/king trails, and wonderful fresh seafood.
The large island of Naxos has something for everyone . Wander the capital of Chora and enjoy the seaside dining, the fishing boats, the dellghtful shops and the nearby beach es. Wal k through the warren of wonderful shops and resturants to the castle atop the hill. It's a fairyland at night. A short stretch from Chora's seaside restaurant row to the marble Portera m the site of an abandoned is a stroll at
Ebben a leckben megtanuijuk, hogyan illeszthetiink kpeket a weboldafainkba.
76
4. LECKE Tervezs kpekkel
A lecke ttekintse
A kvetkezket fogjuk megtanulni: Kp beillesztse Httrkp alkalmazsa A Bridge alkalmazs hasznlata Photoshop, illetve Fireworks fjlok beillesztshez Kp tmsolsa Photoshopbl A Photoshop Smart Objects (intelligens objektumok) alkalmazs hasznlata
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessons mappt mereviemeznkre, szksg esetn csomagoljuk ki, s keressk meg a Lesson04 mappt!
Megjegyzs: A leckefjlok letltse az Elinduls fejezetben tallhal, a 2. oldalon.
A Dreamweaver szmos mdot ad a grafikkkal val munkhoz magn az alkalmazson bell, valamint egyttmkdve tovbbi grafikai szoftverekkel, mint amilyen az Adobe Fireworks CS4 s az Adobe Photoshop CS4.

Ahhoz, hogy pontosabb elkpzelsnk legyen a dokumentumrl, amit a lecke sorn ltre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben!
l
2
Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Ha nem ltszik a Files panel, ssk le az F8 billenryt az elhvshoz, majd vlasszuk ki a DW CIB elemet a szjtok listjrl!
3 Bontsuk ki a lesson04 mappt a Files panel en!

4 Jelljk ki a naxos-finished.htmlfjlt, majd ssk le az FI2 (Windows), illetve az Option+FI2
(Macintosh) gyorsbillenryt, hogy megjelentsk az oldalt az elsdleges bngsznkben! Az oldal szmos grafikt tartalmaz mind az eltrben, mind a httrben, tovbb egy Photoshop Smart Objectet (Photoshop intelligens objektumot) is. 5 Zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez!
Kp beillesztse
A kpek a weboldalak kulcsfontossg sszetevi. Az Insert panel szmos olyan gombbal rendelkezik, amely egyszerv s gyorss teszi a grafikk beillesztsr. Helyrz grafikkat is adhatunk az oldal hoz, s a helykre vgleges gra.fikkat illeszthetnk be, ahogyan azt az els gyakorlatban tenni fogjuk. l 2 Bontsuk ki a lesson04 mappt a Files panelben, majd a naxos-start.html fjl megnyitshoz kattintsunk dupln a nevre! A File> Save As menponttal mentsk el a fjlt naxos.html fjlnv alatt a lesson04 mappba! gy, ha a naxos-start.html oldalban szeretnnk valamit megkeresni, az eredeti formjban tallhatjuk meg a szmtgpnk merevlemezn. Bizonyos esetekben a helyrz grafikk azoknak a vgleges
77
Charming N axos
I!t ,
~.
I:
...... (2GIs JlI8)
The large Island of Naxos has sometl'ting for everyone. Wandel" the capital of ChOl'lllllnd enjoy the se3slde dining, the /i:shlng boats, the delrghtfvl shops and the neartry beaches. Welk through the warren of wonderful shops and re.9turants to the casUe atop the hfi:' It's II fairyland at night.
A short stretch from Chora'5 seaslde restaurant row to the marble
NdJrO$ ls
,.~
lslMJd ",it/)
FOrtel1! marking the site ol an abandoned temple sunset.
ls
a Iovely stroll at
ch.wm~ $e.slde~.
grafikknak a helyt jellik, amelyeket a lecke folyamn fogunk az oldalba illeszteni. Ms helyeken az resen hagyott terlet jelzi a grafika helyt. 3 Jelljk ki a portara (200x250) cm helyrz grafikt, majd ssk le a Delete billentyt a trlshez! 4 Vlasszuk ki az Insert panel Common (Kzs) flt, majd kattintsunk az Image (Kp) ikonra (~ ! Ha nem lthat az Image ikon az Insert panelben, kattintsunk az Images gomb melletti, lefel mutat nylra, s vlasszuk ki az Image elemet! A tbbi, Insert panelen keresztl elrhet menhz hasonlan az Images men els helyen a legutbb kijellt objektumot jelenti meg. Amikor megjelenik a Select Image Source (Kp forrsnak kivlasztsa) prbeszdablak, keressk ki az images mappt, majd vlasszuk ki a naxos-portara.jpg kpet! Kattintsunk az OK (Windows), illetve a Choose (Macintosh) gombra!
rjuk be a Naxos Portara cmet az Image Tag Accessibility Attributes (Kpcmke hozzJrhetsgi tulajdonsgai) prbeszdablak Alternate Text (Alt szveg) mezjbe, majd kattintsunk az OK gombra! Az Assets (Eszkzk) panel hasznlatval is hozzadhatunk grafikt az oldalunkhoz. A Delete billenty letsvel trljk ki az imnt az oldalhoz adott naxos-portarajpg kpet! Vlasszuk ki a Window> Assets (Ablak> Eszkiizk) menpolltot! Amikor megnylt az Assets panel, kattintsunk a bal oldali sv legfels elemre, az Images ikonra (1fIl)! Grdtsk lejjebb a svot, s vlasszuk ki a naxos-portarajpg kpet! (A listban kett is van, de azonosak, mindegy, melyiket vlasztj uk.) A panel listzza a grafikk nevt, kppolltokban meghatrozott mrett, illetve a fjlok tpust s elrsi tvonalt. Ahhoz, hogy mindez az informci jllthat legyen, elfordulhat, hogy meg kell nveln nk a panel mrett.
7 8 9
10 Kattintsunk a panel aljn tallhat Insert gombra ahhoz, hogy beillesszk a kpet az egrkurzor jelenlegi helyre! A Dreamweaver azt is lehetv teszi, hogy ha szeretnnk, be is hzhassuk az egrrel a panelrl az oldalra a graftka ikonjt.
78
II Az Image Tag Accessibility Attributes prbeszdablakba gpeljk be a Naxos Portara cmet!
Kattintsunk az OK gombra! 12 Vlasszuk ki a File> Save menponrot amenrshez!

Megjegyzs: Ogy is megnyithatjuk a Select Image Source prbeszdablakot, s kicserlhetjk a helyrz grafikt a vglegesre, hogy dupln a he/yrz kp nevre kattintunk. Ezt a mdszert haszn/va be kell gpe/nnk az a/t (alternatv) szveget a Properties panel Alt mezjbe, mivel ehhez a helyrz kphez nem tartozik alt szveg.
Helyrz
kpek hasznlata
A helyrz kpek nagyszer eszkzk weboldalak tervezsekor, ha mg nem llnak a rendelkezsnkre a vgleges kpek. Ezek a kpek egyszer, szrke tglalapknt jelennek meg a Dreamweaverben - kzpen a beilleszteni kvnt kp cmvel s mreteivel. A helyrz kpeket csak a tervezsi folyamat sorn hasznljuk, ezrt, ha megtekintjk az oldal elnzett egy bngszben, a kpek nem jelennek meg. Egyes bngszk awnban - mint pldul a Microsoft Internet Explorer - jelzik a kp hinyt. Kvessk a kvetkez lpseket a helyrz kp beillesztshez: l Helyezzk az egrkunort oda, ahov a helyrz kpet be szeretnnk illeszteni!
2 Az Insert panel Common kategrijban vlasszuk ki az Images men Image Placeho/der ikonjt ~)! 3 Amikor megnylik az Image Placeholder prbeszd ablak, gpeljk be a grafika nevt a Name
mezbe!
( ol( ,
(
(
C-=411
H.lp
)
)
Megjegyzs: A megadott nv nem tartalmazhat szkzket vagy klnleges karaktereket. Kiss nagybetket, valamint alulvonst (pl. Our_House) hasznlhatunk a helyrzk elnevezsnl.
rjuk be a kvnt szles get a Width (Szlessg) mezbe, a kvnt magassgot pedig a Height (Magassg) mezbe! Miutn beillesztettk az oldalba, a helyrzt brmikor tmretezhetjk Design nzetben. Ha az alaprtelmezett szrke szn helyett msik sznt szeretnnk hasznlni, kattintsunk a sznvlasztra, s vlasszuk ki az j sznt a pipetta segtsgvel! frjuk be a beilleszteni kvnt kp alt szvegt az Alternative text mezbe, majd kattintsunk az OK gombra!
5 6
Ahhoz, hogy a helyrz grafikt a vglegesre cserljk, kattintsunk r dupln, s vlasszuk ki a beilleszteni kvnt kpet a Select Image Source prbeszdablakban! A beiJlesztett kp tveszi az adott nevet s az alt szvege t is a helyrz kptl.
79
HUrkpek hasznlata
A weboldalak ktfle kpet tartalmazhatnak: eltrben lv kpeket s httrkpeket. Az eltrben lv kpek webgrafikk OPG, GIF vagy PNG formtumban) , amelyeket az <img > cmkvel illesztnk az oldalba,. Az elz gyakorlatban eltrben lv kpeket illesztennk be. A httrkpeket ezzel szemben CSS segtsgvel helyezhetjk el. l 2 Amennyiben szksges, nyissuk meg az elz gyakorlatban hasznlt naxos.html fjlt gy, hogy dupln a nevre kattintunk a Fi/es panelen! Vlasszuk ki a WincWw > CSS Styles menpontot, s ha szksges, kattintsunk az Al! gomb ra a CSS Styles panelen az Al! mdba val tvltshoz!
3 4 5
~Hdr ftM.&IY:f
,fWOCoiIhllHl1r A um, III .I'WOCoIf' lIHdt llit Nrl ...

hidebIri " .twOCaIfllruHcl\' ...... IaCOIII.'"
4
1
1rNkC0000llf hl . -'.:~'"' .twoCoIfilItlHdt If~ 'f .twoCcIfb.Wtr "OOI !t I)
A mystyles.css alatti listban vlasszuk ki a . twoC o lFi x LtHdr #container elemet, majd kattintsunk az Edit Rule ikonra (' )! Amikor megnylik a CSS Rule Definition for .twoColFixLtHdr #container in mystyles.css prbeszdablak, vlasszuk ki a Category oszlopbl a Background elemet! Kattintsunk a Browse gombra, majd a Select Image Source prbeszdablakban keressk ki az images mappt, s vlasszuk ki benne a line.gijfjlt!
....,~.t ..
;;.>t.~
...,.
li sl
h>"tIot!ltlIJ
[K'I"'lCOfIl
.. . ..""
A Backgroundrepeat (Httrismtls) legrdl menben vlasszuk ki a repeat-y (ismtls az y tengelyen) lehetsget!
The esse
The large island
capltal of Cnot'lll dellqhtful shop'

WaKc throu gh t castle "lop the
A short stret.ch Portera mar~ g sunset .

charmlng
mou"!"/,,
sns1de v~. ~, hfkklg tnils,
Take a day trlp
and wOfldet1tJ1 (resh sHfrxX1.
beautiful mount fabriCs and caf
80
Kattintsunk az OK gombra! Ez a parancs ismtelni fogja a kpet az y-tengely mentn, ami gy kitlti a teljes befogad terletet. 7 Vlasszuk ki a File> Save All menpontot!
Mivel a CSS-sdlusszably egy kls stluslapban van meghatrozva, a Dreamweaver automatikusan mdostja a fjlt, hogy mdostani tudjuk a stlust. Mentsk el az oldalt s a stluslapot is, hogy megriz zk a vgrehajtott mdostsokat! A szerkesztablak bal fels sarkban, kzvetlenl a dokumentum neve alatt megtallhatjuk a Source Code (Forrskd) gombot s a trstott fjlokat, mint pldul a mystyh ess stluslapot. Az el nem mentett fjlokat az alkalmazs csillaggal (*) jelli. Vlasszuk ki a File > Save All menpontot, amellyel mind a HTML fjl, mind a trstott fjlok vltozsait elmenrhetjk!
A Properties panel hasznlata kpek szerkesztshez

A webgrafikk hasznlata akkor optimlis, ha a kpek mrete s minsge egyenslyban ll a fjlmrettel. A webtervezk gyakori feladata az oldalba illesztett grafikk optimalizlsa. A Dreamweaver olyan beptett grafikus funkcikkal rendelkezik, amelyek segtsgvel a lehet legjobb kpminsget rhetjk el a legkisebb fjlmret mellett. Ebben a gyakorlatban a Dreamweaver beptet{ eszkzeit fogjuk hasznlni egy gyakori web tervezsi feladatra, egy kp webes clokra val optimalizlsra s tmretezsre. l 2 Amennyiben szksges, nyissuk meg a naxos.htm! fjlt dupln a nevre kattintva a Files panel ben! Ha nem lrhat, jelentsk meg a Properties panelt a Window > Properties menpont kivlasztsval!
Alt [Naxos Portara
Edit
Bord ..
Jelljnk ki egy kpet a szerkesztablakban! Amikor a dokumentumban kijell nk egy kpet, szmos szerkesztsi lehetsg jelenik meg a Properties panelen, az Alt legrdl men alatti rszen. Az egyes gombok funkcijnak rszletes lerst a Dreamweaver grafikai eszkzei cm keretes szvegben talljuk meg.
Megjegyzs: Ha a line. gif fjlt Photoshopban vagy Fireworksben tekintjk meg, pontosan az oldalelemnek megfelel szlessg grafikt fogunk ltni, amelyen az oldal teljes hosszn ismtld vonalminta fut vgig.
Ha a Properties panel image gombjra kattintunk, Photoshopban vagy Fireworksben szerkeszrhetjk az oldalt. A tbbi gombbal a Dreamweaver image preview (kp elnzete) prbeszdablakban mdosthatjuk a kp belltsait, pldul megvghatjuk, llthatunk a kontraszron s az lessgen. 3 gy, hogy kzben ki legyen jellve a kp, kattintsunk az Edit Image Settings (Kp belltsai) ikonra a Properties panelen! Amikor megnylik az Image Preview prbeszdablak, ellenrizzk, hogy a Format (Formtum) legrdl menben a JPEG legyen kivlasztva! A Quality (Minsg) mez melletti nylra kattintva egy csszka jelenik meg, amit hzzunk a 79-es rtkre! Az Image Preview prbeszdablak szmos kp-optimalizcis lehetsget knl . Vltani tudunk pldul a webgraflkai formtumok kztt, gy GIF formtum kpeket JPEG
81
Format: JPEG
Quollty: .""
~j
Prog .... ,..
@Shllpen Color &Jgu
Mattlt:Q
, I!I Remove unustd colon.
4
JPEG JPfG QoIoIlty 4<1
2.82K
Me.
Milli....
PreYIew
I [,---=-----,~r.. Slved SdtJngs:

:
~
56kbps
EB
( Help )
It
f> .'
L!,]
41 .,.
formtum fjlokk tudunk alaktani. Ha a JPEG formtumot vlasztj uk, a kp minsgi fokt is meghatrozhatjuk: minl jobb a minsg, annl rszletgazdagabb a kp, viszont annl nagyobb a fjlmret is. Hasznljuk a comparison (sszehasonlts) funkcit, hogy megtalljuk a minsg s a kpmret kzti optimlis egyenslyt! 4 Kattintsunk az Image Preview prbeszdablakban a megjelentett kp alatt tallhat 2 preview windows (2 elnzeti ablak) gombra Cm)! Amikor az elnzeti kp kt nzetre vlt t, kattintsunk az als nzetre, s hzzuk a Quality csszkt a 40-es rtkre! jl szrevehet a kt kp minsge kztti klnbsg. A fjlmretklnbsg nem olyan jelents C6,72 kilobjt a 79-es minsg s 2,82 kilobjt a 40-es JPEG esetben), a minsgi klnbsg mgis szmottev. A 40-es rtknl a minsg ltvnyosan cskkent. Vltsunk vissza 79 szzalkos kpminsgre gy, hogy a fels kpre, majd az OK gombra kattintunk!
5 Vlasszuk ki a File> Save menpontot a munknk elmentshez!

Tipp: A Dreamweaver Preferences for File Types/Editors (Fjltpusok/szerkeszt6eszkzk belltsa) rszben megadhatjuk a Fireworks, a Photoshop vagy brmely ms kpszerkeszt alkalmazst elsd leges kpszerkesztnek. Miutn megtettk ezt, a Properties panel Edit (Szerkeszts) gombjra kattintva a kp a kivlasztott elsdleges kpszerkeszt alkalmazsban nylik meg. Ha mg nem hatroztunk meg elsdleges kpszerkeszt alkalmazst, az Edit gombra val kattintskor egy prbeszdablak jelenik meg, s felszlt annak kivlasztsra. Ha egy msik szerkesztgombra, pldul az Edit Image Settings (Kpbelltsok szerkesztse) gombra kattintunk, a kp a Dreamweaver Image Preview (Kp elnzet) prbeszdablakban nylik meg.
82
A Dreamweaver grafikai eszkzei

A Dreamweaver sszes grafikai eszkzt elrhetjk a Properties panelen keresztl, miutn kijelltnk egy kpet a szerkesztfelleten. A hat rendelkezsre ll eszkz a kvetkez:
Edit (Szerktszts)
Update from Original (Friss/tis az mdeti fjlbl)
Crop (Mbme vgs)
Brighmess and Contrast (Fblyer s kontraszt)
Edit Image Smillgs (Klpbellitsok szerkesztse)
Rcsample (OjrasZmols)
Sharpm (les/tis)
Edit (Szerkeszts) - Megnyitja a kijellt kpet a megadott kls grafikai alkalmazsban. Az Edit menpont alatti Preferences prbeszdablak File Tjpes/Editors kategrijban minden
egyes fjlformtumhoz megadhatjuk a hasznlni kvnt grafikai alkalmazst. A gombon lthat ikon a vlasztott alkalmazsnak megfelelen vltozik: ha a Fireworks a megjellt kpszerkeszt alkalmazs az adott kpformtumra, a Fireworks ikonja jelenik meg a panelen; ha a Photoshop a kpszerkeszt, akkor a Photoshop ikonjt fogjuk ltni.
Edit Image Settings (Kpbelltsok szerkesztse) - Az aktulis kpet az Image Preview prbeszdablakban nyitja meg. Az Image Preview prbeszdablak amellett, hogy hozzfrst biztost a jelen gyakorlatban hasznlt optimalizl eszkzkhz, grafikk mretezshez s animlt GIF belltsainak szerkesztshez is hasznlhat.
Update from Original (Frissts az eredetifjlbl) - Smart Objectet rendel az j mrethez.

A Photoshop alapfjl vltozatlan marad.
Crop (Mretre vgs) - A kp nem kvnt rszeinek eltvoltsra szolgl. Amikor kivlasztjuk a Crop eszkzt, a kpen megjelenik egy vgdoboz fogpontokkal a sarkain s a szlein. A fogpontokat megragadva s elhzva belthatjuk a vgdoboz mrett, azaz kijellhetjk a kpnek azt a rszt, amelyikre szksgnk van. Kattintsunk dupln a kpre a nem kvnt kprszek eltvoltshoz!
Resample (jraszmols) - jraszrntja a szerkesztfelleten tmretezett kpllomnyt. A Resample eszkz csak a kp tmretezse utn rhet el. Brightness and Contrast (Fnyer s kontraszt) - Ezzel az eszkzzel korriglhat juk a tl stt
vagy tl vilgos kpeket. A prbeszdablak kt kln csszkt tartalmaz - az egyikkel a fnyert, a msikkal a kontrasztot llthatjuk be. Elnzeti kp is tartozik az eszkzhz, amin lthatjuk a belltsok hatst, mieltt vglegestennk azokat.
Sharpen (lests) - A kpen lthat objektumok szleinek lessgt szablyozhatjuk egy O-tl lO-ig terjed skln lltva a pixelek kontrasztjt. A Brightness and Contrast eszkzhz
hasonlan ez a bellts is rendelkezik elnzeti kppel.
A grafikai mveletek mindegyike visszavonhat az Edit> Undo (Szerkeszts> Visszavons) menpont kivlasztsval egszen a dokumentum bezrsig vagy a Dreamweaverbl val kilpsig.
83
Msols s beilleszts Photoshopbl

A webtervezk nagy rsze a Photoshopot hasznlja az elzetes weboldalszerkezetek megtervezsre. A vgleges Dreamweaver oldalszerkezet lrrehozshoz a Photoshop kompozcinak csak bizonyos rszeire van szksg, mivel a tbbi oldalelem szveges vagy CSS-alap. A Photoshop CS4 s a Dreamweaver CS4 hasznlatakor a Photoshop kompozci brmely kijellt rszt egyszeren tmsolhatjuk s beilleszthetjk a Dreamweaver oldalszerkezetnkbe. Az Image Preview prbeszdablak kzvett szerepet jtszik ebben a folyamatban : a megfelel formtumra alaktja t a fjlt.
Megjegyzs: A kvetkez gyakorlat elvgzshez Adobe Photoshop CS4 alkalmazs szksges.
l 2
Amennyiben szksges, nyissuk meg jta a naxos.html fjlt dupln a nevre kattintva a Files panelen! Helyezzk az egrmutatt a The mountains shelter golden fertile valleys where you 'll see fields and crops mingled with small churches and imposing churches bekezds vgre! A megfelel helyet res bekezds jelli. Indtsuk el a Photoshop CS4 alkalmazst, majd vlasszuk ki a File > Open menpol1tot! Amikor megjelenik az Open prbeszdablak, keressk ki a szksges fjlt a kvetkez tvonalon: images> PSD >naxos-images.psd. Kattintsunk az Open gombra! A fjllayereket, azaz rtegeket tartalmaz; minden egyes kp msik rteghez tartozik.
Cirt Ott lhe luch
Ha nem ltszik, vlasszuk ki a Window > Layers (Ablak> Rtegek) menpol1tot a Layers panel el hvshoz a szerkesztablak tetejn! Vlasszuk ki a Happy Family cm rteget a Layers panelen!
5 A Tools eszkzpanelen vlasszuk ki a Rectangular Marquee (Ngyszgletes kijell) eszkzt, s hzzunk kerete t vele a happy family kp kr! 6 7 Vlasszuk ki az Edit> Copy menpol1tot a kijellt kp msolshoz! Zrjuk be a Photoshop alkalmazst anlkl, hogy elmentennk a kpet, s trjnk vissza a Dreamweaverhez! Vlasszuk ki az Edit> Paste menponrot a Dreamweaverben! Amikor megnylik az Image Preview prbeszdablak, ellenrizzk, hogy aSaved settings legrdl menben a JPEC - Better Quality Uobb minsg) legyen kivlasztva, majd kattintsunk az OK gombra!
84
4 . LECKE Tervezs kpekkel
Megjegyzs: Ha azt szeretnnk, hogya kijellt kp tbb rteget tartalmazzon. vlasszuk ki Copy Merged (sszes rteg egyestett msolsa) menpontot!
az Edit>
Amikor megnylik a Save Web Image prbeszdablak, keressk ki az images map pt! rjuk be a happy-family.jpg cmet a File name mezbe, majd kattintsunk a Save gombra! A Photoshopbl kimsolt kp beillesztdik a dokumentumba. Vlasszuk ki a File > Save menpontot amentshez!
"
Habr a Dreamweaver az eredeti Photoshop fjlhoz kti a kpet, ez nem egy inteUigens objektum, mint az Adobe Photoshop Smart Object elemei, mivel nem hasznlhat klnbz oldalakon s mretekben. A lecke ksbbi rszben Smart Object elemekkel is fogunk majd dolgozni.
Az Adobe Bridge alkalmazs elrse
Az Adobe Bridge CS4 program elnevezse tall, mivel hidat kpez az Adobe Creative Sui te termkcsoporthoz tartoz alkalmazsok kztt, amelyek kz a Dreamweaver is tartozik. A Bridge segtsgvel gyorsan bngszhetnk a kpeket s egyb tmogato tt oldalelemeket tartalmaz knyvtrakban s a kulcsszavas cmkefjlok kztt, illetve knnyen elrhetnk professzionlis kpanyagokat knl webhelyeket, mint pldul az Adobe Stock Photos. A Bridge teljes mrtkben illeszkedik a Dreamweaverhez: a Bridge alkalmazst elindthatjuk a Dreamweaver kezelfelletrl, a kpeket pedig megfoghatjuk s thzhatjuk a Bridge-bl a Dreamweaver weboldalunkba gy, hogy kzben nem kell elhagynunk a Bridge alkalmazsr.
Megjegyzs: Ezt a kpet a naxosfinished.html oldalon hasznltuk, s mr ltezik az images mappban. Kattintsunk a Replace gombra, hogy az aktulisan mentett kpre cserljk!
l 2 3
Amennyiben szksges, nyissuk meg jra a naxos.html fjlt dupln a nevre kattintva a Fi/es panelen! Helyezzk az egrmutatt a The essential Greek isle cmsor alani tartalmi rsz el! Vlasszuk ki a File > Browse in Bridge (Fjl> Bngszs a Bridge alkalmazsban) menpontot! Megjelellik egy prbeszdablak, ami rkrdez, hogy mindig megnyjon-e a Bridge belpskor. Mivel a kvetkez gyakorlatokban nem fogjuk hasznlni a Bridge alkalmazst, kanintsunk a No gombra! Amikor megnylik a Bridge, kattintsunk a Fo/ders flre az images> BridgeSource mappa kikeresshez!
~
85
Vlasszuk ki a View> Compact Mode (Nzet> Kompakt mdj menpontot! gy is tvlthatunk Compact mdba, hogy a Switch to Compact Mode-ra (a legfels eszkzsor jobb utols gombjra) kattintunk. ACompact md negyedre cskkenti a Bridge kezelfellet mrett a kpernyn, s alaprtelmezett beUtsknt mindig a tbbi alkalmazs felett jelenti meg - az egyszerbb bngszs s msols elsegtsre. Ha szksges, hzzuk le a csszkt az e1nzeti kpek mretnek cskkentshez! Hzzuk a teljes kezelfelletet akkorra, hogy a kpek a Bridge s a Dreamweaver dokumentumban is jl lthatak legyenek! Fogjuk meg s hzzuk t a girL-on-beach.jpg kpet a Bridge-bl a Dreamweaverbe, s helyezzk a tartalmi rsz elejre! rj uk be az Image Tag Accessibility Attributes prbeszdablakba a Getting some sun kpcmet! Kattintsunk az OK gombra! Vlasszuk ki a File> Save menpontot a Dreamweaverben! Kattintsunk a Live View nzetre, vagy ssk le az FI2 (Windows), illetve az Option+F12 (Macintosh) gyorsbillenryt, hogy megtekintsk az oldalt az elsdleges bngsznkben! Ha vgeztnk, trjnk vissza a Bridge-hez, s zrjuk be a programot!
7 8 9
Photoshop Smart objektumok hasznlata

Ms graf1kkkal ellenttben a Smart Objects (Smart objektumok) kzvetlenl kapcsoldnak egy Photoshop (PSD) fjlhoz. Ha egy PSD fjlt brmilyen mdon megvltoztatunk, a Dreamweaver felismeri ezeket a vltoztatsokat, s felajnlja a webgraf1ka frisstst. Egyetlen PSD fjlt szmos oldalba elhelyezhetnk Photoshop Smart Objectknt, s a grafika minden egyes elfordulst egy lpsben tudjuk frissteni. l Amennyiben szksges, nyissuk meg a naxos.html dokumentumot!
)
I:: I:
S.kCl
t n,J(1';:r,OIr.
(o..uSOu/'cu-::;1'!" ,ft _J(
~t~)
( CIIM4:1 )
86
2 3
Kattintsunk dupln a church helyrz kpre az oldalsvban! A Select Image Source prbeszdablakban bngszssel keressk ki az images> PSD > naxoschurch.psd fjlt, majd kattintsunk az OK (Windows), illetve a Choose (Macintosh) gombra! A PSD gra6kr az Assets panelbl is thzhatjuk a Dreamweaverbe. Mindkt esetben megnylik az Image Preview prbeszdablak.
Az Image Preview prbeszdablak Format legrdl menjbl vlasszuk ki a JPEG formtumot! A Quality mezt hagyjuk 80%-os rtken! Kattintsunk az OK gombra!
minsget
Tipp: A JPEG formtum kpek esetben a
O-tI100-ig terjed szzalkszm fejezi ki. Egy kp elsknt egy bizonyos szzalkszmmal jelenik meg a kp forrstl fggen, ami valsznleg egy digitlis kamera. A GIF kpek esetben azonban a minsg a sznek szmban fejezdik ki. Minl tbb sznt tartalmaz egy GIF fjl, annl nagyobb a mrete, ez viszont nem felttlenl jelent jobb min sget. Egyes GIF kpek meghatrozott szm sznt tartalmaznak, s magas minsgek maradnak akkor is, ha a sznek szmt a kisebb fj/mret elrse rdekben cskkentjk.
4
Smoothlng ' o
PTogreulve
Sharpen C.r Edgel
Matte: Q
S Remow: unused colors
Help
5 A Save Web Image prbeszdablakban keressk ki az images mappt, majd kattintsunk a Save As gombra, hogy a fjlt naxos-church.jpg nven elmentsk! Ezt a kpet a naxosfinished.html oldalon mr hasznltuk, s mr ltezik az images mappban. Kattintsunk a Replace gombra, hogy az aktulisan mentett kpre cserljk! 6 Az Image Tag Accessibility Attributes prbeszdablakba rjuk be a Naxos church cmet, majd kattintsunk az OK gombra! Ha nem jelenik meg az Image Tag Accessibility Attributes prbeszdablak, a szveget a Properties panel Alt mezjbe is berhatjuk. A bal fels sarokban egy Smart Object jelet lthatunk. A zld krbefut nyl azt jelzi, hogy ez a kp szinkronizlva van az eredeti PSD llomnnyal. A 300 pixel szlessg kp azonban tl nagy ahhoz, hogy meg tudjon jelenni az oldalsvban.
87
Fogjuk meg a kp jobb als sarkt, s a Shift billentyt lenyomva tartva hzzuk felfel s befel a fogantykat a kp tmretezshez! A Shift billenty nyomva tartsval gy tudjuk tmretezni a kpet, hogy annak kparnyai vltozatlanok maradnak. Kzben figyeljk a Properties panelen a Width (Szlessg) rtket, s lljunk meg, amikor elrtk a 200 px mretet! Elfordulhat, hogy nem jelenik meg a foganty a kp sarkn, mivel egy msik oldalelem zavarja a megjelentst, ilyenkor hasznljuk az Image Preview prbeszdablak File flt a kp tmretezshez! A bal fels satokban tallhat Smart Object jel megmutatja, hogy a kp mr nincs szinkronizlva. Helyezzk az egrmutatt a Smart Object jel fl, hogy lthassuk: a webes kp mretei eltrnek a kijellt HTML fjl szlessgi s magassgi rtkeitl! A jobb egrkattintssal (Windows), illetve a Control s az egrgomb (Macintosh) egyttes lenyomsval kattintsunk a kpre, majd vlasszuk ki a context (kontextus) menbl az Update from Original elemet!
A frisstett Smart Object ekkor jraszmtdik s tmretezdik, a mgtte ll Photoshop fjl viszont megmarad az eredeti llapotban, hogy mshol, pldul Smart Objektumokban is hasznlhat legyen. gy az objektum ms helyeken ms mretekre is optimalizlhat. Ha brmilyen mdostst hajtunk vgre a PSD fjlon, a fjlhoz kapcsold sszes Smart Object azonnal frissl a vltoztatsoknak megfelelen. Ahhoz, hogy ugyanazt a PSD fjlt egy msik oldalon hasznlhassuk, az elz lpseket kvetve illesszk be az oldalba a kpet! Ha gy tesznk, ugyanahhoz a PSD forrsfjlhoz mr kt kp fog kapcsoldni. Br az j kp mrete jelentsen kisebb, s akr csak egy elnzeti kp is lehet, a kt kp mgis ugyanahhoz a PSD fjlhoz kapcsoldik. Ebben a leckben megtanultuk, hogy a Dreamweaver hasznlatval hogyan illeszthetnk az oldalunkba eltrben s httrben lv kpeket, helyrz kpeket adtunk az oldalhoz, majd a vgleges kpekre cser!tk ezeket. Kpeket bngsztnk az Adobe Bridge alkalmazsban, s tvittk ezeket a Bridge-bl a Dreamweaverbe. A Properties panelt hasznltuk a kpek szerkesztsre s azok elnze tnek megtekintsre. Ha rendelkeznk Photoshop programmal , tmsolhattunk a Photoshop fjlbl egy rteget, s beilleszthettk a Dreamweaverbe. Vgl Photoshop fjlbl (azaz PSD dokumentumbl) tbbszr is felhasznlhat Photoshop Smart Objektumot hoztunk ltre vele.
Megjegyzs: Amennyiben a kp ltalunk belltott mrete nagyobb, mint az eredeti PSD fjl felbontsa, figyelmeztets jelenik meg, amely jelzi, hogya kivlasztott kp tllpi az eredeti PSD fjl mreteit. Jobb egrkattintssal (Windows) , illetve a Control s az egrgomb (Macintosh) egyttes lenyomsval vlasszuk ki a Reset Size to Original (Eredeti mret visszalltsa) lehet6sget, hogy visszallts uk 100 %-ra a mgttes PSD fjl mrett!
88
sszefoglals
sszefoglal krdsek
l
Hatrozzunk meg legalbb kt mdot a Dreamweaverben, amellyel kpeket illeszthetnk be egy weboldalba! Milyen clt szolglnak a helytz kpek? Hogyan illeszchetnk be httrkpet? Milyen belltsokat szablyozhatunk a httrkpek esetben? Igaz vagy hamis? Minden graftkai elemet a Dreamweaveren kvli programokban kell optimalizlni. Milyen elnyket jelent a Photoshop Smart Objektum hasznlata a kpek Photoshopbl val tmsolsnl s beillesztsnl?
2 3 4 5
sszefoglal vlaszok
l
Az egyik mdszer, hogy kivlasztjuk az Image ikont az Insert panel Common kategrijban, s kikeressk a beilleszteni kvnt graBkt. A msik lehetsg, hogy megfogjuk s thzzuk a grafikt az Assets panel bl a weboldalra. A Photoshopbl is tmsolhatunk s beilleszthetnk kpeket. Vgl az Adobe Bridge alkalmazs hasznlatval is bngszhetnk s beilleszthetnk graftkkat.
2 A helyrz kpek a weboldal tervezsi szakaszban hasznlt eszkzk. Segtenek megcervezni egy weboldal szerkezett, amikor a vgleges kpek mg nem llnak rendelkezsre. A bngszk vagy teljesen figyelmen kvl hagyjk ezeket a helyrz kpeket, vagy jelzik, hogy az adott helyen nem tallhat kp. 3 CSS-szablyok segtsgvel adhatunk hozz httrkpet az egyes oldalelemekhez. Vlasszuk ki azt a szelektort, amelyik tartalmazni fogja majd a httrkpet, pldul a <body> cmkt vagy egy <di v> cmkre alkalmazott azonostt (ID-tulajdonsgot), majd lltsuk be a kvnt httrjellemzket! A httrkpek alaprtelmezett bellts szerint egyms mell sorakoznak, hogy kitltsk a rendelkezsre ll helyet; a CSS hasznlatval azonban bellt hatjuk, hogy a kp csak egyszer jelenjen meg, illetve, hogy csak az x vagy az y tengely mentn ismtldjn. Hamis. Brmilyen Dreamweaver oldalba illesztett kpet optimalizlhatunk az Image Pteview prbeszdablakban. Az optimalizci jelentheti a kp tmretezst, a formtum mdostst vagy akr a formtum belltsainak ftnomhangolst is.
5 A Smart Objektumokat tbbszr is hasznlhatj uk a szjtok klnbz helyein. A Smart Objektum minden egyes megjelenshez egyedi belltsokat trsthatunk gy, hogy azok tovbbra is az eredeti kphez kapcsoldjanak. Ha frisstjk az eredeti kpet, az sszes hozz kapcsold kp is automatikusan frissl. Amikor egy Photoshop fjl rszt vagy egszt tmsoljuk s beillesztjk a Dreamweaverbe, egyetlen kpet kapunk, amelyhez csak egyfle belltst rendelhetnk.
5 Hivatkozsok ltrehozsa
About Here and Back Travel

Home Italy Greece , About Us
~'""':;"
_.",
,

When you call our office in New York City, you will be connected to one of our experieneed, helpfui and friendly staff members. This is Here and Baek Travel. Find our office loeation.
ELAINE is the Presldent and CEO of Here and Baek Travel. She has 20 years experienee in the travel industry and has traveled extensively to research the hotels and restaurants we reeommend .
IYou may find her answering your phone

calls or checking out a recommended hotel on Santorini. Email Elajne.
Ebben a leckben megtanuijuk, hogyan alkalmazhatunk klnbz hivatkozdstpusokat egyes oldalelemekre.
90
5. LECKE Hivatkozsok ltrehozsa
A lecke tteki ntse

A kvetkezket fogjuk megtanuJni: Webhelyen belli szveges hivatkozs elhelyezse az oldalon Navigcis sv ltrehozsa Spry fles panel ek ltrehozsa Hivatkozs kprl Hivatkozs msik weboldallapjra E-maii hivatkozs ltrehozsa
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessom mappt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a Lesson05 s a Lessom > SpryAssets map pt! Amennyiben mr ltezik SpryAssets mappa a CIS mappnkban, cserljk azt le a letltttre!
Megjegyzs: A leckefj/ok letltse
az Elinduls fejezetben tallhat, a 2. oldalon.
A Dreamweaver minden ruvatkozsdpust knnyedn s rugalmasan kezel a hiperlinkektl kezdve egszen az e-maii hivatkozsokig.

Ahhoz, hogy pontosabb elkpzelsnk legyen a dokumentumrl, amit a lecke sorn ltre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben!
i
Indtsuk el az Adobe Dreamweaver CS4 alkalmazst!
2 Amennyiben szksges, ssk le az F8 gyorsbillentyt a Files panel megnyitshoz, s vlasszuk ki a DW CIS elemet a szjtlistrl! 3 4 Bontsuk ki a lesson05 mappt a Fi/es panelen! Vlasszuk ki az about-finished.html fjlt, majd ssk le az Fi2 (Windows), illetve az Option+F 12 (Macintosh) gyorsbillentyt!
5 Amikor megnylik az oldal az elsdleges bngszben, kattintsunk a Creece flre a navigcis 01dalsvban! Ha megjelent a felugr men, vlasszuk ki a Santorini elemet! Kattintsunk a bngsz vissza gombjra az about-finished.html oJdalhoz val visszatrshez! Kattintsunk a flek cmkire az oldalon, hogy megjelenjen az informci az egyes szemlyekrl! Amennyiben teleptett levelezrendszerrel rendelkeznk, kattintsunk az egyik dolgozhoz tartoz e-maii hivatkozsra! Amikor megjelenik az e-maiI zenetablak, zrjuk be! A dokumentum a webhelyen belli oldalakra is hivatkozik, ugyanakkor kls s e-maii hivatkozsokat is tartalmaz. 6 Zrjuk be a bngsz nket, s trjnk vissza a Dreamweaverhez!
Hivatkozs webhelyen belli oldalakra

A hivatkozsok a web nlklzhetetlen elemei, a Dreamweaver pedig egyszerv teszi az alkalmazsukat. A hivatkozsok adjk a hypertext hyper elemt, ugyanakkor ezek terelik egyik webhelyrl a msikra a weboldalak ltogatit. Ebben a gyakorlatban megtanuljuk, hogyan lehet tbbfle mdon ltrehozni szveges hivatkozst a weboldalon bell.
91
l 2
Bontsuk ki a Iesson05 map pt a Files panelben, s kattintsunk dupln az about-start.html fjl nevre, hogy megnyissuk! Vlasszuk ki a File> Save As menpontot! Mentsk el a fjlt about.html nven a szmtgpnk merevlemeznek lesson05 mappjba! gy, ha ksbb jra szksgnk lesz az eredeti, mdostatlan about-start:html dokumentum ra, megtalljuk a szmtgpnkn.
3 Jelljk ki az oldalon a Contact Us szveget!

Here and,T, Back ll'avel - ,"'_, ., , ..
.~
Megjegyzs: Egyes szerverek kpesek olyan hivatkozsokkal dolgozni, amelyek a gykrszjttal s nem a dokumentumrnal llnak relatv viszonyban. Hacsak nem vagyunk biztosak benne, hogya szerverOnk tud a szjtok gykrknyvtrhoz kpest megadott hivatkozsokkal dolgozni, vlasszuk a Dokumentum lehetsget!
Amennyiben szksges, vlasszuk ki a Window> Properties menpontot a Properties panel megnyitshoz! Amikor hivatkozsokat hozunk ltre, mindig ellenrizzk, hogy a Properties panelen a HTML fl legyen kivlasztva! Kattintsunk a Link (Hivatkozs) mez melletti, mappt brzol Browse for File (Fjl keresse) ikonra (fOl)! Amikor megnylik a Select File (Fjl kivlasztsa) prbeszdablak, keressk ki a lesson05 map pt, s vlasszuk ki benne a contact. html fjlt! Figyeljnk arra, hogy a Relative to legrdl menben a Document (Dokumentum) elem legyen kivlasztva! Kattintsunk az OK gombra!
! I ~ ) I:: I ~ ~!
.. OEVICES
cOS
(o. s.ard,
wUUt Wlui'iilY.TlnTl
~ Io.tlt
Mad n1o...
.,. PLACES
~
.
A\..
151 IIEL
"'''''''' \1tglt'lia
..
mystyles .css
naxos .hfml nrl"t . ~,!i~
,..., ......1"''' ..
contact. html
"
(
"
hrametet'$ .. . )
URl:
Relaelve to:
Ch~.
I Doc""",,,
,.. aboul.html
dtf,aul, Unk R fclatM TO ln thi ",ft. definition..
Solect fil. n .... from: ( 0... Sources... ) (
S."",... ) ( Sli. Roo.
( Cancel ) f~ }
Kattintsunk brhov a szerkesztablakon bell, hogy feloldjuk a hivatkozs szvegnek kijellst, s a dokumenrum jobban lthat legyen! A hivatkozsok alaprtelmezett bellts szerint kk sznnel s alhzottan jelennek meg. Ezrt az j hivatkozs, amit ltrehoztunk, kk szveg a kk httren. Ezt gyorsan megvltoztathatjuk a jobb olvashatsg rdekben. Kattintsunk jra a Contact us szvegre, majd vlasszuk ki az <a> cmkt a cmkevlasztban! Vlasszuk ki a New CSS Rule ikont a CSS Style panelen! Olyan hivatkozst hoztunk ltre, amelyhez az <a > cmke tartozik mint anchor (azaz horgony) elem. A Dreamweaver a Compound, azaz sszetett szelektor vlasztst ajnlja feL Kattintsunk addig a Less Specific gombra, ameddig meg nem jelenik a #foo ter p a szably! Kattintsunk az OK gombra!
92
A CSS Rule Definition for #footer p a in mystyles.css prbeszdablakban vlasszuk ki a Type kategrit, majd a sznvlaszt segtsgvel vlasszuk ki az #FFF kddal rendelkez fehr sznt! Kattintsunk az OK gombra!
Cltegory
B.ackground
Ty..
.,od<
Box
Un
font-farntly:
Font-s ize: F'onl-styIe:
" "1 - - ,
Border
Posltionlno ExterulOllS
J ~ , px
. ,
font-welght:
Font-vatlant:
Un ...,tigh'
...
-~
, OX
font-ttandOfm:
font-dorulon: O undtr1in~
O ~rtint
O lint-throt.lgh
O bIInk
Ono..
A hivatkozs szvege fehrre vltozott. Brmely, alblcben megjelen <a> cmke ezt a stlusszablyt fogja alkalmazni, s fehr vonallal alhzott fehr szveget jelent meg. A Browse for FoLder hasznlata csak az egyik md a fjlokra val hivatkozsra. Most prbljunk meg egy vizulisabb mdszert! 9 Amennyiben szksges, ssUk le az F8 gyorsbillentyt a Files panel megnyitshoz, majd bontsuk ki a lesson05 mappt! Katcintsunk dupln a santorini.html fjlnvre a fjl megnyitshoz! Keressk meg a lblcben a Contact Us szveget, s jelljk ki! Brmely szvegrszt kijell het jk hivatkozs cljbl: a Dreamweaver hozzadja a szksges cmkket a kijellt szveghez. 10 A Properties panelen hzzuk a Link mez melletti, clkereszttel jellt Point to File (Clkereszt) ikont (O) a Files panelre, s mutassunk r a contact. html fjlra!
COS.dOC.
169K8
31(8
CMV1C ._
IINges
mystyl .
lK8
SK8 1K8 6K8 lK8
Unk J cont:a(t.html
ToIfget
r. --:...
nuos. ..
prlnt.eu
0' .
SUtt .. .
umbrI.. .
II Amennyiben a Files panelben megtallhat az az oldal, amelyre hivatkozni szeretnnk, de a mappa nincs megnyitva, hzzuk a Point to File kurzort a mappa fl, s tartsuk ott, hogy kinyljon, s ki tudjuk vlasztani a kvnt fjlt! Mivel a santorini.html fjl a mystyles.css stluslaphoz kapcsoldik, a link automatikusan megjelenti a stluslaphoz trstott szablyt, amelyben fehr sznt trstottunk alblc hivatkozsaihoz.
12 Vlasszuk ki a File> Save ALi menpontot! 13 Zrjuk be a santorini.html fjlt! A kvetkez gyakorlathoz hagyjuk nyitva az about.html fjlt! Kt mdszert tanultunk meg, amivel hivatkozsokat hozhatunk ltre a Properties panel hasznlatval. A Browse gombot hasznltuk arra, hogy megtal1juk a fjlt, amire hivatkozni szeretnnk, s megtanultuk a Point to File ikon hasznlatt is. Mindkt hivatkozsi mdszerrelltrehozhatunk grafikus hivatkozsokat.
93
Kls
hivatkozs ltrehozsa
Az. elz gyakorlatban alkalmazott hivatkozsok a webhelyen belli oldal akra mutattak. Hivatkozhatunk azonban brmilyen weboldalra, ha ismerjk a teljes webcmet vagy URL-t. Grafikus hivatkozst kapcsolhatunk egy webhelyen belli oldal hoz, de akr egy kls webhelyhez is. Ebben a gyakorlatban egy grafikt felhasznlva fogunk kls hivatkozst s hozz tartoz6 szveges hivatkozst ltrehozni.
1 Amennyiben szksges, nyissuk meg az elz gyakorlatban hasznlt about.html fjlt dupln a nevre kattintva a Fi/es panelen! 2 3 Jelljk ki a New York City cm kpet az oldalsvban! rjuk be a http://maps.google.com/maps webcmet a Properties panel Link mezjbe, majd ssk le az Enter (illetve a Rerum) billentyt!
Imqc.6lk W~
H
Sre
Link
C--'j
Kattintsunk a File> Save menpontra, s a Live View vagy az F 12 (Windows), illetve az Option+F 12 (Macintosh) gyorsbillenty kivlasztsval tekintsk meg az oldal elnzett! Megfigyelhetjk, hogy amikor az egrmutat a kp fl r, mutat6 kzz vltozik, gy jelezve a hivatkozs jelenltt. Ha a kpre kattintunk, a bngsz a Google Maps nyitoldalra vezet bennnket felttelezve, hogy rendelkeznk internetkapcsolattal. Kattintsunk jra a Live View nzet gombjra, vagy zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez!
Megjegyzs: Ha a webcm, amelyel meg szeretnnk adni, tl hossz vagy bonyolult ahhoz, hogy begpeljk, keressk meg a kvnt oldalt a bngsznkben, majd msoljuk ki az URL-t a cmsorbl! Ezutn a Dreamweaverben illesszk be a webcmet a Properties panel Unk mezjbel
5 Ahhoz, hogy ugyanezt a hivatkozst szveges formban hozzuk ltre, helyezzk az egrmuratt az oldal nyit bekezdsnek vgre, a This is Here and Back Travel sor utn! rjuk be a Find our office location szveget!
Megjegyzs: Ahogya hivatkozsok alaprtelmezett eleme az alhzs, a hivalkozsknt hasznlt kpek keretet kapnak. Hogy ne jelenjen meg a keret a hivatkozsknt hasznlt kpek krl, a mystyles. css j szablyt tartalmaz, ami a twoColFixLtHdr #sidebar1 a img {border: O;}.
6 7
Jelljk ki a bert szvegben az office location szavakat! A Properties panel Link mezjbe rjuk be a http://maps.google.com/maps cmet, majd ssk le az Enter (vagy Rerum) billentyt! Vlasszuk ki a File> Save menpontot! pp ilyen egyszeren hozhatunk ltre hivatkozsokat a Dreamweaverben bels oldalakra vagy kls URL-ekre kpek vagy szvegek felhasznlsval.
94
E-maii hivatkozsok ltrehozsa

A hivatkozsok msik gyakori fajtja az e-maiI hivatkozs, amellyel automatikus, elcmzett e-maii zeneteket hozhatunk ltre a weboldalunk ltogati szmra. Ez hasznos eszkz az gyflvisszajelzsek fogadsra, termkrendelshez vagy ms fontos kommunikcis feladathoz. Az e-maii hivatkozs kdja eltr az ltalnos hivatkozsoktl. A Dreamweaver automatikusan ltre tudja hozni a megfelel kdot brmilyen e-maiI hivatkozs hoz. l 2 Amennyiben szksges, nyissuk meg az elz gyakorlatban hasznlt about.html fjlt dupln a nevre kattintva a Files panelen! Helyezzk az egrmuratt az Elaine-rl szl szvegrsz vgre, majd ssk le a Enter (vagy Return) gombot j bekezds ltrehozshoz! rjuk be az j bekezds elejre az Email Elaine szveget!
ls the President and CEO of Here and

TraveL She has 20 years experienc:e ln
re!
:~~.~~~to
tnlvel industry and has traveled
we recornmend.
research the hotels and
~~~;~~. out it recommended hotel on
f1nd her 8nswering 'r'Qur phone calls
3 Jelljk ki az Email Elaine szavakat! 4 5 Kattintsunk a bortkkal jellt Email Link ikonra (1-':"'1) az Insert panel Common kategrijban! Amikor megnylik az Email Link prbeszdablak, lthatjuk, hogy a Dreamweaver bevitte a kijellt szvege t a prbeszdablak Text (SzO'veg) mezjbe. Hagyjuk vltozatlanul a bert szveget, az E-Maii mezbe pedig gpeljk be a kvetkez e-maii cmet: elaine@fakeaddress.com!Kattintsunk a~ OK gombra!
Text:
EpM.lI:
l-Eloi
I
(
(
OK
Cancel
c:::B!O
Nem szksges bernunk a mailto: bevezett; a Dreamweaver automatikusan megoldja a kdolst, ahogy azt a Properties panel Link mezjben is lthatjuk. 6 Vlasszuk ki a File > Save menpontot! Ha van teleptett levelezrendszernk , hasznljuk a Live nzetet, vagy ssk le az F 12 gyorsbillenryt az oldal el nzetnek megtekintshez, s kattintsunk az jonnan hozzadott e-maii hivatkozsra! Miutn megjelent az e-maii zenet ab laka, megfigyelhet jk, hogy a To (Cmzett) mez mr tartalmazza Elain fiktv e-maii cmr. Zrjuk be az zenetablakot s a bngszt is, vagy kattintsunk jra a Live View gombra a Dreamweaverhez val visszatrshez! A hivatkozstpus mkdse a felhasznl szmtgpn teleptett levelezrendszer tpustl fgg, amely lehet pldul Oudook, Entourage vagy Apple MaiI. A hivatkozs ugyanakkor nem mkdik, ha a felhasznl internetes levelezrendszeren, pldul Hotmailen vagy Gmai len keresztl kldi zeneteir. Ha azt szeretnnk, hogy minl tbb zenet rkezzen be weboldalunk ltogatitl, rlapot is hasznlhatunk a ltogatk megjegyzsei nek s visszajelzseinek sszegyjtsre (errl lsd az rlapok ltrehozsa cm , 8. leckt!).
95
Oldalon belli hivatkozsok ltrehozsa

Amikor egy oldal hivarkozsra kattintunk, a bngszablak az oldalt jellemzen fentrl lefel jelenti meg. Egyes oldalelrendezsek, pldul a nagyon hossz oldalak esetben hasznos lehet, ha az oldal egy bizonyos rszre tudunk ugrani. Az oldalon bell brhov beilleszthetnk hivatkozst, amire urna kzvetlenlhivatkozhatunk. Ebben a gyakorlatban egy korbbi, a tblzathoz ltrehozott azonost felhasznlsval fogunk hivatkozni az oldal alja fel tallhat, meghatrozott szvegrszre. l Nyissuk meg jra a santorini.html fjlt dupln a nevre kattintva a Files panelen! Kezdjk azzal, hogy j szveget adunk az oldalhoz, amelyre hivatkozni fogunk! Kattintsunk az egrmuratval az oldalsvba, a fun-filled sttmhine szvegrsz utn, majd ssk Je az Enter (Windows), illetve a Rerum (Macintosh) billentyt egy j bekezds ltrehozshoz! rjuk be a kurzor helyre a Check ODr recommended hotels szveget! Jelljk ki benne a recommended hoteis szavakat! A Properties panel Link mezjbe rjuk be a #hotels cmet, majd ssk le a Enter (vagy Retum) billentyt! Hivatkozst hoztunk ltre arra az 01daJrszre, ahol a hoteis azonostj tblzat tallhat. A kettskereszt vagy sorszmjel-kettskereszt az oldal bizonyos azonostjra val hivatkozst jelli. A kerrskereszt jelet kvet sz - ami ebben az esetben a hotels - az azonost neve. Az oldal mr tartalmazta ezt az azonostt. Ha az oldal hossza miatt ilyen hivatkozsokra van szksgnk, egyedi azonostt adhatunk az oldal cmsoraihoz, listihoz, bekezdseihez vagy ms elemei hez, hogy megjelljk a hivatkozsok clpontjait. Ha a szjt msik oldalrl szeretnnk a recommended hoteis tblzatra hivatkozni, a hivatkozsnak a fjlnevet s az azonostnevet is tartalmaznia kell a kvetkezkpp: santorini. html#hoteis.
SiJntorlnlls perfect for beaurifui CJC63n5 and ron-fil/ed 5unshlne.
3 4
Oledc our recommsodedhbtels .
Vlasszuk ki a File> Save men pontot a mentshez! Hasznljuk a Live nzetet vagy a bngszn ket a hivatkozs ellenrzshez, majd trjnk vissza a Dreamweaver Edit mdjba! Zrjuk be a santorini.html dokumentumot! A kvetkez gyakorlathoz hagyjuk megnyitva az about.html fjlt!
Az Ajax s a Spry megismerse

A vezet webtervezk a Web 2.0 rkezst az internethasznlat s interaktivits j korszakaknt dvzltk. A Web 2.0-t vezrl technolgia Ajax nven ismert, ami az Asynchronous JavaScript And XML-bl sszetevd betsz. Ha hasznltuk mr a Google Maps alkalmazst, vagy nzegettnk fnykpeket a Fckr fotmegoszt oldalon, megtapasztalhattuk az Ajax mkdst. Az Ajax kulcsfogaima az asynchronous (azaz aszinkron), amely sz szerint annyit jelent, hogy nem egy idben trtn. A weboJdalak megtekintse ltalban teljesen lineris folyamat. Ha pldul egy cg weboJdaln nznk meg klnbz informcikat, a kvetkez trtnik egy tlagos weboldal esetben: l 2 Megltogatjuk az oldalt a bngszvel. A tvoli webszerver elkldi a kezdoldalt.
96
3 4 5 6 7
A bngsz megjelenti az oldalt. Rkattintunk egy hivatkozsra az oldalon, hogy bvebb informcit kapjunk. A bngsz lekri a bvebb informcival rendelkez oldalt a tvoli webszervertl. A webszerver elkldi az j oldalt. A bngsz betlti az j informcit tartalmaz oldalt, s teljesen j oldalknt jelenti meg.
Egy Ajax-vezrelt oldalon ugyanez a folyamat a kvetkezkppen zajlana: l 2 3 4 5 Megltogatjuk az oldalt a bngszvel. A tvoli webszerver elkldi a kezdoldalt. A bngsz megjelenti az oldalt, s egyttal az sszes hozz kapcsold adatot betlti az Ajax rendszerbe. Rkattintunk egy hivatkozsra az oldalon, hogy bvebb informcit kapjunk.
Kzvettknt mkdve az Ajax rendszer feldolgozza az j krst, s elkldi a szksges
rszleteket.
A bngsz az j rszleteket jelenti meg a mr betlttt oldalon, s csak a szksges oldalrszt frissti.
Az Ajax alapveten gy mkdik, hogy betlti az oldal hoz kapcsold adatokat, de csak akkor jelenti meg azokat, amikor a ltogar ignyli. Ez grdlkenyebb s interakrvabb teszi a folyamatot a felhasznlk szemszgbl. Ha az eredetileg betlttml tbb adatra lenne szksg, az Ajax rendszer a httrben mkd webszerverrlletlti az adatokat, majd tovbbtja a bngszhz, ami csak a szksges adatokat jelenti meg. Az Ajax legtbb megvalstshoz magas szint ]avaScript-ismeret s jelents mennyisg kzi kdrs szksges. A knnyebb elsajtthatsg rdekben az Adobe kifejlesztette a SP? elnevezs Ajax keretrendszert, amely szervesen kapcsoldik az Adobe Dreamweaver CS4 alkalmazshoz. Ngy klnbz kategriban llnak rendelkezsre Spry-eszkzk:
SP? Data (Adatkezels) - Lehetv teszi a HTML vagy XML adatok hasznlatt brmely weboldalon s az Ajax-a1ap interaktv adatmegjelentst. A knyv 6. leckjben fogunk Spry adatcsoportral dolgozni. Spry Form widgets (rl4peszkzk) - A hagyomnyos Ilapelemeket (pldul szvegmezk, listk stb.) tvzi ]avaScript-a1ap bevitelellennssel s felhasznlbart hibazenetekkel. A Spry Form eszkzkkel a knyv 8. leckjben fogunk megismerkedni. Sp? Layou: widgets (Oldalsurkezeti eszkzk) - Egy sor kifinomult oldalszerkezeti eszkzt nyjt, pldul fles vagy harmonikapaneleket. A lecke ksbbi rS'Lben fogunk Spry fles panelekkel s mensvokkal dolgozni. A 6. leckben hasznljuk majd a Spry harmonikapaneleket. SP? Effects (Hatsok) - Kiterjeszti a Dreamweaver viselkedst olyan funkcikkal, amelyekkel interaktvan megvltozcathatk az oldalelemek. A Spry-hatsok segtsgvel pldul halvnyrani, lesteni, cssztami s hangslyozni lehet a kivlasztott oldalelemeket.
Ha szeretnnk kzelebbrl megismerni a Spry mkdst, ltogassunk el az Adobe Labs weboldalra (http://labs.adobe.comltechnologies/spryl) !
97
Spry mensvok beszrsa

Minden weboldalnak tartalmaznia kell bels navigcis elemeket. Az utbbi pr vben tervezett weboldalak ltalban CSS-szablyokkal formzott listkra alapul szjtnavigcit s mensvokat hasznlnak. A JavaScript hozzadsval ezeket a listkat fggleges vagy vzszintes, alkategrikkal rendelkez, kompakt legrdl menkk alakthatjuk. A Dreamweaver Spry mensvok egyszer s hatkony eszkzt jelentenek az sszes szksges HTML lista s hivatkozsi kd, az ezeket mensvokk alakt CSS-szablyok s az alkategrikat legrdl menben megjelent JavaScript elemek beszrsra. A Spry mensvok elnye az, hogy a HTML alapszerkezetben egyszer listaknt jelennek meg, gy a mensv akkor is ltszik, s navigcis hivatkozsok egytteseknt mkdik, ha a felhasznl letiltotta bngszjben a JavaScript futtatst s a CSS megjelentst. l 2 Amennyiben szksges, kattintsunk dupln az about.html fjlra, hogy megnyissuk a Dreamweaverben! Vlasszuk ki New York vroskpt az oldalsvban! ssk le a balra mutat nylt a billencyzeten , hogy feloldjuk a kp kijellst, s beillesztsi pontot hozzunk ltre a kp baloldaln! ssk le a Enter (vagy Rerum) billencyt, hogy res helyet kapjunk a kp eltt! Kattintsunk az res sorba!
About Here ru
Az Imert panel Spry kategrijban kattintsunk a Spry Menu Bar ikonra!
Vlasszuk ki a Spry Menu Bar prbeszdablak Vertical (Fggleges) elemt, majd kattintsunk az OK gombra!
Pluse:
se:~<1
the layout '/OUwouklllke .
t
(
Ga
(anttl
O
j
HorIzontiII
~ )
VenkAl
Help
Az oldalunkon megjelenik a mensv. A dokumentum mensvjnak kijellshez kattintsunk a fels, zldeskk szn flre!
~~"U tar: Wenlllatl
Item 1
Item 2_ _-J _
1-----!te m 4
!te m 3
I,
98
testreszabnnk a mensvot, a FiLe > Save menponttal mentsk el az olda/t! Ha a Dreamweaver rkrdez, hogy a kapcsold fjlokat is tmsolja-e, kanintsunk az OK gombra! Ha kijelltk a mensvot, a Properties panel hasznlatval hozzuk ltre a hivatkozsokat! A Dreamweaver beilleszt egy SpryAssets nev mappt a CIB Lessons szjtunk gykrknyvtrba, hogy onnan mkdtesse a Spry eszkzket. A mensvhoz szksges CSS s JavaScript fjlok a mappban vannak. A befejezett dokumentum megtekintshez mr lementettk ezt a map pt a szmtgpnk merevlemezre. A szksges fjlok egy rsze mr meg ta/lhat a SpryAssets mappban, s a kvetkez gyakorlatban fogjuk a HTML olda/unkhoz csatolni.
Hozzads gomb Trls gomb Menrsz neve
Mieln
Fe/Ile gombok
Cmkesziiveg
flem l
CtlSJ0mize this widqt t
( Tum ttem 2
ltem Ll Item 1.2 Item 1.3
r.:---- - - -,f';)4- Fjl keresse

Titl. j
StYIeS of! )
Fmenc{mek
Felugr6 almen
cmei
Felttgr6 almenalrsz cmei
Jelljk ki az Item l elemet a Main menu fabels (Fmencmek) ablakban! Az Item 1 Untitled !tem (Cm nlkli elem) szvegmezjbe rjuk be a Home nevet, majd trljk ki a Link mezbl a # jelet, s rjuk be az index.htinl cme t! Trljk ki az Item 1.1, Item 1.2 s !tem 1.3 elemet gy, hogy a Pop-up submenu labels (Felugr almen cmei) oszlop feleni mnuszjeIre kattintunk!
az 8 Jelljk ki az Item 2 elemet a Main menu labels ablakban, majd_ Item 2 szvegmezbe rjuk be az !taly nevet! Hagyjuk meg a kertskeresztet a Link mezben! j elem hozzadshoz kattintsunk a pluszjelre a Pop-up submenu labels oszlopban! Az Untitled Item mezbe rjuk be az Umbria nevet, a Link mezbe pedig, a kettskereszt helyre gpeljk be az umbria.html cmet! 9 Jelljk ki a fmen Item 3 elem t! rjuk be a Greece" nevet a szveg helyre! A Link mezt hagyjuk mdostatlanul! Vlasszuk ki az Item 3.1 elemet! A szvegmezbe rjuk be a "Santorini nevet, a Link mezbe pedig, a kettskereszt helyre a santorini.html cme t!
10 Vlasszuk ki az Item 3.2 elemet! A szveg helyre rjuk be a Naxos szr, a Link mezbe pedig, a kettskereszt helyre a naxos.html cmer! Trljk ki az !tem 3.3 elemet gy, hogy kijelljk, majd az oszlop feletti mnuszjeIre kattintunk! II Jelljk ki a fmen !tem 4 elemr! rjuk be az About Us cme t a szvegmezbe! A Link mezbe gpeljk be az about.html cmer!
PItOP(RTILS
Nemi: h,
+Home
.... ...
+-
.........
+-
Contact Us
Ttxt IAbout Us Unk 'Abotlt.hlml
Cugomju this ...100'1;1
.000y Cru<e
l itle
( T,m ""'.. off )
AbOUC U.
12 Kattintsunk a Pop-up submenu fabels ablak feletti pluszjelre az Jtem 4.1 elem ltrehozshoz! Jelljk ki a 4.1 elemet! A szvegmezbe rjuk be a Contact Us szveget, a Link mezbe pedig a contact.html cmet!
Megjegyzs: Br a kettskereszt jel (#) nem egy szjton belli hivatkozs, hivatkozs jelenltt szimullja, gy lehetv teszi, hogyafelugr almenpontok megnyljanak. Ha a fmen Link mezje nem tartalmaz kettskereszt jelet vagy igazi hivatkozst, a felugr almen nem tud megjelenni.
99
"enu lar: Mt"lIIar
Home
ltaly
Greece
> , >
I'
--
About Us
13 Vlasszuk ki a File> Save menpontot a mentshez! A ksz hivatkozsok megjelennek a szerkeszt ablakban. A szerkesztablak felugr menwt gy tntethetj k el, hogy a Properties panel bal oszlopban egy kijelleden fmen pontra kattintunk.
Home
lli1' Umbria
Greece
Santorjnj o Naxos
About Us o C n
14 Kattintsunk a Tum Styles Off (Stlusok kikapcsolsa) gombra a Properties panelen! Most a Properties panel hasznlatvalltrehozott lista stlusok nlkli vltozatt lthatjuk a dokumentumban. A szerkesztablakban dolgozni sokszor egyszerbb lehet, mint a Properties panelt hasznlni. A Tum Styles Offgombra kattintva a szerkesztablak stlusok nlkli, begyazott listit hasznlhatjuk szveg bers ra s a lista hivatkozsainak ltrehozsra. Ezek a hivatkozsok generljk a mensv rszre a HTML-kdot. 15 Kattintsunk a Tum Styles On gombra a Properties panelen, hogy visszatrjnk a stlusok megjelentshez! 16 Vlasszuk ki a File> Save Ali menpontot! A Dreamweaver elmenti a kapcsold CSS s JavaScript fjlokat a SpryAssets mappba. 17 A Live nzet vagy a bngsznk hasznlatval tekintsk meg az oldal elnnzett, s ellenrizzk a mensv mkdst! Mivel a tbbi oldal nem rendelkezik mg mensvval, a vissza gombra kattintva trhetnk vissza az about.html dokumentumhoz. Kattintsunk jra a Live View menpontra, vagy zrjuk be a bngsznket a szerkesztsi mdba val visszatrshez! A Dreamweaverrlapokrl , -knyvtrelemekrl (Library) s a szerveren fut kdrszletekrl a knyv 10. leckjben fogunk tbbet megrudni. Ezek az eszkzk szmos egyszer mdot knlnak arra, hogy j mensvot adhassunk a szj tunk minden oldalhoz.
A Spry mensv megjelensnek testreszabsa

A Spry mensv lehetv teszi, hogy gyorsan s egyszeren hozzunk ltre professzionlis megjelens menket. A menk formzsa pp ilyen egyszer. rdemes tlltani az alaprtelmezett szneket, hogy a menk szne i nagyobb sszhangban legyenek az oldal sznvilgval. Korbban lthattuk mr, hogy a Drearnweaver CSS s JavaScript fjlokat trstott az oldalunkhoz. Taln szrevettk, hogy egy SpryMenuBarVertical.css nev fjl is szerepelt ezek kztt.
ll4tr.ubrAnIYt I ll\It./I""ut!(.a11l
1II ...... ....&aJVfrtlal lll
... ..IoI"':.t..,...tn,(:a1ul i
1II..McIltl&.lNtnl(.ll
100
A CSS Styles panel stlusait vgiggrgetve keressk meg a Sp ryMen uBar Vertical. css elemet s bontsuk ki! Figyeljnk, nehogy vletlenl a SpryMenuBarVertical-finished.css fjlt vlasszuk a listrl! Br nem kellene az oldalhoz kapcsoldnia, a SpryAssets mappa tartalmazza a fjlt, hogy megtekinthessk a ksz oldalt.
Megjegyzs: Nem minden bngszprogram a CSS rendszert hasznlja. Pldul a kevsb fejlett mobileszkzk sem CSS-t hasznlnak. Az oldal menjt ezek az eszkzk listaknt jelentik meg, a hivatkozsok azonban ettl fggetlenl rendesen mkdnek.
Vlasszuk ki az Ali Rules svban az ul . MenuBarVertical a stlust! Ez a stlusszably a hivatkozsok sznt s httrsznt, vagyis az <a> elemeket hatrozza meg. Amennyiben szksges, fogjuk meg s hzzuk lejjebb a CSS Styles panel als szlt, hogy a Properties sv jllthat legyen! A Properties svban kattintsunk a background-color (httrszn) sznvlasztra, majd vlasszuk ki a #FFO sznkd lnksrga sznr! Most kattintsunk a color (szn) SZnvlasztra, majd vlasszuk ki a #OOC kd sttkk sznt! ssk le a Enter (Windows), illetve az Rerum (Macintosh) billentyt!
css
,TY""
ul.MenukrVertlul uj
ul.MtnultarVertJal u1.Mellui.u Vert tul
ul.MenuB.1rVertlcal ul.Menu8arVtrtlal ul li ul,Menus"rVe rtJul uI,Menu8i1rVert lc.a.l ul
,I.M',","'rS..t;
ut
W ....
"
i Lit
uf. MenuB.l.rvtrtlul
ul.Menu8..a.Ntn tul ul
ul.Ml!nultuVenlul a ul.MenulbrVl!nlt.a.l a:h<lwr, l
5
c:ur ~or
.Melll.tlarYertlc;al.
ul.MenuBarVertkal.:hovtr.
badcground-cokir
pointer btock
-===11
HFO
Add P(QQfrt't
display padding
teJrt-dec.ol"3tlon
O .5tmO.7Sf:m
Add Prooenv
""""
:t: Azlr.;l
Vlasszuk ki az Al! Rules svban az ul . MerlUBarVertical ul l i stlust! Ez a stlusszably az almen elemeinek szlessgt hatrozza meg. A Properties svban lltsuk t a szlessget 8,3 emrl 200 px-re! Mivel az oldalsv kttt szlessg, a mensv szlessgt is korltozni kell.
Az Al! Rules svban vlasszuk ki az ul. MenuBarVertical li szablyt! Ez a szablya fmen

listjnak jellemzit hatrozza meg, azonban nhny rsze mdostsra szorul. A sclusszably mdostshoz kattintsunk a ceruzval brzolt Edit Rule ikonra a CSS Rule Definition for ul.MenuBarVerticalli in SpryMenuBarVertical.css nev prbeszdablakban!
CAtegOfY
10.
U..
Pos;tionfng
rPX -----,..,
Padding
~ Same for ali
Top: 1 0
R1ghl: O
px
Float:
Cle.,-:
Extenslons
Margin
S.me for.tl
Jf!l t
i!...:.. {
I
lot4
Top: @
Rlght: D
l@jl
Bottom: O
Left: O
I t
CI !
1+1
~
8oltom: D
left: O
-. :II
.-;-
~I
1+1
~
Help)
"
101
5 Vlasszuk ki a Box kategrit, majd a Width 6
mezbe
rjunk be 200-at!
Most vlasszuk ki a Border kategrit! Vegyk ki a pipt a Style, Width s Color oszlophoz tarcoz Same for aL! jellngyzetekbl! A Style oszlop Rght s Bottom legrdl menjben vlasszuk ki a solid elemet! A Width oszlopba rjunk be l-et, s trstsuk hozz a px rtket! A Color oszlop sznjell ngyzeteihez rjuk he a #OOC sznkdot! Karcinesunk az OK gombra!
Cat~ory
lorder
TYP<
Box
Background 'ock
Styt
Wld'h
Color
0 5.1... ,.. ."

Top:
Rlght: [solid
O 5.lme (Ol ali

~
O SIomt for ali

px
Ust
Posl.t ionlng Exttnslons
If!!
I
:1 CH
~
( px ( px
Bonom: jsoHd
Left,
.""
!:!f .IOOC TI Q
M.ooc
Vlasszuk ki a File > Save Afl menponeot a meneshez!

Home
:o
Italy
Greece
I
About Us
8 9
A mensv megtekincshez hasznljuk a Live nzetet vagy a bngsznket! Kaccinesunk jra a Live View menponera, vagy zrjuk be a bngsznket, hogy visszatrjnk a szerkesztsi mdba a Dreamweaverben!
Vzszinees Spry mensvokat ugyanilyen mdon tudunk beilleszteni. Az egyik nagy klnbsg a vzszintes mensv formzsban az, hogy gombjainak szlessgt a szmuk hatrozza meg. Egy t gombbl U vzszinees mensv pldul szlesebb lenne, mine egy ngy gombbl ll.
Megjegyzs: A felugr almen elhelyezkedsnek megvltoztatshoz lltsuk t az ul.MenuBarVerlical ul stluslap margjt! Sznek helyett hasznlhatunk httrkpeket is az <a> szablyok stlusainak (pldul ul. MenuBarVerlical a.MenuBarltemHover) szerkesztsvel.
Spry fles panelek ltrehozsa

A Spry fles panelek (Spry Tabbed Panels) gy segtik a navigcit a felhasznlknak, hogy a tartalmat egy sor fles panelbe rendezik, gy grgets nlkl is knnyen el lehet igazodni az oldalon. A fles panelek a weboldalon brhol elhelyezhet k - feltve, hogy elegend vzszintes hellyel rendelkeznk a flek szmra. Ebben a gyakorlatban az about.html oldal szemlyes profiljait fogjuk fles panelekbe rendezni.
102
Amennyiben szksges, nyissuk meg az about.html fjlt a lesson05 mappbl gy, hogy dupln a nevre katrintunk a Files panelen! Katrintssal helyezzk a kurzort a nyit bekezds vgre! A Enter (vagy Retum) bi ll enty letsvel hozzunk ltre egy j bekezdst! Hagyjuk az egrkurwrt ezen a ponton, meghatrozva a fles panel beszrs i helyt! Katrinrsunk a Spry Tabbed Panel ikonra az Insert panel Spry kategrijban! Az oldalon megjelenik a Spry fles panel. Ne aggdj unk amiatt, hogy a Spry elem jobbra swrtja az Elaine <di v> oldalelemet: amint befejeztk a beillesztst, minden elrendezdik!
Spry
~
,.".
.-".,
,"
..-.,-"
Megjegyzs: A SpryTabbedPanels.css stluslapra vonatkoz, testreszabott CSS-szablyokat mr tartalmazta az internetrl a szmtgpnk merevlemezre letlttt SpryAssets mappa. A vltoztatsokrl a lecke vgn lesz bvebben sz. A sznek, amiket ltni fogunk, nem a Spry fles panelek alaprtelmezett sznei.
A Spry fles panelek kt rszbl llnak: egy cmkvel rendelkez flbl s flenknt egy tartalmi rszbl. A tartalmi rszt brmivel megtlthetjk: szveg, grafika, tblzat, lista, rlap vagy akr Flash objektum is szerepelhet a fleken.
When you call our office in New York C~y, you will be connected to one of our experienced, helpfui and friendly staff members. This is Here and Back Travel.
~c nt~ ~0~ en~t=1~-------------------------------1~1 __~
-..' I _. I
E !NE is he
4 . A Properties panel hasznlatval adjunk tovbbi hrom panelt az oldal hoz! sszesen t flre van szksgnk. Kattintsunk hromswr a Panels (Panelek) oszlop feletti pluszjelre!
Panelnv
PROPERTlES
Panelek hozzaddsa/tr/se
Panelek dtrendezse
~ ll.
r
Panel.
,I
...
T.b l Tab 2
.J
Default panel t Ta I
Customize this wid<Kt
I'
,
,)
,
Flcmke
Az oldal betltsekor Uthat fol
A Dreamweaver egy szemet brzol ikont jelent meg a szerkesztablakban, amellyellehetv teszi az aktulisan elrejtetr panelek tartalmnak kijellst s szerkesztst. 5 Jelljk ki a Tab 1 (1. fol) szvegt, majd rjuk be helyette Elaine nevt!
Hzzuk vgig az egrkurzort a Content 1 (Tartalom 1) terleten a Content 1 szveg kijellshez, majd trljk a Delete billenty letsvel! Helyezzk az egrmutatt Elaine proflljban brhov! Az oldal szln tallhat, mgis bele tudunk kattintani. A teljes <di v> kijellshez vlasszuk ki a cmkevlaszt6ban a <di v. profi l e> cmkt!
103
Content 1
8 9
Vlasszuk ki az Edit> Cut (Szerkeszts> Kivgs) menpontot, vagy hasznljuk a Control+X (Windows), illecVe a Command+X (Macimosh) billencykombincit a tartalom kivgshoz! Helyezzk vissza az egrmutatt a Content 1 helyn maradt res terletre! Vlasszuk ki az Edit > Paste (Szerkeszts> Beilleszts) menpontot, vagy ssk le a Control+ V (Windows), illetve a Command+ V (Macimosh) gyorsbillentyt! Az Elaine-hez tartoz <di v . profile> cmke az els fl tartalmaknt jelenik meg. Mivel az Elaine-rl szl szvege t kivgtuk, Linda profilja kerlt a helyre az oldal jobb szln.
~ack 1l"avel. She has 20 years experience in

~he
ELAINE ls the President and CEO of Here and t",vel Industry and has traveled xtenslvely to research the hotels and restaurants we recommend. ou may find her answering your phone calls r checking out a recommended hotel on
antorini.
f!Email Eleine.
10 Ismteljk meg a lpseket 5-tl 9-ig, hogy a flek cmkin a Linda, Jason, Lin s Charlie nv szerepeljen! Vgjuk ki az egyes nevekhez tartoz, <di v . prof i le> cmkvel rendelkez profilokat, s msoljuk be azokat a megfelel cmke alatti, tartalmi rszbe! Ha befejeztk a proftlok bemsolst, a szem ikonnal mowghacunk a flek kztt, s ellenrizhetjk awk tartalmr. Amenynyiben szerkeszteni vagy bvteni szeretnnk a flek szvegt, a szem ikon hasznlatval tudjuk a keresett tartalmi svot kivlasztani.
liCHARl.lE is our do-it-alJ guy. He takes care of business end of things. He maintains this site. He's also experienced at helping I!pe<,ple make travel plans and can step in to when everyone else is busy. though Charlie is good with numbers, also an avid hiker and can help you find Ilson", great walking trails ln an our
II Vlasszuk ki a File > Save Ali menpontot! 12 Tekintsk meg az oldal elnzett, s prblj uk ki az j, fles panelt a Live nzet vagy a bngsznk hasznlatval! Amint vgeztnk, kattintsunk jra a Live View menpontra, vagy zrjuk be a bngszt, hogy visszatrjnk a Dreamweaverhez! Megfigyelhetjk, hogy amikor a Live nzet vagy a bngsz elszr jelenti meg az oldalt, a Tab 1 alaprtelmezett bellts szerint megnylik.
104
5. LECKE
Hivatkozsok ltrehozsa
ELAINE is the President and CEO of Here and Back Trave!. She has 20 years experience in the travel Industry and has traveled extensively to research the hotels and restaurants we recommend . . You may find her answering your phone calls or checking out a recommended hotel on Santorin!. Ema il Elalne.
A Spry fles panelek technikai szempontbl nem szmtanak navigcis eszkzknek, mivel nem irnytjk tovbb egy clzott oldalrszre vagy egy msik oldalra a ltogat t. Mgis: navigcis feladatokat ltnak el azzal, hogy az adott tmhoz kapcsold tartalmat kattinthat flekbe rendszerezik. A tartalom gy kisebb helyen CSOportosul, s nem kell grgemi az oldalt az elrshez. Az eszkz szneit befolysol CSS-szablyok, amelyeket a SpryTabbedPanels.css fjlban mdostottunk, a kvetkezk: TabbedPane l sTab , . TabbedPanelsTabHover , . TabbedPanel s TabSelected, .TabbedPanelsContentGroup.
Az oldal ellenrzse
A Dreamweaver automatikusan megvizsglja az oldalunk bngszkompatibilitst, hozzfrhets gt s a srlt hivatkozsokat. Ebben a gyakorlatban ellenrizni fogjuk a hivatkozsai nkat, s megtanuljuk, mit tehetnk, ha az oldalunk nem tud egyttmkdni a bngszkkel. 1 Amennyiben szksges, nyissuk meg az about.html fjlt a lesson05 mappbl a Fi/es panelen! 2 Vlasszuk ki a File> Check Page > Links (Fjl> Oldal ellenrzse> Hivatkozsok) menpontot!
Browser Compatibility Com par. with Remote
Megnylik a Link Checker (Hivatkozsellenrz) panel. A Link Checker panel jelzi, hogy az index. html hivatkozs srlt az oldalon. Ezt az oldalt a 9. leckben fogjuk kialaktani, ezrt most nincs szksg a srlt link kijavtsra. A Link Checker az esetleges kls hivatkozsok srlsei t is fel tudja derteni.
UNKCHlCKlR
IcOS ! about.hllTlt
J ndu.l!tn'I
3 4
Kattintsunk dupln a Link Checker flre a panel bezrshoz! Vlasszuk ki a File> Check Page> Browser Compatibility (Fjl> Oldal ellenrzse > Bngszkompatibilits) menpontot! Megnylik a Browser Compatibility jelents, amely egy sor kompatibilitsi problmt jelez, valjban azonban egyetlen, tbb helyen elfordul problmrl van sz. A szmok alapjn ltszik, hogy a hiba melyik kdsorban tallhat. Szerencsre az Adobe.com ksz tmogarni az ilyen jelleg problmk megoldst a Page Check mvelet ltal.
105
IAOWSt:R Ca...PATIII.LITY
..1--
,---
__
o. _. ,. . .
-;--~.,
'~lf;'"'"-"--;7'
.-
~~
.......
'f
o"
,......--.--~.~
-~-
Expartding Bent Probt.",
6)
<I) ~ 18
~"
~"l
."
Exp~nd l n9
1011 Problem
content that does not fit ln a or - helght box :causes the 00)( to expand to flt the content rather tha" leItIng
bp.nd lng toIC Probltm

1p.lKl lng 80x Problim
content overflow.
l polond lng 60ll Probllm c p.Jlldl1'l9 80 ..

I~ ... dln9Iolf Probl~m
'Mf,Ct.<' Internel Explorer 6.0

JUkellhoc,d: Ukely
~"
~
~'3
~"
~ ~
.. .. ..
Probl tm
E.x~l'>d l n91ol(
Probl,,.,
l: p.llnd l ng 801C Prob lt m
ExPUld lllO 80" Pfobl.""

lp.Uldlng 80 x Probltm
lp.andl"9 Iox P,obltm
Vlasszunk ki egy hibanevet! Mivel az sszes hiba Expanding Box Problem (Megnyldoboz-hiba) rpus, brmelyik elemet kivlaszthatjuk a listrl. bal oldaln! Megnylik za Adobe.com weboldal. Az oldal megmagyarzza a problmt, s a Dreamweaverben megvalsthat megoldst knl r. Egyes javtsi javaslatok meghatrowtt bngszre vagy olyan eszkzkre rvnyesek, amelyeket nem terveznk hasznlni. Ezekben az esetekben nyugodtan hagyjuk figyelmen kvl a javaslatokat! Mivel ezt az oldalt nem fogjuk a weben publiklni, a javaslatokat egyltaln nem vesszk .figyelembe.
6 Jelljk ki a hibanevet, majd kattintsunk a More Info (Tbb infomlci) nev kis ikonra a jelents
7 Zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez!

8
Kattintsunk dupln a Browser Compatibility flre abezrshoz! Nagy vltoztatsokat vgeztnk az oldalak megjelensn ebben a leckben: mensvot adtunk az 01dalhoz, biwnyos bels oldalrszekre, e-maii cmekre s kls weboldalakra hivatkoztunk. Hivatkozs alapjul szolgl kpet adtunk az oldalhoz, s az oldal tartaImt Spry fles panelekbe rendeztk. Vgl ellenriztk az oldal hivatkozsait s a bngsz kkel val egyttmkdst.
Megjegyzs: Szmos ms szempontbl is ellenrizhetjk az oldalunkat a Site> Reports (Szjt> Jelentsek) menpont hasznlatval. Ezek a jelentsek azrt hasznosak, mert rmutatnak az esetleg figyelmen kivl hagyott oldalcmek s alt szvegek hinyra.
Dl.".__
~1IdM
COIIIF_
I'I81II I'I81II....,.,
F1IIC
"*4 tJM" ClSMtrc
_ ..... .....
"
E'lcdIW,
UWeCYC:Ie
..... 09tdPI l4a

... aIMAt cOlc
Fa~...
csa
PDF
lAaIIiIe end ...... SeCUIIIY
fNIF VIdIO
Adobe .... BDKS
TriII doMt&J ,1.

AdobBOpen
TnIInIng
SaIJrOe
Home I Oeveloper Center I Ormweaver Oevelopor Center I CSS Adviso< !
S..rch CSS Advll'"
CSS Advisor Expanding Box Problem

by CSSAdvisorAdm ln on October 30. 2006 Edned by: sfegatte on June 24, 2008 Avg Rating 1 A (20)
o Search content
e Find by tag
I
Log in 10 rale poSL
CSS AOVlSOR HOME SUBMIT A POST
Tagged with Text, overflow , WidthlHeight Explorer 6.0 , Explorer 5.5 , Explorer 5.0 , Explorer for Mac View Commenls (14)
AOVlSOR RSS FEEOS
106
sszefoglals
sszefoglal krdsek
1 Mucassunk be kt mdszert, amellyel hivatkozst illeszthetnk egy weboldalba! 2 3 4 5 Milyen informci szksges egy kls oldalra trtn hivatkozs lrrehozshoz? Mi a klnbsg az ltalnos oldalhivatkozsok, Ulerve az e-maii hivatkozsok kzn? Milyen elnyket jelent a Spry mensvok hasznlata? Milyen elnyket jelent a Spry fles panelek hasznlata?
sszefoglal vlaszok
1 Jelljk ki a szveget vagy a grafikt, majd vlasszuk ki a Properties panelben a Link mez melletti Browse for File ikont, s keressk meg a kvnt oldalt! Egy msik mdszer, hogy a Point to File ikont a kvnt fjlhoz hzzuk a Files panelen bell.
2 3
gy hivatkozhatunk kls oldalra, hogy berjuk, vagy kimsoljuk s beillesztjk az oldal teljes webcmt (egy teljes URL-t) a Properties panel Link mezjbe. Egy ltalnos oldalhivatkozs j oldalt nyit meg, vagy az oldal msik rszre irnyt. Az e-maii hivatkozs res e-maii zenetablakot nyit meg, amennyiben van levelezrendszere a felhasznlnak. A listkat vzszintes vagy fggleges mensvv alakt stJusszablyok a rendelkezsnkre llnak. A fe1ugr almenk mkdtetshez szksges JavaScript-programot sem magunknak kelJ megrnunk.
5 A Spry fles panel ek tmr, ttekinthet formtumba (flekbe) rendezik az oldal tartalmt.
Interaktv oldalak ltrehozsa
Our Clients
Our Corporate Clients
,.. - .......
These companles put their trust ln us to take care of their t ravel needs . We can do the same for youl
Comp."
line
Desc
Company Anon
ori<
Startdate
ls the most
sophlstlcated
microwlJ'Ie transm/$slon equlument WfJrldwlde.
tele
Corporate
COmpany
Anon
fo
. See Santorini's Best

Paradise by the Sea
oommunlcation rebranding company ln Web site

II 1
~
~
'.
pro
Santorlni ls perfec:t for beautIfui beachcs and fun-filled sunshlne.
Chk our ~m([W:1!J..c d..

h9(~.
1IV.,learn. to Paradlsel Santorinl ls Greece's most famous Island

good reason . The scenlc beauty, the stunnlng sunsets, the
Ebben a leckben Web 2, Ofunkcikat adunk az olda/unkhoz,
108
6. LECKE Interaktv oldalak ltrehozsa
A lecke ttekintse
A kvetkezket fogjuk megtanulni: A Dreamweaver beptett viselkedseinek hasznlata Viselkedsek ltrehozsa Spry-hatsok hasznlatval XML adatok s adatforrsok hasznlata Spry tblzat s Spry Accordion eszkz beszrsa
A Dreamweaver az Ajax Spry keretrendszert hasznlva kifinomult interaktv hatsokat kpes ltrehozni viselkedsekkel, adatcsoportokkal s harmonikapanelekkel.
A Dreamweaver-viselkedsek (Behaviors) . , megismerese

A Dreamweaver-viselkedsek tulajdonkppen JavaScript-kdok, amelyek egy feladatot hajtanak vgre, pldul megnyitnak egy bngszablakot, egy esemnyt gy, mint egy egrkattints hatsra.
A viselkeds alkalmazsa hrom lpsbl ll:

l
Kivlasztjuk azt az oldalelemet, amit a viselkeds kivltshoz szeretnnk hasznlni. Kivlasztjuk a viselkedst, amit alkalmazni szeretnnk. Meghatrozzuk a viselkeds belltsait vagy paramtereit.
2 3
A viselkedst kivlt elem ltalban egy hivatkozs, legyen az egy szvegrsz vagy grafika. Egyes esetekben a viselkeds nem ignyel j oldalbetltst, ezrt kettskereszt (#) ltal jelzett, cltalan hivatkozst hasznl. Az 5. leckben cltalan hivatkozsokat hasznltunk az almenk fel ugr elemeinek megjelentsre. A Spry-1:.Yfect viselkeds, amit ebben a leckben hasznlunk, hivatkozs nlkl is mk dkpes, ms viselkedsek hasznlatakor azonban oda kell figyeln nk a hivatkozsok megltre.
ChanQe Property Check PIugin Drag AP Element Effects ~ Go To URL l ump enu lum p Menu Go Open Browser Window Popup Message Pre load Images Se t av Bar Image Set Text ~ Show-Hide EJements Swap Image Swap Image Restore Validate Form
109
A legtbb esetben a Dreamweaver ltrehozza a viselkedshez szksges kdot; mgis elfordulhat, hogy cltalan hivatkozst kell alkalmaznunk egyes Dreamweaver-viselkedsek akrivlshoz. A Dreamweaver tbb mint harminc viselkedst tartalmaz, amelyek mindegyike elrhet a Behaviors panelen keresztl. Vlasszuk ki a Window> Behaviors menpontot a Behaviors panel megtekintshez! A szerkesztablakban kijellt rszhez rendelkezsre ll viselkedsek megjelentshez kattintsunk a pluszjelre (+) a Behaviors panel en! A Dreamweaver-viselkedsek tbbek kztt a kvetkez lehetsgeket nyjtjk:
Bngszablak megnyitsa Kp forrsnak lecserlse s visszacserlse ro/Lover hats elrshez Kp- vagy oldalrsz eltnse s kifaktsa Grafikk felnagytsa s lekicsinyrse Felugr figyelmeztet zenet megjelentse Szveg vagy ms HTML tartalom megvlroztatsa az adott oldalrszen Oldalrszek megjelenrse vagy el rej tse Egyedi ]avaScript funkcik mkdtetse
Nem mindig rhet el az sszes viselkeds. Egyes viselkedsek csak bizonyos oldalelemek, pldul grafikk vagy hivatkozsok jelenltben elrhetek. Szksg van pldul egy kpre az oldalon, hogy a Behaviors lista Swap Image (Kp cserje) viselkedse elrhet legyen. Minden viselkeds egyedi prbeszdablakot nyit meg a r vonatkoz belltsok elvgzshez. Az Open Browser Window (Bngszablak megnyitsa) prbeszdablakban pldul megadhatjuk az j ablakban megjelenteni kvnt fjl webcmt, az ablak szlessgt s magassgt s ms ablakbeUtsokat. A megadott paramtereket brmikor mdosthatjuk. Miutn meghatroztuk a viselkeds belltsait, az megjelenik a Behaviors panel listjn gy, hogy az alaprtelmezett kivlt esemny a bal, a viselkeds neve pedig a jobb oldalon szerepel.
( ( (
)
URl to displ.Jy:
Window wldlh:
somc.p"gt ,html
l ( ' rOWS<... )
O
Men bir
ol
Cancel
f400
) )
Attrtbuces:
O O O
NI"'Ption toolbIr
l/xI;tkX'l
Help
toolbar
Status bir
WlndcM nlrnt:
~lso~~~ "" p.;:::::::::::JI
..
l!J li
5croUbin as needed Rlslu hlndks
Az esemnyt gy vltoztathatjuk meg, hogy msikat vlasztunk helyette a Behaviors listrl. Az Open Browser Window viselkeds alaprtelmezett kivlt esemnye pldul az onCiick (rkattints), ha azonban azt szeretnnk, hogy az esemnyt az egrkurzornak az elem fl helyezse vltsa ki, vltsunk az onMouseOver (Egrkurzor az elem ter/etn) esemnyre!
TAC INSI'tCTOl.
onfccus
onKtyOown
onKeyPrc.ss
onKtyUp
onMouseDown
onMoustMove
cnMouseOut
onMouseOver
onMouseUp
110
A viselkedsek hihetetlenl rugalmasak. Egyszerre tbb viselkedst rendelhetnk ugyanahhoz a kivlt esemnyhez, pldul kicserlhetnk egy kpet egy msikra, s a hozztarroz kpfelirat szvegt is lecserlhetjk egyetlen kattintssal. Br a gyors megvalsuls azt sejteti, hogy az esemnyek egyidejek, a viselkedsek vgrehajtsa valjban sorban trtnik. Amikor ugyanazzal az esemnynyel tbb viselkedst vl tunk ki, megvltoztathatjuk a sorrendjket gy, hogy felfel vagy lefel mozgatjuk ket a Behaviors panel listjn.

A lecke els felben az utazsi iroda gyfeleirl szl oldallal fogunk dolgozni. A leckben hasznlt fjl elnzethez tekintsk meg a befejezett oldalt a bngsznkben! l 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, ssk le az F8 gyorsbillentyt a Files panel megnyitshoz, s vlasszuk ki a szjtlistrl a DW CIB elemet! Bontsuk ki a lesson06 mappt a Files panelen! Vlasszuk ki benne az ourclients-finishedhtmL fjlt, majd ssk le az F 12 (Windows) , illetve az Option+F12 (Macintosh) gyorsbillentyt, hogy megjelentsk a dokumentumot az elsdleges
bngsznkben!
Az oldal a Dreamweaver Spry technolgijvalltrehozorr, Ajax-meghajts hatsokat tartalmaz.
Our Clients
" - , . '"
.~
6
mk:r"owavu tTansm/$$/OII
equ(pfN!nl worldwld&
Our Corporate Clients

Ttlese companles put their trust ln us to take care of their travel
needs. We can do tI"Ie same tor you!

Company iIglIne Diese:: Work Sbrtdata
Company Anon
ls the m ost
sophlsticatcd
tele C~r3te commlJnlcaUon rebrandIng
company ln
Web site
~~:anv fO~~~O~~!Y :'~~C~Vity.

propoga on We arrange
Mlcrowave
North America, redeslgn known for !ts Full Identity
~~I~~~~:r
2005
new logo White paper consultaUon
travel detaUs for ali the
workers ln the
and edltlng
como,zlny, but
ln the U.5. and
abroad.
Ha a Microsoft Internet Explorer az elsdleges bngsznk, a bngszablak tetejn zenet jelenhet meg, amely jelzi, hogy a JavaScript futst megakadlyozta a bngsz. Ha ez trtnik, kattintsunk az zenetre, majd vlasszuk ki az ALLow BLocked Content (BLokkolt tartaLom engedlyezse) opcit! Vigyk az egrmutatt az Our Corporate Clients cmsor fl! Megfigyelhetjk, hogy a cmsort rvid ideig piros szn emeli ki, ami ksbb eltnik. Ez a jelensg a HighLight (Kiemels) nev Spry-hats eredmnye. Kattintsunk aStartdate oszlopcmre, hogy az adatokat v szerint nvekv sorrendbe rendezzk! Kattintsunk jra a cmsorra, hogy az adatok cskken sorrendbe rendezdjenek! Kattintsunk aCompany oszlopcmre a tartalom bc sorrendbe rendezshez! A tblzat adatainak oszlopcm szerinti sorba rendezst egy Spry adatcsoport teszi lehetv. Ha vgeztnk a megtekintssel, zrjuk be a bngszablakot, s trjnk vissza a Dreamweaverhez!
111
Spry-hatsok viselkedseinek alkalmazsa

A Spry-hatsokkal vizulis hatsokat rhetnk el az oldalon, pldul kiemelhetnk elemeket, elhomlyosthatunk vagy kilesthetnk kpeket, esetleg egy teljes <di v> cmkt fldrengs mdjra rzkdtathatunk.. Ezeknek a hatsoknak a clja a figyelemfelkelts vagy egy adott oldalelem kiemelse. Minthogy erteljes hatsokrl van sz, rdemes elkerlni a tlwtt hasznlatukat, mivel halmozott jelenltk kioltja egyms erejt. l 2 Kattintsunk dupln az ourclients-start.html nevre a Files panelen, hogy megnyissuk a dokumentumot a Dreamweaverben! Vlasszuk ki a File> Save As menpontot, s mentsk el az oldalt ourclients.html nven! gy, ha jra szksgnk lesz a kiindul oldalra, vltozatlan formban megtall hatjuk a szmtgpnk merevlemezn. Brmelyik szerkesztablakban kivlasztott s brmilyen azonostval rendelkez oldalelemhez trsthatunk Spry-hatsokat. Ahelyett, hogy az aktulis kijellsre val alkalmazs mdszert hasznlnnk, trstsunk azonostt egy elemhez, majd adjunk hozz egy Spry-hatst! Az azonostt a Code and Design nzet hasznlatval fogjuk az elem hez trstani. Helyezzk az egrmutatt brhov az Our Corporate Clients <hl> cmsorban! Vlasszuk ki a Code and Design nzetet a fmenben az osztott nzet elhvshoz! Kzvetlenl a hl cmsor utn, de a zrjel ( eltt szrjunk be egy szkzt a kdba, s rjuk be a kvetkezt: id=" occ". Ez az awnost az our corporate dients szveg rvidtse.
4 5 6
6
<dl ... Id ""o lnCon t en t ") <hl id'o" oc:c:" ) Qur Corporot. C\ l eots ( ft,l>
<>
(p>Thu . c:caP'lfllu put their trus t in
v5
to t,* _
(p>&rb5p; </p )
<!<Idlv )
.-,d ow,~t-'t
"- 'I
fI-
1 ~__~,,~-~~~I~.~~~.~ I ~~.t!~~ld~ .=_=ed~ I .~~~I.~'.~'
OurClients
7 8 Kattintsunk a Design gombra a Design nzethez val visszatrshez! Ha nem lthat a Behaviors panel, jelenrsk meg a Window> Behaviors menpont kivlasztsval! A viselkeds hozzadshoz kattintsunk a pluszjelre (+)! Vlasszuk ki az Effects > Highlight (Hatsok> Kiemels) menpontot!
Appear/Fade BUnd Grow/Shrink Highlight Shake Slide Squish
Effe~ ~
Go To URL lump Men u lump Menu Go Open Browser Window Popup Message Preload Images
A Highlight prbeszdablak Target Element legrdl menjben vlasszuk ki a hl " oc c " elemet! Az alaprtelmezett Effect duration (Hats idtartama) belltst hagyjuk 1000 ezredmsodpercen! Ellenrizzk, hogy a Start Color (Kezdszn) rtke #fff, az End Color (Befejezszn) rtke #fOO (vagy a kp szerinti #ffOOOO), a Color After Effect (Hats utni szn) rtke pedig #fff legyen! Kattintsunk az OK gombra! A belltsok hatsra a <hl id="occ" > elem httere rvid ideig pirosra vlt, gy kiemelve a cmsort.
112
T,uget &mtnc :
Effect duratlon:
fM
~o.
iiij
mlUtH:conc b
~ (
OK
Caneel
Help
) ) )
SI.n Color:
End Col""
" fff
~ {Iffoooo
TOHle effea
-----------------------------------~ 10 Kattintsunk a Behaviors panel onClick terletre a viselkeds aktivlshoz! A legrdl menbl vlasszuk ki az onMouseOver elemet! Ha mdostani szeretnnk a Highlight hats belltsait, kattintsunk dupln a Highlight nvre a Behaviors panel en a Highlight prbeszdab lak megnyitshoz!
rrnm
l.,;a~
[ An rtbutes
1.0 <hh
on81ur
.f onCllck.
onDblOkk
onFocus on"'vOown
onXryPrtu onKeyUp
onMoU5~OOwn
I', l
onMouseMove on.MouseOut
onMouse:Up
II Hasznljuk a Live nzetet vagy a bngsz nket a fjl megtekinrshez! A hats csak akkor ltszik, ha az egrmutatt a cmsor fl helyezzk. Kattintsunk jra a Live View menponrra a Dreamweaver szerkesztsi mdjba val visszatrshez! 12 Mentsk el a munknkat! Ms Spry-hatsokat is adhatunk egy <di v > cmkhez vagy brmely tmbszinr elemhez, s mk dsbe is hozhat juk ket az oldal betltsvel. A Spry-hatsok a flgyelemfelkeltst szolgl vizulis eszkzk szles vlasztkt nyj tjk, amelyekkel izgalmasabb s lrvnyosabb tehetnk egy weboldaIr.
Megjegyzs: A hatst gy trlhetjk ki, hogy kivlasztjuk a Highlight elemet a Beh aviars panelen s amnuszjelre (-) kattintunk.
XML adatok hasznlata

Mieltt brmilyen adatot meg tudnnk jelenteni a Spry segtsgvel, megfelel XML adatforrst kell
ltrehoznunk. Az XML (Extensible Markup Language - Bvthet lernyelv) egy szabvnyostott formtum, amit arra hasznlnak, hogy adatokat szveges fjlokban troljanak. Minden XML fjl tbb adatsort tartalmazhat. Ebben a gyakorlatban pldul egy olyan XML fjHal fogunk dolgozni, amely tbb gyfl adatait tartalmazza. Ez a fj l a clients.xml. Az adatok nlkli gyflbejegyzsek a kvetkezkppen nznek ki: <c lient> <company> </co mpany> <desc ></ de sc > <wo rk ></wo rk > <s t a rt d a te ></ s tartdate > </c li e nt >
113
Az XML a HTML-hez hasonlan egy ler nyelv. Mindkt nyelv esetben cmkkre alapul a lers. Az XML annyiban bvthet, hogy sajt cmkeneveket hozhatunk ltre benne a lert adatok jellegtl
fggen. Ahogy azt a kvetkez gyakorlatban ltni fogjuk, az XML elemek elnevezsnek s rendsze-
rezsnek mdjt smnak nevezzk. A tnyleges adatok a nyit s zr cmke prok kz kerlnek a kvetkezkppen: <company>Company Anon< / compa ny> A specilis karaktereket, pldlu! a cmkk behatrolshoz hasznlt kacsacsrket tartalmaz adatok esetben a karaktereket klnleges hatrolval kell krlvenni, mint ahogy azt a kvetkez plda is mutatja: <de sc > ! [CDATA [Company Anon is a <str ong>bold</str ong> company.ll</desc> A CDATA hatrol elem teszi lehetv, hogy az XML adatok HTML-cmkket tartalmazzanak. A gyakorlatban hasznlt XML fjl pldul egy teljesen formzott, pontowtt HTML !istt tartalmaz.
XML adatok beptse Spry segtsgvel

Az XML smval a Spry adatobjektumon keresztl tudunk kzvetlenl dolgozni a Dreamweaverben.
A kvetkez lpsekben ezt az objektumot fogjuk hasznlni: l Amennyiben szksges, bontsuk ki a lesson06 mappt a Files panelen, s kattintsunk dupln az ourclients.html fjlnvre a dokumentum megnyitshoz! Helyezzk az egrmutatt a main Content <d i v>-ben tallhat bekezds al, hogy meghatrozzuk a Spry adatkszlet beszrsi helyt! Vltsunk t az Insert panelen a Spry kategrira gy, hogy a panel listjrl kivlasztjuk a Spry elemet, vagy a Spry flre kattintunk!
3 A Spry kategriban kattintsunk a Spry Data Set (Spry adatkszletek) ikonra ( (OO )! Ugyanezt az Insert> Spry > Spry Data Set menpont kivlasztsval is elrhetjk. Az adatkszlet fellltshoz hrom lps szksges. 4 Amikor megnylik a Spry Data Set prbeszdablak, az els kperny, amit ltunk, a Specifj Data Source (Adatforrs meghatrozsa). A Select Data lJpe (Adattpus kivlasztsa) legrdl menben vlasszuk ki az XML formtumot! A Data Set Name (Adatkszlet neve) mezben hagyjuk meg az alaprtelmezett dsl nevet, majd kattintsunk a Browse gombra!
5 A Select XML Source prbeszdablakban keressk ki a lesson06 mappt, s vlasszuk ki benne a clients.xml dokumentumot! A Select XML Source prbeszdablak bezrshoz kattintsunk a Choose gombra! A Row element (Sor elem) terleten vlasszuk ki a client elemet!
114
Specify Dab Source

._---------------Select DIli Type:
Specify Dall Alt
-----_. ~
------ ----.sl
---------.-._~
';,
.~
-'.
. S-.p1o'3
1tdltnts.x ml
o..u. Set Name
l I C ....... . )[QJ
Desig" "me {ud
Roweltment
<>
y
c..lle rm
<~
() company () taglint () de () work () stand.lIt
,.
company
..
tagline
desc
work
.t.artd.te
Company Ancn
Lit City,
U.C
CarryAII Inc.
Campany Anon is the most sophlstic,z,1ed tele communication compan.y in North America, known for its hiQh-end connectivltv . Wc afnlngc tra\lel tit City for the brightest. clearest env ironments I !!!umin:~: ~ Vist have eVflr exper!enced . Lit City employees lravel . k ' no you freQuently to Japan and China us.~our services Ii . t Univers"t, dassy portBge com~ from CarryAII. CarryAIl is expanding world wide and our travel way to services sm90th ":Ie orocess (or everyone in t:l'\e move
M~~:~~ .; ~ K no
The ';9h'f.'
0 :r.
b f;'
<ul> <1i>Carporate rebrandlng</ Il> <li>Web site redesign</ti> <li > Full ldentity makeover includ ina new 1~</1i> <ti >White paper <ul> <1i>Press relations overhBul</li> <11>Full identity makeover induding now 10go</I1 > <1I>Corporate rebrandi.'19</li> <li>Web site <ul> <.1!>Presentation workshops </Ii> <1i>White paper consultation ;,nd editillQ</li> ~1i >Weh slte f cdesIQn<./li> <1i>Corporate
2005
2001
r 1
i
,;
~
2003
...... )
",,"
Done
Con,,' )
Kattintsunk a prbeszdablak aljn a Next gombra, hogy tovbbhaladjunk a msodik lpsre!

Set Data Options
----------------~ >
m0
tlau Preview company
Company Anon
------------
----- ------ -- ---fij

T,pe ( html
~ ',\\)~ 20f3
----~-~
- -~---
Column Name ( woric
ij
O Cikk on l
tagline
Microw.~'1 ~
(~urnn 10 ~rcct It
d_c
worte
.t.rtdat.
I'" .,
I
Ut City ,
U.C
~~nr::!~tr ln lOCI
4L " -.J
Carr-yAII Inc.
The right way to move
Company Anon ls the most .sophisticated te le ~ communkation company in North America, known for its high-end connectivitv. We arrange travel Visit Ut City (or the brightest, dearest environments you heve ever experienced . Ut City employees tTavel freQuently to l aDan and Chlna usinQ our services Universal, dassy portage comes rrom CarryAlI. CarryAII is expanding world wide and our travel serv ices smooth the process for everyone in the
2005 <ul> <li>Corporate rcbrlnding</II> <li>Web site redesign</Ii> <li>Fullldentity makeover indudinQ new IOQo</li> <.1i>White oaPf!r <ul> <li>Prcss relations overhaul</1i> <Ii>Full 2001 b Identity makeover induding new logo</II> <1i>Corporate rebrandinv</Ii> <11>Web site 2003 <ul> <!i>Presentation workshops</Ii> <.11 >White paper COt\Suftatlon and editing</Ii> <li>Web ,;te ~ redeslgn</li> <1I>Corporate rebranding</>
b F;'
li'
l,
I'
,
Other Options.
l',
son CcMlJmn
, ... Hot\c
ffi
" Asa ndiI'l9 _
:1
O O
Flller out dupllc.te rows
..., -
Oiublc OJta athlno

Autord rdh dltl
ll"V i ii$ec.orvJ S
,I
l,
(
H <I.
Previou$
) (
Ntx'
) I(
Done
) (
Canal
:'
A Set Data Options (Adatlehetsgek belltsa) kpernyn vlasszunk ki egy adattpust minden oszlophoz! Az oszlopokba kattintva megnzhetjk, milyen adattpus van trstva hozzjuk. Ha kijelltk az oszlopot, az adattpus nevt a Type menben lthatjuk az ablak fels rszn. Az alapr-
11 5
telmezett tpust a legrdl men hasznlatval vltoztathat juk meg. A rendelkezsre ll adattpusok a string (karakterlnc), a number (szm), a date (dtum) s a html. Az els hrom oszlop adattpusa maradhat a string. A work cm oszlopot t kell lltanunk html tpusra, mivel HTML-cmkket tartalmaz. Az utols oszlop adattpust hagyjuk string belltson! Annak magyarzatt, hogy ez az oszlop mirt nem date (dtum) adattpust hasznl, lsd a kvetkez, Spry Data Types (Spryadattpusok) cm, dobozos szvegben! 7 Az utols lps elvgzshez kattintsunk a Next gombra! A megnyl Choose Imert Optiom (Beszrsi lehetsgek kivlasztsa) kpernyn vlasszuk ki az Insert table lehetsget, majd kattintsunk a Set Up (Beffts) gombra!
Thll sttl) Itu 'tOU s,lect'differem dispi.ly options fOf' t!'lt w,luts ln 'fOUf d.uuel. Select II dJS~YGP'lon.and then dkk the Set Up bulton to ",~C1 how '/OLI w.am 10 dlspl;ay the ckta.
'nurl ub.. HT"'L POr .. dvNmk spfy h~e will bt Iniened InlO the current Plgf:.
A SPI'Y TatMt: .allow.. fOl' ~n.lmlc. column sortlrtg and other InterUll'o't beMvlon.
(s..U, ... )
ltI ..ert muter/dctalllayOUI
HTML for ol dyNImk INsu:r/delilill.J.yout will bt: IMentd Into I nt (Urftnl j:MOf.
Clkk/ng an Ittm ln the masttr (\fh) column upd.Jtl!S the infounation ln the dtuil (nohU column. ( sot Up...
In ... rt uatUd contAiners HTML (on.sistlng of a fepuling (ont.alner structure will bt inHntd inlo tbe: (urrem p.1ge .
ScI Up...
o
o
Inull nadred contain.n wlUt spotlIgh t .rwa HTML tOftSi"ing of .a "'Ptatlng COfIt.alner SINC1111'f: will be Ins.tned Into ttlt tuntAI
~ge.
( '" U,_ ) .
6
you want 10 dls~ilY dat .
Do ftGllnseJI HTML Drt::ura.wellwr will not gentt.alt .ny HTtoIl OI lns.tn It Into the (urrtnt P'gt . Dr.g yoUr dltllset from ttlt
Bndh\f~S ~ntll'
HeJp
___ ( Pr.-. ) ~
~(
Don.
("".1
Megnylik a Spry Data Set - Insert Table (Spry adatkszfet - Ttblzat beszrsa) prbeszdablak. Ebben a prbeszdablakban olyan eszkzket tallunk, amelyekkel hozzadhatunk s trlhetnk, illetve felfel s lefel mozgatharunk oszlopokat; rendezhet jk azok adatait, osztlyokat trsthatunk a sorokhoz s oszlopokhoz, vagy egy sor kijellsvel frissthetjk a rszletrgikat.
(J 8
CoIumns
GS
"J Sof1.ble
Vts Vts Yts Vts Vts
~
t
(
(
Qt
)
) )
h :=-'" _ nil
u.gline desc
worl<
(.an1
"'Ip
stilndiltt
fi!J
add ff/tlt dus
.
.ffi I
sort. wlumn when hnekr ls tllded

Mn rrNI dus
S.1.a dm
..... "1... (
:--==~
(J
Update detail regkN'ls whtn row ls tlleked
WMn tO LISt
yDdflt ""fil reglons?
116
Kattintsunk az OK gombra az alaprtelmezett belltsok elfogadshoz! Visszatrtnk a Choose Imert Optiom prbeszdablakhoz. A kis tblzathoz, amit ebben a gyakorlatban hasznlunk, elegendek az alaprtelmezett belltsok. Lthatjuk viszont, hogy a Spry adatkszletek milyen szleskr rendszerezsi s megjelentsi lehetsgeket knlnak az sszetettebb tblzatok ltrehozshoz.
9 Kattintsunk a Done (Befejezve) gombra a belltsok befejezshez!
Spry adattpusok
A megfelel adattpus kivlasztsa a sorbarendezsi mve/etekhez szksges. A rendelkezsre ll adattpusok a kvetkezk:
string (karakterInc) - betkbl s szmokb/ ll adat number (szm) - szmrtkekbl ll adat date (dtum) - teljes dtum, pldul 6/13/2008 vagy June 13, 2008 html (htmlformtum) -leirnyelvvel Irott szveg, mint a pldban taM/hat listk
10 Vlasszuk ki a File > Save menpontot! A Dreamweavernek tarraJmaznia kell nhny JavaScript fjlt a Spry adatok mkdtetshez. Ezek a fjlok a szjt SpryAssets mappjban vannak trol va, hogy lehetv tegyk az ourclients-finished. html oldal el nzetnek megtekintst. Rendes krlmnyek kztt a Dreamweaver jelzi a fjlok hozzadst. Design nzetben lthatjuk a helyrz adatkszletekkel feltlttt tblzatot. Az XML fjlban trolt tnyleges adatok akkor lesznek lthatak, ha az oldalt megjelentjk Live nzetben vagy egy bngszben. A tblzat s a helyrz elemek mellett a Dreamweaver nhny fontos kdsort is beszrt az oldalba. A <h ea d > cmke az elbb emltett JavaScript fjlokon kvl egy JavaScript funkcit is tartalmaz.
our Corporate Clients

These companles put their t rust ;!"I us to t.)oe care of t heh' tl'1lve4 n~s . We can do the same for yo ul
I Comea!!r: II T~Une il Desc i lico """"'! il{'"",,} lI{desd
Wo'"
~rk}
Startd.ta
't8rt.date}
II Kattintsunk a Code gombra a kd megjelentshez! Grgessnk az oldal tetejre! Krlbell a 29. sornlltni fogjuk a JavaScript hivatkozsokat s a funkcit, amellyel szablyozhat a Spry adatkszlet. .
SpryOnl.js
22 23
d lents.xmt
l pt> ,
res t ~ I Or" ,
<sa- rp t
( 1-
u"c - .
(Krl pt type. -
24
~
furctlon m .... f(e<:tH l ~ 1 IQh t( tOl"QetEI n t, dI.rot I 01"1 , stcrtCo IOl" , endCo l Ol",
20
27
{
SprIJ ,E ff K L DoHlfilhlli"' t ( t orgetEl eaen t, ( du,.otlon: o.ro tl on, rr'Oftl : s t o ,. tCo 10" , to: tooole) li
}
YOr ~I ~ ~." . Oa tn . XI \U)(l to'Se t("cl dsl . setCo luanT\KM( "IIOrlt .. , " n t,.\ ); (/--)
" d"',lj
2. ,.
<t
30 31 32
ilffi tS. ~I ,
- c:l l en ts /c: I I.-n t " );
</SCI"'i pt )
3.
"
</heod)
OurClients
117
A Spry adatkszletek hatkony eszkzk az XML vagy HTML forrsanyagok beptshez s azok dinamikus webes megjelentshez tblzatokban s szvegdobozokban (jellemzen div). A Choose Insert Options prbeszdablak egyik, 5tacked containers (Halmozott szvegdobozok) nev lehetsge oldalszerkezeti rszleteket s kiemel t oldalrszeket tartalmaz, amelyek vltozatos mdokat knlnak a Spry adatkszletek beillesztsre.
Spry harmonikapanelek ltrehozsa

A Spry Accordion (Harmonikapanel) annyiban hasonlt a Spry flespanelekhez, hogy hosszabb tartalmakat kpes kompakt, tbbpaneles formban megjelenteni. A flek nem egyms mellett jelennek meg, hanem egymsra rakdnak; gy amikor egy flre kattintunk, a panel elemei finoman sztcsszva nylnak ki. Ha a panel tartalma magasabb vagy szlesebb magnl a panelnl, automatikusan grgetsvok jelennek meg rajta. Tekintsk meg a gyakorlat vgeredmnyt! 1 Vlasszuk ki a santorini-finished.html fjlt a Fi/es panelen, majd ssk le az FI2 (Windows), illetve az Option+FI2 (Macintosh) gyorsbillenryt, hogy megtekintsk az oldal elnzett az elsdle ges bngsznkben! Az oldal main Content tartalma a Spry harmonikapanelben tallhat. 2 A cmsorokra kattintva lpjnk egyik panelrl a msikra!

Paradis e by the Sea
W' ~.",
6
~ntorilllls perlect fOl' beautifui ~.tches and
fun-filled sunshff)(!.
jwe',:ome to
Paradlse! Santorini ls Greece's most rarTlous Isla nd OOod reason. The scenlc beauty. the stunnlng sunsets, the
Zrjuk be a bngsznket, s trjnk vissza a Dreamweaverhez! Vlasszuk ki a File > Close menpOntOt a santorini-finished.html fjl bezrshoz!
Spry harmonikapanel hozzadsa

Ebben a gyakorlatban egy Spry harmonikapanelt fogunk az oldalszerkezetbe pteni. l 2 Kattintsunk dupln a santorini-start.html fjlnvre a Files panel en, hogy megnyissuk a dokumentumot a Dreamweaverben! Vlasszuk ki a File> Save As menpontot! A fjlnv mezbe rjuk be a santorini.htmI nevet! Kattintsunk a Save menpontra! A santorini oldal elz oldalszerkezett mdostadan formban megtalljuk a santorini-start.html fjlban.
118
3 4
A harmonikapanel beszrsi pontjnak meghatrozshoz helyezzk az egrmutatt a Paradise by the Sea sor vgre! Kattinrsunk a Spry Accordion ikonra ( ~ ) az Insert panel Spry kategrijban! A Dreamweaver beszrja az oldalba az alaprtelmezett Spry Accdrdion elemet. A kiindul elem egy kt fl bl ll harmonikapanel a fels panellel az eltrben .
Label 1
~ontent
Lebel2
Egy Spry Accordion: Accordion ] felirat, kk szn fui s keret jelzi az j objektum hatrait. Ha mr beszrtuk a harmonikapanelt, a fuleit s a tartaImt a Design nzetben mdosthatjuk. 5 Vlasszuk ki a File> Save Al! menpontot! Amennyiben szksges, kattintsunk az OK gombra azoknak a fjloknak az elfogadshoz, amelyeket a Dreamweaver hozzdott a SpryAssets mapphoz!
G Jelljk ki a Label] helyrz son, majd rjuk be a helyre a Welcome to Santorini szveget!
~Icome to Santorin~
--......,
"- -~
. .. . -'...FT-r . . . ,
r .-
7 Jelljk ki a tetn napoz pr fnykpt s az sszes alatta tallhat, falvakrl s strandokrl szl szveget! A kvetkez, What Our Customers Say cmsort mr ne jelljk ki! 8 Kattintsunk a Code gombra, hogy gyzdjnk arrl, hogy nem hagytunk kijelleden cmkket! Bizonyosodjunk meg rla, hogy a teljes kdrsz ki van jellve a kp eltti <p > cmktl egszen a msodik lista utni zr < I u l > cmkig! Ez krlbell az 52-tl a 74. kdsorig jelenti akijellst.
~ UVf! Code
mynytes.CS5 print.css SoryTooltiPJs SpryToohip.(.n TitIe:
35
'i!'()
D
- .."
41
36 37 38 3.
42
<t
.,
40
<3
; .':~:7: to Parodi .. ,
btorinl I. ~'. !INt i .. land oood reason. lN the 'r i M'ldlv peiOpl. ali cDllblne to creat. CIn ~lIed vocotion ....rl ...... <11 Y1ttao-<,M> <p>8e a.-. to vlslt Flro, thi: cq,Jtol, and nHr'bU Oio. 801:1'1 of'" Stwftln; ~tII. ,,,.. din'"" <ul> <I i >1ba1nlng "'I tc owtled -aIIS</II )
"""age and
'.ou.
'tr
< iJ
47
48
40 50
51
<l i>8Gntorlftl bh.- ~1a. < /II) <I I)CotOl"'ful '1--.:(/ 11) <IDHI.terle VOU look</tI ) <II >Ot 9"O\IH dot the l . 1 ; </I i )
'v. <1I)Qct.tic: shopplnv options pl . . . the IlUt d l.crnlng tu.IIr' </11>

I)ttl~t
.,ta'..........,....
life tMt JUlt ..,.'t .,1 U/U )
,. " .,
50
52
~ .2
.. .,
se
57
,.
.3
""> ' Dr <II <\I
>fto .r.or-toge of <I i )S.iMlnQ,
hes on aYer'V c:oost</li ) fun</lI)

baal
<II j )
I></p>
atr custOM!"!! SO'ol< /h2 >
. . I llIOYes/cup 10 . J pgM .l dth-"4~ ~ ) gh t "'" 317 ol t "' '"!::an tOl''i ... i rooftops"
TOIII fNlII C.dar Aopi ds ....o h ,
<Ip>
Katcintsunk a Design gombra a Design nzethez val visszatrshez!
119
10 Vlasszuk ki az Edit> Cut menpontot, vagy ssk le a Control+X (Windows), illetve a Command+X (Macintosh) gyorsbillenryt a kp s a szveg vglapra msolshoz! II Trjnk vissza a harmonikapanelhez! Jelljk ki benne a Content J szvegrszt! Vlasszuk ki az Edit> Paste menpontot, vagy ssk Je a Control+ V (Windows), illetve a Command+ V (Macintosh) gyosbillentyt a tartalom beillesztshez! A Design nzetben csak a beillesztett tartalom egy rsze lesz Jthat, mivel a grgetsvok mg nem aktvak ebben a nzetben. 12 Ahhoz, hogy a teljes tartalom lthatv s szerkeszthetv vljon, kattintsunk dupln a panelre, vagy a jobb egrgombbal (Windows), illetve a Control+kattints (Macintosh) kombincival vlasszuk ki az Element View> Full (Elem nzet> Teljes) menpontot a teljes nzet megjelentshez!
Element View
~
Full . 0/ Hidden
Code Navigator .. . Edit Tag <div> .. .
OFS
Reset Ali Element Vlews
Megjegyzs: Knnyebben dolgozhatunk a tbbi panelen, ha elrejtjk a tartalmat. Ezt jobb egrgombbal (Windows), illetve a Control+kattints (Macintosh) kombinci hasznlatval, majd az Element View> Reset Ali Element Views (sszes elem megjelentse) menpont kivlasztsval tehetjk meg.
13 Helyezzk az egrmuratt a szrke szn Labe/2 sv fJ a szem ikon megjelentshez! Kattintsunk az ikonra a pam/2 elem megnyitshoz!
lebe/2
--
......
'"
....
14 Jelljk ki a Labe/2 szveget, majd rjuk be a helyre a What our customers say cmet! 15 Ismteljk meg a lpseket 7-tl ll-ig a kvetkez, What our customers say <h2 > cmsor s az alatta szerepl szveg kivgshoz! A Recommended Hotels cmsor mr ne legyen benne a kijellsben! Illesszk be a tartalmat a Content 2 panel be! A Spry harmonikapanelbl mr csak egy oldalrsz hinyzik. Ezt a harmadik panelt a kvetkez gyakorlatban fogjuk az oldalhoz ad.ni.
Tovbbi panelek hozzadsa

A Properties panel hasznlatval tudunk j paneleket hozzadni a Spry harmonikapanelhez. 1 2
Ellenrizzk,
hogy az Accordion J nem Spry harmnikapanel ki legyen jellve a szerke,L,(ablakban!
Az j panel hozzadshoz kattintsunk a pluszjelre (+) a Properties panel Panels terletn!

ne n
Whi.t our customers ...
Cunom!zr thI! wiRl
Megjegyzs: A meglv paneleket amnuszjelre (-) kattintva tvolthatjuk el, a sorrendjket pedig az Up (Fel) s Down (Le) nylra kattintva vltoztathatjuk meg.
3 Jelljk ki a szerkesztablakban a Labe/3 szveget, s rjuk be a helyre a Recommended hotels cmet! 4 5 Ismteljk meg az elz gyakorlat lpseit 7-tl ll-ig, hogy kivgjuk s beillesszk a Content 3 panel be a Recommended hote/s <hl> cmsort a fnykppel s a tblzattal egytt! Vlasszuk ki a File> Save menponrot! Hasznljuk a Live nzetet, vagy ssk le az F 12 (Windows), illetve az Option+Fl2 (Macintosh) gyorsbillenty t, hogy megtekintsk az oldalt az elsd leges bngsznkben! Alaprtelmezett bellts szerint az els panel jelenik meg legfell.
120
6 7
Kattintsunk a harmonikapanel tbbi rszre, s grgessk le ket, hogy a teljes tartalmat lthassuk! Kattintsunk az oldalsv Recommended hotels hivatkozsra gy, hogy a Recommended hotels panel csukva van, majd kattintsunk a Recommended hotels flre a panel megnyitshoz! Kattintsunk jra a Recommended hotels hivatkozsra az oldalsvban! Az oldalsv hivatkozsa csak akkor mk dik, ha a harmadik panel van megnyitva. Kattintsunk jra a Live View menpontra, vagy zrjuk be a bngsznket a szerkesztsi mdba val visszatrshez! Trljk ki a Check oue recommended hotels sort az oldalsvban! A hivatkozs csak akkor mkdik, ha a Recommended hotels panel nyitva van, s ez zavart okozhat. Mivel az egsz oldal tartalmt sokkal tmrebb formban rhetjk el a harmonikapanelen keresztl, a hossz oldal aljra mutat hivatkozs feleslegess vlt.
8 9
10 Vlasszuk ki a File > Save menpontot!
Spry harmonikapanelt hoztunk ltre, tartalommal tltttk fel, s tOvbbi panelekkel
bvtettk. Br
az ebben a gyakorlatban hozzadott tartalom mr ltezett az oldalon, megtanultuk, hogyan msolhatunk be s szerkeszthetnk tartalmat kzvetlenl a Content panel ben. Ms forrsokbl, pldul Word dokumentumokbl is bemsolhatunk tartalmi rszeket. A panelekbe a gyakorlatban hasznlt szvegen, kpeken s tblzatokon kvl brmilyen tartalmat beiJleszthetnk. A kvetkez gyakorlatban a CSS stluslapot fogjuk a Spry harmonikapanelhez igaztani.
Spry harmonikapanelek testreszabsa
A tbbi Spry eszkzhz hasonlan a Spry harmonikapanelekhez is kapcsoldik egy CSS fjl. Ebben a gyakorlatban a tartalmi panelek magassgt fogjuk testreszabni, s mdostjuk a cmkk sznbelltst.
mysryfes.cu
.. prlnt,css (prim)
.. SpryToo!tlp.as
"
.Acrordion
.AccordlonPant:1 .AccontionPOlndT.lb
.At(OtdionP,IoeIContent
.AcrordionP ol ne r ope f)
"''''''dlo,,'{
..Ac.cordlonP.aneITab~r
.AccordionP.lne!Ope", .~~~.:::;~ .AccordlonHxused A( .AccordlonFocused
"o,<fo.,.,""
1 Keressk meg s bontsuk ki a SpryAccordion.css stluslapot a CSS Styles panelen! Jelenleg ngy kls stluslap trsul az oldal un khoz. 2 3 Vlasszuk ki a listrl az . Acco rdi on Pa nel Tab elemet! Kattintsunk a ceruzval brzolt Edit Rule ikonra!
Megjegyzs: Egyes szelektornevek tl hosszak ahhoz, hogy megjelenjenek az Ali Rules svban. Ha viszont az egrmutatt a szelektor fl helyezzk, a Dreamweaver megmutatja a teljes szelektornevet.
A CSS Rule Definition for .AccordionPanelTab in SpryAccordion.css prbeszdablakban vlasszuk ki a Tjpe kategrit, s kanintsunk a szndobozra a sznvlaszt panel megnyitshoz! VltOztassuk a sznr fehrre (#FFF) a sznvlasztban!
121
Category
Type:
8ackgtound Blod<
~F~- f~'~ ~========================~;-On ~~- ~'~I

Font-~Ize: I - - , '
Font-style:
Une- helght:
Box
U..
rpx
Border
Posl Uanl ng
--n
i
Fonl-weight;
Font-varlilnt;
, --
-,
Extensloru
rp;-- -:
n unde,line
O o'ltrflne O Une-through
o blln.
Font-transrorm:
font-decoration:
Color:
Q I'f.o: :: ---'i r:: ,
O non.
( ....~
)( ncel )E_ ~
Vltsunk t a Background kategrira! A Background-cowr terleten vlrozrassuk a #CCC sznr #345FA3 sznre! Ez lesz a harmonikapanel feleni <h l> cmsor szne. A kvetkez nhny lpsben a harmonikapanel kk sznt fogjuk a #345FA3 sznre vlroztarni.
Category
T~.
bc.kground
1IOd. Box u..

80rder
Posltlontn g
Bukground-color:
!I34SFA3
Background-lmage.: {
J ( "'''''s.... )
---,
-C;
( px
8adt9rOLmd-,e~at: [ ....
Bukground-ilruKhment:
Exteosions
Background-posltlon (X):
,..--
--"
Bac.kground-posltion (Y) .....- - - - , 1
(""
;J
6
OK
)
(A 'V )(ncel)
6 7
Kaninrsunk az OK gombra! Vlasszuk ki az . AccordionPanelConten t elemet a CSS Styles panel All Rules svjban! Amenynyiben szksges, nvelj k meg a Properties sv mrett az Alf Rules sv alan! Katunrsunk a height (magassg) adatsvba az adat szerkesztshez, s rjuk t az rtket 200-rl 400-ra! A jobb oldalon rallhat legrdl ment hagyjuk a px belltson! ssk le az Enter (vagy Rerum) billentyt! Az sszes rartalmi panel ugyanarra a magassgi rtkre van llrva. 400 px-es beJltsnl tbb tartalom tekinthet meg anlkl, hogy a panelt grgerni kellene, ugyanakkor nem eredmnyez akkora magassgot, hogy az oldallrogatja esetleg ne vegye szre a tovbbi paneleket. Az .AccordionPanetContent elemhez rendelt magassg minden esetben a megjelentend tartalom mennyisgtl fgg. Vlasszuk ki az . Ac cordionPanel Open . Accor di onPane l Tab szablyt az Att Rules svban! A belltsok szerkesztshez kattintsunk a Properties sv background-color terletre, majd rjuk be a #345FA3 sznkdot! ssk le az Enter (vagy Retum) billentyt! Kanintsunk az Add Property (Tulajdomg hozzadsa) hivatkozs ra! Tulajdonsgnvnek vlasszuk ki a color elemet a legrdl men listjrl, s rendeljk hozz az #FFF szn rtket! ssk le az Enter (vagy Rerum) billentyt!
122
rnYSrYI~ Len
"
print.us (print)
SpryAccordlon~flnlshed . c.s~
.. SpryTooltlp.us
v .Accordion .AccordionPanel
AoI_. .
AccordlonPane lTil b
~l'lC
.A<coldionPu~IOPtn .Ac.cord!onPa~11 a bl-io'nr
.Ac.cordinnRx.uled
.A()fd'Onpanelope~::::::::~
.AuordlonFocuStd
fNlrgin
ovtrll~
~ddlng
Add ProQtnv
10 Vlasszuk ki az . AccordionPanel TabHover szablyt az ALi Rules svban! Kattintsunk a szndobozra a Properties svban, majd a sznvlasztval vlasszuk ki a srga sznr (#FFO) a fl hover sznnek! A kvetkezkben sok ms sznbelltst mdostani fogunk gy, hogy tlltjuk a sznrtkeket a Properties svban.
II Vlasszuk ki az . Acco rdi o nPanel Open . AccordionPanel TabHover szablyt az Ali Rules svban! A 10. lpsben al kal m azo ct folyamat megismtlsvel mdostsuk srgra (#FFO) a megnyitott panel fle betinek hover sznt a Properties svban!
._
Add
-101M.
lf'r.14SrAl .
"
" may
"'. o,"""""""'". bo"' ......

Add Prop!'rty
'---'34IFA' r ,J'FH
.'
- . " .,
'. I
,
I,
rFO
121 "
::a
;! ii
" (!
;,
;." "I ~
12 Vlasszuk ki az . Acco rdionFoc used A Foct/s (Fkusz) jellemz az aktv panelen tallhat fl llapotra utal. Ismteljk meg a 8. lpsben lert folyamatot, hogy az alaprtelmezett kk httrsznt a #345FA3 rtkre mdostsuk a Properties svban! 13 Vgl vlasszuk ki az . AccordionFocused . Acco rdi onPane l Op en . Accordi on Panel Tab szablyt az Ali Rules svban! Mdostsuk az alaprtelmezett kk httrsznr a #345FA3 rtkre a Properties svban! Sikeresen ltrehoztunk egy, a weboldal szneivel sszhangban ll sznsmt a harmonikapanel szmra. Megvltoztattuk a tartalmi panelek magassgt, hogy nagyobb tartalmi rsz legyen lthat a panel grgetse nlkl.
---Rules svban! . Acc ordionPanel Tab szablyt az Ali

~
_t:l"e
f
:." "I r.:l
.-; o,(
" .' , " "
..
..
_ O " 8
123
Osszefoglals
-----------------------------------------
sszefoglal krdsek
1 Igaz vagy hamis? Az XML egy olyan adattrolsi rendszer, amellyel a webes alkalmazsok ltal felhasznlt adatokat egyszer szveges dokumentumokban trolhatjuk. 2 3 4 Milyen elnykkel jr a Spry-hatsok hasznlata? Milyen elnyket jelent a Spry-adatkszletek hasznlata, ha tblzatokat szeretnnk a weboldalunkhoz adni? Mi a Spry harmonikapanelek szerepe?
sszefoglal vlaszok
l
Igaz. Az XML a HTML-hez hasonl ler nyelv, amelyben az adatok cm k kkel rendelkeznek, s szvegbe rendezve, nyilvnos, nem szerzi jogok ltal vdett fjlformtumban vannak jelen.
2 A Spry-hatsok fkuszpontot hoznak ltre az oldalon azltal, hogy kiemelnek, elhalvnytanak, megjelentenek vagy mozgatnak biwnyos oldalrszeket a figyelem felkeltse rdekben. 3 A Spry adatkszletek XML vagy HTML informcit adnak az oldalhoz rendezhet tblzat formjban, amely ms fejlett tulajdonsgokkal is rendelkezik. Ez lehetv teszi az interaktv adatfelhasznlsr az oldal ltogati szmra. A Spry harmonikapanelek kett vagy tbb sszecsukhat panel bl llnak, amelyek kpesek biwnyos oldalrszek tartalmr megjelenteni vagy elrejteni.
Oldalszerkezetek ltrehozsa
Lop (7j1O II 71)
"--""- . ... ._... -. ..I .

-- ~
..... ...
~."" "
....."._-
.._.
"
."",-_...,.
. u.,j _.", ............ _ . _~._ ......... _ _ '" ._ .... "....
_ ;>;tH
' ___ H. ........... __ .....___ ...... _ _U ,,,....................... ..... _ .. _ _ ............._ _H .. ..... _._.... ..................... _.... _ ... _.. _ ...... ._ .........._.u" ...._ ....._ .__ ......u........................ _ ..... _ _ .
_._ ............. _... ____ ..... ................ .
i" '''''-'' ........................ _ ..- _................. .........-.................... _ _ _.. .. _ --__1. ..... ............ ....
r.. _ ___ __....__...- .... _.......... _........._ _ ...__ ..-.. _ _..._ _ ........ .....
...._........ .
j ubheading S
1
: ubheading S
!(width: 365px ifIoat left)
iLorem ipsum doklr sit amet, consctetur sadipscing elilr, sed ! iWam oonumy einood teIqxlr invid1llJ! utlabQre et dolore . fmagm aliquyam erat, sed diam voklptua. At vero eos et jaccusam et justo doo doklres et ea reb\llD. Stet clita kas<! ~ 00 sea takirmta sanctus est Lorcm ipsum dobr isi! am:t
i{width: 365pX;
[ float: rigbt;} i jLorem ipsum doklr sit am:t, consetetur sadipscing elilr, sed i !diam 00tD.Dl1y einrod teIqxlr invid1llJ! ut labore et doklre ltmgm aliquyam erat, sed diam vo~tua. At vero eos et I, accusam et justo doo doloros et es rebum Stet clita kas<! :gUI>etgJ:en, 00 sea takimata sanctus est Lorem ipsum do lor l
l r ......... ,............ -...._~............- ........_ _-... _ ......................_................ ......_ __ ...! .............. .. .... ........ '
!sit am:t !
:
..........-.. _... - ...............
........
_..........._..........._--_..................._._....._ __ _..... ..... _._......_..._........

....
Ebben a leckben CSS..alap oldalszerkezeteket fogunk ltrehozni egszen az alapoktl.
126
7. LECKE Oldal szerkezetek ltrehozsa
A lecke ttekintse
A kvetkezket fogjuk megranulni: CSS-szablyok meghatrozsa egyes oldalszerkezeti rszekhez CSS-szablyok alkalmazsa a beszrt <di v> cmklae
Helyrz szvegek s kpek beillesztse
Begyazott CSS-szablyok exportlsa kls stluslapra A Code nzet s a Code Navigator hasznlata Vonalzk s segdvonalak hasznlata az oldalszerkezet finomhangolshoz Oldalszerkezet ellenrzse bngszkompatibilits s a szabvnyoknak val megfelelsg szempontjbl
Ennek a lecknek az elvgzse krlbell 60 perce t vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessons mappt merevlemeznlae, szksg esetn csomagoljuk ki, s keressk meg a Lesson07 mappt! A lecke sorn a kiindulsi fjlokat fell fogjuk rni. Az eddigi leckkkel ellenttben a gyakorlarok eredmnye nem az utazsi weboldal rszt fogja alkotni. Amennyiben szksgnk lenne az eredeti fjlokra, tltsk le ket jra a szmtgpnlae!
A Dreamweaver szabvnyos CSS Japokat knl, amelyek sikerrel segrik a webrervezket a stluslapokon alapul oldalszerkezetek ltrehozsban.

Lo&o(7~s71)
h -l
,
Navlp'" (760 II 28)
I;
. . . .r(7~s_)
I:
I I
.
-
!~ain Heading
-r Ubbeading
I{wiltb: 365px ifioat left) i':'>rem ipsum doklr sil am:t, coosetelllr sadipsoiog ellir, sed ~ ooJl\l!ll)' einmd terqJOr inviIunt UI labore et doklre ~gr>a aliquyam erat, sed diam vo;'rprua. At vero eos et ;aeemametjusto duo doklres et ea rebum Stet cli!a kasd ~ 00 sta taldmIIta sanclll'l esI Lorem ipsum doklr
!amel
jSubbeading
ILorem ""'"' dom sil am:t, coosetelllr sadipsciog elitt, sed ~ 000\J!ll)l einmd tetll'Or inviIUIlI UI labore et doklre alijuyam erat, sed diam voq,tua. At vero eos et ~ccusam et juslD duo doklres et ca rebum. Stet cli!a kasd n, 00 sta tak.inata sancbJs eSI Lorem ipSlrD doklr it amel
~ t rigbI;) w:th: 365px;

EgDa
.....
JConlelllilr il ''ilota'' Goes Here
--
127
Ahhoz, hogy pontosabb elkpzelsnk legyen a dokumentum rl, amelyet a lecke sorn lcre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben! l 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, ssk le az F8 billentyt a Fi/es panel megnyitshoz, majd vlasszuk ki a szjtlistrl a DW CIB mappt! Bontsuk ki a lesson07 map pt a Files panelen! Kattintsunk dupln a layout-fina!.html fjlnvre a dokumentum megnyitshoz! Megtekinthetjk az oldalszerkezetet, amit a leckben ltrehozunk. Szerkezete szempontjbl hasonlt az utazsi oldalra, de a lnyegt tekintve eltr, hogy megtapasztalhassuk egy teljesen j, meghatrozott szlessg oldalszerkezet kialaktsnak folyamatt. A kt oszlop gy keletkezik, hogy az egyik <di v> elemet jobbra, a msikat balra rendezzk. Ehhez kpest az utazsi oldal szerkezete az oldalsv lcrehozshoz jloat:left tulajdonsgot s szles baloldali margt hasznl a Main Content rszben, gy biztostva elegend helyet az elmozdtott <di v> elem szmra.
Header (width: 78opx)

Sidebar (width: 200px float: left)
,..- .. :'*
J
Main Content
(margl.....ft: 2S0px)
1 i
,
Mindkt oldalszerkezet a clear:both tulajdonsgot hasznlja alblc <di v> elemben ahhoz, hogy a lblcet a szvegdoboz aljra rendezze. Ez akkor valsul meg, ha a float tulajdonsgot a lb lc eltti egyik vagy mindkt <di v> elemre alkalmazzuk. 5 Vlasszuk ki a File > Close menpontot!
<div> elemek ltrehozsa az oldalszerkezetet meghatroz stlusokkal

Az elterjedt gyakorlat a CSS-alap oldal szerkezetek hasznlatt kveteli meg a jelenkor webtervezi
tl. A CSS-alap oldalszerkezetek a tblzatalap oldalszerkezetekkel szemben kisebb fjlmretet
eredmnyeznek, knnyebben kezelhetek, s megfelelnek az ipargi szabvnyoknak. Egy CSS-alap oldalszerkezet kt alapvet elembl ll: az oldalszerkezetet meghatroz <d i v> elemek csoportjbl s egy sor CSS-szablybl, amelyek meghatrozzk a kulcsfontossg oldalelemek formzst, elhelyezkedst s mreteit, ezltal funkcit s meggyz megjelenst klcsnznek az oldalnak.
Az oldal ltrehozsa s a <body> cmke meghatrozsa

Ebben a gyakorlatban egy res HTML dokumentumbl kiindulva fogunk felpteni egy CSS-alap oldalszerkezetet. Miutn ltrehoztuk a fjlt, meghatrozzuk az els CSS-szablyunkat, amely a <body> cmkre fog vonatkozni.
128
7. LECKE Oldalszerkezetek ltrehozsa
Vlasszuk ki a File> New menpomot! A megjelen New Document (j dokumentum) prbeszdablakban vlasszuk ki a Blank Page (j oldal) lehetsget! A Page Type (Oldaltipus) oszlopban adjuk meg a HTML tpust, a Layout (Oldalszerkezet) oszlopban pedig a <no ne > (nincs elre meghatrozorr oldalszerkezet) elemet! (Megngyelhetjk, hogy res oldal esetben a Layour CSS oldalszerkezeti lehetsgek nem elrhetek.) Karrintsunk a Create (Ltrehozs) gombra!
Megjegyzs: Ha a Dreamweaver Welcome screen (dvzlkperny) jelenik meg a program elindtsakor, gyorsabban hozhatunk ltre res HTML oldalt, ha a Create New (j dokumentum ltrehozsa) oszlop HTML elemre kattintunk.
.
. '.. ,.
Page Type :
'.
.
Layout;
!.'. ..
..
'
-, -
~ 8I.1"kTempl~te
~
I
xstT (fr.agmenO
l column etastJc, centertd l column tlutic, centered. he.Jekr and 1 column rlxed, (entered l c.olurr.n flXtd , centertd, header and f
1 column IIquld. (tnlered 1 column I1quld. (tnttred, hudtr and f
<NOprev~
AaionScnpt
Page from Templatl

Page from Sl.mp~
'1;;;1
~
CSS
),liva501pt
&
tn
2 column el<liuk, Idt sideba(
XML
2 column el.ntk, left sldewr, header.JI 2 column e[utk, nght sidebar

2 <:olumn tlaSlIc. rlglu
sl~b.lr.
~ ASP)._o", ASP V8Scrlpt > ASP.NETC,. ASP,NETI/B

ColdFu.slon
ht<ilde.r
1 c.olumn fjxtd, left sldtbilr :2 column fixe.d. left sldl!bI(, hudtr 3

2 column fjxtd. rlgm. sidebar 2 column f1xl!:d. (Ight side bM. hudtr il 2 column hybrld, left
sl~bi.r
HTMl documenI
2 column hybrld. left sldtblr, header il 2 column hybrid, rlght sIdebir 2 column ttvbdd , r!ght s idd~ar. header 2 column UQuld, left s l de~r :2 column Ilquld. ldt slde~r. huder il :2 columtlllqukI./ighl sldebaf I . t sl:cfe
IlcKTy. . ,
I _ML 1.0 T...._

( AdcJ to~..d - - -
LoyoutCSS,
Atuch CSS nl.:
fI :::Il
( CanI)
~ __
( "'Ip ) ( 0'.''''"""'... )
2
Cet more content
oe
Vlasszuk ki a File> Save menpomot! A Save As prbeszdablakban keressk ki a lesson07 mappt, majd a File Name mezbe rjuk be a layout_start.html nevet! Kattintsunk az OK (Windows), illetve a Save (Macintosh) gombra a dokumentum elmentshez! Vlasszuk ki a Window> CSS Styles menpontot! Amikor megnylt a CSS Styles panel, az Ali gombra karrintva vltsunk t Ali m6dba, amennyiben Current m6dban vagyunk! Karrintsunk a New CSS Rule (j CSS-szably) ikonra a CSS Styles panel aljn! rdemes elszr az oldalszerkezet alapjaival, a <b ody > cmkre vonatkoz CSS-szably meghatrozsval kezdeni a weboldal kialaktst.
3 4
5 Amikor megjelenik a New CSS Rule prbeszdablak, a Selector Type legrdl menben adjuk meg a Tag (redefines an HTML element) tpust! A Selector Name mez legrdl menjben vlasszuk ki a body elemet, vagy rjuk be a body nevet. A Rule Definition legrdl menben vlaszszuk ki a This document only (Csak ebben a dokumentumban) lehetsget, majd kattintsunk az OKgombra!
129
Se6rector Type:
OK
Cancel
)
)
Choose a conteXtuaI selector type for your CSS rule.
I Tag (",deflne. an HTML element)

Selector Name:
!+i
Choost or emer a name for your setector.
lbody
flame IThiS seleaorelements. II appty your ill <body>
rul~
J
tO
e
Ru" Deflnltion:
less Specific
) (
Ioto,. Specinc
, ,
( Help)
Choose where your rule wiM be defined.
! (Thi. document only)
Megjegyzs: Sok webszakember elszr az oldalszerkezet <head> rszben hatrozza meg a CSS oldalszerkezeti szablyokat. Ez a gyakorlat egyszersti az oldalfejlesztst, s lehetv teszi, hogy egyszerre csak egy fjl/al dolgozzunk. Miutn kialakult az oldal megjelense, a szablyok egy kls stluslapba kerlnek, mint azt a lecke ksbbi rszben ltni fogjuk.
A CSS Ru/e definition for body prbeszdablakban vlasszuk ki a Background kategrit! Kattintsunk a szndobozra a sznvlaszt megnyitshoz, majd a pipettval vlasszuk ki a fehr sznmintt!
CSS Rule de"nillon ror body
.., _ ....=.-: - _ - . Blckground C."'OlIOry
T~.
80)1
Bukground
Block
--~__------IF~~====~~~~~------8ackground-c:olor: IKkground4mage:
Iic kg,ound ~ r.puI :
Un
Border
l Positioni ng
ExtensJoC1!.
kkQround-imchmenl:
BKkground-posl.lon (X):
Background-positlon (Y) :
l-
:I:i.
.~~
.,r~
~n
fl
' ,:'1 ,' " 1

-:
.....
i If
.... .
;; !~
l l l
li
..
Kattintsunk a Black elemre a Category oszlopban! A Text align (Szveg elrendezse) listrl vlasszuk ki a center (kzpre rendezs) lehetsget! A szerkeszts alatt ll oldalszerkezet kzpre, a benne tallhat szveg viszont balra lesz rendezve a bngszben . Ahhoz, hogy ez az elrendezs a rgebbi bngszkben, mint pldul a Microsoft Internet Explorer 5.x verzijban is helyesen jelenjen meg, elszr a befogad body cmke szvegigaztst kell kzpre lltanunk a Text align menben. Egy ksbbi CSS-szably visszarendezi majd balra a befogad cmkhez tartoz szveget. Vlasszuk ki a Box kategrit! A Padding terlet Top mezjbe rjunk be O-t! A Margin terlet Top mezjben szintn a O rtket adjuk meg! Kattintsunk az OK gombra! Vlasszuk ki a File> Save menpontot!
8 9
A httrsznt tllrottuk fehrre, a kls s bels margkat pedig O pixelre. Mivel alaprtelmezs szerint a bngsz rugalmasan vltoz mret kls s bels margval jelenti meg a HTML elemeket, rdemes mr kezdetben mindenhol a O rtket megadni, hogy a ksbbiekben terveink szerint, ponrosan tudjuk befolysolni a megjelenst. Most ltrehozhat juk az oldalszerkezet befogad cmkit.
130
Category
Typ<
Background
Box
- - - - - -IMdtn:
HelQht:
-----------Hoat:
810ck
8 rder 0 U..
PosJtionlng
CI ... ,
r[-":...::..)~
Same for ;ali
Extensions
Padding
t!f Same for ali I . Rlght: O o:: I.

~ I px
~ ( px
Left: O
Margin
j ~
~
To.,la
kight: O
lonom: O
Left: O
I ..
J... t px
-.!..
~t
~
Bonom: O
i~
J.. !
pl!
( H" . )
( Ap.'Y ) (
c.n,) (
OK
Kls
befoglal elem ltrehozsa
A CSS-alap oldalszerkezerek kialaktsakor bevett gyakorlat, hogy az sszes <di v > cmkt s tartalmat magba foglal, befoglal <di v> cmkket hozunk ltre. Ezekkel abefoglal cmkkkel meghatrozhatjuk az oldal globlis belltsait, pldul az e1rendezsi s szlessgi rtkeket. Ebben a gyakorlatban egy ilyen befoglal cmke CSS-szablyait fogjuk meghatrozni, majd beszrjuk a hozz trstott <di v> cmkt. l 2 3 Amennyiben szksges, nyissuk meg jra az elz gyakorlatban ltrehowtt layout_start.html fjlt gy, hogy dupln a nevre kattinrunk a Fi/es panelen! Kauintsunk a CSS Styles panel New CSS Rule ikonjra! Ha megnylt a New CSS Rule prbeszdablak, a Se/eetor Type legrdl menbl vlasszuk ki az ID (app/ies to only one HTML e/ement) (Azonost - csak a HTML e/emre vonatkozik) elemet! A Selector Name mezbe rjuk be a #wrapper (vagy egy szabadon vlasztott) nevet! Ellenrizzk, hogy a ltrehozs helyre vonatkoz Ru/e Definition legrdl menben a This document only lehetsg legyen kivlasztva! Kattinrsunk az OK gombra!
,
SelKtor Typt:
Choose a contextual selector type for your CSS rul!.
L \OK
)
)
! 'D (app'i.. 10 only one HTML element)

StlKtor Name: Choose or enter
il
tB
Caneel
name for your nlector.
'"
l#wrapper
~lS se[eelor name will apply your rule to aU HTML elements wilh ld -Wrapper-.
IID
,-I ,
:.:...
Less Speclfk
) (
More Speciftc
)
j:
Ru&e: Dlnnitlon:
Choose where your rule will be defined.
I (This document only)

,~
~
~
Help
131
A msodik leckbl emlkezhetnk r, hogy a nv elejn tallhat kettskereszt egy azonost (ID) tpus szelektort jell, amit egy oldalon csak egyszer alkalmazhatunk.
Megjegyzs: A Dreamweaver megjegyzi az elz CSS-szably ltrehozsakor megadott belltsokat, gy gyakran elfordul, hogy nem kell megvltoztatnunk egyes paramtereket, mint pldul a Rule Definition belltst.
4 A CSS Rule Definition for #wra pper prbeszdablakban vlasszuk ki a kategrialistrl a Block kategrit! A Text align legrdl menben adjuk meg a left lehetsget!
C~(egory
~
Box
------------------------------~ I
Word-sp..clng:
BI<Kk
.~~round
Border
lener-sp.aclng :
VertlcaJ-aJlgn,
T~)Ct-align ;
~=--...,
US!
Posltlon lng
[ -------"i G.l "'---_:J, r .

leh
Extensions
Megjegyzs: Ha tbbet szeretnnk megtudni a CSS szelektorok rvnyeslsi sorrendjnek meghatrozsi mdjrl, keressk meg az Understanding Specificity rszt a www.adobe.com/devne[/dreamweaverl anicles/=_speciflciry.html weboldalon!
Az elz gyakorlatban belltott, <b o dy> cmkre vonatkoz szabllyal kzpre igaztottuk a szveget, hogy az kompatibilis legyen a rgebbi bngsz kkel. Mivel a #wrappe r elem hez hasonl awnost szelek torok pontosabban meghatrowu oldalelemekre vonatkoznak a stlusszablyokban, mint a <b ody > cmke szelektora (ami a teljes oldaltestre vonatkozik), gy fellrjk azt, s a #wra pper <di v> cmkhez tartoz sszes elem balra s nem kzpre lesz igaztva. 5 Vlasszuk ki a Box kategrit! A Width mezbe rjunk be 760-at, majd ssk le a tabulto rt! A Margin rszen vegyk ki a pipt a Same for all jellngyzetbl! A Top mezbe rjunk be O-t, majd ssk le a tabultort! A Right legrdl menben vlasszuk ki az auto lehetsget! A Bottom mezbe rjunk be O-t, majd ssk le a tabultort! A Left felugr menben vlasszuk ki az auto lehetsget, majd kattintsunk az OK gombra a belltsok jvhagyshoz! Ez az oldalszerkezet 760 pixel szles, ami jl illeszkedik a 800x600 pixel felbonts kpernybe. Mirt nem hasznlunk 800 pixeles oldalszerkezetet? A 40 pixelnyi klnbsg a bngsz szlei nek s a szksges grgetsvoknak ad helyet. A bngsznek ez a rsze a fablak feletti s alatti rszekkel egytt chrome nven ismert.
C.acegory
T,..,. Silckground
Box
..........
Blod<
to
WId"', 1 0 '6
Helgh"
Float
80fder
US!
i - --,
Clnr:
i -"---,
_ _ __
Positioning
unslons
Padding
-=_ _____ Margln --:::--_

:...:..
O Samefor~1
TOp:
-...., lotIom:
Rlght:
''-'~-'-' '' :
J
--
Top,@
light: [a.ula
III"":"- .....,1 ..
)
@! . It . ox
.: ,
Left: huta
\
( Apply ) ( Concol
olt
A jobb s bal oldali margk auto belltson vannak, hogy a #wrapper <di v> s gy az oldal tartalma is kzepre kerljn. Ebben a gyakorlatban, ha a bngszablak tbb mine 760 pixel szles,
132
a fennmarad szlessg automatikusan egyenl arnyban oszlik el a jobb s bal oldali marg kztc. Most kszen llunk arra, hogy lcrehozzuk a <di v > cmkt s a #wra pper stlust trstsuk hozz. Az about.html oldal.profile <di v> cmkjvel vgzett munknk kapcsn emlkezhetnk r, hogy a Drearnweaver lehetsget ad a kt mvelet egyidej elvgzsre. 6 Kattintsunk az Insert Dv Tag ikonra az Insert panel Layout kategrijban! Ha megnylt az Insert Dv Tag (Dv cmke beszrsa) prbeszdablak, amennyiben szksges, vlasszuk ki az At inserton point (Beszrs a szvegkurzor helyn) belltst! Az ID leg rdl menben vlasszuk ki a wrapper elemet, majd kattintsunk az OK gombra! A Dreamweaver hozzadja az j <di v> cmkt az 01dalhoz - a Contentfor d "wrapper" Goes Here helyrz szveggel egytc.
IMf R:
( /II IrIKftton ",,,t
iH
c-
E(
CmUI
t
)
)
CI,ss:
II>
I!t
Iwr.lppe:r
( Now
I~
)
...1.
css Rul<
() Code
e:J SpIn
uvt View...
~O_ Dr id ~:<>oes
Here
,~ uvt codt
TJtle (untitled Doc.ument
i ~t.
e.
c 0.%.
t>u.
ehocl< P...
II
ssk Je az F4 billentyt, hogy az sszes panelt bezrjuk, s csak a szerkesztablakot lssuk! Megfigyelhet jk, hogy a szaggatott vonallal hatrolt #wrapper <di v > cmke kzpre van igaztva a szerkesztfelleten . ssk le jra az F4 billentyt, hogy ismt megjelenjenek a panelek, majd mentsk el a dokumentumot a File> Save menpont kivlasztsval!
A #wrapper <di v > cmke jellemzen msik <di v> cmkket foglal magba, nem pedig szvegeket vagy kpekec. Abefoglal <di v > clja az oldalszerkezet szlessgnek behatrolsa. Most, hogy a kls befoglal cmke a helyre kerlt, kialakthatjuk az oldalszerkezet alapvet felosz, , tasac.
Megjegyzs: Ha az jonnan beszrt <div> cfmke krl nem lthat a szaggatott vonal, kattintsunk a Visual Aids (Vizulis segdeszkzk) mengombra a szerkesztablak eszkzsvjban, s vlasszuk ki a CSS Layout Outlines (CSS oldalszerkezeti krvonalak) lehetsget!
Fbb
oldalterletek ltrehozsa
A jelen oldalszerkezet hrom rszre lesz felosztva : ez a fejlc, a tartalmi rsz s a lblc. Mindhrom terlet Jcrehozsa kln CSS-szablyt s <di v > cmkt ignyel. l Amennyiben szksges, nyissuk meg a layout_start.html fjlt gy, hogy dupln a nevre kattintunk a Fi/es panelen. Elszr is hozzuk ltre az els CSS-szablyt #header nven! Kattintsunk a New CSS Rule ikonra a CSS Styles panelen! Ha megnylt a New CSS Rule prbeszdablak, rjuk be a #header nevet a Selector Name mezbe! Ellenrizzk, hogy a Selector 7jpe legrdl menben az ID (applies to only one HTML element) legyen kivlasztva, majd kattintsunk az OK gombra!
133
SelKlor Type:
( , 0It , , ~
( Caneel )
Choose a contextual seleclor type for your CSS rule.

( ID (appii.. 10 only one HTML element)
Stledor Name:
r header
'Th is seleaor name will apply your rule [O
ali HTML elemenu. wlth id
"header~ .
I:
II
~
II
(
Rur. OetinltJon:
Le .. Specifle
) (
More Specifie
Choose where your rule will be deflned.
I (This documenl onlv)

3
Help
A CSS Ru!e definition for #header prbeszdablakban vlasszuk ki a Box kategrit! AMargin terleten vegyk ki a pipt a Sam e for ali jellngyzetbl! A Top mezbe rjunk be l2-t, majd ssk le a tabu1tort! A Bottom mezbe is U-t rjunk be, majd jra ssk le a tabultort, s kattintsunk az OK gombra! Alkalmazsa urn a #header CSS-szably hagy egy kis helyet a <di v > cmke alan s fltt. Szlessget nem szksges megadnunk, mivel alaprtelmezsben a blokkszint HTML elemek, mint pldul a <di v> cmkk, akkora szlessget vesznek fel, hogy kitltsk az ket tartalmaz elemet, amely ebben az esetben a #wrapper <di v > cmke. Folytassuk a msik kt kvnt CSS-szably meghatrozsval!
~~=-:;j~
Cau:gory
Ty
Background
Block
Width:
Float:
lill><
Un
Border
Po~ltj ooln~ Ext~ns l ons
Helght:
;=--..,
Ss.ame for ali
Cl "
I -- .., r
_
O s.me for ali
Padding --:_ _ _ _ _ _ M.rgin _ _ _ _ __
Top:
~ ~",;;..._71.;J p :
I
Rl9ht: -~ ll ~;; - TI
Iottom: left:
,r...,.---'''.4
r.~=:::;:; ,x :I
Rlght
i. :p)t : ~ IT, W--f'
..nom:l l~
L.~: I
I ::,P' =; =: Iffi f.e:""=--"": c :
(Hel. )
Kattintsunk a New CSS Ru!e ikonra a CSS Sty/es panelen! Amikor megnylt a New CSS Ru/e prbeszdablak, a SeLector Name mezbe rjuk be a #content nevet! Ellenrizzk, hogy a Se!ector Type menben az ID (app/ies to only one HTML e/ement) lehetsg legyen kivlasztva, s hogy a Ru/e Definition legrdl men This document only belltson legyen! Kattintsunk az OK gombra! A CSS Ru!e definition for # con ten t prbeszdablakban vlasszuk ki a Box kategrit! Vegyk ki a pipt a Padding terlet Same for aL! jellngyzetbl, majd rjunk be O-t a Top mezbe! A Margin terleten is vlroztassuk meg a Same for aL! belltst, majd szintn O-t adjunk meg a Top mezben! Kattintsunk az OK gombra a belltsok jvhagyshoz! Ezeknek a belltsoknak az eredmnyekppen a tartalmi rsz kzvetlenl a cmsor alatt, szkz nlkl fog megjelenni.
134
"';:=~~~ TVP<
Background
Block 80rder
Posltion'ng
Calego,.,
Iox
Ftoat: CI.ar,
;-~...::;
u..
E.xtenslons
Paddinu -::::-_ _ _ __ _ Morgln _ _ _ __ __
O Samt r", ali

~I--~ ~
O Sam. r", ali
RJghc
lotIom:
,--o P)C
I
..
Top,la
Rlghl: Bonom: lelt:.
~I-~ ,", !+l~

: p.
1
Pl(
;I ..
leh
,"
00< )
( Apply ) ( C>n<.1 ) (
Az utolS, meghatrozsra vr CSS-szably, a Hooter a lblcre vonatkozik, s nagyban hasonlt a fejlcet meghatroz #hea d er szablyra, gy rvidebb ton is ltrehozhatjuk. 6 A CSS Styles panel ben jobb kattintssal (Windows), illetve a Control+kattints kombincival (Macintosh) vlasszuk ki a helyi menbl a #header stlust, majd kattintsunk a Duplicate (M-
solat ltrehozsa) lehetsgre!

body
Go to Code
New...
Edi!. ..
Ha megjelent a Duplicate CSS Rule prbeszdablak, rjuk be a #footer nevet a Selector Name mezbe, majd kattintsunk az OK gombra! Ha egy meglv szablyt msolunk, az j szably ltrehozsakor nem jelenik meg a CSS Rule definition prbeszdablak. Ha vltoztatnunk kell az j szablyon, a CSS Styles panel Properties svjban adhat juk meg az j belltsokat.
"-Typ<:
Choose il contexQJlI seJectCM' type for your CSS rule .
t
~
,
Cancel
! ID (appii to only on. HTMl.lement)

Setutar Namr.
Choose or enter ti. name for your selector.
I-Ifooteij
'This seltctor name wlll apply your rule to aj! IfTML elements wI1h ld -footer'".
If:.!
--(
Ru" Dlfinllian:
Le .. Speciffc
) (
Mor. sp"OmC
Choo whore your ",Ie wtll be. deflned.
I (This document only)
H.lp
135
8 A CSS Styles panel ALI Rules svjban vlasszuk ki a #foo t e r szablyt, majd a Properties svban kattintsunk az Add Property hivatkozsra! rjuk be a elear tulajdonsgot az els oszlop res mezjbe, majd ssk le a tabultort! A msodik oszlop legrdl menjben vlasszuk ki a both lehetsget!
CSSSTYUS
<-
>
body
Iwrilpper
Itreader
.trconlenl
_.r
rN rgin-bottom
12px
nw:rgm-top
Add ProPI !'ty
A clear:both CSS-tulajdonsg biztostja, hogy alblc terletn ne jelenjen meg egy lebegtetett elem sem. A lecke ksbbi rszben ltni fogjuk, hogy a tartalmi rszbe kt lebegtetett <di v> cmke is kerl majd. Most, hogy meghatroztuk az oldalszerkezet fbb rszeihez tartoz CSS-szablyokat, a #he a de r szabllyal kezdve hozzadhatjuk ket az oldalhoz. 9 Jelljk ki a Content for id "wrapper" Goes Here helyrz szveget, majd ssk le a Delete billentyt a szveg trlshez! 1O Kattintsunk az Insert Div Tag ikonra az Imert panelen! Az Imert Div Tag prbeszdablak Insert legrdl menjben vlasszuk ki az After start of tag (Cmke kezdete utdn) elemet, a szomszdos legrdl menben pedig a <div i d ="wrappe r" > lehetsget! Az ID legrdl menben adjuk meg a header elemet, majd kattintsunk az OK gombra!
I After sUrf of ItO
Init":
E
(
--~
Cona'
Help
) )
.~ Ih "" ..
( New CSS Ru" )
Iffi
Azzal, hogy beszrruk aitheader <di v > cmkt a itwrappe r <di v> cmke kezdete utn, egymsba gyaztunk kt <d i v > cmkt. Ennek a kdja a kvetkezkppen nz ki: <di v i d="wr appe r" > <di v i d=" head er " > Co nte nt f o r id "header " Goes Here </ d iv> </d i v> Most hozzunk ltre tovbbi kt, oldalszerkezetet meghatroz <d i v> cmkt, mindkettt a it wr app e r <di v> cmkn bell! II Kattintsunk az Imert panel Imert Div Tag ikonjra! Az Imert Div Tag prbeszdablak Imert legrdl menjbl vlasszuk ki az After tag (Cmke utdn) lehetsget, a szomszdos legrdl menben pedig a <di v id=" heade r" > elemet! Az ID menben a content terletet vlasszuk ki, majd kattintsunk az OK gombra!
136
(
CI... : [
10: tcontent
at
C.ntel
Hel.
Iffi I~
(
(
) )
( _CSSOul. )
Megfigyelhetjk, hogy akrhnyszor kivlasztunk egy elemet az ID legrdl menben, csak a mg nem trstott ID szelektorok kzl vlaszthatunk. Lehetsgeink korltozsval a Dreamweaver megakadlyozza, hogy jra felhasznljunk egy awnostt. 12 Kattintsunk az Imert Dv Tag ikonra az Imert panelen! Az. Insert Dv Tag prbeszdablak Imert legrdl menjben vlasszuk ki az After tag lehetsget, a szomszdos legrdl menben pedig a <di v id=" co ntent " > cmkenevet! Az. ID legrdl menben vlasszuk ki a footer terletet, majd kattintsunk az OK gombra! A helyrz szveg segt meghatrozni a fbb oldalszerkezeti elemek elhelyezkedst az oldalon.
13 A szerkesztsv Title mezjbe rjuk be a Layout cmet, majd ssk le az Enter (Windows), illetve a Retum (Macintosh) billentyt! 14 Mentsk el a dokumentumot a File> Save menpont kivlasztsval!
A kvetkez gyakorlatban kiterjesztjk az alapvet oldalszerkezetet nhny konkrtabb tartalmi terlet hozzadsval.
Tartalmi rszek hozzadsa az oldalhoz

Br a lecke sorn eddig ltrehowtt alapvet oldalszerkezet is teljesen hasznlhat, az erre ptett oldal elgg egysk lenne. Akifinomultabb oldalszerkezetek ltalban tovbbi tartalmi rszeket tartalmaznak egy szerkezeti <di v> cmke mellett vagy magba a cmkbe gyazva. Ebben a gyakorlatban mindkt mdszerrel megismerkednk. l 2 Amennyiben szksges, nyissuk meg jra a layout_start.html fjlt gy, hogy dupln a nevre katrintunk a Fles panelen! Elszr a logt tartalmaz <di v > cmke CSS-szablyt hatrozzuk meg. Kattintsunk a New CSS Rule ikonra a CSS Styles panel ben! Amikor megnylt a New CSS Rule prbeszdablak, rjuk be a #logo nevet a Selector Name mezbe! Ellenrizzk, hogy a Selector 1jrpe legrdl menben az ID (app/ies to only one HTML element) lehetsg legyen kivlasztva, s hogy a Rule Defintion legrdl men a This document only belltson legyen! Kattintsunk az OK gombra! Ebben az oldalszerkezetben a tervezett log egy httrkp, amely 760 pixel szlessg s 71 pixel magas. A magassg rtkt azrt kell megadnunk, hogy a teljes grafika lthat legyen. Valamennyi bels margra is szksg van ahhoz, hogy a log elklnljn a tbbi oldalelemtl.
137
,-"0
.. _...., . . _ ...... ~t...-~~
Category Typ.
RKkground
Box - - - - - - - - - - - - - - -- - - Width:
.ock
Border
., .
\
Float:
U..
I
~:!~~~~:
Paddln9 _ _ _ _ _ _ Mor9In _-,--_ _ _ __
o SImI! for ali
Top: p X
I!l! Sam. fot ali

! ,
-"-7\
Top, l
--
I
I"
"";""
, px
:1
~ L.!- \. PX ~I
~ . px
---..,.! ~
3 A megnyl CSS Rule definition for # l aga prbeszdablakban vlasszuk ki a Box kategrit! A Height mezbe rjunk be 71-et! Vegyk ki a pipt a Same for all jellngyzetbl a Padding terleten, majd a Bottom mezbe rjunk be 12-t! Kattintsunk az OK gomb ra! Most hozzuk ltre a #l ogo <d i v> cmkt a megfelel helyen, a #header <d i v> cmkn bell!
Initn:
( After start of ~g
~ ( <diV 1d--1wacHr"'>
I'ij
t
( (
Class:
L
11000
i l!j
C"",ol
Help
--
~
)
)
ID:
liI
)
( _CSS ....
Kattintsuk az Insert Div Tag ikonra az Insert panelen! Az Insert Div Tag prbeszdablak Insert legrdl menjben vlasszuk ki az After start of tag elemet, a szomszdos menben, pedig a <di v id="header" > lehetsget! Az ID legrdl menben vlasszuk ki a logo opcit, majd kattintsunk az OK gombra! Mivel a #header <di v> cmkt elkezdtk tartalommal feltlteni, nincs szksgnk tovbb a helyrz szvegre s eltvolrhatjuk.
5 Jelljk ki a Content for id "header" Goes Here helyrz szveget, majd ssk le a Delete billentyt a trlshez! Most hozzunk ltre mg egy, srlussal meghatrozott elemet a #header <div> cmkn bell a f navigcis eszkzk szmra! Mivel a CSS-szably nagyban hasonlt a # logo szablyhoz, az j szablyt msolssal is ltrehozhat juk a Duplicate lehetsg hasznlatval. 6 A CSS Styles panelben jobb kattintssal (Windows), illetve a Control+kattints kombincival (Macintosh) kattintsunk a #Iogo srlusra, majd a megjelen helyi menbl vlasszuk ki a Duplicate lehetsget! Amikor megnylik a Duplicate CSS Rule prbeszdablak, rjuk be a #nav nevet a Selector Name mezbe, majd kattintsunk az OK gombra! Most mdostani fogjuk a #nav <di v> cmke megadott magassgi rtkt, s megszntetjk a felesleges bels margt a cmke als rszn . Vlasszuk ki a # na v szablyt a CSS Styles panel All Rules svjban! Elszr mdostsuk a magassgi rtket a Properties svban 71-rl 28-ra, majd vlasszuk ki a padding-bottom tulajdonsgot, s kattintsunk a kuka ikonra a CSS Styles panel jobb als sarkban a szably kitrlshez! A ina v <di v > cmke is a #heade r <di v> cmkbe lesz gyazva, viszont - s ez fontos - kzvetlenl a # l aga <di v> cmke urn.
138
<style>
body
Iwrapper
Ihtader
~onle nl
'foottr
,~
hfJgtu
. 23P'(
Kattintsunk az Insert Div Tag ikonra az Insert panelen! A megjelen Insert Div Tag prbeszdablak Insert legrdl menjben vlasszuk ki az After tag lehetsget, a szomszdos menbl pedig a <d i v i d =" logo " > cmkt! Az ID legrdl menben adjuk meg a nav elemet, majd kattintsunk az OK gombra! Nem minden tartalmi terlet van kzvetlenl az elsdleges oldalszerkezeti <di v> cmkkbe gyazva. A kvetkez lpsben egy olyan bannerszablyt fogunk ltrehozni, amely a fejlc s a tartalom kz keldik. A leggyorsabb mdszer megint csak egy meglv szably lemsolsa s mdostsa.
F
CI...: ID:
:1
<AflC21
~I-v-===~I' ~
..:):-....
.(~:_:CSS:::;::;Ru: .
jt!t
.....
)
)
A CSS Styles panelen jobb kattintssal (Windows), illetve a Control+kattints kombincival (Macintosh) vlasszuk ki a #nav stlust, majd a helyi menbl vlasszuk ki a Duplicate lehets get! Amikor megjelenik a Dupticate CSS Rule prbeszdablak, rjuk be a #banner nevet a Selector Name mezbe, majd kattintsuk az OK gombra!
10 Vlasszuk ki a #bann e r szablyt a CSS Styles panel AtL Rules svjban! A CSS Stytes Properties svjban vltozrassuk a height rtket 28-rl 200-ra!
body
"""pper
"header
kentent
.wooter
"OOO
_v
139
II Kattintsunk az Insert Div Tag ikonra az Insert panelen! Az Insert Div Tag prbeszdablak Insert legrdl menjbl vlasszuk ki az After tag lehetsget, a szomszdos legrdl menbl pedig a <di v i d= "heade r" > cmkt! Az ID legrdl menben vl asszuk ki a banner elemet, majd kattintsunk az OK gombra! Kezd kialakulni az oldal szerkezete. Az oldalszerkezet fejldsnek kvetkez lpse a tartalom kt oszlopba rendezse. Ehhez elszr ltre kell hoznunk egy-egy stlusszablyt az oszlopokhoz.
12 Kattintsunk a New CSS Rule ikonra a CSS Styles panelen! Ha megnylt a New CSS Rule prbeszdablak, rjuk be a Selector Name mezbe a #leftColumn nevet! Ellenrizzk, hogy a Selector TJpe legrdl men az ID (app/ies to only one HTML element) belltson legyen, s hogy a RuLe Definition menben a This document only lehetsg szerepeljen! Kattintsunk az OK gombra! 13 Amikor a CSS Rule definition for #leftCol umn prbeszdablak megnylt, vlasszuk ki benne a Box kategrit! A Width mezbe rjunk be 365-t, majd ssk le a tabultort! A Float legrdl menben vlasszuk ki a left elemet! Kattintsunk az OK gombra! A float tulajdonsg hasznlata kulcsfontossg ahhoz, hogy CSS segtsgve! oszlopokat hozhassunk ltre. Bizonyra emlksznk r, hogy egy lebegtetett elem a befoglal elemnek egyik oldalra rendezdik, gy az elem tbbi tartalma kr csoportosul. gy lehet a stluslapokkal jobbra vagy balra rendezett kpeket vagy oszlopokat kialaktani. A kt oszlop szndkosan hasonl, gy megint csak a szably msolsa a leggyorsabb mdszer a msodik oszlop ltrehozsra.
Catfgory
Tvpe
Background
------------------------------------WId"': 1365
He'ght:
80)(
81>
&order
Ust Pos lfionln9
Exu~ ns ion s
l --- r
Float: Cica"
1" ::=~I !!3 \= "

I I
liJ Same 'or AI,
Paddlng -=_ _ _ _ _ _ Margin -::;--_________
l!!! Sam. 'or AI'

Top:
IlJght:
BoUom:
l~
. .! \
=--=.;
...!... c plt
.
"
TOp:
Left:
..
' I
Rlght:
,.:..&X
~ ,
Ionom:
left:
r.- ..
I
- :'I
-=-
"7'
px
:)
140
7. LE CKE Oldalszerkezetek ltrehozsa
css STYlES
"""pp.,,
'ht:;r,der
body
IIcontem
tfoottr
'Iogo
~nner
,lehColumn
no ..
Add Prom:ay
Inhuit
14 A CSS Styles panelen jobb kattintssal (Windows), illetve a Control+kattints kombincival (Macintosh) kattintsunk a #l e ft Co l umn szablyra, s a helyi men bl vlasszuk ki a Duplicate lehetsget! Amikor megjelenik a Duplicate CSS Rule prbeszdablak, rjuk be a Selector Name mezbe a #rightColumn nevet, majd kattintsunk az OK gombra! 15 A CSS Styles panel Al! Rules svjban vlasszuk ki a #r ight Co l um n szablyr! A Properties svban vltoztassuk a float tulajdonsg rtkt left belltsrl rightra! Mr majdnem kszen vagyunk. A gyakorlat htralev lpseiben a <di v> cmkket fogjuk az 01dalhoz adni a hozzjuk rendelt sdlusszablyokkal egytt. 16 Kattintsunk az Insert Div Tag ikonra az Insert panelen! Az Insert Div Tag prbeszdablak Insert legrdl menjben vlasszuk ki az After start of tag lehetsget, a szomszdos legrdl menben pedig a <di v i d =" conten t " > cmkt! Az ID menben adjuk meg a left Co l umn elemet, majd kattintsunk az OK gombra! A B ogo <di v> cmkhez hasonlan a #rightColumn cmke is egy msik befoglal elembe, a #cont e nt cmkbe van gyazva, egy msik begyazott <d i v> cmke, a #l eftColumn utn.
7
Class:
10: l"hCOlum.
( N", CSS
fi
(
c.nc.1
Help
,
)
)
I !J
Ru" )
17 Kattintsunk az Insert Div Tag ikonra! Az Insert Div Tag prbeszdablak Insert legrdl menjben vlasszuk ki az After tag lehetsget, a mellette lv legrdl menben pedig a <di v i d= " l e ft Co lumn" > cmkt! Az ID legrdl menben adjuk meg a r ightCo l umn elemet, majd kattintsunk az OK gombra! Mr csak egy kis rendtevs van htra. 18 Jelljk ki a Content for id "content" Goes Here helyrz szveget, majd trljk ki a Delete billenryvel !
141
19 Vlasszuk ki a File > Save menpontot! Akr a mostani llapotban is tadhatnnk ezt az oldalt egy grafikusnak, de nehezen tudn megllaptani, mi a clunk vele. A tiszta, tartalom befogadsra kszen ll oldalszerkezet ltrehozshoz hasznos a vizulis helyrz elemek hasznlata. A kvetkez gyakorlatban ezt fogjuk elvgezni.
Helyrz elemek beszrsa

Ebben a gyakorlatban ktfle helyrzvel fogjuk kitlteni az oldalszerkezetnket: kpi s szveges
helyrzkkel.
Amennyiben szksges, nyissuk meg jra a layout_start.html fjlt gy, hogy dupln a nevre kattintunk a Files panelen!
2 Jelljk ki a Content for id "logo" Goes Here helyrz szveget, s trljk ki a Delete letsvel! Kattintsunk az Images gombra az Imert panel Common kategrijban, majd vlasszuk ki a legrdl menbl az Image Placeho/der elemet! 3 Amikor megnylik az Image Placeholder prbeszdablak, rjuk be a Name mezbe a Logo nevet! A Width mezbe rjunk be 760-at, a Height mezbe pedig 71-et! Hagyjuk a tbbi mezt alaprtelmezett belltson, s kattintsunk az OK gombra! Ugyanilyen mdon hozhatunk ltre helyrzket a #n av s a #b a nner <di v> cmke rszre is.
(
"'rne:
lLeoo
OK
Wldth: [760
l Ho'' ' ':j71 c- Q l I
( Cane.' (
Help
) )
)
AJtlrnatelext:
A 2. s 3. lps megismtlsvel cserljk le a #nav <d i v> cmke helyrz szvegt egy Navigation el n evezs , 760 pixel szles s 28 pixel magas helyrz kpre!
142
Ismteljk meg megint a 2. s 3. lpst, s cserljk ki altbanne r <di v> cmke helyrz szvegt egy Banner elnevezs, 760 pixel szles s 200 pixel magas helyrz kpre! Most, hogy a grafikus helyrzk a helykre kerltek, szveges helyrzket is beillesztnk egy mindkt oszlopon tfut cmsorral kezdve.
Lep(Hh71)
21)
"'. "l"
lK f !
W!(
U,,1(Odt
6 Helyezzk az egrmutatt a Content for id "leftColumn" Goes Here helyrz szvegbe, majd vlaszszuk ki a <di v UeftC o l umn > cmkt a cmkevlasztban! A balra mutat nyl le ts vel helyezzk a szvegkurwrt kzvetlenl a <div UeftColumn > cmke el a szerkesztablakban! rjuk be a kvetkezt: Main Heading (Fcm). A szveg a dokumentum #content <d iv> rszn bell fog megjelenni, de az els oszlop <di v > cmkje eltt. Ha nem ltszik a Properties panel, a megjelentshez vlasszuk ki a Window> Properties menpontot! A Properties panel Format legrdl menjben vlasszuk ki a Heading l (Els szint cmsor) elemet!
~
7
7
~ain Reading
I iContett filr i:! 'leJICobm" Goes Here
<body> <dIVlWt'1PP1 r> <dlv*content> <hl>
Jelljk ki a Content for id "leftColumn" Goes Here helyrz szveget, s rjuk be a helyre a kvetkezt: Subheading (Alcm). A Properties panel Format legrdl menjben vlasszuk ki a Heading 2 (Msodik szint cmsor) elemet! Helyezzk az egrmutatt az imnt bert szveg utn, majd ssk le az Enter (Windows) , illetve a Retum (Macintosh) billentyt, hogy j cmson hozzunk ltre a meglv cmsorok alatt! Azrt, hogy ne kelljen begpelnnk a helyrz bekezds szvegt, a knyvhz tartoz weboldalrl letimetnk egy szvegfjlt a helyrz szveggel, amit lemsolhacunk, s az oldalba illeszmetnk. Bontsuk ki a lesson07 map pt a Files panelben, s kattintsunk dupln a placeholderjext.html fjlnvre a dokumentum megnyitshoz! Vlasszuk ki az Edit> Select Alt menpontot, majd a Control+C (Windows), illetve a Command+C (Macintosh) gyorsbillenty letsvel helyezzk a szvege t a vglapra! Ezutn a File > Close menponttal zrjuk be a dokumentumot! Trjnk vissza a layoucstart.html fjlhoz, s ssk le a Control+ V (Windows), illetve a Command+ V (Macintosh) gyorsbillentyt a kimsolt szveg beillesztshez!
143
Main Heading
~bbeadlng
~~ cnt, sed dilm YO~D.a. AJ \'CfO cos ct
.
ran ~ dobr si ~ COaSetCC\r ~iIe w, sed mwmyei;:rrod ~ iMhnlJ lIb.n et dobn:
:c...... R>r il '\'j!!lI9>ImI'
Goes Hcn:
I'
".....
9
et jUSlO doo dobrcs et ca rdun Siet elia k.ud

00 SCI
taJCDU sanctus CI1 Lorem ~ dob
Pontosan ugyanezt a ranalmat a jobb oldali oszlopba is be mdjuk illeszteni egy egyszer s gyors mdszerrel. A szvegkurzon a baloldali oszlopban tanva vlasszuk ki az Edit> Select All menpontot! Megfigyelhetjk, hogy az alkalmazs csak a illeftCol umn <di v > cmke tartaImt jelli ki. ssk le a Control+C (Windows), illetve a Command+C (Macinrosh) gyorsbillenryt a szveg msolshoz, majd jelljk ki a Content for id "rightColumn" Goes Here szveget, s a Control+ V (Windows), illetve a Command+ V (Macintosh) gyorsbillenryvel illesszk be a kimsolt tartalmat!
I
!Main Heading
~:beadlng
ID "'"
~ubbeadlng
r 'w. _la
rem ~ dobr st amet, COnSC:tetIJ ~ dir, ~ iam oon.any emoo lCItPOt' iM1Ut ut labon:- el dobrc aJi:tU)1UTl enlt, sed m \'O~ AI 'om) eos ct ~ cl justa dw dok>rcs et ca rW.m s1ct eim Iwd
saa= ... Lo"", """"dolo<
faP
~ ~ door ,. arnet. OOnselCtlr ~ ekr, sed lXKU'Ilj' ertrod ICtqX)t iMjurl UI Mbom et dom aliqU)'21Tl erat, st:d diam yo~rua. At YCrO cos d ct jusio doo dolort:S ct ta rebl.Dn SteI c'lila kasd no sea tlrBta sam:.1llS Cit lorem ~W\ dolor
hm:4
A Dreamweaverben a Select All (Mindet kijelli) parancs elszr csak az adott befogad elem tartalmt - pldul egy tblzatcella szvegt vagy egy <di v > cmke tartaImt - jelli ki. Ezltal gyorsabban msolhatjuk vagy mozgathatjuk a tartalmat egyik helyrl a msikra a dokumentumon bell. Hasznljuk jra a Select All parancsot a teljes befoglal elem kijellshez, majd harmadszorra is, ha a teljes oldaltartalmat szeretnnk kijellni! 10 Vlasszuk ki a File> Save menpontot a dokumentum elmentshez! Oldalunk most mr nem csak szerkezetileg stabil, hanem knnyen kvethet is.
A Code nzet megismerse

A Dreamweaverben ugyanolyan egyszeren dolgozhamnk Code nzetben, mint a Design nzetben, St, vannak esetek, amikor a kdnzerben vagy a Code and Design nzetben knnyebb megoldani egy feladatot, mintha csak a Design nzeter hasznlnnk. Az els leckben a Code and Design nzetet hasznltuk, hogy megcekinrsk az oldalunk kt vltozatt a v=intesen s fgglegesen osztOtr kpernyn. Ebben a gyakorlatban jobban megismerhetjk a kdokat s a Code Navigator (Kd navigtor) funkci hasznlatr. l 2 3 Nyissuk meg a layout-final.html dokumentumot a Dreamweaverben! A dokumentum tanalmazza a gyakorlat elvgzshez szksges kls stluslapoL Kattintsunk a Code menpontra a forrskd megtekintshez! Vlasszuk ki a View> Code View Optiom (Nzet> Kdnzeti lehetsgek) menpontot, s klnkln vlasszuk ki a Word Wrap, a Line Numbers s a Syntax Coloring nzetet, amennyiben nincsenek akmlisan kijellve!
144
7. LECKE Oldal szerkezetek ltrehozsa
Code VIew Options Rulers Grid Guides Tracing Image Plugins
v Word Wrap v Line Numbers

Hidden Characlers Hlghlighl Invalid Code Syntax COlorin9 Aulo Indent Syntax Error Alons in Info Bar
v v v
4 5
Egy kdrszlet kivlaszts hoz helyezzk az egrmutatt brhov a <di v id=" leftCol umn" > cmkn bell! Kattintsunk a <div#leftColumn> cmkre a cmkevlasztban! A teljes <di v> cmke ki lesz jellve, gy egyszeren msolhat, mozgathat vagy elrejthet. A sorok szmozsa melletti jelIsek jelzik, hogy a kd a 20-tl a 25. sorig van kijellve, s ezt a rszt az alkalmazs az eserleges mdostsokkor egysgknt kezeli.
20
22
23
it "
21
<h2~I . . (Aa>
~ .ItCOI. _;;>~-----------"""------'"
<p>ldthJ
24 2:5
dolDl" ., t . . t, COftMftlbr , Up.Qlng .11 tr, Hd dl_ ,...,., ell"llOd tupcr !'nvlcb'lt ul ,,~ .-ot. Hd dica VOlupb.D. Rt v.-o .,. .t ~ .t JUlto dl. dolor.a et eo~. Stet cll tet k( . u t LorM I l It ' dlv
I~
c.or.
float: len)<IIr
ae=rpx<br h
I>
A webfejlesztk gyakran el rej tenek egyes kdrszeket, amikor csak egy bizonyos oldalrszt vagy oldalelemet keresnek, s ki szeretnk zrni a nzetbl az aktulisan nem hasznlt kdrszleteket. Hasznljuk az eszkzsv bal oldali rszn tallhat collapse (elrejts) s expand (kibonts) ikont egyes kdrszletek elrejtshez s kibontshoz!
U . .';-- Collapse Full Tag (Teljes cmke elrejtse)

C!~- Collapse Section (Kdrszlet elrejtse)
V - - ExpandAl1 (sszes kibontsa)

6
Kattintsunk a bal oldali eszkzsvban tallhat Collapse Section (Rszlet elrejtse) ikonra a kijellt <d i v> rszlet elrejtshez! A 20-25. kdsorok egy jelzelembe tmrlnek.
20 26
~
7
7
Most kattintsunk ugyanott az Expand AlI (sszes kibontsa) ikonra, hogy jra lmassuk a sorokat! A kdnzetben kdot szerkeszthetnk vagy adhatunk hozz az oldal unkhoz. Keressk meg a kvetkez kdrszletet: float: left} <br l> !
8 Trljk ki benne a <br I> elemet, s rjuk be a helyre a kvetkezt: < I !
9 rjuk be: <I.

Megflgyelhetjk, hogy a Dreamweaver kdkiegszt funkcija befejezi helyettnk a cmkt a <I p> cmke kiegsztsvel. A ksz bekezds most a kvetkezket is tartalmazza: <p > {width: 365px<br l> float: leftj </p > 10 Vlasszuk ki az Edit > Undo menpontot, hogy visszatrjnk a <br I> cmkhez! Figyeljk kzben a kdot, mert lehetsges, hogy tbbszr kell hasznlnunk az Edit> Undo parancsot ahhoz, hogy visszatrjnk a kezdeti llapotba.
11 Helyezzk az egrmutatt brhov a <di v id=" header" > cmkn bell! A szerkesztablak bal oldaln tallhat eszkzsvban kattintsunk a hajkormnnyal brzolt Code Navigator ikonra! A felugr ablakban a kijellt cmkre s nzetre vonatkoz informcit kapunk a csatolt CSS
145
stluslaprl. A tbbletinformcit tartalmaz hivatkozsokkal rendelkez elemek alatt vilgoszszrke alhzst lthatunk.
<d it-' Id '"head.r ")
";1 maln_final.css
< dl l
<d~:
~
~ h~~
.'_~.P.8:
body
12 A Code Navigator ablak bezrshoz kattintsunk brhova az ablakon kvl! 13 Kattintsunk jra a Code Navigator ikonra! Helyezzk az egrmutatt egy hivatkozott elem fl, hogy megjelenjen a tbbletinformcit tartalmaz ler bubork!
':;J main_fi
background: IFFffFf;
body margln: o; !."!.~ n~dinn: o ~ ._.::~- text~lgn: center,
,h-
.,
Cmd+Opt+cllck to show
Iil Disab1e lJ Indleator
14 Kattintsunk a hivatkozsra, amely eljuttat bennnket a hivatkozott dokumentumhoz! Ez ebben az esetben a main-final.css stluslap. 15 Kattintsunk a szerkesztablak tetejn tallhat Source Code (Forrskd) ikonra, hogy visszatrjnk a forrskd nzetbe!
Source Code
mainJinal.css
A Code Navigator funkcik hasznlata

A kdnavigci szmos helyzetben hasznos lehet, az eddigi gyakorlatok sorn azonban mg nem tapasztalhattuk meg a szerept. Tartsuk fejben a k6dnavigcis funkcikat, amikor a ksbbiek ben rlapokrl, knyvrrelemekrl s ms Dreamweaver-lehetsgekrl tanulunk! Ha egy sablonon alapul oldalon hvjuk el a Code Navigatort, akkor szerepelni fog rajta az adott oldal alapjul szolgl .dwt kiterjeszts sablonfjl neve is. Ha a Code Navigator funkcit az oldal egyik knyvtrelemben hasznljuk, a Code Navigator listjban szerepelni fog az adott oldalelern alapjul szolgl .Ibi fjl is. Ha a Code Navigator funkcit egy szerveroldal i include-ban hasznljuk (SHTML, PHp, ColdFusion, ASP & ASP.NET includes), a Code Navigator listzza az include fjl clhivatkozst, s az inc/:ude fjl elejre visz. Ha a funkci t egy <sc r ipt > cmkn bell hasznljuk, a Code Navigator Iistzza a kls JavaScript fjlt, s a fjl elejre visz. Ha a funkcii: egy iframe-en bell hasznljuk, a Code Navigator Iistzza a forrsfjlt, amennyiben az nem tvoli szerveren tallhat, s a fjl elejre visz.
146
16 Kattintsunk kzvetlenl a kvetkez kd tm b vgre:

<div id="righ tCo lumn " > <h 2> Subheading </ h2 > <p>{ width: 365px; <br /> fl oat: right; l <br /> Lo rem ipsum d o lor sit amet, con s etetur s adips c ing elitr, sed d iam nonumy e irmo d t e mpo r invidunt ut labo re et d o l o re ma g na aliqu yam e rat, s e d diam v ol uptu a . At vero eo s e t a cc us am e t justo du o d olo re s e t ea rebum. Stet c lita ka s d gubergren, no se a takima ta sanc tu s e st Lo rem ip s um d o l or s it amet. </ p></ di v> 17 Vlasszuk ki az Insert> Comment (Beszrs> Megjegyzs) menpontot! Megjelenik egy HTML megjegyzstmb a megjegyzs beszrsi helyt jelz kurzorral a kzepn. 18 rjuk be ide a kvetkezt: end of rightColwnn dv. A beszrt megjegyzs a kvetkez formban jelenik meg: < ' - end o f rightColumn d iv-- >
A HTML megjegyzseket a bngsz nem jelenti meg, kdnzetben azonban lthatak, s hasznos informcikat, tancsokat tartalmaznak magunk s ms fejlesztk szmra, akik az oldalt esetleg hasznljk.
Az elbbiekben szmos mdszert alkalmaztunk a forrskddal val munka egyszerbb s hatkonyabb ttelre. Elrejtennk kdrszeket, mdostottuk az alkalmazott HTML-cmkket, kiprbltuk a Code Navigatort, s HTML megjegyzseket adtunk a forrskdhoz.
CSS stlusok exportlsa

Az elz gyakorlatban ltrehozott layout_start.html dokumentum oldalszerkezete mr nmagban is
megllja a helyc Mieltt azonban les ben is kiprblnnk az oldalt, rdemes a CSS-szablyokat a dokumentum <head> fejlcbl egy kls stluslapba thelyezni. A bels stluslapok kiterjedse egyetlen oldalra korltozdik, a kls stluslapokat viszont tetszleges szm oldalhoz trsthatjuk. A Dreamweaver kln paranccsal rendelkezik erre a clra, gy ezt a feladatot gyorsan s egyszeren vgrehajthatjuk. 1 Amennyiben szksges, nyissuk meg a layout_start.html fjlt gy, hogy dupln a nevre kattinrunk a Files panelen! 2 Jelljk ki a CSS Styles panelen a lista els szablyt (body); tartsuk lenyomva a Shift billentyt, s kattintsunk az utols szablyra #right Column az sszes szably kijellshez! 3 A CSS Styles panel jobb fels sarkban tallhat Options menben vlasszuk ki a Move CSS Rules (CSS-szablyok thelyezse) lehetsget! Ezt a menpontot elrhetjk gy is, hogy jobb kattintssal (Windows), illetve a Control+karrints (Macintosh) kombincival a kijellt terletre kattintunk.
css
"lu
Duplicat ... R"name Class ... Edit Seleetor Move CSS Rules ... Aoply Cut XX
Copy XC
Paste Delete
KV
IK>
Amikor megjelenik a Move To External Style Sheet (Athelyezs kls stluslapba) prbeszdablak, a Move Rules To (Szablyok thelyezse ide) terleten vlasszuk ki az A new style sheet lehetsget, majd kattintsunk az OK gombra!
147
Move Rules To
( -.:..(
Browu...
OK
Can cel
Help
O StYIO .h.." 8 A. new styte shtet...
( (
5 A Save Style Sheet File As (Stluslapllomny mentse) prbeszdablakban keressk ki a lesson07 mappt, s rjuk be a File Name mezbe a main.css fjlnevet!
lulu
body
Iwrappt'r
II'hud~r
(onlent .toortr
'n.tlv
'banner jfeftColumn
Kattintsunk a Save menpontra! A Dreamweaver thelyezi a kijellt szablyokat a dokumentum <h e a d > rszbl az jonnan ltrehozott stluslapba, s ezzel egyidben az j stluslapot az eredeti dokumentumhoz trstja. Utols feladatunk a feleslegess vlt < st y le > cmke eltvoltsa. A CSS Styles panelen kattintsunk a <s tyle> sorra, majd ssk le a Delete billentyt, vagy kattintsunk a kuka ikonra! Vlasszuk ki a File> Save All menpontot amentshez!
7 8
A kvetkez gyakorlatban a Dreamweaver vonalz s segdvonalak eszkzeit fogjuk hasznlni, hogy igaztsokat vgezznk el az oldalszerkezetnkben.
Vonalzk s segdvonalak hasznlata

Az oldal tervek ritkn maradnak vltozatlanok. A vltoztatsnak tbbfle oka lehet: az gyfl, egy art
director vagy akr a sajt kreatv elkpzelseink. A Dreamweaver szmos olyan eszkzt knl oldalszerkezetek ksztshez, amellyel ksbb knnyen s gyorsan elvgezhetjk a kvnt vltoztatsokat. Ebben a gyakorlatban a vonalz s a segdvonalak hasznlatval fogjuk a tartalmi oszlopokat a grafika egy rszlethez igaztani. l 2 3 Amennyiben szksges, nyissuk meg a layout_start.html fjlt gy, hogy dupln a nevre kattintunk a Files panelen! ssk le az F4 gyorsbillentyt a nyitott panelek bezrshoz s a szerkesztfellet maximalizlshoz! Kattintsunk dupln a Banner helyrzkpre! Amikor megnylik a Select Image Source prbeszdablak, keressk ki a Lessons > images mappt, s vlasszuk ki a bench.jpg kpet, majd kattintsunk a Choose gombra! A kp egy hossz padot s egy feltn, srga hordt brzol. A kt trgy kztti rs vonalt meghosszabbtva termszetes hats oldal trst rhetnk el a kt tartalmi oszlop elrendezshez.
148
A legtbb grafikai programhoz (pldul az Adobe Photoshophoz vagy a Fireworkshz) hasonlan a Drearnweaverben is meg keH jelentennk a vonalzkat ahhoz, hogy a segdvonalakat hasznlni tudjuk.
Vlasszuk ki a View> Rulers > Show (Vonalzk megjelentse) menpontot, majd a View> Rulers > Reset Origin (Alaprtelmezett orig visszalltsa) menpontot! Az orig elhelyezkedst a kt vonalz tallkozsi pontjnl tallhat ngyzet bal fels sarknak arrbb hzsval tudjuk megvltoztatni. Ha dupln a sarokra kattintunk, visszallthatjuk az alaprtelmezett origt. A segdvonalakat a vzszintes s a fggleges vonalz igny szerinti kihzsval alakthat juk ki. Kattintsunk a szerkesztablak bal szln tallhat fggleges vonalzra! Tartsuk lenyomva az egrmutatt, s hzzuk ki a vonalzt a segdvonalltrehozshoz! Egy zld szn segdvonal jelenik meg a szerkesztfelleten. Hzzuk ki egszen addig, amg egy vonalba kerl a pad jobb szlvel!
..
)
571.00,*
7
6
Egy ler bubork megjelenti a segdvonal s az orig pixelekben mrt tvolsgt a fggleges (y) tengelyen. Megvltoztathatjuk a segdvonal helyzett, ha az egrkurzort fl helyezzk, majd amikor az egrmutat ktirny nyll vltozik, az j helyre hzzuk a segdvonalat. A Cont tol (Windows), illetve a Command (Macintosh) billenty s az egrmutat egyttes lenyomsval hzzunk ki a vonalzrl mg egy fggleges segdvonalat! Figyeljk kzben a pixelben megadott tvolsgot a ler buborkban, s addig hzzuk a vonalat, amg a kt segdvonal egymstl 30 pixel tvolsgra kerl! Ez a 30 pixeles tvolsg fogja alkotni a szveg kt bekezdse kztti fehr svo t.
Megjegyzs: Ebben a gyakorlatban csak fggleges segdvonalakkal fogunk dolgozni; vzszintes segdvonalakat a szerkesztfe/let tetejn tallhat vzszintes vonalzrl tudunk az oldalra hzni.
149
A ler buborkokban a segdvonalak egymstl mrt tvolsga, illetve az oldal szltl mrt tvolsguk jelenik meg. A pontos mretek megjelentshez az oldalszerkezet jobb s bal szln is el kell helyezn nk egy-egy segdvonalat. 7 Hzzunk ki egy fggleges segdvonalat az oldalszerkezet jobb szlig! Figyeljk meg, ahogy a segdvonal magtl a helyre ugrik! Hzzunk ki mg egy, utols segdvonalat az oldalszerkezet bal szlre! Most, hogy az sszes segdvonal a helyre kerlt, kszen llunk a szksges paramterek sz". szegyuJ tesere.
; ;
Helyezzk az egrmutatt a bal szls s az utna kvetkez segdvonal kz, majd ssk le a Control (Windows), illetve a Command (Macintosh) billentyt! Figyeljk meg a megjelentett tvolsgot, amely 489 pixel kell, hogy legyen!
Megjegyzs: A segdvonalak eltvoltshoz hzzuk le 6ket a szerkeszt6fe/letr61 brmelyik irnyba!
Helyezzk az egrmutatr a jobb szls s a tle balra es (a pad jobb szln tallhat) segdvonal kz! A megjelentett tvolsg itt 241 pixel kell, hogy legyen. Ezek alapjn mdostsuk a megfelel CSS-tulajdonsgokat!
ruSTYUS
body
""'~PPfr
..'hudtr
"content
'(ooter ",,",o
,,,",v
7
Iffl
Add PrpRCrty
10 Vlasszuk ki a Window> CSS Styles menpontot a CSS Styles panel megjelentshez! Amennyiben szksges, bontsuk ki a rnain.css dokumentumot, hogy lthatak legyenek az egyes stlusok! All nzetben jelljk ki a #rightColumn szablyt, majd a CSS Styles panel Properties svjban kattintsunk dupln a jelenlegi 365 px szlessgi rtkre, s rjunk be helyette 241-et! ssk le az Enter (Windows), illetve a Rerum (Macintosh) billentyt! II Jelljk ki a #leftColumn szablyt, majd a CSS Styles panel Properties svjban kattintsunk dupln a jelenlegi 365 px szlessgi rtkre, s rjunk be helyette 489-et! ssk le az Enter (Windows), illetve a Return (Macintosh) billentyt! A kt oszlop szlessgi rtkeinek mdostsa a 30 pixeles tvolsg megrzsvel trtnik, mikzben azok az oldal egy vizulis elemhez igazodnak. 12 Vlasszuk ki a View> Guides > Clear Guides (Segdvonalak trlse) menpontot, majd a File> Save Ali menpontot a dokumentum mentshez! Az F4 billenty letsvel vltsunk t teljeskpemys nzetre!
150
Main Reading
SubbeadIng
Lorcm Ipsum dOIOr sit amel, COOStk.lUT 5adlpscl.o.g elin.sed di.am nooumy
eirmod tempor invictunt ut labarc: et dOIOre magna aIlquyam ertt, sed dia.m \'oluprua. AI vero eos et aocusam et justo doo dolores et ea rebum. Stet cUla t.asd gubergren . no sea taklmata saoctu.s est Lorem ipsum dolor $11 amel.
Subbeadlng
Lorem tpsum dolot sit amel,
c:onsetcrur SldJpscinl elitr, sed diam
oonumyei.nood leD'rPOf invidunt ut labore ct dolore magna.1.Iiquyam Kd diam At \'trO eos
Egszen az alapoktl kiindulva ltrehoztunk egy oldalszerkezetet, egy sor oldalszerkezeti cmkt adtunk az oldalhoz, s helyrz kpekkel s grafikkkal rzkeltettk a vgleges oldal megjelenst. A grafikus banner elemei hez igaztva, segdvonalakkal hatroztuk meg a tartalmi oszlopok mrett. Ebbl az oldalszerkezetbl kiindulva j oldalakat s tartalmakat hozhatunk ltre. Mieltt azonban kiindulsi oldalknt hasznlnnk, rdemes ellenrizni s kijavtani benne az esetlegesen elfordul hibkat. A kvetkez gyakorlat sorn ezt fogjuk megtenni.
Az oldalszerkezet
ellenrzse
Az j oldalszerkezetnket mg nem vizsgltuk meg bngszkompatibilits vagy kdrvnyessg

szempontjbl. Mieltt egy j szjt kiindulsi alapjaknt hasznlnnk az oldalt, rdemes leellenriz nnk munknk rvnyessgt. l 2 Amennyiben szksges, nyissuk meg a layout_start.html dokumentumot a Dreamweaverben! Vlasszuk ki a File> Check Page> Browser Compatibility (Bngszkompatibilits ellenrzse) menpontot! A megnyl Report Oelents) doboz j esetben nem tartalmaz egyetlen trgyat sem.
7
Campare wi th Remote
lInks
3 4
A jelents bezrs hoz hzzuk le a jelentsi ablak jobb fels sarkban tallhat menlistt, majd vlasszuk ki a Close Tab Group lehetsget! Vlasszuk ki a File> Validate > Markup (Forrskd ellenrzse) menpontot! A megnyl Report dobozban kt hibajelzst lthatunk. Mindkett a <di v > cmkk helyrz szvegeinek idzjeles rszeihez kapcsoldik, pldul a Content for id 'Jooter" Goes Here szveghez. Mivel a helyrz szvegeket gyis eltvoltjuk az oldal fejlesztse sorn, ezeket a hibajelzseket nyugodtan figyelmen kvl hagyhatjuk.
",J
c07 :1 .I"out.It... n.htmf

t07;loIYQut.lu.n.lmnl
Quoutfon mull; found bttwNn Qg. , HT,..l docloImtnu should

19 Ouotatlon Ntk fo","d bcrwun u.g~ , HTML documenh ,haul d '"
Q) &
","ur
151
Zrjuk be a jelentsablakot!
bngszvel
Az oldalszerkezet, amit ltrehoztunk, tbbfle
is kpes egyttmkdni, s lernyelvi hibkat sem tartalmaz. A semmibl kiindulva ptettnk fel egy <di v> elemeket s CSS megjelentsi szablyokat alkalmaz oldalszerkezetet, amely kszen ll a mkdsre. CSS-szablyokat msoltunk s mdostottunk, megismertk a kdnavigcis eszkzket, ellenriz tk az oldalunk bngszkompatibilitst s forrskdjnak helyessgt. Ha ms clokra szeretnnk hasznlni a kialaktott oldalszerkezetet, a tanultak szerint mdosthatjuk az oldalakat - ahogyan azt a Dreamweaver CSS oldalszerkezeteket hasznl Here and Back Tra vel weboldal esetben tettk.
Tipp: Ameddig az oldalszerkezetnk egyik oldala sem rendelkezik vals tartalommal, a hozzfrhet sg ellenrzse szksgtelen.
152
sszefoglals
sszefoglal krdsek
l
...
Melyik CSS szelektort hasznljuk, ha O mret kls s bels margkat szeretnnk alkalmazni? Ha kzpre szeretnnk rendezni az oldalszerkezetet, milyen tulajdonsgot s rtket kell megadnunk a CSS-szablyban ahhoz, hogy az oldal a rgebbi bngszkkel is kompatibilis legyen? Nevezzk meg kt elnyt abefoglal <di v> cmkk hasznlatnak a CSS-alap oldalszerkezetekben! rjuk le az oldalszerkezeti stlussal meghatrozott <di v> cmkk beillesztsnek folyamatt! Hogyan helyezhetnk t CSS stlusokat a dokumentum fejlcbl egy kls stluslapba? Mi az els lps ahhoz, hogy egy segdvonalat a kpernyn megjelentsnk? Mi az utols lps, amit el kell vgezn nk egy j oldalszerkezet gyakorlati felhasznlsa eltt?
2 3 4 5 6
sszefoglal vlaszok
l A <b o dy > cmkt hasznljuk szelektorknt. Amellett, hogy a margin s a paddng tulajdonsgot O-ra lltjuk, a text-algn: center tulajdonsgot is be kell lltanunk az oldalszerkezet kzpre rendezshez.
2 A #wrapper <di v > cmke lehetv teszi, hogy egy helyen adjuk meg a teljes oldalszerkezet szlessgt, s hogy egyszeren igazthassuk jobbra, balra vagy kzpre az oldalszerkezetet. 3
Elszr hozzuk ltre a CSS oldalszerkezeti szablyt, jellemzen egy azonost tpus szelektorral,
7
4
amilyen pldul a #h eade r cmke! A szablyban megadharjuk az sszes szksges belltst, pldul a kls s bels margkat vagy a magassgot. Miutn lrrehozcuk a szablyt, kattintsunk az Insert Dv Tag ikonra az Insert panel Layout kategrijban! Az Insert Dv Tag prbeszdablakban adjuk meg a <di v > cmke beszrsi helyt (pldul egy bizonyos msik <di v > cmke kezdete utn), majd vlasszuk ki az elbb meghatrozott azonost selektort! Hasznljuk a CSS Styles panel Options menjben tallhat Move CSS Styles parancsot, amellyel a dokumentum fejjcbl r tudunk helyezni CSS-szablyokat egy meglv vagy j, kls stluslapba! A segdvonalak hasznlathoz az els lps a vonalzk megjelentse, amit a Vew > Rulers > Show menpont kivlasztsval rehetnk meg.
5 6
Az oldal r rdemes
bngszkompatibilits
s a forrskd helyessge szempontjbl ellenrizni.
II
Urlapok ltrehozsa
Contact Here and Back Travel

How can we help?
, -..;'1:
.:..
Your
Contact Information
Your Name Your email
r_
__
__
Online Tools------ ----------------,

For online access to your itlnerary and travel plans, please set up a username and password. Your usemame must contain at least 6 characters. Your password must cantain at least B characters, at least twa of them numbers. username,..l_ __ _ _ _ Password [ Repeat Password
..,l I
Co/,ta,ct us phone, or stop by our main office ln New York City.
Yourtrip-----------------------------------,
Travel Plans
re ly describe where you would like to go and for how long
How ma ny will be traveling in your group?
o One
Ebben a leckben
rlapokat fogunk
ltrehozni a weboldalunkon.
154
8. LECKE rlapok ltrehozsa
A lecke ttekintse
A kvetkezket fogjuk megtanulni:
rlap beszrsa
Szveges mezk hozzadsa Spry rlapelemek hasznlata Ylasztgombok beszrsa Listk hozzadsa rlapgombok ltrehozsa
Mezrszletek
Jellngyzetek beillesztse
s jelmagyarzatok beptse
Az rlap formzsa CSS sclusJapokkal
Ennek a lecknek az elvgzse krlbell 90 perce t vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessom mappt merevlemez-nkre, szksg esetn csomagoljuk ki, s keressk meg a Lesson08 mappt!
A Dreamweaver biztos megoldst nyjt rlapok ltrehozsra, amelyek lehetv teszik a kommunikdt a szjtunk Jtogatival. .

Ahhoz, hogy pontosabb elkpzelsnk legyen a dokumemumrl, amit a lecke sorn ltre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben! l 2 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, ssk le az F8 billentyt a Files panel megnyitshoz, majd vlasszuk ki a szjdistrl a DW CIS mappt!
Contact Here and Back Travel
-of
How can we help?

Your Contact Information - - - - - - - - - ,
Vou,. Name
I
~ ~ _ .. ___ ]
Youremall \
Online Tools
For online access to your Itlnerary and travel plans, pleClse set up a usemame and password . Your usemame must contaln at least 6 cnaraders. Your Pilssword must contB/n at lea5t 8 charaeters, at least two of Chem numbers.
Usemame '
password ;--- - - , Repeat Pa~sWOrd - - - ---,

You r tri p
Travel Plans r ti Y dClllD,dbCt WbClre you vou.ld Hka to 90 Dd (or hov 10ni
How many will be travellng ln your group?
o One
155
3 4
Bontsuk ki a Files panelen a IessonOB map pt! Vlasszuk ki benne a contact-finished.html fjlt, majd ssk le az F12 (Windows), illetve az Option+F12 (Macintosh) gyorsbillentyt, hogy megjelentsk az oldalt az elsdleges bngsznkben! Az oldalon szmos rlapelem tallhat. Prblj uk ki ket, hogy megfigyelhessk a viselkedsket!
Megjegyzs: Ha a Microsoft Internet Explorer az elsdleges bngsznk, s egy zenet jelenik meg a bngszablak tetejn, ami jelzi, hogya bngsz megakadlyozza a JavaScript futst, kattintsunk az zenet svjra, s vlasszuk ki az Allow Blocked Content (Blokkolt tartalom engedlyezse) lehetsget!
5 6
Kattintsunk a Your Name (Nv) mezbe, s rjunk be egy nevet! ssk le a tabultort! A nv megjelenik az adatmezben . Kattintsunk a Your email (e-maii cm) mezbe, majd ssk le a tabultort anlkl, hogy megadnnk egy e-maii cme t! A Spry rlapelem ellenrzi a mez tartalmt, s hibazenetet r ki, ha a mezt resen hagyjuk.
Your Contact Informatlon - - -- - - - -Your Name ~
Your email
G
,.- e
f' value ls requlred.!
Ezrt adjuk meg a Your email mezben a jdoe@mycompany e-maii cmet, szndkosan kihagyva a .com vgzdst! ssk le a tabultort! A Spry rlapelem jabb hibazenetet jelent meg, hogy felhvja a figyelmet a cm helytelen formtum ra.
Your Contact Information Your Name I Your email
,=--. __ ..
- -- - - - -- - j
__
.4.1
-...., ~nvalld format.1
Kattintsunk a Your email mezbe, s rjuk be a .com vgzdst a jdoe@mycompany cm utn! ssk le a tabultort! Most, hogy a megadott adatok megfelelnek egy szablyos e-maii cm formtumnak, a hibazenetek eltnnek. Kattintsunk a Username (Felhasznlnv) mezbe, s adjunk meg egy hat karakternl rvidebb nevet! ssk le a tabuJtort! Hibazenet jelenik meg, amely jelzi, hogy a nv kevesebb karaktert tartalmaz a mezhz meghatrozott minimlis karakterszmnl.
-Online Tools---
- - --
- - - - --
-j '
For online access to your itlnerary and travel plans, please set up a usemame and password . Your usemame must contain at least 6 charaders. Your password must contain at least 8 charaders, at least two of them numbers.
gus~e~rn~a~m~eJii::::;;=::::::lIMinl mum number of characters not met

Password Repeat Password
I ___
10 Kattintsunk a Username mezbe, s adjunk meg egy hat vagy tbb karakterbl ll nevet! ssk le a tabultort! II A Password Uelsz) mezben adjunk meg egy nyolc, csak betkarakterbl ll jelszt! ssk le a tabultort! jabb hibazenet jelenik meg.
156
,online Tools
For online access to your itlnerary and travei pians, please set up a usemame and password. Your username must contain at least 6 chBracters. Your password must contain at least 8 characters, at least two of them numbers.
~pa~s~sw~O~rd~;;~;.;=t'~-::==,l [The password doesn't meet the

spedfied strength. Repeat Password I
Username I
12 Kattintsunk a Password mezbe, s adjunk meg egy nyolc vagy tbb karakterbl ll jeJszt! A jelsznak legalbb kt szmjegykaraktert kell tartalmaznia. ssk le a tabultort! 13 A Repeat Password Uelsz megismtlse) mezbe rjunk be egy, az elbb megadottl eltr jelszt! ssk le a tabultort! A Spry rvnyessgellenrz szleli, hogy a kt jelsz nem egyezik, ezrt hibazenetet jelent meg.
Online Tools--- - - - - -- - - - - - - - - ,
For online access to your itlnerary and travel plans, please set up a usemame and password. Your username must contain at least 6 characters. Your password must contJJin at least 8 characters, at leas! twa of them numbers. Username Password
, ! . I- . . ..
~~~-~......,
Repeat Password
='c::=-....;,.._ _....
!The values don't mateh .!
14 Trjnk vissza a Repeat Password mezhz, s rjuk be ugyanazt a jelszt, amit a Password mez ben megadtunk! ssk le a tabultort! 15 Kattintsunk a Travel Plans (Utazsi tervek) mezbe, s rjunk bele valami utazssal kapcsolatosat! ssk le a tabultort! 16 A vlasztgombok segtsgvel adjuk meg az utasok szmt! 17 A Services (Szolgltatsok) lehetsgek kzl vlasszuk ki az ignyelt szolgltatsokat! 18 A When do you plan to tra vel (Mikor tervez utazni) rszen vlasszuk ki az induls tervezett id pontjt a legrdl menbl!
19 Kattintsunk a Submit gombra az rlap elkldshez! Az adatok elkldse utn egy ksznetnyilvnt oldal jelenik meg.
Megjegyzs: A megadott ada/ok nem lesznek elmen/ve.
20 Ha vgeztnk, zrj uk be a bngszt, s trjnk vissza a Dreamweaverhez!

Mieltt elkezdennk ltrehozni a sajt, klnbz elemekbl ll rlapunkat, sznjunk egy kis idt
az rlapok
mkdsnek
megrtsre!
Ismerkeds az rlapokkal
Az rlapok - akr nyomtatott formban, akr az interneten jelennek meg - adatok begyjtsre szolglnak. Mindkt esetben minden informci a maga helyre kerl, gy megknnytve az adatok rtelmezst. Az rlapok mindig vilgosan krlhatroltak: a nyomtatott rlapokat ltalban kln oldalra helyezik, vagy egy szegly vlasztja el ket az oldal tbbi rsztl; a web esetben a <form> (rlap) cmke ha-
157
trolja el az rlapokat. Az online rlapokba jellemzen a felhasznl viszi be az adatokat, ezzel cskkentve a foglalkoztatsi klrsgeket s a papralap rlapok esetben magasabb hibaszzalkot. A webalap rlapok egy sor rlapelembl llnak, amelyek mindegyike ms-ms clt szolgl:
Text Fields
- Korltozott karakterszm, betkbl vagy szmokbl ll tartalom bevitelt teszik lehetv. A j elszmezkn t ltrehozott szvegmezk elrejtik abegpelt szveget.
(Szvegmezk)
Text Ateaa (Szvegterletek) - A szvegmezkhz hasonlak. de nagyobb mennyisg szveg,

pldul tbb mondat vagy bekezds bevitelt is lehetv teszik.
Radio Buttons (Vlasztgombok) - Egymst kizr lehetsgek egy csoport jbl egyetlen elem kivlasztst teszik lehetv. Az egyik lehetsg kivlasztsa a korbbi vlasztst rvnytelenti.
Qellngyzetek) - Eldntend krdsekre val vlaszadsra hasznlhatk. Csoport-
Checkboxes
ba rendezve - a vlasztgombokkal ellenttben - tbb, egymst ki nem zr opci vlasztst teszik lehetv .
Lim
menk) - Legrdl listn jelentik meg a vlasztsi lehetsgeket, amelyek kzl egyet vagy akr tbbet is bejellhetnk.
mezk) - Olyan adatokat tovbbtanak az rlapot feldolgoz programhoz, ame-
(Legrdl
Hidden (Rejtett
lyek a ltogatk szmra nem lthatak. A rejtett mezk hasznlata rendkvl elterjedt a dinamikus webalkalmazsok tern.
Buttons (Gombok) - Elkldhetjk az rlapot, vagy ms egycl, interaktv mveletet (pldul az

rlap kirtst) vgezhetnk el velk.
A paprra nyomtatott rlapokat postn vagy szemlyesen adhatjuk t feldolgozsra. A webes rlapo kat elektronikusan kldik el s dolgozzk fel. A < f o rm > egy action tulajdonsgot tartalmaz, amely tulajdonsg rtke indtja be a feldolgozsi folyamatot. Az action tulajdonsg gyakran egy msik oldal webcme vagy egy szerveroldali szkript, amely a tulajdonkppeni adatfeldolgozst elvgzi.
Megjegyzs: Az rlapokbl nyert adatok feldolgozsa tlmutat a jelen knyv keretein. Ebben a leckben azt tanuljuk meg, hogyan hozhatunk ltre feldolgozsra ksz rlapot. Ha tbbet szeretnnk megtudni az rlapok adatainak trolsra hasznlt dinamikus alkalmazsokrl, keressk meg a Building applications visually cm fejezetet a Dreamweaver Sgban!
Urlap ltrehozsa az oldalon

l 2 Bontsuk ki a lesson08 mappt a Files panelen, majd kattintsunk dupln a contact-start. html fjl nevre a dokumentum megnyitshoz! Vlasszuk ki a File> Save As menpontot! A fjlnv mezbe rjuk be a contact.html nevet, majd kattintsunk a Save gombra! gy, ha ksbb meg szeretnnk nyitni az eredeti contact-start. html fjlt, megtalljuk szmtgpnk merevlemezn. Minden rlapelemnek a <f o rm> cmkn bell kell elhelyezkednie, ezrt rdemes rgtn az elejn ltrehozni a cmkt. Ha gy prblunk meg beszrni az oldalba egy rlapot, hogy az nem tartalmazza a <form> cmkt, a Dreamweaver figyelmeztet a < f o rm> cmke hozzadsra. A main Content div tartalmi rszben helyezzk a szvegkurzort a cmsor vgn tallhat krdjel utn, ezzel meghatrozva a < f o r m> cmke beszrs i helyt!
How can we help you?
"
158
Vltsunk t az Insert panel Forrns flre, majd a fln bell kattintsunk a Form ikonta (Cll )! A Dreamweaver beszrja a <f o rm> cmkt az oldalba, s a helyt piros, szaggatott krvonallal jelli. A kvetkez lpsben belltj uk a <form> cmke action tulajdonsgt.
Megjegyzs: Ha nem jelenik meg az rlap kNonala a szerkesztfefleten, vlasszuk ki az Invisible Elements (Lthatatlan elemek) menpontot a szerkesztfeflet eszkztrnak Visual Aids (Vizulis segdeszkzk) mengombja alatt!
Ha szksges, vlasszuk ki a Window> Properties menpontot a Properties panel megjelentshez! Kattintsunk az ablakban az Action Link mez melletti mappa ikonra! A Select File (Fjl kivlasztsa) prbeszdablakban keressk ki a lesson08 mappt, s vlasszuk ki benne a flrm-fJrocessing. html dokumentumot, majd kattintsunk az OK gombra! Az Action mezben az rlapadatok feldolgozsnak cloldalt hatrozhatjuk meg. Az adatfeldolgozs jelentheti az adatok adattrhoz kapcsolst, dinamikus tartalom ltrehozst, vlaszok generlst vagy ms mveletek vgrehajtst is. Ebben a gyakorlatban az rlap action tulajdonsga csupn a ksznernyilvnt oldal betltst vgzi el, amikor a kitlttt rlapot elkldik.
I ' ' :l
.,
Form to cform1
Enctype
Vlasszuk ki a File> Save menpontot amentshez!
Ltrehozruk az oldalon az rlapelemet. A kvetkez lpsben rlapmezket, ezen bell szvegmez ket fogunk az rlaphoz adni.
Megjegyzs: A tbbi tulajdonsgot egyelre hagyjuk alaprtelmezett belltson! A Method (Klds mdja) s Enctype (Kdols) tulajdonsg az rlap adatainak feldolgozst vgz szeNeroldali alkalmazs tpustl fggen vltozik. Amint azt mr korbban emltettk, a szeNeroldali kd action tulajdonsgknt kapcsoldik az oldalhoz.
Szveges tblzatelemek beszrsa
A szvegmezk vgzik a legtbb feladatot az rlapelemek kzl. Egy <input > nev cmkt alkalmaznak, s a crnkevlasztban <inpu t> cmkeknt jelennek meg. A szvegmezk a rvid szvegekben hordozott rendszertelen adatok sszegyjtsre alkalmazott legalapvetbb eszkzk, gy nehz nlklk brmilyen rlapot is elkpzelni. St, sok rlap kizrlag szvegbevite mezkbl tevdik ssze. A kvetkez gyakorlatok sorn egyszer szvegmezket, Spry szvegmezket, jelsz mez ket s szvegterleteket fogunk az oldalba szrni. Mieltt azonban belekezdhetnnk, ellenrizzk, hogy a Dreamweaver bellts szerint a legknnyebben hozzfrhet formrumban szrja be az rlapelemeket!
Hozzfrhet rlapok
tulajdonsgainak belltsa
A hozzfrhetsget meghatroz technolgik klnleges kvetelmnyeket tmasztanak az rlapele mekkel szemben. A kpernyolvas6khoz hasonl segdtechnol6giknak precz kdolsra van szksgk ahhoz, hogy az rlapokat s az egyes rlapelemeket megfelelen be rudjk olvasni. A Dreamweaver rendelkezik egy olyan lehetsggel, amely ezeket a kdokat a megfelel formban kszti el. Elkpzelhet, hogy ezeket a tulajdonsgokat mr korbban belltottuk; amennyiben gy van, csak azt kell megerstennk, hogy a kivlasztott belltsok hozzfrhet rlapokra vonatkoznak.
159
l 2 3
Vlasszuk ki az Edit> Preferences (Windows), illetve a Dreamweaver > Preferences (Macintosh) menpontot! Amikor megnylt a Preferences prbeszdablak, vlasszuk ki az Accessibility (Hozzfrhetsg) elemet a Category listrl!
Ellenrizzk, hogy az Accessibility kategriban ki legyen vlasztva a Form objects (rfapeLemek)
jellngyzet,
majd kattintsunk az OK gombra!
A kvetkez gyakorlatok sorn ltni fogjuk, hogy amennyiben az rlapelemnl be van kapcsolva a hozzfrhetsg opci, az elem beszrsa eltt mindig megjelenik egy prbeszdablak. Ez a prbeszdablak szmos belltsi lehetsget tartalmaz az rlapelemek cmkinek beszrsra s ms specilis tulajdonsgok megadsra. Ezekrl a tulajdonsgokrl tbbet megtudhatunk a ksbbiek sorn.
Szveg mezk hasznlata

A szvegmezkben korltozott szm alfanumerikus (bet- s szm-) karaktert lehet megadni. A szvegmezk befogadkpessgi hatra 255 karakter, a legtbb szvegmezt azonban ennl sokkal rvidebb szveglncok, pldul nevek vagy cmek bevitelre hasznljk.
l
Amennyiben szksges, nyissuk meg jra a contact.html fjt, dupln kattintva r a FiLes panelen! Kattintsunk a piros krvonalon belli terletre!
2 3 4
Az Imert panel Forms fln kattintsunk a Text Field (Szvegmez) ikonra (!LJ)! Az Input Tag Accessibility Attributes (Input cmke hozzfrhetsgi tulajdonsgai) prbeszdablak ID (azonost) mezjben adjuk meg a name azonostt, majd ssk le a tabultort! A Label (Lers) mezbe rjuk be a Name nevet, majd ssk le megint a tabultort! Az id= n name" kisbetkkel rott, mivel kdnyelvben van meghatrozva. A Name lers nagybetvel kezddik, mivel az rla
pOt kitlt szemly a szvegbeviteli mez mellett fogja ltni ezt a lerst. A Style (Stlus) terlet vlasztgombjval vlasszuk ki az Attach label tag using Jar' attribute (Label cmke kapcsolsa a Jar' tulajdomg hasznlatval) lehetsget! Ellenrizzk, hogy a Position: Before form item (Elhelyezkeds: rlapelem eltt) lehetsg legyen kivlasztva, majd kattintsunk az OK gombra!
ID:
~bol :
[name
I\:;Ko:::;; " m~
I
_ _ _ _ _ _....J
ol
C..ncel
H...
St>tM:
W'lpwlrh label l..g

Anach lilbel !ilg using 'for' ~uributc
( (
) ) )
o
PO$ltlon:
Nolabelulg
letOIe form !ttm

Atter form Item
o
At(ess key.
Tib Indu:
.f you doni: want 10 enter this Information when InHl'1lng objtcu. ( halHR IM AcqulbUJIY prefereocu.
160
Ha az Attach label tag using for' attribute lehetsget vlasztjuk, a Dreamweaver a kvetkez kdot szrja be: <label f o r="name" >Name </ label >< input t ype= "t e xt" i d="name" />
Ez a kdeJrendezs lehetv teszi, hogy a <label > cmke egyrtelmen az <inp ut > cmke r lapelemhez kapcsoldjon.
Megjegyzs: A szvegmezk feliratai jellemzen a szvegmez el kerlnek. Ahogy azt a lecke ksbbi rszben ltni fogjuk, a vlasztgombok s je//ngyzetek feliratai viszont ltalban a szvegmezk utn llnak. Ezek a konvencik knnyebben hasznlhatv s elrhetv teszik az rlapokat.
How can we help you?

me --
----------l
Vlasszuk ki a File> Save menpontot!
Az els rlapelemnk a helyre kerlt. A tbbi szabvnyos szvegmez beszrsa hasonlan trtnik.
A kvetkez gyakorlatban a szvegmez egy klnleges vlwzatt, a Dreamweaver Spry szvegmezt fogjuk az oldalhoz adni.
Spry
szvegmezk
beszrsa
A 6. fejezetben megismerhettk a Dreamweaver Spry Ajax keretrendszert, s szmos Spry eszkzzel dolgozmnk, pldul Spry adat- sa harmonikapanelekkel. A Dreamweaver szmos, rlapok lrrehozshoz hasznlhat Spry eszkzt is tartalmaz. Minden Spry rlapeszkz fejlett JavaScripttel egszti ki az alapvet rlapelemeket, gy knnyen hasznlhat, beptett adatellenrzst tartalmaz rlapele meket nyjt.
Megjegyzs: Minden Spry eszkz egy JavaScript s/vagy egy CSS fj/ra hivatkozik. Ezekben a gyakor/atokban mindkt fjlt letltttk a szmtgpnk merevlemezre a Tanfolyam a knyvben weboldal leckefjljai kzl. Ha azonban nllan hozunk ltre rlapot, a Dreamweaver emlkeztet r, hogy ezek a JavaScript s CSS fjlok hozzaddnak az oldalunkhoz. A szjt befejezsekor ne felejtsk el feltlteni a SpryAssets s a Scripts mappl, klnben az eszkzk nem fognak megjelenni, vagy nem mkd nek majd megfelelen!
Az adatellenrzs az a folyamat, amelyben egy program
ellenrzi az rlapelemben megadott adawk
formai rvnyessgt. Ez a folyamat szablyozza az rlapba bevitt adatok egysgessgt s minsgt. Ha pldul egy ltogat hinyos vagy formailag nem megfelel e-mail cmet adna meg egy erre szolgl mezben, az rlapadat rtkelhetetlen lenne. Az adatellenrzs garantlja, hogy minden szksges mez ki legyen tltve, mieltt az rlap elkldhet feldolgozsra. A Spry rlapelem-vltozatok szmos rlapelemfajtra alkalmazhatk. Ezek a kvetkezk: szvegmezk, szvegterletek, jellngyze tek, jelszmezk, jelszeJlenrz terletek, vlasztgombok s vlasztlistk. Mindegyik rlapelem ugyanazon az elven mkdik: beszrjuk az rlapelemet, majd a Properties panel segtsgvel megadjuk a tulajdonsgait. Ebben a gyakorlatban egy Spry Validation Text Field (Spry adatellenrz szvegmez) nev objekmmot fogunk beszrni - bebiztostva, hogy a ltogatk csak helyesen formzott email cmet adhassa nak meg. l 2 3 Amennyiben szksges, nyissuk meg jra a contact. html fjlt dupln a nevre kattintva a Files panelen! Kattintsunk a mr kitlttt Name mez utn, majd ssk le a Shift+Enter (Windows), illetve a Shift+Remrn (Macintosh) billentykombincit egy sortrs ltrehozshoz! Vlasszuk ki a Spry Validation Text Feld ikont ([3) az Insert panel Forms kategrijban!
ADOB E DREAMWEAVER CS4 Tanfolyam a knyvben
161
Az Input Tag Accessibility Attributes prbeszdablak ID mezjbe rjuk be az email azonostt, majd
ssk le a tabultort! A Label mezbe rjuk be az Email feliratot, majd ssk le a tabultort! A Style terleten ellenrizzk, hogy az Attach labe! tag using ]or' attribute lehetsg legyen kivlasztva! A Position terleten a Beforeform item lehetsget vlasszuk ki! Kattintsunk az OK gombra!
(
( (
.0: ltmall
Llbel: ~ ElNiI
Stylt:
CIK
I
labell"ljI uslng 'fot" lurlbute
ColM,1
)
)
W~pwllh label t.g

An .. ch
Ho'.
o
Posi1lon:
No IJbe' '"0
El
BefOle 'Ofm Iltm
o
,,"us key:
Atter form Ittm

Tab Indu:
II
If you don\ Wlnt: 10 enter this Information whtn I"strtirtg objtccs. cN. tM Acnulb!!ity pr!:ff(tl'ltts
Vlasszuk ki a File> Save menpontot! Ha a Dreamweaver figyelmeztet a kls JavaScript fjlok hasznlatra, kattintsunk az OK gombra! Most, hogy a hozzadott Spry-funkcionalitssal rendelkez rlapelemnk az oldalra kerlt, elkezdhetjk annak testreszabst. Ha nem lthat a Spry TextField fl, helyezzk az egrmutatt az e-maii mez fl, s vrjunk a fl megjelensig! Kattintsunk a flre az objektum kivlasztshoz!
SPIY TtxlReki [."""utfioldl
Amennyiben szksges, vlasszuk ki a Window> Properties menpomot a Properties panel megjelentshez! A Type (Adattpus) legrdl menben vlasszuk ki az Email Address (e-mai! cm) elemet! A Properties panel sok informcit s j nhny belltsi lehetsget tartalmaz a tulajdonsgokra vonatkozan. Lthatjuk, hogy szmos adatellenrzsi tulajdonsgbl vlaszthatunk az egsz szmtl (Integer) kezdve az egyedi (Custom) belltsig. Az Email Address tpus adatok ellenr zsi funkcija biztostja, hogy a bevitt cm egy @ karaktert s egy azt kvet domain nevet tartalmazzon . Most lltsuk be az adatellenrzst kivlt esemnyt! Vlasszuk ki a Validate on B!ur (Ellenrzs a mez elhagysakor) lehetsget a Properties panel vonatkoz jellngyzetnek segtsgvel! Ellenrizzk, hogy ki legyen vlasztva a Required (Ktelez) jellngyzet! Ha egy mez ktelez jells, a felhasznl nem kldheti el az rlapot anlkl, hogy kitlten azt.
Alaprtelmezsben minden adatellenrzs akkor fut le, amikor az rlapot feldolgozsra elkldi a ltogat. Legtbb esetben tovbbi kivlt esemnyeket is megadhatunk, amelyek mr elbb is rvnyeslnek. A jelen pldban a mez tartalma mr akkor ellenrzdik, amikor a ltogat a tabultor letsvel vagy msik mezbe kattintssal elhagyja a szvegmezt. Ez kzvetlenebb reakci t s ezltal felhasznlbartabb rlapot eredmnyez. Ha a ltogat tugorja a mezt, az rlap
162
elkldsekor a Required lehetsg hatsra megjelenik egy hibazenet. Br ebben a gyakorlatban elfogadjuk az alaprtelmezett hibazeneteket, azok testreszabsa egyszeren kivitelezhet a Properties panel Pre view states (Elnzeti llapot) menjnek hasznlatval. Vlasszuk ki brmelyik e1n zeci llapotot, s a szerkesztablakban adjunk meg egy sajt hibazenetet! Ahhoz, hogy az oldalszerkezet tervezsekor elrejtsk a hibazeneteket, vlasszuk ki a Preview states legrdl men Initial (Kezdeti nzet) lehetsgt!
Fieldset cmke ltrehozsa

"
Az els kt szvegmezt szegllyel krlhatrolt szvegdobozz alakthatjuk, ha egy nevet vagy kifejezst (lers, azaz legend) kapcsolunk hozzjuk a <fieldset> cmke segtsgve!. l Kattintsunk az Email mez jobb rszre, majd ssk le az Enter (Windows), illetve a Retum (Macintosh) billentyt egy j sor ltrehozshoz!
2 Jelljk ki a Name and Email feliratot s szvegmezt! Ezt nem felttlenl egyszer megtenni a szerkesztablakban. Vltsunk t az osztott kpemynzetre a szerkesztablak Code and Design nzet menpontjnak kivlasztsval! gy meggyzdhetnk arrl, hogy minden szksges elemet kijelltnk. Bizonyosodjunk meg rla, hogy a teljes kdtmbt kijelltk:
'"m t..
<span
'"..a lt- boll
- rx:.e"
'"MOi.
. '"nae'"..ai I "
<bt-
/>
)
1d-~t4$tf' .ldl >
'
( p >Inbf;p;
"mt'"
..
wlwa l. ~lred . {1
claar!'
<Ip)
Contact Here and Back Trav

Howcanwe
8
4
<label for="name">Name</label> <input type =" text " name="name " i d=" name " / ><br /> <s pan id="sprytextfieldl"> <label for="email" >Emai l </label> <input type="text" name="email" id="email" /> <spa n c lass="textfieldRequiredMsg">A value is required. </span><span class ="textfi eldlnvalidFo rmatMsg" >Invalid format. </span></span>
3 Vlasszuk ki a Fieldset eszkzt az Insert panel Forms fln (LJ)!

A Legend mezbe rjuk be a kvetkezt: Your Contact Information! Kattincsunk az OK gombra!
~gend: .vout Contaa Informatlon
(
(
i
Ca"cel
)
)
5 Vlasszuk ki a File> Save Al! menpontot! A fieldset cmke nem igazn tnik fel Design nzetben , a felirat viszonr tisztn lthat. Hasznljuk a Live View-t vagy egy bngszt, hogy megnzhessk a fieldset tnyleges megjelentst! A fieldset a kt szvegmezt egy feliratra! elltott szvegdobozba foglalja.
163
Yoo(~~rn~~~a~ln~ro~~~."~o~n~--------------~
Name
Email i - - - -- -- -- ' r
Kattintsunk a Live view mengombra, vagy zrjuk be a bngszt a Dreamweaver szerkeszt mdjba val visszatrshez!
Felhasznlnv- s jelszmezk ltrehozsa

Egyes szvegmezk nem ignylik egy bizonyos formtum hasznlatt, viszont meghatrozott kara kterszm szveg bevitelt hatrozzk meg. A hossz gyakori kvetelmny a felhasznlnevek esetben. A kvetkez gyakorlatban minimlisan meghatrozott karakterszmot ignyl Spry szvegmezt fogunk hozzadni az oldalhoz. l Kattintsunk az oldalhoz hozzadott fieldset utn, de mg a piros krvonalon bell a beszrs i pont kijellshez! Ha szksges, jelljk ki a fieldsetet, s ssk le a jobb nyilat a billentyzeten, hogy a vgre jussunk! ssk le az Enter (Windows), illetve a Rerum (Macintosh) billentyt egy res bekezds ltrehozshoz!
2 3
Az Insert panel Forms fln vlasszuk ki a Spry Validation Text Field eszkzt! Az Input Tag Accessiblity Attributes prbeszdablak ID
rjuk be a usemame azonostt, majd ssk le a tabultor t! A Label mezbe rjuk be a Usemame: nevet, majd ssk le megint a tabultort! Ellenrizzk, hogy a Style rszben az Attach label tag using for ' attribute lehetsg, a Position rszben pedig a Befo re form item lehetsg legyen kivlasztva, majd kattintsunk az OK gombra!
mezjbe
10:
tii:um~e
f
(
(
ubtl: IUsemMnd
Styte:
Wrap wllh label 100g
.. ~ ~ c.ac.' ) Help )
Atu.ch label tag usl"" 'for' ilnrtbute
Posltloft:
Btfore (orm item

Arter form ium
T"blnd!x:
If you don' wtlnt 10 tMer this lnformuion wMn

IMtrtingobjeas. dynGt !bt "sq ulb!!irv prdf!J.rKU,
4 5
Ha szksges, helyezzk az egrmutatt ausername szvegmez fl, s vrjuk meg, amg megjelenik a Spry TextField tab cmke! Kattintsunk a flre az objektum kijellshez! Vlasszuk ki a VaLidate on Blur lehetsget a Properties panelen, a Min chars (Minimlis karakterszm) mezbe pedig rjunk be 6-ot! Ellenrizzk, hogy a Required jellngyzet ki legyen vlasztva!
PROf'(,mlS
~ 5pfy Text Add
Type ( NoM
Fonnat
!Iij 'review states (~ ~ ....

VJllidate on
Min WtS
=.. ______---:-~@j ,
@
lIur
!spryte,.tfttId2
CUSlomlZf this wldos!
O Cha.
Rtqulrtd
Pilnem
tti ..
...--==='
Min valut
CJ
Entorce p,luem
164
Amennyiben piros htter hibazenet jelenik meg a Design nzetben, vlasszuk ki a Properties panel Preview States legrdl menjben az Initiallehetsget, hogy eltvoltsuk a Design nzetbl a hibazenetet! 6 Vlasszuk ki a File > Save menpontot a dokumentum elmentshez!
Jelszmezk
beszrsa
A jelszmez elg gyakori ltvnya weben. Alapesetben a szvegmez megjelenti a belerc szveget, amikor azonban egy szvegmezt jelszmezknt hasznlunk, a bevitt karakterek rejtve maradnak, s egy sor csillag vagy pont jelenik meg helyettk a bngsztl fggen. Ez egy biztonsgi bellts. I ssk le a Shift+Enter (Windows), illetve a Shift+Return (Macintosh) billentykombincit, hogy sortrst hozzunk ltre a username mez utn!
2 Az Imert panel Forms kategrijb61 vlasszuk ki a Spry Validation Password eszkzt (Ea )! 3 A megnyl Input Tag Accessibility Attributes prbeszdablak ID mezjbe rjuk be a password azonostt, majd ssk le a tabultort! A Label mezbe rjuk be a Password: feliratot, majd ssk le a tabulto rt! Ellenrizzk, hogy a Style s a Position terleten az Attach label tag using Jol" attribute s a Beforeform item lehetsg legyen kivlasztva! Kattintsunk az OK gombra!
(
(
ID:
lpauword
GIl
c.nc.l
Help
)
)
Label; IPulWOtd
5lYM;
O WtapwiCh l.lbllllt
o ....belt.g
PoslUoft:
'lfm form lem Atte, fann ktm
o
Access
k~
rabl"x:
If you don't wa,. to tnt., this lnfomatton whtn Inserting obifas. (ba". lhe AcClSSibnttym"rlMU
Kattintsunk a SpryPassword flre! A Properties panelen vlasszuk ki a Required jellngyzetet s a Validate on Blur lehetsget! A Min chars mezben adjunk meg 8-at, a Min numbers (Legkevesebb szmjegy) mezbe pedig rjunk be 2-t!
p .. .... "ates ."'
VaUdal. on
Cy'5lomlu
~ll:':,~~~~~~ friN
lIur
O ChA,. fVI'
Sobmit
'bli w1dgt1
MIII
tetten.
Min "umbe",
Max nwabtrs
[2"
Min UppefUM
Min 'PtlI wn
Max leUtn
Max lPIdll chIrs
Ha nem szeretnnk, hogy az alaprtelmezett hibazenet megjelenjen a Design ablakban, vlasszuk ki a Preview states: Initiallehetsget a Properties panelen! 5 ssk le a jobb nyilat a billentyzeten a jelszmez tugrshoz, majd hasznljuk a Shift+Enter (Windows), illetve a Shift+Rerurn (Macintosh) billentykombinci6t, hogy sortrst hozzunk ltre a jelszmez utn!
Az Insert panel Forms kategrijban kattintsunk a Spry Validation Confirm ikonra

ellenrz
( ~ ) a jelsz-
szveg ltrehozshoz!
165
7 Az Input Tag Accessibility Attributes prbeszdablak ID mezjbe rjuk be a confirmpw azonostt, a Label mezben pedig adjuk meg a Repeat Password feliratot! Ellenrizzk, hogy a 5tyle s a Position menben az Attach label tag using lor' attribute s a Beforeform item lehetsg legyen
kivlasztva! Kanintsunk az OK gombra!
ID:
t.Onn,mpW
(
( (
cll
ulMI: I~Pta.t ,,,sword
c.nce.
Help
) )
"'Iuch labellilg uslrtglor' attributt
Positlon:
krOte form Item

After form hem
o
Accus kt Y.
T.ab Indt,t:
ff you don't w.am tO tnter thlslnronnallon when Inserting oOjeas, cbt. the Acccujbirty pr!ft[f;!\:j -
8 A Properties panelen vlasszuk a Required s a Validate on Blur belltsokat! A Validate against legrdl menben vlasszuk ki a "password" in form "formi "lehetsget!
PROPOtTlES
ru:.e
~ spry Connrm
Is~onnrm I
I!I Rtquited
Villldate agalrut ( ):.IssWOfd ln form . ~
Prc\rlew sratu ( IrritiII
ValIdlit on
I!f Ilur O (rt.. ~ Submlt
( uuomb, Ihls w!dgtl
Helyezzk az egrmutatt kzvetlenl a password-confirm mez utn, majd ssk le az Enter (Windows), illetve a Rerum (Macintosh) billentyt! Mivel a felhasznl nem ismeri a felhasznlnvre s jelszra vonatkoz elrsokat, egy magyarz bekezds t kell hozzadnunk az oldalhoz a hrom mez eltt. Trjnk vissza a username mezt megelz res bekezdshez, s rjunk be tmutatst! Ha nem tallj uk az res bekezdst, jelljk ki a username mezt, majd ssk le a bal nyilat a billentyze ten, hogy a username mez bal oldalra jussunk! ssk le az Emer (Windows), illetve a Rerurn (Macintosh) billentyt az res bekezds ltrehozshoz!
10 Kanintsunk a username eltt ltrehown res bekezdsbe, s rjuk bele a kvetkezt: For online access to your itineracy and travel plans, please set up a username and password. Your username must contain at least 6 characters. Your password must contain at least 8 characters, at least two of them numbers. Az tmutatst tartalmaz bekezds t s az azt kvet hrom szvegmezt most egy kzs f1eldsetbe fogI alhatj uk.
II Jelljk ki a bekezds t s a hrom mezt! Br ebben az esetben nem felttlenl szksges a Code nzet vagy a Code and Design nzet hasznlata az oldalrsz knnyebb kijellshez, alkalmazzuk nyugodtan ezeket az rtkes eszkzket, amikor csak szksgnk van rjuk!
166
12 Kattintsunk a Fieldset gombra az Imert panel Fonns fln! A Legend mezbe rjuk be az Online Tools cmet, majd kattintsunk az OK gombra!
Legend: IOnIlot
Tool!i
( Cancel )
13 Vlasszuk ld a File> Save menpomot! A jelszmez, amit az oldalhoz adtunk, lehet v teszi, hogy egy felhasznl jelszt hozwn ltre az ltalunk meghatrowtt szablyoknak megfelelen. A jelswellenrz mez a jelsz jbli, az elsvel teljesen megegyez berst ignyli. Ez segt a weboldal felhasznlinak szrevenni az esetleges elrsokat, gy ldkszblve a szndkowttl eltr jelsz megadst.
Szvegterletek beptse
A szvegterletek a szvegmezknl nagyobb mennyisg szveg bevitelt teszik lehetv. A szvegterletek tbbsoros beviteIt s alaprtelmezsben a sorok automatikus trst is engedlyezik. Ha a bevitt szveg mrete meghaladja a szvegterlet szmra kijellt helyet az oldalon, automatikusan grgetsvok jelennek meg az oldalsvban. 1 Amennyiben szksges, nyissuk meg a contact. html fjlt dupln a nevre kattintva a Files panelen! A fleldset ltrehozsnak msik mdja, hogy elszr ltrehozzuk magt a fleldsetet, majd hozzadjuk az rlapelemeket. A kvetkez nhny rlapelem ltrehozsra ezt a mdszert fogjuk alkalmazni. 2 Helyezzk az egrmutatt az utols fieldset al, de mg a piros krvonaIon bell! Amennyiben szksges, kattintsunk az utols fieldsetbe, majd a <fieldset > cmkre a cmkevlasztban, s ssk le a jobb nyilat a billentyzeten az elem tugrshoz! Kattintsunk a Fieldset gombra az Insert panel Fonns fln! A Legend mezbe rjuk be a Youc Trip cmet, majd kattintsunk az OK gombra! ,. . -.-- .. ...... ,.,.,....- .,-.........--- ._-,
.,~ .~.".--
~nd:" 'vour Trip
t
(
c*
Cancel
)
)
Most a meglv fieldsetbe illeszthetjk az j rlapelemet. 3 4

Az Imert panel Fonns fln kattintsunk a Text Area ikonra ( ~ )! Az Input Tag Accessibility Attributes prbeszdablak ID mezjbe rjuk be a plans awnostt,
majd ssk le a tabultort! A Label mezbe rjuk be a Travel Plans feliratot! Ellenrizzk, hogy a Style terleten az Attach label tag using lor' attribute legyen kivlasztva, a Position terleten pedig a Beforeform item! Kattintsunk az OK gombra!
167
II>
I""~
t:
(
OlICIncei
u:btl: 'Tram PlartJ

Style::
} )
)
Wqp with I.. bel taQ
Hel.
At'lch 'ibe t (.1jI LISIng 'fO(' .. ttribuu~

No l.J.btl
(.IQ
o
PositIon: "
kfoft form 'lem

Aher form Item
o
A:eu key:
~ Tab Irtdex:
If you don't Wilnt to enter this Information when irutrtlng objecu. (Mg 1M Am:sslbtl!ty mft:rCMC5
A szvegterlet kzvetlenl a felirat utn jelenik meg. Kattintsunk a felirat vgre, majd ssk le a Shift+Enter (Windows), illetve a Shift+Rerurn (Macintosh) billentyt a sortrs ltrehozshoz!
rayel Pians
Kattintsunk az res szvegterletbe! Sokszor rdemes az Init val (Jnitial Value, azaz Kezdrtk rvidtse) mezt az rlapelem kitltsre vonatkoz zenet megjelentsre hasznlni. Az Init val hasznlata nem mindig szksgszer. Nagyban fgg a felirattl s attl, hogy mennyire egyrtelm aszvegterletek tarralmval kapcsolatos tmutats.
Az res terletre rjuk be a kvetkezt: Briefly describe, where you wouJd like to go and for how
long! Amikor a felhasznl elkezdi kitlteni az res terletet, eltnik az Initial Value tmutats.
PftQPERTlES
"'-'" 'I '0 I
>." _','
"
.. - .., "
-,
T'
.'-,~,'
~""-:
'.
r;,=::;-110 lu::pI.::.:;n~=--.J
Textf~ld
Chilr widt h
Numllnu
~5
Typt:
O Single line 8
Multi linl:
O Pauword
CI... { ....colA ..
ot'!
Init VOll Brlefty descnbe where you would
o
8
o OI bl.d
"Id-only
tike to go and for how long
Vlasszuk ki a File > Save menpontot a dokumentum elmentshez!
Megjegyzs: A Properties panelen megvltoztathatjuk az oldal szvegterleteinek szlessgt s magaSSgt (Num lines) is. Read-only (a weboldal felhasznli ltal nem szerkeszthet) belltst is megadhatunk a terletre.
A szvegterler, amit az oldalhoz adtunk, egszen hossz szveg bevitelt teszi lehetv (br a krs rvid lersra vonatkozik, a terlet tbb bekezds nyi szveg befogadsra is alkalmas).
Vlasztgombok ltrehozsa
Ha azt szeretnnk, hogy a weboldalunk ltogati tbb lehetsg kzl csak egyet vlasszanak ki, vlasztgombokat kell hasznlnunk. Ms rlapelemekkel ellenttben a vlasztgombok nem rendelkeznek egyedi nvvel, hanem az egy csoportba tartoz vlasztgomboknak kzs a nevk. Az egyes vlasztgombok csoporton belli megklnbztetsre eltrnek a hozzjuk rendelt rtkek.
168
A Dreamweaver kr mdszert nyjt a vlasztgombok beszrsra. Lehetsgnk van egyenknt beszrni minden egyes vlasztgombot, vagy egyszerre ltrehozni egy egsz csoportot a Spry Validation Radio Group (Spry ellenrztt vlasztgombcsoport) eszkz segtsgvel. Ha egyenknt hozzuk ltre a vlasztgombokat, egyenknt kell meveznnk ket, hogy azonos nvvel rendelkezzenek. Ha a Spry Validation Radio Group eszkzt hasznlva, csoportknt hozzuk ltre ket, ugyanaz lesz a nevk, s a kapcsold JavaScript s CSS fjlok lehetv teszik a hibazenetek s a formzs testreszabst. Ebben a gyakorlatban ezt az eszkzt fogjuk hasznlni. 1 Amennyiben szksges, nyissuk meg a contact. html fjlt dupln a nevre kattinrva a Files panelen! 2 Kattintsunk aszvegterlet mezje utni rszre, de mg a Your trip felirat fieldseten bell! ssk le az Enter (Windows), illerve a Rerum (Macintosh) billentyt, hogy egy j sorra lpjnk, s rjuk bele a How many will be traveling in your group? szvege t! ssk le jra az Enter (Windows), iJlerve a Rerum (Macintosh) billentyt! Kattintsunk a Spry Validation Radio Group gomb ra ( ~) az Insert panel Forms fln! Kattintsunk hromszor a pluszjelre (+) a Radio buttons (Vlasztgombok) terleten, hogy sszesen t vlasztgombot hozzunk ltre! Most feliratokat s rtkeket fogunk a vlasztgombokhoz tr. . sltam. Kattintsunk a lista els elemre, majd rjuk be a One nevet a Label mezbe! ssk le a tabultort, majd a Va/ue mezbe rjuk be a one feliratot! ssk le jra a tabultort, majd rjuk be a Two feliratot a msodik Label mezbe, a meJlette tallhat Value mezbe pedig a two szt! A tbbi feliratot hasonlkppen nevezzk t a Three, Four s More, tovbb a nekik megfelel three, four s more bersval!
3 4
E
"dio bun ....
olt
Ct",,1
1l8
8G
~
(
~
)
)
-.
four
u.yout uslng
IAbol Tnree
_ Valut l
tn, ..
(our
lmol'~
- ,..
"ol.
UM Inaks bD tags)
T.bI<
8
6
A Lay out using (Szerkezet) rszen vlasszuk ki a Line breaks hetsget, majd kattintsunk az OK gombra!
b r > tags) (Sortrsek hasznlata) le-
Kattintsunk a kk Spry Radio group flre a szerkesztablakban, ha a vlasztgombcsoport nincs kijellve! Vlasszuk ki a Required jellngyzetet a Properties panelen, s a tbbi lehetsget hagyjuk a kvetkez bra szerinti belltson!
ti)
..... ;-~"-"-.,~-;{ ~';~-
l iXI'C 907 x )14. 204K I Ja H'

_., . . . . . -:-.- ...... ~-- -r'..,.--
,,..
......'
-~.--.-
PRQKRTIB
...... -~I,.t
, .... --
- . . ~.,
Rtqulrtd
Prevltw nAtu ( tnltl.1
itt
Valldatl! on
CuyomU' Ibb wldgcl
O 8/ur O Chi,. ~ Subrnil
169
Vlasszuk ki a File> Save menpontot a dokumentum mentshez!
Vlasztgombcsoportot hoztunk ltre, amely csak egyetlen vlasztsi lehetsget tesz lehetv. A Spry Validation Radio Group eszkz hasznlatval ktelezen kitltend rlapelemm tettk a terletet, gy, ha a webszjt felhasznlja nem jell meg egyet a vlasztgombok kzl, az rlap elkldsekor hibazenet jelenik meg.
Jellngyzetek
beszrsa
A jellngyzetek szmos, brmilyen kombinciban kivlaszthat lehetsget knlnak. A vlasztgombokhoz hasonlan a jellngyzetek egy nvvel rendelkez csoportba tartoznak. Minden egyes jellngyzet sajt rtkkel s egyedi ID awnostval rendelkezik. l Kattintsunk a vlasztgombcsoport utn, majd ssk le az Entert (Windows), illetve a Retumt (Macintosh)! A Code and Design nzetben ellenrizhetjk, hogy a zr <Ip> cmke s a <s pan> cmke utn kattintottunk-e, amely a ktelez vlasztgombok kihagysakor megjelentett hibazenetet tartalmazza. Design nzetben rjuk be az j bekezdsbe a What services would you Iike for us to arrange for you? szveget, majd ssk le az Enter (Windows), illetve a Retum (Macintosh) billentyt! A Dreamweaver mindig egyetlen jellngyzetet szr az oldalba, ahnyswr a jellngyzet gombra (~)kattintunk. Ezt a mdszert kvetve manulisan kell bevinnnk a jellngyzet-csoportok hoz tartoz egyes jellngyzetek nevt. A vlaszt6gombokhoz hasonl6an a Drearnweaver alternatv m6dszert is knl egy, awnos nvvel rendelkez elemekbl ll, teljes jellngyzet-csoport beszrsra. Minden jellngyzet sajt nvvel s rtkkel fog rendelkezni. Kattintsunk a Checkbox Group Oellngyzet-csoport) gombra az Imert panel Forrns fln (/ill)! A Checkbox Group prbeszdablakban kattintsunk a Checkboxes terlet melletti pluszjelre (+) egy harmadik jell ngyzet ltrehozshoz! Mdostsuk a Label oszlop els elemt a Tours nvre, majd ssk le a tabultort, s a Value oszlop els elemt cserljk toursra! Folytassuk ugyangy a msik kt nv mdostsval: rjuk be a megfelel helyre a Transportation s a H otels, illetve a hozzjuk tartoz transportation s hotels nevet! A Lay out using rszen vlasszuk ki a Line breaks br> tags) lehetsget, majd kattintsunk az OK gombra!
2 3
J
( "'box.., !J 8
8~
E
(
eit
Can1
Help
)
)
r.~~--------rv~.I~u.----~~ l
~u~,,~------~~ur~,~--~-~ to
..
l..J.vout uslng:
el
Unt Iwuks br> laiS)
T.bIt
A Checkbox Group eszkz hasznlatval nem kell kln belltanunk a jellngyzetek tulajdonsgait a Properties panelen . Ha csak egy rvid pillantst vetnk a forrsk6dra, a Checkbox Group hasznlatnak elnyei egyrtelmv vlnak. 4
ASplit gombra kattintva vltsunk t a Code and Design nzetre! Minden jell ngyzet sajt name= "CheckboxGroupl" nvvel rendelkezik.
170
Ha egyenknt adjuk az oldalhoz a jell ngyzeteket, minden ngyzethez manulisan kell bernunk a nevet s az rtket. A Checkbox Group eszkz automatizlja ezt a folyamatot, gy idt takarthatunk meg.
Megjegyzs: A Dreamweaver ltal felajnlott ltalnos nevek, amilyen pldul a CheckboxGroup1 megvltoztathatk a Properties panel Name mezjben. A berkezett rlapadatok feldolgozsa szempontjbl hasznos lehet, ha a weboldal tulajdonosa pldul a Checkbox Group nevet a services_wanted (ignyelt szolgltatsok) nvre cserli. Az egyedi nevek hasznlata a Dreamweaver ltal javasolt ltalnos nevek helyett tbb hasznos informcit hordozhat az elkldtt rlapadatok cimzettje szmra.
5 Vlasszuk ki a File> Save menpontot amentshez! Egy jellngyzet-csoportot hoztunk ltre. Alaprtelmezs szerint egy csoportbl tbb mint egy ngyzetet kivlaszthatunk. Ahogyan azt a lecke sorn mr emltettk, a <label> cmke alaprtelmezs szerint mind a vlasztgombok, mind a jellngyzetek esetben az rlapelem utn kvetkezik. Mg egy rlapelemet kell a jelenlegi rlapunkba illesztennk. A kvetkez gyakorlatban megtanuljuk, hogyan lehet kis helyen sok vlasztsi lehetsget megjelenteni a legrdl men rlapelemmel.
Legrdl
menk hasznlata
A legrdl men rlapelemek hasznlatval rugalmasan jelenthetnk meg szmos vlasztsi lehet sget. Az alaprtelmezett legrdl menk a vlasztgombcsoportokhoz hasonlan egyetlen vlasztst tesznek lehetv az egymst klcsnsen kizr lehetsgek kzl. A multiple selection (tbb vlaszts) lehetsg bekapcsolsval azonban a men funkcionalitst tekintve inkbb a jellngyzet csoportokhoz vlik hasonlv. Ebben a gyakorlatban alaprtelmezett legrdl ment fogunk ltrehozni, amelyben hrom vlasztsi lehetsg szerepel. l Amennyiben szksges, nyissuk meg jra a contact. html fjlt dupln a nevre kattintva a Files panelen! Kattintsunk az utols jellngyzet felirata utn, majd ssk le az Enter (Windows), illetve a Return (Macintosh) billentyt! rjuk az res sorba a When do you plan to travel? szveget, majd ssk le jra az Enten (Windows) vagy a Returnt (Macintosh). Vlasszuk ki a ListlMenu (Legrdl men/Lista) ikont (i!) az Insert panel Forms fln!
2 3
4 Az Input Tag Accessibility Attributes prbeszd ablak ID mezjbe rjuk be a timeline azonostt, majd ssk le a tabultort! A Label mezt hagyjuk resen, a Style rszen pedig vlasszuk ki a No fabel tag lehetsget! Kattintsunk az OK gombra! Feliratcmkre nincs szksg, mivel ebben az esetben az rlapelemen tallhat szveg szolgl az rlapelem felirataknt. Most kszen llunk arra, hogy a legrdl ment az oldalhoz adjuk. A Dreamweaver ennek a feladatnak a vgrehajtshoz kln prbeszdablakkal rendelkezik, amelyet a Properties panelen keresztl rhetnk el.
171
ID:
..tlmellne
Label:
Styie:
E (
( .. neel
--
~
) )
Wr.ap wlth label IIg
"'Ip
o ..
O
uuh Ilbel 1.a9 ush~ 'for' Ittrlbut~
PositkJn:
kfore form 'tem
Aceen key:
8 Ah!:r form item c l T.JIb Index:
If you don't Wilnt to enter this InforrtYtlon wntn Inierting ~as, cty,noe IM Acctnlblllty P'1felJrK!'$.,
Jelljk ki az imnt beillesztett legrdl men rlapelemet! Ha nem lthat a Properties panel, jelentsk meg a Window> Properties menpont kivlasztsval! Kattintsunk a List Values (Listartkek) gomb ra a Properties panelen! A List Values prbeszdablakban rjuk be az Jtem Labeloszlopcm al az Immediately szt, majd ssk le a tabultort! A Value oszlop ba az immediately sz kerljn, majd ssk le jra a tabultort!
'. fry .....-~
[JEI
r nl'~~~--~~-'I~ :7. -~--~--~ ~ vw Immedlately
Withln the next [wo months
ol(
lmmedl.atety
wlthlntwomonths
( Cane.1 )
SometJme. this year
l",, 's~ve...;_ [h...; .r
_ _ _- ,
7 Egsztsk ki a listt a kvetkezkppen: Jtem Label: Within the next two months; Value: withintwomonths Jtem Label: Sometime this year; Value: thisyear
Tipp: A megadott rtknevekben alhzsjeleket is hasznlhatunk, pldul: within_two_months vagy this_year. Szkzk azonban nem szerepelhetnek a nevekben.
Kattintsunk az OK gombra! Most belltjuk az rlap betltsekor megjelenteni kvnt rlapelemet, amely ltalban a legrdl men els eleme. A Properties panel Jnitially selected menjbl vlasszuk ki az Jmmediately lehetsget! A Tjpe (Tpus) terlet vlasztgombjaival vlasszuk ki a Menu opcit! Amikor a legrdl men vagy lista rlapelemet a Menu tpussal formzzuk, a men nem engedlyezi tbb lehetsg kivlasztst. Ahhoz, hogy a felhasznlk egyszerre tbb lehetsget kivlaszthassanak, vltsunk t List belltsra a Properties panel Tjpe rszn, majd vlasszuk ki az Allow
multiple jellngyzetet!
PltOPUTI[S
Ust/Menu
Selections
fi Allow multph.'
Wlth ln the .. . Sometlme t .. .
Inttially selec:ted
172
esetn pldul megkrhetjk a felhasznlt, hogy vlassza ki az els hrom, szmra legvonzbb ticlt egy egyhetes tra. Miutn megrekintettk a List opci nyjtotta lehetsgeket, a feladat befejezshez trjnk vissza a Menu tpus belltshoz!
List pus
rlapelem
10 Vlasszuk ki a File> Save menpontot amentshez! A legrdl men elemek szmos opcit tartalmazhatnak, gy nagy szm vlasztsi lehetsget knlnak a weboldalltogati szmra, mikzben csak kevs helyet foglalnak el a weboldalon.
Az
rlapunk majdnem teljes.
Az utols lps egy olyan gomb hozzadsa, amellyel az
rlapba bevitt
sszes informcit tovbbthatjuk.
Elkldgomb (Submit button) ltrehozsa

Az eJkldgomb szksges az elklds
Ahogy a neve is mutatja, ez az rlapeJem kldi el feldolgozsra a teljes rlapot, gy teht nlklzhetetlen.
rlapesemny elidzshez.
A Dreamweaverben a gomb objektum alaprtelmezs szerint elkldgombot jelent, azonban ms lehetsgek is a rendelkezsnkre llnak. Egy gombot gy is definilhatunk pldul, hogy trlje az rlapon megadott adatokat. l 2 Amennyiben szksges, nyissuk meg a contact.html fjlt gy, hogy dupln a nevre kattintunk a Files panelen! Kattintsunk az utols fieldset brmely rlapelemre! Vlasszuk ki a < fieldset > cmkt a Properties panelen!
\\1 'e"' cc. 'rC.: .:; ,;-1 :c : -~\'e'
8
Kvetkez lpsben a fieldseten kvl fogjuk helyezni az e1kldgombot.
3 4 5
ssk le a jobb nyl billentyt, hogy kilpjnk a kijellt fieldsetbl, majd az Enter (Windows), illetve a Rerum (Macintosh) billenty letsvel hozzunk ltre res helyet a gomb szmra! Vlasszuk ki a Button (Gomb) ikont (O) az Insert panel Forms fln!
Az Input Tag Accessibility Attributes prbeszd ablak ID mezjbe rjuk be a submit azonostt! A 5tyle rszen vlasszuk ki a No label tag lehetsget, majd kattintsunk az OK gombra!
173
(
StyI<:
n<d
Help
~
)
W".whh,.be'''O
Position!
8ttOlt form Item

Aher form Ittm
o
Acctss key:
tr you don' w.nt to tMtr this Iltf'onnatJol1 whtn Insening objtoas. dM. the Acqnlbllity m'cttncn,
Fogadjuk el az alaprtelmezett Action (Submit form) (Esemny - rlap e/kldse) belltst a Properties panelen s a szintn alaprtelmezett Va/ue (Submit) (rtk - Elklds) belltst! A gomb feliratnak szvegt a Va/ue mezben megvltoztathatjuk, Submit helyen pldul Kldst is rhatunk r.
I'ROPtRTIES
I. I.-J
auuonn.... '
sobmt
varut !Submlt
o Reset form - - --
-f;'
Vlasszuk ki a File> Save menpontot a dokumentum mentshez!
Ltrehozcunk egy rlapot, amely alkalmas nevek, e-maiI cmek, felhasznlnevek s ms, utazsszervezshez szksges informcik sszegyjtsre. A ktelezen kitltend mezk s ms tartalmi rszek - mint pldul a megfelel e-mailcm-formcum vagy a felhasznlnv minimlis karakterszmnak ellenrzsre hasznlt Spry ellenrz szkriptek - is a helykre kerltek. Az rlap szerkezett fleldsetek hozzadsval strukcurltuk, s az oldal hoz adcunk egy elkldgombot. Az action culajdonsghoz kapcsold, rlapfeldolgoz szkripttel ez az rlap teljesen mkdkpes lenne. Mieltt azonban tovbb lpnnk, formzssal javtsunk kicsit az rlap megjelensn!
Urlapok formzsa stlusokkal

Br a fejezet sorn ltrehozott rlap mr mkdkpes, mg teljesen formzadan. Egy jl formzott rlap jobban olvashat s rtelmezhet, ezltal egyszerbb hasznlni. A kvetkez gyakorlatban formzni fogjuk az rlapunkat.
"
CSS-szablyok alkalmazsa
Annak ellenre, hogy szmos klnbz tpus rlapelem ltezik, kzs culajdonsgokkal rendelkeznek, amilyen pldul a <label > cmke. Ezeket az rlapelemeket CSS-szablyok segtsgvel formzhat juk. Ebben a gyakorlatban j stluslapot hoznunk ltre, amely az rlapunkhoz kapcsold formzsi szablyokat fogja tarwmazni. A stluslaphoz a legend s a fi-eldset cmkre vonatkoz szablyokat trscunk majd.
174
l 2
Amennyiben szksges, nyissuk meg a contact. html fjlt dupln a nevre kattintva a Files panelen ! Vlasszuk ki a Window > CSS Styles menpontot! j stluslapot hozunk ltre csak az rlapelemek stlusai rszre. Az j stlus lap a meglv oldalunkhoz fog kapcsoldni, az utazsi webszjt ms oldalaihoz azonban nem kell ktdnie. Azzal, hogy elklntjk az rlapokra vonatkoz CSS-szablyokat a f stluslaptl, cskkentj k a webszjt minden egyes oldalhoz betltend kdmennyisget, s ltalban vve hatkonyabban m kd szjtot hozunk ltre. A kevesebb kd gyorsabb letltst s ezltal felhasznlbartabb weboldalt eredmnyez, emellett gyakorlatot szerezhetnk az j st.luslapok ltrehozsban is. Kattintsunk a CSS Styles panel aljn tallhat Attaeh Style Sheet ikonra (_)! Amikor megnylik az Attach External Style Sheet prbeszdablak, a File/URL mezbe rjuk be a fonns.css fj Inevet! Az Add as (Hozzads mdja) terleten vlasszuk ki a Link l ehetsget, a Media legrdl menben pedig adjuk meg a screen (kperny) opci t, majd kattintsunk az OK gombra!
Ale/URl: forrni.cu
Add as:
, 3 4
(Brows .... ) .
E
(
OK
o Import
You may also enler a comma-separated list of medla types.
Link
~~~.)
Cane.1 )
Media: t.1~c_r._.n _ _ _ _ _ _ _...J~9
Dreaf1'JWl!aver has sample
IMe shects to get you started.
Help
A Dreamweaver figyelmeztet, hogy a megnevezett stlus lap nem ltezik. Kattintsunk a Yes (Igen) gombra, hogy mgis az oldalhoz adjuk!
The specIfled style sheet could not be found. Continue byaddng the Unk/import stateme"t ln this
page anyway?
6 7
A CSS Styles panel Ali Rules svjnak listjrl vlasszuk ki a forms.ess szablyt, majd kattintsunk a pluszjellel (+) jellt New CSS Rule ikonra az j szably ltrehozshoz! A New CSS Rule prbeszdablak Selector Type legrdl menjben vlasszuk ki a Tag (redefines an HTML element) lehetsget! A Seleetor Name mezbe rjuk be a legend nevet, vagy hasznljuk a legrdl ment a legend elem kivlasztshoz! Gyzdjnk meg rla, hogy a Rule Definition rszen aforms.css lehetsg van kivlasztva, majd kattintsunk az OK gombra!
175
Selector Type:
E -oK-" "1
( cane,1 )
Choose a contextual sejtelor type for your CSS rule.
! Tog (redeflne. an HTML element)

Stlector Name:
II
I~
1~9.ndI
iThls selectof name wtll apply your rult to
tali <legend> elements.
(r'Rule DefintUon;
"'"-,, Sp- "': Le -:"- ec ifi'c-"') (
Mo re Speellic
Oloose where your rule will be define:d.
I lorms.css
Help
A Dreamweaver figyelmeztet, hogy a megadott stluslap nem ltezik, s felajnlja ltrehozst. Kattintsunk a Yes gombra a lehetsg elfogadshoz!
File forms.css does not ex ist. 00 you want to create It?
(
L-.._ __ _ _ ._ __ _ _
No
){ VU)
A CSS Rule Definition for legend in forms.css prbeszdablakban vlasszuk ki a Type kategrit! A Font-size mezbe rjunk be lIO-et, a szomszdos legrdl menben pedig adjuk meg a % lehet sget! A Font-weight legrdl menben vlasszuk a bold tpust! Kattintsunk a Color mezre, majd rjuk be a #345FA3 sznkdot! Vgl kattintsunk az OK gombra a belltsok jvhagyshoz!
C~tcg ory
Type
Font-funllyo [
...
U..
bckgroond Biod<
Border
Font-size:
Font-slyte:
("
I
ffi
Font-variant:
Posl{ionlng
Ex.I:ension.!o
lIne-helght:
Tt)Ct-doratlon:
p:lC
- ----:1
Text-transform:
O undtrllnt:
O owrllnt
O line-through
o non.
O blink
( Appiy ) ( Cantol )
ol<
10 A CSS Styles panelen kattintsunk a pluszjellel (+) jellt New CSS Rttle ikonra az j szably ltrehozshoz! II A New CSS Rule prbeszdablak Selector Type legrdl menjben vlasszuk ki a Tag (redefines an HTML element) lehetsget! A Selector Name mezbe rjuk be a fieldset nevet, vagy vlasszuk
176
ki a legrdl men bl! Ellenrizzk, hogy a Ru/e Definition legrdl menben a forms.csslehet sg legyen kivlaszrva, majd kattintsunk az OK gomb ra!
StIKtDr Typt::
Choose a conlextual selectO( type tor your CSS rult'.
Cancet
( Tag (redefine. an HTMletement)
Choose or enter a name for you,
se~ctor.
Ift.tdS.~
This selector name will apply yoU( rule to ali <neldset> elements.
'--'
(
Rulc Deflnltkan:
Less Specific
) (
Mo,. Spe<ifiQ
Choose where your ruJe wt!! be denned.
! fo,,....c!!
Help)
12 A CSS Ru/e Definition for fieldset in form.css prbeszdablakban vlasszuk ki a Box kategrit! A Padding terleten rjunk be lO-et a Top mezbe! Ez az rtk a tbbi mezben is megjelenik. Vegyk ki a pipt a Margin terlet Same for ll jellngyzetbl, majd rjunk be 5-t a Bottom mezbe! Az szszes, mrtkegysg-vlaszt legrdl menben hagyjuk meg az alaprtelmezett px rtket!
I"T"~':"----"I "VP<
Background
Category
Bo)C
BIOdC
Border
Un
Positioning
Exlenslons
Padding
~ Some for.1I
Margi"
Ipx
8 1. !!9
&ottom: 10
m
ltI
O Some fo< aJl

~ (jjX
Top:
Rlght:
~ 1 V"l ,---" 0J
,....... I OX ..:.-
~f ox
Lelt:
Left: 10
S I.. !ij
~:
..
,
ol
8
( Ap.;. ) ( Ca"ul)
E- }
13 Vltsunk t a Border kategrira! A Sty/e terlet legrdl meniben adjuk meg a solid lehets get, a Width terleten pedig a thin opci t! A Color mezbe rjuk be a #345FA3 sznkdot! (A megadott rtkek az sszes mezben megjelennek, mivel minden terleten ki van vlaszrva a Same for ali jellngyzet.) Kattintsunk az OK gombra a belltsok jvhagyshoz!
177
Col.l~Ory
Border
T_
-----------------------------------Style W1dth _ _ _ _ _ _ _ Color _ _ __
.'ock Box
Ust
8ackground
l!iiJ ..... fo< ali

Rlght:
l!iiJ 50... ro< ali
liI"m. r... ali

. . >34'FA3 . . '34SFAl
Positioning Exlenslons
solid
M)lId
lonom:
LIfft:
500Hd
-.:... -.:...
~
thln
fhln
r.-)'-~
r, 1
~
r.-J
-. ep;.----.. .
:
\..!!!~
. . '34'fAl . . >345FA'
( ""p )
14 Vlasszuk ki a File> Save Ali menpontot amenrshez! Az oldalon tallhat Legend s fieldset stlusok jobban megjelennek egy bngszben, minr Design nzetben. 15 Katrinrsunk a Live View menpontra, vagy jelentsk meg az oldalt az elsdleges bngsznkben! 16 Ha befejeztk az oldal megtekinrst, karrinrsunk jra a Live View menponrra, vagy zrjuk be a bngsznket, s trjnk vissza a Dreamweaver szerkesztsi mdjba!
A SpryAssets mappa s a hivatkozott

meztet
rlapmezk
Az oldaJunkhoz jelenleg nagyszm Spry szkript s sdluslap kapcsoldik. Mivel ezeket az oldal elnzetnek mkdtetse cljbl a SpryAssets mappa mr tartalmazta, nem jelenik meg figyelzenet, hogy adjuk ket a szjtunkhoz. Figyeljnk arra, hogy az oldalhoz kapcsold sszes fjl fel van sorolva a szerkesztablak felett, s mindet fel kell tltennk ahhoz, hogy az oldalunk egy tvoli szjton is mkdni tudjon!
8
Ebben a leckben sokfle rlapelemmel s nhny Spry ellenrz eszkzzel rendelkez , teljes rlapot hoztunk ltre. Az rlapot a jobb megjelens rdekben formz tuk, stluslapot adtunk hozz, s az r lapunkhoz kapcsold stlusszablyokat hatroztunk meg.
178
sszefoglals
sszefoglal krdsek
l 2 3 4 5 6 7 Mi a funkcija a <f o rm > cmknek? Hogyan lehet bekapcsolni az rlapokhoz tartoz hozzfrhetsgi funkcikat a Dreamweaverben? Mit befolysol az Attach label tag using lor' attribute lehetsg kivlasztsa? Milyen elnykkel rendelkeznek a Spry rlapeszkzk az alaprtelmezett rlapelemekkel? Mi a klnbsg az
egyszer szvegmezk
s a szvegrerletek kztt?
Hogyan jellhetjk azt, hogy a klnbz vlasztgombok azonos csoporthoz tartoznak? Mi az alapvet klnbsg a vlasztgombok s a jell ngyzetek kztt? Mi a <fie l dset > cmke feladata?
sszefoglal vlaszok
1 A <form > krlveszi az sszes rlapelemet, valamine tartalmazza az action tulajdonsgot, amely meghatrozza az rlap feldolgozst vgz fjlt vagy szkriptet. 2 3 4 Vlasszuk ki a Dreamweaver Preferences (BelltSok) prbeszdablaknak Accessibility kategrijban a Form Objects (rlapelemek) lehetsget! A <label> cmkt a megegyez ID awnostval rendelkez rlapelemhez kapcsolja. A Spry rlapeszkzk egyszerv teszik az rlapelemek, mint pldul a vlasztgombok s jell ngyzetek ltrehozst. Beptett adatellenrz funkcikkal rendelkeznek, amelyek garaneljk, hogy az elkldtt adatok megfelel formtumak legyenek, valamint azt is, hogy a ktelez mezk valban ki legyenek tltve.
5 6 7 8
Az egyszer
rvidebb karakterlncok bevitelre swlglnak, a szveg terletek akr tbb bekezdsnyi szvege t is be tudnak fogadni.
rendelkez
szvegmezk
Az sszes, awnos nvvel
vlasztgomb azonos vlasztgombcsoporthoz fog tartozni.
A vlasztgombokkal egymst klcsnsen kizr lehetsgek kzl vlaszthatunk, a jellngy zetek tetszleges szm opci kivlasztst teszik lehetv. A <fi e ldset > cmkt az sszetartoz rlapmezk csoportostsra hasznlhatj uk, a hozz trsul <legend > cmke pedig a csoportot hatrozza meg. Mindkt cmknek az a szerepe, hogy javtsa az rlap ttekinehetsgt, s egyrtelmv tegye az rlap mezk cljt.
9 Flash elemek hasznlata
Here and Back Travel

Boston's beautifui Realty Park can be on your itinerary
..
.""
~'!~
Jfl,
~vr:;
the vacation of a
with Here and Back Travel

Welcome to Here and Back Travel, home of the personalized itinerary and the best in indivldual attention to your travel needs. Pick a destination and we'lI make it happen, just the way you dreamed it!
Here and Bad< Travel
~
" . _. olt>~"
Ebben a leckben megtanuijuk, hogyan pthetnk a weboldalunkba klnbz Flash elemeket.
180
9. LECKE Flash elemek hasznlata
A lecke ttekintse
A kvetkezket fogjuk megtanulni: Flash animci beszrsa Flash vide hozzadsa
Ennek a lecknek az elvgzse krIbell 30 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessons map pt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a Lesson09, a Lessons > movie s a lessons > Scripts mappt!
Megjegyzs: A leckefjlok letltse
az Elinduls fejezetben tallhat, a 2. oldalon.
A Dreamweaver segtsgvel pr egyszer lpsben Flash videkat s animcikat adhatunk a weboldalunkhoz.

Ahhoz, hogy pontosabb kpet kapjunk a dokumenrumrl, amit a lecke sorn ltre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben! Ez az oldal annak az utazsi szjtnak a honlapja, amelyen a korbbi leckk sorn dolgoztunk. 1 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, ssk le az F8 billentyt a Fi/es panel megnyitshoz, majd vlasszuk ki a szjdistrl a DW CIB mappt! Bonrsuk ki a lesson09 map pt a Fi/es panelen! Vlasszuk ki az index-finished.htmlfjlt, majd ssk le az F12 (Windows), illetve az Option+Fl2 (Macintosh) gyorsbillentyt, hogy megtekintsk az oldalt az elsdleges bngsznkben! Lthatjuk, hogy az oldal kt Flash elemet is tartalmaz. Megfigyelhetjk, hogy a Flash animci az oldal betltsekor azonnal elindul. Helyezzk az egrmutatt az oldal bal oszlopban tallhat videablak fl, majd kattintsunk a Play (Lejtszs) gombra a Flash vide megrekintshez! Elmozdtva a viderl az egrmutatt, a vezrlgombok eltnnek, visszavve jra lthatv vlnak. Ha vgeztnk a mgrekintssel, zrjuk be a bngsznket, s trjnk vissza a Dreamweaverhez!
5 6
Megjegyzs: A Microsoft Internet Explorer egyes verzii engedlyt kmek az animci lejtszshoz szksges aktv tartalom futtatsra . Ha a Flash lejtsznk nem a legutbbi vltozat, lehetsges, hogy le kell tlten nk a szoftver legfrissebb verzijt.
Flash animcik elhelyezse az oldalon

Az Adobe Flash napjainkra a multi mdia szinonimjv vlt. Szerny animcis programknt indulva a Flash gyors fejldsvel a cscsminsg hirdetsek, felhasznli felletek s videk kezelsnek elsdleges eszkze lett. Nagy rugalmassg szerkeszteszkzhz illen a Flash SWF fjlok lejtszshoz szksges Flash Player mra a legelterjedtebb bngszbvtmny lett. A Dreamweaver kivlan integrlja a Flash animcikat, gy az SWF fjlok egyszeren beilleszthet ek s awnnal megrekinthetek a szerkeszrfelleren. Mindezeken fell az animcikhoz kapcsold
181
nhny kulcsfontossg jellemz , mint pldul az automatikus lejtszs s ismtls egyszeren mdosthat a Properties panelen. Ha a Flash animci forrsfjlja elrhet, az SWF fjl auromatikusan szerkeszthet Flashben, majd onnan exportlhat a Dreamweaverbe. Ebben a gyakorlatban egy Flash animcit fogunk a weboldalunk tartalmi rszbe illeszteni. l Bontsuk ki a tesson09 mappt a Files panelen, majd dupln a fjln vre kattintva nyissuk meg az index-start. html fjlt! Vlasszuk ki a File > Save As menpontot, majd mentsk el a dokumentumot index. html nven a lesson09 mappba! A legtbb szj t az index. html nevet hasznlja az elsknt megjelentett oldal fjlneveknt. Ez az oldal az utazsi szjt foldala.
H ere andB ackTravel

-
".,
ole
.~)
"41'
Boston's beautlful Realty Park can be on your itinerary

- --
J'LVl'lacellDlder (lOI 11134)
SWI'1'IHellDlder (!IOO 11300)
[I
. ,
WeJcome to Here and Sack ll'avel, home of the personalized and the best ln individual attention to your travel needs .
~inerary
II
3
A Dreamweaver helyrz grafiki bizrostjk a helyet az oldalon a lecke sorn beil1esztend Flash elemeknek. Jelljk ki az SWFPlacehofder helyrz kpet, majd a Delete billenty letsvel trljk ki! Az SWF fjlok nem kpfjlok; a helyrz elem csupn a helyet tartotta fenn a beillesztend tartalomnak. Vlasszuk ki az Imert > Media> SWF menpontot!
Med ia Tabi. Table Objects layout ObjeclS Form Hyperlink Email Link
~
SWF
\:XF
\:X T
FlashPaper FLV ... Shockwave Applet ActiveX Plugin
9
kvetkezt:
Ha megnylt a Select File prbeszdablak, keressk ki benne a DW CIB knyvtrban tallhat movie mappt, majd vlasszuk ki benne a hereandback.swffjlt! Kattintsunk az OK (Windows), illetve a Choose (Macintosh) gombra a fjl kivlasztshoz!
Az Object Tag Accessibility Attributes prbeszdablak Title (Cm) mezjbe rjuk be a Have a great vacation with Here and Back Travel! Kattintsunk az OK gombra!
Megjegyzs: A Dreamweaver Tanfolyam a knyvben web oldalrl a Scripts mappt mr korbban letlfttk a szmtgpnk merevlemezre. Ha egy j oldalra iIIeszfnk be Flash fjlt, ltalban megjelenik egy zenet, amely jelzi, hogya mvelet elvgzsvel a kapcsold
182
swffix_modfied.js s expresslnstall.swf fjl is a Scripts mappba kerl. Ahhoz, hogy egy animci egy l szjton lejtszhat legyen, a Script mappt is fel kell tlfeni a szerverre a kapcsold HTML fjlokkal s a mo vie mappvai egytt. Az animcihoz tartoz SWF fjlok mr rendelkezsre llnak a lesson09 mappban, s ha lben hasznlnnk az oldalt, elbb ezeket a fjlokat is fel kellene tlteni a szerverre.
Tl1l~: j'atatlon wtm Here and ~dc Travell
E "'3
( (
("""
Help
) )
Ir you don'l W~M 10 ente' this InformaUon whtn IMtrtlng objtcts. l y . lhe Aff'uibillty oa"rtncu.
A Drearnweaver beszrja a Flash begyazs hoz szksges kdot, amit Design nzetben egy helyrz elem jell a szerkesztfelleten. A Drearnweaverben kzvetlenl megteki n thet jk a beszrt Flash animci elnzett. 7 Ha szksges, vlasszuk ki a Window> Properties menpontot a Properties panel megjelentshez, majd a panel Play gombjra kattintva tekintsk meg az animci elnzett a Drearnweaverben!
File f /mOYle/hereandbUIUwf
II
"'c l
--------~~
Megjegyzs: Ez az SWF fjl egyszeri lejtszsra van belltva. Bizonyos animcik igny szerint ismtelten lejtszdnak. Az ismtelt lejtszshoz szksges belltst a Properties panelen adhatjuk meg a Loop (Ismtls) lehetsg kivlasztsval. A Loop alaprtelmezett belltsknt is szerepelhet a Properties panelen. Nyugodtan meghagyhatjuk ezt a belltst, az ebben a gyakorlatban hasznlt animci lejtszsa ennek ellenre nem ismtldik.
meg rla, hogy az Autoplay jellngyzet ki van vlasztva a Properties panel en , gy az animci lejtszsa automatikusan megkezddik, amint a bngsz betlti az oldalt. 8 Vlasszuk ki a File > Save menpontot a munknk elmentshez! Az oldalba gyazott forrskd biztostja, hogy az oldal megrekinti a Flash lejtsz legutols verzi6jt hasznljk. Vltsunk t Code nzetre a forrskd megtekintshez! Keressk meg a kvetkez k6dtmbt: < !- - The browser displays the following alternative co ntent for users with Flash Player 6 . 0 and older. -- > <div>< h4 >Con tent on this page requires a newer version of Adobe Flash Player.</h4> <p><a href= http://www.adobe.com/go / getflas hp layer n>< img src ='' http : // www.adobe.com / i mages / shared/downl oad_buttons/ get flash_player.gif n a lt=" Ge t Adobe Fl ash p l ayer " /></a> </p> < /d iv > Ha oldalunk ltogatja a 6.0 verzinl rgebbi Flash lejtszval rendelkezik, a kdtmbben tallhat zenet jelenik meg a lejtszand Flash animci helyett. A megjelen zenetet Code nzetben szerkeszthetjk. A megadott hivatkozst kvetve a ltogat az Adobe download oldalrl letltheti a Flash lejtsz legfrissebb verzijt.
Gyzdjnk
183
10Vltsunk vissza Design nzetbe a Design menpont kivlasztsval! SWF formtum Flash fjlt illesztettnk az oldalba. Az SWF fjlokat alkalmazhatjuk nagyobb oldalrszeken, mint ahogy ebben a gyakorlatban is tettk, vagy egszen kis felleten is, pldul mengombokban vagy cmsorokban. Az SWF fjlok az Adobe Flash CS4 alkalmazsban hozhatk ltre, s egyszeren hozzadhatk egy weboldalhoz a Dreamweaver Insert menje segtsgve\.
Flash elemek begyazsa

A Dreamweaver-felhasznlk szemszgbl a Flash ugyangy az Adobe Dreamweaver CS4 alkalmazsba illeszkedik, ahogyan az elz programverzik esetben. A Dreamweaver CS4 vltozatban azonban jelents forrskd-vltoztatsok trtntek a Flash begyazsra, amelyek eredmnyekppen a Dreamweaver CS4 megfelel az <objeet> elemekre vonatkoz webes szabvnyoknak. A forrskd-vltoztatsok tbbek kztt a kvetkezket foglaljk magukba:
Az elzleg hasznlt, szerzi jogok ltal korltozott begyaz elemek s aktv tartalmi szk.riptek nem lteznek tbb. Helyettk egy <ser ipt> cmke mutat a kt kapcsold fjlra.
Az alkalmazs az <embed> cmke helyett az <object> cmkt hasznlja.

Helyi flashlejtsz-installl program mkdik az Express Installer hasznlatval. Ha hinyzik a Flash lejtsz, vagy nem megfelel verziban tallhat meg, helyettest tartalom jelenik meg az oldalon.
Tovbbi informcirt ltogassunk el a www.a1istapart.comlarticles/Oashembedcagematch/ weboldalra!
Flash vide hozzadsa az oldalhoz

Mivel a Flash lejtsz szinte minden elterjedt bngszben elrhet volt, a Flash vide bevezetse igazi ttrsnek szmtott. Egy csapsra megszntek az inkompatibilis videoformtumok s -Iejtszk ltal okozott gondok s fennakadsok. A Flash lejtsz minden egyes j kiadsval folyamarosan javult avideolejtszs minsge, s ezltal ntt a program elterjedtsge. A Flash vide mra vezet videoformtumm vlt a weben. A videkamerkrl, telefonokrl s ms hordozhat eszkzkrl szrmaz felvtelek FLV fjlokk alakthatk az Adobe Flash CS4 Video Encoder program hasznlatva\. A natv Flash videofjlok FLV kiterjesztsek, s ktflekppen jtszhatk le: Progressive Download (Progresszv letlts) - A vide rvid vrakozs utn kezd ellejtszdni, miutn az els rszletek megrkeztek a bngszhz, s folyamarosan tltdik le a lejtszs ideje alatt. A progresszv letlts FLV fjlokat brmilyen sztenderd webkiszolgln elhelyezhetjk. Streaming - A vide lejtszsa azonnal megkezddik. Ez a md tovbbi elnyket nyjt a progresszv letltssel szemben, ilyen pldul a kereshetsg, ami azt jelenti, hogy a lejtsz mutatjt brhov hzhatjuk: a lejtszs az adott pontra ugorva azonnal folytatdik. A streaming FLV fjlokat azonban egy specilis webkiszolglra kell helyezni, amilyen pldul a Flash Media Server.
Ebben a gyakorlatban progresszv letlts FLV vide t gyazunk az oldalunkba.
184
I 2 3 4
Amennyiben szksges, nyissuk meg jra az index. html fjlt dupln a nevre kattinrva a Files panelen! Jelljk ki az FLVPlaceholder helyrz kpet, majd a Delete billenty letsvel trljk ki! Vlasszuk ki az Insert> Media> FLV menpontot! Amikor megjelenik az Insert FLV prbeszdablak, ellenrizzk, hogy aVideo Tjpe legrdl menben a Progressive Download Video lehetsg legyen kivlaszrva! Kattintsunk a Browse gombra, s keressk ki amovie mappt! Vlasszuk ki a realty-parkjlv fjlt, majd kattintsunk a Choose gomb ra! A Skin (Kezelszervkszlet) legrdl menben vlasszuk ki a Corona Skin 2 elemet! Kapcsoljuk be a Constrain jellngyzetet! A Width mezbe rjunk be 200-at, a Height mezbe pedig 134-et! Kattintsunk az OK gombra! A Corona Skin 2 szlessge illeszkedik az oldalsvban megjelenthet mrethez, s eltnik, illerve eltnik, ha a felhasznl a vide fl helyezi az egrmutatt.
VIMO type : ( ProqrtisM Oownload ViMO
( (
CIt
(,-netl
~
) )
URl.: .. /movie/ruttv...,prtflv
Help
(tmer the rdatlve or .bsoIute Pi-tn of the FlV file)
( --;~r,- - - - - ~
"''''hl:
ConSlr.aln (Delect Size )
1~13".'!.;j"""1 T... , wth skt.: :
Auto play
O ,,",...wt ..
To Ht: U'If vMSeo. preYM:w the Plge ln browser.
- - - - - - - - - - ----- - - - - - - ',:
Az SWF fjlhoz hasonlan a Dreamweaver egy egyedi
szr be, amely sajt Properties panel i belltsokkal rendelkezik. A Flash animcikka! ellenttben azonban a Flash videk el nzete nem tekinthet meg a Dreamweaveren bell, csak a bngszben jelenik meg.
helyrzt
5 Vlasszuk ki a File> Save menpontot a mentshez! Kattintsunk a Live View menpontra, vagy ssk le az FI2 (Windows), illerve az Option+Fl2 (Macintosh) gyorsbillentyt, hogy megtekintsk az oldalt az elsdleges bngsznkben! Ha nem jelennek meg a kezelgombok, helyezzk az egrmutatt az llkp fl! Kattintsunk a Play gombra a vide lejtszsnak ellenrzshez! A hangszr ikonra kattinrva szablyozhatjuk a lejtszott film hangerejt, illerve nmthatjuk el a hangot. Ha befejeztk a megtekintst, kattintsunk jra a Live View menpontra, vagy zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez! Flash vide t adtunk az oldalhoz, amely lehetv teszi, hogy a felhasznl elindthassa s megllthassa a vide lejtszst, illerve ki s bekapcsolhassa a hangot. A vide mrett is meghatroztuk, hogy illeszkedjen az oldalsv ltal megengedett mrethez.
Megjegyzs: A Flash lejtszhoz kapcsold szkriptek mr megtallhatk a Scripts mappnkban. Ha j oldalt hozunk ltre, figyelmeztet zenet jelenik meg, amely jelzi a Flash lejtsz mkdshez szksges, kapcsold fj/ok hozzadsf.
Kezelfellettel rendelkez
185
sszefoglals
sszefoglal krdsek
l 2 3 Milyen teljestmnybeli klnbsg van a ktfajta Flash, az SWF s az FLV kztt? Nevezznk meg kt Flash videoformrumot! Melyik formtum nem ignyli specilis webkiszolgl hasznlatt? Mikor vlik lthatv a helyerrest tartalom a weboldal felhasznli szmra?
sszefoglal vlaszok
l 2 3
Az SWF fjlok automatikusan, szablyozs nlkl jtszdnak le. Az FLV fjlok

tartalmaznak a kp s a hang lejtszsnak szablyozshoz.
kezelfelletet
A kt Flash videoformrum a progresszv letlts s a stream ing. A progresszv let!cs fjlok nem ignyelnek specializlt kiszolglt, a streaming fjlok igen. A helyettest tartalom akkor jelenik meg, ha a felhasznl nem rendelkezik Flash lejtszval, vagy ha a Flash lejtszja elavult verzij.
Hatkonysgnvels
".."
..

'"
i
Home
'.
Italy
Greece About Us
the vacation of a lifn+i ..
Boston's beautifui Realty Park can be on vour itinerary

Welcome to Here and Bad< Travel, home of the personalized itinerary and the best ln individual attention to your travel needs. Pick a destlnation and we'lI make it happen, just the way you dreamed iti
Ebben a leckben megtanuljuk, hogyan dolgozhatunk gyorsabban, s hogyan tudunk egyszerb ben frissteni s hatkonyabban mkdni. Dreamweaver-sablonokat hasznlunk, ismtld elemeket (Library item), valamint szerveroldali begyazsokat (server-side inc1ude).
188
10. LECKE
Hatkonysgnvels
A lecke ttekintse
A kvetkezket fogjuk megtanulni: Sablonok ltrehozsa
Szerkeszthet rgik beszrsa
Sablonon alapul gyermekoldalak ltrehozsa Sablonok s gyermekoldalak frisstse
Library itemek ltrehozsa, beillesztse s frisstse

Szerveroldali begyazsok ltrehozsa, beillesztse s frisstse
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk Je a Lessons mappt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a LessonlO mappt!
Elfoglalt webszerkesztk szmra a Dreamweaver hatkonysgi s szjtkezeli funkcii kiemelten fontosak lehetnek.

Ahhoz, hogy pontosabb elkpzelsnk legyen a dokumentumrl, amit a lecke sorn ltre fogunk hozni, tekintsk meg a befejezett oldalt a bngszben! Ez segt megrteni a lecke feladatainak cljt, br itt mg nem lthatjuk azokat a sznfalak mgtti technikkat, amelyekkel idt s munkt takartunk meg. l 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Amennyiben szksges, ssk le az F8 gyorsbillentyt a Files panel megnyitshoz, majd vlaszszuk ki a szjrlistrl a DW CIB mappt! Nyissuk meg a Iessoni O mappt a Fi/es panelen! Vlasszuk ki az index-finished.html fjlt, majd ssk le az F 12 (Windows), illetve az Option+F 12 (Macintosh) gyorsbillentyt, hogy megjelentsk az elsdleges bngsznkben! A mensv hozzadsval a szjt sszes oldalt befejezett llapotba hozzuk a lecke sorn.

Home
ltaly G<HCe
About Us
" ~''I!
~
~a~'e
the vacafion of a lifetime
&ono"'. beautIfui
Realty Park can be on your ttJner.ry
10
Weloome tlJ Here and SaO:: Tra vel, home of the persooaliled iUnefCIf'Y and the best ln Jndlv ldual attention to your tnlvet needs.
Pk',t; a destinllUon and we'lI make It happen, just the way you
dreamcd Iti
5 Zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez!
189
Sablon ltrehozsa
A Dreamweaver-sablonok olyan mesteroldalak (master page), amelyekbl tovbbi, azokon alapul gyerekoldalak (child page) szrmaztathatk. A sablonok felhasznlhatk arra, hogy ltrehozzunk egy olyan mesteroldalt, amelyben egyes rgik szerkeszthetk, msok nem. Amennyiben csapatban dolgozunk, az oldal tartaImt tbb csapattag is mdosthatja, mg a webszerkeszt tervezi az oldal dizjnjt s az olyan specilis elemeket, amelyeknek vltozatlannak kell maradniuk. Br res oldalbl is ltrehozhat sablon, mgis sokkal praktikusabb s gyakoribb megolds, hogy egy mr ltez oldalt alaktunk t sablonn. A jelenlegi feladat sorn egy mr ltez oldalbl alaktunk ki sablont. l 2 3 Indtsuk el a Dreamweaver alkalmazst! Ha nem lthat a szerkesztablakban, ssk le az F8 gyorsbillentyt a FiLes panel megjelentshez, majd vlasszuk ki a szjdisrrI a OW cm mappt! Bontsuk ki a lessonJO mappt a Fi/es panelen, s dupln a fjlnvre kattintva nyissuk meg a template-start. html fjlt! Egy ltez oldal sablon n alaktsa csupn egy lpsbl ll: sablonknt mentjk el az oldalt. Vlasszuk ki a File> Save as Template (Fjl> Ments sablonknt) menpontot! Specilis termszetk miatt a sablonok sajt mappjukban, a Templates (Sablonok) mappban troldnak. Ezt a mappt a Dreamweaver a szjt gykrknyvtrnak szintjn hozza ltre.
S Amikor megjelenik a Save As Template prbeszdablak, bizonyosodjunk meg arr\, hogy a Site legrdl menben a DW eIB legyen kivlasztva! A Save as mezbe rjuk be a hereandback nevet, a Description (Lers) mezt pedig hagyjuk resen! (Ha azonban egynl tbb sablont hasznlunk egy szjton bel\' hasznos lehet lersokkal elltni ket.) Kattintsunk a Save gombra! Amikor a Oreamweaver rkrdez arra, hogy kvnjuk-e frissteni a hivatkozsokat, vlasszuk a Yes (Igen) gombot!
SIte:
Exlstlng templates:
I DW CIB
(no ttmplates)
jij
E-
( C.neel )
Descnption: [
Help
saw ~S: ".lhe-r.-.n.;.,..b.~cQ,.....--...,1 ...
Br az oldal pontosan ugyangy nz ki, mint ezeltt, a fejlcben, amely most mr tartalmazza a Templat e kifejezst is, szlelhet a vltozs. Ezenkvl a fjl kiterjesztse .dwt, ami szintn a Oreamweaver-sablonok sajtossga.
Megjegyzs: Mivel az j sablont ms helyen trolja a program, mint a fjlt, amelybl szrmaztattuk, fontos, hogy frisstsnk minden - kpekre, egymsba gyazhat stluslapokra, illetve brmely ms hozz tartoz fj/ra vonatkoz - hivatkozst.
10
190
10.LECKE Hatkonysgnvels
Szerkeszthet rgik beillesztse

Amikor sablont hozunk ltre, a Dreamweaver az oldal teljes tartaImt a mesterdizjn rsznek tekinti, s csak akkor engedi szerkeszteni, ha a sablonfjl meg van nyitva. A sablonblltrehowtt gyerekoldalak a mesteroldal pontoS msolatai, tartalmuk azonban zrolt s nem szerkeszthet. Ez rendben van bizonyos ismtld elemek, pldul a navigcis komponensek, logk, elrhetsgek stb. esetben, de meggtolja, hogy egyni tartalmat adjunk az oldalhoz. Ezt gy lehet kikerlni, ha gynevezett szerkeszthet rgikat hatrozunk meg a sablonban. A sablonok egyik elnye tuJajdonkppen az, hogy szmos rgitpust hatrozharunk meg bennk. Egy szerkeszthet rgi automatikusan beillesztdik a <ti tle > elem krl az oldal <head> rszbe, a tbbi rgi t viszont manulisan kell ltrehozni.
l
Amennyiben szksges, nyissuk meg a Templates map pt a Fifes panelen, majd dupla kattintssal nyissuk meg a hereandback.dwt llomnyt! A sablonokhoz hozz lehet frni az Assets alknyvtr Templates kategrijn keresztl is. Kattintssal helyezzk az egrkurwrt a main Content <di v > terletre! Vlasszuk ki az Insert> Template Objects > Editable Region (Beilfeszts > Sablonobjektumok > Szerkeszthet rgi) menpontot!
SPIY
InContext Editing Data Obi..cts
Customize Favorites ...
Repeating Region
Get More ObJects .. .
Editabi. Optional Region Repeating Table
A New Editable Region (j szerkeszthet rgi) prbeszdabjak Name (Nv) mezjbe rjuk a mainContent nevet! Kattintsunk az OK gombra!
~malnConten[
NlIM:
E
(
oa
c-t1
Help
)
) )
this rtgian will bt edItA" in

docUlMnts bued on INI templil.
Minden szerkeszthet rginak kln neve kell, hogy legyen. Ezek a nevek megjelennek az oldalon tallhat fln, ami - a szegly mellett - azonostja a szerkeszthet rgit. Ezt jelzi a mainContent helyrz szveg is. Br nem szksges, de hasznos lehet a ksbbi felhasznlnak, ha kicserljk a helyrz szveget valami olyanra, ami tbb segtsget nyjt az oldal szerkesztshez.
inConten
5 Jelljk ki az j szerkeszthet regin belli tartalmat, s rjuk be a helyre a Heading (Fejlc) szveget! A Properties panel Format (Formtum) legrdl menjt hasznlva lltsuk t a szvegrszt heading 2-re! ssk le az Emert (Windows), illetve a Rerurnt (Maci ntosh), s rjuk be a Content and images go here (Tartalom s kpek helye) szveget!
10
~~--------------------~ . ea.URlJo;
Amikor egy sablon alapjn gyereklapot hozunk ltre, ezek a helyrz emlkeztetk segtenek annak, aki tnyleges tartalmat ad majd az j laphoz, hogy megrtse a szerkeszthet rgi cljt.
191
6 7
Kattintsunk a mensor alatti oldalsv (Sidebar) terletre a beszrsi pont meghatrozshoz! Vlasszuk ki az Insert > Tempfate Objects > Editable Region menpontot!
8 A New Editable Region prbeszdablak Name mezjbe rjuk be reginvknt a sidebarContent (olda/men tarta/ma) nevet! Kattintsunk az OK gombra!
Home
!taly
Greece About Us
~ :-'~~~~:.:-~
..>
de:::;J~O""le'1:
Jelljk ki a helyrz szveget a sidebarContent rgiban, s rjuk be a helyre a Content and images for the side bar go here (Olda/men tarta/mnak s kpeinek helye) szveget!
r---------Home
f - - - --- -- - ---I
!talv
Greece
Content and ImagesI fOd he sidebar o here.
Ha azt szeretnnk, hogy minden oldalnak legyen kln neve a fejlcben , ehhez is szerkeszthet rgi t rendelhetnk. 10 Helyezzk az egrkurwrt a fejlc terletn tallhat Here and Back Trave/ szvegre! Hasznljuk a cmkevlasztt a <hl> cmke kivlasztshoz, hogy az egsz elem a szerkeszthet rgiba kerljn! II Vlasszuk ki az Insert> Tempfate Objects > Editable Region menpontot! 12 A New Editable Region prbeszdablakba rginvknt rjuk be pageName kifejezst! Kattintsunk az OK gombra! Vlasszuk ki a File > Save menpontot!
i:7::.l
,
-. ..... -..-',.:.
,
'
Most mr minden j oldal fejlct meg tudjuk vltoztatni. Jelenleg hrom szerkeszthet rgink van, valamint egy szerkeszthet cmnk, amit szksg esetn meg is tudunk vltoztatni, ha ezt a sablont hasznlva gyerekoldalakat hozunk ltre. A sablon ssze van kapcsolva a stluslapjainkkal s ms hozz tartoz fjlokkal, gy brmely, a fjlban vghezvitt vltozs a sablon alapjn kszlt gyerekoldalakban is bekvetkezik.
A sablonok frisstse
A sablon frisstse agyerekoldalak tartalmt is automatikusan frissti a sablon alapjn. Amennyiben sablonok hasznlatt tervezzk, rdemes a mensort belevenni a sablonba, hogy tfog vltoztatsokat tudjunk vghezvinni a menben. A kvetkezkben megvltoztatjuk a ment, hogy lssuk, hogyan lehet egy sablont frissteni.
10
192
10. LECKE Hatkonysgnvels
l 2
Kattimsunk a Spry Menu Bar: MenuBar 1 flre az oldalsvban a men kijellshez! Vlasszuk ki az About Us elemet a MenuBar l oldalrszhez tartoz Properties panelen! A msodik oszlop feletti pluszjelre (+) kattintva adjunk egy j elemet a menhz! .....,,'"
I.,l""" 'Ir
i ~1
tllllIll!!.ultl~1
( ""'" sr,tn o
..._.
++...... . - I""'''' . ' I c:._. "'"
+-
..
T,lIC jl.l"'!tltd il""

UM; i.
._, i
TilIe r
lr... , ~
IeJ I
I';
3 Jelljk ki az Umitled item elemet a menben, majd rjuk be a helyre az Om Clients nevet! Kattimsunk a Link mez melletti mappa ikonra a fjl megkeresshez! Keressk ki a Lesson10 > ourclients.html fjlt, s kattimsunk az OK (Windows), illetve a Choose (Macimosh) gombra!
-.mu
.e.. )IfII"..,
..""".......,1 ( TIItI'ISrtM'lOf! )
.II
+H;m,
G f(1
.,
+-
c...",
+-
c.."...." ",,"*,
hAlv
n_. -. .
.. II
- r-" Tf~r fM Clillltl UIIII HclOI~I.htftII

Tillt
ICI
f.... ,
r-l
. ...
4 5
Vlasszuk ki a File> Save menpontot! Vlasszuk ki a File> C/ose (Fjl> Bezrs) menpontot!
Ezzelltrehoztunk egy sablont, szerkeszthet rgikat adtunk hozz, s j elemmel frisstettk a sablon mensorr.
Megjegyzs: Amikor frissitnk s elmentnk egy sablont, amelybl gyerekoldal is kszlt, a Oreamweaver rkrdez, hogy akarjuk-e frissteni azokat az oldalakat, amelyek a sablon alapjn kszltek. Amennyiben a frissts mellett dntnk, az sszes gyerekoldal automatikusan frissl. Ha a Don 't Update lehetsget vlasztjuk, a gyerekoldalak frisstst ksbb is elvgezhetjk. Ez akkor lehet hasznos, ha sok vltoztatst kell vghezvinnnk, s csak akkor akarunk frissIteni, ha azokkal is elkszltnk. Ne felejtsk el, hogy ahhoz, hogya vltozsok az l webhelyen is megjelenjenek, a sablonfrissitssel megvltoztatotf oldalakat fel kell tlten nk a kiszolglra! Tipp: Egy msik leheWsg, hogy kivlasztunk egy sablont az Assets panel Template kategrijban, is jobb kattintssal (Windows), illetve a Control+kattints (Macintosh) billenlykombincival kivlasztjuk a New from Template (j oldal a sablon alapjn) lehetsget.
Gyerekoldalak ltrehozsa
A gyerekoldalak a Dreamweaver-sablonok ltnek legfbb okai. Ha mr ltrehoztunk egy gyerekoldalt egy sablon alapjn, a szerkeszthet rgin belli tartalom frissthet lesz, mg az oldal tbbi rsze zrolt marad. Ez a tulajdonsg azonban csak a Dreamweaverben szlelhet . Miutn egy gyerekoldalt publikltak vagy elnzetben megtekintettek, gy jelenik meg, mim brmely ms HTML oldal. A tervezsi folyamat elejn kell eldnteni, ha Dreamweaver-sablonokat szeretnnk hasznlni, gy a szjt minden oldala a sablon gyerekoldalaknt kszlhet el. Ahelyett, hogy visszamenlegesen egsztennk ki a Here and Back Travel eddig ptett szjtjt, ltrehozunk egy pldaoldalt a sablon alapjn.
10
Vlasszuk ki a File> New (Fjl > j) menpontot!
2 A New Document (j dokumentum) prbeszdablakban vlasszuk ki a Page fiom Template (OLdal ltrehozsa sablonb6/) kategrit a bal oldalon tallhat listrl. Bizonyosodjunk meg rla, hogy a Site legrdl menben a DW CIB, a Template for Site 'DW CIB' (A 'DW CIB' szjt sablonja) listban pedig a hereandback van kijellve!
193
3 Amennyiben szksges, vlasszuk ki az Update page when template changes (Oldalfrisstse sablon
megvLtoztatsa esetn) jellngyzeter! Kattintsunk a Create (Ltrehozs) gombra! Az. j oldal a Dreamweaverben nylik meg. Mieltt megvltoztatjuk az oldalt, mentsk el!
4 Vlasszuk kl a File
Save menpontot! A Save As prbeszdablakban keressk kl a lesson10 mappt, s a File name (Fjlnv) mezbe rjuk be a template-exercise.htrnl nevet, majd kattintsunk a Save gombra! Mozgassuk a kurzort az oldalon! Bizonyos terletek, pldul a mensor s alblc zroltak, s nem vltoztathatk meg. A zrolt llapotot jelzi, hogy a kurzor tvlt a nemzetkzi Behajtani tilos! jelre, amely egy piros szegly, piros svval tlsan thzott kr. A szerkeszthet rgik tartalma viszont megvltoztathat.
>
5 Kattintsunk a szerkesztablak cmmezjbe, a Here and Back Travel cm el! rjuk be a cm el

a Test Page (Tesztoldal) klfejezst, majd ssnk az Enter (Windows) vagy a Retum (Macintosh) gombra!
Tnlo: IT.., Page: Horoand Back Travol
ApageName (oldal neve) szerkeszthet rgiban jelljk ki a swveger, s rjuk be a helyre a Test Page (Tesztoldal) cmet!
.~
Test Page
7 8 A main Content rgiban vlasszuk ki a Heading rszt, s rjuk be a helyre a Beautiful New Page (Szp j oldal)!
kvetkezt :
- ...""-.
.--.
'
Nyissuk meg a vacation.txt fjlt dupln a nevre kattintva a Files panelen! Jelljk ki az egsz szveget, majd vlasszuk ki az Edit> Copy (Szerkeszts > Msols) menpontot, aztn a File > C/ose (Fjl> Bezrs) menpontot! A template-exercse.html oldalon jelljk ki a cmsor alatti szveget, s az Edit> Paste (Szerkeszts > Msols) menpont kivlasztsval illesszk be a tartalmat!
eautiful New Page

ome enjoy the ""cation of a lifetime! We do the work and you have he funl Our tour through the hl!! towns of Umbria is unequalled. For
I day, a deliclous bre.kfast and din ner Every
wo weeks, you'lI enjoy worry free pampering .

(w~h
~unCh is on your own. Travel [n air condjtjoned buses on ten
win e) are included.
r onderful day trips to the surrounding beautiful, hlstoric hiH towns. bur luxury hotel accommodations include hot tub, pool, and h earbY by night time entertainment. Your weekend is free to ~chedule as you wish, but your meals are always provided by our _ ""ceHent chefs.
10 Jelljk kl a sidebarContent terleten tallhat szveget! Az. Insert panel Common kategrijban vlasszuk ki az Images menbl az Image elemet! A Select Image Source prbeszdablakban keressk kl az images map pt, s vlasszuk ki benne a cty.jpg fjlt, majd kattintsunk a Choose gombra a kp kivlasztshoz! II Az Image Tag Accessibility Attributes prbeszdablakban tallhat Alternate text mezbe rjuk be a city view szveget, majd kattintsunk az OK gombra! 12 Vlasszuk ki a File> Save menpomot! 13 Kattintsunk a Live View menpontra, vagy tekintsk meg az oldalt a
bngszben!
10
194
Amint lthatjuk, semmi nem utal arra, hogy ez a sablon alapjn kszlt gyerekoldal brmiben klnbzne ms sztenderd weboldalaktl. Brmilyen tartalmat bei lleszthetnk a szerkeszthet rgikba: szveget, kpeket, tblzatokat, Flash videkat s gy tovbb.
Test Page
Home
Italy
Greece
IIJ" ~.....
L
Beautiful New Page

Come enJoy the vacation of a Ufetlmel Wc do the work and you have the funl OUr tour through the 1'1111 towns of Umbria ls unequ8l1ed . For two weekS, you'lI enjoy worry free pamperJng . Every day, a deUdou5 brealdast and dinner (with wlne) are Induded. lunch ls on your own. Travelin air condItioned buse! on
ten wonderful day b1ps to the surrounding beautIfui, hlstotlc 1'1111 towns.
Our luxvry hotel accommodations Indude a hot tub, paol, and nearby by night time entertaInment. Your weekend ls free to schedule as you w/sh, but your meals "re always provided by our
exceJlent chefs .
14 Kattintsunk a Live View menponrra, vagy zrjuk be a weaverhez! Vlasszuk ki a File > Close menponrot!
bngsz t ,
s trjnk vissza a Dream-
Ismtld
elemek (Library)
A Library (Knyvtr) olyan elemek trolsra szolgl, amelyek a HTML jrahasznosthat rszei. Bekezdsek, hivatkozsok, szerzi jogi nyilatkozatok, navigcis svok, tblzatok, kpek, amelyeket egy webhelyen bell gyakran hasznlunk. Hasznlhatunk egy mr ltez oldalelemet, vagy akr j 01 dalrszeket is ltrehozhatunk, s bemsolhatjuk ket a szksges helyre. Ha frisstnk egy knyvtrelemet, a Dreamweaver autOmatikusan frisst minden oldalt, amely az adott knyvtrelemet hasznlja. Az oldalak pillanatokon bell frisstdnek, s ezeket a frisstett oldalakat feltlthetjk a kiszolglra, hogy megjelenjenek az l webhelyen.
10
Knyvtrelemek ltrehozsa
Ebben a feladatban a szjt menjt alaktjuk knyvcrelemm, s hozzadjuk a szjt minden oldalhoz. l Bonrsuk ki a lessoni O mappt a Fi/es panelen, s dupla kattintssal nyissuk meg a naxos.html fjlt!
195
2 3
Kattintsunk aSplit gomb ra, hogy Code and Design nzetben dolgozhassunk! Helyezzk az egrkurzort a szerkesztablakban a MenuBarI oldalrszen bell! A cmkevlaszt segtsgvel vlasszuk ki az <ul . MenuBarVertica l #MenuBarl > cmkt! Code nzetben ellenrizzk, hogy a mensor kezd <ul > cmkjtl a zr <I ul > cmkig mindent kijelltnk! Vlasszuk ki a ModifY > Library > Add Object to Library (Mdosts> Knyvtr> Objektum knyvtrhoz adsa) menpontot! Ekkor a kvetkez figyelmeztets jelenik meg: This selectio n may not look the same when placed in other documents, because the Style Sheet information is not copied with it. " CE/kpzelhet, hogy a kivlasztott rsz ms dokumentumba illesztve mskpp fog megjelenni, mivel a stluslapra vonatkoz informci nincs tmsolva.) Kattintsunk az OK gombra!
,-(.-,
C!j )U "'.(." . .
~O>
.I'IU.~
,",. ,
< )'0 ..... f '\II&Ir ht.tXIIIor.e</oH !lI ) .,

<1,>(:1 10".'''-_ _ "" "'r.I">t-ecrtot t<lu< ) !l..
<I' X " .. I_"-.......... t~ .... , ...--</11>
(III >
w O>
ClI !!-
_t-....-.....
l~1'Io)(/II'
Charrning Naxos
-f"'l ... -Home
The essential Greek
Italv
Greece
A Dreamweaver ltrehoz egy mappt a szjt gykrknyvtrnak a szintjn Library elnevezssel, ahol a knyvtrelemek troldnak. Ezt a mappt nem szksges feltlreni a szerverre. A knyvtrelemekkel az Assets panelen tudunk dolgozni. 5 Amennyiben szksges, vlasszuk ki a Window > Assets menpontot! Amikor megnylik az Assets panel, adjuk meg a menubar nevet az j knyvtrelem neveknt!
' "" ' Aueu I SrMppeu
~ ~
UIH",
,~JlII
11
1;)
~
'I ""
"'J.~rt
HIlIM !lili Umbria

o)
..,
SlZ! j ...
1
I
.bar
IKB
".
Je
Megjegyzs: A knyvtrelemek HTML kdknt troldnak a Knyvtrban. A CSS formzs tl le vlasztva a men az Assets panelben formzatlanul jelenik meg. Aggodalomra azonban nincs ok, mert amikor az elemet beillesztjk a megfelel stluslaphoz trstott oldalba, a formzs jra lthafv vlik.
Egy Update Fi/es prbeszdablak jelenik meg. Kattintsunk az Update gomb ra! A szerkesztablak Code nzetben keressk meg az j knyvtrelemre vonatkoz cmkket, amelyek most mr tartalmazzk a mensvot kpez listt! A kezd cmke:
< !-- #BeginLibraryltem " / Libra ry/menubar. l bi" -- >
10
A zr cmke:
< !-- #EndLibraryltem -->
196
..
.
~.
.,
cl
27
<dl.., 1d-QOt\ toi ..... ,.. )
~
30 32 33 34 3:5 36 37
31
<dl ... Idoo"Mor">

<h l ~ i no Noxos <,ihl) (! 001d .~ -><! d lv)
<dl .., Id-sl dMx!rI")(I-- -a.,g l nL ibrory I t .. "J\.ib,"or\,t"ubcr.lbi " -Hul IcP"I14InuBcr'" c
<11>(0 href." lndex,ht.t" )Ho.e</ o }</II)

( 11)(0 hre( .. cLos."t1riuBcrLt ..S-t
( ul )
1l.I")lto l y<!o)
...
<I 1><0 </ul >
hr.(. ~ l a.ht~L )u.brla</a></ II >
'"
,.
3.
</u>
<11><0
cIQSs ~nu8orlt..
Subaanu hr.(.. >Greec.</o>
( ul>
Greece
About Us
Knyvtrelem beillesztse
Egy lapon bell brhov beilleszthetnk Library itemeket. Idt s munkt takartunk meg ltaluk, mivel ugyanazt a kdot tbb helyen is hasznl hatj uk, s mindet egyetlen mvelet vgrehajtsval frissthetjk. l Bontsuk ki a lessoni O map pt a Fi/es panelen, s dupla kattintssal nyissuk meg benne a santorini. html fjlt!
See Santorin
Home
.~
Umbria
. Greece
Santorini Naxos About Us Contact
2 3
Kattintsunk az oldalsv tetejn tallhat, frfit s nt brzol kp bal oldalra!
Az Assets panel en bell vlasszuk ki a Library elemet, majd a menubar knyvtrelemet, s azAssets
panel bal als sarkban kattintsunk az Insert gombra!
A men formzatlan listaknt jelenik meg. Figyeljk meg a srga htteret, ez jelzi szmunkra, hogy knyvtrelemrl van sz. Ezzel beillesztettnk egy knyvtrelemet a lapba. Ha a knyvtrelem szveg lenne - pldul egy szerzi jogi nyilatkozat - vagy egy kp, ezen bell is esetleg egy log, akkor most vgeztnk volna a folyamattal. Ebben az esetben awnban a knyvrrelem egy Spry eszkz, ezrt tovbbi lpseket kell tennnk, amelyek egybknt nem lennnek szksgesek, ha nem Spry eszkzrl lenne sz.
sszekts kapcsold fjlokkal
10
Amint ezt mr tudjuk, a Spry eszkzk nem mkdnek, ha nincsenek sszekapcsolva egy-egy, a SpryAssets mappban trolt CSS fjJlal s ]avaScript fjllal. Egy harmadik elemre is szksg van Spry eszkzk esetben. Annak az oldalnak az aljn, amelyben eredetileg ltrehoztuk a Spry mensvot (naxos.html), van egy kd rsz, amely a santorini.html oldalon nincsen jelen. Ebben a gyakorlatban mindezt a knyvrrelem segtsgve! hozzuk mkdsbe.
197
1 Hagyjuk nyitva a santorini.html oldalt, s a CSS Styles panelen kattintsunk az Attach Style Sheet ikonra (_)! 2 Amikor a Select Style Sheet File prbeszdablak megjelenik, kattintsunk a Browse gambra! A Select Style Sheet File prbeszdablakban vlasszuk ki a SpryAssets > SpryMenuBarVertical.css menpontot! Kattintsunk a Choose gombra!
r;"",'~~ ~;~"""",--",,", ,,~,. ~", ~~.
..
..,
c -'".
'
! .. ' ~ l !:: i g
T DMQS
~D4
!
~
SpryA...ts
... SpryMenuBar.js
tt-4 C s rch o.
~ lOI.k
nons.tf
Ni,lnfO... @ vu... :!!

TPLACES
rtes
~ SpryMenuBarDown.glf ~ SpryMenuB .. .nHover.glf SpryMenuBarRight .gif ~ SpryMenuB ... tHover.gif
II Do.k'op
?I_ka.... .
URL.: . /SpryA$sC!u/SpryMl!nuBarVerucaLcu
(i! "'9lnl l
-----fO<!
"
Rel_ ,o:
( Doc_n,
Chinge defiUh lint RtJitM To itllhe stte dtlWllon.
Select ftle name from:
o." Sources._
) ( Server... ~ (
"Ie R... )
( caneel )
8'-'
3 Az Attach External Style Sheet ablakban vlasszuk ki a Link lehetsget az Add as opcik kzl, a Media legrdl menben pedig vlasszuk ki a screen lehetsget! Kattintsunk az OK gombra! A men formzott llapotban jelenik meg a Design nzetben, de mg nem mkdkpes .
.
.....
File/URl: 1 /sP'Y~sets/SpryMenUBarVerticaL l ..
Add as:
@l (
Browse ..
( ( (
OK
Preview Caneel
S link
o Import
) )
Media:
Iscreen
typ .. ,
I@J
(
Help
You may al50 enter i. comma- separated list of media Dreamweaver has Simple style sbeatl to get you started.
Amennyiben szksges, kattintsunk aSplit gombra a Code and Design nzet megjelentshez! A Code nzetben keressk meg a <scrip t> s a <link > cmkt a dokumentum <head> rszben! Kattintssal helyezznk el egy beillesztsi pontot az utols <script > cmke utn!
Tipp: rdemes kls helyen tro/ni a szjt Java Script fjljail. Amikor egy szkriptet ktnk ssze egy 0/dalla/, ahogy azt most is tesszk, fontos, hogya szkript hivatkozst beillesszk a dokumentum
<head> rszbe,
ssnk az Enter (Windows), illetve a Retum (Macintosh) gombra, hogy j vonalat hozzunk ltre abeillesztsi pontnl!
~.
$:
l>
o 't
2.
27 28
20 21 2'2 23 24 25
ll..
(I
l6r"ld1
t - -)
<I I ....... Ilr"4tf "~ ",, 5tyl o!:s . c"s~ re l.- s tyl u hU.t" t!JPe." t e x t/c:s.- /> ( t l nk hr. f .- pr int .C1is " rol ." s t y le. hae t " tIJPOloO- t lllx t / CSS" l!:ediCl" - pr ln t " /> <R::d p t st"c"' - .. /Spr ~s_ts /Spr"'T oo l t i p. js t ~~ t~t /jClvClScript >(/ser lpt > <sa-I p t s r c"- . . / SpN,pA ... ts /SpryAccord l on . } s typ" - tex t l j o\loscr' pt ></scr ip t>
( link tw-e f " ' . /Spr ~I". ts/S pryT oo I t IP . c!:$" rel ."s t yl _ heet " t~ .. t ex t /C:S5 '" I> ( l I!'ik hr e ' .- . /Sp~S.t:l/Spt'vRccordlOl'l.CSii" r .. I ""styleshftet " typ . .. ~ t /cu h ( l I Ni, hrQ f- , ./SprvAs ... tIl/SPf'~lU6or"""ertjC(]l.c" re l."s ty lesr... t " t1p6-*'" tex t /c 1Md1(:ls
10
</rI. od>
20
198
Vlasszuk ki az Insert > HTML > Script Objects > Script (Beilleszts> HTML > Szkript objektumok > Szkript) menpontot!
Recent Snlppets Spry InContexl Editing Tags Special Characters
Megjelenik a Script prbeszdablak. A mappa ikonra kattintva keressk meg a fjlt!
8 A Select File prbeszdablakban vlasszuk a SpryAssets > SpryMenuBar.js menponrot! Kattintsunk a Choose gombra!
1 . , ~ I~~~~~~;:~S.= S~ ~ b====~~=;~~~~~~~__~
Y O[VICES
@:l 'Disk
. "'Into...
Ei! \/EL ..
PlAClS
~ Ylrglnla
mSpryOata.Js mSpryEffects,J'
f---=.'1....
'\'t SpryAttordion ,js
IID..k....
lAt_luCI ,. ;
UItL:
SpryMenu8arOown.glf ,. .. ~ SpryM~nuB ...nHover,glf ... ti SpryMenuBarRlght .glf il
( Pat ............ )
"
_/Spry~KU /SpryMt:n ll krJ s.

&antorl"' ~ft nl stMd ,html
Solect III...... from:
( o... Source ....
) ( SO ....r... ) ( SI.. Root )
( Caneel)
(a-)
9 A Script prbeszdablak bezrshoz kattintsunk az OK gombra! 10 j script cmke jelenik meg a <head> rszben abeillesztsi ponmI. Ne zavarjon meg bennnket, hogy ms script cmkktl e1tren itt a type attribtum van ell, az sre attribtum pedig a msodik helyen. Az attribtumok sorrendje nem befolysolja a mkdsr.
!if
,.
2' 22 23 24
20
<link ~f~ lMJstvl " . a. w ,,* I. s tyleshtlet w tl"lP8 . .. t.xt/e ....

( l ink hr. 1."pt- I nt. cu
,....1 "s bJ t elheet~ t~
I>
<>
cl
2.
27
telolt !c:.ss -.<I io. " p" Int " /> <s cript vc"''' .. / Spr..,As-uts/Spr4.jTco l t i p.j s " ~\jpe. te)( t / jovaSoQr l pt .. > </scr Ip H <scrl pt s r c .. " . . /$prV\ssett./Spry\ccord Ion .Js ~ .. tax t / Jovoscr lpt" H/. crlpt> <scr" I P t t \jp. .. tex t / J r:rIO~cr Ipt" . r c .. ... .. /Spr-\Jb.. ts /Spry1enuBOt"' . Js" ></l c" i pt > <l ink. hMt f . /SprlJAu e t./sp!"\lToottlp.css " . \".t\ll ..r..t" t~. " t.)(t/css I> <I i!"lk hr' . f ~ . . ~ t ./SpryAcC'Ordi()(l. d :l "el st",l . .heet tvP-" te)(t/~s I> <l ink 1'Ir.( /Spn.fI.... t.~t l c:al. ~s .. ral .... t"' I h t t IJPP texl/c: - ,..d i
't
,/hood>
2.
I
11 Vlasszuk ki a File> Save menpontot!
Az oldal hoz ktttk a kt kapcsold fjlt, amelyek a Spry eszkzt mkdtetik.
10
Minden alkalommal, ha j oldalhoz adjuk hozz a mensor Library itemjt, jra meg kell tennnk ezeket a lpseke r. Ha a Library item nem egy Spry eszkz - hanem pldul egy szjt lersa a fejlcben vagy egy titoktartsi nyilatkozat alblcben -, nem szksges sszektnnk a kapcsold fjlokkal . Mr csak egy lps van htra, hogy mkdsre brjuk a Spry eszkzt knyvrrelemknt is. Mieltt megvltoztarnnk a knyvtrelemet, minden oldalhoz hozzadhatjuk.
199
A nlen hozzadsa
A Here and Back Travel szjt tbb oldalnak mg mindig nincsen menje. A kvetkez lpsekkel teljess tehetjk az oldalon a navigcit. l 2 3 4 5 Bontsuk ki a lessonlO mappt a FiLes panelen! Dupla kattintssal nyissuk meg a contact. html fjlt! Kattintsunk az oldalsv brmely tartalma el, hogy beillesztsi pontot hatrozzunk meg! Kattintsunk az Assets flre! Ha szksges, kattintsunk a knyv ikonra az Assets panel bal oldaln, hogy lthatv vljanak a knyvrrelemek! Vlasszuk ki a menubar knyvtrelemet! Kattintsunk az Insert gombra az Assets panel bal als sarkban! Sokfle knyvrrelern esetben a 4. lps elvgzsvel mr az oldalhoz is adtuk volna az elemet. Ez azonban nem elegend abban az esetben, ha a knyvtrelem Spry eszkz hozzadsra szolgl. Ismteljk meg az OsszekiJts kapcsold fjlokkal rszben lertakat ahhoz, hogy a SpryMenuBarVerticaL.css s a SpryMenuBar.js fjlhoz tartoz hivatkozsokat adjunk az oldal <he ad> rszhez! Ismteljk meg a 2-5. lpseket a kvetkez fjlok esetben is: forrn-processing.html, index. html, ourc!ients.html, s umbria.html. Ha a dokumentum <head> rsze nem tartalmaz <sc ript> elemeket, ahogy a form-processing.html esetben is, akkor az j szkriptelemet a stluslapokhoz tartoz utols <l ink> elem utn adjuk hozz!
Knyvtrelemek frisstse
A sablonok, Library itemek s kiszolgloldal i begyazsok ltnek egyetlen oka van: hogy egyszerb b tegyk a weboldalak tartalmnak frisstst. Frisstsk most a menubar knyvtrelemet! l Amennyiben szksges, dupla kattintssal nyissuk meg a naxos.html fjlt a LessonlO mappban! Spry eszkzk mkdshez szksg van a kapcsold CSS s JavaScript fjlokra, amelyekkel mr a 3. lecke ta dolgozunk. Ezeken kvl mg egy harmadik elemre is szksg van, ez pedig egy kdtmb, amelynekjavaScript operator a neve. ltalban az oldallegaljhoz addik hozz, de a jelenlegi feladatban (azrt, hogy mkdjn a men azokon az oldalakon, amelyekhez hozzadtuk) ezt a kdtmbt t fogjuk helyezni a knyvtrelembe. Kattintsunk a Code gombra a forrskd megjelentshez! blokkot. 4 Jelljk ki az egsz blokkot a nyit <s c ript > cmktl a zr </ script > cmkig!
3 Grgessk az oldalt a lap aljra! Krlbell a 83-87. sor krnykn lrni fogunk egy <sc ri pt >
,.!i"....i.f. ~. .,
. .,
82 83 86
fY'II/Jtyles.us
. - . ..
print.cu
"r' - -
SpryMtnu&..r Js
SpryMenu8.J.rVenlur.cu
fOO(tr.html
(!-- .nel "COI"It'Ill,.- - )

</dl v )
~ t ~t6..t7j""<l"fii."> -------------_.....J '

t
<> D
.7 .. es
60 .a
80
"*
5
10
Vlasszuk ki az Edit> Cut (Szerkeszts> Kivgs) menponrot, amivel eltvoltjuk a szveget az oldalrl s a vglapra helyezzk!
200
6 7
Kattinrsunk a Design gombra a Design nzethez val visszatrshez! A szerkesztablakban vlasszuk ki a menubar knyvtrelemet!
8 A Library item Properties-paneljben kattinrsunk az Open (Megnyits) gombra!

PROPtRTIES
Sre IlIbrary/menu~r Jbl
( Open )
[ Otch from orlglnaJ

( Recre..e
l
)
Amikor megnyitunk s szerkesztnk egy knyvtrelemet a Properties panelben, akkor egyttal a szjt sszes oldalba illesztett elfordulst is szerkesztjk az adott knyvtrelemnek.
9 Amikor megnylik a Library item, kattintsunk a Code gombra a forrskd megjelentshez!

10 Keressk meg a kd utols sort, s kattinrsunk oda a beilleszts i ponr meghatrozshoz! II Vlasszuk ki az Edit> Paste menpontot, hogy a kdblokkot bemsoljuk a knyvtrelembe! 12 Vlasszuk ki a File> Save menponrot! Kattinrsunk az Update Library items (Knyvtrelemek frisstse) prbeszdablakban tallhat Update (Frissts) gombra! A Dreamweaver mzi azokat a fjlokat, amelyek a Library item mensort hasznljk, s jelzi, amikor kszen ll a frisstsseL A Close menponttal zrjuk be a dokumenrumot! 13 Kattinrsunk az x-re a menubar.lbi fln, vagy vlasszuk ki a File> Close menponrot, hogy bezrjuk a knyvtrelemet! A knyvtrelemnek a szjt brmely oldalhoz hozzadott brmely msolata automatikusan tkrzi a vltoztatsokat. A mensv knyvrrelemnek minden oldalon, amihez hozz van adva, megfelelen ken mkdnie. 14 Vlasszuk ki az index.htmlfjlt a Fi/es panelben, s az FI2 (Windows), illetve az Option+FI2 (Macintosh) gyorsbillenty letsvel jelentsk meg a dokumenrum elnzett az elsdleges
bngsznkben!

Home
,.' ' '"
Boston'. beautlful
Realty Park can be on
your itln.rary

Weloome to Here and Bad<: Travel, home of the personalIzeCI ttlnerary and the best Jn lndivldual 2Ittentlon to your travel needs . Pick a destlnation and we'lI make It happen, just the way you
dreamed [ti
H~re aM 1Mti( Tr,)V'I'l t:l JCOS, AJ, R ,ht! ~rved
CeNltct 1.'J,
Tc;ephOf'\C
~C;">: ~S'i
.,
./J _
...,.
SSS5
15 A mensort hasznlva ellenrzs cljbllpegessnk egyik oldalrl a msikra!
10
16 Zrjuk be a bngszt, s trjnk vissza a Dreamweaverhez! A Library itemek segtsgvel frisstseket hajtottunk vgre az egsz szjtra vonatkozan. Lthatjuk, hogy a Library itemek s sablonok segtsgve! vgrehajtOtt frisstsekkel sok idt takarthatunk meg, ha egy nagy szjton dolgozunk. A Dreamweaver mg egy hatko nysgnvel trkkt tartogat szmunkra: ez a szerveroldali begyazsok hasznlata.
201
A szerveroldali begyazsok hasznlata

A szerveroldali begyazsok nhny tekintetben hasonltanak a knyvtrelemekre. jrahasznosthat HTML kdrszek - bekezdsek, linkek, szerzi jogi nyilatkozatok, navigcis svok, tblzatok, kpek stb. -, amelyeket gyakran hasznlunk. Ltrehozunk egy begyazand fjlt, s hozzadunk egy begyazs i parancsot egy oldalhoz, amely beilleszti a kijellt helyre a HTML kdrszletet. Ez mind a kiszolgln trtnik, s ez jelenti a kulcsfontossg klnbsget a sablonok, knyvtrelemek, valamint a szerveroldal i begyazsok kztt. A szerveroldal i begyazs a kiswlglra kerl fel, s a kiswlgln illesztdik az oldalba. Ha megvltoztatunk egy szerveroldali begyazs t, nem kell feltltennk az azt hasznl oldalakat, elegend csak magt a begyazandoldalt. Ami a hatkonysgot illeti, akiszolgloldali begyazsok hasznlata a leghatkonyabb s leggyorsabb mdja annak, hogy jrahasznlhat HTML kdrszleteket adjunk nagyszm oldalhoz. Gyorsabb s knnyebb velk dolgozni, mint akr a sablonokkal, akr a Library itemekkel. Csak egyetlen fjlt (az indude, vagyis a begyazsi fjlt) kell frissteni, s csak egy feltltst kell e1vgemi a fjl megvltoztatsakor. Ebben a feladatban egy begyazsi fjlt hozunk ltre, s a szjton tallhat sszes oldalhoz hozzadjuk.
Tipp: A legtbb kiszolgl alkalmas szerveroldali begyazsok hasznlatra, ugyanakkor kiszolglnknt lehetnek klnbsgek abban, hogy milyen kvnalmak rvnyesek a ltrehozsukra vonatkozan. Mindenkppen olvassuk el a szolgltat cgnk ltal megadott utastsokat, hogyakiszolglnknak megfelelen tudjunk ltrehozn szerveroldali begyazsokat!
Szerveroldali begyazsok ltrehozsa

A szerveroldal i begyazs egy HTML kd rsz, de a begyazst ltrehoz kdrszlet kivtelvel minden ms elem hinyzik belle. l Vlasszuk ki a File > New menpontot! Vlasszuk ki a Blank Page (ares oldal) lehetsget, majd a Page Type (Olda/tpus) listbl vlasszuk a HTML elemet, a Layout listrl pedig a <none> opci t! Kattintsunk a Create gombra!
.....
'w
~\. I!...M
hge Type:
uyo",:
~J
1-= ~:;:r-----r1 ("11<...-:-:-" j ....".,--I-ITMl templl'e Ubrary Ittm

XSlT(Emire page)
- --
---,-,
XSLT (frlljlment) .
!~'IiIO. Page from Templl,e
..... Aaiaft5(rlpt
'!l!ll CSS
Page from Simple
iii
~ Ja...aSo::ript
XM L
I
'-Il
~ ASP JavaSuipt
451' VB',;"", ASP..NfTCI ASP .NET VB
ColdFusion Co!dFuslon tompontnl
"
1 column elutk. ctnleted l column elUlic, cl!nlered, huder and ~ l column flxed., ntued l column find, ccntertd. header arKi ' l column liquld, ctntered l colomn IIquld. ctnter~d. ltu6er and f 2 column ela.stlc. I~ft ~Ideb.lr 2 column tlUUc, leh sldtbu. Itudtr i2 column el.Jstlc. righl sl(fenar 2 column tJ.sUe, rlgltt srd~b.1r, header 2 column fI)C ed, left sldeb.lr 2 co/u/I"n fi)Ced, left sldthar, hNder art 2 column t/)(ed, riliJhl sJdenar 2 column fixed. rlght sidebar, Mader l;
2 colomn hybrid. Itft sldeb.lr
<No prevlew>
HTMl documtnt
JSP
H
PHP
2 column hybrld, leh ~Idtba,. header .. 2 column hybrid, righl sldeb.lr 2 column hybrid. right sldebilr, he ader
OocTvpe:
L.ayout CSS:
t XHTML LD Transr'lon.1ll !ij

Add la Hud
I
2 tolumn Ifquld. left side bar
t===:=,,==:::::J Ii:,'"m, "'~

( ""p ) (
2 column IIquld, left sldtbar, header afl 2 column I!Quld, (Iqht side bar ~
==~~-----~'1,
I
Amch CSS nit:
t}
10
1d<1>a!".~~ftlE
.,.f.,.nm... )
Ct' mgr. cont,nt
Cane.t
er..
202
2 3
Hagyjuk nyitva az res dokumentumot! Bontsuk ki a lessonJO map pt a Fi/es panelen, s dupln a nevre kattintva nyissuk meg a naxos.html fjlt! Karrintsunk a lb lc szvegbe! Hogy biztosan az egsz kdot kijelljk, a cmkevlasztban vlasszuk ki a <p > cmkt, majd az Edit> Copy menpontot! Hagyjuk nyitva ezt az oldalt!
4 5
Kattintsunk a nvtelen dokumentumot jelz flre, hogy visszatrjnk az j , res oldalra! Vlasszuk ki az Edit > Paste menpontot! Ez a szveg mr kszen ll begyazs ltrehozsra, de hozzadhatunk mg valamit, mieltt elmentjk, hogy megklnbztessk az elz szvegrsztl a lblcben, s hozzadskor lssuk a klnbsget. Kattintsunk a Travel sz urn a beilleszts i pont meghatrozshoz!
6 7
Az Imert panel Text kategrijnak Characters Uelek) legrdl menjbl vlasszuk ki a Copyright (Szerzi jog) elemet! A szerzi jog jele megjelenik a dokumentumunkban.
line Break (Shlft + Ent.,) Non-Breaklng Space " left Quot. " Rlght Quot.
- Em Oash - En Oash
E. Pound Euro
~Yen
A szerzi jog jele utn ssnk szkzt, majd rjuk be a kvetkezt: 2010, AlI Rights Reserved. (Vagy az ppen aktulis vet.) Kiemelten fontos, hogy a kdban ne maradjon <h trni > vagy <b ody> cmke. Ne felejtsk el, hogy itt nem egy oldalrl van sz, hanem csupn egy kdrszletrl, amit majd beillesztnk egy oldalba! Kattintsunk aSplit gombra a Code and Design nzet megjelentshez! A Code nzetben trljk ki az sszes oldalelemet, kivve azt a kt sornyi szvege t, amely Design nzetben is megjelenik!
ct
2 3
(p >+ier-e and 80ck Tl"'av el
~ zeee, RlI Rlo;tJt s < href.-eontoc:t.h tal-)Contoct Us </g )(/p ) o
Ruvved <br'
I>
Here aJX1 &ck Tra",\ (:I 2008, AlI R.gb1s R.esetved
10
10 Vlasszuk ki a File> Save menpontot! A Save As mezbe rjuk be a footer.htro1 nevet! Bizonyosodjunk meg rla, hogy az erre a clra ksztett lessonJ O > inc/udes mappba mentjk el a fjlt! Kattintsunk a Save gombra!
203
'1.T'i'.-..~~~.~ ~;-~r"'7"~
-''''I ........
SaV!
As: footedhtml
I
~ ~ s.a rch
_-
I ... I I> ) I:: Ili I_ I (1iii ncludes

., DEVlCE$
.l
t i _o ... ~ --. ~
., PlAClS
ft iDl
aD...,,,,,
A_lati"
, ( Si Root )
m ~rgl"l. r;:
j-
"
I C (Canonlcolll",,-sition. 1011_ by Cononlcal c..noo- lt4
( Caneel)
Unicode NormaliutIon Form:
O ,"dudl! Unkode 51gnature (10M)

( New Folder )
( sen )
II Vlasszuk ki a File> Close menpontot! Hagyjuk nyitva a naxos.html fjlt a kvetkez gyakorlathoz!
Megjegyzs: Egy vals szituciban az includes alknyvtr feltehetleg lenne, nem pedig egyalmappban, mint a jelen gyakorlat esetben.
a szjt gykrknyvtrban
Szerveroldali begyazsok beillesztse

l web hely esetben az include mappt feltltennk a kiszolglra brmely HTML kdrszlettel egytt, amit tartalmaz. Egy egyszer begyazsi parancs a szjt brmely oldalnak kdjban jelzi a kiszolgl fel, hogy illessze be a kijellt helyre a megadott HTML kdrszletet. A begyazsi parancs gy nz ki:
< !- - tin c lude fi le=includes/footer.html - - >
Lthatjuk, hogy egy include parancsbl, valamine abegyazand fjira val hivatkozsbl ll. A begyazsi parancsokon belllehemek klnbsgek attl hlggen, hogy Apache- vagy Windows-alap kiszolglt hasznlunk, valamint, hogy milyen fjlkiterjesztst alkalmazunk a begyazsi fjlhoz. Ebben a feladatban a .html formtumot alkalmazzuk, de az .inc, .txt s .shtml kiterjesztsek is gyakoriak.
Mieltt nekilmnk a feladamak, bizonyosodjunk meg rla, hogy a Dreamweaver Preferences (Bell-
tsok) menpontja gy van belltva, hogy Design nzetben megjelentse a begyazott fjlt!
Vlasszuk ki az Edit> Preferences (Windows), illetve a Dreamweaver > Preferences (Macintosh) menponeot!
2 A Category (Kategria) listbl vlasszuk ki az Jnvisible Elements (Lthatatlan elemek) menpontot! Ellenrizzk, hogy a Show Contents ofJncluded File (BegyazottJji tartalmnak megjelentse) opci legyen kivlasztva a Server-Side includes (Szerveroldali begyazsok) menponml! Kattintsunk az OK gombra!
10
204
,.,
,::.G ...;,-; --...-.., ,;:; rat .:::
Acc.esslbility AP EJemenu. Code Colorin9
Category
I"vblble Elements
-------------------------. b ,' if ",y

Show:
o ':al
O
Named anchors
Scripts
:"
Code formai
Code Hints. Code Rewrltlng
I:) Co..... nts

Line brew
Copy/Paste CSS StyI'e s

Ale Campare Flle Types I EditOfl Fonls HlahlloMlng
O!l O
~ 1)
ellent-Side Im~ie maps. Embedded 'tyi ..

Hkiden form flelds
4
O O
,-bMoII>
Site
New Oocument
Preview ln Browser
I Status Bar Validator
~ qJ form del1mlter ~ Anchor polnu for AP eJements ~ ARcnor polnts for alignflS eleme"" @ iSI VlsuaJ ~rver Mirkup Tags tASP.CFMl ...)
O ~ NonvlsuaJ Server Markup Tags (ASP, CFMl .. J O ~ CSSdi'p1oy' non. Show dvnamk text as: l t'RecOfdset.F'teW, ...
Strwr-Side Indudu:
I!f SbowContents of Included Rle
Heip )
( Cani )
E!3
A begyazott fjl lthat Design nzetben s a Live nzetben is. Elkpzelhet azonban, hogy a bngsz nem jelenti meg addig, amg mg a helyi meghajtnkon tallhat. A fjlt fel kell tlteni egy olyan kiszolglra, amely be van lltva bngszben megjelentend kiszolgloldali begyazsokkal vgzend munkra . . Tipp: Szmos modern szemlyi szmtgpet be lehet lltani gy, hogy olyan tesztkszolglknt m
kdjn, amely teszte/si clbl megjelenti a szerveroldali begyazsokat. Ha tbbet szeretnnk megtudni arrl, hogy hogyan kell tesztkiszolglt belltani, nzzk meg a Dreamweaver Sgt, vagy ltogassunk el a http://help.adobe.com/en_US/ Dreamweaver/10.0_Using/ weboldalra! Kattintssal bontsuk ki a Workng with Dreamweaver sites> Setting up a Dreamweaver site menpontot, s olvassuk el a Set up a testing server cm oldalt!
Most pedig a Dreamweaver hasznlatval szrjunk be egy begyazsi parancsot az oldalba! 3 A naxos.htm! fjllblcben trljk ki a teljes <p > bekezdst, amit az elz feladatban bemsoltunk! 4 Vlasszuk ki az Insert> Server-Side Include (Beszrds> Szerveroldali begyazs) menpontot!
Tag... Image
Imag~
XE -eXI Objects
~
~
Media Tabi. Table Object5 Layout ObJects Form Hyperlink Email Link Named Anchor Date
-eXT
~
~
-eXA
10
5 A Select File (Fj! kiv!asztdsa) prbeszdablakban keressk meg a lessonlO > includes mappt! Vlasszuk ki a footer.html fj Ir, s kattintsunk a Choose gombra! Design nzetben lthatjuk a begyazott kdrszletet a lblcben. Code nzetben csak a begyazsi parancs lrhat.
205
A knyvtrelemekkel ellenttben a kdrszlet nem addik hozz az oldalhoz a Dreamweaverben, hanem a kiszolglra kerl fel. A Dreamweaverben lv kdban csupn a begyazs i parancs lthat.
[ ~ j .. I j ::
DEVICES
52
kIl!
~ Jooter.lHOlI
~~~==~==~~
.,....--- - -
inc\udes
'ij
a. ar ch
~ 100sk
Mldnto...
...
TPlAClS
D Dtsl,op
HTML
?ll ",,,,I,otL.
URl: lincludeslfooter.html
1%1 "''VIol.
"
... "nos.html
"
( ParafMters ... )
. RelatiVe to: ( Oocumtnt
OI.ngf ~rau h Unk Rfl~liYt To $n UI. site dmNtfon.
~.
~d
,i.
" 72
75
'3
I (h3>&rQ,;p; <th3> <ldl",,)
( 1-- lh i 5 cteQ' in9

lloots:
O
O
- - ><bri d. ~
" '5 "
<d lv
footer- >
~ I~t shoul d cI Cl'$S1I ~ctE!Ql"'f l oat /)
1..ad1 9t.1~
fol la.
~ ~lnCon tant
ol
<!---Include flllil" - ir..:ll.lde.sJfooter .h t.Jl t " --)
<1-- enG
<!
;
.(oot~
-- ) <!di v>
~ ~to.~
-- >
even
Here and Baci< ltavel 2008, Ali RJghts Resc rve d

(;Ql1I<l~
A Design gombra kattintva trjnk vissza a Design nzethez! Jelljk ki a szerkesztablakban a begyazott szveget!
l'ype
Alt
Vln.,.1
Az 55f (server-side includes) Properties-panelje tartalmaz egy Edit gombot, amely lehetv teszi,
hogy vltoztatsokat vigynk vghez a begyazott fjlban . A kvetkez feladatban ezzel fogunk dolgozni. 7 8 Vlasszuk ki a File> Save menpontot! Kattintsunk a Live View gombra, hogy lssuk: a begyazott HTML kdrsz pont ott jelenik meg, ahol szeretnnk, amikor az oldal betltdik. Kattintsunk jra a Live View gombra, hogy visszatrjnk Edit mdba!
10
206
10. LECKE
Hatkonysgnvels
Szerveroldali begyazsok hozzadsa szjtok oldalaihoz

Ahhoz, hogy valban ki tudjuk hasznlni a kiswlgloldali begyazsokban rejl lehetsgeket, a szjthoz tartoz sszes oldalon hasznl ni kell ket alblc meglv anyaga helyett. Kezdjk az about. html fjJlal! l . 2 Vlasszuk ki a Files panel lessonlO mappjt, majd dupla kattintssal nyissuk meg az about.html fjlt! Kattintsunk brhov a lbl c szvegbe!
3 Vlasszuk ki a <p> cmkt a cmkevlasztban, majd a Delete billentyvel trljk ki!

4 Vlasszuk ki az Insert> Server-Side Incfude menpontot!
5 A Select File prbeszd ablakban keressk meg a lessonlO > incfudes map pt! Vlasszuk ki a floter.
html fjlt, majd kattintsunk a Choose gombra!
6 Vlasszuk ki a File > Save menpontot, majd kattintsunk a File> Close menpontra!
Ismteljk meg az l-6. lpst a kvetkez fjlokra vonatkozan: contact.html,form-fJrocessinghtml, index. html, ourcfients.html, santorini.html s umbria.htm!: Ezzelltrehoztunk egy szerveroldali begyazs t, s hozzadtuk a szjton tallhat sszes oldalhoz.
Szerveroldali begyazsok frisstse

Amikor a lecke korbbi rszben sablonokkal s knyvtrelemekkel dolgoztunk, brmely, asablonon vagy knyvtrelemen vghezvitt vltozs automatikusan megmutatkowtt a sablon alapjn kszlt oldalon is. Ekkor minden jonnan frisstett oldal fel lett tltve a kiszolgl ra. Amikor szerveroldali begyazsokat hasznlunk, az egyetlen fjl, amit fel kell tltennk, az a begyawtt fjl. Most vltozrassuk meg a begyazott fjlt, s lssuk, hogyan kezeli a Dreamweaver ezt a vltozst! l Nyissuk meg a lessonlO mappt a Files panelen, majd dupla kattintssal nyissuk meg a naxos.html fjlt!
2 Jelljk ki a lblcben a begyawtt szvege t! 3 4 Kattintsunk a Properties panel ben tallhat Edit (Szerkeszts) gombra! A floter.html fjl megnylik. Helyezzk az egrkurwrt a Contact Us szveg utn, s ssk le a Shift+Enter (Windows), iJJetve a Shift+Return (Macintosh) biJJentykombincit, hogy sortrst hozzunk ltre! rjuk be az j sorba a kvetkez szveget: Telephone: (555) 555-5555.
o
6
Here am Back Travel <Ll 2008, AD RigbIS Resetved COOlllCI Us
Vlasszuk ki a File> Save menpontot, s zrjuk be a floter.html fjlt!
207
Nyissunk meg brmely ms oldalt a szj ton, ami tartalmazza a begyazs i fjlt, s figyeljk meg, hogy a fjlban tallhat lblc rgtn megvltozott, amikor megvltoztattuk a begyazott floter. html fjlt!
Ltrehoztunk egy szerveroldali begyazs t, hozzadtuk tbb oldalhoz, s frisstettk. Szmos ms weboldalelem - pldul log, men, titoktartsi nyilatkozat, banner - egyszeren talakthat knynyen frissthet szerveroldal i begyazss. Megtanultuk hasznlni a Dreamweaver hrom, hatkonysgot fokoz eszkzt (sablonok, knyvtrelemek s szerveroldali begyazsok), amelyek segtenek oldalakat pteni s szj tokat frissteni. Annak ellenre, hogy ezekre az ismeretekre a knyv vge fel tettnk szert, a szjt ltrehozsnak elejn kell eldntennk, hogy kvnjuk-e hasznlni ezeket az eszkzket. Alkalmazsukkal gyorsabban do 1gozhatunk a weboldal tervezse s ltrehozsa sorn, s megknnythetjk az oldal karbantartst.
10
208
10. LECKE
Hatkonysgnvels
sszefoglals
--------------------------------------
sszefoglal krdsek
l 2 .. 3 4 5 Hogyan hozunk ltre egy mr ltez oldalbl sablont? Nevezzk meg a sablonok valamely ltfontossg elemt! Mirt ltfontossg? Hogyan hozunk ltre egy sablon bl gyereklapot? Hogyan hozunk ltre knyvtrelemet? Hogyan illesztnk egy oldalba knyvtrelemet?
6 Hogyan hozunk ltre szerveroldali begyazsokat?

7 Hogyan adhatunk hozz egy szerveroldali begyazst egy oldalhoz?
sszefoglal vlaszok
1 Kivlasztjuk a File > Save as Terrlplate menpontot, majd a prbeszdablakba berjuk a sablon , nevet. 2 3 4 A szerkeszthet rgi ltfontossg6 a sablonokkal val munka szempontjbl, ugyanis nlkle a gyerekoldal zrolt lenne s szerkeszthetetlen. Vlasszuk ki a File> New menpontot s a New Document prbeszdablakban a Page from Template lehetsget! Keressk meg benne a kivnt sablont, majd kattintsunk a Create gombra! Jelljk ki az oldalon lv tartalmat, amit a knyvtrhoz kvnunk adni! Vlasszuk ki aModifj > Library > Add Object to Library menpontot! Az Assets panel Library felletn adjunk nevet a knyvtrelemnek!
5 Jelljnk ki egy beillesztsi pontot a dokumentumban a knyvtre1em szmra! Az Assets panelen bell vlasszuk ki a beilleszteni kvnt knyvrrelemet, s kattintsunk az Imert gombra!
6 Nyissunk meg egy j, res dokumentumot! Adjuk hozz a tartalmat! Code nzetben tvoltsunk
el mIlden olyan oldal elemet a kdbl, amit nem szeretnnk megtartani! Mentsk el a fjlt! 7 Jelljnk meg egy beillesztsi pontot a dokumentumban azon a helyen, ahol a begyazott fjlt szeretnnk megjelenteni, amikor a fjl felkerl a kiszolgl ra! Vlasszuk ki az Imert > Server-Side Inc/ude menpontot! A Select File prbeszdablakban vlasszuk ki a megfelel fjlt!
10
11 Publikls a weben
jresting the nIe transfer. The image shouId transfer as a u .... ..,endent ille.
Ebben a leckben megtanuijuk, hogyan publiklhatjuk szjtunkat az interneten.
210
11. LECKE
Publikls a weben
11
A lecke ttekintse
A kvetkezket fogjuk megtanuJni: Tvoli webhely definilsa Fjlok feltltse a webre Mappk s fjlok lczsa Oldalak letltse a webrl
Ennek a lecknek az elvgzse krlbell 60 percet vesz ignybe. Amennyiben mg nem tettk meg, tltsk le a Lessons mappt merevlemeznkre, szksg esetn csomagoljuk ki, s keressk meg a Lessonll map pt!
A Dreamweaver Fi/es pane!je FTP alkalmazsknt mkdik, amelynek segtsgvel fjlokat tlthetnk fe! a kiszolglra, valamint szj tokat szinkronizlhatunk.
Tvoli webhely meghatrozsa

A Dreamweaver ktszjtos rendszerben mkdik. Az egyik szjt a sajt gpnkn lv knyvtrban tallhat, s helyi szjtknt utalunk r . .Az eddigi leckk sorn minden munkt a helyi szjton vgeztnk el. A msik szjt egy webkiszolg1n lv knyvtrban tallhat, egy msik szmtgpen: ez a tvoli szj t. A tvoli szjt ltalban folyamatosan kapcsoldik az internethez, s nyilvnosan hozzfrhet.
A Dreamweaver szmos mdszert kinl a tvoli webhelyhez kapcsoldshoz: FTP - A File Tramfer Protocol (Fjltviteli protokoll) rvidtse. Ez a leggyakoribb mdszer a tvoli kiszolglkhoz val kapcsoldsra. Local/Nerwork (H elyi /Hlzat) - Helyi vagy hlzati kapcsolatot leggyakrabban akkor hasznlunk, amikor egy kztes kiszolgl t, gynevezett prbaszervert alkalmazunk. A prbaszerverrl a fjlok ksbb tkerlnek egy internethez kapcsold webkiszolglra. WebDav - A Distributed Authoring and Versioning (Webalap elosztott szerkeszts s vltozdskvets) weben alapul rendszer, amit a Windows XP-felhasznlk Web Folders (Webmappk) nven ismernek. ROS - Remote Development Services (Ttvoli fejlesztsi szoL gltatsok). Az Adobe cgnek elssorban a Cold Fusion szervertechnolgihoz kifejlesztett rendszere, fknt Cold Fusion-alap szj tokhoz hasznljk.
Microsoft Visual SourceSafe - Egy verzikezel rendszer, amely llomnyzrols-kezelst s visszalltsi lehetsgeket is nyjt.
A kvetkez gyakorlatokban tvoli szjtot lltunk be a kt legelterjedtebb mdszer: az FTP s a Local/Nerwork hasznlatval.
Megjegyzs: A kvetkez kt feladat elvgzse klcsnsen kizrja egymst. Ha rendelkeznk webes . trhellyel s FTP kapcsolat ltestshez szksges informcikkal, akkor a Tvoli FTP szjt bellt. sa" gyakorlat lpseit kvessk, ha azonban kzvetlen hozzfrsnk van egy webkiszolgl. hoz, akkor a "Kapcsolat ltrehozsa egy helyi vagy hlzati kiszolglval gyakorlat lpseit!
211
Tvoli FTP szjt belltsa

A webfejlesztk nagy tbbsge az FTP rendszert hasznlja a szjtok publiklshoz s karbantartshoz. Ez egy jl bevlt protOkoll, aminek sok varicijt hasznljk a weben. Ezek tbbsgt a Dream, . weaver tamogatp.
l
11
Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Ha nem lthat, ssk le az F8 gyorsbillentyt a Files panel megjelentshez, majd vlasszuk ki a DW CIB elemet a szjtOk listjrl! Vlasszuk ki a Site> Manage Sites (Szjt> Szjtok kezelse) menpontot! A megjelen Manage Sites prbeszdablakban egy listt ltunk, amely az sszes ltalunk meghatrozott szj tOt tartalmazza. Ha tbb szjt is megjelenik a listn, ellenrizzk. hogy a DW CIB legyen kivlasztva, majd nyomjuk meg az Edit gombot! A Site Definition for DW CIB prbeszdablakban vltsunk t az Advanced flre, majd a Category listn vlasszuk ki a Remote Info (Tvoli szjt adatai) kategrit!
2 3 4
Megjegyzs: A gyakorlat elvgzshez szksgnk lesz hozzfrsre egy tvoli FTP kiszolglhoz (cm, rvnyes felhasznlnv s jelsz) .
Tipp: Az aktuls szjt belltsait kzvetlenl is elrhetjk a Manage Stes prbeszdablak megnyitsa nlkl, ha dupln a DW CIB elemre kattintunk a fell tallhat meghatrozott szjt fel van sorolva.
legrdl
menben, ahol az sszes
Az Access (Hozzfrs tpusa)
legrdl men bl vlasszuk ki az
FTP lehetsget!
O UMl9Y6t~Jhrnt<lde
o
o
O UMflr~
r====-,
(
'\teotIoItI ~L .. )
UM! Sec: .... rTP (SfTP)
( Sotrwr Cotr1.pWbII~_ )
~ M&IttQIn JyrKhronl~ I"'~ AufOfNdu'~ uplNd fIIn 10 s_r on U\4
D lntbM'" cllKk ln -S dlKk out
Az FTP host (FTP kiszolgl)
mezben adjuk meg az FTP kiszolglnk cmt! Egy FTP cm ltal-
ban a kvetkezkppen nz ki: np.webszajtnev.com (hazai szolgltatk esetben np.webszajtnev.hu) . Ha nem vagyunk biztOsak kiszolgl nk FTP cmben, krdezzk meg webtrhely-szolgltatnktl! 8 A Host directory (Evoli knyvtr) mezben adjuk meg a kiszolgln tallhat knyvtrak kzl azt, amelyik a weben nyilvnosan hozzfrhet programokat tartalmazza (ha ltezik kln ilyen)! Vannak trhelyszolgltatk, amelyek egy olyan gykrknyvtrhoz adnak FTP elrst, amely mg tOvbbi, nyilvnos s nem nyilvnos knyvtrakat (pldul Common Gateway Interface vagy binris szkriptek trolsra hasznlt cgi-bin-t) is tartalmaz. Ilyen esetekben a nyilvnos knyvtr nevt adjuk meg - ltalban public_html, wwwroot, www - a Host directory mezben! Megint ms trhelyszolgltatk eleve a nyilvnos knyvtrhoz adnak FTP hozzfrst, ilyen esetekben a Host directory mezt resen kell hagyni.
212
11. LECKE Publikls a weben
11
A Login (Felhasznlnv) mezben adjuk meg FTP felhasznlnevnket, a Password Uelsz) mezben pedig FTP jelszavunkat! Mindkt mez gyakran kis-/nagybet-rzkeny, gyhogy gpeIjnk figyelmesen!
10 Vlasszuk ki a Test (Kapcsolat kiprblsa) gombot, hogy ellenrizzk a kapcsolat mkdkpessgt! II A Dreamweaver rtest bennnket a prba eredmnyrl. Kattintsunk a felugr ablak OK gombjra az eltntetshez! 12 Ha nem akarjuk minden egyes alkalommal jra berni felhasznlnevnket s jelszavunkat, amikor a Dreamweaver a tvoli szjthoz kapcsoldik, akkor helyezznk pipt a Save (Felhasznlnv s jelsz trolsa) jellngyzetbe! Jegyezzk fel a jelszavunkat mshov is, ugyanis itt mr nem lesz a tovbbiakban szvegknt olvashat! 13 Keressk meg a szolgltatnk tmutatsban, hogy melyik lehetsg a megfelel a sajt FTP szervernk szmra! Tbbnyire j vlasztsnak bizonyul a Use Secure FTP (Biztonsgos FTP hasznlata) lehetsg. Az albbiak kzl vlaszthatunk:
Use passive FTP (Passzv FTP hasznlata) - Lehetv teszi a szmtgpnknek, hogy felptse a kapcsolatot a kiszolg1val bizonyos tzfalkorltozsok ellenre is. Gyakran a Use Firewalf (Tzfol hasznlata) opcival egytt hasznlatos. Use IPv6 transfer mode (IPv6 tviteli md hasznlata) - Lehetv teszi az internet-tviteli protokolllegjabb vltozatt hasznl IPv6-a1ap kiszolglkhoz val kapcsolds t. Use firewalf (Tzfol hasznlata) - . Lehetv teszi, hogy a szmtgpnk tzfal mgl is kapcsoldni tudjon a tvoli kiszolglhoz. Ha ezt a lehetsget vlasztj uk, kattintsunk a Firewall Settings (Tzjalbefltsok) gombra a tzfal paramtereinek, gy pldul a tzfal kiszolg1jnak s porrszmnak megadshoz! Use Secure FTP (SFTP- biztonsgos FTP hasznlata) - Lehetv teszi, hogy az SFTP segtsgvel kapcsoldjunk a tvoli kiszolgl hoz.
14 Ha mg mindig nem tudunk kapcsoldni FTP kiszolglnkhoz, kattintsunk a Server Compatibility (Kiszolgl-kompatibilits) gombra! A megjelen 5erver Compatibility prbeszdablakban vegyk ki a pipt a Use FTP performance optimization (FTP teyestmny optimalizlsa) jellngy zetbI, s kattintsunk az OK gombra, majd a Test again (jratesztels) gombra! 15 Hatrozzuk meg a tvoli szjttal vgzett munka sorn hasznlni kvnt belltsokat:
Maintain synchronization information (Szinkronizcis informci trolsa) - A Dreamweaver automatikusan jegyzi, hogy mely fjlok vltoztak meg a helyi s a tvoli szjton, hogy knynyebb legyen szinkronizlni ket. Ez az alkalmazs segtsgnkre van abban, hogy nyomon kvessk a vghezvitt vltoztatsokat, s hasznos, ha tbb oldalt is megvltoztacunk feltlts eltt . Ezt a funkcit gyakran hasznljuk lczssal egytt. Az lczsrl a kvetkez gyakorlat sorn fogunk szt ejteni. Automaticalfy upload files to server on save (Alfomnyok automatikus feltltse azok mentsekor) A Dreamweaver automatikusan feltlti a helyi szjtrl a tvoli helyre az ppen elmentett fjlokat. Ez a lehetsg zavarv vlhat, ha gyakran mentnk, de az oldalunkat mg nem szeretnnk nyilvnossgra hozni . Enable file check in and check out (Allomnyzrolsi rendszer bekapcsolsa) - Bekapcsolja a Dreamweaver llomnyzrolsi rendszert a csapatban vgzend weboldalksztshez. Ha ezt a lehetsget v1asztjuk, meg kell adnunk egy felhasznl nevet s opcionlisan egy e-maiI cmet is, amit az llomnyzrolsi rendszerben hasznlni fogunk. Ha egyedl dolgozunk, nincs szksgnk erre a lehetsgre.
213
Akr mind a hrom, fent emltett opci t kikapcsolhatjuk, ha a jellngyzetkbl kivesszk a pipt.
16 Kattintsunk az OK gombra! Egy prbeszdablak jelenik meg, amely arrl tjkoztat minket, hogy a gyorst trat frissti, mivel megvltoztattuk a szjt belltsait. Kattintsunk megint az OK gombra! Amikor a Dreamweaver vgzett a gyorst tr frisstsvel, kattintsunk a Done (Ksz) gombra a Manage Sites prbeszdablak bezrshoz!
11
Kapcsolat ltrehozsa helyi vagy hlzati kiszolglval

Ha cgnk a webtervezk s az l weboldal kztt ll prbakiszolglt hasznl, valszn , hogy egy helyi vagy hlzati kiszolgln keresztl lesz elrhet a tvoli szjtunk. Sajt gpnkn is hasznlhatjuk ezt a tpus kapcSolatot, ha azon fut egy webkiszolgl. l 2 3 4 Indtsuk el az Adobe Dreamweaver CS4 alkalmazst! Ha nem lthat, a FiLes panel megjelentshez ssk le az F8 gyorsbitlentyt, majd vlasszuk ki a DW CIB mappt a szj tok listjrl! Vlasszuk ki a Site> Manage Sites menpontot! A megjelen Manage Sites prbeszdablakban vlasszuk ki az aktulis DW CIB szj tot, majd kattintsunk az Edit gombra!
5 A Site Definition for DW CIB (DW CIB szd}t belltsa) prbeszdablakban vltsunk t az Advanced flre, majd a kategrialistn (Category) kattintsunk a Remote Info (Ttvoli szd}t adatai) kategrira! 6 vlasszuk ki a Local/Network lehetsget! Ha a sajt szmtgpnkn tallhat a webkiszolgl, akkor a mappa ikonra kattintva keressk ki a megfelel mappt! A map pa neve a kvetkez nevekhez hasonl lehet: [rendszerlemez]: \In etpub\wwwroot (Windows), illetve [rendszerlemez] :Users [felhasznlnv]:Sites (Macintosh).
, Bult
Ciltt!gory
Az Access (Hozzfrs tpusa) legrdl
menbl
Ad oecd
J.- -
Remote Info
loc~ I :----' "fo

Tt-111n9 StfYtr Ven.lon (onuol
Cloaklng
Acceu: ( l.ocal/Network
Rtmole folder: ~
~nQln
'ft
I~
Dellgn Notes Att! VIew Columns ContrIbute

Templates
synchroniutlon information
Sp",
O Automatic~Uy uplcwf files to server on ~ O EnibIt file chec::k in and check out
Amennyiben hlzati kiszolglt hasznlunk, vlasszuk az adott szervert a hlzatunkon bell! 7 Adjuk meg a tvoli szjttal folytatand munka sorn hasznlni kivnt opcikat:
Maintain synchronization information (Szinkronizdcis informci trolsa) - A Dreamweaver automatikusan jegyzi, hogy mely fjlok vltoztak meg a helyi s a tvoli szjton, hogy knny legyen szinkronizlni ket. E funkcit gyakran hasznljuk lczssal egytt. Az lczsrl a kvetkez feladat sorn fogunk szt ejteni. Automaticaily upload files to server on save (llomnyok automatikus feltltse azok mentsekor) A Dreamweaver autOmatikusan feltlti a helyi szjtrl a tvoli helyre az ppen elmentett fjlokat. Ez az opci zavarv vlhat, ha gyakran mentnk, de az oldalunkat mg nem szeretnnk nyilvnossgra hozni.
Megjegyzs: A gyakor/at elvgzshez szksgnk lesz egy hozzfrsre egy helyi vagy hlzati webkiszolglhoz (rvnyes felhasznlnv s jelsz).
214
11
Tipp: Az aktulis szjt belltsait kzvetlenl is elrhetjk a Manage Sites prbeszdablak megnyitsa nlkl, ha dupln a DW CIB elemre kattintunk a fell tallhat legrdl menben, ahol az sszes meghatrozott szjt fel van sorolva .
Enab!e file check in and check out (llomnyzrolsi rendszer bekapcsolsa) - Bekapcsolja a Dreamweaver llomnyzrolsi rendszert a csapatban vgzett weboldalksztshez. Ha ezt a lehetsget vlasztjuk, meg kell adnunk egy felhasznlnevet s opcionlisan egy e-maii cmet is, amit az llomnyzrolsi rendszerben hasznlni fogunk. Ha egyedl dolgozunk, nincs szksgnk erre a lehetsgre.
Akr mind a hrom, fent emltett opcit kikapcsolhatjuk, ha a jellngyzetkbl kivesszk a pipt. 8 Kattintsunk az OK gombra!
Mappk s fjlok lczsa

Ha a Maintain synchronization information (Szinkronizcis informci trolsa) lehetsget vlasztottuk ki egy FTP vagy hlzati kiszolgl t hasznl tvoli szjt esetben, dnrhetnk gy, hogy lczunk bizonyos helyi anyagokat. Nem felttlenl kell minden, a gykrknyvtrban tallhat anyagor tvinni a tvoli kiswlglra. Nincsen rtelme annak, hogy egy tvoli trolhelyet feltltsnk olyan fjlokkal, amelyeket aztn a weboldal hasznli nem ltogatnak, vagy nem is ltogarhatnak. A Template s Library mappt pldul nem keU a tvoli kiswlglra tvinni, s ugyanez rvnyes biwnyos Photoshop (.psd), Flash (.fla), illetve ms, a weboldal ksztshez felhasznlt fjlokra is. Jczhatunk fjlokat, miltal a Dreamweaver nem szinkronizlja ezeket a helyi szjton tallhat fjlokat a tvoli szjton tallhat fjlokkal. Az lcwtt mappk, fjltpusok s egyedi fjlok nem rintettek a szinkronizlsi folyamatban .
Megjegyzs: Az lczott mappk s fj/ok tvitele akkor trtnik, amikor egy egsz szjtot feltltnk, vagy amikor a Put Dependant Files (Kapcsold fjlok feltltse) lehetsget hasznljuk. Ksbb manulisan trlhetjk ezeket a tvoli szjtr61.
Kezdjk a Site Definitiom terleten belli lczssal! l 2 3 4 Ha nem lrhat, ssk le az F8 gyorsbillenryt a FiLes panel megjelentshez, majd vlasszuk ki a DW CIB mappt a szjrok listjrl! Vlasszuk ki a Site> Manage Sites menpontot! A megjelen Manage Sites prbeszdablakban jelljk ki az aktulis DW CIB szjtot, majd kattintsunk az Edit gombra! A Cioaking (lczs) kategrin bell vlasszuk ki az Enab!e cloaking (lczs engedlyezse) s a Cloak files ending with (Biwnyos kiterjeszts fjlok lczsa) lehetsget! Kattintsunk az OK gombra! Elkpzelhet, hogy a Dreamweaver ekkor frissteni fogja a gyorsttrar. Ha igen, a Site Definition for DW CIB (DW CIB szjt beiitsa) prbeszdablak bezrshoz kattintsunk a Done (Ksz) gombra, amikor az alkalmazs vgzett a frisstssel! A Dreamweaver az .fla s a .psd kiterjeszts fjlok lczst javasolja. Ha ms fjltpusokat is szeretnnk lczni, pldul Adobe Illustrator (.ai) fjlokat, tovbbi kiterjesztseket is meghatrozhatunk a Cloak files ending with (Bizonyos kiterjeszts fjlok lczsa) nev mezben. Az lcwtt fjlokat piros per jel jelzi a Fi/es panelen. Egyes fjlokat, illetve mappkat is lczhatunk.
215
11
Cloaldng
Options:
!! Enablto doaklng
CtoaldnD leu you .xclude !.pe<lfied foldrrs and fl~s from ali site operadons.
Templates
'PIY
li CIOoIk tUn ending 'Hith:

.na .psd
Vlasszuk ki a Library (Knyvtr) mappt a Fifes listrl!
" EJ l..... , ~ btnch.Jpg '" fl Brid~Sourct

~
(harlle.Jpg
city.J~
cloud~hu<f@r .j pg
l'!
ri;
CUpolol,jpg
diShuJpg
I!lalnt .}pg
glrl .. on-bta<.h .Jpg
t\appy- ramllyJpg luUan-hiU- lown.jpg
lason.JPCJ
IIn.jpg
Il ~ .jpg
I1ne.Qlf
'"
,
N,)fos-dlurch.JP9
nilXOi -ponarll .jpq
on-tht-beOlC.h.Jpg
"
li
PSO
n.u:o.. -ch.urch.psd
naxos-lrNgu.p... ~lu-ln-wnlonnf.j PO solntorlnl-sunstl.jpg
sculpte-~rden ,J PO
40.
...
Klikkeljnk jobb kattintssal (Windows), illetve a Control+kattints (Macintosh) kombincival a kivlasztott mappra, s kattintsunk a Cfoaking> Cfoak (Alczs > Alca) men pontra! Egy prbeszd ablak jelenik meg (Cloaking template or library fi!es wil! only affect put or get commands, not any batch site operation), amely arra hvja fel a figyelmet, hogy a sablonok illetve knyvtri fjlok lczsa csak a fel- s letlts parancsokra van hatssal, a ktegelt szjtmveletekre nem. Kattintsunk az OK gombra!
Uncloak Ali
Locate in Remote Site
A Fi!es listban bontsuk ki a SpryAssets mappt, s vlasszuk ki benne a SpryAccordion-finished.css fjlt!
8 Jobb kattintssal (Windows), illetve a Control+kattints (Macintosh) kombincival klikkeljnk a kivlasztott mappra, s vegyk a Cfoaking > Cfoak (lczs> lca) menpontot! A Site Definitiom prbeszdablak s a Cfoaking context menu (lczsi kiirnyezetrzkeny men) segtsgvel fjltpusokat, mappkat s fjlokat lcztunk. Ezek az elemek nem vesznek rszt a szinkronizcis folyamatban.
216
11
A szjt feltltse
A helyi s a tvoli szjt szinte teljesen egyms tkrkpei: ugyanazokat a HTML fjlokat, kpeket s ms fjlokat alkalmazzk ugyanolyan knyvtrszerkezetben. Amikor feltltnk egy oldalt a helyi szjrrl a tvoli szjtra, akkor publikljuk, vagyis feltesszk a webre. Ha a helyi szjtunk egyik mappjban trolt fjlt tltnk fel, akkor a Dreamweaver a tvoli webhelyen a megfelel knyvtrba fogja elhelyezni - ha szksges, akr knyvtrakat is ltrehozva. , A Dreamweaverrel brmit egy mvelettel feltlthetnk, legyen az akr egyetlen fjl vagy egy egsz szjt. . Amikor publiklunk egy oldalt, a Dreamweaver rkrdez, hogy az ahhoz kapcsold fjlokat (dependent Sies) is fel szeretnnk~e tlteni. Oldalhoz kapcsold fjlok az oldalon szerepl kpek, Flash animcik, a mkdshez szksges JavaScript fjlok s kls CSS stluslapok, a szerveroldali begyazsok - brmilyen fjl, amire szksg van az adott oldal helyes megjelenshez. A Dreamweaver az oldalakhoz kapcsold fjlokat automatikusan a helyi szjtunknak megfelel knyvtrba tlti fel.
Megjegyzs: Ez a gyakorlat azt felttelezi, hogy meghatroztunk egy tvoli szjtot a Tvoli szjt meghatrozsa rszben lertak alapjn akr FTp, akr helyi hlzati kapcsolatot hasznlva.
Nyissuk meg a Lessonl1 mappt a'Files panelen! Kattintsunk a Connect to remote host (TvoLi kiszolglhoz kapcsolds~) gombra! Vlasszuk ki a test-page. htmL fjlt! A szerkesztablak eszkztrban, a File ,Management (Llomnykezels) menben vlasszuk ki a Put Fi/e(s) (LLomny(ok) feltltse) gombot! Az aktulisan szerkesztett fjl feltltshez hasznlhatjuk a Site> Put menpontot, egy tetszleges fjl feltltshez pedig kivlaszthatjuk a feltltend fjlt a FiLes panelen, majd a Put gomb megnyomsval feltlthetjk. A Fi/es panelt hasznlhatjuk egyszerre tbb fjl feltltsre is: csak jelljk ki a feltltend fjlokat a listn, majd kattintsunk a Put gombra! Amikor megjelenik a DepencLent Fi/es (OLdalhoz kapcsold fjlok) prbeszdablak, kattintsunk a Yes (Igen) gombra! Ha nem kattintunk egyik gombra sem, a prbeszdablak automatikusan ki fogja jellni a No (Nem) lehetsget, s elutastja ezt az opcit. Ha meg szeretnnk nzni, hogy mi tallhat a tvoli kiszolgln, a Files panel jobb fels sarkban lv menbl vlasszuk ki a Remote View (Tvoli nzet) lehetsget!
2 3 4
Testing serwf
Reposltory view
Ahhoz, hogy egyms mellett lthassuk a helyi s a tvoli fjlokat, kattintsunk az Expand to show LocaL and remote sites (A helyi s tvoli fjLok egyttes megjelentse teijes kpernyn [Ei:I] ) gombra, ami az utols a FiLes panel jobb oldaln. A Dreamweaver ltrehozza a helyi szj tunk Struktrjt a tvoli szjton is. Egy Lessonl1 mappa s egy images (kpek) map pa lthat. A test-page.html fjl a Lessonl1 mappban, a bench.jpg fjl pedig az images mappban tallhat.
Megjegyzs: Ha elszr vgznk feltltst, ltalban rdemes az oldalhoz tartoz fj/okat is feltlteni. Ha gy tesznk, minden, am az oldalhoz ktdik - kpek, SpryAssetek, CSS fjlok, parancsfjlok s swf fj/ok - automatikusan fel lesznek tltve. Elkpzelhet azonban az is, hogy nem szeretnnk a kapcsold fj/okat feltlteni, ha ppen eltte vltoztattuk meg az oldal kdjt, s nem vltoztattuk meg egyik hozz kapcsold kpet vagy ms eszkzt sem.
A Dreamweaverben a feltlts (Put) eLlenttprja a letlts (Get). Brmilyen fjlt letlthetnk a tvoli szjtrl, ha a remote (tvoli) felleten kijelljk, majd a lefel mutat nyilat brzol Get gombra
217
Iresting the nIe transfer. The image should transfer as a file.
11
kattintunk. Ha akarjuk, akr t is hzhatjuk a fjlokat egyik felwetrl a msikra. Fontos szben tartani, hogy az egyik helyrl a msikra ttlttt fjlok a clrerleten lv pldnyukat automatikusan fellrjk.
Megjegyzs: A Oreamweaver kOln szmtgpes folyamatknt hajtja vgre a fj/tvitelt, gy publikls kzben nyugodtan dolgozhatunk tovbb.
8 9
Ha vgeztnk a bngszssel, bontsuk a kapcsolatot a Disconnect from remote host (Tvoli szolgltatval val kapcsolat bontsa) gomb kivlasztsval! A bngsz segtsgvel kapcsoldjunk a tvoli szjmoz az interneten vagy a hlzati kiszolgln keresztl! Gpeljk be a pontos URL cmet a bngsz cmmezjbe, belertve a tvoli szjton tallhat mappkat s a fjlnevet is (pldul: www.yoursetver.com/lessonll1testpage.htmJ)! Most lthatv vlik a tesztoldal a bngszben a kpekkel s szveggel egytt.
Ebben a leckben belltottuk a szjtunkat gy, hogy egy tvoli kiszolglhoz kapcsoldjon, s a tvoli kiszolglra fe! is tltttnk fjlokat. lcztunk fjlokat s mappkat. Most mr kszen llunk arra, hogy kapcsolatot ltestsnk a sajt weboldalunkkal, s a Dreamweaver fjltviteli lehetsgeit hasznlva weboldalainkat a szmtgpnkrl a vilghlra fe!tltsk. Minden feladatot e!vgeztnk, s most mr meg tudjuk tervezni, ltre tudjuk hozni, s publiklni is tudjuk a sajt szjtunkat. Gratullunk!
218
11. LECKE
Publikls a weben
11
sszefoglals
sszefoglal krdsek
l 2 3 4 Mi a tvoli szj t? Nevezznk meg kt fjltviteli mdszert, amit tmogat a Dreamweaver! Hogyan llthatjuk be gy a Dreamweavert, hogy bizonyos, a gykrknyvcrban tallhat fjIokat ne szinkronizljon akiszolglval? Igaz vagy hamis? Az sszes oldalt s hozz tartoz kpet, JavaScript fjlt vagy kiszolgloldali begyazst manulisan, egyenknt kell feltlteni.
sszefoglal vlaszok
l Egy tvoli szjt a helyi szjt tkrkpe, amit egy, az internethez kapcsold webkiszolgln trolunk.
2 Az FTP (File Transfer Protocol) s a Local/Network (Helyi/Hlzati) a kt leggyakrabban hasznlt mdszer. A Dreamweaver tbbek kztt tmogatja mg a WebDav, a Visual SourceSafe s az RDS tvitelt is. 3 4 lczzuk azokat a fjlokat, amelyeket a tovbbiakban nem szeretnnk szinkronizlni. Hamis. A Dreamweaver automatikusan feltlti az adott oldalhoz tartoz fjlokat, gy pldul az azon hasznlt kpeket, CSS stluslapokat vagy Flash animcikat.
Trgymutat
Jelek
2 elnzeti ablak gomb 81 * (csillag) 80 "(idzjel) 150 # (kettskereszt) 95, 98, 109
,
Asynchronous JavaScript begyazott tartalom 183 (Ajax) 95 Flash PLayer 180, 182, 184 Attach External Style Sheet olda/hoz kapcsold fjlok prbeszdablak 48, 174 216 "Attach label tag using 'for' vide hozzadsa a attribute" lehetsg 160, weboldalhoz 181, 183 161 vide kezelszervkszlete 184 Adobe Photoshop
kls grafikai
A,A
Action mez 158 action tulajdonsg 157, 158 adatcsoportok 110, 112 adatok ellenrzse 160 klnleges karakterek s 113 XML 112 adattpusok 116 Add Browser prbeszdablak 28 Add Object to Library parancs 195 Adobe Authorized Training Center (MTC) Adobe Bridge 84, 87 Adobe Certified Expert (ACE) Adobe Certified Instructor (ACI) Adobe ColdFusion 21 Adobe Community Help webszjt 6 Adobe Fireworks 80, 82 Adobe Flash 180
Attach Style Sheet ikon 174, 197
alkalmazs
80,82
msolds/beiLLeszts 83 Smart Object objektumok 82, 85 szerkeszts 80

Adobe Photoshop (PSD) fjlok 83, 85, 86, 214 Adobe Updater prbeszdablak 5 Adobe webszjt 5, 6 Advanced (Specilis) nzet 9 Ajax (Asynchronous JavaScript) 95 lczs mappkJfjlok 214 Ali md 16, 79, 128 Allow Blocked Content bellts 11 almenk 98, 102 alt szveg 14, 78 animcik Flash 183
B
bannerek 138, 142, 150 Basic (Alap) nzet 9 belltsok
bellts 4
elnzet bngszben 28
fjlpusok/szerkesztk 81
frisstsek keresse 5 hozzfrhetsg 4 Hozzfrhetsg 158 kpszerkeszt alkalmazsok 81 lthatatlan elemek 204 tzfol belltsok 212
[/dvzlkperny
megjelentselelrejtse 10 rLapok 158

befogad elem 80,117, 132, 143 befoglal elemek 130 Behaviors panel 109 Beilleszts parancs 56
progresszv letlts 184 streaming 184

Assets panel 77, 199
220
Trgymutat
Code gomb 22, 24, 182, 199 Code Navigator 145 szveg bevitele 54 Bngsz-kompatibilitsi Code nzet 11,22, 143,202 szvegnek megvltoztatsa jelents 104, 150 ColdFusion 210 13 Box kategria 37, 101, 129, Collapse Full Tag ikon 144 betk 133, 134 Collapse Section ikon 144 beillesztse 13, 57 box modell 37 Common Gateway bevitele 54, 60 Interface (CGI) ltalnos .. CSS stlusok alkalmazsa 40 Bridge 84, 87 Browse in Bridge parancs 84 tjrfellet 211 dlt 25 Common kategria 77, 78 'elrendezse 129, 131 Compact md 85 filkvr 25 C, Cs helyettest 14, 78 Copy Merged parancs 84 helyrz 12, 141, 191 Copy parancs 56 Caption mez 62 Crop eszkz 82 hivatkozsok 90 CDATA hatrol 113 csi Ilag (*) 80 keresseIcserje 71 cellk a tblzatban 66, 67 CSS (Cascading Style Sheets) kijellse 12, 13 ceruza ikon 16 16 kzpre rendezs 129 CGr (ltalnos tjrfellet) msolsa amerevlemezrl 13 CSS gomb 25, 26 211 msolsa a vg6lapra 13 Check Iri/Out lehetsg 2 l 3 , CSS oldalszerkezetek 126 msolsa dokumentumbl a Dreamweaverhez tartoz 214 10 55 Choose Insert Options megvftoztatsa cmsorokban <body> cmke 128 prbeszdablak 116 <div> elemek 127 12 chrome 131 elnzete 33 mrete 20 cmek 12, 136, 193 fejlcek 132 oszlopok 139 cmkevlaszt 14, 17, 25, 63 fbb oldaLterletek 132 szn 20,27 cmsv 12 grafikus bannerek 138, 142, trlse 13 cmsorok bekezdsek
rlapelemek
Text align property 129 Text Align tulajdonsg 129
159
bevitel
szveg 54 XML adatok 113

binris szkriptek 211 biztonsgos FTP (SFTP) 212 Block kategria 50, 131 <body> cmkk 128, 202
bngszk
httrkp 17 helyrz 12, 142 ltrehozsa 58 meghatrozsa 57 oszlop 110 szerkeszthet rgi6k 191 szn 70 szvegnek m6dostsa 12 tblzatok 62
clear:both tulajdonsg 127, 135 Code and Design (Split) nzet 11,22,202
aktv tartalom 180 blokkolt tartalom engedlyezse 155 javaScript s 110
150 httrkpek 79 helyrz elemei 141 kijellse 10 kls befoglal elem ltrehozsa 130 kls stluslapokba helyezse 146 Iblcek 132, 134, 136 logk hozzadsa 136, 141 margk 129, 132 megtekints Code nzetben 143
221
pldk 127 stlusok s 140 szvegoszlopok 139 <div> elemek 127 tartalmi terletek hozzadsa dokumentumnzet II 135 dokumentumok j oldal ltrehozsa 10, 127 CSS oldalszerkezetek CSS Rule Definition ltrehozsa 128 prbeszdablak 17, 19, 40, mentse 80 42, 79 res oLdal ltrehozsa 128
CSS stlusok exportlsa 146 CSS Styles panel 16, 33, 146 CSS szablyok 17, 134 Dreamweaver CS4 9
szveg 20, 54, 71 rlap 155,156, 170, 173

elemek beillesztse
kpek 83 Photoshopbl 83 szveg 13, 57 tblzatok 63 tartalom 142

elemek lebegtetse 15, 44, 127, 135, 139 elemek msolsa
alkalmazsa rlapokon 173 befoglal eLemekre vonatkoz 130 csatolsa 33 duplica ting 134 egybefogg szvegrszek formzsa 60 ltrehozdsa 34, 130 primary divisions 132 sorrendje 38 Spry Accordions 120 tulajdonsgai 37
Current md 18, 19
Adobe Bridge elrse 84 elinduls 1 forrsok 5, 6 frisstsek 5 Help (Sg) 6 kiinduloldalak 8 teleptse 3 dvzlkperny 9
Dreamweaver CS4 Help (Sg) 5 Dreamweaver CS4 teleptse
kpek 83 Photoshopbl 83 szveg 13,55 tblzatok 63 tartalom 142

elkilldgombok 172
ellenrzs
160 Elfelttelek 3
elnzetek
3
Dreamweaver CS4 Users Guide 5 Dreamweaver viselkedsek 108 DW CIB mappa 9 .dwt fjlok 145 .dwt kiterjeszts 189
2 elnzeti abLak gomb 81

bngszablakban 28, 32,
76
Live nzetben 28 mrete 85 nyomtatsi stLusok 51
kpek 79 <embed> cmke 183 <em> cmke 25 e-maii
eltrben lv
D
dtum adattpus 116 Dependent Files prbeszdablak 216 Design nzet 11,22, 202, 203 Distributed Authoring and Versioning (WebDav) 210 <div> cmke
E,
Edit eszkz 82 Edit md 28 Edit (Szerkeszts) gomb 80 egybefgg szvegrszek 60 elemek
hivatkozsok 94
e-maiI cmek
ellenrzse
161
befoglal elemek 130 beszrsa 42,44, 135, 140 egyedi osztlyok alkalmazsa 41 f oldafterletek 132
lebegtetse 15, 127, 135, 139 navigci 49 rejtett 157
Enctype tulajdonsg 158 rtkek neve 171 eszkzlersok 46, 69 Expand Ali ikon 144 Express Installer (Gyorstelept) 183
222
Trgymutat
F
fjl
j oldal ltrehozsa 10 rlapok hozzadsa 157 zrolt llapot 192

fjlok bezrsa 10 fjlok feltltse 216, 217 fj ItpusokJ szerkeszteszkzk belltsa 81, 82 felhasznli kzssg 6 felhasznllnv szvegmez 155, 163, 165 fnyer 82 fnyer s kontraszt eszkz 82 dieldset> cmke 162 fieldsetek 162 Files panel 33 Find and Replace prbeszdablak 72 FireworkS 80, 82 . fla kiterjeszts 214 Flash 180
kiterjesztse 190
fjl keresse mdszer 91, 92 fjlok
szrmaztatott szelektorok 35 szksgtelen stlusok eltvoltsa 50 rlapok 173

forrskd 145
Ajax-vezrelt 95, 96 " bngsz-kompatibilits ellenrzse 104, 150 cfmek 12, 136, 193 Flash animci hozzadsa 181 Flash vide hozzadsa 183 gyerekoldalak 190, 192 hivatkozsainak megadsa
meghatrozsa 16 megjegyzsek 146 mint oldaltpus 10 szerveroldali begyazsok 201

forrsok 5, 6 frissts
95
hivatkozs kld oldalakra 93 hivatkozs kls oldalakra 93 hivatkozs webhelyen bell
knyvtrelemek 194, 196, 199 sablonok 191 Smart objektumok 85, 87

frisstsek keresse 5 FTP (File Transfer Protocol) 210 FTP szjtok 211 FTP szerverek 211 fles panelek 101
95
hivatkozs webhelyen belli oldalakra 90 kpek beillesztse 13, 76 kiinduloldal 8 knyvtrelemek beillesztse
196
knyvtrelemek beszrsa 196 kls hivatkozsok 93 kls stluslapok trstsa 33 legutbbi 10 mentse 11 nemrg hasznlt 10 oldalon belli hivatkozsok 90 ssz~ktse szkriptekkel 197 publiklsa 216, 217 szkriptek hozzkapcsolsa 197
animci elhelyezse a weboldalon 180 begyazott tartalom 183 kapcsold fjlok 216 vide hozzadsa a weboldalhoz 183 vide kezelszervkszlete 184
Flash hasznlatnak elsajttsa l Flash Player 180,182, 184 float (lebegtets) tulajdonsg 15, 127, 139 FLV fjlok 183 fogpontok 82 <form > cmke 157 formzs hozzrendelse 47, 49
G,Gy
Get parancs 217 GIF kpek 86 gombok
elkld 172 rlap 157 vlaszt 157, 168

Google Maps 93 grafikai eszkzk 82 grafikk
a Properties panel kpek szerkesztshez 80 tmretezs 87 beszrsa weboldalakba 13,
159 oszlopok 139
mezk
76
lestse 82
223
eltrben lv
79
Hivatkozs-ellenrz
104
fjlmrete 81 hivatkozsi clok 95 hlzati kiszolglk 213 formtumok kztti vlts hivatkozsok hasznlati tmutat 5 81 cljai 95 hatsok frissts az eredeti 87 cltalan 109 kiemels 110 frissts az eredetifjlbl 82 e-maii cmekre 94 Spry hatsok viselkedsei 96, httrkpek i7, 79 s viselkedsek 109 111 helyrzk 78, 141, 147 Fjl keresse mdszer 91, 92 hatkonysg hivatkozs 93 fjlokra 92, 145, 160, 177 gyerekoldalak 190, 192 lebegtetse 15, 44 gykrknyvtrhoz kpest knyvtrelemek 194 logk 136, 141 megadott 91 szerveroldali-begyazsok msolsa/beillesztse ID azonostk 95 201 Photoshopbl 83 kapcsold fjlokra trtn htterek meghatrozsok 14 196 CSS oldalszerkezetek 79 mret 78 kpekre 93 httrkpek 17, 79 mretezse 87 kls 93 szn 16, 70, 121, 129 mretre vgsa 82 meghatrozsa 90 <head> cmke 129, 147 minsg 81, 83, 86, 87 Point to File mdszer 92 Help (Sg) lehetsg 5, 6 optimalizci 81 5pry eszkzk 96 Photoshop Smart objektumok helyi szjt gykrknyvtra 9 stluslapokra 33, 47, J74 helyi szjtok 210,214,216 82, 85 szn 92 helyi szerverek 213 rtegeken 83 szkript sszektse oldallal helyrzk szeglyek 93 197 cmsorok 12, 142 szerkesztse 80 sziiveg 90 CSS oldalszerkezetekben szinkronizls 86, 87 URL cmekre 93 141 jraszmts 82 webhelyen belli oldalakra Flash elemek 181 vilgostsa/stttse 82 90 kpek 77, 78, 141, 147 webes kpek elmentse 84, "How to Install" llomny 3 nevek 78 86 Hozzfrhetsget sziiveg 12, 141, 191 grafikus bannerek 138, 142,
150 grafikus funkcik 80 gyerekoldalak 190, 192
gykrknyvtr-szint
helytelenl rt szavak megtallsa 68 hexidecimlis rtkek 17 hibk

adatellenrzs
meghatroz belltsok 4, 158
hozzfrhetsget
mappk 195, 211 gykr szjthoz kapcsold hivatkozsok 91 gyosttr 213
150
helyesrs 68
hibazenetek 155, 162, 164, 169 Highlight hats 110 Highlight (Kiemels) prbeszdablak III
meghatroz technolgik 158 html adattpus 116 <html> cmkk 202 HTML gomb 25 .htm kiterjeszts II HTML kd
forrs 22, 145
224
Trgymutat
k6drszlet elrejtse 144 kdrszlet kibontsa 144 kdrszlet kijellse 144 magyarzata 16 megjegyzsek 146 megtekintse Split Code nzetben 23 'mveletek visszavonsa 144 Navigator fonkci 145 , szerkeszts 22 szerver-oldali begyazsok 201
HTML kdrszletek 20 l , 202,203,205 HTML rlapok 154
I, I
ID azonostk trstsa 63, lll idzett szveg 54, 57, 60 idzjel (") 150 Image Preview (Kp elnzete) prbeszdablak 81 Image Preview prbeszdablak 82,83,86 Images mappa 9,84, 147, 217 Image Tag Accessibility Attributes prbeszdablak 77, 86 include parancs 203, 204, 205 includes alknyvtr 203, 205,206 <input> cmke 158 Insert Div Tag prbeszdablak 42,44,135,140 Insert men 14 Insert panel 62, 77, 78 interaktivits 108
J
JavaScript 109 alkalmazs 109 Dreamweaver 109
Internet Explorer s 110 kapcsold fjlok 199, 216 kivlt esemny 109 pldk 109 Spry hatsok 96, 111
JavaScript fjlok 116, 160, 161, 197 JavaScript operator 199 jellngyzetek 157, 169 jelszk FTP 211,212,213
rlapok
ttekints 157 belltsok 159 elhatrolsa 157 elkldgombok 172 felhasznlnv szvegmez 155, 163, 165 jieldset cmke 162 gombok 157 hibazenetek 162 hozvadsa oldalakhoz 157
hozzfrhetsget
155, 157, 163
jelsz szvegmez 163 JPEG formtum 81, 83, 86 JPEG kpek 86
K
kapcsold fjlok 196, 216 karakterek
je!szmezkben
155, 157,
Dreamweaver viselkedsek 164, 165 meghatroz tulajdonsgok 109 karakterlncok 115 158 Internet Explorer korltozsa szvegmezben jellngyzetek 157, 169 elsdleges 29 159 jelszk 155, 157, 163 kompatibilits ellenrzse klnleges 78, 113 lersok 162 104, 105, 151 szma 163 listk 157, 170 oldalak elnzete 28, 32, 76 karakterlnc 116 papr vagy web 157 szably 131 Kpbelltsok szerkesztse pldk 155 szveg elrendezs 129 eszkz 82 rejtett mezk 157 Text align men 129, 131 kpek stlusok 173 Invisible Elements beillesztse cmsorba 17 szeglyek 162, 166, 176 (Lthatatlan elemek) bellesztse weboldalakba 13, szvegmezk 157, 159 lehetsg 158 76 szvegterletek 157, 166 IPv6-alap szerverek 212 httr 17, 79 vlaszt6gombok 157, 167 IPv6 tviteli md 212 helyrz 141, 147
225
kpek lestse 82 kpek mretrevgsa 82 kperny mdiatpus 49 kpszerkesztsi eszkzk 82

kpszerkeszt
menk hozzadsa 199 oldalak beillesztse 196 Spry eszkZk s 196

klnleges karakterek 113 kls befoglal elem 130
mappk
alkalmazsok kls 82
kpszerkeszt alkalmazsok
alaprtelmezett kivlasztsa 81 belltsok 81 rendelsefjlokhoz 82

kpzsi dokumentumok 5,6 kettskereszt (#) 95,98, 109 Kezdrtk mez 167 kezelszervek Flash vide 184 kiindul oldalak 184 kd
L
dabebcmke 160,166,170, 173 lblcek 132, 136 lakat szimblum 10 Layers panel 83 .Ibi fjlok 145 leckk 34 legrdl listk kijellse 157 legrdl menk 61, 176 lersok
alaprtelmezett kpek 9 lczsa 214 animci 182, 184 begyazsok 203, 204, 205, 206 DWCIB 9 gykrknyvtr 189, 195 helyi gykrk"nyvtr 9 kpek 9, 84, 147, 211 nem nyilvnos 211 nyilvnos 211 oldalak elmentse mappkba 11 SpryAssets 98, 102, 111 szkriptek 160, 182, 184 tvoli 213,216 webmappk 210
margk 37, 102, 129, 132 megjegyzsek 146 , mentes
mint oldaltpus 10 nzeti lehetsgek 143

kdkiegszt funkci 144
114 ltrehozsa 162
betk
dink> cmke 197 Kdnzeti lehetsgek parancs listk 143 ltrehozsa 59 kompatibilitsi jelentsek pontozott 59 104 szmozott 59 konkrt cmkk rlapok 151, 110
befoglal elemei 130 befoglal elemek 130 meghatrozsa 35 szemantikus lernyelv 51 XML adatok 113
kontraszt 82 knyvtrelemek 194
List Values prbeszdablak 171 Live nzet ll, 28 Local Info kategria 9 logk hozzadsa 136, 141
gyerekoldalak 193 hivatkozott fjlok 80 HTML fjlok 80 sablonknt 189 web kpek 84, 86 weboldalak II
menk
almenk 98, 102 hozzadsa az oldalhoz 199 legrdl 61, 99, 116 rlapok legrdlmenje 151
mensvok 97, 192 merevlemez
lczsa 214 Code Navigator 145 s szerveroldali-begyazsok 201 frisstse 194, 196, 199 ltrehozsa 194 meghatrozsa 194
M
Mac OS-alap rendszerek
belltsok 4 bngsz kivlasztsa 29 eltr opercis rendszerek 3

Manage Sites prbeszdablak 211
s tvoli szjtok 210 fjlok megjelentse 204 fjlok mentse 17, 91, 160, 182 szveg tmsolsa 13
226
Trgymutat
Method (Klds mdja) tulajdonsg 158

mezk
nyilvnos mappk 211 nyomtsi stluslap 48 , nyomtatas
felhasznl nv 155, 163, 165 jelsz 155, 157, 164, 166 nv megadsa 159 'S tlusok 159 szveg 160 ,
Microsoft Visual Source Safe (VSS) 210 mobil eszkzk 47, 100 Move CSS Rules command 146 Move To External Style Sheet prbeszdablak 146 moyie mappa 182, 184 mveletek visszavonsa 82
s szn 50 stluslapok talaktsa 48

nyomtatott mdiatpus 47, 48
O,
<object> cmke 183 objektumok
ltrehozsa 130 kls stluslapok trstsa 33 lblcek 132, 136 logk hozzadsa 136, 141 margk 102, 129 megtekintse Code nzetben 143 pldk 127 szvegoszlopok 139 tartalmi terletek hozzadsa 135 j oldal ltrehozsa 10, 128
oldalszerkezetek CSS
hozzadsa a knyvtrhoz 195 sablon 190 Smart objektumok 82, 85 szkript 197 rlap 159
oktatanyagok 5 oldal kompatibilitsi jelentsek 104, 150 oldal mkdsnek ellenrzse 105 oldalrszletek 41 oldalszerkezetek 126
N,Ny
navigci 90
fejlcek 132 fiJbb oldalterletek 132 grafikus bannerek 150 hivatkozsok 145 kls stluslapokba helyezse 146 lblcek 132, 134 margk 132
Open gomb 10 optimalizls 81 sszefgg szvegrszek 54, 57 oszlopok
e-mai! hivatkozsok 94 kls hivatkozsok 93 mensvok 97, 192 Spry fles panelek 101 webhelyen belli hivatkozsok 90
navigcis svok 97 New CSS Rule gomb 42, 66 New CSS Rule ikon 60 New CSS Rule prbeszdablak 27,35,64 New Document prbeszdablak 10, 128 New Editable Region prbeszdablak 190, 191 New ftom Template lehetsg
192
nzet lehetsgek II
a Dreamweaverben 10 thelyezse kls stluslapokra 146 <body> cmke 128 cmsorok 132, 142 CSS kls befoglal elem ltrehozsa 130 <div> elemek 127 fiJbb oldalterLetek 132 grafikus bannerek 138, 142, 150 httrkpek 79 helyrz elemei 141 hivatkozsok 145 kls befoglal elem
aligning 147 szveg 139 tblzatok 62, 64

overflow tulajdonsg 42
p
Padding (Bels marg) terlet 65 Padding terlet 61 , 129 panelek
elrejtse 17 fles paneLek 102 helyrelltsa 17
227
megjelentjse 17 R Spry fles panelek 101 ROS (Remote Development Spry harmonikapanelek 118 Services) 210
passzv FTP 212 Photoshop
msols/beilleszts 83 megnevezse kls 82 Smart objektumok 82, 85 szerkeszts Photoshopban 80

Photoshop (PSD) fjlok 83, 85,86,214 pipetta eszkz 17,20, 129 pixelek 132, 148 Point to File mdszer 92 Positioning kategria 42 Preferences (Belltsok) prbeszdablak 158 Preferences prbeszdablak 82 Preview/Debug Browser gomb 29 Preview in Browser bellts 28 progresszv letltsi formtum 183 projektor mdiatpus 47 Properties panel
szerkesztprogramknt
Save AH parancs 38 Save As parancs 33,48, 77 Save As prbeszd ablak 48 Refresh Design View ikon 23 Save as Template parancs 189 regular expressions (szablyos Save (Ments) parancs 11 Save Sryle Sheet dialog box kifejezsek) 71 rejtett elemek 157 Remote Development Services (ROS) 210 Report Qelents) doboz 150 Resample eszkz 82 Reset Origin parancs 148 rtegek 83 Rule Dennition
legrdlmen
147 Save Web Image dialog box 86 Save Web Image prbeszdablak 84 schema 113 scr attribtum 198 <script> cmke 197, 199 Script prbeszdablak 198 Scripts mappa 160, 182, 184 segdvonalak 147 Select AH parancs 142 Select Browser prbeszdablak 28 Select File prbeszdablak 158,198 Select Image Source prbeszdablak 14, 18,77, 78, 79 Selector Name mez 60, 128, 176 Select Sryle Sheet File prbeszdablak 197 Server Compatibility gomb
60, 128,
174
S,Sz
sablon objektumok 190 sablonok
formzs 58 hivatkozs ltrehozsa 91 kpek lebegtetse 45 rlap ltrehozsa 158

.psd kiterjeszts 214 PSD (Photoshop) fjlok 83, 85, 86, 214 Put parancs 214, 217
lczsa 214, 215 Code Navigator funkci 145 elhelyezkedse 189 fjl kiterjesztse 189 frisstse 191 gyerekoldalak 191, 192 hasznlata 189 hozzfrs 189, 190 ltez oldalak talaktsa sablon n 189 ltrehozsa az alapoktl 189 meghatrozsa 189 megnyitsa 189 mensv 192 mensv hozzadsa 192 szerkeszthet rgik 190 vagy szerveroldali begyazsok 201 zrolt llapot 193
212
Set Data Options kperny 115 SFTP (Secure FTP) 212 Sharpen tool
lests 82
Site Definition prbeszdablak 9, 211 Smart objektumok 82, 85 sorszmjel (#) 95,98, 109
228
Trgymutat
sortrsek 13,57, 167, 168 Source Code (forrskd) nzet 78 Source Code gomb 145 specifici ts 113 Split (Code and Design) nzet 22, 118, 202 Split Code parancs 23, 24 Split gomb 22, 169 Split'vertically parancs II Spry adatkszlet 112, 116 Spry adattpusok 96 SpryAssets mappa 102, 177 Spry Data Set> Insert Table prbeszdablak 116 Spry eszkzlers kdrszlete
stluslapok
Spry ellenrztt vlasztgomb-csoport 168

Spry eszkzlersok 69 Spry eszkzk 98, 113
kapcsold fjlok 199 knyvtrelemek 196 .

Spry harmonikapanelek 110 Spry hatsok viselkedse 111,155 Spry mensvok 192 Spry szvegmezk 96 Spry rlapelemek 97, 160, 168 Spry Validation Radio Group widget 168 Spry Validation Text Field 160 Spry Validation Text Field eszkz 163 SS! (szerveroldal ibegyazsok) 20 l
alkalmazsa 40 talaktsa nyomtatsra 48 csatolsa 48 CSS oldalszerkezetek elhelyezse 146 exportlsa 146 harmonikapanelek 120 hivatkozsai 33, 48, 174 hivatkozsok 47, 174 kapcsolsa CSS oldalszerkezetekhez 33 kapcsold fjlok 216 kijellse 17 ltrehozsa 34 ltrehozsa ms mdiatpusokra 47 mdostsa 17 nevek 146 nyomtats 48 sszetkzsek 46 szrmaztatott dmkk 35 szksgtelen stluslapok eltvoltsa 50 tblzatok 64 tulajdonsgai 37 tulajdonsgok bellltsa 149 rlapok 173
stlusok
<strong> cmke 25 <sryle> cmke 147
alkalmazsa 40
Sryle Rendering eszkzsv 49 SWF fjlok 181 szablyok
CSS 34 kls stluslapba helyezse 129 stlusok 25 szelektorok 64

szablyok kihelyezse 129 szjt gykrknyvtra 91 szjt szerkezete 34 szm adattpus 116 szmoZOtt listk 59 szrmaztatott cmkk 35 szeglyek
egybefgg szvegrszek
61
kpek 93 tblzatok 65 rlapok 157, 162, 166, 176

szelektorok 46
nevek 26 szablyok 64 szrmaztatott 35

szemantikus formzs 57 szemantikus lernyelv 57 szerkeszts
dmsorok 58 egybefgg szvegrszek 60 hozzrendelse 47 listk 59 szemantikus 57

stlusok hozzrendelse 49 stlus osztlyok 47
Fireworks alkalmazsban 80 kpek 80 Photoshopban 80 Split Code nzet 24

szerkeszthet rgik parancs
190, 191
szerkesztablak
prbt1,Szerver 210
staglOg serve r
prbakiszolgl 213
egyedi 39 meghatrozsa 39 nevek 39
II szerkesztfellet eszkzsvja 12,22,24
229
szerverek
fjlok automatikus feltltse 212,213 FTP 2 11 hlzati 213 helyi 213 IPv6-alap 212 kompatibilits 212 prbaszerver 210,213 tesztelse 204 web 213
szerverek tesztelse 204 szerveroldal i-begyazsok (SS1) 145,201
,
SZill
szkript objektumok 198 Sztr 68 szoveg
csoportjai 19 kivlasztsa 19, 36 legend (lers) 175 mretnek megvltoztatsa 20,37 szne 20
szveg behzsa 60 szveg cserje 71 szveg elrendezse 129, 131 szveg keresse/cserje 71 szveg kijellse 12 szvegmezk feliratai 160 szvegmezk rlapok 157, 159 szvegterletek 157,166
Table ikon 62 Table prbeszdablak 62 tmogat dokumentumok 5,6 Tanfolyam a knyvben sorozat l Targeted Rule lista
alkalmazand szably 40 alkalmazhat szablyok listja 45 clzott szably 26

tartalmi oszlopok igaztsa 147 tartalom
20 cmsorok 70 s nyomtats 50 Harmonikapanelek 121 htterek 16, 70, 121, 129 helyrz kpek 78 hexidecimlis rtkek 17 hivatkozsok 92 sziiveg 20, 27
szndoboz 17, 129 szinkronizls
bettpusok
T
tblzat ceHk 63 tblzatok 62
fjlok 87, 212 tvoli szjtok 212,213, 214

sznmintk
szn minta 129

sznvlaszt 17,27, 50, 92 szkriptek
elhelyezkedse 160, 182, 184 ellenrzs 173 Flash Player 184 kapcsold fjlok 197 Spry 177 rlapok feldolgozsa 173
ttekints 62 cellk 63, 66, 67 cm 66 cmsorok 62 formzsa CSS stluslapokkal 64 ID azonost trstsa 62, 63 ltrehozsa 62 msols/beilleszts 63 mdostsa 64 oszlopok 62, 64 sorok 63 Spry 116 szeglyek 65 szvege 63, 66
tblzat sorok 63
aktv 180 befoglal elem 130, 132 beillesztse 143 blokkolt 155 CSS oldalszerkezetekhez adott 134, 135 helyettest 183 msolsa 143 mdia 47 nem szerkeszthet 190 zrolt 190, 192
tvoli tvoli tvoli tvoli FTP szjt 210 kiszolglk 214, 216 mappk 213,217 szj tok
a helyi kiszolgln 213 csatlakozs 217 fjlok letltse 217 FTP 210 kapcsolat bontsa 217 meghatrozsa 210
Text align tulajdonsg
szably 131 szveg elrendezs 129

Text rndent gomb 60 Ticle mez 12, 136, 193
..
230
Trgymutat
TTY mdiatpusok 47 tkrkpek 216 tzfalak 212 TV mdiatpus 47 type attribtum 198 Type kategria 36, 37
157, 159 szvegterletek 157, 166 vlasztgombok 157, 167

URL-ekre irnyul hivatkozsok 93
szvegmezk
v
U,
gyfladarok 112 Update Files prbeszdablak vgdobozok 82 vglap 13, 119, 199 vlasztgombok 157, 167 Visszavons parancs 82, 144 Visual Aids mengomb 158 Visual Source Safe (VSS) 210 vonalzk 147 VSS (Visual Source Safe) 210
196
Update from Original eszkz 87
hivatkozs fjlokra 80, 92, 145, 160, 177 JavaScript 116, 160, 161, 197 kapcsoLd 196, 216 .fbi 145 mentse 11 nem mentett 80 nemrg hasznlt 10 nzetei 11 SWF 181 szinkronizlsa 86, 87, 212 j Ltrehozsa 10 XML 112,116
webszjtok
frissts az eredetifjlbL 82
r/apelemek
157, 158, 159,
163
rlapok 154, 180
ttekints 157 belltsok 159 elhatrolsa 157 eLkldgombok 172 felhasznlnv szvegmez 155, 163, 165 fieldset cmke 162 gombok 157 hibazenetek 162 hozzadsa oldalakhoz 157
hozzfrhetsget
w
Web 2.0 95 WebDav (Distributed Authoring and Versioning) 210 Web mappk 210 weboldalak
meghatroz tulajdomgok 158 jellngyzetek 157, 169 jelszk 155, 157, 163 Lersok 162 Listk 157, 170 papr vagy web 157 pldk 155 rejtett mezk 157 stfLusok 173 szeglyek 162, 166, 176
a Files panelen 33 lczsa 214 LLomnyzrofs kij bekapcsoLsa 213, 214 automatikus feltltdse szerverekre 212,213 cmek 136, 193 CSS oldalszerkezet kivlasztsa 10 .dwt 145 feltltse 216 FLV 183 helyesrs-eLlenrzse 68
Adobe 5, 6 Advanced nzet 9 Basic nzet 9 egyttmkd 214 forrsok 5 FTPszjtok 210 helyi 210,214 helyi szjt felptse 9 kls hivatkozsok 93 meghatrozsa 9 publiklsa az interneten 217 tkrkpek 216 dvz/kperny 9 webhelyen belli hivatkozsok 90
webszerverek 213 web r/apok 154
ttekints 157 belltsok 158 eLkldgombok 172 felhasznlnv szvegmez 155, 163, 165 fieLdsetek 162 gombok 157
231
hibazenetek 162 hozzadsa az olda/hoz 157

hozzfrhetsgi
tulajdonsgok 158 jellngyzetek 157, 169 jelszk 155,157, 163 lersok 162 listk 157, 170 papr vagy web 157 pldk 155 rejtett elemek 157
stlusok 173 szeglyek 157, 162, 166, 176 szvegmezk 157, 159 szvegterletek 157 vlaszt6gombok 157, 167 Windows-alap rendszerek belltsok 4 bngsz kivlasztsa 29 opercis rendszer eltrsei 3
x
XML adatok 112 XML (Extensible Markup Language) 112 XML fjlok 112, 116 XML sma 113
z
zrolt llapot 190
Kszlt a Gyomai Kner Nyomda Zrt.-ben, a nyomda alapts nak 128. esztendejben Felels vezet: Fazekas Pter vezrigazgat Telefon: 66/887-400 http://www.gyomaikner.hu E-maiI: knemyomda@gyomaikner.hu
Dw
, :
ADOBE DREAMWEAVER (54

A "Classroom in a Book"''' a legtbb pldnyban eladott szoftveroktat tanknyvsorozat. Segtsgvel gyorsan s knnyedn tanulhatjuk meg az Adobe szoftverek hasznlatt. A"Tanfolyam a knyvben" azt nyjtja, amit semmilyen ms knyv vagy kpzs nem tud - az Adobe termkszakrtk tmogatsval fejlesztett, hivatalos oktatsorozat az Adobe Systems Incorporatedtl.
u_
_ _o
HiI - III -"'"'0 .... _
Az Adobe Dreamweaver (54 - Tanfolyam a knyvben tizenegy leckt tartalmaz. A knyv vgigvezeti az olvast a Dreamweaver-alapok elsajttsnak folyamatn, s szmtalan hasznos tancsot, technikt oszt meg a program eredmnyesebb hasznlathoz. Vgighaladhatunk a leckken sorban, de kivlaszthatjuk csak a minket rdekl fejezeteket is. Megtanulhatunk weboldalakat kszteni, izgalmas, interaktv kezelfel leteket ltrehozni. Emellett azt is elsajtthatjuk, hogyan adhatunk oldalunkhoz grafikkat. szvegeket, videkat, s miknt hasznlhatunk Photoshop intelligens objektumokat.
!J - - ' 0 -"-,,>
LJ - ''''
.--~ .
liA Tanfolyam a knyvben sorozat messze a legjobb oktatanyag a piacon. Minden megtallhat benne, ami a szoftver magas szint hasznlatnak elsajttshoz szksges: egyrtelm magyarzatok minden leckhez, lpsrllpsre halad utas(tsok s a feladatokhoz szksges projektfj/ok."
Barbara Binder
Adobe Min65ftett Oktat Rocky Mountain Training
Mire van szksgnk a knyv hasznlathoz?

Az Adobe Dreamweaver (54 szoftver Windows vagy Mac 05 alatti verzijra, Internet hozzfrsre. Megjegyzs: A Tanfolyam a knyvben nem helyettesrti az Adobe Dreamweaver (54 szoftver dokumentcijt, tmogatst, frisstseit, illetve a regi sztrlt tulajdonosoknak jr tovbbi
elnyket.
_ ~ I _
Wt _-...-.....
( -
- )
~foj . . .
UM_T."''' ' ... _
ISBN: 978 963 9929 08 1
ra: 4200 Ft
ADOBE
PRESS
perf~ct
29081
ki a d www.perfactkiado.hu

Adobe - Dreamweaver - CS4 - Tanfolyam - A - Kkonyvben - (OCR)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Adobe - Dreamweaver - CS4 - Tanfolyam - A - Kkonyvben - (OCR)

Diunggah oleh

Hak Cipta:

Format Tersedia

Dw

A Dreamweaver CS4 gyors ttekintse . ............... . ........... 7

Stluslapok hasznlata . .............................. . ......... 31

Szvegek, listk s tblzatok kezelse .......................... 53

Tervezs kpekkel ............................................ 75

Hivatkozsok ltrehozsa . .......... ... ....................... . 89

ADOBE DREAMWEAVER CS4 V

Interaktv oldalak ltrehozsa . ................................. 107

Oldalszerkezetek ltrehozsa . ................................. 125

rlapok ltrehozsa . ......................................... 153

rlap ok formzsa stlusokkal. .. . ........................ . ............ . . 173

Flash elemek hasznlata . .... . .............................. . . 179

10. LECKE Hatkonysgnvels ......................................... 187

11. LECKE Publikls a weben .......................... . ............... 209

Trgymutat .................................................... . ..... 207

szofrvertermkeket bemutat hivatalos oktatsorozat rsze.

Mit Tudunk Letlteni?

Leckefjlok ... s mg sok minden ms

Adobe Press mappa*

Community Help mappa*

ADOBE DREAMWEAVER CS4 3 Tanfolyam a knyvben

CS4 Resource Center*

Adobe Cerl:i"fied mappa*

APreferences prbeszdablakban vltsu nk az Accessibility (Hozzfrhetsg) belltsokra!

ADOBE DREAMWEAVER CS4 5 Tanfolyam a knyvben

Tovbbi hasznos linkek

Az Adobe Dreamweaver CS4 termk honlapja: www.adobe.com/products/dreamweaverl.

Dreamweaver-bv tmnyek: www.adobe.com/products/ plugins/dreamweaver/.

See Umbria with us

You have the fun. We do the work.

1. LECKE A Dreamweaver CS4 gyors ttekintse

Az oldal megrekintse Live nzetben vagy

az Elinduls fejezetben tallhat. a 2. oldalon.

Szjt definilsa Dreamweaverben

... """" .'?W.;!.'

fo"':I Dcxumenu/DW al/imagH

Unu ,.&.tM to:

m. Unit ChK., to d.c.tl tml' ,,"bt".t rmr to

This addreu is uled kw s_ ,.1&1," Ih'tu.,.nd fOl

ADOBE DREAMWEAVER CS4 Tanfolyam a knyvben

melletti mappa ikonjra! Amikor

Opf!n a RecelU !tem

Top r.ealUrtS (videos)

XSlT CEtlti,~ 19')

..... &S<r IPtSc.lpporl

1. LECKE A Dreamweaver CS4 gyors ttekintse

(O] dokumentum ltre-

Az dvzlkperny a nemrg hasznlt fjlok listjt is megjelenti. A fenti

CSS stluslap kivlasztsa

ADOBE DREAMWEAVER CS4 Tanfolyam a knyvben

XSLT (Fn.grrw:ntl i:!. Actlon.Scripl:

[---""- ...... 1 rtg",

TWQ (olumns . U'MdUn ln pixel WIth Im

Coldfusle n ...!... CoIdFUlJon cGmpotltllt

Anach CSS mt:

1. LECKE A Dreamweaver C54 gyors ttekintse

Az oldal cmnek mdostsa

5ee Umbria with us

Tipp: Az egeret lenyomott gombbal hzva brmilyen szvegtartomnyt kije//hetnk.

5ee Umbria with us You have the fun. We do the work.1

ADOBE DREAMWEAVER CS4 Tanfolyam a knyvben

You have the fun. We do the work.

teuglat teug!at. Jnteger

~~~==.== Font-fAmily: GeOfgl.JI. "Tttnes New R.0mvf. T /mts, Sttl'