Nu we een basisraamwerk hebben (zie deel 1 en deel 2 van deze serie), kunnen we beginnen na te denken ontwerpen integreren met ons PHP-framework. Voor nu concentreren we ons op het ontwerp van de front-end, inclusief hoe we het gemakkelijk kunnen maken om ons nieuwe framework te 'villen'.

Hoe alles bij elkaar past

Tot dusverre hebben we onze kernbestanden, in een logische structuur en een kernset van objecten die worden geraadpleegd door ons register. Een van deze objecten is onze sjabloonafhandelaar, waarmee we eenvoudig HTML-uitvoer kunnen bouwen en genereren. De uitvoer is opgebouwd uit een reeks bestanden inclusief afbeeldingen, CSS en sjablonen die 'de skin' vormen.

Stap 1: wat is er nodig voor het front-end ontwerp van ons framework

Generieke front-end ontwerpen voor de sjabloon kunnen moeilijk goed doordacht zijn. Het is handig als de eenvoudige HTML-sjabloon van het ontwerp alles bevat dat door een website wordt gemaakt met behulp van het framework. Het absolute minimum dat ik beschouw is:

• Een primair inhoudsgebied, dat we zullen noemen

  #inhoud

  .

• Een kolom of twee voor inhoud die niet zo belangrijk is als die in

  #inhoud

  .

• Sommige tabelgegevens.
• Ongeordende en geordende lijsten (ook definitielijsten, als u ze waarschijnlijk wilt gebruiken).
• Afbeeldingen. Ik vind het handig om een ​​aparte styling voor foto's op te nemen, die ik identificeer met de klasse 'foto' in HTML; bijvoorbeeld .
• Een formulier voor het vastleggen van gegevens.

De

We beginnen met het maken van een eenvoudige XHTML-structuur voor onze pagina's. We beginnen eerst met de sectie:

U kunt het doctype wijzigen om overeen te komen, of zelfs een voorziening hebben om het te kunnen definiëren binnen de instellingen voor elke website die u met uw raamwerk maakt, en het zou ook nuttig zijn om de

LANG

. Het zou handig zijn om de stylesheet ook als een instelling te definiëren, die we in toekomstige zelfstudies zullen behandelen.

Bovendien kunnen de kenmerken van de metabeschrijving en de metasleutel in de skin van elke website worden gecodeerd die u maakt, maar het is verstandig om geef elke pagina een andere beschrijving en reeks trefwoorden naar voorkomen dat pagina's worden weergegeven in de aanvullende index van Google.

De tijdelijke aanduiding pagetitle wordt gebruikt om de titel van de huidige pagina in de sjabloon in te voegen.

De

We kunnen nu doorgaan naar de body van ons template XHTML-bestand voor een generiek front-end ontwerp voor ons framework. We houden de lay-out eenvoudig voor nu, ervan uitgaande dat de meeste websites die we met het framework maken, het traditionele header-, content-, kolom- en voettekstschema gebruiken.

Stap 2: basisinhoud

Zoals beloofd, vullen we wat basisinhoud in zodat we kunnen stylen dat we op zijn minst de meeste tags hebben die waarschijnlijk in een kant-en-klaar pagina zullen voorkomen:

           
 
 
Website naam
 
 
 
pagina titel
  
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Cras vehicula varius tellus. Sed consequat, enim tristique euismod volutpat, tellus magna aliquet risus, id aliquet eros metus bij purus. 
 
Secundaire rubriek
 
 Aliquam dictum, nibh eget ullamcorper condimentum, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis. 
 
Tertiaire kop
 
 
 
titel
 
Gegevens
 
 
 
titel
 
Gegevens
 
 
 
  Cras a eros eget lorem fermentum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing malesuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Maecenas adipisciping adipiscing risus. 
 
 
 
 
Lijstitem
 
Lijstitem
 
Lijstitem
 
 
 
Lijstitem
 
Lijstitem
 
Lijstitem
 
Lijstitem
 
 
 
 
 © Website naam, 2008. 
 
 
  

De inhoud is nu klaar voor een aantal eenvoudige styling.

Stap 3: basisstyling

We beginnen met het opnieuw instellen van de marge en opvulling van elementen in ons XHTML-document met CSS:

body, * margin: 0; opvulling 0; 

We zullen enige tijd nodig hebben om het body-element stijl toe te kennen en ervoor te zorgen dat de koppelingen in het document op de juiste manier worden gemarkeerd:

body achtergrond: #FFF; kleur: # 000; font-family: "helvetica", "arial", "verdana", sans-serif; lettergrootte: 62,5%;  a, a: active, a: link color: # 1A64AC; tekstdecoratie: onderstrepen;  a: bezocht color: # 0D2F4F; 

Vervolgens gaan we ons ontwerp in de #wrapper-divisie centreren en geven we een vage rand aan elk van de div's, zodat we ze in onze stijl kunnen zien.

#wrapper margin: 0 auto; breedte: 950 px;  
 #wrapper, #header, #content, #column, #footer border: 1px #DDD solid; 

Hoewel de bovenstaande CSS dit ontwerp niet zal centreren in Internet Explorer 6, is de CSS basaal gehouden om maximale flexibiliteit mogelijk te maken. Met een beetje meer CSS hebben we bijna een complete skeletontwerp voor de voorkant van ons framework - het enige dat overblijft is een beetje eenvoudige positionering:

#column, #content float: left; lettergrootte: 125%; opvulling: 5px;  #column width: 200px;  #content margin-left 5px; breedte: 725 px;  #header, #footer clear: beide; 

Het enige wat nu overblijft om te stylen zijn afbeeldingen:

#column img, #content img border: 2px #DDD solid; zweven: links; marge: 0 5px 0 10px;  img.photo background: #DDD; zweven: goed! belangrijk; opvulling: 25px 2px; 

Wat we in dit stadium nog moeten doen is een eenvoudige website-indeling die we kunnen gebruiken als basis van de front-end van ons PHP-framework:

Uiteraard kan het voor extra flexibiliteit nuttig zijn om standaard 2 kolommen inhoud toe te staan, wat kan worden gedaan met de toevoeging van iets meer XHTML en CSS. 

Stap 4: sjablonen van XHTML

De volgende stap is het overbrengen van de XHTML, CSS en afbeeldingen naar een huid geschikt voor ons PHP-framework. Om dit te doen, moeten we de XHTML in drie sjablonen splitsen: koptekst, hoofd- en voettekst. Vanwege de manier waarop het sjabloonsysteem is gestructureerd, kan een pagina worden gegenereerd op basis van een willekeurig aantal sjablonen, maar ten minste een kop-, voettekst- en hoofdsjabloon worden aanbevolen. Dit betekent dat we over het algemeen alleen moeten kopiëren en wijzigen het hoofdsjabloonbestand als we een nieuwe pagina zouden maken met een iets andere structuur.

Header-sjabloon voor het PHP-framework (skins / default / templates / header.tpl.php)

De koptekstsjabloon voor het PHP-framework zou de sectie van onze XHTML moeten bevatten, evenals de

deel van de:

           
 
 
Website naam
 

Hoofdsjabloon voor het PHP-framework (skins / default / templates / main.tpl.php)

De hoofdsjabloon moet de div's bevatten die zowel de primaire inhoud als alle inhoud in kolommen bevatten. In plaats van de dummy-tekst te kopiëren die we gebruikten om elementen zoals alinea's, geordende lijsten en tabellen op te maken, kunnen we nu plaatsaanduidingen invoegen voor deze inhoud, die zal worden bijgewerkt afhankelijk van waar de inhoud is.

De inhoud van de tijdelijke aanduiding is:

• pagetitle de titel van de pagina.
• hoofdpagina de hoofdinhoud van de pagina.
• btitle en bcontent kop en inhoud voor blokken met inhoud. Dit is ingesloten in een kolom van een kolom en er kunnen meerdere blokken in de kolom worden geplaatst.

 
pagina titel
 belangrijkste inhoud 
 
  
 Btitle
  Bcontent  

Voettekstsjabloon voor het PHP-framework (skins / default / templates / footer.tpl.php)

Ten slotte gaat de resterende XHTML in het voettekstbestand, waarmee het XHTML-document en de hoofdgedeelte worden gesloten. We gebruiken dit meestal om een ​​auteursrechtvermelding en een koppeling 'webontwerp op' op onze websites op te nemen.

 
 © Website naam, 2008.