Adobe Dreamweaver CS6 Tutorial PRIMEROS PASOS Este tutorial se centra en los pasos básicos necesarios para crear un atractivo sitio web funcional. Al utilizar este tutorial, aprenderá a crear un diseño de página, insertar imágenes y texto, crear vínculos, y cómo cargar el sitio en la Internet. Esta guía ofrece información para usuarios de Mac y PC. TABLA DE CONTENIDO En este tutorial, aprenderá lo siguiente: Antes de empezar, es importante que usted tiene un lugar para subir su sitio Web cuando se haya completado. Para activar su espacio web personal, ya sea: 1. Visite el Centro de Apoyo Tecnológico (TSC), que se encuentra a 110 Hayes Hall, y solicitar espacio web personal. 2. Pregunte a su instructor (si el proyecto es para el trabajo en clase) sobre la creación de un espacio en el servidor Classworks para su clase. Creación de la carpeta raíz local En primer lugar, usted necesita decidir lo que usted quiere poner en su sitio web: imágenes, botones, vídeos, documentos PDF, presentaciones PowerPoint, etc, para crear y mantener un sitio web organizado, es necesario establecer una jerarquía de carpetas que contienen toda la componentes que conforman su sitio. Esta carpeta se llama la carpeta raíz local. Esta carpeta es importante porque aquí es donde Dreamweaver busca todos los archivos. Para crear una carpeta raíz, siga estos pasos: 1. Cree una nueva carpeta en el escritorio. En un Mac, haga clic en Archivo> Nueva carpeta. En un PC, haga clic derecho y elija Nueva carpeta. 2. Dar a la carpeta un nombre breve, pero descriptivo. No utilice mayúsculas, espacios o caracteres especiales al nombrar carpetas y archivos de su sitio web. Todas sus páginas se guardarán en esta carpeta 3. Abra la carpeta y crear otra carpeta dentro de nuevo. Nombre de esta carpeta "imágenes" (asegúrese de que el nombre de archivo entre mayúsculas y minúsculas). Ponga sus imágenes, botones, archivos de vídeo, etc dentro de la carpeta de imágenes. NOTA: Asegúrese de que todas las páginas y las imágenes se guardan en la carpeta Raíz, o éstas no aparecerán la próxima su sitio web se abre. GESTIÓN DE LOS 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) Figura 3. Navegando a la aplicación Dreamweaver CS5. en un Mac 2. PRIMEROS PASOS CONT. El paso más importante que tiene t iene 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 donde se almacenan todos los contenidos 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á sólo para su uso -. No será publicado con el sitio) 5. Haga clic en el icono de carpeta pequeño al lado del campo de texto Carpeta 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 Seleccionar. 6. Seleccione la ficha Configuración avanzada. 7. Haga clic en el icono de carpeta pequeño al lado del campo de texto Carpeta de imágenes por defecto (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 Seleccionar. Figura 3. Selección de la carpeta predeterminada de imágenes en Dreamweaver CS6 en un Mac. 2. PRIMEROS PASOS CONT. A continuación, cada vez que inicie Dreamweaver, usted tiene que definir su Info Remota. La ficha Datos remotos 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 completar la información. la información. (. Si usa 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 ficha Server (Figura 5) situada 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 FTP Dirección. 4. Escriba en public_html para el directorio del host. 5. Introduce tu nombre de usuario Nombre de usuario de correo web.
6. Escriba su contraseña de correo web para su contraseña. 7. Asegúrese de que el uso pasivo de FTP (si no está visible, haga clic en Más opciones flecha hacia abajo) está seleccionada. 8. Haga clic en Probar para asegurarse de que se conecta al servidor correctamente. Figura 5. Configuración del servidor remoto en Dreamweaver D reamweaver CS6 en Mac OS. 3. CREACIÓN DE UNA PÁGINA DE INICIO Para crear una página Web, siga estas instrucciones: 1. Para agregar una nueva página ir a Archivo> Ar chivo> Nuevo y elija una página HTML básico. Guardar Guardar 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 se encuentran cuando visitan su sitio. Guardar este archivo en la carpeta raíz local como index.html. Nombrar la página index.html indica al navegador Web que esta es la primera página que se abre cuando alguien visita su sitio. 2. Después de crear su página index.html, puede usar esta página como plantilla de diseño para todas las otras páginas en su sitio. Simplemente pulse Guardar como y asigne al archivo de lo que quieras, pero asegúrese de mantener el nombre es muy sencillo, por ejemplo history.html, resume.html, etc Recuerde no usar mayúsculas o espacios al nombrar archivos, esto hará que sea más fácil para los navegadores de Internet para buscar los archivos. 3. Para guardar las páginas de su sitio web, simplemente haga clic en Archivo> Guardar para cada página. Asegúrese de que su página de inicio se llama index.html y guardar todos los archivos en la carpeta que usted eligió cuando definió su sitio, es decir, en la carpeta raíz local. NOTA: Este proceso guardar los archivos en el sitio local. Usted puede transferir cada archivo ar chivo por separado en el sitio remoto o transferir todo el sitio una vez que haya terminado de trabajar en él. Incluso si va a crear una simple página web, usted debe comenzar a esbozar el diseño de su sitio. Decida dónde quiere títulos, imágenes, botones de navegación, y el texto que aparezcan 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 Sitio Web son por lo general en la parte superior central izquierda o la parte 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 el número de páginas que se necesita para el sitio web. La planificación planificación minuciosa es esencial para un buen diseño web. Con el fin de obtener su texto, botones de navegación, y las imágenes aparezcan donde quieras en la página Web, que hay que utilizar las tablas para dar formato a 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 un sencillo croquis de diseño. La figura 6 muestra m uestra el mismo diseño, con bordes de tabla procedentes pulg figura 7 muestra cómo la tabla se puede implementar en Dreamweaver.
Ahora, basta con crear una tabla en Dreamweaver que tiene las mismas m ismas características que las fronteras dibujadas en la página. El siguiente capítulo le enseñará cómo insertar la tabla. Figura 5: croquis de diseño simple Figura 6: croquis de diseño simple con fronteras 5. COLOCACIÓN Y UTILIZACIÓN DE TABLAS ¿POR QUÉ USAR LAS TABLAS Tables ayuda se divide el espacio en su página. Son similares a las tablas en Word o Excel, pero se pueden utilizar en formas mucho más flexibles. Tablas le dan la opción de hacer su página de tamaño fijo o por lo que es apto para la ventana del usuario de la mejor manera posible. 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. Cómo insertar una tabla 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. Establezca la tabla Ancho de entre 600 y 800 píxeles. 5. Establecer Grosor del borde. Tener un tipo t ipo de borde visible en 1 o superior, contar con ningún tipo de límite 0. 6. Relleno de celda agrega habitación dentro de una célula. Introduzca 0 para ningún espacio o una serie para aumentar el espacio. 7. Espacio entre celdas agrega espacio entre las células. Introduzca 0 para ningún espacio o una serie para aumentar el espacio. 8. Haga clic en Aceptar. 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.
Figura 8: Cuadro Ventana Propiedades En la parte superior de esta ventana (Figura 8) se puede: • Asigne un nombre a la tabla • Cambie el número de filas y columnas en la tabla • Cambiar el ancho y el alto de la tabla
• Uso ciento: est o hará que la tabla se expanden y contraen mientras 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 (hay 72 píxeles / pulgada) • Cambie la almohadilla de la célula: este es el número de píxeles que se interponen entre la
frontera de las células y el contenido de las células • Cambie el Espacio Móvil: este es el número de píxeles que se interponga entre las fronteras de
cada célula • 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: es el número de píxeles que componen el grueso de los bordes de celda
En la parte inferior de esta ventana (Figura 8) se puede: • Borrar y convertir anchos de mesa y alturas • Cambie el color de fondo de toda la tabla • Uso ciento: esto hará que la tabla se expanden y contraen mientras 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 (hay 72 píxeles / pulgada) • Cambie la almohadilla de la célula: este es el número de píxeles que se interponen entre la
frontera de las células y el contenido de las células • Cambie el Espacio Móvil: este es el número de píxeles que se interponga entre las fronteras de
cada célula • 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: es el n úmero de píxeles que componen el grueso de los bordes de celda
En la parte inferior de esta ventana (Figura 8) se puede: • Borrar y convertir anchos de mesa y alturas • Cambie el color de fondo de toda la tabla • Utilice Wrap. • Inserte Macho; • Insertar una imagen de fondo de la celda individual. • Cambie el color de fondo de la celda individual.
• Cambiar el color del borde de la celda individual.
Figura 9: Ventana de Formato de tabla He aquí un ejemplo de una página con un color de fondo seleccionado para la página, para cada tabla, y para algunas células específicas de cada tabla (Figura 10). Figura 10: El color de fondo, color de la tabla, color de celda 6. Añadiendo elementos de diseño Añadir texto Para insertar texto, simplemente haga clic en una celda y escriba su contenido. Cuando hace clic en Enter, Dreamweaver añade automáticamente el espacio entre párrafos. Para agregar un espacio de línea, haga clic en Mayús + Intro. Inserción de 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> Imagen. 3. Busque la imagen que desea insertar
NOTA: Todas las imágenes deben ser guardadas en la carpeta "imágenes" que estableció cuando comenzó. 4. Haga clic en Seleccionar para insertar la imagen.
Haga clic en la imagen para ver sus propiedades en la ventana Propiedades de la imagen Inspector (Figura 11).
Figura 10: Propiedades de la imagen Ventana V entana Inspector FORMATEO DE PROPIEDADES PÁGINA Para cambiar el color de fondo de las páginas u otras propiedades generales de su sitio web, vaya a Modificar> Propiedades de la página. A continuación, en la ventana de Propiedades de la página, se puede establecer la fuente predeterminada, el tamaño del texto, color del texto y del fondo para todas sus páginas (Figura 12). 6. AÑADIR
Figura 12: Página Ventana Propiedades Pr opiedades 7. VISTA PREVIA EN EL NAVEGADOR Para una vista previa en un navegador Usted puede ver las páginas Web en un navegador de muchas maneras: 1. Seleccione Archivo> Vista previa en el explorador. 2. Pulse F12. 3. Haga clic en el icono del mundo se encuentra en la barra de herramientas en la parte superior de la página (Figura 13). Figura 13: Vista previa en el explorador de menús 8. Crear hipervínculos Un hipervínculo o vínculo, es un objeto o un texto que, al hacer clic, lleva a los usuarios a otra página web o abre un archivo. 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 del mismo sitio web. Antes de enlazar a otras páginas, usted debe asegurarse de que el resto de páginas se guardan en la carpeta raíz local y contener la extensión de archivo. Htm o. 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 click en la carpeta situado junto al campo Vínculo del inspector de propiedades (Fig. 19 y 20). 3. Te invitamos a comparar los archivos y seleccione la página que desea vincular. 4. Haga clic en Elegir.
La Figura 6. Objetos duplicaciones. duplicaciones. 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 quiera para hacer un hipervínculo. 2. Haga clic en el cursor dentro del campo de texto Vínculo del inspector de propiedades. 3. Escriba la dirección URL completa (dirección web) del sitio web que desea establecer el vínculo (por ejemplo http://www.bgsu.edu). http://www.bgsu.edu).
4. Seleccione el tipo de destino como a quemarropa.
NOTA: Si selecciona el tipo de destino como _blank, se abrirá el enlace en una ventana nueva, manteniendo la página web abierta en otra ventana. 8. Crear hipervínculos CONT. Enlaces 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 o bien se abrirá automáticamente en su programa original, o el navegador le preguntará al usuario si desea guardar 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. r aíz. 2. Seleccione un texto o una imagen que le gustaría hacer un hipervínculo. 3. Haga click en la carpeta situado junto al campo Vínculo del inspector de propiedades. 4. Te invitamos a comparar los archivos y seleccione el archivo que desea vincular. 5. Haga clic en Elegir. 6. Seleccione el tipo de destino como a quemarropa. BASIC Correo Electrà ³ nico Enlaces de correo electrónico son enlaces que se abrirán automáticamente el progra1. Hagama de correo electrónico predeterminado del usuario con un correo electrónico en blanco dirigido al enlace de e-mail especificada. especificada. Hay dos formas de crear un vínculo de correo electrónico, puede: clic en el menú Insertar en la parte superior de la pantalla y seleccione Email
