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.

Slides:



Advertisements
Verwante presentaties
Bouw zelf een digitaal visitekaartje
Advertisements

Pagina-instelling.
Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Beginnen met PowerPoint Ga nu naar dia 2.
Korte handleiding: een ppt met sneeuweffect…
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
Een digitaal verhaal maken
Les 4 cursus WordPress. Wat gaan we doen (1) 1. Importeren via Word problemen 2. Alle pagina’s en berichten verwijderen, incl prullenbak leegmaken 3.
Paginanaam aanpassen Activeren of deactiveren vd pagina Verwijderen vd pagina NOOIT OP KLIKKEN Geen functie.
DIA-OPMAAK (1) Dia-indeling H van Breugel A van der Coelen.
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
PowerPoint creatief met effecten
HTMLHTML UITLEG & CURSUS. Inleiding HTML: Hyper Text Mark-up Language.
Het oog wil oog wat. Kijk ook op
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
WordPress les 3.
Crashcursus HTML en CSS 2013
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Webpublicatie 1 HTML 4. Cascading Style Sheets ILSO - Webpublicatie2 4.1 Cascading Style Sheets HTML-code MET blitse titels CASCADING STYLE.
Door Jasper Lanoote, 2007, Hogeschool Antwerpen Departement lerarenopleiding.
Mijn eerste Website bouwen
WordPress Les 10.
Welkom bij workshop webdesign
Starten met PHP Dynamischer bouwen. PHP is een een scripttaal waarmee de server pagina’s in elkaar kunt laten zetten. Het verschil met HTML: Een php pagina.
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
TM RM Zo ziet een stukje EEG van 2 seconden eruit. Veel ruis dus. Het trial marker kanaal geeft twee pulsen (TM), dat is een pijl naar rechts op het scherm.
Basis vaardigheden PowerPoint
Instructie weblog. Start van je eigen weblog 1) Ga naar weblog.aocfriesland.nl 2) Je krijgt het volgende scherm te zien. 3) Ga naar inloggen, zowel links.
HTML De basis-elementen.
Design je eigen web-pagina Met behulp van Photoshop.
JQuery CarouFredsel Gemaakt door Yannick. Inhoudstafel O CarouFredsel O Wat is CarouFredsel ? O Downloaden O Script O HTML O CSS O Javascript O Voorbeelden.
De basis-elementen Deel 2
Css basics. terminologie Block level element Inline element Css – eigenschap : display : Voorbeeld : display eigenschap en genummerde lijst.
Bestand in een map opslaan. Stap 1 Waar klik ik?
Beeldbewerking.
Java Objectgeoriënteerd Programmeren in Java met BlueJ
Hoofdstuk 20 Oefeningen Afbeeldingen toevoegen – Afbeeldingen invoegen vanuit een bestand – Aanpassen – Afmeting en bijsnijden – Schermafbeeldingen – Video’s.
Java Objectgeoriënteerd Programmeren in Java met BlueJ Hoofdstuk 7 Polymorfie en overerving © 2014, Gertjan Laan, versie 2.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
Gecijferdheid 2 (Meten 1 – ME144X) week 3
Eindbeoordeling websites Seminarie Webdesign. Technische puntenverdeling Niet online en losse bestanden
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
Hyperlinks met CSS opmaken Koen Van Cauwenberge. In de CSS-code Hier is een voorbeeld van een CSS-codering voor een hyperlink: a:link { color: #8B0000;
Java & het Web Programma: JSP. JSP....herhaling Welke van de volgende expressions is geldig/ongeldig? %>
Hoe maak ik een PowerPoint presentatie?
Anton van den Noort1 FOTOSHOWS MAKEN HCC DEVENTER.
Herhalingsoefeningen Variabelen - voorwaarden. Flying banner  Toon een tekst op positie x: -2.0 en y: 0 (dat is links buiten het beeldscherm)  Laat.
Trimester 2. Hfdst 1: e-Presentatie, master! e-Presentatie Met de hulp van Powerpoint gaan we leren hoe we een elektronische presentatie kan maken.
1Informatica in de Tweede Fase Frans Peeters 7 maart 2007 Deze presentatie is downloadable van
Kennen en kunnen Wat je moet kennen en kunnen voor de SO Woordenschat H1 t/m H4 1. Woordraadstrategieën: -zoek een synoniem; -zoek een omschrijving of.
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
De definitie van een object. Een object is een verzameling van eigenschappen en bewerkingen. Veel voorkomende objecten zijn: D (display) Gui (user interface)
BEGINNER EV3 PROGRAMMeer Les
Kennismaking met programmeren
Gevorderde EV3 PROGRAMMEER LES
Sjabloonsite Koen Van Cauwenberge.
Omdat we op onze eigen account programmeren
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Hoe maak je een pagina voor een website?
S N V WORD-2007 voor BEGINNERS Microsoft Word-2007.
Instructie onderwerp SmartArt-afbeelding met foto's tegen een rode achtergrond (gemiddeld) Ga als volgt te werk als u de SmartArt-afbeelding op deze dia.
Eigenschappen in verband met evenwijdigheid en loodrechte stand van rechten in het vlak © André Snijers.
Bemesting klas 2 De Groene Welle.
Leren programmeren met Scratch
Powershell & HTML.
HTML5 introductie.
Vervaagde achtergrondafbeelding met overlay in volledige kleuren
Transcript van de presentatie:

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 stijl.css in dezelfde map zit als je webpagina’s. In je CSS-bestand zijn nooit, of tags of andere -tags die tussen staan.

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.

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.

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

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; }

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; }

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; }