S.tutorial

S.tutorial fazendo template sem tabela

  Existe muitos tutoriais ensinado fazer layout com tabela, mas sem tabela e com uso de css e passo-a-passo para fazer uma bom layout é coisa rará. Então resolvi fazer esse tutorial para meu visitantes  e leitores. E como no últimos tutorial deixarei template para ser abaixado aqui.

areá de trabalho

  Para fazer template do anterior eu escolhi uma estrutura simples com três rows (linhas ) e a row principal subdivida em mais três rows e para faze-los é simples insira ou escreva algum e mude linha mento ou mude visualização para soure e digite <div> dentro de uma <div>.

 Ou só escreva em blocos porem ficaram na mesma div, ao menor que você mude alinhamento do texto.

   No template criarei para este tutorial terá quatros row e na principal subdivida em três columns (coluna) em duas ficara sidebar e do meio fica texto.

   Para isso vou inseri uma imagem que será topo 

alinharei no centro e depois darei uma quebra de linha colocarei uma lista 

alinharei na esquerda isso já faze uma div ( alinhe primeiro para fazer div que falei elas fica visivio com uma borda vermelha) com escrevi antes e darei outra quebra e escreverei um pequeno texto centralizado.

  Quebrarei de novo para fazer rodape no inicio alinhado esqueda, aqui acaba uso da designer 

mudarei para soure e na div do texto vou colocar outras duas divs cada uma com lista.

  Para isso cortei texto fora e no espaço vazio digitei três div uma em cima da outra e no meio colei texto depois copiei lista já existente e colei nas outras div, depois marque cada div com id (id="") a premeria lista ficou com vo a segunda vu e texto com text o nome id que fica ente ásperas não precisa ser esses você que inventa nome de id que você quiser.

 É assim que ficar é claro que você pode usa método que foi usado anterior para fazer topo, lista ,texto e  rodapé, porem você terá de ir soure digitar ids nas div que próprio Kompozer faz. Essa é só uma maneira alternativa e mais cara de profissional.
  Agora você pode volta para visualização designer, porque vomos trabalha no css click no botão tem css em baixo lá barra ferramenta que fica abaixo do menu do Kompozer.

 Uma janela abrirá selecione style applied to an elemente with specified id attribute

e na areá de texto logo abaixo aparecea # nele vou
digitar vo id da primeira id e clicarei em creator styel
rule, com abas configurarei css da div vu.
 Na background escolhi cinza claro no list style type fico none e no text escolhi font famely coureir e já marque text-decoration com none para na hora de faze link não ficar sublinhado.
 Só tem como defini altura e lagurar pela interface gráfica então click na aba gereal ao lado aprecera uma areá de texto com todos atributos em css você deve digital abaixo dessa lista height: 90px; e width:121px;  e clicar em ok. Bem antes já podera ver alterações na div

e é só fazer a mesma configuração na outra só alinhamento left.
  E se tudo deu certo com você volta para prineira div selecione na lista esquerda como no caso do height e width digite float:left; todos ficaram alinhado numa row.
  Tudo esta ando bem até meu computador trava tive de reinicia-lo e Kompozer não funcionou mas corretamente não esta salvando todas as alterações no soure vou tentar fazer dou outro jeito já citado lá cima do  texto, mas seja qula foi metodo principal é confuguração css que não mudara apesar  que gora só vo ficou configurado mostrando porque Kompozer é nota 3,5 melhor rebaixa-lo para 3 de novo.
  Volatando aula como escrevi lá em cima para cria div basta muda alinhamento apois quebra linha e ter inserido topo, ai voltamos de novo para soure só que dessa vez vamos só digita ids e seus nome lembrado escrive uma div cont ou content para conter as outra três div é simples antes de vo dá-se entra para quebra linha e na linha vazia coloque <div id="cont ou content">. Eu escolhe cont mais simple e fácil.

script depois de digitar divs

   O resto já sabe, mas é preciso dizer sempre que for criar novo css para próxima div tem que clicar lá no botãozinho da paleita,

na caixa de dialogo do css e escolhe style rule que volta para estado inicial. Ai é só configura divs, a div vo fica com esta configuração   aqui height: 90px; font-famely: courier; width:121; background-color:#ccc, a div vu com esta  float: right; margin-top: -143px; width: 121px;
font-family: Courier; height: 90px; height: 90px; background-color: #cccccc; margin-bottom: 32px; na div text com margin-top:-60px; marign-left:115px; width: 370px; no cont marign-right:-16px; marign-left:9px; heigth: 237px;  parece dificil não se peculper pois tanto fusar achei aba box onde pode configura lagurar altura posição etc.

   Por seguindo div cont esta marign-roght:-16px; marign-left:8px; crie também uma div lin para menu com esta configuração widfth:600px; height:15px; e div ger envolvendo todo para centralizar e defini tamanho do site, portanto ele tem marign-right: auto; marign-left: auto; width:600px;.
   Para deixa menu ,que é primeira lista  que fizemos, com cara de menu vamos ter de ir style rule e escolher style appiad to all elements of type e lá baixo digita ul clicar creator style rule no novo elemento você vai defini none no list-style-type e cria também li a e no float coloque left isso é para remove marcações e alinha itens da lista horizotal. A cretido você já tenha linkado os itens então para muda-los crei elemento a e a: hover para ter efeito de interatividade no a configurei assim font-family: Latha; text-decoration: none;height: 15px; color: white; e no a:hover background-color: #cccccc; color: red; font-size: 1.1em;.
    No rodape coloque id com nome de rop

 com a sequinte configuração width:617px; background-color: #999999; font time new roman font-size 0,7em  e é só isso.

  coloque uma cor de fundo por isso mudei marign-right de -16 para 0px,  e left para 0 também AH!  a cor escolhida é essa 

  e mudei também  rop para 601px de width. 

  Agora é hora das sidebars no split ao lado designer e do soure

 

 primeiro você linca os itens do sidebar  no script coloque id="cc" depois crier elemente cc 

com sequinte configuração background-color: #ff6666; list-style-type: none; color: #66ffff; float: none; font-size: 0.7em; e coloque id em dotos  links para ter mesmo efeito.

     Crei cc:hover para aquele efeito de mouse com color: white; background-color: red; por fim temos este resultado.

baixar