domingo, 6 de enero de 2013

Terminacion del resto de las pestañas del menú

El menú de la página web esta formado por las siguientes pestañas: Inicio, servicios, contacta, información, tarifas y anécdotas. La última de ellas aún está por completar pero el resto todas cuentan con la misma estructura html, lo que me ha ayudado a poderlas enlazar a todas con un único css. 

1. Header y menu compartido por todos los enlaces

Hay una parte de html y css común a todos los enlaces de las pestañas incluido el de inicio el cual varía un poco, se trata del header y el menu. A continuacion voy a mostrar la pantalla de inicio y de la siguiente pestaña que es la de servicios para que se pueda apreciar:



Por tanto el codigo html que coloco a continuación es el correspondiente al header y al menú que están definidos mediante div's en todos los documentos html de la página ya que son comunes. Tambien muestro el css que da forma a la vista que se puede apreciar arriba:




Para terminar de realizar la página correspondiente a la pestaña inicio cree una etiqueta div llamada centralinicio la cual incluye la foto del dibujo del taxi y la frase de al lado y por ultimo un párrafo de bienvenida:




En este punto comentar la utilización de float en el css para colocar el coche y la frase en paralelo.

Y a continuación muestro el código html y css del párrafo de bienvenida:


Y la ĺa última parte que van a tener en común todos los enlaces es el pie definido con una etiqueta div que lleva dicho nombre:






2. Estructura seguida por el resto de pestañas del menu

A continuacíon voy a mostrar la estructura común que tienen las pestañas de los enlaces servicios, contacta, información y tarifas:
 


- La etiqueta h3 hace referencia en todos los enlaces al nombre o utilidad de esa pestaña en la pagina y va colocada debajo del menú.

- A continuación y subrallado en color verde se diferencian dos etiquetas div, una llamada colizda y otra coldcha, las cuales pongo una en parelelo de la otra mediante la utilización de float.

- Y a su vez cada uno de esots dos div contiene en su interior un encabezado h4 que se coloca arriba y justo debajo y en paralelo también me diante la utilización de float coloco una imagen y un texto explicativo.

Esta estructura solo se ve modificada por una cosa en las pestañas del menú contacta y tarifas, las cuales llevan una pequeña lista en parte de arriba llamada con la id=opciones para poderla referenciar en el documento css:


Y por último en esta entrada, comentar la realización de 4 tablas que indican los precios del taxi y sus horarios. Todas ellas se ven dentro de la pestaña tarifas y van colocadas en la página a izda y dcha utilizando float y la creación de los div colizda y coldcha antes comentada:







No hay comentarios:

Publicar un comentario