para formatear grandes bloques de HTML es usado, también, 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 línea.

---

Setea el ancho de la línea en porcentaje o números absolutos.

---

Inserta una línea horizontal sin sombra.



Crea una tabla.

Se puede diseñar una página con solo tener un navegador, un editor de textos y conocer las etiquetas HTML. Sin embargo, con la aparición de programas especializados en diseño web, usaremos en este curso Adobe Dreamweaver

1.1.4 La Herramienta Dreamweaver Dreamweaver es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones web.

Si desea controlar

manualmente el código HTML o trabajar en un entorno de edición visual, Dreamweaver le proporciona herramientas útiles que mejoran su experiencia en la creación web.

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver, también, incluye numerosas herramientas y funciones relacionadas con la codificación.

Ingresar a Dreamweaver Para ingresar a Dreamweaver, realice el siguiente procedimiento: a) Clic en el botón Inicio de su Escritorio. b) Seleccione la opción Todos los programas. c) Seleccione la opción Adobe Master Collection CS5. d) Haga clic en la opción Adobe Dreamweaver CS5.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

17

El entorno de Dreamweaver Lo que a continuación sigue son breves descripciones de las ventanas y otros elementos del espacio de trabajo de Dreamweaver. Más adelante, en esta misma guía, encontrará información más específica de cómo 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, también, puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un tutorial del producto. Barra Insertar La barra Insertar contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos PA en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla

CIBERTEC

CARRERAS PROFESIONALES

18

haciendo clic en el botón 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 Diseño y vista Código), así como diversas opciones de visualización y algunas operaciones comunes, como la obtención de una vista previa en un navegador. Barra de herramientas Estándar La barra de herramientas Estándar no se muestra en el diseño de espacio de trabajo predeterminado.

Ésta contiene botones para las

operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar. Barra de herramientas Codificación La barra de herramientas Codificación sólo se muestra en la vista Código. Ésta contiene botones que le permiten realizar numerosas operaciones de codificación estándar.

Barra de herramientas Representación de estilos La barra de herramientas Representación de estilos está oculta de manera predeterminada.

Ésta contiene botones que le permiten ver

cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. También, contiene un botón 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.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

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 Diseño 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 jerarquía de etiquetas que rodea a la selección actual. Puede hacer clic en cualquier etiqueta de la jerarquía para seleccionarla y ver todo su contenido. Grupos de paneles Los grupos de paneles lo conforman paneles relacionados y agrupados bajo un encabezado común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo. Para desacoplar un grupo de paneles, arrastre el punto de sujeción situado en el borde izquierdo de la barra de título 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, también, 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 diseño similar o un objetivo común.

Dreamweaver es una herramienta de creación y

administración de sitios, por lo que puede utilizarlo para crear documentos individuales y sitios web completos. En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o remoto de los documentos que pertenecen a un sitio web. Un sitio de Dreamweaver permite organizar y

CIBERTEC

CARRERAS PROFESIONALES

20

administrar todos los documentos web, cargar el sitio en un servidor web, controlar y mantener vínculos, y administrar y compartir archivos. Para aprovechar al máximo 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 páginas y todos los archivos que vaya añadiendo. Es recomendable que esta carpeta la cree directamente en el disco duro C. Luego, ejcute los siguientes pasos:

1.

Haga clic en el menú Sitio de la barra de Menús

2.

Elija Administrar sitios.

3.

Haga clic en el botón Nuevo de la ventana Administrar sitios.

4.

Ingrese el nombre para el nuevo Sitio. Por ejemplo, escriba Clase 1.

5.

Después, haga clic en el botón Siguiente.

6.

En la siguiente pantalla, la opción “No, no quiero usar tecnología de servidor” debe estar seleccionada.

7.

Haga otra vez clic en Siguiente.

8.

Clic en el icono

9.

Clic en Siguiente para ir al siguiente paso.

y, ahora sí, seleccione una carpeta.

10. Seleccione la opción Ninguno en el cuadro ¿Cómo se conecta a su servidor remoto? 11. Clic en Siguiente. 12. Clic en Listo. 13. Clic en Listo, otra vez, para terminar.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

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, todavía, no hay ningún documento para trabajar.

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

CIBERTEC

1.

Clic en el menú Archivo > Nuevo

2.

Seleccione la opción HTML de la categoría Página en blanco.

CARRERAS PROFESIONALES

22

3.

Haga clic en el botón Crear.

En la ventana múltiple, ya se ha creado un primer archivo que Dreamweaver llama Untitled-1. Observe la pestaña superior izquierda del espacio mayor vacío.

Por otro lado, el documento (no el archivo) que será la página, tampoco tiene título.

1.2 INSERCIÓN DE IMÁGENES 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 imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la que llamaremos imágenes (nombre de los archivos y carpetas sin acentos) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta, están nuestras imágenes.

A propósito de las imágenes, es muy importante que controlemos el tamaño de las mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra página. Cuando insertamos una imagen, aparece, en el cuadro de diálogo, una información sobre el tamaño y el tiempo de descarga aproximado.

1.2.1 Mapas de imágenes 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 acción, por ejemplo se abre un archivo nuevo. Utilice el Inspector de

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

23

propiedades de imagen para crear y editar gráficamente 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 continuación, defina un vínculo que se abra cuando el usuario haga clic en la zona interactiva. Puede crear múltiples zonas interactivas, pero formarán 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 ampliación, 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 múltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.

CIBERTEC

CARRERAS PROFESIONALES

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 rectángulo 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.



Después 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. Modificación de un mapa de imagen Puede editar fácilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un área de zona interactiva, cambiar el tamaño de éstas; incluso, puede adelantar o retrasar una zona interactiva en una capa.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

25

También, puede copiar una imagen con zonas interactivas de un documento a otro, o copiar una o más zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas asociadas a la imagen, también, se copiarán en el nuevo documento.

Para seleccionar múltiples zonas interactivas, en un mapa de imagen, haga lo siguiente:

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

2. También, puede realizar una de estas operaciones: 

Mantenga presionada la tecla Mayús 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 Mayús y las teclas de flecha para mover una zona interactiva 10 píxeles en la dirección seleccionada.



Utilice las teclas de flecha para mover una zona interactiva un píxel en la dirección seleccionada.

Para cambiar el tamaño de una zona interactiva, haga lo siguiente:

1. Utilice la herramienta de puntero para seleccionar la zona interactiva cuyo tamaño desea cambiar.

2. Luego, arrastre el manejador de zona interactiva para cambiar el tamaño o la forma de la zona interactiva.

CIBERTEC

CARRERAS PROFESIONALES

26

1.2.2 Imagen de sustitución Una imagen de sustitución es aquella que, al visualizarse en un navegador, cambia cuando el puntero pasa sobre ella.

Una imagen de sustitución

consta, en realidad, de dos imágenes: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la que aparece al pasar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Si las imágenes tienen tamaños distintos, Dreamweaver cambia automáticamente el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.

No es posible ver el efecto de una imagen de sustitución en la ventana de documento de Dreamweaver. Si desea ver el efecto de sustitución, presione F12 para obtener una vista previa de la imagen en un navegador y, a continuación, pase el puntero por la imagen.

Las imágenes de sustitución están automáticamente configuradas para que respondan al evento onMouseOver. Para crear una imagen de sustitución, haga lo siguiente:

1. En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la imagen de sustitución.

2. En el menú Insertar, seleccione Objetos de imagen y luego haga clic en Imagen de sustitución.

Se abre el cuadro de diálogo Insertar imagen de sustitución.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

27

3. En el campo Nombre de la imagen, introduzca un nombre para la imagen de sustitución.

4. En el cuadro de texto Imagen original, haga clic en Examinar y seleccione la imagen que desea que aparezca al cargarse la página o introduzca la ruta del archivo de imagen en el cuadro de texto.

5. En el cuadro de texto Imagen de sustitución, 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 imágenes 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 opción Carga previa de imagen de sustitución.

7. En Texto alternativo, introduzca un texto que describa la imagen para los usuarios que utilicen un navegador no gráfico. (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 sustitución.

Nota: Si no establece un vínculo para la imagen, Dreamweaver insertará un vínculo nulo (#) en el código HTML relativo al comportamiento de sustitución. Si elimina el vínculo nulo, la imagen de sustitución dejará de funcionar.

9. Haga clic en OK para cerrar el cuadro de diálogo Insertar imagen de sustitución.

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 sustitución

CIBERTEC

CARRERAS PROFESIONALES

28

1.2.3 Tablas Las tablas constituyen una herramienta muy eficaz para presentar datos en una tabla y establecer la disposición de texto y gráficos en una página HTML. Existen tres formas de diseñarlas: modo Estándar, modo Expandido y modo de Diseño.

Una tabla consta de una o varias filas, donde cada una consta, a su vez, de una o más celdas.

Aunque las columnas no suelen especificarse

explícitamente en el código HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. Después de crear una tabla, podrá modificar fácilmente su aspecto y estructura.

1.2.3.1 Insertar En la vista Diseño de la ventana de documento, sitúe el punto de inserción donde desee que aparezca la tabla.

Nota: Si no hay ningún contenido en el documento, la única ubicación posible será al principio del mismo.

Elija menú Insertar > Tabla. Se mostrará el cuadro de diálogo Insertar tabla.

CARRERAS PROFESIONALES

CIBERTEC

OFIMÁTICA – Escuela de Tecnología

29

Introduzca los nuevos valores que desee.

Podemos determinar el número de filas, columnas, ancho de la tabla en píxeles 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 píxeles y se pueden quedar vacíos en el caso de que queramos que tanto el relleno de celda como el espacio entre celdas sea el mínimo 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 píxeles y un relleno de celda de 5 píxeles.

Lunes

Martes

Miércoles

Jueves

Viernes

Mañana Tarde

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 hace referencia a todo el documento que se visualiza con el navegador. La etiqueta hace referencia a la tabla entera; la etiqueta , a la fila en la que está el cursor; y la etiqueta

, a la celda. Observa que la última etiqueta está más brillante. Eso quiere decir que es la celda la que está seleccionada. CIBERTEC CARRERAS PROFESIONALES 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 cuestión. Si desde la barra de Estado pulsamos la etiqueta , se seleccionará toda la tabla. Si ahora vemos las propiedades, éstas serán las propiedades de la tabla y, desde allí, podemos cambiar las propiedades de la tabla y su configuración. Propiedad Acción Filas Modificar el número de filas Cols Modificar el número de columnas An Modificar la anchura de la tabla Rell. Celda Modificar el espacio entre los bordes y el contenido Esp. celda Modificar el espacio entre las celdas Alinear Modificar la alineación Borde Modificar el grosor del borde Col. fondo Establecer un color de fondo Col. borde Establecer un color de borde Im. Fondo Establecer una imagen de fondo Para hacer cambios a una fila, colocamos el cursor en una celda de esa fila y marcamos la etiqueta de la barra de Estado. Así, quedará CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 31 seleccionada la fila entera. Desde el Panel de propiedades, podemos hacer los cambios oportunos. Si pulsamos, por ejemplo, el botón , 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 botón el texto escrito pasará a estar en negrita. 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 CREACIÓN DE ENLACES Los vínculos, hipervínculos, enlaces, hiperenlaces (todas estas palabras designan el mismo concepto) son los elementos más importantes del lenguaje HTML con los que se construyen las páginas web. A continuación, detallaremos los diversos tipos de vínculos que se pueden crear en una página web. 1.3.1 Enlaces externos El enlace externo es, quizá, el vínculo más 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 Vínculo del Panel de propiedades. Luego, seleccione el nombre del archivo para establecer el enlace o vínculo. Supongamos que quiere hacer que el logotipo de Cibertec sea un vínculo a la página de Cibertec. Para ello, seleccione y escriba la URL de la página http://www.cibertec.edu.pe en la caja de texto: CIBERTEC CARRERAS PROFESIONALES 32 Como en el caso anterior, compruebe que funciona. Para ello, presione la tecla F12 y compruébelo 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 página, al final o al comienzo de un apartado determinado, pero siempre dentro del mismo documento. Para ello, primero, hay que hacer marcas con el botón Anclaje con nombre, que está en el menú Insertar, en los puntos donde se quiere nos lleve el vínculo. Posteriormente, se crean los enlaces en dichos puntos. Para ello, seleccione el texto o imagen y luego haga clic en la opción Hipervínculo del menú Insertar. Finalmente, seleccione el nombre del punto al cual desea vincularse. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 33 1.3.3 Enlaces Mixtos Los dos tipos de vínculos 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 fijación con nombre en el documento correspondiente, se establece el enlace escribiendo el nombre de la página con su extensión .htm seguido del signo # y el nombre del punto de fijación. Por ejemplo, un enlace a un punto llamado historia del archivo Cuzco.htm seria de la siguiente manera: Cuzco.htm#historia 1.4 DISEÑO CON PLANTILLAS Una plantilla es un tipo especial de documento que sirve para crear un diseño de página “fijo” con la finalidad de crear documentos basados en ésta y así heredar todo su diseño de página. Por esta razón, al diseñar 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 página pueden editar los usuarios de la plantilla (como los redactores, los diseñadores gráficos 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 botón Crear Le aparecerá la siguiente ventana: CIBERTEC CARRERAS PROFESIONALES 34 Se debe mostrar, en la barra de títulos de su archivo, lo siguiente: 1.4.1 Insertar regiones Al guardar un documento como plantilla, se bloquean la mayoría de las regiones del documento. Como autor de la plantilla, debe especificar qué regiones del documento basado en plantilla serán editables. Para ello, inserte regiones editables o parámetros editables en la plantilla. 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 sólo podrá realizar cambios en las regiones editables y no en las regiones bloqueadas. Una plantilla contiene cuatro tipos de regiones. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 35 Una región editable Una región editable es una región no bloqueada de un documento basado en plantilla, es decir, una sección 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 región editable. En caso contrario, las páginas basadas en la plantilla no se podrán editar. Una región repetida Una región repetida es una sección del diseño del documento que se establece para que el usuario de la plantilla pueda añadir o eliminar copias de esta región en su documento según 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 diseño propiamente dicho está controlado por el autor de la plantilla. Existen dos tipos de regiones repetidas que se pueden insertar en una plantilla: región repetida y tabla repetida. Una región opcional Una región opcional es una sección de la plantilla en la que hay contenido (como texto o una imagen) que puede aparecer o no en un documento. En la página basada en la plantilla, el usuario de la plantilla suele controlar si el contenido se mostrará. Para insertar una región editable, en la celda cambiante, seleccione la celda del lado derecho (celda cambiante) y, luego, elija el menú Insertar > Objetos de plantilla > Región editable. Finalmente, ingrese el texto que desee mostrar por defecto. El texto debe insertarse dentro del marco de la región. CIBERTEC CARRERAS PROFESIONALES 36 Para insertar una región repetida, seleccione la celda permanente y, luego, elija el menú Insertar > Objetos de plantilla > Región repetida. Finalmente, inserte o mueva el texto en el marco de esa región. 1.4.2 Guardar una plantilla Para guardar la plantilla, simplemente, seleccione la opción Guardar como plantilla del menú Archivo. Luego, le asigna un nombre a la plantilla y, finalmente, haga clic en el botón Guardar. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 37 1.4.3 Crear páginas basadas en una plantilla Para crear páginas web basadas en una plantilla, haga lo siguiente: • Seleccione menú Archivo > Nuevo > Página de plantilla. • Haga clic en el nombre de la plantilla que quiere utilizar. • Clic en el botón Crear. Se puede reconocer un archivo que ha sido creado a partir de una plantilla cuando aparece en la esquina superior derecha de su página web el nombre de la plantilla. Además, en la región repetida, aparece una pequeña barra con botones. Luego de haber creado algunas páginas basadas en la plantilla, diseñe desde ésta los enlaces correspondientes. Si se trata de una imagen, debe CIBERTEC CARRERAS PROFESIONALES 38 usar enlaces de mapas de imagen. Si son textos, debe crear enlaces de textos. 1.4.4 Actualizar páginas (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 página (documento) basada en la plantilla actual, realice lo siguiente: 1. Abra el documento. 2. Seleccione menú Modificar > Plantillas > Actualizar página actual. Dreamweaver va a actualizar el documento con todos los cambios de la plantilla. Puede actualizar todas las páginas del sitio o únicamente las páginas correspondientes a una plantilla determinada. 1. Seleccione Modificar > Plantillas > Actualizar páginas. 2. En la ventana que le aparece, en la opción Buscar en, siga uno de estos procedimientos:  Para actualizar todos los archivos del sitio seleccionado a sus correspondientes CARRERAS PROFESIONALES plantillas, seleccione Todo el sitio y, a CIBERTEC OFIMÁTICA – Escuela de Tecnología 39 continuación, 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 continuación, seleccione el nombre de plantilla en el menú emergente adyacente. En esta misma ventana, asegúrese de que Plantillas está seleccionado en la opción Actualizar. Asimismo, si no desea ver un registro de los archivos que Dreamweaver actualiza, desactive la opción Mostrar registro, sino deje la opción seleccionada. Luego, haga clic en el botón Iniciar para actualizar los archivos como se ha indicado. Si había seleccionado la opción Mostrar registro, Dreamweaver proporcionará información 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 más útiles en toda página web. Éste recoge información del visitante, la cual se almacena en el servidor o se nos envía a través de una dirección de correo electrónico. Se debe activar la barra Formularios para poder diseñar uno. Para ello, haga clic en la pestaña Formulario de la barra de herramientas Insertar. 1.5.1 Crear un formulario HTML: Para insertar un formulario, haga lo siguiente: 1. Abra una página y sitúe el punto de inserción donde desee que aparezca el formulario. CIBERTEC CARRERAS PROFESIONALES 40 2. Seleccione el menú Insertar > Formulario > Formulario o seleccione la categoría Formularios en la barra de herramientas Insertar y haga clic en el icono Formulario. Dreamweaver inserta un formulario vacío. En modo Diseño, los formularios aparecen indicados mediante un contorno de línea 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 página o el script que procesará los datos del formulario en la propiedad Acción. Nota.- Esto, en este curso, no se aplica ya que el objetivo es el diseño en el lado del cliente y no desde el servidor. 4. Indique el método que va a utilizar para transmitir los datos del formulario al servidor. Nota.- La propiedad Método tampoco se usará por las razones antes expuestas. 5. Inserte los objetos de formulario. Sitúe el punto de inserción en el lugar del formulario en el que desee que aparezca el objeto del formulario y, a continuación, seleccione el objeto en el menú Insertar > Formulario o en la categoría Formularios de la barra de herramientas Insertar. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 41 6. Ajuste el diseño del formulario como lo desee. Puede utilizar saltos de línea, saltos de párrafo, 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 página. Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los campos para que los usuarios puedan saber a qué están 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, asegúrese de que todas las etiquetas table estén 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 añadir, a un formulario, los siguientes objetos de formulario: Campos de texto Los campos de texto aceptan cualquier valor alfanumérico. El texto se puede visualizar como una sola línea, como varias líneas y como un campo de contraseña en el que el texto introducido se sustituye por asteriscos o viñetas para ocultar el texto a otras personas que puedan estar mirándolo. CIBERTEC CARRERAS PROFESIONALES 42 Nota: Las contraseñas y el resto de datos que se envían a un servidor, mediante campos de contraseña, no están cifrados. Los datos transferidos pueden ser interceptados y leídos como texto alfanumérico. Por esta razón, debe facilitar siempre el cifrado de los datos que desea que permanezcan seguros. Campos ocultos Los campos ocultos permiten almacenar información introducida por el usuario, como un nombre, una dirección de correo electrónico o una preferencia de visualización, y utilizarla la próxima vez que el usuario visite el sitio. Botones Los botones realizan acciones cuando se hace clic en ellos. Puede añadir una etiqueta o un nombre personalizado a un botón, o bien usar una de las etiquetas predefinidas: “Enviar” o “Restablecer”. Utilice un botón para enviar datos del formulario al servidor o para restablecer el formulario. También, se pueden asignar otras tareas de proceso definidas en un script. Por ejemplo, el botón puede calcular el coste total de elementos seleccionados basándose en los valores asignados. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 43 Casillas de verificación Las casillas de verificación admiten múltiples respuestas en un solo grupo de opciones. necesarias. Un usuario puede seleccionar tantas acciones como sean El siguiente ejemplo muestra tres casillas de verificación seleccionadas: Surfing, Mountain Biking y Rafting. Botones de opción Los botones de opción representan opciones que se excluyen mutuamente. Cuando se selecciona un botón de un grupo de botones de opción, se desactivan todos los demás botones del grupo (un grupo está formado por dos o más botones que comparten el mismo nombre). En el siguiente ejemplo, la opción Rafting es la opción seleccionada en ese momento. Si el usuario hace clic en Surfing, la opción Rafting se deselecciona automáticamente. 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 opción Lista muestra los valores de las opciones en un menú que permite a los usuarios seleccionar una o varias opciones; por esta razón, ésta puede mostrarlas a la vez si modifica la propiedad Alto y establece cuántas opciones quiere ver en el listado. De otro lado, utilice los menús si dispone CIBERTEC CARRERAS PROFESIONALES 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 válidos, usted establece los valores exactos que debe devolver una Lista/menú. Lista Menú Menú de salto Un menú de salto es una lista de navegación o menú emergente que permite insertar un menú en el que cada opción 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 gráficos, como Enviar o Restablecer. El uso de una imagen, para llevar a cabo tareas distintas del envío de datos, requiere adjuntar un comportamiento al objeto del formulario. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 45 ACTIVIDADES A DESARROLLAR EN CLASE Actividad 1 Escriba el siguiente código en Dreamweaver. Active la vista Código para ello. El resultado genera textos con hipervínculos o enlaces a páginas web: Mis páginas favoritas Éstas son mis páginas favoritas: Google Microsoft Yahoo! Grabe este documento como enlaces externos.html CIBERTEC CARRERAS PROFESIONALES 46 Actividad 2 Abra un nuevo documento html y cree la siguiente lista anidada utilizando la vista diseño.  Ficheros HTML 1. Ficheros de prueba  prueba1.html  prueba2.html  prueba2.html 2. Ficheros de ejemplos 3. Ficheros del servidor  Ficheros de imágenes  Ficheros de sonido Grabe este documento como lista anidada.html CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 47 Actividad 3 Abra un nuevo documento html y cree otra lista anidada según el siguiente modelo: Mis aficiones Sin un orden particular, mis aficiones son las siguientes:  El cine  El deporte o Natación o Baloncesto  La música La música que más me gusta es (en orden de preferencia): 1. El rock 2. El jazz 3. La música clásica Grabe este documento como aficiones.html CIBERTEC CARRERAS PROFESIONALES 48 Actividad 4 Diseña una página web mediante el uso de tablas e imágenes. Descripción de la práctica: La práctica consiste en diseñar la página web de acuerdo con el modelo mostrado en esta actividad. Las imágenes de los carros de la derecha son imágenes de sustitución. 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 diálogo Tabla, ingrese los siguientes datos: Filas 3, Columnas 3, Ancho de tabla 800 pixeles y las demás propiedades en 0. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 49 3. Haga clic en el botón Aceptar. 4. Seleccione todas las celdas de la tabla y cambie la propiedad Vert a la opción 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 botón Combina las celdas seleccionadas usando extensores para que las tres celdas se unan en una sola celda. CIBERTEC CARRERAS PROFESIONALES 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. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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 línea 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 CARRERAS PROFESIONALES 52 ACTIVIDADES A DESARROLLAR EN CLASE: PLANTILLAS Actividad 5 Diseñar la siguiente página web con plantillas. 1. Cree una plantilla de la siguiente manera: a) Seleccione la opción Nuevo del menú Archivo. b) Seleccione la categoría Plantilla en blanco y Plantilla HTML. c) En la sección Diseño, seleccione la opción CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 53 d) Luego, haga clic en el botón Crear. 2. A continuación, diseñe 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 > Región repetida. b) Haga clic en Aceptar. c) Haga clic en la celda de la derecha y seleccione en el menú Insertar > Objetos de plantilla/ Región editable. d) Haga clic en Aceptar. CIBERTEC CARRERAS PROFESIONALES 54 4. Grabe su plantilla con el nombre modelo. a) Seleccione el menú Archivo > Guardar. 5. Cree las páginas 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 Página 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 botón Crear. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología f) 55 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 botón Actualizar para actualizar todas las páginas asociadas a la plantilla. 9. Haga clic en el botón Cerrar para terminar la actualización. CIBERTEC CARRERAS PROFESIONALES 56 10. Finalmente, grabe todos los archivos asociados a la plantilla y ejecute el archivo indice.html CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 57 ACTIVIDADES A DESARROLLAR EN CLASE: FORMULARIOS Actividad 6 Diseñar una página web con un formulario que pida información al usuario. Procedimiento: 1. Cree una nueva página 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 botón Formulario para insertar un formulario. CIBERTEC CARRERAS PROFESIONALES 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 Contraseña en la segunda fila de la primera columna. 11. Inserte otro objeto Campo de texto en la tercera columna. 12. Active la propiedad Contraseña. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 59 13. Ingrese el texto Adjunte su currículo 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 Botón de opción 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 Botón de opción en la tercera columna y, luego, el texto Femenino. Haga lo mismo para el sexo Masculino. 19. Ejecute su página web presionando la tecla de función F12. Compruebe el comportamiento de los botones de opción. CIBERTEC CARRERAS PROFESIONALES 60 20. Asigne a la propiedad nombre de los botones de opción Soltero y Casado el valor radioEstado. 21. Asigne a la propiedad nombre de los botones de opción Femenino y Masculino el valor radioSexo. 22. Ejecute, otra vez, su página web presionando la tecla de función F12. Compruebe el comportamiento de los botones de opción. 23. Ingrese el texto Estudios realizados en la sexta fila de la primera columna. 24. Inserte un objeto Casilla de verificación 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 séptima fila de la primera columna. 26. Inserte un objeto Lista/menú en la tercera columna. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 61 27. Con este objeto seleccionado en la página, haga clic en el botón Valores de lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para el objeto. 28. Haga clic en el botón 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 página, haga clic en el botón Valores de lista del Panel de propiedades y, luego, ingrese las siguientes alternativas para el objeto. CIBERTEC CARRERAS PROFESIONALES 62 33. Haga clic en el botón 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 Líneas núm a 40 y 6 respectivamente. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 63 ACTIVIDADES PROPUESTAS Diseñe la siguiente página web usando capas div o tablas. Diseñe la siguiente página web usando capas div o tablas. CIBERTEC CARRERAS PROFESIONALES 64 Diseñe los siguientes formularios: CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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 páginas que fueron creadas en otra computadora, debe primero crear un sitio.  Dreamweaver ofrece dos métodos de visualización y manipulación de tablas: el modo estándar, en el que las tablas se presentan en forma de cuadrícula de filas y columnas, y el modo de diseño, que permite dibujar, cambiar el tamaño y mover cuadros en la página mientras se siguen utilizando tablas para la estructura subyacente.  Si desea saber más acerca de estos temas, puede consultar las siguientes páginas:  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 página, 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 diseño 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 páginas, hallará un tutorial sobre tablas con Dreamweaver. CIBERTEC CARRERAS PROFESIONALES 66 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 67 UNIDAD DE APRENDIZAJE 2 ESTILOS CSS LOGRO DE LA UNIDAD DE APRENDIZAJE  Al término de la unidad, los alumnos construyen un sitio web y aplican estilos CSS a los elementos de dicho sitio. TEMARIO 2.1. Tema 1: Introducción a estilos CSS (2 horas) 2.2. Tema 2: CSS para textos (2 horas) 2.3 Tema 3: CSS para contenedores (2 horas) Trabajo práctico No. 3: Desarrollo de un sitio web con estilos CSS 2.4 Tema 4: CSS para formularios (2 horas) ACTIVIDADES PROPUESTAS  Los alumnos diseñan páginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de estilos CSS. CIBERTEC CARRERAS PROFESIONALES 68 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 69 2.1 INTRODUCCIÓN A ESTILOS CSS Un estilo es un conjunto de comportamientos o formatos aplicado a una etiqueta HTML que, finalmente, modificará el diseño de una página 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 párrafos. HTML tiene etiquetas propias para aplicar estos formatos. Sin embargo, en esta sesión, lo usaremos como una propiedad del atributo STYLE de cualquier etiqueta. Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis: STYLE=”propiedad1:valor;...;propiedadN:valor”> ... Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta ( , , , etc.) STYLE es el parámetro que indica que vamos a aplicar uno o varios estilos. La definición del estilo se establece por medio de pares (propiedad:valor) separados por punto y coma. Propiedad será la característica de la etiqueta que se quiere modificar (color, tamaño de la fuente, tipo de letra, etc). Valor es el valor que queremos darle (color negro, 8 puntos de tamaño de letra. Por ejemplo, si tenemos un texto en negrita y queremos que salga con un tamaño de letra 14 y en color rojo, escribiremos lo siguiente en la vista CIBERTEC CARRERAS PROFESIONALES 70 código: . La negrita que vemos es más grande y está en rojo . 2.1.2 Estilos de encabezado Dentro del TAG o etiqueta ... cuerpo del documento ... CIBERTEC CARRERAS PROFESIONALES 86 El usar hojas de estilo externas (vinculadas) nos da flexibilidad para cambiar la presentación sin tener que revisar el documento fuente HTML. ... cuerpo del documento ... CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 87 ACTIVIDADES A DESARROLLAR EN CLASE Diseño de la estructura de una página web con estilos CSS 1. Estructura a diseñar 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 CARRERAS PROFESIONALES 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; } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 89 #footer a{ color: #FFFF80; } 3. Código html de la estructura de la página web Título Encabezado Sección del contenido de cada menú Left Column: 230px Sección para el menú de navegación CIBERTEC CARRERAS PROFESIONALES 90 Right Column: 200px Sección de avisos Sección para el pie de la página web CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 91 ACTIVIDADES A DESARROLLAR EN CLASE Diseño de la estructura de una página web con estilos CSS 1. Estructura a diseñar 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, Helvética, sans-serif; color: #586885; } CIBERTEC CARRERAS PROFESIONALES 92 p {} h1 { font:25px Verdana, Arial, Helvética, sans-serif; text-align : left; color : #666666; margin:0px; } h2 { font:bold 20px Verdana, Arial, Helvética, sans-serif; text-align : left; color:#486895; text-transform: capitalize; } h3 { font:18px Verdana, Arial, Helvética, sans-serif; color : #666; } h4 { font:bold 15px Verdana, Arial, Helvética, sans-serif;} h5 { font: 13px Verdana, Arial, Helvética, sans-serif;} h6 { font:bold 12px Verdana, Arial, Helvética, sans-serif;} /***************************/ /* ESTILOS PARA LOS BOTONES*/ /***************************/ a { text-decoration: none; font-size:12px; color:#325FA0; } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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 márgenes se acomodan según 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 píxeles abajo para separar el footer*/ } CIBERTEC CARRERAS PROFESIONALES 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, Helvética, 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; CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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, Helvética, sans-serif; } 3. Código html de la estructura de la página web <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> CIBERTEC CARRERAS PROFESIONALES 96 Cabecera h1 vinculo vinculo vinculo vinculo vinculo aquí, se podría colocar una imagen, anuncios, más vínculos, las típicas imágenes de Sindicar RSS, etc... Título del contenido h2 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 97 Subtítulo h3 Este es un texto de prueba para rellenar y ver como se ven los párrafos ordenados y que hacen caso al estilo...excepto que...quien tú sabes no permita que funcione bien. Otro Subtítulo h3 Subtítulo h4 Este es un texto de prueba para rellenar y ver como se ven los párrafos ordenados y que hacen caso al estilo...excepto que...quien tú sabes no permita que funcione bien. Otro Subtítulo h4 Este es un texto de prueba para rellenar y ver como se ven los párrafos ordenados y que hacen caso al estilo...excepto que... quien tú sabes no permita que funcione bien. Cibertec 2011, archivo reservado CIBERTEC CARRERAS PROFESIONALES 98 ACTIVIDADES A DESARROLLAR EN CLASE Diseño de la estructura de una página web con estilos CSS 1. Estructura a diseñar 2. Estilo css a usar: /*************************************/ /*ESTILOS BÁSICOS 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; CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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 CARRERAS PROFESIONALES 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; } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 101 3. Código html de la estructura de la página web TÍTULO 1 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. TÍTULO 2 Bla en las playas y con su ropa charlie para que veranees envacaciones. Te juntas con tu mancha y se llevan el carro, y se van a tonear. CIBERTEC CARRERAS PROFESIONALES 102 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 103 ACTIVIDADES A DESARROLLAR EN CLASE Diseño de la estructura de una página web con estilos CSS 1. Estructura a diseñar 2. Estilo css a usar: #wrapper { width:520px; height:520px; z-index:1; margin: auto; background-color: #0FF; } #header { position:relative; width:520px; CIBERTEC CARRERAS PROFESIONALES 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; } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 105 3. Código html de la estructura de la página web Haga clic aquí para más información Haga clic aquí para más información. CIBERTEC CARRERAS PROFESIONALES 106 Haga clic aquí para más información. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 107 ACTIVIDADES A DESARROLLAR EN CLASE Diseño 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 CIBERTEC CARRERAS PROFESIONALES 108 This is a scrolling are created with the CSS property overflow. This is red color Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. This is a normal paragraph. This is big bold text This scrolling are can contain normal html like link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 109 ACTIVIDADES PROPUESTAS  Seleccione cinco páginas web creadas en las sesiones anteriores y aplique estilos de encabezado que afecten a toda la página como listas con imágenes, tamaño de fuente por defecto, márgenes, alineación de los párrafos, etc.  Cree una hoja de estilos con el nombre importar.css y, en ella, utilice diferentes etiquetas con determinados formatos que afectarán a sus documentos. Luego, abra sus páginas web creadas en sesiones anteriores e importe dicho archivo. CIBERTEC CARRERAS PROFESIONALES 110 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 111 Resumen  Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.  Se puede aplicar estilos a un sitio web completo, de modo que se puede definir la forma de todas las páginas del sitio web de una sola vez.  Se puede aplicar estilos a un documento HTML o página, de modo que se puede definir la forma en un pequeño trozo de código en la cabecera a toda la página.  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 programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos, etc.  Si desea saber más acerca de estos temas, puede consultar las siguientes páginas:  http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo Aquí, hallará una guía breve sobre hojas de estilos en cascada (CSS).  http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html En esta página, hallará un tutorial completo y práctico sobre hojas de estilo en cascada (CSS).  http://www.cristalab.com/tutoriales/94/tutorial-basico-de-css En esta página, hallará un tutorial básico de CSS. CIBERTEC CARRERAS PROFESIONALES 112 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 113 UNIDAD DE APRENDIZAJE 3 JAVASCRIPT LOGRO DE LA UNIDAD DE APRENDIZAJE  Al término de la unidad, los alumnos, con el lenguaje JavaScript, diseñarán programas que incorporarán a una página del sitio web para validar formularios. TEMARIO 3.1. Tema 1: Introducción al lenguaje JavaScript. (2 horas) 3.2 Tema 2: Validación de formularios con JavaScript. (2 horas) Trabajo práctico No. 4: Desarrollo de un sitio web con CSS y JavaScript ACTIVIDADES PROPUESTAS  Los alumnos diseñan páginas web usando el lenguaje HTML en el programa Dreamweaver, las cuales incluyen el uso de plantillas, estilos CSS y códigos JavaScript para el formulario. CIBERTEC CARRERAS PROFESIONALES 114 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 115 3.1 EL LENGUAJE JAVASCRIPT El lenguaje JavaScript es el complemento ideal de HTML al permitirle a la página 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 cálculos simples, formatear un texto para que pueda ser leído por distintas personas de manera distinta, proveer de un medio para configurar la visualización de una página, realizar un pre-chequeo de validación en un formulario antes de enviarlo, etc. El código fuente de los programas escritos en JavaScript está incluido en las mismas páginas web donde se ejecutarán. Esto difiere de los applets de Java que son cargados en forma independiente a las páginas web. También, se podrá cargar un archivo de JavaScript (.js) a una página web, pero el código siempre será fuente. Esto difiere de los applets de Java que se cargan como código compilado. JavaScript es soportado por muchos browsers. Al cargar una página 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 código debe estar en fuente. Por consecuencia, se presentan algunas ventajas como las siguientes:  Las actualizaciones son sobre el código sin necesidad de volver a compilar.  Se transfiere con el código HTML de la misma página web.  Además, los lenguajes interpretados son más fáciles de aprender. Su desventaja sería que siempre el código desarrollado es visible para otros usuarios (no hay forma de protegerlo). El lenguaje Java compila su código antes del tiempo de ejecución. En JavaScript, el código fuente se ejecuta directo y es interpretado por el browser que lo cargó. CIBERTEC CARRERAS PROFESIONALES 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 pequeños y reciben información a través de eventos y propiedades de los objetos, y responden mediante propiedades de objetos y métodos. Podemos determinar ciertas reglas básicas para el desarrollo de todo programa en JavaScript: Para empezar un código 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 código JavaScript entre comentarios HTML: Entre los comentarios anteriores, debe ir el código JavaScript: document.write(”Bienvenido a JavaScript”); Donde: document es el objeto que hace referencia a la página actual en el browser. write es el método de este objeto que permite escribir en la página actual en el browser. Si se hace una siguiente escritura, se hará a continuación de la última. Cuando terminamos nuestro programa, después del cierre de comentarios de HTML, debemos cerrar la etiqueta que abrimos (<SCRIPT LANGUAGE=”JavaScript”>) con CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 117 Otra forma de usar JavaScript es creando un archivo con extensión js y llamarlo desde un documento html de la siguiente forma: <SCRIPT LANGUAGE=”JavaScript” SRC=”P01.js”> 3.1.2 Definición de variables Las variables en JavaScript pueden almacenar cualquier tipo de dato (cadenas o valores). Se considera un lenguaje de programación 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 declaración. Sintaxis: Var NombreDeVariable = valor / expresión / cadena El nombre de la variable debe empezar con una letra o el caracter de subrayado (_) Ejemplos: CIBERTEC var miVar1= “JavaScript”; // contenido: una cadena var miVar2= 123; // contenido: un valor entero var miVar3= 123.45; // contenido: un valor real CARRERAS PROFESIONALES 118 var miVar4, miVar5, miVar6; var miVar7=5, miVar8, miVar9=”ABC”; // sin contenido A continuación se declaran las variables Valor1, Valor2 y Suma, las cuales pueden ser asignadas con valores numéricos o cadenas. Para este ejemplo, se ha puesto, en ellas, valores numéricos para realizar una suma. Debe modificar el código de declaración de las variables de las siguientes formas y probar los resultados: 1) var Valor1=10, Valor2=20, Suma; 2) var Valor1=10, Valor2=20, Suma = Valor1 + Valor2; 3) var Valor1=10, Valor2=2*Valor1, Suma; 3.1.3 Métodos básicos de entrada y salida 3.1.3.1 El método prompt El método prompt muestra un cuadro de diálogo, donde el usuario podrá ingresar una cadena, la que será retornada por este método. Se puede especificar en forma opcional un valor por defecto, como muestra el formato siguiente: prompt(mensaje [,entradaPredeterminada]); CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 119 Ejemplo: <SCRIPT LANGUAGE=”JavaScript”> var Nombre; Nombre = prompt(“Ingrese su nombre”, ”Digite aquí su nombre”); document.write(“Hola “ + Nombre + “, bienvenido a JavaScript”); Nota: También, podría reemplazar esta línea por las tres líneas del programa: document.write(“Hola “ + prompt( “Ingrese su nombre” ) ); 3.1.3.2 El método alert El método alert muestra un cuadro de diálogo de aviso con algún mensaje y sonido (beep) para el usuario. Tiene el siguiente formato: alert(MensajeDeAlerta); CIBERTEC CARRERAS PROFESIONALES 120 Ejemplo: <SCRIPT LANGUAGE=”JavaScript”> alert(“Ud. está en JavaScript”); 3.1.4 Tipos de operadores JavaScript tiene una gran variedad de operadores, los que se encuentran en grupos. Estos son los siguientes: Aritméticos + Adición - Sustracción * Multiplicación / División % Módulo ++ Incremento -- Decremento CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 121 De Asignación = Asignación += Adición-Asignación -= Adición-Asignación *= Multiplicación-Asignación /= División-Asignación %= Módulo-Asignación De comparación == Igual que != Diferente que > Mayor que >= Mayor o igual que < Menor que <= Menor o igual que Lógicos && And || Or Otros ?: Ternario + Concatenar cadenas Tiene 3 operandos. El primero es un condicional que si tiene como resultado true, toda la expresión toma valor del segundo operando, caso contrario si es false, toda la expresión toma valor del tercer operando. Presenta el siguiente formato: Operando1 ? Operando2 : Operando3 Ejemplos: var CIBERTEC X; X= 10>5 ? –20 : 20; // El resultado de X == -20 X= 5>10 ? –20 : 20; // El resultado de X == 20 CARRERAS PROFESIONALES 122 3.1.5 Funciones Una función ofrece a los programadores la capacidad de agrupar código de programa que desempeña una tarea específica en una unidad individual que puede ser invocada cuando ésta sea necesaria por el programador. De esta forma, se evita el tener código repetido en el programa. 3.1.5.1 Formato de una Función Para declarar una función, usamos el siguiente formato: function NombreDeLaFunción(parámetro1, parámetro2, …, parámetroN) { BloqueDeSentencias; return Valor; } 3.1.5.2 Cómo llamar a una función Cuando se llaman a las funciones para ejecutar una función, la tenemos que llamar en cualquier parte de la página. Con eso, conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves. Para ejecutar la función, utilizamos su nombre seguido de los paréntesis. NombreDeLaFuncion() 3.1.5.3 ¿Dónde colocar las funciones? En principio, podemos colocar las funciones en cualquier parte de la página, siempre entre etiquetas <SCRIPT> claro está. CARRERAS PROFESIONALES No obstante, CIBERTEC OFIMÁTICA – Escuela de Tecnología 123 existe una limitación a la hora de colocarla con relación a los lugares desde donde se la llame. Lo normal es colocar la función antes de cualquier llamada a la misma. Así, es seguro que nunca nos equivocaremos. 3.1.5.4 Parámetros 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, también, tienen una entrada y una salida que se pueden utilizar para recibir y devolver datos. Los parámetros se usan para mandar valores a la función con los que ella trabajará para realizar las acciones. Son los valores de entrada que recibe una función. Por ejemplo, una función que realiza una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado. Eso lo veremos más adelante. Veamos un ejemplo anterior en el que creábamos una función para mostrar un mensaje de bienvenida en la página web, pero al que ahora le vamos a pasar un parámetro que contendrá el nombre de la persona a la que hay que saludar. function escribirBienvenida(nombre){ document.write(“ Hola “ + nombre + “ ”) } Como podemos ver, en el ejemplo, para definir, en la función, un parámetro, 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 función cuando la llamemos; además, la variable tendrá vida durante la ejecución de la función y dejará de existir cuando la función termine su ejecución. Para llamar a una función que tiene parámetros, se coloca entre paréntesis el valor del parámetro. Para llamar a la función del ejemplo, habría que escribir: CIBERTEC CARRERAS PROFESIONALES 124 escribirBienvenida(“Alberto García”) Al llamar a la función así, el parámetro nombre toma como valor “Alberto García” y al escribir el saludo por pantalla escribirá “Hola Alberto García” entre etiquetas . Los parámetros pueden recibir cualquier tipo de dato: numérico, textual, boleano o un objeto. Realmente, no especificamos el tipo del parámetro; por eso, debemos tener un cuidado especial al definir las acciones que realizamos dentro de la función y al pasarle valores a la función para asegurarnos que todo es consecuente con los tipos de nuestras variables o parámetros. 3.1.6 Funciones predefinidas JavaScript dispone de las siguientes funciones predefinidas: 3.1.6.1 eval(cadena) La función eval tiene como argumento una expresión y devuelve el valor de la misma. Esta función resulta útil para evaluar una cadena de caracteres que representa una expresión numérica. La edición efectuada mediante un campo de formulario es una cadena de caracteres que, a veces, es necesario convertir en valor numérico. El código siguiente ilustra este ejemplo y permite al usuario introducir una expresión numérica y visualizar, a continuación, el valor de la expresión. <SCRIPT> function calcula(obj){ evalua.result.value = eval(evalua.expr.value) } Introducir expresión: CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 125 Resultado: 3.1.6.2 parseInt(cadena [, base]) La función parseInt convierte una cadena de caracteres en un valor numérico. La función lleva como argumento la cadena a convertir y, opcionalmente, puede llevar un segundo argumento para indicar la base de numeración en que está escrita la cadena. Si se omite, se supone que la cadena representa un número en base 10. La cadena sólo podrá contener caracteres válidos para el sistema de numeración indicado: dígitos (0..9 para la base 10, 0 1 para números binarios, 0..7 para sistema octal, 0..9, A..F para sistema hexadecimal) y signo (+, -). Si encuentra algún caracter no válido, sólo se va a interpretar desde el principio de la cadena hasta el caracter no válido. Si comienza por un caracter ilegal devuelve NaN. Ejemplo 1: parseInt(“3453”); Devuelve el número 3453. Ejemplo 2: var minum1 = “14”; document.write(parseInt(minum1)); .... Escribirá 14. Ejemplo 3: var minum1 = “11001”; CIBERTEC CARRERAS PROFESIONALES 126 document.write(parseInt(minum1,2)); .... Ahora escribirá 25, el equivalente decimal al binario 11001. Ejemplo 4: <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; } Introduce una cadena alfanumérica: y pulsa el botón En el último campo de texto, se ha añadido el atributo readonly para que no pueda escribirse en él. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 127 3.1.6.3 parseFloat(cadena) La función parseFloat convierte una cadena que se le pasa como argumento a un valor numérico de tipo flotante. Los caracteres válidos de la cadena son los mismos que en parseInt más el punto decimal y el exponente (E). No admite un segundo argumento. Si se encuentra otros caracteres que no sean números, 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 número, devolverá cero. Por lo demás, funciona exactamente igual que parseInt. parseFloat(“3.12.3”); Este ejemplo devuelve NaN, ya que la cadena no contiene un número real válido. 3.1.6.4 isNaN(valor) La función isNaN comprueba si el valor pasado por parámetros es numérico o no. El resultado de esta función es un booleano, es decir, evalúa un argumento para ver si es NaN: Not Number. Devuelve true sólo si el argumento es NaN. Ejemplo 1: <SCRIPT> function Comprueba(form){ var number = parseFloat(form.valor.value); if (isNaN(number) == true){ alert(“No es numérico”); }else{ form.valor.value = number; alert(“Es numérico”); } } ... Introducir un valor numérico: CIBERTEC CARRERAS PROFESIONALES 128 type = ”button” value = ”Comprobar“ onClick = ”Comprueba(this.form)”> 3.2 VALIDACIÓN 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 algún campo no relleno o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos, se envía el formulario. Algunas de las validaciones típicas 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, teléfonos, etc.) Comprobar la validez de las direcciones de correo y URLs Comprobar que no se sobrepasa la longitud, número de líneas o tamaño de la entrada Cuando el usuario pulsa sobre el botón de enviar, se genera el evento submit, asociado al envío 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 envío 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í: CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 129 En esta nueva versión del formulario, al pulsar sobre el botón de envío, se ejecutará el código incluido como valor del atributo onSubmit. En este caso, se trata de un simple alert(); entonces, JavaScript informa que se ha pulsado sobre el botón de envío. Si el código JavaScript (generalmente es una función de validación) del atributo onSubmit devuelve false, la validación es incorrecta y el navegador no continúa con el envío del formulario tras ejecutar dicho código. Por el contrario, si devuelve true, la validación es correcta y el formulario se envía normalmente. 3.2.2 El objeto this Normalmente, el evento onSubmit ejecuta una función de validación, como en el siguiente ejemplo: Para poder realizar la validación, la función debe trabajar sobre los objetos del formulario a validar para acceder a su valor y evaluarlo. Esto se consigue pasándole como parámetro el objeto this, que hace referencia en este contexto al formulario desde el que se invoca la función. La función de validación accederá a los campos del formulario a partir del objeto this. A continuación, 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 validación es correcta. CIBERTEC CARRERAS PROFESIONALES 130 function Valida( miFrm ) { if (miFrm.txtMensaje.value == “ACEPTADO”) { return true } else { return false } } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 131 ACTIVIDADES A DESARROLLAR EN CLASE Ejemplo 1 En el siguiente ejemplo, definimos un campo de texto en el que ingresamos un número x. Al hacer clic sobre el botón, obtendremos el resultado (x2) en el segundo campo de texto. Al mismo tiempo, aparecerá un mensaje en la barra de estado que indicará el número introducido, así como el resultado obtenido tras aplicarle el cuadrado. Para realizar estas acciones, utilizaremos la función cuadrado. Cada vez que el usuario haga un clic sobre el botón Cuadrado (para determinarlo utilizaremos el manejador de eventos onClick), se llamará a la función del mismo nombre, pasándole como parámetro 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 número 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 más que una de sus propiedades que especifica el mensaje a mostrar en la barra de estado. El código asociado al botón es el siguiente: Escribe un número: Resultado: CIBERTEC CARRERAS PROFESIONALES 132 Las modificaciones realizadas en la función cuadrado son las siguientes: function cuadrado(numero){ document.form1.resultado.value = numero * numero; window.status=‟Ha ingresado el número „ + numero + „ y el resultado es „ +document.form1.resultat.value; } CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 133 Ejemplo 2 Determinar el área de un círculo <SCRIPT LANGUAGE=”JavaScript”> function areaCirculo(radio){ var area; area= 3.1415 * radio * radio; return area; } for(var r=1; r<=10; ++r) document.write(“ Si radio “ + r + “, área igual a “ +areaCirculo(r)); CIBERTEC CARRERAS PROFESIONALES 134 Ejemplo 3 Veamos otro ejemplo, aunque un poco más útil. Se trata de imprimir, en la página, 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(“ La tabla del “ + i + “: ”) for (j=1;j<10;j++) { document.write(i + “ x “ + j + “: “) document.write(i*j) document.write(“ ”) } } 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 demás en orden ascendente hasta el 9. Con el segundo bucle, escribimos cada uno de los valores de cada tabla. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 135 Ejemplo 4 Validación de un formulario El formulario con el que vamos a trabajar es el siguiente: CIBERTEC CARRERAS PROFESIONALES 136 Nombre: Edad: Interés: Elegir Información comercial Servicio a clientes Contacto de proveedores Se debe prestar atención en lo siguiente:  El nombre del formulario, "fm"  El botón Enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo es correcto. Función Javascript para validar el formulario La función 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 aplicación en el campo que ha dado el error y abandona la función retornando el valor 0. Si todos los campos son correctos, la función continúa hasta el final sin salirse, por no estar ningún campo incorrecto. Entonces, ejecuta la última sentencia, que es el envío del formulario. Veamos la función 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 número entero en su edad.") CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 137 document.fm.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 años.") document.fm.edad.focus() return 0; } } //Validar el interés if (document.fm.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.") document.fm.interes.focus() return 0; } //Se envía el formulario alert("Muchas gracias, por enviar el formulario"); document.fm.submit(); } CIBERTEC CARRERAS PROFESIONALES 138 Ejemplo 5 Validación de un formularios - 2 Diseñe el siguiente formulario: Código javascript que valida las entradas del formulario // JavaScript Document function validaEnvio(){ if(frm.txtNombre.value==""){ alert("Nombre vacío") return false } if(frm.txtEdad.value==""){ alert("Edad vacía") CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 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 válido") 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 CARRERAS PROFESIONALES 140 Archivo html que diseña el formulario <script src="codigos.js"> Nombre: Edad: E-mail: Distrito: Seleccione un distrito Ate Barranco Comas Chorrillos Lince Miraflores Comentario: CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 141   CIBERTEC CARRERAS PROFESIONALES 142 ACTIVIDADES PROPUESTAS Propuesto 1 Diseñe una página que al abrirse imprima las casillas de verificación que representan los asientos de un ómnibus. Propuesto 2 Diseñe un formulario que simule el lanzamiento de 3 dados al mismo tiempo y se deje de lanzar si los 3 dados obtienen el número 5. Asimismo, debe imprimir cuántos lanzamientos fueron necesarios. Propuesto 3 Diseñe el siguiente formulario: CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 143 Propuesto 4 Diseñe el siguiente formulario: CIBERTEC CARRERAS PROFESIONALES 144 Resumen  JavaScript es un lenguaje de programación interpretado, es decir, no requiere compilación. Se usa principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.  Las funciones de javascript son códigos agrupados en bloques e identificados por un nombre. Estos nombres de funciones de javascript son llamados mediante un evento desde algún elemento de la página web.  Si desea saber más acerca de estos temas, puede consultar las siguientes páginas.  http://www.webestilo.com/javascript/ Aquí, hallará un manual de Javascript.  http://www.codigojavascript.com/ En esta página, hallará códigos de Javascript desarrollados y que puede aplicar a su página web. CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 145 ANEXO GLOSARIO DE ETIQUETAS HTML CIBERTEC CARRERAS PROFESIONALES 146 CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 147 PARA CARACTERES ... Texto en negrita ... Ampliación del tamaño de los caracteres ... Texto parpadeante (sólo Netscape) ... Texto en itálico ... Texto en color donde XXXXXX es un valor hexadecimal ... Tamaño de los caracteres donde X es un valor de 1 a 7 ... Texto en itálico ... Impide las rupturas automáticas de línea de los browser ... Texto preformateado, o sea con una visualización de todos los espacios y saltos de línea ... Reducción del tamaño de los caracteres ... Puesta en negrita del texto ... Texto en indicio ... Texto en exponente ... Texto subrayado PARA TEXTOS Comentarios ignorado por el navegador A la línea ... Citación (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 ... ... ... ... Título y x tiene un valor de 1 a 7 Título centrado Título alineado a la izquierda Titulo alineado a la derecha CIBERTEC CARRERAS PROFESIONALES 148 ... ... ... ... Nuevo párrafo Párrafo centrado Párrafo alineado a la izquierda Párrafo alineado a la derecha PARA LISTAS Lista no numerada Elemento de lista Lista numerada Elemento de lista ... ... Lista de glosario Termino de glosario Explicación del término PARA RAYAS Línea de separación. 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 PARA ENLACES ... Enlace hacia una página web ... Enlace hacia una dirección email ... Enlace hacia la página fichero.htm situada en el mismo directorio ... Definición de una ancla ... ... Enlace hacia una ancla PARA IMAGENES CARRERAS PROFESIONALES CIBERTEC OFIMÁTICA – Escuela de Tecnología 149 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 ... Definición de una tabla Anchura de la tabla en % Anchura de la tabla en píxeles Anchura del borde Espacio entre el borde y el texto Espesor de la raya entre las celdas ... Línea 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 Alineación hacia arriba del contenido de la celda Centrado vertical del contenido de una celda Alineación hacia el bajo del contenido de la celda CIBERTEC Número de celdas para fusionar CARRERAS PROFESIONALES 150 horizontalmente Número de celdas para fusionar verticalmente PARA MARCOS ... Define una estructura de frames (reemplaza la etiqueta BODY) División horizontal de la ventana en % División vertical de la ventana en % Fichero mostrado en una ventana de frames ... Contenido para los browser no previstos para los frames CARRERAS PROFESIONALES CIBERTEC × Report "Manual de Ofimatica" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close