Acum că avem un cadru de bază (vezi partea 1 și partea 2 din această serie), putem începe să ne gândim integrarea modelelor cu cadrul nostru PHP. Deocamdată, ne vom concentra pe designul de la front-end, inclusiv pe modul în care putem să ne ușurăm să "pieptăm" noul nostru cadru.

Cum se potrivește totul împreună

Până acum, avem fișierele noastre de bază, într-o structură logică și un set de obiecte care sunt accesate de registrul nostru. Unul dintre aceste obiecte este manipulatorul de șabloane, care ne permite să construim și să generăm cu ușurință ieșire HTML. Ieșirea este construită dintr-o serie de fișiere, inclusiv imagini, css și șabloane care alcătuiesc "pielea".

Pasul 1: ceea ce este necesar pentru designul frontal al cadrului nostru

Generic modele de front-end pentru șablon poate fi dificil de a gândi în mod corespunzător. Este util dacă șablonul HTML de bază al designului conține tot ceea ce orice site pe care îl veți crea utilizând cadrul. Minimul minim pe care îl consider este:

• O zonă de conținut primar, pe care o vom apela

  #conţinut

  .

• O coloană sau două pentru un conținut care nu este la fel de important ca cel din

  #conţinut

  .

• Unele date tabulare.
• Liste neordonate și ordonate (și listele de definiții, dacă este posibil să le utilizați).
• Imagini. Mi se pare util să includ un stil separat pentru fotografii, pe care îl identific cu clasa "fotografie" în HTML; de exemplu .
• Un formular pentru captarea datelor.

Vom începe cu crearea unei structuri XHTML de bază pentru paginile noastre. Vom începe mai întâi cu secțiunea:

Puteți modifica doctype-ul pentru a se potrivi sau chiar aveți posibilitatea să-l definiți în cadrul setărilor pentru fiecare site Web pe care îl creați cu cadrul dvs. și ar fi, de asemenea, util să puteți modifica

lang

. Ar fi util să aveți o foaie de stil definită și ca o setare, pe care o vom acoperi în viitoarele tutoriale.

În plus, atributele de meta-descriere și meta-cheie pot fi codate greu în fiecare pagină a site-ului pe care o creați, dar este înțelept să dați fiecărei pagini o descriere diferită și un set de cuvinte cheie la pentru a preveni afișarea de pagini în indexul suplimentar Google.

Substituentul pagetitle va fi folosit pentru a introduce titlul paginii curente în șablon.

Putem trece acum la corpul fișierului XHTML al șablonului pentru un design generic pentru front-end pentru cadrul nostru. Vom păstra aspectul simplu pentru moment, presupunând că majoritatea site-urilor Web pe care le vom crea împreună cu cadrul vor folosi sistemul tradițional de antet, conținut, coloană și subsol.

Pasul 2: conținut de bază

Așa cum am promis, vom completa un anumit conținut de bază, astfel încât să putem spune că avem cel puțin cele mai multe dintre etichetele care ar putea apărea într-o pagină gata pregătită:

           
 
 
Numele site-ului
 
 
 
titlul paginii
  
 Lorem ipsum dolor sta amet, consectetuer adipiscing elit. Quisque urna augue, fringilla quis, pulvinar non, feugiat în, pede. Curriculum vitae pede. Cras vehicula varius tellus. În consecință, enim tristique euismod volutpat, Tellus magna aliquet risus, id alique eros metus la purus. 
 
Titlu secundar
 
 Dicționar de alfabet, coajă de copt, coajă de măsline, coș de cumpărături. Clasa aptitudini taciti sociosqu ad tortor per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis. 
 
Titlul terțiar
 
 
 
rubrică
 
Date
 
 
 
rubrică
 
Date
 
 
 
  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 adipiscing adipiscing risus. 
 
 
 
 
Element de listă
 
Element de listă
 
Element de listă
 
 
 
Element de listă
 
Element de listă
 
Element de listă
 
Element de listă
 
 
 
 
 © Numele site-ului, 2008. 
 
 
  

Conținutul este acum pregătit pentru un stil simplu.

Pasul 3: stil de bază

Vom începe prin a reseta marginea și umplutura elementelor din documentul nostru XHTML cu CSS:

corp, * margine: 0; padding 0; 

Vom lua ceva timp pentru a atribui stilul elementului corpului și pentru a ne asigura că linkurile din document sunt evidențiate în mod corespunzător:

corp fundal: #FFF; culoare: # 000; font-family: "helvetica", "arial", "verdana", sans-serif; dimensiune font: 62,5%;  a, a: activă, a: link culoare: # 1A64AC; text-decorare: subliniere;  a: a vizitat color: # 0D2F4F; 

Apoi, vom merge concentrându-ne design-ul în #wrapper div, și atribuind o margine leșin la fiecare dintre divs, astfel încât să le putem vedea în timp ce ne stil.

#wrapper marja: 0 auto; lățime: 950px;  
 #wrapper, #header, #content, #column, #foot border: 1px #DDD solid; 

În timp ce CSS de mai sus nu va centra acest design în Internet Explorer 6, CSS a fost menținut de bază pentru a permite o flexibilitate maximă. Cu puțin mai mult CSS, aproape că am terminat schelet de proiectare pentru front-end cadru nostru - tot ce ramâne este o pozitie simpla:

#column, #content float: left; font-size: 125%; padding: 5px;  coloana # width: 200px;  #content margin-left 5px; lățime: 725 pixeli;  #header, #footer clear: ambele; 

Tot ce a mai rămas pentru noi pentru noi acum sunt imagini:

#column img, #content img margine: 2px #DDD solid; plutește la stânga; margine: 0 5px 0 10px;  img.photo background: #DDD; float: drept! important; padding: 25px 2px; 

Ceea ce am rămas în această etapă este un aspect simplu al site-ului pe care îl putem folosi ca bază a front-end-ului cadrului nostru PHP:

Desigur, pentru o flexibilitate suplimentară, ar putea deveni util să permiteți în mod implicit 2 coloane de conținut, ceea ce se poate face adăugând un pic mai mult XHTML și CSS. 

Pasul 4: Șabloane din XHTML

Următorul pas este transferul XHTML, CSS și imaginilor în a piele potrivită pentru cadrul nostru PHP. Pentru a face acest lucru, trebuie să împărțim XHTML în trei șabloane: antetul, principalul și subsolul. Din cauza modului în care sistemul de șabloane este structurat, o pagină poate fi generată din orice număr de șabloane, dar cel puțin un antet, subsolul și șablonul principal sunt recomandate, ceea ce înseamnă, în general, că ar trebui doar să copiați și să modificați fișierul șablon principal dacă am fi creat o pagină nouă care avea o structură ușor diferită.

Șablonul de șablon pentru cadrul PHP (skins / default / templates / header.tpl.php)

Șablonul antetului pentru cadrul PHP ar trebui să conțină secțiunea din XHTML-ul nostru, precum și

secțiunea:

           
 
 
Numele site-ului
 

Șablonul principal pentru cadrul PHP (skins / default / templates / main.tpl.php)

Șablonul principal ar trebui să includă divs care vor conține atât conținutul principal, cât și orice conținut din coloane. Mai degrabă decât să copiem textul falsificat pe care l-am utilizat pentru a modela elemente cum ar fi paragrafe, liste comandate și tabele, putem introduce acum substituenți pentru acest conținut, care vor fi actualizate în funcție de locul unde este conținut.

Conținutul substituentului este:

• pagetitle titlul paginii.
• maincontent conținutul principal al paginii.
• btitle și bcontent titlurile și conținutul pentru blocurile de conținut. Acesta este închis într-o buclă rcolnă, astfel încât mai multe blocuri pot fi plasate în coloană.

 
titlul paginii
 conținut principal 
 
  
Btitle
 Bcontent  

Footer șablon pentru cadrul PHP (skins / default / templates / footer.tpl.php)

În cele din urmă, restul XHTML merge în fișierul de subsol, care închide documentul XHTML și secțiunea corpului. În mod obișnuit, folosim acest lucru pentru a include pe site-urile noastre o notificare privind drepturile de autor și un link "web design by".

 
 © Numele site-ului, 2008.