Cargando...


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

Haga clic aquí para ver los comentarios 1 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *

Blogs de Tecnología