, deze vervang ik door: . Een beetje abacadabra, maar wel nuttig. Feitelijk zeg ik, vervang het plaatje door het onderdeel header. In de FWS-root staat dit bestand. Dit bestand zorgt ervoor dat de header getoond wordt. In de header wordt gekeken of er een logo bestand is ingevuld in de webshop, en zo ja wordt die getoond. Wanneer ik de slogan wil tonen voeg ik op dezelfde plek nog toe. Dit zorgt ervoor dat de slogan van de webshop (indien aanwezig) wordt toegevoegd. Topmenu aanpassen In mijn ontwerp beslaat het topmenu meerdere regels. De regels 22 t/m 28 verwijder ik en verang ik door . Om zaken eenduidig te houden(elk onderdeel van FWS op een regel) ga ik aan het eind van regel 21 staan, zorg ervoor dat regel 22 en 23 op dezelfde regel terecht komen. Dan staat daar dus : staan. We geven een bepaald blok van de pagina een naam. De opmaak van dat blok kunnen we in de CSS dus apart regelen. We kunnen de achtergrondkleur van het blok bijvoorbeeld laten afwijken van die van de pagina, ook kunnen we ervoor zorgen dat de tekst binnen het blok niet direct aan de rand van het blok beginnen, maar op een paar pixels van de rand af. Kortom, we willen een deel van de site anders opmaken dan de rest
van de pagina. In de stylesheet doen we dit als volgt: #main-wrapper { background-color: #FFFFFF; padding-left: 10px; } Nadeel van de aanroep met ID is dat er van elk ID maar 1 op de pagina kan staan. Wat wanneer we bijvoorbeeld een enkele soort link een vaste opmaak willen geven. Maar dat wel op elke link kunnen doen. In dat geval maken we gebruik van classes. Het kenmerk van een class is dat die meerdere malen op 1 pagina mag voorkomen. Aanroepen gebeurt door (bijvoorbeeld) De opmaak van deze link doen we in de CSS als volgt: .opvallen { color:#FFFFFF; text-decoration:underline; text-transform:uppercase; } Met deze informatie in mijn achterhoofd heb ik mijn CSS aangepast. Maar zoals gezegd, CSS is niet mijn sterkste punt, en daarnaast is de CSS sterk afhankelijk van de site. Het loont dus niet echt de moeite om mijn werkzaamheden op dit punt hier te beschrijven. Stylesheets samenvoegen Nadat ik beide stylesheest heb bekeken, weet ik ongeveer waar de valkuilen zitten. Ik heb nu dus 2 stylesheets in een document zitten. Belangrijk is dat we in ieder geval de dubbel tags eruit vissen. Zo had ik in mijn stylesheet een tag “content” staan en die bleek ook in de originele stylesheet te staan. Ik heb dus beide tags onder elkaar gezet, en gewoon gekeken waar de verschillen zaten. Vervolgens heb ik een van de tags uitgecommentarieerd om de effecten te zien. Verdween er iets wat ik wel nodig had dan kopieerde ik die regel(s) uit de uitgecommentarieerde tags. Het uitcommentarieren doe je door /* voor het deel wat niet mee mag doen te plaatsen, en */ achter dat deel. Dit kan een of meerdere regels zijn. /* .opvallen { color:#FFFFFF; text-decoration:underline; text-transform:uppercase; } */
Slotwoord Tja tijdens het maken van deze handleiding heb ik mezelf regelmatig afgevraagd of het niet simpeler kan. In principe wel. Zo kun simpelweg het logo en wat andere afbeeldingen in de images map plaatsen, en vervolgens een beetje rommelen met de stylesheets, en voilla, daar is je eigen template. Toch heb ik ervoor gekozen om een flink deel van mijn template voor deze site zelf te fabrikeren. Voordeel is dat je vrij snel thuis raakt in de materie omtrent lay-out enz. Alle onderdelen passeren de revue wel even. Het eindresultaat is ook niet helemaal zoals in de handleiding beschreven. Zo heb ik op de uiteindelijke versie van de site niets gedaan met het logo. Dit omdat de afbeelding die in de banner moest komen mij min of meer noopte om het water te laten golven. Dat heb ik in flash opgepakt. Vooruit, die aanpassing dan nog even in afbeeldingsformaat ;)
Tja, iets minder flexibel, maar bij elke site hoort een klein stukje maatwerk.
Vragen en opmerkingen? : [email protected]
