Diseño de paginas web

17
DISEÑO DE PAGINAS WEB ISABEL LAFUENTE

description

Programación de aula y tutorial sobre diseño, montaje y administración de sitios webs

Transcript of Diseño de paginas web

Page 1: Diseño de paginas web

DISEÑO DE PAGINAS WEB

ISABEL LAFUENTE

Page 2: Diseño de paginas web

OBJETIVOS

• Conocer la estructura básica de un sitio web utilizándola para crear nuestro propio sitio web

• Utilizar el vocabulario técnico adecuado para denominar los diferentes elementos (hipertexto, hipervínculo, código html, FTP, etc)

• Diseñar un sitio web en el cual se integren todos los elementos utilizando el programa adecuado Dreamweaver, Front Page, etc..

Page 3: Diseño de paginas web

CONTENIDOS

• Estructura de los sitios web: Arból de carpetas• Estructura de las páginas web• Diseño de nuestro propio tema : Código HTML,

etiquetas, elementos multimedia, marquesinas, etc..• El texto• Las imágenes• El tema• Los elementos: Botones, marquesinas• Los hipervínculos• Subir un sitio web a la red: FTP.

Page 4: Diseño de paginas web

DESARROLLO DE LOS CONTENIDOS

• El diseño de páginas WEB ha evolucionados en los últimos años.

• Se diferencian entre dominios y páginas personales.

• Los dominios precisan pagar una pequeña cuota y pueden ser utilizados con fines comerciales

• Las páginas personales son gratuítas y hoy han evolucionado a los blogs o vitacóras que a su vez se han incorporado a las redes sociales.

Page 5: Diseño de paginas web

EL ÁRBOL DE CARPETAS.

• Para crear un sitio web deberemos tener primero la información adecuada.

• Por ello, se van a construir sitios web en donde se explique cómo se construye un blog y como se incorpora a una red social

• Los editores de página WEB son muy diferentes pero nosotros vamos a utilizar DREAMWEAVER.

Page 6: Diseño de paginas web

DREAMWEAVER

• Primero hay que crear una árbol de carpeta en donde introduzcamos todos los archivos precisos

• Entre dichos archivos destacan las imágenes, botones, documentos, etc.

• Una vez que se tengan los elementos se comienza por diseñar el tema de nuestro sitio WEB, o bien se elige desde una de las plantillas que ofrece Dreamweaver o el programa que se utilice como editor.

Page 7: Diseño de paginas web

DREAMWEAVER

Page 8: Diseño de paginas web

DREAMWEAVER

Page 9: Diseño de paginas web

DISEÑO DE NUESTRO TEMA

• Son elementos esenciales el encabezado y numeración de las páginas

• El número de páginas que tendrá nuestro sitio WEB

• El fondo y la organización de hipervínculos entre .

• No se debe olvidar que el portal es siempre index

• El uso de marcos es optativo.

Page 10: Diseño de paginas web

EL TEMA

Page 11: Diseño de paginas web

CONSTRUCCIÓN DEL SITIO WEB

• Una vez creado el tema se copia el número de veces que se crea necesario (el número de hojas que tenga el sitio WEB)

• Después se rellenan las hojas siguiendo las indicaciones de construcción de documentos. El tipo de fuente, su tamaño y su color

• Se introducen las imágenes que se crean pertinentes.

Page 12: Diseño de paginas web

INSERCIÓN DE ELEMENTOS

• Son elementos claves de los sitios WEB

• Botones• Marquesinas• Marcadores• Animaciones flash

Page 13: Diseño de paginas web

LOS HIPERVÍNCULOS

• Los sitios WEB deben configurarse de forma relacional a excepción de index que debe estar comunicado con todos de forma jerarquica

• Los hipervínculos pueden ser • Internos entre páginas del propio sitio• Externos con páginas externas al sitio• Con el correo electrónico

Page 14: Diseño de paginas web
Page 15: Diseño de paginas web

SUBIR EL SITIO A LA RED

• Se debe buscar un host o contratar un dominio en donde se nos proporcionará una dirección de FTP

• La dirección de FTP nos permite configurar el FTP de Dreamweaver, o el programa de FTP que se utilice para ello

• Se utiliza el nombre de usuario y la contraseña para subir la página con dicha aplicación

• Y sólo tenemos que ir a la página que nuestro host nos ha proporcionado.

Page 16: Diseño de paginas web

EL FTP

Page 17: Diseño de paginas web

EVALUACIÓN

• Diseñar un sitio WEB en donde se explique qué es un blog y para que se puede utilizar

• Utilizar el DREAMWEAVER para crear el sitio WEB construido

• Subir dicho sitio WEB a una página personal, para lo cual se utilizará un programa FTP.