Kode og tabeller
Dreamweaver er en populær HTML-editor i What-You-See-Is-What-You-Get-klassen. Den har masser af muligheder, og her giver vi ti tips og tricks, der kan gøre arbejdet med websiderne lidt lettere.
1. Skift mellem kode og design
Når man vælger menuen Windows > Code Inspector (eller trykker på F10) åbnes Dreamweavers kodeeditor. Men det er meget nemmere at åbne koden i designvinduet. Det gøres ved at klikke Ctrl + Tab. I modsætning til Code Inspector behøver man ikke at klikke i vinduet, før man kan begynde at skrive HTML. Man vender tilbage til design ved at klikke Ctrl + Tab igen. Tricket virker også, hvis man benytter split-view med menuen View > Code and Design
2. Importer tabeldata
Bliver du træt klokken tre, når Karl-Åge fra marketing "lige smutter forbi" med 20 salgsrapporter i Excel-format, som altså desværre skal på intranettet idag? Så er der råd for det. Først mønstrer du alle dine pædagogiske evner og lærer Karl-Åge, hvorledes man eksporterer et Excel-ark som en tabulator-separeret tekstfil. Det gøres med menuen Fil > Gem som, og vælg formatet Tekst (tabulatorsepareret). Tekstfilen kan nu nemt importeres i Dreamweaver med menuen File > Import > Import Tabular Data.
3. Rediger billeder i dit favoritprogram
Man kan nemt åbne et billede i et billedbehandlingsprogram. Højreklik på billedet og vælg Edit With > Browse fra popup-menuen. I Åbn fil-dialogen, som kommer frem, skal man navigere til applikationen.
Man kan også sætte programmet op permanent i popup-menuen. Det gøres via menuen Edit > Preferences. Vælg punktet File types / Editors i listen til venstre. Klik på filtypen i den venstre liste, og klik på .jpg i listen Extensions. Klik så på "+"-knappen oven over listen Editors. Naviger frem til det billedbehandlingsprogram, som du ønsker at benytte.
Man skal dog huske på, at det bedste resultat fås ved at redigere originalen, og derefter komprimere billedet på ny. Men det er en nem metode at benytte, når man udarbejder designudkast.
I Preferences-dialogen kan en ekstern kodeeditor, som for eksempel Homesite eller Stones WebWriter, også sættes op. Det foregår øverst i dialogen. Nu kan koden så redigeres i den eksterne editor ved at vælge menuen Edit > Edit with External Editor (Ctrl + E).
Stil
4. Definer din egen stil
Alle har deres egne ideer om, hvordan koden skal formateres. Nogle mener, at indrykkede <TD>-mærker er djævelens værk, mens andre mener det modsatte. Nogle skriver alle mærker med stort, andre med småt. I Dreamweaver er der plads til alle, og man kan nemt omformatere et eksistende ark til ens egen stil.
Formateringen af koden sættes i Edit > Preferences, og i Preferences-dialogen klikkes på punktet Code Format. Her kan man sætte indrykning, mærkers udformning og mere.
Når man så åbner et HTML-dokument, kan man omformatere dokumentet med menuen Commands > Apply Source Formatting.
Man kan finjustere formateringen endnu mere ved at redigere i filen SourceFormat.txt, som ligger et sted i Dreamweaver-mappen. Det er ikke helt simpelt, men man kan prøve sig frem med de instruktioner, som ligger i filen.
5. Søg og erstat
Dreamweaver har en meget stærk søg-og-erstat funktion. Antag, at firmaet skifter navn og logo dagen før sitet går i luften - og det har denne artikels forfatter faktisk oplevet ude i virkeligheden - så kan man nemt søge alle dokumenter igennem og erstatte alle forekomster af det gamle logo med det nye.
Dialogen Find and replace fås via menuen Edit > Find and Replace.
Man kan benytte søg-og-erstat ved at søge på tekst i Design view, som svarer til søg-og-erstat i et tekstbehandlingsprogram, man kan søge efter specifikke tags, hvilket nok er den mulighed, man vil anvende oftest, eller man kan søge og erstatte frit i HTML-koden.
Derudover kan man benytte almindelig tekstsøgning, eller søgning med regulære udtryk. Regulære udtryk er et slags sprog til tekstsøgning, og man kan læse mere om det ved at klikke på Help i dialogen, og så klikke på punktet About regular expressions i hjælpeteksten.
Man kan udføre søg og erstat enten i det aktuelle dokument, i en specifik mappe eller i hele sitet. Den sidste mulighed forudsætter, at man har oprettet et site med menuen Site > New Site.
Mønstre i Søg-og-erstat kan også gemmes og hentes frem ved senere brug. Det gøres med de to små knapper nederst til højre i dialogen.
6. I havnen med paletterne
De mange paletter i Dreamweaver kan skilles ad og samles i grupper. Man skiller en palette ud fra de andre paletter ved at trække fanebladet væk fra paletten. Paletter samles ved at trække fanebladet over på en anden palette. Vær opmærksom på, at det er fanebladet - ikke vinduets titellinje - som man skal trække i.
Rengøring
7. Rens koden
Hvis man skal arbejde med et dårligt kodet dokument, kan man rense koden op med menuen Commands > Clean Up HTML. Det er især smart, hvis man skal arbejde videre på andres dokumenter.
Der er også en speciel kommando til oprensning af HTML-filer, som er genereret ved hjælp af Word's HTML-eksport-funktion. Der vælges ved menuen Commands > Clean Up Word HTML.
8. Hurtig redigering med Tag editor
Dreamweaver har en smart funktion, som er så diskret, at man nemt kan komme til at overse den. Når man placerer tekstmarkøren et sted i dokumentet, vises den sti af mærker, som markøren befinder sig i, nederst i designvinduet. Hvis man for eksempel er inde i et <P>-mærke inden i en celle i en tabel, ser stien forneden således ud:
<html>:<body>:<table>:<tr>:<td>:<p>
Hvis man benytter CSS-klasser til at formatere sine mærker med, kan man også se det. Det kan se sådan ud:
<p:broed>
Det smarte består i, at man kan klikke på disse mærker i bunden af vinduet. Så opvælges hele mærket og dets indhold. Det kan man blandt andet benytte til at finde det sted i koden, hvor mærket står. Når man skifter til kodevisning, er mærkets HTML-kode markeret. Det er nyttigt, hvis man har et stort og indviklet design.
En nem måde at redigere i selve mærket, mens man er i Design View, er at benytte Tag Editor. Indsæt markøren i den del af teksten, der skal redigeres. Klik på det yderste mærke i bunden af redigeringsvinduet. Vælg menuen Modify > Quick Tag Editor, eller blot Ctrl + T. Så kommer der et lille vindue frem, hvor mærket kan redigeres.
9. Trace image
Mange brugere foretrækker at skabe en designskitse i et billedbehandlingsprogram før selve HTML-koden sættes sammen. I Dreamweaver kan man hente skitsen ind i programmet. Det ligger så i baggrunden, og så kan man formatere sine tabeller og andet ud fra skitsen. Skitsen kan douches, så det ikke generer når man indsætter HTML-elementerne.
Billedet hentes ved menuen View > Tracing Image > Load. Ved hjælp af en slider i dialogen Page Properties (som fås med menuen Modify > Page Properties) sættes graden af douche.
10. Extensions
Dreamweaver kan udvides med en masse funktionalitet. Man kan programmere disse udvidelser i JavaScript. Macromedia har oprettet en webside, hvor udviklere kan dele disse udvidelser. Et lille program, Extension Manager, som ligger i startmenuen, sørger for at installere udvidelserne, og det er ganske simpelt.
Når man vælger menuen Commands > Get More Commands, åbnes websiden i en browser.
Her kan man læse om udvidelserne og downloade dem, der lyder spændende. Man kan så downloade filerne til mappen Programmer\Macromedia\Dreamweaver 4\Downloaded Extensions.
Åbn Extension Manager fra Windows' startmenu. Vælg menuen File > Install Extension. Derefter meddeler programmet, hvorledes objektet eller kommandoen som man har installeret, kan benyttes.
