CODIGOS AMAWEBS HTML & CSS. </style>
|
|
- Ramón Gil Maidana
- hace 5 años
- Vistas:
Transcripción
1 CODIGOS AMAWEBS HTML & CSS Hola Colega Amarillo!, En este documento encontraras una serie de Códigos en lenguaje Html & CSS, los cuales te ayudaran a poder profesionalizar tu Amawebs e incluso puedas darles un valor agregado como pagina informativa para tus clientes, dependiendo del empeño, diseño & creatividad que utilices. OJO! Es muy importante que antes de usar los códigos, escribas el siguiente para aperturar el lenguaje de programación: <style media="screen" type="text/css"> y cuando termines de colocar todos los códigos, debes de cerrar el lenguaje de programación: </style> Aquí te dejo los Códigos: OBSERVA LOS VIDEOS DE INTRODUCCIÓN (presiona Ctrl +clic para seguir el vínculo): 1). 2). PRESIONA CTRL + CLIC EN CADA UNA DE LAS IMÁGENES Y TE LLEVARA AL VIDEOTUTORIAL DE EXPLICACIÓN No. Tema Codigo HTML / CSS Descripción Imagen 1 COLOCA UN FONDO A TU AMAWEBS body { background:url(url DE LA IMAGEN)repeat 0 0; Con este colocas un fondo personalizado, de preferencia debe de oscilar en un promedio de 2000 X 1200 pixeles, a menos que sea repetitivo por ejemplo que sean solo logotipos o figuras si puedes utilizar una imagen pequeña ya que el codigo lo repite
2 2 QUITAR ORILLAS LATERALES, SUPERIOR E INFERIOR DE LA PLANTILLA #headercontainer{ background-image : none ; #maincontainer{ background-image : none ; #footcontainer{ background-image : none ; Con este quitas los marcos u orillas superior, lateral e inferior 3 PERSONALIZA TU CABECERA DEL TAMAÑO QUE QUIERAS #header { background:url(url DE LA IMAGEN) no-repeat; height: 170px; #header.title h1 { font-size: 0px; Con este colocas un cabecera del tamaño que tu quieras, y con alta resolución PNG, JPG - la de la imagen es de 970 x 320 pixeles y esta en formato PNG, solo la subi a un servidor gratuito 4 SUBE Y BAJA EL CUERPO DE TU AMAWEBS A PARTIR DEL MENU DE BOTONES #headercontainer { width: 1000px; height: 170px; background: transparent; Con este subes o bajas el cuerpo de la amaweb a partir del menu de botones, tienes que jugar don la opción height: 170pxque es la altura - el de la imagen tiene un height: 320px ya que lo acople al tamaño de la cabecera de 970 x 320 para que quedara a la medida exacta
3 5 COLOCA UN FONDO PERSONALIZADO A LAS TABLAS td{ background:url(url DE LA IMAGEN)repeat 0 0; Colocas un fondo u imagen a las tablas que utilices 6 ORILLAS INFERIORES REDONDAS DE TU PLANTILLA.mainright { -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 30px; -webkit-border-radius: 30px 30px 30px 30px; border-radius: 30px 30px 30px 30px; Con este das forma redonda a las esquinas en la parte INFERIOR de tu amawebs, puedes jugar con los pixelajes, donde dice 30px; y colocarlos todos parejos para hacerlo al gusto 7 ORILLAS SUPERIORES REDONDAS DE TU PLANTILLA.menuH { -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 30px 30px 0px 0px; border-radius: 30px 30px 0px 0px; Con este das forma redonda a las esquinas en la parte SUPERIOR de tu amawebs a partir del Menu, puedes jugar con los pixelajes, donde dice 30px; y colocarlos todos parejos para hacerlo al gusto
4 8 QUITA LA IMAGEN DE PIE QUE TRAE LA AMAWEBS #foot { background-image : none ; width: 1000px; height: 150px; aquí puedes quitar la imagen del pie de amawebs completamente y puedes jugar con la altura (height) 9 COLOCA UN BOTON PERSONALIZADO #main.menuh.bt { background:url(url DE LA IMAGEN)repeat 0 0; height: 37px; width: 200px; text-align: center;.menuh { background-color: #000000; con este colocas un boton personalizado, ( el boton lo tienes que crear tu, con tu creatividad en tamaño pequeño ), tambien juegas con la altura y el ancho para que quede a la medida, ver tutorial 10 FUENTE DEL MENU DE BOTONES #main.menuh a { padding-top: 10px; font-family: LuzSans-BoldItalic; font-size: 10px; text-align: center; padding-left: 0px; con este personaliza el tipo de letra de los botones, tamaño, distancia de la barra, el centrado, etc, ver tutorial
5 11 FUENTE DEL PIE DE TU AMAWEB #foot.data { color: white; font-family:luzsans-bolditalic; con este personaliza el tipo de letra del pie de tu amaweb, tamaños, colores, etc, ver el tutorial 12 QUITA LA LINEA QUE SE VE, CUANDO COLOCAS UNA TABLA ANCHA Y EL FONDO.mainright { background-color: #ffffff; quita la linea divisoria que nos da la plantilla de amawebs, y a la vez puedes colocar un color de fondo, jugando con el codigo de pantone de colores: background-color: #CODIGODECOLOR; 13 PERSONALIZA TU PIE DE PAGINA CON UNA IMAGEN #foot { background:url(url DE LA IMAGEN)repeat 0 0; cambias de imagen al pie de tu amawebs
6 14 IMAGEN FLOTANTE TIPO SCROLL, CON REDIRECCIONAMIENTO (este lo colocas debajo de </style>) <a href="link A DONDE QUIERES QUE LLEVE AL DAR CLIC" target="_blank"><img alt="" src="url DE LA IMAGEN" style="position: fixed; top: 130px; left: 0px;" /></a> colocas una imagen flotante, que vaya corriendo mientras corres la pagina hacia abajo, y que al dar clic redireccione a un link que quieras 15 QUITA LOS BOTONES LATERALES DE LA PLANTILLA #main.icon1 { #main.icon2 { #main.icon3 { #main.icon4 { quitas completamente los botones que traen las plantillas de amawebs laterales 16 AJUSTA LOS MARGENES DE LA INFORMACIÓN DEL CUERPO DE TU AMAWEB #main.text { margin-left: 0px; margin-top: -15px; ajustas toda la información que esta debajo de los botones, a la plantilla, trabajas con los margenes izquierda, y superior (juegas con los margenes)
7 17 IMAGEN FLOTANTE TIPO ESTATICA, CON REDIRECCION (este lo colocas debajo de </style>) <a href="link AL QUE QUIERES QUE REDIRECCIONE" target="_blank"><img alt="" src="url DE LA IMAGEN FLOTANTE" style="position: absolute; top: 1px; left: 838px;" /></a> imagen flotante estatica con redireccionamiento a un link que quieras, 18 IMAGEN FLOTANTE TIPO ESTATICA EN DONDE QUIERAS (este lo colocas debajo de </style>) <img alt="" src="url DE LA IMAGEN" style="position: absolute; top: 37px; left: 17px;" /> colocas una imagen flotante, que quede estatica completamente, aquí usas tu creatividad dependiendo que desees hacer, mira el ejemplo, fisiokinesis tiene un photosnack normal y coloque los bordes superior e inferior flotantes de forma estatica, y unicamente se ve el efecto photosnack,
8 19 DERECHOS RESERVADOS (este lo colocas debajo de </style>) <script language=javascript> <!-- var message=" Copyright 2012 Star Fusion - Derechos Reservados"; /////////////////////////////////// function clickie4(){ if (event.button==2){ alert(message); return false; function clickns4(e){ if (document.layers document.getelementbyid& &!document.all){ if (e.which==2 e.which==3){ alert(message); return false; if (document.layers){ document.captureevents(event.mousedown); document.onmousedown=clickns4; else if (document.all&&!document.getelementbyid){ document.onmousedown=clickie4; document.oncontextmenu=new Function("alert(message);return false" ) // --> </script> cuando presionas clic derecho en alguna imagen, o en cualquier parte de la web te aparecen opciones para guardar enlaces, copiarlos o ver el formato de programación (inspeccionar elemento) de como fueron realizadas dichas paginas, este código te permite bloquear esas opciones, en lugar de eso puedes colocar un mensaje de Derechos Reservados, y que a la vez le das un valor de seguridad a tu web, para que no tan fácil, copien tus imágenes - aquí solo cambias lo que esta en rojo, que es el mensaje que quieres que aparezca, y luego copias todo el código tal y como esta.
9 Estos unos de los tantos códigos que existen, y los que he utilizado para hacer las páginas de varios clientes, como les decía anteriormente, estos códigos nos dan estructura, pero el diseño y la creatividad la pones tu, no está de más que investiguemos tutoriales, sobre cursos o trucos de photoshop, o bien sacar un curso personalizado y certificado, en unos días estaré alimentando mas esta lista códigos con más trucos. Fue un gusto amigos, y espero que este material les sea de mucha utilidad, no olviden ver los tutoriales en mi canal de Youtube: Ai Edwin de la Cruz y Hacerse Fans de Starfusion Corp Edwin de la Cruz Distribuidor Independiente Mobile Gua: (502) edwindlcg@gmail.com Amarillas Internet Guatemala Skype: edwinai1
Roatan Bilingual School
Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el
Más detallesMaquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
Más detallesJAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E)
APRENDERAPROGRAMAR.COM JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Más detallesDISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesHOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Más detallesConceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Más detallesEL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
Más detallesÍndice general. Pág. N. 1. Capítulo 1. Capítulo 2
Pág. N. 1 Índice general Capítulo 1 Introducción al diseño web con HTML 5 y CSS3 1.1 Las versiones del HTML 1.2 Los navegadores y sus diferencias 1.2.1 Tiempo de carga 1.2.2 Entorno de trabajo 1.2.3 Ventanas
Más detallesAnexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
Más detallesTema. Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS. Material a utilizar.
Tema. Administración de la interfaz de usuario Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS Material a utilizar. Editor de texto para el código HTML Navegador Web Introducción.
Más detallesINSERTAR UN MENÚ DESPLEGABLE
INSERTAR UN MENÚ DESPLEGABLE 0. Ahora vamos a editar el blog para poder tener en la zona superior un menú desplegable. 1. Volveremos a Blogger, vamos a la sección de Plantilla y pulsamos en Editar HTML.
Más detallesCómo se define? selector {propiedad1: valor1; propiedad2: valor2}
Hojas de Estilos Cómo se define? selector {propiedad1: valor1; propiedad2: valor2} Tipos de selector Etiqueta de HTML Identificador De clase sintaxis Nbre_Etiqueta #nbre_identificador.nombredeclase Dónde
Más detallesQUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
Más detallesCSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D)
APRENDERAPROGRAMAR.COM CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesInformática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Box
Más detallesFigura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
Más detallesHojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
Más detallesInformática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Box model El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página
Más detallesDiseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
Más detallesCSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Más detallesExamen de CSS - Cuestionario
Examen de CSS - Cuestionario Qué propiedad de CSS se emplea para definir el espacio entre caracteres? word-spacing white-space letter-spacing Las anteriores respuestas no son correctas Cómo se hace en
Más detallesQUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E)
APRENDERAPROGRAMAR.COM QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Más detallesCatedra de Base de Datos
Catedra de Base de Datos Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán Ciclo Lectivo 2017 Diseño en HTML y CSS Tipología de los sitios web. La estructura de las paginas. Etiquetas
Más detallesCSS Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA CSS Programación de Web Estático Propiedades CSS para listas Las propiedades CSS de listas permiten hacer lo siguiente: - Colocar diferentes marcadores
Más detallesDiseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
Más detallesProducción Digital I. Lic. Wenceslao Zavala 7 de Junio 2018
Producción Digital I Lic. Wenceslao Zavala 7 de Junio 2018 Trabajo Cierre de Cursada Sitio HTML COMPLETO online Adaptable para: Tabletas hasta 768px; Móviles hasta 480px. Debe tener: Slider en alguno de
Más detallesDar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
Más detallesDISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
Más detallesCSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
Más detalles<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Más detallesQué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
Más detallesPROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesInformá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 CSS - Hojas
Más detallesModelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO
Modelo de Cajas Maquetación Web con HTML 5 y CSS 3 Ing. Rasjido Jose UNPA - UACO AGENDA Propiedades de las cajas Tipos de cajas Esquemas de posicionamiento Bibliografía 2 Propiedades de las cajas Cada
Más detallesÍndice del curso. Elementos HTML. Elementos HTML. Elementos de texto. Creación de páginas web básicas. 1.Introducción a Internet. Lenguaje HTML.
Índice del curso 1.Introducción a Internet. Lenguaje HTML. Elementos HTML Creación de páginas web básicas 2.Elementos HTML. 3.Creación y gestión de imágenes con GIMP. 4.Hojas de estilo. 5.Creación de páginas
Más detallesDEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesHTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo
escuela técnica superior de ingeniería informática HTML Estático: Hojas de Estilo Departamento de Lenguajes Noviembre 2004 Usando el atributo STYLE dentro de una etiqueta HTML Esto Esto es es un un párrafo
Más detallesPROGRAMACION III. VISUAL BASIC SALOMON GONZALEZ GARCIA TALLER 1.
TALLER 1. CONTROL LABEL. El control label se usa para mostrar en el formulario form un texto estático en la pantalla es decir que el texto no se puede cambiar por el el usuario. A menos que utilices la
Más detallesEdición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
Más detallesFUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E)
APRENDERAPROGRAMAR.COM FUNCIÓN EVAL JAVASCRIPT. GETELEMENTSBY CLASSNAME. EJEMPLO CÓDIGO CALCULADORA SIMPLE (CU01133E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript desde cero
Más detallesCOLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D)
APRENDERAPROGRAMAR.COM COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
Más detallesEFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesSPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D)
APRENDERAPROGRAMAR.COM SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesConocimientos previos
Tema: Animando un sitio web Ficha de Aprendizaje 12 n Logro Crea e inserta animaciones que permiten que su página web se vea más dinámica. Crea efectos en las imágenes de su página web. @ # Conocimientos
Más detallesCSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar
Más detallesCONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesProducción Digital I. Lic. Wenceslao Zavala 10 de Octubre 2018
Producción Digital I Lic. Wenceslao Zavala 10 de Octubre 2018 NO debe aparecer la barra de desplazamiento abajo, para mover la pantalla de izquierda a derecha. Trabajo Práctico N 5 Sitio Responsive Si
Más detallesImágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.
Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán
Más detallesProducción Digital I. Lic. Wenceslao Zavala 26 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 26 de Septiembre 2018 El ancho de la caja del sitio no debe superar los 1300 px, y si la resolución es más pequeña, debe adaptarse al navegador. Trabajo Práctico
Más detallesLas tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
Más detallesHOJAS 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:
Más detallesCREACION 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
Más detallesMaquetación Web: HTML 5 y CSS
Maquetación Web: HTML 5 y CSS Programa de Estudio Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza
Más detallesContenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div
Más detallesEl capítulo dedicado a CSS consta de dos prácticas, que corresponden a las sesiones de clase de teoría.
DAWEB Práctica 3, día nueve de Marzo 2017 Introducción El capítulo dedicado a CSS consta de dos prácticas, que corresponden a las sesiones de clase de teoría. La primera práctica trata sobre la maquetación
Más detallesFUNDAMENTOS DE ROBÓTICA. Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO
S UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO Centro Universitario UAEM Atlacomulco FUNDAMENTOS DE ROBÓTICA Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS
Más detallesPADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D)
APRENDERAPROGRAMAR.COM PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesIntroducción al desarrollo web. CURSO. idesweb < > IDW-CSS-V3-01 IDW-HI-1
CURSO idesweb < > IDW-CSS-V3-01 Hoy veremos: < CSS3 Básicos > Javier Sánchez Riquelme Estudiante de Ingeniería Multimedia Universidad de Alicante Contacto http://www.xavdesign.tk @xavis Propiedades Border-radius
Más detallesMANUAL CAPACITACIÓN SITIO JOOMLA 1.5
MANUAL CAPACITACIÓN SITIO JOOMLA 1.5 indice editar imagen en photoshop subir archivo imagen subir artículo slide de noticias noticias destacadas menú principal video audio editar imagen en photoshop abrir
Más detallesEl capítulo dedicado a CSS consta de dos prácticas, que abarcan las sesiones de clase de teoría.
DAWEB Práctica 6, 14 de Marzo 2018 Introducción El capítulo dedicado a CSS consta de dos prácticas, que abarcan las sesiones de clase de teoría. La primera práctica trata sobre la maquetación de una página
Más detallesELECTIVA 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
Más detallesLABORATORIO 2. I. Desarrollo
UNIVERSIDAD CAPITÁN GENERAL GERARDO BARRIOS FACULTAD DE CIENCIA Y TECNOLOGÍA LABORATORIO 2 Nombre : Repaso HTML y CSS parte II Ciclo : II 2012 Asignatura : Web y Comercio Electrónico II Catedrático : Ing.
Más detallesCAJA 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
Más detallesCSS 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
Más detallesEn que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
Más detallesTablas Formularios Frames
Tablas Formularios Frames Una tabla nos permite organizar y distribuir los espacios de la página de la manera más optima. Nos puede ayudar a : generar texto en columnas como los periódicos prefijar los
Más detallesCSS 3. Fernando O!ega.
CSS 3 Fernando O!ega fernando.ortega@eui.upm.es Qué falta en CSS 2.1? 2 Selectores Lista completa de nuevos selectores: http://www.w3.org/tr/css3- selectors/ Selector de atributo condicional: Permite seleccionar
Más detallesCSS. Página 1/16. Atributo id #texto1 {font-size: 20px;} <p id= texto1 >Texto</p> p:nth-child(2) { background: # }
CSS. Página 1/16 Introducción CSS p, span{ color: #FF0000; font-size:24px; Pseudoclases
Más detallesIntroducció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!
Más detallesESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesGuía Segundo Periodo. Séptimo. Cristian Hernández 1/1/18 Dreamweaver
Guía Segundo Periodo Séptimo Cristian Hernández 1/1/18 Dreamweaver 1 Colegio Agustiniano Ciudad Salitre Área de Tecnología e Informática Guía de Apoyo 2018 Bimestre: Segundo Grado: Séptimo Docente: Cristian
Más detallesINSTRUCTIVO PARA CREACIÓN DE BLOGS
INSTRUCTIVO PARA CREACIÓN DE BLOGS Introducción Los blogs son un recurso de comunicación para usarse en caso de que sea indispensable contar con un medio informativo autónomo y complementario a los establecidos
Más detallesPROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
Más detallesHOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
Más detallesMENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
Más detalles2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
Más detallesConstruir plantillas modulares
Construir plantillas modulares Introducción Explicación técnica La edición de fichas modulares es igual a la edición de cualquier código HTML o wikitext. La diferencia es que las distintas partes de la
Más detallesProblemas típicos con HTML
Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla
Más detallesZ-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Más detallesMANUAL DE USUARIO DEL ADMINISTRADOR DE PLANTILLAS WEB
MANUAL DE USUARIO DEL ADMINISTRADOR DE PLANTILLAS WEB Con la dirección que se les fue dada como dominio: Colocarla en el explorador Para ir a donde se administra el sitio, dirigirse hasta abajo al final
Más detallesDISEÑOS DE TABLAS CSS. BORDER-SPACING, CAPTION-SIDE, EMPTY- CELLS. COLORES DE FILAS INTERCALADOS ALTERNOS (CU01052D)
APRENDERAPROGRAMAR.COM DISEÑOS DE TABLAS CSS. BORDER-SPACING, CAPTION-SIDE, EMPTY- CELLS. COLORES DE FILAS INTERCALADOS ALTERNOS (CU01052D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesQué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
Más detallesCómo crear una página web con Jimdo. Primeros pasos. www.jimdo.es
Cómo crear una página web con Jimdo Primeros pasos ÍNDICE Introducción. Ventajas de Jimdo 1. Registro de tu página web gratis 2. Inicio de sesión directamente online 3. Personalización del diseño y contenido
Más detallesESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil
ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil UNIDADES CSS UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que
Más detallesCurso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
Más detallesDesarrollo de Aplicaciones Web con PHP. Javier Enciso
Desarrollo de Aplicaciones Web con PHP Javier Enciso Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript
Más detallesModelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
Más detalles1 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
Más detallesProducción Digital I. Lic. Wenceslao Zavala 19 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 19 de Septiembre 2018 Trabajo Práctico N 3 Sitio Navegable entre secciones A partir de la maqueta de HTML realizada en el TP N 2, se deberá tener el sitio con
Más detalles1. 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
Más detalles5 de marzo.
Guía rápida de administración de sitios de gobierno. 5 de marzo 2013 v 1.0 DGTIC/DDS/DI/2013 www.tabasco.gob.mx GUÍA RÁPIDA DE LINEAMIENTOS GRÁFICOS PARA PORTALES INSTITUCIONALES INGRESAR AL SISTEMA Ruta
Más detallesMódulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN
Módulo PRESTASHOP DISEÑO FÁCIL PERSONALIZACIÓN DE TU PLANTILLA GUÍA DE INSTALACIÓN Y DE CONFIGURACIÓN ÍNDICE I) Instalación (v1.6)...3 II) Instalación (v1.5)...5 III) Añadir una imagen...7 IV) Añadir un
Más detallesGUIA CÓMO CREAR PLANTILLAS PARA
GUIA CÓMO CREAR PLANTILLAS PARA EMAIL Emisión: Agosto 2016 Esta guía ofrece prácticas básicas para el diseño y programación de un email en base a los estándares actuales. Es recomendable tener conocimiento
Más detalles1 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
Más detallesPROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D)
APRENDERAPROGRAMAR.COM PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D) Sección: Cursos Categoría: Tutorial básico del programador
Más detalles<body> <a href="http://www.cinenganos.com"><img src="imagenes/imagen01.jpg" width="250" height="354" /></a> </body>
3. CSS en imágenes 3.1 Bordes El uso de imágenes con CSS permite no sólo reforzar el modelo de caja inherente a los estilos, sino reforzar la estética de lo que podría, en principio, parecer hasta limitante
Más detallesPROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]
PROPÓSITOS Unidad 1 Reconocer el funcionamiento de internet y sus características. Interpretar el concepto de ISP, HTTP y MySQL Reconocer y aplicar criterios de adaptación del ambiente de trabajo a las
Más detallesResumen del Manual de CSS. Resumen CSS. Este es un resumen de lo visto en el manual de CSS de Aprende-Web.
Resumen CSS Este es un resumen de lo visto en el manual de CSS de Aprende-Web. http://aprende-web.net/css Selectores y otros elementos. Selectores básicos * : Selector universal. Afecta a toda la página.
Más detallesDISPLAY ESTANDAR. Imagenes Archivos.gif y.jpg Peso máximo 70kb Formatos IAB Cuidar la nitidez y legibilidad. HTML5 Archivos.
SPECS DISPLAY ESTANDAR Imagenes Archivos.gif y.jpg Peso máximo 70kb Formatos IAB Cuidar la nitidez y legibilidad Versiones Recomendadas HTML5 Archivos.ZIP Backup Peso máximo 70kb Duración máxima 30 segundos
Más detalles