Tutorial Adobe Dreamweaver CS6

EMPEZANDO

Este tutorial se centra en los pasos básicos necesarios para crear un sitio web atractivo y
funcional. Al usar este tutorial, aprenderá a diseñar un diseño de sitio, insertar imágenes y texto,
crear vínculos y cómo subir su sitio a Internet. Este tutorial ofrece información para usuarios de
Mac y PC.

TABLA DE CONTENIDOS

En este tutorial usted aprenderá lo siguiente:

1. ACTIVANDO TU WEBSPACE Pg. 3

2. EMPEZANDO Pg. 4

3. CREANDO UNA PAGINA HOME Pg. 7

4. DISEÑANDO Y DIMENSIONANDO Pg. 8

5. INSERTANDO Y USANDO TABLAS Pg. 9

6. ADICIONANDO ELEMENTOS DE DISEÑO Pg. 12

7. VISTA PREVIA EN EL NAVEGADOR Pg. 13

8. CREATING HYPERLINKS CREANDO HIPERVINCULOS Pg. 14

9. INSERTANDO SPECIAL MEDIA Pg. 16

10. CARGANDO TU SITIO Pg. 18

2
 1. ACTIVANDO TU ESPACIO WEB
Antes de empezar, es importante que tenga un sitio donde cargar su sitio Web cuando se complete.
Para activar tu espacio web personal, ya sea:

1. Visite el Centro de Soporte Tecnológico (TSC), ubicado en el 110 Hayes Hall, y solicite un espacio
web personal.

2. Pregunte a su instructor (si el proyecto es para el trabajo de clase) sobre cómo configurar un espacio
de servidor ClassWorks para su clase.

La información acerca de de la aplicación para un sitio web personal la puede encontrar en:
http://www.bgsu.edu/its/tsc/self-help/page9436.html

3
 2. COMENZANDO
CREANDO SU SITIO WEB LOCAL
Para crear y mantener un sitio web organizado, es necesario establecer una jerarquía de carpetas que contengan
todos los elementos de la página web. De los componentes que componen su sitio. Esta carpeta se llama su
carpeta raíz local. Esta carpeta es importante porque es donde Dreamweaver busca todos sus archivos.

Para crear una carpeta raíz, siga estos pasos:

1. Cree una nueva carpeta en su escritorio. En un Mac, haga clic en Archivo> Nueva carpeta. En un PC, haga clic
con el botón derecho del ratón y seleccione Nueva carpeta.

2. Dé a la carpeta un nombre breve, pero descriptivo. No utilice letras mayúsculas, espacios ni caracteres
especiales al nombrar carpetas y archivos para su sitio web. Todas sus páginas se guardarán dentro de esta
carpeta.

3. Abra la carpeta y cree otra carpeta nueva dentro. Nombre esta carpeta "imágenes" (asegúrese de que el
nombre del archivo es minúscula). Coloque todas las imágenes, botones, archivos de película, etc. dentro de la
carpeta de imágenes.

NOTA: Asegúrese de que todas sus páginas e imágenes se guardan en su carpeta de ruteado, o no aparecerán el
siguiente día en que se abre su sitio web.

GESTIONAR SUS SITIOS

1. Comience abriendo Adobe Dreamweaver CS6.

En un PC, haga clic en Inicio> Programas> Adobe> Dreamweaver CS6, o haga clic en el acceso directo de
Dreamweaver en el escritorio.

En un Mac, haga clic en Macintosh HD> Aplicaciones> Adobe Dreamweaver CS6, o haga clic en el icono de
Dreamweaver en el Dock. (Figura 3)

Figure 3. Navegando en la aplicación de Dreamweaver CS5 de un Mac

4
 2. COMENZANDO CONT.
El paso más importante que debe realizar cada vez que inicie Dreamweaver CS6 es definir sus Info
locales. La carpeta raíz local es el nombre de la carpeta donde almacena todo el contenido de su sitio
web.

Para definir un sitio, siga estos pasos:

1. Haga clic en Sitio> Administrar sitios.

2. Haga clic en Nuevo> Sitio.

3. Seleccione la pestaña Sitio.

4. Escriba un nombre para el sitio en el campo de texto Nombre del sitio (Este nombre será para su
uso solamente - no se publicará con su sitio.)

5. Haga clic en el icono de carpeta pequeña situado junto al campo de texto Carpeta de sitio local. Vaya
a la carpeta raíz que creó anteriormente en el tutorial. Una vez que haya localizado la carpeta, haga clic
en el botón Elegir.

6. Seleccione la pestaña Configuración avanzada.

7. Haga clic en el icono de carpeta pequeña situado junto al campo de texto Carpeta de imágenes
predeterminadas (Figura 4). Vaya a la carpeta de imágenes que creó anteriormente en el tutorial. Una
vez que haya localizado la carpeta, haga clic en el botón Elegir.

Figure 3. Selección de la carpeta de imágenes predeterminada en Dreamweaver CS6 en un Mac.

5
 2. COMENZANDO CONT.
A continuación, cada vez que inicie Dreamweaver, debe definir su Información remota. La ficha Información
remota se utiliza para indicar a Dreamweaver dónde colocar los archivos cuando esté listo para subirlos a la
Web. Si está utilizando el espacio de servidor personal de BGSU, use el diagrama de abajo (Figura 5) para
llenar la información. (Si está utilizando cualquier otro servidor necesitará conocer el nombre de host.)
Para definir la información remota, haga lo siguiente:

1. Haga clic en la pestaña Servidor (Figura 5) ubicada en el lado izquierdo de la barra de herramientas.
2. Para agregar un servidor, haga clic en el símbolo + de la esquina inferior izquierda de la ventana.
3. Escriba personal.bgsu.edu para dirección FTP.
4. Escriba public_html para el directorio de Host.
5. Escriba su nombre de usuario de correo web para el nombre de usuario.
6. Escriba su contraseña de correo web para contraseña.
7. Asegúrese de que la opción Usar FTP pasivo (si no está visible, haga clic en la casilla Más opciones hacia la
parte inferior) está marcada.
8. Haga clic en Probar para asegurarse de que se conecta al servidor correctamente.

Figure 5. Configurando el servidor remoto en Dreamweaver CS6 en Mac

6
 3. CREANDO UNA PAGINA HOME
Para crear una página Web, siga estas directrices:

1. Para agregar una nueva página, vaya a Archivo> Nuevo y elija una página HTML básica. Guarde esta
página haciendo clic en Archivo> Guardar como. Nombre de la primera página index.html. Esta será la
primera página que los usuarios encuentran cuando visitan su sitio. Guarde este archivo en su carpeta raíz
local como index.html. Nombrar la página de inicio index.html le dice al navegador Web que ésta es la
primera página que debe abrir cuando alguien visita su sitio.

2. Después de crear su página de inicio index.html, puede utilizar esta página como un diseño de plantilla
para todas las otras páginas de su sitio. Simplemente pulse Guardar como y nombre el archivo lo que desee,
pero asegúrese de mantener el nombre es simple, por ejemplo history.html, resume.html, etc Recuerde no
utilizar mayúsculas o espacios al nombrar los archivos, esto lo hará Más fácil para los navegadores web para
encontrar sus archivos.

3. Para guardar las páginas de su sitio, haga clic en Archivo> Guardar para cada página. Asegúrese de que su
página de inicio se denomina index.html y guarde todos sus archivos en la carpeta que eligió al definir su
sitio, es decir, en su carpeta raíz local.

NOTA: Este proceso guardará sus archivos en su sitio local. Puede transferir cada archivo por separado al
sitio remoto o transferir todo el sitio una vez que haya terminado de trabajar en él.

7
 4. DISEÑANDO Y DIMENSIONANDO

Incluso si está creando sólo un sitio web simple, debe empezar por esbozar el diseño de su sitio.
Decida dónde desea que aparezcan títulos, imágenes, botones de navegación y texto en la pantalla.

La mayoría de los sitios web tienen las mismas características de diseño en cada página. Por ejemplo, los
títulos de sitios web suelen estar en la parte superior izquierda o en la parte superior central, mientras que
los botones de navegación generalmente aparecen verticalmente a la izquierda u horizontalmente debajo
del título. Además de esbozar un diseño para cada página, debe determinar cuántas páginas necesitará para
el sitio web. Planificación completa es esencial para un buen diseño web.

Para que el texto, los botones de navegación y las imágenes aparezcan donde desee en la página Web; Es
necesario utilizar tablas para dar formato al contenido de cada página. Todo en cada página de su sitio web
debe encajar dentro de una gran mesa.

Utilizando los bocetos de diseño, puede determinar qué aspecto tiene su tabla. La Figura 5 muestra un
simple esquema de diseño. La Figura 6 muestra el mismo diseño, con bordes de tabla dibujados. La Figura 7
muestra cómo se puede implementar la tabla en Dreamweaver.

Ahora, simplemente cree una tabla en Dreamweaver que tenga las mismas características que los bordes
dibujados en la página. El siguiente capítulo le enseñará cómo insertar su tabla.

Figure 5: Simple layout sketch Figure 6: Simple layout sketch with borders

8
 5. INSERTANDO Y USANDO TABLAS

POR QUÉ USAR TABLAS

Las tablas le ayudan a dividir el espacio en su página. Son similares a las tablas en Word o Excel, pero
pueden utilizarse de manera mucho más flexible. Las tablas le dan la opción de hacer que su página tenga un
tamaño fijo o que se ajuste a la ventana del usuario lo mejor que pueda. Las tablas también garantizan que la
ubicación de su texto e imágenes no cambia cuando se ve en la pantalla con diferentes resoluciones o en
diferentes navegadores web.

CÓMO INSERTAR UNA TABLA

1. Para insertar una tabla, siga estos pasos:

2. En el menú principal, haga clic en Insertar> Tabla.
3. Inserte la cantidad de filas de tabla y columnas (Figura 7).
4. Establezca Ancho de tabla entre 600 y 800 píxeles.
5. Ajuste el espesor de la frontera. Para tener un tipo de borde visible en 1 o superior, no tener ningún tipo
de borde en 0.
6. Cell Padding agrega espacio dentro de una celda. Introduzca 0 para no espacio o un número para
aumentar el espacio.
7. Espaciado de celdas agrega espacio entre celdas. Introduzca 0 para no espacio o un número para
aumentar el espacio.
8. Haga clic en Aceptar.

Figure 7: Vista de la tabla 9

 5. INSERTANDO Y USANDO CONT. DE LA TABLA.
PROPIEDADES DE LAS TABLAS

Si hace clic en uno de los bordes de la tabla, puede ver las propiedades de la tabla en la ventana
Propiedades.

Figure 8: Ventana propiedades de tabla

En la parte superior de esta ventana (Figura 8) puede:

• Dar Nombre a su tabla

• Cambiar el número de filas y columnas de la tabla
• Cambiar el ancho y la altura de la tabla
• Uso de porcentaje: esto hará que la tabla se expanda y se contraiga a medida que el usuario cambia el
tamaño de la ventana
• Uso de píxeles: esto hará que la tabla tenga un número de píxeles determinado sin importar el tamaño de
la ventana del usuario (hay 72 píxeles / pulgada)
• Cambiar la almohadilla de celda: es el número de píxeles que se encuentran entre el borde de las celdas y
el contenido de las celdas
• Cambiar el espacio de celda: este es el número de píxeles que se encuentran entre los bordes de cada
celda
• Cambiar la alineación: esta es la posición de la tabla en el borde izquierdo o derecho, o en el centro de la
página
• Cambiar el borde: este es el número de píxeles que forman el grosor de los bordes de la celda

En la sección inferior de esta ventana (Figura 8) puede:

• Borrar y convertir los anchos y alturas de las tablas

• Cambiar el color de fondo de toda la tabla
• Insertar una imagen de fondo para toda la tabla
• Cambiar el color del borde

10
 5. INSERTANDO Y USANDO CONT. TABLAS
PROPIEDADES DE LAS CELDAS

Una vez establecidas las propiedades de la tabla, también puede ajustar las propiedades de las celdas
individuales dentro de la tabla haciendo clic dentro de la celda (Figura 9).
En la parte superior de esta ventana puede formatear el texto dentro de la celda de la tabla. En la parte
inferior de esta ventana puede:
• Combinar y dividir celdas (esto se explicará en la sección de diseño).
• Cambie la alineación del contenido horizontal y verticalmente.
• Cambiar el ancho y la altura de la celda (solo los números representan píxeles, agregue un signo de
porcentaje para que la celda tenga un cierto porcentaje de la tabla entera).
• Utilice Wrap.
• Insertar el encabezado;
• Insertar una imagen de fondo para la celda individual.
• Cambiar el color de fondo de la celda individual.
• Cambiar el color del borde para la celda individual.

Figure 9: Table Format window

Here is an example of a page with a background color selected for the page, for each table, and for
some specific cells in each table (Figure 10).

Figure 10: Color de Fondo, color de Tabla, color de celda

11
 6. AÑADIENDO ELEMENTOS DE DISEÑO
AÑADIR TEXTO

Para insertar texto simplemente haga clic dentro de una celda e ingrese su contenido. Al hacer clic en
Enter, Dreamweaver agrega automáticamente el espaciado de párrafos. Para agregar un espacio de línea,
haga clic en Mayús + Entrar.

INSERCIÓN DE IMÁGENES

Para insertar una imagen, siga estos pasos:

1. Haga clic en la celda donde desea que aparezca la imagen.

2. Haga clic en Insertar> Imagen.

3. Localice la imagen que desea insertar

NOTA: Todas las imágenes deben guardarse en la carpeta "Imágenes" que estableció al iniciar.

4. Haga clic en Elegir para insertar la imagen.

Haga clic en la imagen para ver sus propiedades en la ventana Inspector de propiedades de imagen (Figura
11).

Figure 10: Ventana Inspector propiedades de Imagen

FORMATEAR PROPIEDADES DE PÁGINA

Para cambiar el color de fondo de sus páginas u otras propiedades generales de su sitio web, vaya a
Modificar> Propiedades de la página. Aquí, en la ventana Propiedades de la página, puede establecer la
fuente predeterminada, el tamaño del texto, el color del texto y el fondo de todas sus páginas (Figura 12).

12
 6. AÑADIENDO CONT. ELEMENTOS DE DISEÑO

Figure 12: Ventana de la página de propiedades

7. VISTA PREVIA EN EL NAVEGADOR

PARA VISUALIZAR EN UN NAVEGADOR

Puede obtener una vista previa de sus páginas web en un navegador de muchas maneras:

1. Elija Archivo> Vista previa en el Navegador.

2. Pulse F12.
3. Haga clic en el icono de mundo situado en la barra de herramientas en la parte superior de su página
(Figura 13).

Figure 13: Vista previa en el Menú del navegador

13
 8. CREANDO HYPERVINCULOS
Un hipervínculo o enlace es un objeto o texto que, al hacer clic, lleva a los usuarios a otra página web o
abre un archivo. A continuación se explican los distintos tipos de hipervínculos.

ENLACES INTERNOS

Los enlaces internos se utilizan para conectar usuarios a otras páginas dentro del mismo sitio web. Antes
de vincular a otras páginas, debe asegurarse de que las otras páginas se guardan en la carpeta raíz local y
contienen la extensión de archivo .htm o .html.

Para crear un vínculo interno, siga estos pasos:

1. Seleccione el texto o la imagen que desea hacer un hipervínculo.

2. Haga clic en la carpeta pequeña situada junto al campo Vincular en el Inspector de propiedades (Fig. 19
y 20).
3. Examine los archivos y seleccione la página que desea vincular.
4. Haga clic en Elegir.

A hyperlink or link, is an object or text that, when clicked, takes the users to another webpage or opens
a file. The various types of hyperlinks are explained below.

Figure 6. Duplicación de Objetos.

ENLACES EXTERNOS

Los enlaces externos se utilizan para conectar a los usuarios a páginas de otros sitios web.

Para crear un enlace externo, haga lo siguiente:

1. Seleccione un texto o una imagen que desee hacer un hipervínculo.

2. Haga clic en el cursor dentro del campo de texto del enlace en el Inspector de propiedades.
3. Escriba la URL completa (dirección web) del sitio web al que desea vincular (por ejemplo,
http://www.bgsu.edu).
4. Seleccione el Tipo de destino como -blanco.

NOTA: Si selecciona el tipo de destino como _blank, abrirá el enlace en una ventana nueva mientras
mantiene abierto su sitio web en otra ventana.

14
 8. CREANDO CONT. HYPERVINCULOS
ENLACES A LOS ARCHIVOS

A veces puede ser necesario vincular un archivo como un PDF, un documento de Word o una presentación
de PowerPoint. Cuando el usuario hace clic en el hipervínculo, los archivos se abrirán automáticamente en
su programa original o el navegador le pedirá al usuario que guarde el archivo en su disco duro.

Para crear un vínculo a un archivo, siga estos pasos:

1. Asegúrese de que el archivo que desea vincular se guarda en su carpeta raíz.

2. Seleccione un texto o una imagen que desee hacer un hipervínculo.
3. Haga clic en la carpeta pequeña situada junto al campo Vincular en el Inspector de propiedades.
4. Examine los archivos y seleccione el archivo que desea vincular.
5. Haga clic en Elegir.
6. Seleccione el tipo de destino como -blanco.

ENLACE DE CORREO ELECTRÓNICO BÁSICO

Los vínculos de correo electrónico son vínculos que abrirán automáticamente el programa de correo
electrónico predeterminado del usuario con un correo electrónico en blanco etiquetado con el enlace de
correo electrónico especificado.

Hay dos formas de crear un enlace de correo electrónico:

1. Haga clic en el menú Insertar en la parte superior de la pantalla y seleccione Correo electrónico.
2. Escriba texto para el nombre o etiqueta del hipervínculo, por ejemplo: Mi correo electrónico o Haga clic
aquí para enviarme un correo electrónico (Fig.21).
3. Escriba su dirección de correo electrónico, es decir, donde se va a enviar el correo electrónico.
4. Haga clic en Aceptar.

Fig.21: Ventana de enlaces de E-mail

Freddie Falcon

fredfalcon@falcon.bgsu.edu

O usted puede:

1. Seleccionar el texto que desea que sea su enlace de correo electrónico.

2. En la ventana Propiedades del campo Vínculos, escribir correo a: nombre de

usuario@bgnet.bgsu.edu, o cualquier otra dirección de correo electrónico que desea utilizar como
su contacto.

15
 9. INSERCIÓN DE MEDIOS ESPECIALES

Figure 10. Ajuste de texto.

ROLLOVER IMÁGENES

Las imágenes de rollover le permiten tener un cambio gráfico a un gráfico diferente cuando el ratón se
desplaza sobre él. Para insertar una imagen de rollover, haga lo siguiente:
1. Haga clic en Insert> Image Objects> Rollover Images.
2. En el cuadro de diálogo Insertar imagen de desplazamiento en Imagen original, busque la imagen que se va
a ver antes de que el ratón se desplace sobre ella (Fig.23).
3. Bajo Imagen de desplazamiento, busque la imagen que se verá cuando el ratón se desplace sobre ella.
4. Cuando haga clic en. Ir al campo URL, puede ingresar un vínculo escribiendo la dirección web o
navegando a un archivo.
5. Haga clic en Aceptar.

PELÍCULA RÁPIDA

Para insertar una película, siga estos sencillos pasos:

1. Haga clic en Insertar> Medios> Plug-in.
2. Navegue hasta el archivo deseado.
3. Haga clic en Elegir.

NOTA: De forma predeterminada, QuickTime se ve en una ventana muy pequeña; Para hacer la ventana
más grande, haga clic en él una vez y arrastrar una de las esquinas al tamaño deseado. Asegúrese de que el
archivo de video se encuentra en su carpeta raíz local.

16
 9. INSERTANDO CONT. MEDIOS SPECIALES

INTRODUCCIÓN DE UNA PRESENTACIÓN POWERPOINT

Para insertar una Presentación Power Point, haga lo siguiente:

1. Abra un proyecto en PowerPoint.

2. Haga clic en Guardar como página Web.

3. Coloque el archivo .html y la carpeta de archivos creados en PowerPoint en su carpeta raíz local.

NOTA: El archivo .html ahora es su PowerPoint incrustado en una página Web; Puede hacer doble clic en

él para abrirlo en un navegador.

4. Inserte un vínculo a su archivo .html de PowerPoint. Ahora, si el usuario hace clic en el enlace, su

presentación se abrirá.

17
 10. CARGANDO SU SITIO WEB

Para cargar su sitio en la Web con éxito, debe asegurarse de que ha definido sus Info locales e Info
remoto antes de hacer algo más en Dreamweaver. Si está trabajando en un equipo diferente y se olvidó
de definir su sitio, siga los pasos de la página de introducción. Tendrá que crear un nuevo sitio e
introducir toda la información en las fichas Información local y Información remota. Si está seguro de
haber definido su Información remota, pero la carga no funciona, vuelva a revisar su información remota.
Vaya al sitio> Administrar sitios> Su nombre de sitio. Si el nombre del sitio no está allí, siga los pasos de
la página de introducción.

CARGA DE SUS ARCHIVOS

Para cargar sus archivos en la Web, complete este proceso:

1. Asegúrese de que el panel Archivos esté abierto. Si no, vaya a Ventana> Archivos.

2. Haga clic en el botón Conectar. Este botón conecta Dreamweaver al espacio del servidor (vea Fig.24).

3. Asegúrese de que su barra de herramientas muestra Vista local y sus archivos se pueden ver en el
panel. La vista local muestra todo en el panel Archivos que se encuentra en el equipo en la carpeta raíz
local.

4. Seleccione la carpeta raíz local y haga clic en el botón Poner (vea Fig.24).

Figure 16. Agrupando objetos

NOTA: Si realiza cambios, asegúrese de cargar toda la carpeta y reemplazar la versión anterior para
mantener todos los archivos vinculados correctamente.

1. En la barra de herramientas, cambie su vista de Local a Remoto. Ahora debería ver sus archivos bajo
Remoto. La vista remota muestra todos los archivos cargados en el espacio del servidor.

2. Revise su sitio en un navegador escribiendo la dirección de su sitio web. Si está utilizando el espacio
web personal de BGSU, su dirección Web es: http: //personal.bgsu. Edu / ~ (su nombre de usuario).

NOTA: Le recomendamos que guarde una copia de seguridad de su carpeta raíz local en algo semi
permanente, como un CD, un disco zip o una unidad flash (no utilice un disquete!) Para ahorrarle
tiempo y energía cuando tenga necesidad de actualizar el sitio.

18