Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Revisão WebDesign
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Resumo - Web Design
Website é a coleção unificada de páginas relacionadas.
Hiperlinks são ligações entre as páginas de um site e também entre websites.
FAPESP = registro.br: Controla registros de domínios no Brasil. .com.br
Internic – Registro de sites com domínio .com
– Páginas estáticas: o conteúdo está inserido dentro do arquivo HTML armazenado no
servidor, que pode conter ainda JavaScript, Flash e CSS.
– Páginas dinâmicas: o conteúdo é criado dinamicamente por um script ou API, exigindo
processamento no servidor, o qual gera uma página estática para ser enviada ao cliente. –
Utiliza linguagens de programação para conexão ao BD (Banco de Dados), como
ColdFusion, PHP, JSP, ASP, ASP.Net, ou scripts específicos, como Phyton, Perl, CGI, C#,
Java, etc.
DHTML (Dynamic HTML): páginas HTML com JavaScript.
O HTML é uma linguagem de marcação, que serve para desenvolver páginas web,
utilizando tags que informam ao browser como exibir a página. Elas abrem e fecham.
Os atributos são normalmente usados para identificar um tag ou para complementar sua
função, ele deve estar sempre entre aspas. (os tags de fechamento não possuem atributos).
O html é dividido em duas partes, o head e o body.
<br> quebra de linha / <p> parágrafo / <div> bloco de texto / <pre> Texto pré-formatado
<tt> monoespaçado
Links
Os links são usados para direcionar o usuário para partes da página atual ou outras páginas
sendo do site ou não. <a> - tag de definição / “href” - atributo de destino. Ex.: <a href =
”http://site.com.br”> nome do site </a>. Adicionando o atributo target = “blank/new” diz se a
nova página deve abrir por cima da atual ao não.
Os links internos apontam para pontos específicos dentro da mesma página web, chamados
âncoras e definidos com o uso de um id no tag destino. Assim, no link o id é referenciado no
href com a utilização de uma # . Ex.:<a href = ”#topo”> voltar ao topo</a>
Imagens
As imagens são incluídas através do tag <img src=”foto.png”>
Ex.: <img src = “imagem.jpg” alt=”imagem title = “imagem” width = “5” height= “5”>
CSS
Conhecido como “folhas de estilo”. Ele tem a vantagem de separar a forma da estrutura, são
puramente textos, não exigem plugins e facilitam a codificação e manutenções posteriores.
Uma regra CSS é composta de três partes: seletor, propriedade e valor.
As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:
Inline (no próprio tag) - <body><p style = “font-family: arial”> texto </p></body>
Embedded (dentro do head) - <head><style type = “text/css”> p{font-family: arial;}
</style></head>
Linked (através da tag link a um arquivo externo) - <head><link rel=”stylesheet”
href=”estilo.css type= “text/css”></head>
Imported (através de import a um arquivo externo) - <head><style type = “text/css”> @impot
url(“estilo.css”); body{font-family: arial;} </style></head>
As propriedades devem estar entre chaves. Podem existir duas ou mais propriedades por
seletor, desde que separadas por um “;”.
.classe1 {font-family: arial;} - pode ser aplicada a muitas tags diferentes
p.classe1 {font-family: arial;} - só pode ser aplicada à tag <p>
As pseudo-classes são seletores que influenciam o comportamento da tag “A” - a:
link/visited/hover/active font-family: arial;
Seletores do tipo ID, deve ser usado apenas uma vez na página para definir um único
elemento. Muito utilizados para organizar seletores contextuais criando uma seqüência
lógica de atributos; permitem também que funções JavaScript identifiquem um objeto
exclusivo na tela.
Caixas de exibição de tags de bloco apresentam características como: borda, margens,
padding (margens internas), background, etc. As caixas são formatadas, estilizadas e
dispostas pelas CSS segundo uma sequência, onde cada elemento HTML ocupa uma caixa.
padding: define o espaço entre a borda da caixa (box) e seu conteúdo interno
margin: define a margem, o espaço em volta da caixa (box), da borda para fora
O float é um atributo que faz os objetos flutuarem em relação a outros; seus valores são
none, left e right, sendo none o default.
O atributo clear provoca uma quebra no efeito do float; seus valores são none, right, left e
both. fazendo com que, se houver um elemento com float antes do que recebe o clear, o
elemento com clear apareça depois do anterior, ignorando o float.
Posicionamento Estático: Mantém a posição normal do elemento no documento. Não
suporta propriedades left, top, right, e botom. <style> div {position: static;} </style> (no head)
Posicionamento Absoluto: Posiciona o objeto em qualquer lugar à partir de coordenadas:
top, right, bottom e left.
Posicionamento Relativo: Posiciona o objeto a partir de coordenadas levando em
consideração a posição do objeto “pai”.
Empilhamento de camadas: Permite que objetos sejam empilhados utilizando o atributo z-
index.
As Listas são muito leves, práticas, semanticamente corretas, e tem múltiplas possibilidades
(vertical e horizontal) se adaptando facilmente a qualquer layout.
Class é com . (ponto)
Id é com # (cerquilha)Materiais relacionados
352 pág.
138 pág.
136 pág.
Perguntas relacionadas
Compartilhar