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.

Slides:



Advertisements
Apresentações semelhantes
Atividade 5 Objetivos: Conhecer as regras CSS “width”, “margin-left:auto” e “margin-left:right” e verificar que elas não funcionam no IE a menos que coloquemos.
Advertisements

TRABALHAR COM O POWERPOINT
WINDOWS Sistemas Operacionais PLATAFORMA TECNOLÓGICOS
A17 – Primeiros passos na utilização das TIC
Criar uma nova apresentação
Imagens e elementos multimédia
COMUNIDADE VIRTUAL PRÓ-MENINO ENTRANDO EM UMA COMUNIDADE FECHADA.
Encontro Construindo um Web Site com o Nvu
PUCRS Introdução a gráficos.
Linguagem PHP Prof.: Sergio Pacheco Prof.: Sergio Pacheco 1 1.
PowerPoint 6ª série.
Templates/ Modelos Templates são documentos que podem ser usados como um modelo para outras páginas com o mesmo lay-out, ou seja, é uma espécie de frame.
Links Rollover image Tabelas
CRIAÇÃO Antes de criar sua página na pbwiki, é necessário que tenha uma conta de no gmail. Se não tiver, crie uma. Depois: -Acesse:
Aula 8 - Sumário Inserir painel rolante.
Aula 2 - Sumário Inserir texto numa página web
7 - Criação de Páginas Web
Personalizando Tabelas
Como fazer um trabalho em POWERPOINT
Orientações para PowerPoint
Sistema Operativo em Ambiente Gráfico
Web: criação de páginas
TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO
Estamos em Obras!! Construindo o conceito de web 2.0.
HTML O que é? HiperText Markup Language
Tecnologias de Informação e Comunicação
Formatação de parágrafo
Colocando botões e ações
Aula02 TAGS Estrutura de uma página html Como salvar página web
Avaliação Microsoft Word
Dicas de Photoshop Aula 1.
INTRODUÇÃO À INFORMÁTICA – Aula 5
Layout.
Aplicações Pedagógicas da Aquisição e Tratamento de Imagem
Manual de Instalação do Windows 8
LOGIN Para acessar o sistema, digite em seu browser:
Tecnologias de Informação e Comunicação
POWER POWER POINT POINT.
Cascading Style Sheets Folhas de Estilo em Cascata
Pequena revisão e alguns conselhos
MICROSOFT Windows XP.
7 - Criação de Páginas Web
Escola de Engenharia de Piracicaba Sistemas de Apoio a Decisão
DESENVOLVIMENTO WEB I Usando listas para menus. Uma lista NÃO-ORDENADA... Curso Técnico de Informártica Duração de dois anos Formação Técnica Estágio.
WIC’ 2015-I WorkShop para o Ingressante em Ciência da Computação Curso de Desenvolvimento para WEB – HTML5.
APRESENTANDO O TECLADO
Curso de Aprendizado Industrial Desenvolvedor WEB Disciplina: Programação Orientada a Objetos I Professora: Cheli Mendes Costa Classes e Objetos em Java.
Histórias em quadrinhosHistórias em quadrinhosHistórias em quadrinhosHistórias em quadrinhos.
Referência Rápida do Lync 2013 para o Office 365 © 2012 Microsoft Corporation. Todos os direitos reservados. Com o Lync, pode iniciar uma colaboração sem.
Unidade 6 – Formulários HTML Prof.: Henrique Santos
Na barra de mensagens, clique em Habilitar Edição,
Construindo tabelas NTE-ESTRELA.
Aula Prática 4 Monitoria IP/CC (~if669).
TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo.
UNIDADE 4: Processamento de texto
7 - Criação de Páginas Web
Internet e Programação Web
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte I.
O que é CSS? O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascatas é uma documentação que define as regras de formatação que serão aplicadas aos.
CSS ETEC Vasco Antônio Venchiarutti - Extensão na EE A. S. Gandra Professor: Robson / Madureira Disciplina: Desenvolvimento e Design de Web Sites II Turma:
Aula 2 Conhecimento básico do Windows (ícones, menus,pastas, arquivos); Aprender a usar pen drive e fazer a transferência de fotos de câmera digital.
HTML Estrutura e Sintaxe.
Como usar HTML em seus anúncios no MercadoLivre
Aula sobre o Power Point
TECNOLOGIA DA INFORMAÇÃO
Programação Orientada a Objetos Prof. Rafael Silva.
1 Prof. Esp. Andrew Rodrigues HTML.
Clique duas vezes sobre a faixa para ativar a janela de escolha da camada. Digite o número da camada para ativa-la. Quando você transforma o plano de fundo.
TV de Bolso TV de Bolso apresenta Tutorial: editando seu vídeo no Movie Maker.
Aplicativos para Web Prof.ª Erika Miranda Prof. Wolley.
Transcrição da apresentação:

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…

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ágina Web

Começamos Adicionamos 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. Exemplo o 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 Cabeceira Menú principal Menú principal Corpo principal Corpo principal Fundo de pagina Fundo de pagina Menú bar Menú bar Sombras de pagina Sombras de pagina Rodapé da 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 =.mainleft Fundo = background:none; Cor de fundo = background-color:#fff; Nota: Por defeito o fundo branco = #fff Mas podemos alterar a cor para a que mais gostarmos Exemplo : 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

¿ 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 kuler.adobe.com Nestas paginas vai encontrar informação, utilidades, icones, cores, códigos, fundos, templates, etc.