Hola!! una ves mas intentando ayudar a todos aquellos que les gusta esto de la programacion, una vez mas con ASP.NET …

en esta oportunidad les mostrare como hacer una pagina web facil y rapido, como siempre lo digo, no será nada extravagante o profesional, solo algo que se vea bien y sencillo, tampoco hare conexiones con bases de datos ni validaciones ni nada de esas cosas porque la idea es solo crear un diseño sencillo con cosas basicas y depronto unas que otras no tan basicas, pero la idea es poder presentar algo agradablemente visible, en otros post haremos cosas mas avanzadas con conexiones y validaciones, pero en este caso solo sera diseñar una estructura estable, dinamica y sencilla, asi que comencemos…

primero creamos un sitio web vacio…

creamos una pagina maestra a la que llamaremos MiPagina.master

<%@MasterLanguage=”VB”CodeFile=”MiPagina.master.vb”Inherits=”MiPagina” %>

<!DOCTYPEhtmlPUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<htmlxmlns=”http://www.w3.org/1999/xhtml”>

<headrunat=”server”>

<title></title>

<asp:ContentPlaceHolderid=”head”runat=”server”>

</asp:ContentPlaceHolder>

</head>

<body>

<formid=”form1″runat=”server”>

<div>

<asp:ContentPlaceHolderid=”ContentPlaceHolder1″runat=”server”>

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

No voy a explicar todo el código porke la idea no es dar clases de html ni de asp.net asi que solo dire lo necesario asi ke empecemos…

Solo usaremos 2 secciones para este ejemplo…la primera es el código que se encuentra dentro de las etiquetas <head> …</head> y lo que se encuentra dentro de las etiquetas <body> … </body>

Las etiquetas “head” en este momento nos permitirán agregarle un titulo a la pagina, este titulo aparecerá en la parte superior de nuestro navegador o en las pestañas del mismo…asi que escribamos un titulo para nuestra pagina, para hacerlo usaremos las etiquetas <title></title>…

<head runat=”server”>

<title>Takumi Project</title>

<asp:ContentPlaceHolder id=”head” runat=”server”>

</asp:ContentPlaceHolder>

</head>

Después de haber colocado nuestro titulo, nos dirigimos a las etiquetas <body> … </body> aquí comenzaremos a agregarle algunas cosillas a nuestra pagina…

Notaremos que dentro de las etiquetas “body” existen otras etiquetas…ubicaremos las etiquetas <form> … </form>, dentro de ellas ya existen dos etiquetas con el nombre “div” y “asp:ContentPlaceHolder” mas adelante sabremos para que sirve esta ultima…, primero crearemos espacios (o divisiones…) en nuestra pagina maestra… para esto usaremos las etiquetas DIV, creemos 3 divisiones asi….

<body>

<form id=”form1″ runat=”server”>

<div>

</div>

<div>

</div>

<div>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div>

</div>

</form>

</body>



Dos de las etiquetas creadas estan sobre el DIV con la etiqueta del contentplace holder y una ultima debajo del content place holder. Ahora para poder diferenciar cada uno de los div, les pondremos un nombre…

<body>

<form id=”form1″ runat=”server”>

<div id=”header”>

</div>

<div id=”navMenu”>

</div>

<div id=”content”>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div id=”footer”>

</div>

</form>

</body>



Ahora comenzaremos a agregar agunos controles a nuestra pagina para que valla cogiendo forma primero agreguemos una imagen para nuestro encabezado…

Usamos el control llamado “Imagen” y lo agregamos dentro de nuesta división llamada “header” asi:

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” />

</div>



Luego crearemos un menú de navegación para nuestra pagina, lo haremos en la división llamda “navmenu” en este caso usare 5 labels…

<div id=”navMenu”>

<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label2″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label3″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label4″ runat=”server” Text=”Label”></asp:Label>

<asp:Label ID=”Label5″ runat=”server” Text=”Label”></asp:Label>

</div>

Y en nuesta división llamada “footer” agregaremos un label mas asi:

<div id=”footer”>

<asp:Label ID=”Label6″ runat=”server” Text=”Label”></asp:Label>

</div>



Quedaría algo asi como esto:

<body>

<form id=”form1″ runat=”server”>

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” />

</div>



<div id=”navMenu”>

<asp:Label ID=”menu1″ runat=”server” Text=”Opcion1″></asp:Label>

<asp:Label ID=”menu2″ runat=”server” Text=”Opcion2″></asp:Label>

<asp:Label ID=”menu3″ runat=”server” Text=”Opcion3″></asp:Label>

<asp:Label ID=”menu4″ runat=”server” Text=”Opcion4″></asp:Label>

<asp:Label ID=”menu5″ runat=”server” Text=”Opcion5″></asp:Label>

</div>

<div id=”content”>

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>

</asp:ContentPlaceHolder>

</div>

<div id=”footer”>

<asp:Label ID=”mensaje” runat=”server”>Takumi project 2012. Todos los derechos reservados</asp:Label>

</div>

</form>

</body>



Si intentamos ver nuestra pagina desde un navegador web en este momento, se nos presentara un error como este:

Como hacer una pagina web, desde cero, rápido y fácil

Esto es porque aun no hemos creado un contenido para nuestra pagina, lo que hemos hecho hasta el momento es crear una estructura. Para contenido a nuestra pagina comenzaremos agregando un webform (.aspx)

diseño

Es muy importante que al crear nuestro webform en este caso Defaul.aspx, marquemos la opción “Seleccionar pagina maestra”. La idea es crear una pagina que contenga la información que queremos mostrar dentro de la estructura que hicimos en nuestra pagina maestra, al crear nuestro webform, nos preguntara cual es nuestro archivo de pagina maestra al cual queremos enlazar nuestra pagina, como solo tenemos una pagina maestra, solo nos saldrá esa.. la escogemos y aceptamos.

web

Nos aparecerá nuestra nueva pagina con el siguiente código:

<%@ Page Title=”" Language=”VB” MasterPageFile=”~/MiPagina.master” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” Runat=”Server”>

</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>

</asp:Content>



Como será una pagina de contenido, seguiremos trabajando con ella luego. Si queremos ver como se ve nuestra pagina, ahora podemos hacerlo ya que heos creado una pagina para nuestro contenido. Asi luce nuestra pagina en este momento:

Microsoft

SI! Aunque no lo creas con todo lo que hemos hecho hasta el momento, esto es lo único que hemos hecho jejejejeje, si si si ya se, eso no parece en nada una pagina web, pero no te desesperes, hemos hecho mas de la mitad del trabajo, AUNQUE NO LO CREAS! Jejeje ya te deras cuenta por que… pero para que no te desesperes, comencemos a darle forma, ya veras que es solo cuestión de “ubicación” y unos cuantos colores….

Primero que todo, escojamos una imagen para nuestro encabezado, la agregaremos al proyecto

.net

Para asignar nuesta imagen a nuestro control “Image” simplemente le agregamos el atributo “ImageUrl”

<div id=”header”>

<asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/banner.png” />

</div>



Si visualizamos nuestra pagina en el navegador se vera algo como esto….

asp

Mucho mejor cierto??? Que??? Noo??? Que le falta mas color dices??? Ok..hagamos algo de magia!

Vallamos a nuestro proyecto y agreguemos un nuevo elemento, y escogemos “hoja de estilos”, este es un archivo con extensión .css (StyleSheet.css), yo lo renombre y lo deje como “Style.css”

Inicialmente tendrá solo este valor:

body {

}



Es aquí donde empieza toda la magia… ahora veras el porque le dimos nombres a las divisiones



Editaremos lo que esta escrito en nuesta hoja de estilos, como su nombre lo dice, este elemento nos sirve para estilizar nuestra pagina, es decir, dejarla tal cual como queremos, ya veras a que me refiero…. Primero que nada agregaremos las siguientes líneas a nuestra hoja de estilos…

body

{

background-color: #C0C0C0;

}

Esto agregara un fondo gris a nuestra pagina web…

#form1

{

width: 800px;

background-color: #333333;

margin: 20px auto;

}

Con esto nuestra pagina se vera de un color gris oscuro (mas oscuro que el fondo…)

#navMenu

{

font-family: ‘Buxton Sketch’;

font-size: large;

color: #FFFFFF;

text-align:center;

padding-top:5px;

padding-bottom:5px;

}



Este código centrara nuestro menú de navegación y le asignara el color blanco a las letras de nuestros labels (también le cambia el tipo de letra )

#menu1, #menu2, #menu3, #menu4, #menu5

{

padding: 2px 10px 2px 10px;

cursor:pointer;

}



Con esto, hacemos parecer a nuestros labels como unos botones es decir, ke cambie el puntero del mouse cuando pase sobre ellos….

#content

{

background-color: #FFFFFF;

padding: 20px 30px;

}



Esto coloca un fondo blanco en el contenido de nuestra pagina

#footer

{

text-align: center;

color: #FFFFFF;

font-size: small;

padding: 30px 10px;

}



Con esto alineamos al centro el texto de nuestro pie de pagina y le reducimos el tañamo a la letra…

.Selected

{

background-color: #808080;

}



.notSelected

{

background-color: #333333;

}



Y con estos 2 ultimos lo que haremos es cambiar el color del contorno de nuestros labels cuando el mopuse pase sobre ellos….(como si fuesen botones!!!)

Para que esto ultimo funcione debemos agregar 2 propiedades a cada uno de nuestros labels…una llamada “OnMouseOver” y la otra “OnMouseOut”, de esta manera:

<div id=”navMenu”>

<asp:Label ID=”menu1″ runat=”server” Text=”Opcion1″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu2″ runat=”server” Text=”Opcion2″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu3″ runat=”server” Text=”Opcion3″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu4″ runat=”server” Text=”Opcion4″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

<asp:Label ID=”menu5″ runat=”server” Text=”Opcion5″ onMouseOver=”this.className=’Selected’” onMouseOut=”this.className=’notSelected’”></asp:Label>

</div>



Recuerdas como se veía nuestra pagina hace un rato?? Dale!! Intenta de nuevo y veras como “fluye la magia…… TARAN!!!!!!” jajajajajaja

Se ve muy diferente cierto??? Ya tiene mas aspecto de pagina web! Ahora solo nos queda añadir algún contenido.

Y para agregar enlaces a los labels (para que los redireccionen a otras paginas solo agregan la propiedad de OnClick y en el código de la pagina crean un evento de redirección. Ej:

Public sub NextPage(s as object, e as System.EventArgs)

Response.Redirect(“OtraPagina.aspx”)

End Sub

Y la propiedad quedaria asi: OnClick=”NextPage”

Eso es todo chicos!!! Espero lo hayan disfrutado, es un tuto bien básico (aunque con algunos temillas algo avanzaditos) pero intente hacerlo lo mas fácil posible, espero me hayan entendido bien , hasta la próxima

Para ver como quedaria pueden visitar este enlace:

http://aspspider.ws/xxTakumixx/