Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

.:: Pegasus ::.

Layout Fatiado no FW + Divs no DW

Por , em Desenvolvimento frontend

Recommended Posts

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Pessoal, como dito na descrição do tópico, movam se estiver errado.

Li alguns tutoriais sobre fatiamento no Fireworks e exportação para o Dreamweaver.

Quando olhei no código fonte, esse layout é construido por tabelas, e como a maioria do pessoal acha que tabelas definitivamente não foram feitas para layout e sim para dados, resolvi procurar alguma coisa melhor, achei um tuto aqui ensinando a fatiar e exportar como Css-layers. Também vi que meu codigo não ficou muito limpo.

Então eu tentei experimentar Fatiar o layout completo no fireworks e contruir manualmente em Divs.

Resultado.

1-) Só consegui deixa-lo "bonito" colocando position absolute.

2-) O Menu não rollover não funcionou.

3-) Não consegui centraliza-lo.

 

As perguntas são.

1-) Eu fiz certo nessa tentativa?

2-) Precisarei usar Java Script para poder fazer o menu funcionar?

3-) Tem como eu centraliza-lo?

 

Bom pessoal, eu também estou querendo fazer um Web Standard, pois as veses imagino eu, como deficiente visual tentando acessar uma página. Por isso quero pelo menos tentar fazer, sei que estou no começo mas tenho que aprender.

Qual seria o melhor procedimento? Vi layouts em Css muito bons, mas acho que quem os fez são muito bons. Então, demorarei até chegar até esse nível.

 

Pra quem quiser ver mais ou menos como ficou meu código, deixei o Css na página pra vocês darem uma olhada.

 

#topo {	position: absolute;	height: 91px;	width: 760px;	left: 0px;	top: 0px;	right: 0px;	bottom: 0px;}#topo02 {	position: absolute;	height: 76px;	width: 551px;	left: 209px;	top: 91px;	right: 0px;	bottom: 0px;}#quemsomos {	position: absolute;	height: 19px;	width: 209px;	left: 0px;	top: 91px;	right: 551px;	bottom: 0px;}#layout {	padding: 0px;	height: 500px;	width: 760px;	position: relative;	left: 0px;	top: 0px;	right: 0px;	bottom: 0px;}--></style></head><body><div id="layout"><div id="topo"><img src="SITE 2/images/slice_topo.jpg" width="760" height="91" /></div><div id="topo02"><img src="SITE 2/images/slice_topo02.jpg" width="551" height="76" /></div><div id="quemsomos"><img src="SITE 2/images/hendrikx_r3_c1.jpg" width="209" height="19" /></div></div></body></html>
Para entenderem mais ou menos.. Fiz uma div "mãe, e as divs com as imagens e imagens dos menus dentro dessa div "mãe"

usei apenas três para verem como ficou.

 

Quando eu fazia com tabelas era mais ou menos essa idéia.

Uma Tabela mãe, e varias tabelas com as imagens dentro dela formando o Layout.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Olá .:: Pegasus ::.,

 

Bom, de início já lhe digo, trabalhar com tabelas é, além de errado, muito diferente de trabalhar com as css.

Tente esquecer as tabelas, elas são para dados tabulares.

 

Outra, dica pessoal, eu não curto esse negócio de fazer no Fireworks e depois exportar. Recomendo fazer o código do site na mão mesmo.

 

Estude os links que vou te passar a seguir que você vai entender como funciona o trabalho com as div´s.

CSS Link Colection

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

É isso mesmo, código gerado automaticamente naum rola, tem que ser feito por você mesmo, estude o que o gio passou http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Nossa.. é tanta coisa que, quando eu terminar de ler ja estarei com a idade do Maurício Samy, espero que com o conhecimento também rs...Sobre fazer os códigos, esse postado acima foi feito a mão.Criei as Divs e as regras. porém todo o efeito do layout está nas imagens e acho que esse é meu maior problema, criar esses efeitos todos no css. Eu sei que é o melhor que eu tenho a fazer, porém, ainda levo a construção de sites como um trabalho extra, pois trabalho em uma empresa das 7 ás 17, e depois disso aprendo e crio sites, mas agora vou sair de minha empresa atual e tenho 3 sites pra fazer até meados de março, seria complicado aprender css e ainda fazer os três até a data prevista. Eu acho que eu vou ter que fazer esses em tabelas e paralelamente ir aprendendo css. posteriormente poderei contatar esses meus atuais clientes e fazer uma proposta de troca de site para um site mais "limpo", cobrando apenas uma "taxa" a mais, tudo em prol de uma Web melhor. O que acham dessa idéia, aplicar meus conhecimentos agora e paralelamente ir aprendendo css? Pois agora os sites seram, por enquanto a minha única fonte de renda...Aguardo opiniões.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Faça isso mesmo, e va aprendendo...

Não se preocupe, naum demora tanto assim naum, em 2 semanas de intensivo você ja ta cm todo o conhecimmento na cabeça, aeh eh soh tentar aplicar e ir dominando o negocio.

 

http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

Nesse tuto eu mostro toda a montagem de um layout css, eh interessante você dar uma olhada e ver como funciona a montagem de um layout css de verdade

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Então.. voltando ao assunto.. teria como eu fazer o menu funcionar no caso acima?Tipo.. quando você faz pelo fireworks e exporta pro dw ele cria como tabelas e com o menu funcionando, está certo que ele usa um java script.Mas e se eu fizesse como eu fiz com o código acima só que usando divs?Criando uma div pra cada item do menu, pra cada slice do layout?Eu testei aqui e deu certinho, tudo ficou no lugar certo, até fiz ele ficar centralizado idependente da resolução e resolvendo o bug do IE, porém o menu não ficou funcional, eu sei que com java eu conseguiria facilmente faze-lo funcionar, uma vez que eu tenho as imagens do menu normal, over, e active. porém não sei nada de js para faze-lo funcionar. To achando que, enquanto eu não aprender css, terei que continuar construindo com tabelas. rsrs.Se conseguirem resolver isso eu agradeço, mas só pelo fato de terem me dado uma luz sobre esse assunto eu já me sinto satisfeito. Obrigado a todos.Diego.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

.:: Pegasus ::., que bom que a ajuda serviu.

 

Olha só, tem alguns tipos de menus que você encontra aqui no fórum, e tb tem no site do maujor.

você pode dizer como é o menu que você quer?

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Desisti gio.. até onde eu tinha posicionado as divs estava tudo certinho, porém só consigo se for posicionamento absoluto.Como tenho que entregar o site resolvi deixar com tabelas mesmo... Mas obrigado pela intenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Reis    1

Fabio Reis
Postado

1 - Meu site era feito em tabelas células uma poluição total, tabelas com bordas coisa feia mesma. Tudo deu pra ser feito no css, toda imagens, com uma simples modificação no css é possivel reestruturar o site. Então você fez certo.

 

2 - Bem amigão eu tinha um menu feito em java script que dava ação a um célula de tabela que mudava de cor, com um pouco de estudo e muito fórum webmaster e maujor consegui fazer ele perfeitamente em css, então não se preocupe você consiguirá fazer ele sem usar java script.

 

3 - Quanto ao posicionamento tem esse artigo aqui no imasters,segue ele direitinho que você vai conseguir se tiver algum erro,reveja o css talvez algo esteja escrito errado, sofri pq esqueci um "-" uma vez:

http://www.imasters.com.br/artigo.php?cn=3638&cc=280

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Bom pessoal, como eu disse a vocês.. eu tenho que entregar o site...

Fiz em tabelas, sei que não é o certo mas tenho que entregar..

mas vou tentar fazer com divs sim.. vou ler os artigos do site e procurar no maujor.com também e tentarei com divs, vou pegar como um desafio pra mim. coloquei abaixo a imagem de como é o layout.

Imagem Postada

Ali na reta do topo e menu eu consegui numa boa usando relative, mas quando tentei colocar a outra metade da imagem na frente do menu que começou a dor de cabeça.. vou seguir os tutoriais que me passou e tentarei aqui mesmo.

Caso consiga eu mostro pra vocês como eu consegui.. quem sabe assim os outros 2 que ainda me faltam fazer eu já não faço com Css!.. Obrigado novamente pelo incentivo.

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spider Web    0

Spider Web
Postado

não amigo..rs pra você usar as divs você vai continuar fazendo com css, só vai parar de fazer com tabelas. tipo eu usaria o seguinte nesse site.topo - fixorodapé - fixoesses são faceise conteudo com 2 divs - esquerda e direita com tamanho definido em px.não tem erro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

não amigo..rs pra você usar as divs você vai continuar fazendo com css, só vai parar de fazer com tabelas.

 

tipo eu usaria o seguinte nesse site.

 

topo - fixo

rodapé - fixo

esses são faceis

 

e conteudo com 2 divs - esquerda e direita com tamanho definido em px.

 

não tem erro.

Mas o menu acima é rollover... a minha idéia é mais ou menos assim..

Imagem Postada

Ai.. aqueles quadradinhos entre o conteudo01 e o conteudo02 são as bordas, para que, quando eu adcionar mais conteudo não quebre o layout. assim eu posso fazer uma página infinita na vertical que não quebrará o layout.

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Nossa.. perfeito!!!

Bom.. agora não tem nem como eu inventar uma disculpinha de que não daria pra fazer esse layout em css..

Bom.. antes de ver o que você fez eu já estava tentando fazer aqui, como eu mostrei em meu último tópico, as imagens estavam todas fatiadas, começei a tentar com divs. e olha no que deu.

Imagem Postada

Abaixo segue o código css e html.

 

CSS

#geral {	background:#FFFFFF;	width:760px;}.menu {	float:left;	width:209;	height:19;}#menucompleto {	width:209px;	height:76px;	float:left;}#topo02 {	float:right;	width:551px;	height:76px;}#barramenu {	width:760px;	height:12px;}#barraconteudo {	margin:0;	padding:0;	background:#FFFFFF;	width:760px;	height:50px;}#barraesquerda {	float:left;	background:#FFFFFF url(SITE 2/images/slice_barraesquerda.jpg) repeat-y;	width:8px;	height:50px;}#conteudoesquerdo {	float:left;	width:194px;	height:50px;	background:#FFFFFF url(SITE 2/images/slice_conteudoesquerdo.jpg) repeat-y;}#barracentral {	float:left;	background:url(SITE 2/images/slice_barracentral.jpg) repeat-y;	width:13px;	height:50px;}#conteudocentral {	float:left;	width:537px;	height:50px;	background:url(SITE 2/images/slice_conteudoprincipal.jpg) repeat-y;}#barradireita {	background:url(SITE 2/images/slice_barradireita.jpg) repeat-y;	float:right;	width:8px;	height:50px;}#rodape {	width:760px;	height:26px;}</style>
HTML
<body><div id="geral"><div><img src="SITE 2/images/slice_topo.jpg" width="760" height="92" /></div><div id="menucompleto"><div><img src="SITE 2/images/hendrikx_r2_c1.jpg" width="209" height="19" /></div><div><img src="SITE 2/images/hendrikx_r3_c1.jpg" width="209" height="19" /></div><div><img src="SITE 2/images/hendrikx_r5_c1.jpg" width="209" height="20" /></div><div><img src="SITE 2/images/hendrikx_r9_c1.jpg" width="209" height="18" /></div></div>  <div><img src="SITE 2/images/slice_topo02.jpg" width="551" height="76" /></div>  <div id="barramenu"><img src="SITE 2/images/slice_barratopo.jpg" width="760" height="12" /></div>  <div id="barraconteudo">	  <div id="barraesquerda"></div>	<div id="conteudoesquerdo">Esse é um teste pra ver se agora irá quebrar o meu querido layout..	eu sei que pode parecer estranho, mas infelizmente esse é só um teste e será deletado assim que eu ver que funcionou.</div>	<div id="barracentral"></div>	<div id="conteudocentral">Esse é um teste pra ver se agora irá quebrar o meu querido layout..	eu sei que pode parecer estranho, mas infelizmente esse é só um teste e será deletado assim que eu ver que funcionou.</div>	<div id="barradireita"></div>  </div>	<div id="rodape"><img src="SITE 2/images/slice_rodape.jpg" width="760" height="26" /></div> </div>  <br />  <br /></div></body></html>
E olha que eu nem tentei ainda fazer o rollover, sem aquele home/contato, simplesmente tentei "encaixar as coisas" e adcionar conteúdo, bom.. já é um começo, pelo menos as coisas se encaixaram. se conseguirem analizar o que eu fiz de errado.

Obrigado Maurício por me mostrar que Css é a melhor forma de se fazer um site.

Em breve vou hospedar os arquivos pra quem quiser ir estudando e (ou) tentando.

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito