CSS      Instrucciones que debe seguir un navegador para      presentar la información                      taller_mediavi...
Separar al máximo la forma                (presentación) y el fondo (datos)     multimedia 1 - internet y sitios webvierne...
contenido     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
maquetación     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
SINTAXIS      COMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR     multimedia 1 - internet y sitios webviernes 26 de agosto...
css ordena la visualización del contenido     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
css ordena la visualización del contenido     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
velocidad de carga      El código web de calidad se optimiza para que los      elementos propios del diseño (fondos, estil...
tipos de selectores      etiquetas: nativas de HTML      identidad: posicionamiento, un elemento      clase: múltiples ele...
Selector: Etiqueta                    ¿Dónde?       body       {       	 background-color:#FFFFFF;       }     multimedia ...
documento                                            body                                            {                    ...
Selector: Identificador individual                    ¿Dónde?       #encabezado       {       	 background-color:#666666;  ...
documento                                            body                                            {                    ...
Selector: Identificador común                    ¿Dónde?       .datos       {       	 background-color:#00FFCC;       }    ...
documento                                            body                                            {                    ...
reglas básicas      para trabajar con CSS     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
JERARQUÍA    autor - usuario - navegador        <h1>Hola</h1>                                            reglas básicas   ...
JERARQUÍA                               Hola    autor - usuario - navegador        <h1>Hola</h1>                          ...
JERARQUÍA                                      Hola    autor - usuario - navegador     <h1>Hola</h1>                      ...
JERARQUÍA                                      Hola    autor - usuario - navegador     <h1>Hola</h1>                      ...
ESPECÍFICO    GENÉRICO    <body>    	 <h1>Hola</h1>                    HTML     	 <p>Contenido</p>     </body>            ...
ESPECÍFICO    GENÉRICO             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    ...
ESPECÍFICO    GENÉRICO             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    ...
ESPECÍFICO    GENÉRICO             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    ...
ESPECÍFICO    GENÉRICO             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    ...
SINTAXIS    EXTRICTA             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    HT...
SINTAXIS    EXTRICTA             Hola                         Contenido    <body>    	 <h1>Hola</h1>                    HT...
CONTENEDORES       DIV         La etiqueta <div> o división de bloque es un elemento de         html utilizado para definir...
contenedores     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
CONTENEDORES       DIV         Una etiqueta <div> define un bloque donde incluiremos         información dentro de nuestro ...
<body>       <div>                        etiquetas de definición de un contenedor dentro de un                        docu...
imaginemos los divs      como cajas     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
En una pagina web standard, se                                            visualizan normalmente 4 cajas                  ...
veamos algo mas      gráfico     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
Tenemos el cuerpo de la                                            página, y dentro de ella                               ...
}   menu                                                     }   banner                                                   ...
<body>               <div id="contenedor">               <div id="menu">               </div>               <div id="banne...
si pasamos esto a      CSS     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
#menu {          height: 52px;          width: 968px;          background-color: #00F;          }          #slices {      ...
2 atributos básicos      float      clear     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
float      La propiedad float permite sacar a un elemento del flujo      del documento, y posicionarlo a la izquierda o derec...
FLOAT                                          1     <div id=“caja1”>1 </div>                      2                      ...
FLOAT                                          1 2     <div id=“caja1”>1 </div>                      1 3     <div id=“caja...
FLOAT                                          1 2     <div id=“caja1”>1 </div>                      1 3     <div id=“caja...
FLOAT                                          1 2 3     <div id=“caja1”>1 </div>     <div id=“caja2”>2 </div>            ...
Upcoming SlideShare
Loading in …5
×

Diagramación en web

4,794
-1

Published on

Uso de contenedor

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,794
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
104
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Diagramación en web

  1. 1. CSS Instrucciones que debe seguir un navegador para presentar la información taller_mediaviernes 26 de agosto de 2011
  2. 2. Separar al máximo la forma (presentación) y el fondo (datos) multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  3. 3. contenido multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  4. 4. maquetación multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  5. 5. SINTAXIS COMO ESCRIBIMOS AQUELLO QUE QUEREMOS VISUALIZAR multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  6. 6. css ordena la visualización del contenido multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  7. 7. css ordena la visualización del contenido multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  8. 8. velocidad de carga El código web de calidad se optimiza para que los elementos propios del diseño (fondos, estilos de texto, modalidades de presentación de elementos...) sea ligero, esto es, con pocas instrucciones se consiga el efecto visual deseado, y se reutilice múltiples veces. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  9. 9. tipos de selectores etiquetas: nativas de HTML identidad: posicionamiento, un elemento clase: múltiples elementos multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  10. 10. Selector: Etiqueta ¿Dónde? body { background-color:#FFFFFF; } multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  11. 11. documento body { background-color:#FFFFFF; } etiqueta multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  12. 12. Selector: Identificador individual ¿Dónde? #encabezado { background-color:#666666; } 1 vez por documento multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  13. 13. documento body { background-color:#666; } id multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  14. 14. Selector: Identificador común ¿Dónde? .datos { background-color:#00FFCC; } +1 vez por documento multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  15. 15. documento body { background-color:#00FFCC; } class multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  16. 16. reglas básicas para trabajar con CSS multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  17. 17. JERARQUÍA autor - usuario - navegador <h1>Hola</h1> reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  18. 18. JERARQUÍA Hola autor - usuario - navegador <h1>Hola</h1> reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  19. 19. JERARQUÍA Hola autor - usuario - navegador <h1>Hola</h1> HTML h1 CSS { color:red; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  20. 20. JERARQUÍA Hola autor - usuario - navegador <h1>Hola</h1> HTML h1 CSS { color:red; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  21. 21. ESPECÍFICO GENÉRICO <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  22. 22. ESPECÍFICO GENÉRICO Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  23. 23. ESPECÍFICO GENÉRICO Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> body CSS { color:red; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  24. 24. ESPECÍFICO GENÉRICO Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> body { color:red; } CSS p { color:blue; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  25. 25. ESPECÍFICO GENÉRICO Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> body { color:red; } CSS p { color:blue; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  26. 26. SINTAXIS EXTRICTA Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> BODY { } color:red; CSS reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  27. 27. SINTAXIS EXTRICTA Hola Contenido <body> <h1>Hola</h1> HTML <p>Contenido</p> </body> BODY { } color:red; CSS reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  28. 28. CONTENEDORES DIV La etiqueta <div> o división de bloque es un elemento de html utilizado para definir secciones de un documento. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  29. 29. contenedores multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  30. 30. CONTENEDORES DIV Una etiqueta <div> define un bloque donde incluiremos información dentro de nuestro documento. A este bloque definido con la etiqueta <div> le asignaremos por medio del CSS, las propiedades de posición, tamaño, color, etc etc. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  31. 31. <body> <div> etiquetas de definición de un contenedor dentro de un documento html </div> </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  32. 32. imaginemos los divs como cajas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  33. 33. En una pagina web standard, se visualizan normalmente 4 cajas imaginarias: - Contenedor principal - Cabezal - Cuerpo - Pie estructura multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  34. 34. veamos algo mas gráfico multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  35. 35. Tenemos el cuerpo de la página, y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos. estructura multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  36. 36. } menu } banner } cuerpo footer multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  37. 37. <body> <div id="contenedor"> <div id="menu"> </div> <div id="banner"> </div> <div id="cuerpo"> </div> <div id="footer"> </div> </div> </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  38. 38. si pasamos esto a CSS multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  39. 39. #menu { height: 52px; width: 968px; background-color: #00F; } #slices { height: 359px; width: 968px; background-color: #FF0; } #cuerpo { height: 700px; background-color: #C60; } #contenedor { width: 968px; } #footer { height: 50px; width: 968px; background-color: #C09; } multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  40. 40. 2 atributos básicos float clear multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  41. 41. float La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  42. 42. FLOAT 1 <div id=“caja1”>1 </div> 2 3 <div id=“caja2”>2 </div> HTML <div id=“caja3”>3 </div> #caja1 { border-color:red float:left; CSS } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  43. 43. FLOAT 1 2 <div id=“caja1”>1 </div> 1 3 <div id=“caja2”>2 </div> HTML <div id=“caja3”>3 </div> #caja1 { border-color:red float:left; CSS } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  44. 44. FLOAT 1 2 <div id=“caja1”>1 </div> 1 3 <div id=“caja2”>2 </div> HTML <div id=“caja3”>3 </div> #caja1 { border-color:red float:left; CSS } #caja2 { border-color:blue float:left; width:25px; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  45. 45. FLOAT 1 2 3 <div id=“caja1”>1 </div> <div id=“caja2”>2 </div> HTML <div id=“caja3”>3 </div> #caja1 { border-color:red float:left; CSS } #caja2 { border-color:blue float:left; width:25px; } reglas básicas multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×