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