18. ramos laura, karen arlynes

Institución De Educación Superior Tecnológico Privado “Tecnotronic”

Karen Arlynes Ramos Laura

Enero 2017

1

MANUAL SOBREDreamweaver cs6

Computación e informá

tica


Copyright © 2017 por Karen A., Ramos Laura

2


TABLA DE CONTENIDO

REQUISITOS DEL SISTEMA:..........................................................................................................1

REQUISITOS DEL SISTEMA PARA DREAMWEAVER CS6..................................................1

WINDOWS....................................................................................................................................1

MAC OS.........................................................................................................................................2

INSTALAR DREAMWEAVER EN WINDOWS Y MAC OS:...............................................................2VENTAJAS Y DESVENTAJAS DE DREAMWEAVER.........................................................................3

VENTAJAS....................................................................................................................................3

DESVENTAJAS:...........................................................................................................................4

ENTORNO DE DREAMWEAVER:...................................................................................................4

LA PANTALLA INICIAL.............................................................................................................5

BARRAS:.......................................................................................................................................5

1. La barra de la aplicación:...............................................................................................52. Las pestañas de documento............................................................................................63. La barra de estado...........................................................................................................73.1. La barra de herramientas estándar..............................................................................73.2. La barra de herramientas de documento.....................................................................73.3. La barra de representación de estilos.........................................................................83.4. La barra de navegación con navegador......................................................................8

INSPECTORES Y PANELES.......................................................................................................8

1. El inspector de Propiedades...........................................................................................82. Área de paneles..............................................................................................................93. Paneles............................................................................................................................93.1. Abrir el panel dentro del área de paneles...................................................................93.2. Abrir el panel al lado del área de paneles...................................................................93.3. Abrir como panel flotante.........................................................................................10El panel Insertar....................................................................................................................10Línea inferior de pestañas.....................................................................................................11

VISTAS DE UN DOCUMENTO................................................................................................12

La vista Diseño.....................................................................................................................12La vista Código....................................................................................................................12La vista Dividir.....................................................................................................................13La Vista en vivo...................................................................................................................13La vista Código en vivo........................................................................................................14

LA AYUDA.................................................................................................................................15

CONFIGURAR UN SITIO LOCAL:.................................................................................................16

INTRODUCCIÓN........................................................................................................................16

CREAR O EDITAR UN SITIO WEB SIN CONEXIÓN A INTERNET...................................16

ABRIR UN SITIO........................................................................................................................18

VER EL SITIO.............................................................................................................................19

3


SUBIR ARCHIVOS AL SERVIDOR.........................................................................................20

PROPIEDADES DEL DOCUMENTO........................................................................................22

Las propiedades están organizadas en categorías.................................................................22

LOS COLORES...........................................................................................................................25

EL TEXTO: PROPIEDADES Y FORMATOS.....................................................................................26

CARACTERÍSTICAS DEL TEXTO...........................................................................................26

Formato:...............................................................................................................................27Estilo:...................................................................................................................................27Lista:.....................................................................................................................................27Sangría:.................................................................................................................................28Accediendo a las propiedades CSS......................................................................................28Regla de destino:..................................................................................................................28Editar regla:..........................................................................................................................29Panel CSS:............................................................................................................................29Estilo:...................................................................................................................................29Alineación:...........................................................................................................................29Tamaño:................................................................................................................................29Color:....................................................................................................................................30

LISTAS........................................................................................................................................30

CARACTERES ESPECIALES....................................................................................................31

ESTILOS CSS:.............................................................................................................................32

Introducción..........................................................................................................................32

CREAR UN ESTILO PERSONALIZADO.................................................................................33

Crear un estilo en línea.........................................................................................................33Crear una regla de estilo:......................................................................................................33

DEFINIR O EDITAR UN ESTILO.............................................................................................37

APLICAR UN ESTILO...............................................................................................................39

HOJAS DE ESTILOS..................................................................................................................41

Exportar estilos.....................................................................................................................41Vincular una hoja de estilos.................................................................................................42

IMÁGENES.................................................................................................................................42

INTRODUCCIÓN........................................................................................................................42

INSERTAR UNA IMAGEN........................................................................................................42

PROPIEDADES DE UNA IMAGEN..........................................................................................44

CAMBIAR EL TAMAÑO DE UNA IMAGEN..........................................................................45

TABLAS.....................................................................................................................................45

INTRODUCCIÓN........................................................................................................................46

INSERTAR UNA TABLA..........................................................................................................46

RELLENAR LAS CELDAS........................................................................................................47

SELECCIONAR ELEMENTOS DE UNA TABLA...................................................................48

4


Para seleccionar celdas:........................................................................................................50

FORMATO DE TABLA..............................................................................................................50

FORMATO CSS..........................................................................................................................51

Los electores.........................................................................................................................51Propiedades..........................................................................................................................52

CAMBIAR TAMAÑO DE TABLA Y CELDAS........................................................................52

AÑADIR Y ELIMINAR FILAS Y COLUMNAS.......................................................................53

ANIDAR, DIVIDIR Y COMBINAR CELDAS..........................................................................54

Modos de tabla.....................................................................................................................56

ADAPTAR WEBS A DISTINTAS RESOLUCIONES..............................................................57

FORMULARIOS...........................................................................................................................64

CREAR FORMULARIOS...........................................................................................................68

VALIDAR FORMULARIOS......................................................................................................69

MULTIMEDIA.............................................................................................................................70

PELÍCULAS FLASH (SWF).......................................................................................................70

SONIDO.......................................................................................................................................73

VÍDEOS.......................................................................................................................................75

PLANTILLAS..............................................................................................................................76

INTRODUCCIÓN........................................................................................................................76

CREAR PLANTILLAS...............................................................................................................77

ETIQUETAS................................................................................................................................78

¿QUÉ TIPOS DE DOCUMENTOS PUEDO ABRIR CON DREAMWEAVER CC?.................................79¿PUEDO SEGUIR UTILIZANDO VERSIONES ANTERIORES DE DREAMWEAVER?...........................79¿QUÉ ES ADOBE DREAMWEAVER CS6 Y A QUIÉN VA DIRIGIDO?..........................................79¿QUÉ EDICIONES DE ADOBE CREATIVE SUITE INCLUYEN DREAMWEAVER CS6?...................79¿CÓMO SE INTEGRA DREAMWEAVER CS6 CON OTROS PRODUCTOS DE ADOBE?.....................80¿QUÉ CLIENTES SON ELEGIBLES PARA RECIBIR LAS ACTUALIZACIONES PARA LOS MIEMBROS DE ADOBE CREATIVE CLOUD?.................................................................................................80¿SE PROPORCIONARÁN ESTOS CAMBIOS A LOS CLIENTES DE LICENCIAS DE ADOBE EN EL MANTENIMIENTO?.....................................................................................................................80¿EXISTEN PROBLEMAS DE COMPATIBILIDAD AL INTERCAMBIO DE ARCHIVOS DE LA VERSIÓN PERPETUA-LICENCIA DE DREAMWEAVER CS6 Y LA ACTUALIZACIÓN MIEMBRO / SUSCRIPCIÓN DREAMWEAVER CS6 CREATIVE CLOUD?.................................................................................80

5


DREAMWEAVER

(Adobe)

DREAMWEAVER

¿QUE ES?

Es un programa para desarrollo de páginas web. El mismo posee un entorno visual y una vista código. Antes pertenecía a Macromedia ahora pertenece a Adobe

CONCEPTO Creador y editor de páginas web

CARACTERISTICA

S

La aplicación permite crear sitios de forma totalmente gráfica, y dispone de funciones para acceder al código HTML generado. Permite la conexión a un servidor, a base de datos, soporte para programación en ASP, PHP, Javascript, cliente FTP integrado, etc.Principal competencia de Microsoft FrontPage.

¿PARA QUE SIRVE

Las funciones de edición visual de Dreamweaver MX permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Requisitos del sistema:

Para ejecutar Dreamweaver, es preciso disponer del hardware y el software siguientes:

Requisitos del sistema para Dreamweaver CS6

Windows

Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits. Microsoft® Windows® XP con Service Pack 3 o Windows 7 con

Service Pack 1. Adobe® Creative Suite® 5.5. 512 MB de RAM.

1


1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento flash extraíbles).

Resolución de 1280 x 800 con adaptador de gráficos de 16 bits. Java™ Runtime Environment 1.6 (incluido). Unidad de DVD-ROM. Software QuickTime 7.6.6 necesario para la reproducción de

contenido multimedia HTML5. Este software no funciona sin la activación. Es necesario disponer

de una conexión a Internet de banda ancha y registrarse para poder activar el software, validar las suscripciones y acceder a los servicios en línea.* No está disponible la activación por teléfono.

Mac OS

Procesador Intel multinúcleo. Mac OS X v10.6.8 o v10.7. Las aplicaciones de Adobe Creative

Suite 5, CS5.5 y CS6 son compatibles con Mac OS X v10.8 y v10.9 cuando se instalan en sistemas Intel.**

512 MB de RAM. 1,8 GB de espacio disponible en el

disco duro para la instalación; se necesita espacio libre adicional durante la instalación (no se puede instalar en un volumen que utilice un sistema de archivos con distinción entre mayúsculas y minúsculas ni en dispositivos de almacenamiento flash extraíbles).

Resolución de 1280 x 800 con adaptador de gráficos de 16 bits. Java Runtime Environment 1.6. Unidad de DVD-ROM. Software QuickTime 7.6.6 necesario para la reproducción de

contenido multimedia HTML5. Este software no funciona sin la activación. Es necesario disponer

de una conexión a Internet de banda ancha y registrarse para poder activar el software, validar las suscripciones y acceder a los servicios en línea.* No está disponible la activación por teléfono.

Instalar Dreamweaver en Windows y Mac Os:

Siga estos pasos para instalar Dreamweaver.

Para instalar Dreamweaver:

1. Introduzca el CD de Dreamweaver en la unidad de CD-ROM del ordenador.

2


2. Dispone de las opciones siguientes:

En Windows, elija Inicio > Ejecutar. Haga clic en Examinar y elija el archivo Dreamweaver 4 Installer.exe del CD de Dreamweaver. En el cuadro de diálogo Ejecutar, haga clic en Aceptar para comenzar la instalación.

3. En Mac OS, haga doble clic en el icono del instalador de Dreamweaver. 3 Siga las instrucciones que aparecen en pantalla.

4. Si el sistema lo solicita, reinicie el ordenador.

Ventajas y desventajas de Dreamweaver

Ventajas

·La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias.

·Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.

·Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.

Adobe Dreamweaver te brindará acceso rápido a:

- Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET - Diseño de páginas Webs con un interfaz completamente gráfico

Barra de herramientas de programación, que facilita las operaciones de programación más usuales

Contracción del código, para centrarse solo en el que se está utilizando Barra de herramientas de reproducción de estilos, con la que se puede ver

el resultado final Comparar archivos para ver qué ha cambiado Facilidad para añadir vídeos Flash Notificación y registro de eventos -Se integra en Microsoft Word, Flash, Adobe Photoshop y otras Optimiza las páginas para las diferentes versiones de los navegadores….

3


Adobe Dreamweaver en la educación:

Este programa le ayuda al estudiante a aprender a crear un sitio web, mejora su creatividad y su curiosidad por emplear todas las herramientas de este diseñador web, pero más que todo les sirve para poder diseñar su propio sitio web con todo lo que deseen ponerle. Quizás el profesor no les pueda enseñar a utilizar todas las herramientas de esta aplicación, pero internet es una gran ayuda, existen tutoriales donde enseñan a crear un sitio web y a utilizar las otras aplicaciones de Adobe que se pueden añadir a nuestro website.

Desventajas:

Precio demasiado altoA la fecha de abril del 2011, Dreamweaver tiene un precio de venta de aproximadamente 600 dolares, cientos de dolares más caro que los programas similares, tales como Front Page y NVU. Además, existe una gran cantidad de editores HTML gratuitos disponibles. Si no, puedes simplemente ingresar el código de un sitio web o una página entera utilizando el editor de Windows "built-in-text", Notepad

Interfaz confusa

Dreamweaver tiene una interfaz confusa que puede intimidar a los usuarios nuevos. Sus tutoriales incluyen solo la información básica y no hay guías de ayuda para los temas más complicados. La barra de Herramientas y Propiedades de Windows son cargadas con opciones. Para convertirte en un experto en Dreamweaver, necesitas comprar una guía Dreamweaver y leerla de comienzo a fin, lo cual puede llevar bastante tiempo.

Falta de código

La interfaz simple apunta-y-cliquea de Dreamweaver anima a los usuarios, y especialmente a los alumnos jóvenes, a no involucrarse en aprender el lenguaje de los códigos, tales como HTML y PHP. Con Dreamweaver, todo puede lograrse simplemente haciendo clics. Aunque te facilita la vida, el diseñador Web falla en aprender las habilidades requeridas para avanzar. Además, Adobe, el creador de Dreamweaver, saca una nueva versión cada tres o cuatro años. Cada iteración viene con una plétora de nuevas características y opciones.

Espacio en el disco duro

Si solo estuvieras por escribir el código en Notepad, casi no ocuparías espacio. Dreamweaver requiere 1.8 gigabytes de espacio en el disco duro.

4


Además, cada proyecto puede ocupar cientos de megabytes de espacio, según qué tan grande sea.

Entorno de Dreamweaver:

La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.

1.- Las barras.2.- Las pestañas de documentos.3.- La barra de estado.4.- El panel de propiedades.5.- Área de paneles.6.- Paneles y ventanas.7.- Línea inferior de pestañas.8.- Vista diseño del documento.9.- Vista código del documento

Barras:

1. La barra de la aplicación:

5


La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda (online).

Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o

código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.

Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

2. Las pestañas de documento.

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que

6


ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.

Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... Pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

3. La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio. Y al final hay otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.

3.1. La barra de herramientas estándar.

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi

7


todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)

3.2. La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multipuntillo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

3.3. La barra de representación de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento.

3.4. La barra de navegación con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.

Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles (ventanas) o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. A continuación vamos a ver el inspector de Propiedades y más adelante veremos el panel Insertar.

1. El inspector de Propiedades

8


El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrará su ubicación, dimensiones, peso, clase, etc...

En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.

2. Área de paneles.

En la parte derecha de la pantalla tenemos el área o pila de paneles.

Inicialmente, el área de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos que queramos. Para quitar un elemento del área de paneles basta hacer clic con el botón derecho sobre su nombre para que aparezca un menú con la opción Cerrar. Para añadir un elemento al área de paneles hay que ir al menú Ventana y hacer clic en el elemento que queramos añadir, si el elemento se abre en una ventana flotante, bastará arrastrarlo al área de paneles.

3. Paneles.

Una vez tenemos el área de paneles con los elementos que más nos interesen, podemos abrirlos o desplegarlos de tres formas.

3.1.Abrir el panel dentro del área de paneles

. Para ello primero hay que expandir el área de paneles pulsando el botón de la parte superior derecha , a continuación, basta hacer clic en cada panel para que se abra dentro del área de paneles. Para cerrar el panel hacer doble clic.

Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del área de paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaños colocando el cursor en el borde inferior y arrastrándolo.

9


3.2.Abrir el panel al lado del área de paneles.

Para ello hay que partir del área de paneles sin expandir, y al pulsar en un panel, este se abrirá pegado al lado, como vemos en la siguiente figura.

3.3. Abrir como panel flotante.

Para ello hay que pinchar en el título del panel y arrastrar el panel fuera del área de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble clic en el título del panel, este se contrae pero sigue flotando en la misma posición. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y expandido.

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

10


El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imágenes, es posible configurar este panel para verlo como menú (imagen anterior), como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)

.

Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado .

Línea inferior de pestañas.

En al parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar, Validación,...)

11

http://www.aulaclic.es/dreamweaver-cs6/a_2_3_1.htm


Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su título.

Estas pestañas se pueden configurar de forma similar a como acabamos de ver con el área de paneles. Es decir, se pueden añadir y quitar, convertir en flotantes, etc.

Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

La vista Diseño

La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

La vista Código

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

12


El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.

La vista Dividir

La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La Vista en vivo

13


La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador.

La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se pre visualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la página con los principales navegadores del mercado que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador. También es conveniente comprobar la página con los distintos tamaños de pantalla, teléfono móvil, tablet y PC.

La vista Código en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente y refleja los cambios dinámicamente al interactuar con la página. Si además pulsamos el

botón podremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un párrafo podemos ver sus márgenes, como se aprecia en la siguiente imagen.

14


La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda en línea de Adobe Community Help donde puedes buscar por temas o por búsqueda de palabras clave,

Ayuda de Business Catalyst que es un sistema de alojamiento de páginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes.

Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.

Referencia abre un panel en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder al Centro de soporte de Dreamweaver en la web.

Dreamweaver Exchange es un sistema para compartir extensiones.

Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

15


Configurar un sitio local:

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.

Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.

También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...

16


En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos

Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la imagen.

Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios

tenemos cuatro botones que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo.

A continuación tenemos otros cuatro botones:

Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.

Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.

Nuevo sitio. A continuación explicaremos esta opción. Nuevo sitio de Business Catlyst.

En la parte inferior derecha tenemos el botón Listo que nos abrirá el sitio seleccionado.

Tanto si se pulsa el botón Nuevo sitio, como si se elige el botón Editar, se mostrará la misma ventana en la que definir o modificar las características del sitio.

17


Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento son las únicas que cambiaremos:

Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento:

Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.

La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.

Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos.

18


Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este ejercicio, configuraremos un sitio que iremos completando más adelante.

Ver el sitio

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imágenes y varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.

19

http://www.aulaclic.es/dreamweaver-cs6/epp_3_2_1.htm


Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automáticamente actualizará todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver simplemente no encontrará la página.

Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos establecer desde el menú Edición, opción Preferencias, categoría General.

20


Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarán correctamente, y es posible que algunas imágenes no se muestren.Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos.

Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás descargarte el programa.

Una vez instalado, abre el programa y haz clic en Archivo → Gestor de sitios y luego en Nuevo sitio para configurar un nuevo sitio FTP.

Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Servidor, Usuario y Contraseña.

Rellena los campos y haz clic en Conectar. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado.

La parte central de la pantalla estará dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de

21


nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.

Ahora no tenemos más que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo.

Verás como el programa empieza a copiar la información de tu disco a Internet.

Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) ¡y verás el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta html, public_html o httpdocs y sube tus archivos allí.

Propiedades del documento

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl + J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

22


Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.

Se abrirá el cuadro de diálogo siguiente:

Las propiedades están organizadas en categorías.

o En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:

Fuente de página: es el tipo de letra que le aplicaremos al texto. Tamaño: es el tamaño de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: permite especificar un color de fondo para el documento, pero

dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.

Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.

Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.

o En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:

23


Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.

Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

Texto: es el color de la fuente. Vínculos: es el color que mostrará el texto de los vínculos. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón

hace clic sobre el mismo. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia

entre donde empieza el contenido de la página y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.

o En la categoría Vínculos (CSS) encontramos las propiedades:o

24


Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo. Tamaño: es el tamaño del texto de los vínculos. Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir

entre el texto normal y los vínculos que sirven de enlace a otras páginas. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al

usuario si unos vínculos ya han sido visitados o no. Vínculos de sustitución: es el color del texto del vínculo cuando situamos el

ratón encima del vínculo. Vínculos activos: es el color de los vínculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado,

el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

o En la categoría Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado.

o En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento, que aparecerá en la barra de título del

navegador y de la ventana de documento de Dreamweavero En la categoría Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí .

25



Los colores

Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo.

Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos a través del botón de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones: .

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en este tema.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris, lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo

directamente el número hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color

azul con valor #39F, el botón quedaría del siguiente modo: .

En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y Azul).

Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).

El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.

Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.

Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el último al verde.

En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.

El texto: propiedades y formatos

26


A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.

Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato:

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.

27


Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo:

El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.

Sangría:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.

Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web.

28


Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS6 nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada.

Regla de destino:

Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.

Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.

Editar regla:

Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.

Panel CSS:

Este botón abre el panel CSS si no lo tuviéramos abierto.

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador.

29


El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.

Estilo:

Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en línea.

Alineación:

A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.

Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

30


La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista numerada (ordenada) se selecciona a través del botón .

A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

Caracteres especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos en el teclado.

Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen inferior.

31


Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.

Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:

Estilos CSS:

Introducción

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.

32


También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web.

Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), párrafos (<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo.

También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a los que apliquemos esa clase.

Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

Crear un estilo personalizado

Con Dreamweaver CS6, las características que apliquemos a un texto a través del Inspector de propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué elementos afecta.

Veámoslo:

Crear un estilo en línea.

En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en línea>.

Crear una regla de estilo:

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, pulsamos el botón CSS Designer, que abre el panel Diseñador de CSS.

33


El Diseñador de CSS se divide en cuatro subsáneles. El primero de ellos nos permite definir la Fuente del nuevo estilo que vamos a crear. Es decir, si el estilo estará en un archivo .css adjunto o bien en la propia página. Para añadir una nueva fuente para nuestro estilo pulsamos el botón con el signo más que está en la esquina superior derecha del panel, lo que nos dará las opciones de la siguiente imagen:

Si seleccionamos Crear en un nuevo archivo CSS, se creará el archivo de estilos con extensión .css asociado a la página. En este caso podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

34


El Diseñador de CSS también nos permite adjuntar archivos de estilos existentes.

Si elegimos Definir en página, la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

El segundo subpanel @Medios, permite crear líneas de código que obligarán al navegador a informar qué resolución de pantalla tiene el usuario. Es decir, se crea una "Consulta de medios", la cual, en función del tipo de pantalla, utilizará estilos CSS apropiados. No te preocupes si esto parece por ahora algo confuso, le dedicaremos un apartado más adelante. Por lo pronto, podemos pasar del subpanel Fuentes al de Selectores sin usar el subpanel @Medios.

Independientemente de la fuente de estilos a utilizar (archivo .css o regla definida en página), pasamos al subpanel Selectores, en donde podemos definir el tipo de selector. El tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo. En función del lugar donde esté el punto de inserción en nuestra página, o de lo que tengamos seleccionado, el Diseñador de CSS va a sugerir el tipo de selector, pero también podemos escribirlo directamente en la caja de texto que se abre al pulsar el botón del subpanel.

Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.

ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.

Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.

Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Dependiendo de lo que escribamos o seleccionemos en la caja de texto, será el tipo de selector de la regla de estilo, la cual, a su vez, se añadirá a la fuente indicada en el primer subpanel.

35


Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.

Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nueva regla CSS>.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerá la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo.

Podemos elegir entre cuatro tipos de selector:

36


Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.

ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.

Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.

Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Nombre del selector: esta opción permite asignar un nombre al selector.

Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la clase, id, etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos escribir el que queramos.

Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.

Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se añadirá ella.

Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarán el estilo.

Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.

37


Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van añadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la ventana Definición de regla.

Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más adelante.

Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar varias propiedades.

Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el menú Ventanas o pulsando en el botón Panel CSS.

38


En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en la parte inferior las propiedades del estilo actual.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el botón derecho sobre el estilo y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Más adelante detallaremos qué hacen las propiedades existentes. No obstante, sabiendo un poco de inglés resultan muy intuitivas.

Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo.

Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos cómo hacerlo:

39


En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo).

En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del menú Establecer clase.

Todas las reglas disponibles estan accesibles desde el menú Formato → Estilos CSS.

Observa que existe una clase llamada ninguna. Lo que hace esta opción es quitar la clase al elemento.

40


La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase aparecerá junto al nombre de la etiqueta, separada por un punto.

Hojas de estilos

Exportar estilos

Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fácilmente.

Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la vista Todo. Agrupados en <style> encontramos los estilos creados en la página.

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas CSS....

Nos aparecerá la siguiente ventana:

Encontramos dos opciones para ubicar los estilos:

Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se añadirán a ella.

41


Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas. Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma carpeta que las páginas.

Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja de estilos.

Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos vincularla.

Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de estilos... o desde el panel Estilos CSS. Lo único que tendremos que hacer es seleccionar el archivo a vincular. Las hojas de estilo tienen la extensión .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.

Imágenes

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí .

Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

42



En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imágenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imágenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

Imágenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imágenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su

nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto.

43


En ese caso, la imagen que aparecerá en el navegador será similar a ésta:

.

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Origen contiene el path (cámino) de la imagen.

En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer en versiones anteriores a la versión 9, mostraba Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.

An. y Al. son las dimensiones de la imagen, ancho y alto. Dreamweaver las pondrá directamente.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

El ID es un identificador opcional para usarlo con CSS o Javascript.

Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen.

Además, encontramos algunos controles de Edición: El botón nos permite optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias como puedes. Por otro lado, el icono nos permite editar la imagen con un programa externo, como Photoshop o Paint. Puedes ver cómo cambiar el programa de edición-.

44


Cambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc...

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen abriendo un editor de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se abrirá la ventana del editor de imagen que hayamos definido como predeterminado (como vimos en el tema avanzado Cambiar el programa de edición), si no lo hemos hecho nos preguntará que programa de edición queremos utilizar.

Tablas

En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.

Introducción

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un

45


bloque de texto, y otra serie de cosas que sin las tablas serían difíciles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstapropinte, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y no crean una estructura clara, además, si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots(robots) que indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear los nuevos tags de HTML5 (<article>, <section> ... ), capas (div) y CSS.

Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de

46


la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.

Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.

Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacíamos, por ejemplo, con las listas.

47


Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el punto de inserción en la tabla, o desplegando el menú contextualde la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.

También es posible seleccionar una pulsando con el ratón sobre el borde exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos menús desplegables (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a determinados comandos relacionados con la tabla.

Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o también

48


desplegando de la barra de menús, el menú Ver → Ayudas visuales → Anchos de tabla. De la misma forma se desactiva su visualización.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado. Si aparecen dos números, el primer número corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo número es el ancho el ancho visual que aparece en la vista de diseño; por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero al contener una imagen que necesita más espacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna tal como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el código (propiedades) se cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable de encabezado de tabla.

En este menú vemos que también tenemos las opciones para Borrar o Igualar los anchos.

Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que más te gusta. Estas son las formas de selección:

Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de anchos) esto sólo es válido para seleccionar una columna.

Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente.

También puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la celda.

Para seleccionar celdas:

49


Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas.

Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda.

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del

50


contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..

Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.

Los electores.

Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.

Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla? Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de inserción en una celda:

Vemos que con el selector table nos referimos a la tabla completa. Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque sí existe un método empleando etiquetas <col />, es más avanzado y no lo veremos en este curso.

Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que podemos emplear selectores compuestos. Así para referirnos a las filas de una tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para referirnos sus celdas.

Nota: Si al crear una página definimos las propiedades del texto empleando las Propiedades de la página, Dreamweaver crea una regla con el selector body,td,th. Es decir, aplica el mismo estilo a la página, a las celdas y a los encabezados. Esto hará que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser más concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejándolo sólo como body. Recuerda que para editar un selector, hacemos clic derecho sobre la regla en el panel Estilos CSS, y elegimos Editar selector en el menú contextual.

51


Propiedades.

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamaño, color, imagen de fondo.

Existen algunas propiedades CSS específicas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, así que los veremos más adelante.

Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello, debemos editar los márgenes izquierdo y derecho (categoría Cuadro), estableciendo el valor auto para ambos.

Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos más que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a filas alternas.

Cambiar tamaño de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana.

No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

52


Añadir y eliminar filas y columnas

Existen varias formas de añadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.

53


Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)

Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.

A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto.

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola.

Mientras que dividir celdas consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.

54


Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación dé como resultado un rectángulo. No podemos combinarlas para formar una "L". Por ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.

1 2

3 4

Podemos combinar celdas en vertical y horizontal:

Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.

55


Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a seguir trabajando con él, pero se puede pasar a los otros modos a través del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar o el Modo de tablas expandidas.

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de inserción de forma precisa e introducir contenido pero en este modo no vemos la página como quedará exactamente.

En este curso nos limitaremos al modo estándar, aunque puedes emplear el Modo de tablas expandidas cuando lo creas útil.

Adaptar webs a distintas resoluciones

Siempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaños y con distintas resoluciones. Desde las pequeñas pantallas de los portátiles de bajo coste, hasta monitores panorámicos en alta resolución.

Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra página: el diseño fijo y el diseño elástico.

El diseño fijo especifica las medidas en píxeles. Por lo que el contenido siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Por contra, se

56


desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeños. Un ejemplo de este diseño sería la home de aulaClic.

El diseño elástico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseños elaborados, es más complicado hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseño es la página de este curso.

Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del mismo modo independientemente del tamaño de la ventana del navegador. En cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño del elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar.

Si modificas el tamaño de la ventana, verás que la tabla es siempre del mismo tamaño. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a visualizar la página en un monitor grande con alta resolución), a los lados de la tabla aparecerá un gran espacio vacío.

Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás claramente cómo el contenido de las tablas se descuadra, quedando demasiado estirado, lo que dificulta su lectura.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la página y así definir páginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor de más grande.

No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas.

El tamaño de la celda a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura.

57

http://www.aulaclic.es/


Los valores An y Al de una celda siempre están en Píxeles. En la imagen anterior, la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente de de 200 píxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An. habría que escribir 25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la página en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribución del contenido de la tabla no se vea muy afectado por el cambio de tamaño de la ventana del navegador.

Marcos

Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.

Lo primero que hay que decir es que los marcos prácticamente ya no se usan, sobre todo desde que no son soportados por el nuevo HTML 5.

Sin embargo, puede ser útil conocer como funcionan por si tienes que retocar alguna página antigua que contenga marcos.

8.1. Introducción

Los marcos o frames sirven para distribuir los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es la página que contiene los marcos agrupados.

58


Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.

Como deciamos antes, actualmente los marcos han caido en desuso. Crean problemas a la hora de ser indexados por los buscadores, y estar correctamente indexado y posicionado es crucial para una web. Resultan confusos a la hora de utilizar los botones Atrás y Adelante de los navegadores. Con los Favoritos o Marcadores también resultan poco claros. Si no se define correctamente el destino de los enlaces pueden presentar problemas de anidamientos, ya que toda la página se abrirá en una parte del marco.

Por ejemplo, si vemos el código fuente de una página con marcos, vemos que realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegación del sitio.

La pega más común al no usar marcos es tener que repetir los elementos comunes, como el menú y logo en cada página, con la complicación correspondiente a la hora de hacer un cambio. No obstante, esto es fácilmente solucionable si empleamos PHP o JavaScript en nuestra página.

Por lo tanto, si piensas colgar tu página en internet para uso público, no te recomendamos su uso.

Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

59


Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

60


Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.

En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.

Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayúsculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos contengan.

61


Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

8.4. Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que podemos equivocarnos al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en

ellos antes de pulsar sobre Guardar .

8.5. Configurar marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.

En Origen aparece el nombre del documento HTML que está contenido en el marco.

En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.

Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.

62


Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.

El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegador.

Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.

A través del campo Origen del inspector de propiedades, sólo es posible especificar el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos.

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para

63


que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te serán más fáciles de entender.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página. Por ejemplo leftFrame y mainFrame. Si abrimos el conjunto del marco en uno de estos destinos se producirá un anidamiento.

Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.

Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales

Formularios

Introducción

64


Los formularios se utilizan para recoger datos de los usuarios. Nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en PHP, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario simple.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario,

o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios.

65


A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades. Antes de insertar estos elementos debemos crear el propio formulario tal y como veremos en el siguiente punto.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

66

Campo de text **********


También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.

Casilla de verificación

Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opción o no.

Deseo recibir información

Puede asignársele el Estado inicial como Activado o como Desactivado.

Botón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el mismo nombre, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir una opción.

Superman

Spiderman

Seleccionar (Lista/Menú)

Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.

Los elementos se añaden a través del botón Valores de lista... del Inspector de propiedades.

67

--- Elige opción lista ---

--- Elige opción menú---PerroGatoCanarioLoro


Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

Etiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos. Además, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy práctico en casillas de verificación y botones de opción.

Sin etiqueta. Hay que pulsar sobre la casilla.

Con etiqueta. Podemos pulsar en el texto.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a través del nombre sabremos qué control los envía.

Crear formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de él, ya que cuando lo demos a enviar, sólo se enviarán los datos de los elementos de dentro del formulario.

Puedes crear formularios a través del menú Insertar → Formulario, opción Formulario, o desde el panel Insertar.

68


Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.

Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.

Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.

Validar formularios

La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficiente y rápido que enviar la página y validarla sólo en el servidor.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.

69


Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.

Multimedia

Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo, que son los más empleados. Utilizaremos dos métodos, usando las nuevas etiquetas de HTML 5 y mediante los plug-in.

Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash todavia es uno de los elementos multimedia más empleados en las páginas web, aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el

70


plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.

Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Común, pulsando sobre la opción SWF que aparece al desplegar el menú Media.

Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), podremos editarlo con pulsar en Editar.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.

La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la

71


película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.

La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.

La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.

Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).

El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.

72


Sonido

No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Siempre es mejor que que el usuario abandone la página.

Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes que también pueden utilizarse (MIDI). Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in.

1. Nueva etiqueta <audio>

Hasta hace poco la única forma de insertar audio en una página web era mediante plug-in pero desde que apareció HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estándar sin necesidad de plug-in.

La etiqueta <audio> sólo funcionará en los navegadores compatibles con HTML 5, IE a partir de la versión 9 y las versiones de Firefox 3.5, Chrome 3.0 y Safari 3.0, además de algunos otros.

Si tienes acceso Creative Cloud podrás insertar el tag <audio> desde Insertar, Común, Media, opción HTML 5 Audio, en otro caso debes hacerlo en la vista de código. En la unidad 12 explicaremos con más detalle cómo escribir código HTML desde la vista código.

73


La forma de la etiqueta es la siguiente:

<audio> <source src="archivo sonido" type="MIME-type"/> </audio>

No todos los navegadores reconocen los formatos de archivos de sonido más utilizados, en la siguiente tabla podemos ver la compatibilidad entre formatos y navegadores, así como sus correspondientes mime-types (en marzo 2013):

Navegador MP3 WAV OGG

Internet Explorer 9+ si no no

Chrome 6+ si si si

Firefox 3.6+ no si si

Safari 5+ si si no

Tipo MIME audio/mpeg audio/wav audio/ogg

Por ejemplo, el siguiente código se reproducirá en todos los navegadores citados menos Firefox:

<audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador</audio>

Si tu navegador no es Firefox deberías ver el reproductor de sonido a continuación.

Se suele añadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el volumen.

También es bueno añadir un texto para que avise al usuario que su navegador no reconoce la etiqueta.

Podemos repetir la instrucción source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducirá en más navegadores.

Por ejemplo

<audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> <source src="media/audio.ogg" type="audio/ogg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador.</audio>

74


De esta forma el navegador Firefox intentará reproducir el primer archivo y como no es capaz de ello, lo intentará con el segundo archivo. Ahora desde Firefox si se reproducirá el sonido.

Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.

Para insertar un archivo de vídeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.

1. Vídeo con HTML 5.

El formato básico de la etiqueta <video> es el siguiente.

<video>

<source src="archivo vídeo" type="MIME-type"/>

</video>

La instrución típica para reproducir vídeo sería, por ejemplo:

<video width="160" height="120" controls>

<source src="media/cotorra.mp4" type="video/mp4"/>

<source src="media/cotorra.ogv" type="video/ogv"/>

Este navegador no puede reproducir este archivo de vídeo. Actualice el navegador.

</video>

Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamaño del vídeo (witdth, height). Tampoco todos los navegadores son capaces de reproducir todos los tipos de vídeo, por lo cual es conveniente colocar el vídeo en más de un formato. La compatibilidad de los tipos de vídeo con los navegadores más usados se muestra en la siguiente tabla (en marzo 2013).

Navegador MP4 WebM OGG

Internet Explorer 9+ si No no

Chrome 6+ si Si si

Firefox 3.6+ no Si si

75


Safari 5+ si No no

Tipo MIME video/mp4 video/webm video ogv

A continuación se ejecutará el código del ejemplo que estamos viendo, verás un reproductor de vídeo si estás utilizando un navegador compatible:

La etiqueta <vídeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes:

- autoplay. Hace que el vídeo comience a reproducirse al cargarse la página.

- loop. Para que se reproduzca una vez tras otra, sin parar.

- preload. Para que se cargue al hacelo la página especificaremos preload="auto", para que se cargue al pulsar play, preload="none".

También es posible utilizar otros reproductores y controlar la reproducción del vídeo mediante Javascript.

Si tienes acceso Creative Cloud podrás insertar la etiqueta <video> desde Insertar, Común, Media, opción HTML 5 Video, en otro caso debes hacerlo en la vista de código.

Plantillas

Introducción

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un formato uniforme.

Además del formato, es frecuente tener elementos que se repiten en cada página, como el logo o el menú.

La mayoría de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.

No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una.

76


Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella. Esto nos puede ahorrar mucho trabajo.

Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.

Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con Dreamweaver.

Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, que se puede abrir a través del menú Ventana, opción Activos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón . Si el botón está desactivado, pulsa con el botón derecho del ratón sobre el área de plantilla y elige Nueva Plantilla).

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.

77


Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la imagen.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

Al guardar la plantilla la página cambia de carpeta, a Templates, como ya hemos dicho. Si contenía enlaces o imágenes se nos ofrecerá la opción de Actualizar vínculos. Si lo hacemos, la plantilla se verá con normalidad y podremos emplearla para crear páginas en cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imágenes u hojas de estilo, ya que la ruta no será la correcta, y sólo nos servirá para crear páginas en la misma carpeta que el archivo desde el que creamos la plantilla.

Ahora solo nos quedaría cambiar los elementos variables por regiones editables

Etiquetas

Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando <p class="miclase"> y </p>.

78


También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.

Preguntas frecuentes:

¿Qué tipos de documentos puedo abrir con Dreamweaver CC?

HTML CSS PHP JavaScript LESS SASS PHP

XML ColdFusion SQL ASP VTML Archivos de texto

¿Puedo seguir utilizando versiones anteriores de Dreamweaver?

Sí. Si ya tiene una instalación anterior de Dreamweaver CS6, puede seguir utilizándola tal como está. Los abonados a Creative Cloud pueden descargar versiones anteriores de Dreamweaver en cualquier momento para utilizarlas junto con su instalación actual de Dreamweaver CC.

¿Qué es Adobe Dreamweaver CS6 y a quién va dirigido?

El software Adobe Dreamweaver CS6 es la aplicación líder de la industria para el desarrollo de sitios web y aplicaciones móviles con la integración de Adobe PhoneGap. A través de su potente entorno de codificación y una interfaz visual e intuitiva, los diseñadores y desarrolladores de todos los niveles pueden seguir las mejores prácticas y los estándares de la web para crear páginas web atractivas y dinámicas para múltiples dispositivos.

¿Qué ediciones de Adobe Creative Suite Incluyen Dreamweaver CS6?

Además de estar disponible como un producto individual, Dreamweaver CS6 se puede comprar como parte de Adobe Creative Suite 6 Design y Web Premium o Master

79


Collection software. Ver el Dreamweaver guía de compra para comparar las ediciones de Suite.

¿Cómo se integra Dreamweaver CS6 con otros productos de Adobe?

Dreamweaver CS6 es una potente aplicación para la creación de sitios web y aplicaciones móviles. Ahorre tiempo, trabajar de manera más eficiente, y crear diseños convincentes con Crear componentes de la suite, incluyendo Adobe Flash Professional, Fireworks y Photoshop Extended. Y como novedad para CS6, construir y empaquetar aplicaciones móviles para Android e iOS con PhoneGap Adobe.

¿Qué clientes son elegibles para recibir las actualizaciones para los miembros de

Adobe Creative Cloud?

Estas actualizaciones están disponibles exclusivamente para miembros de Creative Cloud y suscriptores de productos Dreamweaver individual. No están disponibles para los clientes que poseen una versión perpetua licencia de Dreamweaver CS6, ya sea como un producto individual o como un componente de una edición de Creative Suite 6.

¿Se proporcionarán estos cambios a los clientes de licencias de Adobe en el

mantenimiento?

No. Estos cambios son sólo para miembros individuales Creative Cloud.

¿Existen problemas de compatibilidad al intercambio de archivos de la versión

perpetua-licencia de Dreamweaver CS6 y la actualización miembro / suscripción

Dreamweaver CS6 Creative Cloud?

No, no hay problemas de compatibilidad o de intercambio de archivos entre estas versiones, el tipo de archivo es el mismo.

80