Tecnologías Web para la presentación CSS
|
|
|
- Jorge Bustos Medina
- hace 8 años
- Vistas:
Transcripción
1 Tecnologías Web para la presentación CSS Aplicaciones Web/Sistemas Web Juan Pavón Mestras Dep. Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense Madrid Material bajo licencia Creative Commons CSS Hojas de estilo en cascada (Cascading Style Sheets) Ficheros de texto con la extensión.css Definen la apariencia de las páginas Web Facilitan la gestión de sitios web grandes y sofisticados Las hojas CSS se crean una vez y se pueden compartir entre varios desarrolladores WEB Por ejemplo, estilo corporativo Para realizar un cambio de estilo en todo el sitio solo hay que hacerlo en un lugar: la hoja CSS correspondiente Versiones CSS nivel 1 (1996, revisado en 2008) CSS nivel 2 (1998), actual: 2.1 (2011) CSS 2.1 Soportado por todos los navegadores habituales CSS nivel 3 (en desarrollo) Varias características ya definidas (selectores, pseudoclases y muchas propiedades) las van soportando todos los navegadores habituales (MS Internet Explorer es el más retrasado, solo desde la versión 10.0) Juan Pavón - UCM CSS 2
2 CSS y XHTML Con HTML tanto el contenido como la presentación están mezclados Con XHTML + CSS XHTML especifica contenidos y estructura <body> <h1>primera sección</h1> <p>un párrafo de texto.</p> </body> CCS especifica presentación y formato <style type="text/css"> h1 { color: red; font family: Verdana; font size: large; p { color: gray; font family: Verdana; font size: medium; </style> Juan Pavón - UCM CSS 3 Proceso de XHTML y CSS en un navegador DOM Contenido XHTML Parser HTML Árbol DOM Disposición Ensamblado Árbol de elementos formateados Dibujado Pantalla Hoja Hoja de estilo Hoja de de estilo CSS estilo CSS CSS Parser CSS Reglas de estilo Adaptado de: Tali Garsiel. How browsers work. Behind the scenes of modern web browsers Juan Pavón - UCM CSS 4
3 DOM Definido por W3C Modelo de Objetos del Documento (Document Object Model) DOM define objetos y propiedades de los elementos HTML y XML, y los métodos para acceder a ellos Representación de documentos HTML y XML API para consultar y manipular los documentos (contenido, estructura, estilo) Los objetos de un documento se organizan en una jerarquía (árbol): jerarquía DOM var elemento=document.getelementbyid("intro"); var cabecera=document.getelemnentbytag("title"); //... Juan Pavón - UCM CSS 5 Integración de CSS en HTML/XHTML La definición de los estilos para un elemento se puede realizar: Dentro del propio elemento (internas al elemento) NO aconsejable <p style="color: black; font family: Verdana;">Bla bla bla</p> Con una hoja de estilo interna (en el mismo documento) Con la etiqueta <style> dentro de la sección <head> <head>... <style type="text/css"> p { color: black; font family: Verdana; </style> </head> Con una hoja de estilo externa La mejor opción (ver página siguiente) Comportamiento por defecto del navegador Todas las definiciones se combinan en cascada para producir una única hoja de estilo Las definiciones mas locales tienen prioridad Navegador << Externo << Interno << Elemento Juan Pavón - UCM CSS 6
4 Integración de CSS en XHTML Ficheros CSS externos El fichero externo es un fichero de texto donde se definen los estilos Ejemplo: Dado el fichero estilos.css: p { color: black; font family: Verdana; Se puede incluir de dos maneras, dentro de la sección <head>: Con la etiqueta <link> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> Con la etiqueta <style> y una regla de <style type="text/css" '/css/estilos.css'; </style> Estas reglas deben ir antes de definir reglas con propiedades En general conviene que los estilos se definan en ficheros.css externos para separar mejor contenido de presentación Se puede considerar hacerlo en el documento XHTML cuando es un proyecto simple o si son pequeñas modificaciones de uno más general Juan Pavón - UCM CSS 7 Integración de CSS en XHTML Inclusión de ficheros de estilo con la etiqueta <link> Atributos: rel="stylesheet": relación entre los archivos CSS y el XHTML type="text/css": el tipo de recurso para CSS siempre es text/css href="url": URL del archivo CSS que contiene los estilos La URL puede ser relativa o absoluta y apuntar a un recurso interno o externo al sitio web media: indica el medio en el que se van a aplicar los estilos del archivo CSS Esto permite definir distintos estilos según el dispositivo. Por ejemplo: all Todos los medios definidos screen Pantallas de ordenador print Impresoras y modo "Vista Previa para Imprimir" handheld Dispositivos de mano: móviles, PDA, etc. tv Televisores y dispositivos con resolución baja Para personas con discapacidad: braille Dispositivos táctiles que emplean el sistema braille embosed Impresoras braille speech Sintetizadores para navegadores de voz Juan Pavón - UCM CSS 8
5 Tipo especial de reglas CSS (incluidas en CSS3) para indicar el medio o medios en los que se aplicarán los estilos incluidos en la regla Para no mezclar las reglas se suelen poner al final del fichero CSS El medio en el que se aplican los estilos, se indica Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas print { body { font size: screen { body { font size: screen, print { body { line height: 1.2 </style> <link rel="stylesheet" type="text/css" href="basico.css" media="screen, print" url("estilos_seccion.css") print { /* Estilos para impresora */ Juan Pavón - UCM CSS 9 Ejercicio Probar a definir dos estilos para screen y print, y observar si es distinto el tratamiento en el navegador Definir distinto tipo de tamaño de letra (44px para screen y 10px para print) con las reglas que aparecen en el primer ejemplo de la página anterior Abrir la página en el navegador y observar el tamaño del texto de la página Utilizar la opción Print preview para observar cómo se vería si se fuera a imprimir la página Juan Pavón - UCM CSS 10
6 Sintaxis de las hojas de estilo Una hoja de estilo define un conjunto de reglas Cada regla de estilo consta de Selector: elemento al que se aplica el estilo Pueden ser varios, separados por, Lista de declaraciones Cada declaración es un par propiedad:valor Separadas por ; Ejemplos: h1 { color: red; font family: Verdana; font size: large; p { color: blue; font family: Verdana; text align:center; selector propiedad valor Comentarios Entre /* y */ /* Esto es un comentario muy original */ Juan Pavón - UCM CSS 11 Selectores Selector universal Todos los elementos de la página: * * { margin: 0; padding: 0; Etiqueta Indica el estilo aplicable a una etiqueta (se especifica sin < >) p {text align: center; color: red Se pueden agrupar varias etiquetas para aplicarles el mismo estilo Separadas por coma, Se pueden definir también otras reglas más particulares h1, h2, h3, h4, h5, h6 {font family: Verdana; h1 { font size: 2em; h2 { font size: 1.5em; Juan Pavón - UCM CSS 12
7 Selectores Clase A una etiqueta se le puede asociar una clase (o varias) <h2 class="cabecera2"> <h2 class="clase1 clase2"> Esto permite aplicar estilos de la(s) clase(s) a la etiqueta El nombre de la etiqueta se separa del nombre de la clase con. (importante: sin espacios entre los nombres y el punto) h2.cabecera2 { text align: center; Se puede definir una clase sin especificar tipo de etiqueta Esto equivale a *.clase.cabeceracentrada { text align: center; <h1 class="cabeceracentrada">título centrado</h2>... <h2 class="cabeceracentrada">subtítulo centrado</h2> Juan Pavón - UCM CSS 13 Selectores Selectores descendentes Separados por espacio: permite seleccionar los elementos especificados por un selector dentro del ámbito de otro p.destacado {... Se aplica a todos los elementos con atributo class="destacado" que estén dentro de un párrafo <p> ATENCIÓN: Los espacios y la puntuación son importantes: p.destacado {... Todos los párrafos <p> que estén declarados con atributo class="destacado" p,.destacado {... Todos los párrafos <p> y todos los elementos con atributo class="destacado" Juan Pavón - UCM CSS 14
8 Selectores Ejemplos de selectores descendentes: div.principal span.especial {... Todos los elementos span con atributo class="especial" que estén dentro de un elemento div con atributo class="principal" p span em {... Todos los elementos <em> dentro de un <span> dentro de un <p> p * a {... Todos los elementos <a> dentro de algún elemento dentro de un <p> Se aplica a <p><span><a href="#">enlace</a></span></p> No se aplica a <p><a href="#">enlace</a></p> p a {... Se aplicaría a los dos casos anteriores Juan Pavón - UCM CSS 15 Selectores ID Permite aplicar un estilo a un único elemento de una página El elemento se identifica con un atributo id, que es único <p id="destacado">segundo párrafo</p> El estilo para el ID se especifica precedido con el carácter # #destacado { color: red; Como recomendación Usar selector de clase, que se aplica a varios elementos, para dar una apariencia homogénea al documento Usar selector de ID con mesura Rizando el rizo p#destacado {... Se aplica a todos los párrafos <p> que tengan id="destacado" Puede parecer absurdo porque solo habrá un elemento (párrafo u otro tipo) en la página con ese id, independientemente del tipo Podría ser útil si se aplicara el estilo a varias páginas p #destacado {... Se aplica a un elemento con id="destacado" que esté dentro de un párrafo <p> p, #destacado {... Se aplica a todos los párrafos <p> y al elemento de cualquier tipo que tenga id="destacado" Juan Pavón - UCM CSS 16
9 Selectores Pseudo clases Clases "virtuales" que no se insertan de manera explícita en las páginas (están predefinidas) Se pueden definir sus propiedades como si fueran clases (utilizando : en vez de.) a:link { color: blue CSS3 añade nuevas pseudo clases (por ejemplo :first-child) Pseudo clases de enlaces a:link Enlace no visitado o activado por el usuario a:hover Cuando se coloca el ratón sobre el enlace a:active Cuando se pincha sobre el enlace a:visited Enlace ya visitado por el usuario a { background color: white; color: blue; border: white 3px solid; outline: white 3px solid; a:visited { background color: yellow; color: red; a:hover { background color: black; color: white; Juan Pavón - UCM CSS 17 Selectores Pseudo clases dinámicas :hover Cuando se coloca el ratón sobre el elemento :active Cuando se pincha sobre el elemento y se mantiene el botón del ratón pulsado :focus Cuando el elemento tiene foco Pueden tener foco los elementos que reaccionan a entrada por teclado (los elementos de los formularios o los enlaces) Ejemplo: al seleccionar un campo de un formulario, se resalta con un borde rojo: input:focus { border: red 2px dotted; padding: 2px; Otras pseudo clases :first-child Primer elemento de un tipo contenido dentro de otro div p:first child { color: red; :lang() Aspecto de los elementos de un idioma determinado. q:lang(es) { quotes: "«" "»"; q:lang(en) { quotes: '"' '"'; <p>el profesor dijo que <q lang="es">muy bien</q>.</p> <p>the teacher said <q lang="en">very well</q>.</p> Juan Pavón - UCM CSS 18
10 Selectores Pseudo elementos Similar a las pseudo clases Pseudo elementos típicos: :first-letter Primera letra en un elemento de bloque h1:first letter { font size: 400%; :first-line Primera línea en un elemento de bloque p:first line { text transform: uppercase; :before y :after Para añadir contenido antes o después de un elemento p.cuidado:before { content: "Aviso: "; font weight: bold; text decoration: underline; <p class="cuidado">esto es un mensaje de atención.</p> Aviso: Esto es un mensaje de atención. Juan Pavón - UCM CSS 19 Selectores Selector de hijos Para seleccionar un elemento que es hijo directo de otro elemento Se indica mediante el signo > p > span { color: blue; Se aplica el selector <p><span>texto1</span></p> No se aplica <p><a href="#"><span>texto2</span></a></p> El selector descendente ( p span { ) se aplicaría en los dos casos Selector adyacente Para seleccionar elementos que se encuentran seguidos Se indica mediante el signo + p + p { text indent: 1.5em; Selecciona todos los párrafos de una página que estén precedidos por otro, esto es, todos menos el primero h1 + p { text indent: 1.5em; Selecciona todos los párrafos que estén precedidos por un h1 Juan Pavón - UCM CSS 20
11 Selectores Selector de atributos Para seleccionar elementos en función de sus atributos Cuatro tipos: [nombre_atributo] elementos que tienen definido el atributo llamado nombre_atributo, independientemente de su valor [title] { color: red; todos los elementos con el atributo title [nombre_atributo=valor] elementos que tienen un atributo llamado nombre_atributo con el valor especificado [title="web"] { color: red; todos los elementos con title="web" [nombre_atributo~=valor] elementos que tienen un atributo llamado nombre_atributo y al menos uno de los valores del atributo es el valor especificado [title~="web"] { color: red; todos los elementos que tengan "web" dentro del valor de title [nombre_atributo =valor] elementos que tienen un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor *[lang=en] {... todos los elementos en inglés *[lang ="es"] {... todos los elementos en español: "es", "es-es", "es-ar", Juan Pavón - UCM CSS 21 Herencia Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad Hay propiedades que no se heredan: size, float, margin Un ejemplo, si se establece la regla body { color: red; Todo lo que está dentro de body tendrá el color red mientras no se declare otra regla más específica, que será la que prevalezca p { color: blue; Por ejemplo, para el código HTML <h1>sección 1</h1> <p>un texto con una parte<em>enfatizada</em></p> "Sección 1" aparecerá en rojo, el párrafo en azul, y el texto "enfatizada" en azul a menos que haya alguna declaración de estilo específica para que aparezca en verde: em { color: green; Juan Pavón - UCM CSS 22
![especificado [title="web"] { color: red; todos los elementos con title="web" [nombre_atributo~=valor] elementos que tienen un atributo llamado nombre_atributo y al menos uno de los valores del](/docs-images/43/9311395/images/page_11.jpg "atributo es el valor especificado [title~=\"web\"] { color: red; todos los elementos que tengan \"web\" dentro del valor de title [nombre_atributo =valor] elementos que tienen un atributo llamado")
12 Cascada de estilos Qué ocurre cuando hay dos declaraciones contradictorias? p { color: red; p { color: blue; En general, la regla básica es: Cuanto más específico sea un selector, más importancia tiene su regla asociada A igual especificidad, se considera la última regla indicada De ficheros externos a estilos dentro del propio elemento En una lista de reglas en el mismo ámbito, se elige la última Juan Pavón - UCM CSS 23 Cascada de estilos El proceso para resolver la regla que se aplica es el siguiente: 1. Buscar todas las declaraciones aplicables a un elemento Solo se tienen en cuenta las que correspondan al medio CSS seleccionado (screen, print, etc.) 2. Si no existen reglas, se usa el valor heredado Si no hubiera valor heredado, el navegador usa el valor por defecto 3. Si existen reglas, se aplica la de mayor peso de acuerdo a los siguientes criterios: Se asigna un peso según su origen De mayor a menor: autor, usuario, navegador Si un atributo tiene la palabra clave!important se le da mayor prioridad selector { atributo:valor! important ; atributo: valor ; Se da mayor prioridad a los selectores más específicos etiqueta << clase << ID Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar Juan Pavón - UCM CSS 24
13 Ejercicios A qué elementos se aplican las siguientes reglas? a:link img { border: solid blue a.external:visited { color: blue h2 + p:first letter { font size: 200%; p.inicial:first letter { color: red h1 { color: blue em { color: red h1 { color: blue h1 em { color: red Realizar el ejercicio de Juan Pavón - UCM CSS 25 Caracterización de los estilos Unidades de medida y colores Posicionamiento y visualización Modelo de cajas Modelo de posicionamiento Propiedades de visualización Estilos de los elementos Texto Enlaces con las pseudoclases a:link, a:hover, a:active, a:visited Imágenes Listas Tablas Formularios Juan Pavón - UCM CSS 26
14 Unidades de medida Para definir la altura, anchura, márgenes, tamaño de letra, Los valores se expresan como números enteros o con decimales Unidades absolutas cm, centímetros mm, milímetros in, pulgadas (inches). 1in==2.54cm pt, puntos. 1pt==0.35mm la más utilizada pc, picas. 1pc==12 pt Unidades relativas em, relativa respecto al tamaño de letra del elemento Si el font-size es de 12pt, 1em==12pt ex, relativa respecto a la altura de la letra x minúscula px, (píxel) relativa respecto a la resolución de la pantalla del dispositivo (respecto al tamaño del canvas) Porcentajes Valor numérico seguido del símbolo % p { font size: 150% /* 150% del valor del padre */ padding: 50% /* 50% del width del padre */ Juan Pavón - UCM CSS 27 Colores Los colores se pueden especificar de varias maneras: Palabras clave: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. RGB hexadecimal: #ff0000 la manera más habitual RGB decimal: rgb(255,0,0) RGB porcentual: rgb(100%, 0%, 0%) Imagen del estándar: Juan Pavón - UCM CSS 28
15 El modelo de cajas Para cada etiqueta HTML se crea una caja rectangular que encierra los contenidos de ese elemento El tamaño de cada área (margin, border, padding) se define con propiedades relativas a las cuatro direcciones: top, bottom, left, right margin: 10px /* Propiedad resumida */ margin top: 20px; margin right: 20px; margin (márgen) border (borde) padding (relleno) Contenido color background incoloro, transparente Juan Pavón - UCM CSS 29 El modelo de cajas El tamaño del contenido se define con: width height <medida> <porcentaje> auto: lo ajusta el navegador inherit: valor del elemento padre Propiedades del borde Estilo del borde: border-style none hidden dotted dashed solid double groove ridge inset outset inherit Anchura: border-width Color: border-color Lados individuales: border-top-style, border-right-style, border-bottom-style, border-left-style Resumen: border ( <medida_borde> <color_borde> <estilo_borde> ) inherit CSS3 añade bordes redondeados y sombras Juan Pavón - UCM CSS 30
16 Ejercicio Cuál será la anchura del siguiente bloque? div { width: 400px; padding left: 60px; padding right: 60px; margin left: 40px; margin right: 40px; border: 10px solid black; Juan Pavón - UCM CSS 31 El modelo de cajas Fondo Un color: background-color <color> transparent inherit Una imagen: background-image <url> none inherit La imagen se puede repetir, esto se controla con background-repeat repeat repeat-x repeat-y no-repeat inherit Qué ocurre con la imagen de fondo cuando se hace scrolling en la página: background-attachment scroll fixed inherit Todas las propiedades: background ( <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position> ) inherit Juan Pavón - UCM CSS 32
17 El modelo de posicionamiento Tipos de elementos De bloque Siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, p, pre, table, ul En línea Sólo ocupan el espacio necesario para mostrar sus contenidos Se pueden insertar en elementos de bloque y de línea 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 Para cada elemento se genera una caja La caja de un elemento contiene las cajas de los elementos que contiene El elemento raíz del documento (<body>) genera una caja que sirve como bloque contenedor inicial para el resto de elementos Juan Pavón - UCM CSS 33 Tipos de posicionamiento Una caja se puede colocar según uno de los siguientes modos: position: static Normal o estático: es el modo de posicionamiento habitual position: relative Como el posicionamiento normal pero la caja se desplaza según los atributos left, right, top, bottom position: absolute La caja se coloca de manera absoluta con respecto a la primera caja contenedora no estática según los valores left, right, top, bottom Si no estuviera contenido en ninguna caja no estática tomaría <body> El atributo z-index permite controlar como se apilan las cajas Las cajas que queden debajo se ocultarán position: fixed Tipo de posicionamiento absoluto, pero la caja mantiene su posición y no se mueve cuando se usan las barras de desplazamiento float Posicionamiento flotante: Desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran. Juan Pavón - UCM CSS 34
18 Posicionamiento normal (estático) Las cajas se colocan seguidas verticalmente de arriba abajo, en el orden en el que aparecen los elementos correspondientes en el documento Sólo se tiene en cuenta si el elemento es de bloque o en línea, sus propiedades width y height y su contenido bloques Elemento de bloque Elemento de bloque Elemento en línea Elemento en línea Elemento de bloque Elemento de bloque líneas Juan Pavón - UCM CSS 35 Posicionamiento relativo La caja se desplaza respecto de su posición normal según se indica en las propiedades top, right, bottom y left Por defecto top, right, botton y left tienen el valor auto El valor positivo de alguno de estos valores implica un desplazamiento top hacia abajo desde el borde superior, bottom hacia arriba left hacia la derecha desde el borde izquierdo, right hacia la izquierda Las cajas desplazadas de forma relativa no modifican su tamaño Las propiedades left y right siempre cumplen que left = -right Si left es auto, su valor será right Si left y right tienen valores no compatibles se toma el que determine la propiedad direction (ltr o rtl) El resto de las cajas no se ven afectadas Figura de: Juan Pavón - UCM CSS 36
19 Posicionamiento absoluto La posición de la caja se determina con las propiedades top, right, bottom y left respecto al primer elemento contenedor no estático Si no hubiera un contenedor posicionado, entonces se usa la ventana del navegador como referencia Para que el contenedor se considere posicionado basta con declararle position: relative El resto de las cajas sí pueden verse afectadas Pasan a ocupar la posición que ha dejado la anterior Se pueden producir solapamientos Figura de: Juan Pavón - UCM CSS 37 Posicionamiento fijo Igual que el anterior pero las cajas correspondientes no se mueven en la pantalla del navegador aun cuando se usen las barras de desplazamiento Puede servir por ejemplo en el medio print para imprimir páginas con encabezado y pie de página Juan Pavón - UCM CSS 38
20 Posicionamiento flotante Una caja flotante se declara con float:right o float:left Una caja flotante se desplaza horizontalmente Hasta la zona más a la izquierda o más a la derecha posible Si hay otras cajas flotantes, se van colocando seguidas Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha posible en esa nueva línea La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar que ha dejado Para que un elemento no se vea afectado por lo que hagan las cajas flotantes a su alrededor puede definir la propiedad clear que fuerza a que el elemento se muestre debajo de cualquier caja flotante Atributos de clear: none left right both inherit Si clear: left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo Si clear: both, el elemento se colocará debajo de cualquier caja flotante Juan Pavón - UCM CSS 39 Posicionamiento flotante La caja 1 tapa los contenidos de la caja 2 Figuras de: Juan Pavón - UCM CSS 40
21 Posicionamiento flotante Uno de los principales motivos para la creación del posicionamiento float fue colocar imágenes alrededor de las cuales fluye el texto Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado Con clear se consigue que un contenido no fluya alrededor de un contenido float sino que se muestre debajo Figuras de: Juan Pavón - UCM CSS 41 Ejercicios de posicionamiento Crear los estilos para la siguiente configuración de página <body> <div id="cabecera">...</div> <div id="menu">...</div> <div id="cuerpo">...</div> <div id="pie">...</div> </body> cabecera 100px menu cuerpo 10em pie 12% Juan Pavón - UCM CSS 42
22 Propiedades de visualización display Cambia el tratamiento de un elemento Atributos block: hace que se trate el elemento como un bloque inline: hace que se trate el elemento como en línea none: el elemento desaparece de la página Y los demás elementos pueden ocupar su lugar Se ignoran las propiedades float y position ya que la caja no se muestra visibility Permite ocultar completamente un elemento que sigue ocupando su sitio Atributos: visible hidden collapse inherit collapse es similar a hidden pero para filas y columnas de tablas Juan Pavón - UCM CSS 43 Propiedades de visualización overflow Controla la forma en la que se visualizan los contenidos que sobresalen de sus elementos: visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para visualizar el elemento Comportamiento por defecto hidden: el contenido sobrante se oculta y sólo se visualiza la parte 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 auto: el comportamiento depende del navegador Normalmente es el mismo que la propiedad scroll z-index Indica las cajas que se muestran delante o detrás de otras cuando se producen solapamientos Se especifica con un número: el mayor más arriba Juan Pavón - UCM CSS 44
23 Estructura de la página Las etiquetas <div> y <span> en principio no tienen ningún significado para la presentación Solo agrupan elementos <div> a nivel de bloque <span> a nivel de línea Combinados con selectores de clase permiten estructurar la aplicación de estilos en una página Para estructurar una página Definir bloques con <div> y su composición A cada bloque asignarle una clase o un id Cada bloque <div> puede constar de otros bloques <div> A nivel de línea se pueden definir cajas con <span> Asociar propiedades de posicionamiento y visualización a cada una de las cajas definidas con clase o id Juan Pavón - UCM CSS 45 Estructura de la página Diseño a 2 columnas con cabecera y pie de página De: Uso de float y clear #contenedor { width: 700px; #cabecera { #menu { float: left; width: 150px; #contenido { float: left; width: 550px; #pie { clear: both; <body> <div id="contenedor"> <div id="cabecera"> </div> <div id="menu"> </div> <div id="contenido"> </div> <div id="pie"> </div> </div> </body> Juan Pavón - UCM CSS 46
24 Estructura de la página Diseño a 2 columnas con cabecera y pie de página Con anchura variable #contenedor { #cabecera { #menu { float: left; width: 15%; #contenido { float: left; width: 85%; #pie { clear: both; <body> <div id="contenedor"> <div id="cabecera"> </div> <div id="menu"> </div> <div id="contenido"> </div> <div id="pie"> </div> </div> </body> Juan Pavón - UCM CSS 47 Trucos de posicionamiento Centrar una página horizontalmente con ancho determinado Agrupar todos los contenidos de la página en un elemento <div> Asignarle a ese <div> unos márgenes laterales automáticos con la propiedad margin de CSS #contenedor { width: 400px; margin: 0 auto; <body> <div id="contenedor"> <h1>sección 1</h1> <p> bla bla bla </p>... </div> </body> Idea de Juan Pavón - UCM CSS 48
25 Adaptación de la página al tamaño de pantalla Propiedades para limitar la anchura y altura mínima y máxima de cualquier elemento de la página min-width: anchura mínima de un elemento Por defecto: 0 max-width: anchura máxima de un elemento Por defecto: none min-height: altura mínima de un elemento max-height: altura máxima de un elemento Se pueden dar como un valor numérico o un porcentaje #contenedor { min width: 300px; max width: 800px; Juan Pavón - UCM CSS 49 Adaptación de una página para impresión Para imprimir una página lo normal es eliminar menús y otros elementos, dejando el contenido básico con un formato más apropiado para la impresión Recomendaciones adaptadas de: Pasos para definir un formato de impresión: 1. Identificar el estilo de impresión (por ejemplo, en otro fichero.css): <link rel="stylesheet" type="text/css" href="/css/imprimir.css" media="print" /> 2. Ocultar los elementos que no se van a imprimir #cabecera, #menu, #lateral, #comentarios { display: none!important; Juan Pavón - UCM CSS 50
26 Adaptación de una página para impresión 3. Cambiar la estructura de la página Si se han eliminado las columnas laterales, es conveniente reajustar la anchura y el posicionamiento de las zonas a imprimir body, #contenido, #principal, #pie { float: none!important; width: auto!important; margin: 0!important; padding: 0!important; 4. Modificar colores, tipos de letra y otros elementos Por ejemplo, poner el texto en negro y poner un tipo de letra habitual para las impresoras body { color: #000; font: 100%/150% Georgia, "Times New Roman", Times, serif; ; Si se quiere que aparezcan impresas las URL de los enlaces, se puede hacer con la propiedad content y el pseudo-elemento :after a:after { content: " (" attr(href) ") "; Juan Pavón - UCM CSS 51 Ejercicios de posicionamiento Realizar la página centrada de manera que ocupe el 80% respecto al ancho de la pantalla Centrar una página en horizontal y vertical Solución: Crea la barra siguiente al final de una página <<Atrás Siguiente>> Diseñar una página con tres columnas: Juan Pavón - UCM CSS 52
27 Texto Propiedades tipográficas color <color> inherit font-family (( <nombre_familia> <familia_generica> ) (,<nombre_familia> <familia_generica>)* ) inherit Familias genéricas: serif (Times New Roman), sans-serif (Arial), cursive (Comic Sans), fantasy (Impact) y monospace (Courier New) font-size <tamaño_absoluto> <tamaño_relativo> <medida> <porcentaje> inherit font-weight normal bold bolder lighter inherit font-style normal italic oblique inherit font-variant normal small-caps inherit font ( ( <font-style> <font-variant> <font-weight> )? <font-size> ( / <lineheight> )? <font-family> ) caption icon menu message-box smallcaption status-bar inherit Juan Pavón - UCM CSS 53 Texto Apariencia del texto text-align left right center justify inherit line-height normal <numero> <medida> <porcentaje> inherit text-decoration none ( underline overline line-through blink ) inherit text-transform capitalize uppercase lowercase none inherit vertical-align baseline sub super top text-top middle bottom text-bottom <porcentaje> <medida> inherit text-indent <medida> <porcentaje> inherit letter-spacing y word-spacing normal <medida> inherit white-space tratamiento de los espacios en blanco normal pre nowrap pre-wrap pre-line inherit Juan Pavón - UCM CSS 54
28 Imágenes Propiedades: Anchura y altura: width y height Borde img { width: 120px; height: 250px; border: none; En general no es habitual dar las mismas dimensiones a todas las imágenes y se suele definir su tamaño directamente en el código HTML <img src="imagen.png" width="120" height="250" /> Juan Pavón - UCM CSS 55 Listas Propiedades: list-style-type disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin armenian georgian lower-alpha upper-alpha none inherit list-style-position inside outside inherit list-style-image <url> none inherit list-style ( <list-style-type> <list-style-position> <list-style-image> ) inherit Se pueden crear menús verticales, horizontales y tabulados a partir de listas Ver pasos en Juan Pavón - UCM CSS 56
29 Formularios Mejoras en los campos de texto Adición de un relleno en los elementos <input> para que no aparezcan pegados form.elegante input { padding:.2em; Etiquetas alineadas y formatedas Ver Formularios con varias columnas Ver Juan Pavón - UCM CSS 57 Ejercicio final Crea tu página personal separando claramente contenidos de presentación en varios ficheros.html y.css Define claramente la estructura de los contenidos de la página Crea una versión de estilos general, una particularizada para impresión, y otra para visualizar en dispositivos móviles Estructura bien los url("basico.css") url("seccion.css") url("impresora.css") url("movil.css") handheld; Valida las hojas de estilo en Consulta sitios web con buen diseño: Juan Pavón - UCM CSS 58
30 Bibliografía Muchos ejemplos y ejercicios Permite probar ejercicios y modificarlos en el navegador directamente Estándar: Validador de hojas de estilo: Juan Pavón - UCM CSS 59
Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y
Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio
Tema: Estilos CSS. Combinadores. Posicionamiento.
Diseño Digital V. Guía 5 1 Tema: Estilos CSS. Combinadores. Posicionamiento. Objetivos Contenidos Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V A través del desarrollo
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
Hojas de estilo en cascada (CSS) Tecnologías Web
Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que
1. Temario Curso Web Design 2014
1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
Wenceslao Zavala. www.producciondigitalup.com.ar
Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:
MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico
MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas
Diseño de páginas web
Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan
CSS. Cascading Style Sheets (Hojas de estilo en cascada)
1 CSS Cascading Style Sheets (Hojas de estilo en cascada) INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia
CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3
ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
Resumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
CSS1 manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre CSS1 disponible en: http://www.w3.org/tr/1999/rec-css1-19990111 Manual de referencia de CSS1-
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
Creación del sitio web del Laboratorio F1
Creación del sitio web del Laboratorio F1 Jonatan Grandmontagne García Universidad de León, España jon@usuarios.retecal.es Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers
Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3
... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4
CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que
Capítulo 3 Estilo para un documento HTML: CSS
Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '" Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores:
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.
3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: ELABORACIÓN DE HOJAS DE ESTILO Código: CSTI008 total: Horas Objetivo General: Construir Hojas de Estilos para
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es
HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la división
Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara
5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1 ÍNDICE 5.1 El Origen de CSS 5.2 Hojas de estilo y sus clases 5.3 Las reglas de estilo 5.4 Presentación con estilos 2 5.1 EL ORIGEN DE CSS
Informes. 3. Elija la opción Nuevo (en la parte superior de la ventana) 4. Elija Autoinformes: en tablas y luego la tabla o consulta que se usará.
Informes Se pueden imprimir fácilmente los registros en una tabla o el resultado de un filtro simplemente usando el botón de Impresora de la barra de herramientas, o la opción Archivo / Imprimir. Sin embargo,
Vamos a necesitar cuatro ficheros
En esta guía se describen las instrucciones para usar el programa "programa.js" que nos permite: Incluir una frase de saludo que se adapta automáticamente a la hora del día y que incluye la fecha y hora
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 3 Box
Gestor de contenidos de la plataforma web
Gestor de contenidos de la plataforma web 2011 1 de 24 Funcionamiento del gestor de contenidos Acceso Para acceder al la extranet es necesario ir a la dirección web: http://www.tudominio.com/adm e introducir
Introducción al desarrollo web (idesweb)
Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
Formularios. Formularios Diapositiva 1
Formularios Crear un formulario utilizando el Asistente para formularios Modificación en vista Diseño Adición de Controles a un Formulario Adición de un Subformulario a un formulario Formularios Diapositiva
PROGRAMA DE DISEÑO WEB
Objetivo PROGRAMA DE DISEÑO WEB El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder Diseñar y Maquetar una Página Web optimizando al máximo la escritura de
Páginas multimedia Pizarra www.webardora.net
Página donde el usuario tiene un espacio (pizarra) para crear sus propias composiciones con gráficos y textos previamente insertados por el autor; además de poder escribir sus propios textos: PESTAÑA IMÁGENES
Yusef Hassan Montero Francisco Jesús Martín Fernández. Introducción a DOM. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Introducción a DOM Todos los derechos reservados www.nosolousabilidad.com INTRODUCCIÓN DOM, Document Object Model o Modelo de Objetos de Documento,
Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín
Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta
A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato de sección.
DEPARTAMENTO DE LENGUAJES Y SISTEMAS INFORMÁTICOS ESCUELA SUPERIOR DE TECNOLOGÍA Y CIENCIAS EXPERIMENTALES A.D.E.M. Segundo Curso A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato
Diseño de formularios
Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Diseño de formularios Introducción a las bases de datos Tema 5 El aspecto de los formularios Se puede modificar a voluntad el aspecto
Creación y uso de Hojas de Estilo
Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Diseño y Programación de Páginas Web
Diseño y Programación de Páginas Web 1.2. Hojas de Estilo CSS Juan Ruiz de Miras (demiras@ujaen.es) Departamento de Informática Universidad de Jaén Contenidos 1. Introducción 2. Sintaxis de las hojas de
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1
MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal
CSS AVANZADO Hojas de Estilo. Iván Martínez Toro
CSS AVANZADO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Pseudoclases. Fuentes. Modelo de caja: posición. Floaty Clear. Display. Fondos. Listas con estilo. Enlace importante. PSEUDOCLASES Modifican
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
TECHNOLOGY EXPERTISE, ACCESS & LEARNING FOR ALL TEXANS
MICROSOFT WORD Introducción a Microsoft Word es un curso de dos horas diseñado para familiarizar a los estudiantes con la terminología, componentes de la pantalla y funciones de Microsoft Word. Se enfatizarán
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
MS ACCESS BÁSICO 6 LOS INFORMES
2010 MS ACCESS BÁSICO 6 LOS INFORMES 93 LOS INFORMES Los informes son una herramienta de Access para elaborar información, sobre los datos que deseemos, preparada para ser impresa. A partir de una base
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos
TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE)
1. Introducción. TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE) El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella se puede organizar y controlar los contenidos (archivos
HOJAS DE ESTILO EN CASCADA
HOJAS DE ESTILO EN CASCADA Introducción Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo. Forma de definir los estilos Como atributo de una etiqueta afecta a esa etiqueta Sintaxis:
Tipos de imágenes Imágenes vectoriales Imágenes de mapa de bits
Tipos de imágenes Los programas de diseño gráfico trabajan en general con dos tipos de imágenes: imágenes vectoriales e imágenes de mapa de bits. Comprender sus características y diferencias es indispensable
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar
Bienvenido! Nos alegramos de verle.
Bienvenido! Nos alegramos de verle. BookWright, la nueva herramienta de creación de libros de Blurb, se diseñó para ser lo más intuitiva posible, pero sabemos que no hay dos mentes iguales. Y a todos nos
Ajustes del Curso en egela (Moodle 2.5)
Ajustes del Curso en egela (Moodle 2.5) Manual para el profesorado Versión 2 (12/05/2015) El presente manual ha sido desarrollado por el Campus Virtual de la Universidad del País Vasco / Euskal Herriko
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
CSS, hojas de estilos
CSS, hojas de estilos 1. Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
ELECTIVA FE I. Tema 3: Introducción a las hojas
Tema 3: Introducción a las hojas de estilo en cascada CSS Qué son las hojas de estilo en cascada o CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
Joomla! 2.5 Cree y administre sus sitios Web
Capítulo 1: Instalación de Joomla! 1. Introducción 11 2. Qué es un CMS? 11 3. HTML y XHTML 11 4. Diferenciar el contenido de la presentación 12 5. PHP y Apache 12 6. MySQL 13 7. Sitio estático o sitio
WINDOWS. Iniciando Windows. El mouse
Windows es un sistema operativo, cuyo nombre lo debe al principal elemento de trabajo, la ventana - en inglés window -. Este tiene características como: Multitarea: durante una sesión de trabajo, es posible
Imprimir códigos de barras
Imprimir códigos de barras Al igual que en Abies 1, podemos definir el papel de etiquetas que vamos a utilizar. Se nos dan tres tipos de etiquetas ya creadas, que podemos modificar o eliminar, para lo
1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana
EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente
Consejos para el correcto armado de HTML para Emails
Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Cuando desarrollas una campaña de Email Marketing, es fundamental que tu mensaje sea recibido correctamente.
Movistar Tu Web Manual de Usuario
Movistar Tu Web Manual de Usuario Contenido 1. Introducción... 1 2. Visión general de la aplicación online Tu Web... 2 3. Páginas... 3 Añadir una nueva página o una carpeta... 4 Editar páginas... 4 4.
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 4: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en
Introducción. Qué es CSS? Historia de las CSS
Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.
TEMA 1. MANEJO DE PROCESADOR DE TEXTOS: Microsoft WORD 2003
TEMA 1. MANEJO DE PROCESADOR DE TEXTOS: Microsoft WORD 2003 TEMA 1. MANEJO DE PROCESADOR DE TEXTOS: MICROSOFT WORD 2003...1 1. ESTILOS Y FORMATOS...1 1.1. Estilos...1 1.2. Niveles...2 1.3. Secciones...2
Páginas multimedia Dashboard www.webardora.net
En este tipo de página web podremos crear una tabla con una serie de celdas independientes (las celdas pueden combinarse) susceptibles de incluir diversos tipos de contenido inicial y asociar diversas
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:
Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor
COREL DRAW PARTE II. TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS
CREAR TABLAS COREL DRAW PARTE II TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS Para crear una tabla, debes seleccionar la herramienta Tabla desde la barra de herramientas, completa los valores en el
HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe
HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
2_trabajar con calc I
Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,
CREACION DE PÁGINAS WEB
CREACION DE PÁGINAS WEB CREAR LO QUE LLAMAREMOS SITIO WEB LOCAL En el escritorio del ordenador crear una carpeta llamada sitio web que sea donde guardes todos los archivos Dentro de ella guardaremos todos
Crear una página Html con el Editor.
Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante
Tema: Maquetación Web y CSS
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
01 Índice. GESTOR DE CONTENIDOS Manual de uso 01 ÍNDICE... 1 02 OBJETO DEL DOCUMENTO... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA... 3
01 Índice 01 ÍNDICE..... 1 02 OBJETO DEL DOCUMENTO..... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA..... 3 04 GESTIÓN DE TABLAS..... 5 05 USO DE TABLAS EN ENVIDUR..... 15 06 GESTIÓN DE FUNCIONALIDAD ADICIONAL.
Trabajar con diapositivas
Trabajar con diapositivas INFORMÁTICA 4º ESO POWERPOINT Una vez creada una presentación podemos modificarla insertando, eliminando, copiando diapositivas, Insertar una nueva diapositiva.- Para insertar
Procesador de textos MS Word 97 (1 de 2) (aplicable a MS Word para Office XP)
Introducción a la Informática - TEMA 5: Procesador de Texto 1 Procesador de textos MS Word 97 (1 de 2) (aplicable a MS Word para Office XP) Departament d Informàtica de Sistemes i Computadors 1 Contenido
Prácticas de Word XP 1
Prácticas de Word XP 1 1. Haciendo clic en el botón derecho del ratón, crea una carpeta en Documentos con vuestros nombres. En ella guardaréis todas las prácticas que se van a realizar. 2. Abre Microsoft
MANUAL DE PUBLICACIÓN EN PORTAL UNED
MANUAL DE PUBLICACIÓN EN PORTAL UNED Manual de Publicación en PORTAL-UNED Equipo WEB. Infoportal@csi.uned.es consultasnuevoweb@csi.uned.es ÍNDICE 1. INSERTAR TEXTO EN LA PÁGINA... 2 2. INSERTAR UN ARCHIVO
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje
ELABORACIÓN DE TABLEROS DINÁMICOS DE COMUNICACIÓN CON EL PROGRAMA EDITOR TICO
ELABORACIÓN DE TABLEROS DINÁMICOS DE COMUNICACIÓN CON EL PROGRAMA (Tico 2.0) EDITOR TICO La idea principal que motivo este proyecto fue trasladar la definición tradicional de tablero de comunicación en