Interactief blok 2 code opdracht 6 - wireframe

Maat: px

Weergave met pagina beginnen:

Download "Interactief blok 2 code opdracht 6 - wireframe"

Alfons Dirk de Graaf
7 jaren geleden
Aantal bezoeken:

1 Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen). pen Dreamweaver en maak een HTML bestand aan. Sla deze op als index.html. Maak een nieuw CSS bestand in Dreamweaver. Sla deze op als style.css. Koppel de css. Dat doe je door de volgende code aan je HTML toe te voegen (let op de plek! Dit moet tussen de <head> en de </head> tag. Nu gaan we de CSS voorbereiden. Google CSS reset, en kopieer de code van Eric Meyer. Ga naar je stylesheet en haar daar alle code weg, en plak dan de CSS reset. Deze code reset alle browserinstellingen. Nu weet je zeker dat je site er straks in alle browsers hetzelfde uitziet. nderaan de CSS reset voeg je de volgende code toe: het grijs is een comment. Tussen de /* en */ kun je alles neerzetten wat je wil, bijvoorbeeld aantekeningen. De code daaronder is om straks het bouwen van de site makkelijker te maken. Details kun je opzoeken in je boek.

2. Het HTML wireframe maken Pak je photoshop ontwerp erbij. In HTML werk je met blokken. Je ontwerp ga je ook in blokken verdelen. Hieronder is dat voorgedaan.

2 2. Het HTML wireframe maken Pak je photoshop ontwerp erbij. In HTML werk je met blokken. Je ontwerp ga je ook in blokken verdelen. Hieronder is dat voorgedaan. Je kan dit snel schetsen op papier of tekenen in PS/AI. Laat je werk checken door je docent voordat je verder gaat: Deze blokken ga je nabouwen in je HTML. Je kan daar 2 verschillende soorten code voor gebruiken: De DIV HTML 5 layout Is het standaard bouwblok in de HTML. Je geeft deze een extra naam om straks de blokken een andere maat of achtergrond te kunnen geven. Sommige dingen komen in elke layout voor: zoals een header of een footer. Daarom zijn er een paar tags met een eigen naam gemaakt. Ze werken net zoals een <div>. <div id="voorbeeld"> </div> <div class="voorbeeld"> </div> Class en id werken hetzelfde. De class gebruik je als je meer dezelfde blokken hebt: dan kun je ze straks in 1x dezelfde regel geven. <header> </header> <nav> </nav> <footer> </footer> <article> </article>

Ga nu je blokken bouwen in de HTML. Dat doe je tussen de <body> en de </body> tag. Hier zie je een voorbeeld in de code.

ok blokken naast elkaar zetten komt nog. Zorg dat je goed kijkt welke blokken in elkaar staan, en welke er buiten staan.

Check: - Staan er foutjes in de code? Dreamweaver helpt je door typfouten een andere kleur te geven.

3 Ga nu je blokken bouwen in de HTML. Dat doe je tussen de <body> en de </body> tag. Hier zie je een voorbeeld in de code. De echte blokken zijn nog niet te zien in de browser. Ze hebben nog geen hoogt en breedte of kleur. Dat doe je later met CSS. ok blokken naast elkaar zetten komt nog. Zorg dat je goed kijkt welke blokken in elkaar staan, en welke er buiten staan. Kies zelf of je het beste een <div> met een naam kan gebruiken, of een nieuwe HTML5 tag zoals <header>. Check: - Staan er foutjes in de code? Dreamweaver helpt je door typfouten een andere kleur te geven. - Is alles netjes geopend en gesloten? Deze HTML blokken bestaan altijd uit twee tags: <div> om te openen en </div> om te sluiten. - Wil je zeker weten dat het goed is, laat dan google je code controleren:

Als je rechtermuisklikt op de liniaal, kun je pixels kiezen. - In het hoofdmenu kun je bij Venster > Info het informatiepaneeltje openen.

4 3. CSS gebruiken voor het wireframe Nu ga je met de CSS de blokken de goede maat geven. De maat in pixels kun je opzoeken in Photoshop of Illustrator. Hier de handleiding voor Photoshop: Photoshop blokken opmeten: - Zet de maten allemaal op pixels. Dat kun je het snelst doen door de linialen aan te zetten met +R. Als je rechtermuisklikt op de liniaal, kun je pixels kiezen. - In het hoofdmenu kun je bij Venster > Info het informatiepaneeltje openen. - Met het selectiegereedschap (foto hieronder, links) kun je blokken gaan meten. De breedte (b) en hoogte (h) staan in het info-paneel. m een regel te schrijven voor een blok moet je die in CSS selecteren. Dat doe je door de goede selector te kiezen. Daarna zet je tussen de { haakjes } wat je precies wil doen met die HTML. In je boek staan allerlei CSS voorbeelden, om je code precies zo te maken als je ontwerp in AI en PS.

Wat is de goede selector? Kijk naar je HTML. Welke heb je nodig? HTML: CSS: <div id="voorbeeld"> </div> #voorbeeld { } <header> </header> header { } <div class="voorbeeld"> </div>.

5 Wat is de goede selector? Kijk naar je HTML. Welke heb je nodig? HTML: CSS: <div id="voorbeeld"> </div> #voorbeeld { } <header> </header> header { } <div class="voorbeeld"> </div>.voorbeeld { } Ga een regel schrijven voor je eerste blok. Hier zie je een voorbeeld. Geef het blok een kleur (een tijdelijke kleur hem goed te kunnen zien), een height, en een width. Wil je blokken naast elkaar zetten? Zet geef ze allebei display:inline-block; of float:left; Hier zie je twee voorbeelden. Meer informatie staat in je boek.

6 Ruimte tussen je blokken kun je toevoegen met margin (ruimte aan de buitenkant van een blok) en padding (ruimte aan de binnenkant van een blok): Ga zo door tot je wireframe helemaal op de goede plek staat.

4. Tips & tricks De site in het midden zetten Dit doe je door het Als je een breedte in pixels hebt gegeven, dan kun je met

Een achtergrondkleur voor Een achtergrondkleur voor de hele site stel je met CSS in voor de <body> </body> tag.

Een flexibele site Je hoeft niet per se in pixels te bouwen. Bouwen met procenten (in de breedte) zorgt dat de site mee-rekt met de browser.

7 4. Tips & tricks De site in het midden zetten Dit doe je door het Als je een breedte in pixels hebt gegeven, dan kun je met margin-left:auto; en margin-right:auto; de site in het midden zetten. Een achtergrondkleur voor Een achtergrondkleur voor de hele site stel je met CSS in voor de <body> </body> tag. Je kunt ook kleur instellen met een hexcode (zoals hieronder) of in RGBa of HSLa. Dreamweaver helpt je hierbij tijdens het typen. Een flexibele site Je hoeft niet per se in pixels te bouwen. Bouwen met procenten (in de breedte) zorgt dat de site mee-rekt met de browser. Hieronder zie je een site die 90% breed is, en om 'm in het midden te houden, links en rechts een beetje margin heeft. Zorg dat het totaal weer 100% is! Minimale hoogte en breedte Het is niet altijd goed om een blok een vaste hoogte te geven (een maat in pixels). Als er dan meer tekst of foto's in komen te staan, dan rekt het niet mee. Een alternatief is min-height. Dan wordt ie minimaal die grootte, en als er meer inhoud is, wordt ie langer. Hij bestaat ook voor de breedte (min-width), en het tegenovergestelde (max-height) bestaat ook.

Vergelijkbare documenten

HTML&CSS OEFENBOEKJE. van:

HTML&CSS OEFENBOEKJE. van: HTML&CSS OEFENBOEKJE van: HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen , en een tag om te sluiten . De letters die tussen de staan, geven aan wat voor