Tutorial Dreamweaver Básico

-Vou tentar explicar grande parte das ferramentas do Dreamweaver.
-Qualquer detalhe que tiver faltado, é só postar que eu arrumo aqui.
-Me basiei no Dreamweaver MX 2004 ING para fazer o tutorial, portanto, talvez não conste alguma ferramenta do Dreamweaver 8 e os nomes das ferramentas estão em inglês

Índice
*Dreamweaver
*Insert/Properties
**Common
**Layout
**Forms
**HTML

Dreamweaver
o Dreamweaver é considerado hoje, o melhor programa de edição de páginas da web, ele é capaz de fazer 100% de um site em HTML sem você precisar mexer com qualquer espécie de código. E até 80% de uma página dinâmica em PHP, incluindo sistema de login, logout, check login, recordsets e loops.
É formado basicamente de 4 áreas:
A 1ª é a "Insert" (Ctrl+F2), é ela que possui as ferramentas básicas de HTML distribuidas em diferentes abas. Será a mais explorada por nós
A 2ª é a "Properties" (Ctrl+F3), com ela você vai editar grande parte dos itens do seu documento
A 3ª, normalmente localizada do lado direito da janela, contem as abas: "Design", "Code", "Aplications" (não será explorado por nós), "Tag Inspector" e "Flies"
A 4ª é o local onde você vai inserir, editar, excluir e visualizar objetos do seu texto.

Insert/Properties
Vou desenvolver essa parte explicando o que cada um dos botões fazem e as propriedades que podem ser modificadas pelos seus produtos.

Insert>Common>Hyperlink
Este objeto irá inserir um link sobre o texto selecionado, ao clicar, será aberto uma window pedindo algumas infomações:
*Text: texto do link (Ex: Clique Aqui, Download)
*Link: página que será direcionada (Ex: pagina.htm, home.htm)
*Target: onde esta página será aberta.
**_blank: uma nova página
**_parent, _self, _top: se estiver trabalhando com frames
**[Nome_Do_Frame]: para o frame escolhido (Ex: home, menu)
**[Em_Branco]: para esta mesma página
*Title: título da página que será aberta
*Access Key, Tab Index: não será explorada por nós neste tutorial

CODE

Insert>Common>Email Link
Na prática, irá abrir uma janela de nova mensagem do correio eletrônico padrão (normalmente é o Outlook).
Será pedido as seguintes informações:
*Text: texto do link (Ex: Contato, Fale Conosco)
*E-mail: o e-mail para quem será enviado

CODE

<a href="mailto:email@dominio.com.br">Contato</a>

Insert>Common>Named Anchor
Este objeto irá criar a âncora em um determinado ponto no site. É muito funcional para páginas de grandes extensões, onde as pessoas podem ser levadas a um local na página mais facilmente.
Para desenvolver o link, escreva o texto no local desejado, selecione-o e na windows Properties, no campo "Link" escreva o nome da âncora criada antecedida do símbolo de numeral (#) (Ex: #parte1, #parte2)

CODE

Insert>Common>Table
Após clicar neste objeto, será aberto uma table com o intuito da criação de uma tabela. Preencha os campos de acordo com sua necessidade.
*Rows: quantidade de linhas
*Columns: quantidade de colunas
*Table Widht: largura da tabela, você pode selecionar em "percent" (porcentagem) ou em pixels
*Border thickness: grossura das bordas da tabela
*Cell padding: altura de cada célula (linha)
*Cell spacing: espaço entre uma linha e outra
As demais opções não serão exploradas por nós.
Na barra "Properties" você tem as opções:
*mesclar duas ou mais células selecionadas, atravéz do botão "Merge selected cells using spans", (dois quadrados onde a interseção deles é uma linha pontilhada).
*adiconar fundo nas células selciondas, inserindo o endereço da imagem no campo Bg
*adicionar cor de fundo nas células selecionadas, clique sobre o pequeno quadrado onde está escrito "Bg" e selecione a cor e fundo ou digite o código dela em RGB
*adcionar cor da borda das células selecionadas, clique sobre o pequeno quadrado do "Brdr" e selecione a cor ou digite o código RGB desejado

Insert>Common>Images>Image
Insere uma imagem a partir da seleção feita na window que foi aberta. O Dreamweaver irá inserí-la com largura/altura original, porém você pode modificar utilizando os campos W (largura)/H (altura) do "Properties".
Outras opções do Properties:
*Src: endereço da imagem (Ex: foto.jpg)
*Link: um possível link para a imagem (Ex: home.htm)
*Low Src: imagem que será mostrada enquanto a outra carrega (tipo um loading em flash, porém estático)
*Border: grossura da borda (o padrão é 0, sem borda)

CODE

Insert>Common>Images>Rollover Image
Insere uma imagem dinâmica, pois quando o mouse passa por cima de si (onMouseOver) modifica a imagem. Na caixa de diálogo que irá aparecer, preencha os campos de acordo com sua necessidade:
*Image name: nome da imagem no script
*Original image: imagem original
*Rollover image: imagem que será substituida quando onMouseOver
*Alternate text: texto exibido quando o mouse permanecer sobre a imagem durante algum tempo (tipo uma caixa de ajuda)
*When clicked, Go to URL: link que quando a imagem for clicada deve ir

JavaScript

<script language="JavaScript" type="text/JavaScript">
<!--
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];}}
}

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];}
}
//-->
</script>

CODE

Insert>Common>Media>Flash
Insere um arquivo flash no seu documento, basta selecioná-lo na window que foi aberta.

CODE

Insert>Common>Media>Flash Button
Esta é uma ferramenta muito útil para aqueles que desejam adicionar um pouco de animação em sua página sem presecisar perder tempo com o flash, já que existem vários estilos de botões diferentes para você trabalhar.
Na window que foi aberta, selecione o "Style" desejado.
*Button text: texto a ser inserido no botão
*Font: a fonte do texto
*Size: tamanho do texto
*Link: link que este botão deve ter
*Target: local onde o link irá cair, consulte o Hyperlink para ver como funciona
*Bg Color: fundo do botão, você pode modificar para que o fundo fique invisível, porém é necessário trabalhar com o código
*Save As: nome que se deve salvar o botão

CODE

Insert>Common>Media>Flash Text
Insere um texto em flash com possibilidade de trocar de cor quando OnMouseOver, não sugiro a uilização deste, pois torna a página pesada e tem como fazer isso utilizando JS e CSS.
*Font: fonte do texto
*Size: tamanho do texto
*Color: cor original do texto
*Rollover Color: cor que será substituída quando OnMouseOver.
*Link: link para qual a página será levada quando OnClick
*Target: local onde o link deve agir
*Bg Color: cor de fundo do texto
*Save as: nome que deve ser salvo o arquivo

CODE

Insert>Common>Date
Insere a data atual, varíavel com a sua opção de estilo. Observe que está data é inserida como texto, ou seja, não é atualizada diariamente, para isso, é necessário utilizar de JS.

CODE

11/6/06

Insert>Common>Comment
Insere um comentário no seu script, repare que este não será mostrado no seu documento quando pronto, porém qualquer um pode vê-lo pelo código fonte.

CODE

Insert>Layout>Table
Consulte Insert>Common>Table

Insert>Layout>Insert Div Tag
Insere uma Tag de div, onde você pode inserir uma diferente class de CSS em um específico pedaço do texto.

Insert>Layout>Draw Layer
Insere um layer, ou como alguns chamam, camada. O seu uso é simples, basta clicar sobre o ícone e "desenhar" o espaço da layer desejado no seu documento.
Na Properties você pode modificar os seguintes itens:
*Layer ID: a ID da camada
*Bg image: imagem de fundo da camada
*Bg color: cor de fundo da camada
*Vis: visibilidade da camada, funcional em situações que você faz um pop-up menu
*Class: insere uma classe CSS desejada

CODE

Insert>Layout>Frames
Existe muita discussão sobre o uso ou não dos frames, seu uso, pelo lado positivo, é que você somente faz um menu e este é utilizado depois quantas vezes for ncessário. O lado negativo, é que a página se torna muito pesada, pois o browser terá que carregar no mínimo, 3 página (1 para o menu, 1 para o conteúdo e 1 que carrega as duas anteriores)
Porém, seu uso é muito fácil, basta você escolher qual dos layouts de Frame melhor se adequada a sua necessidade que o dreamweaver faz o resto.

Na parte de Layout irei trabalhar somente com estes itens, pois o resto é muito pouco utilizado, eu mesmo usei eles uma ou duas vezes.

Insert>Forms>Form
Insere a "form área" no seu documento, esta é necessária para adicionar qualquer item de um formulário.
Opções do Properties:
*Form name: nome do formulário
*Action: ação do formulário
*Method: selecione o método que os dados devem ser enviados
**POST, os dados irão ser enviador por varíaveis POST, adquiridas por PHP, pelo seguinte comando:

PHP

<?php $_POST['campo']; ?>

**GET, os dados serão enviados por varíaveis URL, adquiridas por PHP, pelo seguinte comando:

PHP

<?php $_GET['campo']; ?>

*Target: local onde a página deve agir após o formulário sem enviado.

CODE

Insert>Forms>Text Field/Textarea
Insere um campo de texto. Basta clicar sobre o ícone que o campo aparecerá onde estiver o cursor de digitação.
Opções do Properties:
*TextFild: nome do campo
*Char widht: tamanho do campo
*Max Chars: número máximo de caractéres (para text field)
*Num Lines: número de linhas (para Textarea)
*Type: seta o tipo de campo
**Single Line: linha única comum
**Multi Line: mais de uma linha
**Password: campo para senha (os carácteres são inseridos com asteriscos e "bolinhas")

CODE

Insert>Forms>Checkbox/Radio Button
Insere itens de opção, sendo que o Checkbox, permite a seleção de mais de um do grupo de opções, enquanto o Radio Button somente de um.
*Checkbox name: nome do checkbox (para Checkbox)
*Radio Button: nome do grupo de radio button que este pertence (para Radio Button)
*Checked Value: valor adquirido quando marcado
*Initial state: valor inicial
**Checked: marcado
**Unchecked: não marcado

CODE

Insert>Forms>List Menu
Lista de dados, na qual é determinado somente um.
Opções do Properties:
*List/Menu: nome do campo
*List Values: valores que esta lista deve ter
**Clique sobre o botão "+" para inserir mais um argumento no campo, preencha "Item Label" como sendo o valor mostrado aos usuários e "Value" o valor que esta opção retornará.

CODE

Insert>Forms>Jump Menu
Mesma coisa do List Menu, porém quando selecionada uma opção, esta irá levar para uma outra página.
Acho que não é necessário esplicar essa windows porque é a praticamente a mesma do "List Values" do item anterior, sendo que você irá inserir em "When Selected, go to URL" a URL do link.

CODE

Insert>Forms>Button
Botão que pode ser submit, reset ou none, dependendo da sua escolha no Properties. Selecionando nome, você terá que editar sua ação com códigos de JS

CODE

Insert>HTML>Horizontal Rule
Adiciona uma reta, referente ao seguinte script:

CODE

<HR>

By xTnTx

*Tutorial 100% feito por mim xD
*Não vou falar para não copiar, mas se o fizer, deixe os créditos, é o mínimo que você pode fazer por alguém que perdeu seu domingo por isso...
*Volto a repetir que qualquer dúvida ou alguma coisa que eu tenha esquecido ou deixado de colocar, mas que você precise é só postar que eu conserto e adiciono
*Se copiar, copie direito...

Topic	Forum	Started By	Stats	Last Post Info
YouTube possui ferramentas de controle da programação	Notícias	Notícias	0 Replies 327 Views	02 October 2007 - 11:46 AM By: Notícias
Ajax + ASP, recuperar valores sem refresh Baseio num tutorial que usa o PHP	Web Standards	Trunkael	0 Replies 1958 Views	21 March 2007 - 12:10 PM By: Trunkael
Apostila ou vídeo de Dreamweaver Download gratuíto	Dreamweaver	LucianaRJ	1 Reply 1011 Views	23 November 2006 - 07:22 PM By: ..:: ELVIS ::..
Expandir a tela no dreamweaver	Dreamweaver	orest	3 Replies 997 Views	16 April 2005 - 11:48 AM By: wr.chagas
Template Dreamweaver Baixei o template do clente, não consigo alterar as outras páginas	Dreamweaver	Bianca Saturno	5 Replies 1917 Views	12 March 2010 - 01:39 PM By: xanburzum
Dúvidas em uma aplicação igual ao Google suggest Tutorial passo a passo	ColdFusion	Dsouza	8 Replies 3364 Views	23 May 2007 - 01:46 PM By: CRSramone
Tutorial Text Box	Tutoriais e Artigos	fabioricotta	3 Replies 1162 Views	19 September 2004 - 01:16 AM By: BuNgiE
abrindo tutorial	Flash & ActionScript	philipshun	1 Reply 509 Views	21 February 2007 - 07:15 AM By: SpyNew

..:: MX Studio Fóruns ::..: Tutorial Dreamweaver Básico - ..:: MX Studio Fóruns ::..

Publicidade