Hoje o Adobe Dreamweaver, é um dos
programas mais completos para editar, desenvolver e fazer manutenção de sites.
Neste tutorial ensinarei na versão CS5
do programa, caso não tenha instalado em seu PC, você poderá baixar no link aqui (para pôde baixar esse programa, eu
recomendo que tenha instalado em seu PC o software Ares
Galaxy, caso não tenha, baixe-o no link aqui).
OBS: Este tutorial galera será
num modo básico mesmo, tipo uma introdução sobre o Dreamweaver CS5, pra quem
não é um Web Designer e não tem muito conhecimento sobre a linguagem HTML. Por
isso com o exemplo abaixo ensinarei a criar e editar templates para mudar o
design de seu site.
Estão vamos ao tutorial:
1) Feito o download do Dreamweaver CS5, instale-o
normalmente, e já concluído em seguida, abre-o.
OBS: Verifique se na aba
“Designer”, a opção também “Designer”, esteja selecionada:
2) Primeiro vamos aprender a criar um template, para
isso, vá à aba “Arquivo”, e clique em “Novo”. Aparecerá uma janela, daí você
escolherá uma das opções marcadas nas imagens abaixo, caso queiram criar uma
página em branco, eu utilizando uma amostra do próprio Dreamweaver.
3) Já aberta a página, caso você decida, você poderá
modificar as três opções de exibição de seu template que são o “Código”,
“Dividir” e “Design”, clicando na aba “exibir” e selecionando entres as opções
marcados abaixo.
4) Agora vá à aba “Inserir”, e clique na opção “HTML”,
em seguida em “Molduras”, e depois clique na opção “Superior alinhado a
esquerda”.
Aparecerá uma janelinha, em seguida, clique em “OK”.
Ele ficará desse jeito:
5) Agora vamos adicionar conteúdos a página de exemplo:
OBS:Antes de adicionar as imagens recomendo que
façam o upload delas primeiro, assim ficará mais fácil de ensinarem como editar
o template pelo Dreamweaver.
Clique logo acima, com o seu mouse dentro da área de cabeçalho do seu template,
e continuando na aba “Inserir”, clique na opção “Imagem”, e selecione qualquer
imagem de seu PC, para imagem de cabeçalho da página com formatos compatíveis
ao Dreamweaver, e em seguida, clique em “OK”.
OBS: Este template de exemplo
será num estilo musical, como um site de fãs, que há a biografia da banda,
letras de musicas e etc, e que terá como destaque a banda System of a Down, que
eu sou muito fã.
6) Clique com o botão direito de seu mouse, na área
esquerda da página , onde ficará os Banners e Gadgets, e clique na opção
“Objetos de Layout” e em seguida em “Barra de menus do Spry”. Em seguida
aparecerá uma janelinha, daí você irá clicar em “OK”. Entre aos itens, você
editará o nome de cada um, e na barra de propriedades abaixo, você irá à opção
“Link”, marcada na imagem abaixo, e colar o link da página do seu site, aonde os
visitantes terão acesso. Aparecerá quatro itens do menu, e em cada um, você
editará entre os seguintes nomes:
- Biografia
- Shows
- Álbuns e músicas
- Parcerias
7) Na área do meio da página onde ficará as postagens ou
onde ficará o texto, e clicará com o botão direito do mouse, e entre as opções
marcadas na imagem abaixo, você irá escolher a posição, fonte e estilo do
texto.
OBS:Como isto é um exemplo, eu digitarei um
texto na área de postagens, só pra vocês terem uma idéia, lembrando que quando
for colar o código do template no site, o texto irá desaparecer substituído
pelas postagens.
8) Depois é só digitar o texto, e a conclusão do nosso
exemplo de página ficará assim:
9) Agora vamos aprender a editar algumas coisas no
template. Vá á opção “Código”, e em cor de rosa, na tag “<Img src=”, você
modificará o local de destino da imagem de cabeçalho em aspas, e irá
substituí-la pelo link da imagem que você já fez o upload:
10) Na tag “<li>” de um dos itens de menu, mais o
link da página aonde os visitantes terão acesso abaixo, na tag “<ul>”,
terá os subitens, aonde você poderá excluir quantos quiser de cada item do menu,
lembrando de fechar a tag “<li>”, com “</li>” e em seguida fechar
também a tag “<ul>”, com “</ul>”.
11) Pronto, agora você poderá dá “Ctrl+A” (selecionar
tudo) e “Ctrl+C” (copiar), e colar (“Ctrl+V”) no design do seu site (caso não
saiba colar o template do site, leia esta postagem no link aki, e aprenda como fazer).
OBS: O próprio Dreamweaver,
tem uma função de criar e hospedar o seu site em um servidor host. Eu não
recomendo utilizar esta opção para hospedar o seu site, más mesmo assim vou ensinar
um pouquinho como é.
Vá à aba “Site”, e clique na opção “Novo site”. Em seguida, aparecerá uma
janela de configurações, aonde você irá escolher o local de destino de seu novo
site, o link de servidor host para postar as suas páginas, definir se deseja
compartilhar arquivos, etc. depois é só salvar o novo projeto. Indo lá vocês
vão verem, caso escolherem esta opção de hospedagem.
Então é isso galera, isso foi apenas uma introdução,
utilizando um exemplo simples de como desenvolver e editar um template, e
acredito que a partir daí vocês conseguirão aprender 100% no Dreamweaver. Más
eu recomendo também pra facilitar e ter um bom conhecimento, pesquisar e estudar
um pouco mais as linguagens, principalmente o HTML.
Dúvidas? Deixe comentários aê!
Espero ter ajudado aí galera, vlw! ;D
Comentários