Embed Size (px)
Citation preview
¿ 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 : [email protected]
Director Regional Cusco
Amavoip : 9686869Facebook : Directorio Amarillas Cusco
GRACIAS…!!!
+
Versión 1.0
