SlideShare una empresa de Scribd logo
1 de 17
maquetación
                              aplicar atributos básicos de CSS para diagramar



                                                                 patricio rodríguez m.
                                                                 @taller_media
martes 28 de agosto de 2012
tipos de selectores
     etiquetas: nativas de HTML
     identidad: posicionamiento, un elemento
     clase: múltiples elementos




    multimedia 1 - internet y sitios web
martes 28 de agosto de 2012
como funciona
martes 28 de agosto de 2012
tipos de selectores
     etiquetas: no necesitan concatenador

     body{font-size: 24px;}




martes 28 de agosto de 2012
martes 28 de agosto de 2012
                              }
                              body
tipos de selectores
     identidad: utiliza concatenador #, determina posición de
     un objeto único

     #introduccion{width: 980px;}




martes 28 de agosto de 2012
#introduccion




martes 28 de agosto de 2012
identidad: determina posición de un objeto único

martes 28 de agosto de 2012
tipos de selectores
     clase: utiliza concatenador ., son objetos que se reiteran
     en cuanto a su uso y estructura

     .fotos{border: 1px solid #6a4a3c;}




martes 28 de agosto de 2012
clase: son objetos que se reiteran en cuanto a su uso y
          estructura
martes 28 de agosto de 2012
nociones básicas
     de maquetación
     con css


martes 28 de agosto de 2012
1. la maquetación se realiza
    por medio de contenedores        cabecera


                              HTML   enlaces
    <div id=”contenedor”>
    <div id=”cabecera”></div>
                                     cuerpo
    <div id=”enlaces”></div>
    <div id=”cuerpo”></div>
    <div id=”pie”></div>              pie
    </div>




martes 28 de agosto de 2012
2. los contenedores (<div>)
    sin atributos funcionan por      cabecera
    apilamiento
                              HTML   enlaces
    <div id=”contenedor”>
    <div id=”cabecera”></div>
                                     cuerpo
    <div id=”enlaces”></div>
    <div id=”cuerpo”></div>
    <div id=”pie”></div>              pie
    </div>




martes 28 de agosto de 2012
3. el atributo float
   permite sacar a un elemento del    cabecera
   flujo del documento, y
   posicionarlo a la izquierda o      enlaces     cuerpo
   derecha de otros elementos
   adyacentes. Admite tres valores,
                                            pie
   right, left y none.

    <div id=”contenedor”>
    <div id=”cabecera”></div>
    <div id=”enlaces”></div>
    <div id=”cuerpo”></div>
    <div id=”pie”></div>                  #enlaces {
    </div>                                  width: 300px;
                                            float: left;
                                          }




martes 28 de agosto de 2012
4. el atributo clear
                                               cabecera
    se utiliza conjuntamente con
    float para indicar cuando un
    elemento flotante permite otros             enlaces    cuerpo
    elementos flotantes junto a el.
                                #enlaces {
    <div id=”contenedor”>         width: 300px;
    <div id=”cabecera”></div>     float: left;
    <div id=”enlaces”></div>    }
    <div id=”cuerpo”></div>
    <div id=”pie”></div>
    </div>
                                #cuerpo {      pie
                                  width: 650px;
                                  float: right;
                                }
                                #pie{
                                 clear:both;
                                 }

martes 28 de agosto de 2012
<div id=”contenedor”>
       <div id=”cabecera”></div>
                                   cabecera
       <div id=”enlaces”></div>
       <div id=”cuerpo”></div>
       <div id=”pie”></div>
       </div>                      enlaces    cuerpo


        #enlaces {
          width: 300px;
          float: left;
        }
                                    pie
        #cuerpo {
          width: 650px;
          float: right;
        }
        #pie{
         clear:both;
         }
martes 28 de agosto de 2012
preguntas??

martes 28 de agosto de 2012

Más contenido relacionado

Similar a Maquetación css Parte 1

Similar a Maquetación css Parte 1 (20)

Id’s y classes
Id’s y classesId’s y classes
Id’s y classes
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Mexital Css
Mexital CssMexital Css
Mexital Css
 
Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
Uso de CSS
Uso de CSSUso de CSS
Uso de CSS
 
Estilos css
Estilos cssEstilos css
Estilos css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Tecnologia Web - HTML
Tecnologia Web - HTMLTecnologia Web - HTML
Tecnologia Web - HTML
 
Pagina web
Pagina webPagina web
Pagina web
 
CSS, Introducción
CSS, IntroducciónCSS, Introducción
CSS, Introducción
 
Introducción al desarrollo web frontend
Introducción al desarrollo web frontendIntroducción al desarrollo web frontend
Introducción al desarrollo web frontend
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Etiqueta de hatml 1
Etiqueta de hatml 1Etiqueta de hatml 1
Etiqueta de hatml 1
 
SEO
SEOSEO
SEO
 
Hoja de estilo
Hoja de estiloHoja de estilo
Hoja de estilo
 
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a GoogleiDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
iDay Feb 2017 - Marcado de datos estructurados. Pónselo fácil a Google
 
Tema 9 - Estructura con css
Tema 9 - Estructura con cssTema 9 - Estructura con css
Tema 9 - Estructura con css
 
Dom html - java script
Dom   html - java scriptDom   html - java script
Dom html - java script
 
06 Introduccion a CSS
06 Introduccion a CSS06 Introduccion a CSS
06 Introduccion a CSS
 

Más de iConstruye

Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4iConstruye
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado WebiConstruye
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion GraphicsiConstruye
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrppiConstruye
 
Examen edicion
Examen edicionExamen edicion
Examen edicioniConstruye
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesigniConstruye
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6iConstruye
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto webiConstruye
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la webiConstruye
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptualesiConstruye
 
Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5iConstruye
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSSiConstruye
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTMLiConstruye
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseñoiConstruye
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición MultimediaiConstruye
 
Temario examen
Temario examenTemario examen
Temario exameniConstruye
 

Más de iConstruye (20)

Examen taller
Examen tallerExamen taller
Examen taller
 
Entrega1 - Taller 4
Entrega1 - Taller 4Entrega1 - Taller 4
Entrega1 - Taller 4
 
Prototipado Web
Prototipado WebPrototipado Web
Prototipado Web
 
Introducción a Motion Graphics
Introducción a Motion GraphicsIntroducción a Motion Graphics
Introducción a Motion Graphics
 
Examen imagen
Examen imagenExamen imagen
Examen imagen
 
Examen edicion rrpp
Examen edicion rrppExamen edicion rrpp
Examen edicion rrpp
 
Examen edicion
Examen edicionExamen edicion
Examen edicion
 
Texto en InDesign
Texto en InDesignTexto en InDesign
Texto en InDesign
 
Edición conInDesign CS6
Edición conInDesign CS6Edición conInDesign CS6
Edición conInDesign CS6
 
Filezilla
FilezillaFilezilla
Filezilla
 
Webhost
WebhostWebhost
Webhost
 
Etapas de un proyecto web
Etapas de un proyecto webEtapas de un proyecto web
Etapas de un proyecto web
 
Navegación en la web
Navegación en la webNavegación en la web
Navegación en la web
 
Mapas conceptuales
Mapas conceptualesMapas conceptuales
Mapas conceptuales
 
Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5Etiquetas estructurales en HTML5
Etiquetas estructurales en HTML5
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Etiquetas semánticas HTML
Etiquetas semánticas HTMLEtiquetas semánticas HTML
Etiquetas semánticas HTML
 
La información como fundamento del diseño
La información como fundamento del diseñoLa información como fundamento del diseño
La información como fundamento del diseño
 
Examen Edición Multimedia
Examen Edición MultimediaExamen Edición Multimedia
Examen Edición Multimedia
 
Temario examen
Temario examenTemario examen
Temario examen
 

Último

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosErickOv
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfjpgaraglia03
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxlou lou
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxlou lou
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...ORIETTA POLIFRONI
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevantesantiagovelez61
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfacoellob
 

Último (7)

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito Electronicos
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdf
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptx
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptx
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevante
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdf
 

Maquetación css Parte 1

  • 1. maquetación aplicar atributos básicos de CSS para diagramar patricio rodríguez m. @taller_media martes 28 de agosto de 2012
  • 2. tipos de selectores etiquetas: nativas de HTML identidad: posicionamiento, un elemento clase: múltiples elementos multimedia 1 - internet y sitios web martes 28 de agosto de 2012
  • 3. como funciona martes 28 de agosto de 2012
  • 4. tipos de selectores etiquetas: no necesitan concatenador body{font-size: 24px;} martes 28 de agosto de 2012
  • 5. martes 28 de agosto de 2012 } body
  • 6. tipos de selectores identidad: utiliza concatenador #, determina posición de un objeto único #introduccion{width: 980px;} martes 28 de agosto de 2012
  • 7. #introduccion martes 28 de agosto de 2012
  • 8. identidad: determina posición de un objeto único martes 28 de agosto de 2012
  • 9. tipos de selectores clase: utiliza concatenador ., son objetos que se reiteran en cuanto a su uso y estructura .fotos{border: 1px solid #6a4a3c;} martes 28 de agosto de 2012
  • 10. clase: son objetos que se reiteran en cuanto a su uso y estructura martes 28 de agosto de 2012
  • 11. nociones básicas de maquetación con css martes 28 de agosto de 2012
  • 12. 1. la maquetación se realiza por medio de contenedores cabecera HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div> martes 28 de agosto de 2012
  • 13. 2. los contenedores (<div>) sin atributos funcionan por cabecera apilamiento HTML enlaces <div id=”contenedor”> <div id=”cabecera”></div> cuerpo <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> pie </div> martes 28 de agosto de 2012
  • 14. 3. el atributo float permite sacar a un elemento del cabecera flujo del documento, y posicionarlo a la izquierda o enlaces cuerpo derecha de otros elementos adyacentes. Admite tres valores, pie right, left y none. <div id=”contenedor”> <div id=”cabecera”></div> <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> #enlaces { </div> width: 300px; float: left; } martes 28 de agosto de 2012
  • 15. 4. el atributo clear cabecera se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros enlaces cuerpo elementos flotantes junto a el. #enlaces { <div id=”contenedor”> width: 300px; <div id=”cabecera”></div> float: left; <div id=”enlaces”></div> } <div id=”cuerpo”></div> <div id=”pie”></div> </div> #cuerpo { pie width: 650px; float: right; } #pie{ clear:both; } martes 28 de agosto de 2012
  • 16. <div id=”contenedor”> <div id=”cabecera”></div> cabecera <div id=”enlaces”></div> <div id=”cuerpo”></div> <div id=”pie”></div> </div> enlaces cuerpo #enlaces { width: 300px; float: left; } pie #cuerpo { width: 650px; float: right; } #pie{ clear:both; } martes 28 de agosto de 2012
  • 17. preguntas?? martes 28 de agosto de 2012