Dreamweaver MX 2004 Básico – Parte 01

Introdução ao Dreamweaver MX 2004

 

Objetivo: Conhecer o Dreamweaver MX 2004, bem como sua interface, menus, ferramentas e paletas; definir um site no Dreamweaver.

 

Características principais

 

O Dreamweaver une o design e o código num só produto. Trabalhe com uma interface personalizada por você. Desenvolva websites com layouts fantásticos utilizando recursos de integração e design fundamentados em CSS.

 

No Dreamweaver, é você quem decide como a interface deve funcionar pois ela é personalizável!

 

J2EE, PHP e.NET são tecnologias que podem ser usadas no Dreamweaver com tranqüilidade e, além disso roda em Windows e Machintosh e possui integração com outros produtos da Macromedia, e Microsoft Office.

 

Workspace

 

O Dreamweaver utiliza MDI (Multiple Document Interface), onde todas as janelas e painéis do documento são integradas em uma única janela do aplicativo. Ao inicializar o Dreamweaver pela primeira vez, é exibida uma janela onde você pode escolher qual o layout mais adequado para você trabalhar.

 

 

Tela Inicial

 

Após selecionar o layout desejado na janela “Workspace Setup”, é exibido um menu onde você escolhe o que deseja fazer no Dreamweaver.

 

Interface

 

 

1. “Menu Principal” .
2. “Insert” - barra de ferramentas que possui os principais botões para inserção de objetos num documento.
3. “Document” - através desta barra de ferramentas você seleciona o tipo de visualização do documento (Code, Split, Design), insere o título do documento (Title), checa se há erros no código (No Browser Check Errors), seleciona o gerenciamento de arquivos (File Management), visualiza a página em um browser (Preview/Debug in Browser), atualiza a visualização do design (Refresh Design View) ou seleciona outras opções de visualização (View Options).
4. “Panels” - são os painéis de design, código, arquivos, ou outro que você exiba através do menu Windows.
5. “Tag Selector” - seletor de tags exibe, em seqüência, da direita para a esquerda as tags que estiverem sendo editadas. É utilizado tanto para mostrar a hierarquia das tags quanto facilitar a seleção de objetos no momento do design.
6. “Windows Size” – permite que você redimensione a janela Documento em tamanhos predefinidos contidos num menu pop-up (somente no modo Design). Pode-se também verificar o tamanho e velocidade de download estimados para o documento que está sendo editado.
7. “Properties Inspector” – inspetor de propriedades, com opções para configurar um objeto de design selecionado.

 

: Outras barras de ferramentas e/ou painéis podem ser exibidos a qualquer momento utilizando o menu Window.

Definindo um Site no Dreamweaver

 

É muito importante que seja definida um local no disco para armazenar os arquivos do site. O ideal é criar uma pasta para cada site que será feito para que haja organização no arquivos e facilidade em encontrá-los tanto durante o desenvolvimento quanto na hora que o site tiver que ser publicado.

 

O Dreamweaver possui um assistente de definição de sites. Para utilizá-lo:

 

1. Na “Tela Inicial” do Dreamweaver, selecione a opção “Dreamweaver site...”.
2. Será exibida na tela a janela “Site Definition...”, no passo “Editing Files”. Digite um nome para seu site e clique no botão Next.

 



 

3. No próximo passo, “Editing Files, Part 2”, deve ser definido se o site será baseado em tecnologia de servidor ou não. Para esse tutorial não utilizaremos tecnologia de servidor, portanto, selecione a opção “No, I do not want to use a server technology” e clique no botão “Next”.

 



 

4. No passo “Editing Files, Part 3”, será definido como e onde serão trabalhados os arquivos durante o desenvolvimento do site.
1. Selecione a primeira opção para que os arquivos sejam trabalhados na sua máquina.
2. Digite (ou selecione clicando no ícone da pastinha) o caminho onde serão armazenados os arquivos do site no seu computador.
3. Clique no botão “Next”.

 



 

5. Em “Sharing Files”, é onde definimos como será feita a conexão com o servidor remoto. Já que não utilizaremos servidor remoto, selecione a opção “None” e clique em “Next”.

 



 

6. “Sumary”. Confira as configurações setadas para o seu site e clique no botão “Done” para concluir a criação do site.

 



 

7. Note que no painel “Files”, está sendo exibida uma pastinha com o nome do site que você acaba de criar.

 

 

Uma vez criado um site, você pode adicionar a ele páginas do tipo HTML, Coldfusion, PHP, ASP (JavaScript ,VBScript, .NET C# ou .NET VB), JSP ou CSS. Esse assunto será tratado no próximo capítulo.

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11