Template maken voor Webshops van FreeWebShop

Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info

De uitdaging. Een kennis die een site wil hebben, een webshop. Het grafisch ontwerp is er al. Voor eerst koos ik ervoor de webshop te maken met FreeWebShops. Dit omdat ik al een paar keer gespeeld had met dit pakket, en naar mijn smaak voldeed het gewoon goed. De mail die ik ontving had de volgende afbeelding als bijlage. Verzoek was om op korte termijn hiervan een website te maken. Het mocht vooreerst wel html zijn, als er maar snel iets was. Zo gezegd zo gedaan, eerst het geheel naar html omzetten. Dat is nogal een klus op zich. Ooit eerder geprobeerd van een jpg, bestand een website te maken? Tja en dan de wetenschap dat een webshop het uiteindelijke doel is Enfin, of ik nu links of rechts om zou gaan. De eerste stap is het maken van een html pagina. Dat valt niet in het gehele van deze handleiding, en ik ga u er niet mee vermoeien. Grofweg kwam het erop neer dat ik de banner uitknipte, en opsloeg, vervolgens de rode balk onder de banner. Daarna een regel van de body (het witte en grijze deel) helemaal aan het eind sneed ik nog een stukje uit waar de body overgaat in de rest van de pagina. Met deze afbeeldingen starte ik een website maker (In mijn geval Dreamweaver CS3. Een beetje knoeien met layers, en de html pagina was klaar. Dan begint het echte werk.

Van HTML naar FreeWebshop- Template Stap 1 indeling pagina bekijken en benoemen. Uit de afbeelding zijn al een aantal zones voor de pagina te zien. De banner, Het horizontale menu (rode balk), Het contentdeel (grote witte vlak), het vertikale menu (grijze deel naast het contentdeel) en de footer. Grafisch dus zo: Banner vlak Horizontaal menu Content Vertikaal menu Footer Om het mezelf makkelijk te maken heb ik dit in dreamweaver ook zo gemarkeerd. (Niet de witte vlakken natuurlijk, maar wel de teksten) Dat maakt het later makkelijk om te bepalen wat waar terecht moet komen.

Stap 2 de hmlcode bekijken De code die ik toon is sterk vereenvoudigd, ik laat dus dingen weg die buiten het bereik van de handleiding vallen. De code beperkt zich in mijn voorbeeld tot dat gedeelte wat tussen de body-tags wordt genoemd. Uiteraard is het simpel om eerst een bestaand en functionerend template te bekijken, dus dat heb ik naast mijn html pagina gelegd. In de template zag ik vee lstukjes php script staan (te herkennen aan <?php..?>) Een beetje meer ervaren webdesigner, die bekend is met php weet dat <?php het begin van php script aanduiden. Op de puntjes staat dan het php script dat uitgevoerd wordt en?> markeert het eind van het php script. Hoewel dit geen php cursus is, toch even een kort voorbeeld ter verduidelijking: <?php ECHO Hallo wereld ;?> zou bij uitvoeren de woorden Hallo wereld tonen. De puntkomma is het afsluiten van 1 php regel. Na een beetje spelen krijg je al gauw een gevoel welk stukje script welk stuk van de website regelt. Stap 3 Template directory maken Eigenlijk een simpele stap dus deze jaag ik er gauw door. De meest simpele stap is is het kopiëren van een bestaande template. Ik heb er voor gekozen om de default template te kopiëren. Uiteraard kopieer je deze template gewoon in de template directory, en na het kopieren geef je er een duidelijke naam aan. Aangezien de site die ik maakte Outdoor Country Club heet heb ik er voor gekozen om mijn directory OCC te noemen. Het voordeel van kopieren is dat je alle images die er standaard in de webshop gebruikt worden heb staan. Uiteraard kun je ook de map images opnieuw vullen, maar wat is het nut daar nou weer van? In de nieuwe template directory staat een template.html file. Deze kopieer ik, zodat ik altijd weer terug kan vallen op de standaard template van FWS. Wanneer ik tevreden ben over de nieuwe template verwijder ik aan het eind van het project deze kopie wel weer. Voor de stylesheet doe ik hetzelfde. In het gehele traject moet ik immers twee stylesheets zien samen te voegen tot een stylesheet. Immers de buttons in het menu wil ik gewoon overnemen in de nieuwe site, maar ik wil ook wat opmaak van mijn eigen ontwerp opnemen in de site. Tenslotte kopieer ik vanuit mijn html versie van de site de afbeeldingen naar de map images in de template. De template directory ziet er ongeveer als volgt uit:

Stap 4 template.html bewerken Zo alle voorbereidende werkzaamheden zijn gedaan. Nu het echte werk. Open de template.html. (Nogmaals zorg ervoor dat je een kopie hebt van het origineel!). Template.html leeg maken Ga op zoek naar de html-body-tag. Herkenbaar aan <body.. >. Op de puntjes kan nog heel wat andere zaken staan. Selecteer alles wat staat tussen deze begin tag, en de eindtag van de body (</body>. Verwijder het geselecteerde gedeelte. Het scherm zou er nu als volgt uit moeten zien: Vervolgens plaats ik de cursor zo dat ik voor </body> (regel 18) wat witruimte kan invoegen. Waarom deze stap? Een paar redenen die wat mij betreft voor de hand liggen, maar aangezien deze handleiding voor dummy s is bedoeld toch een korte toelichting. Op de regels 9, 10 en 12 zien we een paar relevante redenen. Zoals aangegeven staan daar php scripjes. Op regel 9 wordt door het script ervoor gezorgd dat de omschrijving van de site wordt getoond, op regel 10 worden de sleutelwoorden getoond, en op regel 12 wordt de titel van de site getoond. Er zijn mogelijkheden om hier het script te vervangen door deze dingen handmatig in te vullen, maar wat als de klant later hier wat wil aanpassen? En laten we simpel zijn, in het administrator gedeelte van de website komen we deze velden ook tegen. Ik stel dus voor dat je de scripts laat staan en in het administrator gedeelte deze zaken invult. (voor de duidelijkheid, regel 9 vul je in bij instellingen winkel winkel omschrijving. Regel 10 instellingen winkel Kernwoorden. Regel 12 instellingen opmaak pagina titel) Op deze manier houdt de klant zaken flexibel. Een soortgelijk iets geldt voor de verwijzing naar de stylesheet.

Eigen html ophalen. Open uw eigen html bestand (in mijn geval occ_index.html), en selecteer het gedeelte tussen de body-tags (dus alles tussen <body> en </body>. Knip/kopieer dit gedeelte, en ga naar template.html en plak alles tussen de body tags terug. Zoals je ziet is dit niet de hele pagina, maar het gaat om het deel tussen <body> en </body>, daar gebeurt het werk zullen we maar zeggen. Zo dat is dat, de blokken zijn aanwezig. Maar of het nu werkt? Ik denk het niet, er moet nodig een en ander worden aangepast. Ik ga de regels bij langs, en als er iets te melden is zult u dat vanzelf zien. Banner aanpassen Eerst de banner aanpassen. (regel 20). De image tag verwijder ik <img name="banner_img" src="banner.jpg" width="1000" height="358" border="0">, deze vervang ik door: <?php include("header.php");?>. 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 <?php include("slogan.php");?> 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 <?php include("topmenu.php");?>. 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 : <div class="menu_top" id="menu_top"><?php include("topmenu.php");?></div>

Inhoud van de site aanpassen Ik ga op zoek naar de volgende regels <p>hier wordt de inhoud voor class "content_text" id "content_text" weergegeven</p> <p> </p> <p> </p> <p> </p> <p>bla die bla</p> Wanneer je bovenstaande stappen hebt uitgevoerd zijn dat regels 24 t/m 28 geworden. (DUS NIET OP DE AFBEELDING KIJKEN). Deze tekst selecteren we en vervangen we door de volgende regel: <?php include("loadmain.php");?>. In dit deel zorgen we er dus voor dat de teksten van de pagina s getoond worden, dus ook productlijsten enz. Ook nu kies ik ervoor om wat regels op een regel te zetten. De volgende regel komt eruit: <div class="content_text" id="content_text"><?php include("loadmain.php");?></div> MenuBar (zijkant) Na al mijn acties tot hier toe ziet mijn scherm er als volgt uit: Regel 24 willen we dus aanpassen. De tekst hier de sidebar halen we weg en gaan we door het menu vervangen. Het menu in FWS bestaat uit een aantal submenu s en die gaan we tonen. Uiteraard kunt u ervoor kiezen een van de submenu s niet te toen, dan voert u die regel niet uit. Hoe dan ook de tekst Hier de sidebar halen we weg en vervangen we door (de keuze is aan u): <?php include("menu_cart.php");?><br /> (winkelwagentje) <?php include("menu_products.php");?><br /> (productenlijst) <?php include("menu_general.php");?><br /> (menu Informatie) <?php include("menu_extra.php");?> (extra pagina s) Footer aanpassen Regel 26 uit de afbeelding dus. de tekst Hier wordt de inhoud voor class "footer" id "footer" weergegeven vervangen we voor <?php include("footer.php");?>. Zo dat was de aanpassing van de html file.

De code in afbeelding: Het resultaat in de browser is nog niet wat we willen/verwachten, we hebben immers de CSS nog niet gefixed

Stap 5 CSS bewerken Zoals we zien is de pagina nu FWS klaar, maar we willen dit niet presenteren. Dat komt omdat er op dit moment een CSS sheet is gekoppeld, en de CSS van mijn eigen html bestand nog niet. De kortste klap is om mijn eigen stijlsheet ook te koppelen, maar netjes is het niet. Dus, we gaan de inhoud van mijn eigen stijlsheet kopieren naar de stijlsheet van FWS. Hier moeten we er voor uitkijken dat we niet twee keer dezelfde tags hebben. In de editor sluiten we alle documenten, en openen we vervolgens de twee stijlsheets in de templatedirectory. (stylesheet en style_occ dus). De inhoud van mijn stijlsheet kopieer ik volledig naar de stylesheet van FWS. Aangezien ik in stap 3 al heb aangegeven dat de stylesheets ook gekopieerd moeten worden is het vrij simpel. Ik kan lekker aanknoeien, doe ik iets fout, en is herstellen niet mogelijk, dan moet ik opnieuw beginnen op basis van de kopie van het orgineel. Hoe dan ook, na elke stap van wijzigen even opslaan en het resultaat bekijken, dat is de procedure. Zeker als je met CSS nog niet zo bekend bent (zoals ik). Waarom CSS Eigenlijk heel simpel te beantwoorden. Je kunt in een pagina alle tags afzonderlijk van een lay-out voorzien. Bijvoorbeeld de kleur van de pagina moet grijs zijn. Dit kun je op elke pagina regelen door de body tag aan te passen (<body bgcolor="#cccccc">). Dit moet je dan wel op elke html pagina van de site doen. En stel je hebt een stuk of 10 pagina s. Op een gegeven moment vindt er een aanpassing van de stijl plaats en wilt het bedrijf geen grijze maar een lichtgrijze achtergrond. Dan moet je op 10 pagina s de <body bgcolor="#cccccc"> aanpassen naar <body bgcolor="#d2d2d2">. Kortom 10 keer aanpassen. Ditzelfde zou kunnen gelden voor de links en nog meer van dat soort dingen. Kortom op 10 pagina s van alles en nog wat aanpassen, dat moet simpeler kunnen. Daar is CSS voor. In CSS zet je een regel in de trend van Body{ background: #CCCCCC; } Het aanroepen van de stylesheet wordt geregeld in de kop van de pagina s. Dus pas een keer de background van de body aan, en op alle (10) pagina s van de site is dit geregeld. CSS klassen, Id s In bovenstaand verhaal werd globaal het nut van CSS uitgelegd. Maar aangezien mensen nooit tevreden zijn moeten we wat kunstgrepen hanteren om aan wensen tegemoet te komen. Wat als een klant alle links in de blauwe kleur wilt hebben, maar een specifieke link in een andere kleur wilt om die er nog meer uit te laten springen. Op regel 19 ziet u <div id="main-wrapper"> 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) <a href = index.html class= opvallen > 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? : info@van-tuil.info