Template maken voor Webshops van FreeWebShop
|
|
- Augusta Verbeke
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info
2 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.
3 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.
4 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:
5 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.
6 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>
7 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.
8 De code in afbeelding: Het resultaat in de browser is nog niet wat we willen/verwachten, we hebben immers de CSS nog niet gefixed
9 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
10 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; } */
11 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
Interactief blok 2 code opdracht 6 - wireframe
Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).
Nadere informatieVoor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Nadere informatieInhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
Nadere informatieWelkom bij mijn website tutorial (Deel 2)
Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Nadere informatieVoor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 6) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Nadere informatieHTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.
Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for
Nadere informatieHandleiding: Whitelabel Customersite
ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.
Nadere informatieHandleiding Nieuwsbrief InSocial in Mailchimp
Handleiding Nieuwsbrief InSocial in Mailchimp Inhoud 1 Mogelijkheden page 2 2 Bericht opties page 3 3 Achtergrond page 4 4 Afbeeldingen page 5 5 Tekst page 6 6 Link page 7 7 Testen page 8 TEST altijd eerst
Nadere informatiePro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen
Nadere informatieHandleiding MOBICROSS actie banners
Handleiding MOBICROSS actie banners Met de kant & klare MOBICROSS actie banners vergroot jij je kans om sneller je netwerk te bouwen. Je kunt je eigen campagne maken door de banners op je website te plaatsen,
Nadere informatieA Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Nadere informatieWerken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
Nadere informatieInhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B
Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een
Nadere informatieCentral Station. CS website
Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken
Nadere informatieA Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Nadere informatieDennis Wagenaar 19-04-10 v 1.0
Ontwerprapport Save Energy Leiden Dennis Wagenaar 19-04-10 v 1.0 Inhoudsopgave Inleiding...4 1 Grafisch Ontwerp...5 1.1 De website...5 1.2 Header...6 1.3 Menu...6 1.4 Content...7 1.5 Grafieken...7 1.5
Nadere informatieGebruikershandleiding webshop
Gebruikershandleiding webshop Gebaseerd op FreeWebshop van http://www.freewebshops.org Onderdeel Toevoegen producten Gebruikte menuopties: Versie 1 Februari 2011 P.J. van Tuil info@van-tuil.info Toevoegen
Nadere informatieWeb Presence Builder. Inhoud
Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf
Nadere informatieFactuur Lay-out / Factuur Template
Factuur Lay-out / Factuur Template In i-reserve is het mogelijk facturen te verzenden. De facturen worden als pdf bijlage per e-mail naar de klant verzonden. In deze tutorial wordt beschreven hoe u een
Nadere informatie1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Nadere informatiedesign ook items uitsnijden
(fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het
Nadere informatieHosting. Bestelformulier en domeinnaamcontrole. Januari, 2013. WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland. w: www.wefact.nl e: helpdesk@wefact.
Hosting Januari, 2013 Bestelformulier en domeinnaamcontrole WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland w: www.wefact.nl e: helpdesk@wefact.nl Introductie Algemeen In deze handleiding wordt uitgelegd
Nadere informatieHandleiding Wordpress CMS 4-5-2015
Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.
Nadere informatieHandleiding website FMS-spaarnwoude.nl
Handleiding website FMS-spaarnwoude.nl Alfred Houdijk Webmaster 27-12-2012 Inhoud Inleiding... 2 Wie kan wat op de website... 3 Foto s en filmpjes plaatsen... 4 Copyright... 4 Schrijf een artikel... 5
Nadere informatieGebruikershandleiding websitebeheer m.b.v. Wordpress
Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie
Nadere informatieHandleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0
Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0 1 Inhoudsopgave Toevoegen nieuw artikel, of wijzigen...3 Extra web-functionaliteit...4 toevoegen van een foto/plaatje...4 toevoegen
Nadere informatiehttp://www.zeelandtotaal.nl/les_gevorderd/les_1/index_les_1_gev.php
1 van 7 28-5-2010 12:36 We hebben deze situatie voor ons. Misschien met wat andere kleuren maar dat maakt niet uit. Het belangrijkste is dat de linken op de pagina staan en het logo. Het kan zijn dat je
Nadere informatieOntwerp Portfoliowebsite MMIO 2016
Ontwerp Portfoliowebsite MMIO 2016 Marit Beerepoot 10983430 7 februari 2016 Informatiekunde Universiteit van Amsterdam Inleiding Voor deze opdracht was het de bedoeling dat er 3 verschillende voorstellen
Nadere informatieHandleiding Lay-outs bewerken voor LogiVert 5
Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.
Nadere informatieGame Maker 6.1. Sprite up your life with Gamemaker. Hoofdstuk 1.2
Game Maker 6.1 Sprite up your life with Gamemaker Hoofdstuk 1.2 Sprite up your life Het is ook heel eenvoudig om zelf sprites te maken of te bewerken. Alles wat je nodig hebt is het programma Gamemaker.
Nadere informatieLichtgewicht CSS design voor Drupal 6
Lichtgewicht CSS design voor Drupal 6 Roy Scholten Drupaljam Enschede, 20 maart 2009 1 Question: How to convert an OSWD design into a Drupal theme. In 45 minutes? 2 Wie heeft deze vraag gesteld? Answer:
Nadere informatieTrippeltrap Content Management System
Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.
Nadere informatieHandleiding om uw website/webshop aan te passen
Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een
Nadere informatieHANDLEIDING DOIT BEHEER SYSTEEM
HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde
Nadere informatie1. Algemeen: a. Freeware website: b. Taakverdeling: c. Interactief: d. Inlognaam-wachtwoord: 2. Agenda (openbaar): Zelf een item toevoegen?
Beste leden; Zoals ik al eerder mailde, is de nieuwe website toe aan testen door leden. Pas na gebruik door de leden zullen eventuele kinderziektes kunnen worden aangepast. Hieronder volgt wat informatie
Nadere informatieHandleiding bij het Content Management Systeem
Handleiding bij het Content Management Systeem 1. Content Managent System startvenster 2. Hoe voeg ik een nieuwe gebruiker toe? 3. Hoe maak ik een hoofdmenu-item aan? 4. Hoe koppel ik tekst aan een hoofdmenu-item?
Nadere informatieInhoud van de website invoeren met de ContentPublisher
Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.
Nadere informatieHandleiding teksteditor
In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.
Nadere informatieEditing Guide v1.2.2
Editing Guide v1.2.2 Inhoudstafel Aanmaken tabel... p.3 Image uploaden... p. 4 Plakken uit Word... p. 6 Teksten formatteren... p.7 Aanmaken tabel Invoegen van een tabel via de button: In de popup kan je
Nadere informatieHandleiding Wordpress
Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde
Nadere informatieFoto s verkleinen en Foto s in elkaar over laten lopen
Foto s verkleinen en Foto s in elkaar over laten lopen Een foto, ergens op uw computer Open een de map van bestanden voor de website, of maak deze eerst aan. Open de te gebruiken foto met het volgende
Nadere informatieStap 2 Je template invullen
Stap 2 Je template invullen Allereerst in stap 2 gaan we onze template ophalen. Die staat op www.alphamegahosting.com/516, ook de uitleg is daar te vinden. Je kunt hem vanaf daar downloaden en op je bureaublad
Nadere informatieHandleiding. Beheeromgeving
Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3
Nadere informatieProgrammeren in MyShop
Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je
Nadere informatieActiveBuilder Handleiding
ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3
Nadere informatieBasis handleiding CMS
Basis handleiding CMS Inhoud Basis handleiding CMS... 1 Inloggen... 3 Pagina beheren... 4 Pagina toevoegen/wijzigen... 6 WYSIWYG editor... 8 externe / interne link toevoegen... 9 Plaatjes toevoegen...
Nadere informatieZÉLF JE WORDPRESS WEBSITE MAKEN?
WordPress blog ZÉLF JE WORDPRESS WEBSITE MAKEN? WordPress Academy Nederland helpt je op weg met onze Basiscursus INHOUD P1 P2 P3 P4 P5 P6 P7 P8 P9 P 10 P 11 P 12 P 13 P 14 P 15 P 16 P 17 P 18 P 19 P 20
Nadere informatieWijzigen... 5 Verwijderen... 5
Inhoud: Contentbeheer... 2 Variabelen en instellingen voor website... 2 variabelen... 2 Kopnaam voor website instellen... 2 Slogan voor website instellen... 2 Vaste teksten voor elke webpagina instellen...
Nadere informatieHoe moet je een prachtige presentatie maken?
Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven
Nadere informatieHandleiding Mijneigenweb.nl
Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen
Nadere informatieEen quiz plaatsen op je website
Een quiz plaatsen op je website Om de deelnemers een beetje na te laten denken kan je een quiz toevoegen op je site. Dat doe je op de volgende manier: a. Een quiz aanmaken Ga naar je eigen pagina en klik
Nadere informatie1 BUSINESS INTERNET SUPPORT
Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet
Nadere informatieHandleiding Word Press voor de bewoners Westerkaap 1
1 Handleiding Word Press voor de bewoners Westerkaap 1 Inhoud: Inloggen Pagina 1 Algemeen Pagina 2 Berichten Pagina 2 Bericht bewerken, Linken Pagina 3-4 Plaatje toevoegen bericht Pagina 5-6 Bericht publiceren
Nadere informatieDit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde
Dit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde [64] [Arthur Hemmer 5494753] [Mehul Mistry 4255704]
Nadere informatieInvoegen... 8 Invulpunt... 9 Nieuwe bouwsteen maken... 9 Bouwsteen opslaan... 10. Wijze van werken in Outlook... 11 Informatie...
ProDoc Bouwstenen voor Word & Outlook 2007 Inhoud Kopiëren bestanden... 2 Hoofdmap Bouwstenen... 2 Bouwsteen.dotm... 2 Installatie Bouwstenenmodule onder Word 2007... 3 Installatie Bouwstenenmodule onder
Nadere informatieHomepagina - Logo en favicon plaatsen
Homepagina - Logo en favicon plaatsen Wat leer je in dit hoofdstuk: - Hoe je een logo kunt plaatsen - Hoe je een favicon kunt plaatsen - Hoe je tekst kunt aanpassen in de tabbladen van je browser Inleiding
Nadere informatieDocumentatie Nederlands v1
Documentatie Nederlands v1 Getting started Navigation menu Theme settings General Features Background Typography Banners Contact details Social Unique selling points Image Sizes Frequently asked questions
Nadere informatieWelkom bij Sitebuilder, een praktijksite maken in 5 stappen.
Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Wat is sitebuilder Site Builder is een uiterst gebruiksvriendelijk en zeer uitgebreid product waarmee u snel een eigen praktijkwebsite kunt
Nadere informatieEBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG
EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind
Nadere informatieHandleiding Website beheersysteem
Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8
Nadere informatieDe basisknop 'alle site inhoud tonen' links in uw scherm
2.1 Inleiding De mogelijkheden om binnen een Sharepoint-teamsite informatie (content) te presenteren, te delen en te beheren zijn groot. De starttemplates waar uit kunt kiezen (zie 1.3) kunnen door u zelf
Nadere informatieHandleiding ESS na de upgrade People Inc. versie 3.5.0
Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst
Nadere informatieCS-WebDesign.nl. Invoeren van een product in de editor
CS-WebDesign.nl Invoeren van een product in de editor 2005-2012 Courbois Software Beuningen Fazantlaan 63, 6641 XW Beuningen. www.courboissoftware.com & www.cs-webdesign.nl 024 677 25 46 - info@cs-webdesign.nl
Nadere informatieHandleiding website. Inloggen Start uw internet browser en ga naar http://www.rbaoreven.nl/.
Handleiding website In deze handleiding staat alles wat u nodig heeft om een bericht op de website van de Reddingsbrigade Aoreven Heythuysen te plaatsen. Alles wordt in woord en beeld uitgelegd. Inloggen
Nadere informatieFormulieren maken met Dreamweaver CS 4/CS 5
Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit
Nadere informatieGebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce
Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke
Nadere informatieHet Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010
Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management
Nadere informatieIAI: Les 2 Vakjes maken. Rick Hazebroek r.hazebroek@cibap.nl
IAI: Les 2 Vakjes maken Rick Hazebroek r.hazebroek@cibap.nl 1 2 Les 2 Bekijk de powerpoint van deze les Opdracht 1: Vakjes maken Bekijk de tekening op de vorige pagina. Je ziet hier verschillende onderdelen:
Nadere informatieEen pagina toevoegen en/of bewerken.
Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik
Nadere informatieSafira CMS Handleiding
Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...
Nadere informatieVerwijderen van een persoon kan door de regel leeg te maken. Met de knop (linksonder) Verwijderen verwijdert u de hele pagina!
Algemeen Ingelogd als moderator/ pagina beheerder kan je teksten op een pagina plaatsen, bewerken of verwijderen. Ga naar de pagina waar je toegang tot hebt. Onder het logo en boven de foto (header) krijg
Nadere informatiePAGINA BEHEER. Heel belangrijk is dat u niet vergeet op te slaan anders gaan al uw wijzigingen verloren, deze knop vind u bovenin de pagina!!!
HANDLEIDING DIGIMANAGER PAGINA BEHEER In het pagina beheer heeft u de mogelijkheid om de content van uw website in te vullen en aan te passen. om invullingen en wijzigingen uit te voeren gaat u naar het
Nadere informatie5. Een nieuw grijs blok onderaan plaatsen
5. Een nieuw grijs blok onderaan plaatsen Onderstaande instructie is geschreven om een nieuwe grijze footer onder aan je site te maken. Deze footers kun je makkelijk gebruiken om mensen naar een bepaald
Nadere informatieVan website naar e-zine Composer template
Van website naar e-zine Composer template Inleiding In dit document wordt beschreven hoe u te werk zou kunnen gaan om van een bestaande website een template te maken voor een digitale nieuwsbrief. Bij
Nadere informatieHANDLEIDING CMS Versie 2.4 januari 2013
Het CMS dat bij deze site geleverd wordt heeft hoofdzakelijk tot doel om goed door Google gevonden te worden. De hiërarchie van het CMS geeft aan hoe google per pagina naar uw website kijkt. De mate van
Nadere informatieHTML Graphics. Hans Roeyen V 3.0
HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.
Nadere informatieHet scherm is verdeeld in enkele blokken.
Log in op de achterkant van de website door naar http://www.cbs-sjaloomschool.picto.nl/joomla/administrator te gaan. Ingelogd zie je dit controle paneel. Je ziet het hoofdmenu van het beheerdersaccount.
Nadere informatieHandleiding invoegen afbeeldingen en downloadlinks t.b.v. het CMS
Handleiding invoegen afbeeldingen en downloadlinks t.b.v. het CMS Het blijkt dat we de nodige moeite hebben met het invoegen van afbeeldingen en het maken van downloadkoppelingen binnen ons CMS. Er moet
Nadere informatieEen website maken met Weebly
Een website maken met Weebly Bron: http://flippenindeklas.weebly.com/uploads/1/1/8/6/11865400/weebly_ handleiding.pdf (26-08-2016) Inhoudsopgave 2. Een account aanmaken voor weebly.... 3 STAP 1... 3 STAP
Nadere informatieprocesbeschrijving. Opdracht 1
Opdracht 1 procesbeschrijving 2014-2015 Dit document bevat een beschrijving van het proces van de Webdesign opdracht voor de cursus Informatie-uitwisseling van de opleiding Informatiekunde Team 28 Randell
Nadere informatieHANDLEIDING. WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING
HANDLEIDING WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING Inhoudsopgave Inloggen... 3 Een nieuw bericht plaatsen... 5 Aan een nieuw bericht beginnen... 5 Je bericht bewaren, een
Nadere informatieDe WordPress 3.5 Beginners Handleiding
De WordPress 3.5 Beginners Handleiding Internetbureau Elephant april 13 Inhoud Introductie... 2 Inloggen... 3 Het dashboard... 5 Berichten en pagina's... 6 Nieuw Bericht... 6 Nieuwe Pagina... 8 Afbeeldingen,
Nadere informatieWidget Tip van de dag!
Gebruikershandleiding Widget Tip van de dag! Datum Versie Naam Opmerkingen 01-12-2011 0.5 M. Bruinsma Schrijven handleiding J. van Beijnen 05-12-2011 1.0 J. van Beijnen Opmaak en kleine aanpassingen structuur
Nadere informatieGemeente Haarlemmermeer. Leer zelf je nieuwsbrief maken in YMLP. Opgesteld door: drs. Mariska I.R. Franse Datum: 6 en 11 juni 2013
Gemeente Haarlemmermeer Leer zelf je nieuwsbrief maken in YMLP Opgesteld door: drs. Mariska I.R. Franse Datum: 6 en 11 juni 2013 Nwsbrf.nl Office @ Igluu Jansdam 2a 3512HB Utrecht 06 447 08 349 info@nwsbrf.nl
Nadere informatieAfbeeldingen in de shop invoegen
Afbeeldingen in de shop invoegen Wat leer je in dit hoofdstuk: - Het verschil tussen een webshopafbeelding en een productafbeelding - Webshopafbeeldingen uploaden in de backoffice - Webshopafbeeldingen
Nadere informatieWebsite bouwen met frontpage
Website bouwen met frontpage Na het openen van frontpage komen we in volgend scherm terecht: hier gaan we in de rechter- Kolom kiezen voor Page Templates. Als vb ga ik de startpagina namaken van mijn site,
Nadere informatie11. Website controleren
11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet
Nadere informatieWORDPRESS. op de FourBottles manier. Pagina 1
WORDPRESS op de FourBottles manier Pagina 1 Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak
Nadere informatieHandleiding Joomla 3.x
Handleiding Joomla 3.x Hoe voeg ik een plaatje toe aan mijn artikel? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Wanneer je dit document voor je hebt, betekent dit dat je een Joomla
Nadere informatieEen website maken met Weebly Alva ICT Karsten Campsteyn Jan Penders
Een website maken met Weebly Alva ICT Karsten Campsteyn Jan Penders 1. Inhoudsopgave 2. Een account aanmaken voor weebly.... 3 STAP 1... 3 STAP 2... 3 STAP 3... 3 3. Een Menustructuur aanbrengen... 4 STAP
Nadere informatieVersie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman
Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,
Nadere informatieGlobale kennismaking
Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina
Nadere informatieBeginnerstrainin TYPO3 Stap voor stap de website beheren
Beginnerstrainin TYPO3 Stap voor stap de website beheren Programma Uitleg indeling website Achtergrond beheeromgeving TYPO3 Het publiceren Opmaken homepage Het maken van pagina's Het opmaken van pagina
Nadere informatiePLAKKEN Nadat u een gedeelte heeft geknipt of gekopieerd kunt u met dit icoon de selectie weer in het veld plakken.
KNIPPEN Als u na de selectie van een gedeelte van een tekst of een afbeelding op dit icoon klikt, knipt u de selectie uit het veld. Op deze manier kunt u het geselecteerde verwijderen, maar het ook juist
Nadere informatieAfbeeldingen - formaat aanpassen
Wat leer je in dit hoofdstuk: - Twee nieuwe manieren om foto s in je webshop te plaatsen - Hoe je het formaat van afbeeldingen kunt aanpassen Eindresultaat Een foto met de juiste afmetingen met een goede
Nadere informatieZelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn
Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn Versie: december 2009 De OFB Webshop / website kenmerkt zich door de eenvoudige en efficiënte opzet
Nadere informatieHandleiding. Content Management Systeem (C.M.S.)
Handleiding Content Management Systeem (C.M.S.) www.wecaremedia.nl info@wecaremedia.nl 0162-223 161 Inhoudsopgave Inloggen... 3 Dashboard... 4 Bestanden... 4 Map aanmaken... 4 Bestanden toevoegen... 5
Nadere informatiePro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen
Nadere informatieWe passen eerst ons bestaand inhoudstype Fotospecial een beetje aan:
Les 12 Paragraph + Bootstrap Met deze module kan je de inhoud van een node beter rangschikken op het scherm. Denk hier aan Display Suite en/of Panels. Ook die modules laten u toe om inhoud anders te schikken
Nadere informatieFormulieren maken met Dreamweaver CS 4
Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel
Nadere informatie