..:: MX Studio Fóruns ::..: Criação Layout simples em Tableless - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Criação Layout simples em Tableless Tableless / XHTML / CSS / Layout

#1 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 11 July 2006 - 10:33 PM

<span style='font-size:12pt;line-height:100%'>Criação Layout simples em Tableless</span>

Um tutorial rapidão de um modelo de estruturação em Tableless. Não vai ser nada complicado. Iremos utilizar XHTML Stric e CSS.

Serei mais objetivo no layout, não irei fazer comentarios referentes as tag utilizadas direramente. Apenas a logica da estrutura. Para mais informações especificas sobre cada tag utilieze nosso forum ou acesse Site do Maujor.

Vamos direto ao ponto!

Veja o Final do Tutorial - http://www.tonyconde.kit.net/tutoriais/lay...leless-simples/
ta achando meio estranho o layout? hehe, eu usei o layout do Meu Blog e acabei não arrumando ele para este tutorial, foi meio que uma gambiarra. Mas serviu bem.

<span style='font-size:11pt;line-height:100%'>Vamos as Estruturas
</span>
<span style='font-size:10pt;line-height:100%'>XHTML Stric</span>

Basicamente temos uma estrutura dividida em #global, #topo, #conteudo e #rodape. A função de #global e jogar todo o resto em apenas uma unidade. Assim mantendo a relação entre todos.

CÓDIGO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

    <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <title>MX Studio</title>
    <link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

    <body>
    <!-- a global tem responsabilidade de unir todo mundo numa coisa só =P enfim, e a global -->
    <div id="global">
 
 <div id="topo">
     <h1><a href="#" title="voltar ao inicio">Layout Simples Tableless </a></h1>
 </div>

 <!-- inicio do conteudo -->
 <div id="conteudo" name="conteudo">
 
     <h2>MX Studio - www.mxstudio.com.br/forum - Thony Conde</h2>
 
     <p>
     No caso, aqui seria inserido o conte&uacute;do de minha pagina.
     </p>
     <p>
     Em caso de d&uacute;vidas envie um e-mail para thonyconde@gmail.com
     </p>
 
 </div>
 <!-- final do conteudo -->


 <!-- inicio do rodape -->
 <div id="rodape">
     <ul>
   <li><a href="#">Inicial</a></li>      
   <li><a href="#">Contato</a></li>      
   <li><a href="#">Webmaster</a></li>      
     </ul>
     <address>MX Studio - Brasil - thonyconde@gmail.com </address>
 </div>
 <!-- final do rodape -->

    
    </div>    
    <!-- aqui global esta fechando -->
    </body>
</html>


<span style='font-size:10pt;line-height:100%'>CSS</span>

CÓDIGO
/*
Vamos iniciar limpando tudo na pagina. Tirando margem, preenchimentos, bordas, estilos...
Só iremos aplicar novamente quando desejado
*/
* {
    text-decoration: none;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
    border: none;
}



/*
No corpo vou definir apenas alinhamento e background.
*/
body {
    text-align: center;
    background: url(images/fundo-pagina.gif);
}



/*
Na global vou jogar um margim zero pra colocar ela ao centro.
largura, imagem de fundo e jogo o texto pra esquerda novamente =P
*/
#global {
    margin: 0 auto;
    width: 600px;
    background: url(images/fundo-conteudo.gif) no-repeat;
    text-align: left;
}


#topo {
    width: 600px;
    height: 190px;
    background: url(images/topo.jpg) no-repeat;
}

/*
Esta senhora eu defino altura e largura.
*/
#conteudo {
    margin: 0 auto;
    width: 500px;
}



/*
largura, altura e clear both para ela ficar abaixo de conteudo
*/
#rodape {
    width: 600px;
    height: 61px;
    background: url(images/rodape.jpg) no-repeat;
    clear: both;
}



/*
definindo propriedades pro titulo
*/
#topo h1 {
    font: bold 15px 'Trebuchet Ms', Arial, Verdana, Tahoma, Sans-Serif;
    text-transform: uppercase;
    display: none;

}
#conteudo h2 {
    margin: 50px auto;
    font: bold 15px 'Trebuchet Ms', Arial, Verdana, Tahoma, Sans-Serif;
    text-transform: uppercase;

}
#conteudo h2 a { display: block; color: #F60;}



/*
o paragrafo dentro da div conteudo
*/
#conteudo p {
    font: 11px 'Trebuchet Ms', Arial, Verdana, Tahoma, Sans-Serif;
   color: #666;
    text-transform: uppercase;
    text-align: justify;
    padding: 10px;
}



/*
as listas no rodape
*/
#rodape ul, #rodape ul a {
    font:bold 12px 'Trebuchet Ms', Arial, Verdana, Tahoma, Sans-Serif;
   color: #000;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
}
#rodape ul li{
    display: inline;
}

/*
a tag address abaixo, dentro do rodape
*/
address {
    font: 10px 'Trebuchet Ms', Arial, Verdana, Tahoma, Sans-Serif;
   color: #069;
    text-transform: uppercase;
    padding: 2px;
    text-align: center;
}



QUOTE
Considerações
Bem. este foi um layout simples, me utilizei do layout do meu blog mas deu para fazer algo legal. Espero que desperte a curiosidade em alguem para manter estudos em tableless.


QUOTE
Links Afins
Como não fiz abordagens diretas aos codigos, lá vai:
Site do Maujor - http://www.maujor.com/
Artifice Web - http://artifice.web.pt/tutoriais/cntd/tut_css1.html

DOWNLOAD DOS ARQUIVOS DESTE TUTORIAL


QUOTE
Outros tutoriais

Dreamweaver
Ocultando/Exibindo Layers - http://forum.mxstudio.com.br/index.php?showtopic=28031
CSS
Background em Layout - http://forum.mxstudio.com.br/index.php?showtopic=28519
Div Flutuante + Opacidade - http://forum.mxstudio.com.br/index.php?showtopic=28601



Qualquer assunto referente poste abaixo.
Ou me envie um e-mail: thonyconde@gmail.com - Meu Blog
0

#2 User is offline   Adriano Aguiar 

  • Group: Membros
  • Posts: 118
  • Joined: 19-May 06

Posted 13 July 2006 - 11:49 PM

Muito bom TONY, conteudo bem claro para nosso conhecimento!

thumbup.gif Valeu e até mais.

Aguiar Alves - adrianoaguiaralves@gmail.com


0

#3 User is offline   Firemaster 

  • Group: Membros
  • Posts: 1410
  • Joined: 14-September 04

Posted 17 July 2006 - 10:10 AM

Muito bom. Só uma dica. Para tamanho de fontes, tente utilizar a medida em 'em' ou '%', pois assim, você dá mais liberdade ao usuário de escolher o tamanho da fonte.

Abraços
0

#4 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 17 July 2006 - 12:34 PM

Firemaster

Questões de Acessibilidade como tornar disponivel a manipulação do tamanho da fonte não foram levadas em consideração.
0

#5 User is offline   HaRtEr 

  • Group: Membros
  • Posts: 12
  • Joined: 07-August 06

Posted 22 August 2006 - 08:43 PM

Muito bom o tutorial, de fácil aprendizado para iniciantes. smile.gif
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Criação de Logo Fireworks paty_meireles 
  • 2 Replies
  • 1746 Views
New Replies Criação de uma "sitemeter"
Alguém pode me ajudar na criação... 		ASP tbrm 
  • 1 Reply
  • 859 Views
New Replies Ericsson prevê margens menores e clientes cautelosos no 4º tri Notícias Notícias 
  • 0 Replies
  • 21 Views
New Replies Simples Quiz Repositório de Códigos xanburzum 
  • 0 Replies
  • 179 Views
New Replies Imagem em css externo. Web Standards X-LOGAN 
  • 8 Replies
  • 2184 Views
New Replies Contador de visitas com arquivo txt
Procura-se um BEM SIMPLES... 		Dreamweaver Arley Barros 
  • 2 Replies
  • 985 Views
New Replies problema com css no firefox Web Standards Leonardo Carvalho 
  • 2 Replies
  • 469 Views
New Replies Posições imagens com CSS! Web Standards SuporteFac 
  • 6 Replies
  • 3172 Views

Publicidade

1 User(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)