Iniciando os estudos com tableless e css

[Nícolas 4]

Cara, tem muitos layouts em tableless que são parecidos e tem o mesmo estilo.

 

Mas meu, qualquer site montado em tabela pode ser montado em tableless, não tem essa de site nos padrões serem limitados para criação.

 

 

Mas uma dica que dou para agilizar a montagem das paginas do site e agilizar o carregamento é tentar montar o site com fontes padrões inclusive os titulos.

 

Ao invés de criar aqueles fundos de noticias ou seções que são digitados diretamente na imagem, cria ele com fontes comuns e bota de fundo...

 

O texto você digita diretamente no html.

 

 

Tem um site aqui que fiz na epresa que trabalho que da pra ver bem isso que to falando.

http://www.maxximaservice.com.br/

 

Aonde está escrito "Maxxima: o parceiro ideal para fazer sua obra andar mais rápido", se você ir mudando de pagina vai ver que a barra é bonita e tal, mas o texto é escrito diretamente no html.

 

O site não ta feito em tableless pois a empresa que trabalho apesar de saber as vantagens do tableless falta tempo mesmo, são muitos clientes, a cada dia aparece novos sem falar nas atualizações dos outros sites que matam também.

 

São pouquissimos o site que foram feitos em tableless la, mas sempre que monto um site em tabela lá tento deixar o mais próximo possivel nos padrões.

 

 

Quando fiz esse layout e montei a estrutura eu tava pegando as manhas de tableless e padrões ainda, por isso não podia ficar arriscando muito.

 

Hoje ja desenvolvo muito mais rapido que nessa época e tal, tem muitas coisas nesse código que faria diferente.

 

 

 

Mas como eu falei.

Home

<td class="secao">Maxxima: o parceiro ideal para fazer sua obra andar mais rápido</td>

Dicas

<td class="secao">Dicas</td>

Vantagens

<td class="secao">Vantagens</td>

Apenas com essa class, eu ja defini a imagem de fundo, altura do texto, cor, fonte, padding-left e etc.

 

 

Se você for ver, não fica devendo a nada em termos visuais para aqueles titulos com imagens.

 

Mas a agilidade que da para montar as subpaginas, de não ter que ficar abrindo a imagem, digitando o titulo exportando a imagem pra jogar la.

 

 

Apesar do código ta em tabela (coisa que o pessoal aqui num duvido nada que vai pega no pé, ahahaha)

 

Deu pra explicar aonde eu queria chegar

 

;)

 

 

 

PS: Amanhã eu posto aqui um link com as fontes que são compativeis para cada sistema pra você poder variar bastante nas fontes do site.

 

Flw aeee

[inforsis 1]

/*"nick171", valeu as dicas cara..vou aguardar as dicas de fontes...bom gostaria de mais dicas...caso alguem puder...vlwaté mais... *//*"nick171", valeu as dicas cara..vou aguardar as dicas de fontes...bom gostaria de mais dicas...caso alguem puder...vlwaté mais... */

[marciosantos 0]

você deve alinhar os campos dos Inputs/selects/textareas/etc usando labels:

Opa! Opa! Opa! Cabe uma ressalva aqui... A tag <label> não é utilizada para alinhar nada... O uso dessa tag é para quando você der um clique sobre a palavra que estiver dentro dessa tag, o cursor irá dar o foco no input que estiver com o name definido igual ao atributo for da tag <label>... Utilizando seu próprio exemplo:

<label for="user">User:</label><input type="text" name="user" id="user"></input>

Quando eu clicar na palavra User, o cursor de texto irá automaticamente focar no input com o name user, pois a tag <label> possui um atributo for definido dessa forma... Vejo então que, "semanticamente falando", essa tag <label> não tem a função de alinhar, e sim funcionar como uma etiqueta para o input, como o próprio nome já diz...

 

Veja a descrição dela:

HTML <label> tag

--------------------------------------------------------------------------------

Definition and Usage

 

Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.

Fonte: W3Schools

 

Só pra constar... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

 

Com certeza!

 

E ressaltando:

Semanticamente falando:

A pripriedade LABEL (etiqueta) se setada no CSS, além de receber a função de MOSTRAR QUAL INPUT se refere áquela etiqueta, pode funcionar como marcador, deixando desnecessário o uso de uma DIV, SPAN ou P dentro dum form.

 

A idéia de usar-se as normas webstandards é, além de tornar o código acessível e consequentemente validado, fazer com que o site seja LEVE... sem milhares de linhas no XHTML e CSS.... então se puder-se evitar o uso de DIVs, Spans e Ps trocando-as pelos labels que assumem perfeitamente função de CAMPOS, ótimo.

 

Só pra constar! ;)

 

Abraços

[Guilherme Rambo 4]

Uma estrutura básica bacana pra formatar tranquilamente a maioria dos forms é assim:

<form action="" id="" method="" enctype="application/x-www-form-urlencoded">	<fieldset>		<legend>Titulo do Form</legend>		<label><span>Descrição do campo</span>		<input type="" />		</label>	</fieldset></form>

[]'s

[Nícolas 4]

Aee como prometido o link que falei das fontes.

 

http://www.codestyle.org/css/font-family/s...edResults.shtml

 

Só falta as do linux, mas não deixa de ser um link muito útil http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[inforsis 1]

Aee como prometido o link que falei das fontes.http://www.codestyle.org/css/font-family/s...edResults.shtmlSó falta as do linux, mas não deixa de ser um link muito útil http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

/*concerteza será muito util "nick171", assim como todos os links e dicas que voces estão postando aqui no topico.vlw por mais essaaté mais... */

[inforsis 1]

/*Boa Noite a todos!

 

bom, ainda não estou de férias (ainda uma recuperação pendente a fazer do semestre rs.)...

mais já estou começando os estudos... (e estou bem confuso, apareceram alguns projetos para desenvolver nas férias, justamente quando havia decidido apenas estudar para me "reciclar" nestas férias...

bom mais de qualquer formar já iniciei a leitura de alguns dos links que me passaram, a principio comecei pela lista que o "gio!" passou.

 

lista de links aqui mesmo do forum.

 

"Porque utilizar tabelas para layout é estupidez..." um otimo texto, explica de uma forma não muito cansativa de se ler, otimo para convencer quem está pensando em estudar tableless e css.

 

Introdução a CSS, do Maujor já havia lido este, também bem importante, assim como grande parte do conteúdo existente no site do maujor.

 

logo irei ler outros links, li pouco pois tenho que estudar ainda... e adiantar uns projetos...

 

bom li pouco, mais tenho uma dúvida que talves tenha lido, mais não percebi.

 

ao dispensar a marcação <br> eu iria substituir por qual tag?

e para que serve: em?

ex.:

div {border: 1px dotted gray; padding: .5em}

 

bom a principio apenas essas duas pequenas dúvidas. :unsure:

 

até mais... */

[Nícolas 4]

Bom cara a tag <br> você não precisa excluir da sua vida só porque entrou no mundo do tableless...

 

Primeira coisa...

 

 

SOBRE A TAG <BR>

A tag agora não é mais <br> e sim <br />.

 

Por uma determinação da w3c todas as tags devem ser fechadas...

 

Tags isoladas (que não fecham como é o caso das<b></b>, <div></div>, <p></p>, etc) para ser validas deve finalizar com />

 

 

Exemplo:

<link href="estilo.css" rel="stylesheet" type="text/css" />

<input type="text" name="nome" />

<br />

Então voltando ao assunto, a tag br não é uma tag em desuso... pelo contrario ainda ta em uso e como você viu foi aprimorada.

 

Mas tudo que for texto, blocos de texto e tal, você deve utilizar a tag p (Paragrafo)

 

 

Alem de ficar mais fácil de você estilizar o texto, mudar fonte, cor, tamanho e etc.

 

Se precisar você pode dar aquele classico paragrafo (os dois dedinhos da margem, hehe) com o comando.

 

p {

text-indent: 25px;

}

Não esquecendo, por padrão a tag P ja vem com um valor de margim-bottom definido, você pode aumentar esse valor para dar um espaço maior entre os paragrafos, ou tira-lo definindo uma margem inferior de 0px.

 

Uma coisa legal é você aumentar a altura da linha (line-height) e o ás vezes até o margin-bottom da P para textos grandes, torna a leitura menos cansativa e mais agradável, assim como no site http://www.tableless.com.br/ que tem um line-height alterado ;)

Se você for parar pra analisar tem diversas vantagens em utilizar a tag P nos blocos de textos, ele não fica mais apenas jogado no site.

 

Ela é muito útil.

 

Nota: Da uma estudada nas tags dl, dt e dd ;)

 

 

SOBRE A EM

Então cara... e em é apenas uma forma de medida do CSS.

 

Assim como no mundo existem medidas como centimetros, polegadas, metros, pés e etc...

 

No CSS também tem diversas medidas.

http://artifice.web.pt/tutoriais/cntd/tut_css6.html

 

 

A vantagem...

 

Acessibilidade...

 

Se você define uma fonte em px você está determinando que ela SEMPRE TENHA 16px (um tamanho sempre fixo)

 

Não sei informar o porque mas o valor em, pt, etc não são valores fixos.

 

Se você não entendeu é simples e fácil de entender.

 

 

Só você parar para pensar naquelas pessoas idosas ou que tem dificuldade para enxergar de perto.

 

Da dificuldade pra enxergar textos com fontes pequenas.

 

 

Nos navegadores tem uma opção (Exibir > Tamanho do Texto) que você pode aumentar o tamanho das fontes.

 

 

Entra de novo nesse link que te passei com o Firefox e o IE.

http://artifice.web.pt/tutoriais/cntd/tut_css6.html

 

O texto do site foi escrito com px....

 

Se pode descobrir isso com essa opção do navegador que falei...

 

 

O Firefox aumenta tamanhos em px, já o IE não.

 

Se a fonte estivesse definida com em, pt e etc ele ja funcionaria.

 

Se você entrar no site bengala legal por exemplo.

http://www.bengalalegal.com/

 

Se vai ver que nele o tamanho da fonte aumenta com essa opção no IE. (Exibir > Tamanho do Texto)

 

E o site ainda tem dois asinhos no canto superior pra aumentar a diminuir a fonte de uma forma rapido via javascript.

 

Que é uma solução para caso você precise utilizar px como medida, porem da um trabalho pois você terar que mudar cada valor de forma isolada. ;)

 

Nota: para definir o tamanho da fonte ALÉM dessas medidas passadas no link ainda tem uma sequencia de small, x-small, xx-small, entre outras

 

Bom é isso... qualquer duvda só falar...

 

E é isso aee cara... continua correndo atrás :)

[inforsis 1]

/*bom dia a todos!ok "nick171", vlw a explicação, tenho uma leve impressão que algo ficou meio perdido na minha mente nessa explicação (mais vou ler novamente em um outro momento, qualquer coisa pergunto...)bom tenho mais uma dúvida...vocês acham que é muito "arriscado" para mim que estou aprendendo querer desenvolver "layouts fluidos", pois tenho um grande interresse em desenvolver esse tipo de layouts, o que vocês acham? dêm suas dicas.?ps: nunca fiz layouts fluidos quando usando tabelas.até mais. */

[Nícolas 4]

hehehe é que as vezes me empolgo e acabo me enrroladno =)Mas então... vai com calma com layouts...Se pode até conseguir fazer um layout mais desenvolvido e tal, mas pode ser que você faça coisas que compliquem mais o seu código por falta de prática.Aeee ficar com uma estrutura meio "abalada" ou de dificil entendimento até mesmo pra você por não saber uma maneira mais simples de fazer aquilo que queria.Se você pegar um site com muito conteudo pra montar agora pode ser que você consiga.Mas eu particularmente acho melhor você ir com calma, vai montando layouts simples, deixa os mais grandinhos pra depois, porque com o tempo você vai aprender a não cometer erros que podem evitar muitas dores de cabeça mais pra frente ;)

[inforsis 1]

/*ok, "nick171".

mais somente um detalhe, caso eu queira iniciar algo do tipo.. (rs.)

pergunto sempre por aqui.

vlw!

 

bom estou aguardando os coment´s do "gio!" do "#INSIDE#" do meu broder jeronymo e dos outros...

hehehhehehehhe

até mais...

 

editando...

 

bom surgiu uma dúvida sobre o que foi dito acima:

a forma de medida em eu apenas posso utilizar para definir tamanho de fonte, ou qualquer outra medida como margin, etc (que sempre define em px.) pode ser definido com em?

 

editando, lembrei que li em um dos links que o "gio!" passou, então posso usar o em como forma de medida sim, para o que eu questionei acima. bom então fica a dúvida, é recomendado eu passar a usar essa forma de médida para todas as definições, ao inves de px como sempre usei.?

 

vlw.

 

*/

[inforsis 1]

/*bom estou aqui com uma dúvida....

 

estou deixando paginas simples aqui da empresa para fazer com tableless (apesar de estar gastando um pouco de tempo para isso...)

 

bom estata tentando fazer uma simples tela, mais fiquei com alguas dificuldades no posicionamento em usar o caberçalho. gostaria que alguém se possivel passasse essa tela simples que fiz com tabela para tabless (pretendo com isso fixar alguns conceitos de caberçalho e de posicionamento de botão, seria imporante para mim, caso alguém esteja disponivel poderia fazer isso e postar o codigo aqui.

 

tela1.php

<!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>Untitled Document</title><style type="text/css"><!--body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}.style1 {	font-size: 16px;	font-weight: bold;}.style2 {	font-size: 14px;	font-weight: bold;}--></style></head><body><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">  <!--DWLayoutTable-->  <tr>	<td height="50" colspan="3" align="center" valign="middle"><span class="style1">PAINEL DE ADMINISTRAÇÃO </span></td>  </tr>  <tr>	<td width="152" height="26"> </td>	<td width="505"> </td>	<td width="123"> </td>  </tr>  <tr>	<td height="30" colspan="3" align="center" valign="middle"><span class="style2">Escolha a opção abaixo.</span> </td>  </tr>  <tr>	<td height="35"> </td>	<td> </td>	<td> </td>  </tr>  <tr>	<td height="234"> </td>	<td valign="top"><form ><table width="100%" border="0" cellpadding="0" cellspacing="0">	  <!--DWLayoutTable-->	  <tr>		<td width="505" height="234" align="center" valign="middle"><label>		  <input type="submit" name="Submit" value="Adicionar Produto" />		  <br />		  <br />		  <input type="submit" name="Submit2" value="Editar Produto" />		  <br />		  <br />		  <input type="submit" name="Submit3" value="Excluir Produto" />		</label></td>		</tr>	</table></form></td>	<td> </td>  </tr>  <tr>	<td height="25"> </td>	<td> </td>	<td> </td>  </tr></table></body></html>

obrigado.

 

até mais... */

[guezth 0]

simples assim =)

 

<!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>Untitled Document</title><style type="text/css"><!--body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}.style1 {	font-size: 16px;	font-weight: bold;}.style2 {	font-size: 14px;	font-weight: bold;}#topo {	margin-top:0px;	width: 100%;	text-align:center;}#opcoes {	width: 100%;	text-align:center;}--></style></head><body><div id="topo"><span class="style1">PAINEL DE ADMINISTRAÇÃO </span></div><div id="opcoes"><span class="style2">Escolha a opção abaixo.</span><form><label for="Submit">Opção 1</label><input type="submit" name="Submit" value="Adicionar Produto" />		  <br />		  <br /><label for="Submit2">Opção 2</label><input type="submit" name="Submit2" value="Editar Produto" />		  <br />		  <br /><label for="Submit3">Opção 3</label><input type="submit" name="Submit3" value="Excluir Produto" />	 </form></div></body></html>

[inforsis 1]

/*vlw guezth, tipo quando eu voltar do aumoço vou dar uma olhada.bom só uma coisnha....style1 equivale ao caberçalho correto, poderia chamalo de <h1> ? :unsure: bom até mais... */

[Nícolas 4]

To no trampo mas sobre o style1 pra h1...Não poderia... deveria usar, heheheFlw

[inforsis 1]

/*vlw "nick171"tipo o que te pedi o guezth, passou para mim.masi caso queira fazer algo e postar mais tarde, fique avontade.até mais... */

[Giovani 104]

inforsis, as dicas (e vários links) foram passadas para você, conforme o título do tópico.

 

A idéia agora é você ir estudando e fazendo, estudando e fazendo.

Quando as dúvidas surgirem, você vem e posta em um novo tópico.

Fica mais fácil e mais organizado.

 

Se você tiver alguma outra dúvida, abra outro tópico, este será fechado.

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif