Ir para conteúdo

POWERED BY:

Arquivado

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

Rafael Biagioni

Fatiar layout no Fireworks e converter em HTML/CSS

Por , em Desenvolvimento frontend

Recommended Posts

Rafael Biagioni    0

Rafael Biagioni
Postado

Olá,

Estou tentando fatiar um layout que criei no Fireworks e converte-lo para HTML/CSS usando o Dreamweaver.

Eu já tenho o layout pronto em um arquivo PNG e vou posta-lo aqui no forum:

http://www.4shared.com/photo/C9aegRBf/layout_vermelhofw.html

É este.

Eu sei o básico do CSS e não sei como fazer. Vocês poderiam me ajudar?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo2605    10

marcelo2605
Postado

Rafael, o seu layout é simples. Dá para fazer muita coisa com CSS sem a necessidade de carregar imagens.

 

Mas para isso você precisa ter uma noção de HTML/CSS.

 

Se você criou esse layout no Fireworks, pode até tentar exportar para HTML. Mas o resultado não é 100%.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

a dica que dou pega a imagem, e faz o site toda na mao.

 

cortar e exportar cria muito lixo, e dificulta em futuras alteracoes.

 

Devo tentar utilizar apenas CSS para criar divs e importar imagens como o logotipo e as fotos dos produtos?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Biagioni    0

Rafael Biagioni
Postado

Estou tentando criar o layout utilizando somente divs e carregando as imagens como o logo, as fotos dos produtos... Está ficando bom por enquanto, caso eu tenha dúvidas ou encontre problemas, posto aqui.

Obrigado.

 

Estou tentando criar colunas no meu layout. A primeira seria a coluna do menu e a segunda a coluna do banner e dos produtos. Mas, não estou tendo muito sucesso.

Eis o código que fiz:

 

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-repeat: x;
margin:0;
padding:0;
background-image:url(Imagens/fundo.jpg);
}

#topo1 {
width: 1070px;
margin:0 auto;          
}

#topo2 {
margin-top:-25px;
padding: 21px;
}

#conteudo {
width: 1070px;
margin:0 auto;    
}

#menu {
float:left;
width: 229px;
padding-left: 21px;
}

#banner {
background-color: #D8D8D8;
width: 832px;
height: 131px;
text-align: center;
float:left;

}

#conteudo #banner h1 {
margin-top:50px;	
font-family: Verdana, Geneva, sans-serif;
}
</style>

</head>

<body>

 <div id="topo1">

   <div id="topo2">
   <img src="Imagens/logo.fw.png" width="213" height="187" /> 
   </div>

 </div>

 <div id="conteudo">

 	<div id="banner">
   <h1>BANNER</h1>
   </div>

   <div id="menu">
   <img src="Imagens/menu.gif" width="229" height="742" />
   </div>

 </div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglasdeodato    2

douglasdeodato
Postado

mostra uma imagem do que você quer fazer

 

Estou tentando criar colunas no meu layout. A primeira seria a coluna do menu e a segunda a coluna do banner e dos produtos. Mas, não estou tendo muito sucesso.

Eis o código que fiz:

 

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-repeat: x;
margin:0;
padding:0;
background-image:url(Imagens/fundo.jpg);
}

#topo1 {
width: 1070px;
margin:0 auto;          
}

#topo2 {
margin-top:-25px;
padding: 21px;
}

#conteudo {
width: 1070px;
margin:0 auto;    
}

#menu {
float:left;
width: 229px;
padding-left: 21px;
}

#banner {
background-color: #D8D8D8;
width: 832px;
height: 131px;
text-align: center;
float:left;

}

#conteudo #banner h1 {
margin-top:50px;	
font-family: Verdana, Geneva, sans-serif;
}
</style>

</head>

<body>

 <div id="topo1">

   <div id="topo2">
   <img src="Imagens/logo.fw.png" width="213" height="187" /> 
   </div>

 </div>

 <div id="conteudo">

 	<div id="banner">
   <h1>BANNER</h1>
   </div>

   <div id="menu">
   <img src="Imagens/menu.gif" width="229" height="742" />
   </div>

 </div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Rafael, seu tópico não são somente algumas dúvidas simples, mas sim um claro pedido de ensinamentos e lições básicas de HTML/CSS. Para evitar que o tópico torne-se cansativo, ou até mesmo que você não desanime com a não participação dos outros membros, eu recomendo seriamente que você leia materiais já prontos da área (e que estão disponíveis em abundância pela internet). Sim, você terá de se basear em "tutoriais" (como "Layout de duas colunas", repetido em vários sites da área).

 

Sites que recomendo:

 

http://forum.imasters.com.br/forum/140-artigos-tutoriais-e-materias-webstandards/

http://www.maujor.com/

http://tableless.com.br/

 

GL. :thumbsup:

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