Introducción de Dreamweaver Macromedia Dreamweaver es un editor profesional de documentos web.

Permite crear paginas tanto escribiendo directamente el código en HTML, como diseñando de forma v isual los elementos. Dreamweaver incluye muchos elementos de gran utilidad para los que ya tienen mas conocimientos de diseño web, como manejo de scripts, editore s de código y depuradores; sin embargo es extremadamente sencillo para quienes no saben ningún lenguaje de programación en internet. En Dreamweaver se puede introducir el texto de una pagina web, insertar imágenes, crear tablas y asignar formatos, de forma muy similar a como se hace en un proce so de palabras moderno. Este curso se enfoca al manejo general de la interfaz gr afica y a la creación de páginas en el amigable entorno visual. Flujo de trabajo para la creación de sitios web Recuerda que en un sitio web se compone de varias páginas que tratan de un mismo t ema. Cada una de las páginas contiene a su vez textos, imágenes y vínculos. Antes de c rear cualquier sitio web necesitas planearlo. Debes definir los objetivos y la f orma de presentarlos. Tienes que elegir una estructura de navegación (jerárquica, li neal, lineal con jerarquía, red). Hay que definir un estilo visual. Debes crear un a pagina principal (índex o home) y debes diseñar cada u no de los documentos de el sitio. El flujo de trabajo se define como la estrategia que debe seguir el desarrollo d e una pagina web a partir de su diseño, objetivo y funcionamiento. Este proceso in icia que la planeación del sitio y culmina con la codificación y la inclusión del cont enido e interactividad. Para crear un sitio web completo y profesional, se recomienda trabajar en 8 fase s: 1. Planeación del sitio web 2. Recopilación de información e imágenes 3. Manipulación y optimización de imágenes en un programa de diseño grafico 4. Creación de un nuevo sitio en Dreamweaver 5. Diseño de las paginas web 6. I integración de contenidos en las paginas 7. Agregar interactividad (navegación) 8. Prueba y depuración Planeación de un sitio web Antes de definir la estructura y contenido del sitio web, debes considerar el te ma, propósito y audiencia a la que se dirigirá. 1. Elige un tema general para un sitio educativo, relacionado con alguna as ignatura como literatura, ciencias, lenguaje, historia u otras. 2. Define un propósito para el sitio y decide el tipo de audiencia al que qui eres dirigir tu trabajo. Anotas tus decisiones en este espacio: Tema: videojuegos Propósito: Que los jóvenes conozcan los distintos géneros de los videojuegos y consola s Audiencia: Para jóvenes de 10 años en adelante 3. Desglosa el contenido del nuevo sitio en temas generales, que se convert irán en las páginas del sitio web. Por ahora define solo de 4 a 8 temas o subtemas. No olvides incluir una página principal de introducción o presentación. Temas: Aventura, Acción, Terror, Guerra. 4. Dibuja un esquema de la estructura que tendrá el sitio y que posterior men te se convertirá en el flujo de navegación del mismo. Recuerda(o revisa en la primer a sección del curso) las estructuras de navegación jerárquica, lineal, lineal con jera rquía, red.

utiliza programas que conozcas para trabajar con los textos y las imágenes. En la siguiente tabla describe brevemente el contenido que tendría cada un a de las páginas. ya que es mejor darle formato directamente en dreamweaver. Aunque en dreamweaver es posible modificar detalles como el tamaño o el borde. ventanas de documento . incluyendo dimensiones y a pariencia. videos.2. Lo más conveniente es pasar a archivos de block de notas todos los textos que vayas a utilizar en las páginas del sitio web. debe ser siempre el primer pasó del flujo de trabajo. 3. No des formato a los textos. Las siguientes 2 fases son la recopilación de información e imág enes y la manipulación y optimización de las mismas.2.5. que podrás o no usar en el sitio final. siempre es mejor hacerlo antes en un programa específico para diseño grafico (fotoshop. Lo ideal es crear una carpeta temporal donde puede guardar elementos como textos . Pagina contenido Pagina principal Algunos contenidos de las consolas de videojuegos son Ac ción. realiza siempre este ejercicio de planeación antes de encender la computadora para crear e l sitio. Considera estas guías generales de trabajo: 1. que es la primera fase de la cr eación de un sitio web. 2. Los programas de manipulación fotográfica permiten redu cir el tamaño de los archivos de imagen guardándolos en diferentes formatos.3. sonidos o animaciones. Recopilación y manipulación de información En la actividad anterior realizaste la planeación. Optimiza las imágenes. Puedes usar una frase que resuma el texto que piensas insertar.3) Terror Algunos juegos de terror son. Entorno de trabajo de Dreamweaver La ventana de dreamweaver integra barras de herramientas. Gif. • Dead Space • Resident Evil Tip La planeación de un nuevo sitio web. por lo que debes guardar tus fotos en los formatos jpg. Modifica las imágenes en algún programa de edición de fotografías para que quede n exactamente como quieres que aparezcan en el sitio. En adelante. Aventuras Terror y Guerra Acción Algunos juegos de acción: • Street Fighter • Mortal kombat Aventura Algunos juegos de Aventura: • Súper Mario Bross • Kameo • Metroid Guerra Algunos juegos de guerra: • Halo (1. o png (gif y jpg so n soportados por mas navegadores). Conside ra que en web muchos formatos de imagen tradicionales no pueden ser utilizados. fireworks u otros).wars. Incluye además una descripción de las imágenes que te gustarían colocar en cada página.reach) • Call of Duty • Gears of wars(1. como la que has realizado en la actividad ant erior. imágenes. U na vez que hayas generado o recopilado suficiente información para cumplir los obj etivos y estructura del sitio Web.

Por ahora conserva siempre la vista Diseño (Desing). ocultar o mostrar según sea neces ario. Entorno de trabajo Dreamweaver . pero la barra de Insertar facilita estas tareas. Muestra la pagina casi exactamente como aparecerá en el navegador. para ajustar la vista al porcentaje requerido o arrastrar la pagina. Inspector de propiedades muestra y permite modificar las propiedades del elemento que este seleccionado en el documento.(donde se diseñan las páginas web). A la derecha incluye las o pciones de selección. Barra de estado esta ba rra indica el tag de HTML en que se esta actualmente. Cuando inicies Dreamweaver se abrirán los siguientes elementos del área de tra bajo: Barra de titulo Contiene el nombre del programa Barras de menús En esta barra se encuentran las operaciones y acciones de dreamweaver. encar gadas de modificar los elementos dentro de las páginas que se realicen. Tip En cualquier momento puedes visualizar la distribución predeterminada usando el Me nú ventana (Windows)/Entorno de trabajo (Workspacelayout) /Diseñador (Designer). mano. y zoom. Cualquier elemento se puede insertar a través del Menú Insertar (Insert). organizada es varias categoría s. es recomendable trabajar siempre en esta distribución. Barra insertar contiene herramientas para agregar contenido al documento. Ventana del documento esta es el área de diseño de la pa gina o documento HTML actual. Paneles Los distintos paneles se muestran u ocultan para trabajar con algún aspecto específi co en el diseño del documento. Barra de herramientas de l documento Contiene botones para cambiar la forma en que se ve el documento abierto. panales y unas barras de propiedades. apilar. Todas las ventanas y paneles se pueden reacomodar. Mie ntras te familiarizas con el programa.

sin organización y difícil de administrar. • Vista código/Code view Menú Ver (View)/Código (code). permitiendo trabajar de forma visual con todos los elementos. Utiliza un nombre que sea representativo al tema que seleccionaste para crear la página web. Estos son los pasos para definir un nuevo sitio en Dreamweaver. crea subcarpetas para organizar archivos. No muestra los elementos grá amente. imágenes. Paso 1 Define el nombre del sitio. Especifica la ubicación de lo . • Vista diseño/Desing View Menú Ver (View)/Diseño (Desing). Paso 3 Para empezar. Divide la ventana en 2 áreas. • Vista código y diseño/Code and design). Esta tecnología se usa para cr ear sitios con páginas cuyo contenido no es fijo. Solo muestra el contenido gráficamente. Un si tio web regular contiene decenas o centenes de archivos diferentes y una buena o rganización es indispensable para facilitar la creación y mantenimiento. Paso 2 En tu primer sitio web usaras tecnología de servidor.Vistas Dreamweaver tiene 3 modos de visualización de documentos. Después de crear la carpeta principal del sitio. sino el código HTML que se requiere para que el navegador de internet desp liegue el contenido del documento. Definición de un sitio web en dreamweaver La mejor forma de iniciar un sitio web en dreamweaver es crear una carpeta en tu disco duro. a partir del as istente del Menú sitio (site)/Nuevo Sitio… (New site). donde iras colocando todos los archivos (páginas web. puedes terminar con una carpe ta llena de archivos que no se usen. Si el sitio es mediano o grande. sino controlado por programación. Al definir el sitio la aplicación identifica cuales son las carpetas involuc radas. lo más conveniente es trabajar todas las páginas de forma local y desp ués publicarlas en internet cuando es 6ten terminadas. es el momento de iniciar dreamwea ver. de manera que puedes trabajar con el código o con los elementos del sitio web. Video o sonido) que formaran parte del sitio. mantiene un registro de los cambios y automatiza las tareas para publicar las paginas en un servidor e internet. En el cuadro de dialogo del Menú Sitio (Site)/Nuevo sitio… (New site) debes especi ficar el nombre que quieres dar al sitio. la carpeta principal que has definido y la forma en que se conecta el sitio al internet (por ahora ninguna). Dreamweaver usara este nombre como una re ferencia interna para todo el contenido del sitio web. No uses esta carpeta para archivos tempo rales si no estas seguro que quedaran en el sitio final. Es el modo de trabajo más simple. Si creas o copias docum entos sin pensar en la estructura final del sitio.

es decir. nicias Dreamweaver. Si necesitas cambiar a un sitio sario usar el Menú Sitio (Site) /administrar sitios e dialogo que se abre. simplemente elige un sitio y one) se abre automáticamente cuando i existente diferente. selecciona Ninguna (none).s archivos en tu disco local. Recuerda que esta no e s la carpeta temporal de recopilación y manipulación de información. Tip El último sitio con el que se encuentra trabajando. no en internet. la carpeta principal que creaste y que c ontendrá todas las demás carpetas y archivos del sitio final. Paso 5 La última pantalla muestra en resumen las configuraciones que seleccionaste para e l sitio web. es nece (Manage Sites). El cuadro de dial . Paso 4 Por ahora editaras el sitio localmente. por lo tanto. En el cuadro d presiona el botón Finalizar (D Nuevo documento En n sitio definido puedes agregar páginas en cualquier momento. en las opc iones de conexión con el servidor remoto.

Solo veremos las prim eras dos: • En la categoría Aspecto (Appearance). Las propiedades del documento están organizadas en categorías. También puedes inic una pagina prediseñada que ya tiene algunos espacios y elementos. Puedes iniciar con una página en blanco. En la categoría Vínculos (Links). 5) Márgenes (Margin): Establece los márgenes en el documento. encontraras las propiedades: 1) Imagen de fondo (Background image): Esta imagen se mostrará en un mosaico de repeticiones a lo largo y ancho del documento. Este color solo se mostrara si no hay una imagen de fondo. que inicia con un áre mente vacía. 3) Color del texto (Text color): determina el color predeterminado de la fu ente. 4) Tamaño (Size): Define el tamaño predeterminado de la fuente.ogo del ear una a total iar con Menú archivo (File)/Nuevo (New…) presenta varios tipos de documentos para cr nueva pagina. donde puedes crear libremente el documento. 2) Color de fondo (Background color): especifica un color de fondo para el documento. encontraras las propiedades . No es conveniente usar imágenes llamativas ni tener un GIF a nimado como fondo. Si usas una imagen de fondo ut iliza algo muy sutil.

Utiliza el Menú Archivo (File)/Guardar (Save) o la combinación de teclas <Ctrl + s>. por eso es importante que pongas atención para lograr una buena aplicación del texto. TIP Dreamweaver muestra un asterisco junto a los nombres de las páginas que tienen cam bios que no han sido guardados. se guardara con el título que hayas puesto. Dir ectamente en este espacio puedes escribir el titulo que aparecerá en la barra de tít ulo del navegador cuando se abra tu página Web. En Dreamwaver puedes además aplicar acciones típicas de los procesadores de palabra s como: Deshacer (<ctrl + z>) Rehacer (<ctrl + y>) Revisión de ortografía (<shift + F7>) .1) Color de vinculo (Link color): ayuda al visitante a distinguir entre el texto normal y los vínculos de enlace a otras paginas 2) Vínculos visitados (Visited Links): el color de los vínculos visitados es di ferente al vínculo sin visitar. es importante recordar siempre los tags HTML para da r formato. Si el visitante agrega la página a s us favoritos. Siempre puedes revisar el código fuente cambiando a la vista de código de l documento. s iempre dentro de la estructura de carpetas definida para el sitio web. Aunque Dreamweaver permite modificar el texto de forma similar a como se hace en los procesadores de texto. Aquí puedes escribir el título que quieres que aparezca en la barra de título de naveg ador Guardar el documento Es muy recomendable guardar el documento inmediatamente después de crearlo. mientras que la segunda si. inclus o antes de agregarle el contenido. pero con esta opción puedes elegir que texto se muestre diferente. 3) Vínculos activos (Active Links): color de los vínculos cuando el ratón hace cl ic sobre ellos. para guardar el documento activo. 4) Vínculos rollover (Rollover links): color de los vínculos cuando el ratón esta sobre ellos. la primera pagina no ha sido gua rdada. se muestra el campo Título (Title). De esta manera Dreamweaver pude mantener un i nventario de la ubicación de todos los archivos del sitio y la relación que hay ent re ellos. En esta imagen. Titulo del documento En la Barra de herramientas del documento. No olvides elegir la ubicación mas apropiada. Añadiendo texto El contenido es lo más importante de una página Web y es lo que mayor tiempo requier e para su creación. 5) Estilo subrayado (Underline Style): de forma predeterminada al crear un vínculo el texto aparece subrayado.

para dar espacios entre palabr as.Modificar la fuente. La sintaxis del vínculo en este caso es: mailto:direcciondecorreoelectronico. Para elegir alguno de los caracte en el Menú Insertar (Insert)/HTML/caracteres especiales (S (Other). así como el ancho de la tabla (width) ya sea en pixeles (fijo) o en porcentaje (de pende del tamaño de la ventana de cada usuario). Tablas (Tables) La mayoría de las páginas web utilizan tablas para organizar los elementos que la co nforman. alineación. Para ello e s necesario seleccionar el texto o el objeto que va a servir de enlace y estable cer el Vinculo (Link) en el Inspector. En el cuadro d e dialogo tendrás que especificar el numero de Filas (Rows) y Columnas (columns). Arrastra desde este punto hasta el archivo destino en el panel Archivos (Files) para crear la liga. lo más probabl e es que haya al menos una tabla involucrada. color. probablemente no veas las tablas porque se han definido con un borde igual a cero. como símbolos internacionales y otros. Una forma de crear un enlace es a través del inspector de propiedades. Sin embargo. Hipervínculos o Links Un hipervínculo (link. 2) Grosor del borde (Border Thickness): indica el grosor del borde en pixel Relleno de celda (cell padding): indica la distancia entre el contenido . Es posible especificar vínculos a direcciones de correo electrónico. TIP Si escribes más de un espacio en Dreamweaver. un a dirección de correo o un archivo. símbolos res especiales haz clic pecial Characters)/Otro puedes introducir también caracteres especiales. Cuando visitas algún sitio we b. sangría y viñetas (listas). 1) es. El destino es con frecuencia otra página web. tamaño. Dentro de la página web de copyright. los elementos que sirven de ori gen pueden ser texto o imágenes. Por otro lado. Para insertar una tabla ve al Menú insertar (Insert)/Tabla (Table). tantas veces como sea necesario. pero también puede ser una imagen. Las tablas se usan para que los textos e imágenes de una página mantengan p osiciones absolutas al visualizarse en el navegador. enlace o vínculo) es una conexión entre un origen y un destino. en la vista de código puedes utilizar el carácter especial &nbsp. pero cuando hay una distribución organizada de imágenes y textos. cuando visualices la página en el nave gador solo veras uno. Sin embargo la forma más sencilla y segura de crear links es seleccionar el texto u objeto que se servirá de enlace y arrastrar unas líneas desde el localizador de l iga hasta el archivo con que se quiere ligar. estilo.

También puedes iniciar otros parámetros como: 1. co mo un cuadriculado de filas y columnas b) Modo de tablas expandidas (Expanded Tables Mode): añade temporalmente rell eno y espaciado de celdas a las tablas de un documento. Pero puedes pasar a los demás modos a través del menú ver (View)/Modo de tabla (Table Mode). 3) Espacio entre celdas (cell spacing): indica la distancia entre las celda s de la tabla. Esto Facilita su selección y edición. Im. antes d e añadir el contenido. Esta forma de trabajo te da enorme flexibilidad al poder agregar contenido. Borde (Brdr color): color de borde 4. Dreameweaver se encargara de generar la estructura de tabla s necesarias para el navegador. • Combinar celdas (Merges selected cells using spans): cosiste en convertir dos o más celdas seleccionadas en una sola. Col. pero no muestra la tabla exactamente como se vera en el navegador. como el color o imagen de fondo. 5) Alinear texto (align caption): indica la posición del titulo con respecto a la tabla. Para dibujar las tablas y celdas en el modo de diseño. Dos botones nuevos son los que te permiten dividir y combinar. el inspector de propiedades cambia para permi tirte modificar propiedades específicas de las celdas. que aparecerá fuera de ella. Estos son los modos de tablas disponibles: a) Modo Estándar (Standard Mode): Las tablas se presentan de forma normal. La parte infer ior del inspector sirve para especificar los valores propios de la celda. Col. Fondo (Bg Image): imagen de fondo 3. Dividir y combinar celdas Cuando seleccionas una o más celdas. utiliza las herramientas: Dibujar tabla . entre otros. Fondo (Bg color): color de fondo 2. mover las celdas y ajustar el diseño como navega en to do momento. La aplicación inicia siempre en el modo estándar. • Dividir celdas (Split cell into rows or columns): parte en dos la celda seleccio nada. 4) Texto (caption): permite agregar un titulo a la tabla. Formato de tabla A través del inspector de propiedades se pueden modificar los valores que se espec ificaron al insertar la tabla.de las celdas y sus bordes. Modos de tabla Dentro de Dreamweaver puedes trabajar con tablas (tables) en distintos modos de visualización. c) Modo de diseño (Layount Mode): en este modo se utilizan herramientas para dibujar tablas y celdas libremente en cualquier lugar del área de trabajo. el color del borde. Alinear (aling) La parte superior del inspector de propiedades sirve para especificar las propi edades del texto que se insertara entro de la celda seleccionada. 6) Resumen (summary): en este campo se da una descripción de la tabla: los le ctores de pantalla leen el texto del resumen pero este no aparece en el navegado r.

Formato de una capa Las propiedades de la capa seleccionada ase pueden especificar desde el Inspect or de propiedades. 5) Vis (Vis): indica la visibilidad inicial de la capa. d) Hidden (hidden): la capa esta oculta. es mejor seleccionarlas a tra vés del panel capas (layers). lo que pr oporciona grandes posibilidades de diseño. Las tablas pueden ocultarse y sobreponerse entre sí. En este panel aparecen los nombres de todas las capas que existen en el documento. tablas imágenes. animaciones flash o cualquier otro). que puedes abrir desde el menú ventana (Windows)/Capas ) Layers).index): es el orden en el que se colocan las capas sobre el documento. determinando cuales quedan al frente y cuales detrás. 4) indice Z (Z. Cuando existen varias capas en un mismo documento. b) Inherit (inherit): se muestra la capa mientras la pagina a la que pert enece también se este mostrando. . Los parámetros más importantes son los siguientes: 1) ID de capa (Layer ID): es el nombre de la capa.Dibujar celda Capas (Layers) Las capas son recuadros que pueden situarse en cualquier parte de la pagina y en los que se insertan contenidos HTML (texto. las capas pueden moverse arrastrándolas desde el recuadro blanco de la esquina superior izquierda. c) Visible (visible): muestra la capa aunque la pagina web no se este vien do. 3) An (W) y Al (H): indican el ancho y el alto de la capa. 2) Iz (L) y sup (T): indican la distancia en pixeles que hay entre los límite s del documento (izquierdo y superior) y la capa. Las capas se pueden insertar en un documento Web desde el menú Insertar (Insert)/ Objeto de diseño (Layout Objects)/ Capa (Layer). determinan la posición. Una vez creadas. En otras palabras. Puede ser de cuatro tipos: a) Default (default): se dará la visibilidad del sitio según el navegador. Para seleccionar una de ellas simplemente pulsa sobre su nombre en el panel. También puedes redimensionarlas arrastrando los puntos negros de control sobre el borde.