Dreamweaver is een geweldige WYSIWYG-editor, maar als u niet geïnteresseerd bent in het schrijven van webpagina's in een "wat u ziet is wat u krijgt" -omgeving, kunt u nog steeds Dreamweaver gebruiken omdat het ook een geweldige teksteditor is. Maar er zijn veel functies die buiten de boot vallen in de Dreamweaver-codebewerker omdat de primaire focus ligt op het "ontwerpaanzicht" of het WYSIWYG-bewerkingsgedeelte van het product.
Hoe Dreamweaver Code View te krijgen
Als u Dreamweaver nog nooit als een HTML-editor hebt gebruikt voordat u de drie knoppen boven aan de pagina misschien nog nooit hebt opgemerkt: 'Code', 'Splitsen' en 'Ontwerp'. Dreamweaver wordt standaard gestart in de ontwerpweergave of de WYSIWYG-modus. Maar het is gemakkelijk om over te schakelen naar het bekijken en bewerken van de HTML-code. Klik gewoon op de Code knop. Of ga naar de Uitzicht menu en selecteer Code.
Als u alleen maar leert HTML te schrijven of wilt weten hoe uw wijzigingen van invloed zijn op uw document, kunt u de codeweergave en ontwerpweergave tegelijkertijd openen. Het mooie van deze methode is dat je ze ook in beide vensters kunt bewerken. U kunt dus de code voor uw afbeeldingstag in HTML schrijven en vervolgens de ontwerpweergave gebruiken om de code naar een andere locatie op de pagina te slepen met slepen en neerzetten.
Om beide tegelijk te bekijken:
- Klik op de spleet knop (tussen Code en Ontwerp).
- In de Uitzicht menu, selecteer Code en ontwerp.
Als u eenmaal vertrouwd bent met Dreamweaver om uw HTML-code te bewerken, kunt u uw voorkeuren wijzigen om Dreamweaver standaard te openen in de codeweergave. De eenvoudigste manier is om de codeweergave als een werkruimte op te slaan. Dreamweaver wordt geopend in de laatste werkruimte die u gebruikte. Als dit niet het geval is, gaat u gewoon naar het menu Venster en kiest u de gewenste werkruimte.
Opties voor codeweergave
Dreamweaver is zo flexibel omdat er zoveel verschillende manieren zijn om het aan te passen en te laten werken zoals u dat wilt. In het optievenster zijn er codering, codeopmaak, coderingstips en opties voor het herschrijven van code die u kunt aanpassen. Maar u kunt ook enkele speciale opties binnen de codeweergave zelf wijzigen.
Als je eenmaal in de codeweergave staat, is er een Bekijk opties knop in de werkbalk. U kunt de opties ook bekijken door naar de Uitzicht menu en kiezen Opties voor codeweergave. De opties zijn:
- Word Wrap - omsluit de HTML-code zodat u deze kunt bekijken zonder horizontaal te scrollen. Merk op dat deze optie geen regelterugloop in uw code invoegt, het geeft alleen de code weer zodat het gemakkelijker te lezen is.
- Lijn nummers - geeft regelnummers weer naast de code. Het toont een regelafbreking symbool voor lijnen die langer omwikkelen dan het aanzichtvenster.
- Verborgen personages - geeft speciale tekens weer in plaats van spaties die op een webpagina worden weergegeven. Zo'n stip vervangt een spatie, een dubbele chevron vervangt elk tabblad en een paal- of paragraafteken vervangt elke regeleinde.
- Markeer ongeldige code - markeert HTML die onjuist is in geel. Als u de gele tag selecteert, geeft de eigenschappencontrole u tips voor het oplossen ervan.
- Syntax Coloring - Schakelt de kleurcodering van uw code in of uit. U wijzigt de kleuren van uw kleurcodering in het codekleuren gedeelte van de voorkeuren.
- Auto Inspringen - maakt uw code automatisch inspringen na een carriage return als de code erboven inspringt. U kunt de grootte van de inspringing wijzigen door het formaat van de tab te wijzigen in het gedeelte voor codering van de voorkeuren.
HTML-code bewerken in de codeweergave van Dreamweaver
Het is gemakkelijk HTML-code te bewerken in de codeweergave van Dreamweaver. Begin gewoon je HTML te typen. Maar Dreamweaver biedt u enkele extra's die het uitbreiden tot buiten een eenvoudige HTML-editor. Wanneer u begint met het schrijven van een HTML-tag, typt u <. Als je meteen na dat teken stopt, laat Dreamweaver je een lijst met HTML-tags zien. Dit worden coderingstips genoemd. Om de selectie te beperken, begint u met het typen van letters - Dreamweaver verkleint de vervolgkeuzelijst tot de tag die past bij wat u typt.
Als HTML nieuw voor u is, kunt u door de lijst met HTML-codes bladeren en verschillende HTML-codes kiezen om te zien wat ze doen. Dreamweaver blijft u vragen om kenmerken zodra u een tag hebt getypt. Bijvoorbeeld, als u typt <>, Dreamweaver zal naar beneden gaan naar de HTML-tag, met de andere tags beginnend met I-volgende. Als je doorgaat door de letter te typen m, Dreamweaver zal het beperken tot de label.
Maar coderingstips eindigen niet op de tags. U kunt coderingstips gebruiken om in te voegen:
- HTML-kenmerken
- Klasse- en ID-namen
- CSS-eigenschappen
Als de coderingstips niet worden weergegeven, kunt u klikken Ctrl-spatiebalk (Windows) of Cmd-spatiebalk (Macintosh) om ze weer te geven. De meest voorkomende reden waarom een ​​coderingstip niet wordt weergegeven, is als u naar een ander venster bent gegaan voordat u uw tag had voltooid. Omdat Dreamweaver het typen van het teken uitzet <, als u het venster verlaat en terugkeert, moet u de coderingstips opnieuw starten.
U kunt het coderingstipsmenu uitschakelen door op de escape-toets te drukken.
Nadat u uw HTML-openingstag heeft getypt, moet u deze sluiten. Dreamweaver doet dit op een natuurlijke manier. Als u typt Tags sluiten optie die het beste bij u past.
Als u nog niet helemaal klaar bent om over te schakelen op het bewerken van uw pagina's in HTML, maar u de code wilt bekijken terwijl deze is geschreven, moet u de code-inspecteur proberen. Hiermee wordt de HTML-code in een apart venster geopend. Het werkt net als een codeweergave en is feitelijk in feite een afneembaar codeweergavevenster voor het huidige document.Om de code-inspecteur te openen, gaat u naar Venster menu en kies Code Inspector of druk op de F10 toets op uw toetsenbord.
Dreamweaver zal HTML-code opmaken, maar u wilt deze wel weergeven. Als u bijvoorbeeld 3 spaties gebruikt voor het inspringen, maar nooit inspringen van IMG-tags, kunt u die opmaakinformatie opgeven in de code herschrijfopties. Ga dan naar de commando's menu en kies Bronopmaak toepassen. Dit is een geweldige manier om code die door iemand anders is geschreven in een voor u bekend formaat te krijgen.
Een functie die veel HTML-coders niet kennen of niet gebruiken, is de mogelijkheid HTML-code samen te vouwen. Hiermee worden de tags niet uit het document verwijderd, maar worden ze gewoon uit het zicht verwijderd, zodat ze niet afleiden van waar u aan werkt. Om uw code samen te vouwen:
- Selecteer het gedeelte van de code dat u wilt verbergen.
- In de Bewerk menu, kies Selectie samenvouwen van de Code Collapse submenu
Een eenvoudigere manier is om de code te selecteren en vervolgens op de pictogrammen voor het samenklapelen van codes te klikken die in de rugmarge verschijnen. U kunt ook met de rechtermuisknop op de geselecteerde code klikken en kiezen Selectie samenvouwen.
Als je alles wilt verbergen behalve wat is gemarkeerd, kies Collapse Outside Selection in een van de bovenstaande methoden.
Om samengevouwen code uit te vouwen, dubbelklikt u erop. Dit opent de code en selecteert deze. Vervolgens kunt u die selectie verplaatsen of verwijderen of er extra tags omheen toevoegen.
U kunt de functie samenvouwen en uitvouwen altijd gebruiken op pagina's waar u de externe sjabloon niet wilt bewerken. U selecteert gewoon het inhoudsgebied dat u wilt bewerken en klapt het buiten in. Schrijf vervolgens uw HTML. U kunt de pagina nog steeds bekijken in Ontwerp bekijk of bekijk het in een browser. De samengevouwen code wordt niet uit het document verwijderd, maar gewoon uit het zicht verborgen. Je kunt het ook gebruiken als je aan een reeks items werkt. Als je er een hebt voltooid, vouw je het samen. Je weet dat je klaar bent als er geen code wordt weergegeven.
