SlideShare ist ein Scribd-Unternehmen logo
1 von 5
Capas
•   Introducción
•   Insertar una capa
•   Formato de una capa



Objetivo: El alumno conocerá en forma integral:

Trabajo Con capas –layers-.
Configuración y propiedades de las capas.


Practica de confirmación: Insertar diferentes capas a las paginas web ,
agregando información adicional como imágenes y texto




Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte
 de la página (es decir, que tienen una posición absoluta en la página), en los que
 podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse
 entre sí, lo que proporciona grandes posibilidades de diseño.




 Las capas pueden moverse de una
 posición a otra de la ventana pulsando
 sobre el recuadro blanco, y sin soltar el
 ratón, arrastrándola hacia la nueva
 posición




También pueden ser redimensionadas pulsando sobre los
recuadros azules, y arrastrándolos hasta conseguir el tamaño
deseado


  Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
Las capas pueden insertarse en una página a través del menú Insertar, opción
Objeto de diseño, Div PA (Elemento con Posición Absoluta).




Una vez se ha insertado la capa, pueden
editarse sus atributos, pero para ello hay que
seleccionarla primero.




  Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
Cuando existen varias capas en un mismo
documento, es preferible seleccionarlas a través
de la pestaña Elementos PA del panel CSS, que
puede abrirse a través del menú Ventana opción
Elementos PA. También puedes abrir el panel
pulsando F2




  Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades




1. Elemento CSS-P es el nombre de la capa. También puede ser cambiado a través del panel Elementos PA, haciendo
    doble clic sobre él.
2. Izq y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa.
3. An y Al indican la anchura y la altura de la capa.
4. Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel
    Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.
5. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
6. Default (visibilidad según el navegador),
7. Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
8. Visible (muestra la capa, aunque la página no se esté viendo) y
9. Hidden (la capa está oculta).
10. La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo
    abierto indica Visible, y el ojo cerrado indica Hidden.
11. A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
12. Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño
    especificado de la capa.
13. Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida.
14. Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
15. Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se
    necesitan como si no.
16. Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es
    decir, cuando el contenido de la capa supere sus límites).
     Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo

Weitere ähnliche Inhalte

Was ist angesagt? (16)

Tutorial spicy nodes
Tutorial spicy nodesTutorial spicy nodes
Tutorial spicy nodes
 
El entorno de trabajo en flash
El entorno de trabajo en flashEl entorno de trabajo en flash
El entorno de trabajo en flash
 
Manual del xmind
Manual del  xmind Manual del  xmind
Manual del xmind
 
Flash
FlashFlash
Flash
 
Taller 1
Taller 1Taller 1
Taller 1
 
fuente de poder
fuente de poderfuente de poder
fuente de poder
 
Instructivo Photoshop
Instructivo PhotoshopInstructivo Photoshop
Instructivo Photoshop
 
Tutorial de word 2010
Tutorial de word 2010Tutorial de word 2010
Tutorial de word 2010
 
Conociendo Adobe Fireworks 2015
Conociendo Adobe Fireworks 2015Conociendo Adobe Fireworks 2015
Conociendo Adobe Fireworks 2015
 
Salto seccion pie_pagina_word2010
Salto seccion pie_pagina_word2010Salto seccion pie_pagina_word2010
Salto seccion pie_pagina_word2010
 
Ventana Gráfica - Small Basic
Ventana Gráfica - Small BasicVentana Gráfica - Small Basic
Ventana Gráfica - Small Basic
 
Diseño de-una-diapositiva
Diseño de-una-diapositivaDiseño de-una-diapositiva
Diseño de-una-diapositiva
 
El objeto Controls - Small Basic
El objeto Controls - Small BasicEl objeto Controls - Small Basic
El objeto Controls - Small Basic
 
Entorno visual de word 2010 UFT
Entorno visual de word 2010 UFT Entorno visual de word 2010 UFT
Entorno visual de word 2010 UFT
 
Perfiles topográficos mediante google earth jesse benitez bello
Perfiles  topográficos  mediante google  earth  jesse benitez belloPerfiles  topográficos  mediante google  earth  jesse benitez bello
Perfiles topográficos mediante google earth jesse benitez bello
 
Flash
FlashFlash
Flash
 

Ähnlich wie Leccion 20 capas

7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capasMarianmv
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverMajoromeroi
 
Acciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre CapasAcciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre Capasbetzi.15
 
09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. Capas09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. CapasJosé M. Padilla
 
Curso de diseño ilustrador cs5
Curso de diseño ilustrador cs5Curso de diseño ilustrador cs5
Curso de diseño ilustrador cs5abranpaso
 
Diseño grafico 1del segundo mes
Diseño grafico 1del segundo mesDiseño grafico 1del segundo mes
Diseño grafico 1del segundo mesEsmeralda2227
 
gvSIG: Proyectos y Documentos
gvSIG: Proyectos y DocumentosgvSIG: Proyectos y Documentos
gvSIG: Proyectos y DocumentosMaryadelMar85
 
gvSIG visualización y navegación
gvSIG visualización y navegacióngvSIG visualización y navegación
gvSIG visualización y navegaciónMaryadelMar85
 
Computacion creacion de texto metalico
Computacion   creacion de texto metalicoComputacion   creacion de texto metalico
Computacion creacion de texto metalicoErika156
 

Ähnlich wie Leccion 20 capas (20)

7 comportamiento de capas
7 comportamiento de capas7 comportamiento de capas
7 comportamiento de capas
 
Guia4de Dreamweaver
Guia4de DreamweaverGuia4de Dreamweaver
Guia4de Dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Photoshop CS6. capas
Photoshop CS6. capasPhotoshop CS6. capas
Photoshop CS6. capas
 
Acciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre CapasAcciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre Capas
 
09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. Capas09 Dibujo Vectorial Con Draw. Capas
09 Dibujo Vectorial Con Draw. Capas
 
parte 4 manual 2022.pdf
parte 4 manual 2022.pdfparte 4 manual 2022.pdf
parte 4 manual 2022.pdf
 
Curso de diseño ilustrador cs5
Curso de diseño ilustrador cs5Curso de diseño ilustrador cs5
Curso de diseño ilustrador cs5
 
Capas en Photoshop
Capas  en PhotoshopCapas  en Photoshop
Capas en Photoshop
 
Diseño grafico 1del segundo mes
Diseño grafico 1del segundo mesDiseño grafico 1del segundo mes
Diseño grafico 1del segundo mes
 
Dreamweader
DreamweaderDreamweader
Dreamweader
 
gvSIG: Proyectos y Documentos
gvSIG: Proyectos y DocumentosgvSIG: Proyectos y Documentos
gvSIG: Proyectos y Documentos
 
Tabla dwcs5
Tabla dwcs5Tabla dwcs5
Tabla dwcs5
 
gvSIG visualización y navegación
gvSIG visualización y navegacióngvSIG visualización y navegación
gvSIG visualización y navegación
 
Capas
CapasCapas
Capas
 
Capas
CapasCapas
Capas
 
Informe de bre k..
Informe de bre k..Informe de bre k..
Informe de bre k..
 
Tema09.pptx.pdf
Tema09.pptx.pdfTema09.pptx.pdf
Tema09.pptx.pdf
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
Computacion creacion de texto metalico
Computacion   creacion de texto metalicoComputacion   creacion de texto metalico
Computacion creacion de texto metalico
 

Mehr von Flor Aguilar

Ejercicio 1 prueba de practicas para certificación de SolidWorks
Ejercicio 1 prueba de practicas para certificación de SolidWorksEjercicio 1 prueba de practicas para certificación de SolidWorks
Ejercicio 1 prueba de practicas para certificación de SolidWorksFlor Aguilar
 
Leccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverLeccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverFlor Aguilar
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.florFlor Aguilar
 
Leccion 19.otros elementos
Leccion 19.otros elementosLeccion 19.otros elementos
Leccion 19.otros elementosFlor Aguilar
 
Leccion 18 html desde dreamweaver 2
Leccion 18 html desde dreamweaver 2Leccion 18 html desde dreamweaver 2
Leccion 18 html desde dreamweaver 2Flor Aguilar
 
Leccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverLeccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverFlor Aguilar
 
Leccion 16.plantillas
Leccion 16.plantillasLeccion 16.plantillas
Leccion 16.plantillasFlor Aguilar
 
Leccion 15 sonido y videos
Leccion 15 sonido y videosLeccion 15 sonido y videos
Leccion 15 sonido y videosFlor Aguilar
 
Leccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florLeccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florFlor Aguilar
 
Leccion13 formularios dream
Leccion13 formularios dreamLeccion13 formularios dream
Leccion13 formularios dreamFlor Aguilar
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.florFlor Aguilar
 
Leccion 11 dream.flor
Leccion 11 dream.florLeccion 11 dream.flor
Leccion 11 dream.florFlor Aguilar
 
Leccion 11 dream.flor
Leccion 11 dream.florLeccion 11 dream.flor
Leccion 11 dream.florFlor Aguilar
 
Leccion13 formularios dream
Leccion13 formularios dreamLeccion13 formularios dream
Leccion13 formularios dreamFlor Aguilar
 
Leccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florLeccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florFlor Aguilar
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.florFlor Aguilar
 

Mehr von Flor Aguilar (20)

Ejercicio 1 prueba de practicas para certificación de SolidWorks
Ejercicio 1 prueba de practicas para certificación de SolidWorksEjercicio 1 prueba de practicas para certificación de SolidWorks
Ejercicio 1 prueba de practicas para certificación de SolidWorks
 
Leccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverLeccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaver
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.flor
 
Leccion 19.otros elementos
Leccion 19.otros elementosLeccion 19.otros elementos
Leccion 19.otros elementos
 
Leccion 18 html desde dreamweaver 2
Leccion 18 html desde dreamweaver 2Leccion 18 html desde dreamweaver 2
Leccion 18 html desde dreamweaver 2
 
Leccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaverLeccion 17 html desde dreamweaver
Leccion 17 html desde dreamweaver
 
Leccion 16.plantillas
Leccion 16.plantillasLeccion 16.plantillas
Leccion 16.plantillas
 
Leccion 15 sonido y videos
Leccion 15 sonido y videosLeccion 15 sonido y videos
Leccion 15 sonido y videos
 
Leccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florLeccion14.multimedia1.dream flor
Leccion14.multimedia1.dream flor
 
Leccion13 formularios dream
Leccion13 formularios dreamLeccion13 formularios dream
Leccion13 formularios dream
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.flor
 
Leccion 11 dream.flor
Leccion 11 dream.florLeccion 11 dream.flor
Leccion 11 dream.flor
 
Leccion 11 dream.flor
Leccion 11 dream.florLeccion 11 dream.flor
Leccion 11 dream.flor
 
Leccion13 formularios dream
Leccion13 formularios dreamLeccion13 formularios dream
Leccion13 formularios dream
 
Leccion14.multimedia1.dream flor
Leccion14.multimedia1.dream florLeccion14.multimedia1.dream flor
Leccion14.multimedia1.dream flor
 
Leccion12 dream.flor
Leccion12 dream.florLeccion12 dream.flor
Leccion12 dream.flor
 
Leccion 10 dream
Leccion 10 dreamLeccion 10 dream
Leccion 10 dream
 
Leccion 9 dream
Leccion 9 dreamLeccion 9 dream
Leccion 9 dream
 
Leccion 8 dream
Leccion 8 dreamLeccion 8 dream
Leccion 8 dream
 
Leccion 7 dream
Leccion 7 dreamLeccion 7 dream
Leccion 7 dream
 

Kürzlich hochgeladen

Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PCCesarFernandez937857
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
celula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicacelula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicaFlor Idalia Espinoza Ortega
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxPryhaSalam
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxKarlaMassielMartinez
 

Kürzlich hochgeladen (20)

Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Identificación de componentes Hardware del PC
Identificación de componentes Hardware del PCIdentificación de componentes Hardware del PC
Identificación de componentes Hardware del PC
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
celula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicacelula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamica
 
Repaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia GeneralRepaso Pruebas CRECE PR 2024. Ciencia General
Repaso Pruebas CRECE PR 2024. Ciencia General
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptxEXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
EXPANSIÓN ECONÓMICA DE OCCIDENTE LEÓN.pptx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptxTECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
TECNOLOGÍA FARMACEUTICA OPERACIONES UNITARIAS.pptx
 

Leccion 20 capas

  • 1. Capas • Introducción • Insertar una capa • Formato de una capa Objetivo: El alumno conocerá en forma integral: Trabajo Con capas –layers-. Configuración y propiedades de las capas. Practica de confirmación: Insertar diferentes capas a las paginas web , agregando información adicional como imágenes y texto Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
  • 2. Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página (es decir, que tienen una posición absoluta en la página), en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición También pueden ser redimensionadas pulsando sobre los recuadros azules, y arrastrándolos hasta conseguir el tamaño deseado Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
  • 3. Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Div PA (Elemento con Posición Absoluta). Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
  • 4. Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opción Elementos PA. También puedes abrir el panel pulsando F2 Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo
  • 5. Formato de una capa Las propiedades de la capa se especifican a través de su inspector de propiedades 1. Elemento CSS-P es el nombre de la capa. También puede ser cambiado a través del panel Elementos PA, haciendo doble clic sobre él. 2. Izq y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa. 3. An y Al indican la anchura y la altura de la capa. 4. Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Elementos PA. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo. 5. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: 6. Default (visibilidad según el navegador), 7. Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando), 8. Visible (muestra la capa, aunque la página no se esté viendo) y 9. Hidden (la capa está oculta). 10. La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. 11. A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. 12. Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa. 13. Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida. 14. Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador. 15. Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no. 16. Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites). Resultados, No Excusas, Termina todo lo que Empiezas, Trabajo en Equipo