Serie de Tutoriales web con ASP. NET en Visual Studio (Parte 2)

Serie de Tutoriales web con ASP. NET en Visual Studio (Parte 2)

Enlaces patrocinados:
Tutoriales web con ASP. NET en Visual Studio 1

Tutoriales web con ASP. NET en Visual Studio 1

En este tutorial iniciaremos agregando imágenes y dándole forma a nuestra pagina web
Asegurémonos que el explorador tenga los objetos igual que los presentados en la siguiente imagen.

Debemos tener únicamente 2 websforms(default.aspx y about.aspx) si renombrados a pagPresentacion.aspx, y PagSecundaria.aspx. Vallamos a PagPresentacion.aspx. Eliminemos todo lo que esta adentro dejando la pagina en blanco. Demos Click sobre cada texto y luego dar a Eliminar en el teclado.

Tutoriales web con ASP. NET en Visual Studio2

Tutoriales web con ASP. NET en Visual Studio2

Tutoriales web con ASP. NET en Visual Studio3

Tutoriales web con ASP. NET en Visual Studio3

Ahora que nuestro webForm esta limpio podemos trabajarlos.

Tutoriales web con ASP. NET en Visual Studio4

Tutoriales web con ASP. NET en Visual Studio4

Tutorial 1.0 Crear tablas
Table>Insert table
Las tablas son cuadros con el cual podemos dar estructura a nuestra pagina web. Ejemplo.

Tutoriales web con ASP. NET en Visual Studio5

Tutoriales web con ASP. NET en Visual Studio5

En esta imagen cada cuadro esta rodeado por un color ojo oscuro, y cada uno de esos cuadros contiene una imagen. Trataremos de imitar esto por igual. Por lo tanto en Table>InsertTable

Tutoriales web con ASP. NET en Visual Studio6

Tutoriales web con ASP. NET en Visual Studio6

En Rows, pongamos un valor de 5 y en column un valor de 3. Esto significa que se agregaran 5 filas y 3 columnas.
Veremos cómo en nuestra página se agregaran las tablas. Demos click en la primera celda de la segunda columna.

Tutoriales web con ASP. NET en Visual Studio8

Tutoriales web con ASP. NET en Visual Studio8

Tutoriales web con ASP. NET en Visual Studio7

Tutoriales web con ASP. NET en Visual Studio7

Manteniendo presionado el botón de clickear, arrastremoslo hacia abajo seleccionando todas las celdas de esta columna, con excepción de la ultima.

Enlaces patrocinados:

Luego presionemos el botón de menú en el mouse (usualmente click derecho) y veremos varias opciones.

Modify>Merge Cells
Ahora veremos cómo estas celdas se han unido de esta manera tenemos el cuadro central de la pagina principal de Xbox

Tutoriales web con ASP. NET en Visual Studio9

Tutoriales web con ASP. NET en Visual Studio9

Tutoriales web con ASP. NET en Visual Studio10

Tutoriales web con ASP. NET en Visual Studio10

Ahora únicamente hay que darle el tamaño correspondiente.
Tutorial 2.0 Dar Tamaños a las tablas

Tutoriales web con ASP. NET en Visual Studio11

Tutoriales web con ASP. NET en Visual Studio11

Tutoriales web con ASP. NET en Visual Studio12

Tutoriales web con ASP. NET en Visual Studio12

Tutoriales web con ASP. NET en Visual Studio13

Tutoriales web con ASP. NET en Visual Studio13

Tutoriales web con ASP. NET en Visual Studio14

Tutoriales web con ASP. NET en Visual Studio14

Aquí en esta imagen no se muestra el mouse, sin embargo lo que debemos hacer es ir al borde inferior de la celda en la que acabamos de merger y cuando presionemos correctamente podremos ir viendo como cambia del tamaño e incluso, va a mostrar un numero indicando el tamaño correspondiente.

Extender hacia la izquierda arrastrando el borde izquierdo

Luego Extender a la derecha arrastrando el borde derecho

Ahora podemos ver como la cuarta fila esta más grande de lo normal, agaremos el borde inferior y arrastremos para arriba y tratemos de mantenerlo a un nivel asimétrico.
De la misma manera arrastrando las otras otras celdas para dar un diseño estético similar a la pagina de la Xbox

Tutoriales web con ASP. NET en Visual Studio15

Tutoriales web con ASP. NET en Visual Studio15

Tutoriales web con ASP. NET en Visual Studio16

Tutoriales web con ASP. NET en Visual Studio16

Tutoriales web con ASP. NET en Visual Studio17

Tutoriales web con ASP. NET en Visual Studio17

Tutoriales web con ASP. NET en Visual Studio18

Tutoriales web con ASP. NET en Visual Studio18

Hay que tener en cuenta de que es posible que algunas tablas se mueven junto a otras.
Luego de obtener el tamaño deseado de cada cuadro procedamos a insertar las imágenes

Tutorial 3 .0 Como insertar imágenes.
ToolBox>ImageBoton arrastremos a una de las celdas

Vallamos a las propiedades y busquemos donde estan los valores numéricos del tamaño de esta imagen, demos un valor de 150 de altura y 250 de ancho.
Repitamos este proceso con las próxima cuatro imagen.
Y para la imagen del centro demos un tamaño… 309 altura 305 de ancho
Dando como resultado el siguiente diseño.

Como eliminar una fila

Tutoriales web con ASP. NET en Visual Studio19

Tutoriales web con ASP. NET en Visual Studio19

Tutoriales web con ASP. NET en Visual Studio20

Tutoriales web con ASP. NET en Visual Studio20

Tutoriales web con ASP. NET en Visual Studio21

Tutoriales web con ASP. NET en Visual Studio21

Tutoriales web con ASP. NET en Visual Studio22

Tutoriales web con ASP. NET en Visual Studio22

Tutoriales web con ASP. NET en Visual Studio23

Tutoriales web con ASP. NET en Visual Studio23

Seleccionamos la fila completa, click derecho> delete>Delete Rows y se eliminar esta fila.
Por debajo de todo esto, v amos a gregar una fila mas, pero esta ves cuatro columnas.
Table>InsertTable>Rows 2 Columns 4

Fíjense, que esta pequeña tabla que hicimos no es parte de la tabla de arriba en esta tabla van a ir los siguientes estructura

Procedamos a darle forma Insertemos un imageboton en cada uno de los cuadros de laprimera fila Altura 66 x 246 ancho, 65 x 18, 63 x 206 y 61 x 252 respectivamen te de izquierda a derecha

Dando en esencia el presente resultado.
Ahora únicamente neceitamos es aprender a agregar las imágenes.
Antes de agregar las imágenes a la página web, debemos agregarlos como archivo.

Tutoriales web con ASP. NET en Visual Studio24

Tutoriales web con ASP. NET en Visual Studio24

Tutoriales web con ASP. NET en Visual Studio25

Tutoriales web con ASP. NET en Visual Studio25

Tutoriales web con ASP. NET en Visual Studio26

Tutoriales web con ASP. NET en Visual Studio26

Tutoriales web con ASP. NET en Visual Studio27

Tutoriales web con ASP. NET en Visual Studio27

Tutoriales web con ASP. NET en Visual Studio28

Tutoriales web con ASP. NET en Visual Studio28

Tutoriales web con ASP. NET en Visual Studio30

Tutoriales web con ASP. NET en Visual Studio30

Tutorial 4.0 Como agregar un folder e imágenes
>Solution Explorer>en la primera opción> (clic derecho)>New Folder
En ese mismo Folder, luego de que lo nombremos
>clic derecho >add existing ítem, o añadir archivo existente>ubicamos las imágenes y las seleccionamos.
Este tutorial tiene las imágenes autenticas de la pagina.

Recordemos cambiar el filtro a todo los archivos
Luego de que tenemos las imágenes agregadas

Podemos insertarla en la pagina web

Le damos a ok. Y podremos ver el resultado… Ahora procedamos a ponerle cada imagen a cada parte.

Para finalizar

Seleccionemos esta celda, en esta tabla

Vamos a sus propiedades y vamos a un campo “BgColor” seleccionemos el mismo botón de opciones multiples, mostrara unos colores, seleccionemos el negro.
O escribamos
#333333
Esto le dara un color. Ya en esta parte los que nos restaría es agregarle los textos.
En el próximo tutorial iniciaremos con la programación. Y terminaremos de dar mas colores a la pagina.

Caminogeek.

Enlaces patrocinados:

Leave a Reply

Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando estás dando consentimiento para la aceptación de las mismas y también de nuestra política de cookies. Pincha el enlace para mayor información.ACEPTAR

Aviso de cookies