manual de ofimatica
TRANSCRIPT
OfimticaEscuela de Tecnologa
2
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
3
NDICEPresentacin 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
CARRERAS PROFESIONALES
4
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
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
5
PRESENTACINOfimtica 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
CARRERAS PROFESIONALES
6
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
7
RED DE CONTENIDOS
Ofimtica
Dreamweaver
Estilos
JavaScript
HTML
Imgenes
Textos
Lenguaje JavaScript
Validacin de formularios
Textos
Enlaces
Contenedores
Formularios
Plantillas
Formularios
CIBERTEC
CARRERAS PROFESIONALES
8
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
9
UNIDAD DE APRENDIZAJE
1
HTML5LOGRO 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
CARRERAS PROFESIONALES
10
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
11
1.1 INTRODUCCIN A HTML5HTML 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 HTML5La estructura del documento, en HTML 5, es un poco diferente a la de las versiones anteriores de HTML.
CIBERTEC
CARRERAS PROFESIONALES
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 .
Ejemplo de estructura de un documento HTML5: Articulo (HTML5) Nombre del sitio
- Navegacin principal
Article title Metadata del articulo Contenido del articulo Final de articulo Sidebar title Sidebar content Footer
CARRERAS PROFESIONALES
CIBERTEC
OFIMTICA Escuela de Tecnologa
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: Mi primer documento HTML Hola mundo!
1.1.2 Diferencias bsicas entre HTML4 y HTML5En 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
CARRERAS PROFESIONALES
14
1.1.3 Directivas o etiquetasLas 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 "". Las etiquetas, generalmente, vienen en pares y . 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 es lo mismo que .CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa15Las 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: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:La siguiente es una
lista de algunas etiquetas ms importantes:Etiqueta
DescripcinAsigna 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 utilizadoCIBERTECCARRERAS PROFESIONALES16 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
Dreamweaver1.1.4 La Herramienta DreamweaverDreamweaver es un editor
HTML profesional para disear, codificar y desarrollar sitios,
pginas y aplicaciones web. Si desea controlarmanualmente 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 DreamweaverPara 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa17El entorno de DreamweaverLo 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 ArchivosEl 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 tablaCIBERTECCARRERAS
PROFESIONALES18haciendo clic en el botn Tabla de la barra
Insertar.Asimismo, si loprefiere, 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
lasoperaciones 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 vercmo 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa19Inspector 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 DreamweaverUn 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
yadministracin 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
yCIBERTECCARRERAS PROFESIONALES20administrar 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela
de Tecnologa21Observe 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.CIBERTECCARRERAS PROFESIONALES223.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 IMGENESPara insertar una imagen, es conveniente tenerla
previamente guardada en la carpeta del sitio. De lo contrario,
Dreamweaver nos advertir para queguardemos 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 imgenesUn 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 deCARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa23propiedades 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.CIBERTECCARRERAS PROFESIONALES244. 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa25Tambin, 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.CIBERTECCARRERAS
PROFESIONALES261.2.2 Imagen de sustitucinUna imagen de sustitucin
es aquella que, al visualizarse en un navegador, cambia cuando el
puntero pasa sobre ella. Una imagen de sustitucinconsta, 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa273. 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
sustitucinCIBERTECCARRERAS PROFESIONALES281.2.3 TablasLas 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 especificarseexplcitamente 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 InsertarEn 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa29Introduzca 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
TardeMartesMircolesJuevesViernes1.2.3.2 ModificarSi 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 ms brillante. Eso quiere decir que es la celda la que
est seleccionada.CIBERTECCARRERAS PROFESIONALES30Por 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 , 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. CeldaAccin Modificar el
nmero de filas Modificar el nmero de columnas Modificar la anchura
de la tabla Modificar el espacio entre los bordes y el
contenidoEsp. celda Alinear Borde Col. fondo Col. borde Im.
FondoModificar 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 fondoPara
hacer cambios a una fila, colocamos el cursor en una celda de esa
fila y marcamos la etiqueta de la barra de Estado. As,
quedarCARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa31seleccionada 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 lasceldas 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 enOtra
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 ENLACESLos 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
externosEl 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 lapropiedad 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:CIBERTECCARRERAS
PROFESIONALES32Como en el caso anterior, compruebe que funciona.
Para ello, presione la tecla F12 y comprubelo con el
navegador.1.3.2 Enlaces internosUn 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa331.3.3 Enlaces
MixtosLos 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#historia1.4 DISEO CON PLANTILLASUna 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, ustedespecifica 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 deregiones 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:CIBERTECCARRERAS
PROFESIONALES34Se debe mostrar, en la barra de ttulos de su
archivo, lo siguiente:1.4.1 Insertar regionesAl 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa35Una 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 deseemostrar por defecto. El texto debe insertarse dentro
del marco de la regin.CIBERTECCARRERAS PROFESIONALES36Para 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 plantillaPara 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa371.4.3 Crear pginas basadas en una plantillaPara 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, debeCIBERTECCARRERAS
PROFESIONALES38usar enlaces de mapas de imagen. Si son textos, debe
crear enlaces de textos.1.4.4 Actualizar pginas (documentos)
basadas en una plantillaCuando 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, aCARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa39continuacin, 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 habaseleccionado 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 FORMULARIOSUn 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.CIBERTECCARRERAS
PROFESIONALES402.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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa416. 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 formularioEn Dreamweaver, los tipos de entrada de los
formularios se denominan objetos de formulario. Los objetos de
formulario son mecanismos quepermiten 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 sepuede 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.CIBERTECCARRERAS
PROFESIONALES42Nota: 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa43Casillas 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
verificacinseleccionadas: 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 siguienteejemplo, 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 disponeCIBERTECCARRERAS
PROFESIONALES44de 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.ListaMenMen 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa45ACTIVIDADES A
DESARROLLAR EN CLASEActividad 1 Escriba el siguiente cdigo en
Dreamweaver. Active la vista Cdigo para ello. El resultado genera
textos con hipervnculos o enlaces a pginas web: Mi pgina del web -
3 Mis pginas favoritas stas son mis pginas favoritas: Google
Microsoft
Yahoo! Grabe este documento como enlaces
externos.htmlCIBERTECCARRERAS PROFESIONALES46Actividad 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 sonidoGrabe este documento
como lista anidada.htmlCARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa47Actividad 3 Abra un nuevo documento html y
cree otra lista anidada segn el siguiente modelo:Mis aficionesSin
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
clsicaGrabe este documento como aficiones.htmlCIBERTECCARRERAS
PROFESIONALES48Actividad 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
desustitucin. 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa493. 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 Tabla6. 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.CIBERTECCARRERAS
PROFESIONALES508. 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 PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa5110. 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.jpg12. 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.CIBERTECCARRERAS PROFESIONALES52ACTIVIDADES A
DESARROLLAR EN CLASE: PLANTILLASActividad 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 CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa53d) Luego, haga clic en el botn Crear.2. A
continuacin, disee la plantillaa) 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.CIBERTECCARRERAS PROFESIONALES544. 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa55f)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.CIBERTECCARRERAS PROFESIONALES5610. Finalmente, grabe
todos los archivos asociados a la plantilla y ejecute el archivo
indice.htmlCARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa57ACTIVIDADES A DESARROLLAR EN CLASE: FORMULARIOSActividad
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.CIBERTECCARRERAS
PROFESIONALES585. 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa5913. 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.CIBERTECCARRERAS PROFESIONALES6020. 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa6127. 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.CIBERTECCARRERAS PROFESIONALES6233.
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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa63ACTIVIDADES
PROPUESTASDisee la siguiente pgina web usando capas div o
tablas.Disee la siguiente pgina web usando capas div o
tablas.CIBERTECCARRERAS PROFESIONALES64Disee los siguientes
formularios:CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa65Resumen 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.CIBERTECCARRERAS PROFESIONALES66CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa67UNIDAD DE
APRENDIZAJE2ESTILOS CSSLOGRO DE LA UNIDAD DE APRENDIZAJE Al trmino
de la unidad, los alumnos construyen un sitio web y aplican estilos
CSS a los elementos de dicho sitio.TEMARIO2.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)ACTIVIDADES PROPUESTAS Los alumnos disean
pginas web usando el lenguaje HTML en el programa Dreamweaver, las
cuales incluyen el uso de estilos CSS.CIBERTECCARRERAS
PROFESIONALES68CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa692.1 INTRODUCCIN A ESTILOS CSSUn 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 importados2.1.1 Estilos de etiquetaLos
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 es la etiqueta de HTML en la que
queremos dar una apariencia concreta (, , , 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
vistaCIBERTECCARRERAS PROFESIONALES70cdigo: . La negrita que vemos
es ms grande y est en rojo .2.1.2 Estilos de encabezadoDentro del
TAG o etiqueta 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa716. 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.CIBERTECCARRERAS PROFESIONALES7211. Inserte
textos en su documento para ver los efectos de los estilos de
encabezado.2.1.3 Estilos importadosUn 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 unaetiqueta de
vinculacin en la pgina web mediante las siguientes
instrucciones:@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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa73Para 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.CIBERTECCARRERAS PROFESIONALES746. Haga
clic en el botn Nueva regla CSS.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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa7512. 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 CSSEn 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 establecidas1. 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 deCIBERTECCARRERAS PROFESIONALES76En
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 CSS4. 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.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela
de Tecnologa772.2 CSS PARA TEXTOSAtributo 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 }CIBERTECCARRERAS
PROFESIONALES78Elimina 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 CONTENEDORESUn
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 dosCARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa79Atributo 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.CIBERTECCARRERAS
PROFESIONALES802.4 CSS PARA FORMULARIOSCon 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; }CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa81ACTIVIDADES A DESARROLLAR EN CLASEActividad 1Desarrolle
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.5. Haga clic en el botn Nueva regla
CSS.CIBERTECCARRERAS PROFESIONALES826. 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.CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa8310. En su
pantalla, se mostrar el siguiente cdigo:CIBERTECCARRERAS
PROFESIONALES84Actividad 2El 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.El maravilloso curso de HTML El
maravilloso curso de HTMLEl resultado ser un texto con
sombra.CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa85Actividad 3Compruebe las diferentes formas de utilizar
estilos en un documento.El siguiente estilo no debera usarse en el
diseo de una pgina. Un estudio sobre la dinmica de la poblacin ...
cuerpo del documento ... Si usa hojas de estilo, puede conseguir el
mismo efecto de la siguiente manera: Un estudio sobre la dinmica de
la poblacin BODY { background: white; color: black } A:link {
color: red } A:visited { color: maroon } A:active { color: fuchsia
} ... cuerpo del documento ... CIBERTECCARRERAS PROFESIONALES86El
usar hojas de estilo externas (vinculadas) nos da flexibilidad para
cambiar la presentacin sin tener que revisar el documento fuente
HTML. Un estudio sobre la dinmica de la poblacin ... cuerpo del
documento ... CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa87ACTIVIDADES A DESARROLLAR EN CLASEDiseo de la estructura
de una pgina web con estilos CSS 1. Estructura a disear2. 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; }CIBERTECCARRERAS PROFESIONALES88#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
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa89#footer a{
color: #FFFF80; }3. Cdigo html de la estructura de la pgina web
Documento sin ttulo Ttulo Encabezado Seccin del contenido de cada
men Left Column: 230px Seccin para el men de navegacin
CIBERTECCARRERAS PROFESIONALES90 Right Column: 200px Seccin de
avisos Seccin para el pie de la pgina web CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa91ACTIVIDADES A
DESARROLLAR EN CLASEDiseo de la estructura de una pgina web con
estilos CSS 1. Estructura a disear2. 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;
}CIBERTECCARRERAS PROFESIONALES92p 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; }CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa93a: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*/ }CIBERTECCARRERAS PROFESIONALES94div#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;CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa95background-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 Web armada con CSS CIBERTECCARRERAS
PROFESIONALES96 Cabecera h1
vinculovinculo vinculo vinculo vinculo aqu, se podra colocar
una imagen, anuncios, ms vnculos, las tpicas imgenes de Sindicar
RSS, etc...
Ttulo del contenido h2CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa97Subttulo h3 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. Otro Subttulo h3 Subttulo h4 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. Otro Subttulo h4 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.
Cibertec 2011, archivo reservado CIBERTECCARRERAS
PROFESIONALES98ACTIVIDADES A DESARROLLAR EN CLASEDiseo de la
estructura de una pgina web con estilos CSS 1. Estructura a
disear2. 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;CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa99margin: 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;CIBERTECCARRERAS
PROFESIONALES100height: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
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa1013. Cdigo html
de la estructura de la pgina web Documento sin ttulo TTULO 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.
TTULO 2 Bla en las playas y con su ropa charlie para que veranees
envacaciones. a tonear. Te juntas con tu mancha y se llevan el
carro, y se vanCIBERTECCARRERAS PROFESIONALES102 CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa103ACTIVIDADES A
DESARROLLAR EN CLASEDiseo de la estructura de una pgina web con
estilos CSS 1. Estructura a disear2. Estilo css a usar: #wrapper {
width:520px; height:520px; z-index:1; margin: auto;
background-color: #0FF; } #header { position:relative;
width:520px;CIBERTECCARRERAS PROFESIONALES104height: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 PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa1053.
Cdigo html de la estructura de la pgina web Documento sin ttulo
Haga clic aqu para ms informacin Haga clic aqu para ms informacin.
CIBERTECCARRERAS PROFESIONALES106 Haga clic aqu para ms informacin.
CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa107ACTIVIDADES A DESARROLLAR EN CLASEDiseo de una capa de
textos con barra de desplazamiento con estilos CSSLa 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 Documento sin
ttulo CIBERTECCARRERAS PROFESIONALES108 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 PROFESIONALESCIBERTECOFIMTICA Escuela
de Tecnologa109ACTIVIDADES PROPUESTAS 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.CIBERTECCARRERAS
PROFESIONALES110CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa111Resumen 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.CIBERTECCARRERAS
PROFESIONALES112CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa113UNIDAD DE APRENDIZAJE3JAVASCRIPTLOGRO DE LA UNIDAD DE
APRENDIZAJE Al trmino de la unidad, los alumnos, con el lenguaje
JavaScript, disearn programas que incorporarn a una pgina del sitio
web para validar formularios.TEMARIO3.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 JavaScriptACTIVIDADES PROPUESTAS 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.CIBERTECCARRERAS
PROFESIONALES114CARRERAS PROFESIONALESCIBERTECOFIMTICA Escuela de
Tecnologa1153.1 EL LENGUAJE JAVASCRIPTEl 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.CIBERTECCARRERAS PROFESIONALES116JavaScript 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
JavaScriptLos 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: 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 () con CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa117Otra forma de
usar JavaScript es creando un archivo con extensin js y llamarlo
desde un documento html de la siguiente forma: JavaScript 3.1.2
Definicin de variablesLas 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 /
cadenaEl 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 realCIBERTECCARRERAS
PROFESIONALES118var varmiVar4,miVar5, miVar6;// sin
contenidomiVar7=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 esteejemplo, 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
salida3.1.3.1 El mtodo promptEl 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]);CARRERAS PROFESIONALESCIBERTECOFIMTICA
Escuela de Tecnologa119Ejemplo: JavaScript var Nombre; Nombre =
prompt(Ingrese su nombre, Digite aqu su nombre);
document.write(Hola + Nombre + , bienvenido a JavaScript); Nota:
Tambin, podra reemplazar esta lnea por las tres lneas del
programa:document.write(Hola nombre ) );+prompt(Ingresesu3.1.3.2 El
mtodo alertEl mtodo alert muestra un cuadro de dilogo de aviso con
algn mensaje y sonido (beep) para el usuario. Tiene el siguiente
formato: alert(MensajeDeAlerta);CIBERTECCARRERAS
PROFESIONALES120Ejemplo: JavaScript alert(Ud. est en JavaScript);
3.1.4 Tipos de operadoresJavaScript tiene una gran variedad de
operadores, los que se encuentran en grupos. Estos son los
siguientes:Aritmticos + * / % ++ -Adicin Sustraccin Multiplicacin
Divisin Mdulo Incremento DecrementoCARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa121De Asignacin =
+= -= *= /= %= Asignacin Adicin-Asignacin Adicin-Asignacin
Multiplicacin-Asignacin Divisin-Asignacin Mdulo-AsignacinDe
comparacin == != > >= < 5 ? 20 : 20; X= 5>10 ? 20 :
20;CIBERTECCARRERAS PROFESIONALES1223.1.5 FuncionesUna 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 FuncinPara declarar una funcin,
usamos el siguiente formato:functionNombreDeLaFuncin(parmetro1,
parmetro2, ,parmetroN) { BloqueDeSentencias; return } Valor;3.1.5.2
Cmo llamar a una funcinCuando 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 claro est. No obstante,CARRERAS
PROFESIONALESCIBERTECOFIMTICA Escuela de Tecnologa123existe 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 noscualquier llamada a la misma.
equivocaremos.3.1.5.4 Parmetros de las funcionesLas 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 querecibe 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(Hola + nombre + ) }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:CIBERTECCARRERAS
PROFESIONALES124escribirBienvenida(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 .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 predefinidasJavaScript 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 decaracteres 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 siguienteilustra
este ejemplo y permite al usuario introducir una expresin numrica y
visualizar, a continuacin, el va