Embed Size (px)
Citation preview
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 : [email protected] Regional Cusco
Amavoip : 9686869Facebook : Directorio Amarillas Cusco
OBRIGADO…!!!
+
Versão 1.0
