Dreamweaver er en flott WYSIWYG-editor, men hvis du ikke er interessert i å skrive nettsider i et "hva du ser er det du får" miljø, kan du fortsatt bruke Dreamweaver fordi det også er en flott tekstredigerer. Men det er mange funksjoner som slipper av veikanten i Dreamweaver-kodeditoren fordi det primære fokuset er på "designvisning" eller WYSIWYG-redigeringsdelen av produktet.
Slik kommer du inn i Dreamweaver-kodevisning
Hvis du aldri har brukt Dreamweaver som HTML-editor, før du kanskje aldri har lagt merke til de tre knappene øverst på siden: "Kode", "Split" og "Design." Dreamweaver starter som standard i "Designvisning" eller WYSIWYG-modus. Men det er lett å bytte til visning og redigering av HTML-koden. Bare klikk på Kode knapp. Eller gå til Utsikt menyen og velg Kode.
Hvis du bare lærer å skrive HTML eller du vil få en følelse av hvordan endringene dine påvirker dokumentet ditt, kan du åpne kodevisning og designvisning samtidig. Skjønnheten i denne metoden er at du kan redigere i begge vinduene også. Så du kan skrive koden for bildedaggen din i HTML og deretter bruke designvisning for å flytte den til et annet sted på siden med dra og slipp.
For å se begge samtidig, enten:
- Klikk på Dele knapp (mellom Kode og Design).
- I Utsikt menyen, velg Kode og design.
Når du er komfortabel med å bruke Dreamweaver til å redigere HTML-koden din, kan du endre innstillingene dine for å åpne Dreamweaver i kodevisning som standard. Den enkleste måten er å lagre kodevisningen som arbeidsområde. Dreamweaver åpnes i det siste arbeidsområdet du brukte. Hvis ikke, gå ganske enkelt til Vindu-menyen, og velg arbeidsområdet du vil ha.
Kodevisningsmuligheter
Dreamweaver er så fleksibel fordi den har så mange måter å tilpasse den og få den til å fungere slik du vil. I alternativvinduet er det kodefarging, kodformatering, kodetips og kodetrygningsalternativer du kan justere. Men du kan også endre noen spesielle alternativer i selve koden.
Når du er i kodevisning, er det en Vis alternativer knappen i verktøylinjen. Du kan også se alternativene ved å gå inn i Utsikt menyen og velge Kodevisningsmuligheter. Alternativene er:
- Word Wrap - bryter inn HTML-koden slik at du kan se den uten å bla horisontalt. Merk at dette alternativet ikke legger inn vognretur i koden din, det viser bare koden slik at det er lettere å lese.
- Linjenumre - viser linjenumre langs siden av koden. Den viser et linjepakningssymbol for linjer som pakker seg lengre enn visningsvinduet.
- Skjulte tegn - viser spesialtegn i stedet for hvitt plass som vil vises på en nettside. Slik som en prikk erstatter en plass, erstatter en dobbel chevron hver flik, og en pilcrow- eller punktmarkør erstatter hver linjeskift.
- Fremhev ugyldig kode - fremhever HTML som er feil i gul. Hvis du velger den gule koden, vil eiendomsinspektøren gi deg tips om hvordan du kan fikse det.
- Syntaksfarging - Slår på eller av fargekodingen av koden din. Du endrer fargene på fargekodingen i kodefargingsdelen av innstillingene.
- Automatisk innrykk - Lag koden din automatisk etter en vognretur hvis koden over den er innrykket. Du kan endre størrelsen på innrykket ved å endre fanestørrelsen i kodesformatering av innstillingene.
Redigerer HTML-kode i Dreamweaver-kodevisning
Det er enkelt å redigere HTML-kode i Dreamweaver's kodevisning. Bare start å skrive HTML-koden din. Men Dreamweaver gir deg noen ekstraelementer som strekker det utover et grunnleggende HTML-editor. Når du begynner å skrive en HTML-kode, skriver du inn <. Hvis du pause rett etter det tegnet, vil Dreamweaver vise deg en liste over HTML-koder. Disse kalles kodehint. For å begrense valget, begynn å skrive bokstaver - Dreamweaver vil begrense nedtrekkslisten til koden som passer til det du skriver.
Hvis du er ny i HTML, kan du bla gjennom listen over HTML-koder og velge forskjellige for å se hva de gjør. Dreamweaver vil fortsette å spørre deg om attributter når du har skrevet en tagg. For eksempel, hvis du skriver inn <>, Dreamweaver vil falle ned til HTML-tag, med de andre kodene som begynner med jeg følger. Hvis du fortsetter ved å skrive brevet m, Dreamweaver vil begrense den ned til stikkord.
Men kodehintene slutter ikke ved merkene. Du kan bruke kodetips for å sette inn:
- HTML-attributter
- Klasse- og ID-navn
- CSS egenskaper
Hvis kodenes hint ikke vises, kan du treffe Ctrl-space (Windows) eller Cmd-mellomromstasten (Macintosh) for å få dem til å vise. Den vanligste grunnen til at et kodehint kanskje ikke vises, er hvis du bytter til et annet vindu før du fullfører taggen din. Fordi Dreamweaver er tastet av typen av tegnet <, hvis du forlater vinduet og kommer tilbake, må du re-lansere kodetipsene.
Du kan slå av menyen for kodenavn ved å trykke på flyktasten.
Når du har skrevet din HTML-kode for åpning, må du lukke den. Dreamweaver gjør dette på en naturlig måte. Hvis du skriver inn Lukk Tags alternativ som best passer dine behov.
Hvis du ikke er helt klar til å bytte til å redigere sidene dine i HTML, men du vil se koden som den er skrevet, bør du prøve kodeinspektøren. Dette åpner HTML-koden i et eget vindu. Det fungerer akkurat som kodevisning, og faktisk er det i utgangspunktet et avtagbart kodevisningsvindu for det nåværende dokumentet.For å åpne kodeinspektøren, gå til Vindu menyen og velg Kodeinspektør eller slå på F10 nøkkel på tastaturet.
Dreamweaver vil formatere HTML-kode, men du vil at den skal vises. Hvis du for eksempel bruker 3 mellomrom for å strekke inn, men aldri angir IMG-koder, kan du spesifisere formateringsinformasjonen i kodeskriverealternativene. Så går du til kommandoer menyen og velg Bruk Kildeformatering. Dette er en fin måte å få kode skrevet av noen andre til et format som er kjent for deg.
En funksjon som mange HTML-kodere ikke vet om eller ikke bruker, er muligheten til å kollapse HTML-koden. Dette fjerner ikke kodene fra dokumentet, men fjerner dem bare fra visning slik at de ikke distraherer det du jobber med. Slik kollapser du koden din:
- Velg delen av koden du vil gjemme.
- I Redigere meny, velg Skjul valg fra Kode kollaps undermeny
En enklere måte er å velge koden og deretter klikke på kodekollapsikonene som vises i rennen. Du kan også høyreklikke på den valgte koden og velge Skjul valg.
Hvis du vil gjemme alt unntatt hva er uthevet, velg Skjul utenfor valg i noen av de ovennevnte metodene.
For å utvide kollapset kode, dobbeltklikk på den. Dette åpner koden og velger den. Deretter kan du flytte det valget eller slette det eller legge til flere koder rundt det.
Du kan bruke sammenbruddet og utvide funksjonen hele tiden på sider der du ikke vil redigere den eksterne malen. Du velger bare innholdsområdet du vil redigere og kollapse utenfor. Skriv deretter HTML-koden din. Du kan fortsatt se siden i Design se eller forhåndsvise det i en nettleser. Den kollapsede koden fjernes ikke fra dokumentet, bare skjult for visning. Du kan også bruke den når du jobber med en rekke varer. Når du er ferdig, kollaps det. Du vet at du er ferdig når det ikke vises noen kode.
