Anda di halaman 1dari 123
Seu Can Mea eRe Dekel se ace MC Gree ee eeu NaC eerie Fekete Istvan Peer eer A KONYVBEN TANFOLYAM ADOBE® DREAMWEAVER’ CS4 boir-te (SR) ol Aaya Nee) o-oo] ee AI Er Adobe Dreamweaver CS4 Tanfolyam a kinyvben © 2016 Perfuct-Pro Kft ‘Minden jog fenntarwva! ISBN 978-963.9929-10-4 A konyv eredeti cime: Adobe Dreamweaver CS4 Classroom in a Book A magyar kiadisért felel6s a Perfact-Pro Kft ‘Authorized translation from the English Language edition, enileg Adobe Dreamweaver CS4 Classroom in « Book, {st Edition 032157382X, by ADOBE CREATIVE TEAM, published by Pearson Education, Ine, publishing as Adabe Press, Copyright © 2009 Adobe Press. All rights reserved. No part ofthis 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, without permission from Pearson Education, Ine, HUNGARIAN language edition published by Perfact-Pro K&L, Copyright © 2010 Perfact-Pro KR. Adobe, the Adobe logo, Classroom in a Book, Dreamweaver, Fireworks, Flash, and Photoshop are cither registered tradermarks or trademarks of Adobe Systems incorporated in the United States and! or other counties. Apple, Mac, and Macintosh are trademarks of Apple, registered in the U.S. and other counties. Microsoft, Windows, and Windows NT ate tradembarks of Microsaft Corporation registered in the USS. andior other countries. All other trademarks are the property of their respective owners. Barmilyen masolés, sokszorosits, iletve adatfeldolgo26 rendszerben thrténé tirais a kiads ef6ze- tes jrdsbeli hozzdjirutésa nétk ios. Az it kO20Itinformécidk kizdrSlag az olvasé személyes haszndlatéra készltek, Jelen mi felhasanélisa mis KOnyvekben, kereskedelmi szoflverekben, adatbaézisokban csak a kiadé el6zetes irisbeli hozzdjérulésdval lebességes Asszerzé és a kinds a tle elvirhat6 legnagyobb gondossdggal jrt el a k8ayy és a programok készitése sorin, A kényvben illetve a programokban talithat6 esetleges hibakért, a hasznalatukbdl ered esetle- ‘ges kirokért sem a szerzb, seta kiad6 nem vallal semminemtfelelbsséget. Forditotta: Pataky Zsofia Szakmailag Jektorilta: Magdcsi Mérton Nyelvileg lektordlta: Késa Gyorgy ‘Tordelte: Fontolé Stidid Felelds kiadé a Perfact-Pro KR. igyvezetd igazgatdia 1101 Budapest, Pongrac it 9b. Tel: 260-0990 Fax: 431-0028 info@perfact.hu vwoww.perfactkiado au Elindulas 1, LECKE MicTadunk Lerten? Leckefijlok... & még sok minden es Akinds megiegyaése Lessons mappa ‘Adobe Press mappa" ‘Community Help mappa" CS4 Resource Center* . Adobe TV mappa* ‘Adobe Certified mappa" lofeltéxelek .. A program telepitése A leckefijlok letihése Alapbeillitisok ‘A munkafeliler bellicisa Tovabbi informécié a Dreamweavers6l Frisitések keresése ‘Tovabbi forrésok ‘Tovabbi hasznos linkele Kedves Olvas6! A Dreamweaver CS4 gyors attekintése .. Allecke steckintése Sadie definidlisa Dreamweaverben Az idvirloképerny’ kezelése CSS stlluslap kivélastisa Az oldal elmentése A dokumencucanézeciivalsatisa ‘Az oldal ciménck médositisa Cimsorok médositésa Sraveg beillesaése G) képek horziadisa SS sulusok kivilaszrisa és médositisa Az oldal hatcérszinének médoshisa Hatcérkép heileszeése a eimsorba Snéveg bertnipusinak & seinének beilicisa Snavegmérer médositisa A Cade nda, illewe a Code and Devgn née haszndlaca A virszintesen vagy flgglegesen osziont nézetek haszndlata A Praperis panel hasenlata Oda elénézete Live nzetben Oldalk elnete bmgeszdben Gsszefoglals Vv ADOBE DREAMWEAVER CS4| V ! | Elindulae Tanfolyam a kényvben 2.LECKE Stiluslapok hasznélata. . : feces Odalon bei hivatkordsok érchonisa 3 Aleck eine, vtecveen en gp ‘x Aja Spry megimertse “97 ‘Akér dokumentum megeekinte | : 2 pty mentsivok bests. 2 . Kal sfuslaptarsiisa se oldalhoe : : mig AA Spry menisiv megielenésének resis. Q A saijesverkezet és a leckefelépites elevgach an : we Spry files panelek fétechozésa Log Uj C8S-seablyok léerchozisa ...-, a 034 Avolda llendrzése 106 Sedrmanratoe(descendanc) ck stilusinal meghatironisn 2135 Osszefoglalé . 107 Expt outok leuchorsa., . Ll cone BI) LECKE Interaktiv oldalak létrehozasa 108 | llusok ahalmazdsa 2 : G0 sutckintése .- Stteteesstreevenes : Egyedi osctdlyok alkalmarisa oldaleésieken no en a oe eine bck Behaviors) megismerése 20. 108 Képek lebegrerése . . : ce 44 ‘A kész dokumentum megeekintése » tt i Stiluslapok léechoudsa mis médiatipusokbon ” Spry-hatésok viselkedéseinek alkaliardsa see cee 9k Rendering ecksns meget “i no a7 MIL adacok hasendlace wees : : ie Kv stluslap dtalakiise nyomatisca wine stlulappd epitése Spry septségivel os Nemliinator olan ce ” $ Sprague ENS ISSN A nyomtatis’ stinhelyesséy bells. 50 Shop banmonikapaneicklechouisy re Suikségielen silsok elevolités Spry harmonikapanel hozzéadésa .. 9 Ossefoglald.. : | “Tovdbbi panelek hozziadésa : : Tipo 3. LECKE Szévagek, listak és tablazatok kezelése . ‘Spry harmonikapanelek testresrabisa : Sone 123 Allecke ateckintése ...., . wee 54 Sega . 4125 {kgs dokameneum meen : 54 7.LECKE Oldalszerkezetek létrehozasa. ae vege bevitele : fo 54 2 dtckini Cimsorok, list & egvbefigg sabvegrcenck idcahovies 57 eee a negikintc : us Cimsorok létrchorisa.....5,. : 38
clemek létrehozisa az oldalsrerkezetet meghatiroz6 stllusokkal . aed l ‘Seimozote és pontozottlistik létrehorisa : : 59 Az oldal létehozdsa és @ cimke meghatdrozlsa ..-......ee0cceee v Epbefiggs coveprck letrehozisa : : +60 Kiilsé befoglalé elem lécrehozisa . ce 2 blézatok léwehowdsa. SOS i etek Ietehorisa, «s.r. ys vessesivsveevsvseveveueeveeses 332 blak forme C88 sop oS aT Tarlton 0000000000000 A dokumentum helyeststi ellendnene 68 Hielyérs6 elemel becntiiea og Spry esekizleirésok hasznilata. . cee : 69 A Code névet megismeréon bee . “M3 Sabvegel kerestse és eseréje : a et 7 ‘A Code Navigator funkcigk hasendlata. corre MS Osszefoglals ... a : 273 CSS seflusok exportilésa ese. ce 7 I 4.LECKE Tervezés képekkel .. Vonalzék és segédvonalak haszndlara 150 Alecke drekintése 1.76 Ae oldalszerkexe ellendrase : 152 ‘A kése dokumeneamm megteintése % Ossefoglals .. 183 Kép beilleszrés. - 76 B.LECKE rlapok \étrehozasa.. y Helyérzd kepek hasondlata . mn Pea hehe tuehineées a bette I Hareéekpel hasondlac Sereeeeneenennn send ‘Akkést dokumentar megtekineése vite reee Re A Properties panel haszndlata képek syetkesztésther : : 80 Igmerkedés az Srlapoklal see nag A Dreamweaver graikai esekizei .. see : 282 Grlap Wétrehozssa az oldalon : . . iS Masolis és beilsies Phocoshopb : SII Saineges iblzatclermek bess. : i ‘Ax Adobe Bridge alkalmazis leése «20117 84 Hocaterhers drlpok rubjdonsiganak beds...) arts Photoshop Smarc objektumok haszndlaca MS : 85 SaBvegmensk hasenilata : : ae Ossefoglas.... ve 88 Spey stvegmendk esata : 18 5.LECKE Hivatkozasok létrehozisa.... . . . = 89 Fieldser cimke lérehozdsa. .« ee 163 | Alecke ielenuese 7 “ 5 Febhaszndlnev-&seltodmerdke erchonsa 8 j A kész dokumensuim megteinxie : a II 90 simenk bss. 166 1 Hivatkozés webhelyen belli oldalalra a) Sabvegterilerekbeépicse Ie Kallsé hivackozis létrehozisa..... . wane 93 ‘Vilaszrégombok ltrchordsa 169 Esmail hivatkordsok létrehovisa |... cell 94 Jelblbnegyzetck besearisa vil Elindulés 9. LECKE 10. LECKE 14. LECKE Logicdlé meni haszata 170 Ekilddgomb (Submit button) lech : 172 Uilapoe forma susokal. 173 *SStsabalyok lkalmanisa 173, A SpryAscess mappa és ahivatkoror drlapmesdk 7 Ossrefoglald Flash elomek hasznalata. A lecke dtrekintése ‘A-kész.dokumentum megrekintése : 180 Flash animéci6k elhelyezése az oldalon 180 Flash elemek beigyazisa 183 Flash video homdadasa at oldalhoz oe 183, Ossuefoglalé : Hatékonysagnévelés . Alecke éttekineése A késr dokumencum megtekineése : Sablon lerehoniss, C oe Szerkesztherss€gidk beillesarése 190) A sablonok feissicése 191 Gyerekoldalak lerehordsa 192 Ismédlédé elemek (Library) 194 Kényrtirelemek létechozisa : 194 Kényvticlem beillesstése : 196 Osszckdtés kapesolédé Fijlokkal : 196 ‘Amenii hozzéadsa 199 Kényvedrelemek fessicése : 199 A serveroldali beigyazisok hastndlata 201 Suerveroldali bedgyazisok lérehonésa : 201 Snerveroldal bedgyazisok beilleszeése 203 Szerveroldali bedgyazisok hozziadésa S2éjtok oldalaihor : 206 Szerveroldali bedgyazisok frisitése 1.206 Osszefoglals : 208 Publikalas a weben Allecke dttekintése “Tavoli webhely meghatirozisa 210 “Tivoli FTP seaje bedlicsa aut Kapesolat léthozdsa helyi vagy halézati kiszolgiloval 2213 Mappak és fijilok dledzisa - 214 Osszefoglalé : 218 Targymutaté - Elindulas ‘Ax Adobe" Dreamweaver" C54 a piacvezets weboldalszerkeszt6 szoftver. Aki hivacisszertien, ake sa- jit villakordsunk réscére szeretnénk weboldalakat késziteni, a Dreamweaver biztostja a professzioné- lis végeredmeény elérésther srikséges Osses esakét. Tanfolyam a kényvben ‘Az Adobe Dreamueaver CS4 Tanfolyam 2 hinyuden kiadwiny 22 Adobe sal késatetgrafkal és kiad- vinysverkesz6 szofiverermékeker bemutaes hivatalos oktatésororat rése -Anegyeslecktk dgy épilnk fl, hogy mindenki a st stmusa strinehaladhat. Az Adobe Dreamweaver (CS ead felhasndl elsethajdk a program kezlches sukslgesalapves ismereteket, a tapasetal- tabb felhasundlknak pedig seimor flee Runkcib, Kiztk asofverlegijab valozaténak hasanlatéval kapesoltostippeker és médszereke is bemurat a kay Bara kiadviny leckdilépésrl epése wgigneoeike az olvas egy adore Fladat megvaléstisin,leetéséger adnak a flfedentsre és kisrletenéste is. Sorban i vigighaladhacunk a kGnyy fejzetein, de elvégezherik csak az érdeLdéscninek vagy svemélyesigtnycinknek megfelels leche is. Minden lecke dssefogals réssael veg, amely kérdeket és vlasolac eartalmazatanuleak Aismeélsée. Elindulas Mit Tudunk Letélteni? Leckefajlok... és még sok minden mas Az Adobe Dreamweaver CS4Tanfolyam a kGnyvben cin kadvny gyakoratalnak elvégeésdher saiikségesleckefijloka, lee olyan tovabbi anyagokat tartalmaz, amelyek eldsegitik az Adobe Dreamwear C54 mind alaposab elas, 6s nagobb hatchonpesgel totes needin ‘Av alabbiakban ezen anyagok tartalmac részlecezzi, hogy Aa albikbon een npg levezaik, hogy a kedves Olvasé gyorsabban megralija ‘A kiinyvhibtarioxéleckefijlokac és melékleteie az albbi clmen tudja letlten Inept /wwrw perfactkado hu/mellekletek Akiad6é megjegyzése A Peachpie Press semmilyen, sem kifejezet, sem vélel A each yen, ejevet, sem vélelmezett garancide vagy katelezettséget nem villal a fic, pak mindségées eljeseményée, forgulomképesgére vagy adot cfr valé megfleld ségére, Sem 2 Peachpit Pres, sem viseonteladéi és Ugynikei nem felelsek a szover hasendlatibol vagy hasendlhatatlansigdbdl kéavetlenil vagy kiavetve adédd kivokert, A ltothetd wofiver és médiaiik sea joga a sera & a Peachpit Pes ile meg. On nem bitirlagosjogoultsigt hap ezen program és ilo hasenlacira.Egycereegetensmiegpen asznalhagjaeackt. Halézatonkerestl nem oszthatja meg erket a fijloka hb sedmitdgép kozbe. A fijlokae aban az csetben masolharja dt egyeten merevlemezte, amennyiben bizonyitani sud hogy render a King uladonjoival. Nem lhe visas nem feithage eons oe Yagy 4 médiafijlokat, A Peachpic Pres risbelibelegyezésenélkll nem médosthatja, & nem fort hatja le sem a szofivert, sem a médiafijloka,ilerve nem is exjeszthet!azokae © 2009 Peachpit Press. Minden jog fenntactva Lessons mappa A Lesons app ell inden lcci on lekénck se almappdi van, Az eyes lec ghd elt md sj stcsktlekefilolac mersemeninies nS Rel mathe ld Adobe Press mappa* ‘Az Adobe rermékek telies vilasarékitlefed6 Adobe Press kiadvinyokr6ltallunk ic informécise Community Help mappa* A Community Help (Kozdsségi siig6) incegralt online kérnyezet,ahol dtmutatést, sotdnzést és th ‘mogatést kaphatunk a cermék hasendlatihoz. Ax egyedi ketesési funkeidval kénnyedé sl svimunkra leghasonosabb tartalmakat * *Sonyeten megs ADOBE DREAMWEAVER CS4| 3 Tanfolyam a kényvben CS4 Resource Center* ‘A mappaban a Peachpit Press C54 termékekielfolalkons kiadvinyaiel alélunk informéci. Adobe TV mappa* Kapcsoljuk be az Adobe TV How-To (Hogyan téreénik) csatornij, ahol egyebek kézdttrabb suéz “oktatévideds talaunk az Adobe Creative Suite 4 cermékekrdl Adobe Certified mappa* ‘Téjékozcatis: carcalmaz, hogyan vilhatunk Adobe Minésitert Seakért5v. “A kiadonak nincsen som joga, sam lehetésége @ mappdk tartalmét,iletve az abban taléihat6,hivatko- ott angol nyeivd intemnetes oldalaka lforditani,igy ezeket angol nyelven tekintheljak meg. Eléfeltételek ‘Ax Adobe Dreamweaver CS4 Tanfolyam a kinyvben leckéinck elvégeésther rendelkezntink kell azokkal a gyakorltiismeretekkel, amelyekkel rutinosan kezelni cudjuk szdmitdgépiinket és annak opericiés rendszerét. Ismernink kell tovabbi az egér miikiidésé, az ltalénos mentik és parancsoi hasandlaté, valamint a féjlok megnyitésinak, elmentésének és bezdrisinak folyamacitis. Ha gy érezzik, hogy ismereteink frsstésre szorulnak e tekincetben, érdemes cher fellapoani a Microsofe Windows vagy ‘Apple Macintosh opericiés endszertinkhiz kapoct dokumenticiér. Megjegyzés: Ano! a parancsok az egyes operas rendszerekben elt, eldszir@ Windows- pparancsok szerepeinek a leirésban, majd a Macintosh-parancsok. Példéul: Ossik le az Alt (Windows), ‘etve 22 Option (Macintosh) bilentyt, maja katintsunk a kepmez6n kivl oreo! ‘Alknyy ckésitésesordn fehételeni, hogy az Olvasé rendlkezik internet hossfeése, gy a Knyv hasandlathoz sakségeslckefjlok és egydb mellkleekeleése, letltése nem okor nehéestget. A program telepitése A-kényy lecktinek megkeadése elt gybzddjink meg rbla, hogy a sedmtgépes rendszertink megfe- lela Dreamweaver hardverkivetelményeinek, vagyis, hogy megfclelden konfigurilt, & minden szk- séges sroftver telepitve van rjc ‘Az Adobe Dreamweaver CS4 alkalmanist a kényvtl fggetenil kell megvésirolni. A telepitésre vonat- lo réscletes leds az Adobe Dreamweaver CSS telepitGlemen How to Install (Telepits menet) alloms nydban tldlhaté meg. Elindulas A leckefajlok letéltése ‘Az Adobe Dremeaver C34 Tanfolam a kinyvben lckéi meghatérozot fortstijlokat hasandlnak, \ Aleckék cljescschee a hap://wwwsperfacthiado.hu/mellekltek oldal6l tlk le merevleme Hinkre, és szikség estén csomagoljuk ki az lloményokat. 1 Hozzunk lévre sximitégépink sedmunkra megfelel6 teriletén egy dij mappa, és adjuk neki a DW {ij mappa, és adjuk neki a ‘CIB neves. Erdemes ax Sze leckemappat a mereviemea ugyanazon kOnyvtdrdba helyeani. Baa fkinyvtic lee a2. leckében lett helyi sade gyOkerkonyvtéra Eher kévessik az opericiés rendsverdinknek megfelel6 eljérést: + Windows: ell ki a Ineéadbn ac 2 mappic vagy meghseé,amelyben kre akarjuk hoz ax ij Konyvtirat, majdvilasouk ia File » New > Folder (Fl > Uj > Mappa) menpontt, Eat ks serden ajuk meg a2 j mappa neve ‘+ Mac OS: Valasszuk ki a Finderben a File > New Folder parancsot. Adjuk meg az Preferences (Szerkesziés > Bedilinésok) (Windows), ilewve a Dreamweaver > Preferences (Macintosh) meniipontot 3A Preferences pasbeseédablakban vilesunk 22 Acceniblity (Hozzéfrberid) bellcésokrl 4 Hagyjuk a Show arrbutes when inserting Tilajdonsigok megjlenitée bescirdskor vilasesSpanel- ben mind a négy jlolénégyzetet bekapesolva! = 5 Kactintsunk az OK gombral A munkafelilet beallitasa ‘Az Adobe seimos munkafelilect felkinél, amelyek kéabtt a killinb628 szdmitdgépes rendszerck & cegyéni igénycink alapjén valtogathacunk. Ehher a knyvhic a legjobb valasatds a Classic, azaz a klasa- szilus feller haszndlata, ADOBE DREAMWEAVER CS4| 5 Tanfolyam a kényvben 1 Keressik meg az Adobe Dreamweaver CS4 alkalmazisban az Application Bar (Alkabmazse) estkira! Amennyiben nem lithae6,vilasszuk ki megjelenitésdhes a Window > Application Bar meniiponcot! 2. Aralapértelmezett munkafelilet a Designer (Tervezd) nevetvseli. A képernys jobb Fels résadben léxé legbndil6 menit hasendlatval més munkafeliletek is vlaszthat6k, példl a Coder (Kédiré), a Classic vagy a Design Compact (Tervecés kompatt). Egyes munkafelleteknél a Inset (Beszinis) ‘menii nagyobb panelben jelenik meg, masokndl kisebb, tmérebb formaban. 3. Aleckék végrehajuésthoz a Classic munkafelileter vilassauk, mivel a konyv legrObb illusztrécidja ext felilleter 4brazalja, benne az Insert meniisévval. Amine befejeaiik a kényy leckéit,kisérleter ziik 6s valassouk ki a simunkra legmegfelelabb bedlitést! 4. Avalkalmanissiv elejeésher vilasouk ki ismét a Window > Application Bar meniipontjst! Tovabbi informacié a Dreamweaverrél A Dreamweaver-panelekre, esekiakre & mis alkalmazdsokra vonatkozs teljes, naprakésinformécié- kkért ax Adobe weboldaléra litogathacunk el. Vilassauk ki a Help > Dreamweaver Help (Siig > Dream ‘weaver Sigs) meniipontos, amivel a Dreamweaver Community Help (Kozdsdgi tiga) weboldala jutunk Ine a Dreamweaver Sigéban és a alkalmazis hasandlatic cimogaté dokumentumok kia béngésche- tink, covibbs mis, Dreamweaver-felhasandldk szdmira fontos weboldalakhoz fériink hozz4. Lehetsé- sgiink van az Adobe Siig és az alkalmands hasandlatéc timogaté tartalmak célzatt keresésre is Ha incernetkapesolat nélkilcervezaik hasendlai a Drearnweavert, a Dreamweaver Sig6 akcualis ver- 26}it a worw.adobe.com/go/documentation vicholdaleél PDF formiturban i letlthesji ‘Tovabbi dtletekér,rippekére, médszerckere és a legfissebb termékinformécibkért Iitogassunk el a community.adobe.com/go/help/main cimen cléshets Adobe Community Help weboldalra! Megiegyzés: Ha a Dreamweaver észlell, hogy az alkalmazés megnyitasakor nines intemetkapcsola- tunk, a Dreamweavorhoz kapcsolédé HTML suigéoldalak megnyitasahoz valasszuk kia Help > Dreamweaver Help menipontot! Tovabbi naprakész informacioért tekintsUk mog az online sugéolda- Jakat, vagy titsdk fe az aktualis Dreamweaver Sigé POF valtozatat! Frissitések keresése ‘Az Adobe idél id&re suoftvertrisscési eheréségeker kindl fel. Becker a frissitéseket az Adobe Up- dater hasendlatéval és aktiv internetkapcsolattal érhetjik el 1A Dreamweaveren bell vilassruk ki a Help > Updates (Stgd > Frisitéek) meniipontot! Az ‘Adobe Updater auromatikusan keresi az Adobe-szofiveriinkhéz eartoz6 frssitéseker. 2 Valasszuk ki az Adobe Updater pérbeseédablakéban a telepiteni kivint fisstéseket, mada le- toledshez kattintsunk a Download and Install Updates (Frisitések lsaiese stelepitése) gombral Megiegyzés: Ha szeretnénk személyre szabni a jOvdbel frissitéseket, Kattintsunk a Preferences (Bealitasok) mendpontral Beallithatuk, hogy az Adobe Updater milyen gyakran keressen frissitési IehetSségeket, hogy beszonositea a fnssitésre szorulé alkaimazasokat, iletve valaszthatunk az auto- _matikus vagy manudls let6ités Kézott. Az Wj bedlltésok jovahagyasahoz kattintsunk az OK gombra! Elindulas Tovabbi forrasok ‘Az Adobe Dreamweaver CS4 Tanfolyam a konyvben nern helyeesiti xz alkalmarishor taswoes ete- deti doknmencicidt, é nem nytije drfogs ismertesét az Adobe Dreamweaver CS4 minden egyes Fankei6jirdl é lehetSségérd, Csak a leckékben ténylegesen hasznale utasitésokat és beillcésokat targyaluk a kémyvben. A program funkciginak eéseleresebb lefisiért érdemes a2 abbiakban fel- sorole forrsokatdttekinten: + Adobe Dreamweaver CS4 Community Help, amit a Help > Dreamweaver Help kivélaseisival hhetink el, Eo a sig olyan incegedle online kérnyczet, shonnan dtmutatist, Ssexéndrést és 14 mogatist merithetink az alkotishoz. Saji beillcisaink szerine kereshetink a témahor kapcso ado, seakére6k dltal kivélogatotetartalmak kz az Adobe.com-on és mas weboldalakon. A Community Help egyesci az Adobe Sigs, a Suppore(Timegatds), a Design Center,» Developer Connection (Fejleseti hapesolacok) €s a Férumok informécisit, és azokat kival6 online carta rmakkal és a felhasendl6k munkijc segité legjobb,legiissebb Forrisokkal egésalt ki, Oktat6- anyagokat, technikai segitséger, online termékinforméciokat, videdkat, cikkeket, anécsokat & technikikat, blogokat, példakat és szAmos més fortis taliihatunk 22 okdalon. + Adobe Dreamweaver C54 Support Center, abol az Adobe.com tamogaté és oktat6 anyagai ké- z6te béngészhetiink. Ezek cléréséher Litogassunk el a www.adobe.com/support/dreamweaver! oldalral + Adobe TV, shol az Adobe-termékckhex kapcsoldd programokst talilhatunk. Tebbek kévdee egy profi fordsok szdméra létrehozott illetve egy How To? (Hogyan rarténik?) csatornit, amely tb sez, az Adobe Dreamweaver CS4-her & a3 Adobe Creative Suite 4 ezenékesaporthoz kapesolé- 6 flmettartalmaz, Ezek megrekintéschez itogassunk el hetpe/tvadobe.com/ oldalal Tovabbi hasznos linkek + AzAdobe Dreamweaver CS4 setmék honlapja: www.adobe.com/products/dreameaver! + Dreamweaver-fehasindléférumok az Adobe-termdlckel kapesolaasflhasandl6itpasotalatok + Dreamwesver Exchange bivicenénye, funkcidk, kbdok stb. clérésther: www.adobe.com/cfusion! exchange! + Dreamweaver-bovitmények: www.adobe.com/products/ plugins/dreamweaved/. Kedves Olvaso! [Elise ie srereanénk mneykOszbnni, hogy kiadvinyunkac vilaszeotta az Adobe Dreamweaver C54 rcgismerésther. A kényvben saerepl6 példak, mivel forditésrl van s26, az eredeti (USA) méreékegy’ ségekben késaltek. Hogy a elds és a hor2éjuktartons magyarizatok a kényvben értherbek legye- rick, mi is maradtunk ezeknél a mércékegységcknel, szabvinyokndl. Magyarorsegon metrikus mée- ékegységeket, Eurépai seabvinyokae haszndlunk, Sajt fladatoknal czeker érdemes basen Reméljk, hogy kinyviink nagy segistg lesz az Adobe Dreamweaver C4 haszndlacinakelsajcicésiban, its 6 a seakmai Wltorok Reo aoe Rm) A Dreamweaver CS4 gyors attekintése You have the fun. We do the work. Game enjoy the vacation of 3 feta Sedo the work and you have the fn! Su tour trough the hil towns of Cities unequal. Fo to meek, yout enjoy worry-free pampering. Every dn dhe ett a Sime Ol nine re ndude. tanch Sonar ow Trove nar crates IS Saseen ten wonder ay tip tote suronding BeBe, ‘archi wm or ary hte! eexonmeadatins cue het ib, pod, nd Nearby Saree eneaccoment our weskend eo seule By ae your mal rs anys rove your excalet Cet Ebben a leckében egy peldaweboldal elkéscitésivel Rezdjite meg az ismeriedéss «az Adobe Dreamweaver CS alkalmazisal. ‘| 1. LECKE, A Dreamweaver CS4 gyors attekintése Alecke attekintése A kivetkezbker fogjuk megranulni + Szdjt definalésa Dreamweaverben +A Dreamweaver kezelfeliletének hasendlata + Uj oldal letrchozésa a CSS (Cascading Style Sheets) oldalszerkezecel + Dokumentum elmentése + Oldalcim é: cimsorok médositisa + Sabveg beilleszxésekilsé dokumentumbol + Képek és hiceérképek hozeéadisa + CSS stflusok létrehozésa, médositésa és kivilasatésa + A Code és a Code and Design nézes hasendlata + Az oldal megeekintése Live nézetben vagy bingésidben Ennek a leckének az elvégrése kérilbell 60 percet veseigénybe. Amennyiben még nem tercik meg, ‘ltsik le hetps//wow,perfactkiado.hu/mellekletek oldalrdl a Lessons mappa mereviemeaiinlere, suikstg esecéncsomagoljuk ki & keressik meg a LeuonOl, valamint az Images (RépeR) mappat! Mogjoayzés: A lockoféiok lettése az Elindulés fojezetben talthatd, @ 2. oldalon. A Dreamweaver mesterien megteivezett CSS-sterkezet sablonjaic hasendlva pillanatok alae szinvo- nalasoldalakar készithetdink, amelyeker mér esak személyes tartalmunklal kell feltdlteni Szajt definialasa Dreamweaverben Ennek a konyynek a leckéi egy Dreamweaver sjton bell mikének. A Dreamweaverben ast hely ben trol vltozaréval (local site) dolgozunk, amely seémsitdgépiink merevlemecének egy kinyvtirdba van lementve. Amint a s24jt késeen alla publiklsra (isd a 11., Publiblés az interneten cir leckée), akdkor mar elkeadiink a sac egy webscerveren, nyivinosan eléthetden tiolt, tivol vltozatin (remote Site) is dolgoani. A kée weboldal konywdsserkezete és Ela gyakosailagegymas tke. Elésair hozzuk lee a sedje elyi vileozacét! ADOBE DREAMWEAVER CS4 | 9 Tanfolyam a kényvben | 1 Inditsuk el az Adobe Dreamweaver C54 alkalmazést! Ha mose inditjuk el els6 alkalommal, ki kell tolteniink az adatokat a regisatricis képernyBn. 1 2 Valassauk kia Site > New Site (Sedjt > Uj set) meniipontot! Ekkor megjlenik a Site Definition for DW CIB (Uj sedjelrebozisa a DW CIB mappaihaz)cion pasbeseédablak, Amennyiben nem “Adloanced (Specs) néretben vagyunk, kattinesunk a2 Advanced gombra! Baca Site Definition parbesaédablak Basic (Alap) ndzete kevésbé dsszetetinck tinik, tobb eldzetes informacié beviteléeigényli. Ha az Advanced nézveet valasrsjuk, csak a s2ije meghatérondsihon suiikséges adatok egy 1és2ét kell beilltanunk ahhoz, hogy nekidllhassunk a munkinak. 3 Amenayiben suikstges,vilasseuk kia Site Definition parbesnédablak Local info (Hebi valtcat data karegrisjt A Site name (Sede neve) meribe gépeljik be a DW CIB cimet, majd issitk lea Tab billenyi! A susjtok neve a Files (Féjlot) panelben vannak felsorolva, és taliban egy adott projekthex vagy Aigyfhex kapcsolédnak 4 Kertinesunk a Loc! roo folder (Help gybkerknyoear) mead melleti mappa ikonjra! Amikor a Choose local rot folder for site DW CIB (Hely gybkerkonyotdr ivdlasadsa « DW CIB sedjt rice re) cir pérbeseédablak megoyilik, keresile ki a lexéledetfjlokarzartalmané DW CIB mappét, majd katcintsunk a Select (Windows) illeeve a Choose (Macintosh) gombra! 5. Kattinsunk a Def images folder (Alapértelcet képck mappa) mea mllewi mappa ikoniéra! “Amikor megnyilik a pérbeseédablak, Keressik ki a leralée fijlokattacalmaz6 DW CIB/images ‘mappét! Kattinesunk a Seleer( Windows), iletve a Choose (Macintosh) gombra! 6 A beilliésaink jévahagyésthor katintsunk a Site Definition parbeseédablak OK gombjéra! Most, bogy bedlltorcuk sesjeunkat, egyszeriien meg cudjuk nyitn a fijlokae a Dreamweaveren belil A ij ktcehozisaelengedhetedlen kezdé lépés biemilyen Dreamweaver-projektelindtésakor. A sae _gy0kérknyveirénak helye meghatirozé a hivatkozdsok eléési sivonala scempontjibel, és leherbvé tesa olyan, telesszjcokra kteredé lehetdségek hasendlacée a Deeamwveaverben, mint példéul a Find and Replace (Rerests 6s cere) anki, Az Udvézléképerny6 kezelése ‘Ax indvorl6képernyé gyors hozadférése biatosie a nemrég haszndle dokumencumokhoz, kbnnyen hhozhatunk létre rjta keresztl s2mos oldalpust,ilerve kézvetlentl kapesolédik sok alapveré sige- 40 | 1. LECKE A Dreamweaver CS4 gyors attekintése témihor. Az didvsalbképernys a program els lindtiskor,valamine akkor jelenik meg, asikor ni ceenek nye dokamentumoks Hasinljuk ae dvlbképernyc mos aa, hogy megsmeye a dokumentumok megnyitésinak ktilinbi26 médseereit 1 Uj, resold ltchozdsthorkatinsunk az ddbuldképesnyé Create New (Uj dolumentum line Aozdsa) osdopdban a HTML gombya! 2 Valesrue ki a File > Close (Fj > Bezérds) menispontot! Hia birmilyen médosivise hajeunk végte,afijl el kell menten. 3 Testi vissea a tidvel8képernyére, és katintsunk ax Open (Megnytd) meniipontra! Ex lehetSe v¥é est, hogy a megayithar fijlok Kézstt bongésstink a alkalmandsban. Kattiounk a Canad (Mégse) gombral fe tae képerny® a nema handle iiok ite i megileni. A fensi | pe ‘bros hasonl, haba sa altalmarsunkban ost még vaésniteg nin [© csenek kordbban megnyicot fijlok. Ha er a listidlvélastunk dokumen- | @ steetemte umot, ugyanan éxjikel, mintha a File> Open (Fil > Magna asentipon- ‘or haszndlndnk, dm mr létexd oldalakexerén az eldbbi modezerel idx takarithatunk mg. ‘A Kényvben gyakran fogiuk hasendni az tdeldképernyér. Ha befejensit a kényy gyakorlaait, dénthetiink gy, hogy nem az iidvBaloképernyébal indulunk ki. Eben az eset- ben a abla bal als eésén elbat6 Dow show again (Ne mata ia) jelelncgyzeeltadjuk ar Ssdvonkképermy megjlenieésé klepesolni. Visvakapesolésthor nyssuk meg a Preferences (Alpbe- Aitdok)pirbesiabla General Atalines)kategsisje! Uj oldae a File ment segisegeelnyitha, tuank. CSS stiluslap kivalasztasa ‘Az Adobe Dreamweaver C54 alhalmazds 32 fle, kilnbiz8 grafikai megjelenést CSS stiluskescletet satalacs CSS illominy ex clthetdvé, Ebben a leckebenkivlasuunk eget, & médositan fog, juk zt. A CSS oldalserkererekeralapos probéknak veteték ald, hogy megleleljenck »-webes wake ie ayotaal és mindenfobb bangésdben, zz oldalserkeaetbirmilyen dalakitisa nll megjelenithe, 16k legyenek A Drsamweaver népszeri kt. & hiromosdlopos,illewe roger sleségt (kat stmbdhummal jel) olalserkeeket, tovibba sezaek- vagy kviralaps (a rugalmasigot eps ups sembelarae jel valamine a képpontok, sdalékok és kvircek keverdhéehasenléelrendenéocket aralman 1 Vilasszuk ki a File» New (Fajl > Uj dokumentum) meniipontot! 2 A New Document piesaédablak els omlopsb ilassuk ki a Blank Page (Ore oldal) ktegié 3 A Page Type (Oldaltipus) oselopban vilasseuk ki a HTML-t! A Dreamweaverrelsokldle oldatipust késathetink; alapszintl weboldalak késriéséredeakiban a HTML+t hasznaljuk 4A Layout (Oldie) oxlopban vlassouk kia 2 ean fired, lef sidebar, header and fer (pester lees, bal olde fl, lbh) mvionanerkeetet A oldalszerkeree elonézet:Kepén lakacszimbtum jez, hogy a sllesség pixelszima adore, Egyesoldalszerkeze-tipusok exeréber rag6t lithacunk, amely at jel, hogy asclesség a bingéabablak mérercherigavoile 5 A cabbi bedlicsthagyjuk alapételmeaerérdken, maj kawinsunk a Create (Lethon) gombes! ADOBE DREAMWEAVER CS4 | 11 Tanfolyam a kényvben = én elenik meg a Dreamweaverben. Ex ‘Axi oldalunk helyérb sabvegekel kilt dokumenturoké jlenik meg Es srk, aol strana beret és ele aba az dl megien Az oldal elmentése (Oldalunk léehozisa utén érdemes azt azonnal el is menteni 1 Vilassuuk kia File > Saue (Fi! > Mentés) meniipontor, vagy hasenéljuk a Concrol+S (Windows), illerve 2 Command+S (Macintosh) gyorsillencyit! 2 Aiko megleni a Sees (Met mish) pata Kerek Ks oan! maps aylsk mee A Fila (i) mea pe be ae umber ay wri cin Seems don fg, hogy him rays kes vib omnia, fons vont kv (Eben Minyvben ml anak Alb honap anyitéoldala az index.htm fajlnever hasznalja. 9. leckében a kinyv leckéinek elvégrése sorén let ret gyakorldoldal nyiedoldalét fogiuk felépiteni.) 3. Kattintsunk a Save gombra! A dokumentumnézet kivalasztasa Bar a Dreamweaverben a legrabb, webszerkestésel kapcsolatos miveletet a Design ablakban véger rik, a szerkesztbfelilleten négy kilnbé26 nézetkézil vilasthatunk + Design (Tervezi) nézet — bangésed jelleti krnycactbe helyexi ax oldalt, + Code (Forniskid) nézet — megieleniti az oldal forriskéde. + Cade and Design (Forskdés Troe) nae ~ egsterte een meg mindkésnézetet, Kati sunk a Split (Osctote nézet) gombra ennck a nézetnek az eléxéschea! + Live (Eli) nézet —bngésaBben jelenci meg az oldalt 2 Dreamweaveren bell Geese (aeveF)) ek egymishox. Axes A Design, a Code, illerve a Code and Derign (Split) nézet soorosan kapesolédik egyméshor. Az egys nézerekben végrehajtott birmely véltozatis 2 tabi nézetben is szonal megjclenik. Mindegyile nézetel dolgozni fogunk a lecke késbbbi részeiben. ee renee meer rec TS 12 | 1. LECKE | | A dreamweaver css gyors attokintése | i Az oldal cimének médositasa ‘Az oldalcime a bongésidk cimsoriban jeenik meg, Az oldali ik 5 lnk meg, Az oldalcim az egyiklepfontosibb clem, amit | a keresémotorok figyclembe vesenek a weboldalakindexeléséné, Fontos teh, hogy a Dreamweaver alapérelmezert Untitled Document (Cim nlbi dokumentum) oldaleimée a sj ollalunkhoe kapesolédé cimre médosfesuk 1 Amennyibensuilséges, az oldal Dsgnnézetben val megtekintésdherkatiotsonk a Design gombral | 2 Jk is ime heensts United Decent env s reset ek Title (Cém) mezsjében! let echt 3. Gili be hele ex Umbria Mill Town Tours cles, majd sie a Enter (Windows illetve a Return (Macintosh) billeneyiit! ’ » Cimsorok médositasa ove stents hogy dba lad epee eae oe ci kicserélése egyszerdi miivelet. * eee hel “ i 1 Kijelblésehez kaccinesunk duplin a Header helyrab sedvegére, majd ifiuk bea kévetkerse: | Sec Umbria with a! Semel “ pela dupa katcini egyecen ijllese vagy a vegas Rll egoel Hao -szori kattintdssal egy teljes bekezdést jelélhetiink ki. ° " * i 2 Helyezt a snbvegharzort a Main Content helyérab sxiveg el, majd a kiebléscher hirauk végig a sebvegen! Tipp: Az egeret lenyomott gombbalhizva bérmilyen sz6vegtarfoményt kjeléinetink. 3 Jelljk kb a harmadikszéveg birmelyk réscletét! Gépeljk be a Dreamweaverben a kijellt svbvegrész helyére a kOverkenét: You have the fun, We do the work. A savege ig kieserelttik, a formétum mégis megmarad You have the fun. We do the work, 4 Valassauk ki a File > Save meniipontot! ADOBE DREAMWEAVER CS4 | 13 Tanfolyam a kényvben Sz6veg beillesztése A bekezdések szovegét Epp olyan kénnyen megudleoatathatuk, mint a cimsorokt. A kézi bevitelen til a Dreamoveaverfejlettscévegkezelési funkcidi timogatjk az egyéb forrésokbdl, példéul a Micro- soft Office-b6l mésolesuivegek bellesadsét— igény sverin a formzds megorzésével is. 1 Helyezzik a swdvegkurzore a helySr2s bekeadés sabvege elé, majdl huizzuk a stoves venti gy, hhogy a masodik helyrz cimsor és ar Bsrzes bekerdés ki legyen jeldlve!Figyelink oda, hogy a Footer (Labléc) helyBra6 seavegtt ne jell kit 2. Asaiveg wrléscherissik le a Delete billentyi! 3A Windows Intéa6 (Windows), illerve a Finder (Macincosh) segitségével keressik meg a2 inecenet- rola mereviemezte lecltit filokat, majd nyissuk meg 2 eson01 > vacation ref dokumentumoe! 4 Miucén megnyie a fil jelalik kia benne ralilhar 6sszes se6veger, majd a misolshor isk Ie a Conteol+C (Windows), ileeve a CommandsC (Macintosh) gyorsbillenmie! 5 Helyezik a Dreamweaverben a sziveghurznre a You have the fon. We do the work. cimsor ala, és a vigélapea mésole s2bveg billsaéscher dsl le a Controle (Window) vagy Commands (Macincosh) gyorsbilleneyic ae You have the fun. We do A subveg bekeadésckbe (

HTML-cimkkkel) rendenése auromatikus Megleayzés: A sz6veget kézvotlenll 2 oldata is begépelhetik 6 Helyeaaitk a saivegkurzort a libléc terilerére! Jeli ki a Footer helySrab sndvege, & gépeliik be lablécnek a koverkexét: Umbria Hill Town Tours! 7 Hozaunk lévre sorcirést a Shife+Enter (Windows), illewe a ShifteRecurn (Macincosh) gyorsbil- leneyG leutésével, majd gépeljik be a kévetkeas: Contact Us! eign Uj képek hozzdadasa Apel és gafikik beilesadserendhivl egyser a Dreamweaverben. Amin egy képe ar oda hrelyeetink, a culajdonségaic, fey példdul a igatcésit be cudjuk allitani a Properties (Talaidonsdgok) panel segiségével vagy a CSS-en belil 14 | 1. LECKE A Dreamweaver CS4 gyors attekintése 1 Jel i az oldalsv tej eartalmt, beleérve a Sidebar! Conton helyieassudveger€ a verb ket bekeadés is Peed sacs eho 2 A helyéra5 sziveg tinléscher tissik lea Delete billeneyit! f 3 Walasszuk kia seetkeszrfelalt ajén caldlhaté cfmkevdlasztbban (Tag Selector) a

cim| mad tdrlésdheeiissik le a Delete billentyi! ® d | < nse mentpone | ‘ivilastésivalt Panelformaban fog eegjelenni (a késsbbickben meg fogjuk tanulni, hogyan jelente- hhejak meg a panelc a klassikus munkafelile srerkezetében kompakt sav formsjdban). Az. bert (Beszirds) panel Common kacegoridjéban kartinesunk az Images (Képek) meniigombra, maid vilase- ssauk ki az /mage (Kép) meniipontot! eee vomennsh S@ mags. [Bom eran ons [Oban Oat neusee Drm avon spot 5A Sale age Soe (Kp fordlloménéah ida) ptbenabatban kere ki sine cermetl lect fjloka, majd jell ki az éped Vilas | ilokat, maj jlajk ki ax images > sculpted- garden jog pe! Valasetésunkat 2 ‘OK (Windows) vagy Choose (Macintosh) gombra katineaexéitherjik meg, 6 Ax Image Tag Accesibilty Atribuses (Répcime-elérheisét jellemzik) pétreso ts 1 -léretinghjellemzik) picesnédablak Alternate text (Helyerets szbve) meniithe pépelisk be a supeed gerden seavakat! Kattintsunk a2 OK gombral Célweri leher a ofdatunkat gardagics képekrdlrivid lisse mellkelni. A elyetest6srOveg vagy ~ hogy angolul nevetk — az ale ext akkorLthatd, arikor a kép nem jelenik meg. A mobil exkou’- ket, képernySolvasé programos vagy més béngész6t hasendlok nem bizto, hogy meg tudjék nézn | See Umbria with us i You have the fun. We do the work, eve mon of tt ett Susans ADOBE DREAMWEAVER CS4 | 15 Tanfoiyam a kényvben aképeket. A helyettesieé sziveg ilyenkor megjelenik, és segit 22 oldal értelmezésében. Hosszabb le frdsra csak Gsszerertebb képek, példul iblézarok esetében van saikség, 7 Hielyezitka sebvegkurzort af, a Come enjay sravakkal keadéd6 tartalmi bekeadés elejée, maid kattintsunk az here panel Images gombjiral 8 Jelljk ki a Sele Image Source pivbesoédablakban az images > italion-illaownjpgképet, maid kattintsunk sz OK (Windows), ieeve a Cheese (Macintosh) gombra! 9) Gépeljik be az Italian hill town halyercesté saveget, majd kacintsunk az OK gombral 10 Haa Properties panel nem lathat, mepelentésdheavilasszuk kia Window > Properties smenipontat 1 Maradjon kijellve a nemrég beillesrerkép, & vilass2uk ki a Properties panel Class (Oszedly) felugré menijébél a flere elemet! Az fle osatily (boat right lebegtetésjobbra)olyan CSS stlus, amely jobbraigaritja az objekeu- mot. A sedveg bal fogja kSrbefutni a képet. ‘xf osutly (Noat lft —lebegrecés bale) bala iguatja a hépet gy, hogy 2 seiveg jobbet anja kkbtbe azt. Mind a harminckér CSS olfalserkeceti vézlatcatalmaa a stluslapjaban lt és fle osztilyokat. Afloat (lebegeerés)tulajdonsig jobbra vagy bala hiiza ki azt az elemet, amite alkalmaztuk a se vegdobozon bell (Ebben a leckében a sedvegdoboxt a mainContent,azaz af tartalmi tést jelen- 1) Amikor egy elem elmondul, a tObbi cartalom ennek megfelelden folyik kiré. Amikor példéul egy elem jobbra mozdul el aeartalom baldl fusja kérbe. See Umbria with us You have the fun. We do the work. ey ‘Az oldahunk mose mér sdveger és képeker i tartalmaz, Egy CSS oldalserhezer kivilasctésval a s2oveg médosicisival é képek hozzdadsival szinvonalas weboldalt hozeunk léee, amelyet bée- rely béngészbben megtekinchetnénk, ha fleltenénk az internetre. A kavetker6 feladatban a CSS stluslapok médositiséval tovabbfejleszxjik az oldal megjelenést. 12 Kattinesunk a File > Save gombral ———E 16 | 1. LECKE ! ‘A Dreamweaver CS4 gyors attekintése ADOBE DREAMWEAVER CS4 | 17 Tanfolyam a kényvben CSS stilusok kivalasztasa és modositasa ‘A modern weboldalk CSS-ket (Cascading Se Shee), vagy sttadapokallalmaanak a foie: 2s 6 arolalvereres Kalki, A webodaakc gyn hang sola eeuhen coe alkos HTML, a C95 & a laSeipahirm ib, ann megllsk, NHITML cesslon race amit evs a Dg nézetserkesablaibs, A CSS w oldalerere to aghlenen anebee’ kab cemek, sak fs hterk anna osSuiptpeligc evakton oe de Ebben a feladatban a meglévé oldal hattér fogjuk. Ai Az oldal hattérszinének médositasa ‘A suluslapok septségevel brmely HTML-cimke, példaul a tulajdonsigaic is médosthayjuk 1 Jelenestk meg a CSS Seles panelt a Window > C3S Sole meniipone kivilszrisival 2 Amennyiben szikséges, katintsunk a CSS Soles panel econ levé All (Our scabily megjelentie) gombra, hogy devsltsunk a Current (Aktudlis) médbl! ‘hme ‘Az lleéd az aktudlisoldalhor kapesol6dé dssees CSS seluslapoe megjelenttl. Ahhor, hogy 4 CSS panel suslapjailthatéak legyene, legalsbb egy dokumentummak megnyitva kell lennie a szerkesaéfelileten, 3. A pluse (+) (Windows), ileeve a nyll (Macintosh) ikonta kattintva bontsuk ki sz All Rules (Csses scabily lista