Handleiding - Styling van OFB Web 4.0

Transcriptie

1 Handleiding - Styling van OFB Web 4.0 Versie: 1.0

2 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: <link href="~/pages/_css/" type="text/css" rel="stylesheet" /> <link href="~/pages/_css/controls.css" type="text/css" rel="stylesheet" /> <link href="~/pages/_css/button.css" type="text/css" rel="stylesheet" /> <link href="~/pages/_css/" type="text/css" rel="stylesheet" /> De opmaak is onderverdeeld in 4 bestanden, t.w.: controls.css button.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

3 Kleuren uitleverset In de uitleverset van OFB Web wordt gebruikt gemaakt van een 4-tal hoofdkleuren. Deze zijn terug te vinden bovenin het bestand (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) Opmerking bg_top.gif achtergrond van de kop van de 990x112 website bg_top .gif achtergrond van de kop van de 620x112 order- bg_topmenu.gif achtergrond van de titelbalk 1x20 1 pixel breed. In de stylesheet is vastgelegd dat deze zich in horizontale richting uitbreid bg_controlmenu.gif titelachtergrond van de control 1x20 idem welke links en rechts van de site/shop worden weergegeven bg_button.png achtergrond van de knoppen 1x20 idem bg_button_h.png achtergrond van de knoppen bij 1x20 idem (hover) bewegen van de muis over de knop fase1.gif fase5.gif voortgang indicator tijdens het 90x20 bestelproces fase3van5.gif afwijkende voortgang indicatie bij gebruik van betaalwijze ideal, PayPal of automatische incasso 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

4 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

5 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. Nr Omschrijving lettertype tekstkleur achtergrond menubalk CSS CSS-element.OFBMenu.ctrlMenuTop_Rij4.ctrlMenuTop_Rij tekstkleur rollover achtergrondkleur rollover tekstkleur dropdown achtergrondkleur dropdown randkleur dropdown linker kolom rechter kolom vertikale lijnen achtergrond controltitel.ofbmenuitemhover.ofbmenuitemhover.ofbmenuisland.ofbmenuisland.ofbmenuisland.leftcolumn.rightcolumn #tblmain div.titelbalk lettertype tekstkleur lijnkleur menu-item div.titelbalk div.titelbalk a.m-l1-false Handleiding - Styling van OFB Web 4.0 Opmerking bg_topmenu.gif - 1x20 px i.p.v. afbeelding kan ook een vaste achtergrondkleur worden ingesteld bg_controlmenu.gif - 1x20 px i.p.v. afbeelding kan ook een vaste achtergrondkleur worden ingesteld 5

6 08 lijntype menu-item a.m-l1-false 09 achtergrondkleur a.m-l1-false 09 achtergrondkleur rollover a.m-l1-false:hover 10 lettertype menu-tem a.m-l1-false 10 lettertype menu-tem rollover a.m-l1-false:hover 10 tekstkleur menu-item a.m-l1-false 10 tekstkleur menu-item rollover a.m-l1-false:hover 11 achtergrondkleur linker kolom.leftcolumn 12 achtergrondkleur midden kolom #divcontent en.centercolumn 13 achtergrondkleur rechter kolom.rightcolumn 14 Pagina titel (kleur, grootte, h1 lettertype e.d.) 15 achtergrond (kleur, grootte, controls.css.ctrlbottom_bottom lettertype e.d.) footer 16 (html)tekst (kleur, grootte, lettertype e.d.) p Opmaak van diverse specifiek controls Info volgt z.s.m. Opmaak van de algemene knop Info volgt z.s.m. Aanbevolen afbeeldinggrootte Omschrijving hoogte breedte Groepsafbeeldingen 70px (max) 176px Shopstartpagina 70px (max) 176px Afbeeldingen in HTML pagina content (wanneer de afbeelding breder gemaakt wordt dan de maximale waarde wordt de site-indeling uit de verhouding / kader gedrukt max 556px Handleiding - Styling van OFB Web 4.0 6