Ao longo da evolução dos últimos anos, o Dreamweaver tem acompanhado o ritmo e tem-se actualizado de acordo com as necessidades actuais. De momento estamos a par com a versão CS5 do Adobe Dreamweaver, e esta versão não fugiu à regra, incluindo novas funcionalidades que irão tornar o desenvolvimento de websites uma tarefa menos complicada. Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, XHTML, CSS, Javascipt e PHP, entre outros.

Nesta segunda parte do Guia Dreamweaver, vamos-lhe continuar a mostrar como dar os primeiros passos na criação da sua página web. Está pronto? Vamos a isso!

Se tiver alguma dúvida, pode consultar os seguintes artigos:

Adobe Dreamweaver CS5

1. COMO ADICIONAR TEXTO AO SEU DOCUMENTO

Uma página web é considerada um documento, e é assim que vamos chamar a cada página que vamos criar – um documento. Para adicionar texto a um documento o processo é bastante simples – No modo Design basta clicar com o cursor onde quer escrever e começar a escrever.

Para formatar o texto adequadamente, poderá utilizar o menu Formatar que se encontra na barra de menus.

Vamos efectuar uma formatação ao título que está seleccionado, criando uma nova classe. Para isso aceda em Formatar -> Estilos CSS -> Novo

Aqui iremos primeiro dar o nome ao nosso selector e de seguida iremos definir as opções de formatação. Para efeitos de demonstração, demos o nome “nome_do_selector”, sinta-se livre para dar um nome ao seu gosto. Clique em OK para continuar.

Agora iremos definir as opções de formatação da classe recém criada “nome_do_selector”. As opções seleccionadas e/ou inseridas foram ao nosso gosto, sinta-se livre para definir as suas próprias opções e explore o programa!

Tipo de letra: Arial
Tamanho: 24px
Estilo: Normal
Negrito
Transformação: Maiúsculas
Cor: Vermelho

Seleccione o texto a aplicar a classe e seleccione a classe no menu de Propriedades.

E o resultado, como esperado!

Este é um processo bastante simples, mas a longo termo e com a criação de vários documentos, com vários estilos você iria ficar perdido no meio de tanta formatação. Então é aqui que entram as folhas de estilo, mais conhecidas como CSS – Cascading Style Sheets. Não se aflija, a criação de uma folha de estilos é simples e poupar-lhe-à imensas dores de cabeça, além de lhe poupar tempo. Como diz o ditado “De pequenino se torce o pepino”, então porque não começar a utilizar as folhas de estilo desde o início?

2. COMO CRIAR UMA FOLHA DE ESTILOS

Como referimos, a criação de uma folha de estilos é um processo simples, quando comparado com a confusão que iria criar ao não criar uma folha de estilos para o ajudar. O primeiro passo é criar um novo documento CSS.

Guarde o documento na pasta do seu website como “style.css”. Depois de criado e guardado, é altura de ligar os documentos. Isso pode ser feito manualmente ou automaticamente. Para fazer manualmente insira o seguinte código dentro da tag <head>:

<link href="style.css" rel="stylesheet" type="text/css" />

Para fazer automaticamente, no painel CSS que se encontra do lado direito da aplicação Adobe Dreamweaver clique com o botão do lado direito e de seguida clique em “Anexar folha de estilos”.

De seguida, clique em procurar, seleccione o ficheiro style.css e clique em OK e novamente OK.

Agora pode verificar que os documentos já se encontram ligados:

Antes de prosseguirmos, no seu documento index remova a formatação inserida no título. Para isso basta ir ao código e apagar o seguinte excerto:

<style type="text/css">
.nome_do_selector {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}
</style>

E apagar o seguinte dentro da tag do título:

class="nome_do_selector"

Agora não existem formatações no nosso documento. É altura de as definirmos na nossa folha de estilos!

NOTA: A partir do momento em que os documentos estão ligados, você tem acesso ao style.css apartir de qualquer documento a que ele esteja ligado. É possível alternar entre o código fonte do documento e o ficheiro de estilização apartir de um menu que fica abaixo dos separadores dos documentos:

3. CRIANDO ESTILOS NA SUA FOLHA DE ESTILOS

Para definir estilos para os elementos do seu documento irá necessitar de efectuar poucas operações. A primeira é saber qual o elemento que irá estilizar, e neste documento iremos estilizar o h1 e o p, relativos ao título e ao texto que estão no nosso documento. Assim, iremos proceder primeiro à estilização do título, e iremos replicar o estilo que aplicámos anteriormente. No seu documento style.css insira o seguinte código:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}

Agora, no seu documento todos os títulos que estiverem com a tag h1 irão ser formatados de acordo com o especificado na sua folha de estilos – Imagine que em todo o seu website tem 30 títulos h1, utilizando uma folha de estilos só necessitou de especificar a estilização 1vez, de outra forma teria de o fazer 30 vezes, fácil não é?

Adobe Dreamweaver inclusive lhe dá a indicação de quais os estilos existentes na sua folha de estilos, no painel CSS do lado direito da aplicação. De momento podemos já confirmar que existe uma estilização para a tag h1:

É altura de estilizar o nosso parágrafo. Desta vez vamos utilizar uma classe, para estabelecer isso basta por um ponto “.” a seguir a qualquer elemento. Desta forma você não estará a estilizar todos os elementos, mas sim apenas aqueles que quiser, especificando a classe. Vamos nomear a classe como “principal” e inserir alguns itens de estilização:

p.principal {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#009;
	font-weight:bold;

}

O seu ficheiro style.css deverá estar idêntico ao seguinte:

/* Títulos H1 */
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	color: #F00;
}

/* Parágrafo principal */
p.principal {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#009;
	font-weight:bold;

}

Note que inserimos comentários para organizar o documento. Não utilize em demasia os comentários, pois podem tornar confuso o seu documento!

Agora vamos atribuir a estilização ao nosso parágrafo principal. Para isso seleccione o texto, e no menu Propriedades clique no menu drop-down das Classes e seleccione a classe “principal.

E já está a estilização a funcionar!

Aprendeu os passos necessários para criar uma folha de estilos, ligá-la a documentos, criar estilizações para diferentes elementos e criar classes!

ESTÁ A ACOMPANHAR O GUIA DREAMWEAVER?

Não perca a continuação deste artigo, deixe o seu feedback com um comentário, subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email:

Abraço e até já!

Comentários dos Alunos

Dany
22 de Agosto de 2011

Olá, Diogo,

Eu ouço muito dizer/ e tenho amigos que afirmam com firmeza que o Dreamweaver suja o código e torna a navegação do site mais lenta. Gostaria de saber sua opinião a respeito. Obrigada e Parabéns pelo Site!!!

Um abraço,
Dany
Responder
- Diogo Espinha
  22 de Agosto de 2011
  
  Sim é verdade que quando você deixa Dreamweaver criar o código por si é possível que ele adicione algum código que não é necessário, e sendo código não necessário irá estar a ser processado sem necessidade, demorando mais tempo. No entanto, penso que os tempos que estamos a falar não são tão significativos como se pensa, e esses “erros” podem ser facilmente detectados e corrigidos pelo programador.
  Aconselho a aprender a programar à mão antes de utilizar um utilitário como Dreamweaver, pois se você souber programar, poderá melhorar o código que Dreamweaver cria. É esta a minha opinião Dany, obrigado pelo seu comentário a este artigo!
  Responder
  - Dany
    30 de Outubro de 2011
    
    Salve, Diogo! Tenho acompanhado o “GUIA DREAMWEAVER” e adorado ! Muito bem explicado e detalhado, parabéns mesmo.
    
    Sabe, segui seu conselho e estou lendo sobre xhtml para ter noção do código.
    
    Mas gostaria de ver o que é o “tal sujar o código” que muitos comentam. Poderia dar um exemplo prático?
    
    ps: uma ideia para um post o blog: esclarecer essa questão…porque muitos amam DW e outros o odeiam… foi só uma ideia, ok ?
    
    Abraços!
    Dany
    Responder
Adryelle
1 de Dezembro de 2011

eu faço web desiner queria saber se dreawer tem como vender paginas feitas por pelo proprio programa
Responder