CSS3
Se está descargando tu SlideShare.
×
Eche un vistazo a continuación
Más Contenido Relacionado
Presentaciones para usted (18)
Similares a Sesion01 (20)
Más reciente (20)
Sesion01
- 1. Diseñando en WordPress Curso Páginas de Profesores UVa
- 2. Diseñando en WordPress Acceso en modo editor: …/wp-admin … al Escritorio: Hábito importante: guardar o actualizar siempre los cambios y ediciones
- 3. Escritorio Diseñando en WordPress Ajustes generales: Códigos-lenguaje (ISO-639) Configurar Jetpack: Paquete de funcionalidades o ‘plugins’. Anti-spam (Akismet.com) Ajustes de lectura y escritura… Página inicial, página de entradas (blog) Categorias y etiquetas (tags)… Organizar el contenido a publicar… Ajustar enlaces permanentes… Definen las url…
- 4. Escritorio Diseñando en WordPress Publicación… Página publica o protegida. (Entrada ‘pegajosa’) Comentarios… Pingbacks y Trackbacks. Notificaciones al buscador y enlaces a entradas. Spam robot
- 5. Escritorio Diseñando en WordPress Menus… Definir menu de navegación principal... Enlaces…Se clasifican por categorías y se muestran como widget.
- 6. Escritorio Diseñando en WordPress Editar… Editor de texto WSYWIG.
- 7. CSS: diseño en WordPress… Editor de texto de Wordpress (Tiny MCE)
- 8. Escritorio Diseñando en WordPress Edición de estilo CSS en HTML del editor… Etiquetas más habituales : OBJETOS: <div> <p> <img> <a href> <table> <tr> <td> <ul> <li> <embed> <iframe>… ESTILO: background / font / color / size / border / width / height / margin / padding / top-right-bottom-left /… <div style="background-color:#333333; padding:2px; width:300px; height;100px;> …….. </div> www.w3schools.com/tags
- 9. COMPLEMENTOS para trabajar con html… …traducción de selección y paginas. …edicion del estilo y organización del documento. … edición de texto WYSIWYG (What you see is what you get )
- 10. APLICACIONES para trabajar con html… Notepad http://notepad-plus-plus.org/ …bloc de notas html. KompoZer www.kompozer.net …aplicación libre de edición web. …HTML5 y CSS3
- 11. Trabajar con html y css… <html> <head> <title>prueba caja</title> </head> <body> <div style="background-color: #FFCCCC; width:80%; height:400px;"> <p>…mi caja tiene este color… </p> Escribir código </div> en editor de texto, En el modo html </body> </html>
- 12. Trabajar con el color web… #RRGGBB Modelo RGB hexadecimal #FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo. #00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. #0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. #FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo. Números 0 - 99 y letras A - F
- 13. Trabajar con el color web… Modelo RGBA Valores: Red,green,blue (alpha) rgba(0,0,0,0.5) valores 0-255 Modelo HSLA Valores: matiz, saturación, brillo, (alpha) hsla(320, 50%, 75%, 0.8); Valores 0-360 y porcentaje …colrd.com Alfa 0 - 1
- 14. Texto en CSS… Parrafo… <p> <p style = “… • line-height: 1.5em (Interlineado…px / em / % ) • font-size: 16px; (Tamaño… px / em / % ) • text-indent: 5px; (Tabulación ) • letter-spacing: 2px; • word-spacing: 0.2em; • vertical-align: top / middle / baseline … • text-shadow: horizontal / vertical / color (1px 1px #FFF;)
- 15. CSS: diseño en WordPress… Contenedor <div> <article> margin style = “ margin-left : 20px ; padding-top : 10px ; ” style = “ margin : 0, 5px, 0, 7px ; ” (top,right,bottom,left) padding style = “ border : 1px solid #FF0000 ” border <div style=“… div width --- height Pixeles (px) Porcentaje (%) Relativa (em)
- 16. CSS: diseño en WordPress… Atributos y propiedades básicas… Posicionamiento y tipo de caja float right --- left --- none style = “ float : right ; ” display inline - block – none… style = “ display : block ; ” div style = “display: block; margin-left: auto; margin-right: auto;"
- 17. Trabajar con textos… Calcular la legibilidad de un texto… Readability index calculator http://www.standards-schmandards.com/exhibits/rix/index.php Editar texto on line… Texto 3D online… http://www.gifss.com/texto3d/ Texto e imagen… Texto animado… http://www.imagechef.com http://livetyping.com/
- 18. Gracias por su atención.
