Betsy Bruce

TIIIIIIlIIIIIZ Idlbl®

Dreamweaver C 3

hlsmallbl24 Orl alln

Budapest, 2007

A forditas a k6vetkez6 angol eredeti alapjan keszult:

Betsy Bruce: SAMS Teach Yourself Adobe Dreamweaver CS3 in 24 Hours

Copyright © 2007 by Sams Publishing

Authorized translation from the English language edition, entitled SAMS Teach Yourself Adobe Dreamweaver CS3 in 24 Hours, 1st Edition, ISBN 0672329360, by Bruce, Betsy, published by Pearson Education, Inc, publishing as Sams,

Copyright © 2007 by Sams Publishing

Translation and Hungarian edition © 2007 Kiskapu Kft All rights reserved!

All rights reserved, No part of this book, including interior design, cover design, and icons, may be reproduced or transmitted in any form, by any means (electronic, photocopying, recording, or otherwise) without the prior written permission of the publisher.

Trademarked names appear throughout this book Radler than list the names and entities that own the trademarks or insert a trademark symbol with each mention of the trademarked name, the publisher states that it is using the names for editorial purposes only and to the benefit of the trademark owner, with no intention of infringing upon tint trademark.

Forditas es magyar valtozat © 2007 Kiskapu Kft, Minden jog fenntartva!

A konyv egyetlen resze sem sokszorosithatc semmilyen modszerrel a Kiad6 el6zetes irasos engedelve nelkul, Ez a korlatozas kiterjed a bels6 tervezesre, a borit6ra es az ikonokra is, A konyvben bejegyzett vediegyek es markanevek is felbukkanhatnak. Ahelyett, hogy ezt minden egyes helyen kulon jeleznenk, a Kiad6 ezenneJ kijelenti, hogy a muben el6fordul6 valamennyi vedett nevet es jelzcst szerkesztesi celokra, [ohiszerrufen, a nev tulajdonosanak erdekeit szem el6tt tartva hasznalja, es nem all szandekaban az azokkal kapcsolatos jogokat megszegni, vagy ketsegbe vonni,

A szerz6k es a kiad6 a lehet6 legnagyobb korultekintessel jart el e kiadvany elkeszitesekor. Sem

a szerzo, sem a kiad6 nem vallal semminermf felelosseget vagy garanciat a konyv tartalmaval, teljessegevel kapcsolatban. Sem a szerzo, sem a kiaJ6 nem vonliato fdel6ssegre barmilyen balesct vagy karesemenv miatt, mely kozvetve vagy kozverlcnu. kapcsolatba hozhato e kiadvannyal.

Forditas: Batiz judit, Gilicze Balint Lektoralasi Rezmiiues Laszlo

Miiszaki szerkesztese Csutak Hoffmann Leiente Tordeles: Kis Peter

Felel6s kiado a Kiskapu Kft, ugyvczeto igazgat6ja © 2007 Kiskapu Kft,

1134 Budapest, Csango u. 8,

Telefon: (+36-1) 477-0443 fax: (+36-1) 303-1619 http://www.kiskapukiado.hu/

e-mail: kiadowkiskapu.hu

ISBN: 9789639637344

Keszult a debreceni Kinizsi Nyorndaban Fele16s vezet6: BOI'd5s janos

t rssz ., Bevezetes a Dreamweaver vilagaba

1. ora • A Viliighiilo es,a Dreamweaver lehetosegei

Mire kepes a Dreamweaver? 4

A Dreamweaver technologiaja 5

Webhelypeldak elernzese 6

Alapveto oldalelemek: sz6veg, kepek es hiperhivatkozasok 6

Oldalelrendezes _ ' 8

Urlapok: adatgyujtes internetes kereskedelernhez, hirlevelekhez vagy ., 10

barrni rnashoz 10

Multimedia 12

Interaktivitas 14

Webhelyek feltoltese az Internetre 16

Ujrahasznosithato k6dok es fajlok 17

Osszefoglalas 18

Kerdezz-felelek 19

Gyakorlatok 20

2. ora • A Dreamweaver kezelese

Ismerkedes a Dreamweaverrel 22

A Dreamweaver rnunkateriilete 23

Az udvozlo kepernyo 23

A menusor 26

A beszuro say 30

A dokumentumablak 41

A Document eszkoztar 41

Az allapotsor 42

Tablak es vizsgalok 45

Helyi menuk . . . . . . 48

Sugo 49

Osszefoglalas 50

Kerdezz-felelek 50

Gyakorlatok 51

3. ora • Webhelyek letrehozasa

Uj webhely meghatarozasa 54

A Site Definition varazslo hasznalata 56

Az Editing Files Iepes 57

Az Editing Files, Part 2 lepes 57

iv; Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 6ra alatt

Az Editing Files, Part 3 lepes 58

A Sharing Files lepes 59

Az osszegzes attekintese 60

A webhelygyorstar letrehozasa . . . . . . . . . . . . . . . . . . . . . . . . . . 60

A Files tabla hasznalata 61

A Files tabla kibontasa 62

Uj fajlok Ietrehozasa a Files tablan . 63

A webhelyek szervezese 67

Osszefoglalas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Kerdezz-felelek 69

Gyakorlatok 70

4. ora • Szovegkezelas: szoveg as listak

OJ weboldalak letrehozasa 72

Fajlok mentese 73

Szoveg hozzaadasa weboldalakhoz 74

Szoveg masolasa es beillesztese fajlokbol 75

Szovegforrnazas alkalmazasa ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Bekezdes es sortores cimkek 78

Oldaltulajdonsagok beallitasa 78

Az oldal atfogo megjelenesenek beallitasa 79

Az altalanos cirnsortulajdonsagok beallitasa 84

Oldalcim hozzadaasa 85

Tobbszinnf stiluslapok cess) 86

Szovegjellemzok modositasa a tulajdonsagvizsgaloban 87

A szoveg berutipusanak kivalasztasa 87

A szovegrneret modositasa . . . . . . . . . . . . . . . . . . . . . . . 88

A szoveg szinenek kivalasztasa 89

A Dreamweaver altal letrehozott stilusok atnevezese 89

A szoveg igazitasa 91

Listak Ietrehozasa es szovegbehuzas . . 92

Elvalaszto hozzaadasa az oldalakhoz. a vizszintes elvalaszto 93

Elonezet bongeszoben 94

Osszefoglalas 97

Kerdezz-felelek 97

Gyakorlatok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

5. ora • Hivatkozasok hozzaadasa a weboldalakhoz: hiperhivatkozasok, horgonyok as levelcimzettek

Viszonylagos es abszolut eleresi utak vizsgalata . . . . . . . . . . . . . . . . . . . . . . 100

Abszolut eleresi utak 101

Dokumentumfugg6 eleresi utak 103

Webhelygyokerfiiggo eleresi utak 105

Hiperhivatkozasok hozzaadasa a webhelyen belul 106

Hivatkozasszin-beallitasok 109

Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 ora elatti v

Hosszu oldalak szervezese nevesitett horgonyok segitsegevel 111

Lathatatlan elemek 112

Hivatkozas a nevesitett horgonyokra 113

A Point-to-File ikon hasznalata ;, 114

Levelcimzett-hivatkozasok 115

Osszefoglalas 117

Kerdezz-felelek 117

Gyakorlatok 118

6. ora • Weblapok formazasa ess stiluslapok segitsegevel

Szovegforrnazas a CSS segitsegevel 120

Osztalykijelolok Ietrehozasa 1,23

Osztalykijelolok alkalmazasa 126

Az osztalykijelolok eltavolftasa 126

A stilusbeallitasok vizsgalata 127

H'I'Mf-cimkek felulbiralasa 131

Stilusok szerkesztese 133

Kulso stiluslap letrehozasa 134

Megievo CSS-stilusok mentese 134

OJ kulso stiluslap letrehozasa 136

CSS-stilusok mentese kulso stiluslapokra 137

A tobbszinniseg jelentese 137

Osszefoglalas 139

Kerdezz-felelek 139

Gyakorlatok 140

7. ora • A szinfalak mogott: a HTML k6d vizsgalata

A Code nezet 142

A weboldalak fejlece es torzse 144

A Code nezet lehetosegei 145

A Coding eszkoztar 147

A kodvizsgalo hasznalata 148

HfMl-cimkek megtekintese es szerkesztese a Quick Tag Editor segitsegevel . 149

A cirnkeszerkeszto uzernmod hasznalata 151

A beagyazo uzernrnod hasznalata 151

A H'I'Ml-besziiro uzemmod hasznalata 151

Kodbeallitasok meghatarozasa 152

A k6d szineire vonatkoz6 beallitasok 153

A kodforrnarumra vonatkoz6 beallitasok 154

A k6dtippek beallitasai 155

A kodatiras beallitasai 156

A Microsoft Worddelletrehozott HTML kitisztitasa 157

Kezikonyvek . 159

Osszefoglalas 160

Kerdezz-felelek 160

Gyakorlatok 161

vi l Tanuljuk meg az Adobe Dreamweaver eS3 hasznalatat 24 ora alatt

8. ora • Kepek megjelenftese

. Kepek hozzaadasa az oldalakhoz .. _ . _ 166

Helyettesito szoveg rnegadasa . _ _ _ _ . . . . . . . . . 168

A kepjellernzok _ . _ ... _ . _ . _ . _ .. _ __ . _ _ _ .. _ _ .. __ . 170

Kepek szoveghez igazitasa _ _ .. _ _ .. _ . . 171

Keptipusok: GIF, JPEG es PNG _ 173

Kepek szerkesztese a Dreamweaverben 174

Kepek optimalizalasa a webes alkalrnazashoz .. _ . . . . . . . . . . . _ 175

Kepes hivatkozasok letrehozasa . _ .. _ . __ . _ .. _ ... _ .. _ ..... _ 179

Kepterkepek letrehozasa _. _ . _ . _ .. _ . __ . _ .. _ . _ . _ .. _ .. _ .. . _ 179

Forr6pont hozzaadasa a kepterkepekhez _ 181

A forr6pontok igazitasa . _ _ . _ _ . _ . __ . _ _ 183

Osszefoglalas _ _ _ . . . . . . . . . 184

Kerdezz-felelek . _ _ _ .. _ _ .. _ _ . __ _ 184

Gyakorlatok . _ _ .. _ . _ .. _ .. _ _ . __ _ _ . _ 185

9. ora • A Dreamweavert kiegeszfto alkelmazasok

Ismerkedes a Photoshoppal 188

Kepek modositasa a weboldalakon val6 hasznalathoz _ _ _ 189

Kepek elforgatasa, korulvagasa es atmeretezese . _ _ 189

A kepek eleinek lagyitasa . _ . _ .. _ .. _ . _ _ .. _ _ _ 192

Modositasok visszavonasa, biztonsagi rnasolatok es _ 193

visszateres az eredeti kephez _ __ 193

Kepek letrehOL.asa . _ . _ _ _ . _ 194

Szoveg hozzaadasa a kepekhez 194

Alakzatok hozzaadasa a kepekhez . _ __ . _ _ 196

A kep beillesztese a Dreamweaverbe 198

Szura hozzaadasa valtokepekhez .. _ _ .. _ _ . _ _ _ 199

Kepek darabokra szeletelese .. _ 202

Tablazatos adatok betoltese az Excelb61 _ _ .. _ _ _ 203

Osszefoglalas .... _ . _ _ . _ _ .. . . . . 204

Kerdezz-felelek _. _ _ _ . _ 204

Gyakorlatok . __ . _ . __ _ .. _ 205

10. ora • Flash es egyeb multimedia hozzaadasa a weboldalakhoz

A multimedia es a savszelesseg _ 208

A lejatszok _. _ _ __ .. _ _ .. _ . _ __ .. _ .. _ . . 208

Flash fajlok hozzaadasa _. .. __ .. _ _ . _ _ 210

Az <embed> es az <object> dmke hasznalata _ _ . _ .. _ . _ . _ 212

Filmek elonezete a Dreamweaver dokumentumablakaban 212

Flash szoveg Ietrehozasa _ __ __ . 213

Flash gombok letrehozasa _ . _ .. _ .. _ . _ 215

PDF fajlokra mutat6 hivatkozasok hozzaadasa _ . _ .. _ 217

Hangfajlok hozzaadasa a weboldalakhoz ... _ .. __ . _ . _ . .. _ .. __ .... 218

Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 6ra alatt ~ vii

A vezerlok atmeretezese 220

A hang ismetlese 221

Hivatkozas hangfajlokra 223

Java kisalkalmazasok hozzaadasa a weboldalakhoz 224

Osszefoglalas 227

Kerdezz-felelek 227

Gyakorlatok 228

11. ora • Elemek kezelese az Assets tabla segitsegevel

Mik azok az elemek? 230

Elemek kezelese az Assets tablan 230

A webhely elerneinek felsoroltatasa 231

Elemek elonezete 232

Kep elemek 233

Szin elemek 234

Hivarkozas elernek 235

Film elemek 236

Parancsfajl elemek 236

Elemek hozzaadasa a weboldalakhoz 238

Kedvenc elemek letrehozasa 239

-OJ elemek letrehozasa az Assets tablan 241

Elemek mas webhelyre rnasolasa 243

Osszefoglalas 243

Kerdezz-felelek 243

Gyakorlatok 244

Hi, rssz " A weblapok etrendezese

12. ora • Adatok msgjelenltese tablazatokkal

Adattablazatok letrehozasa 248

A tablazatok elemeinek kijelolese 250

A cellakitoltes, a terkozok es a fejlecek beallitasai 252

Csokkent latokepesseguek szamara is elerhetc tablazatok 253

Tablazatok rnodositasa es tartalom beillesztese 254

Adatok beszurasa es rendezese 255

Sorok es oszlopok beszurasa es eltavolitasa 257

Az oszlopszelesseg es a sormagassag rnodositasa 258

A tablazat atrneretezese es a szegelyek szinenek megvaltoztatasa 258

Cellak egyesftese es szetvalasztasa 259

A cellatartalom igazitasa 259

Szinek a tablazatokban 260

Adatok mentese a tablazatokbol 261

Tablazatok egyrnasba agyazasa 262

Mar letezo szerkezeti tablazatok modositasa 262

Osszefoglalas 264

Kerdezz-felelek 264

Gyakorlatok 265

viii t Tanuljuk meg az Adobe Dreamweaver GS3 haSZlUllatat 24 6ra alatt

13. ora " Elemek elhelyez8se a ess segitsegevel

A CSS dobozmodellje 268

Egy CSS-oldalelrendezes elernzese . . . . . . . . . . . . . . . . . . . . . . . . . 269

A CSS-stilusok kepi megjelenitese 271

A float es a clear jellemz6k 273

A tarolok elhelyezese 274

Div-ek beszrirasa 274

Az azonositokijelolok hasznalata 275

Segedkep hasznalata 276

Tobbszoros es kornyezeti kijelolok meghatarozasa 278

Lebeg6 oldalelemek 279

Az oszlopok elkeszitese 280

A lebeg6 elemek eltavolitasa 283

Az oldalelrendezes kozepre igazftasa 284

Az oldalelrendezes finornhangolasa 285

Osszefoglalas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Kerdezz-felelek 288

Gyakorlatok 289

14. ora " eSS-stilusok mobileszkoziikon as nvomtatasban

A CSS media jellemz6je 292

A stilusok rnegjelenesenek rnegtekintese a Dreamweaverben 294

Tovabbi stiluslapok beillesztese 295

A kulso stiluslap mediatipusanak rnegadasa 296

Masodik kUls6 stiluslap csatolasa 297

Stilu~lap keszitese nyorntatashoz 298

El emek elrejtese 299

Az aiapertelmezett betiitipus modositasa 302

A stilusutkozesek azonositasa 303

Hivatkozasok elrejtese 304

Kizarolag nyorntatasban megjelen6 uzenetek 306

A mobileszkozok weblapstllusainak elonezete 307

Osszefoglalas 309

Kerdezz-felelek 309

Gyakorlatok 310

15. ora " Kiinyvtarelemek es sablonok keszitase

Konyvtarelemek es sablonok kezelese az Assets tablan 312

Konyvtarelem letrehozasa . . . . . . . . . . . . . . . . . . . . . . 313

Konyvtarelern Ietrehozasa mar letezo objektumokb61 314

Uj konyvtarelern letrehozasa 315

Konyvtarelernek beillesztese a weblapra 317

Konyvtarelemek rnodosftasa 319

Sablonok keszitese 321

Sablon letrehozasa Ietezo webhely alapjan 322

Uj sablon letrehozasa 323

Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 ora alatt i. ix

A sablon szerkeszthetove tetele 323

OJ szerkesztheto tenilet Ietrehozasa 326

OJ valaszthato terulet letrehozasa 327

Weblap keszftese sablon alapjan 327

Sablonok modositasa es a kapcsol6d6 weblapok frissitese 329

CSS-stflusok a konyvtarelernekben es sablonokban 330

Osszefoglalas 331

Kerdezz-felelek 331

Gyakorlatok 332

IV. resz e Dinamikus HTMl as GlZ AJAX: AP taml6k, viselkedssek as XMl 16. ora • Navigacios savok as menusavok

A navigacio alapjai 336

Valtokepek keszitese 337

Navigacios say keszitese valtokepekkel es hivatkozasokkal 339

Menusav beillesztese 342

Tobb meniisav hasznalata 344

A menusav CSS-stHusainak szerkesztese 345

Hivatkozott weblapok megnyitasa uj bongeszoablakban 348

Osszefoglalas 349

Kerdezz-felelek 349

Gyakorlatok 350

17. ora • Dinamikus HTML as AP tarol6k

Mi is az a DHTML? 352

}Jl tarolo beszurasa L •••••••••••••••••••• 353

Az AP tarolok elhelyezese 356

Hatterszin es hatterkep alkalmazasa 357

Az AP tarolok retegsorrendje 358

Az AP tarolok lathatosaganak modositasa 359

AP tarolok egymasba agyazasa 360

Animacio idoszalagokkal . . . . . . . . . . . . . . . . . . . . . . . . . 362

Animacio letrehozasa 362

A Timelines tabla hasznalata . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

Egyszeru animacio rogzitese 364

AutomaLikus es ismetlodo lejatszas 366

AP tarolo elhelyezese az id6szalagon 367

Kulcskockak beszurasa 368

Osszefoglalas 370

Kerdezz-felelek 370

Gyakorlatok 371

18. ora • Viselkedesek hasznalata - kulcs az interaktivltashoz

Mik is azok a viselkedesek? 374

A Dreamweaverben elerheto forrasok 375

Ismerkedes a Dreamweaver viselkedeseivel 375

X!. Tanuljuk meg az Adobe Dreamweaver eS3 hasznalatat 24 6ra alatt

Esemenyek 378

Viselkedesek hozzarendelese objektumokboz 380

Elernek megjelenltese es elrejtese 382

Ores hivatkozas letrehozasa a viselkedes elinditasahoz 383

Rejtett AP tarolo letrehozasa 383

A Show-Hide Elements viselkedes hozzarendelese 384

A viselkedest kivalto esemeny meghatarozasa 385

A viselkedes modositasa 386

OJ bongeszoablak megnyitasa 386

El6ugr6 uzenetek 388

Tobb viselkedes hozzarendelese egyazon objekturnhoz 389

Szbveg megjelenitese taroloban . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

A Go to URL viselkedes hasznalata 391

Elhuzhato AP tarolok hasznalata 391

Osszefoglalas " 393

Kerdezz-felelek 394

Gyakorlatok 395

19. ora • Tartalom as XML megjelenitese a Spry keretrendszer segftsagevel

A Spry keretrendszer hasznalata 398

KUls6 JavaScript es CSS fajlok 400

Spry-hatasok alkalmazasa 402

A Squish hatas alkalmazasa 403

Az Appear/Fade hatas alkalrnazasa ' 404

Hiles es osszecsukhato tablak, valamint harrnonikak hasznalata 405

Fules tablak hasznalata 406

6sszecsukhat6 tablak hasznalata 408

Harrnonikak hasznalata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

A Spry-tablak CSS-stllusainak szerkesztese . . 409

XML megjelenitese a weblapon 411

Mi is az az XML? 411

Par sz6 az AJAX-r61 413

Spry x,,1\1L-adathalmaz keszitese 414

Spry Repeat List beillesztese . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

Osszefoglalas 415

Kerdezz-felelek 416

Gyakorlatok 416

V. resz " Felhasznahii adatok fogadasa firlapokkal

20. ora • Urlapok keszltese as adatgyujtes a latogat6ktol

Urlap keszitese 420

Szovegrnezok elhelyezese az iirlapon 422

A szovegmezok jellemz6i . 424

Valasztogornbok es jelolonegyzetek elhelyezese az ifrlapokon 428

Tanuljuk meg az Adobe Dreamweaver CS3 haszmllatat 24 ora alatt! xi

Listamez6k es lenyilo listak az urlapokon 430

Nyom6gombok es kepgornbok hozzaadasa az iirlapokhoz 433

Elkuldo es alaphelyzetbe allito gombok beszurasa 434

Kepgornb beszurasa _ 435

Altalanos celu gombok beszurasa 435

Ugromenu keszitese 436

Osszefoglalas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Kerdezz-felelek 439

Gyakorlatok 440

21. ora • Bevezetes a parancstajlck vilagaba:

urlapok adatainak elkiildese es kezelese

Drlapok adatainak ellenorzese a Validate Form viselkedessel 442

A Spry keretrendszer ellen6rz6 objektumai 445

Drlapok adatainak fogadasa 446

A FormMail parancsfajl hasznalata 448

Rejtett mez6k hasznalata 449

Adatok biztonsagos atvitele 451

Fajl feltoltese urlaprol 452

Weblap elokeszftese ASP, ASP.NET, ]SP, PHP es CFML parancsfajlok

alkalmazasahoz 453

Osszefoglalas 456

Kerdezz-felelek 457

Gyakorlatok 458

VI. resz e Prejektek feltoltese as webhelvek kezelese 22. ora • Webes projektek feltoltese es meqosztasa

A kiszolgalokapcsolat engedelyezese 462

Tavoli webhely hasznalatba vetele 462

Az Advanced lap beallitasai 467

A webhely attelepitese a tavoli kiszolgalora 468

A Dreamweaver webhelykezelesi Iehetosegei 470

A Check In/Check Out lehetoseg bekapcsolasa 470

Pajlok atvitele 471

Letezo webhely betoltese 473

Osszefoglalas 474

Kerdezz-felelek 474

Gyakorlatok 476

23. ora • Webhelyek kezelese as szerkesztese

Helyi es tavoli webhelyek kezelese 478

A helyi es tavoli webhely fajljainak osszehangolasa 478

Oldalterkep keszitese 482

Hivatkozasok kezelese 484

]egyzetek csatolasa a weblapokhoz 486

xii: Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 ora alatt

JeIentesek keszitese a webhelyr61 488

Osszefoglalas 489

Kerdezz-felelek 490

Gyakorlatok ~.- 490

24. ora • A Dreamweaver testreszabasa

Egyeni epitoelemek keszitese 492

BillentyCiparancsok szerkesztese 495

Menuparancsok letrehozasa 497

Paranes rogzitese 498

Parancsok mentese a History tablarol 499

Kedvencek elhelyezese a beszuro savon 501

A Dreamweaver kepessegeinek bovitese kols6 bovitmenyekkel 502

Keresesek alkalrnazasa, mentese es megosztasa 504

Osszefoglalas 506

Kerdezz-felelek 507

Gyakorlatok 507

ffiggeh~l{ak

A fiiggelek • Forrasok

Dreamweaver-fejlesztes 511

Webfejlesztes altalaban 512

Dreamweaver-bovitmenyek 512

CSS-stilusok 512

Spry keretrendszer 512

Parancsnyelvek ~ CGI, JavaScripl b kiszolgalooldali parancsfajlok 513

CGI 513

JavaScript 513

Kiszolgalooldali parancsfajlok 513

Akadalyrnentesites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513

Hasznalhatosag 513

Letoltesek 514

Bongeszok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514

Szervezetek 514

Szakkifejazesek jegyzeke 515

Targymutat6 527

Betsy Bruce fejleszto es tanicsad6, aki arra szakosodott, hogy elektronikus oktat6programokat keszitsen a Dreamweaver, az Authorware, a Captivate, valamint a Flash segitsegevel, Korabban a Seattle-i Cobalt Group vezeto fejlesztoje volt, ahol a csapata megnyerte a 2003-as Macromedia Innovation in eLearning (ujitasok az elektronikus oktatasban) dliat, majd a MediaPro Inc. Technical Services csoportjanak igazgat6ja volt, ahol

a csapata szamos dijat kapott az altaluk fejlesztett projektekert. A Dreamweaver,

a Contribute, a Flash, a Captivate es az Authorware Adobe altai hitelesitett oktat6ja. Betsy az Iowai Egyetemen szerezte meg az alapkepesiteset (B.S.), majd a San Diego-i MIami Egyetemen erte el a mesterfokozatot (M.A.) oktatastechnologiabol. Rendszeresen tart eloadasokat kulonbozo konferenciakon elektronikus oktatasi anyagok letrehozasaval, valarnint a Dreamweaver hasznalataval kapcsolatban. Ezen kivul a New Readers Publishing altal kiadott elearning with Dreamueauer MX; Creating Online Learning Applications cimtf konyv szerzoje. Betsy Iowaban szuletett es nevelkedett, jelenleg pedig Seattle-ben lakik elettarsaval es ket sziberiai szanhuzokutyaval. Webhelye a www.betsybruce.com cirnen erheto el.

Aianla~

- _,_a .. __

Ezt a eonycet edesapdrnnale; John Bruce-nak ajanlom, aki kival6 oletato, apa es ember volt. Sok fiatal eletere volt nagy hatassal, es halds vagyok, hogy a lanya lehetele.

KOSlonetnyilvanftas

Killon koszonetet szeretnek mondani a Rick Steves' Europe Through The Back Door (www.ricksteves.com)csapatanak.amiert engedelyeztek a webhelyukbol meritett peldak hasznalatat, 2005 nyaran abban a szerencseben volt reszern, hogy edesanyammal reszt Yettem a csapat ket varosnezo turajan (London es Parizs), 2007 nyaran pedig az unokaocsernmel utazom a rornai varosnezo turara. Szeretnern meg megkoszonni Jennifer Henry-nek, Micah Sondermann-nak es Carol Maciasnak a konyvhoz nyiijtott rmiveszi segitseget.

Koszonorn a Dreamweaver fejlesztocsapatanak, hogy ilyen nagyszeru terrneket hoztak letre, tovabba koszonet illeti a Sams Publishing remek csapatat. Songlin, Mike es Lynn, halas vagyok azert, hogy lenyegesen javftottatok a szovegen.

xiv! Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 ora alatt

Koszonom Dananak, Shastanak es Nikk6nak, hogy j61 tartottak Seattle-ben, vaJamintmint mindig - halas vagyok edesanyamnak, Patnek a kitart6 tamogatasaert, szereteteert es kinlno humorerzekeert.

Mandja el a velemenyet!

Az olvas6 a legfontosabb kritikus, akinek a velernenye nekern es a kiad6nak is roppant ertekes. Szeretnenk tudni, mit csinalunk j61, mi az, arnin javithatnank, milyen konyveket kellene rnegjelentetnunk, ezen kfvul szfvesen fogadunk minden egyeb boles tanaesot, amelyet megosztananak velunk, Kerjuk, ha ir, tuntesse fel a konyv szerzojet es cimet, valamint a sajat never, telefonszarnat vagy e-mail cimet. Megjegyzeseit alaposan attanulmanyozzuk, es tovabbitjuk a konyv szerzojenek es szerkeszt6inek.

E-mail: mark.taberespearsoned.com

Level: Mark Taber

Associate Publisher

Sams Publishing

800 East 96th Street Indianapolis, IN 46240 USA

Felhfvjuk a figyelmet, hogy a konyv temajaual leapcsolatos szakmai leerdesekben nem tudunk segiteni, es a nagy szamban beerleezo levelek miatt nem biztos, hogy minden uxenetre odlaszolunk.

Olvasoszalgalat

A webhelyunket meglatogatva a www.samspublishing.com/register cimen Iehet bejegyeztetni a konyvet, ezaltal konnyen hozzaferhetunk a konyvvel kapesolatos frissitesekhez, letoltesekhez, illetve hibajegyzekekhez.

,,00000, Dreamweaver. I believe you can get me through the night" C6, alornszovo, azt hiszem, te atsegithetsz ezen az ejszakan), Ki ne emlekezne Gary Wright dalira? J6, esetleg azok, akik akkor meg meg sem szulettek. Ez a szam a hetedikes tancestekre emlekeztet. Orulok, hogy a Dreamweaver program rnegerkezese ota mar nem ez a kep el a fejernben. A Dreamweaver szamos ejszakan at a segitsegemre volt a webhelyek es webalkalmazasok keszitesekor.

A Dreamweavert a megjelenese 6ta hasznalom. A Dreamweaver el6tti korszak weblapszerkeszto eszkozei meglehetosen kiabranditoak voltak. Sok fejlesztot idegesitett, hogy bizonyos eszkozok atirtak vagy akar toroltek a gondosan osszeallitott k6d egyes reszleteit, Emlekszem olyan esetre, amikor majdnem ot percig ugraltam es tomboltam az irodamban, miutan az egyik eszkoz torolte az eppen megirt, tobb szaz sornyi javaScript k6dot. Ezert abban az idoben a fejlesztok j6 resze szivesebben hasznalt egyszeni szovegszerkesztot, es inkabb sajat kezrfleg irta meg a HTML-t,illetve

a JavaScriptet. Ez valoszinuleg akkoriban az Adobe webfejlesztoit is bosszantotta, hiszen letrehoztak egy olyan eszkozt ~ a Dreamweavert =, amelyben megtalalhato volt az osszes olyan szolgaltatas, amelyre egy webfejleszt6 vagyhat,

A Dreamweaver a mai napig szabvanykent szolgal a webfejleszto eszkozok szamara.

Mi is a Dreamweaver eS3?

A Dreamweaver CS3 az Adobe Dreamweaver legujabb valtozata ~ dijnyertes HTMLszerkeszto es webalkalmazas-fejleszto eszkoz. Vannak, akik nem hasznaljak ki

a Dreamweaver hatekonyabb szolgaltatasait, mert nem ismerik ezeket. A konyv garantalja, hogy az olvas6i nem eshetnek ebbe a hibaba:

A Drearnweaver CS3 ugyanazokat a megbizhato szolgaltatasokat biztositja a Mac OS X es a Windows felhasznaloinak, A ket operacios rendszerre keszitett valtozat felulete valamelyest maskepp mutat, de mindket valtozattal egyforman szep es hatekony webhelyeket keszithetunk.

A Dreamweaver kivaloan alkalmas ana, hogy formazott szoveget, kepeket, urlapokat, kereteket, tablazatokat es ehhez hasonl6kat tartalrnazo, vonzo weboldalakat hozzunk letre rovid ida alatt. A Dreamweaver azonban olyankor jeleskedik igazan, amikor azt

xvi O. Tanuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 6ra alatt

szeretnenk, hogy a weboldal valarnit vegrehajtson. A Dreamweaver erossege

a Dynamic HTML (dinamikus HTML - DHTML), egy olyan webes szolgaltaras, amely lehetove teszi a felhasznalok es a weboldal kozotti parbeszedet. Az. sem jelent goodot, ha valaki nem ismeri a parancsnyelveket. A Dreamweaver tnselkedesei - parancsfajlokba epitett szolgaltatasai - segitsegevel egyetlen kattintassal adhatunk az oldalakhoz kulonbozo objektumokat.

A Dreamweaver CS3 masik el6nye, hogy Iehetove teszi a CSS-ek (Cascading Style Sheets - tobbszinui stiluslapok) letrehozasat es alkalmazasat, amelyekkel befolyasolhatjuk a weboldalak bongeszoben torteno megjeleniteset. A Drearnweaver CS3 biztositja a weboldalak CSS segitsegevel torteno forrnazasat, ezen kivul a Dreamweaver eszkozeiben CSS-ek alkalmazasaval tervezhetjuk meg a weboldal kulalakjat,

Az uj kiadasrel

A webfejlesztes uj eljarasait es iranyvonalait figyelembe veve teljesen atirtarn a Tanuljuk meg az Adobe Drearnuieacer CS3 hasznalatat 24 ora alatt ezen kiadasat. Az uj kiadas jellemz6i:

• A szoveg forrnazasanal es az oldal kulalakjanal teljes rnertekben a CSS-re osszpontosit.

• Bemutatja, hogyan kell CSS-t letrehozni kezi eszkozokhoz, illetve nyorntatashoz. .. Teljes egeszeben XHTML (Extensible Hypertext Markup Language) kodreszleteket tartalrnaz.

• Targyalja a Dreamweaver es az Adobe mas terrnekei, peldaul a Flash es a Photoshop kozotti egyuttmukodest.

• Bemutatja az XML-t (Extensible Markup Language), es az AJAX-szal (Asynchronous JavaScript and Xt\1L) egyuttmukodd uj Adobe Spry keretrendszert.

• Tartalmazza az uj Spry kerelrendszer viselkedeseit, peldaul a hatekony ei6ugr6 menuket,

Az Interneten keresztul es szernelyesen egyarant gyakran beszelgetek emberekkel

a Dreamweaverrol, es a beszelgetopartnereim szarntalan esetben elcsodalkoznak, moodvan: .nem is tudtam, hogy a Dreamweaverrel ezt is meg lehet csinilni!". Valoszimfleg minden olvas6nak lesznek ilyen pillanatai a konyv 24 leckejenek feldolgozasa soran.

Kinek erdemes hasmalnia a Dreamweaver CS3~at?

Az. Adobe Dreamweaver CS3-at azok is szeretni fogjak, akik eletuk els6 weboldalat szeretnek letrehozni, valamint azok is, akik tobb evnyi kezzel torteno kodolas utan szeretnenek kiprobalni egy webszerkeszt6 programot. A Dreamweaver biztositja

Tanuljuk meg az Adobe Dreamweaver CS3 haszntilatat 24 6ra alatt j xvii

a weboldalak vizualis tervezesenek szabadsagat, es rank bfzza annak meghatarozasat, hogy rnikent viselkedjen. A Dreamweaver eleg rugalmas ahhoz, hogy sajat weboldalt vagy akar egy teljes bels6 vallalati webhelyet rnegtervezzunk a segitsegevel.

Kinek sz61 ez a konyv?

A konyv azoknak szol, akik eppen hasznaljak, vagy a jovoben tervezik hasznalni

a Dreamweavert.Ha valaki most ismerkedik a webfejlesztessel, a konyv segitsegevel hamar jirtassa valik a weboldalak es webhelyek letrehozasaban, Azok, akik mar regebb 6ta webfejlesztessel foglalkoznak, a konyvben talalhato tippek, trukkok es utasitasok segitsegevel kepesek lesznek a leheto legnagyobb mertekben kihasznalni

a Dreamweaver szolgaltatasait,

A konyv szarnos egyeb tema targyalasa mellett megmutatja, hogyan lehet statikus weboldalakat letrehozni a Dreamweaver CS3-ban, mikent lehet urlapokat, kepeket, tablakat, oldalstilusokat hozzajuk adni, parbeszedet folytatni a felhasznalokkal, valarnint

a weboldalakat kezelni. A konyv 24 oras anyaganak elsajaritasa utan erdemes elmelyedni a Dreamweaver CS3 halad6 szolgaltatasaiban is, amelyek segitsegevel adatbazisokhoz kapeso16d6 weboldalakat hozhatunk letre. Azoknak is erdernes megismerniiik, hogy a Dreamweaver mikent hozza Ietre es tartja karban a statikus weblaptartalmakat, akik f6 celkent adatbazis alapu, dinamikus weboldalakat szeretnenek Ietrehozni.

A konyvben szerkezete as a konyvben hasznalt jelolesek

A konyv egyes fejezetei egy-egy lecket foglalnak magukba, amelyek elsajatitasahoz megkozelitoleg egy orara van szukseg. A konyvet ugy allitottuk ossze, hogy az olvasok a lebet61eghamarabb hasznos feladatokat vegezhessenek a Dreamweaver CS3-ban.

A leckeket szamos abra illusztralja.

Az uj kifejezesek dolt betiiuel jelennek meg. Azokat az elemeket, amelyeket betu szerint kell begepelni, rogzitett szelessegu betukkel jeloljuk,

A meqjsqvzesek b6vebb intorrnaciokat nyujtanak az adott ternarel,

Az egyes leckek elejen egy ternalista es egy attekintes talalhato, A leckeket osszefoglalassal, kerdezz-felelek resszel, ismetlo kerdesekkel es valaszokkal, valamint sajat kiserletezesre szolgalo gyakorlatokkal zarjuk, A leckeken belul az alabbi egysegek nyujtanak reszletesebb tajekoztatast:

xviii r T anuljuk meg az Adobe Dreamweaver CS3 hasznalatat 24 6ra alatt

A tippek kOlOnb5zQ tanacsokat adnak, vagy egy feladat elvegzesenek egyeb lehetseqss m6djait frjak Ie.

A figyelmeztetesek a lehetseqes problemakkal kapcsolatban intanek ovatossaqra, es arr61 tajekoztatnak, hogy rnikent karUlhetjiik el, iIIetve hozhatjuk helyre ezeket.

J6 szorakozast kivanok a konyv olvasasa es a feladatok vegrehajtasa soranl

Betsy Bruce

Bevezetes a Dreamweaver vilaqaba

1. ora A Vilaghalo es a Dreamweaver lehetoseqei

2. 6ra A Dreamweaver kezslese

3. ora Webhelyek letrehozasa

4. ora Sztivegkezeles: sziiveg es listak

5. ora Hivatkozasok hozzaadasa a weboldalakhoz: hiparhivatkozasok, horgonyok es levelcfmzettek

6. ora Weblapok forrnazasa CSS stiluslapok seqitseqevel

7. ora A szfnfalak mi:igott: a HTML k6d vizsqalata

A Vilaghal6 es a Dreamweaver lehetosegei

A leclee tartalmdbol.

• A Dreamweaverrel letrehozhato weblapfajtak

• Peldak: a Dreamweaverrel letrehozott szovegek, kepek, hiperhivatkozasok, urlap ok, multirnedias anyagok, parbeszedes elemek es oldalstilustervek

• Uirahasznosirhato, frissithet6 weblapok es weblapelemek keszitese a Dreamweaverrel

• A beepitett fajlatviteli eszkoz kepessegei

A Vilaghalo olyan dokumentumok halozata, amelyek barki szamara hozzaferhetok, aki rendelkezik internetkapcsolattal. Ez a halozat hatalmas meretu informacioforras, amely vilagszerte rengeteg embert szolgal ki, Ezen sorok irasakor is internetes forrasokat hasznalok, amelyek segitsegevel otleteket rnerithetek, es jobban megerthetem

az olvas6knak bemutatott temakat. Peldaul eppen most ellen6riztem a Wikipediaban (wwv.'. wikipedia. org), hogy mikent hatarozza meg a Vilaghalo (World Wide Web)

4 i I. rasz • Bevezetes a Dreamweaver vilagaba

fogalrnat. Az Internet Ietezese el6tt ehhez egy konyvtarban talalhato enciklopediat kellett volna hasznalnorn, a Weben azonban csupan nehany masodpercbe telt hozzaferni az informaciohoz.

Megbizhat6ak-e az Interneten talalt informaci6k?

A fenti bekezdesbsn emlitett Wikipedia tokeletes peldaja annak, hogy rniert kell koniltekintessel kezelni az Interneten szerzett intorrnaciokat, A Wikipedia cikkeit maguk a latoqatek [rjak as szerkesztik - olyanok, akik nem feltetleniil szakertok.

Az Interneten sok forras tartalmaz olyan adatokat, amelyek nem biztos, hogy pontosak, ezert gondot kell fordftani a rneqbizhato es hiteles forrasbol tarteno informaci6gyujtesre.

Vannak, akik informaciokat szeretnenek megosztani az Interneten. A baratokkal, a csaladdal vagy az egesz vilaggal megoszthatjuk peldaul az eskuvoi fot6inkat, sajat irodalmi alkotasainkat, kepeslapterveinket, csaladfakutatasunkat vagy a CD-gytijtemenyiink katalogusat. Masek polot, sutemenytesztat, konyvet vagy udvozlokartyat szeretnenek arulni az Interneten. Elkepzelheto, hogy egy kisebb vallalat vagy egy benniinket alkalmaz6 nagyobb vallalat, illetve ugynokseg szamara kell webhelyet keszitenunk, Ezek mind testhezallo feladatok az Adobe Drearnweaver szamara,

Tobb szaz e-mailt kaptam aZ olvas6kt61 a vilag minden tajarol, akik a tobbiekhez hasonloan azert vasaroltak meg a konyv korabbi kiadasat, hogy elsajatitsak a Drearnweaver hasznalatat, Egy reszuk a konyv segitsegevel letrehozott webhelyekre vezeto hivatkozasokat kuld, es ezek a webhelyek egytol egyig lenyugozoek. Vannak olyan olvasok is, akik HTML- vagy webfejleszto tanfolyamok hallgatoi, es ezt a konyvet hasznaljak, Orommel varok minden tovabbi visszajelzestl

Mire kepes a Dreamweaver?

A Dreamweaver a Iegnepszenibb professzionalis webszerkeszro eszkoz, es rengeteg felhasznalo valasztja ezt a kivalo programot. Szarnos nagyvallalat rendszeresiti

a Dreamweavert webfejleszt6 eszkozkent, A Dreamweaver az ugyfeleik webhelyet keszito fuggetlen webfejleszt6k koreben is nepszeni. A Dreamweaver a felhasznalok szeles retegeit hoditja meg - a tapasztalr es a kezd6 webhelyfejleszt6ket is beleertve.

A Dreamweaver Macintoshon es Windows alapu szarnitogepeken hasonloan mukodik, es rnindket platform on nepszeru.

En peldaul kuionbozo webhelyeket keszitek a Dreamweaver segftsegevel: a tanacsado vallalkozasom webhelyet, az ugyfelek webhelyeit, internetes tanfolyamokat, valarnint egy kisebb kereskedelmi webhelyet. A Dreamweaver rnegorzi az egyes webhelyek egyedi meghatarozasat, igy az ezekben szerep16 barrnely weboldal gyorsan rnegjelenithet6 es szerkesztheto. Nehany oran belul az Olvas6 is kepes Iesz minderre.

1. ora • A Vilaghal6 as a Dreamweaver lehetosagei ! 5

A Dreamweaver a HTML-en (Hypertext Markup Language - hiperszoveges [elolonyelv) alapuI; ez a nyelv a Vilaghalon - egy webbongeszonek nevezett programon kereszrulmegjelenitendo tartalom forrnazasara szolgal, Ebben a konyvben a HTML egy korszenibb valtozatat, az XHTML-t (Extensible Hypertext Markup Language - bovftheto hiperszoveges jelolonyelv) alkalmazzuk, A Dreamweaver megirja he1yettiink

az XHTML-k6dot, Igy ahhoz, hogy elkezdjiik hasznalni, nem kell tudnunk, hogyan kell XHTML-t Irni. Az osszes tanitvanyomnak, Igy a konyv olvasoinak is elmondom, hogy az XHTML alapjainak elsajatftasaval szakszenibb es sokoldahibb weboldalakat hozhatunk letre. A 7. 6ra rnajd bemutatja, mikent kell XHTML-t megjeleniteni es szerkeszteni a Dreamweaverben.

A Dreamweaver technol6giaja

A Dreamweaver vagy az XHTMl haszmllatat erdemes el6bb megtanulni? Ez a "tyuk vagy tojas" jellegu kerdes gyakran merOl fel a webtervezest vagy webfejlesztest tanulni vagy6kkal val6 beszelqetssek soran, Minden bizonnyal

az a legjobb, ha eldszor az sszkoz - peldaul a Dreamweaver - hasznalatat sajatltjuk el, es a val6di feladatok elvegzese saran bovftjuk XHTML-ismereteinket. Ha mar alapszinten ismsrjuk a Dreamweavert, jabban latjuk az XHTML osszefUggeseit.

Akik meg esak most fognak hozza a webfejleszteshez, valoszimileg nern ismerik

a Dreamweaver altal kinalt osszes Iehetoseget. Ebben a leckeben felfedezziik, hogy milyen elemeket adhatunk a weboldalakhoz, a temajuktol, illetve a rendeltetesuktol fliggetlenul. A weboldalak letrehozasa iran1 enlekl0J0k nagy resze idot szentel mas webhelyek tanulmanyczasanak. Az olvasok kozul bizonyara sokan j6l tajekozodnak az Interneten, es gyakorlottak az inforrnaciok felkutatasaban. A Dreamweaver es

az XHTML hasznalatanak elsajatitasaval harnarosan rnaskepp szemleljuk majd a weboldalakat: a szoveghasabok olvasasa helyett arra gondolunk majd, hogy mikent hozhatunk letre hasonlo szoveghasabokat a Dreamweaver segltsegevel.

A tanulas egyik legjobb m6dja, ha megvizsgaljuk az Internet bongeszese so ran felfedezett weboldalakat. A legtobb bongeszoprogramban megtalalhato a Source (Forras) vagy a Page Source (Olda! forcisa) paranes, amely Iehetove teszi az adott webo!da! HTML~ kodjanak megtekinteset, S6t, a bongeszo File (FajD rnenujeben szerep16 Save Page As (Oldal mentese mas kent) vagy a Save As (Mentes) maskent paranes segitsegevel

a merevlemezre is menthetjuk a weboldalt. Ezutan a mentett fajlokat a Dreamweaverben megnyitva megvizsgalhatjuk az oldal szerkezetet. Ez a m6dszer kivaloan alkalrnas annak kideritesere, hogy a weboldal szerz6je rnikent erte el az adott hatast, A kezdok meg va16sziniIleg nem ertik meg a weblap teljes tartalrnat, de masok utanzasaval remekul tanulhatunk.

6! I. resz • Bevezetes a Dreamweaver vih§gaba

A HTMIJXHTML as a szerzoi jogok

Ne feledjiik, hogy a maqanszemslvek es vallalatok szellemi termekeit - beleertve a webhelyeket - szerz6i jogi torvenvek vedik, A szerz6i jogok altai vedett webhelyekr61 nem masolhatunk HTML-t, iIIetve XHTML-t es kepeket.

Ebben a leckeben megisrnerkedunk nehany webes szakkifejezessel es eljarassal, arnelyeket a konyv reszletesen taglal. Az egyes szavak meghatarozasat a Szakkifejezesek jegyzekeben talaljuk. Nem baj, ha valaki ennel a leckenel meg nern ert mindent tokeleresen=-

a kesobbi leckek lepesenkent kovetheto utasitasokkal elmagyarazzak az osszes alapelvet. Ebben a leckeben attekintjuk a Drearnweaver segitsegevel letrehozhato weboldalfajtakat.

Webhelypeldak elemzese

A Rick Steves' Europe Through the Back Door (Europa az oldalbejaraton keresztul Rick Steves-zel- www.ricksteves.com) egy nernzetkozi utazasi iroda, arnely a washingtoni Edmondsban talalhato. Az ottani barataim nagylelkifen engedelyeztek, hogy peldakent reszleteket mutassak a kinlno webhelyukrol. Rick Steves utazasi rmfsorai az egyesult allarnokbeli helyi PBS csatornakon lathatok, A Rick Steves' Europe webhely nernreg aralakitason esett keresztul - a tobbsziruti stiluslapok ceSS) es a korszenl oldalformazasi m6dszerek lehetove teszik a rnunkatarsaknak a teljes webhely gyors frissiteset, a felhasznaloknak pedig atlathato es konnyen kezelheto feluletet kinalnak,

AI"Sr .. " .. +~ ... 1 .... al .... l ... rnek .... Z;'::··,... l'a'p_l, ~- L.:---h·I··V·~"Lko7:f;~OIK

RiUI-'VIW'LI,I I,IIU IIW'IIW'II 1\. • ., UVt:l'\J, I\. til\. CO) IIItJ'tll I... &.oW"

A weboldalak nagy resze tartalmazza legalabb az alabbi harem alapveto elemet:

• Szoveg

• Kepek

• Hiperhivatkozasok

Az 1.1. abran a Ricks Steves' Europe honlapja; - a webhely bejaratakent szolgalo weboldalt -lathatjuk, amely rnindossze a fenti elerneket tartalmazza, egy keresomezovel kiegeszfrve a lap jobb felso sarkaban, A legtobb webhely alapjat ez a harom elem kepezi, amelyek grafikaval (kepekkel) tamogatott informaciot (szoveget), valarnint mas oldalakra mutat6 navigacios lehetoseget (hiperhivatkozasokat) biztositanak.

Megfigyelhetjuk, hogy az 1.1. abran tobbfele szovegstilus szerepel. A lap kozepen megjeleno ket hasabban a szoveg hagyornanyos, konnyen olvashato betutipussal es -merettel jelenik meg. A bal oldalon, Rick kepe alatt talalhato felirat benfrnerete valarnivel kisebb, csakugy, mint a jobb szelso hasabe a What's New CUjdonsagok) cim alan. Az oldal tetejen szereplo "Welcome to Rick Steves' Europe" felirat valojaban nem is szoveg, hanem egy szoveget tartalmaz6 kep,

1. ora • A Vihighcilo es a Dreamweaver lehetosegei i 7

A betutfpus kivalasztasa

A betutlpusokat eredetileg a nvorntatashoz Iejlesztettek, de szarnos uj betiltlpust dolgoztak ki arra a celra, hogy a szdveq konnven olvashato legyen a szamftogep

kepernvdjen. A Verdana es a Trebuchet-peldaul ket kozkedvelt, kepemvore kesziilt betUtfpus.

,. n'"avel Start!

craat dSi315 IJn bi3gs, o.VD:5', gllidBbool<5, i3=';~DriB5.

Toul'" Nl!I'IS

tee-n .. boPJf Rick's tCU"r!!i £!: europe's uest cesuneucns. Wbi';r!!'~ Rick

t-li~ calender of ,PU"illic

1;>-G,.itffjriwill!

snere nos with other travelers Or') more man lOO roolcs.

I> Ride ran PIJhliC1V

tlirtime:s;, setcts, traver cereus, video enos fo, 70 episodes

I'~e" Publicllj:j_QJI_j:

Elert Destinstiens and 'teur C<lt"I~~. M'JnUlIT e:-n"" .... ,-fr-QfTI Flicl::, too::-.

~~llJ;l1ri~tm[F"!, Ric\:'s F'BS spcci~1 is nell'll o!! "jo;i"o;r"o;HJI;l.,>t1

Paris i'L!ldEOTours V!$il:t-CI,P si9hi:s" with Rid.; R,d:: St.,. ... "s· Eun:m", vid""fmmr.isT\i'5i1m".

~ ewell Pi:l:s.:s: Stofe Rick's:railpa55 gLJi-de hBlps \,OU find tho: best ceal.

Hiperhivatkozas

Kepes hiperhivatkozas

1.1. 6bra

A Rick Steves' Europe Through the Back Door uiebhely sz6veget, leepeleet, hipcrhioatleordsoleat, ualamint egy keresomezot tartalmaz

Az 1.1. abran tobb kep is lathato, A weblapokon szerepl6 kepek mindig kUIs6 kepfajlok. Az XHTML megmondja a bongeszonek, hogy a kep a weboldal melyik reszen jelenjen meg. A lap bal felso sarkaban talilhat6 emblema egyetlen kepnek latszik, pedig valojaban ket kepbol ill, ami megkonnyiti az emblerna aljan szerepl6 vilagosabb szinu vonal kirajzolasat (ha szinesben nezzuk az eredeti weboldalt, piros vonalat latunk),

Az 1.1. abran szamos hiperhivatkozas is szerepeL Ha a val6di webhelyen ezekre a hiperhivatkozasokra kattintunk, a Rick Steves' Europe webhely kulonbozo teriileteire juthatunk. A hiperhivatkozasok alapesetben kek, alahuzott szovegkent jelennek meg, CSS stiluslapok segitsegevel azonban ezt megvaltoztathatjuk, A Rick Steves' Europe webhely hiperhivatkozasai szabvanyosan elcszor kek, alahuzott szovegek, amikor azonban

a hivatkozis fOle vissziik a mutat6t, az alahuzas elnfnik. A webhely osszes hiperhivatko-

sll. feSZ • Bevezetes a Dreamweaver vilagaba

zasa ugyanigy viseIkedik, mivel az ezt szabilyoz6 CSS-szabily a webhely egyes lapjaihoz rendelt kulso stiluslap, A hiperhivatkozisok letrehozasarol az 5. leckeben, a CSS segitsegevel torteno formazasukrol pedig a 6. leckeben tanulunk majd.

Az: 1.1. abra bal als6 sarkaban lathato egy kep, amelyen a "Check Out Our 2007 Tours" CTekintse meg 2007-es utainkat) felirat szerepel. Ez a kep szinten hiperhivatkozas.

A Drearnweaver kephez es szoveghez egyarint kepes hiperhivatkozast adni. Kepterkepek Ietrehozasaval meg azt is megtehetjuk, hogy a kepeknek csak egy kis darabjat hatarozzuk meg hiperhivatkozaskent. A S. Ieckeben rnegismerkedunk

a keptulajdonsagokkal es a weboldalakon megjelenitheto kulonbozo keptipusokkal, valamint megtanuljuk, hogyan lehet kepterkepeket adni a weblapokhoz.

Oldalelrendezes

A weboldalak letrehozasakor szern elott kell tartani, hogy a felhaszni16k kulonbozo kepernyofelbontassal (peldaul SOOx600, 1024x76s vagy 12S0XI024) jelenitik meg

az oldalt, es lehet, hogy a bongeszoablak nines akkorara nagyitva, hogy kitoltse a teljes kepernyot. Az oldalelrendezes - a szoveg es a kepek rnegtervezese es elhelyezese

a weboldalon - gyakran sok megfontolast, idot es kiserletezest igenyel.

A Rick Steves' Europe webhely letisztult oldalstilussal rendelkezik, amely a kulonbozo meretu bongeszoablakok hasznalatakor konnyen attekintheto marad. A webhely stiluslapokat es tablazatokat egyarant alkalmaz az oldalelrendezeshez, amelyeket a 6. es

a 13. leckcbcn targyalunk. Az 1.2. ibra a Rick Steves' Europe-nak a Drearnweaverben megnyitott kezdolapjat mutatja. A kepernyo jobb oldalan nyitva talalhato CSS Styles CCSS stilusok) tabla a webhelyen alkalmazott CSS-szabalyok listajat jeleniti meg.

A Drearnweaver kezelofeluleterol es az 1.2. abran lathato egyeb elernekrol a konyv soran reszletesen sz6t ejtunk,

Mentes oldalelrendez6 programokb61

A weboldalakat a legtiibb programban - peldaul a Wordben is - menthetjOk mas tormatumban, majd a Dreamweaverben megnyitva tisztazhaquk as szerkeszthetjUk az eredmenvt, Miel6tt eldiintjUk, hogy az eppen szerkesztett tartalommal rmlkodik-e

ez a m6dszer, pr6baljuk ki egy hasonl6 oldallal.

A CSS lehetove teszi, hogy formazzuk a szoveg es a kulonbozo Xlf'I'Ml-cimkek megjelenesenek modjat, valamint a weboldal egyes elemeinek elhelyezeset, Az 1.2. ibra jobb oldalan a CSS Styles tablat lathatjuk. A nav. cs s kUls6 stiluslap neve alatt szerepel az osszes CSS-meghatarozis felsorolasa. A kulso stiluslapok lehetove teszik, hogy

a webhely osszes weboldala azonos stilusu Iegyen. Ezen kivul - ez a kUls6 stiluslapok legjobb szolgaltatasa - biztositjak, hogy a webhely fejlesztoi egyetlen fajl modositasaval frissithessek a teljes webhelyet,

1. 6ra • A Vihighal6 as a Dreamweaver lehetosegei i, 9

stilus

CSS Styles tabla

'" Travel stOT"~

Great deets on bags, DVDs, C"uid"'boOY.5, aO::-ES5oriE'S.

, ~ Rkk..ru:U~!!~

: Alrtim-es. serets.traver

: eersus. ceee dips tor 70 . episodes.

1.2. abra

A Rick Steves' Europe lsezdolapja tabldzatole es CSS segitsegevel alakitja ki az oldalelrendezest

A CSS a legfrissebb olyan nyelv, amely a weboldalak elrendezesere szolgal, es a technologiaja folyamatosan fejlodik, A CSS nyelv elhelyezest es oldalelrendezest vegzo reszet idonkent CSS-P-nek nevezik. Ez a resz hatarozza meg az oldalterv alapveto tulajdonsagait, peldaul az elemek szeIesseget es magassagat, hogy a szomszedos elemek mellett maradnak-e, vagy uj sorba kenilnek, illetve, hogy az elernek egymas fole halmoz6dnak-e.

A kisebb-nagyobb eszkozok rna mar webbongeszot is tartalrnaznak, ezert lehet, hogy a felhasznalo mobiltelefonon vagy eppen a hutoszekreny ajtajaba epitett sikkepernyon tekinti meg a weblapokat. Az 1.3. abran az Adobe Device Central CS3-mat lathatjuk, amely a Dreamweaver CS3-mal egyQtt telepul. Az alkalmazast elinditva utanozhatjuk

a weboldalak rnegjeleneset az egyes eszkozokon. Fontos ellenorizni az oldalt, hogy

a kulonbozo eszkozoket hasznalo felhasznalok kellemes elrnennyel gazdagodjanak

a webhely megtekintesekor. A 14. leckeben tovabb vizsgaljuk az utanzoprogramot (ernulatort) es a hordozhat6 eszkozoket,

10 r L resz • Bevezetes a Dreamweaver vjh~gaba

Mobiltelefonbdnqeszd-utanzti

1.3. abra

Az Adobe Device Centra! CSj uianeoprogram segitsegeoe; ktll6nh6z6 hordozhato es kis kipernyos eszkOzokOn probdlhatjule ki a uiebhelyeleet

Urlapok: adatgyujtes internetes kereskedelemhez, hfrlevelekhez vagy bafmf lJIashoz

Bizonyos webhelyek uzleti cellal cserelnek informaciot a latogatokkal - ez lehet gepjarrmleladas (www.acura.com). egy Barbra Streisand koncertjegy arverezese

(www. coay , com), egeszsegesebb etrend tervezese (www.mypyramid.gov), vagy polora, kavesbogrere, illetve egeralatetre nyomtathat6 minta arusitasa (www.cafepress.com).

A latogatok a fenti webhelyek mindegyiken iiriapokon adhatjak meg az adataikat, hogy termekeket vasarolhassanak vagy informaciot kapjanak. Az urlapok altal a webhelyek ketiranyu csatornava valhatnak, mivel a latogatok nem csak megtekintik az azon talalhato inforrnaciokat, hanem 6k is adatokat kuldhetnek vissza.

A Rick Steves' Europe webhely tobb oldala is urlapokat hasznal, Mar beszeltunk

a bonlapon szerepl6 keres6mez6r61. A Search (Kereses) gomb elindit egy parancsfajlt, amely a uiebleiszolgalon - az elkeszult weboldalfajlok tarolasara szolgalo szamitogepen - talalhato. Ez a parancsfajl a webhely osszes weboldalan keresi a keres6mez6be gepelt szavakat, a felhasznalo pedig megtekintheti az altala visszaadott keresesi talalatokat. Az 1.4. abran lathato keres6 urlap egy szovegmezobol es egy eIkiild6 gombb6! all- a 20. fejezetben ezt a ket ifrlapelemet is targyaljuk.

1. ora D A Vilaghalo as a Dreamweaver lehetosegei f. 11

Kereso urtap

Kereses i ta Iii latok

1.4. abra

A keres6 iirlapohon a latogato megadhat egy szoueget, majd elleuldheti a parancsfaflnah, amely oisszaadja a talalatohat

A parancsfajlok letrehozasa halad6knak sz6l6 terna, amely mar nem tartozik ennek

a Drearnweaver-konyvnek a temakorebe, a 21. leckeben azonban {Ctegeffllltunk nehany parancsnyelvet es olyan helyeket, ahonnan parancsfajlokat lehet letolteni, A Rick Steves' Europe a ColdFusiont hasznalja, ameIy az Adobe parancsfajlkeszitd es alkalmazasfejleszto programja. A ColdFusionben irt parancsfajlokat a . cfm kiterjesztesrol ismerjiik meg.

A parancsfajlok letrehozasa csak a jeghegy csucsa ahhoz kepest, amire a ColdFusion valojaban kepes,

A Rick Steves' Europe ezen kivul az utazasi aruhazaban szerepI6 elemek dinamikus megjelenitesere is a ColdFusiont hasznalja (travels tore. ricksteves. com) .

Ezt a dinamileus weholdalt, ahol az elemek leirasanak es a kepeknek a rnegjelenitese egy adatbazis rekordjai alapjan tortenik, a Dreamweaverben is Ietre lehet hozni. A konyv

24 leckejenek elolvasasa utan lehet, hogy lesznek olyanok, akik tovabb akarnak lepni egy kiszolgaloi alkalmazasnyelv, peldaul a ColdFusion rnegtanulasara, de az is tokeletesen elkepzelheto, hogy tovabbra is a konyvben Ieirtakhoz hasonl6 statikus weboldalakat (ami a dinamikus weboldal ellentete) keszitunk, rnegis sikeres weblapkeszitove valunk,

Parancsfajlkeszftes urlapokhoz

Az urlapok letrehozasa ugyan eqvszeni, az azokat rmlkodtetd parancsfailok letrehozasa azonban bonyolult.

12 1. I. rssz II Bevezetss a Dreamweaver vilagaba

A vasarlasi rmlvelet vegen - peldaul a Rick Steves' Europe utazasi aruhazaban -

egy HTML iirlap gyCijti ossze a vasarlo adatait. Az 1.5. abran lathato urlap szovegmezok es Ienyilo listak segftsegevel ked be az allarnra es az orszagra vonatkoz6 adatokat. Gyakran csillaggal ( *) jelolik az olyan szovegrnezoket, amelyeket rnindenkeppen ki kell tolteni az urlap elkiildesehez. A Dreamweaverben rendelkezesre a1I6, JavaScriptben irt Validate Form (Urlap ellenorzese) mtivelet C"viselkedes") meggy6z6dik arrol, hogy

a litogat6 a megfelel6 tipusu adatokat adja meg (Iasd a 21. lecket),

Sz6vegmezo

,- _ _,._,-----

Em[Jll Addre55: r

.,

_____ J

; Enter your rode here.

tncluda Soft-e or Apt.

*

lenyfJ6 I ista

1.5. abra

Az iirlap bekeri a uasarlo adatait, majd az firlap feldolgozasa el/iu egy parancsfdjl ellenorzi, hogy az osszes szukseges informdcio szerepel-e benne

Multimedia

Szamos webhely letezik, amely filmeket, hangokat, zenet, animaciokat, tergrafikakat es egyeb multimedias elemeket tartalmaz. Ezekhez az elemekhez valamilyen lejatszo alkalmazast kell letolteni es telepiteni, peldaul a Flasht, a QuickTime-ot vagy a RealPlayert.

A Dreamweaverben letrehozott webhelyek automatikusan kezdernenyezik a megfe1el6 lejatszo letolteset, ami megkonnyiti a webhely latogatojanak dolgat. Manapsag, amikor egyre tobben rendelkeznek szelessavu kapcsolattal, egyre tobb webhely tartalmaz nagyobb atviteli teljesitmenyt igenylo multimediafajlokat,

1. ora • A Vilagh610 as a Dreamweaver lehetosagei [13

Teiepftett lejatszoprogramok

Az operacios rendszerek (amilyen a Windows XP vagy a Macintosh OS X) gyakran beepltve tartalmaznak nehany nepszenl rnultirnediaiejatszc programot. Az Adobe Flash lejatszot psldaul a leqtobb szamrtagepre eldre telepftik. A nagyobb biinge-

szdknek is resze nehany lejatszo, a vallalati kiirnyezetben mukiido szarnltoqepeken azonban idonkent az operacios rendszer testreszabott valtozata talalhato, amelyben nincsenek lejatszok.

A Rick Steves' Europe webhelyen Rick utazasi televizios rmisoraibol szarmazo reszleteket talalunk, ahogy azt aZ 1.6. abra szernlelteti. A reszletek lejatszasahoz egy ingyenes programot - a RealPlayert Cwww.real. com) vagy a Windows Media Playert Cwww.microsoft. com/windows /windowsmedia) - kell telepiteni a szarnitogepre. Amikor a latogato a rnultimediafajlra mutate hivatkozasra kattint, egy Iejatszoprogram rryflik meg a bengesz6ablak elott, es elkezdi lejatszani a fajlt,

RealPlayer-fajlra mutate hivatkozas

Windows Media Plaver-fajlra mutat6 hivatkozas

one of our 3'J-rJ1;rnJ"l';' !li3S 'E'pj5Dd<=5_ On", ~"~I;>I' sh[)w~ ere <l!riI1-g ;)11 ()ver the U5A, ... .-e' ... e rl"o::i/;Je(J Rid,',;: IWb5a"d a ouncb ct chps tnat Jcr varicua .t.mD:"I{] ()th~.rth;r>g~_ ,nw111,,;om th;,t ,n Pr,,':!c'"

lt1e bensleddcr. al"ld ttl" -dent!5t

'Blo~pl!r5~ Po!lri_1

1.6. abra

A weboldalak multimediafajlokra is hiuatteozhatnals, es altalaban tobb programer hindlnale a fajlote megteleintesehez

Bizonyos weboldalak, peldaui az Adobe-nak az 1.7. abran lathato honlapja

Cwww _ adobe. com) a weboldalba agyazzak a multimediafajlokat. Ebben az esetben egy videot, hangot es animacios hatasokat tartalmaz6 Adobe Flash fiim indul eI a weboldal betoltesekor - pontosabban akkor, ha korabban telepitettuk a Flash lejatszot. A szami-

14 i I. resz • Bevezetes a Dreamweaver vilagaba

togepek donto tobbsegen azonban megtalalhato a szeles korben elterjedt Flash, tehat a nezok nagy resze le tudja jatszani a Flash filmeket. Teljesen uj Flash filrnek keszitesehez szukseg van az Adobe Flash programra, ennek ellenere a Dreamweaver is kepes

a Flash filmekbeillesztesere, beallitasara es elonezetere. AlD. lecke reszletezi, hogyan kell Flash Iajlokat es egyeb tipusu multimedias anyagokat adni a weboldalakhoz.

Flash film

~~1~1~~~,- ueo r-'D~ri~n:>l!;; ri.:. ... n~wf,,-""''I' set ~'~::l~tb9~ c~~rs GNna\i .. ~ p~rf~ffilanC12 0'1 ~OL1 PO"-,,,-FC ~~~ Int~l-tJ",-5~d I.I~;::)

n,,~ ~,~~,~ 5 .. ,0· 'I~,

II ~:::i2~~!Ei~;E~~~:~~~

~~on, a,,~ C,(II1~bQrste a .... f'OF d~wm~nt~

E;lui~~ [~nl~.

F~c <r~~';T~ ~"",;,.~iQ'~\o in ""~. prin", ~~~ d.~"~' ,-;~.~

1.7. abra

A ioeboldalakba Flash. filmeeet es egyeb tipusu multimediafajlohat is be Iehet illeszteni

{l~~~~~. C~.r.'c,

~'P'c '~,"\~r"~h .• nd <>!~~r ~~.·~IQ~~r ,==~""~,.

lnteraktivitas

A Dreamweaver akkor is kepes java Script-kodokat adni a weboldalakhoz, ha nem tudjuk, hogyan keIl JavaScriptet irni, A Drearnweaver viselkedesi JavaScript-k6ddal egeszitik ki az oldalt, ami lehetove teszi, hogy rogzitsuk, ha a Ielhasznalo egy kepre kattint vagy valamelyik elern fole viszi a mutat6t, es sok mas, a bongeszo altal eszlelheto ese~ menyt, A szerz6 szakterulete az elektronikus oktatoanyagok letrehozasa a Drearnweaver segttsegevei, es a Drearnweavert hasznalja arra, hogy a tanul6kat vegigvezesse

az adott feladat elvegzesehez szukseges Iepeseken. Az 1.8. abran peldaul nem

a Dreamweaver Iathato, hanern a Dreamweaver oktatasi segedlete, amelyben a tanulonak a kepernyo egy adott reszere kell kattintania. Ha a felhasznalo a megfelel6 reszre kattint, automatikusan tovabblep a segedlet kovetkezo oldalara, ha pedig rossz helyre kattint, hibauzenetet kap.

Az 1.8. abran, az oktatasi peldaban a tanulo egy atlatszo kepre(egy atlatszo GIF kepre) kattintva a Go to URL (URL-re ugras) rmlveletet (viselkedest) inditja el. Ez gyakori m6dszer annak erzekelesere, hogy a felhasznalo a kepernyo egy meghatarozott terule-

1. 6ra • A Vilaghiil6 as a Dreamweaver lehetosegei i 15

tere kattintott-e. A 18. leckeben tobbek kozott ezt a viselkedest is targyaljuk es szernleltetjuk. Elkepzelheto, hogy nines szuksegunk a Dreamweaver bizonyos interaktivitasi szolgaltatasaira, de a Swap Image (Kepcsere) viselkedesnek valoszinuleg hasznat 1:11- juk, ha kepvaltast (rollover) szeretnenk alkalrnazni, amelynek soran a kep rnegvaltozik, ha a felhasznalo fole viszi az egermutatot,

Forropont

Az oktat6anyag utasftasai

FT~=

C~l~ Flll

M.~

the css :SLyI~ rnmmand !ligh!io-hte-:l {If" ~t;.eeCl.

""H~:":'<' 11., l:"~"'~1

1.8. abra

Az oktat6anyag r6gziti, ha a [elhaszruilo a ,jorr6pontra" (az aktiv felulctre) leattint, majd auiomatihusan betolsi a k6vetkezo weboldalt

Kepvaltas

A Dreamweaver Swap Image viselkedesevel olyan hatast hozhatunk letre, amelynek soran a kep meqvaltczlk, arnikor a telhasznalo a kep fole viszi az egeret. A viselkedes Ielvetelet a Dreamweaver Rollover Image (Valt6kep) objekturnaval is vegezhetjuk,

amely az oldalhoz adja a hatast helvettunk, A Dreamweaverben gyakran tobbfelekeppen is ellehet erni ugyanazt a celt.

A Rick Steves' Europe webhely a Dreamweavernek az 1.9. abran bemutatott Open Browser Window (Bongeszoablak megnyitasa) viselkedesenek segitsegevel egyedi mereni ablakot nyit meg. Az elougro uj bongeszoablakban egy terkep es a terkep kinyomtatasat elindito hiperhivatkozas jelenik meg. Az egyedi ablak a megszokott navigacios es menueszkoztarak nelkul nyilik meg.

16 II. feSZ • Bevezetes a Dreamweaver viliigaba

Hiperhivatkozas

OJ bonQesz6abiak

1.9. abra

Az oldalon szerepki egyik hiperhiuatleozds a Dreamweaver Open Brouser Window oiselleedeseneh segttsegeuel uj, meghatdrozott mereta bongeszoablakot nyit

A Rick Steves' Europe webhely tobb mas weboldala is czt a m6dszcrt hasznalja ahhoz, hogy tovabbi informaciokat tartalmaz6 iij bongeszoablakot nyisson, igy a felhasznalo rnindket ablakot egyszerre lathatja, es az iij bongeszoablakban tanulrnanyozhatja

a kiegeszito informaciot. A Dreamweaver segitsegevel anelkul biztosithatjuk ezt a rnagasabb szintu szolgaltatast, hogy sajat magunknak kellene megirni a JavaScript-k6dot.

Webhelyek feltoltese az Internetre

Napokig, hetekig, h6napokig, sot evekig is dolgozhatunk a weboldalakon, de elobbut6bb szeretnenk (vagy kenytelenek vagyunk) azokat valamilyen webkiszolgalora helyezni, hogy masokkal is megoszthassuk. Ennek vegrehajtasahoz nines szukseg mas szoftverre: a Dreamweaver teljes konf szolgaltatasokkal ellatott beepitett FTP- (File Transfer Protocol - fajlatviteli protokoll) programmal rendelkezik, amely Iehetove teszi a tavoli webkiszolgalohoz val6 kapcsolodast es a fajlok feltolteset a Dreamweaverb6L Az 1.10. abran a Dreamweaver kibontott Files (Fajlok) tablajat lathatjuk, amint eppen egy tavoli webkiszolgalohoz kapesol6dik. A webhely kiszolgalon talalhato tavoli fajljai a kepernyo bal oldalan, a helyi fajlok pedig a jobb oldalan jelennek meg.

1. 6ra • A VlIaghal6 as a Dreamweaver lehetosegei 117

Tavoli f<ijlok a kiszolgal6n

Atvitel alatt all6 fajl

Helyi tajlok

,=

1",', 'i'" .v..' :C' , ,

_" 'bM~';;""-;; ~;_'~';J o ll!1l1-="JdL I {L " & '8@ liS'll

!~~~~~-~~~==t~~T~=TIH~~~~I'==J£i~~~'~~~;;;I2-~~b§~~~;E~~~'1

a::J .klw!do.mkGdjm.1-r<f a~ Silf:·M~the·.'et(... folw ;;!5i20061ij:31Al\l

CB,··d CilO:igi1;!j; ~ckr lj9~[l75~3!i?i~ IBb CPOro(;u"iaf;; fl:.lder .fI!2;J~o~:3i'iPJ"_-

Folder WPfYJ7];35W. ffi··t::. CflSooru: ftol:Je:- 9f1jj2fJI]fJ nJIJ~1.,.'" -

Rl}5 li9!EiJ7.3~36PJol e;.fCj 5-!rip!s FQd~ BPfj/2!Y.J6oS:2SIlM-

~'I'.5lh"I'R'<.ml,i9poo."I:~mPlI< •• =' -.:::ii-I'-"I""",,."~htmltll2r.3HiMRI!;, E!20;LOO6-o:3;P~

ffi'.:a fWJJ MO~ 9!5/WM 10:35 A~

2)(BHTMF"~ e/2ll1l1N66:39P,c.!

::.~r'16f1~",''''io!s/S/2OOEi1:[lZA''1 LilIl-fTM File S/~/2W5 6,'jl PM OEMs~M~iE: 9j!i(200611:{J3",r.,M: ~ HlMf1e:' .El/<'{IjL00.5-5:4IJPi"I"

!±J·b Ql~lc'~ tt·b~t:s-

~, GroopLhtm o: ~l,SI\f -~ GrQI.3;I.2_fltr:J Q;' Gl-O<..Ip2.~,~f tt Gr~~.r,:m

,"

.: ',,>,

,'"

,~.

1.10. abra

A Dreamioeaoer beepitett FIP szofttierrel rendelhezile, amely lehetove teszi a weboldalak uebleiszolgdlora tort enG atvitelet

Webtarhely keresess

Aki meg nem talalt helyet a tavoli, nvilvanos webhelye szamara, szarnos olyan webhelyet is megtekinthet, amely tobb ezer, az ilzletert versenqd tarhelvceqet (webgazdMI ertekel, Adjuk meg valamelyik keresdrnotorban, peldaul a Google-ben

a "web hosting reviews" kifejezest, vagy latcqassuk meg a www. web- hostingreviews. org webhelyet. Meg kell hataroznunk, hogy milyen szolqaitatasokat szerstnenk a webheJyen, es hogy milyen tlpusu kiszolqalot hasznalnank (altalaban Windows es UNIX k6zlil valaszthanmk], A dontessel erdernes varni. amfg befejeztiik ezt a kiinyvet, mert akkor mar jobban isrnerjiik majd a Web lehetoseqeit.

Ujrahasznosfthat6 k6dok as fajlok

A Drearnweaver ipari hatekonysagu webfejleszto eszkoz, arne1y egyarant lehetove teszi, hogy kulonallo weboldalakon, illetve hatalmas webhelyeken dolgozzunk. Szamos webhely tobb ezer weboldalbol all, akarcsak a Rick Steves' Europe. Ennyi oldal kezelese idonkent ijeszt6 feladat, kulonosen olyankor, ha modositasra van szukseg. A Dreamweaver sablonoknak nevezett ujrahasznosithato es frissithet6 oldalakkal rendelkezik, amelyeket a weboldalak alapjakent hasznalhatunk. A sablonokb61 keszitett weboldalak az eredeti sablonra mutate hivatkozast tartalrnaznak, igy az eredeti frissitesekor a m6dositasok a sablonon alapul6 osszes weboldalon ervenyesulnek, A Dreamweaver sablonjairol a 15. Ieckeben lesz szo.

A Dreamweaver egy masik tipusu ujrahasznosithato elemet is nyujt: a konyvtarelemet, amely csupan egy weboldalreszletet illeszt be. A sablonokhoz hasonl6an a konyvtarelernek is tartalmazzak a szulo konyvtarelernre mutate hivatkozast, es a teljes

18 i I. resz " Bevezetes a Dreamweaver vih§gaba

weboldalon frissithetok. A Rick Steves' Europe webhely egyes oldalainak aljan talalhato lablec is egy konyvtarelem (lasd az 1.11. abrat), Ez Iehetove teszi, hogy a webfejleszt6k kesobb a webhelyek egyenkenti megnyitisa nelkul adjanak tovabbi informaciokat a Iablechez. A konyvtarelemek tulajdonsagait a Dreamweaver ablakanak aljan lithat6 tulajdonsagvizsgalo (Property inspector) jelenfti meg .

... Tr;:r",e'5t9I;\;

Gr,,::.t d~;ll£ Gel baes, D'VD5, "iluidebDOI-"..:3,illI!l:S50rlE:5c

~ ~k;C on PuElIJr:DI

Arrtir]l.E'~, ~tfip::'£:, travel detai:5, lide-o dips tor Jet episodes,

~r<l~,i;r,~;t, R~~~[e~es on Dublit:radto.

Tulajdonsagvizsgal6

K6nyvtarelem

1.11. abra

A weholdalakba Dreamweaver-konyvtarelemeket illeszthetunle, majd kesObb az: egyes webo!dalak megnyitdsa nelka! jrissfthetjuk azohat

Osszefoglalas

Ebben a leckeben megismerkedtunk a Dreamweaver nehany alapveto es halad6 szolgaltatasaval. Megvizsgaltuk egy utazasi webhely honlapjat, azonositottuk a szovegblokkokat, a kepeket, a kepekben szerep16 szoveget es a hiperhivatkozasokat. Lattunk neharry ifrlapot, es megtudtuk, hogy a hatterben parancsfajlok dolgozzak fel a felhaszna- 16 altal az urlapon megadott adatokat. Iathattunk a weblapokon szerepl6 hiperhivatkozasokbol elinditott, illetve kozvetlemil a weboldalba agyazott multimedias anyagokat. Az elektronikus oktatas es az utazasi webhely interaktiv mukodesenek bemutatasaval szernleltettuk, hogy rni mindent Iehet vegrehajtani a Dreamweaver viselkedeseinek segitsegevel. Ezen kivul megismerkedtunk a Dreamweaver fajlitviteli szolgaltatasaval, valamint az ujrahasznosithato elemek alkalmazasaval, amelyek segitsegunkre vannak

a nagy webhelyek karbantartasaban,

1. ora • A Vilaghalo as a Dreamweaver Jehetosegei ! 19

Kerdezz-felelek

K: Mielott hozxafognele egy webhely Ietrehozasohoz, mindenkeppen ertenem kell, hogyan lehet megualositani mindazt, amire a Dreamweaver kepes?

V: Csak a Dreamweaver hasznalatanak alapjait kell ismerni: vagyis a kezelofeluletet, valamint a szovegek, a kepek es a hiperhivatkozasok hasznalatat, Erdemes meg megtanulni, hogy rnikent lehet megtervezni a weboldalak kulalakjat,

Ez utan elsajatfthatjuk a letrehozni kivant webhelyhez szukseges egyedi kepessegeket, Amennyiben peldaul elektronikus kereskedelemmel foglalkozo webhelyet keszitunk, erdernes mindent megtudni az iIrlapokr61 (20. es 21. leeke). Ha valaki a felhasznalokkal val6 kolcsonhatason alapul6 (interaktiv) webhelyet akar kesziteni, a Dreamweaver viselkedeseit erdemes tanulmanyoznia (18. lecke).

Gyakorlassal lehet a legjobban tanulni, ezert batran vagjunk bele, es keszitsunk weboldalakat a Drearnweaverrel. Kesobb meg mindig vegezhetunk javitasokat vagy modosftasokat az oldalakon,

K: Tobb olyan programozo munkatarsarn van, akik azt dllitjdk; hogy a Dreamueaoer penzkidobas, es eleg megtanulni a HIML-t, majd a HIML-cimkeket sz6- vegszerkesztObe gepel:» letrehozni a weboldalakat. Valoban jobb ez a modszer a weboldalak letrehozasara?

V: Lehet, hogy a programoz6 kollegak szamara ez a tokeletes megoldas, de

a HTML elsajatftasa sok id6be telik, es meg ennel is tovabb tart megtanulni, hogyan kell programozni es olyan JavaScript-k6dot irni, amelyet a Dreamweaver viselkedesei tartalmaznak. Ezen sorok ir6ja ugy veli, hogy a Dreamweaverrel sokkal gyorsabban lehet nagy hatekonysagu es megbizhat6 weboldalakat letrehozni, mint kezi kodolassal, raadasul kevesebb a hibalehetoseg. Termeszetesen mindenki alkalmazza azt a m6dszert, amelyik jobban bevalik, de a kezd6k es

a halad6k egyarant hasznat veszik a Dreamweaver beepitett szolgaltatasainak.

Ismetl5 kerdesek

1. Hogy hivjak azt a weblapelemet, amelyre kattintva a felhasznalo egy rnasik weboldalra lep?

2. Mi a neve annak a nyelvnek, amely a Dreamweaverben szoveg formazasara es weboldal-elrendezesek letrehozasara szolgal?

3. Melyik az a Dreamweaver-szolgaltatas, amely lehetove teszi, hogy JavaScriptk6dokkal es interaktivitassal ruhazzuk fel a weboldalakat?

20 ~ I. resz • Bevezetes a Dreamweaver vilagaba

Valaszok

. 1. A hiperhioatleozds az a weblapelem, amely egy masik weboldalra iranyitja a felhasznalot.

2. A CSS (tobbszintii stiluslapole) stiluslapnyelvrol van sz6, amely a weboldalak szerkezetet es megjeleneset hatarozza meg.

3. A Dreamweaver uiseleedesei teszik lehetove, hogy JavaScript-k6dokat es interaktfv elemeket adjunk a weblapokhoz.

Gyakorlatok

1. Latogassuk meg az Adobe webhelyet Cwww.adobe.com). es a honlap jobb felsc sarkaban talilhat6 keres6mez6be irjuk be a shouicase Cbemutat6) es

a Dreamweaver sz6t. Valasszuk az Adobe - Showcase: Showcase finder:

Dreamweaver talalatot, amely esettanulminyokat, interaktiv tartalmat es

a Dreamweaver hasznalatat kivaloan szernlelteto webhelyeket jelenit meg. Olvassuk el az esettanulmanyokat, tovabba tanulmanyozzuk a webhelyek kepernyokepet, es probaljuk felismerni a kulonbozo weblapelemeket, illetve a weboldalak tervezesenek modjat. Az Adobe idonkent atalakitja a webhelyet, de a bemutat6k valahol mindenkeppen megtalilhat6k a webhelyen.

2. Iatogassuk meg a Web Pages That Suck (Vacak webhelyek - www. webpagesthatsuck. com) webhelyet, es olvassunk el nehany mas weboldalr6! irt cikket es kritikat, hogy rudjuk, rnilyen hibakat nem szabad elkovetnunk.

3. Latogassuk meg a CSS Zen Garden cess Zen-kerr - www.csszengarden.com) webhelyet, es a honlap jobb oldalan kattintsunk nehany elrendezesi hivatkozasra. Megfigyelhetjuk, hogy a kulonbozo kulsoknel megegyezik a weblap tartalma; az egyes elrendezeseknel csak a CSS valtozik. Nagyon erdekesl

A Dreamweaver kezelese

A leclee tartalmdbol.

• A Dreamweaver felhasznaloi feluletenek hasznalata

• A parancsok elerese

• A tablak, vizsgalok es ablakok kezelese

• Sugo a Dreamweaverben

Bizonyara mindenki tukon ulve varja, hogy hozzalathasson a kaprazatos es sz6rakoztat6 webhelyek keszftesehez, amelyeket megmutathatunk a baratoknak, csaladtagoknak es munkatarsaknak, Az is lehet, hogy valaki a munkaja soran azt a feladatot kapta, hogy

a Dreamweaverben keszitsen el egy webhelyet. Eloszor azonban meg kell ismerni

a Dreamweaver feluletet es szolgaltarasait, amelyek segitenek sikeres webfejlesztove valnunk, A Dreamweaver feluletenek megismerese lehetove teszi a konyv tovabbi reszeiben szerepl6 utasitasok megerteset,

Aki mar hasznalt mas Adobe-eszkozoket, az felismeri az Adobe hagyomanyos feluleti elemeit, peldaul a tablacsoportokat es a vizsgalokat. Ha valaki korabban mar hasznalta a Dreamweaver valamelyik regebbi valtozatat, annak erdernes gyorsan atfutnia ezt

a lecket, hogy lassa, az Adobe milyen izgalmas valtoztatasokar es iijitasokat vezetett be

22 l; I. resz • Bevezetes a Dreamweaver vilagaba

a Dreamweaver uj valtozataban. Ez a leeke fontos utmutatast ad a weboldalak letrehozasaval kapcsolatos alapfogalmakat illet6en, amelyekkel a kesobbi leckekben ta131- kozunk majd.

lsmerkedss a Dreamweaverrel

A Dreamweaver teljes fejlesztokornyezet, HTML-szerkeszt6, alkotoeszkoz, dinamikus weboldalfejleszto es webhelykarbantart6 ~ egyben. A weboldalakat a HTML segitsegevel hozza letre, de sok mindent megoldhatunk anelkul, hogy akar egyszer is a HTML k6dra kellene pillantanunk. Ha parancsfajlokat is tartalmaz6, professzionalis minosegti weboldalakat szeretnenk kesziteni, a Dreamweaver megkonnyiri a dolgunkat.

A HTML a weboldalak nyelve, amely nagyreszt csucsos zarojelekkel «» hatarolt cimkeparokbol all. A cimkek fogjak kozre a weboldal objektumait, peldaul a szovegeket, de onrnagukban is allhatnak. Peldaul a kbvetkez6 HTML k6ddal felkoverre tehetunk egy szoveget: <strong>felkbver szbveg</strong>. Megfigyelhetjuk, bogy a cirnkek parban allnak: az egyik az altala befolyasolt szoveg el6tt, a masik pedig utana, A cimkepar zaro cimkeje mindig perjellel kezdodik. A HTML az egyedul aU6 cimkek hasznalatat is engedelyezi: < img s rc = "moso 1 y . gi f" >. A Dreamweaver alapertelmezesben a HTML szigonibb valtozatat, az XHIML-t (Extensible Hypertext Markup Language ~ bovitheto hiperszoveges jelbl6nyelv) hasznalja, es a konyvben szerepl6 peldak is XHMTL-ben irodtak. Az XHTML-ben kotelezo pares cimkeket hasznalni, ezert a fenti peldaban mutatott kepcimkenek igy keIl kineznie: dmg src="mosoly. gif"></img>. Ennek roviditese

az XHTML-ben a kovetkezo. <img src= "mosoly. gif" />, ahol a cimke vegehez adjuk

a zaro perjelet.

A Dreamweaver alakhil(WYSrwYG - What You See Is What You Get) weblapszerkeszt6, ezert rendkivul hatekony, mikozben konnyen hasznalhato, A Dreamweaverben u] webhelyeket hozhatunk Ietre, tovabba meglevo webhelyeket is betolthetunk es szerkesztheuink. A Dreamweaver nem m6dositja es nem rendezi at a k6dot. Mindig is az volt a Dreamweaver egyik legnepszenfbb tulajdonsaga, hogy erinretlenul hagyja

a mar Ietezo webhelyeket. A Dreamweavert keszito vallalat, az Adobe munkatarsai .oda-oissxa HIML"-nek (roundtrip HTML) nevezik ezt a szolgaltatast. Ahhoz, hogy szabvanyos HTML, XHTML vagy XML fajlokkal dolgozzunk a Dreamweaverben, nines szukseg serrunilyen atalakitasra, rnindossze meg kell nyitnunk a fajlokat es elvegezni

a modositasokat,

A Dreamweaver mindezek mellett alkotoeszkoz is. Mit ertunk alkotoeszkoz alatt?

Az alkotoeszkozok lehetove teszik, bogy interaktfv elemeket tartalmaz6 teljes alkalmazasokat hozzunk letre, A Dreamweavert egyszertf Hf'Ml-szerkesztokent is hasznalhatjuk, de multimedia-alkalmazasokat is keszithetunk a segitsegevel. Olyan elmenyt kinalhatunk a nezonek, amely hangokkal, animaciokkal, videoval es a felhasznalotol vart kozrermikodessel egeszul ki,

2. 6ra .. A Dreamweaver kezelese ! 23

A Dreamweaver munkaterUlete

Amikor a Windowsban eloszor nyitjuk meg-a Dreamweavert, valaszthatunk a Designer (Tervez6) vagy a Coder (Programoz6) munkafelulet kozott, A Coder munkafelUlet

a kepernyo bal oldalara rogziti a Dreamweaver osszes tablajat, mig a Designer rnunkafelulet a jobb oldalra. A Dreamweaver Macintosh-valtozata automatikusan a Designer munkafeluletet kinalja. Mivel a konyv osszes abraja es peldaja a Designer munkafeluletre hivatkozik, erdemes ezt a bealhtast valasztani, Ha eloszor a Coder munkafeluletet valasztjuk, es kesobb a Designer munkafeluletre szeretnenk valtani, a Window, Workspace Layout, Designer (Ablak, Munkafeliilet elrendezes«, Tervez6) menupont segitsegevel tehetjiik ezt meg.

Az udvozh5 kepernyc5

A Dreamweaver a fajlok megnyitasa el6tt egy felul zold savval ellatott ablakot jelenit meg - ez az udvozlo kepernyo (lasd a 2.1. abrat), Az udvozlo kepernyo felsorolja

a Dreamweaverben leggyakrabban vegrehajtott feladatokat, amilyen peldaul az Open a Recent Item (Egy korabbi elem megnyitasa), a Create New CUj letrehozasa) vagy

a Create from Samples (Letrehozas mintabol), Az udvozlo kepernyo aljan az Adobe webhelyenek Getting Started (Elso lepesek), New Features (Uj szolgaltatasok) es Resources (Forrasok) oldalaira mutate hivatkozasokat talalunk.

Az uroliara megnyitott tajlok Udv6z16 ki§pernyo

'tt 01nO~.HT"o.I

~~ TV'l"ORlI.l.flm.HTM 't2 'C<Jck1C1J'.';n[j",,}t .. tl·TUTootAJ.,t..lW.HW t.!UfORiA1..l2ln.HTU: t: ruTOOLl..VI.ooJiTM

fJ .... SP~

~ liSL1i.Ertr~p~il"=') ";jess. ':';:lJ"""~ '::JXItt.

~':I s:le.rterJ:'age(tneme-) 'EJ Si.r:lI'ta-f.o.,lcCB~~) 0~

'i:_~ lurORw .. tiLl-IJ-IT1.I

rset tl~;. rllfl~1 c.u or nreemweavcr :Ffldthel.3te>tIlp<,[IO~,O'ldmn'"Il" .:.rub~Brl':J.;e

2.1. tibra

A Dreamweaver adv6z15 kepernyOje

Az Adobe webhely hivatkozasai

24 f I. resz • Bevezetes a Dreamweaver viliigaba

Amikor a Dreamweaverben eppen egyetlen weboldal sines megnyitva, az udvozlo kepernyot lathatjuk. A 2.1. abran lathato kepernyo valoszmtfleg elter az olvasoketol, mert az Open a Recent Item oszlopban a szerzo altal a kozelmultban megnyitott fajlok Iistaja szerepel, Miutan rnegnyitunk-nehany fajlt a Dreamweaverben, ez a lista gyors lehetoseget biztosit az ujboli megnyitasra.

A 2.2. abran jelolt Preferences, General, Show Welcome Screen (Beallitasok, Altalanos, Udvozlo kepernyo megjelenitese) lehetosegre kattintva megadhatjuk azt is, hogy

a Dreamweaver ne jelenitse meg az udvozlo kepernyot. A konyvben a Dreamweaver szamos mas beallitasat is vizsgaljuk majd. A modositas utan ujra keIl indftani a Dreamweavert, hogy lassuk a hatast,

Altalanos kateg6ria Udv6z16 kepernyo m egjelenltese

nocoment OP~l "~how We.oo:ne screen

OB:~Oi:J~ cccnnents 00 stertup El~;:,rro\~~ opEf1ingread-M1'I files U;rl!ite!hr-;wh~m[)Vin!:lIlIe;~ !~~~t ~ vi

:s::r.hJ55~ velcator

Editi"g (lpbol'1~~ [J Sho','! c'cllJg \c:h;:n ~ting wj~ts ElEnebledou!:r!e-Qytetilin~in;uf:

GjSwJtmro ~para~ap'..,~f'Lff ht:adin9 OAilt>~.·a1ti;:J'.<!IDnsE!CI..Jti\'1:!sp.:i~E:S

0~ .cstmnno and <2m>Mp!D~E'o'tlr <:b!LaM <I> 0u::e[ss;l.lSt~Q1'HTI..u.1:i.gs

B'Nam \\tJE'rl p\;:;dn!;ledj~bh! reyioros w1~1'1 <p> or <hl>-<I1Fj> tags .centl!rJng~ 01.kE <!::!iv> 1£;9 GUS!! "~eo.ler> ~

1--

SpE:IlnQ_rldiooar)!: ,~': .,,;c.:c ', _ .• _.'

==1

2.2.6bra

Az adv6zl6 kepernyot a Dreamuieauer-beallitasole dltalanos hategoriajaban. kapcsolhatjuk be

Macintosh-beallftasok a Dreamweaver meneben

A Dreamweaver Macintosh-valtozataban a Preferences parancs az Edit (Szerkesztes) menu helyett a menusor els6 menliieben, a Dreamweaver meneben talalhate,

Az udvozlo kepernyo a Dreamweaver egyik igen fontos reszen, az ugynevezett dokumentumablaleban jelenik meg. A dokumentumablak megkbzelit6leg ugyanugy mutatja a weboldalakat, ahogy azok a bongeszoben megjelennek majd. A dokumentumablakot jobboldalt a tablak csoportja hatarolja (a Designer munkafeluleten, a Coder rnunkafeluleten a tablak a bal oldalon helyezkednek eJ), a 2.3. abran lathato medon. Ezek a tablacsoportok azokat a parancsokat es listakat tartalrnazzak, amelyek a weblapok es

a weblapelemek modositasahoz, illetve rendezesehez sziiksegesek. A dokumentumablak, a tablacsoportok es a tobbi elem, amelyeket rovidesen tanulrnanyozunk, a Windows operacios rendszereken egyesftett felulette olvad ossze.

2. 6ra • A Dreamweaver kezelese ! 25

Dokumentumahlak (eppen egy Ores weboldal van megnyitva)

Beszuro sav Dokumentu m-eszkoztar Tablacsoport

2.3. abra

A Dreamuieauer Windows-munkafelulete a dokumentumablak mellett beepitett tdblalea: tartalmaz

Allapotsor

Tulajdonsagvizsgal6

Beszuro S8V

Dokumentumahlak

Dokurnentum-aszkoztar Tablacsoport

W nreemweaver Flit! t:-di< View msen M ·tj~":!,,~.I~!:!'J CQm'l1"~ I~~,'!.!:::,~:~"!~_~:::'~!!'_:~~_#~_~~.!!:!.L·

2.4. abra

~"o-jp ~,"Tl Q._ i.x.~ = ,)"']l~';-n-~·~, UI1.""

:"li rm~~'-if,;~-;------33 ~:yk:-~----- I;l6s f!fJZI~!£t@lEj tin~ (Do

I F~~,[ ... ~?~.fOi~!~n.~.,JP' .. , ~.I.~,~ .. ~~ ~.~,:'::::::::,4.:.g, __ ... _ .. ,_ ..

A Macintoshmunleafeluleten

a doleumentumablak felett lebeg5 tabid kat talalunle

Allapotsor

T ulajdonsagvizsgal6

26 ~; l, resz • Bevezetss a Dreamweaver viliigiiba

Amikor Macintoshon nyitjuk meg a Dreamweaver CS3-at, lathatjuk, hogy a dokumentumablakban megjelenik az udvozlo kepernyo, a 2.4. abran szemleltetett m6don, de

a Dreamweaver CS3 Macintosh-valtozataban a tablak a dokumentumablak folott lebegnek. A Window (Ablak) rnenubcl megnyitott lebeg6 tablakat a munkaasztal tetsz61eges pontjara helyezhetjuk, A Dreamweaver Mac- es Windows-v31tozata kulsejeben kiss€: elter egymastol, a szolgaltatasok azonban azonosak.

A rnenusor

Vannak, akik menuparancsokat szeretnek hasznalni, es olyanok is leteznek, akik inkabb ikonokra szeretnek kattintani (ezen sorok Iroja a billentyliparancsokat kedveli). Ez a resz a menurajongok szamara reszletezi a Dreamweaver rnenusorat alkot6 rnenuket.

A File (Fajl) es az Edit (Szerkesztes) menu (lasd a 2.5. abrat) a legtobb programban hagyominyosan megtaIalhat6. A File menu a fajlok megnyitasara (Open), bezarasara (Close), mentesere (Save), betoltesere (Import), mas formatumban torteno mentes ere (Export) es nyomtatasara (Print) szolgalo parancsokat tartalmazza. Az Edit menu

a Cut (Kivagas), Copy (Masolas) es Paste (Beillesztes), valamint a Find and Replace (Kereses es csere), illetve a Preferences (Beallitasok - Windowson) parancsot tartalrnazza. A Preferences paranccsal a Dreamweaver fehiletet es rmikodesenek szamos tenyezojet szabalyozhatjuk.

m _

i

S~ctAi CIrI+.A

~ctPa-~tT_Ilg ctr/+[

SeJectCblrl elM]

Bnd';':1dR~Ic~.,. Ctri:+f

Rnd ~eledi"n Shift-tfl

AC1d~ext f3

;:: ~ .: .,.;:;

2.S. iibra

A File es az Edit menu

! CodIO:CoU~~

, ; a Dreamtoeaoerre jellemsai parancsok mel/ell szamos mas allealmazasban gyaleori parancsokat is tartaimaz

~di[ v.'ith ExtEIn<!;[ Edi!.oi

To._g !-mrarj~, .. l".f.::i!.bCi~GShorlwt:;-.,.

A View (Nezet) menu (lasd a 2.6. abrat) be- es kikapcsolja a fejlectartalorn (Head Content) megjeleniteset, a lathatatlan elemeket, a reteg-, tabla- es kerethatarokat, a kepterkepeket es az allapotsort. Az eppen bekapcsolt elemeket pipa jeloli,

2. ora • A Dreamweaver kezelese ; 27

A View menu ezen kivul a vonalz6 (Rulers), a racs (Grid) es a segedvonalak (Guides) bekapcsolasara, bovftmenyek (Plugins) Iejatszasara es segedkep (Tracing Image) megjelenftesere szolgalo parancsokat tartalmaz. Nem ba], ha nem ertjuk pontosan, hogy mire j6k ezek a parancsok, mert a kesobbi leckekben reszletesebben foglalkozunk majd veluk,

Ctrl+Shift+O

RtJYjdth

Ctrl+Alt+5hlft-tIJ

g,d e

.., Qesjgn CooeEO<lo.,;""

~.·.'1td1Vio:w:o Ctrl+A

R~fj-etJ DeSi~Vr.E;r,' f5

!:ie~c!Coo~t

.". Uo~ptConlMt I~NeMode ylSl.clAlr:k ."",R"*",,, Code Vff:~ Options

Ctn+Shlfi:+H

2.6. iibra

TOD1Qa."S

A VIew menu a felulet elemeit be- es kikapcsol6 parancsoknak ad otthont

-

F~'~m~;7~,------~- .. ----

F::-----------

-:::::11":':;·'

v;i!"'lectlonPrope:rti-e; "cssSWe:o

Shift-tfil

T£bl,= Objects

_L._Y"_"'_o_'J_."' to ;

,.

! : ",,-; '" ,~; ,;

r ~::':~-~~"~:~-:.~ ~'¢:;",

!_~~-rU:-Q<:t Iehle

:::., '

-Era'1"leset qr~e G:lnliffi

,. i

2.7. iibra

Az Insert es a Modify menu segitsegeoel szabalyozhatjule az objektumok beszurdsdt es a jellemz5ik megodltoztatasdt

!:f1l'1L

Templ<l~ Qbj~ RerentSnfppets

! Ll_brary

~ Tg:nplatel:-

[ Tl!!l,cln-e

;Wry ~ ,

---------------

.. i

.. !

Q!.~tomize Fa\rol"j~ •..

~~~_~~:_C)~".

A2 Insert (Beszuras) menu (lasd a 2.7. abrat) nagyjabol azonos a beszuro savval (Insert Bar) - amelyet hamarosan felfedezunk -, mert a menu segftsegevel az osszes, a beszuro savon elerheto elemet hozzaadhatjuk az oldalakhoz. Ha valaki jobban szeret grafikus ikon okra kattintani, az az Insert menu szoveges parancsai helyett a beszuro savot is

28 i I. resz • Bevezetss a Dreamweaver vilagaba

hasznalhatja, A Modify (Modositas) menu (2.7. abra) az eppen kijelolt objektum tulajdonsagainak modositasat teszi lehetove. Az objektumok weboldalra torteno beszurasa utan a Modify menu paranesaival erhetjuk el a kivant megjelenest, iIletve mukodest.

A Text (Szoveg) menu (lasd a 2.8. abrat) tobbfele Iehetoseget biztosit a weboldalakon szereplo szovegek rnegjelenesenek finomhangolasara. A kevesbe j6 helyesir6k szamara a Text memiben megtaIalhat6 Check Spelling (Helyesiras-ellenorzes) paranes a leglenyegesebb. Amikor kijelolunk vaIamilyen szoveget, a Text menuben megjelenik a tulajdonsagvizsgaloban (amellyel rovidesen megismerkedunk) rendelkezesre a116 tulajdonsagok egy resze. A menu segirsegevel elvegezhetjuk a szovegek behuzasat (Paragraph format), listat hozhatunk letre (List), valamint m6dosithatjuk a benltulajdonsagokat (Font).

A Commands (Paranesok) menu (lasd a 2.8. abrat) olyan hasznos parancsokat kinal, mint a Clean Up HTML (HTML tisztitasa) es a Clean Up Word HTML (Word HTML tisztitasa).

A menu segitsegevel ezen kivul tablazatokat forrnazhatunk es rendezherunk, fenykepalbumokat hozhatunk Ietre, tovabba kepeket optimalizilhatunk a webes kozzetetelre,

~--

StlrtE.ecordng

Ctrl+Shifi+X

§jjtO:lmm~dUs;t. .. 2~t ~~ C;:lI1l<w;'lnd~ ... r:1a""};;;!io:Ext!;~rr;:, ••

~y Sour-ce FOITl1Cltting

q_-Eiill Up XH1JIIL .•.

(,'

: ~-~~~ · t, 'eb ~h"t'" Allii.iiil •••

I--~---- -----

I ~""~:::~Ofth"Web ~_~=~~~~=~-:_

2.8. libra

A szouegelemete modositdsahoz szukseges parancsoleat a Text menuben talaljule.

A Commands menu a HIML-Md leitisztitasahoz, a kepek optimalizdlasdhoz, ualamint a tdbldeatoe formaeasahoz es rendezesehez szukseges parancsokat tartalmaaza. Rendleiuul hateeony!

A Site (Webhely) menu (lasd a 2.9. abrat) a webhely egeszevel kapesolatos paranesokat tartalmazza. A Dreamweaver-webhelyek kezeleset a 3., a 22., valamint a 23. leckeben targyaljuk, A Window (Ablak) menu (Iasd a 2.9. abrat) azert fontos, mert ez nyitja meg es zarja be az osszes Dreamweaver-tablat es -vizsgalot, amelyekkel a lecke egy kesobbi reszeben foglalkozunk. A menu aljan ezen kivul megtalalhatjuk az eppen megnyitott fajlok listajat.

Tllblak megnyitasa a Window menlib61

Nem kell WI sokat foglalkozni az egyes tablak keresesevel, as azzel, hogy megjegyezzilk, melyik tablacsoportba tartoznak, mert a Window rnenoben egyszeruen kivalaszthatiuk az adott tabla nevet, A Window menu seqltseqevel gyorsan megta-

2. ora • A Dreamweaver kezelese 1 29

lalhatjuk es megnyithatjuk a Dreamweaver tablait. A mar megnyitott tablak neve mellett pipat talalunk, A Window rnenilbdl meg a beszuro savot (Insert parancs) es a tulajdonsaqvizsqalot (propertIes parancs) is kinyithatjuk, iIIetve hezarhaijuk .

. ~----

ljewSite'T' _:>tes .. ,

Ctrl-fFB

2.9. libra

A Site menu parancsainah segitsegeuel teljes weboldalakat JelugyelhetUnk. A Window menu parancsaiual a Dreamuoater tablat: es vizsgal6it leezelhetjide

Dreemweever EKma"'lQI::

BaflOige Extensions ...

Dreami'.'Ci5ver 5;..Jpport Center brol;"mwf!<l'.leJ' D~~~ Center Adobe Oi'din~EPru'Tt$ AdobeI;mng

2.10. libra

A Help menu segftsegevel hozzaferhetunk a Dreamweaver szeles korn sugorendszerehez

30 i. I. resz .. Bevezetes a Dreamweaver vilagaba

A sugorendszerrel a lecke egy kesobbi reszeben ismerkedunk meg. A 2.10. abran lathato Help (Sug6) menu HTML alapu sugofajlokra hivatkozik, ezen kivul egy az Extension Managert (Bovitmenykezelo) elindito parancsot is tartalmaz (Manage Extensions - Bovitrnenyek kezelese). A menuberi szamos Adobe-forrasra - peldaul az Adobe webhelyen talalhato Dreamweaver Support Centerre (Drearnweaver-ugyfelszolgalat) - mutate hivatkozast talalunk, Az About Dreamweaver (A Dreamweaver nevjegye) memipont olyankor hasznos, ha meg szeretnenk tudni, hogy eppen melyik Drearnweaver-valtozat fut. Erdernes figyelni az Adobe webhelyet, hatha a ceg valamikor frissitest tesz kozze

a Dreamweaverhez. Mindig celszeru gondoskodni arrol, hogy a Ieheto legfrissebb programot hasznaljuk.

A Dreamweaver Macintosh-valtozataban az iment Ieirt rnenuk mellett a 2.11. abran lathato Dreamweaver menu is megtalalhato, Ebben a menuben szerepel az About Adobe Dreamweaver, amely a Windows-valtozatban a Help menu ben kapott helyet, valamint a Preferences parancshoz is ez kinal hozzaferest. A Keyboard Shortcuts (Billentyuparanesok) paranes itt talalhato, mig a Dreamweaver Windows-valtozaLiban az Edit rnenuben.

HIde Oreamweaver:Jl:H HIde Others "\,:~H

2.11. ahra

SllowAIt

I· Quli Dreamweaver ··~QI

A Macintoshon a Dreamuieaoer menubo] erhetjuk ei a Preferences parancsot

A beszur6 sav

A beszuro Say a Windowsban kozvetlenul a rnenusor alatt talalhato, a Macintoshon pedig egy lebeg6 tabla, amely weblapelemek - peldaul kepek, tablazatok, urlapok es hiperhivatkozasok - beszurasara szolgalo gombokat tartalmaz. Az objektumokat ugy szurhatjuk be a weboldalakba, ha a megfelel6 gomb ikonjara kattintunk, vagy a lapra luizzuk azt. A beszuro savon talalhato parancsok az Insert menubol is elerhetok,

A beszuro Say kategoriai a kbvetkez6k:

.. Common (Altalanos) .. Layout (Elrendezes) .. Forms (Urlapok)

.. Data (Adatok)

It Spry

.. Text (Szoveg)

.. Favorites (Kedvencek)

2. ora • A Dreamweaver kezelese i 31

A 2.12. abran lathatjuk, hogy a beszuro sav bal oldalan egy lenyilo menu talalhato, amelynek segitsegevel valaszrhatunk a het rendelkezesre allo kategoriabol, Az egyes kategoriak rnegjelenitesehez nyissuk le a rnenut, majd valasszuk ki a kategoriat. Alapallapotban a Common kateg6ria Iatszik-de ha iirlapokkal szeretnenk dolgozni, at kell valtani a Forms kategoriara, szovegek kezelesekor pedig a Text kategoriat kell hasznalni.

2.12. abra

A beszuro sau lenyfl6 menuje a leategorialista melleti a Show as Tabs (Megjelenites lapolekent) parancsot is tartalmaeza, amelynek segitsegevellapokra osztott beszuro sauot jelenitheuinte meg

A beszuro Say nehany objekturna a hozza tartoz6 objektumcsoportokat osszefogo lenyflo menu. A Common kategoriaban taJalhat6 Images CKepek) objektum lenyilo menujeben peldaul az Image (Kep), a Placeholder Image (Helyorzo kep), a Fireworks HMTL, a Navigation Bar (Navigacios say) es egyeb kepekkel kapcsolatos parancsok [elennek meg. Ezek 31': ohjeklumok mind <I kepekhez kapcsolodnak, ezert egyetlen lenyflo menube csoportosulnak a beszuro savon.

A beszuro say alapallapotban Menu (Menu) uzernmodban jelenik meg, a lenyilo menu utols6 parancsat, a 2.12. abran lathato Show as Tabs (Megjelenites lapokkent) parancsot valasztva azonban Tabs (Lapok) uzemrnodban is megjelenithetjuk. A Show as Tabs paranes a say felso reszen lapokkent jeleniti meg a beszuro Say kategoriait, ahogy azt

a 2.13. abra mutatja. Ha ismet Menu uzernmodban szeretnenk hasznalni a beszuro savor, valasszuk a lenyil6 menu 2.13. abran szerepl6 Show as Menu (Megjelenites menukent) parancsat,

2.13. abra

Tabs tizemmodbari a beszurt) sao leategoria: lapoleeent jelenneh meg a sau tetejen

32 \: I. resz • Bevezetes a Dreamweaver vihigaba

A 2.1. tablazat felsorolja a beszuro savban elerheto osszes elemet, valamint azok leirasat. A tablazat roviden reszletezi a beszuro savon talalhato egyes objektumokat, a Data (Adatok) lapon talalhato objekturnok kivetelevel, ugyanis ezek kizarolag dinamikus weboldalak letrehozasara szolgalnsk. Tekintsuk at a tablazatot, es isrnerkedjiink meg azokkal az objektum- es tartalomtipusokkal, amelyeket a Dreamweaverben a weboldalakhoz adhatunk.

Ikon

Leiras

Ikon neve

Common (Altalanos) kateg6ria

Hyperlink (Hiperhivatkozas)

A szoveget es a hivatkozas helyet tartalmaz6 hiperhivatkozast szur be.

Email Link

(E-mail hivatkozas)

Olyan hiperhivatkozast szur be, amelyre kattintva egy ures e-mail nyilik meg, meghatarozott dmzettel.

Named Anchor (Nevesitett horgony)

Nevesitett horgonyt helyez eJ a beszuras pont jan. A nevesitett horgonyok fajlokon belul hoznak letre hiperhivatkozasokat.

Table (Tablazat)

Tablazatot hoz Ietre a besziiras helyen.

Insert Div Tag

(Div cimke beszurasa)

Egy -cd.i v» cimket, vagyis egy szoveg es grafika tarolasara szolgalo altalanos tarolocimket szur be. (A Layout kategoriaban is megtalalhato.)

Image (Kep)

Kepet helyez el a beszuras pontjan. (Images lenyilo menu)

Image Placeholder (Kephelyorzo)

Hely6rz6t szur be kepek szamara, (Images leny1l6 menu)

Rollover Image (Valtokep)

Arra ker, hogy adjuk meg az eredeti kepet, illetve azt a kepet, ami akkor jelenik meg, amikor

a felhasznalo a kep fole viszi az egeret.

(Images lenyilo menu)

Fireworks HTML

Az Adobe Fireworksben mentett kepet helyez el a beszuras pont jan. (Images lenyilo menu)

A webhelyen torteno navigalast segito gombikonkeszletet szur be. (Images lenyilo menu)

Navigation Bar (Navigacios say)

Draw Rectangle Hotspot (Teglalap alaku forr6pont rajzolasa)

Teglalapot rajzolhatunk vele egy adott teruleten, amelyet egy meghatarozott URi-re iranyitunk. (Images Ienyilo menu)

Draw Oval Hotspot (Ovalis alaku forropont rajzolasa)

Ovalist rajzolhatunk vele egy adott teruleten, amelyet egy meghatarozott URi-re irarryitunk. (Images lenyilo menu)

2. 6ra • A Oreamweaver kezelase [ 33

Ikon Ikon neve
[Q] Draw Polygon Hotspot
(Sokszog alaku
forr6pont rajzolasa)
[DJ Flash
~ Flash Button
(Flash gomb)
~ Flash Text
(Flash szoveg)
~ Flash Paper
~ Flash Video
~ Shockwave
~ Applet (Kisalkalmazas)
~ Param (Parameter) l.eiras

Sokszoget rajzolhatunk vele egy adott teruleten, amelyet egy meghatarozott URL-re iranyitunk. (Imageslenyilo menu)

Adobe Flash filmet helyez el a beszurasi pontnal. (Media lenyilo menu)

A rendelkezesre a116 kesz Adobe Flash gornbok valarnelyiket helyezi el a beszuras pant jan. (Media lenyilo menu)

Szerkeszthet6 Flash Text objektumot helyez el a beszuras pont jan, es Flash fajlt hoz letre, (Media Ienyilo menu)

Flash Paper dokumentumot szur be a webaldalba. (Media lenyilo menu)

Flash Video obiekrumot helyez el a beszurasi pontnal, es elvegzi annak bealhtasat.

(Media Ienyil6 menu) >

Shockwave filmet (vagyis a Webre elokeszitett Adobe Director filmet) helyez el a beszuras pant jan. (Media lenyilo menu)

Java kisalkalmazast helyez el a beszuras pont jan. (Media lenyil6 menu)

Olyan cimket sziir be, amelynek segitsegevel egy kisalkalmazasnak vagy egy ActiveX vezer- 16nek atauni kivant parametereket es azokhoz tartozo ertekeket adhatunk meg.

(Media lenyfl6 menu)

ActiveX

ActiveX vezerlot helyez el a beszuras pont jan. (Media lenyilo menu)

Plugin (Bovitmeny)

Olyan fajlt helyez el a beszuras pont jan, amely egy bongeszobovfrmenyt igenyel. (Media lenyfl6 menu)

Date (Datum)

A meghatarozott helyen beszurja az aktualis datumot,

Server-Side Include (Kiszolgalooldali k6d)

Kiszolgalooldali k6dat utanzo fijlt helyez el a beszuras pont jan.

Megjegyzest illeszt be a beszuras pontjan,

Comment (Megjegyzes)

Keywords (Kulcsszavak)

Egy keywords (kulcsszavak) metacirnket illeszt a fejlecbe, oIyan kulcsszavakat adva

a weboldalhoz, amelyek elosegftik, hogy a keresomotorok helyesen indexeljek azt, (Head lenyil6 menu)

34 t l. resz • Bevezetes a Oreamweaver vihigaba

Ikon

Ikon neve

Leiras

Meta

Metacirnket illeszt a weboldal fejlecebe,

Az objekturn a keres6motorokat segit6 name (nev) tipusu, vagy a felhasznalot masik URL-re iranyito, illetve a webhelyr61 tovabbi - peldaul sziil6i felugyelettel kapcsolatos - inforrnaciokat szolgaltato ht tp-equi v (http-azonos) tipusu metacimkeket kepes beszurni.

(Head lenyflo menu)

Description (Leiras)

Egy description (lefras) metacimket szur

a fejlecbe, olyan lefrast adva a weboldalakhoz, amelynek segftsegevel a keres6motorok kepesek megfelel6en indexelni azt. (Head lenyilo menu)

Refresh (Frissites)

Egy refresh (frissftes) rnetacimket illeszt

a fejlecbe. Ez a cimke azt hatarozza meg, hogy harry masodperc teljen el, miel6tt az oldal automatikusan egy masik weboldalra ugrik vagy frissiti magat, (Head lenyil6 menu)

Base (Kiindulo pont)

Egy base (kiindul6 pont) cirnket szur a fejlecbe, ami lehetove teszi, hogy rneghatarozzunk

egy kiindul6 URL-t vagy egy kiindul6 celablakot, amely befolyasolja a weblap osszes eleresi utvonalat. (Head lenyilo menu)

Link (Hivatkozas)

Egy kiils6 fajl, altalaban egy parancsfajl vagy stiluslapfajl cirnet szurja be. (Head leny116 menu)

Parancsk6dot helyez el a beszuras pont jan. (Script lenyilo menu)

Script (Parancsfajl)

No Script (Parancsfajl nelkul)

noscript (parancsfajl nelkul) cimkeket illeszt

a parancsfajlokat nem tarnogato bongeszok altal megjelenitett HTML k6d ele es mage.

(Script lenyilo menu)

Make Template (Sablon letrehozasa)

Dreamweaver-sablont keszit az aktualis weboldalbol. (Templates lenyilo menu)

Beagyazott Dreamweaver-sablont keszit

az aktualis sablonb61. (Templates lenytlo menu)

Make Nested Template (Beagyazott sablon letrehozasa)

Editable Region Szerkeszthet6 tartomanyt ad a sablonokhoz.

(Szerkeszthet6 tartornany) (Templates lenyilo menu)

Optional Region Valaszthato tartomanyt ad a sablonokhoz - ez

(Valaszthato tartomany) a tartomany tetszes szerint megjelenithet6, illetve elrejthet6. (Templates lenyilo menu)

Repeating Region (Ismetlodo tartornany)

Ismetlodo tartomanyt ad a sablonokhoz. (Templates lenyflo menu)

2. 6ra .. A Dreamweaver kezelese f 35

Ikon

Ikon neve

Leiras

Editable Optional Region Szerkeszthet6 valaszthato tartomanyt ad

(Szerkeszthet6 a sablonokhoz. (Templates lenyil6 menu)

valaszthato tartomany)

Repeating Table (Ismerlodo tablazat)

Tag Chooser (Cimkevalaszto )

Ismetlddo tablazatot ad a sablonokhoz, es meghatarozza, hogy mely cellak szerkeszthetok, (Templates lenyil6 menu)

A rendelkezesre all6 cimkek rangsorolt memijebol kivalaszthatunk egy beszurni kivant cimket.

Layout (Elrendezes) kateqoria

I d Standard mode

Stan· ar /

. (Hagyomanyos

uzernmod)

Bekapcsolja a Dreamweaver Standard uzemrnodjat, egyuttal kikapcsolja az Expanded Tables (Kibontott tablazatok) es a Layout (Elrendezes) uzemmodot,

~ Expanded Tables mode ~ (Kibontott rablas uzernmod)

Bekapcsolja a Dreamweaver Expanded Tables uzemmodjat, amely kitoltest es keretet ad

az osszes tablazathoz.

Insert Div Tag

(Div cirnke beszurasa)

Egy -cd i. v » cimket, vagyis egy szoveg es grafika tarolasara szolgalo altalanos tarolocirnket szur be. (A Common kategoriaban is megtalalhato.)

Draw AP Div

(AP Div keszitese)

AP Div tarolot hoz letre a weboldalakon.

Spry Menu Bar (Spry memisor)

Spry Tabbed Panels (Spry lapokra osztott tablakkal)

A Spry keretrendszer segitsegevel menusort

110z letre, (A Spry kategoriaban is megta!aH iato.)

A Spry keretrendszer segitsegevel lapokra osztott tablacsoportokat hoz letre.

(A Spry kategoriaban is megtalalhato.)

Spry Accordion (Spry harmonika)

A Spry keretrendszer segitsegevel osszecsukhato tablacsoportokar hoz letre.

(A Spry kategoriaban is rnegtalalhato.)

Spry Collapsible Panel (Spry osszecsukhato tabla)

A Spry keretrendszer segitsegevel egyetlen bsszecsukhat6 tablat hoz Ietre,

(A Spry kategoriaban is megtalalhato.)

Table (Tablazat)

Tablazatot hoz Ietre a beszuras helyen,

(A Common kategoriaban is megtalalhato.)

Insert Row Above (Sor beszurasa felulre)

Uj sort szur be az eppen kijelolt tablazatsor fole,

Insert Row Below (Sor beszurasa alulra)

Uj sort szur be az eppen kijelolt tablazatsor ala.

Insert Column to the Left

(Oszlop beszurasa balra)

Uj sort szur be az eppen kijelolt tablazatoszlcp bal oldalan.

36 f r. resz • Bevezetes a Dreamweaver vilagaba

Ikon

Ikon neve Leiras

Insert Column Ui sort szur be az eppen kijelolt tablazatoszlop

to the Right jobb oldalan,

(Oszlop beszurasa jobbra)

IFrame (Belso keret) Egy masik HTML dokumentumot tartalmaz6 belso keretet szur be.

Left Frame

(Bal oldali keret)

Keretet hoz letre az aktualis keret bal oldalan, (Frames lenyilo menu)

Right Frame

(Iobb oldali keret)

Keretet hoz Ietre az aktualis keret jobb oldalan, (Frames lenyilo menu)

Top Frame (Pelso keret)

Keretet hoz letre az aktualis keret folott.

(Frames lenyflo menu)

Bottom Frame Keretet hoz letre az aktualis keret alatt.

(Frames (Als6 keret) lenyil6 menu)

Bottom and Nested Keretet hoz Ietre az aktualis keret bal oldalan,

Left Frame (Als6 es majd keretet szur be ala. (Frames lenyIl6 menu)

beagyazott bal oldali keret)

Bottom and Nested Keretet hoz letre az aktualis keret jobb oldalan,

Right Frame (Als6 es majd keretet szur be ala. (Frames lenyilo menu)

beagyazott jobb oldali keret)

Left and Nested Bottom Keretet hoz letre az aktualis keret alatt, majd

Frame (Bal oldali es keretet szur be a bal oldalan,

beagyazott als6 keret)

(Frames lenyil6 menu)

Right and Nested Bottom Frame Gobb oldali es menu)

Keretet hoz letre az aktualis keret alatt, maid keretet szur be a jobb oldalan,

(Frames lenyilo beagyazott also keret)

Top and Bottom Frame (Als6 es felso keret)

Keretet hoz Ietre az aktualis keret alatt, rnajd keretet szur be fole.

Left and Nested Top Keretet hoz letre az aktualis keret folott,

Frame (Bal oldali es majd keretet szur be a bal oldalan.

beagyazott felso keret) (Frames lenyilo menu)

Right and Nested Top Keretet hoz letre az aktualis keret folott, maid

Frame (jobb oldali es keretet szur be a jobb oldalan,

beagyazott felso keret) (Frames lenyil6 menu)

Top and Nested Left Keretet hoz letre az aktualis keret bal oldalan,

Frame (Fels6 es majd keretet szur be fole. (Frames lenyilo menu)

beagyazott bal oldali keret)

Top and Nested Right Keretet hoz letre az aktualis keret jobb oldalan,

Frame (Felso es maid keretet szur be fole. (Frames lenyilo menii)

beagyazon jobb oldali keret)

Draw Layout Table Tablazatot hoz letre a Layout nezetben.

(Elrendezesi tablazat rajzolasa)

Draw Layout Cell Tablazatcellat hoz letre a Layout nezetben,

(Elrendezesi celia rajzolasa)

2. ora • A Dreamweaver kezelese 1, 37

Ikon

Ikon neve

Leiras

Urlapot helyez el a beszuras pont jan.

Forms (Urlapok] kateg6ria

Form (Urlap)

Text Field (Szovegmezo)

Szovegrnezot szur be.

Hidden Field (Rejtett mez6)

Rejtett mez6t szur be.

Textarea (Tobbsoros sz6vegmez6)

Textarea elemet, vagyis tobbsoros szovegmezot szur be.

Check Box (Ielolonegyzet)

jelolonegyzetet szur be.

Radio Button (Valasztogomb)

Valasztogombot szrir be.

Radio Group (Valasztocsoport)

bsszefugg6 valasztogornbokbol a116 csoportot szur be.

List/Menu (Lista/Menu)

Listat vagy lenyil6 rnenut szur be.

]umpMenu (Ugcis menu)

Ugras menut hoz letre, amelynek segitsegevel a felhasznalok a rnenuben kivalasztott webhelyre lephetnek,

Image Field (Kepmezo)

. Keprnezot szur be, amelynek segitsegevel a kep gombkent viselkedik.

File Field (Fajlmezo)

Fajlmezot szur be, amelynek segftsegevel a Ielhasznalok fajlokat tolthetnek fel.

Button (Gomb)

Gombot illeszt be.

Label (Cimke)

Cirnket rendel az urlapelernekhez, amelynek segitsegevel a lataskorlatozott felhasznalok tovabbi inforrnaciokat kaphatnak a cimkebe agyazott drlapelemekr6L

Fieldset (Mezocsoport)

Olyan 6sszefugg6 mez6kb61 a116 csoportot

hoz letre, amelynek segitsegevel az urlap lataskorIatozottak szamara keszult bongeszokbol is elerhet6. A mez6csoport egy drlapelemcsoportot tartalmaz, a Iatoknak pedig a csoportot hatarolo keretkent jelenik meg, a tetejen a mez6csoport cimevel,

Spry Validation

Text Field (Spry ellen6rz6 szovegrnezo)

A Spry keretrendszert alkalmazo ellen6rz6 logikat tartalmaz6 szovegrnezot hoz Ietre. (A Spry kategoriaban is megtalalhato.)

Spry Validation Text Area

(Spry tobbsoros ellen6rz6 szovegmezo)

A Spry keretrendszert alkalmaz6 ellen6rz6 Iogikat tartalmaz6 tobbsoros szovegmezot

hoz letre, CA Spry kategoriaban is rnegtalalhato.)

38 ! L resz • Bevezetes a Dreamweaver vilagaba

Ikon

Ikon neve

Ieiras

Spry Validation Checkbox (Spry ellenorzo jelolonegyzet)

A Spry keretrendszert alkalmaz6 ellenorzo logikat tartalmaz6 jelolonegyzetet hoz letre. .. (A Spry kategoriaban is megtalalhato.)

Spry Validation Select (Spry ellen6rz6 kijeloles)

A Spry keretrendszert alkalmaz6 ellen6rz6 logikat tartalmaz6 kijelbl6 objekturnot hoz letre ([ista vagy menu a Dreamweaverben).

(A Spry kateg6riiban is rnegtalalhato.)

Spry kateg6ria

XML adatforrast hataroz meg.

Spry XML Data Sheet (Spry XML adatlap)

Spry Region (Spry tartomany)

A Spry keretrendszeren keresztul adatokat fogad6 tarolot hataroz meg.

Spry Repeat (Spry ismetlodes)

A Spry keretrendszeren keresztul isrnetlodo adatokat fogad6 tarolot hataroz meg.

Spry Repeat List (Spry ismetlodo lista)

A Spry keretrendszeren keresztul isrnetlodo adatokat fogad6listit hataroz meg.

Spry Table (Spry tablazat)

Spry Validation Text Field (Spry ellen6rz6 sz6vegmez6)

A Spry keretrendszeren keresztul adatokat fogad6 tablazatot hataroz meg.

A Spry keretrendszert alkalmaz6 ellen6rz6 logikat tartalmazo szovegrnezot hoz letre, (A Forms kategoriaban is rnegtalalhato.)

Spry Validation Text Area (Spry tobbsoros ellen6rz6 szovegmezo)

A Spry keretrendszert alkalmaz6 ellen6rz6 logikat tartalmaz6 tobbsoros szovegmezot

hoz letre, (A Forms kategoriaban is megtaialhato.)

Spry Validation Checkbox (Spry ellen6rz6 jelolonegyzet)

A Spry keretrendszert alkalmaz6 ellen6rz6 logikat tartalmaz6 jelolonegyzetet hoz letre. (A Forms kategoriaban is megtalalhato.)

Spry Validation Select (Spry ellen6rz6 kijeloles)

A Spry keretrendszert alkalmaz6 ellen6rz6 logikat tartalmaz6 kijelolo objektumot hoz letre (!ista vagy menu a Dreamweaverben).

(A Forms kategoriaban is megtalalhato.)

Spry Menu Bar (Spry menusor)

A Spry keretrendszer segitsegevel menusort

hoz letre, (A Layout kategoriaban is megtalalhato.)

Spry Tabbed Panels (Spry lapokra osztott tablak)

A Spry keretrendszer segitsegevel lapokra osztott tablacsopcrtokat hoz Ietre.

(A Layout kategoriaban is megtalalhato.)

Spry Accordion (Spry harrnonika)

A Spry keretrendszer segitsegevel osszecsukhato tablacsoportokat hoz Ietre.

(A Layout kategoriaban is megtalalhato.)

Spry Collapsible Panel (Spry osszecsukhato tabla)

A Spry keretrendszer segitsegevel egyetlen osszecsukhato tablat hoz letre,

(A Layout kategoriaban is megtalalhato.)

2. ora • A Dreamweaver k.ezelese ! 39

Ikon

Ikon neve

teiras

Text ~Sziiveg) katsqeria

Bold (Felkover)

0 Italic (D6lt)
[[] Strong (Eros)
~ Emphasis (Kiemeles)
[!] Paragraph (Bekezdes)
[Ej] Block Quote
(Idezetblokk)
~ Preformatted Text
(Eldre formazott szoveg)
~ Heading 1
(Elsoszinni cimsor)
[@ Heading 2
(Masodszintu cirnsor)
~ Heading 3
(Harmadszinni cimsor)
@J Unordered list
(Rendezetlen felsorolas)
~ Ordered list
(Rendezett felsorolas)
[EJ List Item (Listaelern)
@D Definition List
(Meghatarozaslista)
@!J Definition Term
(Meghatiroz6 kifejezes)
~ Definition Description
(Meghatarozasleiras) A b cimke alkalmazasaval felkoverre teszi a kijelolt szoveget.A HTML legut6bbi valtozaraiban mar nem szerepel ez a cirnke. A felkover bern jovahagyott cimkeje a strong (eros) cimke,

Az i cimke alkalmazasaval doltte teszi a kijelolt szoveget. A HTML legut6bbi valtozataiban mar nem szerepel ez a cimke, A dolt betu jovahagyott cimkeje az emphasis (kiemeles) cimke.

A jovahagyott strong cimke alkalrnazasaval felkoverre teszi a kijelolt szoveget,

A jovahagyott emphasis cimke alkalmazasaval doltte teszi a kijelolt szoveget,

Bekezdesbe foglalja a kijelolt szoveget.

A blockquote cimke alkalmazasaval jobbrol es balrol is behuzott idezetblokka alakitja a kijelolt szoveget.

A pre cimke alkalrnazasaval elore formazotta teszi a szoveget (rogzitett szelessegu betutipussal jeleniti meg, es lehetoseget biztosit szokozok hozzaadasara),

A hl cimke alkalmazasaval l-es (a legnagyobb) mereni cirnsorra alakitja a kijelolt szoveget.

A h2 cirnke alkalmazasaval 2-es merenf cimsorra alakitja a kijelolt szoveget.

A h3 cimke alkalmazasaval 3-as mereni cimsorra alakitja a kijelolt szoveget.

A kijelolt szoveget rendezetlen (pontozott) listava alakftja.

A kijelolt szoveget rendezett (szarnozott) felsorolassa alakitja.

Ali cimke segftsegevel listaelemme, vagyis

egy rendezett vagy rendezetlen felsorolas onallo elerneve alakitja a kijelolt szoveget.

Meghatarozaslistaz hoz letre, amely meghatarozo kifejezesekbol es meghatarozasleirasokbol all.

Meghatiroz6 kifejezest hoz Ietre egy meghatarozaslistan belul,

Meghatiroz:isleir:ist hoz letre egy rneghatarozaslistan belul,

40 i I. resz • Bevezetes a Dreamweaver vih:igaba

Ikon Ikon neve
Icbbr.1 Abbreviation (Rovidites)
luu~cl Acronym (Benlszo)
~ Line Break (Sortores)
~ Non-Breaking Space
(Nem torheto szokoz)
0 Left Quote
(Nyit6 idezojel)
G Right Quote
(Zaro idezojel)
EJ Em-Dash (Gondolatjel)
[£J Pound (Font)
[ID Euro (Eur6)
~ Yen0en)
~ Copyright
(Szerzoi jogok)
~ Registered Trademark
(Bejegyzett vedjegy)
ITMI Trademark (Vedjegy)
m Other Characters
(Egyeb karakterek) Leiras

abbr cirnkek koze helyezi a szoveget, es teljes szoveges meghatarozast ad a roviditesekhez. Ez elosegiti, hogy a keres6motorok helyesen indexeljek a weboldalr.

acronym cirnkek koze helyezi a szoveget, es teljes szoveges meghatarozast ad a benfszavakhoz,

Ez el6seglti, hogy a keres6motorok helyesen indexeljek a weboldalt.

br cimket, vagyis sortorest helyez el a beszuras pont jan. (Characters lenyil6 menu)

Szokozt Ietrehozo kulonleges karaktert (&nbsp; ) szur be. A nem torheto szokoz ezen kivul megakadalyozza a ket sz6 kozotti sortorest, (Characters Ienyilo menu)

A nyit6 idezojel kulonleges karakteret szurja be. (Characters Ienyilo menu)

A zaro idezojel kulonleges karakteret szurja be. (Characters lenyilo menu)

A gondolatjel kulonleges karakteret szurja be. (Characters lenyilo menu)

A font penznemjel kulonleges karakteret szurja be. (Characters lenyilo menu)

Az eur6 penznemjel kulonleges karakteret szurja be. (Characters Ienyilo menu)

A jen penznernjel kulonleges karakteret szurja be. (Characters leny1l6 menu)

A szerz6i jogok vedelrnet jelz6 kulonleges karaktert szurja be. (Characters lenyilo menu)

A bejegyzett vedjegy szimbolum kulonleges karakteret szurja be. (Characters lenyilo menu)

A vedjegy szimb6lum kulonleges karakteret sziirja be. (Characters lenyilo menu)

Megnyit egy rnenut, amely szamos tovabbi kulonleges karaktert tartalmaz. (Characters lenyilo menu)

A Favorites (Kedvencek) kateg6ria lehetove teszi, hogy egy kulon kategoriahoz adjuk a gyakran hasznalt objektumokat. Ezt a szolgaitatast a 24. leckeben vizsgaljuk majd reszletesebben, amikor megtanuljuk, hogyan lehet a sajat munkamodszerunkhoz igazitani a Dreamweavert. A konyv vege fele mar pontosabban fogjuk tudni, hogy milyen tipusu objektumokat szeretnenk a Favorites kategoriaba helyezni, hogy gyorsabban dolgozhassunk a Dreamweaverben. Ezek a szemelyes kedvencek, a leggyakrabban hasznalt objektumok egy hasznos beszurosav-kategoriaba gyCijtve.

2. 6ra • A Dreamweaver kezelese ; 41

A dokumentumablak

A dokumentumablak alapesetben felnagyitott meretben [elenik meg, es a cime, ilIetve a fajlnev a kepernyo Iegtetejen lithat6. A 4. Ieckeben kiprobaljuk majd, mikent lehet menteni egy fijlt, valamint fijlnevet es cimet rendelni hozza, A dokumentumablak

a Dreamweaver feluletenek az a resze, amelyet a leggyakrabban hasznalunk majd.

A Document Cdokumentum) eszkoztar a dokumentumablak teteien talalhato,

A Document eszkoztar

A 2.14. abran lithat6 Document eszkozrar segitsegevel gyorsan hozzaferhetunk a fontos parancsokhoz. A Document eszkoztar bal oldalan lithat6 hirom gombbal a Code (K6d) nezet, a Design (Tervezes) nezet es a Code, ilIetve a Design nezetet egyszerre megjelenft6 Split (Osztott) nezet kozott vilthatunk. A szerz6 hozzavetoleg 800/0-ban a Design nezetet hasznalja, a rnaradek 20%-nyi id6ben pedig a Code es a Split nezetet, felvaltva, A Design es a Code nezetet egyszerre mutat6 Split nezet igen hasznos a H'l'Ml-tanulashoz, mert a weboldal letrehozasa kozben Iathatjuk a Dreamweaver altal hozzaadott cimkeket.

File Management menu

Title: : Untitled Documertl

V<llt<ls osztott nezetre A dokurnentum cf me

Preview/Debug in Browser menU menU

Validate Markup menu

2.14. iibra

A Document eszeoztdr olyan parancsolsat tartalmaz, amelyelset gyaeran alkalmazunk a ueblapoleon a Drearnuieaoerben t611eno szereesztes saran

A Document eszkoztarban szerepl6 Title (Cim) szovegrnezoben kell megadni a weboldalak cirnet (az alapertelmezett cim, az Untitled Document- Nevtelen dokumentumnem tul erdekes). Ez jelenik meg a litogat6 bongeszojeben a weboldal megtekintesekor, A bongeszo Favorites CKedvencek) vagy Bookmarks (Konyvjelzok) listaja ezt a cimet menti a weboldal nevekent, ezert ertelmesnek kelllennie. A weboldalak cime azert is fontos, melt szamos keres6motorban, peldaul a Google-ben is befolyasolja

az oldalak rangsorat.

42 i I. resz • Bsvezetes a Dreamweaver vihigaba

A Document eszkoztarban hat lenyilo menu talalhato.

• File Management (Fdjlhezeles): A fajlok webkiszolgalora kuldesere es onnan Ietoltesere s201gi16, illetve ezekhez hasonl6 parancsokat jelenit meg. Ezeket a 22. es a 23. leckeben vizsgaljuk, a webhelyek feltoltesekor es kezelesekor,

• Preview/Debug in the Browser (Elonexet/hibateereses a bongeszoben):

Gyors hozzaferest biztosit azokhoz a bongeszokhoz, amelyeket a weboldalak elonezetehez hasznalunk,

• Vi'ew Options (Nezetbeallitdsole): Ez a menu att61 fuggoen valtozik, hogy a Design vagy a Code nezetet valasztottuk. A Design nezetben a menu tobbek kozott

a fejlec tartalmat vagy a vonalzok megjeleniteset szolgalo parancsokat mutatja. A Code nezetben a menu a k6d rnegjelenitesenek modjat befolyasolo parancsokat tartalmaz ~ ilyen a Word Wrap (Tordeles) es a Line Numbers (Sorszarnok).

• Visual Aids (Vi'zudlis segedele): Csak Design uzernmodban aktiv, A rnenuben bees kikapcsolhatjuk a View, Visual Aids (Nezet, Vizualis segedek) meniiben is elerheto vizualis segedeket.

• Validate Markup (Ielolonyel» ellenorzese). A k6d helyesseget ellen6rzi.

• Check Browser Compatibility (Bongesxo-megfeleloseg ellenorzese). Ezzel ellen- 6rizhetjuk, hogy a weboldal megfeleJ6en mtfkodik-e a kulonbozo bongeszokben.

Hovel tunt a Document eszkoztclr?

Ha a Document eszkoztar nem lathato, valasszok a View, Toolbars, Document (Nezst. Eszkoztarak, Document) meniipontot.

A Document eszkoztarban a Refresh Design View (Tervezo nezet frissftese) gornbot is megtalalhatjuk. Ez a gomb a k6d szerkesztesekor (a Code vagy a Split nezetben) frissiti a Design nezetet, IGY azonnal lithatjuk a k6dban vegzett modositasokat. Ez a gomb csak akkor rmlkodik, amikor Code vagy Split nezetben hasznaljuk a dokumentumablakot.

Az allapotsor

A Dreamweaver dokumentumablakinak aljan egy allapotsor talalhato, ameIya 2.15. abran lathato cimkevalasztot, a Window Size (Ablakmeret) lenyfl6 meruit, a nagyit6 es kijelolo eszkozoket, valamint a Ietoltesi statisztikakat tartalrnazza, Ezek a hasznos eszkozok csupan kis reszet kepezik mindazoknak az ugyes fogasoknak, amelyekkel a Dreamweaver CS3 hatekonnya es szorakoztatova teszi a webtervezest.

A dokumentumablak bal als6 sarkiban talalhato cimkevalaszto segitsegevel konnyen hozzaferheuink a kepernyon szereplo objektumokhoz tartoz6 HI'Ml-cfmkekhez.

Ha peldaul az egerrnutato eppen egy tablazatcellaban all, a cimkevalasztoval az objektumot szabalyozo barmely H'l'Ml-cimket kijelolhetjuk, Az eppen kijelolt cimke felkover bettltipussal latszik a cimkevalaszton. A kijelolt cimke bal oldalan allo cimkek kozrefogjak a kijelolt cimket,

2. 6ra • A Dreamweaver kezelese ~ 43

Cfmkeva!aszt6

Nagyft6 eszkozok

Kez aszkdz Kez Letoltesi statisztikak

Eppen kij~i6lt clrnke

Kijelol6 eszk6z

Window Size menu

2.15. abra

Az dllapotsor olyan eszleozoleet tartalmaz; amelyele segitsegesel a weboldalakkal kapcsolatos informacioleat jelenithetunle meg

A cfmkevalaszt6 hasznos tars

A cirnkevalaszto kes6bb valik fontossa, amikor a 18. leckehen elkezdunk ugynevezett viselksdeseket hasznalni, A viselkedsseket rneqhatarozott clmkskre alkalmazzuk, amelyeket iddnkent nshez kijelolni, kiilcnosen a <body> (torzs) clrnket, ameJy

a teljes weboldal tartalrnat mag aha foglalja. A cfrnkavalaszto segftsegevel a <body> clmkere kattintva kiinnyen kijeliilhetjUk egy weboldal teljes torzset,

Welcome to Rick Steves' Europe,

Fo,30 veers Rick Steves has taught smart European ~ Trsr"p.1 Fp.<rtivl'Il .. ill

~~~~~p~~~~~1: d~~I~~~t~~ foU~x~b~~"t~:. \~~ri~~pa~d ~~~'~Il~~e~ oesses ~II ~!!y

the information here help5 tum ynurtralo'e! dreams in-to Or! fE!bc 3 end Ner, 10.

smooth, ertordable realrtyc Tr.£tvd News

................................................ r .••.....•.....•.....•.........•.........•....•...... : whers reewm Etlropli:l

~~~~~k Steve!;' 2007 ~:'Il~ ~~~~ RI~k's teure e

creat culdes, smau Or-OLJDS, E.urtl;Je'~ best cestinauons. wt;;:re's RJck H:sc:alend;ard1lL:clr.c

no qrumps,

~ lI:i!1t_el.S_lp_r_e G:-;;;:~t.d';"'t:;.:;:-:!::;;;:;;;;, OV[:-:;, !;Iuidebool-;s, accessories.

II>- Rick.il_!!___&I_~Jit_IY Airtimil.S,5[ripts,tr.i3\'el deters, viden dips for 70 eeisedee

~ Rick 011 Rjld~u

Travel wJth sick Steves on public radio

Megjelenithet6 mBretek

2.16. C§bra

A Window Size menu a kepemyo aimeretezeseuel probcdja megbecsulni, hogy az oldal hogyan mutat kUl6nbozo hepernyofelbonrasot: allealmaeasahor

4411. resz • Bevezetes a Dreamweaver vilagaba

Az allapotsor jobb oldalan talalhato harorn ikon az egermutato megjeleneset es mukodeset szabalyozza a dokumentumablakban. Alapertelrnezesben a kijelolo (Select) eszkoz (nyil mutat6) aktiv. Ezen kivul a kez (Hand) eszkozt is valaszthatjuk, amely lehet6ve teszi, hogy a mutat6t a dokumentumablakban huzva vegiggorditsuk a weboldalt.

A rtagyft6 eszkoz nagyitolencseve valtoztatja a mutat6t, amelynek segitsegevel kinagyithatjuk a weboldalt. A nagyit6 eszkoz mellett talalhato Set Magnification (Nagyitas beallitasa) menuben 6% es 6400% kozotti pontos nagyitasi erteket valaszthatunk.

A Window Size lenyilo menu segitsegevel a dokumentumablakot atrneretezve megjelenithetjuk a kivant felbontast. Mindig erdemes meggy6z6dni arrol, hogy az oldal alacsony (800x600) es magas kepernyofelbontas mellett egyarant j61 mutat. A 2.16. abran l:ithat6 Window Size lenyilo menu segftsegevel gyorsan atrneretezhetjuk a dokumentumabIakot, hogy megnezzuk, megkozelftoleg mennyi kepernyoterulet all rendelkezesre egy meghatarozott felbontast alkalmazva. A Window Size lenyilo menu csak olyankor mukodik, ha a dokumentumablakot nem nagyitjuk teljes mereture.

Figyeljuk meg a Window Size rnenuben valaszthato mereteket:

• A jobb oldalon (z:ir6jelben) felsorolt kiteriedesek a kepernyofelbontasoknak felelnek meg.

• A bal oldalon felsorolt szamok a bongeszoablak becsult meretet jelentik, amelyek kisebbek a kepernyofelbontasoknal, hiszen a bongeszo felulete (peldaul

a gombok es rnenuk) is helyet foglal. Amennyiben a latogato monitorja mondjuk 640x480 felbontasra van allitva, a hasznos terulet csupan 536x196 keppont.

Egyedi ablekmeretek meghatarozasa

A Window Size menu utolso lehetdseqet, az Edit Sizes (Meretek szerkesztese) parancsot valasztva sajat, egyedi beallltasokat hozhatunk letts a Window Size rnenuben, Ez a parancs a Dreamweaver Preferences parbeszedablakanak Status Bar

(Allapotsor) kataqoriaiaba vezet, ahol saiat ablskmeretet adhatunk meg. Megtehetjtik peldaul, hogy olyan weboldalt keszitunk, am ely vezetek nelktili kapcsolattal rendelkez6 telefonon olvashat6. A szerz6 Blackberry Pearl mobiltelefonja 240 x 260 keppontot tud rneqielenlteni, es ennek megfelel6en egyedi rneretet hozhat latre, hogy a telefanhoz keszitsen webaldalt.

Mivel a webes felhasznalasra torteno fejleszteskor fontos kerdes lehet a savszelesseg, j6, ha ismerjilk az oldalak hozzavetoleges fajlmeretet es letoltesi idejet, Az allapotsoron megjelen6 becsult letoltesi id6 a Preferences parbeszedablak Status Bar kategoriajaban meghatarozott modernbeallitasokon aIapul. Az alapertelrnezett modembeallitas 128 Kbps - ezt erdernes modositani a weboldal feltetelezett latogatoinal elerheto savszelessegre. CAz Egyesult Allamokban peldaul a legtobben mar legal:ibb 56 Kbps, vagy annal nagyobb savszelesseggel hasznaljak az Internetet. A legtobb DSL, ilIetve kabelkapcsolat sebessege magasabb 128 Kbps-nal.) A Dreamweaver a fajlrneret es a letoltesi id6 szamitasakor figyelembe veszi a kepeket es a weboldaloo szerep16 egyeb elemeket is.

2. ora • A Dreamweaver kezslasa ; 45

Tablak as vizsgal6k

A Dreamweaver tablait es vizsgaloit hasznalvaallithatjuk be az objektumok tulajdonsagait es adhatunk szolgaltatasokat a weboldalakhoz. A Dreamweaver parancsainak nagy resze tobb helyen is elerheto, altalaban menuparancsokkent, a besziiro sav parancsaikent, a Document eszkoztar parancsaikent vagy tablaparancsokkent. A Dreamweaver tablai a Windowsban Iapokbol allo tablacsoportokka egyesulnek a dokumentumablak mellett, a Macintosbon pedig lebegnek.

Tablak be- as k.ikapcsolasa

Az F4 billentyu lenvomasaval a Hide Panels/Show Panels (Iablak elrejtese/meqielenltese) parancsat alkalmazzuk, ami remek m6dszer arra, hagy ideiglenesen nagyabb kepernvcteriilethez jussunk, es fgya teljes aldalt lathassuk, Amikar

a tabtak lathatoak, az F4 elrejti azakat, ha pedig rejtettek, megjelenfti oket. Ezzel a valt6gambbal gyarsan elrejthetji.ik es megjelenfthetjUk a Dreamweaver tablait.

A Window rnenubol az osszes tablat megnyithatjuk, raadasul a Dreamweaver alapallapotban megjeleniti az osszes fontos tablat, valamint a tulajdonsagvizsgalot. Amennyiben egy tabla vagy vizsgil6 nyitva ill, a Window menu ben pipa Iithat6 a hozza tartoz6 paranes mellett. A tablak vagy vizsgalok bezarasahoz tivolitsuk el a pipat a Window memibol. Ilyenkor a tabla valojaban nem runik el, hanern csak a tiblaesoport kibont6 nyila forduI el, es a tablacsoport osszecsukodik, igy nem lathatjuk tobbe. A Window menuben felsoroIt, tablakat megnyit6 menuparancsnevek kisse elterhetnek az altaluk megjelenitett tablak neveit61. A tulajdonsagvizsgalot (Property inspector) peldaul

a Properties (Tulaidonsagok) paraneesal nyitjuk meg.

B n.~V.:;headff

.l:DgO

#strJpe

;::un1ity =ufilitya =utility e.boves form

:;search

> ••••• _ •• " ••• ,--, •• _, •• _,_ •• ,_,_ ••• , •••••• _,_ •• ",.

2.17. libra

A kibont6 nyU segitsege1Jel

a tablacsoportohat kibonthatjuk 1Jagy osszecsukhatjuk

46 ! I. resz • Bevezetes a Dreamweaver vilagaba

Tablak as tablacsoportok

A tablacsoportokat es a vizsgalokat a tablacim mellett balra talalhato kibont6 nyilra (lasd a 2.17. atrar) kattintva bonthatjuk ki, ilIetve csukhatjuk ossze. Kozvetlenul

a kibont6 gomb bal oldalan egy foganryu lathato. A tablacsoportok es a vizsgalok rogziteset ugy oldhatjuk fel, hogy erre a fogantyura kattintva a tobbi tablacsoport vagy a dokumentumablak ali, illetve fole huzzuk azokat. A rogzites utan a tablacsoport korul korvonal jelenik meg. Mivel a Dreamweaver Macintosh-valtozataban a tablak Iebegnek, barrnikor barhova helyezhetjuk azokat.

A tablabeallfttisok rnentesa

EI6fordulhat, hogy klilonboz6 munkakhoz kGI5nboz6 tablabeallltasokat tartunk megfelel6nek. A Dreamweaver lehet6ve teszi, hogy a Window, Workspace Layout, Save Current (Ablak, MunkafelUiet elrendezese, Jelenlegi mentese] parancs alkalma-

zasaval, majd a beallitasnak nevet adva kUliin beaJlitasokat rnentsunk, amelyeket kesebb ujrahasznosfthatunk. Egy tobbszinni stfluslapokat (Cascading Style Sheets - CSS) igenyl6 webhslvnel peldaul CSS webhe/y neven menthetUnk olyan beallltast. amelyben a CSS Styles (CSS stllusok), az AP Elements (AP elemek) es a Files (Fajlok) tabla lathato.

·~,~;~~~~,~:T~~~~~~~i::···!~

W~~~" ~~,. I" ~,,,P"'"!

[~:r,;~ R"k"s :~~rs!l

l:_~r~~"'s h~: d~~tj,,~tj~~~

~~~·:~;~,..t ~ubli~

~~~~~,~"'-"-".

t,r" 1-.",,~lC1D~"""

'" Ir.n.~.~l_:;t.!1n1

Gre-at d",<l~5 CoIll;.-iI\l5, ovns, \lL3ld",bO"I{~, accessoncs

Osszscsuk6 gomb

rr .. "rt F",~1;' .... to .. ;"

~:drn.QIl~S

~t ~:~~~~~~~':.~ ~II &~~"

~ RF~II<;)il.ri.tI.=IJt.:..J\I

~irtim.,s, sm;.t..;;,b"sl,.,1 d=:ails, ~id~(]. tlip.~ tor 10 eolcedes.

t-~

'rrever With Rd:. sieves on "Li[)~i~ rano.

~:t ~~~~~i;~~~~n:n~ 'rnur

C~,aID~_ ,I<mthl~ ~·n~W5 lrem ""ok, rn~.

2.18. abra

Az osszecsuleo gombok osszecsuejah, illetue kibontjak a tablacsoportole, illetve

a tulajdonsaguizsgalo teruletet, hogy tobb hely jusson

a doeumentumablalenale

Osszecsuk6 gomb

A windowsos feluleten a tablacsoportokat a dokumentumablakt61 elvalaszto savot huzva egyszerre modosithatjuk az osszes tablacsoport szelesseget. Az egermutato a megfelel6 helyen kett6s nyilla alakul. Az egyes tablacsoportok magassaganak atmeretezese-

2. 6ra • A Dreamweaver kezelese ! 47

hez vigyuk a mutat6t a tabla szelehez, amig kett6s nyilla nem valtozik, majd huzzuk a tabla szeleit a kivant magassagra, A Windows-felhasznal6k a 2.18. abran Iathato,

a dokumentumablakot es a tablacsoportokat, illetve a tulajdonsagvizsgalot elvalaszto savon szerepl6 osszecsuko (Collapse) gombsegitsegevel szabalyozhatjak a ket terulet osszecsukasat es kibontasat, A Mac-felhasznalok a csoport keretet a megfelel6 szelessegure, illetve magassagura huzva modosithatjak a lebeg6 tablacsoportok meretet.

Tablakezeles halad6knak

A tablacsoportok bal felse sarkaban talalhat6 Panel (Tabla) lenyfl6 menu Close Panel Group (Tablacsoport bezarasal parancsat valasztva teljesen bszarhatjuk az egyes tablacsoportokat, hogy egyaltalan ne legyenek lathatok a keperny6n.

Ugyanebben a rnenuben telalhato a Group With (Atcsoportositas) parancs, amellyel az adott tablat egy rnasik tablacsoportba eplthetjllk.

A tulajdonsagvizsgal6

A tulajdonsagvizsgalo (Property inspector) rnegjeleniti az eppen kijelolt objektum osszes rulajdonsagat, es a kornyezethez alkalmazkodva valtozo kameleonkent viselkedik:

a dokumentumablakban kijelolt objektumnak megfelel6en rnaskepp nez ki es a kapcso- 16d6 tulajdonsagokat jeleniti meg. Szovegek kijelolesekor peldaul a tulajdonsagvizsgalo szovegtulajdonsagokat tartalmaz, ahogy azt a 2.19. abra mutatja, mig a 2.20. abran egy kep van kijelolve, igy a tulajdonsagvizsgalo keptulajdonsagokat jelenft meg.

Kijelalt szdveq

2.19. abra

Ha szoueget jeldlunk ki, a tulajdonsdgvizsgdl6 szooegtulajdonsdgokat jelenit meg

Szbvaqtulajdonsaqok

Kibont6 ikon

48 ~ I. resz • Bevezetes a Dreamweaver vihigaba

A tulajdonsigvizsg3J6t a kibont6 (Expand) ikon segitsegevel bonthatjuk ki, es 1GY

az osszes tulajdonsaghoz hozzaferhetunk, Ehhez a tulaidonsagvizsgalo jobb als6 sarkaban talilhat6 kibont6 nyilra kell kattintani. Megfigyelhetjtik, hogy a 2.20. abran a nyil Iefele mutat, a 2.19. abran pedig; arnikor a tulajdonsagvizsgalo kibontott allapotban van, folfele,

Kijeliilt kep

E"'""p"-",,Ct,,';s.m"5 RicV£ PSS ~.P"';~I;" ~"" ~ .... i~c"PIldGil.<t·

f>a-li~ "'~~i<>T,m"" VWt~si~M!;",ithRid.:... ~-~~-~ v"'"'~ F""rn "is TV ~~I\' T~"V<"l wit!! Ill<" 5h.ye~ R.!di~<ntt= ..... i~~,(;M

"Bl&FionPl.Jb1iC"W .'.irtime5,saipL';,tra-,...,;

" Gn.Hiti ~"'itl~ de:t:J~5, ",.Jet] d,p~ lo~ 70

share r:ip~ wi1h lJu,er E-pi~(}(;j~~c

rr"~"I",,, on mon; th;,;n 1'(1[1

WC~[!i. ...~

nawl w,lh:Rid. Sl:e- .. ~s >;In

~~I".I!'" ;"-JbliU<lrn(}

Ritk"s ~ai~as~.gL!id", h"!lv~

,{Ill fuJi! tnc test 012:;;:1.

2.20. abra

A tulajdonsdgvizsgii16 kepek leijeloleseeor leeptulajdonsagohat jelenit meg

Alland6an kibontott tulajdonsagvizsgal6

Ezen sorok fr6ja szerint az a leqhatekonvabb, ha mindig kibontott sllapotban hagyjuk a tulajdonsagvizsgal6t, fgy az osszes ott megjeJeno tulejdonsaqhoz hozzaferi.ink. Ha a tulajdonsagvizsgaJ6t nem bontjuk ki, bizonyos tulsjdonsaqok rejtve maradhat-

nak, pedig - klilonosen a Dreamweaverrel val6 isrnerkedes idejen - fontos latnunk az 6sszes tuiajdonsaqot, Amennyiben t6bb helyre van szi.ikseg a kepernvon, az F4 billentvilvel elrejthetjiik az osszes tablat (majd kesobb ugyanlgy ujra megjelenfthetjiik azokat), vagy a tulajdonsagvizsgal6 bal felso sarkaban talalhat6 kibont6 gombbal az egesz tablat beziirhatjuk.

Hefyi menuk

A Dreamweaverben tobbfelekeppen erhetjuk el es modosithatjuk az objekturntulajdonsagokat. Bizonyara mindenki gyorsan felfedezi a sajat kedvenc modszereit, A heIyi menuk is a rendelkezesre allo lehetosegek kozott szerepelnek. Ezek a menuk akkor

2. 6ra • A Dreamweaver kezelese ! 49

jelennek meg, ha az eger jobb gombjaval a dokumentumablak valamelyik objektumara kattintunk (Macen Corrraot+kattintas). A menu tartalma aszerint valtozik, hogy melyik objektumra kattintunk. A 2.21. abran Iathato helyi menu peldaul akkor jelenik meg, ha tablazatokra kattintunk a jobb gombbal.

Helyi menu

Tablazatkezelo parancsok

2.21, libra

A tablazatok helyi meruijeneh segitsegeoel szdmos tablazatkezel{f parancsot gyorsan elerhetunle

Sug6

A Help, Dreamweaver Help (Sugo, Dreamweaver sugo) menu pont kivalasztasaval

(vagy a hagyomanyos Fl billentyuparancs alkalmazasaval) indithatjuk el a Dreamweaver sugojat. A siigooldal bal oldalan lathatjuk a Contents (Tartalornjegyzek) es az Index (Targyrnutato) lapot. Az oldal jobb oldalan jelennek meg a sugotartalorn fajljai.

A Windows ban a sugotartalom jobb oldalan, a Macen pedig a bal fels6 reszen talalhato Next (Kovetkezo) es Previous (EI6zO) nyilgomb segitsegevel lapozhatunk a sugoternak kozott,

lsmerkedes a Dreamweaverrel a slig6 segftsegevel

Amfg a Dreamweaver meg ujdonsag a szamunkra. erdemes a Next es a Previous nyngomb saqftseqevel vegigbi:ingeszni a ternakat, A ternak csoportokba rendezednek, fgy elofordulhat, hogy a kovetkezo oldal reszletessbb inforrnaciokat tartalmaz

az sppen megjelenftett temaval kapcsolatban. Ha eleg sokaiq kattintgatunk

a gombokra, egy rnasik temahoz juthatunk. Ez remek m6dszer arra, hogy b6vftsuk az eppen tanulmanvozott ternahoz kot6d6 ismereteinket.

50 !, I. resz • BevezetEis a Oreamweaver vih§gaba

A Contents lap megjeleniti a targykor kategoriakba rendezett tartalomjegyzeket.

Az egyes kategoriak kijelolesekor a lista az adott ternahoz tartoz6 alternakkal bovul. Az Index gomb benlrendes mutat6ban jeleniti meg a sugorendszerben fellelhet6 temakat, A sugoablak tetejen talalhato keres6mez6 (Search) segitsegevel megadhatjuk akeresett ternat,

A kornyezeterzekeny sugo elinditasa az egyik Iegegyszerubb m6dja annak, hogy

az eppen vegzett feladat kozben segitseget kapjunk. Amikor valarnelyik objektum kijelolt allapotban van (es a tulajdonsagai lathatok a tulajdonsagvizsgaloban), a tulajdonsagvizsgalo 2.22. abran lathato Help ikonjara kattintva kozvetlenul tajekoztatast kaphatunk az adott objektumr61.

Sug6ikon

2.22. abra

A tulajdonsagvizsgdJ6 Help ihonjdra kattintva kr5zvetlenul az eppen kijel6lt objektum tulajdonsagaiual kapcsolatos informdciokhoz jutunk; Ebben a peldaban egyenesen a kepekkel kapcsolatos sugr50ldalra jutunk majd

Osszefoglalas

Ebben a leckeben a Dreamweaver dokumenturnablakarol es a Dreamweaver felulet egyeb elemeir61, peldaul a beszuro savrol, a menukrol, az allapotsorrol es a tablakrol tanultunk. Felfedeztuk a tablacsoportok kibontasat, lattuk a Dreamweaver menuiben,

a beszuro savon es az allapotsoron elerheto parancsokat, rnegismerkedtunk a tulajdonsagvizsgaloval, es megtudtuk, mikent lehet elerni a Dreamweaver sugojat,

Kerdezz-felelek

K: Hogyan erhetem el, hogy a doleumentumablah felulete a leheto legnagyobb legyen?

V: Eloszor is meg kell gy6z6dni arrol, hogy a dokumentumablak teljes rnereture nagyftott. A kibant6 es az osszecsuko gambra kattintva 6sszecsukhatjuk a tulajdonsagvizsgalot. Mindezt sokkal gyarsabban elvegezhetjtik az F4 billenryu lenyornasaval (ez a Window menu Hide Panels parancsanak billenryuparancsa). A tablikat szinten az F4 billentyCivellehet visszakapcsolni.

2. ora • A Dreamweaver kezelsse I 51

K: Valami nines rendben a Dreamuieauer-telepitesemmel, mert teljesen mdseepp nez ki, mint a k6nyvben. Az osszes tabla a kepernyo bal oldaldn lathaio, es nem tudom, hogyan lehet dthelyezni azokat. Segitseg!

V: A Dreamweaver elso inditasakor a konyvben hasznalt Designer nezet helyett valaki a Coder rnunkafehiletet valasztotta. A Window, Workspace Layout, Designer menuparanccsal valthatunk at.

Ismetlo kerdesek

1. Melyik menu ben lehet megnyitni olyan Drearnweaver-tablakat, amelyek eppen nem lathatok a tablacsoportokban?

2. Az allapotsor rnelyik ikonjaval nagyithatjuk ki a dokumentumablakban leva weboldalakat?

3. A Dreamweaver HTML-szerkeszt6, alkot6eszk6z vagy webhelykarbantart6 eszkoz?

Valaszok

1, A Window menu segitsegevel kapcsolhatjuk be es ki a tablakat, illetve a vizsgalokat. Az eppen megjelenitett elernekhez tartoz6 parancsok mellett pipa szerepel.

2. A dokumentumablakban talalhato weboldalakat a nagyft6 (Zoom) eszkozzel nagyithatjuk.

3. Elnezest, ez beugrat6s kerdesl A Dreamweaverre a felsoroltak mindegyike igaz.

Gyakorlatok

1. Az Edit menubol (Mac-felhasznaloknal Dreamweaver menu) nyissuk meg

a Dreamweaver Preferences parbeszedablakat. Valasszuk a General kategoriat, es vizsgaljuk meg az osszes rendelkezesre a116 beallitast, Kiserletezzunk a beallitasok rnodositasaval, A Help gambra kattintva olvassuk el az egyes beallitasokkal kapcsolatos informaciokat. A beallitasokat ne valtoztassuk veletlenszenfen, kulonosen olyankor, ha nem ertjuk az adott beallitas rmikodeset.

2. Kiserletezzunk a tablacsoportok kibontasaval es osszecsukasaval, Meretezzuk at a tablacsoportokat. Vizsgaljuk meg a tablak jobb felso sarkaban talalhato Ienyilo menuk nemelyiket, Az F4 billentyu (Hide Panels/Show Panels paranes) segitsegevel valtogassuk a beailitast,

3. A Dreamweaver megnyitisakor megjelen6 udvozlo kepernyon inditsuk el a New Features CUj szolgaltatasok) bemutat6t (a New Features feliratu hivatkozasra kattintva). A bemutat6 rnegtekintesehez kapcsol6dnunk kell az Internethez.

4. Kattintsunk az udvozlo kepernyo kozepen talilhat6 Create New parancs alatti HTML lehetosegre, amellyel ures HTML dokumentumot hozunk letre a dokumentumablakban.

Webhelyek letrehozasa

A lecke tartalmabol.

• Webhelyek meghatarozasa a Site Definition varazslo segitsegevel

• Webhely-meghatarozasok modcsitasa

• Webhelyek osszeallitasa

Amikor uj webhelyprojektet inditunk a Dreamweaverben, az elsa teend6 mindig a webhely meghatarozasa - ezt fogjuk gyakorolni ebben a leckeben, A webhely rneghatarozasa jelenti azt a kiindulasi pontot, ahonnan elkezdjuk a rnunkat. Meghatarozott webhely nelkul is megnyithatuok es szerkeszthetilnk onallo weboldalakat, de ha rendelkezesre all egy a Dreamweaverben meghatarozott webhely, j6val konnyebb tobb oldalt, mas oldalakra mutat6 hivatkozasokat es kepfajlokra mutat6 hivatkozasokat kezelni.

A projekteket a Dreamweaver Files (Fajlok) tablaja segitsegevel tervezziik meg, hozzuk letre es kezeljuk. Vegul rengeteg fajlt kapunk: weboldalakat (HTML fajlokat), kepfajlokat, CSS fijlokat es egyebeket. Fontos, hogy a webhely meghatarozasaval biztositsuk a j6 kezdest,

54 i I. resz • Bevezetes a Dreamweaver vili§gaba

,

U j webhely rneqhatarozasa

Ebben a leckeben megnezzuk, hogyan kell tarolokonyvtarat letrehozni a webhelyunk szamara, majd ertesiteni errol a Dreamweavert, Ez a konyvtar ad otthont a webhelynek, es a segedfajlokat - peldaul kepeket es parancsfajlokat (errol a kesobbi leckekben ejtunk szot b6vebben) - tartalmaz6 konyvtarak segitsegevel logikus szerkezetet epfnink ala. A kezd6 webfejleszt6k nagy resze egyszenlen hozzafog a weboldalak letrehozasahoz, atugorva a meghatarozas lepeset, Ha elvegezziik ezt a fontos feladatot, sokkal konnyebbe valik a webfejlesztes.

Minden webhely rendelkezik gyokerkonyvtarral. A webhely gyokere a fajlokat es a tobbi konyvtarat tartalmazo fokonyvtar, A webhelyek meghatarozasakor a Dreamweaver ezt

a konyvtarat es a benne szerep16 fajlokat tekinti az adott webhely vilagegyeternenek.

Ha a vilagegyetemen kivulrol probalunk kepet beilleszteni, a Dreamweaver figyelmeztet, hogy a webhelyen beli.il mentsi.ik a fajlt.

Konyvtarak vagy mappak?

A ki:inyv szerzo]e (sok mas emberhez hasonloan) rokonertelrrul kifejezesksnt hasznslia a kiJnyvtar as a mappa szot, Mindketto fajlokat as mas konvvtarekat vagy rnappekat tartalmezo tarolot jelent. A kdnvvtarak es a rnappak newel rendelkeznek

- egy adott fajl eleresi utjanak meqhatarozasakor ezekre hivatkozunk.

A Drcamweaverben azert kell rneghatarozni a webhelyeket, hogy tudja, mikcnt kell hivatkozni a fajlokra. Ha egy kepfajl peldaul a webhely valamelyik kepkonyvtaraban talalhato, a Dreamweaver tudja, hogyan kell megfelel6en hivatkozni a kepre a weboldalakon belul, Amennyiben azonban a kep a meghatarozott webhelyen kivul talalhato, el6fordulhat, hogy a Dreamweaver nem kepes helyesen hivatkozni ra, ezert a webhely hibas hivatkozasokat tartalmaz majd. A Dreamweaver fajlhivatkozasairol az 5. leckeben szerzi.ink majd b6vebb ismereteket.

Minden Ietrehozott projekthez meg kell hatarozni egy uj webhelyet. Meg ha a projektek kapcsolatban is allnak egymassal, donthetunk iigy, hogy kisebb webheIyekre bontjuk azokat, hogy a fajlok szama ne valjon kezelhetetlenne az egyes webheIyeken. Ezen sorok szerz6je is gyakran bontja az egyes leckemodulokat kulon rneghatarozott webhelyekke, amikor egy projekten dolgozik. Az 1. lecke szerkesztesekor az ahhoz tartoz6 webhelyet kell megnyitni, a 2. leckehez pedig az annak megfele16 webhelyet. A Dreamweaverben egyszerre csak egy webhely lehet nyitva.

A webhelyek meghatarozasakor ugyelni kell arra, hogy a Files tabla lathato legyen (ehhez valasszuk a Window, Files - Ablak, Fajlok - meni.ipontot). A Files tabla segitsegevel nyithatjuk meg a Dreamweaverben az egyes weboldalakat, amelyeken dolgozni szeretnenk, A Files tabla megjelenfti a webhely fajlszerkezetet, es a tablan szerepl6

3. ora • Webhelyek letrehozasa ! 55

weblapokra duplan kattintva nyithatjuk meg azokat a Dreamweaverben torteno szerkeszteshez. Az egyes weboldalakat a File, Open (Fajl, Megnyitas) paranccsal is megnyithatjuk. Ahhoz, hogy hozzalassunk egy webhely meghatarozasahoz, a Files tablanak a 3.1. abran lathato Manage Sites (WebheIyek kezelese) hivatkozasara kattintva (amennyibert az elerheto) nyissuk meg a Manage Sites parbeszedablakot, Ha a hivatkozas nem lathato a Files tablan, az azt jelenti, hogy mar rendelkezesre all egy meghatarozott webhely. A Manage Sites parbeszedablakot a Site, Manage Sites (Webhely, Webhelyek kezelese) meni.iparanccsal is megnyithatjuk.

Webhelyek kezelese hivatkozas

!@DE~kl:OP y, ~

!.<lGal flies _~ Typ

B GI D5ictop

~ ... 9 My Comput er

IE,- ~ M~' N~h.\'ork Places: b FTP &. ADS Servers iB, b Desktop items

i,,:-'::_: .. ·::·i:.: .• ::.:: .. : •. ::~.;:;;;. RI""

-----+- Files tabla

3.1. abra

.. ~. A Manage Sites hivatkozast oalasztua uj webhelyet

~-----~~~---.~---~----~~'~~'~ lw..taroz.fJatttnl~ rneg a Dreamioeaoerben

A 3.2. abran Iathato Manage Sites parbeszedablakban hozhatjuk letre, szerkeszthetjuk, rnasolhatjuk, torolhetjuk, menthetji.ik es tolthetjuk be a Dreamweaver webhely-meghatirozasokat. Az ablak neve mindent elarul: itt tortenik a webhelyek kezelese, 'OJ webheJy rneghatarozasahoz kattintsunk a Manage Sites parbeszedablak New (UP gombjara, majd valasszuk a Site (Webhely) lehetoseget. Ekkor megjelenik a Site Definition (Webhelyrneghatarozas) parbeszedablak.

~!~~~o.g~:9J.J~1jP2=1 ~ """=::::::=:;;:;:.. ... 1

!EG2006 : MA.X Project :1~AXl iMAX2 !MyH~ijlthE_VE"t lc+aetcr (Redesign (Rid: Steves' europe

tRjd:;_Steves_Evrope-_CS3 ,,,,,-, i

[~~~~~"~~~~,_"._" ,_. ~'~i Import.,.

I D,,,,, Help

3.2. abra

A Manage Sites parbeszedablale felsorolja az osszes meghatarozou webhelyet, es lehetso« teszi azok keze!eset

56 " I. resz • Bevezetes a Dreamweaver vilagaba

A Site Definition parbeszedablakban adhatunk nevet a webhelynek es iranyfthatjuk

a Dreamweavert a szamitogepen a fajlokat tarolo rnappahoz. A webhelyeket akkor is rneghatarozhatjuk, ha nem allnak rendelkezesre fajlok: a meghatarozast egyszenlen egy olyan ures konyvtarban hajtjuk-vegre, amely keszen all a kesobb letrehozni kivant weboldalak tarolasara.

A Site Definition varazsl6 hasznalata

A 3.3. abran Iathato Site Definition parbeszedablak tetejen ket ful talalhato: a Basic (Alap) es az Advanced (Halad6). Eloszor a Basic lap beallitasait hasznaljuk, ezert gy6z6djunk meg arrol, hogy ez a lap van kijelolve, A Basic lapon talalhato Site Definition varazslo vegigvezet bennunket a webhely meghatarozasan. A lecke egy kesobbi reszeben megtanuljuk, hogy rnikent lehet a Site Definition parbeszedablak Advanced lapja segitsegevel szerkeszteni a webhely-meghatarozast.

Basic tOl Advanced fLil

l.epesek A webhely neve

A sste, in A::bhE- ereeeuceever CS~r i£ C! cetecton ~f f31~ 1500 rold~ s thai websit.e: on a server.

\".ihal is the HTTP .Aci&e~s (URL) ofVQu::" :;itE?

................. _-, .. _,_ "_ .. ,, '_ .

[f you went to \'\'00.:: direc~1' on thl! server tJl>iClt;! F7P or Rm •• yoo snpuld crt!!!'';: ?Q FTP or RDS ~~\I~r cco'ecuon. \"1Drt.irlg drectly en the serve- does rot illl&:.' you to perfurm ';'!:e\','id"" operebcns like link: d'1&king or 5i:e reports,

3.3. abra

A Site Definition pdrbeszedabtai:

Basic lapja vegiguezet bennurieet a uebhely-meghataroeas beallitasan

A Site Definition varazslo harom lepesbol all, amelyek a varazslo tetejen olvashat6k:

• Editing Files (Fajlok szerleesztese): Ebben a lepesben a fajlok tarolasara szolgalo helyi konyvtarat hatarozhatjuk meg. Itt megmondhatjuk a varazslonak azt is, hogy a webhely hasznal-e kiszolgalooldali technologiakat Camelyek weboldaIakat, kiszolgalokat es gyakran adatbazisokat kapcsolnak ossze). A konyvben szerepl6 webhelyek es weboldalak nem hasznalnak ilyeneket.

3. ora • Webhelyek letrehozasa t 57

• Testing Files (Pajlole ellen/irzese). Ez a lepes csak a kiszolgalooldali technologiakat alkalmazo webhelyeknel szukseges. Ugorjuk at!

• Sharing Files (Faflole megosztdsa): Ebben a lepesben megszabhatjuk

a Dreamweavernek, hogy a megosztashoz egy kiszolgalora vagy egy masik kozponti helyre tovabbitsa a fajlokat. Ezt a szolgaltatast a 22. Ieckeben vizsgaljuk alaposabban,

A Manage Sites parbeszedeblak megnyitasa a Site menub61

A Manage Sites parbeszedablakot a Files tablar61 es a Site rnenubol is megnyithatjuk. A Site, Manage Sites parancs megnyitja a Manage Sites parbeszedablakot, amelyben uj webhelyeket hozhatunk letre, vagy a meglevo webhelyeket rendezhet-

jiik. A Files tab Ian elerhet6 parancsok tobbseqe a Site menUben is maptalalhato, fgy mindket helyrol hozzatsrhetunk a parancsokhoz.

Az Editing Files h~pes

Gy6z6djunk meg arr6l, hogy a Site Definition parbeszedablak fels6 reszen talalhato Basic lap van kijelolve. Toltsuk ki a varazslo Editing Files oldalat:

1. Nevezzuk el a webhelyet a Site Definition varazsloban (lasd a 3.3. abrat).

Ez a nev csak a Dreamweaveren behil hasznalatos, ezert tetszes szerint szokozoket €os egyeb karaktereket is hasznalhatunk. A webhely nevenek ertelmesnek kell lennie, legyen felismerhet6, amikor megnyitjuk a Site rnenut a webhelyek modositasahoz.

A szerz6 Drearnweavereben idonkent 30-40 webhely-meghatarozas is talalhato ~ az ertheto nevek segftenek a szerkeszteni kivant webhely megtalalasaban,

2. Ha mar tudjuk a webhely vegleges H'I'Tl'-cimet, itt a varazslo els6 oldalan megadhatjuk, de nem baj, ha uresen hagyjuk a mez6t.

3. Kattintsunk a Next gombra.

Az Editing Files, Part 2 Jepes

A varazslo kovetkezo oldalan, az Editing Files, Part 2 (2. resz) Iepesben megadhatjuk, hogy hasznalunk-e kiszolgalooldali parancsfajlokat dinamikus weboldalak letrehozasahoz, Toltsuk ki a varazslo Editing Files, Part 2 lepeset:

1. A konyvben letrehozott weboldalak hagyomanyos HTML oldalak lesznek, ezert valasszuk a 3.4. abran lathato, No, I Do Not Want to Use a Server Technology (Nem akarok kiszolgaloi technologiat alkalmazni) felirani fels6 valasztogombot,

2. Kattintsunk a Next gornbra.

58 ~. J. resz • Bevezetes a Dreamweaver vilagaba

N em akarok kiszolqalotschnokiqiat a!ka!mazni

Az Editing Files, Part 3 h~pes

3.4. abra

[elezni hell, ha kiszolgal601dali parancsfajlolea: alkalmazunk majd a toebhelyen

A kovetkezo oldalon, az Editing Files, Part 3 (3. resz) lepesben hatarozhatjuk meg

a webhely fajljainak helyet. Az itt letrehozott webhely a Jejlesztesi webhely (development site) tehat nem a vegleges webhely, amelyet a latogatok megtekinthetnek az Internercn keresztul. A fejlesztett webhely fajljait egy kiszolgalora kell tovabbitani, hogy a nezok az Interneten keresztul lathassak a fajlokat (ezt a muveletet a 22.leckeben targyaljuk). A webkiszolgalon talalhato es a kozonseg szamara elerheto webhelyet eta webhelynek (live site) nevezik, A szerz6 mindig a webhely helyi merevlemezen talalhato friss rnasolatat szerkeszti. A fejlesztett fajlokat ket helyen tarolhatjuk:

• Az adott szamitogepen

• Egy halozati meghajt6n

Az alabbiak szerint toltsuk ki az Editing Files, Part 3 oldalt:

1. A fels6 valasztogornb - Edit Local Copies on My Machine, Then Upload To Server W11en Ready (Recommended) (Helyi rnasolatok szerkesztese a szamitogepen, feltoltes a befejezes utan - javasolt) - kijelolesekor a fejlesztett fajloknak az adott szamitogepen vaI6 tarolasat valasztjuk; a legtobb webfejleszt6igy tarol-

3. ora • Webhelyek letrehozasa i 59

ja a fajlokat, Ha valaki halozati kornyezetben dolgozik (peldaul az irodajaban), az Edit Directly on Server Using Local Network (Szerkesztes kozvetlenul

a kiszolgalon, a helyi halozaton keresztul) lehetoseget is valaszthatja.

2. A 3.5. abran lathato, hogy a parbeszedablak aljan talilhat6 szovegmezoben meg kell adni a webhelykonyvtar helyet. A szovegmezo jobb oldalan leva mappa ikonra kattintva megkereshetjuk a helyi webhely - a Dreamweaverben szerkeszteni kivant fajlok - tarolasara szolgalo konyvtarat. Hasznalhatunk a merevlemezen mar letezo konyvtarat, vagy uj konyvtarat hozhatunk letre a webhely szamara,

3. Kattintsunk a Next gombra.

A webhely t<ijljainak eleresi CItja

Helyi rnasolatok szerkesztese a szamft6gepen

3.5. abra

Meg kell adni a fejlesztett Jajlok otthondul szolga16 konyaarar

Ne szerkesszunk al6 webhelyet!

A fejlesztes soran soh a ne hivatkozzunk a vegs6, el6 webhelyre! Az igazi webhelyen nem szerencses hibazni, ezert mindig ugyeljunk arra, hogya webhely rnasolatat szerkesszukl

A Sharing Files lepes

A Site Definition varazslo kovetkezo lepeseben beallithatjuk, hogy mikent szeretnenk kiszolgalora tolteni a fajlokat es megosztani azokat a vilaggal. Egy kozponti belyet is meghatarozhatunk, ahol a csapatunk tagjai oszthatnak meg fajlokat. A lepes beallitasair61 es a fajlok arvitelerol a 22. leckeben tanulunk.

60 r I. resz • Bevezetes a Dreamweaver vilagaba

Az alabbi m6don toltsuk ki a Sharing Files oldalt:

1. A 3.6. abran szernleltetett m6don nyissuk Ie a fels6 meruit, es valasszuk a None (Nines} lehetoseget.

2. Kattintsunk a Next gombra.

Nines

Az iisszegzes attekintese

3.6. abra

A tavoli leapcsolatra vonatkoz6 informaciole kes6bbi beailitasahoz egyszeriien udlasszuk a None lehet5seget

A varazslo utols6 oldala megjeleniti a webhely osszegzeset, amelyet a 3.7. abran lathatunk. A Site menu Edit Sites (Webhelyek szerkesztese) parancsat valasztva (akar a Files tablan, akar a dokumentumablakban) barmikor visszaterhetunk ehhez a varazslchoz, es modosithatjuk a webhely-meghatarozast, Kattintsunk a Done (Kesz) gornbra.

A webhelygyorstar letrehozasa

A Done gombra kattintas utan a Dreamweaver megjelenit egy uzenetet, amelyben ertesit, hogy a kovetkezo lepesben letrehozza a kezdeti webhelygyorstarat. Az OK-ra kattintva egy olyan folyamatsav [elenik meg, mint amilyen a 3.8. abran lathato (es ha meg nines semmi a webhelyen, nagyon gyorsan el is tfinik), A Dreamweaver minden uj webhelyhez letrehoz egy kezdeti gyorstarat. A toebhelygyorstdr a webhelyen szereplo hivatkozasokra vonatkoz6 inforrnaciokat tarolja, hogy valtozas eseten gyorsan frissithet6k legyenek A Dreamweaver a munka kozben folyamatosan frissiti a gyorstarat.

3. ora II Webhelyek letrehozasa i 61

localinro:

Si':eoI46":"f!1: Rid-; 5:~'o'f:;;+EU':~ nn~JGhtJ-.eBA;:;kDMr

Lni:& Root rLltj,,",~ C:I,D~~rl:$ e-id s.~ti'l~\4df'li:-Ji'lr'.l!.oI\M-", DOCl1.JITenh;;\pf\)j~!::I1\DrIH!m:Ml

Teding -;;HYf!r.

AcC~1i~rn!ietwu,::l~!!;,o

3.7. fibra

A Site Definition uarazslo megjeleniti a uebhely-rneghararozas reszleteit

3.8, fibra

Amihor a Dreamueaoer letrehozza a web/wry gyorstarat, egy [olyamatsau jelenile meg.

A gyorstarfaftfelgyorsitja a hioaihozasok: frissiteset a .fajlok dineoezeseleor lJagy dthelyezeseleor

A Files tabla hasznelata

A webhely rneghatarozasa utan a megadott webhelycim megjelenik a Files tabla felso reszen talalhato Site Ienyilo listaban (Iasd a 3.9. abrat), A weboldalak letrehozasukkor es a webhelyen torteno mentesukkor a Files tablaban jelennek meg. A Files tibia segitsegevel nyitjuk meg a Dreamweaverben szerkeszteni kivant weboldalakat Lehet, hogy jelenleg meg egyetlen weboldaI sem talalhato a webhelyen, de kesobb erdemes a Files tabla alkalmazasaval rnappakat Ietrehozni a sok megalkotott weboldal rendezesehez,

A Site lenyil6 Iistaban erhetjiik el a meghatarozott webhelyeket. Ha tobb projekten dolgozunk, tobb webhely kozul valaszthatunk, Elkepzelheto peldaul, hogy valaki meghataroz egy sajat, szernelyes webhelyet, tovabba egyet a gyerrneke iskolaja szamara vagy egy ugyfel megrendelesere keszitett webheJyet.

62/1. resz .. Bevezetes a Dreamweaver vilagaba

Site lenyfl6 lista

Kibont6/iissz8csuk6 gomb

:=J e Site • Rid< steves' Eu, ...

rB--E:J [5S FDld~~

rB ··10 images solde

~, indE:x,htrn llKB HT1"1 f

3.9. abra

A Files tablan modosithatjuh

~"" • :,?: a webhelyeket, es weboldalakat

~~-.~--~ nyithatunk meg

A meglevo webhelyeknek a Dreamweaverbe torteno betoltese nem igenyel kulonleges eljarast, Ha a meglevo webhely fajljai a merevlemez valamelyik mappajaban talalhatok, egyszenien egy olyan webhelyet kell rneghatarozni a Dreamweaverben, amely az adott rnappara mutat, Semmi mas dolgunk nines.

Az osszes fajl szerkeszthet6 a Dreamweaverben, igy konnyen m6dosfthatjuk, majd menthetjuk a weboldalakat A Files tablan felsorolt weblapokat dupla kattintassal nyithatjuk meg.

Eddig a Flies tabla osszecsukott valtozarat hasznaltuk, a kovctkezo reszben azonban megismerkedunk annak kibontott formajaval.

A Files tabla kibontasa

A Files tabla nagyobb valtozatat olyankor erdemes hasznalni, amikor a webhely fajljaival dolgozunk, es tobb, a webhelyet erinto paraneshoz kell hozzafernunk, A kibontott Files tabla megnyitasahoz kovessuk az alabbi lepeseket.

1. A kibontott Files tabla megnyitasahoz kattintsunk a Files tabla kibonto/osszecsuko gornbjira, amelyet a 3.9. abran Iathatunk,

A 3,10. abran lathato kibontott Files tabla a Files tabla nagyobb valtozata, amely ket ablakreszbol all - ezek a Local Files (Helyi fajlok - alapesetben a jobb oldalon talalhato) es a Remote Site (Tavoli webhely - a bal oldalon), amelyek beallitasat

a 22. Ieckeben vegezzuk eL Mivel meg nem hatarozrunk meg tivoli webhelyet,

a Remote Site reszben elvileg meg nem szerepel semmi.

Ha Macintoshon a Files tibia kibonto/osszecsuko gornbjara kattintunk, a kibontott Files tabla uj ablakban nyilik meg. A Windowsban azert ninik u] ablaknak, mert jelent6sen elter a hagyomanyos Drearnweaver-felulettol.

3. ora • Webhelyek letrehozasa j 63

2. Ha ismet a kibont6/6sszecsuk6 gombra kattintunk, visszaterhetunk a Files tabla kisebb valtozatahoz.

Tavoli wehhely I

Kihont6/1isszecsuko gomb I

Helyi fajlok I

.0~~.'.'.'· _-_ .. __ .,_. __ __ _ .. : : - .. .. .. '.'.-.:.:.~ .. ' .. ~:~ .. ~'''.'.:.'".'.'~".'.'::'''.'.'.'':.''~~.~ : .. : : :. : :.": -:.:.,.:~~

3.10. abra

A hibontou Files tabla ket reszbOl all: Local File es Remote Site

OJ fajlok letrehozasa a Files tablan

Kozvetlenul a Dreamweaver Files tablajarol is lerrehozhatunk iij fajlokat, illetve mappakat. A Files tabla menujenek megnyitasahoz kattintsunk az eger jobb gornbjaval (Mac en Coxrnot+kattintas) a Files tablara, A 3.11. abran lathato helyi menu tetejen ket lenyeges parancs szerepel: a New File CUj fajl) es a New Folder CUj mappa). Ezeknek a parancsoknak a segitsegevel hozhatunk letre failokat es rnappakat (mas neven k6nyvtarakai) a Files tablan,

A letrehozott webhelyek szervezesehez konyvtarakra van szukseg, es valoszfmileg minden webhe1y rendelkezik majd egy kepkonyvtarral, amely a webhely kepeinek tarolasara szolgal. A kepkonyvtar letrehozasahoz kovessuk az alabbi Iepeseket.

1. Kattintsunk a jobb gombbal (Macen Conrnot+kattintas) a Files tablara,

A New Folder parancs kivalasztasakor ugyelnunk kell a kattintas helyere, hogy ne beagyazott map pat hozzunk letre egy masik mappaban. Ahhoz, hogy

a webhely gyokerkonyvtarahoz adjunk rnappat, a Files tabla felso sorat kell kijelolni, amely a Site sz6val kezd6dik.

64 ! I. resz • Bevezetes a Dreamweaver vilagaba

2. Valasszuk a New Folder parancsot. Egy nevtelen mappa adodik a webhelyhez.

3. Adjuk az uj mappanak az images (kepek) nevet.

A New File es New Folder parancs

Open.a Re~llt jtem

U ~_'S:~ftJr(rpe!1.'"ICe:a"lJn "G I-£l'MI...

tJ n~~k:I1rlill:ll',htm b C()I(ff~

't,]-=i.'nain,i'S ~1't1"

'3~l\.dl.l!'e..t= wASP~

"Glc:;:';<lrrairu= t:J},'SLI(Erfi"'~)

d -s~_s~x.ttm i."J css

d~lil-= t:i~

i:d ~::tI~rW;'-J1e'V,tdPn tJ l\Ii'C-

'tJ CSSSIW~ UFI~ 'SJ:sJM:III'"Pfqlcfu=..;, 'd~s:orttr~(Bo3!e)· bttae.

b oecn ...

tjt.ble ...

:! Gettlng'Stm1w,," Ll NewF~c~:I' :..JRssru-cro.

3,11. abra

A Files tabla helyi menuje olyan parancsohat tartalmaz; amelyekkel mappdkat es fajlolea; hozhatunk fare a webhelyeken

Most az alabbi lepeseket kovetve pr6biljunk uj fijlt adni a webhelyhez:

1. A jobb gornbbal kattintsunk (Macen CONTROL +kattintas) a gyokerrnappara, es valasszuk a New File parancsot.

2. 0j nevtelen weboldal keletkezik a webhelyen. Nevezzuk ezt az oldalt index. htmnek, amely szamos kiszolgalon az elterjedt weblapnevek koze tartozik.

Az alaperteimezett oldalneu hasznalata elosegiti, hogy a felhasznalok konnyebben talaljak meg az oldalt, ha egyszeruen egy altalanos weblapdmet adnak meg, a meghatarozott oldal nevenek hozzaadasa nelkul. Az index. html is alapertelmezett oldalnev, A . htm es a . html kiterjesztes egyarant elfogadhat6. A . htm azert valt nepszeruve, mert a Microsoft Windows regebbi valtozatai csak haromkarakteres fajlkiterjeszteseket tudtak kezelni, az ujabb valtozatokban azonban mar nines ilyen korlatozas, Az uj mappa es

az tij fajl hozzaadasa utan a webhelynek a 3.12. abrahoz kell hasonlitania,

3,6ra • Webhelyek letrehozasa ~ 65

Mappa Fail

3,12, abra

A Dreamweaver Files tabla jan fajlokat es mappdkat adhatunh a toebhelyhez

< .. >.>:;.. ;,t

€~ 11ocol items selected totaling 3: l ...

Egyseges fajlnevek

Erdemes rnindeniitt kisbetlis neveket adni. Bizonyos kiszolgal6k as parancsnyelvek rneqkulonboztetik a kis- as nagybetliket. Ha az iisszes fi~jlnevben kisbetlik szerepelnek, nem kell eszban tartanl, hogy hasznaltunk-e nagybetliket.

A webhely-meghatarozasok szerkesztese

Ebben a leckeben eddig a Site Definition parbeszedablak Basic lapjan talalhato varazsl6t hasznaltuk a webhelyek meghatarozasara, Most vizsgaljuk meg az Advanced lapot, es a segitsegevel modositsuk a webhelybeallitasokat. A webhely-meghatarozasokat

a kovetkezokeppen lehet szerkeszteni.

1. A Site lenyil6 lista vagy a Site menu Manage Sites parancsat valasztva nyissuk meg a Manage Sites parbeszedablakot.

2. Valasszuk ki a listabol az iment letrehozott webhelyet, majd kattintsunk az Edit (Szerkesztes) gombra. Ismet megnyilik a Site Definition parbeszedablak.

3. Kattintsunk a parbeszedablak tetejen talalhato Advanced lapra, A 3.13. abran lathatjuk, hogy ez a varazsloban megadott adatok egy rnasik nezete,

A webhely-meghamrazasok gyars szerkesztese

A Site Definition parbeszedablak gyors rneqnvitasahoz mindiissze duplan kell kattintani a Files tabla Site lenvllo listajaban szereplc webhelvnevre,

66 t I. resz • Bevezetes a Dreamweaver vilagaba

l1"tis ar;ldr13S is U5MIDrsilE:reiamre 1rV-s, ~ for th1::LinkQjKk~ lr.-d~tfitl-mP 1mb: thatr~ to

!,ourowll~le

Case-t;~iiVE'~";:~ QJrie'~:;;e.~i~~~

CcdlE!~ (2Jfn<,blec;;,d".fo,

The carne mDin'!ain~ Re.;;;OO asset i!l~1;iPn in th~!:Jb;,. Th~~<;,up~~±po!"""I,lir.I:: mal1~ement,-<lr.d5jw r"lOlp'fililtur~.

3.13. abra

Az Advanced lap az 6sszes uebhelytulajdonsagot tartalmazza

A Site Definition parbeszedablak bal oldalan a kategoriakat lathatjuk, a jobb oldal pedig a kijelolt kateg6ria tulajdonsagait sorolja feL A Local Info (Helyi adatok) kategoriat valasztva nemelyik mez6 ismer6snek tifnhet. Ez azert van, mert ezek ugyanazok

a mezok, mint amelyeket a varazsloban meghataroztunk, A kovetkezokeppen allithatjuk be az alapertelmezett kepmappat a Local Info kategoriaban:

1. Kattintsunk a Default Images Folder (Alapertelmezett kepmappa) szovegrnezo melletti mappa ikonra.

2. Keressiik meg a most letrehozott kepmappat. Ezutan a Dreamweaver tudja, hogy hal taroljuk a webhely kepeit.

3. Az OK gombra kattintva mentsuk a modositasokat,

4. A Done gombra kattintva zarjuk be az Edit Sites (Webhelyek szerkesztese) parbeszedablakot.

A betuallas-erzekenyseg ellen6rzese

A Site Definition parbeszedablak Advanced lapien talalhato Use Case-Sensitive Link Checking (Betuallas-erzekenyseg ellendrzese a hivatkozasokban) jeli:ilonagyzet bejelolesekor a Dreamweaver ellenorzi, hogy a webhely hivatkozasai ugyanazt a benlsllast

(nagybeta vagy kisbeni) hasznaliak-e, mint a fajlnevek. Ez a szolqaltatas ki.lloni:isen olyankor hasznos, ha vegul a kis- as nagybetuket megklilonbOzteto UNIX kiszolqakira toltjuk fel a webhelyet.

3. ora • Webhelyek letrehozasa ~ 67

A konyv kesobbi reszeiben mas halad6 beallitasokat is targyalunk. A 22. leckeben

a Remote Info (Tavoli adatok) kateg6ria beallitasaval Iehetove tesszuk a fajlok tavoli kiszolgalora torteno feltolteset, a 23. Ieckeben pedig megvizsgaljuk a Design Notes (Tervezesi feljegyzesek). kategoriat,

A webhelyek szervezsse

Szarnos lehetoseg kinalkozik a webhelyek helyes szervezesere. Vannak, akik szeretik egysegenkent konyvtarakba es alkonyvtarakba rendezni a fajlokat. Olyanok is leteznek, akik a nagyon sekely szerkezeteket szeretik, ahol egyetlen konyvtar sok fajlt tartalmaz. A webfejlesztesben egyre tapasztaltabba valva mindenki rnegtalalja majd a szamara Iegjobb szervezesi m6dszert. Kellemes elmeny mas webfejleszt6kkel vagy mUkedvel6kkel tapasztalatokat cserelni, aminek a reven tanulhatunk masok sikereib61 es kudarcaibol, illetve ok is tanulhatnak tolunk.

A 3.14. abra a szerzo merevlemezen talalhato Projects (Projektek) konyvtarat mutatja. A Projects konyvtarban az egyes folyamatban lev6 projektek konyvtarai talilhat6k.

A konyvtarakban egy-egy Web nevtf konyvtar van, ahol az adott webhely fejlesztett fajljai talalhatok, illetve ez a Dreamweaverben beallitott gyokerkonvvtar is.

QProjects bMarshaH

3.14. abra

A lehetseges k6nyvtaTszerkezetek

egy peldaja, amelyben a Web k6nyvtar a webhely gy6kerk6nyvtaTa

Software Giant

ABC Company

Docs

Web

Ezzel a konyvtarszerkezettel egyeb fajlokat ~ peldaul leveleket, szerzodeseket, szarnlakat es tablazatokat ~ lehet elhelyezni az ugyfelek rnappajaban, anelkul, hogy azok

a webhely reszeve valnanak, Az a helyes gyakorlat, ha a Webre feltolteni kivant fajlokat elkulonftjuk az egyeb fajloktol, Lehet, hogy valaki jobban szereti, ha egyetlen konyvtar tartalmazza az osszes weboldalt. Mindenki dontse el, mi a leghatekonyabb a szamara.

68 f I. resz • Bevezetes a Dreamweaver vilagaba

Miel6tt elkezdenenk egy projektet, gondoljuk at, hogy mikent fogjuk rendezni a webhely fajljait. Val6szimlleg erdemes kulon keprnappat letrehozni a kepek szarnara, a 3.15. abrahaz hasonl6an. Ha mas kiegeszitok is rendelkezesre allnak, peldaul hangok vagy mozgokep, ezeknek is keszitsunk sajat konyvtarat, Ezen sorok Iroja mindig letrehoz egy parancsfajlkonyvtarat is, amelyben a kUIs6 JavaScript es CSS fajlokat tarolja - ezeket

a konyv kesobbi leckeiben targyaljuk,

flash

images

scripts

3.15. abra

Kep- es egyeb k6nyvtarakba rendeziietjule a webhelyet

A szerz6 megprobalja logikusan konyvtarakra bontani a webhelyek res zeit. Ha a webhelyunk magatol ertetodo felosztast kmal (peldaul reszlegek, leckek, termekek es ehhez hasonl6k szerint), erdernes konyvtarakat letrehozni az egyes kategoriak weblapjainak tarolasara. Meglep6, de igaz, hogy meg egy kis webhely is hamar kezelhetetlenne valik, ha egyetlen konyvtarba omlesztjiik az osszes fajlt.

A webhelyek tobbsege sok kepfajlt hasznal, Ha a webhely kulonbozo reszekbol all, erdemes kulon kepkonyvtarakat letrehozni az egyes reszekben? Lehet, hogy ez j6 m6dszer a webhely szervezesere, rnasreszt viszont, ha a kepeket tobb reszben is hasznalni akarjuk, el6fordulhat, hogy nehezen lehet majd megtalalni azokat. Ugyeljunk arra, hogya rendezes logikaja ne omoljon ossze, ahogy fajlokat adunk a webhelyhez.

Szerencsere, ha rnegis at kell rendezni az elemeket, a Dreamweaver az osszes hivatkozast frissiti helyettunk. A fajlok athelyezesekor a Dreamweaver felajanlja a fajlra mutat6 hivatkozasok megkereseset es frissiteset. Erre szolgal a webhelygyorstar. Ennek ellenere tovabbra is az a legjobb megoldas, ha boles donteseket hozunk a projekt kezdetekor,

3,6ra • Webhelyek letrehozasa r 69

Osszefoglalas

Ebben a leckeben megtanultuk, hogyan keHwebhelyeket meghatarozni es beallitani azok gyokerkonyvtarat. Megtudtuk, hogyan lehet gyorsan fajlokat es rnappakat adni a webhelyekhez. Ezen kivul a Files tabla hasznalatat es annak kibontott Files tablava boviteset is elsajatitottuk, Megtanultuk, hogyan lehet megnyitni es a halad6 webhelymeghatarozasi szolgaltatasok alkalmazasaval szerkeszteni a webhelyeket, tovabba megvizsgaltuk a webhelyek szervezesenek elmeletet.

Kerdezz-felelek

K: Hogyan lehet webhelyeket betolteni a Dreamuieauerbe?

V: A webhelyek betoltesere nines eljaras. Egyszetilen meghatarozunk egy webhelyet, pontosan tigy, ahogy ebben a leckeben tettuk, rnajd a betolteni kivant webhely gyokerkonyvtarara hivatkozunk. A Dreamweaver az osszes fajlt megjeleniti a Files tablan, lehetove teve azok megnyitasat es szerkeszteset.

Ha a betolteni kivant fajl webkiszolgalon talalhato, eloszor el kell olvasni a 20. lecket, es a kiszolgalora mutat6 tavoli webhely-beallitasokat kell meghatarozni.

K: Ha a uiebhelyen belul at kell helyezni a jaj!okat, meg lehet ezt oldani a Dreamweaverben?

V: Ha karbantartasra es arszervezesre van szukseg, az a legjobb, ha ezt a Dreamweaveren belul vegezzuk, A Dreamweaver automatikusan frissfti a fajlok hivatkozasait, es figyelmeztet, ha olyan fajlt keszuliink torolni, amely a webhely mas fajljait is befolyasolja. Mindenkeppen a Dreamweaverben vegezziik ezeket a feladatokat, ne mashol,

Ismetl6 kerdesek

1. Miert kell meghatarozni a webhelyeket?

2. Mil csinal a Dreamweaver webhelygyorstarar

3. "A meglevo webhelyeket a Dreamweaverbe torteno betolteshez at kell alakitani."

Igaz vagy hamis?

70 ! I. resz • Bevezetes a Dreamweaver vihigaba

V61aszok

1. Azert hatarozzuk meg a webhelyeket, hogy a Dreamweaver tudja, hol talalhato a webhely gyokere, es milyen webhelykezelesi beallitasokkal szeretnenk dolgozni.

2. A webhelygyorstar engedelyezese felgyorsitja a Dreamweaver bizonyos szolgaltatasait, peldaul a hiperhivatkozasok frissiteset.

3. Hamis. A mar letezo webhelyeknek a Dreamweaverbe torteno betoltesehez nines szukseg atalakitasra,

Gyakorlatok

1. Probaljunk egy uj webhelyet meghararozni. Adjunk fajlokat es mappakat az uj webhelyhez. Nevezzi.ik el az egyik failt index. htm-nek.

2. Vegezzunk Google-keresest (www.google.com) a "Site Map" (webhelyterkep) kifejezessel, es tekintsi.ik meg az Interneten mas webhelyek szervezeset, A weboldalak tarolasara hasznalt konyvtarak lebet, hogy tukrozik a webhelyterkepen korvonalazott szerkezetet, de az is lehet, hogy nem. Kattintsunk nehany oldalra, es figyelji.ik meg a konyvtarszerkezetet az URL-ekben.

3. Nyissuk meg a Site Definition parbeszedablakot, es vizsgaljuk meg az Advanced lap egyeb kategoriait (peldaul Design Notes vagy Cloaking). A tobbi kategoriar61 a kesobbi fejezetekben lesz sz6.

Szoveqkezeles: szoveq es listak

A lecke tartalmdbol:

• Weboldalak letrehozasa es a teljes web lap tulajdonsagainak beallitasa

• A betutipus es a beturneret megvaltoztatasa a tulajdonsagvizsgalo segitsegevel

• CSS stilus ok Ietrehozasa a Dreamweaverben es a stilusok atnevezese, illetve alkalmazasa

• Szovegigazitas es rendezetIen, illetve rendezett listak hozzaadasa a weboldalakhoz

• Weboldalak elonezete kulcnbozo bongeszokben

A weboldalakon leggyakrabban elofordulo elemek a szoveg es a kepek, ezert ebben a leckeben eI6sz6r a szovegekkel foglalkozunk. Ugy latunk hozza a weboldalak letrehozasahoz a Dreamweaverben, hogy megisrnerkedunk a sz6vegek hozzaadasanak es a szovegtulajdonsagok beallftasanak mikentjevel. Megtanuljuk, hogy a Dreamweaver hogyan forrnazza a szoveg megjeleneset, tobbszinttf stiluslapokkal (Cascading Style Sheets ~ CSS) m6dositva a betutfpusokat. Ebben a leckeben megismerjuk a CSS-t,

a 6. lecke pedig melyebb ismereteket nyujt a CSS hasznalataval kapcsolatban.

7211. resz • Bevezetes a Dreamweaver viltigaba

,

Uj weboldalak letrehozasa

A Ietrehozni kivant dokumentum tipusat a New Document (Uj dokumentum) parbeszedablakban valaszthatjuk ki. A parbeszedablak tobb kategoriabol tev6dik ossze.

• Blank Page (Dres oldal)

• Blank Template (Ures sablon)

• Page from Template (Oldal letrehozasa sablonbol)

• Page form Sample (Oldal letrehozasa mintabol)

• Other (Egyeb)

Az egyes kategoriak felsoroljak a letrehozhato dokumentumok kulonbozc fajtait es elrendezeseit. Eloszor egy teljesen ures HTML dokumenturnot hozunk letre. A kesobbi leckekben a New Document parbeszedablak egyeb kategoriaibol is valaszrunk majd dokurnenturntipusokat. Az alabbi lepeseket koverve hozzunk letre egy uj, ures HTML weboldalt:

1. Valasszuk a File, New (Fajl, Up menupontot.

2. Kattintsunk a Blank Page kategoriara.

3. jeloljuk ki a Page Type (Oldaltipus) oszlop HTML lehetoseget, ahogy a 4.1. abra mutatja.

4. Valasszuk a Layout (Elrendezes) oszlop <none> (Nines) elemet,

5. Ugyeljunk, hogya DoeType (Dokumentumtipus) lenyilo listaban az XHTML 1.0 Transitional legyen kivalasztva,

6. Kattintsunk a Create (Letrehozas) gombra.

Letrejon az u] dokumentum, amelyhez szovegct, kepeket es egyeb objektumokat adhatunk. A New Document parbeszedablakot a CTRL+N (Macintoshon COM,\1AND+N) billentyuparanccsal nyitbatjuk meg. A Dreamweaver udvozlo kepernyojen (ernlekezhetunk, hogy ez a Dreamweaver megnyitasakor eloszor megjelen6 kepernyo) is letrehozhatunk u] oldalakat. Az udvozlo kepernyo Create New nevii kozepso oszlopanak HTML lehetoseget valasztva gyorsan hozhatunk Ietre ures weboldalt.

Mi az a dokumentumtfpus as az XHTML?

EszrevehettOk a New Document parbeszedablakban szerepld Document Type (Dokumentumtipusj lenvilc listat, A Dreamweaver alapesetben az XHTML 1.0 Transitional dokumentumtfpussal - gyakran nevezik doctype-nak is, mert

a doctype cfmke hatarozza meg - meqhatarozott tipusu HTML-t hoz letre,

Az XHTML (Extensible Hypertext Markup Language - bovitheto hipersziiveges jeliilonyelv) a HTML legujabb valtozata, amely a HTML-t es az XML-t (Extensible Markup Language - bovitheto jeliilonyelv) otvoz!. A dokumentumtfpust a 7. leeksben vizsqaljuk alaposabban.

4. ora • Szovegkezeles: szoveg as listak [ 73

Oldaltfpus

Uj HTML aida!

Dokumentumtfpus

set more ceaent, ..

¥i Page lIom T empete

.... _, ... ,_._- ---_._._._-- , .. --,_" .. _, ....

, ..... ;

~::=::: ::e~,~ ~r:'!

lwbm:lfu:ed, centered . "l lm!:.mnfu:ed,-Cffitffed,ne(JQer ~rrd ~;: [

~=::~: ::~. h~der~di:··'-i

2. W!umn elestc, left Sde:bu i 2GlllifM~;;,rtic,left'ii~,!;e.aGeri>~· 2_1:~llML'lelasoc.right~clo:'w :-,: 2[~'LllfU1E1asoc,r1ght:;ldli:b6.."",~i-·_! :1 ["lcmm fu:ed, ~ft:sideb~- "( I-m-, .. -.,_-·--d-'··~--·--··t -- _. __ . __ ._-_._- -]: lCDh1mfured,left-sid~i!lr, MIIW!ln i 2m.U-m~ed.rightsid~<ir i 1 wlu'M fu.:e-d. ri¢lt ~ .. r, he ... der a "2 -coJwrrn l1~trjcl. ~~ :s.':6.!bar :2 cclcrm -hybrid, lefl ~·Ceba~ r header a 1 coll)l"l"Jn h~. I~~t:;.idebar 2CDlumnh)'bid, ri;ntsidebE", heeder 2col;.1I1'Il"d'qid. t!:ft siclEb.:ir :l'coliJmnllCjl.td,j"ft_sJtleba;r,~an 2roVmI4uid,fighI5icl~r :~·i

~.'~:o;;._;_2i~'~} 2.. __ l

~ Blank TempI&e

Elrendezes

letrehozas

4.1. abra

A New Document parbeszedablahban meghatarozhatjuh, hogy milyen tipusu doleumentumot szeretnenle letrehozni

Fajlok mentese

Nem art, ha a weboldalakat rogton a letrehozas utan rnentjuk, illetve elnevezzuk,

A kepek, filmek hivatkozasok es egyeb objekturnok beszurasahoz eloszor egy weboldalra van szukseg. Ne feledjuk, hogy a fajlokat abba a konyvtarba kell rnentenunk, amelyet korabban gyokerkent hataroztunk meg, a 3. Ieckeben targyalt m6don. A weboldalak mentesehez hajtsuk vege az alabbi lepeseket:

1. Valasszuk a File, Save (Fajl, Mentes) menupontot.

2. Lepjunk be a megfelel6 konyvtarba ~ a meghatarozott webhely gyokerkonyvtaraba vagy annak egy alkonyvtaraba.

3. Adjunk meg egy . htm vagy . html kiterjesztessel ellatott fajlnevet (peldaul saj at f aj 1 . h t.m),

4. Kattintsunk a Save gombra.

A . htm es a . html kiterjesztes egyenerteku. A . html kiterjesztes hagyomanyosan nepszenfbb volt a Mac vagy UNIX. platformon dolgoz6 fejleszt6k koreben, mert ezek az operacios rendszerek a kezdetektol fogva tamogattak a hosszabb fajlkiterieszteseket. A . htm kiterjesztes a regebbi Windows-valtozatok kiterjesztesekre vonatkoz6 harornka-

74 ! I. resz • Bevezetes a Dreamweaver vilagaba

rakteres korlatozasat tukrozte, A Windows mar nem korlatozza a fajlkiterjesztesekben szerep16 karakterek szamat, a szerz6 megis a . htm kiterjesztest hasznalja, egyszeruen a rovidsege miatt.

A tajlok helyes elnevezasavel a problamak elkerUlhetok

A fiijl· es kcnvvtarnevekben szerepld sz6ki:izi:ik, lrasjelek es egyeb kllldnlepes karakterek gondot okozhatnak. Sz6ki:iz helyett alahuzas karaktert vagy kotdjelet hasznaliunk a nevekben. Az i:isszes fajlnevnek betUkb61, szamokbol as alahuzasokb61

kell allnia, A fajlnevek els6 karaktere soha nem lehet szam, mert a JavaScript

nem kspas feldolgozni a szamrnal kezd6d6 neveket. Ha jelenleg nem is hasznalunk JavaScriptet, nem biztos, hogy kesobb sem fogunk, a fajlok atnevezese pedig sok iddba telne.

A kiszolgal6k megkUlonboztethetik a kis- as nagybetuket

A fajlnevekben a legti:ibb kiszolgal6 megkUli:inbi:izteti a kis- es nagybetliket. A UNIX operacios rendszer killi:inboz6 valtozatait futtat6 kiszolqaldk lehet6ve teszik, hogy ugyanabban a konvvtarban ku tya. gif, Ku tya. gi f es KUTYA. gi f nevu fajl is

szarapalisn, a kis- es naqvbenlk alterese miatt. A Microsoft operacios rendszerek - amilyen a Windows is - nem benlallas-erzekenvek, tehat el6fordulhat, hogy

a Windowsban val6 fejlesztes soran a hivatkozasok toksletesen rruikodnek, azutan pedig egy betuallas-erzekenv kiszolqalora felti:iltve hibasak lesznek.

SZQveg hozzaadasa weboldalakhoz

Ahhoz, hogy szoveget adjunk az iment letrehozott ilj weboldalhoz, egyszenien kezdjunk gepelni a dokumentumablakban. A lap tetejen gepeljunk be egy cirnsorkent szolgalo szoveget, nyomjuk le az ENTER billentyut, majd Irjunk be nehany mondatot.

Ha a weboldal letrehozasa kozben alkotjuk meg a szoveget, ez a legjobb m6dszer annak hozzaadasara. Ha azonban a szoveg mar letezik valahol, peldaul egy Microsoft Word dokurnentumban, e-mailben vagy mas formarumu szovegfajlban, akkor erdemes tanulmanyozni a kovetkezo reszt, amely a szovegek masolasarol es a Dreamweaverbe torteno beilleszteserol 5z61.

A helyesfras as a nyelvtan fontos!

A szerz6 szereti valamilyen nagyobb szoveqszerkeszto alkalrnazasban, peldaul

a Microsoft Wordben letrehozni a weboldalak szoveqet, mert ezekben automatikus helvesiras- es nyelvtani ellenorzes all rendelkezesre, Ezutan a sziiveget lernasolva

a Dreamweaver weboldalaiba lehet illeszteni. Ierrneszetesen a Dreamweaver helvesfras-ellenorzdjet is hasznalhatiuk, de a Dreamweaverben nines nyelvtani ellen6rzes.

4. ora • Szovegkezelas: szOveg as listak f' 75

SZQveg masolasa as beillesztese fajlokb61

Gyakran szovegszerkesztovel keszitett dokumentumban tarolt szoveget kell egy weboldalra helyezni. Konnyen megtehetiuk, hogy egy masik alkalmazasbol, peldaul

a Microsoft Wordb61 vagy akar a Microsoft Excel tablazatkezelo alkalrnazasbol rnasoljuk at a szoveget a Dreamweaverbe. A Dreamweaver ketfelekeppen kepes beilleszteni a szoveget: formazassal vagy anelkul. Ha egy szovegszerkesztc vagy mas programb61 szeretnenk szoveget rnasolni, majd beilleszteni azt.ikovessuk az alabbi lepeseket:

1. Nyissunk meg egy Word dokumentumot (. doc) vagy mas szovegszerkesztovel keszitett dokumentumot,

2. jeloljunk ki legalabb nehany bekezdest,

3. Az Edit, Copy (Szerkesztes, Masolas) meniipont vagy a megfelel6 billentyuparanes (Wmdowson CTRL+C, Macen COMMAND+C) alkalmazasaval masoljuk le

a szoveget.

4. Lepjunk be a Dreamweaverbe, es helyezzuk a beszurasi pontot oda, ahova a szoveget be szeretnenk illeszteni,

5. Az Edit, Paste (Szerkesztes, Beillesztes) meniipont vagy annak billentyCiparancsa (Windowson CTRL+V, Macen COMMA.,"{D+V) segitsegevel illesszuk be a szoveget. A szoveg beilleszt6dik a Dreamweaverbe, es meg6rzi a forrnazasat, a benitipusokkal, a bekezdesekkel, a szinekkel es az egyeb jellemz6kkel egyurt.

Ezen sorok ir6ja gyakran szeretne ujraforrnazni az oldalt, ezert altalaban formazas nelkul vegzi a Dreamweaverbe torteno beillesztest. A kovetkezo lepesek megmutatjak, hogyan kell csak szerkezeti forrnazassal (bekezdesekkel, felsorolasokkal, tablazatokkal), de benfformazas (felkover, szmes szoveg, benlmeret) nelkul egy szovegszerkeszto programb6l szoveget masolni es beilleszteni:

1. Nyissunk meg egy Word dokumentumot (. doc) vagy mas szovegszerkesztovel keszitett dokumentumot.

2. jeloljunk ki legalabb nehany bekezdest.

3. Az Edit, Copy menupont vagy a megfelel6 billentyCiparancs (Windowson CTRL+C, Macen COMMAND+C) alkalmazasaval rnasoljuk Ie a szoveget.

4. Lepjiink be a Dreamweaverbe, es helyezzuk a beszurasi pontot oda, ahova a szoveget be szeretnenk illeszteni.

5. Valasszuk az Edit, Paste Special (Szerkesztes, Iranyitott beillesztes) menuparancsot.

6. A 4.2. abran szernleltetett m6don jeloljuk ki a Text with Structure (Paragraphs, Lists, Tables, Etc.) - Szerkesztett szoveg (bekezdesek, listak, tablazatok es egyebek) - lehetoseget.

76 [I. resz • Bevezetes a Dreamweaver vilagaba

"<GLJ ~

" E!!O\>"" I

,,~- .. - ."' , '-;--"_" c"'.=" "~~~~

. :::;.]~.;0.~'trii: ::i~~<or.i-'··

·:'~'~-~\ilDrrl~~':·'

~a:stePreferena!:i.-+. I·:'·; ., ....

4.2. abra

A Paste Special parbeszedablalsban hioalaszthatjule, hog)' pontosan milyen formazasi tulajdonsagokat szcretncnle a szoueggel egyutt a Dreamweaverbe illeszteni

Ha valakinek van kedvenc m6dszere a mas alkalmazasokbol torteno szovegbeillesztesre, a Dreamweaverben alapertelmezesekent beallithatja. Ezutan egyszenien a Paste parancsot vagy a szerzo altai kedvelt billentyliparancsot (Windowson CTRL+v, Macen COMMA,"JD+V) hasznalva vegezhetiuk a beillesztest a kedvenc rnodszerunkkel. Termeszetesen ha egyedi beillesztesre van szukseg, ezutan is elohfvhatjuk a Paste Special parancsot. Az alapertelmezett Paste parancsot a Dreamweaver Preferences (Edit, Preferences) ablakanak a 4.3. abran lathato Copy/Paste (Masolas/Beillesztes) kategoriajaban valtoztathatjuk meg. Ugyeljunk arra, hogy a Clean Up Word Paragraph Spacing (Word-bekezdesek szokozeinek eltavolitasa) lehetoseget is bejeloljuk, igy nem kapunk folosleges szokozoket a bekezdesek kozott. Ez a remek szolgaltatas lehetove teszi, hogy ne kelljen sajit kezuleg torolnunk a szuksegtelen szokozoket,

MasoJas/beiliesztes

A Word-bekezdesek szokozeinek eltavolitasa

Edit peste from ofr'ff<:;Jp1i[.6~intrtdE.Sign 1'iE:v. pestes:

CSSStyles

;:;~:;:;irbt~~s

.",,~

~Qklili~ Irr.~t4:!Eh::lllent:; la,,"tlutlo1l):::Ie

Npli Deraanent Previe- .... "nBn),H:.er sse

Status ear Valldat{)f

O!EXtDdy 0[eXt~~~~~:-;;;tL)-'

OTextMm,;tn..Jdurep"us:~mrmattir-..g{b:lld,jffili[) OTeX'!: \"';!hstructurE-p~fi1I fi:!rrnOitting (bold, i'li:.IIC, lity!ES)

4.3. abra

A Copy/Paste beallitasole segitsegevel megoaltosaathatjule azt as: alapertelmezett formazast, amit a Dreamueaoer a mas allealmaadsohbol torteno tartalombeillesztes soran hasznal

4. 6ra • Szovegkezeles: sziiveg es listiik ~ 77

SZQvegformazas alkalmazasa

A tulajdonsagvizsgalo (Property inspector) adokurnentumablak alatt kozvetlenul elhelyezked6 tabla, amelyen rnindenre kiterjed6en megviltoztathatjuk a weboldalakon taIalhato objektumok tulajdonsagait, A tulajdonsagvizsgalo megjeleniteset a Window, Properties (Ablak, Tulajdonsagok) menuparanccsal kapcsolhatjuk be es ki. A Dreamweaverben tobbek kozott a tulajdonsagvizsgalo Format (Form.izas) lenyilo listajanak segitsegevel vegezhenink szovegformazast. Negy alapvet6 formazasi lehetoseg kozul valasztha tunk:

• None (Nines): Ez a beallitas eltavolitja az osszes, a kijelolt szovegre jelenleg alkalmazott forrnazast,

• Paragraph (Beleezdes): Bekezdes cimkeket «p></p» alkalrnaz a kijelolesre, ami ket kocsivissza karaktert szur be a kijeloles mage.

• Heading 1-6 (Cimsor 1-6): Cirnsor cimkeket alkalmaz a kijelolesre, A Heading 1 a Iegnagyobb, a Heading 6 pedig a legkisebb cimsor. A cimsor cimkek alkalmazasakor az adott sorban minden cimsor merenfre valtozik.

• Preformatted (Blare formdzott). Ez a beallitas rogzitett szelessegu vagy egyenletes benfkozu betutipussal (a Iegtobb rendszerben 10 pontos Courierrel) jeleniti meg a szoveget, arnely az irogepszovegre ernlekeztet. Ezt a forrnazasi Iehetoseget valoszinuleg nem alkalmazzuk tul gyakran.

jeloljuk ki a weboldal fels6 cirnsorat, majd a 4.4. abran latott m6don alkalmazzunk Heading 1 forrnazast. A weblapok letrehozasa soran allandoan kulonbozo cirnsor- es bekezdesformatumokat alkalmazunk majd, Ezek a formazasi beallitasok H'I'Ml-cimkek koze helyezik a kijelolt szoveger. A Heading 1 formatum peldaul a kijelolt szoveg ele

a -ch l » cirnket, a kijeloles vegere pedig a </hl> zaro cfrnket illeszti,

Szoveqtorrnatumok

None

Peraere

T ulejdonsaqvizsqalo

4.4. abra

A tulajdonsagoizsgdlobart taldlhato Format lcnyilo lista cimsor-, behezdes- (is el5re formazott formazdst alealmaz a szooegre

78 ! I. resz • Bevezetes a Dreamweaver vilagaba

Bekezdes es sortores cimkek

Fontes megerteni a bekezdes C<p» es a sortores C<br» cimkek kozotti kiilonbseget.

A bekezdes cimkek egy szovegtombot fognak kozre, es ket kocsivissza karaktert illesztenek a tomb vegere, Az ENTER vagy a RETURN billentyCf lenyomasaval hozhatunk letre uj bekezdest, A bekezdes cimkeket ugy kepzelhetjuk el, mintha tarolot hoznanak letre a szovegtornb szarnara. Ez a tarolo egy szoveget tartalmaz6 szogletes keret, A 6. leckeben rnegtanuljuk, hogyan kell rnodositani a tarolot a CSS-ek segitsegevel.

A kevesbe gyakran hasznalt sortores cirnke egyetlen kocsivissza karaktert szur be

a szovegbe. A SmFT+ENTER billentyuparanccsal vagy a beszuro say Text (Szoveg) kateg6- riajaban talalhato Characters CKarakterek) lenyilo Iista Line Break (Sortores) parancsat valasztva illeszthetunk sortorest a weboldalakba. A sortores cimke a bekezdessel ellentetben nem hoz letre tarolot, Ez a cimke arra a legalkalmasabb, hogy uj sort hozzunk letre egy bekezdesben, peldaul arnikor egy cimet kulon sorba szeretnenk tordelni.

Ha a SHIFT+ENTER ketszeri Ienyornasaval ket sortorest illesztunk be ahelyett, hogy

az ENTER billentyuvel bekezdest hoznank letre, latszolag ugyanazt az eredmenyt kapjuk a weboldalon. Mivel azonban nem keszitettunk bekezdestarolot, az osszes formazas

a teljes tarolora ervenyesul majd. Ez akkor valik fontosabba, ha majd a weboldal kUlbnbaz6 reszeit kulonbozokeppen szeretnenk forrnazni.

Oldaltulajdonsagok beaUftasa

Meghatarozhatunk altalanos tulajdonsagokat, peldaul az oldalon talalhato osszes szoveg alapertelmezett betutipusat es benirneretet is. Az oldal cimet is mindig hozza kell adni a weboldalhoz. Az altalanos oldaltulajdonsagokat es az oldalcirnet egyarant beallithatjuk a Page Properties (Oldaltulajdonsagok) parbeszedablakban. Eloszor a Modify, Page Properties (Modositas, Oldaltulajdonsagok) menuparanccsal nyissuk meg

a parbeszedablakot.

A 4.5. abran lathato Page Properties parbeszedablak at tulajdonsagkategoriat sorol fel

a bal oldali oszlopban: Appearance (Megjelenes), Links (Hivatkozisok), Headings (Cirnsorok), Title/Encoding (Cirn/kodolas) es Tracing Image (Segedkep), A kovetkezokben az Appearance, a Headings es a Title/Encoding kateg6ria tulajdonsagaival foglalkozunk, a Links kateg6ria beallitasait pedig az 5. leckeben targyaljuk. Egyszenfen kattintsunk valamelyik kategoriara, ha m6dositani szeretnenk annak tulajdonsagbeallitasait,

4. ora .. Szovegkezeles: szoveg as listak t 79

Kateg6riak

T ulaidonsagok

4.5. abra

A Page Properties parbeseedablakiban a teijes uieboldal tulajdonsdgait beallithatjul:

&~ground bnaQe: [~_=~,-~~~~~.~~==~~~~~==~:~~] I 8r~wse ...

R~t: t . .-,~,~

~-~-'~-~-o-----,

~ft{!!~rgin~ ~_~ J;.~:.~_.~::!_i ElJght mar!!in:

,~~---.-,~----~

TOi2mar-tfln: 0 ... ~lpixel5 ~~ 8Q.ttom margin:

OK II cancel

Apply gomb

Az oldal atfog6 megjelenesenek beallftasa

A Page Properties parbeszedablak Appearance kategoriajaban szerep16 beallitasokkal hatarozzuk meg a teljes oldal betutipusat, benimeretet es szinet, valarnint egyeb beallitasait, A weboldalak szovege peldaul alapesetben fekete. A weblapok alapertelmezett szovegszinet a Page Propertie-s megfelelo beallitasaval rnodosithatjuk.

Az oldal altalanos bet(jtfpusanak as bet(jmeretenek beallftasa

A Page Properties parbeszedablak bal oldalan talilhat6 kategorianevre kattintva valasszuk ki az Appearance kategoriat. Itt megadhatjuk a teljes oldal alapertelmezett benlttpusat, valamint az alapertelmezett szovegmeretet es -szint, Az itt meghatirozott beallitasokar barrnelyik heIyi szovegbeallitas felulbiralhatja, peldaul azok, amelyeket

a lecke egy kesobbi reszeben adunk meg. Az oldal bettltulajdonsagainak beallitasahoz kovessuk az alabbi Iepeseket:

1. A Page Properties parbeszedablak Page Font (Oldalbetrftipus) lenyil6 listajabol valasszuk ki a kivant betucsaladot,

Z. Azt is rnegszabhatjuk, bogy az alapertelmezett szovegstflus a felkover (bold), a dolt (italic) vagy mindkett6legyen. Egyik beallitas sem ajanlottl

3. A Size (Meret) lenyilo listaban jeloljuk ki a betiimeretet. Ha szarnrnal megadott betumeretet valasztunk, rnertekegyseget, - peldaul pont (point) vagy keppont (pixel) - is meg kell hatarozni,

80 ~ J. resz • Bevezetes a Dreamweaver vilagaba

4. Az eddig vegzett benitfpus-rnodositasok rnegtekintesehez kattintsunk a Page Properties parbeszedablak aljan talalhato Apply (Alkalmazas) gombra. Lehet, hogy it kell helyezni a parbeszedablakot, hogy ne takarja el a larvanyt. Az Apply gomb segitsegevel a Page-properties parbeszedablak bezarasa nelkul lathatjuk

a valtozasokat,

Pont helyett em

Szarnos webfejlesztonel hevett gyakorlat, hogy a betumeret rneqhatarozasahoz viszonylagos mertekegyseget, peldaul emet vagy szazalekot hasznal, Az. em mertekegyseg az alapertelrnezett betumeretu nagy "M" bani rnaqassaqat veszi alapul: 1

em megegyezik az M rneretevel, alepertelmazett benlrneret mellett. A pont a nyomtatas szedesensk tervezesere szolqal, a sz6veg kepernvdn val6 megjelenftesenel azonban gyakran megj6solhatatlan az eredmenv. Az em es a hozza hasonl6 viszonylagos mertekeqvseqek hasznalata azert el6ny6s, mert fgy tiszteletben tartjuk a felhasznalo alta! valasztott benlt Ha valaki nagyobb beuimeretet allit be a b6ngesz6- ben, mert peldaul nehezen lat, akkor a benlmerst ehhez a beallitashoz viszonvul.

Ha egy cfmsor rneretet 1,25 emben hatarozzuk meg, a sz6veg 25%-kal nagyobb

lesz a felhasznalo altai beallitott alepertelrnezett benlrneretnel.

Az altalanos szovegszin beallitasa

A Dreamweaver tobb pont jan is megvaltoztathatjuk az objektumok vagy a szoveg szfnet, A HTML-ben a szinek rneghatarozasa a tizenhatos szamrendszerben tortenik, ha azonban nem isrnerjiik az alkalmazni kivant szin hexadecimalis megfelel6jet, rendelkezesunkre all a Dreamweaver szinvalasztoja. A szinvalaszto eleresehez a 4.6. abran Iathato szinvalaszto mez6re kell kattintani, aminek hatasara megjelenik a Dreamweaver szfnpalettaja.

Tobb Iehetoseget is kipr6balhatunk, amelyekkel a szinvalasztot alkalmazva kivalaszthatjuk a kivant szint:

~ A cseppent6vel kattintva valasszuk a rendelkezesre allo szintarak (Swatch) valamelyiket.

• Az alapbeallitas szerint a Color Cubes (Szinkockik) paletta jelenik meg. at tovabbi paletta kozul valaszthatunk: Color Cubes (Szinkockak), Continuous Tone (Folytonos tonus), Windows OS (Windows rendszer), Mac OS (Mac rendszer) es Grayscale (Szurkearnyalatos).

• A cseppent6 segitsegevel masoljunk Ie egy tetsz61eges szint a kepernycrol, egyszeruen a cseppent6vel az adott teruletre kattintva. A kepernyon lathato barmelyik szint lemasolhatjuk, nem csak a Dreamweaverben szerepl6 szineket, Probaljunk a beszuro say valamelyik ikonjarol szint vilasztani. Igazitsuk ugy

a Dreamweavert, hogy a rabbi ablakot is lathassuk, majd a cseppent6veI kattintsunk a szinekre.

4. ora • Szi:ivegkezelas: szi:iveg as listak t 81

• Ahhoz, hogy a 4.7. abran bemutatott m6don egyedi szint hozzunk letre, kattintsunk a System Color Picker (Rendszerszinvalaszto) gombra. Ekkor megnyilik

a rendszerszfnvalaszto, ahol valaszthatjuk valamelyik alapszint, vagy a szmskalara kattintva sajat szint keverhetunk. A'szin alkalrnazasahoz kattintsunk az Add to Custom Colors (Hozzaadas az egyedi szinekhez) gombra, majd az OK-fa.

Azalapertelrnezett szln g-ombja

Aktiv paletta

Macintosh-randszerszlnvalasztn

~~

!o..'~:i

, c_ ---- ------- -- •..•••...•••.•••..• -- ••. - •. ~ I

A szfnvalasztc

OK

Windows-rendszerszfnvalaszt6

l~lr GT ~ r.~ ii. Rrr:;:rrelllll'!!i!iliil .erR ••••

• • ••••• •••••••• ••••• r.e

Qustom colOI1i:-

Drrrrrrr rrrrrccr

- HU!!:~

a~:~~J.:

ColonSQlid usn: 122. ,

- _ ~~-.-.-.-.-i

"_'_''':""1

B.d:[~

c;,e0ri: '.239.1 BiQe:'~

4.6. iibra

A Dreamueauer szinpalettajdnale megnyitdsahoz kattintsunk

a szinviilaszt6ra

4.7. iibra

A System Color Pickel' lehetove teszi, hogy safdt, egyedi szineket kevetjilnk Windows

(jobb oldalon) vagy Macintosh (bal oldalon) szamit6gepen

82 ! I, resz • Bevezetes a Oreamweaver vilagaba

A szfriadatokat kozvetlenul a tulajdonsagvizsgalo szinmezojeben is megadhatjuk:

• A HTML-ben a szineket harem hexadecimalis szam kepviseli, amelyek e16tt kett6skereszt (#) all. A vilagoskek szin hexadecimalis RGB (red, green, bluepiros, zold, kek) megfelel6je peldaul #0099FF, ahol az R ertek 00, a G ertek 99, a B ertek pedig FF. Ha isrnerjuk az adott szin hexadecimalis erteket, egyszenien begepelhetjuk azt.

• A Iegtobb bongeszo a hexadecirnalis ertekek mellett a hagyornanyos szinneveket is rnegjeleniti. Az #FFOOOO ertek helyett peldaul a red (piros) sz6t is megadhatjuk.

Ha el szeretnenk tavolitani a jelenlegi szint, anelkiil, hogy uj szint valasztanank, kattintsunk a szinvalaszto Default Color (Alapertelrnezett szin) gornbjara.

A szi'nertekek azonosftasara szolgal6 eszk6z6k

A Windows-felhaszniil6k kiinnyen azonosfthatiak a szfnek hexadecimiilis ertekeit, ha leti:iltik a szabadon terjesrthet6 ColorCop programot, amely a prall. net/colorcop cfmen erhet6 el. A szerz6 mindig ezt az alkalmaziist hasznalja, A Mac OS 10.4 (Tiger)

rendszerben az Applications (Alkalmazasok) Utilities (Eszkiiziik) rnappaban taliilhat6 DigitalColor Meter eszkiiz segitsegevel kaphatjuk meg a kepernvon lathato RGB ertekek hexadeclmalis megfelelajet.

Hatterszi'n as hattarkap beallftasa a weboldalakon

A Page Properties parbeszedablak Appearance kategoriajaban a relies weboldal hatterszinet beallithatjuk. Ha peldaul feherre szeretnenk allitani az olda! hatterszinet,

a Background Color (Hatterszin) szovegmezobe gepelhetjuk annak hexadecimalis szinkodjat (#FFFFFF) vagy a whi te (feher) szot, illetve a szinvalasztot is hasznalhatjuk. Terrneszetesen barrnilyen szint valaszthatunk hatterszinkent, de ugyeljunk arra, hogya hatterszin es a szovegszin osszhatasa ne tegye nehezeo olvashatova a weblapot.

Ha sotet hatterszint alkalmazunk, elute, vilagos szovegszint kell hasznalni, hogy

a Iatogatok konnyen el tudjak olvasni a szoveget,

Az emberek 8-10 szazaleka szfnvak!

Ellen6rizni kell, hogy az altalunk alkalmazott szinosszeellitas a nem keves szinvak szamara is lathato-e. A colorfil t.e r , wickline. org / cfmen elerhetd Colorblind Web Page Filter (Weblapszur6 szinvakoknak) segftsegevel ellenorizhetiuk

az osszeallltast, A szura olvan valtozatban jeleniti meg a weboldalt, ahogy azt egv szinvak ember latna.

A weboldalakon hatterkepet is beallithatunk, amely (fugg6leges es vizszintes iranyban) mozaik elrendezesben jelenik meg a weboldalon. Ahhoz, hogy a weblap hattere j61 mutasson, olyan kepet kell talalni vagy letrehozni, amely kifejezetten weboldalhatternek