Manual DAW Elaboración de Palntillas

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION
Manual de Asignatura Basado en Competencias Profesionales
APOYO PARA LA ELABORACIN DEL DISEO DEL PROYECTO FINAL DE LA MATERIA DESARROLLO DE APLICACIONES WEB.
Mayo de 2011
ELABOR: UNIVERSIDAD TECNOLGICA AUTORES: MTRA. RUBICELL PINEDA TLLEZ APROB: COMISION NACIONAL ACADMICA DE TIC REVIS: UNIVERSIDAD(ES) TECNOLGICA(S) REVISORES: FECHA DE ENTRADA EN VIGOR :Mayo de 2011
USO DE INCLUDE PARA EVITAR REPETIR UN CDIGO HTML EN VARIAS PAGINAS DEL SITIO Generar las carpetas del proyecto final
PASO1: Ingresar a: C:/wamp/www PASO2: Generar el siguiente esquema de directorio. Ver Figura 1.
MISMO
Figura1. Esquema de directorio .
ELABORAR PLANTILLA PARA EL SITIO WEB

PASO1: 1.1 Disear una pgina con extensin .php llamada encabezado.php dentro de la carpeta includes. 1.2 Disear una pgina con extensin .php llamada pie.php dentro de la carpeta includes. 1.3 Disear una pgina con extensin .php llamada cuerpo.php dentro de la carpeta ProyectoXicotepec. Ver Figura 2.
Figura2. Esquema de directorio y paginas .php.
PASO2: 2.1 En la pagina cabecera.php ingrese el siguiente cdigo. Ver Figura 3. 2
Figura3. Cdigo de la pgina cabecera.php
2.2 En la pagina pie.php ingrese el siguiente cdigo. Ver Figura 4.

Figura4. Cdigo de la pgina pie.php.
2.3 En la pagina inicio.php ingrese el siguiente cdigo. Ver Figura 5.
Figura5. Cdigo de la pgina inicio.php.
2.4 Abra un navegador web y escriba la siguiente URL: http://localhost/ProyectoXicotepec/inicio.php 2.5 La pgina deber visualizarse de la siguiente manera. Ver Figura 6.
Figura6. Pagina web mostrada en el navegador.
PASO3: 3.1 En la pagina inicio.php SUSTITUIR el siguiente cdigo en el lugar del cuerpo de la pgina. Ver Figura 7.
Figura7. Seccin de cdigo a sustituir en la pgina inicio.php.

3.2 Disear pgina con extensin .php llamada pag1.php dentro de la carpeta pag. Ver la Figura 8.
Figura8. Nuevo esquema de directorio y pag1.php.
3.3 En la pgina pag1.php ingresar el siguiente cdigo. Ver Figura 9.
Figura9. Cdigo de la pgina pag1.php.
NOTA. Observe la diferencia entre usar
./ que me indica que desde la ubicacin actual (raz del proyecto)necesito entrar a una
carpeta para encontrar el documento citado en la referencia y ../ se usa cuando el documento en el que estoy citando la referencia se encuentra dentro de una carpeta y necesita salir de esa carpeta para encontrar el archivo citado.
3.6 Al dar clic en el link Ir a pagina 1 deber visualizarse de la siguiente manera. Ver Figura 11.
Figura11. Pagina web mostrada en el navegador. NOTA. Observe como la cabecera y el pie son los mismos en ambas pginas: inicio.php y pag1.php, y se incluyen desde los mismos nicos documentos con el mtodo include( ) o include_once( ) que tiene la misma funcin pero el segundo mtodo realiza una verificacin en el documento buscando que los documentos no se hayan incluido ya. Si los documentos ya han sido incluidos, no los vuelve a incluir a diferencia del primer mtodo .
PASO4 4.1 En la pagina inicio.php AADIR las siguientes lneas de cdigo en el lugar del cuerpo de la pgina. Ver Figura 12.
Figura12. Seccin de cdigo a aadir en la pgina inicio.php.
4.2 En la pagina pag1.php AADIR las siguientes lneas de cdigo en el lugar del cuerpo de la pgina 1. Ver Figura 13.
Figura13. Seccin de cdigo a aadir en la pgina pag1.php.
4.3 Disear pgina con extensin .php llamada pag2.php dentro de la carpeta pag. Ver la Figura 14.
Figura14. Nuevo esquema de directorio y pag2.php.

4.7 Al dar clic en el link Ir a la pagina 1 deber visualizarse de la siguiente manera. Ver Figura 17.

GENERACION DE LA PLANTILLA PARA UN SITIO WEB CON CABECERA Y PIE
PASO1: 1.1 Agregar a la carpeta img del proyecto una imagen llamada cereza.jpg. 1.2 En la pgina cabecera.php ingresar el siguiente cdigo. Ver Figura 19.
Figura19. Cdigo de la pgina cabecera.php.
Figura22. Pagina web mostrada en el navegador. NOTA. Observe como imagen en la pgina de inicio no se muestra, esto se debe a la lnea de cdigo que se muestra en la Figura 19 sombreada de color gris. La instruccin est indicando que las pginas se encuentran dentro de una subcarpeta del proyecto y por lo tanto para insertar la imagen en pag1.php y pag2.php debemos utilizar la sintaxis ..// . Sin embargo para la pagina inicio que se encuentra en la raz de la carpeta de nuestro proyecto deberamos estar insertando la imagen con ./.
PASO2
Para dar solucin a lo anterior tendremos que generar una variable php de tipo cadena, que contenga la cadena de acceso a directorios o subdirectorios del proyecto, dependiendo de donde se encuentre nuestro documento en edicin
2.1. En la pagina inicio.php AADIR las lneas de cdigo sombreada en gris. Ver Figura 23.
Figura23. Seccin de cdigo a aadir en la pgina inicio.php.
2.2 En la pagina pag1.php AADIR las siguientes lneas de cdigo sombreada en gris. Ver Figura 24.
Figura24. Seccin de cdigo a aadir en la pgina pag1.php.
2.4 En la pgina cabecera.php sustituir el siguiente cdigo. Ver Figura 26.
Con estos cambios en el cdigo lo que estamos haciendo es declarar variables php en nuestras pginas del sitio justo antes del include de nuestra cabecera y estas variables van a adquirir la cadena donde se especifica de que manera a acceder a los archivos citado. Como podemos observar son cadenas diferentes por lo que la instruccin img src="<?php echo $ref;?>img/cereza.jpg" estamos permitiendo que de manera dinmica se imprima tambin con cdigo PHP la cadena adquirida de la pagina en ejecucin.
2.5 Ahora vuelva a abrir un navegador web y escriba la siguiente URL: http://localhost/ProyectoXicotepec/inicio.php 2.6 La pgina deber visualizarse de la siguiente manera. Ver Figura 27.
10
PASO3 3.1 Agregar a la carpeta img del proyecto una imagen llamada xico1.png. 3.2 En la pgina pie.php ingresar el siguiente cdigo. Ver Figura 28.
Figura29. Pagina web mostrada en el navegador. NOTA: Observe nuevamente como imprimimos la cadena de acceso a los directorios con la misma variable $ref; ACTIVIDAD: Genere el cdigo php necesario para que de manera dinmica las pginas adquieran el valor para la etiqueta <TITLE></TITLE> y LA CADENA para pasar como parmetro a la funcin INCLUDE_ONCE( ) validando si existe un variable con la cadena necesaria o si no.
11

PASO4 4.1 Agregar a la carpeta img del proyecto imgenes con los siguientes nombres:
Nombre B1 B2 B3 B4 k1 k2 k3 k4 v1 v2 v3 v4 Extensin .jpg .jpg .jpg .jpg .jpg .jpg .jpg .jpg .jpg .jpg .jpg .jpg
4.2 En la pgina pag1.php ingresar el siguiente cdigo. Ver Figura 30. <div> <h1>Esta es la primera página de nuestro Sitio Xicotepec Digital</h1> <table width="50%" border="1" cellspacing="0" bordercolor="#ff00ff"> <tr bgcolor="pink"> <td colspan="4" scope="col"> <div align="center"> <p class="Estilo1">Catálogo</p> <p> <strong>¡Bienvienidos a nuestro catálogo!</strong> <br> <br> </p> </div> </td> </tr> <tr> <th scope="row"> <div align="center"><img src="<?php echo $ref;?>img/k1.jpg" width="100" 12

height="100"></div> </th> <td> <div align="center"><img src="<?php echo $ref;?>img/k2.jpg" width="100" height="100"></div> </td> <td> <div align="center"><img src="<?php echo $ref;?>img/k3.jpg" width="100" height="100"></div> </td> <td> <div align="center"><img src="<?php echo $ref;?>img/k4.jpg" width="100" height="100"></div> </td> </tr> <tr bgcolor="pink"> <td scope="row"> <div align="center"> <p><strong>Kimono 1</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Kimono 2</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Kimono 3</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Kimono 4</strong></p> 13

<p>Precio</p> <p>$ 135</p> </div> </td> </tr> <tr bgcolor="#ffffff"> <td colspan="4" scope="col"> <div align="center"> <p class="Estilo1"></p> <p> <strong> a</strong> <br> <br> </p> </div> </td> </tr> </table> </div> <a href="pag2.php">Ir a la pagina 2 </a>     <a href="<?php echo $ref;?>inicio.php">Regresar al inicio </a>
4.3 En la pgina pag2.php ingresar el siguiente cdigo. Ver Figura 31. <div> <h1>Esta es la segunda página de nuestro Sitios Xicotepec Digital</h1> <table width="50%" border="1" cellspacing="0" bordercolor="#00ff40"> <tr> <th scope="row"> <div align="center"><img src="<?php echo $ref;?>img/v1.jpg" width="100" height="100"></div> </th> <td> <div align="center"><img src="<?php echo $ref;?>img/v2.jpg" width="100" height="100"></div> </td> <td> <div align="center"><img src="<?php echo $ref;?>img/v3.jpg" width="100" 14

height="100"></div> </td> <td> <div align="center"><img src="<?php echo $ref;?>img/v4.jpg" width="100" height="100"></div> </td> </tr> <tr bgcolor="#ff8040"> <td scope="row"> <div align="center"> <p><strong>Vestido 1</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Vestido 2</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Vestido 3</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> <td> <div align="center"> <p><strong>Vestido 4</strong></p> <p>Precio</p> <p>$ 135</p> </div> </td> </tr> <tr bgcolor="#ffffff"> <td colspan="4" scope="col"> 15

<div align="center"> <p class="Estilo1"></p> <p> <strong> a</strong> <br> <br> </p> </div> </td> </tr> </table> </div> <a href="pag1.php">Regresar a la p´gina 1</a>     <a href="../inicio.php">Regresar al inicio</a>
4.4 En la pgina inicio.php ingresar el siguiente cdigo. Ver Figura 32. <div id="cuerpo"> <h1>Esta es la página de Bienvenida de nuestro Sitios Xicotepec Digital</h1> <table border="1"> <tr > <th colspan="4" scope="row" align="center"> <div> <p>Bienvenidos a Xicotepec Digital </p> <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29 ,0" width="100" height="100"> <param name="movie" value="<?php echo $ref;?>mus/wamba.swf"> <param name="quality" value="high"> <embed src="<?php echo $ref;?>mus/wamba.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="100" loop="false"></embed> </object> </div> </th> </tr> <tr> <td>Categoría 1</td> 16

<td>Categoría 2</td> <td>Categoría 3</td> <td>Categoría 4</td> </tr> <tr> <td><img src="<?php echo $ref;?>img/B1.jpg" width="70" height="70"/></td> <td><img src="<?php echo $ref;?>img/B6.jpg" width="70" height="70"/></td> <td><img src="<?php echo $ref;?>img/B10.jpg" width="70" height="70"/></td> <td><img src="<?php echo $ref;?>img/B4.jpg" width="70" height="70"/></td> </tr> </table> <a href="<?php echo $ref;?>pag/pag1.php">Ir a la página 1</a>     <a href="<?php echo $ref;?>pag/pag2.php">Ir a la página 2</a> </div>
Figura32. Cdigo de la pgina inicio.php.
17
18
19
Figura35. Pagina web mostrada en el navegador. ACTIVIDAD: Tomando en cuenta que cada una de las pginas del sitio empieza siempre con Titular mediante la etiqueta <H1></H1> y que el contenido de estas etiquetas es siempre igual al <TITLE> de la pgina, se considera tambin como cdigo repetido por lo tanto sera recomendable que fuera parte de la cabecera de los documentos Cmo se hara este procedimiento?. Tome en cuenta que tambin debe hacerse una validacin de existencia de variable con el contenido necesario para dar valor a H1 es decir que pasa si no existe una variable con dicho contenido (Utilice una sentencia IF-ELSE).
20
APLICACIN DE UNA UNICA HOJA DE ESTILOS A TODAS LAS PAGINAS DE NUESTRO SITIO DESDE UN ARCHIVO INDEPENDIENTE CON EXTENSION .CSS.
PASO1: 1.1 Verifique que en los <DIV> de los documentos cabecera.php y pie.php existan: <div id=contenedor> Dibuja una capa general que abarca todo lo alto de la pagina y que contendr a los objetos de las otras cuatro (cabecera, navegador, cuerpo y pie). Dibuja una capa que contendr la imagen del logotipo. Dibuja la barra en la que colocaran los links del men. Dibuja la capa que contendr los objetos del cuerpo para las diferentes pginas. Dibuja una barra que contendr la imagen y el Copyright del sitio hasta el final de la pgina.
<div id=cabecera > <div id=navegador > <div id=cuerpo > <div id=pie >
Ver Figura 36.
Figura36. Pagina web mostrada en el navegador. NOTA: Cabe mencionar que por el momento en las pginas no se puede distingue la distribucin ni los colores indicados por los estilos puesto que apenas los vamos a programar. La imagen anterior muestra como quedo la divisin de mis objetos dentro de la pagina web con cada uno d los DIVs que colocamos tanto en cabecera como en pie. Ahora solo falta aplicarles estilos CSS desde un documento externo para que se puedan visualizar as.
21
1.2 Agregar a la carpeta css del proyecto un documento llamado estilo.css. 1.3 Para dar estilo paso a paso a la capa contenedor de nuestra pgina, aadir el siguiente cdigo al documento estilo.css. Ver Figura 37.
Figura37. Cdigo del documento estilo.css.
Lo anterior solo indica que la capa contenedor tendr un ancho de 700 pixeles, que el texto contenido ser alineado a la izquierda y puesto que no sabemos la altura y el contenido de las dems capas que sern contenidas por contenedor le indicamos que ajuste automticamente la altura y los mrgenes.
1.4 Veamos cmo aplicar estos estilos a nuestras pginas web. Tomando en cuenta que todas las pginas de nuestro sitio web mantendrn el mismo estilo, se tendra que repetir la misma lnea de cdigo en todas las pginas, pero ya vimos en temas anteriores que eso no es necesario, bastar con colocar esa lnea de cdigo en el documento cabecera.php para que mediante los include() sea aplicado a cada una de las paginas. Ver Figura 38.
Figura38. Cdigo en la pgina cabecera.php.
1.5 Abra un navegador web y escriba la siguiente URL: http://localhost/ProyectoXicotepec/inicio.php 1.6 La pgina deber visualizarse de la siguiente manera Ver Figura 39. Podemos observar que aun no se aplican colores, estilos de textos, efectos de animacin y alineaciones para ciertos objetos. Esto se debe a que el cdigo de la Figura 37 solo afecta a la capa contenedor, en especial la propiedad margin: auto; que ajusta automticamente los mrgenes entre los bordes de la pantalla y el objeto al mismo tamao, por lo que el objeto contenedor queda centrado junto con todos los objetos que contiene en relacin a los bordes de la pantalla, pero no en relacin a los bordes de la capa que los contiene.
22
1.7 Ahora para dar estilo a nuestra capa cabecera insertemos estas otras lneas de cdigo en nuestro documento estilo.css. Ver Figura 40.
1.8 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa cabecera Ver Figura 41.
23

1.9 Ahora insertemos estas otras lneas de cdigo en nuestro documento estilo.css. Ver Figura 42.
1.10 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que le dibujamos los mrgenes a la imagen de la cabecera Ver Figura 43.
PASO2: 2.1 Para dar estilo paso a paso a la capa navegador de nuestra pgina, aadir el siguiente cdigo al documento estilo.css. Ver Figura 44.
24
2.2 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa navegador. Ver Figura 45.
2.4 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le cambio el color a los links de la capa navegador Ver Figura 47.
25
2.6 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que al colocar nuestro mouse sobre los links el texto cambia a maysculas y aumenta de tamao. Ver Figura 49.
26

PASO3: 3.1 Para dar estilo paso a paso a la capa cuerpo de nuestra pgina, aadir el siguiente cdigo al documento estilo.css. Ver Figura 50.
3.2 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le dio imagen de fondo al cuerpo del documento<body>. Ver Figura 51.
27
3.4 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa cuerpo. Ver Figura 52.
3.6 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que el estilo del texto de nuestro encabezado <H1> ha cambiado. Ver Figura 54.
28
3.8 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que el estilo de la tabla ha cambiado a centrado. Ver Figura 56.
29
3.10 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que el estilo de los links debajo de la tabla ha cambiado de tal forma que los links, links activos, links seleccionados mediante la tecla TAB, y los links visitados sern del mismo color siempre. Ver Figura 58.
Figura58. Pagina web mostrada en el navegador. NOTA: Observe en la figura 57 como los links eran de color purpura puesto que ya haban sido visitados y despus de aplicar el estilo para la etiqueta <A> volvieron a ser azules.
3.11 Ahora insertemos este otro cdigo en nuestro documento estilo.css. Ver Figura 59.
3.12 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que el estilo del link sobre el cual coloco el mouse cambia a color naranja. Ver Figura 60.
30
PASO4: 4.1 Para dar estilo paso a paso a la capa cuerpo de nuestra pgina, aadir el siguiente cdigo al documento estilo.css. Ver Figura 61.
4.2 Al actualizar nuestra pgina deber visualizarse de la siguiente manera. Podemos observar que se le dio imagen de fondo al cuerpo del documento<body>. Ver Figura 62.
31
Figura62. Pagina web mostrada en el navegador. ACTIVIDAD: Observe detalladamente como al aplicar estilos dibujando los mrgenes de la imagen de la cabecera, a la imagen del pie no se le aplicaron los mismos estilos: 1.-Explique porque no ocurri lo expuesto anteriormente. 2.- Elabora una segunda tabla para la pagina y aplique diferentes estilos para ambas tablas, anotando en su cuaderno como quedara el cdigo necesario para el documento estilo.css
32
USO DE FUNCIONES COMUNES PARA EVITAR REPETIR UN MISMO CDIGO PHP EN VARIAS PAGINAS DEL SITIO
PASO1: 1.1 Recuerde el cdigo PHP que utilizamos para obtener de manera dinmica los <TITLE> y los <H1> de cada una de las pginas de nuestro sitio, y que tambin lo podemos utilizar para obtener valores dinmicos para otras ETIQUETAS HTML. Ver Figura 63.
Figura63. Cdigo repetido varias veces en el documento cabecera.php.
Observe como es exactamente el mismo cdigo, la nica diferencia es el nombre de la variable que va a proporcionar las cadenas necesarias. Y para evitar la repeticin de cdigo y que al mismo tiempo nuestros documentos se vean ms limpios y abreviados, recurriremos al uso de FUNCIONES. 1.2 Agregue un documento llamado funcionescomunes.php a la carpeta fun . Ver Figura 64.
Figura64. Documento funcionescomunes.php en la carpeta fun.
33

1.3 Ahora insertemos estas lneas de cdigo en nuestro documento funcionescomunes.php. Ver Figura 65.
Figura65. Cdigo del documento funcionescomunes.php.
1.4 Ahora vayamos a nuestro documento cabecera.php y en todas las partes donde se repeta este cdigo, lo sustituiremos por el nombre de la funcin y su parmetro de entrada ser el identificador de nuestras variables pero como cadenas, es decir sin el signo de $ y entre . Ver Figura 66.
Figura66. Sustitucin del cdigo php repetido en el documento cabecera.php con la funcin parmetro_plantilla .
3.5 Como incluir el documento funciones comunes a nuestras pginas del sitio. Vayamos a todas nuestras pginas de la carpeta pag y agreguemos la siguiente lnea de cdigo sombreada en gris en la imagen. Ver Figura 67.
Figura67. Inclusin del documento funcionescomunes.php en cada pgina del sitio .
Observe que ya tenamos declaradas arriba de nuestro ltimo include las variables que necesitamos pasar como parmetro tipo cadena a nuestra funcin. Obviamente lo mismo ser para todas nuestras pginas del sitio de la carpeta pag. 34

3.6 Para comprobar que nuestra funcin realmente se eta ejecutando con xito, bastar con que nuestras pginas se carguen como deben sin generar cambios en la estructura. Aqu mostraremos un ejemplo del funcionamiento en cuanto a la sustitucin de los valores para el content de DESCRIPTION de nuestra etiqueta <META>. Ver Figura 68.
Figura68. Ejemplo de cmo lo que se ingresa en una variable se pasa como parmetro dependiendo de la pagina que se est ejecutando. ACTIVIDAD: Elabora una TERCERA PAGINA llamada pag3.php para el sitio que aplique los mismos estilos de las pginas anteriores y los includes necesarios para su funcionamiento como parte del sitio web Xicotepec Digital. Anotando en su cuaderno como quedara el cdigo necesario para sta pgina que debe tener la siguiente presentacin. Ver Figura 69
Figura 69. Tercera pgina del sitio.
35

Manual DAW Elaboración de Palntillas

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual DAW Elaboración de Palntillas

Diunggah oleh

Hak Cipta:

Format Tersedia

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Manual de Asignatura Basado en Competencias Profesionales

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura1. Esquema de directorio .

ELABORAR PLANTILLA PARA EL SITIO WEB

Figura2. Esquema de directorio y paginas .php.

PASO2: 2.1 En la pagina cabecera.php ingrese el siguiente cdigo. Ver Figura 3. 2

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura3. Cdigo de la pgina cabecera.php

2.2 En la pagina pie.php ingrese el siguiente cdigo. Ver Figura 4.

2.3 En la pagina inicio.php ingrese el siguiente cdigo. Ver Figura 5.

Figura5. Cdigo de la pgina inicio.php.

Figura6. Pagina web mostrada en el navegador.

Figura7. Seccin de cdigo a sustituir en la pgina inicio.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura8. Nuevo esquema de directorio y pag1.php.

3.3 En la pgina pag1.php ingresar el siguiente cdigo. Ver Figura 9.

Figura9. Cdigo de la pgina pag1.php.

NOTA. Observe la diferencia entre usar

Figura10. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura12. Seccin de cdigo a aadir en la pgina inicio.php.

Figura13. Seccin de cdigo a aadir en la pgina pag1.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura14. Nuevo esquema de directorio y pag2.php.

4.4 En la pgina pag2.php ingresar el siguiente cdigo. Ver Figura 15.

Figura15. Cdigo de la pgina pag2.php.

Figura16. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura17. Pagina web mostrada en el navegador.

Figura18. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura19. Cdigo de la pgina cabecera.php.

Figura20. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura21. Pagina web mostrada en el navegador.

Figura23. Seccin de cdigo a aadir en la pgina inicio.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura24. Seccin de cdigo a aadir en la pgina pag1.php.

2.3 En la pgina pag2.php ingresar el siguiente cdigo. Ver Figura 25.

Figura25. Cdigo de la pgina pag2.php.

2.4 En la pgina cabecera.php sustituir el siguiente cdigo. Ver Figura 26.

Figura26. Cdigo de la pgina cabecera.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura27. Pagina web mostrada en el navegador.

Figura28. Cdigo de la pgina cabecera.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura33. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura34. Pagina web mostrada en el navegador.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Ver Figura 36.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura37. Cdigo del documento estilo.css.

Figura38. Cdigo en la pgina cabecera.php.

TECNOLOGIAS DE LA INFORMACION Y COMUNICACION

Figura39. Pagina web mostrada en el navegador.