Använda Dreamweaver - stefan · PDF file2 Varumärken Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,

macromedia

™

®

Använda Dreamweaver

2

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 AVSE-ENDE PÅ DET MEDFÖLJANDE PROGRAMPAKETET, DESS SÄLJBARHET ELLER LÄMPLIGHET FÖR NÅGOT SÄR-SKILT 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 McGinnTexter: Kim Diezel, Valerie Hanscom, Jed Hartman och Emily RickettsRedigering: Anne Szabla och Lisa StanzianoProduktionshantering: John ”Zippy” LehnusMultimediadesign och multimediaproduktion: Aaron Begley och Noah ZilberbergTryckproduktion: Chris Basmajian, Paul Benkman, Caroline Branch och Rebecca GodboisWebbredigering och webbproduktion: Jane Flint DeKoven och Jeff HarmonLokaliseringschef: 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

INNEHÅLL

INTRODUKTION

Komma igång . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Systemkrav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Installera Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Börja arbeta med Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Webbutvecklingsprocessen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Var du ska starta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Typografiska konventioner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Nyheter i Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22HTML- och webbteknikresurser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Hjälpmedel och Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

KAPITEL 1

Dreamweavers självstudier. . . . . . . . . . . . . . . . . . . . . . 27En genomgång av Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Arbetsområdet i Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Ordna platsstrukturen för självstudierna . . . . . . . . . . . . . . . . . . . . . . . 31Definiera en lokal plats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Skapa platsens hemsida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Utforma en sida i layoutvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Lägga till innehåll på sidan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Arbeta i standardvyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Använda resurspanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Infoga Flash-objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Skapa en mall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Kontrollera webbplatsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Nästa steg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

3

Innehåll

4

KAPITEL 2

Grunderna i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 67Arbetsområdet i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68Olika vyer i Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69Arbeta med färger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83Webbsäkra färger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84Ange inställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84Använda Dreamweaver med andra program . . . . . . . . . . . . . . . . . . . . .86Grunderna i att anpassa Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . .86

KAPITEL 3

Planera och konfigurera webbplatsen . . . . . . . . . . . 91Planera och utforma webbplatsen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91Använda Dreamweaver för att göra en ny plats . . . . . . . . . . . . . . . . . . .97Redigera en befintlig webbplats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99Redigera en fjärrplats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100Ta bort en plats från listan med platser . . . . . . . . . . . . . . . . . . . . . . . .101

KAPITEL 4

Platshantering och samarbete. . . . . . . . . . . . . . . . . . 103Platsfönstret . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104Visa och öppna filer i platsfönstret . . . . . . . . . . . . . . . . . . . . . . . . . . .108Platskartan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112Använda platskartan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113Skapa en fjärrplats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119Integrering av WebDAV och SourceSafe . . . . . . . . . . . . . . . . . . . . . . .123Felsökning av inställningarna till fjärrplatsen. . . . . . . . . . . . . . . . . . . .126Använda incheckning/utcheckning . . . . . . . . . . . . . . . . . . . . . . . . . . .127Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130Förbättra arbetsflödet med hjälp av rapporter . . . . . . . . . . . . . . . . . . .136Hämta och skicka filer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138Synkronisera filerna på den lokala platsen och på fjärrplatsen . . . . . . .141

KAPITEL 5

Skapa ett dokument. . . . . . . . . . . . . . . . . . . . . . . . . . . 143Skapa, öppna och spara HTML-dokument . . . . . . . . . . . . . . . . . . . . .144Ange dokumentegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146Markera element i dokumentfönstret . . . . . . . . . . . . . . . . . . . . . . . . .148Använda synliga hjälpmedel i designarbetet. . . . . . . . . . . . . . . . . . . . .150Visa och redigera HEAD-innehåll . . . . . . . . . . . . . . . . . . . . . . . . . . . .152Automatisera uppgifter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154

KAPITEL 6

Utforma sidlayouten . . . . . . . . . . . . . . . . . . . . . . . . . . . .161Layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162Rita layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163Flytta och ändra storlek på layoutceller och tabeller. . . . . . . . . . . . . . .168Formatera layoutceller och tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . .170Ange layoutbredd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172Layoutvyinställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175

KAPITEL 7

Använda tabeller för innehåll . . . . . . . . . . . . . . . . . . . 177Infoga en tabell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178Markera tabellelement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181Formatera tabeller och celler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183Ändra storlek på tabeller och celler . . . . . . . . . . . . . . . . . . . . . . . . . . .188Lägga till och ta bort rader och kolumner . . . . . . . . . . . . . . . . . . . . . .189Kopiera och klistra in celler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193Sortera tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194Exportera tabelldata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195

KAPITEL 8

Använda ramar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197När ska ramar användas? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198Skapa rambaserade webbsidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199Skapa ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199Markera en ram eller ramuppsättning . . . . . . . . . . . . . . . . . . . . . . . . .203Spara ram- och ramuppsättningsfiler . . . . . . . . . . . . . . . . . . . . . . . . . .205Ram- och ramuppsättningsegenskaper . . . . . . . . . . . . . . . . . . . . . . . .206Styra raminnehåll med länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212Hantera webbläsare som inte kan visa ramar . . . . . . . . . . . . . . . . . . . .213Använda beteenden med ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214

KAPITEL 9

Hantera och infoga resurser. . . . . . . . . . . . . . . . . . . . 215Använda resurspanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216Använda favoritresurser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223

Innehåll 5

Innehåll

6

KAPITEL 10

Infoga och formatera text . . . . . . . . . . . . . . . . . . . . . .227Infoga text och objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228Skapa listor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232Ange teckensnitt, stil, färg och justering . . . . . . . . . . . . . . . . . . . . . . .233Formatera text med HTML-format. . . . . . . . . . . . . . . . . . . . . . . . . . .238Använda CSS-formatmallar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243Konvertera CSS-format till HTML-koder. . . . . . . . . . . . . . . . . . . . . .252Kontrollera stavning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .254Söka och ersätta text, koder och attribut . . . . . . . . . . . . . . . . . . . . . . .254

KAPITEL 11

Infoga bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263Infoga en bild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264Ange bildegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265Skapa klickbara bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269Använda en extern bildredigerare . . . . . . . . . . . . . . . . . . . . . . . . . . . .273Använda beteenden på bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276

KAPITEL 12

Använda Dreamweaver och Fireworks tillsammans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277Montera Fireworks-filer i Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . .277Starta Fireworks inifrån Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .282Redigera Fireworks-filer som monterats i Dreamweaver. . . . . . . . . . . .284Optimera bilder och animeringar från Fireworks som monterats i

Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286Uppdatera Fireworks HTML som monterats i Dreamweaver . . . . . . .289Skapa webbfotoalbum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289

KAPITEL 13

Infoga media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293Infoga mediaobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293Starta en extern redigerare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294Använda Design Notes med mediaobjekt . . . . . . . . . . . . . . . . . . . . . .296Flash-innehåll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296Använda Flash-knappobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297Använda Flash-textobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300Ange egenskaper för Flash-objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . .301Infoga Flash-filmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303Infoga generatorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305

Shockwave-filmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305Lägga till ljud på en sida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307Infoga insticksprogram för Netscape Navigator . . . . . . . . . . . . . . . . . .309Infoga en ActiveX-kontroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311Infoga ett Java-miniprogram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313Använda parametrar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314Använda beteenden för att kontrollera media . . . . . . . . . . . . . . . . . . .315

KAPITEL 14

Redigera HTML-kod i Dreamweaver . . . . . . . . . . . 317Grundläggande HTML-koder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318Infoga kommentarer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323Använda referenspanelen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325Använda kodvyn (eller kodkontrollen) . . . . . . . . . . . . . . . . . . . . . . . .326Infoga skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330Öppna och redigera icke-HTML-filer i Dreamweaver . . . . . . . . . . . . .333Redigera en HTML-kod i designvyn. . . . . . . . . . . . . . . . . . . . . . . . . .333Kodformatering – inställningar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338Rensa HTML-källkod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .342Rensa Microsoft Word-HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343Använda externa HTML-redigerare . . . . . . . . . . . . . . . . . . . . . . . . . .345

KAPITEL 15

Länkar och navigering . . . . . . . . . . . . . . . . . . . . . . . . 349Om dokumentplacering och sökvägar . . . . . . . . . . . . . . . . . . . . . . . . .350Skapa länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354Hantera länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361Skapa hoppmenyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364Skapa navigationsfält . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366Koppla beteenden till länkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369

KAPITEL 16

Återanvända innehåll med mallar och bibliotek . . 371Skapa mallar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .373Definiera en malls ändringsbara regioner. . . . . . . . . . . . . . . . . . . . . . .377Skapa dokument som är baserade på mallar. . . . . . . . . . . . . . . . . . . . .385Uppdatera sidor som är baserade på en mall . . . . . . . . . . . . . . . . . . . .388Exportera och importera XML-innehåll . . . . . . . . . . . . . . . . . . . . . . .389Skapa, hantera och redigera biblioteksposter . . . . . . . . . . . . . . . . . . . .392Använda Server-Side Includes (serverinstruktioner). . . . . . . . . . . . . . .399

Innehåll 7

Innehåll

8

KAPITEL 17

Använda dynamiska skikt . . . . . . . . . . . . . . . . . . . . . 403Skikt och HTML-kod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404Skapa skikt på sidan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .405Hantera skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408Ange skiktegenskaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413Ändra staplingsordning för skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . .416Ändra skiktens synlighet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417Använda tabeller och skikt för layout . . . . . . . . . . . . . . . . . . . . . . . . .418Animera skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .421Beteendeåtgärder som styr skikt och tidslinjer . . . . . . . . . . . . . . . . . . .430

KAPITEL 18

Använda beteenden . . . . . . . . . . . . . . . . . . . . . . . . . . 433Beteendepanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .434Händelser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .434Koppla ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437Beteenden och text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439Koppla ett beteende till en tidslinje . . . . . . . . . . . . . . . . . . . . . . . . . . .440Ändra ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .440Uppdatera ett beteende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441Skapa nya åtgärder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441Ladda ned och installera beteenden från tredjepart . . . . . . . . . . . . . . .441Använda beteendeåtgärderna som ingår i Dreamweaver . . . . . . . . . . .442

KAPITEL 19

Felsöka JavaScript-kod . . . . . . . . . . . . . . . . . . . . . . 469Köra felsökningsprogrammet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470Söka efter och rätta till logiska fel . . . . . . . . . . . . . . . . . . . . . . . . . . . .472

KAPITEL 20

Skapa formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477CGI-skript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478Formulärobjekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478Skapa ett formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479Formulärfält . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .481Infoga kryssrutor och alternativknappar . . . . . . . . . . . . . . . . . . . . . . .486Listor och menyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .488Formulärknappar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .491Formulärutformning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .492Bearbeta formulär . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .494Använda beteenden med formulär. . . . . . . . . . . . . . . . . . . . . . . . . . . .495

KAPITEL 21

Testa och publicera en plats . . . . . . . . . . . . . . . . . . 497Kontrollera webbläsarkompatibilitet . . . . . . . . . . . . . . . . . . . . . . . . . .498Använda beteenden för att känna av webbläsare och insticksprogram. . . .499Förhandsgranska i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .500Kontrollera länkar på en sida eller plats . . . . . . . . . . . . . . . . . . . . . . . .502Kontrollera nedladdningstid och storlek . . . . . . . . . . . . . . . . . . . . . . .505Testa en plats med kommandot Rapporter . . . . . . . . . . . . . . . . . . . . .505

KAPITEL 22

Anpassa Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 509Ändra standardfiltyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510Ändra objektpanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .511Skapa ett enkelt objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512Anpassa Dreamweaver-menyer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .513Anpassa utseendet på dialogrutor . . . . . . . . . . . . . . . . . . . . . . . . . . . .524Ändra standardinställd HTML-formatering . . . . . . . . . . . . . . . . . . . .525Arbeta med webbläsarprofiler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .527Utöka Dreamweaver: Grunderna. . . . . . . . . . . . . . . . . . . . . . . . . . . . .530Anpassa tolkningen av tredjepartskoder. . . . . . . . . . . . . . . . . . . . . . . .532

Innehåll 9

Innehåll

10

BILAGA A

Kortkommandon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539Arkiv-menyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539Redigera-menyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540Visningsalternativ för sidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .540Visa sidelement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .541Kodredigering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .541Redigera text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .542Formatera text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543Söka och ersätta text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543Arbeta i tabeller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544Arbeta med ramar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544Arbeta med skikt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545Arbeta med tidslinjer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .545Arbeta med bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546Hantera hyperlänkar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546Förhandsgranska i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546Felsökning i webbläsare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547Platshantering och FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547Platskarta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548Spela upp insticksprogram. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548Arbeta med mallar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549Infoga objekt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549Historiepanelen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .549Öppna och stänga paneler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550Visa hjälp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550Förteckning över kortkommandon . . . . . . . . . . . . . . . . . . . . . . . . . . .551

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

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-, CSS- och JavaScript-referens, ett JavaScript-felsökningsprogram och en kodredigerare (Visa kod och Kodkontrollen) som du använder för att redigera JavaScript-dokument, 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.

3 Följ anvisningarna på skärmen.

4 Om du uppmanas att starta om datorn gör du det.

Introduktion12

Börja arbeta med DreamweaverI 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ör-stegguide 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.

Introduktion14

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.

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).

Klicka här om du vill öppna hjälpen.

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 Dreamweaver-anvä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/.

WebbutvecklingsprocessenProcessen 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.

Introduktion16

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 HTML-formatpanelen. Du kan också skapa egna CSS-formatmallar. Se ”Infoga och formatera text” på sidan 227.

• Infoga bilder, bland annat överrullningsbilder, klickbara bilder och Fireworks-skivade 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.

Introduktion18

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 startaDenna 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 layout- och 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:

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.

Introduktion20

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 konventionerFö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 Flash-objekt, effektivisera arbetsflödet, förbättra samarbetet mellan gruppmedlemmar och anpassa och utöka Dreamweaver.

Förbättrad kodredigering

Med verktygsfältet i Dreamweaver 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.

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.

Referenspanelen ä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.

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.

CSS-formatmallar 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å CSS-formatpanelen. Se ”Använda CSS-formatmallar” på sidan 243.

Introduktion22

Förbättrad integration

Flash-knappar och Flash-text ä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.

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 alt-koder 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.

SourceSafe-integration 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.

WebDAV-integration använder nu Dreamweaver för att överföra filer med WebDAV-protokollet. Se ”Använda Dreamweaver med WebDAV-protokollet” på sidan 123.

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

Kortkommandon 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.

Fönsterhantering 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.

Panelerna 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.

HTML- och webbteknikresurserNedan 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.

ZDNet Developer Tag Library (http://www.zdnet.com/devhead/resources/tag_library/) är en annan lista över information om alla HTML-koder.

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).

Web Review's Style Sheets Reference Guide (http://webreview.com/guides/style/style.html) är en guide till vad CSS-format är och i vilka webbläsare det fungerar.

”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.

Introduktion24

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.

Teckentabeller (http://www.bbsinc.com/iso8859.html) Listar teckennamn som används i ISO 8859-1 (Latin-1).

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/) Innehåller information om PHP: Hypertext Preprocessor.

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 DreamweaverMacromedia 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/.

Introduktion26

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 DreamweaverInnan 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 DreamweaverVi 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:

• 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 HTML-formatpanelen och kodkontrollen, som gör att du kan arbeta med andra element i Dreamweaver.

Objektpanelen

Egenskapskontrollen

Dokumentfönstret

StartfältetKodväljaren

Verktygsfältet

Flytande panel

Kapitel 128

• 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.

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.

Kapitel 130

Ordna platsstrukturen för självstudiernaDu 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 platsNä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.


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 Klicka på OK när du vill stänga dialogrutan.

Kapitel 132

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.


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

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.

Kapitel 134

Utforma en sida i layoutvynDu 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.

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.

Ikonen Layout

Ikonen Rita layoutcell

Ikonen Rita layouttabell


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 Compass-logotypen, 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 Compass-logotypen.

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 Klicka på ikonen Rita layoutcell i objektpanelen.

Kapitel 136

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.

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.

Layout-tabell

Layout-cell


• 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 Klicka på kanten till en layoutcell för att markera den.

Kapitel 138

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).


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:

Kapitel 140

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.


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å sidanNu 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.

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.

Kapitel 142

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.


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.


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.

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.

Kapitel 144

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.


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.

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”.

Kapitel 146

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.


Arbeta i standardvynLayoutvyn ä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 Klicka i dokumentfönstret så visas ändringen.

Kapitel 148

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.


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

Kapitel 150

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.


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.

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.

Kapitel 152

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.


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 resurspanelenPå 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.

Kapitel 154

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.

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.

Förhandsgranskningsområdet för resurserResursalternativ


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 Flash-filmen.

3 Klicka på uppspelningsknappen i förhandsgranskningsområdet i resurspanelen om du vill visa Flash-filmen.

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.

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.

Uppspelningsknapp

Kapitel 156

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 Compass-logotypen 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.


Infoga Flash-objektFlash-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 icke-standardteckensnitt 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.

Kapitel 158

• 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 Flash-knapp i objektpanelen.

Dialogrutan Infoga Flash-knapp visas.


2 I dialogrutan Infoga Flash-knapp anger du följande alternativ:

• I listan Format markerar du Beveled Rect-Bronze.

• 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.

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.

Kapitel 160

Skapa en mallDu 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).


Ä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 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.

Kapitel 162

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.


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 webbplatsenInnan 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.

Kapitel 164

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.


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.


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 stegGrattis! 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.

Kapitel 166

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 DreamweaverArbetsområ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:

• 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.)

Objektpanelen

Egenskapskontroll

Dokumentfönstret

Snabbmeny

StartfältetKodväljare

Verktygsfältet

Kapitel 268

• 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 DreamweaverMed 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 HTML-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.

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.

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, CSS-formatpanelen, 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.

Fönsterstorlek, popup-meny

Startfältet

Dokumentstorlek och uppskattade hämtningstid

Kodväljare

Kapitel 270

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.


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.

Kapitel 272

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.


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.

• 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.

Kodvyn

Designvyn

Dokumenttitel

Uppdatera designvyn

Referens

Kodnavigering

Alternativ-menyn

Kod- och designvy

Förhandsgranska i webbläsare

Filstatus

Kapitel 274

• 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.


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.

Kapitel 276

• 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 ActiveX-objekt. 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.


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.

Kapitel 278

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.

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.

Fliken för historiepanelen

Historiepanelen dras till skiktpanelen


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.

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.

Skjutreglage

Spela upp, knapp

Kopiera steg, knapp Spara som kommando, knapp

Steg

Kapitel 280

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.


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 HTML-kod 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önster-menyn. Mer information finns i ”Felsöka JavaScript-kod” på sidan 469.

Kapitel 282

Arbeta med färgerI 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.

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.

Färgrutan i egenskapskontrollen


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 8-bitars 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ällningarI 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.

Kapitel 284

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.


Använda Dreamweaver med andra programDreamweaver 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 Flash-filmer 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 DreamweaverDet 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.

Kapitel 286

Dialogrutan Snabbtangenter visas. Här kan du välja bland flera alternativ och kommandon som du kan redigera.

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).

Kortkommandon Visar listan med kortkommandon som är tilldelade det markerade kommandot.

Tangentkombination Visar den nya tangentkombinationen du anger.

Duplicera uppsättning, knapp

Ändra namn på uppsättning, knapp

Ta bort uppsättning, knapp

Spara som HTML, knapp


Plustecknet 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.

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 Klicka på plustecknet (+). Fältet för kortkommando aktiveras och insättningspunkten flyttas till fältet Tangentkombination.

Kapitel 288

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.


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.

Kapitel 290

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 webbplatsenTermen 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, 17-tumsskä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.

Kapitel 392

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 CD-ROM-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.

Min_plats1(rotmapp)

Plats 1

Om_företaget

Katalog

Resurser (för hela platsen)

index.html (home page)

Min_plats2(rotmapp)

Plats 2


Om_företaget

Resurser

Katalog

Resurser

Kapitel 394

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 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.

Kapitel 396

Använda Dreamweaver för att göra en ny platsNä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.


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 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.

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.

Kapitel 398

Redigera en befintlig webbplatsDu 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.


• 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.


Redigera en fjärrplatsDu 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.

Så här redigerar du en befintlig fjärrplats:

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.

Fjärrplats

public_html

Projekt1

Resurser

HTML

Projekt2

Resurser

HTML

Om_företaget

Lokal rotmapp (avbilda denna på public_html, och inte på Project1 eller Project1/HTML)

Projekt1 (måste finnas på den lokala platsen. Motsvarar Project1 på fjärrplatsen.)

HTML (måste finnas på den lokala platsen. Motsvarar Project1/HTML på fjärrplatsen.)

Kapitel 3100

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 platserOm 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.


Kapitel 3102

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äll- och versionskontroll. När du gäller källkontrollintegration kan du ansluta till SourceSafe-databaser och andra källkontrollsystem som stöder WebDAV-protokollet. (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önstretAnvä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.

Kapitel 4104

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 in- och 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.

Komprimera/utöka 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.

Kapitel 4106

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.


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önstretAnvä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.)

Kapitel 4108

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.


Ä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.


• 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.

Kapitel 4110

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.


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.

PlatskartanAnvä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.

Kapitel 4112

Använda platskartanDu 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:


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-post- eller 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).


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.

Kapitel 4114

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).


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).


• 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.

Kapitel 4116

Så här uppdaterar du visningen av platskartan när du har gjort ändringar:

1 Klicka någonstans i platskartan för att avmarkera eventuella filer.

2 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 Markera en eller flera filer i platskartan.

2 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 Markera en eller flera filer i platskartan.

2 Välj Visa > Visa filer markerade som dolda (Windows) eller Plats > Visa platskartan > Visa filer markerade som dolda (Macintosh).

3 Välj Visa > Visa/dölj länk (Windows) eller Plats > Visa platskartan > Visa/dölj länk (Macintosh).


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.

Kapitel 4118

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ärrplatsInnan 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.


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.

Kapitel 4120

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.


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.

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.

Ska vara värdkatalog

Ska inte varavärdkatalog

Ska inte vara värdkatalog i detta fall

nej

nej

ja

Kapitel 4122

Integrering av WebDAV och SourceSafeMed 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.


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 WebDAV-anslutning.

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.

Kapitel 4124

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.


Felsökning av inställningarna till fjärrplatsenEn 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 FTP-program. 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 FTP-loggen. 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.

Kapitel 4126

Använda incheckning/utcheckningNä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.


• 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.)


• 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 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.

Kapitel 4128

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).


Design NotesMed 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, Shockwave-objekt 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 Klicka på OK.

Kapitel 4130

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.


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:


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 Notes-filer. Klicka på Ja om du vill ta bort filerna eller på Nej om du vill behålla dem.

Kapitel 4132

Så här använder du endast Design Notes lokalt:



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:



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 Notes-fil, 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.


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.

Kapitel 4134

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.


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 HTML-koden 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.


Förbättra arbetsflödet med hjälp av rapporterVä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:



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 Ange namnet på en gruppmedlem och klicka på OK.

Kapitel 4136

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:



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.


Hämta och skicka filerOm 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 in- och 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).

Kapitel 4138

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.


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).

Kapitel 4140

Synkronisera filerna på den lokala platsen och på fjärrplatsenNä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.


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.

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.

Kapitel 4142

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-dokumentDu kan skapa ett dokument i Macromedia Dreamweaver på många olika sätt. Du kan skapa nya, tomma HTML-dokument eller öppna ett befintligt HTML-dokument, ä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, e-postfiler 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 HTML-kodfragment 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 BODY-koder 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.

Kapitel 5144

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 dokumentegenskaperSidtitlar, 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:


• 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.

Kapitel 5146

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.


Markera element i dokumentfönstretDu 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.

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.

Kodväljare

Kapitel 5148

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:


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 designarbetetDet 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.

Kapitel 5150

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:


• 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.


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ållHTML-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.

Kapitel 5152

Så här infogar du ett element i HEAD-delen av ett dokument:


• 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


Automatisera uppgifterNä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.

Kapitel 5154

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.


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.

Kapitel 5156

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å Redigera-menyn). 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.


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.

Kapitel 5158

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.


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.

Kapitel 5160

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.

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 tabellerNä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.

Ikonen Layout

Ikonen Rita layoutcell

Ikonen Rita layouttabell

Kapitel 6162

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 tabellerDu 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).

Kapitel 6164

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.


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.

Kapitel 6166

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.


• 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.


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 tabellerDu 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.

Kapitel 6168

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.


Formatera layoutceller och tabellerDu 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.


• 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.

Kapitel 6170

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.



• 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.


Ange layoutbreddDet 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.

Kapitel 6172

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.


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.

Kapitel 6174

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ällningarAnvä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.

Infoga distanshållare automatiskt anger om distanshållare ska infogas automatiskt när du anger att en kolumn ska ha automatiskt sträckning.

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.

Cellmarkering 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.

Tabellbakgrund anger bakgrundsfärgen i dokumentfönstret.


Kapitel 6176

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-, rad- och 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 tabellAnvänd objektpanelen eller Infoga-menyn när du vill skapa en ny tabell.

Så här infogar du en tabell:


• 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.

Kapitel 7178

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:


• 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.

Kapitel 7180

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 tabellelementMed 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.


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.

Kapitel 7182

Formatera tabeller och cellerDu 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> </td> <td bgcolor="#333399"> </td> <td> </td> <tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table>


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.

Kapitel 7184

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ä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.

Kapitel 7186

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.


Ändra storlek på tabeller och cellerDu 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.


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.

Kapitel 7188

Å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 kolumnerAnvä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.


• 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.


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.

Kapitel 7190

Så här kapslar du en tabell i en tabellcell:


• 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.


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:

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.

Kapitel 7192

Kopiera och klistra in cellerDu 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.


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 tabellerDu 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.

Kapitel 7194

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 tabelldataInnan 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.


Kapitel 7196

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.

Kapitel 8198

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 webbsidorRamar 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 ramarDu 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.

Kapitel 8200

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.

Så här skapar du en kapslad ramuppsättning:

1 Placera insättningspunkten i ramen som du vill infoga en kapslad ramuppsättning i.


• 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.

Huvudramuppsättning

Menyramen och innehållsramen är kapslade i huvudramuppsättningen

Kapitel 8202

Markera en ram eller ramuppsättningRamar 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).

Kapitel 8204

Spara ram- och ramuppsättningsfilerEn 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ättnings- eller 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ättningsegenskaperRamar 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.


• 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.

Kapitel 8206

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.


• Klicka på en kant mellan två ramar i dokumentfönstret.

• Klicka på kanten som omger ramarna på rampanelen.

3 Om du vill visa alla ramuppsättningsegenskaper klickar du på maximeringsknappen längst ned till höger i egenskapskontrollen.

Kapitel 8208

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.

Kapitel 8210

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:


• 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änkarOm 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.

Kapitel 8212

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 öppnar det länkade dokumentet i ett nytt webbläsarfönster och behåller det aktuella fönstret tillgängligt.

• _parent öppnar det länkade dokumentet i länkens överordnade ramuppsättning.

• _self öppnar länken i den aktuella ramen och ersätter innehållet i den.

• _top öppnar länken i det aktuella dokumentets yttersta ramuppsättning och ersätter alla ramar.

Hantera webbläsare som inte kan visa ramarI 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 ramarDu 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 ö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.

• Infoga navigationsfält använder du för att styra användaren till vissa sidor på en 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.

• 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.

Kapitel 8214

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 resurspanelenMed 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:

Bilder är bildfiler i GIF-, JPEG- och PNG-format. Information om bilder finns i ”Infoga bilder” på sidan 263..

Färger är färgerna som används i dokument och formatmallar på platsen, bland annat textfärger, bakgrundsfärger och länkfärger.

URL ä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://).

Flash-filmer ä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.

Shockwave-filmer är filer i något av Macromedias Shockwave-format. Se ”Shockwave-filmer” på sidan 305.

Filmer är filmfiler i QuickTime- eller MPEG-format. Se ”Infoga media” på sidan 293.

Kapitel 9216

Skript ä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.

Mallar 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.

Biblioteksposter ä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.

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.

Kapitel 9218

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.)


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.


• Dra resursen från panelen till designvyn. (Du kan dra skript till HEAD-områ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.


• 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.


• Dra mallen från panelen till designvyn.

• Markera mallen och klicka på Använd.

Kapitel 9220

Ä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 Kommando-klicka (Macintosh) på en markerad resurs om du vill avmarkera den.


Så här redigerar du en resurs:


• 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 URL-adresser 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.

Kapitel 9222

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 favoritresurserDe 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.


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.

Kapitel 9224

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.


• 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.


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.


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.


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.

Kapitel 9226

0
1
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 HTML-formatering 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. HTML-format 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 CSS-format.

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 objektLä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 Bläddra efter önskad fil eller skriv dess namn i textfältet.

Kapitel 10228

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.


• 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 (©), &-tecknet (&) och symbolen för registrerat varumärke (®). Varje enhet har både ett namn (exempelvis —) och ett motsvarande numeriskt värde (exempelvis ).

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 > för större än (>) och ⁢ 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.


• 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.

Kapitel 10230

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.


Skapa listorDu 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 Använd en ny listtyp eller stil på den indragna texten genom att följa samma procedur som ovan.

Kapitel 10232

Ange teckensnitt, stil, färg och justeringDu 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.


• 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.


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 CSS-formatmallar. 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.

Kapitel 10234

Ä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.


• 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.


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 UL- eller 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.


• 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.

Kapitel 10236

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.


• 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.


Formatera text med HTML-formatEtt 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 CSS-formatmallar. 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 HTML-specifikationen. 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.

Tillämpa automatiskt Nytt format

Snabbmeny

Ta bort format

Kapitel 10238

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 HTML-format. 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).


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å HTML-formatpanelen.

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:

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å HTML-formatpanelen.

Kapitel 10240

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.


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å HTML-formatpanelen.

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 HTML-format 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.

Kapitel 10242

Använda CSS-formatmallarEtt 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 HTML-format ä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. CSS-format 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 CLASS-attribut 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 CSS-formatmallar känns igen Internet Explorer 3.0, men de ignoreras i de flesta tidigare webbläsare.


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 CSS-format (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 HTML-format.

Ä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.

Kapitel 10244

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 CSS-formategenskaper 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 CSS-formatmallen är länkad till dokumentet med en LINK-kod och hur olika CSS-format 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å CSS-formatpanelen 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.


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å CSS-formatpanelen 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.

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 CSS-format i Dreamweaver” på sidan 247.

9 Klicka på Spara när du har definierat formaten.

Kapitel 10246

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.


• Välj Fönster > CSS-format eller klicka på CSS-format bland startknapparna. Högerklicka (Windows) eller Kontroll-klicka (Macintosh) på CSS-formatpanelen 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:

Skapa anpassat format (klass) skapar ett format som kan tillämpas som ett CLASS-attribut på ett textintervall eller textblock.

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.


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.

Kapitel 10248

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å CSS-formatpanelen 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 Kontroll-klicka (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.


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 CSS-formatmall:

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 CSS-formatmall.

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>

Kapitel 10250

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å CSS-formatpanelen 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 HTML-formatpanelen.)

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å CSS-formatpanelen ö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 CSS-format 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.


Konvertera CSS-format till HTML-koderOm 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.0-webblä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.

Kapitel 10252

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


Kontrollera stavningAnvä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 attributDu 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:


• 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.

Kapitel 10254

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.


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.

Kapitel 10256

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 ALT-attribut.

• 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 face="Arial">rubrik 1</font></b> är koden FONT inuti koden 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.


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 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.

Kapitel 10258

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.


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 ”tumme” och ”u” i ”stuga”

+ Föregående tecken 1 eller fler gånger.

um+ matchar ”um” i ”rum” och ”umm” i ”tumme”, men inget i ”stuga”

? Föregående tecken högst en gång (detta används om det föregående tecknet är valfritt).

st?en matchar ”sen” i ”Andersen” och ”sten” i ”gråsten” men inget i ”bulten” eller ”ljussken”

. Ett enstaka tecken förutom radmatning.

.en matchar ”ren” och ”len” i ”Sören tycker om äpplen”

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 tecken.

s{2} matchar ”ss” i ”passar” och de 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.

F{2,4} matchar ”FF” i "#FF0000" och de fyra första F:en i "#FFFFFF"

[abc] Något av tecknen inom hakparenteserna. Ange ett teckenintervall med ett bindestreck ([a-f] motsvarar exempelvis [abcdef]).

[e-g] matchar ”e” i ”del”, ”f” i ”fjärran” och ”g” i ”gäst”

Kapitel 10260

[âbc] Något av tecknen som inte finns inom hakparenteserna. Ange ett teckenintervall med ett bindestreck ([â-f] motsvarar exempelvis [âbcdef]).

[âeiou] matchar först ”r” i ”artist”, ”b” i ”bok” och ”k” i ”ek”

\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-Za-z0-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 [Â-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+Retur (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.

-

Tecken Matchar Exempel


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).

Kapitel 10262

1
1
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 GIF- och 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.

PNG (Portable Network Group) ä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.

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 Dreamweaver-filen. 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 bildNä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:


• 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.

Kapitel 11264

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 bildegenskaperNä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 HTML-kä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:

• _blank 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.

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 värdena för bredd (B) och höjd (H) till bildens ursprungliga storlek.

Kapitel 11266

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.

Kapitel 11268

Skapa klickbara bilderEn klickbar bild är en bild som har delats upp i regioner, så kallade hotspot-objekt. 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 HTML-dokumentet, 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å hotspot-objektet. 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:

Klickbar bild anger den klickbara bildens namn. Skapa ett unikt namn för varje klickbar bild i ett dokument.

Länk 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.)

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 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.

Alt 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.

Kapitel 11270

Ä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.


• 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.


• 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 HTML-källkod som överrullningsbeteendet är kopplat till. Om du tar bort ingenstanslänken slutar överrullningsbilden att fungera.

8 Klicka på OK när du vill stänga dialogrutan Infoga överrullningsbild.

Kapitel 11272

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 bildredigerareNä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.

Kapitel 11274

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å bilderDu 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.

Förhandsladda bilder 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.

Växla bild växlar en bild mot en annan genom att ändra attributet SRC för IMG-koden. 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ällning å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.

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.

Kapitel 11276

2
1
KAPITEL 12Anvä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 DreamweaverDu 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 Placera infogningspunkten där du vill att bilden ska visas i Dreamweavers dokumentfönster.


• Välj Infoga > Bild.

• Klicka på knappen Infoga bild på kategorin Vanlig på objektpanelen.

3 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 I Dreamweaver sparar du ditt dokument på en angiven webbplats.

2 Placera infogningspunkten på den plats i dokumentet där du vill att HTML-koden ska börja.


• Välj Infoga > Interaktiva bilder > Fireworks HTML.

• Klicka på knappen Infoga Fireworks HTML på kategorin Vanlig på objektpanelen.

4 I dialogrutan som öppnas klickar du på Bläddra för att välja den önskade Fireworks HTML-filen.

5 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 Klicka på OK för att infoga HTML-koden tillsammans med dess associerade bilder, skivor och JavaScript-kod i Dreamweaver-dokumentet.

Kapitel 12278

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 HTML-koden 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 Dreamweaver-webbmappen. 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:


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:


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.

Kapitel 12280

Så här exporterar du en Fireworks-fil som en Dreamweaver bibliotekspost:


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.


Starta Fireworks inifrån DreamweaverDu 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 redigera-funktioner 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:

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.

Kapitel 12282

Om utformningsanteckningar och källfiler

När du exporterar en Fireworks-fil från en sparad PNG-källa till en Dreamweaver-webbplats, skriver Fireworks en utformningsanteckning som innehåller informa-tion 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 referen-ser 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 PNG-kä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:

Använd alltid käll-PNG ö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 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.

Fråga vid start 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.


Redigera Fireworks-filer som monterats i DreamweaverMed Starta- och redigera-integrering kan du använda Fireworks för att redigera bilder och tabeller som skapats i Fireworks och monterats i ett Dreamweaver-dokument. 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.


• 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.

Kapitel 12284

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äll-ningarna för PNG-källfilen. GIF- eller JPEG-filen som används av Dreamwea-ver 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.


• 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. PNG-källfilen för hela tabellen visas i dokumentfönstret.


3 Redigera tabellbilden i Fireworks.

Dreamweaver uppfattar och bevarar alla ändringar som görs av bilden i Fireworks.

4 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 DreamweaverDu 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 I Dreamweaver markerar du den önskade bilden och väljer Kommandon > Optimera bilden i Fireworks.

2 Om du tillfrågas anger du om du vill öppna en källfil från Fireworks för den monterade bilden.

3 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.

Kapitel 12286

• Om du vill ändra storleken och ytan på den exporterade bilden, klickar du på fliken Fil. För mer information, se ”Ändra storlek på monterade Fireworks-bilder” 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.

4 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.


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.

Kapitel 12288

Uppdatera Fireworks HTML som monterats i DreamweaverKommandot 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 Dreamweaver-dokumentet. 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 webbfotoalbumMed 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.


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.

GIF WebSnap 256 skapar GIF-miniatyrbilder som använder en webbadaptiv palett med upp till 256 färger.

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 kom-mandot 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.

Kapitel 12290

7 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.

8 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.

9 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 miniatyrbil-derna 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 Dre-amweaver aktivt igen och skapar sidan som innehåller miniatyrbilderna.

10 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.


Kapitel 12292

3
1
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 mediaobjektDu 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 redigerareDu 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.

Kapitel 13294

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 mediaobjektLiksom 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ållMacromedias 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 Flash-knappobjekt” 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.

Kapitel 13296

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-knappobjektMed 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 Flash-textobjekt.

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 SWF-filen 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.

Kapitel 13298

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-textobjektMed 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.

Kapitel 13300

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 SWF-filen 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-objektNä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 en bakgrundsfärg för objektet.

Redigera ö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.

Kapitel 13302

Infoga Flash-filmerNä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 CODEBASE-parameter 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 Flash-textobjekt).

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 Flash-objekt 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).


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 automatiskt upp filmen när sidan läses in.

Slinga gör att filmen körs om och om igen.

Återställ storlek återställer den markerade filmen till ursprunglig storlek.

Kapitel 13304

Infoga generatorerMed 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 Dreamweaver-dokument.

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-filmerMed 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.


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.


L-mellanr. och V-mellanr. anger (i antal bildpunkter) mellanrum ovanför, nedanför och på båda sidor av filmen.

Kapitel 13306

Lägga till ljud på en sidaDet 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 CD-kvalitet. 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.

Kapitel 13308

Infoga insticksprogram för Netscape NavigatorInsticksprogram 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 MP3-filerna 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.


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


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 Navigator-insticksprogram (d.v.s. element som använder koden EMBED) direkt i designvyn i dokumentfönstret. (Filmer och animeringar som är beroende av ActiveX-kontroller 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.

Kapitel 13310

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-kontrollActiveX-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.


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 Navigator-insticksprogrammet.


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 Navigator-insticksprogram 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.

Kapitel 13312

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.


Data anger en datafil som ska läsas in i ActiveX-kontrollen. I flera ActiveX-kontroller, exempelvis Shockwave och RealPlayer, används inte denna parameter.

Kant anger bredden på kanten runt objektet.

Infoga ett Java-miniprogramJava ä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.


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.


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 parametrarAnvä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 ActiveX-kontroller. Information om vilka parametrar du kan använda finns i dokumentationen till den ActiveX-kontroll du använder.

Kapitel 13314

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 mediaDu kan lägga till beteenden på sidan för att starta och stoppa olika mediaobjekt.

Kontrollera Shockwave eller Flash 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.

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 URL-adresser, 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

Kapitel 13316

4
1
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-koderDet 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: HEAD-koden 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>

Kapitel 14318

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.

Kapitel 14320

Rubrikkoder (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:

<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.

Radbrytningskoder

Mellanrum skapat med radbrytningar


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>

Kapitel 14322

Infoga kommentarerEn 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:



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 referenspanelenReferenspanelen ä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 kod- eller 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).


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">.

Kapitel 14324

Roundtrip HTMLRoundtrip 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.


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.

Kapitel 14326

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.


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 popup-menyn Visningsalternativ. Klicka i kodvyn (eller kodkontrollen) när du vill aktivera den.

Kapitel 14328

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.


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 skriptDu 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 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.

Kapitel 14330

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.


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å popup-menyn 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).

Kapitel 14332

Öppna och redigera icke-HTML-filer i DreamweaverNä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 icke-HTML-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 designvynAnvä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 HTML-redigering.


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.



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.



Kapitel 14334

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).


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.

Kapitel 14336

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:


• 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.


Kodformatering – inställningarDu 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 HTML-formatering” 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.

Kapitel 14338

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.

Kodspecifik gör att du kan åsidosätta de andra färginställningarna genom att ange färger för specifika koder.

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 HTML-dokument använder du kommandot Använd källformat. (Se ”Formatera HTML-kä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.


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 ASCII-lä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 HTML-dokument. 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.

Kapitel 14340

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 HTML-kod 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.

De två alternativen för Specialtecken 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.


Rensa HTML-källkodAnvä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  bort, men inte  (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  bort, men inte  (eftersom det inte är en Dreamweaver-kommentar). 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.

Kapitel 14342

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-HTMLI Dreamweaver kan du öppna eller importera dokument som har sparats i Microsoft Word som HTML-filer och sedan använda kommandot Rensa Word-HTML 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 Word-HTML 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.


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 HEAD-delen 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 CSS-formatdeklarationer, 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 Word-HTML.

Kapitel 14344

Använda externa HTML-redigerareIbland 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:


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).


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:


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 ColdFusion- och ASP-filer.

Så här redigerar du ett block med ASP-kod i designvyn:

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.

Kapitel 14346

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.


Kapitel 14348

5
1
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ägarDet ä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.

Kapitel 15350

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:

resurser

tips.html

min_plats (rotmapp)

support

contents.html

hours.html

produkter

catalog.html


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.

Kapitel 15352

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.


Skapa länkarHTML-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-, PDF- eller 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å-fil-ikonen 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.

Kapitel 15354

Länka dokument med egenskapskontrollen och med peka-på-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.


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

Kapitel 15356

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.


Skift-dra peka-på-fil-ikonen från text i dokumentfönstret till en fil i platsfönstret


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.


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.

Kapitel 15358

Så här skapar du ett namngivet ankare:

1 Placera insättningspunkten i dokumentfönstrets designvy där du vill infoga ankaret.


• 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.)


• 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.


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 e-postmeddelandets 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 e-postlä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.

En ingenstanslänk ä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.

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.

Kapitel 15360

Så här skapar du en ingenstanslänk:


2 I egenskapskontrollen skriver du tecknet # i rutan Länk.

Så här skapar du en skriptlänk:


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.


Så här skapar du en cachefil för platsen:


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 Dreamweaver-dokument 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:

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.

Kapitel 15362

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-, ingenstans- och 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.


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 hoppmenyerEn 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.

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.

Kapitel 15364

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.


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ältEtt 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.

Kapitel 15366

• 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:


• Välj Infoga > Interaktiva bilder > Navigationsfält.

• Klicka på Infoga navigationsfält i kategorin Vanlig på objektpanelen.

Dialogrutan Infoga navigationsfält visas.


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.

Kapitel 15368

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änkarDu 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.

Öppna webbläsarfönster 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.

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.

Ställ in navigationsfältets bild 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.


Kapitel 15370

6
1
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: Server-Side 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.

Kapitel 16372

Skapa mallarDu 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.

Kapitel 16374

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.


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:

Kapitel 16376

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 regionerI 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.


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.


• 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.

Kapitel 16378

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.)


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ändringsbararegioner kan

ändras.

Ändringsbara regioner omges av färgmarkerade konturer.

Kapitel 16380

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.

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.

Endast ändringsbararegioner kan ändras

Markerad gränsrunt sidan.


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:

 {Edit_Region}

HTML-koden för en ändringsbar tabell med namnet Editable_Table kan se ut så här:

<table width="77%" border="1"> <tr> <td> </td> <td> </td> </tr></table>

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 HTML-källkod.

Kapitel 16382

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.

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.

EndaständringsbarHTML-kodkan ändras.

Låst HTML-kod är

markerad.


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

Kapitel 16384

Skapa dokument som är baserade på mallarDu 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.


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.

Kapitel 16386

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.


Uppdatera sidor som är baserade på en mallNä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.

Kapitel 16388

Exportera och importera XML-innehållDu 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 XML-filens data till den exporterade XML-filen. Resultatet blir en XML-fil med rätt struktur och med korrekta data, allt klart att importeras.


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.

Kapitel 16390

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 XML-innehå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 TITLE-kod).

• 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>


Skapa, hantera och redigera biblioteksposterBibliotek ä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 HTML-kä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 BODY-del, 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.

Kapitel 16392

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.


• 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:


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.


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.)

Kapitel 16394

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.


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:

1 Markera en förekomst av posten i ett av dokumenten.

2 Klicka på knappen Skapa om i egenskapskontrollen.

Kapitel 16396

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 Dreamweaver-beteende 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.


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.

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.

Kapitel 16398

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å.


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):

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.

Kapitel 16400

Så här ändrar du vilken fil som är inkluderad:

1 Markera aktuell Server-Side Include i dokumentfönstret.

2 Öppna egenskapskontrollen.


• 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:



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.


Kapitel 16402

7
1
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-kodNä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.

Kapitel 17404

Skapa skikt på sidanI 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.

Kapitel 17406

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.


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.

Bredd och Höjd anger standardbredd och standardhöjd för skikt som skapas med Infoga > Skikt.

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 skiktUnder 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.

Kapitel 17408

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.


Ä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.


• 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.

Kapitel 17410

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).


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.


• 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.

Kapitel 17412

Ange skiktegenskaperAnvä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.)


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.

Kapitel 17414

Källa (endast LAYER och ILAYER) använder du för att visa ett annat HTML-dokument 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.


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 skiktAnvä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.

Kapitel 17416

Ändra skiktens synlighetUnder 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 tabeller och skikt för layoutI 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.0-kompatibilitet” 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 Markera önskade layoutverktyg och stödrasteralternativ och klicka på OK.

Kapitel 17418

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.


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.0-webblä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, CSS-format 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.

Kapitel 17420

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 skiktMed dynamisk HTML, eller DHTML, kan du ändra HTML-elements format- och 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 ActiveX-kontroller, 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.


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.

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 kanalen för beteenden som ska köras vid en viss bildruta på tidslinjen.

Huvudbildrutor

Beteendekanal

Listruta för tidslinjer

Animeringskanaler

Animeringsfält

Uppspelningshuvud

Bildnummer

Kapitel 17422

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.


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.

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.

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.

Klicka på skiktmarkören så att skiktet markeras

Ikonen Rita skikt

Markerat skikt med bild

Kapitel 17424

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.


Ä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.

Kapitel 17426

Ä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 Z-Index 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 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.


• 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.

Kapitel 17428

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).


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 start- och 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 tidslinjerKoppla 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.

Visa-dölj skikt 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.

Kapitel 17430

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.

Ange texten i skiktet 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 HTML-kod som helst. Se ”Ange texten i skiktet” på sidan 460.


Kapitel 17432

8
1
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 onMouseOver-hä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.

BeteendepanelenAnvä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ändelserI 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).

Kapitel 18434

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, IE4, IE5) genereras när en nedtryckt musknapp släpps upp.

onMove (NS4) 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, IE5) genereras när besökaren rullar upp eller ned.

Kapitel 18436

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 beteendeDu 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.


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.

Kapitel 18438

Beteenden och textDu 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 JavaScript-alternativet.

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 HREF-kod: style="text-decoration:none; color:black".

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.


Koppla ett beteende till en tidslinjeOm 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 beteendeNä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.


• 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.

Kapitel 18440

Uppdatera ett beteendeOm 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 tredjepartEn 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 beteendeåtgärderna som ingår i DreamweaverDe 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 Windows

Åtgärd Netscape Navigator 3.0

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



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


Kapitel 18442

Hoppmeny Gå OK Misslyckas utan fel


Öppna webbläsarfönster


OK OK

Spela upp ljud OK Misslyckas utan fel


Popup-meddelande


OK OK

Förhandsladda bilder



Ställ in navigationsfältets bild



Ange texten i ramen


OK OK

Ange texten i skiktet

Misslyckas utan fel

Misslyckas utan fel

Misslyckas utan fel

Misslyckas utan fel

Ange texten i statusfältet


OK OK

Ange texten i textfältet


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


Växla bildåterställning



Gå till bildruta på tidslinje

Spela upp tidslinje och Stoppa tidslinje

Animering av bildkällor och beteendeanrop fungerar, men skiktanimering misslyckas utan fel

Misslyckas utan fel

Animering av bildkällor och beteendeanrop fungerar, men skiktanimering misslyckas utan fel

Misslyckas utan fel

Validera formulär OK Misslyckas utan fel

OK OK

Macintosh Windows

Åtgärd Netscape Navigator 3.0

Internet Explorer 3.0x

Netscape Navigator 3.0

Internet Explorer 3.01


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:


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 Markera ett objekt i listrutan Namngivet objekt.

Kapitel 18444

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.)


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:


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.


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 www-adressen.

10 Klicka på OK.


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.

Kapitel 18446

Så här använder du åtgärden Kontrollera instick:


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.




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å popup-menyn Å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.


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.

Kapitel 18448

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.


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.


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.


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.

Kapitel 18450

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 JavaScript-programmerare.

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.


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:


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.

Kapitel 18452

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.



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.


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.

Kapitel 18454

Så här använder du åtgärden Öppna webbläsarfönster:


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.


Fönsterbredd anger fönstrets bredd i bildpunkter.

Fönsterhöjd 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.

Rullningslister vid behov 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.)

Storlekshandtag 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.

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 JavaScript-kod. Detta namn får inte innehålla mellanslag eller specialtecken.

5 Klicka på OK.




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:


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.



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 (\{).

ExempelURL-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:


2 Klicka på plustecknet (+) och välj Popup-meddelande på popup-menyn Åtgärder.

Kapitel 18456

3 Skriv meddelandet i fältet Meddelande.

4 Klicka på OK.



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:


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.




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 Upp-lä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.

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.

Kapitel 18458

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.



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:


2 Klicka på plustecknet (+) och välj Ange text > Ange texten i ramen på popup-menyn Å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.


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 HTML-koder i fältet Ny HTML i dialogrutan Ange texten i skiktet.



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:


2 Klicka på plustecknet (+) och välj Ange text > Ange texten i skiktet på popup-menyn Å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.



Kapitel 18460

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.



Så här använder du åtgärden Ange texten i statusfältet:


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.




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.



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.



Kapitel 18462

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.



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.


Så här skapar du ett förhandsladdat skikt:

1 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.

2 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.

3 Markera skiktet om det behövs och ge det namnet loading i fältet längst till vänster i egenskapskontrollen för skikt.

4 Behåll skiktet markerat och ange i egenskapskontrollen samma bakgrundsfärg för skiktet som för sidan.

5 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.

6 Klicka på <body>-koden i kodväljaren längst ned till vänster i dokumentfönstret.

7 Välj Visa-dölj skikt på popup-menyn Åtgärder på beteendepanelen.

8 Markera skiktet med namnet loading i listan Namngivna skikt.

9 Klicka på Dölj.

10 Klicka på OK.

11 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.)

Kapitel 18464

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.




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.


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.



Kapitel 18466

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.


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.



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.



• 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.


• 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.

Kapitel 18468

9
1
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ökningsprogrammetNä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.

Kapitel 19470

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 felNä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.

Kör

Stoppa felsökning

Lägg till/ta bort brytpunkt

Ta bort alla brytpunkter

Procedurstega

Stega

Stega till procedurslut

Kapitel 19472

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.


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å popup-menyn 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 if-sats 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.

Kapitel 19474

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.



Så här redigerar du ett värde:

1 Markera posten i variabellistan.

2 Klicka på värdet i värdelistan.

3 Redigera värdet genom att skriva i textrutan som visas.

Kapitel 19476

0
2
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.

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 e-postadress innehåller en @-symbol eller att ett obligatoriskt fält innehåller en inmatning.

CGI-bin

1. Besökaren fyller iformuläret och skickar dettill en webbserver förbearbetning.

2. CGI-skriptbearbetarformuläret.

3. Ett nytt HTML-dokumentskapas och skickas tillbesökaren.

477

CGI-skriptFormulä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ärobjektI 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:

Infoga formulär infogar ett formulär i dokumentet. Inledande och avslutande FORM-koder 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 textfält 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 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.

Kapitel 20478

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.

Infoga alternativknapp 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 lista/meny 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 filfält 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 bildfä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 dolt fä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 hoppmeny 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.

Skapa ett formulärEtt 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.

Kapitel 20480

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ältNä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.

Lösenordsfält ä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.

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.

Kapitel 20482

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:


• 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.

Kapitel 20484

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.


• 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ärde-par 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:


• 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 alternativknapparAnvä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.

Kapitel 20486

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:


• 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:


• 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 menyerAnvä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.

Kapitel 20488

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:


• 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):


• 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.

Kapitel 20490

FormulärknapparFormulä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:


• 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 JavaScript-kod. 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ärutformningDu 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).

Kapitel 20492

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:


• 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ärFormulä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 JavaScript-funktion 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 ”HTML- och 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.

Kapitel 20494

Använda beteenden med formulärDu 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.

Validera formulär 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.

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

Kapitel 20496

1
2
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äsarkompatibilitetI 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.

Kapitel 21498

Så här kontrollerar du målwebbläsare:


• 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 insticksprogramDu 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.

Kontrollera webbläsare 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 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äsareDet ä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, ActiveX-kontroller 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:

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.

Kapitel 21500

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.


Kontrollera länkar på en sida eller platsArbetet 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 En lista över filer som passar för den rapporttyp som du har markerat visas i dialogrutan Länkkontroll.

Kapitel 21502

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.


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.

Kapitel 21504

Kontrollera nedladdningstid och storlekStorleken 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 RapporterNär du testar platsen kan du ställa samman och skapa rapporter för flera HTML-attribut 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.


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:



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.)

Kapitel 21506

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> Den spanska <i> räven</i> rev en annan räv</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.


Kapitel 21508

2
2
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 HTML-formatering” 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 standardfiltypSom 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.

Kapitel 22510

Ändra objektpanelenSom 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 objektDu 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 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.

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 standard-HTML-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>© 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.

Kapitel 22512

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-menyerAlla 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.


Ä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å Kommandon-menyn 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.


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.


Kapitel 22514

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.


Så här flyttar du en meny:




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:




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 Spara och stäng menus.xml. Starta sedan om Dreamweaver så att ändringarna visas.

Kapitel 22516

Ä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:




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.


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 XML-syntaxfel 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}

NAME Menyradens namn. NAME är visserligen ett obligatoriskt attribut, men du kan ge det värdet "".

APP Namnet på det program som menyraden är tillgänglig i. Giltiga värden är "dreamweaver" och "ultradev". Standardinställningen är att menyraden är tillgänglig i både Dreamweaver och UltraDev.

ID Menyradens meny-ID. Varje enskilt meny-ID i filen menus.xml ska vara unikt.

Kapitel 22518

PLATFORM Anger att menyraden bara ska visas på den angivna plattformen. Giltiga värden är "win" och "mac".

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">

</menubar>

<menu>

Beskrivning

Ger information om en meny eller undermeny som ska visas i Dreamweavers menystruktur.

Attribut

name, {app}, id, {platform}

NAME 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.

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.

PLATFORM Anger att menyn bara ska visas på den angivna plattformen. Giltiga värden är "win" och "mac".

Innehåll

Denna kod kan innehålla en eller flera MENUITEM-koder och en eller flera SEPARATOR-koder. 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">

</menu>


<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).

ID 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.

APP Namnet på det program som menyposten är tillgänglig i. Giltiga värden är "dreamweaver" och "ultradev". Standardinställningen är att menyposten är tillgänglig i både Dreamweaver och UltraDev.

key Kommandots eventuella kortkommando. Använd följande strängar när du vill ange ändringstangenter:

• 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".

Kapitel 22520

ENABLED 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".

ARGUMENTS 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.

COMMAND 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.

FILE 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.

CHECKED Ett JavaScript-uttryck som anger om en bockmarkering visas bredvid menyposten på menyn. Om uttrycket beräknas som TRUE visas posten med en bockmarkering.

DYNAMIC 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.

ISDOMREQUIRED 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.)

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" />


<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}

APP 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.

ID 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".

PLATFORM Anger att kortkommandolistan bara ska visas på den angivna plattformen. Giltiga värden är "win" och "mac".

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 HTML-kommentarkoder).

Behållare

Inga.

Exempel<shortcutlist id="DWMainWindow">

</shortcutlist>

Kapitel 22522

<shortcut>

Beskrivning

Anger ett kortkommando i filen menus.xml.

Attribut

key, {app}, {platform}, {file}, {arguments}, {command}, id, {NAME}

KEY Tangentkombinationen som aktiverar kortkommandot. Syntaxinformation finns i ”<menuitem>” på sidan 520.

APP 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.

PLATFORM 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.

FILE 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.

ARGUMENTS 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.

COMMAND Den JavaScript-kod som körs i Dreamweaver när du använder kortkommandot. Ange antingen FILE eller COMMAND för varje enskilt kortkommando.

ID Ett unikt ID för kortkommandot.

NAME 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".

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 utseendet på dialogrutorLayouten på objekt, kommandon och beteenden i dialogrutor anges som HTML-formulä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.


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.

Kapitel 22524

Ändra standardinställd HTML-formateringKä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 <p break="1,0,0,1" indent>, vilket ger följande formatering:

<p> Ett textstycke som är indraget från vänster marginal (efter den förstaraden) och som har en radbrytning före den inledande P-koden och efterden avslutande P-koden, men inte efter den inledande P-koden och inteföre den avslutande P-koden.</p>

<p>Nästa stycke.</p>


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 radbrytningföre och efter den inledande P-koden, en radbrytning före den avslutande P-kodenoch 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.

Kapitel 22526

Arbeta med webbläsarprofilerWebblä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.


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öttAttribut1understö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.

kodNamn ä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.

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.

understöttAttribut är ett attribut som stöds av htmlKod. Endast koder som visas utan en !Error-text antas ha stöd i webbläsaren.

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 )

AltArchiveClass !Warning !htmlmsg="Denna webbläsare ignorerar attributet

<CODE>CLASS</CODE> för koden <CODE>APPLET</CODE>."CodeCodebaseHeightHSpaceID !Warning !htmlmsg="Denna webbläsare ignorerar attributet <CODE>ID</

CODE> för koden <CODE>APPLET</CODE>. Använd <CODE>NAME</CODE> i stället."NameStyle !Warning !htmlmsg="Denna webbläsare ignorerar attributet

<CODE>STYLE</CODE> för koden <CODE>APPLET</CODE>."VSpaceWidth

>

Kapitel 22528

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.


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: GrundernaDreamweaver ä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.

Kapitel 22530

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 JavaScript-koden 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 tolkningen av tredjepartskoderBearbetningsteknik 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 %>. Dreamweaver-mappen 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>

Kapitel 22532

Du kan definiera två olika sorters koder med TAGSPEC: normala HTML-formatskoder 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

TAG_NAME 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_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".


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 BODY-innehållskoder, exempelvis DIV, LAYER och TD.

• HEAD_MODEL Anger att koden kan ha textinnehåll och att den endast kan finnas 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.

START_STRING 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.

END_STRING Anger en avgränsare som markerar slutet på en strängavgränsad kod. Detta attribut är obligatoriskt om START_STRING är angivet.

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.

Kapitel 22534

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).

ICON 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_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:


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:


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 JSP-aktiverad 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.

Kapitel 22536

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å PHP-sidorna, 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.


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.


• 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:


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:


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.

Kapitel 22538

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 Utforskaren eller platsfönstret till dokumentfönstret

Kommando+O

Ö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

Visningsalternativ för sidor


Ångra Ctrl+Z Kommando+Z

Gör om Ctrl+Y eller Ctrl+Skift+Z Kommando+Y eller Kom-mando+Skift+Z

Klipp ut Ctrl+X ellerSkift+Del

Kommando+X eller Skift+Del

Kopiera Ctrl+C ellerCtrl+Ins

Kommando+C eller Kommando+Ins

Klistra in Ctrl+V ellerSkift+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

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

Bilaga A540

Visa sidelement

Kodredigering

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+Alterna-tiv+Skift+G

Innehållet under HEAD Ctrl+Skift+W Kommando+Skift+W

Sidegenskaper Ctrl+Skift+J Kommando+Skift+J


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

Kortkommandon 541

Redigera text

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


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 ett nytt ställe

Dra den markerade posten till ett nytt ställe

Kopiera text eller objekt till ett annat ställe på sidan

Ctrl-dra den markerade pos-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 kodredige-rare

Ctrl+Tabb Alternativ+Tabb


Bilaga A542

Formatera text

Obs! En del kortkommandon för textformatering fungerar inte när du arbetar i kodredigerarna.

Söka och ersätta text

Öppna och stänga egenskapskontrollen Ctrl+Skift+J Kommando+Skift+J

Kontrollera stavning Skift+F7 Skift+F7


Indrag Ctrl+] Kommando+]

Minska indrag Ctrl+[ Kommando+[

Formatera > Inget Ctrl+0 (noll) Kommando+0 (noll)

Styckeformat Ctrl+Skift+P Kommando+Skift+P

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+Alterna-tiv+L

Justera > Centrera Ctrl+Skift+Alt+C Kommando+Skift+Alterna-tiv+C

Justera > Höger Ctrl+Skift+Alt+R Kommando+Skift+Alterna-tiv+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


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

Obs! En del kortkommandon för tabeller fungerar inte i layoutläget.

Arbeta med ramar


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+ - (binde-streck)

Slå samman markerade tabellceller Ctrl+Alt+M Kommando+Alternativ+M

Dela upp tabellceller Ctrl+Alt+S Kommando+Alternativ+S

Uppdatera tabellayout (gör en uppdate-ring när funktionen Snabbare tabellredi-gering är aktiverad)

Ctrl+Mellanslag Kommando+Mellanslag


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

Bilaga A544

Arbeta med skikt

Arbeta med tidslinjer


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 över-, neder-, vänster- eller högerkanten på det senast markerade skiktet

Ctrl+piltangenter (upp, ned, vänster eller höger)

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


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

Hantera hyperlänkar

Förhandsgranska i webbläsare


Ä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


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-länk från ett dokument

Markera texten, bilden eller objektet och Skift-dra marke-ringen till en fil i platsfönstret

Markera texten, bilden eller objektet och Skift-dra marke-ringen till en fil i platsfönstret

Dra och släpp när du vill skapa en hyper-länk med hjälp av egenskapskontrollen

Markera texten, bilden eller objektet och dra peka-på-fil-ikonen i egenskapskontrollen till en fil i platsfönstret

Markera texten, bilden eller objektet och dra peka-på-fil-ikonen i egenskapskontrollen till en fil i platsfönstret

Öppna det dokument som länken går till i Dreamweaver

Ctrl-dubbelklicka på länken Kommando-dubbelklicka på länken

Kontrollera markerade länkar Skift+F8 Skift+F8

Kontrollera länkar på hela platsen Ctrl+F8 Kommando+F8


Förhandsgranska i primär webbläsare F12 F12

Förhandsgranska i sekundär webbläsare Ctrl+F12 Kommando+F12

Bilaga A546

Felsökning i webbläsare

Platshantering och FTP


Felsökning i primär webbläsare Alt+F12 Alternativ+F12

Felsökning i sekundär webbläsare Ctrl+Alt+F12 Kommando+Alternativ+F12


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 fjärrfönsterrutan till den lokala fönsterrutan i platsfönstret

Kommando+Skift+D eller dra filer från fjärrfönsterrutan till den lokala fönsterrutan i plats-fönstret

Skicka de markerade filerna eller map-parna till fjärr-FTP-platsen

Ctrl+Skift+U eller dra filer från den lokala fönsterrutan till fjärrfönsterrutan i platsfönstret

Kommando+Skift+U eller dra filer från den lokala fönsterru-tan till fjärrfönsterrutan i plats-fö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

Spela upp insticksprogram


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 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

Bilaga A548

Arbeta med mallar

Infoga objekt

Historiepanelen


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 platsfönstret till dokument-fönstret

Dra filen från Finder eller platsfönstret till dokument-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


Öppna historiepanelen F9 F9

Starta/stoppa inspelning av kommando Ctrl+Skift+X Kommando+Skift+X

Spela upp inspelat kommando Ctrl+P Kommando+P

Kortkommandon 549

Öppna och stänga paneler

Visa hjälp

Ä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 *


Hjälpavsnitt för Använda Dreamweaver F1 F1

Referens Skift+F1 Skift+F1

Dreamweaver kundtjänst Ctrl+F1 Kommando+F1

Bilaga A550

Förteckning över kortkommandon

Obs! En asterisk (*) anger en outnyttjad tangentkombination. Kursiv stil anger systemkommandon.

Tangent-bordstecken

Ctrl (Windows) ellerKommando (Macintosh)

Ctrl+Skift (Win-dows) eller Kom-mando+Skift (Macintosh)

Ctrl+Alt (Windows) eller Kommando+Alternativ (Macin-tosh)

Ctrl+Skift+Alt (Win-dows) eller Kom-mando+Skift+Alternativ (Macintosh)

A Markera allt, Markera tabell

Infoga tabellkolumn Infoga namngivet ankare

*

B Fet (växla) Lägga till i bibliotek * *

C Kopiera * * Centrera

D Duplicera Hämta markerade filer eller mappar

Infoga Shockwave Director-film

Checka ut markerade filer eller mappar

E Redigera med extern redigerare

Redigera formatmall * *

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 Nytt fönster (Windows)Ny sida (Macin-tosh)

Ny sida (endast Win-dows)

* Ny platsmapp

O Öppna Öppna i ram * Öppna markerad platsfil

P Spela upp inspelat kommando

Styckeformat Spela upp instickspro-gram

Spela upp alla insticks-program

Q Avsluta * * *

R * Skapa rot Visa/dölj linjaler Högerjustera

Kortkommandon 551

S Spara Spara allt Dela upp tabellcell *

T Quick Tag Editor Visa sidtitlar i platskar-tan

Infoga tabell Lägga till objekt på tids-linje

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 instickspro-gram

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

* * *


* * *


* * *


* * *


* * *


* * *

7 * * * *

8 * * * *

9 * * * *

Tangent-bordstecken





Bilaga A552

- (minus) och _ (understreck)

Zooma ut platskartan Ta bort tabellkolumn * *

= och + Anpassa till fönster Zooma in platskartan * *

[ och { Minska indrag (Flytta en nivå ned)

Gör samma bredd (skikt)

* *

] och } Indrag (Flytta en nivå upp)

Gör samma höjd (skikt)

* *

> * Markera underordnad * *

< * Markera överordnad kod

* *

? och / * * * *

; och : * * * *

’ och ” * * * *

’och ~ * * * *

\ och | * * * *

Mellanslag Uppdatera tabellay-out

Infoga hårt mellanslag (Windows) (Alternativ+Mellanslag på Macin-tosh)

* *

Tangent-bordstecken





Kortkommandon 553

Funktions-tangent

Ingen änd-ringstangent

Skift Alt (Win-dows) eller Alternativ (Macintosh)

Ctrl (Win-dows) ellerKommando (Macintosh)


Ctrl+Alt (Windows) eller Kom-mando+Alternativ (Macintosh)

Ctrl+Skift+Alt (Windows) eller Kom-mando+Skift+Alternativ (Macintosh)

F1 Hjälp för Använda Dre-amweaver

Referens * Dreamweaver kundtjänst

Referenspane-len

* *

F2 Skikt Ramar * Objektpanelen * * *

F3 Sök igen (endast Win-dows)

Beteendepa-nelen

* Egenskapskon-trollen

* * *

F4 Visa/dölja fly-tande paneler

Minimera alla fönster (endast Windows)

Stänga fönster Stänga fönster (endast Macin-tosh)

* * *

F5 Platsfiler Uppdatera den lokala fönster-rutan

Uppdatera fjärrfönsterru-tan

Platskarta * * *

F6 * * * Växla till layout-läget

Växla till stan-dardvyn

* *

F7 * Kontrollera stavning

* * * * *

F8 * Kontrollera markerade län-kar

* Kontrollera län-kar på hela platsen

* * *

F9 * Tidslinje och lägga till huvudbildruta

* * * * *

F10 Kodkontrollen Historiepane-len

* * * * *

F11 Resurser CSS-format * HTML-format * * *

F12 Förhandsgran-ska i primär webbläsare

* Felsökning i primär webblä-sare

Förhandsgran-ska i sekundär webbläsare

* Felsökning i sekundär webbläsare

*

Bilaga A554

INDEX

AAbsolut mitten, justeringsalternativ

(bildegenskapskontroll) 267Absolut nederst, justeringsalternativ

(bildegenskapskontroll) 267absoluta sökvägar 350Active Server Pages (ASP) 536

koder, anpassa analys och utseende 532om 536redigera 346

ActiveX-kontrolleregenskaper 312infoga 311ändra storlek 268översikt 311

Aktivera in- och utcheckning av filer, alternativ 127All information, flik (Design Notes) 131allmänna inställningar 85Alt, bildegenskap 266alternativknappar 486Alt-text saknas, alternativ 507Andra nyckelord, alternativ (Kodfärger, inställningar)

339Ange bakgrundsfärg, alternativ (Rensa Word-HTML)

344ange dokumentegenskaper 146Ange färgschema, kommando 147ange målramar som

_blank 213_parent 213_self 213_top 213

Ange som hemsida, kommando 116Ange texten i ramen, åtgärd 459Ange texten i skiktet, åtgärd 460Ange texten i statusfältet, åtgärd 461Ange texten i textfältet, åtgärd 462animering

redigera Fireworks-animeringar 288

animeringaranvända på objekt 429förbättra 430kopiera och klistra in 428skapa 423tidslinjer 421utefter en komplex bana 425översikt 18

ankare, namngivna 358Ankare, objekt (objektpanelen) 359anonyma filsändningar 485anpassa Dreamweaver 509, 509–538

dialogrutor 524grunderna 86koder, tredjepart 532menyer 513objektpanelen 511startknappar och startfältet 73

anpassade format. Se formatmallarAnropa JavaScript, åtgärd 444ansluta till fjärrplatser

använda källkontrollsystem 123Anslutningshastighet, alternativ 72Använd brandvägg, alternativ 121Använd källformat, alternativ (Rensa Word-HTML,

kommando) 344Använd källformat, kommando 343Använd passiv FTP, alternativ 121Använd reguljära uttryck, alternativ 256Använd, alternativ (Kodformat, inställningar) 339använda Dreamweaver med Visual SourceSafe 124Använda Dreamweaver, bok 14använda färger på text 220AppleTalk-servrar 120arbetsflödesrapporter 136arbetsområde 68ASP. Se Active Server Pages

555

attributi webbläsarprofiler 527sökning 256Se även koder

audio. Se ljudautomatisera uppgifter 154Automatisk radbrytning, alternativ (Kodformat,

inställningar) 340automatisk sträckning (layout) 172Autospela, alternativ 422Autospela, alternativ (tidslinjepanelen) 423

BB och H, bildegenskaper 265bakgrund

genomskinlighet i 147sida, bild och färg 147

Bakgrund, alternativ (Kodfärger, inställningar) 338Baslinje, justeringsalternativ (bildegenskapskontroll)

267BBEdit-integrering (endast Macintosh) 346bearbeta formulär 494beroende filer

hämta 139skicka 140visa och dölja 117

beteenden 433, 433–468definierade 433kanal på tidslinjer 422kompatibilitet med webbläsare 442koppla 437och biblioteksposter 397och bilder 276och formulär 495och länkar 369och mallar 384och media 315och tidslinjer 440ta bort 440tredjepart 441utlösa 437åtgärder, skapa 441ändra 440

beteendepanelen 434biblioteksposter 392–399

egenskaper 399göra ändringsbara i dokument 397

inställningar 393lägga till på sidor 394redigera 394redigera beteenden i 397skapa 392som resurser. Se resurserta bort 396ändra markeringsfärger 393översikt 392

biblioteksposter, exportera från Fireworks 281bilder

använda beteenden på 276egenskaper 265externa bildredigerare 273format, som stöds 263förhandsladda (beteende) 457i tabeller 179infoga 264infoga i layoutvyn 167justera 235klickbara bilder 269kortkommandon 546redigera 273skalbarhet 268som resurser. Se resurserväxla (beteende) 465återställa växling (beteende) 466ändra källfil med tidslinjer 427ändra storlek visuellt 268

bildkontroll 269bildpunkter, genomskinliga i bakgrunden 147bildrutor per sekund (bps) 422bildskärmsstorlek, ändra storlek på sidor så att de passar 70bitmappar, ändra storlek 268

Se även bilderBLOCKQUOTE, kod 236BODY-kod 152Borttagbara tomma koder, alternativ 507bps (bildrutor per sekund) 422brandväggar

alternativ 121definiera värd och port 108

brutna länkar 502brytpunkter i felsökningsprogrammet för JavaScript

473bädda in ljud 308börja 20

Index556

CCache, alternativ (dialogrutan Platsdefinition) 98, 99celler. Se layoutceller, tabellcellerCellmellanrum, alternativ (i dialogrutan Infoga tabell)

178Cellutfyllnad, alternativ (i dialogrutan Infoga tabell)

178Centrering, alternativ (Kodformat, inställningar) 340CFML. Se ColdFusion Markup LanguageCGI

referensmaterial 24CGI (Common Gateway Interface)

skript 494checka in och ut filer 127–129

ångra en utcheckning 129översikt 127

Checka in/ut, alternativ 127ange en e-postadress 128ange ett utcheckningsnamn 128

Checka ut filer när du öppnar, alternativ 127CLASS, attribut 247ColdFusion Markup Language (CFML)

koder, anpassa analys och utseende 532och Dreamweaver 325redigera CFML-koder 346översikt 537

Common Gateway Interface (CGI). Se CGI 494Configuration, mapp

Behaviors, undermapp 524BrowserProfiles, undermapp 527Commands, undermapp 524Extensions.txt, fil 510menus.xml, fil 513Objects, undermapp 511SourceFormat.txt, fil 525ThirdPartyTags, undermapp 532

CSS-formatanvända anpassade 249attribut, konvertera till HTML 253class, attribut 247exportera 250skapa 247väljare 247

CSS-formatpanelen 251CSS-lager

exportera från Fireworks 280

Ddatum

infoga 229Definiera HTML-format, dialogruta 239Dela ram, kommandon 199Dela upp cell, kommando 192Design Notes

aktivera 130avaktivera 132för dokument och objekt 131för Fireworks-filer 135för mediaobjekt 296köra en rapport 137lägga till statusalternativ 132rapporter 136spara filinformation 130översikt 130

designvynordna vyer 327visa tillsammans med kodvyn 326

dialogrutor, anpassa 524Director, skapa Shockwave-filmer med 305distanshållarbild 175distanshållarbilder 174

inställningar 174dokument

ange egenskaper 146Design Notes, använda med 130förhandsgranska i webbläsare 500kontrollera länkar 502mallar, koppla loss från 387nytt 144sidtitel 146skapa 144skapa, baserade på mallar 385spara 145storlek och nedladdningstid 505söka 254text, lägga till 228öppna 144

Index 557

dokumentfönstretFönsterstorlek, popup-meny 70grunderna 69kodkontrollen, växla till 328kodväljare 70markera element 148namnlist 69ramar i 205sidstorlek och hämtningstid 70spela upp Navigator-insticksprogram 310startfältet 70söka efter text 254ändra storlek 70öppna dokument 144

dokumentrelativa sökvägarinställning 355om 351

dolda filer, visa och dölja 117Dra skikt, åtgärd 449Dreamweaver-bibliotek, exportera från Fireworks 281Dreamweavers diskussionsgrupp 16Dreamweavers kundtjänst 16dölja osynliga element 149

Eegenskaper

ActiveX-kontroller 312bilder 265dokument, ange 146Flash-filmer 304flera skikt 415hotspot-objekt 270Java-miniprogram 313kolumner, rader och celler 185layoutcell 170layouttabeller 171ramar 206ramuppsättningar 208Shockwave-filmer 306skikt 413tabeller 184visa 78ändra med beteenden 444

egenskapskontrollActiveX-kontroller, egenskaper 312biblioteksposter, egenskaper 399bilder 265Flash-filmer, egenskaper 304hotspot-objekt 270Java-miniprogram, egenskaper 313maximera 78Netscape Navigator-insticksprogram, egenskaper

309Shockwave-filmer, egenskaper 306visa 78åtgärda brutna länkar 504

elementjustera 267visa osynliga 541

enheter 230e-postadress

använda systemet för incheckning och utcheckning 128

e-postfiler 144e-postlänkar

skapa 360ändra 363

Excel. Se Microsoft Excel-filer, importera.exportera

biblioteksposter från Fireworks 281CSS-lager från Fireworks 280Fireworks-filer till Dreamweaver 280XML, kodnotationer 391

exportera format 250Exportera tabell, kommando 195externa formatmallar

länka till 245redigera 247skapa 245

externa länkar 502externa redigerare

BBEdit (endast Macintosh), integrering med 346bilder 273Fireworks. Se integrering av Dreamweaver och

FireworksHomeSite (Windows) 325HTML, översikt 345inställning 282media 294text, översikt 345

Index558

Ffavoritlista (resurspanelen) Se resurser 219favoritmappar 225fel i JavaScript-kod 472felaktiga koder

visa 325felsökning

klicka i låsta regioner 381Navigator-insticksprogram 311överföra filer 139

felsökningsprogram för JavaScript 469fönster 472köra 469logiska fel 472lägga till brytpunkter 473stega, stega till procedurslut, procedurstega 474syntaxfel 471variabellista 475varningsruta 470visa variabler 475

felsökningsprogram för JS. Se felsökningsprogram för JavaScript

felsökningsprogram. Se felsökningsprogram för JavaScript

fet text 233filer

hantera 104hämta 138hämta från fjärrplats 138ladda upp 139skicka 139synkronisera lokala platser och fjärrplatser 141söka 254text 144typer, standard 510visa i platsfönstret 111överföra med FTP 120

filformat, bilder 263fillistkolumner

använda 134använda med Design Notes 133lägga till en kolumn 135ta bort 135ändrar ordningsföljd 134

filmerinfoga 293

filtyperFlash-filer 296

filtyper/redigerare, inställningar 295Fireworks

Design Notes i 135Fjärrfiler, alternativ 110Flash-filmer

egenskaper 304infoga 303kontrollera 448som resurser. Se resurserändra storlek 268översikt 296

Flash-innehållöversikt 296

Flash-knappobjekt 297, 302egenskaper 301förhandsgranska 299ändra 299

Flash-objektsegenskaper 301Flash-textobjekt

egenskaper 301förhandsgranska 299infoga 300

flytande paneler 78Se paneler

format 243använda anpassade format 249CSS-format till HTML-kod, konverteringstabell

253HTML 238i mallar 384konvertera till HTML 252krockande 250skapa 247Se även formatmallar

formatera HTML-källkodanpassa 525inställningar 338

Formatera tabell, kommando 187formatmallar

externa 245redigera externa formatmallar 247Se även formatöversikt 243

Index 559

formulärbearbeta 494beteenden, använda med 495fält, validera 467hoppmenyer, skapa 364infoga tabeller 493lägga till flera objekt 493lägga till i dokument 480lösenordsfält 482objekt, lägga till 481skapa 479skapa filfält 485Skicka, knappar 492skript på klientsidan 494skript på serversidan 494översikt 477

fotografier 263FTP

ange värdkatalog 122ansluta till en webbserver 120felsökning 126logg 139överföra filer med 120

FTP, alternativ 120FTP-värd, fält 121funktioner, nya i Dreamweaver 22fält

filfält 485formulärfält 481skapa dolda fält 485skapa textfält 482skicka filer till en server 485

färgbakgrund för ram 212färgrutor 83kontrast 147pipett, använda 83sida, bakgrund 147skapa färgresurser 226som resurser. Se resurserstandard för sidans text 147text, ändra 220, 235välja 83webbsäker 84

Färg på aktiv länk, alternativ (Sidegenskaper) 147Färg på besökt länk, alternativ (Sidegenskaper) 147Färg, kommando 235färgblindhet 147färghjulet (systemfärg), knapp 83Färgkuber, färgpalett 83färgruta, alternativ 83färgrutor, färg 83färgväljare

Dreamweaver 83system 83

Fäst mot webbsäkra, färgpalett 83fönster

kortkommandon 550Se även kontroller, paneler

Fönsterstorlek, alternativ 72Fönsterstorlek, popup-meny 70förgreningar, visa och dölja på platskartan 118förhandsgranska i webbläsare

kortkommandon 546, 547översikt 500

förhandsgranska i webbläsare, inställningar 501Förhandsgranska i webbläsare, kommando 500Förhandsgranska med lokal server, kommando 353Förhandsladda bilder, åtgärd 457Förhindra överlappning av skikt, kommando 419föräldralösa filer 502

Ggeneratorer, översikt 305genomgång, översikt 13genomskinliga i bakgrunden, bildpunkter 147Genomstruken (standardfärg), knapp 83GIF-bilder

användningsområden för 263som hjälpbild 151

grafik. Se bildergrunderna i Dreamweaver 20Grundläggande, flik (Design Notes) 131Gråskala, färgpalett 83Gå till bildruta på tidslinje, åtgärd 466Gå till URL, åtgärd 452Gå-knapp, associera med en hoppmeny 454

Index560

HHalvton, färgpalett 83hantera länkar 361hantera resurser. Se resurserHEAD-delen, redigera innehållet i 152hemsida, inställning 116historiepanelen

automatisera uppgifter med 154kommandon, skapa från historiesteg 158Maximalt antal historiesteg, inställning 81rensa historielistan 82steg, kopiera och klistra in 157steg, tillämpa på andra objekt 155steg, upprepa 154översikt 80

Hjälp 14Dreamweavers diskussionsgrupp 16Dreamweavers kundtjänst 16

hjälpkortkommandon 550

hjälpbild 151hjälpsidor för Dreamweaver 14HomeSite (Windows) 325Hoppmeny Gå, åtgärd 454Hoppmeny, åtgärd 453hoppmenyer 364

Gå-knappar 454Gå-knappar, lägga till automatiskt 364lägga till menyalternativ 364redigera 453skapa en menyuppmaning 364ändra menyalternativ 365

hotspot-objektanvända beteenden på 276egenskaper 270i klickbara bilder 269markera flera i en klickbar bild 271ändra storlek 271

HR (vågrät linje), infoga 237HTML

infoga från Fireworks i Dreamweaver 278kopiera och klistra in från Fireworks till

Dreamweaver 279uppdatera Fireworks HTML som monterats i

Dreamweaver 289HTML-dokument. Se dokument 144

HTML-filerimportera 144

HTML-formatanvända 240använda på andra platser 242Nytt format, ikon 241redigera 242skapa 240, 240–241ta bort 240ta bort från panelen 240visa 239ändra 242

HTML-kodmarkera i dokumentfönstret 148referensmaterial 24visa med kodkontrollen 82

HTML-koder. Se koder 318HTML-korrigeringar, loggfil 343HTML-källa, alternativ 256HTML-källkod

alternativ 328CSS-attributskonvertering 253externa redigerare 345formatera i befintliga dokument 343formateringsinställningar, ange 339formateringsinställningar, översikt 338formateringsprofil 525koder, ta bort 337kodformat 243kodfärgsinställningar 338kodsökning 256kopiera och klistra in, allmänt 231omskrivningsinställningar 341redigera med BBEdit 346referens 323rensa 342rensa MS Word-HTML 343skriva och redigera 329struktur 318söka 254, 256översikt 317

HTML-textredigerare. Se externa redigerareHTTP-adress, fält 98, 99huvudbildrutor

skapa 423översikt 422

huvudceller, formatera 186

Index 561

hämta filer från en fjärrserver 138Hämta fler beteenden, kommando 441Hämta nyare filer från fjärrkatalogen, alternativ 141Hämta och skicka nyare filer, alternativ 141Hämta, kommando 138hämtningstid 70händelsehanterare. Se händelserhändelser

definierade 433tillgängliga för olika webbläsare och objekt 434utlösa åtgärder 437ändra i beteenden 440

Höger, justeringsalternativ (bildegenskapskontroll) 267

IIgnorera skillnader i mellanrum, alternativ 256importera

Word-HTML-filer 144Importera tabelldata, kommando 180Importera Word-HTML, kommando 144, 343index, hjälpen 14indrag av text 236Indrag, alternativ (Kodformat, inställningar) 339Indragsstorlek, alternativ (Kodformat, inställningar)

340infoga

ActiveX-kontroller 311bilder 264datum 229Fireworks HTML i Dreamweaver 278Fireworks-bilder i Dreamweaver 278Flash-filmer 303Flash-knappobjekt 297Flash-textobjekt 300generatorer 305Java-miniprogram 313mediaelement 293resurser 219Server-Side Includes 400Shockwave-filmer 306specialtecken 230överrullningsbilder 272

Infoga bildfält, kommando 492Infoga e-postlänk, dialogruta 360Infoga Flash-knapp, dialogruta 297Infoga Flash-text, dialogruta 300

Infoga hoppmeny, dialogruta 364Infoga namngivet ankare, dialogruta 359Infoga navigationsfält, dialogruta 367infoga resurser. Se resurserInfoga tabelldata, kommando 180Ingen, alternativ 120ingenstanslänkar

skapa 360ändra 363

innehåll i NOFRAMES 213innehåll, hjälpen 14innehåll, lägga till i tabeller 179installera Dreamweaver 12insticksprogram

felsökning 311kontrollera 446kortkommandon för uppspelning 548känna av 499Netscape Navigator 309spela upp i dokumentfönstret 310ändra storlek 268

inställningarallmänna 85bibliotek 393externa redigerare 294filtyper/redigerare 295flytande paneler 79förhandsgranska i webbläsare 501Förhandsgranska med lokal server (rotrelativa

länkar) 353kodformat 339kodfärger 338kodomskrivning 341layout 175mallar 379objektpanelen 77ordlista för stavningskontroll 254osynliga element 150paneler 79plats 107Quick Tag Editor 337skikt 408Starta och redigera 283statusfältet 72teckensnitt/kodning 85uppdatera länkar 361översikt 84

Index562

integrera Dreamweaver med andra program 86integrera med SourceSafe 123integrera med WebDAV 123integrering av Dreamweaver och Fireworks

exportera CSS-lager 280exportera Dreamweaver biblioteksposter 281extern redigerare, inställning 282infoga Fireworks-filer 277Optimera bild i Fireworks, kommando 286redigera Fireworks-animeringar 288skapa webbfotoalbum 290Starta och redigera, inställningar 283uppdatera Fireworks HTML 289utformningsanteckningar 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 18introduktion till Dreamweaver 20

JJava-miniprogram

egenskaper 313infoga 293, 313ändra storlek 268översikt 313

JavaScriptfiler 144infoga skript 330köra 444utöka Dreamweaver 531varningar 456åtgärder 434

JavaServer Pages (JSP) 536JPEG-bilder


JSP (JavaServer Pages) 536

justera 267alternativ 267hjälpbild 152sidelement 267skikt 411text 235

Justera hjälpbild, kommando 152Justera position, kommando 152Justera, bildegenskap 266

KKant, bildegenskap 266kanter

i ramar 211lägga till i tabeller 184tabeller, ta bort 178

kapsla 408ramar 202skikt 407

Kapsla när det skapas inom ett skikt, alternativ 408katalogstruktur, plats Se platserkategorier

inställningar 84resurser 216

klammerparenteser, kontrollera 332Klickbar bild, bildegenskap 266klickbara bilder

hotspot-objekt 269markera flera hotspot-objekt 271skapa för klientsidan 269översikt 269

klickbara bilder på serversidan 269klistra in historiesteg 157Klistra in som text, kommando 228knappar

Gå-knappar 454skapa formulärknappar 491Skicka-knappar, grafiska 492

kodformateringsinställningar 338redigera med BBEdit 346

Index 563

koder 85använda 234ASP 346BLOCKQUOTE 236BODY 152, 319CFML 346felaktiga 325HEAD 319HTML 318i webbläsarprofiler 527markera 148menus.xml, syntax 518OL 236radbryta 333redigera 333specifikationer 532sökning 256ta bort 337TABLE 183TAGSPEC 532textformatering 322tredjepart, anpassa 532UL 236XML 325överlappande 325

kodkontrollendokumentfönstret, växla till 328öppna 328

Kodspecifik, alternativ (Kodfärger, inställningar) 339kodvyn

alternativ 328ordna vyer 327skriva och redigera kod 329öppna 326öppna icke-HTML-filer 333

Kolumner, alternativ (i dialogrutan Infoga tabell) 178kolumner, rader och celler

bakgrundsfärg, lägga till 186formatera 185lägga till och ta bort 189

kolumnhuvudmeny 173kombinera flytande paneler 78Kombinera kapslade -koder där det är möjligt,

alternativ 342Kombinerbara kapslade font-koder, alternativ 507

kommandonanvända på snabbmeny 74, 75skapa, från historiesteg 158spela in 159ändra namn 516

Kommandon-menyn, redigera 514Kommentarer, alternativ (Kodfärger, inställningar) 338kommentarer, infoga 323kontroller

bildkontroll 269egenskapskontroll 78kortkommandon 550Se även paneleröppna och stänga med startfältet 72

Kontrollera i målwebbläsare, kommando 498Kontrollera instick, åtgärd 446kontrollera klammerparenteser 332kontrollera länkar 502Kontrollera länkar på hela platsen, kommando 503Kontrollera Shockwave eller Flash, åtgärd 448Kontrollera stavning, kommando 254Kontrollera webbläsare, åtgärd 445konventioner 21Konvertera skikt till tabell, kommando 418Konvertera tabeller till skikt, kommando 420kopiera historiesteg 157kopiera och klistra in, Fireworks HTML 279Koppla loss från mall, kommando 387Koppla loss från original, alternativ 397kortkommandon 539, 539–553

redigera 86redigera, i filen menus.xml 517

kryssrutor 486kursiv 233Källa, bildegenskap 265Källa, skriptegenskap 331källformateringsprofil 525känna av webbläsare och insticksprogram 499

LLadda fråga, knapp 259ladda ned

beteenden 441storlek, uppskattad tid 505

ladda upp filer 139

Index564

layout 161, 161–175ange bredd 172automatisk sträckning 172bakgrund 175cellfyllning 171cellmarkering 175cellmellanrum 171distanshållarbilder 174distanshållare, inställningar 174fast bredd 172flytta layoutceller och tabeller 168formatera layoutceller 170formatera layouttabeller 171infoga distanshållare automatiskt 175inställningar 175kapslade layouttabeller 166kolumnhuvudmeny 173konsekventa bredder 171layoutceller och tabeller 162lägga till innehåll i 167markera layoutceller och tabeller 168nollställ höjdattribut 171nollställa cellhöjder 168rita layoutceller och tabeller 163stödraster 166ta bort alla distanshållare 171ta bort kapsling 171tabellkontur 175växla till 161ändra storlek på layoutceller och tabeller 168översikt 161

layout, planera 95Se även layout, mallar

layoutceller 162bakgrundsfärg 170flytta 168formatera 170ingen radbrytning 170inställningar 175justering 170markera 168markering 175nollställa höjder 168rita 163ändra storlek 168

layouttabeller 162bakgrund 175bakgrundsfärg 171cellfyllning 171cellmellanrum 171flytta 168formatera 171inställningar 175justering 171kapslade 166konsekventa bredder 171kontur 175markera 168nollställa höjder 171rita 163ta bort distanshållare 171ta bort kapsling 171ändra storlek 168

lektioner, översikt 13linjaler 151listor

skapa 232ljud 307, 307–308

lägga till på en sida 307spela upp 456

L-mellanr. och V-mellanr., bildegenskaper 266logiska fel i JavaScript-kod 472lokal rotmapp 97Lokal rotmapp, fält 98, 99Lokala filer, alternativ 110lokala platser Se platser 97Lokalt/Nätverk, alternativ 120Låg bild, bildegenskap 266låsta regioner

klicka i 381Lägg till bildruta, kommando 423Lägg till objekt i bibliotek, kommando 393Lägg till objekt på tidslinje, kommando 423Lägg till/ta bort Netscapes storleksjustering,

kommando 408lägga till

bildrutor på en tidslinje 426länkar 220objekt på en tidslinje 424tillägg i Dreamweaver 89

lägga till brytpunkter 473Länk, bildegenskap 266

Index 565

länkaankare 358dokument 355till dokument med peka-på-fil-ikonen 356till ett namngivet ankare med peka-på-fil-ikonen

359till externa CSS-formatmallar 246

Länka extern formatmall, dialogruta 246Länka till befintlig fil, kommando 115Länka till ny fil, kommando 116länkade dokument, öppna 504länkar

använda på markering 220cache-fil 361kontrollera 502kortkommandon 546mål- 354platskarta 362relativa till dokument 355relativa till platsrot 355ta bort 362testa 501till ankare 358till dokument 354till formatmallar 245uppdatera 361åtgärda 503ändra på hela platsen 363ändra ramar med 212öppna källa 362

Länkfärg, alternativ (Sidegenskaper) 147Länkkontroll, dialogruta 503läsa in tillägg igen 511

MMac OS, färgpalett 83Macromedia Director, skapa Shockwave-filmer med

305makron (skapa kommandon) 158mallar 371–391

använda beteenden 384använda format 384använda på befintliga dokument 385använda på dokument 220använda tidslinjer 384definiera ändringsbara regioner 378dokument baserade på, skapa 385göra regioner ej ändringsbara 384inställningar 379klicka i låsta regioner 381koppla loss dokument från 387kortkommandon 549redigera 373, 374sidegenskaper 375skapa 373skapa mallar för Flash-knappar 302skapa nya dokument med 385skapar nya dokument med 145som resurser. Se resursersöka efter ändringsbara regioner 387Templates, mapp 373visa regioner 380XML 389ändra 388ändra markeringsfärger 379ändra namn 374ändringsbara kontra låsta regioner 377översikt 371

MAP, kod 269mappar

rotmapp 97söka 254

mappar, favoriter 225markera

layoutceller och tabeller 168objekt i dokumentfönstret 148ramar och ramuppsättningar 203skikt 409

markeringsrutor för osynliga element 149Matcha gemener/VERSALER, alternativ 256

Index566

mediaelementinfoga 293parametrar 314

menus.xml, filsyntax 518

menyer (listrutor) i formulärskapa 490

menyer, anpassa 513Microsoft Excel-filer, importera 180Microsoft Word

filer, öppna 144Microsoft Word-HTML

importera 343rensa 343

miniprogram. Se Java-miniprogramministartknappar. Se startknappar och startfältet 70Mitten, justeringsalternativ (bildegenskapskontroll)

267MPEG-filmer

som resurser. Se resursermultimedia. Se mediaMål, bildegenskap 266målområde för länkar

i dokument 355öppna dokument i ett nytt fönster 355

målwebbläsarekonvertera filer till 3.0-kompatibla 420kortkommandon 546, 547webbläsarprofiler 527

NNamn, egenskap (bildegenskapskontroll) 265Namngivet ankare, kommando 359namngivna ankare

skapa 358Namnlösa dokument, alternativ 507navigationsfält

bildlägen 366infoga i en tabell 368lägga till bilder 367skapa 366visa lodrätt på en sida 368visa vågrätt på en sida 368ändra element 369

navigeringsplanering för en webbplats 95Nederst, justeringsalternativ (bildegenskapskontroll)

267Netscape 4-kompatibilitet för skikt 408Netscape Navigator-insticksprogram

egenskaper 309felsökning 311spela upp i dokumentfönstret 310

NFS-servrar 120nya funktioner i Dreamweaver 22Nytt från mall, kommando 145, 385Nytt, kommando 144

Oobjekt

infoga 228infoga med objektpanelen 76kortkommandon 549kryssrutor och alternativknappar 486lägga till Design Notes 131lägga till i formulär 481skapa 512

objektpanelenanpassa 511inställningar 77kategorier 76kombinera 78läsa in igen 511översikt 76

OL, kod 236Omdefiniera HTML-kod, alternativ 247onBlur, händelse 467optimera

Fireworks-bilder i Dreamweaver 286Optimera bild i Fireworks, kommando 286ordbehandlare, filer skapade i 144ordna vyer 327osynliga element

inställningar 150kommentarer 323markera 148skript 330visa och dölja 149

Index 567

PPackage Manager 89paletter, färg 83paneler

beteendepanelen 434flytande paneler, inställningar 79historiepanelen 80kodkontrollen 82kombinera 78kortkommandon 550objektpanelen 76startfältet 72öppna och stänga med startfältet 72

Parametrar, dialogruta 314personlig stavningsordlista 254PHP Hypertext Preprocessor 537pipett 83planera

design 95Platsens filer, vy 111platser

cache 361checka in och ut filer 127Design Notes, använda med 130fjärr-, definiera 120fjärr-, felsökning av inställningar 126fjärr-, rotmapp 122fjärr-, skapa 119fjärr-, söka efter filer på 119fjärr-, åtkomstalternativ 120förhandsgranska i webbläsare 500kontrollera länkar 502kortkommandon 547lokala jämfört med fjärrplatser 91lokala, associera en fjärrserver med 120lokala, rotmapp 97lokala, skapa 97lokala, söka efter filer på 119lokala, visa 109lägga till filer och mappar 111markera uppdaterade filer i 111planera navigering 95rapporter, köra 136redigera befintliga 99redigera fjärrplatser 100referensmaterial 24skapa nya 97

stora, resurser på 223struktur och navigation 103söka efter filer på 254ta bort från platslistan 101visa 108webbläsarkompatibilitet 93, 498åtgärda brutna länkar 503ändra länkar på hela platsen 363ändra visning 110

platsfönstergrunderna 108Hämta, kommando 138Platsens filer, vy 105platskartevy 105platskartor 109Skicka, kommando 139söka efter filer 119verktygsfält, alternativ 105visa lokala platser 109ändra visning 110översikt 104

platsfönstretsöka efter text 254

platsinställningar 107platskartor

Ange som hemsida, kommando 116dölja en förgrening 118kortkommandon 548lägga till filer på en plats 115Länka till befintlig fil, kommando 115Länka till ny fil, kommando 116länkar 362markera filer som dolda 117markera flera sidor 115redigera sidor 115spara en bildfil 118ta bort länkar 363uppdatera efter ändringar 117Uppdatera lokalt, kommando 117utöka en förgrening 118visa 109visa beroende filer 117Visa beroende filer, alternativ 117

Index568

visa dolda filer 117visa en förgrening 118Visa sidtitlar, alternativ 116ändra länkar 362ändra namn på sidor 116

platslistauppdatera 218

Platsnamn, fält 98, 99platsplanering 91

mål 91publik 91resurser 96struktur 94

platsrapporter 136platsrotsrelativa sökvägar Se rotrelativa sökvägarPNG-bilder


Popup-meddelande, åtgärd 456primär webbläsare 501profiler

HTML-källformat 525webbläsare 527

program, andra, använda med Dreamweaver 86proportioner, bevara 268punktade listor, skapa 232

QQuick Tag Editor

attribut, tipslista 336inställningar 337öppna 333översikt 333

QuickTime-filmerinfoga 309som resurser. Se resurser

RRadbrytningar, alternativ (Kodformat, inställningar)

340Rader, alternativ (i dialogrutan Infoga tabell) 178ramar 197, 197–214

anvisningar för att skapa 199använda länkar 212beteenden, använda med 214egenskaper 206kanter 211kapslade 202kortkommandon 544markera 203mål- 212panel 203skapa 199, 201spara 205ta bort 201webblä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 203ramuppsättningar 199–211

egenskaper 208fördefinierade, infoga 200kanter 211kapslade 202markera 203målområde för länkar i 355namnge 206spara 205Se även ramar

rapporter 136arbetsflöde 136skapa 506testa en plats med 506Utcheckad av 136

rapporter för incheckning/utcheckning 136redigera

Flash-knappobjekt 299kortkommandon 86mallar 373resurser 222

Index 569

Redigera formatmall, kommando 247Redigera innehållet i NOFRAMES, kommando 213redigera kod (kodvyn eller kodkontrollen) 329Redigera teckensnittslista, kommando 236Redigera, knapp (bildegenskapskontroll) 266redigerare. Se externa redigerarereferensmaterial 24referenspanelen 323regioner, låsta

klicka i 381reguljära uttryck 260Rensa <font>-koder, alternativ 344Rensa CSS-format, alternativ 344Rensa HTML, kommando 342Rensa Word-HTML, kommando 343Reserverade nyckelord, alternativ (Kodfärger,

inställningar) 338resurser 215, 215–226

använda färger på text 220favoritlistor 223favoritmappar 225färg, skapa 226infoga 219kategorier 216lägga till i favoritlistan 219markera flera 221planera 96redigera 222uppdatera platslista 218URL-adresser, skapa 226öppna resurspanelen 217översikt 215

resurser för information om webbtekniker 24rita

layoutceller och tabeller 163skikt 405

rotmappfjärr 122lokal 97

rotrelativa sökvägarFörhandsgranska med lokal server, inställningar

353inställning 355om 352

Roundtrip HTML 325rubrikkoder 234rullningslistor 489

Rätta till felaktigt kapslade koder, alternativ (Rensa Word-HTML) 344

Rätta till felaktigt kapslade och öppna koder, alternativ (Kodomskrivning, inställningar) 341

Ssammanhangsberoende menyer. Se snabbmenyersekundär webbläsare 501Server-Side Includes 399

infoga 400redigera 401översikt 399

Serveråtkomst, alternativ 120servrar

AppleTalk 120definiera fjärrplatser 120felsökning av inställningar 126NFS 120åtkomstalternativ 120

Shockwave-filmeregenskaper 306infoga 306kontrollera 448som resurser. Se resurserändra storlek 268översikt 305

sidegenskapertitlar, ändra 146

sidlayout. Se layout, mallarsidor

bakgrundsbild 147design 95Design Notes, använda med 130egenskaper, och mallar 375färg 147förhandsgranska i webbläsare 500nedladdningstid, uppskattad 505standardtextfärger 147storlek 505ändra titel 146

sidstorlek, ändra storlek så att de passar bildkskärm 70skapa

mallar 373Skapa alternativknappar 488skapa färger och URL-adresser 226skapa nya mallar för Flash-knappar 302skapa rapporter 506

Index570

Skapa webbfotoalbum, kommando 290skicka filer till en fjärrserver 139Skicka nyare filer till fjärrkatalogen, alternativ 141Skicka, knappar 492Skicka, kommando 139Skiftläge för attribut, alternativ (Kodformat,

inställningar) 340Skiftläge för koder, alternativ (Kodformat,

inställningar) 340skikt 403, 403–431

aktivera 412ankarpunkter 150dragbara 451egenskaper 413egenskaper för flera 415flytta 411fästa mot stödraster 412förhindra överlappning 419hantera 408infoga 405inställningar 408justera 411kapsla 407konvertera för 3.0-webbläsare 420konvertera till tabeller 418kortkommandon 545markera 409markera flera 415markörer, visa 405placera 413rita flera 405skapa 405synlighet 417vid 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 406skivobjekt

redigera Fireworks-tabellskivor i Dreamweaver 285

skjutreglagekontroller, skapa 449

skriptange 330balanserade klammerparenteser 332redigera 331redigera externa 330som resurser. Se resurservisa funktioner 332visa i dokument 150

skriptlänkarskapa 360ändra 363

Skriv aldrig om kod i filer med tillägg, alternativ (Kodomskrivning, inställningar) 341

skriva kod (kodvyn eller kodkontrollen) 329Slinga, alternativ 422Slå samman celler, kommando 191snabbmenyer 74, 75

anpassa 515snabbtangenter, redigerare 86SourceFormat.txt, fil 338SourceSafe-integrering 123spara

dokument 145filer i ramar och ramuppsättningar 205sökning 259

Spara alla ramar, kommando 206Spara fråga, knapp 259Spara ram som, kommando 205Spara ram, kommando 205Spara ramuppsättning som, kommando 205Spara ramuppsättning, kommando 205Spara som mall, kommando 373Spara, kommando 145specialtecken

infoga 230översikt 230

Specialtecken, alternativ (Kodomskrivning, inställningar) 341

spela in kommandon 159Spela in skiktväg, kommando 425spela upp Flash-objekt 299Spela upp ljud, åtgärd 456Spela upp tidslinje, åtgärd 467spela upp tidslinjer i en slinga 426Spela upp, knapp 155Språk, skriptegenskap 331

Index 571

Standard för kod, alternativ (Kodfärger, inställningar) 338

standardfiltyp, ändra 510Standardfärg, knapp 83staplingsordning

skikt 416ändra med tidslinjer 427

starta Fireworks från Dreamweaver. Se integrering av Dreamweaver och Fireworks

Starta och redigerainställningar 283

startfältetknapparnastartfältet 72

startknappar och startfältetanpassa 73standardknappar 70

statusfältetange text (beteende) 461Fönsterstorlek, popup-meny 70inställningar 72översikt 70

stavningkontrollera 254ordlistor, redigera 254

stega genom kod 474Stil, undermeny 233Stoppa tidslinje, åtgärd 467Strängar, alternativ (Kodfärger, inställningar) 339styckekoder 234Ställ in navigationsfältets bild, åtgärd 458stödraster

fästa 166fästa skikt mot 412mellanrum 166som guide 151visa 166, 412

synkronisera lokala platser och fjärrplatser 141synliga hjälpmedel

hjälpbild 151linjaler 151översikt 150

syntax i menus.xml 518syntaxfel 471systemets färgväljare 83Systemets färgväljare, knapp 83

systemkravMacintosh 12Windows 12

Sök efter, alternativ 255Sök i, alternativ 255söka

Dreamweavers hjälp 15efter filer 254HTML-koder och -attribut 256kortkommandon 543reguljära uttryck 260spara söksträngar 259text i filer 254text i HTML-källkod 256text inom vissa koder 258

söka och ersätta. Se sökasökvägar

absoluta 350dokumentrelativa 351rotrelativa 352

TTa bort bildruta, kommando 423ta bort bildrutor från en tidslinje 426Ta bort Dreamweaver-HTML-kommentarer, alternativ

342Ta bort extra avslutande koder, alternativ

(Kodomskrivning, inställningar) 341Ta bort HTML-kommentarer från annat program än

Dreamweaver, alternativ 342Ta bort markerat format, alternativ 240Ta bort specifik(a) HTML-kod(er), alternativ 342Ta bort styckeformat, alternativ 240Ta bort tidslinje, kommando 428Ta bort tomma HTML-koder, alternativ 342Ta bort uppmärkning av ändringsbar region,

kommando 384Ta bort Word-specifika koder, alternativ 344Ta bort överflödiga kapslade koder, alternativ 342Tabbstorlek, alternativ 340tabellceller

bakgrundsbild, lägga till 186bakgrundsfärg, lägga till 186dela upp 191formatera 185huvudceller, ange 186kopiera och klistra in 193

Index572

slå samman 191Se även layoutceller, tabeller

tabelldata, importera 180tabeller 493

celler, dela upp 192egenskaper 184formatera 183förinställd design för 187HTML-koder 183importera 180Ingen radbr., alternativ 186justera 186justera rader och kolumner 188kapsla 190kolumner, rader och celler 185konvertera från skikt 418kortkommandon 544lägga till bakgrundsbilder i 185lägga till bakgrundsfärg i 185lägga till innehåll i 179lägga till kanter i 184lägga till och ta bort rader och kolumner 189markera element 181nollställa cellbredd och cellhöjd 189Se layoutabellerSe även layoutlägetskapa 178slå samman celler 192sortera 194Se även kolumner, rader och cellerändra kolumnbredd 188ändra storlek 188översikt 177

tabellkanterbredd 185färg 185

Tabellrader och -kolumner, alternativ (Kodformat, inställningar) 339

tangentbord, kortkommandon. Se kortkommandontecken, special 230teckensnitt

kodning, ange teckensnitt för 85ändra egenskaper 233ändra kombinationer 236

teckensnitt/kodning, inställning 85testa en plats med kommandot Rapporter 505

textexterna redigerare. Se externa redigerareformatera 227formatera koder 322formatera med HTML-format 238färg, ändra 235indrag 236justering 235kortkommandon för formatering 543kortkommandon för redigering 542lägga till i dokument 228standardfärg på sidor 147söka i dokument 254ändra färg på 220, 235ändra teckensnittskombinationer 236

Text, alternativ (Kodfärger, inställningar) 338textfiler

öppna 144textfält, ange text med beteenden 462Textfärg, alternativ (Sidegenskaper) 147textredigerare

filer skapade i 144textredigerare. Se externa redigeraretidslinjepanelen 422tidslinjer

animeringstips 430flera 428huvudbildrutor 423i mallar 384komplexa banor 425koppla beteenden 440kortkommandon 545lägga till objekt på 424lägga till och ta bort bildrutor 426skapa 423slinga 426spela upp automatiskt 426spela upp och stoppa med beteenden 467styra med beteenden 430uppspelningshuvud 422ändra 426ändra bildkällfil 427ändra skiktegenskaper 427

tillägg 89läsa in igen 511

Tillämpa automatiskt, alternativ (HTML-formatpanelen) 240

Index 573

Tillämpa mall på sida, kommando 385titlar

ändra 146tredjepartskoder

anpassa 532undvika omskrivning 537

typografiska konventioner 21

UUL, kod 236understruken 233uppdatera

platslista (resurspanelen) 218Uppdatera aktuell sida, kommando 388, 395Uppdatera den lokala fillistan automatiskt, alternativ

98, 99Uppdatera HTML

kommando 289uppdatera länkar 361Uppdatera sidor, kommando 388upprepa steg 154uppspelningshuvud 422URL

som resurser. Se resurserURL Se sökvägarURL-adresser

använda på markering 220skapa URL-resurser 226

USEMAP, attribut 269utforma sidor 95utformningsanteckningar, för integrering av

Dreamweaver och Fireworks 283Utöka Dreamweaver, bok och hjälp 16utökning

beteenden från tredjepart 441JavaScript 531översikt 530

VValidera formulär, åtgärd 467variabellista 475Varna vid rättning och borttagning av koder, alternativ

(Kodomskrivning, inställningar) 341VBScript 330verktygsfält

dokumenttitlar, ändra 146visa

hjälpbild 151innehåll under HEAD 152kodvyn och designvyn 326ordna vyer 327osynliga element 149platser 109skikt 417ändringsbar och låst HTML-källkod i mallar 382ändringsbara och låsta regioner i mallar 380

Visa layouttabellens flikar, alternativ 162Visa logg vid slutförande, alternativ 342visa osynliga element 149visa sidtitlar i platskartan 116Visa startknappar i statusfältet, alternativ 72Visa-dölj skikt, åtgärd 463visningsalternativ

flytande paneler 79teckensnitt 85

Visual SourceSafeintegrera med Dreamweaver 124

vågräta linjer, infoga och ändra 237vägkarta (var du ska starta) 20Välj nyare fjärr, kommando 141Välj nyare lokalt, kommando 141Vänster, justeringsalternativ (bildegenskapskontroll)

267Värdkatalog, fält 122Växla bild, åtgärd 465Växla bildåterställning, åtgärd 466

Index574

Wwebbdesign, nivåer av erfarenhet i 20webbfotoalbum, skapa 290webbläsare

3.0-kompatibla filer 420färger, säkra 84förhandsgranska i 500kompatibilitet, planera 93kompatibilitet, testa 498känna av 499mål- 498och CSS-format 252primär, definiera 500profiler, redigera 527profiler, skapa 529sekundär, definiera 501versioner, kontrollera 445

Webbläsarstd, justeringsalternativ (bildegenskapskontroll) 267

webbserverinfo 120webbservrar. Se servrarWebDAV-integrering 123Windows OS, färgpalett 83Word-HTML. Se Microsoft Word-HTML

XXML 390

i mallar 389koder 325kodnotationer vid export 391menus.xml, fil 518TAGSPEC, kod 532översikt 390

ZZ-Index, alternativ (för skikt)

ändra staplingsordning 416

ÅÅsidosätt skiftläget för, alternativ (Kodformat,

inställningar) 340återanvända

biblioteksposter 394mallar 385sökning 259

Återställ hjälpbild, kommando 152Återställ origo, kommando 151Återställ storlek, bildegenskap 266åtgärder 433

definierade 433ingår i Dreamweaver 442skapa 441som ingår i Dreamweaver 468styra tidslinjer 430välja på beteendepanelen 437webbläsarkompatibilitet 442Se ä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 268layoutceller och tabeller 168ramar 210sidelement 268skikt 410tabellceller 188

Ööndra storlek på Fireworks-bilder i Dreamweaver 287öppna

andra filtyper än HTML som standard 510dokument 144textfiler 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 272skapa en länk 272testa 273

Överrullningsbild, textfält 272översikt över Dreamweaver 11Överst i text, justeringsalternativ

(bildegenskapskontroll) 267Överst, justeringsalternativ (bildegenskapskontroll)

267

Index576

Documents

Använda Dreamweaver - stefan · PDF file2 Varumärken Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,