Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 50

Visitas el mes pasado: 56

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Plantilla (I)

7.1. Contenido

Paso 18

logo miweb

Subir a la red

En los pasos anteriores hemos acabado ya la primera página de nuestra web. Tal como la tenemos sólo la podemos ver nosotros en nuestro ordenador, es decir aunque esta es una página web, no podemos verla en Internet, ya que los archivos que la componen no están en la red.

Si queremos subir nuestro sitio a la red. En la sección Complementos/Publicar en la red de este mismo sitio, indicamos de una forma práctica cómo subir nuestro sitio, que de momento sólo está en nuestro ordenador, a la red Internet.

Ve por lo tanto a esta sección y sigue los pasos que ahí indicamos, estos están explicados a lo largo de las tres páginas de la sección. De esta forma podrás tener tu página y el resto de las que hagamos en Internet.

No vamos a alargarnos más en este tema, ya que viene explicado en esta sección, sin embargo, recuerda, que cada vez que modifiques tu sitio local (el que tienes en tu ordenador), si quieres que ésto se vea también en Internet, debes copiarlo en el sitio remoto (el del servidor).


Utilidad de una plantilla

En muchos sitios web, y en el nuestro también, hay una serie de secciones que se repiten en todas las páginas. En la nuestra, la cabecera, la barra de navegación y el pie de página van a ser igual en todas las páginas. Es por esto que haremos una plantilla que contenga estas secciones.

De esta manera, cuando queramos hacer una página nueva, no tenemos mas que copiar la plantilla y añadirle las partes de la página que son diferentes.


Archivo html

La plantilla que haremos para nuestra web consistirá en la cabecera, la barra de navegación, y el pìe de página, que serán los mismos que hemos hecho en la página de inicio.

Abrimos por tanto la página index.html con el editor de textos, y la guardamos con otro nombre, para ello pulsamos en Archivo / Guardar como (Salvar Como en HTML-Kit), y nos sale el cuadro para guardar el archivo. Le ponemos como nombre plantilla.html.

Una vez que tenemos guardado este archivo, lo abrimos con el editor de texto y modificamos algunas cosas.

La línea de la cabecera en la que enlazamos con el archivo CSS la modificamos, de manera que ahora enlazaremos con otro archivo.

Busca por tanto la línea de la cabecera (etiqueta head) donde pone:

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

Cambiamos aquí la ruta del enlace, es decir, el texto que hemos destacado en rojo, por este otro:

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

El archivo general.css todavía no existe, pero lo crearemos en el siguiente paso, y es el que dará el estilo a las secciones comunes de las páginas de nuestra web.

Lo siguiente que haremos será borrar de la plantilla las partes de la página que no son comunes. La etiqueta body la tenemos dividida en secciones, cada una de ellas empieza por una etiqueta div id. Dejamos tal y como están las secciones div id="cabecera", div id="navegacion" y div id="pie".

Borraremos las secciones div id="texto" y div id="enlaces" y en su lugar pondremos una nueva sección que dejaremos vacía: div id="principal".

El archivo plantilla.html tiene que quedar así:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="general.css" />
    <title>Mi Propia Web</title>
  </head>
  <body>
  <div id="cabecera">
    <img src="../objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Propia Web</h1>	
    <h2>Aprendiendo a construir un sitio Web</h2>
  </div>
  <div id="navegacion">
    <div class="menu"><a href="#">Inicio</a></div>
    <div class="menu"><a href="listas.html">Listas</a></div>
    <div class="menu"><a href="tablas.html">Tablas</a></div>
    <div class="menu"><a href="formulario.html">Formulario</a></div> 
    <div class="vacio"></div>
 </div>
  <div id="principal">

  </div>  
  <div id="pie">
    <div class="col_pie">
      <h4>Sobre este sitio</h4>
      <p>Propiedad de : Nombre Apellido</p>
      <p>Webmaster: Nombre Apellido</p>
    </div>
    <div class="col_pie">
      <h4>Contactos</h4>
      <p>Email : miemail@servidor.com</p>
      <p>Teléfono: 900-00-00-00</p>
    </div>
    <div class="col_pie">
      <h4>En las redes</h4>
      <p>Facebook : (dirección de Facebook)</p>
      <p>Twitter: (dirección de Twitter)</p>
    </div>
    <div class="vacio"></div>
  </div>
  </body>
</html>

Este nuevo rchivo plantilla.html parte de una copia del archivo index.html. DFe este último hemos modificado el enlace al archivo CSS y hemos suprimido las secciones "texto" y "enlaces", sustituyéndolas por la sección "principal". Esto es todo lo que necesitamos para crear el archivo plantilla.html.

De momento el nuevo archivo plantilla.html lo veremos en el navegador como en el siguiente enlace:


Tenemos ya el contenido de las secciones comunes, sin embargo tal como lo vemos aquí no es como queremos que esté en la página. Tal comom ocurría con las secciones anteriores, todo cambia cuando le aplicamos el estilo CSS. Pero esto lo veremos en el siguiente paso.


Estilo y maquetación de las secciones comunes:.

Plantilla: estilo




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com