← HTML + CSS

Layout

Lida 7736 vezes

Offline

tomassantos 
Membro
Mensagens 1061 Gostos 1
Feedback +1

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Olá,

Com layouts tipo:



Como é que fazem em html, com divs?
Offline

BlueEagle 
Membro
Mensagens 2221 Gostos 1
Troféus totais: 31
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

A unica resposta que te posso dar é "Faz-se Fazendo" :lol:

Se queres utilizar divis (o que está correcto) não vais usar apenas html vais utilizar também css, e é através do css que localizas os divs no ecrã.
Offline

tomassantos 
Membro
Mensagens 1061 Gostos 1
Feedback +1

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Não se pode fazer o posicionamento misturando no proprio html, tipo:

<div style="position: absolute; width: 100px; height: 100px" >

?

Há alguum problema em fazer com tabbles?
Offline

pedrovsky 
Membro
Mensagens 412 Gostos 0
Troféus totais: 24
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts

Acho que não é muito bom em termos de seo.
E depois ficas com o conteúdo junto com o estilo.
Dá uma grande molhada  :lol:
Offline

tomassantos 
Membro
Mensagens 1061 Gostos 1
Feedback +1

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Usam % ou px?
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

uso px, mas penso ser melhor usar %. Controla-se mais!
Offline

BlueEagle 
Membro
Mensagens 2221 Gostos 1
Troféus totais: 31
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

é diferente, se pretendem ter um site "dinamico" que alarga e encolhe conforme a pessoa encolhe a janela ( ou a resolução) utilizam % se por outro lado querem um site com largura fixa usem px.
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

exactly!
Offline

tomassantos 
Membro
Mensagens 1061 Gostos 1
Feedback +1

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Obrigado! :grin:
Offline

spec 
Elite
Mensagens 989 Gostos 1
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Tableless é um termo que está muito em moda no brasil (e um pouco por todo mundo) que rejeita o uso de tabelas para criar layouts. A verdade é que as tabelas foram feitas para suportar informação (texto) e já não faz sentido usar tabelas em layouts porque o CSS dá-nos ferramentas melhores e mais re-utilizáveis... com experiência fica mais pratico!

Mas podes usar tabelas em termos de performance não se nota e em termos de SEO não é muito relevante (podes atribuir classes e id a tabelas na mesma)... dá é um aspecto pouco profissional e um ar amador!


Desenhas um rectângulo no papel divides em outros rectângulos (de preferência sem espaços entre eles) e escreves o que cada divisão vai ter, um vai ser o header, outro o menu, outro o footer... por aí fora... no HTML fazes

<div id="header"></div>
<div id="menu"></div>
<div id="footer"></div>
<div id="..."></div>


no ficheiro de CSS

#header{}
#menu{}
#footer{}
#...{}


depois é só LER/ESTUDAR e aplicar características no CSS... A melhor maneira de aprender é começar, basta ler tutoriais ou livros e vais ver que é simples...


Quanto às dimensões... fixas ou não, tudo depende do que queres fazer, ha coisas que podem se moldar à resolução e hà outras que não!
Offline

Cacofb 
Elite
Mensagens 1036 Gostos 3
Troféus totais: 34
Trófeus: (Ver todos)
Level 6 Tenth year Anniversary Linux User Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Hoje em dia faço quase tudo por CSS tambem.
Só de vez em quando quando dá a preguiça, é que meto umas tabelas para organizar conteudos da BD.
Offline

cenourinha 
Elite
Mensagens 4094 Gostos 21
Troféus totais: 34
Trófeus: (Ver todos)
Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4

Tabelas só se devem usar para aquilo que elas foram feitas: estruturar dados, o layout deve ser feito com recurso a divs, etc... fica muito mais limpo.
Offline

estrucida 
Membro
Mensagens 13 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Super Combination Combination Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma Webmaster

Não se pode fazer o posicionamento misturando no proprio html, tipo:

<div style="position: absolute; width: 100px; height: 100px" >


Usa sempre uma stylesheet, só traz vantagens.
1 - Não misturas a formatação do layout com o conteúdo do site. Assim, torna-se mais fácil a gestão de ambos.
2 - Se precisares de modificar o layout (cor, tipo/tamanho de letra, margens,...) só terás que o fazer num sitio: a stylesheet.
3- A primeira vez que acedes ao site carregas a stylesheet que (supostamente) contém a definição do layout de todo o teu site. A partir daí, essa informação fica em cache, o que implica que todas as páginas visitadas posteriormente terão um carregamento mais rápido.

Há alguum problema em fazer com tabbles?

Podes fazer com tabelas, mas aconselho-te a filosofia de: usar tabelas apenas para dados tabelados e não formatação de layout.
Sabias que, se tiveres uma tabela numa página, essa página terá de "ser lida" duas vezes? Na primeira é identificada a presença de uma tabela e é analisada a sua estrutura. Na segunda vez é que são realmente "desenhados" os dados que estão dentro da tabela.
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter


Desenhas um rectângulo no papel divides em outros rectângulos (de preferência sem espaços entre eles) e escreves o que cada divisão vai ter, um vai ser o header, outro o menu, outro o footer... por aí fora... no HTML fazes

<div id="header"></div>
<div id="menu"></div>
<div id="footer"></div>
<div id="..."></div>


no ficheiro de CSS

#header{}
#menu{}
#footer{}
#...{}



é preciso por alguma chamada no ficehito html para o ficheiro css, ou basta estarem na mesma pasta?
que linha é essa?
Offline

leite 
Membro
Mensagens 864 Gostos 11
Troféus totais: 29
Trófeus: (Ver todos)
Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

isto dentro do <head>

<link rel="stylesheet" type="text/css" href="localização-do-teu-ficheiro-de-css" />