Folha de Estilos CSS Clique aqui para ver o exemplo Folha de Estilos CSS Obs Antes de começar esse by nef90815

VIEWS: 153 PAGES: 10

									Folha de Estilos - CSS <Clique aqui para ver o exemplo>
Obs.: Antes de começar, esse tutorial exige um conhecimento
básico de tags HTML. Se você não conhece as tags HTML <clique
aqui>.

A Folha de Estilos em Cascata (Cascade Style Sheet - CSS)
permite que você possa padronizar a formatação das Tags HTML
ou uma faixa de texto identificada por um atributo class. A folha
de estilos - CSS pode estar descrita dentro de uma página ou em
um arquivo que pode ser anexado a uma ou mais páginas.

Dividimos esse tutorial em alguns tópicos principais.
Selecione o tópico desejado:

- Formatando Tags HTML
- Criando Classes
- Criando um arquivo de Folha de Estilos - CSS externo
    - Anexar arquivo CSS em seu documento
    - Remover um arquivo CSS de seu documento
- Incluir, excluir ou alterar as suas formatações CSS

Formatando Tags HTML                                 Próxima >>
Neste caso, todas as tags HTML formatadas pela CSS serão
afetadas no código HTML.

1   Selecione Texto > Estilos CSS > Novo Estilo CSS.
    Aparecerá a caixa de Novo Estilo CSS, conforme abaixo:
2   Selecione a opção "Redefinir a tag HTML" e "Apenas este
    documento" (caso ainda não esteja selecionado).
3   Dessa forma, a folha de estilos será utilizada apenas para esta
    página, ou seja, o código que essa CSS gerar, estará embutida
    ao código HTML, que veremos mais tarde como isso ocorre.
4   No item Tag você seleciona a tag que deseja formatar, no
    caso, vamos alterar a tag <h1>. Selecione a tag <h1> na
    lista. Depois disso, a janela de "Novo estilo CSS" deve
    aparecer como na imagem abaixo:




5   Clique OK. Então a janela "Definição de estilos CSS de h1"
    será aberta. No lado esquerdo dessa tela você pode escolher
    as categorias que deseja alterar. No caso, vamos alterar a
    categoria "Tipo", no lado direito você pode escolher a fonte,
    cor, entre outros itens dessa categoria.
6   No item Fonte, escolheremos a fonte "Verdana".
    Porém você vai perceber que juntamente com a fonte
    Verdana, aparecerem também as fontes "Arial,
    Helvetica,Sans-Serif". Isso ocorre, porque esta página possa
    ser vista em alguns computadores que não possuem a fonte
    "Verdana" instalada, neste caso, a página HTML escolherá a
    segunda opção de fonte para a página, no caso Arial, e assim
    por diante.
7   No item Tamanho, digitamos 12. Mantenha "Pixels" como
    unidade de medida.
8   No item Peso selecione "Negrito".
9   No item Cor selecione a cor "Vermelha".
10 Teremos então algo assim:




11 Clique Ok. Agora digite "Este é o Título" ou um texto qualquer.
   Selecione esse texto ou frase. No "Inspetor de Propriedades"
   (se não estiver visível, clique em janela > propriedades),
   selecione "Cabeçalho 1" no item formato. Como apresentado
   na figura abaixo:




12 O seu texto ou frase irá aparecer com a formatação que você
   aplicou à tag <h1>, pois "Cabeçalho1" no Inspetor de
   Propriedades representa a tag <h1>.
13 Para conhecimento, o código gerado pelo Dreamweaver para a
   CSS que você acabou de criar ficará assim:
    <style type="text/css">
    <!--
    h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #FF0000;
   }
   -->
   </style>
14 Para Incluir, excluir ou alterar as suas formatações CSS siga
   as instruções <clique aqui>


Imagem Cambiável

Uma imagem cambiável é aquela que se altera quando o cursor
for movido sobre a mesma. Esse tipo de imagem consiste, de
fato, em duas imagens: a imagem primária (exibida quando a
página for carregada pela primeira vez) e a imagem cambiável
(que aparecerá quando o cursor for deslizado sobre a imagem
primária). Ambas as imagens deverão ter o mesmo tamanho;
caso contrário, o Dreamweaver redimensionará automaticamente
a segunda imagem para que coincida com as propriedades da
primeira.

1 Na janela do documento, coloque o ponto de inserção no local
  onde deverá aparecer a imagem cambiável.
2 Insira a imagem cambiável, utilizando um dos seguintes
  métodos:
  Na categoria Comuns do painel Objetos, clique no ícone de
  Inserir imagem cambiável.
  Na categoria Comuns do painel Objetos, arraste o ícone de
  Inserir imagem cambiável para o local desejado na janela do
  documento.
  Escolha Inserir > Imagens interativas > Imagem cambiável.
  Aparecerá a caixa de diálogo Inserir imagem cambiável.




3 No campo Nome da imagem, digite um nome para a imagem
  cambiável.
4 No campo Imagem original, clique em Procurar e selecione a
  imagem ou digite o caminho da imagem a ser exibida quando a
  página for carregada.
5 No campo Imagem cambiável, clique em Procurar e selecione a
  imagem ou digite o caminho da imagem a ser exibida quando o
  cursor for deslizado sobre a imagem original.
6 Para que as imagens sejam pré-carregadas no cache do
  navegador a fim de que sejam carregadas mais rapidamente,
  selecione a opção Pré-carregar a imagem cambiável.
7 No campo Quando tiver clicado, vá para a URL, clique em
  Procurar e selecione o arquivo, ou digite o caminho do arquivo a
  ser aberto quando um usuário clicar na imagem cambiável.
  Nota: Se não for definido um link para a imagem, o
  Dreamweaver inserirá um link nulo (#) no código-fonte HTML
  ao qual o comportamento de imagem cambiável estiver
  anexado. Se o link nulo for removido, a imagem cambiável não
  funcionará.
8 Clique em OK, para fechar a caixa de diálogo Inserir imagem
  cambiável.
Janela Pop Up

A janela Pop up é muito utilizada para publicidade e destaques de
notícias. Neste tutorial, você aprenderá a abrir automaticamente
uma janela pop up em uma página. Veja como é simples:

Antes de iniciar <clique aqui> e faça o download do arquivos que
iremos usar neste tutorial.
1 Descompacte o arquivo dw002.zip.
   Como resultado você terá três arquivos (pagina.htm, popup.htm
   e gti.gif).
2 Agora abra o arquivo pagina.htm;
  clique no tag <body>, no seletor de tags situado no canto
  inferior esquerdo da janela do documento (isto fará com que o
  comportamento seja anexado a página inteira).




3 Escolha Janela > Comportamentos, para abrir o painel
  Comportamentos.
4 Clique no botão com o sinal de adição (+) e escolha Abrir a
  janela do navegador no menu pop-up Ações.




  Agora preencha os campos, conforme abaixo:
  No campo URL a ser exibido digite popup.htm, ou clique em
  Procurar, para selecionar o arquivo popup.htm;
  No campo Largura da janela entre com o valor 300;
  No campo Altura da janela entre com o valor 200;
  No campo Nome da janela digite popup;
  Clique em OK.
5 Salve o arquivo pagina.htm
  Pronto! Agora tecle F12 para visualizar o resultado.




Menu de salto

O menu de salto pode ser muito útil em seu site pois, ocupa
pouco espaço e pode elencar quantos links você desejar.

1 Escolha Inserir > Objeto formulário > Menu de
  salto.
  Aparecerá a caixa de diálogo Menu de salto,
  conforme abaixo:
2 No campo Texto, digite: Selecione o Tutorial
  (este ítem não terá link pois, será apenas um
  aviso de seleção);
  Clique no botão com o sinal de adição (+) para
  incluir um item de menu.
3 Agora vamos incluir os ítens que terão links:

  Clique no campo Texto e digite Dreamweaver;
  Vá para o campo "Quando tiver selecionado,
  vá para a URL" e digite
  http://www.unesp.br/tutoriais/dreamweaver;
  Clique no botão com o sinal de adição (+) para
  incluir um item de menu.

  Repita o procedimento do ítem 3 e inclua
  quantos ítens de menu desejar
4 No campo nome do menu, digite: Menu
  tutoriais
5 No campo Opções, assinale "Selecionar o
  primeiro ítem após a alteração da URL
6 Clique em Ok para finalizar.
  Pronto! Agora basta você visualizar o resultado.
  Obs: Você pode incluir o menu de salto em
    qualquer lugar da sua página, basta apenas
    você clicar na região desejada e inserir o menu
    de salto.




Pré-Carregamento de Imagens

O pré-carregamento das imagens permite que sua página seja
exibida mais rapidamente. A ação Pré-carregar as imagens
carrega no cache do navegador as imagens que não aparecem na
página imediatamente (como aquelas que serão permutadas com
as linhas de tempo, comportamentos ou JavaScript, por exemplo).
Esse processo evita os atrasos causados pelo download quando as
imagens tiverem de ser exibidas.

1    Abra a primeira página que faz parte do seu website. Arquivo
     > Abrir
2    Abra a janela de Comportamentos, selecione Janela >
     Comportamentos
3    Na barra inferior do Dreamweaver, selecione a tag <body>
     como mostrado na figura:


4    Esse procedimento é necessário, pois assim aplicaremos esse
     comportamento à tag <body> que pré-carregará as imagens
     enquanto carrega o conteúdo da página.
5    Na janela Comportamentos, clique sobre o sinal de "+" e
     selecione a opção Pré-carregar as Imagens, como na imagem
     abaixo:




5    A janela Pré-carregar as imagens se abrirá.
    Obs.: Para ver essa imagem no tamanho correto <clique
    aqui>.




6   No item "Pré-carregar as Imagens" aparecerá uma lista com
    todas as imagens que serão pré-carregadas.
7   Se deseja incluir mais imagens a sua lista, clique no sinal "+"
    e depois no botão "Procurar". Assim as imagens vão sendo
    incluídas à sua lista.
8   Para remover alguma imagem da lista de pré-carregamento,
    selecione a imagem que deseja remover e depois clique no
    sinal "-"
9   Quando terminar de listar todas as imagens que deseja pré-
    carregar, clique OK.
10 Clique sobre a tag <body> novamente, como visto no item 3.
   Agora a janela "Comportamentos" exibirá o comportamento
   que está aplicado a essa tag, como na figura abaixo:




11 O HTML agora reconhecerá esse comportamento como sendo:
   "Quando a tag <body> carregar, acione a ação "Pré-carregar
   as imagens".
12 Salve e publique seu documento para testá-lo.

								
To top