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

Tutoriales web con ASP. NET en Visual Studio1

Tutoriales web con ASP. NET en Visual Studio1

Crear una pagina web no es algo tan complicado si tenemos las herramientas correctas y conocemos ciertas técnicas que nos pueden ayudar, en estos tutoriales mostraremos como hacer pagina webs, y a diferencia de las otros tutoriales, esto lo haremos mas directo y por pasos. Mostraremos una manera de expresar mas fácilmente los pasos.
“>” Si vemos este símbolo en una oración significa que se le hará clic a un dicho botón , o menú… Ejemplo.
¿Como crear una pagina web nueva en la herramienta de visual web developer?
“ Vamos al Menú “File” o “Inicio”> “New Website” o “Nueva Pagina web” “

Enlaces patrocinados:

Damos clic menú file, y luego vamos y damos clic a New Website, de esta manera podemos agilizar el proceso de enseñanza.

Nuestro objetivo es poder crear una pagina web lo mas similar a esta que se pueda. Por Lo tanto iniciemos.

Primero que todo debemos conocer la herramienta que usaremos. Visual Web Developer pueden descargarlo e instalarlo desde aquí. http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1AzurePack

Tutoriales web con ASP. NET en Visual Studio2

Tutoriales web con ASP. NET en Visual Studio2

Luego de instalarlo, nos encontraremos con esta página de inicio donde nos mostraran las opciones para abrir proyectos recientes.

Tutorial 1.0 Como Abrir una pagina web ya existente
Vamos a File o inicio>Open Web Site o Abrir Pagina Web > Luego vamos a la dirección y seleccionamos la carpeta donde esta ubicada la pagina web. Nota Debemos Seleccionar la carpeta, no los archivos dentro de ella, podemos hacer eso dándole un clic a la carpeta y luego a seleccionar, al hacer esto podemos seleccionar trabajar sobre todos los archivos de esta.

Tutorial 2.0 Como crear una nueva pagina web
File o Inicio> New Web Site>ASP.NET Web Site (Boton seleccionado por defecto)> Nombramos en la parte final de la linea de nombre

Tutoriales web con ASP. NET en Visual Studio3

Tutoriales web con ASP. NET en Visual Studio3

C:\Users\NombreDeUsuario\Documents\Visual Studio 2010\WebSites\WebSite20 (Remplazemos Esto por XBOX Website) > Procedemos a dar a ok.

Enlaces patrocinados:
Tutoriales web con ASP. NET en Visual Studio4

Tutoriales web con ASP. NET en Visual Studio4

Aquí vamos a mostrar cuales son los elementos que componen una pagina web y mayormente como funcionan… Primero Explicaremos el termino Master Page. Por dar una explicación corta y hábil, daremos un ejemplo. En una pasarela de modelaje varias modelos pasan a presentarse por un mismo estrado. La Master Page viene siendo la pasarela por donde van las modelos, Las Master Pages son la parte de la pagina web que por tradición no cambia, o se mantiene estática, Si vamos a Facebook, podemos ver que e logo de Facebook siempre se mantendrá en la parte superior izquierda por lo cual podemos ver que ese logo es parte de la Master Page.

Aquí podemos entonces introducir el segundo tema que es WebForms. ¿Qué es un webForm? Las webform son en resumen las modelos del ejemplo anterior, cada modelo a presentar viene siendo un webform. Las Master Pages pueden mostrar varios WebForms. Procedamos a identificar las web forms y Master Page de nuestra pagina web.

En la parte derecha de ASP.Net Visual Web Developer veremos una sección que hace relación alas diferentes partes de una pagina web. Los Archivos que terminan en “.aspx” como por ejemplo “Default.aspx” es un webform, ahora, incluyendo en cada webform puede haber una programación, los archivos aspx.cs presentan las programaciones de ese webform (Mas adelante explicaremos esto con mas detalles)

Y como podrán pensar, el archivo .master es sin duda la masterpage.

Tutorial 2.1 Como Agregar un webForm u otros objetos a nuestra pagina web.

Vamos al menú de solution explorer, donde podemos ver los diferentes objetos de la pagina web vamos a la primera opción, lo que actualmente debería decir “C:/…XboxWebSite” o “C:/…Nombre Insertado por Usted” le damos click izquierdo > add new webForm o añadir nuevo webForm>Insertamos un nombre teniendo en cuenta que debe terminar en .aspx y luego antes de presionar ok, demos click en la parte inferior derecha por arriba del botón ok, al cuadro que dice seleccionar Master Page.

Revise que el lenguaje sea C#, en la porción superior izquierda, en la sección donde da las opciones visual basic, o C# seleccionemos c# , luego que todo este bien vamos y damos al botón add, o añadir.

Tutorial 2.1.1 Como renombrar un webForm.
Luego de haber creado el webForm, demos click de menú(click derecho tradicionalmente ) >renombrar y ahora podemos poner el nombre que queramos, aquí mismo podemos eliminar,copiar, y mas opciones…
>Solution Explorer>site.Master(dar doble click para abrir)

Tutoriales web con ASP. NET en Visual Studio5

Tutoriales web con ASP. NET en Visual Studio5

Aquí se mostrara la porción de la pagina que se mantendrá, aun cuando se seleccione los demás webforms. Proximamente mostraremos una manera de cómo navegar entre webforms en nuestra pagina web.

Vamos y damos click en la parte de la pagina web que mostramos aquí. Este es el menú que nos permitirá a nosotros navegar entre los webforms. También llamado Menu de Navegacion. Al darle un click veremos como se sombrea y aparece próximo a este una flecha que es un botón que dara ciertas opciones que próximamente usaremos.

Tutorial 2.1.2 Como agregar mas opciones al Menú de Navegación, y el uso de redireccionar.

>Menu de Navegacin>Boton donde muestra mas opciones> Editar objetos del menú O Edite Menu Items.
Aquí aparecerá un cuadro. Que nos permitirá agregar mas opciones, llamados grupos, también grupos dentro de grupos llamado subgrupos, y por igual podemos eliminar

Tutoriales web con ASP. NET en Visual Studio6

Tutoriales web con ASP. NET en Visual Studio6

Demos click en la primera opción y veremos como se agrega un grupo, ahora démosle click al segundo botón añadiendo asi un subgrupo, y próximamente a la X para eliminar un subgrupo o un grupo… Ahora modifiquemos el menú transformándolo como en la próxima imagen mostrada.

Por cada grupo agregar 4 subgrupo. Al finalizar podemos pasar al punto b… Redirecionamiento.

Al dar un click en la porción que dice NavegacionDeUrl o NavigationURL demos un click al botón que tiene 3 puntos, este abrirá un cuadro donde te permitirá seleccionar a que objeto puede ser redireccinado.

Es decir, si seleccionamos el webForm Default.aspx pues aquí podemos ver que cuando corra la pagina web, al dar clic a ese botón del menú de navegación ira a ese webForm, al webForm Default.aspx, selecionemos este mismo luego damos ok.

Tutorial 2.1.3 Como probar la pagina web.

Tutoriales web con ASP. NET en Visual Studio7

Tutoriales web con ASP. NET en Visual Studio7

En la parte superior veremos un botón verde en forma de flecha, este correra la pagina web en un navegador, próximo a esto si es su primera ves corriendo la pagina web, aparecerá un botón de opción, acceda a este, presione el botón de ok, y vera la pagina correr, Proximo seleccione el botón en el menú de navegación y vera en funcionamente como la master page se queda estetica y pero vera como los webforms van a ir cambiando, luego de probar, de valla nuevamente a Visual web developer, y presione en la parte de arriba y precione el botón cuadrado azul, este detendrá el modo de prueba.

Tutoriales web con ASP. NET en Visual Studio8

Tutoriales web con ASP. NET en Visual Studio8

Con esto terminaremos lo que es nuestro primer tutorial de creación de pagina webs.

Caminogeeek.

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