-
Cómo actualizar un menú en cada página
-
Aunque existen excepciones, los sitios web modernos rara vez son estáticos. En cambio, la mayoría de los sitios web tienen contenido que cambia con frecuencia y en muchas páginas diferentes, un proceso que puede convertirse rápidamente grandes actualizaciones de páginas web en una empresa de gran envergadura. Una manera de aliviar la carga de mantenimiento es colocar cambiante, o dinámica, el contenido en archivos separados que se incluyen en el contenido estático en tiempo de ejecución. Este procedimiento permite a los desarrolladores web alteran el contenido dinámico en un lugar y reflejan los cambios a través de la página web.Instrucciones
Server Side Include (SSI)
1 Abra un editor de texto y crear un nuevo archivo con el nombre includeme.html. Añadir un (<select>) elemento HTML selecciona para el archivo e insertar tres etiquetas de opción HTML (<option> </ option>). Las etiquetas <option> debe incluir los tres elementos que componen el menú. Cierre la etiqueta de seleccionar y guardar y cerrar includeme.html.
<Select>
<Opción> Coctel de camarón </ option>
<Opción> filete Mignon </ option>
<Opción> Mousse de chocolate </ option>
</ Select>2 Utilice un editor de texto para crear dos archivos denominados include1.shtml y include2.shtml. Añadir un código HTML para los archivos que muestra el texto del encabezado "Menú del día". Coloque la cabecera dentro de etiquetas <body> de cada archivo y utilizar un comando # include para incluir includeme.html.
<Html>
<Head>
<Title> </ title>
</ Head>
<Body>
<H3> Menú del día </ h3>
<! - # Include file = "includeme.html" ->
</ Body>
</ Html>3 Utilice un navegador Web para abrir include1.shtml desde el servidor Web. Verificar que los elementos del menú en pantalla includeme.html en una etiqueta HTML <seleccionar> menú. include2.shtml abierta desde el servidor Web y verifique que se muestra el mismo código HTML <seleccione> Menú.
4 Volver al editor de texto y volver a abrir includeme.html. Añadir una opción adicional (<option> </ option>) y un cuarto elemento al menú <select>. Guardar includeme.html.
<Select>
<Opción> Coctel de camarón </ option>
<Opción> filete Mignon </ option>
<Opción> Mousse de chocolate </ option>
<Opción> opción de la bebida </ option>
</ Select>5 Actualizar include1.shtml en un navegador Web y compruebe que el nuevo elemento se incluye en el menú <select>. Actualizar include2.shtml y verificar que el nuevo elemento se incluye en el menú <select>. Aunque sólo el menú en includeme.html ha cambiado, tanto include1.shtml y include2.shtml mostrar la actualización.
PHP (script del lado del servidor)
6 Abra un editor de texto y crear un nuevo archivo con el nombre includeme.html. Añadir un (<select>) elemento HTML selecciona para el archivo e insertar tres etiquetas de opción HTML (<option> </ option>). Las etiquetas <option> debe incluir los tres elementos que componen el menú. Cierre la etiqueta de seleccionar y guardar y cerrar includeme.html.
<Select>
<Opción> Coctel de camarón </ option>
<Opción> filete Mignon </ option>
<Opción> Mousse de chocolate </ option>
</ Select>7 Utilice un editor de texto para crear dos archivos denominados include1.php y include2.php. Añadir un código HTML que muestra el texto del encabezado "Menú del día". Coloque la cabecera dentro de etiquetas <body> de cada archivo y utilizar un comando include () de PHP para incluir includeme.html.
<Html>
<Head>
<Title> </ title>
</ Head>
<Body>
<H3> Menú del día </ h3>
<? Php include ( "includeme.html"); ?>
</ Body>
</ Html>8 Utilice un navegador Web para abrir include1.php desde el servidor Web. Verificar que los elementos en pantalla includeme.html en una etiqueta HTML <seleccionar> menú. include2.php abierta desde el servidor Web y verifique que se muestra el mismo código HTML <seleccione> Menú.
9 Volver al editor de texto y volver a abrir includeme.html. Añadir una opción adicional (<option> </ option>) y un cuarto elemento al menú <select>. Guardar includeme.html.
<Select>
<Opción> Coctel de camarón </ option>
<Opción> filete Mignon </ option>
<Opción> Mousse de chocolate </ option>
<Opción> opción de la bebida </ option>
</ Select>10 Actualizar include1.php en un navegador Web y compruebe que el nuevo elemento se incluye en el menú <select>. Actualizar include2.php y verificar que el nuevo elemento se incluye en el menú <select>. Aunque sólo el menú en includeme.html ha cambiado, tanto include1.php y include2.php mostrar la actualización.
JavaScript (script del lado del cliente)
11 Abra un editor de texto y crear un nuevo archivo includeme.js con nombre. Añadir un (<select>) elemento HTML seleccione al archivo usando el comando JavaScript document.write (). Inserte tres etiquetas de opción HTML (<option> </ option>) utilizando el comando document.write (). Las etiquetas <option> debe incluir los tres elementos que componen el menú. Cierre la etiqueta <select> y guardar y includeme.js cercanos.
document.write ( "<select>");
document.write ( "<opción> Coctel de camarón </ option>");
document.write ( "<opción> filete Mignon </ option>");
document.write ( "<opción> Mousse de chocolate </ option>");
document.write ( "</ select>");12 Utilice un editor de texto para crear dos archivos denominados include1.html y include2.html. Añadir un código HTML para cada archivo que muestra el texto del encabezado "Menú del día". Coloque la cabecera dentro de etiquetas <body> de cada archivo y usar una etiqueta <script> etiqueta para incluir includeme.js.
<Html>
<Head>
<Title> </ title>
</ Head>
<Body>
<H3> Menú del día </ h3>
<Script src = "includeme.js"> </ script>
</ Body>
</ Html>13 Utilice un navegador Web para abrir include1.html desde el servidor Web. Verificar que los elementos en pantalla includeme.html en una etiqueta HTML <seleccionar> menú. include2.html abierta desde el servidor Web y verifique que se muestra el mismo código HTML <seleccione> Menú.
14 Volver al editor de texto y volver a abrir includeme.js. Añadir una opción adicional (<option> </ option>) y un cuarto elemento al menú <select> utilizando el) de comandos (JavaScript document.write. Guardar includeme.js.
document.write ( "<select>");
document.write ( "<opción> Coctel de camarón </ option>");
document.write ( "<opción> filete Mignon </ option>");
document.write ( "<opción> Mousse de chocolate </ option>");
document.write ( "<opción> opción de la bebida </ option>");
document.write ( "</ select>");15 Actualizar include1.html en un navegador Web y compruebe que el nuevo elemento se incluye en el menú <select>. Actualizar include2.html y verificar que el nuevo elemento se incluye en el menú <select>. Aunque sólo el menú individual en includeme.js ha cambiado, tanto include1.html y include2.html mostrar la actualización.
