Layouts no Dreamweaver MX

Neste tutorial nós abordaremos a criação de tabelas no modo Layout no Dreamweaver MX (o que facilita muito a vida de quem quer trabalhar com tabelas) ;) ...
No painel "Insert" você encontrará a aba "Layout". Clique nela, conforme indica a figura a seguir:

O Dremaweaver MX mostrará por default o modo "Standard": clique no modo "Layout View" conforme indica a figura acima.

Perceba agora que dois botões foram adicionados: o primeiro deles serve para criarmos uma tabela e o segundo serve para criarmos uma célula de uma tabela. Começaremos criando uma nova tabela e depois definir quais serão suas células.
Clique no botão vá até o site e desenhe a tabela de acordo com sua necessidade! Veja o exemplo:

Selecione a ferramenta para criação de células e crie as células de acordo com sua necessidade. Veja o exemplo:

Caso você queira redimensioná-las, basta selecionar a célula ou tabela desejada e definir o novo tamanho através do painel "Properties" ou simplesmente arrastando com o mouse até o tamanho desejado. Veja:

Para vermos como nossa tabela ficou basta selecionarmos no painel "Insert" a opção "Standard View":

Pronto! Com este recurso, a criação e edição de tabelas torna-se muito mais simples e rápida :) ...

Painel Design Dreamweaver MX

Neste tutorial nós abordaremos mais uma maravilha do Dreamweaver MX: o painel Design! Como muita gente não sabe o que é o painel Design (e muito menos como utilizá-lo), este tutorial será dividido em duas partes. Mãos à obra ! :) ...
Conhecendo o painel Design
Nesta parte do tutorial nós ficaremos um pouco mais íntimos do Dreamweaver MX: para exibir o painel Design basta clicar em Window (Janela) e depois em um dos três itens indicados na figura abaixo:

Veja um exemplo do painel aberto, na figura abaixo:

Este painel da figura acima está mostrando a aba de CSS Styles, que nos permite criar alguns estilos CSS. Perceba que há um botão no canto superior direito. Clique nele, conforme indica a figura:

Este é o menu que será aberto com as opções do CSS Styles! Cada aba possui seu menu! ;) ... As funções veremos mais adiante ...

Explorando um pouco mais, temos algumas opções adicinais na aba CSS Styles, indicadas da figura:

Perceba que há um retângulo vermelho na opção Edit Styles: esta opção serve para editarmos um estilo (CSS) já existente! Agora, clique na aba HTML Styles e você terá a seguinte tela:

Esta aba permite-nos a criação de alguns estilos HTML para o site com o intuito de facilitar nossa vida e poupar tempo e trabalho! Imagine que você precisa definir que um determinado texto deve possuir fonte Verdana com corpo 2 e em negrito: para isso basta definir um estilo HTML e toda vez que você precisar este estilo ele poderá ser aplicado diretamente no texto. Veremos mais sobre isso adiante ...
Clicando no botão superior direito você encontra o menu:

Agora, clique na aba Behaviors, para ver a seguinte tela:

O painel de Behaviors permite a criação de alguns comportamentos para o site. Para adicionar um comportamento, basta clicar no "+". Existe um tutorial completo sobre a criação de Behaviors aqui mesmo no site do BABOO - não deixe de conferir!
Utilizando o painel Design
Começaremos criando um novo estilo CSS. Veja:

Clique no botão indicado na figura acima para criar um novo estilo. Você verá a seguinte tela:

Neste exemplo eu coloquei o nome do estilo (BABOO), selecionei a opção para criar um estilo personalizado e apenas para este documento! Clique em OK para abrir a tela de configuração do estilo:

Perceba que em "Category" nós temos várias opções: "Background", "Border" e assim por diante. Neste exemplo eu estou trabalhando com "Type", definindo qual será a fonte, o tamanho, sua cor e assim por diante. Assim que definir tudo o que desejar, clique em OK.

Veja agora que o estilo foi adicionado ao painel: se você der uma olhada no código-fonte do site, perceberá que o estilo já está sendo utilizado:

Legal não?! Mas ainda não acabou ... Veremos agora um pouco mais sobre a criação de estilos - mas desta vez, estilos HTML! Selecione a aba HTML Styles e clique no botão indicado:

Ao clicar neste botão você verá a tela para configurar o estilo, conforme indica a figura:

Neste exemplo eu dei o nome ao estilo (BABOO) e defini algumas opções: Aplicar estilo a um parágrafo com font Tahoma (corpo 2), cor preta e negrito. O formato é parágrafo e o alinhamento é centralizado. Clique em OK e aprecie seu mais novo estilo no painel:

Para aplicar este estilo, escreva um texto qualquer na tela do site, selecione-o e clique no estilo: você verá que será aplicado o estilo ao texto!

Antes              Depois

Legal não é mesmo?! Caso queira aprender a utilizar a aba Behaviors (comportamentos), confira o tutorial disponível aqui mesmo no BABOO! Bem, pessoal,  este foi mais um tutorial sobre os painéis do Dreamweaver MX: agora é só praticar e começar a poupar tempo e trabalho! :) ...

Criando Server Behaviors no Dreamweaver MX

Neste tutorial abordaremos a criação de Server Behaviors no Dreamweaver MX. Para quem não sabe, Server Behaviors (Comportamentos do Servidor) permite que adicionemos alguns comportamentos, como a criação de conexões, criação de logins e assim por diante. Neste tutorial veremos como se habilita o painel para a posterior criação de comportamentos.
Vamos começar abrindo o painel de Server Behaviors: Clique em Window/Server Behaviors ou aperte Ctrl+F9.

Você verá o seguinte painel:

Muito bem, agora veremos como habilitar o painel (pois se tentarmos criar algum comportamento neste exato momento o Dreamweaver não permitirá). Clique no item 1: "Create a site for this file" para ver a seguinte tela:

Configure a pasta e o nome do site e clique em OK: você perceberá que o painel de Server Behaviors tem agora o item 1 e ele estará com um sinal indicando que o site já foi criado:

Agora clique no item 2 para escolhermos o tipo de documento:

Escolha o tipo de documento desejado e clique em OK. O Dreamweaver oferece várias opções, como PHP, ASP, JSP e assim por diante...

Agora clique no item 3 para definirmos o servidor de testes:

Após indicar o servidor de testes, clique em OK e você verá que agora podemos finalmente criar Server Behaviors:

Para criar seus Server Behaviors basta agora clicar no + e configurar! A seguir, veremos um exemplo de criação de um Server Behavior:
Neste exemplo criaremos um acesso restrito ao site (Behavior que está dentro de "User Authentication"): clique no + e escolha a opção conforme indica a figura:

Ao escolher esta opção, o Dreamweaver mostrará uma tela de configuração:

Após configurar, clique em OK e pronto: você já tem um Server Behavior criado! O Dreamweaver oferece várias opções de comportamentos para o servidor - inclusive alguns comportamentos que podem ser baixados do site da Macromedia. Aconselho que você explore cada um dos comportamentos (desde que possua conhecimento de banco de dados e linguagem dinâmica) ;) ...

Templates no Dreamweaver MX

Olá! Neste tutorial abordaremos o uso de Templates no Dreamweaver MX. Como muita gente ainda não sabe o que é e nem para que os templates servem, faremos uma breve explicação sobre sua utilização:
O que são e para que servem os Templates!?
Os Templates são "moldes/modelos" de páginas que construimos para economizarmos muito tempo na hora de construir um site. Para explicar melhor, imagine a seguinte situação: você está produzindo um site do estilo portal e todas as páginas seguem um padrão de Design, somente modificando o "miolo" ou o seu conteúdo. Ao invés de criarmos página por página, basta construirmos um modelo de página e apenas modificarmos o conteúdo.

Criando um novo Template
Agora que você já conhece um pouco mais sobre os modelos, vamos aprender a criar um: comece clicando em File e depois em New (ou simplesmente teclando Ctrl+N) conforme a figura abaixo:

Logo após você verá a seguinte janela:

Como queremos criar um novo Template, devemos escolher em Category a opção Template Page e o seu respectivo estilo - que neste caso é uma Template em HTML. Após escolher, clique em Create para começar a criar seu mais novo Template. Veja na figura acima que você ainda possui um botão "Preferences..." que como o próprio nome diz, serve para editarmos as preferências da página - como por exemplo se a extensão será .htm ou .html.
Agora você deve editar a página de acordo com sua preferência. No exemplo abaixo, temos uma tabela, sendo que a Testeira e o MENU serão regiões "fixas" no Template, ou seja, regiões que não mexeremos pois será padrão em todas as páginas do site. No meio da tabela, temos a célula de Conteúdo, que será a região editável.

Para marcarmos a célula conteúdo como editável, clique na aba "Templates" e depois no botão Editable Region conforme indica a figura:

Na Janela que se abre, digite o nome da região se preferir e clique em OK. Agora, basta editar o conteúdo da área editável, conforme o exemplo abaixo, onde foi inserida uma tabela.

Agora vamos salvar esta página como uma Moldura ou Template: para isso clique em File e depois em "Save as Template..." conforme mostrado na figura abaixo:

Será aberta uma janela mostrando o Site, os Templates existentes para este site e "Save As:" que é onde devemos colocar o nome para o nosso template.

Clique em Save e pronto: você criou um Template. Mas e agora?! Como fazer para criar uma outra página baseada neste Template?! É muito simples: basta proceder da seguinte forma:
Clique em File e depois em New, ou simplesmente aperte Ctrl+N e você terá a seguinte tela:

Escolha a aba "Templates" para vermos quais os Templates existentes. Veja na figura acima que há duas regiões marcadas de vermelho! Elas são:
- Templates for: Exibe o site do Template
- Preview: Mostra um Preview (prévia) do Template selecionado.
Selecione o Template que criamos anteriormente e clique em Create. Veja um exemplo:

O Template é aberto. Tente modificar as regiões que não definimos como editáveis para ver o que acontece! Simplesmente impossível! O Dreamweaver apenas nos "deixa" modificar as regiões editáveis, como mostra a figura acima!
Basicamente é isso! Agora é só praticar e utilizar os Templates para economizar tempo e trabalho!

Transferindo arquivos SSH na prática, para iniciantes (atualizado)

Carlos E. Morimoto
19/12/2008

Como se não bastasse, o SSH permite também transferir arquivos, através do módulo SFTP, que vem ativo por padrão. Ele utiliza o mesmo túnel encriptado usado para rodar os aplicativos remotamente, garantindo a segurança da transmissão.

O SFTP utiliza a mesma porta do SSH, a porta 22, de forma que você não precisa se preocupar em deixar nenhuma outra porta aberta no firewall. Desde que o SSH esteja ativo, o SFTP também estará.

Nos clientes Linux, você pode acessar os arquivos do servidor usando o Konqueror (no KDE), ou o Nautilus (no Gnome). Se nenhum dos dois estiver disponível, é possível usar também o GFTP, que pode ser instalado usando o gerenciador de pacotes.

No Konqueror, digite "fish://", seguido pelo login e o endereço do servidor (separados por uma arroba) na barra de endereços, como em "fish://gdh@192.168.1.22". Ele exibe uma janela gráfica pedindo a confirmação da identidade do servidor (apenas na primeira conexão) e em seguida outra solicitando a senha:

Uma dica é que você pode usar o recurso do Konqueror de separar a janela em duas (Janela > Separar a visão em Topo/Base) para facilitar as transferências de arquivos. Você pode ter então uma metade exibindo os arquivos do servidor remoto e outra exibindo os arquivos locais, podendo assim arrastar os arquivos de uma para a outra.

No Nautilus, clique em "Arquivo > Conectar ao servidor". Na janela seguinte, escolha "SSH" na opção "Tipo de serviço" e forneça o endereço do servidor e o login que será usado, no campo "Nome do Usuário". O campo com a pasta permite especificar qual pasta será acessada por padrão ao efetuar a conexão, mas ela é opcional. O campo "Porta" é usado apenas caso você tenha configurado o servidor SSH para escutar uma porta diferente da 22:

Isso cria um ícone de acesso, que aparece tanto no desktop quanto na barra "Locais" do Nautilus. Para finalmente efetuar o acesso, você clica sobre o ícone e fornece a senha. Para encerrar o acesso, clica sobre ele com o botão direito e usa a opção "Desmontar":

Para acessar usando o GFTP, você deve mudar a opção de protocolo (o campo do lado direito da tela) de "FTP" para "SSH2". Com isso ele automaticamente acessa o servidor na porta 22, usando o protocolo SFTP. Assim como no caso do Nautilus, só é necessário especificar a porta caso o servidor tenha sido configurado para usar uma porta diferente da 22:

No Windows você pode utilizar o Filezilla, um cliente de FTP gráfico e bastante amigável, que inclui suporte ao SFTP. Você pode baixá-lo no http://filezilla.sourceforge.net/.

Para conectar a servidores SSH, use a opção "File > Site Manager > New Site" (os campos na tela principal servem apenas para servidores FTP).

Na tela seguinte, informe o IP do servidor, a porta (22) e a conta de acesso. Uma vez conectado, você acesso os arquivos usando a interface tradicional dos clientes de FTP, com as duas janelas, uma mostrando os arquivos locais e outra mostrando os do servidor. Para transferir arquivos, basta arrastá-los entre as duas:

É possível também acessar os arquivos via linha de comando usando o comando "sftp usuario@servidor" (no Linux) ou o PSFTP (disponível na mesma página do Putty) no Windows. Em ambos os casos, você usa o comando "cd" para alternar entre os diretórios e os comandos "put" e "get" para transferir arquivos.