Aula2 - Curso Web-Design - ETECA Camargo Aranha

1.833 visualizações

Publicada em

Aula 2 do Curso de Web-design e Computação Gráfica da ETECA Camargo Aranha - São Paulo.

Professor Felipe Volpato

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.833
No SlideShare
0
A partir de incorporações
0
Número de incorporações
992
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula2 - Curso Web-Design - ETECA Camargo Aranha

  1. 2. <ul><li>Felipe Volpato </li></ul><ul><li>Formado em Publicidade e Propaganda </li></ul><ul><li>Assistente de Arte </li></ul><ul><li>Professor há 6 anos </li></ul><ul><li>E-mail para contato: [email_address] </li></ul><ul><li>Blog: http://volphousedesign.wordpress.com ou </li></ul><ul><li>http://volpatotutoriais.wordpress.com </li></ul>
  2. 3. <ul><li>Conteúdo da aula: </li></ul><ul><ul><li>Arquitetura de Informação </li></ul></ul><ul><ul><li>Imagens </li></ul></ul><ul><ul><li>Tabela </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><li>Montagem Projeto 1 – Toy Story 3 </li></ul>
  3. 4. <ul><li>Arquitetura de Informa ção </li></ul><ul><li>Este é o momento para pensar, refletir e de fato planejar o seu website. Com os dados levantados anteriormente, você deve criar a estrutura e o esqueleto do seu projeto. Os produtos finais desta etapa são, geralmente, o mapa do site e o wireframe. Tais documentos apoiam-se em regras de navegabilidade, acessibilidade e usabilidade. </li></ul>
  4. 5. <ul><li>Mapa do Site </li></ul>
  5. 6. <ul><li>Wireframe </li></ul>
  6. 7. <ul><li>Tag <img> - Imagens </li></ul><ul><li>Principais atributos: </li></ul><ul><ul><li>alt </li></ul></ul><ul><ul><li>border </li></ul></ul><ul><ul><li>height </li></ul></ul><ul><ul><li>src </li></ul></ul><ul><ul><li>width </li></ul></ul>
  7. 8. <ul><li>alt </li></ul>Texto alternativo border Borda da imagem height Altura da Imagem src Localização da Imagem width Largura da Imagem
  8. 9. <ul><li>Link </li></ul><ul><li>Destino de um hiperlink </li></ul><ul><li>Tipos de links </li></ul><ul><ul><li>absoluto </li></ul></ul><ul><ul><li>de email </li></ul></ul><ul><ul><li>âncora </li></ul></ul><ul><ul><li>relativo </li></ul></ul><ul><li>Principais atributos: </li></ul><ul><ul><li>area </li></ul></ul><ul><ul><li>src </li></ul></ul><ul><ul><li>target </li></ul></ul>
  9. 10. <ul><li>Tipos de links </li></ul><ul><li>Absoluto : </li></ul><ul><li>Este tipo de link é utilizado para indicar páginas fora do seu projeto, mas nada impede que dentro do seu site você trabalhe com links absolutos. O endereço completo começa sempre com “http://” (às vezes o endereço é seguro e será “https://”). </li></ul>Exemplo http://www.seusite.com.br/servicos.html http://www.google.com.br
  10. 11. <ul><li>Tipos de links </li></ul><ul><li>de email : </li></ul><ul><li>Este tipo de link que irá abrir a janela do leitor de email programada no computador do visitante. Caso não haja nenhum programado abre o padrão. No Windows Vista, por exemplo, é o Windows Mail. Um link de email vai utilizar a instrução “mailto:” antes do endereço a ser digitado. Um complemento útil é utilizar a instrução “?subject=” após o endereço, seguida do título da mensagem. </li></ul>Exemplo mailto:seuemail@dominio.com mailto:seuemail@dominio.com?subject=Assunto
  11. 12. <ul><li>Tipos de links </li></ul><ul><li>de email : </li></ul><ul><li>Nota: Neste caso não é necessário indicar o “Target”, pois sempre será aberta uma janela de programa leitor de email. </li></ul><ul><li>Atenção: Sempre que quiser indicar um link de email, deverá digitar o texto “mailto:” seguido do endereço para onde deseja que a mensagem seja enviada, sem espaço algum entre os caracteres. </li></ul><ul><li>Cuidado com este tipo de link. Caso o seu visitante esteja navegando de uma “lan-house”, por exemplo, ele não conseguirá enviar a mensagem diretamente, pois não terá o seu programa leitor de email à disposição. </li></ul>
  12. 13. <ul><li>Tipos de links </li></ul><ul><li>Âncora : </li></ul><ul><li>Este tipo de link também é chamado de link vertical, pois você estará sempre navegando por pontos específicos dentro da mesma página. Você irá criar primeiro o ponto de chegada (âncora) e depois o ponto de partida (link). </li></ul><ul><li>Nota: Os nomes das âncoras não podem conter quaisquer caracteres especiais ou espaços. </li></ul><ul><li>Irá aparecer um símbolo indicando que naquele ponto existe uma âncora. Este símbolo é visível apenas dentro do Dreamweaver. Ele é transparente para o seu visitante. </li></ul>
  13. 14. <ul><li>Tipos de links </li></ul><ul><li>Relativo : </li></ul><ul><li>Este tipo de link utiliza o endereço relativo à página em que o visitante está atualmente. Não será necessário digitar o endereço completo. Neste ponto é de extrema importância que você esteja trabalhando mapeado, pois a própria interface do programa irá auxiliá-lo a criar a relação entre a página atual e a do link. </li></ul>Exemplo servicos.html contato.html
  14. 15. <ul><li>alt </li></ul>Texto alternativo href Endereço com a localização do link target _blank: A URL abrirá em uma nova janela _parent: abrirá no frame pai ou na página anterior _self: abrirá na mesma página/frame em que foi clicada _top: abrirá no topo da página atual, sobrepondo a qualquer frame. Nota: _self vem definido como padrão. Os tipos _top e _parent são utilizados somente em conjunto de frames.
  15. 16. <ul><li>Exemplos de Links </li></ul><a href=“http://www.google.com.br” target=“_blank”> Google</a> <a href=“mailto:email@dominio.com”>Mail</a> <a href=“mailto:email@dominio.com?subject=Site”> Entre em contato</a> <a href=“servicos.html”>Serviços</a> <a href=“#dicas”>Dicas</a> No texto: <a name=“dicas”>Dicas</a>

×