Examen web

Hemos hecho un examen relacionado con el tema web. Ha sido una práctica difícil donde hemos tenido que reflejar todos nuestros conocimientos sobre dreamweaver.

Tabla periódica, Dreamweaver

En esta práctica hemos creado una tabla periódica de tipografias mediante sectores para cada cuadro de la tabla y así cada vez que pase el cursor encima de una casilla ésta cambia de color.
Cuando coloquemos las guías hacemos el contorno de las casillas utilizando la herramienta "sector", que puede convertir todas los tramos de guías en sectores "Objeto > Sector > Crear sector desde guías".

El primer paso ha sido convertir las imágenes del la foto de la tabla en sectores usando guías para controlar las medidas aproximadas. Este proceso se puede hacer desde Illustrator o Photoshop. Una vez introducidos los sectores guardamos el documento exportándolo para web (Archivo > Exportar para web o otros dispositivos). En este menú se puede guardar en varios formatos: jpg, png-8 (transparente y opaco), png (distintos grados de opacidad), gif, swf (flash animado), svg (gráfico vectorial) y wbmp (dispositivos móviles).

Nosotros hemos escogido ".jpg" ya que es el más apropiado por su poco peso.

Repetimos este proceso cambiando la imagen a escala de grises para así tener las imágenes de sustitución.

Las imágenes exportadas desde sectores se guarda en una carpeta denominada "imágenes".

Una vez exportadas las imágenes abrimos el Dreamweaver y insertamos la imagen original de la tabla de fondo así podremos calcar la tabla fácilmente. 

Creamos "Divs PA" que usaremos como sectores para las casillas de la tabla.

Una vez creados los sectores insertamos las imágenes normales una a una sobre los sectores usando la aplicación "Insertar > Objeto de imagen > Imagen de sustitución".

Estilos CSS, Dreamweaver

CSS cascade style sheets ( Hojas de estilo en cascada)

Se basa en estilos de objetos. 

Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla.

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Ponemos el nombre de etiqueta que queramos que, mediante un "llave { }" aplicamos las distintas propiedades que queramos al texto.

h1 {background color: A03;

font style: Arial, Helvetica, Sans Serif; 

line-haight: 16px;

}

Hay tres tipos de estilos:

*ID > identidad:

Los estilos ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre.

#contingut{ background color: """;

margin:10px, 10px, 10px, 10px;

}

Solo se puede aplicar una vez en la pagina.

*Clase > Va precedido siempre por un punto:

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos.

. Verd { colo: 0F0;

En "Ventana-> Estilos"  escogemos las propiedades de estilo que deseemos.

*Etiqueta > Se usa para dar estilos a las etiquetas predeterminadas de html.
Un ejemplo sería la etiqueta <a> de html es "vínculo". Podemos crear un estilo para suplir la el típico de cuerpo azul subrayado.


El selector (estilo) es muy parecido a las hojas de estilo en Indesign ya que, se pueden insertar tado tipo de parametros para el texto (tipo de fuente, tamaño, color, etc...).

Podemos guarda estos estilos y posteriormente cargarlos con la paleta: Vincular hoja de estilos externa.

Creación de web

En esta práctica hemos creado la web de "El Paller". La hemos hecho  utilizando algunos pasos de las prácticas anteriores y varias novedades.

Marcos: Podemos encontrarlo en "Insertar > HTML > Marcos".

Esta herramienta nos permite dividir la página de manera que cada marco se pueda editar independientemente.

Sirve para una mejor distribución de datos de la página, permiten mantener fijas la zonas del documento que queramos., mientras que otras se pueden modificar.

A la hora de guardar el documento de divide en tres. Uno con el marco de referencia, otro con marco interior y el último documento se guarda con ambos marcos.

No hará falta falta seleccionarlos para editar el documento que contengan, pero si que tendremos que seleccionarlos para definir las propiedades de cada uso.

A la hora de vincular tenemos que precisar cual va a ser el marco de destino. Para ello le damos a Dest. (destino) en la ventana de "Propiedades" y desplegamos el menú (target) en el que seleccionamos el marco en que se mostrará la página.

Hemos utilizado la herramienta "Marco" para dejar la cabecera de la web inmóvil a la hora de navegar por sus links para así mostrar permanentemente las opciones de la cabecera.

El documento tenía un problema inicial, el vínculo de las imágenes externas era incorrecto y daba error a la hora de mostrarlas.
Las imágenes eran ".gif", que es un formato apropiado para web.
Para solucionar este problema hemos utilizado la herramienta "Buscar y reemplazar" (comando+f), es muy útil para cambiar la ruta de almacenamiento de imágenes ya que es la manera más rápida y sencilla de vincular imágenes o zonas de código que deben de ser reeditadas.

Una vez realizado el reemplazo de la ruta de las imágenes hemos decidido cambiar el color de estas imágenes cuando el cursor se ponga sobre ellas.

Para esta acción hemos utilizado la herramienta "Insertar > Ojetos e imagen > Insertar imagen de sustitución" donde ponemos la ruta de la imagen normal y la que hemos cambiado de color. El color se lo hemos cambiado con Photoshop utilizando tonos más claros sobre las imágenes.

Por último hemos insertado un video de Youtube poniendo la ruta url al a su apartado del código fuente.

Guardar documentos, Dreamweaver

Para una buena organización de trabajos de Dreamweaver es imprescindible guardar los documentos utilizando la aplicación "Sitios" que nos permite una gestión ordenada de éstos.

Esta aplicación nos pide una ruta donde se almacene el documento guardado y otra para las imágenes que estén integradas en él.

También es posible guardarlo para disco duro online (en este caso Wuala). Simplemente le tenemos que introducir la ruta con la pestaña de Local/red activada.

Configuración de tablas, Dreamweaver

Un elemento esencial para crear una web es la herramienta tabla, que nos ayuda a organizar de una manera estructurada la web.

Esta herramienta es muy abierta, nos permite la creación de una tabla personalizada pudiendo establecer la cantidad de píxeles que queremos por celda o entre éstas, el numero de filas y columnas, etc..  También cabe la posibilidad de reeditarla mediante la pestaña Modificar.

Vincular texto, Dreamweaver

Hemos comenzado a utilizar Dreamweaver.
En la primera práctica hemos trabajado la vinculación de texto en zonas de las misma página, este método es un poco anticuado pero útil para entender más las bases de dreamweaver.

Hemos vinculado las distintas zonas anclándolas a los objetos y titulares desde el menú de propiedades del programa.