Laboratorio 04 Intermedio

Programacin en ASP.Net 3.
5 y Acceso a Datos con Microsoft SQL Server 2008
Creacin de Pginas Homogneas

Presentacin del Caso a Estudiar
La utilizacin del mster Pags, simplifica el trabajo en cuanto al diseo de las pginas web. Sabiendo que va a crear un pginas Homogneas. Objetivos: Se puede utilizar las hojas de estilo para un mejor formato en cuanto a las pginas. Dentro del entorno de visual net, encontraremos controles que nos permite crear mens para nuestras pginas web. Utilizacin del Mster Pags. Utilizacin de las hojas de Estilo de Cascada. Creando Estilos. Utilizacin del control Menu. Utilizacin del control SiteMapPath. Utilizacin del control ContentPlaceHolder. Captulo IV Creacin de Paginas Homogneas
Instructor: Cueva Valverde Diego Alberto / DCE DCEG DCEP MCTS / dce.diegocueva@gmail.com
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008
Utilizacion del Master Pages

1. Crear una Aplicacin web llamada MasterPages.
2. Agregar una pagina de tipo Master Pages al proyecto web.
Captulo IV Creacin de Paginas Homogneas
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 3. Dirigirse a la vista codigo de la pagina master Pages. 4. Asignar el siguiente formato a la pagina(borrar algunas etiquetas de tal forma que se vea de la siguiente forma). <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>...::: Desarrollo de Aplicaciones Web :::...</title> </head> <body> <form id="form1" runat="server"> </form> </body> </html>
Creando un Estilo
Todo estilo se establece dentro de la etiqueta Head. 5. Establecer el siguiente etilo. <style type="text/css"> body { background-color: #EFE9BA; } </style> 6. Dirigirse a la vista diseo de la pagina. Captulo IV Creacin de Paginas Homogneas Instructor: Cueva Valverde Diego Alberto / DCE DCEG DCEP MCTS / dce.diegocueva@gmail.com
Estableciendo la configuracion en el Servidor

7. La configuracion del servidor se establece dentro de la etiqueta Head. 8. Se utiliza la etiqueta meta para establecer la configuracion meta. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Utilizando la hoja de Estilo

9. Agregar al proyecto web una hoja de estilo llamada Estilo.CSS, proporcionado por el instructor.
10. Abrir la hoja de Estilo agregada al proyecto. @charset "utf-8"; body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #e9e6cd; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColElsLtHdr #container { width: 900px; background: #FFFFFF; border: 1px solid #000000; text-align: left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .twoColElsLtHdr #header { background-color: #000000; height: 100px; padding-top: 0; Captulo IV Creacin de Paginas Homogneas
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 padding-right: 10px; padding-bottom: 0; padding-left: 10px; } .twoColElsLtHdr #header h1 { margin: 0; padding: 10px 0; } .twoColElsLtHdr #sidebar1 { float: left; width: 220px; background-color: #e1ca77; color: #FFFFFF; padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; } .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p { margin-left: 10px; margin-right: 10px; } .twoColElsLtHdr #mainContent { margin: 0 1.5em 0 13em; } .twoColElsLtHdr #footer { Captulo IV Creacin de Paginas Homogneas padding: 0 10px; background-color: #91824d; } .twoColElsLtHdr #footer p { margin: 0; } .fltrt { float: right; margin-left: 8px; } .fltlft {
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
11. Debajo del Estilo body, agregar el siguiente Estilo. h1 { font: Calibri; font-size: 24px; color :ActiveBorder; } Nota: como usted puede observar las etiquetas utilizadas son etiquetas HTML y los atributos utilizados corresponden a las etiquetas.
Estableciendo referencia entre la hoja de estilo y la Pagina Maestra

Se utiliza la etiqueta Link para establecer referencia entre la hoja de estilo y la pagina web. 12. Establecer las siguientes etiquetas dentro de la etiqueta Head. <link href="Estilo.css" rel="stylesheet" type="text/css" /> Captulo IV Creacin de Paginas Homogneas 13. En la etiqueta body se establece la siguiente clase que se encuentra en la hoja de estilo. <body class="twoColElsLtHdr"> 14. Establecer las siguientes etiquetas DIV dentro de la etiqueta form. <div id="container"> <div id="header"> <br /> </div> <div id="sidebar1"> <br /> </div> <div id="mainContent"> <br /> <p> </p></div> <br class="clearfloat" /> <div id="footer"> <br /> </div> </div>
Utilizacion de Mapa de Sitio

15. Agregar un Mapa de Sitio al proyecto web.
16. Establecer las siguientes etiquetas dentro del archivo Mapa de Sitio. <?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> </siteMap> 17. Seleccionar la etiqueta sidebar1 de la pagina master pages.
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 18. Arrastrar el control Menu del panel Navegacion a la etiqueta DIV seleccionada.
19. Hacer clic en la etiqueta inteligente del control. 20. Seleccionar el origen de datos. 21. Como origen de datos seleccionar Mapa del Sitio.
22. Seleccionar un formato automatico. 23. Seleccionar como vista Dinamica.
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 24. Arrastrar el control SiteMapPath del panel navegacion en la etiqueta DIV mainContent.
25. Asignar un formato al control. 26. La pagina tiene que quedar tal como se muestra en la imagen.
Creando una carpeta en el proyecto web.

27. Seleccionar el proyecto web del explorador de soluciones. 28. Pulsar el boton derecho del mouse y seleccionar Nueva Carpeta. 29. Asignar el nombre de Compras. Captulo IV Creacin de Paginas Homogneas Instructor: Cueva Valverde Diego Alberto / DCE DCEG DCEP MCTS / dce.diegocueva@gmail.com
Creando una Pagina Web desde un Master Pages

30. Agregar una pagina llamada ListaProductos.aspx. 31. Activar la opcion de Seleccionar la pagina principal.
32. Aparecera un cuadro de dialogo. 33. Seleccionar la pagina de tipo Master Pages.
10
Programacin en ASP.Net 3.5 y Acceso a Datos con Microsoft SQL Server 2008 34. Digitar las siguientes etiquetas dentro de la pagina ListaProductos.aspx. <h1>Lista de Productos</h1> 35. Ejecutar la pagina. 36. Aceptar la depuracion de la pagina.
37. Visualizar la pagina.
11

Laboratorio 04 Intermedio

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Laboratorio 04 Intermedio

Încărcat de

Drepturi de autor:

Formate disponibile

Programacin en ASP.Net 3.

5 y Acceso a Datos con Microsoft SQL Server 2008

Creacin de Pginas Homogneas

Utilizacion del Master Pages

2. Agregar una pagina de tipo Master Pages al proyecto web.

Captulo IV Creacin de Paginas Homogneas

Estableciendo la configuracion en el Servidor

Utilizando la hoja de Estilo

Estableciendo referencia entre la hoja de estilo y la Pagina Maestra

Utilizacion de Mapa de Sitio

Captulo IV Creacin de Paginas Homogneas

22. Seleccionar un formato automatico. 23. Seleccionar como vista Dinamica.

Captulo IV Creacin de Paginas Homogneas

Creando una carpeta en el proyecto web.

Creando una Pagina Web desde un Master Pages

Captulo IV Creacin de Paginas Homogneas

37. Visualizar la pagina.

Captulo IV Creacin de Paginas Homogneas

S-ar putea să vă placă și