Bachillerato En Filosfia

Módulo 7







Contenidos: Inserción de una película SWF en una archivo HTML. Estilos de hojas de estilos en cascada (CSS)


Vínculos con una parte específica de un documento (“punto de fijación con nombre”)


Integración de contenidos: Marcos, botonera (FW)




1) Haremos una botonera en FW con dos botones “Domésticos” y “Felinos”
2) Esta botonera estará ubicada enmarco superior de un conjunto de dos marcos, como muestra el esquema:
3) Abrimos DREAMWEAVER, hacemos un sitio nuevo en la carpeta ejercicio 7
4) El marco inferior comienza mostrando (origen) el HTML que ya está hecho
5) El botón “Domésticos” abre, en el marco inferior, un HTML que contiene la película SWF “domesticos.swf”.
Insertar>Media>Flash
Nota: esta versión de DW tiene unerror y el menú dice >Botón Flash
Redimensionamos el objeto insertado (es un poco pequeño) para que ocupe todo la ventana, pero sin necesidad de hacer scroll.
6) El otro botón “Felinos” abre, también, en el marco inferior, la página que haremos a continuación:


Haremos la página “felinos.html” aplicando estilos CSS y vínculos a la propia página

7) Hacemos un archivo nuevo al quellamaremos “felinos.htm”, lo abrimos.
8) Como siempre hacemos Modificar>Propiedades de la página…Título “felinos”, Margen izquierdo: “0”, Margen superior: “0”
9) insertamos una tabla de 5 filas por 1 columna, 750 px de ancho(borde 1)
10) En la segunda fila insertamos otra tabla, (al 100% de ancho) de 1 fila por 5 columnas. 20% de ancho cada celda.
11) En la quinta fila (de la tablaoriginal), insertamos otra tabla más, ésta de 5 filas por dos columnas(al 100% de ancho). Cada celda de la izquierda debe medir 270 px y cada celda de la derecha 480 px
12) En la primera fila de la tabla “grande”, escribimos “felinos” sin ningún formato
13) En cada una de las celdas de la segunda fila escribiremos: “Gepardo, Puma, León, Tigre y Jaguar” respectivamente, funcionaran comolinks..
14) En la tercera fila insertamos la imagen “felinos”
15) En la cuarta fila copiamos el texto del archivo de Word “felinos”
16) En las celdas de la izquierda de las filas siguientes insertamos la imágenes de los animales en el mismo orden en que hicimos los links.
17) En las celdas de la derecha pegamos los textos correspondientes a cada imagen de la izquierda.
18) Abrimos elpanel Estilos CSS:
Ventana > Estilos CSS.
Veremos la siguiente ventana:


[pic]



Teoría: Estilos de hojas de estilos en cascada


Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web.


Cuando se utiliza CSS para dar formatos a una página, se separa el contenido de la presentación: elcontenido de su página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilo externa) o en otra parte del documento HTML (normalmente en la sección ).


Los estilos CSS aportan gran flexibilidad y control sobre el aspecto exacto que se busca en una página, desde la colocación precisa de elementoshasta el diseño de fuentes y estilos concretos.


Además del formato del texto, puede utilizar CSS para controlar el formato y la posición de elementos de nivel de bloque (block-level) de una página Web. Por ejemplo, puede ajustar márgenes y bordes para elementos de nivel de bloque, texto flotante sobre texto fijo, etc.


CSS permite definir muchas propiedades que no se pueden controlarutilizando sólo HTML. Por ejemplo, puede especificar distintos tamaños y unidades de fuente (píxeles, puntos, etc.) para el texto seleccionado.


Además de los estilos y de las hojas de estilos que Ud. crea, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos


La expresión en cascada hace referencia a la posibilidad de aplicar varios estilos al mismo...