Sitio completo. ¿Cómo agregar un nuevo menú y una nueva página?

Este video tutorial le muestra el modo de agregar un nuevo menú y una nueva página. Debido a la estructura de ficheros común se puede utilizar este tutorial para cualquier plantilla basada en HTML como Plantilla del paquete completo, Plantilla con animación Flash/Swish, la versión estática de plantillas Flash.

1. Abra el archivo index.html de la carpeta ‘site_flash’ para ver la vista previa.

2. Abra el mismo archivo en el programa Adobe Dreamweaver.

3. Encuentre nuestros menus. Copie uno de ellos y péguelo debajo del último elemento del menú.

4. Cambie el título del menú y el fichero ‘html’ que se enlaza con este menú.

5. Vamos a nombrar nuestra nueva página ‘newpage.html’

6. Guarde este fichero.

7. Ahora, tenemos que crear una nueva página.

8. Podemos simplemente duplicar una de las páginas existentes. Seleccione uno de los ficheros ‘html’ y presione CTRL + C para copiar y Ctrl + V para pegar.

9. Por lo tanto, hemos duplicado el fichero "index-2.html" y hemos cambiado su nombre por ‘newpage.html’.

10.Abra el fichero ‘newpage.html’ en Dreamweaver and agregue el elemento del menú (como lo hicimos anteriormente).

11. Ahora vamos a abrir todos los ficheros html (páginas) en Dreamweaver. Hay que añadir el elemento de menú a cada fichero para que nuestro menú sea visible en todas las páginas.

12. Además, en la página nueva nuestro nuevo elemento de menú tiene que incluir un clase "activo". Por lo tanto, vamos a agregar la clase a la opción del menú.

Ahora el menú será "activo" en esta página para los visitantes del sitio. En nuestro caso, este elemento del menú incluirá un subrayado.

13. Guarde todos los archivos.

NOTA: puede ser que un nuevo elemento de menú no esté en su lugar.

Podemos arreglarlo modificando el fichero ‘style.css’.

14. Abra el fichero ‘Style.css’ de la carpeta ‘site_flash/css’ en Dreamweaver.

15. Encuentre el valor ‘margin-left’ de nuestro menú y cambie su valor. Busque este código:

  .menu li {
	float:left;
	position:relative;
	background:url(../images/devider-1.gif)  0 0 no-repeat;
	padding:1px  0 1px 22px;
	margin-left:22px;
  	}
   

Y cambie el valor ‘margin-left’ – aproximadamente 11px:
margin-left:11px;

Guarde este fichero y abra "index.html" en el navegador para ver los cambios.

Siéntase libre de mirar el video tutorial abajo: