Diseño Web

con Adobe
Dreamweaver
material
de formación
Configurar el sitio web
 Adobe Dreamweaver

contiene permite crear

Entorno gráfico de trabajo Páginas web

compuesto por con lenguajes como

Herramientas

HTML CSS
para crear y editar

permite insertar permite dar estilo a

Componentes de la página web

Texto Imágenes Tablas Texto Imágenes Tablas

 Contenido

Introducción 4
1. Presentación 5
2. Entorno de trabajo 6
3. Configuración de un sitio web local 10
4. Formato de texto y propiedades 15
5. Imágenes 22
6. Manejo de tablas 25
Referencias bibliográficas 33
Control del documento 34
Introducción
En la actualidad, el diseño de las páginas web está basado en el dominio
de herramientas, como los lenguajes de programación: ya sea del lado del
servidor, encargado de interactuar con las bases de datos para el correcto
almacenamiento de la información; o del lado del cliente, los lenguajes
que permiten el contacto directo entre el usuario y la página web.

Los programadores que desarrollan en lenguajes del lado de los

servidores como PHP o Java son llamados desarrolladores back-end,
mientras que los programadores de la capa de presentación, son
denominados desarrolladores front-end. El software de diseño web Adobe
Dreamweaver ofrece gran cantidad de herramientas para cubrir las
necesidades de programadores en ambos campos (back-end – front-end).

En este material de formación se darán los primeros pasos para que el

aprendiz, de una manera dinámica, sepa configurar el entorno para la
creación del sitio web deseado, reconociendo la interfaz de trabajo y las
herramientas básicas de Adobe Dreamweaver.

4
1. Presentación
Adobe Dreamweaver es un programa para crear páginas web bajo
estándares establecidos por la World Wide Web Consortium, comunidad
internacional que genera estándares para garantizar la calidad de la World
Wide Web.

De otro lado, existen múltiples herramientas de interacción y de comunicación

sincrónicas y asincrónicas, como: wikis, blogs, chats y correo electrónico, que
hacen más dinámica la navegación en la web. Así, Adobe Dreamweaver
ofrece diferentes herramientas para crear sitios que se articulen con dichas
herramientas y permite hacer creaciones bajo plataformas Windows y MAC
sin variar la usabilidad de sus aplicaciones.

5
2. Entorno de trabajo

Ilustración 1. Espacio de trabajo de Adobe Dreamweaver.

Fuente: Adobe (2017).

Ilustración 1. Espacio de trabajo de Adobe Dreamweaver.

Fuente: Adobe (2017).

6
 C. Vista de código: esta vista
presenta el código generado al
agregar elementos en la Vista de
diseño.
El entorno de trabajo de Adobe Dreamweaver cuenta con las siguientes
herramientas:

A. Barra de aplicaciones: en esta barra está la pestaña de espacios de

trabajo, menús y otros controles de la aplicación.

B. Barra de herramientas documento: aquí se encuentran las

diferentes vistas de la ventana documento. Se observan los botones
Código, Dividir y En vivo. D. Vista en vivo: esta vista muestra
una representación muy real de la forma
del documento en un navegador y
posibilita interactuar con él del mismo
modo que lo hará el futuro usuario.

Ilustración 2. Vista en vivo.

Fuente: helpx.adobe.com.

7
 F. Paneles: posibilitan la supervisión y modificación del trabajo que
estamos realizando. Cuenta con las pestañas Archivos, Bibliotecas CC,
Insertar, Diseñador de CSS.

Ilustración 3. Ventana documento.

Fuente: Adobe (2017).

E. Espacio de trabajo: en esta pestaña se Ilustración 4. Vista de código.

Fuente: helpx.adobe.com.
puede cambiar el espacio de trabajo entre
desarrollador y estándar.

8
F. Paneles: posibilitan la supervisión y modificación del trabajo que
estamos realizando. Cuenta con las pestañas Archivos, Bibliotecas CC,
Insertar, Diseñador de CSS.

H. Selector de etiquetas: está ubicado en la barra de estado inferior de I. Barra de herramientas: está ubicada en la parte
la ventana Documento, y permite exponer la jerarquía de etiquetas que izquierda de la ventana de la aplicación, y contiene
rodea a la selección actual. botones específicos para cada vista, como se observa.

9
3. Configuración de un sitio web local

A diferencia de un sitio web remoto, alojado en la web, un sitio web local visualizar los objetos diseñados en la página y el código. En el desarrollo
contiene un conjunto de archivos (páginas, imágenes, sonido, videos y de este programa de formación se trabajarán documentos HTML, los
documentos) y carpetas referenciadas bajo un mismo nombre y se crea en cuales posibilitarán la creación de páginas web estáticas y la utilización de
un computador local. Ambos sitios cuentan con una estructura idéntica en hojas de estilo en cascada (CCS), las que ofrecerán una interfaz gráfica
los archivos, carpetas y subcarpetas. Así, cuando se culmina el diseño de mejorada de usuario.
la página web en el sitio local se sube al sitio remoto, para establecer una
dirección web que permita el acceso desde internet. Para crear un sitio, en la barra de aplicaciones se hace clic en el menú
Sitio y luego en el botón Nuevo sitio.
Para instaurar un sitio local es necesario crear una carpeta en el disco
duro del computador y en su interior crear subcarpetas para guardar
documentos, imágenes, videos y demás recursos para el sitio web.

Para identificar esto, se creará una carpeta en el disco duro con las siglas
de Dreamweaver CC: (DWCC).

C:/DWCC

Al ejecutar Adobe Dreamweaver, se despliega un cuadro de diálogo para

elegir el tipo de entorno a trabajar. Luego se selecciona el espacio de
trabajo Estándar haciendo clic en él. Este espacio de trabajo permite

10
Ahora digitamos el nombre del sitio, se especifica en la carpeta en la que
se guardará, en este caso la carpeta DWCC y se hace clic en el botón
Guardar.

Una vez creado el sitio web local, se observará en el panel Archivos.

11
Se hace clic en Archivo, luego en Nuevo > Nuevo documento > HTML y se
guarda como página de inicio con el nombre Index.html.

12
En el panel se puede observar el nuevo archivo guardado. Es necesario
que este tenga el nombre índex porque este es el asignado a la página
principal de cualquier proyecto y se cargará automáticamente al llamar al
sitio desde el navegador.

La vista En vivo posibilita observar en tiempo real las

modificaciones que se realizan en el código. Para ello, se
hace clic en Vista previa en tiempo real en la barra de
estado y se selecciona el navegador. Con la tecla F12,
también se puede acceder a la vista previa.

13
En caso de no mostrar la página en el navegador es necesario cambiar la
vista a Diseño, revisar los elementos del sitio y volver a la Vista previa.

14
4. Formato de texto y propiedades

Como una página web aloja texto, imágenes, videos, hipervínculos,

menús y objetos multimedia, Adobe Dreamweaver permite configurar y
modificar el título de la página, los colores de los hipervínculos y de fondo,
las fuentes tipográficas, el tamaño, el estilo de las hojas, entre otras
características.

El ícono para configurar el formato de texto se encuentra en el inspector

de propiedades. Para habilitar este inspector el documento debe tener un
contenido. Luego Se hace clic en la página índex y después en el menú
Ventana > Propiedades.

15
 Luego, se hace clic en el botón Propiedades de la página.
Se abre el cuadro de diálogo con las categorías y opciones
de configuración. En la alternativa apariencia (CSS) se
puede predeterminar todo lo relacionado con el texto,
margen, color e imagen de fondo.

16
En la categoría vínculos (CSS) se pueden ordenar las propiedades de los
hipervínculos, la fuente y los colores.

17
En la categoría Título/Codificación se configura el encabezado de la
página, el cual aparecerá en la barra del título del navegador.

18
El inspector de propiedades permite ver el formato y las características del
texto de dos maneras:

La opción HTML da formato básico al texto de la página, como: establecer

un párrafo, un título, una lista de elementos, el formato en negrita o en
cursiva o crear hipervínculos, subrayando el texto y haciendo clic en el
ícono Insertar enlace.

Ilustración 5. Ventana propiedades.

Fuente: SENA

Con la alternativa CSS se tiene acceso a otras opciones para el formato

del texto como el tamaño, el tipo de fuente tipográfica, el color y la
alineación.

Ilustración 6. Ventana propiedades.

Fuente: SENA

19
En esta imagen se muestra un texto sin formato en la página índex. Para
darle formato se debe seleccionar y abrir la ventana Propiedades. En la
sección de HTML se puede dar formato al texto como encabezado y
negrita.

Desde las propiedades en la sección

de CSS se puede elegir la fuente, la
alineación y el color del texto.

Ilustración 7 . Sección HTML de ventana

propiedades.
Fuente: SENA

20
 Desde las propiedades en la sección
de CSS se puede elegir la fuente, la
alineación y el color del texto.

Al finalizar la edición se deben

guardar los cambios.

Ilustración 8 . Sección HTML de ventana propiedades.

Fuente: SENA

21
5. Imágenes

Estas son muy importantes para asegurar que una página web sea
atractiva, dinámica y genere recordación en los usuarios que la visiten, por
ello Adobe Dreamweaver permite insertar imágenes, las cuales pueden ir
acompañadas de texto, efectos e hipervínculos en cualquier parte de la
página.

Para esto, primero se seleccionan las imágenes y se crea una subcarpeta

llamada Imágenes en la carpeta del sitio web local. Allí se guardarán las
ilustraciones a utilizar. Para insertarlas en cualquier proyecto, se
recomienda que el formato sea .PNG, .JPG o .GIF.

Ilustración 9 . Imagen en carpeta.

Fuente: SENA

22
Para insertar una imagen se debe ubicar el Para modificar las propiedades a la imagen, como el tamaño, es necesario
cursor en la parte de la página donde se requiere hacer clic sobre ella y luego en el menú Ventana > Propiedades.
y se hace clic en el menú Insertar > Imagen.

Ilustración 10 . Insertar Imagen en página web.

Fuente: SENA

Ilustración 11 . Habilitar propiedades de imagen.

Fuente: SENA

23
 De ese modo se habilitarán las propiedades
desde donde se podrá cambiar el tamaño o
insertar un hipervínculo.

Ilustración 12 . Ventana propiedades de imagen.

Fuente: SENA

Para alinear la imagen, basta con seleccionarla como

si fuera una línea de texto, hacer clic en el menú
Ventana > Propiedades y seleccionar Alinear.

Ilustración 13 . Alinear imagen en página.

Fuente: SENA

24
6. Manejo de tablas

Las tablas son un conjunto de filas (campos horizontales) y columnas Con la alternativa CSS se tiene acceso a otras opciones para el formato
(campos verticales), cuya intercepción es conocida como celda. En Adobe del texto como el tamaño, el tipo de fuente tipográfica, el color y la
Dreamweaver, las tablas pueden incluir diversos elementos como textos, alineación.
imágenes, hipervínculos, que pueden ser justificados y organizados según
el diseño.

Además, se pueden anidar las tablas (crear una tabla dentro de otra).
Aunque en la actualidad, se recomienda el uso de capas (div) para
organizar los elementos en páginas complejas.

Para conocer lo referente a las tablas, se inicia en el menú Insertar > Table
para introducir una tabla al proyecto.

Ilustración 15. Insertar tabla.

Fuente: SENA

Ilustración 14 . Menú Insertar.

Fuente: SENA

25
Filas y columnas: para indicar el número de filas y columnas de la tabla de Diseño. Luego se seleccionan las celdas a combinar y hacer clic en el
a dibujar. menú Edición > Tabla > Combinar celdas.

Ancho de tabla: valor entero que indica el ancho de la tabla en la página

y se puede expresar por píxeles (el valor se mantiene fijo) o por porcentaje
(el tamaño de la tabla varía según la resolución de la pantalla).

Grosor del borde: permite recibir un dígito entero para señalar el grosor
del borde de la tabla.

Relleno de celdas: por medio de un número en pixeles se indica la

distancia entre el borde y los elementos contenidos en las celdas.

Espacio entre celdas: acepta una cifra en píxeles para indicar la

distancia entre las celdas.

Texto: sirve para darle un título a la tabla.

Resumen: espacio donde se puede realizar una descripción del contenido

de la tabla.

Combinar celdas: para combinar las celdas es necesario estar en vista

26
A continuación, se observa que las columnas se combinaron.

Ilustración 16. Combinación de celdas.

Fuente: SENA

Otra forma de combinar las celdas es seleccionar las celdas, hacer clic
derecho sobre ellas y seguido clic en Tabla > Combinar celdas.

Ilustración 17. Clic derecho sobre tabla.

Fuente: SENA

27
A continuación, se observa que las columnas se combinaron.

Ilustración 18. Clic derecho sobre tabla.

Fuente: SENA

Insertar filas / columnas: se selecciona la fila /

columna donde desea realizar la inserción, hacer Ilustración 19. Clic derecho
sobre tabla.
clic derecho y seleccionar Insertar fila. Fuente: SENA

28
Eliminar filas / columnas: se seleccionan, clic derecho y clic en Eliminar
fila o columna.

Color de las celdas: se seleccionan, luego en el Inspector de

propiedades se elige el color de fondo a utilizar. Los colores pueden variar
en cada celda al igual que su contenido.

Ilustración 20. . Propiedades de tabla – color de fondo.

Fuente: SENA

29
Para centrar el contenido de las celdas, se debe seleccionar
el texto y luego en el Inspector de propiedades, en la opción
Horizontal, elegir la propiedad Centro.

Ilustración 21. Alineación horizontal del contenido de la tabla.

Fuente: SENA

30
En ocasiones los contenidos de las celdas requieren una ubicación
diferente a la que la aplicación brinda, por ejemplo, el nombre “María Clara
Sepúlveda” se encuentra en la parte baja de la columna y se requiere
situar en el centro. Para esto, se selecciona la celda, se habilita el
inspector de propiedades y en la opción Vertical, se hace clic en medio. De
esa manera se alinea el texto verticalmente.

Ilustración 22. Alinear contenido de tabla.

Fuente: SENA

31
Ilustración 23. Alineación vertical del contenido de la tabla.
Fuente: SENA

32
Referencias bibliográficas
Adobe (2017). El espacio de trabajo de Dreamweaver. Recuperado de
https://helpx.adobe.com/es/dreamweaver/using/dreamweaver-workflow-w
orkspace.html

Adobe (2017). Ayuda de Adobe Dreamweaver CC. Recuperado de

https://helpx.adobe.com/es/pdf/dreamweaver_reference.pdf

33
Control del documento
Nombre del documento: Material de formación: Configurar el sitio web

Nombre del programa de formación: Diseño Web con Adobe Dreamweaver

Versión: 1

Nombre Cargo Fecha

Jorge Eliécer Experto temático asignado al Equipo de

Adecuación Gráfica y Didáctica de Recursos Octubre
Elaboró Andrade Cruz de 2017
Educativos - SENA Regional Risaralda.

Primera Juliana Asesora pedagógica del Equipo de

Adecuación Gráfica y Didáctica de Recursos Octubre
revisión García Cardona de 2017
Educativos – SENA Regional Risaralda.

Guionista del Equipo de Adecuación Gráfica y

Segunda Sandra Milena Didáctica de Recursos Educativos - SENA Octubre
revisión Henao Melchor Regional Risaralda. de 2017

Andrés Felipe Líder del Equipo de Adecuación Gráfica y

Didáctica de Recursos Educativos - SENA Octubre
Aprobó Valencia Pimienta de 2017
Regional Risaralda.

34
ATRIBUCIÓN,
NO COMERCIAL,
COMPARTIR IGUAL.
Este material puede ser distribuido, copiado
y exhibido por terceros si se muestra en los
créditos. No se puede obtener ningún bene-
ficio comercial y las obras derivadas tienen
que estar bajo los mismos términos de li-
cencia que el trabajo original.

35