maquetacion de pagina web

42
Presentado por: Alejandro Gomez Grado: 11 Computacion

Upload: alejandro-gomez

Post on 22-Apr-2015

324 views

Category:

Documents


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Maquetacion de pagina web

Presentado por: Alejandro Gomez Grado: 11 Computacion

Page 2: Maquetacion de pagina web
Page 3: Maquetacion de pagina web
Page 4: Maquetacion de pagina web

Ahora insertamos <tr> y lo cerramos.

Page 5: Maquetacion de pagina web
Page 6: Maquetacion de pagina web
Page 7: Maquetacion de pagina web
Page 8: Maquetacion de pagina web
Page 9: Maquetacion de pagina web
Page 10: Maquetacion de pagina web
Page 11: Maquetacion de pagina web
Page 12: Maquetacion de pagina web
Page 13: Maquetacion de pagina web

ASI

Page 14: Maquetacion de pagina web

INSERTAMOS UN VINCILO EN ESTE CASO LA FECHA

Page 15: Maquetacion de pagina web

ASI

Page 16: Maquetacion de pagina web

Creando un link de referencia dentro del código de nuestra pagina Nos permite vincular el otro documento de tipo CSS para maquetar

Page 17: Maquetacion de pagina web

Ahora creamos un archivo nuevo para escribir las propiedades de nuestra pagina

Page 18: Maquetacion de pagina web

Lo guardamos en una carpeta llamada Estilo Con el nombre «estilo.css» Todo en la misma carpeta donde este nuestra pagina

Page 19: Maquetacion de pagina web
Page 20: Maquetacion de pagina web

Toda la pagina aparece centrada

Page 21: Maquetacion de pagina web
Page 22: Maquetacion de pagina web

Overflow hiddent nos permitirá que solo aparezca la cabecera.

Page 23: Maquetacion de pagina web
Page 24: Maquetacion de pagina web

Ahora vamos a maquetar el aside izquierda

de nuestra tabla de usuario.

Page 25: Maquetacion de pagina web
Page 26: Maquetacion de pagina web
Page 27: Maquetacion de pagina web
Page 28: Maquetacion de pagina web
Page 29: Maquetacion de pagina web
Page 30: Maquetacion de pagina web
Page 31: Maquetacion de pagina web

Al ejecutarlo nuestra margen central esta se ajusta entre los vínculos y el formulario.

Page 32: Maquetacion de pagina web

Creamos un nuevo archivo

Page 33: Maquetacion de pagina web
Page 34: Maquetacion de pagina web

Descargamos un tipo de fuente llamada destroyed y la guardamos en

una carpeta llamada fuente en la carpeta de nuestra pagina y

referenciamos nuestro archivoo de fuente dentro del header.

Page 35: Maquetacion de pagina web
Page 36: Maquetacion de pagina web

Luego redondeamos la margen de nuestro encabezado.

Page 37: Maquetacion de pagina web
Page 38: Maquetacion de pagina web

Nos aparece nuestros titulos con sombra roja gracias a shadow.

Page 39: Maquetacion de pagina web

Le damos un tamaño en pixeles y le damos una sombra a nuestros títulos.

Page 40: Maquetacion de pagina web

Luego agregamos sombra a nuestra margen de encabezado.

Page 41: Maquetacion de pagina web
Page 42: Maquetacion de pagina web

Los botones de nuestras filas