Conhecendo o Dreamweaver 8

 

Objetivos:

 

Olá Pessoal,

 

Esta é a Parte 1 de uma série de tutoriais sobre o uso da ferramenta Dreamweaver. Nesta série de tutoriais você irá conhecer e aprenderá sobre configuração e uso do mesmo.

 

Pré-requisitos:

 

Para acompanhar esta lição, você deve ter base em webdesign, principalmente em FrontPage ou outra ferramenta de criação de home page.

 

O que é Dreamweaver?

 

O Dreamweaver é um programa para criação de paginas da web desenvolvido pela macromedia, que hoje faz parte do Adobe. Permite ao usuário de projetar, desenvolver e manter eficientemente web sites.

 

1. Área de Trabalho(Configurando o layout workspace)

 

Ao iniciar o Dreamweaver 8 pela primeira vez,  primeiro passo antes de começar a trabalhar com o dreamweaver 8 e a configuração do layout da área de trabalho, sendo da sua escolha. (Você terá que escolher uma opção, no caso de querer trocar o layout1 nas próximas vezes de acesso, esta opção encontra-se no menu window > workspace layout).

 

Na caixa de dialogo WorkScpace2 você terá duas opções: (observe a fig.1.0):

 

» Designer, onde você irá trabalhar diretamente com o layout da sua página, ou seja, a parte visual, como se fosse o modo normal do FrontPage, esse usado mais por iniciantes.

 

» Coder, onde você irá trabalhar juntamente com o código da sua página, digitando-os diretamente no Dremweaver, usado mais por profissionais avançados. Exemplos de códigos: HTML, ASP, PHP, JSP, etc.

 

Fig.1.0

 

1.1 Área de Trabalho (Conhecendo a Workspace)

 

A área de trabalho do Dreamweaver 8 apresenta todas as janelas e painéis em uma única janela maior do aplicativo.(Veja fig.1.1)

 

 

O Dreamweaver possui uma área de trabalho que pode ser adaptada tanto para usuários inciantes quanto para usuários avaçandos.

 

1.1.1 Conhecendo um a um

 

» Barra inserir: Possui botões para inserção de vários objetos, como, formulários, tabelas e uma imagem. Esses botões estão divididos em opções, são elas: Common, layout, forms, text, HTML, Application, Flash elements e Favorites.

 

 

» Barra de ferramenta do documento: Possui botões que permite alterar as formas de visualizações do documento: Code (Visualização do Código), Split (Visualização do Código e do projeto) e Design (Visualização do Projeto).

 

» Janela do Documento: Mostra o documento que está aberto atualmente.

 

» Grupo de Painéis: Painéis folhas de estilo, File, Application, tag inspetor.

 

» Painel Site: Visualizar a estrutura de arquivo do site.

 

» Inspetor de Propriedades: Permite verificar e editar as propriedades do elemento da página que estiver selecionado.

 

» Seletor de tags: Orientação de tags atuais, ou seja, onde está posicionado o cursor.

 

1.1.2 Ajustando o tamanho da janela do documento

 

Na barra de status da janela do documento encontram-se as dimensões atuais da mesma em pixels. Clicando no tamanho da janela exibirá o menu pop-up Tamanho da janela, onde você encontrará valores pré-definidos que lhe ajudarão a dimensionar a janela em um tamanho especifico.

 

 

1.1.3 Visualizações do Documento

 

O Dreamweaver, como citado acima, possui três modos de visualizações dos documentos, Code, Split e Design. Iremos agora conhecer cada um dele para que você analise e verifique qual modo você, mas se adapta.

 

Code: Iremos trabalhar digitando diretamente o código da página, desde o HTML até a linguagens avançadas como PHP, entre outros.

 

 

Split: Com esse tipo de visualização iremos além de digitarmos ou acompanharmos o código, também temos uma visualização parcial do layout do site, podendo também trabalhar com o layout.

 

 

Design: Com essa visualização iremos apenas trabalhar com o layout da pagina, não tendo contato direto com o código. Mais adequado para pessoas que estão iniciando;

 

 

Bom Pessoal, nessa tutorial iremos parar por aqui. Tratamos apenas do conhecimento do programa. Peço que voltem e acompanhe as outras que serão bem atrativas, trataremos de toda a manipulação do Dreamweaver, desde a configuração de um novo site até banco de dados, folhas de estilos e outras. Espero vocês na próxima, até mais.

 

Glossário:

 

Layout: é um esboço mostrando a distribuição física e tamanhos de elementos.

 

WorkSpace: Área de trabalho.

 

 

Hudson da Silva Sainça.

 

“Tá tudo na mente! Se é que você me entende

 

Tá tudo na mente! Quem sabe sabe, quem não sabe aprende

 

Tá tudo na mente! E o que tá nela ninguém tira da gente

 

Tá tudo na mente.” (Gabriel, O Pensador)