Diseñando nuestra primera web

Diseñando nuestra primera página Web

Espero que el presente tutorial les sea de utilidad y les ayude en algo en su proceso de aprendizaje, si existe algún error les agradecería que me lo hagan saber igual que las consultas y sugerencias.

Creando la pagina master
1. Crearemos un nuevo sitio Web ASP, el cual en mi caso llevara como nombre “primeraPagina”

[pic]

[pic]2. Deberemos de eliminar el formulario Default.

3. Ahora deberemos agregar la página principal

[pic]

[pic]

4. Muy bien ahora vamos a definir lo que va a ser la plantilla de nuestra página, la forma de la pagina deberá de ser mas o menos así
[pic]

Seguro dirás eso es lo más fácil, bueno yo pensaba lo mismo a la hora que quise hacer esto sencillo agregue una tabla ysegún yo listo, pero el problema surgió a la hora de diseñar sobre las columnas (agregar controles, imágenes, etc.) un total problema nada se quedaba donde deseaba y peor si cambiaba el tamaño de alguna columna se me descuadraba todo… ¡Un caos total!, además de que debemos en lo posible usar muchas tablas y sobre todo en la pagina principal ya que afecta notablemente el rendimiento. Les recomiendoleer un poco sobre estándares para el diseño de páginas Web.

5. Muy bien ahora veamos el siguiente código:








Expliquemos poco a poco esto
• Primero tendremos un div principal el cual va a contener a toda la página el cual tendrá un ancho de 680px y altura automática, para que se muestre en el centro de la pantallautilizó margin-top:10; margin-left:auto; margin-right:auto" esto lo que hace es establecer el margen de nuestra página (existen páginas que se muestran bien a la izquierda o la derecha de nuestro monitor y no correctamente centradas).
• Encabezado y navegación esta claro, expliquemos lo demas, como podemos apreciar las columnas derecha e izquierda tienen un ancho de 140px cada una y heightesta en automático para que cambie de tamaño según nuestra necesidad y sin afectar la forma de nuestra página (usando tablas no encontre la forma de hacer eso), utilizo la propiedad float indicandole que se ubique a la izquierda(esto hace que se alineee teniendo como referencia a su vecino div)
• Bueno dicho esto el código explicado lo agregaremos dentro del form de nuestra página.
•Asp:contentPlaceHolder lo agregaremos dentro del div colCentral quedando todo así
[pic]

6. En modo de diseño haremos clic derecho sobre la columna central y elegiremos la opción agregar página de contenido, este paso se realizará para agregar el resto de páginas que se cargarán sobre la página master.
[pic]

7. Bueno con esto ya podríamos decir que tenemos el esqueleto de nuestrapágina master sobre el cual podemos empezar ya a trabajar, si se desea trabajar con otra forma distinta a la plantilla expuesta solo bastará con agregar o quitar controles div y modificar sus estilos para que se adecuen a nuestras necesidades.

Crear nuevos usuarios

Bueno ahora crearemos el formulario para crear nuevos usuarios para posteriormente hacer que usuarios autentificados naveguen ennuestro sitio.

Primero iremos a la página master y agregaremos una nueva página de contenido la cual llevará como nombre nuevoUsuario.

Para nuestro ejemplo crearemos una base de datos a la cual le pondremos primeraPagina, después crearemos una tabla con los siguientes campos
[pic]

Esta tabla llevara como nombre tbUsuarios.

Ahora sí podemos empezar.
1. Agreguemos los controles alformulario nuevoUsuario, deberá de quedar mas o menos así
[pic]

El diseño ya depende del gusto de cada uno.
Los controles llevaran el nombre según su función, por ejemplo para cédula iría txtCedula.
Los controles de los datos de los usuarios se encuentran contenidos en una tabla, para que el botón guardar se ubique al centro marque las dos columnas de su fila y le di clic...