Sjabloonsite Koen Van Cauwenberge.

Presentatie over: "Sjabloonsite Koen Van Cauwenberge."— Transcript van de presentatie:

1 Sjabloonsite Koen Van Cauwenberge

2 Sjabloonsite Sjabloonsite op webruimte: bv. Download bestanden op computer via WebFtp. Uitleg over DIV-opmaak:

3 Lijst van bestanden in EINDWERK
index.html (opstartbestand) webpagina2.html webpagina3.html contacteerons.html style.css is de motor van de site Achtergrondafbeelding is achtergrond.jpg in de map IMAGES

4 Structuur van de sjabloonsite

5 DIV-opbouw Banner: 1000px breed en 50px hoog (#banner)
Horizontaal menu: 1000px breed en 50px hoog met vier links al (#horizontaalmenu) Linkertekstvak: 300px breed en 650px hoog (#tekstvakmainlinks) Rechtertekstvak: 800px breed en 650px hoog (#tekstvakmainrechts) Colofon: 1000px breed en 50px hoog (#colofon)

6 DIV-opbouw De vier tekstvakken gemaakt met DIV zitten zelf in een vak genaamd #container die ze samen houdt. De afmetingen van deze container-DIV is 1000px breed en 800px hoog. De container laat de tekstvakken precies in het midden van om het even welk scherm verschijnen. De achtergrondafbeelding van deze container en zo voor de hele site is achtergrond.jpg en die zit in de map IMAGES.

7 DIV-declaratie in HTML-bestand
Index.html bijvoorbeeld <div id="container"> <div id="banner">Tekst … </div> <div id="horizontaalmenu">Links … </div> <div id="tekstvakmainrechts">Tekst … </div> <div id="tekstvakmainlinks">Tekst … </div> <div id="colofon">Tekst … </div> </div>

8 DIV-declaratie in CSS-bestand
#container { margin:0 auto; width:1000px; height:800px; background-image: url(images/achtergrond.jpg); background-repeat:no-repeat; background-position:center; } #banner { position:relative; height:50px; z-index:1; left: 0px; top: 0px; Style.css

9 DIV-declaratie in CSS-bestand
#horizontaalmenu { position:relative; width:1000px; height:50px; z-index:1; left: 0px; top: 0px; } #tekstvakmainlinks { float: right; width:200px; height:650px; z-index:3; overflow-x: none; overflow-y: auto; Style.css

10 DIV-declaratie in CSS-bestand
#tekstvakmainrechts { position:relative; float: right; width:800px; height:650px; z-index:3; left: 0px; top: 0px; overflow-x: none; overflow-y: auto; } #footer { clear: both; width:1000px; height:50px; z-index:4; Style.css

11 Speciale CSS-codes Opmaak van hyperlinks color: kleur aanpassen
text-decoration: onderstrepen van de link of niet a:link {color: #999; text-decoration: none; font-weight:bolder; outline: none;} a:visited {color: #CCC; text-decoration: none; font-weight:bolder; outline: none;} a:hover {color: #900; text-decoration: none; font-weight:bolder; outline: none;} a:active {color: #666; text-decoration: none; font-weight:bolder; outline: none;}

12 Speciale CSS-codes Opmaak van <h1> h1 {
font-family: Meiryo Bold, Verdana, Tahoma, sans-serif; font-size: 20pt; color: #6BAFFF; letter-spacing: 1px; line-height: 25pt; }

13 Speciale CSS-codes Lettertype en kleur instellen voor de hele site via BODY body { background-color: #000; font-family: Meiryo Bold, Helvetica, Arial, sans-serif; font-size: 9pt; line-height: 12pt; text-align: justify; color: #FFF; }

14 Speciale CSS-codes Tekst opschuiven binnen een DIV-vak.
In de HTML-code #tekstintekstvak { margin-top: 10px; margin-left: 70px; margin-right: 300px; } <div id=“banner”> <div id=“tekstintekstvak”>Hier tik ik mijn tekst die 70px van links zal blijven en 300px zal wegblijven van rechts binnen het DIV-vak van banner.</div> </div>

15 Speciale CSS-codes Een code specifiek voor één plaats met classes.
In de HTML-code .kleuraanpassen { color:#000000;} <p class=“kleuraanpasen">Alles staat hier nu in het kleur # </p>

16 Opdracht voor het eindwerk
Vergadering van maximaal half uur: Kies vier kleuren voor de hele site. Kies het logo. Maak een schets van de achtergrondafbeelding voor de site. Probeer hierbij de vierkanten te verbreken. Welke webpagina’s met welke informatie plannen jullie. Taakverdeling: Coder Graphical designer Contributor

17 CODER Manager van de groep en volgt de deadlines op. Helpt de anderen.
Past de kleuren van de letters, de achtergronden en de hyperlinks aan in style.css. Voegt de achtergrondafbeelding in en alle teksten. Zijn of haar site zal voor de hele groep beoordeeld worden.

18 GRAPHICAL DESIGNER Maakt in GIMP (of ander programma) een achtergrondafbeelding voor de hele site met 1000px bij 800px als afmetingen. Verzamelt al het beeldmateriaal en bewerkt die indien nodig. Codeert een fotoalbum in Javascript. Bezorgt alles steeds aan de CODER. Ondersteunt de CODER indien eerder klaar.

19 CONTRIBUTOR Schrijft alle teksten en vermijdt plagiaat.
Verzamelt alle links voor de site. Maakt het contactformulier. Bezorgt alles aan de CODER. Ondersteunt de CODER indien eerder klaar.