Aquí va la imagen de cabecera de mi web

NUEVAS METODOLOGÍAS PARA LA DOCENCIA DEL DISEÑO DE APLICACIONES MULTIMEDIA

  • Metodologías docentes
  • Terminología
  • CSS con Dw CS4
  • Conflicto entre estilos
  1. Lección magistral participativa: mediante el uso de las NTICs, la exploración dirigida de las funciones de la aplicación Dreamweaver CS4© y esta guía didáctica.
  2. Aprendizaje Basado en Problemas: los alumnos resolverán los ejercicios propuestos en la parte práctica y representarán las soluciones utilizando Dreamweaver CS4©.
  3. E-learnig: aprendizaje con medios electrónicos que utiliza la web como medio y recurso para la realización de actividades formativas. Se seguirán utilizando el grupo de Delicious (práctica 1) y el blog (práctica 2) para construir el conocimiento de forma cooperativa.
paso anterior

REGLAS DE ESTILO

 paso siguiente
  • Hoja de estilos en cascada (Cascade Style Sheet): colección de reglas que afectan a la apariencia de un documento o parte del mismo. Permiten controlar el aspecto desde un archivo externo a la página.
  • Regla de estilo: está determinada por una declaración compuesta de una propiedad y un valor.
  • La primera especificación de CSS (CSS 1) se hizo oficial en la recomendación W3C publicada en 1996. CSS 2 fue publicada en 1998. CSS 3 está actualmente en desarrollo.
  • Unidades de medida: absolutas (pulgadas (in) = 2.54 cm; centímetros (cm); puntos (pt) (según la resolución del usuario); picas (pc) =12 puntos) y relativas (em = a la altura de la letra del elemento en el que se usa; ex = la altura de la letra x minúscula); píxeles (px).
  • ¿Dónde se colocan las reglas?:
  1. Incrustadas en la etiqueta en el modificador style
  2. Dentro de la cabecera (HEAD) de una página y de la etiqueta STYLE
  3. En archivos externos .CSS
paso anterior

TIPOS DE ESTILOS

 paso siguiente
  • Tipos de estilosEn la imagen de la derecha se muestran los cuatro tipos de reglas de estilo.
  • Los formatos de texto se definen en Clases y aparecen en como .NombreDeClase
  • Las etiquetas que lleven un modificador ID pueden llevar asociadas los estilos #NombreDeID
  • Las etiquetas HTML pueden llevar su propio estilo
  • Puede definirse un estilo compuesto
  • Los estilos de vínculos se definen desde Propiedades de página, pero se pueden definir también con a:visited, a:link, a:active y a:hover
  • Panel Estilos CSSPara crear un nuevo estilo podemos hacerlo desde el Panel de Propiedades (izquierda) o desde el Panel Estilos CSS (derecha)Propiedades CSS Nueva Regla






  • Podemos definir la regla en este documento (en HEAD STYLE) o en una hoja externa (.CSS). La función Mover Reglas CSS del menú desplegable del panel permite trasladar reglas a una hoja.
  • Los estilos definidos estarán accesibles en el Panel Estilos CSS.
  • Para aplicar un estilo utilizaremos o el Panel de Propiedades, o el Selector de Etiquetas, más Botón Derecho del Ratón, para asignar clase o ID a una etiqueta HTML concreta seleccionada.
  • Podemos crear página nueva con estilos predefinidos por Dw CS4© desde la opción Página de Muestra

En el Selector de etiquetas podemos observar qué etiquetas heredan propiedades de qué otras: las de la derecha heredan las de la izquierda. Por ello, es conveniente en primer lugar declarar reglas para las etiquetas principales: BODY, TABLE, FORM, P, A y para los ID (#) aplicables a capas DIV.Prioridad de hojas en Panel Estilos CSS
Selector de etiquetas

Por regla general, en caso de conflicto entre estilos, el estilo que se aplicará será el que esté indicado más cerca en el código html del objeto receptor del estilo, es decir, más a la derecha en el Selector de etiquetas.
Por ejemplo: Si el código es <td><p>Hola</p></td>, Hola mostrará el estilo de la etiqueta P.

Si un mismo estilo está declarado en STYLE y en hoja de estilos vinculada mediante la etiqueta LINK (herramienta Vincular Vincular hoja de estilos en Panel Estilos CSS), el que será aplicado será el declarado más cerca de la etiqueta BODY, es decir, el que aparezca en la parte inferior del Panel Estilos CSS. Por ejemplo, en la figura del panel, STYLE tiene prioridad frente a las hojas superiores.

Práctica 4: Aplicación de estilos CSS

  1. Descargue el archivo ejemplobase.htm y guarde como ejemplo.htm. Cree los estilos de la figura para transformar la apariencia a la que se muestra en esta imagen ejemplo.jpg. Elija las tipografías de párrafos y encabezados, los sangrados en párrafo, las propiedades de borde, de padding y aplique las clases o el identificador que se indica. El estilo a:hover implica aumentar el tamaño a 20pt y cambiar el color a azul estilos

  2. Mueva los estilos de la página ejemplo.htm a una hoja de estilos externa.

  3. Pruebe las plantillas de hojas de estilos incorporadas en Dreamweaver CS4© al crear página nueva.
NUEVAS METODOLOGÍAS PARA LA DOCENCIA DEL DISEÑO DE APLICACIONES MULTIMEDIA by
MERCEDES PEREZ DE LA PARTE, EMILIO JIMENEZ MACIAS, JULIO BLANCO FERNANDEZ Y EDUARDO MARTINEZ CAMARA
is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License