MixInformatico.com » Html http://www.mixinformatico.com Reforzando tus ideas Sat, 31 Jul 2010 00:47:31 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Javascript – urlencode http://www.mixinformatico.com/2010/05/09/javascript-%e2%80%93-urlencode/ http://www.mixinformatico.com/2010/05/09/javascript-%e2%80%93-urlencode/#comments Mon, 10 May 2010 02:50:00 +0000 dementexmaster http://www.mixinformatico.com/?p=9243 Hay veces en que la función de javascript escape() no es suficiente, como por ejemplo si hay que codificar ‘?’. No sé exactamente cuando ni donde encontré esta función que imita el urldecode de PHP pero migrada a javascript, espero que les sea tan útil como a mi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function urlencode( str ) {
 
 var histogram = {}, histogram_r = {}, code = 0, tmp_arr = [];
 var ret = str.toString();
 
 var replacer = function(search, replace, str) {
 var tmp_arr = [];
 tmp_arr = str.split(search);
 return tmp_arr.join(replace);
 };
 
 // The histogram is identical to the one in urldecode.
 histogram['!']   = '%21';
 histogram['%20'] = '+';
 
 // Begin with encodeURIComponent, which most resembles PHP's encoding functions
 ret = encodeURIComponent(ret);
 
 for (search in histogram) {
 replace = histogram[search];
 ret = replacer(search, replace, ret) // Custom replace. No regexing
 }
 
 // Uppercase for full PHP compatibility
 return ret.replace(/(\%([a-z0-9]{2}))/g, function(full, m1, m2) {
 return "%"+m2.toUpperCase();
 });
 
 return ret;
}
]]> http://www.mixinformatico.com/2010/05/09/javascript-%e2%80%93-urlencode/feed/ 0 Query Multimedia Portfolio – Galería con contenido múltiple http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/ http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/#comments Sun, 04 Apr 2010 19:16:51 +0000 javier http://www.mixinformatico.com/?p=9221

jQuery Multimedia Portfolio un interesante plugin para jQuery que nos permitirá crear un porfolio utilizando una especia de carrusel con contenido múltiple. Para ser claros, en el no solo podremos introducir imágenes, sino que jQuery Multimedia Portfolio nos permitirá también optar por agregar videos en formato “ flv” o audio en formato “ mp3 ”. Esto es sin duda algo que hace a jQuery Multimedia Portfolio realmente interesante. Este plugin detectara automáticamente la extensión del archivo y le inserta el contenido o la funcionalidad correspondiente a cada uno de ellos. Por ejemplo, en el caso de videos, la opción de reproducción.

Ver Demo

Descargas:

Podremos bajar los archivos desde infectedfx o de la web oficial de openstudio

USO :

Como de costumbre lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head > .

JavaScript:

1
2
3
4
5
6
7
8
9
10
11

<link rel=“stylesheet” href=“css/multimedia-portfolio.css” type=“text/css” media=“screen” />
<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/jquery.dimensions.js”></script>
<script type=“text/javascript” src=“js/ui.mouse.js”></script>
<script type=“text/javascript” src=“js/ui.slider.js”></script>
<script type=“text/javascript” src=“js/jquery.multimedia-portfolio.js”></script>
<script type=“text/javascript”>
  $(document).ready(function(){
  $(“ul.multimedia-portfolio”).multimedia_portfolio({width: 500, baseDir: ‘.'});
  });
</script>

y para insertar el contenido, la siguiente estructura

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

HTML:

1
2
3

 <li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML: 

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

Ejemplo: agregar video (flv format) de contenido

HTML: 

1
2
3

<li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML:

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>
]]> http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/feed/ 0 Script para ampliar la funcionalidad de desvanecer cualquier tipo de elemento HTML http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/ http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/#comments Sun, 04 Apr 2010 08:02:41 +0000 javier http://www.mixinformatico.com/?p=9213

Elem Fader es un script que amplía la funcionalidad para desvanecer cualquier tipo de elemento HTML. Dando un efecto bastante agradable al realizar los mouseover sobre cada uno de ellos. Es muy simple de aplicarlo a listas, botones de formularios, inclusive adaptarlo a nuestro Menú con Imágenes.
Ver demos – Descarga demo

Uso.

Lo primero será descargar el script (usar botón derecho y guardar “enlace como”). Lo alojaremos en nuestra carpeta o servidor. Posteriormente llamaremos a esa librería incluyendo el siguiente código entre las etiquetas < Head > …..< /Head > de nuestra Web.

PLAIN TEXT JavaScript: <script language=“JavaScript” src=“JSFX_ElemFader.js” type=“text/javascript”></script>

Ejecutaremos la acción mediante el evento “onload“.

PLAIN TEXT HTML: <body onload=”JSFX.fadeElemAuto()”> Podemos observar que en la etiqueta < body > tenemos el evento onload=” JSFX.fadeElemAuto()” Es decir, que cuando se han terminado de cargar todos los elementos de la página se llamará a una función llamada “JSFX.fadeElemAuto()” que hemos definido en el script.

Aplicado a un menu con imagenes
Creamos nuestro menú como habitualmente lo hacemos con su correspondiente CSS.
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8

 
#menu { height:100px;}
#menu ul { list-style:none; margin:0; padding:0 10px;margin:0  0 0 100px; }
#menu li { float:left; }
#menu li a { display:block; height:40px; width:113px;  background-position:center top; cursor:pointer  }
#menu li#home a { background-image:url(home.gif);  }
#menu li#about a{ background-image:url(about.gif);  }
#menu li#links a { background-image:url(links.gif);  }</div>

Y en nuestra estructura, agregaremos una nueva clase denominada elemFader, la cual nos generara el efecto desvanecido al realizarse el Mouseover entre cada uno de los enlaces.
PLAIN TEXT
HTML:

1
2
3
4
5
6
7

<div  id=”menu”>
<ul>
<li id=”home”><a class=”elemFader” href=”#”></a></li>
<li id=”about”><a class=”elemFader” href=”#”></a></li>
<li id=”links”><a class=”elemFader” href=”#”></a></li>
</ul>
</div></div>


Aplicado a los botones de nuestro formulario
También lo haremos utilizando la clase elemFader
Aplicado a enlaces con css
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.elemFaderCeleste
{
position:relative;filter:alpha(opacity=20);  -moz-opacity:0.2;
display:  block;
border-top     : 1px solid #77CFFB;
border-left    : 1px solid #77CFFB;
border-right   : 1px solid #7BD0FB;
border-bottom  : 1px solid #7BD0FB;</div>
background-color:#7FD4FF;
 
font-family:  Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
text-decoration:none;
 
color:  #FFFFFF;
width:100%;
text-align:left;
}

La estructura, llamando en cada enlace a la clase “elemFaderCeleste”
PLAIN TEXT
HTML:

1
2
3
4
5

<div  style=”width: 80px”>
<a class=”elemFaderCeleste”  href=”#”>Home</a>
<a class=”elemFaderCeleste”  href=”#”>Contacto</a>
<a class=”elemFaderCeleste”  href=”#”>About</a>
</div>

Mas Info javascript-fx
PLAIN TEXT
HTML:

1
2
3
4
5
6

<form>
<input value=”Aceptar”  class=”elemFader” type=”button”>
<input  value=”cancelar”  class=”elemFader” type=”button”>
<input  value=”enviar”  class=”elemFader” type=”button”>
<input  value=”borrar”  class=”elemFader” type=”button”>
</form>
]]> http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/feed/ 0 Codigo malicioso en sitio web iframe http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/ http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/#comments Sun, 04 Apr 2010 07:54:05 +0000 javier http://www.mixinformatico.com/?p=9211 Virus Iframe el virus que se propaga en tu sitio web

¿Virus Iframe? ¿Conocías este virus?, seguramente si eres una internauta promedio utilizando un hosting -como casi todos- nunca habías oído hablar de este virus, pero no te preocupes, te vamos a explicar de qué se trata; En si es un troyano/virus que se instala en nuestro computador y cada vez que nosotros nos conectamos al FTP de nuestra página automáticamente inserta un código en todas nuestras páginas, si, así como lees! como si no fuera suficiente con los virus que podemos llegar a tener en nuestra PC ahora también debemos cuidar nuestras páginas webs.

Los virus iframes se caracterizan por incluir código en las páginas web, este código es en la forma de una iframe invisible que re direcciona al usuario a una web maligna en donde le infecta, a diferencia de otros tipos de malware, este virus requiere de webmasters para propagarse, básicamente lo que hace el virus es esperar por conexiones FTP al servidor, una vez que el webmaster o dueño de un sitio web ha accedido a su sitio vía FTP el virus pasa al sitio web en donde modifica algunas páginas html e inserta un código similar a:

1

<iframe src=”http://sitio_malicionso.xxx” width=109 height=147 style=”visibility: hidden”/>

No importa cuántas veces borremos el código de la web, el virus volverá aparecer, la razón es sencilla:

El PC del webmaster o persona con acceso FTP está infectado y cada vez que se conecta FTP el virus pasa a las páginas web.

A menudo los usuarios de hosting piensan que el servidor donde está su página tiene el virus, pero no es así, el virus está en el propio PC de los usuarios y esto está comprobado por todas los fabricantes de antivirus y en internet podrás observar a través de los buscadores que este es un virus netamente de usuario no de servidor.

Consejos para eliminar este virus:

1-    Limpiar el PC infectado (casi 90% de los usuarios dice por costumbre: NO…PERO TENGO ANTIVIRUS…IMPOSIBLE QUE MI PC ESTE INFECTADO…El afirmar esto es un error muy grave…ya que los antivirus en su mayoría no son capaces de detectar este virus , ya que es solo un código y no algo ejecutable, por lo tanto deja de pensar que tu PC es blindado, NO existe PC blindado!

2-    Asegúrate  de que dispones de un buen antivirus y el mismo se encuentra actualizado y además tengas instalado en tu PC anti-malwares.  ( SOLO ANTIVIRUS NO FUNCIONA)

3-    Usar la herramienta hijackthis para detectar la presencia del virus local.

4-    Ingresa a tu Cpanel, cambia las contraseñas.

5-    Elimina el código malicioso en las páginas web

6-    Si utilizas el FTP FILEZILLA, elimínalo inmediatamente de tu PC, el filezilla es fuente de infecciones. Utiliza otro software ftp pero NO filezilla.

ATENCION:

Este código malicioso también se inyecta en los CMS que no están actualizados!

Joomla es fuente de infecciones graves… POR LO TANTO MANTEN TU CMS SIEMPRE ACTUALIZADO y asegurate siempre de cambiar las contraseñas de administrador de JOOMLA.

Nombre del virus : GUMBLAR

Fuentes: http://en.wikipedia.org/wiki/Gumblar

]]> http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/feed/ 1 Tutorial de cómo instalar wordpress http://www.mixinformatico.com/2010/03/30/tutorial-de-como-instalar-wordpress/ http://www.mixinformatico.com/2010/03/30/tutorial-de-como-instalar-wordpress/#comments Tue, 30 Mar 2010 02:12:30 +0000 javier http://www.mixinformatico.com/?p=9168 Tutorial de cómo instalar wordpress

Usuarios de mix informático aquí les dejo un tutorial de paso a paso como subir y instalar wordpress, solamente tiene que seguir paso a paso como se los indicare:

Paso1: descargar wordpress haciendo clic aquí y descomprimirlo, una vez descomprimido nos quedaran los archivos como se muestran en la siguiente imagen



Paso2: si en caso de que tengamos hosting, tenemos que conectarnos a nuestro ftp con un cliente ftp, les recomiendo flashfxp el cual lo pueden descargar haciendo clic aquí, para conectarse por ftp solo necesitan los datos que le entrega su proveedor de hosting y escribirlos como están en la imagen


tienen que reemplazar los siguientes valores

1
2
3

servidor ftp
usuario
clave

En caso de que no tengan hosting y lo quieran instalar en su localhost, solo copian los archivos, si tienen alguna duda no tarden en consultarla.

Paso3: una vez conectado a nuestro ftp nos aparecera lo siguiente

si se fijan el lado izquierdo son los archivos que descomprimimos, en caso de que a ustedes no le aparescan, tienen que buscar igual como cuando accedemos a una carpeta en nuestro pc, hasta encontrar dichos archivos que descomprimimos y el lado derecho es nuestro hosting, lo que tenemos que hacer nosotros es acceder a la carpeta public_html haciendo doble clic, para los que no saben todo lo que se guarde dentro de dicha carpeta es todo lo que se puede ver mediante nuestro sitio web, por ejemplo si subo una imagen llamada mixinformatico.jpg dentro de public_html, yo la puedo llamar de la siguiente forma en el navegador http://mixinformatico.com/mixinformatico.jpg, depende de nuestro sitio, en caso de que vayamos a instalar wordpress dentro de una carpeta y la visitemos desde el navegador como por ejemplo en mi caso http://mixinformatico.com/wordpress/ tenemos que acceder primero a public_html y despues wordpress.

Paso4: seleccionamos todos los archivos del lado izquierdo en nuestro pc como lo muestra la imagen

Y presionamos el boton de transferir, el que sale seleccionado en la siguiente imagen

ahora tenemos que esperar a que se transfieran todos los archivos que seleccionamos para subir.

Paso5: una vez subido todos los archivos llamamos a wordpress, en mi caso lo subi dentro de una carpeta llamada wordpress dentro de public_html entonces lo tengo que llamar de la siguiente forma http://mixinformatico.com/wordpress y nos aparecera algo como la siguiente imagen

le damos clic en  create a configuration file despues en vamos a ello

paso6: ahora nos pedira los siguientes datos base de datos, usuario de la base de datos y clave de la base de datos, los cuales los creamos en nuestro cpanel, para acceder a nuestro cpanel ingresamos lo siguiente en nuestro navegador http://misitio.cl/cpanel , una vez dentro vamos a mysql base de datos y creamos nuestra base de datos como en la imagen

escribimos el nombre en mi caso wordpress y le damos crear base de datos, despues pulsamos regresar, ahora crearemos el usuario que esta mas abajo donde uno lo puede crear, como lo demuestra la imagen

en mi caso le designe como nombre usuario y clave secreta, le damos en crear  usuario, despues en regresar ahora tenemos que designar dicho usuario a dicha base de datos , lo que tenemos que hacer lo demuestra en la imagen

si se fijan seleccione dicho usuario a la base de datos que cree, ahora le damos en añadir y despues en todos los privilegios  privilegio  y pulsamos hacer cambios y aparecera un mensaje en el cual dice que designamos dicho usuario a nuestra base de datos

paso7: ahora ingresaremos los datos en la instalacion de wordpress como esta representado en la imagen

y le damos en enviar y nos aparecera el siguiente mensaje:

¡Todo correcto! Ya has terminado esta parte de la instalación. WordPress ya puede comunicarse con la base de datos. Si estás listo ahora toca…

pulsamos en iniciar la instalacion  y vamos llenando los campos que nos pide, como nombre del sitio y correo electronico, despues nos entregara nuestro usuario y contraseña para administrar nuestro wordpress, para administrarlo tenemos que acceder a http://nuestrositio.cl/wp-admin

y ingresamos los datos que nos entrego, ojala les resulte y hayan aprendido a instalar wordpress, cualquier consulta no tarden en preguntarla

]]> http://www.mixinformatico.com/2010/03/30/tutorial-de-como-instalar-wordpress/feed/ 3 Como crear una Web Modular http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/ http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/#comments Sun, 28 Mar 2010 02:16:18 +0000 dementexmaster http://www.mixinformatico.com/?p=9100 Que tal users de mix informatico, antes que nada vamos a nesesitar algunos conocimientos previos de los lenguajes php , html y css, cabe mensionar que pueden lograr crear la web modular sin estos conocimientos pero les costara un poco mas de trabajo, bueno para comenzar vamos a crear un archivo php a el cual nombraremos:

Contenido.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?
 switch ($_GET["seccion"]){
 case 'noticias';
 include("modulos/principal.php");
 break;
 case 'linux';
 include("modulos/linux.php");
 break;
 case 'descargar';
 include("modulos/descargar.php");
 break;
 
default:
 include("modulos/principal.php");
 }
 ?>

el metodo de seleccion switch () ya lohempos utilizado en otros lenguajes como java este funciona de la siguiente manera cuando switch recibe un parametro por ejemplo switch(‘miwebprincipal’) se ira comparando en cada caso (case) aver si existe alguno que contenga ese nombre por ejemplo:

1
2
3
4
5
6
7
8
9

<?
$query='miwebprincipal'
switch($query){
//en este caso entrara
case 'miwebprincipal':
//aqui entrara
break;
}
?>

el break; sirve para que no se siga comparando con los demas casos y hay termine de comparar y asi muestra lo que tenga ese caso. Ahora nesesitamos incluir ese Contenido.php a un index o alguna pagina principal entonces creamos:

Index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<!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>Ejemplo de Web Modular</title>
<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family:  arial, helvetica, verdana, sans-serif;
}
 
</style>
</head>
<body>
<center>
<div align="center"><img width="900" height="100" src="imagenes/header.gif" alt="Cabecera" /></div>
<div>
<table width="900" border="0" cellspacing="10" cellpadding="1">
<tr>
<td width="250">
<div>
<div><a href="index.php?seccion=principal"><B>Principal</B></a></div>
<div><a href="index.php?seccion=linux"><B>Apache en Linux</B></a></div>
<div><a href="index.php?seccion=descargar"><B>Descargar Template</B></a></div>
</div>
</td>
<td>
<div>
<div style="border: 0px solid #D1D1D1; OVERFLOW-y: scroll; OVERFLOW-x: hidden; HEIGHT: 400px">
 
<?
include("contenido.php");
?>
</div>
</div>
</td>
</tr>
</table>
</div>
<table width="900" border="2" cellspacing="0" cellpadding="5">
<tr>
<td align="center">Copyright 2010 www.mixinformatico.com</td>
</tr>
</table>
</center>
</body>
</html>

Bueno ya saben la inclusion del contenido la haremos en la parte qeu sutedes gusten del index esto ya sera para lo estetico y lo hacemos de esta forma:

1
2
3

<?
include("contenido.php");
?>

los links para que nuestro contenido sea llamado lo se deven crear asi:

1

<a href="index.php?seccion=principal"><B>Principal</B></a>

este es el Css que hice para mi ejemplo pero ustedes pueden crearlo o modificarlo a su gusto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family:  arial, helvetica, verdana, sans-serif;
}
 
</style>

Aqui les dejo una captura:

Bueno aqui les dejo el demo:
http://webmodular.mixinformatico.com/
Y aqui la descarga:
descargar

]]> http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/feed/ 3