Vamos agora, como prometi, pegar este arquivo em HTML e fazer com que seu conteúdo seja modificado via CSS.
Você já viu o código do aquivo abaixo né? Agora vamos fazer o seguinte: Vamos criar um outro arquivo intitulado "estilos.css". Neste arquivo vamos impor uma configuração para o plano de fundo e para as TAGs h1, h3 e p, blz? Baixe estes dois aquivos e analise-os.
O primeiro arquivo é o código HTML modificado. Observe que dentro do "HEAD" existe um link para um arquivo chamado "estilo.css":
<link rel="stylesheet" type="text/css" href="estilos.css" />
No momento não se preocupe com o restante do conteúdo, fixe apenas o itemhref="estilos.css". Ele está fazendo referência ao arquivo onde estão as configurações citadas.
Agora você compreende a teoria das 50 páginas?
Mãos à obra que vem mais coisa por aí galera!!!!!
Hoje eu gostaria de explicar de forma prática o funcionamento do CSS. Vamos começar com uma página extremamente básica em HTML.
Faça download do arquivo abaixo, abra-o, clique com o botão direito dentro da página, escolha a opção "exibir código fonte" e analise o código, pois nós iremos alterá-lo para que a configuração das fontes e plano de fundo seja em CSS.
Imagine que você construiu um site utilizando os TAGS em HTML e que esse site possua 50 páginas. Cada página possui como plano de fundo a cor vermelha. Cada título dos textos existentes nas 50 páginas posuam a seguinte característica: fonte: Arial, Tamanho: 14px, Cor: Branca, Alinhamento: Left e seja Bold (gordinha). O texto padrão seja Arial tamanho 12 e as mesmas configurações dos títulos. Certo? Tudo funcionando direitinho, uma maravilha.
Meia hora antes de apresentar ao cliente, o contato faz o seguinte pedido a você: "Mude as cores dos planos de fundo para Azul e as fontes dos títulos para Verdana na cor amarela".
Meu filho, são 50 páginas e vc terá que alterar uma a uma.
Aí, basta gritar: "Valei-me meu são CSS!!"
É pra isso e para outras coisas que o CSS serve.
Como funciona?
Simples! As 50 páginas são criadas. Certo? Certo.
Em um arquivo CSS são colocadas todas as configurações do site: planos de fundo, fontes com suas cores, alinhamentos, tamanhos, figuras, etc.
Ao ser solicitada; a mudança será feita somente neste arquivo CSS e tudo nas 50 páginas modificarão automaticamente. Né massa? Quanto tempo isso levará?
Minutos, meu nego, minutos!!!
Citei esta sigla e nem expliquei o que significa né?
CSS é a sigla em inglês para Cascading Style Sheet que em português foi traduzido para folha de estilo em cascata.
Galvão, você não disse nada....
Então lá vai: Nos primórdios da criação de um website, as tabelas eram (e ainda são por alguns profissionais da área) amplamente utilizadas. No entanto percebe-se a necessidade de um mecanismo que atribuisse estilos ao conteúdo de uma página. Além do mais, as tabelas foram criadas para exibir dados tabulares, como o horário escolar que fica dentro do seu caderno lembra?
Pois bem, um problema começou a ser notado com o uso das tabelas: O código HTML ficava imenso, dificultando a manutenção do site. Além do mais no código HTML, (explicado na HOME), as configurações de palavras, fundos, imagens eram repetitivos, aumentando mais ainda o código.
Imagine então uma página com um código imenso para ser mantido (talvez você ainda não esteja entendendo o que quero dizer. Vá até a home page e baixe o aquivo em pdf que ensina HTML e você mais à frente entenderá melhor).
Na verdade o usuário nem nota isso, o que importa pra ele é navegar num site bonitinho e pronto. Mas para nós Web designers isso é realmente um pesadelo quando se trata de uma página cheia e riquefifes!!!
Solução? CSS na mente rapá!!!!!
Proposta do blog
Hoje quero falar da proposta do meu site/blog.
Quero ensinar como criar um site em CSS partindo do Corel Draw.
Serão vários tipos de site. Do mais simples ao mais complexo.
Motivação
Tenho observado pelos sites existentes que a utilização do Corel Draw como ferramenta artística é maravilhosa. Como ferramenta técnica não. Acontece que no Corel a gente pode definir a posicção dos "divis" de maneira prática e eficiente.
E aí pessoal, blz?
Há muito tempo quero fazer este blog.
Essa é a hora!!!!
Aqui neste espaço publicarei matérias, novidades, opiniões, dicas, tudo sobre o mundo do Webdesigner, ok?
Leiam as matérias e comentem, please!!!
Assim saberei como conduzir este espaço. Falou?
Começando...
Ultimamente tem-se discutido bastante sobre um tema até então "desepercebido" ou "desconhecido" para quem se aventura na arte de criar sites: USABILIDADE.
Falo despercebido porque uma das primeiras empresas a se preocupar com isso foi a AOL, lembram dela? Isso faz tempo viu? Aqui no Brasil quase não se fala nela, mas la nos States, tá bombando!!!
Então, que diabo é isso?
Usabi..o quê?
USABILIDADE. É simples de explicar: É a maneira como uma empresa desenvolve algum produto. Como abrir aquele pacote de biscoito? Como montar aquele equipamento?
Um produto que esteja no cérebro do consumidor; que ele já saiba com usar ou não sinta dificuldade.
No caso da criação de um site: Será que todos sabem para que serve o botão "home"? Ou o botão "quem somos"? Qualquer letra que estiver na cor azul e sublinhada, para que serve?
USABILIDADE é uma fórmula pronta? Talvez. O diferencial está justamente como o webdesigner aplica ela.
É o estudo das cores do site, onde posicionar tal objeto, como organizar os itens da página, etc.
No que isso ajuda?
Deixa eu te fazer uma pergunta: Você já abriu o jornal hoje? Já verificou os anúncios?
Algum lhe chamou a atenção mesmo que você não esteja interessado no produto?
Já entrou em algum site e disse: "nunca mais venho aqui!!!" ou "que site massa, fácil de navegar, virei fã!!!".
Pois bem!!! Nesses e em outros exemplos do nosso cotidiano nos deparamos com a USABILIDADE.
RSS Feed