Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

Triton

Triton Template (Keep it Simple & Stupid) -> Novo template na página 3

Mensagens Recomendadas

Triton    12
Triton

Bem, como tinha aqui um template n00b que já fiz há algum tempo (quando me iniciei em CSS e XHTML), decidi meter nesta secção para todos gozarem! :P

Nunca tive o mínimo jeito para design e isto deve provar! :)

Primeiro, uma imagem do bicho:

templatesgc2.png

Código fonte:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<title>Triton Template (KISS)</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml" />
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
	<div id="page">
		<div id="header">
			<div id="banner"><img src="banner.jpg" alt="Banner"/></div>
			<div id="menu">
				<ul>			
					<li><a href="index.html">Home</a></li>
					<li><a href="index.html">Projects</a></li>
					<li><a href="index.html">Blog</a></li>
					<li><a href="index.html">Friends</a></li>								
					<li><a href="about.html">Links</a></li>
					<li><a href="index.html">About</a></li>	
				</ul>
			</div>		
			<div id='body'>
				<div id='news'>
                                        ...
				</div>
			</div>
			<div id="footer">
				<div id="copy">
					<p>This page was designed by Triton</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

body {
font-family: Verdana, sans-serif;
color: white;
background-image: url(fundo.jpg);
background-repeat: repeat;
font-size: 12px;
}

p {
    padding-left: 20px;
}

h1, h2 {
    padding-left: 10px;
}

#page {
margin: 50px 25%;
}

#menu ul
{
list-style: none;
padding: 0px;
margin: 0px 0px 0px 2px;
}

#menu li
{
float: left;
padding: 0px 2px 0px 2px;
}

#menu li a
{
background-color: silver;
font-size: 9px;
height: 18px;
float: left;
width: 96px;
border: 1px solid black;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#banner {
background-color: silver;
width: 600px;
height: 75px;
border: 1px solid black;
padding: 4px;
margin: 4px;
}

#news {
margin: 5px;
font-size: 9px;
border: 1px solid black;
background-color: silver;
}

#header {
border: 1px solid black;
background-color: white;
height: 117px;
width: 618px;
}

h1 {
font-size: 12px;
}

#body {
margin-top: 35px;
background-color: white;
color: black;
border: 1px solid black;
width: 618px;
}

#footer {
margin-top: 5px;
font-size: 9px;
color: black;
font-weight: bold;
border: 1px solid black;
background-color: white;
width: 618px;
text-align: center;
}

#copy {
margin: 4px 4px;
border: 1px solid black;
background-color: silver;
}

Dúvido que alguém queira fazer download desta "#$%&, mas pronto... :-[ Download.

Protegido com a licença Creative Commons:

logo_deed.gif

Atribuição-Uso Não-Comercial 2.5

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Triton    12
Triton

Se alterarem e fizerem modificações depois mostrem-me que gostava de ver. :biggrin:

Tens mais jeito do que eu.. :)

O logo no topo da página tá fixe! E sim, fiz download do teu template  :P

Pois, foi feito por um amigo meu designer, tenho de lhe dizer para meter aqui uns templates deles. :)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
pedrotuga    31
pedrotuga

eu curto. Pessoalmente tambem uso este tipo de templates para sites pequenos e informativos. Acho que se torna muito mais eficaz isto do que um esqueleto monstruoso onde está um grão de areia de conteudo.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
David Pintassilgo    5
David Pintassilgo

Boas, não podes/Queres fazer ai 'uma versão' com o fundo a preto/branco? tipo,... iniciar a branco e ir ficando preto e viceversa?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
pedrotuga    31
pedrotuga

David, visitei a tua pagina.

Têm que alterar o template, dêm um margin:auto no contentor principal, de outra forma a página nao fica centrada para tamanhos de tela diferentes daquela para o qual foi idealizada.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Triton    12
Triton

Boas, não podes/Queres fazer ai 'uma versão' com o fundo a preto/branco? tipo,... iniciar a branco e ir ficando preto e viceversa?

Posso tentar, depois já vejo isso. ;)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Triton    12
Triton

esta muito fixe, podes por 1 opção para escolher as cores k o utilizador quer....  :D

bom trabalho

tofas

Para isso iria ter que modificar em muito o site e de momento não tenho tempo para isso, além de que estou a criar outro template. ;)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
AriOps    0
AriOps

Foi só para deixar o pessoal curioso :D

Se hoje tiver paciência eu tento crair uma versão beta aqui para a malta do P@P. :biggrin:

estás a pensar meter aquele modelo que me mostraste aqui? ;)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Triton    12
Triton

Foi só para deixar o pessoal curioso :D

Se hoje tiver paciência eu tento crair uma versão beta aqui para a malta do P@P. :biggrin:

estás a pensar meter aquele modelo que me mostraste aqui? ;)

Sim, ainda me falta transformar umas imagens em vector... :D

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita a nossa Política de Privacidade