WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN

2014-201000018-1B

WEBSITE-DESIGN INHOUD COLLEGE

 Stappenplan: stap 4  HTML, Stylesheets – vervolg

slides @ vanslooten.com/websitedesign Website-design

1-12-2014

2

PORTFOLIO OPDRACHT STAPPENPLAN: 4-6

STAPPENPLAN

4 Kies een basisontwerp voor de site, maak testpagina’s met beeld, tekst en navigatie.

5 Hergroepeer eventueel het werk en heroverweeg het ontwerp en herschrijf de teksten.

6 Maak de site en verfijn het ontwerp en de teksten. portfolio-opdracht v2 @ vanslooten.com/websitedesign Website-design

1-12-2014

3

EN BOUWEN 4 KIEZEN UITGANGSPUNT: CONCEPT-SCHETSEN  Kies een basisontwerp voor de site  Maak een keuze uit de geschetste concepten (stap 3)

 Maak testpagina’s met beeld, tekst en navigatie  Baseer de eerste test-versie van je site op de gekozen schets en de structuur (stap 2 en 3!)  Verken de mogelijkheden van de techniek: (stap 5) kan ik mijn ontwerp realiseren?

Website-design

1-12-2014

4

EN BOUWEN 4 KIEZEN WIL JE VERDER MET STAP 4 – 6?  Voordat je verder gaat: akkoord voor stap 1-3 van Chris en Fjodor  Wat willen we zien? 1 2 3 1) het verzamelde werk 2) indeling (structuur) van dat werk 3) begeleidende teksten (kort en bondig) 4) structuur van de site 5) concepten: schetsen hoe de site er uit komt te zien (minimaal drie verschillende) Alles meenemen, op papier, incl. ‘thumbnails’ verzamelde werk Website-design

1-12-2014

5

CSS: SELECTIE VAN ELEMENTEN selector { stijlregel; ... }

 Met Id: #  Enkel, uniek element  Met Class: .  Groep van elementen selecteer lijstelementen met de class 'current' binnen een element met id 'menu'

selecteer alle elementen met de class 'paragraaf'

selecteer lijstelementen binnen een element met id 'menu'

style.css

#menu li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black; } #menu li.current { background: #99CCFF; border-right: 1em solid grey; } .paragraaf { font-size:1em; }

index.html w3schools: selectors, selector reference

Deze paragraaf gebruikt de stijlWebsite-design ‘paragraaf’

1-12-2014

6

CSS: SELECTIE VAN ELEMENTEN  Basis-menu, zichtbare selectie: class current voor actief menu item Selectie dmv. id Selectie dmv. class

thoughts.html



Voorbeeld: menu 1-12-2014

Website-design

7

HTML/CSS MENU’S MAKEN

 Verschil normale stijl lijst-element en die met class current : background en grijze rand rechts  Hover: element veranderd als je muis er over beweegt style.css #menu li { background: white; margin: 0.5em; padding: 0.3em; border-right: 1em solid black; } #menu li:hover { background-color: #CCFFFF; } #menu li.current { background: yellow; border-right: 1em solid grey; }

w3schools: hover, selectors, selector reference Website-design

1-12-2014

8

HTML/CSS MENU’S MAKEN

VARIATIE: PLAATJE ALS ACHTERGROND



thoughts.html

<style> #menu li.current { background-color: #99CCFF; padding-left: 24px; background-image: url('images/selector.png'); background-repeat: no-repeat; background-position: left center; border-right: none; }

Externe stylesheet – in file style.css Interne stylesheet – binnen HTML code

9 w3schools: 1-12-2014 background

Website-design

VARIANT: EEN HORIZONTAAL MENU

 style.css ipv style2.css…  Wat is er anders?  Alleen de stylesheet!

 Zie commentaar in stylesheets  float:left zorgt dat elementen naast elkaar komen  width is verplaatst van ul naar li elementen in menu

#menu li { border-top-left-radius: 12px; margin-right: 2px;

#menu li { float: left; width: 9em;

Voorbeeld: menu met style2.css 10 Website-design 12/1/2014

STYLESHEETS: MEDIA REGELS CSS MEDIA QUERIES

Commentaar in stylesheet



/* wat doen we als de breedte van het device minder dan 500px is?: */ @media (max-width: 500px) { div.content { padding-left: 1em; margin-top: 12em; } #menu ul { top: 0.5em; } }

css-tricks.com/css-media-queries w3schools: media queries Website-design

1-12-2014

11

STYLESHEET: INTERN, EXTERN  En ‘inline’…  Best: extern, in een file, want: kan gedeeld worden in site <style> p { background-color:grey; color:blue; }

Inline style

Paragraaf met eigen stijl.

Pas op: Volgorde van toepassing (cascading) Resultaat: gecombineerde stijl!

Voorbeeld: stijl Website-design 1-12-2014 w3schools: CSS How12to