10. Pagina's toevoegen

Nu de vormgeving aardig gevorderd is komt het moment om de andere drie pagina's te maken. Dit is de laatste stap voor het voltooien van de website.

10.1 De index kopiëren

De resterende drie pagina's gaan we maken door drie kopiën te maken van de index.html. Ga hiervoor met de Windows verkenner of met de Apple Finder naar uw website-map op het bureaublad. Door middel van rechts te klikken op het index.html bestand kunt u het kopiëren om het vervolgens direct weer, met de rechtermuisknop te plakken. Herhaal deze stap nog twee keer om zo uiteindelijk drie kopieën te hebben van de oorspronkelijk index.html. Door wederom rechts te klikken kunt u de bestandsnaam wijzigen. Geef de drie nieuwe bestanden de volgende namen:

• leonardo.html
• osiris.html
• contact.html

Als laatste is het nu zaak om de titel en paragraaf teksten te veranderen van de drie nieuwe pagina's. Open daarom de drie bestanden met uw teksteditor en wijzig de inhoud van de h1- en de p-container. U kunt hiervoor drie teksten gebruiken uit dit tekstdocument.

Wanneer u ook de afbeeldingen leonardo.jpg, osiris.jpg en learnit.jpg in de map pic plaatst, en u wijzigt in de code de bestandsnamen van de afbeeldingen, dan hebben we een logisch geheel.

10.2 De fijne afstelling

Wanneer de gehele website gebruik maakt van 1 CSS bestand is het eenvoudig om de vormgeving aan te passen. Door de volgende regels te wijzigen of toe te voegen ziet de site er totaal anders uit

• Verander van de body-kiezer de achtergrondkleur in #00B4FF;
• Verander van de h1- en p-kiezer de padding in 0px 20px 0px 20px;
• Voeg deze regel toe aan de kiezers h1 en p color:#ffffff;
• Verander van de a-kiezer de kleur in #ffffff;
• Voeg bij de a-kiezer deze code toe text-shadow: 2px 2px 2px #00B4FF;
• Verander bij de div-kiezer de hoogte in height:500px;
• Verander bij de div-kiezer de achtergrondkleur in #e35226;
• Voeg deze regel onder aan de stylesheet toe ul li {font-variant: small-caps;}