CODIGOS AMAWEBS

HTML & CSS

Hola Colega Amarillo!, En este documento encontraras una serie de Cdigos 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 empeo, diseo & creatividad que utilices.

OJO! Es muy importante que antes de usar los cdigos, escribas el siguiente para aperturar el lenguaje de programacin:

y cuando termines de colocar todos los cdigos, debes de cerrar el lenguaje de programacin:

OBSERVA LOS VIDEOS DE INTRODUCCIN (presiona Ctrl +clic para seguir el vnculo):

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

2). http://www.youtube.com/watch?v=rxWpReesmYU

Aqu te dejo los Cdigos:

No. Tema Codigo HTML / CSS Descripcin 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 pequea ya que

el codigo lo repite

PRESIONA CTRL + CLIC EN CADA UNA DE

LAS IMGENES Y TE LLEVARA AL

VIDEOTUTORIAL DE EXPLICACIN

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 TAMAO 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 tamao que tu quieras, y con alta

resolucin 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

opcin height: 170pxque es la altura - el de la imagen tiene un

height: 320px ya que lo acople al tamao 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 tamao pequeo ), 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, tamao, 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, tamaos,

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 INFORMACIN DEL CUERPO DE TU AMAWEB

#main .text { margin-left: 0px; margin-top: -15px; }

ajustas toda la informacin 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 programacin

(inspeccionar elemento) de como fueron realizadas dichas paginas, este cdigo 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 fcil, copien

tus imgenes - aqu solo cambias lo que esta en rojo, que es el

mensaje que quieres que aparezca, y luego copias todo el

cdigo tal y como esta.

Estos unos de los tantos cdigos que existen, y los que he utilizado para hacer las pginas de varios clientes, como les deca anteriormente, estos cdigos nos dan estructura, pero el diseo y la creatividad

la pones tu, no est de ms que investiguemos tutoriales, sobre cursos o trucos de photoshop, o bien sacar un curso personalizado y certificado, en unos das estar alimentando mas esta lista cdigos con

ms 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