LABORATORIO #10 Studio

Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.
Net Interactuando con Visual Studio
LABORATORIO N 10
Objetivos: Creacin de directorio virtual utilizando el Internet Information Server. Diseo de un Web site con direccin a un directorio virtual con Visual Studio.Net 2005. Interaccin con Adobe DreamWeaver CS 3. Diseo de la pagina web dentro del entorno de DreamWeaver. Utilizacin de CSS. Generar Cdigo desde visual Studio.Net 2005.
Prof.: Cueva Valverde Diego Alberto
diegoalberto_1987@hotmail.com
Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.Net Interactuando con Visual Studio
Crear Directorio Virtual

1. Crear una carpeta llamada ProyectoWeb en la unidad C. 2. Dar clic derecho sobre la carpeta ProyectoWeb y del men desplegable seleccionar la opcin Propiedades. 3. Del cuadro de dilogo Propiedades activar la ficha Uso compartido de Web.
4. Activar el botn de opcin Compartir esta carpeta. Aparecer un nuevo cuadro de dilogo Llamado Modificar alias.
5. En el cuadro de texto Alias digite el alias que desea utilizar para obtener acceso al directorio Web virtual. Use las mismas convenciones de nomenclatura que utiliza para los nombres de directorio. Digitar ProyectoWeb como nombre de alas.
a) Haga clic en el botn Aceptar. 6. Regresar al cuadro de dilogo Propiedades, haga clic en el botn Aceptar. Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
Visual Studio.Net 2005

1. Abrir el directorio virtual desde visual Net
2. Seleccionar IIS LOCAL, en el lado derecho seleccionar el Directorio Virtual llamado ProyectoWeb.
3. Hacer clic en el men Sito Web > Agregar Nuevo Elemento.
4. En el cuadro de Dialogo agregar nuevo elemento seleccionar Web Forms. 5. Asignar el nombre de planilla.aspx y luego hacer clic en Agregar.
6. Cerrar la Aplicacin creada en visual Studio.Net 2005.
Interaccin con Adobe DreamWeaver CS 3

1. 2. 3. 4. 5. Ingresar a DreamWeaver. Hacer clic en el men sitio nuevo Sitio. Seleccionar la Ficha Avanzadas. Dentro de Categora seleccionar Datos Locales. Nombre del Sitio: ProyectoWeb. Carpeta de Raz Local: C:\ ProyectoWeb Carpeta predeterminada de imgenes: C:\ ProyectoWeb\imgenes. Hacer clic en Aceptar para finalizar
6. Visualizar el panel Archivo 7. Hacer doble clic sobre la pagina llamada planilla.aspx
8. Ir a la vista cdigo de DreamWeaver Seleccionar etiqueta Div y asignarle como ID: el nombre de Fondo.
9. Hacer un clic en el men modificar > propiedades de la Pagina (Ctrl + J).
10.
Aparecer el cuadro de dialogo Propiedades de la Pagina. En tipo de fuente seleccionar Verdana. Tamao 10. Asignar un color de Texto. Asignar un color de Fondo.
11.
Seleccionar la Categora Vnculos y modificar las Propiedades: Fuente de Vinculo Courier New. Tamao 10. Color de Vinculo cualquier Color. Vinculo Visitados Cualquier Color.
12. Seleccionar la Etiqueta Div con el identificador de nombre Fondo.
13. Ir al panel Css y pulsar el botn Derecho del mouse sobre el panel y seleccionar la opcin Nuevo.
14. Aparecer un cuadro de dialogo de Nueva regla CSS. 15. Seleccionar en Definir en:( Nuevo archivo de hojas de estilos)
16. Aparecer un cuadro de dialogo donde nos pide guardara la hoja de estilo en este casa le asignaremos el nombre de Stilo.css
17. Estando el puntero situado dentro de la pagina hacer clic en el Men Insertar > Objetos de Diseo > Etiqueta Div.
18. Aparece el cuadro de dialogo llamado Insertar etiqueta Div 19. Se le asigna en el ID: contenedor.
20. Seleccionar la Etiqueta Div llamada Contenedor. 21. Pulsar el botn derecho del mouse en el panel CSS y seleccionar la opcin nuevo.
22. Aparecer el cuadro de dialogo llamado Nueva Regla CSS. 23. Tipo de Selector, seleccionar Avanzadas. 24. En Selector escribir #form1 #contenedor y luego aceptar.
25. Aparecer el cuadro de dialogo llamado Definicin de regla para #form1 #contenedor en stilo.css. 26. Asignar el tipo de fuente, el tamao y el color de texto.
27. Seleccionar la Categora fondo y asignar un color de fondo.
28. Seleccionar la categora Cuadrado y en el Alto asignar 100 pix.
29. Hacer clic debajo de la etiqueta Div llamada contenedor. 30. Hacer clic en el men Insertar > Objetos de Diseo > Etiqueta Div-
31. En el identificador de la etiqueta asignarle el nombre de izquierda
32. Seleccionar la etiqueta DIV llamada izquierda y luego pulsar en el botn derecho del mouse en el panel CSS y seleccionar la opcin Nuevo.
33. Aparecer el cuadro de dialogo Nueva regla CSS. 34. En la opcin selector escribir #form1 #izquierda y aceptar.
35. Aparecer el cuadro de dialogo llamado Definicin de regla para #form1 #izquierda en stilo.css. 36. Seleccionar el tipo de fuente, color y tamao. Prof.: Cueva Valverde Diego Alberto diegoalberto_1987@hotmail.com
37. Seleccionar la categora Fondo y asignar un color de fondo.
38. Seleccionar la categora cuadro en ancho asignar el valor de 250 pix. 39. En la opcin Flotar seleccionar Izquierda.
40. Hacer un clic en el lado derecho de la etiqueta Div llamada izquierda. 41. Luego hacer clic en el men Insertar > Objetos de Diseo > Etiqueta Div.
42. Asignarle el nombre de Cuerpo a dicha etiqueta.
43. Seleccionar la etiqueta Div llamada cuerpo y luego en el panel CSS pulsar el botn derecho del mouse y seleccionar la opcin nuevo.
44. Aparecer el cuadro de dialogo llamado Definicin de regla para #form1 #cuerpo en stilo.css. 45. Seleccionar el tipo de fuente, color y tamao.
46. Seleccionar la categora Fondo y asignar un color de fondo.
47. Seleccionar la categora cuadro en ancho asignar el valor de 600 pix. 48. En la opcin Flotar seleccionar Derecha y luego aceptar.
49. Seleccionar la etiqueta Div llamada fondo y luego en el panel CSS pulsar el botn derecho del mouse y seleccionar la opcin nuevo. 50. Aparecer el cuadro de dialogo llamado Definicin de regla para #form1 #fondo en stilo.css. 51. Seleccionar el tipo de fuente, color y tamao. 52. Seleccionar la categora cuadro en ancho asignar el valor de 900 pix.
53. Hacer un clic en el lado inferior de la etiqueta Div llamada izquierda. 54. Luego hacer clic en el men Insertar > Objetos de Diseo > Etiqueta Div. 55. Asignarle en el ID el nombre de Pie
56. Seleccionar la etiqueta DIV llamada pie y luego pulsar en el botn derecho del mouse en el panel CSS y seleccionar la opcin Nuevo 57. Aparecer el cuadro de dialogo Nueva regla CSS.
58. En la opcin selector escribir #form1 #pie y aceptar.
59. Aparecer el cuadro de dialogo llamado Definicin de regla para #form1 #pie en stilo.css. 60. Seleccionar el tipo de fuente, color y tamao. 61. Seleccionar la categora Fondo y asignar un color de fondo. 62. Seleccionar la categora cuadro en alto asignar el valor de 50 pix.
63. Visualizar la pagina
64. Seleccionar la etiqueta Div de nombre Izquierda. 65. Ir al men Insertar > HTML > Regla Horizontal.
66. Hacer los mismos para cada una de las Etiquetas DIV creadas en el formulario.
67. Cerrar la Aplicacin.
Generar Cdigo desde visual Studio.Net 2005

1. Abrir la aplicacin desde visual net 2005. 2. Dentro del explorador de soluciones hacer doble clic sobre la pgina llamada plantilla.aspx.
3. Como usted podr apreciar la pgina aparentemente no contiene ningn diseo. 4. Como usted podr observar la pgina esta dividida por reglas, las reglas hacen la divisin de la pgina. 5. Tambin muestra los identificadores de cada Etiqueta Div utilizada en la Diagramacin.
6. Ejecutar la aplicacin F5. 7. Aparecer un cuadro de dialogo donde se seleccionara aceptar, para generar el archivo web.config.
8. Como usted podr apreciar la pgina contiene el formato establecido en el editor DreamWeaver.
9. Agregar a la pgina el siguiente control, dentro del DIV: Cuerpo. GridView.
10. Pulsar el botn derecho del mouse sobre el control ingresado y seleccionar la opcin llamada Mostrar etiqueta inteligente.
11. En origen de Datos seleccionar Nuevo origen de datos.
12. Aparecer el asistente para la configuracin de orgenes de datos. 13. Asigne un nombre a la Conexin.
14. Hacer un clic en el botn nueva Conexin.
15. Aparecer el cuadro de dialogo Agregar conexin. 16. Asignar nombre de conexin. 17. Asignar el nombre de usuario y Contrasea de la base de datos. 18. Seleccionar la base de datos. 19. Probar conexin.
20. Aceptar la conexin. 21. Luego hacer un clic en aceptar. 22. Como usted podr apreciar se observa la cadena de conexin. 23. Hacer clic en el botn siguiente.
24. Hacer clic en siguiente.
Seleccionar la tabla y los campos que se va a trabajar.
25. Hacer clic en el botn avanzadas y en el cuadro de dialogo que aparece seleccionar: Generar instrucciones Insert, Update y Delete. Usar concurrencia optimista
26. Hacer clic en el botn consulta de prueba y como usted podr observar se visualiza la tabla y los campos seleccionados anteriormente.
27. Pulsar el botn derecho del mouse sobre el GridView y seleccionar la opcin Editar columnas.
28. Aparecer el cuadro de Dialogo Columnas donde se selecciona cada una de las columnas y se modifica en la propiedad HeaderText. Seleccionar la columna ShipperID > Cambiar por Cod
Seleccionar la columna CompanyName > Cambiar por Nombre de Compaa.
Seleccionar la columna Phone > Cambiar por Telfono.
29. Seleccionar las opciones: Habilitar Paginacin. Habilitar Ordenacin. Habilitar Edicin. Habilitar Eliminacin. Habilitar Seleccin.
30. Dar formato al GridView. 31. Ejecutar la pagina.
32. Probando los Nuevos Botones. 33. Hacer clic en el botn Editar de la segunda fila. 34. Modificar la segunda columna.
35. Al finalizar la edicin hacer Clic en el botn Actualizar.

LABORATORIO #10 Studio

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LABORATORIO #10 Studio

Uploaded by

Copyright:

Available Formats

Adobe DreamWeaver Cs 3 Acceso a Datos Utilizando ASP.

Net Interactuando con Visual Studio

Prof.: Cueva Valverde Diego Alberto

Crear Directorio Virtual

Prof.: Cueva Valverde Diego Alberto

Visual Studio.Net 2005

3. Hacer clic en el men Sito Web > Agregar Nuevo Elemento.

Prof.: Cueva Valverde Diego Alberto

6. Cerrar la Aplicacin creada en visual Studio.Net 2005.

Prof.: Cueva Valverde Diego Alberto

Interaccin con Adobe DreamWeaver CS 3

Prof.: Cueva Valverde Diego Alberto

9. Hacer un clic en el men modificar > propiedades de la Pagina (Ctrl + J).

Prof.: Cueva Valverde Diego Alberto

12. Seleccionar la Etiqueta Div con el identificador de nombre Fondo.

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

27. Seleccionar la Categora fondo y asignar un color de fondo.

28. Seleccionar la categora Cuadrado y en el Alto asignar 100 pix.

Prof.: Cueva Valverde Diego Alberto

31. En el identificador de la etiqueta asignarle el nombre de izquierda

Prof.: Cueva Valverde Diego Alberto

37. Seleccionar la categora Fondo y asignar un color de fondo.

Prof.: Cueva Valverde Diego Alberto

42. Asignarle el nombre de Cuerpo a dicha etiqueta.

Prof.: Cueva Valverde Diego Alberto

46. Seleccionar la categora Fondo y asignar un color de fondo.

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

58. En la opcin selector escribir #form1 #pie y aceptar.

Prof.: Cueva Valverde Diego Alberto

63. Visualizar la pagina

Prof.: Cueva Valverde Diego Alberto

67. Cerrar la Aplicacin.

Prof.: Cueva Valverde Diego Alberto

Generar Cdigo desde visual Studio.Net 2005

Prof.: Cueva Valverde Diego Alberto

9. Agregar a la pgina el siguiente control, dentro del DIV: Cuerpo. GridView.

Prof.: Cueva Valverde Diego Alberto

11. En origen de Datos seleccionar Nuevo origen de datos.

Prof.: Cueva Valverde Diego Alberto

14. Hacer un clic en el botn nueva Conexin.

Prof.: Cueva Valverde Diego Alberto

24. Hacer clic en siguiente.

Prof.: Cueva Valverde Diego Alberto

Seleccionar la tabla y los campos que se va a trabajar.

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

Seleccionar la columna CompanyName > Cambiar por Nombre de Compaa.

Seleccionar la columna Phone > Cambiar por Telfono.

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

30. Dar formato al GridView. 31. Ejecutar la pagina.

35. Al finalizar la edicin hacer Clic en el botn Actualizar.

Prof.: Cueva Valverde Diego Alberto

Prof.: Cueva Valverde Diego Alberto

You might also like