Websites met stijl

31. De sjablonen aanpassen

Plaats van de sjablonen

• Om de sjablonen aan te passen heb je de bestanden nodig. Die staan in de map sjablonen.
  • Sjabloon1.html t/m sjabloon5.html zijn de witte varianten.
  • Sjabloon1a.html t/m sjabloon5a.html zijn de paarse varianten.
• In de submap css staan de stijlbladen.
• Stijlblad 1.css hoort bij sjabloon1.html, stijlblad 3a.css bij sjabloon3a.html enzovoorts.
• In de submap img staan enkele foto's. Die kan je voorlopig gebruiken voor de sjablonen.
  Later zal je die willen vervangen door foto's die bij jouw webite passen.

Maak een backup van de originele bestanden voordat je gaat experimenteren.

Suggesties voor aanpassingen

Opmerkingen vooraf:

• Je kan de verschillende sjablonen helemaal naar eigen wens aanpassen. De voorgestelde aanpassingen zijn niet meer dan suggesties om je op ideeën te brengen.
• Sommige suggesties sluiten elkaar uit. Dan moet je een eerdere suggestie eerst terugdraaien.
• Als je zelf aanpassingen gaat maken, begin dan met kleine veranderingen: een andere kleur, breedte, marge, padding. Kijk steeds wat er gebeurt. Zo krijg je het vormgeven met css steeds beter in de vingers.
• Daarnaast is het soms handig om iets nieuws zo eenvoudig mogelijk uit te proberen, in een html-document dat maar enkele elementen bevat.

Succes!

Header en titel

Over de header

• Afbeelding in de html
  In de website over Terschelling staat (op grote schermen) de kopfoto in de html.
  • Dat heeft als voordeel, dat elke pagina een andere kopfoto kan hebben.
  • Nadeel is dat de titel absoluut gepositioneerd moet worden, omdat hij over de afbeelding heen staat.
  De plaats van de titel zet je dan met top of bottom en left of right.
• Afbeelding in de css (achtergrondafbeelding)
  Als je alle pagina's dezelfde afbeelding wilt geven (bv. met een bedrijfslogo) dan kan je gemakkelijker een achtergrondafbeelding gebruiken. Daar komt de titel dan gewoon overheen. Lijn de titel horizontaal uit met text-align, en gebruik paddings, om de afstand tot rechts, links, boven in te stellen.
  • Een achtergrondafbeelding (je bent ze al tegen gekomen in hoofdstuk 16) zet je in het stijlblad met background-image.
  • Alle sjablonen hebben een achtergrondafbeelding.
  • Sjabloon 1 heeft een absoluut gepositioneerde titel, de andere sjabonen niet.

Suggestie 1: De hoogte van de header aanpassen

Deze suggestie werkt bij alle sjablonen. Beschreven voor sjabloon 3.

figuur 1: stijlblad 3.css - header en titel voor grote schermen 245header {
246text-align: center;
247margin: 10px 0 75px 0;
248height: 250px;
249background-color: hsl(210, 100%, 60%);
250background-image: url("../img/achtergrond.jpg");
251background-size: cover;
252}
253
254
255header h1 {
256padding: 10px 40px 0 40px;
257font-family: 'Open Sans Condensed';
258font-size: 2.5em;
259color: white;
260text-shadow: 1px 1px black;
261opacity: .9;
262}

• Open stijlblad 3.css in de editor. Header (voor grote schermen) staat in de regels 245 en verder. Zie figuur 1.
• Je kan header hoger of minder hoog maken door regel 248 aan te passen. Probeeer bijvoorbeeld height: 400px; en height: 100px;
• Bekijk sjabloon3.html in de browser om het effect te zien.

Opmerking

• In de sjablonen 5 en 5a staat de titel midden onder. Die titel komt daar door de padding aan de bovenkant groot te maken.
  Als je de hoogte van de afbeelding wijzigt, moet je ook de padding aan de bovenkant (regel 256 van het betreffende stijlblad, de eerste waarde) aanpassen. (Zie suggestie 4).
• Ook bij sjabloon 1 staat de titel aan de onderkant van de afbeelding. Maar deze titel is absoluut gepositioneerd. En bij positieve positionering kunnen we gebruik maken van de positie bottom. Hier schuift de titel dus wel mee met de hoogte van de afbeelding. (Zie suggestie 4a)

Suggestie 2: Streep boven de achtergrondafbeelding

Suggestie werkt bij alle sjablonen. Beschreven voor sjabloon 3.

Om een streep boven de afbeelding te krijgen kan je de eigenschap border-top (bovenrand gebruiken):

• Voeg daartoe ergens in header een regel toe met iets als border-top: 20px solid hsl(210, 60%, 60%);.
  Dat is een grijsblauwe bovenrand van 20px. Je mag natuurlijk ook een heftiger kleur proberen.

Suggestie 3: Een achtergrondkleur voor header

Suggestie werkt bij de sjablonen 2/2a...5/5a. Beschreven voor sjabloon 3.

Je kan in plaats van een achtergrondafbeelding, ook een achtergrondkleur kiezen. In feite staat die kleur al in regel 249; je ziet hem niet omdat de achtergrondafbeelding eroverheen staat.
Haal de afbeelding uit regel 250 weg en je hebt een blauwe balk. Pas eventueel (in regel 249) de kleur aan.

Je kan boven of onder de balk met border-top of border-bottom nog weer een streep in een andere kleur kiezen (suggestie 2).

Suggestie 4: De plaats van de titel aanpassen

Deze suggestie werkt bij de sjablonen 2/2a..5/5a. Beschreven voor sjabloon 3.

• De horizontale plaats van de titel wordt bepaald in regel 246 (zie figuur 1).
  Hier kan staan text-align: left;, text-align: center; of text-align: right;
  • text-align: left;, links uitgelijnd. In dit geval bepaalt de linker padding in regel 256 (het laatste getal - hier 40px) de afstand tot de linker rand.
  • text-align: right;, rechts uitgelijnd. In dit geval bepaalt de rechter padding in regel 256 (het tweede getal - hier ook 40px) de afstand tot de rechterer rand.
  • text-align: center;, gecentreerd.
• Met 'padding boven' in regel 256 (het eerste getal, hier 10px) stel je de afstand tot de bovenrand in, de verticale uitlijning.

Experimenteer met de plaats van de titel. Kijk eventueel in de verschillende sjablonen (In sjabloon 2/2a staat de titel linksboven, in sjabloon 3/3a midden boven, in sjabloon 4/4a rechtsboven en in sjabloon 5/5a midden onder).

Suggesie 4a: De plaats van de titel aanpassen -vervolg-

In sjabloon 1 en 1a is de titel absoluut gepositioneerd (met position: absolute). De positie van de titel kan dan worden opgegeven met de waarde top of bottom en left of right.

• Maak hiertoe in stijlblad 1.css regel 258 en 259 leeg.
• Plaats op regel 258 de stijlregel: left: 0; om de titel linksonder te zetten.
• Verander regel 258 in right: 0; om de titel rechtsonder te zetten.
• Met op regel 258 right: 50px; zet je de titel 50px van rechts.
• Door op regel 257 bijvoorbeeld top: 30px; zet je de titel 30px van boven.

Zo kun je met de eigenschappen top/bottom en left/right op de regels 257s en 258 de titel plaatsen waar je wilt.

De titel centreren

Op het eerste gezicht kan je de titel centreren met de opdracht left: 50%; of right: 50%;, maar dat gaat niet helemaal goed. In he eerste geval wordt dan de eerste letter van de titel in het midden gezet, in het tweede geval de laatste letter.

Met bv. left: 600px; uitlijnen gaat ook niet goed, omdat de vensterbreedte niet op elke computer hetzelfde is.

Het centreren gaat dan met de methode van figuur 2:

• In regel 258 zetten we text-align: center; om de tekst binnen h1-element te centreren.
• In regel 259 maken we de breedte van de h1 100%.

  Zonder width: 100%; is een blok-element bij absolute positionering een inline-blok. De tekst bepaalt dan de breedte, en dan werkt de centrering niet.

Suggestie 5: Afbeelding in de html

De suggestie als beschreven werkt alleen bij sjabloon 1 en 1a; beschreven voor sjabloon 1.

Als je de mogelijkheid wilt hebben op verschillende pagina's ook verschillende kopfoto's te gebruiken, dan moet de kopfoto in de html staan. Dat houdt wel in dat je titel absoluut moet positioneren. Dat is de reden dat we kiezen voor sjabloon 1 (of 1a):

• Zet in sjabloon1.html in de header een afbeelding: bv.
  <header> <img src="img/achtergrond.jpg"> <h1>Titel</h1> </header>
• Haal in het stijlblad 1.css de achtergrondafbeelding weg (regel 250).

Het menu

figuur 3: stijlblad 3.css - menu voor grote schermen 205nav {
206padding: 40px 20px 0px 20px;
207border-bottom: 1px solid hsl(240,100%, 90%);
208}
...
220nav a {
221background-color: transparent;
222border: initial;
223border-radius: initial;
224color: hsl(240, 100%, 45%);
225font-size: 90%;
226margin: 0 10px;
227padding: 0 0 2px 0;
228width: 90px;
229display: inline-block;
230text-decoration: none;
231}
...
235nav a:hover { background-color: white; border-bottom: 2px solid hsl(240,100%, 45%);}
...
240nav a[href=""] {background-color: white; border-bottom: 2px solid hsl(240,100%,45%); }

• De regels 221...223 (zie figuur 3) resetten de opmaak van het menu voor smalle schermen.
  • Regel 221 zorgt ervoor dat de achtergrondkleur van het menu transparant wordt: je ziet dan de achtergrondkleur van body (wit).
  • Regel 222 zet de border terug op zijn standaard waarde. (Dat is geen border).
    Zonder gebruik te maken van initial had je iets moeten schrijven als border: 0px none white. Met initial gaat het sneller en zekerder.
  • Regel 223 zet de afronding op initial. border-radius: 0; zou ook goed zijn.

Het menu ziet er in de variant 'wit' heel anders uit dan in de variant 'paars'. De witte variant is momenteel meer in de mode dan de knoppen van de paarse variant.

• In de witte variant is de dunne blauwe lijn gemaakt door de stijlregel border-bottom: 1px solid hsl(240, 100%, 90%) voor het element nav (regel 207)
• De dikke blauwe lijn voor onder het menu-item van de pagina in beeld wordt verkregen met de stijlregel nav a[href=""] {border‑bottom: 2px solid hsl(240,100%,45%); } (regel 240).
• Ook bij aanwijzen (hover) van hyperlinks in nav wordt een 2px brede blauwe onderrand gezet. (regel 235)
• De padding onder van 0px op (3e padding-waarde op regel 206) zorgt ervoor dat de brede lijn voor de menubalk en de dikke lijn aansluiten.
• Met de padding onder van 2px op regel 227 wordt de afstand van de lijn tot de tekst bepaald. Die kan je desgewenst wat groter of kleiner maken.

Suggestie 5: Een verticaal menu

Werkt het best met 2 of 3 kolommen. Beschreven voor sjabloon 4a.

In alle sjablonen is het menu horizontaal, alle menu-items (hyperlinks) staan op dezelfde regel.

Je kan het menu simpel verticaal maken. Dat kan het best worden bekeken aan de hand van sjabloon 4a:

figuur 4: stijlblad 4a.css - menu voor grote schermen ...
220nav a {
221background-color: hsl(50, 100%, 50%);
222border: initial;
223border-radius: 20px;
224
225font-size: 90%;
226margin: 5px;
227padding: 5px;
228width: 90px;
229display: inline-block;
230text-decoration: none;
231}

• Open het stijlblad 4a.css in de editor.
• In het blok met stijlregens voor nav a (menulinks) staat op regel 229: display: inline-block.
  Maak hiervan: display: block. Klaar!
  Door van de menu-items blok-elementen te maken komen ze niet meer op één regel, maar onder elkaar.

De menu-items nemen zo wel veel plaats in boven de header. Je kan het menu dan beter op een andere plaats zetten. Meestal kiest men daarvoor de linker kolom.

Dat gaan we als volgt doen:

• Open sjabloon4a.html in de editor.
• Verplaats het element nav met inhoud (met knippen en plakken) naar de eerste aside. Zet het vooraan in de aside, nog voor het element article.
• Bekijk het reultaat in de browser.
• Tenslotte laten we de menu-items de hele breedte van de aside vullen:
  • Verander regel 229 in: display: block;  width: auto;
    Bekijk het resultaat in de browser.

Opmerkingen

Aanvankelijk vulde ik in regel 229 in: width: 100%;. Toen staken de menu-items wat uit.
Over het waarom: zie de opmerkingen in de naslag over width.

Suggestie 6: Een tabblad menu

In hoofdstuk 37 staat beschreven hoe je sjabloon 5 kan ombouwen tot een tabblad menu.

En verder....

En verder kun je de breedte van de verschillende elementen (main, aside, div#container) aanpassen, andere margins en paddings gebruiken, kleuren en achtergronkleuren instellen. Zo maak je de website helemaal naar je wens.

Het zal je regelmatig gebeuren dat de website er plotseling heel anders uitziet dan je verwacht en bedoeld had. Dat gebeurt mij nog steeds regelmatig. Probeer dan de website heel langzaam, stap voor stap op te bouwen en aan te passen en kijk telkens wat het resultaat is van een verandering. En als iets echt niet lukt, probeer dan of iets wat er een beetje op lijkt gemakkelijker voor elkaar is te krijgen.

Op den duur lukt je dan steeds meer!