Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, CSS, Javascript e PHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta décima parte do Guia Dreamweaver, vamos-lhe mostrar como introduzir divs com posicionamento absoluto dentro desta aplicação. Está pronto para começar?

Na parte XI deste Guia Dreamweaver vamos fazer a introdução ao funcionamento com formulários dentro deste aplicativo, começando pelos princípios básicos e avançando passo a passo dentro do tema. Os formulários são uma forma básica de obter algum tipo de feedback dos visitantes de um website, e através deste artigo iremos mostrar-lhe como tirar partido das funcionalidades de Adobe Dreamweaver para realizar as tarefas necessárias. As técnicas e métodos que lhe vamos apresentar neste capítulo permitir-lhe-ão ser um perito no web design, juntamente com as funcionalidades oferecidas pela ferramenta da Adobe que o vão tornar um profissional eficiente e competente.

Adobe Dreamweaver CS5

1. PRINCÍPIOS BÁSICOS

Um website é uma das melhores formas de hoje em dia de fazer chegar uma mensagem a uma determinada audiência, seja para expôr um produto, uma notícia ou simplesmente uma opinião. No entanto, isto significa que a informação só tem o caminho de ida e você não obtém nenhum feedback dos seus visitantes e/ou leitores. Então, para obter esse feedback é necessário fornecer um meio de comunicação em que seja possível os visitantes entrarem em contato consigo, e isto pode ser alcançado através da utilização de formulários. Qualquer que seja o tipo de informação que você pretenda obter dos seus visitantes, Adobe Dreamweaver tem a solução ideal para si.

O primeiro passo para criar um formulário é a introdução da sua tag <form> seguida do conteúdo do formulário, sendo terminado com </form>, sendo este é um princípio básico aplicado a qualquer elemento. Os elementos que podem ser inseridos num formulário vão desde caixas de seleção, campos de texto, menus drop down, entre outros. Os formulários não se restringem apenas a estes elementos, podendo ser completados com outros elementos HTML que ache viáveis inserir para complementar o formulário.

Guia Dreamweaver - Formulários (Parte XI)

Qualquer elemento de um formulário tem um nome e um valor, em que o nome é definido pelo programador, e o valor é aquilo que é inserido pelo visitante. Se por exemplo você tiver no seu formulário um campo de e-mail, provavelmente o nome indicado seria email e o valor obtido seria o e-mail do visitante que preencheu o formulário. Assim que o formulário esteja preenchido e o visitante clique no botão para enviar o formulário, a informação inserida em cada um dos campos será enviada como o seguinte modelo: email=visitante@website.com.

2. COMO CRIAR UM FORMULÁRIO

Para criar um formulário o processo é extremamente simples e rápido de se concluir, principalmente se tirar partido das funcionalidades existentes no Adobe Dreamweaver para a criação de formulários. Se pretender tirar partido dessas mesmas funcionalidades e não escrever o código, clique em Inserir -> Formulários e aó terá uma lista de itens que poderá utilizar no seu formulário

Guia Dreamweaver - Formulários (Parte XI)

Neste momento vamos criar um formulário de teste apenas para lhe demonstrar tanto o código de um formulário como o look em si. Este formulário será um formulário de contato:

Método 1 – Utilizar os menus

O primeiro passo é criar a base do formulário, que por outras palavras é criar as tags <form> dentro das quais irá inserir os elementos do formulário:

Guia Dreamweaver - Formulários (Parte XI)

De seguida podemos começar a inserir os elementos dentro do formulário. Começamos por inserir 2 campos de texto para o nome e email:

Guia Dreamweaver - Formulários (Parte XI)

E por último inserimos uma área de texto para os visitantes poderem escrever a sua mensagem:

Guia Dreamweaver - Formulários (Parte XI)

Método 2 – Escrever código

Naturalmente que poderá optar por utilizar o método acima se não for um usuário habituado aos editores de código e prefira utilizar um editor visual. No entanto, aconselhamos vivamente que se inteire de métodos de programação, pratique escrever código e aprenda a escrever código em várias áreas de programação, principalmente se estiver orientado para a programação web, aconselhamos que aprenda PHP, HTML e CSS. Estes três são uma base importante para que possa conseguir desenvolver websites ou aplicativos online durante a sua carreira como programador.

<form id="contato" name="form_contato" method="post" action="">
  <p>Nome:
  <input name="nome" type="text" />
  </p>
  <p>E-mail: <input name="email" type="text"></p>
  <p>Mensagem: </p>
  <textarea name="mensagem" cols="50" rows="10"></textarea>
</form>

Este será o aspecto final, tanto utilizando o primeiro método como utilizando o segundo:

Guia Dreamweaver - Formulários (Parte XI)

Este é um simples formulário onde o visitante poderá entrar em contato consigo, preenchendo o nome e e-mail e inserindo a mensagem nos campos assinalados para isso mesmo.

A estilização de um formulário é também um passo importante no que toca ao desenvolvimento do mesmo. Se pretende criar um formulário de contato visualmente atrativo que dê uma imagem profissional do seu trabalho e do seu website, recomendamos a leitura do artigo Como criar um formulário de contato com CSS3, onde passo-a-passo poderá aprender como criar um fantástico formulário de contato e estilizá-lo com a ajuda de CSS3, criando assim uma ferramenta que os seus visitantes poderão utilizar para lhe dar feedback sobre o seu trabalho, enviar-lhe dúvidas que tenham acerca do website ou do seu trabalho, permitindo assim haver uma interação entre os visitantes e o proprietário do website. A criação de formulários de contato bonitos e atraentes normalmente significa a utilização de imagens e alguns truques Javascript / jQuery, mas no tutorial mencionado irá criar um fantástico formulário de contato utilizando apenas HTML5 e CSS3.

No próximo artigo iremos continuar a abordar os formulários, onde vamos entrar numa seção mais avançada no manuseamento dos mesmos, não perca!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz