o que é a amawebs? a amawebs é um software constructor de páginas webs que lhe permite criar,...

Apresentado por:

Frank A. Soria Serna

amarillascusco@hotmail.com

+

Versão 1.0

O que é a AmaWebs?A AmaWebs é um Software Constructor de Páginas Webs que lhe permite criar, publicar e fazer manutenção da sua pagina na internet. Este Software foi desenhado especialmente para os Anunciantes Qualificados da AmarelasInternet.com

O Nosso construtor está desenhado de forma a que qualquer pessoa, com conhecimentos básicos de computação, possa criar a sua própria Pagina Web; por isso colocamos à sua disposição a possibilidade de escolher entre centenas de desenhos criados por profissionais altamente qualificados.

A AmaWebs fornece serviço de desenho?

Aplicações que usamos na Amawebs

Mas todos seguem sempre iguais, de alguma forma…

…Agora, vamos alterar um pouco …!!!

HTML é uma linguagem com a qual se definem as páginas web.

¿ O que é HTML ?

CSS, é uma tecnologia que nos permite criar páginas web de uma forma mais exata. Graças aos CSS somos muito mais donos dos resultados finais da página.

¿ O que é CSS ?

+ = PáginaWeb

ComeçamosAdicionamos o nosso

codigo

E que código colocamos?Este é um exemplo de código CSS

Vamos ensinar à nossa Amawebs o que desejamos que faça, passo a passo, mediante CSS.

Objetivo :Construir as nossas amawebs distintas umas das outras

¿ Onde e como colocamos o nosso

código CSS ?Todas as linguagens de programação têm uma chave de entrada e uma chave de saída, isto é, para ensinar ao nosso Amawebs sobre CSS, primeiro temos que lhe dizer que vamos usar códigos CSS.

Exemploo Abre a chave de CSS

o Este é o nome do seletor que vamos modificar

o Os seletores, também têm chave de entrada e saída

o O nosso codigo CSS, está dentro

o E encerramos o nosso CSS

• Cabeceira

• Menú principal

• Corpo principal

• Fundo de pagina

• Menú bar

• Sombras de pagina

• Rodapé da pagina

Mas antes, vamos conhecer o nosso Amawebs O Nosso Amawebs é formado por partes. Cada uma destas partes tem um nome no CSS, por exemplo:

Cabeceira = #Header{}, Menú Principal = #main .menu{}

¿ Como trocamos o fundo da pagina web ?Este fragmento de código CSS, modifica o fundo do

nosso Amawebs; lembre-se que o deve inserir dentro das chaves CSS, e não esquecer as {}

corpo da pagina = body{}fundo imagem = background-image:url (url de imagen);

¡ Colocamos o fundo que desejamos!

Resultado

¿ Como apagamos as bordas sombreadas ?

As bordas sombreadas na verdade são o fundo da imagem, e é por isso que vamos utilizar o código background e lhe

dar valor NONE, para não ter imagem.

Cabeceira = #headerContainer{}Corpo principal = #mainContainer{}

Pé de pagina = #footContainer{}E apagamos o fundo imagem = background-

image:none;

¡ Já não temos sombras !

Resultado

¿ Como apagamos a sombra que tem a barra de Menus ?Este é um caso especial, já que, se a nossa barra de Menus

estiver à esquerda, no CSS se chamará «.mainleft» e se estiver à direita chamar-se-á «.mainright».

Principal esquerdo = .mainleftFundo = background:none;

Cor de fundo = background-color:#fff;

Nota: Por defeito o fundo branco = #fffMas podemos alterar

a cor para a que mais gostarmosExemplo : Cinza = #dadada

¡ Desapareceu a barra ou sombra !

Resultado

¿ Como apagamos os botões da Barra de Menus ?No CSS os botões têm o nome de «#main .icon1»,

Em que 1 é o numero do botão, isto é, deve copiar e pegar as mesmas propiedades, trocando o 1, pelo 2, 3 e 4,

Isto aplica-se a todos os botões da barra de menus.

Embora possamos apagar os botões da barra de menus, eles estarão presentes no momento de dar informação, por isso recomendo a inserção

de uma tabela.

Usando a nossa ferramenta TABLA inserimos uma tabela, de 900px de largura e 550px de

altura, e cor de fundo branco.

Resultado ¡ Trabalhamos preenchendo

informação dentro da nossa tabela !

¿ Como trocamos a cor de fundo do menú principal ?

No nosso menú principal, podemos trocar o fundo de todos os modelos, por um fundo personalizado, ou apagar e substituir apenas por texto, também podemos lhe dar uma cor sólida.

Se desejarmos colocar uma imagem§ no nosso botão, inserimos o url da imagem dentro das () , ou se desejarmos eliminar o

fundo usamos - background-imagen:none;

¡ Eliminamos o fundo da imagem do botão !

Resultado

¿ Como trocamos a color de fundo do rodapé da pagina?

No CSS o rodapé da pagina chama-se «#foot».É importante saber como modificar o nosso FOOT, porque tem que haver relação entre as cores e fundos usados no nosso Amawebs.

Se desejarmos colocar uma imagem no nosso rodapé , inserimos a url da imagem dentro das () , ou se desejarmos eliminar o

fundo usamos - background-imagen:none;

¡ Colocamos uma cor sólida… muito bem !

Resultado

http://mejores.amawebs.com

¿ E como pode ficar a nossa pagina Amawebs ?

Vejamos um exemplo..!! Testando e usando diversos

códigos pode-se conseguir uma grande variedade.

Recomendação

O segundo hábito é fundamental porque para levar a cabo qualquer coisa que desejamos, primeiro devemos de ter o resultado em mente, pois para querer fazer algo primero tem que saber o que pretende para depois saber como o vai conseguir e quais os beneficios ou resultados que vai ganhar com isso.

Hábito 2: Comece com uma ideia em mente

Windows 8 – Metro Style

Construa os seus Layouts

Ferramentas 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

Nestas paginas vai encontrar informação, utilidades, icones, cores, códigos, fundos, templates, etc.

Frank A. Soria Serna

E-mail : amarillascusco@hotmail.comDirector Regional Cusco

Amavoip : 9686869Facebook : Directorio Amarillas Cusco

OBRIGADO…!!!

+

Versão 1.0