27Abr 2009 12 Comments */?>

Introducción al diseño web con PHP + CSS – Parte I –

Categorías: Tutoriales - Tags: , ,

En este tutorial voy a explicar un par de conceptos básicos a la hora de empezar a diseñar webs. Hay muchas formas diferentes de diseñar la estructura de una web pero coincido con Antonio Lupetti en que para empezar esta es una de las formas más cómodas que conozco. Lo que voy a hacer básicamente en este post en juntar y traducir algunos tutoriales suyos y modificarlos según mis criterios y gustos a la hora de diseñar.

Típica estructura de una web:

sitestructure

  • index.php – Archivo principal que contiene todas las diferentes secciones de la página, en ingles dicen “container”. Las secciones son : Barra superior (topbar), barra de navegación (nav´s bar), contenido principal (main content) y el pie de página(footer). Escribo las traducciones al ingles , ya que es el lenguaje que suelo utilizar y el que van a ver en casi todos lados.
  • config – A diferencia de Antonio Lupetti, en vez de un archivo config.php yo creo una carpeta config en la cual incluyo todos mis archivos de configuración como db.php.
  • images – En la carpeta images van todos los archivos de imágenes (jpg, png, gif) y por lo general creo subcarpetas para diferenciar las secciones (productos, contacto, etc).
  • css – En esta carpeta simplemente irán todas las hojas de estilo (CSS).
  • include – En esta carpeta se meten todos los archivos de las diferentes secciones que vamos a in incluyendo.

Estructura de index.php

Nuestro objetivo es que la página se parezca a esto:

estructura

La estructura de la página constará de varias partes. Para empezar tenemos el container que es el contenedor de todas las secciones de la web.

Dentro del container lo primero que encontramos es el topbar, que podés usar para poner el logo y/o nombre de tu web.

Justo abajo esta el navbar o barra de navegación. Desde ahi vamos a acceder a las diferentes páginas mediante los links.

Ahora viene la sección principal o main section, que en este caso consta de 2 columnas de tamaño fijo, column_left y column_right.

Al usar dos columnas tenemos que utilizar el spacer que no es más que un div vacio que sirve para corregir la altura del container.

Por último tenemos el footer o pie de página , donde podés poner algún que otro link o los derechos de autor.

Todo esto traducido a código nos quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>page title</title>
</head>
 
<body>
<div id="container">
               <div id="topbar"> ...Contenido del topbar... </div>
               <div id="navbar"> ...Contenido del navbar... </div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
               <div id="main">
                     <div id="column_left"> ...Contenido columna izq... </div>
                     <div id="column_right"> ...Contenido columna der... </div>
<!--  Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
                     <div class="spacer"></div>
<!-- close #main content -->
                </div>
<!-- close #container -->
           <div id="footer"> Ejemplo realizado para <a href="http://masquewordpress.com">Timersys</a>. </div>
</div>
</body>
</html>

Siempre recordar que el código se situa entra las etiquetas <body> </body>.

En el próximo tutorial vamos a definir mediante CSS la estructura de la web. Un saludo!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Introducción al diseño web con PHP + CSS - Parte II - | Timersys()

  • Pingback: Optimizar tus archivos CSS para que sean de facil lectura | Timersys()

  • Pingback: Introducción al diseño web con PHP + CSS - Parte III -()

  • Pingback: Como crear una página de lanzamiento con PHP, AJAX y JQuery - II Parte()

  • Juan Mamani

    Puedes poner un link con el ejemplo funcionando.. estuve pegando y copiando pero no logro obtener los resultados esperados.

  • Luis Loyola

    Excelente….!!! soy aficionado al diseño web, y hace poco tiempo comence a meterle mano al php; y siempre me pregunte ¿como estarían armadas todas esas páginas tan buenas que se ven por la web, con extension php?. Despues de leer este magnifico tutorial, comprendo la lógica de maquetado; combinando html , css y php. La explicación es muy clara y detallada, descargue el ejemplo y funciona super bien. Felicitaciones y muchas gracias por compartir tus conocimientos.

  • Cristobal

    Te felicito, tus articulos son muy claros de entender y bien explicados.
    Estoy tratando de aprender a programar en PHP y tus articulos los he encontrado de lo mas interesante.

  • Yesenia

    Gracias por compartir la información esta excelente , tambien estoy iniciando con PHP y una consulta como consigo dar contornos redondeados al marco que pusiste en el ejemplo de Introducción al diseño web con PHP + CSS – Parte II – | .
    gracias

  • Tenés un tutorial en http://www.masquewordpress.com/esquinas-redondead

    Saludos!!

  • Rafa Chàfer Estornell

    Ufff… se queda muy corto, además no hace lo que dices. 

    • masquewordpress

      No entiendo tu comentario. Que no hace? Corto en que :S

  • Leo_jaac15

    Oie pero te falta donde le pones las propiedades a esos id que utilizas,, el container, topbar, navbar, main y esos, porque asi solo no jala, o donde esta? para descargarlo…