Tutorial web Ingeniero Marcos Duarte Ribero UDI

Primero vamos a crear nuestra primera plantilla por medio de dreanveawer lo que tenemos que hacer es iniciar el programa seguido vamos a darle nuevo pgina HTML como aparece en la imagen 1.

Imagen 1. Despus de iniciado entramos a diseo como lo muestra la imagen 2.

Seguido vamos a crear nuestro sitio para realizarlo vamos al disco c/ seguido le damos clic en la carpeta wamp, le damos clic en la carpeta www y hay creamos una carpeta para este caso una que se llame ejemplo es donde vamos a guardar nuestro sitio.

Regresamos a dreanveawer y vamos a la barra de tareas que est en la parte superior y le damos clic en sitio, seguido new sitio o nuevo sitio y l nos botara la siguiente ayuda como lo muestra la imagen 3.

Imagen 3. En esta imagen muestra que salen tres opciones site name o nombre del sitio ac le colocamos el que vamos a querer en este caso ejemplo en la parte de abajo aparece local site folder que es donde se encuentra nuestra carpeta para que se nos guarde todo en esa carpeta. En nuestro caso buscamos c:/wamp/www/ejemplo as debe quedar Ya creado nuestro sitio vamos a la barra de tareas de nuevo le damos file o archivo, le damos guardar como plantilla o (save as template) y nos dar la opcin de guardarla como nos muestra en la imagen 4.

Imagen 4. Nos muestra en primer lugar el sitio ah es donde nos va a guardar nuestra plantilla el programa por defecto nos crea una carpeta templates en nuestro sitio. En la parte de abajo dice existen tamplates es por si ya hay creada una plantilla pues nos la muestra ac. Y por ltimo save as aqu le colocamos nuestro nombre a la plantilla en nuestro caso ser plantilla_ejemplo. Ahora vamos a crear la estructura del sitio en este caso insertamos una tabla de 4 filas por 2 columnas. Alargamos la tabla y la modificamos de acuerdo a nuestras necesidades. Pero antes de todo en la parte inferior le demos en aling la opcin de centrado. Despus de agrandar nuestra tabla en nuestro caso vamos a seleccionar la primera fila le damos clic derecho, le damos tabla y combinar celdas o marge cell. Para que nos quede una sola celda sin divisin como lo muestra en la figura 5.

Figura 5. Bueno ya quedada nuestra estructura quedara ms o menos de la siguiente forma.

Imagen 6

Pero hay que tener en cuenta que cuando vamos a crear una plantilla cuando la insertamos en otras pginas estas no se dejan modificar y como en nuestro caso vamos a trabajar en el men, otros y contenido creamos unas regiones editables que se encuentran en el men de tareas en la parte superior le damos clic en insertar despus templates objects y regin editable en la celda que necesitamos ah le colocamos los nombres y para que quede en toda la celda nos paramos dentro de la regin editable y le damos enter enter hasta que nos llene la celda y quedara como nos muestra en la figura nmero 7.

Figura 7. Le damos archivo o file, guardar todo o save all. Para guardar todos los cambios. Ahora vamos a decirle file, new , o archivo, nuevo para crear una nueva pgina le decimos html y por consiguiente aceptar. Despus le damos fil o archivo save as o guardar como y le vamos a dar el nombre de index.html esta se guardara en la raz del sitio hay que tener en cuenta que este nombre se le da por que en la plataforma web la url el primer archivo que llama es el index. Ahora le vamos a insertar nuestra plantilla al index lo hacemos de la siguiente manera le damos clic en la barra de tareas en editar o modify buscamos al final templates, aplicar templates a esta pgina o apply template to page como nos muestra en la figura 8.

Figura 8 Despus de eso nos muestra las plantillas que tenemos creadas en nuestro sitio en nuestro caso solo una y la seleccionamos como nos muestra la figura 9.

Figura 9.

Y automaticamente nos adjunta la plantilla a nuestra pagina index crearemos dos paginas mas para esto vamos a crear una carpeta con el nombre de scripts en el sitio y realizamos la misma funcion que hicimos con el index pero esta ves las guardamos en nuestra carpeta scripts y le damos guardar como nuevo.html y taller.html y le insertamos nuestra plantilla a estas paginas esto quiere decir que cuando yo quiera cambiarle el diseo a la pagina solo debo ir a mi plantilla y cuando lo cambie el le cambiara a todas las paginas. Bueno ahora vamos a crear nuestro menu y a insertarlo. Vamos a conocer dhtlmenu. Como nos muestra la imagen 10

Imagen 10 En el numero 1 nos muestra la palabra template es donde podemos opservar tipos de menus o prototipos para empezar a crear de un prediseo. En la 2 en el medio aparece la creacion del menu en este casi menu item es como va quedando nuestro menu, en el 3 es donde creamos los menus y sub menus lo hacemos en el caso de los menu principales nos paramos en top level menu le damos clic derecho y app sub menu si

queremos un sub menu de un menu principal pues solo nos paramos sobre el y hacemos lo mismo en la 4 aparece la palabra publish que es donde realizamos funciones para insertar nuestro menu en la pagina mas adelante hablaremos de el en el 5 aperecen las propiedades que le podemos cambiar al menu como color tamao estilo tipo de letra y general que aca se coloca el nombre y la direccion a donde nos debe llevar. En el 6 esta las propiedades de cada uno de los items del punto anterior hablo del 5 como nos muestra la imagen esta name y link en name es donde le colocamos el nomre al menu y en link hacia donde se dirige esto hay que hacerlo con todos los submenus y menus ojo. En el caso de nosotrso crearemos tres inicio iria a index.html, nuevo que iria a nuevo.html y taller que iria a taller.html. Ya creado nuestro menu vamos a darle publish y el nos botara un menu de ayuda en el primero le damos siguiente, en el segundo intem le vamos a dar create as java script Como aparece en la imagen 11.

Imagen 11 Por seguido vamos a guardar nuestros archivos en este caso le vamos a dar en la carpeta scripts le colocamos el nombre en nuestro caso menu hay guardara un archivo que se llamara menu.js que guardara el codigo de nuestro menu con sus direcciones.

Imagen 12 Le damos siguiente hay nos salen dos codigos en java scripts unos es para pegar en el head del formulario y el otro en el body o en nuestro caso donde dejamos el espacio menu.

Imagen 13 Bueno vamos a darle al primero copy all vamos a nuestra plantilla y en el head le pagamos el codigo. Despues del primer head en nuestra plantilla le pegamos el primer codigo como lo muestra la imagen 14.

Imagen 14 Le damos file save all para guardar todo y el nos pedira que actualizemos todos los archivos que contiene la plantilla le decimos que si. Despues cogemos el segundo codigo el que dice pegar en el body le decimos copy all y vamos a nuestro index y a nuestras paginas donde queremos que quede nuestro menu nos paramos dentro de el espacio que dejamos para el menu y cuando estemos parados hay le damos ir a code o code y hay pegamos nuestro codigo. Y le decimos archivo guardar todo. Y en la parte de dhtl menu donde estamos en publish le damos siguiente. Y siguiente hay nos pide otra ves guardar le damos otra ves la direccion de scripts como esta en la imagen 15.

Imagen 15. Y siguiente Depues de esto deberemos repetir los pasos pero no de pegar el codigo solo los de guardar los archivos pero esta ves los guardamos en la raiz del sitio o sea donde esta el index. Y ya con eso el menu debe quedar trabajando. Ahora para redireccionar nuestros primeros archivos abrimos el archivo que quedo en la raiz que se llama menu.js Y hacemos lo siguiente. Le colocamos el nombre de la carpeta donde estan los archivos o sea scripts/nuevo.html donde estan las direcciones como lo muestra en la imagen16

Imagen 16 Y vamos a la carpeta scripts abrimos el archivo menu.js y en donde dice index.html le adicionamos lo siguiente ../index.html como esta en la imagen 17.

Imagen 17.