Ora che abbiamo un quadro di base (vedi parte 1 e parte 2 di questa serie), possiamo cominciare a pensare integrazione di disegni con il nostro framework PHP. Per ora, ci concentreremo sul design del front-end, compreso il modo in cui possiamo rendere più semplice "skin" il nostro nuovo framework.

Come tutto si combina

Finora, abbiamo i nostri file principali, in una struttura logica e un nucleo di oggetti a cui si accede dal nostro registro. Uno di questi oggetti è il nostro gestore di template, che ci consente di creare e generare facilmente output HTML. L'output è costituito da una serie di file tra cui immagini, css e modelli che compongono "la pelle".

Passaggio 1: cosa è necessario per il design del front end del nostro framework

I progetti generici di front-end per il modello possono essere difficili da pensare correttamente. È utile se il modello HTML di base del progetto contiene tutto ciò che è possibile creare con il framework. Il minimo indispensabile che considero è:

• Un'area di contenuto principale, che chiameremo

  #soddisfare

  .

• Una colonna o due per il contenuto che non è così importante come in

  #soddisfare

  .

• Alcuni dati tabulari.
• Elenchi non ordinati e ordinati (anche gli elenchi di definizioni, se è probabile che li usino).
• Immagini. Trovo utile includere uno stile separato per le fotografie, che identifico con la 'foto' della classe in HTML; per esempio .
• Un modulo per l'acquisizione dei dati.

Il

Inizieremo con la creazione di una struttura XHTML di base per le nostre pagine. Inizieremo prima con la sezione:

Puoi cambiare il doctype in modo che corrisponda, o anche avere delle disposizioni per essere in grado di definirlo all'interno delle impostazioni per ogni sito web che crei con il tuo framework, e sarebbe anche utile poter cambiare il

Lang

. Sarebbe utile avere il foglio di stile anche definito come un'impostazione, che tratteremo in future esercitazioni.

Inoltre, la descrizione meta e gli attributi della meta chiave possono essere codificati nella skin di ciascun sito Web creata, ma è consigliabile dare a ciascuna pagina una descrizione e un insieme di parole chiave differenti a impedire che le pagine vengano visualizzate nell'indice supplementare di Google.

Il segnaposto pagetitle verrà utilizzato per inserire il titolo della pagina corrente nel modello.

Il

Ora possiamo passare al corpo del nostro file XHTML modello per un design front-end generico per il nostro framework. Manterremo il layout semplice per ora, partendo dal presupposto che la maggior parte dei siti Web che creeremo con il framework utilizzeranno lo schema tradizionale di intestazione, contenuto, colonna e piè di pagina.

Passaggio 2: contenuto di base

Come promesso, inseriremo alcuni contenuti di base in modo che possiamo definire che abbiamo almeno la maggior parte dei tag che potrebbero verificarsi in uno stile di pagina pronto:

           
 
 
Nome del sito web
 
 
 
titolo della pagina
  
 Lorem ipsum dolor sit amet, consectabile elite adipiscante. Quisque urna augue, fringilla quis, pulvinar non, feugiat in, pede. Curabitur vitae pede. Veicolo veicolare varius tellus. Sed consequat, enim tristique euismod volutpat, tellus magna aliquet risus, id aliquet eros metus a purus. 
 
Intestazione secondaria
 
 Aliquam dictum, nibh eget ullamcorper condimentum, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam imperdiet turpis. 
 
Titolo terziario
 
 
 
Intestazione
 
Dati
 
 
 
Intestazione
 
Dati
 
 
 
  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. Mecenate che adipiscing il riso adipiscante. 
 
 
 
 
Elemento dell'elenco
 
Elemento dell'elenco
 
Elemento dell'elenco
 
 
 
Elemento dell'elenco
 
Elemento dell'elenco
 
Elemento dell'elenco
 
Elemento dell'elenco
 
 
 
 
 © Nome sito Web, 2008. 
 
 
  

Il contenuto è ora pronto per uno stile semplice.

Passaggio 3: stile di base

Inizieremo reimpostando il margine e il riempimento degli elementi nel nostro documento XHTML con i CSS:

corpo, * margine: 0; imbottitura 0; 

Ci vorrà del tempo per assegnare lo stile all'elemento del corpo e assicurarsi che i collegamenti all'interno del documento siano opportunamente evidenziati:

body background: #FFF; colore: # 000; font-family: "helvetica", "arial", "verdana", sans-serif; dimensione carattere: 62,5%;  a, a: active, a: link color: # 1A64AC; decorazione del testo: sottolineatura;  a: visited color: # 0D2F4F; 

Quindi, concentreremo il nostro design nel div #wrapper e assegneremo un bordo debole a ciascuno dei div in modo che saremo in grado di vederli come stile.

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

Mentre il CSS sopra non centrerà questo design in Internet Explorer 6, il CSS è stato mantenuto di base per consentire la massima flessibilità. Con un po 'più di CSS, abbiamo quasi un completo design scheletrato per il front-end del nostro framework - tutto ciò che rimane è un po 'di semplice posizionamento:

#column, #content float: left; font-size: 125%; imbottitura: 5px;  #column width: 200px;  #content margin-left 5px; larghezza: 725 px;  #header, #footer clear: both; 

Tutto ciò che resta per lo stile per noi ora sono le immagini:

#column img, #content img border: 2px #DDD solido; fluttuare: a sinistra; margine: 0 5px 0 10px;  img.photo background: #DDD; float: giusto! importante; imbottitura: 25px 2px; 

Ciò che ci rimane in questa fase è un semplice layout del sito Web che possiamo utilizzare come base del front-end del nostro framework PHP:

Ovviamente, per una maggiore flessibilità, può essere utile consentire l'impostazione predefinita di 2 colonne di contenuti, operazione che può essere eseguita aggiungendo un po 'più XHTML e CSS. 

Passaggio 4: modelli da XHTML

Il prossimo passo è il trasferimento di XHTML, CSS e immagini in a skin adatta al nostro framework PHP. Per fare questo, abbiamo bisogno di dividere l'XHTML in tre template: header, main e footer. A causa del modo in cui è strutturato il sistema dei template, è possibile generare una pagina da qualsiasi numero di template, tuttavia almeno un'intestazione, un piè di pagina e un modello principale sono consigliati, questo significa che, in generale, dovremmo solo copiare e modificare il file di modello principale se dovessimo creare una nuova pagina che avesse una struttura leggermente diversa.

Modello di intestazione per il framework PHP (skins / default / templates / header.tpl.php)

Il modello di intestazione per il framework PHP dovrebbe contenere la sezione del nostro XHTML, così come il

sezione del:

           
 
 
Nome del sito web
 

Modello principale per il framework PHP (skins / default / templates / main.tpl.php)

Il modello principale dovrebbe includere i div che conterranno sia il contenuto principale, sia qualsiasi contenuto nelle colonne. Piuttosto che copiare il testo fittizio che usavamo per lo stile di elementi come paragrafi, elenchi ordinati e tabelle, ora possiamo inserire segnaposto per questo contenuto, che verrà aggiornato a seconda di dove il contenuto è.

Il contenuto del segnaposto è:

• pagetitle il titolo della pagina.
• maincontent il contenuto principale della pagina.
• btitle e bcontent intestazione e contenuto per blocchi di contenuti. Questo è racchiuso all'interno di un loop rcolumn in modo da poter posizionare più blocchi nella colonna.

 
titolo della pagina
 contenuto principale 
 
  
 Btitle
  Bcontent  

Modello di piè di pagina per il framework PHP (skins / default / templates / footer.tpl.php)

Infine, il restante XHTML va nel file footer, che chiude il documento XHTML e la sezione body. In genere utilizziamo questo per includere una nota sul copyright e un link "web design by" sui nostri siti web.

 
 © Nome sito Web, 2008.