Vídeo: Curso de HTML5 - introdução ao CSS, folha de estilo - aula 02 2025
Os usuários do Dreamweaver podem inserir facilmente uma marca de link em uma Folha de Estilo em Cascata (CSS) externa sem ter que comprometer a memória todo o código necessário ou a sintaxe apropriada. Além disso, ao criar links para um arquivo CSS externo no Dreamweaver, você também pode usar essa oportunidade para selecionar um tipo de mídia CSS, se desejar.
Nas etapas a seguir, você descobre como vincular um arquivo CSS externo com todo o tipo de mídia a um arquivo HTML aberto no Dreamweaver.
Para completar todas as etapas, você precisa do Dreamweaver juntamente com exemplos de arquivos HTML e CSS, que você pode criar rapidamente por conta própria.
Coloque ambas as cópias dos arquivos salvos em uma pasta em seu computador e continue com as seguintes etapas:
-
Inicie o Dreamweaver e configure um site gerenciado escolhendo Site → Novo Site.
Aparece a caixa de diálogo Configuração do site, mostrando a categoria do Site, que exibe campos para o Site Name e Local Site Folder.
-
No campo Nome do site, insira o nome do seu site.
Digite um nome que corresponda ao nome do cliente ou indique que o objetivo do seu site é o melhor, como ABC Company ou My Blog.
-
No campo Pasta do site local, verifique se o caminho aponta para a pasta no seu computador que você deseja usar para este site.
Por exemplo, se você tem uma pasta no seu computador dedicada a sites locais e deseja criar uma pasta dentro daquela para abrigar os arquivos de um novo site da Empresa ABC, seu caminho da Pasta do Local Local pode ser algo como isto: <
Clique em Salvar para fechar a caixa de diálogo.
-
Seu novo site gerenciado é aberto, exibindo todos os arquivos e pastas existentes (se houver) na pasta raiz no painel Arquivos.
No painel Arquivos, abra o arquivo HTML ao qual você irá adicionar o link CSS.
-
O arquivo que você usa deve ter algum tipo dentro dele e ser marcado com o parágrafo, h1 e as tags de lista.
Para adicionar o link, clique no ícone Anexar folha de estilos (que se parece com um pequeno pedaço de cadeia) na parte inferior do painel Estilos CSS.
-
Ao clicar no ícone, abre a caixa de diálogo Anexar folha de estilo externo. Se você não vir o painel Estilos CSS no espaço de trabalho do Dreamweaver, escolha Janela → Estilos CSS para abri-lo.
No campo de texto Arquivo / URL, digite o nome do arquivo CSS ao qual você deseja vincular ou clique no botão Procurar para encontrar e selecionar o arquivo CSS desejado.
-
Se você estiver usando os arquivos de amostra que você acabou de baixar da Web, clique no botão Procurar para navegar até o local onde você salvou os arquivos de amostra e selecione o arquivo cssdemo.css.
Na área Adicionar Como da caixa de diálogo, clique no botão de opção Link ou Importar para selecionar o método desejado para adicionar o arquivo CSS à sua página HTML.
-
A opção Link adiciona o CSS como um arquivo externo usando a tag:
A opção Importar especifica o CSS externo dentro de um link de estilo dentro do cabeçalho da página usando a regra @import at. Tenha em mente que este método não é recomendado para consultas de mídia CSS3:
Na área do menu suspenso Mídia, digite a palavra tudo ou clique na seta para baixo do menu e selecione o tipo de mídia total.
-
Para especificar vários tipos de mídia em vez de apenas um, insira os nomes de cada um dos tipos de mídia desejados, separados por vírgulas e sem espaços, como na tela, impressão, tty.
Se desejado, clique no botão Pré-visualização da caixa de diálogo para ver como o arquivo CSS recém-vinculado classifica seu arquivo HTML de amostra.
-
Clique em OK para completar o anexo do arquivo CSS externo.
-
O painel de estilos CSS do Dreamweaver agora exibe o arquivo CSS recém-anexado e lista todos os estilos dentro dele e o arquivo HTML de amostra é denominado com as regras de estilo no CSS vinculado.
