Vous êtes sur la page 1sur 18

Adobe Dreamweaver CS6 Tutorial

G ET T I GN S TARTA ED
Este tutorial se centra en los pasos bsicos que intervienen en la creacin de un sitio web atractivo y funcional.
En el uso de este
tutorial aprenders a disear un diseo del sitio, insertar imgenes y texto, crear vnculos, y la forma de subir su
sitio a la Internet. Este tutorial ofrece informacin para los usuarios de Mac y PC.

TA B LE O F C o nt e NT S
En este tutorial, aprender lo siguiente:

1. ACTIVACIN su espacio web

Pg. 3

2. PRIMEROS PASOS

Pg. 4

3. CREACIN DE UNA PGINA DE


INICIO

Pg. 7

4. DISEO Y MAQUETACIN

Pg. 8

5. Insercin y UTILIZACION DE MESAS

Pg. 9

6. ELEMENTOS DEL DISEO AADIR

Pg. 12

7. Vista previa de EN NAVEGADOR

Pg. 13

8. la creacin de hipervnculos

Pg. 14

9. INSERCIN DE MEDIA ESPECIAL

Pg. 16

10. subir tu SITIO

Pg. 18

1. ACTO I VATI GN YO T R W EB ESPACIO


Antes de empezar, es importante que usted tiene un lugar para subir su sitio Web cuando est comcompletado. Para activar su espacio web personal, ya sea:
1. Visite el Centro de Tecnologa de Apoyo (TSC), ubicada a 110 Hayes Hall, y solicitar web personal
espacio.
2. Pregunte a su instructor (si el proyecto es para el trabajo de clase) sobre la creacin de un espacio en el
servidor Classworks
para su clase.
Informacin sobre la solicitud de un espacio web personal del TSC se puede
encontrar en:
http://www.bgsu.edu/its/tsc/self-help/page9436.html

2. G E T T I GN S TA RT E D
CREAR SU LOCAL carpeta raz
En primer lugar, usted necesita decidir lo que quieres poner en tu pgina web: imgenes, botones, vdeos,
documentos PDF,
Presentaciones PowerPoint, etc. Para crear y mantener un sitio web organizado, tiene que establecer un qua
arqua de carpetas que contienen todos los componentes que conforman su sitio. Esta carpeta se llama su local
carpeta raz. Esta carpeta es importante porque aqu es donde Dreamweaver busca todos los archivos.
Para crear una carpeta raz, siga estos pasos:
1. Crear una nueva carpeta en el escritorio. En un Mac, haga clic en Expediente >Nueva carpeta. En un PC,
haga clic derecho y
elegir Nueva carpeta.
2. Dar la carpeta un nombre breve, pero descriptivo. No utilice maysculas, espacios, o especial
al nombrar las carpetas y archivos del sitio Web. Todas sus pginas se guardarn en
esta carpeta.
3. Abra la carpeta y crear otra nueva carpeta dentro. Nombre de esta carpeta "imgenes" (Asegrese de
que el
nombre del archivo es minscula). Ponga todos sus imgenes, botones, archivos de vdeo, etc. dentro de
la carpeta de imgenes.

NOTA: Asegrese de que todas sus pginas y las imgenes se guardan en la carpeta de hincha, o no se apapera el siguiente de su sitio web se abre.

GESTIN DE LOS SITIOS


1. Comience abriendo Adobe Dreamweaver CS6.
En un PC, haga clic en Comienzo >Programas >Adobe >Dreamweaver CS6, o haga
clic en el
Dreamweaver atajo 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)

Figura 3. Navegando a la aplicacin Dreamweaver CS5. en un Mac

2. G E T T I GN S TA RT E D CON T.
El paso ms importante que tiene que tomar cada vez que inicie Dreamweaver CS6 es definir su
Informacin Local. La carpeta raz local es el nombre de la carpeta en la que est guardando todo su sitio web de
contenidos.
Para definir un sitio, siga estos pasos:

1. Haga clic en Sitio >Administrar


sitios.
2. Haga clic en Nuevo
>Sitio.
3. Seleccione la Sitio ficha.
4. Introduzca un nombre para el sitio en el Nombre del sitio campo de texto (Este nombre ser slo para su
uso - lo har
No se publicarn con su sitio.)
5. Haga clic en el icono de la carpeta pequea al lado de la Carpeta Sitio Local campo de texto. Vaya a la
carpeta raz que
que cre anteriormente en el tutorial. Una vez que haya localizado la carpeta, haga clic en el Elegir botn.
6. Seleccione el Configuracin avanzada
ficha.
7. Haga clic en el icono de la carpeta pequea al lado de la Carpeta predeterminada de imgenes campo
de texto (Figura 4). Vaya a la
imgenes carpeta que cre anteriormente en el tutorial. Una vez que haya localizado la carpeta, haga clic
en el
Elegir botn.

Figura 3. Seleccin de la carpeta predeterminada de imgenes en Dreamweaver CS6 en


un Mac.

2. G E T TI N G S TA RT E D C O N T.
A continuacin, cada vez que inicie Dreamweaver, usted tiene que definir su Datos remotos. La Datos remotos
ficha se utiliza para indicar a Dreamweaver dnde poner sus archivos cuando usted est listo para subirlas a la
web.
Si est utilizando el espacio en el servidor personal BGSU, utilice el siguiente diagrama (Figura 5) para llenar la
informacin
cin. (Si est utilizando cualquier otro servidor tendr que saber el nombre de host.)
Para definir la informacin a distancia, haga lo
siguiente:
1. Haga clic en la Servidor Pestaa (Figura 5) situado en el lado izquierdo de la
barra de herramientas.
2. Para aadir un servidor, haga clic en el +smbolo de la esquina inferior izquierda de la
ventana.
3. Escriba personal.bgsu.edu para Direccin FTP.
4. Escriba public_html para Anfitrin directorio.
5. Escriba su nombre de usuario de correo web para
Nombre de usuario.
6. Escriba la contrasea de correo web para
Contrasea.
7. Asegrese de que el Utilizar FTP pasivo (Si no est visible, haga clic en el Ms opciones flecha hacia la
parte inferior)
casilla est marcada.
8. Haga clic en Prueba para asegurarse de que se conecta al servidor
correctamente.

Figura 5. Configuracin del servidor remoto en Dreamweaver CS6 en Mac.

3. C R E ATI GN A H O ME PAG E
Para crear una pgina Web, siga estas pautas:

1. Para aadir una nueva pgina ir a Expediente >Nuevo y elegir un bsico HTML pgina. Guardar esta pgina
haciendo clic
Expediente > Guardar Como. Nombre de la primera pgina index.html. Esta ser la primera pgina que los
usuarios se encuentran cuando
visitan su sitio. Guarde este archivo en la carpeta raz local como index.html. Nombrar la pgina
index.html le dice al navegador que esta es la primera pgina que se debe abrir cuando alguien visita su
sitio.
2. Despus de crear su pgina index.html, puede usar esta pgina como un diseo de plantilla para toda la
otras pginas en su sitio. Simplemente pulse Guardar como y el nombre del archivo de lo que quieras, pero
asegrese de mantener
el nombre es simple, por ejemplo history.html, resume.html, etc. Recuerde que no debe utilizar maysculas o
espacios al nombrar archivos, esto har que sea ms fcil para los navegadores web para encontrar sus
archivos.
3. Para guardar las pginas de su sitio simplemente haga clic en Expediente >Guardar para cada pgina.
Asegrese de que su pgina de inicio es
nombre index.html, y guardar todos sus archivos en la carpeta que usted eligi cuando defini su sitio, es
decir,
en la carpeta raz local.
NOTA: Este proceso se guardarn los archivos a su site.You local puede transferir cada archivo por
separado a la
sitio remoto o transferir todo el sitio una vez que haya terminado de trabajar en l.

4. D E S I G N A L ND AYO T T
Incluso si usted est creando slo una simple pgina web, usted debe empezar por esbozar el diseo de su
sitio.
Decida dnde quiere ttulos, imgenes, botones de navegacin, y el texto que aparezca en la pantalla.
La mayora de los sitios web tienen las mismas caractersticas de diseo en cada pgina. Por ejemplo, los ttulos
del Web site son por lo general
en la parte superior izquierda o centro superior, mientras que los botones de navegacin suelen aparecer
verticalmente a la izquierda o en horizontal
debajo del ttulo. Adems de esbozar un diseo para cada pgina, debe determinar cuntas pginas
que necesitar para el sitio web. La planificacin minuciosa es esencial para un buen diseo web.
Con el fin de conseguir su texto, botones de navegacin, y las imgenes aparezcan donde quieras en la Web
pgina; es necesario utilizar tablas para formatear el contenido de cada pgina. Todo en cada pgina de su sitio
web
debe encajar dentro de una gran mesa.
Usando sus bocetos de diseo, usted puede determinar cul es su mesa tiene que ser similar. La Figura 5
muestra una
bosquejo simple diseo. La figura 6 muestra el mismo diseo, con bordes de la tabla dibujadas en. Figura 7
muestra cmo
la mesa se puede implementar en Dreamweaver.
Ahora, slo tiene que crear una tabla en Dreamweaver que tiene las mismas caractersticas que las fronteras
dibujadas en
la pgina. El siguiente captulo le ensear cmo insertar su mesa.

Figura 5: croquis de diseo simple

Figura 6: Esbozo simple diseo con bordes

5. I N S E RT I GN AN D U S I N G TA BL ES
POR QU LAS TABLAS DE
USO
Tablas le ayudan a dividir el espacio en su pgina. Son similares a las tablas en Word o Excel, pero puede ser
utilizado en formas mucho ms flexibles. Tablas le dan la opcin de hacer su pgina de un tamao fijo o hacer
se ajuste a la ventana del usuario lo mejor que puede. Las tablas tambin garantizan que la ubicacin de su
texto e imgenes
no cambia cuando se ve en la pantalla con resoluciones diferentes o en diferentes navegadores web.
CMO INSERTAR UNA MESA

1. Para insertar una tabla, siga estos pasos:


2. En el men principal, haga clic en Insertar
>Tabla.
3. Introduzca la cantidad de Filas de tabla y Columnas (Figura 7).
4. Conjunto Ancho de tabla de entre 600 y 800 pxeles.
5. Conjunto Grosor del borde. Para tener un tipo de borde visible en 1 o superior, no tener ningn tipo de
borde en 0.
6. Relleno de celda agrega habitacin dentro de una clula. Introduzca 0 para ningn espacio o un nmero
para aumentar el espacio.
7. Espacio entre celdas agrega el espacio entre las clulas. Introduzca 0 para ningn espacio o un
nmero para aumentar el espacio.
8. Haga clic en De
Acuerdo.

Figura 7: Ventana de Tabla

5. EN S E RT I GN A ND Estados Unidos I GN TA BL ES C O N T.
PROPIEDADES DE LAS MESAS
Si hace clic en uno de los bordes de la tabla, puede ver sus propiedades de la tabla en la Propiedades
ventana.

Figura 8: Cuadro Ventana Propiedades

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

Nombre su mesa

Cambiar el nmero de filas y columnas en la tabla


Cambiar el ancho y el alto de la tabla
Uso ciento: esto har que la tabla se expanden y contraen como el usuario cambia el tamao de la
ventana
Uso de pxeles: esto har que la mesa de un nmero determinado de pxeles sin importar el tamao de la
ventana del usuario
es (hay 72 pxeles / pulgada)
Cambie el Pad Cell: este es el nmero de pxeles que se interponga entre la frontera de las clulas y la
contenido de clulas
Cambie el Espacio Mvil: este es el nmero de pxeles que se interponga entre las fronteras de cada
celda
Cambiar la alineacin: esta es la posicin de la tabla en el borde izquierdo o derecho, o en el centro de
la pgina
Cambie la frontera: este es el nmero de pxeles que componen el grueso de los bordes de celda
En la seccin inferior de esta ventana (Figura 8) se puede:
anchuras y alturas de mesa claras y convertir
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. I N S ERT I GN A ND Estados Unidos I GN TAB L E S C O N T.


Propiedades de las clulas mesa dentro
Una vez que las propiedades de la tabla se han establecido, tambin puede ajustar las propiedades de las
clulas individuales
dentro de la tabla haciendo clic en el interior de la clula (Figura 9).
En la parte superior de esta ventana se puede formatear el texto dentro de la celda de la tabla. En la seccin
inferior de
esta ventana se puede:
Combinar y dividir celdas (esto se explicar en la seccin de diseo).
Cambiar la alineacin del contenido de forma horizontal y vertical.
Cambiar el ancho y la altura de los celulares (cifras por s solas representan pxeles, agregue un signo de
porcentaje para
hacer que la clula de un cierto porcentaje de toda la tabla).
Uso Wrap.
Encabezado Insertar;
Insertar una imagen de fondo para la celda
individual.
Cambiar el color de fondo de la celda individual.
Cambiar el color del borde de la celda individual.

Figura 9: Ventana de Formato Tabla

He aqu un ejemplo de una pgina con un color de fondo seleccionado para la pgina, para cada tabla, y para
algunos
clulas especficas en cada tabla (Figura 10).

Figura 10: El color de fondo, color de mesa, color de celda

11

6. AADIR I MAL DE S I G N EL EM E NT S
Aadir texto
Para insertar texto, simplemente haga clic en una celda y escriba su contenido. Al hacer clic en Enter,
Dreamweaver
agrega automticamente el espacio entre prrafos. Para agregar un espacio de lnea, haga clic en Cambio
+Intro.
Insertar imgenes
Para insertar una imagen, siga estos pasos:
1. Haga clic en la celda en la que desea que aparezca la
imagen.
2. Haga clic en Insertar
>Image.
3. Busque la imagen que desea insertar
NOTA: Todas sus imgenes se guardarn en la carpeta "imgenes" que estableci cuando
comenzado.

4. Haga clic en Elegir para insertar la


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

Figura 10: Propiedades de la imagen Inspector Ventana

PROPIEDADES formato de pgina


Para cambiar el color de fondo de sus pginas u otras propiedades generales de su sitio web, vaya a
Modificar >Propiedades de la pgina. Aqu, en el Propiedades de la pgina ventana, puede definir la fuente
predeterminada, el tamao del texto, texto
color y fondo para todas sus pginas (Figura 12).

12

6. A D D I N G D E S I N G E LE ME NT S C O N T.

Figura 12: Propiedades de la pgina Ventana

7. FILAS P R E V I E N WI G I N B ER

Para una vista previa en un navegador


Usted puede ver sus pginas Web en un navegador de muchas
maneras:
1. Elegir Expediente >Vista previa en el
explorador.
2. Hit F12.
3. Haga clic en la icono del mundo situado en la barra de herramientas en la parte superior de
la pgina (Figura 13).

Figura 13: Vista previa en el men de su


navegador

13

8. C R E A I GN HY P ERLIN KS
Un hipervnculo o enlace, es un objeto o texto que, al hacer clic, lleva a los usuarios a otra pgina web o abre una
presentar. Los diversos tipos de hipervnculos se explican a continuacin.
ENLACES INTERNOS
Los enlaces internos se utilizan para conectar a los usuarios a otras pginas dentro de la misma pgina web.
Antes de vincular a otra
pginas, usted debe asegurarse de que las otras pginas se guardan en la carpeta raz local y contener el
archivo
extensin .htm o .html.
Para crear un enlace interno, siga estos pasos:

1. Seleccione el texto o la imagen que le gustara hacer un


hipervnculo.
2. Haga clic en la carpeta pequea al lado de la Enlace campo en el Inspector de propiedades (figura
19 y 20).
3. Navegar a travs de los archivos, y seleccione la pgina que desea
vincular.
4. Haga clic en Elija.

Figura 6. Objetos de duplicacin.

ENLACES EXTERNOS
Los enlaces externos se utilizan para conectar a los usuarios a pginas de otros
sitios Web.
Para crear un enlace externo, haga lo siguiente:
1. Seleccione un texto o una imagen que desee hacer un
hipervnculo.
2. Haga clic en el cursor dentro del campo de texto en el enlace Propiedades
Inspector.
3. Escriba la direccin URL completa (direccin web) de la pgina web que
desea vincular
(Por ejemplo http://www.bgsu.edu).
4. Seleccione el Tipo de destino como blank.
NOTA: Si selecciona el tipo de destino como _blank, se abrir el enlace en una nueva ventana, manteniendo la
pgina web abierta en otra ventana.

14

8. C R I COMA GN HY P E N RLI KS CO NT.


LINKS A ARCHIVOS
A veces puede que tenga que vincular un archivo como un PDF, un documento de Word o una presentacin de
PowerPoint.
Cuando el usuario hace clic en el hipervnculo, los archivos ya sea abrir automticamente en su programa
original, o
el navegador le pedir al usuario que guarde el archivo en su disco duro.
Para crear un enlace a un archivo, siga estos
pasos:
1. Asegrese de que el archivo que desea establecer el vnculo se guarda en
la carpeta raz.
2. Seleccione un texto o una imagen que le gustara hacer un
hipervnculo.
3. Haga clic en la carpeta pequea al lado de la Enlace en el campo Propiedades
Inspector.
4. Navegar a travs de los archivos y seleccione el archivo que desea
vincular.
5. Haga clic en Elija.
6. Seleccione el Objetivo escriba como blank.
BASIC Correo Enlace
Enlaces de correo electrnico son enlaces que se abrirn automticamente el programa de correo electrnico
predeterminado del usuario con una direccin de e-mail en blanco
vestido para el enlace de correo electrnico especificada.
Hay dos formas de crear un vnculo de correo electrnico,
puede:
1. Haga clic en el men Insertar en la parte superior de la pantalla y seleccione
Correo electrnico Enlace.
2. Escriba el texto para el nombre de hipervnculo o etiqueta, por ejemplo: Mi correo electrnico Haz clic
aqu para enviarme un correo electrnico
(Fig.21).
3. Introduzca su direccin de correo electrnico, es decir, donde el
correo electrnico es que se enviar.
4. Haga clic en
Aceptar.
Ventana Enlace E-mail: Fig.21

Freddie Falcon

fredfalcon@falcon.bgsu.edu

O, usted puede:
1. Seleccione el texto que desea que sea su enlace de
correo electrnico.
2. En la ventana Propiedades en el campo Links, escriba mail a: yourusername@bgnet.bgsu.edu, o cualquier
otra direccin de correo electrnico que desea usar como su contacto.
15

9. I N S E RTI GN S PE C I A L M E D I A

Figura 10. Los mensajes de texto de


envolver.

Imgenes de sustitucin

Las imgenes dinmicas le permiten tener un cambio grfico para un grfico diferente cuando el ratn pasa sobre
ella. A
insertar una imagen de sustitucin, haga lo siguiente:
1. Haga clic en Insertar >Objetos de imagen >Rollover
imgenes.
2. En el cuadro de dilogo Insertar imagen de sustitucin en virtud de imagen original, busque la imagen
que va a ser
visto el ratn pasa sobre ella (Fig.23).
3. Bajo Imagen de sustitucin navegar por la imagen que se ve cuando el ratn pasa sobre ella.
4. En el Al hacer clic. Ir al campo URL, puede introducir un enlace escribiendo la direccin web o
navegacin en un archivo.
5. Haga clic en
Aceptar.
Pelcula QuickTime
Para insertar una pelcula, siga estos sencillos
pasos:
1. Haga clic en Insertar >Medios de
comunicacin >Plug-in.
2. Navegue hasta el archivo deseado.
3. Haga clic en Elija.
NOTA: Por defecto, el QuickTime es vista en una ventana muy pequea; para hacer la ventana ms grande,
haga clic en
en l una vez y arrastre una de las esquinas al tamao deseado. Asegrese de que el archivo de la pelcula se
encuentra en su
16
carpeta raz local.

9. I N S ERT I GN S P EC I A L ME DI A C O N T.
INTEGRAR una presentacin de PowerPoint
Para insertar una presentacin en Power Point, haga lo siguiente:
1. Abra un proyecto en PowerPoint.
2. Haga clic en Guardar como
Pgina Web.
3. Ponga tanto el .html y la carpeta de archivos creados en PowerPoint en la carpeta raz local.
NOTA: El archivo .html es ahora su PowerPoint incrustado en una pgina Web; puede hacer doble clic en l
para abrirlo en un navegador.

4. Inserte un enlace a su archivo .html PowerPoint. Ahora bien, si el usuario hace clic en el enlace, su
presentacin
se abrir.

17

10. UP Eslora D I N G YO UR S I T E
Para cargar el sitio en la Web con xito, usted debe asegurarse de que ha definido su Info Local y
Datos remotos antes de que hiciste todo lo dems en Dreamweaver. Si est trabajando en un equipo diferente
y se olvid de definir su sitio, siga los pasos indicados en Cmo empezar page.You tendr que crear un nuevo
sitio
e introduzca toda la informacin de la Informacin Local y pestaas de Datos remotos. Si est seguro de que ha
definido su
Datos remotos, pero la carga no funciona, volver atrs y comprobar su Info Remota. Ir a Sitio >Gestionar
Lugares >Tu Sitio Nombre. Si el nombre del sitio no est all, siga los pasos de Empezando pgina.
Carga de los archivos
Para subir tus archivos a la web, completar este proceso:
1. Asegrese de que el panel Archivos est abierta. Si no, vaya a Ventana
>Archivos.
2. Haga clic en la Conectar botn. Este botn conecta Dreamweaver para su espacio en el servidor (ver
figura 24).
3. Asegrese de que sus pantallas de la barra de herramientas Ver Local y los archivos se pueden ver en el
panel. La vista local
muestra todo en el Archivos el panel que est en el equipo en la carpeta raz local.
4. Seleccione la carpeta raz local y haga clic en el Poner botn (Ver Fig.24).

Figura 16. Agrupacin de objetos.

NOTA: Si realiza cambios, asegrese de cargar su carpeta entera y reemplazar la versin antigua para mantener
todo
archivos vinculados correctamente.
1. En la barra de herramientas, cambiar su punto de vista de Local a View.You remoto ahora debe ver sus
archivos bajo
A distancia tambin. El Remote View le muestra todos los archivos cargados en su espacio en el servidor.
2. Revise su sitio en un navegador escribiendo la direccin del sitio Web. Si est utilizando el BGSU
espacio web personal su direccin web es: http: //personal.bgsu. edu / ~ (su nombre de usuario).
NOTA: Le recomendamos que guarde una copia de seguridad de la carpeta raz local en algo semi permanente
como un CD, un disco zip, o una unidad flash (No utilice un disquete!) con el fin de ahorrar tiempo y energa
cuando se necesita actualizar el sitio.

18