cursodreamweavercs6-130110223812-phpapp01

8/12/2019 cursodreamweavercs6-130110223812-phpapp01

1/122

%JTFPEF1HJOBT8FC %SFBNXFBWFS


2/122


3/122

Contenido v

1 Introduccin a Dreamweaver CS6. 1

1.1. Qu es Dreamw eaver? 2

1.2. Acceso a Dreamw eaver. 2

1.3. Amb iente de Dreamw eaver. 3

1.4. Vistas del docum ento. 4

1.4.1. Vista Cdigo.

1.4.2. Vista Dise o.

1.4.3. Vista Dividir.

1.4.4. Vista En vivo.

1.4.5. Vista Cdigo en vivo.

1.4.6. Vista previa en el navegador.

1.5. Crear un nuevo docum ento. 9

1.6. Abrir un docum ento. 9

1.7. Guardar un docum ento. 10

1.8. Importar y exportar docume ntos. 11

1.9. Cerrar y salir de Dreamw eaver. 12

2 rea de trabajo en Dreamw eaver CS6. 13

2.1. Inspector de propiedades. 14

2.2. Barra de herramientas Docume nto. 14

2.3. Barra de herramientas Estado. 15

2.4. Barra de herramientas Navegacin con navegador. 15

2.5. Panel Insertar. 16

2.6. Panel Estilos CSS. 17

3 Configurar un sitio en Dreamweaver. 193.1. Concepto de Sitio. 20

3.2. Tipos de Sitios en Dreamw eaver. 20


4/122

vi Diseo de Pginas Web (D reamwe aver CS6)

3.3. Estructura de una Pgina Web. 21 3.4. Configurar un sitio nuevo. 22 3.5. Configuracin de un servidor de prueba. 22 3.6. Cuadro de dilogo Administrar sitios. 24 3.7. Panel Archivos. 25

4 Formato a la Pgina W eb. 27

4.1 Propiedades de la pgina. 28

4.1.1 Categora Apariencia (CSS).

4.1.2 Categora Apariencia (HTML).

4.1.3 Categora Vnculos (CSS).

4.1.4 Categora Encabezados (CSS).

4.1.5 Categora T tulo / Codificacin.

4.1.6 Categora Imagen de rastreo.

4.2 Comentarios. 33

4.3 Objeto Fecha. 33

4.4 Reglas horizontales. 34

4.5 Caracteres especiales. 35

4.6 Listas. 36

4.7 Formato al texto. 37

4.7.1 Men Formato.

4.8 Concepto de Estilo CSS. 40

4.9 Crear estilos CSS. 41

4.9.1 Propiedades CSS.

4.10 Editar estilos CSS. 43

4.11 Vincular estilos CSS. 44

4.12 Mens usando hojas de estilos. 45


5/122

Contenido vii

5 Imgenes. 55

5.1. Concepto de Imagen. 56

5.2. Insertar imgenes. 56

5.3. Marcadores de posicin de imagen. 58

5.4. Propiedades de imgenes. 59

5.5. Imagen de sustitucin (Rollover). 61

5.6. Objetos Inteligentes. 62

6 Hipervnculos. 66

6.1. Concepto de Hipervnculo. 67

6.2. Tipos de rutas de los vnculos. 67

6.2.1. Rutas absolutas.

6.2.2. Rutas relativas al docum ento.

6.2.3. Rutas relativas a la raz del sitio.

6.3. Crear hipervnculos. 68

6.4. Destino de los hipervnculos. 69

6.5. Anclaje con nomb re. 70

6.6. Vnculo a correo electrnico. 71

6.7. Men de salto. 72

6.8. Zonas interactivas. 74

7 Diseo de la Pgina W eb. 76

7.1 Concepto de Tabla. 77

7.2 Creacin de tablas. 77

7.3 Formato de tablas y celdas. 79

7.4 Insertar filas y columnas. 81

7.5 Eliminar filas y columnas. 82

7.6 Com binar o dividir celdas. 82

7.7 Anidar tablas. 83

7.8 Ordenar tablas. 83


6/122

viii Diseo de Pginas Web (D reamwe aver CS6)

7.9 Concepto de marcos. 84 7.10 Crear marcos. 84 7.11 Seleccionar marcos. 86 7.12 Guardar marcos. 86 7.13 Propiedades de los marcos. 88 7.14 Hipervnculos en marcos. 89

8 Formularios.

8.1 Concepto de Formulario.

8.2 Crear formularios.

8.3 Objetos de los formularios.

8.3.1 Elemento Cam po de texto.

8.3.2 Elemento rea de texto.

8.3.3 Elemento Botn.

8.3.4 Elemento Casilla de verificacin.

8.3.5 Elemento Botn de opcin.

8.3.6 Elemento Seleccionar (Lista/Men).

8.3.7 Elemento Cam po de archivo.

8.3.8 Elemento Campo de imagen.

8.3.9 Elemento Cam po oculto.

8.4 Validacin de formularios aplicando JavaScript.

8.5 Validacin de formularios usando HTM L5.

9 Capas.

9.1 Concepto de Capa.

9.2 Insertar capas.

9.2.1 Etiqueta Div.

9.2.2 Etiqueta DIV de diseo de cuadricula fluida.

9.2.3 Div PA.

91

92

92

100

101

103

104

104


7/122

Contenido ix

9. 3 Propiedades de la capas. 1059. 4 Hojas de e stilos en las capas. 107

10 Elementos multimedia.

10.1 Insertar Audio .

10.1.1 Etiqueta .

10.1.2 Com ando Plug-in.

10.2 Insertar Video.

10.2.1 Etiqueta .

10.2.2 Com ando Plug-in.

10.3 Archivo SW F.

10.4 Com ponente FLV.

10.5 Pelculas Shockwave.

10.6 Control ActiveX.

10.7 Elemento Applet.

108

109

111

112

113

114

114

114


8/122


9/122

D CS6.

e Dreamwe aver.

UNIDA 1INTRODUCCIN A DREAMWEAVER

1.1 Qu es Dreamw eaver?

1.2 Acceso a Dreamw eaver.

1.3 Ambiente de Dreamw eaver.

1.4 Vistas del docum ento.

1.5 Crear un nuevo docum ento.

1.6 Abrir un docum ento.

1.7 Guardar un docum ento.

1.8 Importar y exportar docum entos.

1.9 Cerrar y salir d


10/122

2 Diseo de Pginas Web (D reamwe aver CS6)

INTRODUCCIN A DREAMW EAVER CS6.

1.1 Qu es Dreamwe aver?

Dreamweaver es el software para el desarrollo y diseo de Pginas Web

adaptab les para diversos dispositivos electrnicos.

son:

1.2 Acceso a Dreamwe aver.

Para pod er acceder a Dreamweaver existen diversas formas, pero las ms usuales

OPCIN 1:

1) Abre el me n Metro de Windows (Presionado la tecla de < Windows >).

2) Desplzate por los programas y haz clic en la aplicacin Adobe Dreamweaver

CS6.

OPCIN 2:

1) Metacomando < Win + R >.

2) Teclea la palabra Dreamweaver.

3) Pulsa la tecla < Enter >.


11/122

Unidad 1 Introduccin a Dreamw eaver CS6 3

1.3 Ambiente de Dreamwe aver.

Pestaas del documento

Botn de laaplicacin

Barra de herramientas Docum ento

Barra de mensConmutador de

espacios de trabajo

rea de trabajo

Barra de herramientas

EstadoPaneles

Inspector de propiedades

1.4 Vistas del documento.

Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el

contenido de l documento, para as usar la vista con la que m s nos agrade trabajar.


12/122


1.4.1 Vista Cdigo.

Presenta la codificacin para escribir o editar manualmente el cdigo con el que

se est trabajando.

Para activar la Vista cdigo, realiza cualquiera de las siguientes tres opciones:

1. Haz clic en botn Cdigo de la Barra de herramientas documento.

2. Sitate en el me n Ver y selecciona la opcin Cdigo.

3. O presiona la tecla < F10 >.

Al realizar cualquiera de las tres opciones anteriores, se mostrar la Vista

Cdigo del docum ento con el que se est trabajando.


13/122


1.4.2 Vista Diseo.

Muestra el contenido de la pgina web y permite e ditarlo. Activa la Vista Diseo,

emp leando cualquiera de las siguientes opciones:

1. Haz clic en botn Diseo de la Barra de herramientas Documento.

2. Sitate en el me n Ver y selecciona la opcin Diseo.

1.4.3 Vista Dividir.

Separa e n dos el rea de trabajo, visualizando en una parte e l cdigo y en la otra

la vista diseo. La Vista Dividir, se activa desde:

1. El botn Dividir de la Barra de herramientas Documento.

2. O desde el men Ver Cdigo y Diseo.


14/122


1.4.4 Vista En vivo.

Es casi similar a la vista diseo, slo que en esta es posible interactuar con el

contenido de la pgina tal y como se estuviera haciendo en el navegad or. Activa la Vista

En vivo, desde:

1. El botn Vista En vivo de la Barra de herramientas Documento.

2. Desde el men Ver Vista en vivo.3. O Metacomando < Alt + F11 >.


15/122


1.4.5 Vista Cdigo en vivo.

Divide en dos partes el rea de trabajo, mostrando e l contenido de la pgina web

en vivo, y a la vez que es posible editar dicho contenido mediante cdigo.

Una ve z que se haya activado la Vista En Vivo, es posib le activar la Vista Cdigo en

vivo. Para ello realiza lo siguiente:

1. Haz clic en el botn Cdigo en vivo de la Barra de herramientas Documento.

2. O desde el men Ver Cdigo en vivo.


16/122


1.4.6 Vista previa en el navegado r.

Permite visualizar la pgina web en alguno de los navegadores instalados en el

equipo (por lo regular es el navegador q ue se tiene por d efault).

Para ejecutar la pgina en un navegador, presiona la tecla < F12 > o haz clic en el

cono de la Barra de herramientas Documento .


17/122


1.5 Crear un nuevo documen to

Para crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente:

1. Men Archivo Nuevo.En la categora Pgina en blanco del cuadro de dilogo Nuevo documento,

selecciona el tipo de pgina que deseas crear en la columna Tipo de pgina.

2. O Metacomando < Ctrl + N >.

1.6 Abrir un documento

Para abrir un documento en Dreamweaver CS6, realiza lo que se seala a

continuacin:

1. Men Archivo Abrir.2. O Metacomando < Ctrl + O >.

Una vez realizado alguno de los procedimientos anteriores aparecer el cuadro

de dilogo Abrir, donde de bers seleccionar el documento a abrir.


18/122

1

Diseo de Pginas Web (D reamwe aver CS6)

1.7 Guardar un documen to

Para guardar un documento en Dreamweaver CS6, presiona el Metacomando

< Ctrl + S > o haz clic en el me n Archivo Guardar.Al guardar por primera vez un documento aparecer el cuadro dilogo Guardar

como, donde se habr de especificar el nombre del archivo y el tipo de documento a

guardar.


19/122


1.8 Importar y exportar documentos.

Dreamweaver, permite importar archivos al documento, para que stos

sean colocados en el rea de trabajo. Los documentos que permite importar

Dreamweaver CS6 son:

XML en plantilla. Dreamweaver crea un nuevo docum ento basado enla plantilla especificada en el archivo XML. Despus rellena el

contenido de cada regin editable de ese documento con los datos

del archivo XML. El documento resultante aparece en una nueva

ventana de documento.

Datos de tabla. Importa datos de tabla en el documento guardandoen primer lugar los archivos (por ejemplo, archivos de Microsoft

Excel o archivos de b ase de datos) en formato de texto delimitado.


20/122

1


Documento de Word. Al importar un documento de Word,Dreamweaver recibe el HTML convertido y lo inserta en la pgina

Web.

Documento de Excel. Importa al rea de trabajo una hoja de clculoy Dreamweaver la convierte en cdigo HTML.

Para importar cualquier documento a Dreamweaver, realiza:

1. Haz clic en el men Archivo Importar Selecciona la opcin delarchivo que desee s importar.

Asimismo es posible exportar la pgina web a otros formatos, que son:

Datos de plantilla como XML. Tabla.

Para exportar la pgina W eb, realiza lo siguiente:

1. Haz clic en el men Archivo Exportar Selecciona la opcin delarchivo que desee s exportar.

1.9 Cerrar y salir de Dreamweaver.

Para cerrar un documento en Dreamweaver CS6, presiona el Metacomando

< Ctrl + F4 >.

Para salir de Dreamweaver, realiza:

1) Metacomando < Ctrl + Q > o < Alt + F4 >.

2) Men Archivo Cerrar.

T R A B A J O S D E I N V E S T I G A C I N

1. Historia de Dreamw eaver desde sus comienzos hasta la actualidad.

2. Novedades de Dreamw eaver CS6.

3. Requisitos para instalar Dreamw eaver CS6.

4. Concepto de Archivo XM L.


21/122

D VER CS6.

UNIDA 2REA DE TRABAJO EN DREAMWEA

2.1 Inspector de propiedade s.

2.2 Barra de herramientas Docume nto.

2.3 Barra de herramientas Estado.

2.4 Barra de herramientas Navegacin con navegador.

2.5 Panel Insertar.


22/122


REA DE TRABAJO EN DREAMW EAVER CS6.

2.1 Inspector de propiedades.

El Inspector de propiedades permite examinar y editar las propiedades ms

comunes del elemento seleccionado actualmente, como texto o cualquier objeto

insertado.

2.2 Barra de herramientas Documento.

La barra de herramientas Documento contiene los comandos y opciones

relativos a la visualizacin del documento y a su transferencia entre los sitios local y

remoto.

Vista Cdigo

Vista Diseo

Multipantalla

Administracin de archivos

Comprobar compatibilidad con navegadores

Actualizar docum ento

Ayudas visuales

Vista Dividir

Vista En vivo

Validacin W3C

Vista previa

Ttulo de la pgina w eb


23/122

Unidad 2 rea de trabajo en Dreamweave r CS6 15

2.3 Barra de herramientas Estado.

La barra de herramientas Estado, se sita en la parte inferior de la ventana de

docume nto, proporciona informacin adicional sobre el documento que est creando.

Herramienta seleccionar

Herramienta Zoom

Tamao mvil

Tamao escritorio

Selector de etiquetas

Herramienta mano

Establecer nivel de aument o

Tamao tableta

Tamao de ventana

Tamao del documento y t iempo de descargar estimado

Indicador de codificacin

2.4 Barra de herramientas Navegacin con navegador.

La barra de herramientas Navegacin con navegador se activa en la Vista en vivo

y muestra la direccin de la pgina que est viendo en la ventana de documento.

Vista Cdigo en vivo

Controles de navegador

Opciones de la vista en vivo

Cuadro de direccin

Activar modo de inspeccin


24/122


2.5 Panel Insertar.

El panel Insertar contiene botones para crear e insertar objetos al documento.

Los botones se encuentran organizados en categoras, entre las que se puede cambiar

seleccionando la categora deseada del men desplegable Categora.

El panel Insertar est organizado en las categoras siguientes:

Categora Comn. Permite crear e insertarlos objetos que se utilizan con ms

frecuencia, como las imge nes y las tablas.

Categora Diseo. Permite insertar tablas,elementos de tabla, etiquetas div, marcos

y widgets de Spry. Tambin puede elegir

dos vistas para tablas: Estndar (valor

predeterminado) y Tablas expandidas.

Categora Formularios. Contiene botonesque permiten crear formularios e insertar

elementos de formulario, incluidos

widgets d e validacin de Spry.

Categora Datos. Permite insertar objetosde datos de Spry y otros elementos

dinmicos, como juegos de registros,

regiones repetidas y grabar formularios de

insercin y actualizacin.

Categora Spry. Contiene botones paracrear pginas de Sp ry, incluidos objetos de datos y widgets de S pry.

Categora jQuery Mobile. Contiene botones para crear formularios enlenguaje jQuery.

Categora InContext Editing. Contiene botones para la creacin depginas de InContext Editing, incluidos botones para Regiones editables,

Regiones repe tidas y la administracin de clases CSS.


25/122

Unidad 2 rea de trabajo en Dreamweave r CS6 17

Categora Texto. Permite insertar diversas etiquetas de formato de te xtoy listas, como b, em , p, h1 y ul.

Categora Favoritos. Permite agrupar y organizar los botones del panelInsertar que utiliza con ms frecuencia en un lugar comn.

2.6 Panel Estilos CSS.

El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan

a un elemento de pgina actualmente seleccionado (modo Actual) o las reglas y

propiedades que afectan a todo un documento (modo Todo). El panel Estilos CSS

tambin permite modificar propiedades CSS tanto en modo Todo como en modo Actual.


26/122



1. Wo rld Wide We b Consortium.

a. Qu es?

b. Organizacin.

c. Para qu se cre?

d. Quines lo crearon?

2. Activar o desactivar los paneles de Dreamw eaver.


27/122

D WEAVER.

UNIDA 3CONFIGURAR UN SITIO EN DREAM

3.1 Concepto de Sitio.

3.2 Tipos de Sitios en Dreamw eaver.

3.3 Estructura de una Pgina We b.

3.4 Configurar un sitio nuevo .

3.5 Configuracin de un servidor de prueba.

3.6 Cuad ro de dilogo Adm inistrar sitios.

3.7 Panel Archivos.


28/122


CONFIGURAR UN SITIO EN DREAMW EAVER.

3.1 Concepto de Sitio.

Un Sitio es el conjunto de archivos de hipertexto (pginas web) y carpetas

relacionados entre s, con un diseo similar y

un objetivo en comn.

Cada sitio Web tendr una direccin

nica, es decir, nunca se podrn repetir las

URLs.

3.2 Tipos de Sitios en Dreamwe aver.

Un sitio de Dreamweaver permite organizar y administrar todos los documentos

Web, cargar el sitio en un servidor Web, controlar y mantener vnculos y administrar y

comp artir archivos.

Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn

el entorno de d esarrollo y el tip o de sitio W eb que se desarrolle:

Carpeta raz local: Almacena los archivos con los que se est trabajando.

Dreamweaver se refiere a esta carpeta como el sitio local. Esta carpe ta suele

encontrarse en el equipo local, pero tambin se pued e encontrar en un servidor

de red.

Carpeta remota: Almacena los archivos para pruebas, produccin,

colaboracin, etc. Dreamweaver se refiere a esta carpeta com o el sitio rem oto

en el panel Archivos. En general, la carpeta remota sue le colocarse en el equipo

donde se ejecuta el servidor Web.

Carpeta de servidor de prueba : La carpeta en la que Dreamweaver procesa

pginas dinmicas.


29/122


3.3 Estructura de una Pgina Web.

paginaweb

documentos

imagenes

videos

scripts

multimedia

basedatos


30/122


3.4 Configurar un Sitio nuevo.

Configurar un sitio de Dreamweaver permite organizar todos los documentos

asociados con un sitio Web. El cuadro de dilogo Configuracin del sitio es donde se

especifica la configuracin del sitio de Dreamweaver.

Para abrir el cuadro de dilogo Configuracin del sitio, haz clic en el men Sitio

Nuevo sitio.

3.5 Configuracin de un servidor de prueba.

Un servidor de prueba permite generar y mostrar contenido dinmico mientras

se trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un

servidor en funcionamiento o un servidor de produ ccin.

1. Seleccione Sitio Administrar sitios.2. Haz clic en Nuevo Sitio (para configurar un nuevo sitio), o bien selecciona un

sitio de Dreamweaver ya existente y haz clic en Editar.

3. En el cuadro de dilogo Configuracin del sitio, selecciona la categora

Servidores y proceda de una d e las siguiente formas:


31/122


Haz clic en el botn Aadir nuevo servidor para aadir un nuevoservidor.

O selecciona un servidor existente y haz clic en el botn Editarservidor existente

4. Especifica las opciones Bsicas que sean necesarias y luego haz clic en el la

pestaa Avanzadas.

Nota: Debes especificar un URL Web en la pantalla Bsicas al especificar un

servidor de prueba.


32/122


2013. De rechos Reservados Daniel Olalde Soto.

5. Bajo Servidor de prueba, selecciona el modelo de servidor que desea usar

para su aplicacin Web.

6. Haz clic en Guardar para cerrar la pantalla Avanzadas . Seguidamente, en la

categora Servidores, especifica el servidor que acabas de aadir o editar

como se rvidor de prueba.

3.6 Cuadro de dilogo administrar sitios.

El cuadro de dilogo Administrar sitios se emplea p ara crear nuevos sitios, editar,

duplicar, eliminar un sitio o im portar o exportar la configuracin de un sitio.

1. Selecciona Sitio Administrar sitios y selecciona un sitio de la lista.

2. Haz clic en un botn para seleccionar una de las opciones y haz clic en Listo .

o Nuevo. Permite crear un sitio nuevo .

o Editar. Sirve para m odificar un sitio existente.

o Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la

ventana de lista de sitios.

o Quitar. Elimina el sitio seleccionado; no po dr deshacer esta accin.


33/122


o Exportar. Permite exportar la configuracin de un sitio como archivo

XML (*.ste).

o Importar. Permite seleccionar un archivo de configuracin de un sitio

(*.ste).

3.7 Panel Archivos.

Utilice el panel Archivos para ver y administrar los archivos del sitio de

Dreamweaver.

Al visualizar sitios, archivos o carpetas en el panel Archivos, puedes cambiar el

tamao d el rea de visualizacin y expandir o contraer el panel Archivos.


34/122




1. Concepto de Servidor.

2. Funcin de los servidores.

3. Tipos de servidores.

4. Importancia de la estructura de un Sitio Web.


35/122

D .

UNIDA 4FORMATO A LA PGINA W EB

4.1 Propiedades de la pgina.

4.2 Comentarios.

4.3 Objeto Fecha.

4.4 Reglas horizontales.

4.5 Caracteres especiales.

4.6 Listas.

4.7 Forma to al texto.

4.8 Concepto de Estilo CSS.

4.9 Crear estilos CSS.

4.10 Editar estilos CSS .

4.11 Vincular estilos CSS .

4.12 Mens usando hojas de estilos.


36/122


FORMATO A LA PGINA W EB.

4.1 Propiedades de la pgina.

Al momento de crear una Pgina Web es recomendable crear sitios que sigan un

mism o formato, e s decir, que tengan el m ismo color de fondo, de fuente, etc.

El formato de la pgina se define a travs del cuadro de dilogo Propiedades de

la pgina. Para abrir dicho cuadro de dilogo realiza cualquiera de las siguientes

opciones:

1. Metacom ando < Ctrl + J >.

2. Haz clic en el men Modificar Propiedades de la pgina.3. Haz clic derecho sobre el rea del documento y del men contextual

selecciona la opcin Propiedades .

4. En el Inspector de propiedades, haz clic sobre el botn Propiedades de la

pgina.


37/122

Unidad 4 Formato a la Pgina Web 29

Empleando cualquiera de las opciones anteriores se mostrar el cuadro de

dilogo Propiedades de la pgina, en donde se habrn de configurar las

propiedades del documento.

4.1.1 Categora Apariencia (CSS).

La categora Apariencia (CSS) permite esp ecificar la fuente y el tam ao de la letra;

as como el color del texto, color de fondo, aplicar una imagen de fondo, los mrgenes

del rea del documento .


38/122


4.1.2 Categora Apariencia (HTML).

La categora Apariencia (HTML), permite esp ecificar varias opciones bsicas para

el diseo de pgina y stas son:

Imagen de fondo. Aplica como fondo la imagen seleccionada. Fondo . Define un color de fondo pa ra la pgina. Texto. Especifica el color de la fuente del texto. Vnculos. Especifica el color al texto d el vnculo. Vnculos visitados. Especifica el color que va a tomar los vnculos visitados. Vnculos activos. Especifica el color que se va mo strar cuando se haga clic

sobre el vnculo.

Mrgenes. Permiten establecer los mrgenes del documento, es decir, ladistancia entre donde empieza el contenido de la pgina y la ventana del

navegador.


39/122


4.1.3 Categora Vnculos (CSS).

La categora Vnculos (CSS) se em plea para definir la fuente, tamao y colores de

los vnculos, as com o el estilo del v nculo.

4.1.3 Categora Encabezados (CSS).

La categora Encabezados (CSS), permite de finir la fuente de los e ncabezados, el

estilo de la fuente (cursiva o negrita), as como el tamao y color que se va ap licar a cada

tipo de encabezado.


40/122


4.1.5 Categora Ttulo / Codificacin.

La categora Ttulo / Codificacin permite establecer el tipo de codificacin del

documento en cuestin conforme al idioma utilizado al crear las Pginas Web, as como

especificar el formulario de normas Unicode que de be ap licarse a tal tipo de cod ificacin.

4.1.6 Categora Imagen de rastreo.

La categora Imagen d e rastreo permite insertar un archivo d e imagen para usarlo

como plantilla grfica al disear la Pgina Web, as como, establecer la opacidad de laimagen de rastreo.


41/122


4.2 Comentarios.

Un comentario es un texto descriptivo que se inserta en el cdigo HTML para

explicar el cdigo o facilitar otra informacin. El texto del comentario aparece slo en la

vista Cdigo y no se muestra en los navegado res.

Para insertar comentarios al docum ento, realiza:

1) Sitate en el men Insertar Comentario .2) O haz clic en el comand o Comentario , del panel Insertar, de la categora

Comn.

En la vista Cdigo, se inserta una etiqueta de comentario () y sita elpunto de insercin en medio de dicha etiqueta. Ah teclea el come ntario.

En la vista Diseo, aparece el cuadro de dilogo Comentario . Introduce elcome ntario y haz clic en Aceptar.

4.3 Objeto Fecha.

Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual

con el formato que p refieras (con o sin la hora) y ofrece la posibilidad de actualizarla cada

vez que guarde el archivo.


42/122


Para insertar el objeto fecha en el docum ento, realiza:

1. Sita el puntero de insercin en el lugar donde desees insertar la fecha.

2. Realiza alguno de los siguientes procedimientos:

Men Insertar Fecha. Categora Comn, del panel Insertar, haz clic en el cono Fecha.

3. En el cuadro de dilogo Insertar fecha, selecciona el formato de da de la

semana, fecha y hora.

Si se desea que la fecha insertada se actualice cada vez que se guarde el

documento, activa la casilla Actualizar automticamente al guardar. Pero si

se requiere que la fecha se convierta en texto normal cuando se inserte y no

se actualice automticame nte, desactiva dicha opcin.

4. Haz clic en Aceptar para insertar la fecha.

4.4 Reglas horizontales.

Las Reglas horizontales son el elemento que se usa p ara separar secciones dentro

de una m isma pgina.

Para insertar una regla horizontal realiza:

1. Sitate en el me n Insertar HTML Regla ho rizontal.2. O de la Categora Comn del panel Insertar, haz clic en el comando Regla

Horizontal.


43/122


Al seleccionar la regla horizontal insertada, el Inspector de propiedades cambia

para permitirnos mod ificar las propiedades de dicho objeto.

Ancho de la regla Alineacin de la regla

Grosor de la regla Aplicar somb ra

Asignar un nomb re de ID Asignar clase

4.5 Caracteres especiales.

Cuando se trabaja con pginas web, muchas de las ocasiones es necesario

emplear caracteres especiales tales como , , , , por mencionar algunos; para esto

Dreamweaver dispone de diferentes caracteres que podemo s incorporar al docum ento.

Para insertar caracteres especiales, haz clic en el men Insertar HTML Caracteres especiales Otro . Una vez hecho lo anterior se mostrar el cuadro dedilogo Caracteres especiales, ah debers seleccionar el carcter buscado .


44/122



4.6 Listas.

En Dreamweaver CS6 , es posible insertar tres tipos de listas, que son:

Lista sin ordenar : muestra una especie de vietas para agrupar losdiferentes elementos de la lista.

Lista ordenada : muestra un nmero para indicar el orden de cada unode los elementos que integran la lista.

Lista de definicin : se encuentra compuesta por trminos oexpresiones y su definicin.

Para insertar cualquiera de stos tres tipos de listas, sitate en el men

Formato Lista y selecciona el tipo de lista que desees emplear.


45/122


4.7 Formato al texto.

El contenido del texto del documento en Dreamweaver posee atributos que

permiten dar formato al texto, como e s; cambiar el tipo de fuente, el tamao d e letra, la

alineacin, el color de la fuente, el estilo, etc.

Para dar formato rpidam ente al texto emplea el Inspector de propiedades, ya sea

usando la categora HTML o CSS (Para que se pueda aplicar el formato al texto, debers

previamente haberlo seleccionado).

Inspector de propiedades Categora HTML .6

95 11

1 73

8

2 12

10 4


46/122


1. Formato. Permite seleccionar un formato de prrafo ya definido para HTML,

que puede ser un encabezado, prrafo o formato predeterminado

2. ID. Asigna una ID a la seleccin. El men de splegable ID enum era todos los ID

declarados pero no utilizados en el documento.

3. Clase. Muestra el estilo de clase que se aplica actualmente al texto

seleccionado. Si no se ha aplicado ningn estilo a la seleccin, el men

emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la

seleccin, el men aparece e n blanco.

4. Vnculo. Crea un vnculo de hipertexto del texto seleccionado.

5. Negritas. Aplica estilo de negritas al texto seleccionado.

6. Cursiva. Aplica e stilo de cursiva al texto seleccionado.

7. Lista sin ordenar. Crea una lista con vietas d el texto seleccionado.

8. Lista ordenad a. Crea una lista numerada del texto seleccionado.

9. Disminuir sangra. Anula o quita la etiqueta < blockquote >. En una lista su

anulacin elimina la anidacin de la lista.

10. Aumentar sangra. Inserta sangra en el texto seleccionado, la aplicacin de

sangra crea una lista anidada.

11. Ttulo. Especifica el texto de informacin sobre una herramienta para un

vnculo de hipertexto.

12. Destino. Permite especificar el marco o la ventana donde se cargar el

documento vinculado.


47/122


4

Inspector de propiedades Categora CSS.7

112

8

10

11 5

9

3 6

2

1. Regla de destino. Es la regla que est editando en el Inspector de propiedades

de CSS. Si hay una regla ya existente aplicada al texto, se m ostrar el formato

de la regla que afecta al texto al hacer clic en el texto de la pgina. Tambin

puedes emplear el men emergente Regla de destino para crear nuevas reglas

CSS y nuevos estilos en lnea o aplicar clases existentes al texto seleccionado.

2. Editar regla. Abre el cuadro de dilogo Definicin de regla CSS para la regla de

destino. Si seleccionas Nueva regla CSS del men em ergente Regla de destino

y haces clic en el botn Editar regla, Dreamweaver abrir el cuadro de dilogo

Definicin de nueva regla CSS .

3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades para la regla de

destino e n la vista actual.

4. Fuente. Cam bia la fuente de la regla de destino.

5. Tamao. Establece el tamao d e la fuente para la regla de destino.

6. Color. Establece el color seleccionado como color de fuente en la regla de

destino.

7. Negritas. Aade la propiedad de negrita a la regla de destino.


48/122


8. Cursiva. Aade la propied ad de cursiva a la regla de destino.

9. Alinear a la izquierda. Alinea el texto hacia la izquierda.

10. Alinear al centro. Alinea el texto al ce ntro.

11. Alinear a la derecha. Alinea el texto hacia la derecha.

12. Justificar. Justifica el texto seleccionado.

4.7.1 Men Formato.

Tambin puedes emplear el men Formato , para m odificar el aspecto del texto;

dentro de este men encontrars los submens para:

Aumentar Sang ra o Anular sangra. Asignarle formato al prrafo. Alinear el texto. Crear listas. Aplicar estilos predefinidos. Crear o aplicar estilos CSS. Modificar el color de texto.

4.8 Concepto de Estilo CSS.

Los Estilos CSS, tambin conocidos como Hojas de Estilos en Cascada (Cascading

Style Sheets) son el conjunto de reglas de formato que determina el aspecto del

contenido de la Pgina Web.

Las reglas CSS, pueden residir en las ub icaciones siguientes:

Hojas de Estilo CSS Externas . Son el conjunto de reglas CSS almacenadasen un archivo CSS (.css) y con stas se deber emplear una vinculacin al

archivo CSS.

Hojas de Estilo CSS Internas. Son el conjunto de reglas CSS incluidas en una etiqueta < STY LE > dentro del cuerpo del docum ento o de la etiqueta

< HEAD >.


49/122


4.9 Crear estilos CSS.

Para crear un estilo CSS en Dreamweaver, realiza:

1. Para abrir el cuadro de dilogo Nueva Regla CSS, realiza cualquiera de las

siguientes opciones.

A. Haz clic en el men Formato

Estilos CSS Nuevo.B. O del panel Estilos CSS, haz clic en

el cono Nueva regla CSS.

2. Despus de haber realizado alguno de los procedimientos anteriores se

mostrar el siguiente cuadro de dilogo, en d onde se habr de especificar:

Tipo de selector. Perm ite elegir alguno de los siguientes tipos de selector:

Clase. Crea un estilo personalizado que pueda aplicarse como atributoclass a cualquier elemento HTML.

ID . Define el formato de una etiqueta que contenga un atributo ID concreto.

Etiqueta. Redefine el formato predeterminado de una etiqueta HTMLespecfica.

Compuesto. Define una regla compuesta que afecte a dos o msetiquetas, clases o ID simultneam ente.


50/122


Nomb re del selector. Define el nom bre de l estilo CSS.

Definicin de la regla . Permite establecer en donde se va a crear la hoja de

estilos, entre las siguientes do s opciones:

Slo este documento. Incrusta el estilo en el documento actual. Nuevo archivo de hojas de estilo. Crear una hoja de estilos externa, es

decir, un docum ento CSS (.css)

3. Una vez configuradas las anteriores opciones, haz clic en el botn Aceptar.

4. Se visualizar un cuadro de dilogo parecido al que se muestra abajo, en

donde se habrn de configurar todos las propiedades d el Estilo CSS.


51/122


5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic

sobre el botn Aceptar.

4.10 Editar estilos CSS.

Los estilos CSS que se crean en Dreamweaver permiten editar tanto las reglas

internas como las externas que se hayan aplicado en el docume nto.

Para editar una regla CSS , realiza:

1. Abre el panel Estilos CSS.

2. Selecciona la regla CSS que desees editar.

3. Haz clic en el botn Editar e stilo , del panel

Estilos CSS.

4. Realiza los cambios necesarios y haz clic en

Aceptar para conservar los camb ios realizados.


52/122


4.11 Vincular estilos CSS.

Cuando se quiere usar una hoja de estilos externa en un documento HTM L, lo que

nico que se tiene que hacer es vincular la hoja de estilos en el docume nto.

Para establecer vnculos en una ho ja de estilos CSS externa, realiza:

1. Abre el panel Estilos CSS.

2. En el panel Estilos CSS, haz clic en el botn Adjuntar h oja de estilos .

3. En el cuadro de dilogo Vincular hoja de estilos externa, configura las

siguientes opciones:

Arch./URL. Oprime el botn Examinar para localizar la hoja de estilos a

vincular.

Aadir como. Activa Vincular para establecer un vnculo entre el documento

actual y la hoja de estilos externa, o la opcin Importar para utilizar una hoja

de e stilo externa com o referencia.

Media. Especifica el medio de d estino de la hoja de estilo.

Vista previa. Permite verificar que la hoja de estilo aplica los estilos que se

desean en la pgina actual.

4. Por ltimo, pulsa sobre el botn Aceptar.


53/122


4.12 Mens usando hojas de estilos.

El elemento ese ncial en una Pgina We b es el uso de me ns, ya que gracias a ellos

permiten q ue el usuario pueda de splazarse en cada pgina que com pone el sitio We b.

Hoy en da la mayora de los mens se realizan con el uso de hojas de estilos y

html. Anteriormente era muy frecuente ver Pginas Web con mens hechos en Flash,

pero la desventaja era el tiempo en que tardaba de cargarse, por lo que terminaron

quedando obsoletos.

Para crear mens usando hojas de estilos, se deben crear dos documentos: un

docume nto HTM L (.html) y el otro una Hoja de estilos (.css).

El documento HTML deber contener los siguientes dos elementos:

Una capa y una lista sin ordenar, para e llo procede a realizar lo siguiente:

1. Primero crea una capa desde la vista Cdigo, escribiendo las etiquetas

.

2. A continuacin, camb ia a la vista Diseo y posiciona el puntero dentro del

rectngulo.

3. Activa el botn Lista sin ordenar del Inspector de propiedade s.

4. Procede a crear los mens principales, tecleando el nomb re del men despu s

de cada vieta. Ejemp lo:


54/122


55/122


7. Ahora debe rs colocar los hipervnculos a cada men y subm en, para ello, en

la vista Cdigo, teclea la etiqueta antes del texto de cada men

o subm en y al final escribe la etiqueta . Ejemplo:

8. En la etiqueta teclea los siguientes atributos y valores:

class="nav" id="me nu"


56/122


9. Dentro de la etiqueta tecla los siguiente atributo y valor:

class="nav"

10. Guarda el archivo HTML y crea una pgina CSS.

11. Tecle a los siguiente s estilos.

@charset "utf-8";/* CSS Docum ent */

* {

padding:0px;margin-top:inherit;

}

#header {padding-top: 120px;

}

/* Formato del m en comp leto */#menu {

margin:0 auto;width:1000px;font-family:Calibri;font-size:12px;text-align:center;

}
mailto:@charsetmailto:@charset


57/122


ul, ol {

}list-style:none;

.nav li a {

background-color:#000;

color:#fff;text-decoration:none;padding:10px 15px;display:block;

}

.nav li a:hover {

text-shadow: 0 0 1px brown;background-color:#434343;

}

.nav > li { float:left;

width:140px;}

.nav li ul { display:none;position:absolute;min-width:140px;

text-align:left;}

/* Mostrar submenus */.nav li:hover > ul {

display:block;}

.nav li ul li {position:relative;

}

.nav li ul li ul {

right:-140px;top:0px;

}


58/122


12. El resultado ser el siguiente:

13. Las siguientes propiedades de tipo CSS te ayudarn a definir mejor las

propiedades del men:

Definicin de propiedades de tipo CSS

Font-family: Establece la familia de fuentes (o serie de fam ilias) del estilo. Font-size : Define el tamao del texto. Font-style : Especifica normal, italic u oblique com o estilo de la fuente. Line-height: Establece el alto de la lnea en la que se coloca el texto Text-decoration: Aade subrayado, sobreimpresin o tachado al texto o

hace que el texto parpadee.

Font-weight : Aplica una cantidad especfica o relativa de negrita a lafuente.

Font-variant: Establece la variante de versales en el texto. Text-transform: Convierte en mayscula la primera letra de cada palabra

de la seleccin o convierte todo en m aysculas o minsculas.

Color: Establece el color del texto.

Definicin de propiedades de fond o de estilos CSS

Background-color: Establece el color de fondo del elemento. Background-image : Establece la imagen de fond o para el elemento. Background-repeat : Determina si la imagen de fondo se repite y de qu

forma lo hace.


59/122


Background-attachment : Determina si la imagen de fondo est fija en suposicin original o se desplaza con el conte nido.

Background-position (X) y Background-position (Y): Especifican laposicin inicial de la imagen de fondo en relacin con el elemento.

Definicin de propiedades de bloque de estilos CSS

Word-spacing: Establece el e spacio adicional entre las p alabras. Letter-spacing: Aumenta o d isminuye el espacio entre letras o caracteres. Vertical-align : Especifica la alineacin vertical del elemento al que se

aplica.

Text-align : Establece cmo se alinear el texto dentro del elemento. Text-indent: Especifica la cantidad de sangra que se aplica a la primera

lnea de texto.

White-space: Determina de qu forma se gestiona el espacio en blancodentro de l elemento.

Display: Especifica si un elemento se muestra y, si e s as, cmo lo hace.

Definicin de las propiedades del cuadro d e estilos CSS

Width y Height: Establecen el ancho y alto del eleme nto. Float: Determina q u lado de otros elementos, como texto, Div PA, tablas,

etc., flotar alrededor de un elemento.

Clear: Define los lados que no permiten elementos PA. Si aparece uneleme nto PA en el lado libre, el elemento con esta configuracin pasar a

situarse debajo de l.

Padding : Especifica la cantidad de espacio entre el contenido de uneleme nto y su borde (o el margen si no hay ningn borde).

Margin: Especifica la cantidad de espacio entre el borde de un elemento(o el relleno si no hay borde) y otro elemento.


60/122


Igual para todo: Establece las mismas propiedades de margen para Top,Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e

izquierda respectivamente de l eleme nto al que se aplica.

Definicin de propiedades de borde de estilos CSS

Style: Establece el aspecto del estilo del borde. Igual para todo: Establece las mismas propiedades de e stilo de bo rde para

Top, Right, Bottom y Left.

Width: Especifica el grosor del bo rde del elemento. Igual para todo : Establece el mismo bo rde para Top, Right, Bottom y Left. Color: Establece el color del borde: Puede especificar colores distintos

para cada lado, pero su visualizacin depender del navegado r.

Igual para todo: Establece el mismo color de borde para Top, Right,Bottom y Left.

Definicin de las propiedade s de lista de estilos CSS

List-style-type: Establece el aspecto de vietas o nm eros. List-style-image: Permite especificar una imagen personalizada para

vietas.

List-style-Position : Determina si el eleme nto de texto d e la lista se ajusta auna sangra (outside) o si el texto se ajusta al margen izquierdo (inside).

Definicin de las propiedades de po sicin de estilos CSS

Position: Determina cmo deber colocar el navegador el elementoseleccionado. Ofrece las opciones siguientes:

- Absolute: coloca el contenido utilizando las coordenadas introducidas

en los cuadros Placement en relacin con el ascendente ms prximo

con posicin absoluta o relativa o, si no hay ningn ascendente con


61/122


posicin absoluta o relativa, con la esquina superior izquierda de la

pgina.

- Relative: coloca el bloque de contenido utilizando las coordenadas

introducidas en los cuadros Placement en relacin con la posicin del

bloque en el flujo de texto del documento.

- Fixed: coloca el contenido utilizando las coordenadas introducidas en

los cuadros Placement en relacin con la esquina superior izquierda del

navegador.

- Static: coloca el contenido en su ubicacin en el flujo de te xto. Esta es

la posicin predeterminada de todos los elementos HTML que pueden

colocarse.

Visibility: Determina el estado inicial de visualizacin del contenido. Lavisibilidad predeterminada de la etiqueta body es visible. Seleccione una

de las siguientes opciones de visibilidad:

- Inherit: hereda la propiedad de visibilidad del padre del contenido.

- Visible : muestra el contenido, independientemente del valor del

contenido padre.

- Hidden: no muestra el contenido, independientemente del valor del

contenido padre.

Z-Index: Determina el orden de apilamiento del contenido. Los elementoscon un ndice z superior aparecen por encima de los elementos con un

ndice z inferior (o sin ndice z). Los valores pueden ser positivos o

negativos.

Overflow : Determina lo que debe ocurrir si el contenido de un contenedor(por ejemplo, una DIV o una P) supera el tamao de ste. Estas

propiedad es controlan la ampliacin de la siguiente manera:

- Visible : aumenta el tamao del contenedor para que todo su

contenido sea visible. El contenedor se expande hacia abajo y hacia la

derecha.


62/122


- Hidden: mantiene el tamao del contenedor y recorta cualquier

contenido que no quepa. No hay barras de desplazamiento.

- Scroll: aade barras de desplazamiento al contenedor

independientemente de que el contenido exceda o no el tamao del

contenedor.

- Auto : presenta las barras de desplazamiento solamente cuando el

contenido de l contenedo r excede de sus lmites.

Placement: Especifica la ubicacin y el tamao del bloque de contenido. Clip: Define la parte del conte nido que se r visible.

Definicin de las propiedades de extensiones de e stilos CSS

Page-break-before: Efecta un salto de pgina al imprimir antes o despusdel ob jeto al que se ap lica el estilo.

Cursor: Cambia la imagen del puntero cuando ste se encuentra sobre elobjeto al que se ap lica el estilo.

Filter: Aplica efectos e speciales al objeto controlado po r el estilo, incluidosdesenfoque e inversin.


63/122

D UNIDA 5IMGENES.

5.1 Concepto de Imagen.

5.2 Insertar imge nes.

5.3 Insertar marcadores de posicin de imagen.

5.4 Propiedades de imgenes.

5.5 Image n de sustitucin (Rollover).

5.6 Objetos inteligentes.


64/122


5.1 Concepto de Imagen.

IMGENES.

Una imagen es el grfico vectorial o no vectorial, que muestra una presentacin

visual de algo en formato d igital.

5.2 Insertar imgenes.

Cuando se insertan imgenes en Dreamweaver, el programa genera una

referencia del archivo de im agen.

Para insertar imgenes en Dreamweaver, realiza:

1. Posicinate en el lugar donde desees colocar la imagen.

2. Despus realiza cualquiera de los siguientes opciones, para abrir el cuadro de

dilogo Seleccionar origen de imag en:

A) Metacomando < Ctrl + Alt + I >.

B) Panel Insertar Categora Comn Imagen.C) Men Insertar Imagen .

3. En el cuadro de dilogo abierto, selecciona la imagen que desees insertar en

el documento.


65/122

Unidad 5 Imgenes 57

4. Una vez selecciona la imagen, haz clic en Aceptar.

5. Se mostrar una ventana emergente que te preguntar si deseas crear una

copia del archivo en la carpeta del sitio, pulsa en el botn S.

Teclea el nombre de la imagen o d eja el nombre que se m uestra por default.

6. Haz clic en Guardar.

Si se ha activado el cuadro de dilogo Preferencias, aparecer el cuadro de

dilogo Atributos de accesibilidad de la etiqueta de imagen , donde podrs

configurar:

- Texto alternativo. Se emplea para anotar un texto en caso de que no

se mue stre la imagen en el navegador.

- Descripcin larga. Anota la ubicacin de un archivo, que aparecer

cuando el usuario haga clic en la imagen o en el cono de carpeta para

desplazarse hasta el archivo.

7. Por ltimo haz clic en Aceptar, para insertar la imagen.


66/122


5.3 Marcadores de posicin de imagen.

Los marcadores de posicin de imagen son grficos que se utilizan hasta que el

grfico de finitivo est listo para su incorporacin al sitio Web .

Para insertar marcadores de po sicin de imagen, realiza:

1. Sitate en el lugar del documento donde desees colocar el marcador de

posicin de imag en.

2. Despus realiza cualquiera de las siguientes opciones, para abrir el cuadro de

dilogo Marcador de posicin de imagen.

A) Men Insertar Objetos de imagen Marcador de posicin de imagen.B) Categora Comn del panel Insertar, haz clic sobre el men Imgenes y

selecciona el cono Marcador de posicin de imagen.

3. En el cuadro de dilogo abierto, selecciona el tamao y color del marcador, y

asgnale u na etiqueta de texto.

4. Para finalizar, haz clic en Aceptar.

Sustitucin de un M arcador de posicin de imagen.

Para pode r actualizar el origen de la im agen, realiza:

1. Da doble clic sobre el marcador de posicin de imagen o del Inspector de

propiedades, haz clic en el cono de Carpeta situado junto al campo de

Origen.


67/122

Unidad 5 Imgenes 59

2. Se abrir el cuadro de dilogo Seleccionar origen de imagen, ah

selecciona la imagen que desees remplazar en el marcador de posicin de

imagen.

3. Por ltimo, presiona el botn Aceptar.

Nota: Cuando se visualice en el navegador, el texto de etiqueta y tamao nomostrarn.

5.4 Propiedades de imgene s.

Para modificar las propiedades de las imgenes, utiliza el Inspector de

propiedades; una vez que tengas la imagen seleccionada .


68/122


1

85 12

413

10

711

3

2 9

6

1. ID. Asigna un nombre como identificador para usarlo despus como

comportamiento.

2. Mapa. Permite asignar una etique ta y crear un mapa de im agen.

3. Herramientas de Zona interactiva. Permite crear zonas en donde el usuario

pueda interactuar con la imagen.

4. Origen. Mue stra la ubicacin de la imagen.

5. Vnculo. Especifica un hipervnculo a la im agen.

6. Destino. Especifica el marco o la ventana donde se cargar la pgina vinculada.

7. Original. Permite reemplazar la imagen actual por otra im agen.

8. Alt. Asigna un texto alternativo en caso de q ue no se mue stre dicha imagen.

9. Herramientas Editar. Permite editar la imagen para m ejorar su presentacin.

10. An. Espe cifica el ancho de la imagen.


69/122

Unidad 5 Imgenes 61

11. Alt. Especifica el alto de la imagen.

12. Alternar restriccin de tamao . Activa esta opcin en caso de querer restringir

proporcionalmente el tamao de la imagen.

13. Clase. Asigna un estilo CSS creado con ante rioridad.

5.5 Imagen de sustitucin (Rollover).

Una imagen de sustitucin es aquella que, al visualizarse en un navegador,

cambia cuand o el puntero se posiciona sobre ella.

Para crear una imagen de sustitucin se requieren dos imgenes: la imagen

principal (la que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la

que se muestra al posicionar el puntero sobre la imagen principal). Ambas imgenes

deben tener el mismo tamao. Si tienen tamaos distintos, Dreamweaver cambia el

tamao d e la segunda imagen p ara que se ajuste a las propiedades de la primera.

Las imgenes de sustitucin estn automticamente configuradas para que

respondan al evento onMouseOver.

Para crear una imagen de sustitucin, realiza:

1. Posiciona el puntero en el lugar donde deseas que aparezca la imagen de

sustitucin.

2. Despus realiza cualquiera de las siguientes opciones, para abrir el cuadro de

dilogo Insertar imagen d e sustitucin.

A. Categora Comn del panel Insertar, haz clic en el men Imgenes y

selecciona el icono Imagen de sustitucin.

B. Men Insertar Objetos de imagen Imagen de sustitucin.3. Configura las opciones y haz clic en Aceptar.


70/122


71/122

Unidad 5 Imgenes 63

Para inserta un objeto inteligente, realiza:

1. Sita el puntero en el lugar de la pgina donde desees insertar el objeto

inteligente (la imagen).

2. Despus realiza cualquiera de los siguientes opciones, para abrir el cuadro de

dilogo Seleccionar origen de imag en:

A) Metacomando < Ctrl + Alt + I >.

B) Panel Insertar Categora Comn Imagen.C) Men Insertar Imagen .D) Tambin puedes arrastrar el archivo PSD a la pgina desde el panel

Ar chivos si se almacenan los archivos de Photoshop en el sitio Web (s es

as, om ite el paso siguiente).

3. Localiza el archivo de imagen PSD de Photoshop en el cuadro de dilogo

Seleccionar origen de imagen .

4. En el cuadro de dilogo Optimizacin de imgenes que aparece, ajusta la

configuracin de optimizacin como se a necesario y haz clic en Aceptar.


72/122


73/122


74/122


75/122


76/122


.

6.3 Crear hipervnculos.

Para crear hipervnculos en Dreamweaver CS6, realiza lo siguiente:

1. Selecciona el texto o imagen y del Inspector de propiedades da clic en el cuad ro

de texto Vnculo

2. Escribe la ruta y el nombre del archivo del docum ento o URL en el cuadro de

texto Vnculo o haz clic en la carpeta y selecciona el archivo (si se desea

realizar una referencia absoluta).

3. En el men desplegable Destino, selecciona una ub icacin para abrir la pgina.

Otra forma de crear hipervnculos es desde el men Insertar Hipervnculo. Semostrar el cuadro de dilogo Hipervnculo, donde debers especificar las siguientes

propiedades:

Texto. Especifica el texto que se emplear com o vnculo. Vnculo. Asigna la ruta del hipe rvnculo. Destino. Especifica la ubicacin p ara abrir el archivo. Ttulo . Escribe un ttulo de pgina para el hipe rvnculo. Clave de acceso. Permite introducir una tecla para activar el hipervnculo

en el navegad or con dicha tecla.

ndice de fichas. Introduce un nmero para el orde n de fichas.


77/122

Unidad 6 Hipe rvnculos 69

6.4 Destino de los hipervnculos.

El destino del hipervnculo determina en q u ventana va a ser abierto el vnculo.

Esto puede especificarse desde el Inspector de propiedades, categora HTML a travs de

la opcin Destino , o en el cuadro de dilogo Hipervnculo del men Insertar Hipervnculo.

_blank carga el documento vinculado en una nueva ventana sin nombre del

navegador.

new carga el documento vinculado en una nueva ventana de l navegador.

_parent carga el documento vinculado en el marco padre o en la ventana padre

del marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado,

el docume nto vinculado se cargar en la ventana comp leta del navegador.

_self carga el documento vinculado en el mismo marco o la misma ventana que

el vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso

especificarlo.

_top carga el documento vinculado en la ventana completa del navegador,

eliminando de esta forma to dos los marcos.


78/122


6.5 Anclaje con nombre.

Los anclajes con nombre permiten establecer marcadores en un documento, que

por lo regular se colocan en un tem a espe cfico o en la parte supe rior del docum ento.

Para crear un anclaje con nombre, realiza lo siguiente:

1. Coloca el cursor en el lugar donde se desea insertar el anclaje con nom bre.

2. Despus realiza alguno de los siguientes procedimientos:

A) Men Insertar Anclaje con nombre.B) Metacomando < Control + Alt + A >.

C) Del panel Insertar, Categora Comn, haz clic en el botn Anclaje con

nombre.

3. En el cuadro Nombre de anclaje, escribe un nombre para el anclaje y haz clic

en Aceptar. (El nombre del anclaje no puede contener espacios.)

El marcador del anclaje aparecer en el punto de insercin.

Para usar el anclaje con nom bre en un hip ervnculo, realiza:

1. Selecciona el texto o imagen que servir como anclaje.

4. Despus realiza alguno de los siguientes procedimientos:

A) Men Insertar Hipervnculo.B) Del panel Insertar, Categora Comn, haz clic en el botn Hipervnculo.

C) Del Inspector de propiedade s, posicinate en e l cuadro de texto Vnculo.


79/122


2. En cualquiera de las tres opciones anteriores, desplegar el men contextual

de Vnculo y elige el marcador de

texto a em plear en el hipervnculo.

Nota: Todo los anclajes con nombre

aparecern con el signo # alprincipio del nombre de anclaje asignado.

6.6 Vnculo a correo electrnico.

Cuando e l usuario hace clic en un vnculo de correo electrnico se abre una nuev a

ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador

del usuario). En la ventana de me nsaje de correo electrnico, el cuadro Pa ra se

actualiza automticamente con la direccin especificada en el vnculo del mensaje de

correo electrnico.

Para crear un vnculo d e correo e lectrnico, realiza:

1. Sitate en el men Insertar Vnculo de co rreo electrnico .O del panel Insertar de la categora Comn, haz clic en el botn Vnculo de

correo electrnico.

2. Se mostrar el cuadro de dilogo Vnculo de co rreo electrnico, en donde se

habr de esp ecificar las siguientes propiedades:

Texto. Define el texto que se mo strar como vnculo de correo electrnico.

Correo electrnico. Define el correo electrnico al cual se va a mandar la

informacin.


80/122


3. Por ltimo, haz clic en Aceptar.

Otra forma de crear un hipervnculo a un correo electrnico, es desde el Inspector

de propiedades, en la opcin Vnculo debers teclearla palabra MAILTO, seguida de dos

puntos y el correo electrnico (MAILTO:[email protected] m).

6.7 Men de salto.

Un men de salto es un m en emergente de un documento que pueden ver los

visitantes del sitio y que ofrece vnculos con documentos o archivos. Puedes crear

vnculos con docume ntos del sitio Web , docume ntos de otros sitios, correo electrnico,

grficos o cualquier tipo d e archivo que se pue da abrir en un navegado r.

Cada opcin de un men de salto est asociada a un URL . Cuando los usuarios

eligen una opcin, se les rem ite al URL asociado. Los mens d e salto se insertan de ntro

del objeto de form ulario M en de salto.

Un men de salto puede contener tres componentes:

Opcional: un mensaje de seleccin de men, como la descripcin de una

categora para los elementos del men o instrucciones, como Elija una

opcin.

Obligatorio: una lista de elementos de m en vinculados: el usuario elige una

opcin y se abre un docum ento o un archivo vinculado.

Opcional: un botn Ir.

Para insertar un men de salto, realiza:

1. Sita el punto de insercin en la ventana de documento.

2. Luego realiza alguno de los siguientes procedimientos:
mailto:[email protected]:[email protected]


81/122


82/122


4. Para finalizar, haz clic en Aceptar.

6.8 Zonas interactivas.

Un mapa de imagen es una imagen que se ha dividido en regiones o zonas

interactivas . Cuando e l usuario hace clic en una zona interactiva, se realiza una accin.

Al insertar un mapa de imagen del lado d el usuario, se crea una zona interactiva y,

a continuacin, se define un vnculo que se abrir cuando el usuario haga clic en la zona

interactiva .

Para crear una zona interactiva, realiza:

1. Selecciona la imagen a la que desees aplicar la zona interactiva.

2. En el cuadro de texto Mapa del Inspector de propiedades, introduce un

nombre exclusivo para el mapa de imagen.


83/122


3. Seleccio na la herramienta circular, rectangular o poligonal, segn sea el caso

y arrastrando el puntero sobre la im agen crea la zona interactiva.

4. Una vez seleccionada la zona interactiva, en el cuadro Vnculo , escribe el

hipervnculo o haz clic sobre el cono Carpeta para localizar y seleccionar el

archivo que deb er abrirse cuando el usuario haga clic en la zona interactiva.

5. En el cuadro de lista desplegable Destino, selecciona la ventana o marco

donde se abrir el vnculo.

6. En el cuadro de texto Alt, escribe el texto alternativo en caso de que no se

muestre la image n en el navegador.

7. Al terminar de definir todas las zonas interactivas del mapa de imagen, da clic

en un rea en blanco del docume nto para cambiar el Inspector de propiedade s.


1. Extensiones de imgenes que permite Dreamw eaver insertar al docume nto.

2. Insertar Imgenes HTM L de Fireworks.

3. Uso de zonas interactivas en una imagen insertada en Dreamweave r.


84/122

D UNIDA 7D ISEO DE LA PGINA W EB.

7.1 Concepto de Tabla.

7.2 Creacin de tablas.

7.3 Formato de tablas y celdas.

7.4 Insertar filas y colum nas.

7.5 Eliminar filas y column as.

7.6 Combinar o dividir celdas.

7.7 Anidar tablas.

7.8 Orden ar tablas.

7.9 Concepto de marcos.

7.10 Crear marcos.

7.11 Seleccionar marcos.

7.12 Guardar marcos.

7.13 Propiedad es de los marcos.

7.14 Hipervnculos en marcos.


85/122


86/122


87/122

Unidad 7 Diseo de la Pgina Web 79

7.3 Formato de tablas y celdas.

El formato de las tablas y de las celdas se especifica a travs del Inspector de

propiedades. Ambos elementos contienen diferentes atributos

Para dar formato a la tabla , posiciona el puntero del mo use sobre las esquinas de

la tabla y luego haz clic izquierdo.

61

4

2

3 7

85

1. Id de tabla. Especifica un ID para la tab la.

2. Filas y Cols. Nme ro de filas y columnas q ue tendr la tabla.

3. An. El ancho d e la tabla en p xeles o porcentaje.

4. Rell. Celda . Determina el nmero de p xeles entre el contenido de una celda y

los lmites de la mism a.

5. Esp. Celda. Nmero de p xeles entre celdas de ta bla contiguas.

6. Alinear. Determina dnde aparecer la tabla en relacin con otros elementos

del mism o prrafo, como por ejem plo texto o imgenes.

7. Borde. Especifica el ancho en pxeles de los bordes de la tabla.

8. Clase. Establece una clase CSS en la tab la.


88/122


Para aplicar formato a las celdas, selecciona una celda, rengln o columna y

mod ifica las propiedades q ue desees.

16

2 7

4 5

38

1. Comb inar celdas. Combina las celdas, filas o columnas seleccionadas para

crear una sola celda.

2. Dividir celda. Divide una celda para crear dos o ms celdas.

3. Horiz. Especifica la alineacin horizontal del contenido de una celda, fila o

columna.

4. Vert. Especifica la alineacin vertical del contenido de una celda, fila o

columna.

5. An (Ancho) y Al (Alto). Configura el ancho y alto de las celdas seleccionadas

en pxeles o com o porcentaje del ancho o alto total de la tabla.

6. No aj. Impide el ajuste de lnea, mantenindose todo e l texto de una celda en

una sola lnea. Cuando la opcin No aj. est activada, las celdas se adaptarn

para incluir todos los datos a medida q ue se introducen o pegan en una celda.


89/122


7. Encabezado. Aplica a la celda seleccionada el formato de celdas de

encabezado de tabla. De forma predeterminada, el contenido de las celdas

de encab ezado de la tabla aparecer en neg rita y centrado.

8. Fondo. El color de fondo de una celda, columna o fila elegido mediante el

selector de color.

7.4 Insertar filas y columnas.

Para aadir filas y columnas a la tabla, realiza:

1. Posicinate en la celda de acuerdo donde quieras insertar la fila o columna.

2. Haz clic en el men Modificar Tabla Insertar filas o columnas. Opresiona los Metacomandos:

< Ctrl + M > = Insertar fila.

< Ctrl + Shift + A > = Insertar columna.

3. Si se elige la opcin Insertar filas o columnas, se mostrar el cuadro de

dilogo Insertar filas o columnas; donde se habr de e specificar el nmero

de filas o columnas y el lugar donde se insertarn.

4. Una vez configurada la ventana, pulsa sobre el botn Aceptar.


90/122


7.5 Eliminar filas y columnas.

Para eliminar una fila o una columna, haz clic en una celda que desees eliminar y

selecciona el men Modificar Tabla Eliminar fila o Eliminar column a, segn sea elcaso.

Tambin puedes seleccionar una fila o columna completa y luego dar clic en el

men Edicin Borrar o presionar la tecla < Supr >.

7.6 Combinar o dividir celdas.

Dreamweaver, incluye herramientas que permiten aumentar o disminuir el

nmero de filas o columnas que o cupa una celda.

Para combinar celdas en una tabla, primero se deben tener seleccionadas las

celdas contiguas a combinar. Luego posicionarse en el men Modificar Tabla Combinar celdas.

Otra opcin es desde el botn Comb inar celdas del Inspector de propiedades

ampliado.

Para dividir una celda, haz clic en la celda y selecciona el me n Modificar Tabla Dividir celda.

O desde el botn Dividir celdas el Inspector de propiedades ampliado.

En el cuadro de dilogo Dividir celda, especifica cmo deseas dividirla.


91/122


92/122


93/122


Los marcos predefinidos se visualizan al momento de crear un nuevo documento

HTML, para ello, sitate en el men Archivo , opcin Nuevo. En el cuadro de dilogo

Nuevo documento selecciona la categora Pgina en blanco (Tipo de pgina) HTML yselecciona alguno de los diseos pred efinidos por Dreamweaver CS6.

Otra opcin para crear marcos es a

travs del men Insertar HTML Marcos.En dicha opcin se podr elegir el tipo de

marco que se desee insertar.


94/122


7.11 Seleccionar marcos.

Dreamweaver, ofrece un panel para seleccionar de la forma correcta y rpida los

marcos de nuestro documento. El panel Marcos proporciona una representacin grfica

de los marcos, mostrando la estructura del conjunto de marcos identificados por sus

nombres.

Para activar el panel Marcos, haz clic en el men Ventana Marcos o presiona e lMetacomando < Shift + F2 >.

7.12 Guardar marcos.

Para guardar de la forma correcta los marcos creados en el documento HTML,

realiza lo siguiente:

1. Dirgete al me n Archivo y selecciona la opcin Guardar todo.

2. Se mostrar el cuadro de dilogo Guardar como, en dicho cuadro deberemos

especificar el nombre del marco pero, antes de asignarle nombre deberemos

fijarnos en el rea de trabajo de Dreamweaver ya que ser la clave principal

para guardar de forma correcta los marcos.

Si se desplaza hacia a un lado el cuadro de dilogo se podr apreciar que se

encuentra seleccionado toda el rea de trabajo en un cuadro de lneas

inclinadas de color gris y negro.


95/122


96/122


97/122


98/122


99/122


100/122


FORMULARIOS.

8.1 Concepto de Formulario.

Los formularios son los elementos que se utilizan para la recoleccin de d atos del

usuario y se emplean muy cotidianamente para el registro de usuarios, comentarios,

inicio de sesiones, etc.

8.2 Crear formularios.

Para crear fo rmularios en Dreamweaver, realiza:

1. Haz clic en el men Insertar Formulario Formulario.O del panel Insertar Categora Formularios Formulario.

2. Se mostrar el siguiente recuadro en donde se habrn de ir insertando los

diferentes elementos que queram os usar en el formulario.

3. A continuacin configura las propiedades del formulario mediante el

Inspector de pro piedades.

5

2

3 6

4

1


101/122

Unidad 8 Formu larios 93

1. ID de formulario . Nom bre del formulario.

2. Accin. Especifica la pgina o el script que procesar los datos del

formulario.

3. Mtodo. Indica el mtodo que se emplear para transmitir los datos del

formulario al servidor. Puede tomar los siguientes valores:

- Predet. Utiliza el valor predeterminado (GE T) del navegador para

enviar os dato s del formulario al servidor.

- GET. Aade el valor al UR L que solicita la pgina.

- POST. Incrusta los datos del formulario en la peticin HTTP.

4. Tipo de codificacin. Especifica el tipo de codificacin de los datos

remitidos al servidor para su procesam iento.

5. Dest. Especifica la ventana en la que va a visualizar los datos devueltos por

el programa ejecutado.

6. Clase. Define un estilo creado con anterioridad.

4. Despus com ienza a insertar los objetos que desees usar en el formulario.

8.3 Objetos de los formularios.

Los objetos de formulario son me canismos que pe rmiten a los usuarios introducir

datos. Puede aadir a un formulario los

siguientes objetos de formulario:


102/122


103/122


104/122


105/122


8.3.5 Elemento Botn de opcin.

Representan opciones que se excluyen mutuamente. Cuando se selecciona un

botn de un grupo de botones de opcin, se desactivan todos los dems botones del

grupo (un grupo est formado por dos o ms botones que comparten el mismo nomb re).

8.3.6 Elemento Seleccionar (Lista/Men). Muestra valores de opciones en una

lista de desplazamiento que permite a los usuarios seleccionar varias opciones. La

opcin Lista muestra los valores de las opciones en un men que permite a los usuarios

seleccionar una sola opcin.

1 3 5

5

6

2 7


106/122


1. Seleccionar. Asigna un nombre al men. El nombre deb e ser exclusivo.

2. Tipo. Indica si al hacer clic en el men ste se despliega (opcin Men) o si

muestra una lista de elem entos por la que se puede desp lazar (opcin Lista).

3. Seleccione s (Slo en el tipo Lista). Indica si el usuario puede seleccionar

varios elem entos de la lista.

4. Alto (Slo en el tipo Lista). Establece el nmero de elementos que se

muestran en el men.

5. Valores de lista. Abre un cuadro de dilogo que permite aadir elementos a

un men de formulario:

A. Utiliza los botones ms (+) y menos (-) para aadir y quitar eleme ntos de

la lista.

B. Escribe texto para la etiqueta y un valor opcional para cada elemento de

men.

C. Usa los botones de flecha arriba y abajo para reorganizar los eleme ntos

de la lista.

6. Clase. Permite aplicar reglas CSS al objeto.

7. Seleccionado inicialmen te. Establece los elementos seleccionados en la lista

de forma predeterm inada. Haz clic en el elemento o los elementos de la lista.

8.3.7 Elemento Campo de archivo.

Permiten al usuario examinar los archivos de su ordenador y cargarlos como

datos de un formulario.


107/122


108/122


109/122


- Obligatorio. Determina que el campo no se debe quedar sin contestar.

- Cualquier cosa. Define que el campo es obligatorio, pero no tiene que

contener algn tipo de d ato determinado.

- Direccin de correo electrnico. Comprueba que el campo contenga el

smbolo de arroba (@ ).

- Nmero. Verifica que el cam po contenga slo caracteres num ricos.

- Nmero del. Comprueba que el campo contenga caracteres numricos

dentro de un rango espe cfico.

4. Cuando termines de configurar las opciones, haz clic en Aceptar.

8.5 Validacin de formularios usando HTML5.

El reciente lenguaje HTML5 incorpor un nuevo atributo llamado requiredque

obliga al usuario rellenar el eleme nto para poder enviar el formulario.

Dicho atributo se puede emplear en los anteriores objetos del formulario,

excepto en el elemento Lista/Men.


110/122

10


Cuando se coloca este atributo en alguno de los elementos del formulario y se

visualiza en el navegador, el usuario deber rellenar dicho campo sino se mostrar algo

parecido a la siguiente imagen:


1. Objetos de formularios dinmicos.

2. Formularios Spry.

3. Com portamientos JavaScript de Dreamw eaver CS6.


111/122

D UNIDA 9CAPAS.

9.1 Concepto de Capa.

9.2 Insertar capas.

9.3 Propiedades de las capas.

9.4 Hojas de estilos en las capas.


112/122


113/122

Unidad 9 Capas 105

9.3 Propiedades de las capas.

Las propiedades d e la capa se especifican desde el Inspector de propiedade s, pero

slo es posible especificar las propiedades de la Capa Div PA , ya que los otros d os tipos

de capas d ebern especificarse desde una Hoja de Estilos CSS .

38

1 4

6

7 10

9

5

2

1. Elemento CSS-P. Indica el nombre de la capa, que puede ser cambiado a travs

del panel Elementos PA o desde el cuadro de texto nomb re de la capa.

2. Desb. Controla cmo aparecen los elementos PA en un navegador cuando el

contenido desborda el tamao especificado del elemento PA, y puede tomar los

valores:

VISIBLE. Muestra todo el contenido de la capa, haciendo ms grande lacapa.

HIDDEN. Slo visualiza el contenido de la capa que quep a dentro de ella. SCROLL. Muestra la barra de desplazamiento, aunque el contenido de la

capa pued a ser visualizado totalmente

AUTO . Muestra la barra de desplazamiento cuando sea nece sario.


114/122


3. Izq y Sup. Especifican la posicin de la esquina superior izquierda del elemento

PA con respecto a la esquina superior izquierda de la pgina o del elemento PA

padre, si el elemento P A es anidado.

4. An y Al. Especifican el ancho y alto del elemento PA.

5. Clip . Define el rea visible (recorte) de un e lemento PA.

Especifica las coordenadas izquierda, superior, derecha e inferior para definir un

rectngulo en el espacio de coordenadas del elemento PA (contando desde la

esquina superior izquierda del elemento PA). El elemento PA se recorta de

mod o que slo se a visible el rectngulo especificado.

6. Z-Index. Determina el ndice z, u o rden de apilamiento, del elemento PA.

7. Vis. Especifica si el elemento PA es v isible inicialmente o no. Selecciona alguna de

las opciones siguientes:

DEFAULT. Es la opcin predeterminada que tenga el navegador, lamayora de los navegadores utilizan INHERIT (Heredada) de forma

predeterminada.

INHERIT. Muestra la capa mientras la capa a la que pertenece tambin seest mostrando

VISIBLE. Muestra la capa, aunque la capa a la que pertenece no se estviendo

HIDDEN. No muestra el contenido del elemento PA, independientementedel valor de l padre.

8. Im. Fondo. Especifica una imagen d e fondo para el elemento PA.

9. Col. Fondo. Especifica un color de fondo para el elemento PA. (Deja esta opcin

en blanco para especificar un fondo transparente).

10. Clase. Espe cifica la clase CSS utilizada para aplicar estilo al elemento PA.


115/122


116/122


117/122

Unidad 10 Elementos multimedia 109

10.1 Insertar Audio.

ELEMENTOS MULTIMEDIA.

Incorporar sonido a la Pgina Web no es muy recomendable, ya que en algunas

ocasiones el usuario que visita el sitio suele estar escuchando su propia msica cuando

se encuentran navega ndo en Internet, y esto p uede resultar molesto para el internauta.

Sin embargo, en Dreamweaver es posible insertar diferentes tipos de audio, com o

.wav, .midi y .mp3, entre otros. Los factores que hay que tener en cuenta antes de optar

por un formato y un mtodo para aadir sonido son: su finalidad, el tipo de usuarios a

los que est destinado, el tam ao de archivo, la calidad de sonido y las diferencias en los

navegadores.

10.1.1 Etiqueta < AU DIO >.

En Dreamweaver CS6 se incorpor el uso de nuevas etiquetas de HTML5 que

versiones anteriores al programa no contaba con ellas, unas de estas etiquetas es la de

incorporar audio a la Pgina We b y sus etiquetas son la de ; cuando

se desea generar el cdigo HTML manualmente se deber emplear dicha etiqueta y sus

respectivos atributos a em plear.

10.1.2 Comando Plug-in.

Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido

slo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo

de sonido elegido.

Siempre que uses sonido en tu Pgina Web, proporciona un control para

desactivar o activar la reproduccin d e sonido, por si los visitantes no desean e scuchar el

contenido de audio.

Para insertar audio en el docum ento, realiza:

1. Sitate en el lugar donde deseas colocar el archivo y luego realiza alguno de

los siguientes procedim ientos:


118/122


A) En la categora Comn del panel Insertar, haz clic en el botn Media

y selecciona el icono Plug-in del men desplegable.

B) Men Insertar Media Plug-in .2. Localiza el archivo de audio y haz clic en Aceptar.

3. Especifica el ancho y el alto, introduciendo los valores en los cuadros de

texto correspondientes del Inspector de propiedades o cambiando el

tamao del marcador de posicin del plug-in en la ventana de documento.

Estos valores determinan con qu tamao se muestran los controles de

audio en el nave gador.


119/122

Unidad 10 Elementos multimedia 111

10.2 Insertar Video.

Algunas ocasiones es necesario colocar video(s) en Pginas Web, ya sea para

ilustrar algo o simplem ente una atraccin para el internauta.

Los formatos de vdeo que suelen utilizarse en Internet son los formatos: .avi,

.mpeg y .mov .

Sin embargo, hay que tomar en cuenta el peso del archivo, ya que entre ms pese

el archivo de video, mayor ser el tiempo en q ue va a descargarse y mostrarse en el sitio

Web.

10.2.1 Etiqueta .

Otra de las etiquetas nuevas de HTML5 es la etiqueta < VIDEO > que remplaz a la

etiqueta , ambas etiquetas tienen la misma funcin de insertar al documento

un video, lo que llega a cambiar en amb as etiquetas son sus propiedad es.

10.2.2 Comando Plug-in.

Para insertar un archivo de vdeo en Dreamweaver, realiza:

1. Sitate en el lugar donde de seas colocar el archivo y luego realiza alguno de

los siguientes procedim ientos:

A)

cursodreamweavercs6-130110223812-phpapp01

Documents

Transcript of cursodreamweavercs6-130110223812-phpapp01