Coluna Dreamweaver - Framework Spry: Effects

Introdução

Salve Pessoal! Recebi alguns e-mail querendo algo mais complexo, que possa integrar as varias funções do Spry. Mais para que possamos fazer isso devemos conhecer antes todas as funções do Spry. Vale ressalta também a dificuldade em encontrar documentação sobre a utilização do Spry pelo Dreamweaver. Então nesse tutorial vamos conhecer o Effects do Spry, fiz alguns exemplos que podem ser visto clicando aqui.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui

Conceitos

O Effects é um conjunto de efeitos visuais do Frameworks Spry, que pode ser adicionado em diversos elementos do HTML. No Dreamweaver os efeitos podem ser adicionados no modo Design, sem a necessidade de trabalhar diretamente com código, falicitando ainda mais a adição desses efeitos. O Effects fica localizado no Painel de Behaviors (Windows > Behaviors) como um comportamento normal, podendo ser ativado com diversos eventos.

Conteúdo

Appear/ Fade

Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela. Pode usar este efeito com todos os objetos do HTML exceto o applet, body, iframe, tr, tbody, ou th.Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Appear/Fade. A janela de configuração do efeito fade ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milissegundos.
Effect: Tipo de efeito podendo ser o Fade onde a camada vai sumindo aos poucos, ou Appear onde a camada vai aparecendo.
From: Tamanho da camada em porcentagem quando o efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito terminar

Blind

Esse efeito faz a camada selecionada subir ou descer lentamente semelhante a uma cortina que sendo aberta ou fechada. Pode ser usado somente com estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, ou pré. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Blind. A janela de configuração do efeito Blind vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou Blind Down aonde a camada vai descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.

Grow/ Shrink

Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, o pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Grow/ Shrink. A janela de configuração do efeito Grow/ Shrink vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou Shrink aonde a camada vai diminuir na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
To: Para que local a camada deve ir quando o efeito for selecionado podendo ser ao centro ou a esquerda superior.

Shake

Esse efeito faz o elemento selecionado dar uma tremida. Você pode usar este efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, ou table. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Squish

Esse efeito faz o elemento selecionado desaparecer. Você pode usar este efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Squish. A janela de configuração do efeito Squish vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Slide

Esse efeito faz uma transição podendo ser para cima ou para baixo. Você pode usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or cente. Esse efeito requer uma única tag ID e os efeitos dentro do elemento com tag ID. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos
Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide Down aonde a camada vai descendona tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar

Highlight

Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado com todos os objetos do HTML exceto o applet, body, frame, frameset, ou noframes. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Highlight. A janela de configuração do efeito Highlight ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente durante a duração do efeito

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br

Coluna Dreamweaver - Envio de formulário com ajax - Parte Final

Introdução

Salve Pessoal! Desculpe a demora, mais esse semestre estou muito atarefado.

Conceitos

Nesse tutorial você vai ver funções básica para manipulação de ficheiros utilizando o php, como por exemplo, abrir, fechar, ecrever e manipula as informações contida nele, e ainda criar cookies. Nessa parte do tutorial você vai construir dois página, uma responsável por manipular e escrever no ficheiro e outra que vai ser o grafico com os resultados da enquete.

Conteúdo

Crie uma nova página em PHP e salve com o nome de contar_votos.php, crie também um documento de texto (txt) e salve com o nome de resultat.txt. Não se esqueça de dar permissão de escrita no arquivo de texto(CHMOD 777).
Na primeira linha de comando antes de qualquer saida de código crie um cookie. A criação do cookie e feita pela função setcookie que necessita de três parâmestros nessa ordem; o primiero é o valor do cookie, o segundo o valor do cookie e o terceiro o prazo de duração do cookie. Nesse exemplo o nome do cookie vai ser ‘votacaoenquete‘ e o valor do cookie será ‘votado‘, pois quando o usuário acessar essa página o cookie será gerado para broquear o usuário e não permite que ele vote duas vezes, o tempo de duração do cookie fica a sua escolha.

<?php
setcookie(’votacaoenquete’, ‘votado’, time()+3600*24*30);
?>

Agora iremos colocar a mão na massa, crie uma variável para armazenar o local onde estar salvo o arquivo txt.

$fichier=”resultat.txt”;

Para abrir o arquivo txt utilize a função fopen. Crie uma variável ($pointeur) para armazenar o ponteiro de escrita e passar os dois parâmetros necessários, o primeiro é a variável que indica o local do arquivo ($fichier) a ser aberto e o segundo é o modo de leitura (r+), neste caso será aberto com permissão para escrita */

$pointeur=fopen($fichier,”r+”);

Crie outra variável ($enquete) para ler e armazenar o conteúdo do ficheiro em uma string. A leitura do arquivo txt é feita pela função fread que ler o arquivo e retorna uma string com o conteúdo, e necessita de dois parâmetros, o primeiro parâmetro é a string que armazena as configurações para abertura do arquivo ($pointeur). O segundo parâmetro determina até onde o arquivo será lido nesse caso está associado a função filesize para retornar o tamanho do arquivo ($fichier) e assim realizar a leitura de todo o arquivo

$enquete=fread($pointeur,filesize($fichier));

Após fazer a leitura do arquivo e armazenar seu conteúdo na string ($enquete), divida essa string em strings individuais, e em cada string individual será armazenado uma opção da enquete. A divisão da string e feita pela função explode, e utiliza como marcador de separação a vírgula(,). Assim os valores que estão antes de cada vírgula serão divididos e transformados em strings, podendo ser escrito e manipulado individualmente.

$enquete=explode(”,”,$enquete);

Crie uma variável ($reponse) para armazenar a opção que o usuário escolheu

$reponse = $_POST['reponse'];

Identifique a opção escolhida e some mais um no valor da variável.

$enquete[$reponse]++;

Para que o voto seja escrito na posição correta deve ser indicado a seqüência de escrita e armazenagem das strings. Como a string está dividida ele dever ser juntada na ordem correta, por exemplo, na primeira string fica armazenado os votos da primeira opção, cujo identificador é zero (value=”0″), na segunda string depois da virgula fica armazenado os votos da segunda opção, cujo o identificador é um (value=”1″) e assim por diante…

$enquete=$enquete[0].”,”.$enquete[1].”,”.$enquete[2].”,”.$enquete[3];

Reinicialize a posição do ponteiro de arquivos para o início

rewind($pointeur);

Utilizando a função fputs faça a gravação da string no arquivo

fputs($pointeur,$enquete);

Utilizando a função fclose feche e encerre a manipulação do arquivo

fclose($pointeur);

Pronto agora inclua a página com os resultados, que será construida na proxima etapa.

<?php include(’ resultados.php’); ?>

Como foi criado o cookie agora abra a página index.php que foi criada no tutorial anterior. Quando o usuário votar na enquete será gerado o cookie com o valor ‘votado’, para não permite que o usuário vote novamente iremos aplicar um teste de verdadeiro ou falso, se for verdadeiro que o cookie existe então mostre uma frase (echo “Você já participou !”) e escondar o botão submit, agora se esse teste for falso e o usuário ainda não votou então mostre o botão submit para que possa ser enviado o voto. Localize o botão submit e substitua por esse código

<?php
if ($_COOKIE['votacaoenquete'] == votado ){
echo “Você já participou !”;
}
else {
?>
<input name=”teste” value=”Enviar” onClick=”Spry.Utils.submitForm(’form1′, updateResponseDiv, {method:’post’, url:’contar_votos.php’});” type=”button”>
</p>
<?php } ?>

Criando a página para mostrar os resultados

Crie uma nova página para armazenar os resultados, essa página dever ter o mesmo nome que foi dado na hora que você incluiu na página conta_votos.php no meu exemplo o nome é resultados.php.
Dentro de um bloco de código PHP faça a inclusão da página que contém as configurações da enquete.

<?php include(’config.php’); ?>

Faça novamente a leitura do arquivo txt, como já expliquei no inicio e acho que você entendeu vou direto aos codigos

$fichier=”resultat.txt”;
$pointeur=fopen($fichier,”r”);
$enquete=fread($pointeur,filesize($fichier));
fclose($pointeur);
$enquete=explode(”,”,$enquete);

Como o arquivo já foi lido, e a string divida em strings individuais contendo os votos de cada opção da enquete. Crie uma variável ($total) para soma todos os votos, lembrando que as estrings estão dividias e nosso exemplo tem quatros opções.

$total=$enquete[0]+$enquete[1]+$enquete[2]+$enquete[3];

Crie outra variável ($longueur) para definir a largura máxima do gráfico.

$longueur=200;

Para criar os gráficos em colunas devemos trabalhar com uma coluna para cada opção da enquete, essa coluna será calculada através do total de votos da opção multiplicado pelo total geral de todas as opções, como a largura do gráfico será delimitada, divida a largura do gráfico pelo total de votos. Crie uma variável ($longueur) para cada opção da enquete essa variavel será a largura do grafico.

$longueur0=$enquete[0]*$longueur/$total;
$longueur1=$enquete[1]*$longueur/$total;
$longueur2=$enquete[2]*$longueur/$total;
$longueur3=$enquete[3]*$longueur/$total;

Como o numero com certeza ficou muito quebrado devemos arredondar utilizando a função round.

$longueur0=round($longueur0);
$longueur1=round($longueur1);
$longueur2=round($longueur2);
$longueur3=round($longueur3);

Crie uma nova variável ($pourcent), uma para cada opção da enquete, para pode calcular a porcentagem de cada opção e depois arredondá-las igual a anterior.

$pourcent0=100*$enquete[0]/$total; //Calcular porcentagem
$pourcent0=round($pourcent0,0); // Arredonda o a porcentagem

$pourcent1=100*$enquete[1]/$total;
$pourcent1=round($pourcent1,0);

$pourcent2=100*$enquete[2]/$total;
$pourcent2=round($pourcent2,0);

$pourcent3=100*$enquete[3]/$total;
$pourcent3=round($pourcent3,0);

Estamos na reta final. Crie uma nova tabela com 3 coluna e com 4 linhas uma linha para cada opção.
Na primeira coluna coloque a constante que armazena o nome da opção, lembre-se que ela esta no arquivo de configuração (config.php). Na segunda coluna coloque uma cor de sua preferência como fundo, e a largura dessa coluna coloque a variável que armazena a largura do gráfico ($longueur) . E na terceira coluna coloque o resultado em porcentagem que esta armazenado na variável $pourcent.

<table border=”0″>
<tr>
<td width=”80″><b><?php echo OPCAO1; ?></b></td>
<td width=”<?php echo $pourcent0;?>” bgcolor=”red”> </td>
<td> <?php echo “$pourcent0%”;?>
(<i><?php echo $enquete[0];?></i>)</td>
</tr></table>
<table border=”0″>
<tr>
<td width=”80″><b><?php echo OPCAO2; ?></b></td>
<td width=”<?php echo $pourcent1;?>” bgcolor=”green”> </td>
<td> <?php echo “$pourcent1%”;?>
(<i><?php echo $enquete[1];?></i>)</td>
</tr></table>
<table border=”0″>
<tr>
<td width=”80″><b><?php echo OPCAO3; ?></b></td>
<td width=”<?php echo $pourcent2;?>” bgcolor=”black”> </td>
<td> <?php echo “$pourcent2%”;?>
(<i><?php echo $enquete[2];?></i>)</td>
</tr></table>
<table border=”0″>
<tr>
<td width=”80″><b><?php echo OPCAO4; ?></b></td>
<td width=”<?php echo $pourcent3;?>” bgcolor=”#990000″> </td>
<td> <?php echo “$pourcent3%”;?>
(<i><?php echo $enquete[3];?></i>)</td>
</tr>
</table>
Ver arquivos utilizados para constuir esse sistemas:
index.php | config.php | resultado.php | contar_votos.php
Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br

Coluna Dreamweaver - Envio de formulário com ajax

Introdução

Salve Pessoal! Tinha prometido que o próximo artigo seria uma galeria de fotos utilizando varios funções do Spry, mais vai ter quer ficar para a próxima, pois achei esse artigo mais importante pois permiter enviar formulário com ajax e é super facíl de utiliza. Veja os exemplo e como funciona clicando aqui

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Arquivo js do Spry.Utils.submitForm
Arquivo js do SpryData (opcional)

Conceitos

Com Framework Spry é possível enviar um formulário sem a necessidade de atualizar a página atual. Isso é possível utilizando a função Spry.Utils.submitForm que necessita apenas da inclusão do arquivo JS e o adicionamento de um comportamento para a chamada da função. O comportamento responsável pela chamada pode ser adicionado no próprio formulário ou utilizado outros elementos HTML.
Com a função Spry.Utils.submitForm é possível realizar cadastro em banco de dados, fazer a requisição dos dados e ainda visualizar o resultado do formulário na própria página sem a necessidade de ser atualizada.
O Spry.Utils.submitForm têm três parâmetros de configuração: identificação do formulário, função a ser executada depois do envio e a terceira para opções especiais. Suporta os métodos POST e GET. Formulários que têm enctype=”multipart/form-data” são submetidos usando default do comportamento do browser. Suporta PHP, ASP e Coldfusion

Conteúdo

Para enviar o formulário faça a inclusão do arquivo SpryUtils.js dentro da TAG Head.

<script src=”/SpryUtils.js”type=”text/javascript”></script>

E depois adicione a chamada da função e pronto.

Spry.Utils.submitForm(’identificacao_do_formulario’, funcao_executada_final, {method:’get’, url:’pagina.php’});

Veja como ficaria se a chamada fosse adicionada dentro do formulário no evento onClick

<input name=”teste” value=”Enviar” onclick=”Spry.Utils.submitForm(’form’, updateResponseDiv2, {method:’post’, url:’pagina.php’});” type=”button”>

Veja como ficaria se a chamada fosse adicionada em um link de texto

<a onclick=”Spry.Utils.submitForm(’form1′, updateResponseDiv, {method:’post’, url:’enviar.php’}); “>Enviar Formulário </a>

Carregar os dados dos formulários na propria página
Para que os dados do formulário sejam carregados dentro da própria pagina, igual ao exemplo vamos criar uma função que será executa após o envio, essa função vai atualizar o conteúdo da DIV (response_form1) com o conteúdo da página (pagina.php) que recebeu os dados do formulário.
A função updateResponseDiv utiliza o Spry.Utils.setInnerHTMLé responsável pelo retorno do dados na própria página sem a necessidade de atualização. Para utilizá-la e necessário incluir o arquivo SpryData.js dentro da tag HEAD

<script src=”.. /SpryData.js” type=”text/javascript”></script>

E depois chamar a função Spry.Utils.setInnerHTML passando dois parametros: a DIV que será atualizada e a função utilizada

<script type=”text/javascript”> function updateResponseDiv(req) { Spry.Utils.setInnerHTML(’response_form1′, req.xhRequest.responseText); } </script>

Agora vamos chamar a função Spry.Utils.submitForm:

<form name=”form1″ method=”post” action=”pagina.php” onsubmit=”return Spry.Utils.submitForm(this, updateResponseDiv);”>

A chamada da função foi adicionada no onSubmit que realizara o envio do próprio formulário e retornará na própria página os dados que foram submetidos. Para isso foi declarado dois parâmetros, a identificação do formulário que é o próprio (this) e a função updateResponseDiv
Caso você queira somente enviar determinados campos do formulário a chamada deve ser:

Spry.Utils.submitForm(’identificacao_do_formulario’ funcao_executada_final, {elements: ['id_do_campo1', 'id_do_campo2']});

Para enviar o formulário com variáveis terceiro parâmetro deve ser adicionado a string ‘additionalData’ informando as variaveis ‘variavel=valor’ assim:

Spry.Utils.submitForm(’identificacao_do_formulario’ , funcao_executada_final, {url:’pagina.php’, additionalData:’ajaxSubmit=true&from=samples’

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br

Coluna Dreamweaver - Painéis Sanfonados com Ajax

Introdução

Salve Pessoal! Vou lançar mais uma serie de tutoriais sobre o Spry, mais dessa vez um pouco mais difícil ja que estarei fazendo combinações entre as muitas funções do Spry, e ainda como utilizar o Spry de forma não obstrutiva, nesse utilizarei os Spry Accordion é o Spry.Utils.updateContent.

Conceitos

Nesse tutorial será mostrado com criar um painel sanfonado com o Spry Accordion de diversas maneira, uma de modo mais ágil com apenas um cliques, mais comprometendo a semântica e outro de modo não obstrutivo com a utilização do SpryDOMUtils.js. E ainda como carregar o conteúdo dos painéis com outra página sem a necessidade de atualizar a página, e uma breve descrição de como customizar os painéis.Veja um exemplo de Painéis Sanfonados utilizando o Spry Accordion

Conteúdo

Crie uma nova página, pode ser em qualquer formato. Na Barra Inserir do Dreamweaver selecione a guia Spry e clique no botão Spry Accordion.

O Dreamweaver vai automaticamente criar o Spry Accordion com dois painéis. Você pode inserir ou remover os painéis facilmente utilizando o Painel de Propriedades, para utilizá-lo verifique se os painéis estão com uma borda azul.

As opções fornecidas no Painel de Propriedades do Spry Accordion são:
1. Nome do Painel
2. Adiciona ou remove os painéis, sinal de “mais” para adicionar e sinal de “menos” para remover
3. Ordenar a seguencia dos painéis, selecione um painel na caixa de visualização dos painéis e clique na seta para “cima” para mover o painel para cima e na seta para “baixo” para mover o painel para baixo
4. Customize this widget, remove os stilos gerados automaticamente para que você possa customizá-lo (não recomendado).

Criando painéis sanfonados não obstrutivos

Com os painéis criados e configurados, entre no modo de visualização de código (Shown Code View) do Dreamweaver. No final da página observe que o Dreamweaver criou um bloco de código em JavaScript com as configurações do Spry Accordion, obstruindo o código HTML.

Se apenas apagar esse código os painéis não vão funcionar. Para que os painéis funcionem corretamente de modo não-obstrutivo é necessário três etapas: (1) apagar esse bloco de codigo que o Dreamweaver criou, (2) Inserir dentro da TAG HEAD o SpryDOMUtils.js que é um novo arquivo JS do Spry criado recentemente justamente para resolver esse problema de obstrução do Spry, muito criticado por desenvolvedores de respeitam e prezam a semântica. e (3) criar um novo arquivo JS com uma função para passa os parâmetros de configuração do Spry Accordion. Para criar esse arquivo, crie uma nova página (Ctrl + N) de javascript e crie uma nova função utilizando o Spry.Utils.addLoadListener (pertencente ao arquivo SpryDOMUtils.js).e configure criando uma variável (Accordion1)e passando o ID da DIV principal (Accordion1) onde todos os painéis estão dentro.

var Accordion1;
Spry.Utils.addLoadListener(function()
{
Spry.$$(”#Accordion1″).forEach(function(n) { Accordion1 =new Spry.Widget.Accordion(”Accordion1″);});
});

Agora feche, e volte para a página que estão os painéis e insira esse arquivo dentro da tag HEAD, verifique se todos arquivos estão inserido

<head>
<script src=”SpryAccordion.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript” src=”SpryDOMUtils.js”></script>
<script language=”javascript” type=”text/javascript” src=”accordion_naoobstrutivo.js”></script>
<link href=”SpryAccordion.css” rel=”stylesheet” type=”text/css” />
</head>

Carregando o conteúdo dos painéis sem atualizar a página

Para fazer a atualização do conteúdo sem a necessidade de ficar recarregando a página, simulando um iframe utilizaremos a função Spry.Utils.updateContent que já foi abordado nesse tutorial. Para utilizar essa função faça a inclusão do o arquivo SpryData.js do Frameworks Spry dentro da tag Head

<script language=”javascript” type=”text/javascript” src=”SpryData.js”></script>

Vamos adicionar os links e a função Spry.Utils.updateContent junto com a função onClick, para que quando o usuário clique no nome do painel a função Spry.Utils.updateContent faça o update dentro do painel. Na DIV que contém o titulo do painel inclua a função e passe dois parâmetros: o primeiro é a ID da DIV onde o conteúdo será carregado e o segundo é o endereço da página que será carregada.

<div class=”AccordionPanelTab” onclick=”Spry.Utils.updateContent(’tb2′,’painel_1.html’);“>Label 2</div>

Agora dentro da DIV que armazena o conteúdo do painel identifique de acordo com o ID que você informou na função

<div class=”AccordionPanelContent” id=”tb2″>Content 2</div>

O painel deve ficar assim. Em negrito está as alterações que devem ser feitas. Esse é apenas um painel faça isso em quantos painéis você quiser.

<div class=”AccordionPanel”>
<div class=”AccordionPanelTab” onclick=”Spry.Utils.updateContent(’tb2′,’painel_1.html’);“>Label 2</div>
<div class=”AccordionPanelContent” id=”tb2″>Content 2</div>
</div>

Customizando o Spry Accordion

Na janela de configuração de CSS (Shift + F11), estão disponiveis os estilos CSS do Spry Accordion que podem ser modificados, Muita atenção nas modificações desses estilos pois podem implicar no não funcionamento adequado do Accordion, recomendo que seja apenas modificado as cores, a largura do painel e a altura dele.

.AccordionPanelTab: Modifica as configurações da div do titulo

.AccordionPanelContent: modifica as configurações da div do conteúdo do painel, caso queira modifique a altura do painel (height)

.AccordionPanelOpen .AccordionPanelTab: modifica a cor de fundo do titulo do painel ao ser inicializado, ou sej aque ainda não foi clicado

.AccordionPanelTabHover: modificar a cor da fonte do titulo do painel que está fechado ao passar o mouse por cima

.AccordionPanelOpen .AccordionPanelTabHover: modificar a cor da fonte do titulo do painel que está aberto ao passar o mouse por cima

.AccordionFocused .AccordionPanelTab: modifica a cor de fundo da div com o titulo do painel inativo ou fechado

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab: modifica a cor de fundo da div com o titulo do painel aberto ou ativo

Ver arquivos utilizados para constuir esse sistemas:
index.php

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceoramos.blog.br

Boxes e listas arrastáveis com ajax

Introdução

É muito fácil e rápido criar boxes e listas arrastáveis utilizando a biblioteca ToolMan, que foi desenvolvida pelo Tim Taylor e não possui nenhuma restrição a sua utilização. O ToolMan utiliza Java script não-obstrutivo e todos seus arquivos pesam apenas 20Kb. São utilizados para criar boxes e listas; arrastáveis, editáveis e auto-ordenáveis. O Blog BeNLOG adaptou o ToolMan para trocar itens entre listas diferentes, veja um exemplo de listas arrastáveis, boxes arrastáveis e listas arrastáveis que trocam itens.

Conceitos

Para utilizar o ToolMan é necessario: (1º) criar uma variável tendo como valor a identificação do elemento que será arrastado (var nome_da_variável = document.getElementById(”id_da_div“)), (2º) digitar o comando para executar o TollMan, sendo seu valor a variável que foi criada (drag.createSimpleGroup(nome_da_variável_que_você_criou)) e caso queira, (3º) digitar o comando para limitação ou restrição, que pode ser: somente na vertical, horizontal ou entre diversas outras citadas abaixo.

Pré-requisito

Arquivos para os boxes: core.js (1k), events.js (1k), css.js (1k), coordinates.js (4k), drag.js (7k).
Arquivos para as listas: dragsort.js (2k), cookies.js (1k) mais os de cima
Arquivos para as listas que trocam os itens: coordinates.js (3k), drag.js (7k) e dragdrop.js (6k)

Conteúdo

Boxes arrastáveis

Primeiro inclua os arquivos; core.js, events.js, css.js, coordinates.js, drag.js dentro da tag HEAD.

<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/core.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/events.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/css.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/drag.js”></script>

Crie uma função em Java Script para que ao carregar toda a pagina HTML execute o ToolMan. Dentro dessa função vamos carregar três variáveis do ToolMan

<script language=”JavaScript”>
window.onload = function() {
var group
var coordinates = ToolMan.coordinates()
var drag = ToolMan.drag()
}
</script>

Ainda dentro do código Java Script é necessário criar as variáveis de configuração dos boxes. Cada tipo de box requer um configuração, veja abaixo as disponíveis:

Box Drag

O Box Drag fica solto na tela podendo ser arrastado para qualquer lugar. Para utilizá-lo, crie uma variável tendo como valor a identificação do elemento (var boxDrag = document.getElementById(”id_da_div_boxDrag“)) nessa caso a variável vai se chamar boxdrag, digite o comando para executar o ToolMan e coloque como valor desse comando a variável que você criou, ficando assim: drag.createSimpleGroup(boxDrag)

var boxDrag = document.getElementById(”id_da_div_boxDrag“)
drag.createSimpleGroup(boxDrag)

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxDrag”>
<p>Conteúdo</p>
</div>

Box Vertical

O Box Vertical pode se arrastado somente na vertical. Para utilizá-lo, crie uma variável (boxVerticalOnly) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada, e informe a limitação group.verticalOnly(), ou seja, arrasta somente na vertical.

var boxVerticalOnly = document.getElementById(”id_da_div_boxVertical“)
group = drag.createSimpleGroup(boxVerticalOnly)
group.verticalOnly()

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxVertical”>
<p>Conteúdo</p>
</div>

Box Horizontal

O Box Horizontal é o contrario do Box Vertical e poderá se arrastado somente na horizontal. Para utilizá-lo, crie uma variável (boxHorizontalOnly) sendo o seu valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e informe a limitação group.horizontalOnly(), ou seja, arrastar somente na horizontal.

var boxHorizontalOnly = document.getElementById(”id_da_div_boxHorizontal“)
group = drag.createSimpleGroup(boxHorizontalOnly)
group.horizontalOnly()

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxHorizontal”>
<p>Conteúdo</p>
</div>

Box Handle

O Box Handle é semelhante ao Box Drag mais para arrastá-lo é necessário definir uma área dentro do box, onde somente clicando nela será possível arrastá-lo. Crie uma variável (boxHandle) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e a identificação do elemento que será a área que vai arrastá-lo, separados pela virgula (,).

var boxHandle = document.getElementById(”id_da_div_boxHandle“)
group = drag.createSimpleGroup(boxHandle, document.getElementById(”id_da_area_handle”))

Crie uma DIV nome com os IDs sendo igual ao informado na variável

<div id=”id_da_div_boxHandle”>
<div id=”id_da_area_handle”>Área Arrastavel</div>
<p>Box Handle</p>
<p>Clique na área arratavel e arraste para qualquer lugar</p>
</div>

Box Region Constraint

Nesse tipo de box é possível definir uma área limite para arrastar o box. Crie uma variável (boxRegionConstraint)com o valor sendo a identificação do elemento, e digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada.

var boxRegionConstraint = document.getElementById(”id_da_div_boxRegionConstraint“)
group = drag.createSimpleGroup(boxRegionConstraint)

Crie outra variável para delimitação das margim, insira em pixes dentro dos parênteses na primeira linha.

var origin = coordinates.create(0, 0)
group.addTransform(function(coordinate, dragEvent) {

Copie o cole essa variável para delimitação de qual lado poderá ser arrastado.

var originalTopLeftOffset =
dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
return coordinate.constrainTo(origin, originalTopLeftOffset)
})

Crie uma DIV nome com o ID sendo igual ao informado na variável.

<div id=”id_da_div_boxRegionConstraint”>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Box com posição fixa

É possível criar um box com uma posição fixa que se movimente por uma linha na horizontal ou vertical. Crie uma variável tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada e informe como limitação que sua movimentação será somente na horizontal (group.horizontalOnly()) ou vertical (group.verticalOnly()) na terceira linha do código JS.

var boxAbsolute = document.getElementById(”id_da_div_boxAbsolute”)
group = drag.createSimpleGroup(boxAbsolute)
group.verticalOnly()

Agora adicione o código abaixo, que fara o resto

group.addTransform(function(coordinate, dragEvent) {
var scrollOffset = coordinates.scrollOffset()
if (coordinate.y < scrollOffset.y)
return coordinates.create(coordinate.x, scrollOffset.y) var clientHeight = coordinates.clientSize().y
var boxHeight = coordinates._size(boxAbsolute).y
if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
return coordinates.create(coordinate.x,
(scrollOffset.y + clientHeight) - boxHeight)

return coordinate
})

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxAbsolute “>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Listas

Lista auto-ordenáveis

Agora aprenderemos a criar lista arrastáveis e auto-ordenáveis, ou seja, que se arrastam e se encaixam perfeitamente, e o melhor e que ele vai armazenar a seqüência de ordenamento em um cookie. Assim a eqüência será armazenada para visitas futuras do usuário. Para executar essa função é necessário incluir além dos que já foram incluídos anteriormente mais dois arquivos JS: dragsort.js e cookies.js.

<script language=”JavaScript” type=”text/javascript” src=”dragsort.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”cookies.js”></script>

Crie um bloco de código de Java Script e informe a identificação do UL e da LI da lista. Inicie criando as variáveis do ToolMan, só que agora para utilizar o Drag Sort.

<script language=”JavaScript” type=”text/javascript”><!–
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer() //–>
</script>

Ainda dentro do bloco de código crie uma função para que ao carregar toda a pagina html execute o ToolMan Drag Sort. Dentro dessa função vamos carregar as variáveis necessárias. Coloque como valor dos comandos junkdrawer.restoreListOrder e dragsort.makeListSortable do ToolMan a indentificação do UL da lista conforme mostrado abaixo em negrito, para que a posição da lista seja gravada e possa se arrastada.

window.onload = function() {
junkdrawer.restoreListOrder(”id_da_lista“) dragsort.makeListSortable(document.getElementById(”id_da_lista”),
saveOrder)

}

Agora digite essa função responsavel pelo armazenamento e ordenamento da lista

function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute(”id”)
if (id == null) return
group.register(’dragend’, function() {
ToolMan.cookies().set(”list-” + id,
junkdrawer.serializeList(list), 365)
})
}

E pronto.

Listas auto-ordenáveis que podem ser trocados os itens entre si

Baseado no ToolMan do Tim Taylor o Blog BeNLOG adaptou o script para que os itens das listas se auto-organizem e possam ser trocados de uma lista para outra. Para isso é necessário apenas três arquivos JS que foram atualizado para suporta essa função e pesam apenas 16Kb, e que também não é obstrutivo.

<script language=”JavaScript” type=”text/javascript” src=”coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”drag.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”dragdrop.js”></script>

Iniciaremos criando um bloco de código de Java Script que inicie a função (window.onload) assim que a página for carregada. Crie uma variável (var list) e digite seu valor sendo a identificação da lista (document.getElementById(”id_da_lista”)) e escreva o comando para que seja criado a movimentação das listas (DragDrop.makeListContainer( list );) tendo como valor a variável que foi criada. É possível também executar dois eventos; um quando a lista inicia o arrastamento (list.onDragOver) e outro quando termina (list.onDragOut). Nesse exemplo vamos alterar o cor de fundo (function() { this.style["background"] = “#EEF”; }) quando o usuario for mover a lista. Faça o mesmo na outra lista, crie uma variável (list) e passe a indetificaçãoo da lista (document.getElementById(”id_da_lista2″);), execute o comando para que seja criado a movimentação das listas e adicione outros eventos.

<script language=”JavaScript” type=”text/javascript”><!–
window.onload = function() {
var list = document.getElementById(”id_da_lista“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };

list = document.getElementById(”id_da_lista2“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };
};
//–>
</script>

Considerações Finais

Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO

Qualquer dúvida envie um email para ramos.marcelosouza@gmail.com

Atualização Dinâmica com Objetos

 

Manipulação de objetos da biblioteca do Dreamweaver CS3 para efetuar atualizações dinâmicas em websites sem precisarmos conhecer linguagem de programação.

Introdução

Imagine-se desenvolvendo um site simples, mas com muitas páginas (mais ou menos 50) onde, em todas existe um banner full (468×60 px) que precisa ser atualizado semanalmente. O detalhe é que você ainda não sabe programar direito, mas também não quer fazer a atualização individual de cada página, não é verdade?
Então, seus, nossos problemas terminaram. =]
Pouco é falado da biblioteca que o Dreamweaver oferece aos webdesigner’s e webdevelopers. Assim como no Fireworks e Flash, podemos criar objetos que serão utilizados com freqüência no desenvolvimento de nossos projetos web e que requerem uma atualização constante, como imagens, links, vídeos, animações, etc. Como nos Templates, a utilização e atualização dos objetos (Assets) é dinâmica, ou seja, todas as páginas que contiverem um objeto dinâmico, quando ele for atualizado, todas as páginas também receberão as modificações.

Pré-Requisitos

• Facilidade com o manuseio do Dreamweaver CS3
• Saber criar e configurar um novo site no Dreamweaver CS3
• Entendimento sobre o conceito de Templates

Objetivo

• Criar objetos que serão atualizados automaticamente utilizando a Biblioteca (Library) do Painel Assets.

Conceito

Não basta criarmos apenas um trabalho, pois em muitos casos teremos diversas páginas com inúmeros elementos a serem configurados no website. Mas como sabemos, o Dreamweaver foi criado para facilitar a vida dos desenvolvedores, disponibilizando diversos recursos que auxiliam na produtividade do nosso trabalho. E um desses recursos que falarei neste tutorial é Assets.

Conteúdo

Parte 1 - Importação de site de exemplo

Vamos começar criando um novo site no Dreamweaver para facilitar o entendimento das ações abaixo. E pra ficar mais fácil, BAIXE AQUI os arquivos deste tutorial; acesse o menu Site > Manage Sites > Import. Selecione o arquivo Tutorial.STE, clique em abrir e em seguida pressione o botão Done.
Este procedimento faz a configuração automática de um novo site que foi exportado do Dreamweaver.
Ao abrirmos o arquivo index.html temos a seguinde estrutura:

Fig. 01 - Estrutura da página index.html

Topo da página: criaremos um objeto atualizável para inserirmos nas outras páginas.
Barra de menu: links serão criados e inseridos na biblioteca.
Identificação: apenas uma identificação da página. Não sofrerá atualização.
Conteúdo: apenas um conteúdo da página. Não sofrerá atualização.

Parte 2 - Adicionando objeto à biblioteca

Para iniciarmos, precisamos, primeiramente, localizar o Painel Assets. Ele se encontra no Painel Files (F11).

Fig. 02 - Painel Assets

Na lateral esquerda temos os tipos de elementos como imagens, cores utilizadas no site, links, arquivos em flash, etc.
Transformaremos o Topo do site em um objeto, inicialmente. Vamos ver como funciona:
1. Selecionemos a tabela onde se encontra o topo:

Fig. 03 - Selecionando topo do site

2. Com a tabela selecionada, acessemos o menu Modify > Library > Add Object to Library, para adicionarmos o objeto à biblioteca do Dreamweaver.
Após a inserção do topo na biblioteca, na página onde ele está inserido, para sinalizar ao desenvolvedor, fica com um preenchimento amarelo, mas não afeta em nada no layout da página. Sua função é apenas de identificar que se trata de um objeto do paine Assets.

Fig. 04 - Visualização do topo após a inserção na biblioteca

O Dreamweaver também cria automaticamente na raiz do site, uma pasta chamada Library onde todos os objetos são armazanedos.
3. Vamos repetir o mesmo procedimento com a Barra de menu

Fig. 05 - Visualização da barra de menu

Parte 3 - Manipulação do Painel Assets

Outra observação é quanto ao Painel Assets. Vejamos quantas informações foram adicionadas à biblioteca:
Images
Nesta seção vemos as imagens que estão associadas ao objeto juntamente com suas propriedades de dimensionamento e peso. As imagens podem ser inseridas nas outras páginas do site, bastando selecioná-las no painel e arrastá-las para a área de edição das páginas.

Fig. 06 - Propriedades da seção image

Colors
Na opção Colors ficam exibidas as cores utilizadas na página onde foi inserido o objeto à biblioteca.

Fig. 07 - Propriedades da seção Colors

O processo de inserção no site é o mesmo: selecionar, arrastar e soltar dentro da página do site. O detalhe é que é preciso ter uma palavra o texto selecionado para que os mesmos absorvam as propriedades da cor.
Library
Na seção Library encontram-se os objetos adicionados. Para utilizá-los basta arrastá-los para a página do site editado.

Fig. 08 - Objetos da biblioteca

Outra maneira de inserir um objeto é através do botão Insert localizado no painel Assets na parte inferior, onde constam outros botões, que são eles, respectivamente da esquerda para direita:

Fig. 09 - Botões da biblioteca

• Refresh Site List: atualiza a lista de objetos editados, excluídos ou inseridos no site
• New Library Item: outra maneira de adicionar um objeto à biblioteca
• Edit: selecionando um objeto, podemos editá-lo clicando neste botão
• Delete: maneira de excluir o objeto da biblioteca

Parte 4 - Criando páginas e utilizando objetos da biblioteca (library)

Agora que criamos os objetos fica simples inseri-los nas novas páginas e editá-los. Como exemplo, vamos inserir o topo e a barra de menu na página abaixo:

Fig. 10 - Nova página sem objetos da biblioteca

Em seguida, vamos arrastar os objetos para a página…

Fig. 11 - Inserção do objeto Topo na página mxstudio.html

… e a mesma deverá ficar como a imagem abaixo:

Fig. 12 - Página mxstudio.html após a inserção dos objetos

Parte 5 - Edição dos objetos da biblioteca

Este procedimento que é o “pulo-do-gato”, a razão de existir dos objetos criados. Ao editarmos qualquer um incluso na biblioteca (library), assim como os Templates, todas as páginas em que o objeto edito esteja inserido, serão atualizadas automaticamente.
Como exemplificação, vamos inverter os logotipos do topo.
1. Selecionemos o objeto Topo e cliquemos no botão Edit ou demos dois cliques sobre o mesmo.
2. Uma área de edição específica será aberta e nela podemos efetuar qualquer alteração. Então vamos inverter os logotipos e também utilizar a mesma vermelha que se encontra no painel Assets como visto na Fig. 07. Lembrando que é preciso selecionar o texto e arrastar a cor para cima da seleção ou clicar no botão Insert. O resultado deve ser o seguinte:

Fig. 13 - Área de edição de objetos

Indicação do objeto que está sendo editado
Área de edição do objeto
Após salvarmos as alterações a seguinte tela surgirá:

Fig. 14 - Janela de confirmação de atualização

3. Clicando em Update, a atualização global será efetuada. Já em Don’t Update, apenas salvará o objeto sem atualizar as páginas que ele está inserido.
Outra maneira de edição é clicar sobre o objeto e no painel Properties, clicarmos no botão Open.

Fig. 15 - Botões de ações de objetos no painel Properties

Considerações Finais

Vale ressaltar que este processo de atualização, praticamente, tem o mesmo efeito que se criássemos uma página template. Contudo, podemos inserir objetos em nossos templates o que otimiza e muito as atualizações das páginas, além de ser mais rápido.
Na prática, recomendo a implantação de objetos para criação de áreas de publicidade como banner’s, onde existe (dependendo do site) uma rotatividade muito grande de imagens e animações.

Mas atenção!
Este processo é indicado para quem não sabe programar em nenhuma linguagem e/ou não quer ter trabalho em atualizar páginas html individualmente, ok?!
Acessem nosso Fórum para postarem dúvidas sobre o artigo e cliquem aqui para sugerirem de novas matérias.
Um grande abraço e até a próxima.
Autor: CarlosHPS Webdesigner - Colunista Dreamweaver do Portal MXSTUDIO
Não deixem de me fazer uma visita em meu Blog - www.carloshps.com.br/blog

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! ;)