POW Tema 4: Mas sobre Hojas de Estilo. 2 Posicionamiento y Visualización Los factores que se tienen en cuenta para generar cada caja de las que se muestran.

Slides:



Advertisements
Presentaciones similares
Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios.
Advertisements

Repaso desde HTML a XHTML
Iniciación al Power Point
TABLAS EN WORD.
Informática Aplicada a la Gestión de Empresas (IAGE) Parte III Excel e Internet Tema 2.
Marcos y multimedia con html
Diseño de Páginas Web: HTML
Lección 3 Cuadros de lista
Lenguaje de definición
SESIÓN 3 APRENDIENDO HTML.
DOM ( Document Object Model) Prof. Franklin Cedeño.
1 Programa P.A.L.M. Microdisector Laser Tutorial 1/3 Tutorial 1/3 MENÚ GENERAL MENÚ GENERAL.
MENSAJE DEL DIA ALBERT EINSTEIN
HTML Estructura.
Curso de Diseño Web Profesor: Mario Figge. Vamos a construir un sitio  Para construir un sitio necesitamos 3 cosas:  1. Un nombre misitio.com  2. Un.
Personalización en diseño visual y comportamiento de la plantilla
HTML/CSS Marcas básicas.
Como empezar en Access 2000 Abrir Access 2000 Pulsamos INICIO
Estructura de Documento Atributos 1. Atributos Básicos id, class, style, title 2. Atributos para Internacionalización lang, xml:lang, dir 3. Atributos.
DISEÑO SITIOS WEB CON HTML Los sitios html comienzan con el código de inicio y terminan con el código Así que ponemos Los sitios html se dividen en un.
Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una.
Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División.
DR. ERNESTO SUAREZ.
Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · eXtensible Stylesheet Language Formatting Objects.
Lección 8 Botones, objetos de texto y de línea
CSS div.
ENTORNO GRÁFICO DE VISUAL BASIC 2013
CSS Estructura.
Ingeniero de Sistemas – Universidad de Los Andes
¿CÓMO ESCRIBIR CON WRITER?
TRABAJO PRACTICO N°19.
Es la tercera etiqueta de Excel de la banda de opciones.
TAMAÑO Y ORIENTACIÓN DEL PAPEL
Por principio un DIV, aunque su contenido sea muy pequeño ocupa todo el ancho de su padre generalmente el body, ya que son elementos de bloque. Recordar.
DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Posicionamiento con CSS.
Publicación de bases de datos Access en la web
inicio y diseño de pagina
Problema de inclusión en una Curva Digital Por Orellana Muñoz, Alfonso Paz Vicente, Rafael Pérez Medina, Gerardo Rodríguez Naranjo.
Microsoft OFFICE Word MBA. Lida Loor Macías.
Herramientas informáticas
ETIQUETAS. Importante Que es una Etiqueta: Son elementos que tienen dos propiedades básicas: atributos y contenidose crea de esta forma, Se cierra de.
El lenguaje HTML Este lenguaje nos permite estructurar documentos. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas...)
Listas Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible.
PROTECCIÓN DE CELDAS Y HOJAS DE CÁLCULO
GUARDAR UN DOCUMENTO Y ABRIR UN DOCUMENTO
¿CÓMO ESCRIBIR CON WRITER? Al escribir con Writer no debemos preocuparnos porque la línea se acabe. Si continuamos escribiendo veremos que cuando no quepa.
Instituto Tecnológico Superior “Daniel Álvarez Burneo” Propiedades de Tipo, Fondo, Bloque, Borde de CSS Integrantes: Anita Carrión Mercedes Rodríguez María.
Estructura de un documento HTML Opcionalmente los documentos escritos en HTML empezarán por la marca y finalizarán con la marca. Esta marca tan solo sirve.
Tarea de investigación
Jairo Andres Mutis MacDonald Hans Nieto Damian Sanchez Alejandro Garzón.
Microsoft Power Point Tema: “Como manejo del Power Point como herramienta estudiantil”.
Integrantes: Crespo Kevin Cabrera Gabriela Vásconez Carlos.
CODIGO HTML HTML, siglas de HyperText Markup Language
Sitios WEB HTML Dreamweaver Interfaz Instructor: Adbeel Cabnal.
EXCEL 2013 DEFINICION PARTES FUNDAMENTALES DIBUJOS EXCEL VIDEO
Profesora: Angela Maiz
Graficas en la pantalla 2D. Generalidades Para visualizar la gráfica correspondiente a una función de una variable o una ecuación de dos variables se.
HTML. INTRODUCCIÓN A LOS MARCOS HTML Los marcos HTML permiten presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes.
TABLAS DINAMICAS – HERRAMIENTAS DE COLABORACION Y SEGURIDAD
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. CSS.
DISEÑO DE PÁGINAS WEB HTML Y CSS Tema 6: CSS Jose Miguel Vidagany Igual.
Si una imagen tiene varias capas, debe elegir la capa en la que desea trabajar. Los cambios que realice en la imagen afectarán sólo a la capa activa.
HTML.
P O W E R P O I N T CONCEPTOS BÁSICOS 1.
Microsoft Word Procesador de Textos
Procesador de textos. Componentes de Word. Multiversidad Latinoamericana Campus Celaya Bachillerato Informática I Prof. Brayan Tula Villanueva 1er. Semestre.
INTRODUCCIÓN HTML. QUE ES HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. HTML es un lenguaje de hipertexto.
 Excel es un programa de aplicaciones que modifica tus habilidades para grabar datos y luego extraer resultados de la misma.  Con Excel puede ingresar.
Integración de objetos y de multimedia en páginas HTML5.
Transcripción de la presentación:

POW Tema 4: Mas sobre Hojas de Estilo

2 Posicionamiento y Visualización Los factores que se tienen en cuenta para generar cada caja de las que se muestran en pantalla son: ▪ Las propiedades width y height de la caja (si están establecidas). ▪ El tipo de cada elemento HTML (elemento de bloque o elemento en línea). ▪ Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). ▪ Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.) ▪ Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador. El estándar HTML clasifica a todos sus elementos en dos grandes grupos: Elementos en línea (inline elements): No empiezan necesariamente en una nueva línea y solo ocupan el espacio necesario. Elementos de bloque (block elements): Siempre empiezan en una línea y la ocupan toda. Programación Orienta a la Web Programación Orientada a la Web

3 Programación Orienta a la Web Programación Orientada a la Web

4 Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var. Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul. Los siguientes elementos también se considera que son de bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr. Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script. Programación Orienta a la Web Programación Orientada a la Web

5 Posicionamiento: Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenada. El estándar de CSS define cinco modelos diferentes para posicionar una caja: normal, absoluto, fijo, relativo y flotante. Para posicionar se ocupa la propiedad position que puede tomar los siguientes valores: static: Corresponde al posicionamiento normal o estático. Es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. relative: Posicionamiento relativo y el desplazamiento se controla con las propiedades top, right, bottom y left. absolute: Posicionamiento absoluto y el desplazamiento se controla también con las propiedades top, right, bottom y left. El origen de coordenadas de desplazamiento depende de su elemento contenedor. fixed: El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla. Programación Orienta a la Web Programación Orientada a la Web

6 Posicionamiento relativo El posicionamiento relativo permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original. El problema de posicionar elementos de forma relativa es que se pueden producir solapamientos con otros elementos de la página. Programación Orienta a la Web Programación Orientada a la Web

7 Posicionamiento absoluto Se emplea para establecer de forma precisa la posición en la que se muestra la caja de un elemento. La interpretación de los valores de estas propiedades es mucho más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento contenedor. Cuando una caja se posiciona de forma absoluta el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por esta. En el estándar de CSS, esta característica de las cajas posicionadas de forma absoluta se explica como que la caja sale por completo del flujo normal del documento. De hecho, las cajas posicionadas de forma absoluta parece que están en un nivel diferente al resto de elementos de la página. Programación Orienta a la Web Programación Orientada a la Web

8 Posicionamiento fijo La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. Posicionamiento flotante Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba. Programación Orienta a la Web Programación Orientada a la Web

9 La propiedad clear:both indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante. Programación Orienta a la Web Programación Orientada a la Web

10 Ejemplo de uso de la propiedad clear Programación Orienta a la Web Programación Orientada a la Web Ver ejemplo 05

11 Visualización Diferencia entre la propiedad visibility y display Programación Orienta a la Web Programación Orientada a la Web

12 La propiedad display: Modifica la forma en la que se visualiza un elemento. Los valores más utilizados son inline, block y none. El valor block permite mostrar un elemento como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate. El valor inline permite visualizar un elemento en forma de elemento en línea, independientemente del tipo de elemento que se trate. El valor none permite ocultar un elemento y hacer que desaparezca de la página. El resto de elementos se visualizan como si no existiera el elemento oculto, es decir, pueden ocupar el espacio en el que se debería visualizar el elemento. Como se verá más adelante, la propiedad display:inline se utiliza habitualmente con las listas (, ) que se quieren mostrar horizontalmente y la propiedad display:block se emplea frecuentemente para los enlaces que forman el menú de navegación. Programación Orienta a la Web Programación Orientada a la Web

13 La propiedad visibility: Sólo permite hacer visibles o invisibles a los elementos de la página. Por defecto, todas las cajas que componen la página son visibles. Haciendo uso del valor hidden es posible hacer que una caja sea invisible y que no muestre sus contenidos. El resto de elementos se muestran como si la caja fuera visible, por lo que el lugar donde originalmente se mostraba la caja, ahora se muestra un hueco vacío. Programación Orienta a la Web Programación Orientada a la Web

14 La propiedad overflow: CSS define la propiedad overflow para controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos. Los posibles valores son: ▪ visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para visualizar el elemento. Este es el comportamiento por defecto. ▪ hidden: el contenido sobrante se oculta y sólo se visualiza la parte del contenido que cabe dentro de la zona reservada para el elemento. ▪ scroll: solamente se visualiza el contenido que cabe dentro de la zona reservada para el elemento, pero también se muestran barras de scroll que permiten visualizar el resto del contenido. Ver ejemplo 06 Programación Orienta a la Web Programación Orientada a la Web

15 La propiedad z-index: De esta forma, es posible controlar las cajas que se muestran delante o detrás de otras cajas cuando se producen solapamientos. Cuanto más alto sea el valor numérico, más cerca del usuario se muestra la caja. Un elemento con z-index: 10 se muestra por encima de los elementos con z-index: 8 o z-index: 9, pero por debajo de elementos con z-index: 20 o z-index: 50. Ver ejemplo 07 Programación Orienta a la Web Programación Orientada a la Web

16 Trabajando con enlaces: CSS define cuatro pseudo-clases que permiten aplicar estilos avanzados para los enlaces de los documentos. Las pseudo-clases permiten aplicar diferentes estilos a un mismo enlace en función de su estado: enlace no visitado, enlace visitado, enlace en el que se pasa el puntero del ratón por encima y enlace activo en ese momento. ▪ :link, permite aplicar estilos para los enlaces que aún no han sido visitados. ▪ :visited, aplica estilos a los enlaces que han sido pinchados anteriormente (el navegador elimina automáticamente el historial de enlaces visitados cada cierto tiempo). ▪ :hover, estilos que muestra el enlace cuando el usuario posiciona el puntero del ratón sobre el enlace. ▪ :active, estilos que se aplican al enlace cuando el usuario está pinchando sobre el enlace (el tiempo durante el que se aplica este estilo es muy breve). Ver ejemplo 08 Programación Orienta a la Web Programación Orientada a la Web

17 Estilos para las listas: La propiedad list-style-image, permite establecer una imagen como viñeta de una lista de la forma siguiente:.ok{ list-style-image:url(imagenes/ok.jpg); } Ejemplo 9 Elemento 1 Elemento 2 Programación Orienta a la Web Programación Orientada a la Web

18 Estilos para las tablas: border-collapse: Fusiona los bordes de la tabla con los bordes de cada una de las filas y columnas. Su valores pueden ser: collapse: Fusiona todos los bordes adyacentes. separate: Hace que elemento de la tabla muestre sus propios bordes. empty-cells: Especifica el tratamiento que se le debe dar a una celda vacía. show: Permite mostrar la celda aunque no contenga nada. hide: Oculta la celda que no contiene algún valor. Ver ejemplo 10 Programación Orienta a la Web Programación Orientada a la Web

19 Estilos para formularios: Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. Para ello, CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese momento tiene el foco o atención del usuario. Ver ejemplo 11 Programación Orienta a la Web Programación Orientada a la Web

20 Usando div para crear layout Ver ejemplo 12 Programación Orienta a la Web Programación Orientada a la Web