Sjabloonsite Koen Van Cauwenberge.

Slides:



Advertisements
Verwante presentaties
Het maken van presentaties voor op de computer.
Advertisements

Bouw zelf een digitaal visitekaartje
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
“Hoe begin ik een website” Alles wat je moet weten en doen voor dat je een website gaat maken (het maken kost meer tijd en kan mogelijk in een werkgroep.
Een afdelingswebsite bouwen met Google Sites
Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Thema’s. Thema’s   Thema’s toepassen  Vooringestelde thema’s  Snel en efficiënte  Je maakt een nieuw document  Pagina-indeling - Thema‘s of.
Handboek verzenden van Nieuwsbrief Caribbean.nl 12 september 2012 •Ga naar CMS •Kies Nieuwsbrief Caribbean.nl.
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.
DIA-OPMAAK (1) Dia-indeling H van Breugel A van der Coelen.
MAKEN VAN EEN WEBSITE Door het Ict-team : Claes -Van Damme- –Van Nyverseel Januari 04 (GEMSTAM)
Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.
HTMLHTML UITLEG & CURSUS. Inleiding HTML: Hyper Text Mark-up Language.
Behind Interactive Media. Agenda 1.Mobiel internet 2.Mobiele content 3.Apps 4.Opleveren.
Praktisch met PowerPoint
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.
Website Usability.
Jo David. programma’s Microsoft: Outlook Netscape: Messenger andere.
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
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.
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
Mijn eerste Website bouwen
Client side representation
Microsoft Word Liesbeth Van Raemdonck. Word openen Klik op de ‘start’-knop, links onderaan Klik op Programs Kies voor MS Word.
Om willekeurig welke site en welk werk dan ook overzichtelijk te houden, moeten er eerst (sub)directories gemaakt worden: Bijeenkomst 2 online journalistiek.
Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 3: Cascading Style Sheets.
Welkom bij workshop webdesign
Wat is WordPress en hoe installeer je het?. Wat is WordPress? WordPress is een CMS (Content Management Systeem) net als Joomla; Met een CMS kan een gebruiker.
Logo Kleur Typografie Scherm layout (grid) Beelden en illustraties
Web 1.0 HTMLAfbeeldingen FlashHyperlinks CSS Participation AJAX Usability Design Ruby on Rails.
Basis vaardigheden PowerPoint
HTML De basis-elementen.
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.
Hoofdstuk 20 Oefeningen Afbeeldingen toevoegen – Afbeeldingen invoegen vanuit een bestand – Aanpassen – Afmeting en bijsnijden – Schermafbeeldingen – Video’s.
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
Eindbeoordeling websites Seminarie Webdesign. Technische puntenverdeling Niet online en losse bestanden
Verbeterpunt 1 Tekst heeft slecht contrast met de achtergrond. Tekst omlijnen, maar liefst een logo maken.
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.
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;
HTML & CSS Samen gebruiken. Verschil HTML – Structuur CSS – Styling Twee verschillende dingen – Loskoppelen!
Hoe maak ik een PowerPoint presentatie?
ICT-dag Gent 25 mei 2010
Herhalingsoefeningen Variabelen - voorwaarden. Flying banner  Toon een tekst op positie x: -2.0 en y: 0 (dat is links buiten het beeldscherm)  Laat.
Gebruik alleen kleine letters en kies voor Opslaan als. Sla daarna bijvoorbeeld op als frans.html.
1Informatica in de Tweede Fase Frans Peeters 7 maart 2007 Deze presentatie is downloadable van
GUI Graphical User Interface. Wat is een Graphical User Interface Mooi Gebruiksvriendelijk Veel denkwerk.
Agenda-slide. Starten met het Figlo Platform Figlo Manager instellingen.
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
GUI Graphical User Inferface. Window Definieer object(en) create voeg toe aan Gui update Gui draw Gui.
SharePoint Machtigingen In de Private en Public cloud.
CURSUS VECTORISEREN Januari 2017 Peter Hagenaars.
Typografie (2).
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Het hele verhaal Genesis 2:1
Huiswerkopdracht Politiek
Hoe maak je een pagina voor een website?
S N V WORD-2007 voor BEGINNERS Microsoft Word-2007.
Taalhulp voor een PowerPoint: lay-out
CSS: cascading stylesheets
Hoe maak je een eyecatcher
Powershell & HTML.
CSS: cascading stylesheets
HTML5 introductie.
Transcript van de presentatie:

Sjabloonsite Koen Van Cauwenberge

Sjabloonsite Sjabloonsite op webruimte: bv. http://www.projectx2002.org/seminarie/tibo/eindwerk/ Download bestanden op computer via WebFtp. Uitleg over DIV-opmaak: http://www.projectx2002.org/seminarie/div.ppt

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

Structuur van de sjabloonsite

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)

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.

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>

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

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

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

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

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

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

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>

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 #000000.</p>

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

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.

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.

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.