Configure seu Dreamweaver para trabalhar

com páginas html

ou Servidores PHP ou JSP

Primeiramente abra seu Dreamweaver e na sequência vá em New Site:

Então clique em New site, se você tiver um ponto é só ir no Manage Sites e fazer o seguinte; Será aberta a seguinte janela:

Veja que o que tá circulado de Vermelho é as opções que vc pode configurar, vamos fazer na Advanced.
O que está em Azul são as category que iremos trablhar agora pra arrumar o DW para trabalhar com o EasyPhp

Vamos então preencher essa primeira category:

Para HTML

Category: Local Info
Campos
O que deve ser colocado
Site Name meus_documentos (HTML)
Local Root Folder C:\meus_documentos
Defaut Images Folder Não há necessidade, mas se vc tem uma pasta só de imagens pode usar mas não recomendo porque muitos scripts que vc testará possui pasta de imagens configuradas e se você mudar vai tudo ficar assim.
HTTP Address http://
Cache Deixa assinalado, para agilizar a visão da página.

Agora vamos para a terceira category, que é a Testing Server (Testando o servidor PHP ou JSP, como não tem, deixe em branco):

Category: Testing Server
Campos
O que deve ser colocado
Server Model None
Access None

Vamos ao teste:
Vamos criar uma pequena página em HTML e testar...

No Dreamweaver clique no menu File e depois New...

Agora vamos inserir o seguinte código só pra testa...

Insira na parte onde vão os códigos:

Pasta:
Arquivo: index.html

<html>
<head>
<title>Página HTML</title>
</head>
<body>
<h1>Esta é minha primeira página.</h1>
</body>
</html>

Salve a o arquivo mais a pasta e agora só aperta o F12.

Se deu tudo certo aparecerá assim:

Para PHP

Category: Local Info
Campos
O que deve ser colocado
Site Name Xampp (PHP)
Local Root Folder C:\xampp\htdocs\
Defaut Images Folder Não há necessidade, mas se vc tem uma pasta só de imagens pode usar mas não recomendo porque muitos scripts que vc testará possui pasta de imagens configuradas e se você mudar vai tudo ficar assim.
HTTP Address http://localhost/
Cache Deixa assinalado, para agilizar a visão da página.

Agora vamos para a terceira category, que é a Testing Server (Testando o servidor PHP):

Category: Testing Server
Campos
O que deve ser colocado
Server Model Php/MySQL
Access Local/Network
Testing Server Folder C:\xampp\htdocs\
Refresh Remote File List Automatically Deixa assinalado, para agilizar a visão da página.
URL Prefix http://localhost/

Vamos ao teste:
Vamos criar uma pequena página em PHP e testar...

No Dreamweaver clique no menu File e depois New...

Agora vamos inserir o seguinte código só pra testa...

Insira na parte onde vão os códigos:

Pasta:
Arquivo: index.php

<html>
<head>
<title>Página PHP</title>
</head>
<body>
<?php
echo "<h1>Esta é minha primeira página.</h1>";
?>
</body>
</html>

Ative o Xampp

Salve a o arquivo mais a pasta e agora só aperta o F12.

Se deu tudo certo aparecerá assim:

Para JSP

Category: Local Info
Campos
O que deve ser colocado
Site Name Tomcat (JSP)
Local Root Folder C:\xampp\tomcat\webapps\
Defaut Images Folder Não há necessidade, mas se vc tem uma pasta só de imagens pode usar mas não recomendo porque muitos scripts que vc testará possui pasta de imagens configuradas e se você mudar vai tudo ficar assim.
HTTP Address http://localhost:8080/
Cache Deixa assinalado, para agilizar a visão da página.

Agora vamos para a terceira category, que é a Testing Server (Testando o servidor JSP):

Category: Testing Server
Campos
O que deve ser colocado
Server Model Php/MySQL
Access Local/Network
Testing Server Folder C:\xampp\tomcat\webapps\
Refresh Remote File List Automatically Deixa assinalado, para agilizar a visão da página.
URL Prefix http://localhost:8080/

Vamos ao teste:
Vamos criar uma pequena página em JSP e testar...

No Dreamweaver clique no menu File e depois New...

Agora vamos inserir o seguinte código só pra testa...

Insira na parte onde vão os códigos:

Pasta:
Arquivo: index.jsp

<html>
<head>
<title>Página JSP</title>
</head>
<body>
<%
out.println( "<h1>Esta é minha primeira página.</h1>");
%>
</body>
</html>

Ative o Xampp

Salve a o arquivo mais a pasta e agora só aperta o F12.

Se deu tudo certo aparecerá assim:

Criando Image Map

Um mapa de imagem é uma imagem dividida em regiões ou pontos ativos, quando o usuário clicar no ponto ativo será exibido um novo documento.
Vamos utilizar o poperties inspector para criar e configurar os nossos mapas de imagem. Para isso precisamos inserir uma imagem.

Inserindo uma imagem no documento

No painel insert, categoria common, clique em imagens representado por um botão que tem uma arvore desenhado, para abrir a janela abaixo:



Na figura acima observamos três áreas em destaque, primeiro o Map, onde podemos criar mapas de imagem do tipo: retangular, elíptica e poligonal.

Abaixo vamos ver como configurar os pontos ativos de um mapa de imagem

É só escolher uma das três opções de mapa e desenhar por cima da imagem e configurar as propriedades.

Clicando em cada região em azul, o painel Inspetor de propriedades apresenta as seguintes opções:


 
No campo Link, determine o caminho de seu link: digite a URL ou use o recurso Indicar o arquivo ou Procurar o arquivo.

Conforme suas necessidades preencha os campos Destino e Alt nesta etapa do trabalho.

Target (Destino):

_blank - carrega o arquivo do link numa nova janela do navegador de Web
_parent - abre o vínculo do link no conjunto-pai de frames, substituindo o mesmo, no qual o link está inserido
_self - abre o documento na mesma frame do link, substituindo o conteúdo da mesma
_top - carrega o vínculo do link na janela atual do navegador de Web, substituindo todo o conteúdo

Você também poderá usar o nome de uma frame de seu site aqui.

Alt:
Digite uma palavra descritiva aqui para aparecer enquanto a imagem não é totalmente carregada no navegador de Web. Essa palavra também aparece quando o cursor do mouse fica parado sobre a imagem.

 4. Finalizando
No exemplo deste tutorial, o ponto ativo para as figuras poderia ter as seguintes atribuições:

Link: retangulo.html;
Target: _blank;
Alt: Esta figura é um retângulo.

Link: circulo.html;
Target: _blank;
Alt: Esta figura é um circulo.

Link: estrela.html;
Target: _blank;
Alt: Esta figura é um estrela de seis pontas.

Templates

Template é uma página criada a partir do layout de outra página, mas que permite bloquear determinada área disponibilizando para exibição apenas as regiões editáveis (Editable Region).
Se você tem 50 páginas e deseja mudar o layout de todas elas, imagine só o trabalho que você teria para alterar manualmente mais de 50 páginas.
Neste exemplo vamos criar inicialmente um Template baseado na página abaixo:

Referência: template/index.htm

1. Abra a página que você acabou de desenvolver, no nosso caso é a página do exemplo acima.

2. Em seguida, selecione o conteúdo do texto e clique com o botão direito do mouse, Escolha Template e escolha New Editable Region.

3. Na próxima janela, renomeie a área editável e clique em OK.

4. Note que a área editável de sua página apresentará um contorno em azul (confira na imagem abaixo).

5. Agora, acesse o menu File e clique em Save as Template.

6. Na tela seguinte, dê um nome ao seu template e clique em Save (no nosso exemplo é template_exemplo).

7. O Dreamweaver vai então exibir a página do template. Selecione e apago o conteúdo da região editável.

8. Feito isso, salve, feche a página do Template e confira a seguir como fazer para criar novas páginas baseadas nele:

1. No DreamWeaver crie uma página Html;

2. Na barra de menu, clique em: Insert > Layout objects > Layer

3. Aparecerá um quadrado como na figura abaixo:

4. Dentro deste quadrado insira um texto ou uma figura. No exemplo inseri uma figura.

5. Clique com o botão direito do mouse numa alça de redimencionamento e aparecerá um menu:

Add to Timeline X Record Path

Record Path

a) Clique em Record Path

b) Na alça branca:

c) Arraste da camada pela alça branca. (faça o movimento que vc quer que a figura faça na tela)

d) No menu Timeline nas caixas de seleção Autoplay e Loop devem estar ativos;

e) Salve e execute no seu navegador.

Veja o código abaixo:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 177px;
top: 90px;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 238px;
top: 84px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 534px;
top: 62px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
//Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (numGotos != null)
if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
jmpFwd = (fNew > tmLn.curFrame);
for (i = 0; i < tmLn.length; i++) {
sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
if (sprite.charAt(0) == "s") {
numKeyFr = sprite.keyFrames.length;
firstKeyFr = sprite.keyFrames[0];
lastKeyFr = sprite.keyFrames[numKeyFr - 1];
if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
if (sprite.obj != null) {
if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
else sprite.obj[props.prop2][props.prop] = props[propNum];
} }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
}
tmLn.curFrame = fNew;
if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_initTimelines() { //v4.0
//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
var ns = navigator.appName == "Netscape";
var ns4 = (ns && parseInt(navigator.appVersion) == 4);
var ns5 = (ns && parseInt(navigator.appVersion) > 4);
var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
document.MM_Time = new Array(2);
document.MM_Time[0] = new Array(0);
document.MM_Time["Timeline1"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Timeline1";
document.MM_Time[0].fps = 15;
document.MM_Time[0].lastFrame = 0;
document.MM_Time[1] = new Array(1);
document.MM_Time["Timeline2"] = document.MM_Time[1];
document.MM_Time[1].MM_Name = "Timeline2";
document.MM_Time[1].fps = 15;
document.MM_Time[1][0] = new String("sprite");
document.MM_Time[1][0].slot = 1;
if (ns4)
document.MM_Time[1][0].obj = document["Layer3"];
else if (ns5)
document.MM_Time[1][0].obj = document.getElementById("Layer3");
else
document.MM_Time[1][0].obj = document.all ? document.all["Layer3"] : null;
document.MM_Time[1][0].keyFrames = new Array(1, 7, 13, 17, 19, 21, 32, 47, 53, 54, 55);
document.MM_Time[1][0].values = new Array(2);
if (ns5 || macIE5)
document.MM_Time[1][0].values[0] = new Array("39px", "47px", "54px", "62px", "70px", "78px", "86px", "95px", "104px", "112px", "121px", "129px", "136px", "144px", "149px", "154px", "159px", "171px", "182px", "187px", "198px", "204px", "211px", "218px", "227px", "235px", "245px", "255px", "265px", "276px", "287px", "299px", "308px", "317px", "326px", "335px", "345px", "354px", "364px", "374px", "383px", "391px", "400px", "408px", "415px", "422px", "429px", "441px", "449px", "455px", "460px", "464px", "468px", "483px", "491px");
else
document.MM_Time[1][0].values[0] = new Array(39,47,54,62,70,78,86,95,104,112,121,129,136,144,149,154,159,171,182,187,198,204,211, 218,227,235,245,255,265,276,287,299,308,317,326,335,345,354,364,374,383,391,400,408,415,422,429,441,449,455,460,464,468,483,491);
document.MM_Time[1][0].values[0].prop = "left";
if (ns5 || macIE5)
document.MM_Time[1][0].values[1] = new Array("67px", "72px", "77px", "82px", "86px", "90px", "93px", "94px", "95px", "95px", "94px", "92px", "90px", "84px", "77px", "70px", "65px", "62px", "61px", "56px", "54px", "54px", "53px", "53px", "52px", "52px", "52px", "51px", "52px", "52px", "53px", "54px", "55px", "57px", "59px", "62px", "64px", "67px", "69px", "72px", "74px", "77px", "79px", "81px", "83px", "84px", "85px", "85px", "84px", "81px", "78px", "74px", "72px", "70px", "60px");
else
document.MM_Time[1][0].values[1] = new Array(67,72,77,82,86,90,93,94,95,95,94,92,90,84,77,70, 65,62,61,56,54,54,53,53,52,52,52,51,52,52,53,54,55,57,59,62,64,67,69,72,74,77,79,81,83,84,85,85,84,81,78,74,72,70,60);
document.MM_Time[1][0].values[1].prop = "top";
if (!ns4) {
document.MM_Time[1][0].values[0].prop2 = "style";
document.MM_Time[1][0].values[1].prop2 = "style";
}
document.MM_Time[1].lastFrame = 55;
for (i=0; i<document.MM_Time.length; i++) {
document.MM_Time[i].ID = null;
document.MM_Time[i].curFrame = 0;
document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
}
}
//-->
</script>
</head>

<body>
<div id="Layer3" style="left: 491px; top: 60px;"><img src="../../web2.0/apostilas/dreamweaver/images.jpg" width="144" height="118" /></div>
</body>
</html>

Add to Timeline

a) Clique em Add to Timeline

b) No menu Timeline arraste a última coluna para 50:

c) clique na coluna 50:

d) Na alça branca:

e) arraste para o canto esquerdo (uma linha reta vai aparecer):

f) No menu Timeline nas caixas de seleção Autoplay e Loop devem estar ativos;

g) Salve e execute no seu navegador.

Obs: Para escluir o tempo, clique com o botão direito no menu Timeline, logo em seguida, clique em Remover Timeline:

Veja o código abaixo

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 177px;
top: 90px;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 238px;
top: 84px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 534px;
top: 62px;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
//Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (numGotos != null)
if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
jmpFwd = (fNew > tmLn.curFrame);
for (i = 0; i < tmLn.length; i++) {
sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
if (sprite.charAt(0) == "s") {
numKeyFr = sprite.keyFrames.length;
firstKeyFr = sprite.keyFrames[0];
lastKeyFr = sprite.keyFrames[numKeyFr - 1];
if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
if (sprite.obj != null) {
if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
else sprite.obj[props.prop2][props.prop] = props[propNum];
} }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
}
tmLn.curFrame = fNew;
if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_timelinePlay(tmLnName, myID) { //v1.2
//Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
if (myID == tmLn.ID) { //if Im newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew = ++tmLn.curFrame;
for (i=0; i<tmLn.length; i++) {
sprite = tmLn[i];
if (sprite.charAt(0) == 's') {
if (sprite.obj) {
numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
keyFrm=1;
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr != props.length) {
if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
} else {
while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
else sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
} } } } }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
if (fNew > tmLn.lastFrame) tmLn.ID = 0;
} }
}

function MM_initTimelines() { //v4.0
//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
var ns = navigator.appName == "Netscape";
var ns4 = (ns && parseInt(navigator.appVersion) == 4);
var ns5 = (ns && parseInt(navigator.appVersion) > 4);
var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
document.MM_Time = new Array(1);
document.MM_Time[0] = new Array(2);
document.MM_Time["Timeline1"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Timeline1";
document.MM_Time[0].fps = 15;
document.MM_Time[0][0] = new String("sprite");
document.MM_Time[0][0].slot = 1;
if (ns4)
document.MM_Time[0][0].obj = document["Layer3"];
else if (ns5)
document.MM_Time[0][0].obj = document.getElementById("Layer3");
else
document.MM_Time[0][0].obj = document.all ? document.all["Layer3"] : null;
document.MM_Time[0][0].keyFrames = new Array(1, 50);
document.MM_Time[0][0].values = new Array(2);
if (ns5 || macIE5)
document.MM_Time[0][0].values[0] = new Array("43px", "53px", "63px", "73px", "82px", "92px", "102px", "112px", "122px", "132px", "142px", "151px", "161px", "171px", "181px", "191px", "201px", "211px", "220px", "230px", "240px", "250px", "260px", "270px", "280px", "289px", "299px", "309px", "319px", "329px", "339px", "349px", "358px", "368px", "378px", "388px", "398px", "408px", "418px", "427px", "437px", "447px", "457px", "467px", "477px", "487px", "496px", "506px", "516px", "526px");
else
document.MM_Time[0][0].values[0] = new Array(43,53,63,73,82,92,102,112,122,132,142,151,161,171,181,191,201,211,220,230,240,250, 260,270,280,289,299,309,319,329,339,349,358,368,378,388,398,408,418,427,437,447,457,467,477,487,496,506,516,526);
document.MM_Time[0][0].values[0].prop = "left";
if (ns5 || macIE5)
document.MM_Time[0][0].values[1] = new Array("60px", "60px", "61px", "61px", "61px", "62px", "62px", "63px", "63px", "63px", "64px", "64px", "64px", "65px", "65px", "66px", "66px", "66px", "67px", "67px", "67px", "68px", "68px", "68px", "69px", "69px", "70px", "70px", "70px", "71px", "71px", "71px", "72px", "72px", "72px", "73px", "73px", "74px", "74px", "74px", "75px", "75px", "75px", "76px", "76px", "77px", "77px", "77px", "78px", "78px");
else
document.MM_Time[0][0].values[1] = new Array(60,60,61,61,61,62,62,63,63,63,64,64,64,65,65,66,66,66, 67,67,67,68,68,68,69,69,70,70,70,71,71,71,72,72,72,73,73,74,74,74,75,75,75,76,76,77,77,77,78,78);
document.MM_Time[0][0].values[1].prop = "top";
if (!ns4) {
document.MM_Time[0][0].values[0].prop2 = "style";
document.MM_Time[0][0].values[1].prop2 = "style";
}
document.MM_Time[0][1] = new String("behavior");
document.MM_Time[0][1].frame = 51;
document.MM_Time[0][1].value = "MM_timelineGoto('Timeline1','1')";
document.MM_Time[0].lastFrame = 51;
for (i=0; i<document.MM_Time.length; i++) {
document.MM_Time[i].ID = null;
document.MM_Time[i].curFrame = 0;
document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
}
}
//-->
</script>
</head>

<body onload="MM_timelinePlay('Timeline1')">
<div id="Layer3" style="left: 526px; top: 78px;"><img src="../../web2.0/apostilas/dreamweaver/images.jpg" width="144" height="118" /></div>
</body>
</html>

Configurando o FTP no Dreamweaver

1 - Clique no menu "Site" e escolha "Manage Sites"

Manage Sites

Passo 2 : clique no nome de seu site e depois em "Edit..."

Edit Site

Passo 3: clique na "aba" Advanced
 Passo 4: Selecione a opção Remote Info e marque
- Use Passive FTP - Passive mode é a melhor forma de efetuar uma conexão com o servidor através do FTP, porém alguns firewalls podem não aceitar esta configuração , somente nestes casos sugerimos que desmarque esta opção.

- Clique no botão Test. Se todas as informações estiverem corretas você irá visualizar a seguinte mensagem
"Macromedia Dreamweaver connected to your Web server successfully"
Clique em OK.

Edit Site

Passo 5 : Agora no menu lateral direito clique no símbolo Connect Após finalizar o processo de conexão clique no ícone Connect .
A seguir destes passos você estará visualizando o conteúdo seu FTP na coluna a esquerda e seus arquivos locais na coluna a direita.

Edit Site

Passo 6: Se o FTP estiver conectado clique no símbolo: Edit Site  e veja o resultado:



(gimp & inkscape)

fatiar imagens (photoshop)

cortar imagem de forma livre

cortar imagem em retângulo

Aumentar e diminuir imagem (dreamweaver) (photoshop)

girar (photoshop)

inverter horizontalmente (photoshop)

inverter verticalmente (photoshop)