Ir para conteúdo

POWERED BY:

Arquivado

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

guih_oliveira10

Visual do site

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

guih_oliveira10    1

guih_oliveira10
Postado

gente é o seguinte

 

estou tentando fazer o meu primeiro template de um site.

 

ja sei css,html, javascript e muito mais.

 

so que nao sei por ende começar

 

outra coisa, vcs criam sites em divs ou em tables?

 

comecei esta semana a fazer um template, ate que deu resultado so que fiz so com cores, sem images e nada de interresante, agora nao sei como colocar um visual nele.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Escola Municipal "Norma Borges Beluco"</title>
<style type="text/css">
body{
	background:#0CC;
}
#topo{
	background:url(topo.gif) no-repeat;
	position:relative;
	width:930px;
	height:30px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	margin-top:15px;
	margin-bottom:15px;
	margin-left:15px;
	margin-right:15px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	color:#666;
	text-align:center;
}
#titulo{
	background:url(titulo.gif) no-repeat;
	position:relative;
	width:930px;
	height:100px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	margin-left:15px;
	margin-right:15px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	color:#666;
	text-align:center;	
}
#menu{
	background:url(menu_1.gif) no-repeat;
	position:relative;
	width:930px;
	height:40px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	margin-top:15px;
	margin-bottom:15px;
	margin-left:15px;
	margin-right:15px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	color:#666;
	text-align:center;
}
#corpo{
	border:10px solid #900;
	width:930px;
	height:1050px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	margin-bottom:15px;
	margin-top:35px;
	margin-left:15px;
	margin-right:15px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	color:#666;
}
#local{
	background:#0F0;
	position:relative;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
}
#menu_2{
	position:relative;
	background:#03F;
	width:250px;
	height:950px;
	margin-top:20px;
	margin-bottom:20px;
	float:left;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
}
#conteudo{
	position:relative;
	background:#0FC;
	width:600px;
	height:950px;
	float:right;
	margin-top:20px;
	margin-left:20px;
	margin-bottom:20px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
}
#rodape{
	background:#060;
	width:930px;
	height:30px;
	margin-top:20px;
	margin-bottom:15px;
	margin-left:15px;
	margin-right:15px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	font-family:"Comic Sans MS", cursive;
	font-size:14px;
	color:#666;
	text-align:center;
}
</style>
</head>

<body>
<div id="topo"></div>
<div id="titulo"></div>
<div id="menu"></div>
<div id="corpo">
  <div id="local">Galeria de fotos > Foto 1</div>
  <div id="menu_2">Menu 2</div>
  <div id="conteudo">Conteúdo</div>
</div>
<div id="rodape">Rodapé</div>
</body>
</html>

ja tentei fazer bordas para colocar nas divs deste template no fireworks, sai ate umas bordas boas, mas na hora de colocar no site sai torto.

 

tem algum site que a gente possa copiar bordas para colocar no site ja prontas?

 

me dem dicas pessoal

 

tem hora que da vontade de desistir de web designer, da vontade de chorar, pq eu nao do conta nem de fazer um site do mais simples, eu sou um panaca mesmo, incopetente.

 

 

mas nao vo desistir

 

 

obrigado por ajudarem

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

tabelas são para dados tabulares e não para layouts!

esqueça elas para layout!

 

quanto as bordas veja se isso te ajuda: http://www.maujor.co.../borderplay.php

 

 

tem hora que da vontade de desistir de web designer, da vontade de chorar, pq eu nao do conta nem de fazer um site do mais simples, eu sou um panaca mesmo, incopetente.

pratica e esforço resolve isso http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

guih_oliveira10    1

guih_oliveira10
Postado

ta o negoço das divs eu ja capitei, mas vcs tem dicas de onde começar a desenvolver um template?

 

começa-se com o css, criando as imagens?

 

outra coisa, como colocar borda nos quatro cantos da div?

eu sei que pode-se usar o border, so que queria usar imagem nas bordas, para elas ficarem arredondadas, ai o background so suporta 1 imagem.

 

pesquisei no google e achei uma forma so que nao funfou nem no firefoz nem no explorer nem no chrome.

 

esse codigo que peguei da net é assim:

 

#seletor{
   background:url(imagem.gif)top left no-repeat , url(imagem2.gif)top rigth no-repeat , url(imagem3.gif) bottom left no-repeat;
}

todas as dicas sao benvindas

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

até onde sei a propriedade de background é uma só

mas você pode usar muitas formas para trabalhar com imagme pelo CSS

MUITAS MESMO!!!!

 

mas va do inicio aprenda o conceito e a estruturação

http://forum.imaster...s-webstandards/

Veja os tutoriais de layout e tal que é o que você aparentemetne mais precisa

 

depois estude:

 

http://maujor.com/

http://maujor.com/tu...joe/cssjoe1.php

http://www.tableless.com.br/

 

qualquer dúvida ou problema poste ai que sempre terá alguém para tentar te ajudar! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

 

bordas arredondadas -> http://maujor.com/tu...l/box-arred.php

 

 

 

para tirar dúvidas sobre as propriedades do CSS, HTML -> http://www.w3schools.com/css/default.asp

 

Nesse site também tem muita coisa sobre SQL, PHP, ASP, etc

muito bom vale a pena favoritar!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

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

  Aceito