Använda Dreamweaver
™
macromedia
®
Varumärken
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind och Xtra är varumärken som tillhör Macromedia, Inc. och
kan vara registrerade i USA eller i andra jurisdiktioner även i andra länder. Andra produktnamn, logotyper, modeller, titlar, ord eller fraser
som nämns i denna publikation kan vara varumärken, servicemärken eller varunamn som tillhör Macromedia, Inc. eller andra enheter
och kan vara registrerade i vissa jurisdiktioner även i andra länder.
Denna handbok innehåller länkar till tredjepartwebbplatser som inte styrs av Macromedia. Macromedia ansvarar inte för innehållet på
länkade platser. Om du besöker en tredjepartwebbplats som nämns i handboken gör du det på egen risk. Macromedia tillhandahåller
dessa länkar för att underlätta men det innebär inte att Macromedia ansvarar för innehållet på dessa tredjepartwebbplatser.
Apples ansvarsbegränsning
APPLE COMPUTER, INC. GER INGA GARANTIER, VARE SIG UTTRYCKLIGA ELLER UNDERFÖRSTÅDDA, MED AVSEENDE PÅ DET MEDFÖLJANDE PROGRAMPAKETET, DESS SÄLJBARHET ELLER LÄMPLIGHET FÖR NÅGOT SÄRSKILT SYFTE. UTESLUTANDET AV UNDERFÖRSTÅDDA GARANTIER TILLÅTS INTE I VISSA STATER.
OVANSTÅENDE UNDANTAG GÄLLER DÄRFÖR KANSKE INTE DIG. GARANTIN FÖRSER DIG MED VISSA JURIDISKA
RÄTTIGHETER. DET KAN FINNAS ANDRA RÄTTIGHETER SOM KAN VARIERA FRÅN STAT TILL STAT.
Copyright © 2000 Macromedia, Inc. Med ensamrätt. Handboken får inte kopieras, fotokopieras, reproduceras, översättas eller
publiceras på något elektroniskt eller maskinläsbart sätt helt eller i delar utan ett skriftligt tillstånd från Macromedia, Inc.
Artikelnummer: ZDW40M100SW
Tack till
Projekthantering: Sheila McGinn
Texter: Kim Diezel, Valerie Hanscom, Jed Hartman och Emily Ricketts
Redigering: Anne Szabla och Lisa Stanziano
Produktionshantering: John ”Zippy” Lehnus
Multimediadesign och multimediaproduktion: Aaron Begley och Noah Zilberberg
Tryckproduktion: Chris Basmajian, Paul Benkman, Caroline Branch och Rebecca Godbois
Webbredigering och webbproduktion: Jane Flint DeKoven och Jeff Harmon
Lokaliseringschef: Bonnie Loo
Ett särskilt tack till Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin Conradi,
Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John Koch,
David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, Peter Baeckstrom, Erik Bergman, Luciano Arruda,
Raymond Lim, Scott Richards, Yoko Vogt, Peter von dem Hagen och Dreamweavers ingenjörs- och kvalitetskontrollgrupper.
Första utgåvan: November 2000
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103, USA
2
INNEHÅLL
INTRODUKTION
Komma igång . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Systemkrav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Installera Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Börja arbeta med Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Webbutvecklingsprocessen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Var du ska starta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Typografiska konventioner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Nyheter i Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
HTML- och webbteknikresurser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Hjälpmedel och Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
KAPITEL 1
Dreamweavers självstudier. . . . . . . . . . . . . . . . . . . . . . 27
En genomgång av Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Arbetsområdet i Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Ordna platsstrukturen för självstudierna . . . . . . . . . . . . . . . . . . . . . . . 31
Definiera en lokal plats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Skapa platsens hemsida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Utforma en sida i layoutvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Lägga till innehåll på sidan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Arbeta i standardvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Använda resurspanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Infoga Flash-objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Skapa en mall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Kontrollera webbplatsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Nästa steg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3
KAPITEL 2
Grunderna i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 67
Arbetsområdet i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Olika vyer i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Arbeta med färger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Webbsäkra färger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84
Ange inställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84
Använda Dreamweaver med andra program . . . . . . . . . . . . . . . . . . . . .86
Grunderna i att anpassa Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . .86
KAPITEL 3
Planera och konfigurera webbplatsen . . . . . . . . . . . 91
Planera och utforma webbplatsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Använda Dreamweaver för att göra en ny plats . . . . . . . . . . . . . . . . . . .97
Redigera en befintlig webbplats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Redigera en fjärrplats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Ta bort en plats från listan med platser . . . . . . . . . . . . . . . . . . . . . . . .101
KAPITEL 4
Platshantering och samarbete. . . . . . . . . . . . . . . . . . 103
Platsfönstret . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
Visa och öppna filer i platsfönstret . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Platskartan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Använda platskartan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Skapa en fjärrplats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Integrering av WebDAV och SourceSafe . . . . . . . . . . . . . . . . . . . . . . .123
Felsökning av inställningarna till fjärrplatsen. . . . . . . . . . . . . . . . . . . .126
Använda incheckning/utcheckning . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Förbättra arbetsflödet med hjälp av rapporter . . . . . . . . . . . . . . . . . . .136
Hämta och skicka filer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138
Synkronisera filerna på den lokala platsen och på fjärrplatsen . . . . . . .141
KAPITEL 5
Skapa ett dokument. . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Skapa, öppna och spara HTML-dokument . . . . . . . . . . . . . . . . . . . . .144
Ange dokumentegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146
Markera element i dokumentfönstret . . . . . . . . . . . . . . . . . . . . . . . . .148
Använda synliga hjälpmedel i designarbetet. . . . . . . . . . . . . . . . . . . . .150
Visa och redigera HEAD-innehåll . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Automatisera uppgifter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
4
Innehåll
KAPITEL 6
Utforma sidlayouten . . . . . . . . . . . . . . . . . . . . . . . . . . . .161
Layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
Rita layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163
Flytta och ändra storlek på layoutceller och tabeller. . . . . . . . . . . . . . .168
Formatera layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . .170
Ange layoutbredd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172
Layoutvyinställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175
KAPITEL 7
Använda tabeller för innehåll . . . . . . . . . . . . . . . . . . . 177
Infoga en tabell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
Markera tabellelement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181
Formatera tabeller och celler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183
Ändra storlek på tabeller och celler . . . . . . . . . . . . . . . . . . . . . . . . . . .188
Lägga till och ta bort rader och kolumner . . . . . . . . . . . . . . . . . . . . . .189
Kopiera och klistra in celler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Sortera tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
Exportera tabelldata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195
KAPITEL 8
Använda ramar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
När ska ramar användas? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Skapa rambaserade webbsidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Skapa ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Markera en ram eller ramuppsättning . . . . . . . . . . . . . . . . . . . . . . . . .203
Spara ram- och ramuppsättningsfiler . . . . . . . . . . . . . . . . . . . . . . . . . .205
Ram- och ramuppsättningsegenskaper . . . . . . . . . . . . . . . . . . . . . . . .206
Styra raminnehåll med länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
Hantera webbläsare som inte kan visa ramar . . . . . . . . . . . . . . . . . . . .213
Använda beteenden med ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
KAPITEL 9
Hantera och infoga resurser. . . . . . . . . . . . . . . . . . . . 215
Använda resurspanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
Använda favoritresurser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Innehåll
5
KAPITEL 10
Infoga och formatera text . . . . . . . . . . . . . . . . . . . . . .227
Infoga text och objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228
Skapa listor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232
Ange teckensnitt, stil, färg och justering . . . . . . . . . . . . . . . . . . . . . . .233
Formatera text med HTML-format. . . . . . . . . . . . . . . . . . . . . . . . . . .238
Använda CSS-formatmallar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243
Konvertera CSS-format till HTML-koder. . . . . . . . . . . . . . . . . . . . . .252
Kontrollera stavning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .254
Söka och ersätta text, koder och attribut . . . . . . . . . . . . . . . . . . . . . . .254
KAPITEL 11
Infoga bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Infoga en bild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264
Ange bildegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265
Skapa klickbara bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269
Använda en extern bildredigerare . . . . . . . . . . . . . . . . . . . . . . . . . . . .273
Använda beteenden på bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276
KAPITEL 12
Använda Dreamweaver och Fireworks
tillsammans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Montera Fireworks-filer i Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . .277
Starta Fireworks inifrån Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .282
Redigera Fireworks-filer som monterats i Dreamweaver. . . . . . . . . . . .284
Optimera bilder och animeringar från Fireworks som monterats i
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
Uppdatera Fireworks HTML som monterats i Dreamweaver . . . . . . .289
Skapa webbfotoalbum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289
KAPITEL 13
Infoga media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Infoga mediaobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
Starta en extern redigerare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294
Använda Design Notes med mediaobjekt . . . . . . . . . . . . . . . . . . . . . .296
Flash-innehåll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
Använda Flash-knappobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297
Använda Flash-textobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300
Ange egenskaper för Flash-objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . .301
Infoga Flash-filmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303
Infoga generatorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305
6
Innehåll
Shockwave-filmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305
Lägga till ljud på en sida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307
Infoga insticksprogram för Netscape Navigator . . . . . . . . . . . . . . . . . .309
Infoga en ActiveX-kontroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311
Infoga ett Java-miniprogram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313
Använda parametrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314
Använda beteenden för att kontrollera media . . . . . . . . . . . . . . . . . . .315
KAPITEL 14
Redigera HTML-kod i Dreamweaver . . . . . . . . . . . 317
Grundläggande HTML-koder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Infoga kommentarer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Använda referenspanelen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325
Använda kodvyn (eller kodkontrollen) . . . . . . . . . . . . . . . . . . . . . . . .326
Infoga skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330
Öppna och redigera icke-HTML-filer i Dreamweaver . . . . . . . . . . . . .333
Redigera en HTML-kod i designvyn. . . . . . . . . . . . . . . . . . . . . . . . . .333
Kodformatering – inställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338
Rensa HTML-källkod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .342
Rensa Microsoft Word-HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343
Använda externa HTML-redigerare . . . . . . . . . . . . . . . . . . . . . . . . . .345
KAPITEL 15
Länkar och navigering . . . . . . . . . . . . . . . . . . . . . . . . 349
Om dokumentplacering och sökvägar . . . . . . . . . . . . . . . . . . . . . . . . .350
Skapa länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354
Hantera länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361
Skapa hoppmenyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364
Skapa navigationsfält. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
Koppla beteenden till länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369
KAPITEL 16
Återanvända innehåll med mallar och bibliotek . . 371
Skapa mallar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .373
Definiera en malls ändringsbara regioner. . . . . . . . . . . . . . . . . . . . . . .377
Skapa dokument som är baserade på mallar. . . . . . . . . . . . . . . . . . . . .385
Uppdatera sidor som är baserade på en mall . . . . . . . . . . . . . . . . . . . .388
Exportera och importera XML-innehåll . . . . . . . . . . . . . . . . . . . . . . .389
Skapa, hantera och redigera biblioteksposter . . . . . . . . . . . . . . . . . . . .392
Använda Server-Side Includes (serverinstruktioner). . . . . . . . . . . . . . .399
Innehåll
7
KAPITEL 17
Använda dynamiska skikt . . . . . . . . . . . . . . . . . . . . . 403
Skikt och HTML-kod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404
Skapa skikt på sidan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .405
Hantera skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408
Ange skiktegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413
Ändra staplingsordning för skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . .416
Ändra skiktens synlighet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417
Använda tabeller och skikt för layout . . . . . . . . . . . . . . . . . . . . . . . . .418
Animera skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .421
Beteendeåtgärder som styr skikt och tidslinjer . . . . . . . . . . . . . . . . . . .430
KAPITEL 18
Använda beteenden . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Beteendepanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .434
Händelser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .434
Koppla ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437
Beteenden och text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439
Koppla ett beteende till en tidslinje . . . . . . . . . . . . . . . . . . . . . . . . . . .440
Ändra ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .440
Uppdatera ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441
Skapa nya åtgärder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441
Ladda ned och installera beteenden från tredjepart . . . . . . . . . . . . . . .441
Använda beteendeåtgärderna som ingår i Dreamweaver . . . . . . . . . . .442
KAPITEL 19
Felsöka JavaScript-kod . . . . . . . . . . . . . . . . . . . . . . 469
Köra felsökningsprogrammet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470
Söka efter och rätta till logiska fel . . . . . . . . . . . . . . . . . . . . . . . . . . . .472
8
Innehåll
KAPITEL 20
Skapa formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477
CGI-skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478
Formulärobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478
Skapa ett formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479
Formulärfält . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .481
Infoga kryssrutor och alternativknappar . . . . . . . . . . . . . . . . . . . . . . .486
Listor och menyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .488
Formulärknappar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .491
Formulärutformning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .492
Bearbeta formulär . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .494
Använda beteenden med formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . .495
KAPITEL 21
Testa och publicera en plats . . . . . . . . . . . . . . . . . . 497
Kontrollera webbläsarkompatibilitet . . . . . . . . . . . . . . . . . . . . . . . . . .498
Använda beteenden för att känna av webbläsare och insticksprogram . . . .499
Förhandsgranska i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .500
Kontrollera länkar på en sida eller plats . . . . . . . . . . . . . . . . . . . . . . . .502
Kontrollera nedladdningstid och storlek . . . . . . . . . . . . . . . . . . . . . . .505
Testa en plats med kommandot Rapporter . . . . . . . . . . . . . . . . . . . . .505
KAPITEL 22
Anpassa Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 509
Ändra standardfiltyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510
Ändra objektpanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511
Skapa ett enkelt objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512
Anpassa Dreamweaver-menyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .513
Anpassa utseendet på dialogrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . .524
Ändra standardinställd HTML-formatering . . . . . . . . . . . . . . . . . . . .525
Arbeta med webbläsarprofiler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .527
Utöka Dreamweaver: Grunderna. . . . . . . . . . . . . . . . . . . . . . . . . . . . .530
Anpassa tolkningen av tredjepartskoder. . . . . . . . . . . . . . . . . . . . . . . .532
Innehåll
9
BILAGA A
Kortkommandon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Arkiv-menyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539
Redigera-menyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540
Visningsalternativ för sidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540
Visa sidelement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .541
Kodredigering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .541
Redigera text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .542
Formatera text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543
Söka och ersätta text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543
Arbeta i tabeller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544
Arbeta med ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544
Arbeta med skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545
Arbeta med tidslinjer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545
Arbeta med bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Hantera hyperlänkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Förhandsgranska i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Felsökning i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Platshantering och FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547
Platskarta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548
Spela upp insticksprogram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548
Arbeta med mallar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549
Infoga objekt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549
Historiepanelen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549
Öppna och stänga paneler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550
Visa hjälp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550
Förteckning över kortkommandon . . . . . . . . . . . . . . . . . . . . . . . . . . .551
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
10
Innehåll
INTRODUKTION
Komma igång
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Macromedia Dreamweaver är en professionell HTML-redigerare som du
använder för att på ett visuellt och enkelt sätt skapa och hantera webbplatser och
webbsidor. Oavsett om du gillar att arbeta med HTML-koder eller föredrar att
arbeta i en visuell redigeringsmiljö, är det lätt att komma igång att arbeta med
Dreamweaver. Programmet innehåller många effektiva verktyg som gör det enkelt
att utforma webbsidor.
I Dreamweaver finns många kodningsverktyg och funktioner: En HTML-, CSSoch JavaScript-referens, ett JavaScript-felsökningsprogram och en kodredigerare
(Visa kod och Kodkontrollen) som du använder för att redigera JavaScriptdokument, XML-dokument och andra textdokument direkt i Dreamweaver. Med
Macromedias Roundtrip HTML-teknik importerar du HTML-dokument utan
att koden formateras om. Du kan dessutom låta Dreamweaver rensa och
formatera om HTML-kod när du vill.
Med de visuella redigeringsfunktionerna i Dreamweaver kan du också snabbt
lägga till design och funktionalitet på sidorna, utan att behöva skriva en enda rad
med kod. Du kan visa alla platselement och resurser och dra dem från en
lättanvänd panel direkt till ett dokument. Effektivisera utformningen genom att
skapa och redigera bilder i Macromedia Fireworks och sedan importera dem
direkt till Dreamweaver. Du kan också lägga till Flash-objekt som du skapar direkt
i Dreamweaver.
Du kan anpassa Dreamweaver helt efter dina egna önskemål. Du kan skapa egna
objekt och kommandon, ändra menyer och kortkommandon och till och med
utöka Dreamweaver med nya beteenden, egenskapskontroller och platsrapporter
genom att skriva JavaScript-kod.
11
Systemkrav
Du måste ha följande maskin- och programvara för att kunna köra Dreamweaver.
For Microsoft Windows:
• En Intel Pentium-processor eller likvärdig, 166 MHz eller snabbare, Windows
95, Windows 98, Windows 2000, Windows ME eller Windows NT (med
Server Pack 3)
•
•
•
•
Version 4.0 eller senare av Netscape Navigator eller Microsoft Internet Explorer
32 MB RAM-minne samt 110 MB hårddiskutrymme
En färgskärm med upplösningen 800 x 600 bildpunkter och 256 färger
En CD-ROM-enhet
För Macintosh:
•
•
•
•
En Power Macintosh, Mac OS 8.6 eller 9.x
32 MB RAM-minne samt 135 MB hårddiskutrymme
En färgskärm med upplösningen 800 x 600 bildpunkter och 256 färger
En CD-ROM-enhet
Installera Dreamweaver
Följ anvisningarna nedan när du vill installera Dreamweaver på antingen en
Windows- eller en Macintosh-dator.
Så här installerar du Dreamweaver:
1
Sätt i Dreamweaver CD-skivan i datorns CD-ROM-enhet.
2
Välj bland följande alternativ:
• I Windows väljer du Start > Kör. Klicka på Bläddra och markera filen
Dreamweaver 4 Installer.exe på CD-skivan. Klicka på OK i dialogrutan Kör så
startas installationen.
• På Macintosh dubbelklickar du på installationsikonen för Dreamweaver.
12
Introduktion
3
Följ anvisningarna på skärmen.
4
Om du uppmanas att starta om datorn gör du det.
Börja arbeta med Dreamweaver
I Macromedia Dreamweaver finns det många olika resurser som du kan använda
när du vill lära dig programmet snabbt och bli skicklig på att skapa egna
webbplatser och webbsidor. Dessa resurser utgörs av en tryckt handbok, hjälpsidor
(online), introduktionsfilmer, självstudier och interaktiva lektioner. Du hittar
också aktuella tips, tekniska dokument, exempel och information på webbplatsen
för Dreamweavers kundtjänst.
Börja med att visa introduktionsfilmerna (genomgång), för att få information om
funktionerna i Dreamweaver. Därefter kan det vara bra att göra självstudierna.
Efter det kan du pröva Dreamweaver-lektionerna för att få lära dig att utföra olika
arbetsmoment i Dreamweaver.
Introduktionsfilmer
Introduktionsfilmerna ger en animerad översikt över webbutformningen och
presenterar funktionerna i Dreamweaver.
Välj Hjäp > Genomgång av Dreamweaver och klicka på en av filmtitlarna. När
filmen är slut klickar du på knappen Hem, så visas listan över filmer och du kan
välja en annan film. Du kan titta på hela introduktionen eller hoppa framåt om du
endast vill visa vissa delar.
Självstudier
Självstudierna i Dreamweaver kan vara bäst att börja med om du vill ha praktisk
erfarenhet i hur du skapar webbsidor i Dreamweaver. I självstudierna får du skapa
en exempelwebbplats med några av de mest användbara och kraftfulla
funktionerna i Dreamweaver. Självstudierna finns både i hjälpen till Dreamweaver
och i boken Använda Dreamweaver. Du kan också hämta självstudierna på
Macromedias webbplats. Denna version av självstudierna kan du skriva ut.
Självstudierna innehåller exempelsidor och resurser (bilder och Macromedia
Flash-filer) som du kan använda när du börjar utforma en webbplats.
Lektioner i Dreamweaver
Dreamweaver levereras med en uppsättning interaktiva lektioner. Varje lektion
guidar dig igenom en viss uppgift och innefattar exempelsidor som innehåller alla
designelement och funktioner som krävs. Använd lektionerna som en steg-förstegguide med exempelsidorna eller som guide när du arbetar med egna sidor.
Välj Hjälp > Lektioner och välj ett avsnitt.
Komma igång
13
Dreamweaver Användarhandbok (tryckt bok)
Använda Dreamweaver är en tryckt version av hjälpen till Dreamweaver och
innehåller information om hur du använder kommandona och funktionerna i
Dreamweaver. Vissa referensämnen om programalternativ finns inte i den tryckta
boken. Mer information om dessa ämnen finns i hjälpen.
Om du har köpt den elektroniska programhämtningsversionen av Dreamweaver,
kan du hämta en utskrivbar version av Använda Dreamweaver från Dreamweavers
kundtjänstsida: http://www.macromedia.com/support/dreamweaver/
documentation.html.
Hjälp för Dreamweaver
I hjälpen för Dreamweaver finns utförlig information om alla funktioner i
Dreamweaver. Denna information är särskilt utformad för att användas online.
Enklast visar du hjälpen genom att använda Netscape Navigator 4.0 eller senare
eller Microsoft Internet Explorer 4.0 eller senare.
Dreamweavers hjälpsidor använder mycket JavaScript. Kontrollera att JavaScript
är aktiverat i webbläsaren. Om du tänker använda sökfunktionen måste Java vara
aktiverat också.
Hjälpen för Dreamweaver innehåller följande delar:
Innehållsförteckningen Använder
du om du vill visa all information ordnad efter
ämne. Klicka på posterna i den översta nivån om du vill visa undernivåerna.
Index Används
på precis samma sätt som ett tryckt index, när du vill söka efter
viktiga termer och hoppa till närliggande ämnen.
14
Introduktion
Sök Använder
du när du vill leta efter en teckensträng i hela textmassan. För att
kunna använda sökfunktionen måste du ha en 4.0-webbläsare med Java aktiverat.
Obs! När du klickar på Sök, kan ett Java-säkerhetsfönster komma att visas som frågar om
tillstånd att få läsa filer på hårddisken. Du måste tillåta detta om du vill använda
sökfunktionen. Miniprogrammet skriver ingenting på hårddisken eller läser i några filer
förutom hjälpsidorna för Dreamweaver.
• Om du vill söka efter en fras skriver du bara texten i textrutan.
• Om du vill söka efter filer som innehåller två nyckelord (exempelvis skikt och
format), avgränsar du söktermerna med ett plustecken (+).
Sammanhangsberoende hjälp En
hjälpknapp i dialogrutor eller ett frågetecken i
en kontroll, ett fönster eller i en panel som öppnar motsvarande hjälpavsnitt.
Klicka här om du vill öppna hjälpen.
Dreamweavers navigationsfält i hjälpen Klicka
på knapparna om du vill flytta
mellan ämnena. Med de högra och vänstra pilknapparna flyttar du till föregående
respektive nästa ämne i ett avsnitt (enligt ämnesordningen i
innehållsförteckningen).
Komma igång
15
Utöka Dreamweaver
Hjälpen för Utöka Dreamweaver innehåller information om API-erna
(Application Programming Interface) och Dreamweavers DOM (Document
Object Model) som gör att JavaScript- och C-utvecklare kan skapa objekt,
kommandon, egenskapskontroller, beteenden och översättare.
Dreamweavers kundtjänst
Webbplatsen Dreamweaver kundtjänst uppdateras regelbundet med den senaste
information om Dreamweaver, råd från expertanvändarna, exempel, tips,
uppdateringar och information om avancerade ämnen. Om du besöker
webbplatsen ofta får du de senaste nyheterna om Dreamweaver och information
om hur du får ut det mesta av programmet. Adressen är:
http://www.macromedia.com/support/dreamweaver/.
Dreamweavers diskussionsgrupp
Du kan diskutera tekniska frågor och dela praktiska tips med andra Dreamweaveranvändare genom att besöka Dreamweavers diskussionsgrupp. Information om
hur du får kontakt med diskussionsgruppen finns på Macromedias webbplats:
http://www.macromedia.com/software/dreamweaver/discussiongroup/.
Webbutvecklingsprocessen
Processen med att utveckla webbsidor startar med att du definierar webbplatsens
strategi eller mål. Sedan går du vidare till design (där du kommer fram till hur
sidan ska se ut och vilket intryck den ska ge). Därefter kommer produktions- eller
utvecklingsfasen (där webbplatsen byggs och sidorna kodas). Slutligen måste du
testa sidan för att se att den uppfyller de definierade målen. Sedan är det bara att
lägga ut sidan. Många utvecklare planerar också in periodiskt underhåll för att
vara säkra på att sidan förblir aktuell och funktionell.
Använda Dreamweaver är uppdelad i stora avsnitt som behandlar denna process –
planering, design, utveckling, testning, publicering och underhåll.
16
Introduktion
Platsplanering
Genom att från början organisera och planera platsen sparar du tid som du annars
skulle få lägga ner senare. Att organisera en webbsida innefattar mycket mer än att
bara ange var filerna ska vara. Du måste ofta undersöka vilka krav som gäller för
platsen, vilken typ av användare du vill ha och målet med webbplatsen. Dessutom
måste du tänka på tekniska krav, exempelvis användaråtkomst, vilka webbläsare
och insticksprogram som ska användas och begränsningar när det gäller hämtning
av filer.
När du har ordnat informationen och bestämt en användningsstruktur är det dags
att skapa själva webbplatsen.
• Kom fram till en strategi och vilka hänsyn du måste ta till användarna, när du
planerar webbplatsen. Se ”Planera och konfigurera webbplatsen” på sidan 91.
• Använd platskartan i Dreamweaver när du ställer in webbplatsens
organisationsstruktur. I platsfönstret kan du enkelt lägga till, ta bort och ändra
namn på filer och mappar och på så sätt ändra organisationen. Se
”Platshantering och samarbete” på sidan 103.
Om du arbetar i en webbutvecklingsgrupp kanske du också är intresserad av
följande avsnitt:
• Skapa system som förhindrar att gruppmedlemmar skriver över varandras filer.
Se ”Konfigurera systemet för in- och utcheckning” på sidan 127.
• Använd Design Notes för att kommunicera med gruppmedlemmar. Se ”Spara
filinformation i Design Notes” på sidan 130.
Utforma webbsidor
De flesta webbdesignprojekt börjar med en designskiss eller ett flödesschema som
utvecklas till exempelsidor. Använd Dreamweaver för att skapa exempelsidor som
du sedan utvecklar till en slutlig design. Exempelsidor innehåller vanligtvis
designlayout, platsnavigering, tekniska komponenter, teman och grafiska bilder
eller andra mediaelement.
• Skapa HTML-dokument i Dreamweaver och lägg snabbt och enkelt till sidtitel
och/eller bakgrundsfärg. Se ”Skapa ett dokument” på sidan 143.
• Med layoutläget och layoutverktygen i Dreamweaver utformar du snabbt
webbsidor genom att rita en sidstruktur och sedan ordna om den. Se ”Utforma
sidlayouten” på sidan 161.
• Med objektpanelen kan du snabbt och enkelt utforma och lägga till tabeller,
skapa ramdokument, utforma formulär och arbeta med skikt. Se ”Använda
tabeller för innehåll” på sidan 177, ”Använda ramar” på sidan 197, ”Använda
dynamiska skikt” på sidan 403 och ”Skapa formulär” på sidan 477.
Komma igång
17
Lägga till innehåll
Med Dreamweaver lägger du enkelt till olika slags innehåll på webbsidor. Lägg till
resurser och designelement, exempelvis text, bilder, färg, filmer, ljud och andra
typer av media.
• Med resurspanelen ordnar du enkelt resurserna på en webbplats. Du kan dra de
flesta resurser direkt från resurspanelen till ett Dreamweaver-dokument. Se
”Hantera och infoga resurser” på sidan 215.
• Skriv direkt i ett Dreamweaver-dokument eller importera text från andra
dokument och formatera sedan texten med egenskapskontrollen eller HTMLformatpanelen. Du kan också skapa egna CSS-formatmallar. Se ”Infoga och
formatera text” på sidan 227.
• Infoga bilder, bland annat överrullningsbilder, klickbara bilder och Fireworksskivade bilder. Använd justeringsverktygen för att placera bilderna på en sida.
Se ”Infoga bilder” på sidan 263 och ”Använda Dreamweaver och Fireworks
tillsammans” på sidan 277.
• Infoga andra typer av media på en webbsida, exempelvis filmer, ljud och
miniprogram i formaten Flash, Shockwave och QuickTime. Se ”Infoga media”
på sidan 293.
• Lägg till innehåll i kodredigeraren: Använd kodvyn eller kodkontrollen i
Dreamweaver när du vill skriva egen HTML- eller JavaScript-kod. Se ”Redigera
HTML-kod i Dreamweaver” på sidan 317.
• Med Dreamweaver kan du skapa standardlänkar för HTML, bland annat
ankarlänkar och e-postlänkar. Du kan också skapa grafiska navigeringssystem,
exempelvis hoppmenyer och navigationsfält. Se ”Länkar och navigering” på
sidan 349.
• Med mallarna och biblioteksfilerna i Dreamweaver kan du infoga
återanvändbart innehåll på webbplatsen. Du kan skapa egna sidor från mallen
och sedan lägga till eller ändra innehållet i de ändringsbara regionerna. Se
”Återanvända innehåll med mallar och bibliotek” på sidan 371.
Interaktivitet och animering
Många webbsidor är statiska och innehåller endast text och bilder. Med
Dreamweaver kan du skapa något mer än statiska sidor med hjälp av interaktivitet
och animeringar som fångar besökarens intresse. Ge besökarna feedback när de
flyttar runt och klickar, demonstrera begrepp eller validera formulärdata utan att
kontakta servern. Kort sagt; interaktivitet och animering gör att besökarna får se
och göra mer utan att behöva lämna sidan.
18
Introduktion
Du kan lägga till interaktivitet och animering på sidorna på olika sätt i
Dreamweaver:
• Använd tidslinjer när du vill skapa animeringar som inte kräver
insticksprogram, ActiveX-kontroller eller Java. Tidslinjer använder dynamisk
HTML-kod för att ändra placeringen av ett skikt eller källfilen för en bild över
tiden eller för att anropa beteendeåtgärder automatiskt efter att sidan har lästs
in. Se ”Använda dynamiska skikt” på sidan 403.
• Använd beteenden om du vill utföra uppgifter som svar på särskilda händelser.
En knapp kan exempelvis markeras när besökaren för muspekaren över den. Ett
formulär kan valideras när besökaren klickar på knappen Skicka och ytterligare
ett webbläsarfönster kan öppnas när huvudsidan har lästs in. Se ”Använda
beteenden” på sidan 433.
• Felsöka egen JavaScript-kod Se ”Felsöka JavaScript-kod” på sidan 469.
• Använda formulär så att besökarna kan skriva data direkt på webbplatsen. Se
”Skapa formulär” på sidan 477.
Testa och publicera sidan
Nu är webbplatsen klar och redo att visas. Innan du publicerar webbplatsen måste
du dock testa den. Beroende på projektets storlek, klientspecifikationer och vilka
typer av webbläsare som användarna kommer att använda, kanske du måste flytta
webbplatsen till en särskild server där platsen kan testas och redigeras. När du har
gjort de ändringar som krävs publicerar du webbplatsen där åhörarna kan få
tillgång till den. När webbplatsen är publicerad bör du upprätta en rutin för
underhåll som försäkrar att kvaliteten förblir hög, att du kan svara på användarnas
kommentarer och uppdatera informationen på webbplatsen.
Använd följande funktioner när du testar och publicerar webbplatsen:
• När du vill lägga till nya koder i en sida eller korrigera koden, använder du
referenspanelen för att söka efter JavaScript-, CSS- och HTML-kod. Se
”Använda referenspanelen” på sidan 323.
• Använd felsökningsprogrammet för JavaScript när du vill åtgärda JavaScript-fel
i koden. Med felsökningsprogrammet kan du lägga in brytpunkter i koden och
sedan visa koden som en sida när den felsöks i Dreamweaver. Se ”Felsöka
JavaScript-kod” på sidan 469.
• Utför kontroll av webbläsare och insticksprogram, testa och eventuellt justera
länkar i dokumenten och kör platsrapporter för att söka efter vanliga fel i
HTML-filerna. Se ”Testa och publicera en plats” på sidan 497.
• I platsfönstret finns det många verktyg som du kan använda för att hantera
webbplatsen, överföra filer till och från en fjärrserver, skapa en process för
incheckning/utcheckning för att förhindra att filer skrivs över samt
synkronisera filerna på de lokala platserna och fjärrplatserna. Se ”Platshantering
och samarbete” på sidan 103.
Komma igång
19
Var du ska starta
Denna guide innehåller information för läsare med olika kunskapsnivåer. Du
utnyttjar dokumentationen på bästa sätt genom att först läsa de delar som passar
din kunskapsnivå.
För HTML-nybörjare:
1
Börja med att titta på introduktionsfilmerna. Välj Hjälp > Genomgång av
Dreamweaver på huvudmenyn i Dreamweaver.
2
Fortsätt sedan med självstudierna. Välj Hjälp > Självstudier eller följ
anvisningarna i den tryckta handboken.
3
Gå igenom lektionerna för de ämnen som intresserar dig. Välj Hjälp >
Lektioner och välj en lektion.
4
Fortsätt med ”Grunderna i Dreamweaver” på sidan 67, ”Planera och
konfigurera webbplatsen” på sidan 91, ”Platshantering och samarbete” på
sidan 103 och ”Länkar och navigering” på sidan 349.
5
Om du vill lära dig att formatera text och infoga bilder på sidorna läser du
”Infoga och formatera text” på sidan 227 och ”Infoga bilder” på sidan 263.
Det är egentligen allt som du behöver lära dig för att kunna skapa högkvalitativa
webbplatser, men när du är mogen att lära dig att använda mer avancerade layoutoch interaktionsverktygen kan du fortsätta med resten av boken i tur och ordning.
Du kan hoppa över ”Anpassa Dreamweaver”, åtminstone till att börja med.
För erfarna webbutvecklare som inte arbetat med Dreamweaver:
20
Introduktion
1
Börja med att titta på introduktionsfilmerna. Välj Hjälp > Genomgång av
Dreamweaver på huvudmenyn i Dreamweaver.
2
Gå igenom självstudierna och lär dig grunderna för hur du arbetar med
Dreamweaver. Välj Hjälp > Självstudier eller följ anvisningarna i den tryckta
handboken.
3
Gå igenom lektionerna för de ämnen som intresserar dig. Välj Hjälp >
Lektioner och välj en lektion.
4
Läs ”Grunderna i Dreamweaver” på sidan 67 om du vill ha en översikt över
gränssnittet i Dreamweaver.
5
Även om du redan kan det mesta i ”Platshantering och samarbete” på
sidan 103 och ”Länkar och navigering” på sidan 349 kan du skumma igenom
kapitlen för att få en överblick över hur dessa koncept används i Dreamweaver.
Läs särskilt informationen i Använda Dreamweaver när du skapar en ny plats.
Läs sedan ”Platshantering och samarbete” på sidan 103.
6
”Infoga och formatera text” på sidan 227 och ”Infoga bilder” på sidan 263
finns användbar information om hur du använder Dreamweaver när du skapar
grundläggande HTML-sidor.
7
Läs översikten i början av varje kommande kapitel för att avgöra om ämnena
kan tillföra dig något.
För erfarna webbutvecklare som arbetat med Dreamweaver 3:
1
Börja med att läsa Nyheter i Dreamweaver 4. Följ korshänvisningarna från det
avsnittet till avsnitt som behandlar de nya funktionerna i Dreamweaver.
2
Du kan skumma igenom ”Grunderna i Dreamweaver” på sidan 67 om du vill
se vilka nyheter som finns i Dreamweavers användargränssnitt.
3
Gör lektionerna i Dreamweaver. Välj Hjälp > Lektioner så visas en lista med
interaktiva lektioner som du kan pröva.
4
Om du är intresserad av hur du anpassar och utökar Dreamweaver, läser du
”Anpassa Dreamweaver” på sidan 509.
Typografiska konventioner
Följande typografiska konventioner används i den här handboken:
•
Kodformat
visar HTML-koder och attributnamn samt text som används i
exempel.
• Kursivt kodformat visar utbytbara poster (kallas ibland metasymboler) i koden.
• Fett format visar text som du ska ange ordagrant.
Komma igång
21
Nyheter i Dreamweaver 4
Med de nya funktionerna i Dreamweaver 4 kan du förbättra HTML-redigering,
enklare utforma sidor, förbättra plats- och resurshantering, skapa egna Flashobjekt, effektivisera arbetsflödet, förbättra samarbetet mellan gruppmedlemmar
och anpassa och utöka Dreamweaver.
Förbättrad kodredigering
kan du bestämma hur du vill visa en sida –
designvy, kodvy eller en kombination av design- och kodvyn. Med verktygsfältet
når du lätt de vanligaste funktionerna i programmet, exempelvis Förhandsgranska
i webbläsare och Design Notes. Se ”Använda verktygsfältet” på sidan 74.
Med verktygsfältet i Dreamweaver
Kodvyn är ett nytt sätt att visa HTML-kod direkt i dokumentfönstret i
Dreamweaver. Se ”Använda kodvyn (eller kodkontrollen)” på sidan 326. Du kan
också redigera andra dokument än HTML-dokument, exempelvis JavaScript-filer
och XML-filer, direkt i kodvyn. Se ”Infoga skript” på sidan 330.
Inbyggda kodredigerare Dreamweaver
har nu inbyggda kodredigerare – kodvyn
och kodkontrollen. Du kan ange radbrytning, kodindragning, syntaxfärgning
m.m. på Alternativ-menyn i båda redigerarna. Se ”Ange alternativ för kodvyn
(eller kodkontrollen)” på sidan 328.
är ett snabbt referensverktyg för HTML, JavaScript och CSS.
Det ger information om specifika koder som du arbetar med i kodvyn (eller
kodkontrollen). Se ”Använda referenspanelen” på sidan 323.
Referenspanelen
Med menyn Kodnavigering kan du markera kod för JavaScript-funktioner på en
sida och snabbt gå genom JavaScript-kod medan du arbetar i kodvyn. Se ”Visa
skriptfunktioner” på sidan 332.
Med felsökningsprogrammet för JavaScript kan du felsöka JavaScript-dokument
i Dreamweaver. Du kan exempelvis ange brytpunkter för att styra koden du vill
undersöka. Se ”Felsöka JavaScript-kod” på sidan 469.
Enklare siddesign
Med layoutläget kan du snabbt utforma webbsidor genom att rita rutor (tabeller
eller celler) som du sedan lägger till innehåll i. Se ”Rita layoutceller och tabeller”
på sidan 163.
Med förbättrade mallar är det lätt att identifiera de ändringsbara regionerna i en
mallfil. Nu finns det en flik som innehåller namnet på den ändringsbara regionen
samt en avgränsande rektangel. Se ”Skapa mallar” på sidan 373.
kan nu definieras så snart du skapar ett nytt format. Du kan
också använda en befintlig CSS-formatmall med hjälp av en knapp på CSSformatpanelen. Se ”Använda CSS-formatmallar” på sidan 243.
CSS-formatmallar
22
Introduktion
Förbättrad integration
är nu inbyggda i Dreamweaver. Du kan välja från
flera fördefinierade Flash-knappar och infoga dem i dokumentet eller låta en
Flash-designer skapa egna knappmallar åt dig. Se ”Använda Flash-knappobjekt”
på sidan 297 och ”Använda Flash-textobjekt” på sidan 300.
Flash-knappar och Flash-text
Med Roundtrip-skivor kan du flytta mellan Dreamweaver och Fireworks 4 utan
problem. Du kan redigera och uppdatera bilder och HTML-tabeller som du
importerar från Fireworks. Du kan också redigera i Dreamweaver eller Fireworks
och låta ändringarna bevaras på båda ställena. Se ”Redigera Fireworks-filer som
monterats i Dreamweaver” på sidan 284.
Med den webbsäkra färgväljaren kan du enkelt matcha färgerna med grafik.
Klicka en gång och välj en färg från vilken plats som helst på skrivbordet så ändras
färgen till närmaste webbsäkra färg. Se ”Arbeta med färger” på sidan 83.
Effektivisera arbetsflödet
Med resurspanelen kan du hantera webbplatsens resurser. Du kan visa alla bilder,
färger, externa URL-adresser och skript samt Flash-, Shockwave-, QuickTime-,
mall- och biblioteksposter på ett centralt ställe. Förhandsgranska resurser och dra
dem sedan direkt till HTML-dokumentet. Spara ofta använda resurser i en
favoritlista och återanvänd dem på flera webbplatser. Se ”Använda resurspanelen”
på sidan 216 och ”Använda favoritresurser” på sidan 223.
Med förbättrat Design Notes kan du bifoga anteckningar i en fil och på så sätt
spåra ändringar eller kommunicera med andra gruppmedlemmar om saker som
rör utvecklingen. Du kan infoga och visa kommentarer direkt i platsfönstret i
Dreamweaver. Se ”Design Notes” på sidan 130 och ”Förbättra arbetsflödet med
hjälp av rapporter” på sidan 136.
Med inbyggd e-post kan du kommunicera med andra gruppmedlemmar. När en
fil har checkats ut av någon annan kan du nu klicka på den gruppmedlemmens
namn och skicka ett e-postmeddelande till henne eller honom. Se ”Konfigurera
systemet för in- och utcheckning” på sidan 127.
Med platsrapportering kan du använda flera fördefinierade rapporter för att testa
vanliga problem i HTML-dokument, exempelvis namnlösa dokument eller altkoder som saknas. Du kan också skriva egna rapporter, visa rapportresultat och
öppna problemfiler i rapportfönstret. Se ”Konfigurera systemet för in- och
utcheckning” på sidan 127 och ”Skapa rapporter” på sidan 506.
Om du har SourceSafe kan du nu checka in/ut filer till
och från SourceSafe medan du arbetar i Dreamweaver. Se ”Använda Dreamweaver
med Visual SourceSafe” på sidan 124.
SourceSafe-integration
använder nu Dreamweaver för att överföra filer med
WebDAV-protokollet. Se ”Använda Dreamweaver med WebDAV-protokollet” på
sidan 123.
WebDAV-integration
Komma igång
23
Med Package Manager (före detta Extension Manager) installerar du
tilläggsprogram med en enda klickning med musen. Gå till Macromedia
Exchange och hämta tilläggsprogram som kan göra jobbet lättare. Se ”Lägga till
tillägg i Dreamweaver” på sidan 89.
Vanliga användargränssnitt
har ett nytt gränssnitt som är gemensamt för alla Macromedias
webbpubliceringsprodukter. Med detta nya gränssnitt kan du redigera befintliga
kortkommandon, skapa nya kortkommandon för menyalternativ och ta bort
kortkommandon som du inte längre behöver. Du kan också växla mellan olika
konfigurationer av kortkommandon. Se ”Använda redigeraren för
snabbtangenter” på sidan 86.
Kortkommandon
har förbättrats. Nu fästs alla fönster på plats. När du öppnar ett
nytt fönster överlappar det inte synliga paneler.
Fönsterhantering
har nu ett nytt Macromedia-utseende och fungerar på samma sätt i alla
webbpubliceringsprodukter. Alla paneler har ikoner och text så att du lätt kan
identifiera dem. Alla paneler använder systemfärger och systemteckensnitt (både i
Windows och på Macintosh) och har samma fäst- och dra-funktion.
Panelerna
HTML- och webbteknikresurser
Nedan visas några användbara resurser på Internet:
HTML 4.0-specifikationen (http://www.w3.org/TR/REC-html40/)
är den
officiella specifikationen för HTML från W3C (World Wide Web Consortium).
Index DOT Html (http://www.blooberry.com/indexdot/html/)
är en omfattande
lista över HTML-koder, attribut och värden och deras kompatibilitet med olika
webbläsare.
(http://www.zdnet.com/devhead/resources/
tag_library/) är en annan lista över information om alla HTML-koder.
ZDNet Developer Tag Library
CSS1 (Cascading Style Sheets Level 1 Specification) (http://www.w3.org/TR/
REC-CSS1) är den officiella specifikationen för formatmallar från W3C (World
Wide Web Consortium).
(http://webreview.com/guides/style/
style.html) är en guide till vad CSS-format är och i vilka webbläsare det fungerar.
Web Review's Style Sheets Reference Guide
”CGI Scripts for Fun and Profit” (http://www.hotwired.lycos.com/webmonkey/
99/26/index4a.html) är en artikel från webbplatsen Hotwired Webmonkey om
hur man integrerar färdiga CGI- (Common Gateway Interface) skript på
webbsidorna.
24
Introduktion
CGI-resursindex (http://www.cgi-resources.com/)
är en webbplats med allting
som är relaterat till CGI. Här finns färdiga skript, dokumentation, böcker och till
och med programmerare att hyra.
Webbplatsen om CGI (Common Gateway Interface) (http://hoohoo.ncsa.uiuc.edu/
cgi/) Här finns en introduktion till CGI.
(http://www.bbsinc.com/iso8859.html) Listar teckennamn som
används i ISO 8859-1 (Latin-1).
Teckentabeller
Webbsida om dynamisk HTML (http://msdn.microsoft.com/workshop/author/
dhtml/reference/events.asp#om40_event) Innehåller information om händelser i
Microsoft Internet Explorer.
Microsofts översiktssidor om ASP (http://msdn.microsoft.com/workshop/server/
asp/ASPover.asp) Innehåller information om Active Server Pages (ASP).
Suns JSP-sida (http://java.sun.com/products/jsp/)
Innehåller information om
JSP (JavaServer Pages).
PHP-sido (http://www.php.net/)
Preprocessor.
Innehåller information om PHP: Hypertext
Allaires produktsida om ColdFusion (http://www.allaire.com/Products/
ColdFusion/) Innehåller information om ColdFusion.
Webbplatsen XML.com (http://www.xml.com)
Innehåller information,
självstudier och tips om XML (Extensible Markup Language) samt om andra
webbtekniker.
JavaScript Bible,
av Danny Goodman (IDG Books), en utförlig handbok i
JavaScript 1.2-språket.
JavaScript: The Definitive Guide,
av David Flanagan (O’Reilly & Associates), ger
referensinformation för alla funktioner, objekt, metoder, egenskaper och
händelsehanterare i JavaScript.
Komma igång
25
Hjälpmedel och Dreamweaver
Macromedia stöder utvecklingen av snygga och funktionella webbplatser som
passar alla, även personer med handikapp. Vi uppmuntrar användningen av
internationella standarder som guidar utvecklare av tillgängliga platser, inklusive
riktlinjerna som W3C (World Wide Web Consortium) ställt upp. Många
myndigheter, exempelvis de i USA, refererar till W3C:s riktlinjer när det gäller
tillgängligheten på webben. W3C:s riktlinjer när det gäller innehållet på webben
uppmuntrar utvecklare att använda utformning och kod som främjar
tillgänglighet. De flesta riktlinjerna har stöd i Macromedias produkter. Om du vill
ha mer information om W3C:s riktlinjer kan du gå till http://www.w3.org/TR/
WAI-WEBCONTENT/full-checklist.html.
Aktuell information om produktfunktioner och resurser som stöder
hjälpmedelsutveckling finns på Macromedias hjälpmedelssida http://
www.macromedia.com/accessibility/.
26
Introduktion
1
KAPITEL 1
Dreamweavers självstudier
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
I självstudierna går vi igenom de olika stegen för hur du skapar webbsidor. Du får
lära dig hur du använder Macromedia Dreamweaver för att definiera en lokal plats
och du får använda paneler och verktyg i Dreamweaver för att skapa och redigera
webbdokument.
I självstudierna kommer du att skapa webbsidor för Compass, ett påhittat företag som
har specialiserat sig på äventyrsresor. Om du inte har använt Dreamweaver förut börjar
du från början i självstudierna och arbetar dig sedan framåt. Om du har använt
Dreamweaver kan du starta med ”Använda resurspanelen” på sidan 54. Det här
avsnittet och de som följer handlar framförallt om nya eller ändrade funktioner i
Dreamweaver, exempelvis resurspanelen, Flash-knappar och Flash-text, hur du
använder mallar, hur du kör en platsrapport och lägger till en Design Note.
Självstudierna ta ca en till två timmar, beroende på din erfarenhet. Du får bland
annat lära dig att:
•
•
•
•
•
•
•
•
•
•
Definiera en lokal plats
Skapa en sida i layoutvyn
Infoga en bild och en överrullningsbild
Arbeta med tabeller i standardvyn
Skapa en länk till ett annat dokument
Infoga resurser från resurspanelen
Infoga Flash-text- och Flash-knappobjekt
Skapa och använda en mall
Köra en platsrapport
Lägga till en Design Note
Obs! I den här självstudiekursen demonstreras vissa funktioner som endast stöds i
webbläsare från och med version 4.0.
27
En genomgång av Dreamweaver
Innan du börjar kan det vara en bra idé att titta på introduktionsfilmerna så att du
får en uppfattning om hur webbutvecklingsprocessen går till. De olika
funktionerna i Dreamweaver beskrivs också.
1
Välj Hjälp > Genomgång av Dreamweaver.
2
Klicka på en filmtitel.
3
Stäng filmen när du är klar.
Arbetsområdet i Dreamweaver
Vi börjar med en kort översikt över arbetsområdet i Dreamweaver.
• Om du ännu inte har startat Dreamweaver, gör du det nu genom att
dubbelklicka på Dreamweaver-ikonen.
Arbetsområdet i Dreamweaver är flexibelt och det spelar ingen roll vilket sätt du
föredrar att arbeta på eller hur erfaren du är. När du startar Dreamweaver öppnas
följande delar av arbetsområdet:
Verktygsfältet
Dokumentfönstret
Objektpanelen
Flytande panel
Startfältet
Kodväljaren
Egenskapskontrollen
• I dokumentfönstret visas det aktuella dokumentet under tiden som du skapar
och redigerar det.
• Objektpanelen innehåller ikoner som du klickar på när du vill infoga ett objekt
i dokumentet eller ändra det sätt som du arbetar på i ett dokument.
• I Dreamweaver finns det många flytande paneler, exempelvis HTMLformatpanelen och kodkontrollen, som gör att du kan arbeta med andra
element i Dreamweaver.
28
Kapitel 1
• Du kan klicka på startknapparna när du vill öppna och stänga de vanligaste
kontrollerna och panelerna.
• I egenskapskontrollen visas egenskaper för det markerade objektet eller den
markerade texten. Du kan ändra dessa egenskaper här.(Vilka egenskaper som
visas i kontroller beror på vilket objekt som är markerat i dokumentet.)
Använd Fönster-menyn när du vill öppna fönster, kontroller och paneler i
Dreamweaver. En bockmarkering bredvid ett alternativ på Fönster-menyn betyder
att det alternativet är öppet (även om det kan vara dolt bakom andra fönster). Du
visar ett alternativ genom att välja namnet det på menyn eller genom att använda
dess kortkommando.
Arbeta i Dreamweaver
I Dreamweaver kan ett dokument visas på tre sätt: i designvyn, i kodvyn och i en
delad vy som visar både design och kod. (Du ändrar vy genom att välja en vy i
verktygsfältet.) Som standard visas dokumentfönstret i designvyn.
Du kan dessutom arbeta med designvyn på två olika sätt: i layoutvyn eller
standardvyn. (Du väljer dessa vyer i kategorin Visa på objektpanelen.) I layoutvyn
kan du utforma en sidlayout, infoga bilder, text och annan media. I standardvyn
kan du förutom att infoga bilder, text och media, infoga skikt, skapa
ramdokument, skapa tabeller och använda andra ändringar på sidan, alternativ
som inte är tillgängliga i layoutvyn.
Hur självstudiefilerna är ordnade
Både de färdiga och de delvis färdiga HTML-filerna som används i dessa
självstudier finns i mappen Compass_Site som ligger i mappen Tutorial. Bilder
och andra tillhörande filer för platsen finns också i mappen Compass_Site.
Varje självstudiefil har ett meningsfullt namn. HTML-filen som innehåller
resmålsinformation heter exempelvis Destinations.html. De delvis färdiga filer du
kommer att få arbeta med har namn som liknar namnen på motsvarande filer,
men de börjar med DW4_. Den delvis färdiga versionen av Destinations.html
heter exempelvis DW4_Destinations.html.
Dreamweavers självstudier
29
Förhandsgranska den färdiga webbsidan
I nästa steg ska du visa sidor från den färdiga webbplatsen för att få en uppfattning
om hur ditt arbete fortlöper.
1
Om du inte redan har startat Dreamweaver så gör du det nu.
2
Välj Arkiv > Öppna i Dreamweaver. I dialogrutan som visas går du till mappen
Dreamweaver 4 (där du installerade Dreamweaver) och sedan till mappen
Tutorial/Compass_Site.
3
Öppna Compass hemsida i dokumentfönstret genom att välja
CompassHome.html i mappen Compass_Site och klicka på Öppna.
Redigera inte den här sidan, du kommer att få skapa din egen version av sidan.
4
Välj Arkiv > Förhandsgranska i webbläsare och välj en webbläsare som du vill
använda för att visa Compass-hemsidan. (Använd en version 4.0-webbläsare
eller senare när du visar denna webbplats.)
5
Flytta pekaren över navigationsknapparna för att visa
överrullningsbildeffekterna.
Klicka på navigationsknapparna om du vill utforska platsen.
30
Kapitel 1
6
Stäng webbläsaren när du har tittat klart på webbplatsen.
7
Öppna ett nytt tomt dokument i Dreamweaver genom att välja Arkiv >
Öppna.
8
Stäng filen CompassHome.html.
Ordna platsstrukturen för självstudierna
Du kan arbeta med självstudiefilerna på två sätt: du kan använda en fördefinierad
lokal plats eller definiera en lokal plats.
• Om du inte har använt Dreamweaver förut, vill du kanske definiera den lokala
platsen för självstudierna så att du vet hur du definierar en lokal plats när du
sedan ska arbeta på dina egna platser.
• Om du redan vet hur du definierar en plats i Dreamweaver kan du använda den
fördefinierade självstudieplatsen. Välj Plats > Öppna plats i Dreamweavers
huvudmeny. Välj sedan Självstudier i Dreamweaver. Platsen Självstudier i
Dreamweaver länkar till filerna i platsen Compass_Site som finns i mappen
Dreamweaver 4/Tutorial. När du har markerat den lokala platsen går du vidare
till avsnittet ”Skapa platsens hemsida” på sidan 33 i självstudierna.
Obs! Om du väljer den fördefinierade platsen kommer platsnamnet som visas i bilderna
inte att matcha det namn som visas på skärmen. Istället för att namnet my_tutorial visas,
visas Tutorial - Dreamweaver som platsnamn på skärmen.
Definiera en lokal plats
När du definierar en lokal plats talar du om var du vill alla filer för en viss plats ska
sparas. För att kunna arbeta effektivt i Dreamweaver ska du alltid skapa en lokal
plats för varje webbplats som du skapar.
I den här självstudiekursen anger du mappen Compass_Site som den lokala
mappen.
1
Om du inte redan har startat Dreamweaver så gör du det nu.
Ett tomt dokument öppnas.
2
Välj Plats > Ny plats.
3
I dialogrutan Platsdefinition ser du till att Lokal info är valt i listan Kategori.
4
I fältet Platsnamn skriver du my_tutorial.
Med platsnamnet är det enkelt att identifiera och välja en plats i en lista över
platser som du har definierat.
5
Klicka på mappikonen till höger om fältet Lokal rotmapp.
Dreamweavers självstudier
31
6
I dialogrutan som visas går du till mappen Tutorial/Compass_Site och gör
något av följande:
• Klicka på Öppna. Klicka sedan på Välj när Compass_Site visas i fältet Välj.
Fältet Lokal rotmapp uppdateras och visar sökvägen till den lokala platsen.
Obs! Den fullständiga sökvägen till mappen Compass_Site kan variera, beroende på var
du har installerat Dreamweaver.
7
Gör sedan något av följande under Cache:
• Markera Aktivera cache (Windows) för att skapa en cachefil för platsen.
• Markera Använd Cache för att snabba upp länkuppdatering (Macintosh), när
du vill skapa en cachefil för platsen.
När du cachar filerna i mappen Compass_Site skapas en post med befintliga
filer så att länkarna snabbt ska uppdateras när du flyttar, ändrar namn på eller
tar bort en fil.
8
32
Kapitel 1
Klicka på OK när du vill stänga dialogrutan.
9
Klicka på OK i meddelandet om cachefilen.
I platsfönstret visas nu en lista över alla mappar och filer som den lokala platsen
innehåller. Listan fungerar också som en filhanterare, som låter dig kopiera,
klistra in, ta bort, flytta och öppna filer på samma sätt som på datorns
skrivbord.
Skapa platsens hemsida
Nu när du har definierat en platsstruktur där du kan spara sidor och resurser för
platsen Compass, är det dags att skapa den första sidan – en hemsida för platsen.
Under arbetet med sidan kommer du att få lägga till bilder, text och Flash-resurser.
De dokument som du skapar kommer att innehålla samma komponenter som den
färdiga Compass-hemsidan.
Spara dokumentet
Börja med att spara dokumentet som du arbetar i.
1
Låt platsfönstret vara öppet och klicka på dokumentfönstret så att det blir
aktivt.
Platsfönstret ligger öppet i bakgrunden.
2
Välj Arkiv > Spara.
Dreamweavers självstudier
33
3
I dialogrutan Spara som väljer du mappen Compass_Site.
4
I fältet Filnamn skriver du my_CompassHome.html.
5
Klicka på Spara.
Observera att dokumentnamnet visas högst upp i dokumentfönstret.
Definiera dokumentets sidtitel
Även om dokumentet har ett filnamn har det fortfarande titeln Untitled
Document. Detta beror på att dokumentet behöver ett HTML-dokumentnamn
eller sidtitel. Om du definierar en sidtitel blir det enklare för besökare att
identifiera sidan som de visar i webbläsaren. Sidtiteln visas i webbläsarens namnlist
och i bokmärkeslistan. Om du skapar ett dokument utan sidtitel visas det i
webbläsaren med titeln Untitled Document.
Nästa steg i självstudierna blir att ange en sidtitel till dokumentet.
1
Låt dokumentfönstret vara aktivt och välj Visa > Verktygsfält om verktygsfältet
inte redan visas.
Verktygsfältet i Dreamweaver visas ovanför dokumentfönstret
34
Kapitel 1
2
Skriv Compass Home Page i fältet Titel och klicka sedan i dokumentfönstret så
uppdateras sidtiteln i dokumentfönstrets namnlist.
3
Spara filen.
Utforma en sida i layoutvyn
Du börjar med den första sidan i Dreamweavers designvy. Du kommer att
utforma sidan och sedan infoga bilder och text.
Sidan som du utformar i detta avsnitt av självstudierna kommer att likna denna
sida.
Arbeta i layoutvyn
I Dreamweaver finns två designvyer: standardvyn och layoutvyn. Du börjar med
att arbeta i layoutvyn där du kan rita layoutceller eller layouttabeller som du kan
fylla med innehåll, exempelvis bilder, text eller annan media.
I denna del av självstudierna utformar du sidan och i nästa avsnitt kommer du att
få lägga till innehåll. (När du känner att du kan dessa två uppgifter kan det hända
att du tycker att det är lättare att lägga till layout och innehåll samtidigt.)
1
Klicka på ikonen Layout i objektpanelen, om den inte redan är markerad.
Ikonen Rita layoutcell
Ikonen Rita layouttabell
Ikonen Layout
Dialogrutan Komma igång med layoutläget visas och beskriver alternativen i
layoutvyn.
2
Granska alternativen och klicka sedan på OK så att dialogrutan stängs.
3
Lägg märke till att layoutalternativen Rita layoutcell och Rita layouttabell
under Layout i objektpanelen nu är tillgängliga. Dessa alternativ är inte
tillgängliga i standardvyn.
Dreamweavers självstudier
35
Rita layoutceller
I layoutvyn kan du rita layoutceller och layouttabeller och på så vis utforma olika
områden i dokumentet. Uppgiften är enklare att utföra om du börjar med att
förbereda ett exempel av sidan som du ska skapa innan du utformar sidan.
Titta på följande exempellayout för att bilda dig en uppfattning om layouten på
sidan som du skapar i denna del av självstudierna. Det finns en cell för Compasslogotypen, en tabell med tre celler för platsnavigationsknapparna, en cell för en
annan bild och en tabell för tre celler som ska innehålla text.
Du ska rita tabeller och celler som liknar denna layout när du arbetar med
dokumentet. Börja med att rita en layoutcell där du ska infoga Compasslogotypen.
1
Klicka i dokumentfönstret till dokumentet my_CompassHome för att göra det
aktivt.
2
Öppna följande verktyg, om de inte redan är öppna:
• Objektpanelen (välj Fönster > Objekt), som du använder för att lägga till
objekt i dokumentet.
• Egenskapskontrollen (välj Fönster > Egenskaper), som du använder för att ange
egenskaper för olika objekt i dokumentet. Om egenskapskontrollen inte redan
är maximerad klickar du på maximeringsknappen längst ned till höger i
kontrollen så att alla egenskapsalternativ visas.
3
36
Kapitel 1
Klicka på ikonen Rita layoutcell i objektpanelen.
4
Flytta pekaren till dokumentfönstret. Muspekaren ändras till ett ritverktyg (ser
ut som ett litet kors). Klicka i det övre vänstra hörnet i dokumentet och dra
sedan ut en layoutcell.
När du släpper musen visas en layoutcell i en layouttabell.
Layoutcell
Layouttabell
Layouttabellen utökas så att den fyller ut hela dokumentfönstret och definierar
sidlayoutområdet. Den vita rektangeln är layoutcellen som du ritade. Du kan
placera fler layoutceller i det gråa området i layouttabellen.
Ändra storlek på layoutceller
Om du vill utforma en sida exakt, kan du ange storleken på de celler som du
lägger till i ett dokument. Du kan också flytta om celler på sidan.
1
Klicka på kanten till layoutcellen för att markera den.
Handtag visas runt en markerad layoutcell:
2
Gör något av följande när du vill ändra storlek på layoutcellen:
• I egenskapskontrollen för layoutcellen skriver du 510 i fältet Fast, så att cellens
bredd blir 510 bildpunkter. Klicka sedan i dokumentet så ändras cellbredden.
Obs! Om du anger en bredd som är större än layouttabellens bredd eller om den nya
bredden gör så att cellen överlappar en annan cell i layouttabellen, visas ett
varningsmeddelande och cellbredden justeras till en giltig bredd.
Dreamweavers självstudier
37
• Dra i det mittersta handtaget på höger sida i layoutcellen åt höger tills cellen
har önskad bredd. När du släpper musknappen visas cellbredden i
kolumnhuvudområdet högst upp i layouttabellen.
Lägga till flera layoutceller
Nu ska du lägga till tre layoutceller nedanför logotypcellen som du just skapade.
Du kommer senare att få infoga sidans navigationsknappar i dessa celler.
1
I objektpanelen klickar du på ikonen Rita layoutcell. Håll ned Ctrl (Windows)
eller Kommando (Macintosh).
2
Placera pekaren nedanför logotypcellen i dokumentfönstret. Dra i
dokumentfönstret så att en layoutcell ritas upp.
Fortsätt hålla ned Ctrl (Windows) eller Kommando (Macintosh) och rita två
layoutceller till. Skärmen bör nu se ut så här:
Flytta en layoutcell
Om du behöver justera cellerna bredvid varandra kan du ändra storlek och flytta
på dem om det behövs. Du ändrar storlek på en layoutcell genom att dra i ett av
dess handtag.
Du kan inte klicka och sedan dra en cell om du vill flytta den till en ny plats. Om
du vill flytta den till en ny plats i dokumentet gör du så här:
1
38
Kapitel 1
Klicka på kanten till en layoutcell för att markera den.
2
Gör något av följande när du vill flytta på layoutcellen:
• Använd piltangenterna.
• Håll ned Skift och använd piltangenterna om du vill flytta en layoutcell 5
bildpunkter åt gången.
Gruppera celler i en layouttabell
Nu ska du få skapa en tabell med de navigationsknappsceller som du just skapade.
Om du grupperar cellerna i en tabell kan du styra cellmellanrummet och lätt flytta
cellerna som en grupp om du vill ändra på sidlayouten. Du ska skapa en tabell för
navigationsknapparna som har samma bredd som logotypcellen ovanför.
Använd Rita layouttabell när du vill gruppera navigationsknappbilderna.
1
Klicka på ikonen Rita layouttabell i objektpanelen.
2
I dokumentfönstret placerar du pekaren i det övre vänstra hörnet i den första
navigationsknappcellen och drar sedan pelaren så att tabellen innehåller de tre
cellerna och de har samma längd som logotypcellen.
3
Släpp musknappen så grupperas cellerna i en ny tabell.
Du har nu skapat en tabell som innehåller tre layoutceller (det vita området i
tabellen) och ett tomt utrymme (det gråa området i tabellen).
Dreamweavers självstudier
39
Flytta layouttabellen
Du kan markera och flytta en layouttabell till andra områden i ett dokument. Du
kan dock inte flytta en layouttabell så att den överlappar en annan.
Nästa steg är att flytta tabellen som du just skapade några bildpunkter åt höger för
att förskjuta justeringen av navigationsknapparna i förhållande till logotypen när
de infogas på sidan.
1
I dokumentfönstret klickar du på fliken på layouttabellen för att flytta tabellen.
2
Flytta layouttabellen några bildpunkter åt höger genom att dra den. Dra sedan
i ett av tabellens högra handtag så att högersidan justeras med logotypcellen.
Observera att när du skapar nya tabeller och celler visas stödlinjer runt
layoutområdet. Du kan använda stödlinjerna om du vill justera layoutelementen.
Lägga till en layoutcell till
Nu ska du lägga till en layoutcell för bilden Learn More About.
1
Klicka på ikonen Rita layoutcell i objektpanelen.
2
I dokumentfönstret ritar du en ny cell i området nedanför
navigationsknapptabellen.
Sidan bör nu se ut så här:
40
Kapitel 1
Skapa en layouttabell
I föregående avsnitt använde du celler för att skapa en tabell. Nu ska du få börja
med en tabell och sedan lägga till celler.
1
Klicka på ikonen Rita layouttabell i objektpanelen.
2
Flytta pekaren till dokumentfönstret i området nedanför layoutcellen som du
just lade till. Dra med pekaren åt höger för att justera med den översta cellens
högersida och dra sedan nedåt till dokumentfönstrets slut.
Rita layoutceller i en tabell
Lägg till layoutceller som ska innehålla text om resmål.
1
I objektpanelen klickar du på ikonen Rita layoutcell och flyttar pekaren till
layouttabellen som du just ritade.
2
Rita en tabellcell som tar upp ungefär en tredjedel av utrymmet i tabellen.
3
Markera layoutcellen genom att klicka på cellens kant. Ange cellbredden i
egenskapskontrollen genom att skriva 170 i fältet Fast.
4
Bredvid den första cellen ritar du en tabellcell till, som är ungefär en tredjedel
av utrymmet i tabellen.
5
Markera layoutcellen genom att klicka på cellens kant. Ange cellbredden i
egenskapskontrollen genom att skriva 170 i fältet Fast.
Dreamweavers självstudier
41
6
Rita den sista tabellcellen i det återstående utrymmet i tabellen. Ändra storlek
eller flytta på cellerna för att justera storleken eller placeringen av cellerna om
det behövs.
Skärmen bör nu se ut så här:
Lägga till innehåll på sidan
Nu när du har lagt upp områdena på sidan ska du lägga till bilderna, som
exempelvis logotypen och överrullningsbilderna.
Infoga bilder
Du kommer att få lära dig två sätt att infoga bilder i Dreamweaver: dels med
huvudmenyn i Dreamweaver, dels med hjälp av objektpanelen.
1
Klicka i layoutcellen för logotypen (den översta layoutcellen).
Om du klickar i en layoutcell placeras insättningspunkten i cellen utan att
cellen markeras.
42
Kapitel 1
2
Välj Infoga > Bild.
3
I dialogrutan Välj bildkälla går du till mappen Compass_Site, mappen Assets
och sedan till mappen images och klickar på filen compass_logo.gif så att den
markeras.
4
Kontrollera att listrutan Relativt till, längst ned i dialogrutan, är inställd till
Dokument, klicka på sedan på Välj (Windows) eller Öppna (Macintosh) för att
välja bilden.
Bilden visas i layoutcellen.
5
Klicka i layoutcellen Learn More About för att placera insättningspunkten i
cellen.
6
I kategorin Vanlig på objektpanelen klickar du på ikonen Infoga bild.
7
I dialogrutan Välj bildkälla går du till mappen Compass_Site/Assets/images
och markerar learnMoreAbout.gif. Klicka på Välj (Windows) eller Öppna
(Macintosh) för att välja bilden.
Bilden visas i layoutcellen.
8
Välj Arkiv > Spara när du vill spara ändringar du har gjort på hemsidan.
Skapa en överrullningsbild
En överrullningsbild är en bild som ändras när pekaren rör sig över bilden.
Du kommer att använda kommandot Infoga överrullningsbild i Dreamweaver när
du skapar tre överrullningsbilder för navigationsknapparna, Trip Planner,
Destinations och Travel Logs.
En överrullning består av två bilder: Bilden som visas när sidan först läses in i
webbläsaren och bilden som visas när pekaren rör sig den ursprungliga bilden. Se
till så att du använder bilder i samma storlek. Den första bilden bestämmer hur
stora bilderna ska vara. Om exempelvis den andra bilden är mycket mindre eller
mycket större kommer resultatet att se förvanskat eller oprofessionellt ut.
I nästa steg ska du lägga till en navigationsknapp med en överrullningsbild på
sidan. Sedan lägger du till de andra navigationsknapparna och förhandsgranskar
sidan i en webbläsare för att testa överrullningsknapparna.
1
I dokumentfönstret klickar du i den första cellen i navigationsknapptabellen.
Genom att klicka i cellen kommer bilden att infogas där.
2
Gör något av följande när du vill infoga en överrullningsbild:
• I kategorin Vanlig på objektpanelen klickar du på ikonen Infoga
överrullningsbild.
• Välj Infoga > Interaktiva bilder > Överrullningsbild.
Dreamweavers självstudier
43
3
I dialogrutan Infoga överrullningsbild skriver du planner i fältet Bildnamn.
Då får bilden ett unikt namn och gör den enkel att identifiera i HTML-koden.
4
I fältet Originalbild klickar du på Bläddra, går till filen MenuTripPlanner.gif
och klickar på Välj (Windows) eller Öppna (Macintosh).
Detta anger vilken bild som ska visas först när sidan läses in.
5
I fältet Överrullningsbild klickar du på Bläddra, går till filen
MenuTripPlanner_on.gif och klickar på Välj (Windows) eller Öppna
(Macintosh).
Detta anger vilken bild som ska visas när pekaren är över originalbilden.
6
Kontrollera att alternativet Förhandsladda överrullningsbild är markerat så att
överrullningsbilderna läses in samtidigt som sidan läses in i webbläsaren. Detta
gör så att bilderna kan bytas snabbt när användaren flyttar pekaren över
originalbilden.
7
Klicka på OK när du vill stänga dialogrutan.
Bilden visas i dokumentet.
8
Ändra storlek på layoutcellen så att den passar till bilden.
Skapa de andra överrullningsbilderna
Nu ska du lägga till överrullningsbilderna för de andra navigationsknapparna.
44
Kapitel 1
1
I dokumentfönstret klickar du i cellen för den andra navigationsknappen. I
kategorin Vanlig på objektpanelen klickar du sedan på ikonen Infoga
överrullningsbild.
2
I dialogrutan Infoga överrullningsbild skriver du destinations i fältet Bildnamn
för att ge bilden ett unikt namn.
3
I fältet Originalbild klickar du på Bläddra och väljer filen
MenuDestinations.gif.
4
I fältet Överrullningsbild klickar du på Bläddra och väljer filen
MenuDestinations_on.gif.
5
Kontrollera att alternativet Förhandsladda överrullningsbild är markerat och
klicka sedan på OK så att dialogrutan stängs.
6
I dokumentfönstret klickar du i den tredje navigationsknappcellen. I kategorin
Vanlig på objektpanelen klickar du sedan på ikonen Infoga överrullningsbild.
7
I dialogrutan Infoga överrullningsbild skriver du travellog i fältet Bildnamn för
att ge bilden ett unikt namn.
8
I fältet Originalbild klickar du på Bläddra och väljer filen MenuTravelLogs.gif.
9
I fältet Överrullningsbild klickar du på Bläddra och väljer filen
MenuTravelLogs_on.gif.
10
Kontrollera att alternativet Förhandsladda överrullningsbild är markerat och
klicka sedan på OK så att dialogrutan stängs.
11
Ändra storlek på de två layoutcellerna så att de passar till bilderna.
Förhandsgranska dokumentet
Du kan inte visa överrullningsbeteendet i Dreamweavers dokumentfönster.
Överrullningsbilder fungerar endast i en webbläsare. Du kan dock
förhandsgranska dokumentet i Dreamweaver om du vill visa dess
webbläsarrelaterade funktioner. Du behöver inte spara dokumentet innan du
förhandsgranskar det.
1
Tryck på F12 för att visa dokumentet i en webbläsare.
Flytta muspekaren över överrullningsbilderna som du skapade och se hur
bilderna ändras.
2
När du har tittat klart på filen stänger du webbläsaren.
3
Gå tillbaka till dokumentfönstret i Dreamweaver och välj Arkiv > Spara för att
spara ändringarna du gjorde på hemsidan.
Dreamweavers självstudier
45
Infoga text
Nu ska du lägga till text i cellerna i den nedersta layouttabellen.
I Dreamweaver kan du skriva text direkt i en layoutcell eller också kan du klippa
ut text från ett annat dokument och klistra in den i en layoutcell. I denna
självstudie ska du lägga till text i layoutcellen genom att kopiera innehållet i en
befintlig textfil och klistra in det i layoutcellen.
1
Välj Arkiv > Öppna och öppna textfilen DW4_HomeText.txt i mappen
Compass_Site.
Dokumentet DW4_HomeText.txt öppnas i ett nytt dokumentfönster.
2
I textfilen DW4_HomeText.txt markerar du de två första raderna med text,
”Fly Fishing” till och med ”ravioli”.
3
Välj Redigera > Kopiera så kopieras texten.
4
I dokumentet my_CompassHome klickar du i den första layoutcellen i
layouttabellen för text.
5
Välj Redigera > Klistra in för att klistra in texten i layoutcellen.
6
I textfilen DW4_HomeText.txt markerar du nästa två rader med text , ”Level 5
Rapids” till och med ”Siberia”.
7
Välj Redigera > Kopiera så kopieras texten.
8
I dokumentet my_CompassHome klickar du i den andra layoutcellen i
layouttabellen för text.
9
Välj Redigera > Klistra in för att klistra in texten i layoutcellen.
10
I textfilen DW4_HomeText.txt markerar du de två sista raderna med text,
”Puget Sound Kayaking” till och med ”Puget Sound.”
11
Kopiera texten och klistra in den i den tredje cellen i layouttabellen.
12
Stäng textfilen DW4_HomeText.txt och klicka sedan i
my_CompassHome.html så att det blir det aktiva dokumentet.
Formatera text
Du kan formatera texten i dokumentfönstret genom att ställa in egenskaper i
egenskapskontrollen. Börja med att markera texten som du vill formatera och
tillämpa sedan ändringarna. Du ska ändra teckensnitt och teckenstorleken på
texten.
46
Kapitel 1
1
Välj Fönster > Egenskaper för att öppna egenskapskontrollen (om den inte
redan är öppen).
2
I den första layoutcellen markerar du all text från och med ordet ”Fly” till och
med det sista ordet ”ravioli”.
3
Välj Verdana, Arial, Helvetica, sans-serif i listrutan till höger om listrutan
Formatera i egenskapskontrollen (listrutan innehåller nu Std.teckensnitt).
4
Välj 2 i listrutan Storlek.
Texten i dokumentet uppdateras automatiskt.
5
Upprepa ovanstående steg genom att markera och formatera texten i de två
andra layoutcellerna med text.
Använda färg och stil
Nu ska du göra ytterligare ett par formatändringar i texten. Du ska få använda färg
och stil och på vis skapa en rubrik.
1
I den första layoutcellen markerar du all rubriktexten från ordet ”Fly” till och
med ”Mountains”.
2
I egenskapskontrollen klickar du på färgväljaren och flyttar sedan pipetten till
bilden Learn More About i dokumentfönstret och markerar den bruna färgen i
texten som finns i bilden.
3
Klicka på ikonen B så att texten blir i fetstil (i egenskapskontrollen).
4
Upprepa ovanstående steg genom att använda färg och stil på rubriktexterna i
de andra layoutcellerna.
5
Tryck på F12 när du vill förhandsgranska sidan i en webbläsare.
Sidan bör nu se ut som på sidan nedan.
Titta på texten. Det är för lite mellanrum mellan texten i en layoutcell och
texten i nästa. Du ska få rätta till det i nästa självstudiesteg.
6
Stäng webbläsarfönstret och klicka sedan i dokumentfönstret så att det blir
aktivt.
Dreamweavers självstudier
47
Arbeta i standardvyn
Layoutvyn är bra när du utformar layouten på webbsidor. Även om du kan justera
de flesta designelement i layoutvyn måste du utföra vissa ändringar i standardvyn.
När du växlar till standardvyn ser du hur Dreamweaver använder olika tabeller för
att skapa sidstrukturen. Layouttabeller i layoutvyn är <TABLE>-koder i
standardvyn.
Nu ska du få lära dig hur du arbetar med tabeller och fortsätta att finjustera
designen. Börja med att växla till standardvyn i Dreamweaver.
• Klicka på ikonen Standard på objektpanelen.
Sidan bör nu se ut som på bilden nedan.
Ange cellegenskaper
Cellhöjden bestämmer höjden på en cellrad. Observera mellanrummet runt
Compass-logotypen. Du ska ta bort det extra mellanrummet mellan logotypen
och navigationsknapparna.
1
Klicka i det tomma området i cellen som innehåller Compass-logotypbilden
(men klicka inte på bilden).
2
Ta bort värdet i fältet H (höjd) som finns i egenskapskontrollen för celler.
3
Klicka på ikonen Bakgrundsfärg längst ned i egenskapskontrollen och använd
pipetten för att välja svart.
Bakgrundsfärgen används på cellen.
4
48
Kapitel 1
Klicka i dokumentfönstret så visas ändringen.
Markera en tabell
Nu ska du justera mellanrummet i navigationsknapptabellen. Det enklaste sättet
att markera en tabell är att använda kodväljaren som visar HTML-koderna för
elementen i dokumentet.
Du ska få använda kodväljaren för att markera tabellen som innehåller
navigationsknapparna.
1
Klicka på cellen som innehåller bilden Trip Planner.
Titta på kodväljaren längst ned till vänster i dokumentfönstret.
Obs! Koderna som visas i kodväljaren kan variera beroende på hur många tabeller du
skapade i layoutvyn.
2
I kodväljaren klickar du på <TABLE>-koden längst till höger.
I dokumentfönstret visas nu en kant runt navigationsknapptabellen och i
egenskapskontrollen visas egenskaperna för en tabell.
Ange tabellegenskaper
Nu ska du få använda egenskapskontrollen för tabeller och ta bort det extra
mellanrummet i navigationsknapptabellen och lägg till en bakgrundsfärg i
tabellen.
1
I egenskapskontrollen klickar du på ikonen Nollställ radhöjder. Det är den övre
vänstra knappen i den undre delen av egenskapskontrollen.
Det extra mellanrummet tas bort från tabellen.
2
Klicka på ikonen Bakgrundsfärg och använder sedan pipetten och väljer svart (i
egenskapskontrollen).
Den svarta bakgrundsfärgen används på navigationsknapptabellen.
Dreamweavers självstudier
49
Lägg till cellfyllning
Nu ska du ändra cellerna som innehåller text. Som du ser är texten för nära
cellkanterna. Du ska få lägga till cellfyllning för att skapa utrymme mellan texten
och cellen.
1
Klicka i den första cellen i tabellen med text.
2
Markera tabellen genom att i kodväljaren klicka på <TABLE>-koden längst till
höger.
3
I egenskapskontrollen skriver du 10 i fältet Cellfyllnad för att lägga till 10
bildpunkters utrymme mellan texten och tabellcellerna.
4
Klicka i dokumentfönstret så visas ändringarna.
5
Spara dokumentet.
Visa platsfilerna
Om du vill visa en visuell representation av strukturen på en lokal plats använder
du vyn platskarta i Dreamweaver. Du kan också använda platskartan om du vill
lägga till nya filer på platsen, lägga till, ta bort och ändra länkar samt för att skapa
en grafikfil av platsen som du kan exportera till och skriva ut från ett
bildredigeringsprogram.
I platskartan visas alltid hemsidan överst. Nedanför hemsidan kan du se vilka filer
som hemsidan innehåller länkar till.
Det finns flera sätt att definiera hemsidan för en plats. Det enklaste sättet att ange
en hemsida är med hjälp av snabbmenyn i platsfönstret.
1
Klicka på namnlisten i platsfönstret för att aktivera fönstret. (Om du inte ser
platsfönstret väljer du Fönster > Platsens filer.)
2
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på dokumentet
my_CompassHome.html i platsfönstrets lista över lokala mappar och välj Ange
som hemsida på snabbmenyn.
3
Klicka på ikonen Platskarta i det övre vänstra området i platsfönstret. Välj
sedan Karta och filer på Platskarta-menyn.
Ikonen Platskarta
50
Kapitel 1
Platsfönstret visas nu med två vyer över den lokala platsen: till vänster är
platskartan som grafiskt representerar den aktuella strukturen av platsen Compass
(med my_CompassHome.html som hemsida) och till höger är en lista med
innehållet i den lokala mappen.
Sidan my_CompassHome.html har för tillfället inga länkar. Du kommer att få
lägga till länkar på sidan i nästa del av självstudiekursen.
Låt platsfönstret vara öppet så att du kan se hur platskartan uppdateras när du
lägger till länkar på hemsidan.
Dreamweavers självstudier
51
Länka dokumenten
Bilderna högst upp på Compass-hemsidan visar besökarna vägen till olika sidor på
Compass-platsen. Du ska få lägga till länkar för navigationsknapparna.
Du kommer att upptäcka att det finns flera olika sätt som du kan skapa länkar i
Dreamweaver. Du ska få börja med att lägga till en länk från bilden Trip Planner
på sidan TripPlanner.html med hjälp av egenskapskontrollen.
1
I platsfönstret dubbelklickar du på ikonen som motsvarar filen
my_CompassHome.html i någon av rutorna.
Filen my_CompassHome.html blir det aktiva fönstret.
2
Klicka på bilden Trip Planner i dokumentfönstret för att markera den.
3
Välj Fönster > Egenskaper när du vill öppna egenskapskontrollen (om den inte
redan är öppen).
I egenskapskontrollen visas information om den markerade bilden.
Obs! Fältet Länk innehåller ett #-tecken som ofta kallas för en ingenstans- eller
”dummy”-länk, som skapades när du infogade överrullningsbilden. Ta inte bort detta
tecken. Det kommer snart att bytas ut mot filnamnet på det dokument som du länkar till.
4
I egenskapskontrollen klickar du på mappikonen till höger om fältet Länk.
5
I dialogrutan Välj fil bläddrar du till mappen Compass_Site och sedan till filen
DW4_TripPlanner.html och klickar på Välj (Windows) eller Öppna
(Macintosh) för att välja vilken fil som ska öppnas när du klickar på knappen
Trip Planner.
Filnamnet som du länkar till visas i fältet Länk i egenskapskontrollen. Nu ska
du lägga till en länk till bilden Destinations med hjälp av egenskapskontrollen
och platsfönstret.
52
Kapitel 1
6
Klicka på namnlisten i platsfönstret för att göra fönstret aktivt. Du kan också
välja Fönster > Platsens filer. Ändra storlek på dokumentfönstret om det
behövs, så att du kan placera den vänstra sidan av dokumentfönstret och
platsfönstret sida vid sida.
7
Klicka på bilden Destinations i dokumentfönstret för att markera den.
8
Klicka på ikonen Dra till fil (till höger om fältet Länk) i egenskapskontrollen.
Dra sedan pekaren till platsfönstret och peka på filen DW4_Destinations.html
i listan Lokal mapp.
Filnamnet visas i fältet Länk i egenskapskontrollen för bilden Products.
9
Klicka på ikonen Platskarta i platsfönstret. Platskartan uppdateras med länken
som du lade till.
Ett plustecken (+) visas bredvid en fil i platskartan som innehåller länkar till
andra dokument. Klicka på plustecknet när du vill utöka platskartan och visa
de associerade filerna. Klicka på minustecknet (-) för att komprimera
platskartan.
Nu ska du få lägga till en länk för bilden Travelogs.
10
Klicka på bilden Travelogs i dokumentfönstret för att markera den.
11
I egenskapsfönstret drar du peka-på-fil-ikonen till platsfönstret och pekar på
filen DW4_Travelog.html.
12
Välj Arkiv > Spara när du vill spara ändringar du har gjort på hemsidan.
Dreamweavers självstudier
53
Testa hemsidan
Du kan inte testa länkarna i Dreamweaver utan du måste kontrollera länkarna i en
webbläsare och se efter om de fungerar som de ska.
1
Tryck på F12 när du vill förhandsgranska sidan i en webbläsare.
Kontrollera länkarna genom att klicka på navigationsknapparna. Klicka på
webbläsarens bakåtknapp när du vill återgå till hemsidan.
2
Välj Arkiv > Stäng för att stänga sidan när du har testat klart sidan.
Använda resurspanelen
På resurspanelen kan du visa platsresurserna, exempelvis bilder, HTML-färger,
länkar, Flash-filmer, andra filmtyper, skript, mallar och biblioteksposter. Du kan
visa alla platsresurser på ett ställe och därifrån enkelt lägga till innehåll på sidan
direkt från panelen.
Nu ska du få lära dig hur du använder resurspanelen när du lägger till resurser på
en sida.
Välja ett nytt dokument
Du behöver inte skapa ytterligare tabeller på hemsidan, i självstudierna finns en
HTML-fil som liknar hemsidan som du har skapat. Den innehåller en ny
tabellcell till höger i dokumentet.
Gör något av följande när du vill påbörja denna del av självstudierna:
• Om du fortsätter med självstudierna från föregående avsnitt väljer du Arkiv >
Öppna och väljer filen DW4_CompassHome2.html.
• Om du påbörjar självstudierna i detta avsnitt väljer du Platser > Öppna plats
och väljer sedan Tutorial – Dreamweaver i listan Platser så öppnas en redan
defininerad plats. Välj Arkiv > Öppna i dokumentfönstrets huvudmeny. I
dialogrutan som visas väljer du DW4_CompassHome2.html.
Filen DW4_CompassHome2.html öppnas.
54
Kapitel 1
Visa platsresurser
Börja med att öppna resurspanelen.
1
Öppna resurspanelen på något av följande sätt:
• Välj Fönster > Resurser.
• Klicka på ikonen Visa resurser i startfältet.
Resurspanelen visas.
Resursalternativ
Förhandsgranskningsområdet för resurser
Infoga en bild
Du får börja med att använda resurspanelen och infoga två bilder på sidan – en
bild med en bergsbestigare och en med text.
1
Klicka på ikonen Bilder på resurspanelen och kontrollera att alternativknappen
Plats högst upp på resurspanelen är markerad så att du kan se alla bilder på
Compass-platsen.
2
Markera bildikonen för climber.jpg i listan Namn och dra den sedan till den
mittersta tabellcellen till höger på sidan.
Dreamweavers självstudier
55
3
Tryck på högerpilen (då avmarkeras bergsbestigarbilden och
insättningspunkten placeras efter bilden) och tryck sedan på Skift+Retur för att
infoga en radbrytning.
4
Markera featureText.gif i listan Namn och dra den till radbrytningen som du
just skapade så att bilden featureText hamnar under bergsbestigaren.
Infoga en Flash-film
Nu ska du få lägga till en annan typ av resurs. Du ska dra en Flash-film till cellen
nedanför navigationsknapparna.
1
Klicka på Flash-ikonen i resurspanelen så att alla Flash-filer visas som finns på
Compass-platsen.
2
Klicka på Welcome.swf i listan Namn så att den Flash-film som du ska infoga i
dokumentet markeras.
I förhandsgranskningsområdet i resurspanelen visas en platshållare för Flashfilmen.
3
Klicka på uppspelningsknappen i förhandsgranskningsområdet i resurspanelen
om du vill visa Flash-filmen.
Uppspelningsknapp
4
Dra Welcome.swf från listan Namn till cellen nedanför navigationsknappen
Trip Planner.
En platshållare för Flash-filmer visas i den markerade cellen.
Använda en färg med hjälp av resurspanelen
Färger som du använder på HTML-element, exempelvis text eller bakgrundsfärg,
läggs automatiskt till i kategorin Färger på resurspanelen. Du kan markera en färg
på resurspanelen och använda den på text på samma sida eller i ett annat
dokument på platsen.
56
Kapitel 1
1
Placera insättningspunkten efter bergsbestigarbilden, tryck på Retur för att
lägga till ett nytt stycke och skriv sedan Yosemite.
2
Dubbelklicka på Yosemite så att texten markeras.
3
Klicka på ikonen Färger på resurspanelen för att visa HTML-färgerna på
Compass-platsen.
4
I listan Värde markerar du färgikonen #993300 och drar den till den
markerade texten för att använda färgen.
Skapa en favoritresurslista
Använd resurspanelen när du hanterar resurserna. Du kan skapa en egen grupp
med favoritresurser i resurspanelen. I nästa steg ska du få lägga till Compasslogotypen och bilden på navigationsknappen i platsens favoritlista.
1
Klicka på ikonen Bilder på resurspanelen.
2
Markera på compass_logo.gif i listan Namn och gör sedan något av följande:
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) för att öppna
snabbmenyn och välj Lägg till i Favoriter.
• Klicka på ikonen Lägg till i Favoriter i det nedre högra hörnet på resurspanelen.
Ett meddelande om att den markerade resursen har lagts till i platsens
favoritlista visas.
3
Klicka på OK.
Lägga till flera bilder i favoritlistorna
Nu är det dags att lägga till bilderna på navigationsknapparna i favoritlistan. Du
kan markera flera bilder på resurspanelen och sedan lägga till dem i favoriterna på
en gång.
1
I listan Bilder på resurspanelen klickar du på den första navigationsknappen
(MenuDestinations.gif ).
2
Markera nu de andra navigationsknapparna genom att göra något av följande:
• Tryck på Skift (Windows) och klicka på MenuTripPlanner_on.gif i listan Bilder
(den sista navigationsknappen i listan) så markeras alla
navigationsknappbilderna.
• Håll ned Skift (Macintosh) samtidigt som du markerar var och en av
navigationsknappbilderna.
3
Klicka på ikonen Lägg till i Favoriter.
4
Klicka på OK i meddelandet som visas.
Visa favoritresurser
Du kan visa resurserna som du har lagt till i favoritlistan och använda denna vy
när du infogar resurser i dokumentet.
• Klicka på alternativknappen Favoriter högst upp på resurspanelen om du vill
visa bilderna som du har lagt till i favoritlistan.
Dreamweavers självstudier
57
Infoga Flash-objekt
Flash-objekt är små grafiska SWF- (Shockwave) filer som du kan skapa när du
arbetar i Dreamweaver. Du kan skapa Flash-text- och Flash-knappobjekt. Om du
använder Flash-text kan du utforma webbsidor som använder ickestandardteckensnitt utan att bry dig om vilka teckensnitt besökaren på platsen har
på sina datorer. Flash-knappar skapas med hjälp av Flash-mallar som finns i
Dreamweaver. Det är enkelt att anpassa en mallknapp och lägga till den på
webbsidan.
Skapa ett Flash-textobjekt
Nu ska du få skapa ett Flash-textobjekt som du sedan ska använda som rubrik på
hemsidan.
1
Placera insättningspunkten ovanför bilden av bergsbestigaren (i
dokumentfönstret).
2
Klicka på ikonen Infoga Flash-text på objektpanelen.
Dialogrutan Infoga Flash-text visas.
3
I dialogrutan Infoga Flash-text anger du följande alternativ:
• I rutan Teckensnitt väljer du Verdana eller ett annat favoritteckensnitt.
• I rutan Storlek skriver du 18.
• I rutan Färg klickar du på färgrutan och använder sedan pipetten och väljer en
den brunaktiga färgen som finns i dokumentets rubriktext.
58
Kapitel 1
• I rutan Överrullningsfärg klickar du på färgrutan och flyttar sedan pipetten till
dokumentfönstret och väljer guldfärgen i tabellens bakgrund.
• I fältet Text skriver du Featured Destination.
• I fältet Spara som skriver du myText.swf.
4
Klicka på OK när du vill stänga dialogrutan Infoga Flash-text.
Visa Flash-textobjektet i dokumentet
Flash-textobjektet visas i dokumentet. Du måste spela upp Flash-objektet för att
kunna se texten med sin överrullningseffekt.
1
Om egenskapskontrollen inte redan är maximerad klickar du på
maximeringsknappen så att alla alternativ visas.
2
Klicka på Spela upp i egenskapskontrollen för Flash-text.
3
För pekaren över Flash-textobjektet i dokumentfönstret.
4
Klicka på Stopp i egenskapskontrollen när du vill avsluta uppspelningen av
objektet.
Skapa ett Flash-knappobjekt
Nu ska du få se hur enkelt det är att lägga till en Flash-knapp i ett dokument. Du
ska skapa en Flash-knapp och lägga till den under bilden med bergsbestigaren.
1
I dokumentfönstret placerar du insättningspunkten där du vill att objektet ska
visas, nedanför bilden av bergsbestigaren, klicka sedan på ikonen Infoga Flashknapp i objektpanelen.
Dialogrutan Infoga Flash-knapp visas.
Dreamweavers självstudier
59
2
I dialogrutan Infoga Flash-knapp anger du följande alternativ:
•
•
•
•
•
•
I listan Format markerar du Beveled Rect-Bronze.
3
Klicka på OK när du vill stänga dialogrutan.
I textrutan Knapptext skriver du More Details.
I rutan Teckensnitt väljer du Verdana eller ett annat teckensnitt.
I rutan Storlek skriver du 11.
Klicka på Verkställ om du vill visa Flash-knappen i dokumentet.
I textrutan Spara som skriver du myButton.swf
Flash-knappobjektet visas i dokumentet
Visa Flash-knappen i dokumentet
Flash-knappen som du infogade har en överrullningseffekt. Spela upp knappen
och se hur den ser ut.
60
Kapitel 1
1
Klicka på Spela upp i egenskapskontrollen för Flash-knappen så spelas den upp
i dokumentet.
2
För pekaren över objektet i dokumentfönstret för att visa Flash-knappens
överrullningseffekt.
3
Klicka på Stopp i egenskapskontrollen när du vill avsluta uppspelningen av
objektet.
Skapa en mall
Du kan använda mallar när du vill skapa dokument som har en enhetlig struktur
och ett enhetligt utseende. Mallar är användbara när du vill att alla sidorna på en
webbplats har liknande egenskaper.
När du har tillämpat en mall på en grupp sidor kan du ändra informationen på
denna grupp av sidor genom att redigera mallen och sedan återigen tillämpa den
på dessa sidor. Element som är unika för varje sida (exempelvis text som beskriver
en vara) förblir oförändrade medan vanliga mallelement (exempelvis
navigationsfält) uppdateras på alla sidor som använder den mallen.
Resmålssidan i Compass har länkar till flera sidor med resedetaljer som beskriver
platser som besökarna kan vara intresserade att resa till. Du ska använda designen
på en befintlig sida med resedetaljer när du skapar en mall. Om du använder en
mall garanterar du att reseinformationssidorna har samma layout och format.
Skapa en mall från en befintlig sida
I det här avsnittet ska du få skapa en mall från en befintlig resesida och sedan
använda mallen när du skapar nya resesidor.
1
I platsfönstrets lokala mapplista dubbelklickar du på ikonen för
DW4_TravelDetail_surf.html så att filen öppnas.
2
Välj Arkiv > Spara som mall.
Dialogrutan Spara som mall visas.
De befintliga mallarna, travelDetail och travelDetail_v2, har redan skapats och
används på resesidorna i den färdiga Compass-webbplatsen. Du ska få skapa
din egen version av denna mall.
3
I fältet Spara som ändrar du mallens namn: Skriv myTravelDetail och klicka på
Spara.
I dokumentfönstret ersätts DW4_TravelDetail av ett nytt dokument. Lägg
märke till att dokumentet innehåller en mallidentifierare, <<Mall>>, och ett
filtillägg för mallar (.dwt).
Dreamweavers självstudier
61
Ändra mallen
Nu är den nya mallen densamma som den sida som du sparade den från. En mall
innehåller både låsta och ändringsbara regioner. Du kan endast redigera låsta
regioner i själva mallen. Ändringsbara regioner är platshållare för innehållet som är
unikt för varje sida som mallen tillämpas på. I mallen kan du inte redigera
logotypen och navigationsknapparna. Däremot kan du redigera resmålets rubrik,
tillhörande reklammeddelande och beskrivning av resmålet.
Du ska börja med att skapa ändringsbara regioner i mallen.
1
I mallen myTravelDetail.dwt som visas i dokumentfönstret klickar du på den
översta platshållaren för Flash-filmen så att den markeras. Filmen visar
resmålets rubrik.
2
Välj Ändra > Mallar > Ny ändringsbar region.
Dialogrutan Ny ändringsbar region visas.
3
I fältet Namn skriver du titleCell som namn på regionen i mallen.
4
Klicka på OK.
En mallregion skapas. Observera fliken som innehåller mallregionens namn.
Platshållaren omges också av en ljusblå linje som representerar gränsen för det
ändringsbara området.
5
I dokumentfönstret markerar du platshållaren för Flash-reklamremsan och
väljer Ändra > Mallar > Ny ändringsbar region för att göra texten till en
ändringsbar region i mallen.
6
I fältet Namn, i dialogrutan Ny ändringsbar region, skriver du adCell och
klickar på OK.
Identifierarna för mallområdet visas i dokumentet.
7
62
Kapitel 1
I dokumentfönstret markerar du all text i den första cellen nedanför
reklamremsan och väljer Ändra > Mallar > Ny ändringsbar region för att göra
en ändringsbar region i mallen.
8
I fältet Namn, i dialogrutan Ny ändringsbar region, skriver du textCell1 och
klickar på OK.
9
I dokumentfönstret markerar du all text i den andra cellen nedanför
reklamremsan och väljer Ändra > Mallar > Ny ändringsbar region för att göra
detta till en ändringsbar region i mallen.
10
I fältet Namn, i dialogrutan Ny ändringsbar region, skriver du textCell2 och
klickar på OK.
11
Välj Arkiv > Spara när du vill spara mallfilen.
Använda mallen på en ny sida
Nu när du har angett de ändringsbara regionerna i mallen ska du få använda
mallen för att skapa en detaljsida för en resa till Nya Zeeland.
1
Välj Arkiv > Nytt från mall för att öppna ett nytt dokument.
2
Markera myTravelDetail i listan Mallar i dialogrutan Välj mall och klicka sedan
på Välj för att välja mallen som du vill använda på den nya sidan.
Mallen används på det nya dokumentet.
Sidan innehåller samma regioner och innehåll som mallen som du skapade.
Obs! Om du för muspekaren till en region i mallen som inte kan ändras, exempelvis
områdena med logotypen eller navigationsknapparna, ändras muspekaren för att
indikera att du inte kan ändra den låsta regionen.
3
Spara dokumentet med namnet myTravelDetail_mtnBike.html.
Dreamweavers självstudier
63
Redigera en mallbaserad sida
Nu ska du uppdatera dokumentet myTravelDetail_mtnBike.html genom att
uppdatera de ändringsbara regionerna med resurser och text som hänvisar till
reseinformation om mountain bike-cykling på Nya Zeeland.
1
I dokumentfönstret klickar du på Flash-platshållaren i regionen titleCell för att
markera objektet som du vill ersätta.
2
Klicka på mappikonen i fältet Fil i egenskapskontrollen. Gå till Assets/swfs och
välj text_mtnBike.swf i dialogrutan som visas.
3
Klicka på Flash-platshållaren i adCell-regionen för att markera objektet som du
vill ersätta.
4
Klicka på mappikonen i fältet Fil i egenskapskontrollen. Gå till Assets/swfs och
välj bikeAd.swf i dialogrutan som visas.
5
Välj Arkiv > Öppna och gå till DW4_MtnBikeText.txt för att öppna ett
dokument som innehåller texten för detta resmål.
6
Kopiera stycket i DW4_MtnBikeText.txt under Cell 1, ersätt sedan texten i
regionen textCell1 i dokumentet myTravelDetail_mtnBike genom att markera
regionen och sedan klistra in den kopierade texten.
7
Kopiera stycket i DW4_MtnBikeText.txt under Cell 2, ersätt sedan texten i
regionen textCell2 i dokumentet myTravelDetail_mtnBike genom att markera
regionen och sedan klistra in den kopierade texten.
Resmålsinformationen är uppdaterad.
8
Stäng DW4_MtnBikeText.txt.
9
I textrutan Titel på verktygsfältet skriver du New Zealand biking.
10
Spara dokumentet.
Kontrollera webbplatsen
Innan du skickar sidorna till en fjärrserver bör du kontrollera dem. Hittills har du
fått lära dig hur du kan testa sidorna genom att förhandsgranska dem i en
webbläsare, nu ska du få lära dig att använda andra verktyg i Dreamweaver när du
vill skapa en uppföljning för en fil och för att testa sidorna.
Först får du lära dig hur du lägger till Design Notes i en fil och sedan ska du få
köra en rapport på filerna på platsen.
64
Kapitel 1
Skapa Design Notes
Med Design Notes kan du hantera platsen genom att infoga kommentarer i
dokumentets platsfönster. Använd Design Notes om du vill schemalägga arbetet,
märka upp filer för uppföljning eller om du vill kommunicera fil- eller
platsdetaljer till gruppens medlemmar. Nu ska du få skapa Design Notes för att
följa upp en ändring på en av platsens sidor.
1
Markera DW4_Destinations.html i rutan Lokal mapp i platsfönstret (Plats >
Platsens filer).
2
Välj Arkiv > Design Notes.
Dialogrutan Design Notes visas.
3
Markera ”kräver åtgärd” i listrutan Status på fliken Grundläggande
information.
4
Klicka på kalenderikonen så att dagens datum läggs till i fältet Anteckningar.
5
Klicka i fältet Anteckningar och skriv Need to create Devil’s Tower page and
add links to documents.
6
Markera kryssrutan Visa när filen är öppen så att Design Notes öppnas
automatiskt när sidan öppnas.
7
Klicka på OK när du vill stänga dialogrutan.
En Design Notes-ikon visas i kolumnen Anteckningar i rutan Lokal mapp.
8
Markera DW4_Destinations.html i platsfönstret och öppna den.
Dokumentet och associerade Design Notes öppnas och du kan lätt se vilka
åtgärder som krävs för denna fil.
Dreamweavers självstudier
65
Rapporter för hela platsen
Du kan köra platsrapporter om du vill kontrollera tillståndet för HTML-filer och
när du vill hantera arbetsflödet. Kör rapporter på dokument-, mapp- eller
platsnivå. Du ska få köra en rapport och se om du har några namnlösa dokument
på platsen.
1
Välj Plats > Rapporter.
Dialogrutan Rapporter visas.
2
Markera Hela den lokala platsen i listrutan Rapportera om i dialogrutan
Rapporter. Under HTML Reports markerar du sedan Namnlösa dokument.
3
Klicka på Kör när du vill köra rapporten.
Dialogrutan Resultat visas med en lista över de dokument som inte har någon
sidtitel.
4
I kolumnen Fil markerar du filen genom att klicka på den.
Fältet Detaljerad beskrivning uppdateras med ett varningsmeddelande om
filen.
5
Klicka på Öppna fil för att öppna filen och rätta till problemet.
Filen öppnas.
6
I textrutan Titel på verktygsfältet skriver du Featured Destinations.
7
Spara och stäng filen när du är klar.
8
Stäng dialogrutan Resultat.
Nästa steg
Grattis! Nu har du slutfört självstudierna i Dreamweaver. Nu vet du har du
utformar sidor, lägger till innehåll och testar sidorna. Om du vill kan du fortsätta
skapa sidor och länkar till Compass-platsen. Du vet hur du ska slutföra sidorna
(du kan också använda de färdiga sidorna som referens). När du har uppdaterat
sidorna förhandsgranskar du dem för att se att överrullningar och länkar fungerar.
Om du vill lära dig mer om hur du använder Dreamweaver kan du pröva
Dreamweaver-lektionerna. Välj Hjälp > Lektioner och välj någon av lektionerna.
Om du har en kopia av både Dreamweaver och Fireworks och vill lära dig mer om
hur dessa verktyg fungerar tillsammans kan du titta på självstudierna för
Dreamweaver och Fireworks.
Mer information om HTML-kod, JavaScript-kod och CSS-formatmallar finns i
referensmaterialet som levereras med Dreamweaver. Välj Fönster > Referens.
66
Kapitel 1
2
KAPITEL 2
Grunderna i Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Det är lika lätt att komma igång med Dreamweaver som det är att öppna ett
befintligt HTML-dokument eller att skapa ett nytt. För att få ut det mesta av
Dreamweaver bör du förstå de grundläggande begrepp som ligger bakom
arbetsområdet i Dreamweaver och hur du väljer alternativ, använder kontroller
och paneler och anger inställningar som bäst passar ditt sätt att arbeta.
67
Arbetsområdet i Dreamweaver
Arbetsområdet i Dreamweaver är flexibelt och det spelar ingen roll vilket sätt du
föredrar att arbeta på eller hur erfaren du är. Här är de vanligaste komponenterna:
Verktygsfältet
Objektpanelen
Snabbmeny
Dokumentfönstret
Kodväljare
Startfältet
Egenskapskontroll
• I dokumentfönstret visas det aktuella dokumentet under tiden som du skapar
och redigerar det.
• Startfältet längst ned i dokumentfönstret innehåller knappar som du kan
använda för att öppna och stänga de vanligaste kontrollerna och panelerna.
Ikonerna i startfältet visas också på Startknappar, en flytande panel som du kan
välja på Fönster-menyn. Du kan ange vilka ikoner som ska visas i startfältet och
på panelen Startknappar genom att göra panelinställningar.
• Verktygsfältet innehåller knappar och popup-menyer som du använder för att
visa dokumentfönstret på olika sätt, för att visa alternativ och få tillgång till en
del vanliga funktioner, exempelvis förhandsgranska i webbläsare.
• Med snabbmenyerna väljer du snabbt användbara kommandon för den
aktuella markeringen. Du visar en snabbmeny genom att högerklicka
(Windows) eller Kontroll-klicka (Macintosh) på ett objekt i ett fönster.
• Objektpanelen innehåller knappar som du använder för att skapa olika typer av
objekt, exempelvis bilder, tabeller, skikt och ramar. Du kan också växla mellan
standardvyn och layoutvyn och använda ritverktygen i layoutvyn.
• I egenskapskontrollen visas egenskaper för det markerade objektet eller den
markerade texten. Du kan ändra dessa egenskaper här. (Vilka egenskaper som
visas i kontroller beror på vilket objekt eller vilken text som har markerats.)
68
Kapitel 2
• Här visas också många andra kontroller, paneler och fönster, exempelvis
historiepanelen och kodkontrollen. Många av dessa poster kan kombineras så
att de bildar fönster med flikar.
Använd Fönster-menyn när du vill öppna fönster, kontroller och paneler i
Dreamweaver. En bockmarkering bredvid ett alternativ på Fönster-menyn betyder
att det objektet är öppet (även om det kan vara dolt bakom andra fönster). Du
visar en post som inte är öppen genom att välja namnet på posten på menyn.
Om en panel eller kontroll är bockmarkerad men inte syns, väljer du Fönster >
Ordna paneler.
Olika vyer i Dreamweaver
Med Dreamweaver kan du arbeta med dokumentet på olika sätt. Du kan använda
designvyn, kodvyn eller en kombinerad vy som visar både designen och koden i
dokumentet. Du kan ändra vy genom att välja en vy i verktygsfältet. Mer
information finns i ”Använda verktygsfältet” på sidan 74.
Arbeta i kodvyn
När du skapar och arbetar med dokument genereras den underliggande HTMLkoden automatiskt. Du granskar och redigerar denna kod med någon av
kodredigerarna i Dreamweaver: kodvyn i dokumentfönstret eller kodkontrollen.
Mer information finns i ”Använda kodvyn (eller kodkontrollen)” på sidan 326.
Arbeta i designvyn
I designvyn visas en visuell representation av dokumentet i stället för den
underliggande koden. Design-vyn har två vyer – layoutvyn och standardvyn. Du
väljer dessa vyer i objektpanelen under Visa.
I layoutvyn kan du göra en sidlayout och infoga grafik, text och andra media. Mer
information finns i ”Utforma sidlayouten” på sidan 161.
Arbeta i standardvyn när du vill infoga skikt, skapa ramdokument, skapa tabeller
eller använda andra funktioner som inte finns i layoutvyn. Klicka på ikonen
Standard i objektpanelen när du vill arbeta i standardvyn.
Dokumentfönstret
I designvyn visas det aktuella dokumentet på ungefär samma sätt som det kommer
att se ut i en webbläsare. I namnlisten i dokumentfönstret visas sidans titel och
inom parentes visas namnet på rotmappen, filnamnet och en asterisk om filen
innehåller ändringar som inte har sparats.
Grunderna i Dreamweaver
69
Statusfältet, längst ned i dokumentfönstret, ger ytterligare information om det
dokument du skapar.
Dokumentstorlek och
uppskattade hämtningstid
Kodväljare
Fönsterstorlek,
popup-meny
Startfältet
I kodväljaren visas de överordnade HTML-koder som styr den markerade texten
eller de markerade objekten. Klicka på en av koderna om du vill markera dess
innehåll i dokumentfönstret. Klicka på <body> om du vill markera hela brödtexten
i dokumentet.
Med popup-menyn Fönsterstorlek kan du ändra storlek på dokumentfönstret till
en annan fördefinierad storlek eller egen storlek. Se ”Ändra storlek på
dokumentfönstret” på sidan 70.
Till höger om popup-menyn Fönsterstorlek visas den uppskattade
dokumentstorleken och hämtningstiden för sidan, inklusive alla beroende filer
som bilder och andra mediafiler. Se ”Kontrollera nedladdningstid och storlek” på
sidan 505
Startfältet visas längst ned i dokumentfönstret. Som standard öppnar
startknapparna platsfönstret, resurspanelen, HTML-formatpanelen, CSSformatpanelen, beteendepanelen, historiepanelen och kodkontrollen. Information
om hur du anger vilka knappar som ska ingå i startfältet (och i panelen
Startknappar) finns i ”Anpassa startfältet” på sidan 73.
Ändra storlek på dokumentfönstret
I statusfältet i dokumentfönstret visas fönstrets aktuella dimensioner (i
bildpunkter). Om du klickar på fönsterstorleken öppnas Fönsterstorlek-menyn,
där du kan välja en fönsterstorlek som passar flera olika och vanliga
bildskärmsstorlekar. Du kan utforma en sida som ser bäst ut i en viss storlek
genom att justera dokumentfönstret till någon av de fördefinierade storlekarna,
redigera förinställda storlekar eller skapa nya storlekar.
70
Kapitel 2
Obs! Fönsterstorleken är det inre måttet av webbläsarfönstret utan kanter. Bildskärmens
storlek visas inom parentes. Alternativet 536 x 196 (640 x 480, standard) är exempelvis
rätt storlek om besökarna använder en bildskärm med upplösningen 640 x 480 och kör
Internet Explorer (IE) eller Netscape Navigator i standardkonfigurationen.
Så här ändrar du storlek på dokumentfönstret till en förvald storlek:
Välj en storlek på popup-menyn längst ned i dokumentfönstret.
Så här ändrar du värdena på Fönsterstorlek-menyn:
1
Välj Ändra storlek på Fönsterstorlek-menyn.
2
Klicka på ett värde för bredd eller höjd i listan över fönsterstorlekar och skriv
ett nytt värde.
Om du vill att dokumentfönstret endast ska ställas in till en viss bredd (och låta
höjden vara oförändrad) markerar du ett värde för höjd och tar bort det.
3
Klicka på fältet Beskrivning och skriv beskrivande text om en viss storlek.
4
Klicka på OK när du vill spara ändringen och återgå till dokumentfönstret.
Så här lägger du till en ny storlek på Fönsterstorlek-menyn:
1
Välj Ändra storlek på Fönsterstorlek-menyn.
2
Klicka på det tomma utrymmet under det sista värdet i kolumnen Bredd.
3
Ange värden för Bredd och Höjd. Om du bara vill ange bredd eller höjd låter
du det andra fältet vara tomt.
4
Klicka på fältet Beskrivning och skriv beskrivande text om storleken som du
lade till.
5
Klicka på OK när du vill spara ändringen och återgå till dokumentfönstret.
Du kan exempelvis skriva SVGA eller standarddator bredvid posten för en
skärm i upplösningen 800 x 600 bildpunkter och 17-tums Mac bredvid posten
för en bildskärm i upplösningen 832 x 624 bildpunkter. Observera att de flesta
bildskärmar kan ställas in till olika upplösningar.
Grunderna i Dreamweaver
71
Minimera och återställa fönster och paneler (endast
Windows-användare)
Du kan minimera och återställa alla öppna Dreamweaver-fönster:
dokumentfönster, kontroller och paneler.
• Du minimerar alla Dreamweaver-fönster genom att trycka på Skift+F4, eller
välja Fönster > Minimera alla.
• Du återställa alla Dreamweaver-fönster genom att trycka på Alt+Skift+F4. Om
du har minst ett fönster öppet kan du välja Fönster > Återställ alla för att
återställa alla ytterligare fönster.
Inställningar för statusfältet
Använd inställningarna för statusfält när du vill ange alternativ för statusfältet
längst ned i dokumentfönstret. Välj Redigera > Inställningar och Statusfält om du
vill visa inställningarna.
Fönsterstorlek Med detta alternativ kan du anpassa de fönsterstorlekar som visas
på statusfältets popup-meny. Se ”Ändra storlek på dokumentfönstret” på sidan 70.
Anslutningshastighet Anger
anslutningshastigheten (i kbit per sekund) som
används för att beräkna hämtningstiden. Hämtningstiden för sidan visas i
statusfältet. Hämtningsstorleken för bilder och andra resurser visas i
egenskapskontrollen när en bild markeras.
Visa startknappar i statusfältet Startknapparna visas längst ned i
dokumentfönstret. Med startknapparna kan du öppna fönster, paneler och
kontroller. Startfältet innehåller samma knappar (med text) och funktioner. Mer
information finns i ”Anpassa startfältet” på sidan 73.
Använda startfältet
Med startfältet öppnar och stänger du olika paneler, fönster och kontroller. Du
kan också visa Startknappar, en flytande panel med identiska knappar.
Så här visar och döljer du panelen Startknappar:
Välj Fönster > Startknappar.
Om startfältet inte visas längst ned i dokumentfönstret aktiverar du Visa
startknappar i statusfältet, i inställningarna för statusfältet.
72
Kapitel 2
Så här ändrar du orienteringen av panelen Startknappar från vågrät till lodrät:
Klicka på orienteringsikonen längst ned till höger.
Information om vilka komponenter som startknapparna öppnar finns i
”Platsfönstret” på sidan 104, ”Formatera text med HTML-format” på sidan 238,
”Använda CSS-formatpanelen” på sidan 251, ”Beteendepanelen” på sidan 434,
”Automatisera uppgifter” på sidan 154, ”Använda kodvyn (eller kodkontrollen)”
på sidan 326, ”Hantera och infoga resurser” på sidan 215 och ”Använda
referenspanelen” på sidan 323.
Anpassa startfältet
Använd panelinställningarna för att ange vilka knappar som ska visas i startfältet
och på panelen Startnappar.
Så här anger du vilka knappar som ska visas i startfältet och på panelen
Startknappar:
1
Välj Redigera > Inställningar och markera Paneler i listan Kategori.
De knappar som ska visas på panelen Startknappar och startfältet visas i listan
Visa bland startknapparna.
2
Klicka på plustecknet (+) om du vill lägga till en post på panelen Startknappar
och i startfältet.
3
Markera posten och klicka på minustecknet (-) om du vill ta bort en post.
4
Om du vill ändra ordningen på knapparna på panelen Startknappar eller i
startfältet markerar du knappen i listan och klickar på en pilknapp.
Om du exempelvis vill flytta en post till höger på panelen Startknappar flyttar
du posten nedåt i listan.
5
Klicka på OK.
Panelen Startknappar och startfältet ändras och visar de poster som du angivit.
Grunderna i Dreamweaver
73
Använda verktygsfältet
Med knapparna i verktygsfältet i Dreamweaver växlar du snabbt mellan olika
dokumentvyer: Kodvyn, designvyn och en kombination av kod- och designvyn
Verktygsfältet innehåller även en del vanliga kommandon som har att göra med
vilken vy du använder och dokumentets status. Alternativen på Alternativ-menyn
(knappen till höger) ändras beroende på vilken vy du väljer.
Kodvyn
Förhandsgranska i webbläsare
Designvyn
Dokumenttitel
Kod- och designvy
Alternativ-menyn
Filstatus
Referens
Kodnavigering
Uppdatera designvyn
• Välj Visa > Verktygsfält när du vill visa eller dölja verktygsfältet.
• Om du bara vill visa koden i dokumentfönstret, klickar du på knappen Visa
kod.
• Om du vill visa en vy som innehåller både kodvyn och designvyn klickar du på
Visa kod och design.
När du väljer denna vy aktiveras alternativet Design överst på Visa-menyn.
Använd det här alternativet när du vill ange vilken vy som ska visas överst i
dokumentfönstret.
• Om du endast vill visa designvyn klickar du på Visa design.
Du kan också öppna dessa vyer med hjälp av Visa-menyn.
• Om du vill ange en titel på dokumentet använder du fältet Titel.
Om dokumentet redan har en titel, visas den i det här fältet.
• Om du vill visa Filhanterings-menyn klickar du på knappen Filhantering.
• Om du vill förhandgranska eller felsöka dokumentet i en webbläsare, klickar du
på Förhandsgranska/felsök i webbläsare och väljer en webbläsarna som visas på
menyn.
Om du vill lägga till eller ändra webbläsarna som visas i menyn, väljer du
Redigera lista över webbläsare.
• När du vill uppdatera designvyn klickar du på knappen Uppdatera design.
74
Kapitel 2
• Om du vill gå till referenspanelen klickar du på knappen Referens.
Referenspanelen innehåller referensinformation om HTML-, CSS- och
JavaScript-kod. Mer information finns i ”Använda referenspanelen” på
sidan 323.
• Du flyttar runt i koden genom att klicka på Kodnavigering. Mer information
finns i ”Felsöka JavaScript-kod” på sidan 469.
• Du öppnar Visningsalternativ-menyn genom att klicka på knappen
Visningsalternativ.
Visningsalternativ-menyn innehåller olika alternativ för varje vy. Information
om alternativ för kodvyn finns i ”Använda kodvyn (eller kodkontrollen)” på
sidan 326. Mer information om alternativ för designvyn finns i ”Utforma
sidlayouten” på sidan 161.
Obs! När båda vyerna visas i dokumentfönstret kan du använda Alternativ-menyn för
båda vyerna genom att klicka på i vyn och sedan klicka på Alternativ-menyn.
Använda snabbmenyer
I Dreamweaver finns många snabbmenyer som du kan använda för att snabbt
komma åt de vanligaste kommandona och egenskaperna som hör ihop med
objektet eller fönstret som du arbetar med. På snabbmenyerna visas endast
kommandon som rör den aktuella markeringen.
Så här använder du snabbmenyer:
1
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på objektet i
dokumentfönstret.
Snabbmenyn för det markerade objektet eller fönstret visas.
2
Välj kommandot på snabbmenyn och släpp upp musknappen.
Grunderna i Dreamweaver
75
Använda objektpanelen
Objektpanelen innehåller knappar som du använder för att infoga objekt såsom
tabeller, skikt och bilder. Välj Fönster > Objekt när du vill visa eller dölja
objektpanelen.
Så här infogar du ett objekt:
Klicka på motsvarande knapp i objektpanelen eller dra knappens ikon till
dokumentfönstret. Beroende på vilket objektet är visas motsvarande dialogruta för
infogning av objekt. Där markerar du eller infogar filen eller objektet.
Så här kringgår du dialogrutan och infogar ett tomt platshållarobjekt:
Håll ned Ctrl (Windows) eller Alternativ (Macintosh) när du infogar objektet.
(Om du exempelvis vill infoga en platshållare för en bild utan att ange en bildfil,
håller du ned Ctrl eller Alternativ och klickar på Infoga bild.)
Obs! Du kan inte kringgå alla dialogrutor med detta tillvägagångssätt. Vissa objekt,
exempelvis navigationsfält, skikt, Flash-knappar och ramar infogar inte platshållare.
Objektpanelen innehåller som standard sju kategorier: Tecken, Vanlig, Formulär,
Ramar, Head, Osynliga och Special. Panelen innehåller också knappar som du
ändrar vyn med: Standard och Layout.
• Kategorin Tecken innehåller specialtecken som copyright-symbol, eurotecken
och varumärkessymboler. Observera att dessa symboler inte visas korrekt i
webbläsare (Netscape och IE) som är äldre än version 3.0.
• Kategorin Vanlig innehåller knappar som du använder för att skapa och infoga
de vanligaste objekten, bland annat bilder, tabeller och skikt.
76
Kapitel 2
• Kategorin Formulär innehåller knappar som du använder när du skapar
formulär och infogar formulärelement.
• Kategorin Ramar innehåller vanliga ramuppsättningstrukturer.
• Kategorin Head innehåller knappar som du använder för att lägga till olika
HEAD-element,
exempelvis META-, KEYWORDS- och BASE-koder.
• Kategorin Osynliga innehåller knappar som du använder när du skapar objekt
som inte syns i webbläsarfönstret, exempelvis namngivna ankare. Välj Visa >
Visuella hjälpmedel > Osynliga element när du vill visa ikoner som indikerar
var dessa objekt finns. Klicka på ikonerna som motsvarar osynliga element i
dokumentfönstret för att markera objekten och ändra deras egenskaper. Se
”Osynliga element” på sidan 149.
• Kategorin Special innehåller knappar som du använder när du vill infoga
specialposter, exempelvis Java-miniprogram, insticksprogram och ActiveXobjekt. Mer information finns i ”Infoga media” på sidan 293.
• Under Visa på panelen Objekt kan du välja mellan standardvy (standrad) och
layoutvy. Om layoutvyn är markerad kan du också välja layoutverktygen: Rita
layoutcell och Rita layouttabell. Mer information finns i ”Utforma sidlayouten”
på sidan 161.
Du byter kategorier med hjälp av popup-menyn överst i panelen. Du kan ändra
vilket objekt som helst på panelen eller skapa egna objekt (se ”Ändra
objektpanelen” på sidan 511 och ”Skapa ett enkelt objekt” på sidan 512). Mer
information om alternativen på varje panel finns i motsvarande ämne i
Dreamweavers hjälp.
Det finns några allmänna inställningar som påverkar panelen Objekt. Du ändrar
dessa egenskaper genom att välja Redigera > Inställningar och sedan Allmänt.
• När du infogar objekt såsom bilder, tabeller, skript och HEAD-element, visas en
dialogruta där du uppmanas att ange mer information. Du kan undvika att
dessa dialogrutor visas genom att inaktivera alternativet Visa dialogrutan vid
infogning av objekt eller genom att hålla ned Ctrl när du skapar objektet. När
du infogar ett objekt och detta alternativ är avmarkerat infogas objektet med
standardattributvärden. Använd egenskapskontrollen när du vill ändra
objektegenskaper efter att objektet har infogats.
• Med inställningarna på objektpanelen kan du visa innehållet på objektpanelen
som Endast text, Endast ikoner eller som Ikoner och text.
Grunderna i Dreamweaver
77
Använda egenskapskontrollen
Med hjälp av egenskapskontrollen kan du undersöka och redigera egenskaperna
för det markerade sidelementet. (Ett sidelement är ett objekt eller text.) Du kan
markera sidelement i dokumentfönstret eller i kodkontrollen.
Välj Fönster > Egenskaper när du vill visa eller dölja egenskapskontrollen.
De flesta ändringar du gör i en egenskap tillämpas direkt i dokumentfönstret. (För
vissa egenskaper sker inte ändringarna förrän du klickar utanför utanför textfältet
som du ändrade egenskapen för, trycker på Retur eller på Tabb för att växla till en
annan egenskap.)
Innehållet i egenskapskontrollen varierar, beroende på vilket element som är
markerat. Om du vill ha information om vissa egenskaper markerar du ett
element i dokumentfönstret och klickar sedan på ikonen Hjälp i det övre, högra
hörnet i egenskapskontrollen.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna för
det markerade elementet. Klicka på maximeringsknappen längst ned till höger i
egenskapskontrollen om du vill visa fler egenskaper för elementet. (I vissa fall visas
inte vissa mindre vanliga egenskaper, även om du maximerar egenskapskontrollen.
I så fall använder du kodkontrollen eller kodvyn för att koda dessa egenskaper för
hand.)
Använda flytande paneler
De flesta paneler i Dreamweaver kan kombineras. Det innebär att du kan
kombinera dem till en enda flytande panel med flera flikar. På så sätt når du lätt
den information du behöver och samtidigt kan du hålla arbetsområdet fritt från
flera olika saker. (Startknapparna, egenskapskontrollen och platsfönstret kan dock
inte kombineras.) Paneler och kontroller ”fästs” nu automatiskt vid varandra, vid
sidan av skärmen eller dokumentfönstret. Det gör det lättare att flytta och ordna
de olika flytande panelerna och fönstren i Dreamweaver.
78
Kapitel 2
Så här kombinerar du två eller fler paneler till en panel med flikar:
1
Dra fliken (inte namnlisten) på en flytande panel över en annan flytande panel.
När en markerad kant visas runt målpanelen släpper du upp musknappen.
2
Du visar motsvarande panel genom att klicka på fliken.
Fliken för
historiepanelen
Historiepanelen dras till
skiktpanelen
Eftersom objektpanelen inte har någon flik kan du inte kombinera den med
någon annan panel genom att dra objektpanelen till någon annan panel. Du kan
dock dra fliken för en annan panel över objektpanelen om du vill kombinera dem.
Du kan däremot flyttade paneler med flikar fram och bak mellan flytande paneler
och ordna om dem så att de passar ditt sätt att arbeta (se proceduren ovan).
Så här tar du bort en panel från en panel med flikar:
Dra dess flik ut ur fönstret.
Ange inställningar för paneler
Använd inställningarna under kategorin Paneler för att ange vilka paneler och
kontroller som ska visas framför dokumentfönstret och platsfönstret och vilka som
kan döljas. Du kan också använda inställningarna för att ange vilka paneler och
kontroller som ska visas på panelen Startknappar och i startfältet.
Så här anger du var varje flytande panel ska visas i relation till dokumentfönstret:
1
Välj Redigera > Inställningar och markera Paneler i listan Kategori.
Som standard är alla fönster, paneler och kontroller markerade att visas framför
dokumentfönstret.
2
Avmarkera de fönster, paneler och kontroller som ska placeras bakom
dokumentfönstret.
Om du exempelvis vill att dokumentfönstret ska dölja kodkontrollen,
avmarkerar du alternativet Kodkontrollen. Kodkontrollen visas nu endast
framför dokumentfönstret när kontrollen är aktiv.
Om du på liknande sätt vill att dokumentfönstret ska dölja andra flytande
paneler som du har lagt till genom att anpassa Dreamweaver, avmarkerar du
Alla andra paneler.
Grunderna i Dreamweaver
79
Historiepanelen
Historiepanelen innehåller en lista över de steg som du har utfört i det aktiva
dokumentet sedan du skapade eller öppnade dokumentet. (Historiepanelen visar
inte de steg du utfört i andra ramar, i andra dokumentfönster eller i platsfönstret.)
Med historiepanelen kan du ångra ett eller flera steg. Du kan även spela upp steg
och skapa nya kommandon om du vill automatisera uppgifter.
Steg
Skjutreglage
Spela upp, knapp
Kopiera steg, knapp Spara som kommando, knapp
Skjutreglaget i historiepanelen pekar på det sista steget som du utfört.
Använda historiepanelen
Historiepanelen håller redan på alla steg du utför när du arbetar i Dreamweaver.
Du kan använda historiepanelen för att ångra flera steg samtidigt.
Välj Redigera > Ångra om du vill ångra den senste åtgären i ett dokument, precis
som i vilket annat program som helst. (Namnet på kommandot Ångra på
Redigera-menyn ändras och reflekterar den senaste ändringen som du gjorde.)
Med historiepanelen kan du också göra om steg som du redan har gjort och
automatisera ditt arbete genom att skapa nya kommandon. Mer information finns
i ”Automatisera uppgifter” på sidan 154.
Så här öppnar du historiepanelen:
Välj Fönster > Historia.
80
Kapitel 2
Så här ångrar du det sista steget:
Dra skjutreglaget uppåt i listan ett steg. Detta har samma effekt som när du väljer
Redigera > Ångra.
Det ångrade steget blir grått.
Gör något av följande när du vill ångra flera steg på en gång:
• Dra skjutreglaget så att det pekar ett steg.
• Klicka till vänster om ett steg längst skjutreglaget så flyttas reglaget automatiskt
till det steget och ångrar alla steg som det går förbi.
Obs! Om du vill bläddra till ett visst steg automatiskt måste du klicka till vänster om steget.
Om du klickar på steget så markeras det. Att markera ett steg är inte samma sak som att gå
tillbaka till det steget i historielistan.
Om du ångrar ett eller flera steg och sedan utför en ny åtgärd i dokumentet kan
du inte längre göra om stegen som du ångrade. Stegen försvinner från
historiepanelen.
Med historiepanelen kan du också upprepa steg som finns i historielistan och
automatisera uppgifter baserade på steg som du redan utfört.Se ”Automatisera
uppgifter” på sidan 154
Så här anger du hur många steg som ska lagras och visas i historiepanelen:
1
Välj Redigera > Inställningar och markera Allmänt i listan Kategori.
2
Ange ett värde i textrutan Maximalt antal historiesteg.
Standardvärdet bör vara tillräckligt för de flesta användare. Ju högre nummer
du anger desto mer minne kräver historiepanelen. Detta kan påverka
prestandan och göra arbetet långsammare. När historiepanelen kommer upp i
det maximala antalet steg, raderas de första stegen.
Obs! Du kan inte ändra stegordningen i historiepanelen. Tänk inte på historiepanelen som
en godtycklig uppsättning kommandon, utan som ett sätt att titta på de steg som du har
utfört och i den ordning som du utförde dem.
Grunderna i Dreamweaver
81
Så här raderar du historielistan för det aktuella dokumentet:
Välj Radera historia på snabbmenyn i historiepanelen.
Med detta kommando tar du också bort all ångrainformation för det aktuella
dokumentet. När du har rensat historielistan kan du inte ångra de steg som tagits
bort. (Observera att kommandot Radera historia inte ångrar några steg utan tar
bara bort dem från minnet.)
Använda andra paneler i Dreamweaver
Arbetsytan i Dreamweaver består av många andra paneler. Här är några av dessa:
Kodkontrollen visar den kod som webbläsarna använder när dokumentet visas som
en webbsida. Välj Fönster > Kodkontrollen när du vill visa eller dölja
kodkontrollen.
Ändringar du gör i dokumentfönstret görs samtidigt i kodkontrollen. När du
skriver HTML-kod i kodkontrollen och sedan klickar utanför kontrollen så visas
motsvarande ändringar i dokumentfönstret. Mer information finns i ”Använda
kodvyn (eller kodkontrollen)” på sidan 326.
Om du vill göra mindre ändringar av HTML-koden kan du använda Quick Tag
Editor (snabb kodredigerare) i stället för kodkontrollen. Om du vill visa Quick
Tag Editor trycker du på Ctrl+T (Windows), Kommando+T (Macintosh) eller
väljer Ändra > Quick Tag Editor. Mer information finns i ”Redigera en HTMLkod i designvyn” på sidan 333.
Referenspanelen innehåller
detaljerad information om den HTML-kod du
arbetar med, även kodattribut. Du öppnar referenspanelen från Fönster-menyn,
startfältet eller kodkontrollen.
Du kan exempelvis markera en IMG-kod, klicka på knappen Referens i
verktygsfältet och se vilka attribut som gäller (ALIGN, BORDER m.m.). Mer
information finns i ”Använda referenspanelen” på sidan 323.
Med Dreamweavers felsökningsprogram för JavaScript kan du felsöka
JavaScript-dokument. Du kan öppna felsökningsprogrammet från Fönstermenyn. Mer information finns i ”Felsöka JavaScript-kod” på sidan 469.
82
Kapitel 2
Arbeta med färger
I många av dialogrutorna och i egenskapskontrollen för flera olika sidelement i
Dreamweaver finns en färgruta. När du klickar på den öppnas en färgpalett.
Använd färgpaletten när du vill välja en färg för ett element.
Så här väljer du en färg i Dreamweaver:
1
Klicka på en färgruta i en dialogruta eller i egenskapskontrollen.
Färgväljaren.
Färgrutan i
egenskapskontrollen
2
Gör något av följande:
• Använd pipetten för att välja en färg från paletten. Alla färger i paletterna
Färgkuber (standard) och Halvton är webbsäkra. Andra paletter är det inte.
• Använd pipetten när du vill hämta en färg någonstans från skärmen, även
utanför fönstren i Dreamweaver. Om du klickar på skrivbordet eller något
annat program kopieras färgen från den plats, men du kan växla till det andra
programmet. I så fall klickar du på ett Dreamweaver-fönster för att fortsätta att
arbeta i Dreamweaver eller håller ned musknappen när du flyttar från
Dreamweaver till skrivbordet så att du inte behöver växla från Dreamweaver.)
• Du utökar färgvalet genom att använda popup-menyn överst till höger i
färgväljaren. Du kan välja Färgkuber, Halvton, Windows OS, Mac OS,
Gråskala och Fäst mot webbsäkra.
Observera att paletterna Färgkuber och Halvton är webbsäkra medan Windows
OS, Mac OS och Gråskala inte är det. Om du använder en palett som inte är
webbsäker och sedan väljer Fäst mot webbsäkra ersätts den markerade färgen av
den närmsta webbsäkra färgen. Det är alltså inte säkert att färgen blir så som
den ser ut.
• Om du vill ta bort den aktuella färgen utan att välja en annan färg, klickar du
på den genomstrukna knappen.
• Du öppnar färgväljaren genom att klicka på knappen Färgväljaren.
Grunderna i Dreamweaver
83
Webbsäkra färger
I HTML uttrycks färger som hexadecimala värden (exempelvis, #FF0000) eller som
färgnamn (red). En webbsäker färg är en färg som ser likadan ut i Netscape
Navigator och Microsoft Internet Explorer på både Windows och Macintosh när
du kör i 256-färgsläge. Normalt finns 216 gemensamma färger och alla
hexadecimala värden som är en kombination av paren 00, 33, 66, 99, CC eller FF
(RGB-värden 0, 51, 102, 153, 204 och 255) motsvarar webbsäkra färger.
Testning visar dock att det endast finns 216 webbsäkra färger. Internet Explorer i
Windows återger inte färgerna #0033FF (0,51,255), #3300FF (51,0,255),
#00FF33 (0,255,51) och #33FF00 (51,255,0) korrekt.
Paletterna Färgkuber (standard) och Halvton i Dreamweaver använder den
webbsäkra paletten på 216 färger. När du väljer en färg från en av dessa paletter
visas färgens hexadecimala värde.
Om du vill välja en färg som inte är webbsäker, klickar du på systemets färgväljare
genom att klicka på knappen Systemets färgväljare längst upp till höger i
färgväljaren. Systements färgväljare är inte begränsad till webbsäkra färger.
UNIX-versioner av Netscape Navigator använder en annan färgpalett än den som
används i Windows- och Macintosh-versionerna. Om du endast arbetar med
utveckling på UNIX-webbläsare (eller om din målgrupp är Windows- eller
Macintosh-användare med 24-bitars bildskärmar eller UNIX-användare med 8bitars bildskärmar) bör du överväga att använda hexadecimala värden som
kombinerar paren 00, 40, 80, BF eller FF, som genererar webbsäkra färger i
SunOS.
Ange inställningar
I Dreamweaver finns inställningar som styr det allmänna utseendet på gränssnittet
i Dreamweaver samt alternativ som rör olika funktioner, exempelvis skikt,
formatmallar, visning av HTML- och JavaScript-kod, externa redigerare och
förhandsgranskning av sidor i webbläsare. Information om olika inställningar
finns i denna användarhandbok i samband med tillhörande avsnitt.
I handboken beskrivs endast de vanligaste inställningarna. Mer information om
specifika inställningar som inte finns med här finns under motsvarande ämne i
Dreamweavers hjälp.
84
Kapitel 2
Allmänna inställningar
De allmänna inställningarna påverkar hur Dreamweaver visas. Du ändrar dessa
inställningar genom att välja Redigera > Inställningar och klicka på Allmänt. De
allmänna inställningarna är uppdelade i två underkataloger: filalternativ och
redigeringsalternativ. Mer information om dessa alternativ finns i hjälpen.
Inställningar för teckensnitt och kodning
Använd inställningar för teckensnitt/kodning när du vill ange
teckensnittskodning för nya dokument och när du vill ange teckensnitten som
används när varje teckensnittskodning visas. Hur ett dokument kodas avgör hur
det sedan visas i en webbläsare. Med Dreamweavers teckensnittsinställningar kan
du arbeta med text i ett teckensnitt och en storlek som du själv föredrar, utan att
det påverkar dokumentets utseende i en webbläsare.
Så här ändrar du kodningen av det aktuella dokumentet:
Välj Ändra > Sidegenskaper och markera sedan en kodning i listrutan
Dokumentkodning.
Så här ändrar du standardkodningen som används när du skapar nya dokument:
Välj Redigera > Inställningar och klicka på Teckensnitt / Kodning i listan Kategori
och markera en kodning i listrutan Standardkodning.
Så här anger du vilka teckensnitt som ska användas för varje kodning:
1
Välj Redigera > Inställningar och klicka på Teckensnitt / Kodning i listan
Kategori.
2
Markera kodningstyp (exempelvis Västerländsk (Latin1) eller Japansk) i listan
Teckeninställningar, välj sedan teckensnitt som ska användas för den
kodningen i listrutorna under Teckeninställningar.
Mer information om inställningar av teckensnitt/kodning finns i hjälpen.
Grunderna i Dreamweaver
85
Använda Dreamweaver med andra program
Dreamweaver underlättar din webbdesign och utvecklingsprocess genom att göra
det lätt för dig att arbeta med andra program. Information om hur du arbetar med
andra program, exempelvis webbläsare, HTML-redigerare, bildredigerare och
animeringsverktyg, finns i följande avsnitt:
• Mer information om hur du använder Dreamweaver tillsammans med andra
HTML-redigerare, exempelvis HomeSite eller BBEdit, finns i ”Använda
externa HTML-redigerare” på sidan 345.
• Du kan själv välja vilken/vilka webbläsare du vill använda vid
förhandsgranskning. Se ”Förhandsgranska i webbläsare” på sidan 500.
• Du kan starta ett externt bildredigeringsprogram, exempelvis Macromedia
Fireworks, från Dreamweaver. Se ”Använda en extern bildredigerare” på
sidan 273.
• Du kan konfigurera Dreamweaver så att olika redigerare startar för olika
filtyper. Se ”Starta en extern redigerare” på sidan 294.
• Mer information om hur du lägger till animeringar på webbsidan med Flashfilmer finns i ”Flash-innehåll” på sidan 296.
• Information om hur du lär dig att lägga till interaktivitet på sidan med
Shockwave-filmer finns i ”Shockwave-filmer” på sidan 305.
Grunderna i att anpassa Dreamweaver
Det finns några grundläggande tekniker som du kan använda för att anpassa
Dreamweaver så att det passar ditt sätt att arbeta. Genom att ange olika
inställningar kan du exempelvis skapa egna kortkommandon. Genom att lägga till
tillägg kan du anpassa arbetsområdet utan att behöva kunna använda avancerad
kod eller redigera textfiler. Mer information om avancerade anpassningsfunktioner
finns i ”Anpassa Dreamweaver” på sidan 509.
Använda redigeraren för snabbtangenter
Använd redigeraren för snabbtangenter när du vill skapa egna kortkommandon,
redigera befintliga kortkommandon eller använda förinställda kortkommandon.
Så här öppnar du redigeraren för snabbtangenter:
Välj Redigera > Kortkommandon.
86
Kapitel 2
Dialogrutan Snabbtangenter visas. Här kan du välja bland flera alternativ och
kommandon som du kan redigera.
Duplicera uppsättning,
knapp
Ta bort uppsättning,
knapp
Spara som HTML,
knapp
Ändra namn på
uppsättning, knapp
Aktuell uppsättning En meny som innehåller de förinställda kortkommandona i
Dreamweaver samt eventuella kortkommandon som du har angett. Enligt
standardinställningen är den aktuella uppsättningen den som Dreamweaver
använder i det aktuella dokumentet.De förintsällda uppsättningarna visas överst
på menyn. Om du känner till kortkommandona i Dreamweaver 3 kan du
använda dem genom att välja den förinställda Dreamweaver 3-uppsättningen. (I
den här uppsättningen innehåller Dreamweaver 3-uppsättningen
kortkommandona för funktioner i Dreamweaver 3 och kortkommandona för
funktioner i Dreamweaver 4 som inte fanns i Dreamweaver 3.)
Kommandon En
listruta där du kan välja vilken kommandokategori du vill
redigera. Du kan exempelvis redigera menykommandon, exempelvis kommandot
Öppna fil, eller något av kodredigeringskommandona, exempelvis Kontrollera
klammerparenteser.
Kommandolista Visar de kommandon som är associerade med den kategori du
valde på menyn Kommandon, tillsammans med tillhörande kortkommandon.
Kommandokategorierna Menykommandon och Platsmenykommandon visar
denna lista som en trädvy som replikererar menystrukturerna. De andra
kategorierna visar kommandon efter namn (exempelvis Avsluta program).
Visar listan med kortkommandon som är tilldelade det
markerade kommandot.
Kortkommandon
Tangentkombination
Visar den nya tangentkombinationen du anger.
Grunderna i Dreamweaver
87
När du klickar på plustecknet läggs ett nytt kortkommando till i det
aktuella kommandot. Klicka på plustecknet (+) när du vill aktivera fältet
Kortkommandon. Skriv ett nytt tangentkommando och klicka på Ändra för att
ändra kortkommandot för detta kommando. Du kan tilldela två olika
kortkommandon till varje kommando.
Plustecknet
Minustecknet När du klickar på plustecknet tas det markerade kortkommandot
bort från listan över kortkommandon.
Ändra Aktiverar det nya kortkommandot på kommandot och lägger till det i
listan över kortkommandot.
• Klicka på knappen Duplicera uppsättning när du vill duplicera den aktuella
uppsättningen. Du kan ge uppsättningen ett namn eller behålla
standardnamnet (den aktuella uppsättningens namn med tillägget ”kopia”).
• Klicka på knappen Ändra namn när du vill ändra namn på den aktuella
uppsättningen.
• Klicka på knappen Spara som HTML när du vill spara den aktuella
uppsättningen i ett HTML-tabellformat som är lätt att visa och skriva ut. Du
kan öppna HTML-filen i webbläsaren och skriva ut kortkommandona.
• Klicka på knappen Ta bort när du vill ta bort kopior och anpassade
uppsättningar. (Du kan inte ta bort den aktiva uppsättningen.)
Så här tar du bort ett kortkommando från ett kommando:
1
Välj den kommandokategori som innehåller kortkommandot du vill ta bort, på
menyn Kommandon, exempelvis Platsmenykommandon.
I listan visas de kommandon som är associerade med den kategorin.
2
Välj det kortkommando i listan som du vill ta bort.
En lista med kortkommandon som är tilldelade kommandona visas.
3
Markera texten du vill ta bort.
4
Klicka på minustecknet (-).
Så här lägger du till ett kortkommando:
1
Välj kommandokategorin som innehåller kommandot.
I listan visas de kommandon som är associerade med den kategorin.
2
Välj kommandot i listan över kommandon.
Kortkommandon som (eventuellt) är tilldelade kommandot visas i listan.
3
88
Kapitel 2
Klicka på plustecknet (+). Fältet för kortkommando aktiveras och
insättningspunkten flyttas till fältet Tangentkombination.
4
Tryck på den tangentkombination du vill lägga till. Kombinationen visas i
fältet Tangentkombination.
Om det inte går att att lägga till kortkommandot, om det exempelvis redan är
tilldelat ett annat kommando, visas ett varningsmeddelande.
5
Klicka på Ändra. Det nya kortkommandot tilldelas till kommandot.
Så här redigerar du ett befintligt kortkommando:
1
Välj kommandokategorin som innehåller kommandot.
I listan visas kommandona i den valda kategorin.
2
Välj kommandot i listan över kommandon.
Kortkommandon som (eventuellt) är tilldelade kommandot visas i fältet
Kortkommandon. Om mer än ett kortkommando är tilldelat till ett
kommando måste du markera det som du vill ändra.
3
Klicka i fältet Tangentkombination och skriv kortkommandot.
4
Klicka på knappen Ändra när du vill ändra kortkommandot.
Obs! Om det är ett problem med kortkommandot visas ett förklarande meddelande
nedanför fältet Tangentkombination och det kanske inte går att lägga till, ta bort eller
redigera kortkommandot. Om kortkommandot exempelvis redan är tilldelat till ett annat
kommandot, visas ett varningsmeddelandse nedanför fältet Tangentkombination.
Lägga till tillägg i Dreamweaver
Tillägg är nya funktioner som du enkelt kan lägga till i Dreamweaver 4. Du kan
använda många typer av tillägg. Det finns exempelvis tillägg som du kan använda
för att formatera om tabeller, ansluta till databaser och som hjälp när du skriver
skript för webbläsare.
De senaste tilläggen för Dreamweaver finns på webbplatsen: http://
www.macromedia.com/exchange/dreamweaver/. Där kan du logga in och hämta
tillägg (många är kostnadsfria), delta i diskussionsgrupper, visa tittarsiffror och
installera och använda Package Manager. Du måste installera Package Manager
innan du kan hämta tillägg.
Grunderna i Dreamweaver
89
Package Manager körs tillsammans med Dreamweaver och du kan därför
installera och hantera tillägg. När du har hämtat och installerat Package Manager
från Exchange-platsen startar du Package Manager direkt från Dreamweaver
genom att välja Hantera Exchange-paket på Kommandon-menyn.
Så här installerar och hanterar du tillägg:
1
Klicka på hämtningslänken som finns på webbplatsen för tillägget du vill
hämta.
Du kan välja att öppna och installera det direkt från webbplatsen eller spara det
på disk.
• Om du öppnar tillägget direkt hanterar Package Manager installationen
automatiskt.
• Om du sparar tillägget på disk sparar du paketfilen (.mxp) i mappen
Downloaded Extensions i Dreamweaver-mappen på datorn. (Exempel: Den
här datorn\c:\Program\Macromedia\Dreamweaver
4\Configuration\Extensions.)
2
Dubbelklicka på paketfilen eller välj Installera paket på Arkiv-menyn i Package
Manager.
Filen installeras i Dreamweaver. En del tillägg är inte tillgängliga förrän du har
startat om Dreamweaver. Det kan hända att du blir ombedd att avsluta och
starta om programmet.
Använd Package Manager när du vill ta bort tillägg och även när du vill visa mer
information om tilägget.
90
Kapitel 2
3
KAPITEL 3
Planera och konfigurera webbplatsen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
En webbplats är flera länkade dokument som delar olika attribut, exempelvis
närliggande ämnen, liknande design eller samma syfte.
Macromedia Dreamweaver är ett verktyg som du använder för att skapa och
underhålla webbplatser. Du kan använda det för att skapa kompletta webbplatser
samt för enskilda dokument. Du får bäst resultat om du utformar och planerar
webbplatsen innan du skapar några av sidorna som ska ingå.
Obs! Om du inte kan vänta, utan måste skapa ett dokument direkt, kan du pröva några av
Dreamweavers dokumentverktyg och göra ett exempeldokument. (Se ”Skapa, öppna och
spara HTML-dokument” på sidan 144.) Börja inte med avancerad dokumentutveckling
förrän du har satt upp en plats.
Det första steget när du skapar en webbplats är planering. Se ”Planera och utforma
webbplatsen” på sidan 91. Nästa steg är att sätta upp grundstrukturen för platsen,
se ”Använda Dreamweaver för att göra en ny plats” på sidan 97. Om du redan har
en plats på en webbserver och vill börja använda Dreamweaver för att redigera
den, se ”Skapa en fjärrplats” på sidan 119.
Planera och utforma webbplatsen
Termen plats på Dreamweaver-språk kan antingen referera till en webbplats eller
till en lokal lagringsplats för de dokument som hör till en webbplats. När du
börjar fundera på att skapa en webbplats bör du följa vissa planeringssteg som ökar
chanserna för att platsen ska bli så bra som du vill. Även om du bara gör en egen
hemsida som bara familj och vänner ska se, kan det vara till din fördel att noggrant
planera platsen så att alla kan använda den på ett bra sätt.
91
Bestämma vilka mål du har
Att bestämma vilka mål du har är det första steget i planeringen av en webbplats.
Ställ frågor till dig själv eller din kund om platsen. Vad hoppas du kunna uppnå
med webbplatsen? Skriv ner dina mål så att du kommer ihåg dem när du går
igenom designprocessen. Att ha ett eller flera mål hjälper dig att skapa en
webbplats efter de behov och målsättningar som finns.
En webbplats som presenterar nyheter om ett visst ämne bör ha ett annat utseende
och andra funktioner än en webbplats som säljer produkter. De mål du sätter upp
påverkar hur användaren ska kunna förflytta sig på webbplatsen, vilket medium
du ska använda (Flash, Director m.m.) och hur webbplatsen ska se ut och fungera.
Välj en målgrupp
När du har bestämt dig för vad du vill uppnå med webbplatsen måste du komma
fram till vem du vill ska besöka webbplatsen. Detta kanske kan verka som en dum
fråga, eftersom de flesta vill att så många som möjligt ska besöka deras webbplats.
Frågan är dock motiverad, eftersom det är svårt att skapa en webbplats som alla i
hela världen ska kunna använda. Människor använder olika webbläsare, ansluter i
olika hastighet och en del har insticksprogram och andra inte. Alla dessa faktorer
påverkar hur platsen används. Därför bör du bestämma dig för en målgrupp.
Fundera på vilka som kommer att lockas till din webbplats, eller vilka du vill locka
dit. Vilka typer av datorer tror du att de använder? Vilken plattform kommer att
vara den vanligaste (Macintosh, Windows, Linux m.m.)? Vilken är den
genomsnittliga anslutningshastigheten (33,6-modem eller bredband)? Vilka typer
av webbläsare och bildskärmsstorlekar kommer de att använda? Vill du skapa en
webbplats på ett intranät där alla använder samma operativsystem och webbläsare?
Allt detta påverkar det sätt som användarna ser din webbplats.
När du har valt en målgrupp och kommit fram till vilka datorer,
anslutningshastigheter och webbläsare de kommer att använda, kan du gå vidare
till själva utformningen.
Anta exempelvis att målgruppen huvudsakligen använder Windows, 17tumsskärmar och Internet Explorer 3.0 eller högre. När du utformar webbsidan
bör du testa att platsen då fungerar bäst i Microsoft Internet Explorer på en
Windows-dator med en skärmstorlek på 800 x 600 bildpunkter. Ett fåtal
användare kanske använder Netscape Navigator på en Macintosh-plattform, men
du bör ändå se till att webbplatsen fungerar på dessa datorer, även om den inte
visas precis likadant som för din huvudsakliga målgrupp.
92
Kapitel 3
Skapa platser för webbläsarkompatibilitet
När du skapar platsen bör du vara medveten om vilka olika webbläsare som
besökarna troligtvis kommer att använda. Där det är möjligt bör du utforma
webbplatsen så att de är kompatibla med så många webbläsare som möjligt.
Mer än 25 olika webbläsare används och de flesta har getts ut i fler än en version.
Även om du har Netscape Navigator och Microsoft Internet Explorer som
målwebbläsare, vilket används av de flesta på Internet, bör du vara medveten om
att alla inte använder den senaste versionen av webbläsare. Om platsen ligger på
Internet så kommer någon förr eller senare att besöka den med Netscape
Navigator 2.0 eller med webbläsaren som AOL ger ut till sina kunder eller med en
textbaserad webbläsare som exempelvis Lynx.
Det finns vissa omständigheter då du inte behöver skapa platser som kan visas i
olika webbläsare. Om platsen exempelvis endast är tillgänglig på ditt företags
intranät och du vet att alla anställda använder samma webbläsare, kan du
optimera platsen och använda funktioner som bara finns i den webbläsaren.
Detsamma gäller om du skapar HTML-sidor som ska distribueras på en CDROM-skiva och du samtidigt distribuerar en webbläsare på CD-ROM-skivan. Då
kan du anta att alla kunder har tillgång till den webbläsaren.
I de flesta fall är det dock viktigt att göra så att platsen kan visas i så många
webbläsare som möjligt. Välj ut en eller två webbläsare som målwebbläsare och
utforma platsen för dessa webbläsare, men utforska platsen med andra webbläsare
ibland så undviker du för mycket inkompatibelt innehåll. Du kan också skicka ett
meddelande till en diskussionsgrupp och be andra användare att besöka platsen.
Det kan vara ett bra sätt att få kommentarer om webbplatsen från en bred publik.
Ju mer sofistikerad platsen är vad det gäller layout, animering, multimediainnehåll
och interaktivitet, desto mindre sannolikhet är det att den är kompatibel på flera
webbläsare. Alla webbläsare kan exempelvis inte köra JavaScript. En sida med
vanlig text som inte innehåller några specialtecken kan med stor säkerhet visas på
rätt sätt i alla webbläsare, men en sådan sida kan vara mycket mindre tilltalande
rent estetiskt än en som använder bilder, layout och interaktion på ett effektivt
sätt. Försök att nå en balans mellan maximal effekt och maximal kompatibilitet.
Ett sätt att tackla problemet är att använda flera versioner av vissa viktiga sidor,
som exempelvis hemsidan. Du kan exempelvis skapa en version av den sidan med
ramar och en utan. Därefter kan du inkludera en funktion som automatiskt går
över till versionen utan ramar om besökaren har en webbläsare som inte är
kompatibel med ramar. Mer information finns i ”Använda beteendeåtgärderna
som ingår i Dreamweaver” på sidan 442.
Planera och konfigurera webbplatsen
93
Organisera platsstrukturen
Om du organiserar platsen noggrant från början kan det spara dig både tid och
irritation senare. Om du börjar skapa dokument utan att tänka på var i
mapphierarkin de ska placeras, kanske du sitter där med en enorm, otymplig
mapp full med filer spridda över ett antal mappar med liknande namn.
Det vanligaste sättet att sätta upp en plats är att skapa en mapp på hårddisken som
innehåller alla filer som hör till platsen (kallas den lokala platsen) och sedan skapa
och redigera dokumenten i den mappen. Sedan kopierar du dessa filer till en
webbserver när du är klar att publicera platsen och låta användarna titta på den.
Detta tillvägagångssätt är bättre än att skapa och redigera filer på själva
webbplatsen, eftersom du kan testa ändringar på den lokala platsen innan du gör
de tillgängliga för andra. När du sedan är klar kan du överföra de lokala
platsfilerna och uppdatera hela webbplatsen på en gång.
I ”Använda Dreamweaver för att göra en ny plats” på sidan 97 finns information
om hur du koordinerar den lokala platsen med Dreamweaver. När du skapar den
lokala platsen med Dreamweaver är det lättare att hantera platsfilerna, spåra länkar
och uppdatera sidor.
Dela upp platsen i olika kategorier. Lägg
närliggande sidor i samma mapp. Placera
exempelvis företagets pressreleaser, kontaktinformation och lediga jobb i samma
mapp och produktkatalogen i en annan mapp. Använd undermappar om det
behövs. Med den här typen av organisation blir webbplatsen både lättare att
hantera och att flytta runt i.
Bestäm var exempelvis bild- och ljudfiler ska placeras. Det
är praktiskt att placera
alla bilder på ett ställe. På så sätt blir det enkelt att hitta bilden när du vill infoga
den på en sida. Utvecklare placerar ibland alla icke-HTML-poster som ska
användas på platsen i en mapp med namnet Assets. Den mappen kan sedan i sin
tur innehålla andra mappar, exempelvis en mapp med bilder (Images) en med
Shockwave-filmer (Shockwave) och en med ljudfiler (Sound). Du kan också ha en
separat mapp med namnet Assets för varje grupp med relaterade sidor på platsen
om det inte är så många filer som delas bland de olika grupperna.
Plats 1
Plats 2
Min_plats1(rotmapp)
Om_företaget
Katalog
Resurser (för hela platsen)
index.html (home page)
Min_plats2(rotmapp)
Om_företaget
Resurser
Katalog
Resurser
index.html (home page)
94
Kapitel 3
Använd samma struktur på den lokala platsen och på fjärrplatsen. Den
lokala
platsen och fjärrwebbplatsen bör ha exakt samma struktur. Om du skapar en lokal
plats med hjälp av Dreamweaver och sedan skickar allt till en fjärrplats kommer
den lokala strukturen att dupliceras och se exakt likadan ut på fjärrplatsen.
Skapa din egen stil
Du sparar en hel del tid framöver genom att planera utformningen och layouten
innan du börjar arbeta i Dreamweaver. Det kan vara så enkelt som att göra en skiss
av hur du vill att layouten ska se ut. Ett mer avancerad sätt är att skapa en
sammansatt ritning av platsen med hjälp av ett särskilt program, exempelvis
Macromedia Freehand eller Fireworks. Det viktiga är att du har en skiss av
layouten och utformningen så att du kan följa den när du börjar skapa platsen.
Det är viktigt att sidorna är enhetliga när det gäller layout och utformning. Du vill
ju att användarna ska kunna klicka sig igenom sidorna utan att bli förvirrade av att
alla sidor ser helt olika ut eller att navigationsknapparna är på olika platser på varje
sida.
Utforma ett navigeringsschema
Ett annat område där planering lönar sig är navigering. När du utformar platsen
ska du tänka på den upplevelse som du vill att besökarna till platsen ska få. Tänk
dig in hur en besökare vill kunna gå från ett område till ett annat. Fundera på
följande:
”Du är här” Besökarna
ska snabbt kunna veta var någonstans på webbplatsen de är
och hur de återgår till sidan på den översta nivån.
Söka och index Gör
det enkelt för besökarna att hitta den information de söker
efter.
Kommentarer Skapa
en möjlighet för besökarna att kontakta webbmastern (om
det är lämpligt) om något är fel med platsen och att kontakta andra relevanta
personer som är associerade med företaget eller platsen.
Utforma ett sätt för hur navigeringen ska se ut. Navigeringen bör vara likadan på
alla sidor på webbplatsen. Om du placerar ett navigationsfält tvärs över hemsidan,
bör du ha fältet där på alla länkade sidor också.
I Dreamweaver finns det två navigationsverktyg som du kan använda för att skapa
ett navigeringsschema. Mer information finns i ”Länkar och navigering” på
sidan 349.
Planera och konfigurera webbplatsen
95
Planera och samla alla resurser
När du vet hur layouten ska se ut kan du skapa och samla de resurser du kommer
att behöva. Resurser kan exempelvis vara bilder, text och media (Flash, Shockwave
och mer). Se till att du har alla dessa poster klara innan du börjar utveckla själva
platsen. Annars måste du hela tiden avbryta utvecklingen för att hitta en bild eller
skapa en knapp.
Om du använder bilder och grafik från en clipart-plats eller om någon gör dem åt
dig, bör du samla ihop dem och placera dem i en mapp på platsen (se ”Organisera
platsstrukturen” på sidan 94). Om du skapar resurserna själv, bör du skapa alla
innan du börjar med utvecklingen, även eventuella bilder som du behöver om du
använder överrullning. Ordna sedan resurserna så att du lätt når dem när du
arbetar med platsen i Dreamweaver.
I Dreamweaver kan du enkelt återanvända sidlayouter och sidelement i olika
dokument, genom att använda mallar och bibliotek. Det är dock enklare att skapa
nya sidor med mallar och bibliotek än det är att använda dem i befintliga
dokument.
Använd mallar om många av sidorna ska ha samma layout. Planera och utforma en
mall för den layouten. Därefter kan du skapa nya sidor som är baserade på den
mallen. Om du vill ändra layouten för alla sidor behöver du bara ändra mallen.
Obs! Det finns vissa restriktioner för vilka ändringar du kan göra i dokument som är
baserade på mallar. Det är bra att använda mallar i gruppmiljöer och på så vis säkerställa att
alla använder samma sidlayout. Biblioteksposter kan visa sig vara mer flexibla i miljöer där
du inte arbetar i grupp.
Använd biblioteksposter om du vet att en viss bild eller annat innehåll ska visas på
flera sidor på hela platsen, utforma innehållet redan från början och göra det till
en bibliotekspost. Om du senare ändrar biblioteksposten kommer den nya
versionen att visas på alla sidor som använder den.
Mer information om hur du återanvänder sidlayouter och element finns i
”Återanvända innehåll med mallar och bibliotek” på sidan 371.
96
Kapitel 3
Använda Dreamweaver för att göra en ny
plats
När du har skapat en platsstruktur (se ”Organisera platsstrukturen” på sidan 94),
måste du skapa den nya platsen i Dreamweaver. Att skapa denna lokala plats i
Dreamweaver betyder att du kan använda Dreamweaver med FTP för att överföra
platsen till webbservern, automatiskt spåra och underhålla länkarna och dela filer.
Du bör skapa den lokala platsen i Dreamweaver innan du börjar skapa sidorna.
Den lokala platsen är den platsstruktur som du skapar på datorn och som
innehåller alla mappar, resurser och filer en viss plats (se ”Organisera
platsstrukturen” på sidan 94).
Den lokala rotmappen till platsen bör vara en mapp som du endast använder till
den platsen. Ett sätt att hålla ordning på platserna är att skapa en mapp med
namnet Sites och sedan skapa lokala rotmappar i den mappen; en lokal
platsrotsmapp för varje plats som du arbetar med.
Så här skapar du en ny plats:
1
Välj Plats > Ny plats.
I dialogrutan Platsdefinition som visas är kategorin Lokal info markerad.
Planera och konfigurera webbplatsen
97
2
Ange följande alternativ:
• I textrutan Platsnamn anger du namnet på platsen. Platsnamnet visas i
platsfönstret och på undermenyn Plats > Öppna plats. Använd vilket namn du
vill, för det visas inte i webbläsaren och används bara som referens.
• I textfältet Lokal rotmapp anger du i vilken mapp på hårddisken som platsfiler,
mallar och biblioteksposter ska sparas. När Dreamweaver löser rotrelativa
länkar sker det i förhållande till denna mapp (se ”Rotrelativa sökvägar” på
sidan 352). Klicka på mappikonen om du vill bläddra till och markera
mappen eller också anger du sökvägen och mappnamnet i textrutan. Om den
lokala rotmappen inte finns, kan du skapa den från dialogrutan Välj lokal
mapp.
• Alternativet Uppdatera den lokala fillistan automatiskt anger huruvida den
lokala fillistan ska uppdateras automatiskt varje gång du kopierar filer till den
lokala platsen. Om du avmarkerar alternativet förbättras prestandan i
Dreamweaver när du kopierar filer men rutan med de lokala filerna i
platsfönstret uppdateras inte automatiskt. Om du vill uppdatera platsfönstret
manuellt klickar du på Uppdatera i platsfönstret. Välj Visa > Uppdatera lokalt
(Windows) eller Plats > Vy över platsens filer > Uppdatera lokalt (Macintosh)
om du vill uppdatera fönstret med lokala filerna manuellt.
• I textrutan HTTP-adress anger du den URL som den färdiga webbplatsen
kommer att använda så att länkar inom platsen som använder absoluta URLadresser kan verifieras. (Se ”Kontrollera länkar på en sida eller plats” på
sidan 502.) HTTP-adressen till exempelvis Macromedias webbplats är http://
www.macromedia.com.
• Alternativet Cache anger om en lokal cache ska skapas. En lokal cache
förbättrar hastigheten för länk- och platshanteringsåtgärder. Om du inte
markerar detta alternativ blir du återigen uppmanad att skapa en cache innan
platsen skapas. Du bör markera det här alternativet eftersom resurspanelen
endast fungerar om en cache har skapats. Mer information om resurspanelen
finns i ”Hantera och infoga resurser” på sidan 215.
3
Klicka på OK.
Fönstret Platsens filer öppnas. Mer information om platsfönstret och
platshantering finns i ”Platshantering och samarbete” på sidan 103.
Senare, när du står i begrepp att publicera platsen på en fjärrserver, måste du lägga
till ytterligare information om platsen. Information om fjärrplatser finns i ”Skapa
en fjärrplats” på sidan 119.
98
Kapitel 3
Redigera en befintlig webbplats
Du kan använda Dreamweaver för att redigera en befintlig plats på den lokala
disken, även om du inte använde Dreamweaver när du skapade den ursprungliga
platsen.
Så här redigerar du en befintlig webbplats:
1
Välj Plats > Definiera platser och klicka på Ny eller välj Plats > Öppna plats>
Definiera platser.
I dialogrutan Platsdefinition som visas är kategorin Lokal info markerad.
2
Ange följande alternativ:
• I textrutan Platsnamn anger du namnet på platsen. Platsnamnet visas i
platsfönstret och på undermenyn Plats > Öppna plats. Använd vilket namn du
vill, för det visas inte i webbläsaren utan används bara som referens.
• I textfältet Lokal rotmapp anger du i vilken mapp på hårddisken som befintliga
platsfiler, mallar och biblioteksposter ska sparas. Klicka på mappikonen om du
vill bläddra till och markera mappen eller också anger du sökvägen och
mappnamnet i textrutan.
• Alternativet Uppdatera den lokala fillistan automatiskt anger huruvida den
lokala fillistan ska uppdateras automatiskt varje gång du kopierar filer till den
lokala platsen. Om du avmarkerar alternativet förbättras prestandan i
Dreamweaver när du kopierar filer men rutan med de lokala filerna i
platsfönstret uppdateras inte automatiskt. Om du vill uppdatera platsfönstret
manuellt klickar du på Uppdatera i platsfönstret. Välj Visa > Uppdatera lokalt
(Windows) eller Plats > Vy över platsens filer > Uppdatera lokalt (Macintosh)
om du vill uppdatera fönstret med lokala filerna manuellt.
• I textrutan HTTP-adress anger du den URL-adress som den färdiga
webbplatsen kommer att använda så att länkar inom platsen som använder
absoluta URL-adresser kan verifieras. (Se ”Kontrollera länkar på en sida eller
plats” på sidan 502.) HTTP-adressen till exempelvis Macromedias webbplats är
http://www.macromedia.com.
• Alternativet Cache anger om en lokal cache ska skapas. En lokal cache
förbättrar hastigheten för länk- och platshanteringsåtgärder. Om du inte
markerar detta alternativ blir du återigen uppmanad att skapa en cache innan
platsen skapas. Du bör markera det här alternativet eftersom resurspanelen
endast fungerar om en cache har skapats. Mer information om resurspanelen
finns i ”Hantera och infoga resurser” på sidan 215.
3
Klicka på OK.
Fönstret Platsens filer öppnas. Mer information om platsfönstret och
platshantering finns i ”Platshantering och samarbete” på sidan 103.
Planera och konfigurera webbplatsen
99
Redigera en fjärrplats
Du kan använda Dreamweaver om du vill kopiera en befintlig fjärrplats (eller
någon gren av en fjärrplats) till din hårddisk och redigera den där även om du inte
använde Dreamweaver när du skapade den ursprungliga platsen.
Observera att oavsett om du endast tänker redigera en del av fjärrplatsen, måste du
dock lokalt duplicera förgreningens struktur av fjärrplatsen från fjärrplatsens rot
och ned till de filer som du vill åt. Om exempelvis fjärrplatsens rotmapp, med
namnet public_html, innehåller två mappar, Project1 och Project2, och du endast
vill arbeta med HTML-filerna i Project1, behöver du inte ladda ned filerna i
Project2, men du måste avbilda din lokala platsrotsmapp på public_html, inte på
Project1.
Fjärrplats
Om_företaget
public_html
Lokal rotmapp
(avbilda denna på public_html,
och inte på Project1 eller Project1/HTML)
Projekt1
Projekt1
(måste finnas på den lokala platsen.
Motsvarar Project1 på fjärrplatsen.)
Resurser
HTML
HTML
(måste finnas på den lokala platsen.
Motsvarar Project1/HTML på fjärrplatsen.)
Projekt2
Resurser
HTML
Så här redigerar du en befintlig fjärrplats:
100
Kapitel 3
1
Skapa en lokal mapp som ska innehålla den befintliga platsen och ange den
som en lokal rotmapp för platsen (se ”Använda Dreamweaver för att göra en ny
plats” på sidan 97).
2
Gör i ordning en fjärrplats med informationen om den befintliga platsen. Se
”Skapa en fjärrplats” på sidan 119. Se till att du använder rätt rotmapp för
fjärrplatsen.
3
Anslut till fjärrplatsen med hjälp av knappen Anslut i platsfönstret.
4
Beroende på hur mycket av fjärrplatsen som du vill redigera gör du något av
följande:
• Om du vill arbeta med hela platsen markerar du rotmappen hos fjärrplatsen
och klicka på Hämta när du vill hämta hela platsen till hårddisken.
• Om du endast vill arbeta med en av filerna eller mapparna på platsen letar du
reda på filen eller mappen i fönsterrutan med fjärrfiler i platsfönstret och
klickar på Hämta för att hämta den filen till hårddisken. (Dreamweaver
duplicerar automatiskt så mycket av fjärrplatsens struktur som behövs för att
placera den hämtade filen på rätt ställe i platshierarkin.) När du endast
redigerar en del av en plats bör du normalt sett välja att också ta med beroende
filer.
5
Fortsätt på samma sätt som om du skapade en plats på nytt: redigera
dokument, förhandsgranska och testa dem och skicka tillbaka dem till
fjärrplatsen igen.
Mer information om platshantering finns i ”Platshantering och samarbete” på
sidan 103.
Ta bort en plats från listan med platser
Om du inte längre vill arbeta med en plats i Dreamweaver, kan du ta bort platsen
från platslistan. Filerna på platsen tas inte bort.
Obs! När du tar bort en plats från listan tas all information om platsen bort permanent.
Så här tar du bort en plats från platslistan:
1
Välj Plats > Definiera platser.
2
Markera ett platsnamn.
3
Klicka på Ta bort.
Ett meddelande visas där du får bekräfta borttagningen.
4
Klicka på Ja om du vill ta bort platsen från listan.
Planera och konfigurera webbplatsen
101
102
Kapitel 3
4
KAPITEL 4
Platshantering och samarbete
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Med Macromedia Dreamweaver organiserar du filerna på lokala platser och på
fjärrplatser med hjälp av platsfönstret. Du kan enkelt duplicera strukturen i den
lokala platsen på en fjärrserver eller duplicera en fjärrwebbplats på din egen dator.
De relativa länkarna som du skapar på den lokala platsen fortsätter att fungera på
fjärrplatsen efter att du har skickat filerna till fjärrplatsen eftersom strukturen på
de båda platserna är identisk.
Med kommandot Ny plats kan du skapa en lokal plats i Dreamweaver genom att
skapa en lokal rotmapp för platsen (eller genom att göra om en befintlig mapp till
lokal rotmapp). Se ”Använda Dreamweaver för att göra en ny plats” på sidan 97.
Du definierar en fjärrplats när du skapar en ny plats eller lägger till den
informationen senare med hjälp av kommandot Definiera platser. Se ”Associera en
fjärrserver med en lokal plats” på sidan 120.
I Dreamweaver finns ett antal funktioner som du använder när du vill strukturera
en plats och överföra filer till och från en fjärrserver. När du överför filer mellan
lokala platser och fjärrplatser, upprätthålls parallella fil- och mappstrukturer
mellan dessa platser. När du överför filer mellan platser skapas automatiskt de
mappar som behövs, om de ännu inte finns på en plats. Du kan också
synkronisera filerna mellan de lokala platserna och fjärrplatserna. Dreamweaver
kopierar nämligen filer i båda riktningarna om det behövs och tar dessutom bort
onödiga filer.
Dreamweaver innehåller funktioner som underlättar samarbetet på en webbplats.
Du kan checka in och ut filer från en fjärrserver så att andra medlemmar i en
webbgrupp kan se vem som arbetar med en viss fil. Du kan lägga till Design Notes
i filerna om du vill dela information om filens status, prioritet m.m. med
gruppmedlemmar. Du kan också använda rapportfunktionen för att köra
rapporter på platsen och på så sätt visa information om inchecknings- och
utcheckningsstatus och för att söka efter Design Notes som har bifogats i filerna.
103
Dreamweaver kan integreras med många av de vanligaste programmen för källoch versionskontroll. När du gäller källkontrollintegration kan du ansluta till
SourceSafe-databaser och andra källkontrollsystem som stöder WebDAVprotokollet. (Obs! Det finns ingen versionskontroll i Dreamweaver.)
När du har lagt ut webbplatsen kan du eller någon annan i gruppen fortsätta att
underhålla den med hjälp av samma verktyg. Innan du publicerar platsen, och
även efter, kan du felsöka platsen med jämna mellanrum. Mer information finns i
”Testa och publicera en plats” på sidan 497.
Platsfönstret
Använd platsfönstret för vanliga filhanteringsåtgärder, exempelvis när du vill skapa
nya HTML-dokument, visa, öppna och flytta filer samt ta bort poster. Du kan
också använda platsfönstret för att överföra filer mellan lokala platser och
fjärrplatser samt utforma platsnavigeringen med hjälp av platskartan (se ”Skapa en
fjärrplats” på sidan 119 och ”Använda platskartan” på sidan 113.)
Som standard visas fjärrplatsen eller platskartan i den vänstra rutan och den lokala
platsen i den högra. Du kan ändra denna inställning i platsinställningarna. Se
”Platsinställningar” på sidan 107.
104
Kapitel 4
Använda kontrollerna i platsfönstret
Välj Fönster > Platsens filer när du vill öppna platsfönstret. Använd följande
knappar och alternativ i platsfönstrets verktygsfält när du vill ställa in vad som ska
visas i platsfönstret och när du vill överföra filer mellan den lokala platsen och
fjärrplatsen:
Visa platsfiler Visar
filstrukturen på den lokala platsen och på fjärrplaten i
fönsterrutorna i platsfönstret. (Vilken plats som visas i vilken ruta (höger eller
vänster) beror på inställningarna. Se ”Platsinställningar” på sidan 107.) Vyn
Platsens filer är standardvy för platsfönstret.
Visa platskarta Visar
en grafisk karta över platsen, baserat på hur dokumenten är
länkade till varandra. Klicka på och håll ned knappen om du vill välja Endast
karta eller Karta och filer på popup-menyn.
Listrutan med platser Visar
de platser du har definierat. Du växlar platser genom
att välja en annan plats från listan. Om du vill lägga till eller redigera
informationen för en befintlig plats väljer du Definiera platser längst ned på
menyn (se ”Skapa en fjärrplats” på sidan 119).
Anslut/Koppla från (endast tillgängligt med FTP, WebDAV-protokollet och
SourceSafe) Ansluter till eller kopplar från fjärrplatsen. Som standard kopplar
Dreamweaver från fjärrplatsen om ingen har använt den på mer än 30 minuter
(endast FTP). Du ändrar tidsgränsen genom att välja Redigera > Inställningar och
markera Plats.
Uppdatera Uppdaterar
den lokala kataloglistan och fjärrkataloglistan. Om du
avmarkerar någon av kryssrutorna Uppdatera den lokala fillistan automatiskt eller
Uppdatera fjärrfillistan automatiskt i dialogrutan Platsdefinition kan du använda
denna knapp om du manuellt vill uppdatera kataloglistorna (se ”Associera en
fjärrserver med en lokal plats” på sidan 120). Om du exempelvis monterar en
enhet som innehåller en fjärrplats efter att ha öppnat platsfönstret, visas inte
fjärrplatsens kataloglista förrän du klickar på knappen Uppdatera.
Hämta fil(er) Kopierar
de markerade filerna från fjärrplatsen till den lokala platsen
(och skriver över den befintliga lokala kopian av filen, om en sådan finns). Om
Aktivera in- och utcheckning av filer är aktiverat är de lokala kopiorna
skrivskyddade. Filerna på fjärrservern är på så sätt tillgängliga för andra att checka
ut. Om alternativet Aktivera in- och utcheckning av filer är inaktiverat överförs en
kopia med både läs- och skrivrättigheter när du hämtar en fil. Observera att filerna
som kopieras är de som är markerade i den fönsterruta i platsfönstret som är aktiv.
Om fönsterrutan med fjärrfiler är aktiv kopieras de markerade fjärrfilerna till den
lokala platsen. Om fönsterrutan med de lokala filerna är aktiv kopieras
motsvarande fjärrfiler till de markerade lokala filerna till den lokala platsen. Se
”Hämta filer från en fjärrserver” på sidan 138.
Platshantering och samarbete
105
Skicka fil(er) Kopierar de markerade filerna från den lokala platsen till fjärrplatsen.
Observera att filerna som kopieras är de som är markerade i den fönsterruta i
platsfönstret som är aktiv. Om fönsterrutan med lokala filer är aktiv kopieras de
markerade lokala filerna till fjärrplatsen. Om fönsterrutan med fjärrfilerna är aktiv
kopieras motsvarande lokala filer till de markerade fjärrfilerna till fjärrplatsen. Se
”Skicka filer till en fjärrserver” på sidan 139.
Obs! Om du lägger till en fil som inte redan finns på fjärrplatsen och alternativet Aktivera inoch utcheckning är aktiverat, läggs filen till på fjärrplatsen som ”utcheckad”. Välj i stället
alternativet Checka in när du vill lägga till en fil utan statusen ”utcheckad”.
Checka ut fil(er) Överför
en kopia av filen från fjärrservern till den lokala platsen
(den lokala kopian skrivs över, om det finns någon) och märker upp filen som
utcheckad på servern. Detta alternativ är inte tillgängligt om Aktivera in- och
utcheckning av filer är avaktiverat för den aktuella platsen. Se ”Checka in och ut
filer på en fjärrserver” på sidan 128.
Checka in Överför en kopia av den lokala filen till fjärrservern och gör filen
tillgänglig för redigering av andra. Den lokala filen blir i stället skrivskyddad.
Detta alternativ är inte tillgängligt om Aktivera in- och utcheckning av filer i
dialogrutan Platsdefinition är avaktiverat för den aktuella platsen. Se ”Checka in
och ut filer på en fjärrserver” på sidan 128.
Stoppa aktuell uppgift Avbryter
all aktivitet, även hämtning och sändning av filer.
Knappen, en röd stoppskylt (åttahörning) med ett vitt X, visas endast längst ned
till höger i fönstret när en aktivitet pågår. Observera att det kan ta lite tid innan
servern behandlar stoppbegäran, därför stoppas kanske inte överföringen direkt.
Knappen visas endast när en aktivitet pågår.
Med denna triangelknapp längst ned till vänster i platsfönstret
kan du komprimera och utöka platsfönstret så att en eller två rutor visas.
Komprimera/utöka
106
Kapitel 4
Platsinställningar
Välj Redigera > Inställningar och markera Plats. Välj sedan från följande
platsinställningar när du vill bestämma vilka filöverföringsfunktioner som ska
finnas i platsfönstret:
Visa alltid Anger vilken plats (fjärrplats eller lokal plats) som alltid visas och i
vilken fönsterruta i platsfönstret (vänster eller höger) som de lokala filerna och
fjärrfilerna visas. Som standard visas den lokala platsen till höger. Den ruta som
inte väljs (vänster enligt standardinställningen) är den som går att ändra: I denna
ruta kan platskartan eller filerna på den andra platsen (fjärrplatsen enligt
standardinställningen) visas.
Beroende filer Visar ett meddelande som frågar om du vill överföra beroende filer
(exempelvis bilder, externa formatmallar och andra filer som det refereras till i
HTML-filen) som laddas av webbläsaren när HTML-filen läses in. Som standard
är kryssrutorna Fråga vid Hämta/Checka ut och Fråga vid Skicka/Checka in
markerade.
Obs! Om du vill att frågan Ta med beroende filer? ska visas när dessa alternativ är
avmarkerade trycker du på Alt (Windows) eller Alternativ (Macintosh) samtidigt som du
klickar på Hämta, Skicka, Checka in eller Checka ut.
FTP-anslutning Anger
om anslutningen till fjärrplatsen ska avslutas efter ett visst
angivet antal minuter utan aktivitet.
Platshantering och samarbete
107
FTP-timeout Anger
antalet sekunder som programmet kommer att försöka
upprätta en anslutning med fjärrservern. Om inget svar fås inom den angivna
tiden visas ett varningsmeddelande.
Brandväggsvärd Anger
adressen till proxyservern som du ansluter till om du är
bakom en brandvägg. Om du inte är det låter du detta fält vara tomt.
Obs! Om du är bakom en brandvägg markerar du kryssrutan Använd brandvägg i
dialogrutan Platsdefinition. Se ”Associera en fjärrserver med en lokal plats” på sidan 120.
Brandväggsport Anger
vilken port i brandväggen du använder för att ansluta till
fjärrservern. Om du ansluter med någon annan port än 21 (standardinställning
för FTP) anger du det numret här.
Alternativ för att skicka: Spara filer innan de skickas Anger
att osparade filer ska
sparas automatiskt innan de skickas till fjärrplatsen.
Definiera platser Öppnar dialogrutan Definiera platser där du kan redigera en
befintlig plats eller skapa en ny. Se ”Associera en fjärrserver med en lokal plats” på
sidan 120.
Du kan också ange huruvida de filer som du överför ska överföras som ASCII
(text) eller binärt. Det gör du genom att öppna filen FTPExtensionMap.txt som
finns i mappen Dreamweaver/Configuration (på Macintosh:
FTPExtensionMapMac.txt). Du kan ändra i eller ta bort listan över vilka filtyper
som överförs i olika format och dessutom lägga till egna filtyper. Ett filtillägg
definieras inte i denna fil utan Dreamweaver överför automatiskt filen i binärt
läge.
Obs! På Macintosh innehåller filen FTPExtensionMapMac.txt också information om
avbildning av filtillägg till Macintosh-skapare och filtyper. Med denna avbildning får en
hämtad fil rätt ikon och kan öppnas av rätt program när du dubbelklickar på den i Finder.
Observera att när filen överförs som ASCII ignoreras inställningen för
radbrytningar. Se ”Kodformatering – inställningar” på sidan 338.
Visa och öppna filer i platsfönstret
Använd platsfönstret när du vill visa lokala platser och fjärrplatser, lägga till och ta
bort platsdokument eller lägga upp navigeringsstrukturen på platsen med hjälp av
en platskarta. Mer information finns i ”Platsfönstret” på sidan 104.
Du kan ange att båda fönsterrutorna i platsfönstret ska visa den lokala platsen,
fjärrplatsen eller en grafisk karta över den lokala platsen. På så vis kan du
exempelvis visa den lokala platsen i en fönsterruta och fjärrplatsen i den andra
eller också kan du visa den lokala platsen i vyn Platsens filer i den ena fönsterrutan
och i kartvyn i den andra. (Information om hur du visar platskartor finns i
”Platskartan” på sidan 112.)
108
Kapitel 4
Visa lokala platser
I platsfönstret kan du visa innehållet på både lokala platser och fjärrplatser. Lokala
platser kan visas i platsfönstret som en fillista, en visuellt karta eller både och.
Fjärrplatser visas endast som en lista med filer. (Innan du kan visa en fjärrplats
måste du skapa den (se ”Skapa en fjärrplats” på sidan 119).
Gör något av följande när du vill visa lokala platsfiler:
• Välj Fönster > Platsens filer.
• I platsfönstret, om platskartan visas, klickar du på knappen Platsens filer.
I platsfönstret visas två uppsättningar filer: I ena sidan av fönstret viss filerna på
den lokala platsen och i den andra sidan visas de associerade fjärrplatsfilerna.
Obs! Om du visar en lokal plats som inte har någon motsvarande fjärrplats är rutan
Fjärrplats tom.
Gör något av följande när du vill visa platsens filer:
• Välj Fönster > Platskarta. (Om du tidigare endast visat kartan, utan platsens
filer, visas endast kartan nu också.)
• I platsfönstret klickar du på knappen Platskarta eller håller ned musknappen
med pekaren över knappen Platskarta och väljer Karta och filer från menyn
som visas.
I platsfönstret visas två vyer: Den lokala platsen som en karta, med namnet
Platsnavigering och, beroende på inställningarna, antingen de lokala platsfilerna
(med namnet Lokal mapp) eller fjärrplatsfilerna (med namnet Fjärrplats).
Så här visar du endast platskartan:
Håll ned musknappen med pekaren över knappen Platskarta och välj Endast karta
på menyn som visas. Mer information finns i ”Använda platskartan” på sidan 113.
Platshantering och samarbete
109
Ändra layout på platsfönstret
Enligt standardinställningen visas fjärrplatsen (eller den lokala platskartan) i den
vänstra rutan i platsfönstret och den lokala platsen visas i den högra rutan. Du kan
växla mellan dessa vyer.
Så här ändrar du layouten:
1
Välj Redigera > Inställningar och markera Plats i listan Kategori.
2
Gör något av följande:
• Välj Lokala filer i listrutan Visa alltid och välj sedan om du vill visa de lokala
filerna i den högra eller vänstra rutan av platsfönstret.
Den lokala platsen visas i den ruta du har valt och fjärrplatsen (eller
platskartan) visas i den andra. När du väljer detta alternativ visas alltid de lokala
filerna i platsfönstret, även om du väljer att visa endast en fönsterruta.
• Välj Fjärrfiler i listrutan Visa alltid och välj sedan om du vill visa fjärrfilerna i
den högra eller vänstra rutan.
Fjärrplatsen visas i den ruta du har valt och den lokala platsen (eller platskartan,
som alltid är lokal) visas i den andra. När du väljer detta alternativ visas alltid
fjärrfilerna i platsfönstret, även om du väljer att visa endast en fönsterruta.
3
Klicka på OK när du vill stänga dialogrutan Inställningar och tillämpa
ändringarna.
Så här ändrar du visningsyta:
Gör något av följande i platsfönstret:
• Dra delningslisten som separerar fönsterrutorna för att öka eller minska
visningsytan för den högra eller vänstra rutan.
• Använd rullningslisterna längst ned i platsfönstret när du vill bläddra igenom
innehållet i vyn.
• På platskartan drar du pilen ovanför en fil när du vill ändra mellanrummet
mellan filerna.
Så här komprimerar du platsfönstret till en vy:
Klicka på den lilla vita triangeln i det nedre vänstra hörnet av platsfönstret.
Obs! Den vy som fortfarande visas är den som du valt att alltid visa i dialogrutan
Platsinställningar.
Mer information om platsinställningar finns i ”Platsinställningar” på sidan 107.
110
Kapitel 4
Arbeta med filer i vyn Platsens filer
Använd vyn Platsens filer när du vill visa lokala platser och fjärrplatser som listor
över filer, när du vill öppna filer, ändra namn på filer, lägga till nya mappar eller
filer på en plats eller när du vill uppdatera vyn för en plats efter att ha gjort
ändringar. Du kan också använda vyn Platsens filer om du vill avgöra vilka filer
(på någon av platserna) som har uppdaterats sedan de sist överfördes. Mer
information om hur du synkroniserar den lokala platsen med fjärrplatsen finns i
”Synkronisera filerna på den lokala platsen och på fjärrplatsen” på sidan 141.
Så här visar du platsens filer:
Gör något av följande:
• Välj Fönster > Platsens filer när du vill öppna platsfönstret och visa platsens
filer.
• I platsfönstret klickar du på knappen Platsens filer.
Så här öppnar du en fil i vyn Platsens filer:
Dubbelklicka på filens ikon.
Så här lägger du till en ny mapp på en plats:
1
Se till att filen eller mappen är markerad i platsfönstret. Den nya mappen
skapas i den markerade mappen eller i samma mapp som den markerade filen.
2
Välj Arkiv > Ny mapp i platsfönstret (Windows) eller Plats > Vy över platsens
filer > Ny mapp (Macintosh).
Du kan också välja det här alternativet på snabbmenyn i platsfönstret.
3
Skriv ett namn på den nya mappen.
Så här lägger du till en ny fil på en plats:
1
Se till att filen eller mappen är markerad i platsfönstret. Den nya filen skapas i
den markerade mappen eller i samma mapp som den markerade filen.
2
Välj Arkiv > Ny fil i platsfönstret (Windows) eller Plats > Vy över platsens filer
> Ny fil (Macintosh).
Du kan också välja det här alternativet på snabbmenyn i platsfönstret.
3
Skriv ett namn på den nya filen.
Platshantering och samarbete
111
Så här ändrar du namn på en fil eller mapp på en plats:
1
Markera i platsfönstret filen eller mappen som du vill ändra namn på och gör
något av följande för att aktivera namnfältet bredvid filen eller mappen:
• Välj Arkiv > Ändra namn (Windows) eller Plats > Ändra namn (Macintosh)
• Klicka på filen, vänta någon sekund och klicka igen.
2
Skriv det nya namnet och tryck på Retur.
Så här uppdaterar du vyn över platsens filer efter att ha gjort ändringar utanför
Dreamweaver:
Gör något av följande:
• Välj Visa > Uppdatera lokalt (Windows) eller Plats > Vy över platsens filer >
Uppdatera lokalt (Macintosh).
• Välj Visa > Uppdatera fjärr (Windows) eller Plats > Vy över platsens filer >
Uppdatera fjärr (Macintosh).
• Klicka på Uppdatera i platsfönstret om du vill uppdatera båda fönsterrutorna.
Så här hittar du och markerar utcheckade filer:
Välj Redigera > Välj utcheckade filer i platsfönstret (Windows) eller Plats > Vy
över platsens filer > Välj utcheckade filer (Macintosh).
Så här hittar och väljer du nyare lokala filer:
Välj Redigera > Välj nyare lokalt i platsfönstret (Windows) eller Plats > Vy över
platsens filer > Välj nyare lokalt (Macintosh).
Så här hittar och väljer du nyare fjärrfiler:
Välj Redigera > Välj nyare fjärr i platsfönstret (Windows) eller Plats > Vy över
platsens filer > Välj nyare fjärr (Macintosh).
Mer information om hur du arbetar med lokala platser och fjärrplatser finns i
”Använda incheckning/utcheckning” på sidan 127.
Platskartan
Använd platskartan när du vill visa en lokal plats som en visuell karta med länkade
ikoner, när du vill lägga till nya filer på en plats eller när du vill lägga till, ändra eller ta
bort länkar. Platskartan är idealisk när du vill lägga ut en platsstruktur. Du kan snabbt
sätta upp hela strukturen och sedan skapa en grafisk bild av platskartan.
Obs! Platskartan kan bara användas för lokala platser. Om du vill skapa en karta över en
fjärrplats kopierar du innehållet på fjärrplatsen till en mapp på den lokala disken och
använder kommandot Definiera platser för att definiera platsen som en lokal plats.
112
Kapitel 4
Använda platskartan
Du måste definiera en hemsida för platsen innan du kan visa platskartan. Platsens
hemsida är kartans startpunkt.
Så här definierar du en hemsida för platsen:
1
Välj Plats > Definiera platser.
2
Välj Ny eller Redigera och redigera en ny plats eller öppna en befintlig plats.
Dialogrutan Platsdefinition visas.
3
Markera Platskartelayout
4
Klicka på mappikonen om du vill välja en hemsida för platsen eller skriv
sökvägen i textfältet Hemsida.
Gör något av följande när du vill visa en platskarta:
• Välj Fönster > Platskarta när du vill öppna platsfönstret.
• I platsfönstret klickar du på knappen Platskarta.
Obs! Om ingen hemsida är definierad eller om Dreamweaver inte kan hitta sidan index.html
eller index.htm på den aktuella platsen som kan användas som hemsida, visas en
dialogruta där du ombeds välja en hemsida genom att klicka på Definiera platser. Markera
en plats och klicka på Redigera. Välj sedan Platskartelayout i dialogrutan Platsdefinition.
På platskartan visas HTML-filer och annat sidinnehåll som ikoner. Länkar visas i
den ordning de förekommer i HTML-källkoden.
• Text som visas i rött betyder att länken är bruten.
• Text som visas i blått och är markerad med en ikon som föreställer en jordglob
indikerar en fil på en annan plats eller en speciallänk (exempelvis en e-posteller skriptlänk).
• En grön bockmarkering betyder att du har checkat ut filen.
• En röd bockmarkering betyder att filen är utcheckad av någon annan.
• En låsikon betyder att filen är skrivskyddad (Windows) eller låst (Macintosh).
Platshantering och samarbete
113
Som standard visar platskartan platsstrukturen i två nivåer, med början på den
aktuella hemsidan. Klicka på plus- (+) och minustecknen (-) bredvid en sida när
du vill visa eller dölja sidor som är länkade nedanför den andra nivån.
Enligt standardinställning visas inte dolda och beroende filer på platskartan.
Dolda filer är HTML-filer som har märkts upp som dolda. Beroende filer har
annat sidinnehåll än HTML, exempelvis bilder, mallar, Shockwave-filer eller
Flash-filer. Se ”Ändra platskartans layout” på sidan 114 och ”Visa och dölja
platskartefiler” på sidan 117.
Ändra platskartans layout
Använd alternativen för platskartans layout när du vill anpassa utseendet på
platskartan. Du kan ange hemsida, antalet kolumner som ska visas, om
ikonetiketter ska visas för filnamnet eller sidtiteln och om dolda och beroende filer
ska visas.
Så här ändrar du platskartans layout:
1
Öppna dialogrutan Platsdefinition med någon av följande metoder:
• Välj Plats > Definiera platser och klicka sedan på Redigera. Markera Layout av
platskarta i listan Kategori till vänster.
• Välj Visa > Layout (Windows) eller Plats > Visa platskarta > Layout
(Macintosh).
2
Klicka på mappikonen om du vill välja en hemsida för platsen eller skriv
sökvägen i textfältet Hemsida. Hemsidan måste finnas på den lokala platsen.
Om du inte anger en hemsida och Dreamweaver inte kan hitta en fil med
namnet index.html eller index.htm i roten uppmanas du att välja en hemsida
när du öppnar platskartan.
3
Välj bland kolumnalternativen:
• I textrutan Antal kolumner skriver du ett tal som anger hur många sidor som
ska visas per rad på platskartan.
• I textrutan Kolumnbredd anger du ett värde som anger kolumnbredden, i
bildpunkter, på platskartan.
114
Kapitel 4
4
Under Ikonetiketter markerar du om namnen som visas under
dokumentikonerna på platskartan ska vara filnamn eller sidtitlar.
5
Under Alternativ markerar du vilka filer som ska visas på platskartan:
• Markera Visa filer markerade som dolda om du vill visa HTML-filer som är
markerade som dolda på platskartan. Om en sida är dold visas dess namn och
länkar i kursiv stil. Information om hur du döljer filer finns i ”Visa och dölja
platskartefiler” på sidan 117.
• Markera Visa beroende filer om du vill visa alla beroende filer i platsens
hierarki. En beroende fil är en bild eller något annat innehåll än HTML som
läses in av webbläsaren när huvudsidan läses in.
Arbeta med sidor på platskartan
När du arbetar med platskartan kan du välja sidor, öppna en sida och redigera
den, lägga till nya sidor på platsen, skapa länkar mellan filer och ändra sidans titel.
Gör något av följande när du vill markera flera sidor på platskartan:
• Skift-klicka när du vill markera flera sidor.
• Starta från en tom del av vyn och dra runt en grupp filer när du vill markera
dem.
• Tryck på Ctrl (Windows) eller Kommando (Macintosh) och klicka när du vill
markera icke angränsande sidor.
Gör något av följande när du vill öppna en sida och redigera den:
• Dubbelklicka på filen.
• Markera filen och välj Arkiv > Öppna markering (Windows) eller Plats >
Öppna (Macintosh).
Gör något av följande när du vill lägga till en befintlig fil på platsen:
• Dra en fil från Utforskaren i Windows eller Finder i Macintosh och släpp den
på en fil på platskartan. Sidan läggs till på platsen och en länk skapas mellan
den och filen du släppte den på.
• Välj Plats > Länka till befintlig fil (Windows) eller Plats > Visa platskarta >
Länka till befintlig fil (Macintosh).
Platshantering och samarbete
115
Så här skapar du en ny fil och lägger till en länk:
1
Markera en HTML-fil på platskartan och gör sedan något av följande:
• Välj Plats > Länka till ny fil (Windows) eller Plats > Visa platskarta > Länka till
ny fil (Macintosh).
• Välj Länka till ny fil på snabbmenyn.
2
Ange ett filnamn i textrutan Filnamn i dialogrutan Länka till ny fil.
3
Skriv en sidtitel för filen i textrutan Titel.
4
Skriv vad länken som kopplar den markerade filen till den nya filen ska heta i
fältet Länktext. Texten och länken visas i den markerade filen.
5
Klicka på OK.
Filen sparas i samma mapp som den markerade filen. Om en ny fil läggs till i en
dold förgrening blir den nya filen också dold. Se ”Visa och dölja platskartefiler”
på sidan 117.
Så här ändrar du titel på en sida:
1
Se till att alternativet Visa sidtitlar är markerat.
Välj Visa > Visa sidtitlar (Windows) eller Plats > Visa platskartan > Visa
sidtitlar (Macintosh).
2
Gör något av följande:
• Markera en sida och klicka på titeln. När titeln ändras till ett ändringsbart fält
skriver du en ny dokumenttitel.
• Markera en sida och välj Arkiv > Ändra namn (Windows) eller Plats > Ändra
namn (Macintosh).
Obs! När du arbetar i platsfönstret uppdateras alla länkarna till filer vars namn har ändrats
automatiskt.
Gör något av följande när du vill ändra hemsidan:
• I vyn Lokal mapp i platsfönstret klickar du på filen som du vill använda som
hemsida och väljer Ange som hemsida på snabbmenyn.
• Markera en fil i platsfönstret och välj Plats > Ny hemsida (Windows) eller Plats
> Visa platskartan > Ny hemsida (Macintosh) när du vill skapa en ny hemsida.
• I vyn Lokal mapp i platsfönstret klickar du på filen som du vill ändra till
hemsida och väljer Plats > Ange som hemsida (Windows) eller Plats > Visa
platskarta > Ange som hemsida (Macintosh).
• Välj Plats > Definiera platser och klicka på Redigera. Markera sedan Layout av
platskarta i dialogrutan Platsdefinition.
116
Kapitel 4
Så här uppdaterar du visningen av platskartan när du har gjort ändringar:
1
2
Klicka någonstans i platskartan för att avmarkera eventuella filer.
Välj Visa > Uppdatera lokalt (Windows) eller Plats > Visa platskarta >
Uppdatera lokalt (Macintosh).
Visa och dölja platskartefiler
Du kan ändra platskartans layout och visa eller dölja dolda och beroende filer.
Detta är användbart när du vill framhäva viktiga avsnitt eller ta bort fokus från
mindre viktigt material.
För att kunna dölja en fil med hjälp platskartan måste du först markera den som
dold. När du döljer en fil döljs även dess länkar. När du visar en fil som är
markerad som dold, blir ikonen och dess länkar synliga på platskartan, men
namnen visas i kursiv stil.
Så här markerar du en fil som dold:
1
2
Markera en eller flera filer i platskartan.
Välj Visa > Visa/dölj länk (Windows) eller Plats > Visa platskartan > Visa/dölj
länk (Macintosh).
Gör något av följande när du vill visa eller dölja filer som är markerade som dolda:
• Välj Visa > Visa filer markerade som dolda (Windows) eller Plats > Visa
platskartan > Visa filer markerade som dolda (Macintosh).
• Välj Visa > Layout (Windows) eller Plats > Visa platskartan > Layout
(Macintosh) när du vill öppna dialogrutan Platsdefinition och markera
alternativet Visa filer markerade som dolda.
Som standard är beroende filer dolda. Du kan välja att visa dem i platskartan.
Gör något av följande när du vill visa beroende filer:
• Välj Visa > Visa beroende filer (Windows) eller Plats > Visa platskartan > Visa
•
beroende filer (Macintosh).
Välj Visa > Layout (Windows) eller Plats > Visa platskartan > Layout
(Macintosh) när du vill öppna dialogrutan Platsdefinition och markera
alternativet Visa beroende filer.
Så här avmarkerar du en fil som dold:
1
2
3
Markera en eller flera filer i platskartan.
Välj Visa > Visa filer markerade som dolda (Windows) eller Plats > Visa
platskartan > Visa filer markerade som dolda (Macintosh).
Välj Visa > Visa/dölj länk (Windows) eller Plats > Visa platskartan > Visa/dölj
länk (Macintosh).
Platshantering och samarbete
117
Visa platsen från en förgrening
Du kan visa detaljerna för en viss del av platsen genom att fokusera på en
förgrening i platskartan.
Så här visar du en annan förgrening:
Markera sidan som du vill visa och välj Visa > Visa som rot (Windows) eller Plats
> Visa platskarta > Visa som rot (Macintosh).
Platskartan uppdateras i fönstret och ser ut som om den angivna sidan låg i
platsens rot. I fältet Platsnavigering ovanför platskartan visas sökvägen från
hemsidan till den angivna sidan. Markera en post i sökvägen genom att klicka på
den, om du vill visa platskartan från den nivån.
Så här visar och döljer du förgreningar:
Klicka på plus- (+) och minustecknet (–) när du vill utöka eller komprimera
förgreningen.
Spara platskartan
Du kan spara platskartan som en bild och sedan visa bilden i (eller skriva ut från)
ett bildredigeringsprogram.
Så här skapar du en bildfil för den aktuella platskartan:
1
Gör något av följande från platskartan:
• Välj Arkiv > Spara platskarta (Windows). I dialogrutan Spara platskarta skriver
du ett namn i fältet Filnamn. Välj .bmp eller .png i listrutan Filformat.
• På Macintosh väljer du Plats > Visa platskarta > Spara platskarta > Spara
platskarta som PICT eller Plats > Visa platskarta > Spara platskarta > Spara
platskarta som JPEG.
2
Välj en plats, ange ett namn på bilden och klicka på Spara.
Söka efter filer i platsfönstret
Du kan söka efter en fil på den lokala platsen eller på fjärrplatsen från
dokumentfönstret eller från platsfönstret. Mer information om hur du söker efter
och ersätter filer finns i ”Söka och ersätta text, koder och attribut” på sidan 254.
Välj Fönster > Platsens filer när du vill visa platsfönstret.
118
Kapitel 4
Så här söker du efter en fil på den lokala platsen:
1
Markera filen i vyn Fjärrplats i platsfönstret eller öppna filen i ett
dokumentfönster.
2
Välj Plats > Hitta i lokal plats. (I Windows kan du välja Redigera > Hitta i lokal
plats om platsfönstret är aktivt.)
Filen är markerad i den lokala mappen i platsfönstret.
Så här söker du efter en fil på fjärrplatsen:
1
Markera filen i den lokala mappen i platsfönstret eller öppna filen i ett
dokumentfönster.
2
Välj Plats > Hitta på fjärrplats. (I Windows kan du välja Redigera > Hitta på
fjärrplats om platsfönstret är aktivt.) Du kan också markera filen i den lokala
mappen och högerklicka (Windows) Kontroll-klicka (Macintosh) och välja
Hitta på fjärrplats på snabbmenyn.
Filen är markerad i fönsterrutan med fjärrfiler i platsfönstret.
Obs! Om du väljer Plats > Hitta i lokal plats eller Plats > Hitta på fjärrplats när dokumentfönstret
är aktivt och den aktuella filen inte tillhör den aktuella platsen som du har öppen kommer
Dreamweaver att försöka avgöra till vilken lokal plats som den aktuella filen hör. Om den
aktuella filen endast tillhör en lokal plats öppnas den platsen och sedan hittas filen där.
Skapa en fjärrplats
Innan du skapar en fjärrplats ska du börja med att skapa en lokal plats (som du
sedan associerar med fjärrplatsen). Se ”Använda Dreamweaver för att göra en ny
plats” på sidan 97.
Nästa steg när du skapar en fjärrplats är att avgöra var den ska placeras, d.v.s.
vilken server som platsen ska ligga på. Din kund, arbetsgivare eller
internetlevarantör har antagligen en server där du ska placera webbsidorna
(antingen på Internet eller på ett intranät). Fråga en systemadministratör eller
kunden efter namnet på den servern och ta reda på hur du skickar filer till den.
Du bör avgöra om du ska använda FTP när du ansluter till servern eller om du i
stället ska ansluta till servern som en hårddisk på nätverket. Om du ansluter med
FTP tar du reda på namnet på FTP-servern, vilken värdkatalogen är samt
inloggnings- och lösenordsinformation.
När du har tagit reda på denna information använder du kommandot Definiera
platser och associerar servern med den lokala platsen. Mer information om hur du
kan gå tillväga om du får problem när du skapar fjärrplatsen finns i ”Felsökning av
inställningarna till fjärrplatsen” på sidan 126.
När du har skapat en fjärrplats kan du skicka filer till den, eller hämta filer från
den om det redan finns filer på platsen. Se ”Använda incheckning/utcheckning”
på sidan 127 och ”Hämta och skicka filer” på sidan 138.
Platshantering och samarbete
119
Associera en fjärrserver med en lokal plats
När du har skapat en lokal plats använder du kommandot Definiera platser och
lägger till eller ändrar informationen om den associerade fjärrservern och
inställningar för in- respektive utcheckning.
Så här associerar du en fjärrserver med en befintlig lokal plats:
1
Välj Definiera platser i listrutan i platsfönstret. Du kan också välja Plats >
Definiera platser.
2
En dialogruta visas som innehåller definierade platser. Markera en plats och
klicka på Redigera.
Om det inte finns några platser definierade skapar du en lokal plats innan du
fortsätter. Se ”Använda Dreamweaver för att göra en ny plats” på sidan 97.
3
I listan Kategori till vänster klickar du på Fjärrinformation.
4
Välj något av följande alternativ för serveråtkomst:
• Markera Ingen om du inte tänker skicka platsen till en server. Klicka på OK
och hoppa sedan över resten av denna procedur.
• Välj Lokalt/Nätverk om webbservern är ansluten som en nätverksenhet
(Windows) eller som en AppleTalk- eller NFS-server (Macintosh) eller om du
kör en webbserver på din lokala dator. Klicka på mappikonen när du vill
bläddra till och markera mappen där platsfilerna finns på servern. Om du vill
att fönsterrutan med fjärrfiler ska uppdateras automatiskt när filer läggs till eller
tas bort markerar du Uppdatera den lokala fillistan automatiskt. Avmarkera
detta alternativ om du vill öka prestandan när du kopierar filer till fjärrplatsen.
(Klicka på Uppdatera i platsfönstret när du vill uppdatera platsfönstret
manuellt.) Klicka på OK och hoppa över resten av denna procedur.
Obs! Välj Visa > Uppdatera fjärr (Windows) eller Plats > Vy över platsens filer > Uppdatera
fjärr (Macintosh) om du vill uppdatera fönstret med fjärrfilerna manuellt.
• Välj FTP om du ansluter till webbservern med FTP.
120
Kapitel 4
Så här ansluter du till en webbserver med hjälp av FTP:
1
Ange värdnamn på FTP-värden om du vill skicka filer till din webbplats.
FTP-värdnamnet är det fullständiga Internet-namnet på ett datorsystem,
exempelvis ftp.mindspring.com. Ange hela värdnamnet utan extra text. Lägg
inte till ett protokollnamn framför värdnamnet. Exempel:
• Rätt: ftp.mindspring.com
• Fel: ftp://ftp.mindspring.com
• Fel: mindspring.com
2
Ange namn på värdkatalogen på fjärrservern där dokumenten som är synliga
för besökarna finns. Se ”Ange fjärrplatsens värdkatalog (endast FTP)” på
sidan 122.
3
Ange inloggningsnamnet och lösenordet som du använder när du ansluter till
FTP-servern.
Dreamweaver sparar lösenordet enligt standardinställningen. Avmarkera Spara
om du hellre vill bli uppmanad att ange lösenord varje gång du ansluter till
fjärrservern.
4
Markera om du använder en brandvägg:
• Välj alternativet Använd brandvägg om du ansluter till fjärrservern från bakom
en brandvägg. (Mer information om brandväggsalternativ finns i ”Associera en
fjärrserver med en lokal plats” på sidan 120.)
• Om brandväggskonfigurationen kräver att du använder passiv FTP (vilket låter
ditt lokala program konfigurera FTP-anslutningen i stället för att begära att
fjärrservern ska göra det) markerar du Använd passiv FTP. Om du inte är säker
hör du efter med systemadministratören.
5
Klicka på OK.
Platshantering och samarbete
121
Ange fjärrplatsens värdkatalog (endast FTP)
Värdkatalogen som du anger i dialogrutan Platsdefinition bör vara samma som
rotmappen för den lokala platsen. Om strukturen på fjärrplatsen inte är
densamma som strukturen på den lokala platsen, kommer filerna att läggas i fel
mappar, vilket gör att besökarna inte kan se dem. Även bild- och länksökvägarna
bryts.
Ska inte vara
värdkatalog i detta fall
nej
ja
nej
Ska inte vara
värdkatalog
Ska vara värdkatalog
Fjärrotkatalogen måste finnas innan Dreamweaver kan ansluta till den. Om du
inte har en rotkatalog för platsen på fjärrservern, skapar du en rotkatalog innan du
försöker ansluta eller också ber du serveradministratören att skapa en rotkatalog
om du inte kan göra det.
Om du inte är säker på vad du ska ange i Värdkatalog kan du lämna fältet tomt.
På vissa servrar är rotkatalogen samma som den katalog som du först ansluter till
med FTP. För att ta reda på det ansluter du till servern. Om en mapp med namnet
public_html, www eller ditt inloggningsnamn visas i rutan med fjärrfiler i
platsfönstret, så är det antagligen den katalogen som du ska använda i fältet
Värdkatalog. Skriv ner katalognamnet, koppla från och öppna dialogrutan
Platsdefinition igen. Ange sedan katalognamnet i fältet Värdkatalog och anslut på
nytt.
122
Kapitel 4
Integrering av WebDAV och SourceSafe
Med Dreamweaver kan du använda program för käll- och versionskontroll från
platsfönstret. Du kan ansluta till SourceSafe-databaser och –servrar samt
källkontrollsystem som stöder WebDAV-protokollet.
Med dialogrutan Platsdefinition kan du välja en anslutningstyp eller ett
källkontrollsystem. När du är ansluten kan du använda fildelningsfunktionerna i
Dreamweaver, exempelvis Checka in/Checka ut, Uppdatera, Hämta och skicka
nyare filer och Design Notes, när du vill använda motsvarande funktioner i ditt
eget källkontrollsystem.
Obs! För att kunna använda den här funktionen måste du ha installerat Visual SourceSafe
på datorn eller ha åtkomst till ett system som stöds av WebDAV.
Använda Dreamweaver med WebDAV-protokollet
Du kan använda Dreamweaver för att ansluta med WebDAV- (Web-based
Distributed Authoring and Versioning) protokollet om du har ett system som
stöder det protokollet. Två exempel på WebDAV-servrar som för närvarande finns
att köpa är Microsoft Internet Information Server (IIS) 5.0 och Apache Web
Server.
Så här ansluter du till en plats med hjälp av WebDAV-protokollet:
1
Välj Plats > Definiera plats.
2
Välj Redigera i dialogrutan Definiera platser.
3
I dialogrutan Platsdefinition markerar du kategorin Fjärrinformation.
4
Välj WebDAV på snabbmenyn.
5
Om du vill kan du markera Checka ut filer när du öppnar, om du vill att filer
ska checkas ut automatiskt när du öppnar.
6
Klicka på Inställningar.
Dialogrutan WebDAV-anslutning visas.
Platshantering och samarbete
123
7
I fältet URL skriver du den fullständiga URL-adressen till katalogen på
WebDAV-servern som du vill ansluta till.
Denna URL innefattar protokoll, port och katalog (om det inte är
rotkatalogen), exempelvis http://apache1/WebDAV/mysite.
8
Skriv ditt användarnamn och lösenord i motsvarande fält.
Denna information är avsedd för serververifiering och har inget att göra med
Dreamweaver. Om du inte är säker på användarnamnet eller lösenordet hör du
efter med systemadministratören eller webbmastern.
9
I fältet E-post skriver du din e-postadress.
Denna adress är obligatorisk och används för att identifiera äganderätten på
WebDAV-servern och visas i platsfönstret för kontaktändamål.
10
Klicka på Spara lösenord om du vill spara lösenordet när du avslutar
Dreamweaver.
Varje gång du påbörjar en ny session finns lösenordet kvar.
11
Klicka på OK.
12
Välj Plats > Anslut eller klicka på knappen Anslut i platsfönstret för att ansluta
till fjärrplatsen. Om du vill koppla från väljer du Plats > Koppla från eller
klickar på knappen Koppla från.
När du är ansluten kan du använda fildelningsfunktionerna i Dreamweaver
(Hämta och skicka nyare filer, Design Notes m.m.).
Du kan ändra anslutningsinformationen när som helst genom att följa
ovanstående steg och ange den nya informationen i dialogrutan WebDAVanslutning.
Använda Dreamweaver med Visual SourceSafe
Du kan öppna en befintlig Visual SourceSafe- (VSS) databas från platsfönstret i
Dreamweaver. När du är uppkopplad kan du använda filöverföringsfunktionerna i
Dreamweaver.
Obs! För att kunna använda den här funktionen måste du har installerat Microsoft Visual
SourceSafe Client version 6. För att kunna använda den här funktionen på Macintosh
måste du har installerat MetroWerks SourceSafe version 1.1.0 Client. MetroWerks Visual
SourceSafe-användare kan öppna Microsoft version 5.0 SourceSafe-databaser, men inte
version 6.0-databaser. Om du vill vara säker på att hela arbetsgruppen kan använda vilken
VSS-databas som helst över olika plattformar, använder du en version 5.0-databas. Mer
information finns i dokumentationen till SourceSafe.
124
Kapitel 4
Så här ansluter du till en SourceSafe-databas:
1
I dialogrutan Platsdefinition markerar du kategorin Fjärrinformation.
2
Välj SourceSafe-databas på snabbmenyn.
3
Du kan markera Checka ut filer när du öppnar, om du vill att filer ska checkas
ut automatiskt när du öppnar.
4
Klicka på Inställningar.
Dialogrutan Öppna SourceSafe-databas visas.
5
I fältet Databassökväg klickar du på Bläddra och går till VSS-databasen du vill
använda eller skriver den fullständiga sökvägen.
Filen du väljer kommer att bli srcsafe.ini-filen och används för initiering av
SourceSafe.
6
I fältet Projekt anger du projektet i VSS-databasen som du vill använda som
fjärrplatsens rotkatalog.
7
I fälten Användarnamn och Lösenord skriver du ditt inloggningsnamn och
lösenord för den valda databasen.
Om du inte vet ditt inloggningsnamn och lösenord kontaktar du
systemadministratören.
8
Klicka på OK och återgå till platsfönstret.
9
Välj Plats > Anslut eller klicka på knappen Anslut i platsfönstret för att ansluta
till fjärrplatsen. Om du vill koppla från väljer du Plats > Koppla från eller
klickar på knappen Koppla från.
Platshantering och samarbete
125
Felsökning av inställningarna till fjärrplatsen
En webbserver kan konfigureras på flera olika sätt. I detta avsnitt finns
information om några vanliga frågor som du kanske stöter på när du skapar en
fjärrplats och hur du ska lösa dem.
• Dreamweavers FTP-funktioner kanske inte fungerar på rätt sätt med vissa
proxyservrar, brandväggar i flera nivåer och andra sätt av indirekt
serveråtkomst. Om du har problem med FTP-åtkomst bör de be din lokala
systemadministratör om hjälp.
• Dreamweavers FTP-implementering skiljer sig från många vanliga FTPprogram. Den viktigaste skillnaden är kanske att du måste ansluta till
fjärrsystemets rotmapp och att du inte kan navigera i fjärrfilssystemet. (I många
program kan du ansluta till fjärrkataloger och sedan navigera genom
fjärrfilsystemet för att hitta katalogen i fråga.)
• Om du har problem med att ansluta och du har skrivit ett snedstreck (/) när du
angav värdkatalogen, måste du kanske ange en relativ sökväg från katalogen du
ansluter till och till fjärrotsmappen. Om rotmappen på fjärrsystemet exempelvis är
en katalog på högre nivå, måste du kanske skriva ../../ för värdkatalogen.
• Om du har en långsam anslutning kan standardvärdet för FTP-timeout på 60
sekunder resultera i alltför många tidsutlösningar. Öka detta värde (i
Platsinställningar) om du råkar ut för alltför många tidsutlösningar. Du bör
däremot inte öka värdet för mycket, då du får vänta en lång stund om en
anslutning verkligen inte kan göras. Normalt är ett värde på mellan 30 och 120
sekunder det mest användbara.
• Fil- och mappnamn som innehåller mellanslag och specialtecken ställer ofta till
med problem när de överförs till en fjärrplats. Använd understreck i stället för
mellanslag och undvik specialtecken i fil- och mappnamn om det är möjligt.
Speciellt brukar kolon, snedstreck, punkter och apostrofer i fil- eller
mappnamn orsaka problem. Specialtecken i fil- eller mappnamn kan också
ibland förhindra att Dreamweaver kan skapa en platskarta.
• På Macintosh kan filnamn inte vara längre än 31 tecken. Om du har problem
med långa filnamn bör du ändra dem till kortare namn.
• Observera att många servrar använder symboliska länkar (UNIX), genvägar
(Windows) eller alias (Macintosh) när du ansluter en mapp som ligger på
serverns hårddisk med en annan mapp som ligger någon annanstans.
Underkatalogen public_html som hör till din hemkatalog kan exempelvis vara
en länk till en annan del av servern. I de flesta fall skapar sådana alias inga
problem när du ansluter till en viss katalog eller mapp men om du kan ansluta
till en del av servern men inte till en annan kan det bero på ett aliasproblem.
• När du stöter på problem med en FTP-överföring bör du undersöka FTPloggen. Du visar loggen genom att välja Fönster > FTP-logg i platsfönstret
(Windows) eller Plats > FTP-logg (Macintosh). Om ett felmeddelande av
typen ”cannot put file” visas kan utrymmet på fjärrplatsens vara slut. Mer
information finns i FTP-loggen.
126
Kapitel 4
Använda incheckning/utcheckning
När du arbetar i en arbetsgrupp kan du checka in och checka ut filer från lokala
servrar och fjärrservrar och använda Design Notes för att lägga till kommentarer
och anteckningar till gruppen. Att checka ut en fil är detsamma som att säga ”Nu
arbetar jag på den här filen, så rör den inte!” När en fil är utcheckad visas en
bockmarkering bredvid motsvarande filikon i platsfönstret. En grön
bockmarkering anger att filen checkades ut av dig och en röd bockmarkering
anger att den checkades ut av någon annan. Namnet på personen som checkade ut
filen visas i platsfönstret.
När du checkar in en fil blir den tillgänglig för andra användare som kan checka
ut och redigera den. Den lokala versionen blir då skrivskyddad så att du inte ska
kunna göra ändringar i en fil som någon annan har checkat ut.
Utcheckade filer blir inte skrivskyddade på fjärrservern. Om du överför filer med
ett annat program än Dreamweaver, kan du skriva över utcheckade filer. Filen
(.LCK-filen) visas dock i andra program, bredvid den utcheckade filen i
kataloglistan, för att det ska vara lättare att förhindra att detta inträffar.
Du kan aktivera in- och utcheckning för vissa platser och avaktivera funktionen
för andra. Information om hur du överför filer mellan lokala platser och
fjärrplatser utan att checka in eller ut dem finns i ”Hämta filer från en fjärrserver”
på sidan 138 och ”Skicka filer till en fjärrserver” på sidan 139.
Konfigurera systemet för in- och utcheckning
Innan du kan använda systemet för in- och utcheckning måste du associera den
lokala platsen med en fjärr-FTP- eller nätverksserver (se ”Associera en fjärrserver
med en lokal plats” på sidan 120). Sedan måste du ange följande alternativ.
Så här anger du alternativ för in- och utcheckning:
1
Välj Plats > Definiera platser, markera en plats och klicka sedan på Redigera.
2
I listan Kategori till vänster klickar du på Fjärrinformation.
3
Gör något av följande:
• Aktivera alternativet Aktivera in- och utcheckning av filer om du arbetar i en
arbetsgrupp (eller arbetar ensam från flera olika datorer).
Detta alternativ är praktiskt när du vill låta andra veta att du har loggat ut en fil
för redigering eller för att påminna dig själv om att du kan ha en nyare version
av en fil på en annan dator. Se ”Använda incheckning/utcheckning” på
sidan 127.
• Aktivera alternativet Checka ut filer när du öppnar om du vill att filer
automatiskt ska checkas ut när du dubbelklickar för att öppna dem från
platsfönstret. (Om du använder Arkiv > Öppna när du öppnar en fil så checkas
inte filen ut även om detta alternativ är markerat.)
Platshantering och samarbete
127
• Ange ett utcheckningsnamn.
Utcheckningsnamnet visas i platsfönstret tillsammans med eventuella filer som
du har checkat ut, vilket gör att dina kollegor kan hitta dig om du har en fil
som de behöver. Om du arbetar ensam från flera, olika datorer bör du använda
ett unikt utcheckningsnamn på varje dator (exempelvis Susanne-HemMac och
Susanne-KontorsPC) så att du vet var den senaste versionen av filen är om du
glömmer att checka in den igen.
• Ange en e-postadress.
Om du anger en e-postadress och sedan checkar ut en fil, visas ditt namn i
platsfönstret, bredvid den filen som en klickbar länk (blå och understruken).
Om en gruppmedlem klickar på länken visas ett nytt meddelande i hans/
hennes vanliga e-postprogram. Fältet Till: innehåller e-postadressen och
ämnesraden innehåller motsvarande filnamn och platsnamn.
Checka in och ut filer på en fjärrserver
Använd platsfönstret eller Plats-menyn i dokumentfönstret när du vill checka in
och ut filer på en fjärrserver.
Om du har checkat ut en fil som du inte tänker redigera (eller om du vill förkasta
ändringar som du gjort) kan du ångra en utcheckning. Filen på servern blir då
tillgänglig för andra användare som kan checka ut den.
Obs! Om du klickar på Plats > Checka in eller Plats > Checka ut när dokumentfönstret är
aktivt och den aktuella filen inte tillhör den aktuella platsen som du har öppen, kommer
Dreamweaver att försöka avgöra till vilken lokal plats som den aktuella filen hör. Om den
aktuella filen endast tillhör en lokal plats öppnas den platsen och sedan utförs in- eller
utcheckningen.
Så här checkar du ut filer från en fjärrserver:
1
Välj en plats i listrutan med aktuella platser, överst i platsfönstret.
2
Checka ut filer på något av följande sätt:
• Markera en eller flera filer och klicka på Checka ut överst i platsfönstret.
• Välj Checka ut på snabbmenyn eller på Plats-menyn.
3
128
Kapitel 4
Om du vill hämta beroende filer tillsammans med de markerade filerna klickar
du på Ja i meddelanderutan. Om du inte vill hämta beroende filer klickar du på
Nej.
Så här checkar du in filer till en fjärrserver:
1
Välj en plats i listrutan med aktuella platser, överst i platsfönstret.
2
Markera en eller flera utcheckade eller nya filer i fönsterrutan med lokala filer
och gör något av följande.
• Klicka på Checka in överst i platsfönstret.
• Välj Checka in på snabbmenyn eller på Plats-menyn.
Filer som du har checkat ut är markerade med en grön bockmarkering. Om
filen är markerad med en röd bockmarkering är den utcheckad av en annan
användare. Checka inte in sådana filer.
En låssymbol bredvid filen betyder att filen är skrivskyddad (Windows) eller
låst (Macintosh).
Nya filer är inte markerade med vare sig en bockmarkering eller en låssymbol.
3
Om du vill skicka beroende filer tillsammans med den markerade filen klickar
du på Ja i meddelanderutan. Om du inte vill skicka beroende filer klickar du på
Nej. Normalt sett är det bra att skicka med beroende filer när du checkar in en
ny fil, men om de senaste versionerna av de beroende filerna redan finns på
fjärrservern behöver du inte skicka dem igen.
Så här ångrar du en utcheckning:
Markera filen och välj Plats > Ångra checka ut eller högerklicka (Windows) eller
Kontroll-klicka (Macintosh) och välj Ångra checka ut på snabbmenyn. Den lokala
kopian av filen blir då skrivskyddad och alla ändringar du har gjort i den
försvinner.
Så här checkar du in eller ut en aktiv fil:
I dokumentfönstret väljer du Plats > Checka in eller Plats > Checka ut eller
använd knapparna i verktygsfältet.
Om du checkar ut den aktuella filen skrivs den aktuella versionen av den öppna
filen över av den nya utcheckade versionen. Om du checkar in den aktiva filen
kanske filen sparas automatiskt innan den checkas in, detta beror på vilka
inställningar du gjort (se ”Platsinställningar” på sidan 107).
Platshantering och samarbete
129
Design Notes
Med Design Notes kan du hålla reda på extra filinformation som associeras med
dokumenten, exempelvis källnamn på bildfiler och kommentarer om filstatus.
Om du exempelvis kopierar ett dokument från en plats till en annan, kan du lägga
till Design Notes till det dokumentet, med en kommentar om att det ursprungliga
dokumentet är i den andra platsmappen. Om du sedan uppdaterar dokumentet
(eller någon annan gör det), så vet du att du måste uppdatera den ursprungliga
sidan också.
Du kan också använda Design Notes om du vill hålla reda på känslig information
som du inte vill placera i ett dokument av säkerhetsskäl. Du kan exempelvis lägga
till information om hur dokumentet skapades eller anteckningar om hur ett visst
pris eller konfiguration valdes eller vilka marknadsfaktorer som påverkade ett visst
designbeslut. Du ser vilka filer som har Design Notes bifogade i platsfönstret: En
Design Notes-ikon visas i kolumnen Anteckningar i vyn Platsens filer.
Spara filinformation i Design Notes
Du kan skapa en Design Notes-fil för varje dokument eller mall på platsen.
(Observera att om du lägger till Design Notes till en mall kommer dokument som
är baserade på mallen inte att ärva Design Notes.) Du kan också skapa Design
Notes för insticksprogram, ActiveX-kontroller, bilder, Flash-filmer, Shockwaveobjekt och bildfält i dokumenten.
Så här aktiverar du Design Notes för platsen:
1
Välj Plats > Definiera platser, markera en plats och klicka sedan på Redigera.
2
I listan Kategori till vänster klickar du på Design Notes.
• Aktivera Design Notes för platsen genom att markera Underhåll Design Notes
(om det inte redan är markerat).
När alternativet Underhåll Design Notes kan du skapa Design Notes för filer
på platsen. När en fil kopieras, flyttas, får ett nytt namn eller tas bort kommer
även Design Notes-filen att kopieras, flyttas, få ett nytt namn eller tas bort.
• Markera Skicka Design Notes som ska delas om du vill att Design Notes-filer
som är associerade med platsen ska skickas tillsammans med resten av
dokumenten.
När alternativet Skicka Design Notes som ska delas är markerat kan du dela
Design Notes med resten av medlemmarna i gruppen. När du skickar eller
hämtar en fil, skickas eller hämtas den associerade Design Notes-filen också.
Om du arbetar ensam på platsen kan du avmarkera alternativet så blir
filöverföringen snabbare. När alternativet är avmarkerat underhålls Design
Notes-filer lokalt och de skickas inte tillsammans med filerna.
3
130
Kapitel 4
Klicka på OK.
Så här lägger du till Design Notes i ett dokument:
1
Välj Arkiv > Design Notes när dokumentet är aktivt i dokumentfönstret.
Du kan också markera filen i platsfönstret och välja Arkiv > Design Notes eller
dubbelklicka i kolumnen Anteckningar. Om filen finns på en fjärrplats måste
du först checka ut eller hämta filen och sedan markera den i den lokala
mappen. (Se ”Checka in och ut filer på en fjärrserver” på sidan 128 eller
”Hämta och skicka filer” på sidan 138.)
2
På fliken Grundläggande lägger du till anteckningar av olika slag:
• Välj dokumentstatus i listrutan Status.
• Skriv kommentarer i textfältet Anteckningar.
• Klicka på datumikonen (ovanför textfältet Anteckningar) om du vill infoga
aktuellt datum.
• Markera Visa när filen är öppen om du vill att Design Notes-filen ska visas varje
gång som filen öppnas.
3
På fliken All information kan du infoga andra nycklar och värden som kan vara
användbara för andra utvecklare på platsen. Du kan exempelvis namnge en
nyckel Författare (i textrutan Namn) och definiera ett värde som Johan (i
textrutan Värde). Klicka på plus (+) om du vill lägga till ett nytt nyckelpar/
värdepar. Om du vill ta bort ett par markerar du det och klickar på minus (–).
4
Klicka på OK när du vill spara anteckningarna.
Anteckningarna som du infogat sparas i en undermapp med namnet _notes i
samma mapp som den aktuella filen. Filnamnet består av dokumentets filnamn
med filtillägget .mno. Om exempelvis filnamnet är index.html kommer den
associerade Design Notes-filen få namnet index.html.mno.
Så här lägger du till Design Notes i ett objekt:
1
Välj Design Notes på objektets snabbmeny. (Du öppnar snabbmenyn för
objektet genom att högerklicka (Windows) eller Kontroll-klicka (Macintosh)
på objektet.)
2
Följ steg 2 till och med 4 ovan om du vill lägga till Design Notes i ett
dokument.
Observera att objektets Design Notes-fil sparas i en undermapp med namnet
_notes i samma mapp som objektet källfil är placerad i, vilket inte
nödvändigtvis är samma mapp som dokumentet finns i där objektet visas.
Platshantering och samarbete
131
Gör något av följande när du vill öppna Design Notes som är associerat med en fil:
• Markera filen i platsfönstret eller öppna själva filen. Välj sedan Arkiv > Design
Notes. Design Notes som är associerat med den filen öppnas.
• I kolumnen Anteckningar i platsfönstret dubbelklickar du på den gula Design
Notes-ikonen.
Så här anger du status som inte finns i listrutan Status:
1
Öppna Design Notes för en fil eller ett objekt.
2
Klicka på fliken All information.
3
Klicka på plustecknet (+).
4
I textrutan Namn anger du namnet status.
5
I textrutan Värde anger du statusen.
Om ett statusvärde redan existerar ersätts det av det nya.
6
Klicka på fliken Grundläggande information och se att det nya statusvärdet
visas i listrutan Status.
Obs! Du kan endast ha ett nytt värde i listrutan åt gången. Om du upprepar denna
procedur kommer statusvärdet som du angav den första gången att ersättas av det nya
statusvärdet som du anger den andra gången.
Så här inaktiverar du Design Notes:
1
Välj Plats > Definiera platser.
2
I dialogrutan Definiera platser markerar du platsen och klickar på Redigera.
3
Klicka på Design Notes i listan Kategori i dialogrutan Platsdefinition.
4
Avmarkera Underhåll Design Notes.
När du avmarkerar alternativet inaktiveras Design Notes-funktionen. Om du
avmarkerar alternativet och sedan klickar på Rensa, tas alla lokala Design
Notes-filer för platsen bort.
5
Klicka på OK.
Ett meddelande visas som frågar om du vill ta bort befintliga Design Notesfiler. Klicka på Ja om du vill ta bort filerna eller på Nej om du vill behålla dem.
132
Kapitel 4
Så här använder du endast Design Notes lokalt:
1
Välj Plats > Definiera platser.
2
I dialogrutan Definiera platser markerar du platsen och klickar på Redigera.
3
I dialogrutan Platsdefinition markerar du Underhåll Design Notes i rutan
Design Notes.
4
Avmarkera kryssrutan Skicka Design Notes som ska delas.
Design Notes kommer inte att skickas till fjärrplatsen när du checkar in eller
skickar filerna. Du kommer fortfarande kunna lägga till och ändra Design
Notes för platsen lokalt.
Så här tar du bort Design Notes som inte är associerade med någon fil från
platsen:
1
Välj Plats > Definiera platser.
2
I dialogrutan Definiera platser markerar du platsen och klickar på Redigera.
3
Klicka på Design Notes i listan Kategori i dialogrutan Platsdefinition.
4
Klicka på Rensa. Ett meddelande visas som ber dig bekräfta att alla Design
Notes-filer som inte är associerade med en fil tas bort från platsen. (Om du
använder Dreamweaver och tar bort en fil som har en associerad Design Notesfil, kommer Design Notes-filen att tas bort också. Av den anledningen finns det
därför endast föräldralösa Design Notes-filer om du har tagit bort eller ändrat
namn på en fil utanför Dreamweaver.)
Obs! Om du avmarkerar kryssrutan Underhåll Design Notes innan du klickar på Rensa
kommer alla Design Notes-filer att tas bort från platsen.
Använda fillistkolumner med Design Notes
Du kan anpassa kolumnerna som visas i platsfönstrets listor över lokala mappar
och fjärrplatser. Du kan ändra ordning på kolumner, lägga till nya kolumner
(maximalt 10 kolumner), ta bort kolumner, dölja kolumner, associera Design
Notes till kolumndata och ange kolumner som ska delas med alla användare som
är anslutna till en plats. Standardkolumnerna är Namn, Anteckningar, Storlek,
Typ, Ändrad och Utcheckad av. Du kan sortera efter vilken kolumn som helst
genom att klicka på kolumnrubriken i platsfönstret. Om du klickar på en kolumn
mer än en gång ändras sorteringsordningen (fallande och stigande) för kolumnen.
Obs! Du kan inte ta bort, ändra namn på eller associera en Design Note med en inbyggd
kolumn (Namn, Anteckningar, Storlek, Typ, Ändrad, Utcheckad av). Du kan ändra
ordningsföljd och justering för dessa kolumner samt dölja dem, förutom kolumnen Namn
som inte kan döljas.
Platshantering och samarbete
133
Gör något av följande när du vill ändra alternativen för fillistkolumner:
• Välj Visa > Fillistkolumner i platsfönstret (Windows) eller Plats > Vy över
platsens filer > Fillistkolumner (Macintosh).
• Välj > Definiera platser, markera en plats och klicka sedan på Redigera.
Markera sedan Fillistkolumner i dialogrutan Platsdefinition.
• Högerklicka i platsfönstret (Windows) eller Kontroll-klicka (Macintosh) på en
kolumn och markera Fillistkolumner.
Dialogrutan Platsdefinition visas med alternativen för fillistkolumner.
Så här ändrar du ordningen på kolumner:
1
Markera ett kolumnnamn i kategorin Fillistkolumner i dialogrutan
Platsdefinition.
2
Klicka på uppilen eller nedpilen när du vill ändra placeringen av den markerade
kolumnen.
Du kan ändra placering för vilken kolumn som helst förutom kolumnen
Namn, som alltid är på samma plats.
134
Kapitel 4
Så här lägger du till en ny kolumn:
1
Klicka på plustecknet (+) i vyn Fillistkolumner i dialogrutan Platsdefinition.
2
Skriv ett namn på kolumnen i fältet Kolumnnamn.
3
Välj ett värde i listrutan Associera med Design Note eller skriv ett eget värde.
Du måste associera en ny kolumn med en Design Note, så att det finns data att
visas i platsfönstret.
4
Välj ett justeringsalternativ: vänster, höger eller mitten. Detta bestämmer hur
texten justeras i kolumnen.
5
Du visar eller döljer kolumnen genom att markera eller avmarkera alternativet
Visa.
6
Om du vill dela kolumnen med alla användare som är anslutna till platsen,
markerar du alternativet Dela med alla användare på denna plats.
Så här tar du bort en tillagd kolumn:
1
Markera kolumnen du vill ta bort.
2
Klicka på minustecknet (-).
Obs! Kolumnen tas genast bort utan bekräftelse, så du bör vara helt säker på att du
verkligen vill ta bort kolumnen innan du klickar på minustecknet (-).
Använda Design Notes i Fireworks och Dreamweaver
Om du öppnar en bild i Macromedia Fireworks 4,0 och exporterar den till ett
annat format, sparar Fireworks automatiskt namnet på den ursprungliga källfilen i
en Design Notes-fil. Om du exempelvis öppnar filen myhouse.png i Fireworks
och exporterar den som myhouse.gif, skapar Fireworks automatiskt en Design
Notes-fil med namnet myhouse.gif.mno, som innehåller namnet på den
ursprungliga filen som en absolut sökväg: file://URL. Exempelvis så kan Design
Notes-filen för myhouse.gif innehålla följande rad:
fw_source="file://Mydisk/sites/assets/orig/myhouse.png"
Om bilden innehåller hotspot-objekt eller överrullningsbilder läggs HTMLkoden för dessa objekt till i Design Notes-filen också.
När du importerar bilden i Dreamweaver, kopieras Design Notes-filen
automatiskt till platsen tillsammans med bilden. När du markerar bilden i
Dreamweaver och väljer att redigera den med Fireworks (se ”Starta en extern
redigerare” på sidan 294) öppnas den ursprungliga filen. Mer information finns i
”Använda Dreamweaver och Fireworks tillsammans” på sidan 277.
Platshantering och samarbete
135
Förbättra arbetsflödet med hjälp av
rapporter
Välj Plats > Rapporter när du vill förbättra samarbetet bland medlemmarna i en
webbgrupp. Du kan köra arbetsflödesrapporter som visar vem som har checkat ut
en fil och vilka filer som har associerade Design Notes. Du kan förbättra Design
Notes-rapporter genom att ange parametrar för namn/värden. Information om
hur du kör andra typer av rapporter finns i ”Testa en plats med kommandot
Rapporter” på sidan 505.
Obs! Du måste ha definierat en fjärrplatsanslutning för att kunna köra
arbetsflödesrapporter.
Så här kör du en Utcheckad av-rapport:
1
Välj Plats > Rapporter.
Dialogrutan Rapporter visas.
2
Välj ett alternativ på menyn Rapport. Du kan välja att rapportera om ett
dokument, en hel webbplats, markerade filer på en plats eller en viss mapp.
3
Markera Utcheckad av under Arbetsflöde.
4
Klicka på knappen Rapportinställningar.
Dialogrutan Utcheckad av visas.
5
136
Kapitel 4
Ange namnet på en gruppmedlem och klicka på OK.
6
Klicka på Kör.
Rapporten körs och i dialogrutan Rapporter visas en översikt över filerna som
har checkats ut av personen i fråga.
Så här kör du en rapport på en viss Design Note:
1
Välj Plats > Rapporter.
Dialogrutan Rapporter visas.
2
Välj ett alternativ på menyn Rapport. Du kan välja att rapportera om ett
dokument, en hel webbplats, markerade filer på en plats eller en viss mapp.
3
Markera Design Notes under Arbetsflöde.
Knappen Rapportinställningar blir tillgänglig.
4
Klicka på knappen Rapportinställningar.
Dialogrutan Design Notes visas.
5
Ange ett eller fler namn och värdepar och välj jämförelsevärden i motsvarande
listruta.
Om du exempelvis anger ”status innehåller utkast”, letar rapporten efter filer
vars Design Notes har statusen ”utkast”.
6
Klicka på OK när du vill återgå till dialogrutan Rapporter.
7
Klicka på Kör när du vill köra rapporten.
Platshantering och samarbete
137
Hämta och skicka filer
Om du arbetar i en arbetsgrupp använder du systemet för in- och utcheckning när
du överför filer mellan lokala platser och fjärrplatser (se ”Använda incheckning/
utcheckning” på sidan 127). Om du är den enda personen som arbetar på
fjärrplatsen kan du använda kommandona Hämta och Skicka när du överför filer
utan att checka in eller ut dem.
Obs! Om du klickar på Plats > Hämta eller Plats > Skicka när dokumentfönstret är aktivt och
den aktuella filen inte tillhör den aktuella platsen som du har öppen kommer Dreamweaver
att försöka avgöra till vilken lokal plats som den aktuella filen hör. Om den aktuella filen
endast tillhör en lokal plats öppnas den platsen och sedan utförs funktionen Hämta eller
Skicka.
Hämta filer från en fjärrserver
När du hämtar filer kopieras de från fjärrplatsen till den lokala platsen.
Om du använder systemet för in- och utcheckning (om alternativet Aktivera inoch utcheckning av filer är aktiverat) resulterar kommandot Hämta i att en
skrivskyddad lokal kopia skapas av filen, vilket innebär att filen är tillgänglig på
fjärrservern för andra att checka ut. Om alternativet Aktivera in- och utcheckning
av filer är avaktiverat överförs en kopia med både läs- och skrivrättigheter när du
hämtar en fil. Se ”Använda incheckning/utcheckning” på sidan 127.
Obs! Om du arbetar tillsammans med andra personer, det vill säga att andra arbetar på
samma filer som du, bör du inte avmarkera Aktivera in- och utcheckning av filer. Särskilt om
andra använder systemet för in- och utcheckning på samma plats bör du också använda
det.
Observera att filerna som kopieras när du klickar på Hämta är de som är
markerade i den fönsterruta i platsfönstret som är aktiv. Om fönsterrutan med
fjärrfiler är aktiv kopieras de markerade fjärrfilerna till den lokala platsen. Om
fönsterrutan med de lokala filerna är aktiv kopieras motsvarande fjärrfiler som
motsvarar de markerade lokala filerna till den lokala platsen.
Om du inte arbetar tillsammans med andra personer och vill hämta filer som inte
är skrivskyddade, avaktiverar du Aktivera in- och utcheckning av filer för den
platsen (se ”Associera en fjärrserver med en lokal plats” på sidan 120).
Använd kommandot Synkronisera om du endast vill hämta fjärrfiler som är av en
senare version än de lokala filerna (se ”Synkronisera filerna på den lokala platsen
och på fjärrplatsen” på sidan 141).
138
Kapitel 4
Så här hämtar du filer från en fjärrserver:
1
Välj Fönster > Platsens filer så öppnas platsfönstret.
2
Överst i platsfönstret väljer du en plats på den aktuella platsens popup-meny.
3
Klicka på Anslut när du vill upprätta en anslutning till fjärrservern om du
använder FTP när du överför filer.
Om en anslutning redan är upprättad (i så fall visas knappen Koppla från),
hoppar du över detta steg. Om fjärrfilerna visas i fönsterrutan med fjärrfiler
från en tidigare uppkoppling behöver du inte klicka på Anslut. Du klickar bara
på Hämta så ansluts du automatiskt.
4
Välj de filer som du vill hämta. (Vanligtvis markerar du filerna i fönsterrutan
med fjärrfiler men du kan markera motsvarande filer i fönsterrutan med lokala
filer om du vill.)
5
Klicka på Hämta eller välj Hämta på snabbmenyn eller på Plats-menyn. Om
filen är öppen i ett dokumentfönster kan du välja Plats > Hämta från
dokumentfönstret.
6
Om du vill hämta beroende filer klickar du på Ja, annars klickar du på Nej.
(Om du redan har lokala filer av de beroende filerna klickar du på Nej.) Om du
inte vill bli tillfrågad om beroende filer i framtiden markerar du kryssrutan
Fråga inte igen.
Obs! Om du vill stoppa överföringen klickar du på Stoppa aktuell uppgift (den röda
stoppskylten med ett vitt X i det nedre högra hörnet av platsfönstret) eller också trycker du
på Esc (Windows) eller Kommando+punkt (Macintosh). Överföringen stoppar kanske inte
direkt.
Dreamweaver registrerar all FTP-filöverföringsaktivitet. Om ett fel uppstår när du
överför en fil via FTP, kan FTP-loggen hjälpa dig att lösa problemet. Du visar
loggen genom att välja Fönster > FTP-logg i platsfönstret (Windows) eller Plats >
FTP-logg (Macintosh).
Skicka filer till en fjärrserver
När du använder kommandot Skicka kopieras filerna från den lokala platsen till
fjärrplatsen, vanligtvis utan att filernas utcheckningsstatus ändras. Det finns två
vanliga situationer där du använder Skicka i stället för Checka in: När du inte
arbetar tillsammans med andra och inte använder in- och utcheckning eller när du
vill skicka den aktuella filen till servern men fortsätta att redigera den.
Obs! Om du skickar en fil som inte tidigare fanns på fjärrplatsen och du använder systemet
för in- och utcheckning, kopieras filen först till fjärrplatsen och checkas sedan ut i ditt namn
så att du kan fortsätta att redigera den.
Om du vill skicka en fil till en fjärrserver och checka in den, använder du
kommandot Checka in. Se ”Checka in och ut filer på en fjärrserver” på sidan 128.
Platshantering och samarbete
139
Mer information om hur du endast skickar lokala filer som är av en senare version
än fjärrfilerna finns i ”Synkronisera filerna på den lokala platsen och på
fjärrplatsen” på sidan 141.
Obs! Använd inte specialtecken (exempelvis é, ç eller ¥) eller skiljetecken, exempelvis
kolon, snedstreck eller punkter, i namn på filer som du tänker lägga upp på en fjärrserver.
Många servrar ändrar dessa tecken när filerna tas emot och gör att eventuella länkar till
filerna bryts.
Så här lägger du upp filer på en fjärrserver:
1
Välj Fönster > Platsens filer så öppnas platsfönstret.
2
Överst i platsfönstret väljer du en plats i den aktuella platsens popup-meny.
3
Om du använder FTP när du överför filer och vill visa vad som finns på
fjärrservern innan du överför filer kan du klicka på Anslut så upprättas en
anslutning till fjärrservern. Du behöver dock inte klicka på Anslut om du
klickar på Skicka eftersom du då ansluts automatiskt.
4
Markera de filer som du vill skicka. (Vanligtvis markerar du filerna i
fönsterrutan med lokala filer men du kan markera motsvarande filer i
fönsterrutan fjärrfiler om du vill.)
5
Klicka på Skicka eller välj Skicka på snabbmenyn eller på Plats-menyn.
6
Om filen inte är sparad kan en dialogruta komma att visas (beroende på en
inställning under kategorin Plats i dialogrutan Inställningar) där du kan spara
filen innan den skickas till fjärrservern. Om du vill spara filen klickar du på Ja.
Om du vill skicka den version som är sparad på hårddisken till fjärrservern
klickar du på Nej.
Om du väljer att inte spara filen kommer alla ändringar sedan du senast sparade
inte att skickas till fjärrservern. Filen förblir dock öppen så att du fortfarande
kan spara dina ändringar efter att ha skickat filen till servern om du vill.
7
Om du vill skicka beroende filer klickar du på Ja, annars klickar du på Nej.
(Om det redan finns fjärrfiler av de beroende filerna klickar du på Nej.) Om du
inte vill bli tillfrågad om beroende filer i framtiden markerar du kryssrutan
Fråga inte igen.
Obs! Om du vill stoppa överföringen klickar du på Stoppa aktuell uppgift (den röda
stoppskylten med ett vitt X i det nedre högra hörnet av platsfönstret) eller också trycker du på
Esc (Windows) eller Kommando+punkt (Macintosh). Överföringen stoppar kanske inte direkt.
Om filen är öppen i ett dokumentfönster kan du välja Plats > Skicka från
dokumentfönstret.
Dreamweaver registrerar all FTP-filöverföringsaktivitet. Om ett fel uppstår när du
överför en fil via FTP, kan FTP-loggen hjälpa dig att lösa problemet. Du visar
loggen genom att välja Fönster > FTP-logg i platsfönstret (Windows) eller Plats >
FTP-logg (Macintosh).
140
Kapitel 4
Synkronisera filerna på den lokala platsen
och på fjärrplatsen
När du har skapat filer på den lokala platsen och på fjärrplatsen kan du
synkronisera filerna mellan de två platserna. Om du vill överföra de senaste
versionerna av filerna från och till fjärrplatsen väljer du Plats > Synkronisera.
Om fjärrplatsen är en FTP-server (i stället för en nätverksserver) kommer
synkroniseringen av filerna att använda FTP. Mer information om hur du
använder FTP finns i ”Associera en fjärrserver med en lokal plats” på sidan 120.
Innan du synkroniserar platserna får du bekräfta vilka filer som du vill skicka till
eller hämta från fjärrservern. Dreamweaver bekräftar också vilka filer som har
uppdaterats efter att synkroniseringen är klar.
Om du vill visa vilka filer som är nyare på den lokala platsen eller vilka filer som är
nyare på fjärrplatsen utan att synkronisera väljer du Redigera > Välj nyare lokalt
eller Redigera > Välj nyare fjärr (Windows, från platsfönstret) eller Plats > Vy över
platsens filer > Välj nyare lokalt eller Plats > Vy över platsens filer > Välj nyare fjärr
(Macintosh).
Så här synkroniserar du filerna:
1
Om du vill synkronisera vissa filer eller mappar i stället för en hel plats
markerar du filerna eller mapparna i antingen fönsterrutan med lokala filer eller
fjärrfiler i platsfönstret.
2
Välj Plats > Synkronisera i platsfönstret (Windows) eller från menyraden
(Macintosh).
3
Välj Hela platsnamn-platsen i listrutan Synkronisera om du vill synkronisera
hela platsen. Välj Markerade endast lokala filer (eller Markerade endast fjärrfiler
om det var i fönsterrutan med fjärrfiler som du markerade en fil sist) om du
endast vill synkronisera markerade filer.
4
Välj i vilken riktning du vill kopiera filerna:
• Välj Skicka nyare filer till fjärrkatalogen om du vill skicka alla lokala filer som
har senare ändringsdatum än motsvarande fjärrfiler.
• Välj Hämta nyare filer från fjärrkatalogen om du vill hämta alla fjärrfiler som
har ett senare ändringsdatum än motsvarande lokala filer.
• Välj Hämta och skicka nyare filer om du vill placera de nyaste versionerna av
alla filer på både den lokala platsen och på fjärrplatsen.
Platshantering och samarbete
141
5
Välj om du vill ta bort filer på målplatsen som inte har någon motsvarighet på
ursprungsplatsen. (Du kan inte göra detta om du har valt ”Hämta och skicka
nyare filer”.)
Om du väljer Skicka nyare filer till fjärrkatalogen och sedan markerar Ta bort
fjärrfiler som inte finns på den lokala enheten kommer alla filer på fjärrplatsen
som inte har någon motsvarighet på den lokala platsen att tas bort . Om du
väljer Hämta nyare filer till fjärrkatalogen kommer alla filer på den lokala
platsen att tas bort som inte har någon motsvarighet på den fjärrplatsen.
6
Klicka på Förhandsgranska.
Om den nyaste versionen redan finns på båda ställena och inget behöver tas
bort, visas ett meddelande som talar om att ingen synkronisering är nödvändig.
142
Kapitel 4
7
I dialogrutan Synkronisera filer bestämmer du vilka filer som du vill ta bort,
skicka eller hämta. Om du inte vill att en viss fil ska tas bort, skickas eller
hämtas avmarkerar du kryssrutan till vänster om filnamnet (i kolumnen
Åtgärd).
8
Klicka på OK. Filerna överförs automatiskt (eller tas bort om det behövs) och
dialogrutan Synkronisera filer uppdateras med rätt status.
9
Klicka på Spara logg om du vill spara verifikationsinformationen till en lokal fil.
5
KAPITEL 5
Skapa ett dokument
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
När du väl har skapat den lokala platsen kan du skapa dokumenten som ska finnas
på platsen. (Mer information om hur du sätter upp en plats finns i ”Använda
Dreamweaver för att göra en ny plats” på sidan 97.) Ett dokument, d.v.s. en sida
på webbplatsen, kan innehålla text och bilder samt mer sofistikerat innehåll,
exempelvis animeringar, video, länkar till andra dokument och ljud. När du
skapar och arbetar med dokument genereras den underliggande HTML- och
JavaScript-koden automatiskt. Du granskar och redigerar denna kod med någon
av kodredigerarna i Dreamweaver: kodvyn i dokumentfönstret eller
kodkontrollen. (Mer information finns i ”Använda kodvyn (eller kodkontrollen)”
på sidan 326.)
Du kan skapa nya dokument i Dreamweaver genom att börja med tomma
HTML-dokument eller mallar. Du kan också öppna och redigera befintliga
HTML-dokument som har skapats i andra program. (Se ”Skapa, öppna och spara
HTML-dokument” på sidan 144.)
När du skapar ett dokument kan du definiera grundläggande sidelement. Sidans
titel identifierar exempelvis dokumentet för besökaren och visas vanligtvis i
webbläsarens namnlist. Med bakgrundsbilder, bakgrundsfärger och text- och
länkfärger kan du anpassa sidan och skilja vanlig text från hypertext. Med
marginalegenskaper kan du ange sidans över - och vänstermarginal. (Se ”Ange
dokumentegenskaper” på sidan 146.)
När du lägger till innehåll kan du markera och ändra objekt direkt i
dokumentfönstret. I vissa fall kanske du måste välja markeringsrutor som
motsvarar de sidelement som inte är synliga i dokumentfönstret, exempelvis
kommentarer och skript. (Se ”Markera element i dokumentfönstret” på
sidan 148.)
När du skapar dokument kan du utföra samma uppgift flera gånger med hjälp av
historiepanelen. (Se ”Automatisera uppgifter” på sidan 154.)
143
Skapa, öppna och spara HTML-dokument
Du kan skapa ett dokument i Macromedia Dreamweaver på många olika sätt. Du
kan skapa nya, tomma HTML-dokument eller öppna ett befintligt HTMLdokument, även om det skapades i ett annat program. Du kan också skapa ett nytt
dokument baserat på en mall.
Du kan även öppna andra filer än HTML-textfiler, exempelvis JavaScript-filer, epostfiler i vanlig text och textfiler som har sparats i ordbehandlare eller
textredigerare. Du kan inte använda alla dokumentredigeringsverktygen på ett
vanligt textdokument, men du kan använda grundläggande
textredigeringsfunktioner. Du kanske vill öppna ett textdokument om du ska
redigera och felsöka JavaScript-kod, visa innehållet i en konfigurationsfil för
Dreamweaver eller öppna ett e-postmeddelande som innehåller ett HTMLkodfragment som du vill kopiera och klistra in i ett annat dokument.
Gör något av följande när du vill skapa ett tomt HTML-dokument i ett nytt
dokumentfönster:
• I Windows väljer du Arkiv > Nytt från ett befintligt dokumentfönster eller
också väljer du Arkiv > Nytt fönster från platsfönstret.
• På Macintosh väljer du Arkiv > Nytt.
Om du öppnar kodvyn (i dokumentfönstret) eller kodkontrollen ser du att det i
själva verket inte är ett helt tomt dokument. Det innehåller HTML-, HEAD- och BODYkoder som hjälper dig att komma igång. När du skriver i dokumentfönstrets
designvy eller infogar objekt som tabeller och bilder, kan du låta en kodredigerare
vara öppen och titta på när HTML-källkoden skapas. Information om
kodredigerare finns i ”Använda kodvyn (eller kodkontrollen)” på sidan 326.
Gör något av följande när du vill öppna en befintlig HTML-fil:
• Välj Arkiv > Öppna.
• Om filen skapades med Microsoft Word väljer du Arkiv > Importera >
Importera Word-HTML.
Om du väljer Importera Word-HTML öppnas filen och du kan ange olika
alternativ och ta bort ovidkommande HTML-kod som genereras av Word. (I
Microsoft Word 97 och senare finns funktionen Spara som HTML som lägger
till onödig HTML-kod vid konverteringen till HTML.) Mer information finns
i ”Rensa Microsoft Word-HTML” på sidan 343.
Obs! Du kan inte importera en Microsoft Word- (.doc) fil i Dreamweaver direkt. Om du
vill importera innehållet i en Word-fil, startar du Word och sparar filen som HTML innan
du importerar den resulterande HTML-filen i Dreamweaver.
144
Kapitel 5
Så här skapar du ett nytt dokument baserat på en mall:
1
Välj Arkiv > Nytt från mall.
En dialogruta visas som innehåller de tillgängliga mallarna för den aktuella
platsen. (Du måste skapa mallar innan du kan skapa dokument baserade på
dem. Se ”Skapa mallar” på sidan 373.)
När du skapar ett dokument baserat på en mall är vissa delar av dokumentet
låsta så att de inte kan redigeras. (Vilka regioner som är ändringsbara bestäms i
mallfilen.) När du använder en mall till flera dokument på en plats blir sidorna
konsekventa.
2
Markera en mall och klicka på Välj.
Ett nytt dokument skapas baserat på mallen. Varje ändringsbar del i det nya
dokumentet är som standard omgivet av en blå kant. Hela dokumentet är
omgivet av en gul kant (som standard), så att det ska vara lätt att se att det är
baserat på en mall och att vissa delar därför är låsta. (Information om hur du
anpassar färgerna på kanterna finns i ”Mallar – inställningar” på sidan 379.)
Om du vill ändra en ändringsbar del av en mall markerar du platshållarens
innehåll i den ändringsbara regionen och skriver över den. I vissa fall finns det
inget platshållarinnehåll i den ändringsbara regionen. Om så är fallet klickar du
i den ändringsbara regionen.
Mer information om hur du utformar och arbetar med mallar finns i
”Återanvända innehåll med mallar och bibliotek” på sidan 371.
Så här sparar du ett dokument:
1
Välj Arkiv > Spara.
2
Ange ett namn på filen och gå till den plats där du vill spara den.
Obs! Filtillägget .htm (Windows) eller .html (Macintosh) läggs automatiskt till i filnamnet
när dialogrutan först visas. (Du kan bestämma vilket filtillägg som ska läggas till med ett
alternativ i de allmänna inställningarna.) Om du vill spara filen som vanlig text i Windows,
ger du filen filtillägget .txt. Om du vill spara filen som vanlig text på Macintosh, tar du bort
filtillägget .html från filnamnet. (Om du vill att Dreamweaver ska tolka filen som en
HTML-fil sparar du den med filtillägget .html (eller .htm).) När du har sparat en fil som
text tolkas ingen HTML-kod i filen.
När du sparar dokument bör du undvika att använda specialtecken i fil- och
mappnamn. Använd inte specialtecken (exempelvis é, ç och ¥) eller
skiljetecken, exempelvis kolon, snedstreck och punkter, i namn på filer som du
tänker lägga upp på en fjärrserver. På många servrar ändras desssa tecken när du
lägger upp filen vilket kan orsaka brutna länkar i filerna. Börja inte heller
filnamnet med en siffra.
3
Klicka på knappen Spara när du vill spara filen.
Skapa ett dokument
145
Ange dokumentegenskaper
Sidtitlar, bakgrundsbilder, bakgrundsfärger och text- och länkfärger och
marginaler är grundläggande egenskaper i varje HTML-dokument. Sidans titel
identifierar och ger dokumentet ett namn. En bakgrundsbild eller bakgrundsfärg
anger det övergripande utseendet på dokumentet. Text- och länkfärger hjälper
besökarna att skilja vanlig text från hypertext och att se vilka länkar som har
besökts och vilka som inte har besökts.
Ändra titel på en sida
Titeln på en HTML-sida hjälper besökaren att hålla reda på vad de visar efter
hand som de bläddrar. Titeln identifierar sidan i historik- och bokmärkeslistorna.
Om du inte sätter en titel på en sida kommer sidan att visas i webbläsaren,
bokmärkeslistorna och historiklistorna som Untitled Document. Att ge
dokumentet ett filnamn (genom att spara det) är inte samma sak som att ge sidan
en titel. Välj Plats > Rapporter om du vill hitta alla namnlösa dokument på
platsen. Se ”Skapa rapporter” på sidan 506.
Så här ändrar du titeln på en sida:
1
Gör något av följande:
• Välj Ändra > Sidegenskaper.
• Se till att inget är markerat genom att klicka på ett tomt område på sidan. Välj
Sidegenskaper på snabbmenyn genom att högerklicka (Windows) eller
Kontroll-klicka (Macintosh) i designvyn i dokumentfönstret.
• Välj Visa > Innehållet under HEAD, klicka sedan på knappen Titel när den
visas och öppna egenskapskontrollen.
• Välj Visa > Verktygsfält.
2
Skriv titeln på sidan i textrutan Titel.
3
Om du använder dialogrutan Sidegenskaper klickar du på OK.
Titeln visas i namnlisten för dokumentfönstret (och i verktygsfältet, om det
visas). Filnamnet på sidan och mappen som filen är sparad i visas inom parentes
bredvid titeln i namnlisten. En asterisk visar att dokumentet innehåller
ändringar som ännu inte sparats.
146
Kapitel 5
Definiera en bakgrundsbild eller en bakgrundsfärg
Använd dialogrutan Sidegenskaper när du vill definiera en bild eller färg för sidans
bakgrund. Om du både använder en bakgrundsbild och en bakgrundsfärg
kommer färgen att synas under tiden bilden läses in och sedan täcker bilden
bakgrundsfärgen. Om bakgrundsbilden innehåller genomskinliga bildpunkter
syns bakgrundsfärgen igenom.
Så här definierar du en bakgrundsbild eller bakgrundsfärg:
1
Välj Ändra > Sidegenskaper eller välj Sidegenskaper på snabbmenyn i
designvyn i dokumentfönstret.
2
Klicka på Bläddra, gå till och markera bilden som du vill ange som
bakgrundsbild. Du kan också skriva sökvägen till bakgrundsbilden i rutan
Bakgrundsbild.
I Dreamweaver upprepas bakgrundsbilden om den inte fyller hela
webbläsarfönstret, på precis samma sätt som i webbläsaren. (Om du inte vill att
bakgrundsbilden ska upprepas använder du CSS (Cascading Style Sheets) och
inaktiverar bildupprepning. Se ”Använda CSS-formatmallar” på sidan 243.)
3
Klicka på rutan Bakgrundsfärg och välj en färg i färgväljaren när du anger
bakgrundsfärg. (Se ”Arbeta med färger” på sidan 83.)
Definiera standardtextfärger
Definiera standardfärger för vanlig text, länkar, besökta länkar och aktiva länkar
med hjälp av alternativen i dialogrutan Sidegenskaper. Du kan också välja ett
förvalt färgschema för att definiera sidans bakgrund och textfärger. (Se ”Arbeta
med färger” på sidan 83.)
Obs! Den aktiva länkfärgen är den färg en länk ändras till när du klickar på den. Vissa
webbläsare kanske inte använder färgen som du anger.
Så här definierar du standardtextfärger (välj något av följande):
• Välj Ändra > Sidegenskaper och välj sedan färgerna för alternativen Text, Länk,
Besökta länkar och Aktiva länkar.
• Välj Kommandon > Ange färgschema och välj sedan en bakgrundsfärg och
färguppsättning för text och länkar.
I exempelrutan ser du hur färgschemat ser ut i webbläsaren.
Obs! Det kan vara svårt för färgblinda personer att urskilja vissa
lågkontrastkombinationer av text- och bakgrundsfärger. Det är bra om du kan visa sidan
för en färgblind person för att avgöra om den är läsbar.
Skapa ett dokument
147
Markera element i dokumentfönstret
Du markerar vanligtvis ett element i designvyn i dokumentfönstret genom att klicka på
det. Om ett element är osynligt måste du göra det synligt innan du kan markera det.
Använd följande metoder när du vill markera element:
• Du markerar ett synligt element i dokumentfönstret genom att dra muspekaren
över det eller genom att klicka på det.
• Du markerar ett osynligt element genom att välja Visa > Visuella hjälpmedel >
Osynliga element (om det menyalternativet inte redan är markerat) och sedan
klicka på elementets markeringsruta i dokumentfönstret.
Vissa objekt visas på sidan på en annan plats än den som den tillhörande koden
infogades på. Ett skikt kan exempelvis finnas var som helst på sidan, men
koden som definierar skiktet finns på en bestämd plats. När osynliga element
visas i Dreamweaver visas markeringsrutor i dokumentfönstret så att du kan se
var koden för dessa element finns. När du markerar en markeringsruta
markeras hela elementet. Om du exempelvis markerar markeringsrutan för ett
skikt markeras hela skiktet. (Se ”Osynliga element” på sidan 149.)
• Om du vill markera en hel kod (inklusive dess innehåll, om det finns något),
klickar du på en HTML-kod i kodväljaren längst ned i dokumentfönstret.
(Kodväljaren visas endast när designvyn är aktiv.) I kodväljaren visas alltid de
HTML-koder som innehåller den aktuella markeringen eller
insättningspunkten. Koden längst till vänster är den yttersta koden som
innehåller den aktuella markeringen eller insättningspunkten. Nästa kod finns i
den yttersta koden och så vidare. Koden längst till höger är den innersta koden
som innehåller den aktuella markeringen eller insättningspunkten.
Kodväljare
När du exempelvis har definierat en länk för en bild kan HTML-koden se ut så här:
<a href="http://www.macromedia.com"><img src="agraphic.gif"></a>
Om du klickar på bilden i dokumentfönstret visas koderna för den aktuella
markeringen i kodväljaren:
<body><a><img>
Eftersom bilden är markerad visas <IMG>-koden i kodväljaren i fetstil. Om du
klickar på koden i kodväljaren motsvarar det att markera <img
src="agraphic.gif"> i en kodredigerare.
Om du vill markera länken (a-koden och allt dess innehåll) i stället för bilden
klickar du på bilden i dokumentfönstret och sedan på <a> som visas i kodväljaren.
148
Kapitel 5
Om du vill visa den HTML-kod som hör ihop med den markerade texten eller det
markerade objektet gör du något av följande:
• Välj Visa > Kod eller Visa > Kod och design om du vill visa kodvyn i
dokumentfönstret. Mer information om kodvyn finns i ”Använda kodvyn
(eller kodkontrollen)” på sidan 326.
• Välj Fönster > Kodkontrollen när du vill öppna kodkontrollen (i ett separat
fönster).
När du markerar något i någon av kodredigerarna (kodvyn eller kodkontrollen),
markeras det vanligtvis också i dokumentfönstret. Du måste kanske synkronisera
de två vyerna innan markeringen visas. Se ”Använda kodvyn (eller
kodkontrollen)” på sidan 326.
Osynliga element
Viss HTML-kod representeras inte synligt i en webbläsare. COMMENT-koder visas
exempelvis inte i webbläsaren. Det kan dock vara användbart att, när du skapar
sidan, kunna markera, redigera, flytta och ta bort dessa osynliga element. I
Dreamweaver kan du ange om ikoner ska visas som anger placeringen av osynliga
element i designvyn i dokumentfönstret.
Välj Visa > Visuella hjälpmedel > Osynliga element om du vill visa eller dölja
markeringsikoner för osynliga element. Om du visar osynliga element så kan du
markera dem och ändra deras egenskaper i egenskapskontrollen om du däremot
döljer dem visas sidan nästan som den kommer att se ut i en webbläsare. Om du
visar osynliga element kan sidans layout ändras något genom att olika element
flyttas några bildpunkter. Om du håller på med precisionsarbete ska du dölja de
osynliga elementen.
Du kan ange vilka elementmarkeringar som ska visas när du väljer Visa > Visuella
hjälpmedel > Osynliga element i inställningen för osynliga element. Du kan
exempelvis ange att namngivna ankare ska vara synliga, men däremot inte
radbrytningar.
Du kan skapa vissa osynliga element (exempelvis kommentarer, namngivna ankare
och skript) med hjälp av knapparna under kategorin Osynliga i objektpanelen (se
”Använda objektpanelen” på sidan 76). Du kan sedan ändra dessa element med
egenskapskontrollen:
Skapa ett dokument
149
Osynliga element - inställningar
Använd inställningarna för osynliga element när du vill ange vilka element som
ska visas när du väljer Visa > Visuella hjälpmedel > Osynliga element.
Så här ändrar du inställningar för osynliga element:
1
Välj Redigera > Inställningar och klicka sedan på Osynliga element.
2
Markera de element som ska visas. En bockmarkering bredvid namnet på
elementet i dialogrutan betyder att elementet är synligt när Visa > Visuella
hjälpmedel > Osynliga element är markerat.
Mer information om de osynliga elementen finns i Dreamweavers hjälp.
Använda synliga hjälpmedel i designarbetet
Det finns många olika synliga hjälpmedel som du kan använda när du utformar
dokument och för att se (ungefär) hur de ser ut i en webbläsare. Du kan göra
följande:
• Ändra storlek på dokumentfönstret i bestämda steg för att se hur elementen
passar på sidan. Se ”Ändra storlek på dokumentfönstret” på sidan 70.
• Använd linjaler som visuell hjälp när du placerar och ändrar storlek på skikt
och tabeller.
• Använd en hjälpbild som sidbakgrund för att enkelt kunna återskapa en design
som har utformats i ett illustrations- eller bildbehandlingsprogram, exempelvis
Macromedia Fireworks.
• Du kan använda stödrastret när du vill placera och ändra storlek på skikt exakt.
Med stödlinjerna på sidan är det lätt att justera skikt. När funktionen Fäst mot
är aktiverad fästs skikten automatiskt mot närmaste stödlinje när de skapas eller
flyttas. (Andra objekt, såsom bilder och stycken, fästs inte vid stödrastret.)
Denna funktion är aktiv även om inte stödrastret är synligt. Se ”Fästa skikt mot
stödrastret” på sidan 412.
150
Kapitel 5
Visa linjaler
Linjaler kan visas på den vänstra och den översta kanten av sidan och är i
bildpunkter, tum eller centimeter.
Gör något av följande när du vill ändra linjalinställningarna:
• Du visar och döljer linjalerna genom att välja Visa > Linjaler > Visa.
• Du ändrar origo genom att dra linjalens origoikon till sidan. (Ikonen visas
högst upp till vänster i designvyn i dokumentfönstret när du visar linjaler.) Du
återställer origo till sin ursprungliga plats genom att välja Visa > Linjaler >
Återställ origo.
• Du ändrar måttenheten genom att välja Visa > Linjaler och markera
Bildpunkter, Tum eller Centimeter.
Använda en hjälpbild
Använd en hjälpbild som guide när du återskapar en siddesign som skapades i ett
grafikprogram. En hjälpbild är en JPEG-, GIF- eller PNG-bild som placeras i
bakgrunden av dokumentfönstret. Du kan dölja bilden, ange graden av
genomskinlighet och ändra hjälpbildens placering.
Hjälpbilden syns bara i Dreamweaver. Den är aldrig synlig när du visar sidan i en
webbläsare. När hjälpbilden är synlig är sidans bakgrundsbild och bakgrundsfärg
inte synliga i dokumentfönstret, men bakgrundsbilden och bakgrundsfärgen är
däremot synliga när sidan visas i webbläsare.
Så här placerar du en hjälpbild i dokumentfönstret:
1
Gör något av följande:
• Välj Visa > Hjälpbild > Ladda.
• Välj Ändra > Sidegenskaper och klicka på knappen Bläddra bredvid textrutan
Hjälpbild.
2
I dialogrutan som visas markerar du en bildfil och klickar på Välj.
3
Dialogrutan Sidegenskaper visas. Ange genomskinlighet för bilden genom att
dra skjutreglaget Genomskinlighet och klicka på OK.
Välj Ändra > Sidegenskaper om du vill växla till en annan hjälpbild eller ändra
genomskinligheten för den aktuella hjälpbilden.
Så här visar och döljer du hjälpbilden:
Välj Visa > Hjälpbild > Visa.
Skapa ett dokument
151
Så här ändrar du placeringen av en hjälpbild:
Välj Visa > Hjälpbild > Justera position. Gör sedan något av följande:
• Ange koordinatvärden i textrutorna X och Y om du vill ange en exakt position
för hjälpbilden.
• Du flyttar bilden en bildpunkt i taget genom att använda piltangenterna
• Om du vill flytta bilden fem bildpunkter i taget trycker du ned Skift och
använder piltangenterna
Så här återställer du placeringen av en hjälpbild:
Välj Visa > Hjälpbild > Återställ hjälpbild. Hjälpbilden återställs till det övre,
vänstra hörnet i dokumentfönstret (0,0).
Så här justerar du hjälpbilden till ett markerat element:
1
Markera ett element i dokumentfönstret.
2
Välj Visa > Hjälpbild > Justera hjälpbild.
Det övre, vänstra hörnet i hjälpbilden är justerat mot det övre, vänstra hörnet
av det markerade elementet.
Visa och redigera HEAD-innehåll
HTML-filer utgörs av två huvudsakliga delar: HEAD- och BODY-delen. BODY-delen är
huvuddelen av dokumentet, den synliga del som innehåller text och bilder m.m.
HEAD-delen är osynlig, undantaget dokumentets titel som visas i namnlister i
webbläsare och i Dreamweaver. Ge en titel till alla dokument som du skapar.
HEAD-delen
innehåller annan viktig information, bland annat dokumenttyp,
språkkodning, funktioner och variabler för JavaScript och VBScript, nyckelord,
innehållsbeskrivning för sökmotorer och formatdefinitioner. Du behöver inte
ange alla dessa element för varje sida, du kan exempelvis endast ange nyckelord
och innehåll för hemsidan. Du kan visa elementen i koden HEAD med hjälp av
kommandona på Visa-menyn, i kodvyn i dokumentfönstret eller i kodkontrollen.
Så här visar du element i HEAD-delen av ett dokument:
Välj Visa > Innehållet under HEAD. För varje element i HEAD-delen visas en ikon
överst i designvyn i dokumentfönstret.
Obs! Om endast kodvyn visas i dokumentfönstret är Visa > Innehållet under HEAD
nedtonat.
152
Kapitel 5
Så här infogar du ett element i HEAD-delen av ett dokument:
1
Gör något av följande:
• Välj Head på menyn överst på objektpanelen och klicka på en av
objektknapparna.
• Välj en post på undermenyn Infoga > HEAD.
2
Ange alternativ för elementen i dialogrutan som visas eller i
egenskapskontrollen.
Så här redigerar du ett element i HEAD-delen av ett dokument:
1
Välj Visa > Innehållet under HEAD.
2
Markera en av ikonerna i HEAD-delen genom att klicka på den.
3
Ange eller ändra egenskaperna för elementet i egenskapskontrollen.
Mer information om egenskaperna för specifika HEAD-element finns under följande
ämnen i Dreamweavers hjälp:
•
•
•
•
•
•
•
•
Meta - egenskaper
Titel - egenskaper
Nyckelord - egenskaper
Beskrivning - egenskaper
Uppdatering - egenskaper
Redigera ett skript
Bas - egenskaper
Länk - egenskaper
Skapa ett dokument
153
Automatisera uppgifter
När du skapar dokument vill du kanske utföra samma uppgift flera gånger. Detta
avsnitt beskriver hur du använder historiepanelen när du vill automatisera
enformiga uppgifter.
Om du vill upprepa ett antal steg en eller två gånger kan du spela upp dem direkt
från historiepanelen. På historiepanelen spelas dina steg in samtidigt som du
arbetar med ett dokument. (Grundläggande information om historiepanelen finns
i ”Historiepanelen” på sidan 80.) Om du vill automatisera en uppgift som du
utför ofta kan du skapa ett nytt kommando som utför den uppgiften automatiskt.
Musrörelser, exempelvis att klicka och dra för att markera något i
dokumentfönstret, kan inte spelas upp igen eller sparas som en del av ett sparat
kommando. När du använder musen på detta sätt visas en svart linje i
historiepanelen (även om linjen inte visas förrän du utför nästa åtgärd). Om du
vill undvika rörelser som inte kan spelas in kan du använda piltangenterna i stället
för musen när du ska flytta insättningspunkten i dokumentfönstret. Om du vill
utöka en markering håller du ned Skift samtidigt som du trycker på en piltangent.
Obs! Om en svart musrörelseindikatorlinje visas när du utför en uppgift som du vill upprepa
senare, kan du ångra förbi det steget och försöka med ett annat sätt, exempelvis med
piltangenterna.
Vissa andra steg kan heller inte upprepas, exempelvis när du drar ett sidelement
till en ny plats på sidan. När du utför ett sådant steg visas en menykommandoikon
med ett litet rött kryss (X) i historiepanelen.
Stegen spelas upp på exakt samma sätt som de utfördes på från början. Du kan
inte redigera stegen när du spelar upp dem. Om du exempelvis tidigare ändrade
färgen på en tabellcell till röd, kommer andra tabellceller också att bli röda när du
använder det steget igen. Du kan inte ange någon annan färg när du använder det
steget på en ny cell.
Upprepa steg
Välj Redigera > Upprepa om du vill upprepa det senaste steget som du utförde.
Du kan också använda tangenterna Ctrl+Y (Windows) eller Kommando+Y
(Macintosh). Namnet på detta kommando ändras på Redigera-menyn för att visa
det sista steget du utförde. Om du exempelvis skrivit in lite text är
kommandonamnet Upprepa Skriv. (Du kan inte använda kommandot direkt efter
att ha använt Ångra eller Gör om.)
Om du vill upprepa något annat steg än det sista eller om du vill upprepa flera steg
på en gång, använder du historiepanelen.
När du spelar upp steg så spelas de stegen upp som är markerade, vilket inte
behöver vara steget som är markerat med skjutreglaget.
154
Kapitel 5
Så här upprepar du ett steg:
Markera steget och klicka på Spela upp i historiepanelen. Steget spelas upp och en
kopia av det visas i historiepanelen.
Så här upprepar du flera intilliggande steg:
1
Markera stegen i historiepanelen genom att göra något av följande:
• Dra från ett steg till ett annat. (Dra inte i skjutreglaget utan dra från
textetiketten i ett steg till textetiketten i ett annat steg.)
• Markera det första steget och Skift-klicka sedan på det sista steget. Du kan
också markera det sista steget och sedan Skift-klicka på det första steget.
Obs! Även om du kan markera ett antal steg som innehåller en svart musindikatorlinje så
ignoreras musrörelsen över när du spelar upp stegen.
2
Klicka på Spela upp.
Stegen spelas upp i ordning och ett nytt steg med namnet Spela upp steg visas i
historiepanelen.
Så här upprepar du icke angränsande steg:
1
Markera ett steg och Ctrl-klicka (Windows) eller Kommando-klicka
(Macintosh) på andra steg.
Du kan också Ctrl-klicka eller Kommando-klicka om du vill avmarkera ett
markerat steg.
2
Klicka på Spela upp.
De markerade stegen spelas upp i ordning och ett nytt steg med namnet Spela
upp steg visas i historiepanelen.
Använda steg på ett annat objekt
Du kan använda ett antal steg från historiepanelen på vilket objekt som helst i
dokumentfönstret.
Så här använder du historiesteg på ett nytt objekt:
1
Markera objektet.
2
Markera de steg som du vill använda i historiepanelen och klicka sedan på
Spela upp.
Skapa ett dokument
155
Använda steg på flera objekt
Om du markerar flera objekt i ett dokument och sedan använder stegen på
objekten från historiepanelen behandlas objekten som en markering och stegen
försöker utföras på den kombinerade markeringen. Du kan exempelvis inte
markera fem bilder och använda samma storleksändring på var och en av dem
samtidigt. En ändring av storleken är en åtgärd som måste användas på varje
enskild bild och inte på en grupp kombinerade bilder.
Om du vill använda flera steg på varje objekt i en uppsättning objekt ska du se till
att det sista steget i serien markerar nästa objekt i uppsättningen. I följande
procedur demonstreras denna princip i ett visst scenario: ställa in det lodräta och
vågräta avståndet för en uppsättning med bilder.
Så här ställer du in det lodräta och vågräta avståndet för en uppsättning med
bilder:
1
Börja med ett dokument där varje rad består av en liten bild (som en liten
punktbild eller ikon) följt av text. Målet är att flytta bilderna från texten och
från andra bilder ovanför och nedanför dem.
2
Markera den första bilden.
3
I egenskapskontrollen klickar du på maximeringsknappen (pilen i det nedre,
högra hörnet) för att kunna se alla bildegenskaperna.
4
Ange värden i textrutorna L-mellanr. och V-mellanr. för att ange bildens
mellanrum.
5
Klicka på dokumentfönstrets namnlist (i stället för att klicka i
dokumentfönstret) för att aktivera dokumentfönstret utan att flytta
insättningspunkten.
6
Tryck på vänster piltangent för att flytta insättningspunkten till vänster om
bilden. Tryck sedan på nedpil för att flytta insättningspunkten nedåt en rad.
Den ska nu vara till vänster om den andra bilden i uppsättningen. Tryck nu på
Skift+högerpil så att den andra bilden markeras.
Obs! Markera inte bilden genom att klicka på den, för då kan du inte spela upp alla steg
igen.
156
Kapitel 5
7
Markera stegen i historiepanelen som motsvarar ändringen av bildens
mellanrum och markeringen av nästa bild. Klicka på Spela upp när du vill spela
upp stegen.
Det aktuella bildmellanrummet ändras och nästa bild markeras.
8
Fortsätt att trycka på Spela upp tills alla bilderna har fått rätt mellanrum.
Använd knappen Kopiera steg om du vill använda stegen på ett objekt som finns i
ett annat dokument.
Kopiera och klistra in steg mellan dokument
Varje öppet dokument har sina egna historiesteg. Du kan kopiera stegen från ett
dokument och klistra in dem i ett annat.
Obs! Kopiera steg (en knapp i historiepanelen) är inte samma som Kopiera (på Redigeramenyn). Du kan inte använda Redigera > Kopiera när du vill kopiera steg, trots att du
använder Redigera > Klistra in för att klistra in dem.
När du stänger ett dokument rensas dess historielista. Om du vill använda steg
från ett dokument efter att ha stängt det kopierar du stegen med Kopiera steg
(eller sparar dem som ett kommando, se ”Skapa nya kommandon från
historiesteg” på sidan 158) innan du stänger dokumentet.
Var försiktig när du kopierar steg som innehåller Kopiera eller Klistra in:
• Använd inte Kopiera steg om ett av stegen är Kopiera. Du kanske inte kan
klistra in ett sådant steg på det sätt som du tänkt dig.
• Om stegen innehåller kommandot Klistra in kan du inte klistra in stegen om
inte de innehåller kommandot Kopiera före Klistra in.
Om du klistrar in steg i en textredigerare eller i kodvyn eller kodkontrollen
kommer de att visas som JavaScript-kod. Detta kan vara användbart om du vill
lära dig att skriva egna skript. Mer information om hur du använder JavaScript i
Dreamweaver finns i ”Utöka Dreamweaver: Grunderna” på sidan 530.
Skapa ett dokument
157
Så här återanvänder du steg från ett dokument i ett annat dokument:
1
Börja från det dokument som innehåller de steg som du vill återanvända.
2
Markera stegen i historiepanelen.
3
Klicka på Kopiera steg i historiepanelen.
4
Öppna det andra dokumentet.
5
Placera insättningspunkten där du vill ha den eller markera ett objekt som
stegen ska användas på.
6
Välj Redigera > Klistra in så klistras stegen in.
Stegen spelas upp samtidigt som de klistras in i dokumentets historiepanel.
Stegen visas som ett steg, Klistra in steg, i historiepanelen.
Skapa nya kommandon från historiesteg
Du kan spara ett antal historiesteg som ett kommando, som sedan finns på
Kommando-menyn.
Skapa och spara ett nytt kommando om du kommer att använda en uppsättning
steg igen längre fram, särskilt om du vill använda stegen igen nästa gång du startar
Dreamweaver. Sparade kommandon är permanenta (om du inte tar bort dem)
medan inspelade kommandon tas bort när du avslutar Dreamweaver och
kopierade sekvenser av olika steg tas bort närt du kopierar någonting annat.
Du kan ändra namn på kommandon som du har placerat på Kommando-menyn
eller ta bort dem från Kommandon-menyn med Kommandon > Redigera
kommandolistan. Det är mer komplicerat att redigera och ta bort kommandon
som redan finns på Kommando-menyn (d.v.s. kommandon som inte du lagt dit).
Se ”Anpassa Dreamweaver-menyer” på sidan 513.
Så här skapar du ett kommando:
1
Markera ett eller flera steg i historiepanelen.
2
Klicka på Spara som kommando eller välj Spara som kommando på
snabbmenyn i historiepanelen.
3
Ange ett namn för kommandot och klicka på OK.
Kommandot visas på Kommando-menyn.
Obs! Kommandot sparas som en JavaScript-fil (och ibland som en HTML-fil) i mappen
Dreamweaver/Configuration/Commands.
158
Kapitel 5
Så här använder du ett sparat kommando:
1
Markera ett objekt som du vill använda kommandot på eller placera
insättningspunkten där du vill ha den.
2
Välj kommandot på Kommando-menyn.
Så här redigerar du kommandonamnen på Kommando-menyn.
1
Välj Kommando > Redigera kommandolista.
2
Markera ett kommando och skriv ett nytt namn.
3
Klicka på Stäng.
Så här tar du bort ett namn på Kommando-menyn:
1
Välj Kommando > Redigera kommandolista.
2
Markera ett kommando.
3
Klicka på Ta bort och sedan på Stäng.
Spela in kommandon
I Dreamweaver kan du spela in ett kommando som bara ska användas en kortare
tid. Den största skillnaden mellan detta sätt och att spela upp steg från
historiepanelen (se ”Upprepa steg” på sidan 154) är:
• Stegen spelas in när du utför dem, du behöver därför inte markera dem i
historiepanelen innan du spelar upp dem.
• Under inspelningen kan du inte utföra några musrörelser som inte kan spelas in
(exempelvis när du klickar för att markera något i ett fönster eller drar ett
sidelement till en ny plats).
• Om du växlar till ett annat dokument spelas inte de ändringar in som du utför
i det andra dokumentet. Du kan se på pekaren om du håller på att spela in eller
inte.
Dreamweaver sparar bara ett inspelat kommando åt gången. När du börjar spela
in ett nytt kommando försvinner det gamla. Om du vill spara ett nytt kommando
utan att förlora det inspelade kommandot sparar du kommandot från
historiepanelen.
När du har spelat in ett kommando kan du spara det (om du vill) med hjälp av
historiepanelen.
Skapa ett dokument
159
Så här spelar du in en serie ofta använda steg:
1
Välj Kommando > Starta inspelning eller tryck på Ctrl+Skift+X (Windows)
eller Kommando+Skift+X (Macintosh).
Pekaren ändras så att du vet att du spelar in ett kommando.
2
När du är klar med inspelningen väljer du Kommando > Stoppa inspelning
eller trycker på Ctrl+Skift+X (Windows) eller Kommando+Skift+X
(Macintosh).
Så här spelar du upp ett inspelat kommando:
Välj Kommando > Spela upp inspelat kommando eller tryck på Ctrl+P
(Windows) eller Kommando+P (Macintosh).
Så här sparar du ett inspelat kommando:
1
Välj Kommando > Spela upp inspelat kommando så att kommandot spelas
upp.
Ett steg med namnet Kör kommando visas i historiepanelens historielista.
2
Markera steget Kör kommando och klicka på Spara som kommando.
3
Ange ett namn för kommandot och klicka på OK.
Kommandot visas på Kommando-menyn.
160
Kapitel 5
6
KAPITEL 6
Utforma sidlayouten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sidlayouten är en viktig del av webbdesignen. Termen sidlayout syftar på hur sidan
kommer att se ut i webbläsaren, exempelvis var menyer och bilder ska placeras.
Med Macromedia Dreamweaver kan du skapa och styra webbsidans layout på
flera olika sätt.
Ett vanligt sätt att skapa en sidlayout är att använda HTML-tabeller. Det kan vara
svårt att använda tabeller eftersom de ursprungligen inte var gjorda för layout av
webbsidor utan för att visa tabelldata.
Layoutvyn gör det enklare att använda tabeller vid sidlayout. I layoutvyn kan du
utforma sidorna med hjälp av tabeller som den underliggande strukturen men
undvika de normala fallgroparna vad det gäller tabeller. Du kan exempelvis enkelt
rita celler (tabellceller) på sidan och sedan anpassa och flytta cellerna dit du vill ha
dem. Layouten kan ha en fast bredd eller också kan den växa så att den fyller upp
webbläsarfönstret (se ”Ange layoutbredd” på sidan 172).
Du kan fortfarande lägga upp sidorna med hjälp av tabeller på vanligt sätt (se
”Använda tabeller för innehåll” på sidan 177) eller lägga upp sidan med skikt och
sedan konvertera dem till tabeller (se ”Använda tabeller och skikt för layout” på
sidan 418). Det är dock enklast att använda layoutvyn i Dreamweaver när du
utformar sidans layout.
Om du vill använda layoutvyn måste du växla från Dreamweavers standardvy.
161
Så här växlar du till layoutvyn:
Välj Visa > Tabell > Layout eller klicka på Layout i objektpanelen.
Ikonen Rita layoutcell
Ikonen Rita layouttabell
Ikonen Layout
Alternativet Visa layouttabellens flikar är automatiskt aktiverad i layoutvyn. Välj
Visa > Tabell > Visa layouttabellens flikar om du vill inaktivera tabellflikarna när
du är i layoutvyn.
Obs! Om du skapar en tabell i standardvyn växlar du till layoutvyn. Tabellen har tomma
layoutceller som du kanske måste ta bort innan du kan skapa nya celler.
Layoutceller och tabeller
När du växlar till layoutvyn kan du lägga till layoutceller på sidan. Med cellernas
hjälp är det enkelt att göra en grov layout av sidan. Du kan exempelvis rita en cell
högst upp på sidan som innehåller en meny, en cell utefter högersidan som
innehåller undermenyer och en cell bredvid den som innehåller sidans innehåll.
Det kan vara bra att tänka på layouten som ett rutnät som består av rader och
kolumner.
162
Kapitel 6
När du skapar en layoutcell på sidan skapas automatiskt en layouttabell som en
behållare för cellen. En layoutcell kan inte existera utanför en layouttabell. Du kan
skapa sidlayouten med flera layoutceller i en layouttabell eller också kan du
använda flera layouttabeller om du vill ha en mer avancerad layout.
Om du använder flera layouttabeller isoleras delarna i layouten så att de inte
påverkas av någon annan del. Detta är speciellt användbart när innehållet i en
layoutcell ändras och gör så att cellen växer. När cellen växer påverkas andra,
närliggande celler eftersom celler inte kan överlappa varandra. Om du har skapat
en layout med flera layouttabeller kommer raderna och kolumnerna i en tabell
inte att påverka någon annan tabell.
Du kan också kapsla layouttabeller (infoga en layouttabell i en befintlig
layouttabell). Cellerna i en kapslad tabell begränsas inte av raderna och
kolumnerna i den yttre tabellen. Se ”Rita en kapslad layouttabell” på sidan 166.
Rita layoutceller och tabeller
Du kan rita layoutceller och tabeller på sidan när du är i layoutvyn. Om du börjar
med att skapa en layoutcell kommer en layouttabell att infogas automatiskt.
Layouttabellen fungerar som behållare för layoutcellen. En layoutcell är alltid i en
layouttabell.
Obs! Layouttabellen som skapas automatiskt är i samma bredd som dokumentfönstret. Du
kan ändra storlek på den eller sträcka ut den automatiskt om det behövs.
Så här ritar du en layoutcell:
1
Kontrollera att du är i layoutvyn och klicka sedan på Rita layoutcell i kategorin
Layout i objektpanelen. Muspekaren ändras till ett plustecken (+).
2
Placera muspekaren där du vill att cellen ska börja på sidan och dra sedan för
att skapa layoutcellen. Om du vill skapa ett antal celler utan att klicka på
layoutcellsknappen varje gång håller du ned Ctrl (Windows) eller Kommando
(Macintosh).
Cellen visas med en blå kontur på sidan. Standardkonturfärgen är blå för
layoutceller. Information om hur du ändrar den finns i ”Layoutvyinställningar” på
sidan 175. Storleken på varje cell visas i kolumnhuvudområdet högst upp i cellen.
Mer information om bredd finns i ”Ange layoutbredd” på sidan 172.
Utforma sidlayouten
163
Sidlayouten följer ett rutnät med kolumner och rader. Celler kan sträcka sig över
flera rader eller flera kolumner men de kan aldrig överlappa varandra på sidan. Du
får hjälp att bibehålla denna struktur genom att nya celler som du skapar
automatiskt fästs mot befintliga celler om du ritar dem nära varandra (inom åtta
bildpunkter). Cellerna fästs också automatiskt mot kanten av sidan om du drar
dem nära kanten (inom åtta bildpunkter). Om du tillfälligt vill stänga av
fästfunktionen håller du ned Alt (Windows) eller Alternativ (Macintosh) när du
ritar cellen på sidan.
Detta betyder inte att alla celler måste vara av samma storlek eller bredd. Du kan
ha celler i samma kolumn som är i olika bredd eller celler i rader som har olika
höjd.
Så här ritar du en layouttabell:
1
Kontrollera att du är i layoutvyn och klicka sedan på Rita layouttabell i
kategorin Layout i objektpanelen. Muspekaren ändras till ett plustecken (+).
2
Placera muspekaren på sidan, håll ned musknappen och dra musen så skapas
layouttabellen. Om det är den första tabellen som du ritat på sidan placeras den
automatiskt högst upp på sidan.
Om du vill skapa ett antal tabeller utan att klicka på layouttabellsknappen varje
gång, håller du ned Ctrl (Windows) eller Kommando (Macintosh).
164
Kapitel 6
Tabellen visas med en grön kontur på sidan. Standardkonturfärgen är grön för
layouttabeller. Information om hur du ändrar färgen finns i
”Layoutvyinställningar” på sidan 175. En layouttabellflik visas högst upp i varje
tabell som du ritar, vilket hjälper dig att urskilja och markera tabellen. Storleken
på varje tabell visas i kolumnhuvudområdet högst upp i tabellen.
Mer information om bredd finns i ”Ange layoutbredd” på sidan 172.
Tabeller kan inte överlappa varandra. Sidlayouten följer ett rutnät med kolumner
och rader. Tabeller kan sträcka sig över flera rader eller flera kolumner men de kan
aldrig överlappa på sidan. Du får hjälp att bibehålla denna struktur genom att nya
tabeller som du skapar automatiskt fästs mot befintliga tabeller eller celler om du
ritar dem nära varandra (inom åtta bildpunkter). Tabellerna fästs också
automatiskt mot kanten av sidan om du drar dem nära kanten (inom åtta
bildpunkter). Om du tillfälligt vill stänga av fästfunktionen håller du ned Alt
(Windows) eller Alternativ (Macintosh) när du ritar tabellen på sidan.
Du kan skapa layouttabeller i tomma områden på sidan, i en befintlig layouttabell
(kapsling) eller runt en befintliga layoutceller och tabeller. När du skapar en
layouttabell i ett tomt dokument, fästs den automatiskt i det övre vänstra hörnet i
dokumentfönstret.
Obs! Om sidan redan har ett innehåll, kan du endast rita en layouttabell under innehållet.
Så här ritar du en layouttabell runt befintliga tabeller eller celler:
1
Kontrollera att du är i layoutvyn och klicka sedan på Rita layouttabell i
kategorin Layout i objektpanelen. Muspekaren ändras till ett plustecken (+).
2
Håll ned musknappen och dra runt befintliga layoutceller eller tabeller:
Layouttabellen kommer att omge de befintliga cellerna eller tabellerna.
Utforma sidlayouten
165
Rita en kapslad layouttabell
Du kan rita en layouttabell i en befintlig layouttabell (detta skapar en kapslad
tabell). Cellerna i en kapslad tabell begränsas inte av raderna och kolumnerna i
den yttre tabellen. Du kan infoga flera kapslade tabeller.
Så här ritar du en kapslad tabell:
1
Klicka på Rita layouttabell i kategorin Layout i objektpanelen. Muspekaren
ändras till ett plustecken (+).
2
Placera muspekaren inuti det gråa området i en befintlig layouttabell, håll ned
musknappen och dra musen så skapas den kapslade layouttabellen.
En kapslad layouttabell kan inte vara större än tabellen som omsluter den.
Använda stödrastret
Du kan aktivera stödrastret och använda det som en hjälplinje när du ritar
layouten. Du kan också få layouten att automatiskt fästa mot stödrastret och
ändra stödrastret eller ändra fästbeteendet i stödrasterinställningarna.
Så här visar eller döljer du stödrastret i dokumentfönstret:
Välj Visa > Stödraster > Visa stödraster eller välj Stödraster från Alternativ-menyn
i verktygsfältet.
166
Kapitel 6
Så här ändrar du inställning för stödraster:
1
Välj Visa > Stödraster > Redigera stödraster. Dialogrutan
Stödrasterinställningar visas.
2
Gör något av följande:
• Klicka på pilen bredvid färgrutorna och välj en färg på panelen eller skriv det
hexadecimala numret i cellen. Detta anger färgen på stödlinjerna.
• Välj Visa stödraster om du vill visa stödrastret i dokumentfönstret.
• Markera Fäst mot stödraster om du vill aktivera fästfunktionen.
• Skriv hur mycket mellanrum du vill ha och välj bildpunkter, tum eller
centimeter i listrutan. Detta anger hur långt från varandra stödlinjerna ska vara.
• Välj linjer eller prickar som stödlinjer.
3
Klicka på Använd om du vill visa ändringarna. Klicka på OK när du vill stänga
dialogrutan.
Lägga till innehåll i en cell
Du kan lägga till text, bilder och annat i layoutceller i layoutvyn på precis samma
sätt som i standardvyn. Klicka i cellen där du vill infoga innehållet, skriv sedan
text eller infoga andra filer.
Du kan endast infoga innehåll i en layoutcell, därför måste du skapa
layoutcellerna först (se ”Rita layoutceller och tabeller” på sidan 163). I de gråa
områdena på sidan kan du inte infoga något innehåll om du inte infogar en
layoutcell där.
En layoutcell utökas automatiskt samtidigt som du lägger till innehåll som är
större än cellen. När cellen utökas kan omgivande celler också påverkas och
kolumnen som cellen befinner sig i kommer också att utökas.
Så här lägger du till text i en cell:
Klicka i layoutcellen som du vill lägga till text i och gör något av följande:
• Skriv text i cellen. Cellen utökas automatiskt när du skriver.
• Klistra in text som har kopierats från ett annat dokument. Använd kommandot
Klistra in. Mer information finns i ”Infoga text och objekt” på sidan 228.
Utforma sidlayouten
167
Så här lägger du till en bild i en cell:
1
Klicka i layoutcellen där du vill att bilden ska läggas till.
2
Klicka på Infoga bild i objektpanelen, välj Infoga > Bild eller dra knappen
Infoga bild från objektpanelen till sidan.
3
I dialogrutan Välj bildkälla väljer du en bildfil.
Mer information finns i ”Ange bildegenskaper” på sidan 265.
Nollställa automatiska cellhöjder
När du har infogat innehållet i cellerna kan du nollställa cellhöjderna för att ta
bort inställningen. Cellerna skapas automatiskt med en viss höjd men när du har
lagt till innehåll i en cell behöver du inte den specifika höjden.
Gör något av följande när du vill nollställa höjder:
• Välj Nollställ cellhöjder från kolumnhuvudmenyn. Höjderna nollställs och
vissa rader kan krympa.
• Markera en layouttabell (klicka på tabellfliken eller på kanten) och klicka sedan
på Nollställ radhöjder i egenskapskontrollen.
Flytta och ändra storlek på layoutceller och
tabeller
Du kan flytta eller ändra storlek på alla celler och tabeller i layouten, vilket gör det
enkelt att justera sidlayouten. Mer information om hur du använder stödrastret
som en hjälplinje när du flyttar eller ändrar storlek på celler och tabeller finns i
”Använda stödrastret” på sidan 166.
Så här ändrar du storlek på en cell:
1
Klicka på cellkanten eller håll ned Ctrl (Windows) eller Kommando
(Macintosh) och klicka någonstans i cellen.
Markeringshandtag visas runt cellen.
168
Kapitel 6
2
Använd markeringshandtagen och dra cellen till rätt storlek.
Cellen fästs automatiskt mot befintliga celler (inom åtta bildpunkter från deras
kanter). En layoutcell kan inte överlappa andra celler och du kan inte ändra
storlek på den så att den blir större än dess layouttabell. En layoutcell är alltid
minst så stor som innehållet i cellen.
Så här flyttar du en cell:
1
Klicka på cellkanten.
2
Dra cellen dit du vill ha den eller använd piltangenterna. Med piltangenterna
flyttas den en bildpunkt åt gången. Om du samtidigt håller ned Skift flyttas
den 10 bildpunkter åt gången.
Så här ändrar du storlek på en tabell:
1
Klicka på tabellfliken.
Markeringshandtag visas runt tabellen.
2
Använd markeringshandtagen och dra tabellen till rätt storlek.
Tabellen fästs automatiskt mot befintliga celler och tabeller (inom åtta
bildpunkter från den befintliga cellen). Du kan inte ändra storlek på en
layouttabell så att den blir mindre än kanterna till cellerna den innehåller. Du kan
heller inte ändra storlek på den så att den överlappar andra, omgivande tabeller
eller celler.
Så här flyttar du en tabell:
1
Klicka på tabellfliken.
2
Dra tabellen dit du vill ha den eller använd piltangenterna. Med piltangenterna
flyttas den en bildpunkt åt gången. Om du samtidigt håller ned Skift flyttas
den 10 bildpunkter åt gången.
Utforma sidlayouten
169
Formatera layoutceller och tabeller
Du kan ändra utseendet på en layoutcell eller tabell i egenskapskontrollen.
Formatera en layoutcell
Du kan ange hur innehållet ska justeras och ange bredd, höjd och bakgrundsfärger
i egenskapskontrollen.
Så här formaterar du en cell i egenskapskontrollen:
1
Klicka på cellkanten eller håll ned Ctrl (Windows) eller Kommando
(Macintosh) och klicka någonstans i cellen.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas.
3
Välj bland följande alternativ:
• Om du vill ändra bredden väljer du Fast och skriver en bredd i bildpunkter i
rutan eller väljer Automatisk sträckning (se ”Ange layoutbredd” på sidan 172).
• Om du vill ändra höjden anger du höjden i bildpunkter i textrutan.
• Om du vill ange en bakgrundsfärg för en layoutcell, väljer du en färg från
färgväljaren eller skriver det hexadecimala numret för färgen som du vill
använda i textrutan.
• Du anger den vågräta justeringen i listrutan Vågrät. Du kan ange justeringen
för layoutcellens innehåll till antingen vänster, centrera, höger eller standard.
• Du anger den lodräta justeringen i listrutan Lodrät. Du kan ange justeringen
för layoutcellens innehåll till antingen överst, mitten, nederst, baslinje eller
standard.
• Markera Ingen radbrytning när du vill förhindra att ord bryts. Om alternativet
är markerat blir layoutcellen bredare så att allt innehållet visas utan någon
radbrytning.
170
Kapitel 6
Formatera layouttabeller
Du kan ange höjd, bredd, fyllning, mellanrum med mera i egenskapskontrollen.
Så här formaterar du en layouttabell:
1
Klicka på tabellfliken eller tabellkanten.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas.
3
Välj bland följande alternativ:
• Om du vill ändra bredden väljer du Fast och skriver en bredd i bildpunkter i
rutan eller väljer Automatrisk sträckning (se ”Ange layoutbredd” på sidan 172).
• Om du vill ändra höjden anger du höjden i bildpunkter i textrutan.
• Om du vill ange cellfyllning anger du antalet bildpunkter i textrutan Cellfyllning.
Cellutfyllnad är mängden mellanrum mellan innehållet i en layoutcell och
cellkanten. Om du anger ett värde större än 0 (noll) kommer alla markerade
layoutceller i layouttabellen ha detta mellanrum. Om du ser två nummer i
kolumnhuvudområdet använder du alternativet Konsekventa cellbredder nedan.
• Om du vill ange cellmellanrum anger du antalet bildpunkter i textrutan
Cellmellanrum. Cellmellanrum är mängden utrymme mellan varje layoutcell. Om
du anger ett värde större än 0 (noll) kommer alla markerade layoutceller i
layouttabellen att ha detta mellanrum. Om du ser två nummer i
kolumnhuvudområdet använder du alternativet Konsekventa cellbredder nedan.
• Om du vill nollställa höjdinställningarna för alla cellerna i den markerade
layouttabellen, klickar du på Radera höjd. Om det inte finns några element i
tabellen kommer tabellen att komprimeras fullständigt.
• Om du har celler med fast bredd i layouten, klickar du på Konsekventa
cellbredder. När du klickar på den knappen nollställs HTML-bredden i varje
cell så att den matchar innehållet i cellen. Om du exempelvis anger bredden till
200 bildpunkter men innehållet i cellen sträcker ut cellbredden till 250, visas
det två nummer högst upp i tabellen: 250 inom citattecken och 200 inom
parentes. Om du klickar på Konsistenta cellbredder så tas inställningen 200
bildpunkter bort och inställningen 250 blir kvar.
• Klicka på Ta bort alla distanshållare om du vill ta bort alla distanshållarbilder i
layouttabellen (genomskinliga bilder som används för att styra mellanrummen i
layouten). (Mer information finns i ”Använda distanshållarbilder” på sidan 174.)
• Om layouttabellen som du markerade är kapslad i en annan layouttabell,
klickar du på Ta bort kapsling för att ta bort den kapslade layouttabellen utan
att förlora dess innehåll. Layouttabellen tas bort och layoutcellerna och deras
innehåll blir en del av den överordnade tabellen.
Utforma sidlayouten
171
Ange layoutbredd
Det finns två typer av bredder som du kan använda i layoutvyn: Fast bredd och
automatisk sträckning. Bredden visas i kolumnhuvudområdet högst upp i varje
kolumn. Fast bredd är en specifik numerisk bredd, exempelvis 300 bildpunkter,
och visas som ett tal. Med automatisk sträckning ändras bredden automatiskt,
beroende av fönsterstorleken och visas som en vågig linje. Med automatisk
sträckning fyller alltid layouten upp hela webbläsarfönstret, oavsett vilken
fönsterstorlek granskningsfönstret har. Även om fast bredd är standardinställning
anger du normalt att vissa layoutceller eller tabeller ska ha fast bredd och en ska ha
automatisk sträckning. Inställningarna som du anger påverkar alla celler och
tabeller i den kolumnen. Endast en kolumn i en layout kan ha automatisk
sträckning.
Anta att layouten har en menyrad på sidans vänstersida, titeln högst upp och
huvudinnehållet till höger. Du kan ange att vänsterkolumnen ska ha fast bredd
och att området med huvudinnehållet ska ha automatisk sträckning.
172
Kapitel 6
Gör något av följande när du vill ange bredd med automatisk sträckning:
• Gå högst upp i kolumnen som du vill använda automatisk sträckning på och
välj Sträck ut kolumn automatiskt i kolumnhuvudmenyn. Endast en kolumn
kan ha automatisk sträckning.
• Markera kolumnen och klicka på Automatisk sträckning i egenskapskontrollen.
När du anger att en kolumn ska använda automatisk sträckning infogas
distanshållarbilder i kolumnerna med fast bredd för att styra layouten. En
distanshållarbild är en genomskinlig bild som inte syns i webbläsarfönstret utan
används för att kontrollera mellanrummet. Mer information finns i ”Använda
distanshållarbilder” på sidan 174.
Gör något av följande när du vill ange fast bredd:
• Gå högst upp i kolumnen som du vill använda fast bredd på och välj Fast
kolumnbredd i kolumnhuvudmenyn.
Kommandot Fast kolumnbredd ställer automatiskt in kolumnbredden så att
den matchar innehållet i kolumnen.
• I egenskapskontrollen klickar du på Fast och skriver ett numeriskt värde.
Om du anger ett numeriskt värde som är mindre än innehållets bredd, kommer
bredden du angav att ändras till rätt bildpunktsbredd.
Ibland visas två nummer i kolumnhuvudmenyn: den verkliga bredden och
bredden som är angiven i HTML-koden. Detta kan ha flera orsaker, exempelvis
om du har infogat ett innehåll som är bredare än den bredd som du ritade eller
angav. Det är bra om du gör bredderna konsekventa så att endast ett nummer
visas.
Så här gör du bredderna konsekventa (så att endast den verkliga bredden är
angiven):
Välj Konsekventa cellbredder från kolumnhuvudmenyn.
Utforma sidlayouten
173
Använda distanshållarbilder
En distanshållarbild är en genomskinlig bild som inte syns i webbläsarfönstret
utan används för att kontrollera mellanrummet i tabeller med automatisk
sträckning. Distanshållarbilden behåller bredden som du anger för varje tabell och
cell på sidan. Om du väljer att inte använda distanshållarbilder i tabeller med
automatisk sträckning, kommer kolumner att ändra storlek och till och med
visuellt försvinna om de inte innehåller något innehåll.
Du kan infoga och ta bort distanshållarbilder i varje kolumn eller låta dem infogas
automatiskt när du skapar en kolumn med automatisk sträckning. Kolumner som
innehåller distanshållarbilder har en dubbellist högst upp.
När du infogar distanshållarbilder i en kolumn eller anger att en kolumn ska ha
automatisk sträckning, visas en dialogruta som frågar hur du vill ange
distanshållarbilderna. Om du redan har angivit en distanshållarbild för platsen i
Dreamweavers inställningar visas inte dialogrutan. Se ”Layoutvyinställningar” på
sidan 175.
Så här anger du en distanshållarbild:
1
Ange att en kolumn ska ha automatisk sträckning eller välj Lägg till
distanshållarbild på kolumnhuvudmenyn.
2
I dialogrutan som visas väljer du bland följande alternativ:
• Skapa en bildfil för distanshållare: Om du väljer detta alternativ och klickar på
OK visas en annan dialogruta där du kan bläddra till katalogen på platsen där
du vill spara distanshållarbilden, exempelvis en bildmapp. Detta är det
rekommenderade alternativet.
• Använd en befintlig bildfil för distanshållare: Om du redan har skapat en bildfil
för distanshållare för platsen väljer du detta alternativ och bläddrar sedan till
distanshållarbilden i nästa dialogruta som visas. Distanshållarbilden bör ska
vara en genomskinlig GIF-fil som är 1 bildpunkt hög och 1 bildpunkt bred.
• Använd inte distanshållarbilder för automatiskt sträckta tabeller: Om du väljer
detta alternativ visas en dialogruta som varnar dig att de andra kolumnerna i
layouten kan komprimeras till en smal bredd. Om du väljer att inte använda
distanshållarbilder blir bredden på kolumnerna lika liten som deras innehåll.
Kolumner utan innehåll komprimeras till ingenting. Med distanshållarbilderna
kan du behålla layoutens struktur på samma sätt som du ritade upp den.
174
Kapitel 6
Du kan infoga och ta bort distanshållarbilder i vissa kolumner eller ta bort alla
distanshållare på sidan.
Så här infogar du en distanshållarbild i en kolumn:
Välj Lägg till distanshållarbild på kolumnhuvudmenyn. Distanshållarbilden
infogas i kolumnen. Du ser inte bilden men kolumnen kan förskjutas något och
en dubbellist visas högst upp.
Så här tar du bort en distanshållarbild från en kolumn:
Välj Ta bort distanshållarbild på kolumnhuvudmenyn. Distanshållarbilden tas
bort och kolumnen kanske förskjuts.
Så här tar du bort alla distanshållarbilder från sidan:
Välj Ta bort alla distanshållarbilder på kolumnhuvudmenyn eller klicka på Ta bort
alla distanshållare i egenskapskontrollen för layouttabeller. Hela layouten kan
förskjutas lite eller mycket beroende på innehållet. Om det inte finns något
innehåll i vissa kolumner kanske de försvinner fullständigt.
Layoutvyinställningar
Använd kategorin Layout i dialogrutan Inställningar om du vill ange eller ändra
bildfilerna för och placeringen av distanshållaren. Du kan dessutom ändra
färgerna som används i layoutvyn när du ritar upp tabeller och celler m.m.
Så här öppnar du layoutvyinställningarna:
Välj Redigera > Inställningar och Layout i listan Kategori.
anger om distanshållare ska infogas automatiskt
när du anger att en kolumn ska ha automatiskt sträckning.
Infoga distanshållare automatiskt
Distanshållarbild anger distanshållarbilden för platserna. Välj en plats i listrutan
och skapa sedan en ny distanshållarbild eller bläddra till en befintlig bildfil på den
platsen.
Cellkontur
anger färgen som används när cellkonturen ritas.
anger färgen som markerar cellen när du flyttar markören över
cellen eller markerar den.
Tabellkontur anger färgen som används när tabellkonturen ritas.
Cellmarkering
Tabellbakgrund
anger bakgrundsfärgen i dokumentfönstret.
Utforma sidlayouten
175
176
Kapitel 6
7
KAPITEL 7
Använda tabeller för innehåll
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tabeller är ett mycket användbart verktyg när du ska arrangera data och bilder på
en HTML-sida. Tabeller ger utformare av webbsidor möjlighet att lägga till
lodräta och vågräta strukturer på en sida.
Tabeller består av tre grundläggande komponenter:
• Rader (vågrätt mellanrum)
• Kolumner (lodrätt mellanrum)
• Celler (den behållare som skapas när en rad och en kolumn korsar varandra)
Använd tabeller när du vill arrangera tabelldata, utforma kolumner på en sida eller
placera ut text och grafik på en webbsida. När du har skapat en tabell kan du
enkelt ändra både utseende och struktur på tabellen. Du kan lägga till innehåll,
lägga till, ta bort, dela upp och slå samman rader och kolumner, ändra tabell-, radoch cellegenskaper för att lägga till färg och justering samt kopiera och klistra in
celler.
177
Obs! Du bör arbeta i layoutläget vid sidlayout (se ”Utforma sidlayouten” på sidan 161).
Layoutläget är ett enkelt sätt att utforma sidlayouten med tabeller som underliggande
struktur. Använd tabeller i Dreamweaver när du vill lägga till tabelldata på sidan.
Infoga en tabell
Använd objektpanelen eller Infoga-menyn när du vill skapa en ny tabell.
Så här infogar du en tabell:
1
Gör något av följande:
• Placera insättningspunkten på den plats i dokumentfönstret där du vill att
tabellen ska visas. Klicka sedan på knappen Infoga tabell i kategorin Vanlig på
objektpanelen, eller välj Infoga > Tabell.
• Dra knappen Infoga tabell från objektpanelen till önskad insättningspunkt på
sidan.
Dialogrutan Infoga tabell visas.
2
Acceptera de aktuella värdena eller skriv nya i dialogrutan.
Obs! I dialogrutan Infoga tabell sparas värdena för de senaste inställningarna du har
gjort för en tabell.
• I fältet Rader anger du antalet tabellrader.
• I fältet Kolumner anger du antalet tabellkolumner.
• I fältet Cellutfyllnad anger du antalet bildpunkter mellan cellinnehållet och
cellkanten. Standardvärdet är 1 bildpunkt. Ange 0 om du inte vill ha någon
utfyllnad.
• I fältet Cellmellanrum anger du antalet bildpunkter mellan tabellcellerna.
Standardvärdet är 2 bildpunkter. Ange 0 om du inte vill ha något mellanrum.
• I fältet Bredd anger du tabellens bredd i bildpunkter eller i procent av
webbläsarfönstret.
• I fältet Kant anger du tabellkantens bredd i bildpunkter. Ange 0 om du inte vill
ha någon kant.
178
Kapitel 7
3
Klicka på OK när du vill skapa tabellen.
Om du vill infoga en tabell utan att först behöva ange dessa alternativ, avaktiverar
du alternativet Visa dialogrutan vid infogning av objekt i de allmänna
inställningarna. Se ”Ange inställningar” på sidan 84.
Lägga till innehåll i en tabellcell
Du kan lägga till text och bilder i tabellceller.
Så här lägger du till text i en tabell:
1
Klicka i en cell som du vill ska innehålla text, och gör något av följande:
• Skriv text i tabellen. Tabellceller utökas automatiskt när du skriver.
• Klistra in text som kopierats från ett annat dokument. Se ”Infoga text och
objekt” på sidan 228.
2
Tryck på Tabb om du vill flytta till nästa cell, eller tryck på Skift+Tabb om du
vill flytta till föregående cell. När du trycker på Tabb i den sista cellen i en tabell
läggs en ny rad till automatiskt.
Du kan också använda piltangenterna för att flytta mellan celler.
Så här lägger du till en bild i en tabell:
1
Klicka i önskad cell.
2
Klicka på knappen Infoga bild i kategorin Vanlig på objektpanelen, eller välj
Infoga > Bild.
3
Välj en bildfil i dialogrutan Välj bildkälla.
Information om hur du anger bildegenskaper finns i ”Ange bildegenskaper” på
sidan 265.
Använda tabeller för innehåll
179
Importera tabelldata
Data som har skapats i ett annat program (exempelvis Microsoft Excel) och
sparats i ett avgränsat format (separerade med tabbar, kommatecken, kolon,
semikolon eller andra avgränsare) kan importeras till Dreamweaver och formateras
om som en tabell.
Så här importerar du tabelldata:
1
Gör något av följande:
• Välj Arkiv > Importera > Importera tabelldata.
• Välj Infoga > Tabelldata.
Dialogrutan Importera tabelldata eller Infoga tabelldata visas, beroende på vad
du väljer. Förutom namnen är de båda dialogrutorna identiska.
2
Ange i fältet Datafil namnet på filen som ska importeras.
3
Markera i listrutan Avgränsare det avgränsarformat som motsvarar formatet för
dokumentet du importerar.
Om du markerar Annan visas ett fält till höger om listrutan. Ange samma
avgränsare som har använts för att avgränsa tabellinformationen.
Obs! Om du inte markerar (eller anger) samma avgränsare som användes när filen
sparades importeras inte filen på rätt sätt och informationen formateras inte som den
ska i en tabell. Det visas inget fel- eller varningsmeddelande som uppmärksammar dig
på att något är fel.
4
Välj något av följande alternativ för Tabellbredd:
• Markera Anpassa till data om du vill skapa en tabell som anpassas efter den
längsta textsträngen i varje kolumn.
• Markera Ange om du vill ange en tabellbredd i procent av webbläsarfönstret
eller i antal bildpunkter.
180
Kapitel 7
5
Ange alternativ för tabellformatering:
• I fältet Cellutfyllnad anger du antalet bildpunkter mellan cellinnehållet och
cellkanten.
• I fältet Cellmellanrum anger du antalet bildpunkter mellan tabellcellerna.
• I fältet Format på övre rad markerar du ett av fyra formateringsalternativ: Inget
format, Fet, Kursiv eller Fet kursiv.
• I fältet Kant anger du tabellkantens bredd i bildpunkter. Ange 0 om du inte vill
ha någon kant.
6
Klicka på OK.
Markera tabellelement
Med en enda åtgärd kan du markera en hel tabell, rad eller kolumn eller ett
område med angränsande celler inom tabellen. När tabellen eller de enskilda
cellerna är markerade kan du göra följande:
• Ändra utseendet på markerade celler eller texten i dem. Se ”Formatera tabeller
och celler” på sidan 183.
• Kopiera och klistra in närliggande celler. Se ”Kopiera och klistra in celler” på
sidan 193.
Du kan också markera flera icke närliggande celler i en tabell och ändra
egenskaperna för dessa. Du kan inte kopiera eller klistra in icke närliggande
cellmarkeringar.
Gör något av följande när du vill markera hela tabellen:
• Klicka i det övre, vänstra hörnet av tabellen eller någonstans på den högra eller
nedre kanten.
• Klicka i tabellen och välj Ändra > Tabell > Markera tabell.
• Klicka i tabellen och välj Redigera > Markera allt.
• Placera insättningspunkten var som helst i tabellen och markera koden <TABLE>
i kodväljaren längst ned till vänster i dokumentfönstret.
När tabellen är markerad visas markeringshandtag runt om.
Använda tabeller för innehåll
181
Gör något av följande när du vill markera rader eller kolumner:
• Placera insättningspunkten i den vänstra marginalen på en rad eller överst i en
kolumn. Klicka när markeringspilen visas.
• Klicka i en cell och dra åt sidan eller nedåt för att markera flera rader eller
kolumner.
Gör något av följande när du vill markera en eller flera celler:
• Klicka i en cell och dra nedåt eller åt sidan till en annan cell.
• Klicka i en cell och Skift-klicka sedan i en annan cell. Alla celler inom det
rektangulära området markeras.
Gör något av följande när du vill markera icke närliggande celler:
• Håll ned Ctrl (Windows) eller Kommando (Macintosh) samtidigt som du
klickar i tabellen om du vill lägga till celler, rader eller kolumner i markeringen.
• Markera flera celler i tabellen och håll sedan ned Ctrl (Windows) eller
Kommando (Macintosh) samtidigt som du klickar i celler, rader eller kolumner
om du vill avmarkera enskilda celler.
182
Kapitel 7
Formatera tabeller och celler
Du kan ändra utseendet på tabeller genom att ange egenskaper för tabellen och
tabellcellerna eller genom att använda en förinställd design på tabellen. Se ”Ange
tabellegenskaper” på sidan 184, ”Ange kolumn-, rad- och cellegenskaper” på
sidan 185 och ”Formatera en tabell med ett designschema” på sidan 187.
När du vill formatera text i tabeller kan du tillämpa formatering på markerad text
eller använda formatmallar. Se ”Infoga och formatera text” på sidan 227.
Tabellkoder
När du formaterar tabeller i dokumentfönstret kan du ange egenskaper som gäller
för hela tabellen eller endast för markerade rader, kolumner eller celler i tabellen.
När en egenskap, exempelvis bakgrundsfärg eller justering, är inställd på ett sätt
för hela tabellen och på ett annat sätt för enskilda tabellceller, är det bra att förstå
hur HTML-källkoden tolkas i Dreamweaver.
När det finns flera inställningar för en och samma egenskap i en tabell tolkas detta
så här: Cellformatering som är en del av koden TD gäller före formatering av
tabellrader (koden TR), som i sin tur gäller före tabellformatering (koden TABLE).
Om du anger blå som bakgrundsfärg för en enskild cell och sedan anger gul som
bakgrundsfärg för hela tabellen, blir följaktligen inte den blå cellen gul eftersom
koden TD gäller före koden TABLE.
I följande exempel anger koden TABLE en gul (#FFFF99) bakgrundsfärg för hela
tabellen. Den första TR-koden ändrar detta så att de aktuella cellerna blir gröna
(#33FF66), och den andra TD-koden gör i sin tur den översta cellen i mitten blå
(#333399). Koderna TR och TD i den nedersta raden har inte ändrats, så dessa celler
får tabellfärgen som är gul.
<table border="1" width="75%" bgcolor="#FFFF99">
<tr bgcolor="#33FF66">
<td>&nbsp;</td>
<td bgcolor="#333399">&nbsp;</td>
<td>&nbsp;</td>
<tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Använda tabeller för innehåll
183
Ange tabellegenskaper
Tabellegenskaperna visas i egenskapskontrollen när en tabell är markerad.
Du kan också använda kommandot Formatera tabell när du snabbt vill använda
en förinställd design på en markerad tabell. Se ”Formatera en tabell med ett
designschema” på sidan 187.
Så här anger du tabellegenskaper:
1
Markera tabellen.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas. Klicka på
maximeringsknappen längst ned till höger om du vill visa alla egenskaper.
Så här ger du tabellen ett namn:
• Skriv ett namn på tabellen i fältet Tabellnamn.
Så här väljer du alternativ för tabellayouten:
• I fälten Rader och Kol. anger du antalet rader och kolumner i tabellen.
• I fälten B och H anger tabellens bredd och höjd i bildpunkter eller i procent av
webbläsarfönstret. Du behöver vanligtvis inte ange höjden på en tabell.
• Använd fältet Justera när du vill ange hur en tabell ska justeras mot andra
element i samma stycke, exempelvis text eller bilder. Vänster justerar tabellen
mot vänster sida av andra element, Höger justerar tabellen mot höger sida av
andra element och Centrerat centrerar tabellen. Du kan vänsterjustera,
högerjustera eller centrera tabellen i förhållande till andra element. Du kan
också välja webbläsarens standardjustering.
• Använd knapparna Nollställ radhöjder och Nollställ kolumnbredder när du vill
ta bort alla värden för radhöjd och kolumnbredd från tabellen.
• Använd knappen Konvertera tabellbredder till bildpunkter när du vill
konvertera tabellbredden från ett procenttal av webbläsarfönstret till den
aktuella bredden i bildpunkter.
• Använd knappen Konvertera tabellbredder till procent när du vill konvertera
den aktuella tabellbredden från bildpunkter till ett procenttal av
webbläsarfönstret.
184
Kapitel 7
Välj bland följande alternativ när du vill ange cellutfyllnad och cellmellanrum:
• I fältet Cellfylln. anger du antalet bildpunkter mellan cellinnehållet och
cellkanten.
• I fältet Cellmellanr. anger du antalet bildpunkter mellan tabellcellerna.
När du inte har angett specifika värden för cellmellanrum och cellfyllning visas
tabellen med cellmellanrummet 2 och cellutfyllnaden 1 i Netscape Navigator,
Microsoft Internet Explorer och Dreamweaver.
Välj bland följande alternativ när du vill ange tabellkanter:
• I fältet Kant anger du tabellkantens bredd i bildpunkter. I de flesta webbläsare
visas kanten som en tredimensionell linje.
Om du använder tabellen för sidlayout anger du ett kantvärde på 0. Du kan
visa cell- och tabellkanter när kantvärdet är 0 genom att välja Visa > Visuella
hjälpmedel > Tabellkanter.
• Använd fältet Kantfärg när du vill ange en kantfärg för hela tabellen.
• Använd alternativet Bakg. färg när du vill ange en bakgrundsfärg för tabellen.
• Använd fältet Bakgrundsbild när du vill ange en bakgrundsbild för tabellen.
Ange kolumn-, rad- och cellegenskaper
Markera en kombination av celler och använd sedan egenskapskontrollen när du
vill ändra utseendet på enskilda celler, rader och kolumner. Information om hur
du markerar celler, rader och kolumner finns i ”Markera tabellelement” på
sidan 181. Information om hur du formaterar hela tabellen finns i ”Ange
tabellegenskaper” på sidan 184.
Så här formaterar du en rad, kolumn eller cell:
1
Markera en kombination av celler i tabellen.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas. Klicka på
maximeringsknappen längst ned till höger så att alla egenskaper visas.
Använda tabeller för innehåll
185
3
Välj bland följande alternativ:
• Använd listrutan Vågr. när du vill ställa in den vågräta justeringen av innehållet
i en cell, kolumn eller rad. Du kan justera innehållet till vänster, till höger,
centrerat eller till webbläsarens standardinställning (oftast till vänster för
vanliga celler och centrerat för tabellhuvudceller).
• Använd listrutan Lodrätt när du vill ställa in den lodräta justeringen av
innehållet i en cell, kolumn eller rad. Du kan justera innehållet till överst,
mitten, nederst, baslinje eller till webbläsarens standardinställning (oftast
mitten).
• I fälten B och H anger du de markerade cellernas bredd och höjd i bildpunkter.
Om du vill använda procenttal skriver du ett procenttecken (%) efter värdet.
• Om du vill ange en bakgrundsbild för en cell, kolumn eller rad använder du det
översta Bakg-fältet. Klicka på mappikonen när du vill bläddra till en bild. Du
kan också skriva bildens sökväg eller använda peka-på-fil-ikonen.
• Om du vill ange en bakgrundsfärg för en cell, kolumn eller rad använder du det
nedre Bakg-fältet. Du kan använda färgväljaren eller skriva den hexadecimala
koden för färgen du vill ha.
• Om du vill ange en kantfärg för celler använder du alternativet Kant.
4
Välj bland följande layoutalternativ:
• Klicka på knappen Slå samman celler när du vill skapa en cell av markerade
celler, rader eller kolumner. Se ”Dela upp och slå samman celler” på sidan 191.
• Klicka på knappen Dela upp cell när du vill dela upp en cell och därmed skapa
två celler. Se ”Dela upp och slå samman celler” på sidan 191.
• Markera Ingen radbr. när du vill förhindra radbrytning. Detta gör att cellerna
utvidgas så att alla data får plats när du skriver eller klistrar in dem i en cell.
(Vanligtvis utökas cellerna vågrätt för att rymma det längsta ordet och därefter
lodrätt.)
• Markera Huvud när du vill formatera de markerade cellerna eller raderna som
ett tabellhuvud. Innehållet i tabellhuvudceller är som standard i fetstil och
centrerat.
186
Kapitel 7
Formatera en tabell med ett designschema
Använd kommandot Formatera tabell när du snabbt vill använda en förinställd
design på en tabell. Du kan sedan markera alternativ för att ytterligare anpassa
designen.
Så här använder du en förinställd design:
1
Markera tabellen och välj Kommandon > Formatera tabell.
2
Välj en design i listan till vänster i dialogrutan som visas. Tabellen i dialogrutan
uppdateras så att ett exempel på designen visas.
3
Om du ytterligare vill anpassa designen gör du ändringar i alternativen för
Radfärger, Översta rad och Vänster kolumn.
4
Om du vill ändra kantbredden skriver du ett värde i fältet Kant. Ange 0 om du
inte vill ha någon kant.
5
Om du vill använda designen på tabellceller (TD-koder) i stället för på
tabellrader (TR-koder) markerar du Tillämpa alla attribut på TD-koder i stället
för på TR-koder.
Tabellcellformatering åsidosätter all formatering du har angett för den rad som
cellen finns i. Om du vill att samtliga celler i raden ska formateras på samma
sätt är det dock bättre att formatera tabellraden i stället för varje enskild cell.
Det ger tydligare och mer exakt HTML-källkod. Se ”Formatera tabeller och
celler” på sidan 183.
6
Klicka på Verkställ eller OK när du vill formatera tabellen med den angivna
designen.
Använda tabeller för innehåll
187
Ändra storlek på tabeller och celler
Du kan ändra storlek på hela tabellen eller enskilda rader och kolumner. När du
ändrar storlek på hela tabellen ändras cellernas storlek i motsvarande grad.
Så här ändrar du storlek på tabellen:
1
Markera tabellen.
2
Dra i något av handtagen när du vill ändra storlek på bredden respektive
höjden. När du drar i hörnhandtaget ändras både bredd och höjd.
Gör något av följande när du vill ändra storlek på en rad eller kolumn:
• Om du vill ändra radhöjd drar du den nedre radkanten.
• Om du vill ändra kolumnbredd drar du den högra kolumnkanten.
Ändra kolumnbredd
Med egenskapskontrollen kan du ange bredden på en kolumn på tre sätt.
Så här anger du kolumnbredd:
1
Klicka i någon av kolumnens celler eller markera kolumnen.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas.
3
Gör något av följande i fältet B:
• Skriv ett värde om du vill ange kolumnbredden till ett visst antal bildpunkter.
• Skriv ett tal följt av procenttecken (%) om du vill ange kolumnbredden i
procent av tabellbredden.
• Låt fältet vara tomt (standard) om du vill att bredden ska beräknas automatiskt
baserat på cellens innehåll och bredden på de andra kolumnerna. Vanligtvis
tilldelas utrymme utifrån den längsta raden eller den bredaste bilden. Detta är
orsaken till att en kolumn ibland blir mycket större än de andra kolumnerna i
tabellen när du lägger till innehåll i den.
188
Kapitel 7
Återställa bredd och höjd
Det enklaste sättet att ange kolumnbredd och radhöjd är att dra tabellens kanter.
När du drar en kolumn- eller radkant anges automatiskt specifika värden för
samtliga kolumner eller rader, antingen i bildpunkter eller i procent av tabellens
aktuella storlek, beroende på hur tabellbredden är angiven.
Om du inte får önskat resultat genom att dra tabellkanterna kan du nollställa
kolumnbredderna och börja om från början.
Gör något av följande när du vill ändra bredd och höjd:
• Markera tabellen och välj Ändra > Tabell > Nollställ cellhöjder eller Nollställ
cellbredder.
• Öppna kodvyn (eller kodkontrollen) och ändra bredd och höjd direkt i
HTML-koden.
• Ange specifika värden för bredd och höjd i rutorna B och H i
egenskapskontrollen.
Lägga till och ta bort rader och kolumner
Använd kommandona på undermenyn Ändra > Tabell eller på snabbmenyn när
du vill lägga till och ta bort rader och kolumner i en tabell.
Så här lägger du till rader eller kolumner:
1
Klicka i en cell där du vill att den nya raden eller kolumnen ska visas.
2
Gör något av följande:
• Om du vill lägga till en rad väljer du Ändra > Tabell > Infoga rad. Du kan också
välja Tabell > Infoga rad på snabbmenyn.
• Om du vill lägga till en kolumn väljer du Ändra > Tabell > Infoga kolumn. Du
kan också välja Tabell > Infoga kolumn på snabbmenyn.
• Om du vill lägga till både rader och kolumner väljer du Ändra > Tabell > Infoga
rader eller kolumner. Du kan också välja Tabell > Infoga rader eller kolumner
på snabbmenyn.
3
I dialogrutan som visas skriver du antalet rader eller kolumner som du vill lägga
till och anger om de nya raderna eller kolumnerna ska visas före eller efter den
markerade raden eller kolumnen.
4
Klicka på OK.
Använda tabeller för innehåll
189
Så här tar du bort en rad eller kolumn:
1
Klicka i en cell i raden eller kolumnen.
2
Välj något av följande alternativ:
• Om du vill ta bort en rad väljer du Ändra > Tabell > Ta bort rad. Du kan också
välja Tabell > Ta bort rad på snabbmenyn.
• Om du vill ta bort en kolumn väljer du Ändra > Tabell > Ta bort kolumn. Du
kan också välja Tabell > Ta bort kolumn på snabbmenyn.
Så här lägger du till eller tar bort rader eller kolumner från det nedre högra hörnet i
en tabell:
1
Markera hela tabellen. (Klicka på tabellens övre vänstra hörn, eller klicka i
tabellen och välj Ändra > Tabell > Markera tabell.)
2
Gör något av följande i egenskapskontrollen:
• Öka rad- eller kolumnvärdet när du vill lägga till rader.
• Minska rad- eller kolumnvärdet när du vill ta bort rader.
Rader läggs till och tas bort från tabellens nederdel och kolumner läggs till och
tas bort till höger. Du får inga varningsmeddelanden om du tar bort rader eller
kolumner som innehåller data.
Kapsla tabeller
En kapslad tabell är en tabell i en tabell. Du kan konfigurera en kapslad tabell på
samma sätt som andra tabeller. Tabellens bredd begränsas dock av bredden på den
cell som den infogas i.
190
Kapitel 7
Så här kapslar du en tabell i en tabellcell:
1
Gör något av följande:
• Klicka i cellen där du vill infoga den andra tabellen, och välj Infoga > Tabell.
• Klicka i cellen där du vill infoga den andra tabellen och sedan på knappen
Infoga tabell i kategorin Vanlig på objektpanelen.
• Dra knappen Infoga tabell från kategorin Vanlig på objektpanelen till cellen där
du vill infoga den andra tabellen.
2
Ange tabellens egenskaper i dialogrutan Infoga tabell och klicka på OK.
Dela upp och slå samman celler
Använd egenskapskontrollen eller kommandona på undermenyn Ändra > Tabell
när du vill dela upp eller slå samman celler. Du kan slå samman hur många
närliggande celler som helst, så länge hela markeringen är rektangulär, när du vill
skapa en enskild cell som sträcker sig över flera kolumner eller rader. Du kan dela
upp en cell i valfritt antal rader eller kolumner, oavsett om den tidigare har slagits
samman. Tabellen struktureras automatiskt om (COLSPAN- eller ROWSPAN-attribut
läggs till om det behövs) så att den angivna uppställningen skapas.
I följande bild har cellerna i mitten av de två första raderna slagits samman så att
de sträcker sig över två rader.
Använda tabeller för innehåll
191
Så här slår du samman två eller flera celler i en tabell:
1
Markera cellerna du vill slå samman. De markerade cellerna måste vara
angränsande och ha formen av en rektangel.
Denna markering är rektangulär, så cellerna kan slås samman.
Denna tabellmarkering är inte rektangulär, så cellerna kan inte slås samman.
2
Välj Ändra > Tabell > Slå samman celler, eller klicka på knappen Slå samman
celler i egenskapskontrollen.
Innehållet i de enskilda cellerna placeras i den sammanslagna cellen.
Egenskaperna för den första cellen används för den sammanslagna cellen.
Så här delar du upp en cell:
192
Kapitel 7
1
Klicka i cellen eller markera den.
2
Välj Ändra > Tabell > Dela upp cell, eller klicka på knappen Dela upp cell i
egenskapskontrollen.
3
Markera i dialogrutan Dela upp cell om du vill dela upp cellen i rader eller
kolumner, och ange sedan antalet rader eller kolumner. Klicka på OK.
Kopiera och klistra in celler
Du kan kopiera och klistra in flera tabellceller på samma gång och samtidigt
bevara cellformatet. Du kan också kopiera och klistra in endast innehållet i cellen.
Celler kan klistras in vid insättningspunkten eller i stället för en markering i en
befintlig tabell. Om du vill klistra in flera tabellceller måste innehållet i Urklipp
passa ihop med tabellens struktur eller markeringen i tabellen som cellerna ska
klistras in i.
Så här klipper du ut eller kopierar celler i en tabell:
1
Markera en eller flera celler i tabellen.
De markerade cellerna måste bilda en rektangel för att du ska kunna klippa ut
eller kopiera dem. (Se ”Markera tabellelement” på sidan 181.)
Korrekt markering: Cellerna kan klippas ut eller kopieras.
Felaktig markering: Dessa celler kan inte klippas ut eller kopieras.
2
Klipp ut eller kopiera cellerna med kommandona på Redigera-menyn.
Om du markerar hela raden eller kolumnen tas raden eller kolumnen bort från
tabellen när du väljer Redigera > Klipp ut.
Använda tabeller för innehåll
193
Så här klistrar du in tabellceller:
1
Välj var du vill klistra in cellerna.
• Om du vill klistra in celler före eller ovanför en viss cell klickar du i denna cell.
• Om du vill skapa en ny tabell med de inklistrade cellerna klickar du där du vill
att tabellen ska visas (förutsatt att du inte klickar i en annan tabell).
2
Välj Redigera > Klistra in.
Om du klistrar in hela rader eller kolumner i en befintlig tabell läggs de till i
tabellen. Om du klistrar in en enskild cell ersätts innehållet i den markerade
cellen. Om du klistrar in utanför en tabell används raderna, kolumnerna eller
cellerna för att definiera en ny tabell.
Så här tar du bort innehållet men låter cellerna vara intakta:
1
Markera en eller flera celler.
2
Välj Redigera > Ta bort eller tryck på Delete.
Obs! Om du markerar samtliga celler i en rad eller kolumn tas hela raden eller kolumnen,
inte bara innehållet, bort från tabellen.
Sortera tabeller
Du kan utföra en enkel tabellsortering baserad på innehållet i en enskild kolumn.
Du kan också göra en mer avancerad tabellsortering baserad på innehållet i två
kolumner.
Du kan inte sortera tabeller som innehåller attributen COLSPAN eller ROWSPAN, d.v.s.
tabeller som innehåller sammanslagna celler. (Information om sammanslagna
celler finns i ”Dela upp och slå samman celler” på sidan 191.)
Så här sorterar du en tabell:
1
Markera tabellen och välj Kommandon > Sortera tabell.
2
Välj bland följande alternativ i dialogrutan som visas:
• Ange vilken kolumn som ska sorteras i listrutan Sortera efter.
• Ange om du vill sortera kolumnen alfabetiskt eller numeriskt i listrutan Ordning.
Detta alternativ är viktigt när innehållet i en kolumn är numeriskt. En
alfabetisk sortering i en lista med en- och tvåsiffriga tal resulterar i en
alfanumerisk sortering (exempelvis 1, 10, 2, 20, 3, 30) i stället för en ren
numerisk sortering (exempelvis 1, 2, 3, 10, 20, 30).
• Markera Stigande (A till Ö eller låg till hög) eller Fallande som
sorteringsordning.
194
Kapitel 7
3
Om du vill utföra en andra sortering baserad på en annan kolumn anger du
sorteringsalternativ i listrutan Sedan efter.
4
Markera alternativet Sortering innefattar första rad om du vill ta med den första
raden i sorteringen. Om den första raden är en rubrik (huvudcell) som inte ska
flyttas låter du detta alternativ vara avmarkerat.
5
Klicka på Verkställ eller OK när du vill sortera tabellen.
Exportera tabelldata
Innan du kan exportera tabelldata som du skapar i Dreamweaver måste du spara
dessa data i ett filformat som accepterar avgränsade data. Följande avgränsare kan
användas: kommatecken, kolon, semikolon eller mellanslag.
Du kan inte exportera markerade delar av en tabell. När du exporterar en tabell
exporteras hela tabellen. Om du bara vill ha vissa data från en tabell, exempelvis de
sex första raderna eller kolumnerna, skapar du en ny tabell som du kopierar
informationen till och sedan exporterar.
Så här exporterar du en tabell:
1
Placera insättningspunkten i en cell i tabellen som ska exporteras.
2
Välj Arkiv > Exportera > Exportera tabell.
Dialogrutan Exportera tabell visas.
3
I listrutan Avgränsare anger du ett avgränsarvärde för tabellens data.
4
I listrutan Radbrytningar anger du radbrytningar för det operativsystem som
du exporterar filen för: Windows, Macintosh eller UNIX.
5
Klicka på Exportera.
6
Skriv ett namn på filen i dialogrutan som visas och klicka på Spara.
Använda tabeller för innehåll
195
196
Kapitel 7
8
KAPITEL 8
Använda ramar
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ramar används för att dela upp en webbsida i flera HTML-sidor. En webbsida
kan exempelvis bestå av tre ramar. En smal ram i ena kanten med en
rullningsmeny, en ram högst upp med webbplatsens logotyp och titel samt en stor
ram på resten av sidan för själva innehållet. Var och en av dessa ramar är en
fristående HTML-sida. De fungerar tillsammans på sidan med hjälp av en eller
flera ramuppsättningar, som är HTML-sidor som definierar webbsidans struktur
och egenskaper. Ramuppsättningar innehåller information om hur många ramar
som visas på sidan, ramarnas storlek, källorna för sidor som läses in i ramar och
andra egenskaper som går att definiera. Ramuppsättningssidor visas inte i
webbläsare. Det sparas bara information på dem om hur ramarna på en sida ska
visas. (Det är dock ramuppsättningssidan du bör förhandsgranska när du
använder Förhandsgranska i webbläsare.)
197
I detta exempel förblir den översta ramen statisk och ser alltid likadan ut på alla
sidor på platsen. Menyn i kantramen har länkar som ändrar innehållet i
huvudramen, men den förblir för övrigt statisk. Huvudramen är det dynamiska
området, som ändras beroende på vilken menypost du väljer.
Du kan formatera samtliga ramar och ramuppsättningar på sidan med hjälp av
egenskapskontrollen. Du kan aktivera eller avaktivera rullning, ange bredd och
höjd, namnge sidor m.m. Mer information finns i ”Ram- och
ramuppsättningsegenskaper” på sidan 206.
En webbsida som innehåller tre ramar består av fyra separata HTML-sidor:
ramuppsättningsfilen och de tre filerna med innehållet som visas i ramarna. När
du utformar en sida med ramuppsättningar måste du spara var och en av dessa
fyra filer för att sidan ska fungera på rätt sätt i webbläsaren. Mer information om
hur du skapar webbsidor med ramar finns i ”Skapa rambaserade webbsidor” på
sidan 199.
När ska ramar användas?
Ramar används oftast för navigering. På en webbsida kan navigationsmenyn
finnas i en ram och sidans innehåll i en annan. Med navigationsmenyn i en ram
kan platsbesökarna klicka på en menypost för att visa önskad information i
innehållsramen, utan att navigationsmenyn ändras över huvud taget. Detta
hjälper besökarna att hela tiden veta var de finns på platsen.
198
Kapitel 8
Det kan dock vara invecklat att implementera ramar och ofta kan du uppnå
samma resultat med en webbsida utan ramar som med en som har ramar. Om du
exempelvis vill ha navigeringen till vänster på sidan kan du antingen dela sidan i
två ramar eller infoga navigeringen till vänster på alla sidor på platsen. Skillnaden
är att med ramar behöver du bara skapa navigeringen en gång. Om du beslutar dig
för att använda ramar på webbplatsen är det viktigt att du förstår förhållandet
mellan ramar och ramuppsättningar, eftersom det är lätt att bli förvirrad vid
länkning med ramar.
Skapa rambaserade webbsidor
Ramar kan vara ett utmärkt verktyg för webbutvecklare, men de måste
implementeras på rätt sätt för att fungera. Följ dessa anvisningar om du vill vara
säker på att webbsidan fungerar som det är tänkt (inte nödvändigtvis i
ordningsföljd):
• Skapa ramuppsättningen och ramarna på sidan. Se ”Skapa ramar” på
sidan 199.
• Spara alla filer som används på platsen. Kom ihåg att alla ramar och
ramuppsättningar är fristående HTML-sidor och att alla sidor måste sparas. Se
”Spara ram- och ramuppsättningsfiler” på sidan 205.
• Ange egenskaper för varje enskild ram och ramuppsättning. I detta ingår att
namnge alla ramar och ramuppsättningar, ange rullningsalternativ m.m. Se
”Ram- och ramuppsättningsegenskaper” på sidan 206.
• Se till att alla länkar har mål så att länkat innehåll visas på rätt ställe. Se ”Styra
raminnehåll med länkar” på sidan 212.
Skapa ramar
Du kan skapa en ramuppsättning på två sätt i Dreamweaver: utforma den själv
eller välj bland flera fördefinierade ramuppsättningar. När du väljer en
fördefinierad ramuppsättning infogas automatiskt alla ramuppsättningar och
ramar som behövs för att skapa layouten. Det är det enklaste sättet att snabbt göra
en ramlayout på sidan. Du kan bara skapa ramar i designvyn i dokumentfönstret.
Använda ramar
199
Infoga en fördefinierad ramuppsättning
Med fördefinierade ramuppsättningar kan du lätt välja vilken typ av
ramuppsättning du vill skapa.
Ikonerna för fördefinierade ramuppsättningar i kategorin Ramar på objektpanelen
ger dig en bild av hur de olika ramuppsättningarna ser ut när de används på ett
angivet dokument.
Den markerade ramuppsättningen omger det aktuella dokumentet, d.v.s. det
dokument som insättningspunkten finns placerad i. Den blå delen av en ikon för
en fördefinierad ramuppsättning motsvarar den markerade sidan eller ramen i ett
dokument, och den vita delen motsvarar den nya ramen eller ramarna.
Så här infogar du en fördefinierad ramuppsättning:
1
Placera insättningspunkten i dokumentet.
2
Gör sedan något av följande:
• Markera en fördefinierad ramuppsättning i kategorin Ramar på objektpanelen.
Infoga ramuppsättningen genom att klicka på ikonen eller dra ikonen till
dokumentet.
• Infoga en fördefinierad ramuppsättning genom att välja Infoga > Ramar >
Vänster, Höger, Överst, Nederst, Vänster och överst, Vänster överst, Överst
vänster eller Dela.
200
Kapitel 8
Utforma och infoga en ramuppsättning
Innan du skapar en ramuppsättning eller börjar arbeta med ramar gör du
ramkanterna synliga i dokumentfönstret.
Du visar ramkanter i ett dokument genom att välja Visa >Visuella hjälpmedel >
Ramkanter.
När ramkanter visas läggs mellanrum till runt dokumentkanten så att du kan se
ramområdena i dokumentet.
Gör något av följande när du vill skapa ett ramuppsättning:
• Välj Ändra > Ramuppsättning > Dela ram vänster, höger, uppåt eller nedåt.
• Dra en av ramkanterna till dokumentfönstret om du vill dela upp dokumentet
lodrätt eller vågrätt. Dra en ramkant från ett av hörnen om du vill dela upp
dokumentet i fyra ramar.
• Alt-dra (Windows) eller Alternativ-dra (Macintosh) om du delar upp en inre
ram.
Så här tar du bort en ram:
Dra bort ramkanten från sidan eller till kanten på den överordnade ramen.
Använda ramar
201
Skapa en kapslad ramuppsättning
En ramuppsättning i en annan ramuppsättning kallas en kapslad ramuppsättning.
Varje ny ramuppsättning du skapar har ett eget ramuppsättningsdokument i
HTML-kod och egna ramdokument. På de flesta webbsidor med ramar används
faktiskt kapslade ramar, vilket även gäller flera av de fördefinierade
ramuppsättningarna i Dreamweaver.
Ett dokument med tre ramar kan exempelvis ha ett företags logotyp i en ram
överst i dokumentet, navigationskontroller i en ram till vänster och innehållet i en
tredje ram.
Huvudramuppsättning
Menyramen och
innehållsramen är
kapslade i
huvudramuppsättningen
Så här skapar du en kapslad ramuppsättning:
1
Placera insättningspunkten i ramen som du vill infoga en kapslad
ramuppsättning i.
2
Gör något av följande:
• Välj Ändra > Ramuppsättning > Dela ram uppåt, nedåt, vänster eller höger.
• Klicka på en ramuppsättningsikon i kategorin Ramar på objektpanelen.
• Välj Infoga > Ramar > Vänster, Höger, Överst, Nederst, Vänster och överst,
Vänster överst, Överst vänster eller Dela.
202
Kapitel 8
Markera en ram eller ramuppsättning
Ramar och ramuppsättningar är enskilda HTML-dokument. När du vill göra
ändringar i ramar och ramuppsättningar måste du först markera dem. Du kan
markera en ram eller ramuppsättning i dokumentfönstret eller med hjälp av
rampanelen.
När du markerar en ram eller ramuppsättning visas markeringslinjer både på
rampanelen och i dokumentfönstret.
Använda rampanelen
På rampanelen visas en bild av ramarna i ett dokument. Du kan markera en ram
eller ramuppsättning i dokumentet genom att klicka på den på rampanelen.
Därefter kan du visa eller redigera egenskaperna för det markerade objektet i
egenskapskontrollen. Se ”Ram- och ramuppsättningsegenskaper” på sidan 206.
På rampanelen visas ramuppsättningsstrukturens hierarki på ett sätt som kanske
inte framgår i dokumentfönstret. Ramuppsättningen omges av en tjock,
tredimensionell kant på rampanelen. Ramar omges av en tunn, grå linje och varje
ram identifieras med ett ramnamn.
Gör något av följande när du vill visa rampanelen:
• Välj Fönster > Ramar.
• Tryck på Ctrl+F10 (Windows) eller Kommando+F10 (Macintosh).
Så här markerar du en ram på rampanelen:
Klicka på ramen på rampanelen.
Så här markerar du en ramuppsättning på rampanelen:
Klicka på kanten som omger ramarna på rampanelen.
Använda ramar
203
Markera en ram eller ramuppsättning i dokumentfönstret
När en ram är markerad i dokumentfönstret är ramens kanter märkta med en
prickad linje. När en ramuppsättning är markerad är kanterna på alla ramar i
ramuppsättningen märkta med en prickad linje.
Markera ramar och ramuppsättningar när du vill ändra deras egenskaper. I
egenskapskontrollen visas egenskaperna för den markerade ramen eller
ramuppsättningen. Se ”Ram- och ramuppsättningsegenskaper” på sidan 206.
Så här markerar du en ram i dokumentfönstret:
Alt-klicka (Windows) eller Alternativ+Skift-klicka (Macintosh) inuti en ram.
Så här markerar du en ramuppsättning i dokumentfönstret:
Klicka på en ramkant i dokumentfönstret.
Gör något av följande när du vill flytta markeringen till en annan ram:
• Om du vill flytta markeringen till nästa ram: Håll ned Alt (Windows) eller
Kommando (Macintosh) och tryck på Vänster- eller Högerpil.
• Om du vill flytta markeringen till den överordnade ramuppsättningen (som
innehåller kapslade ramar): Tryck på Alt+Uppil (Windows) eller
Kommando+Uppil (Macintosh).
• Om du vill flytta markeringen till den underordnade ramen (ramen som är
kapslad i en annan ram): Tryck på Alt+Nedpil (Windows) eller
Kommando+Nedpil (Macintosh).
204
Kapitel 8
Spara ram- och ramuppsättningsfiler
En ramuppsättningsfil och dess associerade ramfiler måste sparas innan du kan
förhandsgranska sidan i en webbläsare. Du kan spara en enskild ramuppsättningseller ramsida för sig eller alla öppna ramfiler och ramuppsättningssidan samtidigt.
När du använder Dreamweaver för att skapa ramdokument får varje nytt
ramdokument ett temporärt filnamn, exempelvis UntitledFrame-1 för
ramuppsättningssidan och Untitled-1, Untitled-2 o.s.v. för ramsidorna.
När du väljer ett av sparalternativen öppnas dialogrutan Spara som där du direkt
kan spara ett dokument med det temporära filnamnet. Eftersom varje fil är
”untitled” (namnlös) kan det vara besvärligt att avgöra vilken ramfil som sparas.
Titta på rammarkeringslinjerna i dokumentfönstret när du vill identifiera vilket
dokument det är som sparas. Det markerade området identifierar vilken ram det
är som refereras i dialogrutan Spara som. Den markerade ramens eller
ramuppsättningens filnamn visas också i namnlisten.
Så här sparar du en ramuppsättningsfil:
1
Markera ramuppsättningen på rampanelen eller i dokumentfönstret.
2
Välj något av följande:
• Om du vill spara ramuppsättningsfilen väljer du Arkiv > Spara ramuppsättning.
• Om du vill spara ramuppsättningsfilen som en ny fil väljer du Arkiv > Spara
ramuppsättning som.
Så här sparar du ett dokument som finns i en ram:
Markera ramen genom att klicka i den och välj Arkiv > Spara ram eller Arkiv >
Spara ram som.
Använda ramar
205
Så här sparar du alla filer i en ramuppsättning:
Välj Arkiv > Spara alla ramar.
Då sparar du alla öppna dokument, inklusive enskilda dokument, ramdokument
och ramuppsättningsdokument.
Obs! Använd dig av rammarkeringslinjerna i dokumentfönstret för att identifiera
ramuppsättnings- och ramdokument när du sparar filer.
Ram- och ramuppsättningsegenskaper
Ramar och ramuppsättningar har olika egenskapskontroller.
• Ramegenskaper anger ramnamn, källfil, marginaler, rullning, storleksändring
och kanter för enskilda ramar i en ramuppsättning.
• Ramuppsättningsegenskaper anger storlek på ramarna och färg och bredd på
kanterna mellan ramarna.
Så här visar du ramegenskaper:
1
Välj Fönster > Egenskaper så att egenskapskontrollen visas, om den inte redan
är öppen.
2
Gör något av följande:
• Alt-klicka (Windows) eller Alternativ+Skift-klicka (Macintosh) i en ram i
dokumentfönstret.
• Klicka i en ram på rampanelen.
Ange ramegenskaper
Använd egenskapskontrollen när du vill ge ramar namn och ange kanter och
marginaler. Om du vill visa samtliga ramegenskaper klickar du på
maximeringsknappen längst ned till höger i egenskapskontrollen. Du måste ge alla
ramar namn för att sidlänkarna ska fungera ordentligt.
Så här anger du ramegenskaper:
1
Markera en ram genom att göra något av följande:
• Klicka i en ram på rampanelen.
• Alt-klicka (Windows) eller Alternativ+Skift-klicka (Macintosh) i en ram i
dokumentfönstret.
206
Kapitel 8
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas. Klicka på
maximeringsknappen längst ned till höger om du vill visa alla egenskaper.
3
Ge ramen ett namn genom att skriva ett i fältet Ramnamn.
Obs! I fältet Ramnamn anges det namn för den aktuella ramen som ska användas för
hyperlänkmål och skriptreferenser. Ett ramnamn ska vara ett enda ord. Understreck (_)
är tillåtna, men inte bindestreck (-), punkter (.) och mellanslag. Ramnamn måste börja
med en bokstav (inte en siffra). Använd inte JavaScript-reserverade ord (exempelvis
top eller navigator) som ramnamn.
4
Välj bland följande ramalternativ:
• Källa anger ramens källdokument. Skriv ett filnamn, eller klicka på mappikonen
om du vill bläddra till filen och markera den. Du kan också öppna en fil i en ram
genom att placera pekaren i ramen och välja Arkiv > Öppna i ram.
• Rulla anger om rullningslister ska visas när innehållet inte får plats i den
aktuella ramen. Standardinställningen för de flesta webbläsare är Auto.
• Ändra inte storlek fixerar den aktuella ramens storlek så att användarna inte
kan dra ramkanterna. Du kan själv alltid ändra storlek på ramar i
dokumentfönstret, men om det här alternativet är markerat kan användarna
inte ändra storlek på ramar i sina webbläsare.
• Kanter anger den aktuella ramens kant. Alternativen är Ja, Nej och Standard.
När du väljer ett alternativ för Kanter åsidosätts kantinställningar som har
definierats för ramuppsättningen. (Se ”Ange ramuppsättningsegenskaper” på
sidan 208.) De flesta webbläsare har standardinställningen Ja. En kant kan
endast avaktiveras om alla närliggande ramar har inställningen Nej eller om de
har inställningen Standard och den överordnade ramuppsättningen har
inställningen Nej.
• Kantfärg anger en kantfärg för alla kanter som gränsar till den aktuella ramen.
Denna inställning åsidosätter ramuppsättningens kantfärg.
Använda ramar
207
5
Ange följande marginalalternativ (om marginalalternativen inte visas klickar du
på maximeringsknappen längst ned till höger):
Marginalbredd anger bredden i bildpunkter för vänster och höger marginal
(mellanrummet mellan ramkanten och innehållet).
Marginalhöjd anger
höjden i bildpunkter för den övre och nedre marginalen
(mellanrummet mellan ramkanten och innehållet).
Ange ramuppsättningsegenskaper
Använd ramuppsättningsegenskaper när du vill ange kanter och ramstorlek. När
du anger en ramegenskap åsidosätts inställningen för samma egenskap i en
ramuppsättning. Om du exempelvis anger kantegenskaper i en ram åsidosätts de
kantegenskaper som anges i ramuppsättningen.
Fördefinierade ramuppsättningar använder du för att snabbt använda en
ramuppsättning på ett dokument. Fördefinierade ramuppsättningar har följande
standardvärden för egenskaper: inga kanter, inga rullningslister och ingen
storleksändring på ramar när de visas i en webbläsare. Om du vill ändra
standardvärdena anger du önskade alternativ i egenskapskontrollen.
Så här visar du ramuppsättningsegenskaper:
1
Välj Fönster > Egenskaper så att egenskapskontrollen visas, om den inte redan
är öppen.
2
Gör något av följande:
• Klicka på en kant mellan två ramar i dokumentfönstret.
• Klicka på kanten som omger ramarna på rampanelen.
3
208
Kapitel 8
Om du vill visa alla ramuppsättningsegenskaper klickar du på
maximeringsknappen längst ned till höger i egenskapskontrollen.
Så här anger du ramuppsättningsegenskaper:
1
Markera en ramuppsättning.
2
I listrutan Kanter anger du om du vill visa kanter runt ramar när dokumentet
visas i en webbläsare.
• Om du vill visa kanter väljer du Ja.
• Om du inte vill visa kanter väljer du Nej.
• Om du vill att inställningarna i användarens webbläsare ska styra hur kanter
visas väljer du Standard.
3
I fältet Kantbredd skriver du en siffra för att ange kanternas bredd i den
aktuella ramuppsättningen.
4
I fältet Kantfärg använder du färgväljaren för att ange en kantfärg eller också
skriver du det hexadecimala värdet för en färg.
5
När du vill ange ramstorleksalternativ klickar du på flikarna på vänster sida i
rutan Val av rad el. kolumn för att markera en rad eller på flikarna högst upp
för att markera en kolumn. Skriv sedan ett tal i fältet Värde när du vill ange
storlek på den markerade raden eller kolumnen, och ange en måttenhet för
detta värde i listrutan Enheter.
Namnge ett ramuppsättningsdokument
När du vill ange en titel på en ramuppsättningssida använder du dialogrutan
Sidegenskaper.
Så här namnger du en ramuppsättningssida:
1
Markera en ramuppsättning genom att göra något av följande:
• Klicka på ramuppsättningens kant på rampanelen.
• Alt-klicka (Windows) eller Alternativ+Skift-klicka (Macintosh) i en ram i
dokumentfönstret. Du kanske måste trycka på Alt+Uppil (Windows) eller
Kommando+Uppil (Macintosh) för att markera ramuppsättningen.
2
Välj Ändra > Sidegenskaper.
3
Skriv ett namn på dokumentet i fältet Titel.
Använda ramar
209
Ange ramstorlekar
Dra en ramkant i dokumentfönstret när du vill ange ungefärliga storlekar för
ramar. Använd sedan egenskapskontrollen när du vill ange hur mycket utrymme
webbläsaren ska tilldela en ram när skärmen inte är tillräckligt stor för att ramar
ska kunna visas i fullständig storlek.
Så här anger du ramstorlekar:
1
Markera ramuppsättningen genom att klicka på en ramkant.
Välj Visa > Visuella hjälpmedel > Ramkanter om kanterna inte syns.
2
Visa alla egenskaper genom att klicka på maximeringsknappen i
egenskapskontrollen.
3
I rutan Val av rad el. kolumn klickar du på raden eller kolumnen som du vill
ändra.
4
Du anger hur mycket utrymme som ska tilldelas när webbläsarfönstret
storleksändras genom att ange ett tal i fältet Värde och välja någon av följande
enheter:
• Bildpunkter anger ett absolut värde för storleken på den markerade kolumnen
eller raden. Detta alternativ är det bästa valet för en ram som alltid ska ha
samma storlek, exempelvis ett navigationsfält. Om du anger en annan enhet för
de andra ramarna tilldelas de utrymme först när ramarna som har angetts i
bildpunkter är i fullständig storlek.
• Procent anger att den aktuella ramen ska ta upp det angivna procentvärdet av
ramuppsättningen. Ramar som anges med enheten Procent tilldelas utrymme
efter ramar med enheten Bildpunkter, men före ramar med enheten Relativt.
• Relativt anger att den aktuella ramen ska tilldelas utrymme proportionellt i
förhållande till andra ramar. Ramar som anges med enheten Relativt tilldelas
utrymme efter ramar med enheterna Bildpunkter och Procent, men de fyller ut
allt återstående utrymme i webbläsarfönstret.
210
Kapitel 8
Ange kanter för ramar och ramuppsättningar
Du kan ange hur kanter för ramar och ramuppsättningar ska visas i ett dokument.
När du anger kantalternativ för en ram åsidosätts motsvarande
ramuppsättningsalternativ.
Så här anger du ramkanter:
1
Markera ramen genom att Alt-klicka (Windows) eller Alternativ+Skift-klicka
(Macintosh) eller genom att klicka i ramen på rampanelen.
2
Ange följande alternativ i egenskapskontrollen:
• Kanter anger kanten på de aktuella ramarna. Alternativen är Ja, Nej och
Standard. De flesta webbläsare har standardinställningen Ja. En kant kan endast
avaktiveras när alla närliggande ramar har inställningen Nej (eller inställningen
Standard om den överordnade ramuppsättningen har inställningen Nej).
• Kantfärg anger en kantfärg för alla kanter som gränsar till den aktuella ramen.
Så här anger du kanter för ramuppsättningar:
1
Markera ramuppsättningen genom att klicka på en ramkant i
dokumentfönstret eller genom att klicka på kanten som omger ramarna på
rampanelen.
2
Ange följande alternativ i egenskapskontrollen:
• Kanter anger kanten på ramar i den aktuella ramuppsättningen. Välj Ja om du
vill visa kanterna i en tredimensionell färg, välj Nej om du vill visa kanterna
som platta och grå eller välj Standard om du vill att inställningarna i
webbläsaren ska styra hur kanter visas. De flesta webbläsare har
standardinställningen Ja.
• Kantfärg anger en kantfärg för alla kanter i den aktuella ramuppsättningen. Du
kan åsidosätta denna inställning för en enskild ram genom att ange en kantfärg
för ramen.
• Kantbredd anger bredden på kanterna i den aktuella ramuppsättningen. Ange
0 om du inte vill ha några kanter alls.
Använda ramar
211
Ändra en rams bakgrundsfärg
Du kan ändra en rams bakgrundsfärg genom att ange bakgrundsfärgen för
dokumentet i ramen.
Så här ändrar du bakgrundsfärgen för ett dokument i en ram:
1
Gör något av följande:
• Placera pekaren i ramen och välj Ändra > Sidegenskaper.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) inuti ramen och välj
Sidegenskaper på snabbmenyn.
2
Klicka i färgrutan Bakgrund och välj en färg.
Styra raminnehåll med länkar
Om du vill använda länkar i ramar måste du ange ett mål för länken. Målet är den
ram som det länkade innehållet ska öppnas i. Om navigationsmenyn exempelvis
finns i den vänstra ramen och du vill att det länkade materialet ska visas i
huvudramen för innehåll, måste du ange mål för samtliga navigationsmenylänkar.
Målet är namnet på huvudramen för innehåll, exempelvis huvud_ram. När en
användare klickar på en navigationslänk öppnas innehållet i huvudramen.
Du markerar en ram som filen ska öppnas i genom att använda listrutan Mål i
egenskapskontrollen. Du kan ange att en fil ska öppnas i en ny ram, ersätta
information i samma ram som länken eller ersätta information i en annan ram.
Du kan också göra så att det länkade innehållet skriver över den aktuella ramen
(genom att inte välja något mål) eller visas i ett helt nytt webbläsarfönster.
Så här anger du en ram som mål:
1
Markera text eller ett objekt.
2
Gör något av följande i fältet Länk i egenskapskontrollen:
• Skriv namnet på filen som du vill länka till.
• Klicka på mappikonen och markera filen som du vill länka till.
• Klicka på och dra peka-på-fil-ikonen för att markera filen som du vill länka till.
Om du vill ange ett ankare (särskilt ställe) i filen du vill länka till skriver du
tecknet # före ankarnamnet. Se ”Länka till en viss plats i ett dokument” på
sidan 358.
212
Kapitel 8
3
I listrutan Mål väljer du var det länkade dokumentet ska visas.
• Om du har namngett ramarna i egenskapskontrollen visas ramnamnen i denna
listruta. Ange en namngiven ram om du vill att det länkade dokumentet ska
öppnas i denna ram.
•
_blank
•
_parent
•
•
_self
öppnar det länkade dokumentet i ett nytt webbläsarfönster och behåller
det aktuella fönstret tillgängligt.
öppnar det länkade dokumentet i länkens överordnade
ramuppsättning.
öppnar länken i den aktuella ramen och ersätter innehållet i den.
öppnar länken i det aktuella dokumentets yttersta ramuppsättning och
ersätter alla ramar.
_top
Hantera webbläsare som inte kan visa
ramar
I Dreamweaver kan du ange innehåll som ska visas i äldre och textbaserade
webbläsare som inte stöder ramar. Innehållet som du anger i
ramuppsättningsdokumentet infogas med en programsats av följande typ:
<noframes><body bgcolor="#FFFFFF">
Detta är innehållet i NOFRAMES.
</body></noframes>
När ramuppsättningsfilen läses in i en webbläsare som inte stöder ramar visas
endast det innehåll som omges av NOFRAMES-koder.
Så här anger du innehåll för webbläsare som inte stöder ramar:
1
Välj Ändra > Ramuppsättning > Redigera innehållet i NOFRAMES.
Dokumentfönstret rensas och texten Innehåll i NOFRAMES visas överst i
dokumentet.
2
Gör något av följande när du vill skapa NOFRAMES-innehållet:
• Skriv eller infoga innehållet i dokumentfönstret.
• Välj Fönster > Kodkontrollen och skriv innehållet eller dess HTML-kod
mellan NOFRAMES-koderna.
3
Välj Ändra > Ramuppsättning > Redigera innehållet i NOFRAMES igen för
att återgå till normalvyn för ramuppsättningsdokumentet.
Använda ramar
213
Använda beteenden med ramar
Du kan använda flera beteenden som utnyttjar hur ramar fungerar. Ramar
används vanligtvis när webbdesignern vill ha kontroll över hur innehåll visas på en
webbsida. Det finns flera beteenden som förenklar arbetet med att ändra
innehållet i en ram.
•
Ange texten i ramen ersätter en rams innehåll och formatering med det innehåll
som du anger. Innehållet kan vara vilken giltig HTML-kod som helst. Använd
denna åtgärd när du vill visa information dynamiskt. Se ”Ange texten i ramen”
på sidan 459.
•
Gå till URL
•
Infoga navigationsfält använder du för att styra användaren till vissa sidor på en
öppnar en ny sida i det aktuella fönstret eller i den angivna ramen.
Denna åtgärd är särskilt användbar när du vill ändra innehållet i två eller fler
ramar med en klickning. Se ”Gå till URL” på sidan 452.
webbplats. Du kan koppla beteenden till navigationsfältsbilder och ange vilken
bild som visas baserat på användarens åtgärder. Du kanske exempelvis vill visa
en knappbild i Upp- eller Ned-läge för att låta användaren veta vilken sida på
en plats som visas. Se ”Infoga ett navigationsfält” på sidan 367.
•
214
Kapitel 8
Infoga hoppmeny gör att du kan ange en popup-meny med länkar som öppnar
filer i ett webbläsarfönster när användaren klickar på dem. Du kan också ange
ett visst fönster eller en viss ram som dokumentet ska öppnas i. Se ”Infoga en
hoppmeny” på sidan 364.
9
KAPITEL 9
Hantera och infoga resurser
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Resurser är element, exempelvis bilder och filmfiler som du använder när du
skapar en sida eller en plats.
Med resurspanelen kan du hantera och organisera resurserna på platsen på ett
enklare sätt än i platsfönstret. På panelen visas resurserna på platsen uppdelade på
följande kategorier:
•
•
•
•
•
•
•
•
•
Bilder
Färger
URL-adresser
Flash-filmer
Shockwave-filmer
MPEG- och QuickTime-filmer
Skript
Mallar
Biblioteksposter
Obs! Endast filer som passar in i ovanstående kategorier visas på resurspanelen. Det finns
andra filtyper som ibland kallas resurser, men de visas inte på denna panel.
Om du inte redan har samlat ihop olika resurser för platsen kan du hämta dem
från olika källor. Du kan skapa resurser i program som Macromedia Fireworks och
Macromedia Flash, få dem från en medarbetare eller kund eller kopiera dem från
en CD-skiva med clipart-bilder. Mer information om hur du planerar och samlar
in resurser finns i ”Planera och utforma webbplatsen” på sidan 91.
215
Du kan använda resurspanelen på två olika sätt: som en lättåtkomlig lista över
resurserna på platsen (platslistan) eller som ett sätt att organisera de resurser som
du använder mest (favoritlistan). Platsens resurser placeras automatiskt i
resurspanelens platslista. Favoritlistan är tom från början, men du kan lägga till
resurser till listan när du vill.
De flesta åtgärder som du utför i resurspanelen är desamma för platslistan som för
favoritlistan. Det finns dock några åtgärder som du endast kan utföra i
favoritlistan (se ”Använda favoritresurser” på sidan 223).
Mallar och biblioteksposter beskrivs mer ingående i ”Återanvända innehåll med
mallar och bibliotek” på sidan 371.
Använda resurspanelen
Med resurspanelen kan du visa resurser på två sätt: i platslistan som visar alla
resurser (av den typ som panelen känner igen) på platsen, och i favoritlistan som
endast visar de resurser som du uttryckligen har valt. De flesta av följande
procedurer kan antingen utföras i plats- eller favoritlistan.
I båda listorna delas resurserna upp i kategorier. Du väljer vilken resurskategori
som du vill visa genom att klicka på någon av kategoriknapparna till vänster om
panelen. (Både platslistan och favoritlistan är tillgängliga i alla resurskategorier,
förutom i mallar och biblioteksposter.)
I platslistan visas alla resurser (i igenkända kategorier) som finns som filer på
platsen (oavsett om de används av något dokument), tillsammans med färger och
URL-adresser som används i något dokument på platsen.
Du kan arbeta med följande resurskategorier:
är bildfiler i GIF-, JPEG- och PNG-format. Information om bilder finns i
”Infoga bilder” på sidan 263..
Bilder
är färgerna som används i dokument och formatmallar på platsen, bland
annat textfärger, bakgrundsfärger och länkfärger.
Färger
är externa URL-adresser som det finns länkar till i dokumenten på platsen.
Kategorin innehåller följande länktyper: FTP, gopher, HTTP, HTTPS, JavaScript,
e-post (mailto) och lokal fil (file://).
URL
är filer i något av Macromedias Flash-format. Endast SWF-filer
(komprimerad Flash) visas på resurspanelen. FLA-filer (Flash-källfiler) visas inte.
Se ”Flash-innehåll” på sidan 296.
Flash-filmer
är filer i något av Macromedias Shockwave-format. Se
”Shockwave-filmer” på sidan 305.
Shockwave-filmer
är filmfiler i QuickTime- eller MPEG-format. Se ”Infoga media” på
sidan 293.
Filmer
216
Kapitel 9
är JavaScript- eller VBScript-filer. Observera att skript i HTML-filer (i
motsats till oberoende JavaScript- eller VBScript-filer) inte visas på resurspanelen.
Mer information om hur du arbetar med JavaScript i Dreamweaver finns i
”Felsöka JavaScript-kod” på sidan 469.
Skript
gör det möjligt att använda samma sidlayout på flera sidor och att enkelt
ändra den layouten på alla sidor på en gång. Se ”Återanvända innehåll med mallar
och bibliotek” på sidan 371.
Mallar
är element som du använder på flera sidor. När du ändrar en
bibliotekspost uppdateras alla sidor som innehåller den posten. Se ”Återanvända
innehåll med mallar och bibliotek” på sidan 371.
Biblioteksposter
Så här öppnar du resurspanelen:
Välj Fönster > Resurser. Resurspanelen visas.
Det kan ta några sekunder innan platslistan har skapats, eftersom platscachen
måste läsas in innan listan skapas.
Obs! Du måste definiera en plats och skapa en platscache innan du kan använda
resurspanelen. Se ”Använda Dreamweaver för att göra en ny plats” på sidan 97.
Hantera och infoga resurser
217
Vissa ändringar syns inte direkt på resurspanelen:
• När du lägger till en resurs eller tar bort en från platsen visas ändringarna inte i
resurspanelen förrän du uppdaterar platslistan genom att klicka på Uppdatera
platslista. (Om du lägger till eller tar bort en resurs utanför Dreamweaver,
exempelvis med Windows Utforskaren eller Finder, måste du återskapa
platscachen så att ändringarna visas i resurspanelen.)
• När du tar bort den enda förekomsten av en viss färg eller URL på platsen eller
när du sparar en ny fil som innehåller en färg eller URL som inte tidigare har
använts på platsen, visas inte ändringarna på resurspanelen förrän du
uppdaterar platslistan.
Så här uppdaterar du platslistan manuellt:
1
Kontrollera att platslistan visas genom att klicka på Plats, högst upp på
resurspanelen.
2
Klicka på Uppdatera platslista längst ned på resurspanelen.
Platscachen skapas och uppdateras när det behövs. Resurspanelen uppdateras
med alla resurser som känns igen på platsen.
Så här återskapar du platscachen från grunden och uppdaterar platslistan:
Ctrl-klicka (Windows) eller Kommando-klicka (Macintosh) på Uppdatera
platslista längst ned på resurspanelen.
Så här visar du favoritlistan:
Klicka på Favoriter högst upp på resurspanelen.
Favoritlistan är tom tills du lägger till resurser i den.
Så här visar du platslistan:
Klicka på Plats högst upp på resurspanelen.
Obs! I kategorierna Mallar och Biblioteksposter är inte alternativen Plats och Favoriter
tillgängliga.
Så här visar du resurser i en viss kategori:
Klicka på lämplig kategoriikon och klicka på antingen Plats eller Favoriter. Om du
exempelvis vill visa alla bilder på platsen klickar du på bildikonen och sedan på
Plats.
218
Kapitel 9
Så här förhandsgranskar du en resurs:
Markera resursen i resurspanelen.
I förhandsgranskningsområdet högst upp på panelen visas en förhandsbild av
resursen.
Om du har markerat en film visas en ikon i förhandsgranskningsområdet. Om du
vill visa filmen klickar du på uppspelningsknappen (den gröna triangeln) i det
övre högra hörnet i förhandsgranskningsområdet.
Så här ändrar du storlek på förhandsgranskningsområdet:
Dra delningslisten (mellan förhandsgranskningsområdet och resurslistan) uppåt
eller nedåt.
Så här lägger du till resurser i favoritlistan:
1
Markera en eller flera resurser i platslistan.
2
Klicka på Lägg till i Favoriter.
Resurserna läggs till i favoritlistan: Om du vill visa favoritlistan klickar du på
Favoriter, överst på panelen.
Mer information om hur du lägger till resurser i favoritlistan finns i ”Lägga till
och ta bort resurser från favoritlistan” på sidan 224.
Obs! Det finns ingen favoritlista för mallar och biblioteksposter.
Lägga till en resurs på en sida
Du infogar de flesta typer av resurser i ett dokument genom att dra dem till
designvyn i dokumentfönstret eller genom att använda knappen Infoga. Du kan
antingen infoga färger och URL-adresser eller använda dem på markerad text i
designvyn. (URL-adresser kan också användas på andra element i designvyn,
exempelvis bilder.) Mallar används på hela dokumentet.
Så här infogar du en resurs i ett dokument:
1
Placera insättningspunkten i designvyn där du vill infoga resursen.
2
Välj Fönster > Resurser när du vill öppna resurspanelen (om den inte redan är
öppen).
3
Välj resurskategori.
Markera en kategori förutom Mallar. (En mall kan endast användas på ett helt
dokument. Den kan inte infogas i ett dokument.)
Hantera och infoga resurser
219
4
Klicka på Plats eller Favoriter och gå till den resurs som du vill infoga.
Det finns inga plats- eller favoritlistor för biblioteksposter. Hoppa över detta
steg om du vill infoga en bibliotekspost.
5
Gör något av följande:
• Dra resursen från panelen till designvyn. (Du kan dra skript till HEADområdet i dokumentfönstret. Om det området inte visas väljer du Visa >
Innehållet under HEAD.)
• Markera resursen i panelen och klicka på Infoga.
Resursen infogas i dokumentet. (Om resursen är en färg används den från och
med insättningspunkten, d.v.s. efterföljande text som du skriver kommer att
visas i den färgen.)
Så här ändrar du färgen på markerad text i ett dokument:
1
Markera kategorin Färger på resurspanelen.
2
Markera färgen som du vill använda.
3
Klicka på Använd.
Så här lägger du till en länk i den aktuella markeringen i ett dokument:
1
Markera kategorin URL på resurspanelen och gå till URL-adressen som du vill
använda.
2
Gör något av följande:
• Dra URL-adressen från panelen till markeringen i designvyn.
• Markera URL-adressen och klicka på Använd.
Så här använder du en mall på det aktiva dokumentet:
1
Markera kategorin Mallar på resurspanelen och gå till mallen som du vill
använda.
2
Gör något av följande:
• Dra mallen från panelen till designvyn.
• Markera mallen och klicka på Använd.
220
Kapitel 9
Ändra resursordningen
Resurser i en kategori ordnas som standard i alfabetisk ordning efter namn.
Resursnamnet kan vara filnamnet (som för bilder), ett hexadecimalt värde (som
för färger) eller en URL. Du kan också ordna resurserna efter något annat kriteria.
Så här visar du resurser i en annan ordning:
Klicka på någon av kolumnrubrikerna:
Om du exempelvis vill sortera bildlistan efter typ (så att alla GIF-bilder hamnar
tillsammans, alla JPEG-bilder hamnar tillsammans m.m.) klickar du på
kolumnrubriken Typ.
Så här ändrar du en kolumnbredd:
1
Placera pekaren över linjen som avgränsar två kolumnrubriker.
2
Dra i linjen så att kolumnbredden ändras.
Markera och redigera resurser
Med resurspanelen kan du markera flera resurser på en gång. Det är också enkelt
att börja redigera resurser.
Så här markerar du flera resurser:
1
Markera en resurs genom att klicka på den. Markera sedan de andra resurserna
på något av följande sätt:
• Skift-klicka om du vill markera en serie resurser som följer på varandra.
• Ctrl-klicka (Windows) eller Kommando-klicka (Macintosh) om du vill lägga
till enstaka resurser till markeringen (oavsett om de ligger bredvid den
befintliga markeringen eller inte). Ctrl-klicka (Windows) eller Kommandoklicka (Macintosh) på en markerad resurs om du vill avmarkera den.
Hantera och infoga resurser
221
Så här redigerar du en resurs:
1
Gör något av följande:
• Dubbelklicka på resursen.
• Markera resursen och klicka på Redigera.
För vissa typer av resurser, exempelvis bilder, startar ibland ett externt
redigeringsprogram när du börjar redigera. När det gäller färger och URLadresser kan du endast redigera resursens värde i favoritlistan. (Du kan inte
redigera färger och URL-adresser i platslistan.) Mallar och biblioteksposter
redigerar du i Dreamweaver.
Om en extern redigerare inte öppnas för en resurs som ska använda en, väljer
du Redigera > Inställningar och klickar på Filtyper/redigerare under Kategori.
Kontrollera att du har angett en extern redigerare för resursens filtyp. Se ”Starta
en extern redigerare” på sidan 294.
2
Ändra eventuellt resursen.
3
Gör något av följande när du har redigerat resursen:
• Om resursen är en filbaserad resurs (alla förutom färger och URL-adresser),
sparar du den (med redigeraren som du använde) och stänger den.
• Om resursen är en URL-adress klickar du på OK när du har redigerat färdigt i
dialogrutan Redigera URL.
Om resursen är en färg försvinner färgväljaren direkt när du har valt en färg.
(Tryck på Esc om du vill stänga färgväljaren utan att välja en färg.)
Arbeta med resurser och platser
Du kanske vill hitta en fil i platsfönstret som motsvarar en resurs på resurspanelen.
Detta kan vara användbart om du exempelvis vill överföra resursen till eller från
fjärrplatsen.
Alla resurser visas på resurspanelen (alla typer som känns igen) på den aktuella
platsen. (Den aktuella platsen är den plats som innehåller det aktiva dokumentet.)
Om du vill använda en resurs från den aktuella platsen på en annan plats, måste
du kopiera den till den andra platsen. Du kan kopiera en enstaka resurs, en
uppsättning resurser eller hela favoritmappen på en gång.
Obs! I platsfönstret kanske en annan plats än den som visas på resurspanelen visas. Detta
beror på att resurspanelen är associerad med det aktiva dokumentet. Du ser vilken plats
som visas på resurspanelen genom att titta på panelens namnlist.
222
Kapitel 9
Så här hittar du en resursfil i platsfönstret:
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på resursens namn eller
ikon på resurspanelen och välj Hitta på plats på snabbmenyn.
Platsfönstret visas med resursfilen markerad.
Kommandot Hitta på plats är inte tillgängligt för färger och URL-adresser som
inte motsvaras av filer på platsen.
Observera att kommandot Hitta på plats hittar filen som motsvarar resursen, inte
en fil som använder resursen.
Så här kopierar du resurser från platslistan eller favoritlistan till an annan plats:
1
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på resursens ikon
eller namn som du vill kopiera.
Från favoritlistan kan du kopiera en favoritmapp likväl som enstaka resurser.
2
Välj Kopiera till plats på snabbmenyn och välj målplatsnamn på undermenyn.
(På undermenyn visas alla definierade platser.)
Resurserna kopieras till den angivna platsen på motsvarande platser som du har
på den aktuella platsen. Nya mappar skapas i målplatsens mapphierarki, om det
behövs.
Resurserna läggs också till i målplatsens favoritlista.
När du öppnar ett dokument på målplatsen växlar resurspanelen till den
platsen och visar den kopierade resursen.
Obs! Om resursen som du kopierade är en färg eller en URL-adress, visas den endast i
målplatsens favoritlista, inte i målplatsens platslista. Detta beror på att det inte finns
någon fil som motsvarar färgen eller URL-adressen och det därför inte finns någon fil att
kopiera till målplatsen.
Använda favoritresurser
De flesta åtgärder som du utför i resurspanelen är desamma för platslistan som för
favoritlistan (se ”Använda resurspanelen” på sidan 216). Det finns däremot flera
åtgärder som du endast kan utföra i favoritlistan.
Eftersom platslistan på resurspanelen alltid visar alla resurser som känns igen på
platsen, kan listan bli ohanterlig för stora platser med många resurser. Om du
lägger till ofta använda resurser i favoritlistan kan du gruppera besläktade resurser,
ge dem smeknamn så att du lättare kommer ihåg vad de är till för och lättare hitta
dem i resurspanelen.
Obs! Favoritresurser sparas inte som separata filer på disken utan är referenser till
resurserna i platslistan. Dreamweaver håller reda på vilka resurser från platslistan som ska
visas i favoritlistan.
Hantera och infoga resurser
223
Lägga till och ta bort resurser från favoritlistan
Det finns flera sätt att lägga till resurser i platsens favoritlista.
Gör något av följande när du vill lägga till resurser i favoritlistan:
• Markera en eller flera resurser i platslistan och klicka på Lägg till i Favoriter.
• Markera en eller flera resurser i platslistan och välj Lägg till i Favoriter på
snabbmenyn.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på ett element i
designvyn i dokumentfönstret och välj ett kommando på snabbmenyn när du
vill lägga till elementet i en lämplig kategori i favoritlistan.
Du kan exempelvis markera en bild och välja Lägg till i Bildfavoriter på
snabbmenyn. Observera att snabbmenyn för text innehåller antingen Lägg till i
Färgfavoriter eller Lägg till i URL-favoriter, beroende på om texten har en
kopplad länk. Observera att endast element som passar en av kategorierna på
resurspanelen kan läggas till i favoritlistan.
• Markera en eller flera filer i platsfönstret och välj på Lägg till i Favoriter på
snabbmenyn. Filer som inte passar in i en kategori på resurspanelen ignoreras.
Oavsett vilken metod du väljer läggs resurserna till i favoritlistan och den visas i
resurspanelen.
Obs! Det finns ingen favoritlista för mallar och biblioteksposter.
Så här tar du bort resurser från favoritlistan:
1
Markera en eller flera resurser (eller en favoritmapp) i favoritlistan.
2
Klicka på Ta bort från Favoriter längst ned på resurspanelen.
Resurserna tas bort från favoritlistan, men de visas fortfarande i platslistan. Om
du tar bort en favoritmapp tas mappen och alla resurser i den mappen bort från
favoritlistan.
224
Kapitel 9
Skapa ett smeknamn för en favoritresurs
Du kan ge resurserna i favoritlistan smeknamn. Smeknamnet visas i stället för
resursens filnamn eller värde. Om du exempelvis har en färg med namnet
#999900 kan det vara mer praktiskt att använda ett mer beskrivande smeknamn,
exempelvis Sidbakgrundsfärg eller Viktigtextfärg.
Du kan endast ge resurserna i favoritlistan smeknamn. I platslistan visas resurserna
med sina riktiga filnamn (eller värden, om det är färger eller URL-adresser).
Så här ger du en favoritresurs ett smeknamn:
1
Klicka på kategorin som innehåller resursen.
2
Klicka på Favoriter så att favoritlistan visas.
3
Gör något av följande:
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på resursens namn
eller ikon på resurspanelen och välj Redigera smeknamn på snabbmenyn.
• Klicka på resursens namn en gång, vänta lite och klicka sedan igen.
(Dubbelklicka inte.)
4
Skriv smeknamnet och tryck på Retur.
Smeknamnet visas i kolumnen Smeknamn.
Gruppera resurser i en favoritmapp
I favoritlistan inom en viss kategori kan du skapa namngivna resursgrupper som
kallas favoritmappar. Om du exempelvis har en uppsättning bilder som du
använder på många katalogsidor på en e-handelsplats, kan du gruppera dem
tillsammans i en mapp och kalla den KatalogBilder.
Obs! När du placerar en resurs i en favoritmapp ändras inte placeringen av resursens fil på
hårddisken.
Så här skapar du en favoritmapp:
1
Klicka på Favoriter (högst upp på resurspanelen) så att favoritlistan visas.
2
Klicka på Ny Favoriter-mapp.
3
Ge mappen ett namn.
4
Dra resurser till mappen.
Hantera och infoga resurser
225
Skapa en ny färg, URL-adress, mall eller bibliotekspost
Du kan använda resurspanelen om du vill skapa färger, URL-adresser, mallar och
biblioteksposter. Observera att du inte kan lägga till nya färger och URL-adresser
till platslistan. Platslistan innehåller endast resurser som används på platsen.
Så här skapar du en ny färg:
1
Klicka på kategorin Färger.
2
Klicka på Favoriter så att favoritlistan visas.
3
Klicka på Ny färg.
4
Välj en färg med hjälp av färgväljaren.
Tryck på Esc om du vill stänga färgväljaren utan att välja en färg. Du kan också
klicka på det gråa fältet högst upp i färgväljaren. (Mer information om hur du
använder färgväljaren finns i ”Arbeta med färger” på sidan 83.)
5
Ge färgen ett smeknamn om det behövs.
Så här skapar du en ny URL:
1
Klicka på kategorin URL.
2
Klicka på Favoriter så att favoritlistan visas.
3
Klicka på Ny URL.
4
Ange en URL-adress och ett smeknamn i dialogrutan Lägg till URL och klicka
på OK.
Så här skapar du en ny mall:
1
Klicka på kategorin Mall.
2
Klicka på Ny mall.
Mer information om hur du skapar nya mallar finns i ”Återanvända innehåll
med mallar och bibliotek” på sidan 371.
Gör något av följande när du vill skapa en ny bibliotekspost:
• Klicka på kategorin Bibliotek, Klicka sedan på Ny bibliotekspost.
• Markera ett element eller text i designvyn i dokumentfönstret och dra
elementet eller texten till resurspanelen. Oavsett vilken typ av element som du
drar till resurspanelen skapas en ny bibliotekspost som innehåller det
elementet.
Mer information om hur du skapar nya biblioteksposter finns i ”Återanvända
innehåll med mallar och bibliotek” på sidan 371.
226
Kapitel 9
10
KAPITEL 10
Infoga och formatera text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Du formaterar i Dreamweaver på ungefär samma sätt som i vanliga
ordbehandlare. Använd undermenyn Text > Styckeformat eller listrutan
Formatera i egenskapskontrollen när du vill ange standardformat (Stycke,
Förformaterad, Rubrik 1, Rubrik 2 o.s.v.) för ett block med text. Om du vill ändra
teckensnitt, storlek, färg och justering för markerad text använder du Text-menyn
eller egenskapskontrollen. Om du vill tillämpa formatering som exempelvis fet,
kursiv, kod, understruken o.s.v. använder du undermenyn Text > Stil.
Du kan också kombinera flera standard-HTML-koder så att de bildar ett format.
Detta kallas ett HTML-format. Du kan exempelvis manuellt använda HTMLformatering med en kombination av koder och attribut och sedan spara
formateringen som ett HTML-format. Det sparas då på HTML-formatpanelen.
Nästa gång du vill formatera text med denna kombination av HTML-koder kan
du helt enkelt ange det sparade formatet på HTML-formatpanelen. HTMLformat stöds i så gott som alla webbläsare och sparar tid jämfört med att formatera
text manuellt.
Med en annan typ av format, som kallas CSS-format (Cascading Style Sheets),
kan du använda text- och sidformatering som har fördelen att den uppdateras
automatiskt. Du kan spara CSS-format direkt i dokumentet eller, för större
användbarhet och flexibilitet, i en extern formatmall. Om du kopplar en extern
formatmall till flera webbsidor uppdateras alla sidor automatiskt när du gör
ändringar i formatmallen. Använd CSS-formatpanelen när du vill komma åt CSSformat.
Med manuell HTML-formatering och HTML-format använder du en
formatering med standard-HTML-koder (exempelvis B, FONT och CODE) som stöds i
alla vanliga webbläsare. Med CSS-format definieras formateringen för all text i en
viss klass eller omdefinieras formateringen för en viss kod (exempelvis H1, H2, P
eller LI). CSS stöds endast i följande webbläsare: Netscape Navigator 4.0 och
senare och Microsoft Internet Explorer 4.0 och senare.
227
Du kan använda CSS-format, HTML-format och manuell HTML-formatering
på samma sida. Manuell HTML-formatering åsidosätter formatering med ett
HTML- eller CSS-format. Så även om det är arbetsintensivt kan det vara ett
praktiskt sätt att ändra formatering som gjorts med HTML- eller CSS-format.
Dessutom åsidosätter CSS-format på sidan externa CSS-format. Se ”Använda
CSS-formatmallar” på sidan 243.
Infoga text och objekt
Lägg till innehåll på sidorna genom att skriva eller klistra in text och infoga objekt
som exempelvis bilder, tabeller och skikt.
Gör något av följande när du vill lägga till text i dokumentet:
• Skriv texten direkt i dokumentfönstret.
• Kopiera text från ett annat program, växla till Dreamweaver, placera
insättningspunkten i designvyn i dokumentfönstret och välj Redigera > Klistra
in. Textformatering som har gjorts i ett annat program bevaras inte i
Dreamweaver, vilket däremot radbrytningarna görs.
Gör något av följande när du vill infoga tabeller, tabelldata, bilder och andra objekt
i dokumentet:
• Använd kommandona på Infoga-menyn när du vill infoga de angivna objekten
i dokumentet vid insättningspunkten.
• Välj Fönster > Objekt så att objektpanelen öppnas. Sök efter önskad objekttyp
och klicka på eller dra den så att objektet infogas i dokumentfönstret.
För de flesta objekt visas en dialogruta där du uppmanas att välja alternativ eller
en fil. Om du inte vill att dessa dialogrutor ska visas väljer du Redigera >
Inställningar, markerar kategorin Allmänt och avmarkerar alternativet Visa
dialogrutan vid infogning av objekt.
Obs! Om du vill infoga flera mellanslag i rad väljer du Infoga > Specialtecken > Hårt
mellanslag (Ctrl+Skift+Blanksteg) eller trycker på Retur. (Använd dock en tabell i stället om
du vill rada upp objekt i kolumner.)
Du kan importera tabelldata i dokumentet genom att först spara de aktuella
filerna (exempelvis Microsoft Excel-filer eller en databas) som avgränsade textfiler.
Så här importerar du tabelldata:
1
Välj Arkiv > Importera > Importera tabelldata eller Infoga > Tabelldata.
Dialogrutan Importera tabelldata visas.
2
228
Kapitel 10
Bläddra efter önskad fil eller skriv dess namn i textfältet.
3
Markera vilken avgränsare som användes när filen sparades som avgränsad text.
Alternativen är Tabb, Komma, Semikolon, Kolon och Annan.
• Om du markerar Annan visas ett tomt fält bredvid alternativet. Ange tecknet
som användes som avgränsare.
4
Använd övriga alternativ för att formatera eller definiera den tabell som
tabelldata ska importeras till.
5
Klicka på OK när du är klar.
Infoga datum
I Dreamweaver finns ett datumobjekt som infogar aktuellt datum i vilket format
som helst (med eller utan klockslag). Du får också möjlighet att uppdatera detta
datum varje gång du sparar filen.
Obs! Tänk på att de datum och klockslag som visas i dialogrutan Infoga datum inte är de
aktuella tidsuppgifterna och att de inte heller motsvarar de datum och klockslag som
användarna ser när de besöker din webbplats. De är endast exempel på hur du vill visa
denna information.
Så här infogar du aktuellt datum i ett dokument:
1
Placera insättningspunkten där du vill att datumet ska infogas i
dokumentfönstret.
2
Gör något av följande:
• Välj Infoga > Datum.
• Välj Fönster > Objekt så att objektpanelen visas, öppna kategorin Vanlig och
klicka på ikonen Infoga datum.
3
I dialogrutan som visas anger du ett format för veckodagsnamnet, ett
datumformat och ett tidsformat.
4
Markera Uppdatera automatiskt när du sparar om du vill att det infogade
datumet ska uppdateras varje gång du sparar dokumentet. Avmarkera
alternativet om du vill att datumet ska vara vanlig text när det infogas och att
det aldrig ska uppdateras automatiskt.
5
Klicka på OK när du vill infoga datumet.
Tips! Om du har markerat Uppdatera automatiskt när du sparar kan du redigera
datumformatet efter att det har infogats i dokumentet genom att klicka på den formaterade
texten och markera Redigera datumformat i egenskapskontrollen.
Infoga och formatera text
229
Specialtecken
Vissa specialtecken motsvaras i HTML-koden av ett namn eller ett nummer som
kallas en enhet. I HTML finns det enhetsnamn för tecken som exempelvis
copyrightsymbolen (&copy;), &-tecknet (&amp;) och symbolen för registrerat
varumärke (&reg;). Varje enhet har både ett namn (exempelvis &mdash;) och ett
motsvarande numeriskt värde (exempelvis &#151;).
Tips! I HTML används vinkelparenteserna <> i koden, men du kan ibland behöva ange
specialtecknen för större än eller mindre än utan att de tolkas som kod i Dreamweaver.
Använd i sådana fall &gt; för större än (>) och &it; för mindre än (<).
Olyckligtvis finns det många webbläsare (särskilt äldre webbläsare och andra
webbläsare än Navigator och Internet Explorer) som inte kan visa flera av de
namngivna enheterna på rätt sätt. De flesta webbläsare visar de mest
förekommande numeriska enheterna, men det är svårare att komma ihåg en
enhets nummer än att komma ihåg dess namn.
Infoga specialtexttecken
Du kan infoga flera specialtecken (som HTML-enheter) genom att välja kategorin
Tecken på objektpanelen.
Så här infogar du ett specialtecken i ett dokument:
1
Placera insättningspunkten där du vill infoga ett specialtecken i
dokumentfönstret.
2
Gör något av följande:
• Välj teckennamnet på undermenyn Infoga > Specialtecken.
• Öppna objektpanelen (genom att välja Fönster > Objekt), välj kategorin
Tecken på popup-menyn och klicka på önskat tecken.
Det finns många andra specialtecken att välja bland. Om du vill använda ett av
dem väljer du Infoga > Specialtecken > Annan, markerar ett tecken och klickar på
OK.
230
Kapitel 10
Kopiera och klistra in HTML-källkod i Dreamweaver
Du kan kopiera och klistra in HTML-källkod från ett annat program eller från
själva kodvyn. Du kan välja mellan att kopiera och klistra in HTML-koden som
text eller som kod med intakta koder, beroende på hur du kopierar och klistrar in
den.
Så här kopierar du HTML-källkod och klistrar in den i kodvyn:
1
Kopiera koden från ett annat program (exempelvis BBEdit eller HomeSite)
eller från kodvyn eller kodkontrollen i Dreamweaver, och placera
insättningspunkten i kodvyn.
2
Välj Redigera > Klistra in och klicka på Uppdatera design i verktygsfältet.
Kopiera exempelvis HTML-källkoden för en tabell från BBEdit och klistra in
den i kodvyn i Dreamweaver så att den visas som en tabell i designvyn.
Om du vill att HTML-källkoden ska visas som text placerar du
insättningspunkten i designvyn direkt och väljer Redigera > Klistra in för att
klistra in koden som text. Du kan exempelvis välja att göra detta om
Dreamweaver-dokumentet innehåller instruktioner om hur man skriver HTML
och du vill att koden ska visas som text i dokumentet.
Så här kopierar du och klistrar in HTML-källkod:
1
Markera och kopiera koden från ett annat program.
2
Placera insättningspunkten i designvyn och välj
Redigera > Klistra in HTML.
Du kan också markera ett objekt i designvyn, exempelvis en tabell, och välja
Redigera > Kopiera HTML. Du kan sedan klistra in objektet i ett annat program
som HTML-källkod. Mer information om hur du redigerar HTML-källkod finns
i ”Skriva och redigera kod” på sidan 329.
Infoga och formatera text
231
Skapa listor
Du kan skapa numrerade listor, punktade listor och definitionslistor från befintlig
text eller från ny text när du skriver i dokumentfönstret. Definitionslistor saknar
inledande tecken som exempelvis punkter eller nummer och används ofta för
ordlistor och beskrivningar. Listor kan också vara kapslade. Kapslade listor är listor
som innehåller andra listor. Det kan hända att du exempelvis vill att en numrerad
eller punktad lista ska kapslas i en annan lista.
Så här skapar du en ny lista:
1
Placera i designvyn insättningspunkten på den rad där du vill lägga till en lista
över nya poster.
2
Klicka på knappen för punktad lista eller numrerad lista i egenskapskontrollen
eller välj Text > Lista och sedan en listtyp: Punktad lista, Numrerad lista eller
Definitionslista.
Du kan infoga en lista i kodvyn genom att använda Text-menyn, men då läggs
bara de första och sista HTML-listkoderna till. Du måste sedan koda de
enskilda listposterna manuellt.
3
Börja skriva listan och tryck på Retur när du vill påbörja en ny listpost.
4
När du är klar med listan trycker du två gånger på Retur.
Så här skapar du en lista av befintlig text:
1
Markera en serie stycken som du vill göra till en lista.
2
Klicka på knappen för punktad lista eller numrerad lista i egenskapskontrollen
eller välj Text > Lista och sedan en listtyp: Punktad lista, Numrerad lista eller
Definitionslista.
Så här skapar du en kapslad lista:
1
Markera listposterna du vill kapsla.
2
Klicka på Indrag i egenskapskontrollen eller välj Text > Indrag.
Indrag görs för texten och en separat lista med den ursprungliga listans
HTML-attribut skapas.
3
232
Kapitel 10
Använd en ny listtyp eller stil på den indragna texten genom att följa samma
procedur som ovan.
Ange teckensnitt, stil, färg och justering
Du kan använda HTML-textformatering på en bokstav eller skapa en hel plats
med hjälp av kommandon på menyn Text > Styckeformat eller alternativ i
egenskapskontrollen. Denna manuella formatering ersätter eller åsidosätter
formatering som har angetts med ett HTML- eller CSS-format.
När du tillämpar HTML-textformatering använder du egenskapskontrollen och
kommandona på Text-menyn, exempelvis Text > Styckeformat och Text > Stil.
Ange och ändra teckensnitt och stil
Använd egenskapskontrollen eller Text-menyn när du vill ange eller ändra
teckensnittsegenskaper för markerad text.
Så här anger eller ändrar du egenskaper för teckensnitt:
1
Markera texten. Om ingen text är markerad tillämpas ändringen på all
efterföljande text du skriver.
2
Välj bland följande alternativ:
• Om du vill ändra teckensnitt väljer du en teckensnittskombination i
egenskapskontrollen eller på undermenyn Text > Teckensnitt.
I webbläsare visas texten i det första av kombinationens teckensnitt som finns
installerat på användarens dator. Om inget av teckensnitten i kombinationen är
installerat visas texten enligt inställningarna i webbläsaren. (Se även ”Ändra
teckensnittskombinationer” på sidan 236.) Välj Standard om du vill ta bort
tidigare tillämpade teckensnitt. Då tillämpas standardteckensnittet för den
markerade texten (antingen webbläsarens standardteckensnitt eller det
teckensnitt som koden har tilldelats i CSS-formatmallen).
• Om du vill ändra teckensnittsstil klickar du på Fet eller Kursiv i
egenskapskontrollen eller väljer en stil (Fet, Kursiv, Understruken o.s.v.) på
undermenyn Text > Stil.
• Om du vill ändra teckenstorlek väljer du en storlek (mellan 1 och 7) i
egenskapskontrollen eller på undermenyn Text > Storlek.
HTML-teckenstorlekar är relativa, icke-specifika punktstorlekar. Användarna
ställer själva in punktstorleken på standardteckensnittet för sina webbläsare.
Det är denna teckenstorlek de kommer att se när du väljer Standard eller 3 i
egenskapskontrollen eller på undermenyn Text > Storlek. Teckensnitt i
storleken 1 och 2 är mindre än standardstorleken, storlek 4 till och med 7 är
större. Dessutom ser teckensnitt vanligtvis större ut i Windows än på
Macintosh, trots att samma standardstorlek används på de båda plattformarna.
• Du ökar eller minskar storleken på markerad text genom att välja en relativ
storlek (+/–1 till +4/–3) i egenskapskontrollen eller på undermenyn Text >
Storleksändring.
Infoga och formatera text
233
Obs! Ett sätt att se till att teckenstorleken blir konsekvent är att använda CSS-format
med teckenstorleken angiven i bildpunkter. Mer information om CSS finns i ”Använda
CSS-formatmallar” på sidan 243.
Dessa nummer anger en relativ skillnad från storleken på basteckensnittet
(basefont). Standardvärdet för basefont är 3. Ett värde på +4 resulterar därför i
en teckenstorlek på 3 + 4, d.v.s. 7. Högre än 7 kan inte teckenstorleken bli. Om
du anger högre värden visas de som 7. Koden BASEFONT (den ingår i HEAD-delen)
visas inte i Dreamweaver, men teckenstorleken bör visas korrekt i en
webbläsare. Du kan testa detta genom att jämföra text med värdet 3 och text
med värdet +3.
Använda stycken och rubriker
Använd listrutan Formatera i egenskapskontrollen eller undermenyn Text >
Styckeformat när du vill tillämpa standardkoderna för stycken och rubriker. (Om
du vill omdefiniera utseendet på stycke- och rubrikkoder använder du CSSformatmallar. Se ”Använda CSS-formatmallar” på sidan 243.)
Så här använder du en stycke- eller rubrikkod:
1
Placera insättningspunkten i stycket eller markera en del av texten i stycket.
2
Välj ett alternativ på undermenyn Text > Styckeformat eller i listrutan
Formatera i egenskapskontrollen:
• Välj ett styckeformat (exempelvis Rubrik 1, Rubrik 2, Förformaterad o.s.v.).
Den HTML-kod som är associerad med det markerade formatet (exempelvis H1
för Rubrik 1, H2 för Rubrik 2, PRE för Förformaterad text o.s.v.) används på hela
stycket.
• Välj Inget om du vill ta bort ett styckeformat.
234
Kapitel 10
Ändra textfärgen
Du kan ändra färg på markerad text så att den nya färgen åsidosätter textfärgen
som är angiven i sidegenskaperna. (Om det inte har angetts någon textfärg i
sidegenskaperna används svart som standardfärg på text.)
Så här ändrar du textfärgen:
1
Markera texten.
2
Välj bland följande alternativ:
• Välj en webbsäker färg på paletten genom att klicka på färgväljaren i
egenskapskontrollen.
• Välj Text > Färg. Dialogrutan för systemets färgväljare visas. Markera en färg
och klicka på OK.
• Skriv färgens namn eller hexadecimala värde direkt i fältet i
egenskapskontrollen.
• Om du vill definiera standardfärgen för text väljer du Ändra > Sidegenskaper.
Se ”Definiera standardtextfärger” på sidan 147.
Så här återställer du text till standardfärgen:
1
Öppna paletten med webbsäkra färger genom att klicka på färgväljaren i
egenskapskontrollen.
2
Klicka på knappen Standardfärg (den vita, fyrkantiga knappen längst upp till
höger med en diagonal röd linje).
Justera text
Justera text på sidan med hjälp av egenskapskontrollen eller undermenyn Text >
Justera. Centrera element på en sida med kommandot Text > Justera > Centrerat.
Så här justerar du text:
1
Markera texten du vill justera eller placera bara pekaren i början av texten.
2
Klicka på ett justeringsalternativ (vänster, höger eller centrerat) i
egenskapskontrollen eller välj Text > Justera och sedan ett
justeringskommando.
Så här centrerar du element:
1
Markera elementet (bild, insticksprogram, tabell eller annat sidelement).
2
Välj Text > Justera > Centrerat.
Obs! Du kan justera och centrera hela textblock men inte delar av en rubrik eller ett stycke.
Infoga och formatera text
235
Så här gör och tar du bort indrag:
1
Markera texten.
2
Klicka på Indrag eller Minska indrag i egenskapskontrollen, välj Text > Indrag
eller Minska indrag eller välj Lista > Indrag eller Minska indrag på
snabbmenyn.
Detta infogar eller tar bort koden BLOCKQUOTE om den markerade texten är ett
stycke eller en rubrik. Om den markerade texten är en lista läggs en extra ULeller OL-kod till eller tas bort.
Ändra teckensnittskombinationer
Använd kommandot Redigera teckensnittslista när du vill ange vilka
teckensnittskombinationer som ska visas i egenskapskontrollen och på
undermenyn Text > Teckensnitt.
Teckensnittskombinationer anger hur webbsidans text ska visas i webbläsare. I en
webbläsare används det första av kombinationens teckensnitt som finns installerat
på användarens dator. Om inget av teckensnitten i kombinationen är installerat
visas texten enligt användarens inställningar i webbläsaren.
Så här ändrar du teckensnittskombinationer:
1
Välj Text > Teckensnitt > Redigera teckensnittslista.
2
Markera teckensnittskombinationen i listan överst i dialogrutan.
Teckensnitten i den markerade kombinationen visas i listan Valda teckensnitt
längst ned till vänster i dialogrutan. Till höger om den finns en lista över alla
tillgängliga teckensnitt som är installerade på datorn.
3
Välj bland följande alternativ:
• Om du vill lägga till eller ta bort teckensnitt från en teckensnittskombination
klickar du på knappen << eller >> mellan listorna Valda teckensnitt och
Tillgängliga teckensnitt.
• Om du vill lägga till eller ta bort en teckensnittskombination klickar du på
plustecknet (+) eller minustecknet (–) överst i dialogrutan.
• Om du vill lägga till ett teckensnitt som inte är installerat på datorn skriver du
teckensnittsnamnet i textfältet nedanför listan Tillgängliga teckensnitt. Sedan
klickar du på knappen << för att lägga till teckensnittet i kombinationen. Det
kan vara praktiskt att lägga till ett teckensnitt som inte är installerat om du
exempelvis vill ange ett Windows-specifikt teckensnitt när du skapar webbsidan
på en Macintosh.
• Du flyttar teckensnittskombinationen uppåt eller nedåt i listan genom att
klicka på pilknapparna överst i dialogrutan.
236
Kapitel 10
Så här lägger du till en ny kombination i teckensnittslistan:
1
Välj Text > Teckensnitt > Redigera teckensnittslista.
2
Markera ett teckensnitt i listan Tillgängliga teckensnitt och klicka på knappen
<< för att flytta teckensnittet till listan Valda teckensnitt.
3
Upprepa steg 2 för varje efterföljande teckensnitt i kombinationen.
Om du vill lägga till ett teckensnitt som inte är installerat på datorn skriver du
teckensnittsnamnet i textfältet nedanför listan Tillgängliga teckensnitt. Sedan
klickar du på knappen << för att lägga till teckensnittet i kombinationen. Det
kan vara praktiskt att lägga till ett teckensnitt som inte är installerat om du
exempelvis vill ange ett Windows-specifikt teckensnitt när du skapar webbsidan
på en Macintosh.
4
När du har valt specifika teckensnitt markerar du en allmän teckensnittsfamilj
under Tillgängliga teckensnitt och flyttar den till listan Valda teckensnitt
genom att klicka på knappen <<.
Allmänna teckensnittsfamiljer innehåller stilarna kursiv, fantasi, fast breddsteg,
sans-serif och serif. Om inget av teckensnitten i listan Valda teckensnitt finns på
användarens dator, visas texten i det standardteckensnitt som är associerat med
den allmänna teckensnittsfamiljen. Standardteckensnittet för fast breddsteg är
exempelvis Courier på de flesta datorer.
Använda vågräta linjer
Vågräta linjer är användbara när du ordnar information. På en sida kan du visuellt
separera text och objekt med en eller flera linjer.
Så här skapar du en vågrät linje:
1
Placera insättningspunkten där du vill infoga en vågrät linje i
dokumentfönstret.
2
Gör något av följande:
• Välj Infoga > Vågrät linje.
• Välj Fönster > Objekt så att objektpanelen öppnas och klicka sedan på knappen
Infoga vågrät linje i kategorin Vanlig.
Så här ändrar du en vågrät linje:
1
Markera den vågräta linjen i dokumentfönstret.
2
Välj Fönster > Egenskaper så att egenskapskontrollen öppnas och ändra sedan
egenskaperna.
Infoga och formatera text
237
Formatera text med HTML-format
Ett HTML-format definieras av en eller flera HTML-koder (exempelvis B, I, FONT
och CENTER) som tillämpar formatering på text. HTML 4.0-specifikationen som
släpptes av World Wide Web Consortium (W3C) tidigt år 1998 avråder från att
använda HTML-formateringskoder och rekommenderar i stället CSSformatmallar. I praktiken har dock HTML-formateringskoder stöd i fler
webbläsare än vad CSS-formatmallar har. Så även om de ger en mer begränsad
kontroll över utseendet än CSS-formatmallar och tar längre tid att läsa in kommer
webbutvecklare sannolikt att använda sig av dem så länge webbläsare i version 3.0
och tidigare utgör en stor del av webbtrafiken.
Mer specifik information om hur du formaterar med HTML-koder finns i
följande avsnitt:
• ”Ange och ändra teckensnitt och stil” på sidan 233
• ”Ändra textfärgen” på sidan 235
• ”Justera text” på sidan 235
HTML-koder som definierar strukturen på dokumentet i stället för utseendet,
exempelvis rubriker, stycken och listor, är ändå i högsta grad en del av HTMLspecifikationen. Faktum är att om du planerar att använda CSS-formatmallar för
att definiera teckensnittsegenskaperna på sidan är det viktigt att använda
standardrubrikkoder, eftersom de hjälper till att bevara strukturen på sidan i
webbläsare som inte stöder CSS-formatmallar. (Om du vill se ett exempel på hur
detta fungerar kan du visa Dreamweavers hjälp i en 3.0-webbläsare.) Se ”Använda
stycken och rubriker” på sidan 234.
Använda HTML-format
Använd HTML-format när du vill spara text- och styckeformatering som du vill
använda på andra ställen i dina dokument. När du har skapat ett HTML-format
baserat på en eller flera HTML-koder kan du använda den formateringen igen på
andra texter i andra dokument med hjälp av HTML-formatpanelen.
Snabbmeny
Ta bort format
Tillämpa automatiskt
238
Kapitel 10
Nytt format
Till skillnad från CSS-format påverkar formatering med HTML-format endast
text som du använder den på eller text som du skapar med ett markerat HTMLformat. Om du ändrar formateringen av ett HTML-format som du har skapat,
uppdateras inte text som tidigare har formaterats med detta format. Om du vill ha
möjlighet att ändra formatering och uppdatera alla förekomster av den
automatiskt, ska du använda CSS-format. Se ”Använda CSS-formatmallar” på
sidan 243.
Om du vill visa HTML-referensboken O’Reilly som ingår i Dreamweaver klickar
du på knappen Referens i verktygsfältet och väljer O’Reilly HTML Referens i
listrutan.
Du kan använda HTML-formatpanelen för att spara de HTML-format som du
använder på platsen och sedan dela dem med andra användare, lokala platser eller
fjärrplatser.
Gör något av följande när du vill visa HTML-formatpanelen:
• Välj Fönster > HTML-format.
• Klicka på ikonen HTML-format bland startknapparna eller
ministartknapparna.
Så här visar du ett befintligt HTML-format:
1
Markera ett format på HTML-formatpanelen.
Observera att Ta bort styckeformat och Ta bort markerat format används på
text som har ett tillämpat format, men de är inte själva format. De kan inte
visas eller redigeras.
2
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på HTML-formatet
på HTML-formatpanelen och välj Redigera på snabbmenyn. Du kan också
dubbelklicka på HTML-formatet.
3
Gör inställningar för formatet i dialogrutan Definiera HTML-format.
Alternativen Tillämpa på anger om formatet gäller den markerade texten
(Markering) eller det aktuella textblocket (Stycke). Alternativen Vid
tillämpning anger om inställningarna för formatet läggs till i den ursprungliga
textformateringen (Lägg till i befintligt format) eller om den befintliga
formateringen tas bort och ersätts med de nya inställningarna (Radera befintligt
format).
Infoga och formatera text
239
Så här använder du ett befintligt HTML-format:
Markera ett format på HTML-formatpanelen.
• Om kryssrutan Tillämpa automatiskt längst ned på panelen är markerad klickar
du på formatet.
• Om kryssrutan Tillämpa automatiskt inte är markerad klickar du på formatet
och sedan på Verkställ.
Så här tar du bort textformatering i dokumentet:
1
Markera den formaterade texten.
2
Klicka på Ta bort styckeformat eller Ta bort markerat format på HTMLformatpanelen.
När du använder Ta bort styckeformat tas all formatering bort i det aktuella
textblocket i dokumentet. När du använder Ta bort markerat format tas all
formatering bort i den markerade texten.
Obs! Du kan använda Ta bort styckeformat och Ta bort markerat format för att ta bort alla
typer av formatering (förutom CSS-formatering), oavsett hur den ursprungliga
formateringen tillämpades (exempelvis med hjälp av HTML-formatpanelen eller
egenskapskontrollen).
Så här tar du bort ett format från HTML-formatpanelen:
1
Avaktivera alternativet Tillämpa automatiskt på HTML-formatpanelen genom
att avmarkera kryssrutan.
2
Markera ett HTML-format.
3
Klicka på ikonen Ta bort format (soptunnan) längst ned till höger på panelen.
Så här skapar du ett nytt HTML-format baserat på en befintlig text:
240
Kapitel 10
1
I dokumentet markerar eller skapar du text med den formatering du vill
använda som grund för det nya HTML-formatet. Du kan använda
egenskapskontrollen för att visa och använda formatering.
2
Klicka på ikonen Nytt format (plustecknet) längst ned till höger på HTMLformatpanelen.
3
I dialogrutan Definiera HTML-format ger du formatet ett namn och justerar
formateringen, om det behövs.
• Ange om HTML-formatet ska användas på markerad text eller på hela stycket.
Observera att ett styckeformat används på hela det textblock där
insättningspunkten är placerad, oavsett vilken text som är markerad.
• Ange om du vill använda HTML-formatet tillsammans med det befintliga
formatet (CSS eller HTML) för den markerade texten eller stycket eller om du
vill ersätta formateringen i markeringen med det nya HTML-formatet. Tänk
på hierarkin när du använder format: HTML-format gäller före CSS-format,
som i sin tur gäller före externa CSS-format. Se ”Använda CSS-formatmallar”
på sidan 243.
Notera att formateringsalternativen på HTML-formatpanelen matchar dem i
egenskapskontrollen.
4
Klicka på OK.
Så här skapar du ett nytt HTML-format baserat på ett befintligt HTML-format:
1
Kontrollera att ingen text är markerad i dokumentfönstret.
2
Markera ett format på HTML-formatpanelen och gör sedan något av följande:
• Klicka på triangeln längst upp till höger på panelen så att snabbmenyn visas.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på formatet och välj
Duplicera på snabbmenyn.
Dialogrutan Definiera HTML-format visas. Återställ dialogrutan till
standardalternativen genom att klicka på Radera.
3
Genomför steg 3 och 4 i instruktionerna om hur du skapar ett nytt format
baserat på befintlig text.
Så här skapar du ett nytt HTML-format från grunden:
1
Klicka på ikonen Nytt format på HTML-formatpanelen. Du kan också välja
Text > HTML-format > Nytt format.
Dialogrutan Definiera HTML-format visas.
2
Genomför steg 3 och 4 i instruktionerna om hur du skapar ett nytt format
baserat på befintlig text.
Återställ dialogrutan till standardalternativen genom att klicka på Radera.
3
Klicka på OK.
Infoga och formatera text
241
Så här redigerar du ett befintligt HTML-format:
1
Kontrollera att ingen text är markerad i dokumentfönstret.
2
Se till att kryssrutan Tillämpa automatiskt är avmarkerad på HTMLformatpanelen.
Om funktionen Tillämpa automatiskt är aktiverad används HTML-formatet
när du markerar det på HTML-formatpanelen.
3
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på formatet på
HTML-formatpanelen och välj Redigera på snabbmenyn.
Dialogrutan Definiera HTML-format visas. Återställ dialogrutan till
standardalternativen genom att klicka på Radera.
När du redigerar ett HTML-format uppdateras inte text som tidigare har
formaterats med detta HTML-format automatiskt. Om du vill uppdatera
formatering som har gjorts med ett format använder du en CSS-formatmall. Se
”Använda CSS-formatmallar” på sidan 243.
Så här delar du HTML-format med andra platser eller användare:
1
Välj Fönster > Platsens filer så att platsfönstret öppnas i vyn över platsens filer.
2
Öppna platsens rotmapp i den högra rutan och sedan biblioteksmappen.
Där hittar du en fil med namnet styles.xml. Denna fil innehåller alla HTMLformat för platsen. Du kan skicka, hämta, checka in, checka ut och kopiera
denna fil på samma sätt som alla andra filer på platsen. Du kan också skapa
Design Notes för filen styles.xml. Observera att du måste checka ut filen
styles.xml innan du kan skapa eller redigera ett format för en fjärrplats.
Mer information om hur du använder dessa alternativ finns i ”Skapa en
fjärrplats” på sidan 119.
242
Kapitel 10
Använda CSS-formatmallar
Ett format är en grupp formateringsattribut som styr utseendet på ett textintervall
i ett enskilt dokument. En CSS-formatmall (Cascading Style Sheets) kan användas
när du vill styra flera dokument samtidigt. Den innehåller alla format för ett
dokument. Fördelen med att använda en CSS-formatmall i stället för ett HTMLformat är, förutom att den är länkad till flera dokument, att när ett CSS-format
uppdateras eller ändras uppdateras automatiskt även formateringen av samtliga
dokument som använder denna formatmall.
Tänk dig exempelvis att du hanterar en mycket stor webbplats som Yahoo eller
Macromedia.com och vill ändra teckensnitt och formatering för hela platsen eller
flera sidor. Det kan du då göra snabbt och exakt med hjälp av CSS-format. Med
CSS-format kan du också styra många egenskaper som inte kan styras med enbart
HTML-kod. Du kan exempelvis ange egna listpunkter och olika teckenstorlekar
och enheter (bildpunkter, punkter osv.). Genom att använda CSS-format och
ange teckenstorlekar i bildpunkter kan du se till att sidlayouten blir mer enhetlig i
olika webbläsare.
CSS-format har funnits ett bra tag nu, men många webbplatsutvecklare har
ogärna använt dem på grund av att de inte stöds i alla webbläsare. Om din
målgrupp består av användare med webbläsare som stöder CSS-format (4.0 och
senare) bör du dock utnyttja den effektivitet och kontroll som de ger dig.
CSS-format identifieras med namn eller HTML-kod, vilket gör att du kan ändra
ett attribut för ett format och direkt se hur ändringen utförs i all text som formatet
gäller för. CSS-format i HTML-dokument kan styra de flesta av de vanliga
textformateringsattributen, exempelvis teckensnitt, storlek och justering. CSSformat kan också ange unika HTML-attribut, exempelvis placering,
specialeffekter och musöverrullningar.
CSS-formatmallar finns i HEAD-delen i ett dokument. CSS-format kan definiera
formateringsattribut för HTML-koder, textintervall som identifieras av ett CLASSattribut eller text som uppfyller villkoren i CSS-specifikationen. Dreamweaver
känner igen format som definieras i befintliga dokument så länge de följer
riktlinjerna för CSS-format.
CSS-formatmallar fungerar i webbläsare från och med version 4.0. En del CSSformatmallar känns igen Internet Explorer 3.0, men de ignoreras i de flesta
tidigare webbläsare.
Infoga och formatera text
243
Tre typer av CSS-formatmallar finns i Dreamweaver:
• Anpassade CSS-format liknar de format du använder i en ordbehandlare,
förutom att det inte finns någon skillnad mellan tecken- och styckeformat. Du
kan använda anpassade CSS-format på alla textintervall och textblock. Om
CSS-formatet används på ett textblock (exempelvis ett helt stycke eller en lista)
läggs attributet CLASS till i koden för textblocket (exempelvis p
class="mittFormat" eller ul class="mittFormat"). Om CSS-formatet tillämpas
på ett textintervall infogas SPAN-koder som innehåller attributet CLASS runt den
markerade texten. Se ”Använda ett anpassat CSS-format (klass)” på sidan 249.
• HTML-kodformat omdefinierar formateringen för en viss kod, exempelvis H1.
När du skapar eller ändrar ett CSS-format för koden H1 uppdateras omedelbart
all text som är formaterad med koden H1.
Obs! Var försiktig när du omdefinierar koder i en länkad CSS-formatmall, eftersom detta
kan ändra layouten på flera sidor. Om du exempelvis omdefinierar koden TABLE för att den
ska se ut på ett visst sätt ändras också layouten på andra sidor med tabeller.
• CSS-väljarformat omdefinierar formateringen för en viss kombination av koder
(exempelvis att TD H2 gäller varje gång ett H2-huvud förekommer i en tabellcell)
eller för alla koder som innehåller ett visst ID-attribut (exempelvis att
#mittFormat gäller för alla koder som innehåller attributvärdeparet
id="mittFormat").
Manuell HTML-formatering åsidosätter formatering som tillämpats med CSSformat (eller HTML-format). Om du vill att CSS-format ska styra formateringen
av ett stycke måste du ta bort all manuell HTML-formatering och alla HTMLformat.
Även om du kan ange ett obegränsat antal CSS-formatattribut som definieras av
CSS1-specifikationen i Dreamweaver, är det inte alla attribut som visas i
dokumentfönstret. Attribut som inte visas är markerade med en asterisk (*) i
dialogrutan Formatdefinition. Observera också att en del CSS-formatattribut som
du kan ange i Dreamweaver ser olika ut i Microsoft Internet Explorer 4.0 och
Netscape Navigator 4.0 och att en del för närvarande inte stöds i någon
webbläsare alls.
Obs! Om du vill visa CSS-referensboken O’Reilly som ingår i Dreamweaver klickar du på
knappen Referens i verktygsfältet och väljer O’Reilly CSS Referens i listrutan Bok.
Egenskaper för CSS-format
CSS1 (Cascading Style Sheets-specifikationen), som styrs av W3C (World Wide
Web Consortium), definierar vilka CSS-formategenskaper (exempelvis
teckensnitt, färg, fyllning, marginal, ordavstånd) som styr utseendet på element på
webbsidor. Du kan ange alla CSS1-egenskaper med Dreamweaver.
244
Kapitel 10
I Internet Explorer 4.0 och senare kan du använda ett skriptspråk, exempelvis
JavaScript eller VBScript, för att ändra elements placerings- och CSSformategenskaper efter att sidan har lästs in. I Netscape Navigator 4.0 och senare
kan du inte ändra CSS-formategenskaper efter att sidan har lästs in, men du kan
ändra placeringsegenskaper.
Skapa och länka till en extern CSS-formatmall
En CSS-formatmall är en extern textfil som innehåller format och
formateringspecifikationer. När du redigerar en extern CSS-formatmall uppdateras
alla dokument som är länkade till den så att ändringarna visas. Du kan exportera
CSS-formaten i ett dokument för att skapa en ny CSS-formatmall och koppla eller
länka till en extern formatmall för att använda formaten som finns där.
Dreamweavers hjälp består av HTML-sidor där en länkad CSS-formatmall med
namnet help.css används. Om du vill veta hur koden för en CSS-formatdefinition
ser ut öppnar du filen help.css (i mappen Help/html) i en textredigerare. Öppna
någon av avsnittsfilerna (de som börjar med en siffra) om du vill se hur CSSformatmallen är länkad till dokumentet med en LINK-kod och hur olika CSSformat används. Du kan också kopiera filen help.css file till den lokala rotmappen
och använda dess format på en testsida.
Så här kopplar du en extern CSS-formatmall:
1
Välj Fönster > CSS-format eller klicka på ikonen CSS-format bland
startknapparna.
2
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på CSSformatpanelen och välj Koppla formatmall på snabbmenyn. Du kan också
klicka på ikonen Koppla formatmall längst ned på CSS-formatpanelen.
3
Ange filnamnet i fältet URL i dialogrutan Välj formatmallsfil eller bläddra till
önskad fil.
4
Markera en dokumentrelativ eller platsrotrelativ sökväg. Se ”Om
dokumentplacering och sökvägar” på sidan 350.
5
Klicka på Öppna. Formatmallen kopplas till Dreamweaver-dokumenten och
dess format visas på CSS-formatpanelen.
Infoga och formatera text
245
Så här skapar eller länkar du till en extern CSS-formatmall:
1
Välj Fönster > CSS-format eller klicka på ikonen CSS-format bland
startknapparna.
2
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på CSSformatpanelen och välj Redigera formatmall på snabbmenyn.
3
Klicka på Länk i dialogrutan Redigera formatmall.
4
Gör något av följande i dialogrutan Länka extern formatmall:
• Klicka på Bläddra (Windows) eller Välj (Macintosh) om du vill bläddra till en
extern CSS-formatmall, eller skriv sökvägen till formatmallen i fältet Fil/URL.
(Du bör bläddra eftersom du då kan vara helt säker på att ange rätt sökväg till
formatmallen.)
• Skapa en ny extern CSS-formatmall genom att ange ett nytt filnamn (ett som
inte redan finns på det angivna stället). Filnamnet måste sluta med filtillägget
.css.
5
Markera alternativet Länk eller Importera när du vill ange och skapa den kod
som ska användas för att koppla den externa CSS-formatmallen till
dokumentet. Klicka sedan på OK.
Importera hämtar informationen i den externa CSS-formatmallsfilen till det
aktuella dokumentet, medan Länk öppnar och vidarebefordrar informationen
utan att överföra den. Både Importera och Länk anropar alla format i den
externa CSS-formatmallen till det aktuella dokumentet, men Länk har fler
funktioner och fungerar i fler webbläsare.
Namnet på den externa CSS-formatmallen visas med identifieraren (länk eller
importera) i listan över format i dialogrutan Redigera formatmall. Genomför
stegen nedan när du vill skapa eller redigera format som finns definierade i den
externa CSS-formatmallen.
6
Markera namnet på den externa formatmallen i dialogrutan Redigera
formatmall och klicka på Redigera.
Dialogrutan Redigera formatmall för denna formatmall visas.
246
Kapitel 10
7
Klicka på Nytt när du vill definiera format i den externa CSS-formatmallen.
8
Definiera det nya formatet i dialogrutan Nytt format. Se ”Skapa ett CSSformat i Dreamweaver” på sidan 247.
9
Klicka på Spara när du har definierat formaten.
Redigera en extern CSS-formatmall
När du redigerar en CSS-formatmall som styr text i dokumentet formaterar du
genast om all text som styrs av denna formatmall. Dina ändringar påverkar alla
dokument som är länkade till formatmallen.
Så här redigerar du en extern CSS-formatmall:
1
Öppna ett dokument som är länkat till den externa CSS-formatmall du vill
ändra.
2
Gör något av följande:
• Välj Fönster > CSS-format eller klicka på CSS-format bland startknapparna.
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på CSSformatpanelen och välj Redigera formatmall på snabbmenyn.
• Välj Text > CSS-format > Redigera formatmall.
3
Markera namnet på den externa formatmallen i dialogrutan Redigera
formatmall och klicka på Redigera.
I en ny dialogruta med namnet Redigera formatmall visas formaten i den
externa formatmallen. Markera formatet du vill redigera.
4
Redigera formatet. Se ”Skapa ett CSS-format i Dreamweaver” på sidan 247.
5
Klicka på Spara när du är klar med redigeringen.
Skapa ett CSS-format i Dreamweaver
Skapa ett CSS-format när du vill automatisera formateringen av HTML-koder
eller textintervall som identifieras av ett CLASS-attribut.
Så här skapar du ett CSS-format:
1
Välj Fönster > CSS-format, högerklicka (Windows) eller Kontroll-klicka
(Macintosh) på CSS-formatpanelen och välj Nytt format på snabbmenyn. Du
kan också klicka på ikonen Nytt format längst ned på CSS-formatpanelen.
2
Välj bland följande CSS-formatalternativ:
skapar ett format som kan tillämpas som ett
på ett textintervall eller textblock.
Skapa anpassat format (klass)
CLASS-attribut
Omdefiniera HTML-kod omdefinierar standardformateringen för en viss
HTML-kod. Tänk på att layouten på flera sidor kan ändras när du
omdefinierar en kod.
Använd CSS-väljare definierar formateringen för en viss kombination av koder
eller för alla koder som innehåller ett visst ID-attribut.
Infoga och formatera text
247
3
Ange ett namn, en kod eller en väljare för det nya formatet:
• Namn på anpassade format (klass) måste börja med en punkt. Om du inte själv
skriver en punkt görs det automatiskt. Dessa namn kan bestå av vilka bokstäver
och siffror som helst, men en bokstav måste följa direkt efter punkten.
Exempel: .mitthuvud1.
• Om du vill omdefiniera ett HTML-kodformat skriver du en HTML-kod eller
väljer en i listrutan ovanför.
• För CSS-väljare anger du ett giltigt villkor för en väljare (exempelvis TD eller
#mittFormat).
Du kan också välja en väljare i listrutan. Tillgängliga väljare i
listan är a:active, a:hover, a:link och a:visited.
4
Markera var formatet ska definieras. Ny formatmallsfil (extern) eller Endast
detta dokument.
5
Klicka på OK. Dialogrutan Formatdefinition visas.
6
Välj formateringsinställningar för det nya CSS-formatet. Låt attributen vara
tomma om de inte är viktiga för formatet.
Attribut som inte visas i dokumentfönstret är markerade med en asterisk (*) i
dialogrutan Formatdefinition. Vissa CSS-formatattribut som du kan ange med
Dreamweaver ser inte likadana ut i Microsoft Internet Explorer 4.0 och
Netscape Navigator 4.0. Vissa stöds för närvarande inte i någon webbläsare alls.
7
Klicka på OK eller Verkställ.
Information om olika inställningar finns i följande avsnitt i Dreamweavers hjälp:
•
•
•
•
•
•
•
•
Formatdefinition för kategorin Typ
Formatdefinition för kategorin Bakgrund
Formatdefinition för kategorin Block
Formatdefinition för kategorin Ruta
Formatdefinition för kategorin Kant
Formatdefinition för kategorin Lista
Formatdefinition för kategorin Placering
Formatdefinition för kategorin Tillägg
När du skapar ett anpassat format (klass) visas det på CSS-formatpanelen och på
undermenyn Text > CSS-format. HTML-kodformat och CSS-väljarformat visas
inte på CSS-formatpanelen eftersom de inte kan tillämpas. De visas dock
automatiskt i dokumentfönstret överallt där koden eller väljaren förekommer.
248
Kapitel 10
Använda ett anpassat CSS-format (klass)
Anpassade CSS-format (klass) är den enda CSS-formattypen som kan användas på
alla sorters text i ett dokument, oavsett vilka koder som styr texten. På CSSformatpanelen visas namnen på alla tillgängliga format.
Blanda inte ihop CSS-format med alternativ som Fet eller Variabel på
undermenyn Text > Stil. Dessa alternativ är fördefinierade formateringsattribut
som motsvarar specifika HTML-koder.
När du använder två eller fler CSS-format på samma text kan formaten råka i
konflikt och ge oönskade resultat. Se ”Format som krockar” på sidan 250.
Så här använder du ett anpassat CSS-format:
1
Välj Fönster > CSS-format.
2
Markera texten som du vill använda ett CSS-format på.
Placera insättningspunkten i ett stycke om du vill använda formatet på hela
stycket.
Om du vill ange en viss kod som CSS-formatet ska användas på markerar du
koden med kodväljaren längst ned till vänster i dokumentfönstret. Du kan
också markera koden i kodväljaren, högerklicka (Windows) eller Kontrollklicka (Macintosh) för att visa en snabbmeny och välja Ange klass för att se en
lista över vilka CSS-format som kan användas.
Om du markerar ett textintervall i ett stycke påverkar CSS-formatet endast
markeringen.
3
Klicka på ett formatnamn på CSS-formatpanelen.
Du kan också använda ett CSS-format genom att välja ett formatnamn på
undermenyn Text > CSS-format eller genom att högerklicka (Windows) eller
Kontroll-klicka (Macintosh) och välja formatnamnet på undermenyn CSS-format
på snabbmenyn. Koden för den aktuella markeringen visas bredvid kommandot
Anpassat format.
Infoga och formatera text
249
Exportera format för att skapa en CSS-formatmall
Du kan exportera format från ett dokument för att skapa en ny CSS-formatmall.
Du kan sedan länka till andra dokument för att använda dessa format.
Så här exporterar du CSS-format från ett dokument och skapar en CSSformatmall:
1
Välj Arkiv > Exportera > Exportera CSS-format eller Text > CSS-format >
Exportera CSS-format. Dialogrutan Exportera format som CSS-fil visas.
2
Ange ett namn för formatet och klicka på Spara. Formatet sparas som CSSformatmall.
Format som krockar
När du använder två eller fler CSS-format på samma text kan formaten råka i
konflikt och ge oönskade resultat. I webbläsare används formatattribut enligt
följande:
• Om två format används på samma text visas alla attribut för båda formaten i
webbläsaren, såvida inte vissa attribut krockar. Ett format kan exempelvis ange
blå som textfärg medan det andra formatet anger röd.
• Om attribut från format som används på samma text krockar, visas attributet
för det innersta formatet (det närmast själva texten) i webbläsaren.
• Om det uppstår en direkt konflikt åsidosätter attributen från CSS-format
(format som används med attributet CLASS) attribut från HTML-kodformat.
I följande exempel kan det definierade formatet för H1 ange teckensnitt, storlek
och färg för alla H1-stycken, men det anpassade CSS-formatet .Blue som används
på detta stycke åsidosätter färginställningen i formatet H1. Det andra anpassade
CSS-formatet .Red åsidosätter .Blue eftersom det finns inuti formatet .Blue.
<h1><span class="Blue">Detta stycke styrs av det anpassade formatet .Blue och
HTML-kodformatet H1.
<span class="Red">Förutom denna mening som styrs av formatet .Red.
</span>
Nu är vi tillbaka i formatet .Blue.</span></h1>
250
Kapitel 10
Använda CSS-formatpanelen
Använd CSS-formatpanelen när du vill använda anpassade CSS-format på den
aktuella markeringen. På CSS-formatpanelen visas endast anpassade CSS-format
(klass). Omdefinierade HTML-koder och CSS-väljarformat visas inte på CSSformatpanelen eftersom de automatiskt används på text som styrs av den angivna
koden eller väljaren. (Om du bara vill klippa och klistra in format som går att
återanvända, men inte att uppdatera och anpassa, använder du HTMLformatpanelen.)
Välj Fönster > CSS-format när du vill visa CSS-formatpanelen.
Verkställ visar
koden för den aktuella markeringen. Välj en kod i listrutan om du
vill ange en annan kod.
Nytt format öppnar dialogrutan Nytt format. Skapa ett nytt format för ett visst
dokument eller skapa en ny extern formatmall.
Koppla formatmall öppnar
dialogrutan Välj formatmallsfil. Välj en extern
formatmall som ska kopplas till det aktuella dokumentet.
Redigera formatmall öppnar dialogrutan Redigera formatmall. Redigera formaten
i det aktuella dokumentet eller i en extern formatmall.
Se även ”Använda CSS-formatmallar” på sidan 243.
Obs! Om du högerklickar (Windows) eller Kontroll-klickar (Macintosh) på CSSformatpanelen öppnas en snabbmeny som innehåller kommandona Redigera, Duplicera,
Ta bort, Tillämpa, Nytt format, Redigera formatmall och Koppla formatmall.
Göra inställningar för CSS-format
Med inställningarna för CSS-format styr du hur den kod som definierar CSSformat ska skrivas. CSS-format kan skrivas i ett kortskriftsformat som vissa tycker
det är lättare att arbeta med. I somliga äldre webbläsarversioner tolkas inte
kortskrift på rätt sätt. Såvida du inte vill att Dreamweaver ska skriva format i
kortskrift, behöver du inte ändra några av inställningarna för CSS-format.
Välj Redigera > Inställningar och markera CSS-format när du vill visa
inställningar för CSS-format. Se även ”Använda CSS-formatmallar” på sidan 243.
Använd kortskrift för anger
vilka CSS-formatattribut som ska skrivas i kortskrift.
När CSS-format redigeras: Använd kortskrift anger
om befintliga format ska
skrivas om i kortskrift. Välj Om ursprungligt format använder om du vill att alla
format ska vara som de är. Välj Enligt inställningarna ovan om du vill att format
ska skrivas om i kortskrift enligt attributen som anges i kryssrutorna Använd
kortskrift för.
Infoga och formatera text
251
Konvertera CSS-format till HTML-koder
Om du har använt CSS-format för att ange textformatering (exempelvis familj,
storlek, färg och dekoration för teckensnitt) och senare bestämmer dig för att du
vill ändra formateringen så att den går att visa i 3.0-webbläsare, kan du välja Arkiv
> Konvertera > 3.0-webbläsarkompatibel för att konvertera så mycket av
formatinformationen som möjligt till HTML-koder.
Obs! Det går inte att konvertera alla CSS-format till HTML, eftersom HTML-koderna inte
täcker eller stöder alla attribut som kan användas i CSS-format.
Så här konverterar du en fil som använder CSS-format till en 3.0webbläsarkompatibel fil:
1
Välj Arkiv > Konvertera > 3.0-webbläsarkompatibel.
2
Markera CSS-format till HTML-kod i dialogrutan som visas.
Om du väljer alternativet Skikt till tabell ersätts alla skikt med en tabell där den
ursprungliga placeringen bevaras.
Där det är möjligt ersätts CSS-format med HTML-kod, exempelvis B och FONT.
All CSS-kod som inte kan konverteras till HTML tas bort. Information om
vilka format som konverteras och vilka som tas bort finns i ”Tabell för
konvertering av CSS-format till HTML-kod” på sidan 253.
3
Klicka på OK. Den konverterade filen öppnas i ett nytt, namnlöst fönster.
Obs! Du måste utföra denna konvertering varje gång du ändrar den ursprungliga filen för
att den 3.0-kompatibla filen ska uppdateras. Därför är det bäst att utföra denna procedur
först när du är helt nöjd med den ursprungliga filen.
252
Kapitel 10
Tabell för konvertering av CSS-format till HTML-kod
CSS-attributen i följande tabell konverteras till HTML-kod med kommandot
Arkiv > Konvertera > 3.0-webbläsarkompatibel. (Se ”Konvertera CSS-format till
HTML-koder” på sidan 252.) Attribut som inte finns med i tabellen tas bort.
CSS-attribut
Konverteras till
color
FONT COLOR
font-family
FONT FACE
font-size
FONT SIZE="[1-7]"
font-style: oblique
I
font-style: italic
I
font-weight
B
list-style-type: square
UL TYPE="square"
list-style-type: circle
UL TYPE="circle"
list-style-type: disc
UL TYPE="disc"
list-style-type: upper-roman
OL TYPE="I"
list-style-type: lower-roman
OL TYPE="i"
list-style-type: upper-alpha
OL TYPE="A"
list-style-type: lower-alpha
OL TYPE="a"
list-style
UL eller OL med passande TYPE
text-align
P ALIGN eller DIV ALIGN vilket som
passar
text-decoration: underline
U
text-decoration: line-through
STRIKE
Infoga och formatera text
253
Kontrollera stavning
Använd kommandot Kontrollera stavning på Text-menyn när du vill kontrollera
stavningen i det aktuella dokumentet. Kommandot Kontrollera stavning ignorerar
HTML-koder och attributvärden.
Som standard använder stavningskontrollen en amerikansk-engelsk ordlista. Du
byter ordlista genom att välja Redigera > Inställningar, markera kategorin Allmänt
och ange ett annat alternativ i listrutan Stavningsordlista. Ordlistor för fler språk
kan laddas ned från Dreamweaver kundtjänst.
Göra en stavningskontroll med hjälp av dialogrutan
Kontrollera stavning
Använd följande alternativ i dialogrutan Kontrollera stavning när du vill
kontrollera stavningen i dokumentet: (Du visar dialogrutan genom att välja Text >
Kontrollera stavning.)
Lägg till i personlig lägger
till det okända ordet i din personliga ordlista. Om du
vill ta bort ord i din personliga ordlista redigerar du filen Personal.dat i en
textredigerare. Denna fil finns i mappen Dreamweaver 4/Configuration/
Dictionaries.
Ignorera ignorerar
denna förekomst av ordet.
Ignorera alla ignorerar
alla förekomster av ordet.
Ändra ersätter denna förekomst av ordet med text som du skriver i rutan Ändra till
eller med ett ord i listan Förslag.
Ändra alla ersätter
alla förekomster av ordet på samma sätt.
Söka och ersätta text, koder och attribut
Du kan söka i det aktuella dokumentet, i markerade filer, i en katalog eller på en
hel plats efter text, text som är omgiven av särskilda koder eller HTML-koder och
HTML-attribut. Observera att du använder olika kommandon när du söker efter
filer och när du söker efter text (och/eller HTML-koder) i filer: Med
kommandona Hitta i lokal plats och Hitta på fjärrplats söker du efter filer och
med Redigera > Sök och ersätt söker du efter text och koder i filer.
Så här söker du efter text och/eller HTML-kod i dokument:
1
Välj bland följande alternativ:
• Välj Redigera > Sök och ersätt i designvyn i dokument- eller platsfönstret.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) i kodvyn och välj
Sök och ersätt på snabbmenyn.
254
Kapitel 10
2
I dialogrutan Sök och ersätt som visas använder du alternativet Sök i för att
ange vilka filer som ska genomsökas:
• Aktuellt dokument begränsar sökningen till det aktiva dokumentet. Detta
alternativ är endast tillgängligt när du väljer Sök och ersätt med
dokumentfönstret aktivt eller på snabbmenyn i kodkontrollen.
• Hela den lokala platsen utökar sökningen till alla HTML-dokument,
biblioteksfiler och textdokument på den aktuella platsen. När du har valt Hela
den lokala platsen visas namnet på platsen till höger om listrutan. Om detta
inte är platsen du vill söka på väljer du en annan plats i listrutan med aktuella
platser i platsfönstret.
• Markerade filer på platsen begränsar sökningen till filer och mappar som är
markerade i platsfönstret. Detta alternativ är endast tillgängligt när du väljer
Sök och Ersätt med platsfönstret aktivt (d.v.s. att det ligger framför
dokumentfönstret).
• Mapp begränsar sökningen till en viss grupp av filer. När du har valt Mapp
klickar du på mappikonen och bläddrar till och markerar katalogen som du vill
söka i.
3
Använd alternativet Sök efter om du vill ange vilken typ av sökning du vill
göra.
• Källkod använder du för att söka efter textsträngar i HTML-källkoden. Se
”Söka i HTML-källkoden” på sidan 256.
• Text använder du för att söka efter textsträngar i dokumentfönstret. En
textsökning ignorerar alla HTML-koder i strängen. Om du exempelvis söker
efter den svarta hunden skulle sökningen resultera i både den svarta hunden
och den <i>svarta</i> hunden.
• Text (avancerat) använder du för att söka efter textsträngar som antingen är i
eller utanför koder. I ett dokument som exempelvis innehåller följande
HTML-kod och där du söker efter försöker med alternativen Inte innanför kod
och I markerade kommer du endast att hitta den andra förekomsten av ordet
försöker: Johan <i>försöker</i> få klart sitt jobb i tid men han lyckas inte
alltid. Han försöker verkligen. Se ”Söka efter text i specifika koder” på
sidan 258.
• Specifik kod använder du för att söka efter särskilda koder, attribut och
attributvärden, exempelvis alla TD-koder med attributet VALIGN inställt till TOP. Se
”Söka efter HTML-koder och HTML-attribut” på sidan 256.
Obs! Om du trycker på Ctrl+Retur eller Skift+Retur (Windows) eller Kontroll+Retur,
Skift+Retur eller Kommando+Retur (Macintosh) infogas en radbrytning i textsökfältet
som gör att du kan söka efter stycketecken. Avmarkera kryssrutan Ignorera skillnader i
mellanrum när du utför denna sökning om du inte använder reguljära uttryck. Observera
att med det här sättet hittas stycketecken, men inte alla förekomster av radbrytningar.
Du kan exempelvis inte hitta en <BR>-kod eller en <P>-kod. Stycketecken visas som
mellanslag i designvyn, inte som radbrytningar.
Infoga och formatera text
255
4
Använd följande alternativ när du vill utöka eller begränsa sökningen:
• Alternativet Matcha gemener/VERSALER begränsar sökningen till text som
exakt matchar söktextens gemener/versaler. Om du exempelvis söker efter den
bruna väskan, kommer du inte att hitta Den bruna väskan.
Obs! Om du markerar Ignorera skillnader i mellanrum behandlas allt mellanrum som ett
tecken när det gäller matchning. Om du har valt det här alternativet skulle denna text
matcha denna text men inte dennatext. Detta alternativ är inte tillgängligt när
kryssrutan Använd reguljära uttryck är markerad. Du måste uttryckligen skriva det
reguljära uttrycket för att mellanrummet ska ignoreras. Observera att <P>- och <BR>koder inte räknas som mellanrum.
• Alternativet Använd reguljära uttryck gör att vissa tecken och korta strängar
(exempelvis ?, *, \w och \b) i söksträngen tolkas som reguljära uttryck. En
sökning efter exempelvis den g\w*\b hunden resulterar i att både den gula
hunden och den gamla hunden hittas. Se ”Reguljära uttryck” på sidan 260.
Obs! Om du gör ändringar i dokumentet i kodvyn och försöker söka och ersätta något
annat än källkod visas en dialogruta som meddelar att de två vyerna synkroniseras och att
sökningen påbörjas därefter. Mer information om synkronisering av vyer finns i ”Använda
kodvyn (eller kodkontrollen)” på sidan 326.
Söka i HTML-källkoden
Använd alternativet Källkod i dialogrutan Sök och ersätt när du vill söka efter
textsträngar i HTML-koden. Om du exempelvis söker efter svarta hunden i
följande kod hittas två förekomster (i attributet ALT och i den första meningen):
<img src="barnaby.gif" width="100" height="100"
alt="Barnaby, den svarta hunden."><br>
Vi såg den svarta hunden i parken i går. Den svarta
<a href="barnaby.html">hunden</a> heter Barnaby.
Frasen svarta hunden förekommer också i den andra meningen, men den är ingen
matchning eftersom den är bruten av en länk.
Stegvisa anvisningar om hur du söker finns i ”Söka och ersätta text, koder och
attribut” på sidan 254.
Söka efter HTML-koder och HTML-attribut
Använd alternativet Specifik kod i dialogrutan Sök och ersätt när du vill söka efter
koder, attribut och attributvärden. Du kan exempelvis söka efter alla IMG-koder
utan ALT-attribut. Mer information om olika sökningar finns i ”Söka och ersätta
text, koder och attribut” på sidan 254.
256
Kapitel 10
Så här utför du en kodsökning:
1
Välj Redigera > Sök och ersätt och ange vilka filer som ska sökas igenom. (Se
”Söka och ersätta text, koder och attribut” på sidan 254.)
2
Välj Specifik kod i listrutan Sök efter.
3
Välj en viss kod i listrutan till höger om listrutan Sök efter. Du kan också välja
[valfri kod].
Om du bara vill söka efter alla förekomster av den angivna koden trycker du på
minustecknet (–) och går vidare till steg 6. I annat fall fortsätter du med steg 4.
4
Begränsa sökningen med någon av följande kodbegränsare:
• Med attribut anger ett attribut som måste finnas i koden för att den ska
matcha. Du kan ange ett visst värde för attributet eller välja [valfritt värde].
• Utan attribut anger ett attribut som inte får finnas i koden om den ska matcha.
Välj detta alternativ om du exempelvis vill söka efter alla IMG-koder utan ALTattribut.
• Innehåller anger en text eller kod som måste vara innanför den ursprungliga
koden för att den ska matcha. I exempelvis koden <b><font
är koden FONT inuti koden B.
face="Arial">rubrik 1</font></b>
• Innehåller inte anger en text eller kod som inte får vara innanför den
ursprungliga koden för att den ska matcha.
• Innanför kod anger en kod som källkoden måste vara innanför för att den ska
matcha.
• Inte innanför kod anger en kod som källkoden inte får vara innanför om den
ska matcha.
5
Klicka på plustecknet (+) och upprepa steg 4 om du vill begränsa sökningen
ytterligare.
6
Starta sökningen:
• Klicka på Sök nästa när du vill markera nästa förekomst av söktexten i det
aktuella dokumentet.
• Klicka på Sök alla om du vill skapa en lista över alla förekomster av söktexten i
det aktuella dokumentet.
• Klicka på Sök nästa om du vill markera nästa förekomst av söktexten i det
aktuella dokumentet eller, om det inte finns någon, öppna nästa dokument
som innehåller söktexten.
• Klicka på Sök alla om du vill skapa en lista över alla förekomster av söktexten i
det aktuella dokumentet eller, om du söker i en katalog eller på en plats, skapa
en lista över dokument som innehåller söktexten.
Infoga och formatera text
257
Söka efter text i specifika koder
Använd alternativet Text (avancerat) i dialogrutan Sök och ersätt om du vill söka
efter textsträngar som antingen är inom eller inte inom en uppsättning av koder.
Du kan exempelvis söka efter ordet Namnlöst inom <TITLE>-koder om du vill
hitta alla namnlösa sidor på platsen. Mer information om olika sökningar finns i
”Söka och ersätta text, koder och attribut” på sidan 254.
Så här utför du en avancerad textsökning:
1
Välj Redigera > Sök och ersätt och ange vilka filer som ska sökas igenom. (Se
”Söka och ersätta text, koder och attribut” på sidan 254.)
2
Välj Text (avancerat) i listrutan Sök efter.
3
Skriv texten du vill söka efter i textfältet bredvid listrutan Sök efter.
Skriv exempelvis ordet Namnlöst.
4
Välj först Innanför kod eller Inte innanför kod och sedan en kod i listrutan
bredvid.
Välj exempelvis Innanför kod och sedan TITLE.
5
Klicka på plustecknet (+) om du vill begränsa sökningen till koder med ett eller
flera särskilda attribut.
Eftersom koden <TITLE> inte har några attribut behöver du inte använda det här
alternativet för att hitta alla namnlösa sidor på platsen.
6
258
Kapitel 10
Klicka på Sök nästa när du vill öppna nästa dokument som innehåller
söktexten. Du kan också välja Sök alla om du vill generera en lista över alla
dokument som innehåller denna text.
Spara söksträngar
Du kan spara söksträngar och använda dem senare genom att klicka på knappen
Spara fråga i dialogrutan Sök och ersätt. Det är praktiskt att spara en fråga om du
ofta utför samma sökning och inte vill skriva om söksträngen varje gång. Du
kanske exempelvis vill ta bort andra koder än standardkoder i dokument som har
skapats med ett annat HTML-redigeringsprogram eller bekräfta att alla bilderna i
en fil har attributen HEIGHT, WIDTH och ALT innan du lägger ut dokumentet på
webben.
Så här sparar du en söksträng:
1
Ange parametrarna för sökningen genom att följa anvisningarna i ”Söka och
ersätta text, koder och attribut” på sidan 254.
Information om hur du anger ytterligare sökparametrar vid kodsökning och
avancerad textsökning finns i ”Söka efter HTML-koder och HTML-attribut”
på sidan 256 och ”Söka efter text i specifika koder” på sidan 258.
2
Klicka på knappen Spara fråga (knappen är märkt med en diskettikon).
Frågorna sparas som standard i mappen Configuration/Queries i
Dreamweavers programmapp.
3
I dialogrutan som visas ger du filen ett namn som identifierar frågan och klickar
sedan på Spara.
Om söksträngen exempelvis innehåller IMG-koder utan attributet ALT kanske du
måste ge frågan namnet img_no_alt.dwr. Namn på sökfrågor avslutas med
tillägget dwq. Ersättningsfrågor avslutas med tillägget dwr.
Så här hämtar du en söksträng:
1
Välj Redigera > Sök och ersätt.
2
Klicka på Ladda fråga (knappen är märkt med en mappikon).
Dialogrutan Ladda fråga öppnas automatiskt i mappen Configuration/Queries.
Du kan gå till en annan mapp om du har sparat frågorna någon annanstans.
3
Markera en frågefil och klicka på Öppna.
Om dialogrutan Sök är öppen har du bara tillgång till sökfrågor (.dwq-filer).
Om dialogrutan Ersätt är öppen har du tillgång till både sök- (.dwq-filer) och
ersättningsfrågor (.dwr-filer).
4
Klicka på Sök nästa, Sök alla, Ersätt eller Ersätt alla när du vill påbörja
sökningen.
Infoga och formatera text
259
Reguljära uttryck
Reguljära uttryck är strängar som beskriver teckenkombinationer i text. Du
använder dem när du söker och vill ha hjälp med att beskriva begrepp som
”meningar som börjar med ’Den’” och ”attributvärden som innehåller ett tal”. I
följande tabell visas specialtecknen i reguljära uttryck, deras betydelse och exempel
på användning.
Om du vill söka efter text som innehåller ett av specialtecknen i tabellen, placerar
du ett omvänt snedstreck framför specialtecknet. Om du exempelvis vill söka efter
själva asterisken i frasen vissa villkor gäller* skulle söksträngen se ut så här:
gäller\*. Om du inte placerar ett omvänt snedstreck framför asterisken kommer
du att hitta alla förekomster av ”gäller” (samt alla förekomster av ”gäll”, ”gällerr”
och ”gällerrr”), inte bara de som följs av en asterisk.
Tecken
Matchar
Exempel
^
Början av inmatningen eller raden.
^T matchar ”T” i ”Tebjudningen var
lyckad” men inte i ”Han heter
Tomas”
$
Slutet av inmatningen eller raden.
h$ matchar ”h” i ”lunch” men inte i
”lunchen”
*
Föregående tecken 0 eller fler
gånger.
um* matchar ”um” i ”rum”, ”umm” i
Föregående tecken 1 eller fler
gånger.
um+ matchar ”um” i ”rum” och
+
Kapitel 10
”umm” i ”tumme”, men inget i
”stuga”
?
Föregående tecken högst en gång st?en matchar ”sen” i ”Andersen”
(detta används om det föregående och ”sten” i ”gråsten” men inget i
”bulten” eller ”ljussken”
tecknet är valfritt).
.
Ett enstaka tecken förutom
radmatning.
.en matchar ”ren” och ”len” i
x|y
Antingen x eller y.
FF0000|0000FF matchar ”FF0000”
i bgcolor="#FF0000" och
”0000FF” i font color="#0000FF"
{n}
Exakt n förekomster av föregående s{2} matchar ”ss” i ”passar” och de
tecken.
två första s:en i ”psssst” men inget i
”post”
{n,m}
Minst n och högst m förekomster
av föregående tecken.
[abc]
260
”tumme” och ”u” i ”stuga”
”Sören tycker om äpplen”
F{2,4} matchar ”FF” i "#FF0000"
och de fyra första F:en i
"#FFFFFF"
[e-g] matchar ”e” i ”del”, ”f” i
Något av tecknen inom
”fjärran” och ”g” i ”gäst”
hakparenteserna. Ange ett
teckenintervall med ett bindestreck
([a-f] motsvarar exempelvis
[abcdef]).
Tecken
Matchar
Exempel
[^abc]
Något av tecknen som inte finns
[^aeiou] matchar först ”r” i ”artist”,
inom hakparenteserna. Ange ett
”b” i ”bok” och ”k” i ”ek”
teckenintervall med ett bindestreck
([^a-f] motsvarar exempelvis
[^abcdef]).
\b
En ordgräns (exempelvis ett
blanksteg eller en vagnretur).
\bb matchar ”b” i ”bok” men inget i
”snöbär” eller ”snobb”
\B
Någon annan gräns än en ordgräns. \Bb matchar ”b” i ”snöbär” men
inget i ”bok”
\d
En siffra. Motsvarar [0-9].
\d matchar ”3” i ”C3PO” och ”2” i
”lägenhet 2G”
\D
Något annat tecken än en siffra.
Motsvarar [^0-9].
\D matchar ”S” i ”900S” och ”Q” i
”Q45”
\f
Formulärmatning.
-
\n
Radmatning.
-
\r
Vagnretur.
-
\s
Ett enstaka mellanrumstecken:
mellanslag, tabb, formulärmatning
eller radmatning.
\sbok matchar ”bok” i ”blå bok”
men inget i ”sångbok”
\S
Ett tecken som inte är ett
mellanrumstecken.
\Sbok matchar ”bok” i ”sångbok”
men inget i ”blå bok”
\t
En tabb.
-
\w
Ett alfanumeriskt tecken, även
understrykning. Motsvarar [A-Zaz0-9_].
b\w* matchar ”bark” i ”tusen träd
med bark” och både ”bortskämda”
och ”busiga” i ”den bortskämda,
busiga hunden”
\W
Något annat tecken än ett
alfanumeriskt tecken. Motsvarar
[^A-Za-z0-9_].
\W matchar ”&” i ”Jack & Mattie
Söner” och ”%” i ”100%”
Ctrl+Retur eller
Skift+Retur
(Windows);
Kontroll+Retur,
Skift+Retur
eller
Kommando+R
etur
(Macintosh)
Stycketecken. Avmarkera
kryssrutan Ignorera skillnader i
mellanrum när du söker efter detta
om du inte använder reguljära
uttryck. Observera att detta
matchar ett visst tecken, inte en
radbrytning i allmän betydelse. Du
kan exempelvis inte matcha en
<BR>-kod eller en <P>-kod på detta
sätt. Stycketecken visas som
mellanslag i dokumentfönstret, inte
som radbrytningar.
Infoga och formatera text
261
Använd parenteser om du vill sätta upp grupper i ett reguljärt uttryck som du
sedan kan referera till. Använd $1, $2, $3 o.s.v. (använd ($) i fältet Sök och
använd omvänt snedstreck (\) i fältet Ersätt) om du vill referera till den första,
andra, tredje eller senare parentesgruppen. Om du exempelvis söker efter (\d+)\/
(\d+)\/(\d+) och ersätter det med $2/$1/$3 så byter dag och månad plats i ett
datum som är separerat med snedstreck (om du vill konvertera mellan ett
amerikanskt datumformat och ett europeiskt).
262
Kapitel 10
11
KAPITEL 11
Infoga bilder
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Det är främst tre grafikformat som används på webbsidor: GIF, JPEG och PNG.
För närvarande är det bara filformaten GIF och JPEG som har fullt stöd i de flesta
webbläsare. Microsoft Internet Explorer (4.0 och senare) och Netscape Navigator
(4.04 och senare) stöder delvis visning av PNG-bilder. Såvida inte din målgrupp
är användare med webbläsare som stöder PNG-formatet bör du använda GIFoch JPEG-bilder för att så många som möjligt ska kunna se dem.
GIF (Graphic Interchange Format)-filer
innehåller högst 256 färger. GIF-filer
passar bäst när du vill visa bilder som har ojämn toning eller stora områden av
rena färger, exempelvis navigationsfält, knappar, ikoner, logotyper eller andra
bilder med enhetliga färger och toner. Du kan skapa GIF-bilder med
genomskinliga bakgrunder, interlace-GIF-bilder (som först läses in grovt i
webbläsaren och sedan sakta blir allt skarpare) eller animerade GIF-bilder (som är
flera GIF-bilder sparade i en enda fil).
JPEG (Joint Photographic Experts Group) är det bästa filformatet för fotografier och
jämnt tonade bilder, eftersom JPEG-filer kan innehålla miljontals färger. JPEG-filer
brukar vara större än GIF- och PNG-filer. När du förbättrar en JPEG-bilds kvalitet
ökar du också filens storlek och nedladdningstid. Du kan ofta få en bra balans
mellan bildens kvalitet och filstorleken genom att komprimera JPEG-filen.
är ett patentfritt filformat som kan användas i
stället för GIF-bilder. Det innehåller stöd för bilder i dekorfärg, gråskala och äkta
färgåtergivning (true color) samt alfakanalsstöd för genomskinlighet. PNG är det
ursprungliga filformatet för Macromedia Fireworks. PNG-filer sparar all
ursprunglig information om skikt, vektorer, färg och effekter (exempelvis
skuggor). Alla element går alltid att ändra. Filer måste ha filtillägget .png för att
kunna kännas igen som PNG-filer i Macromedia Dreamweaver.
PNG (Portable Network Group)
Du kan infoga GIF-, JPEG- och PNG-bilder i Dreamweaver-dokument. Förutom
att du kan infoga bilder på sidor kan du också infoga dem i tabeller, formulär och
skikt.
263
När du lägger till bilder kan du markera och ändra dem direkt i dokumentfönstret.
Du kan exempelvis använda egenskapskontrollen för att lägga till länkar i bilder,
lägga till kanter runt bilder, ange bilders storlek, lägga till mellanrum runt bilder och
justera bilder. Använd beteenden när du vill skapa interaktiv grafik (exempelvis
överrullningsbilder, navigationsfält eller klickbara bilder).
Ange en bildredigerare (exempelvis Fireworks) i dialogrutan Inställningar om du
vill ha ett effektivare arbetsflöde i produktionen. Om du anger en bildredigerare
kan du starta den och redigera en bild samtidigt som du arbetar i Dreamweaver.
När du använder Fireworks som bildredigerare kan du göra ändringar i Fireworks
och sedan med en enda klickning automatiskt uppdatera bilden i Dreamweaverfilen. Mer information om hur du arbetar med Fireworks och Dreamweaver
samtidigt finns i ”Använda Dreamweaver och Fireworks tillsammans” på
sidan 277.
Förutom att du kan infoga bilder på en sida kan du också ange en bakgrundsbild
för sidan. Se ”Definiera en bakgrundsbild eller en bakgrundsfärg” på sidan 147.
Om du vill överlappa bilder placerar du dem i skikt. Se ”Använda dynamiska
skikt” på sidan 403.
Infoga en bild
När du infogar en bild i ett Dreamweaver-dokument skapas automatiskt en
referens till filen i HTML-källkoden. Om det ska gå att kontrollera att denna
referens är korrekt måste bildfilen finnas på den aktuella platsen. Om den inte
finns på den aktuella platsen tillfrågas du om du vill kopiera filen till rotmappen.
Så här infogar du en bild:
1
Gör något av följande:
• Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret,
och välj sedan Infoga > Bild eller klicka på knappen Infoga bild i kategorin
Vanlig på objektpanelen.
• Placera insättningspunkten där du vill att bilden ska visas i dokumentfönstret,
och tryck sedan på Ctrl+Alt+I (Windows) eller Kommando+Alternativ+I
(Macintosh).
• Dra knappen Infoga bild från objektpanelen till önskad plats i
dokumentfönstret.
• Dra en bild från resurspanelen till önskad plats i dokumentfönstret. Gå sedan
vidare till steg 3.
• Dra en bild från platsfönstret till önskad plats i dokumentfönstret. Gå sedan
vidare till steg 3.
• Dra en bild från skrivbordet till önskad plats i dokumentfönstret. Gå sedan
vidare till steg 3.
264
Kapitel 11
2
I dialogrutan som visas klickar du på Bläddra och väljer en fil. Du kan också
skriva bildfilens sökväg.
Om du arbetar i ett dokument som inte har sparats skapas en file://-referens till
bildfilen. När du sparar dokumentet någonstans på platsen konverteras
referensen till en dokumentrelativ sökväg.
3
Ange bildegenskaper i egenskapskontrollen.
Se ”Ange bildegenskaper” på sidan 265.
Ange bildegenskaper
När du vill ange följande bildegenskaper markerar du en bild i dokumentfönstret
och väljer Fönster > Egenskaper så att egenskapskontrollen visas. När du öppnar
egenskapskontrollen visas endast de vanligaste egenskaperna. Om du vill visa alla
egenskaper klickar du på maximeringsknappen längst ned till höger.
Skriv ett namn i textfältet vid miniatyrbilden så att du kan hänvisa till bilden när
du använder ett Dreamweaver-beteende (exempelvis Växla bild) eller ett
skriptspråk (exempelvis JavaScript eller VBScript).
B och H reserverar
utrymme för en bild på en sida när den läses in i en webbläsare.
Värdena för bildens ursprungliga storlek anges automatiskt i dessa fält.
Standardvärden och värden utan enhet anges i bildpunkter. Du kan också ange
följande enheter: pc (pica), pt (punkter), tum, mm och cm samt kombinationer av
dessa, exempelvis 2tum+5mm. Värdena konverteras till bildpunkter i HTMLkällkoden.
Om du anger B- och H-värden som inte stämmer överens med den faktiska
bredden och höjden på bilden finns det risk att bilden visas på fel sätt i webbläsare.
(Om du vill återställa de ursprungliga värdena klickar du på fältetiketterna.) Du
kan ändra dessa värden när du vill skala visningsstorleken för denna förekomst av
bilden, men det förkortar inte nedladdningstiden eftersom webbläsaren laddar
ned all bildinformation innan bilden skalas. Om du vill minska
nedladdningstiden och vara säker på att alla förekomster av en bild visas i samma
storlek, använder du ett bildredigeringsprogram för att skala bilden.
Källa anger
bildens källfil. Klicka på mappikonen om du vill bläddra till källfilen,
eller skriv sökvägen. Information om hur du anger sökvägar finns i ”Absoluta
sökvägar” på sidan 350.
Infoga bilder
265
Länk anger en hyperlänk för bilden. Dra peka-på-fil-ikonen till en fil i
platsfönstret, klicka på mappikonen om du vill bläddra till ett dokument på din
plats eller skriv URL-sökvägen.
Justera justerar
en bild och text på samma rad. Se ”Justera element” på sidan 267.
Alt anger
alternativ text som visas i stället för en bild i webbläsare som endast visar
text eller i webbläsare som är konfigurerade att ladda ned bilder manuellt. För
synskadade användare som använder syntetiskt tal tillsammans med webbläsare
som endast visar text, läses texten upp och hörs i högtalarna. I vissa webbläsare
visas denna text även när pekaren placeras över bilden.
Klickbar bild gör
att du kan skapa klickbara bilder på klientsidan. Se ”Skapa
klickbara bilder” på sidan 269.
L-mellanr. och V-mellanr. lägger till mellanrum (i bildpunkter) längs bildens sidor.
L-mellanr. lägger till mellanrum över och under bilden. V-mellanr. lägger till
mellanrum längs vänster och höger sida av bilden.
Mål anger
ramen eller fönstret som den länkade sidan ska läsas in i. (Detta
alternativ är inte tillgängligt om bilden inte är länkad till en annan fil.) Namnen
på samtliga ramar i det aktuella dokumentet visas i listrutan Mål. Du kan också
välja bland följande reserverade målnamn:
•
•
läser in den länkade filen i ett nytt, namnlöst webbläsarfönster.
_parent läser in den länkade filen i det överordnade objektet (en
ramuppsättning eller ett fönster) för ramen som innehåller länken. Om ramen
som innehåller länken inte är kapslad läses den länkade filen in i hela
webbläsarfönstret.
• _self läser in den länkade filen i samma ram eller fönster som länken. Detta är
standardvärdet, så det behöver vanligtvis inte anges.
• _top läser in den länkade filen i hela webbläsarfönstret, vilket gör att alla ramar
tas bort.
Låg bild anger vilken lågupplöst bild som ska läsas in före huvudbilden. Många
webbutvecklare använder en 2-bitars (svartvit) version av huvudbilden eftersom den
läses in snabbt och ger användarna en uppfattning om vad de kommer att få se.
_blank
Kant anger bredden (i bildpunkter) på en kant runt bilden. Ange 0 om du inte vill
ha någon kant alls. Du kan använda en kant på både länkade och olänkade bilder.
Du anger länkfärg i dialogrutan Sidegenskaper. Om du anger en kant för en bild
som inte har några länkar får kanten samma färg som texten i det stycke som
bilden är infogad i.
Redigera startar
den bildredigerare du har angett i inställningarna för externa
redigerare och öppnar bilden. När du sparar bildfilen och återgår till
Dreamweaver uppdateras dokumentfönstret med den redigerade bilden. Se
”Använda en extern bildredigerare” på sidan 273.
Återställ storlek återställer
ursprungliga storlek.
266
Kapitel 11
värdena för bredd (B) och höjd (H) till bildens
Justera element
Använd bildegenskapskontrollen när du vill ange en bilds justering i förhållande
till andra element i samma stycke eller rad. Med HTML-kod kan du inte radbryta
text runt en bilds konturer på samma sätt som i en del ordbehandlingsprogram.
Du kan justera en bild i förhållande till text, andra bilder, insticksprogram och
andra element i samma rad. Du kan också använda justeringsknapparna (vänster,
höger och centrera) för att ange en bilds vågräta justering.
Webbläsarstd anger
vanligtvis en baslinjejustering. (Vilket standardvärde som
används beror på platsbesökarens webbläsare.)
Baslinje och Nederst justerar
textens (eller något annat elements) baslinje mot det
markerade objektets nederkant.
Överst justerar
bilden mot överdelen på det högsta elementet (bild eller text) på
den aktuella raden.
Mitten justerar
textens baslinje mot det markerade objektets mitt.
Överst i text justerar
det markerade objektet mot överdelen på det högsta tecknet
på textraden.
Absolut mitten justerar
mot den absoluta mitten på den aktuella raden.
Absolut nederst justerar
det markerade objektets nederkant mot textens absoluta
nederkant (som omfattar nedstaplar som i bokstaven g).
Vänster placerar det markerade objektet i den vänstra marginalen. Texten radbryts
till höger runt objektet. Om vänsterjusterad text föregår objektet på raden tvingar
texten i allmänhet vänsterjusterade objekt att flyttas till en ny rad.
Höger placerar objektet i den högra marginalen. Texten radbryts till vänster runt
objektet. Om högerjusterad text föregår objektet på raden tvingar texten i
allmänhet högerjusterade objekt att flyttas till en ny rad.
Infoga bilder
267
Ändra storlek på bilder och andra element
Du kan visuellt ändra storlek på element som bilder, insticksprogram,
Macromedia Shockwave- eller Flash-filmer, miniprogram och ActiveX-kontroller i
dokumentfönstret. På så sätt kan du se hur ett element påverkar layouten i olika
storlekar.
När du ändrar storlek återställs attributen WIDTH och HEIGHT för elementet. I fälten
B och H i egenskapskontrollen visas elementets aktuella bredd och höjd när du
ändrar storlek på det. Elementets filstorlek ändras inte.
Macromedia Flash-filmer och andra vektorbaserade element är skalbara och
tappar inga egenskaper när du ändrar storlek på dem. Bitmappselement som GIF, JPEG- och PNG-bilder kan dock bli grovkorniga eller förvrängda om du ändrar
värdena för attributen WIDTH och HEIGHT. Du behåller proportionerna på en
bitmapp genom att hålla ned Skift samtidigt som du ändrar storlek på den. Du
bör dock bara visuellt ändra storlek på bitmappar i Dreamweaver för att kunna se
hur layouten påverkas. När du har bestämt vilken storlek som är bäst för bilden
redigerar du filen i ett bildredigeringsprogram. Genom att redigera bilden kan du
också minska filstorleken och därmed även nedladdningstiden.
Så här ändrar du storlek på ett element:
1
Markera elementet (exempelvis en bild eller Shockwave-film) i
dokumentfönstret.
Storlekshandtag visas på den nedersta och den högra sidan av elementet och i
det nedre högra hörnet. Om det inte visas några storlekshandtag kan du
antingen klicka någon annanstans än på det aktuella elementet och sedan
markera det igen eller klicka på <IMG> i kodväljaren för att markera elementet.
2
Ändra storlek på elementet genom att göra något av följande:
• Om du vill justera elementets bredd drar du storlekshandtaget på höger sida.
• Om du vill justera elementets höjd drar du det nedersta storlekshandtaget.
• Om du vill justera elementets bredd och höjd samtidigt drar du
storlekshandtaget i hörnet.
• Om du vill bevara elementets proportioner när du ändrar bredd och höjd på
det Skift-drar du hörnhandtaget.
Element kan visuellt storleksändras till som minst 8 x 8 bildpunkter. Om du vill
justera bredd och höjd på ett element till en mindre storlek (exempelvis 1 x 1
bildpunkt) anger du ett numeriskt värde i egenskapskontrollen.
Om du vill återställa objektet till ursprunglig storlek tar du bort värdena i fälten B
och H i egenskapskontrollen eller klickar på knappen Återställ storlek.
268
Kapitel 11
Skapa klickbara bilder
En klickbar bild är en bild som har delats upp i regioner, så kallade hotspotobjekt. När användaren klickar på en hotspot inträffar en åtgärd, exempelvis kan
en ny fil öppnas. Använd bildegenskapskontrollen när du grafiskt vill skapa och
redigera klickbara bilder på klientsidan.
Klickbara bilder på klientsidan sparar hyperlänksinformation i HTMLdokumentet, inte i en separat klickbar fil som klickbara bilder på serversidan gör.
När en besökare på platsen klickar på en hotspot (ett klickbart område) i bilden
skickas den tillhörande URL-adressen direkt till servern. Detta gör klickbara
bilder på klientsidan snabbare än de på serversidan, eftersom servern inte behöver
tolka var besökaren klickade. Klickbara bilder på klientsidan stöds i Netscape
Navigator 2.0 och senare, NCSA Mosaic 2.1 och 3.0 och alla versioner av
Microsoft Internet Explorer.
I Dreamweaver ändras inte referenser till klickbara bilder på serversidan i
befintliga dokument. Du kan använda klickbara bilder på både klientsidan och
serversidan i samma dokument. Webbläsare som stöder båda typerna av klickbara
bilder prioriterar dock dem på klientsidan. Om du vill ta med en klickbar bild på
serversidan i ett dokument måste du skriva HTML-koden själv.
Så här skapar du en klickbar bild på klientsidan:
1
Markera bilden.
2
Klicka på maximeringsknappen längst ned till höger i egenskapskontrollen om
du vill visa alla egenskaper.
3
Skriv ett unikt namn för den klickbara bilden i fältet Klickbar bild.
Obs! Om du använder flera klickbara bilder i samma dokument kontrollerar du att alla
har unika namn.
4
Gör något av följande när du vill definiera områden för klickbara bilder:
• Välj det ovala verktyget och dra pekaren över bilden om du vill skapa en rund
hotspot.
• Välj rektangelverktyget och dra pekaren över bilden om du vill skapa en
rektangulär hotspot.
• Välj polygonverktyget om du vill definiera en oregelbundet formad hotspot.
Ange hörnpunkter genom att klicka. Slut sedan formen genom att välja
pilverktyget.
När hotspoten har skapats visas hotspot-egenskapskontrollen. (Information om
hotspot-egenskapskontrollen finns i ”Ange hotspot-egenskaper” på sidan 270.)
5
I fältet Länk i hotspot-egenskapskontrollen klickar du på mappikonen för att
bläddra till den fil som du vill ska öppnas när besökarna klickar på hotspotobjektet. Du kan också skriva filnamnet.
Infoga bilder
269
6
Ange vilket fönster den länkade filen ska öppnas i genom att skriva fönstrets
namn i fältet Mål. Du kan också välja ett ramnamn i listrutan Mål.
7
I fältet Alt skriver du text som ska visas i stället för hotspot-objektet i
webbläsare som endast visar text.
I vissa webbläsare visas denna text som en knappbeskrivning när användaren
låter muspekaren vila över hotspot-objektet.
8
Upprepa steg 4 till och med 7 om du vill definiera fler hotspot-objekt i den
klickbara bilden.
9
När du är klar klickar du på ett tomt område i dokumentet för att återgå till
den vanliga egenskapskontrollen.
Ange hotspot-egenskaper
Följande egenskaper visas i egenskapskontrollen när en hotspot är markerad:
anger den klickbara bildens namn. Skapa ett unikt namn för varje
klickbar bild i ett dokument.
Klickbar bild
anger vilken fil eller URL-adress som ska visas när användaren klickar på
hotspot-objektet. Om du länkar till en fil inom samma webbplats anger du en
sökväg som är relativ till dokumentet. (Filnamn som börjar med file:// är inte
relativa.)
Länk
Mål anger
ramen eller fönstret som den länkade sidan ska läsas in i.
Målalternativet är inte tillgängligt förrän det markerade hotspot-objektet
innehåller en länk.
Namnen på alla ramar i det aktuella dokumentet visas i listan. Om du anger en
ram som inte finns när dokumentet öppnas i en webbläsare, läses den länkade
sidan in i ett nytt fönster med det angivna namnet. Du kan också välja bland
följande reserverade målnamn:
•
•
_blank
•
_self
•
_top
läser in den länkade filen i ett nytt, namnlöst webbläsarfönster.
läser in den länkade filen i det överordnade objektet (en
ramuppsättning eller ett fönster) för ramen som innehåller länken. Om ramen
som innehåller länken inte är kapslad läses den länkade filen in i hela
webbläsarfönstret.
_parent
läser in den länkade filen i samma ram eller fönster som länken. Detta är
standardvärdet, så det behöver vanligtvis inte anges.
läser in den länkade filen i hela webbläsarfönstret, vilket gör att alla ramar
tas bort.
anger alternativ text som visas i stället för bilden i webbläsare som endast visar
text eller som är konfigurerade att ladda ned bilder manuellt.
Alt
270
Kapitel 11
Ändra en klickbar bild
Du kan enkelt redigera de hotspot-objekt du skapar i en klickbar bild. Du kan
flytta ett hotspot-område, ändra storlek på hotspot-objekt och flytta en hotspot
framåt eller bakåt i skikt.
Du kan också kopiera en bild med hotspot-objekt från ett dokument till ett annat
eller kopiera ett eller flera hotspot-objekt från en bild och klistra in dem i en
annan bild. Hotspot-objekt som är associerade med bilden kopieras också till det
nya dokumentet.
Så här markerar du flera hotspot-objekt i en klickbar bild:
1
Markera en hotspot med hotspot-pekverktyget.
2
Gör något av följande:
• Skift-klicka på de andra hotspot-objekten som du vill markera.
• Tryck på Ctrl+A (Windows) eller Kommando+A (Macintosh) om du vill
markera samtliga hotspot-objekt.
Så här flyttar du en hotspot:
1
Markera hotspot-objektet med hotspot-pekverktyget.
2
Gör något av följande:
• Dra hotspot-objektet till ett nytt ställe.
• Tryck på Skift + piltangenterna om du vill flytta hotspot-objektet 10
bildpunkter i taget i angiven riktning.
• Tryck på piltangenterna om du vill flytta hotspot-objektet 1 bildpunkt i taget i
angiven riktning.
Så här ändrar du storlek på en hotspot:
1
Markera hotspot-objektet med hotspot-pekverktyget.
2
Dra ett storlekshandtag när du vill ändra storlek eller form på hotspot-objektet.
Infoga bilder
271
Skapa en överrullningsbild
En överrullning är en bild som ändras när pekaren förs över bilden. En
överrullning består i själva verket av två bilder: den primära bilden (bilden som
visas när sidan först läses in) och överrullningsbilden (bilden som visas när
pekaren förs över den primära bilden). De båda bilderna i en överrullning bör ha
samma storlek. Om de inte har det ändras storleken på den andra bilden
automatiskt så att den motsvarar den första bildens egenskaper.
Överrullningsbilder har automatiskt inställningen att svara på händelsen
MouseOver. Information om hur du anger att en bild ska svara på en annan
händelse (exempelvis en musklickning) och hur du redigerar en överrullningsbild
så att en annan bild visas finns i ”Växla bild” på sidan 465.
Ett navigationsfält är en mer komplex form av överrullningsbild. Använd
kommandot Infoga > Interaktiva bilder > Navigationsfält när du vill skapa ett
navigationsfält. Se ”Infoga ett navigationsfält” på sidan 367.
Så här skapar du en överrullning:
1
Placera insättningspunkten där du vill att överrullningen ska visas i
dokumentfönstret.
2
Infoga överrullningen på något av följande sätt:
• Klicka på ikonen Infoga överrullningsbild i kategorin Vanlig på objektpanelen.
• Dra ikonen Infoga överrullningsbild i kategorin Vanlig på objektpanelen till
önskad plats i dokumentfönstret.
• Välj Infoga > Interaktiva bilder > Överrullningsbild.
Dialogrutan Infoga överrullningsbild visas.
3
I fältet Bildnamn skriver du ett namn på överrullningsbilden.
4
I fältet Originalbild klickar du på Bläddra och markerar bilden du vill ska visas
när sidan läses in. Du kan också skriva sökvägen till bilden.
5
I fältet Överrullningsbild klickar du på Bläddra och markerar bilden du vill ska visas
när pekaren förs över originalbilden. Du kan också skriva sökvägen till bilden.
6
Om du vill att bilder ska förhandsladdas i webbläsarens cache så att de läses in
snabbare markerar du alternativet Förhandsladda överrullningsbild.
7
I fältet Vid klickning, gå till URL klickar du på Bläddra och markerar filen du
vill ska öppnas när en användare klickar på överrullningsbilden. Du kan också
skriva sökvägen till filen.
Obs! Om du inte anger en länk för bilden infogas en ingenstanslänk (#) i den HTMLkällkod som överrullningsbeteendet är kopplat till. Om du tar bort ingenstanslänken
slutar överrullningsbilden att fungera.
8
272
Kapitel 11
Klicka på OK när du vill stänga dialogrutan Infoga överrullningsbild.
Så här testar du en överrullning:
1
Välj Arkiv > Förhandsgranska i webbläsare eller tryck på F12.
2
För pekaren över originalbilden i webbläsaren.
Bilden bör nu växla över till överrullningsbilden.
Använda en extern bildredigerare
När du utformar HTML-sidor i Dreamweaver är det enkelt att redigera bilder i en
bildredigerare under arbetets gång. Från Dreamweaver kan du öppna en markerad
bild i en extern bildredigerare. När du återgår till Dreamweaver efter att ha sparat
bildfilen syns alla ändringar du har gjort i bilden i dokumentfönstret.
Du kan använda Macromedia Fireworks som extern bildredigerare. I Fireworks 3
och Fireworks 4 används Design Notes för att hålla reda på var den ursprungliga
PNG-filen finns på hårddisken.
I Fireworks 2 används inte Design Notes. I stället uppmanas du att leta reda på
den ursprungliga PNG-filen. I Fireworks 1 söks mappen med den markerade filen
automatiskt igenom efter en PNG-fil med samma namn. Om du exempelvis
markerar en bild vars källfil är Bilder/mittFoto.gif och mappen Bilder också
innehåller en fil med namnet mittFoto.png, då är det PNG-filen som öppnas.
Mer information om hur du arbetar med Fireworks och Dreamweaver samtidigt
finns i ”Använda Dreamweaver och Fireworks tillsammans” på sidan 277.
Om du anger något annat bildredigeringsprogram som extern bildredigerare och
startar det från Dreamweaver, öppnas den markerade bilden (exempelvis Bilder/
mittFoto.gif ) när programmet har startats. Ändra bilden i bildredigeraren, spara
ändringarna och visa sedan den uppdaterade, ändrade bilden i Dreamweaver.
Du kan också manuellt öppna den ursprungliga filen som GIF-filen har skapats
från (minlogo.png kan exempelvis vara den ursprungliga Fireworks-filen), göra
ändringar och spara den ändrade bilden. Bilden uppdateras även då i
dokumentfönstret när du återgår till Dreamweaver.
Om bilden inte är uppdaterad i Dreamweaver-fönstret markerar du bilden och
klickar på knappen Uppdatera i egenskapskontrollen.
Infoga bilder
273
Ange inställningar för en extern bildredigerare
I dialogrutan Inställningar kan du ange vilken bildredigerare som ska startas när
du vill redigera bilder med ett visst filtillägg. Du kan exempelvis ange att
Fireworks ska startas när du vill redigera en GIF-bild och att en annan
bildredigerare ska startas när du vill redigera en JPEG-bild.
Du kan ange fler än en extern redigerare för ett filtillägg. När du sedan vill
redigera bilden använder du snabbmenyn för att välja vilken redigerare som ska
startas.
Så här anger du en extern bildredigerare för en befintlig filtyp:
1
Öppna dialogrutan Inställningar för filtyper/redigerare genom att göra något av
följande:
• Välj Redigera > Inställningar och markera kategorin Filtyper/Redigerare.
• Välj Redigera > Redigera med extern redigerare och markera kategorin Filtyper/
Redigerare.
2
I listan Tillägg markerar du det filtillägg som du vill ange en extern redigerare
för.
3
Klicka på plustecknet (+) ovanför listan Redigerare.
4
I dialogrutan Välj extern redigerare bläddrar du till det program som du vill
starta som redigerare för denna filtyp.
5
I dialogrutan Inställningar klickar du på Gör primär om du vill att redigeraren
ska vara den primära redigeraren för denna filtyp.
6
Upprepa steg 3 och 4 om du vill ange ytterligare en redigerare för filtypen.
Den primära redigeraren används automatiskt när du väljer att redigera denna
bildtyp. Du kan välja de andra angivna redigerarna på snabbmenyn för bilden i
dokumentfönstret.
274
Kapitel 11
Så här lägger du till en ny filtyp i listan Tillägg:
1
Öppna dialogrutan Inställningar för filtyper/redigerare genom att göra något av
följande:
• Välj Redigera > Inställningar och markera kategorin Filtyper/Redigerare.
• Välj Redigera > Redigera med extern redigerare och markera kategorin Filtyper/
Redigerare.
2
Klicka på plustecknet (+) ovanför listan Tillägg.
3
Skriv filtillägget för den bildtyp du vill redigera (exempelvis .JPEG).
4
Om du vill ange en extern redigerare klickar du på plustecknet (+) ovanför
listan Redigerare.
5
I dialogrutan som visas väljer du det program som du vill använda för att
redigera denna bildtyp.
6
Klicka på Gör primär om du vill att redigeraren ska vara den primära
redigeraren för bildtypen.
Så här ändrar du en befintlig redigerarinställning:
1
I inställningarna för filtyper/redigerare klickar du på det filtillägg vars redigerare
du vill ändra.
2
Klicka på plustecknet (+) eller minustecknet (–) ovanför listan Redigerare när
du vill lägga till eller ta bort en redigerare.
Mer information om de andra alternativen i inställningarna för externa redigerare
finns i ”Starta en extern redigerare” på sidan 294.
Starta en extern bildredigerare
Du väljer Redigera > Inställningar och markerar kategorin Filtyper/Redigerare när
du vill ange en extern bildredigerare för de bildfilstyper som du definierar. När du
har valt en extern bildredigerare kan du starta den och redigera bilder samtidigt
som du arbetar i ditt Dreamweaver-dokument.
Gör något av följande när du vill starta den externa bildredigeraren:
• Dubbelklicka på bilden du vill redigera.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på bilden du vill
redigera och välj Redigera med på snabbmenyn för en redan definierad
redigerare. Du kan också välja Bläddra för att ange en annan redigerare.
• Markera bilden du vill redigera och klicka på Redigera i egenskapskontrollen.
• Dubbelklicka på bildfilen i platsfönstret när du vill starta den primära
bildredigeraren. Om du inte har angett någon bildredigerare startas filtypens
standardredigerare.
Infoga bilder
275
Obs! Fireworks integreringsfunktioner (som beskrivs ovan) används inte när du öppnar
en bild från platsfönstret, d.v.s. den ursprungliga PNG-filen öppnar inte i Fireworks. Du
måste öppna bilden i dokumentfönstret om du vill använda integreringsfunktionerna.
Använda beteenden på bilder
Du kan använda alla tillgängliga beteenden på bilder och hotspot-objekt i bilder.
När du använder ett beteende på ett hotspot-objekt infogas HTML-källkoden i
koden AREA. Tre beteenden gäller specifikt för bilder: Förhandsladda bilder, Växla
bild och Växla bildåterställning.
läser in bilder, som inte visas på sidan direkt (exempelvis
sådana som ska växlas in med hjälp av tidslinjer, beteenden, skikt eller JavaScript),
i webbläsarens cacheminne. Detta gör att det inte uppstår fördröjningar på grund
av nedladdning när det är dags för bilderna att visas. Se ”Förhandsladda bilder” på
sidan 457.
Förhandsladda bilder
växlar en bild mot en annan genom att ändra attributet SRC för IMGkoden. Använd denna åtgärd när du vill skapa överrullningsknappar och andra
bildeffekter (exempelvis växling av mer än en bild i taget). Se ”Växla bild” på
sidan 465.
Växla bild
återställer den senaste uppsättningen växlade bilder till
deras ursprungliga källfiler. Som standard läggs denna åtgärd till automatiskt när
du kopplar åtgärden Växla bild till ett objekt. Du ska aldrig behöva välja den
manuellt. Se ”Växla bildåterställning” på sidan 466.
Växla bildåterställning
Du kan också använda beteenden för att skapa mer avancerade navigationssystem,
exempelvis navigationsfält eller hoppmenyer. Se ”Skapa navigationsfält” på
sidan 366 och ”Skapa hoppmenyer” på sidan 364.
276
Kapitel 11
12
KAPITEL 12
Använda Dreamweaver och Fireworks
tillsammans
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tack vare unika integreringsfunktioner kan du enkelt arbeta på samma filer med
både Macromedia Dreamweaver 4 och Macromedia Fireworks 4. Dreamweaver
och Fireworks har många gemensamma filredigeringsfunktioner, inklusive
ändringar av länkar, avbildningar, tabellskivor m m. Tillsammans erbjuder de två
programmen ett effektivt arbetsflöde för redigering, optimering och montering av
webbbgrafikfiler på HTML-sidor.
Om du vill ändra Fireworks-bilder och Fireworks-tabeller som monterats i ett
Dreamweaver-dokument kan du starta Fireworks och göra redigeringar för att
sedan återgå till det uppdaterade dokumentet i Dreamweaver. Om du vill göra
snabba optimeringsredigeringar av monterade bilder och animeringar i Fireworks,
kan du öppna Fireworks dialogruta för optimering och ange uppdaterade
inställningar. I båda fallen kommer uppdateringar att göras av de monterade
filerna i Dreamweaver såväl som av Fireworks källfiler, om dessa källfiler har
öppnats.
Montera Fireworks-filer i Dreamweaver
Du kan montera Fireworks-bilder och HTML-kod i Dreamweaver på ett antal
olika sätt. I Dreamweaver kan du använda infogningsfunktionerna för att montera
Fireworks-filer i dokument. Från Fireworks kan du exportera filer direkt till en
Dreamweaver webbplatsmapp, eller så kan du kopiera och klistra in koden i ett
Dreamweaver-dokument.
277
Montera Fireworks-bilder i Dreamweaver
Du kan montera Fireworks-genererade bilder i formaten GIF, JPEG och PNG
direkt i ett Dreamweaver-dokument.
Så här infogar du en Fireworks-bild i ett Dreamweaver-dokument:
1
2
•
•
3
Placera infogningspunkten där du vill att bilden ska visas i Dreamweavers
dokumentfönster.
Gör något av följande:
Välj Infoga > Bild.
Klicka på knappen Infoga bild på kategorin Vanlig på objektpanelen.
Bläddra dig fram till den önskade Fireworks-filen och klicka på Öppna.
Om Fireworks-filen inte befinner sig på den aktuella Dreamweaver-webbplatsen,
visas ett meddelande som frågar om du vill kopiera filen till rotmappen.
Infoga Fireworks HTML-kod i Dreamweaver
Med Dreamweaver kan du infoga HTML-kod som skapats i Fireworks
tillsammans med associerade bilder, skivor och JavaScript-kod i ett dokument.
Denna infogningsfunktion gör det lätt för dig att lägga till tabeller eller
avbildningar som du skapat i Fireworks i ett Dreamweaver-dokument.
Så här infogar du Fireworks HTML i ett Dreamweaver-dokument:
1
2
3
•
•
4
5
I Dreamweaver sparar du ditt dokument på en angiven webbplats.
Placera infogningspunkten på den plats i dokumentet där du vill att HTMLkoden ska börja.
Gör något av följande:
Välj Infoga > Interaktiva bilder > Fireworks HTML.
Klicka på knappen Infoga Fireworks HTML på kategorin Vanlig på
objektpanelen.
I dialogrutan som öppnas klickar du på Bläddra för att välja den önskade
Fireworks HTML-filen.
Markera valet Ta bort filen när den är infogad för att flytta HTML-filen till
papperskorgen när infogningen är klar.
Använd detta val om du inte längre behöver Fireworks HTML-fil när du har
infogat den. Detta val påverkar inte PNG-källfilen som är associerad med
HTML-filen.
Obs! Om HTML-filen befinner sig på nätverksenheten tas den bort permanent och
flyttas inte till papperskorgen.
6
278
Kapitel 12
Klicka på OK för att infoga HTML-koden tillsammans med dess associerade
bilder, skivor och JavaScript-kod i Dreamweaver-dokumentet.
Kopiera och klistra in Fireworks HTML i Dreamweaver
Ett annat snabbt sätt att montera Fireworks-bilder och tabeller i Dreamweaver är att
kopiera och klistra in Fireworks HTML-kod direkt i Dreamweaver-dokumentet.
Så här kopierar du och klistrar in Fireworks HTML i Dreamweaver:
1
I Fireworks väljer du Redigera > Kopiera HTML-kod.
2
Följ guiden som hjälper dig igenom inställningarna för att exportera din
HTML-kod och dina bilder. När du blir tillfrågad anger du Dreamweavers
webbplatsmapp som mapp för exporterade bilder.
Guiden exporterar bilderna till den angivna mappen och kopierar HTMLkoden till Urklipp.
3
In Dreamweaver placerar du infogningspunkten på det ställe i dokumentet där
du vill klistra in HTML-koden och väljer Redigera > Klistra in.
All kod för HTML och JavaScript som är kopplad till de Fireworks-filer du
exporterar kopieras till Dreamweaver-dokumentet och alla länkar till bilder
uppdateras.
Så här exporterar du och klistrar in Fireworks HTML i Dreamweaver:
1
I Fireworks väljer du Arkiv > Exportera.
2
I dialogrutan Exportera anger du Dreamweavers webbplatsmapp som målmapp
för exporterade bilder.
3
Välj HTML och Bilder från snabbmenyn Filformat.
4
Välj Kopiera till Urklipp från snabbmenyn HTML och klicka på Spara.
5
In Dreamweaver placerar du infogningspunkten på det ställe i dokumentet där
du vill klistra in HTML-koden och väljer Redigera > Klistra in.
All kod för HTML och JavaScript som är kopplad till de Fireworks-filer du
exporterar kopieras till Dreamweaver-dokumentet och alla länkar till bilder
uppdateras.
Använda Dreamweaver och Fireworks tillsammans
279
Exportera Fireworks-filer till Dreamweaver
Med kommandot Arkiv > Exportera i Fireworks kan du exportera och spara
optimerade bilder och HTML-filer på en plats i den önskade Dreamweaverwebbmappen. Du kan sedan öppna filerna för redigering i Dreamweaver.
Alternativt kan du exportera Fireworks-filer som överlappande formatmallslager
(Cascading Style Sheets, CSS) eller Dreamweaver biblioteksposter. Dreamweaver
biblioteksposter förenklar processen att redigera och uppdatera ett element som
används ofta på en webbplats, som till exempel en rad med sidfotslänkar eller en
navigationsrad. En bibliotekspost är en del av en HTML-fil som finns i mappen
Library i webbplatsens rotmapp. Du kan dra kopior av en bibliotekspost till vilken
sida som helst på din webbplats.
Så här exporterar du Fireworks-bilder och HTML till Dreamweaver:
1
I Fireworks väljer du Arkiv > Exportera.
2
Välj HTML och Bilder från snabbmenyn Filformat.
3
Välj Exportera HTML-fil från snabbmenyn HTML.
4
Ange en mapp i Dreamweavers webbplatsmapp.
5
Klicka på Spara för att exportera dina filer.
Så här exporterar du Fireworks-filer som CSS-lager:
280
Kapitel 12
1
I Fireworks väljer du Arkiv > Exportera.
2
Välj CSS-lager (.htm) från snabbmenyn Filformat.
3
Ange en mapp i Dreamweavers webbplatsmapp.
4
Klicka på Spara för att exportera dina filer.
Så här exporterar du en Fireworks-fil som en Dreamweaver bibliotekspost:
1
I Fireworks väljer du Arkiv > Exportera.
2
Välj Dreamweaver-bibliotek (.lbi) från snabbmenyn Filformat
3
Namnge filen och ange en målmapp med namnet Library i rotmappen för
Dreamweaver-webbplatsen.
Om det behövs ber Fireworks dig att skapa denna mapp.
4
Klicka på Spara för att exportera filen.
Använda Dreamweaver och Fireworks tillsammans
281
Starta Fireworks inifrån Dreamweaver
Du kan starta Fireworks direkt från ett Dreamweaver-dokument genom att
målsätta en monterad bild, tabellskiva eller tabell från Fireworks för redigering
eller optimering. För att dessa starta-och-redigera-funktioner ska fungera måste du
ange Fireworks som Extern primär extern bildredigerare i Dreamweaver.
Ange Fireworks som primär extern bildredigerare i Dreamweaver
Dreamweaver 4 erbjuder inställningar för automatisk öppning av vissa program
för att redigera vissa filtyper. Innan du använder Fireworks starta- och redigerafunktioner bör du se till att Fireworks 4 har angetts som primär redigerare för
filformaten GIF, JPEG och PNG i Dreamweaver.
Även om du kan använda tidigare versioner av Fireworks som externa
bildredigerare, har dessa versioner begränsad start- och redigerings-funktionalitet.
Fireworks 3 ger inte fullt stöd för öppning och redigering av monterade tabeller
och skivor i tabeller, medan Fireworks 2 inte stödjer öppning och redigering av
PNG-källfiler för monterade bilder.
Så här anger du Fireworks 4 som primär extern bildredigerare i Dreamweaver 4:
282
Kapitel 12
1
I Dreamweaver väljer du Redigera > Inställningar och väljer Filtyper/Redigerare.
2
I listan Tillägg väljer du ett webbfilstillägg (.gif, .jpg eller .png).
3
I listan Redigerare väljer du Fireworks 4 och klickar på Gör primär.
4
Upprepa steg 2 och 3 för att ange Fireworks 4 som primär redigerare för andra
webbfilstillägg.
Om utformningsanteckningar och källfiler
När du exporterar en Fireworks-fil från en sparad PNG-källa till en Dreamweaverwebbplats, skriver Fireworks en utformningsanteckning som innehåller information om filen. När du till exempel exporterar en Fireworks-tabell skriver Fireworks
en utformningsanteckning för varje exporterad skivfil och även för HTML-filen
som sätter ihop tabellskivorna. Dessa utformningsanteckningar innehåller referenser till PNG-filen som utgjorde källan till de exporterade filerna.
När du öppnar och redigerar en Fireworks-bild inifrån Dreamweaver använder
Dreamweaver utformningsanteckningen för att hitta en PNG-källa för filen. Du
erhåller bäst resultat om du sparar din PNG-källfil och dina exporterade filer från
Fireworks i en Dreamweaver-webbplats. Användaren som delar webbplatsen kan
då hitta PNG-källan när Fireworks startas inifrån Dreamweaver.
Ange start- och redigeringsinställningar för källfiler från
Fireworks
Med start- och redigeringsinställningarna i Fireworks kan du ange hur PNGkällfiler ska hanteras när Fireworks-filer öppnas från andra program, såsom
Macromedia Director eller Dreamweaver.
Dreamweaver känner bara igen start- och redigeringsinställningarna i Fireworks i
vissa fall när du öppnar och optimerar en Fireworks-bild. Du måste öppna och
optimera en bild som inte utgör en del av en Fireworks-tabell och som inte
innehåller en utformningsanteckning med en korrekt sökväg till en PNG-källfil. I
alla andra fall, inklusive alla fall av start och redigering av Fireworks-bilder, öppnar
Dreamweaver automatiskt PNG-källfilen och ber dig lokalisera källfilen om den
inte kan hittas.
Så här anger du start- och redigeringsinställningar för Fireworks:
1
I Fireworks väljer du Redigera > Inställningar och klickar på fliken Starta och
redigera (Windows) eller väljer Starta och redigera från snabbmenyn (Macintosh).
2
Ange inställningsvalen som ska användas vid redigering eller optimering av
Fireworks-bilder som monterats i externa program:
öppnar automatiskt PNG-filen från Fireworks som har
definierats som källan för den monterade bilden i utformningsanteckningarna.
Uppdateringar görs både av PNG-källan och dess motsvarande monterade bild.
Använd alltid käll-PNG
Använd aldrig käll-PNG öppnar
automatiskt den monterade Fireworks-bilden
oavsett om en PNG-källa finns eller ej. Uppdateringar görs endast av den
monterade bilden.
ger dig möjlighet att välja om du vill öppna PNG-källfilen eller
ej. När du redigerar en monterad bild, visar Fireworks ett meddelande som ber
dig göra ett val för Starta och redigera. Här kan du också ange globala start- och
redigeringsinställningar.
Fråga vid start
Använda Dreamweaver och Fireworks tillsammans
283
Redigera Fireworks-filer som monterats i
Dreamweaver
Med Starta- och redigera-integrering kan du använda Fireworks för att redigera
bilder och tabeller som skapats i Fireworks och monterats i ett Dreamweaverdokument. Dreamweaver startar automatiskt Fireworks så att du kan redigera
Fireworks-bilden. Uppdateringarna som du gör i Fireworks tillämpas automatiskt
på den monterade bilden i Dreamweaver.
Fireworks känner igen och bevarar många redigeringar som görs av dokumentet i
Dreamweaver, inklusive ändring av länkar, redigering av avbildningar och redigering
av text i skivor. Med hjälp av egenskapskontrollen i Dreamweaver kan du identifiera
bilder, tabellskivor och tabeller som skapats av Fireworks i ett dokument.
Redigera Fireworks-bilder
Du kan starta Fireworks för att redigera enskilda bilder som monterats i ett
Dreamweaver-dokument.
Så här öppnar du och redigerar en Fireworks-bild som monterats i Dreamweaver:
1
I Dreamweaver väljer du Fönster > Egenskaper för att öppna
egenskapskontrollen om den inte redan är öppen.
2
Gör något av följande:
• Markera önskad bild. (egenskapskontrollen känner igen markeringen av en
Fireworks-bild och visar namnet på den kända PNG-källfilen för bilden.)
Klicka på Redigera på egenskapskontrollen.
• Håll ned Ctrl (Windows) eller kommando (Macintosh) och dubbelklicka på
bilden som du vill redigera.
• Högerklicka (Windows) eller kontrollklicka (Macintosh) på den önskade
bilden och välj Redigera med Fireworks 4 från snabbmenyn.
Dreamweaver startar Fireworks om programmet inte redan är igång.
284
Kapitel 12
3
Om du tillfrågas anger du att du vill öppna en källfil från Fireworks för den
monterade bilden.
4
Redigera bilden i Fireworks. Dokumentfönstret anger att du ändrar en bild från
Dreamweaver.
Dreamweaver uppfattar och bevarar alla ändringar som görs av bilden i
Fireworks.
5
När du är klar med redigeringen klickar du på Klar i dokumentfönstret.
När du klickar på Klar exporteras bilden med de aktuella optimeringsinställningarna för PNG-källfilen. GIF- eller JPEG-filen som används av Dreamweaver uppdateras och om en källfil har angetts sparas PNG-källfilen.
Obs! När du öppnar en bild från Dreamweavers webbplatsfönster, fungerar inte
Fireworks integreringsfunktioner som beskrevs ovan och Fireworks öppnar inte den
ursprungliga PNG-filen. Du måste öppna bilder inifrån Dreamweavers dokumentfönster
för att kunna använda integreringsfunktionerna.
Redigera Fireworks-tabeller
När du öppnar och redigerar en bildskiva som är en del av en Fireworks-tabell,
öppnar Dreamweaver automatiskt PNG-källfilen för hela tabellen.
Så här öppnar du och redigerar en Fireworks-tabell som monterats i
Dreamweaver:
1
I Dreamweaver väljer du Fönster > Egenskaper för att öppna
egenskapskontrollen om den inte redan är öppen.
2
Gör något av följande:
• Klicka i tabellen och klicka på taggen TABLE på statusraden för att markera hela
tabellen. (egenskapskontrollen uppfattar markeringen av en Fireworks-tabell
och visar namnet på den kända PNG-källfilen för tabellen.) Klicka sedan på
Redigera på egenskapskontrollen.
• Klicka på det övre vänstra hörnet i tabellen för att markera den och klicka
därerfter på Redigera på egenskapskontrollen.
• Markera önskad tabellskiva och klicka på Redigera på egenskapskontrollen.
• Håll ned Ctrl (Windows) eller kommando (Macintosh) och dubbelklicka på
bilden som du vill redigera.
• Högerklicka (Windows) eller kontrollklicka (Macintosh) på den önskade
tabellskivan och välj Redigera med Fireworks 4 från snabbmenyn.
Dreamweaver startar Fireworks om programmet inte redan är igång. PNGkällfilen för hela tabellen visas i dokumentfönstret.
Använda Dreamweaver och Fireworks tillsammans
285
3
4
Redigera tabellbilden i Fireworks.
Dreamweaver uppfattar och bevarar alla ändringar som görs av bilden i
Fireworks.
När du är klar med redigeringen klickar du på Klar i dokumentfönstret.
När du klickar på Klar exporteras HTML- och bildskivsfilerna för tabellen med
de aktuella optimeringsinställningarna, tabellen uppdateras i Dreamweaver och
PNG-källfilen sparas. Fireworks exporterar och ersätter endast de HTML- och
bildskivsfiler som behövs för att uppdatera tabellen i Dreamweaver.
Optimera bilder och animeringar från
Fireworks som monterats i Dreamweaver
Du kan starta Fireworks från Dreamweaver för att göra snabba exportändringar,
som t ex att sampla om eller ändra filtypen för monterade bilder och animeringar
från Fireworks. Med Fireworks kan du göra ändringar av inställningar för
optimering och animering och ändra den exporterade bildens storlek och område.
Så här ändrar du optimeringsinställningar för en Fireworks-bild som monterats i
Dreamweaver:
1
2
3
I Dreamweaver markerar du den önskade bilden och väljer Kommandon >
Optimera bilden i Fireworks.
Om du tillfrågas anger du om du vill öppna en källfil från Fireworks för den
monterade bilden.
Gör de önskade ändringarna i optimeringsdialogrutan i Fireworks:
• Klicka på fliken Alternativ för att redigera optimeringsinställningar. För mer
information, se Using Fireworks.
286
Kapitel 12
• Om du vill ändra storleken och ytan på den exporterade bilden, klickar du på
•
4
fliken Fil. För mer information, se ”Ändra storlek på monterade Fireworksbilder” på sidan 287.
Om du vill redigera animeringar klickar du på fliken Animering. För mer
information, se ”Redigera monterade Fireworks-animeringar” på sidan 288.
När du är klar med redigeringen av bilden klickar du på Uppdatera.
När du klickar på Uppdatera exporteras bilden med de nya
optimeringsinställningarna, GIF- eller JPEG-filerna som monterats i
Dreamweaver uppdateras och om en källfil har angetts sparas PNG-källfilen.
Om du har ändrat bildens format kommer länkkontrollen i Dreamweaver be
dig att uppdatera referensen till bilden. Om du t ex har ändrat formatet på en
bild med namnet min_bild från GIF till JPEG och klickar på OK i den här
dialogrutan kommer alla referenser på din webbplats att ändras från
min_bild.gif till min_bild.jpg.
Ändra storlek på monterade Fireworks-bilder
När du öppnar och optimerar en Fireworks-bild från Dreamweaver, kan du ändra
storlek på bilden och ange ett visst bildområde som ska exporteras.
Så här anger du bilddimensioner för export:
1
Klicka på fliken Fil i optimeringsdialogrutan i Fireworks.
2
Om du vill skalförändra bilden vid export anger du en procentuell
skalförändring eller skriver in önskad bredd och höjd i bildpunkter. Markera
valet Begränsa för att skalförändra bredden och höjden proportionerligt.
3
Markera valet Exportera område och ange koordinater för att exportera en del
av dokumentet:
• Dra den streckade ramen som visas kring förhandsvisningen tills den innesluter
det önskade exportområdet. (Dra inuti förhandsvisningen för att flytta dolda
områden så att de syns.)
• Skriv in bildpunktkoordinater för exportområdets begränsningsyta.
Använda Dreamweaver och Fireworks tillsammans
287
Redigera monterade Fireworks-animeringar
Om du öppnar och optimerar en monterad Fireworks-animering, kan du också
redigera animeringsinställningarna. Animeringsinställningarna i
optimeringsdialogrutan liknar de som finns på bildrutepanelen i Fireworks.
Så här redigerar du en animerad bild:
1
Klicka på fliken Animering i optimeringsdialogrutan i Fireworks.
2
Använd följande tekniker för att förhandsvisa animeringsbildrutor när som helst:
• Om du vill visa en enstaka bildruta, markerar du bildrutan i listan till vänster i
dialogrutan eller använder bildrutekontrollerna i det nedre högra området i
dialogrutan.
• Om du vill spela upp animeringen klickar du på kontrollerna Spela upp/Stoppa
i det nedre högra området i dialogrutan.
3
Gör redigeringar av animeringen:
• Om du vill ange ett sätt att kasta bort bildrutor, markerar du den önskade bildrutan
i listan och väljer ett val från snabbmenyn (som visas med papperskorgen).
• Om du vill ange en bildrutefördröjning markerar du önskad bildruta i listan
och skriver in en fördröjning i hundradels sekunder.
• Om du vill att animeringen ska spelas upp om och om igen, klickar du på
Loop-knappen och väljer hur många gånger animeringen ska upprepas från
snabbmenyn.
• Markera valet Automatisk beskärning för att beskära varje bildruta som ett
rektangulärt område så att endast det bildområde som skiljer sig mellan
bildrutor exporteras. Om du aktiverar detta val minskar filstorleken.
• Markera valet Automatisk differens för att endast exportera bildpunkter som
ändras mellan bildrutorna. Om du aktiverar detta val minskar filstorleken.
288
Kapitel 12
Uppdatera Fireworks HTML som monterats
i Dreamweaver
Kommandot Arkiv > Uppdatera HTML erbjuder ett alternativ till starta- och
redigera-tekniken för uppdatering av Fireworks-filer som monterats i
Dreamweaver. Med Uppdatera HTML kan du redigera en PNG-källbild i
Fireworks och sedan automatiskt uppdatera eventuellt exporterad HTML-kod
och bildfiler som monterats i ett Dreamweaver-dokument. Med detta kommando
kan du uppdatera Dreamweaver-filer även när Dreamweaver inte är igång.
Så här uppdaterar du Fireworks HTML som monterats i Dreamweaver:
1
I Fireworks väljer du Arkiv > Uppdatera HTML.
2
Leta reda på Dreamweaver-filen som innehåller den HTML-kod som du vill
uppdatera och klicka på Öppna.
3
Leta rätt på mappen där du vill spara de uppdaterade bildfilerna och klicka på Välj.
Fireworks uppdaterar HTML- och JavaScript-koden i Dreamweaverdokumentet. Fireworks exporterar också uppdaterade bilder som är knutna till
HTML-koden och lägger bilderna i den angivna målmappen.
Om Fireworks inte kan hitta motsvarande HTML att uppdatera får du
möjlighet att infoga ny HTML-kod i Dreamweaver-dokumentet. Fireworks
placerar den nya kodens JavaScript-avsnitt i början av dokumentet och placerar
HTML-tabellen eller bildlänken i början.
Skapa webbfotoalbum
Med kommandot Skapa webbfotoalbum i Dreamweaver kan du automatiskt
skapa en webbplats som visar upp ett bildalbum från en given mapp. Detta
kommando använder JavaScript-kod för att anropa Fireworks, som skapar en
miniatyrbild och en förstoring för var och en av bilderna i mappen. Dreamweaver
skapar sedan en webbsida med alla miniatyrbilderna och länkar till förstoringar.
Du måste ha både Dreamweaver och Fireworks installerade i ditt system för att
kunna använda kommandot Skapa webbfotoalbum.
Börja med att placera alla bilder som du vill ha i fotoalbumet i en mapp. (Mappen
behöver inte befinna sig på någon webbplats.) Se även till att bildfilsnamnen har
namntillägg som kommandot Skapa webbfotoalbum känner igen (.gif, .jpg, .jpeg,
.png, .psd, .tif och .tiff ). Bilder med filtillägg som programmet inte känner igen
tas inte med i fotoalbumet.
Använda Dreamweaver och Fireworks tillsammans
289
Så här skapar du ett webbfotoalbum:
1
I Dreamweaver väljer du Kommandon > Skapa webbfotoalbum.
2
I fältet Fotoalbumstitel skriver du in en titel. Titeln visas i en grå rektangel
överst på sidan med miniatyrbilderna.
Om du vill kan du skriva in ytterligare två rader med text som ska visas under
titeln i textfälten Underrubriksinformation och Annan information.
3
Välj mappen som innehåller bilderna genom att klicka på knappen Bläddra
bredvid textfältet Källbildsmapp. Välj sedan (eller skapa) en mapp där du vill
placera alla exporterade bilder och HTML-filer genom att klicka på knappen
Bläddra bredvid textfältet Målmapp.
Målmappen bör inte innehålla något fotoalbum sedan tidigare. Om den gör
det kommer nya bilder med samma namn som gamla bilder att ersätta
befintliga miniatyrbilds- och bildfiler.
4
Välj visningsalternativ för miniatyrbilderna:
• Välj en storlek på miniatyrbilderna från snabbmenyn Miniatyrbildsstorlek.
Bilderna skalförändras proportionerligt för att skapa miniatyrbilder som passar
i en kvadrat med de angivna bildpunktdimensionerna.
• Om du vill visa filnamnet på varje originalbild under motsvarande
miniatyrbild, väljer du Visa filnamn.
• Ange antalet kolumner för tabellen som visar miniatyrbilderna.
5
Välj ett format för miniatyrbilderna från snabbmenyn Miniatyrbildsformat:
GIF WebSnap 128 skapar GIF-miniatyrbilder som använder en webbadaptiv
palett med upp till 128 färger.
skapar GIF-miniatyrbilder som använder en webbadaptiv
palett med upp till 256 färger.
GIF WebSnap 256
JPEG - bättre kvalitet
skapar JPEG-miniatyrbilder med bättre kvalitet och
större filstorlekar.
JPEG - mindre fil
skapar JPEG-miniatyrbilder med sämre kvalitet och mindre
filstorlekar.
6
Välj ett format för de förstorade bilderna från snabbmenyn Fotoformat. En
förstoring i det angivna formatet skapas för var och en av dina originalbilder.
Du kan ange ett annat format för dina förstoringar än det format du använt för
dina miniatyrbilder.
Obs! Du kan inte använda dina ursprungliga bildfiler som förstoringsbilder med kommandot Skapa webbfotoalbum, eftersom originalbilder med andra format än GIF och
JPEG inte alltid visas korrekt på alla webbläsare. Observera att om dina originalbilder är
JPEG-filer så kan de förstorade bilderna som skapas ge större filstorlekar och lägre
kvalitet än de ursprungliga bilderna.
290
Kapitel 12
7
8
9
10
Välj en procentuell skalförändring för bildförstoringarna.
Om du anger Skala 100 procent blir förstoringsbilderna lika stora som
originalen. Observera att skalförändringsprocenten används för alla bilder. Om
dina originalbilder inte har samma storlek kommer en skalförändring av dem
med samma procenttal kanske inte att ge önskat resultat.
Markera Skapa navigationssida för varje foto för att skapa en enskild webbsida
för varje källbild med navigationslänkar märkta Bakåt, Hem och Nästa.
Om du markerar detta val kommer miniatyrbilderna att länkas till
navigationssidorna. Om du inte markerar detta val kommer miniatyrbilderna
att länkas direkt till förstoringarna.
Klicka på OK för att skapa HTML-koden och bildfilerna för
webbfotoalbumet.
Fireworks startas (om programmet inte redan är igång) och skapar miniatyrbilderna och förstoringarna av bilderna. Detta kan ta några minuter om du har
tagit med många bilder i albumet. När processen är klar, blir programmet Dreamweaver aktivt igen och skapar sidan som innehåller miniatyrbilderna.
När en dialogruta visas som säger “Album klart” klickar du på OK. Det kan ta
några sekunder för sidan med fotoalbumet att visas. Miniatyrbilderna visas i
alfabetisk ordning sorterade efter filnamn.
Obs! Om du klickar på knappen Avbryt i dialogrutan i Dreamweaver efter att processen har
startat kommer fotoalbumet fortfarande att skapas. Det enda som sker är att Dreamweaver
inte visar upp fotoalbumets huvudsida.
Använda Dreamweaver och Fireworks tillsammans
291
292
Kapitel 12
13
KAPITEL 13
Infoga media
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
I Macromedia Dreamweaver kan du snabbt och enkelt lägga till ljud och filmer på
din webbplats. Du kan infoga och redigera mediafiler och mediaobjekt,
exempelvis Java-miniprogram, QuickTime-, Flash- och Shockwave-filmer samt
MP3-ljudfiler. Du kan också koppla Design Notes till dessa objekt. Och nu kan
du dessutom infoga Flash-knappobjekt och Flash-textobjekt från själva
Dreamweaver.
Infoga mediaobjekt
Du kan infoga Java-miniprogram, QuickTime-, Shockwave-och Flash-filmer,
Flash-objekt, ActiveX-kontroller samt andra ljud- och videoobjekt på en sida.
Gör något av följande när du vill öppna ett mediaobjekt på en sida:
• Placera insättningspunkten där du vill infoga objektet och klicka på lämplig
knapp på objektpanelen.
Shockwave-, ActiveX- och Flash-objekt har definierade knappar. Använd
knappen för insticksprogram i Netscape Navigator när du vill infoga
QuickTime-filmer och ljudfiler. Mer information finns i ”Infoga
insticksprogram för Netscape Navigator” på sidan 309.
• Dra lämplig knapp från objektpanelen till det ställe där du vill att objektet ska
visas i dokumentfönstret.
• Placera insättningspunkten där du vill infoga objektet i dokumentfönstret och
välj sedan lämpligt alternativ på undermenyn Infoga > Media eller Infoga >
Interaktiva bilder.
I de flesta fall visas en dialogruta där du kan välja en källfil och ange speciella
parametrar för mediaobjektet.
293
Tips! Om du inte vill att dessa dialogrutor ska visas väljer du Redigera > Inställningar >
Allmänt och avmarkerar alternativet Visa dialogrutan vid infogning av objekt. Om du vill
åsidosätta den angivna inställningen för visning av dialogrutor håller du ned Ctrl (Windows)
eller Alternativ (Macintosh) när du infogar objektet. (Om du exempelvis vill infoga en
platshållare för en Shockwave-film utan att ange filen håller du ned Ctrl eller Alternativ och
klickar på knappen Shockwave.)
När du klickar på knapparna på objektpanelen infogas den HTML-källkod som
behövs för att objektet eller platshållaren ska visas på sidan. Använd
egenskapskontrollen för respektive objekt när du vill ange källfil samt storlek och
andra parametrar och attribut.
Starta en extern redigerare
Du kan dubbelklicka på de flesta filer i platsfönstret för att redigera dem direkt.
Om filen är en HTML-fil öppnas den i Dreamweaver. Om det är en annan typ av
fil, exempelvis en bildfil, öppnas den i en lämplig extern redigerare, exempelvis
Macromedia Fireworks.
Alla filtyper som inte hanteras direkt i Dreamweaver kan associeras med en eller
flera externa redigerare som finns installerade på datorn. Den redigerare som
startas när du dubbelklickar på filen i platsfönstret kallas den primära redigeraren.
Du kan ange vilken redigerare som är associerad med en filtyp i inställningarna för
filtyper/redigerare.
Om mer än en redigerare är associerad med filtypen kan du starta en sekundär
redigerare för en viss fil: högerklicka (Windows) eller Kontroll-klicka (Macintosh)
på filnamnet i platsfönstret och välj en redigerare på undermenyn Öppna med på
snabbmenyn.
Oftast är den primära redigeraren samma program som startas om du
dubbelklickar på filens ikon på skrivbordet. Om du uttryckligen vill ange vilka
externa redigerare som ska startas för en angiven filtyp väljer du Redigera >
Inställningar och markerar Filtyper/Redigerare i listan Kategori. Filnamnstillägg,
exempelvis .gif, .wav och .mpg, anges till vänster under Tillägg. Associerade
redigerare för ett markerat tillägg anges till höger under Redigerare.
Du kan också bläddra efter en extern redigerare som du vill redigera filen med.
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på filen i designvyn i
dokumentfönstret och välj Redigera med > Bläddra, eller markera filen och välj
Redigera > Redigera med extern redigerare.
294
Kapitel 13
Så här lägger du till en filtyp i listan över tillägg i inställningarna för filtyper/
redigerare:
1
Klicka på plustecknet (+) ovanför listan Tillägg.
2
Ange ett filtypstillägg (inklusive punkten i början av tillägget) eller flera
likartade tillägg som du avgränsar med mellanslag.
Du kan exempelvis ange .png .jpg.
Så här lägger du till en redigerare för en viss filtyp:
1
Markera filtypstillägget i listan Tillägg.
2
Klicka på plustecknet (+) ovanför listan Redigerare.
3
I dialogrutan som visas väljer du ett program som ska läggas till i listan
Redigerare.
Välj exempelvis programikonen för Excel om du vill lägga till detta program i
listan Redigerare.
Så här tar du bort en filtyp från listan:
1
Markera filtypen i listan Tillägg.
Obs! Du kan inte ångra borttagningar av filtyper, så du bör vara helt säker på att du vill ta
bort den.
2
Klicka på minustecknet (–) ovanför listan Tillägg.
Så här gör du en redigerare till den primära redigeraren för en filtyp:
1
Markera filtypen.
2
Markera redigeraren (eller lägg till den om den inte finns med i listan).
3
Klicka på knappen Gör primär.
Så här kopplar du bort en redigerare från en filtyp:
1
Markera filtypen i listan Tillägg.
2
Markera redigeraren i listan Redigerare.
3
Klicka på minustecknet (–) ovanför listan Redigerare.
Infoga media
295
Använda Design Notes med mediaobjekt
Liksom med andra objekt i Dreamweaver kan du lägga till Design Notes i ett
mediaobjekt.
Så här lägger du till Design Notes i ett mediaobjekt:
1
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på objektet i
dokumentfönstret.
Obs! Du måste definiera platsen innan du lägger till Design Notes i objekt. Se ”Design
Notes” på sidan 130.
2
Välj Design Notes på snabbmenyn.
3
Ange Design Notes-informationen.
Du kan också lägga till en Design Note i ett mediaobjekt från platsfönstret genom
att markera filen, öppna snabbmenyn och välja Design Notes på den.
Information finns i ”Design Notes” på sidan 130.
Flash-innehåll
Macromedias Flash-teknik är den första lösningen för visning av vektorbaserade
bilder och animeringar i webbläsare. Flash Player är tillgänglig både som ett
Netscape Navigator-insticksprogram och som en ActiveX-kontroll för Microsoft
Internet Explorer på PC-datorer, och den ingår i de senaste versionerna av
Netscape Navigator, Microsoft Windows och America Online. Innan du använder
Flash-kommandona som är tillgängliga i Dreamweaver vill du kanske gå igenom
de tre olika Flash-filtyperna.
Flash-filen (.fla) är källfilen i alla projekt och skapas i programmet Flash. Denna
filtyp kan bara öppnas i Flash, inte i Dreamweaver eller i webbläsare. Du kan
öppna Flash-filen i Flash och sedan exportera den som en SWF- eller SWT-fil så
att den kan användas i webbläsare. Mer information finns i ”Använda Flashknappobjekt” på sidan 297 och ”Skapa nya knappmallar” på sidan 302.
Flash-filmfilen (.swf) är
en komprimerad version av Flash-filen (.fla), som är
optimerad för visning på webben. Denna fil kan spelas upp i webbläsare och
förhandsgranskas i Dreamweaver, men den kan inte redigeras i Flash. Det är
denna filtyp du skapar när du använder Flash-knappobjekt och Flash-textobjekt.
Mer information finns i ”Använda Flash-knappobjekt” på sidan 297 och
”Använda Flash-textobjekt” på sidan 300.
296
Kapitel 13
Flash-mallfilerna för generatorer (.swt) använder
du för att ändra och ersätta
information i en Flash-filmfil. Dessa filer används i Flash-knappobjektet, vilket
gör att du kan ändra mallen och lägga till egen text eller länkar för att skapa en
anpassad SWF-fil som infogas i dokumentet. I Dreamweaver finns dessa mallfiler i
mapparna Dreamweaver/Configuration/Flash Objects/Flash Buttons och Flash
Text.
Om du använder Flash för att utforma egna mallfiler för generatorer (se ”Skapa
nya knappmallar” på sidan 302) kan du distribuera dessa mallar till andra
medarbetare i webbdesigngruppen. De kan i sin tur spara filerna i mappen
Configuration/Flash Objects/Flash Buttons och sedan komma åt mallarna med
hjälp av Flash-knappobjektet.
Använda Flash-knappobjekt
Med Flash-knappobjektet kan du anpassa och infoga en uppsättning färdiga
Flash-knappar.
Obs! Du måste spara dokumentet innan du infogar ett Flash-knappobjekt eller Flashtextobjekt.
Så här infogar du ett Flash-knappobjekt:
1
Klicka på ikonen Infoga Flash-knapp på objektpanelen i designvyn i
dokumentfönstret, eller välj Infoga > Interaktiva bilder > Flash-knapp. Du kan
också dra ikonen Flash-knapp till dokumentfönstret.
Dialogrutan Infoga Flash-knapp visas.
Infoga media
297
2
Markera önskat knappformat i listan Format.
Ett provexemplar av knappen visas i rutan Exempel. Du kan klicka på detta
exempel för att se hur den fungerar i webbläsaren. Fältet Exempel uppdateras
emellertid inte automatiskt med de text- och teckensnittsändringar som du
eventuellt gör. Dessa ändringar visas i designvyn.
3
Skriv önskad text i fältet Knapptext (valfritt).
Skriv exempelvis Klicka här!. I detta fält accepteras bara ändringar om den
markerade knappen har en definierad {Button Text}-parameter. Detta visas i
fältet Exempel. Texten du skriver ersätter {Button Text} när du
förhandsgranskar filen.
4
Markera önskat teckensnitt i listrutan Teckensnitt och ange en teckenstorlek i
fältet Storlek.
Du behöver bara välja teckensnitt och storlek om knappen har definierade
textparametrar. Om standardteckensnittet för en knapp inte finns på datorn
markerar du ett annat teckensnitt i listrutan. Tänk på att teckensnittet som du
har valt inte visas i fältet Exempel. Du kan i stället klicka på Verkställ för att
infoga knappen på sidan så att du ser hur texten kommer att se ut.
5
Ange en dokumentrelativ eller absolut länk för knappen i fältet Länk (valfritt).
Platsrelativa länkar accepteras inte eftersom webbläsare inte känner igen dem i
Flash-filmer. Om du använder en dokumentrelativ länk bör du spara SWFfilen i samma katalog som HTML-filen. (Dokumentrelativa länkar tolkas inte
på samma sätt i olika webbläsare, så genom att spara i samma katalog kan du
vara säker på att länkarna kommer att fungera.)
6
Ange en målram eller ett målfönster för Flash-knappens länk i fältet Mål
(valfritt).
7
Ange en bakgrundsfärg för Flash-filmen i fältet Bakgrundsfärg (valfritt).
Använd färgväljaren eller skriv ett hexadecimalt värde (exempelvis #FFFFFF).
8
Ange ett filnamn för den nya SWF-filen i fältet Spara som.
Du kan använda standardfilnamnet (exempelvis button1.swf ) eller skriva ett
nytt namn. Om filen innehåller en dokumentrelativ länk måste du spara filen i
samma katalog som det aktuella HTML-dokumentet för att bevara
dokumentrelativa länkar.
9
Klicka på Hämta fler format om du vill gå till platsen Macromedia Exchange
och ladda ned fler knappformat.
Mer information finns i ”Lägga till tillägg i Dreamweaver” på sidan 89.
10
Klicka på Verkställ eller OK när du vill infoga Flash-knappen i
dokumentfönstret.
Tips! Välj Verkställ om du vill se ändringarna i designvyn och samtidigt behålla dialogrutan
öppen. Du kan då fortsätta att ändra alternativen för knappen.
298
Kapitel 13
Så här ändrar du ett Flash-knappobjekt:
1
Markera Flash-knappobjektet i designvyn.
2
I egenskapskontrollen visas Flash-knappegenskaperna. Du kan göra en del
ändringar i egenskapskontrollen. Dessa ändringar ändrar bara HTML-attribut,
exempelvis bredd, höjd och bakgrundsfärg.
3
Om du vill göra innehållsändringar visar du dialogrutan Infoga Flash-knapp
genom att göra något av följande:
• Dubbelklicka på Flash-knappobjektet.
• Klicka på Redigera i egenskapskontrollen.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) och välj Redigera på
snabbmenyn.
4
I dialogrutan Infoga Flash-knapp gör du dina ändringar i fälten enligt
anvisningarna i föregående procedur.
I designvyn kan du enkelt ändra storlek på objektet med hjälp av
storlekshandtagen. Du kan återställa objektet till ursprunglig storlek genom att
markera Återställ storlek i egenskapskontrollen. Se ”Ändra storlek på bilder och
andra element” på sidan 268.
Så här visar du en uppspelning av Flash-knappobjektet i dokumentfönstret:
1
Markera Flash-knappobjektet i designvyn.
2
Klicka på den gröna knappen Spela upp i egenskapskontrollen.
3
Klicka på den röda knappen Stopp när du vill avsluta förhandsgranskningen.
Obs! Du kan inte redigera Flash-knappobjektet när det spelas upp.
Det bör alltid förhandsgranska dokumentet i webbläsaren så att du kan
kontrollera exakt hur Flash-knappen ser ut i webbläsaren.
Infoga media
299
Använda Flash-textobjekt
Med Flash-textobjektet kan du skapa och infoga en Flash-film som bara innehåller
text. Du kan på så sätt skapa en liten film med vektorgrafik som har de teckensnitt
och den text som du önskar.
Så här infogar du ett Flash-textobjekt:
1
I designvyn i dokumentfönstret klickar du på ikonen Infoga Flash-text på
objektpanelen eller väljer Infoga > Interaktiva bilder > Flash-text.
Dialogrutan Infoga Flash-text visas.
2
Markera ett teckensnitt i listrutan Teckensnitt.
I denna lista visas alla TrueType-teckensnitt som finns installerade på datorn.
3
Ange en teckenstorlek i fältet Storlek. Värdet anges i punkter.
4
Ange stilattribut (exempelvis fet eller kursiv) och textjustering genom att klicka
på motsvarande knappar.
5
Ange textens färg i fältet Färg genom att använda färgväljaren eller skriva ett
hexadecimalt värde (exempelvis #FFFFFF).
6
Ange i fältet Överrullningsfärg vilken färg som ska visas när pekaren rullar över
Flash-textobjektet. Använd färgväljaren eller skriv ett hexadecimalt värde
(exempelvis #FFFFFF).
7
Ange önskad text i fältet Text.
Markera Visa teckensnitt om du vill att teckensnittsformatet ska visas i fältet
Text.
300
Kapitel 13
8
Om du vill associera en länk med Flash-textobjektet anger du en
dokumentrelativ eller absolut länk i fältet Länk.
Platsrelativa länkar accepteras inte eftersom webbläsare inte känner igen dem i
Flash-filmer. Om du använder en dokumentrelativ länk bör du spara SWFfilen i samma katalog som HTML-filen. (Dokumentrelativa länkar tolkas inte
på samma sätt i olika webbläsare, så genom att spara i samma katalog kan du
vara säker på att länkarna kommer att fungera.)
9
Om du har angett en länk kan du ange en målram eller ett målfönster för
denna länk i fältet Mål.
10
Ange en bakgrundsfärg för texten i fältet Bakgrundsfärg. Använd färgväljaren
eller skriv ett hexadecimalt värde (exempelvis #FFFFFF).
11
Ange ett namn på filen i fältet Spara som.
Du kan använda standardfilnamnet (exempelvis text1.swf ) eller skriva ett nytt
namn. Om filen innehåller en dokumentrelativ länk måste du spara filen i
samma katalog som det aktuella HTML-dokumentet för att bevara
dokumentrelativa länkar.
12
Klicka på Verkställ eller OK när du vill infoga Flash-texten i dokumentfönstret.
Om du klickar på Verkställ förblir dialogrutan öppen samtidigt som du kan
förhandsgranska texten i dokumentet.
Om du vill ändra eller spela upp Flash-textobjektet använder du samma procedur
som för en Flash-knapp. Se ”Använda Flash-knappobjekt” på sidan 297.
Ange egenskaper för Flash-objekt
När du öppnar egenskapskontrollen för Flash-objekt visas endast de vanligaste
egenskaperna. Klicka på maximeringsknappen längst ned till höger om du vill visa
fler egenskaper.
Egenskapskontrollen innehåller också knappen Spela upp som du kan använda för
att förhandsgranska Flash-objektet i dokumentfönstret. När du klickar på den
gröna knappen Spela upp ser du hur objektet kommer att visas i en webbläsare.
Namn anger
namnet som identifierar knappen för skript. Skriv ett namn i fältet
längst till vänster i egenskapskontrollen.
B och H anger
bredd och höjd på objektet (i bildpunkter). Du kan också ange
följande enheter: pc (pica), pt (punkter), tum, mm, cm eller % (procent av det
överordnade objektets bredd eller höjd). Förkortningen måste följa direkt efter
värdet, utan mellanslag: exempelvis 3mm.
Fil anger sökvägen till Flash-objektfilen. Klicka på mappikonen om du vill bläddra
till en fil, eller skriv en sökväg.
Infoga media
301
Justera anger
hur objektet justeras på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
Bakg anger
Redigera
en bakgrundsfärg för objektet.
öppnar dialogrutan för Flash-objekt.
Återställ storlek
återställer den markerade knappen till ursprunglig filmstorlek.
Spela upp/Stopp använder
du för att förhandsgranska Flash-objektet i
dokumentfönstret. Klicka på den gröna knappen Spela upp när du vill se objektet
i uppspelningsläge. Klicka på den röda knappen Stopp när du vill stoppa filmen
och kunna redigera objektet.
ID definierar
den valfria ActiveX-ID-parametern. Denna parameter används
vanligtvis för att överföra information mellan ActiveX-kontroller.
L-mellanr. och V-mellanr. anger
(i antal bildpunkter) mellanrum ovanför,
nedanför och på båda sidor av knappen.
Kvalitet anger
parametern QUALITY för de OBJECT- och EMBED-koder som definierar
knappen. En film ser bättre ut med en hög inställning, men det krävs också en
snabbare processor för att den ska visas korrekt på skärmen. Låg prioriterar
snabbhet före utseende, medan Hög ger bättre utseende på bekostnad av
snabbhet. Autolåg prioriterar snabbhet i första hand, men förbättrar utseendet när
det går. Autohög tar hänsyn till båda kvaliteterna, men prioriterar snabbhet före
utseende om det blir nödvändigt.
Skala anger
parametern SCALE för de OBJECT- och EMBED-koder som definierar
knapp- eller textobjektet. Denna parameter definierar hur filmen visas i området
som definierats för filmen med WIDTH- och HEIGHT-värdena. Du kan välja mellan Std
(Visa allt), Ingen kant och Exakt passning. Visa allt gör att hela filmen visas i det
angivna området med bibehållna proportioner så att förvrängning förhindras. Det
kan hända att kanter visas på två sidor om filmen. Ingen kant liknar Visa allt,
förutom att delar av filmen kan bli beskurna. Med Exakt passning fyller hela
filmen det angivna området, men proportionerna behålls inte vilket innebär att
det finns risk för förvrängning.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar. Se ”Använda
parametrar” på sidan 314.
Skapa nya knappmallar
Använd Flash tillsammans med de fristående generatormallarna när du vill skapa
nya knappmallar, med tillhörande generatortextobjekt. Du kan också ladda ned
nya knappmallar från webbplatsen Macromedia Exchange för Dreamweaver och
placera dem i mappen Flash Buttons. Mer information om hur du skapar nya
knappmallar finns i artikeln i detta ämne på Macromedias webbplats på adressen
http://www.macromedia.com/support/dreamweaver/insert_media.html. Mer
information om hur du använder tillägg finns i ”Lägga till tillägg i Dreamweaver”
på sidan 89.
302
Kapitel 13
Infoga Flash-filmer
När du infogar en Flash-film i ett dokument används både koden OBJECT
(definierad i Internet Explorer för ActiveX-kontroller) och koden EMBED (definierad
i Netscape Navigator) för att få bästa möjliga resultat i alla webbläsare. När du gör
ändringar i egenskapskontrollen för filmen omvandlar Dreamweaver värdena till
rätt parametrar för OBJECT- och EMBED-koderna.
Obs! Om du infogar en film med hjälp av Flash-filmobjektet infogas en CODEBASEparameter som instruerar Internet Explorer för Windows att automatiskt ladda ned den
ActiveX-kontroll som behövs (Flash 4 och senare). Om du inte vill att detta ska ske kan du
ändra attributet.
Så här infogar och förhandsgranskar du en Flash-film:
1
Placera insättningspunkten där du vill infoga filmen i designvyn i
dokumentfönstret.
2
Infoga filmen på något av följande sätt:
• Klicka på ikonen Infoga Flash på objektpanelen.
• Välj Infoga > Media > Flash.
• Dra ikonen Infoga Flash från objektpanelen till insättningspunkten i
dokumentet.
3
Välj en Flash-filmfil (.swf ) i dialogrutan som visas. En Flash-platshållare visas i
dokumentfönstret (vilket det inte görs för Flash-knappobjekt och Flashtextobjekt).
4
Om du vill förhandsgranska Flash-filmen i dokumentfönstret klickar du på den
gröna knappen Spela upp i egenskapskontrollen. Klicka på Stopp när du vill
avsluta förhandsgranskningen. Du kan också förhandsgranska Flash-filmen i en
webbläsare genom att trycka på F12.
Tips! Om du vill förhandsgranska allt Flash-innehåll på en sida trycker du på
Ctrl+Alt+Skift+P (Windows) eller Skift+Alternativ+Kommando+P (Macintosh). Alla Flashobjekt och Flash-filmer har inställningen Spela upp.
Infoga media
303
Ange egenskaper för Flash-filmer
Markera en Flash-film när du vill visa följande egenskaper i egenskapskontrollen.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna.
Klicka på maximeringsknappen längst ned till höger om du vill visa alla
egenskaper.
Namn anger
ett namn som identifierar filmen för skript. Skriv ett namn i fältet
längst till vänster i egenskapskontrollen.
B och H anger
bredd och höjd på filmen i bildpunkter. Du kan också ange
följande enheter: pc (pica), pt (punkter), tum, mm, cm eller % (procent av det
överordnade objektets värde). Förkortningen måste följa direkt efter värdet, utan
mellanslag: exempelvis 3mm.
Fil anger
sökvägen till Flash-filmfilen. Klicka på mappikonen om du vill bläddra
till en fil, eller skriv en sökväg.
Justera anger hur filmen är justerad på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
Bakg anger
en bakgrundsfärg för filmområdet. Denna färg visas även när filmen
inte spelas (vid inläsning och efter uppspelning).
ID definierar
den valfria ActiveX-ID-parametern. Denna parameter används
vanligtvis för att överföra information mellan ActiveX-kontroller.
L-mellanr. och V-mellanr. anger
(i antal bildpunkter) mellanrum ovanför,
nedanför och på båda sidor av filmen.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar som ska
överföras till filmen. Se ”Använda parametrar” på sidan 314. Filmen måste ha
utformats för att ta emot dessa extraparametrar.
Kvalitet anger parametern QUALITY för de OBJECT- och EMBED-koder som kör filmen.
Inställningarna står i relation till hur mycket utjämning som används under
filmens uppspelning. En film ser bättre ut med en hög inställning, men det krävs
också en snabbare processor för att den ska visas korrekt på skärmen. Låg
prioriterar snabbhet före utseende, medan Hög ger bättre utseende på bekostnad
av snabbhet. Autolåg prioriterar snabbhet i första hand, men förbättrar utseendet
när det går. Autohög tar hänsyn till båda kvaliteterna, men prioriterar snabbhet
före utseende om det blir nödvändigt.
Skala anger parametern SCALE för de OBJECT- och EMBED-koder som kör filmen. Mer
information finns i ”Ange egenskaper för Flash-objekt” på sidan 301.
Autospela spelar
Slinga gör
att filmen körs om och om igen.
Återställ storlek
304
Kapitel 13
automatiskt upp filmen när sidan läses in.
återställer den markerade filmen till ursprunglig storlek.
Infoga generatorer
Med Macromedia Generator kan du hantera dynamiskt webbinnehåll. Du kan
skapa generatorfiler med Flash 4 eller 5 genom att använda fristående
generatormallar. Filerna hanteras sedan på en webbserver som kör
serverprogramvara för generatorer. Du kan infoga en generator i ett Dreamweaverdokument.
Så här infogar du en generator:
1
Placera insättningspunkten där du vill infoga objektet i dokumentfönstret.
2
Klicka på ikonen Infoga generator på objektpanelen.
3
Markera en mallfil för generator (.swt) i dialogrutan som visas.
4
Klicka på plustecknet (+) om du vill lägga till parameterparet namn=värde. Ange
sedan ett namn för parametern i fältet Namn och ett värde för parametern i
fältet Värde. Upprepa detta steg för varje parameter.
5
Om du vill ta bort en parameter markerar du den i listan Parametrar och
klickar på minustecknet (–).
6
När du har angett alla parametrar klickar du på OK för att infoga generatorn.
Om du vill redigera parametrarna efter det att generatorn har infogats använder
du kodkontrollen eller kodvyn i dokumentfönstret.
Parameterparen namn=värde används i generatorservern, tillsammans med andra
datakällor, för att dynamiskt skapa Flash-filmfilen eller Flash-bildfilen.
Shockwave-filmer
Med det komprimerade formatet Shockwave, Macromedias standard för
interaktiv multimedia på webben, kan mediafiler som har skapats i Macromedia
Director snabbt laddas ned och spelas upp på de flesta webbläsare.
Infoga Shockwave-filmer
Programvaran som spelar upp Shockwave-filmer finns både som ett Netscape
Navigator-insticksprogram och en ActiveX-kontroll. När du infogar en
Shockwave-film används både koden OBJECT (för ActiveX-kontrollen) och koden
EMBED (för insticksprogrammet) för att få bästa möjliga resultat i alla webbläsare.
När du gör ändringar i egenskapskontrollen för filmen omvandlar Dreamweaver
värdena till rätt parametrar för OBJECT- och EMBED-koderna.
Infoga media
305
Så här infogar du en Shockwave-film:
1
Placera insättningspunkten där du vill infoga en Shockwave-film i designvyn i
dokumentfönstret.
2
Klicka på ikonen Infoga Shockwave på objektpanelen eller välj Infoga > Media
> Shockwave eller dra ikonen Infoga Shockwave till dokumentet.
3
Välj en filmfil i dialogrutan som visas.
4
Ange filmens bredd och höjd i rutorna B och H i egenskapskontrollen.
Ange egenskaper för Shockwave
För att få bästa möjliga resultat i både Microsoft Internet Explorer och Netscape
Navigator infogas Shockwave-filmer med både OBJECT- och EMBED-koder. (OBJECT är
den kod som är definierad av Microsoft för ActiveX-kontroller. EMBED är den kod
som är definierad i Navigator för insticksprogram.) Markera en Shockwave-film
när du vill visa egenskaperna i egenskapskontrollen.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna. Klicka
på maximeringsknappen längst ned till höger om du vill visa alla egenskaper.
Namn anger
ett namn som identifierar filmen för skript. Skriv ett namn i fältet
längst till vänster i egenskapskontrollen.
B och H anger
bredd och höjd på filmen i bildpunkter. Du kan också ange
följande enheter: pc (pica), pt (punkter), tum, mm, cm eller % (procent av det
överordnade objektets bredd eller höjd). Förkortningen måste följa direkt efter
värdet, utan mellanslag: exempelvis 3mm.
Fil anger
sökvägen till Shockwave-filmfilen. Klicka på mappikonen om du vill
bläddra till en fil, eller skriv en sökväg.
Justera anger hur filmen är justerad på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
Bakg anger
en bakgrundsfärg för filmområdet. Denna färg visas även när filmen
inte spelas (vid inläsning och efter uppspelning).
Spela upp använder
du för att förhandsgranska filmen i designvyn i
dokumentfönstret. Klicka på knappen Stopp när du vill stoppa filmen och återgå
till Shockwave-platshållaren.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar som ska
överföras till Shockwave-filmen. Se ”Använda parametrar” på sidan 314.
Shockwave-filmen måste ha utformats för att ta emot dessa parametrar.
ID definierar
den valfria ActiveX-ID-parametern. Denna parameter används
vanligtvis för att överföra information mellan ActiveX-kontroller.
L-mellanr. och V-mellanr. anger
(i antal bildpunkter) mellanrum ovanför,
nedanför och på båda sidor av filmen.
306
Kapitel 13
Lägga till ljud på en sida
Det finns flera olika typer av ljudfiler och ljudformat och flera olika sätt att lägga
till ljud på en webbsida. En del faktorer som du bör tänka på innan du bestämmer
dig för ett format och en metod för att lägga till ljud är syfte, målgrupp, filstorlek,
ljudkvalitet och skillnader mellan webbläsare.
Obs! Det är stora skillnader mellan hur ljudfiler hanteras i olika webbläsare. Du kan spara
ljudfiler som SWF-filer för att få bättre enhetlighet.
Ljudfilformat
I följande lista beskrivs de vanligast förekommande ljudfilformaten och en del av
deras fördelar och nackdelar i samband med webbutformning.
.midi eller .mid (Musical Instrument Digital Interface) är
ett format för
instrumentalmusik. MIDI-filer stöds i många webbläsare och kräver inte något
insticksprogram. Ljudkvaliteten är vanligtvis mycket bra, men kan variera
beroende på besökarens ljudkort. En liten MIDI-fil kan ge en lång ljudsekvens.
MIDI-filer kan inte spelas in och måste framställas syntetiskt på en dator med
särskild maskin- och programvara.
.wav (Waveform Extension) är
formatfiler som har bra ljudkvalitet, som stöds i
många webbläsare och som inte kräver något insticksprogram. Du kan spela in egna
WAV-filer från en CD, ett band, en mikrofon o.s.v. Den ansenliga filstorleken
begränsar dock i hög grad hur långa ljudsekvenser du kan använda på webbsidorna.
.aif (Audio Interchange File Format eller AIFF) är
ett format som, i likhet med
WAV-formatet, har bra ljudkvalitet, kan spelas upp i de flesta webbläsare och som
inte kräver ett insticksprogram. Du kan också spela in AIFF-filer från en CD, ett
band, en mikrofon o.s.v. Den ansenliga filstorleken begränsar dock i hög grad hur
långa ljudsekvenser du kan använda på webbsidorna.
.mp3 (Motion Picture Experts Group Audio eller MPEG-Audio Layer-3) är ett
komprimerat format som gör ljudfiler avsevärt mindre. Ljudkvaliteten är mycket
bra: om en MP3-fil spelas in och komprimeras på rätt sätt blir ljudet av CDkvalitet. Med hjälp av ny teknik kan du direktuppspela filen så att besökarna inte
behöver vänta på att hela filen ska laddas ned innan de kan höra den. Filstorleken
är dock större än för en Real Audio-fil, så en hel sång kan ändå ta ganska lång tid
att ladda ned över en normal telefonlinje. Besökarna måste ladda ned och
installera ett hjälp- eller insticksprogram, exempelvis QuickTime, Mediaspelaren i
Windows eller RealPlayer, för att kunna spela upp MP3-filer.
.ra, .ram, .rpm eller Real Audio är
ett format med hög komprimeringsgrad som ger
mindre filstorlekar än MP3. Hela sångfiler kan laddas ned på förhållandevis kort
tid. Eftersom filerna kan direktuppspelas från en vanlig webbserver kan besökarna
börja lyssna på ljudet innan hela filen har laddats ned. Ljudkvaliteten är sämre än i
MP3-filer, men med nya spelare och kodare har kvaliteten förbättrats avsevärt.
Besökarna måste ladda ned och installera hjälp- eller insticksprogrammet
RealPlayer för att kunna spela upp dessa filer.
Infoga media
307
Länka till en ljudfil
Länkning till en ljudfil är ett enkelt och effektivt sätt att lägga till ljud på en
webbsida. Den här metoden att infoga ljudfiler ger besökarna möjlighet att välja
om de vill lyssna på filen och gör filen tillgänglig för störst antal användare. (En
del webbläsare kanske inte stöder inbäddade ljudfiler.)
Så här skapar du en länk till en ljudfil:
1
Markera texten eller bilden som du vill använda som länk till ljudfilen.
2
Klicka på mappikonen i egenskapskontrollen om du vill bläddra till ljudfilen,
eller skriv filens sökväg och namn i fältet Länk.
Bädda in ljud
När du bäddar in ljud infogas ljudspelaren direkt på sidan, men ljudet spelas bara
upp om besökarna har rätt sorts insticksprogram för den aktuella ljudfilen. Bädda
in filer om du vill använda ljudet som bakgrundsmusik eller ha bättre kontroll
över själva ljudpresentationen. Du kan exempelvis ställa in volymen, spelarens
utseende på sidan och ljudfilens start- och slutpunkter.
Så här bäddar du in en ljudfil:
1
Placera insättningspunkten där du vill bädda in filen i designvyn.
2
Klicka på knappen Infoga insticksprogram i kategorin Special på
objektpanelen, eller välj Infoga > Media > Insticksprogram.
Mer information om objektet Insticksprogram finns i ”Infoga insticksprogram
för Netscape Navigator” på sidan 309.
3
Klicka på mappikonen i egenskapskontrollen om du vill bläddra till ljudfilen,
eller skriv filens sökväg och namn i fältet Länk.
4
Ange bredd och höjd genom att skriva värdena i motsvarande fält eller genom
att ändra storlek på platshållaren för insticksprogrammet i dokumentfönstret.
Dessa värden anger i vilken storlek ljudkontrollerna visas i webbläsaren. Prova
exempelvis med en bredd på 144 bildpunkter och en höjd på 60 bildpunkter
och se efter hur ljudspelaren visas i Navigator och Internet Explorer.
308
Kapitel 13
Infoga insticksprogram för Netscape
Navigator
Insticksprogram förbättrar Netscape Navigator och ger dig möjlighet att visa
mediainnehåll i en mängd olika format. Insticksprogram är de hjälpmedel som du
använder för att spela upp och visa innehållsfiler på webbplatsen. Typiska
insticksprogram innehåller exempelvis RealPlayer och QuickTime, medan MP3filerna och QuickTime-filmerna finns i själva innehållsfilerna.
När du har skapat innehåll för ett Navigator-insticksprogram kan du använda
Dreamweaver för att infoga innehållet i ett HTML-dokument. I Dreamweaver
används koden EMBED för att märka upp referensen till innehållsfilen.
Så här infogar du Navigator-insticksprogram:
1
Placera insättningspunkten där du vill infoga insticksprogrammets innehåll i
designvyn i dokumentfönstret.
2
Klicka på ikonen Infoga insticksprogram i kategorin Special på objektpanelen.
3
Markera en innehållsfil för ett Navigator-insticksprogram i dialogrutan som
visas.
Ange egenskaper för Netscape Navigator-insticksprogram
När du har infogat innehåll för ett Netscape Navigator-insticksprogram använder
du egenskapskontrollen för att ange parametrar för innehållet. Markera ett
Netscape Navigator-insticksprogram när du vill visa följande egenskaper i
egenskapskontrollen.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna.
Klicka på maximeringsknappen längst ned till höger om du vill visa alla
egenskaper.
Namn anger
ett namn som identifierar insticksprogrammet för skript. Skriv ett
namn i fältet längst till vänster i egenskapskontrollen.
B och H anger
(i bildpunkter) vilken bredd och höjd som tilldelats objektet på
sidan. Du kan också ange följande enheter: pc (pica), pt (punkter), tum, mm, cm
eller % (procent av det överordnade objektets bredd och höjd). Förkortningen
måste följa direkt efter värdet, utan mellanslag: exempelvis 3mm.
Källa anger
källdatafilen. Klicka på mappikonen om du vill bläddra till en fil, eller
skriv ett filnamn.
Inst.-URL anger
URL-adressen för attributet PLUGINSPAGE. Ange den fullständiga
URL-adressen för platsen där användarna kan ladda ned insticksprogrammet. Om
användaren som besöker sidan inte har insticksprogrammet försöker webbläsaren
ladda ned det från denna URL-adress.
Infoga media
309
Justera anger
hur objektet justeras på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
L-mellanr. och V-mellanr. anger
mängden mellanrum (i bildpunkter) ovanför,
nedanför och på båda sidor om insticksprogrammet.
Kant anger
bredden på kanten runt insticksprogrammet.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar som ska
överföras till Netscape Navigator-insticksprogrammet. Se ”Använda parametrar”
på sidan 314. Många insticksprogram svarar på särskilda parametrar.
Insticksprogrammet Flash innehåller exempelvis parametrar för BGCOLOR, SALIGN
och SCALE.
Du kan också visa vilka attribut det markerade insticksprogrammet har genom att
klicka på knappen Attribut. Du kan redigera, lägga till och ta bort attribut som
exempelvis bredd och höjd i denna dialogruta.
Spela upp insticksprogram i dokumentfönstret
Du kan förhandsgranska filmer och animeringar som är beroende av Navigatorinsticksprogram (d.v.s. element som använder koden EMBED) direkt i designvyn i
dokumentfönstret. (Filmer och animeringar som är beroende av ActiveXkontroller kan däremot inte förhandsgranskas i dokumentfönstret.) Du kan spela
upp alla instickselement samtidigt om du vill granska hur sidan kommer att se ut
för användaren. Du kan också spela upp varje element för sig för att kontrollera
att du har bäddat in rätt mediaelement.
Du måste ha de rätta insticksprogrammen installerade på datorn för att kunna
spela upp filmer. Dreamweaver söker automatiskt efter alla installerade
insticksprogram vid start. Först kontrolleras mappen Configuration/Plugins och
sedan insticksmapparna för alla installerade webbläsare.
Så här spelar du upp insticksprogram i dokumentfönstret:
1
Infoga ett eller flera mediaelement genom att välja Infoga > Media >
Shockwave, Infoga > Interaktiva bilder > Flash eller Infoga > Media >
Insticksprogram.
2
Så här spelar du upp insticksprogram:
• Markera ett av mediaelementen som du har infogat och välj Visa >
Insticksprogram > Spela upp eller klicka på knappen Spela upp i
egenskapskontrollen.
• Välj Visa > Insticksprogram > Spela upp alla om du vill spela upp alla
mediaelement, som är beroende av insticksprogram, på den markerade sidan.
Obs! Spela upp alla gäller bara för det aktuella dokumentet. Det gäller exempelvis inte för
andra dokument i en ramuppsättning.
310
Kapitel 13
Så här stoppar du uppspelningen av insticksprogram:
Markera ett mediaelement och välj Visa > Insticksprogram > Stoppa eller klicka på
knappen Stopp i egenskapskontrollen.
Du kan också välja Visa > Insticksprogram > Stoppa alla om du vill stoppa alla
insticksprogram som spelas upp.
Felsökning av Navigator-insticksprogram
Om du har följt anvisningarna för att spela upp insticksprogram i
dokumentfönstret men en del av insticksprogrammets innehåll ändå inte spelas
upp, kan du prova att göra följande:
• Kontrollera att det associerade insticksprogrammet är installerat på datorn och
att innehållet är kompatibelt med den version av insticksprogrammet som du
har.
• Öppna filen Configuration/Plugins/UnsupportedPlugins.txt i en textredigerare
och se efter om det aktuella insticksprogrammet finns med i listan. I denna fil
anges insticksprogram som orsakar problem i Dreamweaver och därför inte
stöds. (Om du råkar ut för problem med ett visst insticksprogram bör du
överväga att lägga till det i denna fil.)
• Kontrollera att du har tillräckligt med minne (och, på Macintosh, att
tillräckligt med minne är tilldelat Dreamweaver). Vissa insticksprogram kräver
ytterligare 2 till 5 MB minne för att kunna köras.
Infoga en ActiveX-kontroll
ActiveX-kontroller (som tidigare kallades OLE-kontroller) är återanvändbara
komponenter, i stil med miniprogram, som kan fungera som insticksprogram i
webbläsare. De körs i Internet Explorer med Windows, men de körs inte på
Macintosh eller i Netscape Navigator. Med ActiveX-objektet i Dreamweaver kan
du ange attribut och parametrar för en ActiveX-kontroll i besökarens webbläsare.
I Dreamweaver används koden OBJECT för att märka upp den plats på sidan där
ActiveX-kontrollen ska visas och för att ange parametrar för ActiveX-kontrollen.
Så här infogar du ActiveX-kontroller:
1
Placera insättningspunkten där du vill infoga innehållet i dokumentfönstret
och gör något av följande:
• Klicka på ikonen Infoga ActiveX i kategorin Special på objektpanelen.
• Välj Infoga > Media > ActiveX.
• Dra och släpp ikonen Infoga ActiveX.
En ikon markerar var ActiveX-kontrollen visas på sidan i Internet Explorer.
Infoga media
311
Ange ActiveX-egenskaper
När du har infogat ett ActiveX-objekt använder du egenskapskontrollen för att
ange attribut för koden OBJECT och parametrar för ActiveX-kontrollen. Klicka på
Parametrar i egenskapskontrollen om du vill ange namn och värden för
egenskaper som inte visas i egenskapskontrollen. Det finns inget vedertaget
standardformat för parametrar för ActiveX-kontroller. Information om vilka
parametrar som kan användas finns i dokumentationen till den ActiveX-kontroll
du använder.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna.
Klicka på maximeringsknappen längst ned till höger om du vill visa alla
egenskaper.
Namn anger
ett namn som identifierar ActiveX-objektet för skript. Skriv ett namn
i fältet längst till vänster i egenskapskontrollen.
B och H anger
bredd och höjd på objektet (i bildpunkter). Du kan också ange
följande enheter: pc (pica), pt (punkter), tum, mm, cm eller % (procent av det
överordnade objektets bredd och höjd). Förkortningen måste följa direkt efter
värdet, utan mellanslag: exempelvis 3mm.
Klass-ID identifierar
ActiveX-kontrollen för webbläsaren. Skriv ett värde eller välj
ett i listrutan. När sidan läses in i webbläsaren används klass-ID för att hitta den
ActiveX-kontroll som krävs för ActiveX-objektet som är associerat med sidan. Om
den angivna ActiveX-kontrollen inte hittas försöker webbläsaren ladda ned den
från den plats som anges i fältet Bas.
Bädda in lägger
till en EMBED-kod i OBJECT-koden för ActiveX-kontrollen. Om
ActiveX-kontrollen har ett motsvarande Netscape Navigator-insticksprogram
aktiverar EMBED-koden insticksprogrammet. Värdena som du har angett som
ActiveX-egenskaper tilldelas deras motsvarigheter i Netscape Navigatorinsticksprogrammet.
Justera anger
hur objektet justeras på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar som ska
överföras till ActiveX-objektet. Se ”Använda parametrar” på sidan 314. Många
ActiveX-kontroller svarar på särskilda parametrar.
Källa definierar
vilken datafil som ska användas för ett Netscape Navigatorinsticksprogram om alternativet Bädda in är aktiverat. Om du inte anger något
värde försöker Dreamweaver beräkna ett värde utifrån de ActiveX-egenskaper som
finns angivna.
L-mellanr. och V-mellanr. anger
mängden mellanrum (i bildpunkter) ovanför,
nedanför och på båda sidor om objektet.
312
Kapitel 13
Bas anger den URL-adress som innehåller ActiveX-kontrollen. Internet Explorer
laddar ned ActiveX-kontrollen från denna plats om kontrollen inte finns
installerad på besökarens dator. Om du inte anger någon Bas-parameter och
besökaren inte har den aktuella ActiveX-kontrollen installerad kan inte
webbläsaren visa ActiveX-objektet.
Alt. bild anger
en bild som ska visas om webbläsaren inte stöder koden OBJECT.
Detta alternativ är endast tillgängligt när alternativet Bädda in är avmarkerat.
ID definierar
den valfria ActiveX-ID-parametern. Denna parameter används
vanligtvis för att överföra information mellan ActiveX-kontroller.
Data anger
en datafil som ska läsas in i ActiveX-kontrollen. I flera ActiveXkontroller, exempelvis Shockwave och RealPlayer, används inte denna parameter.
Kant anger
bredden på kanten runt objektet.
Infoga ett Java-miniprogram
Java är ett programmeringsspråk som möjliggör utveckling av enklare program
(miniprogram) som kan bäddas in på webbsidor.
När du har skapat ett Java-miniprogram kan du infoga det i ett HTML-dokument
med hjälp av Dreamweaver. Koden APPLET används för att märka upp referensen
till miniprogramfilen.
Så här infogar du ett Java-miniprogram:
1
Placera insättningspunkten där du vill infoga miniprogrammet i
dokumentfönstret.
2
Klicka på ikonen Infoga miniprogram i kategorin Special på objektpanelen.
3
Markera en fil som innehåller ett Java-miniprogram i dialogrutan som visas.
Ange egenskaper för Java-miniprogram
När du har infogat ett Java-miniprogram använder du egenskapskontrollen för att
ange parametrar. Markera ett Java-miniprogram när du vill visa följande
egenskaper i egenskapskontrollen.
När du öppnar egenskapskontrollen visas endast de vanligaste egenskaperna.
Klicka på maximeringsknappen längst ned till höger om du vill visa alla
egenskaper.
Namn anger ett namn som identifierar miniprogrammet för skript. Skriv ett namn
i fältet längst till vänster i egenskapskontrollen.
Infoga media
313
B och H anger
bredd och höjd på miniprogrammet (i bildpunkter). Du kan också
ange följande enheter: pc (pica), pt (punkter), tum, mm, cm eller % (procent av
det överordnade objektets bredd eller höjd). Förkortningen måste följa direkt efter
värdet, utan mellanslag: exempelvis 3mm.
Kod anger
filen som innehåller miniprogrammets Java-kod. Klicka på
mappikonen om du vill bläddra till en fil, eller skriv ett filnamn.
Bas identifierar mappen som innehåller det markerade miniprogrammet. När du
väljer ett miniprogram fylls det här fältet i automatiskt.
Justera anger
hur objektet justeras på sidan. Beskrivningar av alternativen finns i
”Justera element” på sidan 267.
Alt anger alternativt innehåll (oftast en bild) som ska visas om användaren har en
webbläsare som inte stöder Java-miniprogram eller där Java har avaktiverats. Om
du skriver text visas den med hjälp av attributet ALT i koden APPLET. Om du väljer
en bild infogas en IMG-kod mellan de inledande och de avslutande APPLET-koderna.
Obs! Om du vill ange alternativt innehåll som går att visa i både Netscape Navigator (med
Java avaktiverat) och Lynx (en textbaserad webbläsare), markerar du bilden och lägger
sedan manuellt till ett ALT-attribut i koden IMG i kodkontrollen.
L-mellanr. och V-mellanr. anger
mängden mellanrum (i bildpunkter) ovanför,
nedanför och på båda sidor om miniprogrammet.
Parametrar öppnar
en dialogruta där du kan ange fler parametrar som ska
överföras till miniprogrammet. Många miniprogram svarar på särskilda
parametrar.
Använda parametrar
Använd dialogrutan Parametrar när du vill ange värden för särskilda parametrar
som har definierats för Shockwave- och Flash-filmer, ActiveX-kontroller, Netscape
Navigator-insticksprogram och Java-miniprogram. Parametrar används med
koderna OBJECT, EMBED och APPLET. Parametrar anger attribut som är specifika för
den typ av objekt som infogas. Ett Flash-filmobjekt kan exempelvis ha en
kvalitetsparameter <param name="quality" value="best"> för OBJECT-koden.
Dialogrutan Parametrar öppnas från egenskapskontrollen. Information om vilka
parametrar som krävs finns i dokumentationen till objektet du använder.
Obs! Det finns ingen vedertagen standard för identifiering av datafiler för ActiveXkontroller. Information om vilka parametrar du kan använda finns i dokumentationen till den
ActiveX-kontroll du använder.
314
Kapitel 13
Så här öppnar du dialogrutan Parametrar:
1
Markera ett objekt som kan ha parametrar (exempelvis en Shockwave-film, en
ActiveX-kontroll, ett Navigator-insticksprogram eller ett Java-miniprogram) i
dokumentfönstret.
2
Öppna dialogrutan på något av följande sätt:
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på objektet och välj
Parametrar på snabbmenyn.
• Öppna egenskapskontrollen (om den inte redan är öppen) och klicka på
knappen Parametrar i den nedre halvan. (Se till att egenskapskontrollen är
maximerad.)
Så här anger du ett värde för en parameter i dialogrutan Parametrar:
1
Klicka på plustecknet (+).
2
Ange parameterns namn i kolumnen Parameter.
3
Ange parameterns värde i kolumnen Värde.
Så här tar du bort parametrar:
Markera en parameter och klicka på minustecknet (-).
Så här ändrar du ordning på parametrar:
Markera en parameter och använd pilknapparna.
Använda beteenden för att kontrollera
media
Du kan lägga till beteenden på sidan för att starta och stoppa olika mediaobjekt.
använder du för att spela upp, stoppa, spola
tillbaka eller gå till en bildruta i en Shockwave- eller Flash-film. Se ”Kontrollera
Shockwave eller Flash” på sidan 448.
Kontrollera Shockwave eller Flash
Spela upp ljud använder du för att spela upp ett ljud. Du kan exempelvis spela upp
en ljudeffekt varje gång användaren för muspekaren över en länk. Se ”Spela upp
ljud” på sidan 456.
Kontrollera instick använder
du för att kontrollera om platsbesökarna har det
nödvändiga insticksprogrammet installerat och sedan dirigera dem till olika URLadresser, beroende på om de har det rätta insticksprogrammet eller inte. Detta
gäller bara för Netscape-insticksprogram, eftersom beteendet Kontrollera instick
inte söker efter ActiveX-kontroller. Se ”Kontrollera instick” på sidan 446.
Infoga media
315
316
Kapitel 13
14
KAPITEL 14
Redigera HTML-kod i Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Även om du i Macromedia Dreamweaver kan skapa och redigera webbsidor
visuellt utan att behöva bry dig om HTML-källkoden finns det tillfällen när du
kan behöva komma åt sidans underliggande HTML-kod. Genom att redigera
HTML-koden kan du få större kontroll när du vill ändra och felsöka webbsidan.
Anta att du exempelvis markerar text i dokumentet och anger ett annat
teckensnitt, men att denna ändring bara påverkar halva meningen. Genom att
titta på HTML-koden i Dreamweavers kodvy (eller kodkontroll) upptäcker du att
den avslutande koden </font> finns mitt i meningen. Det enda du behöver göra
för att rätta till felet är att flytta </font> till slutet av meningen.
Om du är intresserad av lära dig hur HTML-kod fungerar gör du det på ett
utmärkt sätt genom att använda Dreamweavers visuella redigeringsmöjligheter
och kodvyn (eller kodkontrollen) tillsammans. Du kan då jämföra HTML-koden
med själva visningen och se hur de motsvarar varandra.
I Dreamweaver kommer du åt HTML-koden i kodvyn, kodkontrollen och Quick
Tag Editor. Använd referenspanelen i Dreamweaver när du vill ha hjälp att förstå
och skriva HTML-kod.
I Dreamweaver kan du också öppna HTML-filer som har skrivits någon
annanstans utan att behöva oroa dig för att koden ändras. Funktionen Roundtrip
HTML ser till att HTML-kodens innehåll och struktur inte ändras när du växlar
fram och tillbaka mellan Dreamweaver och en extern HTML-redigerare.
Dessutom kan du använda Dreamweaver för att rensa HTML-filer som innehåller
rörig eller oläslig kod.
317
Grundläggande HTML-koder
Det kan vara bra att känna till grunderna för HTML-kod när du använder
Dreamweaver. Du kan enkelt visa HTML-koden och den visuella utformningen
samtidigt, vilket ger dig möjlighet att lära dig hur HTML-kod fungerar. Genom
att förstå koden och veta hur du ändrar den blir det lättare för dig att hitta och
rätta till fel på webbsidorna. Om du är ovan vid HTML-kod får du en kortfattad
översikt i följande avsnitt. Om du redan kan HTML-grunderna kan du gå vidare
till nästa avsnitt.
HTML är ett textkodspråk. Detta betyder att HTML-dokument är vanliga
textdokument med specifika koder som anger för webbläsaren hur text ska visas.
Koden I styr exempelvis kursiv text. Genom att placera <I> i HTML-koden anger
du för webbläsaren att den efterföljande texten ska vara kursiv. Genom att placera
</I> i HTML-koden anger du för webbläsaren att den efterföljande texten ska
återgå till standardstilen. Koden med ett snedstreck (/) kallas stängningskoden
eller den avslutande koden.
I webbläsarna tolkas dessa koder i HTML-dokumentet så att texten visas med rätt
formatering. En del koder har attribut som du kan använda tillsammans med
dem. Du kan exempelvis ange en bilds justering i bildkoden: <IMG SRC="image.gif"
align="left">. ALIGN är ett attribut för bildkoden.
Dokumentstruktur
Alla HTML-dokument (webbsidor) måste innehålla vissa standardkoder: HEADkoden och BODY-koden. HEAD-delen innehåller webbsidans titel (och eventuella
skript) och BODY-delen innehåller själva texten som visas på webbsidan när den
öppnas i webbläsaren.
Här är ett exempel på strukturen i ett dokument:
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<center>
<p>
<font size=+2>Welcome to my page</font>
</p>
<p>
The p is a paragraph tag, which tells the browser that this is all one
paragraph.
</p>
</center>
</body>
</html>
318
Kapitel 14
Obligatoriska koder i alla HTML-dokument är HTML, HEAD och BODY.
HEAD-koder
HEAD-delen (omgiven av HEAD-koder) innehåller bara sidtiteln (omgiven av
TITLE-koder) och programmeringsskript, exempelvis JavaScript-kod som
implementerar en bildöverrullning på sidan.
Den text som du anger mellan <TITLE> och </TITLE> visas i namnlisten överst i
webbläsarfönstret. Den visas inte på sidan.
Följande HTML-kod resulterar exempelvis i sidan som visas nedan:
<html>
<head>
<title>Purcy the cat</title>
</head>
Redigera HTML-kod i Dreamweaver
319
BODY-koder
I dokumentets BODY-del finns sidans innehåll. Alla texter, bilder, tabeller och
övrigt innehåll måste finnas mellan <BODY> och </BODY>.
<html>
<head>
<title>Purcy the cat</title>
</head>
<body>
<center>
<h2>
Welcome to my home page.
</h2>
<p>
I am a two-year-old part Siamese cat who lives in
San Francisco with my two owners.
</p>
<br>
<img src="cat.gif" width="400" height="250” align=”center”>
<br>
<p>
I like to eat all kinds of food, especially cheese.
</p>
</center>
</body>
</html>
Samtliga koder i BODY-delen i detta exempel kan du använda för att formatera
innehållet.
320
Kapitel 14
(d.v.s. koderna H1 till och med H6) märker upp texten som rubriker.
Vanligtvis skiljer sig rubriker på en webbsida från den normala brödtexten genom
att de är större och/eller har fet stil. Rubriken H1 är störst och H6 är minst. Du
måste alltid ha en öppningskod före innehållet och en stängningskod efter, som i
följande exempel:
Rubrikkoder
<h1>Detta är rubrik 1</h1>
Styckekoder (P) delar upp textinnehållet i stycken. Eftersom rader bryts
automatiskt och vagnreturer ignoreras i webbläsarna måste du använda P-koder
för att förhindra att all text visas som ett enda stycke. Koden P lägger till extra
mellanrum mellan rader. Du måste alltid ha öppningskoden före styckets innehåll
och stängningskoden efter, som i följande exempel:
<p>
I am a two-year-old Siamese cat who lives in San Francisco with my two owners.
</p>
<p>
I like to eat all kinds of food, especially cheese.
</p>
Radbrytningskoder (BR)
gör att texten radbryts på sidan, men utan att extra
mellanrum läggs till som med styckekoden. Eftersom koden BR infogar en enda
radbrytning behöver du inte ange någon stängningskod.
Radbrytningskod
er
Mellanrum skapat
med radbrytningar
Redigera HTML-kod i Dreamweaver
321
Bildkoder infogar
bilder på sidan. En bildkod har formatet <img
src="bildfilnamn">. Du måste ange bildens filnamn mellan citattecken. Bildkoder
har också attribut som du kan använda, exempelvis WIDTH, HEIGHT, BORDER, ALIGN
och VALIGN. Attributen WIDTH och HEIGHT anger bildens storlek som ska tolkas i
webbläsaren. Du kan ange 0 eller mer för kantbredden (som standard visas en
kant runt bilder när de används som länkar). Attributen ALIGN och VALIGN anger
hur bilden ska justeras: ALIGN (för vågrät justering) kan ha värdena LEFT, RIGHT eller
CENTER och VALIGN (lodrät justering) kan ha värdena TOP, BOTTOM eller MIDDLE.
Här är ett exempel på en fullständig bildkod:
<img src="cat.gif" width="400" height="250" align="center">
Textformateringskoder
Du kan använda HTML-källkod för att formatera texten på webbsidan. Du kan
exempelvis ange att text ska vara fet eller kursiv och visas i ett visst teckensnitt:
<b>This text will appear bold in the Web page</b>.
<i>This text will appear italic in the Web page</i>.
<font face=”verdana” size=”2”>This text will display with the
Verdana font face and will be larger than the other text.</font>
322
Kapitel 14
Infoga kommentarer
En kommentar är en beskrivande text som du infogar i HTML-koden för att
beskriva koden eller ge andra upplysningar. Kommentaren visas bara i kodvyn
(eller kodkontrollen) och alltså inte på webbsidan i webbläsaren.
Så här infogar du en kommentar:
1
Placera insättningspunkten där du vill ha kommentaren, antingen i kodvyn
(eller kodkontrollen) eller i designvyn.
Se ”Använda kodvyn (eller kodkontrollen)” på sidan 326.
2
Klicka på ikonen Infoga kommentar i kategorin Osynliga på objektpanelen
eller välj Infoga > Osynliga koder > Kommentar.
När du skapar en kommentar genereras följande HTML-kod:
<!-- Kommentartext-->
Välj Visa > Visuella hjälpmedel > Osynliga element om du vill visa
kommentarmarkörer i designvyn. Se till att alternativet Kommentarer är markerat
i inställningarna för osynliga element, för annars visas inte kommentarmarkören.
Mer information finns i ”Osynliga element - inställningar” på sidan 150.
Gör något av följande när du vill lägga till text i en befintlig kommentar:
• Markera kommentarmarkören i designvyn och skriv text i egenskapskontrollen.
• Leta reda på kommentaren i koden (se tidigare exempel) och lägg till text direkt
i den.
Använda referenspanelen
Referenspanelen är ett snabbåtkomligt referensverktyg för HTML-koder,
JavaScript-objekt och CSS-format och deras attribut. På referenspanelen har du
tillgång till information om de koder, objekt eller format som du arbetar med i
kodvyn (eller kodkontrollen).
Så här öppnar du referenspanelen:
1
Markera koden, objektet eller formatet, som du vill ha information om, i kodeller designvyn.
2
Klicka på knappen Referens i verktygsfältet (Visa > Verktygsfält) eller välj
Fönster > Referens.
Referenspanelen öppnas med information om koden, objektet eller formatet som
du har markerat. Om du vill ändra storlek på texten på referenspanelen väljer du
önskat kommando på popup-menyn (en liten pil längst upp till höger på
panelen).
Redigera HTML-kod i Dreamweaver
323
I listrutan Bok visas namnet på den bok som referensmaterialet kommer från:
O’Reilly HTML Referens, JavaScript Referens eller CSS Referens. Om du vill visa
koder, objekt eller format från en annan bok väljer du en bok i listrutan Bok.
I listrutan som har namnet Kod, Objekt eller Format (beroende på vilken bok du
har markerat) visas det element som du har markerat i kodvyn (eller
kodkontrollen). Om du vill visa information om andra koder, objekt eller format
markerar du dem i listrutan.
Bredvid listrutan Kod, Objekt eller Format finns en listruta med attributen för
den kod du väljer. Standardinställningen är Beskrivning som visar en beskrivning
av den valda koden. Du kan också markera ett attribut i listrutan för att visa mer
information om det. Attribut används för att formatera innehållet i koden. Du
kan exempelvis använda attributet ALIGN för att ange en bilds justering i
bildkoden: <img src="image.gif" align="left">.
324
Kapitel 14
Roundtrip HTML
Roundtrip HTML är en unik funktion i Dreamweaver som gör att du kan flytta
dokument fram och tillbaka mellan en textbaserad HTML-redigerare och
Dreamweaver med liten eller ingen påverkan på innehållet och strukturen i
dokumentets ursprungliga HTML-källkod. Viss HTML-kod som är tekniskt
felaktig (exempelvis FONT-koder som omger flera P-koder) bevaras och tolkas till
och med, om sådan kod stöds i webbläsare. Den HTML-källkod som skapas när
du redigerar grafiskt är dock alltid tekniskt giltig.
Huvudfunktionerna i Roundtrip HTML är följande:
• När du växlar tillbaka till Dreamweaver från en extern HTML-redigerare eller
öppnar ett befintligt HTML-dokument skrivs som standard överlappande
koder om samtidigt som öppna koder som inte ska vara öppna stängs och
överflödiga stängningskoder tas bort. Om du inte vill att någon HTML-kod
ska skrivas om väljer du Redigera > Inställningar och markerar kategorin
Kodomskrivning för att avaktivera all omskrivning. Se ”Kodomskrivning –
inställningar” på sidan 341. Om du avaktiverar kodomskrivning visas all
HTML-kod, som skulle ha skrivits om, som felaktig.
• När funktionen Markera felaktig HTML är aktiverad markeras felaktig HTML
(som Dreamweaver inte stöder) i gult. När du markerar en felaktig kod visas
information om hur du rättar till felet i egenskapskontrollen. Funktionen
Markera felaktig HTML är som standard aktiverad i kodvyn (eller
kodkontrollen). Om du vill avaktivera den väljer du Markera felaktig HTML
på popup-menyn Visningsalternativ i verktygsfältet i kodvyn (eller
kodkontrollen). Felmarkering är alltid aktiverad i designvyn.
Obs! Möjligheten att aktivera/avaktivera Markera felaktig HTML finns bara i kodvyn
(eller kodkontrollen). I designvyn visas alltid felmarkeringar.
• De koder som Dreamweaver inte känner igen ändras inte, inte ens XML-koder.
Programmet har inga kriterier att gå efter för att avgöra om de är giltiga eller
ogiltiga. Om en oigenkännlig kod överlappar en giltig kanske den markeras
som felaktig, men koden skrivs inte om. Följande egna kod skulle exempelvis
markeras som felaktig: <MinNyaKod><b>text</MinNyaKod></b>.
• CFML- (ColdFusion Markup Language) och ASP-koder (Microsoft Active
Server Pages) ändras inte. När det är möjligt visas ikoner som identifierar block
med CFML- eller ASP-kod i dokumentfönstret. Se ”Redigera ColdFusion- och
Active Server-filer i Dreamweaver” på sidan 346.
• I Dreamweaver kan du starta en textbaserad HTML-redigerare när du vill
redigera det aktuella dokumentet. Dreamweaver är integrerat med HomeSite
(Windows) och BBEdit (Macintosh). Se ”Använda externa HTML-redigerare”
på sidan 345.
Redigera HTML-kod i Dreamweaver
325
Använda kodvyn (eller kodkontrollen)
Du kan visa det aktuella dokumentets HTML-källkod på flera sätt: du kan visa
bara kodvyn i dokumentfönstret, du kan dela dokumentfönstret så att både
kodvyn och designvyn visas eller också kan du öppna kodkontrollen. Kodvyn och
kodkontrollen fungerar exakt likadant. Den enda skillnaden är att kodkontrollen
finns i ett eget fönster. Om du delar dokumentfönstret för att visa koden blir det
lättare för dig att se den visuella utformningen samtidigt som du gör ändringar i
HTML-koden.
När du lägger till eller ändrar innehåll i designvyn visas ändringarna genast i
kodvyn och kodkontrollen. Kodvyn och kodkontrollen är användbara verktyg när
du vill lära dig hur HTML-kod fungerar, om du inte redan kan det, och när du
har glömt bort rätt syntax eller de rätta värdena för vissa koder eller attribut.
HTML-koder och HTML-skript är färgkodade och kan justeras i inställningarna.
Ändringar eller tillägg som du gör i koden visas i designvyn först när du har
synkroniserat kod- och designvyerna.
Så här synkroniserar du kod- och designvyerna:
Klicka i designvyn när du har arbetat i en kodredigerare eller klicka på knappen
Uppdatera design i verktygsfältet. (Välj Visa > Verktygsfält när du vill visa
verktygsfältet.)
HTML-kod som du skriver direkt i en kodredigerare skrivs aldrig om
automatiskt. Om du anger en felaktig kod och funktionen Markera felaktig
HTML är aktiverad, markeras den felaktiga koden i kodredigeraren. Felmarkering
är som standard aktiverad i kodredigerarna. Felmarkering visas alltid i designvyn,
även när funktionen Markera felaktig HTML är avaktiverad i kodvyn.
Öppna kodvyn (eller kodkontrollen)
Du kan visa HTML-källkoden på flera sätt: genom att visa både kod och design i
dokumentfönstret, genom att visa bara kod och genom att öppna kodkontrollen.
Så här visar du både kod- och designvyn:
Välj Visa > Kod och design eller klicka på knappen Visa kod och design i
verktygsfältet.
HTML-koden visas i den övre rutan och designvyn i den nedre.
326
Kapitel 14
Du kan ändra storlek på rutorna genom att dra delningslisten.
Gör något av följande när du vill ändra delningen av kod- och designvyerna:
• Om du vill visa designvyn överst väljer du Visa > Design överst. Du kan också
välja Design överst på popup-menyn Visningsalternativ i verktygsfältet.
• Om du bara vill visa HTML-kod i dokumentfönstret väljer du Visa > Kod eller
också klickar du på knappen Visa kod i verktygsfältet.
• Om du bara vill visa den visuella utformningen väljer du Visa > Design också
klickar du på knappen Visa design i verktygsfältet.
Om du föredrar att arbeta med HTML-koden i ett separat fönster använder du
kodkontrollen för att visa koden.
Redigera HTML-kod i Dreamweaver
327
Gör något av följande när du vill öppna kodkontrollen:
• Välj Fönster > Kodkontrollen.
• Klicka på ikonen Visa kodkontrollen bland startknapparna (längst ned till
höger i dokumentfönstret).
• Tryck på F10.
Så här växlar du mellan dokumentfönstret och kodkontrollen:
Tryck på Ctrl+Tabb (Windows) eller Alternativ+Tabb (Macintosh).
Ange alternativ för kodvyn (eller kodkontrollen)
Du kan ange radbyte, kodindrag, syntaxfärgning med mera på popup-menyn
Visningsalternativ i verktygsfältet i kodredigerarna.
Kodvyn (eller kodkontrollen) måste vara aktiv för att du ska komma åt popupmenyn Visningsalternativ. Klicka i kodvyn (eller kodkontrollen) när du vill
aktivera den.
328
Kapitel 14
Så här anger du alternativ för kodvyn (eller kodkontrollen):
1
Gör något av följande när du vill komma åt alternativen:
• Klicka på popup-menyn Visningsalternativ i verktygsfältet. (Välj Visa >
Verktygsfält när du vill visa verktygsfältet.)
• Välj Visa > Visningsalternativ för kod.
Popup-menyn Visningsalternativ är också tillgänglig längst upp i
kodkontrollen.
2
Ange önskade alternativ:
• Radbyte radbryter koden så att den går att visa utan vågrät rullning. Denna
inställning infogar inte radbrytningar, utan gör bara koden lättare att granska.
• Radnummer lägger till radnummer bredvid koden.
• Markera felaktig HTML aktiverar felmarkering. När funktionen Markera
felaktig HTML är aktiverad markeras felaktig HTML (som Dreamweaver inte
stöder) i gult. När du markerar en felaktig kod visas information om hur du
rättar till felet i egenskapskontrollen.
• Syntaxfärgning märker upp de olika delarna av koden i färg så att du snabbt
kan se de olika kodelementen. Information om hur du ändrar dessa färger finns
i ”Kodfärger – inställningar” på sidan 338.
• Automatiskt indrag gör indrag i koden automatiskt. Information om hur du
ändrar storlek på indraget eller vilka koder som automatiskt får indrag finns i
”Kodformat – inställningar” på sidan 339.
Skriva och redigera kod
När du skriver och redigerar koden i kodvyn (eller kodkontrollen) kan du göra
indrag på specifika kodrader och kontrollera så att koderna är balanserade. Genom
att göra indrag på vissa kodrader eller kodavsnitt kan du skilja denna kod från
övrigt innehåll så att den blir lättare att hitta. Genom att kontrollera om koderna
är balanserade kan du se till att alla koder har öppnings- och stängningskoder som
matchar varandra. Detta är särskilt praktiskt när du använder flera kapslingsnivåer
i koden (exempelvis om du har kapslat flera tabeller i andra tabeller).
Så här gör du indrag för markerad kod:
1
Markera kodraden eller kodraderna som du vill göra indrag på.
Du måste markera hela raden för att indraget ska fungera.
2
Välj Redigera > Dra in kod.
Indrag görs för koden. Välj Redigera > Minska indrag på kod när du vill återställa
kod med indrag.
Redigera HTML-kod i Dreamweaver
329
Så här kontrollerar du om koderna är balanserade:
1
Placera insättningspunkten i den kapslade kod som du vill kontrollera.
2
Välj Redigera > Markera överordnad kod.
De omgivande matchande koderna markeras i koden. Om du väljer Redigera >
Markera överordnad kod igen markeras de matchande koder som omger den
föregående markeringen.
Infoga skript
Du kan skriva eller infoga skript i kodvyn (eller kodkontrollen), men du kan också
ange JavaScript och VBScript i designvyn utan att behöva använda kodvyn.
Dessutom kan du öppna skriptfiler i kodvyn. Filen varken ändras eller skrivs om i
Dreamweaver. Mer information finns i ”Öppna och redigera icke-HTML-filer i
Dreamweaver” på sidan 333.
Välj Visa > Visuella hjälpmedel > Osynliga element när du vill visa skriptmarkörer
i dokumentfönstret. (Se även ”Osynliga element - inställningar” på sidan 150.)
Så här infogar du ett skript i kod- eller designvyn:
1
Placera insättningspunkten där du vill ha skriptet.
2
Klicka på ikonen Infoga skript på objektpanelen eller välj Infoga > Osynliga
koder > Skript.
3
Välj skriptspråk i listrutan Språk i dialogrutan som visas.
Om du använder JavaScript och är osäker på vilken version det är väljer du
JavaScript i stället för JavaScript1.1 eller JavaScript1.2.
4
Ange skriptkoden i textrutan Innehåll.
Så här länkar du till en extern skriptfil:
1
Följ steg 1–3 ovan.
2
Klicka på OK utan att skriva någonting i textrutan Innehåll.
3
Markera skriptmarkören i designvyn i dokumentfönstret.
Välj Visa > Visuella hjälpmedel > Osynliga element så att markören visas.
Kontrollera att alternativet Skript är markerat i inställningarna för osynliga
element, för annars visas inte skriptmarkören. Mer information finns i
”Osynliga element - inställningar” på sidan 150.
4
330
Kapitel 14
Klicka på mappikonen i egenskapskontrollen om du vill bläddra till och
markera den externa skriptfilen. Du kan också skriva filnamnet i rutan Källa.
Redigera ett skript
Du kan redigera ett skript i en kodredigerare eller i designvyn.
Så här redigerar du skriptet i kodvyn:
Leta reda på skriptet i kodvyn och redigera det direkt. När du markerar
skriptmarkören i designvyn markeras skriptet i kodvyn.
Så här redigerar du skriptet i designvyn:
1
Markera skriptmarkören.
2
Klicka på knappen Redigera i egenskapskontrollen.
Om du har länkat till en extern skriptfil öppnas filen automatiskt i kodvyn, där du
kan göra ändringarna. Annars öppnas dialogrutan Skriptegenskaper där du kan
redigera skriptet i textrutan Skript.
Obs! Om det finns kod mellan SCRIPT-koderna öppnas dialogrutan Skriptegenskaper,
även när det också finns en länk till en extern skriptfil.
Följande egenskaper visas i dialogrutan Skriptegenskaper (och
egenskapskontrollen) när en skriptmarkör markeras:
• Språk anger JavaScript eller VBScript som skriptspråk.
• Typ anger skripttyp, antingen för klientsidan eller serversidan.
• Källa anger en externt länkad skriptfil. Klicka på mappikonen när du vill
bläddra till filen, eller skriv sökvägen.
• Skript är där du redigerar/skriver skriptet.
Redigera HTML-kod i Dreamweaver
331
Så här kontrollerar du klammerparenteser:
1
Placera insättningspunkten i den kapslade kod som du vill kontrollera.
2
Välj Redigera > Kontrollera klammerparenteser.
De omgivande matchande koderna markeras i koden. Om du väljer Redigera >
Kontrollera klammerparenteser igen markeras de matchande koder som omger
den föregående markeringen.
Visa skriptfunktioner
Du kan visa samtliga JavaScript- eller VB Script-funktioner i koden på popupmenyn Kodnavigering i verktygsfältet (Visa > Verktygsfält).
Så här visar du skriptfunktionerna:
Klicka på knappen Kodnavigering i verktygsfältet.
Om koden innehåller JavaScript- eller VB Script-funktioner visas de på menyn.
Om du vill visa funktionerna i bokstavsordning håller du ned Ctrl (Windows)
eller Alternativ (Macintosh) samtidigt som du klickar på knappen Kodnavigering.
Så här går du till en funktion i koden:
Markera en funktion på popup-menyn Kodnavigering. Funktionen markeras i
kodvyn (eller kodkontrollen).
332
Kapitel 14
Öppna och redigera icke-HTML-filer i
Dreamweaver
När du öppnar en icke-HTML-fil (exempelvis en .js-fil) i Dreamweaver ändras
den inte. Dessa filer öppnas i kodvyn (eller kodkontrollen), med designvyn
avaktiverad. Du kan redigera filen och spara den som en HTML-fil eller en ickeHTML-fil.
Du kan göra inställningar för Dreamweaver så att icke-HTML-filer med vissa
tillägg som standard öppnas automatiskt. Du kan exempelvis göra
standardinställningar så att .js-filer öppnas automatiskt i kodvyn (eller
kodkontrollen).
Så här gör du standardinställningar för icke-HTML-filer:
1
Välj Redigera > Inställningar och markera kategorin Filtyper/Redigerare.
2
I fältet Öppna i kodvyn skriver du de filnamnstillägg som du vill ska öppnas
automatiskt i kodvyn. Infoga ett mellanslag mellan filtyperna.
Filtilläggen .js, .txt och .asa anges som standard. Du kan lägga till så många du vill.
Redigera en HTML-kod i designvyn
Använd Quick Tag Editor när du snabbt vill granska och redigera HTML-källan
för en enstaka kod i designvyn utan att behöva växla till kodvyn och sedan tillbaka
igen. Det lättaste sättet att öppna Quick Tag Editor är att trycka på Ctrl+T
(Windows) eller Kommando+T (Macintosh).
Det finns tre lägen i Quick Tag Editor:
• Infoga HTML-kod, som du använder för att infoga ny HTML-kod
• Redigera kod, som du använder för att redigera en befintlig kod
• Radbryt kod, som du använder för att infoga en ny kod runt den aktuella
markeringen
Den aktuella markeringen i designvyn avgör vilket läge Quick Tag Editor öppnas
i. I alla tre lägen fungerar det grundläggande arbetet i Quick Tag Editor på samma
sätt: du öppnar redigeraren, anger eller redigerar koder och attribut och stänger
sedan redigeraren.
Om du använder någon felaktig HTML-kod i Quick Tag Editor görs automatiskt
försök att rätta till det genom att avslutande citattecken och avslutande
vinkelparenteser infogas där så behövs.
Använd kodvyn (eller kodkontrollen) när du vill utföra mer omfattande HTMLredigering.
Redigera HTML-kod i Dreamweaver
333
Så här öppnar du Quick Tag Editor i läget Infoga HTML-kod:
1
Klicka i designvyn och placera insättningspunkten där du vill infoga koden.
2
Tryck på Ctrl+T (Windows) eller Kommando+T (Macintosh) eller klicka på
knappen Quick Tag Editor i egenskapskontrollen.
Quick Tag Editor öppnas.
3
Ange HTML-koden och tryck sedan på Retur.
Koden infogas i den befintliga koden. Tryck på Esc om du vill avsluta utan att
göra några ändringar.
Så här öppnar du Quick Tag Editor i läget Redigera kod:
1
Markera texten eller objektet som du redigerar i designvyn.
Du kan också markera koden, som du vill redigera, i kodväljaren längst ned i
dokumentfönstret.
2
Tryck på Ctrl+T (Windows) eller Kommando+T (Macintosh) eller klicka på
knappen Quick Tag Editor i egenskapskontrollen.
Quick Tag Editor öppnas.
3
Ange nya attribut, redigera befintliga attribut eller redigera kodens namn. Tryck
sedan på Retur.
Den redigerade koden infogas i koden. Tryck på Esc om du vill avsluta utan att
göra några ändringar.
Så här öppnar du Quick Tag Editor i läget Radbryt kod:
1
Markera oformaterad text eller ett objekt.
Om du markerar text eller ett objekt som innehåller en öppnings- eller
stängningskod öppnas Quick Tag Editor i läget Redigera kod.
2
Tryck på Ctrl+T (Windows) eller Kommando+T (Macintosh) eller klicka på
knappen Quick Tag Editor i egenskapskontrollen.
Quick Tag Editor öppnas.
334
Kapitel 14
3
Ange en enstaka öppningskod, exempelvis <font="verdana">, och tryck på
Retur.
Koden infogas i början av den aktuella markeringen och en matchande
stängningskod infogas i slutet. Tryck på Esc om du vill avsluta utan att göra
några ändringar.
Så här använder du ändringarna direkt:
Tryck på Tabb eller Skift+Tabb när du har redigerat en kod. Ändringen du har
gjort används direkt, i stället för när du avslutar Quick Tag Editor.
Om du vill förhindra detta avmarkerar du alternativet Tillämpa ändringar direkt
när du redigerar i inställningarna för Quick Tag Editor. (Se ”Quick Tag Editor –
inställningar” på sidan 337.)
Obs! När alternativet Tillämpa ändringar direkt när du redigerar är avmarkerat visas flera
ändringar som du gör samtidigt som ett enda steg på historiepanelen och de ångras med
en enda Ångra-åtgärd.
Så här växlar du mellan de olika lägena i Quick Tag Editor:
Tryck på Ctrl+T (Windows) eller Kommando+T (Macintosh) när Quick Tag
Editor är aktivt.
Quick Tag Editor ändrar läge varje gång du använder kortkommandot och växlar
mellan lägena Infoga HTML-kod, Redigera kod och Radbryt kod.
Så här flyttar du Quick Tag Editor på skärmen:
Dra handtaget (där lägesnamnet visas).
Redigera HTML-kod i Dreamweaver
335
Använda tipslistan
När du arbetar i Quick Tag Editor kan du öppna en lista med attributtips som
innehåller samtliga giltiga attribut för den kod som du redigerar eller infogar. (Om
Dreamweaver inte känner igen koden du redigerar innehåller tipslistan samtliga
attribut som Dreamweaver känner igen för alla koder.) Tipslistan visas inte om du
har avmarkerat alternativet Aktivera kodtips i inställningarna för kategorin Quick
Tag Editor.
Så här visar du en lista över giltiga attribut för en kod som du redigerar:
Gör uppehåll i några sekunder när du redigerar ett attributnamn. En tipslista visas
med samtliga giltiga attribut för den kod som du redigerar. Hantera tipslistan på
följande sätt:
• När du börjar skriva ett attributnamn rullar tipslistan så att det första
attributnamnet som inleds med samma bokstäver markeras.
• Tryck på Upp- och Nedpil eller använd rullningslisten när du vill flytta
markeringen uppåt och nedåt i listan.
• Tryck på Retur när du vill välja det markerade attributnamnet. Du kan också
dubbelklicka på ett attributnamn i listan.
• Om du vill stänga tipslistan utan att välja en post trycker du på Esc eller
fortsätter bara att skriva.
När du gör uppehåll under tiden som du anger eller redigerar ett kodnamn
visas en liknande tipslista som innehåller kodnamn i stället för attributnamn.
De koder och attribut som visas i tipslistorna kommer från filen
TagAttributeList.txt, som finns i mappen Dreamweaver/Configuration. Om du är
en avancerad Dreamweaver-användare och vill lägga till eller ta bort koder i
tipslistan kan du redigera denna fil. (Se ”Öppna och redigera icke-HTML-filer i
Dreamweaver” på sidan 333.)
Så här redigerar du befintliga attributvärden i läget Redigera kod:
Tryck på Tabb när du vill flytta fram en post i taget, tills det attribut (eller den
kod) som du vill redigera markeras. Tryck på Skift+Tabb när du vill flytta bakåt till
föregående attributnamn, attributvärde eller kodnamn.
336
Kapitel 14
Så här lägger du till ett nytt attribut i en kod:
1
Använd Tabb, piltangenterna och mellanslagstangenten för att flytta
insättningspunkten till den plats där du vill lägga till ett attribut.
2
Skriv ett giltigt attributnamn för koden.
Om du gör uppehåll när du skriver visas tipslistan.
Ta bort en kod
Du kan ta bort en kod från dokumentet, men låta eventuellt innehåll vara kvar.
Så här tar du bort en kod:
1
Gör något av följande:
• Markera koden i kodväljaren längst ned till vänster i dokumentfönstret.
• Markera vad som helst i dokumentfönstret eller klicka så att
insättningspunkten placeras i fönstret.
2
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) i designvyn och välj
Ta bort kod på snabbmenyn.
Quick Tag Editor – inställningar
Med hjälp av inställningarna för Quick Tag Editor kan du ange om ändringarna
som du gör i Quick Tag Editor automatiskt ska uppdateras i dokumentfönstret
eller inte. Du kan också justera kontrollerna för tipslistan. Välj Redigera >
Inställningar och markera Quick Tag Editor när du vill visa inställningarna.
Tillämpa ändringar direkt när du redigerar anger
om ändringarna i Quick Tag
Editor automatiskt ska uppdateras i dokumentet när du flyttar mellan attribut i
läget Redigera kod. Om du avaktiverar detta alternativ måste du trycka på Retur
för att göra ändringarna i dokumentet. (Detta alternativ ignoreras i lägena Infoga
HTML-kod och Radbryt kod. I dessa lägen måste du alltid trycka på Retur för att
göra ändringarna i dokumentet.)
Aktivera kodtips anger om tipslistan ska visas när du skriver i Quick Tag Editor.
Du kan också ange hur länge det ska dröja innan listan visas för aktuellt attribut
eller aktuell kod.
Redigera HTML-kod i Dreamweaver
337
Kodformatering – inställningar
Du kan göra följande inställningar för kodformatering i Dreamweaver:
• Inställningarna för kodfärger anger hur HTML-koder (och texten mellan dem)
och skript ska färgas i kodvyn och kodkontrollen. Se ”Kodfärger –
inställningar” på sidan 338.
• Inställningarna för kodformat anger de vanligaste alternativen för
kodformatering, exempelvis radlängd och indrag. Se ”Kodformat –
inställningar” på sidan 339. Dessa inställningar ger ett användargränssnitt som
du kan använda för att göra ändringar i filen SourceFormat.txt.
• Inställningarna för kodomskrivning anger vilka eventuella ändringar som görs i
koden när du öppnar ett HTML- eller skriptdokument. Se ”Kodomskrivning –
inställningar” på sidan 341.
• Med hjälp av inställningarna för teckensnitt/kodning kan du ange i vilket
teckensnitt koden ska visas i kodvyn (eller kodkontrollen). Se ”Inställningar för
teckensnitt och kodning” på sidan 85.
Slutligen anges i filen SourceFormat.txt (i mappen Dreamweaver/Configuration)
exakta specifikationer för kodformatering. Genom att redigera denna fil i en
textredigerare kan du på bästa sätt styra exakt hur kod skrivs i Dreamweaver. Här
kan du ändra vissa kodspecifika alternativ som inte går att ändra i inställningarna
för kodformat. Du bör dock aldrig redigera denna fil om du inte är en avancerad
användare eller utvecklare av Dreamweaver, eftersom felaktiga ändringar kan
orsaka allvarliga fel i programmet. Se ”Ändra standardinställd HTMLformatering” på sidan 525.
Kodfärger – inställningar
Använd inställningarna för kodfärger när du vill ange färg på bakgrund, text, kod
och reserverade nyckelord i kodvyn (eller kodkontrollen). Välj Redigera >
Inställningar och markera Kodfärger när du vill arbeta med dessa inställningar.
Bakgrund anger
kodvyns (eller kodkontrollens) bakgrundsfärg. Färgen visas bara
när du klickar eller skriver i kodvyn eller kodkontrollen.
Text anger
färgen på text som visas mellan koder. I exempelvis koden <b>någon
text</b> visas orden ”någon text” i den angivna textfärgen, men inte koderna. Om
du vill åsidosätta textfärgen för en viss kod markerar du alternativet Färgsätt
kodens innehåll.
Kommentarer anger
färgen på kommentarkoder (<!--
-->)
och deras innehåll.
Standard för kod anger
färgen på alla koder förutom kommentarer. Om du vill
åsidosätta denna färg anger du alternativet Kodspecifik.
Reserverade nyckelord anger
färgen på alla reserverade nyckelord. Om du vill
åsidosätta denna färg anger du alternativet Kodspecifik.
338
Kapitel 14
Andra nyckelord anger
färgen på alla andra nyckelord. Om du vill åsidosätta
denna färg anger du alternativet Kodspecifik.
Strängar anger
färgen på alla strängar i koden. Om du vill åsidosätta denna färg
anger du alternativet Kodspecifik.
gör att du kan åsidosätta de andra färginställningarna genom att ange
färger för specifika koder.
Kodspecifik
Så här anger du en färg för en viss kod:
1
Markera en kod i rutan Kodspecifik.
Skift-klicka om du vill markera närliggande koder. Ctrl-klicka (Windows) eller
Kommando-klicka (Macintosh) om du vill markera icke närliggande koder.
2
Klicka på alternativknappen bredvid färgrutan under listrutan och använd
någon av följande metoder när du vill välja ett nytt färgvärde:
• Klicka i färgrutan och välj en ny färg på paletten med webbsäkra färger eller i
systemets färgväljare.
• Ange ett hexadecimalt värde i textfältet bredvid färgrutan.
3
Markera Färgsätt kodens innehåll om du vill färga texten mellan öppnings- och
stängningskoden.
Kodformat – inställningar
Använd följande inställningar för kodformat när du vill styra kodformatering,
exempelvis radlängd, indrag och om kod- och attributnamn ska visas i gemener
eller versaler. (Information om andra sätt att styra kodformateringen finns i
”Ändra standardinställd HTML-formatering” på sidan 525.)
Observera att alla inställningar förutom Åsidosätt skiftläget för endast påverkar
nya dokument och nya tillägg i befintliga dokument. Det innebär att när du
öppnar ett tidigare skapat HTML-dokument används inte dessa
formateringsalternativ i det. Om du vill omformatera befintliga HTMLdokument använder du kommandot Använd källformat. (Se ”Formatera HTMLkällkoden i befintliga dokument” på sidan 343.)
Indrag aktiverar
indrag för alla koder som är märkta med INDENT i filen
SourceFormat.txt. Se ”Ändra standardinställd HTML-formatering” på sidan 525.
Använd anger
om indrag ska göras med mellanslag eller tabbar.
Tabellrader och -kolumner gör automatiskt indrag för koderna TR och TD så att det
blir lättare att läsa tabellkod. Alternativet Indrag måste vara markerat för att detta
alternativ ska fungera.
Ramar och ramuppsättningar gör automatiskt indrag för FRAME-koder och kapslade
FRAMESET-koder
så att det blir lättare att läsa ramuppsättningsfiler. Alternativet
Indrag måste vara markerat för att detta alternativ ska fungera.
Redigera HTML-kod i Dreamweaver
339
Indragsstorlek anger
storleken på indrag. Storleken mäts i mellanslag eller tabbar,
beroende på inställningen för alternativet Använd.
Tabbstorlek anger
storleken på tabbar (mäts i teckenavstånd).
Automatisk radbrytning lägger
till ”hårda” radreturer när raderna når angiven
kolumnbredd. (Observera att det i Dreamweaver bara infogas hårda radreturer där
dessa inte ändrar dokumentets utseende i webbläsare. Därför kan en del rader
förbli längre än vad som anges i alternativet Automatisk radbrytning.) Detta i
motsats till alternativet Radbryt i kodvyn (eller kodkontrollen) som lägger till en
”mjuk” radretur för rader som sträcker sig utanför fönstrets bredd.
Radbrytningar anger
vilken typ av fjärrserver (Windows, Macintosh eller UNIX)
som är värd för fjärrplatsen. Genom att välja rätt typ av radbrytningstecken ser du
till att HTML-källkoden är riktig när den visas på fjärrservern. (Observera att för
FTP gäller denna inställning bara vid binärt överföringsläge. I Dreamweavers
ASCII-överföringsläge ignoreras inställningen. Om du laddar ned filer i ASCIIläge anges radbrytningar baserat på datorns operativsystem. Om du skickar filer i
ASCII-läge ställs radbrytningar in till CR LF.) Denna inställning är också
användbar när du arbetar med en extern textredigerare som bara känner igen vissa
typer av radbrytningar. Använd exempelvis CR LF (Windows) om du använder
Anteckningar som extern redigerare och CR (Macintosh) om du använder
SimpleText.
Skiftläge för koder och Skiftläge för attribut styr
skiftläget för kod- och
attributnamn. Dessa alternativ används för koder och attribut som du infogar eller
redigerar i dokumentfönstret, men de används inte för koder och attribut som du
anger direkt i kodvyn (eller kodkontrollen) eller för koder och attribut i ett
dokument när du öppnar det (såvida du inte även markerar ett av eller båda
alternativen Åsidosätt skiftläget för).
Åsidosätt skiftläget för: Koder och Attribut anger
om de skiftlägesalternativ du har
definierat alltid ska genomdrivas, inklusive när du öppnar ett befintligt HTMLdokument. När du markerar ett av dessa alternativ konverteras alla koder eller
attribut i öppna dokument omedelbart till det angivna skiftläget. Detta gäller
också alla koder eller attribut i varje dokument du öppnar därefter (tills du
avmarkerar detta alternativ igen). Koder eller attribut som du skriver i kodvyn
(eller kodkontrollen) och Quick Tag Editor konverteras också till det angivna
skiftläget, precis som koder eller attribut som du infogar med hjälp av
objektpanelen. Om du exempelvis vill att kodnamn alltid ska konverteras till
gemener anger du gemener i Skiftläge för koder och markerar sedan alternativet
Åsidosätt skiftläget för: Koder. När du därefter öppnar ett dokument som
innehåller versala kodnamn konverteras de till gemener.
Centrering anger om element ska centreras med DIV ALIGN="CENTER" eller CENTER.
Båda ingår i övergångsspecifikationerna i HTML 4.0 men CENTER stöds i fler
webbläsare.
340
Kapitel 14
Kodomskrivning – inställningar
Inställningarna för kodomskrivning anger vad som händer när HTML- eller
skriptdokument öppnas. (Dessa inställningar har ingen effekt när du redigerar
HTML-kod eller skript i kodvyn eller kodkontrollen.) Om du avaktiverar dessa
omskrivningsalternativ visas felaktiga kodelement i dokumentfönstret för HTMLkod som skulle ha skrivits om. Om du importerar ett HTML-dokument från
Microsoft Word kan du använda kommandot Rensa Word-HTML för att ta bort
all onödig HTML-kod. Mer information finns i ”Rensa Microsoft Word-HTML”
på sidan 343.
Rätta till felaktigt kapslade och öppna koder skriver om överlappande koder.
Exempelvis skrivs <b><i>text</b></i> om som <b><i>text</i></b>. Detta
alternativ infogar också avslutande citattecken och avslutande vinkelparenteser,
om sådana saknas.
Ta bort extra avslutande koder tar
bort stängningskoder som inte har någon
motsvarande öppningskod.
Varna vid rättning och borttagning av koder visar
en sammanfattning av tekniskt
felaktiga HTML-koder som Dreamweaver försöker korrigera. Sammanfattningen
visar var felet finns (rad- och kolumnnummer), så att du kan hitta korrigeringen
och se efter att den stämmer.
Skriv aldrig om kod: I filer med tillägg använder
du för att förhindra att HTML
skrivs om i filer med de angivna filnamnstilläggen. Detta alternativ är särskilt
användbart för filer som innehåller tredjepartskoder (exempelvis ASP-koder). Mer
information finns i ”Undvika att tredjepartskoder skrivs om” på sidan 537.
gör att du kan styra om vissa tecken ska
kodas i vissa sammanhang. Du bör vanligtvis låta dessa alternativ vara markerade
såvida inte filerna innehåller vissa tredjepartskoder som använder de aktuella
tecknen. Mer information om dessa alternativ finns i ”Undvika att
tredjepartskoder skrivs om” på sidan 537.
De två alternativen för Specialtecken
Redigera HTML-kod i Dreamweaver
341
Rensa HTML-källkod
Använd kommandot Rensa HTML när du vill ta bort tomma koder, kombinera
kapslade FONT-koder och på andra sätt förbättra rörig eller oläslig HTML-kod.
Så här rensar du HTML-källkod:
1
Öppna ett befintligt dokument och välj Kommandon > Rensa HTML.
2
Välj bland följande alternativ i dialogrutan som visas:
• Ta bort tomma HTML-koder tar bort alla koder som det saknas innehåll
mellan. Exempelvis anses <b></b> och <font color="FF0000"></font> vara
tomma koder, men inte koden <b> i <b>lite text</b>.
• Ta bort överflödiga kapslade koder tar bort alla överflödiga förekomster av en
kod. Exempel: I koden <b>Detta är vad jag <b>verkligen</b> ville säga</b> är
B-koderna som omger ordet ”verkligen” överflödiga och tas därför bort.
• Ta bort HTML-kommentarer från annat program än Dreamweaver tar bort
alla kommentarer som inte har infogats i Dreamweaver. Exempelvis tas <!-begin body text--> bort, men inte <!-- #BeginEditable "doctitle" -->
(eftersom det är en Dreamweaver-kommentar som markerar början på en
ändringsbar region i en mall).
• Ta bort Dreamweaver-HTML-kommentarer tar bort alla kommentarer som
har infogats i Dreamweaver. Exempelvis tas <!-- #BeginEditable "doctitle" -> bort, men inte <!--begin body text--> (eftersom det inte är en Dreamweaverkommentar). När du tar bort Dreamweaver-kommentarer ändras mallbaserade
dokument till vanliga HTML-dokument och biblioteksposter till normal
HTML-kod (det innebär att de inte kan uppdateras när den ursprungliga
mallen eller biblioteksposten ändras).
• Ta bort specifik(a) HTML-kod(er) tar bort koderna som anges i det
närliggande textfältet. Använd detta alternativ när du vill ta bort anpassade
koder som har infogats i andra visuella redigerare och andra koder som du inte
vill ska användas på webbplatsen (exempelvis BLINK). Avgränsa flera koder med
kommatecken (exempelvis FONT, BLINK).
• Kombinera kapslade <font>-koder där det är möjligt slår samman två eller fler
FONT-koder när de styr samma textintervall. Exempelvis ändras <font
size="7"><font color="#FF0000">big red</font></font> till <font font="7"
font="#FF0000">big red</font>.
• Visa logg vid slutförande visar en varningsruta med information om vilka
ändringar som görs i dokumentet så snart rensningen är klar.
3
Klicka på OK.
Beroende på hur stort dokumentet är och hur många alternativ som har
markerats, kan det ta flera sekunder att slutföra en rensning.
342
Kapitel 14
Formatera HTML-källkoden i befintliga dokument
De alternativ för formatering av HTML-källkod som du anger i inställningarna
för kodformat och i filen SourceFormat.txt gäller endast för efterföljande, nya
dokument som du skapar i Dreamweaver. Välj kommandot Använd källformat
när du vill använda dessa formateringsalternativ i befintliga HTML-dokument.
Så här använder du alternativen för formatering av HTML-källkod i ett befintligt
dokument:
1
Välj Arkiv > Öppna när du vill öppna en befintlig HTML-fil i
dokumentfönstret.
2
Välj Kommandon > Använd källformat.
Rensa Microsoft Word-HTML
I Dreamweaver kan du öppna eller importera dokument som har sparats i
Microsoft Word som HTML-filer och sedan använda kommandot Rensa WordHTML för att ta bort onödig HTML-kod som har skapats i Word. Den kod som
tas bort i Dreamweaver används huvudsakligen i Word för att formatera och visa
dokument i programmet och behövs inte för att visa HTML-filen. Behåll en
säkerhetskopia av den ursprungliga Word-filen (.doc), eftersom det inte är säkert
att du kan öppna HTML-dokumentet i Word igen efter att du har använt
funktionen Rensa Word-HTML. Kommandot Rensa Word-HTML kan användas
för dokument som har sparats som HTML-filer i Word 97 eller senare.
Så här rensar du Word-HTML:
1
Spara dokumentet som en HTML-fil i Microsoft Word.
2
Öppna HTML-dokumentet i Dreamweaver på något av följande sätt:
• Välj Arkiv > Importera > Importera Word-HTML och markera filen.
När du öppnar filen öppnas dialogrutan Rensa Word-HTML automatiskt.
• Välj Arkiv > Öppna och markera filen.
En loggfil för HTML-korrigeringar skapas automatiskt om alternativet Varna
vid rättning och borttagning av koder är markerat i inställningarna för
kodomskrivning. Detta tillhör inte funktionen Rensa Word-HTML. Klicka på
Fortsätt när du vill stänga dialogrutan. Välj sedan Kommandon > Rensa WordHTML i Dreamweaver.
3
Med båda metoderna kan du få vänta en kort stund medan Dreamweaver
försöker avgöra vilken Word-version filen har sparats i. Om programmet inte
klarar detta markerar du rätt version i listrutan.
Redigera HTML-kod i Dreamweaver
343
4
Välj vilka alternativ som ska användas för funktionen Rensa Word-HTML.
Följande alternativ visas på fliken Grundläggande:
• Ta bort Word-specifika koder tar bort all Word-specifik HTML, däribland
XML-kod i HTML-koder, Word-anpassade META- och LINK-koder i HEADdelen av dokumentet, Word-XML-koder, villkorskoder med innehåll samt
tomma stycken och marginaler i format. Du kan markera dessa alternativ var
för sig på fliken Detaljerad.
• Rensa CSS-format tar bort alla Word-specifika CSS-format, däribland infogade
CSS-format när så är möjligt (där det överordnade formatet har samma
formategenskaper), formatattribut som börjar med ”mso”, icke CSSformatdeklarationer, CSS-formatattribut i tabeller och alla oanvända
formatdefinitioner i HEAD-delen. Du kan ytterligare anpassa detta alternativ
på fliken Detaljerad.
• Rensa <font>-koder tar bort HTML-koder och konverterar standardtexten till
HTML-text i storlek 2.
• Rätta till felaktigt kapslade koder tar bort de teckensnittskoder som har
infogats i Word utanför stycke- och rubrikkoderna.
• Ange bakgrundsfärg använder du för att ange ett hexadecimalt värde om du vill
ställa in dokumentets bakgrundsfärg. Om du inte anger en bakgrundsfärg får
Word-HTML-dokumentet en grå bakgrund. Det standardinställda
hexadecimala värdet i Dreamweaver är vit.
• Använd källformat använder källformatsalternativen, som du anger i
inställningarna för kodformat och i filen SourceFormat.txt, i dokumentet.
• Visa logg vid slutförande visar en varningsruta med information om vilka
ändringar som görs i dokumentet så snart rensningen är klar.
5
Klicka på OK.
Beroende på hur stort dokumentet är och hur många alternativ som har
markerats, kan det ta flera sekunder att slutföra en rensning. Inställningarna du
har gjort sparas automatiskt som standardinställningar för Rensa WordHTML.
344
Kapitel 14
Använda externa HTML-redigerare
Ibland vill du kanske använda en textredigerare för att skriva stora mängder
HTML-, JavaScript- eller VBScript-kod manuellt. Du kan använda vilken extern
textredigerare som helst tillsammans med Dreamweaver, exempelvis Anteckningar
(som ingår i Windows 95, 98 och NT), SimpleText (som finns på Macintosh),
BBEdit, HomeSite, vi, emacs och TextPad. Se ”Använda en extern textredigerare
med Dreamweaver” på sidan 345 och ”Använda BBEdit med Dreamweaver
(endast Macintosh)” på sidan 346.
Använda en extern textredigerare med Dreamweaver
Du kan starta en extern textredigerare från Dreamweaver när du vill redigera
HTML-källkoden för det aktuella dokumentet och sedan växla tillbaka till
Dreamweaver för att fortsätta att redigera grafiskt. Dreamweaver känner av alla
ändringar som har sparats i dokumentet externt och du uppmanas läsa in
dokumentet på nytt när du börjar arbeta i Dreamweaver igen.
Om du använder BBEdit på Macintosh följer du anvisningarna i ”Använda
BBEdit med Dreamweaver (endast Macintosh)” på sidan 346 i stället för följande
steg.
Information om hur du anger externa redigerare för andra filtyper än text och
HTML finns i ”Starta en extern redigerare” på sidan 294.
Så här väljer du en extern HTML-redigerare:
1
Välj Redigera > Inställningar och markera kategorin Filtyper/Redigerare.
2
(Endast Macintosh) Om du vill använda en annan HTML-redigerare än
BBEdit avmarkerar du alternativet Aktivera BBEdit-integrering. Om du vill
använda BBEdit låter du Aktivera BBEdit-integrering vara markerat och
hoppar över resten av dessa steg.
3
Klicka på knappen Bläddra bredvid fältet Extern kodredigerare och välj en
textredigerare.
4
I listrutan Ladda om ändrade filer markerar du vad Dreamweaver ska göra när
programmet känner av att ändringar har gjorts externt i ett dokument som är
öppet i Dreamweaver.
5
I listrutan Spara vid start anger du om det aktuella dokumentet alltid ska sparas
innan redigeraren startas, om dokumentet aldrig ska sparas eller om du ska
tillfrågas om du vill spara varje gång du startar den externa redigeraren.
Så här startar du den externa kodredigeraren:
Välj Redigera > Redigera med (redigerarens namn).
Redigera HTML-kod i Dreamweaver
345
Använda BBEdit med Dreamweaver (endast Macintosh)
Om BBEdit-integrering är aktiverad, och du har ett dokument öppet i både
BBEdit och Dreamweaver, uppdateras dokumentet med de senaste ändringarna
när du växlar från det ena programmet till det andra. Dessutom håller båda
programmen reda på vilken markering som är aktuell. Om du exempelvis gör en
markering i Dreamweaver och sedan växlar till BBEdit är samma element
markerat där.
Du kan avaktivera BBEdit-integreringen om du föredrar att arbeta med en äldre
version av BBEdit eller en annan textredigerare. Markeringar känns inte av mellan
programmen om BBEdit-integreringen är avaktiverad.
Så här använder du BBEdit med Dreamweaver:
1
Välj Redigera > Redigera med BBEdit.
2
Redigera dokumentet i BBEdit.
3
Klicka på knappen Dreamweaver på HTML-verktygspaletten i BBEdit när du
vill återgå till Dreamweaver.
Så här avaktiverar du BBEdit-integrering:
1
Välj Redigera > Inställningar och markera kategorin Filtyper/Redigerare.
2
Avmarkera Aktivera BBEdit-integrering och klicka på OK.
Redigera ColdFusion- och Active Server-filer i Dreamweaver
I Dreamweaver visas ikoner som identifierar block med CFML- (ColdFusion
Markup Language) eller ASP-kod (Active Server Pages) i designvyn när så är
möjligt.
Obs! Som standard skriver Dreamweaver aldrig om HTML-kod som finns i ColdFusionoch ASP-filer.
Så här redigerar du ett block med ASP-kod i designvyn:
346
Kapitel 14
1
Klicka på den gula ASP-markören så att den markeras.
2
Klicka på knappen Redigera i egenskapskontrollen.
3
Redigera ASP-koden i dialogrutan som visas och klicka sedan på OK.
Så här redigerar du ett block med CFML-kod i designvyn:
1
Klicka på CFML-markören så att den markeras.
2
Gör något av följande i egenskapskontrollen:
• Klicka på knappen Attribut när du vill redigera kodens attribut och deras
värden eller lägga till nya.
• Klicka på knappen Innehåll när du vill redigera innehållet som visas mellan de
inledande och de avslutande CFML-koderna. Om den markerade koden är en
tom kod (d.v.s. inte har någon avslutande kod) är knappen Innehåll inte
tillgänglig.
Om du inte kan se markörer eller markerad text där du vet att det finns ASP- eller
CFML-kod kontrollerar du först att Visa > Visuella hjälpmedel > Osynliga
element är aktiverat. Om detta alternativ är markerat och ikonerna ändå inte syns
kan inte Dreamweaver visa koden som CFML eller ASP. Detta kan exempelvis
hända när villkorssatser är infogade i HTML-koder, som i följande ASP-kod:
<input type="checkbox" name="månad" value="Oktober"
<% if månad="Oktober" then %>checked<% end if %>
>
Gör något av följande när du vill redigera CFML- eller ASP-kod i kodredigerarna:
Leta reda på koden i kodvyn eller kodkontrollen och redigera den direkt.
Så här söker du efter CFML- eller ASP-koden:
Placera insättningspunkten i närheten av CFML- eller ASP-koden i designvyn.
CFML- eller ASP-koden markeras i kodvyn eller kodkontrollen så att du kan
redigera den direkt.
Information om hur du arbetar med CFML- eller ASP-kod och visar resultaten i
dokumentfönstret finns i ”Anpassa tolkningen av tredjepartskoder” på sidan 532.
Redigera HTML-kod i Dreamweaver
347
348
Kapitel 14
15
KAPITEL 15
Länkar och navigering
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
När du har satt upp en lokal plats där du ska spara webbdokumenten och redan
har skapat HTML-sidor, vill du antagligen skapa kopplingar från dokumenten till
andra dokument eller filtyper. (Information om hur du sätter upp en lokal plats
finns i ”Använda Dreamweaver för att göra en ny plats” på sidan 97.)
I Macromedia Dreamweaver kan du skapa hypertextlänkar till dokument, bilder,
multimediafiler eller hämtningsbara program på flera sätt. Du kan skapa länkar till
text eller bilder var som helst i ett dokument, exempelvis till text eller bilder som
är placerade i rubriker, listor, skikt eller ramar. Mer information om hur du skapar
länkar finns i ”Skapa länkar” på sidan 354.
Använd platskartan om du vill visa hur filerna länkas till varandra visuellt. Från
platskartan kan du lägga till nya dokument på platsen, skapa och ta bort
dokumentlänkar och kontrollera länkar till beroende filer. Se ”Använda
platskartan” på sidan 113.
Det finns flera olika sätt att skapa och hantera länkar. Vissa webbutformare
föredrar att skapa länkar till sidor eller filer som ännu inte finns, medan andra
föredrar att skapa alla filer och sidor först och sedan lägga till länkarna. Ett annat
sätt att hantera länkar är att skapa ”platshållarsidor” som ersättare åt de slutliga
filerna. På så sätt kan du snabbt lägga till och kontrollera länkarna innan du har
gjort färdigt alla sidorna. Se ”Kontrollera länkar på en sida eller plats” på
sidan 502.
349
Om dokumentplacering och sökvägar
Det är viktigt att du förstår hur sökvägen mellan dokumentet som du länkar från
och dokumentet som du länkar till fungerar när du ska skapa länkar.
Varje webbsida har en unik adress som kallas URL (Universal Resource Locator).
(Detaljerad information om URL-adresser finns på W3C (World Wide Web
Consortium) webbsida om namn och adresser.) När du skapar en lokal länk (en
länk från ett dokument till ett annat på samma plats) behöver du inte ange hela
URL-adressen till dokumentet som du länkar till. I stället kan du ange en relativ
sökväg från det aktuella dokumentet eller från platsens rotmapp. Följande är de
tre olika typerna av dokumentsökvägar:
• Absoluta sökvägar (exempelvis http://www.macromedia.com/support/
dreamweaver/contents.html).
• Dokumentrelativa sökvägar (exempelvis dreamweaver/contents.html).
• Rotrelativa sökvägar (exempelvis /support/dreamweaver/contents.html).
Med Dreamweaver kan du enkelt välja den typ av dokumentsökväg som ska
skapas för länkarna. Se ”Länka dokument med egenskapskontrollen och med
peka-på-fil-ikonen” på sidan 355.
Obs! Det är antagligen bäst att använda den länktyp som du föredrar och bäst känner till
(plats- eller dokumentrelativ). Om du bläddrar till länkarna i stället för att skriva in
sökvägarna blir sökvägen alltid rätt.
Absoluta sökvägar
Absoluta sökvägar innehåller en komplett URL-adress till det länkade
dokumentet, bland annat protokollet som ska användas (vanligtvis http:// för
webbsidor). Exempel: http://www.macromedia.com/support/dreamweaver/
contents.html är en absolut sökväg. Du måste använda en absolut sökväg om du
vill länka till ett dokument på en annan server. Du kan också använda absoluta
sökvägslänkar för lokala länkar (till dokument på samma plats) men vi
uppmuntrar inte till att du använder denna metod. Om du flyttar platsen till en
annan domän bryts alla lokala absoluta sökvägslänkar. Dessutom får du en större
flexibilitet om du använder relativa sökvägar för lokala länkar om du behöver
flytta filer inom platsen.
Obs! När du infogar bilder (inte länkar): Om du använder en absolut sökväg till en bild som
ligger på en fjärrserver och inte finns på den lokala hårddisken, kommer du inte att kunna
visa bilden i dokumentfönstret. I stället måste du förhandsgranska sidorna i en webbläsare
om du vill se bilden. Om det är möjligt bör du använda dokument- eller rotrelativa sökvägar
för bilder. Mer information finns i ”Infoga en bild” på sidan 264.
350
Kapitel 15
Dokumentrelativa sökvägar
Dokumentrelativa sökvägar är de lämpligaste sökvägarna för lokala länkar på de
flesta webbplatser. De dokumentrelativa länkarna är särskilt användbara när det
aktuella dokumentet och dokumentet som länken går till befinner sig i samma
mapp och kommer så att vara. Du kan också använda en dokumentrelativ
sökväg när du länkar till ett dokument i en annan mapp genom att ange
sökvägen genom mapphierarkin från det aktuella dokumentet till det länkade
dokumentet. Det grundläggande begreppet bakom dokumentrelativa sökvägar
är att utelämna den del av den absoluta URL-adressen som är lika för både det
aktuella dokumentet och det länkade dokumentet och endast ange den del av
sökvägen som skiljer sig åt.
• Om du vill länka till en annan fil i samma mapp som det aktuella dokumentet
anger du helt enkelt filnamnet.
• Om du vill länka till en fil i en undermapp till det aktuella dokumentets mapp,
skriver du namnet på undermappen, ett snedstreck (/) och sedan filens namn.
• Om du vill länka till en fil i en överordnad mapp till det aktuella dokumentets
mapp, skriver du ../ före filnamnet (där ”..” betyder ”upp en nivå i
mapphierarkin”).
Anta att du har en plats med följande hierarki:
min_plats (rotmapp)
support
contents.html
hours.html
resurser
tips.html
produkter
catalog.html
index.html (home page)
Länkar och navigering
351
Så här länkar du från filen contents.html till andra filer:
• Så här länkar du från contents.html till hours.html (båda filerna befinner sig i
samma mapp). Filnamnet är den relativa sökvägen: hours.html.
• Så här länkar du till tips.html (i undermappen resources). Använd den relativa
sökvägen resources/tips.html.
Varje snedstreck (/) betyder att du flyttar dig en nivå ned i mapphierarkin.
• Så här länkar du till index.html (i den överordnade mappen, en nivå ovanför
contents.html). Använd den relativa sökvägen ../index.html.
Varje ../ betyder att du flyttar dig en nivå upp i mapphierarkin.
• Så här länkar du till catalog.html (i en annan undermapp till den överordnade
mappen). Använd den relativa sökvägen ../products/catalog.html.
Med ../ flyttar du upp till den överordnade mappen. Med products/ flyttar du
ned i undermappen products.
Obs! Spara alltid en ny fil innan du skapar en dokumentrelativ sökväg, eftersom den
dokumentrelativa sökvägen inte är giltig utan en bestämd startpunkt. Om du skapar en
dokumentrelativ sökväg innan du sparar filen, används en absolut sökväg temporärt som
börjar med ”file://” tills filen sparas. När filen sedan sparas konverteras sökvägen file:// till en
relativ sökväg.
När du flyttar en grupp filer som en grupp (när du exempelvis flyttar en hel mapp
behåller alla filerna i mappen samma relativa sökvägar till varandra) behöver du
inte uppdatera dokumentrelativa länkar mellan filerna. När du flyttar en fil som
innehåller dokumentrelativa länkar eller en enstaka fil som en dokumentrelativ
länk länkar till, måste du uppdatera dessa länkar. (Om du flyttar eller ändrar
namn på filer i platsfönstret uppdateras alla relevanta länkar automatiskt.)
Rotrelativa sökvägar
Rotrelativa sökvägar innehåller sökvägen från platsens rotmapp till ett dokument.
Du vill kanske använda dessa typer av sökvägar om du arbetar på en stor
webbplats som använder flera servrar eller en server som innehåller flera olika
platser. Om du däremot inte är förtrolig med denna typ av sökväg kan du använda
dokumentrelativa sökvägar.
En rotrelativ sökväg börjar med ett snedstreck som identifierar platsens rotmapp.
Exempelvis är /support/tips.html en rotrelativ sökväg till en fil (tips.html) i
underkatalogen support som finns i platsens rotmapp.
352
Kapitel 15
Att använda en rotrelativ sökväg är oftast det bästa sättet att ange länkar på en
webbplats där du ofta måste flytta HTML-filer från en mapp till en annan. När
du flyttar ett dokument som innehåller rotrelativa länkar, behöver du inte ändra
länkarna. Om du i dina HTML-filer exempelvis använder rotrelativa länkar till
beroende filer (exempelvis bilder) och flyttar en HTML-fil, fungerar länkarna
fortfarande till de beroende filerna. När du däremot flyttar eller ändrar namn på
dokument som rotrelativa länkar länkar till, måste du uppdatera sådana länkar,
även om dokumentens relativa sökvägar inte har ändrats. Om du exempelvis
flyttar en mapp måste alla rotrelativa länkar inom den mappen uppdateras. (Om
du flyttar eller ändrar namn på filer i platsfönstret uppdateras alla relevanta länkar
automatiskt.)
• Om du vill använda rotrelativa sökvägar börjar du med att definiera en lokal
plats i Dreamweaver. Det gör du genom att välja en lokal rotmapp som ska
fungera som motsvarigheten till dokumentroten på en server. (Se ”Använda
Dreamweaver för att göra en ny plats” på sidan 97.)
Dreamweaver använder denna mapp för att bestämma rotrelativa sökvägar till
filer.
Obs! Rotrelativa länkar tolkas av servrar, inte av webbläsare, så om du i webbläsaren
öppnar en lokal sida som använder rotrelativa länkar (du använder inte kommandot
Förhandsgranska i webbläsare från Dreamweaver), fungerar inte länkarna. När du
använder kommandot Förhandsgranska i webbläsare för att förhandsgranska ett
dokument som använder rotrelativa länkar, konverteras länkarna temporärt (endast i den
förhandsgranskade) till file://-sökvägar. Du kan dock endast förhandsgranska en sida i
taget som använder rotrelativa länkar. Om du exempelvis följer en länk från den sida som
du förhandsgranskar kommer nästa sidas rotrelativa länkar inte att konverteras och
webbläsaren kan inte följa en sådan länk. Om du förhandsgranskar sidor i en
ramuppsättning som använder rotrelativa länkar får du liknande problem.
Gör något av följande när du vill förhandsgranska en uppsättning med sidor som
använder rotrelativa länkar:
• Skicka filerna till en fjärrserver och granska dem från den.
• (Endast Windows) Välj Redigera > Inställningar, klicka på Visa i webbläsare
och markera kryssrutan Förhandsgranska med lokal server. Om du vill använda
detta alternativ måste du köra en webbserver på datorn.
Länkar och navigering
353
Skapa länkar
HTML-koden som du använder för att skapa en hypertextlänk kallas ankarkod
eller A-kod. Dreamweaver skapar ett ankarkod för objekt, text eller bilder som du
skapar länkar från. Du kan skapa länkar till andra dokument och filer, och länkar
till en viss plats i ett dokument med hjälp av A HREF-koden.
Om du exempelvis markerar texten Hemsida i dokumentfönstret och sedan skapar
en länk till filen home.htm, kommer HTML-källkoden för länken att se ut så här:
<a href="home.htm">Hemsida</a>
Om du skapar en länk till en plats i ett dokument, börjar du med att skapa ett
namngivet ankare, exempelvis a name="Huvudmeny". Sedan skapar du en länk på
sidan som refererar tillbaka till det namngivna ankaret, exempelvis a
href="#Huvudmeny".
Innan du skapar länkar bör du veta hur dokumentrelativa sökvägar, rotrelativa
sökvägar och absoluta sökvägar fungerar. Se ”Om dokumentplacering och
sökvägar” på sidan 350.
Du kan skapa flera olika typer av länkar i ett dokument:
• En länk till ett annat dokument eller till en fil, exempelvis en bild-, film-, PDFeller ljudfil.
• En namngiven ankarlänk, som hoppar till en viss plats i dokumentet.
• En e-postlänk, som skapar ett nytt, tomt e-postmeddelande med mottagarens
adress ifylld.
• Ingenstans- och skriptlänkar, med vilka du kan koppla beteenden till objekt
eller skapa en länk som kör JavaScript-kod.
I Dreamweaver kan du enkelt skapa lokala länkar (mellan dokument på samma
plats) flera sätt:
• Använd platskartan när du vill visa, skapa, ändra eller ta bort länkar.
• Välj Ändra > Skapa länk i dokumentfönstret när du vill välja en fil att länka till.
• Använd egenskapskontrollen när du vill länka till en fil, genom att använda
mappikonen för att bläddra till och välja en fil, genom att använda peka-på-filikonen för att välja en fil eller genom att skriva sökvägen till filen.
Obs! Om du skriver URL-adresser eller sökvägar till en fil kan detta leda till en felaktiga
sökvägar och länkar som inte fungerar. För att vara på den säkra sidan bör du använda
mappikonen och bläddra till länken.
• Välj Skapa länk på snabbmenyn och välj sedan en fil att länka till.
Om du vill skapa en extern länk (till ett dokument på en annan plats), måste du skriva
in den absoluta sökvägen (med rätt protokoll) i egenskapskontrollen. Kontrollera att
du anger hela sökvägen (inklusive http://) när du skapar externa länkar.
354
Kapitel 15
Länka dokument med egenskapskontrollen och med pekapå-fil-ikonen
Använd egenskapskontrollen och peka-på-fil-ikonen när du vill skapa länkar från
en bild, ett objekt eller text till ett annat dokument eller fil.
Mer information finns i ”Skapa och ändra länkar i platskartan” på sidan 362.
Så här skapar du länkar mellan dokument med mappikonen eller länktextrutan:
1
Markera text eller en bild i designvyn i dokumentfönstret.
2
Öppna egenskapskontrollen (Fönster > Egenskaper) och gör något av följande:
• Klicka på mappikonen till höger om rutan Länk om du vill bläddra till filen
och markera den.
Sökvägen till det länkade dokumentet visas i fältet URL. Markera om sökvägen
är dokumentrelativ eller rotrelativ i listrutan Relativ till i dialogrutan Välj
HTML-fil och klicka sedan på Välj.
Obs! När du ändrar sökvägstypen i listrutan Relativt till, kommer den att vara
standardinställningen för andra länkar som du skapar tills du ändrar inställningen.
• I fältet Länk skriver du sökvägen och filnamnet på dokumentet.
Om du vill länka till ett dokument på platsen anger du en dokumentrelativ
eller rotrelativ sökväg. Om du vill länka till ett dokument utanför platsen
skriver du en absolut sökväg inklusive protokolltyp (exempelvis http://). Du
kan använda denna metod för att ange en länk till en fil som ännu inte finns.
3
Markera var dokumentet ska öppnas.
Om du vill att det länkade dokumentet ska visas någon annanstans än i det
aktuella fönstret eller den aktuella ramen, markerar du ett alternativ i listrutan
Mål i egenskapskontrollen.
Tips! Om alla länkar på sidan anges till samma målområde, kan du ange målområdet en
gång genom att välja Infoga > HEAD-koder > Bas och välja den målinformation som du
använda.
Mer information om hur du ange ramar som mål finns i ”Styra raminnehåll
med länkar” på sidan 212.
Länkar och navigering
355
Så här länkar du till ett dokument med hjälp av peka-på-fil-ikonen:
1
Markera text eller en bild i designvyn i dokumentfönstret.
2
Dra peka-på-fil-ikonen till höger om fältet Länk i egenskapskontrollen och
peka till ett annat, öppet dokument, ett synligt ankare i ett öppet dokument
eller ett dokument i platsfönstret.
Textrutan Länk uppdateras med länken.
Obs! Den öppna dokument- eller platsfönsterfilen som du pekar till flyttas till förgrunden
när du markerar.
3
Släpp upp musknappen.
Dra peka-på-fil-ikonen från egenskapskontrollen till en fil i platsfönstret
356
Kapitel 15
Så här skapar du en länk från en markering i ett öppet dokument:
1
Markera text i dokumentfönstrets designvy.
2
Håll ned Skift och dra från markeringen.
Peka-på-fil-ikonen visas när du drar.
3
Peka på ett annat öppet dokument, ett synligt ankare i ett öppet dokument eller
ett dokument i platsfönstret.
4
Släpp upp musknappen.
Skift-dra peka-på-fil-ikonen från text i dokumentfönstret till en fil i platsfönstret
Länkar och navigering
357
Så här skapar du en länk med platskartan och peka-på-fil-ikonen:
1
I platsfönstret visar du både Platsens filer och Platskarta genom att hålla ned
ikonen Platskarta och välja Karta och filer.
2
Markera en HTML-fil på platskartan.
Peka-på-fil-ikonen visas bredvid filen.
3
Dra peka-på-fil-ikonen och peka på en annan fil i platskartan eller på en lokal
fil i Platsens filer.
4
Släpp upp musknappen.
En hypertextlänk med den länkade filens namn placeras längst ned i den
markerade HTML-filen. Denna metod fungerar bra när du skapar platsen och
vill skapa länkar över platsen snabbt.
Information om hur du visar en platskarta finns i ”Använda platskartan” på
sidan 113.
Länka till en viss plats i ett dokument
Du kan använda egenskapskontrollen om du vill länka till en viss del av ett
dokument, genom att först skapa namngivna ankare. Med namngivna ankare kan
du ange markörer i ett dokument. De placeras oftast vid ett visst avsnitt eller högst
upp i ett dokument. Du kan sedan skapa länkar till dessa namngivna ankare som
snabbt tar besökaren till den angivna platsen.
Du skapar en länk till ett namngivet ankare i två steg. Du börjar med att skapa ett
namngivet ankare. Därefter skapar du en länk till det namngivna ankaret.
358
Kapitel 15
Så här skapar du ett namngivet ankare:
1
Placera insättningspunkten i dokumentfönstrets designvy där du vill infoga
ankaret.
2
Gör något av följande:
• Välj Infoga > Osynliga koder > Namngivet ankare.
• Tryck på Ctrl+Alt+A (Windows) eller Kommando+Alternativ+A (Macintosh).
• Klicka på Infoga namngivet ankare i kategorin Osynliga på objektpanelen.
3
Ange ett namn i textrutan Ankarnamn i dialogrutan Infoga namngivet ankare.
Om en ankarmarkering inte visas vid insättningspunkten väljer du Visa >
Visuella hjälpmedel > Osynliga element.
Obs! Ankarnamn kan inte innehålla mellanslag och bör inte placeras i ett skikt.
Så här länkar du till ett namngivet ankare:
1
Markera en text eller en bild som du vill skapa en länk från i dokumentfönstrets
designvy.
2
I egenskapskontrollen skriver du tecknet # och namnet på ankaret i rutan Länk.
Exempel:
• Om du vill länka till ett ankare med namnet ”top” i det aktuella dokumentet
skriver du #top.
• Om du vill länka till ett ankare med namnet ”top” i ett annat dokument i
samma mapp, skriver du filnamn.html#top.
Obs! Ankarnamn är skiftlägeskänsliga.
Så här länkar du till ett namngivet ankare med hjälp av peka-på-fil-metoden:
1
Öppna dokumentet som innehåller det namngivna ankaret som du vill länka
till.
2
Välj Visa > Visuella hjälpmedel > Osynliga element för att göra ankaret synligt.
3
Markera en text eller en bild som du vill skapa en länk från i dokumentfönstrets
designvy. (Om detta är ett annat, öppet dokument måste du växla till det.)
4
Gör något av följande:
• Klicka på peka-på-fil-ikonen till höger om textrutan Länk i
egenskapskontrollen och dra den till ankaret som du vill länka till: antingen ett
ankare i samma dokument eller till ett ankare i ett annat, öppet dokument.
• Håll ned Skift och dra från den markerade texten (i dokumentfönstret) eller
bilden till ankaret som du vill länka till: antingen ett ankare i samma dokument
eller till ett ankare i ett annat, öppet dokument.
Länkar och navigering
359
Skapa en e-postlänk
När användaren klickar på en e-postlänk öppnas ett nytt, tomt meddelandefönster
(med hjälp av e-postprogrammet som hör ihop med användarens webbläsare).
Adressen som är angiven i länken som går till fältet Till, läggs till i epostmeddelandets fönster.
Så här skapar du en e-postlänk med kommandot Infoga E-postlänk:
1
Placera insättningspunkten i dokumentfönstrets designvy där du vill infoga epostlänken eller också markerar du texten eller bilden som du vill visa som en
e-postlänk. Gör sedan något av följande:
• Välj Infoga > E-postlänk.
• Klicka på Infoga e-postlänk i kategorin Vanlig på objektpanelen.
2
Skriv eller redigera namnet som ska visas i dokumentet som en e-postlänk i
textrutan Text i dialogrutan Infoga e-postlänk.
3
I textfältet E-post skriver du e-postadressen.
4
Klicka på OK.
Så här skapar du en e-postlänk med egenskapskontrollen:
1
Markera text, en bild eller ett objekt i designvyn i dokumentfönstret.
2
I rutan Länk i egenskapskontrollen skriver du mailto: följt av en e-postadress.
Skriv inga mellanslag mellan kolonet och e-postadressen. Du kan exempelvis
skriva mailto:[email protected].
Skapa ingenstans- och skriptlänkar
De vanligaste länkarna är de till dokument och namngivna ankare (beskrivs i
”Länka dokument med egenskapskontrollen och med peka-på-fil-ikonen” på
sidan 355 och ”Länka till en viss plats i ett dokument” på sidan 358), men det
finns även andra typer av länkar.
är en outnämnd länk. Använd ingenstanslänkar när du vill
koppla beteenden till objekt eller text på en sida. När du har skapat en
ingenstanslänk kan du koppla ett beteende till länken så att den (länken) växlar en
bild eller visar ett skikt när pekaren flyttas över länken. Information om hur du
kopplar beteenden till objekt finns i ”Koppla ett beteende” på sidan 437.
En ingenstanslänk
Skriptlänkar kör JavaScript-kod eller anropar JavaScript-funktioner och är
användbara eftersom de ger besökarna mer information om en post utan att han
eller hon behöver lämna webbsidan. Skriptlänkar kan också användas beräkningar,
validering av formulär och andra bearbetningsuppgifter när en besökare klickar på
en viss post.
360
Kapitel 15
Så här skapar du en ingenstanslänk:
1
Markera text, en bild eller ett objekt i designvyn i dokumentfönstret.
2
I egenskapskontrollen skriver du tecknet # i rutan Länk.
Så här skapar du en skriptlänk:
1
Markera text, en bild eller ett objekt i designvyn i dokumentfönstret.
2
I rutan Länk i egenskapskontrollen skriver du javascript: följt av JavaScript-kod
eller ett funktionsanrop.
Om du exempelvis skriver javascript:alert('Länken går till indexet') i rutan
Länk skapas en länk som, när du klickar på den, visar en varningsruta med
meddelandet Länken går till indexet.
Obs! Eftersom JavaScript-kod visas mellan dubbla citattecken i HTML-koden (liksom
värdet för attributet HREF), måste du använda enkla citattecken i skriptkoden eller
använda dubbla citattecken genom att föregå dem med omvända snedstreck
(exempelvis \"Länken går till indexet\").
Hantera länkar
I Dreamweaver kan du uppdatera länkar till och från ett dokument varje gång du
flyttar eller ändrar namn på dokumentet på en lokal plats. Denna funktion
fungerar bäst när du sparar hela platsen (eller en fullständig och oberoende del av
den) på din lokala disk. Inga ändringar görs på filer på fjärrplatsen förrän du
checkar in de lokala filerna på fjärrservern.
Så här aktiverar du länkhantering i Dreamweaver:
1
Välj Redigera > Inställningar och kategorin Allmänt.
2
Välj Alltid eller Fråga i listrutan Uppdatera länkar när filer flyttas och klicka på
OK.
Om du väljer Alltid uppdateras automatiskt alla länkar till och från ett
markerat dokument varje gång du flyttar eller ändrar namn på det. (Specifika
anvisningar om vad du ska göra när du tar bort en fil finns i ”Ändra en länk på
hela platsen” på sidan 363.) Om du väljer Fråga visas först en dialogruta med
en lista över alla filer som påverkas av ändringen. Klicka på Uppdatera när du
vill uppdatera länkarna i dessa filer eller på Uppdatera inte om du vill att filerna
ska vara oförändrade.
Om du vill göra uppdateringen snabbare kan du skapa en cachefil där information
om alla länkarna på den lokala platsen sparas. Denna cachefil skapas när du väljer
alternativet Cache i dialogrutan Platsdefinition. Cachefilen uppdateras hela tiden
när du lägger till, ändrar eller tar bort länkar till filer på din lokala plats.
Länkar och navigering
361
Så här skapar du en cachefil för platsen:
1
Välj Plats > Definiera platser.
2
I dialogrutan Definiera platser markerar du platsen och klickar på Redigera. I
kategorin Lokal info markerar du kryssrutan Aktivera cache.
Första gånger du lägger till eller tar bort länkar till filer på den lokala platsen efter
att ha startat Dreamweaver, uppmanas du att läsa in cachefilen. Om du klickar på
Ja läses cachefilen in och alla länkar till filen du just ändrade uppdateras
automatiskt. Om du klickar på Nej markeras ändringen i cachefilen, men
cachefilen läses inte in och länkarna uppdateras inte.
Det kan ta några minuter för cachefilen att läsas in på platser. Den största delen av
denna tid går åt till att jämföra tidstämpeln på filerna på den lokala platsen med
de i cachefilen för att se om cachefilen är för gammal. Om du inte har ändrat
några filer utanför Dreamweaver kan du klicka på Stopp när knappen visas.
Så här återskapar du cachefilen för platsen:
Välj Skapa om platscache i platsfönstret.
Skapa och ändra länkar i platskartan
Du kan ändra strukturen på platsen i platskartan genom att lägga till, ändra och ta
bort länkar. Platskartan uppdateras automatiskt med ändringarna.
Gör något av följande när du vill lägga till en länk:
• Dra en sida från Utforskaren i Windows eller Finder i Macintosh till en sida på
platskartan.
• Markera HTML-sidan och välj Plats > Länk till befintlig fil (Windows) eller
Plats > Visa platskartan > Länka till befintlig fil (Macintosh). Du kan också
välja Länka till befintlig fil på snabbmenyn.
• Markera en HTML-sida på platskartan. Peka-på-fil-ikonen visas. Dra ikonen
till objektet du vill länka till: en fil i Platsens filer, ett öppet Dreamweaverdokument eller ett namngivet ankare i ett dokument som är öppet på
arbetsytan. Se ”Länka dokument med egenskapskontrollen och med peka-påfil-ikonen” på sidan 355.
Så här ändrar du en länk:
362
Kapitel 15
1
Markera sidan vars länk du ska ändra i platskartan och välj Plats > Ändra länk
(Windows) eller Plats > Visa platskartan > Ändra länk (Macintosh).
2
Bläddra till den nya filen eller skriv en URL-adress.
Gör något av följande när du vill ta bort en länk:
• Markera sidan på platskartan och välj Plats > Ta bort länk (Windows) eller Plats
> Visa platskartan > Ta bort länk (Macintosh).
• Markera sidan på platskartan och välj Ta bort länk på snabbmenyn. Om du tar
bort en länk tas inte filen bort. Det är endast länken i HTML-koden som tas
bort från sidan som pekar på länken.
Så här öppnar du länkens källa:
1
Markera en fil på platskartan.
2
Välj Plats > Öppna länkens källa (Windows) eller Plats > Visa platskartan >
Öppna länkens källa (Macintosh).
Egenskapskontrollen och källfilen som innehåller filen öppnas. Länken markeras.
Ändra en länk på hela platsen
Förutom att länkar kan uppdateras automatiskt varje gång du flyttar eller ändrar
namn på en fil, kan du manuellt ändra alla länkar (även e-post-, FTP-, ingenstansoch skriptlänkar) så att de pekar någon annanstans. Du kan använda detta
alternativ när som helst (du kan exempelvis ha länkat orden ”filmer denna månad”
till ”/filmer/juli.html” på hela platsen och den första augusti måste du ändra dessa
länkar så att de pekar till /filmer/augusti.html), men det är inte särskilt användbart
när du vill ta bort en fil som andra filer länkar till.
Så här ändrar du en länk på hela platsen:
1
Markera en fil i rutan Lokal mapp i platsfönstret.
2
Välj Plats > Ändra länk på hela platsen.
3
Klicka på mappikonen och bläddra till en fil och markera den i dialogrutan
som visas. Du kan också skriva sökvägen och filnamnet i fältet Till länkar till.
4
Klicka på OK.
Alla dokument som länkar till den markerade filen uppdateras så att de pekar
till den nya filen, med hjälp av det sökvägsformat som redan används i
dokumentet (om den gamla sökvägen var dokumentrelativ är även den nya
sökvägen det). Vilken länktyp du än använder, dokument- eller rotrelativ,
spelar ingen roll. Länken uppdateras automatiskt.
När en länk har ändrats på hela platsen blir den markerade filen föräldralös (det
betyder att inga filer på den lokala hårddisken pekar till den). Du kan tryggt ta
bort den utan att bryta några länkar på din lokala plats.
Obs! Eftersom dessa ändringar görs lokalt måste du manuellt ta bort motsvarande fil på
fjärrplatsen och checka in alla filer i vilka länkar har ändrats, annars kommer besökare på
din plats inte att kunna se ändringarna.
Länkar och navigering
363
Så här ändrar du e-post-, FTP-, ingenstans- och skriptlänkar för hela platsen:
1
Välj Plats > Ändra länk på hela platsen.
2
I dialogrutan Ändra länk på hela platsen anger du följande information:
• Skriv hela texten till den länk du vill ändra i textrutan Ändra alla länkar till.
• Skriv hela texten till ersättningslänken i textrutan Till länkar till.
3
Klicka på OK.
Om du exempelvis vill uppdatera alla e-postlänkar som pekar till din gamla adress,
kan du skriva mailto:[email protected] i fältet Ändra alla länkar till och skriva
mailto:[email protected] i fältet Till länkar till.
Skapa hoppmenyer
En hoppmeny är en listruta i ett dokument, som visas för besökarna och som
innehåller alternativ som länkar till dokument eller filer. Du kan skapa länkar till
dokument på din och andras webbplatser, du kan skapa e-postlänkar, länkar till
bilder eller vilken filtyp som helst som kan öppnas i en webbläsare.
Det finns tre grundläggande komponenter som en hoppmeny kan innehålla:
• en menyuppmaning, exempelvis en kategoribeskrivning för menyalternativen,
eller instruktioner, exempelvis ”Välj en:”. (valfritt)
• En lista med länkade menyalternativ: En användare väljer ett alternativ och ett
länkat dokument eller en länkad fil öppnas. (obligatoriskt)
• En Gå-knapp (valfritt)
Infoga en hoppmeny
Om du vill infoga en hoppmeny i ett dokument använder du formulärobjektet
Hoppmeny.
Så här skapar du en hoppmeny:
1
Välj Infoga > Formulärobjekt > Hoppmeny.
Dialogrutan Infoga hoppmeny visas.
364
Kapitel 15
2
Om du vill skapa en menyuppmaning skriver du texten i textrutan Text i
dialogrutan. Under Alternativ markerar du kryssrutan Markera första post efter
URL-ändring, klicka sedan på plusknappen (+) om du vill lägga till
menyposten.
3
Skriv texten som ska visas i menyn i textrutan Text i dialogrutan Infoga
hoppmeny.
4
I textrutan Vid markering gå till URL väljer du den fil som ska öppnas genom
att göra något av följande:
• Klicka på Bläddra och markera filen som ska öppnas.
• Skriv sökvägen till filen som ska öppnas.
5
I listrutan Öppna URL i markerar du var filen ska öppnas:
• Markera Huvudfönster om du vill öppna filen i samma fönster.
• Markera en ram som filen ska öppnas i.
Obs! Om den ram som du vill öppna länken i inte visas i listrutan Öppna URL i, stänger
du dialogrutan Infoga hoppmeny och ger ramen ett namn. Mer information om hur du
anger ett namn på en ram finns i ”Ange ramegenskaper” på sidan 206.
6
Så här lägger du till en Gå-knapp i stället för en menyuppmaning: Markera
kryssrutan Infoga Gå-knapp efter menyn, under Alternativ.
7
Om du vill lägga till fler menyalternativ klickar du på plusknappen (+) och
upprepar steg 3 till och med 6 i denna procedur.
8
Klicka på OK.
Redigera hoppmenyalternativ
Om du vill ändra hoppmenyalternativ använder du egenskapskontrollen eller
beteendepanelen. Du kan ändra ordningen i listan eller filen som en menypost
länkar till eller lägga till, ta bort eller ändra namn på en post.
Om du vill ändra var en länkad fil ska öppnas eller om du vill ändra en
menyuppmaning använder du beteendepanelen. Se ”Hoppmeny” på sidan 453.
Så här redigerar du ett hoppmenyalternativ med egenskapskontrollen:
1
Välj Fönster > Egenskaper, så öppnas egenskapskontrollen.
2
Markera hoppmenyn i dokumentfönstrets designvy genom att klicka på den.
Lista/Meny visas i egenskapskontrollen.
3
I egenskapskontrollen klickar du på knappen Listvärden.
4
Ändra menyalternativen och klicka sedan på OK.
Länkar och navigering
365
Felsökning av hoppmenyer
När en användare väljer ett hoppmenyalternativ går det inte att markera om det
när hon eller han kommer tillbaka till den sidan. Detsamma gäller om användaren
har markerat en ram i listrutan Öppna URL i. Det finns två sätt att komma runt
problemet:
• Använd en menyuppmaning, exempelvis en kategori eller en instruktion till
användaren, exempelvis ”Välj en:”. Menyuppmaningen markeras automatiskt
när du väljer något på menyn.
• Använd en Gå-knapp, vilket gör det möjligt för en besökare att komma tillbaka
till den aktuella länken.
Obs! Markera endast ett av dessa alternativ eftersom de används för hela hoppmenyn.
Skapa navigationsfält
Ett navigationsfält består av en bild (eller flera bilder) som ändras beroende på vad
användaren gör. Med navigationsfält är det enkelt att flytta mellan sidorna på en
plats.
Innan du använder kommandot Infoga navigationsfält skapar du en uppsättning
bilder för de olika visningslägena som navigationselementen ska visa. (Det kan
hjälpa om du tänker på navigationsfältelementet som knappar, eftersom de tar
användaren till en annan sida när han/hon klickar på dem.)
Ett navigationsfältelement kan ha fyra lägen:
• Upp-bild: den bild som visas innan användaren har klickat på eller på annat sätt
påverkat elementet. Elementet i detta läge ser inte ut som det har klickats på.
• Över-bild: den bild som visas när pekaren förs över upp-bilden. Elements
utseende ändras (det kan exempelvis bli ljusare) så att användarna vet att de kan
påverka elementet.
366
Kapitel 15
• Ned-bild: den bild som visas efter det att någon har klickat på elementet. När
en användare exempelvis klickar på ett element läses en ny sida in och
navigationsfältet visas fortfarande, men elementet som användaren klickade på
visas i en mörkare ton för att visa att det har valts.
• Över ned-bild: den bild som visas när någon för pekaren över ned-bilden när
elementet har klickats på. Elementet kan exempelvis visas nedtonat eller i grått.
Du kan använda detta som ett visuellt hjälpmedel för användarna för att visa
att de inte kan klicka på elementet igen när de är på denna del av platsen.
Du behöver inte ta med navigationsfältsbilder för alla fyra lägena. Du kanske
endast vill använda upp- och nedlägena.
Du kan skapa ett navigationsfält och sedan kopiera det till andra sidor på platsen,
använda det med ramar och redigera beteendena på sidan så att olika lägen visas,
beroende på vilken sida som för tillfället visas.
Infoga ett navigationsfält
När du infogar ett navigationsfält namnger du navigationsfältelementen och väljer
vilka bilder som ska användas för dem.
Så här skapar du ett navigationsfält:
1
Gör något av följande:
• Välj Infoga > Interaktiva bilder > Navigationsfält.
• Klicka på Infoga navigationsfält i kategorin Vanlig på objektpanelen.
Dialogrutan Infoga navigationsfält visas.
Länkar och navigering
367
2
I textrutan Elementnamn skriver du ett namn på elementet i navigationsfältet,
exempelvis Home.
Varje element motsvarar en knapp med upp till fyra lägesbilder. Elementnamn
visas i listan Element i navigationsfältet. Använd pilknapparna när du vill ordna
elementen i navigationsfältet.
3
Välj bildlägesalternativ för elementet (du måste välja en Upp-bild, övriga
bildlägen är valfria):
• I textrutan Upp-bild klickar du på Bläddra och väljer den bild som ska visas
från början.
• I textrutan Över-bild klickar du på Bläddra och väljer den bild som ska visas
när användaren flyttar pekaren över elementet när upp-bilden visas.
• I textrutan Ned-bild klickar du på Bläddra och väljer den bild som ska visas
efter att användaren har klickat på elementet.
• I textrutan Över ned-bild klickar du på Bläddra och väljer den bild som ska
visas när användaren flyttar pekaren över ned-bilden.
• I textrutan Vid klickning gå till URL väljer du var den länkade filen ska
öppnas, genom att göra något av följande:
• Markera Huvudfönster om du vill öppna filen i samma fönster.
• Markera en ram som filen ska öppnas i.
Obs! Om den ram som du vill öppna länken i inte visas i listrutan, stänger du dialogrutan
Infoga navigationsfält och anger ett namn på ramen. Mer information om hur du anger
ett namn på en ram finns i ”Ange ramegenskaper” på sidan 206.
4
Ange alternativ för bildhämtning:
• Funktionen Förhandsladda bilder läser in bilderna samtidigt som sidan läses in.
Om du inte markerar denna kryssruta kan det ske en viss fördröjning när
användaren för pekaren över överrullningsknappen.
• Markera Visa ”ned-bild” från början om du vill visa det markerade elementet i
nedläget i stället för i uppläget när sidan visas. När hemsidan läses in ska
”Home”-elementet på navigationsfältet exempelvis vara i sitt nedläge.
När du har markerat detta alternativ visas en asterisk efter elementet i listan
Element i navigationsfältet.
5
Under Infoga väljer du bland dessa alternativ:
• Du kan välja om du vill infoga navigationsfältets element lodrätt eller vågrätt i
dokumentet genom att välja ett alternativ i listrutan Infoga.
• Om du vill infoga navigationsfältets element som en tabell markerar du
kryssrutan Använd tabeller.
368
Kapitel 15
6
Klicka på plusknappen (+) om du vill lägga till fler element i navigationsfältet.
Följ sedan steg 2 till och med 5 upprepade gånger tills du har definierat alla
element.
7
Klicka på OK.
Ändra ett navigationsfält
När du väl har skapat ett navigationsfält för ett dokument, kan du lägga till eller ta
bort bilder från navigationsfältet med hjälp av kommandot Ändra >
Navigationsfält. Du använder detta kommando när du vill ändra en eller fler
bilder, ändra vilken fil som öppnas när du klickar på ett element, välja ett annat
fönster eller en annan ram som filen ska öppnas i och ordna om placeringen av
bilder.
Så här ändrar du ett navigationsfält:
1
Välj Ändra > Navigationsfält.
2
Markera det element som du vill redigera i listan Element i navigationsfältet.
3
Utför ändringarna och klicka sedan på OK.
Koppla beteenden till länkar
Du kan koppla ett beteende till vilken länk som helst i ett dokument. Överväg att
använda följande beteenden när du infogar länkade element i dokumenten. Mer
information finns i ”Koppla ett beteende” på sidan 437.
Ange texten i statusfältet anger meddelandetexten och visar den i statusfältet,
längst ned till vänster i webbläsarfönstret. Du kan exempelvis använda denna
åtgärd för att beskriva destinationen för en länk i statusfältet, i stället för att visa
den URL-adress som är associerad med den. Se ”Ange texten i statusfältet” på
sidan 461.
används när du öppnar en URL-adress i ett nytt fönster.
Du kan ange egenskaper för det nya fönstret: storlek, attribut (om det går att
ändra storlek på eller inte, har en menyrad o.s.v.) och namn. Se ”Öppna
webbläsarfönster” på sidan 454.
Öppna webbläsarfönster
Hoppmeny används när du vill redigera en hoppmeny. Du kan ändra menylistan,
ange en annan länkad fil eller ändra var ett länkat dokument ska öppnas i
webbläsaren. Se ”Hoppmeny” på sidan 453.
låter dig ändra hur navigationsfältet fungerar.
Använd detta beteende när du vill anpassa hur bilderna i ett navigationsfält visas.
Exempelvis kan de andra bilderna i ett navigationsfält eller i dokumentet ändras
när pekaren är över en del av navigationsfältet. Se ”Ställ in navigationsfältets bild”
på sidan 458.
Ställ in navigationsfältets bild
Länkar och navigering
369
370
Kapitel 15
16
KAPITEL 16
Återanvända innehåll med mallar och
bibliotek
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
På resurspanelen (se ”Hantera och infoga resurser” på sidan 215) kommer du åt
samtliga resurser på webbplatsen. Dreamweaver innehåller två speciella kategorier
av ”länkade” resurser: mallar och bibliotek. En sida med en länkad resurs
uppdateras automatiskt när du ändrar den länkade resursen.
Med hjälp av Dreamweavers mallar och bibliotek kan du skapa webbsidor med
konsekvent utformning. Det blir också lättare för dig att underhålla webbplatsen
om du använder mallar och bibliotek, eftersom du kan ändra platsens utformning
och uppdatera hundratals sidor på några få sekunder.
En mall är ett dokument du kan använda för att skapa flera sidor med samma
layout. När du skapar en mall kan du ange vilka element på en sida som ska vara
konstanta (ej ändringsbara eller låsta) i dokument som baseras på mallen och vilka
element som ska kunna ändras.
Om du exempelvis publicerar en online-tidning ska förmodligen inte huvudet
med logotypen och den övergripande layouten ändras mellan de olika numren,
eller rentav mellan de olika artiklarna i tidningen, medan däremot artiklarnas
rubriker och innehåll ska vara olika. En grafisk formgivare kan skapa layouten för
en artikelsida i tidningen med platshållartext där artikelns rubrik och innehåll ska
läggas in (och med dessa regioner märkta som ändringsbara). Formgivaren kan
sedan spara layouten som en mall. Den person som sätter ihop ett nytt nummer av
tidningen skapar en ny sida baserad på mallen och ersätter platshållartexten med
den nya artikelns rubrik och text.
Du kan ändra en mall även när du redan har skapat dokument baserade på den.
När du ändrar en mall uppdateras de låsta (icke ändringsbara) regionerna i
dokument som är baserade på mallen så att de matchar ändringarna i mallen.
371
Obs! Om du öppnar en mallfil kan du redigera allting i denna mall, oavsett om det är märkt
som ändringsbart eller låst. Om du öppnar ett dokument som är baserat på en mallfil kan du
bara redigera de regioner som är märkta som ändringsbara. Termerna ändringsbar och låst
syftar således på om en region är ändringsbar i ett dokument baserat på en mall, inte på om
regionen är ändringsbar i själva mallfilen.
Du har mest nytta av mallar vid tillfällen när du vill att en uppsättning sidor ska
ha identisk layout, och där du vill utforma sidornas layout först och lägga till
innehåll senare. Om du bara vill att sidorna ska ha samma sidhuvud och sidfot,
med olika layouter däremellan, använder du biblioteksposter för att spara
sidhuvudena och sidfötterna. (Biblioteksposter är sparade sidelement som du kan
återanvända på flera sidor. Precis som med mallar kan du uppdatera samtliga sidor
som en bibliotekspost används på när du ändrar postens innehåll. Mer
information finns i ”Skapa, hantera och redigera biblioteksposter” på sidan 392.)
Det är viktigt att komma ihåg att du varken kan konvertera tabeller till skikt eller
skikt till tabeller för sidor som har skapats med mallar.
Obs! Möjligheterna att senare göra ändringar i utformningen och layouten kan begränsas
om du använder en mall. Om du tänker göra större layoutändringar på sidorna längre fram
kan det vara bättre att använda biblioteksposter i stället för mallar.
Mallar är särskilt användbara i en gemensam miljö där en formgivare har ansvar
för sidlayouten medan innehållet läggs in på sidorna av andra medarbetare som
inte får ändra själva layouten.
I Dreamweaver finns även andra typer av innehåll som går att återanvända: ServerSide Includes (serverinstruktioner) och biblioteksposter. Du kan använda dessa
element för innehåll som visas på alla sidor på platsen (exempelvis sidhuvud och
sidfot) eller för innehåll som bara visas på några få sidor, men som måste
uppdateras med jämna mellanrum (exempelvis nyhetsrubriker eller
rabatterbjudanden). De två metoderna passar bäst för olika typer av platser:
• Server-Side Includes kan bara användas på webbplatser som visas från en server,
inte på platser som visas i ett lokalt system utan server. De kan bara användas
på servrar som är konfigurerade för att kunna bearbeta Server-Side Includes.
(Prata med webbmastern eller systemadministratören om du är osäker på om
din webbserver stöder Server-Side Includes.) Se ”Använda Server-Side Includes
(serverinstruktioner)” på sidan 399.
• Biblioteksposter kan användas både på webbplatser som visas lokalt och sådana
som finns på en server. På platser som visas lokalt, utan en server, måste du
använda biblioteksposter i stället för Server-Side Includes. Se ”Skapa, hantera
och redigera biblioteksposter” på sidan 392.
372
Kapitel 16
Skapa mallar
Du kan skapa en mall från ett befintligt HTML-dokument och sedan ändra den
efter dina behov. Du kan också skapa en mall från grunden genom att börja med
ett tomt HTML-dokument.
I Dreamweaver sparas mallar med filtillägget .dwt i en mapp med namnet
Templates i platsens lokala rotmapp. Om mappen Templates inte redan finns
skapas den automatiskt när du sparar en ny mall.
Obs! Flytta inte dina mallar från mappen Templates och placera aldrig några icke-mallfiler i
den. Flytta inte heller mappen Templates från den lokala rotmappen. Om du gör det blir
mallarnas sökvägar felaktiga.
Om du vill spara mer information om en mall (exempelvis vem som har skapat den,
när den senast har ändrats eller varför du har tagit vissa layoutbeslut) kan du skapa en
Design Notes-fil för mallen. De dokument som baseras på mallen ärver inte mallens
Design Notes. (Mer information finns i ”Design Notes” på sidan 130.)
De flesta åtgärder som gäller mallar är bara tillgängliga när designvyn är aktiv. Om ett
mallrelaterat kommando är nedtonat när kodvyn är aktiv klickar du i designvyn.
Så här sparar du ett befintligt dokument som mall:
1
Välj Arkiv > Öppna och markera ett dokument.
2
Välj Arkiv > Spara som mall när dokumentet har öppnats.
Obs! Om dokumentet är baserat på en mall måste du koppla loss det från denna mall
innan du kan spara dokumentet som mall.
3
Markera en plats i listrutan i dialogrutan som visas och ange sedan ett namn för
mallen i fältet Spara som.
4
Klicka på Spara.
Mallfilen sparas i platsens Templates-mapp, med filtillägget .dwt.
Så här skapar du en ny, tom mall:
1
Välj Fönster > Mallar.
Kategorin Mallar på resurspanelen visas.
2
Klicka på knappen Ny mall längst ned på resurspanelen.
En ny, namnlös mall läggs till i listan över mallar på panelen.
3
Behåll mallen markerad och ange ett namn för den.
Så här redigerar du den mallfil som ett dokument är baserat på:
Välj Ändra > Mallar > Öppna bifogad mall.
Återanvända innehåll med mallar och bibliotek
373
Så här redigerar du en mallfil:
1
Välj Fönster > Mallar.
Kategorin Mallar på resurspanelen visas. I det nedre rutan på resurspanelen
visas en lista över samtliga tillgängliga mallar för platsen. I den övre rutan visas
en förhandsgranskning av den markerade mallen.
2
Gör något av följande på resurspanelen:
• Dubbelklicka på mallens namn.
• Klicka på knappen Redigera längst ned på resurspanelen.
3
Redigera mallen i dokumentfönstret. Skapa ändringsbara regioner i mallen (se
”Definiera en malls ändringsbara regioner” på sidan 377).
4
Spara den redigerade mallen genom att välja Arkiv > Spara.
Obs! Om du inte har definierat några ändringsbara regioner visas ett
varningsmeddelande om att mallen saknar sådana. Du kan spara mallen ändå och
senare ändra mallfilen även om den inte innehåller ändringsbara regioner, men du kan
inte ändra dokument som är baserade på mallen förrän du har skapat en ändringsbar
region i mallen.
Så här ändrar du namn på en mall på resurspanelen:
1
Markera mallen genom att klicka på dess namn.
2
Klicka igen efter en kort paus.
3
Ange ett nytt namn när namnet blir ändringsbart.
Obs! Den här metoden att ändra namn fungerar på samma sätt som när du ändrar namn
på en fil i Utforskaren (Windows) eller Finder (Macintosh). Se till att du gör en kort paus
mellan klickningarna precis som i Utforskaren och Finder. Dubbelklicka inte på namnet,
för då öppnar du mallen i stället.
4
Klicka någon annanstans eller tryck på Retur.
5
Du tillfrågas om du vill uppdatera dokument som är baserade på mallen.
• Klicka på Uppdatera om du vill uppdatera alla berörda dokument på platsen.
• Klicka på Uppdatera inte om du inte vill uppdatera dokument som är baserade
på mallen. Ett dokument som du väljer att inte uppdatera är fortfarande baserat
på mallen (det har inte kopplats loss). Om du vill uppdatera ett sådant
dokument senare öppnar du mallen och väljer Ändra > Mallar > Uppdatera.
374
Kapitel 16
Så här tar du bort en mallfil:
1
Markera mallen på resurspanelen.
2
Klicka på knappen Ta bort och bekräfta att du vill ta bort mallen. (Var
försiktig. Om du tar bort en mallfil kan du inte få tillbaka den.)
Mallfilen tas bort från platsen. Dokument som är baserade på denna mall
kopplas inte loss från den. De behåller samma struktur och ändringsbara
regioner som mallfilen hade innan den togs bort. Använd Ändra > Mallar >
Koppla loss från mall om du vill göra ett sådant dokument till en vanlig
HTML-fil utan ändringsbara och låsta regioner. Mer information finns i
”Koppla loss ett dokument från en mall” på sidan 387.
Ange sidegenskaper för mallar
Dokument som har skapats från en mall ärver mallens sidegenskaper, förutom
sidans titel. Om ett dokument är baserat på en mall kan du ändra dokumentets
titel, men alla ändringar du försöker göra i de andra sidegenskaperna ignoreras.
Om du använder en mall för ett dokument och sedan behöver ändra dokumentets
sidegenskaper, måste du ändra mallens sidegenskaper och därefter uppdatera
sidorna som mallen används för. (Det innebär följaktligen att sidegenskaperna för
alla dokument som är baserade på denna mall ändras.)
Så här ändrar du mallens sidegenskaper:
1
Öppna mallfilen och välj Ändra > Sidegenskaper.
2
Ange önskade alternativ för sidan och klicka på OK.
3
Uppdatera eventuella sidor som är baserade på mallen. Mer information finns i
”Uppdatera sidor som är baserade på en mall” på sidan 388.
Mer information om sidegenskaper finns i ”Ange dokumentegenskaper” på
sidan 146.
Återanvända innehåll med mallar och bibliotek
375
Länkar i mallar
Använd mappikonen eller peka-på-fil-ikonen i egenskapskontrollen när du vill
skapa en länk i en mallfil. Skriv inte namnet på filen som du vill länka till. Om du
skriver namnet kanske inte länken fungerar på rätt sätt. Här följer en förklaring till
varför detta problem uppstår och ett exempel på en situation där du kan stöta på
det.
När du skapar en mallfil genom att öppna en befintlig sida och sedan sparar denna
sida som mall ser Dreamweaver till att alla länkar på sidan fortsätter att peka på
samma filer som de pekade på förut. Eftersom mallar sparas i en särskild
mallmapp innebär detta att den sökväg som visas för en dokumentrelativ länk
ändras när du sparar sidan som mall. Bekymra dig inte om denna ändring. När du
skapar ett nytt dokument baserat på denna mall, och sedan sparar det nya
dokumentet, uppdateras alla dokumentrelativa länkar så att de fortsätter att peka
på rätt filer precis som väntat.
När du lägger till en ny dokumentrelativ länk i en mallfil är det dock lätt hänt att
du av misstag anger fel sökväg om du skriver den i fältet Länk i
egenskapskontrollen. Den rätta sökvägen är den från mappen Templates till det
dokument som du länkar till, inte sökvägen från dokumentmappen.
Undvik detta problem genom att använda mappikonen eller peka-på-fil-ikonen
när du anger filer som du vill länka till. Information om hur du länkar med hjälp
av peka-på-fil-ikonen finns i ”Länka dokument med egenskapskontrollen och med
peka-på-fil-ikonen” på sidan 355.
I följande exempel beskrivs problemet. Tänk dig att du har en webbplats där de
enskilda katalogsidorna (med namnen gadgets.html, gewgaws.html och
thingamajigs.html) är baserade på en mallfil med namnet Catalog_Page.dwt.
Platsens mappstruktur ser ut så här:
376
Kapitel 16
Anta att du vill att alla sidor som är baserade på mallen ska innehålla en länk som
pekar på filen home.html. Du öppnar mallen Catalog_Page för att lägga till
länken och anger vilken bild du vill koppla länken till. Men om du skriver
home.html i fältet Länk i egenskapskontrollen stöter du på problemet med
dokumentrelativa länkar: när du sparar den redigerade mallen pekar de
mallbaserade dokumenten på fel ställe, eftersom länken i mallfilen tolkas som
relativ till mappen Templates i stället för mappen Catalog. Det vill säga att länken
home.html i mallfilen pekar på home.html i mappen Templates i stället för på ../
Catalog/home.html. När dokumenten som baseras på mallen uppdateras ändras
de dokumentrelativa länkarna i dokumenten. För dokument i mappen Catalog
konverteras en länk i mallfilen till ../Catalog/home.html till home.html, men en
länk i mallfilen till home.html konverteras till ../Templates/home.html.
Om du anger filen home.html med mappikonen eller peka-på-fil-ikonen i stället
för att skriva filens namn manuellt, uppdateras alla dokument baserade på mallen
automatiskt så att de rätta sökvägarna till home.html används.
Obs! I vissa fall (exempelvis filsökvägar i händelsehanterare i mallar) kan du varken
använda mappikonen eller peka-på-fil-ikonen. Se då till att du anger rätt sökväg för hand.
Definiera en malls ändringsbara regioner
I en mall är ändringsbara regioner de delar av sidan som kan ändras i filer som är
baserade på mallen. Texten i exempelvis en artikel i ett nyhetsbrev placeras i en
ändringsbar region, så att innehållet kan skifta mellan artiklarna. Låsta (ej
ändringsbara) regioner är de delar av sidlayouten som förblir konstanta från sida
till sida.
Alla regioner i en ny mall är låsta när du skapar mallen. Därför måste du göra en
del regioner ändringsbara (låsa upp dem) för att mallen ska bli användbar.
När du redigerar själva mallfilen kan du göra ändringar i både ändringsbara och
låsta regioner. I ett dokument som är baserat på mallen kan du emellertid bara
göra ändringar i dokumentets ändringsbara regioner. Dokumentets låsta regioner
kan inte ändras.
Obs! När du ger en region ett namn kan du inte använda följande tecken: enkla och dubbla
citattecken (’ ”), vinkelparenteser (< >) samt &-tecken.
Återanvända innehåll med mallar och bibliotek
377
Så här definierar du befintligt mallinnehåll som ändringsbar region:
1
Markera i mallfilen texten eller innehållet som du vill göra till en ändringsbar
region.
2
Gör något av följande:
• Välj Ändra > Mallar > Ny ändringsbar region.
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på den markerade
texten och välj Ny ändringsbar region på snabbmenyn.
3
Ange ett unikt namn för regionen i dialogrutan Ny ändringsbar region. (Du
kan inte använda samma namn för flera ändringsbara regioner i en mall.)
Den ändringsbara regionen i mallen omges av en rektangulär kontur i den
markeringsfärg som finns angiven i inställningarna. Regionens namn visas på
en flik längst upp till vänster i regionen.
Du kan märka upp en hel tabell eller en enskild tabellcell som ändringsbar. Du
kan emellertid inte märka upp flera tabellceller som en enda ändringsbar
region. Observera att det i Dreamweaver inte görs skillnad mellan att märka
upp en tabellcell som ändringsbar och att märka upp cellens innehåll som
ändringsbart.
Skikt och skiktinnehåll är separata element. Om du gör ett skikt ändringsbart
kan du ändra skiktets placering. Om du däremot gör innehållet i ett skikt
ändringsbart kan du bara ändra innehållet i skiktet, inte dess placering. Om du
vill markera skiktets innehåll klickar du i skiktet och väljer Redigera > Markera
allt. Om du vill markera själva skiktet ser du först till att osynliga element visas
och sedan klickar du på ikonen som motsvarar skiktets placering. Mer
information om skikt finns i ”Använda dynamiska skikt” på sidan 403.
Obs! Om du har gjort ett skikts innehåll ändringsbart och senare också vill göra dess
placering ändringsbar, måste du ta bort den ändringsbara regionen runt innehållet innan
du kan märka upp själva skiktet som ändringsbart. Se ”Låsa en ändringsbar region” på
sidan 384.
Så här infogar du en tom ändringsbar region i en mall:
1
Placera insättningspunkten där du vill infoga en ändringsbar region i mallen.
2
Välj Ändra > Mallar > Ny ändringsbar region.
3
Ange ett namn för regionen i dialogrutan Ny ändringsbar region.
Regionnamnet, omgivet av klammerparenteser ({}), infogas i mallen som en
platshållare, omgiven av en rektangulär kontur i angiven markeringsfärg.
När du sedan använder mallen i ett dokument kan du markera
klammerparenteserna och regionnamnet och ersätta dem med text, bilder eller
annat innehåll.
378
Kapitel 16
Mallar – inställningar
Du kan använda Dreamweavers markeringsinställningar för att anpassa
markeringsfärgerna för konturerna runt de ändringsbara och låsta regionerna i en
mall. Färgen för ändringsbara regioner visas både i själva mallen och i dokument
som är baserade på mallen. Färgen för låsta regioner visas bara i dokument som är
baserade på mallen.
Så här ändrar du markeringsfärg för mallar:
1
Välj Redigera > Inställningar och markera kategorin Markering.
2
Klicka på färgrutan Ändringsbara regioner och ange en markeringsfärg med
färgväljaren (eller ange markeringsfärgens hexadecimala värde i textfältet). Gör
samma sak för Låsta regioner. Information om hur du använder färgväljaren
finns i ”Arbeta med färger” på sidan 83.
3
Markera eller avmarkera kryssrutan Visa om du vill aktivera eller avaktivera
visningen av dessa färger i dokumentfönstret.
4
Klicka på OK.
Så här visar du markeringsfärger i dokumentfönstret:
Välj Visa > Visuella hjälpmedel > Osynliga element.
Markeringsfärger visas bara i dokumentfönstret när Visa > Visuella hjälpmedel >
Osynliga element är aktiverat och motsvarande kryssrutor är aktiverade i
markeringsinställningarna.
Obs! Om osynliga element visas men inte markeringsfärger, väljer du Redigera >
Inställningar och kontrollerar att kryssrutan Visa bredvid motsvarande markeringsfärg är
markerad. Se också till att den valda färgen syns mot sidans bakgrundsfärg. (Om du är
färgblind kan du behöva ändra markeringsfärgen från standardinställningen till en mer
synlig färg.)
Återanvända innehåll med mallar och bibliotek
379
Visa ändringsbara och låsta regioner
I mallfiler och dokument baserade på mallar visas ändringsbara regioner i
designvyn i dokumentfönstret omgivna av rektangulära konturer i angiven
markeringsfärg. De ändringsbara regionernas namn visas på små flikar längst upp
till vänster i de olika regionerna.
I mallfiler är det bara ändringsbara regioner som har färgmarkerade konturer. Du
kan göra ändringar i både ändringsbart och låst innehåll.
Både låsta och
ändringsbara
regioner kan
ändras.
Ändringsbara regioner
omges av färgmarkerade
konturer.
380
Kapitel 16
I dokument som är baserade på mallar visas förutom konturerna runt de
ändringsbara regionerna även en kontur i en annan färg runt hela sidan. På en flik
längst upp till höger visas namnet på den mall som dokumentet är baserat på.
Syftet med denna färgmarkerade rektangel är att påminna dig om att dokumentet
är baserat på en mall och att du inte kan ändra någonting utanför de ändringsbara
regionerna.
Markerad gräns
runt sidan.
Endast ändringsbara
regioner kan ändras
Obs! Om du försöker redigera en låst region i ett mallbaserat dokument när
markeringsfunktionen är avaktiverad ändras muspekaren för att ange att du inte kan klicka i
en låst region.
Återanvända innehåll med mallar och bibliotek
381
Visa ändringsbar och låst HTML-källkod
Ändringsbart innehåll märks upp i HTML med Dreamweaver-kommentarerna
#BeginEditable och #EndEditable. Allt mellan dessa kommentarer är ändringsbart.
HTML-källkoden för en ändringsbar region med namnet Edit_Region kan se ut så
här:
<!-- #BeginEditable "Edit_Region" -->
{Edit_Region}
<!-- #EndEditable -->
HTML-koden för en ändringsbar tabell med namnet Editable_Table kan se ut så
här:
<!-- #BeginEditable "Editable_Table" -->
<table width="77%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<!-- #EndEditable -->
I mallfiler är inte ändringsbara regioner markerade i kodvyn (eller kodkontrollen)
i dokumentfönstret. Du kan göra ändringar i både ändringsbar och låst HTMLkällkod.
382
Kapitel 16
Om syntaxfärgning är aktiverad är låsta regioner i mallbaserade dokument
markerade i kodredigerarna. (Information om hur du aktiverar syntaxfärgning
finns i ”Ange alternativ för kodvyn (eller kodkontrollen)” på sidan 328.) Du kan
bara göra ändringar i den ändringsbara (icke markerade) HTML-källkoden.
Låst HTMLkod är
markerad.
Endast
ändringsbar
HTML-kod
kan ändras.
Obs! Du förhindras inte från att skriva i låsta regioner i kodvyn (eller kodkontrollen) i
dokumentfönstret. Alla ändringar du gör i låsta regioner ignoreras dock, så se till att du bara
skriver i ändringsbara regioner.
Återanvända innehåll med mallar och bibliotek
383
Låsa en ändringsbar region
Om du har märkt upp en region i mallfilen som ändringsbar och sedan vill låsa
den (göra den ej ändringsbar) igen använder du kommandot Ta bort ändringsbar
region.
Obs! Du kan låsa en region i en fil som är baserad på en mall. Du kan bara låsa en region i
en mallfil.
Så här låser du en region (gör den ej ändringsbar) i en mallfil:
1
Välj Ändra > Mallar > Ta bort ändringsbar region.
2
Markera regionnamnet i listan och klicka på OK.
Regionen är låst. Den har inte längre något namn (eftersom bara ändringsbara
regioner har namn).
Använda format, tidslinjer, beteenden och HEAD-koder i
mallar
CSS-format, tidslinjer, beteenden och koder i HEAD-delen har inte fullt stöd i
dokument som är baserade på mallar.
Samtliga dessa element infogar information i HEAD-delen i ett dokument. Eftersom
HEAD-delen i ett mallbaserat dokument är låst (med undantag för dokumentets
titel) kan inte någon formatmall eller JavaScript-kod infogas i ett sådant
dokument. För att kunna använda dessa element i ett mallbaserat dokument
måste du lägga till dem i den mallfil som dokumentet är baserat på. (Använd en
extern formatmall om du vill att en formatmall i en mallfil ska vara ändringsbar
utan att du behöver uppdatera sidor varje gång du ändrar formatmallen.)
Om det inte går att lägga till dessa element i mallfilen kan du koppla loss
dokumentet från mallen, vilket gör HEAD-delen ändringsbar. Efter att du har
kopplat loss dokumentet från mallen uppdateras emellertid inte dokumentet
längre när du ändrar mallen. Se ”Koppla loss ett dokument från en mall” på
sidan 387.
Mer information om dessa element finns i”Använda CSS-formatmallar” på
sidan 243, ”Animera skikt” på sidan 421 och ”Använda beteenden” på sidan 433
384
Kapitel 16
Skapa dokument som är baserade på mallar
Du kan använda en mall som utgångspunkt för ett nytt dokument eller tillämpa
en mall på ett befintligt dokument.
När du skapar ett nytt dokument baserat på en mall kan du välja om dokumentet
ska fortsätta vara kopplat till mallen. När du ändrar en mall uppdateras som
standard dokumenten som är baserade på denna mall. Men om du avmarkerar
alternativet Uppdatera sida när mallen ändras i dialogrutan Nytt från mall skapas
det nya dokumentet som ett duplikat: en kopia av mallen som är en fristående
HTML-fil, utan några låsta eller ändringsbara regioner. I detta fall ändras inte
dokumentet när du uppdaterar mallen. Om du avmarkerar detta alternativ har det
med andra ord samma effekt som om du skapar ett nytt dokument baserat på en
mall och sedan kopplar loss det från mallen.
Obs! Möjligheten att inte uppdatera dokumentet när mallen ändras ingår i Dreamweaver
för dem som vill använda mallar för engångsbruk, som en utgångspunkt för att skapa helt
fristående dokument. Om du vill använda Dreamweavers standardbeteende för mallar, där
dokument baserade på en mall uppdateras när mallen ändras, låter du alternativet vara
markerat.
Gör något av följande när du vill skapa ett nytt dokument baserat på en mall:
• Välj Arkiv > Nytt från mall. Välj en mall i dialogrutan som visas. (Om du inte
vill att det nya dokumentet ska uppdateras när mallen ändras avmarkerar du
alternativet Uppdatera sida när mallen ändras.) Klicka sedan på Välj.
• Välj Arkiv > Nytt när du vill skapa ett nytt dokument och använd sedan en
mall på det genom att markera en mall i kategorin Mallar på resurspanelen och
klicka på knappen Verkställ. (Du kan också dra en mall från resurspanelen till
dokumentet.)
Så här använder du en mall på ett befintligt Dreamweaver-dokument:
Öppna dokumentet. Gör sedan något av följande:
• Klicka i designvyn i dokumentfönstret och välj Ändra > Mallar > Tillämpa mall
på sida. Markera en mall i listan och klicka på Välj.
• Markera mallen i kategorin Mallar på resurspanelen och klicka på knappen
Verkställ.
• Dra mallen från kategorin Mallar på resurspanelen till designvyn i
dokumentfönstret.
Obs! Uttrycket att en mall har använts på ett dokument betyder samma sak som att
dokumentet är baserat på mallen. Dessa fraser används omväxlande.
Återanvända innehåll med mallar och bibliotek
385
När du använder en mall på ett befintligt dokument som inte redan är baserat på
en mall görs dokumentet om till en kopia av mallfilen. Innehållet i dokumentets
befintliga BODY-del placeras i en ändringsbar region som du väljer.
Obs! Beteenden och andra skript i det befintliga dokumentet som är associerade med
BODY-innehållet finns kvar i dokumentets HEAD-del efter att du har använt en mall på
dokumentet. Andra HEAD-element i det befintliga dokumentet, exempelvis META-koder, tas
bort när du använder mallen.
När du använder en ny mall på ett befintligt dokument som är baserat på en
annan mall görs dokumentet om till en kopia av den nya mallen. Innehållet i
dokumentets befintliga ändringsbara regioner placeras i motsvarande ändringsbara
regioner i den nya mallen där så är möjligt. Detta görs i Dreamweaver genom att
namnen på de ändringsbara regionerna i dokumentet jämförs med namnen på de
ändringsbara regionerna i den nya mallen. För varje regionnamn som stämmer
överens placeras denna regions befintliga innehåll i den nya regionen med samma
namn.
Anta exempelvis att du vill pröva ett nytt utseende på platsen men ännu inte är
redo att ändra alla sidorna. Du kan skapa en ny mall med den nya layouten och ge
de ändringsbara regionerna i den nya mallen samma namn som de ändringsbara
regionerna i den gamla mallen. När du sedan använder den nya mallen på en av
sidorna placeras innehållet i sidans ändringsbara regioner i motsvarande
ändringsbara regioner i den nya layouten.
Om det finns ändringsbara regioner i den gamla mallen som inte har motsvarande
regioner i den nya mallen kan du i dialogrutan Välj ändringsbar region för
föräldralöst innehåll ange vilken ny ändringsbar region det ”föräldralösa”
innehållet ska flyttas till. Välj ett namn på en ändringsbar region. Allt innehåll
från icke-matchande ändringsbara regioner läggs till i den region som du väljer.
(Allt föräldralöst innehåll från det befintliga dokumentet måste placeras i en
enstaka ändringsbar region.) Om du väljer posten (Ingen) i stället för ett
regionnamn tas innehållet från icke-matchande regioner i det befintliga
dokumentet bort.
Om dialogrutan om föräldralöst innehåll visas trots att du tror att dokumentets
ändringsbara regioner matchar de ändringsbara regionerna i den nya mall som du
använder, kan du klicka på Avbryt så att den nya mallen inte används på
dokumentet. Därefter kan du undersöka de ändringsbara regionerna i
dokumentet och den nya mallen för att ta reda på vilka av dokumentets
ändringsbara regioner det är som inte finns i den nya mallen. Du kan sedan lägga
till nya regioner med dessa namn i den nya mallfilen.
Alla nya ändringsbara regioner som finns i den nya mallen (men som inte fanns i
den gamla mallen) läggs till i dokumentet. De nya regionerna innehåller den
standardinställda platshållartext som finns angiven i den nya mallfilen.
Om du inte är nöjd med resultatet när du har använt en mall på ett dokument kan
du välja Redigera > Ångra Tillämpa mall för att återgå till hur dokumentet såg ut
innan du använde mallen.
386
Kapitel 16
Söka efter ett dokuments ändringsbara regioner
Samtliga ändringsbara regioner i en mall visas i en lista längst ned på undermenyn
Ändra > Mallar. Använd denna lista när du vill markera och redigera regionerna.
Så här söker du efter en ändringsbar region och markerar den i dokumentet:
Välj Ändra > Mallar och sedan regionens namn i listan längst ned på
undermenyn.
Regionen markeras i dokumentet. Du kan skriva ny text i regionen eller klicka i
regionen för att redigera innehållet.
Koppla loss ett dokument från en mall
Om du vill göra ändringar i både låsta och ändringsbara regioner på en sida som
använder en mall måste du först koppla loss sidan från mallen. När sidan kopplas
loss blir den ett vanligt dokument, utan några ändringsbara eller låsta regioner och
utan någon koppling till en mallfil. Tänk på att detta innebär att sidan inte längre
uppdateras när mallen ändras.
Så här kopplar du loss ett dokument från en mall:
1
Öppna dokumentet.
2
Välj Ändra > Mallar > Koppla loss från mall.
Sidan kopplas loss från mallen och alla regioner blir ändringsbara.
Återanvända innehåll med mallar och bibliotek
387
Uppdatera sidor som är baserade på en mall
När du ändrar en mall uppmanas du att uppdatera sidorna som är baserade på
mallen. Du kan också använda uppdateringskommandona för att uppdatera den
aktuella sidan eller hela platsen manuellt. Att använda uppdateringskommandona
är det samma som att använda mallen igen.
Information om hur du redigerar mallar finns i ”Skapa mallar” på sidan 373 och
”Definiera en malls ändringsbara regioner” på sidan 377.
Så här öppnar och ändrar du mallen som har använts för att skapa det aktuella
dokumentet:
1
Välj Ändra > Mallar > Öppna bifogad mall.
2
Ändra mallens innehåll. Om du vill ändra mallens sidegenskaper väljer du
Ändra > Sidegenskaper. (Dokument som är baserade på en mall ärver mallens
sidegenskaper, med undantag för sidans titel.)
Så här uppdaterar du det aktuella dokumentet så att den aktuella mallversionen
används:
Välj Ändra > Mallar > Uppdatera aktuell sida.
Så här uppdaterar du hela platsen eller alla dokument som använder en viss mall:
1
Välj Ändra > Mallar > Uppdatera sidor.
Dialogrutan Uppdatera sidor visas.
2
Gör något av följande i listrutan Leta i:
• Välj Hela platsen och ange sedan platsnamnet i listrutan bredvid. Detta
uppdaterar alla sidor på den angivna platsen med motsvarande mallar.
• Välj Filer som använder och ange sedan mallnamnet i listrutan bredvid. Detta
uppdaterar alla sidor på den aktuella platsen som använder den angivna mallen.
3
Kontrollera att Mallar är markerat för alternativet Uppdatera. (Om du
samtidigt vill uppdatera biblioteksposter ser du till att även Biblioteksposter är
markerat. Mer information finns i ”Skapa, hantera och redigera
biblioteksposter” på sidan 392.)
4
Klicka på Starta.
Filerna uppdateras enligt inställningarna. Om du har markerat alternativet Visa
logg visas information om filerna som håller på att uppdateras, inklusive
information om huruvida uppdateringen lyckades eller inte.
388
Kapitel 16
Exportera och importera XML-innehåll
Du kan betrakta ett mallbaserat dokument som att det innehåller en uppsättning
data som motsvaras av namn/värde-par. Varje par består av namnet på en
ändringsbar region och innehållet i denna region. Anta exempelvis att mallen
innehåller tre ändringsbara regioner: item_number, item_price och item_color.
Du kan beskriva ett dokument baserat på denna mall helt och hållet genom att
ange mallens namn och tre namn/värde-par, ett för varje ändringsbar region.
Du kan exportera dessa namn/värde-par till en XML-fil så att du kan arbeta med
dokumentets data utanför Dreamweaver (exempelvis i en XML-redigerare, i en
textredigerare eller till och med i ett databasprogram). Omvänt kan du, om du har
ett XML-dokument som är strukturerat på lämpligt sätt, importera data från detta
dokument till ett dokument som är baserat på en Dreamweaver-mall.
Så här exporterar du ett dokuments ändringsbara regioner som XML:
1
Välj Arkiv > Öppna och öppna ett dokument som är baserat på en mall (och
innehåller ändringsbara regioner).
2
Välj Arkiv > Exportera > Exportera ändringsbara regioner som XML.
3
Välj en kodnotation i dialogrutan XML och klicka på OK.
Mer information finns i ”Använda XML-kodnotationer” på sidan 391.
4
Ange ett namn på XML-filen i dialogrutan som visas och klicka på Spara.
En XML-fil med innehållet från dokumentets ändringsbara regioner genereras i
Dreamweaver. XML-filen innehåller både namnet på den mall som
dokumentet är baserat på och alla ändringsbara regioners namn och innehåll.
Obs! Innehåll i de låsta regionerna exporteras inte till XML-filen.
Så här importerar du XML-innehåll:
1
Välj Arkiv > Importera > Importera XML till mall.
2
Markera XML-filen och klicka på Öppna.
Det skapas ett nytt dokument som är baserat på den mall som anges i XML-filen.
Sedan används XML-filens data för att fylla alla ändringsbara regioner i
dokumentet med innehåll. Det färdiga dokumentet visas i ett nytt
dokumentfönster. Om den angivna mallen inte hittas uppmanas du att välja en
mall som ska användas.
Observera att du kanske inte kan importera dina data om inte XML-filen är
uppställd på exakt det sätt som förväntas av Dreamweaver. En lösning på detta
problem är att exportera ett provexemplar av en XML-fil från Dreamweaver, så att
du har en XML-fil med exakt rätt struktur. Kopiera sedan den ursprungliga XMLfilens data till den exporterade XML-filen. Resultatet blir en XML-fil med rätt
struktur och med korrekta data, allt klart att importeras.
Återanvända innehåll med mallar och bibliotek
389
XML
XML står för Extensible Markup Language, ett kodspråk för strukturerade
dokument. Du kan tänka dig det som en förenkling av HTML som gör att du kan
definiera egna koder. XML har sitt ursprung i SGML, Standard Generalized
Markup Language. Precis som SGML är XML ett språk för att definiera koder och
relationerna mellan dem.
Koder i XML liknar HTML-koder: de består av ett kodnamn plus valfria attribut,
omgivna av vinkelparenteser. Liksom i HTML används en öppningskod och en
stängningskod (i vilken kodnamnet föregås av ett snedstreck) för att märka upp
innehållet mellan koderna. En syntaktisk skillnad är att i XML måste en tom kod
(en som bara använder en enstaka kod, exempelvis <img>, i stället för en
öppningskod och en stängningskod som omger text eller annat innehåll) sluta
med ett snedstreck precis före den avslutande vinkelparentesen. En <img>-kod i
XML kan exempelvis se ut så här:
<img src="test.png" />
Äkta XML kräver en betydligt större noggrannhet med syntaxen än vad HTML
gör. Filer som inte strikt följer XML-syntaxen godtas inte av XML-analysatorer.
XML ger dig möjlighet att märka upp teckensträngar, som kan innehålla koder
som inte ska analyseras: ett element som kallas ett CDATA-avsnitt, som innehåller en
teckensträng inom hakparenteser. Ingenting inom hakparenteserna analyseras av
XML-analysatorn. I Dreamweavers exporterade XML-kod används CDATA-avsnitt i
stor utsträckning.
En fullständig introduktion till XML faller utanför ramarna för denna bok. Mer
information om XML finns i ”HTML- och webbteknikresurser” på sidan 24.
390
Kapitel 16
Använda XML-kodnotationer
I Dreamweaver kan du exportera XML-innehåll med någon av följande två
kodnotationer: koder för ändringsbara regioner eller standardmässiga
Dreamweaver-XML-koder. Välj den notation som passar bäst för hur XMLinnehåll integreras på din webbplats.
Det enklaste sättet att se skillnaderna mellan de två kodnotationerna är att titta på
exempel (under förutsättning att du förstår XML-syntax). Följande XML-kod har
exporterats från ett dokument baserat på en mall med namnet newstemplate.
Dokumentet innehåller en ändringsbar region med namnet News_Story (och en
standardinställd ändringsbar region, DOCTITLE, som innehåller dokumentets TITLEkod).
• Koder för ändringsbara regioner använder namnen på dokumentets
ändringsbara regioner som XML-koder. Innehållet i de ändringsbara
regionerna ingår som ett CDATA-avsnitt. I detta exempel anger koden DOCTITLE
dokumentets titel, medan koden News_Story anger den ändringsbara regionen.
<?xml version="1.0"?>
<newstemplate template="/Templates/newstemplate.dwt">
<doctitle>
<![CDATA[<title>Dagens huvudnyhet</title>]]>
</doctitle>
<News_Story>
<![CDATA[<p>Här placeras nyhetstexten.</p>]]>
</News_Story>
</newstemplate>
• Standardmässiga Dreamweaver-XML-koder använder en kod med namnet
ITEM.
Denna ITEM-kod har ett NAME-attribut som anger den ändringsbara
regionens namn. Koden innehåller ett CDATA-avsnitt som i sin tur innehåller den
ändringsbara regionens innehåll. I detta exempel anger koden ITEM med
name="doctitle" dokumentets titel, medan koden ITEM med name="News_Story"
anger den ändringsbara regionen.
<?xml version="1.0"?>
<templateItems template="/Templates/newstemplate.dwt">
<item name="doctitle">
<![CDATA[<title>Dagens huvudnyhet</title>]]>
</item>
<item name="News_Story">
<![CDATA[<p>Här placeras nyhetstexten.</p>]]>
</item>
</templateItems>
Återanvända innehåll med mallar och bibliotek
391
Skapa, hantera och redigera
biblioteksposter
Bibliotek är ett sätt att spara sidelement (exempelvis bilder, text och andra objekt)
som du med jämna mellanrum vill återanvända eller uppdatera på webbplatsen.
Dessa element kallas biblioteksposter.
När du placerar en bibliotekspost i ett dokument infogas en kopia av HTMLkällkoden för denna post i dokumentet, samtidigt som en HTML-kommentar
med en referens till den ursprungliga, externa posten läggs till. Med hjälp av
referensen till den externa biblioteksposten kan du uppdatera innehållet på en hel
plats samtidigt genom att ändra biblioteksposten och sedan använda
uppdateringskommandona på undermenyn Ändra > Bibliotek.
I Dreamweaver sparas biblioteksposter i en mapp med namnet Library under den
lokala rotmappen för varje plats. Varje plats har sitt eget bibliotek. Använd
kommandot Kopiera till plats på snabbmenyn på resurspanelen när du vill kopiera
en bibliotekspost från en plats till en annan. Mer information finns i ”Hantera och
infoga resurser” på sidan 215. Om biblioteksposten innehåller länkar bör du
observera att dessa kanske inte fungerar på den nya platsen. Observera också att
bilder i en bibliotekspost inte kopieras till den nya platsen.
Här är ett exempel på hur du kan använda en bibliotekspost: Anta att du skapar
en stor webbplats för ett företag. Företaget har en slogan som ska vara med på alla
sidor på platsen, men marknadsavdelningen håller fortfarande på att finslipa den
exakta ordalydelsen. Om du skapar en bibliotekspost för företagets slogan och
använder denna bibliotekspost på alla sidor kan du sedan, när
marknadsavdelningen har bestämt en slutgiltig slogan, ändra biblioteksposten och
automatiskt uppdatera alla sidor där den används.
Skapa en bibliotekspost
Du kan skapa en bibliotekspost av vilket element som helst i ett dokuments BODYdel, däribland text, tabeller, formulär, Java-miniprogram, insticksprogram,
ActiveX-element, navigationsfält och bilder.
För länkade poster, exempelvis bilder, sparas bara en referens till posten i
biblioteket. Den ursprungliga filen måste vara kvar på sin ursprungliga plats för
att biblioteksposten ska fungera på rätt sätt. Det kan ändå vara praktiskt att spara
en bild i en bibliotekspost. Du kan exempelvis spara en hel IMG-kod i en
bibliotekspost vilket ger dig möjlighet att enkelt ändra bildens ALT-text, eller till
och med dess SRC-attribut, på hela platsen. (Använd dock aldrig denna metod när
du vill ändra en bilds WIDTH- och HEIGHT-attribut, såvida du inte samtidigt ändrar
bildens faktiska storlek i en bildredigerare.)
Biblioteksposter kan också innehålla beteenden, men det finns särskilda krav för
redigering av beteenden i biblioteksposter. Se ”Redigera ett beteende i en
bibliotekspost” på sidan 397. Biblioteksposter kan inte innehålla tidslinjer eller
formatmallar, eftersom koden för dessa element ingår i HEAD-delen.
392
Kapitel 16
Obs! Var i allmänhet försiktig med att blanda biblioteksposter och mallar på samma sida.
Det kan lätt bli för rörigt att arbeta med.
Så här skapar du en bibliotekspost:
1
Markera den del av dokumentet som du vill spara som bibliotekspost.
2
Gör något av följande:
• Välj Fönster > Bibliotek och dra markeringen till kategorin Bibliotek på
resurspanelen.
• Klicka på knappen Ny bibliotekspost längst ned på resurspanelen (i kategorin
Bibliotek).
• Välj Ändra > Bibliotek > Lägg till objekt i bibliotek.
3
Skriv ett namn på den nya biblioteksposten.
Varje enskild bibliotekspost sparas som en separat fil (med filtillägget .lbi) i
mappen Library i platsens lokala rotmapp.
Bibliotek – inställningar
Du kan anpassa markeringsfärgen för biblioteksposter och visa eller dölja
markering av biblioteksposter i markeringsinställningarna.
Så här ändrar du markeringsfärg för biblioteksposter:
1
Välj Redigera > Inställningar och markera kategorin Markering.
2
Klicka på färgrutan Biblioteksposter och ange en markeringsfärg med
färgväljaren (eller ange markeringsfärgens hexadecimala värde i textfältet
bredvid). Information om hur du använder färgväljaren finns i ”Arbeta med
färger” på sidan 83.
3
Markera Visa om du vill växla visningen av markeringsfärgen för
biblioteksposter.
4
Klicka i kryssrutan Visa när du vill aktivera eller avaktivera visningen av
bibliotekspostmarkeringen i dokumentfönstret.
5
Klicka på OK när du vill stänga dialogrutan Inställningar.
Så här visar du markeringsfärger i dokumentfönstret:
Välj Visa > Visuella hjälpmedel > Osynliga element.
Markeringsfärger visas bara i dokumentfönstret när Visa > Visuella hjälpmedel >
Osynliga element är aktiverat och motsvarande kryssrutor är aktiverade i
markeringsinställningarna.
Återanvända innehåll med mallar och bibliotek
393
Infoga en bibliotekspost i ett dokument
När du lägger till en bibliotekspost på en sida infogas det faktiska innehållet i
dokumentet tillsammans med en referens till biblioteksposten.
Så här infogar du en bibliotekspost i ett dokument:
1
Placera insättningspunkten i dokumentfönstret.
2
Välj Fönster > Bibliotek.
Kategorin Bibliotek på resurspanelen visas.
3
Dra en post från resurspanelen till dokumentfönstret eller markera en post och
klicka på knappen Infoga.
Om du vill infoga innehållet i en bibliotekspost utan att inkludera en referens
till posten i dokumentet trycker du på Ctrl (Windows) eller Alternativ
(Macintosh) samtidigt som du drar en post från kategorin Bibliotek på
resurspanelen. Om du infogar en post på detta sätt kan du redigera posten i
dokumentet, men dokumentet uppdateras inte när du uppdaterar sidor som
denna bibliotekspost används i.
Göra ändringar i en bibliotekspost
När du ändrar en bibliotekspost kan du välja att uppdatera alla dokument som
posten används i. Om du väljer att inte uppdatera förblir dokumenten associerade
med biblioteksposten. Du kan uppdatera dem senare genom att välja Ändra >
Bibliotek > Uppdatera sidor.
Andra sorters ändringar som du kan göra i biblioteksposter är att ändra namn på
poster för att bryta deras koppling till dokument eller mallar, ta bort poster från
platsens bibliotek och återskapa biblioteksposter som saknas.
Obs! CSS-formatpanelen, tidslinjepanelen och beteendepanelen är inte tillgängliga när du
redigerar en bibliotekspost, eftersom biblioteksposter bara kan innehålla BODY-element.
Tidslinje- och CSS-formatmallskod ingår i HEAD-delen och beteendepanelen är otillgänglig
eftersom den infogar kod i såväl HEAD- som BODY-delen. (Instruktioner om hur du redigerar
beteenden finns i ”Redigera ett beteende i en bibliotekspost” på sidan 397.) Dialogrutan
Sidegenskaper är också otillgänglig, eftersom en bibliotekspost varken kan innehålla en
BODY-kod eller dess attribut.
Så här redigerar du en bibliotekspost:
1
Välj Fönster > Bibliotek.
Kategorin Bibliotek på resurspanelen visas.
2
Markera en bibliotekspost.
En förhandsgranskning av biblioteksposten visas överst på resurspanelen. (Du
kan inte redigera någonting i förhandsgranskningen.)
394
Kapitel 16
3
Klicka på knappen Redigera längst ned på resurspanelen. Du kan också
dubbelklicka på biblioteksposten.
Ett nytt fönster öppnas där du kan redigera biblioteksposten. Detta fönster
påminner mycket om dokumentfönstret, med dess designvy har en grå
bakgrund för att visa att du redigerar en bibliotekspost i stället för ett
dokument.
4
Redigera biblioteksposten och spara ändringarna.
5
I dialogrutan som visas väljer du om du vill uppdatera dokumenten på den
lokala plats där den redigerade biblioteksposten används:
• Klicka på Uppdatera om du vill uppdatera alla dokument på den lokala platsen
med den redigerade biblioteksposten.
• Klicka på Uppdatera inte om du vill undvika att några dokument ändras innan
du använder Ändra > Bibliotek > Uppdatera aktuell sida eller Uppdatera sidor.
Så här uppdaterar du det aktuella dokumentet så att de aktuella versionerna av
alla biblioteksposter används:
Välj Ändra > Bibliotek > Uppdatera aktuell sida.
Så här uppdaterar du hela platsen eller alla dokument som använder en viss
bibliotekspost:
1
Välj Ändra > Bibliotek > Uppdatera sidor.
Dialogrutan Uppdatera sidor visas.
2
Gör något av följande i listrutan Leta i:
• Välj Hela platsen och ange sedan platsnamnet i listrutan bredvid. Detta
uppdaterar alla sidor på den angivna platsen med de aktuella versionerna av alla
biblioteksposter.
• Välj Filer som använder och ange sedan ett bibliotekspostnamn i listrutan
bredvid. Detta uppdaterar alla sidor på den aktuella platsen som den angivna
biblioteksposten används på.
3
Kontrollera att Biblioteksposter är markerat för alternativet Uppdatera. (Om
du samtidigt vill uppdatera mallar ser du till att även Mallar är markerat. Mer
information finns i ”Uppdatera sidor som är baserade på en mall” på
sidan 388.)
4
Klicka på Starta.
Filerna uppdateras enligt inställningarna. Om du har markerat alternativet Visa
logg visas information om filerna som håller på att uppdateras, inklusive
information om huruvida uppdateringen lyckades eller inte.
Återanvända innehåll med mallar och bibliotek
395
Så här ändrar du namn på en bibliotekspost på resurspanelen:
1
Markera biblioteksposten genom att klicka på dess namn.
2
Klicka igen efter en kort paus.
3
Ange ett nytt namn när namnet blir ändringsbart.
Obs! Den här metoden att ändra namn fungerar på samma sätt som när du ändrar namn
på en fil i Utforskaren (Windows) eller Finder (Macintosh). Se till att du gör en kort paus
mellan klickningarna precis som i Utforskaren och Finder. Dubbelklicka inte på namnet,
för då öppnar du biblioteksposten i stället.
4
Klicka någon annanstans eller tryck på Retur.
5
Du tillfrågas om du vill uppdatera dokument som posten används i.
• Klicka på Uppdatera om du vill uppdatera alla berörda dokument på platsen.
• Klicka på Uppdatera inte om du inte vill uppdatera dokument som posten
används i.
Så här tar du bort en bibliotekspost från ett bibliotek:
1
Markera posten i kategorin Bibliotek på resurspanelen.
2
Klicka på knappen Ta bort och bekräfta att du vill ta bort posten.
Var försiktig. Om du tar bort en bibliotekspost kan du inte få tillbaka den med
hjälp av Ångra. Det finns dock en möjlighet att du kan återskapa den genom
att följa anvisningarna i nästa procedur.
När du tar bort en bibliotekspost tas posten bort från biblioteket, men
innehållet i dokument som den används i ändras inte.
Så här återskapar du en bibliotekspost som saknas eller har tagits bort:
396
Kapitel 16
1
Markera en förekomst av posten i ett av dokumenten.
2
Klicka på knappen Skapa om i egenskapskontrollen.
Göra biblioteksposter ändringsbara i ett dokument
Om du har lagt till en bibliotekspost i dokumentet och vill redigera posten
specifikt för denna sida måste du bryta kopplingen mellan posten i dokumentet
och biblioteket. När du har gjort en förekomst av en bibliotekspost ändringsbar,
kan den förekomsten inte uppdateras när biblioteksposten ändras.
Så här gör du en bibliotekspost ändringsbar:
1
Markera en bibliotekspost i det aktuella dokumentet.
2
Klicka på Koppla loss från original i egenskapskontrollen.
Den markerade förekomsten av biblioteksposten mister sin markering (om du
har angett att markering ska visas) och kan inte längre uppdateras när den
ursprungliga biblioteksposten ändras.
Redigera ett beteende i en bibliotekspost
När du skapar en bibliotekspost som innehåller ett element med ett kopplat
Dreamweaver-beteende kopieras elementet och dess händelsehanterare (det
attribut som anger vilken händelse som utlöser åtgärden, exempelvis onClick,
onLoad eller onMouseOver, och vilken åtgärd som ska anropas när händelsen
inträffar) till bibliotekspostfilen. De associerade JavaScript-funktionerna kopieras
inte till biblioteksposten. När du infogar biblioteksposten i ett dokument infogas i
stället lämpliga JavaScript-funktioner automatiskt i dokumentets HEAD-del (om de
inte redan finns där).
Obs! Om du skriver JavaScript-koden för hand (d.v.s. om du skapar den utan att använda
Dreamweaver-beteenden) kan du göra den till en del av en bibliotekspost om du använder
beteendet Anropa JavaScript för att köra koden. Om du inte använder ett Dreamweaverbeteende för att köra koden sparas inte koden som en del av biblioteksposten.
JavaScript-funktionerna sparas inte med biblioteksposten eftersom de är element i
dokumentets HEAD-del och biblioteksposter endast kan innehålla BODY-element.
Beteendepanelen är därför otillgänglig när du redigerar en bibliotekspost, eftersom
bara en del av beteendekoden (händelsehanteraren) ingår i biblioteksposten. Om
du vill redigera ett beteende i en bibliotekspost måste du först infoga posten i ett
dokument och sedan göra posten ändringsbar i detta dokument. När du har gjort
ändringarna kan du skapa om biblioteksposten och på så sätt ersätta posten i
biblioteket med den redigerade posten från dokumentet.
Mer information om beteenden finns i ”Använda beteenden” på sidan 433.
Återanvända innehåll med mallar och bibliotek
397
Så här redigerar du ett beteende i en bibliotekspost:
1
Öppna ett dokument som innehåller biblioteksposten.
Notera namnet på biblioteksposten och exakt vilka koder den innehåller. Du
behöver dessa uppgifter i steg 8 och 9.
2
Markera biblioteksposten och klicka på Koppla loss från original i
egenskapskontrollen.
3
Markera elementet som har beteendet kopplat till sig.
4
Välj Fönster > Beteenden så att beteendepanelen öppnas. Dubbelklicka på den
åtgärd som du vill ändra på beteendepanelen.
5
Gör ändringarna i dialogrutan som visas och klicka på OK.
6
Välj Fönster > Bibliotek så att kategorin Bibliotek på resurspanelen öppnas.
7
Kontrollera att du har noterat exakt rätt namn på den ursprungliga
biblioteksposten. Markera sedan den ursprungliga biblioteksposten och ta bort
den genom att klicka på knappen Ta bort på resurspanelen.
8
Markera samtliga element som ingår i biblioteksposten i dokumentfönstret.
Var noga med att markera exakt samma element som fanns i den ursprungliga
biblioteksposten.
9
Klicka på knappen Ny bibliotekspost på resurspanelen och ge den nya posten
samma namn som den post du tog bort i steg 7.
Var noga med att använda exakt samma stavning och versaler/gemener.
398
Kapitel 16
10
Välj Ändra > Bibliotek > Uppdatera sidor när du vill uppdatera
biblioteksposten i andra dokument på platsen.
11
Markera Filer som använder i listrutan Leta i i dialogrutan Uppdatera sidor.
12
I listrutan bredvid markerar du namnet på den bibliotekspost du precis har
skapat.
13
Kontrollera att Biblioteksposter är markerat för alternativet Uppdatera och
klicka sedan på Starta.
14
När uppdateringarna är klara klickar du på Stäng för att stänga dialogrutan
Uppdatera sidor.
Ange egenskaper för biblioteksposter
Använd egenskaper för biblioteksposter när du vill ange källfilen för en post, när
du vill göra en post ändringsbar eller när du vill skapa om den ursprungliga
biblioteksposten efter att ha redigerat en förekomst av den i ett dokument. Du
öppnar egenskapskontrollen genom att markera en bibliotekspost i ett dokument.
Källa visar
källfilens namn och placering. Du kan inte redigera denna information.
Öppna öppnar
bibliotekspostens källfil för redigering. Detta är helt jämförbart
med att markera posten på resurspanelen och klicka på knappen Redigera.
Koppla loss från original bryter
kopplingen mellan den markerade
biblioteksposten och källfilen. När en post har kopplats loss kan den redigeras i
dokumentet, men den är inte längre en bibliotekspost och uppdateras därför inte
när du ändrar den ursprungliga biblioteksposten.
Skapa om skriver
över den ursprungliga biblioteksposten med den aktuella
markeringen. Använd detta alternativ när du vill skapa om biblioteksposter ifall
den ursprungliga biblioteksposten saknas eller har tagits bort av misstag.
Använda Server-Side Includes
(serverinstruktioner)
Server-Side Includes är instruktioner till servern att inkludera en angiven fil i det
aktuella dokumentet innan det skickas till användaren som har begärt det. (Du
kan betrakta det ungefär som en bibliotekspost som tillhandahålls av servern.)
När du öppnar ett dokument som finns på en server bearbetar servern
inkluderingsinstruktionerna och skapar ett nytt dokument där dessa instruktioner
ersätts med innehållet i den inkluderade filen. Servern skickar sedan detta nya
dokument till din webbläsare. När du öppnar ett lokalt dokument i en webbläsare
finns det emellertid ingen server som kan bearbeta inkluderingsinstruktionerna i
dokumentet. Följden blir att dokumentet öppnas i webbläsaren utan att
instruktionerna bearbetas, och filen som skulle ha inkluderats visas inte i
webbläsaren. Om du inte använder Dreamweaver kan det därför vara svårt att titta
på lokala filer och se dem så som de kommer att visas för besökare efter att du har
skickat dem till servern.
I Dreamweaver kan du däremot visa dokument precis så som de kommer att se ut
efter att de har skickats till servern, både i designvyn och när du förhandsgranskar
i en webbläsare. Inkluderade filer kan visas genom att en översättare används för
att efterlikna det sätt som en server bearbetar instruktionerna på.
Återanvända innehåll med mallar och bibliotek
399
När du placerar en Server-Side Include i ett dokument infogas en referens till en
extern fil. Det är alltså inte innehållet i den angivna filen som infogas i det aktuella
dokumentet. Innehållet i den externa filen visas i dokumentfönstret så att det blir
lättare att utforma sidorna, men du kan inte redigera den inkluderade filen direkt
i ett dokument. Om du vill redigera innehållet i en Server-Side Include måste du
redigera direkt i filen som du inkluderar. Eventuella ändringar i den externa filen
uppdateras automatiskt i alla dokument som den används i.
Det finns två typer av Server-Side Includes: Virtuellt och Fil. Välj en av dem
utifrån vilken typ av webbserver du använder:
• Välj Virtuellt om du använder webbservern Apache. (Detta är
standardinställning i Dreamweaver.) På Apache fungerar Virtuellt alltid, medan
Fil bara fungerar i vissa fall.
• Välj Fil om du använder servern Microsoft IIS. (Virtuellt fungerar bara med IIS
under vissa specifika omständigheter.) Om du använder IIS kan du dess värre
inte inkludera en fil som finns i en mapp ovanför den aktuella mappen i
mapphierarkin, såvida inte speciell programvara finns installerad på servern.
Om du behöver inkludera en fil från en mapp som finns högre upp i
mapphierarkin på en IIS-server kan du fråga systemadministratören om den
nödvändiga programvaran finns installerad.
• När det gäller andra sorters servrar, eller om du inte vet vilken sorts server du
använder, frågar du systemadministratören vilket alternativ du ska använda.
En del servrar är konfigurerade att undersöka alla filer för att se efter om de
innehåller Server-Side Includes. Andra servrar är konfigurerade att bara undersöka
filer med ett visst filtillägg, exempelvis .shtml, .shtm eller .inc. Om en Server-Side
Include inte fungerar för dig frågar du systemadministratören om du måste
använda ett speciellt tillägg i namnet på den fil som använder instruktionen. (Om
filen har namnet kanot.html kanske du exempelvis måste ändra namnet till
kanot.shtml.) Om du vill att dina filer ska behålla filtillägget .html eller .htm ber
du systemadministratören att konfigurera servern så att den söker efter Server-Side
Includes i alla filer (inte bara i filer med ett visst tillägg). Det tar dock lite längre
tid att analysera en fil när Server-Side Includes är inblandade, så sidor som servern
analyserar hanteras lite långsammare än andra sidor. En del systemadministratörer
kan därför vara ovilliga att tillhandahålla möjligheten att analysera alla filer.
Så här infogar du en Server-Side Include (serverinstruktion):
400
Kapitel 16
1
Välj Infoga > Server-Side Include eller klicka på ikonen Infoga Server-Side
Include i kategorin Vanlig på objektpanelen.
2
Bläddra till och välj en fil i dialogrutan som visas.
Så här ändrar du vilken fil som är inkluderad:
1
Markera aktuell Server-Side Include i dokumentfönstret.
2
Öppna egenskapskontrollen.
3
Gör något av följande:
• Klicka på mappikonen och bläddra till och markera en ny fil som ska
inkluderas.
• Skriv den nya filens sökväg och namn i textrutan.
Redigera innehållet i en Server-Side Include
(serverinstruktion)
I likhet med biblioteksposter markeras Server-Side Includes som en hel enhet i
dokumentfönstret. Till skillnad från biblioteksposter visas för Server-Side Includes
inte den inkluderade filens HTML-källkod i kodkontrollen eller kodvyn i
dokumentfönstret. I stället visas den faktiska serverinstruktionen som
(exempelvis) ser ut ungefär så här:
<!--#include virtual="/uber/html/footer.html" -->
Du måste öppna den inkluderade filen för att kunna redigera innehållet som är
associerat med den.
Obs! Server-Side Includes kan inte innehålla HEAD- eller BODY-koder.
Så här redigerar du en Server-Side Include (serverinstruktion):
1
Markera serverinstruktionen i dokumentfönstret eller kodkontrollen och klicka
på Redigera i egenskapskontrollen.
Den inkluderade filen öppnas i ett nytt dokumentfönster.
2
Redigera filen och spara den sedan.
Ändringarna visas omedelbart i det aktuella dokumentet och i alla efterföljande
dokument som du öppnar och som inkluderar filen.
Återanvända innehåll med mallar och bibliotek
401
402
Kapitel 16
17
KAPITEL 17
Använda dynamiska skikt
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ett skikt är en behållare på webbsidan som innehåller HTML-sidelement. Genom
att använda skikt på sidan får du mer kontroll och flexibilitet när du vill göra sidan
dynamisk. Skikt utvecklades inom webbdesignbranschen för att ge professionella
användare samma kontroll och flexibilitet som de har vid utformningen av
traditionella tryckta medier.
Du kan stapla skikt ovanpå varandra, dölja en del skikt samtidigt som du visar
andra eller flytta runt skikt på sidan med hjälp av tidslinjer. Du kan exempelvis ha
en bakgrundsbild i ett skikt och sedan ovanpå det placera ett annat skikt med text.
Du kan också ha bilder på sidan som först visas och sedan tonas bort från sidan.
Allt detta kan du göra med skikt i Dreamweaver, utan att det krävs någon
JavaScript- eller HTML-kodning.
En nackdel med att använda skikt på webbsidor är att skikt inte kan visas i de
flesta äldre webbläsare. Bara Internet Explorer 4.0 och Netscape 4.0 och senare
webbläsare visar skikt, och inte alltid konsekvent. Om du vill att alla användare
ska kunna se dina webbsidor kan du använda skikt tillsammans med tabeller. Du
kan utforma sidlayouten med skikt och sedan konvertera skikten till tabeller. Mer
information finns i ”Använda tabeller och skikt för layout” på sidan 418.
Obs! Du bör arbeta i layoutläget vid sidlayout (Se ”Utforma sidlayouten” på sidan 161).
Layoutläget är ett enklare sätt att implementera sidlayouten med tabeller som
underliggande struktur.
403
Skikt och HTML-kod
När du infogar skikt på webbsidan infogas automatiskt HTML-koden för dessa
skikt i sidkoden. Du kan ange fyra olika koder för skikt: DIV, SPAN, LAYER och
ILAYER. DIV och SPAN är de vanligaste koderna. Därför bör du använda dem om du
vill att så många som möjligt ska kunna visa skikten. Både Internet Explorer 4.0
och Netscape Navigator 4.0 stöder skikt som har skapats med koderna DIV och
SPAN. Bara Navigator 4.0-versioner stöder skikt som har skapats med koderna
LAYER och ILAYER (Netscape har tagit bort stödet i senare versioner). Tidigare
versioner av båda webbläsarna visar innehållet i ett skikt, men kan inte visa
placeringen.
Som standard skapas skikt med koden DIV och skiktkod infogas vid
insättningspunkten, eller överst på sidan, precis efter koden BODY. Om du skapar
ett kapslat skikt infogas koden inuti den kod som definierar det överordnade
skiktet. Information om hur du ändrar standardkoden finns i ”Skikt –
inställningar” på sidan 408.
Här följer ett exempel på HTML-kod för ett enstaka skikt (som den skulle se ut i
Dreamweaver):
<div id="Layer1" style="position:absolute; visibility:inherit; width:200px;
height:115px; z-index:1">
</div>
Här följer ett exempel på HTML-kod för ett kapslat skikt (som den skulle se ut i
Dreamweaver):
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px;
height:158px; z-index:1;">
Innehåll i det överordnade skiktet.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px;
height:69px; z-index:1;">
Innehåll i det kapslade skiktet.
</div>
</div>
Du kan ange egenskaper för hur skikten ska placeras på sidan. Bland egenskaperna
finns vänster och överst (x- respektive y-koordinater), z-index (som också kallas
staplingsordning) och synlighet. Mer information finns i ”Ange skiktegenskaper”
på sidan 413.
404
Kapitel 17
Skapa skikt på sidan
I Dreamweaver kan du enkelt och exakt skapa skikt på sidan. Du kan rita ett skikt
på sidan, infoga ett skikt via menyn eller dra ett skikt till sidan. Skapa så många
skikt som du behöver för alla dina sidelement.
Du kan också skapa ett skikt i ett annat skikt (kapsla), placera skikt ovanpå
varandra (stapla) och dölja vissa skikt samtidigt som andra visas. På skiktpanelen
kan du enkelt hantera skikten och utföra dessa åtgärder. Mer information finns i
”Skiktpanelen” på sidan 406.
Alla skikt som du skapar på sidan har vissa standardegenskaper, exempelvis kod,
synlighet, höjd och bredd o.s.v. Om du vill ändra standardinställningarna väljer
du Redigera > Inställningar och markerar kategorin Skikt. Mer information om
dessa egenskaper finns i ”Skikt – inställningar” på sidan 408.
Om du inte vill att skikt ska överlappa varandra när du skapar dem på sidan
aktiverar du alternativet Förhindra överlappning på skiktpanelen eller väljer Ändra
> Ordna > Förhindra överlappning av skikt. Se ”Förhindra överlappning av skikt”
på sidan 419.
Gör något av följande när du vill skapa ett skikt:
• Om du vill rita ett skikt klickar du på ikonen Rita skikt på objektpanelen och
drar sedan för att rita skiktet i dokumentfönstret.
• Om du vill infoga ett skikt placerar du insättningspunkten i dokumentfönstret
där du vill att skiktet ska placeras och väljer sedan Infoga > Skikt.
• Om du vill dra och släppa ett skikt drar du knappen Rita skikt från
objektpanelen till dokumentfönstret.
Om du vill rita mer än ett skikt åt gången klickar du på ikonen Rita skikt på
objektpanelen och håller ned Ctrl (Windows) eller Kommando (Macintosh)
samtidigt som du ritar skikten. Du kan fortsätta att rita nya skikt så länge du inte
släpper upp Ctrl- respektive Kommando-tangenten.
Om osynliga element är aktiverade visas en skiktmarkör i dokumentfönstret varje
gång du ritar ett skikt på sidan. Om skiktmarkörer inte visas, och du vill se dem,
väljer du Visa > Visuella hjälpmedel > Osynliga element. Mer information finns i
”Osynliga element - inställningar” på sidan 150.
Använda dynamiska skikt
405
Obs! När du aktiverar alternativet Osynliga element kan det verka som om elementen på
sidan flyttas om. Osynliga element syns bara i dokumentfönstret, så när du visar sidan i en
webbläsare finns allting på rätt ställe.
Skiktpanelen
Skiktpanelen använder du för att hantera skikten i dokumentet. Välj Fönster >
Skikt eller tryck på F11 när du vill öppna skiktpanelen. Skikt visas som en staplad
lista med namn. Det först skapade skiktet finns längst ned i staplingsordningen,
medan det senast skapade skiktet finns överst i staplingsordningen. Kapslade skikt
visas som namn som är kopplade till överordnade skikt. Klicka på
maximeringsknappen när du vill visa eller dölja kapslade skikt.
Använd skiktpanelen när du vill förhindra överlappning, ändra skiktens synlighet,
kapsla eller stapla skikt och markera ett eller flera skikt.
406
Kapitel 17
Kapsla skikt
Ett kapslat skikt är ett skikt som har skapats inuti ett annat skikt. Använd
skiktpanelen eller infognings-, dra och släpp- eller ritmetoden när du vill skapa
kapslade skikt.
Kapsling används ofta för att gruppera skikt. Ett kapslat skikt följer med när det
överordnade skiktet flyttas, och du kan ställa in att det ska ärva det överordnade
skiktets synlighet.
Om du vill att skikt ska kapslas automatiskt när du ritar dem på sidan anger du
det i skiktinställningarna. Välj Redigera > Inställningar, markera kategorin Skikt
och sedan kryssrutan Kapsling. Alla skikt som du ritar inuti andra skikt kapslas då
automatiskt. Mer information finns i ”Skikt – inställningar” på sidan 408.
Obs! Använd Netscapes storleksjustering när du använder kapslade skikt på sidan
(Kommandon > Lägg till/ta bort Netscapes storleksjustering). Annars placeras skikten inte
på rätt sätt i Netscapes 4.0-versioner.
Gör något av följande när du vill skapa ett kapslat skikt:
• Om du vill infoga ett kapslat skikt placerar du insättningspunkten i ett
befintligt skikt och väljer Infoga > Skikt.
• Om du vill dra och släppa ett kapslat skikt drar du ikonen Rita skikt från
objektpanelen och släpper den sedan i ett befintligt skikt.
• Om du vill rita ett kapslat skikt klickar du på ikonen Rita skikt på
objektpanelen och drar sedan för att rita skiktet i ett annat skikt. Om Kapsling
är avaktiverat i skiktinställningarna håller du ned Alt (Windows) eller
Alternativ (Macintosh) samtidigt som du ritar ett skikt i ett befintligt skikt.
Så här skapar du ett kapslat skikt med hjälp av skiktpanelen:
1
Välj Fönster > Skikt eller tryck på F11 så att skiktpanelen öppnas.
2
Markera ett skikt på skiktpanelen. Håll sedan ned Ctrl (Windows) eller
Kommando (Macintosh) samtidigt som du drar skiktet till målskiktet på
skiktpanelen.
3
Släpp upp musknappen när en ruta visas runt målskiktets namn.
Använda dynamiska skikt
407
Skikt – inställningar
Använd skiktinställningarna när du vill definiera standardinställningarna för nya
skikt som du skapar. Välj Redigera > Inställningar och markera kategorin Skikt
när du vill ändra skiktinställningarna.
Kod anger vilken HTML-kod som ska användas som standard när du skapar skikt.
Alternativen är DIV (standard), SPAN, LAYER och ILAYER. DIV eller SPAN
rekommenderas om du vill vara säker på att skikten fungerar i alla webbläsare i
version 4.0 och senare. LAYER och ILAYER fungerar bara i Netscape 4.x-webbläsare.
Synlighet anger
om skikten ska vara synliga som standard.
och Höjd anger standardbredd och standardhöjd för skikt som skapas med
Infoga > Skikt.
Bredd
Bakgrundsfärg anger
standardfärg för bakgrunden. Välj färg i färgväljaren.
Bakgrundsbild anger
en standardbild för bakgrunden. Klicka på Bläddra när du
vill söka efter filen på datorn, eller skriv bildfilens sökväg i textrutan.
Kapsling gör
ett skikt, som ritas inom gränserna för ett befintligt skikt, till ett
kapslat skikt. Håll ned Alt (Windows) eller Alternativ (Macintosh) om du
temporärt vill ändra denna inställning när du ritar ett skikt.
Netscape 4-kompatibilitet infogar JavaScript i dokumentets HEAD-del och rättar till
ett känt problem i Netscape 4.x-webbläsare som gör så att skiktens
placeringskoordinater försvinner när användaren ändrar storlek på
webbläsarfönstret. JavaScript-koden tvingar sidan att alltid uppdateras när
fönstrets storlek ändras så att skikten placeras rätt. Du kan också lägga till eller ta
bort JavaScript-koden genom att välja Kommandon > Lägg till/ta bort Netscapes
storleksjustering.
Hantera skikt
Under tiden du arbetar med sidlayouten kan du markera, aktivera och ändra
storlek på skikt. Du måste markera ett skikt innan du kan flytta, justera eller ändra
storlek på det. När du ändrar storlek på skikt kan du ändra dimensionerna för ett
enskilt skikt eller ge två eller fler skikt samma höjd och bredd. När du aktiverar
skikt kan du bara placera innehåll i dem.
Om du vill förhindra att skikt överlappar varandra när du flyttar och ändrar
storlek på dem, använder du alternativet Förhindra överlappning. Se ”Förhindra
överlappning av skikt” på sidan 419.
408
Kapitel 17
Markera skikt
Markera ett eller flera skikt när du vill ge dem samma bredd och höjd, ändra deras
placering, justera dem o.s.v. En fullständig lista över alternativen finns i ”Ange
skiktegenskaper” på sidan 413.
Gör något av följande när du vill markera ett skikt:
• Klicka på skiktets namn på skiktpanelen.
• Klicka på skiktets markeringshandtag. Om handtaget inte är synligt klickar du
någonstans i skiktet för att göra det synligt.
• Klicka på skiktets kant.
• Om inga skikt är aktiva eller markerade Skift-klickar du i ett skikt.
• Om flera skikt är markerade Ctrl+Skift-klickar (Windows) eller
Kommando+Skift-klickar (Macintosh) du i ett skikt. Då avmarkeras alla andra
skikt och bara det som du väljer markeras.
• Klicka på den skiktmarkör i dokumentfönstret som motsvarar skiktets
placering i HTML-koden. Om skiktmarkören inte syns väljer du Visa >
Visuella hjälpmedel > Osynliga element.
Gör något av följande när du vill markera flera skikt:
• Skift-klicka på två eller fler skiktnamn på skiktpanelen.
• Skift-klicka inuti eller på kanten av två eller fler skikt.
När flera skikt är markerade är handtagen på det senast markerade skiktet
markerade i svart. Handtagen på de andra skikten är markerade i vitt.
Använda dynamiska skikt
409
Ändra storlek på skikt
Du kan ändra storlek på ett enstaka skikt eller på flera skikt samtidigt för att ge
dem samma bredd och höjd.
Om alternativet Förhindra överlappning är aktiverat kan du inte ändra storlek på
ett skikt så att det överlappar ett annat skikt. Se ”Förhindra överlappning av skikt”
på sidan 419.
Gör något av följande när du vill ändra storlek på ett skikt:
• Om du vill ändra storlek genom att dra, markerar du skiktet och drar något av
storlekshandtagen.
• Om du vill ändra storlek 1 bildpunkt i taget, markerar du skiktet och håller ned
Ctrl (Windows) eller Alternativ (Macintosh) samtidigt som du trycker på en
piltangent.
• Om du vill ändra storlek efter stödrastret håller du ned Skift+Ctrl (Windows)
eller Alternativ (Macintosh) samtidigt som du trycker på en piltangent.
Information om hur du ställer in stödrastret finns i ”Fästa skikt mot
stödrastret” på sidan 412.
• Skriv ett värde för bredd och höjd i egenskapskontrollen.
När du ändrar storlek på ett skikt ändras skiktets bredd och höjd.
Storleksändringen anger inte hur mycket av skiktets innehåll som syns.
Information om hur du definierar synliga regioner i skikt finns i ”Ange
skiktegenskaper” på sidan 413.
Så här ändrar du storlek på flera skikt:
1
Markera två eller fler skikt i dokumentfönstret.
2
Gör något av följande:
• Välj Ändra > Justera > Gör samma bredd eller Ändra > Justera > Gör samma
höjd.
De först markerade skikten ändras till samma bredd eller höjd som det senast
markerade skiktet (som är markerat i svart).
• Ange värden för bredd och höjd till höger om Flera skikt i egenskapskontrollen.
Värdena används på alla markerade skikt.
410
Kapitel 17
Flytta skikt
Om du tidigare har arbetat i något grafikprogram kommer det att kännas
välbekant att flytta skikt i dokumentfönstret.
Om alternativet Förhindra överlappning är aktiverat kan du inte flytta ett skikt så
att det överlappar ett annat skikt. Se ”Förhindra överlappning av skikt” på
sidan 419.
Gör något av följande när du vill flytta ett eller flera skikt:
• Om du vill flytta genom att dra markerar du skikten och drar
markeringshandtaget på det senast markerade skiktet (markerat i svart).
• Om du vill flytta 1 bildpunkt i taget markerar du skikten och använder
piltangenterna. Håll ned Skift samtidigt som du trycker på en piltangent när du
vill flytta skiktet efter stödrastrets olika linjer. Information om hur du ställer in
stödrastret finns i ”Fästa skikt mot stödrastret” på sidan 412.
Justera skikt
Använd kommandona för skiktjustering när du vill justera ett eller flera skikt mot
en kant på det senast markerade skiktet.
När du justerar skikt kan även kapslade skikt som inte är markerade komma att
flyttas, därför att deras överordnade skikt är markerade och flyttas. Använd inte
kapslade skikt om du vill förhindra detta.
Så här justerar du två eller fler skikt:
1
Markera skikten.
2
Välj Ändra > Justera och sedan ett justeringsalternativ.
Om du exempelvis väljer Överst flyttas samtliga skikt så att deras överkanter är i
samma lodräta position som överkanten på det senast markerade skiktet (som är
markerat i svart).
Använda dynamiska skikt
411
Fästa skikt mot stödrastret
Använd stödrastret som ett visuellt hjälpmedel när du placerar eller ändrar storlek
på skikt i dokumentfönstret. Du kan aktivera stödrastret och ta hjälp av det när du
ritar skikt. Du kan också ange att skikten automatiskt ska fästas mot stödrastret,
ändra stödrastret och styra funktionen Fäst mot i stödrasterinställningarna.
Funktionen Fäst mot är aktiv även om stödrastret inte är synligt.
Gör något av följande när du vill visa stödrastret:
• Välj Visa > Stödraster > Visa stödraster.
• Välj Visa > Stödraster > Redigera stödraster och markera alternativet Visa
stödraster.
Så här fäster du ett skikt mot stödrastret:
1
Välj Visa > Stödraster > Fäst mot stödraster när du vill aktivera (eller
avaktivera) funktionen.
2
Markera skiktet och dra det. Skiktet fästs mot närmsta stödpunkt.
Så här ändrar du stödrasterinställningar:
1
Välj Visa > Stödraster > Redigera stödraster så att dialogrutan
Stödrasterinställningar öppnas.
2
Gör något av följande:
• Klicka på pilen i färgrutan och markera en färg på paletten eller skriv det
hexadecimala värdet i fältet. Detta anger färgen på stödlinjerna.
• Markera Visa stödraster om du vill visa stödrastret i dokumentfönstret.
• Markera Fäst mot stödraster om du vill aktivera denna funktion.
• Ange hur stort mellanrum du vill ha och markera Bildpunkt, Tum eller
Centimeter i listrutan. Detta anger hur långt avståndet är mellan stödlinjerna.
• Välj linjer eller prickar för stödlinjerna.
3
Klicka på Verkställ när du vill visa ändringarna och sedan på OK när du vill
stänga dialogrutan.
Aktivera skikt
Innan du kan placera objekt i ett skikt måste du aktivera skiktet. När du aktiverar ett
skikt placeras insättningspunkten i skiktet, skiktkanten markeras och
markeringshandtaget visas, men det innebär för den skull inte att skiktet markeras.
Så här aktiverar du ett skikt:
Klicka någonstans i skiktet.
412
Kapitel 17
Ange skiktegenskaper
Använd egenskapskontrollen när du vill ange ett skikts namn och placering och
andra skiktalternativ. Om du vill visa alla följande egenskaper klickar du på
maximeringsknappen längst ned till höger i egenskapskontrollen.
Skikt-ID anger
ett namn för att identifiera skiktet på skiktpanelen och för skript.
Skriv ett namn i fältet till vänster i egenskapskontrollen. Använd bara vanliga,
alfanumeriska tecken i skiktnamn. Använd inte specialtecken, exempelvis
mellanslag, bindestreck, snedstreck eller punkter. Varje enskilt lager måste ha
unikt namn.
V och Ö (vänster
och överst) anger skiktets position i förhållande till det övre
vänstra hörnet på sidan eller det överordnade skiktet (om skiktet är kapslat).
B och H anger
skiktets bredd och höjd. Dessa värden åsidosätts om skiktets
innehåll överskrider den angivna storleken.
Om du har angett DIV eller SPAN som standardkod är bildpunkter (px)
standardvärdet för placering och storlek. Du kan också ange följande enheter: pc
(pica), pt (punkter), tum, mm, cm eller % (procent av det överordnade objektets
värde). Förkortningen måste följa direkt efter värdet, utan mellanslag: exempelvis
3mm. Inställningen för spill anger hur skikt ska påverkas när innehållet
överskrider skiktstorleken.
Z-Index anger
skiktets staplingsordning (z-index). Skikt med högre nummer visas
ovanpå skikt med lägre nummer. Värdena kan vara positiva eller negativa. Det är
lättare att ändra staplingsordning på skiktpanelen än att göra det genom att ange
särskilda z-index-värden. Se ”Ändra staplingsordning för skikt” på sidan 416.
Netscape-skikt (sådana med koden LAYER eller ILAYER) kan också staplas i
förhållande till andra skikt på sidan. När du markerar ett Netscape-skikt visas
ytterligare två alternativ längst ned till höger i egenskapskontrollen. Använd
alternativet O/N när du vill markera en relativ staplingsplats och välj sedan
namnet på ett annat skikt i listrutan omedelbart till höger. (O är ett skikt ovanför
det aktuella skiktet och N ett skikt nedanför det aktuella skiktet.)
Använda dynamiska skikt
413
Synlig anger
skiktets startinställning (synligt eller inte). Använd ett skriptspråk,
exempelvis JavaScript, när du vill ange egenskaper för synlighet och visa
skiktinnehåll dynamiskt. Välj bland följande alternativ:
• Default anger ingen egenskap för synlighet, men de flesta webbläsare tolkar
detta som Inherit.
• Inherit använder samma egenskap för synlighet som det överordnade skiktet.
• Visible visar skiktinnehållet, oavsett det överordnade skiktets värde.
• Hidden döljer skiktinnehållet, oavsett vilket värde det överordnade skiktet har.
Observera att dolda skikt som har skapats med ILAYER fortfarande tar upp
samma utrymme som om de hade varit synliga.
Bakg. bild anger
en bakgrundsbild för skiktet. Klicka på mappikonen om du vill
bläddra till en bildfil och markera den, eller skriv bildens sökväg i textfältet.
Bakg. färg anger en bakgrundsfärg för skiktet. Låt detta alternativ vara tomt om
du vill använda en genomskinlig bakgrund.
Kod anger vilken HTML-kod som ska användas. Du bör använda SPAN och DIV.
Med LAYER och ILAYER skapas Netscape Navigator-skikt som bara kan visas i
Netscape Navigator 4-webbläsare.
Spill anger
vad som ska hända om innehållet i ett skikt överskrider den angivna
skiktstorleken. Välj bland följande alternativ:
• Visible ökar skiktstorleken så att allt innehåll blir synligt. Skiktet utökas nedåt
och till höger.
• Hidden bevarar skiktets storlek och beskär innehåll som inte får plats. Inga
rullningslister visas.
• Scroll lägger till rullningslister i skiktet oavsett om innehållet får plats eller inte.
Om du specifikt lägger till rullningslister så undviker du den förvirring som
kan uppstå i en dynamisk miljö där rullningslister visas och döljs. Detta
alternativ fungerar endast i webbläsare som stöder rullningslister.
• Auto gör att rullningslister endast visas när skiktinnehållet sträcker sig utanför
skiktets gränser.
Beskär definierar
skiktets synliga område. Du kan använda det för att beskära
innehåll från skiktets kanter. Ange värden som motsvarar avståndet i bildpunkter
från skiktets gränser. Inställningarna Ö (överst) och V (vänster) står i relation till
skiktet, inte till sidan.
Använd V, överst eller SidanX, SidanY (endast LAYER
och ILAYER) anger hur ett
skikt ska placeras i förhållande till det överordnade skiktet. Med alternativet V,
överst placeras skiktet i förhållande till det övre vänstra hörnet i det överordnade
skiktet. Med alternativet SidanX, SidanY får skiktet en absolut placering i
förhållande till sidans övre vänstra hörn, oavsett var det överordnade skiktet är
placerat.
414
Kapitel 17
Källa (endast LAYER
och ILAYER) använder du för att visa ett annat HTMLdokument i skiktet. Klicka på mappikonen om du vill bläddra till dokumentet
och markera det, eller skriv dokumentets sökväg. Observera att denna egenskap
inte visas i dokumentfönstret.
O/N (endast LAYER och ILAYER) anger skiktet ovanför (O) eller nedanför (N) det
aktuella skiktet i staplingsordningen (z-index). Endast skikt som tidigare har
definierats i dokumentet visas i listrutan med skiktnamn till höger om listrutan O/N.
Ange egenskaper för flera skikt
När du markerar två eller fler skikt visas textegenskaper och en deluppsättning
med de vanligaste skiktegenskaperna i egenskapskontrollen för skikt. Med hjälp av
dem kan du ändra flera skikt samtidigt. Om du vill markera flera skikt håller du
ned Skift samtidigt som du markerar dem. Se ”Hantera skikt” på sidan 408.
V och Ö anger
skiktens position i förhållande till det övre vänstra hörnet av sidan
eller det överordnade skiktet.
B och H anger
skiktens bredd och höjd. Dessa värden åsidosätts om innehållet i
skikten överskrider den angivna storleken.
Om du har angett DIV eller SPAN som standardkod är bildpunkter (px)
standardvärdet för placering och storlek. Du kan också ange följande enheter: pc
(pica), pt (punkter), tum, mm, cm eller % (procent av det överordnade skiktets
värde). Förkortningen måste följa direkt efter värdet, utan mellanslag: exempelvis
3mm.
Synl anger
startinställningen för skiktens synlighet. Välj bland följande alternativ:
• Default anger ingen egenskap för synlighet, men de flesta webbläsare tolkar
detta som Inherit.
• Inherit använder samma egenskap för synlighet som det överordnade skiktet.
• Visible visar skiktinnehållet, oavsett det överordnade skiktets värde.
• Hidden visar skiktinnehållet som genomskinligt, oavsett det överordnade
skiktets värde. Observera att dolda skikt som har skapats med LAYER och ILAYER
fortfarande tar upp samma utrymme som om de hade varit synliga.
Kod anger vilken HTML-kod som ska användas. Du bör använda SPAN och DIV.
Med LAYER och ILAYER skapas Netscape Navigator-skikt som bara kan visas i
Netscape Navigator 4-webbläsare.
Använda dynamiska skikt
415
Bakg. bild anger
en bakgrundsbild för skikten. Klicka på mappikonen om du vill
bläddra till en bildfil och markera den, eller skriv bildens sökväg i textfältet.
Bakg. färg anger en bakgrundsfärg för skikten. Låt detta alternativ vara tomt om
du vill använda en genomskinlig bakgrund.
Ändra staplingsordning för skikt
Använd egenskapskontrollen eller skiktpanelen när du vill ändra skiktens
staplingsordning. Det översta skiktet i listan på skiktpanelen är också överst i
staplingsordningen.
I HTML-kod anger staplingsordningen, eller z-index, i vilken ordning skikten
ritas i en webbläsare. Du kan ändra skiktens z-index på skiktpanelen eller
egenskapskontrollen.
Så här ändrar du staplingsordningen för skikt på skiktpanelen:
Välj Fönster > Skikt så att skiktpanelen öppnas. Gör sedan något av följande:
• Markera och dra ett skikt uppåt eller nedåt till önskad placering i
staplingsordningen. En linje visas när du flyttar skiktet. Släpp upp musknappen
när placeringslinjen är på önskat ställe i staplingsordningen.
• I Z-kolumnen klickar du på numret för det skikt du vill ändra. Skriv ett högre
nummer än det befintliga om du vill flytta skiktet uppåt i staplingsordningen.
Skriv ett lägre nummer om du vill flytta skiktet nedåt i staplingsordningen.
Så här ändrar du staplingsordningen för skikt i egenskapskontrollen:
1
Välj Fönster > Skikt och öppna skiktpanelen så att du kan se den aktuella
staplingsordningen.
2
Markera ett skikt på skiktpanelen eller i dokumentfönstret.
3
Skriv ett nummer i fältet Z-Index i egenskapskontrollen för skikt.
• Skriv ett högre nummer om du vill flytta skiktet uppåt i staplingsordningen.
• Skriv ett lägre nummer om du vill flytta skiktet nedåt i staplingsordningen.
416
Kapitel 17
Ändra skiktens synlighet
Under tiden som du arbetar med dina dokument kan du visa och dölja skikt för
att se hur sidan kommer att se ut under olika omständigheter. Använd
skiktpanelen när du vill ändra skiktens synlighet. Använd dialogrutan för
skiktinställningar när du vill ange standardsynligheten för nya skikt. Se ”Skikt –
inställningar” på sidan 408.
Så här ändrar du skiktens synlighet:
1
Välj Fönster > Skikt så att skiktpanelen öppnas.
2
I raden för önskat skikt klickar du i kolumnen med ögonikonen så att du kan
ange skiktets synlighet.
• Ett öppet öga betyder att skiktet är synligt.
• Ett slutet öga betyder att skiktet är osynligt.
• Om det inte finns någon ögonikon på raden ärver skiktet sin synlighet från det
överordnade skiktet. (När skikt inte är kapslade är det överordnade skiktet
själva dokumentet som alltid är synligt.)
Så här ändrar du synligheten för alla skikt samtidigt:
1
Välj Fönster > Skikt så att skiktpanelen öppnas.
2
Klicka på ögonikonen i kolumnhuvudet.
Använda dynamiska skikt
417
Använda tabeller och skikt för layout
I stället för att använda layoutceller och layouttabeller i layoutläget (se ”Utforma
sidlayouten” på sidan 161) föredrar en del användare fortfarande att arbeta med
skikt och tabeller när de gör sin layout. I Dreamweaver kan du skapa layouten
med hjälp av skikt och sedan konvertera dem till tabeller, eftersom 3.0-webbläsare
inte stöder skikt. Du kan konvertera fram och tillbaka mellan skikt och tabeller
när du vill finjustera layouten och optimera sidans utformning.
Du kan inte konvertera skikt till tabeller eller tabeller till skikt i ett malldokument
eller i ett dokument som är baserat på en mall. Skapa originallayouten och
konvertera den innan du sparar den som en mall.
En enstaka tabell eller ett enstaka skikt kan inte konverteras. Du kan bara
konvertera skikt till tabeller, och omvänt, för hela sidan.
Om du vill skapa 3.0-webbläsarkompatibla filer från den aktuella filen använder
du kommandot Konvertera på Arkiv-menyn. Se ”Konvertera till 3.0kompatibilitet” på sidan 420.
Konvertera mellan skikt och tabeller
Skapa layouten med hjälp av skikt och konvertera sedan skikten till tabeller så att
layouten kan visas i de flesta webbläsare.
Så här konverterar du skikt till en tabell:
1
Välj Ändra > Konvertera > Skikt till tabell.
2
Välj layoutalternativ i dialogrutan som visas.
• Mest exakt skapar en cell för varje skikt plus eventuella celler som behövs för att
mellanrummet mellan skikten ska bevaras.
• Minst: Dölj tomma celler anger att skikten ska justeras så att de ligger kant i
kant om de är placerade inom det angivna antalet bildpunkter. Om du
markerar detta alternativ blir det färre tomma rader och kolumner i tabellen
som skapas, med risk för att layouten inte blir exakt likadan.
• Använd genomskinliga GIF-bilder fyller tabellens sista rad med genomskinliga
GIF-bilder. Detta ser till att tabellen visas med samma kolumnbredder i alla
webbläsare.
När detta alternativ är aktiverat kan du inte redigera tabellen genom att dra
kolumnerna. När alternativet är avaktiverat kommer tabellen som skapas inte
att innehålla genomskinliga GIF-bilder, utan dess utseende kan komma att
variera något mellan olika webbläsare.
• Centrera på sidan centrerar tabellen på sidan.
Om detta alternativ är avaktiverat vänsterjusteras tabellen.
3
418
Kapitel 17
Markera önskade layoutverktyg och stödrasteralternativ och klicka på OK.
Så här konverterar du en tabell till skikt:
1
Välj Ändra > Konvertera > Tabeller till skikt.
2
Markera önskade alternativ i dialogrutan som visas.
• Visa stödraster och Fäst mot stödraster gör att du kan använda ett stödraster
som hjälp när du placerar skikt. Se ”Fästa skikt mot stödrastret” på sidan 412.
• Förhindra överlappning av skikt begränsar placeringen av skikt när de skapas,
flyttas eller storleksändras så att de inte överlappar varandra. Se ”Förhindra
överlappning av skikt” på sidan 419.
• Visa skiktpanel öppnar skiktpanelen. Se ”Skiktpanelen” på sidan 406.
3
Klicka på OK.
Tabellerna konverteras till skikt. Tomma celler konverteras inte till skikt om de
inte har en bakgrundsfärg.
Obs! Sidelement som du har placerat utanför tabeller på sidan placeras också i skikt.
Förhindra överlappning av skikt
Eftersom tabellceller inte kan överlappa varandra går det inte att skapa en tabell
från överlappande skikt. Om du vill konvertera skikten i ett dokument till tabeller
för kompatibilitet med 3.0-webbläsare, använder du alternativet Förhindra
överlappning för att begränsa skiktrörelse och skiktplacering så att skikten inte
överlappar.
Så här förhindrar du skikt från att överlappa:
Välj Ändra > Ordna > Förhindra överlappning av skikt eller markera alternativet
Förhindra överlappning på skiktpanelen.
Använda dynamiska skikt
419
När detta alternativ är aktiverat kan ett skikt inte skapas framför, flyttas eller
storleksändras över eller kapslas i ett befintligt skikt. Om du aktiverar alternativet
efter att ha skapat överlappande skikt drar du det överlappande skiktet för att
flytta bort det från det andra skiktet. Befintliga överlappande skikt på sidan
åtgärdas inte automatiskt när du aktiverar Förhindra överlappning av skikt.
När detta alternativ och Fäst mot-funktionen är aktiverade går det inte att fästa ett
skikt mot stödrastret om det får till följd att ett skikt överlappar ett annat. I stället
fästs skiktet mot kanten på närmsta skikt.
Obs! Med hjälp av vissa åtgärder kan du överlappa skikt även när alternativet Förhindra
överlappning är aktiverat. Om du infogar ett skikt från menyn, skriver tal i
egenskapskontrollen eller flyttar om skikt genom att redigera HTML-källkoden i
kodkontrollen kan du få skikt att överlappa varandra eller kapslas. Om detta inträffar drar du
de överlappande skikten i dokumentfönstret och skiljer dem åt.
Konvertera till 3.0-kompatibilitet
Använd kommandot Konvertera på Arkiv-menyn när du vill skapa en 3.0webbläsarkompatibel version av en sida som använder skikt. I Dreamweaver
skapas då ett separat, konverterat dokument samtidigt som det ursprungliga
dokumentet bevaras.
Generellt bör du endast konvertera ett dokument när du är helt nöjd med
originalfilen, eftersom du annars måste konvertera det varje gång du ändrar
originalfilen.
Så här konverterar du en fil för användning med 3.0-webbläsare:
1
Välj Arkiv > Konvertera > 3.0-webbläsarkompatibel.
2
I dialogrutan som visas väljer du om du vill konvertera skikt till tabell, CSSformat till HTML-kod eller båda.
3
Klicka på OK.
Den konverterade filen öppnas i ett nytt, namnlöst fönster. Om du har markerat
Konvertera skikt till tabell eller Båda ersätts alla skikt med en tabell där den
ursprungliga placeringen bevaras.
Obs! Överlappande skikt kan inte konverteras och inte heller skikt som ligger utanför sidan
till vänster eller upptill.
Om du har markerat Konvertera CSS-format till HTML-kod eller Båda ersätts
CSS-kod där det är möjligt med HTML-teckenformat. Eventuell CSS-kod som
inte kan konverteras till HTML tas bort. Information om vilka format som
konverteras och vilka som tas bort finns i ”Tabell för konvertering av CSS-format
till HTML-kod” på sidan 253.
420
Kapitel 17
Tidslinjekod som animerar skikt tas bort. Tidslinjekod som inte har att göra med
skikt (exempelvis beteenden eller ändringar av bildkällan) körs enligt
inställningarna. Tidslinjen spolas automatiskt tillbaka till bildruta 1. Mer
information om tidslinjer finns i ”Skapa en tidslinjeanimering” på sidan 423.
Animera skikt
Med dynamisk HTML, eller DHTML, kan du ändra HTML-elements formatoch placeringsegenskaper med ett skriptspråk. På tidslinjer används dynamisk
HTML för att ändra egenskaperna för skikt och bilder i ett antal bildrutor över en
viss tid. Använd tidslinjer när du vill skapa animeringar som inte kräver ActiveXkontroller, insticksprogram eller Java-miniprogram (men som kräver JavaScript).
Tidslinjer skapar animering genom att ändra placering, storlek, synlighet och
staplingsordning för ett skikt över en viss tid. Du kan också använda tidslinjer för
andra åtgärder som du vill ska inträffa efter att en sida har lästs in. Tidslinjer kan
exempelvis ändra källfilen för en bildkod så att olika bilder visas under en viss tid
på sidan. Skiktfunktionerna för tidslinjer fungerar bara i 4.0-webbläsare eller
senare.
Om du vill granska JavaScript-koden som skapas av en tidslinje öppnar du
kodkontrollen. Tidslinjekoden finns i funktionen MM_initTimelines, inuti en
SCRIPT-kod i dokumentets HEAD-del.
När du redigerar HTML-koden för ett dokument som innehåller tidslinjer måste
du vara försiktig så att du inte flyttar, byter namn på eller tar bort något som en
tidslinje hänvisar till.
Använda dynamiska skikt
421
Tidslinjepanelen
Tidslinjepanelen motsvarar egenskaperna för skikt och bilder över tid. Välj
Fönster > Tidslinjer när du vill öppna tidslinjepanelen.
Om du högerklickar (Windows) eller Kontroll-klickar (Macintosh) på
tidslinjepanelen öppnas en snabbmeny med samtliga relevanta kommandon.
Listruta för tidslinjer
Uppspelningshuvud
Bildnummer
Beteendekanal
Huvudbildrutor
Animeringskanaler
Animeringsfält
Uppspelningshuvud visar
vilken bildruta på tidslinjen som för tillfället visas på
sidan.
Listruta för tidslinjer anger
vilken av dokumentets tidslinjer som för tillfället visas
på tidslinjepanelen.
Animeringskanaler visar
fält för animering av skikt och bilder.
Animeringsfält visar
varaktigheten för varje objekts animering. En enskild rad kan
innehålla flera fält som motsvarar olika objekt. Olika fält kan inte styra samma
objekt i samma bildruta.
Huvudbildrutor är
de bildrutor i ett fält där du har angett egenskaper (exempelvis
placering) för objektet. Dreamweaver beräknar mellanliggande värden för
bildrutor mellan huvudbildrutorna. Små cirklar motsvarar huvudbildrutor.
Beteendekanal är
tidslinjen.
422
Kapitel 17
kanalen för beteenden som ska köras vid en viss bildruta på
Bildnummer anger
den fortlöpande numreringen av bildrutor. Numret mellan
knapparna Bakåt och Spela upp är den aktuella bildrutans nummer. Du styr
animeringens varaktighet genom att ange det totala antalet bildrutor och antalet
bildrutor per sekund (bps). Standardinställningen på 15 bildrutor per sekund
passar de flesta webbläsare som körs i vanliga Windows- och Macintosh-system.
Det är inte säkert att högre hastigheter ger bättre prestanda. Webbläsare spelar
alltid upp alla bildrutor i en animering, även om de inte kan upprätthålla den
angivna bildhastigheten på användarens dator. Bildhastigheten ignoreras om den
är för hög för webbläsarens kapacitet.
Uppspelningsalternativ
Följande alternativ har du tillgång till när du vill visa animeringen:
Spola tillbaka flyttar
uppspelningen till den första bildrutan på tidslinjen.
Bakåt flyttar
uppspelningen en bildruta åt vänster. Klicka på Bakåt och håll ned
musknappen om du vill spela upp tidslinjen baklänges.
Spela upp flyttar uppspelningen en ruta åt höger. Klicka på Spela upp och håll ned
musknappen om du vill spela upp tidslinjen oavbrutet.
Autospela anger
att en tidslinje automatiskt ska spelas upp när den aktuella sidan
läses in i en webbläsare. Detta alternativ kopplar ett beteende till sidans BODY-kod
som kör åtgärden Spela upp tidslinje när sidan läses in.
Slinga anger
att den aktuella tidslinjen ska köras oavbrutet när sidan är öppen i en
webbläsare. Slinga infogar beteendet Gå till bildruta på tidslinje i beteendekanalen
efter den sista bildrutan i animeringen. Dubbelklicka på markören i denna
bildruta om du vill redigera parametrarna för beteendet och ändra antalet slingor.
Skapa en tidslinjeanimering
Tidslinjer skapar animering genom att ändra position, storlek, synlighet och
staplingsordning för skikt. På tidslinjer kan du också ändra bilders källfiler och på
så sätt skapa bildspel.
Det är bara skikt som kan flyttas på tidslinjer. Om du vill att bilder eller text ska
animeras skapar du ett skikt med hjälp av ikonen Rita skikt på objektpanelen och
infogar sedan bilder, text eller annat innehåll i skiktet. Se ”Skapa skikt på sidan” på
sidan 405.
Använda dynamiska skikt
423
Så här skapar du en tidslinjeanimering:
1
Om du vill animera ett skikt flyttar du skiktet till det ställe där animeringen ska
börja.
2
Välj Fönster > Tidslinjer.
3
Markera skiktet du vill animera.
Kontrollera att du har markerat rätt element. Klicka på skiktmarkören,
skikthandtaget eller använd skiktpanelen när du vill markera ett skikt. Se även
”Hantera skikt” på sidan 408. När ett skikt är markerat visas handtag runt om,
som på följande bild.
Klicka på skiktmarkören så
att skiktet markeras
Ikonen Rita
skikt
Markerat skikt med bild
När du klickar i själva skiktet placeras en blinkande insättningspunkt inuti
skiktet, men skiktet markeras inte.
4
Välj Ändra > Tidslinje > Lägg till objekt på tidslinje eller dra helt enkelt det
markerade objektet till tidslinjepanelen.
Ett fält visas i tidslinjens första kanal. Skiktets namn visas i fältet.
424
Kapitel 17
5
Klicka på huvudbildrutemarkören i slutet av fältet.
6
Flytta skiktet till det ställe på sidan där animeringen ska sluta.
Animeringsbanan visas med en linje i dokumentfönstret.
7
Om du vill att skiktet ska röra sig i en kurva markerar du dess animeringsfält
och Ctrl-klickar (Windows) eller Kommando-klickar (Macintosh) på en
bildruta i mitten av fältet för att lägga till en huvudbildruta vid denna bildruta.
Du kan också klicka på en bildruta i mitten av animeringsfältet och välja Lägg
till huvudbildruta på snabbmenyn.
Upprepa detta steg om du vill ange fler huvudbildrutor.
8
Håll ned knappen Spela upp om du vill förhandsgranska animeringen på sidan.
Upprepa proceduren om du vill lägga till fler skikt och bilder på tidslinjen och
skapa en mer komplex animering.
Skapa en tidslinje genom att dra en bana
Om du vill skapa en animering med en komplex bana, kan det vara mer effektivt
att spela in banan när du drar skiktet i stället för att skapa enskilda bildrutor.
Så här skapar du en tidslinje genom att dra en bana:
1
Markera ett skikt.
2
Flytta skiktet till det ställe där animeringen ska börja.
Kontrollera att du har markerat rätt element. Klicka på skiktmarkören,
skikthandtaget eller använd skiktpanelen när du vill markera ett skikt. Se även
”Hantera skikt” på sidan 408.
3
Välj Ändra > Tidslinje > Spela in skiktväg.
4
Skapa en bana genom att dra skiktet över sidan.
5
Släpp upp musknappen där animeringen ska sluta.
Ett animeringsfält läggs till på tidslinjen med lämpligt antal huvudbildrutor.
6
Klicka på knappen Spola tillbaka på tidslinjepanelen. Förhandsgranska sedan
animeringen genom att hålla ned knappen Spela upp.
Använda dynamiska skikt
425
Ändra tidslinjer
När du har definierat en tidslinjes grundläggande komponenter kan du göra
ändringar som att lägga till och ta bort bildrutor, ändra starttid för
animeringen m.m.
Gör något av följande när du vill ändra en tidslinje:
• Om du vill att det ska längre tid att spela upp animeringen drar du den sista
bildrutemarkören åt höger. Alla huvudbildrutor i animeringen förskjuts så att
deras relativa positioner förblir konstanta. Om du vill förhindra att de andra
huvudbildrutorna flyttas trycker du på Alt (Windows) eller Alternativ
(Macintosh) samtidigt som du drar den sista bildrutemarkören.
• Om du vill att skiktet ska nå huvudbildrutans position tidigare eller senare
flyttar du huvudbildrutemarkören åt vänster eller höger i fältet.
• Om du vill ändra starttid för en animering markerar du ett eller alla fält som är
associerade med animeringen (håll ned Skift om du vill markera mer än ett fält
i taget) och dra åt vänster eller höger.
• Om du vill ändra placeringen av en hel animeringsbana markerar du hela fältet
och drar sedan objektet på sidan. Alla huvudbildrutors placering justeras. När
du gör en ändring med ett helt fält markerat så ändras alla huvudbildrutor.
• När du vill lägga till eller ta bort bildrutor på tidslinjen väljer du Ändra >
Tidslinje > Lägg till bildruta respektive Ta bort bildruta.
• Om du vill att tidslinjen ska spelas upp automatiskt när sidan öppnas i en
webbläsare markerar du Autospela. Denna funktion kopplar ett beteende till
sidan som kör åtgärden Spela upp tidslinje när sidan läses in.
• Om du vill att tidslinjen ska gå i en oavbruten slinga markerar du Slinga. Då
infogas åtgärden Gå till bildruta på tidslinje i beteendekanalen efter den sista
rutan i animeringen. Du kan redigera parametrarna för detta beteende om du
vill definiera antalet slingor.
426
Kapitel 17
Ändra bild- och skiktegenskaper med tidslinjer
Förutom att flytta skikt med tidslinjer kan du även ändra en bilds källfil och ett
skikts synlighet, storlek och staplingsordning.
Så här ändrar du bild- och skiktegenskaper med en tidslinje:
1
Gör något av följande på tidslinjepanelen:
• Markera en befintlig huvudbildruta i fältet som styr objektet du vill ändra.
(Start- och slutbildrutorna är alltid huvudbildrutor.)
• Om du vill skapa en ny huvudbildruta klickar du på en bildruta i mitten av
animeringsfältet och väljer Ändra > Tidslinje > Lägg till huvudbildruta. Du kan
också Ctrl-klicka (Windows) eller Kommando-klicka (Macintosh) på en
bildruta i animeringsfältet.
2
Definiera nya egenskaper för objektet genom att välja något av följande
alternativ:
• Om du vill ändra en bilds källfil klickar du på mappikonen bredvid fältet Källa
i egenskapskontrollen för att bläddra till en ny bild och välja den.
• Om du vill ändra synligheten för ett skikt väljer du inherit, visible eller hidden
i listrutan Synlig i egenskapsfältet. Du kan också använda ögonikonerna på
skiktpanelen. Se ”Ändra skiktens synlighet” på sidan 417.
• Om du vill ändra storleken på ett skikt drar du skiktets storlekshandtag eller
skriver nya värden i fälten Bredd och Höjd i egenskapskontrollen. Internet
Explorer 4.0 och senare är för närvarande de enda webbläsarna som dynamiskt
kan ändra storlek på ett skikt.
• Om du vill ändra ett skikts staplingsordning anger du ett nytt värde i fältet ZIndex eller använder skiktpanelen. Se ”Ändra staplingsordning för skikt” på
sidan 416.
3
Håll ned knappen Spela upp när du vill visa animeringen.
Det markerade skiktet är alltid synligt och överst i staplingsordningen.
Använda dynamiska skikt
427
Använda flera tidslinjer
I stället för att försöka styra allt som händer på en sida med en tidslinje kan du på
ett lättare sätt arbeta med separata tidslinjer som styr olika delar av sidan. En sida
kan exempelvis innehålla interaktiva element som var för sig utlöser olika
tidslinjer.
Använd följande alternativ när du vill hantera flera tidslinjer:
• Om du vill skapa en ny tidslinje väljer du Ändra > Tidslinje > Lägg till tidslinje.
• Om du vill ta bort den markerade tidslinjen väljer du Ändra > Tidslinje > Ta
bort tidslinje. Då tas alla animeringar på tidslinjen bort för gott.
• Om du vill ändra namn på den markerade tidslinjen väljer du Ändra > Tidslinje
> Ändra namn på tidslinje. Du kan också ange ett nytt namn i listrutan för
tidslinjer på tidslinjepanelen.
• Om du vill visa en annan tidslinje på tidslinjepanelen väljer du den i listrutan
för tidslinjer.
Kopiera och klistra in animeringar
När du är nöjd med animeringssekvensen kan du kopiera och klistra in den i en
annan del av den aktuella tidslinjen, på en annan tidslinje i samma dokument eller
på en tidslinje i ett annat dokument. Du kan också kopiera och klistra in flera
sekvenser samtidigt.
Så här klipper du ut eller kopierar samt klistrar in animeringssekvenser:
1
Klicka i ett animeringsfält så att en sekvens markeras. Skift-klicka om du vill
markera flera sekvenser. Tryck på Ctrl+A (Windows) eller Kommando+A
(Macintosh) om du vill markera samtliga sekvenser.
2
Kopiera eller klipp ut markeringen.
3
Gör något av följande:
• Flytta uppspelningen till ett annat ställe på den aktuella tidslinjen.
• Välj en annan tidslinje i listrutan på tidslinjepanelen.
• Öppna ett annat dokument, eller skapa ett nytt, och klicka sedan på
tidslinjepanelen.
4
Klistra in markeringen på tidslinjen.
Animeringsfält för samma objekt kan inte överlappa eftersom ett skikt inte kan
finnas på två ställen samtidigt (inte heller kan en bild ha två olika källor
samtidigt). Om animeringsfältet som du klistrar in överlappar ett annat
animeringsfält för samma objekt, flyttas markeringen automatiskt till den första
bildrutan som inte överlappar.
428
Kapitel 17
Det finns två principer som du ska tänka på när du klistrar in animeringssekvenser
i ett annat dokument
• Om du kopierar en animeringssekvens för ett skikt och det nya dokumentet
innehåller ett skikt med samma namn, används animeringsegenskaperna på det
befintliga skiktet i det nya dokumentet.
• Om du kopierar en animeringssekvens för ett skikt och det nya dokumentet
inte innehåller ett skikt med samma namn, klistras skiktet och dess innehåll in
från det ursprungliga dokumentet tillsammans med animeringssekvensen. Om
du vill använda den inklistrade animeringssekvensen på ett annat skikt i det nya
dokumentet väljer du Byt objekt på snabbmenyn och väljer namnet på det
andra skiktet i listrutan. Ta bort det inklistrade skiktet om du vill. Se ”Använda
en animeringssekvens på ett annat objekt” på sidan 429.
Använda en animeringssekvens på ett annat objekt
Du kan spara tid genom att skapa en animeringssekvens som du sedan använder
på vart och ett av de återstående skikten i dokumentet.
Så här använder du en befintlig animeringssekvens på andra objekt:
1
Markera animeringssekvensen på tidslinjepanelen och kopiera den.
2
Klicka på en bildruta på tidslinjepanelen och klistra in sekvensen vid denna
bildruta.
3
Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på den inklistrade
sekvensen och välj Byt objekt på snabbmenyn.
4
I dialogrutan som visas markerar du ett annat objekt i listrutan och klickar på
OK.
5
Upprepa steg 2 till och med 4 för andra objekt som du vill ska följa samma
animeringssekvens.
Du kan också ändra dig angående vilket skikt som ska animeras efter att du har
skapat en animeringssekvens. Följ bara steg 3 och 4 ovan (du behöver inte kopiera
eller klistra in).
Använda dynamiska skikt
429
Animeringstips för tidslinjer
Följande förslag kan förbättra utförandet av dina animeringar och göra det lättare
att skapa animeringar:
• Visa och dölj skikt i stället för att ändra källfilen för animeringar med flera
bilder. När du växlar en bilds källfil kan det dra ned hastigheten på
animeringen, eftersom den nya bilden måste laddas ned. Det uppstår inga
märkbara pauser och inga bilder saknas om alla bilder laddas ned samtidigt i
dolda skikt innan animeringen körs.
• Förläng animeringsfälten när du vill skapa en jämnare rörelse. Om animeringen
ser hackig ut och bilderna hoppar mellan positionerna, drar du den sista
bildrutan i skiktets animeringsfält för att förlänga rörelsen över fler bildrutor.
Om du gör animeringsfälten längre skapas fler bildrutor mellan rörelsens startoch slutpunkt och det får även objektet att röra sig långsammare. Pröva med att
öka antalet bildrutor per sekund (bps) för att öka hastigheten, men kom ihåg
att de flesta webbläsare som körs på vanliga system inte kan animera snabbare
än 15 bps. Testa animeringen på olika system med olika webbläsare så att du får
fram de bästa inställningarna.
• Animera inte stora bitmappar. Om du animerar stora bilder får du långsamma
animeringar. Skapa i stället sammansatta bilder och flytta mindre delar av
bilden. Visa exempelvis en bil som rör sig genom att bara animera hjulen.
• Skapa enkla animeringar. Skapa inte animeringar som kräver mer än den
aktuella webbläsaren klarar. Webbläsare spelar alltid upp alla bildrutor i en
tidslinjeanimering, även när system- eller Internetprestanda försämras.
Beteendeåtgärder som styr skikt och
tidslinjer
Koppla de beteendeåtgärder som beskrivs nedan till en länk, knapp eller något
annat objekt när du vill styra tidslinjer och skikt. Du kan skapa intressanta effekter
genom att placera beteenden som innehåller dessa åtgärder i beteendekanalen. Du
kan exempelvis göra så att en tidslinje stoppar sig själv. Mer information finns i
”Koppla ett beteende till en tidslinje” på sidan 440 och ”Använda beteenden” på
sidan 433.
Dra skikt gör så att användaren kan dra ett skikt. Använd denna åtgärd när du vill
skapa pussel, skjutreglage och andra flyttbara element i användargränssnittet. Se
”Dra skikt” på sidan 449.
visar, döljer eller återställer standardsynligheten för ett eller flera
skikt. Denna åtgärd är praktisk när du vill att information ska visas när
användaren interagerar med sidan. Se ”Visa-dölj skikt” på sidan 463.
Visa-dölj skikt
430
Kapitel 17
Spela upp tidslinje och Stoppa tidslinje gör
så att användarna kan starta respektive
stoppa en tidslinje genom att klicka på en länk eller knapp. Dessa åtgärder kan
också starta och stoppa en tidslinje automatiskt när användaren för muspekaren
över en länk, bild eller något annat objekt. Se ”Spela upp tidslinje och Stoppa
tidslinje” på sidan 467.
Gå till bildruta på tidslinje gör
att tidslinjen hoppar till en viss bildruta. Kryssrutan
Slinga på tidslinjepanelen lägger till åtgärden Gå till bildruta på tidslinje efter den
sista rutan i animeringen, vilket gör att animeringen går tillbaka till bildruta 1 och
börjar om från början. Se ”Gå till bildruta på tidslinje” på sidan 466.
ersätter innehållet och formateringen i ett befintligt skikt på
en sida med det innehåll som du anger. Innehållet kan vara vilken giltig HTMLkod som helst. Se ”Ange texten i skiktet” på sidan 460.
Ange texten i skiktet
Använda dynamiska skikt
431
432
Kapitel 17
18
KAPITEL 18
Använda beteenden
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Beteenden är en funktion som gör att besökarna kan interagera med en webbsida
och på så sätt ändra den på olika sätt eller få vissa uppgifter att utföras. Ett
beteende är en kombination av en händelse och en åtgärd som utlöses av denna
händelse. På beteendepanelen lägger du till ett beteende på en sida genom att först
ange en åtgärd och sedan händelsen som ska utlösa den.
Händelser är i grund och botten meddelanden som genereras i webbläsarna och
som anger att besökarna på din sida har gjort någonting. När en besökare
exempelvis för pekaren över en länk genererar webbläsaren en onMouseOverhändelse för denna länk. Sedan kontrollerar webbläsaren om det finns någon
JavaScript-kod som ska anropas när detta inträffar. Olika händelser finns
definierade för olika sidelement. Exempelvis är onMouseOver och onClick händelser
som är associerade med länkar i de flesta webbläsare, medan onLoad är en händelse
som är associerad med bilder och med BODY-delen i dokumentet.
En åtgärd består av redan skriven JavaScript-kod som utför en viss uppgift,
exempelvis öppnar ett webbläsarfönster, visar eller döljer ett skikt, spelar upp ett
ljud eller stoppar en Shockwave-film. Åtgärderna som ingår i Dreamweaver är
noggrant utvecklade av Dreamweaver-tekniker för att ge största möjliga
kompatibilitet mellan olika webbläsare.
Varje gång som den angivna händelsen inträffar för ett sidelement, efter det att du
har kopplat ett beteende till detta element, anropar webbläsaren den åtgärd
(JavaScript-kod) som du har associerat med denna händelse. (Vilka händelser du
kan använda för att utlösa en viss åtgärd varierar mellan olika webbläsare.) Om du
exempelvis kopplar åtgärden Popup-meddelande till en länk och anger att den ska
utlösas av händelsen onMouseOver visas ditt meddelande i en dialogruta varje gång
som någon för muspekaren över denna länk i webbläsaren.
En enstaka händelse kan utlösa flera olika åtgärder och du kan ange i vilken
ordning åtgärderna ska inträffa.
433
Macromedia Dreamweaver innehåller cirka 25 olika beteendeåtgärder. Du hittar
ännu fler åtgärder på webbplatsen Macromedia Exchange och på olika
tredjepartsutvecklares webbplatser. (Se ”Ladda ned och installera beteenden från
tredjepart” på sidan 441.) Du kan skriva egna beteendeåtgärder om du är kunnig i
JavaScript. Mer information om hur du skriver åtgärder finns i Utöka
Dreamweaver.
Obs! Termerna beteende och åtgärd är Dreamweaver-termer, inte HTML-termer. För
webbläsarnas del skiljer sig inte en åtgärd från annan JavaScript-kod.
Beteendepanelen
Använd beteendepanelen när du vill koppla beteenden till sidelement (till koder
för att vara mer exakt) och ändra parametrar för redan kopplade beteenden.
Välj Fönster > Beteenden när du vill öppna beteendepanelen.
Den kod som är markerad i dokumentfönstret visas i beteendepanelens namnlist.
Beteenden som redan har kopplats till det markerade sidelementet visas i
beteendelistan (panelens huvudområde), i bokstavsordning efter händelse. Om
det finns flera åtgärder för samma händelse visas åtgärderna i den ordning de ska
köras. Om det inte visas några beteenden i beteendelistan har inte några
beteenden kopplats till det markerade elementet.
Mer information om alternativen på beteendepanelen finns i Dreamweavers hjälp.
Händelser
I följande lista beskrivs de händelser som du kan associera med åtgärderna på
popup-menyn Åtgärder (+) på beteendepanelen. När en besökare interagerar med
webbsidan (exempelvis genom att klicka på en bild) genereras händelser i
webbläsaren. Dessa händelser kan användas för att anropa JavaScript-funktioner
som får en åtgärd att inträffa. (Händelser kan också genereras utan att användaren
gör något, exempelvis när du ställer in att en sida ska uppdateras automatiskt var
tionde sekund.) Dreamweaver innehåller många vanliga åtgärder som du kan
utlösa med dessa händelser.
I listan anges också i vilka webbläsare respektive händelse kan genereras. NS3 står
för Netscape Navigator 3.0. NS4 står för Netscape Navigator 4.0. IE3 står för
Internet Explorer 3.0. IE4 står för Internet Explorer 4.0. Mer information om
händelser i Internet Explorer finns på Microsofts webbsida om dynamiska
HTML-händelser (som finns angiven i ”HTML- och webbteknikresurser” på
sidan 24).
434
Kapitel 18
Lägg märke till att de flesta händelser bara kan användas med vissa sidelement.
När du vill ta reda på vilka händelser som en bestämd webbläsare stöder för ett
bestämt sidelement infogar du sidelementet i dokumentet och kopplar ett
beteende till det. Sedan ser du efter vilka händelser som anges på popup-menyn
Händelser på beteendepanelen. Om du vill ha en mycket detaljerad och avancerad
inblick i exakt vilka koder som kan användas för en bestämd händelse i en
bestämd webbläsare, letar du reda på händelsen i en av filerna i mappen
Dreamweaver/Configuration/Behaviors/Events.
onAbort (NS3,
NS4, IE4, IE5) genereras när besökaren stoppar webbläsaren från
att läsa in en bild fullständigt (exempelvis när besökaren klickar på stoppknappen
i webbläsaren samtidigt som en bild läses in).
onAfterUpdate (IE4, IE5) genereras när ett bundet dataelement på sidan har slutat
uppdatera datakällan.
onBeforeUpdate (IE4,
IE5) genereras när ett bundet dataelement på sidan har
ändrats och är på väg att avmarkeras (och därför är på väg att uppdatera
datakällan).
onBlur (NS3, NS4, IE3, IE4, IE5) är motsatsen till onFocus. Händelsen onBlur
genereras när besökaren inte längre interagerar med det angivna elementet. När en
besökare klickar utanför ett textfält efter att först ha klickat i det genereras
exempelvis en onBlur-händelse för textfältet i webbläsaren.
onBounce (IE4,
IE5) genereras när innehållet i ett rullande text-element har nått
gränsen för den rullande texten.
onChange (NS3,
NS4, IE3, IE4, IE5) genereras när besökaren ändrar ett värde på
sidan, exempelvis när besökaren väljer en post på en meny eller ändrar värdet i ett
textfält och sedan klickar någon annanstans på sidan.
onClick (NS3, NS4, IE3, IE4, IE5) genereras när besökaren klickar på det angivna
elementet, exempelvis en länk, knapp eller klickbar bild. (Klickningen är inte
slutförd förrän besökaren släpper upp musknappen. Använd onMouseDown om
du vill att något ska hända så fort knappen trycks ned.)
onDblClick (NS4,
IE4, IE5) genereras när besökaren dubbelklickar på det angivna
elementet. (Dubbelklicka innebär att användaren snabbt trycker på och släpper
upp musknappen två gånger samtidigt som hon/han pekar på elementet.)
onError (NS3,
NS4, IE4, IE5) genereras när ett webbläsarfel inträffar samtidigt
som en sida eller bild läses in.
onFinish (IE4,
IE5) genereras när innehållet i ett rullande text-element har nått
slutet på en slinga.
onFocus (NS3, NS4, IE3, IE4, IE5) genereras när besökaren interagerar med det
angivna elementet. En onFocus-händelse genereras exempelvis när besökaren
klickar i ett textfält i ett formulär.
onHelp (IE4
IE5) genereras när besökaren klickar på hjälpknappen i webbläsaren
eller väljer Hjälp på en webbläsarmeny.
Använda beteenden
435
onKeyDown (NS4,
IE4, IE5) genereras så fort besökaren trycker på en tangent.
(Besökaren behöver inte släppa upp tangenten för att denna händelse ska skapas.)
Webbläsaren kan inte känna av vilken tangent som trycks ned.
onKeyPress (NS4,
IE4, IE5) genereras när besökaren trycker på och släpper upp
en tangent. Denna händelse är ungefär som en kombination av händelserna
onKeyDown och onKeyUp. Webbläsaren kan inte känna av vilken tangent som trycks
ned.
onKeyUp (NS4, IE4, IE5) genereras när besökaren släpper upp en tangent efter att
ha tryckt på den. Webbläsaren kan inte känna av vilken tangent som trycks ned.
onLoad (NS3,
NS4, IE3, IE4, IE5) genereras när en bild eller sida är färdiginläst.
onMouseDown (NS4, IE4, IE5) genereras när besökaren trycker på musknappen.
(Besökaren behöver inte släppa upp musknappen för att denna händelse ska
skapas.)
onMouseMove (IE3,
IE4, IE5) genereras när besökaren flyttar musen samtidigt
som hon/han pekar på det angivna elementet. (D.v.s. att pekaren stannar kvar
inom elementets gränser.)
onMouseOut (NS3, NS4, IE4, IE5) genereras när pekaren flyttas bort från det
angivna elementet. (Det angivna element är vanligtvis en bild eller en länk
kopplad till en bild.) Denna händelse används ofta tillsammans med beteendet
Växla bildåterställning för att återställa en bild till ursprungsläget när besökaren
inte längre pekar på den.
onMouseOver (NS3,
NS4, IE3, IE4, IE5) genereras första gången som musen
flyttas så att den pekar på det angivna elementet (d.v.s. när pekaren flyttas från att
inte peka på elementet till att peka på det). Det angivna elementet för denna
händelse är vanligtvis en länk.
onMouseUp (NS4,
onMove (NS4)
IE4, IE5) genereras när en nedtryckt musknapp släpps upp.
genereras när ett fönster eller en ram flyttas.
onReadyStateChange (IE4,
IE5) genereras när det angivna elementets läge
ändras. Möjliga elementlägen innefattar ej initierad, laddar och färdigt.
onReset (NS3,
NS4, IE3, IE4, IE5) genereras när ett formulär återställs till
standardvärdena.
onResize (NS4,
IE4, IE5) genereras när besökaren ändrar storlek på
webbläsarfönstret eller en ram.
onRowEnter (IE4,
IE5) genereras när den aktuella postpekaren för den bundna
datakällan har ändrats.
onRowExit (IE4,
IE5) genereras när den aktuella postpekaren för den bundna
datakällan är på väg att ändras.
onScroll (IE4,
436
Kapitel 18
IE5) genereras när besökaren rullar upp eller ned.
onSelect (NS3,
NS4, IE3, IE4, IE5) genereras när besökaren markerar text i ett
textfält.
onStart (IE4,
IE5) genereras när innehållet i ett rullande text-element påbörjar en
slinga.
onSubmit (NS3,
NS4, IE3, IE4, IE5) genereras när besökaren skickar ett
formulär.
onUnload (NS3,
NS4, IE3, IE4, IE5) genereras när besökaren lämnar sidan.
Koppla ett beteende
Du kan koppla beteenden till hela dokumentet (d.v.s. till BODY-koden) eller till
länkar, bilder, formulärelement eller flera andra typer av HTML-element. Vilka
händelser som stöds för ett bestämt element beror på vilken målwebbläsare du
väljer. Internet Explorer 4.0 har exempelvis ett större utbud av händelser för varje
enskilt element än Netscape Navigator 4.0 och alla 3.0-webbläsare.
Obs! Du kan inte koppla ett beteende till vanlig text. Information finns i ”Beteenden och
text” på sidan 439.
Du kan ange mer än en åtgärd för varje händelse. Åtgärder inträffar i den ordning
som de visas i kolumnen Åtgärder på beteendepanelen. Information om hur du
ändrar ordning på åtgärderna finns i ”Ändra ett beteende” på sidan 440.
Så här kopplar du ett beteende:
1
Markera ett element på sidan, exempelvis en bild eller en länk.
Om du vill koppla ett beteende till hela sidan klickar du på <body>-koden i
kodväljaren längst ned till vänster i dokumentfönstret.
2
Välj Fönster > Beteenden så att beteendepanelen öppnas.
HTML-koden för det markerade objektet visas i namnlisten på
beteendepanelen.
3
Klicka på plustecknet (+) och välj en åtgärd på popup-menyn Åtgärder.
Åtgärder som är nedtonade kan inte väljas. De kan vara nedtonade därför att
ett nödvändigt objekt inte finns i det aktuella dokumentet. Åtgärden Spela upp
tidslinje är exempelvis nedtonad om dokumentet saknar tidslinjer och åtgärden
Kontrollera Shockwave eller Flash är nedtonad om det inte innehåller några
Shockwave- eller Flash-filmer. Om inga händelser är tillgängliga för det
markerade objektet är alla åtgärder nedtonade.
När du väljer en åtgärd visas en dialogruta med parametrar och instruktioner
för åtgärden.
Använda beteenden
437
4
Ange parametrar för åtgärden och klicka på OK.
Alla åtgärder i Dreamweaver fungerar i webbläsare från och med version 4.0.
Vissa åtgärder fungerar inte i äldre webbläsare. Se ”Använda
beteendeåtgärderna som ingår i Dreamweaver” på sidan 442.
5
Standardhändelsen som utlöser åtgärden visas i kolumnen Händelser. Om detta
inte är den utlösande händelse som du vill använda väljer du en annan på
popup-menyn Händelser. (Du öppnar popup-menyn Händelser genom att
markera en händelse eller åtgärd på beteendepanelen och sedan klicka på den
nedåtriktade svarta pilen som visas mellan händelsenamnet och
åtgärdsnamnet.)
Olika händelser visas på popup-menyn Händelser beroende på vilket objekt
som är markerat och på vilka webbläsare som finns angivna på undermenyn
Visa händelser för. Händelser kan vara nedtonade om de relevanta objekten
ännu inte finns på sidan eller om det markerade objektet inte kan ta emot
händelser. Om de förväntade händelserna inte visas kontrollerar du att du har
markerat rätt objekt eller ändrar målwebbläsarna på undermenyn Visa
händelser för.
Om du kopplar ett beteende till en bild visas en del händelser (exempelvis
onMouseOver) inom parentes. Dessa händelser är bara tillgängliga för länkar. När
du väljer en av dem omsluts bilden av en A-kod som anger en ingenstanslänk.
Ingenstanslänken motsvaras av javascript:; i fältet Länk i
egenskapskontrollen. Du kan ändra länkvärdet om du vill göra den till en riktig
länk till en annan sida, men om du tar bort JavaScript-länken utan att ersätta
den med en annan länk tar du också bort beteendet.
438
Kapitel 18
Beteenden och text
Du kan inte koppla ett beteende till vanlig text. Koder som P och SPAN genererar
inte händelser i webbläsare, så det finns ingen möjlighet att utlösa en åtgärd från
dessa koder.
Du kan däremot koppla ett beteende till en länk. Det enklaste sättet att koppla ett
beteende till text är därför att lägga till en ingenstanslänk (som inte pekar på
någonting) i texten och sedan koppla beteendet till länken. Observera att texten
visas som en länk om du gör detta. (Du kan ändra länkfärgen och ta bort
understrykningen om du inte vill att texten ska se ut som en länk, men då finns
det risk att platsbesökarna inte märker att det finns en anledning att klicka på
texten.)
Så här kopplar du ett beteende till den markerade texten:
1
Skriv javascript:; i fältet Länk i egenskapskontrollen. Se till att du skriver både
kolon och semikolon.
Obs! Om du vill kan du i stället använda tecknet # i fältet Länk. Problemet med att
använda tecknet # är att webbläsaren går till sidans början när en besökare klickar på
länken. Detta händer däremot inte när besökaren klickar på ingenstanslänken som är
angiven i JavaScript, så därför är det i allmänhet bättre att använda JavaScriptalternativet.
2
Behåll texten markerad och öppna beteendepanelen (Fönster > Beteenden).
3
Välj en åtgärd på popup-menyn Åtgärder, ange parametrar för åtgärden och
välj en händelse som ska utlösa åtgärden. Information finns i ”Koppla ett
beteende” på sidan 437.
Så här ändrar du utseende på länkad text:
1
Öppna kodkontrollen (Fönster > Kodkontrollen) eller kodvyn i
dokumentfönstret.
2
Leta reda på länken.
3
Infoga följande attribut i länkens A
color:black".
HREF-kod:
style="text-decoration:none;
Denna attributinställning avaktiverar understrykning och anger svart som
textfärg. (Om den omgivande texten har en annan färg använder du givetvis
denna färg i stället för svart.)
Om du vill ändra utseendet på länkad text överallt på sidan eller på hela
webbplatsen använder du CSS-format för att skapa ett nytt format för länkar.
Information finns i ”Infoga och formatera text” på sidan 227.
Använda beteenden
439
Koppla ett beteende till en tidslinje
Om du vill utlösa ett beteende vid en viss bildruta på en tidslinje (i stället för att
låta besökarens interaktion utlösa det) placerar du beteendet på tidslinjen.
(Information om hur du skapar en tidslinje finns i ”Animera skikt” på sidan 421.)
Du kan exempelvis starta uppspelningen av ett ljud vid bildruta 15 på en tidslinje.
Endast en typ av händelse kan utlösa en åtgärd på en tidslinje: nämligen när
animeringen når ett visst bildnummer (exempelvis en onFrame7-händelse).
Beteendet kan påverka vilket objekt som helst på sidan, inte bara objekt på
tidslinjen. Förhandsgranska tidslinjen i en webbläsare om du vill se hur beteendet
fungerar. Du kan inte förhandsgranska beteenden i Dreamweaver.
Så här placerar du ett beteende på en tidslinje:
1
Klicka i en bildruta i beteendekanalen på tidslinjepanelen.
2
Använd beteendepanelen och välj en åtgärd som ska utföras vid denna bildruta.
Åtgärden visas på beteendepanelen tillsammans med en händelse som anger vid
vilket bildnummer åtgärden ska utlösas. Ett minustecken (–) visas i
beteendekanalen för bildrutan på tidslinjen.
Ändra ett beteende
När du har kopplat ett beteende kan du ändra händelsen som utlöser åtgärden,
lägga till eller ta bort åtgärder och ändra parametrarna för åtgärder.
Så här ändrar du ett beteende:
1
Markera ett objekt som har ett kopplat beteende.
2
Välj Fönster > Beteenden så att beteendepanelen öppnas.
Beteenden visas på panelen i bokstavsordning efter händelse. Om det finns flera
åtgärder för samma händelse visas åtgärderna i den ordning de ska köras.
3
Välj bland följande alternativ:
• Om du vill redigera en åtgärds parametrar dubbelklickar du på
beteendenamnet eller markerar det och trycker på Retur. Ändra sedan
parametrar i dialogrutan och klicka på OK.
• Om du vill ändra ordning på åtgärderna för en viss händelse markerar du
åtgärden och klickar på uppilen eller nedpilen.
• Om du vill ta bort ett beteende markerar du det och klickar på minustecknet (–)
eller trycker på Delete.
440
Kapitel 18
Uppdatera ett beteende
Om dina sidor innehåller beteenden som skapats med Dreamweaver 1 eller 2
uppdateras dessa beteenden inte automatiskt när du öppnar sidorna i den aktuella
versionen av Dreamweaver. När du uppdaterar en förekomst av ett beteende på en
sida (genom att följa proceduren nedan) uppdateras dock även alla andra
förekomster av detta beteende på sidan. Beteenden som har skapats i Dreamweaver
3 fungerar i Dreamweaver 4 utan att du behöver göra några ändringar.
Så här uppdaterar du ett beteende på en sida:
1
Markera ett element som beteendet är kopplat till.
2
Öppna beteendepanelen.
3
Dubbelklicka på beteendet.
4
Klicka på OK i beteendets dialogruta.
Alla förekomster av beteendet på den aktuella sidan uppdateras.
Skapa nya åtgärder
Åtgärder består av JavaScript- och HTML-kod. Om du är kunnig i JavaScript kan
du skriva nya åtgärder och lägga till dem på popup-menyn Åtgärder på
beteendepanelen. Mer information finns i Utöka Dreamweaver.
Ladda ned och installera beteenden från
tredjepart
En av de mest användbara funktionerna i Dreamweaver är dess flexibilitet.
Användare som känner sig hemma i JavaScript kan skriva JavaScript-kod som
utökar Dreamweavers möjligheter. Många av dessa användare har valt att dela
med sig av sina tillägg till programmet genom att skicka dem till webbplatsen
Macromedia Exchange för Dreamweaver.
Så här laddar du ned och installerar nya beteenden från webbplatsen Exchange:
1
Öppna beteendepanelen och välj Hämta fler beteenden på popup-menyn
Åtgärder (+).
Din primära webbläsare öppnas och platsen Exchange visas. (Du måste vara
ansluten till Internet för att kunna ladda ned beteenden.)
2
Bläddra eller sök efter paket.
3
Ladda ned och installera önskat tilläggspaket.
Information finns i ”Lägga till tillägg i Dreamweaver” på sidan 89.
Använda beteenden
441
Använda beteendeåtgärderna som ingår i
Dreamweaver
De beteendeåtgärder som ingår i Dreamweaver har skrivits för att fungera i alla
versioner av Netscape Navigator 4 och i Internet Explorer 4.0 och senare.
(Netscape Navigator 5 släpptes aldrig externt. Netscape Navigator 6 hade ännu
inte lanserats när detta skrevs.)
Obs! Dreamweaver-åtgärderna har noga utarbetats för att fungera i så många webbläsare
som möjligt. Om du tar bort kod från en Dreamweaver-åtgärd för hand, eller ersätter den
med din egen kod, kan kompatibiliteten med flera webbläsare gå förlorad.
Även om Dreamweaver-åtgärderna har skrivits för att vara kompatibla med så
många webbläsare som möjligt finns det en del åtgärder som inte fungerar i äldre
webbläsare. Det är också så att en del webbläsare inte stöder JavaScript över huvud
taget och att många Internetanvändare har JavaScript avaktiverat i sina
webbläsare. Du får bäst resultat på olika plattformar genom att ange olika
gränssnitt inom NOSCRIPT-koder så att besökare som saknar JavaScript ändå kan
visa din webbplats.
I tabellen nedan finns information om hur åtgärder fungerar i specifika webbläsare
före 4.0-versionerna av Netscape Navigator och Internet Explorer. Om du vill veta
mer om vad åtgärderna gör och hur du anger alternativ för dem tittar du i
avsnitten efter tabellen.
Macintosh
Åtgärd
442
Kapitel 18
Netscape
Navigator 3.0
Windows
Internet
Explorer 3.0x
Netscape
Navigator 3.0
Internet
Explorer 3.01
Anropa JavaScript OK
Misslyckas utan
fel
OK
OK
Ändra egenskap
OK
Misslyckas utan
fel
OK
OK
Kontrollera
webbläsare
OK
Misslyckas utan
fel
OK
OK
Kontrollera instick
OK
Misslyckas utan
fel
OK
OK
Kontrollera
Shockwave eller
Flash
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Dra skikt
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Gå till URL
OK
Misslyckas utan
fel
OK
OK
Hoppmeny
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Macintosh
Windows
Åtgärd
Netscape
Navigator 3.0
Internet
Explorer 3.0x
Netscape
Navigator 3.0
Internet
Explorer 3.01
Hoppmeny Gå
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Öppna
webbläsarfönster
OK
Misslyckas utan
fel
OK
OK
Spela upp ljud
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Popupmeddelande
OK
Misslyckas utan
fel
OK
OK
Förhandsladda
bilder
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Ställ in
navigationsfältets
bild
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Ange texten i
ramen
OK
Misslyckas utan
fel
OK
OK
Ange texten i
skiktet
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Ange texten i
statusfältet
OK
Misslyckas utan
fel
OK
OK
Ange texten i
textfältet
OK
Misslyckas utan
fel
OK
OK
Visa-dölj skikt
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Misslyckas utan
fel
Växla bild
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Växla
bildåterställning
OK
Misslyckas utan
fel
OK
Misslyckas utan
fel
Gå till bildruta på
tidslinje
Misslyckas utan
fel
Animering av
bildkällor och
beteendeanrop
fungerar, men
skiktanimering
misslyckas utan
fel
Misslyckas utan
fel
Spela upp tidslinje
och Stoppa
tidslinje
Animering av
bildkällor och
beteendeanrop
fungerar, men
skiktanimering
misslyckas utan
fel
Validera formulär
OK
Misslyckas utan
fel
OK
OK
Använda beteenden
443
Anropa JavaScript
Med åtgärden Anropa JavaScript kan du använda beteendepanelen för att ange att
en egen funktion eller rad med JavaScript-kod ska köras när en händelse inträffar.
(Du kan skriva JavaScript-koden själv eller använda kod från olika fritt tillgängliga
JavaScript-bibliotek på webben.)
Så här använder du åtgärden Anropa JavaScript:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Anropa JavaScript på popup-menyn
Åtgärder.
3
Skriv exakt vilken JavaScript-kod som ska köras eller skriv namnet på en
funktion.
Om du exempelvis vill skapa en Bakåt-knapp kan du skriva
if (history.length > 0){history.back()}. Om du har bäddat in koden i en
funktion skriver du bara funktionsnamnet (exempelvis goBack()).
4
Klicka på OK.
5
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Ändra egenskap
Använd åtgärden Ändra egenskap när du vill ändra värdet på en av ett objekts
egenskaper (exempelvis bakgrundsfärgen för ett skikt eller åtgärden för ett
formulär). Vilka egenskaper du kan påverka beror på webbläsaren. Det finns
många fler egenskaper som kan ändras med detta beteende i Microsoft Internet
Explorer (IE) 4.0 än i IE 3.0 och Netscape Navigator 3.0 eller 4.0. Du kan
exempelvis göra inställningar så att ett skikts bakgrundsfärg blir dynamisk.
Obs! Använd endast denna åtgärd om du är mycket van vid HTML-kod och JavaScript.
Så här använder du åtgärden Ändra egenskap:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Ändra egenskap på popup-menyn Åtgärder.
3
I listrutan Objekttyp markerar du den objekttyp vars egenskap du vill ändra.
I listrutan Namngivet objekt visas nu alla namngivna objekt av den typ som du
markerade.
4
444
Kapitel 18
Markera ett objekt i listrutan Namngivet objekt.
5
Markera en egenskap i listrutan Markera eller skriv egenskapens namn i
textfältet Ange.
Om du vill visa vilka egenskaper som kan ändras i varje enskild webbläsare
väljer du olika webbläsarversioner i listrutan för webbläsare. Om du skriver ett
egenskapsnamn måste du ange exakt rätt JavaScript-namn på egenskapen.
(Tänk på att JavaScript-egenskaper är skiftlägeskänsliga.)
6
Ange ett nytt värde för egenskapen i fältet Nytt värde och klicka på OK.
7
Kontrollera att standardhändelsen är den du vill använda. (När händelsen
inträffar körs åtgärden och egenskapen ändras.)
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Kontrollera webbläsare
Använd åtgärden Kontrollera webbläsare när du vill dirigera besökarna till olika
sidor, beroende på vilken webbläsare (typ och version) de har. Du kanske
exempelvis vill att besökarna ska komma till en sida om de har Netscape Navigator
4.0 eller senare, till en annan sida om de har Microsoft Internet Explorer 4.0 eller
senare och stanna kvar på den aktuella sidan om de använder någon annan
webbläsare.
Det är praktiskt att koppla detta beteende till BODY-koden på en sida som är
kompatibel med så gott som alla webbläsare (och som inte använder någon annan
JavaScript-kod). På så sätt kan de besökare som har JavaScript avaktiverat ändå se
något när de kommer till sidan.
Ett annat alternativ är att koppla detta beteende till en ingenstanslänk (exempelvis
<a href="javascript:;">) och låta åtgärden bestämma till vilken sida länken går,
baserat på vilken typ och version av webbläsare besökaren har.
Så här använder du åtgärden Kontrollera webbläsare:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Kontrollera webbläsare på popup-menyn
Åtgärder.
3
Ange hur du vill dela upp besökarna: efter webbläsartyp, efter webbläsarversion
eller efter båda.
Vill du exempelvis att alla med 4.0-webbläsare ska se en sida och att alla andra
ska se en annan sida? Eller vill du att Netscape Navigator-användare ska se en
sida och Microsoft Internet Explorer (IE)-användare en annan?
4
Ange en version av Netscape Navigator.
Använda beteenden
445
5
Markera i listrutorna bredvid vad som ska hända om webbläsaren är den
Netscape Navigator-version du angav (eller senare) och vad som ska hända om
den inte är det.
Alternativen är Gå till URL, Gå till alternativ URL och Stanna på den här
sidan.
6
Ange en version av Microsoft Internet Explorer.
7
Markera i listrutorna bredvid vad som ska hända om webbläsaren är den
Internet Explorer-version du angav (eller senare) och vad som ska hända om
den inte är det.
Alternativen är Gå till URL, Gå till alternativ URL och Stanna på den här
sidan.
8
Markera ett alternativ i listrutan Andra webbläsare när du vill ange vad som ska
hända om webbläsaren varken är Netscape Navigator eller Microsoft Internet
Explorer. (Besökaren kanske exempelvis använder en textbaserad webbläsare
som Lynx.)
Stanna på den här sidan är det bästa alternativet för andra webbläsare än
Navigator och IE, eftersom de flesta inte stöder JavaScript. Om de inte kan läsa
detta beteende stannar de ändå kvar på sidan.
9
Ange sökvägar och filnamn för URL och alternativ URL i textfälten längst ned
i dialogrutan. Om du anger en fjärr-URL måste du skriva http:// före wwwadressen.
10
Klicka på OK.
11
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om
händelserna du vill använda inte visas ändrar du målwebbläsaren på
undermenyn Visa händelser för. Kom ihåg att syftet med detta beteende är att
leta efter olika webbläsarversioner, så det är bäst att välja en händelse som
fungerar i 3.0-webbläsare och senare.
Kontrollera instick
Använd åtgärden Kontrollera instick när du vill dirigera besökarna till olika sidor
beroende på om de har det angivna insticksprogrammet installerat eller inte. Du
kanske exempelvis vill att besökarna ska komma till en sida om de har Shockwave
och till en annan sida om de inte har det.
Obs! Du kan inte känna av specifika insticksprogram i Microsoft Internet Explorer (IE) med
JavaScript. När du väljer Flash eller Director läggs dock lämplig VBScript-kod till på sidan
så att dessa insticksprogram känns av i IE i Windows. Det går inte att känna av
insticksprogram i Internet Explorer på Macintosh.
446
Kapitel 18
Så här använder du åtgärden Kontrollera instick:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Kontrollera instick på popup-menyn
Åtgärder.
3
Markera ett insticksprogram i listrutan Markera eller skriv insticksprogrammets
namn i fältet Ange.
Du måste använda exakt rätt namn på insticksprogrammet så som det anges i
fet stil på sidan Installerade insticksprogram i Netscape Navigator. (I Windows
väljer du Navigator-kommandot Hjälp > Om insticksprogram. På Macintosh
väljer du Om insticksprogram på Apple-menyn.)
4
I fältet Om den hittades, gå till URL anger du en URL-adress för besökare som
har insticksprogrammet.
Om du anger en fjärr-URL måste du ta med prefixet http:// i adressen.
Om du vill att besökare med insticksprogrammet ska stanna kvar på samma
sida låter du detta fält vara tomt.
5
I fältet Annars gå till URL anger du en alternativ URL-adress för besökare som
inte har insticksprogrammet.
Om du vill att besökare som saknar insticksprogrammet ska stanna kvar på
samma sida låter du detta fält vara tomt.
6
Det går inte att känna av insticksprogram i Internet Explorer på Macintosh och
de flesta insticksprogram kan inte kännas av i Internet Explorer i Windows. När
avkänning inte är möjlig dirigeras besökaren som standard till den URL-adress
som anges i fältet Annars. Om du i stället vill dirigera användaren till den första
URL-adressen (Om den hittades) markerar du kryssrutan Gå alltid till första
URL om avkänningen inte är möjlig. När denna kryssruta är markerad innebär
det i praktiken: ”Utgå ifrån att besökaren har insticksprogrammet, såvida inte
webbläsaren tydligt anger att programmet inte finns installerat.”
Om insticksinnehållet är nödvändigt för sidan bör du i allmänhet markera
kryssrutan Gå alltid till första URL om avkänningen inte är möjlig. Besökare
som saknar insticksprogrammet uppmanas vanligtvis i webbläsaren att ladda
ned det. Om insticksinnehållet inte är nödvändigt för sidan låter du denna
kryssruta vara avmarkerad.
Denna kryssruta gäller endast för Internet Explorer. Netscape Navigator kan
alltid känna av insticksprogram.
7
Klicka på OK.
8
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Använda beteenden
447
Kontrollera Shockwave eller Flash
Använd åtgärden Kontrollera Shockwave eller Flash när du vill spela upp, stoppa,
spola tillbaka eller gå till en bildruta i en Macromedia Shockwave- eller
Macromedia Flash-film.
Så här använder du åtgärden Kontrollera Shockwave eller Flash:
1
Välj Infoga > Media > Shockwave eller Infoga > Media > Flash när du vill
infoga en Shockwave- respektive Flash-film.
2
Välj Fönster > Egenskaper och ange ett namn på filmen i textfältet längst upp
till vänster (bredvid Shockwave- eller Flash-ikonen). Du måste ge filmen ett
namn för att kunna styra den med åtgärden Kontrollera Shockwave eller Flash.
3
Markera det element som du vill använda för att kontrollera Shockwave- eller
Flash-filmen. Om du exempelvis har en bild av en Spela upp-knapp som ska
användas för att spela upp filmen markerar du denna bild.
4
Öppna beteendepanelen (Fönster > Beteenden).
5
Klicka på plustecknet (+) och välj Kontrollera Shockwave eller Flash på popupmenyn Åtgärder.
En dialogruta med parametrar visas.
6
Markera en film i listrutan Film.
Namnen på alla Shockwave- och Flash-filmer i det aktuella dokumentet visas
automatiskt. (Närmare bestämt visas filmer med filnamnstilläggen .dcr, .dir,
.swf eller .spl som finns i OBJECT- eller EMBED-koder.)
7
Välj att spela upp, stoppa, spola tillbaka eller gå till en bildruta i filmen. Med
alternativet Spela upp spelas filmen upp med början från den bildruta där
åtgärden förekommer.
8
Klicka på OK.
9
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för på popup-menyn Händelser.
448
Kapitel 18
Dra skikt
Åtgärden Dra skikt använder du när du vill att besökaren ska kunna dra ett skikt.
Med hjälp av denna åtgärd kan du skapa pussel, skjutreglage och andra flyttbara
gränssnittselement.
Du kan ange i vilken riktning besökaren ska kunna dra skiktet (vågrätt, lodrätt
eller i valfri riktning), ett mål till vilket besökaren ska dra skiktet, om skiktet ska
fästas mot målet om skiktet är inom ett visst antal bildpunkter från målet, vad
som ska hända när skiktet når målet m.m.
Eftersom åtgärden Dra skikt måste anropas innan besökaren kan dra skiktet,
måste du kontrollera att den händelse som utlöser åtgärden inträffar innan
besökaren försöker dra skiktet. Det är bäst att koppla Dra skikt till BODY-objektet
(med händelsen onLoad), men du kan också koppla åtgärden till en länk som fyller
hela skiktet (exempelvis en länk runt en bild) med hjälp av händelsen onMouseOver.
Så här använder du åtgärden Dra skikt:
1
Välj Infoga > Skikt eller klicka på ikonen Rita skikt på objektpanelen och rita
ett skikt i designvyn i dokumentfönstret.
2
Markera BODY-koden genom att klicka på <body> i kodväljaren längst ned i
dokumentfönstret.
3
Öppna beteendepanelen.
4
Klicka på plustecknet (+) och välj Dra skikt på popup-menyn Åtgärder.
Om Dra skikt inte är tillgängligt är antagligen ett skikt markerat. Eftersom
skikt inte accepterar händelser i 4.0-webbläsare måste du markera ett annat
objekt, exempelvis BODY-koden eller en länk (A-kod), eller ändra målwebbläsaren
till IE 4.0 på undermenyn Visa händelser för.
5
Markera skiktet som du vill göra dragbart i listrutan Skikt.
6
Välj Begränsat eller Obegränsat i listrutan Rörelse.
Obegränsad rörelse passar för pussel och andra dra och släpp-spel. För
skjutreglage och flyttbara bilder, exempelvis lådor och gardiner, bör du välja
begränsad rörelse.
7
För begränsad rörelse anger du värden (i bildpunkter) i fälten Uppåt, Nedåt, Åt
vänster och Höger.
Värden anges i förhållande till skiktets startposition. Om du vill begränsa
rörelsen inom ett rektangulärt område anger du positiva värden i alla fyra fält.
Om du bara vill tillåta lodrät rörelse skriver du positiva värden i fälten Uppåt
och Nedåt och 0 för Åt vänster och Höger. Om du bara vill tillåta vågrät rörelse
skriver du positiva värden för Åt vänster och Höger och 0 för Uppåt och Nedåt.
Använda beteenden
449
8
Ange värden (i bildpunkter) för släppområdet i fälten Vänster och Överst.
Släppområdet är det område som du vill att besökaren ska dra skiktet till. Ett
skikt anses ha nått målet när dess vänstra och översta koordinater matchar
värdena du angav i fälten Vänster och Överst. Värden anges i förhållande till
det övre vänstra hörnet i webbläsarfönstret. Klicka på Hämta aktuell position
om du automatiskt vill fylla fälten med skiktets aktuella position.
9
Ange ett värde (i bildpunkter) i fältet Fäst om inom när du vill ange hur nära
besökaren måste komma släppområdet för att skiktet ska fästas mot målet.
Högre värden gör det lättare för besökaren att hitta släppområdet.
10
För enkla pussel och enkel flyttning av bilder kan du sluta läsa här. Om du vill
definiera skiktets draghandtag, följa skiktets rörelse medan det dras och utlösa
en åtgärd när skiktet släpps klickar du på fliken Avancerat.
11
Om du vill ange att besökaren måste klicka på ett visst område i skiktet för att
kunna dra det markerar du Område i skikt i listrutan Handtag. Sedan anger du
vänster och övre koordinat och bredd och höjd på handtaget.
Detta alternativ är praktiskt när bilden i skiktet innehåller ett element som det
är naturligt att försöka dra, exempelvis en namnlist eller ett lådhandtag.
Markera inte det här alternativet om du vill att besökaren ska kunna klicka var
som helst i skiktet för att kunna dra det.
12
Markera önskade När du drar-alternativ:
• Markera kryssrutan Flytta skiktet längst fram om skiktet ska läggas överst i
staplingsordningen när det dras. Om du markerar denna kryssruta använder du
listrutan för att välja om skiktet ska lämnas kvar överst eller om det ska
återställas till den ursprungliga platsen.
• Ange JavaScript-kod eller ett funktionsnamn (exempelvis monitorLayer()) i fältet
Anropa JavaScript om du vill köra koden eller funktionen upprepade gånger när
skiktet dras. Du kan exempelvis skriva en funktion som följer skiktets koordinater
och visar tips som ”det bränns” eller ”du är långt ifrån” i ett textfält.
13
Ange JavaScript-kod eller ett funktionsnamn (exempelvis evaluateLayerPos()) i
det andra fältet Anropa JavaScript om du vill köra koden eller funktionen när
skiktet släpps. Markera kryssrutan Endast vid fäst om JavaScript bara ska köras
om skiktet har nått släppområdet.
14
Klicka på OK.
15
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för. Kom ihåg att skikt inte stöds i 3.0-webbläsare.
Obs! Du kan inte koppla åtgärden Dra skikt till ett objekt med händelserna onMouseDown
och onClick.
450
Kapitel 18
Samla information om det dragbara skiktet
När du kopplar åtgärden Dra skikt till ett objekt infogas funktionen
MM_dragLayer() i HEAD-delen av dokumentet. Förutom att den registrerar skiktet
som dragbart definierar denna funktion tre egenskaper för varje dragbart skikt:
MM_LEFTRIGHT, MM_UPDOWN och MM_SNAPPED. Du kan använda dessa i dina egna
JavaScript-funktioner för att ange den relativa vågräta respektive lodräta
positionen för skiktet samt om skiktet har nått släppområdet.
Obs! Anvisningarna i detta avsnitt är endast avsedda att användas av vana JavaScriptprogrammerare.
Följande funktion visar exempelvis värdet för egenskapen MM_UPDOWN (den aktuella
lodräta positionen för skiktet) i ett formulärfält med namnet curPosField.
(Formulärfält är användbara när du vill visa information som uppdateras
regelbundet eftersom de är dynamiska, d.v.s. att du kan ändra deras innehåll efter
att sidan har lästs in, i både Netscape Navigator och Microsoft Internet Explorer.)
function getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
I stället för att visa värdet för MM_UPDOWN eller MM_LEFTRIGHT i ett formulärfält, kan du
skriva en funktion som visar ett meddelande i formulärfältet beroende på hur nära
värdet är släppområdet. Du kan också anropa en annan funktion som visar eller
döljer ett skikt beroende på värdet. Hur du använder värdet för egenskaperna
MM_UPDOWN och MM_LEFTRIGHT begränsas endast av din fantasi och din kunnighet i
JavaScript.
Det är särskilt användbart att läsa egenskapen MM_SNAPPED när du har flera skikt på
sidan som alla måste nå sina mål innan besökaren kan gå vidare till nästa sida eller
uppgift. Du kan exempelvis skriva en funktion som räknar hur många skikt som
har MM_SNAPPED-värdet TRUE och anropa den varje gång ett skikt släpps. När
sammanräkningen av antalet fästade objekt når önskat antal kan du dirigera
besökaren till nästa sida eller visa ett gratulationsmeddelande.
Om du har använt händelsen onMouseOver för att koppla åtgärden Dra skikt till
länkar i flera skikt, måste du göra en mindre ändring i funktionen MM_dragLayer()
för att förhindra att egenskapen MM_SNAPPED för ett fästat skikt återställs till FALSE
om muspekaren förs över skiktet. (Detta kan inträffa om du har använt Dra skikt
för att skapa ett bildpussel, eftersom det är troligt att besökaren för muspekaren
över fästade bitar under arbetet med att lägga andra på plats.) Funktionen
MM_dragLayer() förhindrar inte detta beteende eftersom det ibland är önskvärt,
exempelvis om du vill ange flera släppområden för ett enstaka skikt.
Använda beteenden
451
Så här förhindrar du att fästade skikt omregistreras:
1
Gör en säkerhetskopia av dokumentet innan du ändrar koden. (Du kan göra
detta i platsfönstret i Dreamweaver, i Utforskaren (Windows) eller i Finder
(Macintosh).)
2
Välj Redigera > Sök och ersätt.
3
Markera Källkod i listrutan Sök efter.
4
Skriv (!curDrag) i textfältet bredvid.
5
Klicka på Sök nästa.
Om du blir tillfrågad om du vill fortsätta att söka från början av dokumentet
klickar du på Ja. En programsats med följande text påträffas:
if (!curDrag) return false;
6
Stäng dialogrutan Sök och ersätt och ändra programsatsen i kodvyn i
dokumentfönstret eller i kodkontrollen så att det står:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
De två lodräta strecken (||) betyder ”eller” och curDrag är en variabel som
motsvarar skiktet som ska registreras som dragbart. På ren svenska betyder
programsatsen: ”Om curDrag inte är ett objekt, eller om det redan har ett
MM_SNAPPED-värde, kan du strunta i att köra resten av funktionen.”
Gå till URL
Åtgärden Gå till URL öppnar en ny sida i det aktuella fönstret eller i den angivna
ramen. Denna åtgärd är särskilt användbar när du vill ändra innehållet i två eller
fler ramar med en klickning. Den kan också anropas på en tidslinje för att hoppa
till en ny sida efter ett angivet tidsintervall.
Så här använder du åtgärden Gå till URL:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Gå till URL på popup-menyn Åtgärder.
3
Markera en destination för URL-adressen i listan Öppna i.
I listan Öppna i visas automatiskt namnen på alla ramar i den aktuella
ramuppsättningen samt huvudfönstret. Om det inte finns några ramar är
huvudfönstret det enda alternativet.
Obs! Denna åtgärd kan ge oväntade resultat om en ram har namnet top, blank, self eller
parent. Webbläsare kan ibland tolka dessa namn som reserverade målnamn.
452
Kapitel 18
4
Klicka på Bläddra om du vill markera ett dokument som ska öppnas eller ange
dokumentets sökväg och filnamn i fältet URL.
5
Upprepa steg 3 och 4 om du vill öppna fler dokument i andra ramar.
6
Klicka på OK.
7
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn Visa
händelser för.
Hoppmeny
När du skapar en hoppmeny genom att välja Infoga > Formulärobjekt >
Hoppmeny skapas ett menyobjekt som beteendet Hoppmeny (eller Hoppmeny
Gå) kopplas till. Vanligtvis behöver du inte manuellt koppla åtgärden Hoppmeny
till ett objekt. Information om hoppmenyer och hur du skapar dem finns i ”Infoga
en hoppmeny” på sidan 364.
Du kan redigera en befintlig hoppmeny på två olika sätt:
• Du kan redigera och ändra om menyposter, ändra vilka filer som det ska
hoppas till och ändra vilket fönster dessa filer ska öppnas i genom att
dubbelklicka på en befintlig hoppmenyåtgärd på beteendepanelen.
• Du kan redigera menyposterna på samma sätt som du redigerar poster på andra
menyer genom att markera menyn och använda knappen Listvärden i
egenskapskontrollen. Mer information finns i ”Skapa en meny (listruta)” på
sidan 490.
Så här redigerar du en hoppmeny med hjälp av beteendepanelen:
1
Skapa ett hoppmenyobjekt om det inte redan finns ett i dokumentet.
2
Markera hoppmenyobjektet och öppna beteendepanelen.
3
Dubbelklicka på Hoppmeny i kolumnen Åtgärder.
4
Gör önskade ändringar i dialogrutan Hoppmeny och klicka sedan på OK.
Använda beteenden
453
Hoppmeny Gå
Åtgärden Hoppmeny Gå är nära associerad med åtgärden Hoppmeny. Med hjälp
av Hoppmeny Gå kan du associera en Gå-knapp med en hoppmeny. (Det måste
redan finnas en hoppmeny i dokumentet om du ska kunna använda denna
åtgärd.) När besökarna klickar på knappen Gå öppnas den länk som har markerats
på hoppmenyn. Vanligtvis behövs det ingen Gå-knapp på en hoppmeny. När
besökarna väljer en post på en hoppmeny läses i allmänhet en URL-adress in utan
att besökarna behöver göra något mer. Men om besökaren väljer den post som
redan anges på hoppmenyn genomförs inte hoppet. Vanligtvis spelar det ingen
roll, men om hoppmenyn visas i en ram och hoppmenyposterna länkar till sidor i
andra ramar är det ofta praktiskt med en Gå-knapp, som ger besökarna möjlighet
att välja om den post som redan anges på hoppmenyn.
Så här lägger du till åtgärden Hoppmeny Gå:
1
Markera ett objekt som ska användas som Gå-knapp (vanligtvis en knappbild)
och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Hoppmeny Gå på popup-menyn Åtgärder.
3
I listrutan Välj hoppmeny markerar du en meny som Gå-knappen ska aktivera.
4
Klicka på OK.
Öppna webbläsarfönster
Använd åtgärden Öppna webbläsarfönster när du vill öppna en URL i ett nytt
fönster. Du kan ange egenskaper för det nya fönstret: storlek, attribut (om det går
att ändra storlek på eller inte, har en menyrad o.s.v.) och namn. Du kan
exempelvis använda denna åtgärd för att öppna en större bild i ett separat fönster
när besökaren klickar på en miniatyrbild. Med hjälp av denna åtgärd kan du göra
det nya fönstret exakt lika stort som bilden.
Om du inte anger några attribut för fönstret öppnas det i samma storlek och med
samma attribut som fönstret som det öppnades från. Om du anger något attribut
för fönstret avaktiveras automatiskt alla andra attribut som inte uttryckligen är
aktiverade. Om du exempelvis inte anger några attribut för fönstret kanske det
öppnas i en storlek på 640 x 480 bildpunkter och med ett verktygsfält för
placering och ett för navigering, ett statusfält samt en menyrad. Om du
uttryckligen anger bredden till 640 och höjden till 480 och inte anger några andra
attribut, öppnas fönstret i storleken 640 x 480 bildpunkter utan verktygsfält för
placering och navigering, statusfält, menyrad, storlekshandtag och rullningslister.
454
Kapitel 18
Så här använder du åtgärden Öppna webbläsarfönster:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Öppna webbläsarfönster på popup-menyn
Åtgärder.
3
Klicka på Bläddra när du vill markera en fil eller skriv den URL du vill visa.
4
Ange följande alternativ:
Fönsterbredd
Fönsterhöjd
anger fönstrets bredd i bildpunkter.
anger fönstrets höjd i bildpunkter.
Verktygsfält för navigering är raden med förflyttningsknappar (som exempelvis
kan ha etiketterna Bakåt, Framåt, Startsida och Uppdatera).
Verktygsfält för placering
är raden med adressfältet.
Statusfält är området längst ned i webbläsarfönstret där meddelanden visas
(exempelvis återstående nedladdningstid och vilka URL-adresser som är
associerade med länkarna).
Menyrad är det område i webbläsarfönstret (Windows) eller på skrivbordet
(Macintosh) där menyer som Arkiv, Redigera, Visa, Gå till och Hjälp visas. Du
bör markera denna kryssruta om du vill att besökarna ska kunna navigera från
det nya fönstret. Om du inte markerar denna kryssruta kan användaren bara
stänga eller minimera fönstret (Windows) respektive stänga fönstret eller
avsluta programmet (Macintosh) från det nya fönstret.
anger att rullningslister ska visas om innehållet
sträcker sig utanför det synliga området. Om du inte markerar denna kryssruta
visas inga rullningslister. Om kryssrutan Storlekshandtag också är avmarkerad
kan besökarna inte på något enkelt sätt visa innehåll som finns utanför fönstrets
originalstorlek. (Men de kan möjligtvis rulla fönstret genom att dra dess kant.)
Rullningslister vid behov
anger att besökaren ska kunna ändra storlek på fönstret,
antingen genom att dra det nedre högra hörnet av fönstret eller genom att
klicka på maximeringsknappen (Windows) eller i storleksrutan (Macintosh)
längst upp till höger. Om denna kryssruta inte markeras är storlekskontrollerna
inte tillgängliga och det nedre högra hörnet går inte att dra.
Storlekshandtag
Fönsternamn är namnet på det nya fönstret. Du bör ge det nya fönstret ett
namn om du vill använda länkar som pekar dit eller styra det med JavaScriptkod. Detta namn får inte innehålla mellanslag eller specialtecken.
5
Klicka på OK.
6
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Använda beteenden
455
Spela upp ljud
Använd åtgärden Spela upp ljud när du vill spela upp ett ljud. Du vill kanske
exempelvis spela upp en ljudeffekt varje gång muspekaren förs över en länk eller
spela upp en musiksnutt när sidan läses in.
Obs! Webbläsare kan kräva någon typ av utökat ljudstöd (exempelvis ett insticksprogram
för ljud) för att ljud ska kunna spelas upp. Därför är det ofta som ljud inte spelas upp
likadant i olika webbläsare med olika insticksprogram. Det är svårt att förutsäga hur ljuden
på din webbplats kommer att låta för olika besökare.
Så här använder du åtgärden Spela upp ljud:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Spela upp ljud på popup-menyn Åtgärder.
3
Klicka på Bläddra när du vill markera en ljudfil eller skriv sökvägen och
filnamnet i fältet Spela upp ljud.
4
Klicka på OK.
5
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Popup-meddelande
Åtgärden Popup-meddelande visar en JavaScript-varning med den text du anger.
Eftersom JavaScript-varningar endast har en knapp (OK) använder du denna
åtgärd när du vill ge information till besökaren i stället för en valmöjlighet.
Du kan bädda in alla sorters giltiga JavaScript-funktionsanrop, egenskaper, globala
variabler och andra uttryck i texten. Om du vill bädda in ett JavaScript-uttryck
placerar du det inom klammerparentes ({}). Om du vill visa en klammerparentes
placerar du ett omvänt snedstreck framför den (\{).
Exempel
URL-adressen för denna sida är {window.location} och dagens datum är {new
Date()}.
Obs! Du kan inte styra hur JavaScript-varningen ser ut. Det anges i besökarens
webbläsare. Om du vill ha större kontroll över meddelandets utseende kan du i stället
använda åtgärden Öppna webbläsarfönster. Information finns i ”Öppna webbläsarfönster”
på sidan 454.
Så här använder du åtgärden Popup-meddelande:
456
Kapitel 18
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Popup-meddelande på popup-menyn Åtgärder.
3
Skriv meddelandet i fältet Meddelande.
4
Klicka på OK.
5
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Förhandsladda bilder
Åtgärden Förhandsladda bilder läser in bilder, som inte visas på sidan direkt
(exempelvis sådana som kommer att växlas in med hjälp av tidslinjer, beteenden
eller JavaScript), i webbläsarens cacheminne. Detta gör att det inte uppstår
fördröjningar på grund av nedladdning när det är dags för bilderna att visas.
Obs! Åtgärden Växla bild förhandsladdar automatiskt alla markeringsbilder när du markerar
kryssrutan Förhandsladda bilder i dialogrutan Växla bild, så du behöver inte lägga till
Förhandsladda bilder manuellt när du använder Växla bild.
Så här använder du åtgärden Förhandsladda bilder:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Förhandsladda bilder på popup-menyn
Åtgärder.
3
Klicka på Bläddra om du vill markera en bildfil som ska förhandsladdas eller
skriv en bilds sökväg och filnamn i fältet Bildkällfil.
4
Klicka på plustecknet (+) överst i dialogrutan när du vill lägga till bilden i listan
Förhandsladda bilder.
Obs! Om du inte klickar på plustecknet innan du anger nästa bild, ersätts bilden du just
har valt med bilden du väljer härnäst.
5
Upprepa steg 3 och 4 för alla återstående bilder som du vill förhandsladda på
den aktuella sidan.
6
Om du vill ta bort en bild från listan Förhandsladda bilder markerar du bilden
i listan och klickar på minustecknet (–).
7
Klicka på OK.
8
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Använda beteenden
457
Ställ in navigationsfältets bild
Använd åtgärden Ställ in navigationsfältets bild när du vill göra en bild till en bild
i navigationsfältet eller när du vill ändra visningen av och åtgärderna för bilder i
ett navigationsfält. (Mer information finns i ”Infoga ett navigationsfält” på
sidan 367.)
Använd fliken Grundläggande i dialogrutan Ställ in navigationsfältets bild när du
vill skapa eller uppdatera en bild eller en uppsättning bilder i navigationsfältet,
ändra vilka URL-adresser som visas när det klickas på en knapp i navigationsfältet
och ange ett annat fönster som en URL ska visas i.
Använd fliken Avancerat i dialogrutan Ställ in navigationsfältets bild när du vill
ändra läget för andra bilder i ett dokument baserat på den aktuella knappens läge.
När besökarna klickar på ett element i ett navigationsfält leder det som standard
till att alla andra element i navigationsfältet automatiskt återställs till sina Upplägen. Använd fliken Avancerat om du vill ange ett annat läge för en bild när den
markerade bilden är i läget Ned eller Över.
Så här redigerar du åtgärden Ställ in navigationsfältets bild:
1
Markera en bild du vill redigera i navigationsfältet och öppna beteendepanelen.
2
I kolumnen Åtgärder på beteendepanelen dubbelklickar du på den Ställ in
navigationsfältets bild-åtgärd som är associerad med händelsen du ändrar.
3
Markera bildredigeringsalternativ på fliken Grundläggande i dialogrutan Ställ
in navigationsfältets bild.
Så här anger du flera bilder för en knapp i navigationsfältet:
1
Markera en bild du vill redigera i navigationsfältet och öppna beteendepanelen.
2
I kolumnen Åtgärder på beteendepanelen dubbelklickar du på den Ställ in
navigationsfältets bild-åtgärd som är associerad med händelsen du ändrar.
3
Klicka på fliken Avancerat i dialogrutan Ställ in navigationsfältets bild.
4
Välj ett bildläge i listrutan När element visas. Information om bildlägen finns i
”Skapa navigationsfält” på sidan 366.
• Välj Ned-bild om du vill ändra visningen av en annan bild efter det att
besökaren har klickat på den markerade bilden.
• Välj Över-bild eller över ned-bild om du vill ändra visningen av en annan bild
när pekaren befinner sig över den markerade bilden.
458
Kapitel 18
5
Markera en annan bild på sidan i listan Ställ även in bild.
6
Klicka på Bläddra om du vill markera bildfilen som ska visas eller skriv
bildfilens sökväg i fältet Till bildfil.
7
Om du markerade Över-bild eller över ned-bild i steg 4 har du ytterligare ett
alternativ. I textfältet Om nere, till bildfil klickar du på Bläddra för att markera
bildfilen, eller också skriver du sökvägen till bildfilen som ska visas.
Ange texten i ramen
Åtgärden Ange texten i ramen ger dig möjlighet att ange dynamisk text i en ram.
Du ersätter ramens innehåll och formatering med innehåll som du själv anger.
Innehållet kan bestå av vilken giltig HTML-kod som helst. Använd denna åtgärd
när du vill visa information dynamiskt.
Åtgärden Ange texten i ramen byter visserligen ut formateringen i en ram, men
genom att markera Bevara bakgrundsfärg kan du bevara färgattributen för
sidbakgrund och text.
Du kan bädda in alla sorters giltiga JavaScript-funktionsanrop, egenskaper, globala
variabler och andra uttryck i texten. Om du vill bädda in ett JavaScript-uttryck
placerar du det inom klammerparentes ({}). Om du vill visa en klammerparentes
placerar du ett omvänt snedstreck framför den (\{).
Exempel
URL-adressen för denna sida är {window.location} och dagens datum är {new
Date()}.
Så här skapar du en ramuppsättning:
Välj Ändra > Ramuppsättning > Dela ram vänster, höger, uppåt eller nedåt.
Mer information finns i ”Skapa ramar” på sidan 199.
Så här använder du åtgärden Ange texten i ramen:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Ange text > Ange texten i ramen på popupmenyn Åtgärder.
3
Markera målramen i listrutan Ram i dialogrutan Ange texten i ramen.
4
Klicka på knappen Hämta aktuell HTML när du vill kopiera det aktuella
innehållet i målramens BODY-del.
5
Skriv ett meddelande i fältet Ny HTML och klicka sedan på OK.
6
Kontrollera att standardhändelsen är den du vill använda. Om den inte är det
väljer du en annan händelse på popup-menyn.
Om de händelser du vill använda inte visas ändrar du målwebbläsare på
undermenyn Visa händelser för.
Använda beteenden
459
Ange texten i skiktet
Åtgärden Ange texten i skiktet ersätter innehållet och formateringen i ett befintligt
skikt på en sida med det innehåll du anger. Innehållet kan bestå av vilken giltig
HTML-källkod som helst.
Ange texten i skiktet ersätter innehållet och formateringen i skiktet men behåller
skiktattributen, inklusive färg. Formatera innehållet genom att ta med HTMLkoder i fältet Ny HTML i dialogrutan Ange texten i skiktet.
Du kan bädda in alla sorters giltiga JavaScript-funktionsanrop, egenskaper, globala
variabler och andra uttryck i texten. Om du vill bädda in ett JavaScript-uttryck
placerar du det inom klammerparentes ({}). Om du vill visa en klammerparentes
placerar du ett omvänt snedstreck framför den (\{).
Exempel
URL-adressen för denna sida är {window.location} och dagens datum är {new
Date()}.
Så här skapar du ett skikt:
1
Välj Infoga > Skikt.
Mer information finns i ”Skapa skikt på sidan” på sidan 405.
2
Skriv ett namn på skiktet i egenskapskontrollen.
Så här kopplar du åtgärden Ange texten i skiktet:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Ange text > Ange texten i skiktet på popupmenyn Åtgärder.
3
Markera målskiktet i listrutan Skikt i dialogrutan Ange texten i skiktet.
4
Skriv ett meddelande i fältet Ny HTML och klicka sedan på OK.
5
Kontrollera att standardhändelsen är den du vill använda. Om den inte är det
väljer du en annan händelse på popup-menyn.
Om de händelser du vill använda inte visas ändrar du målwebbläsare på
undermenyn Visa händelser för.
460
Kapitel 18
Ange texten i statusfältet
Åtgärden Ange texten i statusfältet visar ett meddelande i statusfältet längst ned
till vänster i webbläsarfönstret. Du kan exempelvis använda denna åtgärd för att
beskriva en länks destination i statusfältet i stället för att visa den associerade
URL-adressen. Du kan visa ett exempel på ett statusmeddelande genom att föra
musen över någon av navigeringsknapparna i Dreamweavers hjälp. Tänk dock på
att besökarna ofta ignorerar eller inte lägger märke till meddelanden i statusfältet.
Om meddelandet är viktigt bör du i stället visa det som ett popup-meddelande
eller som texten i ett skikt.
Du kan bädda in alla sorters giltiga JavaScript-funktionsanrop, egenskaper, globala
variabler och andra uttryck i texten. Om du vill bädda in ett JavaScript-uttryck
placerar du det inom klammerparentes ({}). Om du vill visa en klammerparentes
placerar du ett omvänt snedstreck framför den (\{).
Exempel
URL-adressen för denna sida är {window.location} och dagens datum är {new
Date()}.
Så här använder du åtgärden Ange texten i statusfältet:
1
Markera ett objekt och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Ange text > Ange texten i statusfältet på
popup-menyn Åtgärder.
3
Skriv meddelandet i fältet Meddelande i dialogrutan Ange texten i statusfältet.
Skriv så kort som möjligt. Meddelandet klipps av om det inte får plats i
statusfältet.
4
Klicka på OK.
5
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Använda beteenden
461
Ange texten i textfältet
Åtgärden Ange texten i textfältet ersätter innehållet i ett formulärs textfält med det
innehåll som du anger.
Du kan bädda in alla sorters giltiga JavaScript-funktionsanrop, egenskaper, globala
variabler och andra uttryck i texten. Om du vill bädda in ett JavaScript-uttryck
placerar du det inom klammerparentes ({}). Om du vill visa en klammerparentes
placerar du ett omvänt snedstreck framför den (\{).
Exempel
URL-adressen för denna sida är {window.location} och dagens datum är {new
Date()}.
Så här skapar du ett namngivet textfält:
1
Välj Infoga > Formulärobjekt > Textfält.
Klicka på Ja om du uppmanas att lägga till en formulärkod. Mer information
finns i ”Skapa formulär” på sidan 477.
2
Skriv ett namn för textfältet i egenskapskontrollen. Se till att namnet är unikt
på sidan (använd inte samma namn för flera element på samma sida, även om
de är av olika typ).
Så här använder du åtgärden Ange texten i textfältet:
1
Markera ett textfält och öppna beteendepanelen.
2
Klicka på plustecknet (+) och välj Ange text > Ange texten i textfältet på
popup-menyn Åtgärder.
3
Markera måltextfältet i listrutan Textfält i dialogrutan Ange texten i textfältet.
4
Skriv text i fältet Ny text och klicka sedan på OK.
5
Kontrollera att standardhändelsen är den du vill använda. Om den inte är det
väljer du en annan händelse på popup-menyn.
Om de händelser du vill använda inte visas ändrar du målwebbläsare på
undermenyn Visa händelser för.
462
Kapitel 18
Visa-dölj skikt
Åtgärden Visa-dölj skikt visar, döljer eller återställer standardsynligheten för ett
eller flera skikt. Denna åtgärd är användbar om du vill att information ska visas
när besökaren interagerar med sidan. När användaren exempelvis för muspekaren
över en bild på en växt kan du visa ett skikt som ger information om växtens
växtperiod och var den växer, hur mycket sol den behöver, hur stor den kan bli
m.m.
Åtgärden Visa-dölj skikt är också användbar när du vill skapa ett förhandsladdat
skikt, d.v.s. ett stort skikt som först täcker innehållet på sidan och sedan försvinner
när alla sidkomponenter har lästs in.
Så här använder du åtgärden Visa-dölj skikt:
1
Välj Infoga > Skikt eller klicka på ikonen Rita skikt på objektpanelen och rita
ett skikt i dokumentfönstret.
Upprepa detta steg om du vill skapa fler skikt.
2
Klicka i dokumentfönstret så att skiktet avmarkeras och öppna sedan
beteendepanelen.
3
Klicka på plustecknet (+) och välj Visa-dölj skikt på popup-menyn Åtgärder.
Om Visa-dölj skikt inte är tillgängligt är antagligen ett skikt markerat.
Eftersom skikt inte accepterar händelser i 4.0-webbläsare måste du markera ett
annat objekt, exempelvis BODY-koden eller en länk (A-kod), eller ändra
målwebbläsaren till IE 4.0 på undermenyn Visa händelser för.
4
Markera i listan Namngivna skikt det skikt vars synlighet du vill ändra.
5
Klicka på Visa när du vill visa skiktet, på Dölj när du vill dölja det och på
Standard när du vill återställa skiktets synlighet till standardvärdet.
6
Upprepa steg 4 och 5 för alla övriga skikt vars synlighet du vill ändra den här
gången. (Du kan ändra synligheten för flera skikt med ett enda beteende.)
7
Klicka på OK.
8
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
När skikt visas i ett webbläsarfönster i Netscape Navigator kan det hända att de
förminskas för att passa innehållet. Du förhindrar att detta sker genom att lägga
till text eller bilder i skikt eller ange beskärningsvärden för skikt.
Använda beteenden
463
Så här skapar du ett förhandsladdat skikt:
1
2
3
4
5
6
7
8
9
10
11
464
Kapitel 18
Klicka på ikonen Rita skikt i kategorin Vanlig på objektpanelen och rita ett
stort skikt i designvyn i dokumentfönstret.
Se till att skiktet täcker allt innehåll på sidan.
På skiktpanelen drar du skiktnamnet och placerar det högst upp i listan för att
ange att skiktet ska vara längst fram i staplingsordningen.
Markera skiktet om det behövs och ge det namnet loading i fältet längst till
vänster i egenskapskontrollen för skikt.
Behåll skiktet markerat och ange i egenskapskontrollen samma bakgrundsfärg
för skiktet som för sidan.
Klicka i skiktet (som nu ska skymma sidans övriga innehåll) och skriv ett
meddelande om du så önskar.
”Vänta medan sidan läses in” eller ”Laddar...” är exempel på meddelanden som
informerar besökarna om vad som händer så att de vet att det finns innehåll på
sidan.
Klicka på <body>-koden i kodväljaren längst ned till vänster i dokumentfönstret.
Välj Visa-dölj skikt på popup-menyn Åtgärder på beteendepanelen.
Markera skiktet med namnet loading i listan Namngivna skikt.
Klicka på Dölj.
Klicka på OK.
Kontrollera att onLoad är den händelse som visas bredvid åtgärden Visa-dölj
skikt i beteendelistan. (Annars markerar du händelsen och klickar på den
nedåtriktade triangeln mellan händelsen och åtgärden. Välj onLoad i listan över
händelser på popup-menyn.)
Växla bild
Åtgärden Växla bild växlar en bild mot en annan genom att ändra attributet SRC i
koden IMG. Använd denna åtgärd när du vill skapa överrullningsknappar och andra
bildeffekter (däribland växling av mer än en bild i taget).
Obs! Eftersom det bara är attributet SRC som påverkas av denna åtgärd bör du växla till en
bild som har samma storlek (höjd och bredd) som originalet. Annars blir bilden som du
växlar in komprimerad eller utvidgad för att passa originalbildens mått.
Så här använder du åtgärden Växla bild:
1
Välj Infoga > Bild eller klicka på ikonen Infoga bild på objektpanelen när du
vill infoga en bild.
2
Ange ett namn på bilden i textfältet längst till vänster i egenskapskontrollen.
Åtgärden Växla bild fungerar även om du inte ger bilderna namn. Bilder utan
namn ges automatiskt namn när du kopplar beteendet till ett objekt. Det är
emellertid lättare att skilja på bilderna i dialogrutan Växla bild om du har gett
alla bilderna namn i förväg.
3
Upprepa steg 1 och 2 när du vill infoga fler bilder.
4
Markera ett objekt (vanligtvis bilden du ska växla) och öppna beteendepanelen.
5
Klicka på plustecknet (+) och välj Växla bild på popup-menyn Åtgärder.
6
Markera i listan Bilder bilden vars källa du vill ändra.
7
Klicka på Bläddra om du vill markera den nya bildfilen eller skriv den nya
bildens sökväg och filnamn i fältet Ange källa till.
8
Upprepa steg 6 och 7 om du vill ändra fler bilder. Använd samma Växla bildåtgärd för alla bilder som du vill ändra samtidigt. Annars kan du inte återställa
allesammans med motsvarande Växla bildåterställning-åtgärd.
9
Markera alternativet Förhandsladda bilder om du vill att de nya bilderna ska
läsas in i webbläsarens cacheminne när sidan läses in.
Detta förhindrar fördröjningar på grund av nedladdning när det är dags för
bilderna att visas.
10
Klicka på OK.
11
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Använda beteenden
465
Växla bildåterställning
Åtgärden Växla bildåterställning återställer den senaste uppsättningen växlade
bilder till deras ursprungliga källfiler. Denna åtgärd läggs automatiskt till varje
gång du kopplar åtgärden Växla bild till ett objekt. Om du behåller kryssrutan
Återställ markerad när du kopplar Växla bild ska du aldrig behöva markera
åtgärden Växla bildåterställning manuellt.
Gå till bildruta på tidslinje
Åtgärden Gå till bildruta på tidslinje flyttar uppspelningen till den angivna
bildrutan. Du kan använda denna åtgärd i beteendekanalen på tidslinjepanelen för
att göra så att delar av tidslinjen körs ett visst antal gånger, för att skapa en länk
eller knapp för tillbakaspolning eller för att ge besökaren möjlighet att hoppa till
olika delar av animeringen.
Så här använder du åtgärden Gå till bildruta på tidslinje:
1
Välj Fönster > Tidslinje så att tidslinjepanelen öppnas och kontrollera att
dokumentet innehåller en tidslinje.
Om du inte ser några lila animeringsfält på tidslinjepanelen finns det inga
tidslinjer i dokumentet. Se ”Skapa en tidslinjeanimering” på sidan 423.
2
Markera ett objekt som beteendet ska kopplas till.
När du vill koppla beteendet till en bildruta på tidslinjen klickar du på önskad
bildruta i beteendekanalen.
3
Öppna beteendepanelen.
4
Klicka på plustecknet (+) och välj Tidslinje > Gå till bildruta på tidslinje på
popup-menyn Åtgärder. (Om denna åtgärd är nedtonad finns det inte någon
tidslinje i dokumentet.)
5
Välj en tidslinje i listrutan Tidslinje.
6
Ange ett bildnummer i fältet Gå till bildruta.
7
Om du lägger till denna åtgärd i beteendekanalen för en tidslinje och vill att en
del av tidslinjen ska köras i en slinga, anger du i fältet Slinga hur många gånger
segmentet ska köras.
Du måste låta detta fält vara tomt om du inte kopplar Gå till bildruta på
tidslinje till en bildruta på en tidslinje.
8
Klicka på OK.
9
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
466
Kapitel 18
Spela upp tidslinje och Stoppa tidslinje
Använd åtgärderna Spela upp tidslinje och Stoppa tidslinje när du vill ge
besökarna möjlighet att starta och stoppa en tidslinje genom att klicka på en länk
eller knapp eller när du vill att en tidslinje ska startas och stoppas automatiskt när
besökaren för muspekaren över en länk, bild eller något annat objekt. Åtgärden
Spela upp tidslinje kopplas automatiskt till BODY-koden med händelsen onLoad när
du markerar Autospela på tidslinjepanelen.
Så här använder du åtgärderna Spela upp tidslinje och Stoppa tidslinje:
1
Välj Fönster > Tidslinje så att tidslinjepanelen öppnas och kontrollera att
dokumentet innehåller en tidslinje.
Om du inte ser några lila animeringsfält på tidslinjepanelen finns det inga
tidslinjer i dokumentet. Se ”Skapa en tidslinjeanimering” på sidan 423.
2
Markera ett objekt och öppna beteendepanelen.
3
Klicka på plustecknet (+) och välj Spela upp tidslinje eller Stoppa tidslinje på
popup-menyn Åtgärder.
4
Markera i listrutan den tidslinje som du vill spela upp eller stoppa. Du kan
också välja att stoppa alla tidslinjer.
5
Klicka på OK.
6
Kontrollera att standardhändelsen är den du vill använda.
Om den inte är det väljer du en annan händelse på popup-menyn. Om de
händelser du vill använda inte visas ändrar du målwebbläsare på undermenyn
Visa händelser för.
Validera formulär
Åtgärden Validera formulär går igenom innehållet i angivna textfält för att kontrollera
att besökaren har angett rätt typ av information. Koppla denna åtgärd till enskilda
textfält med händelsen onBlur om du vill att fälten ska valideras när användaren fyller i
formuläret. Du kan också koppla den till formuläret med händelsen onSubmit för att
utvärdera flera textfält samtidigt när användaren klickar på knappen Skicka. När du
kopplar denna åtgärd till ett formulär förhindras formuläret från att skickas till servern
om något av de angivna fälten innehåller felaktig information.
Så här använder du åtgärden Validera formulär:
1
Välj Infoga > Formulär eller klicka på ikonen Infoga formulär i kategorin
Formulär på objektpanelen när du vill infoga ett formulär.
2
Välj Infoga > Formulärobjekt > Textfält eller klicka på ikonen Infoga textfält på
objektpanelen när du vill infoga ett textfält.
Upprepa detta steg om du vill infoga fler textfält.
Använda beteenden
467
3
Gör något av följande:
• Om du vill validera enskilda fält när besökaren fyller i formuläret markerar du
ett textfält och väljer Fönster > Beteenden.
• Om du vill validera flera fält när användaren skickar formuläret klickar du på
koden <FORM> i kodväljaren längst ned till vänster i dokumentfönstret och väljer
Fönster > Beteenden.
4
Välj Validera formulär på popup-menyn Åtgärder.
5
Gör något av följande:
• Om du validerar enskilda fält markerar du i listan Namngivna fält samma fält
som du har markerat i dokumentfönstret.
• Om du validerar flera fält markerar du ett textfält i listan Namngivna fält.
6
Markera kryssrutan Krävs om fältet måste innehålla data.
7
Välj något av följande alternativ för Acceptera:
• Använd Vad som helst om fältet är obligatoriskt men inte behöver innehålla
någon viss typ av data. (Om kryssrutan Krävs inte är markerad har alternativet
Vad som helst ingen effekt, d.v.s. att det är samma sak som om åtgärden
Validera formulär inte är kopplad till fältet.)
• Använd E-postadress när du vill kontrollera att fältet innehåller en @-symbol.
• Använd Nummer när du vill kontrollera att fältet endast innehåller siffror.
• Använd Nummer från när du vill kontrollera att fältet innehåller ett nummer i
ett visst intervall.
8
Om du validerar flera fält upprepar du steg 6 och 7 för övriga fält som du vill
validera.
9
Klicka på OK.
Om du validerar flera fält när besökaren skickar formuläret visas händelsen
onSubmit automatiskt på popup-menyn Händelser.
10
Om du validerar enskilda fält kontrollerar du att standardhändelsen är onBlur
eller onChange.
Om den inte är det väljer du onBlur eller onChange på popup-menyn. Båda dessa
händelser utlöser åtgärden Validera formulär när besökaren flyttar bort från
fältet. Skillnaden mellan dem är att onBlur inträffar oavsett om besökaren har
skrivit i fältet eller inte, medan onChange bara inträffar om besökaren har ändrat
innehållet i fältet. Händelsen onBlur är att föredra när du har angett att fältet är
obligatoriskt.
468
Kapitel 18
19
KAPITEL 19
Felsöka JavaScript-kod
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Med Macromedia Dreamweavers felsökningsprogram för JavaScript kan du
upptäcka fel i JavaScript-koden på klientsidan. Du kan skriva koden i
Dreamweavers kodvy (eller i kodkontrollen) och sedan köra
felsökningsprogrammet för att kontrollera om koden innehåller några syntaxfel
eller logiska fel. Ett syntaxfel gör att webbläsaren visar ett felmeddelande. Ett
logiskt fel gör att sidan inte fungerar på rätt sätt, men utan att webbläsaren visar
något felmeddelande. Felsökningsprogrammet fungerar tillsammans med
Microsoft Internet Explorer och Netscape Navigator i Windows och med
Netscape Navigator på Macintosh. Mer information om hur du skriver skript
finns i ”Infoga skript” på sidan 330.
Först letar felsökningsprogrammet efter syntaxfel i koden, sedan körs det
tillsammans med webbläsaren för att hjälpa dig att kontrollera om det finns några
logiska fel. Om du har logiska fel får du hjälp att isolera felen i JavaScript-koden
genom att undersöka variabler och dokumentegenskaper samtidigt som
programmet körs. Du kan lägga till brytpunkter i koden om du vill stoppa
körningen av programmet och visa värdena på JavaScript-objekt och egenskaper i
en variabellista. Du kan också stega till nästa programsats eller stega in i ett
funktionsanrop och se hur variabelvärdena ändras.
Med felsökningsprogrammet för JavaScript kan du avsevärt minska den tid det tar
att hitta och isolera felen i koden.
469
Köra felsökningsprogrammet
När du har skrivit koden kan du starta felsökningsprogrammet för JavaScript och
söka efter fel. Först letar felsökningsprogrammet efter syntaxfel i koden, sedan
öppnas sidan i webbläsaren så att du kan kontrollera om det finns några logiska fel.
Så här startar du felsökningen:
1
Välj Arkiv > Felsök i webbläsare och välj en webbläsare i listan. Du kan också
klicka på Förhandsgranska/felsök i webbläsare i verktygsfältet (Visa >
Verktygsfält) och välja Felsök i Internet Explorer eller Felsök i Netscape
Communicator.
Om det finns syntaxfel stannar felsökningsprogrammet och felen visas i fönstret
JavaScript-syntaxfel. Se ”Söka efter syntaxfel” på sidan 471.
2
Om du använder Netscape Navigator klickar du på OK i varningsrutan som
visas och sedan på Beviljas i dialogrutan om Java-säkerhet.
Obs! Om du redan har accepterat ett säkerhetscertifikat från Macromedia visas kanske
inte dialogrutan om Java-säkerhet.
3
Om du använder Internet Explorer (endast Windows), klickar du på Ja i
dialogrutan om Java-säkerhet och sedan på OK i felsökningsprogrammets
varningsruta.
Felsökningsprogrammet ansluts till webbläsaren men inte med någon
nätverksanslutning eller anslutningar till servrar på Internet. Webbläsaren visas
med felsökningsprogramfönstret för JavaScript, vilket automatiskt är stoppat på
den första kodraden.
Felsökningsprogramfönstret för JavaScript visas med webbläsarfönstret.
Felsökningsprogrammet stoppar automatiskt på den första kodraden.
Så här kör du felsökningsprogrammet:
Klicka på knappen Kör i felsökningsprogramfönstret för JavaScript.
Så här stoppar du felsökningsprogrammet:
Klicka på knappen Stoppa felsökning i felsökningsprogramfönstret för JavaScript.
Felsökningsprogrammet stängs.
470
Kapitel 19
Söka efter syntaxfel
Om det finns syntaxfel stannar felsökningsprogrammet och felen visas i fönstret
JavaScript-syntaxfel.
Så här visar du felbeskrivningen:
Markera ett fel i fönstret JavaScript-syntaxfel. En beskrivning av felet visas i
området Detaljerad beskrivning.
Gör något av följande när du vill gå till det markerade felet i koden:
• Dubbelklicka på felet.
• Klicka på Gå till rad.
Koden markeras i kodvyn (eller kodkontrollen).
Felsöka JavaScript-kod
471
Söka efter och rätta till logiska fel
När felsökningsprogrammet hittar logiska fel öppnas fönstret Felsökningsprogram
för JavaScript. En brytpunkt läggs automatiskt till på den första raden i koden.
Felsökningsprogrammet stoppar körningen vid varje brytpunkt så att du kan visa
värdena hos JavaScript-objekt och JavaScript-egenskaper i variabelfönstret.
När felsökningsprogrammet stoppar vid en brytpunkt kan du stega igenom koden
(köra en programsats åt gången). På så vis kan du se om programmet körs som det
var tänkt. Felsökningsprogrammet kan till och med stega in i länkad kod. Om
koden exempelvis innehåller en länk till en källfil, stegar felsökningsprogrammet
in i källfilen och visar den i fönstret Felsökningsprogram för JavaScript. Samtidigt
som du stegar igenom koden kan du se hur variabelvärdena ändras i programmet.
Stoppa
felsökning
Kör
472
Kapitel 19
Ta bort alla
brytpunkter
Lägg till/ta bort
brytpunkt
Stega
Procedurstega
Stega till procedurslut
Lägga till brytpunkter
En brytpunkt markerar en viss punkt i koden där du vill att körningen av
programmet ska stoppas. En brytpunkt som du lägger till markeras med en liten
röd punkt i vänstermarginalen i fönstret Felsökningsprogram för JavaScript. När
programmet stoppar körningen vid brytpunkten visas en liten pil ovanpå punkten
och du kan undersöka objekten och egenskaperna som finns vid den punkten i
programmet. Detta gör att du snabbt och enkelt kan hitta källan till problemet i
JavaScript-koden.
Du kan endast lägga till brytpunkter i JavaScript-kod (mellan SCRIPT-koder) eller
på en rad som innehåller en händelsehanterare. Om du lägger till en brytpunkt
någon annanstans kommer den att flyttas till nästa giltiga kodrad (eller också
flyttas insättningspunkten dit om raden redan har en brytpunkt). Om det inte
finns någon giltig rad som brytpunkten kan läggas till på hörs en ljudsignal.
Gör något av följande när du vill lägga till en brytpunkt:
• Placera insättningspunkten på raden som du vill lägga till brytpunkten på i
fönstret Felsökningsprogram för JavaScript och klicka sedan på Lägg till/ta bort
brytpunkt, högst upp i felsökningsprogramfönstret. Om du vill ta bort
brytpunkten klickar du på Lägg till/ta bort brytpunkt igen.
• I kodvyn (eller kodkontrollen) placerar du insättningspunkten på raden som du
vill lägga till brytpunkten på och väljer Redigera > Lägg till brytpunkt eller
väljer Lägg till brytpunkt på popup-menyn Kodnavigering på verktygsfältet.
Du kan också högerklicka (Windows) eller Kontroll-klicka (Macintosh) och
välja Lägg till brytpunkt på snabbmenyn. Om du vill ta bort brytpunkten väljer
du Ta bort brytpunkt på snabbmenyn.
Felsöka JavaScript-kod
473
Gör något av följande när du vill ta bort alla brytpunkter:
• Klicka på knappen Ta bort alla brytpunkter i fönstret Felsökningsprogram för
JavaScript.
• I kodvyn (eller kodkontrollen) väljer du Ta bort alla brytpunkter på popupmenyn Kodnavigering på verktygsfältet eller väljer Redigera > Ta bort alla
brytpunkter.
Stega genom kod
Du kan stega igenom koden om du vill köra en programsats åt gången och
övervaka vad som händer i programmet. Du kan exempelvis procedurstega i en ifsats och se om programmet stoppar på den första raden efter i villkorssatsen eller
på den andra körbara raden efter if-satsen.
När felsökningsprogrammet stoppar vid en programsats som innehåller ett
funktionsanrop kan du kontrollera funktionen och se att den körs på rätt sätt. Om
funktionen är riktig kan du stega till procedurslut och låta felsökningsprogrammet
köra tills funktionen avslutas. Programmet stoppar på nästa programsats efter
funktionsanropet. Om du försöker stega i en programsats som innehåller en
JavaScript-funktion som inte är standard blir beteendet det samma som att
procedurstega.
Så här procedurstegar du en programsats:
Klicka på Procedurstega överst i fönstret Felsökningsprogram för JavaScript.
När programmet stoppar vid en programsats (inklusive de med funktionsanrop)
kan du procedurstega den programsatsen och stoppa före nästa programsats.
Så här stegar du en funktion:
Klicka på Stega överst i fönstret Felsökningsprogram för JavaScript.
Så här stegar du till procedurslut:
Klicka på Stega till procedurslut.
Du kan endast använda Stega till procedurslut om felsökningsprogrammet
befinner sig i en egendefinierad funktion. När du stegar till procedurslut körs
resten av programsatserna i funktionen. Felsökningsprogrammet stoppar vid nästa
programsats.
474
Kapitel 19
Visa och redigera variabelvärden
Om du vill kontrollera variabelvärdena samtidigt som du stegar genom koden
använder du variabellistan i Dreamweaver, som finns i den nedre rutan i fönstret
Felsökningsprogram för JavaScript. Du anger variabelnamn i den vänstra
kolumnen. I den högra kolumnen visas det aktuella värdet för varje variabel när
programmet stoppas vid en brytpunkt eller efter att du har stegat i koden.
Gör något av följande när du vill lägga till en variabel i variabellistan:
• Markera variabelnamnet i koddelen i fönstret Felsökningsprogram för
JavaScript. Klicka på plustecknet (+) och tryck på Retur.
• Klicka på plustecknet (+), skriv variabelnamnet som du vill bevaka och tryck på
Retur.
Värdena visas efter varje variabel samtidigt som du stegar genom koden. Om
variabeln är ett objekt med egenskaper kan du expandera variabeln (visa dess
egenskaper och värden) genom att klicka på plustecknet (+) (Windows) eller
triangeln (Macintosh) bredvid variabeln i listan. Den expanderade variabeln
komprimeras automatiskt när du stegar igenom koden.
Så här tar du bort en variabelpost i listan:
1
Markera posten i variabellistan.
2
Klicka på minustecknet (-).
Felsöka JavaScript-kod
475
Så här redigerar du ett värde:
476
Kapitel 19
1
Markera posten i variabellistan.
2
Klicka på värdet i värdelistan.
3
Redigera värdet genom att skriva i textrutan som visas.
20
KAPITEL 20
Skapa formulär
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Med hjälp av formulär kan du interagera med eller samla information från
besökarna på din webbplats. Du kan exempelvis fråga efter en användares namn
och e-postadress eller be besökarna fylla i en enkät, skriva i en gästbok eller skicka
feedback om hur platsen fungerar.
Formulär består av två delar: HTML-källkod som beskriver formuläret
(exempelvis fälten, etiketterna och knapparna som en användare ser på sidan) och
ett skript eller program som bearbetar informationen som skickas (exempelvis ett
CGI-skript). Du kan inte samla formulärdata utan att använda ett
bearbetningsskript.
1. Besökaren fyller i
formuläret och skickar det
till en webbserver för
bearbetning.
2. CGI-skript
bearbetar
formuläret.
CGI-bin
3. Ett nytt HTML-dokument
skapas och skickas till
besökaren.
Du kan använda Macromedia Dreamweaver för att skapa en mängd olika
formulärobjekt som textfält, lösenordsfält, alternativknappar, kryssrutor, listrutor
och klickbara bilder (exempelvis en Skicka-knapp).
Du kan också använda Dreamweaver-beteendet Validera formulär för att verifiera
den information som besökarna ger. Du kan exempelvis kontrollera att en epostadress innehåller en @-symbol eller att ett obligatoriskt fält innehåller en
inmatning.
477
CGI-skript
Formulär bearbetas vanligtvis med CGI-skript (Common Gateway Interface).
CGI är ett standardiserat sätt att skicka information mellan en server och ett
bearbetningsskript. CGI-skript skrivs normalt i Perl eller något annat
programmeringsspråk, exempelvis C++, Java, VBScript eller JavaScript. Innan du
skapar interaktiva formulär bör du fråga din Internetleverantör eller
serveradministratör om det går att köra CGI-skript på servern.
Formulärobjekt
I Dreamweaver kallas de olika typerna av formulärinmatning för formulärobjekt. Du
kan infoga formulärobjekt genom att använda kategorin Formulär på objektpanelen
eller genom att välja Infoga > Formulär och Infoga > Formulärobjekt.
Kategorin Formulär innehåller följande ikoner:
infogar ett formulär i dokumentet. Inledande och avslutande
infogas i HTML-källkoden. Alla övriga formulärobjekt (exempelvis
textfält, knappar o.s.v.) måste infogas mellan FORM-koderna för att informationen
ska kunna bearbetas på rätt sätt i alla webbläsare.
Infoga formulär
FORM-koder
infogar ett textfält i ett formulär. Textfält accepterar alla sorters
textinmatningar, såväl alfabetiska som numeriska. Texten som anges kan visas på
en rad, flera rader eller som punkter eller asterisker (för lösenordsskydd).
Infoga textfält
Infoga knapp infogar en textknapp i ett formulär. När besökarna klickar på
knappar utförs uppgifter, exempelvis att formulär skickas eller återställs. Du kan
lägga till ett eget namn eller en egen etikett på en knapp eller använda en av de
fördefinierade etiketterna: Skicka eller Återställ.
478
Kapitel 20
Infoga kryssruta infogar en kryssruta i ett formulär. Kryssrutor möjliggör flera svar
i en grupp med alternativ. En användare kan markera så många alternativ som
passar.
infogar en alternativknapp i ett formulär.
Alternativknappar motsvarar alternativ som utesluter andra val. När en knapp i en
grupp markeras, avmarkeras alla andra alternativ i gruppen. En användare kan
exempelvis markera Ja eller Nej.
Infoga alternativknapp
använder du för att skapa en lista som användarna kan välja i.
Med alternativet Lista visar du alternativvärdena i en rullningslista där användarna
kan markera flera alternativ. Med alternativet Meny visar du alternativvärdena i en
listruta där användarna bara kan markera ett alternativ.
Infoga lista/meny
infogar ett tomt textfält och en bläddringsknapp i ett dokument.
Filfält ger användarna möjlighet att bläddra till filer på sina hårddiskar och skicka
filerna som formulärdata.
Infoga filfält
gör att du kan infoga en bild i ett formulär. Bildfält kan användas i
stället för Skicka-knappar när du vill göra grafiska knappar.
Infoga bildfält
infogar ett fält i dokumentet som användardata kan sparas i. I
dolda fält kan du spara information som anges av användaren, exempelvis namn,
e-postadress eller intresseområden, och sedan använda dessa data nästa gång som
användaren besöker webbplatsen.
Infoga dolt fält
infogar en lista eller listruta för navigering. Med hoppmenyer
kan du infoga en lista där varje alternativ är länkat till ett dokument eller en fil. Se
”Skapa hoppmenyer” på sidan 364.
Infoga hoppmeny
Skapa ett formulär
Ett formulär innehåller egenskaper som är osynliga för användaren. Egenskaperna
anger hur formuläret ska bearbetas.
Ett formulär består av tre huvuddelar:
•
FORM-koder,
som innehåller dels URL-adressen för det CGI-skript som ska
bearbeta formuläret, dels den metod som används för att skicka formulärets
data till en server
• Formulärfält, som innehåller textfält, listor/menyer, kryssrutor eller
alternativknappar
• Skicka-knappen, som skickar formulärets data till CGI-skriptet på servern
Obs! Om du försöker infoga ett formulärobjekt innan du har skapat formuläret visas
meddelandet ”Lägg till formulärkod?” i Dreamweaver. Klicka på Ja så att FORM-koder
skapas för objektet.
Skapa formulär
479
Så här lägger du till ett formulär i ett dokument:
1
Placera insättningspunkten där du vill att formuläret ska finnas i dokumentet
och gör sedan något av följande:
• Klicka på ikonen Infoga formulär i kategorin Formulär på objektpanelen.
• Välj Infoga > Formulär.
När ett formulär skapas visas en streckad röd kontur i dokumentfönstret. Om
du inte ser denna kontur kontrollerar du att Visa > Visuella hjälpmedel >
Osynliga element är markerat.
2
Klicka på formulärkonturen i dokumentet så att den markeras (om den inte
redan är det).
3
Skriv ett unikt namn i fältet Formulärnamn i egenskapskapskontrollen så att
formuläret får en etikett.
Genom att namnge ett formulär kan du referera och styra det med ett
skriptspråk, exempelvis JavaScript eller VBScript.
480
Kapitel 20
4
Ange i fältet Åtgärd sökvägen till den URL-adress där bearbetningsskriptet eller
programmet som ska bearbeta formulärinformationen finns genom att göra
något av följande:
• Klicka på mappikonen och bläddra till mappen.
• Skriv den fullständiga sökvägen till mappen.
Om du anger en sökväg till ett CGI-skript ser sökvägen till URL-adressen ut
ungefär som i detta exempel:
http://www.minplats.com/cgi-bin/process.cgi
5
Välj i listrutan Metod vilken metod som ska användas för att hantera
formulärets data.
• Välj POST när du vill att formulärvärdena ska skickas i ett meddelande.
• Välj GET när du vill att informationen ska skickas till servern med
formulärvärdena bifogade i URL-adressen.
Obs! Använd inte metoden GET för långa formulär. URL-adresser kan högst innehålla
8 192 tecken. Om mängden data som skickas är större kortas den ner, vilket leder till
oväntade bearbetningsresultat. Du bör heller inte använda GET när du hanterar
kreditkortsnummer eller annan konfidentiell information eftersom denna metod att
överföra information inte är säker.
• Välj Standard när du vill använda standardinställningen i användarens
webbläsare för hur formulärdata ska skickas, vilket vanligtvis är metoden GET.
Formulärfält
När du väl har lagt till FORM-koder i dokumentet kan du börja lägga till
formulärobjekt. Du använder formulärobjekt för att begära information från
platsbesökarna.
Använd formulärfält när du vill skapa ett formulär som besökarna skriver svar i,
exempelvis namn och adresser. Det finns tre sorters fält som du kan infoga i ett
formulär: textfält (där användaren skriver svar), filfält (där användaren anger
sökvägen till en fil som ska skickas till din server) och dolda fält (där information
som användaren angett i något annat fält sparas).
När du lägger till ett fält i ett formulär kan du ange fältets längd, antal rader i
fältet, antal tecken som användaren kan ange och om fältet är ett lösenordsfält.
Skapa formulär
481
Skapa textfält
Ett textfält är ett formulärobjekt som användarna skriver ett svar i.
Det finns tre typer av textfält:
Enradiga textfält används
vanligtvis för att ge plats åt ett svar som bara består av
ett enda ord eller en kortare fras, exempelvis ett namn eller en adress.
Flerradiga textfält ger
besökaren mer utrymme för svaret. Du kan enkelt ange hur
många tecken eller rader som besökaren ska kunna använda.
är en speciell typ av textfält. När en användare skriver i ett
lösenordsfält döljs texten som skrivs och visas som asterisker eller punkter i stället.
Lösenordsfält
Obs! Lösenord som skickas till en server i detta läge är inte krypterade, så
dataöverföringen är inte säker.
Så här skapar du ett enradigt textfält eller ett lösenordsfält:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Textfält.
• Klicka på ikonen Infoga textfält i kategorin Formulär på objektpanelen.
Ett textfält visas i dokumentet.
2
Skriv ett unikt namn i fältet Textfält i egenskapskontrollen.
Se till att namnet är unikt. Du kan inte ha dubbletter av textfältsnamn i ett
formulär. Mellanslag får inte förekomma. Använd i stället understrykning när
du vill skilja ord åt. Skriv exempelvis antal_rum i stället för antal rum.
482
Kapitel 20
3
Gör något av följande i fältet Teckenbredd:
• Acceptera standardinställningen som anger att textfältet kan innehålla ungefär
24 tecken.
• Skriv ett värde när du vill ange textfältets längd.
4
Gör något av följande i fältet Max. tecken:
• Låt fältet vara tomt om du vill användarna ska kunna skriva så mycket de vill.
Om användarens inmatning överskrider textfältets teckenbredd (längd) rullas
texten.
• Skriv ett värde om du vill ange maximalt antal tecken som användaren kan
skriva i fältet.
Du kan exempelvis begränsa ett åldersfält till tre siffror eller ett lösenordsfält till
åtta tecken. Om en användare överskrider det maximala antalet tecken hörs ett
varningsljud.
5
Ange vilken typ av textfält du vill skapa genom att göra något av följande:
• Markera En rad om du vill skapa ett enradigt textfält.
• Markera Lösenord om du vill skapa ett lösenordsfält.
6
Om du vill ange standardtext för ett textfält skriver du texten i fältet Startvärde
i egenskapskontrollen.
Denna text visas i textfältet när formuläret läses in i användarens webbläsare.
7
Skriv en etikett eller beskrivande text bredvid objektet (valfritt).
Du kan använda textformatering på etiketter för formulärobjekt. Mer
information finns i ”Ange och ändra teckensnitt och stil” på sidan 233.
Så här skapar du ett textområde med flera rader:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Textfält.
• Klicka på ikonen Infoga textfält i kategorin Formulär på objektpanelen.
Ett textfält visas i dokumentet.
2
Skriv ett namn på textfältsobjektet i fältet Textfält i egenskapskontrollen.
Se till att namnet är unikt. Du kan inte ha dubbletter av textfältsnamn i ett
formulär. Mellanslag får inte förekomma. Använd i stället understrykning när
du vill skilja ord åt. Skriv exempelvis feedback_från_besökare i stället för
feedback från besökare.
3
Markera Flera rader för Typ.
Skapa formulär
483
4
Gör något av följande i fältet Teckenbredd:
• Acceptera standardinställningen som anger textområdets längd till 20 tecken.
• Skriv ett värde när du vill ange textområdets längd.
5
Gör något av följande i fältet Antal rader:
• Acceptera standardinställningen som är ett tvåradigt textfält.
• Skriv ett värde när du vill ange antal rader för textområdet.
6
Markera i listrutan Radbryt en inställning som anger hur en en användares
inmatning ska visas när hon/han skriver mer information än vad som kan visas
i textområdet.
• Markera Av eller Standard om du vill förhindra att text radbryts till nästa rad.
När användarens inmatning överskrider textområdets högra gräns rullas texten
åt vänster. Användaren måste trycka på Retur för att flytta insättningspunkten
till nästa rad i textområdet.
• Markera Virtuell när du vill ange radbrytning i textområdet.
När användarens inmatning överskrider textområdets högra gräns radbryts
texten till nästa rad. När informationen skickas för att bearbetas används
emellertid inte radbrytning. All information skickas som en enda sträng.
• Markera Fysisk när du vill ange radbrytning såväl i textområdet som i
informationen när den skickas för att bearbetas.
7
Om du vill ange standardtext för ett textfält skriver du texten i fältet Startvärde
i egenskapskontrollen.
Denna text visas i textfältet när formuläret läses in i användarens webbläsare.
8
Skriv en etikett eller beskrivande text bredvid objektet (valfritt).
Du kan använda textformatering på etiketter för formulärobjekt. Mer
information finns i ”Ange och ändra teckensnitt och stil” på sidan 233.
Ge besökarna möjlighet att skicka filer till din server
I vissa fall kan den information som du behöver från platsbesökarna vara för
komplicerad för att kunna anges i ett textfält. Du kanske vill att besökarna ska
skicka en hel fil till din server, exempelvis en snyggt formaterad meritförteckning,
en grafikfil eller något annat dokument. Du kan infoga ett filfält i ett formulär för
detta ändamål.
Ett filfält ser likadant ut som andra textfält, förutom att det också innehåller en
bläddringsknapp. Användarna kan skriva sökvägen till den fil som de vill skicka
eller använda bläddringsknappen för att söka efter och markera dokumentet de
vill skicka.
484
Kapitel 20
Om du vill använda ett filfält måste du ange POST som formulärmetod.
Besökarnas filer skickas till den adress som du anger i fältet Åtgärd för formuläret.
Obs! Kontrollera med serveradministratören att anonyma filsändningar är tillåtna innan du
använder filfältet. Om du infogar ett filfält med Dreamweaver måste du manuellt infoga
ENCTYPE="multipart/form-data" i FORM-koden för att se till att filen blir korrekt kodad.
Så här skapar du ett filfält i ett formulär:
1
Markera formuläret genom att klicka i formulärkonturen. Ange alternativet
POST för egenskapen Metod i egenskapskontrollen.
2
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Filfält.
• Klicka på ikonen Infoga filfält i kategorin Formulär på objektpanelen.
Ett filfält visas i dokumentet.
3
Skriv ett namn på filfältsobjektet i fältet Filfält i egenskapskontrollen.
4
I textrutan Teckenbredd anger du ett värde för maximalt antal tecken som du
vill ska visas i fältet.
5
I textrutan Max. tecken anger du ett värde för maximalt antal tecken som fältet
kan innehålla.
Skapa ett dolt fält
Dolda fält visas inte för platsbesökarna. De är osynliga element som du placerar i
ett dokument för att samla eller skicka information. Informationen i dolda fält
sänds tillbaka till servern när ett formulär skickas och använder det namn/värdepar som du definierar när du gör inställningar för det dolda fältet.
När du infogar ett dolt fält läggs en markör till i dokumentet. Om du inte ser
någon skiktmarkör när du har infogat ett dolt fält väljer du Visa > Visuella
hjälpmedel > Osynliga element för att visa den.
Så här skapar du ett dolt fält:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Dolt fält.
• Klicka på ikonen Infoga dolt fält i kategorin Formulär på objektpanelen.
En markör visas i dokumentet.
2
Skriv ett unikt namn i fältet Dolt fält i egenskapskontrollen.
3
Skriv i fältet Värde det värde du vill tilldela fältet.
Skapa formulär
485
Infoga kryssrutor och alternativknappar
Använd formulärobjekten kryssrutor och alternativknappar när du vill ange
fördefinierade alternativ. En användare markerar en kryssruta eller klickar på en
alternativknapp för att göra ett val.
Det är skillnad på hur kryssrutor och alternativknappar fungerar. Med kryssrutor
aktiverar och avaktiverar användarna varje enskilt alternativ. Kryssrutealternativ
fungerar oberoende av varandra. En användare kan markera fler än ett alternativ i
en grupp med kryssrutor.
486
Kapitel 20
Alternativknappar fungerar som en grupp där varje enskilt värde utesluter de
andra. Bara ett alternativ i en grupp med alternativknappar kan markeras.
Infoga en kryssruta
Med kryssrutor kan användaren markera fler än ett alternativ i en grupp.
Varje kryssruteobjekt i ett formulär är ett enskilt element och måste ha ett unikt
namn i fältet Kryssruta.
Så här infogar du en kryssruta:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Kryssruta.
• Klicka på ikonen Infoga kryssruta i kategorin Formulär på objektpanelen.
2
Skriv ett beskrivande namn för kryssrutan i fältet Kryssruta i egenskapskontrollen.
Obs! Varje kryssruta du lägger till i ett formulär måste ha ett unikt namn.
3
Skriv ett värde för kryssrutan i fältet Kontrollerat värde.
I en enkät kan du exempelvis ange värdet 4 för ”Ja, absolut” och värdet 1 för
”Nej, absolut inte”.
4
Ange Markerad för Startläge om du vill att ett alternativ ska vara markerat när
formuläret läses in i webbläsaren.
Skapa formulär
487
Infoga en alternativknapp
Använd alternativknappar när användaren bara ska kunna välja ett av flera
alternativ. Alternativknappar används vanligtvis i grupper. Alla alternativknappar i
en grupp måste ha samma namn men olika fältvärden.
Så här infogar du alternativknappar:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Alternativknapp.
• Klicka på ikonen Infoga alternativknapp i kategorin Formulär på
objektpanelen.
2
Skriv ett beskrivande namn för alternativgruppen i fältet Alternativknapp i
egenskapskontrollen.
Obs! Om du skapar flera grupper med alternativknappar i ett formulär måste du se till att
varje grupp har ett unikt namn.
3
I fältet Kontrollerat värde skriver du det värde som du vill ska skickas till
programmet eller bearbetningsskriptet på serversidan när användaren markerar
denna alternativknapp. Du kan exempelvis skriva golf i fältet Kontrollerat
värde för att visa att användaren har angett golf.
4
Ange Markerad för Startläge om du vill att ett alternativ ska vara markerat när
formuläret läses in i webbläsaren.
Tips! Om du vill lägga till fler alternativknappar i gruppen markerar du den ursprungliga
alternativknappen och Ctrl-drar (Windows) eller Alternativ-drar (Macintosh) den. Ändra
värdet i fältet Kontrollerat värde för varje ny knapp.
Listor och menyer
Använd en lista eller meny (listruta) med alternativ när du vill ge användaren
många valmöjligheter på ett begränsat utrymme. Du skapar visserligen
formulärlistor och formulärmenyer i samma egenskapskontroll, men listor och
menyer används på olika sätt av användaren.
Använd en lista när du vill styra hur många alternativ som visas. Du anger listans
radhöjd. När antalet listalternativ överskrider radhöjden visas en rullningslist så
att användarna kan visa alla alternativ. Du kan också ge användarna möjlighet att
markera flera poster i en lista.
Använd en meny (listruta) när utrymmet är starkt begränsat. En meny har en
enradig post och innehåller en nedpil som användaren klickar på för att visa övriga
alternativ. Användaren kan bara välja ett menyalternativ åt gången.
488
Kapitel 20
Skapa en rullningslista
Med hjälp av rullningslistor kan du ange flera alternativ på ett begränsat
uttrymme. Du kan ange listans radhöjd och ge användarna möjlighet att markera
flera alternativ i listan.
Så här skapar du en rullningslista:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Klicka på ikonen Infoga lista/meny i kategorin Formulär på objektpanelen.
• Välj Infoga > Formulärobjekt > Lista/meny och markera elementet som skapas,
om det behövs.
2
Skriv ett unikt namn för listan i fältet Lista/meny i egenskapskontrollen.
3
Markera Lista bredvid Typ.
4
Skriv i fältet Höjd ett värde som anger hur många rader av listan som ska visas.
Standardradhöjden är 4. Rullningslister visas när du anger ett mindre antal
rader än antalet alternativ i listan.
5
Om du vill att användarna ska kunna markera fler än ett alternativ i listan
markerar du Tillåt flera (bredvid Markeringar).
6
Klicka på Listvärden när du vill lägga till alternativen.
Dialogrutan Listvärden visas.
7
Placera insättningspunkten i fältet Postetikett och skriv texten som du vill ska
visas i listan.
8
Skriv i fältet Värde den text eller de data som du vill ska skickas till servern när
användaren markerar denna post.
9
Klicka på plustecknet (+) när du vill lägga till nästa post i alternativlistan och
upprepa sedan steg 7 och 8.
10
När du har lagt till alla poster du vill ha i listan klickar du på OK för att stänga
dialogrutan Listvärden.
Egenskapskontrollen visas. Alternativen i listan visas i fältet Markerat från början.
11
Markera det alternativ i listan som du vill ska vara markerat när listan visas för
användaren.
Skapa formulär
489
Skapa en meny (listruta)
Med hjälp av menyer (listrutor) kan du ange flera alternativ på ett begränsat
uttrymme. Bara ett alternativ på menyn visas när formuläret läses in i en
webbläsare.
Användarna klickar på nedpilen för att visa samtliga alternativ på en meny.
Så här skapar du en meny (listruta):
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Klicka på ikonen Infoga lista/meny i kategorin Formulär på objektpanelen.
• Välj Infoga > Formulärobjekt > Lista/meny.
2
Skriv ett unikt namn för menyn i fältet Lista/meny i egenskapskontrollen.
3
Markera Meny bredvid Typ.
4
Klicka på Listvärden när du vill lägga till alternativen.
Dialogrutan Listvärden visas.
5
Placera insättningspunkten i fältet Postetikett och skriv texten som du vill ska
visas i listan.
6
I fältet Värde skriver du den text eller de data som du vill ska skickas till servern
när användaren markerar denna post.
7
Klicka på plustecknet (+) när du vill lägga till nästa post i alternativlistan och
upprepa sedan steg 6 och 7.
8
När du har lagt till alla poster du vill ha i listan klickar du på OK för att stänga
dialogrutan Listvärden.
Egenskapskontrollen visas. Alternativen i listan visas i fältet Markerat från
början.
490
Kapitel 20
Formulärknappar
Formulärknappar styr formulärfunktioner. Du kan använda en formulärknapp för
att skicka data från en användare till en server för bearbetning. Du kan också
använda en formulärknapp för att återställa ett formulär så att användarna kan
korrigera information innan de skickar sina data. Dessutom kan du använda en
knapp för att utföra andra bearbetningsuppgifter som du har definierat i ett
bearbetningsskript. Du kan exempelvis använda en formulärknapp för att beräkna
en order baserat på värden i angivna fält.
Skapa formulärknappar med text
En formulärknapp med text är en vanlig standardknapp i webbläsarformat som
innehåller den text du vill visa, exempelvis Skicka, Återställ eller Beräkna order.
Så här skapar du en textknapp:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj Infoga > Formulärobjekt > Knapp.
• Klicka på ikonen Infoga knapp i kategorin Formulär på objektpanelen.
2
Skriv ett namn på knappen i fältet Knappnamn i egenskapskontrollen.
Obs! Det finns två reserverade namn: Skicka, som skickar formulärdata för bearbetning,
och Återställ, som återställer alla formulärfält till ursprungsvärdena.
3
Skriv texten, som du vill ska visas på knappen, i fältet Etikett i
egenskapskontrollen.
4
Gör något av följande i fältet Åtgärd:
• Markera Skicka om du vill att formuläret ska skickas för bearbetning när
besökaren klickar på knappen.
• Markera Återställ om du vill att formuläret ska återställas när besökaren klickar
på knappen.
• Markera Inget om du vill att en annan åtgärd baserad på bearbetningsskriptet
ska aktiveras när besökaren klickar på knappen (exempelvis att en totalsumma
beräknas).
Skapa formulär
491
Skapa en grafisk Skicka-knapp
Du kan göra knappen Skicka mer anslående i ett formulär genom att lägga till en
bild med hjälp av kommandot Infoga bildfält.
Du kan också använda grafiska knappar för att utföra formuläråtgärder som
exempelvis att återställa formulär eller spela upp ljud. När du vill använda en bild
för att utföra andra uppgifter än att skicka data måste du koppla ett beteende till
formulärobjektet. Du kan använda beteendepanelen i Dreamweaver för att koppla
ett beteende eller också kan du lägga till funktioner i formuläret med JavaScriptkod. Information om hur du kopplar ett beteende till ett objekt finns i ”Koppla
ett beteende” på sidan 437.
Så här skapar du en grafisk Skicka-knapp:
1
Placera insättningspunkten innanför formulärkonturen i dokumentet och gör
sedan något av följande:
• Välj Infoga > Formulärobjekt > Bildfält.
• Klicka på ikonen Infoga bildfält i kategorin Formulär på objektpanelen.
2
Ändra texten i fältet Bildfält till Skicka i egenskapskontrollen för bildfältet.
3
Klicka på mappikonen i fältet Källa och bläddra till bilden som du vill infoga
på sidan.
4
Skriv i fältet Alt. den text som ska visas i stället för bilden i webbläsare som
endast visar text eller i webbläsare som är konfigurerade att ladda ned bilder
manuellt.
Formulärutformning
Du kan använda radbrytningar, styckebrytningar, förformaterad text eller tabeller
för att formatera formulären. Du kan inte infoga ett formulär i ett annat formulär
(d.v.s. att du inte kan överlappa koder), men du kan använda fler än ett formulär
på en sida.
När du utformar formulär ska du komma ihåg att ge formulärfälten etiketter med
beskrivande text så att användarna vet vad de ska svara (exempelvis ”Skriv ditt
namn” när du begär namninformation).
492
Kapitel 20
Lägga till flera objekt i ett formulär
Du kan infoga flera formulär i ett dokument och även på en webbsida. Se bara till
att formulären inte överlappar varandra.
Så här lägger du till flera objekt i ett formulär:
1
Placera insättningspunkten innanför formulärkonturen och gör sedan något av
följande:
• Välj ett objekt på menyn Infoga > Formulärobjekt.
• Klicka i kategorin Formulär på objektpanelen på ikonen för det objekt som du
vill infoga i formuläret.
2
Ange egenskaper för objektet i egenskapskontrollen (välj Fönster > Egenskaper
för att visa egenskapskontrollen om den inte är öppen).
Infoga tabeller i formulär
Du kan utforma mer effektfulla formulär genom att infoga tabeller i dem. Använd
tabeller när du vill skapa en struktur för formulärobjekt och fältetiketter. Tabeller
gör det enklare att rada upp alternativ både lodrätt och vågrätt. När du använder
tabeller i formulär måste du se till att samtliga TABLE-koder är placerade mellan
FORM-koderna.
Skapa formulär
493
Bearbeta formulär
Formulär bearbetas av det skript eller program som anges i attributet ACTION i
FORM-koden. Markera ett formulär och se efter i egenskapskontrollen vilken som
är den associerade åtgärden.
De enklaste formulären använder JavaScript eller VBScript för att utföra all
formulärbearbetning på klientsidan (i stället för att skicka formulärdata till servern
för att de ska bearbetas där). Du kan exempelvis ha ett litet formulär längst ned på
en sida som endast innehåller två alternativknappar med etiketterna Ja och Nej
samt en knapp med etiketten Skicka. Formuläråtgärden kan vara en JavaScriptfunktion som är definierad i dokumentets HEAD-del och som visar ett meddelande
om användaren markerar Ja och ett annat om användaren markerar Nej:
function processForm(){
if (document.forms[0].elements[0].checked){
alert('Ja');
}else{
alert('Nej');
}
}
Så här använder du en JavaScript-funktion på klientsidan som formuläråtgärd:
1
Markera en knapp med etiketten Skicka i ett formulär.
2
Koppla beteendet Anropa JavaScript till knappen. (Se ”Anropa JavaScript” på
sidan 444.)
3
Ange processForm() i textrutan JavaScript som visas när beteendet kopplas.
4
Lägg till en JavaScript-funktion av typen processForm() (som den ovan) i
dokumentets HEAD-del.
Du kan hantera många åtgärder för formulärbearbetning med hjälp av skript på
klientsidan, men du kan inte spara de data som användaren anger eller skicka dem
till någon annan. För sådana ändamål behöver du ett program på serversidan,
exempelvis ett CGI-skript (Common Gateway Interface). CGI-skript kan skrivas i
Perl, C, Java eller andra programmeringsspråk. Det finns flera platser på webben
som tillhandahåller kostnadsfria CGI-skript som du kan använda (se ”HTMLoch webbteknikresurser” på sidan 24). Du kan ändra dessa skript så att de passar
dina behov. Du kan också fråga din Internetleverantör eller webbgrupp om det
finns några tillgängliga CGI-skript som redan är konfigurerade för att köras på din
server.
En introduktion till CGI-skript finns bland CGI-resurserna i ”HTML- och
webbteknikresurser” på sidan 24.
494
Kapitel 20
Använda beteenden med formulär
Du kan koppla beteenden till formulär och formulärobjekt genom att använda de
beteenden som visas på beteendepanelen när formuläret eller formulärobjektet är
markerat. Beteendena Validera formulär och Ange texten i textfältet är endast
tillgängliga om ett textfält har infogats i dokumentet. När du kopplar beteendet
Validera formulär till ett formulärobjekt måste du ange vilket textfält som ska
valideras. Om du exempelvis kopplar Validera formulär till knappen Skicka kan
du ange ett textfält som har skapats för ”Namn” för att kontrollera att användaren
har angett text i fältet Namn.
När du använder beteenden måste du se till att alla formulärobjekt i dokumentet
(och alla andra objekt) har unika namn. Om du använder samma namn på två
olika objekt är det inte säkert att beteendena fungerar, även om objekten finns i
olika formulär.
De två formulärspecifika beteendena beskrivs nedan. Information om andra
beteenden finns i ”Använda beteenden” på sidan 433.
går igenom innehållet i angivna textfält för att kontrollera att
användaren har angett rätt typ av information. Se ”Validera formulär” på
sidan 467.
Validera formulär
Ange texten i textfältet ersätter
innehållet i ett angivet textfält med det innehåll
som du anger. Se ”Ange texten i textfältet” på sidan 462.
Skapa formulär
495
496
Kapitel 20
21
KAPITEL 21
Testa och publicera en plats
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Innan du lägger upp platsen på en server och tillkännager att den är klar för
besökare, bör du testa den lokalt. (Faktum är att det är bra att testa och felsöka
platsen ofta under uppbyggnadsskedet. Du kan då upptäcka problem på ett tidigt
stadium och undvika att de uppstår igen.) Du vill ju vara säker på att sidorna ser
ut och fungerar så som du förväntar dig i målwebbläsarna, att det inte finns några
brutna länkar och att sidorna inte tar för lång tid att ladda ned. Du kan också testa
och felsöka hela platsen genom att köra en platsrapport innan du publicerar
platsen.
Följande riktlinjer kan hjälpa dig att skapa bra och funktionella sidor:
• Kontrollera att sidorna fungerar som du vill i målwebbläsarna. I andra
webbläsare bör de ”misslyckas på ett snyggt sätt”. Sidorna bör vara lättlästa och
funktionella i webbläsare som inte stöder formatmallar, skikt, insticksprogram
eller JavaScript. (Se ”Kontrollera webbläsarkompatibilitet” på sidan 498.) Om
du har sidor som inte fungerar alls i äldre webbläsare bör du överväga att
använda beteendet Kontrollera webbläsare för att automatiskt dirigera om
besökare till en annan sida. (Se ”Kontrollera webbläsare” på sidan 445.)
• Förhandsgranska sidorna i så många webbläsare och på så många olika
plattformar som möjligt. Detta ger dig en chans att se skillnader i layout, färg,
teckenstorlek och standardstorlek på webbläsarfönster som inte kan ses i en
kontroll av målwebbläsare. (Se ”Förhandsgranska i webbläsare” på sidan 500.)
• Kontrollera platsen så att det inte finns några brutna länkar (åtgärda dem i så
fall). Andra platser görs också om och sidan du länkar till kanske har flyttats
eller tagits bort. Om du har en enkel lista över länkar till externa platser kan du
köra en länkkontroll. Annars kan du köra en rapport för hela platsen som söker
efter och skapar en rapport om felaktiga externa länkar. (Se ”Kontrollera länkar
på en sida eller plats” på sidan 502, ”Öppna länkade dokument i
Dreamweaver” på sidan 504 eller ”Skapa rapporter” på sidan 506.)
497
• Kontrollera sidornas storlek och hur lång tid det tar för dem att laddas ned. När
det gäller sidor som består av en stor tabell bör du ha i minnet att besökarna
inte kommer att se någonting förrän hela tabellen har lästs in. Överväg att dela
upp stora tabeller. Om det inte är möjligt kanske du bör lägga en liten del av
innehållet, exempelvis ett välkomstmeddelande eller en reklamremsa, utanför
tabellen överst på sidan så att användarna kan titta på detta medan tabellen
läses in. (Se ”Kontrollera nedladdningstid och storlek” på sidan 505. Mer
information om hur du använder skiktbeteenden för att dölja innehållet på
skärmen när en sida läses in finns i ”Visa-dölj skikt” på sidan 463.)
• Kör några platsrapporter så att du testar och felsöker hela platsen. Du kan söka
igenom hela platsen för att kontrollera om det finns några problem med
exempelvis namnlösa dokument, tomma koder och överflödiga kapslade koder.
Om du kör dessa rapporter innan du publicerar platsen får du färre problem
längre fram. (Se ”Skapa rapporter” på sidan 506.)
• Du kan publicera din plats (d.v.s. lägga ut den på webben) på flera olika sätt
och detta arbete är en fortgående process. Även efter att platsen har publicerats
fortsätter du eller din grupp att uppdatera och underhålla den. Arbetet med att
definiera och implementera ett versionskontrollsystem, antingen med
verktygen som ingår i Dreamweaver eller med ett externt
versionskontrollprogram, är viktigt.
• Använd de olika diskussionsforum för Macromedia Dreamweaver som finns på
Macromedias webbplats. Detta är en utmärkt resurs när du vill ha information
om olika webbläsare, plattformar m.m.
Kontrollera webbläsarkompatibilitet
I Dreamweaver kan du skapa webbsidor med element som stöds i alla webbläsare
(exempelvis bilder och textstycken) samt element som endast stöds i de nyare
webbläsarna (exempelvis formatmallar och skikt).
Funktionen Kontrollera i målwebbläsare testar HTML-koden i dokumentet för
att se om det finns några koder eller attribut som inte stöds av målwebbläsarna.
Denna kontroll ändrar inte dokumentet på något sätt.
Funktionen Kontrollera i målwebbläsare använder textfiler, så kallade
webbläsarprofiler, för att se vilka koder som de olika webbläsarna stöder. I
Dreamweaver finns fördefinierade profiler för Netscape Navigator version 2.0, 3.0
och 4.0 och för Microsoft Internet Explorer version 2.0, 3.0, 4.0 och 5.0.
Information om hur du ändrar de befintliga profilerna och hur du skapar nya
finns i ”Skapa och redigera en webbläsarprofil” på sidan 529.
Du kan köra en kontroll av målwebbläsare på ett dokument, en katalog eller en
hel plats. Observera att när du gör detta så kontrolleras inga skript på platsen.
498
Kapitel 21
Så här kontrollerar du målwebbläsare:
1
Välj bland följande alternativ:
• Om du vill köra en kontroll på det aktuella dokumentet sparar du filen.
Kontrollen görs på den senast sparade versionen av filen. Ändringar som inte
har sparats kontrolleras inte.
• Om du vill köra en kontroll på en katalog eller plats väljer du Fönster >
Platsens filer för att öppna fönstret FTP. Markera en mapp i den lokala
katalogen. Kontrollen görs på alla HTML-filer i denna mapp och i alla mappar
därunder. Du kan endast göra kontrollen på lokala filer.
2
Välj Arkiv > Kontrollera i målwebbläsare.
Om du ännu inte har valt en primär webbläsare blir du uppmanad att göra det
nu.
3
Markera i listan den målwebbläsare som du vill kontrollera platsen mot.
4
Klicka på Kontrollera.
En rapport öppnas i den primära webbläsaren (som startas om den inte redan
är öppen).
5
Om du vill spara rapporten för senare användning väljer du Arkiv > Spara i
webbläsaren.
Obs! Eftersom rapporten är en temporär fil raderas den om du inte sparar den innan du går
till en annan plats.
Använda beteenden för att känna av
webbläsare och insticksprogram
Du kan använda beteenden när du vill avgöra vilka webbläsare besökarna
använder och avgöra om de har ett visst insticksprogram installerat. Mer
information om beteenden finns i ”Använda beteenden” på sidan 433.
dirigerar besökarna till olika sidor, beroende på deras
webbläsare (märken och versioner). Du kanske exempelvis vill att besökarna ska
komma till en sida om de har Netscape Navigator 4.0 eller senare, till en annan
sida om de har Microsoft Internet Explorer (IE) 4.0 eller senare och stanna kvar på
den aktuella sidan om de använder någon annan webbläsare. (Se ”Kontrollera
webbläsare” på sidan 445.)
Kontrollera webbläsare
Kontrollera instick dirigerar besökarna till olika sidor beroende på om de har det
angivna insticksprogrammet installerat eller inte. Du kanske exempelvis vill att
besökarna ska komma till en sida om de har Macromedia Shockwave och till en
annan sida om de inte har det. (Se ”Kontrollera instick” på sidan 446.)
Testa och publicera en plats
499
Förhandsgranska i webbläsare
Det är bra att testa sidor genom att ofta förhandsgranska dem i webbläsare under
utformningsarbetet. Genom att använda denna strategi kan du upptäcka
felaktigheter tidigt så att du slipper kopiera eller upprepa dem.
Du kan förhandsgranska dokument i målwebbläsarna när som helst. Du behöver
inte spara dokumentet först. Alla webbläsarrelaterade funktioner fungerar, bland
annat JavaScript-beteenden, dokumentrelativa och absoluta länkar, ActiveXkontroller och Netscape-insticksprogram, under förutsättning att du har
installerat de insticksprogram eller ActiveX-kontroller som krävs.
Innehåll som är länkat med en rotrelativ sökväg visas inte när du förhandsgranskar
dokument i en lokal webbläsare. Orsaken till detta är att webbläsare inte känner
igen platsrötter, vilket däremot servrar gör. Om du vill förhandsgranska innehåll
som är länkat med rotrelativa sökvägar lägger du upp filen på en fjärrserver och
visar den därifrån. (Mer information finns i ”Rotrelativa sökvägar” på sidan 352.)
Du kan definiera upp till 20 webbläsare för förhandsgranskning. Alla webbläsare
som du definierar visas på menyn Förhandsgranska i webbläsare. Det är bra att
förhandsgranska i följande webbläsare: IE 3.0 eller 4.0, Netscape 3.0 eller 4.0 samt
åtminstone en webbläsare som endast visar text, exempelvis Lynx.
Gör något av följande när du vill förhandsgranska dokumentet i en webbläsare:
• Välj Arkiv > Förhandsgranska i webbläsare och sedan en webbläsare i listan.
1
Om du ännu inte har angett någon webbläsare väljer du Redigera >
Inställningar och markerar kategorin Visa i webbläsare för att göra det.
• Tryck på F12 om du vill visa det aktuella dokumentet i den primära
webbläsaren.
• Tryck på Ctrl+F12 (Windows) eller Kommando+F12 (Macintosh) om du vill
visa det aktuella dokumentet i den sekundära webbläsaren.
Så här ändrar du primär webbläsare eller definierar en sekundär webbläsare:
500
Kapitel 21
1
Välj Arkiv > Förhandsgranska i webbläsare > Redigera webbläsarlistan. Du kan
också välja Redigera > Inställningar och markera kategorin Visa i webbläsare.
2
Gör inställningar för förhandsgranskning.
Förhandsgranska i webbläsare – inställningar
I inställningarna för förhandsgranskning i webbläsare visas de primära och
sekundära webbläsare som är definierade. Du öppnar dessa inställningar genom
att välja Redigera > Inställningar och sedan markera kategorin Visa i webbläsare
eller genom att välja Arkiv > Förhandsgranska i webbläsare > Redigera
webbläsarlistan.
Förhandsgranska med lokal server (endast Windows) använder du för att välja om
du vill använda en lokal server när du förhandsgranskar sidan i en webbläsare. (Du
måste köra ett serverprogram på datorn om detta alternativ ska fungera.) När
detta alternativ är markerat levereras den aktuella sidan till förhandsgranskning på
en lokal server som en URL-adress som börjar med http://localhost/. När detta
alternativ är avmarkerat öppnas dokumentet i en webbläsare med en sökväg som
börjar med file://. I vissa fall fungerar inte länkar som är angivna som rotrelativa
sökvägar på rätt sätt när de öppnas i en webbläsare med en file://-sökväg. Detta
gäller också när du kör en kontroll i målwebbläsare. Se ”Förhandsgranska i
webbläsare” på sidan 500.
Plustecknet (+)
lägger till en webbläsare i listan.
Minustecknet (–)
tar bort den markerade webbläsaren från listan.
Redigera ändrar
inställningarna för den markerade webbläsaren.
Primär webbläsare och Sekundär webbläsare anger om den markerade
webbläsaren är den primära eller sekundära webbläsaren. F12 öppnar den primära
webbläsaren. Ctrl+F12 (Windows) eller Kommando+F12 (Macintosh) öppnar
den sekundära webbläsaren.
Testa länkar genom att förhandsgranska i en webbläsare
Eftersom länkar inte är aktiva i dokumentfönstret måste du kontrollera och testa
länkar genom att förhandsgranska sidorna i en webbläsare. Du kanske exempelvis
vill kontrollera länkar till bilder, ljudfiler, videofiler m.m.
Så här testar du länkar i en webbläsare:
1
Välj Arkiv > Förhandsgranska i webbläsare eller tryck på F12.
2
Klicka på de aktiva länkarna när du vill kontrollera att de fungerar.
Testa och publicera en plats
501
Kontrollera länkar på en sida eller plats
Arbetet med att åtgärda brutna länkar (länkar som inte längre följer en giltig
sökväg eller som pekar på en fil som inte finns) på en stor plats kan vara
omständligt och tidsödande. Detta beror på att en stor plats kan innehålla
hundratals länkar till interna och externa dokument och att länkarna kan ändras
med tiden. Föräldralösa filer (filer som fortfarande finns på platsen men som inte
längre är länkade till någon fil där) kan också vara ett problem, eftersom de kan ta
upp utrymme på hårddisken och förbrylla andra som arbetar med platsen.
Använd funktionen Kontrollera länkar när du vill söka efter brutna länkar och
filer som inte hänvisar någonstans i en öppen fil, en del av en lokal plats eller en
hel lokal plats. De enda länkar som verifieras är länkar till dokument på platsen.
En lista över externa länkar som förekommer i de markerade dokumenten skapas,
men de kontrolleras inte.
När kontrollen av länkar är klar i de angivna filerna öppnas dialogrutan
Länkkontroll. I denna dialogruta visas en lista över brutna länkar, externa länkar
(länkar som inte kan kontrolleras eftersom de inte finns på platsen) och
föräldralösa filer. Mer information finns i ”Öppna länkade dokument i
Dreamweaver” på sidan 504.
Så här kontrollerar du länkar i det aktuella dokumentet:
1
Spara filen någonstans på den lokala platsen.
2
Välj Arkiv > Kontrollera länkar.
Så här kontrollerar du länkar på en viss del av en lokal plats:
1
Välj Fönster > Platsens filer så att platsfönstret öppnas.
2
Välj en plats i listrutan Plats.
3
Markera under Lokal mapp de filer eller mappar som ska kontrolleras.
4
Starta kontrollen på något av följande sätt:
• Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på en av de
markerade filerna och välj Kontrollera länkar > Markerade filer/mappar på
snabbmenyn.
• Välj Arkiv > Kontrollera länkar.
5
Markera en specifik typ av länkrapport i listrutan Visa. Du kan välja mellan
Brutna länkar, Externa länkar och Föräldralösa filer.
Du kan bara kontrollera föräldralösa filer när du kontrollerar länkar på en hel
plats.
6
502
Kapitel 21
En lista över filer som passar för den rapporttyp som du har markerat visas i
dialogrutan Länkkontroll.
Så här kontrollerar du länkar på hela platsen:
1
Välj Plats > Kontrollera länkar på hela platsen.
Dialogrutan Länkkontroll visas.
2
Markera en specifik typ av länkrapport i listrutan Visa. Du kan välja mellan
Brutna länkar, Externa länkar och Föräldralösa filer.
3
En lista över filer som passar för den rapporttyp som du har markerat visas i
dialogrutan Länkkontroll.
Obs! Om du har markerat Föräldralösa filer som rapporttyp kan du ta bort föräldralösa filer
från dialogrutan Länkkontroll direkt genom att markera en fil i listan och trycka på Delete.
Så här sparar du hela rapporten som en tabbavgränsad textfil.
Klicka på Spara.
Åtgärda brutna länkar
När du kontrollerar länkar i Dreamweaver visas dialogrutan Länkkontroll med en
rapport över brutna länkar, externa länkar och, om du väljer att kontrollera hela
platsen, föräldralösa filer.
Du kan åtgärda brutna länkar och bildreferenser direkt i dialogrutan
Länkkontroll. Du kan också öppna filerna i listan och åtgärda länkarna i
egenskapskontrollen.
Så här åtgärdar du länkar i dialogrutan Länkkontroll:
1
Markera den brutna länken i kolumnen Brutna länkar.
En mappikon visas bredvid den brutna länken.
2
Klicka på mappikonen om du vill bläddra till rätt fil att länka till eller skriv rätt
sökväg och filnamn.
3
Tryck på Tabb eller Retur.
Om det finns andra brutna referenser till samma fil visas en dialogruta där du
uppmanas att rätta till referenserna i de andra filerna också. Klicka på Ja om du
vill att alla dokument i listan som hänvisar till denna fil ska uppdateras. Klicka
på Nej om du vill att bara den aktuella referensen ska uppdateras.
Obs! Om alternativet Aktivera in- och utcheckning av filer är aktiverat för denna plats
försöker Dreamweaver checka ut filerna som behöver ändras. Om det inte går att checka ut
en fil visas ett varningsmeddelande och de brutna referenserna ändras inte. Se ”Använda
incheckning/utcheckning” på sidan 127.
Testa och publicera en plats
503
Så här åtgärdar du länkar i egenskapskontrollen:
1
Dubbelklicka på en post i kolumnen Filer i dialogrutan Länkkontroll.
Dokumentet öppnas med den felande bilden eller länken markerad, och i
egenskapskontrollen markeras sökvägen och filnamnet. (Om
egenskapskontrollen inte syns väljer du Fönster > Egenskaper för att öppna
den.)
2
Du anger en ny sökväg och ett nytt filnamn genom att klicka på mappikonen
och bläddra till rätt fil eller genom att skriva över den markerade texten.
Om du uppdaterar en bildreferens och den nya bilden visas i fel storlek klickar
du på etiketterna B och H i egenskapskontrollen. Du kan också klicka på
knappen Uppdatera för att återställa värdena för höjd och bredd. B och H
ändras från fet till normal stil.
3
Spara filen.
Efter hand som länkarna åtgärdas försvinner motsvarande poster från listan
Brutna länkar. Om en post fortfarande visas i listan efter att du har angett en ny
sökväg eller ett nytt filnamn i Länkkontroll (eller efter att du har sparat eventuella
ändringar du har gjort i egenskapskontrollen), innebär det att Dreamweaver inte
kan hitta den nya filen. Länken anses fortfarande vara bruten.
Öppna länkade dokument i Dreamweaver
Länkar är inte aktiva i Dreamweaver. Det betyder att du inte kan öppna det
länkade dokumentet genom att klicka på länken i dokumentfönstret.
Gör något av följande när du vill öppna länkade dokument i Dreamweaver:
• Markera länken och välj Ändra > Öppna länkad sida.
• Tryck på Ctrl (Windows) eller Kommando (Macintosh) och dubbelklicka på
länken.
Obs! Det länkade dokumentet måste finnas på din hårddisk.
504
Kapitel 21
Kontrollera nedladdningstid och storlek
Storleken och den uppskattade nedladdningstiden för den aktuella sidan visas
längst ned i dokumentfönstret. Storleken beräknas utifrån det totala innehållet på
sidan, även länkade objekt som bilder och insticksprogram.
Nedladdningstiden beräknas utifrån anslutningshastigheten som finns angiven i
inställningarna för statusfält. Den faktiska nedladdningstiden varierar, beroende
på allmänna Internetförhållanden.
En riktlinje som är bra att använda när du kontrollerar nedladdningstider för en
viss webbsida är åttasekundersregeln. Den innebär att de flesta användare inte
väntar längre än åtta sekunder på att en sida ska läsas in fullständigt.
Så här gör du inställningar för nedladdningstid och storlek:
1
Välj Redigera > Inställningar och markera kategorin Statusfält.
2
Välj en anslutningshastighet som du vill använda som utgångspunkt för att
beräkna nedladdningstiden.
Den genomsnittliga anslutningshastigheten i Sverige är 28,8. Om du utformar
sidor för ett intranet kanske du vill välja 1500 (T1-hastighet).
Testa en plats med kommandot Rapporter
När du testar platsen kan du ställa samman och skapa rapporter för flera HTMLattribut genom att använda kommandot Rapporter. Med detta kommando kan
du kontrollera externa länkar, kombinerbara kapslade FONT-koder, alternativ
text som saknas, överflödiga kapslade koder, borttagbara tomma koder och
namnlösa dokument. Du kan testa och felsöka markerade dokument eller en hel
plats för att åtgärda dessa HTML-problem före publicering.
När en rapport har skapats sparar du den som en XML-fil och importerar den till
en befintlig mallfil. Du kan sedan importera mallfilen till en databas eller ett
kalkylblad och skriva ut den eller visa den på en webbplats. Du kan också lägga till
olika rapporttyper i Dreamweaver från webbplatsen Macromedia Exchange.(Se
”Lägga till tillägg i Dreamweaver” på sidan 89.)
Information om hur använder kommandot Rapporter när du arbetar med
systemet för in- och utcheckning och design notes finns i ”Förbättra arbetsflödet
med hjälp av rapporter” på sidan 136.
Testa och publicera en plats
505
Skapa rapporter
Du kan köra olika typer av rapporter på dokument, mappar och platser, sortera
resultaten och få ytterligare information om angivna resultat.
Så här skapar du en rapport:
1
Välj Plats > Rapporter.
Dialogrutan Rapporter visas.
2
Markera en rapportkategori i listrutan Rapportera om.
Rapportalternativen är Aktuellt dokument, Hela den lokala platsen, Markerade
filer på platsen och Mapp. (Du kan inte köra rapportkategorin Markerade filer
på platsen om du inte redan har markerat filer i platsfönstret.)
506
Kapitel 21
3
Ange en rapporttyp genom att markera önskad kryssruta.
Du kan ange fler än en rapport om du vill köra dem samtidigt.
• Kombinerbara kapslade font-koder skapar en rapport med en lista över alla
kapslade FONT-koder som kan kombineras för att rensa koden. Följande
rapporteras exempelvis: <font color="#FF0000"><font size="4">STOP!</font></
font>.
• Alt-text saknas skapar en rapport med en lista över samtliga IMG-koder som inte
har någon alternativ text. (Alternativ text visas i stället för bilder i webbläsare
som endast visar text eller som är konfigurerade att ladda ned bilder manuellt.)
• Överflödiga kapslade koder skapar en rapport med information om kapslade
koder som bör rensas. Följande rapporteras exempelvis: <i>
räven</i> rev en annan räv</i>.
Den spanska <i>
• Borttagbara tomma koder skapar en rapport med information om alla tomma
koder som kan tas bort för att rensa HTML-koden. Du kan exempelvis ha tagit
bort ett objekt eller en bild i kodvyn, men lämnat kvar koderna som gällde för
detta objekt.
• Namnlösa dokument skapar en rapport med en lista över samtliga namnlösa
dokument som hittats för de angivna parametrarna. Alla dokument som har
standardnamn, dubblettnamn eller som saknar TITLE-koder rapporteras.
4
Klicka på Kör när du vill skapa rapporten.
Beroende på vilken rapport du har valt kan du få en uppmaning att spara filen,
definiera platsen eller markera en mapp (om du inte redan har gjort det).
5
En lista över resultaten visas i fönstret Resultat.
Om du vill sortera resultaten klickar du på den kolumnrubrik som du vill
sortera efter. Du kan sortera efter filnamn, radnummer eller beskrivning. Du
kan också köra flera olika rapporter och ha de olika resultatfönstren öppna
samtidigt.
6
Markera ett resultat om du vill se en detaljerad beskrivning.
7
Klicka på Öppna fil om du vill gå till den markerade posten i
dokumentfönstret.
Du kan också dubbelklicka på ett resultat för att öppna filen i
dokumentfönstret.
8
Klicka på Spara rapport om du vill spara rapporten som en XML-fil.
När du sparar en rapport sparas den som en XML-fil som kan importeras till en
befintlig mallfil. Du kan sedan importera filen till en databas eller ett kalkylblad
och skriva ut den eller använda filen för att visa rapporten på en webbplats.
Tips! Efter att kört HTML-rapporter använder du kommandot Rensa HTML för att
korrigera eventuella HTML-fel som anges i rapporterna.
Testa och publicera en plats
507
508
Kapitel 21
22
KAPITEL 22
Anpassa Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Macromedia Dreamweaver kan anpassas på flera vis så att du kan arbeta på ett sätt
som är välbekant, bekvämt och effektivt för dig.
Du kan bland annat anpassa Dreamweaver på följande sätt:
• Göra inställningar för allting från färgscheman och markering till
platskonfigurationer och webbläsare. Se ”Ange inställningar” på sidan 84.
• Ändra kortkommandon. Information om hur du ändrar kortkommandon med
hjälp av ett grafiskt gränssnitt i Dreamweaver finns i ”Använda redigeraren för
snabbtangenter” på sidan 86. Om du föredrar att redigera en textfil för att ändra
kortkommandona finns information i ”Ändra kortkommandon” på sidan 517.
• Lägga till tredjepartstillägg. Se ”Lägga till tillägg i Dreamweaver” på sidan 89.
• Ordna om objekten på objektpanelen så att de du använder ofta alltid visas,
skapa nya paneler för att ordna om objekten samt lägga till nya objekt. Se
”Ändra objektpanelen” på sidan 511.
• Ändra namn på menyposter, lägga till nya kommandon på menyer och ta bort
befintliga kommandon från menyer. Se ”Anpassa Dreamweaver-menyer” på
sidan 513.
• Redigera källformateringsprofilen så att du får bättre kontroll över formatet på
den HTML-kod som skapas i Dreamweaver. Filen SourceFormat.txt innehåller
alla inställningar för kodformat m.m. Se ”Ändra standardinställd HTMLformatering” på sidan 525.
• Ändra hur tredjepartskoder (exempelvis ASP- och ColdFusion-koder) visas i
designvyn i dokumentfönstret. Se ”Anpassa tolkningen av tredjepartskoder” på
sidan 532.
• Skapa dina egna kommandon och flytande paneler med hjälp av JavaScript. Se
”Utöka Dreamweaver: Grunderna” på sidan 530.
509
Ändra standardfiltyp
Som standard visas alla filtyper som Dreamweaver känner igen i dialogrutan
Öppna (Arkiv > Öppna). Du kan använda en listruta i denna dialogruta för att
begränsa visningen till vissa filtyper. Om du huvudsakligen arbetar med en
specifik filtyp (exempelvis ASP-filer) kan du ändra standardvisningen. Den filtyp
som anges på första raden i filen Extensions.txt blir standardfiltyp.
Obs! Om du vill se alla filtyper i dialogrutan Öppna, inklusive de filer som inte kan öppnas i
Dreamweaver, måste du markera Alla filer (*.*). Detta skiljer sig från Alla dokument, som
endast visar de filer som kan öppnas i Dreamweaver.
Så här ändrar du standardfiltyp i dialogrutan Öppna:
1
Gör en säkerhetskopia av filen Extensions.txt i mappen Configuration.
2
Öppna Extensions.txt i Dreamweaver eller i en textredigerare.
3
Klipp ut raden som motsvarar den nya standardinställningen och klistra in den
i början av filen så att den blir filens första rad.
4
Spara filen. Avsluta och starta om Dreamweaver.
Välj Arkiv > Öppna och titta efter i listrutan Filformat om du vill se den nya
standardinställningen.
Så här lägger du till nya filtyper i listrutan Filformat i dialogrutan Öppna:
1
Gör en säkerhetskopia av filen Extensions.txt i mappen Configuration.
2
Öppna Extensions.txt i Dreamweaver eller i en textredigerare.
3
Lägg till en ny rad för varje ny filtyp. Skriv med versaler de filnamnstillägg som
den nya filtypen kan ha, avgränsade med kommatecken. Lägg sedan till ett
kolon och en kort beskrivning som ska visas i listrutan Filformat i dialogrutan
Öppna. För JPEG-filer anger du exempelvis följande:
JPG,JPEG,JFIF:JPEG-bildfiler
4
Spara filen. Avsluta och starta om Dreamweaver.
Välj Arkiv > Öppna och klicka i listrutan Filformat när du vill se ändringarna.
510
Kapitel 22
Ändra objektpanelen
Som standard är objektpanelen uppdelad i flera kategorier: Formulär, HEAD,
Osynliga, Ramar, Special, Tecken och Vanlig. (Information om objekten i dessa
kategorier finns i ”Använda objektpanelen” på sidan 76.) Kategorierna motsvarar
mappar i mappen Configuration/Objects som ligger i Dreamweavers
programmapp.
Du kan flytta objekt från en kategori till en annan, ändra namn på kategorier och
ta bort objekt från panelen helt och hållet. Du måste antingen avsluta och starta
om Dreamweaver eller läsa in tillägg igen för att ändringarna ska visas på
objektpanelen.
För varje objekt i en kategori på objektpanelen finns det två eller tre filer i
motsvarande mapp:
• En GIF-fil som innehåller en ikon för objektet.
• En HTML-fil som innehåller HTML-koden som ska infogas i filen eller ett
HTML-formulär där du kan ange data som ska infogas (exempelvis texten i en
kommentar).
• En JavaScript-fil (inte obligatorisk) som skapar HTML-koden som ska infogas i
filen.
Så här flyttar du ett objekt från en kategori till en annan på objektpanelen:
Flytta objektets samtliga filer (GIF-filen, HTML-filen samt den eventuella
JavaScript-filen) från en mapp till en annan i mappen Configuration/Objects.
Så här ändrar du namn på en kategori på objektpanelen:
Ändra namn på motsvarande mapp i mappen Configuration/Objects.
Så här tar du bort ett objekt från objektpanelen:
Flytta objektets HTML-, GIF- och JavaScript-filer från mappen Configuration/
Objects. (Du kan ta bort dessa filer helt och hållet om du är säker på att du vill ta
bort objektet, men det är alltid bra att spara en säkerhetskopia ifall du skulle
behöva återställa objektet senare.)
Så här läser du in tillägg igen:
1
Ctrl-klicka (Windows) eller Alternativ-klicka (Macintosh) på popup-menyn för
kategorier högst upp på objektpanelen.
2
Välj Läs in tillägg igen.
Anpassa Dreamweaver
511
Skapa ett enkelt objekt
Du kan skapa dina egna objekt och lägga till dem på objektpanelen. Många enkla
objekt kräver inte någon JavaScript-kod utan innehåller bara den HTML-källkod
som ska infogas i dokumentet. (Grundläggande information om hur du skapar
mer komplexa objekt med JavaScript finns i ”Utöka Dreamweaver: Grunderna” på
sidan 530.)
När du har skapat ett objekt kan du paketera det och skicka det till webbplatsen
Macromedia Exchange om du vill göra det tillgängligt för andra Dreamweaveranvändare. Mer information finns på webbplatsen Macromedia Exchange för
Dreamweaver. Innan du kan paketera ett tillägg måste du ladda ned
installationsprogrammet för Package Manager från denna plats och sedan
installera Package Manager med extra stöd för paketutvecklare.
Så här skapar du ett enkelt objekt:
1
Skapa ett tomt dokument i en textredigerare (exempelvis BBEdit eller
HomeSite).
Obs! När du skapar ett nytt tomt dokument i Dreamweaver innehåller det flera standardHTML-koder, exempelvis HTML, HEAD och BODY. Om du vill använda en av Dreamweavers
kodredigerare (kodvyn i dokumentfönstret eller kodkontrollen) som textredigerare när
du skapar ett enkelt objekt, måste du först ta bort alla standardkoder som visas i
kodredigeraren när du skapar ett nytt dokument.
2
Lägg till koderna som du vill att detta objekt ska infoga i dokumenten.
Skriv exempelvis följande:
<p>
&copy; 2000 Z Produktion AB.<BR>
Med ensamrätt
</p>
3
Spara filen.
Om du vill att det nya objektet ska visas i en av de befintliga kategorierna på
objektpanelen sparar du det i en av undermapparna i mappen Objects. Om du
vill skapa en ny kategori skapar du en ny mapp i mappen Configuration/
Objects och sparar filen där. Eventuella andra mappar i
kategoriundermapparna (exempelvis mappar som har skapats i undermappen
Characters) ignoreras.
4
Använd ett grafik- eller bildredigeringsprogram (exempelvis Macromedia
Fireworks) och skapa en GIF-bild på 18 x 18 bildpunkter som ska fungera som
ikon för objektet på objektpanelen.
Om du skapar en större bild skalas den automatiskt ned till 18 x 18
bildpunkter. Om du inte skapar en ikon för objektet visas en allmän objektikon
för det på objektpanelen.
512
Kapitel 22
5
Ge ikonen samma filnamn som objektfilen, men använd .gif som filtillägg.
Spara sedan ikonen i samma mapp som objektfilen.
Om objektet exempelvis har namnet Copyright_Z.htm och du har sparat det i
mappen Common, ger du ikonen namnet Copyright_Z.gif och sparar även
den i mappen Common.
6
Starta om Dreamweaver, eller läs in tillägg igen, så att du kan använda det nya
objektet.
Objektet visas längst ned på Infoga-menyn och på objektpanelen. (Mer
information om hur du läser in tillägg igen finns i ”Ändra objektpanelen” på
sidan 511.)
Anpassa Dreamweaver-menyer
Alla menyer i Dreamweaver skapas utifrån den struktur som finns definierad i en
XML-fil med namnet menus.xml i undermappen Configuration/Menus i
Dreamweavers programmapp. När du redigerar filen menus.xml ändras
Dreamweavers menyer nästa gång du startar Dreamweaver. (Grundläggande
information om XML finns i ”XML” på sidan 390.)
Genom att redigera filen menus.xml kan du lägga till, ändra och ta bort
kortkommandon för menyposter. I de flesta fall är det dock enklare att göra detta
med hjälp av kortkommandoredigeraren. (Se ”Använda redigeraren för
snabbtangenter” på sidan 86.) Du kan också ordna om, ändra namn på och ta
bort menyposter.
Om du öppnar menus.xml i en XML-redigerare kan du få felmeddelanden
angående &-tecknen i denna fil. Det är bäst att redigera menus.xml i en vanlig
textredigerare. (Redigera inte filen i Dreamweaver.)
Obs! Gör alltid en säkerhetskopia innan du ändrar den aktuella menus.xml-filen eller någon
annan konfigurationsfil i Dreamweaver. Det är lätt att göra misstag när du redigerar
menykonfigurationsfilen och det finns ingen annan möjlighet att återgå till en tidigare
uppsättning menyer än att ersätta filen menus.xml. Om du skulle glömma att göra en
säkerhetskopia innehåller dock mappen Configuration en säkerhetskopia av standardfilen
menus.xml med namnet menus.bak. Du kan då återgå till standardmenyuppsättningen
genom att ersätta menus.xml med en kopia av menus.bak.
Anpassa Dreamweaver
513
Ändra Kommandon-menyn
Du kan lägga till vissa typer av kommandon på Kommandon-menyn och ändra
deras namn utan att redigera filen menus.xml.
Obs! Termen kommando har två betydelser i Dreamweaver. Egentligen är ett kommando
en särskild sorts tillägg. I en del sammanhang används emellertid kommando i betydelsen
menypost vilket innebär att det betecknar vilken post som helst på en Dreamweaver-meny,
oavsett vad den gör eller hur den implementeras.
Om du vill skapa nya kommandon som automatiskt placeras på Kommandonmenyn använder du historiepanelen (se ”Skapa nya kommandon från historiesteg”
på sidan 158). Du kan också använda Package Manager för att installera nya
tillägg, inklusive kommandon. Se ”Lägga till tillägg i Dreamweaver” på sidan 89.
När du vill ordna om posterna på Kommandon-menyn eller flytta poster mellan
menyer måste du redigera filen menus.xml.
Så här ändrar du namn på ett kommando som du har skapat:
1
Välj Kommandon > Redigera kommandolista.
En dialogruta visas med en lista över samtliga kommandon vars namn du kan
ändra. (Kommandon som finns på den standardinställda Kommandon-menyn
visas inte i denna lista och kan inte redigeras på detta sätt.)
2
Markera ett kommando som du vill ändra namn på.
3
Skriv ett nytt namn.
4
Klicka på Stäng.
Kommandots namn på Kommando-menyn ändras.
Så här tar du bort ett kommando som du har skapat:
1
Välj Kommandon > Redigera kommandolista.
En dialogruta visas med en lista över samtliga kommandon som du kan ta bort.
(Kommandon som finns på den standardinställda Kommandon-menyn visas
inte i denna lista och kan inte tas bort på detta sätt.)
2
Markera ett kommando som du vill ta bort.
3
Klicka på Ta bort och bekräfta sedan att du vill ta bort kommandot.
Kommandot tas bort. Observera att filen som innehåller koden för
kommandot också tas bort. Det är alltså inte bara menyposten på menyn som
tas bort när du tar bort ett kommando. Var säker på att du verkligen vill ta bort
kommandot innan du använder detta tillvägagångssätt. Om du vill ta bort det
från Kommandon-menyn utan att ta bort filen, kan du leta reda på filen i
mappen Configuration/Commands och flytta den till en annan mapp.
4
514
Kapitel 22
Klicka på Stäng.
Ordna om menyer och menyposter
Genom att redigera filen menus.xml kan du flytta menyposter inom en meny eller
från en meny till en annan, lägga till skiljelinjer på eller ta bort dem från menyer
och flytta menyer inom en menyrad eller till och med från en menyrad till en
annan.
Observera att du kan flytta poster till och från snabbmenyer på samma sätt som på
andra menyer.
Information om syntaxen i filen menus.xml finns i ”Kodsyntaxen i menus.xml” på
sidan 518.
Så här flyttar du en menypost:
1
Avsluta Dreamweaver.
2
Gör en säkerhetskopia av filen menus.xml.
3
Öppna menus.xml i en textredigerare, exempelvis BBEdit, HomeSite eller
Wordpad. (Öppna den inte i Dreamweaver.)
4
Klipp ut en fullständig MENUITEM-kod från <menuitem i början till /> i slutet.
5
Placera insättningspunkten på det ställe som du vill flytta menyposten till. (Se
till att det är mellan en <menu>-kod och motsvarande </menu>-kod.)
6
Klistra in menyposten.
Så här skapar du en undermeny när du flyttar en menypost:
1
Placera insättningspunkten i en meny (någonstans mellan en <menu>-kod och
motsvarande </menu>-kod).
2
Infoga ett nytt <menu></menu>-par inne i menyn.
3
Lägg till nya menyposter i den nya undermenyn.
Så här infogar du en skiljelinje mellan två menyposter:
Skriv <separator /> mellan de två MENUITEM-koderna.
Så här tar du bort en befintlig skiljelinje:
Ta bort motsvarande <separator
/>-rad.
Anpassa Dreamweaver
515
Så här flyttar du en meny:
1
Avsluta Dreamweaver.
2
Gör en säkerhetskopia av filen menus.xml.
3
Öppna menus.xml i en textredigerare, exempelvis BBEdit, HomeSite eller
Wordpad. (Öppna den inte i Dreamweaver.)
4
Klipp ut en hel meny och dess innehåll, från den inledande <menu>-koden till
den avslutande </menu>-koden.
5
Placera insättningspunkten på det ställe som du vill flytta menyn till. (Se till att
det är mellan en <menubar>-kod och motsvarande </menubar>-kod.)
6
Klistra in menyn.
Ändra namn på en menypost eller meny
Du kan enkelt ändra namn på menyposter och menyer genom att redigera filen
menus.xml. Information om syntaxen i filen menus.xml finns i ”Kodsyntaxen i
menus.xml” på sidan 518.
Så här ändrar du namn på en menypost eller meny:
1
Avsluta Dreamweaver.
2
Gör en säkerhetskopia av filen menus.xml.
3
Öppna menus.xml i en textredigerare, exempelvis BBEdit, HomeSite eller
Wordpad. (Öppna den inte i Dreamweaver.)
4
Om du ändrar en menypost letar du reda på motsvarande MENUITEM-kod och
ändrar värdet på dess NAME-attribut. Om du ändrar en meny letar du reda på
motsvarande MENU-kod och ändrar värdet på dess NAME-attribut.
Obs! Ändra inte ID-attributet i något av fallen.
5
516
Kapitel 22
Spara och stäng menus.xml. Starta sedan om Dreamweaver så att ändringarna
visas.
Ändra kortkommandon
Om standardkortkommandona inte passar dig kan du ändra och ta bort befintliga
kortkommandon samt lägga till nya. Detta gör du enklast genom att använda
kortkommandoredigeraren (se ”Använda redigeraren för snabbtangenter” på
sidan 86). Du kan även ändra kortkommandon direkt i menus.xml om du föredrar
det, men risken för misstag är mycket större om du anger kortkommandon i
menus.xml än om du gör det i kortkommandoredigeraren. Information om
syntaxen i filen menus.xml finns i ”Kodsyntaxen i menus.xml” på sidan 518.
Så här ändrar du ett kortkommando:
1
Avsluta Dreamweaver.
2
Gör en säkerhetskopia av filen menus.xml.
3
Öppna menus.xml i en textredigerare, exempelvis BBEdit, HomeSite eller
Wordpad. (Öppna den inte i Dreamweaver.)
4
Titta i ”Förteckning över kortkommandon” på sidan 551 och leta reda på ett
kortkommando som inte används eller som du vill tilldela till en annan
menypost.
Om du ändrar tilldelningen av ett kortkommando bör du göra en anteckning
om det på en utskriven kopia av förteckningen över kortkommandon för
framtida bruk.
5
Om du ändrar tilldelningen av ett kortkommando letar du reda på menyposten
som det är tilldelat till och tar bort attributet key="kortkommando" från denna
menypost.
6
Sök efter menyposten som kortkommandot ska tilldelas till.
7
Om menyposten redan har ett kortkommando söker du efter attributet KEY på
denna rad. Om den inte har ett kortkommando lägger du till key=""
någonstans mellan andra attribut i koden MENUITEM.
8
Mellan de dubbla citattecknen för attributet KEY skriver du det nya
kortkommandot.
Använd ett plustecken (+) mellan tangenterna i en tangentkombination. Mer
information om ändringstangenter finns i beskrivningen av koden MENUITEM i
”<menuitem>” på sidan 520.
Om kortkommandot används någon annanstans och du inte har tagit bort
denna funktion gäller kortkommandot bara för den första menyposten som
använder det i filen menus.xml.
Obs! Du kan använda samma kortkommando både för en menypost som endast gäller
Macintosh och för en menypost som endast gäller Windows.
9
Skriv det nya kortkommandot på lämplig plats i förteckningen över
kortkommandon.
Anpassa Dreamweaver
517
Kodsyntaxen i menus.xml
Filen menus.xml innehåller en strukturerad lista över menyrader, menyer,
menyposter, avgränsare, kortkommandolistor och kortkommandon. Dessa
element anges av XML-koder som du kan redigera i en textredigerare.
Obs! Var försiktig när du ändrar menyer. Alla menyer och menyposter som innehåller XMLsyntaxfel ignoreras i Dreamweaver.
En menyrad (kodad med inledande och avslutande MENUBAR-koder) är en separat
meny eller uppsättning menyer. På den finns exempelvis en huvudmenyrad, en
menyrad i platsfönstret (som endast visas i Windows, inte på Macintosh) och en
menyrad för varje snabbmeny. Varje menyrad innehåller en eller flera menyer. En
meny finns inuti en MENU-kod. Varje meny innehåller en eller flera menyposter som
var och en anges av en MENUITEM-kod och dess attribut. En meny kan också
innehålla skiljelinjer (anges av SEPARATOR-koder) och undermenyer.
Förutom de kortkommandon som är associerade med menyposter innehåller
Dreamweaver en mängd andra kortkommandon, däribland alternativa
kortkommandon och kortkommandon som endast är tillgängliga i vissa
sammanhang. Ctrl+Y (Windows) respektive Kommando+Y (Macintosh) är
exempelvis kortkommandot för Ångra, medan Ctrl+Skift+Z respektive
Kommando+Skift+Z är ett alternativt kortkommando för Ångra. Dessa alternativ
(och andra kortkommandon som inte kan anges i koderna för menyposter) finns
definierade i kortkommandolistor i filen menus.xml. Varje kortkommandolista
(som anges av en SHORTCUTLIST-kod) innehåller ett eller flera kortkommandon, som
vart och ett anges av en SHORTCUT-kod.
I följande avsnitt beskrivs kodsyntaxen i menus.xml. Valfria attribut är markerade
med klammerparenteser ({}) i attributlistan. Alla attribut som inte omges av
klammerparenteser är obligatoriska.
<menubar>
Beskrivning
Ger information om en menyrad i Dreamweavers menystruktur.
Attribut
name, {app}, id, {platform}
Menyradens namn. NAME är visserligen ett obligatoriskt attribut, men du kan
ge det värdet "".
NAME
APP Namnet på det program som menyraden är tillgänglig i. Giltiga värden
"dreamweaver" och "ultradev". Standardinställningen är att menyraden är
tillgänglig i både Dreamweaver och UltraDev.
Menyradens meny-ID. Varje enskilt meny-ID i filen menus.xml ska vara
unikt.
ID
518
Kapitel 22
är
Anger att menyraden bara ska visas på den angivna plattformen.
Giltiga värden är "win" och "mac".
PLATFORM
Innehåll
Denna kod måste innehålla en eller flera MENU-koder.
Behållare
Inga.
Exempel
I huvudmenyraden (dokumentfönstret) används följande MENUBAR-kod:
<menubar name="Main Window" id="DWMainWindow">
<!-- menu-koder här -->
</menubar>
<menu>
Beskrivning
Ger information om en meny eller undermeny som ska visas i Dreamweavers
menystruktur.
Attribut
name, {app}, id, {platform}
Menyns namn så som det visas på menyraden. Om du vill ange en
snabbtangent för menyn i Windows skriver du ett understreck (_) före bokstaven
som ska ge snabb åtkomst. Understrykningen tas automatiskt bort på Macintosh.
NAME
APP Namnet på det program som menyn är tillgänglig i. Giltiga värden är
"dreamweaver" och "ultradev". Standardinställningen är att menyn är tillgänglig
i
både Dreamweaver och UltraDev.
ID
Menyns meny-ID. Alla ID i filen ska vara unika.
Anger att menyn bara ska visas på den angivna plattformen. Giltiga
värden är "win" och "mac".
PLATFORM
Innehåll
Denna kod kan innehålla en eller flera MENUITEM-koder och en eller flera SEPARATORkoder. Den kan också innehålla andra MENU-koder (för att skapa undermenyer) och
vanliga HTML-kommentarkoder.
Behållare
Denna kod måste finnas i en MENUBAR-kod.
Exempel
<menu name="_Arkiv" id="DWMenu_File">
<!-- menuitem-, separator-, menu- och kommentarkoder här -->
</menu>
Anpassa Dreamweaver
519
<menuitem>
Beskrivning
Definierar en menypost på en Dreamweaver-meny.
Attribut
name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file},
{checked}, {dynamic}
NAME Menypostnamnet som visas på menyn. En understrykning anger att
följande bokstav är kommandots snabbtangent (endast Windows).
Används för att identifiera posten i Dreamweaver. Detta ID måste vara unikt i
hela menystrukturen. Om du lägger till nya menyposter i menus.xml kan du se till
att de blir unika genom att använda företagets namn eller någon annan unik
sträng som prefix för varje menyposts ID.
ID
APP Namnet på det program som menyposten är tillgänglig i. Giltiga värden
"dreamweaver" och "ultradev". Standardinställningen är att menyposten är
är
tillgänglig i både Dreamweaver och UltraDev.
Kommandots eventuella kortkommando. Använd följande strängar när du
vill ange ändringstangenter:
key
• CMD anger Ctrl (Windows) eller Kommando (Macintosh).
• ALT och Opt anger båda Alt (Windows) eller Alternativ (Macintosh).
• SHIFT anger Skift på båda plattformarna.
• CTRL anger Ctrl (Windows) eller Kontroll (Macintosh).
• Ett plustecken (+) skiljer ändringstangenter åt om mer än en används i ett
kortkommando. CMD+OPT+5 i attributet KEY betyder exempelvis att menyposten
körs när användaren trycker på Ctrl+Alt+5 (Windows) eller
Kommando+Alternativ+5 (Macintosh).
• Specialtangenter anges med namn: F1 till och med F12, PgDn, PgUp, Home, End,
Ins, Del, Tab (Tabb), Esc, BkSp (Backsteg) och Space (Mellanslag).
Ändringstangenter kan också kombineras med specialtangenter.
PLATFORM Anger vilken plattform posten visas på. Giltiga värden är "win", som
betyder endast Windows, eller "mac", som betyder endast Macintosh. Om du inte
anger attributet PLATFORM visas menyposten på båda plattformarna. Om du vill att
en menypost ska utföra olika åtgärder på de båda plattformarna anger du två
menyposter med samma namn (men med olika ID): den ena med platform="win"
och den andra med platform="mac".
520
Kapitel 22
Innehåller JavaScript-kod (vanligtvis ett JavaScript-funktionsanrop) som
anger om menyposten är aktiverad eller inte. Om funktionen returnerar FALSE
visas menyposten nedtonad. Standardvärdet är "TRUE", men det är alltid bäst att
för tydlighetens skull ange ett värde även om det är "TRUE".
ENABLED
Anger argument som ska skickas till koden i den JavaScript-fil som du
definierar i attributet FILE. Omge argument med enkelcitat ('), inuti de
citattecken som du använder för att begränsa ett attributs värde.
ARGUMENTS
Anger ett JavaScript-uttryck som körs när användaren väljer denna post
på menyn. För komplex JavaScript-kod använder du i stället en JavaScript-fil (som
anges i attributet FILE). Du måste ange antingen FILE eller COMMAND för varje enskild
menypost.
COMMAND
Namnet på en HTML-fil med JavaScript-kod som styr menyposten. Ange
en sökväg till filen i förhållande till mappen Configuration. (För menyposten
Hjälp > Välkommen anges exempelvis file="Commands/Welcome.htm".) Observera
att attributet FILE åsidosätter attributen COMMAND, ENABLED och CHECKED. Du måste
ange antingen FILE eller COMMAND för varje enskild menypost. Information om hur
du skapar en kommandofil med hjälp av historiepanelen finns i ”Skapa nya
kommandon från historiesteg” på sidan 158. Information om hur du skriver egna
JavaScript-kommandon från grunden finns i Utöka Dreamweaver.
FILE
Ett JavaScript-uttryck som anger om en bockmarkering visas bredvid
menyposten på menyn. Om uttrycket beräknas som TRUE visas posten med en
bockmarkering.
CHECKED
Anger i förekommande fall att en menypost ska definieras dynamiskt av
en HTML-fil. Denna fil innehåller JavaScript-kod som anger menypostens text
och läge. Om du anger en kod som DYNAMIC måste du också ange ett FILE-attribut.
DYNAMIC
Anger om designvyn och kodvyn ska synkroniseras innan koden
körs för menyposten. Giltiga värden är "TRUE" (standardinställning) och "FALSE".
Om du anger "FALSE" för detta attribut innebär det att de ändringar i filen som
utförs av denna menypost inte utnyttjar Dreamweavers DOM. (Information om
DOM finns i Utöka Dreamweaver.)
ISDOMREQUIRED
Innehåll
Inget (tom kod).
Behållare
Denna kod måste finnas i en MENU-kod.
Exempel
<menuitem name="_Nytt" key="Cmd+N" enabled="true"
command="dw.createDocument()" id="DWMenu_File_New" />
Anpassa Dreamweaver
521
<separator>
Beskrivning
Anger att en skiljelinje ska visas på motsvarande ställe på menyn.
Attribut
{app}
APP Namnet på det program som skiljelinjen visas i. Giltiga värden är
"dreamweaver" och "ultradev". Standardinställningen är att skiljelinjen ska
visas i
både Dreamweaver och UltraDev.
Innehåll
Inget (tom kod).
Behållare
Denna kod måste finnas i en MENU-kod.
Exempel
<separator />
<shortcutlist>
Beskrivning
Anger en kortkommandolista i filen menus.xml.
Attribut
{app}, id, {platform}
Namnet på det program som kortkommandolistan är tillgänglig i. Giltiga
värden är "dreamweaver" och "ultradev". Standardinställningen är att
kortkommandolistan är tillgänglig i både Dreamweaver och UltraDev.
APP
Kortkommandolistans ID. Detta ID ska vara det samma som meny-ID:t för
den menyrad (eller snabbmeny) i Dreamweaver som kortkommandona är
kopplade till. Giltiga värden är "DWMainWindow", "DWMainSite", "DWTimelineContext"
och "DWHTMLContext".
ID
Anger att kortkommandolistan bara ska visas på den angivna
plattformen. Giltiga värden är "win" och "mac".
PLATFORM
Innehåll
Denna kod kan innehålla en eller flera SHORTCUT-koder. Den kan också innehålla en
eller flera kommentarkoder (som använder samma syntax som HTMLkommentarkoder).
Behållare
Inga.
Exempel
<shortcutlist id="DWMainWindow">
<!-- shortcut- och kommentarkoder här -->
</shortcutlist>
522
Kapitel 22
<shortcut>
Beskrivning
Anger ett kortkommando i filen menus.xml.
Attribut
key, {app}, {platform}, {file}, {arguments}, {command}, id, {NAME}
Tangentkombinationen som aktiverar kortkommandot. Syntaxinformation
finns i ”<menuitem>” på sidan 520.
KEY
Namnet på det program som kortkommandot är tillgängligt i. Giltiga
värden är "dreamweaver" och "ultradev". Standardinställningen är att
kortkommandot är tillgängligt i både Dreamweaver och UltraDev.
APP
Anger att kortkommandot bara fungerar på den angivna plattformen.
Giltiga värden är "win" och "mac". Om du inte anger detta attribut fungerar
kortkommandot på båda plattformarna.
PLATFORM
Sökvägen till en fil med den JavaScript-kod som körs när du använder
kortkommandot. Attributet FILE åsidosätter attributet COMMAND. Du måste ange
antingen FILE eller COMMAND för varje enskilt kortkommando.
FILE
Anger argument som ska skickas till koden i den JavaScript-fil som du
definierar i attributet FILE. Omge argument med enkelcitat (') inuti de citattecken
som du använder för att begränsa ett attributs värde.
ARGUMENTS
Den JavaScript-kod som körs i Dreamweaver när du använder
kortkommandot. Ange antingen FILE eller COMMAND för varje enskilt
kortkommando.
COMMAND
ID
Ett unikt ID för kortkommandot.
Ett namn på det kommando som körs av kortkommandot, i samma stil
som ett menypostnamn. Attributet NAME för exempelvis kortkommandot F12 är
"Förhandsgranska i primär webbläsare".
NAME
Innehåll
Inget (tom kod).
Behållare
Denna kod måste finnas i en SHORTCUTLIST-kod.
Exempel
<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm"
arguments="'redo'" id="DWShortcuts_Edit_Redo" />
Anpassa Dreamweaver
523
Anpassa utseendet på dialogrutor
Layouten på objekt, kommandon och beteenden i dialogrutor anges som HTMLformulär. De finns i HTML-filer i mappen Configuration i Dreamweavers
programmapp. Du redigerar dessa formulär på samma sätt som andra formulär i
Dreamweaver. Se ”Skapa formulär” på sidan 477.
Så här ändrar du utseende på en dialogruta:
1
Sök efter motsvarande .htm-fil i Configuration/Objects, Configuration/
Commands eller Configuration/Behaviors.
2
Gör en kopia av filen och placera den någon annanstans än i mappen
Configuration.
3
Öppna kopian i Dreamweaver, redigera formuläret och spara det.
4
Avsluta Dreamweaver.
5
Kopiera tillbaka den ändrade filen till mappen Configuration och ersätt
originalet. (Du bör först göra en säkerhetskopia av originalfilen, så att du kan
återställa den senare om det skulle behövas.)
6
Starta om Dreamweaver när du vill se ändringarna.
Du bör endast ändra dialogrutans utseende, inte hur den fungerar. Den måste
fortfarande innehålla samma typer av formulärelement med samma namn, så att
den information som Dreamweaver hämtar från dialogrutan fortfarande kan
användas på samma sätt.
Objektet Kommentar tar exempelvis textindata från ett textområde i en dialogruta
och använder sedan en enkel JavaScript-funktion för att göra denna text till en
HTML-kommentar och infoga den i dokumentet. Formuläret som beskriver
dialogrutan finns i filen Configuration/Objects/Invisibles/Comment.htm. Du kan
öppna denna fil och ändra storlek och andra attribut för textområdet, men om du
tar bort koden TEXTAREA helt och hållet eller ändrar värdet på dess NAME-attribut
fungerar objektet Kommentar inte som det ska längre.
524
Kapitel 22
Ändra standardinställd HTML-formatering
Källformateringsprofilen för HTML anger hur HTML-källkoden för ett
dokument formateras. Profilen innehåller både kodformatsinställningarna (som
du enkelt kan göra med Redigera > Inställningar, se ”Kodformat – inställningar”
på sidan 339) och andra formateringsinställningar för enskilda koder och grupper
av koder. Det enda sättet att ändra de formateringsinställningar som inte visas i
kodformatsinställningarna är att redigera filen SourceFormat.txt i en
textredigerare. Denna fil finns i mappen Configuration i Dreamweavers
programmapp.
Kodformatsinställningar som har gjorts med kommandot Redigera > Inställningar
sparas i SourceFormat.txt när du avslutar Dreamweaver. Du måste därför avsluta
programmet innan du redigerar profilen. Annars finns det risk att ändringarna
skrivs över när du avslutar Dreamweaver.
Källformateringsprofilen för HTML följer ett visst format, vilket beskrivs i filen.
Observera följande konventioner:
• Varje avsnitt i profilen börjar med en kod efter modellen <?nyckelord>
(exempelvis <?options>, <?elements> eller <?attributes>).
• Parametrarna för varje avsnitt definieras i HTML-kommentarer (<!--
-->)
direkt ovanför avsnittet.
• Raden OMIT i avsnittet <?options> är reserverad för framtida användning (för
närvarande påverkar den inte formatering av HTML-källkod).
• Du kan ange att en enskild kod tillhör en indragsgrupp (IGROUP) i avsnittet
<?elements>.
Som standard innehåller indragsgrupp 1 tabellrader och
tabellkolumner medan indragsgrupp 2 innehåller ramuppsättningar och ramar.
Dessa grupperingar motsvarar indragsalternativen Tabellrader och -kolumner
och Ramar och ramuppsättningar i kodformatsinställningarna. Du kan
avaktivera indraget för hela gruppen genom att ta bort dess nummer från
attributet ACTIVE i avsnittet <?options>. Du kan också lägga till andra koder i de
båda indragsgrupperna så att du kan styra dem med alternativen i
kodformatsinställningarna.
De fyra siffror som anges i attributet BREAK för varje enskild kod visar hur många
radbrytningar som ska användas före öppningskoden, hur många som ska
användas omedelbart efter öppningskoden (och före kodens innehåll), hur många
som ska användas omedelbart före stängningskoden respektive hur många som ska
placeras efter stängningskoden.
Standardinställningarna för koden P i filen SourceFormat.txt är exempelvis
vilket ger följande formatering:
<p break="1,0,0,1" indent>,
<p> Ett textstycke som är indraget från vänster marginal (efter den första
raden) och som har en radbrytning före den inledande P-koden och efter
den avslutande P-koden, men inte efter den inledande P-koden och inte
före den avslutande P-koden.</p>
<p>Nästa stycke.</p>
Anpassa Dreamweaver
525
Om du ändrar inställningarna till <p break="1,1,1,2"> visas textstycken på
följande sätt i kodvyn och kodkontrollen:
<p>
Ett textstycke som inte är indraget från vänster marginal och som har en
radbrytning
före och efter den inledande P-koden, en radbrytning före den avslutande Pkoden
och två radbrytningar efter den avslutande P-koden.
</p>
<p>
Nästa stycke.
</p>
(Observera att antalet radbrytningar efter stängningskoden och före följande
öppningskod är det större av de två angivna värdena. Om du anger två
radbrytningar före en kod och tre efter blir resultatet tre radbrytningar mellan
stängningskoden och nästa öppningskod.)
Vissa kod- och attributinställningar innehåller termen NAMECASE. Detta anger att
koden eller attributet ska visas med versaler/gemener exakt på det sätt som du
anger med värdet för attributet NAMECASE. I filen SourceFormat.txt anges
exempelvis onClick som<onClick namecase="onClick">. Därför visas alltid onClick
med denna speciella kombination av versala och gemena bokstäver, oavsett vilka
skiftlägesinställningar användaren har.
En annan term som används för att ange skiftläge är SAMECASE, vilket anger att
värdet för ett attribut ska visas med versaler/gemener på samma sätt som i
attributets namn. <align samecase> anger exempelvis att om Dreamweaver
genererar ett ALIGN-attribut ska värdet på attributet visas med samma versaler/
gemener som attributnamnet. Detta gäller också för attributnamn som saknar
värden, så du bör aldrig ta bort SAMECASE från några av de
attributformateringsspecifikationer där det förekommer.
När termen NOFORMAT associeras med en kod anger det att radbrytningar, indrag
och skiftlägen för en befintlig förekomst av koden aldrig ändras så att formatet
som anges i SourceFormat.txt används. För en kod som är märkt med NOFORMAT
används det angivna formatet i SourceFormat.txt endast när en ny förekomst av
koden skapas i Dreamweaver. Exempel: <pre break="1,0,0,1" noformat> innebär
att om du skapar en ny PRE-kod med Dreamweavers verktyg, så används
radbrytningsspecifikationen "1,0,0,1" när den skapas. Om du däremot redan har
en egenhändigt skapad PRE-kod, vars radbrytningar inte matchar denna
specifikation, ändras radbrytningarna inte när du redigerar denna kod i designvyn.
Alla attribut som inte anges i filen SourceFormat.txt använder de
standardformateringsinställningar som du anger för kategorin Kodformat i
dialogrutan Inställningar.
526
Kapitel 22
Arbeta med webbläsarprofiler
Webbläsarprofiler är de filer som används för att kontrollera dokumenten när du
kör en kontroll i målwebbläsare (se ”Kontrollera webbläsarkompatibilitet” på
sidan 498). Varje profil innehåller information om de HTML-koder och attribut
som en viss webbläsare stöder. En webbläsarprofil kan också innehålla
varningsmeddelanden, felmeddelanden och förslag på kodersättningar.
Webbläsarprofiler sparas i mappen Configuration/BrowserProfiles i Dreamweavers
programmapp. Du kan redigera befintliga profiler eller skapa nya i Dreamweaver
eller en textredigerare (exempelvis BBEdit, HomeSite, Anteckningar eller
SimpleText). Du behöver inte stänga Dreamweaver innan du redigerar eller skapar
webbläsarprofiler.
Formatering av webbläsarprofiler
Webbläsarprofiler följer ett visst format. Du undviker analyseringsfel under
kontroll av målwebbläsare genom att följa dessa riktlinjer när du redigerar eller
skapar profiler:
• Den första raden är reserverad för namnet på profilen. Den måste följas av en
enda vagnretur. Namnet på denna rad visas i dialogrutan Kontroll i
målwebbläsare och i kontrollrapporten. Namnet måste vara unikt.
• Den andra raden är reserverad för texten PROFILE_TYPE=BROWSER_PROFILE. Denna
rad används i Dreamweaver för att avgöra vilka dokument som är
webbläsarprofiler. Ändra eller flytta aldrig denna rad.
• Två bindestreck (--) i början av en rad anger att det är en kommentar (det
innebär att raden kommer att ignoreras under kontrollen). En kommentar
måste inleda en rad. Du kan inte skriva två bindestreck mitt i en rad.
• Du måste använda mellanslag på följande ställen: före den avslutande
vinkelparentesen (>) på raden !ELEMENT, efter den inledande parentesen i en lista
med värden för ett attribut, före den avslutande parentesen i en lista med
värden samt före och efter varje lodrätt streck (|) i en lista med värden.
• Du måste ange ett utropstecken utan mellanslag före följande ord: ELEMENT,
ATTLIST, Error, msg
och htmlmsg (!ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg).
• Du kan ange !Error och !Warning i avsnitten !ELEMENT och !ATTLIST.
• !msg-meddelanden kan endast innehålla vanlig text. !htmlmsg-meddelanden kan
innehålla vilken giltig HTML-kod som helst, även hyperlänkar.
• HTML-kommentarer (<!--
-->) kan inte anges som koder i webbläsarprofiler
eftersom de stör analysen. Dreamweaver rapporterar inga fel för kommentarer,
eftersom alla webbläsare stöder dem.
Anpassa Dreamweaver
527
Syntaxen för en kodpost ser ut så här:
<!ELEMENT htmlKod NAME="kodNamn" >
<!ATTLIST htmlKod
ejunderstöttAttribut1!Error !msg="Attributet ejunderstöttAttribut1 för koden
htmlKod stöds inte. Försök använda understöttAttribut1 för en liknande
effekt."
understöttAttribut1
understöttAttribut2( giltigtVärde1 | giltigtVärde2 | giltigtVärde3 )
ejunderstöttAttribut2!Error !htmlmsg="<b>Använd aldrig attributet
ejunderstöttAttribut2 för koden htmlKod!</b>"
>
Elementen i ovanstående syntax definieras på följande sätt:
htmlKod
är koden så som den visas i ett HTML-dokument.
är ett förklarande namn på koden (exempelvis är HR-kodens namn
”Vågrät linje”). Attributet NAME är valfritt. Om så anges används kodNamn i
felmeddelanden. Om du inte anger ett namn används htmlKod i felmeddelanden.
kodNamn
ejunderstöttAttribut är ett attribut som inte stöds. Alla koder och attribut som inte
uttryckligen anges som attribut med stöd antas sakna stöd. Ange bara koder eller
attribut som inte stöds när du vill skapa ett eget felmeddelande.
är ett attribut som stöds av htmlKod. Endast koder som visas
utan en !Error-text antas ha stöd i webbläsaren.
understöttAttribut
giltigtVärde
anger ett värde som stöds av attributet.
I följande exempel visas en post för koden APPLET som fungerar i Navigator 3.0:
<!ELEMENT APPLET Name="Java-miniprogram" >
<!ATTLIST APPLET
Align ( top | middle | bottom | left | right | absmiddle | absbottom |
baseline | texttop )
Alt
Archive
Class !Warning !htmlmsg="Denna webbläsare ignorerar attributet
<CODE>CLASS</CODE> för koden <CODE>APPLET</CODE>."
Code
Codebase
Height
HSpace
ID !Warning !htmlmsg="Denna webbläsare ignorerar attributet <CODE>ID</
CODE> för koden <CODE>APPLET</CODE>. Använd <CODE>NAME</CODE> i stället."
Name
Style !Warning !htmlmsg="Denna webbläsare ignorerar attributet
<CODE>STYLE</CODE> för koden <CODE>APPLET</CODE>."
VSpace
Width
>
528
Kapitel 22
Skapa och redigera en webbläsarprofil
Skapa en webbläsarprofil genom att ändra en befintlig profil. Om du exempelvis
vill skapa en profil för en framtida version av Microsoft Internet Explorer kan du
öppna profilen för den senaste versionen av Internet Explorer som har en profil,
lägga till alla nya koder och attribut som introduceras i den nya versionen och
spara den som en profil för den nya versionen.
Obs! Innan du skapar en webbläsarprofil för en ny webbläsarversion kan du gå till
webbplatsen Macromedia Exchange för Dreamweaver och se efter om där redan finns en
webbläsarprofil som du kan ladda ned och installera med Package Manager.
Så här skapar och redigerar du en webbläsarprofil:
1
Öppna en befintlig profil i en textredigerare.
Om du vill skapa en ny profil öppnar du den profil som är mest lik den profil
du tänker skapa. Spara sedan filen under ett nytt filnamn.
2
Om du skapar en ny profil ändrar du namnet som står på den första textraden i
filen.
Två profiler kan inte ha samma namn.
3
Lägg till alla nya koder och attribut som du vet stöds i webbläsaren. Använd
den syntax som visas i ”Formatering av webbläsarprofiler” på sidan 527.
Om du inte vill att felmeddelanden ska visas om en viss kod som inte stöds,
lägger du till den i listan över koder som stöds. Om du gör detta ska du spara
profilen i en separat fil med ett nytt filnamn (exempelvis Webbläsarnamn x.x
begränsad). Genom att du ändrar namn på profilen bevaras den ursprungliga
profilen med enbart de koder som verkligen stöds.
4
Ta bort alla koder och attribut som inte stöds i webbläsaren.
Detta steg är antagligen onödigt om du skapar en profil för en ny version av
Netscape Navigator eller Microsoft Internet Explorer, eftersom webbläsare
sällan upphör att stödja en kod.
Anpassa Dreamweaver
529
5
Lägg till eventuella egna felmeddelanden enligt syntaxen i ”Formatering av
webbläsarprofiler” på sidan 527.
I profilerna som levereras med Dreamweaver finns alla koder som stöds i de
angivna webbläsarna. Om du vill lägga till ett eget felmeddelande i en kod
lägger du till !msg "meddelande" eller !htmlmsg "<kod>meddelande</kod>" efter
!Error. Denna information visas exempelvis i profilen för Netscape Navigator
3.0 (tillsammans med andra attribut som inte visas här):
<!ELEMENT HR name="Vågrät linje" >
<!ATTLIST HR
COLOR
!Error
>
Om du vill lägga till ett eget felmeddelande anger du !msg: och sedan ditt
felmeddelande inom citattecken:
<!ELEMENT HR name="Vågrät linje" >
<!ATTLIST HR
COLOR
!Error !msg "Internet Explorer 3.0 stöder koden COLOR i
vågräta linjer, men det gör inte Netscape Navigator 3.0."
>
6
Du kan använda !Error för alla felsituationer. Du kan också använda !Warning
för att ange att en kod kommer att ignoreras utan att orsaka ett fel.
Utöka Dreamweaver: Grunderna
Dreamweaver är utformat så att det ska kunna utökas. Programmet innehåller dels
en JavaScript-tolk så att JavaScript-kod kan läsas och köras, dels ett
programmeringsgränssnitt (API) med en stor uppsättning JavaScript-funktioner
som utvecklare kan använda för att utöka Dreamweavers möjligheter.
Dreamweaver innehåller också en s.k. DOM (Document Object Model) som
innebär att du kan använda tillägg för att undersöka och ändra ett dokuments
struktur och innehåll.
Med detta JavaScript-API kan du skapa objekt, beteendeåtgärder, kommandon,
egenskapskontroller, flytande paneler och dataöversättare (vilka tillsammans kallas
tillägg).
Du kan också skapa nya objekt och enkla kommandon utan att kunna någonting
om programmering. Information finns i ”Skapa ett enkelt objekt” på sidan 512
och ”Skapa nya kommandon från historiesteg” på sidan 158. Om du däremot vill
lägga till mer avancerade funktioner i Dreamweaver måste du skriva tillägg i
JavaScript eller C. Information om DOM och API finns i Utöka Dreamweaver.
530
Kapitel 22
När du har skapat ett Dreamweaver-tillägg kan du paketera det och skicka det till
webbplatsen Macromedia Exchange om du vill göra det tillgängligt för andra
Dreamweaver-användare. Mer information finns på webbplatsen Macromedia
Exchange för Dreamweaver. Innan du kan paketera ett tillägg måste du ladda ned
installationsprogrammet för Package Manager från denna plats och sedan
installera Package Manager med extra stöd för paketutvecklare.
JavaScript
JavaScript är ett tolkat programmeringsspråk. Om du vill lära dig mer om
JavaScript rekommenderas du att läsa en bra JavaScript-bok, exempelvis JavaScript
Bible av Danny Goodman (IDG) eller JavaScript: The Definitive Guide av David
Flanagan (O’Reilly). Information om hur du använder JavaScript för att utöka
Dreamweaver finns i Utöka Dreamweaver.
Obs! Trots likheten mellan namnen har JavaScript inte någonting alls att göra med Java.
Redigera Dreamweaver-kommandon
Alla kommandon på Dreamweaver-menyer, inklusive dem du skapar och sparar
med hjälp av historiepanelen (se ”Skapa nya kommandon från historiesteg” på
sidan 158), implementeras i JavaScript. Denna JavaScript-kod består vanligtvis
mest av anrop till funktioner i Dreamweavers flexibla API. Om du känner till
JavaScript och förstår Dreamweavers flexibla API kan du redigera JavaScriptkoden för att ändra kommandofunktionerna.
Obs! Ändra inte någon JavaScript-kod om du inte är helt säker på vad du gör. Även om du
vet vad du gör bör du spara en säkerhetskopia av filen med koden innan du ändrar den.
Om du vill ändra namn på ett kommando, flytta ett kommando till en annan
meny eller lägga till ett kortkommando för ett kommando finns information i
”Anpassa Dreamweaver-menyer” på sidan 513.
Anpassa Dreamweaver
531
Anpassa tolkningen av tredjepartskoder
Bearbetningsteknik på serversidan, exempelvis ASP, ColdFusion, JSP och PHP,
använder speciell icke-HTML-kod i HTML-filer. På servrar skapas och hanteras
HTML-innehåll baserat på denna kod. När icke-HTML-koder träffas på i
Dreamweaver jämförs de med information i filerna med tredjepartskoder, där det
definieras hur icke-HTML-koder ska läsas och visas i programmet.
ASP-filer innehåller exempelvis (förutom normala HTML-koder) ASP-kod som
ska tolkas på servern. ASP-kod ser ungefär ut som en HTML-kod, men är märkt
med ett par avgränsare: den börjar med <% och slutar med %>. Dreamweavermappen Configuration/ThirdPartyTags innehåller en fil med namnet ASP.xml. I
denna beskrivs formatet för ASP-kod och definieras hur denna kod visas i
Dreamweaver. Eftersom ASP-kod definieras i ASP.xml tolkas inte någonting
mellan avgränsarna. I stället visas i designvyn i dokumentfönstret bara en ikon
som anger ASP-kod.
Du kan ange dina egna koder och skapa koddatabasfiler som definierar hur dessa
koder ska läsas och visas i Dreamweaver. Det är särskilt praktiskt att skapa
koddatabasfiler om du använder ett annat kodsystem på serversidan än ASP, JSP,
ColdFusion eller PHP. Skapa en ny koddatabasfil för varje sådant kodsystem när
du vill ange hur koderna ska visas i Dreamweaver. (Det finns inte någon separat
databasfil för JSP-koder. I JSP-kod används samma avgränsare som i ASP-kod, så
därför används databasfilen för ASP-koder även för JSP-koder i Dreamweaver.)
Obs! I detta avsnitt förklaras hur du definierar hur en egen kod ska visas i Dreamweaver.
Däremot beskrivs inte hur du skapar ett sätt att redigera en egen kods innehåll eller
egenskaper. Information om hur du skapar en egenskapskontroll för att granska och ändra
en egen kods egenskaper finns i ”Egenskapskontroller” i Utöka Dreamweaver.
Varje koddatabasfil definierar namn, typ, innehållsmodell, visningsschema och
ikon för en eller flera egna koder. Du kan skapa hur många koddatabasfiler du vill,
men de måste finnas i mappen Configuration/ThirdPartyTags för att kunna läsas
och bearbetas i Dreamweaver. Koddatabasfiler har filnamnstillägget .xml.
Tips! Om du arbetar på flera olika, fristående platser samtidigt (exempelvis som
frilansutvecklare) kan du placera alla kodspecifikationer för en viss plats i en och samma fil.
Lägg sedan bara till denna koddatabasfil i det paket med egna ikoner och
egenskapskontroller som du lämnar över till personerna som ska hantera platsen.
Du definierar en kodspecifikation med en XML-kod som heter TAGSPEC. Följande
kod beskriver exempelvis specifikationen för en kod med namnet HAPPY:
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false"
content_model="marker_model" icon="happy.gif" icon_width="18"
icon_height="18"></tagspec>
532
Kapitel 22
Du kan definiera två olika sorters koder med TAGSPEC: normala HTMLformatskoder och strängavgränsade koder. Strängavgränsade koder börjar med en
sträng och slutar med en annan. De påminner om tomma HTML-koder
(exempelvis IMG) på så sätt att de inte omger innehåll och inte har stängningskoder.
Koden HAPPY ovan är en normal HTML-formatskod. Den börjar med
öppningskoden <happy>, innehåller data mellan öppnings- och stängningskoderna
och slutar med stängningskoden </happy>. (Om det hade varit en strängavgränsad
kod skulle attributen START_STRING och END_STRING ha ingått i kodspecifikationen.)
En ASP-kod är en strängavgränsad kod. Den startar med strängen <% och slutar
med strängen %> och den har ingen stängningskod.
Här följer en beskrivning av attributen och giltiga värden för koden TAGSPEC.
Attribut som är markerade med en asterisk (*) ignoreras för strängavgränsade
koder.
<tagspec>
Beskrivning
Ger information om en tredjepartskod.
Attribut
tag_name, tag_type, render_contents, content_model, start_string, end_string,
detect_in_attribute, parse_attributes, icon, icon_width, icon_height
Den egna kodens namn. (För strängavgränsade koder används TAG_NAME
endast för att avgöra om en viss egenskapskontroll kan användas för koden. Om
den första raden i egenskapskontrollen innehåller detta kodnamn med en asterisk
på vardera sidan kan kontrollen användas för koder av denna typ. Exempel:
Kodnamnet, TAG_NAME, för ASP-kod är ASP. Följaktligen ska det stå *ASP* på
första raden i egenskapskontroller som kan granska ASP-kod. Information om
egenskapskontrollens API finns i ”Egenskapskontroller” i Utöka Dreamweaver.)
TAG_NAME
TAG_TYPE*
Anger om koden är tom (som exempelvis IMG) eller om den innehåller
någonting mellan öppnings- och stängningskoderna (som exempelvis CODE). Detta
attribut är obligatoriskt för normala (ej strängavgränsade) koder. Det ignoreras för
strängavgränsade koder, eftersom de alltid är tomma. Giltiga värden är "EMPTY"
och "NONEMPTY".
RENDER_CONTENTS*
Anger om kodens innehåll ska visas i designvyn i
dokumentfönstret eller om ikonen visas i stället. Detta attribut är obligatoriskt för
icke-tomma koder och ignoreras för tomma koder. (Tomma koder har inget
innehåll.) Detta attribut gäller bara för koder som finns utanför attribut.
Innehållet i koder som finns i värdena för andra koders attribut visas inte. Giltiga
värden är "TRUE" och "FALSE".
Anpassa Dreamweaver
533
CONTENT_MODEL*
Beskriver vilken typ av innehåll som kan finnas i koden och var i
en HTML-fil koden kan finnas. Giltiga värden är "BLOCK_MODEL", "HEAD_MODEL",
"MARKER_MODEL" och "SCRIPT_MODEL":
•
BLOCK_MODEL Anger att koden kan innehålla blockelement, exempelvis DIV och
P, och att koden endast kan finnas i BODY-delen eller i andra BODYinnehållskoder, exempelvis DIV, LAYER och TD.
•
HEAD_MODEL
i HEAD-delen.
•
MARKER_MODEL Anger att koden kan innehålla alla sorters giltig HTML-kod
och att den kan finnas var som helst i en HTML-fil. HTML-valideraren i
Dreamweaver ignorerar koder som anges som marker_model. Valideraren
ignorerar däremot inte innehållet i en sådan kod. Så även om själva koden kan
finnas var som helst kan kodens innehåll orsaka felaktig HTML-kod på vissa
ställen. Vanlig text kan exempelvis inte finnas (utanför ett giltigt HEAD-element)
i HEAD-delen i ett dokument, så du kan inte placera en MARKER_MODEL-kod som
innehåller vanlig text i HEAD-delen. (Om du vill placera en egen kod med vanlig
text i HEAD-delen anger du kodens innehållsmodell som HEAD_MODEL i stället för
MARKER_MODEL.) Använd MARKER_MODEL för koder som ska visas infogade (inuti ett
blockelement såsom P eller DIV, exempelvis i ett stycke). Använd inte denna
modell om koden ska visas som ett eget stycke, med radbrytningar före och
efter.
•
SCRIPT_MODEL Anger att koden kan finnas var som helst mellan de inledande
och avslutande HTML-koderna i ett dokument. När en kod av denna modell
påträffas i Dreamweaver ignoreras hela innehållet i koden. Används för
tredjepartskod (exempelvis vissa ColdFusion-koder) som inte ska analyseras i
Dreamweaver.
Anger att koden kan ha textinnehåll och att den endast kan finnas
Anger en avgränsare som markerar början av en strängavgränsad
kod. Strängavgränsade koder kan finnas var som helst i dokumentet där en
kommentar kan finnas. I Dreamweaver utförs varken någon kodanalys eller någon
enhets- eller URL-avkodning mellan START_STRING och END_STRING. Detta attribut
är obligatoriskt om END_STRING är angivet.
START_STRING
Anger en avgränsare som markerar slutet på en strängavgränsad kod.
Detta attribut är obligatoriskt om START_STRING är angivet.
END_STRING
DETECT_IN_ATTRIBUTE Anger om allting mellan START_STRING och END_STRING (eller
mellan öppnings- och stängningskoder om dessa strängar inte är definierade) ska
ignoreras även när dessa strängar finns inuti attributnamn eller attributvärden. Du
bör vanligtvis ange värdet "TRUE" för strängavgränsade koder. Standardvärdet är
"FALSE". ASP-koder finns exempelvis ibland inuti attributvärden och innehåller
ibland citattecken ("). Eftersom ASP-kodspecifikationen anger
detect_in_attribute="true" ignoreras ASP-koderna, inklusive de interna
citattecknen, när de finns inuti attributvärden.
534
Kapitel 22
PARSE_ATTRIBUTES* Anger om kodens attribut ska analyseras. Om du anger
"TRUE" (standard) analyseras attributen. Om du anger "FALSE" ignoreras allting
fram till nästa avslutande vinkelparentes som finns utanför citattecken. Detta
attribut ska exempelvis ha värdet "FALSE" för en kod av typen CFIF (som i <cfif a
är 1> som inte går att analysera som en uppsättning namn/värde-par för attribut).
Anger sökväg och filnamn för den ikon som är associerad med koden.
Detta attribut är obligatoriskt för tomma koder, samt för icke-tomma koder vars
innehåll inte visas i designvyn i dokumentfönstret.
ICON
ICON_WIDTH
Anger ikonens bredd i bildpunkter.
ICON_HEIGHT
Anger ikonens höjd i bildpunkter.
Innehåll
Inget (tom kod).
Behållare
Inga.
Exempel
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false"
content_model="marker_model" icon="happy.gif" icon_width="18"
icon_height="18"></tagspec>
Hur egna koder visas i designvyn
Hur egna koder visas i designvyn i dokumentfönstret beror på värdena för
attributen TAG_TYPE och RENDER_CONTENTS för koden TAGSPEC. Om TAG_TYPE har
värdet "EMPTY" visas den ikon som anges i attributet ICON. Om TAG_TYPE har värdet
"NONEMPTY" men RENDER_CONTENTS har värdet "FALSE", visas ikonen på samma sätt
som för en tom kod. Så här kan exempelvis en förekomst av den tidigare
definierade koden HAPPY visas i HTML-koden:
<p>Detta är ett stycke som innehåller en förekomst av koden <code>happy</code>
(<happy>Joe</happy>).</p>
Detta stycke kan se ut så här i designvyn:
Anpassa Dreamweaver
535
Lägg märke till att innehållet i HAPPY-koden (ordet Joe) inte visas, eftersom
RENDER_CONTENTS har värdet "FALSE" i kodspecifikationen. Öppnings- och
stängningskoderna samt deras innehåll visas i stället som en ikon.
För icke-tomma koder som har värdet "TRUE" för RENDER_CONTENTS visas inte en
ikon i designvyn. I stället visas innehållet mellan öppnings- och
stängningskoderna (exempelvis texten mellan koderna i <minkod>Detta är
innehållet mellan öppnings- och stängningskoderna</minkod>). Om Visa >
Osynliga element är aktiverat markeras innehållet i den färg för tredjepartskoder
som finns angiven i markeringsinställningarna. (Observera att markering endast
gäller för koder som definieras i koddatabasfiler.)
Så här ändrar du markeringsfärg för tredjepartskoder:
1
Välj Redigera > Inställningar och markera kategorin Markering.
2
Klicka i färgrutan Koder från tredjepart så att färgväljaren visas.
3
Välj en färg och klicka på OK så att dialogrutan Inställningar stängs.
Information om hur du väljer en färg finns i ”Arbeta med färger” på sidan 83.
ASP
Microsofts ASP (Active Server Pages) är ett sätt att kombinera HTML, skript i
JavaScript eller VBScript och ActiveX-kontroller så att HTML kan hanteras
dynamiskt. När en webbläsare begär en ASP-sida från en Microsoft-webbserver
tolkar servern ASP-koden och skickar sedan sidan i HTML-kod till webbläsaren.
(Webbläsaren får bara HTML-kod, inte ASP-kod.) Mer information om ASP
finns i Microsofts översikt över ASP som beskrivs i ”HTML- och
webbteknikresurser” på sidan 24.
Ett block med ASP-kod börjar med <% och slutar med %>. Om Visa > Osynliga
element är aktiverat, och kryssrutan Serverkoder är markerad i inställningarna för
osynliga element, visas en ASP-ikon som märker upp var det finns ASP-kod i
designvyn i dokumentfönstret. Annars visas ingenting som anger kodens plats.
Mer information om osynliga element finns i ”Osynliga element” på sidan 149.
JSP
Suns JSP (JavaServer Pages) är ett Java-baserat sätt att dynamiskt hantera HTML
och annat webbinnehåll. När en webbläsare begär en JSP-sida från en JSPaktiverad server tolkar servern JSP-koden och skickar sedan sidan i HTML-kod
till webbläsaren. (Webbläsaren får bara HTML-kod, inte JSP-kod.) Mer
information om JSP finns på Suns JSP-sida, som beskrivs i ”HTML- och
webbteknikresurser” på sidan 24.
Ett block med JSP-kod börjar med <% och slutar med %>. Eftersom JSP använder
samma avgränsare som ASP visas en ASP-ikon för JSP-kod i Dreamweaver.
536
Kapitel 22
PHP
PHP (som står för PHP: Hypertext Preprocessor) är ett skriptspråk på serversidan.
När en webbläsare begär en PHP-sida från en PHP-aktiverad server tolkar servern
PHP-koden och skickar sedan sidan i HTML-kod till webbläsaren. (Webbläsaren
får bara HTML-kod, inte PHP-kod.) Mer information om PHP finns på PHPsidorna, som beskrivs i ”HTML- och webbteknikresurser” på sidan 24.
Ett block med PHP-kod börjar med <? och slutar med ?>. Om Visa > Osynliga
element är aktiverat, och kryssrutan Serverkoder är markerad i inställningarna för
osynliga element, visas en PHP-ikon som märker upp var det finns PHP-kod i
designvyn i dokumentfönstret. Annars visas koden inte i designvyn. Mer
information om osynliga element finns i ”Osynliga element” på sidan 149.
ColdFusion
Allaire ColdFusion är ett annat sätt att hantera sidor dynamiskt. När en
webbläsare begär en ColdFusion-sida från en server vidarebefordrar servern sidan
till programvaran ColdFusion Server, som tolkar sidans skript och sedan skickar
den i HTML-kod till webbläsaren. (Webbläsaren får bara HTML-kod, inte
ColdFusion-kod.) Mer information om ColdFusion finns på produktsidan
ColdFusion, som beskrivs i ”HTML- och webbteknikresurser” på sidan 24.
Dreamweaver känner igen cirka femtio ColdFusion-koder. Mer information finns
i filen ColdFusion.xml i mappen Configuration/ThirdPartyTags. Om Visa >
Osynliga element är aktiverat, och kryssrutan Serverkoder är markerad i
inställningarna för osynliga element, visas en ColdFusion-ikon som märker upp
var det finns ColdFusion-koder i designvyn i dokumentfönstret. Detta gäller dock
endast de koder som har värdet "FALSE" för RENDER_CONTENTS (i ColdFusion.xml).
Annars visas ingenting som anger kodens plats. Mer information om osynliga
element finns i ”Osynliga element” på sidan 149.
Undvika att tredjepartskoder skrivs om
Vissa sorters fel i HTML-koden korrigeras automatiskt i Dreamweaver (mer
information finns i ”Kodomskrivning – inställningar” på sidan 341). Som
standard ändras inte HTML-kod i filer med vissa filnamnstillägg, däribland .asp
(ASP), .cfm (ColdFusion), .jsp (JSP) och .php (PHP). Denna standardinställning
är gjord för att koden inte oavsiktligt ska råka ändras i några av dessa
tredjepartskoder. Du kan ändra det standardinställda omskrivningsbeteendet i
Dreamweaver så att HTML-kod skrivs om när sådana filer öppnas. Du kan också
lägga till andra filtyper i listan över typer som inte skrivs om.
Anpassa Dreamweaver
537
Observera också att vissa specialtecken automatiskt kodas (genom att de ersätts
med numeriska värden) när du anger dem i egenskapskontrollen. Det är vanligtvis
bäst att låta denna kodning utföras, eftersom det ökar chanserna att specialtecken
visas på rätt sätt på olika plattformar och i olika webbläsare. När du arbetar med
filer som innehåller tredjepartskoder kan det dock hända att du vill ändra denna
kodningsfunktion i Dreamweaver, eftersom sådan kodning kan störa
tredjepartskoder.
Så här anger du att HTML-kod ska skrivas om automatiskt i fler typer av filer:
1
Välj Redigera > Inställningar och markera kategorin Kodomskrivning.
2
Gör något av följande:
• Ta bort ett eller flera tillägg från listan över tillägg.
• Avmarkera kryssrutan Skriv aldrig om kod: I filer med tillägg. (När denna
kryssruta är avmarkerad kan HTML-kod skrivas om automatiskt i alla typer av
filer.)
Så här lägger du till filtyper som inte ska skrivas om automatiskt:
1
Välj Redigera > Inställningar och markera kategorin Kodomskrivning.
2
Kontrollera att kryssrutan Skriv aldrig om kod: I filer med tillägg är markerad
och lägg till de nya filnamnstilläggen i listan i textfältet.
Om den nya filtypen inte visas i listrutan med filtyper i dialogrutan Öppna
(Arkiv > Öppna) kanske du vill lägga till den i filen Configuration/
Extensions.txt. Information finns i ”Ändra standardfiltyp” på sidan 510.
Så här avaktiverar du Dreamweavers kodningsalternativ:
1
Välj Redigera > Inställningar och markera kategorin Kodomskrivning.
2
Avmarkera en av eller båda kryssrutorna för Specialtecken.
Information om de andra inställningarna för kategorin Kodomskrivning finns i
”Kodomskrivning – inställningar” på sidan 341.
538
Kapitel 22
A
BILAGA A
Kortkommandon
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Du kan hämta en lista med kortkommandon, som du kan skriva ut, från
Dreamweavers kundtjänst (www.macromedia.com/support/dreamweaver/
documentation.html).
Arkiv-menyn
Åtgärd
Windows
Macintosh
Nytt dokument
Ctrl+N
Kommando+N
Öppna en HTML-fil
Ctrl+O eller dra filen från
Kommando+O
Utforskaren eller platsfönstret
till dokumentfönstret
Öppna i ram
Ctrl+Skift+O
Kommando+Skift+O
Stäng
Ctrl+W
Kommando+W
Spara
Ctrl+S
Kommando+S
Spara som
Ctrl+Skift+S
Kommando+Skift+S
Kontrollera länkar
Skift+F8
Kommando+F8
Avsluta
Ctrl+Q
Kommando+Q
539
Redigera-menyn
Åtgärd
Windows
Macintosh
Ångra
Ctrl+Z
Kommando+Z
Gör om
Ctrl+Y eller Ctrl+Skift+Z
Kommando+Y eller Kommando+Skift+Z
Klipp ut
Ctrl+X eller
Skift+Del
Kommando+X eller
Skift+Del
Kopiera
Ctrl+C eller
Ctrl+Ins
Kommando+C eller
Kommando+Ins
Klistra in
Ctrl+V eller
Skift+Ins
Kommando+V eller
Skift+Ins
Ta bort
Del
Del
Markera allt
Ctrl+A
Kommando+A
Markera överordnad kod
Ctrl+Skift+<
Kommando+Skift+<
Markera underordnad
Ctrl+Skift+>
Kommando+Skift+>
Sök och ersätt
Ctrl+F
Kommando+F
Sök nästa
F3
Kommando+G
Dra in kod
Ctrl+Skift+]
Kommando+Skift+]
Minska indrag på kod
Ctrl+Skift+[
Kommando+Skift+[
Kontrollera klammerparenteser
Ctrl+’
Kommando+’
Redigera med extern redigerare
Ctrl+E
Kommando+E
Inställningar
Ctrl+U
Kommando+U
Visningsalternativ för sidor
540
Bilaga A
Växla visning av
Windows
Macintosh
Standard
Ctrl+Skift+F6
Kommando+Skift+F6
Layout
Ctrl+F6
Kommando+F6
Verktygsfält
Ctrl+Skift+T
Kommando+Skift+T
Visa sidelement
Växla visning av
Windows
Macintosh
Visuella hjälpmedel
Ctrl+Skift+I
Kommando+Skift+I
Linjaler
Ctrl+Alt+R
Kommando+Alternativ+R
Visa stödraster
Ctrl+Alt+G
Kommando+Alternativ+G
Fäst mot stödraster
Ctrl+Alt+Skift+G
Kommando+Alternativ+Skift+G
Innehållet under HEAD
Ctrl+Skift+W
Kommando+Skift+W
Sidegenskaper
Ctrl+Skift+J
Kommando+Skift+J
Åtgärd
Windows
Macintosh
Växla till designvyn
Ctrl+Tabb
Alternativ+Tabb
Öppna Quick Tag Editor
Ctrl+T
Kommando+T
Markera överordnad kod
Ctrl+Skift+<
Kommando+Skift+<
Kontrollera klammerparenteser
Ctrl+’
Kommando+’
Markera allt
Ctrl+A
Kommando+A
Kopiera
Ctrl+C
Kommando+C
Sök och ersätt
Ctrl+F
Kommando+F
Sök nästa
F3
Kommando+G
Ersätt
Ctrl+H
Kommando+H
Klistra in
Ctrl+V
Kommando+V
Klipp ut
Ctrl+X
Kommando+X
Gör om
Ctrl+Y
Kommando+Y
Ångra
Ctrl+Z
Kommando+Z
Lägg till/ta bort brytpunkt
Ctrl+Alt+B
Kommando+Alternativ+B
Markera rad upp
Skift+Uppil
Skift+Uppil
Markera rad ned
Skift+Nedpil
Skift+Nedpil
Kodredigering
Kortkommandon
541
Åtgärd
Windows
Macintosh
Markera tecken åt vänster
Skift+Vänsterpil
Skift+Vänsterpil
Markera tecken åt höger
Skift+Högerpil
Skift+Högerpil
Flytta till sida upp
Page Up (PGUP)
Page Up (PGUP)
Flytta till sida ned
Page Down (PGDN)
Page Down (PGDN)
Markera sida upp
Skift+Page Up (PGUP)
Skift+Page Up (PGUP)
Markera sida ned
Skift+Page Down (PGDN)
Skift+Page Down (PGDN)
Markera ord åt vänster
Ctrl+Skift+Vänsterpil
Kommando+Skift+Vänsterpil
Markera ord åt höger
Ctrl+Skift+Högerpil
Kommando+Skift+Högerpil
Flytta till början av raden
Home
Home
Flytta till radslut
End
End
Flytta till början av koden
Ctrl+Home
Kommando+Home
Flytta till kodslut
Ctrl+End
Kommando+End
Markera till början av kod
Ctrl+Skift+Home
Kommando+Skift+Home
Markera till kodslut
Ctrl+Skift+End
Kommando+Skift+End
Åtgärd
Windows
Macintosh
Skapa ett nytt stycke
Retur
Retur
Infoga en radbrytning <BR>
Skift+Retur
Skift+Retur
Infoga ett hårt mellanslag
Ctrl+Skift+Mellanslag
Alternativ+Mellanslag
Flytta text eller objekt till ett annat ställe
på sidan
Dra den markerade posten till Dra den markerade posten till
ett nytt ställe
ett nytt ställe
Redigera text
542
Bilaga A
Kopiera text eller objekt till ett annat ställe Ctrl-dra den markerade pospå sidan
ten till ett nytt ställe
Alternativ-dra den markerade
posten till ett nytt ställe
Markera ett ord
Dubbelklicka
Dubbelklicka
Lägga till markerade poster i bibliotek
Ctrl+Skift+B
Kommando+Skift+B
Växla mellan designvyn och kodredigerare
Ctrl+Tabb
Alternativ+Tabb
Åtgärd
Windows
Macintosh
Öppna och stänga egenskapskontrollen Ctrl+Skift+J
Kommando+Skift+J
Kontrollera stavning
Skift+F7
Skift+F7
Åtgärd
Windows
Macintosh
Indrag
Ctrl+]
Kommando+]
Minska indrag
Ctrl+[
Kommando+[
Formatera > Inget
Ctrl+0 (noll)
Kommando+0 (noll)
Styckeformat
Ctrl+Skift+P
Kommando+Skift+P
Formatera text
Ange Rubrik 1 till och med 6 för ett stycke Ctrl+1 till och med 6
Kommando+1 till och med 6
Justera > Vänster
Ctrl+Skift+Alt+L
Kommando+Skift+Alternativ+L
Justera > Centrera
Ctrl+Skift+Alt+C
Kommando+Skift+Alternativ+C
Justera > Höger
Ctrl+Skift+Alt+R
Kommando+Skift+Alternativ+R
Göra markerad text fet
Ctrl+B
Kommando+B
Göra markerad text kursiv
Ctrl+I
Kommando+I
Redigera formatmall
Ctrl+Skift+E
Kommando+Skift+E
Obs! En del kortkommandon för textformatering fungerar inte när du arbetar i
kodredigerarna.
Söka och ersätta text
Åtgärd
Windows
Macintosh
Sök
Ctrl+F
Kommando+F
Sök nästa/Sök igen
F3
Kommando+G
Ersätt
Ctrl+H
Kommando+H
Kortkommandon
543
Arbeta i tabeller
Åtgärd
Windows
Macintosh
Markera tabell (med insättningspunkten
inuti tabellen)
Ctrl+A
Kommando+A
Flytta till nästa cell
Tabb
Tabb
Flytta till föregående cell
Skift+Tabb
Skift+Tabb
Infoga en rad (före den aktuella)
Ctrl+M
Kommando+M
Lägga till en rad i slutet av tabell
Tabb i den sista cellen
Tabb i den sista cellen
Ta bort den aktuella raden
Ctrl+Skift+M
Kommando+Skift+M
Infoga en kolumn
Ctrl+Skift+A
Kommando+Skift+A
Ta bort en kolumn
Ctrl+Skift+ - (bindestreck)
Kommando+Skift+ - (bindestreck)
Slå samman markerade tabellceller
Ctrl+Alt+M
Kommando+Alternativ+M
Dela upp tabellceller
Ctrl+Alt+S
Kommando+Alternativ+S
Uppdatera tabellayout (gör en uppdatering när funktionen Snabbare tabellredigering är aktiverad)
Ctrl+Mellanslag
Kommando+Mellanslag
Obs! En del kortkommandon för tabeller fungerar inte i layoutläget.
Arbeta med ramar
544
Bilaga A
Åtgärd
Windows
Macintosh
Markera en ram
Alt-klicka i en ram
Skift+Alternativ-klicka i en ram
Markera nästa ram eller ramuppsättning
Alt+Högerpil
Kommando+Högerpil
Markera föregående
ram eller ramuppsättning
Alt+Vänsterpil
Kommando+Vänsterpil
Markera överordnad ramuppsättning
Alt+Uppil
Kommando+Uppil
Markera första underordnade ram eller
ramuppsättning
Alt+Nedpil
Kommando+Nedpil
Lägga till en ny ram i en ramuppsättning
Alt-dra ramkant
Alternativ-dra ramkant
Lägga till en ny ram i en ramuppsättning
med flyttmetoden
Alt+Ctrl-dra ramkant
Kommando+Alternativ-dra
ramkant
Arbeta med skikt
Åtgärd
Windows
Macintosh
Markera ett skikt
Ctrl+Skift-klicka
Kommando+Skift-klicka
Markera och flytta skikt
Skift+Ctrl-dra
Kommando+Skift-dra
Lägga till eller ta bort skikt i markering
Skift-klicka på skikt
Skift-klicka på skikt
Flytta markerat skikt i bildpunktssteg
Piltangenter
Piltangenter
Flytta markerat skikt efter stödlinjer
Skift+piltangenter
Skift+piltangenter
Ändra storlek på skikt i bildpunktssteg
Ctrl+piltangenter
Alternativ+piltangenter
Ändra storlek på markerat skikt efter
stödlinjer
Ctrl+Skift+piltangenter
Alternativ+Skift+piltangenter
Justera markerade skikt mot
Ctrl+piltangenter (upp, ned,
över-, neder-, vänster- eller högerkanten vänster eller höger)
på det senast markerade skiktet
Kommando+piltangenter
(upp, ned, vänster eller höger)
Ge markerade skikt samma bredd
Ctrl+Skift+[
Kommando+Skift+[
Ge markerade skikt samma höjd
Ctrl+Skift+]
Kommando+Skift+]
Växla inställningen för kapsling när du
skapar ett skikt
Ctrl-dra
Kommando-dra
Visa/dölja stödrastret
Ctrl+Skift+Alt+G
Kommando+Skift+
Alternativ+G
Fästa mot stödraster
Ctrl+Alt+G
Kommando+Alternativ+G
Arbeta med tidslinjer
Åtgärd
Windows
Macintosh
Lägga till objekt på tidslinje
Ctrl+Alt+Skift+T
Kommando+Alternativ+
Skift+T
Lägga till en huvudbildruta
Skift+F9
Skift+F9
Ta bort en huvudbildruta
Del
Del
Kortkommandon
545
Arbeta med bilder
Åtgärd
Windows
Macintosh
Ändra attributet för bildkälla
Dubbelklicka på bilden
Dubbelklicka på bilden
Redigera bilden i extern redigerare
Ctrl-dubbelklicka på bilden
Kommando-dubbelklicka på
bilden
Hantera hyperlänkar
Åtgärd
Windows
Macintosh
Skapa hyperlänk (markera text)
Ctrl+L
Kommando+L
Ta bort hyperlänk
Ctrl+Skift+L
Kommando+Skift+L
Dra och släpp när du vill skapa en hyper- Markera texten, bilden eller
Markera texten, bilden eller
länk från ett dokument
objektet och Skift-dra marke- objektet och Skift-dra markeringen till en fil i platsfönstret ringen till en fil i platsfönstret
Dra och släpp när du vill skapa en hyper- Markera texten, bilden eller
länk med hjälp av egenskapskontrollen objektet och dra peka-på-filikonen i egenskapskontrollen
till en fil i platsfönstret
Markera texten, bilden eller
objektet och dra peka-på-filikonen i egenskapskontrollen
till en fil i platsfönstret
Öppna det dokument som länken går till i Ctrl-dubbelklicka på länken
Dreamweaver
Kommandodubbelklicka på länken
Kontrollera markerade länkar
Skift+F8
Skift+F8
Kontrollera länkar på hela platsen
Ctrl+F8
Kommando+F8
Förhandsgranska i webbläsare
Åtgärd
Windows
Macintosh
Förhandsgranska i primär webbläsare
F12
F12
Förhandsgranska i sekundär webbläsare Ctrl+F12
546
Bilaga A
Kommando+F12
Felsökning i webbläsare
Åtgärd
Windows
Macintosh
Felsökning i primär webbläsare
Alt+F12
Alternativ+F12
Felsökning i sekundär webbläsare
Ctrl+Alt+F12
Kommando+Alternativ+F12
Platshantering och FTP
Åtgärd
Windows
Macintosh
Skapa en ny fil
Ctrl+Skift+N
Kommando+Skift+N
Skapa en ny mapp
Ctrl+Skift+Alt+N
Kommando+Skift+
Alternativ+N
Öppna markering
Ctrl+Skift+Alt+O
Kommando+Skift+
Alternativ+O
Hämta markerade filer eller mappar från
fjärr-FTP-plats
Ctrl+Skift+D eller dra filer från Kommando+Skift+D eller dra
fjärrfönsterrutan till den lokala filer från fjärrfönsterrutan till
fönsterrutan i platsfönstret
den lokala fönsterrutan i platsfönstret
Skicka de markerade filerna eller mapparna till fjärr-FTP-platsen
Ctrl+Skift+U eller dra filer från Kommando+Skift+U eller dra
filer från den lokala fönsterruden lokala fönsterrutan till
fjärrfönsterrutan i platsfönstret tan till fjärrfönsterrutan i platsfönstret
Checka ut
Ctrl+Skift+Alt+D
Kommando+Skift+
Alternativ+D
Checka in
Ctrl+Skift+Alt+U
Kommando+Skift+
Alternativ+U
Visa platskarta
Ctrl+F5
Kommando+F5
Uppdatera fjärrplats
Alt+F5
Alternativ+F5
Kortkommandon
547
Platskarta
Åtgärd
Windows
Macintosh
Visa platsens filer
F5
F5
Uppdatera den lokala fönsterrutan
Skift+F5
Skift+F5
Skapa rot
Ctrl+Skift+R
Kommando+Skift+R
Länka till befintlig fil
Ctrl+Skift+K
Kommando+Skift+K
Ändra länk
Ctrl+L
Kommando+L
Ta bort länk
Del
Del
Visa/dölj länk
Ctrl+Skift+Y
Kommando+Skift+Y
Visa sidtitlar
Ctrl+Skift+T
Kommando+Skift+T
Ändra namn på fil
F2
ej tillgängligt
Zooma in platskartan
Ctrl+ + (plustecken)
Kommando+ + (plustecken)
Zooma ut platskartan
Ctrl+ - (bindestreck)
Kommando+ - (bindestreck)
Spela upp insticksprogram
548
Bilaga A
Åtgärd
Windows
Macintosh
Spela upp insticksprogram
Ctrl+Alt+P
Kommando+Alternativ+P
Stoppa insticksprogram
Ctrl+Alt+X
Kommando+Alternativ+X
Spela upp alla insticksprogram
Ctrl+Skift+Alt+P
Kommando+Skift+
Alternativ+P
Stoppa alla insticksprogram
Ctrl+Skift+Alt+X
Kommando+Skift+
Alternativ+X
Arbeta med mallar
Åtgärd
Windows
Macintosh
Skapa ny ändringsbar region
Ctrl+Alt+V
Kommando+Alternativ+V
Infoga
Windows
Macintosh
Objekt (bild, Shockwave-film m.m.)
Dra filen från Utforskaren eller Dra filen från Finder eller
platsfönstret till dokumentplatsfönstret till dokumentfönstret
fönstret.
Bild
Ctrl+Alt+I
Kommando+Alternativ+I
Tabell
Ctrl+Alt+T
Kommando+Alternativ+T
Flash-film
Ctrl+Alt+F
Kommando+Alternativ+F
Shockwave Director-film
Ctrl+Alt+D
Kommando+Alternativ+D
Namngivet ankare
Ctrl+Alt+A
Kommando+Alternativ+A
Åtgärd
Windows
Macintosh
Öppna historiepanelen
F9
F9
Starta/stoppa inspelning av kommando
Ctrl+Skift+X
Kommando+Skift+X
Spela upp inspelat kommando
Ctrl+P
Kommando+P
Infoga objekt
Historiepanelen
Kortkommandon
549
Öppna och stänga paneler
Ändra visningen av
Windows
Macintosh
Objekt
Ctrl+F2
Kommando+F2
Egenskaper
Ctrl+F3
Kommando+F3
Platsfiler
F5
F5
Platskarta
Ctrl+F5
Kommando+F5
Resurser
F11
F11
CSS-format
Skift+F11
Skift+F11
HTML-format
Ctrl+F11
Kommando+F11
Beteenden
Skift+F3
Skift+F3
Historia
Skift+F10
Skift+F10
Tidslinjer
Skift+F9
Skift+F9
Kodkontrollen
F10
F10
Ramar
Skift+F2
Skift+F2
Skikt
F2
F2
Referens
Ctrl+Skift+F1
Kommando+Skift+F1
Visa/dölja flytande paneler
F4
F4
Minimera alla fönster
Skift+F4
*
Återställa alla fönster
Alt+Skift+F4
*
Åtgärd
Windows
Macintosh
Hjälpavsnitt för Använda Dreamweaver
F1
F1
Referens
Skift+F1
Skift+F1
Dreamweaver kundtjänst
Ctrl+F1
Kommando+F1
Visa hjälp
550
Bilaga A
Förteckning över kortkommandon
Obs! En asterisk (*) anger en outnyttjad tangentkombination. Kursiv stil anger
systemkommandon.
Tangentbordstecken
A
Ctrl (Windows)
eller
Kommando
(Macintosh)
Ctrl+Skift (Windows) eller Kommando+Skift
(Macintosh)
Ctrl+Alt
(Windows) eller
Kommando+
Alternativ (Macintosh)
Ctrl+Skift+Alt (Windows) eller Kommando+
Skift+Alternativ
(Macintosh)
Markera allt,
Infoga tabellkolumn
Infoga namngivet
ankare
*
Markera tabell
B
Fet (växla)
Lägga till i bibliotek
*
*
C
Kopiera
*
*
Centrera
D
Duplicera
Hämta markerade filer Infoga Shockwave
eller mappar
Director-film
E
Redigera med extern Redigera formatmall
redigerare
*
*
F
Sök
*
Infoga Flash-film
*
G
Sök igen (endast
Macintosh)
*
Visa/dölj stödraster
Fäst mot stödraster
(växla)
H
Ersätt
*
*
*
I
Kursiv (växla)
Visa osynliga (växla)
Infoga bild
*
J
Sidegenskaper
Egenskapskontroll
(växla)
*
*
K
*
*
*
*
L
Skapa länk
Ta bort länk
*
Vänsterjustera
M
Infoga tabellrad
Ta bort tabellrad
Slå samman markerade *
tabellceller
N
Ny sida (endast Win- *
Nytt fönster
dows)
(Windows)
Ny sida (Macintosh)
O
Öppna
Öppna i ram
*
Öppna markerad platsfil
P
Spela upp inspelat
kommando
Styckeformat
Spela upp insticksprogram
Spela upp alla insticksprogram
Q
Avsluta
*
*
*
R
*
Skapa rot
Visa/dölj linjaler
Högerjustera
Checka ut markerade
filer eller mappar
Ny platsmapp
Kortkommandon
551
552
Tangentbordstecken
Ctrl (Windows)
eller
Kommando
(Macintosh)
Ctrl+Skift (Windows) eller Kommando+Skift
(Macintosh)
Ctrl+Alt
(Windows) eller
Kommando+
Alternativ (Macintosh)
Ctrl+Skift+Alt (Windows) eller Kommando+
Skift+Alternativ
(Macintosh)
S
Spara
Spara allt
Dela upp tabellcell
*
T
Quick Tag Editor
Visa sidtitlar i platskar- Infoga tabell
tan
Lägga till objekt på tidslinje
U
Inställningar
Skicka markerade filer *
eller mappar
Checka in markerade
filer eller mappar
V
Klistra in
*
Skapa ny ändringsbar
region
*
W
Stäng
Visa innehållet under
HEAD
*
*
X
Klipp ut
Starta inspelning av
kommando
Stoppa insticksprogram Stoppa alla insticksprogram
Y
Gör om
Visa/dölj länk
*
*
Z
Ångra
Gör om
*
*
0 (noll)
Ange styckeformat
som Inget
*
*
*
1
Använd Rubrik 1 på
stycke
*
*
*
2
Använd Rubrik 2 på
stycke
*
*
*
3
Använd Rubrik 3 på
stycke
*
*
*
4
Använd Rubrik 4 på
stycke
*
*
*
5
Använd Rubrik 5 på
stycke
*
*
*
6
Använd Rubrik 6 på
stycke
*
*
*
7
*
*
*
*
8
*
*
*
*
9
*
*
*
*
Bilaga A
Tangentbordstecken
Ctrl (Windows)
eller
Kommando
(Macintosh)
- (minus) och
_ (understreck)
Ctrl+Skift (Windows) eller Kommando+Skift
(Macintosh)
Ctrl+Alt
(Windows) eller
Kommando+
Alternativ (Macintosh)
Ctrl+Skift+Alt (Windows) eller Kommando+
Skift+Alternativ
(Macintosh)
Zooma ut platskartan Ta bort tabellkolumn
*
*
= och +
Anpassa till fönster
*
*
[ och {
Minska indrag (Flytta Gör samma bredd
en nivå ned)
(skikt)
*
*
] och }
Indrag (Flytta en nivå Gör samma höjd
upp)
(skikt)
*
*
>
*
Markera underordnad *
*
<
*
Markera överordnad
kod
*
*
? och /
*
*
*
*
; och :
*
*
*
*
’ och ”
*
*
*
*
’och ~
*
*
*
*
\ och |
*
*
*
*
Mellanslag
Uppdatera tabellayout
Infoga hårt mellanslag *
(Windows)
(Alternativ+
Mellanslag på Macintosh)
*
Zooma in platskartan
Kortkommandon
553
Funktionstangent
Ingen änd- Skift
ringstangent
Alt (Windows) eller
Alternativ
(Macintosh)
Ctrl (Windows) eller
Kommando
(Macintosh)
Ctrl+
Skift (Windows) eller
Kommando+
Skift
(Macintosh)
F1
Hjälp för
Använda Dreamweaver
Referens
*
Dreamweaver
kundtjänst
Referenspane- *
len
*
F2
Skikt
Ramar
*
Objektpanelen
*
*
*
F3
Sök igen
(endast Windows)
Beteendepanelen
*
Egenskapskon- *
trollen
*
*
F4
Visa/dölja flytande paneler
Minimera alla Stänga fönster Stänga fönster
fönster (endast
(endast MacinWindows)
tosh)
*
*
*
F5
Platsfiler
Uppdatera den Uppdatera
lokala fönster- fjärrfönsterrurutan
tan
Platskarta
*
*
*
F6
*
*
*
Växla till layout- Växla till stanläget
dardvyn
*
*
F7
*
Kontrollera
stavning
*
*
*
*
*
F8
*
Kontrollera
*
markerade länkar
Kontrollera länkar på
hela platsen
*
*
*
F9
*
Tidslinje och
lägga till
huvudbildruta
*
*
*
*
*
F10
Kodkontrollen
Historiepanelen
*
*
*
*
*
F11
Resurser
CSS-format
*
HTML-format
*
*
*
F12
Förhandsgran- *
ska i primär
webbläsare
*
Felsökning i
sekundär
webbläsare
*
554
Bilaga A
Felsökning i
Förhandsgranprimär webblä- ska i sekundär
sare
webbläsare
Ctrl+
Alt
(Windows)
eller Kommando+
Alternativ
(Macintosh)
Ctrl+
Skift+Alt
(Windows)
eller Kommando+
Skift+
Alternativ
(Macintosh)
INDEX
A
Absolut mitten, justeringsalternativ
(bildegenskapskontroll) 267
Absolut nederst, justeringsalternativ
(bildegenskapskontroll) 267
absoluta sökvägar 350
Active Server Pages (ASP) 536
koder, anpassa analys och utseende 532
om 536
redigera 346
ActiveX-kontroller
egenskaper 312
infoga 311
ändra storlek 268
översikt 311
Aktivera in- och utcheckning av filer, alternativ 127
All information, flik (Design Notes) 131
allmänna inställningar 85
Alt, bildegenskap 266
alternativknappar 486
Alt-text saknas, alternativ 507
Andra nyckelord, alternativ (Kodfärger, inställningar)
339
Ange bakgrundsfärg, alternativ (Rensa Word-HTML)
344
ange dokumentegenskaper 146
Ange färgschema, kommando 147
ange målramar som
_blank 213
_parent 213
_self 213
_top 213
Ange som hemsida, kommando 116
Ange texten i ramen, åtgärd 459
Ange texten i skiktet, åtgärd 460
Ange texten i statusfältet, åtgärd 461
Ange texten i textfältet, åtgärd 462
animering
redigera Fireworks-animeringar 288
animeringar
använda på objekt 429
förbättra 430
kopiera och klistra in 428
skapa 423
tidslinjer 421
utefter en komplex bana 425
översikt 18
ankare, namngivna 358
Ankare, objekt (objektpanelen) 359
anonyma filsändningar 485
anpassa Dreamweaver 509, 509–538
dialogrutor 524
grunderna 86
koder, tredjepart 532
menyer 513
objektpanelen 511
startknappar och startfältet 73
anpassade format. Se formatmallar
Anropa JavaScript, åtgärd 444
ansluta till fjärrplatser
använda källkontrollsystem 123
Anslutningshastighet, alternativ 72
Använd brandvägg, alternativ 121
Använd källformat, alternativ (Rensa Word-HTML,
kommando) 344
Använd källformat, kommando 343
Använd passiv FTP, alternativ 121
Använd reguljära uttryck, alternativ 256
Använd, alternativ (Kodformat, inställningar) 339
använda Dreamweaver med Visual SourceSafe 124
Använda Dreamweaver, bok 14
använda färger på text 220
AppleTalk-servrar 120
arbetsflödesrapporter 136
arbetsområde 68
ASP. Se Active Server Pages
555
attribut
i webbläsarprofiler 527
sökning 256
Se även koder
audio. Se ljud
automatisera uppgifter 154
Automatisk radbrytning, alternativ (Kodformat,
inställningar) 340
automatisk sträckning (layout) 172
Autospela, alternativ 422
Autospela, alternativ (tidslinjepanelen) 423
B
B och H, bildegenskaper 265
bakgrund
genomskinlighet i 147
sida, bild och färg 147
Bakgrund, alternativ (Kodfärger, inställningar) 338
Baslinje, justeringsalternativ (bildegenskapskontroll)
267
BBEdit-integrering (endast Macintosh) 346
bearbeta formulär 494
beroende filer
hämta 139
skicka 140
visa och dölja 117
beteenden 433, 433–468
definierade 433
kanal på tidslinjer 422
kompatibilitet med webbläsare 442
koppla 437
och biblioteksposter 397
och bilder 276
och formulär 495
och länkar 369
och mallar 384
och media 315
och tidslinjer 440
ta bort 440
tredjepart 441
utlösa 437
åtgärder, skapa 441
ändra 440
beteendepanelen 434
biblioteksposter 392–399
egenskaper 399
göra ändringsbara i dokument 397
556
Index
inställningar 393
lägga till på sidor 394
redigera 394
redigera beteenden i 397
skapa 392
som resurser. Se resurser
ta bort 396
ändra markeringsfärger 393
översikt 392
biblioteksposter, exportera från Fireworks 281
bilder
använda beteenden på 276
egenskaper 265
externa bildredigerare 273
format, som stöds 263
förhandsladda (beteende) 457
i tabeller 179
infoga 264
infoga i layoutvyn 167
justera 235
klickbara bilder 269
kortkommandon 546
redigera 273
skalbarhet 268
som resurser. Se resurser
växla (beteende) 465
återställa växling (beteende) 466
ändra källfil med tidslinjer 427
ändra storlek visuellt 268
bildkontroll 269
bildpunkter, genomskinliga i bakgrunden 147
bildrutor per sekund (bps) 422
bildskärmsstorlek, ändra storlek på sidor så att de passar 70
bitmappar, ändra storlek 268
Se även bilder
BLOCKQUOTE, kod 236
BODY-kod 152
Borttagbara tomma koder, alternativ 507
bps (bildrutor per sekund) 422
brandväggar
alternativ 121
definiera värd och port 108
brutna länkar 502
brytpunkter i felsökningsprogrammet för JavaScript
473
bädda in ljud 308
börja 20
C
Cache, alternativ (dialogrutan Platsdefinition) 98, 99
celler. Se layoutceller, tabellceller
Cellmellanrum, alternativ (i dialogrutan Infoga tabell)
178
Cellutfyllnad, alternativ (i dialogrutan Infoga tabell)
178
Centrering, alternativ (Kodformat, inställningar) 340
CFML. Se ColdFusion Markup Language
CGI
referensmaterial 24
CGI (Common Gateway Interface)
skript 494
checka in och ut filer 127–129
ångra en utcheckning 129
översikt 127
Checka in/ut, alternativ 127
ange en e-postadress 128
ange ett utcheckningsnamn 128
Checka ut filer när du öppnar, alternativ 127
CLASS, attribut 247
ColdFusion Markup Language (CFML)
koder, anpassa analys och utseende 532
och Dreamweaver 325
redigera CFML-koder 346
översikt 537
Common Gateway Interface (CGI). Se CGI 494
Configuration, mapp
Behaviors, undermapp 524
BrowserProfiles, undermapp 527
Commands, undermapp 524
Extensions.txt, fil 510
menus.xml, fil 513
Objects, undermapp 511
SourceFormat.txt, fil 525
ThirdPartyTags, undermapp 532
CSS-format
använda anpassade 249
attribut, konvertera till HTML 253
class, attribut 247
exportera 250
skapa 247
väljare 247
CSS-formatpanelen 251
CSS-lager
exportera från Fireworks 280
D
datum
infoga 229
Definiera HTML-format, dialogruta 239
Dela ram, kommandon 199
Dela upp cell, kommando 192
Design Notes
aktivera 130
avaktivera 132
för dokument och objekt 131
för Fireworks-filer 135
för mediaobjekt 296
köra en rapport 137
lägga till statusalternativ 132
rapporter 136
spara filinformation 130
översikt 130
designvyn
ordna vyer 327
visa tillsammans med kodvyn 326
dialogrutor, anpassa 524
Director, skapa Shockwave-filmer med 305
distanshållarbild 175
distanshållarbilder 174
inställningar 174
dokument
ange egenskaper 146
Design Notes, använda med 130
förhandsgranska i webbläsare 500
kontrollera länkar 502
mallar, koppla loss från 387
nytt 144
sidtitel 146
skapa 144
skapa, baserade på mallar 385
spara 145
storlek och nedladdningstid 505
söka 254
text, lägga till 228
öppna 144
Index
557
dokumentfönstret
Fönsterstorlek, popup-meny 70
grunderna 69
kodkontrollen, växla till 328
kodväljare 70
markera element 148
namnlist 69
ramar i 205
sidstorlek och hämtningstid 70
spela upp Navigator-insticksprogram 310
startfältet 70
söka efter text 254
ändra storlek 70
öppna dokument 144
dokumentrelativa sökvägar
inställning 355
om 351
dolda filer, visa och dölja 117
Dra skikt, åtgärd 449
Dreamweaver-bibliotek, exportera från Fireworks 281
Dreamweavers diskussionsgrupp 16
Dreamweavers kundtjänst 16
dölja osynliga element 149
E
egenskaper
ActiveX-kontroller 312
bilder 265
dokument, ange 146
Flash-filmer 304
flera skikt 415
hotspot-objekt 270
Java-miniprogram 313
kolumner, rader och celler 185
layoutcell 170
layouttabeller 171
ramar 206
ramuppsättningar 208
Shockwave-filmer 306
skikt 413
tabeller 184
visa 78
ändra med beteenden 444
558
Index
egenskapskontroll
ActiveX-kontroller, egenskaper 312
biblioteksposter, egenskaper 399
bilder 265
Flash-filmer, egenskaper 304
hotspot-objekt 270
Java-miniprogram, egenskaper 313
maximera 78
Netscape Navigator-insticksprogram, egenskaper
309
Shockwave-filmer, egenskaper 306
visa 78
åtgärda brutna länkar 504
element
justera 267
visa osynliga 541
enheter 230
e-postadress
använda systemet för incheckning och
utcheckning 128
e-postfiler 144
e-postlänkar
skapa 360
ändra 363
Excel. Se Microsoft Excel-filer, importera.
exportera
biblioteksposter från Fireworks 281
CSS-lager från Fireworks 280
Fireworks-filer till Dreamweaver 280
XML, kodnotationer 391
exportera format 250
Exportera tabell, kommando 195
externa formatmallar
länka till 245
redigera 247
skapa 245
externa länkar 502
externa redigerare
BBEdit (endast Macintosh), integrering med 346
bilder 273
Fireworks. Se integrering av Dreamweaver och
Fireworks
HomeSite (Windows) 325
HTML, översikt 345
inställning 282
media 294
text, översikt 345
F
favoritlista (resurspanelen) Se resurser 219
favoritmappar 225
fel i JavaScript-kod 472
felaktiga koder
visa 325
felsökning
klicka i låsta regioner 381
Navigator-insticksprogram 311
överföra filer 139
felsökningsprogram för JavaScript 469
fönster 472
köra 469
logiska fel 472
lägga till brytpunkter 473
stega, stega till procedurslut, procedurstega 474
syntaxfel 471
variabellista 475
varningsruta 470
visa variabler 475
felsökningsprogram för JS. Se felsökningsprogram för
JavaScript
felsökningsprogram. Se felsökningsprogram för
JavaScript
fet text 233
filer
hantera 104
hämta 138
hämta från fjärrplats 138
ladda upp 139
skicka 139
synkronisera lokala platser och fjärrplatser 141
söka 254
text 144
typer, standard 510
visa i platsfönstret 111
överföra med FTP 120
filformat, bilder 263
fillistkolumner
använda 134
använda med Design Notes 133
lägga till en kolumn 135
ta bort 135
ändrar ordningsföljd 134
filmer
infoga 293
filtyper
Flash-filer 296
filtyper/redigerare, inställningar 295
Fireworks
Design Notes i 135
Fjärrfiler, alternativ 110
Flash-filmer
egenskaper 304
infoga 303
kontrollera 448
som resurser. Se resurser
ändra storlek 268
översikt 296
Flash-innehåll
översikt 296
Flash-knappobjekt 297, 302
egenskaper 301
förhandsgranska 299
ändra 299
Flash-objektsegenskaper 301
Flash-textobjekt
egenskaper 301
förhandsgranska 299
infoga 300
flytande paneler 78
Se paneler
format 243
använda anpassade format 249
CSS-format till HTML-kod, konverteringstabell
253
HTML 238
i mallar 384
konvertera till HTML 252
krockande 250
skapa 247
Se även formatmallar
formatera HTML-källkod
anpassa 525
inställningar 338
Formatera tabell, kommando 187
formatmallar
externa 245
redigera externa formatmallar 247
Se även format
översikt 243
Index 559
formulär
bearbeta 494
beteenden, använda med 495
fält, validera 467
hoppmenyer, skapa 364
infoga tabeller 493
lägga till flera objekt 493
lägga till i dokument 480
lösenordsfält 482
objekt, lägga till 481
skapa 479
skapa filfält 485
Skicka, knappar 492
skript på klientsidan 494
skript på serversidan 494
översikt 477
fotografier 263
FTP
ange värdkatalog 122
ansluta till en webbserver 120
felsökning 126
logg 139
överföra filer med 120
FTP, alternativ 120
FTP-värd, fält 121
funktioner, nya i Dreamweaver 22
fält
filfält 485
formulärfält 481
skapa dolda fält 485
skapa textfält 482
skicka filer till en server 485
färg
bakgrund för ram 212
färgrutor 83
kontrast 147
pipett, använda 83
sida, bakgrund 147
skapa färgresurser 226
som resurser. Se resurser
standard för sidans text 147
text, ändra 220, 235
välja 83
webbsäker 84
560
Index
Färg på aktiv länk, alternativ (Sidegenskaper) 147
Färg på besökt länk, alternativ (Sidegenskaper) 147
Färg, kommando 235
färgblindhet 147
färghjulet (systemfärg), knapp 83
Färgkuber, färgpalett 83
färgruta, alternativ 83
färgrutor, färg 83
färgväljare
Dreamweaver 83
system 83
Fäst mot webbsäkra, färgpalett 83
fönster
kortkommandon 550
Se även kontroller, paneler
Fönsterstorlek, alternativ 72
Fönsterstorlek, popup-meny 70
förgreningar, visa och dölja på platskartan 118
förhandsgranska i webbläsare
kortkommandon 546, 547
översikt 500
förhandsgranska i webbläsare, inställningar 501
Förhandsgranska i webbläsare, kommando 500
Förhandsgranska med lokal server, kommando 353
Förhandsladda bilder, åtgärd 457
Förhindra överlappning av skikt, kommando 419
föräldralösa filer 502
G
generatorer, översikt 305
genomgång, översikt 13
genomskinliga i bakgrunden, bildpunkter 147
Genomstruken (standardfärg), knapp 83
GIF-bilder
användningsområden för 263
som hjälpbild 151
grafik. Se bilder
grunderna i Dreamweaver 20
Grundläggande, flik (Design Notes) 131
Gråskala, färgpalett 83
Gå till bildruta på tidslinje, åtgärd 466
Gå till URL, åtgärd 452
Gå-knapp, associera med en hoppmeny 454
H
Halvton, färgpalett 83
hantera länkar 361
hantera resurser. Se resurser
HEAD-delen, redigera innehållet i 152
hemsida, inställning 116
historiepanelen
automatisera uppgifter med 154
kommandon, skapa från historiesteg 158
Maximalt antal historiesteg, inställning 81
rensa historielistan 82
steg, kopiera och klistra in 157
steg, tillämpa på andra objekt 155
steg, upprepa 154
översikt 80
Hjälp 14
Dreamweavers diskussionsgrupp 16
Dreamweavers kundtjänst 16
hjälp
kortkommandon 550
hjälpbild 151
hjälpsidor för Dreamweaver 14
HomeSite (Windows) 325
Hoppmeny Gå, åtgärd 454
Hoppmeny, åtgärd 453
hoppmenyer 364
Gå-knappar 454
Gå-knappar, lägga till automatiskt 364
lägga till menyalternativ 364
redigera 453
skapa en menyuppmaning 364
ändra menyalternativ 365
hotspot-objekt
använda beteenden på 276
egenskaper 270
i klickbara bilder 269
markera flera i en klickbar bild 271
ändra storlek 271
HR (vågrät linje), infoga 237
HTML
infoga från Fireworks i Dreamweaver 278
kopiera och klistra in från Fireworks till
Dreamweaver 279
uppdatera Fireworks HTML som monterats i
Dreamweaver 289
HTML-dokument. Se dokument 144
HTML-filer
importera 144
HTML-format
använda 240
använda på andra platser 242
Nytt format, ikon 241
redigera 242
skapa 240, 240–241
ta bort 240
ta bort från panelen 240
visa 239
ändra 242
HTML-kod
markera i dokumentfönstret 148
referensmaterial 24
visa med kodkontrollen 82
HTML-koder. Se koder 318
HTML-korrigeringar, loggfil 343
HTML-källa, alternativ 256
HTML-källkod
alternativ 328
CSS-attributskonvertering 253
externa redigerare 345
formatera i befintliga dokument 343
formateringsinställningar, ange 339
formateringsinställningar, översikt 338
formateringsprofil 525
koder, ta bort 337
kodformat 243
kodfärgsinställningar 338
kodsökning 256
kopiera och klistra in, allmänt 231
omskrivningsinställningar 341
redigera med BBEdit 346
referens 323
rensa 342
rensa MS Word-HTML 343
skriva och redigera 329
struktur 318
söka 254, 256
översikt 317
HTML-textredigerare. Se externa redigerare
HTTP-adress, fält 98, 99
huvudbildrutor
skapa 423
översikt 422
huvudceller, formatera 186
Index
561
hämta filer från en fjärrserver 138
Hämta fler beteenden, kommando 441
Hämta nyare filer från fjärrkatalogen, alternativ 141
Hämta och skicka nyare filer, alternativ 141
Hämta, kommando 138
hämtningstid 70
händelsehanterare. Se händelser
händelser
definierade 433
tillgängliga för olika webbläsare och objekt 434
utlösa åtgärder 437
ändra i beteenden 440
Höger, justeringsalternativ (bildegenskapskontroll) 267
I
Ignorera skillnader i mellanrum, alternativ 256
importera
Word-HTML-filer 144
Importera tabelldata, kommando 180
Importera Word-HTML, kommando 144, 343
index, hjälpen 14
indrag av text 236
Indrag, alternativ (Kodformat, inställningar) 339
Indragsstorlek, alternativ (Kodformat, inställningar)
340
infoga
ActiveX-kontroller 311
bilder 264
datum 229
Fireworks HTML i Dreamweaver 278
Fireworks-bilder i Dreamweaver 278
Flash-filmer 303
Flash-knappobjekt 297
Flash-textobjekt 300
generatorer 305
Java-miniprogram 313
mediaelement 293
resurser 219
Server-Side Includes 400
Shockwave-filmer 306
specialtecken 230
överrullningsbilder 272
Infoga bildfält, kommando 492
Infoga e-postlänk, dialogruta 360
Infoga Flash-knapp, dialogruta 297
Infoga Flash-text, dialogruta 300
562
Index
Infoga hoppmeny, dialogruta 364
Infoga namngivet ankare, dialogruta 359
Infoga navigationsfält, dialogruta 367
infoga resurser. Se resurser
Infoga tabelldata, kommando 180
Ingen, alternativ 120
ingenstanslänkar
skapa 360
ändra 363
innehåll i NOFRAMES 213
innehåll, hjälpen 14
innehåll, lägga till i tabeller 179
installera Dreamweaver 12
insticksprogram
felsökning 311
kontrollera 446
kortkommandon för uppspelning 548
känna av 499
Netscape Navigator 309
spela upp i dokumentfönstret 310
ändra storlek 268
inställningar
allmänna 85
bibliotek 393
externa redigerare 294
filtyper/redigerare 295
flytande paneler 79
förhandsgranska i webbläsare 501
Förhandsgranska med lokal server (rotrelativa
länkar) 353
kodformat 339
kodfärger 338
kodomskrivning 341
layout 175
mallar 379
objektpanelen 77
ordlista för stavningskontroll 254
osynliga element 150
paneler 79
plats 107
Quick Tag Editor 337
skikt 408
Starta och redigera 283
statusfältet 72
teckensnitt/kodning 85
uppdatera länkar 361
översikt 84
integrera Dreamweaver med andra program 86
integrera med SourceSafe 123
integrera med WebDAV 123
integrering av Dreamweaver och Fireworks
exportera CSS-lager 280
exportera Dreamweaver biblioteksposter 281
extern redigerare, inställning 282
infoga Fireworks-filer 277
Optimera bild i Fireworks, kommando 286
redigera Fireworks-animeringar 288
skapa webbfotoalbum 290
Starta och redigera, inställningar 283
uppdatera Fireworks HTML 289
utformningsanteckningar 283
öndra storlek på Fireworks-bilder 287
öppna och optimera Fireworks-bilder 286
öppna och redigera Fireworks-bilder 284
öppna och redigera Fireworks-tabeller 285
integrering av Fireworks och Dreamweaver. Se
integrering av Dreamweaver och
Fireworks
interaktivitet 18
introduktion till Dreamweaver 20
J
Java-miniprogram
egenskaper 313
infoga 293, 313
ändra storlek 268
översikt 313
JavaScript
filer 144
infoga skript 330
köra 444
utöka Dreamweaver 531
varningar 456
åtgärder 434
JavaServer Pages (JSP) 536
JPEG-bilder
användningsområden för 263
som hjälpbild 151
JSP (JavaServer Pages) 536
justera 267
alternativ 267
hjälpbild 152
sidelement 267
skikt 411
text 235
Justera hjälpbild, kommando 152
Justera position, kommando 152
Justera, bildegenskap 266
K
Kant, bildegenskap 266
kanter
i ramar 211
lägga till i tabeller 184
tabeller, ta bort 178
kapsla 408
ramar 202
skikt 407
Kapsla när det skapas inom ett skikt, alternativ 408
katalogstruktur, plats Se platser
kategorier
inställningar 84
resurser 216
klammerparenteser, kontrollera 332
Klickbar bild, bildegenskap 266
klickbara bilder
hotspot-objekt 269
markera flera hotspot-objekt 271
skapa för klientsidan 269
översikt 269
klickbara bilder på serversidan 269
klistra in historiesteg 157
Klistra in som text, kommando 228
knappar
Gå-knappar 454
skapa formulärknappar 491
Skicka-knappar, grafiska 492
kod
formateringsinställningar 338
redigera med BBEdit 346
Index 563
koder 85
använda 234
ASP 346
BLOCKQUOTE 236
BODY 152, 319
CFML 346
felaktiga 325
HEAD 319
HTML 318
i webbläsarprofiler 527
markera 148
menus.xml, syntax 518
OL 236
radbryta 333
redigera 333
specifikationer 532
sökning 256
ta bort 337
TABLE 183
TAGSPEC 532
textformatering 322
tredjepart, anpassa 532
UL 236
XML 325
överlappande 325
kodkontrollen
dokumentfönstret, växla till 328
öppna 328
Kodspecifik, alternativ (Kodfärger, inställningar) 339
kodvyn
alternativ 328
ordna vyer 327
skriva och redigera kod 329
öppna 326
öppna icke-HTML-filer 333
Kolumner, alternativ (i dialogrutan Infoga tabell) 178
kolumner, rader och celler
bakgrundsfärg, lägga till 186
formatera 185
lägga till och ta bort 189
kolumnhuvudmeny 173
kombinera flytande paneler 78
Kombinera kapslade -koder där det är möjligt,
alternativ 342
Kombinerbara kapslade font-koder, alternativ 507
564
Index
kommandon
använda på snabbmeny 74, 75
skapa, från historiesteg 158
spela in 159
ändra namn 516
Kommandon-menyn, redigera 514
Kommentarer, alternativ (Kodfärger, inställningar) 338
kommentarer, infoga 323
kontroller
bildkontroll 269
egenskapskontroll 78
kortkommandon 550
Se även paneler
öppna och stänga med startfältet 72
Kontrollera i målwebbläsare, kommando 498
Kontrollera instick, åtgärd 446
kontrollera klammerparenteser 332
kontrollera länkar 502
Kontrollera länkar på hela platsen, kommando 503
Kontrollera Shockwave eller Flash, åtgärd 448
Kontrollera stavning, kommando 254
Kontrollera webbläsare, åtgärd 445
konventioner 21
Konvertera skikt till tabell, kommando 418
Konvertera tabeller till skikt, kommando 420
kopiera historiesteg 157
kopiera och klistra in, Fireworks HTML 279
Koppla loss från mall, kommando 387
Koppla loss från original, alternativ 397
kortkommandon 539, 539–553
redigera 86
redigera, i filen menus.xml 517
kryssrutor 486
kursiv 233
Källa, bildegenskap 265
Källa, skriptegenskap 331
källformateringsprofil 525
känna av webbläsare och insticksprogram 499
L
Ladda fråga, knapp 259
ladda ned
beteenden 441
storlek, uppskattad tid 505
ladda upp filer 139
layout 161, 161–175
ange bredd 172
automatisk sträckning 172
bakgrund 175
cellfyllning 171
cellmarkering 175
cellmellanrum 171
distanshållarbilder 174
distanshållare, inställningar 174
fast bredd 172
flytta layoutceller och tabeller 168
formatera layoutceller 170
formatera layouttabeller 171
infoga distanshållare automatiskt 175
inställningar 175
kapslade layouttabeller 166
kolumnhuvudmeny 173
konsekventa bredder 171
layoutceller och tabeller 162
lägga till innehåll i 167
markera layoutceller och tabeller 168
nollställ höjdattribut 171
nollställa cellhöjder 168
rita layoutceller och tabeller 163
stödraster 166
ta bort alla distanshållare 171
ta bort kapsling 171
tabellkontur 175
växla till 161
ändra storlek på layoutceller och tabeller 168
översikt 161
layout, planera 95
Se även layout, mallar
layoutceller 162
bakgrundsfärg 170
flytta 168
formatera 170
ingen radbrytning 170
inställningar 175
justering 170
markera 168
markering 175
nollställa höjder 168
rita 163
ändra storlek 168
layouttabeller 162
bakgrund 175
bakgrundsfärg 171
cellfyllning 171
cellmellanrum 171
flytta 168
formatera 171
inställningar 175
justering 171
kapslade 166
konsekventa bredder 171
kontur 175
markera 168
nollställa höjder 171
rita 163
ta bort distanshållare 171
ta bort kapsling 171
ändra storlek 168
lektioner, översikt 13
linjaler 151
listor
skapa 232
ljud 307, 307–308
lägga till på en sida 307
spela upp 456
L-mellanr. och V-mellanr., bildegenskaper 266
logiska fel i JavaScript-kod 472
lokal rotmapp 97
Lokal rotmapp, fält 98, 99
Lokala filer, alternativ 110
lokala platser Se platser 97
Lokalt/Nätverk, alternativ 120
Låg bild, bildegenskap 266
låsta regioner
klicka i 381
Lägg till bildruta, kommando 423
Lägg till objekt i bibliotek, kommando 393
Lägg till objekt på tidslinje, kommando 423
Lägg till/ta bort Netscapes storleksjustering,
kommando 408
lägga till
bildrutor på en tidslinje 426
länkar 220
objekt på en tidslinje 424
tillägg i Dreamweaver 89
lägga till brytpunkter 473
Länk, bildegenskap 266
Index 565
länka
ankare 358
dokument 355
till dokument med peka-på-fil-ikonen 356
till ett namngivet ankare med peka-på-fil-ikonen
359
till externa CSS-formatmallar 246
Länka extern formatmall, dialogruta 246
Länka till befintlig fil, kommando 115
Länka till ny fil, kommando 116
länkade dokument, öppna 504
länkar
använda på markering 220
cache-fil 361
kontrollera 502
kortkommandon 546
mål- 354
platskarta 362
relativa till dokument 355
relativa till platsrot 355
ta bort 362
testa 501
till ankare 358
till dokument 354
till formatmallar 245
uppdatera 361
åtgärda 503
ändra på hela platsen 363
ändra ramar med 212
öppna källa 362
Länkfärg, alternativ (Sidegenskaper) 147
Länkkontroll, dialogruta 503
läsa in tillägg igen 511
566
Index
M
Mac OS, färgpalett 83
Macromedia Director, skapa Shockwave-filmer med
305
makron (skapa kommandon) 158
mallar 371–391
använda beteenden 384
använda format 384
använda på befintliga dokument 385
använda på dokument 220
använda tidslinjer 384
definiera ändringsbara regioner 378
dokument baserade på, skapa 385
göra regioner ej ändringsbara 384
inställningar 379
klicka i låsta regioner 381
koppla loss dokument från 387
kortkommandon 549
redigera 373, 374
sidegenskaper 375
skapa 373
skapa mallar för Flash-knappar 302
skapa nya dokument med 385
skapar nya dokument med 145
som resurser. Se resurser
söka efter ändringsbara regioner 387
Templates, mapp 373
visa regioner 380
XML 389
ändra 388
ändra markeringsfärger 379
ändra namn 374
ändringsbara kontra låsta regioner 377
översikt 371
MAP, kod 269
mappar
rotmapp 97
söka 254
mappar, favoriter 225
markera
layoutceller och tabeller 168
objekt i dokumentfönstret 148
ramar och ramuppsättningar 203
skikt 409
markeringsrutor för osynliga element 149
Matcha gemener/VERSALER, alternativ 256
mediaelement
infoga 293
parametrar 314
menus.xml, fil
syntax 518
menyer (listrutor) i formulär
skapa 490
menyer, anpassa 513
Microsoft Excel-filer, importera 180
Microsoft Word
filer, öppna 144
Microsoft Word-HTML
importera 343
rensa 343
miniprogram. Se Java-miniprogram
ministartknappar. Se startknappar och startfältet 70
Mitten, justeringsalternativ (bildegenskapskontroll)
267
MPEG-filmer
som resurser. Se resurser
multimedia. Se media
Mål, bildegenskap 266
målområde för länkar
i dokument 355
öppna dokument i ett nytt fönster 355
målwebbläsare
konvertera filer till 3.0-kompatibla 420
kortkommandon 546, 547
webbläsarprofiler 527
N
Namn, egenskap (bildegenskapskontroll) 265
Namngivet ankare, kommando 359
namngivna ankare
skapa 358
Namnlösa dokument, alternativ 507
navigationsfält
bildlägen 366
infoga i en tabell 368
lägga till bilder 367
skapa 366
visa lodrätt på en sida 368
visa vågrätt på en sida 368
ändra element 369
navigeringsplanering för en webbplats 95
Nederst, justeringsalternativ (bildegenskapskontroll)
267
Netscape 4-kompatibilitet för skikt 408
Netscape Navigator-insticksprogram
egenskaper 309
felsökning 311
spela upp i dokumentfönstret 310
NFS-servrar 120
nya funktioner i Dreamweaver 22
Nytt från mall, kommando 145, 385
Nytt, kommando 144
O
objekt
infoga 228
infoga med objektpanelen 76
kortkommandon 549
kryssrutor och alternativknappar 486
lägga till Design Notes 131
lägga till i formulär 481
skapa 512
objektpanelen
anpassa 511
inställningar 77
kategorier 76
kombinera 78
läsa in igen 511
översikt 76
OL, kod 236
Omdefiniera HTML-kod, alternativ 247
onBlur, händelse 467
optimera
Fireworks-bilder i Dreamweaver 286
Optimera bild i Fireworks, kommando 286
ordbehandlare, filer skapade i 144
ordna vyer 327
osynliga element
inställningar 150
kommentarer 323
markera 148
skript 330
visa och dölja 149
Index
567
P
Package Manager 89
paletter, färg 83
paneler
beteendepanelen 434
flytande paneler, inställningar 79
historiepanelen 80
kodkontrollen 82
kombinera 78
kortkommandon 550
objektpanelen 76
startfältet 72
öppna och stänga med startfältet 72
Parametrar, dialogruta 314
personlig stavningsordlista 254
PHP Hypertext Preprocessor 537
pipett 83
planera
design 95
Platsens filer, vy 111
platser
cache 361
checka in och ut filer 127
Design Notes, använda med 130
fjärr-, definiera 120
fjärr-, felsökning av inställningar 126
fjärr-, rotmapp 122
fjärr-, skapa 119
fjärr-, söka efter filer på 119
fjärr-, åtkomstalternativ 120
förhandsgranska i webbläsare 500
kontrollera länkar 502
kortkommandon 547
lokala jämfört med fjärrplatser 91
lokala, associera en fjärrserver med 120
lokala, rotmapp 97
lokala, skapa 97
lokala, söka efter filer på 119
lokala, visa 109
lägga till filer och mappar 111
markera uppdaterade filer i 111
planera navigering 95
rapporter, köra 136
redigera befintliga 99
redigera fjärrplatser 100
referensmaterial 24
skapa nya 97
568
Index
stora, resurser på 223
struktur och navigation 103
söka efter filer på 254
ta bort från platslistan 101
visa 108
webbläsarkompatibilitet 93, 498
åtgärda brutna länkar 503
ändra länkar på hela platsen 363
ändra visning 110
platsfönster
grunderna 108
Hämta, kommando 138
Platsens filer, vy 105
platskartevy 105
platskartor 109
Skicka, kommando 139
söka efter filer 119
verktygsfält, alternativ 105
visa lokala platser 109
ändra visning 110
översikt 104
platsfönstret
söka efter text 254
platsinställningar 107
platskartor
Ange som hemsida, kommando 116
dölja en förgrening 118
kortkommandon 548
lägga till filer på en plats 115
Länka till befintlig fil, kommando 115
Länka till ny fil, kommando 116
länkar 362
markera filer som dolda 117
markera flera sidor 115
redigera sidor 115
spara en bildfil 118
ta bort länkar 363
uppdatera efter ändringar 117
Uppdatera lokalt, kommando 117
utöka en förgrening 118
visa 109
visa beroende filer 117
Visa beroende filer, alternativ 117
visa dolda filer 117
visa en förgrening 118
Visa sidtitlar, alternativ 116
ändra länkar 362
ändra namn på sidor 116
platslista
uppdatera 218
Platsnamn, fält 98, 99
platsplanering 91
mål 91
publik 91
resurser 96
struktur 94
platsrapporter 136
platsrotsrelativa sökvägar Se rotrelativa sökvägar
PNG-bilder
användningsområden för 263
som hjälpbild 151
Popup-meddelande, åtgärd 456
primär webbläsare 501
profiler
HTML-källformat 525
webbläsare 527
program, andra, använda med Dreamweaver 86
proportioner, bevara 268
punktade listor, skapa 232
Q
Quick Tag Editor
attribut, tipslista 336
inställningar 337
öppna 333
översikt 333
QuickTime-filmer
infoga 309
som resurser. Se resurser
R
Radbrytningar, alternativ (Kodformat, inställningar)
340
Rader, alternativ (i dialogrutan Infoga tabell) 178
ramar 197, 197–214
anvisningar för att skapa 199
använda länkar 212
beteenden, använda med 214
egenskaper 206
kanter 211
kapslade 202
kortkommandon 544
markera 203
mål- 212
panel 203
skapa 199, 201
spara 205
ta bort 201
webbläsarkompatibilitet 213
ändra bakgrundsfärg 212
ändra innehåll 212
ändra storlek 210
översikt 197
Ramar och ramuppsättningar, alternativ (Kodformat,
inställningar) 339
rampanelen 203
ramuppsättningar 199–211
egenskaper 208
fördefinierade, infoga 200
kanter 211
kapslade 202
markera 203
målområde för länkar i 355
namnge 206
spara 205
Se även ramar
rapporter 136
arbetsflöde 136
skapa 506
testa en plats med 506
Utcheckad av 136
rapporter för incheckning/utcheckning 136
redigera
Flash-knappobjekt 299
kortkommandon 86
mallar 373
resurser 222
Index 569
Redigera formatmall, kommando 247
Redigera innehållet i NOFRAMES, kommando 213
redigera kod (kodvyn eller kodkontrollen) 329
Redigera teckensnittslista, kommando 236
Redigera, knapp (bildegenskapskontroll) 266
redigerare. Se externa redigerare
referensmaterial 24
referenspanelen 323
regioner, låsta
klicka i 381
reguljära uttryck 260
Rensa <font>-koder, alternativ 344
Rensa CSS-format, alternativ 344
Rensa HTML, kommando 342
Rensa Word-HTML, kommando 343
Reserverade nyckelord, alternativ (Kodfärger,
inställningar) 338
resurser 215, 215–226
använda färger på text 220
favoritlistor 223
favoritmappar 225
färg, skapa 226
infoga 219
kategorier 216
lägga till i favoritlistan 219
markera flera 221
planera 96
redigera 222
uppdatera platslista 218
URL-adresser, skapa 226
öppna resurspanelen 217
översikt 215
resurser för information om webbtekniker 24
rita
layoutceller och tabeller 163
skikt 405
rotmapp
fjärr 122
lokal 97
rotrelativa sökvägar
Förhandsgranska med lokal server, inställningar
353
inställning 355
om 352
Roundtrip HTML 325
rubrikkoder 234
rullningslistor 489
570
Index
Rätta till felaktigt kapslade koder, alternativ (Rensa
Word-HTML) 344
Rätta till felaktigt kapslade och öppna koder, alternativ
(Kodomskrivning, inställningar) 341
S
sammanhangsberoende menyer. Se snabbmenyer
sekundär webbläsare 501
Server-Side Includes 399
infoga 400
redigera 401
översikt 399
Serveråtkomst, alternativ 120
servrar
AppleTalk 120
definiera fjärrplatser 120
felsökning av inställningar 126
NFS 120
åtkomstalternativ 120
Shockwave-filmer
egenskaper 306
infoga 306
kontrollera 448
som resurser. Se resurser
ändra storlek 268
översikt 305
sidegenskaper
titlar, ändra 146
sidlayout. Se layout, mallar
sidor
bakgrundsbild 147
design 95
Design Notes, använda med 130
egenskaper, och mallar 375
färg 147
förhandsgranska i webbläsare 500
nedladdningstid, uppskattad 505
standardtextfärger 147
storlek 505
ändra titel 146
sidstorlek, ändra storlek så att de passar bildkskärm 70
skapa
mallar 373
Skapa alternativknappar 488
skapa färger och URL-adresser 226
skapa nya mallar för Flash-knappar 302
skapa rapporter 506
Skapa webbfotoalbum, kommando 290
skicka filer till en fjärrserver 139
Skicka nyare filer till fjärrkatalogen, alternativ 141
Skicka, knappar 492
Skicka, kommando 139
Skiftläge för attribut, alternativ (Kodformat,
inställningar) 340
Skiftläge för koder, alternativ (Kodformat,
inställningar) 340
skikt 403, 403–431
aktivera 412
ankarpunkter 150
dragbara 451
egenskaper 413
egenskaper för flera 415
flytta 411
fästa mot stödraster 412
förhindra överlappning 419
hantera 408
infoga 405
inställningar 408
justera 411
kapsla 407
konvertera för 3.0-webbläsare 420
konvertera till tabeller 418
kortkommandon 545
markera 409
markera flera 415
markörer, visa 405
placera 413
rita flera 405
skapa 405
synlighet 417
vid utformning av tabeller 418
ändra staplingsordning för 416
ändra storlek 410
ändra synlighet med beteenden 463
ändra synlighet på skiktpanelen 417
översikt 403
skiktpanelen 406
skivobjekt
redigera Fireworks-tabellskivor i Dreamweaver
285
skjutreglagekontroller, skapa 449
skript
ange 330
balanserade klammerparenteser 332
redigera 331
redigera externa 330
som resurser. Se resurser
visa funktioner 332
visa i dokument 150
skriptlänkar
skapa 360
ändra 363
Skriv aldrig om kod i filer med tillägg, alternativ
(Kodomskrivning, inställningar) 341
skriva kod (kodvyn eller kodkontrollen) 329
Slinga, alternativ 422
Slå samman celler, kommando 191
snabbmenyer 74, 75
anpassa 515
snabbtangenter, redigerare 86
SourceFormat.txt, fil 338
SourceSafe-integrering 123
spara
dokument 145
filer i ramar och ramuppsättningar 205
sökning 259
Spara alla ramar, kommando 206
Spara fråga, knapp 259
Spara ram som, kommando 205
Spara ram, kommando 205
Spara ramuppsättning som, kommando 205
Spara ramuppsättning, kommando 205
Spara som mall, kommando 373
Spara, kommando 145
specialtecken
infoga 230
översikt 230
Specialtecken, alternativ (Kodomskrivning,
inställningar) 341
spela in kommandon 159
Spela in skiktväg, kommando 425
spela upp Flash-objekt 299
Spela upp ljud, åtgärd 456
Spela upp tidslinje, åtgärd 467
spela upp tidslinjer i en slinga 426
Spela upp, knapp 155
Språk, skriptegenskap 331
Index
571
Standard för kod, alternativ (Kodfärger, inställningar)
338
standardfiltyp, ändra 510
Standardfärg, knapp 83
staplingsordning
skikt 416
ändra med tidslinjer 427
starta Fireworks från Dreamweaver. Se integrering av
Dreamweaver och Fireworks
Starta och redigera
inställningar 283
startfältetknapparna
startfältet 72
startknappar och startfältet
anpassa 73
standardknappar 70
statusfältet
ange text (beteende) 461
Fönsterstorlek, popup-meny 70
inställningar 72
översikt 70
stavning
kontrollera 254
ordlistor, redigera 254
stega genom kod 474
Stil, undermeny 233
Stoppa tidslinje, åtgärd 467
Strängar, alternativ (Kodfärger, inställningar) 339
styckekoder 234
Ställ in navigationsfältets bild, åtgärd 458
stödraster
fästa 166
fästa skikt mot 412
mellanrum 166
som guide 151
visa 166, 412
synkronisera lokala platser och fjärrplatser 141
synliga hjälpmedel
hjälpbild 151
linjaler 151
översikt 150
syntax i menus.xml 518
syntaxfel 471
systemets färgväljare 83
Systemets färgväljare, knapp 83
572
Index
systemkrav
Macintosh 12
Windows 12
Sök efter, alternativ 255
Sök i, alternativ 255
söka
Dreamweavers hjälp 15
efter filer 254
HTML-koder och -attribut 256
kortkommandon 543
reguljära uttryck 260
spara söksträngar 259
text i filer 254
text i HTML-källkod 256
text inom vissa koder 258
söka och ersätta. Se söka
sökvägar
absoluta 350
dokumentrelativa 351
rotrelativa 352
T
Ta bort bildruta, kommando 423
ta bort bildrutor från en tidslinje 426
Ta bort Dreamweaver-HTML-kommentarer, alternativ
342
Ta bort extra avslutande koder, alternativ
(Kodomskrivning, inställningar) 341
Ta bort HTML-kommentarer från annat program än
Dreamweaver, alternativ 342
Ta bort markerat format, alternativ 240
Ta bort specifik(a) HTML-kod(er), alternativ 342
Ta bort styckeformat, alternativ 240
Ta bort tidslinje, kommando 428
Ta bort tomma HTML-koder, alternativ 342
Ta bort uppmärkning av ändringsbar region,
kommando 384
Ta bort Word-specifika koder, alternativ 344
Ta bort överflödiga kapslade koder, alternativ 342
Tabbstorlek, alternativ 340
tabellceller
bakgrundsbild, lägga till 186
bakgrundsfärg, lägga till 186
dela upp 191
formatera 185
huvudceller, ange 186
kopiera och klistra in 193
slå samman 191
Se även layoutceller, tabeller
tabelldata, importera 180
tabeller 493
celler, dela upp 192
egenskaper 184
formatera 183
förinställd design för 187
HTML-koder 183
importera 180
Ingen radbr., alternativ 186
justera 186
justera rader och kolumner 188
kapsla 190
kolumner, rader och celler 185
konvertera från skikt 418
kortkommandon 544
lägga till bakgrundsbilder i 185
lägga till bakgrundsfärg i 185
lägga till innehåll i 179
lägga till kanter i 184
lägga till och ta bort rader och kolumner 189
markera element 181
nollställa cellbredd och cellhöjd 189
Se layoutabeller
Se även layoutläget
skapa 178
slå samman celler 192
sortera 194
Se även kolumner, rader och celler
ändra kolumnbredd 188
ändra storlek 188
översikt 177
tabellkanter
bredd 185
färg 185
Tabellrader och -kolumner, alternativ (Kodformat,
inställningar) 339
tangentbord, kortkommandon. Se kortkommandon
tecken, special 230
teckensnitt
kodning, ange teckensnitt för 85
ändra egenskaper 233
ändra kombinationer 236
teckensnitt/kodning, inställning 85
testa en plats med kommandot Rapporter 505
text
externa redigerare. Se externa redigerare
formatera 227
formatera koder 322
formatera med HTML-format 238
färg, ändra 235
indrag 236
justering 235
kortkommandon för formatering 543
kortkommandon för redigering 542
lägga till i dokument 228
standardfärg på sidor 147
söka i dokument 254
ändra färg på 220, 235
ändra teckensnittskombinationer 236
Text, alternativ (Kodfärger, inställningar) 338
textfiler
öppna 144
textfält, ange text med beteenden 462
Textfärg, alternativ (Sidegenskaper) 147
textredigerare
filer skapade i 144
textredigerare. Se externa redigerare
tidslinjepanelen 422
tidslinjer
animeringstips 430
flera 428
huvudbildrutor 423
i mallar 384
komplexa banor 425
koppla beteenden 440
kortkommandon 545
lägga till objekt på 424
lägga till och ta bort bildrutor 426
skapa 423
slinga 426
spela upp automatiskt 426
spela upp och stoppa med beteenden 467
styra med beteenden 430
uppspelningshuvud 422
ändra 426
ändra bildkällfil 427
ändra skiktegenskaper 427
tillägg 89
läsa in igen 511
Tillämpa automatiskt, alternativ (HTMLformatpanelen) 240
Index
573
Tillämpa mall på sida, kommando 385
titlar
ändra 146
tredjepartskoder
anpassa 532
undvika omskrivning 537
typografiska konventioner 21
U
UL, kod 236
understruken 233
uppdatera
platslista (resurspanelen) 218
Uppdatera aktuell sida, kommando 388, 395
Uppdatera den lokala fillistan automatiskt, alternativ
98, 99
Uppdatera HTML
kommando 289
uppdatera länkar 361
Uppdatera sidor, kommando 388
upprepa steg 154
uppspelningshuvud 422
URL
som resurser. Se resurser
URL Se sökvägar
URL-adresser
använda på markering 220
skapa URL-resurser 226
USEMAP, attribut 269
utforma sidor 95
utformningsanteckningar, för integrering av
Dreamweaver och Fireworks 283
Utöka Dreamweaver, bok och hjälp 16
utökning
beteenden från tredjepart 441
JavaScript 531
översikt 530
574
Index
V
Validera formulär, åtgärd 467
variabellista 475
Varna vid rättning och borttagning av koder, alternativ
(Kodomskrivning, inställningar) 341
VBScript 330
verktygsfält
dokumenttitlar, ändra 146
visa
hjälpbild 151
innehåll under HEAD 152
kodvyn och designvyn 326
ordna vyer 327
osynliga element 149
platser 109
skikt 417
ändringsbar och låst HTML-källkod i mallar 382
ändringsbara och låsta regioner i mallar 380
Visa layouttabellens flikar, alternativ 162
Visa logg vid slutförande, alternativ 342
visa osynliga element 149
visa sidtitlar i platskartan 116
Visa startknappar i statusfältet, alternativ 72
Visa-dölj skikt, åtgärd 463
visningsalternativ
flytande paneler 79
teckensnitt 85
Visual SourceSafe
integrera med Dreamweaver 124
vågräta linjer, infoga och ändra 237
vägkarta (var du ska starta) 20
Välj nyare fjärr, kommando 141
Välj nyare lokalt, kommando 141
Vänster, justeringsalternativ (bildegenskapskontroll)
267
Värdkatalog, fält 122
Växla bild, åtgärd 465
Växla bildåterställning, åtgärd 466
W
webbdesign, nivåer av erfarenhet i 20
webbfotoalbum, skapa 290
webbläsare
3.0-kompatibla filer 420
färger, säkra 84
förhandsgranska i 500
kompatibilitet, planera 93
kompatibilitet, testa 498
känna av 499
mål- 498
och CSS-format 252
primär, definiera 500
profiler, redigera 527
profiler, skapa 529
sekundär, definiera 501
versioner, kontrollera 445
Webbläsarstd, justeringsalternativ
(bildegenskapskontroll) 267
webbserverinfo 120
webbservrar. Se servrar
WebDAV-integrering 123
Windows OS, färgpalett 83
Word-HTML. Se Microsoft Word-HTML
X
XML 390
i mallar 389
koder 325
kodnotationer vid export 391
menus.xml, fil 518
TAGSPEC, kod 532
översikt 390
Z
Z-Index, alternativ (för skikt)
ändra staplingsordning 416
Å
Åsidosätt skiftläget för, alternativ (Kodformat,
inställningar) 340
återanvända
biblioteksposter 394
mallar 385
sökning 259
Återställ hjälpbild, kommando 152
Återställ origo, kommando 151
Återställ storlek, bildegenskap 266
åtgärder 433
definierade 433
ingår i Dreamweaver 442
skapa 441
som ingår i Dreamweaver 468
styra tidslinjer 430
välja på beteendepanelen 437
webbläsarkompatibilitet 442
Se även enskilda åtgärder efter namn
ändra i beteenden 440
Ä
ändra
sidegenskaper 146
Ändra egenskap, åtgärd 444
Ändra länk på hela platsen, kommando 363
ändra storlek
handtag 268
layoutceller och tabeller 168
ramar 210
sidelement 268
skikt 410
tabellceller 188
Ö
öndra storlek på Fireworks-bilder i Dreamweaver 287
öppna
andra filtyper än HTML som standard 510
dokument 144
textfiler 144
Öppna bifogad mall, kommando 388
Öppna formatmall, ikon 245, 246
öppna icke-HTML-filer 333
inställningar 333
Öppna länkad sida, kommando 504
öppna länkade dokument 504
Index
575
Öppna webbläsarfönster, åtgärd 454
öppna Word-HTML-filer 144
Öppna, kommando 144
Överflödiga kapslade koder, alternativ 507
överföra filer, felsökning 139
överlappande koder 325
överrullningar 272
skapa 272
skapa en länk 272
testa 273
Överrullningsbild, textfält 272
översikt över Dreamweaver 11
Överst i text, justeringsalternativ
(bildegenskapskontroll) 267
Överst, justeringsalternativ (bildegenskapskontroll)
267
576
Index
