Configurar sitio y páginas web

Tema 1. Entorno de trabajo en Adobe Dreamweaver CS6

1. Al ejecutar Adobe Dreamweaver CS6, la aplicación lanza un cuadro de diálogo para

que elija el tipo de entorno a trabajar, asimismo, en el avance del programa de
formación se va a utilizar el HTML, el cual permite visualizar los objetos en la página,
así como el código. Las opciones como ColdFusión, PHP, ASP, entre otras, permiten
el desarrollo de páginas dinámicas con lenguajes de programación.

Dé clic en
HTML para
iniciar.

2. Al entrar al espacio HTML, Adobe Dreamweaver CS6 presenta el espacio de trabajo

para el desarrollo de las páginas web, este consta de: barras de herramientas,
paneles y región editable.
 Barras de herramientas.

Región editable.

Paneles.

3. Descripción de elementos:
Barra de menús: contiene todas las opciones y comandos de Adobe Dreamweaver CS6
agrupados en repertorios desplegables.

Barra de aplicaciones: tiene las alternativas para elegir el tipo de región editable, las
extensiones, los widgets, los navegadores, así como la administración del sitio web (creación
y configuración).

El diseñador: permite seleccionar un entorno de trabajo predefinido (clásico, programador,

diseñador, entre otros).

El buscador: faculta examinar información en las ayudas de Adobe Dreamweaver CS6.

Barra vista de documento: muestra en tres formas diferentes la región editable (Código,
Dividir y Diseño) y también brinda navegabilidad entre las paginas abiertas.

Inspector de propiedades: permite ver y cambiar las propiedades del objeto seleccionado
en la página.

Barra estándar: presenta íconos que agilizan las acciones más utilizadas de los menús
Archivo y Edición.

Nota: las barras de herramientas se pueden activar o desactivar desde el menú Ver / Barras
de herramientas.
Paneles: dejan visualizar las propiedades y opciones de configuración de objetos de la
página, asimismo encuentra el administrador del sitio web. Con la tecla F4 activa y desactiva
el panel.
 Panel de
propiedades. Desplegar
opciones.

4. Vista código: permite visualizar el código HTML de la página.

Dé clic en Código.
5. Vista diseño: deja observar el diseño de la página con su elemento.

Haga clic en
Diseño.

6. Con las opciones de vistas de la barra de documento: Dividir y código en vivo, también
puede observar de manera paralela el diseño y el código HTML de la página.

Visualiza el diseño
y el código.
 Referencias

 Servicio Nacional de Aprendizaje, SENA. (2009). Diseño web con Adobe

Dreamweaver CS3. Colombia: Autor.

Control del documento

Nombre Cargo Dependencia Fecha

Centro de
Teleinformática y
Diciembre
José Geovanny Instructor Producción
de 2013
Angulo Imbachi Industrial. Regional
Cauca
Autor
Centro de
Teleinformática y
Guillermo Alexander Diciembre
Instructor Producción
Burgos Ibarra de 2013
Industrial. Regional
Cauca
Guionista - Centro
Rachman Bustillo Diciembre
Línea de Agroindustrial.
Martínez de 2013
Producción Regional Quindío
Adaptación Integración
Centro
Andrés Felipe de Diciembre
Agroindustrial.
Velandia Espitia Contenidos y de 2013
Regional Quindío
Actividades