Introdução Adobe Dreamweaver

Uma curiosidade sobre o atual Adobe Dreamweaver é que ele foi criado inicialmente pela empresa Macromedia e posteriormente adquirido pela Adobe Systems que fez sua primeira versão oficial em dezembro de 1997.
Este tipo de programa era inicialmente um editor front end simples que trabalhava com HTML WYSIWYG ("What You See Is What You Get", ou "O que você vê é o que você tem").
Adobe Dreamweaver dentre os vários formatos de arquivos para web, trabalha com: ASP, ASP VBSCRIPT, ASP JavaScript, ASP. NET #C, CSS, Action Script, ColdFusion, ColdFusion Component, JSP, HTML, XML, XHTML, PHP, XSLT fragment, XSLT entire page, Biblioteca de itens e CSS.
O menu superior com o retângulo bicolor ao redor é o menu padrão do Adobe Dreamwever, aqui você pode encontrar as funcionalidades padrão do programa.
O quadro verde com o número 1 na parte de dentro em verde corresponde aos arquivos abertos recentemente.
O quadro vermelho com o número 2 na parte de dentro indica a possibilidade de criar novos arquivos e mostra uma parte dos arquivos de possível editoração com o Adobe Dremaweaver.
O quadro amarelo com o número 3 na parte de dentro indica um canal de vídeo e suporte da própria Adobe TV para ajuda ao usuário iniciante poder obter melhor resultado do software (programa de computador – WYSIWYG).
O quadro azul com o número 4 na parte inferior a direita é o centro de suporte adobe e testes para browsers.
O quadro cinza claro com o número 5é referente a dicas para começar, novidades.
Introdução Adobe Dreamweaver

Para ativar ou desativar esta tela inicial escolha no menu superior edit, em seguida preferences. O atalho é (control U).
Introdução Adobe Dreamweaver
Nesta próxima tela que irá abrir escolha e marque o box a esquerda do nome (show welcome screen) para habilitar ou desabilitar esta função. (recomendado deixar marcado).
Introdução Adobe Dreamweaver
A interface adaptável do Adobe Dreamweaver
Todos os programas da Adobe Systems possuem uma interface adaptável no intuito de tirar melhor proveito do software (programa de computador) para usuários avançados e iniciantes. Desta forma o Adobe Dreamweaver possui 3 modos visuais básicos: primeiro o modo visual (code – código) para usuários mais avançados que trabalha diretamente no código de sistemas para internet, o segundo trabalha com o modo (design – WYSIWYG) para usuários iniciantes e em terceiro e ultimo lugar na interface de editoração possui o modulo (Split – dividir) que trabalha com ambas interfaces (code / design).
Além destas interfaces o Adobe Dreamweaver possui módulos para teste da implementação dos sistemas para web desenvolvidas por você representado em seu posicionamento pelo trecho marcado ao redor em azul com o número 1 como você pode ver na imagem abaixo.
Observe que a interface de código é representada pela área marcada ao redor em vermelho representada pelo número 2 para usuários mais avançados.
Observe a interface de design representada pela área destacada com verde ao redor representada pelo número 3.
Importante
A imagem abaixo é uma ilustração do modo visual (Split – dividir) onde mostro a interface code e design. Para ver individualmente cada interface veja no seu Dreamweaver os demais modelos individualmente e assista a vídeo aula para mais detalhes.
Introdução Adobe Dreamweaver
Configurando meu primeiro site no Adobe Dreamweaver
Para configurar os dados do seu primeiro site no Adobe Dreamweaver clique no menu superior na opção (site) em seguida escolha a opção (new site – novo site) caso deseje adicionar um novo site ou (manage site – gerenciar site) para gerenciar um site já criado anteriormente no modelo do (new site – novo site).
O processo de gerenciamento de site é o mesmo de criar um novo, com a diferença que em novo site você criar e configura um novo site, e em gerenciamento de site você atualiza os parâmetros e configurações de um site já existentes.
Introdução Adobe Dreamweaver
Configurando o meu primeiro site no Adobe Dreamweaver
Por padrão virá nesta tela mencionada abaixo (site) onde você irá dar um nome ao site que de preferencia não deve ter espaço (posicionamento relacionado a imagem de número 1 em vermelho) e no número 2 em vermelho você configura o lugar onde irá ser armazenado os arquivos do site que está fazendo agora.
Este processo é muito importante pois caso arquivos sejam criados fora de destes diretórios pode dar conflito em algumas funcionalidades do seu site e na escrita de sistemas pela interface do Adobe Dreamweaver como por exemplo erro na configuração do endereço físico do posicionamento dos arquivos que interagem com o HTML.
Introdução Adobe Dreamweaver
A próxima opção seria servers ( veja mais detalhes no vídeo).
Quanto a configuração servers deixei detalhes no vídeo, mas de antemão adianto que acredito que o sistema de upload do FIRE FTP é melhor que o do Dreamwever e muito.
Vamos neste momento ver a opção (advanced settings – configurações avançadas)
Em seguida escolha a opção (local info – informações locais)
Apesar do nome assustar um pouco as configurações avançadas são bem simples, na primeira etapa você irá configurar a pasta de imagens do diretório do seu site local antes de fazer o UP load e a forma como os links são criados (relativo ou absoluto).
Para mais detalhes de configuração deste passo veja a vídeo aula no final deste post.
No que se refere a opção (cloaking –disfarce) diz respeito a opção que você tem de excluir extensões de arquivos no processo de up load. Na minha opinião uma das coisas mais inteligentes deste sistema de FTP do dreamweaver é o cloaking.
Exemplo: possibilitar excluir os arquivos editoráveis originais de um projeto para dificultar a manipulação e ré editoração de seu trabalho como por exemplo os arquivos PSD, FLA
Os demais detalhes e opções serão abordados no final do post na vídeo aula 1 de Introdução ao Adobe Dreamweaver.
Introdução Adobe Dreamweaver
PlayList de Vídeo Aulas sobre Adobe DreamWeaver
Introdução Adobe Dreamweaver Introdução Adobe Dreamweaver Reviewed by André Rossiter on 15:19 Rating: 5

Nenhum comentário:

André Rossiter. Tecnologia do Blogger.