Header en Footer. Header en Footer

Transcriptie

1 Header en Footer Wat leer je in dit hoofdstuk: - Wat een header en footer is - De skin van de webshop aanpassen - Een logo plaatsen in de header - Een achtergrondafbeelding plaatsen - Links plaatsen in de header - Links plaatsen in de footer Eindresultaat header Eindresultaat footer Voorbereiding Download oefenbestanden van de website op je USB-stick: - oefenlogo.png - bg_header.jpg

2 Skin aanpassen Elke skin (look & feel van de webshop) ziet er anders uit. Daarnaast heeft iedere skin ook eigen afmetingen. Je gaat daarom in de volgende opdracht de huidige skin vervangen door de skin Carrara. Hierdoor weet je zeker dat de oefening op de juiste wijze kan worden afgerond. Let op: als je de skin later vervangt door een skin die je zelf mooier/passender vindt dan zullen de banners niet meer exact passend zijn. Een mooie oefening om deze dan aan te passen! voorbereiding 1. Klik op Homepagina -> Skin

3 2. Dubbelklik op de skin Carrara

4 Nu de skin is aangepast, kun je gaan starten met het aanpassen van de Header en de Footer, succes! Inleiding De kop of het bovenste gedeelte van je webshop, wordt de header genoemd. De header is zichtbaar op elke pagina van je webwinkel. De header kun je de winkelpui van je webshop noemen! De header laat de eerste indruk achter bij jouw webshop bezoeker. Zorg dat je header voorzien is van je logo, een slogan en een aantal hyperlinks. De onderkant of het onderste gedeelte van je webwinkel, wordt de footer genoemd. Ook de footer is zichtbaar op elke pagina van je webshop. De footer kun je de deurmat van je webwinkel noemen. Zorg dat je header voorzien is van de belangrijkste hyperlinks, zoals de algemene voorwaarden en de winkelwagen. Header De voorbeeldpagina hieronder heeft een header-sectie met een logo en een aparte achtergrond afbeelding. Daarnaast kun je via hyperlinks aangeven welke keuze je de bezoeker wil geven om andere pagina s van je webshop te bezoeken. Transparant Logo Header met achtergrond Keuze bovenin (Hyperlinks)

5 Stap 1: logo toevoegen 1 1. Klik je op Home pagina en daarna op Kopregel/tabs. Je ziet dan de onderstaande icoontjes op je scherm. 2. Klik vervolgens op Logo.

6 Je krijgt nu onderstaande informatie te zien: 3. Klik op Bladeren en selecteer het oefenlogo, nadat je Koppeling logo op via upload hebt gezet, als hij daar niet op stond. 4. Stel de breedte (300) en de hoogte (160) in. Standaard verwijst je logo naar een voorbeeldshop met fietsen. is de verwijzing naar die winkel. Je gaat nu vervangen door je eigen winkelnummer. Daarmee zorg je ervoor dat je logo op elke pagina verwijst naar je eigen homepagina. 5. Verander de verwijzing eigen webshopnummer.mijnwinkel.nl. 6. Klik vervolgens op OK 7. Bekijk het resultaat. 8. Klik op je logo om te controleren of je logo linkt naar je eigen webshop! Gefeliciteerd! Je hebt nu je logo geplaatst. Stap 2: achtergrondafbeelding in je header toevoegen 2 1. Klik op Homepagina 2. Klik op Skin

7 3. Klik op Thema aanpassen (beta) 4. Klik op Header en klik Achtergrond Header 5. Klik op het mapje achter Achtergrond Afbeelding

8 6. Klik op bladeren en selecteer de afbeelding bg_header.jpg 7. Klik op Start uploaden. Hiermee staat de afbeelding in MyShop. 8. Selecteer nu de onderaan de afbeelding bg_header.jpg 9. Verander Achtergrond Herhaling van repeat naar no-repeat 10. Klik op OK klikken in het scherm Thema aanpassen (beta). Je hebt nu de achtergrond van je header aangepast. Bekijk het resultaat. Stap 3: keuze bovenin aanpassen Naast je logo en een achtergrondafbeelding kun je ook nog enkele hyperlinks plaatsten. Van bijvoorbeeld de algemene voorwaarden, het contact of de winkelwagen. De volgende stappen zijn erop gericht om deze hyperlinks te maken

9 3 1. Klik op Homepagina en daarna op Kopregel/Tabs 2. Klik op Keuze bovenin 3. Klik in het nieuwe scherm op Keuze toevoegen

10 De naam van de link 2 Moet de link geopend worden in: - een nieuw venster (kun je doen als je naar een externe pagina linkt) - hetzelfde venster 3 Kies je een pagina uit binnen je site 4 Typ een eigen url in Je kunt nu alle pagina s die je in je shop maakt toevoegen aan de keuze bovenin. Dat is niet functioneel! In de menubalk zullen de meeste pagina s al aanwezig zijn. Welke pagina s zijn wel een goede optie? Winkelwagen, voorwaarden en contact passen daar wel. Ik de volgende oefening gaan we voorwaarden toevoegen Typ bij 1. Voorwaarden - Kies bij 2 hetzelfde venster (standaard) - Kies bij 3 voorwaarden 5. Klik op OK en bekijk het eindresultaat

11 Stap 4: Keuze onderin (Footer) We gaan nu ook de footer, ook deurmat genoemd, aanpassen. De manier waarop je de keuze onderin kunt aanpassen is precies hetzelfde als de keuze bovenin. Neem bij de header maar een paar links op. Dit i.v.m. het overzicht. Bij de footer kun je bijna niet uitgebreid genoeg zijn. Dit is je laatste kans om de bezoeker binnen te houden en als de bezoeker het op de deurmat niet kan vinden is hij weg. Alle pagina s die je hebt en eventueel zelfs meerdere trefwoorden die naar dezelfde pagina leiden (uiteraard zonder onoverzichtelijk te worden) kun je hier kwijt Klik op Homepagina en klik op Voetregel 2. Klik op Keuze onderin

12 Je krijgt nu een hele lijst aan keuzes te zien. Daarvan zijn echter alleen de links Informatie, Kies uw fiets en Social media te zien omdat er in dit thema geen sub-menu actief is. Je kunt hier de volgorde aanpassen, de keuzes als hoofdkeuze maken, de keuzes verwijderen of een nieuwe keuze toevoegen. 3. Verwijder alle keuzes en voeg enkel de pagina Voorwaarden toe.

13 4. Typ bij naam (keuze): Voorwaarden - Klik bij pagina op het lijstpijltje en kies voor voorwaarden - Klik op OK 5. Bekijk het eindresultaat Om zowel de header als de footer nog professioneler te maken zul je gebruik moeten maken van HTML.