Este documento explica qué es AmaWebs, un software constructor de páginas web que permite crear, publicar y mantener sitios en internet. Además, describe cómo usar códigos CSS para personalizar elementos como el fondo, menús, bordes y más en las páginas creadas con AmaWebs. Finalmente, incluye un ejemplo de página personalizada resultante de aplicar varios códigos CSS.

2. ¿ Qué es AmaWebs?
AmaWebs es un Software Constructor
de Páginas Webs que le permitirá crear,
publicar y mantener su sitio en internet.
Este Software ha sido especialmente
diseñado para Anunciantes Calificados
de AmarillasInternet.com
¿ AmaWebs provee servicio de diseño?
Nuestro constructor está diseñado para que cualquier
persona, con conocimientos básicos de computación,
pueda crear su propio Sitio Web; por eso colocamos a
tu disposición la posibilidad de elegir entre centenares
de diseños creados por profesionales altamente
calificados.

3. Aplicaciones que usamos en Amawebs

4. Pero todas siguen siendo
igual, de alguna manera…

5. ¿ Que es HTML ?
HTML es el lenguaje con el
que se definen las páginas
web.
¿ Que es CSS ?
CSS, es una tecnología que nos permite
crear páginas web de una manera más
exacta. Gracias a las CSS somos mucho
más dueños de los resultados finales de
la página.
Página
Web

6. Empezamos
Ingresaremos nuestro codigo
Vamos a enseñarle a nuestra Amawebs lo que
deseamos que haga, paso a paso, mediante CSS.
Objetivo :
Hacer nuestras amawebs distintas unas de otras
Y que codigo pondremos?
Este es un ejemplo de codigo CSS

7. ¿ Donde y como instalaremos
nuestro código CSS ?
Todo los lenguajes de programación
tiene una llave de entrada y una llave
de salida, es decir que para
enseñarle a nuestro Amawebs sobre
CSS, primero tenemos que decirle
que vamos a usar código CSS.
Ejemplo
o Abre la llave de CSS
o Este es el nombre del selector que
vamos a modificar
o Los selectores, también tienen llave
de entrada y salida
o Nuestro codigo CSS, esta dentro
o Y cerramos nuestro CSS

8. Pero antes, Conozcamos nuestra Amawebs
Nuestra Amawebs, esta formada por partes, las
cuales cada uno tiene un nombre en CSS, por
ejemplo: Cabecera = #Header{},
Menú Principal = #main .menu{}
• Cabecera
• Menú principal
• Cuerpo principal
• Fondo de pagina
• Menú bar
• Sombras de pagina
• Pie de pagina

9. ¿ Como cambiamos el fondo de la pagina web ?
Este fragmento de código CSS, modificara el fondo de
nuestra Amawebs; recuerden que debe ingresar
dentro de las llaves CSS, y no olvidar las {}
contenedor de pagina = body{}
fondo imagen = background-image:url (url de imagen);
Resultado
¡ Colocamos el fondo que nos guste !

10. ¿ Como borramos los bordes sombreados ?
Los bordes sombreados en realidad son el fondo de
imagen, es por eso que utilizaremos el código
background y darle valor NONE , no usar imagen.
Cabecera contenedor = #headerContainer{}
Cuerpo principal = #mainContainer{}
Pie de pagina = #footContainer{}
Y borramos fondo imagen = background-
image:none;
Resultado
¡ Ya no tenemos sombras !

11. ¿ Como borramos la sombra que tiene el menu bar?
Este caso es algo especial, ya que si nuestro menu
bar, esta a la izquierda, en CSS se llamará «.mainleft»
y si esta a la derecha este se llamará «.mainright».
Principal izquierdo = .mainleft
Fondo = background:none;
Color de fondo = background-color:#fff;
Nota: Por default es fondo blanco = #fff
Pero nosotros podemos cambiarlo
al color que nos guste
Ejemplo : Gris = #dadada
Resultado
¡ Desapareció la barrita o sombra !

12. ¿ Como borramos los botones del Menú Bar ?
El nombre que tienen los botones en CSS es «#main .icon1»,
Donde 1 es el numero del botón, es decir, deben copiar y pegar
las mismas propiedades, cambiando el 1, por el 2, 3 y 4,
De esta manera se aplicara a todo los botones del menú bar.
Aunque podemos borrar los botones de menú
bar, este aun esta presente al momento de
llenar información, por lo que les recomiendo
insertar una tabla.
Con el uso de nuestra herramienta TABLA
insertamos una tabla, de 900px de ancho y
550px de alto, y color de fondo blanco.
Resultado
¡ Trabajamos llenando información
dentro de nuestra tabla !

13. ¿ Como cambiamos de color o de fondo de mi
menú principal ?
En nuestro menú principal, podemos cambiar el fondo que
tienen todas las plantillas, por uno personalizado, o
desaparecerlo y tenerlo solo como texto, también podemos
ponerle un color solido de fondo.
Si deseamos poner una imagen a nuestro botón, ingresamos el
url de la imagen dentro de las () , o si deseamos quitarle el fondo
usaremos - background-imagen:none;
Resultado
¡ Le quitamos el fondo de
imagen del boton !

14. ¿ Como cambiamos de color o de fondo de mi
pie de pagina ?
Nuestro pie de pagina en CSS, se llama «#foot».
Es importante saber modificar nuestro FOOT, porque tiene que
tener relación a los colores y fondos usados de nuestra Amawebs.
Si deseamos poner una imagen a nuestro foot, ingresamos el url
de la imagen dentro de las () , o si deseamos quitarle el fondo
usaremos - background-imagen:none;
Resultado
¡ Le pusimos un color
solido… muy bien !

15. ¿ Y como puede quedar nuestra pagina Amawebs
?
Veamos un ejemplo..!!
Probando varios códigos se
puede lograr mucha
variedad.
http://mejores.amawebs.com

16. Recomendación
Hábito 2: Comenzar con un fin en mente
El segundo hábito es fundamental porque para llevar a cabo cualquier cosa que
queramos primero debemos de tener un fin en mente pues para querer hacer algo
primero hay que saber lo que uno persigue para saber como lo va a obtener y que
beneficios o resultados saldrán de eso.
Construye tus Layouts
Windows 8 – Metro Style

17. Herramientas Extras
En estas paginas podrán encontrar información, utilidades,
iconos, colores, códigos, fondos, templates, etc.
http://kuler.adobe.com http://www.iconfinder.com http://www.htmlya.com.ar
http://www.templatemonster.com http://bgmaker.ventdaval.com http://www.cssya.com.ar