Presentado por:

Frank A. Soria Serna

amarillascusco@hotmail.com

+

Versión 1.0

¿ 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

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.

¿ AmaWebs provee servicio de diseño?

Aplicaciones que usamos en Amawebs

Pero todas siguen siendo igual, de alguna

manera…

…Ahora, vamos a cambiar un poco mas…!!!

HTML es el lenguaje con el que se definen las páginas web.

¿ Que es HTML ?

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.

¿ Que es CSS ?

+ = PáginaWeb

Empezamos

Ingresaremos nuestro codigo

Y que codigo pondremos?Este es un ejemplo de codigo CSS

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

¿ 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

• Cabecera

• Menú principal

• Cuerpo principal

• Fondo de pagina

• Menú bar

• Sombras de pagina

• Pie de pagina

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

¿ 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);

¡ Colocamos el fondo que nos guste !

Resultado

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

¡ Ya no tenemos sombras !

Resultado

¿ 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 = .mainleftFondo = background:none;

Color de fondo = background-color:#fff;

Nota: Por default es fondo blanco = #fffPero nosotros podemos cambiarlo

al color que nos guste Ejemplo : Gris = #dadada

¡ Desapareció la barrita o sombra !

Resultado

¿ 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 !

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

¡ Le quitamos el fondo de imagen del boton !

Resultado

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

¡ Le pusimos un color solido… muy bien !

Resultado

http://mejores.amawebs.com

¿ Y como puede quedar nuestra pagina Amawebs ?

Veamos un ejemplo..!!

Probando varios códigos se puede lograr mucha

variedad.

Recomendación

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.

Hábito 2: Comenzar con un fin en mente

Windows 8 – Metro Style

Construye tus Layouts

Herramientas Extras

http://kuler.adobe.com

http://bgmaker.ventdaval.com

http://www.htmlya.com.ar

http://www.cssya.com.arhttp://www.templatemonster.com

http://www.iconfinder.com

En estas paginas podrán encontrar información, utilidades, iconos, colores, códigos, fondos, templates, etc.

Frank A. Soria Serna

E-mail : amarillascusco@hotmail.com

Director Regional Cusco

Amavoip : 9686869Facebook : Directorio Amarillas Cusco

GRACIAS…!!!

+

Versión 1.0