Handboek Annuleren

Webontwikkeling met Dreamweaver

 

 

Overzichtsworkflow voor het ontwerpen en ontwikkelen van websites met Dreamweaver

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 enige kennis van het web en van 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 ik bestaande websites naar Dreamweaver migreer, waar worden de bestanden en de assets dan momenteel opgeslagen? Heb ik toegang tot de server waarop deze informatie wordt opgeslagen?
    • Als ik een dynamische website wil, welke server kan ik dan gebruiken om te testen of de gegevens dynamisch worden weergegeven? Heb ik de gegevens van de webapplicatieserver die ik voor het laden van dynamische gegevens wil gebruiken?
    • Welke typen assets zijn vereist voor de website?
    • Zijn deze assets helemaal opnieuw ontworpen? Als de assets al beschikbaar zijn, heb ik dan toegang tot deze bestanden?
    • Welke apps moet ik gebruiken om assets te ontwerpen?
    • Moet ik een interactieve website maken? 

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

  2. Controleer of u alle benodigde assets 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 kleurthema in. Herken de verschillende deelvensters op een manier die u prettig vindt.

  5. Bouw uw site in Dreamweaver. Maak een mappenstructuur met bestanden en assets. 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 de codeweergave of ontwerp ze in de ontwerpweergave/Live view.

    Als u van plan bent om Photoshop-samenstellingen te gebruiken, kunt u deze naar Dreamweaver extraheren en eraan werken. Zie Extract in Dreamweaver voor meer informatie over het werken met Photoshop-composities.

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

  7. Pas het uiterlijk 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. Zie Pagina's Opmaken met CSS Designer voor meer informatie.
    • 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. Stel een webapplicatie in 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 een applicatieserver instellen, een Dreamweaver-site maken of wijzigen en verbinding maken met een database. Zie Dynamische websites, pagina's en webformulieren voor meer informatie.

  9. Maak dynamische pagina's.

    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. Zie Dynamische websites, pagina's en webformulieren voor meer informatie.

  10. Test, bekijk en publiceer uw website. 

    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 de codeweergave en Live View naast elkaar te houden.

    U kunt ook een real-time voorvertoning van webpagina's bekijken in een browser.

    Als u geen livevoorvertoning nodig hebt, kunt u de gewone voorvertoning in de browser gebruiken.

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

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?