Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum:
|
|
|
- Ine Vedder
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum:
2 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HTML:... 4 Wat is CSS:... 4 Wat is het resultaat van deze 2 dingen gecombineerd?:... 4 Wat hebben we nodig?... 4 We hebben 4 programma s nodig:... 4 Waarvoor hebben we deze programma s nodig?... 4 Downloaden van de programma s:... 5 Internet Explorer:... 5 Firefox:... 5 Chrome:... 5 Safari:... 5 Notepad++:... 5 Het bouwen van uw fotoalbum site Het begin:... 6 De site wat inhoud geven: Een menu maken 1/3: Uitleg Een menu maken 2/3: Uitleg Een menu maken 3/ De site er goed uit laten zien in verschillende resoluties De achtergrond veranderen: Site opmaken: Een logo toevoegen: Tekst toevoegen op de homepage: De fotoalbums vullen: Voorbereiding: Stap 1: Stap 2: Stap 3: Stap4: Stap 5: Stap 6: Stap 7:
3 Stap 8: Het album maken: HTML: CSS: Uitleg: Het resultaat: Een omschrijving toevoegen aan de foto s HTML: CSS: Resultaat: De laatste dingetjes om het net even wat mooier te maken: De titel van het album aan passen: Het menu nog aanpassen: Menu aanpassen op de site: Op de onze honden pagina een stukje tekst toevoegen: De grote afbeeldingen weergeven: LET OP! Stap 1: Stap 2: Stap 3: Stap 4: Stap 5: Stap 6: Stap 7: Stap 8: De CSS goed leesbaar maken zodat u alles makkelijk terug kan vinden: Nawoord:
4 Wat gaan we doen? We gaan een Fotoalbum website maken. Dit gaan we doen met HTML en CSS. Dit wordt een handleiding die iedereen kan volgen. Het maakt dus niet uit of je een beginner bent of een iets professioneler bent. Eerst wat uitleg: Wat is HTML: HTML is de standaard taal waarin een website word gemaakt. Een html pagina (bestand) is bijna altijd hetzelfde opgebouwd. Je hebt altijd de volgende tags: <Head>, <Body> en <Html>. Later in deze handleiding komen er nog meer tags voor maar dit zijn op dit moment de belangrijkste. Wat is CSS: CSS is een bestandje waarin alle stijlen van de website in staan. Denk dan bijvoorbeeld aan de opmaak van de lettertypes. Wat is het resultaat van deze 2 dingen gecombineerd?: Als je deze 2 dingen combineert krijg je een mooi opgemaakte website. Wat hebben we nodig? We hebben 4 programma s nodig: Internet Explorer, Firefox, Chrome/Safari en Notepad++ Waarvoor hebben we deze programma s nodig? We hebben 3 browsers nodig dat zijn: Internet Explorer, Firefox en Chrome/Safari. Deze programma s gaan we gebruiken om de website in te testen. Omdat dit de meest gebruikte browsers zijn. Alle browsers geven helaas de site anders weer omdat deze andere standaarden gebruiken. En omdat we willen dat onze site er overal goed uitziet willen we natuurlijk alles getest hebben. Notepad++ hebben we nodig om het CSS bestandje te maken en om het HTML bestandje te maken. 4
5 Downloaden van de programma s: Internet Explorer: Deze zit al in Windows gebouwd. Maar heeft u deze toch niet dan kunt u hier de laatste versie downloaden: Firefox: Firefox kunt u hier downloaden: Chrome: Google Chrome kunt u hier downloaden: ource=nl-ha-emea-nl-bk&utm_medium=ha Safari: Safari kunt u hier downloaden: Notepad++: Notepad++ kunt u hier downloaden: (kies dan voor: current version) 5
6 Het bouwen van uw fotoalbum site. Installeer eerst 3 browsers (Chrome en Safari zijn precies het zelfde hiervan kunt u er een kiezen) en Notepad++. Het begin: Open Notepad++ U ziet dan dit mooie scherm: U ziet nu gewoon een kladblok voor u. Maar dit kladblok is zeer goed om webpagina s mee te maken. We gaan nu eerst een basis voor de HTML pagina maken. Type het volgende: (U kunt niet kopiëren u moet het dus zelf typen) <html> <head> </head> <body> </body> </html> U scherm ziet er nu zo uit: 6
7 Het is nu nog geen HTML bestand. Dit gaan we nu doen: Klik op het diskettetje bovenin het scherm (Zie zwarte pijl) (Of houdt de ctrl knop ingedrukt en druk dan op S) u krijgt dan dit te zien: 7
8 Om het even makkelijk te houden slaan we het bestand op op het bureaublad in een nieuwe map genaamd website-fotoalbum. Dit doen we door op bureaublad (desktop) te drukken en dan vervolgens op het mapje met het rode sterretje. Dit gebeurt er dan op het scherm: Vul hier de naam voor de map in: website-fotoalbum, wanneer u klaar bent met typen drukt u op enter. Het scherm veranderd dan hierin: Dubbel klik op de map website-fotoalbum. Dan krijgt u dit te zien: 8
9 Waar nu Normal text file (*.txt) staat moet komen te staan: Hyper tekst markup language file (*.html, *.htm, enz.) Zoals hieronder afgebeeld: Nu gaan we de bestandsnaam invullen. Dat word index.html. Zorg ervoor dat uw scherm er net zo uitziet als het scherm hieronder: 9
10 Het enige wat we nu nog moeten doen is op save drukken. Het begin van de pagina is gemaakt. 10
11 De site wat inhoud geven: De site moet een titel hebben zodat de mensen weten dat ze op uw site zijn. Dit gaan we doen in de HTML pagina. Zoals je ziet is de tekst blauw geworden in Notepad++, dit komt omdat de tekst tags zijn. Ga naar het einde van de Head tag en druk op enter. Er komt nu een lege regel tussen type hier het volgende: (Druk eerst een keer op de tab toets (boven de capslock) ) <title> mijn fotoalbum</title>. Uw scherm ziet er dan zo uit: 11
12 Druk nu op het diskettetje of druk CTRL in +S. Het rode diskettetje in het tabje word nu weer blauw in plaats van rood dit betekend dat het bestand weer is opgeslagen. Doe dit elke keer als u iets typt! Dan kunt u het resultaat direct in de browser zien. We gaan nu Alle 3 de browsers openen met de website! Ga naar de het index.html bestand op uw bureaublad in het mapje website-fotoalbum. Klik er met de rechtermuisknop op en druk op openen met, kies hier voor 1 van de browsers. Doe dit dan nog 2 keer voor de andere browsers. Dit is een plaatje van Internet Explorer: ( Zie volgende pagina (z.v.p). ) 12
13 Zoals je ziet is de website nu nog leeg. In het tabje in Internet Explorer, Firefox, Chrome/Safari ziet u nu staan mijn fotoalbum. 13
14 Een menu maken 1/3: We gaan nu een menu aanmaken zodat we bijvoorbeeld verschillende feesten op verschillende pagina s kunnen zetten. In Notepad++ ziet u nu dit: Ga achter <body> staan en druk op enter. Er word een lege regel toegevoegd typ hier nu het volgende: <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> In Notepad++ ziet dit er zo uit: (z.v.p.) 14
15 Zoals u misschien al heeft gezien gaan we straks nog een aantal HTML pagina s maken. In deze handleiding ga ik er een maken die we 3 keer gaan gebruiken. Maar u kan er zelf 3 maken op de zelfde manier als het eerste album. Ik ga eerst het stukje uitleggen wat we nu hebben getypt. <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> Uitleg De <ul> tag: Dit betekend dat we met een ongeordende lijst te maken hebben. Dit houdt in dat elk item begint met een klein zwart bolletje. De <li> tag: Dit betekend dat dit een item is in de ongeordende lijst. <a> tag: Deze ziet u niet gelijk maar deze is er wel, de volgende 2 dingen hebben er mee te maken in dit voorbeeld: <a href: Dit betekend dat je met een link te maken hebt. Dit houd in dat als je op de tekst drukt je op een andere pagina terecht komt. 15
16 <a style: Dit is de opmaak van het <a> tag (De <a> tag is voor links naar een (andere) pagina) Tussen <a> en </a> staat nog tekst (bijvoorbeeld: Home): Dit word de tekst die zichtbaar is op de site. Dan is het menu ook aangemaakt maar nu wil u weten hoe dit eruit ziet? Dit ziet er zo uit: Nu gaan we het menu opmaken met CSS. 16
17 Een menu maken 2/3: We hebben nu een menu maar nu gaan we het menu opmaken hiervoor gaan we een CSS bestand gebruiken. In Notepad++ gaan we een nieuwe tab openen. Dit doet u door op nieuw te drukken (zwarte pijl in afbeelding hieronder) Het scherm veranderd hierin: Het index.html bestand is ook nog geopend! Houdt hier rekening mee! Als eerste gaan we dit in het CSS bestand typen: *{ margin: 0px; padding: 0px; Dit zorgt ervoor dat alles ongeveer hetzelfde blijft in de verschillende browsers. Later gaan we uitleggen wat dit betekend. Het scherm ziet er nu zo uit: 17
18 Nu gaan we dit bestand opslaan als een CSS bestand. Dit doet u op de zelfde manier als de html pagina alleen verander je: Normal tekst file (*txt) in: Cascade style sheet file (*.css) de bestandsnaam wordt: fotoalbum.css. en dit bestand zet u in de zelfde map als het index.html bestand. Zorg ervoor dat het scherm er dus zo uit ziet voordat u het bestand opslaat: Druk nu op save. 18
19 Nu het bestand is opgeslagen gaan we verder. In het html bestand hadden we hiermee het menu gemaakt: <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> Zoals je ziet staat er aan het begin van dit stukje het volgende: <ul id="navbar"> Het id geeft aan dat dit uniek is. Met dit id gaan we het menu aanpassen in de CSS. We maken het volgende aan: #navbar{ Hiermee bedoelen we dus dat dit stukje alleen effect heeft op het stukje tekst in de HTML die dit id heeft. Nu gaan we het menu horizontaal maken: #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; Hierdoor hebben we alleen het menu aangepast maar nog niet de items. Die gaan we dadelijk doen. Sla het bestand nu op door CTRL ingedrukt te houden en vervolgens op S te drukken. Omdat we nu wel willen zien wat we hebben gedaan gaan we er eerst voor zorgen dat de HTML pagina het CSS bestand kan vinden en gebruiken. Klik op het tabje in Notepad++ met index.html erin. Je ziet dan het HTML bestand weer voor je: <html> <head> <title> mijn fotoalbum</title> </head> <body> <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we deze regel toevoegen aan het HTML script. <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> Deze regel zet je onder de regel: title. 19
20 Je HTML script ziet er dan als volgt uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <ul id="navbar"> <li><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> (We gebruiken even geen screenshots meer omdat het zo duidelijker is.) Nu ziet het menu er in de browsers zo uit: Zoals u ziet is het menu nu aan de rechterkant van het scherm beland. En zijn de bolletje ervoor verdwenen. Alleen staat het menu nog niet horizontaal. Dat gaan we nu doen. 20
21 In Notepad++ drukt u op het tabje met fotoalbum.css en dan krijgt u het volgende script te zien: *{ margin: 0px; padding: 0px; #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; Zet tussen elk stukje CSS een lege regel zodat het overzichtelijk blijft. Als u later iets wil veranderen kan u het altijd makkelijk terug vinden! Nu gaan we hieraan het volgende toevoegen: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; Dit stukje heeft effect op alle items in het menu. Nu u dit heeft toegevoegd ziet u CSS bestand er zo uit: *{ margin: 0px; padding: 0px; #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; 21
22 font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; Nu gaan we het resultaat bekijken (Dit is in Firefox): Het menu staat horizontaal. Zoals we willen maar werkt nog niet volledig zoals wij dat willen maar dat doen we later. Nu de uitleg wat we precies hebben gedaan: We beginnen met dit stukje: #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; 22
23 Uitleg Margin: Dit betekend de afstand tussen een of meerdere objecten of op welke positie het object weergegeven moet worden. In ons script is dat op 75% links van het scherm en 10% onder de bovenkant van het scherm. Dit kunt u ook in pixels invullen dan veranderd dit % in dit: px. List-style-type: Hierin kunt u de opsommingstekens (bolletje, vierkantje, cijfers, enz.) bepalen die voor een item komen. De waardes die u kunt gebruiken zijn bijvoorbeeld: Disc, circle en square, enz. Tekst-decoration: Hierin kunt u aangeven of de woorden onderstreept, lijntje er boven, doorgestreept moeten worden of moeten knipperen (blink). De waardes die u kunt gebruiken zijn: underline, overline, line-trough en blink. Position: Hiermee geef je aan hoe je een object wil plaatsen op de site. De waardes die u kunt gebruiken zijn: absolute, relative, fixed, static en inherit. Nu gaan we dit stukje bespreken: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; font-family: welk lettertype ga je gebruiken voor dit item. font-size: De tekengrootte voor het item Font-weight: Of het item dik gedrukt moet zijn Color: De letterkleur. Display: Dit bepaald of de browser een element/item weer moet geven en hoe die dat moet doen. 23
24 Een menu maken 3/3 We willen als we op een pagina zijn natuurlijk wel aan het menu zien op welke pagina we zijn. Dit doen we door middel van het volgende stukje: a:link {color:#0000ff; /* unvisited link */ a:visited {color:#ff0000; /* visited link */ a:hover {color:#ffaa00; /* mouse over link */ a:active {color:#000000; /* selected link */ De letters en cijfers die achter het # vormen samen met het # de kleurcode van de links. Deze kleurcodes kunt u aan passen om zelf de kleuren te kiezen die u wilt. Dit stukje moet in onze CSS komen. Dit ziet er op dit moment zo uit: *{ margin: 0px; padding: 0px; #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; Nu gaan we het stukje toevoegen onder : *{ margin: 0px; padding: 0px; Dan komt onze CSS er zo uit te zien: *{ margin: 0px; padding: 0px; a:link {color:#0000ff; /* unvisited link */ a:visited {color:#ff0000; /* visited link */ 24
25 a:hover {color:#ffaa00; /* mouse over link */ a:active {color:#000000; /* selected link */ #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; Dit zorgt ervoor dat het menu er nu zo uit ziet: Nu hebben we een menu dat werkt zoals wij het willen. 25
26 Alleen ziet het menu er nog niet helemaal netjes uit. We willen natuurlijk wel knoppen hebben. Voeg daarom deze code toe: border-width: 1px; border-style: solid; border-color: #000000; aan navbar li. Dan komt dat stukje er in de CSS zo uit te zien: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; En dat geeft dit effect in de browser: Nu nog een kleurtje aan de knoppen toevoegen: Hiervoor voegt u deze code toe: Background-color: #42C
27 Dan komt het stukje er zo uit te zien: #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; Background-color: #42C142 En dat geeft dit effect: Uitleg: border-width: dit geeft aan hoeveel pixels de de rand om het item moet zijn. (hoe dik de lijn is) border-style: Dit geeft aan hoe de lijn eruit moet zien: een hele lijn (solid), dotted (puntjes), dashed (streepjes), double (dubbele lijn). border-color: geeft aan welke kleur de lijn moet zijn. Background-color: geeft aan welke kleur de achtergrond krijgt. 27
28 De site er goed uit laten zien in verschillende resoluties. Als je nu het scherm verkleint ziet u dat alles blijft staan en dat u naar links en rechts moet scrollen. Dit willen we niet. We gaan nu de site centreren op het midden van de pagina. Dit gaan we down door middel van: - Een div toevoegen in de HTML. - Een id toevoegen in de CSS. We beginnen met de html. Dit is de HTML code op dit moment: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we boven <u lid= navbar > het volgende typen: <div id= alles > En onder </ul> typen we: En dan komt de HTML er zo uit te zien: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu moeten we in de CSS het volgende typen: 28
29 #alles{ margin: 0px auto; width: 760px; Dan komt de CSS er zo uit te zien: *{ margin: 0px; padding: 0px; a:link {color:#0000ff; /* unvisited link */ a:visited {color:#ff0000; /* visited link */ a:hover {color:#ffaa00; /* mouse over link */ a:active {color:#000000; /* selected link */ #navbar{ margin-left: 75%; margin-top: 10%; list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; Background-color: #42C142 #alles{ margin: 0px auto; width: 760px; Nu gaan we het resultaat bekijken: 29
30 Zoals je ziet is de tekst meer naar het midden van de pagina gekomen. De mensen die met chrome of firefox gaan kijken zijn het volgende: 30
31 Door de verschillende standaarden die de browsers gebruiken ziet de de site er in de ene browser wel mooi uit en in de andere niet. Nu gaan we er voor zorgen dat alles er wel goed uit komt te zien: In de CSS gaan we het volgende toevoegen aan #alles. Dit is het stukje zoals het er nu uitziet: #alles{ margin: 0px auto; width: 760px; Daar maken we nu dit van: #alles{ margin: 0px auto; width: 760px; text-align: left; Bij #navabar halen we het volgende weg: margin-left: 75%; margin-top: 10%; Dat stukje komt er dus zo uit te zien: #navbar{ list-style-type: none; text-decoration: none; position: absolute; Het bewerken is van bestaande stukjes is klaar maar nu is het nog niet goed. 31
32 We moeten 2 stukjes toevoegen: Het stukje wat het menu nu goed gaat plaatsen op de site: #menu{ margin-left: 465px; margin-top: 25px; position: relative; En een stukje dat we straks ook nodig hebben voor de achtergrond maar wat nu aan gaat geven dat de site gecentreerd moet worden in alle browsers: body{ text-align: center; Nu we dit hebben toegevoegd ziet de CSS er als volgt uit: ( Zie volgende pagina) 32
33 *{ margin: 0px; padding: 0px; a:link {color:#0000ff; /* unvisited link */ a:visited {color:#ff0000; /* visited link */ a:hover {color:#ffaa00; /* mouse over link */ a:active {color:#000000; /* selected link */ #navbar{ list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; Background-color: #42C142 #menu{ margin-left: 465px; margin-top: 25px; position: relative; #alles{ margin: 0px auto; width: 760px; text-align: left; body{ text-align: center; 33
34 Maar nu werkt het nog niet omdat we nog wat toe moeten voegen in de HTML: onze HTML code ziet er nu zo uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu gaan we onder <div id="alles"> het volgende neer zetten: <div id="menu"> En onder </ul> zetten we dit neer: Dan ziet onze HTML code er zo uit: (Zie volgende pagina) 34
35 <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum1.css"/> </head> <body> <div id="alles"> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Nu is de site te zien in alle resoluties zonder dat alles door elkaar gaat schuiven. 35
36 De achtergrond veranderen: Nu hebben we de site mooi gecentreerd maar die lelijke witte achtergrond willen we weg hebben. We willen heb bijvoorbeeld een zand achtige kleur geven. Om dit voor elkaar te krijgen moeten we het volgende toevoegen in de CSS aan Body{. Ons stukje ziet er nu zo uit: body{ text-align: center; Nu voegen we dit toe: background-color: #C3AE7F; Het stukje CSS ziet er dan zo uit: body{ text-align: center; background-color: #C3AE7F; En het resultaat is: Dat ziet er al een heel stuk mooier uit. 36
37 Site opmaken: Nu hebben we een menu en een fatsoenlijke achtergrond. Maar dat maakt het nog niet echt een site. We moeten wel vermelden waar het over gaat. Omdat we op de Home pagina zitten gaan we hier vermelden wat de bezoekers hier kunnen zien/vinden. We typen de tekst eerst voor dat we hem gaan opmaken. (De tekst die in deze handleiding word getypt is puur als voorbeeld) We gaan eerst boven het menu de site naam weergeven. Dit kan ook met een plaatje als logo maar dit word dadelijk ook uitgelegd. Een logo toevoegen: De tekst die ik wil hebben boven het menu is Fotoalbum. In de HTML: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum1.css"/> </head> <body> <div id="alles"> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> Voegen we onder <div id="alles"> het volgende toe: <div id="logo"> Tussen deze 2 regels gaan we de tekst typen. Dan komt het er zo uit te zien: <div id="logo"> Fotoalbum Nu gaat dit aan de bovenkant van de site komen en gaan we de tekst dezelfde kleur geven als de knoppen van het menu. Hiervoor moet de tekst opgemaakt gaan worden: Dit doen we zo: ( Zie volgende pagina. ) <div id="logo"> 37
38 <h1>fotoalbum</h1> Nu gaan we in CSS het volgende stukje typen om de tekst daadwerkelijk op te maken en te positioneren boven het menu. h1{ font-family: arial; text-decoration: none; font-size: 25px; font-weight: bold; color: #42C142; position: relative; display: inline; Maar nu moeten we de div nog positioneren. Typ daarom ook in het CSS bestand het volgende: #logo{ Margin-left: 475px; margin-top: 25px; In uw browser ziet de site er nu zo uit: Nu gaan we ons logo er nog naast zetten. Dit logo is een plaatje. In onze map waar de bestanden allemaal in zitten (website-fotoalbum) Maken we een nieuwe map aan genaamd afbeeldingen. 38
39 Hierin zet ik ons logo neer en die ga ik aan roepen in de HTML. In de HTML boven <div id="logo"> typ je het volgende: <img class="whisper" src="afbeeldingen/logo.jpg"/> In de CSS typt u dit er nog bij: img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; Resultaat: In chrome en Firefox ziet het er iets anders uit: 39
40 Hier heb je nog een klein stukje ruimte boven de het logo. Het HTML bestand op dit moment ziet er zo uit: <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <img class="whisper" src="afbeeldingen/logo.jpg"/> <div id="logo"> <h1>fotoalbum</h1> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> </body> </html> 40
41 Het CSS bestand op dit moment ziet er zo uit: *{ margin: 0px; padding: 0px; a:link {color:#0000ff; /* unvisited link */ a:visited {color:#ff0000; /* visited link */ a:hover {color:#ffaa00; /* mouse over link */ a:active {color:#000000; /* selected link */ #navbar{ list-style-type: none; text-decoration: none; position: absolute; #navbar li { font-family: arial; text-decoration: none; font-size: 17px; font-weight: bold; color: #000000; position: relative; margin-left: 10px; display: inline; border-width: 1px; border-style: solid; border-color: #000000; background-color: #42C142; #menu{ margin-left: 465px; margin-top: 25px; position: relative; #alles{ margin: 0px auto; width: 760px; text-align: left; body{ text-align: center; background-color: #C3AE7F; h1{ font-family: arial; 41
42 text-decoration: none; font-size: 25px; font-weight: bold; color: #42C142; position: relative; display: inline; #logo{ Margin-left: 475px; margin-top: 25px; img.whisper { width: 470px; height: 50px; margin-top: 0px; margin-left: 0px; position: absolute; Ons logo staat nu boven de site met daarachter foto album. 42
43 Tekst toevoegen op de homepage: Omdat we op de home pagina bezig zijn moeten we de bezoekers even welkom zeggen tegen de bezoekers. Dit gaan we op de zelfde manier doen, als het stukje Fotoalbum. Eerst maken we een nieuwe Div aan. Onder de eerste keer onder </ul> maken we de div aan genaamd welkom: <div id="welkom"> Hiertussen typen we de tekst weer: <div id="welkom"> Welkom op deze site! Hier vind u de fotoalbums van: (Bijvoorbeeld naam van feest, huisdieren, etc.) Deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380) Nu gaan we deze 3 regels een eigen op maak geven: <div id="welkom"> <p class="welkomsboodschap">welkom op deze site!</p> <p class="vind">hier vind u de fotoalbums van: (Bijvoorbeeld naam van feest, huisdieren, etc.)</p> <p class="deze">deze foto albums zijn gemaakt door: (bijvoorbeeld Whisper380)</p> Uiteindelijk moet de HTML er zo uitzien: ( Zie volgende pagina) 43
44 <html> <head> <title> mijn fotoalbum</title> <link rel="stylesheet"type="text/css"href="fotoalbum.css"/> </head> <body> <div id="alles"> <img class="whisper" src="afbeeldingen/logo.jpg"/> <div id="logo"> <h1>fotoalbum</h1> <div id="menu"> <ul id="navbar"> <li class="active"><a href="index.html" style="text-decoration: none;">home</a></li> <li><a href="album1.html" style="text-decoration: none;">album 1</a></li> <li><a href="album2.html" style="text-decoration: none;">album 2</a></li> <li><a href="album3.html" style="text-decoration: none;">album 3</a></li> </ul> <div id="welkom"> <p class="welkomsboodschap">welkom op deze site!</p><br><br> <p class="vind">hier vind u de fotoalbums van:<br>bijvoorbeeld naam van feest, huisdieren, etc.)</p><br> <p class="deze">deze foto albums zijn gemaakt door:<br>(bijvoorbeeld Whisper380)</p> </body> </html> In de browser ziet het er nu zo uit: 44
45 Uitleg: <br>: dit betekend een enter, oftewel ga verder op een nieuwe regel. Als een regels te lang is en je zet er dit tussen, dan begint de tekst na dit op een andere regel. Nu gaan we de opmaak regelen in CSS. Voeg het volgende toe aan de CSS: Eerst gaan we de DIV positioneren: #welkom{ margin-top: 20%; margin-left:150px; position: absolute; text-align: center; Nu gaan we de welkom s boodschap positioneren: p.welkomsboodschap { color: #FF0000; font-family: arial; font-size: 20px; font-weight: bold; Nu gaan we het stukje over de albums positioneren: p.vind { color: #0000FF; font-family: arial; font-size: 15px; font-weight: bold; Nu gaan we het stukje over de maker positioneren: p.deze { color: #FFD42A; font-family: arial; font-size: 25px; font-weight: bold; Uitleg: text-align: Dit geeft aan hoe de tekst uitgelijnd moet worden. Dit kan zijn left (links), right (rechts), of center ( in het midden). Je CSS bestand ziet er nu zo uit: ( Zie volgende pagina) 45
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Websitecursus deel 2 CSS
Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website
Inhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
Welkom bij mijn website tutorial (Deel 2)
Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.
LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress
Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders.
Stappenplan Website de Palster Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. 1 Inhoudsopgave: Titel bladzijde Aanmelden op de website 3 Foto s in het fotoboek
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
HTML en CSS gevorderd
HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke
Programmeren in MyShop
Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen
Descendant selectors toepassen
HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een
Internet Standaarden HC4
Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor
HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.
Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for
Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:
1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina
Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3
Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm
Stap 1 Je eigen website maken... 1. Stap 2 Je template invullen... 9. Stap 3 Wat kunnen we met de inhoud?... 19
INHOUDSOPGAVE Inhoudsopgave Stap 1 Je eigen website maken... 1 De eerste stap... 1 Kompozer downloaden... 1 Kompozer openen... 1 Een nieuwe pagina beginnen... 1 Je eerste tekst schrijven... 2 Je eerste
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
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
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
Werken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters
XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het
Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS
Handleiding CMS 1 Inhoudsopgave 1. Inloggen... 3 2. Het CMS... 3 3. Websitecontent... 4 3.1 Een nieuwe pagina toevoegen... 4 3.2 Een pagina wijzigen... 4 3.3 Een pagina verwijderen... 5 4. De WYSIWYG editor...
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Handleiding ESS na de upgrade People Inc. versie 3.5.0
Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst
Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans
Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald
Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.
OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van
Extra: Hoe u uw website met HTML kunt verbeteren
Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel
Hoe moet je een prachtige presentatie maken?
Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven
Handleiding www.chiromeisjeszwaneven.be (v2).
Handleiding www.chiromeisjeszwaneven.be (v2). Agenda Ga naar www.chiromeisjeszwaneven.be/admin en kies voor agenda. Log in met je gebruikersgegevens van het admingedeelte van de agenda. Pagina na het inloggen:
http://blog.seniorennet.be/seniorennet_blogs_tips_trucs Inhoud van dit lesje: 1.Plaatsen van foto of afbeelding van uw harde schijf.
Op het blog SeniorenNet Blogs Tips en Trucs vind je in de linkerkolom verschillende mogelijkheden voor Aanmaken van een Internetadres (URL) en Foto s Verkleinen met uitleg. http://blog.seniorennet.be/seniorennet_blogs_tips_trucs
Welk programma gebruiken we? Om onze foto s te verkleinen gebruiken we het programma IrfanView. Het icoontje van IrfanView ziet er als volgt uit:
Inleiding Om het laden op de website vlot te laten verlopen zijn er enkele afspraken gemaakt m.b.t. tot het formaat van een foto. Het formaat van een foto gaan we MAXIMUM instellen op 640 * 480 pixels.
Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen
Safira CMS Handleiding
Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...
Inhoudsopgave: Whisper380-computerhulp
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: whisper380-computerhulp Datum: 27-9-2010 Inhoudsopgave: Inhoudsopgave:... 2 Het programma downloaden:... 3 Het installeren van het programma:... 4 Het programma
Stap 2 Je template invullen
Stap 2 Je template invullen Allereerst in stap 2 gaan we onze template ophalen. Die staat op www.alphamegahosting.com/516, ook de uitleg is daar te vinden. Je kunt hem vanaf daar downloaden en op je bureaublad
Handleiding installeren en wijzigen emailhandtekening
Handleiding installeren en wijzigen emailhandtekening Inleiding Met behulp van een script kun je automatisch een handtekening plaatsen onder al je emailberichten. Je bericht komt er dan zo uit te zien:
Handleiding Wordpress
Handleiding Wordpress V 1.0 Door Inhoud Inloggen op de website... 3 Het Dashboard... 4 Berichten... 5 Berichten aanmaken... 5 Berichten bewerken... 6 Pagina's... 7 Pagina's aanmaken... 7 Pagina's bewerken...
2. Wanneer moet ik een afbeelding verkleinen?
Appendix B. Beeldmateriaal en Blackboard 1. Inleiding...1 2. Wanneer moet ik een afbeelding verkleinen?...1 3. Het formaat van een afbeelding wijzigen...2 4. Een afbeelding comprimeren...4 5. Een uitsnede
Foto s verkleinen en Foto s in elkaar over laten lopen
Foto s verkleinen en Foto s in elkaar over laten lopen Een foto, ergens op uw computer Open een de map van bestanden voor de website, of maak deze eerst aan. Open de te gebruiken foto met het volgende
Handleiding galerij.
Handleiding galerij. Inloggen: Allereerst moet je inloggen op de website. Ga hiervoor in de rechterkolom naar beneden naar het menu Log in (onder de buienradar) Vul je gebruikersnaam en password in. Vink
Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/
Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden
Dennis Wagenaar 19-04-10 v 1.0
Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5
Handleiding onderhoud basisschoolwebsite. Erik Zeeuwen - Versie: 1.2 Februari 2006
1 Beste webmeester, Voor u ligt een korte handleiding voor het onderhouden van uw eigen website. Dit onderhoud gaat heel eenvoudig door het aanmaken van documenten in Microsoft Word. Er wordt dan ook verondersteld
Template maken voor Webshops van FreeWebShop
Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info De uitdaging. Een kennis die een site wil hebben, een webshop. Het grafisch ontwerp is er al. Voor
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
Een pagina toevoegen en/of bewerken.
Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik
Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B
Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een
Handleiding Pivot docent Wendy Bruins www.wisemice.nl versie 1.2 december 2008
1 Handleiding Pivot Stickfigure Animator Maak je eigen animated gifjes en laat je poppetje bewegen zoals jij wilt. Je kunt je Pivot invoegen in een mailtje, je website of laten verschijnen op je desktop.
11. Website controleren
11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet
Handleiding om uw website/webshop aan te passen
Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een
Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren
MIJN EERSTE WEBSITE Sushi EEN WEBPAGINA BEWERKEN Kaart 1 van 10 We gaan een nieuwe website bouwen! We gaan hem over boeken maken maar je kan hem ook zo maken zoals jij zelf wilt! Download de HTML code
Handleiding teksteditor
In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.
Website bouwen met frontpage
Website bouwen met frontpage Na het openen van frontpage komen we in volgend scherm terecht: hier gaan we in de rechter- Kolom kiezen voor Page Templates. Als vb ga ik de startpagina namaken van mijn site,
Het gebruik van jalbum om fotoalbums te maken. Beknopte handleiding
Het gebruik van jalbum om fotoalbums te maken. Beknopte handleiding I. Voorbereidende werken Om het album vlot te kunnen maken is het best om geen foto s te gebruiken die enorm groot zijn in bytes. Ik
Handleiding CrisisConnect app beheersysteem
Handleiding CrisisConnect app beheersysteem Inhoudsopgave 1. Start 1.1. Vereisten gebruik 1.2. Inloggen 1.3. Wachtwoord wijzigen 2. Vullen 2.1. Dossiers 2.2. Processen 2.2.1. Tekst toevoegen 2.2.2. Bijlagen
Handleiding website. Inloggen Start uw internet browser en ga naar http://www.rbaoreven.nl/.
Handleiding website In deze handleiding staat alles wat u nodig heeft om een bericht op de website van de Reddingsbrigade Aoreven Heythuysen te plaatsen. Alles wordt in woord en beeld uitgelegd. Inloggen
Interactief blok 2 code opdracht 6 - wireframe
Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).
File: M.Peters / Powerpoint 1
PowerPoint 2003. File: M.Peters / Powerpoint 1 Een PowerPoint presentatie maken. Met behulp van een diapresentatie kun je een groep mensen informatie geven over een bepaald onderwerp of product. Een voorbeeld:
Door: Whisper380 Versie: 2.0 Datum: 5-7-2010 Eigenaar: whisper380-computerhulp.net
Door: Whisper380 Versie: 2.0 Datum: 5-7-2010 Eigenaar: whisper380-computerhulp.net Installeren van incredimail... 3 Een e-mail account instellen:... 7 Testen van instellingen:... 14 2 Installeren van incredimail:
FAQ (veel gestelde vragen) nieuwe website
FAQ (veel gestelde vragen) nieuwe website De werkgroep communicatie (die de bedenkers van de website zijn) willen heel graag dat iedere doelgroep de website gaat begrijpen en er mee kan omgaan. Daarom
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen
Handleiding Wordpress
Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde
Navigator CMS 2009. Beknopte handleiding v1.0
Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...
De tekstverwerker. Afb. 1 de tekstverwerker
De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
I. Vorming 1 (12/04/2012) 1. Werken met een tekstverwerker p2 2. Mappenstructuur op een computer p6 3. Externe USB- stick gebruiken p10
INHOUDSTAFEL De inhoudstafel blijft in eerste instantie nog beperkt. Deze zal gestaag aangroeien en zal pas compleet zijn na de laatste vormingssessie. Het doel is om in de eerste sessie, samen met de
Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond
Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal
HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505
HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie https://maken.wikiwijs.nl/65505 Dit lesmateriaal is gemaakt met Wikiwijs
webarchitects Handleiding Shop2rent dream > explore > create > inspire Date: 02-10-2013 Modified: 02-10-2013
Handleiding Shop2rent Author: Serfaas Twilt Date: 02-10-2013 Modified: 02-10-2013 Pagina 1 Index Introductie... 1. Hoe kan ik mijn backoffice benaderen?... 2. Hoe kan ik mij webshop zien?... 5 3. Hoe stel
Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0
Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0 1 Inhoudsopgave Toevoegen nieuw artikel, of wijzigen...3 Extra web-functionaliteit...4 toevoegen van een foto/plaatje...4 toevoegen
HAND- OUT. https://www.uwdomein.com/qzadmin. password: statistieken https://qwikstats.suares.com/www.uwdomein.com. support http://help.suares.
HAND- OUT website: inloggen: login name: password: http://www.uwdomein.com https://www.uwdomein.com/qzadmin statistieken https://qwikstats.suares.com/www.uwdomein.com support http://help.suares.nl/ Kuki+Ko
Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf.
Elke website begint met een basisstructuur. Deze basisstructuur is opgebouwd uit drie tags. Je gebruikt eerst de - tag welke aangeeft wat voor type document het is. Dan de - tag. Hier komt
Web Presence Builder. Inhoud
Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf
Handleiding Joomla 3.x
Handleiding Joomla 3.x Hoe maak ik een call to action button? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Het wordt regelmatig geroepen. Je hebt call to action buttons nodig op je
PDF XCHANGE EDITOR Waarom PDF XHCANGE Editor?
PDF XCHANGE EDITOR PDF XHCANGE editor is een programma om PDF bestanden te lezen en te bewerken. Deze handleiding is geschreven voor versie 5.5 van PDF XCHANGE editor. Als je een andere versie gebruikt
Tips en Trucs voor gebruik website
Tips en Trucs voor gebruik website De werkgroep communicatie (die de bedenkers van de website zijn) willen heel graag dat iedere doelgroep de website gaat begrijpen en er mee kan omgaan. Daarom zetten
PvdA websites Quick Start voor het werken met het Hippo CMS
PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK
Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0
Schoolwebsite.nu Snel aan de slag met uw website Versie 4.0 Inhoudsopgave Inhoudsopgave... 2 1 Inleiding... 3 2 Voor dat u begint... 4 3 Teksten op de website... 6 4 Groepspagina s... 8 5 De groepspagina...
Handleiding voor het maken van je eigen webpagina op de schoolsite
Waar gaat dit over? Handleiding voor het maken van je eigen webpagina op de schoolsite Hier leer je hoe je een eigen webpagina kunt maken op de site van de school. Op deze webpagina kun je vertellen wie
Handleiding: Whitelabel Customersite
ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.
Een affiche maken in WORD met het sjabloon (Op PC)
SOLIDAIR CONCERT Een affiche maken in WORD met het sjabloon (Op PC) 1. Open het sjabloon van de affiche in Word op je pc. Als je een Mac hebt, ga naar pagina 4. 2. Vul bovenaan de naam van de activiteit
Snel aan de slag met BasisOnline en InstapInternet
Snel aan de slag met BasisOnline en InstapInternet Inloggen Surf naar www.instapinternet.nl of www.basisonline.nl. Vervolgens klikt u op de button Login links bovenin en vervolgens op Member Login. (Figuur
Bloggen jullie ook? Je tikt in google blogger en je neemt de eerste webpagina www.blogger.com
Bloggen jullie ook? 1. Wat is bloggen? Je maakt een weblog of plaats (overzicht) op het internet. Eigenlijk is het een eenvoudige eigen site op het internet in dagboekvorm. Het is niet moeilijk, je hebt
Installeren van het programma:
Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp.net Datum: 20-2-2011 Inhoudsopgave Installeren van het programma:...3 Configureren van het programma:...7 Mappen aanmaken:...9 Groepen
Hippo-handleiding Homepage Inhoudsopgave
Hippo-handleiding Homepage Inhoudsopgave Homepage... 2 Onderdelen Homepage... 3 Homepage header aanmaken... 4 Header koppelen aan de homepage (home)... 9 Oud nieuws vervangen op de homepage (home)... 11
INHOUD: 1. INDEX 2. Tekst opties instellen 3. Andere kleur kiezen dan de getoonde. Cellen bewerken: Foto s en/of afbeeldingen toevoegen:
INHOUD: 1. INDEX 2. Tekst opties instellen. Andere kleur kiezen dan de getoonde. Cellen bewerken: cel noemt men de plaats waarin b.v. deze tekst staat 3 Foto s en/of afbeeldingen toevoegen: 4 Het uiterlijk
Les 7. Instap. CSS en views: schilderijen. Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.
Les 7 Instap Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is. CSS en views: schilderijen Ons eerste overzicht in de vorige les bestond uit het tonen van
Bloggen met blogdirect
Bloggen met blogdirect H1 Aanmelden en inloggen H1.1 Aanmelden Ga naar www.blogdirect.nl Klik op registeren. Onderstaand scherm verschijnt: Vul de gegevens in en klik op verzenden. Verzin een gebruikersnaam:
Handleiding muziek spelen van een tablet.
Handleiding muziek spelen van een tablet. Wat heb je nodig: een tablet minimum 8.4 groot (8.4, 9.7, 10.1, 105, 11.6, 12.2 13.3 zijn geschikt) Wanneer je die nog moet aanschaffen kan ik wel raad geven na
WebQuest / WebKwestie. met Word 2003. www.webkwestie.nl
WebQuest / WebKwestie met Word 2003 www.webkwestie.nl Een WebQuest / WebKwestie maken in Word 2003 Belangrijk is dat alle pagina s en afbeeldingen die u gebruikt in één map worden opgeslagen. Download
Handleiding Mijneigenweb.nl
Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen