TALLER DE DESARROLLO
INSTRUCTOR: HCTORA ARANDA VEGA
1
ESTRUCTURA DEL SITIO WEB
Crear un proyecto [Link]
Elegir [Link] Web Application
Seleccionar un proyecto vaco de Web Forms
Creamos la carpeta Paginas (Contendr las pginas web .aspx del proyecto) e Imgenes (Contendr las imgenes del
proyecto .jpg, .png, etc.) y Theme(Contendr los archivos de estilo .css)
Agregamos al proyecto una pgina maestra
Definir la estructura HTLM de la pgina maestra.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="[Link]"
Inherits="proyectoFinal._default" %>
<!DOCTYPE html>
<head>
<title>Proyecto Final </title>
<link href="Theme/[Link]" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="envoltura">
<div id="cabecera"></div>
<div id="menu">| link1 | link2 | link3 |</div>
<div id="centro">
<div id="izquierda">
...
</div>
<div id="derecha">
...
</div>
</div>
<div id="pie"> © 2013-2015 Todos los derechos reservados</div>
</div>
</form>
</body>
Agregamos una hoja de estilos para la pgina.
Configuramos el estilo para la pgina maestra
body
{
padding-right: 1%;
padding-left: 1%;
padding-bottom: 1%;
margin: 0%;
padding-top: 1%;
height: 98%;
background-color: #4d6267;
}
#envoltura
{
width: 700px;
margin: auto;
border: solid 1pt #000;
}
#cabecera
{
background-image: url(../Imagenes/[Link]);
width: 700px;
height: 246px;
clear: both;
float: none;
}
#menu
{
clear: both;
padding-right: 10px;
padding-left: 0%;
font-weight: bold;
font-size: 0.8em;
float: none;
background-image: url(../Imagenes/[Link]);
padding-bottom: 0%;
margin: 0%;
vertical-align: middle;
width: 690px;
color: #477897;
padding-top: 0.3em;
background-repeat: no-repeat;
font-family: Arial;
letter-spacing: 0.04em;
position: static;
height: 26px;
text-align: right;
}
#bodyArea
{
float: left;
width: 700px;
background-repeat: repeat-y;
background-color: white;
}
#izquierda
{
clear: left;
padding-right: 10px;
padding-left: 10px;
font-size: 0.7em;
float: left;
padding-bottom: 10px;
vertical-align: top;
width: 126px;
color: white;
padding-top: 10px;
font-family: Arial;
position: static;
text-align: center;
}
#derecha
{
clear: right;
padding-right: 10px;
padding-left: 10px;
font-size: 0.8em;
float: right;
padding-bottom: 10px;
vertical-align: top;
width: 530px;
color: #477897;
padding-top: 10px;
font-family: Arial;
position: static;
text-align: justify;
overflow: auto;
}
#pie
{
clear: both;
font-weight: bold;
font-size: 0.7em;
float: none;
background-image: url(../Imagenes/[Link]);
vertical-align: middle;
width: 700px;
color: #477897;
background-repeat: no-repeat;
font-family: Arial;
position: static;
height: 26px;
text-align: center;
}
.header
{
font-size: 1.3em;
float: left;
width: 100%;
color: #477897;
border-bottom: #477897 .13em solid;
font-family: Arial Black;
font-variant: small-caps;
}
Agregamos un archivo [Link] para el proyecto.
Configuramos el archivo [Link]
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="[Link] >
<siteMapNode url="" title="" description="">
<siteMapNode url="[Link]" title="Home" description="" />
<siteMapNode url="" title="Empresa" description="">
<siteMapNode url="~/Paginas/[Link]" title="Visin" description="" />
<siteMapNode url="~/Paginas/[Link]" title="Misin" description="" />
<siteMapNode url="~/Paginas/[Link]" title="Objetivos" description="" />
<siteMapNode url="~/Paginas/[Link]" title="Organigrama" description="" />
</siteMapNode>
<siteMapNode url="" title="Servicios" description="">
<siteMapNode url="~/Paginas/Productos [Link]" title="Productos Informticos"
description="" />
<siteMapNode url="~/Paginas/Instalacin de [Link]" title="Instalacin de Redes"
description="" />
<siteMapNode url="~/Paginas/Sistemas de [Link]" title="Sistemas de
Informacin" description="" />
<siteMapNode url="~/Paginas/Soporte [Link]" title="Soporte Tcnico"
description="" />
</siteMapNode>
<siteMapNode url="~/Paginas/[Link]" title="Mapa" description="" />
<siteMapNode url="~/Paginas/[Link]" title="Intranet" description="" />
<siteMapNode url="~/Paginas/[Link]" title="Contacto" description="" />
</siteMapNode>
</siteMap>
Creamos las paginas Web Form with master Page dentro de la capeta Paginas.
Agregamos los controles de navegacin a la pgina Master.
10
