Overzichtsworkflow met het ontwerp en de ontwikkeling van websites die Dreamweaver gebruiken

Dit artikel helpt u om te begrijpen hoe u verschillende fasen van webontwikkeling kunt voltooien met Dreamweaver.

Opmerking:

In dit artikel wordt ervan uitgegaan dat u een beginner bent met middelmatig begrip van het webdomein en HTML, CSS en JavaScript.

  1. De eerste fase in de webontwikkeling is de planningsfase, waarin u de wensen van de doelgroep, de technische vereisten en de marketingvereisten analyseert. U verzamelt ook benodigde gegevens voor het ontwerpen en het publiceren van uw website en u hebt antwoorden op vragen zoals de volgende:

    • Welke serviceprovider kies ik voor de hosting van de website? Heb ik toegang om bestanden naar de publishing server te uploaden?
    • Welke domeinnaam moet voor de website worden gebruikt?
    • Als u bestaande websites naar Dreamweaver migreert, waar worden de bestanden en de middelen dan momenteel opgeslagen? Heb ik toegang tot de server waarop deze informatie wordt opgeslagen?
    • Als u een dynamische website wilt, welke server kan ik dan gebruiken om te testen of de gegevens dynamisch worden weergegeven? Heb ik de gegevens van de webtoepassingsserver die ik voor het laden van dynamische gegevens wil gebruiken?
    • Welk type middelen is vereist voor de website?
    • Zijn deze middelen helemaal opnieuw ontworpen? Als de middelen al beschikbaar zijn, heb ik dan toegang tot deze bestanden?
    • Welke apps moet ik gebruiken om middelen te ontwerpen?
    • Moet ik een interactieve website maken? 

    Als u een helder beeld hebt van de website die u wilt ontwikkelen en hoe en waar u deze wilt hosten, en Dreamweaver en Creative Cloud hebt gekozen voor het webontwikkelingsproces, gaat u naar de volgende stap.

  2. Controleer of u alle benodigde middelen hebt voor uw website. Verzamel en orden ze samen in uw lokale mappen of in de Bibliotheken van Creative Cloud van Adobe.

  3. Maak een nieuw document in Dreamweaver met:

    • Een nieuw, blanco document,
    • Startersjablonen die zijn verpakt met Dreamweaver, of 
    • Sjabloonbestanden (*.dwt) die door iemand anders zijn gemaakt

    Opmerking:

    Als u niet bekend bent met Dreamweaver of aan het leren bent over webontwikkeling, bieden de startersjablonen veel hulp bij de eerste stappen in het ontwerpen van webpagina's.

    Zelfs als u van plan bent om helemaal opnieuw te beginnen, is het een goed idee om een kijkje te nemen op deze pagina's om te begrijpen welke elementen een goed webontwerp moet bevatten.

  4. Neem een paar minuten de tijd om uzelf bekend te maken met de werkruimte van Dreamweaver. Zoek naar een werkruimte die bij u past en stel een kleurenthema in. Herken de verschillende deelvensters op een manier die u prettig vindt.

  5. Bouw uw site in Dreamweaver. Maak een mappenstructuur met bestanden en middelen. Wanneer u uw gegevens hebt georganiseerd en een structuur hebt bepaald, kunt u uw site gaan maken. (Zie Over Dreamweaver-sites.)

    In deze fase is het verstandig om ook verbindingen met externe servers te maken en testservers op te zetten (als u dynamische inhoud hebt). 

  6. Start met het coderen van uw webpagina's in Code view, of ontwerp ze in Design / Live view.

    Als u van plan bent om Photoshop-samenstellingen te gebruiken, kunt u deze naar Dreamweaver extraheren en eraan werken. Voor meer informatie over het werken met Photoshop-samenstellingen, zie Extraheren in Dreamweaver CC.

    Voeg ontwerpelementen toe, zoals tekst, afbeeldingen, rollover-afbeeldingen, afbeeldingen met hyperlinks, kleuren, films, geluid, HTML-koppelingen, tabellen en nog veel meer.

  7. Pas de uitstraling van uw webpagina aan met CSS.

    U kunt in Dreamweaver op verschillende manieren met CSS werken:

    • U kunt de CSS handmatig coderen. Ga voor meer informatie over de coderingsfuncties van Dreamweaver die u helpen bij de handmatige codering van uw CSS naar Codeeromgeving in Dreamweaver.
    • Als u niet vertrouwd bent met het maken van CSS-pagina's, kunt u het deelvenster CSS Designer gebruiken om uw CSS te maken. Voor meer informatie, zie Pagina's Opmaken met CSS Designer.
    • Als u liever met Sass- en Less-bestanden werkt, is deze optie ook beschikbaar in Dreamweaver. U kunt Sass- en Less-bestanden in uw Dreamweaver-site opnemen en ermee werken. Dreamweaver compileert deze dan automatisch (of u kunt ervoor kiezen om ze handmatig te compileren) en u kunt de resultaten van uw CSS-wijzigingen in real time bekijken. Ga voor informatie over het gebruik van Sass- en Less-bestanden met Dreamweaver naar CSS-preprocessors.
  8. Een webtoepassing instellen om dynamische inhoud te maken.

    Veel websites bevatten dynamische pagina's waarmee bezoekers gegevens kunnen bekijken die in databases zijn opgeslagen, en waarmee sommige bezoekers gewoonlijk nieuwe gegevens aan de databases kunnen toevoegen of bestaande gegevens kunnen bewerken. Als u dergelijke pagina's wilt maken, moet u eerst een webserver en toepassingsserver instellen, een Dreamweaver-site maken of wijzigen, en verbinding maken met een database. Voor meer informatie, zie Dynamische websites, pagina's en webformulieren.

  9. Dynamische pagina's maken.

    In Dreamweaver kunt u diverse dynamische inhoudsbronnen definiëren, waaronder recordsets die uit databases zijn gehaald, formulierparameters en JavaBeans-componenten. U kunt de dynamische inhoud gewoon naar de pagina slepen om deze toe te voegen.

    U kunt de pagina zo instellen dat er een of meer records tegelijkertijd worden weergegeven, of dat er meer dan één pagina met records worden weergegeven. U kunt speciale koppelingen toevoegen om van de ene pagina met records naar de volgende (of vorige) te gaan en recordtellers maken zodat gebruikers de records kunnen bijhouden. Voor meer informatie, zie Dynamische websites, pagina's en web formulieren.

  10. Uw website testen, bekijken en publiceren. 

    Wanneer u pagina's maakt, moet u deze bekijken om te controleren of uw website werkt volgens het ontwerp. U kunt coderen in de Gesplitste weergave om uw Code- en Liveweergave naast elkaar te houden.

    U kunt ook in real time webpagina's controleren op een apparaat (als u interactieve webpagina's maakt), of in een browser.

    Als u geen livepreview nodig hebt, kunt u de gewone preview in de browser gebruiken.

    Als u al verbindingen met externe servers hebt gedefinieerd, kunt u uw website publiceren door uw bestanden op de server op afstand te plaatsen om deze live te maken.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid