Post on 01-Apr-2021
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>
OBSERVA LOS VIDEOS DE INTRODUCCIÓN (presiona Ctrl +clic para seguir el vínculo):
1). http://www.youtube.com/watch?v=Pk5oTkoLQys
2). 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
PRESIONA CTRL + CLIC EN CADA UNA DE
LAS IMÁGENES Y TE LLEVARA AL
VIDEOTUTORIAL DE EXPLICACIÓN
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 </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 { 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 </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, 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 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