Dreamweaver er en fantastisk WYSIWYG editor, men hvis du ikke er interesseret i at skrive websider i et "hvad du ser, er hvad du får" miljø, kan du stadig bruge Dreamweaver, fordi det også er en god tekstredigerer. Men der er mange funktioner, der glider ad vejen inden for Dreamweaver-kodeditoren, fordi det primære fokus er på "designvisning" eller WYSIWYG-editorens del af produktet.
Sådan kommer du ind i Dreamweaver Kodevisning
Hvis du aldrig har brugt Dreamweaver som HTML-editor, før du måske aldrig har bemærket de tre knapper øverst på siden: "Kode", "Split" og "Design". Dreamweaver starter som standard i "Designvisning" eller WYSIWYG-tilstand. Men det er nemt at skifte til visning og redigering af HTML-koden. Bare klik på Kode knap. Eller gå til Udsigt menuen og vælg Kode.
Hvis du bare lærer at skrive HTML eller du vil få en fornemmelse af, hvordan dine ændringer vil påvirke dit dokument, kan du åbne kodevisning og designvisning samtidig. Skønheden ved denne metode er, at du også kan redigere i begge vinduer. Så du kan skrive koden til dit billedmærke i HTML og derefter bruge designvisning til at flytte den til et andet sted på siden med træk og slip.
For at se begge på én gang, enten:
- Klik på Dele knap (mellem Kode og Design).
- I Udsigt menu, vælg Kode og design.
Når du er komfortabel med at bruge Dreamweaver til at redigere din HTML-kode, kan du ændre dine præferencer for at åbne Dreamweaver i kodevisning som standard. Den nemmeste måde er at gemme kodevisningen som arbejdsområde. Dreamweaver åbnes i det sidste arbejdsområde, du brugte. Hvis det ikke gør det, skal du blot gå til vinduesmenuen og vælge det ønskede arbejdsområde.
Kodevisningsmuligheder
Dreamweaver er så fleksibel, fordi det har så mange måder at tilpasse det til og gøre det til at fungere som du vil have det til. I indstillingsvinduet er der kodefarve, kodformatering, kodehenvisninger og muligheder for omskrivning af kode, som du kan justere. Men du kan også ændre nogle specielle muligheder inden for kodevisningen selv.
Når du er i kodevisning, er der en Vis indstillinger knappen i værktøjslinjen. Du kan også se mulighederne ved at gå ind i Udsigt menu og vælge Kodevisningsmuligheder. Indstillingerne er:
- Tekstombrydning - Ombryder HTML-koden, så du kan se den uden at rulle vandret. Bemærk, at denne indstilling ikke indsætter vognretur i din kode, den viser bare koden, så den er lettere at læse.
- Linjenumre - Viser linjenumre langs siden af koden. Det viser et linjepakningssymbol for linjer, der pakker længere end visningsvinduet.
- Skjulte tegn - viser specialtegn i stedet for whitespace, der vises på en webside. Som en prik erstatter et mellemrum, erstatter en dobbelt chevron hver fane, og en pilcrow- eller punktmarkør erstatter hver linjeskift.
- Fremhæv ugyldig kode - fremhæver HTML, der er forkert i gul. Hvis du vælger det gule mærke, vil ejendomsinspektøren give dig tip om, hvordan du løser det.
- Syntaksfarve - tænder eller slukker for farvekodningen af din kode. Du ændrer farverne på din farvekodning i kodens farveafsnit af indstillingerne.
- Automatisk indrykning - gør din kode indrykning automatisk efter en vognretur, hvis koden ovenfor er indrykket. Du kan ændre indrykningsstørrelsen ved at ændre fanestørrelsen i sektionen for kodformatering af indstillingerne.
Redigering af HTML-kode i Dreamweaver Kodevisning
Det er nemt at redigere HTML-kode i Dreamweaver's kodevisning. Du skal bare begynde at skrive din HTML. Men Dreamweaver giver dig nogle ekstrafunktioner, der udvider det ud over en grundlæggende HTML editor. Når du begynder at skrive et HTML-tag, skriver du <. Hvis du holder pause lige efter det pågældende tegn, vil Dreamweaver vise dig en liste over HTML-tags. Disse kaldes kodehints. For at indsnævre markeringen skal du begynde at skrive bogstaver - Dreamweaver vil indsnævre rullemenuen til mærket, der passer til det, du skriver.
Hvis du er ny til HTML, kan du rulle gennem listen over HTML-tags og vælge forskellige til at se, hvad de gør. Dreamweaver vil fortsat bede dig om attributter, når du har skrevet et tag. For eksempel, hvis du skriver <>, Dreamweaver vil falde ned til HTML tag, med de andre tags begynder med jeg følger. Hvis du fortsætter med at skrive brevet m, Dreamweaver vil indsnævre den ned til tag.
Men kodehints slutter ikke ved tags. Du kan bruge kodehints til at indsætte:
- HTML attributter
- Klasse- og id-navne
- CSS egenskaber
Hvis kodehenvisningerne ikke vises, kan du ramme Ctrl-mellemrumstasten (Windows) eller Cmd- mellemrumstasten (Macintosh) for at få dem til at blive vist. Den mest almindelige årsag til, at et kodehint måske ikke vises, er, hvis du skifter til et andet vindue, inden du har færdiggjort dit tag. Fordi Dreamweaver nøgler udskrivning af tegnet <, hvis du forlader vinduet og vender tilbage, skal du genstarte kodetipsene.
Du kan deaktivere kodehints-menuen ved at trykke på escape-tasten.
Når du har indtastet dit åbnings HTML-tag, skal du lukke det. Dreamweaver gør dette på en naturlig måde. Hvis du skriver Luk Tags mulighed der passer bedst til dine behov.
Hvis du ikke er helt klar til at skifte til redigering af dine sider i HTML, men du gerne vil se koden, som den er skrevet, bør du prøve kodeinspektøren. Dette åbner HTML-koden i et separat vindue. Det fungerer ligesom kodevisning, og i virkeligheden er det grundlæggende et aftageligt kodevisningsvindue for det nuværende dokument.For at åbne kodeinspektøren skal du gå til Vindue menuen og vælg Kodeinspektør eller ramt F10 nøgle på dit tastatur.
Dreamweaver vil formatere HTML-kode, men du vil gerne have det vist. Hvis du f.eks. Bruger 3 mellemrum til indrykning, men aldrig indrykker IMG-tags, kan du angive formateringsoplysningerne i koderewskrivningsindstillingerne. Så går du til kommandoer menuen og vælg Anvend Kildeformatering. Dette er en fantastisk måde at få kode skrevet af en anden til et format, der er kendt for dig.
En funktion, som mange HTML-kodere ikke ved eller ikke bruger, er evnen til at sammenbrud HTML-kode. Dette fjerner ikke taggene fra dokumentet, men fjerner dem kun fra visning, så de ikke distraherer det, du arbejder på. For at kollapse din kode:
- Vælg den sektion af kode, du vil skjule.
- I Redigere menu, vælg Collapse Selection fra Kode Collapse undermenu
En nemmere måde er at vælge koden og derefter klikke på ikonerne for kodekollaps, der vises i renden. Du kan også højreklikke på den valgte kode og vælge Collapse Selection.
Hvis du vil skjule alt undtagen Hvad er fremhævet, vælg Collapse Outside Selection i en hvilken som helst af ovennævnte metoder.
For at udvide kollapsede kode, skal du blot dobbeltklikke på den. Dette åbner koden og vælger den. Derefter kan du flytte det valgte eller slette det eller tilføje yderligere tags rundt om det.
Du kan bruge funktionen sammenbrud og udvidelse hele tiden på sider, hvor du ikke vil redigere den eksterne skabelon. Du vælger bare det indholdsområde, du vil redigere og kollapse udenfor. Skriv derefter din HTML. Du kan stadig se siden i Design se eller forhåndsvis det i en browser. Den sammenbrudte kode fjernes ikke fra dokumentet, blot skjult fra visning. Du kan også bruge den, når du arbejder på en række varer. Når du er færdig med en, skal du kollapse den. Du ved, du er færdig, når der ikke er nogen kode, der vises.
