Tema: Maquetación Web y CSS

Transcripción

1 Diseño Digital V. Guía 4 1 Tema: Maquetación Web y CSS Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Objetivos Contenidos A través del desarrollo de la guía el estudiante será capaz de estructurar una página web con HTML5 y aplicar formato y estilo con CSS. Hojas de Estilo CSS Modelo de Caja Materiales y Equipo Guía 4 previamente leída. Hoja de evaluación correspondiente a la guía 4. Maquetación Web y CSS CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. Generalidades: CSS significa Cascading Style Sheets Los estilos definen cómo mostrar los elementos HTML El CSS fue añadido a HTML 4.0 para resolver problemas Las hojas de estilo externas pueden ahorrar una gran cantidad de trabajo Las hojas de estilo externas se almacenan en archivos CSS Breve historia del CSS Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del an o Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos. El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores.

2 2 Manual de laboratorios El organismo W3C (World Wide Web Consortium) propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). La propuesta CHSS fue realizada por Ha kon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets). En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo an adió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como CSS nivel 1. A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS. El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como CSS nivel 2. La adopción de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El mismo an o que se publicó CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el an o Hoy en día se utiliza la versión CSS3 y todos los navegadores son compatibles. Funcionamiento Básico Antes de la adopción de CSS, los disen adores de páginas HTML debían definir el estilo y el aspecto de los elementos HTML en el propio documento. El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el taman o de letra de cada elemento de la página.

3 Diseño Digital V. Guía 4 3 El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Y si fueran 50 HTML serían muchas etiquetas <font>. La solución que propuso CSS es mucho mejor, como se puede ver en el siguiente ejemplo: CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página. Pero además CSS permite crear una página de estilos independiente al HTML que se puede adjuntar a todos los HTML del sitio Web, ahorrando tiempo y optimizando recursos. Sintáxis CSS Una regla CSS consta de un selector y un bloque de declaraciones: El selector es el tipo de elemento del HTML donde se aplicará el estilo. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye un nombre de propiedad y un valor, separados por dos puntos.

4 4 Manual de laboratorios Para un mayor orden las reglas se declaran en un archivo CSS de la siguiente forma: Colocando el selector primero, luego cada propiedad en una línea diferente. Además se pueden agregar comentarios para explicar el código. Los comentarios son ignorados por los navegadores. Un comentario CSS comienza con / * y termina con * /. Selectores CSS Los selectores CSS permiten seleccionar y manipular los elementos HTML, se utilizan para encontrar (o seleccionar) elementos HTML en función de: id, clases y etiquetas. Selector de etiqueta o elementos: selecciona elementos basados en el nombre del elemento. Por ejemplo puede seleccionar todas las etiquetas <p> de una página y aplicar una propiedad específica a todos esos elementos. Se identifican porque poseen directamente el nombre de la etiqueta o elemento HTML. Selector de id: El selector de id utiliza el atributo id de una etiqueta HTML para encontrar el elemento específico. Un identificador debe ser único dentro de una página, por lo que debe utilizar el selector de ID cuando se quiere encontrar un único elemento. Para especificar un selector de id, se utiliza el signo #. Selector de clase: Utilizando este selector, se pueden seleccionar todos los elementos de la página cuyo atributo class coincida con el selector. Para especificar un selector de clase se utiliza un punto antes del nombre de la clase. Insertar CSS en el HTML Existen tres maneras para poder insertar CSS en los archivos HTML: Hoja de estilo interna Hoja de estilos externa Estilos inline Incluir CSS en el mismo documento: Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

5 Diseño Digital V. Guía 4 5 Incluir CSS con hoja de estilo externa: En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es.css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. Incluir CSS inline : Se incluye el estilo en el elemento HTML. Este método es el menos utilizado y el menos recomendado. Etiqueta DIV y CSS en la maquetación Web. El elemento <div> es un elemento de bloque que se puede utilizar como un contenedor para agrupar otros elementos HTML. El elemento <div> no tiene ningún significado especial. Salvo que, por tratarse de un elemento a nivel de bloque, el navegador mostrará un salto de línea antes y después de el. Cuando se utiliza junto con CSS, el elemento <div> se puede utilizar para establecer atributos de estilo para grandes bloques de contenido. Otro uso común del elemento <div>, es para el disen o del documento. Sustituye a la vieja manera de la definición de disen o utilizando tablas. Las propiedades de los DIVs pueden ser modificados mediante CSS, de manera que podemos agregar valores importantes como posicionamiento o taman o específico, que nos permite poder maquetar una página web. Otro punto importante en la maquetación es el modelo de caja del CSS que permite agregar valores a los DIVs.

6 7 Manual de laboratorios Hoja de resultados 4 Guía 4: Maquetación Web y CSS NOTA FINAL: Alumno: Puesto No: EVALUACIÓN CONOCIMIENTO Optimización de Imágenes para la web, creación de recursos para la web, Adobe Firework como herramienta de edición % Nota Conocimiento deficiente de los conceptos de maquetación web y estilos CSS Conocimiento y explicación incompleta de los conceptos de maquetación web y estilos CSS Conocimiento completo y explicación clara de los conceptos de maquetación web y estilos CSS APLICACIÓN DEL CONOCIMIENTO No creó la hoja de estilos. Creó la hoja de estilos pero no la adjunto correctamente al HTML, o la realizó de forma interna. Creó correctamente la hoja de estilos externa y la adjunto al HTML utilizando la etiqueta adecuada y en el elemento adecuado. No creó reglas de CSS o no se aplicaron a los elementos del HTML Las reglas de CSS contienen errores de sintaxis y no se aplican correctamente a los elementos del HTML Creó correctamente la sintaxis de las reglas de CSS según tipo de selector y las aplicó adecuadamente ACTITUD Responsabilidad, lectura de guías de laboratorio, materiales requeridos para la práctica, bocetos 10% La estructura tiene errores y no aplicó reglas CSS. Materiales incompletos o no cumplen con lo requerido para la práctica. Creó la estructura del HTML pero la secuencia de los elementos no es lógica según el diseño del ejercicio. Aplicó reglas CSS. Los materiales requeridos para la práctica no están desarrollados adecuadamente o no fueron entregados puntualmente. Creó correctamente la estructura HTML según el diseño de la página y aplicó correctamente las reglas de CSS para darles formato. Trajo los materiales requeridos para la práctica y fueron presentados puntualmente. 10% No tiene actitud proactiva. Actitud propositiva y con propuestas no aplicables al contenido de la guía. Tiene actitud proactiva y sus propuestas son concretas.