domingo, 23 de março de 2014

Definir um site no Adobe Dreamweaver

Olá a todos, tudo bem ?

Hoje nós vamos falar sobre como definir um site no Adobe Dreamweaver.
Fundamental para iniciar qualquer projeto de internet, através da definição de sites no Adobe Dreamweaver, nós vamos reduzir o processo de desenvolvimento, definir onde os arquivos do nosso site vai ficar localizado e uma série de recursos que vai facilitar nosso trabalho.

Para que você conseguia realizar este tutorial corretamente e entender é fundamental que você respeite todos procedimentos abaixo para obter o resultado satisfatório do tutorial.
Se você não consegui realizar o tutorial no passo-a-passo você pode visualizar o vídeo no final do tutorial.

Aprender mais sobre definição de sites no Adobe Dreamweaver

Então vamos lá

PRÉ-REQUISITOS 
  1. Conhecer HTML
  2. Ter Instalado XAMPP ou WAMP
  3. Ter instalado em seu equipamento o Adobe Dreamweaver 
Antes de iniciarmos nosso tutorial e necessário você saber que tipo de página para web você vai trabalhar.
Em nosso caso vamos trabalhar com paginas em PHP. O Adobe Dreamweaver trabalha com diversos tipos de paginas para web tais como: ASP, PHP, JSP, HTML, etc...

Após ter definido o tipo de página que você vai trabalhar vamos abrir o Adobe Dreamweaver

Abra o Adobe Dreamweaver (versão que estou utilizando é CS6 )

Adobe Dreamweaver

Na barra de menus clique em Site > Manager Sites

Menu Site - Manager Sites


Após clicar em Manage Sites, o Adobe Dreamweaver vai exibir a seguinte Janela abaixo.

Janela Manage Sites


A Janela acima exibe que já temos alguns sites que já foram definidos, agora vamos definir nosso site. 
Nesta mesma janela clique no botão New Site, veja abaixo.

Janela Manage Sites botão New

Após clicarmos no botão novo, abra-se novamente uma janela, esta janela é um assistente que vai nos orientar para definirmos o site.


No canto esquerdo da Janela temos algumas opções que vamos trabalhar



Site - Onde vamos definir o nome do site e o local onde encontra-se os arquivos do site

Site Name, você vai colocar o nome do site exemplo: "Meu site, Petshop", fica a seu critério.
Local Site Folder, está é a parte principal pois quem trabalha com páginas dinâmicas como PHP, ASP E JSP, precisa localizar a pasta onde armazena o site. 

Por exemplo se você utiliza o XAMPP seu projeto deve ficar no site diretório que é o htdocs. O caminho dele é c:\xampp\htdocs\. Agora você cria o nome da pasta do seu projeto.

Quem utiliza o WAMP Server o diretório principal para colocar seu site é a pasta www. O caminho dele é c:\wamp\www\. Agora aqui você cria o nome da pasta o seu projeto.


Servers - Onde vamos definir o tipo servidor e a tecnologia usada das paginas exemplo PHP/MYSQL OU ASP, JSP, etc.. Veja a imagem abaixo:

Na imagem acima nos encontramos uma barra com ícones nos informando sobre os servidores.

+ Adcionar o servidor
- Excluir o servidor
Lápis - Editar a configuração do servidor
Duas folhas de papel duplicar o servidor

OBS: O Dreamweaver CS6 da suporte para você montar dois servidores do mesmo projeto, ou seja você pode testar seu projeto em sua maquina utilizando o servidor instalado xampp e wamp e ainda pode montar definir o servidor de ftp que fara a hospedagem do mesmo site.

Clique no botão + 


Ao clicarmos no botão + é exibida a janela da configuração de servidores, no topo da janela encontramos duas opções BASIC e ADVANCED, vamos trabalhar com as duas janelas.

BASIC

Em Basic abaixo você encontra a Opção Server Name: como estamos trabalhando com o XAMPP e o WAMP, coloque o nome do servidor para localhost.

Em  Connect Using: coloque a opção Local/Network. como na imagem abaixo

Server Folder: Coloque o mesmo diretório onde encontra-seu site como definimos no começo dentro de htdocs ou www.

Web URL: Coloque o endereço http:// mais o nome do servidor + o nome da pasta onde você colocou dentro de htdocs ou www.
Exemplo: http://localhost/petcao


ADVANCED

Em Advanced, é necessário você definir o modelo de servidor que você vai utilizar lembrando que neste tutorial estamos trabalhando com PHP MYSQL.

Observação: Se você não for trabalhar com paginas dinâmicas que tenha acesso a banco de dados, como HTML coloque na opção None.

Modelo de Servidor



Advanced Settings 



Estamos agora na etapa final para a definição do nosso projeto no Adobe Dreamweaver.
Advanced Settigns - nos vamos ver a opção Local Info, onde vamos definir qual é a pasta de imagens de nosso projeto e a URL do nosso projeto em nosso servidor.

Em Default Images folder nos vamos definir onde será a pasta de imagens de nosso projeto. Pois atraves desta definição quando você for inserir uma imagem automaticamente ele ira exibir todos as imagens que vem da pasta.

Default Images Folder

Agora em Web URL você vai colocar o endereço de URL para exibir seu projeto no browser. Exemplo se você estiver o usando o XAMPP você que a pasta padrão de projetos do XAMPP fica em (c:\xampp\htdocs\seu-projeto) ou seja sua url sera http://localhost/seu-projeto. Isso também se aplica se você estiver utilizando o WAMP seu projeto noWAMP fica em (c:\wamp\www\seu-projeto).



Feito isso clique em SAVE e depois em DONE.

Feito isso seu projeto ira aparecer no painel Files do seu dreamweaver veja a imagem abaixo.

Painel Files

Pessoal espero que gostem deste tutorial, e compartilhe ele no Facebook, Twitter, e Google Plus. Meu próximo artigo será sobre como fazer conexão de banco de dados Mysql com o Dreamweaver.