MXStudio » Gisele http://www.mxstudio.com.br Macromedia e Adobe - Artigos, colunas, tutorias e muito mais... Sun, 29 Jan 2012 11:31:48 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 FORMULÁRIO DE CONTATO COM DREAMWEAVER + PHP http://www.mxstudio.com.br/desenvolvimento/dreamweaver/formulario_de_contato_com_dreamweaver___php/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/formulario_de_contato_com_dreamweaver___php/#comments Thu, 11 Jan 2007 00:00:00 +0000 Gisele

FORMULÁRIO DE CONTATO COM DREAMWEAVER + PHP

Introdução

 

Olá a pessoal,
Esse tutorial espero que ajude muitas pessoas, pois tenho visto muito essa dúvida no fórum!
Vamos criar um formulário básico de contato para um site, como o exemplo abaixo:

Formulário MX Studio

Pré-Requisitos

Macromedia Dreamweaver e uma familiaridade com php.

Objetivo

Criar um formulário de contato através do Dreamweaver junto com o PHP.

Conteúdo

Vamos criar os campos do nosso formulário.
Crie um novo documento no Dreamweaver (ctrl+n) e salve (ctrl+s) como form.html.
Insira um formulário (Insert > Form > Form).
Agora insira o campo que receberá o Nome (Insert > Form > Text Field).

Campo Texto

Insira mais dois campos Text Field para o E-mail e o Assunto.
Agora vamos inserir o campo de mensagem que será do tipo textarea (Insert > Form > Textarea).

Textarea

E por fim, o botão submit (Insert > Form > Button ) que irá enviar o formulário para seu e-mail.

Na tag do formulário mude algumas propriedades como no exemplo abaixo:

< form action=”formulario.php” method=”post” name=”form_mxstudio” id=”form_mxstudio”>
1. ACTION = nome do arquivo que será chamado ao submeter o formulário;
2. METHOD = POST;
3. NAME = Dê um nome ao seu formulario;
4. ID = Dê um nome ao ID.

Agora vamos dar nome aos campos. Selecione cada campo e dê um nome a ele.

Campo Nome = < input name=”nome” type=”text” id=”nome” size=”33″> ;
Campo Email = < input name=”email” type=”text” id=”email” size=”33″> ;
Campo Assunto = < input name=”assunto” type=”text” id=”assunto” size=”33″> ;
Campo Mensagem = < input name=”mensagem” type=”text” id=”mensagem” size=”33″> ;

Seu código HTML deve ficar mais ou menos como abaixo:

<html>
<head>
<title>Formulário – MX Studio</title>
</head>
<body>
<form action=”formulario.php” method=”post” name=”form_mxstudio” id=”form_mxstudio” onsubmit=”return validar();”>
<table width=”35%” border=”1″ cellpadding=”2″ cellspacing=”2″ bordercolor=”#666666″>
<tr>
<td colspan=”2″ bordercolor=”#FFFFFF” bgcolor=”#0099CC”><h3 class=”style1″>Formulário MX Studio </h3></td>
</tr>
<tr>
<td width=”25%” align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Seu nome:</span></td>
<td bordercolor=”#FFFFFF”><input name=”nome” type=”text” id=”nome” size=”33″></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Seu email:</span></td>
<td bordercolor=”#FFFFFF”><input name=”email” type=”text” id=”email” size=”33″></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF” class=”style14″>Assunto:</td>
<td bordercolor=”#FFFFFF”><input name=”assunto” type=”text” id=”assunto” size=”33″ /></td>
</tr>
<tr>
<td align=”right” bordercolor=”#FFFFFF” bgcolor=”#DFF4FF”><span class=”style14″>Mensagem:</span></td>
<td bordercolor=”#FFFFFF”><textarea name=”mensagem” cols=”30″ rows=”5″ id=”mensagem”></textarea></td>
</tr>
<tr>
<td bordercolor=”#FFFFFF”> </td>
<td align=”right” bordercolor=”#FFFFFF”><input name=”enviar” type=”submit” id=”enviar” value=”enviar”></td>
</tr>
</table>
</form>
</body>
</html>

Agora vamos criar o arquivo que irá enviar esse formulário para seu email.
Não é necessário um conhecimento mais avançado em php para entender o código.
Lembre-se que estamos usando o método POST para enviar o formulário. Para que você possa entender como está vindo os dados do seu formulário, crie um novo documento e salve como formulario.php e digite o seguinte:

<?php  print ‘<pre>’; print_r($_POST); print ‘</pre>’; ?>

Salve esse arquivo e abra o arquivo form.html preencha seu formulário e dê um Submit.
Deve ter aparecido algo do tipo:

Array  (
[nome] => Gisele
[email] => gisele@gisele.com.br
[assunto] => Teste
[mensagem] => Testando formulário MX Studio
[enviar] => enviar
)

Repare que os registros estão vindo em uma array, vamos juntar os dados para enviar para o email.
Código php:

<?php

/*A variável $mensagem recebe os dados da array. Repare que estamos concatenando de acordo com o formato que
queremos receber no email. O \n é uma quebra de linha. */
$mensagem = “Nome: “.$_POST['nome'].” \n”;
$mensagem .= “Email: “.$_POST['email'].” \n”;
$mensagem .= “Email: “.$_POST['assunto'].” \n”;
$mensagem .= “Descrição:”. $_POST['mensagem'];
/*
Função Mail:
Primeiro parâmetro: Coloque o email que vai receber os dados do formulário;
Segundo parâmetro: Coloque o titulo do email;
Terceiro parâmetro: Os dados do formulário.
*/
mail(“seu-email@provedor.com.br”, “Formulário – MX Studio”, $mensagem);

/*
Mensagem que será impressa na tela após o envio do formulário.
*/
echo ‘<h1>Enviado com Sucesso!</h1>’;
echo ‘<h1>Em breve entraremos em contato.</h1>’;
?>

Para quem quer colocar uma validação de campos obrigatórios no seu formulário, faça o seguinte:

<script language=javascript>
   function validar() {
      var valido = false;
  
      with(document.form_mxstudio) {
             if (nome.value.length == 0){
                  valido = false;
                  nome.focus();
                  alert (‘Campo nome obrigatório.’);
     
              }else if(email.value.length == 0) {
                 valido = false;
                 email.focus();
                 alert (‘Campo email obrigatório.’);
    
               }else if(assunto.value.length == 0) {
                  valido = false;
                  assunto.focus();
                  alert (‘Campo assunto obrigatório.’);
    
              }else if(mensagem.value.length == 0) {
                 valido = false;
                 mensagem.focus();
                 alert (‘Campo mensagem obrigatório.’);
    
             }else {
                valido = true;
                submit();
             }
        return valido;
       } 
  }
</script>

 

Pronto! Seu formulário está pronto!
Lembre-se! O lugar que você está hospedando o seu site tem que dar suporte ao PHP.

CONSIDERAÇÕES FINAIS

Espero que tenha tirado a dúvida do pessoal em relação a isso. É um formulário simples, mas acho que supre a necessidade de uma maioria!

Até a próxima, Abraços.

Autora: Gisele C. Negreiros – Colunista do Portal MXSTUDIO

Qualquer dúvida envie um email para gisele@mxstudio.com.br ou acesse o nosso fórum .

  ]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/formulario_de_contato_com_dreamweaver___php/feed/ 59 GALERIA DE IMAGENS NO DREAMWEAVER – ParteII http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver___parteii/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver___parteii/#comments Sat, 17 Jun 2006 00:00:00 +0000 Gisele

GALERIA DE IMAGENS NO DREAMWEAVER – ParteII

Introdução

Olá a todos,
No primeiro tutorial vimos como criar uma galeria de imagens pelo Dreamweaver e como editar várias imagens de uma vez.
Nesse tutorial vamos ver como criar a galeria de uma forma que não seja necessário linkar imagem por imagem.
Vamos estar usando ASP, mas pra quem usa PHP não sentirá dificuldade de ajustar o código para tal linguagem, pois o código é bem simples!

Pré-Requisitos

Macromedia Dreamweaver e uma noção de ASP (Recomendo a todos que façam o primeiro tutorial).

Objetivo

Facilitar a criação da galeria de imagens vista no primeiro tutorial.

Conteúdo

No primeiro tutorial pra que nossa galeria funcionasse, tínhamos que adicionar a imagem pequena e linka-la com a grande. Isso não é cansativo quando falamos de 5 ou 6 fotos, mas e quando temos 100 fotos? Imaginem o tempo que isso tomaria de nós! Graças a Deus isso não é necessário! A programação nos salva desse cansaço.
Mãos a obra!
Abra o arquivo que você criou no primeiro tutorial e vamos fazer alterações nele. Seu código deve ficar igual o código a seguir:

<html>
<head>
<title>Galeria de Fotos</title>
<%
// Aqui está dando um request nas variáveis total, caminho e caminho2 para capturar o valor dessas váriáveis que são atribuidos no próprio link
total = request(“total”) // variável que irá armazenar o númerio de fotos que há na página
caminho= request(“caminho”) //variável que irá armazenar o caminho na imagem ampliada
caminho2=request(“caminho”) //variável que irá armazenar o caminho na imagem pequena
img = 1 //aqui atribuimos a variável img o valor 1 (para que a imagem não seja contada a partir do 0 (zero)
%>
<!– Funções em javascript que fazem com que ao passar o mouse eu uma imagem apareça ela ampliada (Não é necessário mexer nessas funções) –>
<script language=”JavaScript” type=”text/JavaScript”>

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//–>
</script>
<!– Fim das funções –>
</head>
<!–No Body chamamos a função MM_preloadImages –>
<body onLoad=”MM_preloadImages(”,”,”,”,”,”,”,”,”)”>
<table>
<tr>
<td>
<!– Imagem que aparecerá quando o mouse não estiver por cima de nenhuma imagem –>
<img src=”imagens/padrao.jpg” alt=”" name=”imagem_base” width=”350″ height=”247″ id=”imagem_base”>
</td>
</tr>
<table>
<%
// Conta quantos arquivos contém na pasta
set FSYS = Server.CreateObject(“Scripting.FileSystemObject”)
// Declara as variáveis i, img
dim i, img
i = 1 // recebe valor inicial igual a 1 (nossas imagem terão que ter o nome img1.jpg, img2.jpg e assim por diante.
img=+”img” + CStr(i) // aqui concatena dois valores img + a variável i.
nomepastaarqjpg= server.MapPath(“./imagens”) &”\” & img & “.jpg” // ele atribui a nomepastaarqjpg os caminhos das imagens ./imagens é o nome da pasta que estou armazenando as fotos,mais a variável img que estamos declarando acima e a extenção da imagem que é .jpg
while FSYS.FileExists(nomepastaarqjpg) //enquanto existir o caminho que é atribuido em nomepastaarqjpg ele irá criar esses caminhos.
i=i+1
img=+”img” + CStr(i)
nomepastaarqjpg= server.MapPath(“./imagens”) &”\” & img & “.jpg”
wend
%>
<% // Aqui verifica se sobra é vazio (sempre vai ser na primeira página, pois o valor dessa variável só é atribuida se tiver um número de fotos maior que nosso limite por página.
// Se essa condição for verdadeira então:
if request(“sobra”)=”" then
img = 1 // img recebe um valor inicial igual a 1
sobra = i //sobra recebe o valor igual a i (que seria o total de imagem que tem em nossa pasta)
limit = 90 // e aqui atribuimos um limite de 90 fotos por página, caso queira mais fotos ou menos lembre-se que terá de alterar em outras partes desse código.
else
// Se sobra não for vazia (isso quer dizer que o número de imagens dentro da pasta é maior que 90) então:
if request(“sobra”)<>”" then
sobra = request(“sobra”) // dá um request em sobra pra saber o valor total dessa variável.
sobra = sobra – 90 // e subtrai pelo nosso limite de fotos por página.
end if
limit = 90 // declaramos novamente que limit é igual a 90.
//Aqui estamos falando que nossa galeria terá 4 páginas (Suponha que nossa pasta tem 340 fotos e nosso limite é de 90 fotos por página, logo nossa galeria terá 4 páginas)
//Essa variável n é chamada em um link mais abaixo, quando formos definir a paginação da galeria.
if request(“n”) <= 4 then
n=request(“n”) //Dá um request na variável n pra saber seu valor
img = 90*n+1 //Aqui uma conta para atribuir o valor exato das imagens para que elas não comecem sempre na img1.jpg (Pega o limit e multiplica pelo valor de n+1.

end if
end if
%>
<!–Dá um request nas variáveis caminho e caminho2 –>
<% caminho= request(“caminho”) %>
<% caminho2= request(“caminho”)%>
<!–Se n for igual a 4 (esse numero tem que ser alterado de acordo com o numero de páginas que sua galeria terá)–>
<% if request(“n”) = 4 then
limit = 70 // limite igual 70 (esse valor é referente ao exemplo que citei acima, caso nossa galeria tenha 340 imagens, quando chegar na quarta página só terá 70 fotos pra preencher, se o limite continuasse 90 as 20 que faltaria pra completar esse valor, ficaria com link quebrado)
end if
%>
<tr>
<!–Para i=1 até o limit que recebe o valor de acordo com as verificações acima ele irá contruir nossa galeria –>
<%for i=1 to limit step 1 %>
<!– Faz a concatenação das variaveis para mostrar o caminho que ele deve criar para cada imagem, tanto a pequena como a grande –>
<% caminho = + caminho + “/” + “img”+ CStr(img) + “_peq.jpg”
%>
<% caminho2 = + caminho2 + “/” + “img”+ CStr(img) + “.jpg” %>
<!– A partir daqui ele cria a galeria, repare que antigamente nessa linha aparecia o caminho de cada imagem, agora substituimos pelas variáveis que definimos acima –>
<td><a href=”javascript:;” onMouseOver=”MM_swapImage(‘imagem_base’,”,’<%=caminho2%>’,1)” onMouseOut=”MM_swapImgRestore()”><img src=”<%=caminho%>”></a></td>
<!– O Contador define quantas colunas terá a tabela –>
<%contador = contador+1%>
<%if contador = 15 then %>
<tr></tr>
<%contador = 0%>
<%end if%>
<% caminho= request(“caminho”) %>
<% caminho2= request(“caminho”) %>
<%img=img+1%>
<%next%></tr>
</table>
</td>
</tr>
<tr>
<td >
<!– Aqui cria o “Próximo” e o “Voltar” caso o número de imagens for maior que o limite que você colocou por página, lembre de alterar na linha abaixo o limite caso seu limite não seja 90 –>
<%if request(“limit”) <>”" AND request(“n”)>0 then %>
<a href=”index.asp?limit=90&caminho=<%=caminho%>&total=<%=total%>&n=<%=n-1%>&sobra=<%=sobra%>”>VOLTAR</a>
<%end if%>
<%if request(“n”)<= 2 then %>
<a href=”index.asp?limit=90&sobra=<%=sobra%>&caminho=<%=caminho%>&total=<%=total%>&n=<%=n+1%>”>PRÓXIMO</a>
<%end if%>
</td>
</tr>
</table>
</body>
</html>
Por fim, no link que chamará a imagem você irá atribuir o caminho ( o nome da pasta onde está armazenada as imagens) e o total (quantas imagens há na pasta). Exemplo:

<a href=”index.asp?caminho=images&total=340″>LINK</a>

Considerações Finais

Espero que tenham gostado.
Qualquer dúvida fiquem a vontade em me escrever.
Gostaria que me escrevessem com sugestões para próximos tutoriais. Assim vejo qual a maior dificuldade do pessoal em relação ao Dreamweaver :)
Abraços!

Autor: Gisele C. Negreiros – Colunista do Portal MXSTUDIO

Qualquer dúvida envie um email para gisele@mxstudio.com.br ou acesse o nosso fórum .

]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver___parteii/feed/ 4 Galeria de Imagens no Dreamweaver http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver/ http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver/#comments Sun, 04 Jun 2006 00:00:00 +0000 Gisele

GALERIA DE IMAGENS NO DREAMWEAVER

Introdução

Olá a todos,
Nessa primeira parte do tutorial vamos fazer uma galeria de imagens pelo dreamweaver igual ao exemplo abaixo:

Pré-Requisitos

Macromedia Dreamweaver e uma familiaridade com o programa.

Objetivo

Mostrar ao leitor uma das diversas formas de se criar uma galeria de imagens através do Dreamweaver.

Conteúdo

Vamos começar a criar nossa galeria.
Primeiramente crie um novo arquivo (ctrl+N) e salve (ctrl+s) como galeria.html.
Escolha 6 imagens, deixe-as no tamanho 350 x 247px e faça uma miniatura delas de 40x40px.
Agora crie uma tabela com 2 linhas e na segunda linha 6 colunas, sua tabela deverá ficar assim:


Clique dentro da primeira linha, vá em Insert > Image Placeholder


ou

Abrirá a tela a seguir:

 

1. NAME = Coloque o nome da imagem base (a qual ao passar o mouse na imagem pequena irá aparecer a mesma ampliada).
2. WIDTH = Largura da imagem. / HEIGHT = Altura da imagem.
3. COLOR = Cor de fundo da imagem base.
4. ALTERNATE TEXT = Texto que aparece ao passar o mouse em cima da imagem.

Obs.: Todas as imagens terão de ter um tamanho padrão, no caso do nosso exemplo a imagem ampliada terá o tamanho 350x247px e a pequena 40X40px.
Insira as 6 miniaturas na segunda linha, uma em cada coluna.
Clique na primeira miniatura, vá em Window > Behaviors (Shift+F3), clique no sinal de mais conforma a imagem abaixo:


Clique em Swap Imagem, aparecerá a tela a seguir:

1. Em Images selecione nossa IMAGEM_BASE.
2. Em Set Source to clique em Browse e selecione a imagem ampliada que você criou para a primeira miniatura.
3. Deixe Preload Images e Restore Images onMouseOut selecionados.

Clique em Ok.
Repita o esse processo com as demais imagens.
Crie uma imagem padrão, que irá aparecer quando não tiver nenhuma imagem selecionada.
Selecione a imagem base vá em Src que fica nas propriedades da imagem e adicione a imagem que você criou.
Pronto! Nossa galeria está pronta! :)

Dica:
Agora vai uma dica para facilitar a edição das imagens.
De repente sua galeria de imagens é muito grande e pra você editar imagem por imagem fica muito demorado!
No Photoshop há uma opção chamada Actions que resolve esse problema de uma maneira muito fácil! Vamos lá.
Abra sua primeira imagem no Photoshop, vá em Window> Actions (alt+F9).
Na janela da Actions clique em Create New Set e coloque o nome da pasta que irá armazenar suas actions, igual a imagem a seguir:

Dê um OK.
Agora clique em Create new action e dê preencha conforme a imagem a seguir:

1. Em NAME coloque o nome da Action.
2. Em SET selecione o nome da pasta que irá armazenar essa action.

Clique em Record, repare que o Begin Recording ficou ativo:

A partir desse momento todas as modificações que você fizer será gravada para ser reutilizada em outras imagens.
Faça as alterações que você quiser como: mudar tamanho da imagem, cor, etc. Quando terminar de fazer todas as modificações que você irá aplicar a todas as outras imagens clique em Stop playing/recording.
Agora vamos aplicar essas alterações em todas as imagens da galeria.
Vá em File>Automate>Batch:

1. Em Set selecione o nome da pasta que criamos para armazenar as actions.
2. Em Action escolha a action que você acabou de criar.
3. Em Source selecione Folder.
4. Clique em Choose e escolha a pasta que está armazenada as fotos.

Em seguida clique em OK.
Pronto! Ele irá aplicar em todas as imagens a alteração que você fez.
Nesse caso ele abrirá todos os arquivos aplicando a action e você terá que salvar cada imagem por vez. Caso queira que ele aplique a action, salve e feche o arquivo selecione a opção Destination: Save and Close (lá em Batch), veja a imagem abaixo.

No caso da galeria você tem 2 arquivos distintos, um grande e um pequeno.Sendo assim você teria que salvar o pequeno um a um? Não! Você cria a action para a imagem pequena. Quando for aplicar essa action as imagens que anteriormente você aplicou para estabelecer um padrão de imagem ampliada, lá em File> Automate>Batch vá em:

1. Em Destination selecione Folder.
2. Clique em Choose… selecione a pasta onde estas imagens serão salvas
3. Em File Naming mostre com qual nome a imagem deve ser salva.(Observe o exemplo acima)

Após feito isso clique em OK e pronto! Ele aplicará a action da imagem em miniatura em todas as imagens, sem alterar a que você fez anteriormente.

Considerações Finais

Espero que tenham gostado.
No próximo tutorial irei mostrar como fazer a mesma galeria mas em ASP, de uma forma que não seja necessário linkar imagem por imagem. Pela programação ele lê quantas imagens há em uma pasta e monta a galeria automaticamente.

Até a próxima, Abraços.

Autora: Gisele C. Negreiros – Colunista do Portal MXSTUDIO

Qualquer dúvida envie um email para gisele@mxstudio.com.br ou acesse o nosso fórum .

]]> http://www.mxstudio.com.br/desenvolvimento/dreamweaver/galeria_de_imagens_no_dreamweaver/feed/ 13