19:23
Alex Calloni
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!
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 :
1
| |
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:
1
2
3
4
5
6
7
8
9
10
| |
E apagar o seguinte dentro da tag do título:
1
| class="nome_do_selector" |
Agora não existem formatações no nosso documento. É altura de as definirmos na nossa folha de estilos!
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:
1
2
3
4
5
6
7
8
| 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:
1
2
3
4
5
6
7
| 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| /* 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á!
