1 Handleiding - Styling van OFB Web 4.0 Versie: 1.02 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt ...
You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)
Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden als het basis sjabloon. De opmaak voor de pagina en de controls wordt gerealiseerd Cascading Style Sheets (CSS). De CSSbestanden bevinden in de sub-folder: pages\_css. In de page.aspx zijn de verwijzingen opgenomen naar de CSS-bestanden:
href="~/pages/_css/algemeen.css" type="text/css" rel="stylesheet" /> href="~/pages/_css/controls.css" type="text/css" rel="stylesheet" /> href="~/pages/_css/button.css" type="text/css" rel="stylesheet" /> href="~/pages/_css/menu.css" type="text/css" rel="stylesheet" />
De opmaak is onderverdeeld in 4 bestanden, t.w.: algemeen.css controls.css button.css
menu.css
opmaak classes welke gerelateerd zijn aan de basis HTML-tags en betrekking hebben op de gehele website / -shop opmaak classes welke gerelateerd zijn aan de controls. In de stylesheet wordt door commentaar aangegeven op welke control(s) de classes betrekking hebben. in de webshop wordt gebruik gemaakt van een generieke knop/button. Dit om te zorgen voor een consistente opmaak door de gehele website / -shop. Alle classes m.b.t. deze knop worden in dit bestand opgeslagen. opmaak classes welke gerelateerd zijn aan het top down menu een aan de menucontrols welke aan de linkerzijde van de site wordt gebruikt
FTP Client Om met de opmaak van OFB Web aan de slag te gaan is het gebruik van een FTP-client aan te bevelen. Hierbij kunt u denken aan een commercieel product als CuteFTP of een gratis product als FileZilla.
Handleiding - Styling van OFB Web 4.0
2
You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)
Kleuren uitleverset In de uitleverset van OFB Web wordt gebruikt gemaakt van een 4-tal hoofdkleuren. Deze zijn terug te vinden bovenin het bestand algemeen.css (zie onderstaande afbeelding)
Afbeeldingen Voor de opmaak worden een aantal afbeeldingen gebruikt. In onderstaande tabel wordt per afbeelding het doel en de afmetingen weergegeven. Deze afbeeldingen staan in: \_images. Naam
Doel
Afmetingen (bxh)
bg_top.gif
achtergrond van de kop van de website achtergrond van de kop van de order-email achtergrond van de titelbalk
990x112
titelachtergrond van de control welke links en rechts van de site/shop worden weergegeven achtergrond van de knoppen achtergrond van de knoppen bij (hover) bewegen van de muis over de knop voortgang indicator tijdens het bestelproces afwijkende voortgang indicatie bij gebruik van betaalwijze iDEAL, PayPal of automatische incasso
1x20
1 pixel breed. In de stylesheet is vastgelegd dat deze zich in horizontale richting uitbreid idem
1x20 1x20
idem idem
bg_topemail.gif bg_topmenu.gif
bg_controlmenu.gif
bg_button.png bg_button_h.png
fase1.gif – fase5.gif fase3van5.gif
Opmerking
620x112 1x20
90x20 90x20
Knopafbeelding Op de knoppen wordt meestal gebruik gemaakt van een afbeeldingen. Deze worden in dit document niet per stuk besproken. De afbeeldingen staan in de _images folder en hebben als naam notatie ico_*_.png (v.b. ico_verder.png) . De afmeting van deze afbeeldingen is 16x16 pixels. Handleiding - Styling van OFB Web 4.0
3
You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)
Voorraadindicatie afbeeldingen In de OFB Webshop is instelbaar of u per product de voorraadaantallen toont, of misschien liever alleen een indicatie(icon). De afbeeldingen van de voorraad indicatie hebben als naam: vrdIcon1.gif, vrdIcon2.gif, vrdIcon3.gif en vrdIcon4.gif.
Eigen icoon (favicon) Dit is een icoon dat in de bovenbalk voor het internet adres komt te staan. Bijna alle bekende browsers zoals Internet Explorer 5+, Mozilla Firefox, Netscape 7.0+ en Opera 7.0+ ondersteunen dit mini plaatje. Een favicon.ico moet een formaat hebben van 16 x 16 pixels. Is het een ander formaat, dan wordt het meestal genegeerd en zie je dus niets. Een icoontje kun je maken met een icon editor, met een online generator of met bijvoorbeeld Photoshop (met addin). De locatie van het icon is: \_images\favicon.ico
Handleiding - Styling van OFB Web 4.0
4
You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)
Basis opmaak Onderstaand wordt in de afbeelding met genummerde balletjes de veel voorkomende opmaak wensen weergegeven. De nummers verwijzen naar de tabel waarin per punt nadere uitleg wordt gegeven. Buiten deze handreiking kunt u uiteraard alle overige opmaak geheel naar eigen wensen toepassen.
Opmaak van diverse specifiek controls Info volgt z.s.m.
Opmaak van de algemene knop Info volgt z.s.m.
Aanbevolen afbeeldinggrootte Omschrijving Groepsafbeeldingen Shopstartpagina Afbeeldingen in HTML pagina content (wanneer de afbeelding breder gemaakt wordt dan de maximale waarde wordt de site-indeling uit de verhouding / kader gedrukt
Handleiding - Styling van OFB Web 4.0
hoogte 70px 70px
breedte (max) 176px (max) 176px max 556px
6
You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)
