Como usar e modificar páginas e modelos CSS de exemplo do Dreamweaver

Escrito por ehow contributor | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como usar e modificar páginas e modelos CSS de exemplo do Dreamweaver
Usando uma página de exemplo do Dreamweaver, você poderá montar o seu site em poucos segundos

Você sabe usar o Dreamweaver e criar páginas web? Não é necessário ser um profissional para criar um site simples e visualmente bom usando o Dreamweaver se utilizar um modelo de página ou leiaute incluído.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Aplicativo do Dreamweaver. As versões MX 2004, 8 e CS3 têm todas páginas de exemplo

Lista completaMinimizar

Instruções

    Selecionar um exemplo ou leiaute de CSS

  1. 1

    Prepare um novo site e indique um diretório raíz para o mesmo. Quando você estiver pronto para começar com a sua primeira página, terá várias opções no menu "File" (Arquivo) > "New" (Novo). Os seguintes passos as explicarão. Na seção dois, você aprenderá a modificar o código CSS da página de exemplo ou do leiaute selecionado.

  2. 2

    Selecione "File" > "New". Na imagem se mostra o modelo escolhido em "Sample - Starter Page (Theme) - Health & Nutrition (Home Page)" (Modelos - Páginas iniciais - Saúde e nutrição) com a opção "Doctype". A coluna da direita lhe mostrará uma pré-visualização da aparência da página inicial, a qual possui um leiaute de duas colunas com uma paleta de cores verde.

    Cada modelo de página inicial possui um leiaute e mais quatro páginas com designs que combinam. Você poderá usá-las e modificá-las para criar o seu site.

  3. 3

    Clique em "Create" (Criar). O Dreamweaver lhe perguntará onde salvar os arquivos HTML (o diretório raíz do site) e que nomes colocar neles. Como o nosso exemplo é uma página inicial, nomeie o arquivo como "index.html".

  4. 4

    O Dreamweaver lhe mostrará outra caixa de diálogo oferecendo copiar os outros arquivos necessários para a página de exemplo que você selecionou. Clique em "Copy" (Copiar).

  5. 5

    Você também pode criar o seu site a partir de uma página vazia com um leiaute CSS. Selecione "File > New", depois "Blank Page > HTML" (Página vazia > HTML) e um dos leiautes.

    No lado direito, você verá uma prévia do leiaute com símbolos que indicam se o leiaute é de largura fixa ou adaptável. Note que os leiautes básicos estão em preto, branco e cinza. Há opções de cores disponíveis.

    Antes de clicar em "Create", deverá decidir algumas coisas. Escolha um "doctype". Decida se quer colocar o CSS no cabeçalho do documento ou em um novo arquivo CSS e se quer aplicar outro CSS além do leiaute. O Dreamweaver inclui folhas de estilo de cores de texto no menu "File > New", sob a categoria "Page From Sample - CSS Style Sheet" (Página a partir de modelo - Folha de estilo CSS). Você pode também incluir outra folha de estilo que tiver.

    Para encontrar uma das folhas de estilo internas que podem ser adicionadas às regras do leiaute CSS, navegue até a pasta "Dreamweaver" no diretório "Arquivos de programas" e busque "Configuration > BuiltIn > css" para selecionar um dos esquemas de cor disponíveis.

  6. 6

    Clique em "Create". O Dreamweaver lhe perguntará onde salvar o leiaute CSS. Não altere o nome sugerido pelo programa a menos que queira alterar todas as referências nos arquivos HTML e CSS.

    O nome "thrColLiqHdr.css" indica o leiaute usado: 3 colunas, leiaute líquido, com cabeçalho e rodapé.

  7. 7

    O Dreamweaver abrirá a página HTML na parte de Design com o leiaute CSS que você escolheu. Salve-a no diretório raíz do seu site com o nome selecionado. Você poderá começar a modificá-lo.

    Os exemplos contêm texto de exemplo que você poderá selecionar e substituir pelo seu próprio conteúdo.

    Modificar ou acrescentar algo ao CSS

  1. 1

    Você terá muita ajuda do Dreamweaver na hora de modificar a nova página para os seus objetivos. O CSS está generosamente comentado para explicar o que cada regra faz na sua página.

  2. 2

    Ao selecionar uma parte do documento para modificá-la, é fácil ver quais regras se aplicam, usando o painel "CSS Styles" (Estilos CSS) e as ajudas na parte de Design.

  3. 3

    Use o painel para encontrar a regra que você quer modificar e personalizar o design da página.

  4. 4

    Selecione a regra que você quer modificar, clique no ícone do lápis do painel "CSS Styles" e faça as alterações desejadas, como, por exemplo, a cor da fonte.

  5. 5

    Adicione novas regras usando um processo similar para um novo seletor. Por exemplo, para adicionar uma regra para as imagens na área #mainContent, busque a seção

    .thrColLiqHdr #mainContent

    O seu novo seletor deverá ser ao menos tão específico quanto esse, mas também adicionar o seletor "img".

    Clique no ícone (+) para adicionar uma nova regra e use um seletor como

    .thrColLiqHdr #mainContent img

    para criá-la.

Dicas & Advertências

  • As opções do menu "File > New" podem ser combinadas e mais de uma folha de estilos pode ser aplicada a uma nova página. Revise todas as possibilidades.
  • Após modificar os arquivos CSS, remova os comentários para economizar o espaço ocupado pelo arquivo.
  • Seja cuidadoso, pois alguns dos designs de exemplo (temas) usam leiaute baseados em tabelas. Essa não é uma opção accesível. Use um dos leiautes CSS disponíveis.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível