Curso de
Dreamweaver CS4
Febrero de
2014

Monitor: Francisco Sánchez Guisado
francisco@humantica.com
www.humantica.com
Curso de Dreamweaver CS4
1. Introducción
2. Entorno de trabajo
3. Configurar un sitio
4. Texto
5. Hiperenlaces
6. Imágenes...
Consulta la página de descargas de Dreamweaver.
Ojo, la instalación del paquete completo puede durar más de 1 h.

1. Intro...
Busca “Dreamweaver” en la Wikipedia

1. Introducción DW
• Dreamweaver CS4

•
•

forma parte de Familia
Adobe Creative Suit...
1. Introducción DW

Que tu profe te enseñe a crear
páginas con código HTML con el
Bloc de notas. Podrás verlo en
www.luanc...
1. Introducción DW

Pon en práctica abrir y
cerrar Dreamweaver

Veamos las dos formas básicas de arrancar Dreamweaver:

1....
[Practica abriendo y cerrando los
ejercicios 1 y 2 con Dreamweaver]

1. Introducción DW
• Para abrir un documento :

•

•
...
1. Introducción DW

Pide a tu profe que te
explique la codificación
hexadecimal de los
colores (RGB)

• Vamos a crear una ...
1. Introducción DW
4. Ahora vamos a insertar una imagen : La imagen, ha de estar accesible
para nosotros. Para ello debe e...
1. Introducción DW
8. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el

9.

inspector d...
Comprueba que si el vínculo no comienza
por ”http://...” el enlace no funcionará.

1. Introducción DW
11.Selecciona la seg...
Cuando termines, crea la página web “jupiter.html ” partiendo
de cero con un título, texto variado y coloreado, párrafos c...
2. Entorno de trabajo

CURSO DE DREAMWEAVER CS4

Diapositiva - 13

Monitor: Francisco Sánchez Guisado
2. Entorno de trabajo

• Botones propios de
la aplicación
• Caja de búsquedas
• Barra de la aplicación
(maximizada)
• Conm...
Practica mostrando las vistas de documento y el botón
Utiliza F4 para activar y desactivar todos los paneles.

2. Entorno ...
Practica mostrando y ocultando las barras de herramientas.
Comprime la imagen con el botón derecho / Optimizar

2. Entorno...
Crea la página “planetas-exteriores.html ” practica las 6 opciones
marcadas del Panel Insertar. Crea un vínculo a la pagin...
2. Entorno de trabajo
“ Vista en Vivo ” ofrece una representación “no editable” más realista de la
apariencia que tendrá l...
2. Entorno de trabajo
“ Código en Vivo ”: Esta
vista se emplea
conjuntamente con la Vista en
vivo. Divide la pantalla como...
Utiliza la página creada en el ejercicio anterior para
practicar las opciones marcadas del menú Ayuda

2. Entorno de traba...
Comprueba tú mismo abriendo la página www.elmundo.es
y después en otra ventana www.elmundo.es/index.html

3. Configurar un...
Para empezar a trabajar en un Sitio nuevo, no es
necesario que estén creados antes los directorios

3. Configurar un sitio...
3. Configurar
un sitio

Las características avanzadas del sitio se agrupan en 10 categorías.
Para visualizar las caracterí...
Configura el sitio nuevo “Planetas interiores” siguiendo los siguientes pasos.
Después crea un archivo “index.html” y la i...
Configura el sitio “Planetas interiores”: www.luanconsultores.com
donde podrás “subir” tu web y probarla.

3. Configurar u...
Prueba a cambiar de carpeta un archivo HTML
o JPG de tu sitio Web (con DW cerrado)

3. Configurar un sitio

Panel Archivos...
Prueba a cambiar de carpeta un archivo HTML
o JPG de tu sitio Web (desde DW)

3. Configurar un sitio

… En cambio, si esta...
Muchas propiedades HTML y CSS son
similares. La diferencia es que CSS aplica su
configuración utilizando reglas de estilo,...
3. Configurar un sitio
Categoría Apariencia (CSS):
• Fuente de página: es el tipo de letra que le aplicaremos al texto.
• ...
3. Configurar
un sitio
Categoría Apariencia (HTML):

• Imagen de fondo: permite especificar una imagen de fondo para el do...
3. Configurar un sitio
• Los colores : Para asignar colores es posible desplegar una paleta de colores

como ésta. Al sele...
3. Configurar
un sitio
Categoría Vínculos (CSS):
•
•
•
•
•
•
•

Crea 4 archivos HTML para los 4 planetas
interiores y enlá...
3. Configurar un sitio
Categoría Encabezados:

• Fuente de encabezado: permite establece el tipo de fuente de los

encabez...
Practica todas las posibilidades de HTML en el sitio “Planetas
interiores” y añade una imagen de los 4 planetas interiores...
4. Texto (H1)

Inserta un encabezado y
modifica sus propiedades

1. Abre el sitio llamado “Planetas interiores” en el pane...
4. Texto (HTML)
• Estilo :
•
•

Estos botones permiten establecer si el texto
aparecerá en negrita <strong> o en cursiva <...
4. Texto

Añade la lista con viñetas en “index.html” del
sitio “Planetas interiores” y otra lista numerada
de las capas in...
Define un nuevo estilo en línea
y llámalo “.estilosatelite”.
Prúebalo en “marte.html”.

4. Texto (CSS)

Propiedades CSS (a...
El objetivo de este ejercicio es crear un nuevo sitio Web
completo partiendo de todos los ejercicios anteriores.

4.- Barr...
El objetivo de este ejercicio es crear un menú con la herramienta
“Barra de navegación” (al memos los dos botones de plane...
Crea una barra de navegación en planetas-interiores.html
con submenús para las lunas del los cuatro planetas

4.- Barra de...
Abre sólo mercurio.html y crea un archivo de estilos CSS
y asócialo a todos los archivos del sitio “Sistema Solar”

4. Hoj...
Modifica el estilo de una etiqueta en el archivo de estilos CSS del sitio
“Sistema Solar”. Verifica que funciona en varios...
5. Hiperenlaces
Un hiperenlace, hipervínculo, o vínculo, no es más que
un enlace, que al ser pulsado lleva de una página o...
Crea un enlace a una foto
del Sol en “index.html”
usando una referencia
absoluta a una foto del Sol
en Wikipedia y otra a ...
5.
Hiperenlaces
Destino del enlace:

Lo normal es que los enlaces a
páginas del mismo sitio Web
se abran en la misma
venta...
Crea un enlace a un correo
al final de la página
“index.html”

5. Hiperenlaces
Enlace a correo electrónico:

Es posible es...
5. Hiperenlaces
Enlace a referencias relativas:

Crea un anclaje
con nombre y
úsalo desde la
misma página y
desde otra

1....
6. Imágenes

Abre el PAINT y pulsa “Guardar como”

Transparenci
a
Movimiento

BMP JP
G
No
No

PNG

GIF

Sí

Sí

No

No

Sí...
6. Imágenes

Crea la página “luna.html”
e inserta una foto de la
Luna en cuarto creciente

Insertar una imagen:

Para inse...
6. Rollover

Crea en la página
“luna.html” un
rollover de la Luna

Imagen de sustitución, rollover:

Un rollover, o imagen...
Crea un mapa de planetas en la
imagen de la página index.html

6. Mapas interactivos

Imagen con mapas interactivos

1.Sel...
Crea al principio de “jupiter.html” un menú
de salto con enlaces a sus cuatro lunas

6. Menús de salto

Son menús emergent...
6. Menús de salto
Se puede cambiar alguna propiedad desde el
inspector de propiedades
• Se pueden seleccionar tipo menú o ...
Crea un enlace “Cerrar ventana”

6. Cerrar una ventana
• Si queremos que una ventana se cierre,

seleccionamos el texto o ...
El usuario tiene que tener instalado el
“pug-in” de Flash Player

6. Película Flash

• Películas Flash:

Para insertar una...
DW añadirá archivos en la carpeta Scripts que
habrá que subir a la Web:

6. Película Flash

• A través del inspector de pr...
Coge un objeto Flash de:
http://www.taringa.net/posts/humor/134
e insértalo en la página de
Inicio

6. Película Flash

Pro...
Esto es una marquesina

6. Marquesinas

Marquesinas :

Son texto, imágenes, o una mezcla de ambas, que pueden
desplazarse ...
Inserta la fecha de “Página actualizada:” al
final de la página de Inicio (index.html)

6. Fechas
• DW

permite insertar l...
Inserta varias reglas horizontales en la página
“jupiter.html” para separar sus cuatro lunas

6. Regla horizontal

• Regla...
7. Tablas

Introducción :  

Cuando termines el tema de
Tablas podrás crear la tabla del
ejemplo de abajo. ¿Cuántas filas
...
7. Tablas

Insertar una tabla :

• Menú: Insertar / Tabla:
• Especificar Filas y Columnas
• Especificar Ancho de la tabla,...
7. Tablas
Seleccionar elementos de una tabla:
• Puedes seleccionar una tabla a través del menú Modificar

•

estando el cu...
7. Tablas

Formato de tabla : 

Desde el inspector de propiedades se pueden modificar los valores que se
especificaron al ...
7. Tablas
• Cambiar tamaño de tabla y celdas : El Ancho de

una tabla se define en Píxeles o Porcentaje en los valores de
...
7. Tablas

Crea una tabla en “index.html” con
tablas anidadas dentro de sus celdas
y que muestre las diferentes regiones
d...
7.
Tablas

CURSO DE DREAMWEAVER CS4

Añade una tabla compleja en “index.html” para
explicar las principales característica...
8. Marcos

La mejor forma de aprender a
manejar marcos es creándolos,
así que estate atento a las dos
próximas diapositiva...
8. Marcos

Vamos a aprender a crear marcos
partiendo de “neptuno.html”:
Comienza por crear tres documentos
HTML para sus t...
8. Marcos

Crear marcos (II):

6. Desde las propiedades activa los bordes con un ancho de 4

7. Ajusta la línea de separac...
8. Marcos

Configurar marcos :

Una vez seleccionado un marco a través del panel Marcos,
pueden establecerse sus propiedad...
8. Marcos

Propiedades del conjunto de marcos :

Si seleccionamos todo el conjunto de marcos (la página de marcos), el
ins...
8. Marcos
Contenido del marco : Como ya has visto, el contenido de un
marco puede establecerse a través del campo Origen d...
Crea la página “cotacto.html” y
enlázala desde “index.html”

9. Formularios
Introducción :

Los formularios se utilizan pa...
9. Formularios

Crear formularios :
• Puedes crear formularios en el menú Insertar / Formulario /

•
•
•

Formulario
Una v...
9. Formularios

Elementos de formulario:
• Los elementos de formulario pueden insertarse en una página

•

a través del me...
Crea un formulario estándar en la página “cotacto.html”.

9. Formularios

Validación de formularios :
• Sirve para hacer q...
Necesitarás una cuenta de
Gmail

9. Incrustar Formulario de Google
1. Accede a
Drive.Google.com
2. Archivo / Nuevo /
Formu...
Pon música a la página “tierra.html”. Tienes archivos
MID en
C:Program FilesMicrosoft OfficeCLIPARTPUB60COR

10. Multimedi...
Pon música de fondo a la página “luna.html”

10. Multimedia (sonido)
• En el inspector de propiedades pueden establecerse ...
Puedes descargar vídeos de prueba desde la página:
http://www.humantica.com/servicios_informaticos/curso_dreamweaver.htm

...
Si necesitas un vídeo para poder probarlo, aprende
a descargarlos de YouTube desde la página
www.descargaryoutube.com

10....
11. Capas
Introducción :

• Las capas son unos recuadros que pueden
situarse en cualquier parte de la página y en
los que ...
11. Capas

PA significa
“Posición
Absoluta”

Insertar una capa :
• Pueden insertarse desde: Insertar / Objeto de diseño / ...
11. Capas

Pon una
imagen de
fondo a una
capa PA

Formato de una capa : Se especifica a través de su inspector de
propieda...
Inserta un Mapa de Google en una capa de
posición absoluta PA en “contacta.html”

11. Incrustar Mapa de Google
1. Accede a...
Inserta un vídeo de Youtube en una Etiqueta DIV de tu Web

11. Incrustar Vídeo de YouTube

1. Accede a www.youtube.com
2. ...
Diseñemos una Web basada en una plantilla HTML
gratuita

12. Plantillas

1. www.freewebtemplates.com / Website
Templates /...
Los precios que ves son aproximados y muy variables

12. El coste de crear una
Web

1. Diseñar una Web en tu ordenador:
gr...
Internet está lleno de “recursos gratis para webmaster”

12. Recursos gratis en Internet

• Menús CSS:
–
–

http://www.css...
12. Recursos para
webmasters
• El icono principal de la Web se llamará
“favicon.ico” y lo debes guardar en el directorio r...
Para algunos recursos de Google necesitarás correo de Gmail

12. Recursos para
webmasters

• Imágenes libres: Google / Imá...
12. Atajos de Dreamweaver
• Ctrl+Q
• Ctrl+J
• Ctrl+F2
• Ctrl+F3
• F2
• F4
• F8
• F12

Salir de Dreamweaver
Propiedades de ...
12. Posicionamiento en Google (SEO)
•
•
•
•
•
•
•
•
•

Poner nombres adecuados a las páginas
Rellenar los datos extra de c...
¡Muchas gracias a
todos!

CURSO DE DREAMWEAVER CS4

Diapositiva - 96

Monitor: Francisco Sánchez Guisado
Upcoming SlideShare
Loading in...5
×

Curso de Dreamweaver CS4

3,081

Published on

Curso de Dreamweaver CS4

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,081
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Curso de Dreamweaver CS4"

  1. 1. Curso de Dreamweaver CS4 Febrero de 2014 Monitor: Francisco Sánchez Guisado francisco@humantica.com www.humantica.com
  2. 2. Curso de Dreamweaver CS4 1. Introducción 2. Entorno de trabajo 3. Configurar un sitio 4. Texto 5. Hiperenlaces 6. Imágenes CURSO DE DREAMWEAVER CS4 Diapositiva - 2 7. Tablas 8. [Marcos] 9. Formularios 10.Multimedia 11.Capas 12.Plantillas Monitor: Francisco Sánchez Guisado
  3. 3. Consulta la página de descargas de Dreamweaver. Ojo, la instalación del paquete completo puede durar más de 1 h. 1. Introducción DW Dreamweaver CS4 , de la empresa ADOBE (antes Macromedia), es un programa fácil de usar que permite crear páginas Web profesionales. • Las funciones de edición visual de Dreamweaver CS4 permiten • • • agregar rápidamente diseño y funcionalidad a las páginas Web, sin la necesidad de programar manualmente el código HTML. Se pueden crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc, de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo trabajar con mapas visuales de los sitios Web, actualizando el sitio Web en el servidor sin salir del programa. Puedes descargarte una versión gratuita de DreamWeaver desde: http://www.adobe.com/downloads o la de prueba. CURSO DE DREAMWEAVER CS4 Diapositiva - 3 Monitor: Francisco Sánchez Guisado
  4. 4. Busca “Dreamweaver” en la Wikipedia 1. Introducción DW • Dreamweaver CS4 • • forma parte de Familia Adobe Creative Suite, un conjunto de aplicaciones para la creación de “medios digitales”. La última es CC CS6 está integrado por: CURSO DE DREAMWEAVER CS4 Diapositiva - 4 Monitor: Francisco Sánchez Guisado
  5. 5. 1. Introducción DW Que tu profe te enseñe a crear páginas con código HTML con el Bloc de notas. Podrás verlo en www.luanconsultores.com/hola.html Y aprende a usar F12 • Cualquier editor de texto permite crear páginas Web. Para • • ello sólo es necesario crear los documentos con la extensión HTML o HTM , e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el “Bloc de notas” para hacerlo. Crear páginas Web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página. Además de Dreamweaver, existen otra serie de buenos editores de páginas Web, como pueden ser Microsoft Frontpage, Microsoft Expression Web, Microsoft Publisher, Amaya, Bluefish, NVU, KompoZer o Quanta Plus, algunos de los cuales tienen la ventaja de ser gratuitos. CURSO DE DREAMWEAVER CS4 Diapositiva - 5 Monitor: Francisco Sánchez Guisado
  6. 6. 1. Introducción DW Pon en práctica abrir y cerrar Dreamweaver Veamos las dos formas básicas de arrancar Dreamweaver: 1. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón 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 Design Premium CS4 , seguidamente Adobe Dreamweaver CS4 , hacer clic sobre él. 2. Desde el icono de Dreamweaver del escritorio: Para cerrar Dreamweaver, puedes utilizar cualquiera de las siguientes operaciones: 1. 2. 3. 4. Hacer clic en el botón cerrar de la ventana Pulsar la combinación de teclas ALT+F4 Hacer clic sobre el menú Archivo y elegir la opción Salir Ctrl + Q CURSO DE DREAMWEAVER CS4 Diapositiva - 6 Monitor: Francisco Sánchez Guisado
  7. 7. [Practica abriendo y cerrando los ejercicios 1 y 2 con Dreamweaver] 1. Introducción DW • Para abrir un documento : • • • – Hacer clic en el botón Abrir de la página de inicio de Dreamweaver.  – Hacer clic en el botón Abrir de la barra de herramientas estándar. – Pulsar la combinación de teclas Ctrl+O. – Hacer clic sobre el menú Archivo y elegir la opción Abrir. – Hacer doble clic sobre el archivo en la ventana del sitio. Para abrir un documento nuevo : – Hacer clic en el botón HTML de la página de inicio de Dreamweaver – Hacer clic en el botón Nueva de la barra de herramientas estándar. – Pulsar la combinación de teclas Ctrl+N. – Hacer clic sobre el menú Archivo y elegir la opción Nuevo. Para guardar un documento : – Hacer clic en el botón guardar de la barra de herramientas estándar.  – Pulsar la combinación de teclas Ctrl+S. – Hacer clic sobre el menú Archivo y elegir la opción Guardar. Para guardar todos los documentos : – Hacer clic en el botón guardar todo de la barra de herramientas estándar.  – Hacer clic sobre el menú Archivo y elegir la opción Guardar todo. CURSO DE DREAMWEAVER CS4 Diapositiva - 7 Monitor: Francisco Sánchez Guisado
  8. 8. 1. Introducción DW Pide a tu profe que te explique la codificación hexadecimal de los colores (RGB) • Vamos a crear una página Web sencilla: 1. 2. 3. Empieza por abrir Dreamweaver. Selecciona Crear nuevo / HTML Introduce, en el documento en blanco, el texto que aparece en la imagen 1ª Modifica el título y el color de fondo del documento: • Haz clic sobre el menú Modificar y elegir la opción Propiedades de la página • Entonces se abrirá una ventana como la que aparece en la imagen 2ª • En Título/Codificación, Cambia el Título por "Mi primera página" • En Apariencia(CSS)/Color de Fondo escribe " #CCCCFF “ (color azul claro) • Seguidamente pulsa sobre el botón Aceptar… CURSO DE DREAMWEAVER CS4 Diapositiva - 8 Monitor: Francisco Sánchez Guisado
  9. 9. 1. Introducción DW 4. Ahora vamos a insertar una imagen : La imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro 5. Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer, se abre una ventana con una opción similar a Guardar imagen como... que permite grabar dicha imagen en nuestro disco duro. 6. Guardar la imagen “arbol.gif” en la carpeta ”Ejercicios Dreamweaver” 7. Insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y seleccionarla. CURSO DE DREAMWEAVER CS4 Diapositiva - 9 Monitor: Francisco Sánchez Guisado
  10. 10. 1. Introducción DW 8. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el 9. inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana. Si no te aparece, puedes mostrarlo a través del menú Ventana / Propiedades . Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic sobre el nombre “Propiedades”: Selecciona “HTML”. Selecciona la primera línea. Pon el Formato: "Encabezado 1 “: 10.Selecciona “CSS”. En “Regla de destino” selecciona “Nuevo etilo de línea” y el color por "#009 “ (azul), y selecciona la Fuente: “Arial, Helvetica, sans-serif ”. Centra el texto pulsando el botón “Alinear al centro”: CURSO DE DREAMWEAVER CS4 Diapositiva - 10 Monitor: Francisco Sánchez Guisado
  11. 11. Comprueba que si el vínculo no comienza por ”http://...” el enlace no funcionará. 1. Introducción DW 11.Selecciona la segunda línea de texto, selecciona <Nuevo estilo en línea>. Pulsa sobre los botones para ponerla en negrita y cursiva 12.Selecciona la imagen, pulsa el botón “P” para seleccionar el párrafo que la contiene, <Nuevo estilo en línea> y después pulsa el botón de centrar 13.Selecciona de nuevo la última línea, y en Vínculo (HTML) introduce la URL "http://www.elpais.es", para crear un enlace a esa otra página: CURSO DE DREAMWEAVER CS4 Diapositiva - 11 Monitor: Francisco Sánchez Guisado
  12. 12. Cuando termines, crea la página web “jupiter.html ” partiendo de cero con un título, texto variado y coloreado, párrafos con formato, imágenes y vínculos a varias páginas web. 1. Introducción DW 14. Guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo , desde la opción Guardar en la misma carpeta “Ejercicios Dreamweaver” de la imagen 15. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html. Por ejemplo, puedes llamarlo "ejercicio3.html ” 16. Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12 17. Prueba a Cerrar DW y abrir la página desde el Explorador de Windows CURSO DE DREAMWEAVER CS4 Diapositiva - 12 Monitor: Francisco Sánchez Guisado
  13. 13. 2. Entorno de trabajo CURSO DE DREAMWEAVER CS4 Diapositiva - 13 Monitor: Francisco Sánchez Guisado
  14. 14. 2. Entorno de trabajo • Botones propios de la aplicación • Caja de búsquedas • Barra de la aplicación (maximizada) • Conmutador de espacio de trabajo • Barra de menús • Barra de herramientas estándar • Barra de herramientas de documento • Paneles • Pestañas de documento • Barra de estado • Ficha o inspector de Propiedades CURSO DE DREAMWEAVER CS4 Diapositiva - 14 Monitor: Francisco Sánchez Guisado
  15. 15. Practica mostrando las vistas de documento y el botón Utiliza F4 para activar y desactivar todos los paneles. 2. Entorno de trabajo Puedes cambiar la vista del documento a través de la barra de herramientas de documento : – La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente. – 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. – La vista Dividir (Código y Diseño) permite dividir la ventana en dos zonas. La zona superior muestra el código 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 15 Monitor: Francisco Sánchez Guisado
  16. 16. Practica mostrando y ocultando las barras de herramientas. Comprime la imagen con el botón derecho / Optimizar 2. Entorno de trabajo • La barra de estado nos da información sobre los elementos del documento. A la izquierda el selector de etiquetas HTML, que nos permite seleccionar etiquetas. A la derecha las herramientas de selección y otros: • En el menú Ver / Barras de Herramientas podemos seleccionar las barras que nos interesa mostrar: 1. La barra de herramientas estándar 2. La barra de herramientas de documento 3. La barra de representación de estilos (poco usada) CURSO DE DREAMWEAVER CS4 Diapositiva - 16 Monitor: Francisco Sánchez Guisado
  17. 17. Crea la página “planetas-exteriores.html ” practica las 6 opciones marcadas del Panel Insertar. Crea un vínculo a la pagina “jupiter.html ” 2. Entorno de trabajo Panel Insertar Inspector de Propiedades • DW utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores . • La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. • El panel nos da acceso a opciones generales. • 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. • F4 = Mostrar u ocultar paneles e inspectores Añade a “jupiter.html” el botón “Regresar” (encuéntralo con ayuda de Google) CURSO DE DREAMWEAVER CS4 Diapositiva - 17 Monitor: Francisco Sánchez Guisado
  18. 18. 2. Entorno de trabajo “ Vista en Vivo ” ofrece una representación “no editable” más realista de la apariencia que tendrá la página en un navegador. La Vista en vivo no sustituye al comando “Vista previa en el navegador”, sino que proporciona otra forma de ver la página “en vivo” sin tener que abandonar el espacio de trabajo de Dreamweaver. donde además podrás realizar estas acciones: – Congelar JavaScript – Desactivar JavaScript – Desactivar Plug-ins – Utilizar servidor de prueba para origen de documentos – Utilizar archivos locales para vínculos de documentos CURSO DE DREAMWEAVER CS4 Diapositiva - 18 Monitor: Francisco Sánchez Guisado
  19. 19. 2. Entorno de trabajo “ 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. Es muy útil para saber qué código corresponde a qué parte de la web. CURSO DE DREAMWEAVER CS4 Diapositiva - 19 Monitor: Francisco Sánchez Guisado
  20. 20. Utiliza la página creada en el ejercicio anterior para practicar las opciones marcadas del menú Ayuda 2. Entorno de trabajo La AYUDA de DREAMWEAVER: A través del menú Ayuda puedes ir a varias opciones: • Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido. • Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML seleccionada. • Acceder a Dreamweaver Support Center en la web. • Acceder al Foros en línea de Adobe. CURSO DE DREAMWEAVER CS4 Diapositiva - 20 Caja de búsqueda Monitor: Francisco Sánchez Guisado
  21. 21. Comprueba tú mismo abriendo la página www.elmundo.es y después en otra ventana www.elmundo.es/index.html 3. Configurar un sitio • 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, las hojas de estilo CSS, 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 el sitio local. Después se podrán copiar los archivos en un servidor Web, llamado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. Se utiliza FTP para cargar el sitio local en el servidor (sitio remoto). La página inicial del sitio debe tener el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a la Web. Por ejemplo, si escribiéramos la dirección genérica http://www.misitio.com en el navegador, éste intentaría cargar la página http://www.misitio.com/index.html, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.html. CURSO DE DREAMWEAVER CS4 Diapositiva - 21 Monitor: Francisco Sánchez Guisado
  22. 22. Para empezar a trabajar en un Sitio nuevo, no es necesario que estén creados antes los directorios 3. Configurar un sitio Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en DW. Para ello hay que dirigirse al menú Sitio , a la opción Administrar sitios... . Recuerda que a través del panel Archivos , pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio. En el caso de haber seleccionado la opción 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 opción Nuevo , como si se elige la opción Editar , se mostrará la misma ventana en la que definir las características del sitio. CURSO DE DREAMWEAVER CS4 Diapositiva - 22 Monitor: Francisco Sánchez Guisado
  23. 23. 3. Configurar un sitio Las características avanzadas del sitio se agrupan en 10 categorías. Para visualizar las características de una Categoría basta con seleccionarla: • Datos locales : – – – – Nombre del sitio : Nombre para la lista de sitios de Dreamweaver Carpeta raíz local: Dónde están los archivos HTML Carpeta predeterminada de imágenes : Dónde están las imágenes Usar vínculos de distinción entre mayúsculas y minúsculas: Activarlo • Recuerda que tienes la opción para crear el nuevo sitio, la pestaña “ Básicas” • Una vez rellenos estos datos podemos “Aceptar” y abrimos el sitio: – Vamos al menú Sitios / Administrar sitios – Seleccionar el sitio de la lista de sitios – Pulsar sobre el botón “Listo” – También podemos utilizar el panel Archivos y buscar y seleccionar el sitio en el menú desplegable de la pestaña Archivos: CURSO DE DREAMWEAVER CS4 Diapositiva - 23 Monitor: Francisco Sánchez Guisado
  24. 24. Configura el sitio nuevo “Planetas interiores” siguiendo los siguientes pasos. Después crea un archivo “index.html” y la imagen “imagenes/sol.jpg” 3. Configurar un sitio (sin Internet) 1. Crea una carpeta en tu ordenador llamada “Ejercicios Dreamweaver”. 2. Crea en ella otra carpeta llamada “planetas-interiores” para albergar tu web. 3. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 4. Haz clic sobre el menú Sitio. 5. Elige la opción Administrar sitios. Se abrirá una nueva ventana. 6. Selecciona el botón Nuevo..., y la opción Sitio. Se abrirá una ventana. 7. Selecciona la pestaña Avanzadas de la nueva ventana. 8. Selecciona Datos locales en Categoría. 9. En Nombre del sitio escribe “Planetas interiores”. 10. En Carpeta raíz local busca la carpeta “planetas-interiores” anterior. 11. Selecciónala. Puedes hacerlo a través del botón con forma de carpeta. 12. En Carpeta predeterminada de imágenes busca y selecciona la carpeta “planetas-interiores/imagenes” (créala si no existe). 13. Activa la casilla “Verificación de vínculos con distinción de mayúsculas” 14. Haz clic sobre el botón Aceptar y sobre el botón Listo. CURSO DE DREAMWEAVER CS4 Diapositiva - 24 Monitor: Francisco Sánchez Guisado
  25. 25. Configura el sitio “Planetas interiores”: www.luanconsultores.com donde podrás “subir” tu web y probarla. 3. Configurar un sitio (con FTP) 1. 2. 3. 4. Servidor FTP: ftp.luanconsultores.com Directorio del servidor: Usuario: Contraseña: /httpdocs usuario2 123456 CURSO DE DREAMWEAVER CS4 Diapositiva - 25 Monitor: Francisco Sánchez Guisado
  26. 26. Prueba a cambiar de carpeta un archivo HTML o JPG de tu sitio Web (con DW cerrado) 3. Configurar un sitio Panel Archivos : El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8. 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. Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor prueba o la Base de datos del sitio. En esta imagen se visualizan el panel Archivos y parte de una página Web: Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de DW, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc. CURSO DE DREAMWEAVER CS4 Diapositiva - 26 Monitor: Francisco Sánchez Guisado
  27. 27. Prueba a cambiar de carpeta un archivo HTML o JPG de tu sitio Web (desde DW) 3. Configurar un sitio … En cambio, si estas modificaciones se hacen desde dentro de DW, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas. En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a esta, 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 . CURSO DE DREAMWEAVER CS4 Diapositiva - 27 Monitor: Francisco Sánchez Guisado
  28. 28. Muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica su 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, se desaconseja su uso. 3. Configurar un sitio • 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 de Propiedades de la página. Se puede abrir esta ventana 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. – 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: CURSO DE DREAMWEAVER CS4 Diapositiva - 28 Monitor: Francisco Sánchez Guisado
  29. 29. 3. Configurar un sitio Categoría Apariencia (CSS): • 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”. Añade un “fondo estrellado” a tu sitio (fondo.jpg) 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 29 Monitor: Francisco Sánchez Guisado
  30. 30. 3. Configurar un sitio Categoría Apariencia (HTML): • 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 (es de locos).  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. Pon una imagen de fondo en HTML y otra Texto: es el color de la fuente. Vínculos: es el color que mostrará el texto de los vínculos. en CSS ¿Quién gana? 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 30 Monitor: Francisco Sánchez Guisado
  31. 31. 3. Configurar un sitio • 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 DW utilizan la paleta de 216 colores seguros para Web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en otros navegadores. También es posible personalizar los colores 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 tienes más arriba. 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 #3399FF (#39F), el botón quedaría del siguiente modo: CURSO DE DREAMWEAVER CS4 Diapositiva - 31 Monitor: Francisco Sánchez Guisado
  32. 32. 3. Configurar un sitio Categoría Vínculos (CSS): • • • • • • • Crea 4 archivos HTML para los 4 planetas interiores y enlázalos desde “index.html” 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 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 (mientras se pulsa). 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 32 Monitor: Francisco Sánchez Guisado
  33. 33. 3. Configurar un sitio Categoría Encabezados: • Fuente de encabezado: permite establece el tipo de fuente de los encabezados. El resto propiedades hacen referencia al estilo cursiva o negrita, tamaño y color que queremos aplicar a cada tipo de encabezado. Categoría Título/Codificación: • 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 DW. Imagen de rastreo: permite establecer una imagen como fondo del • documento, pero que sólo se mostrará en la ventana de documento de DW, 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 33 Monitor: Francisco Sánchez Guisado
  34. 34. Practica todas las posibilidades de HTML en el sitio “Planetas interiores” y añade una imagen de los 4 planetas interiores 4. Texto (HTML) 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 estilos creados por nosotros mismos, no predefinidos. Estos estilos se guardarán en la propia página HTML (compruébalo). • Características del texto : Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Veremos las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías, HTML y CSS: • Formato : Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, incluidos los espacios entre palabras. El texto normal, debería ir siempre en párrafos. Diapositiva - 34 CURSO DE DREAMWEAVER CS4 Monitor: Francisco Sánchez Guisado
  35. 35. 4. Texto (H1) Inserta un encabezado y modifica sus propiedades 1. Abre el sitio llamado “Planetas interiores” en el panel Archivos (F8). 2. Haz doble clic sobre el documento “index.html”, que aparece en los 3. 4. 5. 6. 7. 8. 9. archivos desplegados en el panel de Archivos. Se abrirá el documento. Sitúa el punto de inserción después de la última letra de la última línea. Escribe el texto “Quiénes somos” y pulsa la tecla Intro para saltar de línea. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades (Ctrl+F3). Selecciona en el texto “Quiénes somos”. En HTML / Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora el texto es de mayor tamaño. En la barra de herramientas de documento, haz clic sobre la caja de texto Título, y escribe Quiénes somos. Haz clic sobre el botón Guardar de la barra de herramientas. CURSO DE DREAMWEAVER CS4 Diapositiva - 35 Monitor: Francisco Sánchez Guisado
  36. 36. 4. Texto (HTML) • Estilo : • • Estos botones permiten establecer si el texto aparecerá en negrita <strong> o en cursiva <em>. A través del menú Formato / Estilo también se puede, entre otras cosas, subrayar el texto. Sangría : Estos dos botones permiten sangrar el texto y anular la sangría <blockquote>. Lista : Estos botones permiten crear listas con viñetas sin numerar <ul> o listas numeradas <ol> CURSO DE DREAMWEAVER CS4 Diapositiva - 36 Monitor: Francisco Sánchez Guisado
  37. 37. 4. Texto Añade la lista con viñetas en “index.html” del sitio “Planetas interiores” y otra lista numerada de las capas internas la Tierra en “tierra.html” • Listas : …a su vez, la lista puede ser numerada o con • viñetas. Para que un texto del documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre el tipo de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto. La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista numerada (ordenada) se Lista con viñetas selecciona a través del botón . (desordenada): Lista numerada (ordenada): 1. 2. • Mercurio • Venus • Tierra Corteza Manto 1. 2. 3. Manto superior Manto inferior – Luna • Marte Núcleo 1. – Fobos Núcleo externo Núcleo interno CURSO DE 2. DREAMWEAVER CS4 Diapositiva - 37 – Sánchez Monitor: FranciscoDeimos Guisado
  38. 38. Define un nuevo estilo en línea y llámalo “.estilosatelite”. Prúebalo en “marte.html”. 4. Texto (CSS) Propiedades CSS (accediendo a las propiedades CSS): • Los estilos en línea CSS, se utilizan para combinar atributos del texto de una página HTML, como el color o el tamaño, de modo que no sea necesario asignar estos atributos cada vez que se desee repetir la asignación de estos valores a otros elementos. • Los estilos CSS cuentan con capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los elementos que usan ese estilo se actualiza automáticamente. • Regla de estilo: Podemos definirlas, eliminarlas o aplicarlas. • Editar regla: Creación o modificación de estilos CSS. • Panel CSS: Abre el panel si no estuviera abierto. Diapositiva - 38 CURSO DE DREAMWEAVER CS4 • Fuente, estilo, alineación, tamaño y color ya imaginamos su Monitor: Francisco Sánchez Guisado
  39. 39. El objetivo de este ejercicio es crear un nuevo sitio Web completo partiendo de todos los ejercicios anteriores. 4.- Barra de navegación (sencilla) 1. Cierra DW y crea una carpeta llamada “Sistema Solar” y 2. 3. 4. 5. dentro del ella, crea otra carpeta llamada “imagenes” Copia en ella todas las páginas html de “planetas-interiores” y “planetas-exteriores” y todas las imágenes a “imagenes”: Abre DW y crea el nuevo sitio “Sistema Solar” Renombra “index.html” como “planetas-interiores.html” Crea un nuevo “index.html” 6. Crea las páginas html que faltan y CURSO DE DREAMWEAVER CS4 Diapositiva - 39 enlázalas con hipervínculos Monitor: Francisco Sánchez Guisado
  40. 40. El objetivo de este ejercicio es crear un menú con la herramienta “Barra de navegación” (al memos los dos botones de planetas) 4.- Barra de navegación (sencilla) 7. Crea con Publisher los botones de menú horizontal en la 8. carpeta “imagenes” en dos versiones de diferentes colores index.html: Insertar/ Objetos de imagen / Barra de navegación Obligatorios Planetas Interiores Planetas Interiores Asteroides Asteroides Planetas Exteriores Planetas Exteriores Cinturón de Kuiper Cinturón de Kuiper 9. Puedes editarlaCS4 Diapositiva - 40/ Barra de navegación Guisado desde: Modificar CURSO DE DREAMWEAVER Monitor: Francisco Sánchez
  41. 41. Crea una barra de navegación en planetas-interiores.html con submenús para las lunas del los cuatro planetas 4.- Barra de navegación (submenús) 1. Insertar / Spry / Barra de menús Spry 2. CURSO DE DREAMWEAVER CS4 Diapositiva - 41 Monitor: Francisco Sánchez Guisado
  42. 42. Abre sólo mercurio.html y crea un archivo de estilos CSS y asócialo a todos los archivos del sitio “Sistema Solar” 4. Hoja de estilo CSS Definir un nuevo estilo en una hoja de estilo CSS : 1. Seleccionamos un texto cualquiera, por ejemplo un nombre 2. Seleccionaremos “CSS” del inspector de propiedades 3. Seleccionamos <Nueva regla CSS> y el botón “Editar regla” 4. Le damos un nombre al selector: (p.ej. “.clase-nombre”) 5. Definimos la regla: “Nuevo archivo de hoja de estilos” y botón “Aceptar” 6. Damos un nombre al archivo CSS: “mi-hoja-de-estilos.css” y “Guardar” 7. Definimos la nueva regla rellenando las 8 categorías a discreción 8. A partir de ahora podremos aplicar el estilo “clase-nombre” a cualquier documanto HTML de nuestro sitio Web, siempre y cuando tengan asociado el archivo CSS “mi-hoja-de-estilos.css” gracias a este código: 9. Para asociar este archivo CSS a un documento HTML desde el menú: Formato / Estilos CSS / Adjuntar hoja de estilos o desde el inspector de propiedades HTML / Clase / Adjuntar hoja de estilos CURSO DE DREAMWEAVER CS4 Diapositiva - 42 Monitor: Francisco Sánchez Guisado
  43. 43. Modifica el estilo de una etiqueta en el archivo de estilos CSS del sitio “Sistema Solar”. Verifica que funciona en varios archivos a la vez 4. Redefinir estilo etiqueta Formato / Estilos CSS / Adjuntar hoja de estilos 1. Abre el sitio “Sistema Solar” y el documento “tierra.html” y asegúrate de que tiene asociada la hoja de estilos “mi-hoja-de-estilos.css” 2. Haz clic sobre cualquier texto que tenga la etiqueta <h2>, sin seleccionar 3. En el Inspector de propiedades CSS, selecciona la regla <Nueva regla CSS> 4. Pulsa el botón “Editar regla” y modifícala 5. Edita la etiqueta <h2> modificando estos valores: 6. A partir de ahora, cualquier etiqueta <h2> de nuestro Sitio Web que tenga asociada esta misma hoja de estilos CSS será influida por el estilo de la etiqueta <h2> allá donde se utilice 7. Estudia el contenido del archivo CSS CURSO DE DREAMWEAVER CS4 Diapositiva - 43 Monitor: Francisco Sánchez Guisado
  44. 44. 5. Hiperenlaces Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen. • Tipos de enlaces:   Existen cuatro diferentes clases de rutas de acceso a la hora de definir los vínculos : – – – – Referencia absoluta: "http://www.google.com". Referencia relativa al sitio: “../documentos/principal.htm” *Referencia relativa al documento: “#nombre_de_marca” Puntos de fijación:“nombre_documento#nombre_de_marca” CURSO DE DREAMWEAVER CS4 Diapositiva - 44 Monitor: Francisco Sánchez Guisado
  45. 45. Crea un enlace a una foto del Sol en “index.html” usando una referencia absoluta a una foto del Sol en Wikipedia y otra a un archivo PDF para descargarlo un enlace es a través 5. Hiperenlaces Crear enlaces: La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector. Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP:// Otra forma de crear un enlace es a través del menú CURSO DE DREAMWEAVER CS4 Hipervínculo. Monitor: Francisco Sánchez Guisado Insertar, opción Diapositiva - 45
  46. 46. 5. Hiperenlaces Destino del enlace: Lo normal es que los enlaces a páginas del mismo sitio Web se abran en la misma ventana y las páginas externas al sitio se abran en ventanas nuevas El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a través de Destino, o en la ventana que aparece a través del menú Insertar / Hipervínculo: – _blank : Abre el documento en una ventana nueva – _parent : Abre el documento en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre – _self : Es la opción predeterminada. Abre el documento en el mismo marco o misma ventana que el vínculo – _top : Abre el documento en la ventana completa del navegador, robando el espacio a los otros marcos. CURSO DE DREAMWEAVER CS4 Diapositiva - 46 Monitor: Francisco Sánchez Guisado
  47. 47. Crea un enlace a un correo al final de la página “index.html” 5. Hiperenlaces Enlace a correo electrónico: Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la Web puedan contactar con nosotros. La sintaxis del vínculo en este caso es mailto:francisco@hotmail.com Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. También es posible a través del menú Insertar, opción Vínculo de correo electrónico. En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo: No es buena idea exponer el correo en la web, usa una imagen CURSO DE DREAMWEAVER CS4 Diapositiva - 47 Monitor: Francisco Sánchez Guisado
  48. 48. 5. Hiperenlaces Enlace a referencias relativas: Crea un anclaje con nombre y úsalo desde la misma página y desde otra 1.Escribe al final del documento “luna.html” un línea llamada “Luna llena” y pon debajo una foto enorme 2.Sitúa el cursor a la izquierda de “Luna llena” 3.Inserta / Anclaje con nombre y llámalo “luna_llena” 4.Inserta en la primera línea del documento la frase “Ver luna llena” 5.Crea un enlace relativo a “luna_llena” escribiendo en el vínculo “#luna-llena” o “luna.html#luna-llena” si lo haces desde otro documento: (Menú: Insertar/Hipervínculo) CURSO DE DREAMWEAVER CS4 Diapositiva - 48 Monitor: Francisco Sánchez Guisado
  49. 49. 6. Imágenes Abre el PAINT y pulsa “Guardar como” Transparenci a Movimiento BMP JP G No No PNG GIF Sí Sí No No Sí No • Veremos cómo crear algunas imágenes especiales, como los Compresión No Sí Sí Sí • Rollovers y los botones flash. Formatos de imagen: Las imágenes pueden ser de muchos formatos diferentes: bmp, png, gif, jpg, etc. Pero no todos estos formatos son adecuados para una Web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son: – Formato GIF : Máximo de 256 colores, son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos (colores planos). Permiten transparencias y animación. – Formato JPG : Las imágenes son de mayor calidad que las GIF al poder contener millones de colores, pero el tamaño de la imagen es mayor. Gran capacidad de compresión. CURSO DE DREAMWEAVER CS4 Diapositiva - 49 Monitor: Francisco Sánchez Guisado
  50. 50. 6. Imágenes Crea la página “luna.html” e inserta una foto de la Luna en cuarto creciente Insertar una imagen: Para insertar una imagen hay que dirigirse al menú Insertar / Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana: Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos. CURSO DE DREAMWEAVER CS4 Diapositiva - 50 Monitor: Francisco Sánchez Guisado
  51. 51. 6. Rollover Crea en la página “luna.html” un rollover de la Luna Imagen de sustitución, rollover: Un rollover, o imagen del sustitución, es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Aquí tienes un ejemplo de rollover. Si se pasa el puntero sobre el botón intercambia la imagen por otra: • Insertar / Objetos de Imagen / Imagen de sustitución: Obligatorios CURSO DE DREAMWEAVER CS4 Diapositiva - 51 Monitor: Francisco Sánchez Guisado
  52. 52. Crea un mapa de planetas en la imagen de la página index.html 6. Mapas interactivos Imagen con mapas interactivos 1.Selecciona la imagen donde vamos a crear el mapa 2.Selecciona “Zona interactiva circular” 3.Pincha y arrastra dentro de la imagen para crear la zona del hipervínculo 4.En “Destino” por la página enlazada 5.Añade más zonas interactivas: – Rectangulares – Circulares – Polígonos irregulares (Esc) CURSO DE DREAMWEAVER CS4 Diapositiva - 52 Monitor: Francisco Sánchez Guisado
  53. 53. Crea al principio de “jupiter.html” un menú de salto con enlaces a sus cuatro lunas 6. Menús de salto Son menús emergentes que cuyas opciones son vínculos a otras páginas o a otras Webs: • Insertar / Formularios / Menú de salto Y se abrirá esta ventana: Menú Lista 2 CURSO DE DREAMWEAVER CS4 Diapositiva - 53 x Monitor: Francisco Sánchez Guisado
  54. 54. 6. Menús de salto Se puede cambiar alguna propiedad desde el inspector de propiedades • Se pueden seleccionar tipo menú o tipo lista • El nombre (por si tengo varios por página) • Se pueden elegir varios elementos de la lista, pero no te Diapositiva - 54 recomiendo activarlo Sánchez Guisado Monitor: Francisco CURSO DE DREAMWEAVER CS4
  55. 55. Crea un enlace “Cerrar ventana” 6. Cerrar una ventana • Si queremos que una ventana se cierre, seleccionamos el texto o imagen y escribiremos en el cuadro de texto de vínculo: javascript:window.close(); CURSO DE DREAMWEAVER CS4 Diapositiva - 55 Monitor: Francisco Sánchez Guisado
  56. 56. El usuario tiene que tener instalado el “pug-in” de Flash Player 6. Película Flash • Películas Flash: Para insertar una película Flash hay que dirigirse al menú Insertar / Media / SWF. Suelen ser banners publicitarios o botones. Es preferible guardar los objetos Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar imágenes, de no ser así pueden suceder errores. CURSO DE DREAMWEAVER CS4 Diapositiva - 56 Monitor: Francisco Sánchez Guisado
  57. 57. DW añadirá archivos en la carpeta Scripts que habrá que subir a la Web: 6. Película Flash • A través del inspector de propiedades del objeto Flash es posible editar sus atributos: • Desde la opción “Vista en vivo” de DW puedes comprobar el funcionamiento del objeto Flash, sin la necesidad de tener que abrir la página con algún navegador. También tienes el botón “Reproducir” CURSO DE DREAMWEAVERinstalado “Adobe Flash Player” Sánchez Guisado Monitor: Francisco Debes tener CS4 Diapositiva - 57
  58. 58. Coge un objeto Flash de: http://www.taringa.net/posts/humor/134 e insértalo en la página de Inicio 6. Película Flash Propiedades del objeto Flash : • Editar : Para hacer cambios sobre el archivo original (.fla) • Bucle : Al finalizar volverá a comenzar desde el principio • Rep. autom. : Nada más cargarse la página se reproducirá • Calidad : Cuanto más baja, antes se cargará y peor se verá • Escala: Permite elegir cuanto se verá del archivo: • Predeterminada: se verá toda la película • Ajuste exacto: se verán sólo los objetos, sin el fondo • Alinear : Permite alinear la película en relación con el texto • Wmode : Es el modo de ventana: • Opaco: Otros elementos pueden aparecer sobre el Flash • Transparente: El fondo se verá transparente CURSO DE DREAMWEAVER CS4 Diapositiva - 58 Monitor: Francisco Sánchez Guisado
  59. 59. Esto es una marquesina 6. Marquesinas Marquesinas : Son texto, imágenes, o una mezcla de ambas, que pueden desplazarse de un lado a otro de la ventana horizontalmente • Se insertan a través de código HTML con las etiquetas <MARQUEE> y </MARQUEE>, puedes hacer un cambio: •<marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez •<marquee behavior="alternate">, la marquesina rebotará en los extremos, como en este ejemplo: <marquee behavior="alternate"> Esto es una marquesina <img src="imagenes/logo_animales.gif"> </marquee> CURSO DE DREAMWEAVER CS4 Diapositiva - 59 Monitor: Francisco Sánchez Guisado
  60. 60. Inserta la fecha de “Página actualizada:” al final de la página de Inicio (index.html) 6. Fechas • DW permite insertar la fecha de última modificación de las páginas. Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Para insertar la fecha hay que dirigirse al menú Insertar / Fecha. En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo. CURSO DE DREAMWEAVER CS4 Diapositiva - 60 Monitor: Francisco Sánchez Guisado
  61. 61. Inserta varias reglas horizontales en la página “jupiter.html” para separar sus cuatro lunas 6. Regla horizontal • Regla horizontal :  El elemento que se usa para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla hay que dirigirse al menú Insertar / HTML / Regla horizontal. El inspector de propiedades para las reglas es el siguiente: A través de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuación tienes cuatro ejemplos de reglas horizontales: CURSO DE DREAMWEAVER CS4 Diapositiva - 61 Monitor: Francisco Sánchez Guisado
  62. 62. 7. Tablas Introducción :   Cuando termines el tema de Tablas podrás crear la tabla del ejemplo de abajo. ¿Cuántas filas y columnas tiene? • Gracias a las tablas es posible distribuir el texto en • • columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar. Muchas páginas Web se basan en tablas. Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas, por ejemplo: CURSO DE DREAMWEAVER CS4 Diapositiva - 62 Monitor: Francisco Sánchez Guisado
  63. 63. 7. Tablas Insertar una tabla : • Menú: Insertar / Tabla: • Especificar Filas y Columnas • Especificar Ancho de la tabla, se define en Píxeles o porcentaje • Grosor del Borde: Grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1) • Relleno de celda: Distancia entre el contenido de las celdas y los bordes de éstas • Espacio entre celdas: Distancia entre las celdas • Se puede establecer si se quiere un encabezado • Texto: Si queremos incluir un título (fuera de la tabla) • Resumen: Descripción (no aparecerá en el navegador) CURSO DE DREAMWEAVER CS4 Diapositiva - 63 Monitor: Francisco Sánchez Guisado
  64. 64. 7. Tablas Seleccionar elementos de una tabla: • Puedes seleccionar una tabla a través del menú Modificar • estando el cursor en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla / Seleccionar tabla. También es posible seleccionar una tabla pulsando con el ratón sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento. CURSO DE DREAMWEAVER CS4 Diapositiva - 64 Monitor: Francisco Sánchez Guisado
  65. 65. 7. Tablas Formato de tabla :  Desde el inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. También pueden indicarse otros como: • Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha) • Color de fondo o de borde de la tabla • Imagen de fondo Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores: CURSO DE DREAMWEAVER CS4 Diapositiva - 65 Monitor: Francisco Sánchez Guisado
  66. 66. 7. Tablas • Cambiar tamaño de tabla y celdas : El Ancho de una tabla se define en Píxeles o Porcentaje en los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura. En valor An y Al de las celdas siempre en Píxeles. También es posible establecer el tamaño de las celdas manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada. • Insertar una fila o una columna : Pulsar en Insertar fila o Insertar columna (previa selección de celda, fila o columna). También tenemos otra opción, Insertar filas o columnas. • Eliminar una fila o una columna : Posicionar el cursor en la fila o columna a eliminar y elegir 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). Diapositiva - 66 CURSO DE DREAMWEAVER CS4 Monitor: Francisco Sánchez Guisado
  67. 67. 7. Tablas Crea una tabla en “index.html” con tablas anidadas dentro de sus celdas y que muestre las diferentes regiones del Sistema Solar con los objetos más grandes de cada región. • Anidar tablas : Es posible insertar tablas dentro de las celdas de otras tablas como en el ejemplo: Para anidar tablas sólo tienes que posicionar el cursor en la celda deseada e insertar una tabla. • 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. Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades. • Dividir celdas consiste en partir en dos una celda. Una de las formas de dividir es a través del inspector de propiedades. 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 67 Monitor: Francisco Sánchez Guisado
  68. 68. 7. Tablas CURSO DE DREAMWEAVER CS4 Añade una tabla compleja en “index.html” para explicar las principales características de los planetas del sistema solar (Usa Wikipedia) Diapositiva - 68 Monitor: Francisco Sánchez Guisado
  69. 69. 8. Marcos La mejor forma de aprender a manejar marcos es creándolos, así que estate atento a las dos próximas diapositivas Introducción : • Los marcos o frames sirven para distribuir mejor 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. Mejoran la funcionalidad y la apariencia. Cada uno de los marcos contiene un documento HTML individual. 1 Ejemplo de página con dos marcos (1.htm): • El marco izquierdo contiene 2.htm • Y el derecho el documento 3.htm 2 3 • Con DW puedes editar los documentos contenidos en los • • marcos desde la página que contiene el grupo de marcos. Trabajar con marcos puede resultar una tarea algo complicada. Si piensas colgar tu página en internet para uso público, no te recomendamos su uso, pero sí si la página es de uso privado. CURSO DE DREAMWEAVER CS4 Diapositiva - 69 Monitor: Francisco Sánchez Guisado
  70. 70. 8. Marcos Vamos a aprender a crear marcos partiendo de “neptuno.html”: Comienza por crear tres documentos HTML para sus tres lunas mayores Crear marcos (I): 1. Insertar / HTML / Marcos / Izquierda* 2. Aparece una línea que divide el documento en dos 3. Obtendremos dos documentos nuevos: el de la izquierda (neptuno_menu.html) y el que contiene el grupo de marcos (neptuno_marcos.html). 4. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame) neptuno.html. 5. 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. CURSO DE DREAMWEAVER CS4 Diapositiva - 70 Monitor: Francisco Sánchez Guisado
  71. 71. 8. Marcos Crear marcos (II): 6. Desde las propiedades activa los bordes con un ancho de 4 7. Ajusta la línea de separación de marcos (140) 8. Crea en el marco izquierdo tres enlaces a las tres lunas: Tritón, Proteo y Nereida (Destino: _mainFrame) 9. Archivo / Guardar todo: al primer documento llámalo “neptuno_marcos.html” y al segundo “neptuno_menu.html” • * Nota: Si en lugar de insertar un marco a la Izquierda lo insertáramos a la Derecha, el marco vacío aparecerá a la derecha del documento original. • El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de CURSO DE DREAMWEAVER CS4 Diapositiva - 71 Monitor: Francisco Sánchez Guisado
  72. 72. 8. Marcos Configurar marcos : Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades en el inspector de propiedades. • Nombre del marco : El nombre no puede contener espacios blancos. • Origen : El nombre del documento HTML contenido en el marco. • Bordes: Aparecerá una línea separando el marco del resto de marcos. En este caso se puede especificar un color para éste con Color borde . • Es posible establecer un grosor del borde a través de Ancho . • Desplaz . indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente. • Mismo tamaño: Los usuarios no podrán variar las medidas. • Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus bordes izquierdo-derecho CURSO DE DREAMWEAVER CS4 Diapositiva - 72 Monitor: Francisco Sánchez Guisado
  73. 73. 8. Marcos Propiedades del conjunto de marcos : Si seleccionamos todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente: • Bordes: puede elegirse si aparecerá una línea separando los marcos entre sí y puede especificarse un color para este en Color del borde . • También es posible establecer un grosor para el borde a través de Ancho . • Columna (o Fila ), dependiendo del marco elegido en Selección Fila Col, especifica el tamaño del marco en Píxeles , Porcentaje o Relativo . • 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 navegante. CURSO DE DREAMWEAVER CS4 Diapositiva - 73 Monitor: Francisco Sánchez Guisado
  74. 74. 8. Marcos Contenido del marco : Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades: A través del campo Origen sólo es posible especificar el documento que se cargará inicialmente en el marco. Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser: •_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. •_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 CS4 Diapositiva - desaparecerán al abrir el vínculo en ella. CURSO DE DREAMWEAVERmarcos de la ventana 74 Monitor: Francisco Sánchez Guisado
  75. 75. Crea la página “cotacto.html” y enlázala desde “index.html” 9. Formularios Introducción : Los formularios se utilizan para recoger datos de los usuarios, para realizar un pedido en una tienda virtual, crear encuestas, conocer las opiniones, recibir preguntas… • Una vez el usuario rellena los datos y pulsa el botón para “enviar” se enviarán los datos al el elemento “Acción” del formulario. • Veremos 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: VBScript, JavaScript, Perl, PHP, CGI … CURSO DE DREAMWEAVER CS4 Diapositiva - 75 Monitor: Francisco Sánchez Guisado
  76. 76. 9. Formularios Crear formularios : • Puedes crear formularios en el menú Insertar / Formulario / • • • Formulario Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de abajo. Dentro del formulario podrás insertar elementos de formulario. Es recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario y mejora su apariencia: CURSO DE DREAMWEAVER CS4 Diapositiva - 76 Monitor: Francisco Sánchez Guisado
  77. 77. 9. Formularios Elementos de formulario: • Los elementos de formulario pueden insertarse en una página • a través del menú Insertar / Formulario / Objeto de formulario. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades: • Campo de texto y Área de texto : • Botón : • Casilla de verificación : • Botón de opción : • Lista/Menú : Se utiliza para ponerle nombres al resto de elementos de formulario. Diapositiva - 77 DREAMWEAVER CS4 Monitor: Francisco Sánchez Guisado • Etiqueta : CURSO DE
  78. 78. Crea un formulario estándar en la página “cotacto.html”. 9. Formularios Validación de formularios : • Sirve para hacer que Javascript valide los • • • campos obligatorios antes de que se envíe el formulario. Para validar un formulario hay que seleccionar Ventana / Comportamientos (Mayús+F4) En este panel hay que desplegar el botón y después seleccionar “Validar formulario”. Después selecciona uno por uno cada elemento y verifica si es obligatorio o no y el tipo de dato admitido: CURSO DE DREAMWEAVER CS4 Diapositiva - 78 Monitor: Francisco Sánchez Guisado
  79. 79. Necesitarás una cuenta de Gmail 9. Incrustar Formulario de Google 1. Accede a Drive.Google.com 2. Archivo / Nuevo / Formulario 3. Escribe el título 4. Escribe las instrucciones 5. Elige tipo Texto 6. Botón “Enviar formulario” 7. Incrustar 8. Luego insertas el código HTML en una página Web de tu proyecto o llamas a la URL CURSO DE DREAMWEAVER CS4 Diapositiva - 79 Monitor: Francisco Sánchez Guisado
  80. 80. Pon música a la página “tierra.html”. Tienes archivos MID en C:Program FilesMicrosoft OfficeCLIPARTPUB60COR 10. Multimedia (sonido) • Incluir un sonido agradable, apropiado al contenido de • la página, puede hacerla más atractiva, con la posibilidad de activarlo o desactivarlo. Los formatos de sonido más habituales son: – MP3 - WAV - MIDI • Lo ideal es incluir algún archivo de audio que no • ocupe mucho espacio. Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar / Media / Plug-in • En DW no se mostrarán los controles de audio. • Los archivos insertados como plug-in se mostrarán con una imagen como esta: CURSO DE DREAMWEAVER CS4 Diapositiva - 80 Monitor: Francisco Sánchez Guisado
  81. 81. Pon música de fondo a la página “luna.html” 10. Multimedia (sonido) • En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio: Al y An. • Para que se escuche el sonido en la página, pero que no se vean los controles de audio, los campos Al y An deben valer cero. • La canción se reproducirá al cargarse la página una sola vez. • Los valores pueden cambiarse a través del través de HTML: <embed src=“mp3/audio.mid" autostart="false" loop="true"></embed> • Para poner música de fondo en una página Web, sin que aparezcan los controles de audio, puedes escribir este código después de la etiqueta </title> directamente: <bgsound src=“mp3/audio.mid" loop=“1"> CURSO DE DREAMWEAVER CS4 Diapositiva - 81 Monitor: Francisco Sánchez Guisado
  82. 82. Puedes descargar vídeos de prueba desde la página: http://www.humantica.com/servicios_informaticos/curso_dreamweaver.htm 10. Multimedia (vídeo) • Los vídeos ocupan mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. • Los formatos de vídeo son: AVI, MPEG y MOV. • Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar / Medía / Plug-in: • Los vídeos insertados como plug-in se mostrarán por una imagen como esta: CURSO DE DREAMWEAVER CS4 Diapositiva - 82 Monitor: Francisco Sánchez Guisado
  83. 83. Si necesitas un vídeo para poder probarlo, aprende a descargarlos de YouTube desde la página www.descargaryoutube.com 10. Multimedia (vídeo) El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in: Los vídeos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse añadiendo autostart="false" y loop="true". Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un plug-in. En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse - 83 el campo URL plg una Guisado Diapositiva en CURSO DE DREAMWEAVER CS4 Monitor: Francisco Sánchez
  84. 84. 11. Capas Introducción : • Las capas son unos recuadros que pueden situarse en cualquier parte de la página y en los que podemos insertar contenido HTML. • Pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. • Pueden moverse de una posición a otra de la ventana: • Pueden ser redimensionadas: • Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash y cualquier elemento HTML. • La capa no solo aparece representada por el recuadro anterior, sino que también aparece un recuadro en el documento. Este recuadro sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa. CURSO DE DREAMWEAVER CS4 Diapositiva - 84 Monitor: Francisco Sánchez Guisado
  85. 85. 11. Capas PA significa “Posición Absoluta” Insertar una capa : • Pueden insertarse desde: Insertar / Objeto de diseño / Div PA • Pueden editarse sus atributos. Hay que seleccionarla primero: – pulsando sobre el icono correspondiente – a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana / Elementos PA • Si la opción Capas no aparece directamente en este menú, estará dentro de la opción Otros. • También puedes abrir el panel pulsando F2 CURSO DE DREAMWEAVER CS4 Diapositiva - 85 Monitor: Francisco Sánchez Guisado
  86. 86. 11. Capas Pon una imagen de fondo a una capa PA Formato de una capa : Se especifica a través de su inspector de propiedades: • ID de capa : nombre de la capa. • Iz y Sup : distancia entre los límites izquierdo y superior del documento y la capa. • An y Al : anchura y la altura de la capa. • Índice Z : número de orden de colocación de las capas. Se solapan las de índice menor. • Vis : visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: • Default : visibilidad según el navegador • Inherit : se muestra la capa si la página a la que pertenece también se muestra • Visible : muestra la capa, aunque la página no se esté viendo (ojo abierto) • Hidden : la capa está oculta (ojo cerrado) • Con Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb : cómo aparecen las capas cuando el contenido excede su tamaño especificado. Diapositiva - 86 CURSO DE DREAMWEAVER CS4 Monitor: Francisco Sánchez Guisado
  87. 87. Inserta un Mapa de Google en una capa de posición absoluta PA en “contacta.html” 11. Incrustar Mapa de Google 1. Accede a www.google.com/maps 2. Localiza el mapa exacto tal y como lo quieres mostrar en la Web 3. Pulsa el botón “Enlazar” 4. Selecciona y Copia el código HTML 5. Ve a DW y sitúa el cursor en el punto de inserción del documento HTML 6. Insertar / Objeto de diseño / Div PA 7. Pega el código entre <div id="apDiv2"> y </div> en “Vista Código” 8. Redimensiona el objeto PA 9. Pruébalo CURSO DE DREAMWEAVER CS4 Diapositiva - 87 Monitor: Francisco Sánchez Guisado
  88. 88. Inserta un vídeo de Youtube en una Etiqueta DIV de tu Web 11. Incrustar Vídeo de YouTube 1. Accede a www.youtube.com 2. Localiza y abre un vídeo 3. Pulsa el botón “Compartir” 4. Pulsa el botón “Insertar” 5. Configura las opciones de visualización 6. Selecciona y Copia el código HTML 7. Ve a DW y sitúa el cursor en el punto de inserción del documento 8. Insertar / Objeto de diseño / Etiqueta Div 9. Pega el código HTML 10.Pruébalo CURSO DE DREAMWEAVER CS4 Diapositiva - 88 Monitor: Francisco Sánchez Guisado
  89. 89. Diseñemos una Web basada en una plantilla HTML gratuita 12. Plantillas 1. www.freewebtemplates.com / Website Templates / HTML5 Water / Download 2. Descomprime el archivo ZIP en tu carpeta del curso (html5-water-498616428.zip) 3. Renombra la carpeta (Sitio-agua) 4. Crea sitio nuevo en DW y ábrelo 5. Pon el menú principal en español 6. Añade dos imágenes más al banner CURSO DE DREAMWEAVER CS4 Diapositiva - 89 Monitor: Francisco Sánchez Guisado
  90. 90. Los precios que ves son aproximados y muy variables 12. El coste de crear una Web 1. Diseñar una Web en tu ordenador: gratis  60 €  miles € 2.Registrar un nombre de dominio: gratis  9 €  20 € / año 3. Alojar la Web en un servidor: gratis  36 €  cientos € / año CURSO DE DREAMWEAVER CS4 Diapositiva - 90 Monitor: Francisco Sánchez Guisado
  91. 91. Internet está lleno de “recursos gratis para webmaster” 12. Recursos gratis en Internet • Menús CSS: – – http://www.cssportal.com www.cssmenumaker.com – www.freewebtemplates.com – – Dar de alta las páginas: www.google.com/addurl Recortador de URLs: http://goo.gl/ • Plantillas: • Utilidades URL: CURSO DE DREAMWEAVER CS4 Diapositiva - 91 Monitor: Francisco Sánchez Guisado
  92. 92. 12. Recursos para webmasters • El icono principal de la Web se llamará “favicon.ico” y lo debes guardar en el directorio raíz • Puedes crear el icono en: www.online-convert.com • Crear GIFs animados: www.gifninja.com • Reconocedor fuentes: www.myfonts.com • Contador de visitas: www.contadorvisitasgratis.com • Usuarios conectados: www.usuarios-online.com/es • Generar códigos QR: www.codigos-qr.com • Retoque de fotos de caras: http://makeup.pho.to/es CURSO DE DREAMWEAVER CS4 Diapositiva - 92 Monitor: Francisco Sánchez Guisado
  93. 93. Para algunos recursos de Google necesitarás correo de Gmail 12. Recursos para webmasters • Imágenes libres: Google / Imágenes / Opciones / Búsqueda avanza / Derechos de uso / 5 opciones • Dar de alta las páginas: www.google.com/addurl • Recortador de URLs: http://goo.gl/ • Recursos Google para webmasters: • Google Analytics: Estadísticas de las visitas a tu web • Google AdWowds: Poner anuncios de Google (gastar €) • Google AdSense: Poner anuncios en mi Web (ganar €) • Pide a tu profesor que te enseñe a “robar” ideas para enriquecer tu página, por ejemplo, una galería fotográfica CURSO DE DREAMWEAVER CS4 Diapositiva - 93 Monitor: Francisco Sánchez Guisado
  94. 94. 12. Atajos de Dreamweaver • Ctrl+Q • Ctrl+J • Ctrl+F2 • Ctrl+F3 • F2 • F4 • F8 • F12 Salir de Dreamweaver Propiedades de la página Panel Insertar Inspector de propiedades Muestra/oculta Elementos PA Mostrar/Ocultar Paneles Vista de archivos del sitio Vista previa en el navegador CURSO DE DREAMWEAVER CS4 Diapositiva - 94 Monitor: Francisco Sánchez Guisado
  95. 95. 12. Posicionamiento en Google (SEO) • • • • • • • • • Poner nombres adecuados a las páginas Rellenar los datos extra de cada página Conseguir enlaces de otras Webs a la mía (intercambio de enlaces) Poner contenido extra a las imágenes Cuidar mucho todo el contenido Tener la Web actualizada y sin enlaces rotos Centrar el contenido en un par de frases para que Google nos encuentre por ese criterio (repetirlas) Lo último: el alta en www.google.com/addurl Alta en redes sociales: facebook, linkedin… CURSO DE DREAMWEAVER CS4 Diapositiva - 95 Monitor: Francisco Sánchez Guisado
  96. 96. ¡Muchas gracias a todos! CURSO DE DREAMWEAVER CS4 Diapositiva - 96 Monitor: Francisco Sánchez Guisado

×