Hola chicos, bueno miren, hace unos días, estaba hablando con un amigo que tenia muchas ganas de meterse en el mundo de las paginas webs, y me dice:
-Matías, sabes... yo se que estoy aprendiendo poco a poco HTML, pero ese no es mi problema...
-Cual es tu problema?
-Es el diseño, las imágenes, no me llevo bien con nada relacionado con el diseño...
Yo claramente le respondí:
-Mira, yo también, no se usar Photoshop, lo que hago lo hago con Photofiltre, pero el diseño no es todo, y te demostraré que se puede hacer una pagina web simple y sin ningún tipo de imagenes...
Bueno, ayer me puse a hacerlo, obviamente lo primero en lo que pensé era en lo que el quería, y era una web relacionada con la música y poner una radio online, también pensé en que
no podía usar ninguna imagen...Bueno, procedí y como estoy empezando a aprender a usar los divs y no quería liar mas la cosa, lo hice con tablas.
Sin nada mas que decir, para hacer el diseño que les mostraré a continuación lo único que use fue Adobe Dreamweaber, HTML y un poco de CSS...
Codigo HTML:
<!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>Documento sin título</title>
<style type="text/css">
<!--
body {
background-color: #999;
font-family: Tahoma, Geneva, sans-serif;
}
a:link {
color: #000;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #000;
}
a:hover {
text-decoration: none;
color: #F03;
}
a:active {
text-decoration: underline;
color: #000;
}
-->
</style></head>
<body>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#08080A"><p> </p>
<p style="color: #999"> TITULO <span style="color: #666">WEB</span> <span style="color: #C00; font-weight: bold;">AQUI</span></p>
<p> </p></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" height="45" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#666"><table width="676" height="46" border="0" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">INICIO</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">PROGRAMACION</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">LOCUTORES</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">TOP CHART</a></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#222222"><table width="1014" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9"> </td>
<td width="679"><table width="674" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #CCC"> TITULO</td>
</tr>
</table>
<table width="674" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="186" bgcolor="#FFFFFF">Aquí puedes poner un iframe a tu cutenews</td>
</tr>
</table></td>
<td width="314"><table width="310" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #999; font-size: 14px;"> TITULO</td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><table width="308" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 12px">Este box es expandible, puedes poner lo que quieras aquí ;)</td>
</tr>
tr>
<td style="font-size: 12px"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="308" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="310" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #999; font-size: 14px;"> TITULO</td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><table width="308" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 12px">Aqui tambien puedes poner lo que se te apetezca</td>
</tr>
tr>
<tr>
<td style="font-size: 12px"> </td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<p> </p></td>
<td width="12"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Diseñado por <a href="http://elmatii.es/">Matias Yañez</a> ~ <span style="font-weight: bold">Simple HTML 1</span></td>
</tr>
</table>
</body>
</html>
Mostrar Mensajes
