Este libro se dirige a los creadores de sitios web estáticos (sin conexión a datos externos al sitio) que deseen sacar el máximo provecho del célebre programa de Adobe, Dreamweaver CS4. En él se describe de forma práctica las funciones esenciales de esta versión que permiten crear y publicar un sitio web conforme a las normas del W3C, lo que implica separar el contenido, en HTML, del formato y el diseño de página, establecidos mediante hojas de estilos CSS (para crear un sitio completamente CSS).
Tras estudiar el entorno y aprender a definir un sitio, abordará las hojas de estilos CSS (organización, sintaxis y administración) antes de crear las primeras páginas web, compuestas de todo tipo de elementos (texto, imágenes, tablas, vídeos, hipervínculos...). También verá cómo crear formularios, utilizar componentes de interfaz de Spry (tecnología Ajax), sacar provecho de las bibliotecas de objetos y de las plantillas. Hay un capítulo dedicado a la optimización del código para los estándares del web (validación de código según los navegadores, accesibilidad, acceso al código HTML...). El libro finaliza con la publicación del sitio en el servidor.

Ahorra Con Agapea
"Compra "Dreamweaver CS4 para PC/Mac - Cree un sitio completamente CSS y conforme a los estándares del W3C" junto a "Hipatia de Alejandría":

Por solo 29.97 € Gastos de envío gratis^**

Introducción

Internet en la actualidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

El World Wide Web Consortium y los estándares. . . . . . . . . . . . . . . . . 7

Los programas de creación de sitios web. . . . . . . . . . . . . . . . . . . . . . 7

Objetivo del libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Interfaz de creación

El entorno del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

La pantalla de inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Los espacios de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Los paneles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Los paneles importantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Las barras de herramientas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

La barra de estado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

En entorno de creación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Los navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Definir el sitio local y remoto

El sitio local y el sitio remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Definir el sitio local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Definir el sitio remoto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Las otras categorías . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Administrar los sitios creados . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Elegir un sitio local. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Hojas de estilos CSS

Los estándares del web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Cómo utilizar los estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Crear estilos en el documento activo. . . . . . . . . . . . . . . . . . . . . . . . 45

Crear estilos en un archivo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Administrar el vínculo de una página HTML a un archivo

de hojas de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Mover los estilos definidos para una página. . . . . . . . . . . . . . . . . . . . 60

Aplicar los estilos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Administrar los estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Eliminar los estilos aplicados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Las hojas de estilos CSS de Dreamweaver . . . . . . . . . . . . . . . . . . . . 79

La noción de marco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Tabla de contenido 1

© Editions ENI - Reproducción prohibida



Crear páginas Web

Crear una nueva página web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

La configuración por defecto de los nuevos documentos . . . . . . . . . . . 85

Guardar el nuevo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Administrar las páginas web creadas. . . . . . . . . . . . . . . . . . . . . . . . 88

Formatear las páginas con las hojas de estilos . . . . . . . . . . . . . . . . . 90

Insertar texto

Principios generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Utilizar encabezados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Utilizar los párrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Utilizar las citas de párrafo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Utilizar texto preformateado . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Utilizar las listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Conocer el elemento HTML utilizado. . . . . . . . . . . . . . . . . . . . . . . . 107

Las demás posibilidades de inserción de texto. . . . . . . . . . . . . . . . . 108

Editar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Insertar una línea de separación . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Formatear caracteres con CSS

Principios generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Aplicar formato con los estilos clásicos . . . . . . . . . . . . . . . . . . . . . 113

Aplicar formato con los estilos CSS. . . . . . . . . . . . . . . . . . . . . . . . 117

La categoría Tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

La categoría Fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

La categoría Bloque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

La categoría Cuadro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Formatear texto con CSS

El formato CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

La categoría Tipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

La categoría Fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

La categoría Bloque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

La categoría Cuadro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

La categoría Lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

Aplicación de formato a la barra horizontal . . . . . . . . . . . . . . . . . . . 141

2 Tabla de contenido

© Editions ENI - Reproducción prohibida



Insertar tablas

La utilización correcta de las tablas . . . . . . . . . . . . . . . . . . . . . . . 143

Insertar una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

La estructura de la tabla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

Usar el modo de tablas expandidas . . . . . . . . . . . . . . . . . . . . . . . . 153

Ordenar una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

Formatear tablas con CSS

El código HTML y CSS para las tablas . . . . . . . . . . . . . . . . . . . . . . 155

Aplicar formato a la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Dar formato a la leyenda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Aplicar formato a las celdas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Insertar imágenes

Los formatos de imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

La ruta de acceso a las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . 167

Insertar imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169

Modificar las imágenes insertadas. . . . . . . . . . . . . . . . . . . . . . . . . 175

El formato HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Formatear imágenes con CSS

Las propiedades CSS utilizadas. . . . . . . . . . . . . . . . . . . . . . . . . . . 177

La alineación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Las otras propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Un ejemplo más completo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

Insertar formularios

Utilizar formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

La vista en vivo de formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

Insertar el formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Los objetos de introducción de datos. . . . . . . . . . . . . . . . . . . . . . . 183

El campo oculto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Los objetos botón de opción y casilla de verificación . . . . . . . . . . . . . 188

El menú y la lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

El campo de selección de archivo. . . . . . . . . . . . . . . . . . . . . . . . . . 198

Los botones de gestión del formulario . . . . . . . . . . . . . . . . . . . . . . 199

Ejemplo de formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

La validación de los formularios con los widgets Spry . . . . . . . . . . . . 202

El widget de campo de texto de validación de Spry . . . . . . . . . . . . . . 203

Tabla de contenido 3

© Editions ENI - Reproducción prohibida



El widget de área de texto de validación de Spry . . . . . . . . . . . . . . . 211

El widget de casilla de verificación de validación de Spry . . . . . . . . . . 214

El widget de selección de validación de Spry . . . . . . . . . . . . . . . . . . 216

El widget de contraseña de validación de Spry. . . . . . . . . . . . . . . . . 218

El widget de confirmación de validación de Spry . . . . . . . . . . . . . . . . 220

El widget de grupo de opciones de validación de Spry . . . . . . . . . . . . 221

Formatear formularios con CSS

Las hojas de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Aplicación de formato a los campos de texto. . . . . . . . . . . . . . . . . . 226

Aplicar formato a los grupos de campos. . . . . . . . . . . . . . . . . . . . . 229

Aplicar formato a los menús. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Aplicar formato a los botones. . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Aplicar formato al formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Aplicar formato a los widgets Spry . . . . . . . . . . . . . . . . . . . . . . . . 234

Utilizar el panel Propiedades para dar formato

a los mensajes de error. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

Insertar vínculos

Los vínculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Los vínculos en una misma página . . . . . . . . . . . . . . . . . . . . . . . . . 239

Los vínculos a otra página del sitio . . . . . . . . . . . . . . . . . . . . . . . . 242

Crear vínculos externos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

El menú de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

La barra de menús de Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

Verificar los vínculos en una página . . . . . . . . . . . . . . . . . . . . . . . . 253

Verificar todos los vínculos del sitio. . . . . . . . . . . . . . . . . . . . . . . . 255

Utilizar imágenes para crear vínculos. . . . . . . . . . . . . . . . . . . . . . . 256

Formatear vínculos de texto con CSS

Los estilos específicos para los vínculos. . . . . . . . . . . . . . . . . . . . . 259

La creación de estilos específicos . . . . . . . . . . . . . . . . . . . . . . . . . 260

La caché de los navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

La barra de menús de Spry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Elementos multimedia

El multimedia en el web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Insertar un vídeo de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

Insertar una animación de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Los otros elementos multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . 271

4 Tabla de contenido

© Editions ENI - Reproducción prohibida



Componentes de interfaz de Spry

Los componentes de interfaz de Spry . . . . . . . . . . . . . . . . . . . . . . 273

El panel que puede contraerse . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

El acordeón. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Los paneles en fichas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

La información sobre herramientas . . . . . . . . . . . . . . . . . . . . . . . . 287

Aplicar formato con las CSS

Hojas de estilo para aplicar formato . . . . . . . . . . . . . . . . . . . . . . . 291

Crear estilos para las etiquetas . . . . . . . . . . . . . . . . . . . . . . 292

Mostrar las propiedades de las etiquetas. . . . . . . . . . . . . . . . . . . . 299

Un primer ejemplo de formato con cajas flotantes . . . . . . . . . . . . . . 301

Un segundo ejemplo de formato con cajas flotantes . . . . . . . . . . . . . 305

Los elementos en posición absoluta. . . . . . . . . . . . . . . . . . . . . . . . 311

Los ejemplos de formato de página de Dreamweaver. . . . . . . . . . . . . 321

Biblioteca de activos

Utilización de la biblioteca de activos . . . . . . . . . . . . . . . . . . . . . . . 323

Los activos de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

Los activos de colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

Los activos de vínculos externos (URL) . . . . . . . . . . . . . . . . . . . . . 325

Los activos de animaciones Flash (SWF). . . . . . . . . . . . . . . . . . . . . 326

Los activos de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Los activos de bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Las plantillas de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332

Páginas según los estándares del web

¿Por qué utilizar los estándares? . . . . . . . . . . . . . . . . . . . . . . . . . 341

La referencia del código HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

Visualizar el código en la página . . . . . . . . . . . . . . . . . . . . . . . . . . 343

Validar el código HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Limpiar el código fuente HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

Validar el código en función de los navegadores . . . . . . . . . . . . . . . . 353

Verificar la accesibilidad del documento . . . . . . . . . . . . . . . . . . . . . 356

Convertir al formato XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Tabla de contenido 5

© Editions ENI - Reproducción prohibida



Publicación del sitio

El sitio local y el sitio remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359

Insertar metadatos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359

Administrar los archivos locales del sitio . . . . . . . . . . . . . . . . . . . . 361

Mostrar los servidores local y remoto . . . . . . . . . . . . . . . . . . . . . . 363

La publicación en el servidor remoto . . . . . . . . . . . . . . . . . . . . . . . 365

Recuperar archivos del servidor . . . . . . . . . . . . . . . . . . . . . . . . . . 371

Sincronizar los archivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Generar un informe del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Glosario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Indice temático . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381

6 Tabla de contenido

© Editions ENI - Reproducción prohibida