Ahora que tenemos un marco básico (vea la parte 1 y la parte 2 de esta serie), podemos empezar a pensar Integrando diseños con nuestro framework PHP.. Por ahora, nos concentraremos en el diseño de front-end, incluyendo cómo podemos hacer que nuestro nuevo marco sea más sencillo..

Cómo todo encaja

Hasta ahora, tenemos nuestros archivos principales, en una estructura lógica y un conjunto principal de objetos a los que se accede mediante nuestro registro. Uno de estos objetos es nuestro controlador de plantillas, que nos permite compilar y generar fácilmente resultados HTML. La salida se crea a partir de una serie de archivos que incluyen imágenes, css y plantillas que conforman "la piel".

Paso 1: lo que se necesita para el diseño frontal de nuestro marco

Los diseños de front-end genéricos para la plantilla pueden ser difíciles de pensar correctamente. Es útil si la plantilla HTML básica del diseño contiene todo lo que cualquier sitio web que pueda crear usando el marco. Lo mínimo que considero es:

• Un área de contenido principal, que llamaremos

  #contenido

  .

• Una o dos columnas para el contenido que no es tan importante como en

  #contenido

  .

• Algunos datos tabulares.
• Listas desordenadas y ordenadas (listas de definiciones también, si es probable que las use).
• Imagenes Me parece útil incluir un estilo separado para las fotografías, que identifico con la clase "foto" en HTML; por ejemplo .
• Un formulario para la captura de datos..

los

Comenzaremos creando una estructura XHTML básica para nuestras páginas. Comenzaremos con la sección primero:

Puede cambiar el tipo de documento para que coincida, o incluso tener una disposición para poder definirlo dentro de la configuración de cada sitio web que cree con su marco, y también sería útil poder cambiar el

lang

. Sería útil tener la hoja de estilo también definida como una configuración, que veremos en futuros tutoriales..

Además, la meta descripción y los atributos de la clave de metadatos pueden estar codificados en la máscara de cada sitio web que cree, pero es aconsejable Dar a cada página una descripción diferente y un conjunto de palabras clave. a Evitar que las páginas aparezcan en el índice complementario de Google..

El marcador de posición pagetitle se usará para insertar el título de la página actual en la plantilla.

los

Ahora podemos pasar al cuerpo de nuestro archivo XHTML de plantilla para un diseño de interfaz genérico para nuestro marco. Mantendremos el diseño simple por ahora, asumiendo que la mayoría de los sitios web que crearemos con el marco utilizará el esquema tradicional de encabezado, contenido, columna y pie de página..

Paso 2: contenido básico

Según lo prometido, completaremos algunos contenidos básicos para que podamos tener el estilo de que tenemos al menos la mayoría de las etiquetas que probablemente aparecerán en una página lista para usar:

           
 
 
Nombre del Sitio Web
 
 
 
Título de la página
  
 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. Por lo tanto, enum tristique euismod volutpat., tellus magna aliquet risus, id aliquet eros metus en purus. 
 
Título secundario
 
 Aliquam dictum, nibh eget ullamcorper condimentum, magna turpis placerat pede, tempor facilisis tortor urna commodo turpis. Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras luctus cursus velit. Nullam Imperdiet Turpis. 
 
Rumbo terciario
 
 
 
Título
 
Datos
 
 
 
Título
 
Datos
 
 
 
  Se produce un lorem fermentum erosum malesuada. Phasellus condimentum libero vel lacus. Donec lectus nisl, adipiscing menuada, sodales tincidunt, sagittis vitae, lacus. Proin nec pede. Mecenas adipiscando adipiscando risus. 
 
 
 
 
Elemento de lista
 
Elemento de lista
 
Elemento de lista
 
 
 
Elemento de lista
 
Elemento de lista
 
Elemento de lista
 
Elemento de lista
 
 
 
 
 © nombre del sitio web, 2008. 
 
 
  

El contenido está listo para un estilo simple..

Paso 3: estilo básico

Comenzaremos por restablecer el margen y el relleno de los elementos en nuestro documento XHTML con CSS:

cuerpo, * margen: 0; relleno 0; 

Tomaremos un tiempo para asignar estilo al elemento del cuerpo y asegurarnos de que los enlaces dentro del documento estén resaltados apropiadamente:

cuerpo fondo: #FFF; color: # 000; font-family: "helvetica", "arial", "verdana", sans-serif; tamaño de letra: 62.5%;  a, a: active, a: link color: # 1A64AC; texto-decoración: subrayado;  a: visitó color: # 0D2F4F; 

A continuación, continuaremos centrando nuestro diseño en la división #wrapper y asignando un borde débil a cada una de las divs para que podamos verlas a medida que diseñamos.

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

Si bien el CSS anterior no centrará este diseño en Internet Explorer 6, el CSS se ha mantenido básico para permitir la máxima flexibilidad. Con un poco más de CSS, casi tenemos una completa diseño de esqueleto para la interfaz de nuestro marco - Todo lo que queda es un poco de posicionamiento simple:

#column, #content float: left; tamaño de letra: 125%; relleno: 5px;  #column width: 200px;  #content margin-left 5px; ancho: 725px;  #header, #footer clear: both; 

Todo lo que nos queda de estilo ahora son imágenes:

#column img, #content img border: 2px #DDD solid; flotador izquierdo; margen: 0 5px 0 10px;  img.photo fondo: #DDD; flotar: cierto! importante; relleno: 25px 2px; 

Lo que nos queda en esta etapa es un diseño de sitio web simple que podemos usar como base del front-end de nuestro marco de trabajo de PHP:

Por supuesto, para mayor flexibilidad, puede ser útil permitir 2 columnas de contenido por defecto, lo que se puede hacer con la adición de un poco más de XHTML y CSS. 

Paso 4: plantillas de XHTML

El siguiente paso es transferir el XHTML, CSS e imágenes a un skin adecuado para nuestro framework PHP. Para hacer esto, necesitamos dividir el XHTML en tres plantillas: encabezado, principal y pie de página. Debido a la forma en que está estructurado el sistema de plantillas, se puede generar una página a partir de cualquier número de plantillas, sin embargo, al menos se recomienda un encabezado, pie de página y una plantilla principal, esto significa que, en términos generales, solo deberíamos necesitar copiar y alterar el archivo de plantilla principal si tuviéramos que crear una nueva página que tuviera una estructura ligeramente diferente.

Plantilla de encabezado para el marco PHP (skins / default / templates / header.tpl.php)

La plantilla de encabezado para el marco PHP debe contener la sección de nuestro XHTML, así como la

sección de la

           
 
 
Nombre del Sitio Web
 

Plantilla principal para el marco PHP (skins / default / templates / main.tpl.php)

La plantilla principal debe incluir los divs que contendrán tanto el contenido primario como cualquier contenido en columnas. En lugar de copiar el texto ficticio que usamos para elementos de estilo como párrafos, listas ordenadas y tablas, ahora podemos insertar marcadores de posición para este contenido, que se actualizarán dependiendo de dónde se encuentre el contenido..

El contenido del marcador de posición es:

• pagetitle el título de la página.
• maincontent el contenido principal de la página.
• Encabezado btitle y bcontent y contenido para bloques de contenido. Esto está incluido dentro de un bucle rcolumn para que se puedan colocar varios bloques en la columna.

 
Título de la página
 contenido principal 
 
  
btitle
 bcontent  

Plantilla de pie de página para el marco PHP (skins / default / templates / footer.tpl.php)

Por último, el XHTML restante va en el archivo de pie de página, que cierra el documento XHTML y la sección del cuerpo. Por lo general, usamos esto para incluir un aviso de copyright y un enlace 'diseño web realizado por' en nuestros sitios web.

 
 © nombre del sitio web, 2008.