View
214
Download
0
Category
Preview:
Citation preview
Clase 7
Tecnología de la Comunicación II Lics. en Com. Social y Periodismo
FAC. DE CS. HUMANAS. UNSL.
Sitio Web: construcción en In
Design
Selecciono la opción:
DIAGRAMACIÓN DEL SITIO
Y luego la opción:
DIAGRAMACIÓN DEL SITIO
La apariencia del documento es la siguiente:
DIAGRAMACIÓN DEL SITIO
1 2 3
4
5
(1)Barra de menú (2)Opciones de visualización (3) Espacios de trabajo (4) Herramientas (5) Paneles de trabajo (6) Panel de control (7) y (8) Reglas (9) Espacio de trabajo
6
7
8
9
Un ejemplo de periódico
DIAGRAMACIÓN DEL SITIO
DIAGRAMACIÓN DEL SITIO
Uso de tablas
Podemos hacer uso de tablas o columnas para organizar la información.
DIAGRAMACIÓN DEL SITIOCon las tablas podemos realizar distintas operaciones:
Y al agregar texto en las celdas de las tablas podemos manipularlos a través de diferentes opciones:
En las celdas de las tablas podemos colocar imágenes, mediante el comando: FilePlace
DIAGRAMACIÓN DEL SITIO
A las imágenes se les puede:
Aplicar Efectos
DIAGRAMACIÓN DEL SITIOConvertir a objeto interactivo
Editar en algún programa Bloquear,
Ocultar, Ordenar en relación con otras, asociar un enlace, etc.
Para colocar un enlace se utiliza el siguiente comando:
DIAGRAMACIÓN DEL SITIO
Los enlaces nos pueden redireccionar a una página web, una dirección de correo electrónica, un marcador, etc.
Ejemplos de enlaces
DIAGRAMACIÓN DEL SITIO
Enlace a una página externa del sitio: http://www.facebook.com
Enlace a una página interna del sitio: https://registracion.lanacion.com.ar
Visualización del sitio en un explorador
Cuando se trabaja con varias imágenes a la vez suele ser conveniente colocar cada una de ellas en una celda de la tabla para que se visualicen correctamente desde un navegador de páginas web…
!!
La vista desordenada de las imágenes se soluciona dividiendo las celdas en una o más filas o columnas y colocando a cada imagen en una celda
DIAGRAMACIÓN DEL SITIO
En In Design
En un navegador…
El primer problema que aparece con el enlace es que se abre en la misma ventana donde se muestra nuestro sitio, por lo que deberemos hacer una modificación en HTML para solucionarlo.
Para modificar el código de nuestro archivo en HTML debemos editarlo en el Bloc de Notas
DIAGRAMACIÓN DEL SITIO
El Bloc de Notas nos permite ver todo el código de programación del archivo que estamos creando
DIAGRAMACIÓN DEL SITIO
Allí deberíamos buscar el código que corresponde a cada enlace y modificarlo para que se abra en una nueva ventana.
DIAGRAMACIÓN DEL SITIO
<a href="http://www.facebook.com "> <img class="frame-9" src="index-web-resources/image/lanacionenface_fmt.jpeg" alt="lanacionenface.jpg" /> </a>
La palabra clave para buscar el código es href y el parámetro que debemos agregar en el código de programación es target=“_blank”
ANTES
DESPUÉS<a href=http://www.facebook.com target=“_blank”> <img class="frame-9" src="index-web-resources/image/lanacionenface_fmt.jpeg" alt="lanacionenface.jpg" /> </a>
***Los cambios en el código deben ser hechos una vez que se finalizó la creación de la página en In Design. De lo contrario habrá que modificar el código por cada cambio que hagamos.
Con los enlaces es posible vincular los titulares a las páginas donde se encuentra la noticia completa. Para esto debemos disponer de la página principal de titulares y de las páginas de cada noticia en particular.
DIAGRAMACIÓN DEL SITIO
Titular de la Página Principal
Página donde se encuentra la noticia completa en los formatos .indd y html
DIAGRAMACIÓN DEL SITIO
En In Design
En un navegador de páginas web
La ppágina web se genera desde la página de In Design mediante la opción: “FileExport y seleccionando en tipo: html”
DIAGRAMACIÓN DEL SITIO
Una vez creada la página que contiene la nota completa en formato html procedemos a realizar el enlace del titular a esa página (que en este caso se trata de un enlace a un archivo)
DIAGRAMACIÓN DEL SITIO
Lq paleta de colores que se utiliza es la RGB: (red, green, black). Con la combinación de estos colores se producen el resto de los colores para la Web. Las ventanas más utilizadas son: Muestras, Color y Opciones de Muestra.
DIAGRAMACIÓN DEL SITIO
Al navegar y al hacer clic sobre el titular el efecto es el siguiente:
DIAGRAMACIÓN DEL SITIO
Otro tipo de enlace que podemos crear es a la fuente que escribió las noticias. A ella le podemos redireccionar una dirección de correo electrónico, por ej.
DIAGRAMACIÓN DEL SITIO
El efecto es el siguiente:
DIAGRAMACIÓN DEL SITIO
Trabajando con columnas:
DIAGRAMACIÓN DEL SITIO
Las columnas se seleccionan al momento de crear un nuevo documento o desde el menú Layout
DIAGRAMACIÓN DEL SITIO
Las imágenes y textos se pueden colocar directamente o bien haciendo uso de las cajas de texto:
DIAGRAMACIÓN DEL SITIO
En todo caso y en cualquier momento se puede recurrir a las tablas si la información no queda organizada como queremos.
Las notas principales de una revista como así también de un periódico se pueden componer de audios, videos, animaciones, etc. Las opciones de inserción son accesibles desde el menú:
DIAGRAMACIÓN DEL SITIO
Algunos de los formatos aceptados son flv, mp3 y swf
Al insertar archivos multimediales estos se visualizan de diferentes formas.En In Design
DIAGRAMACIÓN DEL SITIO
Audio
Video
DIAGRAMACIÓN DEL SITIO
La visualización de los elementos multimedia insertados de esta forma puede requerir su modificación en formato html, por lo que nos conviene alojar estos archivos en sitios web como Youtube, Goear y otros e insertarlos mediante la opción:
El comando anterior nos sirve para agregar cualquier tipo de elemento dinámico e interactivo en nuestro blog.
DIAGRAMACIÓN DEL SITIO
Recommended