Dreamweaver är en bra WYSIWYG-redaktör, men om du inte är intresserad av att skriva webbsidor i en "vad du ser är vad du får" -miljö, kan du fortfarande använda Dreamweaver eftersom det också är en bra textredigerare. Men det finns många funktioner som glider vid vägkanten i Dreamweaver-kodredigeraren, eftersom det primära fokuset ligger på "designvy" eller WYSIWYG-redigeringsdelen av produkten.
Så här kommer du till Dreamweaver Code View
Om du aldrig har använt Dreamweaver som HTML-redigerare innan du kanske aldrig har märkt de tre knapparna högst upp på sidan: "Kod", "Split" och "Design". Dreamweaver startas som standard i "Designvy" eller WYSIWYG-läge. Men det är lätt att byta till visning och redigering av HTML-koden. Klicka bara på Koda knapp. Eller gå till Se menyn och välj Koda.
Om du bara lär dig hur du skriver HTML eller vill få en känsla av hur dina ändringar påverkar ditt dokument, kan du öppna kodvy och designvy samtidigt. Skönheten i denna metod är att du kan redigera i båda windows också. Så du kan skriva koden för din bildtagg i HTML och använd sedan designvyn för att flytta den till en annan plats på sidan med dra och släpp.
För att se båda samtidigt, antingen:
- Klicka på Dela knapp (mellan Koda och Design).
- I Se meny, välj Kod och design.
När du är bekväm med att använda Dreamweaver för att redigera din HTML-kod, kan du ändra dina inställningar för att öppna Dreamweaver i kodvisning som standard. Det enklaste sättet är att spara kodvisningen som en arbetsyta. Dreamweaver öppnas i den senaste arbetsytan du använde. Om det inte gör det, gå helt enkelt till fönstermenyn och välj arbetsytan du vill ha.
Kodvisningsalternativ
Dreamweaver är så flexibel eftersom det har så många sätt att anpassa det och få det att fungera som du vill ha det. I alternativfönstret finns kodfärgning, kodformatering, kodhints och omskrivningsalternativ för kod som du kan justera. Men du kan också ändra några speciella alternativ inom kodvisningen själv.
När du är i kodvisning finns det en Visa alternativ knappen i verktygsfältet. Du kan också visa alternativen genom att gå in i Se meny och välja Kodvisningsalternativ. Alternativen är:
- Word Wrap - Ombryter HTML-koden så att du kan se den utan att rulla horisontellt. Observera att det här alternativet inte sätter in några vagnreturer i din kod, det visar bara koden så att det är lättare att läsa.
- Linje nummer - visar linjenumre längs koden. Den visar en linjeomslagssymbol för linjer som sitter längre än visningsfönstret.
- Dolda tecken - Visar specialtecken istället för blankutrymme som skulle visas på en webbsida. Såsom en punkt ersätter ett mellanslag, ersätter en dubbel chevron varje flik, och en pilcrow eller punktmarkör ersätter varje radbrytning.
- Markera ogiltig kod - belyser HTML som är felaktigt i gult Om du väljer den gula etiketten kommer egenskapsinspektören att ge dig tips om hur du fixar det.
- Syntaxfärgning - Slår på eller av färgkodningen av din kod. Du ändrar färgerna på din färgkodning i kodfärgningsdelen i inställningarna.
- Automatisk inmatning - gör din kodindelning automatiskt efter en vagnretur om koden ovanför är indragad. Du kan ändra inmatningsstorlek genom att ändra flikstorlek i avsnittet kodformatering av inställningarna.
Redigering av HTML-kod i Dreamweaver-kodvisning
Det är lätt att redigera HTML-kod i Dreamweaver kodvisning. Börja bara skriva din HTML. Men Dreamweaver ger dig några extrafunktioner som utökar det utöver en grundläggande HTML-editor. När du börjar skriva en HTML-tag skriver du in <. Om du pausar direkt efter det tecknet visar Dreamweaver dig en lista med HTML-taggar. Dessa kallas kodtips. För att begränsa valet, börja skriva bokstäver - Dreamweaver kommer att begränsa nedrullningslistan till taggen som passar vad du skriver.
Om du är ny i HTML kan du bläddra igenom listan med HTML-taggar och välja olika för att se vad de gör. Dreamweaver fortsätter att be dig om attribut när du har skrivit en tagg. Till exempel, om du skriver <>, Dreamweaver kommer att falla ner till HTML-taggen, med de andra taggarna som börjar med att jag följer. Om du fortsätter genom att skriva brevet mDreamweaver kommer att begränsa den till märka.
Men kodtips slutar inte vid taggarna. Du kan använda kodtips för att infoga:
- HTML attribut
- Klass- och ID-namn
- CSS egenskaper
Om kodtipset inte visas kan du slå Ctrl-mellanslag (Windows) eller Cmd-mellanslag (Macintosh) för att få dem att visas. Den vanligaste anledningen till att en kodtips kanske inte visas är om du bytte till ett annat fönster innan du avslutar din tagg. Eftersom Dreamweaver är avstängning av tecknet av tecknet <, om du lämnar fönstret och återvänder måste du starta kodtipset igen.
Du kan stänga av kodtipsmenyn genom att trycka på flyktangenten.
När du har skrivit din HTML-tagg för öppning måste du stänga den. Dreamweaver gör det på ett naturligt sätt. Om du skriver in Stänga etiketter alternativ som bäst passar dina behov.
Om du inte är helt redo att byta till att redigera dina sidor i HTML men du vill titta på koden som den skrivit, borde du prova kodinspektören. Detta öppnar HTML-koden i ett separat fönster. Det fungerar precis som kodvisning, och i själva verket är det i grunden ett avtagbart kodvyn för det aktuella dokumentet.För att öppna kodinspektören, gå till Fönster menyn och välj Kodinspektör eller slå på F10 tangent på tangentbordet.
Dreamweaver kommer att formatera HTML-kod men du vill att den visas. Om du till exempel använder 3 mellanslag för att indraga, men aldrig anger IMG-taggar, kan du ange den formateringsinformationen i kodomskrivningsalternativen. Då går du till kommandon menyn och välj Använd källformatering. Det här är ett bra sätt att få kod skriven av någon annan till ett format som är bekant för dig.
En egenskap som många HTML-kodare inte känner till eller inte använder är möjligheten att kollapsera HTML-kod. Det här tar inte bort taggarna från dokumentet, men tar bara bort dem från visning så att de inte distraherar vad du jobbar med. För att kollapsa din kod:
- Välj den sektion av kod du vill gömma.
- I Redigera meny, välj Dölj val från Kod Collapse undermenyn
Ett enklare sätt är att välja koden och klicka sedan på kodkollapsikonen som visas i rännan. Du kan också högerklicka på den valda koden och välja Dölj val.
Om du vill gömma allt bortsett från vad är markerat, välj Collapse Outside Selection i någon av ovanstående metoder.
Om du vill expandera kollapsad kod klickar du helt enkelt på den. Detta öppnar koden och väljer den. Då kan du flytta det valet eller radera det eller lägga till ytterligare taggar runt det.
Du kan använda funktionen för att kollapsa och expandera hela tiden på sidor där du inte vill redigera den externa mallen. Du väljer bara det innehållsområde du vill redigera och kollapsa utanför. Skriv sedan din HTML. Du kan fortfarande se sidan i Design visa eller förhandsgranska det i en webbläsare. Den kollapsade koden tas inte bort från dokumentet, helt enkelt dold för visning. Du kan också använda den när du arbetar med en serie objekt. När du är klar, kollapsera den. Du vet att du är klar när det inte finns någon kodvisning.
