Voor vragen: of mail naar

Maat: px

Weergave met pagina beginnen:

Download "Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com"

Elisabeth Verlinden
8 jaren geleden
Aantal bezoeken:

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.

1 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. Als Editor gebruik ik Notepad++, dit word behandelt in Deel 1. Voor vragen: of mail naar Richard3332@gmail.com In deel 5 hebben we een menu gemaakt, dit is een aardig groot onderdeel van de website. Ik kwam erachter dat in xhtml bij de javascript link nog een language statement moest. We veranderen <script src="js/functions.js"></script>, dit staat tussen <head></head> in: <script src="js/functions.js" language="javascript"></script> We gaan nu een image toevoegen in de content. U kunt de onderstaande afbeelding downloaden op: Dit plaatje is erg licht, omdat we er rekening mee moeten houden dat de tekst die ervoor komt nog wel leesbaar moet blijven.

com In deel 5 hebben we een menu gemaakt, dit is een aardig groot onderdeel van de website. Ik kwam erachter dat in xhtml bij de javascript link nog een language statement moest.

2 We voegen aan de class content de volgende code: background-image:url(../img/content_back.jpg); background-position: top right; background-repeat:no-repeat; Toelichting: Background-image, dit statement zorgt ervoor dat het plaatje geselecteerd wordt. In de url staat aan het begin:../. Dit zorgt ervoor dat hij eerst een map teruggaat, dan zit je bij index.html, dan gaat hij naar de map IMG en dan selecteerd hij content_back.jpg. background-position: top right; Deze zorgt ervoor waar het plaatje uitgelijnd wordt. Helemaal bovenaan en rechts. Background-repeat:no-repeat, Dit zorgt ervoor dat het plaatje niet herhaald wordt in de x of y richting. Resultaat: We gaan nu de tekst in de content omzetten in paragraphs. Dit is eigenlijk heel simpel. <br /> zorgt telken voor een enter, met <p></p> gebeurt dit automatisch. Om elk stukje je tekst zetten we de volgende code: <p> de tekst </p> Resultaat:

Dit zorgt ervoor dat hij eerst een map teruggaat, dan zit je bij index.html, dan gaat hij naar de map IMG en dan selecteerd hij content_back.jpg.

3 Het is wel zo netjes een copyright 2008 onder je website te hebben staan. Dit komt onder de content, we maken een nieuwe class aan en die heet copyright. In index.html plaatsen we de volgende code: <div id="copyright" align="center"> Copyright 2008 Richard3332.nl In de css stylesheet komt de volgende code te staan: #copyright { color: #868686; width: 888px; height: 20px; margin-top: 5px; background-color: #dbdbdb; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; } Toelichting: Alle elementen zijn al aan bod geweest. U weet wat hier staat!

html plaatsen we de volgende code: <div id="copyright" align="center"> Copyright 2008 Richard3332.

4 We gaan zometeen de pagina s aanmaken voor alle links in het menu. We passen nu het menu aan, want dan hoeven we dat straks niet per pagina te doen. We veranderen de menu code in index.html in: <div id="menu"> <a href="index.html">home</a> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">informatie</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="informatie_1.html">informatie 1</a> <a href="informatie_2.html">informatie 2</a> <a href="informatie_3.html">informatie 3</a> <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">media</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="audio.html">audio</a> <a href="video.html">video's</a> <a href="downloads.html">downloads</a> <a href="links.html">links</a> <a href="contact.html">contact</a>

html">home</a> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">informatie</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="informatie_1.

5 Resultaat: We kopiëren de hele code van index.html en maken 8 lege pagina s aan. Hier plakken we deze code in en slaan ze op als de volgende namen: informatie_1.html informatie_2.html informatie_3.html audio.html video.html downloads.html links.html contact.html In elke pagina veranderen we de title in de naam van het bestand in content_title: (voorbeeld voor links.html) Als we nu in het menu klikken op een andere link dan gaan we naar deze pagina toe!

html informatie_3.html audio.html video.html downloads.html links.html contact.

6 Bedankt voor het volgen van Website Tutorial (Deel 6) door Richard3332 Ik wil graag mijn website hoger gerankt hebben in Google. Jullie kunnen dit mogelijk maken door mijn website aan zoveel mogelijk mensen te vertellen, zo helpen jullie mij weer! Het is natuurlijk niet verplicht! En de tutorials van mij blijven altijd gratis. Bedankt voor jullie waardering! Mail: msn: website:

Jullie kunnen dit mogelijk maken door mijn website aan zoveel mogelijk mensen te vertellen, zo helpen jullie

Vergelijkbare documenten

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.