O Design de Páginas Web com Dreamweaver é uma habilidade fundamental para criar sites atraentes e funcionais. Adobe Dreamweaver é uma ferramenta poderosa que facilita a construção de aplicações web, desde páginas estáticas com conteúdo fixo até páginas dinâmicas que interagem com o usuário e bancos de dados. Este guia completo vai te ajudar a entender os conceitos-chave e a realizar as operações básicas para desenvolver seus próprios projetos web.

Design de Páginas Web com Dreamweaver: Conceitos Essenciais

O design web envolve a criação de sites que podem ser de dois tipos principais: páginas estáticas e páginas dinâmicas. Compreender a diferença é crucial para o desenvolvimento eficaz.

As páginas estáticas possuem conteúdos fixos. São exibidas ao visitante exatamente como foram projetadas pelo desenvolvedor, embora possam incluir elementos como animações, som e vídeo para enriquecer a experiência. Seu conteúdo não muda em função das ações do usuário.

Por outro lado, as páginas dinâmicas apresentam um conteúdo indeterminado que varia de acordo com as requisições do visitante. Essas páginas interagem com o usuário, entre si e com os recursos de um servidor web, como os bancos de dados. A resposta que o cliente vê dependerá de suas solicitações, o que as torna muito mais interativas e personalizáveis.

Servidores Web e Aplicações Web

Um servidor web é uma aplicação que entrega as páginas web solicitadas por um usuário através de um navegador. Quando um usuário clica em um hiperlink ou insere um endereço na barra, o navegador envia uma solicitação ao servidor web, que localiza a página e a envia de volta.

No caso das aplicações web com páginas dinâmicas, a situação é mais complexa. Quando o cliente as solicita, algumas linhas de código podem não estar determinadas. Se o usuário precisa ver dados específicos de um banco de dados, além do servidor web, é necessário um servidor de aplicações. Este último integra a resposta final com os dados solicitados e a envia ao servidor web para que a entregue ao navegador. Dreamweaver reconhece tecnologias de servidor web como ColdFusion (própria da Adobe), ASP.NET, ASP, JSP e PHP, cada uma com características particulares.

Criação e Estrutura de Sites Web no Dreamweaver

Para iniciar um projeto web com Dreamweaver, é essencial organizar seus arquivos de maneira lógica. Uma boa estrutura de pastas facilitará o gerenciamento e a atualização do seu site.

Organização de Arquivos e Criação de Tabelas

Crie a estrutura de pastas: Dentro da sua pasta principal para o projeto (por exemplo, HTML), crie uma nova pasta chamada Web_02. Dentro de Web_02, organize seus recursos criando duas subpastas: uma para Imagem (ou Images) e outra para sons (para clipes de áudio).
Insira uma tabela: Abra um novo arquivo no Dreamweaver e insira uma tabela de três colunas por três linhas. Distribua-as adequadamente na página para criar um layout base.
Adicione conteúdo inicial:

Na parte superior central da página, escreva o nome do músico ou tema principal.
Abaixo do nome, você pode adicionar dados como a data de nascimento e morte, ou o local de origem.
Insira uma imagem: Coloque o cursor na célula central. Vá ao menu Inserir e execute o comando Imagem. Na caixa de diálogo Selecionar origem de imagem, procure e selecione a imagem que você previamente salvou em sua pasta Imagem e clique em OK.
Nas células laterais, você pode colocar dados relevantes sobre obras, amigos ou viagens, junto com texto ao qual depois poderá atribuir hiperlinks.
Na célula inferior, escreva um breve resumo da vida do músico e não se esqueça de incluir a fonte da informação.

Salve o arquivo: Salve seu trabalho na pasta Web_02 com o nome Index.htm utilizando o comando Salvar como do menu Arquivo. Feche o arquivo e o programa quando tiver terminado.

Formato e Cor em Tabelas e Texto com Dreamweaver

Dreamweaver simplifica bastante o processo de formatação sem a necessidade de escrever código HTML manualmente.

Selecione células: Clique na célula esquerda de uma linha inferior e arraste o mouse para a direita para selecionar várias células. Para uni-las, vá ao menu Modificar, clique no comando Tabela e selecione Combinar células. As células se transformarão em uma só.
Remova bordas da tabela: Com a tabela selecionada (o Inspetor de propriedades deve estar visível), insira o valor 0 no campo Borda para remover as linhas visíveis da tabela.
Modifique cores de fundo e texto gerais:

Clique no menu Modificar e selecione o comando Propriedades da página.
Na caixa de diálogo, selecione Aparência (HTML) e na lista Categoria, clique no campo Fundo para escolher uma cor para o fundo da página.
Se desejar mudar a cor de todo o texto, selecione Texto e escolha a cor desejada.

Mude a cor de texto específico: Para modificar a cor de um texto em particular (como um título), selecione-o e execute o comando Cor do menu Formato.

Nota importante: A formatação e o posicionamento de elementos podem ser trabalhosos. Às vezes, as tabelas e textos podem se desajustar sem motivo aparente. No entanto, uma vez que você domine as ferramentas do Dreamweaver, apreciará as vantagens do programa, especialmente ao evitar a escrita manual de grande parte do código HTML.

Inserção de Hiperlinks no Dreamweaver: Multimídia e Navegação

Os hiperlinks são essenciais para a interatividade do seu site web, permitindo aos usuários navegar entre páginas ou acessar conteúdo multimídia.

Linkar para Vídeos do YouTube

Busque o vídeo no YouTube: Inicie uma sessão com seu navegador e vá para No campo de busca, digite o nome do músico ou tema e clique em Buscar. Selecione o vídeo mais adequado e, enquanto o escuta, copie o endereço web da página clicando em Ctrl + C.
Crie o hiperlink no Dreamweaver: Retorne ao Dreamweaver, selecione o texto em sua página que você quer que atue como link (por exemplo, "Assista a um vídeo"). Abra o menu Inserir e execute o comando Hiperlink.
Configure o link: Na caixa de diálogo Hiperlink, cole o endereço copiado do YouTube no campo Link com Ctrl + V. Escreva um Título (descrição breve do link) e clique em OK. Ao abrir a página em um navegador, clicar neste hiperlink permitirá que você veja o vídeo.

Linkar para Arquivos de Áudio Locais

Selecione o texto: No Dreamweaver, selecione o texto que você deseja converter em um hiperlink para ouvir um áudio (por exemplo, "Ouça um concerto").
Execute o comando Hiperlink: Abra o menu Inserir e selecione o comando Hiperlink.
Busque o arquivo de som: Na caixa de diálogo Hiperlink, clique sobre o pequeno ícone em forma de pasta. Navegue até sua pasta sons (dentro de Web_02) e selecione o arquivo de som desejado (por exemplo, Paganini.wav). Clique em OK. Agora, ao clicar neste link no navegador, o arquivo de áudio será reproduzido.

Perguntas Frequentes sobre Design Web com Dreamweaver para Estudantes

O que é Dreamweaver e para que serve no design web?

Dreamweaver é um software da Adobe que permite projetar, desenvolver e manter sites web. É especialmente útil porque oferece uma interface visual (WYSIWYG) para criar páginas sem a necessidade de escrever todo o código HTML, CSS ou JavaScript manualmente, facilitando a criação de páginas estáticas e dinâmicas.

Qual é a diferença entre uma página web estática e uma dinâmica?

Uma página estática tem conteúdo fixo que é exibido sempre igual a todos os visitantes. Uma página dinâmica, por outro lado, gera seu conteúdo em tempo real com base em interações do usuário ou dados de um banco de dados, oferecendo uma experiência personalizada.

Como se insere uma imagem no Dreamweaver?

Para inserir uma imagem, você deve colocar o cursor no local desejado da sua página, ir ao menu Inserir, selecionar Imagem, e então procurar e escolher o arquivo de imagem da sua pasta local na caixa de diálogo Selecionar origem de imagem.

Como posso remover as bordas de uma tabela no Dreamweaver?

Com a tabela selecionada no Dreamweaver, procure o Inspetor de propriedades. Lá você encontrará um campo chamado Borda. Basta inserir o valor 0 nesse campo para que as bordas da tabela deixem de ser visíveis na página web final.

O que são os servidores web e de aplicações?

Um servidor web é um programa que entrega páginas web aos navegadores quando estas são solicitadas. Um servidor de aplicações, por sua vez, encarrega-se de processar a lógica de negócio e as interações com bancos de dados para gerar conteúdo dinâmico, trabalhando em conjunto com o servidor web para entregar a resposta final ao usuário.

# Design de Páginas Web com Dreamweaver