vrijdag 19 oktober 2012

Weebly website design aanpassen of importeren?

Vandaag werk ik aan een eenvoudige opdracht. Tenminste, zo lijkt het. Ik krijg een heel eenvoudig design toegestuurd van de klant in PSD formaat en hij wil dit design graag plaatsen binnen de weebly.com website builder. Het probleem is dat het simpeler lijkt dan het is. Ik heb in ieder geval nodig om de mogelijkheden op een rijtje te zetten en dat ga ik nu (weer) doen. Ik heb dit eerder gedaan in andere blogposten en mogelijk is het verstandig om daar eerst naar te kijken. Maar nu een nieuw lijstje dat ik schrijf terwijl ik aan de opdracht werk:
1) PSD zet ik om naar een html / css website. Resultaat is een platte website met een structuur van afbeeldingen. Deze afbeeldingen hebben nog geen hyperlink gekregen en ze linken dan ook nog nergens naar toe.
2) Ik maak een account aan op weebly.com
3) Kies via de tab "design" voor een design wat enigszins lijkt op het gewenste design. Mijn uitgangspunt is: het menu moet dezelde orientatie hebben (in dit geval "verticaal") om niet teveel code te hoeven aanpassen.
4) Ik begin vervolgens te werken aan het design "van boven naar beneden" en dan valt me als eerst op dat de klant een brede header wil over de hele pagina en dat Weebly dat niet biedt. Dat ga ik eerst aanpassen.
5) Ik plak de html code behorende bij het design in Notepad+ en sla het bestand locaal op als een html file om zo de code kleuring binnen Notepad+ te laten werken. Daarmee wordt duidelijker welke blokken <div>'s er bij elkaar horen. In dit geval:

<div id="banner">
<div class="wsite-header"></div>
</div>
Dit verplaats ik naar boven tot binnen de "border_top" omdat de daargebruikte "class" wel schermbreed is. Vervolgens blijkt dit niet helemaal te werken omdat de afbeelding binnen een "wrap" staat van Weebly waar ik niet bij kan.
6) de main_style.css sla ik ook locaal op via Notepad+; Via Colorcop zoek ik de kleurcode van het huidige design en binnen de Notepad+ css file ga ik op zoek naar die code. Zonder resultaat. Die kleurcodes zijn niet 100% op elkaar afgestemd? Vreemd.
7) Na aanpassen van de css en html blijk ik de hele layout in de war te hebben gegooid en overnieuw te moeten beginnen. Conclusie: de css structuur van een bestaand Weebly design is niet flexibel genoeg en biedt niet alle mogelijk aanpassingen want: css wordt geladen via externe css files die niet aanwezig zijn binnen de Weebly webbuilder maar wel meedraaien bij aanroepen van de website. "Overrides" zijn hierin een te ingewikkelde optie.
8) Ik besluit om mijn html / css template te importeren in Weebly en in te stellen als standaard. Dat levert een verbazend goed resultaat op (op het eerste gezicht). De layout is nu goed maar nog niet de Weebly functionaliteit. Die moet ik nu handmatig aanbrengen binnen het design.
9) Eerst ga ik werken aan de Weebly functionaliteit van het menu. Klant wil pagina's aanmaken en menu moet dan automatisch worden aangepast. En er moet natuurlijk gewoon een clickable menu zijn en niet een image. Daartoe moet ik de volgende code plaatsen binnen het design:

<div id="navigation">
{menu}
<div class="clear"></div>
</div>
Dat werkt prima. Het menu wordt direct zichtbaar. Het probleem is op dit moment dat de klant aan achtergrond wil voor het menu en dat lukt me even niet. Maar:

DE VOORLOPIGE CONCLUSIE:
Het is makkelijker om zelf een goede html / css website te maken en vervolgens te importeren binnen Weebly dan om een bestaand Weebly design aan te passen volgens bepaalde layout wensen.

1 opmerking:

  1. [...] , de website die ontstaan is vanuit een PSD file die klant heeft aangeleverd. Zie link. 1) Waarbinnen staat de tag {menu}? In mijn geval binnen een <div id=”"> container die [...]

    BeantwoordenVerwijderen