INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB

Lab Repaso de Maquetacion Web con CSS y Plantillas

1.- Crear un sitio web nuevo con el nombre labrepasocss Se pide maquetar el sitio web usando CSS, inserte el banner superior como imagen, men horozontal con css, menuver y pie de pagina. Para maquetar la pagina web trabaje con div, dibuje los div con el panel Insertar / Diseo /Dibujar Div

Se recomienda trabajar con estilos las propiedades del texto, enlaces, y la etiqueta div para la distribucin de pagina.

Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB Para Generar las paginas del sitio, debe crear una plantilla Creacin de Plantillas en Dw Siga los pasos siguientes:

1. Posicionarse el Div Cuerpo 2. Ir al men Isertar, opcin Objetos de Plantilla, elegir regin Editable, como se ve el grafico

Crear las paginas en base a la plantilla

Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB En el panel archivos se ha creado la carpeta Template con la plantilla creada plantillarep.dwt

Lo que se va hacer luego es crear en base a la plantilla todas las pginas del sitio Ir al Menu Archivo Nuevo y elegir pagina de plantilla y elegir la plantilla plantillarep.dwt y clic en crear

Observar en la pagina creada que no se puede editar fuera de la regin editable, insertar el titular Pagina de Inicio del Sitio con el estilo de h2 color del logo en la plantilla grabamos la pagina como index.htm

Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB

Crear todas las paginas de sitio Probar la navegacin del sitio en un navegador, todas las pagina deben tener el diseo de la plantilla y solo debe cambiar la regin editable En el archivo de la plantilla, crear los enlaces a todas las paginas del sitio Seleccionar texto inicio luego ir vinculo de la barra de propiedades clic en la carpeta y ubique el archivo index.htm y clic aceptar
Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB

Repita el paso anterior para todos los vnculos de la barra de navegacion. Guardar la plantilla y actuliza todas las paginas del sitio,

probar la navegacin del sitio con los enlaces Crear el men vertical Agregar en la plantilla el men vertical

Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB

Crear Hoja de estilos En el men nuevo Crear la hoja de estilos externa css con el nombre estilos.css

copie ah los estilos css de la pagina de la plantilla plantillarep.dwt Grabar y enlazar la hoja de estilos a la plantilla

Grabar la plantilla y actualizar Observar que todas las pagina del sitio se han actualizado y estn usando la pagina de estilo.css para todo el sitio

Ing. Tito Ale Nieto email: titofale@gmail.com

INGENIERIA DE SISTEMAS - UPT INTRODUCCION WEB

Para terminar se pide agregar contenido a las regin editable de cada pagina, se revisara al ingresar a clase.

Ing. Tito Ale Nieto email: titofale@gmail.com