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






descargar 62.44 Kb.
títuloHola 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
fecha de publicación12.07.2015
tamaño62.44 Kb.
tipoDocumentos
l.exam-10.com > Derecho > Documentos

OBSERVA LOS VIDEOS DE INTRODUCCIÓN (presiona Ctrl +clic para seguir el vínculo):

1). http://www.youtube.com/watch?v=Pk5oTkoLQys

2
PRESIONA CTRL + CLIC EN CADA UNA DE LAS IMÁGENES Y TE LLEVARA AL VIDEOTUTORIAL DE EXPLICACIÓN
). http://www.youtube.com/watch?v=rxWpReesmYU

Aquí te dejo los Códigos:


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

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






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






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






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:none;
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






14

IMAGEN FLOTANTE TIPO SCROLL, CON REDIRECCIONAMIENTO

(este lo colocas debajo de )



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 {
background:none;
}
#main .icon2 {
background:none;
}
#main .icon3 {
background:none;
}
#main .icon4 {
background:none;
}





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)






17

IMAGEN FLOTANTE TIPO ESTATICA, CON REDIRECCION

(este lo colocas debajo de )



imagen flotante estatica con redireccionamiento a un link que quieras,






18

IMAGEN FLOTANTE TIPO ESTATICA EN DONDE QUIERAS

(este lo colocas debajo de )



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, www.fisiokinesis.com.gt






19

DERECHOS RESERVADOS

(este lo colocas debajo de )



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.






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 www.facebook.com/starfusiongt .







Edwin de la Cruz

Distribuidor Independiente

Mobile Gua: (502) 4123-5050

E-mail: edwindlcg@gmail.com

Amarillas Internet Guatemala

www.facebook.com/amarillasedwin86

Skype: edwinai1

Añadir el documento a tu blog o sitio web

similar:

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 iconPracticando el poder del ahora
«Quizá solamente una vez cada diez años, incluso una vez cada generación, surge un libro como El Poder del Ahora. Hay en él una energía...

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 iconHoja de repaso 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 iconAula otras posibilidades. Actividades de música
«ver por ver». Puedes incluso revisar algún dato en enciclopedia o libro. No está demás que puedas disponer de alguna ficha o documento...

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 icon3. conceptos esenciales
«certeza del derecho». En todos los ámbitos (en la publicidad y en su aplicación). Representa la seguridad de lo que se conoce o...

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 iconResumen Este sistema fue creado con el fin de facilitar de una mejor...

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 iconHola jovenes. Les anexo un documento que deben leer como apoyo para...

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 iconEl Libro De Urantia Página 2012 documento 188
«Este cuerpo es tuyo para que hagas lo que creas conveniente. Yo y mis soldados permaneceremos aquí para asegurarnos de que nadie...

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 iconLa Nixie Machine realizada por Frank Buchwald para M. A. D. Gallery...
«ingeniería pesada», tal y como él mismo lo denomina y del que ya sentó las bases con su serie Machine Lights. Su impresionante diseño...

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 iconImpuesto al valor agregado 9

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 iconEn los siguientes textos encontrarás información de gran utilidad...






© 2015
contactos
l.exam-10.com