Comecar a fazer...

[sr.silva 1]

Olá!!

 

Gostaria de saber qual e o primeiro passo para comecar a desenvolver um layout em

tableless com CSS.

 

Tenho já o Layout "base" só não sei como começar!!

 

Base1*

Base2*

Base3*

 

Sera que alguem poderia me ajudar???

 

*Layout obtidos atraves do site templatemonster.com

[micox 2]

Ae brodi, beleza.

 

Infelizmente to meio sem tempo de ajudar via msn, mas essa é uma sequencia boa pra aprendizado de webstandards/tableless.

 

Se seu problema não é o aprendizado inicial e sim a implementação a idéia que eu sugiro é a seguinte:

 

1) faça seu layout (você já fez)

2) Faça seu (x)HTML sem nenhuma tag ou atributo de característica visual como b, i, bgcolor, font, color. E, obviamente, sem tabelas.

3) Faça seu CSS pra implementar o layout em cima do XHTML.

 

Falows...

[sr.silva 1]

2) Faça seu (x)HTML sem nenhuma tag ou atributo de característica visual como b, i, bgcolor, font, color. E, obviamente, sem tabelas.3) Faça seu CSS pra implementar o layout em cima do XHTML.

Ae que esta o meu grande problema...Como comecar a fazer isso, sera que poderia explicar melhor!!!Teria como mostrar-me um exemplo de um layout escolhido

[Perfect Lion 10]

É o seguinte antes de mais nada você tem que ler sobre estroturação de layout..

 

aqui vai um otimo link:

http://www.maujor.com/tutorial/divmania.php

 

Outro link show de bola

http://www.maujor.com/w3ctuto/webkit.html

 

Mais http://www.maujor.com/w3ctuto/firstcss.html

 

Css tbm

http://www.maujor.com/tutorial/intrtut.php

 

Bem para começar você tem que entender isso ai...

[sr.silva 1]

O meu grande problema esta no seguinte,

 

Supomos que eu escolha o layout "Base 3" para comecar a desenvolver,

como do o "primeiro passo" essa que e a questão???

 

Já li os artigos do pa_bruno e do maujor so que não sei como dou o ponta pe inicial!!

 

Segue os artigos já lidos...

http://forum.imasters.com.br/index.php?showtopic=152734 [ Posicionamento de Laouts 1,2,3 ]

 

http://www.maujor.com/ [ Fundamentos CSS I , II , CSS em acao ]

[sr.silva 1]

Qual layout você´s acham que ficaria "melhor" em tableless/css?...base1...base2...base3

[micox 2]

Ponta-pé inicial é voce olhar aquele layout seu, e ver que tipo de tag voce coloca para determinado conteudo e ir montando seu XHTML.

 

Exemplo:

Lá no seu design deve ter um logotipo, daí você vai e define o elemento pra ele:

<div id="topo">
 <div id="logo"></div>
</div>

 

Um ótimo link pra você tava pendurado lá no "Artigos imasters": http://www.imasters.com.br/artigo.php?cn=3638&cc=280

[Perfect Lion 10]

Então kra vamos lá.. como começar a desenvolver... vamos pegar como base o seu primeiro layout que você indico... ok?

 

Antes de mais nada vamos analisar o layout.

 

Nele temos o topo, mensagem, barra navegação, coluna 1, coluna 2 e coluna 3 depois rodapé

 

 

bem vendo isso é o nosso esqueleto.. precisamos primeiro criar esse esqueleto... vamos comelar pelo topo

 

o topo iremos criar um bloco para amazenar todo o conteudo do topo em um lugar concentrado ;)

 

<div id="topo"></div>

dentro dessa tag vamos ter o conteudo que vai ficar dentro do topo..

 

o que temos no topo?

 

LogoTipo e Sistema de Busca... OK.. então vamos lá

 

<!-- Topo --><div id="topo">  <!-- LogoTipo -->  <h1><a href="">Minha empresa a melhor da area</a></h1>   <!-- fim LogoTipo -->    <!-- Bloco contem conteudo Busca -->  <div id="busca">   <form .. >	<input id="inptexto" ... /> <input id="inpbuscar"... />   </form>  </div>  <!-- Fim Busca Bloco --></div><!-- fim Topo -->

Bem já temos o topo o esqueleto dele.. prontinho... agora vamos aplicar o Css a folha de estilo nela ;)

 

estilo.css

/* suponhanmos que meu topo tem 60px de altura */#topo{  height: 60px;  background: #8BC612;  padding: 6px;}/* agora vamos configurar o nosso logo */#topo h1 a{   float:left;   text-indent: -90000px; /* esconde o texto isso serve para buscadores;) */   overflow: none; /* tira a barra de navegação do opera */   width: 180px; /*suponhamos que o logo tem largura de 180px */   height: 180px; /* o mesmo para a altura */   margin: 5px 10px 12px 20px; /* x (topo), x2 (direita), y(baixo), y2(esquerda) aqui definimos a posição do nosso logo dentro do bloco topo;) */   background: url(../../../imagens/logo.jpg) no-repeat center center; /* localizamos nossa imgs do topo */}/* agora configurando nosso formulario */#topo #busca{   margin: 300px; /* para colocar ele lá no canto da tela ou utiliza o float: right*/}#topo #busca form #inptexto{ coloque as propriedades que você quer para o campo de texto aqui}#topo #busca form #inpbuscar{ coloque as propriedades que você quer para o campo de texto aqui}

 

Bem mais ou menos isso.. isso é um começo ;) agora só ir fazendo o resto Ok....

[sr.silva 1]

Como posso te explicar a minha situação!!Estava precisando de algo que me desse inspiração em um layout "real", um que eu fizesse para funcionar realmente, entende???Agora com essa sua análise do topo acho que consigo fazer o resto do site...Muito obrigado pela ajuda!!!!

[sr.silva 1]

Segue o meu codigo HTML

 

********************************************

 

<!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>Tableless - Inicio do Inicio</title><link href="css/estilos.css" rel="stylesheet" type="text/css"></head><body><!-- Topo --><div id="topo">  <!-- LogoTipo -->  <h1><a href=""></a></h1>  <!-- FIm do LogoTipo -->    <!-- Bloco contem conteudo Busca -->  <div>	<form>	  <input id="inptexto" />	 </form>   </div>  <!-- Fim Busca Bloco -->  </div><!-- fim Topo --><!-- Mensagem --><div id="mensagem"> <h1>IMPLEMENTANDO TECNOLOGIAS DE SOLUÇÕES EMERGENCIAIS</h1> </div><!-- Fim Mensagem --><!-- Barra de Navegacao --><div id="barranavegacao"></div><!-- Fim Barra de Navegacao --></body></html>

CODIGO CSS

 

/* Topo do Layout */#topo{  height: 60px;  background: #CC3333;  padding: 6px;}/* Logo Layout */#topo h1 a{   float:left;   text-indent: -000000px;    overflow: none;    width: 220px;     height: 100px;    margin: -40px 0px 0px 0px;    background: url(../images/logo.jpg) no-repeat left center;}/* Input de Busca - Topo */#inptexto{		  border-top: 1px solid #000;		  border-left: 1px solid #000;		  border-bottom: 1px solid #000;		  border-right: 1px solid #000;		  font-size: 13px;		  color: #000; 		  font-family:Arial, Helvetica, sans-serif;		  font-size:13px;		  float:right;		 }/* Mensagem */#mensagem h1{  color: #000;  font-family:Arial, Helvetica, sans-serif;    font-size:13px;}

Como podem ver por esse topico, estou iniciando a minha caminhada em tableless,

com isso tendo ajudas de amigos do forum, gostaria que analisassem meu codigo

e opinassem sobre o mesmo....

 

Ate agora fiz somente o topo do site, junto com o logo e um campo de busca de informacoes...

 

Testei somente no FF, quando rodei no IE, aquele desastre, tudo fora do lugar e etc....

Se alguem pudesse me ajudar a ajustar em ambos navegadores...agradeceria.

 

Favor me mostre onde errei no codigo mais simples que você´s já viram!!!

 

AT++ http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[sr.silva 1]

alguem poderia me ajudar!!

[RicardoTorres 0]

cola um link pra gente poder ver :)

[pa_bruno 0]

soh uma coisa... naum mande msgs pessoais para ver tópicos... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

outra coisa, estude arquitetura de informação e semântica... q ae você consegue jah estruturar e entender bem como montar seu site no html...

 

nos meus artigos tem como montar uma estrutura com 2, 3 colunas e liquido ou solido... veja o q eh melhor, veja o artigo e estude o q significa cada tag, propriedade e atributo... isso com certeza irá te ajudar na elaboração da estrutura...

 

passando da criação do layout, sabendo a semantica e AI, jah consegue fazer seu site...

 

outra coisa q muitos pecam, estude antes da semantica, o html... mta gente posta duvidas bobas d html, q estudando um poko soh, jah consegue saber...

 

e outra coisa, se naum souber, trate de estudar inglês... irá ajudar bastante tb... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

agora q vi... outra coisa essencial, nada de "clonar" sites de template monsters, etc... como inspiração vale, mas nada de fazer igual... ;)

 

e todos os layouts citados podem ser feitos em webstandards... o http://amznet.com.br/temp/10048-b.jpg seria o mais complicado d fazer para iniciantes... eles naum são tão dificeis... só são um pouco chatos por precisarem de alguns divs para estruturar o conteúdo...

[sr.silva 1]

outra coisa, estude arquitetura de informação e semântica... q ae você consegue jah estruturar e entender bem como montar seu site no html...

Como ja mencionado no tópico, eu li todos os seus artigos sobre semantica, tableless e assunto afins...O grande problema fica, na hora de analisar o layout em cima da metodologia tableless, ontem tive uma ajuda que deu-me uma verdadeira "clareada" nas ideias.Pude ver como e possivel analisar um site, com base no assunto...A minha pergunta refere-se a questao de analisar o codigo que postei ...nada mais, que isso!!Sei que esta no inicio do site, e nao tem muito o que analisar...Mais se pudessem fazer isso agradeceria!!

agora q vi... outra coisa essencial, nada de "clonar" sites de template monsters, etc... como inspiração vale, mas nada de fazer igual...

Apenas estou pegando um site, "verdadeiro" para ter base de desenvolver um original...se e que me entende!!!

[pa_bruno 0]

você naum fez uma coisa q falo q eh essencial nos meus artigos e posts aki... coloque sempre uma div q englobe tudo... fica mais facil para edições posteriores...

O grande problema fica, na hora de analisar o layout em cima da metodologia tableless, ontem tive uma ajuda que deu-me uma verdadeira "clareada" nas ideias.

você vendo a semantica, verá q eh muito mais fácil fazer essa análise... eh apenas isso... ver q div eh para divisões, estruturação... hn para títulos, p para parágrafos, address para endereços e por ae vai...

[sr.silva 1]

pa_bruno

Como você esta falando tanto nisso!!

Qual de seus artigos fala exatamente sobre o problema que enfreto...

 

O verdadeiro problema e que os artigos sobre o assunto, são destinados a pessoas que ja tem um certo conhecimento

em desenvolvimento tableless.....

 

Hoje posso dizer que sei alguma coisa referente a HTML e CSS, o bastante para poder "criar" algo interessante...

A minha dúvida que se arrasta a uns 2 meses e como analisar o layout para desenvolver o mesmo, com CSS e HTML....

 

Entende agora a situacao????

[pa_bruno 0]

pa_bruno

Como você esta falando tanto nisso!!

Qual de seus artigos fala exatamente sobre o problema que enfreto...

desculpa, mas naum vou procurar pra você... pode ateh buscar no forum... eh apenas um div geral q englobe teu site todo... soh isso...

<div id="geral">conteudo todo</div>

apenas isso

 

O verdadeiro problema e que os artigos sobre o assunto, são destinados a pessoas que ja tem um certo conhecimento em desenvolvimento tableless.....

Desculpe, mas meus artigos são bem básicos... explico bem detalhadamente e são para leigos...

 

Hoje posso dizer que sei alguma coisa referente a HTML e CSS, o bastante para poder "criar" algo interessante...

A minha dúvida que se arrasta a uns 2 meses e como analisar o layout para desenvolver o mesmo, com CSS e HTML....

cara, pela terceira vez, eh soh aprender websemântica cara... eh mole...

você pega um site dora dos padrões... vê um:

<div align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sagittis nunc a augue. Morbi pharetra nunc eu dui. Vivamus non dui eget enim sodales adipiscing. Mauris laoreet risus vitae lectus. Aenean tellus lectus, tincidunt id, ultricies ut, dapibus in, lectus. Fusce lobortis aliquet urna. Nunc justo erat, gravida nec, molestie quis, tempor in, tellus. Nunc aliquet placerat pede. Suspendisse lacinia enim ac turpis. Nulla facilisi. Cras eget urna.</div>

você vê q está errado, pois eh um parágrafo e tah com align, atributo depreciado... você mudaria para um <p> com um text-align: left;

 

a mesma coisa para:

<font size="6"><b>Título</b></font>

completamente errado, pois existe os <hn> para os títulos... a tag <font> foi depreciadas há tempos... eh soh setar no css o tamanho da fonte do título e colocar no html:

<h1>Título</h1>

varia d 1 a 6... agora cabe a você, analisar qual usar... depende da hierarquia da informação do seu site (por isso eh legal saber AI)...

 

e foi o q falei cara... eh soh ver a semantica... q você vai saber o q colocar e onde colocar... o q substituir e pelo q substituir... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[sr.silva 1]

A web semantica, nao seria a correcao dos erros "ortograficos" do html ???

[pa_bruno 0]

naum cara... claro q naum...

 

faça uma busca no google... pesquise no assunto... semantica eh saber q xicara serve para beber café, chá e naum cerveja... mas problema eh q tem nego q bebe cerveja nisso... uahuahhau

 

mesmo exemplo para tabelas... elas são para dados tabulares, mas os caras insistem em criar sites, estruturação com elas...

 

eh a mesma coisa... eh saber q tal coisa serve pra tal coisa... q div eh divisor e serve pra estruturar, q hn eh titulo e serve pra titulos, q p é paragrafo e serve para parágrafos... por ae vai... ;)

 

dah uma pesquisada nisso... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[sr.silva 1]

estou saindo agora...mais a noite estarei novamente on-line pesquisando e "pertubando"ate +