manual dreamweaver cs5

Adobe Dreamweaver CS5

Manual elaborado por: Ana María López Balbín [email protected]

Introduccón al Diseño de Sitios Web

Dreamweaver es una programa de edición que nos permite la generación de código HTML mediante la inserción de elementos en forma visual.Es una herramienta comparable a InDesign en el medio impreso, que nos permite crear rápidamente Sitios Web sin tener que escribir una sola línea de código.

Programación HTMLEl código HTML constituye el corazón del Web. HTML significa “Lenguaje de Marcado de Hipertexto”. Es un lenguaje que se basaen el SMGL “Lenguaje Estandar de Marcación Generalizada”, un sistema de procesamiento de documento ampliamente utilizado por organizaciones gubernamentales y educativas.En un documento HTMlL se llaman etiquetas (tags) a las instrucciones que definen atributos específicos.

El código que se genera para cada documento HTML es pequeño (sólo texto), de tal forma que al poder ser transferido por Internet y desplegado rapidamente, puede leerse en casi cualquier computadora que cuente con un visuallizador que lea HTML y un modem, sin importar, marca, sistema operativo, monitor y accesorios de la misma.El lenguaje HTML es concreto y fácil de aprender. Hace algunos años

era necesario aprender cada una de las etiquetas y escribirlas a mano en un editor de texto. Actualmente programas como Dreamweaver o Front Page generan el código de manera automática y oculta. Otros programas como Word e InDesign cuentan con filtros de conversion a HTML.

Las etiquetas de HTML pueden ser divididas en dos grupos:Etiquetas estructurales: organizan las partes del documento.Etiquetas de estilo: dan especificaciones sobre la apariencia del texto.

HTML vs XHTMLPor mucho tiempo, el HTML fue el único código utilizado para la creación de sitios Web, pero a finales del 2001 el World Wide Web Consortium, un comité encargado de determinar estándares para la Web, decidió descontinuar el uso del HTML y reemplazarlo por el XHTML ( Extensible Hypertext Markup Language). El XHTML es casi idéntico al HTML pero la diferencia básica consiste en que es un código más limpio y utiliza reglas muy estrictas en cuanto a como el código debe ser escrito, lo que lo hace un lenguaje más universalmente compatible con diferentes sistemas operativos y navegadores.

Curso Básico de Dreamweaver 2

Curso Básico de Dreamweaver

El World Wide Web Consortium determina estándares para la Webwww. w3.org

Dreamweaver CS4 maneja código basado en XHTML, aunque soporta perfectamente el uso de HTML.Una ventaja fundamental de Dreamweaver es que podemos concentrarnos única y exclusivamente en el diseño sin necesidad de escribir una sola línea de código al crear un sitio Web.

Sistemas OperativosToda página debe ser diseñada para funcionar en los principales sistemas operativos:Windows, Macintosh, Linux o Unix.

NavegadoresLos navegadores son visualizadores de páginas web que permiten visualizar documentos de Internet

Cuando se carga un documento HTML en un navegador como Firefox, Safari, Chrome o Explorer, este lo lee para formatear el texto y las imágenes sobre la pantalla.No todos los navegadores soportan todas las etiquetas y aunque trabajen con las mismas pueden interpretarlas de diferntes formas.Los navegadores cambian frecuentemente de versión. y es común que viejas versiones de navegadores no soporten etiquetas XHTML. Otro problema es que las compañías como Microsoft, Mozilla o Apple crean etiquetas propias que sólo pueden ser apreciadas con sus respectivos navegadores.

Nota: Existen páginas que presentan estadísticas muy útiles sobre el uso de navegadores, sistemas operativos. etc.http://www.w3schools.com/browsers/browsers_stats.asp

Tipografía

Características de la tipografía en la WebLa pantalla de computadora reproduce las fuentes a una resolución muy baja de 72 dpi.La principal característica de la de la tipografía en la web es su variabilidad, ya que cada línea de texto, cada titular, cada estilo y tipo de fuente, se reconstruye sobre la base de una interacción compleja entre el navegador, el servidor y el sistema operativo con el que se visualice.

Vista Código y Diseño

3


CSSDeterminan la forma en que se visualiza la información.

JavascriptEs un lenguaje que agrega interactividad y funcionalidad a un sitio web.Permite crear interactividad, por ejemplo, a través de rollovers, la aertura de nuevas ventanas, etc. A través, de funciones especiales de Dreamweaver conocidas como Behaviors o Comportamientos, puede generarse Javascript de forma automatica.

Directrices para nombrar archivosUn sitio Web está constituido por una serie de páginas conectadas entre sí.La forma en que cada una de estas páginas es nombrada es de vital importancia para que los vínculos entre ellas sean adecuados.Las directrices para el nombramiento de archivos son: 1) Procurar utilizar nombres cortos, ejemplo: contacto.html

2) No utilizar espacios en los nombres de los archivos, y de hacerlo utilizar guión bajo, ejemplo: nuevos productos.html - incorrecto nuevos_productos.html - corretco

3) No utilizar caracteres especiales y utilizar siempre minúsculas. ¿? ¡ ! “ “ # $ % / & * ( ) @ . , : ; ñ

5) Consistencia al utilizar las extensiones .htm o .html a lo largo del sitio, ejemplo: historia.htm o historia.html El tipo de extensión a utilizarse puede elegirse en las preferencias de Dreamweaver.

Estructura del StioUn sitio Web está constituido por una serie de archivos (páginas)vinculadas entre sí. Para crear correctamente un sitio en Dreamweaver, es necesario crear la carpeta que alojará el sitio, llamada Root Folder o Carpeta Raíz. En la Carpeta Raíz se crea la estructura del sitio a través de diversas carpetas y páginas con la extensión html o htm. Las carpetas pueden contener páginas adicionales u otras carpetas conteniendo más páginas.Cuando se define un sitio en Dreamweaver se hace apuntando hacia la Carpeta Raíz.

Siempre que nos conectamos a Internet lo hacemos mediante una dirección Web que nos conecta a una computadora (servidor) que hospeda nuestro sitio web en algún lugar.Cuando se escribe una dirección en el navegador se le indica al mismo buscar la página por default en la Carpeta Raíz o sea el index. html.A menos que se indique en la dirección que se ingresa en el navegador otra página, el navegador siempre nos dirigirá al index.html.El index se refiere a la página principal en cada directorio.

Ejemplo: 1) www.anahuac.mx/diseno Me dirige automaticamente al sitio diseño, a la página denominada index.html dentro de la carpeta del sitio.

2) www.anahuac.mx/diseno/programas.html Me dirige a la página denominada programas.html

4


5

3) La carpeta raíz está constituida por páginas y otras carpetas, dentro de las cuales pueden existir páginas denominadas index. html. Esto se refleja en la dirección que ingresamos al navegador a través de un /.


Gráficos Web

Características de los gráficos en la WebLa visualización de gráficos en la web se basa en el modelo de color RGB.Los valores de transmisión de datos en la web varían según el modem que tenga el usuario, la velocidad del servidor web, la conexión a internet y otros factores.La mayor parte de los usuarios que acceden a la web lo hacen generalmente a través de modems de 56 kilobytes por segundo. A esta velocidad el tiempo aproximado de descarga de la página es de 7 Kb por segundo.Cuanto más gráficos contenga una página, el usuario tendrá que esperar más tiempo para que esta descargue. Es muy importante considerar que imágenes son verdaderamente necesarias y el tamaño de las mismas.A la velocidad de los modems actuales, una página web diseñada para usuarios con conexión modem debe contener máximo entre 50 y 75 kilobytes de elementos gráficos.

Colores Web Safe o SegurosLos navegadores administran el color en base a una paleta de 216 colores que son los colores comunes entre las paletas de los sistemas operativos (Windows y Macintosh) y en distintos monitores.La utilización de colores Web safe garantiza la visualización del color de la misma forma por todos los usuarios.

Resolución de las imágenesDebido a la baja resolución de los monitores, las imágenes destinadas a la Web deben ser optimizadas a 72 dpi en programas de edición de imágenes como Photoshop, ImageReady o Fireworks.

Optimización de imágenesLos diferentes tipos de imagen utilizan modelos de compresión diferentes que han sido diseñados para funcionar dependiendo del tipo de imagen.

Formato GIFEste formato funciona muy bien para imágenes con grandes zonas de color homogéno. El formato GiF permite reducir el número de colores al mínimo necesario, y eliminar los colores que no sean indispensables para mostrar la imagen. Un archivo GIF no puede tener más de 256 colores, pero sí un número inferior.

Ventajas:• Es el formato más utilizado en la Web• En imágenes gráficas funciona mejor que el JPEG• Permite transparencias y la producción de gráficos animados

Formato PNGpng son las siglas de Portable Network Graphics, un formato de compresión de imágenes aprobado por el World Wide Web Consortium (W3C) como sustituto del formato .gif. Los archivo tipo .gif utilizan un algoritmo de compresión de datos que está patentado, mientras que el formato .png no está patentado y no necesita licencia para su utilización. Al igual que el formato .gif, el .png son mejor para imágenes gráficas

Ventajas:• No está patentado• En imágenes gráficas funciona mejor que el JPEG• Permite transparencias y la producción de gráficos animados

6


Formato JPEGEl formato JPEG es el adecuado para imágenes a todo color como fotografías.Este formato permite guardar las imágenes con diferntes niveles de calidad. Si el nivel de calidad es bajo la imagen crea distorsión, lo que se conoce como ruido en la imagen.

Ventajas:• Permite un alto índice de compresión que resulta en tiempo de descarga más cortos.• Produce excelentes resultados con fotografías e imágenes complejas.• Funciona bien con imágenes a todo color.

Nota: Es muy importante que al momento de optimizar las imágenes estas sean producidas al tamaño que ocuparán en la página.Una vez que una imagen ha sido comprimida en cualquiera de los formatos anteriores, los datos originales de la imagen se han perdido. Es muy importante guardar siempre el archivo original de las imágenes o gráficos.

7

Imagen ideal para ser optimizada en formato JPEG.

Ventana para la optimización de imágenes en Photoshop.File/Save for Web

Imagen ideal para ser optimizada en formato GIF o PNG


DreamweaverLa interfaz de Dreamweaver

Ventana de BienvenidaAl abrir Dreamweaver, aparece una ventana de Bienvenida cuya función es permitirnos acceder rapidamente a las diferentes opciones y funciones del programa.

Barra de Herramientas de la aplicaciónLa barra de herramientas de la aplicación nos permite un acceso rápido a las funciones del programa como espacios de trabajo, vistas del documento, administración del sitio y ayuda para el manejo del programa.La Barra de herramientas puede mostrarse u ocultarse a través del menú Ventana > Barra de la aplicación

Barra de Herramientas del DocumentoLa barra de herramientas del documento se encuentra en la parte superior de la ventana del documento y contiene botones y menús para ejecutar diversas tareas.

Los tres primeros botones son modos de visualización de la página: Code, Split y Design. 1) Design: permite trabajar en lo que es conocido como modo WYSIWYG (What you see is what you get). 2) Code: permite trabajar concentrándose en el código. Otra buena opción para trabajar con el código mientras se mantiene el modo Design, es abrir el Inspector de Código por medio del Menú Windows o F10. 3) Split: este modo permite la visualización del diseño y el código en

8

la misma ventana. Podemos ver reflejado en el código cualquier cambio que realicemos en el diseño.

Los botones del lado derecho se utilizan para distintas funciones:

Botón Live CodeSirve para validar la sintaxis del código del documento, el sitio, etc., en busca de errores.Botón de checado de compatibilidad con el navegadorSirve para validar el código en diferentes navegadoresBotón Live ViewBotón de InspecciónBotón de previsualización en el navegadorPermite la previsualización de un documento en diferentes navegadores.Botón de elementos de asistencia visualPermite mostrar u ocultar elementos como bordes de tablas, reglas, guías,etc.Botón de actualiazación del documentoSi se han realizado cambios en el código de un documento se utiliza el botón Refresh para que los cambios sean visibles en el Modo de visualización Design.Campo de Título, es en donde se ingresa el título de la página, mismo que aparecerá en la parte superior de la ventana cuando la página sea visualizada en un navegador y servirá para permitir marcar páginas favoritas desde el mismo.File Management Button (Botón de administración de archivos)Permite subir y bajar archivos desde la computadora al servidor y viceversa.


Ventana del Documento

Panel propiedadesSelector de Etiquetas

Barra de herramientas de la aplicación

Barra de herramientas del Documento

Paneles

Barra de Menús Panel Insertar

Interfaz de Dreamweaver CS5

Espacios de trabajo

Previsualización en navegadores

9


10

Ventana del Documento y Paneles

Ventana del documentoEs la ventana de trabajo, despliega el documento de la forma en que éste será visualizado en el navegador. La barra de título incluye en un paréntesis el nombre del archivo y un asterisco si contiene cambios que aún no han sido salvados.

En la parte inferior del documento se encuentra la barra de estado:Selector de etiquetas: Se encuentra en la barra de estado del lado izquierdo. Srve para seleccionar etiquetas HTML y es de gran utilidad cuando es necesario seleccionar algún elemento de dificil selección como el borde de una tabla, una imagen , etc.

Previsualizador del documento - Del lado derecho, en primer lugar, se encuentra el previsualizador del documento que nos permite ver el documento a diferentes resoluciones.

Indicador de tiempo - Del lado dercho del previsualizador del documento está un área que nos da un estimado del tiempo que tardará esta página en bajar; incluyendo todas sus imágenes, animaciones y ligas.

Paneles Dreamweaver cuenta con una gran variedad de paneles que nos permiten realizar tareas específicas. Los paneles pueden ser accesados desde el menú Ventana y algunos como el de Insertar y el de Propiedades se usan frecuentemente, mientras que otros son más especializados y se utilizan ocasionalmente.Los paneles se presentan organizados dependiendo del espacio de trabajo que se elija.

Aunque Dreamweaver cuenta con espacios de trabajo predeterminados, también es posible determinar espacios de trabajo propios.

Los paneles pueden ser agrupados y desagrupados y podemos tener acceso a ellos a través del menú Ventana.

Para ocutar los paneles provisionalmente:Windows - F4

Panel InsertVentana > Insertar Control + F2 en WindowsComando + F2 en Mac

Panel InsertarContiene un menú con diferentes categorías que muestran una serie de íconos con elementos que pueden ser insertados en la página.La disposición del Panel Insertar puede modificarse si en el menú de las categorias del panel elegimos Mostrar Categorías .Se puede crear una categoría en el panel Insertar para mostrar los elementos más comunmente utilizados. En el menú de categorías del panel se encuentra la categoría Favoritos. Para añadir un objeto a esta categoría se debe dar click sobre algún o


Planeación y defiinición del sitioEl principal objetivo de crear un sitio en Dreamweaver es tener la posibilidad de crear y editar páginas de forma local en nuestro disco, para después subir esas páginas a un servidor y que sean accesibles publicamente.Se le llama sitio o website al conjunto de páginas en un servidor que pueden ser accesadas a través de un navegador.La creación de un sitio en Dreamweaver inicia con su planeación previa: número de páginas que deberán ser creadas, contenido de cada una de las páginas y la conexión entre dichas páginas.

Pasos para el desarrollo de un sitio webComo en cualquier proyecto editorial, la planeación es una parte importante del diseño de un sitio Web.Procedimento a seguir cuando se crea un sito para la Web:

1) Determinar los requerimientos del servidor Antes de diseñar una página web debemos conocer ciertos datos que deberán ser facilitados por el Web master o administrador del servidor (lugar donde se hospedará nuestra página para ser accesada por cualquier usuario)

Nombre del dominio del sitio en la Web• Qué sistema operativo y software se utilizará para la creación

del sitio.• Cuánto espacio existe disponible para el sitio.• Cómo se enviarán los archivos para su montaje en el servidor

(vía FTP, conexión directa, etc.)• Recursos a utilizar (Flash, QuickTime, etc.) Si se utilizaran mapas de imágenes del lado del servidor

2) Bocetar las páginas y determinar la estructura del sitio. Para organizar la estructura del sitio• Organizar desde un principio carpetas y subcarpetas que

contendrán los archivos de cada página, para así evitar problemas posteriores como ruptura de ligas en el momento de mostrar el sitio en un servidor.

• Estructurar la relación que existe entre las páginas mostrando la página de inicio y la relación de ésta con el resto de las páginas y con otros documentos fuera del sitio.

• Realizar un esquema de nombres que muestre la forma en que serán ordenados los archivos que conforman el sitio.

Para cada página se deberá:• Realizar la diagramación

Considerar la utilización de marcos, tablas, imágenes, animaciones, sonidos, etc.

• Determinar las ligas y elementos en la página que se utilizarán como instrumentos de navegación del sitio.

3) Desarrollo de las páginas• Deberá tenerse cuidado sobre las convenciones de nombres

dependiendo del servidor donde se mostrará el sitio (que no exceda de ocho caractéres, que las extensions no sobrepasen tres caracteres, etc.).

• Antes de armar deberá contarse con el texto, imágenes optimizadas, animaciones, etc.

• Crear las páginas en Dreamweaver incorporando los elementos previamente desarrollados en programas como Fireworks.

4) Crear y probar las ligas

11


Revisar que las ligas funcionen en File/Preview in Browser de Dreamweaver.

5) Montar el sitio en el servidor Cuando se ha concluido la producción del sitio en Dreamweaver se puede montar en el servidor. La forma de hacerlo varía dependiendo de la plataforma del servidor y la conexión. Lo ideal es consultar al Web Master.

6) Probar el Sitio Una vez que el sitio ha sido montado en el servidor, deberemos probarlo en distintas máquinas y con distintos navegadores como si fueramos un usuario cualquiera con el fin de poder detectar cualquier tipo de problema y poder solucionarlo antes de que el sitio sea accessible en la Web.

7) Mantenimiento Practicamente todos sitios requieren de un mantenimiento periódico que permitirá actualizar los datos, añadir páginas al sitio, cambiar las imágenes, etc. Es muy importante cuidar los cambios que se hacen porque se puede provocar la ruptura de ligas. El web master deberá ser quien nos oriente con respecto a la realización de estas actualizaciones.

Definición del sitio en DreamweaverAntes de empezar a trabajar con Dreamweaver es necesario dar de alta un sitio local que definirá la estructura del sitio. Un sitio local requiere de un nombre y un Folder Raíz (Root Folder), que será el lugar en donde se almacenarán todos los archivos del sitio. Cada vez que se inicie un nuevo proyecto deberá definirse este folder. Una buena idea es crear una carpeta en nuestra computadora a la que denominaremos sitios. Esa carpeta alojará los distintos sitios que iremos creando en Dreamwever.

1) Seleccionar en el menú Sitio > Nuevo Sitio o si acabamos de abrir el programa en la Ventana de Bienvenida elegir Sitio de Dreamweaver.

2) En el primer campo escribir el nombre para el nuevo sitio por ejemplo: mi_sitio. No importa si utilizamos espacios, mayúsculas o caracteres especiales.

3) En el siguiente campo debemos seleccionar la carpeta y la localización de esa carpeta que es donde se guardarán todos los archivos, o sea la Carpete Raíz o Root Folder.

4) Salvar.

5) En el Panel Archivos (Ventana > Archivos), en la parte superior aparece un menú que es donde se muestran los sitios que tenemos guardados. Si seleccionamos el sitio que acabamos de crear el panel nos mostrará todos los archivos que hasta el momento conforman el sitio.

12


Si damos doble click sobre el menú que muestra los sitios, podremos acceder a la ventana de configuración del sitio.

6) En la ventana de configuaración del Sitio, si damos click a Configuración avanzada en el menú del lado izquierdo, podemos elegir la opción Información Local y en el primer campo denominado Carpeta de Imagenes por default, elegir en que carpeta de la Carpeta Raíz se guardarán las imágenes que iremos añadiendo a nuestro sitio. Si por ejemplo, añadimos una imagen a un archivo del sitio, automaticamente Dreamweaver realiza una copia de esa imagen a la Carpeta de imágenes. Si no hemos creado una carpeta denominada imàgenes dentro de la carpeta raíz hay que hacerlo.

7) En vínculos relativos a: seleccionar Documento.

8) En el campo Dirección HTTP debe ingresarse la dirección en la que eventualmente residirá mi sitio en la Web. Si no se tiene aún la dirección, no hay que ingresar ninguna información.

10) Seleccionar la casilla Case sensitive links. Esto permitirá a Dreamweaver checar que no existan vínculos con mayúsculas

11) Seleccionar la casilla Permitir Caché. El site Caché es la forma en que Dreamweaver almacena cierta información con el fin de que algunas operaciones del programa sean más rápidas.

Dar click en OK.

A partir de este momento el Panel Sitio muestra la Carpeta raíz para nuestro nuevo sitio y un ícono donde podremos ver nuestros archivos a manera de árbol.

Panel SitioEste panel nos muestra todos los archivos y carpetas contenidos en nuestro sitio y nos permite trabajar con ellos ya sea para abrirlos, copiarlos, pegarlos, moverlos o borrarlos. Todos los cambios que se realicen al sitio deben realizrse desde este panel. En la parte superior del Panel Sitio, si doy un click con el botón derecho, aparece un menù que me permitirà por ejemplo añadir una nueva carpeta al sitio. En la Mac esta operación se realiza con presionando la tecla Comando y dando click sobre esa carpeta.

13


Creación de una páginaUna vez dado de alta un sitio se pueden comenzar a crear una a una las páginas que conformarán el sitio. Las páginas pueden ser creadas basadas en diseños predefinidos o diseños totalmente originales.

Podemos crear páginas nuevas desde:• La ventana de Bienvenida• El Panel de Archivos• El Menú Archivo > Nuevo

Dimensiones de la páginaEl principal soporte de la información en la Web es la pantalla. Uno de los errores más frecuentes en el diseño de páginas web es prolongar el ancho de los elementos gráficos más allá del área visible en monitores de diecisiete a diecinueve pulgadas, a una resolución de 1024 x 768 pixeles, que es el estándar utilizado por la mayoría de los usuarios.

La zona segura es determinada tanto por el tamaño mínimo de las pantallas de uso corriente y el ancho del papel que se usa al imprimir una página web y está determinada por el tipo de navegador en el que será visualizado el sitio.

Ejemplo:Dimensiones de la zona segura para diseños maximizados para pantallas de 800 x 600:Ancho máximo: 760 pixelesAltura maxima: 410 pixeles (visible sin utilizar la barra de desplazamiento)

Longitud de la páginaLas páginas web largas obligan al usuario a memorizar demasiada información que desaparece o se sale de la pantalla. Debido a ello, el usuario tiende a perder el sentido de la orientación cuando los principales enlaces y botones de navegación no están a la vista.

Una ventaja de las páginas largas es que el usuario no tiene que saltar de página en página buscando la información y puede imprimir la página para no tener que leer todo el contenido en pantalla. Se recomienda utilizar anclas en intervalos cortos de la página con el fin que el usuario pueda regresar al inicio.Cualquier página que supere las dos pantallas verticals en su longitud, deberá tener un botón de salto al inicio en el pie de página.

ancla

14


Creación de una página nuevaArchivo > Nuevo

Creación de una página a partir de diseños predefinidos1) Archivo / Nuevo

2) Aparecerá la ventana Nuevo Documento (elegir la pestaña Plantilla HTML).

3) Elegir alguno de los Diseños preseterminados.

4) Dar click en Crear.

5) Comenzar a personalizar el documento y en Archivo > Salvar como, darle un nombre al archivo para guardar dentro de la Carpeta Raíz. La nueva página aparecerá y ver en el panel Archivos dentro de nuestro sitio. La nueva página muestra la estructura básica de cualquier página web, tablas a manera de contenedores de texto e imágenes.

Determinar las propiedades de una páginaDespués de crear una nueva página, sus propiedades básicas deben determinanarse mediante el menú Modificar > Propiedaes de Página.

Título: este es el nombre que aparecerá en la barra superior de la página cuando esta sea desplegada en el navegador; también es el texto que aparecerá registrado en los bookmarks.

Página generada a partir de un diseño predefinido

Ventana para determinar las propiedades de la página.Modificar > Propiedades de la Página

15


Imagen de Fondo: Selecciona el archivo que se desplegará como patrón en el fondo de la página.

Fondo, Texto, Vínculos, Vínculos visitados, Vínculos activos: aquí puede determinarse la apariencia que presentarán estos elementos en nuestra página.

Herramientas para modificar el contenido de una páginaLos diseños preestablecido pueden contener elementos que no necesitamos para nuestra página. Dreamweaver permite por medio del menú Modificar y paneles del menú Ventana como Insertar y Propiedades, hacer modificaciones al diseño preestablecido.

La barra Insertar contiene botones para insertar varios tipos de objetos como imágenes, tablas y capas en un documento. cada objeto es una pieza de código HTML que permite establecer varios atributos según estos son insertados.

Cambiar la vista del documento por medio del panel InsertVentana > InsertarSeleccionar la pestaña LayoutSeleccionar el botón Layout ViewEsta vista nos mostrará una pestaña en verde sobre cada tabla de la página. Cada una de estas pestañas, al ser seleccionadas, muestra las medidas de cada celda y una pequeña flecha que nos mostrará un menú donde podremos cambiar el ancho de la columna a fijo o autostretch según convenga.

Propiedades de una PáginaLas propiedades de una página son todo aquello que determina las características de la misma, como su título, color del fondo, color del texto , etc.Modificar > Propiedades de la Página

Puede asignarse el título a una página a través de las propiedades de la misma o en la barra del documento.Otra forma de asignar el título a la página es por medio de la barra del documento que se localiza en la parte superior del mismo.Ver > Herramientas > DocumentoDar un nombre al documento y salvar.

Nota: Es muy importante dar el nombre a las páginas ya que es la única forma en que la página puede ser encontrada por un buscador.

Edición del textoSe puede insertar texto en la ventana del documento o copiarlo y pegarlo de otra fuente como un documento de Word y después

16


darle formato a través del panel Propiedades u hojas de estilo CSS (Cascading Style Sheets).Conforme escribimos texto y lo editamos en la vista de Diseño, Dreamweaver genera el código html. Si queremos ingresar código directamente debemos hacerlo desde la vista Código.

Uso de TablasEn cualquier página web, las tablas son indispensables para organizar los elementos de nuestra página y controlar la ubicación de texto e imá genes mediante el uso de celdas.

Las tablas se insertan en la página a través del panel Insertar > Tabla del menu Ventana.

1) Colocar el cursor en el lugar donde quiera insertarse la tabla y dar un click sobre el botón de inserción de tablas: menú Ventana > Insertar > Tablas

2) En el cuadro de diálogo que aparece ingresar la siguiente información: Filas/Columnas: especificar el número de filas y columnas

Cell padding: determina la cantidad de espacio entre el contenido de la celda y el borde de la misma.

Cell Spacing: especifica la cantidad de espacio entre cada celda sin incluir el borde exterior de la tabla.

Nota: Cuando no se asignan valores específicos, la mayor parte de los navegadores despliegan el cell padding como si tuviera

17


valor de 1 y el cell spacing a un valor de 2. Para asegurarse que todos los navegadores muestren la tabla sin cell padding y cell spacing, determinar como valores 0.

Ancho: indica el ancho de la tabla en pixeles o un porcentaje determinado de la ventana del navegador.Generalmente no es necesario establecer el alto de la tabla.

Borde: determina el ancho de los bordes de la tabla.

Nota: Cuando no se especifica el valor del borde, la mayor parte de los navegadores muestran la tabla como si el borde hubiera sido establecido con un valor de 1. Para asegurarse que todos los navegadores muestren la tabla sin bordes el valor que se asigne al borde debe ser 0.Para ver los bordes de las celdas y la tabla cuando estos se les ha asignado un valor de 0 , ir al menu Ver >Auxiliares visuales > Borde de tablas.

Una vez creada una tabla y teniendola seleccionada se pueden modificar todos estos valores desde el panel de Propiedades.

Propiedades de las Tablas Además de las caracteríaticas antes mencionadas, en el menú Propiedades de la tabla se pueden determinar otras características como:

Alineación: determina donde aparecerá la tabla, en relación a otros elementos en el mismo párrafo como texto o imágenes.Las alineaciones más com munes son derecha, izquierda, centrado y default. Default, indica que el navegador debe utilizar su alineación por default.

Botones Borrar ancho de columna y Borrar alto de la fila: estos botones eliminan los valores especificados para el ancho y la altura de las columnas e hileras de la tabla.

Botones Convertir ancho de la tabla a pixeles y Convertir alto de la Tabla a pixeles: estos botones convierten todos los valores de la tabla a pixels.

Botones Convertir Ancho de Tabla a porcentaje y Convertir Alto de Tabla a porcentaje: estos botones convierten todos los valores de la tabla a un porcentaje de del ancho de la ventana del documento.

Color de fondo: es el color de fondo de la tabla.

Color del borde: es el color de los bordes de la tabla. Propiedades de columnas, filas y celdas

Propiedades de tabla

18


Imagen de fondo: es la imagen de fondo de la tabla.

2. Cuando introduces un valor en una caja de texto, presionar Tab o Enter (Windows) o Return (Mac) para aplicar el valor.

Propiedades de columnas, filas y celdasHoriz: alínea el contenido de una celda en sentido horizontal (izquierda por default pra celdas normales y centrado para celdas de encabezado), derecha, izquierda o centro.

Vert: alínea el contenido de una celda en sentido vertical (a la mitad por default), arriba, abajo, a la mitad, o en la línea base.

Bg(top): selecciona la imagen de fondo.

Bg (botom): aplica color a la celda.

Borde: pone un borde a la celda.

Unir/Separar: Une o divide celdas. No ajustar: previene que el texto colocado dentro de una celda cambie de renglón automaticamente.

Encabezado: formatea una celda como encabezado (body y centrado).

Cambiar el ancho o alto de una celdaArrastrar manualmente las divisions de las celdas.

Agregar columnas o hilerasSeleccionar del menu Modificar > Tabla > Insertar Columna-Fila.

Eliminar columnas o hilerasSeleccionar del menú Modify/Table/Delete Colum-Row o seleccionar las celdas que se desean eliminar y oprimir Suprimir.

Copiar celdasSeleccionar las celdas y copiarlas com Command+C, ubicarse en el lugar de destino y pegarlas con Command+V.

Insertar imágenes y texto a una tablaPuede escribirse directamente dentro de las celdas de una tabla o pegar texto proveniente de otras aplicaciones.En el caso de las imágenes éstas se insertan con el panel Insertar.

Creación de ligasLas ligas conectan los diferentes documentos del sitio, comunmente se les conoce como hipertexto y botones.

Ligas absolutas y ligas relativasExisten 3 formas de llamar a un documento ligado a través del campo Vínculo del panel Propiedades.

• Ligas absolutas: Mantienen su exactitud sin importar la localización del documento fuente, pero no ligan si el destino del documento es movido. Este tipo de liga debe utilizarse cuando ligamos a documentos externos a nuestro sitio.

19


• Ligas relativas a la raíz: siempre empiezan en la raíz del sitio actual. Los caminos relativos a la raíz comienzan con una diagonal y le indican al servidor que inicie en la raíz. Un camino relativo a la raíz es la mejor forma de ligar archivos donde el contenido debe ser movido constantemente. Los caminos relativos a la raíz no son apropiados para sitios diseñados par ser vistos a nivel local como presentaciones, para esto se deberán usar ligas relativas al documento.

Nota: el contenido ligado con caminos relativos a la raíz no aparecen cundo los previsualizas localmente en un navegador, esto se debe a que estos no reconocen caminos relativos a la raíz (los servidores si lo hacen) Para previsualizar este tipo de contenido es necesrio colocar el sitio en un servidor remoto y conectarse a él.

• Ligas relativas al documento: son relativas al folder que contiene el archivo.

Creación de ligasExisten varias maneras de crear ligas:

• Utilizar el ícono apuntar a archivo del panel Propiedades arrastrándolo hacia algún documento del Panel Archivos. • Escribir o buscar en el panel Inspector la ruta que debe seguir la liga.• Utilizar anclas para acceder a posiciones específicas dentro de un documento• Hacer una liga a un e-mail, una nueva ventana o un script para abrir programas de gestión de e-mail o accesar a Java Script.

Crear un anclaLas anclas nos permiten realizar ligas a diferentes partes de un documento

1) Colocar el cursor donde necesitamos que aparezca el ancla (el lugar a donde nos llevará la liga)2) En Ventana > Insertar > Comunes seleccionar dar click sobre el ícono de ancla.3) En el cuadro de diálogo dar un nombre al ancla (minúsculas y si vamos a utilizar espacios usar el guión bajo)4) Para ligar un texto u objeto en la misma página al ancla, seleccionarlo y escribir en Propiedades, en el campo Link, el signo # y el nombrre del ancla. Ejemplo: #exposición5) Si el ancla se encuentra en otra página, ligar a la página e inmediatamente escribir el signo # y el nombre del ancla. Ejemplo: archivo.html#exposición6) También puede utilizarse el ícono apuntar a archivo mientras seleccionas el objeto que funcionará como liga y lo arrastras hacia el ancla del documento abierto.

Otro tipo de ligas1) Liga hacia un e-mail: Seleccionar un texto o imagen en la página y en Window/Insert/Common seleccionar el icono de un sobre y aparece un cuadro de diálogo donde escribiremos el e –mail al que queremos ligar.2) Para lograr que un documento ligado aparezca en un lugar determinado seleccionar en el panel properties (Ventana > Propiedades) en el campo Target. 3) Cualquiera de las siguientes opciones:• blank: carga el documento ligado en una nueva ventana del navegador.

20


• parent: carga el documento ligado en el fraameset o la ventana madre que contiene la liga. Si el frame que contiene la liga no esta anidado, el documento ligado ocupará la ventana completa.• self: carga el documento ligado en el mismo frame o ventana. Este destino aparece como el default, así que usualmente no tendrás que especificarlo.• Top: carga el documento ligado en la ventana completa moviendo todos los frames existentes.

ReferenciasLynch, P. y Horton, S. (2001). Manual de Estilo Web. Principios de Diseño básico para la creación de sitios web. Barcelona: Gustavo Gili.

www.webstyleguide.com

Páginas Webwww.adobe.comwww.lynda.comwww.w3.com

21

manual dreamweaver cs5

Documents