Haciendo una página Web en HTML.

Zutr4 · January 22, 2007, 12:26:15 PM

Hola bueno jeje, para que te crees una Web estilo Zutr4

Tutorial =< Creando un Template >=

Bueno, será basado en el FrontPage en HTML

Bueno, abrimos el FrontPage y creamos un nuevo documento en blanco.

Clic derecho en la hoja > Propiedades de la página > Fondo => Selecionamos un color de fondo y de letra. (No será el fondo definitorio)

Bueno, ahora crearemos una tabla, En el menú en Tabla > Insertar > Tabla, selecionamos en :

Filas :> 25
Columnas :> 3, 2 o 4, como más guste, yo selecionare 2.

Bueno, ahora acomodamos una parte de la tabla hacia donde queremos el menú, en mi caso el lado derecho (Ustedes ponganlo donde quieran, arriba, izquierdo, derecho, etc)

Hacemos Clic derecho en la tabla y ponemos propiedades de la tabla > bordes 0 > Fondo > color El que desees.

¿Ahora ven a lo que me referia? El color definitorio será el de la tabla, bueno ahora agustemos la tabla la achicamos del lado del menú (Yo el derecho)

Una vez que la tenemos como deseamos, lo centramos:

Clic derecho > Propiedades de la tabla > Alineación > Centro.

Bueno, yo tengo la página de color celeste medio live y la tabla de color gris claro.

Ahora, vamos a decidir como será la Web...

1ro: Donde irá la imágen principal (Logo o Header)
2do: El menú, color de fondo, color letras, color de las categorias.
3ro: El pie, como será
4to: El contenido.
5to: Letra de la Web/Menú

Bueno yo lo decidi que el logo o header irá arriba, la 1ra tabla...

El menú sera de color gris oscuro, el color de las letras lo veré despues cuando coloque el de las categorias que será un azulsito.

El pie será sólo un texto en la ultima tabla con un gris oscuro.

El contenido será text, osea te lo dejo a tí Así lo usan como template.

La Letra de la web será verdana y la del menú también.

El menú lo colocaré en la 3ra tabla. La 3ra tabla será de color gris bien oscuro.

Clic derecho > Propiedades de la celda > Fondo > Más colores, selecionamos > Aceptar

Ahora, escribiremos Menú en esa celda con la letra verdana tamaño 10. Claro negrita y centrado.

De color a el "Menú" (Texto) Se lo puse de Gris bien claro...

Abajo pondremos el color de donde estaran las opciones, yo le pondré un Azul fuerte.

Clic derecho (Selecionando la cantidad de celdas) Opciones de la celda > Fondo < Selecionar > Aceptar.

Bueno ahí escribimos lo que querramos, yo le pondre text a cada una

Con verdana, negrita, tamaño 10 y letra blanca.

Bueno ya tenemos el menu y lo demas, pero que hacer ahora ¿No?

Bueno, el header lo colocamos donde decidamos

En la 1ra tabla yo coloque texto para que lo coloques.

En la 2da tabla, sería genial poner un buscador y un texto que diga la fecha y hora.

Fucionemos la 2da tabla para que quede 1 entera y no en 2

Clic derecho (Selecionando las 2 celdas) Combinar celdas.

Yo sólo colocaré el buscador

Ahora, el header queda feo así sólo...haci que selecionaremos la 1ra celda y la fusionamos

Clic derecho > Combinar celdas.

Ahora vamos Formato > Bordes y sombreados < Selecionamos tamaño y todo > Aceptar.

Yo elegui cuadro > Surco > Tamaño 2.

Al medio nos quedará feo...Así que selecionamos sólo las celdas del centro y las fusionamos.

Clic derecho > Combinar celdas

Las celdas que esten demás las quitamos, las selecionamos y ponemos Eliminar Celdas.

Bueno, luego borramos todo lo que nos quede mal y ya tenemos un template. Este manual no es para que digas wow mirá que cochinada, es para que los que recién comienzan, aprendan a hacer sus propias cosas.

Les dejo mí código, así por las dudas

Code Select

<html>

<head>
<meta http-equiv="Content-Language" content="es-mx">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Pagina nueva 1</title>
</head>

<body bgcolor="#3399FF">

<div align="center">
   <center>
   <table border="0" width="81%" bordercolor="#000000" bgcolor="#C0C0C0" height="463">
      <tr>
         <td width="100%" height="21" style="border-style: groove; border-width: 2" colspan="2">
            <p align="center"><b><font size="7">HEADER/LOGO</font></b></td>
      </tr>
      <tr>
         <td width="100%" height="21" colspan="2"><!--webbot bot="Search"
            S-Index="All" S-Fields="TimeStamp,DocumentK,Weight" S-Text="Busqueda:"
            I-Size="20" S-Submit="Buscar" S-Clear="Restablecer"
            S-TimestampFormat="%d/%m/%y" TAG="BODY" -->
         </td>
      </tr>
      <tr>
         <td width="86%" height="344" rowspan="10">TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
            TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
            <p> </td>
         <td width="14%" bgcolor="#666666" height="21">
            <p align="center"><b><font size="2" face="Verdana" color="#C0C0C0">Menú</font></b></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="21" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="1" bgcolor="#000099"><font face="Verdana" size="2" color="#FFFFFF"><b>text</b></font></td>
      </tr>
      <tr>
         <td width="14%" height="42">
            <p align="center"><b><font face="Verdana" size="2">BANNER</font></b></td>
      </tr>
      <tr>
         <td width="14%" height="19" bgcolor="#666666">
            <p align="center"><b><font size="2" face="Verdana">Témplate powered by
            Zutr4</font></b></td>
      </tr>
   </table>
   </center>
</div>

</body>

</html>

Bueno, saludos.

Tutorial by: Zutr4

Nota: No es a lo wow, pero para la gente que empieza en HTML