Quick Tips: Criação e utilização de Templates no Dreamweaver CS4 – Parte 2

          Olá pessoal, no último artigo vimos como criar um  template para o nosso site, e como utilizá-lo posteriormente para agilizar o desenvolvimento do projeto. A herança visual que utilizaremos nas páginas seguintes geralmente envolvem componentes padrão , como dito anteriormente, no entanto, visando um  maior aproveitamento e economia de tempo,podemos criar modelos prontos para as inserções que faremos no decorrer do projeto, ou seja, os textos que serão adicionados nas páginas em geral. Por exemplo, é normal que toda página possua uma espécie de título ou cabeçalho que informe que assunto está sendo tratado neste local. Algo como: “Nossa empresa”, “Serviços”, “Parceiros” etc. É obvio que estou tratando de algo extremamente variável, pois, o design do  site e os padrões à serem utilizados  nascem  sempre da criatividade do desenvolvedor.

Muito bem, para agilizar todo o processo de desenvolvimento  é interessante criar os layouts de fonte que iremos trabalhar. Vale lembrar pessoal que é sempre importante observar a uniformidade do site no que diz respeito à elementos como fonte, tamanho de fotos etc., nada de Arial na página Home, e “só pra variar” Comic Sans em outras  ok?

Para criar os layouts de fonte precisaremos de um arquivo de recurso, no caso um CSS, (Cascading Style sheets = “Folha de Estilo em Cascata”) onde serão criados todos os nossos estilos pré-definidos. Para tanto, vá no menu  NEWà selecione CSS e clique em CREATE.

Apenas  como  exemplo,  criaremos um estilo chamado h1 para o título das páginas. Dentro do CSS insira os seguintes parâmetros:

Feito isso salve seu arquivo .CSS (na mesma pasta do projeto,  é claro) e então precisaremos indicá-lo como recurso do site. Vá na guia CODE do seu template e insira apenas a  linha destacada,  desta forma:

Preste muita atenção na localização do código, ele fica dentro do bloco HEAD.

Agora já é possível observar a funcionalidade do nosso CSS. Vá na guia DESIGN , insira um texto qualquer na página, selecione-o e  e em seguida aponte a propriedade FORMAT da guia HTML  para HEADING 1. Se todos os passos foram seguidos corretamente o seu texto adquiriu a seguinte aparência

Você pode definir todos os formatos que irá utilizar no decorrer do projeto, e depois apenas apontá-los quando desejar. Uma forma simples e prática  de minimizar o dispêndio de tempo na hora de criar o seu site. Lembrando que este arquivo CSS possui caráter de independência funcional, ou seja, poderá ser utilizado em outros projetos sem maiores complicações.

Um grande abraço à todos, espero que este artigo tenha sido útil! Até a próxima!

Jefferson Araújo.

Contato: tecjefferson@hotmail.com