Web Dinámica con

Dreamweaver

Ing. Rafael Edwin Gordillo Flores

 LOGO
Introducción
Es muy frecuente que se piense que la creación
de sitios web que saquen sus contenidos de
bases de datos está limitada a programadores
expertos. Nada más lejos de la realidad: Adobe
Dreamweaver nos ofrece herramientas que, sin
necesidad de programar en lenguajes de
servidor, recuperarán datos y generarán el
código HTML que los muestre al usuario final, y
en este curso aprenderás precisamente a
realizar esta acción.

REGF
 LOGO
Introducción

Crear un sitio web complejo, cuyos

contenidos cambien con el paso del tiempo
utilizando solo HTML, es una tarea repetitiva
y pesada que nos podemos ahorrar utilizando
lenguajes de servidor. Sin embargo, está
extendida la idea de que esta manera de
trabajar solo es posible para expertos
programadores.

REGF
 LOGO
Introducción
Nada más lejos de la realidad, vamos a
demostrártelo con este curso en el que
utilizaremos Adobe Dreamweaver para generar
contenidos utilizando PHP y sin necesidad de
programar con él. Si tienes ganas de ampliar tu
capacidad de generar contenidos web y no
posees de conocimientos sobre PHP, este será tu
curso.

REGF
 LOGO
Introducción

Aprenderemos a instalar y configurar

todo lo necesario y a utilizar las
herramientas de generación de código
PHP que nos ofrece Dreamweaver en un
ejemplo real. Crearemos una web
dinámica en la que podremos mostrar
contenidos, y también añadirlos,
modificarlos y borrarlos.

REGF
 LOGO
Catalogo
Crearemos un catalogo con información.
Forma Clásica.

REGF
 LOGO
Catalogo
Crearemos un catalogo con información.
Forma Dinámica, utilizando PHP

REGF
 LOGO
Configurar un alias
Crearemos una carpeta misitio dentro
de la carpeta documentos.

REGF
 LOGO
Configurar un alias
Abrimos el archivo http.conf con el bloc
de notas.

REGF
 LOGO
Configurar un alias
Editamos el
archivo
http.conf con el
bloc de notas.

REGF
 LOGO
Configurar un alias
Reiniciamos el
servidor
apache

REGF
 LOGO
Probamos el alias
Realizamos la prueba para determinar que
ya esta configurado el alias.

REGF
 LOGO
Creación de la BD
Entraremos al PhpMyAdmin, crearemos
la BD rutas.

REGF
 LOGO
Configurando la Tabla Usuarios
Ahora crearemos la tabla usuario con 4
columnas.

REGF
 LOGO
Configurando la Tabla Usuarios
Ingresando sus características

REGF
 LOGO
Configurando la Tabla Usuarios
Ingresando sus características y después
guardar.

REGF
 LOGO
Importar
Importaremos
de un archivo
pruebas.sql
dos tablas mas,
dificultad y
rutas.

REGF
 LOGO
Importar
Visualizamos las
2 nuevas tablas

REGF
 LOGO
Creación de privilegios
Crearemos un usuario master con contraseña
master, con todos los privilegios.

REGF
 LOGO
Creación del nuevo sitio con DW
Configuraremos nuestro sitio.

REGF
 LOGO
Creación del nuevo sitio con DW
Configuraremos nuestro sitio.

REGF
 LOGO
Prueba del sitio
Creamos un archivo index.php

REGF
 LOGO
Conectando BD
Agregamos el Panel Bases de Datos, el cual nos
servirá para la conexión de la BD, creamos una
nueva conexión de MySQL.

REGF
 LOGO
Conectando BD
Si la conexión no tuvo problemas observaremos la
BD con sus tablas.

REGF
 LOGO
Conectando BD
DW ha creado una carpeta Connections y dentro
de la carpeta se encuentra un archivo rutas.php el
cual contiene todo el código de conexión de la BD.

REGF
 Creación de las Páginas que LOGO
necesitaremos
Crearemos una nueva pagina index.php con
diseño, la cual nos ofrecerá exactamente lo que
necesitamos.

REGF
 LOGO
Probando
Probaremos la pagina index.php.

REGF
 LOGO
Creando mas paginas
Crearemos la pagina contacto y el css lo
añadiremos al que ya creamos anteriormente.

REGF
 LOGO
Creando mas paginas
Ahora crearemos la pagina listado.php (donde
estarán los listados de las rutas) y detalle.php (los
detalles de las rutas).

REGF
 LOGO
Creando Estructuras
 Crearemos una estructura para las paginas estará
basada en el estilo css, las paginas que creamos tienen
una serie de partes fundamentales como:
 Un contenedor el que lleva todo el contenido de la
pagina.

REGF
 LOGO
Creando Estructuras
 Un header el que mostrara la cabecera con el
logotipo y demás.

REGF
 LOGO
Creando Estructuras
 Un content el que mostrara todo lo que esta
colocado en el medio

REGF
 LOGO
Creando Estructuras
 y por ultimo footer el que mostrara todo lo que
pondremos en la parte inferior.

REGF
 LOGO
Creando Estructuras
 Ahora modificaremos la estructura para que nos
quede mejor la pagina.
 Modificaremos el estilo del header y footer

REGF
 LOGO
Creando Estructuras
 Ahora modificaremos la estructura para que nos
quede mejor la pagina.
 Modificaremos el estilo del header y footer

REGF
 LOGO
Creando Estructuras
 Modificaremos la clase container en el ancho a 955.

REGF
 LOGO
Creando Estructuras
 Ahora insertaremos imágenes desde la carpeta
imágenes a header y footer

REGF
 LOGO
Creando Estructuras
 Ahora insertaremos imágenes desde la carpeta
imágenes a header y footer

REGF
 LOGO
Creando Estructuras
 Ahora insertaremos imágenes desde la carpeta
imágenes a header y footer

REGF
 LOGO
Creando Estructuras
 Ahora insertaremos imágenes desde la carpeta
imágenes a header y footer

REGF
 LOGO
Probando los Cambios
 Lo revisaremos en un navegador.

REGF
 LOGO
Probando los Cambios
 Lo revisaremos en un navegador.

REGF
 LOGO
Creando la Cabecera
 Insertaremos un nuevo div dentro del div header y
crearemos una clase fotoheader

REGF
 LOGO
Creando la Cabecera
 Crearemos una nueva clase fotoheader

REGF
 LOGO
Creando la Cabecera
 Ahora nos dirigimos en la pestaña común de la
herramienta insertar y elegimos imagen

REGF
 LOGO
Creando la Cabecera
 Ahora nos dirigimos en la pestaña común de la
herramienta insertar y elegimos imagen

REGF
 LOGO
Creando la Cabecera
 Quedara como se muestra

REGF
 LOGO
Creando la Cabecera
 Ahora desde diseño seleccionamos el divfotoheader
y lo copiamos tres veces dentro del divfooter

REGF
 LOGO
Creando la Cabecera
 Ahora cambiamos las imágenes por
header_media.jpg y header_dificil.jpg

REGF
 LOGO
Probando
 Lo abrimos desde un navegador y se mostrara:

REGF
Ing. Rafael Edwin Gordillo Flores