Programación básica con php (creando el menu)


Bueno, hasta el momento ya tenemos una buena cantidad de archivos, pero todo esta separado, así que en esta ocasión vamos a unirlo todo a través de un menú, pero para aclarar la situación con los archivos vamos a ver el siguiente mapa de la estructura de nuestro ejemplo

En el esquema he tratado de mostrar la relación entre cada archivo de tal forma que en el modulo de “Baja individual” primero se abre el archivo “eliminar.html” y este envia la información capturada a eliminar.php, el cual envio los datos a confirmar.php, las demás partes del esquema se le eran de la misma manera.

Asi que a continuación les presento la imagen del menu principal para que se den una idea de lo que se hara.

Como vemos hay tres botones, los cuales son para accesar a las funciones principales del sistema, una vez que ya tenemos la apariencia vamos con el código fuente y desde ese punto comenzare a hacer modificaciones.

Como podemos ver hemos colocado las imágenes en una tabla y hemos usado la etiqueta “style” para crear una hoja de estilo dentro de la pagina que hace que todas las etiquetas “imgtengan todas el mismo tamaño, ademas usando la etiqueta div hemos creado una capa que es donde se mostraran los módulos que hemos elaborado.

Observe que en la hoja de estilo hemos usado el símbolo de # para hacer referencia a la capa llamada contenido, este símbolo se usa solo si le hemos colocado un id a el elemento de la pagina web al que le queremos modificar su apariencia, pero no se lo colocamos cuando hacemos referencia a una etiqueta, es decir a todos los objetos colocados a través de la misma etiqueta.

Ahora debemos agregar un iframe, el cual es un marco dentro de la pagina web donde podemos mostrar otras paginas o elementos web sin necesidad de recargar la pagina.

Observe que en ahora hemos agregado un elemento mas a la hoja de estilo,  para modificar el tamaño del iframe, en la medida de lo posible es recomendable hacerlo de esta forma, ya que los navegadores en algunos casos, ignoran el cambio de tamaño de un elemento web si no se especifica a través de una hoja de estilo.

Por ultimo se ha agregado una función en javascript que hace uso de la propiedad “src” del iframe, esta propiedad permite indicar la dirección de la pagina web que sera presentada dentro de ella, para el caso del ejemplo muestra el formulario “altas.html”, y para que quede mas claro, esta es la imagen de como se ve el menú, una vez que damos click en el botón de altas.

Si se maneja en todas las paginas un fondo de color uniforme el efecto que tendremos es que todo aparece de repente en la misma ventana.

En el codigo de arriba solo muestro como se hace para la funcion de altas, pero en el archivo que dejo para descargar ya esta todo completo y funcional

http://db.tt/YLvzUE4

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .