Voor vragen: of mail naar

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: http://www.richard3332.nl/ of mail naar [email protected] 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">, dit staat tussen in: <script src="JS/functions.js" language="JavaScript"> We gaan nu een image toevoegen in de content. U kunt de onderstaande afbeelding downloaden op: http://www.richard3332.nl/website_maken_deel6.php

Dit plaatje is erg licht, omdat we er rekening mee moeten houden dat de tekst die ervoor komt nog wel leesbaar moet blijven.

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.
zorgt telken voor een enter, met

gebeurt dit automatisch. Om elk stukje je tekst zetten we de volgende code:

de tekst

Resultaat:

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:

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!

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:

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!

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: [email protected] msn: [email protected] website: www.richard3332.nl