Seja um Bom Webdesigner!

Para poder criar um site como um bom Web Designer, preciso

seguir algumas regras, no s para tornar a pginas bonita e
agradvel, mas tambm para torn-la eficaz.
Algumas regras que consideramos essenciais:
SIMPLICIDADE A CHAVE Faa com que tudo seja muito simples,
evite pginas com muita informao, colocando apenas o
essencial numa pgina, principalmente se for pgina principal
de seu site.
EVITE TEXTOS LONGOS Textos longos devem ser resumidos ao
mximo ou divididos em vrias pginas pequenas, sempre
evitando textos longos.
USE IMAGENS Sempre que possvel, use imagens no lugar de
textos, uma imagem expressa muito mais que palavras s vezes,
principalmente na internet, onde o usurio no tem pacincia
para grandes leituras.
EVITE OS EXAGEROS Jamais utilize coisas do tipo msicas de
fundo, bolas e figuras como Gifs animadas e todo tipo de
elemento semelhante. Nem pense em usar clipart em suas
homepage, um Gif Animado pode ser utilizado s vezes na
criao de um logo ou bunner, mas sem muito exagero de
efeitos.
FAA PGINAS LEVES Nenhuma pgina do site deve demorar a
carregar, caso seu contedo seja grande e importante, devemos
avisar o usurio que poder demorar a carregar.
CONHEA O USURIO Pense sempre que o usurio ter um
equipamento inferior ao seu e que deve acessar o mesmo
contedo. Caso uma conexo mais lenta, uma visualizao de
800x600, diferentes navegadores, este o tipo de usurio que
devemos atingir.
CORES E FONTES Utilizem sempre cores para destacar elementos,
mas no de uma forma to destacada, mistura de cores e tudo
mais, pois muitas cores podem fazer um belo carnaval do seu
site. Cuidado ao utilizar fontes diferentes, nem sempre o usurio
ter este tipo sofisticado de fonte que voc queira utilizar,
normalmente um tipo de fonte ARIAL, TIMES e suas derivadas
pode ser ideal. Se precisar usar algum tipo de fonte diferente, crie
a mesma como uma figura que possa carregar no navegador do
usurio sem sofrer alteraes.
EMOO X RAZO - D preferncia a usar o lado emocional em vez
do racional quando criar um design, algo que agrade aos olhos e
a navegao do usurio com simplicidade.


























Apresentando o Dreamweaver
O DREAMWEAVER MX um editor de HTML profissional para o
desenvolvimento de pginas, sites e aplicativos para a
INTERNET que j bastante utilizado no meio dos
desenvolvedores pela facilidade que sua interface apresenta. Ele
oferece ferramentas suficientes para aqueles que gostam de
trabalhar em modo texto, como por exemplo, as dicas de cdigo
que so exibidas medida que so digitados os comandos.
Tambm facilita a vida daqueles que no tem afinidade com
cdigos HTML, ele possui uma interface grfica que possibilita a
criao de pginas, sites e aplicativos sem a necessidade de
digitao de uma nica linha de cdigo; possuindo painis, guias,
menus e o inspetor de propriedades junto da rea de trabalho,
facilita-se a busca de problemas e se agiliza as definies em
geral.

20.1 BARRA TTULO
A barra de ttulos contm o nome do programa que est sendo
usado, no caso, Dreamweaver e o nome do arquivo que est
sendo editado.
20.2 BARRA DE MENUS
Nesta barra h vrios menus como Arquivo, Editar, Exibir, Inserir,
Modificar, Texto, Comandos, Site, Janela, Ajuda.
20.3 BARRA INSERIR
Esta barra contm guias que possuem cones de atalhos para
ferramentas bsicas, ou seja, as mais utilizadas na construo do
site. Para exibi-la ou ocult-la clique no menu JANELA e
selecione a opo INSERIR.

Nessa guia h algumas ferramentas bsicas, algumas esto
cobertas, pois no iremos aprofundar muito o contedo das
mesmas, outras como (da esquerda para a direita):
HIPERLINK: inserir link;
E-MAIL: link para e-mail;
ANCORA: link para um lugar especfico dentro do prprio
documento ou outro qualquer;
INSERIR TABELA: inseri tabelas;
DESENHAR: desenha camadas;
IMAGEM: insere uma imagem;
IMAGEM ROLLOVER: insere uma imagem que substituda
por outra ao passar do mouse;
MENU DE NAVEGAO: cria um menu com troca de imagens;
LINHA HORIZONTAL: insere linhas horizontais;
DATA: insere datas
COMENTARIOS: insere comentrios

20.4 BARRA DE FERRAMENTAS DOCUMENTO
Denominada documento essa barra possui ferramentas que
exibem informaes do arquivo em edio, tais como, o ttulo,
exibio de layout, layout e HTML e apenas o HTML. muito
usada na manuteno dos sites, quando h necessidade de
correes no cdigo HTML.
Para exibi-la ou ocult-la clique no menu EXIBIR e selecione
BARRA DE FERRAMENTAS na opo DOCUMENTO
(Document).

20.5 PAINIS
Os painis possuem informaes relacionadas a aes
avanadas dentro de uma pgina. Dentre os principais existentes
podemos destacar:
Design: onde buscaremos informaes sobre o arquivo css que
ser vinculado ao arquivo;
Arquivos: onde teremos a definio e a respectiva rvore de
diretrios do site em evidncia.
Esses painis podem ser exibidos e ocultados atravs do menu
janela na opo ocultar painis.

20.6 GRUPOS DE PAINIS
Os painis e grupos de painis podem ser encaixados e
combinados conforme a sua necessidade. Para expandir e
reduzir o grupo de painis clique na seta de expanso. Para
separar o grupo de painis arraste o grupo atravs da pina. Para
agrupar um painel em outro grupo de painis clique no cone de
opes que fica a direita da janela.

20.7 REA DE DESENVOLVIMENTO
A rea de desenvolvimento exibe tudo o que est sendo criado
no site, assim tudo o que est na rea de desenvolvimento est
como ser exibido no browser, excetuando-se as linhas e marcas
de smbolos visveis que identificam algum atributo, imagem ou
texto.

20.8 VISUALIZAO DO DREAMWEAVER
possvel visualizar o projeto e o cdigo na mesma janela do
documento ou cada um separadamente. Ao criar documentos no
DREAMWEAVER, o cdigo HTML gerado automaticamente. O
interessado no apenas a visualizao, mas a possibilidade de
trabalhar e editar o cdigo ou o projeto. As alteraes realizadas
atualizam automaticamente o documento; somente o cdigo;
cdigo e projeto; somente o projeto.

20.9 BARRA DE STATUS
Os elementos da barra de status so:
Seletor de tags: exibe as tags dos objetos selecionados na
pgina;
Tamanho da janela: permite definir o tamanho da janela
configurando-a para caber nos diversos tamanhos de monitores e
tambm as dimenses atuais da janela do documento (em
pixels).
Tamanho do documento e tempo estimado: mostra o tamanho
do documento incluindo os arquivos dependentes. Mostrando o
tempo estimado para carreg-lo no navegador. Por padro
calculado o tempo de download baseado em modem de 28.8
Kbs.

20.1.1 MENUS CONTEXTUAIS
Os menus contextuais so utilizados para facilitar o acesso aos
comandos e propriedades mais utilizados para facilitar o acesso
aos comandos e propriedades mais utilizados, relativos ao objeto
ou janela que est sendo trabalhada. Os menus contextuais
contm apenas a lista dos comandos que pertencem seleo
atual. Abra o menu contextual, clicando o boto direito do mouse
no objeto ou janela.









Criando um Novo Site
Para iniciar a construo de um site, vamos primeiramente criar
uma pasta para colocarmos os arquivos que iremos utilizar neste
site, podemos chamar a pasta de DWMX. Agora clique no menu
SITE / NOVO SITE (new site), onde estaremos trabalhando com
um assistente de criao para a criao deste site. Ao aparecer
este assistente, verifique se a aba se encontra selecionada no
BSICO e damos o primeiro passo que inserir o nome do site,
seguido de AVANAR; na seqncia ele pergunta se ir trabalhar
com uma tecnologia de servidor, neste caso selecione a opo
NO, pois iremos trabalhar com um site esttico.
Na opo seguinte, selecione o primeiro item (recomendvel),
pois vamos editar os arquivos localmente e ento public-los no
servidor remoto. Para o prximo passo, selecione a pasta que
iremos salvar nossas pginas e arquivos, selecione a pasta SITE
que foi criada no incio desta lio; na seqncia ele vai perguntar
como se conectar ao servidor web, como aqui um
exemplo, selecione a opo NONE. PRONTO! Nesta ltima tela,
temos um sumrio das configuraes que foram feitas de uma
forma resumida, agora podemos dar seqncia nas
configuraes ou fazer alguma alterao se for necessrio.


INICIANDO UMA PGINA NO DREAMWEAVER

22.1 CRIANDO E SALVANDO UMA NOVA PGINA

Quando voc cria uma nova pgina, a primeira coisa que deve
fazer salvar seu documento. Para criar um novo documento,
escolha ARQUIVO (FILE) / NOVO (NEW); clique na guia geral e
escolha a Pgina Bsica na lista de categorias; escolha HTML na
lista da coluna Pgina Bsica e clique no boto criar. Mesmo
antes de terminar o seu documento voc deve salvlo.
Se voc no salvar um documento e inserir objetos grficos no
mesmo, estes estaro num caminho de nome file://. Algumas
convenes para salvar um arquivo:
Seu documento poder ter a extenso .htm ou .html, porm
Teste.htm diferente de teste.html.;
Use apenas caracteres alfanumricos (AZ ou az) e nmeros (0
a 9);
Jamais use espaos em nomes de arquivos. Use caracteres de
sublinhado ou hfen para simular um espao, se voc precisar
separar palavras.
No use quaisquer caracteres especiais, como >, <, *, / entre
outros.
Evite iniciar seus nomes de arquivos com nmeros.

22.2 CRIANDO O ARQUIVO INDEX.HTM

Ao carregar um site, a pgina inicial de suma importncia, pois
atravs dela que podemos abrir um conjunto de pginas
relacionadas (site). Para o DREAMWEAVER, a pgina inicial
(home page) dever receber o nome de index.htm ou index.html.
Para cri-la:
Clique com o boto direito do mouse na pasta local do site;
Escolha a opo NOVO ARQUIVO (File/New). adicionada
uma nova pgina ao site;
Renomeie para index.htm.
Todo documento HTML que voc cria precisa ter um ttulo. O
ttulo usado principalmente para identificao do documento.
Ele apresentado na barra de ttulo do navegador. Escolha uma
frase curta e informativa que descreva o objetivo do documento.

NOTA: O DREAMWEAVER possui layouts prontos para inserir
seu contedo. No menu ARQUIVO, clique no comando NOVO,
ser aberta a caixa de dilogo novo documento com a guia
Geral j selecionada. Na lista Categoria, selecione o tipo de
pgina: Page Designs, selecione o tipo de layout desejado,
observe que na janela preview possvel observar o modelo e
abaixo temos um resumo dos elementos de design utilizado.

22.3 DEFININDO AS PROPRIEDADES DA PGINA
Vamos trabalhar o layout desta nova pgina que criamos, as
propriedades como COR DE FUNDO (BG COLOR) aparece uma
paleta de cores com o cone de conta-gotas para selecionar a
cor, podemos tambm inserir o cdigo hexadecimal para inserir
diretamente uma tonalidade pessoal. Para definir uma imagem ou
uma cor para o fundo da pgina, use a caixa de dilogo das
propriedades da pgina. Se voc usar uma imagem de fundo e
uma cor do fundo, a cor aparece enquanto so carregadas as
imagens, e ento a imagem se sobrepe cor. Se a imagem de
fundo contiver rea de transparncia, a cor do fundo tambm
aparece.

22.4 INSERINDO TABELAS
A maneira mais comum de dispor os elementos numa pgina
trabalhando com tabelas. Uma tabela formada de trs
elementos:

Linha: espaamento horizontal entre uma borda e outra;
Coluna: espaamento vertical entre uma borda e outra;
Clula: espao resultante da interseo de uma linha com uma
coluna.

Existem duas maneiras de criar tabelas: pelo Painel Inserir
Comuns > Inserir tabela, ou pela barra de menus Inserir > Tabela.
Vamos criar uma tabela com 3 linhas e 1 coluna, largura de 760
pixels, preenchimento da clula = 0, espaamento entre as
clulas = 0 e borda = 0. Clique em OK.

Aps inserir a tabela, vamos trabalhar com as propriedades,
quando a tabela estiver selecionada, suas caractersticas
aparecero no Inspetor de Propriedades. No campo Alinhar
(Align) selecione a opo Ao centro (center). H opes como
tamanho de borda (Border), espaamento dentro da borda, cor,
altura que podemos alterar conforme a necessidade. Observe
que podemos fazer todas as alteraes nas tabelas alterando
apenas os campos na Barra Propriedades (Properties), sem
precisar alterar diretamente no cdigo.

Podemos ainda inserir mais linha e colunas na tabela j existente
conforme a necessidade, Selecione uma linha da tabela e clique
com o boto direito do mouse sobre a rea selecionada, no menu
de opes que ser exibido selecione as opes Tabela > Inserir
Linhas ou Colunas. Na outra janela que se abre selecione o
nmero de linhas ou colunas que deseja inserir e a posio em
que elas sero includas. H ainda a opo de editar uma linha j
existente, para dividir:
Selecione a clula, linha ou coluna que pretende dividir e no
Inspetor de propriedades selecione as opes Clula > Divide as
clulas em linha ou colunas;
Para mesclar: Selecione as clulas, linhas ou colunas que
pretende mesclar e no Inspetor de propriedades selecione as
opes Clula / Linha > Mesclar as clulas selecionadas
utilizando extenses.
Se for necessrio excluir linhas ou colunas, posicione o cursor
sobre a linha ou coluna a ser excluda, clique sobre a rea
selecionada com o boto direito do mouse e no menu de opes
que ser exibido escolha as opes Tabela > Deletar Linha /
Deletar Coluna.


22.5 MAPEAMENTO DE IMAGENS

O mapeamento de imagens utilizado quando h necessidade
de colocar vnculo em apenas uma parte de uma imagem, e no
na imagem toda. Selecione uma imagem (na primeira linha da
tabela). Vamos mapear a rea da imagem onde aparece alguma
palavra ou objeto em destaque, colocando um link para a pgina
index.html. Com a imagem selecionada, veja que a Barra de
Propriedades (Properties) disponibiliza trs tipos de mapas:
retangular, oval e poligonal. Selecione a opo retangular, como
mostra a figura abaixo.















Links e Navegao
DREAMWEAVER oferece diversos modos de criar links de
hipertexto para documentos, imagens, arquivos de multimdia ou
programas dos quais se pode efetuar o download.
Podem ser estabelecidos links com qualquer texto ou imagem em
qualquer parte de um documento, inclusive texto ou imagens
localizados em um cabealho, lista, tabela, camada ou moldura.

23.1 LOCALIZAO E CAMINHOS DOS DOCUMENTOS

Cada pgina da Web tem um endereo nico chamado Universal
Resource Locator (URL). Ao criar links, essencial compreender
o caminho de arquivo entre o documento do qual parte o link e o
que est sendo vinculado. Veja alguns tipos de links:
Internos para documentos de um mesmo site;
Externos para documentos de um outro site;
Correio Eletrnico para enviar mensagens atravs do
gerenciador de e-mails;
ncoras para sees especficas de uma pgina;
Quando se cria um link preciso definir o caminho entre o
documento de onde parte o link at o que est sendo chamado.
Esse caminho pode ser absoluto ou relativo:
Caminho absoluto usado para estabelecer um link a um
documento em outro servidor, preciso fornecer a URL
(endereo) completa do documento que est sendo chamado.
Por exemplo
http://www.xxx.com.br/treinamentos/index_treinamentos.html.
Caminho relativo usado para criar vnculos locais na maioria
dos sites. til para estabelecer vnculos com documentos
situados na mesma pasta ou em outra pasta do mesmo site,
atravs de caminhos de estrutura das pastas. Nesse caso,
coloca-se somente o segmento do caminho, no necessrio
especificar a URL.

Observe na rea em vermelho que temos a pgina que a figura
est direcionando o link, antes de inserir este caminho, o campo
vem preenchido com # que s deve ser tirado caso tenha um
caminho de link. No campo TARGET abaixo do campo LINK,
definimos se este link ir abrir em uma nova pgina ou dentro
desta mesma pgina que estamos navegando.
Para inserir um link dentro do texto que pode vir acompanhado da
imagem, ou apenas em alguma palavra, o procedimento ser o
mesmo que a figura, selecionando o texto ou a palavra e
inserindo o link dentro do campo LINK na Barra de Propriedades
(Properties).

Para definir um link de correio eletrnico: coloque a expresso
mailto: e em seguida o e-mail do destinatrio, exemplo
mailto:fulano@uol.com.br.
As NCORAS so utilizadas em pginas que possuem contedo
muito extenso.
Atribui-se um ncora para cada pargrafo ou para cada tpico da
pgina, e depois cria-se um menu no incio da mesma com links
para essas ncoras. Esse recurso agiliza a navegao pelo
contedo da pgina, dispensando o uso da barra de rolagem, que
normalmente se forma nesses documentos muitos extensos.
Para inserir uma ncora, na barra de menus selecione INSERIR
/NCORA com nome, ou no Painel Inserir: COMUNS / NCORA
com nome:
Coloque o cursor no incio do tpico, ou seja, no comeo do
texto. Na barra de menus selecione INSERIR / NCORA com
Nome, ou no Painel Inserir: COMUNS / NCORA com Nome. Na
janela que se abre, digite o nome da ncora: no caso a palavra
que deve buscar, e clique em OK. Faa o mesmo procedimento
para os demais tpicos, as prximas ncoras devem receber
outras palavras.
Crie um menu no incio da pgina, contendo apenas os ttulos
dos tpicos, as informaes mais importantes do texto.
Vincule cada nfo do menu a sua respectiva ncora. Selecione o
nfo do menu, e no campo Link do Inspetor de Propriedades digite
o nome da ncora precedido pelo smbolo #. Exemplo:
#informatica
importante tambm disponibilizar uma forma do usurio voltar
para o menu no topo da pgina aps ter acessado um
determinado tpico. Para isso, insira uma ncora no incio da
pgina, antes do menu. Essa ncora ter o nome de topo. Em
seguida digite a palavra Topo no final de cada tpico e faa um
link para a ncora topo (#topo).

NOTA: Se a ncora fosse chamada de uma outra pgina, o link
ficaria assim: pagina.html#ancora.


Observe nesta imagem que foi criado o menu superior e em cada
palavra deste, foi inserido um link como mostra na Barra
Propriedades (Properties) com o nome #lorem1, este link vai
buscar no texto o link NCORA que foi inserido ao em cada parte
do texto que iremos buscar diretamente.

23.2 TESTANDO A PGINA

Podemos testar os LINKs em um navegador, para garantir o
funcionamento da pgina conforme o que foi feito. Salvamos o
arquivo e pressionamos a tecla F12, assim podemos testar os
links e formato da pgina dentro do navegador do usurio.

Formulrios

Muitas pginas utilizam formulrios para obter informaes das
pessoas que esto visitando sua pgina e solicitando seus
servios.
1) No corpo da pgina, dentro da tabela, digite o ttulo
"Atendimento ao Consumidor" em negrito. Na Barra Propriedades
(Properties) escolha fonte verdana, tamanho 2.
2) Pule uma linha e digite "Contato" e em seguida os dados da
empresa (e-mail, telefone, fax);
3) Em seguida digite: "Se voc tem alguma dvida ou sugesto
sobre os nossos produtos, preencha o formulrio abaixo:";
4) Na barra Inserir, selecione o tem Formulrio;
5) Selecione a primeira opo Formulrio, para que ele crie a tag
form (como se fosse a moldura do formulrio);
6) Dentro da tag form, pule uma linha e digite "Nome:"; Na frente
do nome crie um campo de formulrio, ser um campo texto: crie
um campo texto clicando na 2 opo Campo de texto;

Selecione esse campo e na Barra Propriedades (Properties)
preencha as propriedades do campo:

Campo de texto (nome do campo): nome
Largura do caractere (tamanho da moldura do campo): 50
Nmero mximo de caracteres. (nmero mximo de caracteres
que podero ser digitados): 50 Tipo (tipo de linha): Linha simples
Valor inicial (valor inicial): deixar em branco
7) Pule uma linha e digite "E-mail:"
Na frente do e-mail crie um campo de formulrio, ser um campo
texto: crie um campo texto clicando na 2 opo Text Field.

Selecione esse campo e na Barra Propriedades (Properties)
preencha as propriedades:
Campo de texto (nome do campo): e-mail
Largura do caractere (tamanho da moldura do campo): 40
Nmero mximo de caracteres (nmero mximo de caracteres
que podero ser digitados): 40
Tipo (tipo de campo): Linha simples.
Valor inicial (valor inicial): deixar em branco.

8) Pule uma linha e digite "Sexo:"
Crie um campo texto clicando na 8 opo Menu de Lista

Selecione esse campo e no Inspetor de Propriedades preencha
as propriedades:
Lista / Menu (nome do campo): sexo
Tipo (tipo de lista, as opes tm a mesma funo, s muda a
forma de exibio).
Clique no boto Valores da lista: adicione os valores
"masculino" e "feminino" (para adicionar um novo valor clique no
sinal +).
Clique em OK.

9) Pule uma linha e digite "Dvidas ou sugestes:"
Crie um campo texto clicando na 4 opo rea de texto

Selecione esse campo e no Inspetor de Propriedades preencha
as propriedades:
Campo de texto (nome do campo): sugestes
Largura do caractere (tamanho da moldura do campo): 50
Nmero mximo de caracteres. (nmero de linhas do campo): 5
Tipo (tipo de campo): Multi-linha
Valor inicial: deixar em branco

10) Pule uma linha e crie um boto clicando na opo 11 opo
Boto
Selecione esse campo e no Inspetor de Propriedades preencha
as propriedades:
Boto (nome do boto): Submit
Action (ao): Enviar formulrio
Obs: a ao reset form serve para limpar os campos do
formulrio.

11) Edite o cdigo HTML e no action da tag form coloque o e-mail
para onde sero encaminhados os dados (mailto:xxxxxxxxxxx).
O formulrio ser exibido dessa forma:


Dicas para a Criao de um Site
Crie um esboo, desenhe as vrias pginas imaginando como
seria o seu visual em tela, posio das fotos, textos, ttulos etc.
Faa um estudo prvio: marque reunies com o seu cliente,
converse e discuta solues com a equipe de cliente, converse e
discuta solues com a equipe de desenvolvimento, pesquise
outras fontes de informaes, formule perguntas e obtenha as
respostas necessrias para construo do site.
Apresente uma resposta com o projeto que pretende executar,
tempo e custo.
Faa um contrato, ele um instrumento legal de comum acordo
entre ambas as partes.
Cronograma, atravs dele ser possvel definir as etapas e
perodos de desenvolvimento do site.
Defina o objetivo do site. formal ou informal? Usa cores fortes
ou discretas? Veicula em outros meios de comunicao?
Pblico Alvo: quem visitar seu site?

25.1 - DEFINIR O CONTEDO, O QUE SER DIVULGADO NO SITE
Informaes pessoais: informaes sobre voc;
Publicaes como jornais, revistas;
Perfis da empresa; segmento da empresa; clientes, parceiros,
etc.

25.2 - ESTABELECER OBJETIVOS
Voc deve perguntar-se o que os usurios vo estar procurando
no site;
Qual o objetivo do site;
Antes de comear entrar com cdigos ou imagens voc deve
pensar o que voc quer colocar em sua pgina;
Como ser estruturada? Ela est adequada ou no ao meu
pblico alvo?
Ao Desenvolver um site para uma empresa ou pessoas,
importante que voc colha junto ao seu cliente seus objetivos,
idias, a forma que imagina sua pgina, etc;
Assim ficar bem mais fcil de comear seu trabalho.

25.3 - DIVIDA O SEU CONTEDO EM TPICOS
Crie uma lista com os principais tpicos, a princpio no importa a
ordem. Esta forma de comear a se organizar. Sua lista poder
ter quantos tpicos desejar, mas cuidado, o seu leitor poder se
cansar e se perder em meio a tantas opes.

25.4 - QUAIS AS QUESTES QUE DEVO LEVANTAR COM RELAO
ORGANIZAO E NAVEGAO DE UM SITE
Ser que os usurios conseguem navegar pelo contedo de
cada tipo de estrutura para encontrar as informaes de que
precisam.
Como ter certeza de que os usurios conseguem se localizar
nos meus documentos (contexto) e achar o caminho de volta at
uma posio conhecida.

25.5 - PRXIMA ETAPA DO PLANEJAMENTO
Sua apresentao da Web consiste em determinar o contedo
que ser apresentado em cada uma das pginas e criar alguns
vnculos (links) simples que possibilitem a navegao por essas
pginas.
Coloque cada tpico em uma pgina, mas se tiver um grande
nmero de tpicos, a manuteno e vinculao podem se tornar
maante.
Defina bem a forma de navegao entre as pginas. Se houver
formas alternativas, torne a navegao para os leitores a mais
intuitiva possvel.
Tome cuidado com o que ser includo na home page, lembre-
se que ela ser a porta da sua apresentao.
Tenha sempre em mente seus objetivos. Procure no se
distanciar deles.

NOTA: A disposio de imagens, textos, vdeos, etc. Tudo que
voc desejar colocar em sua pgina precisa ser colocado de
forma agradvel ao leitor. Abordamos, de forma geral, a
diagramao. Esta palavra vem do mundo dos impressos. Trata-
se da disposio de elementos que compem uma pgina, deve
ser observado o tamanho das fontes, disposio das imagens,
forma como o texto ser apresentado, etc. Uma boa diagramao
tambm garante o retorno do usurio.
Bibliografia/Links Recomendados
Bibliografia Bsica:
- Webdesign: Teoria e Prtica. Anielle Damasceno, Editora Visual
Books.
- 250 Segredos para Web Designers. Molly E. Holzschlag, Editora
Campus.
- Projetando Websites. Jakob Nielsen, Editora Campus.

Links:
-
http://www.oficinadanet.com.br/artigo/2234/curso_basico_de_web
design_-_introducao
- http://www.criarweb.com/desenho_web/
- http://www.sobresites.com/webdesign/tutoriais.htm
- http://webtutoriais.com/