O tableless está estruturado na seguinte maneira:
- arquivos CSS para a formatação do layout e
- xhtml para a estrutura da página.
Hoje iremos começar a entender o CSS , então vamos lá.
O CSS ( Cascading Style Sheets ) lhe permite um maior controle sobre o seu layout, sem o uso de imagens, e ele possui algumas tags principais que irei explicar nesse primeiro momento.
Comandos Básicos
Width : Define o tamanho horizontal da div
Height: Define o tamanho vertical da div
Float: Esse comando é um dos mais importantes , e que será bastante usado durante a criação de um layout . Ela posiciona determinada div na posição declarada , ela pode ser left (esquerda) , right(direita) ou none (centro) . Caso não se declare esse comando , ele assume none(centro) como default.
Border: Configura a borda da div ou tabelas, suas variáveis podem ser border-top , border-bottom, border-left e border-right , caso queira as bordas de tamanhos e cores iguais para todos os cantos escreva assim -- border: 1px solid #000000; onde declarei o tamanho , estilo e cor das bordas.
Background: O background funciona de uma maneira simples, basta colocar background: url(arquivo.jpg); para definir com maior precisão, o css traz algumas variáveis dessa função muito útil , que são:
background-repeat - onde você declara se ele será repetido ou não e se for , em qual posição, seus valores são no-repeat (exibe apenas uma vez o background ) , repeat-x (repete o fundo apenas na horizontal) e repeat-y (onde repete apenas na vertical).
background-position - Define a posição do background, ou seja, se ele estará colocado na direita da página, esquerda ou centro , seus valores são left / right / center / top e bottom.
Margin: Define o tamanho das margens da div . seus valores são margin- left, margin-right, margin-top e margin-bottom.
Padding: Configura o espaçamento entre o texto e a ponta da div seja ela top / bottom / left ou right .
Pronto, após serem apresentados a alguns comandos básicos do css (lembre-se, são apenas alguns de muitos comandos que o css oferece), podemos dar continuidade ao próximo passo.
Primeiro layout com tableless
Agora iremos construir nosso primeiro layout utilizando o método tableless, primeiro, abra seu editor de texto favorito e siga as intruções abaixo:
::Xhtml::
Reparem que utilizei entre o (linha 8), o import que serve para importar o arquivo css para dentro desse xhtml.
Outro código utilizado que não comentamos , foi o id que será abordado mais pra frente .
Como o intuito dessa matéria de hoje é ver o funcionamento do css e não como funciona o xhtml, que será explicado detalhadamente mais pra frente, coloquei o código aqui só como exemplo e entendimento de como interagir css + xhtml.
::CSS::
Aqui está nosso código css que fomatará nossa página xhtml.
Uma pequena observação é que utilizei dois comandos que não havia comentado no inicio do tuto, que são :
Font - tem a função de formatar a fonte , tamanho e familia .
Font - weight - ele faz com que a fonte fique em negrito .
Reparem no #geral (linha 9 e 11), coloquei um esqueminha para que a div fique centralizada na tela em qualquer browser, portanto guarde esse esquema , pois irá ser muito importante se você deseja centralizar seu site .
Margin: 0 auto;
Width: 760px;
O que é tableless ? 
Na minha primeira coluna sobre dreamweaver, vou começar falando sobre como conectar o dreamweaver com seu site hospedado na internet, apenas com um recurso do DW , sem precisar de outros programas de FTP como o CuteFTP, WSFTP, entre outros.
Abaixo será abordada a versão mais simples da edição dos títulos (arquivos) e da produção dos arquivos VOB. A razão disso é proporcionar à maioria dos leitores um manual simples e rápido para a criação do DVD.
