View
685
Download
0
Category
Preview:
Citation preview
WEBCODELEERJAAR 1 REALISATIE
CODEER ZELF EEN RESPONSIVE WEBAPP MET HTML EN CSS
responsive webapp code
auteur: Raoul PostelWEBCODE HTML CSS
BRIEFING EN OPDRACHT
▸ Schrijf kort op wat de opdracht inhoudt
▸ Maak een lijst van de producteisen en specificaties, zoals: mappen-structuur, eisen aan de afbeeldingen en lettertype (webfont)
▸ Omschrijf het doel/thema van de opdracht
▸ Omschrijf de doelgroep
▸ Krijg antwoord op vragen die je nog hebt bij de opdrachtgever
▸ Stel de deadline vast
V
auteur: Raoul Postel
IDEE & SCHETSEN
▸ Bekijk het aangeleverde beeldmateriaal, Zijn de foto’s van voldoende kwaliteit?
▸ Lees de aangeleverde tekst
▸ Google op Responsive webdesign en bekijk de website: w3schools.com
▸ Maak een lijstje van onderdelen die er zeker in moeten komen, zoals: logo titel, nieuws, socialmedia, video, contact, slideshow en tekst
▸ Schets met potlood of pen kleine de layout in 1-2 en 4 kolommen
V
WEBCODE HTML CSS
auteur: Raoul Postel
OPZET HTML IN CODE-EDITOR
▸ Maak een mappenstructuur aan met:een hoofdmap (= root) en daarin een map: images en een map css
▸ Maak een nieuw document aan in een code-editor, zoals Textwrangler, Brackets, SublimeT
▸ Start met de HTML-opbouw: doctype, html, head, title, body
▸ Bewaar als: index.html in de root-map
▸ Plaats de tekst tussen de body-tags
▸ Breng teksthierarchie aan met:h1-h6, p, strong, em, ul ol li, table tr td
▸ Omsluit de teksten met de tags:header, nav, section, article, footer
V
WEBCODE HTML CSS
Bijbehorende Tutorial op : www.designtraingen.nl
auteur: Raoul Postel
AFBEELDINGEN IN HTML
▸ Zet de afbeeldingen in Photoshop om naar RGB 150 dpi.
▸ Bewaar ze als PNG in de images-map
▸ img src=“images/afbeelding.png”
▸ Voor visueel gehandicapten is het goed om title=“omschrijving” toe te voegen. Deze title-tags helpen ook voor de zoekmachines.
V
WEBCODE HTML CSS
auteur: Raoul Postel
LINKS IN HTML
▸ a href=“index.html”
▸ a href=“http://google.com”
▸ links werken op een stuk tekst of met afbeeldingen
▸ Om een nieuw venster te openen voeg je target=“_blank” toe
▸ Voor zoekmachines is het goed om alt=“omschrijving” toe te voegen.
V
WEBCODE HTML CSS
auteur: Raoul Postel
HTML META TAGS
▸ Plaats in de head-section de standaard metadata voor zoekmachines: charset, http-equiv, name.
▸ Plaats in de head-section de link naar een webfont.
▸ Plaats in de head-section de link naar een CSS-document.
▸ Plaats in de head-section de link naar de javascript-bibliotheek.
V
WEBCODE HTML CSS
auteur: Raoul Postel
CASCADING STYLE SHEETS
CSS is vergelijkbaar met InDesign werken in kaders waarin je beeld en tekst plaatst.
Hoe een kader of typografie heet en er uit ziet beschrijf je in een apart CSS-document.
Waar een kader of typografie moet staan beschrijf je in het HTML-document.
<body>
<div id=”content”> tekst in het content-kader </div>
<div class=”blokje”> <p>tekst in het blokje</p>
</div>
</body
WEBCODE HTML CSS
HTML
CSS SELECTORS
auteur: Raoul Postel
TAG DIV CLASS
p { font-family: Arial, Helvetica, sans serif: color: #CCCCCC:
}
#content { background-color: #FFFFFF; width: 994px;
}
.blokje { background-color: #F5E032; margin: 5px; width: 100px; height: 100px;
}
WEBCODE HTML CSS
TAG (html)
IDmag 1 x voorkomen
CLASS mag vaker voorkomen[meest gebruikt]
auteur: Raoul Postel
OPZET CSS IN CODE-EDITOR
▸ Maak een nieuw document aan in een code-editor zoals Textwrangler, Brackets, SublimeT.
▸ Bewaar als: layout.css in de map css.
▸ Start met de vormgeving van de body-tag, met daarin: background, margin, font-family, font-size.
▸ Breng teksthierarchie aan met:h1-h6, p, strong, em, ul ol li, table tr td
▸ Omsluit de teksten met de tags:header, nav, section, article, footer.
V
WEBCODE HTML CSS
Bijbehorende Tutorial op : www.designtraingen.nl
auteur: Raoul Postel
TYPOGRAFIE CSS
▸ Kies een lettertype voor de titel/kop. Gebruik bij voorkeur een webfont dat lijkt op het font uit de huisstijl
▸ Kies een lettertype voor de leestekst. Bij voorkeur met varianten vet en cursief
▸ Bepaal met CSS de grootte (100%) en regelafstand (line-height) van de leestekst.
▸ Leg met CSS kleur-accenten in de tekst, zoals kleur voor koptekst (h1), rollovers (a href), opsommingen (ul ol li), leestekst uitsparen (p)
▸ Test in de browser
V
WEBCODE HTML CSS
auteur: Raoul Postel
HEADER ARTICLE FOOTER
▸ Bepaal de vormgeving van de header- article- en footer—tag, met daarin: background, margin, padding, width (%) en min-height (px)
▸ Door een witte background-color te combineren met transparantie krijgen de blokken een tint-kleur van de body background-color. Dat geeft eenheid en rust in kleur
▸ Padding wordt altijd opgeteld bij de hoogte en breedte van een blok
▸ Test in de browser
V
WEBCODE HTML CSS
auteur: Raoul Postel
STYLING VAN DE NAVIGATIE
▸ Maak de volgende classes aan: hele_breedte, halve_breedte kwart_breedte en geef ze ieder een eigen width in %
▸ Voeg onderaan het css-document een pseudo class toe voor breedbeeld, tablet en smartphone
▸ Kopieer de eerder gemaakte classes en verander de width voor de verschillende schermvariaties
V
WEBCODE HTML CSS
auteur: Raoul Postel
RESPONSIVE BREEDTES
▸ Maak de volgende classes aan: hele_breedte, halve_breedte kwart_breedte en geef ze ieder een eigen width in %
▸ Voeg onderaan het css-document een pseudo class toe voor breedbeeld, tablet en smartphone
▸ Kopieer de eerder gemaakte classes en verander de width voor de verschillende schermvariaties
V
WEBCODE HTML CSS
auteur: Raoul Postel
OVERIGE STYLING
▸ lijnen
▸ transparantie
▸ icoontjes
▸ achtergronden
V
WEBCODE HTML CSS
auteur: Raoul Postel
CORRECTIES
▸ Zet de demowebsite online op een test-domein en test de werking ervan in diverse browsers en verschillende apparaten
▸ Bespreek dit met de opdrachtgever
▸ Voer de correcties door
V
WEBCODE HTML CSS
Recommended