información estructura

Transcripción

1 Estructura Manipulación de imágenes Definición de un sitio Página Web Propiedades de la página Layers Tablas Inserción de imágenes Rollovers Prueba Plantillas irma soler primavera 04

2 información estructura Al iniciar una lo primero que se debe generar es un esquema de la organización de la información, es decir, establecer la jerarquía en que se irá desarrollando nuestra información y la manera en que ésta se irá ligando. En base a esta información podremos definir las páginas que tendrá nuestro sitio, los datos que llevará la página inicial a partir de la cual se desarrollará el resto de nuestro sitio.

3 información estructura El siguiente paso es crear los fólderes en donde iremos guardando nuestra páginas y las imágenes qué estas incluirán. Es importante generar un diseño previo de cada página para saber qué imágenes base se requerirán (botones de inicio, adelante, atrás, correo)

4 información estructura Ejemplo desarrollo DAC-1

5 información imágenes A continuación trabajaremos con la imágenes que se incluirán en las páginas. Para las imágenes de los trabajos de los alumnos se deberá definir un tamaño estándar en base a pixeles para igualar la presentación (promedio 400x400 px) y que ésta se vea ordenada. Es muy importante que al subir las imágenes a las páginas, éstas incluyan el nombre del autor, la fecha y los programas utilizados para generar esas imágenes. En caso de imágenes rectangulares definir un criterio si rige el alto o el largo de la imagen.

6 información imágenes En Photoshop definiremos el tamaño de la imagen en IMAGEN>TAMAÑO DE IMAGEN> ALTO ANCHO RESOLUCIÓN x x 72 pixels/inch resolución web RESTRINGIR PROPORCIONES para que al cambiar el alto se modifique proporcionalmente el ancho o viceversa

7 información imágenes En la opción de salvar, escoger SALVAR PARA WEB Seleccionar JPG como formato de guardado y como compresión seleccionar el rango de ALTA para evitar que se distorsione la imagen. Se puede probar y comparar el porcentaje de compresión en las 3 distintas ventanas. La primera ventana siempre mostrará la imagen original. Otros formatos recomendados para : GIF, PNG

8 definir un sitio dreamweaver Al iniciar una, lo primero que tenemos que definir es el SITIO, es decir la ruta en donde estaremos guardando toda nuestra información. Con ésto, las ligas de localización de imágenes y objetos será más sencilla y evitaremos que se pierda la ruta de las imágenes y aparezca el icono Para definir un sitio, dentro de DREAMWEAVER iremos a SITE>New Site Le daremos un nombre para distinguirlo entre otros sitios que vayamos a crear.

9 definir un sitio En este caso no utilizaremos ninguna tecnología de servidor. Seleccionaremos: EDIT local copies on my machine para trabajar localmente. Y guardaremos los archivos dentro de la carpeta correspondiente al DAC en que se va a trabajar.

10 definir un sitio No nos conectaremos a ningún servidor. Se llegará a un acuerdo en clase del tiempo en que se deberán de actualizar las páginas.

11 Es muy importante que el diseño de la se ajuste a 800x600 pixeles pensando en los usuarios que aun no cuenten con resoluciones mayores para visualizar las páginas web. Aun así, el tamaño real debe ser menor considerando las barras de herramientas del explorador de internet, pero trabajaremos la página de 800x600.

12 propiedades

13 propiedades Background

14 layers Las capas nos ayudan a posicionar con un orden los objetos que vamos a incluir en la página Layout view nos permite visualizar la capa general que podemos subdividir con capas en celdas, podemos modificar fácilmente sus valores en la caja de propiedades.

15 layers Para poder insertar objetos, debemos cambiar al modo de Standard View y regresar a la opción de Common Dentro de las capas podemos insertar tablas y trabajar con espacios independientes. En la parte de Properties podemos manipular los valores de las tablas insertadas.

16 tablas Podemos modificar el número de columnas y renglones Si queremos que la tabla esté invisible, pondremos valor 0 Cambio de color en las celdas

17 tablas Ajuste manual de ancho de columnas. Cambio individual del color de celdas. Cambio de número de renglones y columnas.

18 inserción de imágenes Las imágenes se pueden situar dentro de celdas y capas. Puede reducirse su tamaño dentro de la página, pero es mejor traerlas del tamaño exacto desde Photoshop.

19 rollovers Rollovers Imagen base Imagen al poner el cursor sobre la original.

20 ligas Seleccionando el texto o la imagen, dar clic en botón derecho Make link. Seleccionar la página a la cual se va a ligar. En el cuadro de propiedades encontramos el Target, es decir la manera en que va a aparecer la página a la cual nos vamos a ligar. _blank es una página nueva _parent sustituye la página que estamos viendo Las 2 opciones siguientes son en caso de que utilicemos un frameset para indicar en qué marco aparecerá.

21 anclas Si queremos referirnos a una sección de la página que estamos visitando, podemos ligar el título por medio de un ancla, que nos llevará al sitio exacto donde se encuentre la información que indica el título. Posicionar cursor en donde vayamos a poner el ancla

22 anclas Seleccionar el texto y en la parte de Properties dar clic al icono Tirar la flecha sobre el icono del ancla. En Link aparecerá el nombre que le dimos al ancla. También se puede escribir directamente el nombre del ancla anteponiendo el símbolo de #. #temario

23 prueba Al finalizar nuestro sitio, se deberá revisar que todo corra bien y esté bien ligado, previsualizándola en explorador de internet (F12), debemos dar click a todos los vínculos para revisar que nos lleven a las páginas o áreas ligadas, así como los botones de retorno y de inicio. Todas las páginas deberán tener acceso directo a la página inicial del curso y la página inicial del curso deberá tener una liga directa a la página inicial de DAC.

24 template plantillas fijos editables Dentro de una plantilla (template) podemos especificar aquella información que se va a repetir en todas las páginas que diseñemos. Esta información se puede modificar y automáticamente se actualizará en todas aquellas páginas que hayan utilizado como base la plantilla pre-establecida (dwt). En estas plantillas se definen las áreas editables que serán las que tengamos que cambiar dependiendo el curso a desarrollar y donde se incluyan las imágenes. También a partir de esta página de inicio de cada curso podremos ligarnos a un diseño propio del profesor y/o de los alumnos.

25 template plantillas Para definir una región editable, ir a Insert>Template Objects>Editable Region (es importante situar el cursor dentro de la celda en la cual vamos a poner la región) Dar nombre a la región