Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Design de sites com CSS
Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Design de sites com CSS -->
 
Avaliação: | Publicado em: 12/09/2006
Design de sites com CSS
Thalis Valle Thalis Valle é formado em Comunicação Social com habilitação em Publicidade e Propaganda. Trabalha com criação e desenvolvimento de internet na Odyn Comunicação. Mantém um blog (www.thalisvalle.com) sobre Tecnologia, Marketing e Design de Internet, que é referência entre profissionais de internet.


Design de sites com CSS

Olá! É com muita alegria que escrevo o meu primeiro artigo, aqui no Plugmasters. Espero colaborar no aprendizado daqueles que desejam crescer como profissionais de internet.

Para começar, gostaria de dizer que a Web é uma plataforma que organiza informações/dados. Entenda: Web é a junção de forma e conteúdo.

Sempre gosto de dizer que sites devem ser considerados como sendo uma plataforma - interface gráfica e arquitetura de informação -, que organiza e exibe dados/conteúdo.

Hoje, é extremamente importante planejar de maneira correta, toda a estrutura e funcionalidade de um site. Há quem diga que a forma é irrelevante, no contexto geral... Mas, eu digo que não, pois a forma é estrutura. Ela tem seu papel tão importante quanto a funcionalidade e navegabilidade, para trabalhar com conteúdo. A forma é a interface; design e estrutura.

Para tratar da maneira como é leiautado um site, devo lhes dizer que, é preciso entender/aprender CSS.

CSS ou  Cascading Style Sheets (Folha de Estilos em Cascata) é uma tecnologia usada para dar forma ou formatar a estrutura de marcação. O CSS é responsável por definir o layout; cores, fontes, caixas, bordas, margens, comprimento, largura e imagens.

O CSS trabalha separadamente da estrutura de marcação de um documento HTML/XHTML. Isso possibilita arquivos mais leves, organizados e mais fáceis de serem alterados.


Alguns benefícios:

  • controle de formatação de variados documentos a partir de uma só folha de estilos;
  • aplicação de variados layouts para diferentes mídias (dispositivos móveis, telas, impressoras, etc.);
  • maior suporte de formatação sobre a interface gráfica do documento;
  • padronização da codificação entre diferentes dispositivos e plataformas

Por uma breve abordagem, é possível entender a importancia da tecnologia.


Como começar?

Antes de formatar um conteúdo, é preciso ter um documento de marcação já estruturado. Lembre: "CSS trabalha separadamente da estrutura de marcação de um documento HTML/XHTML." Em outras palavras, isso significa que um site pode ser desenvolvido por um programador, sem que ele tenha conhecimento de design. Somente depois da estrutura definida, passará para o responsável pelo layout/design do site. A partir daí é que o site ganha uma "cara".

Para ler o CSS, entre as tagas <head>...</head> é preciso declarar:

<style type="text/css">
<!--
 -->
</style>

ou

<style type="text/css">
<!--
@import url("arquivo.css");
-->
</style>


Para concluir, escrevi um exemplo simples de formatação de Heading e Hypertext, ou título e corpo de texto:

Arquivo de marcação (XHTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Lorem ipsum</title>
</head>

<body>
    <div id="pai">
        <div id="filho">
            <h1>Lorem traesent vestibulum molestie lacus</h1>
            <p>
                Lorem ipsum dolor sit amet consectetuer adipiscing esent vestibulum estie
                lacus aenean mmy hendrerit mauris phasellus porta tce suscipit varius mi
                cum sociis natoque penatibus et magnis.
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetuer adipiscing esent vestibulum estie
                lacus aenean mmy hendrerit mauris phasellus porta tce suscipit varius mi
                cum sociis natoque penatibus et magnis.
            </p>
            <cite>Lorem ipsum</cite>
        </div>
    </div>
</body>

Arquivo CSS:

    <style type="text/css" media="all">
        <!--
        
        body
        {
            height: 100%;
            background-color: #F6F7F8;
            font-family: Georgia, Arial;
        }
        
        #pai
        {
            width: 50%;
            height: auto;
            padding: 15px;
            margin: auto;
            background-color: #D9D9D9;
            border: 2px dashed #FFFFFF;
        }
        
        #filho
        {
            width: 90%;
            height: auto;
            padding: 10px;
            margin: auto;
            background-color: #B9B9B9;
            font-size: 12px;
            color: #555555;
            border: 2px dashed #F6F7F8;
        }
        
        h1
        {
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
        }
        
        -->
    </style>

Faça o teste!

Até a próxima!
Este artigo é a parte 1 de 3 da seguinte série:
  1. Design de sites com CSS
  2. Layouts com Position e Width
  3. CSS no Dreamweaver

Muito bom. Vou começar a me dedicar com CSS
Muito bom cara, vo começa a estuda pra valer CSS.
parabens
jordam
Faltou importar o arquino do css, na index.

Detalhe fundamental para utilização do css...
Flávio de Assis <enraizados@gmai.com>
Gostaria de informações de como deixar de usar tabelas <table> e começar a usar marcações <ul><li>
O problema de muitos que querem ensinar css ou outras linguagens, é o fato de quererem parecer experts demais, se esquecendo que dezenas de milhares de pessoas que querem aprender, não conhecem quase nada daquilo e querem aprender de maneira didática. Ler essa matéria é o mesmo que ler grego sem saber nada da língua ou seja, não se absorve nada do que é dito.
Magno-Web-designer <magnobh2007@yahoo.com.br>
Parabéns Brother, o site ta muito bacana, continue assim postando sempre novidade pra nós que estamos começando agora Vlww...
Ate mais