Dreamweaver - ofelianarvaez.edu.mx
Anuncio
Curso sobre Dreamweaver - Nivel Básico 1. Introducción ¿Qué es Dreamweaver? Niveles del Curso 2. Nivel Básico Lección 1: El Área de Trabajo El Sitio Local Lección 2 Insertar Texto La Barra de Propiedades de Texto Fondo de la Página Lección 3 Insertar Enlaces Insertar Imágenes Guardar las Páginas Lección 4 Insertar Enlaces sobre Imágenes La Barra de Objetos La Barra de Objetos más usados Insertar Imágenes Rotativas Insertar imagen de fondo Lección 5 Tablas Insertar Tablas Propiedades de las Tablas Insertar texto en la Tabla Insertar imagen en la Tabla Seleccionar elementos de una Tabla Agregar filas o columnas a la Tabla Lección 6 Combinar celdas de una Tabla Dividir celdas Eliminar filas Eliminar columnas Antes de empezar Para comenzar a trabajar con Dreamweaver 2 será necesario crear un SITIO LOCAL. Este sitio deberá encontrarse en alguna unidad de almacenamiento (disco rígido, flexible, CDR, etc) y almacenará todos los archivos (documentos, imágenes, animaciones,etc) pertenecientes al Sitio Web que estamos creando. El sitio local requiere un nombre y una carpeta raíz, que le indica al programa dónde guardar los archivos. Para crear un sitio local debemos: 1. Pulsar sobre el menú ARCHIVO (File). 2. Pulsar sobre NUEVO SITIO (New Site). 3. Seleccionar la categoría (Category), en este caso Información Local (Local Info). 4. Dar nombre al sitio (Site Name). 5. Especificar la carpeta raíz local (Local Root Folder) La siguiente ventana nos muestra la ubicación del sitio local y los archivos que contiene. Para abrir y trabajar en un documento debemos pulsar dos veces sobre el mismo. ¿Qué es Dreamweaver? Dreamweaver es una editor profesional para crear y mantener sitios web utilizando la técnica WYSIWYG: What You See Is What You Get (lo que se ve es lo que se obtiene). De esta manera no es necesario conocer ni recordar código HTML comunmente utilizado para esta tarea. Con Dreamweaver se trabaja de manera similar a la de un procesador de texto. A diferencia de otros editores que utilizan el método WYSIWYG, Dreamweaver permite trabajar con DHTML (DynamicHTML), insertar capas en las páginas, insertar componentes multimedia (active x), applets creados en Java, películas creadas con Flash y películas Shockwave. Todas estas utilidades sumadas a las que describiremos en este curso, darán a sus páginas web un toque profesional e interactivo. El curso que aquí se presenta constará de dos niveles: Para realizar el curso es fundamental completar cada uno de los niveles, ya que un nivel sucede a otro no solo en complejidad, sino también en el uso de las distintas herramientas de este poderoso editor. Lección 1 El Área de Trabajo Al iniciar Dreamweaver 2 identificaremos el área de trabajo (el color de fondo es blanco por defecto) y las paletas flotantes. A la derecha, en forma vertical, se halla la paleta de objetos (Objects); abajo en forma horizontal se halla la paleta de propiedades (Properties). En la parte inferior derecha de la ventana observamos la barra de navegación (Launcher).Oportunamente se explicaran las funciones que presentan cada una de dichas barras. Ventana y área de trabajo del Dreamweaver 2 Como ya se mencionó anteriormente Dreamweaver 2 trabaja de manera similar a un procesador de texto, así que para crear las páginas web de nuestro Sitio solo deberemos introducir texto, agregar imágenes, agregar los efectos o componentes convenientes y listo. Lección 2 Insertar Texto Es muy sencillo insertar texto en un documento de Dreamweaver 2, solo basta tipearlo. Igual que con un procesador de texto también podemos modificar las propiedades del texto (color, tipo y tamaño de fuente, alineación, estilo, etc) desde la Barra de Propiedades. Cada objeto (texto, enlaces, imágenes, tablas) tiene propiedades definidas, por eso al seleccionar distintos objetos, la barra de propiedades cambiará según el objeto que se seleccione. Desde la barra de propiedades podemos también agregar viñetas, modificar sangrías e inclusive colocar enlaces al texto. La Barra de Propiedades de Texto Formato del texto (h1, h2, etc) Tipo de fuentes Tamaño de fuentes Estilo de fuente, negrita (BOLD) o cursiva (ITALIC). Alineación de texto (izquierda, centro, derecha). Insertar enlaces (LINKS). Insertar viñetas. Aumentar y disminuir sangría. Modificar el color del texto. Al pulsar sobre el cuadro del color se abrirá la siguiente ventana donde podremos seleccionar el color deseado. Fondo de la Página Se puede cambiar el color de fondo de página de manera muy sencilla. En la barra de menú pulsamos sobre MODIFICAR (Modify) y luego sobre PROPIEDADES DE PÁGINA (Page Properties). En la siguiente ventana podremos modificar el color de fondo de la página. Pulsando en la entrada FONDO (Background) se abrirá la paleta de colores disponibles para tal fin. Desde esta ventana también podemos colocarle el título a la página que estamos creando. El título aparecerá en la Barra de Título de la ventana del navegador. Para colocar el TÍTULO (Title), pulsamos en la entrada correspondiente y lo escribimos. Para que todos estos comandos tengan efecto debemos pulsar ACEPTAR (Ok). Lección 3 Insertar Enlaces (LINKS) Como es sabido existen dos tipos de enlaces (Links), de texto y de imágenes. Es decir que podemos insertar un enlace sobre el texto o sobre una imagen. Antes de insertar un enlace debemos asegurarnos que la página de destino existe y funciona, si la página de destino se encontrará dentro del Sitio que estamos creando, debemos crearla previamente. Para insertar un enlace desde texto, debemos seleccionar dicho texto y pulsar sobre la carpeta que se encuentra a la derecha del comando LINK de la Barra de Propiedades. Aparecerá la siguiente ventana donde podremos seleccionar la página de destino del enlace que estamos creando, luego pulsamos SELECCIONAR (Select). En la ventana del navegador la palabra o frase sobre la cual insertamos el enlace aparecerá subrayada. Insertar Imágenes Los archivos de imágenes se pueden presentar en diferentes formatos (bmp, tiff, wmf, etc.). Los formatos más utilizados en la Web son: GIF y JPG, debido a que dichos formatos presentan un mayor grado de compresión que los otros. La diferencia básica entre GIF y JPG radica en la cantidad de colores que soporta cada formato, mientras que GIF tiene una definición de hasta 256 colores, JPG permite trabajar una imagen con 16,7 millones de colores. De aquí podemos discriminar que formato es recomendable para cada uso, si la imagen muestra una fotografía (paisajes, personas, etc.) es conveniente utilizar el formato de mayor definición JPG. Por el contrario, si la imagen muestra dibujos (logotipos, iconos, etc.) podemos usar el formato GIF. Para insertar imágenes debemos pulsar sobre el botón INSERTAR IMAGEN (Insert Image) que se encuentra en la Barra de Objetos. La imagen se insertará donde se encontraba el cursor parpadeando. En la siguiente ventana podremos elegir la imagen a insertar y luego pulsar sobre SELECCIONAR (Select) para colocarla en la página. ATENCIÓN: Si la imagen tiene mucha definición de color (JPG) y sus medidas son grandes, tardará mucho en bajar a la pantalla del navegador. En el sector derecho de esta ventana podremos observar una vista previa de la imagen a insertar. Guardar las páginas Para guardar las páginas del Sitio Web que estamos creando debemos: 1. Pulsar sobre el menú ARCHIVO (File). 2. Pulsar sobre GUARDAR (Save As) 3. Dar nombre al archivo y pulsar sobre Guardar (Save). Lección 4 Insertar Enlaces sobre Imágenes Para insertar un enlace sobre una imagen, primero insertamos la imagen. Seleccionamos la imagen y notaremos que la Barra de Propiedades nos muestra las de la imagen. Pulsamos sobre la carpeta de ENLACE (Link) y en la ventana seleccionamos la página de destino. La Barra de Objetos La Barra de Objetos tiene botones para insertar en el documento, objetos tales como imágenes, tablas, lineas horizontales, etc. Los objetos de la barra se dividen en cuatro categorías: Usuales (COMMON), contiene los objetos más usados como imágenes, tablas, etc. Formularios (FORMS), contiene botones para crear formularios. Encabezado (HEAD), contiene botones de encabezado como Title, Meta, etc. Invisibles (INVISIBLES), contiene botones para insertar objetos invisibles en el documento. Barra de objetos más usados Insertar imágenes. Insertar tablas. Insertar una línea horizontal. Crear Capas (LAYERS). Insertar Applets de Java. Insertar controles Active X. Insertar Plug-ins para Netscape. Insertar película Flash. Insertar película Shockwave. Insertar imagen rotativa (ROLLOVER IMAGE). Cada objeto insertado tiene diferentes propiedades que pueden ser modificadas desde la Barra de Propiedades. Insertar Imágenes Rotativas (Rollover images) Actualmente el efecto de imágenes rotativas es muy utilizado en la construcción de Páginas Web debido a que le da al diseño un aspecto más profesional. Esta programación de Java sería complicada de recordar y de aplicar, pero Dreamweaver 2 hace que sea muy sencilla. Para comenzar necesitaremos dos imágenes, el efecto consiste en colocar una sobre la otra y lograr cambien de lugar, es decir que la de abajo pase arriba y viceversa, la imágenes cambiarán de posición al pasar el puntero del mouse sobre ellas. A todo esto debemos sumarle el enlace. Para insertar una imagen rotativa, debemos: 1. 2. Pulsar sobre el botón INSERTAR IMAGEN ROTATIVA (Insert Rollover Image ) de la Barra de objetos. En la siguiente ventana pulsar sobre el comando BUSCAR (Browse) para seleccionar la Imagen Original (Original Image), hacemos lo mismo con la Imagen Rotativa (Rollover Image), inclusive con el Enlace (Link). Si no enlazamos la imagen el efecto no funcionará. También podemos ponerle nombre al conjunto (Image Name). 3. Pulsamos Aceptar (Ok). La ventana del Navegador nos mostrará la imagen original, pero al pasar el puntero del mouse sobre ella, automáticamente cambiará por la imagen rotativa. Insertar Imagen de Fondo En lugar de colocar un color de fondo de página, podemos insertar una imagen, para que nuestro diseño sea atractivo. Generalmente las imágenes usadas para este fin son texturas trabajadas en editores de imágenes (Photoshop, etc.). Pulsando en el menú Modify (Modificar) accederemos a la ventana de las Propiedades de Página (Page Properties). Pulsando sobre el comando Browse (Buscar) de la entrada Background Image (Imagen de Fondo) seleccionaremos la imagen que necesitamos. Luego pulsamos sobre Ok (Aceptar). La ventana del Navegador nos mostrará la página con la imagen de fondo insertada. Lección 5 Tablas (TABLES) Las tablas se usan para ordenar el contenido de una página. Dentro de ellas podemos insertar texto e imágenes, agregar o eliminar filas (ROWS), celdas (CELLS) y columnas (COLUMNS). Para insertar una tabla debemos: 1. Colocar el cursor donde queremos insertar la tabla. 2. Pulsar sobre el botón Insertar Tabla (INSERT TABLE) de la Barra de Objetos más usados. Desde esta ventana podemos: -Determinar la cantidad de filas (ROWS). -Determinar la cantidad de columnas (COLUMNS). -Determinar el ancho (WIDTH) de la tabla. El mismo puede determinarse en pixeles o en porcentaje. -Determinar el espacio entre el texto y los bordes de la tabla (CELL PADDING). -Determinar el espacio entre las celdas de la tabla (CELL SPACING). Una vez creada la tabla podemos modificar las propiedades de la misma desde la Barra de Propiedades. Insertar texto en la tabla Para insertar texto en la tabla es necesario colocar el cursor dentro de la celda correspondiente y tipearlo. Insertar imágenes en la tabla Para insertar una imagen en la tabla debemos: 1. Colocar el cursor en la celda correspondiente. 2. Pulsar sobre el botón Insertar Imagen (INSERT IMAGE) de la Barra de Objetos. Seleccionar elementos de una tabla Las tablas se componen por tres elementos: filas, columnas y celdas (la intersección de las dos anteriores). Puede ser necesario trabajar sobre alguna de ellas en particular, para hacerlo debemos seleccionarlas. Para seleccionar una o más celdas debemos: 1. Colocar el cursor dentro de la celda correspondiente. 2. Pulsar el botón del mouse y arrastrar hacia abajo hasta seleccionar la celda. Si deseamos seleccionar más celdas sólo debemos mantener pulsado el botón del mouse y arrastrar en dirección de las celdas correspondientes. Para seleccionar filas o columnas debemos: 1. Colocar el puntero del mouse sobre el margen izquierdo de la tabla para filas, o sobre el margen superior para columnas. 2. Pulsar el botón del mouse cuando aparezca la flecha de selección. Si deseamos seleccionar más filas o columnas solo debemos mantener pulsado el botón del mouse y arrastrar en dirección de las filas o columnas correspondientes. Existen diferentes formas para seleccionar toda la tabla: 1. Pulsar sobre el vértice superior izquierdo de la tabla. 2. Pulsar en cualquier lugar dento de la tabla, seleccionar el menú Modoficar (MODIFY), luego Tabla (TABLE) y por último Seleccionar Tabla (SELECT TABLE). 3. Pulsar en cualquier lugar dento de la tabla, del menú Edición (EDIT) pulsar sobre Seleccionar Todo (SELECT ALL). Agregar filas o columnas 1. Para agregar una fila en la tabla debemos: a. Seleccionar una fila de la tabla. b. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). c. Pulsar sobre Insertar fila (INSERT ROW). Esta acción insertará una fila arriba de la fila que teníamos seleccionada en la tabla. 2. Para agregar una columna en la tabla debemos: a. Seleccionar una columna de la tabla b. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). c. Pulsar sobre Insertar columna (INSERT COLUMN). Esta acción insertará una columna a la izquierda de la columna que teníamos seleccionada en la tabla. Si deseamos agregar una fila abajo de la fila que teniamos seleccionada, debemos: 1. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 2. Pulsar sobre Insertar filas o columnas (INSERT ROWS OR COLUMNS). En esta ventana podemos definir la cantidad de filas y donde (WHERE) agregarlas, Arriba de la Selección (ABOVE THE SELECTION) o abajo de la Selección (BELOW THE SELECTION). Si deseamos agregar una columna a la derecha de la columna que teníamos seleccionada, debemos: 1. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 2. Pulsar sobre Insertar filas o columnas (INSERT ROWS OR COLUMNS). En esta ventana podemos definir la cantidad de filas y donde (WHERE) agregarlas, Antes de la columna seleccionada (BEFORE CURRENT COLUMN) o Después de la columna seleccionada (AFTER CURRENT COLUMN). Lección 6 Combinar celdas de una Tabla Cuando se organiza la información de una página dentro de una tabla, puede suceder que en una fila nos sobren celdas. Una forma sencilla de subsanar este inconveniente es combinar las celdas de la fila. Para esto debemos: 1. Seleccionar las celdas necesarias. 2. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 3. Pulsar sobre Combinar celdas (MERGE CELLS). De esta forma quedará una fila con sus celda combinadas, originalmente la primer fila tenía dos celdas. Dividir celdas Es la acción contraria a combinar celdas, podemos necesitar una fila con una mayor cantidad de celdas que las definidas al construir la tabla. Para lograr esto, debemos: 1. Seleccionar la fila correspondiente. 2. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 3. Pulsar sobre Dividir celdas (SPLIT CELL). 4. En esta ventana definimos donde dividir las celdas, Dividir celda dentro de (SPLIT CELL INTO) o columnas (COLUMNS). 5. Determinar la cantidad de columnas (NUMBER OF COLUMNS). 6. Pulsar Aceptar (OK). filas (ROWS) De esta manera quedará una fila con sus celdas divididas, originalmente la primer fila tenía una sola celda. Eliminar Filas De la misma manera que debido a la información que estamos colocando en la tabla necesitábamos agregar filas, puede ser que tengamos que eliminar alguna de ellas. Para esto, debemos: 1. Seleccionar la fila correspondiente. 2. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 3. Pulsar sobre Eliminar fila (DELETE ROW). Eliminar Columnas Igualmente podemos eliminar las columnas que no necesitamos. Para hacerlo, debemos: 1. Seleccionar la columna correspondiente. 2. Pulsar sobre el menú Modificar (MODIFY), luego sobre Tabla (TABLE). 3. Pulsar sobre Eliminar columna (DELETE COLUMN). Fin del Nivel Básico del Curso sobre Dreamweaver 2 Curso sobre Dreamweaver - Nivel Avanzado ¿Qué es Dreamweaver? Dreamweaver es una editor profesional para crear y mantener sitios web utilizando la técnica WYSIWYG: What You See Is What You Get (lo que se ve es lo que se obtiene). De esta manera no es necesario conocer ni recordar código HTML comúnmente utilizado para esta tarea. Con Dreamweaver se trabaja de manera similar a la de un procesador de texto. A diferencia de otros editores que utilizan el método WYSIWYG, Dreamweaver permite trabajar con DHTML (DynamicHTML), insertar capas en las páginas, insertar componentes multimedia (active x), applets creados en Java, películas creadas con Flash y películas Shockwave. Todas estas utilidades sumadas a las que describiremos en este curso, darán a sus páginas web un toque profesional e interactivo. El curso que aquí se presenta constará de dos niveles: Para realizar el curso es fundamental completar cada uno de los niveles, ya que un nivel sucede a otro no sólo en complejidad, sino también en el uso de las distintas herramientas de este poderoso editor. Lección 1 Propiedades de las imágenes Para visualizar las propiedades de una imagen debemos seleccionarla, podemos observar las propiedades en la Barra de propiedades. Éstas son: - Imagen (IMAGE): Permite darle un nombre a la imagen para trabajarla con lenguaje script. - Ancho y Alto (WIDTH / HEIGHT):Indica el ancho y el alto de la imagen, Dreamweaver coloca por defecto las medidas originales de la imagen. - Origen (SOURCE) SCR: Indica la ruta de la imagen. - Enlace (LINK): Indica, si lo tiene, el enlace de la imagen. - Alineación (ALIGN): indica la alineación de la imagen, la misma puede ser: por defecto del navegador (BROWSER DEFAULT), Arriba (TOP), Abajo (BOTTOM), Medio (MIDDLE), Derecha (RIGHT), Izquierda (LEFT). - ALT: Indica un texto alternativo que aparecerá al colocar el puntero del Mouse sobre la imagen en la ventana del navegador. - VSpace y HSpace: permite agregar espacio arriba y abajo, a la derecha y a la izquierda de la imagen. - Objetivo (TARGET): Indica el marco o ventana donde se abrirá el enlace. Se puede seleccionar entre las siguientes opciones: BLANK (abrirá el enlace en una ventana nueva del navegador), PARENT (abrirá el enlace en el marco principal), SELF (abrirá el enlace en el mismo marco donde se encontraba el enlace), TOP (abrirá el enlace en la misma ventana del navegador quitando todos los marcos). - LOW SRC: Permite colocar una imagen de baja resolución (blanco y negro) en el lugar de la imagen principal. La imagen de baja resolución aparecerá antes que la principal. - Borde (BORDER): Permite colocar bordes a las imágenes introduciendo valores desde 1 en adelante, cuanto más alto sea el valor, más ancho será el borde. Para quitar bordes se debe introducir el valor 0. - Mapas (MAPS): Permite crear mapas de imágenes. - Renovar (REFRESH): Permite restaurar los valores originales de ancho y alto de una imagen previamente modificada. - Editar (EDIT): Permite abrir el editor de imágenes para modificar la imagen seleccionada. El editor de imágenes se configura desde el menú Edición (EDIT), Preferencias (PREFERENCES), Editores externos (EXTERNAL EDITORS). Mapas de imágenes Los mapas de imágenes son muy utilizados en la creación de páginas web, ya que dan una estética profesional a las mismas. Los mapas consisten en crear enlaces dentro de una imagen, la misma puede ser de cualquier tamaño. Para crear un mapa, debemos: 1. Insertar una imagen y seleccionarla. 2. En la barra de propiedades de la imagen pulsar sobre el botón Mapa (MAP). 3. En la siguiente ventana elegir la herramienta de selección. 4. Seleccionar la porción de la imagen sobre la que colocaremos el enlace. 5. No debemos olvidar colocar un nombre al mapa y direccionar el enlace (LINK). Podemos colocar un breve texto en el comando ALT. Cuando seleccionemos otra porción de la imagen deberemos nuevamente direccionar el enlace. Lección 2 Capas (LAYERS) Dreamweaver permite trabajar el diseño de páginas web mediante la utilización de capas (LAYERS). Las capas son a una página web lo que la cáscara es a una fruta, por ejemplo la naranja. Las capas se utilizan para colocar objetos en cualquier sector de la página web. Pueden ser interactivas, es decir que ejecute alguna acción predeterminada por el diseñador, se pueden modificar en posición y tamaño, pueden contener cualquier elemento que pueda ser leído en un documento HTML como: imágenes, texto, película Flash y Shockwave e inclusive pueden contener otras capas. Cómo crear capas Existen dos maneras de crear Capas, insertándolas o dibujándolas. Para insertar una capa, debemos: 1. Colocar el cursor en el sector de la página donde queremos insertar la capa. 2. Pulsar sobre el menú Insertar (INSERT) y luego sobre Capa (LAYER). La capa se insertará en el mismo lugar donde estaba el cursor. Para dibujar una capa, debemos: 1. Pulsar sobre el botón Dibujar capa (DRAW LAYER) de la Barra de objetos más usados. 2. Pulsar y mantener para dibujar la capa arrastrando el puntero del mouse. Con esta última técnica podemos dibujar e insertar varias capas, inclusive podemos colocar una capa sobre la otra (CAPAS ANIDADAS) si es necesario. Propiedades de las capas Al seleccionar una o más capas podemos trabajar sobre las propiedades de las mismas desde la Barra de Propiedades. Las propiedades de las capas son: - Layer ID: se utiliza para darle un nombre a la capa, es útil cuando trabajamos con varias capas sobre una misma página para identificarlas en la Paleta Capas. - L y T: Left (IZQUIERDA) y Top (ARRIBA): se utiliza para especificar la ubicación de la capa dentro de la página o cuando se encuentra sobre otra capa. - Ancho y Alto (WIDTH / HEIGHT):indica el ancho y el alto de la capa. Estos valores serán anulados si el contenido de la capa los supera. - Z - Index: determina el orden de aparición de las capas durante la descarga de la página en el navegador. - Visibility (Vis) VISIBILIDAD: establece cómo se verá la capa en la página, las opciones son: Default (POR DEFECTO): no especifica propiedad. Inherit (HEREDITARIA): al trabajar con varias capas la capa seleccionada hereda las propiedades de la anterior, tendrá las mismas propiedades. Visible: la capa seleccionada será visible. Hidden: la capa seleccionada estará oculta, podemos hacerla visible desde la paleta capa; mediante sencillos comandos que veremos más adelante. - Bg Image: permite colocar una imagen de fondo dentro de la capa seleccionada. - Bg Color: permite colocar un color de fondo dentro de la capa seleccionada. - Tag: determina el tipo de capa, para Netscape o para el resto de los navegadores. - Overflow (EXCESO): indica el fomato de la capa en caso que el contenido de la misma exceda los límites de alto y ancho. Sus opciones son: Visible: ajusta el tamaño de la capa al tamaño del contenido. Hidden: mantiene el tamaño de la capa y el contenido queda oculto. Scroll: mantiene el tamaño de la capa y agrega a la derecha de la misma un barra de desplazamiento. Auto: ajusta los parámetros en forma automática, inclusive si es necesario inserta la barrra de desplazamiento. - Clip:recorta un parte de la capa para que sólo esa parte sea visible. ¿Cómo seleccionar capas? Luego de insertar las capas necesarias para el diseño de nuestra página podemos agregarle contenido y modificar sus propiedades. Para trabajar con las propiedades de las capas debemos previamente seleccionarlas. Existen diferentes modos para seleccionar capas: 1. Pulsar sobre culaquiera de los bordes de la capa. 2. Pulsar sobre el manejador de capa. 3. Pulsar sobre el marcador de capa. La capa seleccionada se verá de la siguiente forma en cualquiera de los casos: Para seleccionar varias capas a la vez repetimos cualquiera de los procedimientos descriptos, pero al pulsar mantenemos presinada la tecla SHIFT. ATENCIÓN: el marcador de capa es un elemento no visible, para trabajar sobre él pulsar sobre el menú View (VER) Invisible Elements (ELEMENTOS INVISIBLES). Capas activas Para insertar contenido dentro de una capa, ésta debe estar activa. Para activar una capa simplemente pulsamos dentro de ella. Cuando una capa está inactiva sus bordes cambian al color gris. Cómo modificar el tamaño de las capas Para variar el tamaño de las capas, debemos: 1. Seleccionar la capa. 2. Pulsar sobre el manejador de capa y arrastrar. Cómo mover capas Para mover las capas y modificar su ubicación en la página, sólo debemos pulsar en cualquiera de los bordes y arrastrar hasta la posición deseada. La paleta capas (LAYER PALETE) La paleta capas nos muestra un listado de las capas insertadas en nuestra página. También podemos observar algunas propiedades de las capas, como el nombre de cada una de ellas, el orden de aparición durante la descarga, la condición de las mismas en cuanto a la visibilidad (visible o no visible). Para visualizar la paleta capas durante el diseño de la página pulsamos sobre el menú Window (VENTANA) y luego sobre Layers (CAPAS). Trabajar con capas desde la Paleta Podemos modificar algunas propiedades de las capas de nuestra página desde la paleta capas, ellas son: - Cambiar el nombre de las capas. Pulsando dos veces sobre el nombre de la capa seleccionada se habilita la edición que permite cambiarlo. - Seleccionar capas, pulsando sobre el nombre de las mismas. Dreamweaver coloca por defecto de nombre a las capas: layer1, layer2, etc. (CAPA1, CAPA2). - Modificar el orden de aparición de las mismas durante la descarga. Para ello pulsamos sobre el nombre de la capa y, sin soltar; arrastramos hacia la posición deseada. - Anidar capas. Siguiendo el procedimiento anterior para modificar el orden, pero pulsando a la vez la tecla CONTROL. Capas anidadas son dos o más capas unidas, no es necesario que esten una sobre otra. - Cambiar la visibilidad de las capas. Dentro de la paleta, a la izquierda del nombre; podemos observar un ojo. Si el ojo está abierto, la capa es visible; si el ojo está cerrado, la capa no será visible; y si el ojo no está la capa toma la condición de la capa anterior (si la anterior es visible, la que no tiene ojo también lo será y viceversa). - Impedir que dos o más capas se superpongan durante la descarga de la página en el navegador. Para activar esta función debemos tildar la casilla Prevent Overlaps (PREVENIR SUPERPOSICÓN). Lección 3 Frames (MARCOS) Los Frames (MARCOS) se utilizan para dividir las páginas en áreas y organizar su contenido. Generalmente las páginas se dividen en dos áreas: derecha e izquierda. En el sector izquierdo se coloca la barra de navegación del sitio y en el sector derecho el contenido de las páginas. Eventualmente se divide la página en tres sectores, los antes mencionados y uno más arriba en el sector derecho. En la mayoría de los sitios este es el espacio ocupado por la publicidad. Cada área de la página con marcos será un archivo .html independiente del otro. Si la página está dividida en dos áreas tendremos tres archivos: uno para el área de la derecha, otro para el área de la izquierda y un tercero para todo el conjunto, la Página de Marcos (FRAMESET). Veamos un ejemplo que clarifique estos conceptos: Para crear una página de marcos, debemos: 1. Crear un página nueva. 2. Pulsar sobre el menú Modify (MODIFICAR) y luego sobre Frameset (PÁGINA DE MARCOS). 3. En el menú Frameset debemos seleccionar entre las siguientes opciones: Edit no frame content (EDITAR CONTENIDO PARA PÁGINA SIN MARCOS), Split Frame Left (DIVIDIR MARCO A LA IZQUIERDA), Split Frame Right (DIVIDIR MARCO A LA DERECHA), Split Frame Up (DIVIDIR MARCO A ARRIBA) o Split Frame Down (DIVIDIR MARCO ABAJO). Seleccionaremos la opción Dividir Marco a la Izquierda, la ventana quedará formada de la siguiente manera. Podemos pulsar sobre el borde y arrastrarlo a la izquierda o derecha según nuestra necesidad. Luego de insertar los contenidos debemos guardar las páginas. La gran ventaja de Dreamweaver 2 sobre otros editores de páginas web es que para crear una página de marcos no es necesario crear previamente las páginas que componen el marco. Podemos crear todo de una vez. Para guardar las páginas y la página de marcos debemos: 1. Pulsar sobre el menú File (ARCHIVO) y luego sobre la opción Save Frameset (GUARDAR PÁGINA DE MARCOS), de este modo guardaremos sólo el conjunto de las páginas. En el ejemplo colocaremos como nombre de archivo a la página de marcos" principal.htm". 2. Pulsar sobre Save All (GUARDAR TODO) para guardar las páginas que componen el marco. Identificaremos que página estamos guardando porque Dreamweaver 2 las selecciona en la ventana. En el ejemplo colocaremos de nombre de archivo al sector derecho "inicio.htm" y al sector de la izquierda" menu.htm". Paleta marcos La paleta marcos (FRAME INSPECTOR) nos muestra la página de marcos y nos permite seleccionar los marcos en forma independiente y la página de marcos. Para ver la paleta marcos, debemos: pulsar sobre el menú Ventana (WINDOW) y luego sobre la opción Marcos (FRAMES). Para seleccionar cualquiera de los marcos en forma independiente sólo debemos pulsar sobre el marco en la paleta de marcos. Para seleccionar la página de marcos debemos pulsar sobre cualquiera de los bordes externos de dicha página en la paleta marcos. Propiedades de los marcos Para visualizar las propiedades de los marcos debemos pulsar la tecla ALT y el botón izquierdo del mouse sobre el marco que necesitemos. Con esta acción podremos observar la Barra de Propiedades de Marcos. La propiedades de los marcos son: - Frame name (NOMBRE DEL MARCO): se utiliza para colocarle un nombre a los marcos. Esta propiedad es de vital importancia al momento de colocar enlaces entre marcos, como explicaremos más adelante. Generalmente al marco de la izquierda se le coloca como nombre MENÚ y al marco de la derecha INICIO. - Src (RUTA): indica el nombre del archivo al que pertenece el marco seleccionado. - Scroll: indica la propiedad de la barra de desplazamiento del marco seleccionado. Las opciones son: yes (SI), no, auto y default (POR DEFECTO). - No resize (NO MODIFICAR TAMAÑO): impide que el navegador modifique el tamaño del marco. - Borders (BORDES): se utiliza para colocar bordes al marco seleccionado, las opciones son: si, no o por defecto. - Borders color (COLOR DE BORDE): permite colocarle color a los bordes. - Margin width/height (ALTO Y ANCHO DEL MARGEN): permite configurar el alto (arriba y abajo) y el ancho (derecha e izquierda) de los márgenes del marco seleccionado. Propiedades de la Página de Marcos Para visualizar las propiedades de la página de marcos, debemos seleccionarla desde la paleta marcos. Las propiedades de la página de marcos son: - Frameset (PÁGINA DE MARCOS) Rows (FILAS): indica la cantidad de filas de la página de marcos. Cols (COLUMNAS): indica la cantidad de columnas de la página de marcos. - Borders (BORDES):se utiliza para colocar bordes al marco seleccionado. Las opciones son: si, no o por defecto. - Borders color (COLOR DE BORDE): permite colocarle color a los bordes. - Border width (ANCHO DE LOS BORDES): permite configurar el ancho de los bordes. - Value (VALOR): indica el valor del tamaño de la fila o columna seleccionada. - Units (UNIDAD): indica la unidad de medida del valor del tamaño de la fila o columna seleccionada. Las opciones son: pixels (PIXELES), percent (PORCENTAJE) y relative (RELATIVO). Si el valor de las filas o columnas de la página de marcos está expresada en porcentaje, esta última opción adapta la fila o columna hasta completar el total del valor de la página de marcos. En este caso hasta completar el 100%. - RowCol selection (SELECCIÓN DE FILAS O COLUMNAS): permite seleccionar filas o columnas de la página de marcos. Insertar enlaces en la página de marcos Como ya hemos mencionados previamente al insertar enlaces en la página de marcos, debemos colocarle nombre a los marcos. El nombre de los marcos nos indicará el destino del enlace. En la página de marcos del ejemplo colocamos al marco de la izquierda MENÚ y al de la derecha INICIO. Así se verá en la paleta de marcos. Podemos insertar un enlace sobre la palabra FOTOS que se encuentra en el marco izquierdo (menú), la página a enlazar será fotos.htm y el destino del enlace será el marco de la derecha (inicio). Para esto debemos: 1. Seleccionar la palabra FOTOS. 2. Insertar el enlace desde la barra de propiedades (fotos.htm). 3. Indicar el destino (TARGET) de descarga (inicio). 4. Guardar todo (SAVE ALL) y probar el funcionamiento. De esta manera al pulsar sobre la palabra FOTOS, la página fotos.htm se descargará en el marco de la derecha (inicio). Si aplicamos esta técnica al resto de los enlaces de nuestro sitio web tendremos el menú siempre visible. Lección 4 Teclas de acceso rápido Como todas la aplicaciones para Windows, Dreamweaver 2 tiene teclas de acceso rápido a los diferentes comandos y opciones. Alguna son comunes a otras aplicaciones y otras propias de Dreamweaver 2. - Control + N: página nueva. - Control + O: abre página existente. - Control + S: guardar. - Control + Shift + S: guardar todo. - Control + W: cerrar. - Control + Q: salir. - F12: vista previa en navegador. - Control + Z: deshacer. - Control + Y: rehacer. - Control + A: seleccionar todo. - Control + U: preferencias. - Control + Alt + I: insertar imagen. - Control + Alt + T: insertar tabla. - Control + J: propiedades de la página. - F11: paleta capas. - Control + F10: paleta marcos.
