Desarrollo de Plantilla Web con CSS, Formularios HTML y PHP

Después de revisar los ejemplos, Se propone la práctica de CSSHTML PHP por medio del desarrollo de una plantilla web que contenga varias páginas además de su archivo index.html y estilos.css.

Las lecturas previas para desarrollar esta plantilla son las siguientes:



Realmente es una plantilla sencilla, recomendada para una clase de HTML de nivel intermedio, ya que una clase de HTML básico sería por ejemplo el uso de etiquetas de formato general, pero en este caso incluimos CSS, para dar un paso más allá de los frame, Todos sabemos que en la actualidad la estructura de los sitios web se trabaja con DIV, para que sigas trabajando una plantilla a tu gusto, al final puedes descargar el ejemplo en archivo comprimirdo que puedes descomprimir en cualquier parte de tu PC. Por el momento no necesitarías copiarlo en la carpeta HTDOCS de Xampp.

en siguiente actualización agregaremos el paso de variables en archivo PHP. En ese momento ya necesitaríamos de Xampp y su servicio de Apache iniciado.


Plantilla Web CSS, HTML y PHP.


Archivos de la Plantilla Web.


Nombre
Descripción
estilos_div.css
Archivo de configuración de estilos para la plantilla.
index.html
Página principal donde se llaman los DIV incluidos en el archivo estilos.css
principal.html
Se debe mostrar por efecto al iniciar el sitio o al dar clic en enlace “Principal”.
datos_personales.html
Formulario con los controles necesarios para solicitar el ingreso de datos personales.
datos_academicos.html
Formulario con los controles necesarios para solicitar el ingreso de datos académicos.
personales.php
Archivo PHP que procesa los datos recibidos del formulario datos_personales
académicos.php
Archivo PHP que procesa los datos recibidos del formulario datos_academicos
logo_menu.jpg
Buscar una imagen de al menos 400x280 px para ser usada en el DIV de menú.
fondo_principal.jpg
Buscar una imagen de al menos 800x380 px para fondo de la página principal.
 

Dimensiones y nombres de los DIV de la Plantilla Web


Aparte de los DIV el archivo estiloss CSS puede contener más propiedades, como por ejemplo para el body.

body{

            padding:20px;
            margin:20px 60px;
            font-family:Arial;
            font-size: 18px;
            background-color:silver;
}


Diseño de la Plantilla Web, Nombres de los DIV

Plantilla-CSS-Formulario-Dimenciones-Div1

Dimensiones de los DIV de la Plantilla de ejemplo con CSS, HTML y PHP
Fuente: Elaboración propia


Archivo (index.html) principal para llamar los DIV

El archivo utiliza cinco cajas DIV, para la estructura de la pagina.



<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Plantilla CSS</title>
  
<link type="text/css" rel="stylesheet" href="estilos-formato.css" />

<link type="text/css" rel="stylesheet" href="estilos-div.css" />

<link type="text/css" rel="stylesheet" href="styles.css" />

</style>
  
</head>
  
<body>

<div class="principal">
<div class="encabezado"> 
<h1><center>Plantilla CSS y Formularios HTML con PHP</center></h1>
</div> 

<div class="pagina">
 
<div class="menu">
<center><br>
<img src="logo-menu.jpg" alt="image" width="200px" height="150px">
</center>  

<ul>
<li><a href="index.html">Principal</a></li>
</ul>  

<ul>
<li><a href="datos-personales.html" target="formulario">Datos Personales</a></li>
</ul>
 
<ul>
<li><a href="datos-academicos.html" target="formulario">Datos Academicos</a></li>
</ul>
 
<ul>
<li><a href="desarrollador.html" target="formulario">Desarrollador</a></li>
</ul>  
</div>  
 
<div class="contenido">
<br/>
<iframe src="principal.html" style="width: 90%; height: 90%" name="formulario"></iframe>
</div>
 
</div>

</div>
    
</body>
</html>



Archivo (estilos_div.css) para crear los DIV






body{

padding:20px;
margin:20px 60px;
font-family:Arial;
font-size: 18px;
background-color:silver;
}

.principal{
width: 95%;
height: 720px;
background-color: white;
margin: 15px 15px 15px 15px;
border:1px inset purple;
}

.encabezado
{
width: 97%;
height: 100px;
background-color: D0FA58;
margin: 15px 15px 15px 15px ;
border:1px inset purple;
}

.pagina{
width: 97%;
height: 550px;
background-color: D0FA58;
margin: 15px 15px 15px 15px ;
border:1px inset purple;
text-align:center;

}

.menu{
width: 20%;
height: 500px;
background-color: D0FA58;
margin: 15px 15px 15px 15px ;
float: left;
border:1px inset purple;
text-align:left;

}

.contenido{
width: 73%;
height: 500px;
background-color: D0FA58;
float: right;
margin: 15px 15px 15px 15px ;
border-color: black;
border:2px;
border:1px inset purple;
font-family:Arial;
font-size: 10px;

}


Archivo (principal.html) página de inicio en la plantilla


Es una página que puede personalizarse al gusto del desarrollador.

<!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=iso-8859-1" />
<title>Plantilla CSS</title>

  <link type="text/css" rel="stylesheet" href="estilos-formato.css" />
  <link type="text/css" rel="stylesheet" href="styles.css" />

</head>

<body>
<center>
<h1>PAGINA PRINCIPAL</h1><br>  
<center><br>
 <img src="fondo-principal.jpg" alt="image" width="600px" height="300px">
</center>  
</center>  
</body>
</html>

Vista de la página principal
Plantilla-CSS-Formulario-Dimenciones-Div
Diseño de la Plantilla de ejemplo con CSS, HTML y PHP

Fuente: Elaboración propia

Formulario de Datos Personales


El formulario de datos personales incluye 8 controles web:

Control Web
Descripción
Nombres
Tipo Text
Apellidos
Tipo Text
Telefono
Tipo Text
Correo
Tipo Text
Sexo
Tipo Radio
Habilidades
Tipo Checkbox
Enviar
Botón tipo Submit
Borrar
Botón tipo Reset


Vista de formulario datos académicos
Plantilla-CSS-Formulario-Datos-Personales




Códigos del Formulario de Datos Personales


Código HTML datos_personales.html

<html >
<head>


<title>Plantilla CSS</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />  
<meta name="revisit-after" content="3 days" />

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<h1>Datos Personales</h1>
</div>


<center>   

<div id="container">

<form method="Post" action="personales.php"  name="parcial">

<table border="1" width="70%">
    
    <tr>
        <td id= "etiqueta">Nombres: </td>
        <td> <input type="text" name="nombre" size="40"> </td>
    </tr>
    <tr>
        <td id= "etiqueta">Apellidos: </td>
        <td> <input type="text" name="apellido" size="40"> </td>
    </tr>
<tr>
        <td id= "etiqueta">Telefono: </td>
        <td> <input type="text" name="telefono" size="20"> </td>
    </tr>
<tr>
        <td id= "etiqueta">Correo: </td>
        <td> <input type="text" name="correo" size="30"> </td>
    </tr>   
    
    <tr>
        <td id= "etiqueta">Sexo: </td>
        <td>
             Masculino:
             <input type="radio" name="sexo" value="masculino">
             Femenino:
             <input type="radio" name="sexo" value="femenino">
         </td>
      
    </tr>

<tr>
<td id= "etiqueta">Habilidades</td>
<td>
Cantar:

<input type="Checkbox" name="habilidad" value="Te Gusta Cantar">
Tocar Guitarra:
<input type="Checkbox" name="habilidad" value="Te Gusta Tocar Guitarra">
</td>
</tr>
</table>

  
<input type="submit" name="enviar" value="Enviar" OnClick="validacion()">

<input type="reset" name="borrar" value="Borrar"> 

<br/>
  
</form>
</center>
</div>
</body>
</html>


Código PHP

Vamos a incorporarlo luego...

Formulario de Datos Académicos


El formulario de datos académicos incluye 7 controles web:

Control Web
Descripción
Código
Tipo Text
Carrera
Select (Lista desplegable)
Asignatura Preferida
Select (Lista desplegable)
Te Gusta
Tipo Radio
Comentatio
Tipo Textarea
Enviar
Botón tipo Submit
Borrar
Botón tipo Reset

Vista de formulario datos personales
Plantilla-CSS-Formulario-Datos-Academicos




Código del Formulario de Datos Académicos



Código datos_academicos.html


<html >
<head>

<title>Plantilla CSS</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />  
<meta name="revisit-after" content="3 days" />

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<h1>Datos Academicos</h1>
</div>


<center>   

<div id="container">

<form method="Post" action="academicos.php"  name="parcial">

<table border="1" width="70%">

<tr>
<td id= "etiqueta">Codigo: </td>
<td> <input type="text" name="codigo" size="20"> </td>
</tr>  
<tr>
<td id= "etiqueta"> Carrera: </td>
<td>
<select name="carrera">
<option value="ISR"> Ingenieria en Sistemas y Redes </option>
<option value="LC" selected>Licenciatura en Computacion</option>
<option value="TE"> Tecnico en Ingenieria</option>
<option value="TP"> Tecnico Programador </option>
</select> 
</td>
</tr>   
<tr>
<td id= "etiqueta"> Asignatura Preferida: </td>
<td>
<select name="asignatura">
<option value="Programacion Web" selected> Programacion Web</option>
<option value="Metodos de Investigacion"> Metodos de Investigacion</option>
<option value="Ingles"> Ingles</option>
<option value="Ingenieria de Software"> Ingenieria de Software </option>
<option value="Base de Datos I">Base de Datos I</option>
</select> 
</td>
</tr>
<tr>
<td id= "etiqueta">Prefieres: </td>
<td>
Clase Teorica:
<input type="radio" name="clase" value="Clase Teorica">
Clase Practica:
<input type="radio" name="clase" value="Clase Practica">
</td>
</tr>


<tr>
<td id= "etiqueta">Comentarios</td>
<td>
<br>
<textarea name="comentario" cols="40" rows="4"></textarea>
</td>
</tr>    

</table>


<input type="submit" name="enviar" value="Enviar" OnClick="validacion()">
<input type="reset" name="borrar" value="Borrar"> 
<br/>

</form>
</center>
</div>
</body>
</html>


Código PHP

Vamos a incorporarlo luego...


Agregar página de desarrollador.


Vista de la página desarrollador


Plantilla-CSS-FormularioHTML-PHP-Desarrollador


Ejemplo de Plantilla HTML y CSS

Loading...