Desarrollo de Plantilla Web con CSS, Formularios HTML y PHP
Después de revisar los ejemplos, Se
propone la práctica de CSS, HTML y 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:
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
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
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
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
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
Vista de la página desarrollador
Ejemplo de Plantilla HTML y CSS
Como puedo hacer una plantilla para un hosting parecida a esta http://www.anitoonstv.com/
ResponderBorrar