Folhas de estilo com o Dreamweaver

Com o Dreamweaver podemos definir estilos CSS para formatar os documentos HTML de formas distintas: usando o painel CSS Styles, normalmente o primeiro painel, ou (se for um ficheiro externo) escrevê-lo e guardá-lo numa pasta CSS para posterior linkagem, ou, ainda, declarar a css inline ou embebê-la na head do documento.

Para definirmos um ficheiro CSS com o painel styles, clicámos no segundo ícone (folha em branco com o sinal +) do canto inferior direito do painel.

Acedemos a um menu popup para declararmos uma nova regra de CSS. Escolhemos o tipo de selector: Class (pode ser aplicada a qualquer tag e as vezes que quisermos), tag (para redefinir a formatação de uma tag), Id (identificador de uma DIV, só deve ser usado uma vez), ou selectores pseudo -class ( os estados dos links).

Os ID devem começar pelo sinal (#) seguido do nome da DIV a que se referem as regras que vamos declarar. Como já foi dito cada div deve ter, por uma questão de correcta utilização do código, um ID deve ser único. De notar que, se tivermos várias DIVs com o mesmo ID o browser renderiza o documento, mas não é, semanticamente, XHTML correcto.

Uma classe deve começar pelo sinal (.) pode ter o nome que quisermos e pode ser ser usada múltiplas vezes no mesmo documento.

Podemos, também, definir as tags através do painel CSS. Para isso, seleccionamos o tipo de selector Tag e escrevemos a tag a que se refere a regra que vamos declarar, em alternativa podemos seleccionar a tag a partir do menu à direita. Para isso basta clicar na seta à direita do campo tag.

Para definirmos os estados dos links (pseudo-class) clicámos em Advanced e na seta do campo correspondente. De notar que para uma correcta utilização dos links as regras devem ser declaradas pela ordem que aparecem a imagem: a:link, a:visited, a:hover e a:active.

Depois de definirmos as regras de CSS podemos guardá-las no documento activo (CSS embebida na head) ou criar um documento CSS externo e guardá-lo na pasta CSS no directório do site. Posteriormente linkámos este ficheiro CSS aos documentos HTML clicando no respectivo ícone (o primeiro do canto inferior direito) na painel CSS Styles.

As categorias nos painéis CSS

Quando clicámos no ícone, no painel CSS Styles, para criarmos uma nova regra acedemos a um menu popup com uma série de categorias desde Type até Extensions.

Na categoria Type definimos as fontes e as suas apresentações:
Font - permite-nos declarar o tipo de fonte a usar;
Size - especificamos o tamanho da fonte em vários tipos de medidas, pixeis, pontos, ems, etc;
Style - especificamos se o tipo de fonte é normal, itálico ou oblíquo;
Line height - permite-nos declarar o entrelinhamento, a altura entre linhas. Tal como no size, pode ser feito usando vários tipos de medidas;
Weight - especificamos se a fonte está a bold e ou com que nível de bold;
Variant - especificamos se o texto é normal ou em maiúsculas pequenas;
Case - especificamos a primeira letra de cada palavra em maiúscula (capitalize),o texto em maiúsculas (uppercase) ou em minúsculas (lowercase).
Decoration - se o texto é sublinhado, riscado ou a piscar.

Na categoria Background definimos a aparência do documento HTML e dos vários elementos que o compõem, como textos, tabelas, DIVs, etc.
Background color - definimos a cor de fundo da página ou do elemento seleccionado;
Background image - especificamos uma imagem de fundo da página ou do elemento seleccionado;
Repeat - determinámos a forma como a imagem organizada na página ou elemento: No repeat sem repetição (útil par imagens de fundo únicas); Repeat repetição em ambos os eixos X e Y; Repeat X, repetição só ao longo do eixo X; Repeat Y, repetição só ao longo do eixo Y;
Attachment - fixo (a imagem ou padrão fica fixa no ecrã) ou scroll (a imagem acompanha o scroll da página);
Horizontal position - especificamos o alinhamento horizontal da imagem;
Vertical position - especificamos o alinhamento vertical da imagem.

Na categoria Block definimos as formatações dos parágrafos:
Word spacing -permite-nos definir um valor entre palavras, podendo os valores serem positivos ou negativos;
Letter spacing - permite-nos definir um valor entre caracteres, podendo os valores serem positivos ou negativos;
Vertical alignment - definimos o alinhamento vertical do bloco de texto;
Text align - definimos o alinhamento do texto : à esquerda, à direita ou justificado;
Text indent - definimos o avanço da primeira linha de um parágrafo;
Whitespace - permite-nos controlar os espaços e as tabulações;
Display - definimos como é que o elemento será apresentado: inline, block, list-item, table, etc.

Na categoria Box definimos o posicionamento, o dimensionamento, o padding e a margem dos elementos da página. É fundamental para a formatação e controlo das DIVs.
Width - definimos a largura de um elemento;
Height - definimos a altura de um elemento;
Float - permite-nos deslocar um elemento para a esquerda ou para a direita, modificando o fluxo normal dos elementos de uma página;
Clear- permite-nos limpar os floats. Fundamental quando queremos que um elemento seja posicionado por baixo de outros elementos que flutuam à esquerda e ou à direita;
Padding - permite-nos controlar o espaço entre o conteúdo de um elemento (uma DIV) e os seus limites;
Margin - permite-nos controlar o espaço entre os limites de elementos da página.

Na categoria Border especificamos o tipo de contorno para os elementos da página.
Style - permite-nos controlar o tipo de contorno, tracejado, linha continua, etc.;
Width - permite-nos especificar a espessura do contorno;
Color - permite-nos especificar a cor do contorno.

Na categoria List definimos as listas e as suas formatações.
Type - permite-nos definir o tipo de lista ou marca de numeração;
Bullet image - permite-nos definir uma imagem para a lista;
Position - permite-nos definir o posicionamento da marca.

Na categoria Position podemos definir o posicionamento dos elementos através de layers, os quais se podem posicionar com exactidão na página.
Type - definimos o tipo de posicionamento do elemento, relativo ou absoluto;
Width - definimos a largura do elemento;
Height - definimos a altura do elemento;
Visibility - definimos se o elemento é visível, invisível ou se herda as propriedades do parent;
Z-index - definimos o posicionamento de uma elemento relativamente ao eixo Z. Quanto mais alto for o número mais acima está o elemento;
Overflow - especificamos o comportamento do elemento face à dimensão do seu conteúdo, visível (adapta-se ao tamanho do conteúdo), hidden (esconde o conteúdo em excesso), scroll(aplica automaticamente as barras de scroll horizontal e vertical) ou auto (aplica a barra de scroll quando necessário);
Placement - especificamos o posicionamento do elemento, top right,bottom e left;
Clip - especificamos as partes visíveis do conteúdo da layer, top right,bottom e left;

Na categoria Extensions definimos efeitos mais avançados em CSS.
Page break - definimos quebras no documento, úteis para impressão;
Visual effect - em cursor, especificamos a imagem do cursor e em filter podemos aplicar efeitos especiais aos objectos controlados pela CSS.

 

Modo de visualização no painel CSS

Em modo Current o painel CSS apresenta três partes:
1- Sumary, com as propriedades CSS do elemento seleccionado;
2- Rules, indica-nos a localização das propriedades seleccionadas;
3- Properties, onde podemos editar as propriedades das regras de CSS aplicadas à selecção.

Em modo All, o painel apresenta-se com duas divisões:
1- All Rules, que nos mostra a lista das regras definidas no documento;
2- Properties, onde podemos editar as regras de CSS.