Hoe Maak Je Een Website-layout?

Inhoudsopgave:

Hoe Maak Je Een Website-layout?
Hoe Maak Je Een Website-layout?

Video: Hoe Maak Je Een Website-layout?

Video: Hoe Maak Je Een Website-layout?
Video: Create Awesome Web Designs | Layout Design Tutorial 2024, Mei
Anonim

In de vorige eeuw was de lay-out van webpagina's het domein van enkele professionals. Vooruitgang in technologie heeft deze taak sterk vereenvoudigd. Nu kan elke internetgebruiker een website maken.

Hoe maak je een website-layout?
Hoe maak je een website-layout?

Het is nodig

  • - softwarepakket voor het opmaken van webpagina's;
  • - een grafische rastereditor voor het maken van ontwerpelementen.

instructies:

Stap 1

Maak een lijst van de elementen die op de site aanwezig zullen zijn. Dit kunnen onderdelen zijn als een navigatiemenu, een zoekformulier, een reclame- of informatiebanner, een vriendenlijst. De naam van het project wordt meestal bovenaan de pagina aangegeven, er kan een horizontaal navigatiemenu zijn. Het centrale deel is toegewezen aan de hoofdinhoud van de site. Onderaan de pagina worden meestal aanwezigheidstellers geplaatst, contactgegevens voor feedback.

Stap 2

Maak een websitelay-out in een grafische editor. De belangrijkste taak hier is om het uiterlijk van de elementen, hun relatieve positie, te bepalen. Gebruik niet te felle kleuren. Een neutraal kleurenpalet wordt het best waargenomen. Gebruik een consistente stijl voor de blokken. Probeer het ontwerp zo gebruiksvriendelijk mogelijk te maken. Vermijd elementen die moeilijk te implementeren zijn in HTML en CSS.

Stap 3

Sla de pagina-indeling op in bitmapformaat zonder kwaliteitsverlies. Definieer de stijlelementen die moeten worden weergegeven met HTML. Dit kunnen menu's, links, tabellen, zoekformulieren zijn. Pak de rest van de elementen uit de lay-out en sla ze op in aparte bestanden. Maak twee tekstdocumenten op uw harde schijf. Verander de extensie van een van hen in.htm. Het zal de code bevatten die verantwoordelijk is voor de relatieve positie van de elementen. Het tweede bestand bevat de stylesheets.

Stap 4

Open het eerste bestand in een HTML-editor. Plaats op de pagina ontwerpelementen die eerder in bitmapbestanden zijn opgeslagen. Maak tekstlinks, tabellen en andere elementen die in HTML moeten worden weergegeven. Attributen van elementen, zoals kleur, lettergrootte, aanwezigheid van randen, schrijven in een CSS-bestand. Gebruik JavaScript als u pagina-elementen moet animeren.

Aanbevolen: