Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESARROLLO WEB
Hojas de Estilo

Universidad Tecnológica de Tecamachalco
Indice

1.

2.
3.
4.
5.

Estructura de las carpetas del proyecto
Crear un hoja de estilo
Definir estilos para divs
Asignar...
1. Estructura de las carpetas del proyecto
Crear la siguiente estructura de carpetas para su
proyecto, dentro de carpeta s...
2.- Crear un hoja de estilo

Para crear una hoja de estilo se da clic derecho sobre
La carpeta css, y se crea un nuevo arc...
3.- Definir estilos para divs
Se generan los estilos, anotando el nombre del estilo con un punto antes del
nombre. ( .esti...
Para tener una plantilla completa se deben
crear por lo menos cuatro estilos (con
cualquier nombre):
.Estilo_Banner
.Estil...
4.- Asignar los estilos a los divs

Dentro de la carpeta Administrador se
crea los siguientes archivos y carpetas:
•

Admi...
Contenido del archivo
element del menu.

Menu.php cada etiqueta <li> </li> se utiliza para generar un

<a href=…> se utili...
Contenido del archivo

AdministradorMenu.php
Se importan las hojas de estilo <link rel… />
Y los archivos de java Script
<...
La función include(); se
utiliza para incrustar el código
de un archivo. (Funciona como
si lo copiara y lo pegare en
esa l...
2.  hoja de estilo
Upcoming SlideShare
Loading in …5
×

2. hoja de estilo

519 views

Published on

  • Be the first to comment

  • Be the first to like this

2. hoja de estilo

  1. 1. DESARROLLO WEB Hojas de Estilo Universidad Tecnológica de Tecamachalco
  2. 2. Indice 1. 2. 3. 4. 5. Estructura de las carpetas del proyecto Crear un hoja de estilo Definir estilos para divs Asignar estilos a los divs Visualización de los divs
  3. 3. 1. Estructura de las carpetas del proyecto Crear la siguiente estructura de carpetas para su proyecto, dentro de carpeta se agregaran sus archivos correspondientes Administrador.- Dentro de esa carpeta se Ubicaran todos los archivos que seran Utilizados para el rol administrador. Cajero.- Dentro de esa carpeta se ubicaran todos los archivos que seran Utilizados para el rol cajero. css.- Dentro de esta carpeta se ubicaran las hojas de estilo. Js.- Dentro de esta carpeta se ubicaran los archivos java script generados para las Funciones. themeJquery.- Dentro de esta carpeta se ubican los Arhivos descargados del tema jqueryUI. conexion.php Es un archivo que tiene la conexion A la base de datos.
  4. 4. 2.- Crear un hoja de estilo Para crear una hoja de estilo se da clic derecho sobre La carpeta css, y se crea un nuevo archivo (en sublime) Y después se almacena dentro de la carpeta css
  5. 5. 3.- Definir estilos para divs Se generan los estilos, anotando el nombre del estilo con un punto antes del nombre. ( .estilo_banner ) Dentro de las llaves del estilo se indican sus propiedas como son: largo, ancho, imagen de fondo, margen, etc. En el ejemplo solo se muestra algunas propiedades, pero existen mucho más…
  6. 6. Para tener una plantilla completa se deben crear por lo menos cuatro estilos (con cualquier nombre): .Estilo_Banner .Estilo_Menu .Estilo_Main .Estilo_footer Cabe mencionar que se tiene que tener mucho cuidado con los tamaños especificados para los estilos ya que seran tomados por los divs, cuando se asignan a ellos (Largo y Ancho). Podrian basarse en la imagen de la sigiente diapositva.
  7. 7. 4.- Asignar los estilos a los divs Dentro de la carpeta Administrador se crea los siguientes archivos y carpetas: • AdministradorMenu.php • Menu.php Y se va a generar una carpeta por cada tabla que se va a utilizer en el proyecto. • Proveedores
  8. 8. Contenido del archivo element del menu. Menu.php cada etiqueta <li> </li> se utiliza para generar un <a href=…> se utiliza para mandar a traer a un archivo (es un hiperinculo), es muy importante su propiedad id ya que es el identificador del hipervinculo.
  9. 9. Contenido del archivo AdministradorMenu.php Se importan las hojas de estilo <link rel… /> Y los archivos de java Script <script src….> </script> Archivos para Menu Es la forma a utilizar Se les agrega el evento a cada identificador de los hipervinculos (evento click()) El evento de enlaceUsuarios carga una pagina php dentro de un div (no recarga la pagina), con el metodo load() Y el evento enlaceProveedores invoca a la pagina php indicada (recaga la pagina).
  10. 10. La función include(); se utiliza para incrustar el código de un archivo. (Funciona como si lo copiara y lo pegare en esa linea) Se asigna los estilos a los divs, cada div tomara las propiedades del estilo indicado. Para eso ya se importo en la parte superior dentro del <head> la hoja de estilo que tiene implementados todos los estilos. NOTA: deben coincidir los nombres de los estilos asignados con los implementados.

×