Manual de Ofimatica

Ofimtica
Escuela de Tecnologa
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
NDICE
Presentacin Red de contenidos Unidad de aprendizaje 1 1.1 Tema 1 : Introduccin a HTML5
Pgina
5 7
11
1.1.1. : Estructura de un documento HTML5 1.1.2. : Diferencias bsicas entre HTML y HTML5 1.1.3. : Directivas o etiquetas 1.1.4 1.2 Tema 2 : Herramienta Dreamweaver : Insercin de imgenes 22
1.2.1. : Mapas de imgenes 1.2.2. : Imgenes de sustitucin 1.2.3 1.3 Tema 3 : Tablas : Creacin de enlaces. 31
1.3.1. : Enlaces externos 1.3.2. : Enlaces internos 1.3.3. : Enlaces mixtos 1.4 Tema 4 : Diseo con plantillas 33
1.4.1. : Insertar regiones 1.4.2 Guardar una plantilla
1.4.3. : Crear archivos basados en una plantilla 1.4.4 1.5 Tema 5 Actualizar archivos basados en una plantilla : Formularios 39
1.5.1. : Crear un formulario 1.5.2. : Insertar objetos de formulario
Unidad de aprendizaje 2 2.1 Tema 6 : Introduccin a estilos CSS 69
2.1.1. : Estilos de etiqueta
CIBERTEC
2.1.2. : Estilos de encabezado 2.1.3. : Estilos importados 2.2 Tema 7 2.3 Tema 8 2.4 Tema 9 : CSS para textos : CSS para contenedores : CSS para formularios 76 78 80
Unidad de aprendizaje 3 3.1 Tema 10 : Introduccin al lenguaje JavaScript 3.1.1. 3.1.2. 3.1.3. Modelo de programa JavaScript Definicin de variables Mtodos bsicos de entrada y salida 115
3.1.4. : Tipos de operadores 3.1.5. : Funciones 3.1.6. : Funciones predefinidas 3.2 Tema 11 : Validacin de formularios con JavaScript 3.1.1. : El evento onSubmit 3.1.2. : El objeto this 128
Anexo
145
CIBERTEC
PRESENTACIN
Ofimtica es un curso que pertenece a la lnea tcnica y se dicta en las carreras Computacin e Informtica, Administracin y Sistemas, Redes y Electrnica. Brinda a los alumnos un conjunto de herramientas de software como Dreamweaver CS5, as como lenguajes HTML, CSS y JavaScript para el diseo de sitios web con aplicaciones multimedia y validacin de formularios. El manual para el curso ha sido diseado bajo la modalidad de unidades de aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de ellas, hallar los logros, que debe alcanzar al final de la unidad; el tema tratado, el cual ser ampliamente desarrollado; y los contenidos, que debe desarrollar, es decir, los subtemas. Por ltimo, encontrar las actividades que deber desarrollar en cada sesin, que le permitirn reforzar lo aprendido en la clase. El curso es eminentemente prctico y consiste en el diseo de pginas web y programacin con JavaScript para validar formularios. En primer lugar, se inicia con el programa Dreamweaver que brinda al alumno una variedad de herramientas para la integracin de diferentes elementos de una pgina web. Asimismo, para el diseo, se incluye los lenguajes HTML y CSS. Se concluye con el lenguaje de programacin JavaScript que permite insertar estructuras de programacin para hacer consistente el ingreso de datos a un formulario por parte del usuario.
CIBERTEC
CIBERTEC
RED DE CONTENIDOS
Ofimtica
Dreamweaver
Estilos
JavaScript
HTML
Imgenes
Textos
Lenguaje JavaScript
Validacin de formularios
Textos
Enlaces
Contenedores
Formularios
Plantillas
Formularios
CIBERTEC
CIBERTEC
UNIDAD DE APRENDIZAJE
HTML5
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, los alumnos construyen un sitio web y elaboran diseos con plantillas que incluyen elementos multimedia.
TEMARIO 1.1. Tema 1: Introduccin a HTML5 (2 horas) 1.2. Tema 2: Insercin de imgenes (2 horas) 1.3 Tema 3: Creacin de enlaces (2 horas) Trabajo prctico No. 1: Desarrollo de una pgina web personal 1.4 Tema 4: Diseo con plantillas (2 horas) 1.5 Tema 5: Formularios (2 horas) Trabajo prctico No. 2: Desarrollo de un sitio web personal ACTIVIDADES PROPUESTAS Los alumnos disean pginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen uso de plantillas y formularios.
CIBERTEC
10
CIBERTEC
11
1.1 INTRODUCCIN A HTML5

HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML4. Contiene un conjunto de nuevos elementos que harn ms significativas a las pginas web, lo cual permitir una navegacin ms rpida y fluida, as como una bsqueda de pginas ms eficiente. Tambin, incluir, en el futuro, elementos para dibujar en la
pantalla, almacenar datos sin conexin, arrastrar y soltar objetos con el mouse, y mucho ms.
Hace una dcada, para disear una pgina, slo se poda usar frames, que eran la forma ms sencilla de no tener que repetir reiteradamente el mismo cdigo. No obstante, con la llegada de los lenguajes de programacin, esto comenz a variar y se comenz a utilizar tablas en lugar de frames para el diseo del sitio web. La aparicin de los CSS hizo que las etiquetas DIV se convirtieran en la alternativa para formatear los sitios; sin embargo, haba muchos problemas con el uso de audio y video. Por esta razn, llega HTML 5 con nuevas etiquetas que solucionan todas estas limitaciones.
1.1.1 Estructura de un documento HTML5

La estructura del documento, en HTML 5, es un poco diferente a la de las versiones anteriores de HTML.
CIBERTEC
12
Header: es el encabezamiento de la pgina o de la seccin. Footer: es el pie de pgina o de la seccin. section: es la seccin dentro de una pgina web. Article: contenido, contenido y ms contenido. Aside: son cosas varias, ejemplo, todo aquello que se pone en los blogs en la barra derecha, como nube de tags, los ms descargados, vistenos en Twitter, FB, etc.
Nav: es la navegacin por la web. Todas estas etiquetas van dentro de la etiqueta <body></body>.
Ejemplo de estructura de un documento HTML5:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Articulo (HTML5)</title> </head> <body> <header id="branding"> <! Cabecera de la pagina --> <h1>Nombre del sitio</h1> </header> <nav> <ul> <li>Navegacin principal</li> </ul> </nav> <div id="content"> <article> <! Contenido principal --> <header> <h1>Article title</h1> <p>Metadata del articulo</p> </header> <p>Contenido del articulo</p> <footer>Final de articulo</footer> </article> <aside id="sidebar"> <! Contenido secundario de la pgina --> <h1>Sidebar title</h1>  <p>Sidebar content</p> </aside> </div> <footer id="footer">Footer</footer>  </body> </html>
CIBERTEC
13
Esta estructura, todava, no es compatible con los navegadores de Internet, salvo algunos como Google Chrome, pero slo con algunas directivas (etiquetas) como audio y video. Por otro lado, la estructura de un documento HTML4 es ms sencilla y compatible con todos los navegadores existentes en Internet. Un documento HTML 4 se compone de tres partes: 1. Una lnea que contiene informacin sobre la versin de HTML, 2. Una seccin de cabecera declarativa (delimitada por el elemento HEAD), 3. Un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. Puede aparecer espacio en blanco (espacios, saltos de lnea, tabulaciones y comentarios) antes y despus de cada seccin. Las secciones 2 y 3 deberan estar delimitadas por el elemento HTML. Aqu, tenemos un ejemplo de un documento HTML sencillo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD> <BODY> <P>Hola mundo! </BODY> </HTML>
1.1.2 Diferencias bsicas entre HTML4 y HTML5

En la versin HTML, se diseaba una pgina web haciendo uso de las capas div para crear secciones. Ahora, HTML5 tiene etiquetas propias que permiten crear secciones automticamente con ciertos comportamientos tpicos de una pgina estndar.
CIBERTEC
14
1.1.3 Directivas o etiquetas

Las directivas o etiquetas son declaraciones para visualizar o dar forma a una pgina web.
Las etiquetas son marcas insertadas en un documento HTML para proporcionar informacin sobre una unidad o contenido. bsicas de las etiquetas HTML.

Existen reglas
Las etiquetas estn encerradas entre los signos "<" y ">". Las etiquetas, generalmente, vienen en pares <p> y <p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo mismo que <B>.
CIBERTEC
15
Las etiquetas tienen una estructura simple. Comienzan con un caracter < y terminan con un caracter >. Entre los caracteres <> est el nombre de la etiqueta y quiz algunos atributos dependiendo de la etiqueta. La mayora de los atributos toman un valor tambin. Algunos atributos son requeridos y otros, opcionales. La forma general de una etiqueta es la siguiente:
<nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... >
Los nombres de etiqueta y de atributos no son de caso sensitivo, pero algunos atributos y valores s lo son. El nombre de la etiqueta debe ir De esta manera,
primero, pero el orden de los atributos es indistinto. puedes escribir esta etiqueta as:
<NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... >
La siguiente es una lista de algunas etiquetas ms importantes:
Etiqueta
<body text=?> <pre> </pre> <hl> </hl> <h6> </h6> <b> </b> <strong> </strong> <font size=?> </font> <font color=?> </font> <a href=URL> </a> <a href=mailto:EMAIL> </a> <a name=NAME> </a> <a href=#NAME> </a> <p> </p> <p align=?> <br> <blockquote> </blockquote>
Descripcin
Asigna un tamao de texto especificado a toda la pgina web. Crea texto preformateado. Crea un ttulo grande. Crea un ttulo pequeo. Crea texto en negritas. Enfatiza una palabra (con itlicas o negritas), Setea el cuerpo de la fuente de 1 a 7. Setea el color de la fuente con nombres o valores hex. Crea un hipervnculo. Crea un enlace de email. Crea un enlace dentro del documento. Vincula al target dentro del documento. Crea un prrafo nuevo. Alinea un prrafo (izquierda, centro, derecha), Inserta un salto de lnea. Un tag genrico utilizado
CIBERTEC
16
<div align=?> <img src=name> <img src=name align=?> <img src=name border=?> <hr> <hr size=?> <hr width=?> <hr noshade> <table> </table>
para formatear grandes bloques de HTML es usado, tambin, para stylesheets. Agrega una imagen. Alinea una imagen. Setea el grosor del borde de la imagen. Inserta una linea horizontal. Setea la altura de una lnea. Setea el ancho de la lnea en porcentaje o nmeros absolutos. Inserta una lnea horizontal sin sombra. Crea una tabla.
Se puede disear una pgina con solo tener un navegador, un editor de textos y conocer las etiquetas HTML. Sin embargo, con la aparicin de programas especializados en diseo web, usaremos en este curso Adobe Dreamweaver
1.1.4 La Herramienta Dreamweaver

Dreamweaver es un editor HTML profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones web. Si desea controlar
manualmente el cdigo HTML o trabajar en un entorno de edicin visual, Dreamweaver le proporciona herramientas tiles que mejoran su experiencia en la creacin web.
Las funciones de edicin visual de Dreamweaver permiten crear pginas de forma rpida, sin escribir una sola lnea de cdigo. No obstante, si prefiere crear el cdigo manualmente, Dreamweaver, tambin, incluye numerosas herramientas y funciones relacionadas con la codificacin.
Ingresar a Dreamweaver
Para ingresar a Dreamweaver, realice el siguiente procedimiento: a) Clic en el botn Inicio de su Escritorio. b) Seleccione la opcin Todos los programas. c) Seleccione la opcin Adobe Master Collection CS5. d) Haga clic en la opcin Adobe Dreamweaver CS5.
CIBERTEC
17
El entorno de Dreamweaver
Lo que a continuacin sigue son breves descripciones de las ventanas y otros elementos del espacio de trabajo de Dreamweaver. Ms adelante, en esta misma gua, encontrar informacin ms especfica de cmo utilizar estas ventanas.
A. Barra Insertar B. Barra de herramientas Documento C. Ventana de documento D. Grupos de paneles E. Selector de etiquetas F. Inspector de propiedades G. Panel Archivos
El entorno de trabajo incluye los siguientes elementos:
Ventana de bienvenida La ventana de bienvenida le permite abrir un documento reciente o crear un documento nuevo. Desde esta pantalla, tambin, puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto. Barra Insertar La barra Insertar contiene botones para la insercin de diversos tipos de objeto, como imgenes, tablas y elementos PA en un documento. Cada objeto es un fragmento de cdigo HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
CIBERTEC
18
haciendo clic en el botn Tabla de la barra Insertar.
Asimismo, si lo
prefiere, puede insertar objetos utilizando el men Insertar en lugar de la barra Insertar. Barra de herramientas Documento La barra de herramientas Documento contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (vista Diseo y vista Cdigo), as como diversas opciones de visualizacin y algunas operaciones comunes, como la obtencin de una vista previa en un navegador. Barra de herramientas Estndar La barra de herramientas Estndar no se muestra en el diseo de espacio de trabajo predeterminado. sta contiene botones para las
operaciones ms habituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas > Estndar. Barra de herramientas Codificacin La barra de herramientas Codificacin slo se muestra en la vista Cdigo. sta contiene botones que le permiten realizar numerosas operaciones de codificacin estndar.
Barra de herramientas Representacin de estilos La barra de herramientas Representacin de estilos est oculta de manera predeterminada. sta contiene botones que le permiten ver
cmo aparecera el diseo en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. Tambin, contiene un botn que le permite activar o desactivar estilos de hoja de estilos en cascada (CSS). Ventana de documento La ventana del documento muestra el documento actual mientras lo est creando y editando.
CIBERTEC
19
Inspector de propiedades El Inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. El Inspector de propiedades no est ampliado de forma predeterminada en el Diseo del espacio de trabajo del codificador.
Selector de etiquetas El Selector de etiquetas est situado en la barra de estado de la parte inferior de la ventana del documento. Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Puede hacer clic en cualquier etiqueta de la jerarqua para seleccionarla y ver todo su contenido. Grupos de paneles Los grupos de paneles lo conforman paneles relacionados y agrupados bajo un encabezado comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la izquierda del nombre del grupo. Para desacoplar un grupo de paneles, arrastre el punto de sujecin situado en el borde izquierdo de la barra de ttulo del grupo. Panel Archivos El panel Archivos le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos, tambin, proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder (Macintosh).
Sitios en Dreamweaver
Un sitio web es un conjunto de documentos activos vinculados con atributos compartidos, como temas relacionados, un diseo similar o un objetivo comn. Dreamweaver es una herramienta de creacin y
administracin de sitios, por lo que puede utilizarlo para crear documentos individuales y sitios web completos. En Dreamweaver, el trmino sitio se emplea para referirse a una ubicacin de almacenamiento local o remoto de los documentos que pertenecen a un sitio web. Un sitio de Dreamweaver permite organizar y
CIBERTEC
20
administrar todos los documentos web, cargar el sitio en un servidor web, controlar y mantener vnculos, y administrar y compartir archivos. Para aprovechar al mximo las funciones de Dreamweaver, debe definir un sitio. Crear el sitio Para crear el sitio, lo primero que debe hacer es crear una carpeta que ser el sitio donde van a residir todas sus pginas y todos los archivos que vaya aadiendo. Es recomendable que esta carpeta la cree directamente en el disco duro C. Luego, ejcute los siguientes pasos:
1. 2. 3. 4.
Haga clic en el men Sitio de la barra de Mens Elija Administrar sitios. Haga clic en el botn Nuevo de la ventana Administrar sitios. Ingrese el nombre para el nuevo Sitio. Por ejemplo, escriba Clase 1.
5. 6.
Despus, haga clic en el botn Siguiente. En la siguiente pantalla, la opcin No, no quiero usar tecnologa de servidor debe estar seleccionada.
7. 8. 9.
Haga otra vez clic en Siguiente. Clic en el icono y, ahora s, seleccione una carpeta.
Clic en Siguiente para ir al siguiente paso.
10. Seleccione la opcin Ninguno en el cuadro Cmo se conecta a su servidor remoto? 11. Clic en Siguiente. 12. Clic en Listo. 13. Clic en Listo, otra vez, para terminar.
CIBERTEC
21
Observe el lateral inferior derecho de la ventana de Dreamweaver. Aparece abierto el sitio que se acaba de crear y que est alojado en una carpeta denominada Clase 1 en el disco duro C. Sin embargo, todava, no hay ningn documento para trabajar.
Crear un documento HTML Para crear un documento, haga lo siguiente:
1. 2.
Clic en el men Archivo > Nuevo Seleccione la opcin HTML de la categora Pgina en blanco.
CIBERTEC
22
3.
Haga clic en el botn Crear.
En la ventana mltiple, ya se ha creado un primer archivo que Dreamweaver llama Untitled-1. Observe la pestaa superior izquierda del espacio mayor vaco.
Por otro lado, el documento (no el archivo) que ser la pgina, tampoco tiene ttulo.
1.2 INSERCIN DE IMGENES

Para insertar una imagen, es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario, Dreamweaver nos advertir para que
guardemos una copia en la carpeta correspondiente.
Las imgenes pueden estar sueltas en la carpeta raz junto con los archivos de cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la que llamaremos imgenes (nombre de los archivos y carpetas sin acentos) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta, estn nuestras imgenes.
A propsito de las imgenes, es muy importante que controlemos el tamao de las mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra pgina. Cuando insertamos una imagen, aparece, en el cuadro de dilogo, una informacin sobre el tamao y el tiempo de descarga aproximado.
1.2.1 Mapas de imgenes

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, por ejemplo se abre un archivo nuevo. Utilice el Inspector de
CIBERTEC
23
propiedades de imagen para crear y editar grficamente mapas de imagen del lado del cliente.
Insertar un mapa de imagen Cuando inserte un mapa de imagen del lado del cliente, cree una zona interactiva y, a continuacin, defina un vnculo que se abra cuando el usuario haga clic en la zona interactiva. Puede crear mltiples zonas interactivas, pero formarn parte del mismo mapa de imagen.
Para crear un mapa de imagen del lado del cliente, haga lo siguiente:
1. En la ventana de documento, seleccione la imagen.
2. En el inspector de propiedades, haga clic en la flecha de ampliacin, situada en la esquina inferior derecha, para ver todas las propiedades.
3. En el campo Mapa, introduzca un nombre exclusivo para el mapa de imagen. Si utiliza mltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.
CIBERTEC
24
4. Para definir las reas de mapas de imagen, realice una de estas operaciones:
Seleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona interactiva circular. Seleccione la herramienta de rectngulo y arrastre el puntero sobre la imagen para crear una zona interactiva rectangular. Seleccione la herramienta poligonal y defina una zona interactiva con forma irregular haciendo clic una vez en cada esquina. Haga clic en la herramienta de flecha para cerrar la forma.
Despus de crear las zonas interactivas, aparecer el Inspector de propiedades de zonas interactivas.
5. Seleccione las opciones deseadas del Inspector de propiedades de zonas interactivas. Por ejemplo, en la propiedad Link, puede seleccionar el archivo que se abrir con esta zona interactiva.
6. Cuando termine de definir el mapa de imagen, haga clic en un rea en blanco del documento para cambiar el Inspector de propiedades. Modificacin de un mapa de imagen Puede editar fcilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un rea de zona interactiva, cambiar el tamao de stas; incluso, puede adelantar o retrasar una zona interactiva en una capa.
CIBERTEC
25
Tambin, puede copiar una imagen con zonas interactivas de un documento a otro, o copiar una o ms zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas asociadas a la imagen, tambin, se copiarn en el nuevo documento.
Para seleccionar mltiples zonas interactivas, en un mapa de imagen, haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar una zona interactiva.
2. Tambin, puede realizar una de estas operaciones: Mantenga presionada la tecla Mays mientras hace clic en las zonas interactivas que desea seleccionar. Presione Control+A para seleccionar todas las zonas interactivas.
Para mover una zona interactiva, haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar la zona interactiva que desea mover.
2. Luego, realice una de estas operaciones: Arrastre la zona interactiva a una nueva rea. Utilice Mays y las teclas de flecha para mover una zona interactiva 10 pxeles en la direccin seleccionada. Utilice las teclas de flecha para mover una zona interactiva un pxel en la direccin seleccionada.
Para cambiar el tamao de una zona interactiva, haga lo siguiente:
1. Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo tamao desea cambiar.
2. Luego, arrastre el manejador de zona interactiva para cambiar el tamao o la forma de la zona interactiva.
CIBERTEC
26
1.2.2 Imagen de sustitucin

Una imagen de sustitucin es aquella que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella. Una imagen de sustitucin
consta, en realidad, de dos imgenes: la imagen principal (la que aparece al cargarse inicialmente la pgina) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imgenes deben tener el mismo tamao. Si las imgenes tienen tamaos distintos, Dreamweaver cambia automticamente el tamao de la segunda imagen para que se ajuste a las propiedades de la primera.
No es posible ver el efecto de una imagen de sustitucin en la ventana de documento de Dreamweaver. Si desea ver el efecto de sustitucin, presione F12 para obtener una vista previa de la imagen en un navegador y, a continuacin, pase el puntero por la imagen.
Las imgenes de sustitucin estn automticamente configuradas para que respondan al evento onMouseOver. Para crear una imagen de sustitucin, haga lo siguiente:
1. En la ventana de documento, site el punto de insercin en el lugar donde desea que aparezca la imagen de sustitucin.
2. En el men Insertar, seleccione Objetos de imagen y luego haga clic en Imagen de sustitucin.
Se abre el cuadro de dilogo Insertar imagen de sustitucin.
CIBERTEC
27
3. En el campo Nombre de la imagen, introduzca un nombre para la imagen de sustitucin.
4. En el cuadro de texto Imagen original, haga clic en Examinar y seleccione la imagen que desea que aparezca al cargarse la pgina o introduzca la ruta del archivo de imagen en el cuadro de texto.
5. En el cuadro de texto Imagen de sustitucin, haga clic en Examinar y seleccione la imagen que desea que aparezca al pasar el puntero sobre la imagen original o introduzca la ruta del archivo de imagen en el cuadro de texto.
6. Si desea que las imgenes se carguen previamente en el cach del navegador para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen, seleccione la opcin Carga previa de imagen de sustitucin.
7. En Texto alternativo, introduzca un texto que describa la imagen para los usuarios que utilicen un navegador no grfico. (Opcional)
8. En el campo Al hacer clic, ir al URL, haga clic en Examinar y seleccione el archivo o escriba la ruta del archivo que desea que se abra cuando un usuario haga clic en la imagen de sustitucin.
Nota: Si no establece un vnculo para la imagen, Dreamweaver insertar un vnculo nulo (#) en el cdigo HTML relativo al comportamiento de sustitucin. Si elimina el vnculo nulo, la imagen de sustitucin dejar de funcionar.
9. Haga clic en OK para cerrar el cuadro de dilogo Insertar imagen de sustitucin.
10. Para comprobarlo, elija el men Archivo > Vista previa en el navegador o presione la tecla F12. Luego, en el navegador, desplace el puntero sobre la imagen original. Debe aparecer la imagen de sustitucin
CIBERTEC
28
1.2.3 Tablas
Las tablas constituyen una herramienta muy eficaz para presentar datos en una tabla y establecer la disposicin de texto y grficos en una pgina HTML. Existen tres formas de disearlas: modo Estndar, modo Expandido y modo de Diseo.
Una tabla consta de una o varias filas, donde cada una consta, a su vez, de una o ms celdas. Aunque las columnas no suelen especificarse
explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. Despus de crear una tabla, podr modificar fcilmente su aspecto y estructura.
1.2.3.1 Insertar
En la vista Diseo de la ventana de documento, site el punto de insercin donde desee que aparezca la tabla.
Nota: Si no hay ningn contenido en el documento, la nica ubicacin posible ser al principio del mismo.
Elija men Insertar > Tabla. Se mostrar el cuadro de dilogo Insertar tabla.
CIBERTEC
29
Introduzca los nuevos valores que desee.
Podemos determinar el nmero de filas, columnas, ancho de la tabla en pxeles o porcentaje, especificar si queremos que la tabla tenga borde e indicarle el grosor del borde dado el caso.
El relleno de celda hace referencia al espacio que queremos que exista entre el texto o lo que coloquemos en cada una de las celdas, y su borde. El espacio entre celdas es el espacio que queremos que haya entre una celda y otra. Ambos se indican en pxeles y se pueden quedar vacos en el caso de que queramos que tanto el relleno de celda como el espacio entre celdas sea el mnimo posible.
A modo de ejemplo, vamos a insertar una tabla con 3 filas y 6 columnas, y que ocupe el 80 % del ancho, un borde de 2 pxeles y un relleno de celda de 5 pxeles.
Lunes Maana Tarde
Martes
Mircoles
Jueves
Viernes
1.2.3.2 Modificar
Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado, encontraremos las etiquetas html.
La etiqueta <body> hace referencia a todo el documento que se visualiza con el navegador. La etiqueta <table> hace referencia a la tabla entera; la etiqueta <tr>, a la fila en la que est el cursor; y la etiqueta <td>, a la celda. Observa que la ltima etiqueta est ms brillante. Eso quiere decir que es la celda la que est seleccionada.
CIBERTEC
30
Por debajo de esta barra de estado, nos encontramos con el panel del Inspector de propiedades que har referencia a la celda en la que, en ese momento, est el cursor:
Desde ese panel, podemos cambiar las propiedades de la celda en cuestin. Si desde la barra de Estado pulsamos la etiqueta <table>, se seleccionar toda la tabla. Si ahora vemos las propiedades, stas sern las propiedades de la tabla y, desde all, podemos cambiar las propiedades de la tabla y su configuracin.
Propiedad Filas Cols An Rell. Celda
Accin Modificar el nmero de filas Modificar el nmero de columnas Modificar la anchura de la tabla Modificar el espacio entre los bordes y el contenido
Esp. celda Alinear Borde Col. fondo Col. borde Im. Fondo
Modificar el espacio entre las celdas Modificar la alineacin Modificar el grosor del borde Establecer un color de fondo Establecer un color de borde Establecer una imagen de fondo
Para hacer cambios a una fila, colocamos el cursor en una celda de esa fila y marcamos la etiqueta <tr> de la barra de Estado. As, quedar
CIBERTEC
31
seleccionada la fila entera. Desde el Panel de propiedades, podemos hacer los cambios oportunos.
Si pulsamos, por ejemplo, el botn
, el texto que est escrito en las
celdas de esa fila se colocar centrado en cada una de las celdas. Si pulsamos, por ejemplo, el botn negrita. el texto escrito pasar a estar en
Otra forma de seleccionar filas y/o celdas consiste en situar el cursor en una de las celdas y arrastrar con el mouse hasta donde se desee.
1.3 CREACIN DE ENLACES

Los vnculos, hipervnculos, enlaces, hiperenlaces (todas estas palabras designan el mismo concepto) son los elementos ms importantes del lenguaje HTML con los que se construyen las pginas web. A continuacin, detallaremos los diversos tipos de vnculos que se pueden crear en una pgina web.
1.3.1 Enlaces externos

El enlace externo es, quiz, el vnculo ms usado. Para ello, seleccione el elemento que le va a servir para enlazar (puede ser una palabra, una frase o una imagen). Una vez que lo ha seleccionado, hace clic en el icono de la
propiedad Vnculo del Panel de propiedades. Luego, seleccione el nombre del archivo para establecer el enlace o vnculo.
Supongamos que quiere hacer que el logotipo de Cibertec sea un vnculo a la pgina de Cibertec. Para ello, seleccione y escriba la URL de la pgina http://www.cibertec.edu.pe en la caja de texto:
CIBERTEC
32
Como en el caso anterior, compruebe que funciona. Para ello, presione la tecla F12 y comprubelo con el navegador.
1.3.2 Enlaces internos

Un enlace interno es cuando se quiere hacer clic en un enlace y ste nos lleve al principio de la pgina, al final o al comienzo de un apartado determinado, pero siempre dentro del mismo documento. Para ello, primero, hay que hacer marcas con el botn Anclaje con nombre, que est en el men Insertar, en los puntos donde se quiere nos lleve el vnculo.
Posteriormente, se crean los enlaces en dichos puntos.
Para ello,
seleccione el texto o imagen y luego haga clic en la opcin Hipervnculo del men Insertar. Finalmente, seleccione el nombre del punto al cual desea vincularse.
CIBERTEC
33
1.3.3 Enlaces Mixtos

Los dos tipos de vnculos anteriores se pueden combinar, de tal manera que podamos ir a partes concretas de otros documentos. En este caso, una vez definido el punto de fijacin con nombre en el documento correspondiente, se establece el enlace escribiendo el nombre de la pgina con su extensin .htm seguido del signo # y el nombre del punto de fijacin.
Por ejemplo, un enlace a un punto llamado historia del archivo Cuzco.htm seria de la siguiente manera:
Cuzco.htm#historia
1.4 DISEO CON PLANTILLAS

Una plantilla es un tipo especial de documento que sirve para crear un diseo de pgina fijo con la finalidad de crear documentos basados en sta y as heredar todo su diseo de pgina. Por esta razn, al disear una plantilla, usted
especifica como "editables" aquellos contenidos que los usuarios van a poder editar de un documento basado en sta. En otras palabras, los autores de las plantillas pueden controlar qu elementos de la pgina pueden editar los usuarios de la plantilla (como los redactores, los diseadores grficos y otros desarrolladores web). El autor de una plantilla puede incluir varios tipos de
regiones de plantilla en un documento.
Para crear la plantilla, haga lo siguiente: 1. Elija el men Nuevo > Plantilla en blanco > Plantilla HTML > ninguno. 2. Haga clic en el botn Crear Le aparecer la siguiente ventana:
CIBERTEC
34
Se debe mostrar, en la barra de ttulos de su archivo, lo siguiente:
1.4.1 Insertar regiones

Al guardar un documento como plantilla, se bloquean la mayora de las regiones del documento. Como autor de la plantilla, debe especificar qu regiones del documento basado en plantilla sern editables. inserte regiones editables o parmetros editables en la plantilla. Para ello,
A medida que cree la plantilla, podr realizar cambios tanto en las regiones editables como en las bloqueadas. Sin embargo, en un documento basado en plantilla, el usuario de la plantilla slo podr realizar cambios en las regiones editables y no en las regiones bloqueadas. Una plantilla contiene cuatro tipos de regiones.
CIBERTEC
35
Una regin editable Una regin editable es una regin no bloqueada de un documento basado en plantilla, es decir, una seccin que el usuario de la plantilla puede editar. El autor de una plantilla puede especificar cualquier rea de la plantilla como editable. Para que una plantilla sea efectiva, deber contener al menos una regin editable. En caso contrario, las pginas basadas en la plantilla no se podrn editar.
Una regin repetida Una regin repetida es una seccin del diseo del documento que se establece para que el usuario de la plantilla pueda aadir o eliminar copias de esta regin en su documento segn le resulte oportuno. Por ejemplo, puede definir que una fila de una tabla se repita. Las secciones repetidas son editables para que el usuario de la plantilla pueda editar el contenido del elemento repetido, mientras que el diseo propiamente dicho est controlado por el autor de la plantilla.
Existen dos tipos de regiones repetidas que se pueden insertar en una plantilla: regin repetida y tabla repetida. Una regin opcional Una regin opcional es una seccin de la plantilla en la que hay contenido (como texto o una imagen) que puede aparecer o no en un documento. En la pgina basada en la plantilla, el usuario de la plantilla suele controlar si el contenido se mostrar.
Para insertar una regin editable, en la celda cambiante, seleccione la celda del lado derecho (celda cambiante) y, luego, elija el men Insertar > Objetos de plantilla > Regin editable. Finalmente, ingrese el texto que desee
mostrar por defecto. El texto debe insertarse dentro del marco de la regin.
CIBERTEC
36
Para insertar una regin repetida, seleccione la celda permanente y, luego, elija el men Insertar > Objetos de plantilla > Regin repetida. Finalmente, inserte o mueva el texto en el marco de esa regin.
1.4.2 Guardar una plantilla

Para guardar la plantilla, simplemente, seleccione la opcin Guardar como plantilla del men Archivo. Luego, le asigna un nombre a la plantilla y,
finalmente, haga clic en el botn Guardar.
CIBERTEC
37
1.4.3 Crear pginas basadas en una plantilla

Para crear pginas web basadas en una plantilla, haga lo siguiente: Seleccione men Archivo > Nuevo > Pgina de plantilla. Haga clic en el nombre de la plantilla que quiere utilizar.
Clic en el botn Crear.
Se puede reconocer un archivo que ha sido creado a partir de una plantilla cuando aparece en la esquina superior derecha de su pgina web el nombre de la plantilla. Adems, en la regin repetida, aparece una pequea barra con botones.
Luego de haber creado algunas pginas basadas en la plantilla, disee desde sta los enlaces correspondientes. Si se trata de una imagen, debe
CIBERTEC
38
usar enlaces de mapas de imagen. Si son textos, debe crear enlaces de textos.
1.4.4 Actualizar pginas (documentos) basadas en una plantilla

Cuando realiza un cambio en una plantilla, Dreamweaver le solicita que actualice los archivos basados en la plantilla, pero puede actualizar manualmente el archivo actual o el sitio entero si es necesario. Actualizar manualmente los archivos basados en plantilla es lo mismo que volver a aplicar la plantilla.
Para aplicar los cambios realizados en la plantilla, en la pgina (documento) basada en la plantilla actual, realice lo siguiente:
1. Abra el documento. 2. Seleccione men Modificar > Plantillas > Actualizar pgina actual. Dreamweaver va a actualizar el documento con todos los cambios de la plantilla.
Puede actualizar todas las pginas del sitio o nicamente las pginas correspondientes a una plantilla determinada.
1. Seleccione Modificar > Plantillas > Actualizar pginas. 2. En la ventana que le aparece, en la opcin Buscar en, siga uno de estos procedimientos:
Para actualizar todos los archivos del sitio seleccionado a sus correspondientes plantillas, seleccione Todo el sitio y, a
CIBERTEC
39
continuacin, seleccione el nombre del sitio en el men emergente adyacente.
Para actualizar los archivos correspondientes a una plantilla determinada, seleccione Archivos que usan y, a continuacin, seleccione el nombre de plantilla en el men emergente adyacente.
En esta misma ventana, asegrese de que Plantillas est seleccionado en la opcin Actualizar. Asimismo, si no desea ver un registro de los archivos que Dreamweaver actualiza, desactive la opcin Mostrar registro, sino deje la opcin seleccionada. Luego, haga clic en el botn Iniciar para actualizar los archivos como se ha indicado. Si haba
seleccionado la opcin Mostrar registro, Dreamweaver proporcionar informacin sobre los archivos que intenta actualizar e indicar si se han actualizado satisfactoriamente. Finalmente, haga clic en Cerrar.
1.5 FORMULARIOS
Un formulario es una de las herramientas ms tiles en toda pgina web. ste recoge informacin del visitante, la cual se almacena en el servidor o se nos enva a travs de una direccin de correo electrnico.
Se debe activar la barra Formularios para poder disear uno. Para ello, haga clic en la pestaa Formulario de la barra de herramientas Insertar.
1.5.1 Crear un formulario HTML:

Para insertar un formulario, haga lo siguiente:
1.
Abra una pgina y site el punto de insercin donde desee que aparezca el formulario.
CIBERTEC
40
2.
Seleccione el men Insertar > Formulario > Formulario o seleccione la categora Formularios en la barra de herramientas Insertar y haga clic en el icono Formulario.
Dreamweaver inserta un formulario vaco. En modo Diseo, los formularios aparecen indicados mediante un contorno de lnea de puntos de color rojo. Si no ve el contorno, compruebe en el men Ver > Ayudas visuales > Elementos invisibles est seleccionada.
3. En el Panel de Propiedades, especifique la pgina o el script que procesar los datos del formulario en la propiedad Accin. Nota.- Esto, en este curso, no se aplica ya que el objetivo es el diseo en el lado del cliente y no desde el servidor.
4. Indique el mtodo que va a utilizar para transmitir los datos del formulario al servidor.
Nota.- La propiedad Mtodo tampoco se usar por las razones antes expuestas.
5. Inserte los objetos de formulario.
Site el punto de insercin en el lugar del formulario en el que desee que aparezca el objeto del formulario y, a continuacin, seleccione el objeto en el men Insertar > Formulario o en la categora Formularios de la barra de herramientas Insertar.
CIBERTEC
41
6. Ajuste el diseo del formulario como lo desee.
Puede utilizar saltos de lnea, saltos de prrafo, texto con formato predeterminado o tablas para aplicar formato a los formularios. No puede insertar un formulario en otro formulario (es decir, superponer etiquetas), pero puede incluir varios formularios en una misma pgina.
Cuando disee formularios, asigne textos descriptivos a las etiquetas de los campos para que los usuarios puedan saber a qu estn contestando. Por ejemplo, utilice la etiqueta "Escriba su nombre" para solicitar el nombre del usuario.
Utilice tablas para estructurar los objetos del formulario y las etiquetas de los campos. Cuando utilice tablas, en los formularios, asegrese de que todas las etiquetas table estn situadas entre las etiquetas form.
1.5.2 Insertar objetos de formulario

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de formulario. Los objetos de formulario son mecanismos que
permiten a los usuarios introducir datos. Puede aadir, a un formulario, los siguientes objetos de formulario:
Campos de texto Los campos de texto aceptan cualquier valor alfanumrico. El texto se
puede visualizar como una sola lnea, como varias lneas y como un campo de contrasea en el que el texto introducido se sustituye por asteriscos o vietas para ocultar el texto a otras personas que puedan estar mirndolo.
CIBERTEC
42
Nota: Las contraseas y el resto de datos que se envan a un servidor, mediante campos de contrasea, no estn cifrados. Los datos transferidos pueden ser interceptados y ledos como texto alfanumrico. Por esta razn, debe facilitar siempre el cifrado de los datos que desea que permanezcan seguros. Campos ocultos Los campos ocultos permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de visualizacin, y utilizarla la prxima vez que el usuario visite el sitio.
Botones Los botones realizan acciones cuando se hace clic en ellos. Puede aadir una etiqueta o un nombre personalizado a un botn, o bien usar una de las etiquetas predefinidas: Enviar o Restablecer. Utilice un botn para enviar datos del formulario al servidor o para restablecer el formulario. Tambin, se pueden asignar otras tareas de proceso definidas en un script. Por ejemplo, el botn puede calcular el coste total de elementos seleccionados basndose en los valores asignados.
CIBERTEC
43
Casillas de verificacin Las casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones. necesarias. Un usuario puede seleccionar tantas acciones como sean El siguiente ejemplo muestra tres casillas de verificacin
seleccionadas: Surfing, Mountain Biking y Rafting.
Botones de opcin Los botones 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 nombre). En el siguiente
ejemplo, la opcin Rafting es la opcin seleccionada en ese momento. Si el usuario hace clic en Surfing, la opcin Rafting se deselecciona automticamente.
Lista/men El objeto Lista/men muestra valores de opciones en una lista de desplazamiento, la cual 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 o varias opciones; por esta razn, sta puede mostrarlas a la vez si modifica la propiedad Alto y establece cuntas opciones quiere ver en el listado. De otro lado, utilice los mens si dispone
CIBERTEC
44
de una cantidad de espacio limitada pero necesita mostrar muchos elementos, o bien para controlar valores devueltos al servidor. A diferencia de los campos de texto, en los que el usuario puede escribir todo lo que desea, incluso datos no vlidos, usted establece los valores exactos que debe devolver una Lista/men.
Lista
Men
Men de salto Un men de salto es una lista de navegacin o men emergente que permite insertar un men en el que cada opcin se vincula a un documento o archivo.
Campo de archivo Un campo de archivo permite al usuario examinar los archivos de su ordenador y cargarlos como datos de un formulario.
Campo de imagen Un campo de imagen permite insertar una imagen en un formulario. Utilice los campos de imagen para crear botones grficos, como Enviar o Restablecer. El uso de una imagen, para llevar a cabo tareas distintas del envo de datos, requiere adjuntar un comportamiento al objeto del formulario.
CIBERTEC
45
ACTIVIDADES A DESARROLLAR EN CLASE

Actividad 1 Escriba el siguiente cdigo en Dreamweaver. Active la vista Cdigo para ello. El resultado genera textos con hipervnculos o enlaces a pginas web:
<HTML> <HEAD> <TITLE> Mi pgina del web - 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis pginas favoritas </H1> </CENTER> <HR> stas son mis pginas favoritas: <P> <A HREF=http://www.google.com>Google</A> <BR> <A HREF=http://www.microsoft.com>Microsoft</A> <BR> <A HREF=http://www.yahoo.com>Yahoo!</A> </BODY> </HTML>
Grabe este documento como enlaces externos.html
CIBERTEC
46
Actividad 2 Abra un nuevo documento html y cree la siguiente lista anidada utilizando la vista diseo.
Ficheros HTML 1. Ficheros de prueba prueba1.html prueba2.html prueba2.html 2. Ficheros de ejemplos 3. Ficheros del servidor Ficheros de imgenes Ficheros de sonido
Grabe este documento como lista anidada.html
CIBERTEC
47
Actividad 3 Abra un nuevo documento html y cree otra lista anidada segn el siguiente modelo:
Mis aficiones
Sin un orden particular, mis aficiones son las siguientes: El cine El deporte o o Natacin Baloncesto
La msica La msica que ms me gusta es (en orden de preferencia): 1. El rock 2. El jazz 3. La msica clsica
Grabe este documento como aficiones.html
CIBERTEC
48
Actividad 4 Disea una pgina web mediante el uso de tablas e imgenes. Descripcin de la prctica: La prctica consiste en disear la pgina web de acuerdo con el modelo mostrado en esta actividad. Las imgenes de los carros de la derecha son imgenes de
sustitucin. El reloj es un archivo de Flash. El men de la izquierda lleva a diferentes enlaces.
Procedimientos 1. Haga clic en el men Insertar > Tabla.
2. En el cuadro de dilogo Tabla, ingrese los siguientes datos: Filas 3, Columnas 3, Ancho de tabla 800 pixeles y las dems propiedades en 0.
CIBERTEC
49
3. Haga clic en el botn Aceptar.
4. Seleccione todas las celdas de la tabla y cambie la propiedad Vert a la opcin Superior.
5. Seleccione la primera celda y asigne, en la propiedad An (ancho), el valor 150.
Haga clic en la primera celda de la nueva Tabla
6. Haga lo mismo con la segunda y tercera celda con el valor 450 y 200 respectivamente. 7. Seleccione las celdas de la primera fila y haga clic en el botn Combina las celdas seleccionadas usando extensores para que las tres celdas se unan en una sola celda.
CIBERTEC
50
8. Haga clic en la celda unida y luego inserte una tabla de 1 fila por 2 columnas.
9. Arrastre la imagen acurarsx.jpg del panel Archivos hacia la primera celda de la nueva tabla.
CIBERTEC
51
10. Ajuste el ancho de la columna de esa celda al ancho de la imagen.
11. Luego, haga clic en la celda de la derecha y asigne como imagen de fondo al archivo acurarelleno.jpg
12. Ajuste el alto de dicha celda al alto de la imagen acurarsx.jpg.
Para ello,
seleccione la lnea horizontal que divide a las celdas y arrastre hacia arriba para ajustar el alto de la primera fila.
13. Posteriormente, siga las indicaciones de su profesor para terminar el ejercicio.
CIBERTEC
52
ACTIVIDADES A DESARROLLAR EN CLASE: PLANTILLAS

Actividad 5 Disear la siguiente pgina web con plantillas.
1. Cree una plantilla de la siguiente manera:
a) Seleccione la opcin Nuevo del men Archivo.
b) Seleccione la categora Plantilla en blanco y Plantilla HTML.
c) En la seccin Diseo, seleccione la opcin <ninguno>
CIBERTEC
53
d) Luego, haga clic en el botn Crear.
2. A continuacin, disee la plantilla
a) Inserte una tabla con las siguientes propiedades:
b) Inserte la imagen departamentos.gif en la columna de la izquierda. c) Ajuste el ancho de las columnas a 150 y 550px respectivamente.
3. Cree las regiones repetidas y editables.
a) Haga clic sobre la imagen departamentos.gif y seleccione en el men Insertar > Objetos de plantilla > Regin repetida.
b) Haga clic en Aceptar.
c) Haga clic en la celda de la derecha y seleccione en el men Insertar > Objetos de plantilla/ Regin editable.
d) Haga clic en Aceptar.
CIBERTEC
54
4. Grabe su plantilla con el nombre modelo.
a) Seleccione el men Archivo > Guardar.
5. Cree las pginas web (ndice, lima, cuzco, puno y huaraz) basadas en la plantilla modelo de la siguiente manera:
a) Seleccione el men Archivo > Nuevo.
b) Haga clic en Pgina de plantilla.
c) Seleccione el Sitio al que pertenece la plantilla. d) Seleccione el nombre de la plantilla con el nombre modelo.
e) Haga clic en el botn Crear.
CIBERTEC
55
f)
Ingrese el contenido correspondiente para cada archivo y, luego, lo graba con los nombres Indice, Lima, Cuzco, Puno y Huaraz respectivamente.
6. Cree los enlaces, desde la plantilla modelo.dwt, para cada archivo.
7. Grabe nuevamente su plantilla modelo. Dreamweaver le mostrar la siguiente ventana:
8. Haga clic en el botn Actualizar para actualizar todas las pginas asociadas a la plantilla.
9. Haga clic en el botn Cerrar para terminar la actualizacin.
CIBERTEC
56
10. Finalmente, grabe todos los archivos asociados a la plantilla y ejecute el archivo indice.html
CIBERTEC
57
ACTIVIDADES A DESARROLLAR EN CLASE: FORMULARIOS

Actividad 6 Disear una pgina web con un formulario que pida informacin al usuario.
Procedimiento:
1. Cree una nueva pgina HTML.
2. Grabe el archivo con el nombre formulario.
3. Haga clic en la barra de herramienta Insertar y seleccione la ficha Formularios.
4. Haga clic en el botn Formulario para insertar un formulario.
CIBERTEC
58
5. Inserte una tabla de 3 columnas por 11 filas y 500px de ancho.
6. Defina el ancho de las columnas en 150, 10 y 340 px respectivamente.
7. Ingrese el texto Nombres y Apellidos.
8. Inserte un objeto Campo de texto en la tercera columna.
9. Aplique las siguientes propiedades:
10. Ingrese el texto Contrasea en la segunda fila de la primera columna.
11. Inserte otro objeto Campo de texto en la tercera columna.
12. Active la propiedad Contrasea.
CIBERTEC
59
13. Ingrese el texto Adjunte su currculo en la tercera fila de la primera columna.
14. Inserte un objeto Campo de archivo en la tercera columna.
15. Ingrese el texto Estado Civil en la cuarta fila de la primera columna.
16. Inserte un objeto Botn de opcin en la tercera columna y, luego, el texto Soltero. Haga lo mismo para el estado civil Casado.
17. Ingrese el texto Sexo en la quinta fila de la primera columna.
18. Inserte un objeto Botn de opcin en la tercera columna y, luego, el texto Femenino. Haga lo mismo para el sexo Masculino.
19. Ejecute su pgina web presionando la tecla de funcin F12. Compruebe el comportamiento de los botones de opcin.
CIBERTEC
60
20. Asigne a la propiedad nombre de los botones de opcin Soltero y Casado el valor radioEstado.
21. Asigne a la propiedad nombre de los botones de opcin Femenino y Masculino el valor radioSexo.
22. Ejecute, otra vez, su pgina web presionando la tecla de funcin F12. Compruebe el comportamiento de los botones de opcin.
23. Ingrese el texto Estudios realizados en la sexta fila de la primera columna.
24. Inserte un objeto Casilla de verificacin en la tercera columna y, luego, el texto Primaria. Haga lo mismo para los textos Secundaria y Superior.
25. Ingrese el texto Distrito de residencia en la sptima fila de la primera columna.
26. Inserte un objeto Lista/men en la tercera columna.
CIBERTEC
61
27. Con este objeto seleccionado en la pgina, haga clic en el botn Valores de lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para el objeto.
28. Haga clic en el botn Aceptar para terminar.
29. Ingrese el texto Seleccione uno o varios Softwares que domina en la octava fila de la primera columna.
30. Inserte otro objeto Lista/men en la tercera columna.
31. Modifique las siguientes propiedades de este nuevo objeto:
32. Con este objeto seleccionado en la pgina, haga clic en el botn Valores de lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para el objeto.
CIBERTEC
62
33. Haga clic en el botn Aceptar para terminar.
34. Ingrese el texto Comentarios en la novena fila de la primera columna.
35. Inserte un objeto rea de texto en la tercera columna.
36. Modifique las propiedades Ancho car y Lneas nm a 40 y 6 respectivamente.
CIBERTEC
63
ACTIVIDADES PROPUESTAS
Disee la siguiente pgina web usando capas div o tablas.
Disee la siguiente pgina web usando capas div o tablas.
CIBERTEC
64
Disee los siguientes formularios:
CIBERTEC
65
Resumen
Antes de empezar a trabajar en Dreamweaver, es necesario que cree un Sitio web. Si va a editar, en su PC, una o varias pginas que fueron creadas en otra computadora, debe primero crear un sitio. Dreamweaver ofrece dos mtodos de visualizacin y manipulacin de tablas: el modo estndar, en el que las tablas se presentan en forma de cuadrcula de filas y columnas, y el modo de diseo, que permite dibujar, cambiar el tamao y mover cuadros en la pgina mientras se siguen utilizando tablas para la estructura subyacente. Si desea saber ms acerca de estos temas, puede consultar las siguientes pginas: http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm Aqu, hallar un tutorial de HTML. http://www.programatium.com/dreamweaver.htm En esta pgina, hallar un tutorial de Dreamweaver. http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablatut.htm Aqu, hallar ejercicios sobre la etiqueta table para el diseo de tablas. http://www.tutorial-enlace.net/tutorial-Como_insertar_tablas_en_Dreamweaver22268.html http://livedocs.adobe.com/studio/8_es/exploring/wwhelp/wwhimpl/common/html/w whelp.htm?context=LiveDocs_Parts&file=gs_04_pa.htm En estas pginas, hallar un tutorial sobre tablas con Dreamweaver.
CIBERTEC
66
CIBERTEC
67
2
ESTILOS CSS
Al trmino de la unidad, los alumnos construyen un sitio web y aplican estilos CSS a los elementos de dicho sitio.
TEMARIO
2.1. Tema 1: Introduccin a estilos CSS (2 horas) 2.2. Tema 2: CSS para textos (2 horas) 2.3 Tema 3: CSS para contenedores (2 horas) Trabajo prctico No. 3: Desarrollo de un sitio web con estilos CSS 2.4 Tema 4: CSS para formularios (2 horas)
Los alumnos disean pginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de estilos CSS.
CIBERTEC
68
CIBERTEC
69
2.1 INTRODUCCIN A ESTILOS CSS

Un estilo es un conjunto de comportamientos o formatos aplicado a una etiqueta HTML que, finalmente, modificar el diseo de una pgina web. Tenemos varias posibilidades para definir un estilo:
Estilos de etiqueta Estilos de encabezado Estilos importados
2.1.1 Estilos de etiqueta

Los formatos le dan diferentes aspectos a los textos y prrafos. HTML tiene etiquetas propias para aplicar estos formatos. Sin embargo, en esta sesin, lo usaremos como una propiedad del atributo STYLE de cualquier etiqueta.
Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis:

<etiqueta </etiqueta> STYLE=propiedad1:valor;...;propiedadN:valor> ...
Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (<P>, <B>, <I>, etc.)
STYLE es el parmetro que indica que vamos a aplicar uno o varios estilos. La definicin del estilo se establece por medio de pares (propiedad:valor) separados por punto y coma. Propiedad ser la caracterstica de la etiqueta que se quiere modificar (color, tamao de la fuente, tipo de letra, etc).
Valor es el valor que queremos darle (color negro, 8 puntos de tamao de letra.
Por ejemplo, si tenemos un texto en negrita y queremos que salga con un tamao de letra 14 y en color rojo, escribiremos lo siguiente en la vista
CIBERTEC
70
cdigo: <B STYLE=font-size:14pt;color:red>. La negrita que vemos es ms grande y est en rojo </B>.
2.1.2 Estilos de encabezado

Dentro del TAG o etiqueta <STYLE> que fue mencionado anteriormente, tambin, es posible definir el comportamiento de TAGS o de etiquetas que afectarn el documento.
Para crear estilos a nivel de encabezado, haga lo siguiente:
1. Abra un archivo html que tenga diversos objetos insertados como imgenes, textos, tablas, enlaces, etc.
2. Active la ficha Estilos CSS del Panel CSS.
3. Haga clic en el botn Todo si no est activado todava.
4. Luego, haga clic en el botn Nueva regla CSS.
5. En el cuadro de dilogo Nueva regla CSS, seccione la opcin Etiqueta (define de nuevo el aspecto de una etiqueta especfica) en Tipo de selector.
CIBERTEC
71
6. En Definir en, seleccione la opcin Slo este documento.
7. En el cuadro Etiqueta, seleccione la etiqueta que desea usar para crearle estilos o escriba el nombre.
8. Haga Clic en Aceptar para continuar.
9. En el cuadro de dilogo Definicin de regla para body, seleccione la categora en la lista de la izquierda y los estilos correspondientes en el lado derecho.
10. Para salir de este cuadro, haga clic en Aceptar. Repita los pasos 4 al 9 para asignar estilos a otra etiqueta.
CIBERTEC
72
11. Inserte textos en su documento para ver los efectos de los estilos de encabezado.
2.1.3 Estilos importados

Un estilo importado se crea en un archivo con extensin css. La definicin de los estilos para cada comportamiento o formato de una etiqueta determinada es similar a la de estilos de encabezado. El archivo css se vincula a varias pginas web para que stas modifiquen su comportamiento de acuerdo a las indicaciones del archivo css. Dreamweaver crea una
etiqueta de vinculacin en la pgina web mediante las siguientes instrucciones:

<link rel=stylesheet type=text/css href=/css/estilo.css>
@import url(http://www.osmosislatina.com/css/estilo.css)
Las dos formas se pueden usar para realizar la vinculacin entre una pgina web y un archivo css.
La ventaja que presenta esta metodologa es la posibilidad de definir cierto formato y, con slo una lnea, definir el comportamiento a lo largo de un conjunto de documentos. La diferencia de ambas lneas superiores estriba en la manera en que son declaradas en el documento.
CIBERTEC
73
Para crear estilos importados en Dreamweaver, haga lo siguiente:
1. Cree un documento nuevo tipo CSS. Para ello, haga clic en el men Archivo > Nuevo.
2. Seleccione la opcin CSS.
3. Haga clic en el botn Crear.
4. Para crear un estilo, active el Panel CSS.
5. Haga clic en el botn Nueva regla CSS.
CIBERTEC
74
7. Seleccione un Tipo de selector: Clase se refiere a estilos personalizados que pueden aplicarse a cualquier etiqueta html; Etiqueta, a estilos de etiqueta html; y Avanzadas, a estilos para los enlaces.
8. En el cuadro Nombre, seleccione o escriba el nombre del estilo.
9. En el cuadro Definir en, seleccione la opcin Slo este documento.
10. Haga clic en el botn Aceptar para disear los estilos.
11. Seleccione los estilos por cada categora.
CIBERTEC
75
12. Haga clic en el botn Aceptar para salir.
13. Para insertar otro estilo y agregarla a la hoja de estilos, haga clic nuevamente en el botn Nueva regla CSS del Panel CSS.
En lo sucesivo, los ejemplos de estilos se referirn a estilos importados.
Utilizacin del panel Estilos CSS
En ambos modos, Todo y Actual, el panel Estilos CSS contiene tres botones que permiten modificar la vista del panel Propiedades (el panel inferior):
A.
Vista de categora B. Vista de lista C. Vista de las propiedades establecidas
1. Vista de categora Divide las propiedades CSS compatibles con Dreamweaver en ocho categoras: fuente, fondo, bloque, borde, cuadro, lista, posicin y extensiones. Las propiedades de cada categora se encuentran en una lista que se puede expandir o contraer haciendo clic en el botn con el signo ms (+) que aparece al lado del nombre de la categora. Las propiedades aparecen (en color azul) en la parte superior de la lista.
2. Vista de lista Muestra todas las propiedades CSS compatibles con Dreamweaver por orden alfabtico. Las propiedades aparecen (en color azul) en la parte superior de la lista.
3. Vista de las propiedades establecidas Slo muestra las propiedades que se han establecido. propiedades establecidas es la vista predeterminada. La vista de
CIBERTEC
76
En ambos modos, Todo y Actual, el panel Estilos CSS, tambin, contiene los siguientes botones:
A. Adjuntar hoja de estilos B. Nueva regla CSS C. Editar estilo D. Eliminar regla CSS
4. Adjuntar hoja de estilos Abre el cuadro de dilogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual.
5. Nueva regla CSS Abre un cuadro de dilogo en el que es posible seleccionar el tipo de estilo que va a crear (por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS).
6. Editar estilo CSS Abre un cuadro de dilogo en el que es posible editar los estilos del documento actual o de una hoja de estilos externa.
7. Eliminar regla CSS Elimina el estilo o la propiedad seleccionada del panel Estilos CSS, as como el formato de cualquier elemento al que se haya aplicado. Sin embargo, no elimina las propiedades de clase o ID a las que hace referencia dicho estilo. El botn Eliminar regla CSS, tambin, permite anular la asociacin (o "desvincular") una hoja de estilos CSS adjunta.
CIBERTEC
77
2.2 CSS PARA TEXTOS

Atributo font-family El atributo font-family determina la fuente para el estilo de una pgina o partes de sta. Consideremos, por ejemplo, que queremos aplicar una fuente tipo "arial" a todo el documento. Lo que sigue es el modo correcto de aplicar el estilo: BODY { font-family:arial }
Atributo font-size El atributo establece las dimensiones del texto. Utiliza diferentes medidas:
BODY { font-size:12pt } BODY { font-size:12px } BODY { font-size:1in } BODY { font-size:3cm } BODY { font-size:200% } BODY { font-size:2em }
Atributo font-style El atributo font-style indica el estilo para la fuente. Es posible impostar distintos valores: BODY { font-style:normal }
BODY { font-style:italic } BODY { font-size:oblique }
Atributo text-decoration El atributo text-decoration permite adornar el texto con subrayados y otros efectos. Puede asumir distintos valores (none, underline, italic y line-height): BODY { text-decoration: none } BODY { text-decoration: underline } BODY { text-decoration: italic } BODY { text-decoration: line-height }
CIBERTEC
78
Elimina los subrayados de los enlaces. A { text-decoration: none }
El subrayado aparece slo cuando el mouse pasa encima del enlace: A:link, A:visited { text-decoration: none } A:hover { text-decoration: underline }
Atributo list-style El atributo list-style permite sustituir los puntos lista estndar de HTML con imgenes en formato GIF. Es posible aplicar tales puntos o toda la lista o slo a una parte de la lista. UL { list-style-image:URL(punto.gif) }
2.3 CSS PARA CONTENEDORES

Un contenedor o capa es una divisin, una parte de la pgina, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y mover independientemente. Atributo position El atributo position indica el tipo de posicionamiento de la capa. valores: relative absolute. relative.- indica que la posicin de la capa es relativa al lugar donde se estaba escribiendo en la pgina. absolute.- indica que la posicin de la capa se calcula con respecto al punto superior izquierdo de la pgina. Tiene dos
CIBERTEC
79
Atributo top El atributo top indica la distancia en vertical donde se colocar la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la pgina. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo, en ese momento, en la pgina hasta el borde superior de la capa.
Atributo left El atributo left funciona igual que el atributo top, pero con la diferencia de que el atributo left indica la distancia en horizontal a la que estar situada la capa. Atributo height El atributo height sirve para indicar la altura de la capa. Atributo width El atributo width Indica la anchura de la capa.
Atributo visibility El atributo visibility sirve para indicar si la capa es visible o invisible al usuario. Este atributo puede tener tres valores: visible. inherit.sirve para indicar que la capa se podr ver. hidden.- indicar que la capa est oculta. es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible. Atributo z-index El atributo z-index sirve para indicar qu capas se vern encima o debajo de otras, en caso de que estn superpuestas. Este atributo toma valores numricos y a mayor z-index, ms arriba se ver la pgina.
CIBERTEC
80
2.4 CSS PARA FORMULARIOS

Con CSS es posible presentar formularios de manera personalizada de acuerdo con el estilo de la pgina. Para ello, slo se utilizarn 4 etiquetas.
Input input { background-color: #B0E0E6; font: 12px verdana, arial, helvetica, sans-serif; color:#003399; border:2px solid #000099; }
select select { background-color: #B0E0E6; font:12px verdana, arial, helvetica, sans-serif; color:#003399; }
textarea textarea { background-color: #B0E0E6; font:12px verdana, arial, helvetica, sans-serif; color:#003399; }
form form.login { background-color: #FFFFCC; width:380px; }
CIBERTEC
81

Actividad 1
Desarrolle una hoja de estilos importados que defina el formato de las pginas web de la siguiente forma: Estilos etiqueta: body, table, ul, Estilos avanzados: a:link, a:hover Estilos clase: miTabla, que modifique los bordes y el color de fondo. miVieta, que modifique el cono de la vieta por otra imagen.
1. Cree un documento nuevo tipo CSS. Para ello, haga clic en el men Archivo > Nuevo.
2. Seleccione la opcin CSS.
3. Haga clic en el botn Crear.
4. Para crear un estilo, active el Panel CSS.
CIBERTEC
82
6. Seleccione la opcin Etiqueta en Tipo de selector y la opcin Slo este documento en Definir en.
7. Escriba o seleccione el nombre de la etiqueta body en el cuadro Etiqueta.
8. Haga clic en el botn Aceptar.
9. Seleccione en la categora Tipo los formatos que desee aplicar a toda la pgina web representada por la etiqueta body.
CIBERTEC
83
10. En su pantalla, se mostrar el siguiente cdigo:
CIBERTEC
84
Actividad 2
El siguiente ejemplo crea textos con sombra mediante el uso de capas con estilo.
1. Defina los siguientes estilos en el encabezado de la pgina web. Puede escribirlo en la ventana Cdigo o insertarlo con el Panel CSS. div.titulo { margin-top: -24px; color: blue; font-size: 20px; } div.sombra { margin-top: 2px; margin-left: 2px; color: red; font-size: 20px; }
2. Escriba el siguiente cdigo HTML o inserte dos capas con el texto El maravilloso curso de HTML.
<DIV ALIGN=CENTER CLASS=sombra>El maravilloso curso de HTML</DIV> <DIV ALIGN=CENTER CLASS=titulo>El maravilloso curso de HTML</DIV>
El resultado ser un texto con sombra.
CIBERTEC
85
Actividad 3
Compruebe las diferentes formas de utilizar estilos en un documento.
El siguiente estilo no debera usarse en el diseo de una pgina.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Un estudio sobre la dinmica de la poblacin</TITLE> </HEAD> <BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon"> ... cuerpo del documento ... </BODY> </HTML>
Si usa hojas de estilo, puede conseguir el mismo efecto de la siguiente manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Un estudio sobre la dinmica de la poblacin</TITLE> <STYLE type="text/css"> BODY { background: white; color: black } A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE> </HEAD> <BODY> ... cuerpo del documento ... </BODY> </HTML>
CIBERTEC
86
El usar hojas de estilo externas (vinculadas) nos da flexibilidad para cambiar la presentacin sin tener que revisar el documento fuente HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Un estudio sobre la dinmica de la poblacin</TITLE> <LINK rel="stylesheet" type="text/css" href="estilolisto.css"> </HEAD> <BODY> ... cuerpo del documento ... </BODY> </HTML>
CIBERTEC
87

Diseo de la estructura de una pgina web con estilos CSS 1. Estructura a disear
2. Estilo css a usar body{ margin:0; padding:0; line-height: 1.5em; } b{font-size: 110%;} em{color: red;} #topsection{ background: #EAEAEA; height: 90px; }
CIBERTEC
88
#topsection h1{ margin: 0; padding-top: 15px; } #contentwrapper{ float: left; width: 100%; } #contentcolumn{ margin: 0 200px 0 230px; } #leftcolumn{ float: left; width: 230px; height: 300px; margin-left: -100%; background: #C8FC98; } #rightcolumn{ float: left; width: 200px; margin-left: -200px; background: #FDE95E; height: 300px; } #footer{ clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }
CIBERTEC
89
#footer a{ color: #FFFF80; }
3. Cdigo html de la estructura de la pgina web <html> <head> <title>Documento sin título</title> <link href="csspag1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="maincontainer"> <div id="topsection"> <div class="innertube"> <h1>Ttulo Encabezado</h1> </div> </div> <div id="contentwrapper"> <div id="contentcolumn"> <div class="innertube"> <b>Seccin del contenido de cada men </div> </div> </div> <div id="leftcolumn"> <div class="innertube"> <b>Left Column: <em>230px</em></b> Seccin para el men de navegacin </div> </div>
CIBERTEC
90
<div id="rightcolumn"> <div class="innertube"> <b>Right Column: <em>200px</em></b> Seccin de avisos </div> </div> <div id="footer"> Seccin para el pie de la pgina web </div> </div> </body> </html>
CIBERTEC
91

2. Estilo css a usar /* Archivo base.css de Base2.html */ /*********************************************************/ /*PRIMERO DEFINIR EL BODY Y TODOS LOS ESTILOS PARA TEXTOS*/ /*********************************************************/ body { background-color:#FFF; text-align : justify; line-height: 10px; font:11px Verdana, Arial, Helvtica, sans-serif; color: #586885; }
CIBERTEC
92
p h1
{} { font:25px Verdana, Arial, Helvtica, sans-serif; text-align : left; color : #666666; margin:0px;
} h2 { font:bold 20px Verdana, Arial, Helvtica, sans-serif; text-align : left; color:#486895; text-transform: capitalize; } h3 { font:18px Verdana, Arial, Helvtica, sans-serif; color : #666; } h4 h5 h6 { font:bold 15px Verdana, Arial, Helvtica, sans-serif;} { font: 13px Verdana, Arial, Helvtica, sans-serif;} { font:bold 12px Verdana, Arial, Helvtica, sans-serif;}
/***************************/ /* ESTILOS PARA LOS BOTONES*/ /***************************/ a { text-decoration: none; font-size:12px; color:#325FA0; }
CIBERTEC
93
a:link {} a:visited {} a:hover { color:#000066; text-decoration:underline; background-color:#0099CC; } a:active { color:#0099CC; } /************************************************************/ /*AHORA, VAMOS A DEFINIR LAS CAJAS QUE HEMOS CREADO EN XHTML*/ /************************************************************/ /*PRIMERO HACEMOS UN CONTENEDOR GENERAL*/ div#CONTAINER {
background-color:#DDE6AC; border:solid #000; margin: 0 auto; /*auto: los mrgenes se acomodan segn lo que haya dentro*/ width:700px; height:auto; /*auto: el ancho depender de lo que haya dentro*/ } /* HACEMOS LOS CONTENEDORES INTERNOS*/ div#header{ width:700px; height:140px; background-color:#CC9933; border-bottom:solid #000; margin:0 0 10px 0; /*10 pxeles abajo para separar el footer*/ }
CIBERTEC
94
div#izquierda{ width:100px; height:auto; background-color:#EFEFEF; border: 1px solid; border-color:#000; margin:0 0 0 5px; float:left; padding:3px; } div#izquierda ul { font:bold 11px Verdana, Arial, Helvtica, sans-serif; /*Importante definirlo, pues no toma el estilo del body*/ line-height: 140%; text-transform:capitalize; } div#derecha{ width:150px; height:auto; background-color:#FFFFDD; border:1px solid; color:#000 margin:0 5px 0 0; float:right; padding:5px; } /*AHORA, HACEMOS EL CONTENEDOR PRINCIPAL */ /*700px(anchura total)-100px(anchura de la div "izquierda")150px(anchura de la div "derecha")-20px(total de los margins)34px(total de los paddings)-6px (total de los borders)=390px.*/ div#principal{ width:390px; height:auto;
CIBERTEC
95
background-color:#FFF; border:1px solid #000; margin:0 5px 0 117px; /*El valor 117 aleja la div principal de la div izquierda*/ /*Probar borrando el 117 y poniendo 0*/ padding:10px; } /*AHORA, HACEMOS EL CONTENEDOR FOOTER */ div#footer{ width:auto; height:30px; background-color:#FFF; border:1px solid #000;; margin:5px; } div#footer h6{ text-align:center; text-transform:uppercase; margin:5px auto; color:#666; font:bold 10px Verdana, Arial, Helvtica, sans-serif; }
3. Cdigo html de la estructura de la pgina web <html> <head> <title>Web armada con CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <link href="base.css" rel="stylesheet" type="text/css" />
CIBERTEC
96
</head> <body> <div id="CONTAINER"> <div id="header"> <h1>Cabecera h1</h1> </div> <div id="izquierda"> <ul> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> </ul> </div> <div id="derecha"> <p>aqu, se podra colocar una imagen, anuncios, ms vnculos, las tpicas imgenes de Sindicar RSS, etc...</p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/cssvalidator/images/vcss" alt="Valid CSS!"/> </a> <br/> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"/> </a> </div> <div id="principal"> <h2>Ttulo del contenido h2</h2>
CIBERTEC
97
<h3>Subttulo h3</h3> <p> Este es un texto de prueba para rellenar y ver como se ven los prrafos ordenados y que hacen caso al estilo...excepto que...quien t sabes no permita que funcione bien. </p> <h3>Otro Subttulo h3</h3> <h4>Subttulo h4</h4> <p> Este es un texto de prueba para rellenar y ver como se ven los prrafos ordenados y que hacen caso al estilo...excepto que...quien t sabes no permita que funcione bien. </p> <h4>Otro Subttulo h4</h4> <p> Este es un texto de prueba para rellenar y ver como se ven los prrafos ordenados y que hacen caso al estilo...excepto que... <a href="http://www.google.com">quien t sabes</a> no permita que funcione bien. </p> </div> <div id="footer"> <h6>Cibertec 2011, archivo reservado</h6> </div> </div> </body> </html>
CIBERTEC
98

2. Estilo css a usar: /*************************************/ /*ESTILOS BSICOS DE LAS WEB Y TEXTOS*/ /*************************************/ body { text-align: justify; background: url(images/fondo1.jpg); font-family:Arial, Helvetica, sans-serif; font-size:11px; margin: 30px; } h1{ color:#990000; font-size:20px; text-align:left;
CIBERTEC
99
margin: 0; } div#t1{ width:320px; padding: 20px; float:left; } h2{ color: #336600; font-size:20px; text-align:left; margin: 0; } div#t2{ width:320px; padding:20px; float:right; } /*********************************/ /*ESTILOS PARA LA FORMA DE LA WEB*/ /*********************************/ div#principal{ width:750px; height:550px; background-color: #FFFFFF; margin: 0 auto; padding: 5px; } div#cabecera{ background-image:url(images/cabecera.jpg); background-repeat:no-repeat; width:750px;
CIBERTEC
100
height:177px; padding: 0 0 5px 0; } div#productos{ width:750px; height:200px; } div#productos1{ background-image:url(images/producto1.jpg); background-repeat:no-repeat; width:250px; height:200px; float:left; } div#productos2{ background-image:url(images/producto2.jpg); background-repeat:no-repeat; width:250px; height:200px; margin:0 0 0 250px; } div#productos3{ background-image:url(images/producto3.jpg); background-repeat:no-repeat; width:250px; height:200px; margin:-200px 0 0 0; float:right; }
CIBERTEC
101
3. Cdigo html de la estructura de la pgina web <html> <head> <title>Documento sin título</title> <link href="estilo de prueba.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="principal"> <div id="cabecera"> </div> <div id="productos"> <div id="productos1"></div> <div id="productos2"></div> <div id="productos3"> </div> </div> <div id="textos"> <div id="t1"> <h1>TTULO 1</h1> Bla en las playas y con su ropa charlie para que veranees en vacaciones. Te juntas con tu mancha y se llevan el carro, y se van a tonear. </div> <div id="t2"> <h2>TTULO 2</h2> Bla en las playas y con su ropa charlie para que veranees envacaciones. a tonear. </div> Te juntas con tu mancha y se llevan el carro, y se van
CIBERTEC
102
</div> </div> </body> </html>
CIBERTEC
103

2. Estilo css a usar: #wrapper { width:520px; height:520px; z-index:1; margin: auto; background-color: #0FF; } #header { position:relative; width:520px;
CIBERTEC
104
height:100px; z-index:2; background-color: #F50; } #footer { position:relative; width:520px; height:50px; z-index:3; left: 0px; top: 0px; background-color: #F00; } #fotos { position:relative; width:520px; height:370px; z-index:4; left: 0px; top: 0px; background-color: #FCC; } #foto { width:160px; height:170px; float:left; margin-top: 10px; margin-left: 10px; background-color: #0ff; } img{ border:0px; }
CIBERTEC
105
3. Cdigo html de la estructura de la pgina web
<html> <head> <title>Documento sin ttulo</title> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="fotos"> <div id="foto"> <a title="Ir a Intranet" href="http://intranet.cibertec.edu.pe"> <img src="img01.jpg"> </a> </div> <div id="foto"> <p class="t1">Haga <a title="Ir a Intranet" href="http://intranet.cibertec.edu.pe"> clic aqu </a> para ms informacin</p> </div> <div id="foto"> <a title="Ir a Intranet" href="http://intranet.cibertec.edu.pe"> <img src="img02.jpg"> </a> </div> <div id="foto"> <p class="t1"> Haga <a href="http://intranet.cibertec.edu.pe">clic aqu</a> para ms informacin.</p> </div> <div id="foto"> <a href="http://intranet.cibertec.edu.pe">
CIBERTEC
106
<img alt="Ir a Intranet" src="img03.gif"> </a> </div> <div id="foto"> <p class="t1">Haga <a href="http://intranet.cibertec.edu.pe"> clic aqu</a> para ms informacin. </p> </div> </div> <div id="footer"></div> </div> </body> </html>
CIBERTEC
107

Diseo de una capa de textos con barra de desplazamiento con estilos CSS
La hoja de estilo div.scroll { height: 200px; width: 400px; overflow: auto; border: 3px solid #00ffff; background-color: #ffff00; padding: 8px; scrollbar-base-color: orange; scrollbar-arrow-color: green; scrollbar-DarkShadow-Color: blue; }
El archivo html <html> <head> <title>Documento sin título</title> <link href="estiloDiv.css" rel="stylesheet" type="text/css">
CIBERTEC
108
</head> <body> <div class="scroll"> <p>This is a scrolling are created with the CSS property overflow.</p> <p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> <p>This is a normal paragraph. <span style="font-weight: bold; font-size: 22px;">This is big bold text</span></p> <p>This scrolling are can contain normal html like <a href="index.php">link</a></p> <p class="scroll">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p> </div> </body> </html>
CIBERTEC
109
Seleccione cinco pginas web creadas en las sesiones anteriores y aplique estilos de encabezado que afecten a toda la pgina como listas con imgenes, tamao de fuente por defecto, mrgenes, alineacin de los prrafos, etc. Cree una hoja de estilos con el nombre importar.css y, en ella, utilice diferentes etiquetas con determinados formatos que afectarn a sus documentos. Luego, abra sus pginas web creadas en sesiones anteriores e importe dicho archivo.
CIBERTEC
110
CIBERTEC
111
Resumen
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentacin de un documento estructurado escrito en HTML. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Se puede aplicar estilos a un sitio web completo, de modo que se puede definir la forma de todas las pginas del sitio web de una sola vez. Se puede aplicar estilos a un documento HTML o pgina, de modo que se puede definir la forma en un pequeo trozo de cdigo en la cabecera a toda la pgina. Se puede aplicar estilos a una etiqueta en concreto y llegar, incluso, a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante, ya que ofrece potencia en nuestra programacin. Podemos definir, por ejemplo, varios tipos de prrafos: en rojo, en azul, con mrgenes, sin ellos, etc. Si desea saber ms acerca de estos temas, puede consultar las siguientes pginas: http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo Aqu, hallar una gua breve sobre hojas de estilos en cascada (CSS). http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html En esta pgina, hallar un tutorial completo y prctico sobre hojas de estilo en cascada (CSS). http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css En esta pgina, hallar un tutorial bsico de CSS.
CIBERTEC
112
CIBERTEC
113
JAVASCRIPT
Al trmino de la unidad, los alumnos, con el lenguaje JavaScript, disearn programas que incorporarn a una pgina del sitio web para validar formularios.
TEMARIO
3.1. Tema 1: Introduccin al lenguaje JavaScript. (2 horas) 3.2 Tema 2: Validacin de formularios con JavaScript. (2 horas) Trabajo prctico No. 4: Desarrollo de un sitio web con CSS y JavaScript
Los alumnos disean pginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de plantillas, estilos CSS y cdigos JavaScript para el formulario.
CIBERTEC
114
CIBERTEC
115
3.1 EL LENGUAJE JAVASCRIPT

El lenguaje JavaScript es el complemento ideal de HTML al permitirle a la pgina realizar algunas tareas por s misma sin necesidad de estar sobrecargando el servidor del cual depende.
Entre estas tareas pueden estar, por ejemplo, realizar algunos clculos simples, formatear un texto para que pueda ser ledo por distintas personas de manera distinta, proveer de un medio para configurar la visualizacin de una pgina, realizar un pre-chequeo de validacin en un formulario antes de enviarlo, etc.
El cdigo fuente de los programas escritos en JavaScript est incluido en las mismas pginas web donde se ejecutarn. Esto difiere de los applets de Java que son cargados en forma independiente a las pginas web.
Tambin, se podr cargar un archivo de JavaScript (.js) a una pgina web, pero el cdigo siempre ser fuente. Esto difiere de los applets de Java que se cargan como cdigo compilado.
JavaScript es soportado por muchos browsers.
Al cargar una pgina web,
Netscape e Internet Explorer pueden interpretar este lenguaje.
El browser toma el archivo fuente de JavaScript y lo ejecuta (interpreta). Para que esto suceda, el cdigo debe estar en fuente. Por consecuencia, se presentan algunas ventajas como las siguientes:
Las actualizaciones son sobre el cdigo sin necesidad de volver a compilar. Se transfiere con el cdigo HTML de la misma pgina web. Adems, los lenguajes interpretados son ms fciles de aprender.
Su desventaja sera que siempre el cdigo desarrollado es visible para otros usuarios (no hay forma de protegerlo).
El lenguaje Java compila su cdigo antes del tiempo de ejecucin. En JavaScript, el cdigo fuente se ejecuta directo y es interpretado por el browser que lo carg.
CIBERTEC
116
JavaScript proporciona un gran conjunto de objetos integrados que permiten trabajar muy bien con los elementos de un documento web.
3.1.1 Modelo de programa en JavaScript

Los programas en JavaScript son pequeos y reciben informacin a travs de eventos y propiedades de los objetos, y responden mediante propiedades de objetos y mtodos.
Podemos determinar ciertas reglas bsicas para el desarrollo de todo programa en JavaScript:
Para empezar un cdigo en JavaScript, debe usar la siguiente etiqueta o directiva: <SCRIPT LANGUAGE=JavaScript>
Es posible que el browser no permita este lenguaje; por lo tanto, debe poner el cdigo JavaScript entre comentarios HTML: <!- - - >
Entre los comentarios anteriores, debe ir el cdigo JavaScript: document.write(Bienvenido a JavaScript);
Donde: document es el objeto que hace referencia a la pgina actual en el browser. write es el mtodo de este objeto que permite escribir en la pgina actual en el browser. Si se hace una siguiente escritura, se har a continuacin de la ltima.
Cuando terminamos nuestro programa, despus del cierre de comentarios de HTML, debemos cerrar la etiqueta que abrimos (<SCRIPT
LANGUAGE=JavaScript>) con </SCRIPT>
CIBERTEC
117
Otra forma de usar JavaScript es creando un archivo con extensin js y llamarlo desde un documento html de la siguiente forma:
<HTML> <HEAD> <TITLE>JavaScript</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript SRC=P01.js> </SCRIPT> </BODY> </HTML>
3.1.2 Definicin de variables

Las variables en JavaScript pueden almacenar cualquier tipo de dato (cadenas o valores). Se considera un lenguaje de programacin de tipos libres, porque reconoce el dato asignado en la variable.
Para declarar una variable, se usa la sentencia var, luego la etiqueta que representa a la variable y, opcionalmente, puede asignar un dato en el momento de la declaracin.
Sintaxis: Var NombreDeVariable = valor / expresin / cadena
El nombre de la variable debe empezar con una letra o el caracter de subrayado (_) Ejemplos: var var var miVar1= JavaScript; miVar2= 123; miVar3= 123.45; // contenido: una cadena // contenido: un valor entero // contenido: un valor real
CIBERTEC
118
var var
miVar4,
miVar5, miVar6;
// sin contenido
miVar7=5, miVar8, miVar9=ABC;
A continuacin se declaran las variables Valor1, Valor2 y Suma, las cuales pueden ser asignadas con valores numricos o cadenas. Para este
ejemplo, se ha puesto, en ellas, valores numricos para realizar una suma.
Debe modificar el cdigo de declaracin de las variables de las siguientes formas y probar los resultados: 1) 2) 3) var Valor1=10, Valor2=20, Suma; var Valor1=10, Valor2=20, Suma = Valor1 + Valor2; var Valor1=10, Valor2=2*Valor1, Suma;
3.1.3 Mtodos bsicos de entrada y salida
3.1.3.1 El mtodo prompt

El mtodo prompt muestra un cuadro de dilogo, donde el usuario podr ingresar una cadena, la que ser retornada por este mtodo. Se puede especificar en forma opcional un valor por defecto, como muestra el formato siguiente:
prompt(mensaje [,entradaPredeterminada]);
CIBERTEC
119
Ejemplo:
<HTML> <HEAD> <TITLE>JavaScript</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> var Nombre; Nombre = prompt(Ingrese su nombre, Digite aqu su nombre); document.write(Hola + Nombre + , bienvenido a JavaScript); </SCRIPT> </BODY> </HTML>
Nota: Tambin, podra reemplazar esta lnea por las tres lneas del programa:
document.write(Hola nombre ) );
prompt(
Ingrese
su
3.1.3.2 El mtodo alert

El mtodo alert muestra un cuadro de dilogo de aviso con algn mensaje y sonido (beep) para el usuario. Tiene el siguiente formato: alert(MensajeDeAlerta);
CIBERTEC
120
Ejemplo:
<HTML> <HEAD> <TITLE>JavaScript</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> alert(Ud. est en JavaScript); </SCRIPT> </BODY> </HTML>
3.1.4 Tipos de operadores

JavaScript tiene una gran variedad de operadores, los que se encuentran en grupos. Estos son los siguientes:
Aritmticos + * / % ++ -Adicin Sustraccin Multiplicacin Divisin Mdulo Incremento Decremento
CIBERTEC
121
De Asignacin = += -= *= /= %= Asignacin Adicin-Asignacin Adicin-Asignacin Multiplicacin-Asignacin Divisin-Asignacin Mdulo-Asignacin
De comparacin == != > >= < <= Igual que Diferente que Mayor que Mayor o igual que Menor que Menor o igual que
Lgicos && || And Or
Otros ?: + Ternario Concatenar cadenas El primero es un condicional que si tiene como
Tiene 3 operandos.
resultado true, toda la expresin toma valor del segundo operando, caso contrario si es false, toda la expresin toma valor del tercer operando.
Presenta el siguiente formato: Operando1 ? Operando2 : Operando3
Ejemplos: var X; // El resultado de X == -20 // El resultado de X == 20
X= 10>5 ? 20 : 20; X= 5>10 ? 20 : 20;
CIBERTEC
122
3.1.5 Funciones
Una funcin ofrece a los programadores la capacidad de agrupar cdigo de programa que desempea una tarea especfica en una unidad individual que puede ser invocada cuando sta sea necesaria por el programador. De esta forma, se evita el tener cdigo repetido en el programa.
3.1.5.1 Formato de una Funcin

Para declarar una funcin, usamos el siguiente formato:
function
NombreDeLaFuncin(parmetro1, parmetro2, ,
parmetroN) { BloqueDeSentencias; return } Valor;
3.1.5.2 Cmo llamar a una funcin

Cuando se llaman a las funciones para ejecutar una funcin, la tenemos que llamar en cualquier parte de la pgina. Con eso, conseguiremos que se ejecuten todas las instrucciones que tiene la funcin entre las dos llaves. Para ejecutar la funcin, utilizamos su nombre seguido de los parntesis. NombreDeLaFuncion()
3.1.5.3 Dnde colocar las funciones?

En principio, podemos colocar las funciones en cualquier parte de la pgina, siempre entre etiquetas <SCRIPT> claro est. No obstante,
CIBERTEC
123
existe una limitacin a la hora de colocarla con relacin a los lugares desde donde se la llame. Lo normal es colocar la funcin antes de As, es seguro que nunca nos
cualquier llamada a la misma. equivocaremos.
3.1.5.4 Parmetros de las funciones

Las estructuras que hemos visto anteriormente sobre funciones no son las nicas que debemos aprender para manejarlas en toda su potencia. Las funciones, tambin, tienen una entrada y una salida que se pueden utilizar para recibir y devolver datos.
Los parmetros se usan para mandar valores a la funcin con los que ella trabajar para realizar las acciones. Son los valores de entrada que
recibe una funcin. Por ejemplo, una funcin que realiza una suma de dos nmeros tendra como parmetros a esos dos nmeros. Los dos nmeros son la entrada, as como la salida sera el resultado. Eso lo veremos ms adelante.
Veamos un ejemplo anterior en el que crebamos una funcin para mostrar un mensaje de bienvenida en la pgina web, pero al que ahora le vamos a pasar un parmetro que contendr el nombre de la persona a la que hay que saludar. function escribirBienvenida(nombre){ document.write(<H1>Hola + nombre + </H1>) }
Como podemos ver, en el ejemplo, para definir, en la funcin, un parmetro, tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, que, en este caso, se llama nombre, tendr como valor el dato que le pasemos a la funcin cuando la llamemos; adems, la variable tendr vida durante la ejecucin de la funcin y dejar de existir cuando la funcin termine su ejecucin.
Para llamar a una funcin que tiene parmetros, se coloca entre parntesis el valor del parmetro. Para llamar a la funcin del ejemplo, habra que escribir:
CIBERTEC
124
escribirBienvenida(Alberto Garca) Al llamar a la funcin as, el parmetro nombre toma como valor Alberto Garca y al escribir el saludo por pantalla escribir Hola Alberto Garca entre etiquetas <H1>.
Los parmetros pueden recibir cualquier tipo de dato: numrico, textual, boleano o un objeto. Realmente, no especificamos el tipo del parmetro; por eso, debemos tener un cuidado especial al definir las acciones que realizamos dentro de la funcin y al pasarle valores a la funcin para asegurarnos que todo es consecuente con los tipos de nuestras variables o parmetros.
3.1.6 Funciones predefinidas

JavaScript dispone de las siguientes funciones predefinidas:
3.1.6.1 eval(cadena)
La funcin eval tiene como argumento una expresin y devuelve el valor de la misma. Esta funcin resulta til para evaluar una cadena de
caracteres que representa una expresin numrica. La edicin efectuada mediante un campo de formulario es una cadena de caracteres que, a veces, es necesario convertir en valor numrico. El cdigo siguiente
ilustra este ejemplo y permite al usuario introducir una expresin numrica y visualizar, a continuacin, el valor de la expresin.
<SCRIPT> function calcula(obj){ evalua.result.value = eval(evalua.expr.value) } </SCRIPT> <FORM NAME=evalua> Introducir expresin:
CIBERTEC
125
<INPUT TYPE=text NAME=expr SIZE=20> <br> Resultado: <INPUT TYPE=text NAME=result SIZE=20> <br> <INPUT TYPE = button VALUE = evalua onClick = calcula(this.form)> </FORM>
3.1.6.2 parseInt(cadena [, base])

La funcin parseInt convierte una cadena de caracteres en un valor numrico. La funcin lleva como argumento la cadena a convertir y, opcionalmente, puede llevar un segundo argumento para indicar la base de numeracin en que est escrita la cadena. Si se omite, se supone que la cadena representa un nmero en base 10. La cadena slo podr contener caracteres vlidos para el sistema de numeracin indicado: dgitos (0..9 para la base 10, 0 1 para nmeros binarios, 0..7 para sistema octal, 0..9, A..F para sistema hexadecimal) y signo (+, -). Si encuentra algn caracter no vlido, slo se va a interpretar desde el principio de la cadena hasta el caracter no vlido. Si comienza por un caracter ilegal devuelve NaN.
Ejemplo 1: parseInt(3453);
Devuelve el nmero 3453.
Ejemplo 2: var minum1 = 14; document.write(parseInt(minum1)); .... Escribir 14. Ejemplo 3: var minum1 = 11001;
CIBERTEC
126
document.write(parseInt(minum1,2)); .... Ahora escribir 25, el equivalente decimal al binario 11001. Ejemplo 4: <HTML> <HEAD> <TITLE>ParseInt</TITLE> <SCRIPT> function pruebaparse() { // Se toma un valor del campo entrada var entra = entrada.value; // Se convierte a entero mediante parseInt var valor = parseInt(entra); // Se muestra el resultado salida.value=valor; } </SCRIPT> </HEAD> <BODY> <P>Introduce una cadena alfanumrica: <input type=text name=entradasize=8> y pulsa el botn <INPUT TYPE=button VALUE=Plsame onClick=pruebaparse()> </P> <P> <input type=text name=salida readonly size=8> </P> </BODY> </HTML>
En el ltimo campo de texto, se ha aadido el atributo readonly para que no pueda escribirse en l.
CIBERTEC
127
3.1.6.3 parseFloat(cadena)
La funcin parseFloat convierte una cadena que se le pasa como argumento a un valor numrico de tipo flotante. Los caracteres vlidos de la cadena son los mismos que en parseInt ms el punto decimal y el exponente (E). No admite un segundo argumento. Si se encuentra otros caracteres que no sean nmeros, el signo +, el - o un exponente, devuelve el valor encontrado hasta ese punto. Del mismo modo, si el primer caracter no se puede convertir a nmero, devolver cero. Por lo dems, funciona exactamente igual que parseInt. parseFloat(3.12.3);
Este ejemplo devuelve NaN, ya que la cadena no contiene un nmero real vlido.
3.1.6.4 isNaN(valor)
La funcin isNaN comprueba si el valor pasado por parmetros es numrico o no. El resultado de esta funcin es un booleano, es decir, evala un argumento para ver si es NaN: Not Number. Devuelve true slo si el argumento es NaN. Ejemplo 1: <SCRIPT> function Comprueba(form){ var number = parseFloat(form.valor.value); if (isNaN(number) == true){ alert(No es numrico); }else{ form.valor.value = number; alert(Es numrico); } } </SCRIPT> ... <FORM> Introducir un valor numrico:
CIBERTEC
128
<input type=text name=valor> <br> <input </FORM> type = button value = Comprobar onClick = Comprueba(this.form)>
3.2 VALIDACIN DE FORMULARIOS

JavaScript, desde sus inicios, introdujo los mecanismos necesarios para validar campos de formulario. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algn campo no relleno o con informacin errnea, el
formulario muestra el campo que est incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos, se enva el formulario.
Algunas de las validaciones tpicas que realiza javascript son las siguientes:
Comprobar que se han suministrado todos los campos obligatorios Comprobar que el formato de un campo es el esperado (fechas, telfonos, etc.) Comprobar la validez de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, nmero de lneas o tamao de la entrada
Cuando el usuario pulsa sobre el botn de enviar, se genera el evento submit, asociado al envo de datos de un formulario. JavaScript proporciona un
mecanismo para capturar este evento, lo que nos permite ejecutar un script justo antes de que se realice el envo de los datos.
3.2.1 El evento Onsubmit

La forma para capturar un evento consiste en introducir el atributo onSubmit en la etiqueta del formulario, cuyo evento submit queremos capturar. De esta forma, para capturar el evento submit del formulario del ejemplo anterior se escribe as:
CIBERTEC
129
<form name="frm" action="mailto:jpt@correo.com" onSubmit="alert('Ha hecho click en el botn enviar.'); return false;"> <input type="submit" value="Enviar" name="enviar"> </form>
En esta nueva versin del formulario, al pulsar sobre el botn de envo, se ejecutar el cdigo incluido como valor del atributo onSubmit. En este caso, se trata de un simple alert(); entonces, JavaScript informa que se ha pulsado sobre el botn de envo. Si el cdigo JavaScript (generalmente es una
funcin de validacin) del atributo onSubmit devuelve false, la validacin es incorrecta y el navegador no contina con el envo del formulario tras ejecutar dicho cdigo. Por el contrario, si devuelve true, la validacin es correcta y el formulario se enva normalmente.
3.2.2 El objeto this

Normalmente, el evento onSubmit ejecuta una funcin de validacin, como en el siguiente ejemplo: <form name="frm" action="mailto:jpt@correo.com" onSubmit="return Valida(this);"> <input type="submit" value="Enviar" name="enviar"> </form>
Para poder realizar la validacin, la funcin debe trabajar sobre los objetos del formulario a validar para acceder a su valor y evaluarlo. Esto se
consigue pasndole como parmetro el objeto this, que hace referencia en este contexto al formulario desde el que se invoca la funcin.
La funcin de validacin acceder a los campos del formulario a partir del objeto this. A continuacin, mostramos un ejemplo sencillo, en el que se comprueba si el valor del campo de nombre txtMensaje es igual a ACEPTADO. En caso afirmativo, la validacin es correcta.
CIBERTEC
130
function Valida( miFrm ) { if (miFrm.txtMensaje.value == ACEPTADO) { return true } else { return false } }
CIBERTEC
131

Ejemplo 1
En el siguiente ejemplo, definimos un campo de texto en el que ingresamos un nmero x. Al hacer clic sobre el botn, obtendremos el resultado (x2) en el segundo campo de texto.
Al mismo tiempo, aparecer un mensaje en la barra de estado que indicar el nmero introducido, as como el resultado obtenido tras aplicarle el cuadrado. Para realizar estas acciones, utilizaremos la funcin cuadrado.
Cada vez que el usuario haga un clic sobre el botn Cuadrado (para determinarlo utilizaremos el manejador de eventos onClick), se llamar a la funcin del mismo nombre, pasndole como parmetro el valor introducido en el primer campo de texto (x). Inmediatamente, ser mostrado en la zona de estado un mensaje que dir: Has ingresado el nmero x y el resultado es x2. Esto es posible mediante la sentencia window.status, donde window es un objeto creado por el sistema que hace referencia a la ventana actual y status no es ms que una de sus propiedades que especifica el mensaje a mostrar en la barra de estado.
El cdigo asociado al botn es el siguiente: <FORM> Escribe un nmero: <INPUT TYPE=text NAME=entrada SIZE=15> <INPUT TYPE=button VALUE=Cuadrado onClick=cuadrado(entrada.value)> <BR> Resultado: <INPUT TYPE=text NAME=resultado SIZE=15 VALUE = 0> </FORM>
CIBERTEC
132
Las modificaciones realizadas en la funcin cuadrado son las siguientes: function cuadrado(numero){ document.form1.resultado.value = numero * numero; window.status=Ha ingresado el nmero + numero + y el resultado es +document.form1.resultat.value; }
CIBERTEC
133
Ejemplo 2
Determinar el rea de un crculo <HTML> <HEAD> <TITLE>JavaScript</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> function areaCirculo(radio){ var area; area= 3.1415 * radio * radio; return area; } for(var r=1; r<=10; ++r) document.write(<BR>Si radio + r + , rea igual a +areaCirculo(r)); </SCRIPT> </BODY></HTML>
CIBERTEC
134
Ejemplo 3
Veamos otro ejemplo, aunque un poco ms til. Se trata de imprimir, en la pgina, todas las tablas de multiplicar, es decir, del 1 al 9 (la tabla del 1, la del 2, del 3...) for (i=1;i<10;i++){ document.write(<br><b>La tabla del + i + :</b><br>) for (j=1;j<10;j++) { document.write(i + x + j + : ) document.write(i*j) document.write(<br>) } }
Con el primer bucle, controlamos la tabla actual y, con el segundo bucle, la desarrollamos. En el primer bucle, escribimos una cabecera en negrita, donde
indicamos la tabla que estamos escribiendo, primero la del 1 y, luego, las dems en orden ascendente hasta el 9. Con el segundo bucle, escribimos cada uno de los valores de cada tabla.
CIBERTEC
135
Ejemplo 4
Validacin de un formulario
El formulario con el que vamos a trabajar es el siguiente: <form name="fm"> <table> <tr> <td>Nombre: </td> <td><input type="text" name="nombre" size="30" maxlength="100"></td> </tr> <tr> <td>Edad: </td> <td><input type="text" name="edad" size="3" maxlength="2"></td> </tr> <tr> <td>Inters:</td> <td> <select name=interes> <option value="Elegir">Elegir <option value="Informacin comercial"> Informacin comercial <option value="Servicio a clientes"> Servicio a clientes <option value="Proveedores">Contacto de proveedores </select> </td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="Enviar" onclick=" verificaEnvio ()"></td> </tr>
CIBERTEC
136
</table> </form>
Se debe prestar atencin en lo siguiente: El nombre del formulario, "fm" El botn Enviar, que en lugar de ser un submit corriente, es un botn que llama a una funcin, que se encarga de validar el formulario y enviarlo si todo es correcto.
Funcin Javascript para validar el formulario
La funcin para validar el formulario se llama verificaEnvio(). Por cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicacin en el campo que ha dado el error y abandona la funcin retornando el valor 0.
Si todos los campos son correctos, la funcin contina hasta el final sin salirse, por no estar ningn campo incorrecto. Entonces, ejecuta la ltima sentencia, que es el envo del formulario.
Veamos la funcin entera. function verificaEnvio (){ //Validar el nombre if (document. fm.nombre.value.length==0){ alert("Tiene que escribir su nombre") document.fm.nombre.focus() return 0; } //Validar la edad. Tiene que ser entero mayor que 18 edad = document.fm.edad.value edad = validarEntero(edad) document.fm.edad.value=edad if (edad==""){ alert("Tiene que introducir un nmero entero en su edad.")
CIBERTEC
137
document.fm.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 aos.") document.fm.edad.focus() return 0; } } //Validar el inters if (document.fm.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.") document.fm.interes.focus() return 0; } //Se enva el formulario alert("Muchas gracias, por enviar el formulario"); document.fm.submit(); }
CIBERTEC
138
Ejemplo 5
Validacin de un formularios - 2
Disee el siguiente formulario:
Cdigo javascript que valida las entradas del formulario // JavaScript Document function validaEnvio(){ if(frm.txtNombre.value==""){ alert("Nombre vaco") return false } if(frm.txtEdad.value==""){ alert("Edad vaca")
CIBERTEC
139
return false } var posArroba,posPunto,correo; correo=frm.txtEmail.value; posArroba=correo.indexOf('@',0) posPunto=correo.indexOf('.',posArroba) if(posArroba==-1){ alert("correo no vlido") return false } if(frm.distrito.selectedIndex==0){ alert("Seleccione un distrito") return false } alert("Sus datos fueron enviados correctamente") frm.submit() } function soloNumeros(){ var key=window.event.keyCode; intentos++ if (!(key >= 48 && key <= 57)) window.event.keyCode=0; } function soloLetras(){ var key = window.event.keyCode; if(!(key>=65 && key<=90 || key>=97 && key<=122)) window.event.keyCode=0; }
CIBERTEC
140
Archivo html que disea el formulario <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <link href="estilo_formulario2.css" rel="stylesheet" type="text/css" /> <script src="codigos.js"> </script> </head> <body> <form name="frm" id="formulario" method=""> <label for="nombre">Nombre:</label> <input onfocus="tab()" onblur="regresa()" name="txtNombre" type="text" class="campo" id="nombre" value="Escriba su nombre aqu" /> <label for="edad">Edad:</label> <input onkeypress="soloNumeros()" name="txtEdad" type="text" class="campo" id="edad" /> <label for="email">E-mail:</label> <input name="txtEmail" type="text" id="email" class="campo" /> <label for="distrito">Distrito:</label> <select name="distrito" class="campo" /> <option>Seleccione un distrito</option> <option>Ate</option> <option>Barranco</option> <option>Comas</option> <option>Chorrillos</option> <option>Lince</option> <option>Miraflores</option> </select> <label for="comentario">Comentario:</label> <p> <textarea id="comentario" class="campo"></textarea> <br/>
CIBERTEC
141
<input onclick="validaEnvio(this.form);return false" type="submit" id="boton_enviar" value=" " /> </p> <p> </p> </form> </body> </html>
CIBERTEC
142
Propuesto 1
Disee una pgina que al abrirse imprima las casillas de verificacin que representan los asientos de un mnibus.
Propuesto 2
Disee un formulario que simule el lanzamiento de 3 dados al mismo tiempo y se deje de lanzar si los 3 dados obtienen el nmero 5. Asimismo, debe imprimir cuntos lanzamientos fueron necesarios.
Propuesto 3
CIBERTEC
143
Propuesto 4
CIBERTEC
144
Resumen
JavaScript es un lenguaje de programacin interpretado, es decir, no requiere compilacin. Se usa principalmente en pginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C. Las funciones de javascript son cdigos agrupados en bloques e identificados por un nombre. Estos nombres de funciones de javascript son llamados mediante un evento desde algn elemento de la pgina web. Si desea saber ms acerca de estos temas, puede consultar las siguientes pginas. http://www.webestilo.com/javascript/ Aqu, hallar un manual de Javascript. http://www.codigojavascript.com/ En esta pgina, hallar cdigos de Javascript desarrollados y que puede aplicar a su pgina web.
CIBERTEC
145
ANEXO
GLOSARIO DE ETIQUETAS HTML
CIBERTEC
146
CIBERTEC
147
PARA CARACTERES <B>...</B> <BIG>...</BIG> <BLINK>...</BLINK> <EM>...</EM> <FONT color="#XXXXXX"> ...</FONT> <FONT size=X>...</FONT> <I>...</I> <NOBR>...</NOBR> <PRE>...</PRE> Texto en negrita Ampliacin del tamao de los caracteres Texto parpadeante (slo Netscape) Texto en itlico Texto en color donde XXXXXX es un valor hexadecimal Tamao de los caracteres donde X es un valor de 1 a 7 Texto en itlico Impide las rupturas automticas de lnea de los browser Texto preformateado, o sea con una visualizacin de todos los espacios y saltos de lnea Reduccin del tamao de los caracteres Puesta en negrita del texto Texto en indicio Texto en exponente Texto subrayado
<SMALL>...</SMALL> <STRONG>...</STRONG> <SUB>...</SUB> <SUP>...</SUP> <U>...</U>
PARA TEXTOS  <BR> <BLOCKQUOTE>... </BLOCKQUOTE> <CENTER>...</CENTER> <DIV align=center> ...</DIV> <DIV align=left> ...</DIV> <DIV align=right> ...</DIV> <Hx>...</Hx> <Hx align=center>...</Hx> <Hx align=left>...</Hx> <Hx align=right>...</Hx> Comentarios ignorado por el navegador A la lnea Citacin (introduce un extracto de texto) Centra cada elemento comprendido en la etiqueta Centra el elemento encuadrado por la etiqueta Alinea el elemento a la izquierda Alinea el elemento a la derecha Ttulo y x tiene un valor de 1 a 7 Ttulo centrado Ttulo alineado a la izquierda Titulo alineado a la derecha
CIBERTEC
148
<P>...</P> <P align=center>...</P> <P align=left>...</P> <P align=right>...</P>
Nuevo prrafo Prrafo centrado Prrafo alineado a la izquierda Prrafo alineado a la derecha
PARA LISTAS <UL> <LI> </UL> <OL> <LI> </OL> <DL> <DT>...</DT> <DD>...</DD> </DL> PARA RAYAS <HR> <HR width="x%"> <HR width=x> <HR size=x> <HR align=center> <HR align=left> <HR align=right> <HR noshade> Lnea de separacin. Raya horizontal Anchura de la raya en % Anchura de la raya en pixeles Altura de la raya en pixeles Raya centrada Raya alineada a la izquierda Raya alineada a la derecha Raya sin efecto de sombreado Lista no numerada Elemento de lista Lista numerada Elemento de lista Lista de glosario Termino de glosario Explicacin del trmino
PARA ENLACES <A href="http://...">...</A> <A href="mailto:...">...</A> <A href="fichier.htm">...</A> <A name="xyz">...</A> <A href="xyz">...</A> <A href="fichier#xyz">...</A> Enlace hacia una pgina web Enlace hacia una direccin email Enlace hacia la pgina fichero.htm situada en el mismo directorio Definicin de una ancla Enlace hacia una ancla
PARA IMAGENES
CIBERTEC
149
<IMG scr="xyz.gif"> <IMG scr="xyz.pjg> <IMG ... width=x height=y> <IMG ... border=x> <IMG ... alt="votre texte"> <IMG ... align=bottom> <IMG ... align=middle> <IMG ... align=top> <IMG ... align=left> <IMG ... align=right> <IMG ... hspace=x> <IMG ... vspace=y>
Insercin de una imagen al formato Gif o Jpg (ver enlaces para la direccin) Puesta a la escala de la imagen en pxeles Definicin del borde de una imagen con un enlace Texto alternativo cuando la imagen no est mostrada Alinea la imagen abajo Alinea la imagen en el medio Alinea la imagen arriba Alinea la imagen a la izquierda Alinea la imagen a la derecha Espaciamiento horizontal entre la imagen y el texto Espaciamiento vertical entre la imagen y el texto
PARA TABLAS <TABLE>...</TABLE> <TABLE width="x%"> <TABLE width=x> <TABLE border=x> <TABLE cellpadding=x> <TABLE cellspacing=x> <TR>...</TR> <TD>...</TD> <TD bgcolor="#XXXXXX"> <TD width="x%"> <TD width=x> <TD align=center> <TD align=left> <TD align=right> <TD valign=bottom> <TD valign=middle> <TD valign=top> <TD colspan=x> Definicin de una tabla Anchura de la tabla en % Anchura de la tabla en pxeles Anchura del borde Espacio entre el borde y el texto Espesor de la raya entre las celdas Lnea de la tabla Celda de la tabla Color de una celda de la tabla Anchura de columna en % Anchura de columna en pixeles Texto centrado en la celda Texto alineado a la izquierda en la celda Texto alineado a la derecha en la celda Alineacin hacia arriba del contenido de la celda Centrado vertical del contenido de una celda Alineacin hacia el bajo del contenido de la celda Nmero de celdas para fusionar
CIBERTEC
150
<TD rowspan=x>
horizontalmente Nmero de celdas para fusionar verticalmente
PARA MARCOS <FRAMESET>...</FRAMESET> <FRAMESET rows="x%,y%,..."> <FRAMESET cols="x%,y%,..."> <FRAME src="fichier.htm"> <NOFRAMES>...</NOFRAMES> Define una estructura de frames (reemplaza la etiqueta BODY) Divisin horizontal de la ventana en % Divisin vertical de la ventana en % Fichero mostrado en una ventana de frames Contenido para los browser no previstos para los frames
CIBERTEC

Manual de Ofimatica

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual de Ofimatica

Diunggah oleh

Hak Cipta:

Format Tersedia

Ofimtica

OFIMTICA Escuela de Tecnologa

1.4.1. : Insertar regiones 1.4.2 Guardar una plantilla

1.5.1. : Crear un formulario 1.5.2. : Insertar objetos de formulario

Unidad de aprendizaje 2 2.1 Tema 6 : Introduccin a estilos CSS 69

2.1.1. : Estilos de etiqueta

OFIMTICA Escuela de Tecnologa

OFIMTICA Escuela de Tecnologa

OFIMTICA Escuela de Tecnologa

OFIMTICA Escuela de Tecnologa

1.1 INTRODUCCIN A HTML5

1.1.1 Estructura de un documento HTML5

Ejemplo de estructura de un documento HTML5:

OFIMTICA Escuela de Tecnologa

1.1.2 Diferencias bsicas entre HTML4 y HTML5

1.1.3 Directivas o etiquetas

OFIMTICA Escuela de Tecnologa

<NOMBRE_DE_LA_ETIQUETA ATRIBUTO2="valor2" ATRIBUTO1="valor1" ... >

La siguiente es una lista de algunas etiquetas ms importantes:

1.1.4 La Herramienta Dreamweaver

OFIMTICA Escuela de Tecnologa

El entorno de trabajo incluye los siguientes elementos:

haciendo clic en el botn Tabla de la barra Insertar.

OFIMTICA Escuela de Tecnologa

Clic en Siguiente para ir al siguiente paso.

OFIMTICA Escuela de Tecnologa

Crear un documento HTML Para crear un documento, haga lo siguiente:

Haga clic en el botn Crear.

1.2 INSERCIN DE IMGENES

guardemos una copia en la carpeta correspondiente.

1.2.1 Mapas de imgenes

OFIMTICA Escuela de Tecnologa

1. En la ventana de documento, seleccione la imagen.

OFIMTICA Escuela de Tecnologa

Para seleccionar mltiples zonas interactivas, en un mapa de imagen, haga lo siguiente:

1. Utilice la herramienta de puntero para seleccionar una zona interactiva.

Para mover una zona interactiva, haga lo siguiente:

Para cambiar el tamao de una zona interactiva, haga lo siguiente:

1.2.2 Imagen de sustitucin

Se abre el cuadro de dilogo Insertar imagen de sustitucin.

OFIMTICA Escuela de Tecnologa

3. En el campo Nombre de la imagen, introduzca un nombre para la imagen de sustitucin.

9. Haga clic en OK para cerrar el cuadro de dilogo Insertar imagen de sustitucin.

OFIMTICA Escuela de Tecnologa

Introduzca los nuevos valores que desee.

Lunes Maana Tarde

Propiedad Filas Cols An Rell. Celda

OFIMTICA Escuela de Tecnologa

Si pulsamos, por ejemplo, el botn

, el texto que est escrito en las

1.3 CREACIN DE ENLACES

1.3.1 Enlaces externos

1.3.2 Enlaces internos

Posteriormente, se crean los enlaces en dichos puntos.

OFIMTICA Escuela de Tecnologa

1.3.3 Enlaces Mixtos

1.4 DISEO CON PLANTILLAS

regiones de plantilla en un documento.

Se debe mostrar, en la barra de ttulos de su archivo, lo siguiente:

1.4.1 Insertar regiones

OFIMTICA Escuela de Tecnologa

1.4.2 Guardar una plantilla

finalmente, haga clic en el botn Guardar.

OFIMTICA Escuela de Tecnologa