cur so dreamweaver cs 6

7/28/2019 Cur So Dreamweaver Cs 6

1/124


2/124

ii Diseo de Pginas Web (Dreamweaver CS6)

2013. Derechos Reservados Daniel Olalde Soto.


3/124

Contenido iii

Sobre este libro

Usted es libre de:

Copiar, distribuir y comunicar pblicamente la presente obra. Realizar obras derivadas.

Bajo las condiciones siguientes:

Reconocimiento. Debe reconocer los crditos de la obra de la maneraespecificada por el autor o licenciador.

No comercializar. No puede utilizar esta obra para fines lucrativos.

Si deseas aportar sugerencias, comentarios, crticas o informar sobre errores,

puedes enviar un mensaje a la siguiente direccin electrnica

[email protected].
mailto:[email protected]:[email protected]:[email protected]


4/124

iv Diseo de Pginas Web (Dreamweaver CS6)



5/124

Contenido v

CONTENIDO

1 Introduccin a Dreamweaver CS6.

1.1. Qu es Dreamweaver?1.2. Acceso a Dreamweaver.1.3. Ambiente de Dreamweaver.1.4. Vistas del documento.

1.4.1. Vista Cdigo.1.4.2. Vista Diseo.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 documento.1.6. Abrir un documento.1.7. Guardar un documento.1.8. Importar y exportar documentos.1.9. Cerrar y salir de Dreamweaver.

1

2

2

3

4

9

9

10

11

12

2 rea de trabajo en Dreamweaver CS6.

2.1. Inspector de propiedades.2.2. Barra de herramientas Documento.2.3. Barra de herramientas Estado.2.4. Barra de herramientas Navegacin con navegador.2.5. Panel Insertar.2.6. Panel Estilos CSS.

13

14

14

15

15

16

17

3 Configurar un sitio en Dreamweaver.

3.1. Concepto de Sitio.3.2. Tipos de Sitios en Dreamweaver.

19

20

20


6/124

vi Diseo de Pginas Web (Dreamweaver CS6)


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

21

22

22

2425

4 Formato a la Pgina Web.

4.1 Propiedades de la pgina.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 Ttulo / Codificacin.4.1.6 Categora Imagen de rastreo.

4.2 Comentarios.4.3 Objeto Fecha.4.4 Reglas horizontales.4.5 Caracteres especiales.4.6 Listas.4.7 Formato al texto.

4.7.1 Men Formato.4.8 Concepto de Estilo CSS.4.9 Crear estilos CSS.

4.9.1 Propiedades CSS.4.10 Editar estilos CSS.4.11 Vincular estilos CSS.4.12 Mens usando hojas de estilos.

27

28

33

33

34

35

36

37

40

41

43

44

45


7/124

Contenido vii

5 Imgenes.

5.1. Concepto de Imagen.5.2. Insertar imgenes.5.3. Marcadores de posicin de imagen.5.4. Propiedades de imgenes.5.5. Imagen de sustitucin (Rollover).5.6. Objetos Inteligentes.

55

56

56

5859

61

62

6 Hipervnculos.

6.1. Concepto de Hipervnculo.6.2. Tipos de rutas de los vnculos.

6.2.1. Rutas absolutas.6.2.2. Rutas relativas al documento.6.2.3. Rutas relativas a la raz del sitio.

6.3. Crear hipervnculos.6.4. Destino de los hipervnculos.6.5. Anclaje con nombre.6.6. Vnculo a correo electrnico.6.7. Men de salto.6.8. Zonas interactivas.

66

67

67

68

69

70

71

72

74

7 Diseo de la Pgina Web.

7.1 Concepto de Tabla.7.2 Creacin de tablas.7.3 Formato de tablas y celdas.7.4 Insertar filas y columnas.7.5 Eliminar filas y columnas.7.6 Combinar o dividir celdas.7.7 Anidar tablas.7.8 Ordenar tablas.

76

77

77

79

81

82

82

83

83


8/124

viii Diseo de Pginas Web (Dreamweaver CS6)


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

84

84

86

8688

89

8 Formularios.

8.1 Concepto de Formulario.8.2 Crear formularios.8.3 Objetos de los formularios.

8.3.1 Elemento Campo 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 Campo de archivo.8.3.8 Elemento Campo de imagen.8.3.9 Elemento Campo oculto.

8.4 Validacin de formularios aplicando JavaScript.8.5 Validacin de formularios usando HTML5.

91

92

92

100

101

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.

103

104

104


9/124

Contenido ix

9.3 Propiedades de la capas.9.4 Hojas de estilos en las capas.

105

107

10 Elementos multimedia.

10.1 Insertar Audio.10.1.1 Etiqueta .10.1.2 Comando Plug-in.

10.2 Insertar Video.10.2.1 Etiqueta .10.2.2 Comando Plug-in.

10.3 Archivo SWF.10.4 Componente FLV.10.5 Pelculas Shockwave.10.6 Control ActiveX.10.7 Elemento Applet.

108

109

111

112

113114

114

114


10/124


11/124

INTRODUCCIN A DREAMWEAVER CS6.

1.1 Qu es Dreamweaver?1.2 Acceso a Dreamweaver.1.3 Ambiente de Dreamweaver.1.4 Vistas del documento.1.5 Crear un nuevo documento.1.6 Abrir un documento.1.7 Guardar un documento.1.8 Importar y exportar documentos.1.9 Cerrar y salir de Dreamweaver.

UNIDAD 1


12/124

2 Diseo de Pginas Web (Dreamweaver CS6)


INTRODUCCIN A DREAMWEAVER CS6.

1.1 Qu es Dreamweaver?Dreamweaver es el software para el desarrollo y diseo de Pginas Web

adaptables para diversos dispositivos electrnicos.

1.2 Acceso a Dreamweaver.Para poder acceder a Dreamweaverexisten diversas formas, pero las ms usuales

son:

OPCIN 1:

1) Abre el men Metro de Windows (Presionado la tecla de < Windows >).2) Desplzate por los programas y haz clic en la aplicacin AdobeDreamweaver

CS6.

OPCIN 2:

1) Metacomando < Win + R >.2) Teclea la palabra Dreamweaver.3) Pulsa la tecla < Enter >.


13/124

Unidad 1 Introduccin a Dreamweaver CS6 3

1.3 Ambiente de Dreamweaver.

1.4 Vistas del documento.Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el

contenido del documento, para as usar la vista con la que ms nos agrade trabajar.

Botn de laaplicacin

Barra de mens

Conmutador deespacios de trabajo

Barra de herramientasEstado

Inspector de propiedades

Paneles

Barra de herramientas Documento

rea de trabajo

Pestaas del documento


14/124



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 men 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 documento con el que se est trabajando.


15/124


1.4.2 Vista Diseo.

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

empleando cualquiera de las siguientes opciones:

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

2. Sitate en el men Ver y selecciona la opcin Diseo.

1.4.3 Vista Dividir.

Separa en dos el rea de trabajo, visualizando en una parte el 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 VerCdigo y Diseo.


16/124



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 navegador. Activa la Vista

En vivo, desde:

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

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


17/124


1.4.5 Vista Cdigo en vivo.

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

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

Una vez que se haya activado la VistaEn Vivo, es posible activar la VistaCdigo 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 VerCdigo en vivo.


18/124



1.4.6 Vista previa en el navegador.

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

equipo (por lo regular es el navegador que se tiene por default).

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

cono de la Barra de herramientas Documento.


19/124


1.5 Crear un nuevo documentoPara crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente:

1. Men ArchivoNuevo.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 documentoPara abrir un documento en Dreamweaver CS6, realiza lo que se seala a

continuacin:

1. Men ArchivoAbrir.2. O Metacomando < Ctrl + O >.Una vez realizado alguno de los procedimientos anteriores aparecer el cuadro

de dilogoAbrir, donde debers seleccionar el documento a abrir.


20/124



1.7 Guardar un documentoPara guardar un documento en Dreamweaver CS6, presiona el Metacomando

< Ctrl + S > o haz clic en el men ArchivoGuardar.

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.


21/124


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. Dreamweavercrea un nuevo documento 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 base de datos) en formato de texto delimitado.


22/124



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 Dreamweaverla convierte en cdigo HTML.

Para importar cualquierdocumento a Dreamweaver, realiza:

1. Haz clic en el men ArchivoImportar Selecciona la opcin delarchivo que desees importar.

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

Datos de plantilla como XML. Tabla.

Para exportar la pgina Web, realiza lo siguiente:

1. Haz clic en el men ArchivoExportar Selecciona la opcin delarchivo que desees 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 ArchivoCerrar.

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 Dreamweaver desde sus comienzos hasta la actualidad.2. Novedades de Dreamweaver CS6.3. Requisitos para instalar Dreamweaver CS6.4. Concepto de Archivo XML.


23/124

REA DE TRABAJO EN DREAMWEAVER CS6.

2.1 Inspector de propiedades.2.2 Barra de herramientas Documento.2.3 Barra de herramientas Estado.2.4 Barra de herramientas Navegacin con navegador.2.5 Panel Insertar.

UNIDAD 2


24/124



REA DE TRABAJO EN DREAMWEAVER 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 Dividir

Ayudas visuales

Vista En vivoValidacin W3C

Comprobar compatibilidad con navegadoresAdministracin de archivos

Vista previa

Multipantalla

Ttulo de la pgina web

Vista CdigoVista Diseo

Actualizar documento


25/124

Unidad 2 rea de trabajo en Dreamweaver CS6 15

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

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

2.4 Barra de herramientas Navegacin con navegador.La barra de herramientas Navegacincon navegador se activa en la Vista en vivo

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

Selector de etiquetas

Herramienta seleccionar

Herramienta mano

Herramienta ZoomTamao mvil

Establecer nivel de aumentoTamao tableta

Tamao escritorio

Tamao del documento y tiempo de descargar estimadoTamao de ventana

Indicador de codificacin

Vista Cdigo en vivo

Activar modo de inspeccin

Controles de navegadorOpciones de la vista en vivo

Cuadro de direccin


26/124



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 Insertarest organizado en las categoras siguientes:

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

frecuencia, como las imgenes 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 de 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 Spry, incluidos objetos de datos y widgets de Spry.

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 repetidas y la administracin de clases CSS.


27/124

Unidad 2 rea de trabajo en Dreamweaver CS6 17

Categora Texto. Permite insertar diversas etiquetas de formato de textoy 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.


28/124




1. World Wide Web Consortium.a. Qu es?b. Organizacin.c. Para qu se cre?d. Quines lo crearon?

2. Activar o desactivar los paneles de Dreamweaver.


29/124

CONFIGURAR UN SITIO EN DREAMWEAVER.

3.1 Concepto de Sitio.3.2 Tipos de Sitios en Dreamweaver.

3.3

Estructura de una Pgina Web.

3.4 Configurar un sitio nuevo.3.5 Configuracin de un servidor de prueba.3.6 Cuadro de dilogo Administrar sitios.3.7 Panel Archivos.

UNIDAD 3


30/124



CONFIGURAR UN SITIO EN DREAMWEAVER.

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 Dreamweaver.Un sitio de Dreamweaverpermite organizar y administrar todos los documentos

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

compartir archivos.

Un sitio de Dreamweaverconsta de un mximo de tres partes o carpetas, segn

el entorno de desarrollo y el tipo de sitio Web que se desarrolle:

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

Dreamweaverse refiere a esta carpeta como el sitio local. Esta carpeta suele

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

de red.

Carpeta remota: Almacena los archivos para pruebas, produccin,

colaboracin, etc. Dreamweaverse refiere a esta carpeta como el sitio remoto

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

donde se ejecuta el servidor Web.

Carpeta de servidor de prueba: La carpeta en la que Dreamweaverprocesa

pginas dinmicas.


31/124


3.3 Estructura de una Pgina Web.

paginaweb

documentos

imagenes

videos

scripts

multimedia

basedatos


32/124



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

1. Seleccione SitioAdministrar sitios.2. Haz clic en NuevoSitio (para configurar un nuevo sitio), o bien selecciona un

sitio de Dreamweaverya existente y haz clic en Editar.

3. En el cuadro de dilogo Configuracin del sitio, selecciona la categoraServidores y proceda de una de las siguiente formas:


33/124


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 lapestaa Avanzadas.

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

servidor de prueba.


34/124



5. Bajo Servidor de prueba, selecciona el modelo de servidor que desea usarpara su aplicacin Web.

6. Haz clic en Guardar para cerrar la pantalla Avanzadas. Seguidamente, en lacategora Servidores, especifica el servidor que acabas de aadir o editarcomo servidor de prueba.

3.6 Cuadro de dilogo administrar sitios.El cuadro de dilogo Administrar sitios se emplea para crear nuevos sitios, editar,

duplicar, eliminar un sitio o importar o exportar la configuracin de un sitio.

1. Selecciona SitioAdministrar 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 modificar 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 podr deshacer esta accin.


35/124


o Exportar. Permite exportar la configuracin de un sitio como archivoXML (*.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 del rea de visualizacin y expandir o contraer el panel Archivos.


36/124




1. Concepto de Servidor.2. Funcin de los servidores.3. Tipos de servidores.4. Importancia de la estructura de un Sitio Web.


37/124

FORMATO A LA PGINA WEB.

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

UNIDAD 4


38/124



FORMATO A LA PGINA WEB.

4.1 Propiedades de la pgina.Al momento de crear una Pgina Web es recomendable crear sitios que sigan un

mismo formato, es decir, que tengan el mismo 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. Metacomando < Ctrl + J >.2. Haz clic en el men ModificarPropiedades 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 lapgina.


39/124

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 categoraApariencia (CSS) permite especificar la fuente y el tamao de la letra;

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

del rea del documento.


40/124



4.1.2 Categora Apariencia (HTML).

La categoraApariencia (HTML), permite especificar 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 para la pgina. Texto. Especifica el color de la fuente del texto. Vnculos. Especifica el color al texto del vnculo. Vnculos visitados. Especifica el color que va a tomar los vnculos visitados. Vnculos activos. Especifica el color que se va mostrar 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.


41/124


4.1.3 Categora Vnculos (CSS).

La categoraVnculos (CSS) se emplea para definir la fuente, tamao y colores de

los vnculos, as como el estilo del vnculo.

4.1.3 Categora Encabezados (CSS).La categoraEncabezados (CSS),permite definir la fuente de los encabezados, el

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

tipo de encabezado.


42/124



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 debe aplicarse a tal tipo de codificacin.

4.1.6 Categora Imagen de rastreo.

La categoraImagen de rastreo permite insertar un archivo de imagen para usarlo

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


43/124


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

Para insertarcomentarios al documento, realiza:

1) Sitate en el men InsertarComentario.2) O haz clic en el comando 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 comentario.

En lavista Diseo, aparece el cuadro de dilogo Comentario. Introduce elcomentario y haz clic en Aceptar.

4.3 Objeto Fecha.Dreamweaverproporciona un objeto Fecha que permite insertar la fecha actual

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

vez que guarde el archivo.


44/124



Para insertar el objeto fecha en el documento, realiza:

1. Sita el puntero de insercin en el lugar donde desees insertar la fecha.2. Realiza alguno de los siguientes procedimientos:

Men InsertarFecha. CategoraComn, del panelInsertar, haz clic en el cono Fecha.

3. En el cuadro de dilogo Insertar fecha, selecciona el formato de da de lasemana, 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 automticamente, 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 para separar secciones dentro

de una misma pgina.

Para insertar una regla horizontal realiza:

1. Sitate en el men InsertarHTMLRegla horizontal.2. O de la Categora Comn del panel Insertar, haz clic en el comando Regla

Horizontal.


45/124


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

para permitirnos modificar las propiedades de dicho objeto.

4.5 Caracteres especiales.Cuando se trabaja con pginas web, muchas de las ocasiones es necesario

emplearcaracteres especiales tales como , , , , por mencionar algunos; para esto

Dreamweaverdispone de diferentes caracteres que podemos incorporar al documento.

Para insertar caracteres especiales, haz clic en el men Insertar HTML

Caracteres especiales Otro. Una vez hecho lo anterior se mostrar el cuadro de

dilogo Caracteres especiales, ah debers seleccionar el carcter buscado.

Asignar un nombre de ID

Ancho de la regla

Grosor de la regla Aplicar sombra

Alineacin de la regla

Asignar clase


46/124



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

FormatoLista y selecciona el tipo de lista que desees emplear.


47/124


4.7 Formato al texto.El contenido del texto del documento en Dreamweaver posee atributos que

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

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

Para dar formato rpidamente 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.

1

2

3

4

5

6

7

8

10

911

12


48/124



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 desplegable ID enumera todos los IDdeclarados pero no utilizados en el documento.

3. Clase. Muestra el estilo de clase que se aplica actualmente al textoseleccionado. 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 en blanco.

4. Vnculo. Crea un vnculo de hipertexto del texto seleccionado.5. Negritas. Aplica estilo de negritas al texto seleccionado.6. Cursiva. Aplica estilo de cursiva al texto seleccionado.7. Lista sin ordenar. Crea una lista con vietas del texto seleccionado.8. Lista ordenada. 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 desangra crea una lista anidada.

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

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


49/124


Inspector de propiedades Categora CSS.

1. Regla de destino. Es la regla que est editando en el Inspector de propiedadesde CSS. Si hay una regla ya existente aplicada al texto, se mostrar 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 dedestino. Si seleccionas Nueva regla CSS del men emergente Regla de destino

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

Definicin de nueva regla CSS.

3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades para la regla dedestino en la vista actual.

4. Fuente. Cambia la fuente de la regla de destino.5. Tamao. Establece el tamao de 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.

14

2

3

5

6

7

8

10

12

9

11


50/124



8. Cursiva. Aade la propiedad 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 centro.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 modificar el aspecto del texto;

dentro de este men encontrars los submens para:

Aumentar Sangra 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 ubicaciones 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 enuna etiqueta < STYLE > dentro del cuerpo del documento o de la etiqueta

< HEAD >.


51/124


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 lassiguientes opciones.

A. Haz clic en el men FormatoEstilos CSSNuevo.

B. O del panelEstilos CSS, haz clic enel cono Nueva regla CSS.

2. Despus de haber realizado alguno de los procedimientos anteriores semostrar el siguiente cuadro de dilogo, en donde se habr de especificar:

Tipo de selector. Permite 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 IDconcreto.

Etiqueta. Redefine el formato predeterminado de una etiqueta HTMLespecfica.

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


52/124



Nombre del selector. Define el nombre del estilo CSS.

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

estilos, entre las siguientes dos 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 documento 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 del Estilo CSS.


53/124


5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clicsobre el botn Aceptar.

4.10Editar 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 documento.

Para editar una regla CSS, realiza:

1. Abre el panelEstilos CSS.2. Selecciona la regla CSS que desees editar.3. Haz clic en el botn Editar estilo , del panel

Estilos CSS.

4. Realiza los cambios necesarios y haz clic enAceptar para conservar los cambios realizados.


54/124



4.11Vincular estilos CSS.Cuando se quiere usar una hoja de estilos externa en un documento HTML, lo que

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

Para establecer vnculos en una hoja de estilos CSS externa, realiza:1. Abre el panelEstilos CSS.2. En el panel Estilos CSS, haz clic en el botn Adjuntar hoja 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 Vincularpara establecer un vnculo entre el documento

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

de estilo externa como referencia.

Media. Especifica el medio de destino 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.


55/124


4.12Mens usando hojas de estilos.El elemento esencial en una Pgina Web es el uso de mens, ya que gracias a ellos

permiten que el usuario pueda desplazarse en cada pgina que compone el sitio Web.

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

documento HTML (.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 ello procede a realizar lo siguiente:

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

2. A continuacin, cambia a la vista Diseo y posiciona el puntero dentro delrectngulo.

3. Activa el botn Lista sin ordenar del Inspector de propiedades.4. Procede a crear los mens principales, tecleando el nombre del men despus

de cada vieta. Ejemplo:


56/124



5.

Si se requiere crear submens en algn men, posicinate al final del texto delmen y pulsa la tecla < ENTER >; una vez que te haya creado la vieta pulsa la

tecla < TABULADOR > (esto aplicar una sangra a la vieta y servir para crear

el submen). Ejemplo:

6. Algunas veces se requiere crear otro submen dentro del submen del menprincipal, para ello, repite los mismo pasos pero ahora debers dar < ENTER >

al final del texto del submen. Ejemplo:


57/124


7. Ahora debers colocar los hipervnculos a cada men y submen, para ello, enla vista Cdigo, teclea la etiqueta antes del texto de cada men

o submen y al final escribe la etiqueta . Ejemplo:

8. En la etiqueta teclea los siguientes atributos y valores:class="nav" id="menu"


58/124



9. Dentro de la etiqueta tecla los siguiente atributo y valor:class="nav"

10.Guarda el archivo HTML y crea una pgina CSS.11. Teclea los siguientes estilos.

@charset "utf-8";/* CSS Document */

* {

padding:0px;margin-top:inherit;

}

#header {padding-top: 120px;

}

/* Formato del men completo */#menu {

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

}


59/124


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;

}


60/124



12. El resultado ser el siguiente:

13. Las siguientes propiedades de tipo CSS te ayudarn a definir mejor laspropiedades del men:

Definicin de propiedades de tipo CSS

Font-family: Establece la familia de fuentes (o serie de familias) del estilo. Font-size: Define el tamao del texto. Font-style: Especifica normal, italic u oblique como 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 maysculas o minsculas.

Color: Establece el color del texto.

Definicin de propiedades de fondo de estilos CSS

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

forma lo hace.


61/124


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

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 espacio adicional entre las palabras. Letter-spacing: Aumenta o disminuye 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 del elemento.

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

Definicin de las propiedades del cuadro de estilos CSS

Width y Height: Establecen el ancho y alto del elemento. Float: Determina qu 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 unelemento 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 unelemento 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.


62/124



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 del elemento 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 estilo de borde para

Top, Right, Bottom y Left.

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

para cada lado, pero su visualizacin depender del navegador.

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

Definicin de las propiedades de lista de estilos CSS

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

vietas.

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

Definicin de las propiedades de posicin de estilos CSS

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

- Absolute: coloca el contenido utilizando las coordenadas introducidasen los cuadros Placement en relacin con el ascendente ms prximo

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


63/124


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

pgina.

- Relative: coloca el bloque de contenido utilizando las coordenadasintroducidas 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 enlos cuadros Placement en relacin con la esquina superior izquierda del

navegador.

- Static: coloca el contenido en su ubicacin en el flujo de texto. Esta esla 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 delcontenido 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

propiedades controlan la ampliacin de la siguiente manera:

- Visible: aumenta el tamao del contenedor para que todo sucontenido sea visible. El contenedor se expande hacia abajo y hacia la

derecha.


64/124



- Hidden: mantiene el tamao del contenedor y recorta cualquiercontenido que no quepa. No hay barras de desplazamiento.

- Scroll: aade barras de desplazamiento al contenedorindependientemente de que el contenido exceda o no el tamao del

contenedor.

- Auto: presenta las barras de desplazamiento solamente cuando elcontenido del contenedor excede de sus lmites.

Placement: Especifica la ubicacin y el tamao del bloque de contenido. Clip: Define la parte del contenido que ser visible.

Definicin de las propiedades de extensiones de estilos CSS

Page-break-before: Efecta un salto de pgina al imprimir antes o despusdel objeto al que se aplica el estilo.

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

Filter: Aplica efectos especiales al objeto controlado por el estilo, incluidosdesenfoque e inversin.


65/124

IMGENES.

5.1 Concepto de Imagen.5.2 Insertar imgenes.5.3 Insertar marcadores de posicin de imagen.5.4 Propiedades de imgenes.5.5 Imagen de sustitucin (Rollover).5.6 Objetos inteligentes.

UNIDAD 5


66/124



IMGENES.

5.1 Concepto de Imagen.Una imagen es el grfico vectorial o no vectorial, que muestra una presentacin

visual de algo en formato digital.

5.2Insertar imgenes.Cuando se insertan imgenes en Dreamweaver, el programa genera una

referencia del archivo de imagen.

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 imagen:

A) Metacomando < Ctrl + Alt + I >.B) PanelInsertarCategoraComnImagen.C) Men InsertarImagen.

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


67/124

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 deja el nombre que se muestra 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 nose muestre la imagen en el navegador.

- Descripcin larga. Anota la ubicacin de un archivo, que aparecercuando 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.


68/124



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

grfico definitivo est listo para su incorporacin al sitio Web.

Para insertarmarcadores de posicin de imagen, realiza:1. Sitate en el lugar del documento donde desees colocar el marcador de

posicin de imagen.

2. Despus realiza cualquiera de las siguientes opciones, para abrir el cuadro dedilogo Marcador de posicin de imagen.

A) Men InsertarObjetos de imagenMarcador 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, yasgnale una etiqueta de texto.

4. Para finalizar, haz clic en Aceptar.

Sustitucin de un Marcador de posicin de imagen.

Para poder actualizar el origen de la imagen, realiza:

1. Da doble clic sobre el marcador de posicin de imagen o del Inspector depropiedades, haz clic en el cono de Carpeta situado junto al campo de

Origen.


69/124

Unidad 5 Imgenes 59

2. Se abrir el cuadro de dilogo Seleccionar origen de imagen, ahselecciona 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 imgenes.Para modificar las propiedades de las imgenes, utiliza el Inspector de

propiedades; una vez que tengas la imagen seleccionada.


70/124



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

2. Mapa. Permite asignar una etiqueta y crear un mapa de imagen.3. Herramientas de Zona interactiva. Permite crear zonas en donde el usuario

pueda interactuar con la imagen.

4. Origen. Muestra la ubicacin de la imagen.5. Vnculo. Especifica un hipervnculo a la imagen.6. Destino. Especifica el marco o la ventana donde se cargar la pgina vinculada.7. Original. Permite reemplazar la imagen actual por otra imagen.8. Alt. Asigna un texto alternativo en caso de que no se muestre dicha imagen.9. Herramientas Editar. Permite editar la imagen para mejorar su presentacin.10.An. Especifica el ancho de la imagen.

1

5

4

10

8

9

7

6

2

311

12

13


71/124

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 anterioridad.5.5 Imagen de sustitucin (Rollover).

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

cambia cuando 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 de la segunda imagen para 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 desustitucin.

2. Despus realiza cualquiera de las siguientes opciones, para abrir el cuadro dedilogo Insertar imagen de sustitucin.

A.Categora Comn del panel Insertar, haz clic en el men Imgenes yselecciona el icono Imagen de sustitucin.

B.Men InsertarObjetos de imagenImagende sustitucin.3. Configura las opciones y haz clic en Aceptar.


72/124



Nombre de la imagen. Especifica el nombre de la imagen de sustitucin. Imagen original. La imagen que se mostrar al cargarse la pgina. Imagen de sustitucin. La imagen que se visualizar cuando el puntero

pase por encima de la imagen original.

Precargar imagen de sustitucin. Realiza una carga previa de imgenes enla cach del navegador para que la imagen no tarde en aparecer cuando el

usuario pase el puntero sobre la imagen.

Texto alternativo (Opcional). Texto que describa la imagen para losusuarios que utilicen un navegador de slo texto.

Al hacerse clic, ir a URL. El archivo que desea que se abra cuando unusuario haga clic en la imagen de sustitucin.

5.6 Objetos inteligentes.Un objeto inteligente es una imagen para Web que mantiene una conexin en

vivo con la imagen original de Photoshop. Al actualizar la imagen original en Photoshop,

Dreamweaverofrece la posibilidad de actualizar la imagen en Dreamweaversimplemente

haciendo clic en un botn.


73/124

Unidad 5 Imgenes 63

Para inserta un objeto inteligente, realiza:

1. Sita el puntero en el lugar de la pgina donde desees insertar el objetointeligente (la imagen).

2. Despus realiza cualquiera de los siguientes opciones, para abrir el cuadro dedilogo Seleccionar origen de imagen:

A) Metacomando < Ctrl + Alt + I >.B) PanelInsertar Categora ComnImagen.C) Men InsertarImagen.D) Tambin puedes arrastrar el archivo PSD a la pgina desde el panel

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

as, omite el paso siguiente).

3. Localiza el archivo de imagen PSD de Photoshop en el cuadro de dilogoSeleccionar origen de imagen.

4. En el cuadro de dilogo Optimizacin de imgenes que aparece, ajusta laconfiguracin de optimizacin como sea necesario y haz clic en Aceptar.


74/124



5. Guarda el archivo de imagen para la Web en una ubicacin dentro de lacarpeta raz de su sitio Web.


75/124

Unidad 5 Imgenes 65


1. Extensiones de imgenes que permite Dreamweaver insertar al documento.2. Insertar Imgenes HTML de Fireworks.3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.


76/124

HIPERVNCULOS.

6.1 Concepto de Hipervnculo.6.2 Tipos de rutas de los vnculos.6.3 Crear hipervnculos.6.4 Destino de los hipervnculos.6.5 Anclaje con nombre.6.6 Vnculo a correo electrnico.6.7 Men de salto.6.8 Zonas interactivas.

UNIDAD 6


77/124

Unidad 6 Hipervnculos 67

HIPERVNCULOS.

6.1Concepto de Hipervnculo.Los hipervnculos son links (vnculos) que al ser pulsados nos redirigen hacia otra

pgina o archivo; permitiendo conectar los diferentes elementos de una Pgina Web.

En Dreamweaver es posible establecer hipervnculos a cualquier elemento del

documento como puede ser: texto, imgenes, multimedia, etc.

6.2Tipos de rutas de los vnculos.Cuando se crean vnculos, resulta fundamental conocer la ruta de archivo entre el

documento desde el que establece el vnculo y el documento con el que lo establece.

Cada Pgina Web tiene una direccin exclusiva, denominada URL (Localizador

Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un

vnculo local (un vnculo de un documento con otro documento del mismo sitio), no suele

ser necesario especificar el URL completo del documento de destino.

6.2.1 Rutas absolutas.

Proporcionan la URL completa del documento vinculado, incluido el protocolo

que se debe usar (http://), por ejemplo,http://www.dcompusite.blogspot.com/.

6.2.2 Rutas relativas al documento.

Se emplean para vnculos locales, resultan particularmente tiles cuando el

documento actual y el documento con el que se establece el vnculo se encuentran en la

misma carpeta, por ejemplo, dreamweaver/contents.html .

6.2.3 Rutas relativas a la raz del sitio.

Indican la ruta desde la carpeta raz del sitio hasta un documento. Se usan cuando

se trabaja con un sitio Web grande que usa varios servidores o un servidor que alberga

varios sitios, por ejemplo, /support/dreamweaver/contents.html.
http://www.dcompusite.blogspot.com/http://www.dcompusite.blogspot.com/http://www.dcompusite.blogspot.com/http://www.dcompusite.blogspot.com/


78/124



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 cuadrode texto Vnculo .

2. Escribe la ruta y el nombre del archivo del documento o URL en el cuadro detexto 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 ubicacin para abrir la pgina.

Otra forma de crear hipervnculos es desde el men InsertarHipervnculo. Se

mostrar el cuadro de dilogo Hipervnculo, donde debers especificar las siguientes

propiedades:

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

en el navegador con dicha tecla.

ndice de fichas. Introduce un nmero para el orden de fichas.


79/124


6.4 Destino de los hipervnculos.El destino del hipervnculo determina en qu 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 del 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 documento vinculado se cargar en la ventana completa 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 todos los marcos.


80/124



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

por lo regular se colocan en un tema especfico o en la parte superior del documento.

Para crear un anclaje con nombre, realiza lo siguiente:1. Coloca el cursor en el lugar donde se desea insertar el anclaje con nombre.2. Despus realiza alguno de los siguientes procedimientos:

A) Men InsertarAnclaje 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 clicen Aceptar. (El nombre del anclaje no puede contener espacios.)

El marcador del anclaje aparecer en el punto de insercin.

Para usar el anclaje con nombre en un hipervnculo, realiza:

1. Selecciona el texto o imagen que servir como anclaje.4. Despus realiza alguno de los siguientes procedimientos:

A) Men InsertarHipervnculo.B) Del panelInsertar, CategoraComn, haz clic en el botn Hipervnculo.C) Del Inspector de propiedades, posicinate en el cuadro de texto Vnculo.


81/124


2. En cualquiera de las tres opciones anteriores, desplegar el men contextualde Vnculo y elige el marcador de

texto a emplear en el hipervnculo.

Nota: Todo los anclajes con nombre

aparecern con el signo # al principio del nombre de anclaje asignado.

6.6 Vnculo a correo electrnico.Cuando el usuario hace clic en un vnculo de correo electrnico se abre una nueva

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

del usuario). En la ventana de mensaje de correo electrnico, el cuadro Para se

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

correo electrnico.

Para crear un vnculo de correo electrnico, realiza:

1. Sitate en el men InsertarVnculo de correo 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 correo electrnico, en donde sehabr de especificar las siguientes propiedades:

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

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

informacin.


82/124



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]).

6.7 Men de salto.Un men de salto es un men emergente de un documento que pueden ver los

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

vnculos con documentos del sitio Web, documentos de otros sitios, correo electrnico,

grficos o cualquier tipo de archivo que se pueda abrir en un navegador.

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

eligen una opcin, se les remite al URL asociado. Los mens de salto se insertan dentro

del objeto de formulario Men de salto.

Un men de salto puede contener tres componentes:

Opcional: un mensaje de seleccin de men, como la descripcin de unacategora para los elementos del men o instrucciones, como Elija una

opcin.

Obligatorio: una lista de elementos de men vinculados: el usuario elige unaopcin y se abre un documento 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:


83/124


A)Men InsertarFormularioMen de salto.B)En la categoraFormulario del panelInsertar, haz clic en el botn Men

de salto.

3. Se mostrar el cuadro de dilogo Insertar men de salto, en donde debersespecificar las siguientes opciones:

Botn ms (+). Inserta un nuevo elemento. Botn menos (-). Elimina un elemento. Botones de flecha. Suben o bajan puestos en la lista. Texto. Escribe el nombre de un elemento sin nombre. Al seleccionarse, ir a URL. Accede al archivo de destino o escribe su

ruta.

Abrir URL en. Especifica si el archivo debe abrirse en la misma ventanao en un marco.

Insertar botn Ir tras el men. Selecciona esta opcin para insertar unbotn Ir en lugar de un mensaje de seleccin de men.

Seleccionar primer elemento tras el cambio de URL. Selecciona estaopcin si has insertado un mensaje de seleccin de men (Elija una

opcin) como primer elemento del men.


84/124



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 el usuario hace clic en una zona interactiva, se realiza una accin.

Al insertar un mapa de imagen del lado del 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.


85/124


3. Selecciona la herramienta circular, rectangular o poligonal, segn sea el casoy arrastrando el puntero sobre la imagen crea la zona interactiva.

4. Una vez seleccionada la zona interactiva, en el cuadro Vnculo, escribe elhipervnculo o haz clic sobre el cono Carpeta para localizar y seleccionar elarchivo que deber abrirse cuando el usuario haga clic en la zona interactiva.

5. En el cuadro de lista desplegable Destino, selecciona la ventana o marcodonde se abrir el vnculo.

6. En el cuadro de texto Alt, escribe el texto alternativo en caso de que no semuestre la imagen en el navegador.

7. Al terminar de definir todas las zonas interactivas del mapa de imagen, da clicen un rea en blanco del documento para cambiar el Inspector de propiedades.


1. Extensiones de imgenes que permite Dreamweaver insertar al documento.2. Insertar Imgenes HTML de Fireworks.3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.


86/124

DISEO DE LA PGINA WEB.

7.1 Concepto de Tabla.7.2 Creacin de tablas.7.3 Formato de tablas y celdas.7.4 Insertar filas y columnas.7.5 Eliminar filas y columnas.7.6 Combinar o dividir celdas.7.7 Anidar tablas.7.8 Ordenar tablas.7.9 Concepto de marcos.7.10 Crear marcos.7.11 Seleccionar marcos.7.12 Guardar marcos.7.13

Propiedades de los marcos.

7.14 Hipervnculos en marcos.

UNIDAD 7


87/124

Unidad 7 Diseo de la Pgina Web 77

DISEO DE LA PGINA WEB.

7.1 Concepto de Tabla.Una tabla es la herramienta eficaz para presentar una serie de datos de forma

clara y organizada en una Pgina Web. Tambin son usadas para el diseo del

documento.

Las tablas estn compuestas porfilas y columnas, y la interseccin entre una fila

y una columna es conocida con el nombre de celda.

7.2Creacin de tablas.Para insertar tablas en el documento, realiza cualquiera de las siguientes

opciones:

1. Men InsertarTabla.2. Metacomando < Ctrl + Alt + T >.3. PanelInsertarCategoraComnTabla.Realizada alguna de las opciones anteriores, se mostrar el cuadro de dilogo

Tabla en donde se habr de especificar:

Filas. Determina el nmero de filas de la tabla. Columnas. Especifica el nmero de columnas de la tabla. Ancho de tabla. Establece el ancho de la tabla en pixeles o como

porcentaje del ancho de la ventana del navegador.

Grosor del borde. Define el ancho en pixeles de los bordes de la tabla. Relleno de celda. Detalla el nmero de pixeles entre el borde y el

contenido de una celda.

Espacio entre celdas. Especifica el nmero de pixeles entre celdacontiguas de una tabla.

Seccin Encabezado. Brinda las siguientes opciones de encabezado:o Ninguno. No permite encabezados de columna o de fila para la

tabla.


88/124



o Izquierda. Convierte la primera columna de la tabla en una columnapara encabezados, lo que permite introducir un encabezado para

cada fila de la tabla.

o Superior. Convierte la primera fila de la tabla en una fila deencabezados, lo que permite introducir un encabezado para cada

columna de la tabla.

o Ambos. Permite introducir encabezados de columna y de fila de latabla.

Texto. El ttulo de tabla que se ubica fuera de la misma. Resumen. Descripcin de la tabla.


89/124


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 darformato a la tabla, posiciona el puntero del mouse sobre las esquinas dela tabla y luego haz clic izquierdo.

1. Id de tabla. Especifica un ID para la tabla.2. Filas y Cols. Nmero de filas y columnas que tendr la tabla.3. An. El ancho de la tabla en pxeles o porcentaje.4. Rell. Celda. Determina el nmero de pxeles entre el contenido de una celda y

los lmites de la misma.

5. Esp. Celda. Nmero de pxeles entre celdas de tabla contiguas.6. Alinear. Determina dnde aparecer la tabla en relacin con otros elementos

del mismo prrafo, como por ejemplo texto o imgenes.

7. Borde. Especifica el ancho en pxeles de los bordes de la tabla.8. Clase. Establece una clase CSS en la tabla.

1

2

3

5

4

6

7

8


90/124



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

modifica las propiedades que desees.

1. Combinar celdas. Combina las celdas, filas o columnas seleccionadas paracrear 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 ocolumna.

5. An (Ancho) y Al (Alto). Configura el ancho y alto de las celdas seleccionadasen pxeles o como porcentaje del ancho o alto total de la tabla.

6. No aj. Impide el ajuste de lnea, mantenindose todo el texto de una celda enuna sola lnea. Cuando la opcin No aj. est activada, las celdas se adaptarn

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

1

2

3

4 5

6

7

8


91/124


7. Encabezado. Aplica a la celda seleccionada el formato de celdas deencabezado de tabla. De forma predeterminada, el contenido de las celdas

de encabezado de la tabla aparecer en negrita y centrado.

8. Fondo. El color de fondo de una celda, columna o fila elegido mediante elselector 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. O

presiona 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 dedilogo Insertar filas o columnas; donde se habr de especificar el nmero

de filas o columnas y el lugar donde se insertarn.

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


92/124



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 ModificarTablaEliminar fila o Eliminar columna, segn sea el

caso.

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

men EdicinBorrar 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 ocupa 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 Combinar celdas del Inspector de propiedades

ampliado.

Para dividir una celda, haz clic en la celda y selecciona el men ModificarTabla

Dividir celda.

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

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


93/124


94/124



Orden. Determina si la columna debe ordenarse alfabtica onumricamente, y si el orden ser ascendente o descendente.

Despus por / Orden. Configura el orden de una clasificacin secundariaen otra columna.

Opciones. Permite activar los siguientes aspectos:o El orden incluye la primera fila. Especifica que la primera fila de la

tabla debe incluirse en la clasificacin.

o Ordenar filas de encabezado. Especifica que se ordenen todas lasfilas de la seccin thead de la tabla (si las hay) siguiendo los mismos

criterios que para las filas del cuerpo.

o Ordenar filas de pie. Especifica que se ordenen todas las filas de laseccin tfoot de la tabla (si las hay) siguiendo los mismos criterios

que para las filas del cuerpo.

o No modificar los colores de fila hasta que haya finalizado laoperacin de orden. Especifica que los atributos de fila de la tabla

deben permanecer asociados al mismo contenido despus de la

ordenacin.

7.9 Concepto de marcos.Un marco o frame es una zona de una ventana de navegador que puede mostrar

un documento HTML independiente de lo que se muestra en el resto de la ventana. Los

marcos permiten dividir la ventana de un navegador en varias regiones, cada una las

cuales puede mostrar un documento HTML diferente.

7.10Crear marcos.Existen dos formas de crear marcos, ya sea seleccionando entre varios conjuntos

de marcos predefinidos o diseando uno propio.


95/124


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 y

selecciona alguno de los diseos predefinidos porDreamweaver CS6.

Otra opcin para crear marcos es a

travs del men InsertarHTMLMarcos.

En dicha opcin se podr elegir el tipo de

marco que se desee insertar.


96/124



7.11Seleccionar marcos.Dreamweaver, ofrece un panel para seleccionar de la forma correcta y rpida los

marcos de nuestro documento. El panelMarcos 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 VentanaMarcos o presiona el

Metacomando < Shift + F2 >.

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

realiza lo siguiente:

1. Dirgete al men 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 Dreamweaverya 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.


97/124


La seleccin anterior indica que guardar la pgina principal (la llamada pgina

index) que es aquella que contendr todos los marcos dentro del mismo

documento. Nota: se recomienda que se guarde con el nombre de index.html.

Una vez que se haya guardado la pgina principal, el mismo cuadro de dilogo

an no se cerrar ya que tendr seleccionado otro marco para despus

guardarlo. Cuando se haya terminado de guardar todos los marcos, la ventana

Guardar como, se cerrar automticamente.


98/124



7.13Propiedades de los marcos.Para poder ver o establecer las propiedades de un marco, primero seleccinalo

desde el panel Marcos.

1. Nombre de marco. Nombre utilizado por el atributo target de un vnculo o porun script para referirse al marco

2. Orig. Especifica el documento de origen que debe mostrarse en el marco.3. Desplaz. Especifica si aparecern barras de desplazamiento en el marco.4. Bordes. Muestra u oculta los bordes del marco actual al visualizarlo en un

navegador.

5. Color de borde. Establece un color de borde para todos los bordes del marco.6. Ancho del margen. Establece el ancho de los mrgenes izquierdo y derecho

en pxeles.

7. Alto de mrgenes. Establece el alto de los mrgenes superior e inferior enpxeles.

1

2

3

4

5

6

7


99/124


7.14Hipervnculos en marcos.Para incluir un vnculo en un marco que abra un documento en otro marco, se

debe establecer el destino del vnculo. El atributo target de un vnculo especifica el marco

o ventana en la que se abrir el contenido vinculado.

Se debe tomar en consideracin que cuando se desea crear un hipervnculo entre

marcos, se mostrar el nombre del marco como tal, para ello, es recomendable cambiar

los nombres de los marcos para tener un mejor control en los hipervnculos.


100/124




1. Prioridad de formato de tabla en HTML.2. Eliminar marcos.3. Comportamientos JavaScript en marcos.


101/124

FORMULARIOS.

8.1 Concepto de Formulario.8.2 Crear formularios.8.3 Objetos de los formularios.8.4 Validacin de formularios aplicando JavaScript.8.5 Validacin de formularios usando HTML5.

UNIDAD 8


102/124



FORMULARIOS.

8.1Concepto de Formulario.Los formularios son los elementos que se utilizan para la recoleccin de datos del

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

inicio de sesiones, etc.

8.2Crear formularios.Para crear formularios en Dreamweaver, realiza:

1. Haz clic en el men InsertarFormularioFormulario.O del panelInsertarCategoraFormulariosFormulario.

2. Se mostrar el siguiente recuadro en donde se habrn de ir insertando losdiferentes elementos que queramos usar en el formulario.

3. A continuacin configura las propiedades del formulario mediante elInspector de propiedades.

2

1

3

4

5

6


103/124

Unidad 8 Formularios 93

1. ID de formulario. Nombre 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 delformulario al servidor. Puede tomar los siguientes valores:

- Predet. Utiliza el valor predeterminado (GET) del navegador paraenviar os datos del formulario al servidor.

- GET. Aade el valor al URL 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 datosremitidos al servidor para su procesamiento.

5. Dest.Especifica la ventana en la que va a visualizar los datos devueltos porel programa ejecutado.

6. Clase. Define un estilo creado con anterioridad.4. Despus comienza a insertar los objetos que desees usar en el formulario.

8.3 Objetos de los formularios.Los objetos de formulario son mecanismos que permiten a los usuarios introducir

datos. Puede aadir a un formulario los

siguientes objetos de formulario:


104/124



8.3.1 Elemento Campo de texto.

Aceptan cualquier valor alfanumrico. El texto se puede visualizar como una sola

lnea, como varias lneas y como un campo de contrasea.

1. Ancho car. Establece el nmero mximo de caracteres que se puede mostraren el campo.

2. Car. mx. Establece el nmero mximo de caracteres que se puede introduciren los campos de texto de una lnea.

3. Desactivado. Desactiva el rea de texto.4. Slo lectura. Convierte el rea de texto en un rea de texto de slo lectura.5. Tipo. Especifica si el campo es de una lnea, de varias lneas o de contrasea.

- Una lnea. Campo para una sola lnea de texto.- Multilnea. Campo para varias lneas de texto.- Contrasea. Campo para slo contrasea.

1

2

3

4

5

6

7


105/124

Unidad 8 Formularios 95

6. Val. Inicial. Asigna el valor mostrado en el campo cuando el formulario secarga inicialmente.

7. Clase. Permite aplicar reglas CSS al objeto.

8.3.2 Elemento rea de texto.

Es similar al elemento Campo de texto, slo que su valor predeterminado es la

visualizacin del texto en varias lneas.

8.3.3 Elemento Botn.

Realizan acciones cuando se hace clic en ellos. Los bot

cur so dreamweaver cs 6

Documents