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:

<style media="screen" type="text/css">

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

</style>
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

COLOCA UN FONDO A TU
AMAWEBS

Codigo HTML / CSS

body {
background:url(URL DE LA IMAGEN)repeat 0 0;
}

Descripcin
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
Imagen

#headerContainer{
background-image : none ;
}
QUITAR ORILLAS
#mainContainer{
LATERALES, SUPERIOR E
background-image : none ;
INFERIOR DE LA PLANTILLA }
#footContainer{
background-image : none ;
}

#header {
background:url(URL DE LA IMAGEN) no-repeat;
height: 170px;
PERSONALIZA TU CABECERA }
DEL TAMAO QUE QUIERAS #header .title h1 {
font-size: 0px;
}

#headerContainer {
SUBE Y BAJA EL CUERPO DE width: 1000px;
TU AMAWEBS A PARTIR DEL height: 170px;
MENU DE BOTONES
background: transparent;
}

Con este quitas los marcos u orillas

superior, lateral e inferior

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

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

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

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

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

10

QUITA LA IMAGEN DE PIE

QUE TRAE LA AMAWEBS

COLOCA UN BOTON
PERSONALIZADO

FUENTE DEL MENU DE

BOTONES

#foot {
background-image : none ;
width: 1000px;
height: 150px;
}

#main .menuH .bt {

background:url(URL DE LA IMAGEN)repeat 0 0;
height: 37px;
width: 200px;
text-align: center;
}
.menuH {
background-color: #000000;
}

#main .menuH a {
padding-top: 10px;
font-family: LuzSans-BoldItalic;
font-size: 10px;
text-align: center;
padding-left: 0px;
}

aqu puedes quitar la imagen del

pie de amawebs completamente y
puedes jugar con la altura (height)

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

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;
}

12

.mainright {
QUITA LA LINEA QUE SE VE,
background:none;
CUANDO COLOCAS UNA
background-color: #ffffff;
TABLA ANCHA Y EL FONDO
}

13

#foot {
PERSONALIZA TU PIE DE
background:url(URL DE LA IMAGEN)repeat 0 0;
PAGINA CON UNA IMAGEN
}

con este personaliza el tipo de letra

del pie de tu amaweb, tamaos,
colores, etc, ver el tutorial

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;

cambias de imagen al pie de tu

amawebs

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>

15

#main .icon1 {
background:none;
}
#main .icon2 {
background:none;
QUITA LOS BOTONES
}
LATERALES DE LA PLANTILLA #main .icon3 {
background:none;
}
#main .icon4 {
background:none;
}

16

#main .text {
AJUSTA LOS MARGENES DE
margin-left: 0px;
LA INFORMACIN DEL
margin-top: -15px;
CUERPO DE TU AMAWEB
}

colocas una imagen flotante, que

vaya corriendo mientras corres la
pagina hacia abajo, y que al dar clic
redireccione a un link que quieras

quitas completamente los botones

que traen las plantillas de amawebs
laterales

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

18

IMAGEN FLOTANTE TIPO

ESTATICA, CON
REDIRECCION
(este lo colocas debajo de
</style>)

IMAGEN FLOTANTE TIPO

ESTATICA EN DONDE
QUIERAS
(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>

<img alt="" src="URL DE LA IMAGEN" style="position: absolute;

top: 37px; left: 17px;" />

imagen flotante estatica con

redireccionamiento a un link que
quieras,

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
</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 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