DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.

Presentatie over: "DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je."— Transcript van de presentatie:

1 DIV Architecture Seminarie Webdesign

2 CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je stijl.css in dezelfde map zit als je webpagina’s. In je CSS-bestand zijn nooit, of tags of andere -tags die tussen staan.

3 CSS-formule Je kunt iedere HTML-tag zoals,,, enzovoort opmaken met CSS en dat met een vaste formule. body {eigenschap: waarde;} b {eigenschap: waarde; eigenschap: waarde; eigenschap: waarde;} p {eigenschap: waarde;} Je kunt dus verschillende eigenschappen programmeren voor eenzelfde HTML-tag zoals bij b in het voorbeeld. Als je Expression Web Design gebruikt, dan krijg je in het CODE- scherm van je bestand een keuzemenu om uit te kiezen als je jouw CSS-file codeert.

4 CSS en classes Je kunt voor eenzelfde HTML-tag verschillende CSS-lay-outs maken. Schrijf in je CSS een punt gevolgd door een naam na de HTML-tag. Bv. b.spruitjes {color:red} Bv. b.konijn {color:green} In je HTML-code moet je nu met class=“” laten weten welke je definitie je wilt volgen. Bv. Deze tekst wordt groen. Bv. Deze tekst wordt rood.

5 DIV-structuur: HTML Experimenteren met DIV stijl.css Div 1 Div 2 Div 3 Div 4 Div 5

6 DIV-structuur: CSS Met kun je een tekstvak op je webpagina plaatsen en positioneren. Een voorbeeld van CSS-code: Van iedere tekstbox kun je breedte (width) en hoogte (height) definiëren. #div1 {width:900px; height:50px; position:relative; background-color: #CCC; text-align: left; margin: 0 auto;} #div2 {width:300px; height:550px; position:relative; background-color: #999; float:left; text-align: left; margin: 0 auto; } #div3 {width:300px; height:550px; position:relative; background-color: #CCC; float:left; text-align: left; margin: 0 auto; } #div4 {width:300px; height:550px; position:relative; background-color: #999; float: right; text-align: left; margin: 0 auto; } #div5 {width:900px; height:50px; position:relative; background-color:#CCC; text-align: left; margin: 0 auto; } #yuno {width:900px; height:650px; margin: 0 auto; text-align: center; }

7 DIV-structuur: CSS Een voorbeeld van CSS-code: Met float:left en float:right kun je DIV-tekstboxen links of rechts van elkaar laten verschijnen. Zonder float komen de tekstboxen onder elkaar te staan. De yuno-div omarmt alle tekstboxen en zet de site door zijn codereing in het midden ongeacht de beeldschermgrootte. #div1 {width:900px; height:50px; position:relative; background-color: #CCC; text-align: left; margin: 0 auto;} #div2 {width:300px; height:550px; position:relative; background-color: #999; float:left; text-align: left; margin: 0 auto; } #div3 {width:300px; height:550px; position:relative; background-color: #CCC; float:left; text-align: left; margin: 0 auto; } #div4 {width:300px; height:550px; position:relative; background-color: #999; float: right; text-align: left; margin: 0 auto; } #div5 {width:900px; height:50px; position:relative; background-color:#CCC; text-align: left; margin: 0 auto; } #yuno {width:900px; height:650px; margin: 0 auto; text-align: center; }

8 DIV-structuur: Achtergrondafbeelding Een voorbeeld van CSS-code: In de yuno-DIV kun je ook een achtergrondafbeelding plaatsen voor de hele site met de volgende code: background-image: url(mijnafbeelding.jpg); Zorg ervoor dat je afmetingen van je DIV-box voldoende groot is voor je afbeelding! #div1 { width:900px; height:50px; position:relative; text-align: left; margin: 0 auto;} #div2 { width:300px; height:550px; position:relative; float:left; text-align: left; margin: 0 auto; } #div3 { width:300px; height:550px; position:relative; float:left; text-align: left; margin: 0 auto; } #div4 { width:300px; height:550px; position:relative; float: right; text-align: left; margin: 0 auto; } #div5 { width:900px; height:50px; position:relative; text-align: left; margin: 0 auto; } #yuno { background-image: url(mijnafbeelding.jpg); width:900px; height:650px, margin: 0 auto; text-align: center; }