Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
LABORATORIO N 13
Objetivos: Interaccin entre Adobe DreamWeaver C3 con Visual Studio.Net. Utilizacin de Etiquetas Div. Manejo de Estilo de Cascada. Utilizacin de Pagina Maestra. Utilizacin de Control de Usuario Web. Utilizacin de los Controles de Exploracin. SiteMapPath. Men TreeView
Utilizacin del Control ContentPlaceHolder. Utilizacin de los controles SiteMapDataSource y XmlDataSource. Utilizacin del Control AdRotator.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
9. Aparecer un cuadro de dialogo llamado Generador de Estilos. 10. Seleccionar la Categora Fuente y asignar los siguientes valores. Tipo de Letra Verdana. Color de Texto White.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
11. Seleccionar la Categora Fondo y asignar los siguientes valores. Color de Fondo #e9e6cd.
12. Hacer clic en el Men Diseo > Insertar Tabla. 13. Asignar 2 Columnas y 2 Filas. 14. De ancho 960 px.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
16. Seleccionar la Etiquetad DIV, del panel HTML e insertrtelo en la fila seleccionada.
17. Seleccionar la Etiqueta DIV. 18. Pulsar el botn derecho del mouse y seleccionar la opcin Estilo.
19. Aparecer un cuadro de dialogo llamado Generador de Estilos. 20. Seleccionar la Categora Fuente y asignar los siguientes valores. Tipo de Fuente Calibri. Color de Fuente #fffffff.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
21. Seleccionar la Categora Fondo y asignar los siguientes valores. Color de Fondo #e1ca77.
22. Seleccionar la Categora Posicin y asignar los siguientes valores. Ancho 250px.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
23. Seleccionar la Categora Diseo y asignar los siguientes valores. Seleccionar Solo a la Izquierda.
24. Seleccionar la Etiquetad DIV, del panel HTML e insertarla en la segunda columna de la primera fila.
Seleccionar la Etiqueta DIV. Pulsar el botn derecho del mouse y seleccionar la opcin Estilo. Aparecer un cuadro de dialogo llamado Generador de Estilos. Seleccionar la Categora Fuente y asignar los siguientes valores. Tipo de Fuente Verdana. Tamao 10px.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
29. Seleccionar la Categora Fondo y asignar los siguientes valores. Color de Fondo White.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
30. Seleccionar la Categora Posicin y asignar los siguientes valores. Ancho 650px.
31. Seleccionar la Categora Diseo y asignar los siguientes valores. Seleccionar Solo a la Derecha.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
32. Seleccionar la Segunda fila de la primera y segunda Columna. 33. Hacer clic en el Men Diseo > Combinar Celdas.
Seleccionar la Etiquetad DIV, del panel HTML e insertarla en la segunda fila de la primera Columna. Seleccionar la Etiqueta DIV. Pulsar el botn derecho del mouse y seleccionar la opcin Estilo. Aparecer un cuadro de dialogo llamado Generador de Estilos. Seleccionar la Categora Fuente y asignar los siguientes valores. Tipo de Fuente Bell MT. Color de Texto White. Tamao 10px.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
39. Seleccionar la Categora Fondo y asignar los siguientes valores. Color de Fondo #91824D.
40. Seleccionar la Categora Posicin y asignar los siguientes valores. Ancho 960px. Alto 50px
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
41. La pgina Maestra tiene que quedar tal como se muestra en la siguiente figura.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
57. Visualizar el panel Archivo. 58. Dentro del panel Archivo Seleccionar la pgina cabecera.ascx. Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
59. Pulsar el botn derecho del mouse y seleccionar la opcin Edicin > Cambiar Nombre.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
61. Hacer doble clic en la pgina cabecera.dwt. 62. Para empezar a trabajar con la pgina. 63. Ubicar el puntero del mouse dentro de la pgina.
65. Seleccionar el Archivo llamado baner.swf (solicitar dicho archivo al instructor). 66. Hacer clic en el botn aceptar.
67. Como usted podr observar se inserto un objeto de tipo SWF. 68. Si desea reproducir esta animacin hacer clic en el botn reproducir que se encuentra en el panel propiedades.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
Visualizar el panel Archivo. Dentro del panel Archivo Seleccionar la pgina cabecera.aspx. Pulsar el botn derecho del mouse y seleccionar la opcin Edicin > Cambiar Nombre. Cambiar la Extensin de la pagina de * dwt a *ascx. La pgina tiene que quedar tal como se muestra en la figura.
77. En la vista cdigo ingresar el siguiente cdigo debajo del cdigo generado por el diseador.
<%@ Register TagPrefix="organizar" TagName="cabecera" Src="~/cabecera.ascx" %>
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
79. Debajo de la etiqueta body agregar el siguiente cdigo. <organizar:cabecera runat="server" ID="mensaje1" name="mensaje1" /> 80. Tiene que quedar tal como se muestra en la imagen.
81. Como usted podr observar en la parte superior de la pgina maestra se muestra un objeto. 82. Ese objeto es el objeto Multimedia que fue insertado en la pgina cabecera.ascx
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
88. Ingresar el siguiente cdigo. <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="Tienda Virtual" description=""> <siteMapNode url="Default.aspx" title="Inicio" description="Pgina inicial" /> <siteMapNode url="compras/compras.aspx" title="Compras" description="Area de compras"> <siteMapNode url="compras/ListaProductos.aspx" title="Lista de productos" description=""/> <siteMapNode url="compras/carritocompras.aspx" title="Ver carrito" description=""/> <siteMapNode url="compras/pedidoconfirmado.aspx" title="Confirmar pedido" description=""/> </siteMapNode> <siteMapNode url="clientes/clientes.aspx" title="Servicio a nuestros clientes" description="" > <siteMapNode url="clientes/usuario.aspx" title="Registro de clientes" description=""/> <siteMapNode url="clientes/Consultas.aspx" title="Verifique sus datos" description=""/> </siteMapNode> <siteMapNode url="foro/foro.aspx" title="Registrar Nuevo comentario" description="" > Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
<siteMapNode url="foro/registrarforo.aspx" title="Registrar Comentarios" description=""/> <siteMapNode url="foro/modificarforo.aspx" title="Modificar algun Comentario" description=""/> </siteMapNode> </siteMapNode> </siteMap> 89. Guardar el archivo. 90. Del cuadro de Herramienta y seleccionar el control SiteMapPath primera columna de la primera fila. 91. Se tiene que mostrar tal como se muestra en la figura. , en la
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
98. Luego Seleccionar la opcin formato automtico. 99. Seleccionar el Diseo que usted desee.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
102. Del cuadro de Herramienta y seleccionar el control ContentPlaceHolder en la segunda columna de la primera fila. 103. Tal como se muestra en la figura.
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
108. Aparecer un cuadro de dialogo llamado Seleccionar una Pgina Principal. 109. Seleccionar la Pgina Maestra con el nombre de MasterPage.master, tal como se muestra en la figura.
110. Como usted podr observar se visualiza la pgina error.aspx 111. Como usted podr observar solo es editable la parte donde se encuentra el control ContentPlaceHolder.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
112. Escribir el siguiente texto Pagina de Prueba, dentro del control ContentPlaceHolder2. 113. Ejecutar la Pagina (F5). 114. Crear una carpeta llamada Compras 115. Disear una pgina maestra llamada compras.master, dentro de la Carpeta Compras. 116. Crear una tabla de las siguientes medidas: 960 * 1024 117. Establecer a la tabla el siguiente diseo, e insertar en cada lado de la tabla una etiqueta DIV. 118. A la etiqueta DIV asignar un color, dentro de las etiquetas Div agregar los controles ContentPlaceHolder.
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
121. Agregar el siguiente coligo dentro del archivo de tipo XML. <?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>baner/baner1.gif</ImageUrl> <AlternateText>Solo Aqui hay descuentos</AlternateText> Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
<Impressions>60</Impressions> </Ad> <Ad> <ImageUrl>baner/baner2.gif</ImageUrl> <AlternateText>Solo Aqui hay descuentos</AlternateText> <Impressions>60</Impressions> </Ad> <Ad> <ImageUrl>baner/baner3.gif</ImageUrl> <AlternateText>Solo Aqui hay descuentos</AlternateText> <Impressions>60</Impressions> </Ad> </Advertisements> 122. Guardar el Archivo.
125. Hacer clic en la etiqueta inteligente del control XmlDataSource. 126. Seleccionar la opcin configurar origen de datos. 127. En la opcin Archivo de Datos, seleccionar el archivo con extensin XML, creado anteriormente. Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
129. Seleccionar el Control AdRotator. 130. Hacer clic en la etiqueta inteligente y seleccionar en donde dice Elegir Origen de Datos XmlDataSource1.
Crear una carpeta llamada baner. Dentro de esta carpeta copiar los 3 archivos con extensin *Gif. (Solicitar al instructor). Crear una nueva pgina y como pagina maestra seleccionar la pagina maestra Compras.master. Ejecutar la aplicacin (pulsar la tecla F5).
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
135. Como usted podr observar cada cierto tiempo cambia el baner.
Nota: Todos los objetos creados se tienen que almacenar en la Carpeta Compras.
diegoalberto_1987@hotmail.com