Manual de Dream Weaver CS3 Con PHP

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras
Manual de DreamWeaver CS3 con PHP
Proyecto carrito de compras

• Primero tiene que tener instalado el appserver en su computadora.
• Luego crear un directorio virtual en la carpeta WWW que se encuentra en la
carpeta de instalación del appserver.
• Para este ejemplo se ha creado la carpeta llamada carritophp en la siguiente
ruta.
• Luego de haber creado la carpeta en la ruta mencionada se procederá a

crear el sitio en dreamweaver Cs3.
• Una vez ejecutado el programa hacer un clic en el menú sitio> Nuevo sitio.
• Luego aparecerá un cuadro de dialogo de configuración del sitio Web.

• Hacer un clic en la ficha avanzada.
• Nombre del sitio asignarle carritophp
• En la opción de carpeta de raíz local seleccionar la carpeta creada
anteriormente en la ruta C:\AppServ\www\carritophp.
• En la opción carpeta predeterminada de imágenes seleccionar la carpeta
imágenes que se encuentra dentro de esta ruta
C:\AppServ\www\carritophp\imagenes.
• En la opción Dirección http escribir la siguiente ruta
http://localhost/carritophp.
Prof.: Cueva Valverde Diego

• Active la casilla de opción Activar caché, para crear un caché local para
mejorar la velocidad de las tareas de administración de vínculos y sitios.
En la opción categoría seleccionar la opción Servidor de Prueba
• En modelo de Servidor seleccionar PHP MySql.

• Acceso local/Red.
• Carpeta de Servidor Seleccionar la siguiente ruta
C:\AppServ\www\carritophp.
• Prefijo de URL http://localhost/carritophp.
• Finalmente hacer un clic en aceptar.

• Una vez termina la configuración del sitio Web.

• Hacer un clic en el menú archivo > Nuevo.

• Aparecerá un cuadro de dialogo llamado Nuevo Documento

• Seleccionar la ficha Plantilla en blanco.
• Dentro de esta opción seleccionar en tipo de Plantilla, la opción Plantilla PHP.
• En el Modelo de plantilla seleccionar la opción 2 columnas flotantes, barra
lateral izquierda.
• En la opción diseño CSS en seleccionar crear nuevo archivo.

• Aparecerá un cuadro de dialogo donde guardaremos el archivo CSS con el

nombre de estilo.

• El Diseño de Plantilla se vera de la siguiente forma.

• Hacer un clic en la Ventana CSS

• Como usted podrá apreciar se pueden visualizar todos los estilos

establecidos para esta plantilla.
• Hacer doble clic en la regla con el nombre de container.
• Aparecerá una cuadro de dialogo donde uno podrá configurar.
• Seleccionamos la categoría fondo y en el color de fondo seleccionamos
cualquier color que uno desee.

• En la categoría cuadro en el ancho asignarle 900 pix, luego hacer un clic en

aceptar.
• Hacer doble clic en la regla body.

• En la categoría fondo seleccionar un color de fondo de color rojo o puede ser
cualquiera.

• Seleccionar la regla Header en la categoría tipo seleccionar la Fuente

Verdana y el color cualquiera.
• En la categoría fondo en la opción color de fondo seleccionar cualquier color.

Seleccionar la regla Sidebar1

• En la categoría tipo seleccionar la fuente verdana, en tamaño seleccionar
tamaño 10 pix, y cualquier color de fondo.
• En la categoría fondo
• Seleccionar un color de fondo y luego aceptar

• Seleccionar el texto que se encuentra en el titulo de la pagina luego hacer

un clic en Insertar > Objetos de planilla > Región editable

• Se asigna el nombre de Superior a la región editable insertada.

• Lo mismo realizar con el lado izquierdo y el centro de la pagina.
• Para la región editable izquierdo el nombre es izquierdo.
• Para la región editable Centro el nombre es Centro.
• Luego hacer un clic en archivo guardar como Plantilla
• En el cuadro de diálogo que aparece asignar el nombre de la plantilla

Utilización de Plantillas
Creación de la Pagina Lista.php
• Una vez guardada la plantilla hacer un clic en el menú archivo> nuevo.
• En el cuadro de dialogo que aparecerá seleccionar pagina de plantilla y el
sitio seleccionar el nombre del sitio Web que para este ejemplo se a utilizado
carritophp y al lado derecho seleccionar el nombre de principal y finalmente
hacer un clic en Crear.

• Luego hacer un clic en archivo guardar y guardar la nueva pagina Web con
el nombre de lista.
• Hacer un clic en la región editable izquierdo, seleccionar la ficha Spry,

dentro de la ficha Spry y luego hacer un clic en el botón Barra de menús
de Spry.

• Luego aparecerá una cuadro de dialogo barra de menús de spry en ese

cuadro de dialogo seleccionar la opción vertical y luego hacer un clic en
aceptar.
• Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la
pestaña Base de Datos, hacer un clic en el símbolo , aparecerá la opción

Conexión MySql.

En el cuadro de dialogo que aparecerá:

• Nombre de Conexión.- Asignar un nombre puede ser cualquiera, este
nombre se toma como una variable.
• Servidor Mysql.- en nombre de servidor se asigna el nombre del servidor en
este caso como se trabaja a nivel local es localhost.
• Nombre de Usuario.- el nombre de usuario se asigna tal como se nombre al
momento de instalar MySql.
• Contraseña.- Se asigna la contraseña que se asigno cuando se instalo
MySql.
• Base de Datos.- Se asigna el nombre de la base de datos que se va a
trabajar.
• Luego hacer un clic en el botón prueba y tiene que aparecer un mensaje

indicando si esta correcto o no la conexión.

• Verificar en el panel Aplicación que las tablas de la base de datos aparezcan

correctamente.
• Como usted podrá observar se pueden visualizar todas las tablas de la base
de datos.

pestaña Vinculaciones, dentro de esta pestaña seleccionar el símbolo
,Aparecerá la opción Juego de registros(consulta).

Aparecerá el cuadro de dialogo llamado juego de registros, se le asignara los

siguientes valores.
• Nombre.- Se asigna un nombre que nos sirve como referencia de la
consulta, en este caso es rsCategorias.
• Conexión.- Se asigna la variable de conexión que se creo con el nombre de
cn.
• Tabla.- Seleccionar la tabla que se va a trabajar en este caso es
Categorías.

• Luego hacer un clic en el botón prueba y aparecerá el siguiente cuadro de

dialogo con el contenido de la tabla seleccionada.
• En la Ficha Vinculaciones aparecerá un juego de registros llamado

rsCategoria, dentro de esa consulta aparecerá los campos de la tabla que
en este caso es IdCategoria, NombreCategoria, descripción.
• Utilizar la vista Código y dentro de esa vista posicionarse en la fila numero

68, es decir en la lista con el nombre de elemento 1.

• Seleccionar el texto elemento 1 y arrastrar del panel Aplicación de la

ficha Vinculaciones del juego de registros rsCategoria el campo
NombreCategoria.
• Seleccionar el panel CSS y la ficha CSS

• Hacer doble clic en la regla ul: MenuBarVertical.

• En la categoría tipo seleccionar el tipo de fuente que usted desee en tamaño
10 y color el que a usted mas le guste, luego hacer clic en aceptar.
• En la Categoría Fondo Seleccionar el coro de fondo que usted desee.
• En la Categoría Cuadro Seleccionar el ancho 215 pix y finalmente hacer un

clic en aceptar.

• Hacer doble clic en la regla ul: MenuBarVertical a.

• En la categoría tipo seleccionar un tipo de fuente y color Diferente a lo que
estaba.
• En la Categoría Fondo seleccionar un color de fondo diferente al otro Color.

• En la Categoría Cuadro asignar en ancho 215pix y finalmente aceptar.
• Hacer doble clic en la regla ul: MenuBarVertical a:hover.

• En la Categoría tipo en fuente seleccionar Verdana y en color de letra Negro.

• En la categoría fondo seleccionar un color de fondo diferente a lo que estaba

anteriormente.
• En la vista diseño seleccionar el conjunto de registro y luego ir al panel

aplicación y dentro del panel aplicación ir a la ficha Comportamientos del
Servidor hacer un clic en el botón , y seleccionar la opción Repetir

Región

• Luego aparecerá un cuadro de dialogo llamado Repetir Región, y dentro de

la opción juego de registros seleccionar el conjunto de registro llamado
rscategoria (creado anteriormente), y en mostrar seleccionar la opción
Todos los registros y luego aceptar.
• Luego guardar la pagina y ejecutar presionando la tecla F12.

• En la lista que se muestra al lado izquierdo de la página usted puede
observar que cuanto uno pasa el puntero del Mouse la lista cambia de color.

Creación de la lista de productos

pestaña Vinculaciones, dentro de esta pestaña seleccionar el símbolo
,Aparecerá la opción Juego de registros(consulta).
• En el cuadro de dialogo juego de registros asignarle como nombre

rsproductos, en conexión cn y la tabla productos.

• En columnas seleccionar Idproducto, nombreProducto,

CantidadPorUnidad, PrecioUnidad, UnidadesEnExistencia.
• En filtro Seleccionar IdCategoria y al Lado Derecho =, debajo de
IdCategoria seleccionar Parámetro URL y asignar como variable
codigocategoria y luego hacer un clic en el botón Prueba.
• Aparecerá un cuadro de dialogo donde podemos el numero de la Categoría

y luego presionamos aceptar.
• Como usted podrá apreciar se muestra todos los registros de la categoría

02.

• Una vez creado el nuevo juego de registros hacer un clic en el menú Insertar
> Objetos de Datos > Datos Dinámicos > Tabla Dinámica.

• Aparecerá un cuadro de dialogo donde se tiene que seleccionar el juego de

registros en esta caso es rsproductos, en mostrar todos los productos y
luego hacer un clic en aceptar.
• Aparecerá una tabla en la página donde se muestra la información de la

tabla.
• En la parte superior de la tabla se muestra el nombre que por defecto tiene
que la base de datos que hace referencia al nombre del campo.

• En la Fila numero 1 Cambiar el Nombre a los campos que se muestra, para

un mejor diseño.
• Ejecutar la pagina F12.

• Como usted podrá apreciar no se muestra nada todavía, ya que falta
agregarle un parámetro a la tabla producto.
• Seleccionar el juego de registro rscategoria y luego en el panel propiedades

seleccionar la opción vinculo y agregarle la pagina lista.php.

• Ir a la vista código; En la vista código en la línea 83 con de se encuentra el

vinculo del juego de registro agregarle el siguiente parámetro al vinculo
seguido de la pagina a vincular ?codigocategoria=.
• El código Completo es de la siguiente forma
<li><a href="lista.php?codigocategoria=<?php echo $row_rscategoria['IdCategoria'];

?>"><?php echo $row_rscategoria['NombreCategoria']; ?></a> </li>
• Ejecutar la página F12 y seleccionar alguna de las categorías.


pestaña Vinculaciones.
• Seleccionar el juego de registro rsproductos y hacerle doble clic.
• En el cuadro de dialogo que aparecerá, en la opción columnas adicionar la
columna imagenchica y luego hacer un clic en aceptar.
• Entre la columna Descripción y precio insertar una nueva columna, a la

nueva columna asignarle el nombre de imagen.

• En la segunda fila de la Columna imagen hacer un clic y luego ir al menú

Insertar > Imagen.
• En el cuadro de dialogo que aparece seleccionar en la parte superior Fuente

de Datos.
• Seleccionar el conjunto de datos llamado rsproductos, desplegar las
opciones que hay dentro de ese conjunto de datos y seleccionar el campo
imagenchica.
• Finalmente hacer un clic en aceptar

• Ejecutar la pagina y seleccionar una categoría y como usted podrá apreciar

se visualiza una imagen diferente por cada producto.

• Seleccionar todo el contenido de la región Editable Centro y luego hacer un

clic en el menú Insertar >Objetos de datos > Mostrar Región > Mostrar si el
juego de registros no esta vació.
Aparecerá un cuadro de dialogo donde se selecciona el juego de registro que en

este caso rsproductos y luego hacer un clic en aceptar.
Ejecutar la pagina

En la línea 157 hay el siguiente código
<?php } // Show if recordset not empty ?>
A ese código php agregarle un else.
• Dentro de ese Else Agregar un Nuevo conjunto de Registros.

• Para ello Creamos un nuevo juego de registros.
• En nombre le asignamos reoferta.
• En conexión cn.
• Tabla Productos.
• En las Columnas seleccionar los siguientes campos Idproducto,
nombreProducto, CantidadPorUnidad, PrecioUnidad,
UnidadesEnExistencia.
• Filtro PrecioUnidad <= , Valor Introducido es 15 y aceptar.

• Hacer un clic en medio de las 2 etiquetas php que aparecen y hacer que el
puntero del Mouse se posicione en el centro de esas 2 etiquetas.
• Estando el puntero posicionado en el medio de las 2 etiquetas hacer un clic

en la ficha datos la opción tabla Dinámica

• Aparecerá un cuadro de dialogo donde tiene que seleccionar el conjunto de

registros que en este caso es rsOferta.
• Ejecutar la pagina y como usted podrá observar solo se visualiza la tabla

que contiene el conjunto de registros rsOferta y luego seleccione una
Categoría vera usted que cambia la tabla.

Modificando la Tabla Insertada

• En la Fila 2 Columna 1, Insertar una tabla de Fila 6 Columna 1.
• Dentro de la Nueva tabla creado Asignarle el nombre a cada fila y cada
campo del conjunto de registro pasar a la fila que corresponda.
• En la fila cantidad agregar un Campo de Texto; hacer clic en la ficha

formulario > Campo de Texto

• En el ID asignarle Cantidad y aceptar.
• Aparecerá un cuadro de dialogo indicando si desea añadir etiqueta de

formulario, en este caso hacemos clic en no.

• Luego en la fila Pedir Insertar 2 campos ocultos, uno con el nombre de

codigoproducto y origenlistaproductos; Hacer un clic en Formularios >
Campo de Imagen.
• Estando en la fila Pedir insertar un imageField y seleccionar cualquier

imagen esta imagen se utilizara como botón para enviar los pedidos
realizados.

• En el ID asignarle el nombre de imageField.
• En el mensaje de añadir etiqueta de formulario hacer un clic en no.

• Modificar el juego de registro rsoferta y agregarle el campo imagenchica.
• Hacer un clic en la fila numero 3.

• Hacer un clic en el menú Insertar > Imagen.

• En el cuadro de dialogo seleccionar Fuente de Datos.

• Seleccionar el juego de registro llamado rsoferta.
• Seleccionar el campo imagenchica.

• Luego de insertar la imagen borrar las demás columnas que no se están

utilizando.
• En la vista Código a la etiqueta <img agregarle alt,y dentro de esta etiqueta
agregar los siguiente.
alt="<?php echo $row_rsoferta['CantidadPorUnidad']; ?>"
• Guardar los cambios y ejecutar la pagina F12.

• Ir a la vista Código.
• En el campo oculto origenlistaproductos asignarle como valor 1.
• En el Campo oculto codigoproducto en valor <?php echo
$row_rsoferta['IdProducto']; ?>.
• Agregar una nueva pagina en blanco con el nombre de imagen.php.

• Crear un juego de registro con el nombre de rsimagen.
• Utilizar la Tabla productos y solo seleccionar el campo imagengrande.
• En filtro seleccionar IdProducto igual Parámetro codigoproducto.

En la pagina imagen hacer un clic en el menú archivo >imagen
• Seleccionar fuente de Datos.

• Seleccionar el juego de Registro llamado rsimagen el campo
imagengrande

• Guardar los cambios de la Página.

• Ir a la pagina Lista.php
• En la página lista seleccionar el campo imagen.
• Hacer un clic en el panel Etiqueta > Comportamiento y seleccionar la
opción Abrir ventana del navegador.

• En el cuadro de Dialogo que aparecerá en Mostrar URL asignarle

imagen.php, en ancho 170 y alto 170.
• En el evento seleccionar Clic.

• En la etiqueta <img de la imagen que se esta trabando agregarle la
etiqueta:
alt="<?php echo $row_rsoferta['CantidadPorUnidad']; ?>"

• Seleccionar el campo imagen y el panel propiedades en la opción vinculo

asignarle el símbolo # y en borde asignarle 0.
• Estando aun seleccionado ir al panel Etiqueta > Comportamiento y

seleccionar la opción Efectos > Agitar.

• En el cuadro de dialogo que aparecerá seleccionar la opción selección actual.
• En el evento seleccionar onMouserOver
• Guardar la Página.
• Al momento de guardar aparecerá una mensaje indicando que tiene que
copiar el archivo SpryEffects.js, hacer un clic en aceptar.
• En la Pagina imagen.php seleccionar el campo imagen ir al panel Etiqueta

> Comportamiento y seleccionar la opción Efectos >
Aparecer/Desvanecer.
• En Efecto Seleccionar Aparecer.

• En el Evento seleccionar onLoad.
• Guardar los Cambios.

• Ir ala pagina lista y dentro de la Pagina lista hacer doble clic en el
comportamiento Abrir ventana del navegador agregarle la siguiente
parámetro.
imagen.php?codigoproducto=<?php echo $row_rsoferta['IdProducto']; ?>
• Como ustedes se darán cuenta solo se muestra los productos en una sola
columna, se procederá a cambiar el código php para que genere 4 columnas
al momento de ejecutar la pagina.

• Después de la Etiqueta <table> y antes de la etiqueta <tr>, agregar el

siguiente código.
<?php
$contador=0;
while ($row_rsoferta = mysql_fetch_assoc($rsoferta)) {
if($contador % 4==0){
echo "<tr>";
}
?>
• Después el codigo del contador agregar una etiqueta de formulario y en el

action asignar como pagina agregarproducto.php.
<form method="post" action=" agregarproducto.php">
• Al final de la Etiqueta <table> cerrar la etiqueta de formulario.
• Luego agregar el siguiente codigo del contador.
</form>
<?php
$contador++;
if($contador % 4==0){
echo "</tr>";
}
} ?>

• Guardar los cambios y ejecutar la pagina F12.
• Pasar el Mouse sobre cualquier imagen y veras un efecto.

Haga clic en Cualquiera de las imágenes y vera que aparecerá una imagen mucho
mas grande un con efecto.
Creación de la pagina que contiene la variable de

session_start ()
• Crear una nueva pagina de tipo *php, sin utilizar plantillas.
• Guardar la pagina con el nombre de agregarproducto.php.
• Agregar el Siguiente código.
//Se nombra a la variable de conexión

<? php require_once('Connections/cn.php');

session_start();//ASi se inicia la sesión
extract($_REQUEST);//De esta forma se esta almacenando en variables locales
//os valores de los parámetros URL o variables de formulario recibidos
//las variables locales tendrán el nombre del parámetro URL o de la variable de
//formulario
mysql_select_db($database_cn,$cn);
if(!isset($cantidad)){
$cantidad=1;
//Inicialmente al seleccionar un producto se esta asumiendo
//que se pedirá una unidad
}
$consulta=mysql_query("select NombreProducto,PrecioUnidad from
productos where idproducto=".$codigoproducto);
//$codigoproducto es una variable local que almacena el valor del parametro URL
codigoproducto recibido
$fila=mysql_fetch_array($consulta);
if(isset($_SESSION['carrito'])){
$carrito=$_SESSION['carrito'];
}
//Esto significa que si la variable sesión carrito contiene algo, entonces se
//almacenará en la variable local $carrito
$carrito[$codigoproducto]=array('codigo'=>$codigoproducto,
'cantidad'=>$cantidad,
'producto'=>$fila['NombreProducto'],
'precio'=>$fila['PrecioUnidad']);
//Asi se define un elemento (nuevo) dentro de la varibale local $carrito usandose
como índice
//$codigoproducto este elemento contendrá una matriz asociativa que en este caso
representa
//al producto seleccionado
$_SESSION['carrito']=$carrito;
//Asi se almacena para la sesión en la variable session carrito el valor de la variable
//local $carrito que contiene el elemento recientemente agregado
if ($origenlistaproductos==1){
header("Location:lista.php");
}
else{

header("Location:carritodecompras.php");
}
//Asi se direcciona terminado el proceso al página carritodecompras.php, la cual
mostrará los productos agregados...
?>
Creación de la Pagina CarritoCompras.php

• Crear una nueva pagina con el nombre de CarritoCompras.php en la parte
superior de esta pagina agregar el siguiente codigo.
<?php
session_start();
if(isset($_SESSION['carrito'])){
}
?>
• Crear una tabla de 8 columnas y 2 filas.
• En la vista codigo en la parte superior agregar el siguiente codigo.
<?php
if($carrito){
//Asi se pregunta si la variable $carrito contiene
//algún elemento
?>
<table border="1" cellspacing="0" cellpadding="4">
<tr bgcolor="#333333">
<td width="30"><span class="style1"></span></td>
<td width="40"><span class="style1">Cod</span></td>
<td width="300"><span class="style1">Producto</span></td>
<td width="50"><span class="style1">Precio</span></td>
<td width="28"><span class="style1">Cant</span></td>
<td><img src="imagenes/actualizar.gif" width="20" height="20"
/></td>
<td width="60"><span class="style1">Subtotal</span></td>
<td><img src="imagenes/trash.gif" alt="Eliminar" width="12"
height="14" /></td>
</tr>
<?php

$item=0;//Asi se declara una variable para tener el recuento

de
//los items pedidos
$total=0;//Asi se declara una variable que acumulará el total
de la
//compra
foreach($carrito as $k => $v){
$item++;
//$v representa a cada elemento (fila) del carrito
$subtotal=$v['precio']*$v['cantidad'];
$total+=$subtotal;//Asi se acumula el subtotal en la variable
total
?>
<form method="post" action="agregarproducto.php">
<tr>
<td><?php echo $item; ?></td>
<td><?php echo $v['codigo']; ?></td>
<td><?php echo $v['producto']; ?></td>
<td><?php echo number_format($v['precio'],2); ?></td>
<td><input name="cantidad" type="text" id="cantidad" size="6"
value="<?php echo $v['cantidad']; ?>" /> </td>
<td><input name="" type="image" src="imagenes/actualizar.gif"
alt="Actualizar" />
<input name="codigoproducto" type="hidden" value="<?php
echo $v['codigo']; ?>" /> </td>
<td width="60"><?php echo number_format($subtotal,2);
?></td>
<td><a href="borrarproductocarrito.php?codigoproducto=<?php
echo $v['codigo']; ?>"><img src="imagenes/trash.gif" alt="Eliminar"
width="12" height="14" border="0" /></a></td>
</tr>
</form>
<?php
}//cierra el foreach
?>
</table>
<p>El total de la venta es: <?php echo number_format($total,2); ?>
nuevos soles.</p>

<p>Para confirmar el pedido <a href="confirmarpedido.php">haga

clic aquí</a> </p>
<?php
}//Asi se cierra el if que verifica si el carrito tiene elementos
else{
?>
<p align="center">Usted no ha seleccionado algún producto</p>
<p align="center"><img
src="imagenes/table_mensaje_carrito_2.jpg" width="143"
height="122" /></p>
<p align="center"><a href="listaproductos.php"><img
src="imagenes/button_back_over.jpg" width="112" height="35"
border="0" /></a></p>
<?php
}//cierra else
?>
Crear la Pagina borrarproductocarrito.php

<?php
session_start();
extract($_GET);
//Esto vuelca en variables locales los par{ametros URL recibidos
unset($carrito[$codigoproducto]);//Así se elimina el elemnto de indice
$codigoproducto
//de la variable $carrito (se elimina una fila)
$_SESSION['carrito']=$carrito;
header("Location:carritocompras.php");
?>

Manual de Dream Weaver CS3 Con PHP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Dream Weaver CS3 Con PHP

Uploaded by

Copyright:

Available Formats

Manual de DreamWeaver CS3 con PHP – Proyecto Carrito de Compras

Manual de DreamWeaver CS3 con PHP

Proyecto carrito de compras

• Luego de haber creado la carpeta en la ruta mencionada se procederá a

• Luego aparecerá un cuadro de dialogo de configuración del sitio Web.

Prof.: Cueva Valverde Diego

En la opción categoría seleccionar la opción Servidor de Prueba

• En modelo de Servidor seleccionar PHP MySql.

Prof.: Cueva Valverde Diego

• Una vez termina la configuración del sitio Web.

Prof.: Cueva Valverde Diego

• Aparecerá un cuadro de dialogo llamado Nuevo Documento

Prof.: Cueva Valverde Diego

• Aparecerá un cuadro de dialogo donde guardaremos el archivo CSS con el

Prof.: Cueva Valverde Diego

• El Diseño de Plantilla se vera de la siguiente forma.

Prof.: Cueva Valverde Diego

• Hacer un clic en la Ventana CSS

Prof.: Cueva Valverde Diego

• Como usted podrá apreciar se pueden visualizar todos los estilos

Prof.: Cueva Valverde Diego

• En la categoría cuadro en el ancho asignarle 900 pix, luego hacer un clic en

• Hacer doble clic en la regla body.

Prof.: Cueva Valverde Diego

• Seleccionar la regla Header en la categoría tipo seleccionar la Fuente

• En la categoría fondo en la opción color de fondo seleccionar cualquier color.

Prof.: Cueva Valverde Diego

Seleccionar la regla Sidebar1

Prof.: Cueva Valverde Diego

• Seleccionar el texto que se encuentra en el titulo de la pagina luego hacer

Prof.: Cueva Valverde Diego

• Se asigna el nombre de Superior a la región editable insertada.

• Luego hacer un clic en archivo guardar como Plantilla

• En el cuadro de diálogo que aparece asignar el nombre de la plantilla

Prof.: Cueva Valverde Diego

Prof.: Cueva Valverde Diego

• Hacer un clic en la región editable izquierdo, seleccionar la ficha Spry,

Prof.: Cueva Valverde Diego

• Luego aparecerá una cuadro de dialogo barra de menús de spry en ese

• Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la

pestaña Base de Datos, hacer un clic en el símbolo , aparecerá la opción

Prof.: Cueva Valverde Diego

En el cuadro de dialogo que aparecerá:

• Luego hacer un clic en el botón prueba y tiene que aparecer un mensaje

Prof.: Cueva Valverde Diego

• Verificar en el panel Aplicación que las tablas de la base de datos aparezcan

• Seleccionar el panel Aplicación dentro del panel aplicación se encuentra la

,Aparecerá la opción Juego de registros(consulta).

Prof.: Cueva Valverde Diego

Aparecerá el cuadro de dialogo llamado juego de registros, se le asignara los

Prof.: Cueva Valverde Diego

• Luego hacer un clic en el botón prueba y aparecerá el siguiente cuadro de

• En la Ficha Vinculaciones aparecerá un juego de registros llamado

• Utilizar la vista Código y dentro de esa vista posicionarse en la fila numero

Prof.: Cueva Valverde Diego

• Seleccionar el texto elemento 1 y arrastrar del panel Aplicación de la

• Seleccionar el panel CSS y la ficha CSS

Prof.: Cueva Valverde Diego

• Hacer doble clic en la regla ul: MenuBarVertical.

• En la Categoría Fondo Seleccionar el coro de fondo que usted desee.

• En la Categoría Cuadro Seleccionar el ancho 215 pix y finalmente hacer un

Prof.: Cueva Valverde Diego

• Hacer doble clic en la regla ul: MenuBarVertical a.