e-training

Centro de capacitacin informtica

Curso: Diseo de pginas web.

Ing. Mariella Pea Paredes.

DISEO DE PGINAS WEB: INTRODUCCIN AL DISEO WEB

CONCEPTOS BSICOS: Pgina web: Una pgina web es un documento electrnico que contiene algn tipo de informacin como texto, imagen, video, animacin u otros. Una pgina web forma parte de un Sitio Web, este no es ms que el conjunto de pginas web que lo componen ordenadas jerrquicamente bajo una misma direccin de Internet (URL). Las pginas web son visualizadas a travs de Navegadores Web que interpretan el cdigo con el que son diseadas estas. HTML: HTML (lenguaje de marcado de hipertexto), hace referencia al lenguaje de marcado predominante para la elaboracin de pginas web. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML5 es la quinta revisin importante del lenguaje HTML. CSS: El nombre hojas de estilo en cascada viene del ingls Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML2 (y por extensin en XHTML). } La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Clasificacin de pginas web por su contenido: Esttica: Una pgina Web esttica presenta las siguientes caractersticas: Ausencia de movimiento y funcionalidades. Para cambiar los contenidos de la pgina, es imprescindible acceder al servidor donde est alojada la pgina. No se pueden utilizar funcionalidades tales como bases de datos, foros, etc.

Dinmica: Una pgina Web dinmica tiene las siguientes caractersticas: El visitante puede alterar el diseo, contenidos o presentacin de la pgina a su gusto. En su realizacin se utilizan diversos lenguajes y tcnicas de programacin.

E-training.

Direccin: Av. De la cultura 2003 - Segundo Piso - Of. 203. Telfono: 984725307 982714212 - 234829

e-training
Centro de capacitacin informtica

Curso: Diseo de pginas web.

Ing. Mariella Pea Paredes.

DISEO DE PGINAS WEB: EDICIN DE IMGENES Y FORMAS GRFICAS

Para la edicin de imgenes, se utilizar el programa: Adobe Fireworks CS6, el cual tiene la siguiente estructura: Barra de Men

Barra de Herramientas

Complementos

Barra de Propiedades

Como ejemplo, se tomar la siguiente estructura web:

E-training.

Direccin: Av. De la cultura 2003 - Segundo Piso - Of. 203. Telfono: 984725307 982714212 - 234829

e-training
Centro de capacitacin informtica

Curso: Diseo de pginas web.

Ing. Mariella Pea Paredes.

Como paso inicial, se elaborar el banner de la estructura web, el que ser elaborado con las imgenes proporcionadas: Ambas imgenes deben ser abiertas con Adobe Fireworks, y recortadas tal como se ve en la muestra del banner. El recorte se realizar con las herramientas Lazo Poligonal y Varita mgica dependiendo del tipo de imagen.

Paralelamente, se crear un nuevo archivo en blanco, con 800 px de ancho y 250 de alto, en que se insertar una forma rectangular de las dimensiones del documento creado, con la Herramienta Rectngulo.

Al cual se le aplicar un efecto degradado con la Herramienta Degradado:

En el panel de propiedades se puede definir los colores y estilo del efecto. Ya con la estructura del banner diseada, las imgenes previamente recortadas se deben copiar al banner y dimensionar de forma proporcional. El color de las imgenes puede ser mejorado haciendo uso de la opcin Filtros Ajustar color:

E-training.

Direccin: Av. De la cultura 2003 - Segundo Piso - Of. 203. Telfono: 984725307 982714212 - 234829

e-training
Centro de capacitacin informtica

Curso: Diseo de pginas web.

Ing. Mariella Pea Paredes.

Haciendo uso de la herramienta Texto, se insertar el texto de la muestra, y en el panel de propiedades se le dar el estilo correspondiente:

Al finalizar este proceso y tener el banner creado, se exportar la imagen en formato JPGE. Con ayuda de las imgenes proporcionadas y las herramientas de desarrolladas en DreamWeaver se disear la estructura inicial, la que ser creada en un nuevo archivo de 1200 px de ancho y 1500 px de alto.

E-training.

Direccin: Av. De la cultura 2003 - Segundo Piso - Of. 203. Telfono: 984725307 982714212 - 234829