Curso prático - Web Design

Profº João Gabriel de Carvalho.

O Dreamweaver é um editor profissional, que projeta e gerencia sites e aplicativos para a Internet.

Os recursos de edição visual do Dreamweaver permite adicionar rapidamente imagens, textos e funcionalidades aos seus documentos sem a necessidade de saber programar em HTML.

Adobe Dreamweaver

Novo site

Antes de começar o desenvolvimento, é necessário definir a local da pasta do website, assim é possível manter todos os arquivos organizados.

Para definir um novo site:– Acesse o menu “Site” e clique em “New Site”.

Para editar um site em desenvolvimento:– Acesse o menu “Site” e clique em “Manage Sites”.

Novo Site – Pasta raiz

Nesta janela é possível definir um nome e o local onde os arquivos do site ficarão armazenados.

Novo Site – Pasta imagens

Em “Local Info” é possível definir a localização da pasta com todas as imagens do site, o ideal é criá-la dentro da pasta raiz.

Painel de visualização

No Dreamweaver é possível visualizar o documento desenvolvido de três formas distintas:– “Code” permite a visualização do código fonte da

página.– “Design” permite a visualização da aparência da

página.– “Split” permite visualizar o código fonte e a

aparência da página ao mesmo tempo através de uma janela dividida.

Painel de visualização

Tabela

Tabela é o cruzamento de linhas e colunas que formam as células, este recurso pode ser utilizado para estruturar os elementos inclusos na página.

Para criar uma tabela:– Acesse o menu “Insert” e clique em “Table”– Ou pelo teclado, utilize a combinação CTRL+ALT+T

Tabela

Na janela “Table” é possível definir a quantidade de linhas, colunas, a largura da tabela e borda e espaçamento de cada célula.

Imagens

As imagens costumam ser utilizadas para adicionar interfaces gráficas (como botões de navegação), apelo visual (por exemplo: fotografias) ou elementos de design interativos.

Para inserir imagens no documento:– Acesse o menu “Insert” e clique em “Image”– Ou use a combinação pelo teclado CTRL+ALT+I

Imagens

Na Janela “Select Image Source” é possível localizar a imagem que será adicionada ao site e no lado direito é exibido uma pré-visualização do arquivo.

Hiperlinks

Uma das principais atrações da Internet é a apresentação de documentos com o conceito de hipertexto, ou seja, uma página que se liga a outras por meio de conexões especiais chamadas hiperlinks.

Para inserir hiperlinks em objetos da páginas– Selecione o texto ou a imagem, acesse o menu

“Insert” e clique em “Hiperlink”.

Hiperlinks

Uma dica interessante é selecionar o objeto que deseja transformar em hiperlink (texto ou imagem) e clicar sobre a propriedade correspondente, no painel inferior do programa.

Esta apresentação já se encontra disponível para download em:

http://slideshare.net/jao1gabriel