Tupale

Crear sitio web con PHP y MySQL paso a paso capitulo 6

Bienvenido a la mas demorada entrega del curso “Crear sitio web con PHP y MySQL paso a paso”, lamento mucho la larga ausencia de mas de una semana pero mis obligaciones me impidieron continuar con el curso, sin embargo aquí estamos de nuevo con un capitulo mas y como es costumbre aquí publico los capítulos anteriores para que aquellos que no conocen en curso.

Recuerda que ahora puedes tomar este curso en Campuzoide con mas herramientas y contenidos gratis.
Crear sitio web con PHP y MySQL paso a paso

  1. Crear sitio web con PHP y MySQL paso a paso capitulo 1
  2. Crear sitio web con PHP y MySQL paso a paso capitulo 2
  3. Crear sitio web con PHP y MySQL paso a paso capitulo 3
  4. Crear sitio web con PHP y MySQL paso a paso capitulo 4
  5. Crear sitio web con PHP y MySQL paso a paso capitulo 5

Ahora si comencemos con el montaje del sitio en Dreamweaver, para esto primero deberemos estudiar dos cosas fundamentales, primero que es HTML aunque se supone que desde el capitulo 1 ya lo habían estudiado por lo tanto aquí solo les pediré que lo repacen MUCHO, HTML es el corazón de la web y aunque algunas personas piensen que no es importante yo considero que es el núcleo de todo y de ay empezamos a expandir nuestros proyectos web.

Como siempre trato de apoyarlos aquí les dejo un sencillo PDF que muestra las etiquetas básicas de HTML solo para que se familiaricen pero es muy importante conocer la mayor cantidad de etiquetas posibles.

Listado de etiquetas HTML

También es muy importante aprender CSS ya que la diferencia entre una web optimizada, agradable, rápido, etc, y una web, lenta, desagradable, desorganizada, etc, esta en el CSS, este lenguaje se usa simplemente para maquetar los sitios y dar apoyo al HTML de manera que puedas delegar el diseño enteramente a CSS y el contenido a formatearlo con HTML.

Espero que la siguiente gráfica ejemplifique mejor lo que quiero decir.

Con CSS y Sin CSS

Con CSS y Sin CSS

Bueno ahora si debemos ir a Dreamweaver para comenzar a maquetar nuestro sitio. lo primero que debemos saber es que hay dos formas de maquetar, la salida fácil usar tablas y las salida estética de alta calidad aunque un tanto mas complicada usar DIV de CSS, pero para que entendamos las dos lo que voy a hacer es una especie de híbrido donde usare tanto tablas como CSS y varias cosas diferentes para que puedan conocer diferentes técnicas y determinen cual es la que mas les gusta a ustedes.

Lo primero que haremos sera crear el primer documento que sera nuestro núcleo de sistema, nuestro index.php es importante que  para este paso ya tengan definido el sitio en Dreamweaver y configurado con el Xampp como servidor de prueba como se menciona en el capitulo 3 luego creamos un nuevo documento del tipo PHP.

Crear documento PHP desde DreamWeaver

Crear documento PHP desde DreamWeaver

Ahora procederemos a definir la propiedades de la pagina dando clic derecho y luego en la opción “Propiedades de pagina”, al rellenar el formulario que nos aparece en este cuadro de dialogo Dreamweaver nos generara un CSS con las propiedades básicas de la pagina que podremos ver en la vista de código “El codigo CSS se colorea de rosado por defecto”. Aquí definiremos cosas básicas como el tamaño de la fuente, el tipo de fuente, el color, el color de fondo y la imagen, también las margenes y otras generalidades. También es importante abrir la opción de vínculos en la parte izquierda y definir los colores de los enlaces y el efecto sobre (a:hover).

Definir propiedades de pagina en dreamweaver

Definir propiedades de pagina en dreamweaver

Comenzaremos a diagramar primero con tablas para que se hagan una idea de como es este método, iremos al menú insertar y luego insertaremos Tabla. con lo que nos aparecerá un cuadro de dialogo que nos hará unas preguntas básicas sobre la tabla que queremos insertar. Es muy importante que antes de insertar la tabla uses la lógica para definir que tipo de tablas necesitas y con que cantidad de filas y columnas. Como es normal voy a hacer un ejemplo.

Diagramacion con tablas en Dreamweaver

Diagramacion con tablas en Dreamweaver

En este ejemplo mostré como debe estar definida la tabla con 4 filas y una columna aunque la ultima fila tiene 4 columnas, para hacer esta modificación simplemente nos situamos sobre la fila y vamos al icono de dividir celda en la barra de propiedades.

Insertar tabla Dreamweaver

Insertar tabla Dreamweaver

Si seleccionamos la tabla, en la parte inferior podremos ver el panel de propiedades de la tabla, aquí podremos definir las propiedades como el ancho en pixeles o porcentajes y la alineación de la tabla.

Propiedades de la tabla Dreamweaver

Propiedades de la tabla Dreamweaver

Nuestro siguiente paso sera comenzar a agregar los contenidos o bloques de contenido dentro de nuestro diseño inicial en mi caso inserte una imagen total como cabezote (Header) así que solo debo situarme en la primera celda y luego ir a la opción Insertar >> Imagen. De la misma manera que con las tablas, al seleccionar la imagen que has insertado puedes ver el panel de propiedades donde te recomiendo poner “border = 0”.

Advertencia, no es recomendable de echo debería ser prohibido redimencionar las imágenes desde Dreamweaver. Si necesitas cambiar el tamaño de alguna imagen abre dicha imagen en Fireworks y exportala con el nuevo tamaño.

Ahora vamos a situarnos en la siguiente celda que sera la del menú de navegación, en este caso deberemos utilizar un poco de HTML y CSS muy simple, pero esto lo he publicado en un tutorial aparte para las personas que buscan este contenido independientemente del curso.

Crear un menú desplegable en CSS pero sin Javascript

En la tercera celda coloque un scroll, slide o carrusel de imágenes en jquery, esto es algo así como un plugin o un código que se encuentra fácilmente en Internet y se lo adherimos a nuestra pagina, esta técnica debes usarla mucho para los widgets o módulos que quieras incluir. De ese carrusel también he puesto un ejemplo en un tutorial aparte.

Carrusel jQuery compatible con sexy light-box

Y de la misma manera que en el capitulo anterior siento que este se esta haciendo demasiado largo así que terminare aquí por hoy prometiendo no tardar tanto para la continuación del curso, sobretodo porque este capitulo queda incompleto ya que no termine de explicar la parte de CSS, sin embargo les recomiendo que estudien muy bien HTML y CSS para el siguiente capitulo.

27 comments for “Crear sitio web con PHP y MySQL paso a paso capitulo 6

  1. pablo
    13 noviembre, 2010 at 8:58 PM

    hola mira me pasas tu mail o agrega el mio que tengo un problema del capitulo 4..mi mail es pablooo.t@hotmail.com
    se te agradeceria la ayuda

  2. pablo
    25 noviembre, 2010 at 1:54 PM

    qe paso con la guia 7 todabia la estoy esperando 🙂

  3. Juanjo
    27 noviembre, 2010 at 10:52 PM

    Por favor haz la parte 7!

  4. 1 diciembre, 2010 at 1:16 AM

    por favor el 7!!!!!!!!! estan muy buenos los tutos

  5. Gainier Ortiz
    1 diciembre, 2010 at 4:58 PM

    Hola. Este tutorial esta rebuenisimo. en cuanto salga la parte 7 por favor avisarme, no me conecto mucho. mi email es gaynierortiz@yahoo.es Gracias por todo. muy bueno.

    • 2 diciembre, 2010 at 2:30 PM

      Gracias por los comentarios ya mismo estoy trabajando en la parte 7 del tutorial.
      Para estar enterados de la actividad, suscribance al feed por RSS o por email en la parte superior.

  6. misato
    10 diciembre, 2010 at 5:06 PM

    Hola que onda con la parte 7 necesito que le siguas o dime como le hacemos para sigamos este tuto que esta magnifico

    • 13 diciembre, 2010 at 2:31 PM

      Esta a medio terminar, es que he tenido mucho trabajo últimamente, pero hoy mismo le saco tiempo para terminar el capitulo, ademas este capitulo es en el que se comienza a trabajar con PHP y bases de datos, sobre como crear juegos de registros y el sistema de login. xD

  7. misato
    13 diciembre, 2010 at 8:32 PM

    Hola muchas gracias por estar pendiente de tu blog una preguta; bueno soy nueva en esto y no se si con codigo php se puedan crear diseños web, me refiero a dar color de fondo, tipo de letra imagenes, definir el cuerpo del mismo etc.. se podra o es mejor hacer una pagina con html + css y que php solo se utilice para consultas, formularios o sesiones?

  8. Respuesta a misato
    13 diciembre, 2010 at 8:35 PM

    El PHP solo es un lenguaje de programación que sirve para pedir cosas a la base de datos,para darle el color para eso están las CSS y para escribirle en la web para eso esta el HTML.

  9. Adan
    9 febrero, 2011 at 11:17 PM

    Estoy muuuuyyy feliz de que al fin alguien quisiera ayudar de enserio!!! gracias a tus tutoriales voy a conseguir empleo de lo que me gusta porque no tenia dinero para pagar un curso! Ahora querido amigo, tengo una duda. Porque en dreamweaver la tabla me cuando la alineo al centro me queda un poco cedida a la derecha en relación con tu fondo?? es decir me queda un poquito hacia la derecha toda la tabla comparándola con tu pagina terminada. Ojala me puedas ayudar!!

    Saludos!

    • 10 febrero, 2011 at 3:17 PM

      Hola amigo, bueno no entiendo muy bien a lo que te refieres por eso te pediré que hagas una impresión de pantalla o publiques el código que estas usando n el foro para poder ayudarte con tu inconveniente. xD

      http://tupale.org/foro/diseno/

  10. Josue Rojas
    12 mayo, 2011 at 12:46 AM

    Te envio mi correo para una consulta con relacion a los css y el carrusel los cuales no me funcionan me arrojan error. Muchas gracias

  11. Josue Rojas
    12 mayo, 2011 at 12:55 AM

    Buenas noches felicitaciones por este curso que definitivamente es de muchisima ayuda para los que quieren y desean aprender. Yo tengo un inconveniente con el capitulo 6, especificamente con los css y el carrucel mi correo es micantoati@yahoo.com. muchas gracias

    • 12 mayo, 2011 at 3:22 PM

      Cualquier duda que tengas puedes preguntarla a través de foro, así entre todos podemos buscar la solución y tu experiencia puede ayudar a otros.
      http://tupale.org/foro

  12. mi25hind
    14 septiembre, 2011 at 5:32 AM

    Malísima esta parte… Como haces para exportar los botones?

    • 14 septiembre, 2011 at 2:40 PM

      Los botones los puedes exportar como imágenes y llamarlos con input type imagen.

  13. Antonio
    4 noviembre, 2011 at 10:18 PM

    Hola felicitaciones por tan magnifico y practico tutorial, soy nuevo en DW y tengo una duda por la que no he podido pasar al capitulo 7. Acerca del menu desplegable, cómo lo implemento en la tabla; he pegado el codigo, arrastrado el archivo y nada; espero me ayudes y de antemano disculpas a todos por la ignorancia

  14. luis cordova
    8 febrero, 2017 at 4:00 PM

    como inserto una plantilla por favor

Deja un comentario

A %d blogueros les gusta esto: