Como começar a criar um site no Dreamweaver MX

Antes de começarmos a criar um site, é extremamente importante entendermos qual a sua real necessidade!
Muitas pessoas acham que para começar a criar um site no Dreamweaver, basta clicar em File e logo em seguida abrir um arquivo ou criar um novo. O que estas pessoas não sabem, é que desta forma, estariam impossibilitadas de fazerem alguns trabalhos, como por exemplo o uso de algumas extensions (extensões, assunto não abordado neste tutorial!).
Criando um site a partir do menu Site, nossa vida é facilitada ao extremo pois desta forma o Dreamweaver pode nos informar de algum link "quebrado", pode definir o caminho de uma imagem corretamente e muitas outras vantagens - como por exemplo a utilização do FTP ! Isso mesmo, o Dreamweaver possui no painel Site, a opção de trabalharmos com FTP (desde que este esteja previamente configurado) ;-)
Para começar, clique em Window (Janela) e depois em Site - ou simplesmente aperte sua tecla F8 conforme indica a figura abaixo:

Após isso o Dreamweaver nos mostrará a tela conforme a figura indica abaixo. Clique então em Site e depois em New Site (Novo Site).

Perceba na próxima imagem que o Dreamweaver nos oferece a opção Basic (Básica) e a opção Advanced (Avançada). Neste tutorial abordaremos o modo avançado, já que nos oferece uma maior possibilidade de configuração. Perceba, na figura abaixo, que o painel nos oferece as seguintes opções:

Local Info - Informações locais (de sua máquina)
Site Name: Local onde você deve colocar o nome do Site
Local Root Folder: Local onde está a pasta que contém os arquivos do site. Clique na "pastinha" e indique o local.
Refresh Local file list Automatically: Deixe esta opção marcada para que o Dreamweaver atualize a lista de arquivos automaticamente
Default Images Folder: Pasta que contém as imagens do site
HTTP Adress: endereço http de seu site
Cache: mantenha esta opção marcada para que o Dreamweaver mantenha as informações do site e acelere o uso do painel Asset, controle de links, mapa do site e outras características/vantagens.

Remote Info - informações remotas

Em informações remotas, indicaremos ao Dreamweaver qual é o tipo de acesso remoto que utilizamos para envio de arquivos de nossa máquina para o servidor. Um dos modos mais utilizados, é com certeza, o FTP que abordaremos neste tutorial. Em Access indicamos qual o tipo de acesso, no nosso caso, o FTP.
FTP Host: endereço do ftp, que geralmente é: ftp.seusite.com.br. Esta informação você deve consultar em seu servidor ;)
Host Directory: diretório do site no server. Deixe esta opção vazia
Login: Aqui você deve digitar o Login, ou nome de usuário, necessário para conectar ao FTP. Novamente, esta informação deve ser pedida ao servidor
Password: A senha que você deve digitar para ter acesso ao FTP, que deve ser consultada no servidor que hospeda o site
Perceba ainda que o Dreamweaver nos dá a opção de configurarmos um Firewall e ainda utilizar SSH. Caso queira, você pode configurar o firewall clicando em Firewall Settings, porém deve-se ter muito cuidado e somente mexer nesta opção caso você tenha certeza do que está fazendo pois este tutorial não aborda o assunto Firewall ...
Há ainda duas opções para marcarmos:
Automatically upload files to server on save
Enable file check in and check out

Aconselho que você deixe desmarcadas estas opções: você já imaginou se a cada vez que você salvar um arquivo o Dreamweaver conectar ao servidor FTP para enviar o mesmo?! Não dá né?!

Testing Server - Servidor de testes
Caso você esteja trabalhando com alguma linguagem dinâmica para web, como ASP, JSP ou PHP por exemplo, pode definir um servidor de testes local para testar seus scripts sem ter que enviar os arquivos ao servidor. Em Server Model  você deve indicar ao Dreamweaver qual a linguagem utilizada. No caso deste tutorial, coloquei PHP MySQL como xemplo. Em Access você define o tipo de acesso, que em nosso caso é local/network já que o servidor está nesta máquina. Em Testing Server Folder você deve indicar o caminho da pasta do servidor de testes. Marque também a opção Refresh Remote list Automatically. Em URL Prefix você deve definir o prefixo que está configurado no servidor de web, que geralmente é http://localhost

&ampamp;amp;lt;a href="http://moads.valuead.com/default_reference?pid=70175&ampamp;amp;amp;gid=16" target="_blank"&ampamp;amp;gt;&ampamp;amp;lt;img src="http://moads.valuead.com/default_image?pid=70175&ampamp;amp;amp;gid=16" border="0"&ampamp;amp;gt;&ampamp;amp;lt;/a&ampamp;amp;gt;

O Dreamweaver ainda nos oferece outras opções pouco exploradas pela maioria dos usuários, porém não menos importante! São elas:
Cloaking: Permite excluir pastas e arquivos de todo o site.
Design Notes: Controle de informações adicionais relativas aos documentos, como, por exemplo comentários acerca do status do arquivo.
Site Map Layout: Mapa do layout do site, opções para definir o número de colunas exibidas por exemplo.
Neste tutorial, deixaremos estas opções com os valores padrões (default). Clique em OK para terminar de criar o site! O Dreamweaver mostrará uma tela dizendo que o cache e depois o painel mostrará os arquivos que você possui na pasta do site, conforme indica a imagem a seguir:

Pronto, você acabe de criar um site no Dreamweaver ! Fácil não?! E além de fácil, este recurso poupará muito tempo e trabalho, acredite! ;)

Timeline no Dreamweaver MX

Você já trabalhou com timeline no Dreamweaver?! Não sabe pra que serve esta ferramenta, que é no mínimo, interessante?! Pois bem, hoje iremos aprender um pouco mais sobre esta ferramenta, inclusive com um exemplo! ;)
Bem, a Timeline, ou simplesmente "linha do tempo", serve para muita coisa! Você pode trabalhar desde menus avançados e jogos até colocar aquelas imagens "flutuantes" em seu site! E é justamente este o exemplo que utilizaremos para explicar sobre o uso da Timeline! Vamos lá?! Primeiramente, você deve abrir o painel da Timeline, clicando em Window/Others/Timeline ou simplesmente apertando Alt+F9, conforme indica a figura:

Você terá um painel semelhante ao da figura abaixo:

Na figura acima você pode perceber que alguns itens estão numerados! Confira o significado de cada um:
1 - Neste campo é que fica o nome da Timeline que você está utilizando
2 - Indica o Frame que você está, que no caso é o Frame 1
3 - Indica o FPS (Frames per second ou frames por segundo)
4 - Autoplay: Caso você selecione esta opção, a timeline irá começar a rodar a animação automaticamente
5 - Selecione esta opção para que a animação fique em Loop
Agora que você já conhece a Timeline, vamos utiliza-la para construirmos um efeito bastante utilizado em alguns portais. Vamos começar selecionando a ferramenta de criação de camadas e criando uma camada no site, conforme indica a figura abaixo:

Agora, insira uma figura - no nosso caso um GIF - dentro da camada que você acaba de criar, ajustando a camada conforme indica a figura:

Agora, clique com o botão direito no Frame 1 da Timeline e escolha Add Object conforme indica a figura:

Perceba agora que a Timeline ficou com o objeto dentro dela:

Agora, para animarmos a nossa camada, clique no último frame de sua animação, que no nosso caso é o 15 e arraste a Camada para outro lugar da tela que você desejar. Marque também as opções: Autoplay e Loop e caso queira altere o número de FPS. Sua Timeline deve agora ter ficado mais ou menos assim:

Perceba na imagem acima um círculo que fiz de cor vermelha. Ao clicar nele, você percebe que o painel Behaviors está da seguinte forma:

O que o Behavior está indicando?! Bem, ele está informando para a Timeline: Ao chegar no Frame 16 vá para o Frame 1 da Timeline. Isso acontece porquê selecionamos a opção Loop da Timeline para que nossa animação não pare!
Agora muitos devem estar se perguntando: "Opa! O painel Behavior nos dá funções para controlarmos a Timeline?" E minha resposta é: Sim!!! Se você der uma olhada, no painel Behaviors há um menu chamado Timeline e ele nos dá algumas opções...
Dê uma boa "fuçada" neste painel para descobrir coisas realmente interessantes ! Bom, agora que já fizemos nossa animação, salve o documento e aperte F12 para ver uma prévia! Agora você já sabe pra que serve uma Timeline e pode começar a soltar a imaginação para criar efeitos interessantes! ;)
Produzido com base no software Macromedia Dreamweaver MX - Inglês

Behaviors no Dreamweaver MX

Mais uma vez a Macromedia sai na frente dos concorrentes e nos oferece uma ferramenta que é uma verdadeira "mão na roda" em quesito poupar tempo/agilizar nosso trabalho! Com os Behaviors, muitas funções que perderíamos um tempo significativo "escrevendo" o código já estão prontas!
Vejamos o que são Behaviors, quando e como utiliza-los:
Os Behaviors são comportamentos (Behaviors = comportamentos em Inglês) que nos poupam muito tempo! Com ele, podemos por exemplo animar uma janela do Browser, controlar a timeline, abrir uma nova janela, colocar um som de fundo no site e assim por diante. Aprenderemos neste tutorial, a função de cada Behavior e quando utiliza-lo. Vamos lá?!
Bom, se você ainda não tem o painel de Behaviors aberto, proceda da seguinte forma:
Clique em Window e depois em Behaviors conforme indica a figura abaixo, ou simplesmente aperte Shift+F3. O Behavior está dentro do painel Design!

Vamos entender um pouco sobre o painel do Behavior e seus botões/funções. Analise a figura a seguir e depois veja o significado de cada uma das funções indicadas!

Perceba que na imagem acima existe um círculo branco. Ao clicarmos neste botão, ele nos mostrará as opções:
- Rename Panel Group: Renomear o painel. Caso você queira trocar o nome do painel Design por "Abacaxi" por exemplo, é esta função que deve utilizar.
- Maximize Panel Group: Caso queira maximizar o painel Design
- Close Panel Group: Caso queira fechar o painel.
Neste painel Design, temos 3 abas: CSS Styles, HTML Styles e Behaviors, que é o que estaremos utilizando! Perceba ainda que existe um "+". Ele serve para adicionarmos funções ao site/objeto. Eu circulei também a frase "<body> Actions". Ela está indicando que estaremos adicionando ações/funções ao "body" (ou corpo) da página!
Agora que você conhece o painel, que tal conhecer as ações/funções?! Ao clicar no "+" você encontrará um painel semelhante ao da imagem abaixo:

Adiante, veremos qual a função de cada ação deste painel! Porém, antes disso veremos algumas observações importantes e interessantes para podermos trabalhar melhor com o painel.

Observações
Antes de começarmos a trabalhar com as ações, devemos estar atentos a algumas observações. O painel de Behaviors ainda nos traz uma série de opções. Veremos algumas delas abaixo! No final do painel, temos a opção "Show Eventos For" conforme indica a figura abaixo:

Esta opção é interesante pelo seguinte: imagine que estamos trabalhano com o Browser IE 6.0 e sabemos que a maioria dos usuários de nosso site também utilizam o IE 6.0. Porém, os usuários que utilizam uma versão anterior não poderão utilizar/visualizar algumas ações que utilizarmos, pois o Browser não suporta. Pois bem, ao selecionar o IE 5.0 por exemplo, o Dreamweaver nos mostrará somente as ações que são compativeis com este Browser, evitando assim que utilizemos uma ação não suportada!
Logo abaixo de "Show Events For" você encontra:

Esta opção "Get More Behaviors" serve para fazermos downloads de novas ações para o nosso painel de Behaviors. Ao clicar nela, o Browser será aberto e direcionado para o site de Downloads da Macromedia.
Além disso, em algumas ações o Dreamweaver nos dá mais do que uma opção. Quando isto acontecer, será mostrado o símbolo ">" logo após o nome da ação. Basta parar o mouse em cima para ver quais são as opções, conforme indica a figura abaixo:

Quando você utilizar alguma ação, dependendo dela, você terá uma série de condições para que ela ocorra. Se por exemplo, você quiser que a Janela do Browser seja animada ao carregar, basta clicar na "setinha" e escolher a opção "onLoad". A figura abaixo nos dá uma idéia de como funciona:

Agora que já vimos algumas observações, podemos começar a trabalhar com as ações. A seguir veremos qual a função de cada uma delas. Vamos lá?!

Função das ações do painel Behaviors

- Animate Browser Window: Traduzindo para o português, seria algo como: "Animar Janela Browser". Você já viu aqueles sites em que a Janela é animada, começando pequena e se extendendo até seu tamanho normal?! Pois é exatamente isto que esta ação faz!
- Call JavaScript: Caso você queira "chamar" algum JavaScript em seu site, basta clicar nesta ação e indicar ao Dreamweaver qual o código.
- Change Property: caso você queira mudar a propriedade de algum objeto por exemplo. Entre as opções que podemos mudar estão: Layer (camada), Imagem, Formulário, Div e assim por diante
- Check Browser: Checa qual o Browser do usuário. Nos dá a opção ainda de direcionarmos o usuário para um determinado site de acordo com a versão de seu Browser. Muito interessante!
- Check Plugin: Checa algum Plugin. Por exemplo, pode checar se o usuário possui o plugin do Flash. Caso tenha, vai para o site principal. Caso contrário, vai para o site de download do plugin.
- Control Shockwave or Flash: serve para controlarmos um Schockwave por exemplo. É bastante interessante, dependendo do caso.
- Drag Layer: esta opção é muito legal. Caso você possua uma camada em seu site, pode dar a opção do usuário arrasta-la para qualquer canto do site! Basta utilizar esta ação!
- Go To URL: mais conhecido como redirecionamento.
- Hide Pop-Up Menu: esconder o menu Pop-Up
- Jump Menu: "pular" o Menu
- Open Browser Window: serve para abrirmos uma nova Janela. Por exemplo, ao clicar na imagem, será aberta uma nova janela com uma versão maior da imagem.
- Play Sound: Caso você queira colocar um som de fundo no site.
- Pop-Up Message: Caso você queira inserir uma mensagem Pop-Up no site. São aquelas famosas -e irritantes na maioria dos casos- janelinhas de aviso!
- PreLoad Images: caso você queira que as imagens sejam pré carregadas antes de exibir o site.
- Set Nav Bar Image: setar a imagem da barra de navegação
- Set Text: esta ação nos dá as opções:
Set Text of Frame: Setar o texto do frame
Set Text of Layer: Setar o texto da camada
Set Text of Status Bar: Setar o texto da barra de Status
Set Text of Text field: Setar texto de um campo de texto
- Show Pop-Up Menu: Mostrar o menu Pop-Up
- Show-Hide Layers: Mostrar ou ocultar a(s) camada(s)
- Swap Image: Trocar imagem. Se você quiser por exemplo, que ao usuário passar o mouse em cima de uma imagem ela seja trocada, utilize esta ação.
- Swap Image Restore: Restaurar a troca de imagem.
- Timeline: nos dá as opções para controlar a timeline:
Go To Timeline Frame: Ir para o frame indicado da timeline
Play Timeline: "tocar" ou começar a timeline
Stop Timeline: parar a timeline
- Validate Form: esta ação é muito útil e muitas pessoas desconhecem sua função e acabam programando tudo na mão! Ela serve para validarmos um formulário. Com ela, você indica quais campos serão obrigatórios, quais são numéricos, quais serão de e-mail e assim por diante!
Bom, é isso aí! Agora é só começar a utilizar os Behaviors e poupar muito tempo e trabalho. Aconselho que você teste um por um em sua casa/trabalho para que possa aprender ainda mais sobre cada um deles. ;)

Painel CODE Dreamweaver MX

Neste tutorial estaremos aprendendo a trabalhar com o Painel CODE do Dreamweaver MX. Com certeza, este painel lhe poupará muito tempo e trabalho! Vejamos com mais detalhes do que se trata:

O que é Painel CODE ?
Bem, o painel CODE é uma painel do Dreamweaver MX que possui 3 "janelas", sendo elas:
Tag Inspector: Inspetor de Tags do site. Com ele pode-se acrescentar, deletar e editar tags
Snippets: Uma série de "Snippets" (códigos prontos) esperando para serem utilizados
Reference: Como o próprio nome já diz, é uma painel de Referência. Temos opções de referências de várias Linguagens, inclusive ASP/PHP.
Agora vamos deixar de "blá blá blá" e vamos logo começar a trabalhar com o tal do painel CODE. Abra o painel procedendo conforme indica a figura ou simplesmente apertando F9.

Você terá em sua tela um painel bastante simpático e principalmente útil, conforme indica a figura:

Perceba que temos as 3 janelas dentro de um mesmo painel. Esse mesmo painel nos oferece algumas opções de configurações conforme veremos a seguir:

Na imagem acima temos alguns itens numerados.Veja o significado de cada um deles:
1: Um painel que nos permite editar algumas opções, como por exemplo: "Editar", "Ajuda", "Maximizar Painel", "Fechar painel", "Remover Tags selecionadas" e assim por diante.

2: Botão que nos permite Atualizar a Janela Tag Inspector
3: Botão que nos permite editar a Tag. Veja:

Neste caso, estamos editando a Tag BgSound e sua "sub-tag" chamada Loop, que configura o Loop do som de fundo. Em value (marcado pelo quadrado vermelho) colocamos o valor do Loop que desejarmos e em Preview temos uma prévia do código! Super jóia não?! :)
Agora, vamos trabalhar/explorar um pouco mais esta janela chamada Tag Inspector.
Vamos supor que você queira modificar algumas propriedades do "corpo" de sua página, também conhecido como Body. Muito bem, abra o painel code e a janela Tag Inspector e em seguida, procure pela tag BODY.
Ao clicar na Tag BODY o Dreamweaver nos fornecerá todas as opções de configurações possíveis para esta TAG, cabendo a nós a tarefa de simplesmente alterar os valores de acordo com nossa conveniência. No exemplo da figura abaixo, estamos modificando a cor de fundo (bgcolor). Para isso, basta clicar em bgcolor e depois escolher a cor desejada. Perceba ainda que podemos alterar a cor dos links ativos (alink), o tamanho da margem esquerda (leftmargin) e assim por diante.
Para quem está bastante acostumado com código HTML e quer poupar um tempo considerável, este painel é mais do que aconselhado! É quase obrigatório!

Agora que você já sabe para que serve a Janela de Tag Inspector, está na hora de aprendermos um pouco mais sobre Snippets, não acha?! Vamos lá!

Bem, agora iremos aprender um pouco mais sobre o painel de Snippets. Este painel foi uma sacada muito boa por parte da Macromedia. Com ele, os usuários (principalmente os power users) podem poupar muito tempo e trabalho.
Imagine o seguinte: Você quer colocar em um formulário a opção da pessoas escolher seu ano de nascimento e para isso, quer construir um menu Dropdown com os anos de 1900 a 2000. Já pensou ter que colocar todos os anos?! Não daria um super trabalho?! Mas e se você já tivesse este menu pronto, bastando seleciona-lo e arrasta-lo para o campo de formulário?! Não seria uma beleza?! Pois é...
A Macromedia pensou nisso tudo e nos oferece esta opção maravilhosa! Vamos ver como funciona?!
Então abra o painel de Snippets e encontre algo semelhante a figura a seguir:

Perceba que neste painel temos 4 opções logo abaixo, conforme indica o quadrado vermelho na figura acima. Vejamos o significado de cada um destes botões:
1. Este primeiro botão (ícone da pastinha) serve para criarmos um novo diretório de Snippets
2. Este botão serve para criarmos um novo snippets
3. Este serve para editarmos um snippet já existente
4. Adivinhe pra que serve este?!?!! Hehe este serve para deletarmos um snippet
O painel de Snippets nos oferece os seguintes diretórios:
- Acessible (acessibilidade)
- Comments (comentários)
- Content Tables (tabelas)
- Footers (rodapés)
- Form Elements (Elementos de formulário)
- Headers (Cabeçalhos)
- JavaScript (Alguns códigos prontos para uso)
- Meta (Alguns códigos Meta)
- Navigation (Códigos que facilitam navegação)
- Text (Algumas opções de texto)
Agora, vamos aprender a utilizar um Snippet que já vem com o Dreamweaver MX. Digamos que você quer inserir o Menu Dropdown que já foi comentado no Início desta página. Muito bem, abra o painel e clique em Form Elements e Depois em Dropdown Menus conforme indica a figura:

Neste exemplo, pegaremos um menu com os Meses do Ano. Clique neste Snippet e simplesmente arraste-o para a tela, no campo de formulário e pronto!! Você já tem o Menu prontinho! Agora me diga se é ou não é uma beleza!?
Agora, vamos supor que você queira criar alguns Snippets para facilitar ainda mais a sua vida. Neste exemplo estaremos criando um Snippet de Texto Ok?! Então clique na pasta de Text ou crie uma nova pasta de acordo com sua preferência. Clique no Botão indicado na figura abaixo:

Após clicar neste botão, você terá a seguinte tela:

Agora basta configurar o Snippet de acordo com sua preferência. Neste exemplo, coloquei o Nome do Snippet, sua descrição (Description), seu tipo e seu código (antes e depois). Neste exemplo, todos os textos serão convertidos para a fonte Verdana com tamanho 2 quando utilizarmos este Snippet. Clique em OK e seu Snippet estará prontinho para ser usado! ;)

Agora só falta aprendermos como utilizar o Painel de Referência. Vamos lá?!

Para terminar vamos ver para que serve e como utilizar o painel Reference. Este painel serve como referência - muito boa diga-se de passagem - principalmente para Web Developers na hora de fazer alguma consulta.
Ao abrir o painel Reference você tem a seguinte tela:

Em "Book" escolhemos qual a referência que devemos consultar, podendo ser por exemplo:
- HTML
- CSS
- Macromedia CFML
- JavaScript
- ASP
- JSP
Após selecionarmos em Book qual será a linguagem a ser consultada, basta selecionarmos a TAG desejada e sua "Sub-Tag" caso seja necessário.
No exemplo a seguir estaremos fazendo uma consulta em HTML sobre a Tag BGSOUND. Note na figura abaixo que o Dreamweaver nos dá a descrição da TAG (inclusive versão de Browser suportada).

Caso queira consultar uma das "Sub-Tags" da TAG BGSOUND proceda como a figura indica:

Neste caso, selecionamos a "Sub-Tag" chamada "Loop" e o Dreamweaver nos retorna a seguinte tela:

Nela, podemos conferir para que serve o LOOP, qual versão de Browser suportada e assim por diante. Caso queira fazer uma consulta sobre CFML por exemplo, basta prosseguir como indica a figura abaixo:

Bom pessoal, por enquanto é só! Espero que tenham aprendido sobre o Painel CODE e possam colocar em prática tudo o que vimos. Aliás, por falar em prática, abra já o seu Dreamweaver e trate de começar a praticar! ;)
Tutorial produzido utilizando Macromedia Dreamweaver MX Versão em Inglês

Integrando Fireworks com Dreamweaver MX

Neste tutorial veremos como integrar o Fireworks MX com o Dremaweaver, processo que nos poupará algum tempo e trabalho na maioria dos casos! Para quem já é acostumado a trabalhar com os dois, o processo torna-se uma verdadeira "mão na roda". Vamos lá ...
Vamos supor que você esteja criando um site que possui uma imagem como testeira - porém após inserir a imagem no Dreamweaver você percebe que ela quebrou o Layout por causa de seu tamanho (ou então você quer fazer alguma alteração estética na mesma). Graças à Macromedia, este processo pode ser bastante rápido e fácil:
Clique na imagem que você deseja alterar e perceba que na barra de propriedades aparecerá o botão Edit, conforme indica a figura abaixo:

Ao clicar no botão Edit, o Dreamweaver abrirá automaticamente o Fireworks MX para que possamos editar a imagem. Ao ser aberto, o Fireworks mostrará a seguinte mensagem:

Na imagem acima o Fireworks está perguntando se desejamos utilizar algum documento do Fireworks existente como base da imagem (ou seja, se a imagem possuir um PNG, podemos utilizá-lo para fazer a alteração): neste caso não possuímos o PNG e devemos clicar no botão No. Agora basta fazermos a alteração e quando esta estiver pronta, clicar no Botão Done (localizado no canto superior esquerdo da janela) conforme indica a figura:

Após clicar em Done o Fireworks enviará a imagem editada de volta para o Dreamweaver e pronto!
Nós podemos utilizar alguns recursos enquanto criamos imagens no Fireworks: suponha que você está criando uma imagem no Fireworks e quer enviá-la para o Dreamweaver ou outro software (Photoshop, GoLIve!, FrontPage, FreeHand). Como fazer ?
Para isso, basta utilizarmos o botão de Integração do Fireworks localizado no canto superior direito da janela da imagem:

Neste exemplo estaremos exportando um HTML para o Dreamweaver: basta selecionar na pasta Dreamweaver a opção Export HTML. O Fireworks pedirá para indicarmos o local e pronto!

É aconselhável que você teste cada tipo de Integração/Exportação pois elas podem poupar muito tempo e facilitar muito sua vida! ;)

Integrando Flash com Dreamweaver MX

Uma das muitas vantagens de se trabalhar com a suíte para Web da Macromedia é a integração fácil e rápida entre os softwares: neste tutorial eu abordarei uma rápida integração entre o Flash e o Dreamweaver MX, que poupará muito tempo e trabalho! Vamos começar:
Ao inserir um arquivo do Flash (usualmente um swf) no Dreamweaver, você notará que na barra de Propriedades (Properties / Ctrl + F3) você tem algumas informações sobre o arquivo além de algumas opções adicionais de configuração. Veja a figura abaixo:

Note que este painel nos informa o tamanho do filme (circulado de vermelho acima) e uma série de botões de configuração. Vejamos a função de cada um deles:
Loop: Deixe esta opção marcada caso queira que seu filme fique dando Loop, ou seja, não pare de "tocar";
Autoplay: Deixe esta opção caso queira que seu filme começe a "tocar", ou inicie, automaticante;
V Space: Espaçamento vertical;
H Space: Espaçamento horizontal;
W: Largura (width) do filme;
H: Altura (Height) do filme;
File: Indica o local em que o filme se localiza;
Quality: Escolha a qualidade que você quer para o filme;
Scale: Determine a escala do filme;
Align: Define o alinhamento do filme na página;
Bg: Determina a cor do fundo;
Parameters: Caso queira adicionar alguns parametros ao filme;
Play: Tocar/demonstrar o filme;
Reset Size: Resetar o tamanho;
Finalmente, perceba na imagem acima que o botão EDIT está marcado em vermelho para destacar: é neste botão que devemos clicar caso seja preciso fazer alguma alteração no filme. Clique nele: o Dreamweaver abrirá o Macromedia Flash. O Flash então pedirá para que você indique o arquivo de edição do swf. Indique e clique em Abrir:

Feito isso nós teremos o filme em modo de edição, bastando alterar o que for necessário e clicar no botão Done localizado no canto superior esquerdo da janela.

Após clicar em Done, o Flash exportará o filme de volta para o Dreamweaver e pronto: a edição está feita!

Agora só falta você praticar ... Sempre que precisar alterar um filme, basta proceder desta forma! ;) ...

Utilizando FTP do Dreamweaver MX

Muitas pessoas costumam utilizar um programa específico para envio de arquivos para o servidor via FTP. Com o Dreamweaver MX isto não é necessário, já que o próprio software - extremamente completo diga-se de passagem - já nos oferece esta opção, o que é uma verdadeira "mão na roda"! Neste tutorial veremos como utilizar esta ferramenta ...
Vamos começar abrindo o painel "Files" do Dreamweaver, que é o local onde o software FTP está localizado. Para isto, aperte a tecla F8 de seu teclado e veja a seguinte tela:

Perceba na imagem acima que há uma quadrado vermelho destacando um botão. Clique neste botão para que seu painel fique da seguinte forma:

Deste modo você pode ver seus arquivos e os arquivos que estão no servidor (do lado esquerdo). Na imagem acima nós não vemos os arquivos do servidor pois não estamos conectados e ainda não definimos os parâmetros de conexão. Para isto, clique em "Site" e depois "Edit Site":

Na próxima janela, selecione o seu site e clique em "Edit". Você verá a tela abaixo:

Agora definiremos o servidor: em "Access" escolha FTP e em "FTP Host" defina o endereço do seu FTP (caso não tenha, entre em contato com seu servidor para que eles lhe indiquem qual o endereço a ser utilizado). Em "Login" digite seu Login e em "Password" digite sua senha. Clique em OK e o Dreamweaver criará o cache do site.
Veja na imagem abaixo algumas explicações sobre os botões que você encontra no painel:

Agora é só conectar e enviar seus arquivos normalmente. Caso você queira, você pode "arrastar" os arquivos, assim como faz no "Windows Explorer". Fácil e prático não é mesmo?!