Felipe Volpato

Formado em Publicidade e Propaganda

Assistente de Arte

Professor há 6 anos

E-mail para contato: fevooduck@gmail.com

Blog: http://volphousedesign.wordpress.com ou

http://volpatotutoriais.wordpress.com

• Conteúdo da aula:– Arquitetura de Informação– Imagens– Tabela– Links

• Montagem Projeto 1 – Toy Story 3

• Arquitetura de Informação

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.

• Mapa do Site

• Wireframe

• Tag <img> - Imagens

Principais atributos:• alt• border• height• src• width

alt

Texto alternativo

border

Borda da imagem

height

Altura da Imagem

src

Localização da Imagem

width

Largura da Imagem

• LinkDestino de um hiperlink

Tipos de links• absoluto• de email• âncora• relativo

Principais atributos:• area• src• target

• Tipos de links• Absoluto:

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://”).

Exemplo

http://www.seusite.com.br/servicos.html

http://www.google.com.br

• Tipos de links• de email:

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.

Exemplo

mailto:seuemail@dominio.com

mailto:seuemail@dominio.com?subject=Assunto

• Tipos de links• de email:

Nota: Neste caso não é necessário indicar o “Target”, pois sempre será aberta uma janela de programa leitor de email.

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.

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.

• Tipos de links• Âncora:

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).

Nota: Os nomes das âncoras não podem conter quaisquer caracteres especiais ou espaços.

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.

• Tipos de links• Relativo:

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.

Exemplo

servicos.html

contato.html

alt

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.

Exemplos de Links

<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>