Adobe Dreamweaver CS6 Tutorial

G ET T I GN S TARTA ED

Este tutorial se centra en los pasos básicos que intervienen en la creación de un sitio web atractivo y funcional. En el uso de este tutorial aprenderás a diseñar un diseño del sitio, insertar imágenes y texto, crear vínculos, y la forma de subir su sitio a la Internet. Este tutorial ofrece información 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. ACTIVACIÓN su espacio web

2. PRIMEROS PASOS

3. CREACIÓN DE UNA PÁGINA DE INICIO

4. DISEÑO Y MAQUETACIÓN

5. Inserción y UTILIZACION DE MESAS

6. ELEMENTOS DEL DISEÑO AÑADIR

7. Vista previa de EN NAVEGADOR

8. la creación de hipervínculos

9. INSERCIÓN DE MEDIA ESPECIAL

10. subir tu SITIO

Pg. 3

Pg. 4

Pg. 7

Pg. 8

Pg. 9

Pg. 12

Pg. 13

Pg. 14

Pg. 16

Pg. 18

2

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á com- completado. Para activar su espacio web personal, ya sea:

1. Visite el Centro de Tecnología 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 creación de un espacio en el servidor Classworks para su clase.

Información sobre la solicitud de un espacio web personal del TSC se puede encontrar en: http://www.bgsu.edu/its/tsc/self-help/page9436.html

3

2. G E T T I GN S TA RT E D

CREAR SU LOCAL carpeta raíz

En primer lugar, usted necesita decidir lo que quieres poner en tu página web: imágenes, botones, vídeos, documentos PDF, Presentaciones PowerPoint, etc. Para crear y mantener un sitio web organizado, tiene que establecer un quía arquía de carpetas que contienen todos los componentes que conforman su sitio. Esta carpeta se llama su local carpeta raíz. Esta carpeta es importante porque aquí es donde Dreamweaver busca todos los archivos.

Para crear una carpeta raíz, 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 mayúsculas, espacios, o especial al nombrar las carpetas y archivos del sitio Web. Todas sus páginas se guardarán en esta carpeta. 3. Abra la carpeta y crear otra nueva carpeta dentro. Nombre de esta carpeta "imágenes" (Asegúrese de que el nombre del archivo es minúscula). Ponga todos sus imágenes, botones, archivos de vídeo, etc. dentro de la carpeta de imágenes.

NOTA: Asegúrese de que todas sus páginas y las imágenes se guardan en la carpeta de hincha, o no se apa- pera el siguiente de su sitio web se abre.

GESTIÓN 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 aplicación Dreamweaver CS5. en un Mac

4

2. G E T T I GN S TA RT E D CON T.

El paso más importante que tiene que tomar cada vez que inicie Dreamweaver CS6 es definir su Información Local. La carpeta raíz 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á sólo para su uso - lo hará No se publicarán con su sitio.) 5. Haga clic en el icono de la carpeta pequeña al lado de la Carpeta Sitio Local campo de texto. Vaya a la carpeta raíz que que creó anteriormente en el tutorial. Una vez que haya localizado la carpeta, haga clic en el Elegir botón. 6. Seleccione el Configuración avanzada ficha. 7. Haga clic en el icono de la carpeta pequeña al lado de la Carpeta predeterminada de imágenes campo de texto (Figura 4). Vaya a la imágenes carpeta que creó anteriormente en el tutorial. Una vez que haya localizado la carpeta, haga clic en el Elegir botón.

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

5

2. G E T TI N G S TA RT E D C O N T.

A continuación, cada vez que inicie Dreamweaver, usted tiene que definir su Datos remotos. La Datos remotos ficha se utiliza para indicar a Dreamweaver dónde 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 información ción. (Si está utilizando cualquier otro servidor tendrá que saber el nombre de host.) Para definir la información a distancia, haga lo siguiente:

1. Haga clic en la Servidor Pestaña (Figura 5) situado en el lado izquierdo de la barra de herramientas. 2. Para añadir 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 Anfitrión directorio.

5. Escriba su nombre de usuario de correo web para Nombre de usuario. 6. Escriba la contraseña de correo web para Contraseña. 7. Asegúrese de que el Utilizar FTP pasivo (Si no está visible, haga clic en el Más 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. Configuración del servidor remoto en Dreamweaver CS6 en Mac.

6

3. C R E ATI GN A H O ME PAG E

Para crear una página Web, siga estas pautas:

1. Para añadir una nueva página ir a Expediente >Nuevo y elegir un básico HTML página. Guardar esta página haciendo clic Expediente > Guardar Como. Nombre de la primera página index.html. Esta será la primera página que los usuarios se encuentran cuando visitan su sitio. Guarde este archivo en la carpeta raíz local como index.html. Nombrar la página index.html le dice al navegador que esta es la primera página que se debe abrir cuando alguien visita su sitio.

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

3. Para guardar las páginas de su sitio simplemente haga clic en Expediente >Guardar para cada página. Asegúrese de que su página 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 raíz local.

NOTA: Este proceso se guardarán 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.

7

4. D E S I G N A L ND AYO T T

Incluso si usted está creando sólo una simple página web, usted debe empezar por esbozar el diseño de su sitio. Decida dónde quiere títulos, imágenes, botones de navegación, y el texto que aparezca 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 del Web site son por lo general en la parte superior izquierda o centro superior, mientras que los botones de navegación suelen aparecer verticalmente a la izquierda o en horizontal debajo del título. Además de esbozar un diseño para cada página, debe determinar cuántas páginas que necesitará para el sitio web. La planificación minuciosa es esencial para un buen diseño web. Con el fin de conseguir su texto, botones de navegación, y las imágenes aparezcan donde quieras en la Web página; es necesario utilizar tablas para formatear el contenido de cada página. Todo en cada página de su sitio web debe encajar dentro de una gran mesa. Usando sus bocetos de diseño, usted puede determinar cuál es su mesa tiene que ser similar. La Figura 5 muestra una bosquejo simple diseño. La figura 6 muestra el mismo diseño, con bordes de la tabla dibujadas en. Figura 7 muestra cómo la mesa se puede implementar en Dreamweaver. Ahora, sólo tiene que crear una tabla en Dreamweaver que tiene las mismas características que las fronteras dibujadas en la página. El siguiente capítulo le enseñará cómo insertar su mesa.

Figura 5: croquis de diseño simple Figura 6: Esbozo simple diseño con bordes

8

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 página. Son similares a las tablas en Word o Excel, pero puede ser utilizado en formas mucho más flexibles. Tablas le dan la opción de hacer su página de un tamaño fijo o hacer se ajuste a la ventana del usuario lo mejor que puede. Las tablas también garantizan que la ubicación de su texto e imágenes no cambia cuando se ve en la pantalla con resoluciones diferentes o en diferentes navegadores web.

CÓMO 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 píxeles.

5. Conjunto Grosor del borde. Para tener un tipo de borde visible en 1 o superior, no tener ningún tipo de borde en 0. 6. Relleno de celda agrega habitación dentro de una célula. Introduzca 0 para ningún espacio o un número para aumentar el espacio. 7. Espacio entre celdas agrega el espacio entre las células. Introduzca 0 para ningún espacio o un número para aumentar el espacio. 8. Haga clic en De Acuerdo.

Figura 7: Ventana de Tabla 9

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 número 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 tamaño de la ventana

• Uso de píxeles: esto hará que la mesa de un número determinado de píxeles sin importar el tamaño de la ventana del usuario es (hay 72 píxeles / pulgada) • Cambie el Pad Cell: este es el número de píxeles que se interponga entre la frontera de las células y la contenido de células

• Cambie el Espacio Móvil: este es el número de píxeles que se interponga entre las fronteras 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

• Cambie la frontera: este es el número de píxeles que componen el grueso de los bordes de celda

En la sección 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 células mesa dentro

Una vez que las propiedades de la tabla se han establecido, también puede ajustar las propiedades de las células individuales dentro de la tabla haciendo clic en el interior de la célula (Figura 9). En la parte superior de esta ventana se puede formatear el texto dentro de la celda de la tabla. En la sección inferior de esta ventana se puede:

• Combinar y dividir celdas (esto se explicará en la sección de diseño).

• Cambiar la alineación del contenido de forma horizontal y vertical.

• Cambiar el ancho y la altura de los celulares (cifras por sí solas representan píxeles, agregue un signo de porcentaje para hacer que la célula 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 página con un color de fondo seleccionado para la página, para cada tabla, y para algunos células específicas en cada tabla (Figura 10).

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

11

6. AÑADIR I MAL DE S I G N EL EM E NT S

Añadir texto

Para insertar texto, simplemente haga clic en una celda y escriba su contenido. Al hacer clic en Enter, Dreamweaver agrega automáticamente el espacio entre párrafos. Para agregar un espacio de línea, haga clic en Cambio +Intro. Insertar imágenes

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 imágenes se guardarán en la carpeta "imágenes" 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 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 el Propiedades de la página ventana, puede definir la fuente predeterminada, el tamaño del texto, texto color y fondo para todas sus páginas (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 página 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 páginas 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 página (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 hipervínculo o enlace, es un objeto o texto que, al hacer clic, lleva a los usuarios a otra página web o abre una presentar. Los diversos tipos de hipervínculos se explican a continuación.

ENLACES INTERNOS

Los enlaces internos se utilizan para conectar a los usuarios a otras páginas dentro de la misma página web. Antes de vincular a otra páginas, usted debe asegurarse de que las otras páginas se guardan en la carpeta raíz local y contener el archivo extensión .htm o .html. Para crear un enlace interno, siga estos pasos:

1. Seleccione el texto o la imagen que le gustaría hacer un hipervínculo. 2. Haga clic en la carpeta pequeña al lado de la Enlace campo en el Inspector de propiedades (figura 19 y 20). 3. Navegar a través de los archivos, y seleccione la página que desea vincular. 4. Haga clic en Elija.

Figura 6. Objetos de duplicación.

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 en el enlace Propiedades Inspector. 3. Escriba la dirección URL completa (dirección web) de la página 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 página 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 presentación de PowerPoint. Cuando el usuario hace clic en el hipervínculo, los archivos ya sea abrir automáticamente 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. Asegúrese de que el archivo que desea establecer el vínculo se guarda en la carpeta raíz. 2. Seleccione un texto o una imagen que le gustaría hacer un hipervínculo. 3. Haga clic en la carpeta pequeña al lado de la Enlace en el campo Propiedades Inspector. 4. Navegar a través 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 electrónico son enlaces que se abrirán automáticamente el programa de correo electrónico predeterminado del usuario con una dirección de e-mail en blanco vestido para el enlace de correo electrónico especificada.

Hay dos formas de crear un vínculo de correo electrónico, puede:

1. Haga clic en el menú Insertar en la parte superior de la pantalla y seleccione Correo electrónico Enlace. 2. Escriba el texto para el nombre de hipervínculo o etiqueta, por ejemplo: Mi correo electrónico Haz clic aquí para enviarme un correo electrónico (Fig.21). 3. Introduzca su dirección de correo electrónico, es decir, donde el correo electrónico 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 electrónico. 2. En la ventana Propiedades en el campo Links, escriba mail a: yourusername@bgnet.bgsu.edu, o cualquier otra dirección de correo electrónico 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. Imágenes de sustitución

Las imágenes dinámicas le permiten tener un cambio gráfico para un gráfico diferente cuando el ratón pasa sobre ella. A insertar una imagen de sustitución, haga lo siguiente:

1. Haga clic en Insertar >Objetos de imagen >Rollover imágenes. 2. En el cuadro de diálogo Insertar imagen de sustitución en virtud de imagen original, busque la imagen que va a ser visto el ratón pasa sobre ella (Fig.23). 3. Bajo Imagen de sustitución navegar por la imagen que se ve cuando el ratón pasa sobre ella.

4. En el Al hacer clic. Ir al campo URL, puede introducir un enlace escribiendo la dirección web o navegación en un archivo.

5. Haga clic en Aceptar.

Película QuickTime

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

1. Haga clic en Insertar >Medios de comunicación >Plug-in. 2. Navegue hasta el archivo deseado.

3. Haga clic en Elija.

NOTA: Por defecto, el QuickTime es vista en una ventana muy pequeña; para hacer la ventana más grande, haga clic en en él una vez y arrastre una de las esquinas al tamaño deseado. Asegúrese de que el archivo de la película se encuentra en su 16 carpeta raíz local.

9. I N S ERT I GN S P EC I A L ME DI A C O N T.

INTEGRAR una presentación de PowerPoint

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

1. Abra un proyecto en PowerPoint.

2. Haga clic en Guardar como Página Web. 3. Ponga tanto el .html y la carpeta de archivos creados en PowerPoint en la carpeta raíz local.

NOTA: El archivo .html es ahora su PowerPoint incrustado en una página 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 presentación 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 demás en Dreamweaver. Si está trabajando en un equipo diferente y se olvidó de definir su sitio, siga los pasos indicados en Cómo empezar page.You tendrá que crear un nuevo sitio e introduzca toda la información de la Información Local y pestañas de Datos remotos. Si está seguro de que ha definido su Datos remotos, pero la carga no funciona, volver atrás 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 página.

Carga de los archivos

Para subir tus archivos a la web, completar este proceso:

1. Asegúrese de que el panel Archivos está abierta. Si no, vaya a Ventana >Archivos. 2. Haga clic en la Conectar botón. Este botón conecta Dreamweaver para su espacio en el servidor (ver figura 24). 3. Asegúrese 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 raíz local. 4. Seleccione la carpeta raíz local y haga clic en el Poner botón (Ver Fig.24).

Figura 16. Agrupación de objetos.

NOTA: Si realiza cambios, asegúrese de cargar su carpeta entera y reemplazar la versión 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 también. El Remote View le muestra todos los archivos cargados en su espacio en el servidor. 2. Revise su sitio en un navegador escribiendo la dirección del sitio Web. Si está utilizando el BGSU espacio web personal su dirección web es: http: //personal.bgsu. edu / ~ (su nombre de usuario).

NOTA: Le recomendamos que guarde una copia de seguridad de la carpeta raíz 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 energía cuando se necesita actualizar el sitio.

18