Dreamweaver Web Page Design Tutorials

Dreamweaver Web Page Design Tutorials


Een keurig ontworpen webpagina trekt bezoekers naar een website en houdt hen terugkomend. Codering van een effectieve layout kunnen echter een tijdrovende en moeilijke taak. Gelukkig, biedt Dreamweaver kant en klare sjablonen die correct weergegeven in belangrijke browsers en past bij de behoeften van elke webpagina. Informatie over het gebruik van deze sjablonen voor uw eigen web-projecten.

Lege pagina

Bij de lancering van Dreamweaver, kies "New" uit het menu "Bestand" om het dialoogvenster 'Nieuw Document', en selecteer de "Lege pagina" optie. Deze lege pagina's zijn eerder gecodeerde documenten die komen in verschillende lay-outs, die ideaal zijn voor documenten die niet nodig hebben een thema.

Lanceren een lege pagina door te klikken op de "Lege pagina" optie aan de linkerkant. Blijven de kolom "Paginatype" om de selectie van een document te maken. Voor webdesign, selecteer u doorgaans de "HTML" of "HTML template" type. Selecteer "HTML" om een basic bestand, of "HTML template" te maken naar een model maken bestand dat kunt u kopieƫn van.

Vervolgens, ga naar de "Layout" kolom en klik op de namen van de kolomindelingen te bekijken van de lay-outs aan de rechterkant. Onder de preview biedt Dreamweaver gunstig een verklaring van wat de lay-out doet. Bijvoorbeeld, een "elastische" pagina strekt zich uit met de tekengrootte, een 'vaste' optie blijft dezelfde breedte en hoogte niet uit wat, en een "vloeibaar" lay-out in procenten is geconfigureerd, zodat de pagina verkleind en breidt uit met de webbrowser. U kunt ook het aantal kolommen en positionering bekijken.

Blijven door opties te selecteren in de menu's "DocType" en "Layout CSS". De "Doctype" kunt u de versie die u de webbrowser om te controleren de syntaxis tegen wilt selecteren. Dreamweaver de opties bereik van "HTML 4.01 Transitional" naar "XHTML Mobile 1.0", met elke serveert een specifieke doel, zoals codering van pagina's met frames of het bekijken van documenten op mobiele apparaten. Het "Layout CSS" drop-down menu kunt u bepalen waar de Cascading Style Sheets (CSS)-code in uw webpagina bestand gaat. In het algemeen hebt u slechts een paar lijnen van opmaakregels, werkt de "Add to Head" optie goed; Nochtans, als u een lange stylesheet hebt, kiezen de "Maak nieuw bestand" of "Link naar bestaande bestand" om ervoor te zorgen dat u niet langer pagina te laden keer doen oplopen.

Ten slotte, na het maken van de selecties, klikt u op de "Create" knop om te starten de lay-out-sjabloon. U kan nu het bewerken van de pagina toe te voegen inhoud en sla het bestand u wilt bekijken.

Pagina van monster

Selecteer de optie 'Page van Sample' in het dialoogvenster 'Nieuw Document' om te kiezen van een professioneel ontworpen document. Deze sjablonen bevatten specifieke zoekt een verscheidenheid aan bedrijfstakken en werken goed voor die projecten waarvoor de styling reeds op zijn plaats.

Begin met het selecteren van de optie "Startpagina (thema)" in de kolom "Monster map". U kunt kiezen uit "Entertainment", "Gezondheid & voeding", "Accommodatie", "Personal Training", "Restaurant", "Spa" en "Reizen." Elke categorie bevat bovendien een specifieke pagina, zoals "Catalogus" of "Agenda." Markeer uw selectie in de kolom "Voorbeeldpagina" en bekijken van de lay-out en pagina beschrijving aan de rechterkant.

Nu, selecteer een "DocType" optie in het drop-down menu. Nogmaals, keuzes variƫren in HTML naar XHTML versies en moeten worden gekozen volgens welke de webpagina bevat en waar het is bekeken. Klik op de "Create" knop na het maken van een selectie.

Vervolgens een naam en sla de sjabloon op in het dialoogvenster en volg de prompt de locatie waarin u de sjabloonbestanden gekopieerd naar wilt selecteren. Nadat u het document opslaat, worden alle CSS en tijdelijke aanduidingen voor afbeeldingen weergegeven.

Als u wilt bewerken van de lay-out, zoals het toevoegen van uw eigen afbeeldingen of tekst, dubbelklikt u op een gebied in het ontwerpvenster en volg alle aanwijzingen. U kan menubalken koppelen door te klikken op links en de werkbalk "Eigenschappen" om het juiste bestand te selecteren.

Tot slot kunt u enig gedeelte van de CSS-bestand dat is voorzien van de sjabloon kunt aanpassen. Om dit te doen, ga naar het CSS-venster en selecteer "Huidige" om te bewerken een specifieke functie, of selecteer het tabblad "Alle" om een volledige lijst met Opmaakregels weergeven.

Sparen het dossier en gebruik van uw browser "Preview"-functie om uw werk weer te geven.