PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VINCULOS EN EL

DISEÑO DE LAS PAGUINAS WED.

KARELIS ADRIANA RIVERA PARALES

2018

INSTITUCION EDUCATIVA SIMON BOLIVAR.

ARAUCA-ARAUCA.
INFORMATICA
 ii

Copyright © 2018 por KARELIS ADRIANA RIVERA PARALES Todos los derechos
reservados.
 iii
Agradecimientos

Agradezco a Dios, por permitirme realizar este trabajo, en donde podre aprender más acerca de
el formato de las normas APA.
 iv

Tabla de Contenido
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VINCULOS EN EL
DISEÑO DE LAS PAGUINAS WED................................................................................ 1

APRENDA A INSERTAR, EDITAR, REEMPLAZAR Y CAMBIAR EL TAMAÑO DE

IMÁGENES EN DREAMWEAVER. ........................................................................................ 2

Mover el panel de estilos, especificar el estilo de los elementos en el bloque de texto e

imágenes ..................................................................................................................................... 7

Mapa y Herramientas de zona interactiva ............................................................................. 9

imagen 2: Como dimensionar un elemento visualmente ...................................................... 12

CAMBIAR DE TAMAÑO UNA IMAGEN .................................................................... 13

Lista de referencias ........................................................................................................... 14

Vita.................................................................................................................................... 16
 Lista de figuras v

ILUSTRACIÓN 1.. .............................................……………COMO INSERTAR IMÁGENES A LA PAG WEB 4

ILUSTRACIÓ 2…………….……………………………………………………...VINCULOS 7
 1

Capítulo 1
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VINCULOS

EN EL DISEÑO DE LAS PAGUINAS WED.

Antes de empezar a preparar el contenido de un sitio web, le recomendamos seleccionar

el idioma apropiado para el sitio web en la

pestaña Configuración Idiomas menú Idioma del sitio web.

El idioma del sitio web es una opción a nivel de sitio que define el idioma en el que

añadirá el contenido a su sitio web. Esto afecta a lo siguiente:

 El idioma en que se mostrarán ciertos elementos del sitio web (en particular aquellos

proporcionados por servicios de terceros), como puede ser la búsqueda de Google y los

botones de navegación en galerías de imágenes. Tenga en cuenta que no todos los

módulos y servicios de terceros proporcionados por el editor soportan todos los idiomas

disponibles.

 La dirección en la que tecleará el texto en el editor (de izquierda a derecha o de derecha a

izquierda). Si selecciona un idioma que se escribe de derecha a izquierda, el diseño y el

contenido de su sitio web permitirá RTL.

Nota: el cambio de idioma de un sitio web no vuelve a cargar el tema de sitio web

seleccionado en este momento en otro idioma. El idioma del tema permanecerá intacto,

aunque la orientación del texto sí que cambiará.

 2

Para añadir texto, listas, tablas o imágenes a una página:

1. Vaya a la pestaña Módulos, seleccione Texto e imágenes y arrastre el módulo a

la página.

2. Introduzca el texto en la pantalla y use los iconos presentes en la barra de herramientas del

módulo para dar formato al texto, añadir tablas, hipervínculos e imágenes.

Título 2

APRENDA A INSERTAR, EDITAR, REEMPLAZAR Y CAMBIAR EL TAMAÑO DE

IMÁGENES EN DREAMWEAVER.

Las imágenes forman parte integrante de un sitio web, proporcionando contexto adicional

a los visitantes del sitio. Aunque existe una amplia variedad de formatos de archivos

gráficos, los formatos GIF, JPEG y PNG son los habitualmente utilizados en páginas

web. Los formatos de archivo GIF y JPEG son compatibles con las páginas web y pueden

verse en la mayoría de los navegadores. El texto siguiente proporciona más información

sobre estos formatos de archivo:

GIF (formato de intercambio de gráficos): los archivos GIF utilizan un máximo de 256

colores y son los mejores para visualizar imágenes de tonos discontinuos. Los archivos

GIF son ideales para visualizar grandes áreas de color homogéneo, como barras de

navegación, botones, iconos, logotipos u otras imágenes con colores y tonos uniformes.
 3

JPEG (grupo conjunto de expertos fotográficos): el formato de archivo JPEG es el

mejor para imágenes fotográficas o de tonos continuos, ya que los archivos JPEG pueden

contener millones de colores. A medida que aumenta la calidad de un archivo JPEG,

también lo hace su tamaño y su tiempo de descarga. Comprimiendo un archivo JPEG

puede conseguirse un equilibrio adecuado entre la calidad de la imagen y el tamaño de

archivo.

PNG (grupo de red portable): el formato de archivo PNG es un sustituto sin patente del

GIF, que admite imágenes con color indexado, escala de grises y color verdadero, así

como compatibilidad con las transparencias, mediante canal alfa. Los archivos PNG

conservan la información de capa, vector, color y efectos, como las sombras paralelas.

Además, todos los elementos son siempre completamente editables. Los archivos deben

tener la extensión de nombre de archivo .png para que Dreamweaver pueda reconocerlos

como archivos PNG.

Dreamweaver no es un editor WYSIWYG (lo que ve es lo que obtiene). Es decir, puede

añadir o insertar imágenes mediante Dreamweaver, pero no puede mover o situar las

imágenes mediante la interfaz.

Para mover sus imágenes en el diseño, debe utilizar CSS, que muestra el contenido

HTML en la forma que desee. Puede dirigirse a los tutoriales básicos

de HTML y CSS para aprender a trabajar con imágenes utilizando código. También

puede ver el tutorial sobre cómo trabajar con imágenes en Dreamweaver.

Para saber cómo insertar y usar imágenes mediante la aplicación Dreamweaver, consulte

las siguientes secciones.

 4

Capítulo 2

Figuras y tablas

Ilustración 1.. como insertar imágenes a la pag web

 5

1. Mover la barra de herramientas.

2. Seleccionar el estilo de párrafo y la fuente. Tenga en cuenta que la fuente Terminal no es

soportada por Google Chrome.

3. Seleccionar el tamaño de la fuente.

4. Seleccionar el estilo de la fuente: negrita, cursiva, subrayado y tachado.

5. Seleccionar los colores de fondo y del texto.

6. Seleccionar la alineación del texto: izquierda, centro, derecha o justificado (alineado

tanto en ambos márgenes izquierdo y derecho con espacios adicionales añadidos entre

palabras).

7. Aumentar y reducir el nivel de sangría del párrafo.

8. Iniciar una lista numerada o con viñetas.

9. Insertar una tabla y especificar el número de filas y columnas.

Una vez haya insertado una tabla, en la barra de herramientas aparecerá un número de

iconos adicionales. Úselos para cambiar las propiedades de las filas y celdas de la tabla,

para insertar y eliminar filas y columnas o para dividir y combinar celdas de la tabla.

10. Insertar símbolos que no estén presentes en su teclado, como los signos de copyright y

marca registrada y otros símbolos Unicode.

 6

11. Insertar una línea horizontal.

12. Editar el código fuente HTML de la página.

13. Deshacer y rehacer cambios.

14. Insertar un objeto Flash en formato SWF.

15. Insertar una imagen, ajustar su tamaño, especificar una descripción y ajustar el texto.

Puede optar por mostrar la descripción debajo de la imagen, mostrarla encima de la

imagen únicamente cuando los usuarios pasen el ratón encima de la imagen o bien no

mostrarla. La descripción también actúa como texto alternativo: en aquellos navegadores

que no soporten o no estén configurados para mostrar imágenes, se mostrará la

descripción de la misma.

Si desea insertar muchas fotografías en una única página, considere usar el

módulo Galería de imágenes en vez del módulo Texto e imágenes. A través de

la Galería de imágenes, usted puede cargar fotografías de su ordenador local o usar

fotografías publicadas en el servicio de compartición de fotos Picasa Web Albums. Si

desea más información acerca del módulo Galería de imágenes, consulte la

sección Galería de imágenes.

Si desea añadir una presentación con múltiples imágenes, use el módulo Control

deslizante de imágenes. Si desea más información acerca del módulo Control

deslizante de imágenes, consulte la sección Control deslizante de imágenes.

16. Insertar anclas HTML a secciones particulares de las páginas web para así poder crear

vínculos desde la misma página u otras páginas de su sitio.

 7

17. Eliminar hipervínculos del texto seleccionado.

18. Añadir hipervínculos a páginas de su sitio web o recursos externos.

19. Añadir un enlace a una dirección de email.

Si desea más información acerca de la adición de hipervínculos, consulte la

sección Hipervínculos, enlaces a direcciones de email y anclas.

20. Mover el bloque de imagen y texto dentro de la página web, eliminar el bloque con sus
contenidos, guardar cambios y cancelar los cambios realizados.

Mover el panel de estilos, especificar el estilo de los elementos en el bloque de texto e

imágenes

Título 2

Definición de propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen.
Si no ve todas las propiedades de imagen, haga clic en la flecha de ampliación situada en
la esquina inferior derecha.

Ilustración 2..vinculos
 8

1. Para ver el inspector de propiedades de una imagen seleccionada, haga clic en la imagen
y seleccione Ventana > Propiedades.
2. En el cuadro de texto de debajo de la imagen en miniatura, introduzca un nombre. Puede

usar este nombre para hacer referencia a la imagen al utilizar un comportamiento de

Dreamweaver (como Intercambiar imagen) o al utilizar un lenguaje de creación de scripts

como JavaScript o VBScript.

3. Defina cualquiera de las opciones de imagen.

An (Anchura) y Al (Altura)

3.Tablas y figuras pueden ser puestas en un apéndice al final de la tesis o disertación. Si

se hace esto se debe estar seguro de indicar que las tablas y figuras están ubicadas en el

apéndice. Esto puede ser a través de paréntesis o con pies de página. Es posible poner

todas o solo algunas de las tablas y figuras en el apéndice, si todas las tablas y figuras son

puestas en el apéndice se debe indicar que “Todas las tablas y figuras están ubicadas en el

apéndice” después de la primera mención de una tabla o figuras..

Si establece valores de An (Anchura) y Al (Altura) que no se corresponden con la

anchura y la altura reales de la imagen, es posible que esta no se muestre correctamente

en los navegadores. Para restaurar los valores originales, haga clic en las etiquetas de los

cuadros de texto An (Anchura) y Al (Altura), o bien haga clic en el botón

Restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto

An y Al.

Nota:
 9

Puede cambiar estos valores para establecer la escala del tamaño de la visualización de

esta instancia de imagen. Sin embargo, el cambio no reduce el tiempo de descarga, ya que

el navegador descarga todos los datos de la imagen antes de escalar la imagen. Para

reducir el tiempo de descarga y asegurarse de que todas las instancias de una imagen

aparezcan con el mismo tamaño, utilice una aplicación de edición de imágenes para

escalarlas.

Origen

Especifica el archivo de origen para la imagen. Haga clic en el icono de carpeta para

localizar el archivo de origen o escriba la ruta correspondiente.

Vínculo

Especifica un hipervínculo para la imagen. Arrastre el icono Señalar archivo hasta un

archivo del panel Archivos. Haga clic en el icono de carpeta para buscar un documento

del sitio o escriba manualmente el URL.

Alt

Especifica el texto alternativo que aparecerá en lugar de la imagen en los navegadores

que solo admiten texto o en aquellos configurados para descargar las imágenes

manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con

navegadores que solo admiten texto, el texto se reproduce en voz alta. En algunos

navegadores, este texto también aparece al situar el puntero sobre la imagen.

Mapa y Herramientas de zona interactiva

Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.
 10

Destino Especifica el marco o la ventana donde se cargará la página vinculada. Esta

opción no está disponible cuando la imagen no está vinculada a otro archivo. En la lista

Destino figuran los nombres de todos los marcos del conjunto de marcos actual. También

puede seleccionar estos nombres de destino reservados:

 _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.

 _new carga el archivo vinculado en una nueva ventana del navegador.

 _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del

marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el

archivo vinculado se cargará en la ventana completa del navegador.

 _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este

destino es el predeterminado. No necesita especificar este valor de forma explícita.

 _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos

los marcos.

Editar

Inicia el editor de imágenes que ha especificado en las preferencias de editores externos y

abre la imagen seleccionada.

Editar configuración de imagen

Abre el cuadro de diálogo Optimización de imágenes y le permite optimizar la imagen.

Actualizar desde el original

Cuando la imagen que aparece en la página de Dreamweaver está sin sincronizar con el

archivo original de Photoshop, Dreamweaver detecta que el archivo original se ha

 11

actualizado. La aplicación muestra en color rojo una de las flechas del icono de objeto

inteligente. Al seleccionar la imagen web en Vista de diseño y hacer clic en el

botón Actualizar desde el original en el inspector de propiedades, la imagen se actualiza

automáticamente. La imagen actualizada refleja los cambios que ha realizado en el

archivo original de Photoshop.

Recorte

Recorta el tamaño de una imagen y elimina las zonas no deseadas de la imagen

seleccionada.

Volver a muestrear

Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en

su nuevo tamaño y forma.

Brillo y contraste

Ajusta el brillo y el contraste de una imagen.

Perfilar
Ajusta la intensidad de una imagen.
Nota:
También puede editar los atributos de una imagen en la Vista en vivo mediante
el Inspector de propiedades de visualización rápida.
 12

Estas líneas son la línea incluida en la parte superior de la tabla, la línea entre el la

cabecera de la tabla y el contenido y la línea debajo de la tabla.

Título 4

imagen 1: Como dimensionar un elemento visualmente

 13

Capítulo 4

CAMBIAR DE TAMAÑO UNA IMAGEN

Puede cambiar visualmente en Dreamweaver el tamaño de elementos, como imágenes,

plug-in, archivos de Shockwave o SWF, applets y controles ActiveX.

Cambiar de tamaño visualmente una imagen le permite ver cómo afecta la imagen al

diseño en diferentes dimensiones, pero no cambia la escala del archivo de imagen a las

proporciones que especifique. Si cambia el tamaño de una imagen visualmente en

Dreamweaver sin utilizar una aplicación de edición de imágenes, el navegador del

usuario escalará la imagen cuando se cargue la página. Esto puede provocar un retraso en

la descarga de la página y que la imagen no se vea correctamente en el navegador del

usuario.
 14

Lista de referencias

Andrews, S. Fastqc, (2010). A quality control tool for high throughput sequence data.
Augen, J. (2004). Bioinformatics in the post-genomic era: Genome, transcriptome,
proteome, and information-based medicine. Addison-Wesley Professional.

Blankenberg, D., Kuster, G. V., Coraor, N., Ananda, G., Lazarus, R., Mangan, M., ... &
Taylor, J. (2010). Galaxy: a web‐based genome analysis tool for experimentalists.
Current protocols in molecular biology, 19-10.

Bolger, A., & Giorgi, F. Trimmomatic: A Flexible Read Trimming Tool for Illumina
NGS Data. URL http://www. usadellab. org/cms/index. php.

Giardine, B., Riemer, C., Hardison, R. C., Burhans, R., Elnitski, L., Shah, P., ... &
Nekrutenko, A. (2005). Galaxy: a platform for interactive large-scale genome
analysis. Genome research, 15(10), 1451-1455.
15
 16

Vita

Me llamo Karelis Adriana Rivera Parales, estudio en la Institución Educativa

Simón Bolívar, y estoy aprendiendo más ha profundidad sobre el tema del formato de las

normas APPA.