Publicidade
O Dreamweaver CS5 é o melhor programa para edição de websites. Permite criar simples websites feitos em HTML, até websites complexos que usem PHP, CSS, Javascript, Ajax e conexão com base de dados.Nesta nova versão, o Dreamweaver CS5 vem com suporte a CMS (WordPress, Joomla e Drupal) integrado, suporte HTML5, dicas de código de classe personalizada PHP, páginas de CSS para iniciantes e outras novidades. Pode conferir todas as novidades do Dreamweaver CS5 aqui.
Informações sobre o Dreamweaver CS5
Este é um programa pago, mas você pode baixar a versão de teste que funciona durante 30 dias. Para baixar o programa tem que fazer o registo no site.
Linguagens de Programação:
XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras linguagens Server-side.
Existem vários tipos mas vou explicar das vantagens do dreamweaver CS4 que é o que eu uso, com o tempo o dreamweaver veio se adaptando com as necessidades das aplicações web e são elas:
- Dicas de código para estruturas Ajax e JavaScript
- Integração do Subversion®
- Conjuntos de dados HTML
- Práticas recomendadas para CSS
- Todo o tipo de formatação e posicionamento agora é feito por CSS usando id de tags por default
As que mais se destacaram foram:
- Integração com JQuery frameworks
- Integração com YUI frameworks
- Integração com Google Web ToolKit.
Essas são as vantagens dele, o que digo é o seguinte isso vária muito pois uso também o Visual Studio o Expression Web não posso dizer muito pois mexi muito pouco, mas quando estava começando usei muito o dreamweaver, em matéria de aprendizado eu indico o Dreamweaver mas se você ja sabe programar tanto faz o que muda são as interfaces.
Digamos que o resultado final será o mesmo.
Vamos lá, conhecer um pouco mais este fabuloso Software de Criação de Websites.
Interface
Considerando que você já tenha alguma noção da interface e recursos do programa, nós utilizaremos basicamente os painéis Inserir, Estilos CSS, e Arquivos na área de trabalho Designer (que é a padrão da versão CS5).
Interface do Dreamweaver CS5
Configuração do Site Local
É importante que você tenha previamente criado uma pasta para seu projeto, e que tenha feito corretamente o mapeamento desta pasta como um Site Local no Dreamweaver. Para o desenvolvimento do projeto não será obrigatória a definição de um Site Remoto.
Mapeamento de Site Local
Para mais informações sobre Site Local e Remoto, veja o artigo Dreamweaver: Configurando um site local e remoto.
Criando a página index.html
Como no primeiro artigo, criaremos nosso projeto usando o Doctype Strict.
As páginas HTML criadas no Dreamweaver por padrão utilizam o Doctype Transitional, e apesar de ser fácil converter de um Doctype para outro, você pode desde o início de seu projeto escolher qual Doctype utilizar.
As páginas HTML criadas no Dreamweaver por padrão utilizam o Doctype Transitional, e apesar de ser fácil converter de um Doctype para outro, você pode desde o início de seu projeto escolher qual Doctype utilizar.
Para isso, crie uma nova página HTML usando o menu Arquivo → Novo.
Na janela Novo documento, escolha na primeira coluna Página em branco, na segunda coluna (Tipo de página) HTML, e <nenhum(a)> na coluna Layout. No menu inferior à direita (Tipo Doc:) troque o Doctype para XHTML 1.0 Strict e clique em Criar.
Na janela Novo documento, escolha na primeira coluna Página em branco, na segunda coluna (Tipo de página) HTML, e <nenhum(a)> na coluna Layout. No menu inferior à direita (Tipo Doc:) troque o Doctype para XHTML 1.0 Strict e clique em Criar.
Criando um novo documento HTML
Clique no botão de visualização Código e veja que foi criada uma nova página HTML com o Doctype Strict.
Página com Doctype Strict
Aproveite para colocar um título na página e salve o documento com o nome de index (não é necessário colocar a extensão .html).
Inserindo as Tags DIV e as Regras CSS
DIV Container
Voltando ao modo de visualização de Design, começaremos a inserir as tags DIVs necessárias para a estrutura do site através do Painél lateral Inserir, e da opção Inserir tag div.
Janela para inserir uma nova Tag DIV
Veja que na janela Inserir tag div existem 3 campos ativos: Inserir, Classe e ID.
Em Inserir, você deverá mostrar ao programa em que ponto da página HTML a DIV será colocada.
Como esta é a primeira DIV de nosso layout (no caso, esta será a DIV container), você pode deixar a opção padrão (No ponto de inserção) ou mudar para Após o início da tag, não esquecendo de indicar no campo ao lado qual tag você está usando como referência (no caso, a tag <body>).
O importante é entendermos que a DIV container será colocada logo no início do corpo da página, ou seja, após o início da tag <body>.
Deixe o campo Classe vazio e coloque o nome container no campo ID.
O Dreamweaver permite que ao mesmo tempo em que criamos a DIV também possamos configurá-la através de Regras CSS. Para isso, basta clicar no botão Nova regra CSS.
Criando e configurando a DIV #container
Na janela Nova regra CSS, veja que o programa entende que você está criando uma regra do tipo ID para um seletor chamado #container.
No campo Definição da regra você pode escolher se esta será uma regra válida somente para uma página (Apenas este documento) ou se ela será usada por outras páginas (Novo arquivo de folha de estilos).
Daremos preferência à última opção devido suas grandes vantagens em centralizar as regras CSS em um arquivo separado do HTML.
Criando uma regra CSS para a DIV #container
Clique em OK, e na janela seguinte abra a sua pasta de estilos (css) e salve o arquivo colocando o nome de estilos-layout (não é necessário colocar a extensão .css).
Agora vamos configurar as propriedades da regra CSS para #container.
Na janela Definição de regra CSS de #container em estilos-layout.css, mude para a Categoria Caixa (do lado esquerdo da janela) e configure o campo Width (largura) para 900px.
Desmarque a caixa Igual para tudo da seção Margin e coloque em Top e Bottom o valor 0 (zero) e em Right e Left o valor auto. Estas configurações farão o site ter uma largura fixa de 900px e ficar centralizado.
Definindo as propriedades CSS para a DIV #container
Clique em OK e OK de novo na janela seguinte e veja que o Dreamweaver inseriu uma área tracejada na página que representa junto com um texto provisório a DIV container.
Você pode apagar este texto.
DIV #container inserida e folha de estilos CSS criada
Repare também no topo da janela do documento a referência estilos-layout.css*, indicando que a página HTML está ligada ao arquivo CSS. Esta mesma indicação pode ser vista no painel Estilos CSS (na guia Tudo) do lado direito do programa.
Painel de Estilos CSS com a regra para #container
Vamos agora inserir as demais DIVs do layout (além da container, precisaremos da topo, navbar, conteudo, auxiliar e rodape).
DIV Topo
A inserção das outras DIVs é feita de forma idêntica ao que fizemos ao inserir a DIV #container. Apenas precisamos tomar alguns cuidados relacionados ao local de colocação das DIVs e ao criar suas respectivas regras CSS.
No caso da DIV topo, usamos novamente a opção Inserir tag div do painel Inserir, configurando os campos conforme a imagem* abaixo:
*Nota do autor: a partir daqui as bordas das janelas nas imagens estarão levemente diferentes, pois comecei a escrever o artigo em outro computador (com o Windows 7), e vou terminá-lo na minha máquina virtual (com o Windows XP). Um detalhe que não fará a menor diferença…
Inserindo a DIV #topo
Diferentemente da DIV #container, dessa vez precisamos tomar o cuidado de dizer o local correto onde a nova DIV #topo será colocada. Como nossas DIVs ficarão “amarradas” pela #container, indicamos ao Dreamweaver que a DIV #topo será colocada após o inicio da tag <div id=”container”>, ou seja, a DIV #topo ficará dentro da #container, mais precisamente logo no início da #container.
Clique no botão Nova regra CSS para que possamos configurar a aparência da #topo.
Veja que o Dreamweaver mais uma vez interpreta corretamente o que está sendo feito e já mostra os campos configurados (Tipo de Seletor [ID], Nome do Seletor [#topo] e Definição da regra [estilos-layout.css]). No entanto, sempre verifique se as configurações que o programa trouxe são realmente as mais corretas para o resultado esperado.
Criando a regra CSS para a DIV #topo
Lembre-se: de nada adianta conhecer o Dreamweaver se não conhecermos XHTML e CSS. 
Ao clicar em OK, estaremos novamente na janela de definições de propriedades CSS.
Faremos as seguintes configurações:
- Categoria Fundo: Propriedade background-color (cor de fundo) com o valor #06F
- Categoria Caixa: Propriedade height (altura) com o valor 100px
Clique 2x em OK e veja o resultado:
DIV #topo inserida dentro da #container
Veja nos detalhes em vermelho (em sentido horário) a área azul com texto provisório e com altura de 100px da DIV #topo, sua regra CSS (#topo) logo após a regra #container no painel Estilos CSS e a hierarquia do código (<body> <div#container> <div#topo>).
DIV Navbar
Para inserir a DIV #navbar outra vez usamos a opção Inserir tag div do painel Inserir, configurando os campos conforme a imagem abaixo:
Inserindo a DIV #navbar
Dessa vez indicamos que a DIV #navbar será colocada após a div #topo. Existem outras opções também válidas para o campo Inserir (como, por exemplo, antes do final da tag <div id=”container”>).
Mas acredito que fica mais lógico e simples “falar” para o programa que a navbar será colocada depois do topo. Afinal, é justamente dessa forma que ela será apresentada.
Clique em Nova regra CSS, veja se os campos da janela estão configurados corretamente (ID, #navbar e estilos-layout-css), clique em OK e defina as seguintes propriedades:
- Categoria Fundo: background-color com o valor #0CF
- Categoria Caixa: height com o valor 40px
Clique 2x em OK e veja o resultado:
DIV #navbar inserida logo após a DIV #topo
Caso em algum momento você queira reconfigurar as propriedades das DIVs, simplesmente clique duas vezes na regra CSS correspondente no painel Estilos CSS para voltar à janela de configurações.
Não é necessário inserir de novo a DIV ou criar outra regra CSS.
Não se esqueça de ir salvando seu projeto (menu Arquivo → Salvar tudo).
DIV Conteúdo
Para inserir a DIV #conteudo voltamos à opção Inserir tag div do painel Inserir, configurando os campos conforme a imagem abaixo:
Inserindo a DIV #conteudo
Indicamos que a DIV #conteudo será colocada após a DIV #navbar, e em seguida clicamos em Nova regra CSS para configurarmos esta DIV.
Após conferir se os campos da janela Nova regra CSS estão corretos (ID, #conteudo, estilos-layout.css), clique em OK e defina as seguintes propriedades:
- Categoria Fundo: background-color com o valor #FF9
- Categoria Caixa: width com o valor 700px, height com 500px e float com left
Clique 2x em OK e veja o resultado:
DIV #conteudo inserida após a #navbar e posicionada à esquerda
Como teremos duas colunas neste layout, a primeira delas (#conteudo) foi posicionada à esquerda com a propriedade float: left, além de fixada uma largura (700px) e altura (500px). A largura restante para fechar o layout (200px) colocaremos na próxima DIV (#auxiliar).
DIV Auxiliar
Vamos inserir a DIV #auxiliar logo após a #conteudo:
Inserindo a DIV #auxiliar
Usando novamente o botão Nova regra CSS e verificando as configurações trazidas pelo Dreamweaver (ID, #auxiliar, estilos-layout.css), defina as seguintes propriedades para a DIV #auxiliar:
- Categoria Fundo: background-color com o valor #00C
- Categoria Caixa: width (200px), height (500px) e float (right)
Clique 2x em OK e veja o resultado:
DIV #auxiliar inserida à direita logo após #conteudo
A DIV #auxiliar recebeu os 200px restantes da largura total do site e foi posicionada à direita (float: right), além de possuir a mesma altura da DIV #conteudo (500px).
DIV Rodapé
Por fim, vamos inserir a última DIV (#rodape) do layout de nosso site logo após a DIV #auxiliar:
Inserindo a DIV #rodape
Clique em Nova regra CSS para criar a configuração (ID, #rodape, estilos-layout.css) para esta DIV e defina as seguintes propriedades:
- Categoria Fundo: background-color: #09F
- Categoria Caixa: height (30px) e clear (both)
Clique 2x em OK e confira o resultado:
DIV #rodape inserida após as DIVs #conteudo e #auxiliar
Além de definir uma altura (30px), colocamos a propriedade clear com o valor both. Esta última propriedade é importante para que a DIV #rodape continue posicionada após as DIVs flutuadas (#conteudo e #auxiliar).
Ajustes Finais
Nosso layout já está pronto, apenas faremos o acréscimo de algumas regras CSS para deixá-lo preparado para receber conteúdo.
Usando o painel Estilos CSS, clique no botão com o sinal de + para criarmos uma nova regra CSS:
Criar uma nova regra CSS
Configure a janela conforme a imagem abaixo (Tag, body e estilos-layout.css) e clique em OK.
Regra CSS para a tag
Estamos criando uma regra CSS para a tag <body> da página. Esta regra será responsável por características gerais do site, como plano de fundo, fonte padrão, etc. Também é interessante definirmos o valor 0 para as propriedades Margin e Padding para evitar inconsistências de visualização em certos navegadores.
Portanto, defina as seguintes propriedades:
- Categoria Tipo: Font-family com o valor Tahoma, Geneva, sans-serif
- Categoria Fundo: background-color com o valor #000
- Categoria Caixa: Margin e Padding com o valor 0
Clique em OK e teste o site no navegador padrão de sua máquina (basta apertar F12).
Aqui no Firefox o resultado foi o da imagem abaixo:
Layout Finalizado
Um outro ajuste recomendável (conhecido como “CSS Reset”) para evitar inconsistências na apresentação do layout/conteúdo é criar uma regra CSS composta para diversos elementos (p, h1, h2, h3…) zerando as propriedades Margin e Padding desses elementos. Alguns navegadores têm seus próprios métodos e padrões de Margin e Padding, o que geralmente causa problemas na apresentação de elementos que usem estas propriedades nativamente (como é o caso dos elementos de parágrafo e cabeçalho).
Basta você criar uma nova regra CSS no Dreamweaver configurando de maneira semelhante a da janela abaixo:
Regra para CSS Reset
Em seguida defina as propriedades Margin e Padding com o valor 0.
Você também pode colocar outros elementos nesta regra (ul, ol, img etc) para que as margens e espaçamentos fiquem zerados para praticamente qualquer forma de conteúdo de seu site.
É uma boa prática também definir logo de início as regras para <body> e CSS Reset, antes mesmo de fazer a inserção das DIVs.
Créditos Imagem e Fonte: Ecos da Web
Publicidade
Você também irá gostar de:
Publicidade
