dreamweaver cs6 parte1

Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por nosotros. Rm, 5:8

1

Ing. CIP Herberth Aranda Rojas [email protected]

Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

D R E A M W E A V E R C S 6

N D I C E D E T A L L A D O

UNIDAD 1. CONCEPTOS BSICOS DE DREAMWEAVER CS6

1.1. Qu es Dreamweaver CS6 1.2. Novedades de Dreamweaver CS6

HTML bsico 1.3. Editar pginas web 1.4. Cmo tener una pgina en Internet 1.5. Arrancar y cerrar Dreamweaver CS6 1.6. Abrir y guardar documentos

Compaginar dos sesiones 1.7. Mi primera pgina

UNIDAD 2. EL ENTORNO DE DREAMWEAVER CS6

2.1. La pantalla inicial 2.2. Las barras 2.3. Inspectores y paneles

Personalizar el rea de trabajo 2.4. Vistas de un documento 2.5. La ayuda

UNIDAD 3. CONFIGURAR UN SITIO LOCAL

3.1. Introduccin 3.2. Crear o editar un sitio web sin conexin a Internet 3.3. Abrir un sitio 3.4. Ver el sitio 3.5. Subir archivos al servidor 3.6. Propiedades del documento

Comprobar tamao para optimizar la carga 3.7. Los colores

UNIDAD 4. EL TEXTO: PROPIEDADES Y FORMATO

4.1. Caractersticas del texto 4.2. Listas 4.3. Caracteres especiales 4.4. Estilos CSS. Introduccin 4.5. Crear un estilo personalizado 4.6. Definir o editar un estilo

El Panel CSS 4.7. Aplicar un estilo 4.8. Hojas de estilos

UNIDAD 5. HIPERENLACES 5.1. Introduccin 5.2. Tipos de referencia 5.3. Crear enlaces

Configurar nuevos enlaces 5.4. Destino del enlace 5.5. Formato del enlace 5.6. Enlace a correo electrnico

Vnculos rotos


2


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 6. IMGENES

6.1. Introduccin 6.2. Insertar una imagen

Formatos de imagen para web 6.3. Propiedades de una imagen

Mapas de imagen Cambiar formato y crear transparencias Programas de edicin de imgenes

6.4. Cambiar el tamao de una imagen 6.5. Imagen de sustitucin. Rollover 6.6. Barra de navegacin 6.7. Objetos inteligentes

Men CSS

UNIDAD 7. TABLAS

7.1. Introduccin 7.2. Insertar una tabla 7.3. Rellenar las celdas 7.4. Seleccionar elementos de una tabla 7.5. Formato de tabla 7.6. Formato CSS 7.7. Cambiar tamao de tabla y celdas 7.8. Aadir y eliminar filas y columnas 7.9. Anidar, dividir y combinar celdas 7.10. Modos de tabla 7.11. Adaptar webs a distintas resoluciones

UNIDAD 8. MARCOS

8.1. Introduccin 8.2. Crear marcos 8.3. Seleccionar marcos 8.4. Guardar 8.5. Configurar marcos 8.6. Contenido del marco

UNIDAD 9. FORMULARIOS

9.1. Introduccin 9.2. Elementos de formulario 9.3. Crear formularios 9.4. Validar formularios

UNIDAD 10. MULTIMEDIA

10.1. Pelculas Flash (SWF) 10.2. Sonido 10.3. Vdeos

UNIDAD 11. LAS PLANTILLAS

11.1. Introduccin 11.2. Crear plantillas 11.3. Establecer regiones editables en una plantilla 11.4. Basar pginas en una plantilla


3


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 12. HTML DESDE DREAMWEAVER

12.1. Etiquetas 12.2. Entidades HTML

Listado de Entidades HTML 12.3. El inspector de cdigo 12.4. Completar las etiquetas 12.5. Contraer y expandir cdigo 12.6. Errores en el cdigo 12.7. Buscar y reemplazar

Expresiones Regulares Bsqueda en Etiquetas

UNIDAD 13. OTROS ELEMENTOS

13.1. Marquesinas 13.2. Fecha 13.3. Regla horizontal 13.4. Cdigo de otras pginas

UNIDAD 14. CAPAS

14.1. Introduccin 14.2. Insertar una capa 14.3. Formato de una capa 14.4. Capas prediseadas

UNIDAD 15. COMPORTAMIENTOS

15.1. Introduccin 15.2. Insertar un comportamiento 15.3. Mostrar-Ocultar elementos 15.4. Llamar JavaScript

Eventos

UNIDAD 16. COMPORTAMIENTOS AVANZADOS 16.1. Mensajes emergentes 16.2. Texto de la Barra de Estado 16.3. Carga Previa de Imgenes 16.4. Abrir Ventana del Navegador 16.5. Cambiar propiedades CSS 16.6. Comprobar Plug-ins 16.7. Mens de Salto

UNIDAD 17. ESTILOS CSS AVANZADOS

17.1. Aplicar estilos CSS 17.2. Sintaxis CSS 17.3. Selectores compuestos 17.4. Selectores de atributo 17.5. Pseudo-clases y Pseudo-elementos CSS 17.6. Orden de aplicacin de los estilos CSS 17.7. Controles de fuente 17.8. Espaciado y alineacin 17.9. Apariencia del texto 17.10. Controles de ratn 17.11. Controles de lista 17.12. Controles de fondo 17.13. Controles de margen interior y exterior


4


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

17.14. Bordes 17.15. Elementos flotantes 17.16. Controles de elementos de bloque y en lnea 17.17. Controles de posicin 17.18. Controles de visibilidad

UNIDAD 18. DISEO DE PGINA : MAQUETACIN WEB

18.1. Maquetar una pgina web 18.2. Tamao 18.3. Desbordamiento 18.4. Posicionamiento 18.5. Posicionamiento relativo 18.6. Posicionamiento absoluto 18.7. Posicionamiento flotante 18.8. Posicionamiento fijo 18.9. Ancho de la pgina, lquido o elstico 18.10. Maquetacin prediseada en Dreamweaver 18.11. Videotutoriales. Creando un sitio web completo

UNIDAD 19. SITIOS REMOTOS

19.1. Configurar un Sitio Remoto 19.2. El Panel Archivos 19.3. Sincronizar Sitios

UNIDAD 20. SERVIDOR DE PRUEBAS

20.1. Introduccin a PHP Bases de datos

20.2. Estructura PHP 20.3. Instalar un Servidor Local con WampServer 20.4. Configuracin inicial 20.5. Trabajar con un Servidor Local WampServer 20.6. Configurar un Servidor de Pruebas 20.7. Introduccin a phpMyAdmin 20.8. Crear una Base de Datos en phpMyAdmin 20.9. Crear una Tabla en phpMyAdmin 20.10. Insertar Datos en una Tabla 20.11. Modificar la estructura de la tabla 20.12. Modificar datos de una tabla 20.13. Establecer privilegios en phpMyAdmin

UNIDAD 21. PGINAS DINMICAS

21.1. Introduccin 21.2. Crear una conexin a la Base de Datos 21.3. Juegos de registros o RecordSets 21.4. Mostrar Datos Dinmicos 21.5. Repeticiones 21.6. Orden de Juegos de Registros 21.7. Filtrado de Juegos de Registros 21.8. Paginacin de Registros 21.9. Mostrar/Ocultar Regiones 21.10. Uso de Variables 21.11. Pginas Maestro-Detalle 21.12. Asistente de Insercin de Registros 21.13. Asistente de Actualizacin de Registros 21.14. Asistente de Eliminacin de Registros 21.15. Juegos de Registros Avanzados


5


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 22. CMO CREAR UN BLOG

22.1. Introduccin 22.2. Estructura de datos 22.3. Interfaz pblica 22.4. Interfaz privada 22.5. Insertar nuevos elementos 22.6. Listado de elementos 22.7. Modificacin de elementos 22.8. Eliminacin de elementos 22.9. Restringir acceso

UNIDAD 23. XML Y RSS

23.1. Introduccin 23.2. Importar datos de un Archivo externo 23.3. Trabajar con elementos XML 23.4. Crear repeticiones 23.5. Ordenar elementos 23.6. Sentencias condicionales 23.7. Insertar un fragmento XSLT 23.8. Paso de Parmetros

UNIDAD 24. ACCESO A DATOS CON SPRY

24.1. Introduccin 24.2. Conjunto de datos XML 24.3. Crear una regin de Spry 24.4. Repeticin de Elementos 24.5. Listas de Repeticin 24.6. Mostrar Maestro - Detalle

UNIDAD 25. AJAX Y SPRY FRAMEWORK

25.1. Introduccin 25.2. Incluir Spry 25.3. Importar Datos 25.4. Definiendo regiones Spry 25.5. Mostrar informacin 25.6. Crear Repeticiones 25.7. Ordenar registros 25.8. Condicionales 25.9. Filtros 25.10. Eliminar filas repetidas 25.11. Actualizar la carga de un archivo XML 25.12. Modo Maestro/Detalle 25.13. Modo Maestro/Detalle con diferentes fuentes XML 25.14. Spry y estilos CSS 25.15. Importar Datos (II)

UNIDAD 26. SPRY Y FORMULARIOS

26.1. Introduccin 26.2. Validacin de campos de texto 26.3. Estados de validacin 26.4. Validacin de campos desplegables 26.5. Grupo de opciones 26.6. Casillas de verificacin


6


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

26.7. reas de texto 26.8. Contraseas 26.9. Campo de confirmacin

UNIDAD 27. CONTROLES SPRY AVANZADOS

27.1. Introduccin 27.2. Barra de mens 27.3. Navegacin por Fichas 27.4. Control Acorden 27.5. Panel con Contraccin 27.6. Cambiar Estilos CSS

Ejercicios paso a paso por Captulos

3. Crear un sitio web local 3. Crear nuevo documento y modificar sus propiedades 4. Insertar texto y modificar sus propiedades 4. Convertir texto en una lista 4. Redefinir el estilo de una etiqueta 4. Crear y aplicar una clase 4. Modificar el estilo de una lista 4. Exportar y vincular hojas de estilo 5. Crear un hiperenlace 5. Crear un vnculo de correo electrnico 6. Insertar una imagen 6. Crear Mapas de imagen 6. Crear Rollovers 7. Crear y rellenar una tabla 7. Modificar las propiedades de la tabla 7. Modificar el estilo de la tabla 7. Ajustar el tamao de la tabla 7. Combinar celdas 8. Crear y configurar marcos 9. Insertar elementos de formulario 10. Insertar un archivo de audio 11. Crear una plantilla 12. Buscar y reemplazar 13. Insertar la fecha de ltima actualizacin 14. Insertar una capa 15. Crear comportamiento 17. Crear una hoja de estilo CSS 17. Utilizando pseudo-elementos y clases 17. Controles de Fuente 17. Controles de Lista 17. Controles de Fondo 17. Controles de Mrgenes y Borde 17. Controles de Bloque 17. Controles de Posicin y visibilidad 20. Crear un alias en WampServer 20. Crear un Servidor de Prueba 20. Crear una Base de datos MySQL 20. Crear una tabla 20. Importar datos a una tabla 20. Asignar privilegios 21. Crear una conexin a base de datos 21. Crear un Recordset 21. Texto dinmico 21. Repeticin de texto dinmico 21. Ordenar un RecordSet 21. Filtrado de registros


7


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

21. Paginacin de registros 21. Recuento de registros 21. Ocultar/mostrar regiones 21. Enlaces con parmetros 21. Filtrar con parmetros 21. Insercin de registros 21. Utilizar sentencias SQL 22. Estructura de datos de un Blog 22. Interfaz Pblica 22. Creacin de un Men de Administracin 22. Insercin de elementos 22. Listado de elementos 22. Modificar elementos 22. Eliminar elementos 22. Restringir Acceso 23. Preparando el Servidor de Pruebas para XLS 23. Importar datos RSS 23. Enlaces con elementos 23. Repeticin de elementos 23. Ordenacin de elementos 23. Insertar XSLT en una pgina dinmica 23. Paso de parmetros 25. Crear un dataset 25. Crear una regin con informacin 25. Crear repeticiones de registros 25. Crear condiciones 25. Crear Filtros

Ejercicios propuestos por Captulos.

3. Configurar un sitio local 4. El texto: propiedades y formato 5. Hiperenlaces 6. Imgenes 7. Tablas 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos avanzados 17. Estilos CSS Avanzados 18. Diseo de pgina. Maquetacin web 20. Servidor de Pruebas 21. Pginas dinmicas 22. Cmo crear un Blog 23. XML y RSS 24. Acceso a datos con Spry 25. AJAX y Spry Framework 26. Spry y Formularios 27. Controles Spry Avanzados


8


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Pruebas evaluativas por Captulos

1. Conceptos bsicos de Dreamweaver CS6

2. El entorno de Dreamweaver CS6

3. Configurar un sitio local

4. El texto: propiedades y formato

5. Hiperenlaces

6. Imgenes

7. Tablas

8. Marcos

9. Formularios

10. Multimedia

11. Las plantillas

12. HTML desde Dreamweaver

13. Otros elementos

14. Capas

15. Comportamientos

16. Comportamientos avanzados

17. Estilos CSS Avanzados

18. Diseo de pgina. Maquetacin web

19. Sitios remotos

20. Servidor de Pruebas

21. Pginas Dinmicas

22. Cmo crear un Blog

23. XML y RSS

24. Acceso a datos con Spry

25. AJAX y Spry Framework

26. Spry y Formularios

27. Controles Spry Avanzados

Videotutoriales por Captulos.

ndice de videotutoriales

1. Conceptos bsicos Ver en YouTube

2. El entorno de trabajo Ver en YouTube

2. Las vistas Ver en YouTube

2. La ayuda Ver en YouTube

3. Crear un sitio local Ver en YouTube

3. Las propiedades de la pgina Ver en YouTube

4. Estilo CSS de las etiquetas Ver en YouTube

4. Crear y aplicar clases CSS Ver en YouTube

5. Los hiperenlaces Ver en YouTube

6. Insertar una imagen Ver en YouTube

6. Objetos inteligentes Ver en YouTube

7. Insertar y modificar tablas Ver en YouTube

8. Insertar un marco Ver en YouTube

9. Crear formularios Ver en YouTube

10. Insertar elementos multimedia Ver en YouTube

11. Crear plantillas Ver en YouTube

12. HTML desde Dreamweaver Ver en YouTube

13. Insertar otros elementos Ver en YouTube

14. Insertar capas Ver en YouTube


9


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

15. Insertar comportamientos Ver en YouTube

16. Crear un men de salto Ver en YouTube

17. Estilos CSS Ver en YouTube

18. Maquetar una pgina web (1/2) Ver en YouTube

18. Maquetar una pgina web (2/2) Ver en YouTube

18. Crear un sitio web completo (1/4) Ver en YouTube




19. Configurar un sitio remoto Ver en YouTube

20. Crear una base de datos en phpMyAdmin Ver en YouTube

20. Editar registros con phpMyAdmin Ver en YouTube

21. Crear un juego de registros Ver en YouTube

21. Utilizar un juego de registros Ver en YouTube

21. Paginacin de registros Ver en YouTube

21. Insertar registros Ver en YouTube

21. Eliminar registros Ver en YouTube

22. Qu es un Blog? Ver en YouTube

23. Mostrar noticias de un RSS Ver en YouTube

24. Acceso a datos con Spry Ver en YouTube

25. Spry desde el cdigo Ver en YouTube

26. Validar formularios con Spry Ver en YouTube

27. Men y fichas con Spry Ver en YouTube


10


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 1.

CONCEPTOS BSICOS DE DREAMWEAVER CS6

1.1. Qu es Dreamweaver CS6

Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.

Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo y

funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..,

de una forma muy sencilla y visual.

Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con

mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de

Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si

quieres adquirir la versin completa de este fantstico programa.

Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas

Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.

Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML

puedes verlas aqu.

1.2. Novedades de Dreamweaver CS6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.


11


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en ingls Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son ms usados, y ahora Dreamweaver integra con los principales, permitindonos crear nuestras pginas con la estructura adecuada.

Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los mrgenes aplicados al elemento seleccionado, y qu propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de Adobe, que nos permite

comparar cmo se ve una misma pgina web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.

Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su pgina web.


12


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Configuracin sencilla de sitios. Ahora resulta ms sencillo configurar nuestro sitio local y remoto.

Ya que se han simplificado las opciones esenciales, y distinguido ms las opciones avanzadas y poco importantes.

Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

Nueva interfaz de usuario. Dreamweaver CS6 presenta una nueva interfaz que permite cambiar

fcilmente de espacio de trabajo y adaptar los paneles de forma rpida y cmoda. Esta nueva interfaz

es muy parecida a los dems programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos

espacios de trabajo adecuados para cada ocasin (clsico, programador, diseador, etc. ) pero

tambin tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.

Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veramos la

pgina en un navegador. Si hemos incluido elementos interactivos en nuestra pgina, como mens

desplegables, mens tipo acorden, widgets, etc, podremos interactuar con ellos en la vista en vivo, de

la misma forma que lo haramos en un navegador.

Navegador de cdigo. La funcin de Navegador de cdigo muestra las fuentes de cdigo que

afectan a la seleccin que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones

JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.


13


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

La nueva barra de Archivos relacionados muestra todos los archivos que de una forma u otra

contribuyen al diseo final de nuestra pgina, como hojas de estilo css, archivos javascript, etc.

Mediante esta nueva utilidad podemos pasar de un archivo a otro cmodamente y tener una visin

mucho ms clara de todos los archivos con los que estamos trabajando en nuestro sitio web.

Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en

propiedades HTML (el que conocamos de otras versiones) y CSS. ste ltimo nos permite crear y

editar nuestros estilos de forma cmoda y sencilla.

Objetos inteligentes de imagen. Dreamweaver CS6 incluye la posibilidad de crear

objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las pginas web, de forma

que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen

vinculados. Podemos redimensionar o cambiar caractersticas de los objetos inteligentes de imagen

directamente desde Dreamweaver.

Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De

esta forma los usuarios previamente habilitados podrn actualizar el contenido de estas regiones de la

pgina web directamente desde el navegador, sin necesidad de tener un editor de pginas web

instalado.

Software Subversion. Subversion es uno de los ms usados sistemas de control de versiones

para equipos de desarrollo. Dreamweaver CS6 es capaz de sincronizarse con el repositorio de

versiones, facilitando el trabajo a los profesionales que empleen este sistema.

Conjuntos de datos. Dreamweaver CS6 permite la creacin de pginas dinmicas de forma

sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en

profundidad su funcionamiento. Resulta muy sencillo crear regiones dinmicas con la tecnologa Spry.


14


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

1.3. Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los

documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML

deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.

Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor

grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la

pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina, sobre

todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el

cdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar a aprenderlo rpidamente.

Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que

destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser

Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales

tienen la ventaja de ser gratuitos.

1.4. Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con

servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por

disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de

transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio

de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en

cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender


15


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en

ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa,

aunque s es aceptable para una pgina personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio,

tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en

registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser

nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con

distintas terminaciones, como por ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra

pgina no ser ms que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de

cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos

para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para

usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

En cualquier caso, una vez que tengas tu espacio en Internet, darle contenido es muy

sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que

se encuentre a disposicin de todo el mundo en Internet.

Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor

manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen

en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no

lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni

espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el

servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l.

Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los

nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y

minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese

nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.


16


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

1.5. Arrancar y cerrar Dreamweaver CS6

Veamos las dos formas bsicas de arrancar Dreamweaver CS6.

Desde el botn Inicio (Windows Vista 7) situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS6 y haz clic sobre l para arrancar el programa.

Desde el icono de Dreamweaver CS6 del Escritorio .

Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando

realices los ejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema

mientras utilizas Dreamweaver, como te explicamos aqu.

Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinacin de teclas Alt + F4.

Hacer clic sobre el men Archivo y elegir la opcin Salir.

Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te

pedir confirmacin para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).

Pulsar la combinacin de teclas Ctrl + O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con Adobe Dreamweaver CS6.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:

Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).

Pulsar la combinacin de teclas Ctrl + N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.


17


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en

blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que

podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos

el botn Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn Guardar de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl + S.

Hacer clic sobre el men Archivo y elegir la opcin Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios

documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar

todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botn Guardar todo de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en cada

uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es

posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente


18


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.

De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del

documento .

1.7. Mi primera pgina

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina

web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo

te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn

hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para

descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como

puede hacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la

columna Diseo dejamos la opcin por defecto: .

Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento.

Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.


19


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Entonces se abrir una ventana como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color

azul.

Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina.

Para aplicar los cambios, pulsa sobre el botn Aceptar.

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde

estamos creando nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes.

Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el

botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una

opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite

grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la

pgina en Internet, hay que respetar los derechos de autor de la imagen.

Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que

estamos creando. Gurdala en la carpeta dnde vas a guardar la pgina que acabas de crear.


20


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el

cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter). Despus nos dirigimos al

men Insertar, opcin Imagen.

En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas

guardado, seleccionarla y pulsar Aceptar.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de

propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente

aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades.

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para

que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formato

Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.


21


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS

a la izquierda.

Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de

CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la

informacin, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

Al utilizar el inspector de propiedades de CSS (Cascading Style Sheets), Dreamweaver aplica

formato al texto mediante estilo de hojas en cascada. Los estilos CSS ofrecen un mayor control sobre

el diseo de la pgina Web y reducen el tamao del archivo.

Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, para aplicar el formato

solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul

#009 y centra el texto, tal y como muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botn .

Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >, marca los

botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido

del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos

aparece la jerarqua de etiquetas. Haz clic sobre p.

Ahora, centra el prrafo como hemos visto hasta ahora, pulsando en .

Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de

Propiedades a las propiedades de HTML.


22


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

Por ltimo guarda el documento. Ya sabes

que puedes hacerlo a travs del men Archivo, desde la opcin Guardar.

Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo

hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen

descargada.

Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos

los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.

Prueba evaluativa de la Unidad 1

EJEMPLO DE DISEO

Esta es mi primera pgina.

Esta pgina nos servir para comprobar el funcionamiento de Dreamweaver.

A continuacin se muestra un enlace para acceder a otra web.

www.fiupla.edu.pe


23


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 2.

EL ENTORNO DE DREAMWEAVER CS6

Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los

paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde

estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos

cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear

pginas web.

2.1. 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 SERA mas fcil ententer

el resto del curso) puede no coninsidir con el ordenador ya que cad usuario puede decidir que

elementos quiere que se vean en cada momento y donde , como se vera mas adelante.


24


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

2.2. Las barras

La barra de la aplicacin.

La barra la aplicacin es una novedad en Dreamweaver CS6. Si tenemos la ventana maximizada

veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en

la imagen superior.

Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios

botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas

para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a

izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir,

o al administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un

espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos

guardar y cargar. Lo veremos ms adelante.

Los mens, estn agrupados en categoras.

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 travs de los mens, aunque en ocasiones nos enven a los paneles.

Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir

cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene


25


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones

haciendo clic con el botn derecho, como Cerrar otros archivos.

Dreamweaver CS6 aade una novedad. Debajo de las pestaas encontramos los archivos a que

utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con

un clic. Esto nos ahorrar bastante tiempo.

La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el

mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.

Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano (para desplazarse) y

Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.

Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver

u ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del

men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge,

Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

La barra de herramientas de documento.


26


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las

distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las

distintas opciones de validacin que nos ofrece el programa.

La barra de representacin de estilos.

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos

dispositivos, si estamos utilizando hojas distintas que dependan del eso.

Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo

como otra barra de herramientas.

2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen

como paneles 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.

A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los

paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,

permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en

Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin,

dimensiones, peso, clase, etc...


27


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los

diferentes elementos de la pgina Web que estemos diseando.

El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar,

clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas,

formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel

flotante o como una barra de herramientas integrada en la ventana de trabajo.

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

avanzado .

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de

documento:


28


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

La vista Diseo

La vista Diseo permite trabajar con el editor visual.

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

La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo

fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn

se va modificando el cdigo.


29


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

La vista Dividir

La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona superior muestra

el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este

cambio se aplica directamente sobre la otra.


30


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

La vista en Vivo

La vista en Vivo es otra de las novedades que trae Dreamweaver CS6. Nos ofrece una vista del

resultado final no editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta

vista nos permite interactuar con ellos, tal como lo haramos con el navegador.

La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos

cambios se previsualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado,

que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos

elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el

navegador.

La vista Cdigo 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 cdigo. Lo que hace es que al seleccionar partes de la web en la Vista

en vivo, se seleccione su correspondiente cdigo fuente.

2.5. La ayuda


31


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1.

Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra un resumen de esta herramienta.

Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.

Acceder a Dreamweaver Support Center en la web.

Acceder al Foros en lnea de Adobe.

Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de

la bsqueda y buscar, iremos a la ayuda online de Adobe.


32


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

UNIDAD 3.

CONFIGURAR UN SITIO LOCAL

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las

propiedades de los documentos, como puede ser el color de fondo.

3.1. Introduccin

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo

similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas

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

imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro

de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es

lo que se conoce como sitio local.

Despus se podrn 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 organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los

vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.

La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando

se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre.

Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es en el navegador, ste

intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el

caso de que no existiera ninguna pgina con el nombre index.htm, y no se podra navegar por el sitio

a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm


33


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta

raz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo

sitio.

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

Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin

Administrar sitios o Nuevo sitio...


34


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene

la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma

ventana en la que definir o modificar las caractersticas del sitio.


35


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.

Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo

clic en ella.

Vamos a ver los datos que hay que editar para la categora 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 raz 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 caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y

de momento no nos interesan.

Las dems 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.

Aunque s destacaremos la opcin Usar vnculos de distincin entre maysculas y minsculas.

Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores

distinguen entre maysculas y minsculas. As Dreamweaver tambin lo har.

Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa

Bsicas, en vez de la pestaa Avanzadas.

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios....

seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men

desplegable Archivos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.


36


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Unidad 3.

Ejercicio paso a paso: Crear un sitio web local

Objetivo

Practicar las operaciones que hay que realizar para crear un sitio sin conexin a Internet.

En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante

que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir

construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores

puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.

Nota: Si es la primera vez que realizas los ejercicios, recuerda que encontrars todos los archivos

necesarios en la carpeta de ejercicios. Esta carpeta se incluye con los cursos de pago, pero tambin

puede ser descargada gratuitamente por cualquier usuario registrado en aulaClic.

Ejercicio

1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando. Llmala mis_sitios.

2. Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.

3. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

4. Haz clic sobre el men Sitio.

5. Elige la opcin Administrar sitios. Se abrir una nueva ventana.

6. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana.

7. Selecciona la pestaa Avanzadas de la nueva ventana.

8. Selecciona Datos locales en Categora.

9. En Nombre del sitio escribe Cocina.

10. En Carpeta raz local busca la carpeta cocina que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios. Seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.

11. En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.

12. Haz clic sobre el botn Aceptar y sobre el botn Listo.

A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la

que aparece si pulsas aqu.


37


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

3.4. Ver el sitio

El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes

de Dreamweaver, ya que nos da acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm,

platossemana.htm, postresemana.htm y las carpetas imagenes 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 botn 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. Tambin el servidor de pruebas o las

bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha)

con nuestros archivos.


38


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre

ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver,

automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas,

origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn

correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver

simplemente no encontrar la pgina.

Al modificar algn objeto que es referenciado por algn 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 botn Actualizar, aunque esto depender de si tenemos

configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos

establecer desde el men Edicin, opcin Preferencias, categora General.


39


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

3.5. Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers

subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers 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 funcionarn correctamente, y es posible que algunas imgenes no se

muestren.

Para subir los archivos va web debers 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.

Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de

Windows) y, obviamente, nos es mucho ms til para subir los archivos.

Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs

descargarte el programa y su traduccin tu idioma.

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.


40


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Aqu debers introducir los datos que te facilit el servidor dnde vas a alojar tus pginas: Servidor,

Usuario y Contrasea.

Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una

carpeta donde podrs 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 nuestro sitio. A la derecha

encontramos Sitio remoto, con los archivos ubicados en el servidor FTP. Se puede usar el

FileZilla


41


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto

al local, para descargarlos al equipo.

Vers como el programa empieza a copiar la informacin de tu disco a Internet.

Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de

direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor.

Busca la carpeta public_html y sube tus archivos all.

3.6. Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato,

es decir, que tengan el mismo color de fondo, de fuente, etc.


42


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades

de la pgina.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl + J.

Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina.

Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras.

En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:

Fuente de pgina: es el tipo de letra que le aplicaremos al texto.

Tamao: es el tamao 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 segn 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.


43


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

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

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.

En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las

propiedades:

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 segn 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.

Vnculos: es el color que mostrar el texto de los vnculos.

Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.

Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS

aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos

HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al

diseo. Por eso, te desaconsejamos su uso.


44


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.

Tamao: es el tamao del texto de los vnculos.

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas.

Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no.

Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo.

Vnculos activos: es el color de los vnculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

En la categora Encabezados (CSS) encontramos la propiedad:


45


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

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 tamao y color que

queremos aplicar a cada tipo de encabezado.

En la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver

En la categora Imagen de rastreo encontramos las propiedades:

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

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

Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.

Para ver cmo comprobar el tamao de los documentos, pulsa aqu .

3.7. 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 slo podamos utilizar estos colores. Podemos personalizarlos a travs del

botn de la parte superior de la paleta.

Los colores pueden asignarse a travs de los botones: .

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin 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 pgina, que vimos en este tema.


46


Porq

ue d

e T

al manera

Amo D

ios

al M

undo q

ue h

a d

ado a

su H

ijo U

nignito p

ara

que

Todo A

quel que

en E

l Cre

a N

o s

e P

ierd

a M

as

Tenga V

ida E

tern

a.

Jn.

3:1

6

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 nmero

hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con

valor #39F, el botn quedara 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 nmeros hexadecimales, que van del 0 a la F

(A=10, B=11, ..., F=16).

El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total.

Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.

Por tanto, podemos definir un color como #F7F0E2 donde el primer par

dreamweaver cs6 parte1

Documents