Nenhuma avalição
COMENTAR
INDICAR
CSS no DreamweaverPostada em: 15/08/2004
1. O que são CSS?
Cascading Style Sheet ou Folha de Estilo em Cascata
Cascata, já o "C" é de cascading = cascata, já que
pode ser utilido mais de um estilo nas paginas, e o browser precisar saber qual usar e onde (em que tags) aplicá-los.
Paginas: O "S" vem de Sheet = Folhas ou paginas. Isso mesmo, Paginas! Elas são uma série de introduções à parte
do codigo HTML, mas que ainda asim atuam sobre ele.
Estilo, o outro "S" quer dizer Style = estilo, pois estilos que
serão definidos em todo site para que a aparencia das paginas fique como você deseja
1.2 Conhecendo mais o CSS
Há três formas diferentes dos estilos CSS serem aplicadas às
pagina. O Dreamweaver (automaticamente) faz a parte fácil do trabalho, ou seja, escrever os estilos sem erros de sintaxe. Porém, quem define onde, quando e quais tags os estilos afetarão, é você.
1.3 Formas de funcionamento do CSS
1.3.1 Lincado: Esse método cria páginas de
estilos com definições para as tags que você deseja controlar, tais definições serão salvas separadamente como se fossem um arquivo de texto, porém com a extenção .css. Ele será carregado no documento HTML através de um link, entre as tags <head> e </head> das páginas que desejar aplicá-los. Automaticamente elas incorporarão todos os estilos. O exemplo abaixo mostra o link feito de um arquivo (em vermelho) CSS.
1.3.2 Topo da página: Esse método define os estilos dentro de cada arquivo HTML, ou melhor, no topo dos mesmos, entre as tags <head> e </head>, Obviamente essa meneira de aplicar estilos demandará mais trabalho caso queira fazer alterações em um grupo de páginas HTML, o que o torna indicado para os casos em que os estilos precisam agir somente sobre uma determinada página. No exemplo abaixo temos as definições de um estilo em vermelho.
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
p {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-heigt: 20px;
}
</style>
</head>
1.3.3 Em linha: Com esse método pode-se definir conjuntos simples de estilo que serão inseridos diretamente nas tags de um documento, afetando somente a tag onde o estilo foi aplicado, sendo válido somente até o momento em que a tag for fechada (</p> por exemplo) No momento o estilo está em vermelho.
<p style="font-family: "Times New Roman", Times, serif; font-size: 14px; color: #003399; font-weight: bold">
oi, sou um texto em times, negrito, tamanho 14, e azul!!
</p>
Das três formas, essa útima é a única que o Dreamweaver
não faz. Mas nem por isso você será prejudicado. Existem
uma outra maneira de conseguir os mesmos resultados usando classes (adiante verá como).
1.4 Usar Arquivo CSS
Para usar um arquivo já pronto no Dreamweaver, basta importar o arquivo.
Abra a Paleta Estilos CSS em Janela > Estilos CSS, ou mesmo na tecla de atalho shift + F11, na paleta click no botão Anexar Folha de Estilo.
1.4.2 Criar estilo CSS
Caso queira criar seu proprio estilo CSS, click em Novo
Estilo CSS
Caso tenha duvida sobre como programar seu css no Dreamweaver, consulte a ajuda, sempre o seu melhor amigo.
1.4.3 Inserindo CSS
Lembra do topico 1.3, que mostra como são as CSS, agorea iremos utiza-las. A forma 1.3.1, se insere quase do mesmo jeito que se importa o CSS, mas apenas modificará a Forma. A forma 1.3.2 é feita na forma de Importação. O proprio Dreamweaver ja Faz isso.
A Forma 1.3.3 é a mais facil, você deve estar se perguntando, por que é mais facil? Por que na paleta Propriedade tem um atalho. olhe a imagem, basta clicar no A
Basta selecionar o item que deseja inserir o CSS O CSS no Dreamweaver é isso, bem basico, mas sempre nos ajuda é muito.
Cascading Style Sheet ou Folha de Estilo em Cascata
Cascata, já o "C" é de cascading = cascata, já que
pode ser utilido mais de um estilo nas paginas, e o browser precisar saber qual usar e onde (em que tags) aplicá-los.
Paginas: O "S" vem de Sheet = Folhas ou paginas. Isso mesmo, Paginas! Elas são uma série de introduções à parte
do codigo HTML, mas que ainda asim atuam sobre ele.
Estilo, o outro "S" quer dizer Style = estilo, pois estilos que
serão definidos em todo site para que a aparencia das paginas fique como você deseja
1.2 Conhecendo mais o CSS
Há três formas diferentes dos estilos CSS serem aplicadas às
pagina. O Dreamweaver (automaticamente) faz a parte fácil do trabalho, ou seja, escrever os estilos sem erros de sintaxe. Porém, quem define onde, quando e quais tags os estilos afetarão, é você.
1.3 Formas de funcionamento do CSS
1.3.1 Lincado: Esse método cria páginas de
estilos com definições para as tags que você deseja controlar, tais definições serão salvas separadamente como se fossem um arquivo de texto, porém com a extenção .css. Ele será carregado no documento HTML através de um link, entre as tags <head> e </head> das páginas que desejar aplicá-los. Automaticamente elas incorporarão todos os estilos. O exemplo abaixo mostra o link feito de um arquivo (em vermelho) CSS.
1.3.2 Topo da página: Esse método define os estilos dentro de cada arquivo HTML, ou melhor, no topo dos mesmos, entre as tags <head> e </head>, Obviamente essa meneira de aplicar estilos demandará mais trabalho caso queira fazer alterações em um grupo de páginas HTML, o que o torna indicado para os casos em que os estilos precisam agir somente sobre uma determinada página. No exemplo abaixo temos as definições de um estilo em vermelho.
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
p {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-heigt: 20px;
}
</style>
</head>
1.3.3 Em linha: Com esse método pode-se definir conjuntos simples de estilo que serão inseridos diretamente nas tags de um documento, afetando somente a tag onde o estilo foi aplicado, sendo válido somente até o momento em que a tag for fechada (</p> por exemplo) No momento o estilo está em vermelho.
<p style="font-family: "Times New Roman", Times, serif; font-size: 14px; color: #003399; font-weight: bold">
oi, sou um texto em times, negrito, tamanho 14, e azul!!
</p>
Das três formas, essa útima é a única que o Dreamweaver
não faz. Mas nem por isso você será prejudicado. Existem
uma outra maneira de conseguir os mesmos resultados usando classes (adiante verá como).
1.4 Usar Arquivo CSS
Para usar um arquivo já pronto no Dreamweaver, basta importar o arquivo.
Abra a Paleta Estilos CSS em Janela > Estilos CSS, ou mesmo na tecla de atalho shift + F11, na paleta click no botão Anexar Folha de Estilo.
1.4.2 Criar estilo CSS
Caso queira criar seu proprio estilo CSS, click em Novo
Estilo CSS
Caso tenha duvida sobre como programar seu css no Dreamweaver, consulte a ajuda, sempre o seu melhor amigo.
1.4.3 Inserindo CSS
Lembra do topico 1.3, que mostra como são as CSS, agorea iremos utiza-las. A forma 1.3.1, se insere quase do mesmo jeito que se importa o CSS, mas apenas modificará a Forma. A forma 1.3.2 é feita na forma de Importação. O proprio Dreamweaver ja Faz isso.
A Forma 1.3.3 é a mais facil, você deve estar se perguntando, por que é mais facil? Por que na paleta Propriedade tem um atalho. olhe a imagem, basta clicar no A
Basta selecionar o item que deseja inserir o CSS O CSS no Dreamweaver é isso, bem basico, mas sempre nos ajuda é muito.
