Duas dicas sobre como aplicar folhas de estilo CSS no DreamWeaver
Autor：Eve Cole
Data da Última Atualização：2009-05-31 21:17:47
1. Remova o sublinhado do hiperlink e altere a cor quando o mouse passar sobre o hiperlink:
Por padrão, os hiperlinks em páginas da web projetadas com DreamWeaver são sublinhados, o que não parece muito bonito. Para remover esses sublinhados irritantes, o método introduzido em muitos jornais e revistas é adicionar manualmente um trecho de código ao código-fonte HTML. Na verdade, é fácil remover os sublinhados dos links no DreamWeave. Primeiro, crie um link aleatório na janela de documentos do DreamWeaver. Você pode ver que esse link estará sublinhado. Como remover esse sublinhado?
1. Clique em "Texto" | "Estilos CSS" | "Editar folha de estilos..." na barra de menu (ou pressione diretamente a tecla de atalho Ctrl+shift+E) para abrir a janela de diálogo Editar folha de estilos.
2. Clique em "Novo" e, na caixa de diálogo "Novo estilo", clique no botão "Usar seletor CSS".
3. Digite a no campo Seletor e clique em OK.
4. Em seguida, a caixa de diálogo "Definição de estilo CSS" aparece na decoração da classe Type, marque nenhum, clique em OK e clique em Concluído. Você notará imediatamente que o sublinhado do link desapareceu nas janelas de documentos. Então, como você faz o link mudar de cor quando o mouse passa sobre ele? Repita as etapas um e dois acima. Em seguida, clique na seta suspensa ao lado do Seletor, selecione "a:hover" e clique em OK. Na caixa de diálogo "Definição de estilo para a: hover" que aparece, selecione qualquer cor na cor da classe Type (por exemplo, selecione vermelho), clique em OK e clique em Concluído para concluir. Pressione F12 para visualizar e coloque o mouse no link. O link fica vermelho? Se na caixa de diálogo "Definição de estilo para a: hover" agora há pouco, na classe Backgroud, você selecionar a cor do fundo como verde, quando você colocar o mouse no hiperlink, não apenas o link ficará vermelho, mas também também será um fundo verde. Na verdade, por meio da caixa de diálogo de definição de estilo CSS agora, você também pode obter mais efeitos especiais. Amigos interessados podem querer pensar sobre isso.
2. Crie uma folha de estilo CSS externa reutilizável Depois de usar o DreamWeaver para criar um estilo CSS em uma determinada página da web, se desejar aplicar o estilo a outra página da web, não será necessário recriar o estilo CSS. à medida que você cria um arquivo de folha de estilo CSS externo (folha de estilo CSS externa), você pode chamar os estilos neste arquivo de folha de estilo à vontade no futuro. Para facilitar o gerenciamento, crie primeiro uma nova pasta na pasta onde está localizado o site, chamada CSS, que é especialmente utilizada para colocar arquivos de folhas de estilo externas (sua extensão é css).
1. Pressione Ctrl+shift+E na janela do documento para abrir a janela de diálogo Editar folha de estilo. 2. Clique em "link".
3. Na caixa de diálogo pop-up Vincular folha de estilo externa, clique em NAVEGAR e encontre a pasta CSS que você acabou de criar.
4. Na coluna "Nome do arquivo" da janela Selecionar arquivo de folha de estilo, digite *.css (* pode ser qualquer nome). digite no campo "Nome do arquivo" se tornará o nome do novo arquivo de folha de estilo externo. Por exemplo, digite title.css e clique em Selecionar |
5. Na janela de diálogo Editar folha de estilo, title.css (link) será adicionado, clique duas vezes nele.
6. Na janela pop-up “title.css”, clique em “Novo”.
7. Na caixa de diálogo "Novo estilo", clique no botão "Criar estilo personalizado (classe)". 8. Digite um nome na coluna Nome, como myheadline, e clique em OK.
9. Na seguinte caixa de diálogo "Definição de estilo para .myheadline em title.css", faça várias configurações, como fonte e cor, e clique em OK quando terminar. Se desejar criar um novo estilo, clique em "Novo" novamente, repita as etapas 6, 7, 8 e 9 e, por fim, clique em "salvar" | "concluído" e o arquivo de folha de estilo externo title.css será criado. Todos os estilos em title.css serão listados no submenu "TEXT" | "CSS Styles" na barra de menu. Se você quiser chamar isso de title.css em outras páginas da web, basta repetir as etapas 1 a 3 acima e inserir title.css na coluna "Nome do arquivo" da janela Selecionar arquivo de folha de estilo. Clique em "selecionar" | "ok" | "concluído", todos os estilos em title.css aparecerão no submenu "Texto" | "Estilos CSS" na barra de menu da página web, e você poderá aplicá-los para esta página da web esses estilos.
