La forma más usada de publicación en línea: la web.Clase del 18 de mayo de 2009. Como forma de publicación de contenidos, las páginas web han sido uno de los más exitosos tipos de documentos de todos los tiempos. En menos de dos décadas, se calculan más de 800 mil millones de páginas activas en la World Wide Web, sin contar documentos en otros formatos (PDF, txt) también publicados en la gran red.
Conceptos de la web: algunos términos de uso frecuente, para unificar nuestro glosario.
Tutoriales de Dreamweaver en video.
Al final P7.
Lo básico de Dreamweaver
Macromedia Dreamweaver es un editor HTML y un administrador de sitios web. Por los momentos, lo usaremos en la primera función.
ÁREA DE TRABAJO
Área de diseño de página vs área de administración del sitio.
DEFINICIÓN DEL SITIO
Nuevo sitio
Parámetros para la creación del sitio en el disco duro local.
LA PÁGINA WEB
Características
Head y body. / Código fuente / Etiquetas.
PROPIEDADES DE LA PÁGINA
Título, imagen de fondo, color del texto por defecto, color de los links
Modificar > Propiedades de página.
TABLAS
Crear tabla. Insert > Table. Aparece un cuadro de diálogo que pide:
Rows (filas): cuántas.
Columns (columnas): cuántas.
Ancho: Puede colocarse como número de pixels o porcentaje (de la columna dentro de la cual está la tabla).
Border: 0= sin borde; 1= un punto de ancho de línea, etc.
Cell space (ancho entre borde interno y externo): 0= sin espacio; 1= un punto de ancho, etc.
Datos de interés sobre tablas
- Las Propiedades de Tabla son una cosa y las Propiedades de Celda, otra. Las primeras afectan a la tabla más externa; las segundas sólo afectan a la(s) celda(s) marcada(s).- Si son contradictorias pueden traer problemas. En la mayoría de los casos, prevalecen las Propiedades de Celda.
- Se puede colorear los bordes de una tabla y su fondo pero no de las celdas individuales.
- El texto o la imagen aparecen por defecto en el centro de la tabla. Si quiere que se alinea en el Tope debe marcar (Alineación) Vert: Top.
- Si quiere que la tabla sea bordeada por el texto, debe alinearla a la derecha o a la izquierda,
- Las tablas y celdas se pueden fundir o dividir.
INSERCIÓN
Textos
Coloque el cursor en el comienzo de línea y escriba.
Imágenes
Insertar > imagen.
VINCULOS
Vínculos intra-página
Debe marcarse primero el destino del vínculo. Luego Insert > Named Anchor. Escribir el nombre. Entonces ir a la fuente desde donde saldrá el vínculo. Marcar, en la ventana de Propiedades > Link, anotar: nombre_de_archivo.htm#nombre del Named Anchor.
Vínculos inter-páginas
En la ventana de Link coloque el nombre exacto del archivo al que quiere conectarse. La forma más sencilla es activar el icono de la carpeta amarilla y buscar el archivo directamente. Este comando funciona no sólo para conectar páginas HTML sino para abrir archivos de cualquier tipo. Por ejemplo, uno de PowerPoint, si la PC tiene el programa podrá abrirlo, si no, solicitará que se baje (download) al disco duro.
Vínculos externos
En la ventana de Link coloque el URL exacto al que quiere llegar. Luego en el menú desplegable Target indique "Blank" para abrir un navegador nuevo.
Ejemplo de vínculo externo en el mismo navegador.
Ejemplo de vínculo externo en una nueva ventana del navegador.
MENÚ DESPLEGABLE
Inset > Form objects > Jump menu. Aparece un cuadro de diálogo al que se le indica el nombre de la opción, qué link activa y en qué orden se coloca. Puede elegirse una opción que se haga visible siempre en el menú cerrado.
MAPA DE IMÁGENES
Se marca la imagen, en la ventana de Propiedades, Map > se elige la forma y se marca sobre la imagen. Luego se le asigna el vínculo. Tome la imagen siguiente, insértela en su página y asígnele links a cada elemento de la lista.
RECURSOS FLASH
Botones. Insert > Interactive images > Flash buttons. Al elegir el modelo, introduce el texto (nomenclatura) que debe desplegar y el link que debe activar. Ejemplo.
Textos. Insert > Interactive images > Flash text. Cuadro de diálogo para indicar el contenido mismo del texto, tipo de letra, color original, color de sustitución (rollover) y el link que activa. Ejemplo.
VENTANAS EMERGENTES
Son vínculos a ventanas de tamaño reducido, sobre las cuales ejercemos el control de definir las barras y funcionalidades que tienen, así como en qué circunstancias aparecen.
Se crea previamente una página adicional contenida por la ventana emergente. En la página original, se escribe la frase en la que se quiere el vínculo. Luego se crea un Comportamiento > Para Explorer 6.0 > Abrir ventana de navegador > Se configura la página de la ventana emergente, el ancho y alto de la ventana. Luego decimos bajo qué acción aparece la ventana. Elija "OnClick".
------------------------------------------------
Otras características
IMÁGENES DE SUSTITUCIÓN
Necesita dos imágenes de las mismas dimensiones, con los cambios que usted quiera resaltar. Insert > Interactive images > Rollover images: aparece un cuadro de diálogo: Originas image (imagen que se verá al abrir la página); Rollover image (imagen que aparece cuando se coloca el cursor sobre la imagen); URL (dirección a la que va el link, si lo tiene).
Use esta dos:
RECURSOS JAVA SCRIPT
Son pequeños códigos autónomos que se agregan a la página HTML y realizan funciones complementarias, sobre todo relativas al navegador. Debe copiar esta página en su disco duro y abrirla con DreamWeaver. Sólo así podrá ver los iconos que puede copiar, pegar en su página y configurar.
El profesor colocará algunos ejemplos en el disco público.
No hay comentarios.:
Publicar un comentario