Manual gráfico de Dreamweaver CS6

1

Páginas Web y Redes Informáticas

– Manual de Prácticas Nº 2 –

PÁGINAS WEB Y REDES INFORMÁTICAS

ALEX BLANCO

Informática II

2

® SERIE VISUAL INFORMÁTICA PARA TODOS

Páginas Web y Redes Informáticas

3

PARTE PÁGINAS WEB CON DREAMWEAVER

¿QUÉ APRENDERÁ EN ESTE APARTADO?

1-) Primeros pasos con Dreamweaver 2-) Crear un sitio local

3-) Crear páginas Web básicas 4-) Aplicar formatos CSS a un texto 5-) Insertar imágenes 6-) Configurar hipervínculos 6-) Diagramar páginas Web usando tablas 7-) Insertar elementos Spry

TIEMPO ESTIMADO

30 horas clase

  “Tu tiempo es limitado. No lo desperdicies viviendo el sueñoALEX o las ideas de otras personas” BLANCO Steve Jobs

2

Informática II

4

® SERIE VISUAL INFORMÁTICA PARA TODOS

5

Páginas Web y Redes Informáticas

CAPÍTULO

1

L

PRIMEROS PASOS CON DREAMWEAVER

AS PÁGINAS Web son documentos contenidos en Internet o en línea como es llamado también. Permiten compartir toda clase de información a través de la red mundial de información o Internet. A través de ellas se comercializa, se informa, se aprende… en fin, una gran gama de oportunidades se abre ante nosotros. Todos podemos construir y compartir un sitio Web. Veamos cómo hacerlo.

DREAMWEAVER Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además, incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Cualquier editor de texto permite crear páginas web. Para ello solo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.

– BLANCO 3– ALEX

Informática II

6

SIMBOLOGÍA PARA UNA PÁGINA WEB Es mejor que no utilice caracteres especiales como acentos, eñes, ni espacios en blanco. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

EL SITIO O CARPETA LOCAL En Dreamweaver, el término sitio se emplea para referirse tanto a un sitio Web como a una ubicación de almacenamiento local de los documentos que pertenecen a un sitio Web. Esto último es lo que tiene que establecer antes de comenzar a crear su sitio Web. Un sitio de Dreamweaver organiza todos los documentos asociados a su sitio Web y le permite controlar y mantener vínculos, administrar y compartir archivos, y transferir los archivos del sitio a un servidor Web. La carpeta local es el directorio de trabajo. En Dreamweaver, esta carpeta se conoce como sitio local. La carpeta local suele ser una carpeta situada en su disco duro.

En la carpeta remota se almacenan los archivos, según el entorno, para fines de prueba, producción, colaboración y publicación. En Dreamweaver esta carpeta se conoce como sitio remoto. La carpeta remota es una carpeta situada en el equipo donde se ejecuta el servidor Web. El equipo donde reside el servidor Web suele ser (aunque no siempre) el sistema que permite que su sitio web esté disponible públicamente en la Web. Puede configurar un sitio de Dreamweaver utilizando el asistente para la Definición del sitio, que le orientará paso a paso a través del proceso de configuración, o utilizando las opciones avanzadas de Definición del sitio, que le permitirán configurar individualmente, según sea necesario, la carpeta local, remota y de pruebas. Cuando cree un sitio local, puede colocar los activos existentes imágenes u otro tipo de contenido) en la carpeta raíz del sitio local (la carpeta principal del sitio).

® SERIE VISUAL INFORMÁTICA PARA TODOS

Páginas Web y Redes Informáticas

7

ENTORNO DE DREAMWEAVER CS6

Barra de Menús

Áreas de trabajo

Panel de fichas Estilo Clásico

Paneles de trabajo

Panel de archivos Panel de etiquetas de código

Inspector de Propiedades

Zoom

Tamaños páginas Web

Velocidad de carga de una página

ALEX BLANCO

Informática II

8

Práctica 1: CREAR UN SITIO LOCAL Como se dijo anteriormente, el sitio local es el lugar donde se guardarán toda la página Web que se subirá a Internet, al sitio remoto, a un Hosting o servidor en la Web para luego navegar en él. En el siguiente ejemplo se construirá un sitio relacionado a la tierra, los animales, la ecología y mucho más. El sitio se llamará Medio Ambiente

1-) Dé clic en el menú Sitio y luego en la opción Nuevo sitio

Se abrirá el cuadro de diálogo Configuración del sitio para…

2-) Escriba en Nombre del sitio, cómo llamará al sitio. En este caso Medio Ambiente.

3-) Presione el botón Examinar carpeta para seleccionar la carpeta donde guardará los archivos del sitio Web. PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

9

Páginas Web y Redes Informáticas

Debe buscar una ubicación donde guardará el sitio o carpeta local

4-) Presione el botón Nueva carpeta y digite el nombre Medio Ambiente

5-) Cuando haya encontrado la ubicación donde guardará la carpeta local, presione el botón Seleccionar 6-) Regresará al cuadro de diálogo Configuración del sitio para… Presione el botón Guardar

PASE LA PÁGINA ALEX BLANCO

Informática II

10

En el panel Archivos locales aparecerán todos los archivos y carpetas que formen parte del sitio Web.

7-) Dé clic derecho en este espacio en blanco y en el menú contextual que se despliega, oprima la opción Nueva carpeta

8-) Escriba el nombre Images para crear una nueva carpeta dentro del directorio raíz y luego presione la tecla Intro

Es recomendable crear una carpeta exclusiva para las imágenes y otra para los activos, elementos multimedia, que pueda necesitar en su sitio Web. No es obligatorio hacerlo así.

® SERIE VISUAL INFORMÁTICA PARA TODOS

Páginas Web y Redes Informáticas

11

Práctica 2: ADMINISTRANDO UN SITIO LOCAL Tener este espacio permite organizar mejor nuestro sitio, o nuestros sitios web locales y que estemos diagramando poco. La administración de un sitio permite eliminar sitios locales, cambiarle archivos o configuraciones por otras más adecuadas, crear nuevos sitios entre otros. Para activarlo hágalo así. Veamos sus elementos principales.

1-) Despliegue el menú Sitio 2-) Dé clic en la opción Administrar sitios… para que se abra el cuadro de diálogo del mismo nombre.

Sitios creados y activos Edita o reconfigura un sitio

Elimina un sitio con todos sus elementos

Permite crear un nuevo sitio

ALEX BLANCO

Informática II

12

® SERIE VISUAL INFORMÁTICA PARA TODOS

13

Páginas Web y Redes Informáticas

EJERCICIO DE REPASO  Para hacer en clase: 1-) ¿Qué es lo que permite una página Web? ¿Cuáles son sus ventajas? ________________________________________________________ ________________________________________________________ ________________________________________________________ 2-) ¿Qué ventajas ofrece Dreamweaver como editor de páginas Web si las comparamos de cómo se hacía un sitio Web en los primeros años donde se usaba solo código? ________________________________________________________ ________________________________________________________ 3-) Investigue qué son los comportamientos Javascript? ________________________________________________________ ________________________________________________________ 4-) ¿Qué es un servicio de Hosting? ________________________________________________________ ________________________________________________________ 5-) ¿Qué es un Sitio Local? Explique porqué es de máxima importancia configurarlo antes de iniciar cualquier proyecto Web. ________________________________________________________ ________________________________________________________ ________________________________________________________ 6-) ¿Qué es el Sitio remoto? ________________________________________________________ ________________________________________________________

ALEX BLANCO

Informática II

14

 Ejercite sus conocimientos: 1-) Crear cinco sitios locales. Uno para cada proyecto Web de los siguientes: ▪ ▪ ▪ ▪ ▪

Clínica privada Tienda de música Almacén por departamentos Librería Almacén de ropa

2-) Para cada sitio local, crearle una carpeta para imágenes y una carpeta para artículos multimedia – música, videos u otros.

3-) Crear un último sitio desde el administrador de sitios 4-) Elimine al menos dos sitios con el administrador de sitios

® SERIE VISUAL INFORMÁTICA PARA TODOS

15

Páginas Web y Redes Informáticas

CAPÍTULO

2

L

PÁGINAS WEB BÁSICAS

AS PÁGINAS Web son los documentos que nos permiten mostrar en Internet toda clase de información. Contienen elementos multimedia, texto, tablas, formatos de color y muchos otros elementos más. Aprenderá a crearlas, guardarlas, compartirlas, configurarlas y mucho más.

Práctica 1: CREAR UNA PÁGINA WEB NUEVA Es importante que haya creado un sitio local para que vaya guardando todas las páginas Web que vaya diseñando. Con el sitio local usted podrá organizar su sitio de una manera más ordenada. Para crear una página Web haga lo siguiente:

► Creando una página cuando se inicia el programa 1-) Una forma de crear una página es cuando se inicia. Abra el programa de Dreamweaver si no lo tiene abierto.

2-) Dé clic en el botón HTML1 del panel de inicio del programa. La página aparecerá en blanco, habrá iniciado la página para comenzar a trabajar en ella

1

Este formato de página Web es el estándar básico para la mayoría de sitios en Internet. A lo largo de este libro trabajaremos con este tipo de páginas.

ALEX–BLANCO 15 –

Informática II

16

► Crear una página nueva con la barra de Menú 1-) Despliegue el menú Archivo 2-) Seleccione la opción Nuevo…

Aparecerá el cuadro de diálogo Nuevo documento

3-) Dé clic en HTML

3-) Oprima el botón Crear y la página nueva aparecerá en pantalla

® SERIE VISUAL INFORMÁTICA PARA TODOS

17

Páginas Web y Redes Informáticas

Práctica 2: AGREGAR CONTENIDO A LA PÁGINA Puede comenzar a escribir desde ya lo que quiera en la ventana Documento, en dicha ventana podrá insertar todo el contenido, toda la información que querrá compartir más adelante. En la ventana documento irá toda la información, imágenes, tablas y demás contenido.

1-) Escriba el siguiente contenido en la ventana documento. Con la tecla Intro puede crear un párrafo nuevo

2-) También puede copiar texto desde otro programa y pegarlo en la ventana Documento

ALEX BLANCO

Informática II

18

Práctica 3: FORMATOS DE NEGRITA Y CURSIVA Basta seleccionar una palabra o párrafo, presionar el botón Negrita y Cursiva para insertar ese efecto.

1-) Seleccione el texto que está en mayúsculas. Lo tomaremos como título.

2-) Dé clic en los botones Negrita y Cursiva del Inspector de Propiedades y vea el aspecto que toma el texto seleccionado

3-) Seleccione otro párrafo o palabras de las que haya escrito y aplíqueles formatos de negrita y cursiva.

Práctica 4: FORMATO DE ENCABEZADOS Este formato permite realzar un encabezado, un título o texto que nos servirá como una especie de título de lo que estemos haciendo.

1-) Seleccione el texto Medio Ambiente en El Salvador 2-) Abra la lista desplegable Formato y seleccione la opción Encabezado 1

3-) Pruebe otros encabezados

® SERIE VISUAL INFORMÁTICA PARA TODOS

19

Páginas Web y Redes Informáticas

Práctica 5: PROPIEDADES DE UNA PÁGINA Esta opción permite configurar, aplicarle ciertas características a la página como color, color de la fuente, color de relleno entre otros formatos. Veamos cómo funciona.

►Color de Fondo 1-) Dé clic en el botón Propiedades de la página… en el Inspector de propiedades

Aparecerá el cuadro de diálogo Propiedades de la página

2-) Dé clic en Color de fondo:

3-) Seleccione un color con un clic PASE LA PÁGINA

ALEX BLANCO

Informática II

20

Vea como la apariencia ha cambiado

4-) Puede colocar una imagen de fondo en vez de color usando el botón Examinar y buscar una imagen de su predilección.

® SERIE VISUAL INFORMÁTICA PARA TODOS

21

Páginas Web y Redes Informáticas

Práctica 6: INSERTAR UN TÍTULO A LA PÁGINA Este título será el nombre de la página. Aparecerá en la barra de título y en la pestaña del navegador que esté ocupando. Simplemente servirá como un identificador.

Para insertar un título, hágalo así:

1-) Dé clic en la caja de texto Título y borre Documento sin título y escriba Inicio – Medio Ambiente

2-) Presione la tecla Intro

Cada página debe llevar su respectivo título para que se pueda identificar individualmente el contenido que ésta lleva. Como se dijo arriba, el título aparecerá en la barra de título y en la pestaña respectiva.

ALEX BLANCO

Informática II

22

Práctica 7: GUARDAR LA PÁGINA WEB Para visualizar las páginas, primero debe guardarlas. Como se dijo antes, debe guardar en la carpeta que nos sirve se sitio local. En este caso, en la carpeta Medio Ambiente.

1-) Despliegue el menú Archivo 2-) Dé clic en la opción Guardar como…

Se abrirá el cuadro de diálogo

Guardar como

® SERIE VISUAL INFORMÁTICA PARA TODOS

23

Pรกginas Web y Redes Informรกticas

3-) Esta pรกgina nos servirรก como la pรกgina de inicio. Su nombre serรก Index. Ese serรก el nombre que se escribirรก en la caja de texto Nombre

4-) Presione el botรณn Guardar La pรกgina guardada aparecerรก en el panel Archivos. Si no aparece, dรฉ clic en un espacio en blanco y luego presione la tecla de funciรณn F5

ALEX BLANCO

Informática II

24

Práctica 8: VISTA PREVIA EN UN NAVEGADOR Esta opción le permitirá ver en un navegador lo que ha hecho hasta ahora. Le permitirá configurar su navegador principal de prueba, un secundario y otros que quiera probar. Esto es importante porque permite ver preliminarmente su trabajo y el comportamiento de su página en un determinado navegador.

Mozilla Firefox, Google Chrome, Internet Explorer, Maxthon, Opera y muchos otros tienen la misma función de mostrar sitios Web, aunque en pequeña escala puede cambiar ciertos comportamientos en cuanto a los objetos que la página posea como las tablas, elementos multimedia, y otros más. Configuremos algunos navegadores. Para hacerlo, hágalo así:

1-) Presione el botón Vista previa/Depurar en navegador

2-) Dé clic en la opción Vista previa en Firefox (o en otro navegador de su predilección). Vea la apariencia en el navegador

Pestaña con el título de la página

PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

25

Páginas Web y Redes Informáticas

3-) Cierre el navegador. Vuelva a Dreamweaver y, de la misma manera, seleccione otro navegador. En mi caso seleccionaré un navegador que recomiendo por su velocidad, rendimiento y por ser muy liviano a la hora de navegar: Maxthon

Pestaña con el título de la página

ALEX BLANCO

Informática II

26

Práctica 9: CONFIGURAR LOS NAVEGADORES Si desea agregar o quitar navegadores para ver las páginas de forma preliminar, debe configurar esta opción. Vea como:

1-) Oprima el botón Vista previa y seleccione la opción Editar lista de navegadores…

Estos botones permiten agregar o quitar navegadores

Lista de navegadores existentes

Este botón permite configurar cada navegador seleccionado, permitiendo cambios y otros procedimientos

Permiten configurar el navegador principal para pruebas y otro llamado secundario

2-) Cuando haya hecho los cambios correspondientes, presione el botón Aceptar

® SERIE VISUAL INFORMÁTICA PARA TODOS

27

Páginas Web y Redes Informáticas

EJERCICIO DE REPASO  Para hacer en clase o en casa: 1-) ¿Qué es una página Web? ¿Cuál es su utilidad? Explique ________________________________________________________ ________________________________________________________ ________________________________________________________ 2-) Investigue algo más acerca de los formatos HTML y sus diferentes versiones y porqué son considerados estándar en la elaboración de páginas Web. ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ 3-) ¿En qué consiste el formato de Encabezado? ________________________________________________________ ________________________________________________________ 4-) ¿Qué cambios pueden hacerse desde las Propiedades de la página…? ________________________________________________________ ________________________________________________________ ________________________________________________________ 5-) ¿Cuál es la función de la opción Título? ________________________________________________________ ________________________________________________________ 6-) ¿Cómo se guarda una página Web? ________________________________________________________ ________________________________________________________

ALEX BLANCO

Informática II

28

7-) ¿Qué función tiene el panel Archivos cuando se guarda una página Web? Explique ________________________________________________________ ________________________________________________________ ________________________________________________________ 8-) ¿Para qué sirve la opción Vista previa de un navegador? ________________________________________________________ ________________________________________________________

 Ejercite sus conocimientos: 1-) Crear una nueva página Web con su respectivo Sitio local 2-) Insértele un Título 3-) Crear 3 páginas diferentes. El contenido de la página Web es sobre El Reino Animal 4-) Aplíqueles formatos de negrita y cursiva donde crea conveniente.

5-) Agréguele un formato de Encabezado al texto que vaya elegir como tema de los contenidos.

6-) Cámbiele color de fondo a cada página creada 7-) Inserte un Título a cada página creada 8-) Guarde cada página creada. Recuerde que debe aparecer en el panel Archivos 10) Vea las páginas creadas en al menos tres navegadores 11) Configure un navegador que quiera que sea el principal

® SERIE VISUAL INFORMÁTICA PARA TODOS

29

Páginas Web y Redes Informáticas

CAPÍTULO

3

L

FORMATOS CSS PARA TEXTO

AS HOJAS de estilo en cascada (CSS por sus siglas en inglés) son un estándar desarrollado para permitir a los diseñadores un control más preciso sobre ciertos elementos de una página web. Una gran mayoría de las características de CSS son controles tipográficos. Muchas de las limitantes que el HTML tenía las ha llenado el diseño CSS, convirtiéndose en un estándar web en la actualidad.

Un Estilo es un grupo de atributos que se llaman por un único nombre y una hoja de estilos es un grupo de estilos. Las hojas de estilo simplifican bastante el formato del texto en una página web, así como la extensión de las clases de formato que podemos aplicar.

Cuando usted actualice un estilo, todas las instancias de ese estilo se actualizarán automáticamente como veremos más adelante.

Práctica 1: REALIZAR CAMBIOS DE FORMATO AL TEXTO Anteriormente estuvimos trabajando con estilos de formato HTML para variar un poco el formato de texto. El formato CSS para texto nos permitirá hacer varios cambios diferentes. Siga los procedimientos siguientes:

1-) Abra el archivo Index de la carpeta de archivos de práctica Ambiente_1 2-) Seleccione el párrafo sombreado en la siguiente página.

PASE LA PÁGINA

ALEX BLANCO – 29 –

Informática II

30

Párrafo que debe seleccionar

3-) Dé clic en el botón CSS para activar los formatos CSS para texto Propiedades

4-) En la lista desplegable Regla de destino, dé clic en la opción <Nuevo estilo en línea>

PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

31

Páginas Web y Redes Informáticas

5-) En la lista desplegable Fuente, escoja la familia de fuentes Arial, Helvética, sans-serif

Note que la fuente (Tipo de letra) habrá cambiado

6-) Seleccione el siguiente párrafo y escoja la fuente Georgia

ALEX BLANCO

Informática II

32

Práctica 2: AGREGAR NUEVAS FUENTES Dreamweaver ya trae familias de fuentes para aplicarlas a un texto o párrafo. Usted puede agregar sus propias fuentes si así lo desea. Hágalo así:

1-) Abra la lista desplegable Fuente y dé clic en la opción Editar lista de fuentes…

Aparecerá el cuadro de diálogo Editar lista de fuentes.

Estos botones ordenan las fuentes ya agregadas

Este botón permite buscar nuevas fuentes

Aquí puede buscar nuevas fuentes para agregar

Estos botones agregan o quitan fuentes que usted haya escogido PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

33

Páginas Web y Redes Informáticas

2-) Busque la fuente Impact aquí en Fuentes disponibles

3-) Dé clic en el botón Agregar fuente

cuando haya encontrado y seleccionado la

La fuente seleccionada aparecerá aquí

4-) Dé clic en el botón Aceptar

PASE LA PÁGINA

ALEX BLANCO

Informática II

34

5-) Abra ahora nuevamente la lista desplegable Fuente y verá que la fuente estará agregada, lista para que usted pueda ocuparla.

® SERIE VISUAL INFORMÁTICA PARA TODOS

35

Páginas Web y Redes Informáticas

Práctica 3: APLICAR FORMATO DE COLOR A UN TEXTO Al igual que se hizo en las lecciones anteriores, se debe seleccionar el texto y escoger la línea a la que debe aplicársele formato de color. Siga los pasos que se dan a continuación:

1-) Seleccione el título MEDIO AMBIENTE EN EL SALVADOR 2-) Dé clic en el botón Regla de destino para escoger la línea a la que se aplicará formato.

3-) Dé clic en <Nuevo estilo en línea> 4-) Oprima el botón de color y seleccione un color, por ejemplo, Verde

5-) Note como el título adquiere ese color. Seleccione el siguiente párrafo y aplíquele un color azul.

6-) Siga cambiando de color a otros textos o párrafos.

ALEX BLANCO

Informática II

36

EJERCICIO DE REPASO  Para hacer en clase o en casa: 1-) Explique qué son los estilos CSS y en qué consisten. ________________________________________________________ ________________________________________________________ ________________________________________________________ 2-) ¿Cuál es la diferencia entre un Estilo y una Hoja de estilos? ________________________________________________________ ________________________________________________________ 3-) ¿Por qué debe escoger la opción <Nuevo estilo en línea>?

Explique ________________________________________________________ ________________________________________________________ 4-) ¿Qué son las Familias de fuentes? ________________________________________________________ ________________________________________________________ 5-) Enumere y dé los pasos para insertar un nuevo tipo de fuente, tamaño y color a un texto. ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________ ________________________________________________________

® SERIE VISUAL INFORMÁTICA PARA TODOS

37

Páginas Web y Redes Informáticas

CAPÍTULO

4

E

IMÁGENES EN UNA PÁGINA WEB

L USO de imágenes en una página Web permite muchas cosas tales como llamar más la atención, la lectura más amena de un sitio, darle colorido y sentido a la información entre muchas otras particularidades. Las imágenes insertadas proporcionan, además, estética y realce a nuestro sitio en la Web. Práctica 1: INSERTAR IMÁGENES EN MI PÁGINA WEB Para insertar imágenes en una página Web lo puede hacer desde la barra de Menú o desde el botón Imágenes de la ficha de opciones Común.

1-) Dé clic en el botón Imágenes de la ficha de opciones Común

2-) Aparecerá el cuadro de diálogo Seleccionar origen de imagen. Seleccione la imagen que necesite dando un clic y luego presione el botón Aceptar

PASE LA PÁGINA

ALEX – 3BLANCO –

193

Informática II

38

3-) Dé clic en el botón Aceptar del cuadro de diálogo que se abre

® SERIE VISUAL INFORMÁTICA PARA TODOS

39

Páginas Web y Redes Informáticas

4-) La imagen quedará insertada en la ventana Documento tal y como se ve a continuación

Las imágenes deben ser insertadas desde el sitio local que se configuró al principio de comenzar la página Web.

ALEX BLANCO

Informática II

40

Práctica 2: REDIMENSIONAR EL TAMAÑO DE UNA IMAGEN Existen dos formas de redimensionar una imagen: a través del Inspector de Propiedades o de forma manual con los manejadores que aparecen cuando la imagen se encuentra activa.

►Redimensionamiento de imágenes de forma manual 1-) Note los manejadores o controladores de la imagen al lado derecho.

2-) Arrastre uno de ellos a donde usted crea conveniente. El de la derecha centrada cambia la imagen de forma horizontal. El de abajo al centro el tamaño vertical. El de la esquina cambia ambos lados de forma simultánea.

► Redimensionamiento de imágenes con el Inspector de Propiedades 1-) Dé clic en los campos An. y Al. (Ancho y alto) como se muestran a continuación. Los tamaños están en píxeles, porque esa es la unidad de medida digital en pantalla.

PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

41

Páginas Web y Redes Informáticas

2-) Dé un clic en el botón de candado a la derecha. Esta opción bloquea el porcentaje de proporción de cambio de tamaño. Si lo cambia en un lado, cambiará automáticamente en el otro. Si desea mantener las mismas proporciones NO lo desactive

ALEX BLANCO

Informática II

42

Práctica 3: RECORTAR IMÁGENES Una imagen podemos ocuparla de forma completa o quizás solo necesitemos una parte de ella. Si necesitamos solo una parte, podemos recortarla.

1-) Active la imagen que desea recortar 2-) Dé clic en el botón Recortar del Inspector de propiedades señalado a continuación

3-) Aparecerá un cuadro de advertencia que le indica que alterará la imagen permanentemente. Presione el botón Aceptar

4-) Recorte la imagen con los manejadores que aparecen alrededor de la imagen.

Puede cambiar el tamaño del recorte a su gusto. Cuando haya terminado, presione la tecla Intro.

® SERIE VISUAL INFORMÁTICA PARA TODOS

43

Páginas Web y Redes Informáticas

Práctica 4: OPTIMIZACIÓN DE IMÁGENES Para que una imagen no se tarde en cargar en el navegador, ésta no debe ser “pesada”. No debe tener demasiados Megabytes. Para ello, podemos optimizarla o hacerla “bajar de peso” con el botón de Optimización de imágenes. Realice los pasos siguientes:

1-) Active la imagen que desea optimizar 2-) Dé clic en el botón Optimización de imágenes señalado a continuación

3-) Baje la calidad de la imagen 10 puntos. Verá cómo cambia la apariencia de la imagen un poco en cuanto a calidad. Observe la parte de abajo como disminuye la medida en KB (puede ser en MB si la imagen es más grande).

Esta opción le permitirá equilibrar estas opciones de peso.

ALEX BLANCO

Informática II

44

Práctica 5: BRILLO Y CONTRASTE DE LAS IMÁGENES Puede cambiar el brillo que tienen las imágenes, así como su contraste desde Dreamweaver sin abrir un editor de imágenes como Photoshop u otro editor de imágenes.

Para hacerlo, hágalo así:

1-) Active la imagen que ocupará para hacer esta práctica 2-) Dé clic en el botón Brillo y contraste que se señala en la ilustración siguiente

3-) Aparecerá el cuadro de diálogo Brillo y contraste

4-) Mueva el controlador de brillo y luego el de contraste y vea la imagen como cambia de aspecto 5-) Dé clic en el botón Aceptar para guardar los cambios.

® SERIE VISUAL INFORMÁTICA PARA TODOS

45

Páginas Web y Redes Informáticas

EJERCICIO DE REPASO  Para hacer en clase: 1-) ¿Qué ventajas proporciona el uso de imágenes en una página Web? Explique ________________________________________________________ ________________________________________________________ 2-) Dos formas de insertar imágenes son: ________________________________________________________ ________________________________________________________ 3-) ¿Por qué las imágenes que inserte en una página Web deben estar dentro de la carpeta Imágenes del sitio local? ________________________________________________________ ________________________________________________________ 4-) ¿Cuáles son las dos formas de redimensionar una imagen? ________________________________________________________ ________________________________________________________ ________________________________________________________ 5-) ¿Para qué sirve la herramienta Recortar? ________________________________________________________ ________________________________________________________ 6-) ¿En qué consiste la Optimización de imágenes? Explique ________________________________________________________ ________________________________________________________ 7-) ¿Cómo puede configurar el Brillo y Contraste de una imagen con Dreamweaver? Explique ________________________________________________________ ________________________________________________________

ALEX BLANCO

Informática II

46

 Ejercite sus conocimientos: 1-) En una página Web en blanco, inserte al menos dos imágenes 2-) Redimensiones ambas imágenes 3-) Practique la herramienta Recortar para obtener una parte de la imagen 4-) Una de las imágenes, optimícela 5-) Aplique brillo y contraste a ambas imágenes

® SERIE VISUAL INFORMÁTICA PARA TODOS

47

Páginas Web y Redes Informáticas

CAPÍTULO

5

U

USO DE HIPERVÍNCULOS

N HIPERVÍNCULO o simplemente Vínculo, es un puntero que lleva de una página Web a otra página o archivo.

Permiten enlazar todas las páginas. Permiten la interconexión de toda la información a nivel mundial. Todas las páginas tienen hipervínculos que conectan y nos llevan a muchísimos sitios. Wikipedia, por mencionar solo un ejemplo, trabaja de los hipervínculos para llevarnos de un conocimiento a otro.

Práctica 1: CREAR UN HIPERVÍNCULO Como se dijo al principio, los hipervínculos nos llevan de un lugar a otro de un sitio Web, aunque también pueden hacerlo dentro de una misma página cuando el contenido es muy largo. Veamos el siguiente ejemplo:

1-) Abra Dreamweaver si no lo tiene abierto 2-) Abra la página Index que está en la carpeta de ejemplo Ambiente_1 En la parte inferior del contenido, aparecen tres palabras o frases. Éstas nos servirán para enlazar la página principal con las otras dos páginas que se encuentran en este sitio.

Index es el nombre estándar que se le da a la página inicio de un sitio Web. Cada vez que usted elabore una página principal, ésta debe llevar como nombre Index

PASE LA PÁGINA

– 47 – ALEX BLANCO 203

Informática II

48

3-) Seleccione Factores Naturales

4-) Dé clic derecho en el sombreado y en el menú emergente que se despliega, seleccione la opción Crear vínculo

PASE LA PÁGINA

® SERIE VISUAL INFORMÁTICA PARA TODOS

49

Páginas Web y Redes Informáticas

Se desplegará el cuadro de diálogo Seleccionar archivo

5-) Seleccione el archivo Factores_naturales 6-) Presione el botón Aceptar

El texto cambiará de apariencia. Al guardar, en el navegador solo dará un clic y accederá a la página señalada.

PASE LA PÁGINA

ALEX BLANCO

Informática II

50

7-) Guarde los cambios 8-) Abra la página Factores_naturales que está en la carpeta de archivos 9-) Sombree el texto Index e inserte un vínculo hacia la página Index

8-) Ahora sombree Concepto de Ambiente e insértele un vínculo hacia esa página. Guarde los cambios.

9-) Abra la página Concepto_ambiente e inserte un vínculo a Index y a Factores_ambiente 10) Guarde los cambios 11) Abra la vista previa del navegador y dé clic sobre cada uno de los vínculos insertados. Vea como navega de una página otra. Así de simple es la manera de crear enlaces entre una página a otra.

Para quitar un vínculo, debe seguir los mismos pasos anteriores, solo que en vez de crear, debe seleccionar la opción Quitar vínculo

® SERIE VISUAL INFORMÁTICA PARA TODOS

51

Páginas Web y Redes Informáticas

CAPÍTULO

6 USO DE TABLAS

L

AS TABLAS han sido la principal herramienta de maquetado y estructuración de una página Web casi desde sus comienzos. En ellas puede colocar texto, imágenes, videos y mucho más. Las tablas permiten darle forma a una página Web. En pocas palabras, permiten ubicar y organizar el contenido de una página completa.

Práctica 1: INSERTAR UNA TABLA Vamos insertar una tabla que contenga 3 columnas y 10 líneas y un ancho de 800 píxeles. Se configurará desde el cuadro de diálogo Tabla

1-) Abra una página nueva en blanco 2-) Despliegue el menú Insertar 3-) Dé clic en la opción Tabla

– 51 –

ALEX BLANCO

PASE LA PÁGINA

Informática II

52

Aparecerá el cuadro de diálogo Tabla para configurar las características de la tabla

4-) Escriba las características de la tabla en los espacios correspondientes: ancho 800 px, 10 filas y 3 columnas tal y como se ve en el gráfico de arriba.

5-) Presione el botón Aceptar

® SERIE VISUAL INFORMÁTICA PARA TODOS

53

Páginas Web y Redes Informáticas

Práctica 2: ANCHO Y ALTO DE LAS CELDAS Esta opción permitirá estructurar una tabla, así como sus respectivas celdas dejándolas a un tamaño más personalizado.

1-) Señale un borde de la celda y el cursor cambiará de forma

2-) Presione el borde y arrástrelo a la izquierda o derecha o hacia abajo o arriba, como crea usted conveniente. De esa manera habrá cambiado ancho y alto de las celdas de una tabla

ALEX BLANCO

Informática II

54

Práctica 3: CENTRAR UNA TABLA Y SU CONTENIDO Este procedimiento permitirá centrar no solo la tabla, sino el contenido de la misma página Web ya puesta en un navegador. Hágalo así:

1-) La tabla anterior debe estar seleccionada 2-) En el Inspector de propiedades, abra la lista desplegable Alinear y dé clic en el botón Centro

3-) Vea como la tabla queda centrada 4-) Guarde los cambios con el nombre Tabla1 5-) Despliegue la Vista previa para verla con el navegador. La tabla debe quedar centrada como se ve a continuación.

® SERIE VISUAL INFORMÁTICA PARA TODOS

55

Páginas Web y Redes Informáticas

Práctica 4: BORRAR BORDES Y CELDAS Para personalizar de mejor manera una tabla, pueden borrarse los bordes de una tabla o una o varias celdas para colocar dentro de ella contenido de texto o imágenes.

Pueden combinarse varias celdas para que sean una o pueden dividirse en varias celdas.

1-) Seleccione las primeras tres celdas tal y como se ve a continuación:

2-) En el Inspector de propiedades se activarán las opciones para una tabla. Dé clic en la opción Combinar

► Dividir una celda en varias celdas: columnas o filas 1-) Escoja una celda 2-) Dé clic en el botón Dividir

ALEX BLANCO

Informática II

56

En este cuadro de diálogo podrá detallar el número de filas o columnas en que se dividirá.

3-) Señale una casilla. Divida una celda para que contenga 5 columnas, tal y como se muestra en el cuadro de arriba 4-) Presione el botón Aceptar y observe la apariencia de la celda

® SERIE VISUAL INFORMÁTICA PARA TODOS

57

Páginas Web y Redes Informáticas

Práctica 5: COLOR DE RELLENO A UNA CELDA El color de relleno permite aplicarle un color de fondo a una celda o a toda la tabla.

Los encabezados de una tabla son unos de los más coloreados con un relleno de fondo.

Para aplicar un color de relleno hágalo así:

1-) Seleccione una o varias celdas en la tabla 2-) En el Inspector de propiedades dé clic en la opción Fondo y escoja un color

Observe como las celdas han cambiado de color

ALEX BLANCO

Informática II

58

® SERIE VISUAL INFORMÁTICA PARA TODOS

59

Páginas Web y Redes Informáticas

EJERCICIO DE REPASO  Para hacer en clase: 1-) ¿Qué son los hipervínculos y en qué consisten? Explique ________________________________________________________ ________________________________________________________ 2-) ¿Por qué debe llamarse Index la página principal de cualquier página Web? ________________________________________________________ ________________________________________________________ 3-) ¿Cuáles son los pasos para quitar un vínculo? ________________________________________________________ ________________________________________________________ 4-) ¿Cómo se inserta una tabla? ________________________________________________________ ________________________________________________________ 5-) ¿Qué opciones puede configurar desde el cuadro de diálogo Tabla?

Explique ________________________________________________________ ________________________________________________________ ________________________________________________________ 6-) ¿Cuáles son los pasos para alinear al centro una tabla? ________________________________________________________ ________________________________________________________

ALEX BLANCO

Informática II

60

 Ejercite sus conocimientos: 1-) Crear un sitio local que esté relacionado a Los Animales 2-) Crear la página principal. Ésta debe servir de base para las demás.

3-) Crear 10 páginas con temas diferentes siempre relacionados a los animales 4-) Las páginas deben estar basadas en tablas 5-) Puede descargar información de diferentes fuentes de Internet, copiarlas y pegarlas. Lo que interesa no es el contenido sino el correcto uso de las herramientas del programa 6-) Debe llevar imágenes insertadas 7-) Todas las páginas deben estar vinculadas unas con las otras 8-) La página de inicio debe tener vínculos hacia todas las demás páginas.

9-) Inserte vínculos a las demás páginas, de tal manera que se pueda navegar desde cada una de ellas a todas las demás.

10) Guarde todas las páginas y abra la página principal con la vista previa en un navegador 11) Después que haya comprobado que todos los vínculos funcionan, cierre el programa

® SERIE VISUAL INFORMÁTICA PARA TODOS

61

Páginas Web y Redes Informáticas

CAPÍTULO

7

L

CONFIGURACIÓN DE ELEMENTOS SPRY

OS ELEMENTOS Spry permiten darle una interactividad a la navegación. Son elementos que utilizan cortos códigos de JavaScript para que puedan verse con efectos animados.

Dreamweaver permite insertar estos elementos de forma fácil y ágil sin necesidad de hacer uso de código, aunque el usuario medio o avanzado puede personalizarlo. Estos elementos aparecen desde la versión CS3.

LOS WIDGETS Un Widget es una pequeña aplicación que tienen como principal cometido mostrar y dar fácil acceso a algunas funciones, en nuestro caso, de una página Web. Otro aspecto que los distingue y diferencia respecto a las aplicaciones normales, es que nos ofrecen informaciones de manera muy visual y sin requerir ser abiertos. Eso es lo que son los elementos Spry.

Un widget consta de tres partes. Estructura, comportamiento y estilo. Algunos de los widgets más llamativos y usados son el acordeón, la barra de menús de Spry o los paneles en fichas. A continuación, practicaremos la inserción de algunos de estos elementos a una página Web. Los elementos Spry puede encontrarlos en el menú Insertar, en la opción Spry o puede encontrarlos en el panel de fichas Spry del área de trabajo Clásico.

ALEX BLANCO – 61 –

Informática II

62

Práctica 1: BOTONES Y BARRA DE MENÚ DE NAVEGACIÓN Este elemento nos permitirá navegar e ir a diferentes páginas dentro del sitio con solo señalar y dar un clic. Podemos configurarlo y personalizarlo de acuerdo al gusto o a la petición que se nos haya hecho, todo, sin necesidad de programar.

1-) Abra el archivo de práctica Nav_spry 2-) Ubíquese, con un clic, en el espacio que se señala a continuación

3-) Dé clic en el botón Barra de menús de Spry

4-) Aparecerá el cuadro de diálogo Barra de menús de Spry. Señale la opción Horizontal y oprima el botón Aceptar

PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

63

Páginas Web y Redes Informáticas

La barra de menús aparecerá en el espacio de la tabla que seleccionamos

5-) Guarde la página. Al hacerlo aparecerá el cuadro de diálogo Copiar archivos dependientes. Oprima el botón Aceptar

Como se dijo anteriormente, los elementos Spry utilizan porciones de código JavaScript y CSS. Estos se guardan como archivos distintos y aparte del archivo HTML, pero, siempre en la misma carpeta local.

6-) Abra su navegador2.

PASE LA PÁGINA

2

Acá utilizo Mozilla Firefox, aunque usted puede desplegarlo con Chrome, Opera, Safari u otro navegador de su predilección

ALEX BLANCO

Informática II

64

7-) Dé clic en el botón de Vista previa barra de navegación en su navegador

para ver cómo funcionan los botones y

Pase el puntero del Mouse en la barra de menús y despliéguelos

8-) Señale las opciones de navegación y vea como se despliegan aquellos botones que contienen un menú.

® SERIE VISUAL INFORMÁTICA PARA TODOS

65

Páginas Web y Redes Informáticas

Práctica 2: CAMBIAR EL NOMBRE A LAS OPCIONES De forma predeterminada, cada una de las opciones de menú, así como de los submenús como veremos más adelante presentan un nombre como Elemento 1 o Elemento 3.3. Para cambiar dichos nombres es bien fácil. Siga el procedimiento con cuidado a continuación: 1-) Siguiendo con el ejemplo anterior, con el puntero del Mouse, señale el menú hasta que se despliegue el control celeste.

2-) Dé un clic en dicho control celeste. En la parte inferior, en el Inspector de propiedades, se activan una serie de opciones de la Barra de menús.

3-) Active la opción Elemento 1 del primer cuadro y luego dé clic aquí 4-) Borre Elemento 1 y escriba Inicio. Oprima la tecla Intro Note el cambio de nombre en el botón

PASE LA PÁGINA ALEX BLANCO

Informática II

66

5-) Seleccione la etiqueta del nombre del botón Elemento 2 con el Mouse

6-) Escriba como nombre Plantas. Dé clic fuera de la barra de menú. La etiqueta del nombre en el botón habrá cambiado.

7-) De la misma manera, cambie el nombre de los siguientes elementos 3 y 4 con los siguientes nombres: Animales y Galería, así:

® SERIE VISUAL INFORMÁTICA PARA TODOS

67

Páginas Web y Redes Informáticas

Práctica 3: AÑADIR Y QUITAR SUBMENÚS Este es uno de los aspectos más importantes para configurar en el menú: añadir submenús o quitarlos donde no se necesiten. A través de los submenús podremos darle al internauta las opciones para que puedan conocer de un vistazo los diferentes elementos y lugares de nuestra página Web.

► QUITAR UN SUBMENÚ De forma predeterminada, cuando usted inserta una barra de navegación, automáticamente se insertan la barra con dos submenús, en el primero como en el penúltimo tal y como ya observó.

En este ejemplo, eliminaremos los submenús de Inicio y de Animales. Aunque de este último, los volveremos a insertar más adelante.

1-) Active la barra de menú Spry con un clic en la barrita celeste

3-) Dé clic en Inicio y luego en Elemento 1.1 abajo, en el Inspector de propiedades.

4-) Oprima el botón Quitar (–) y vea como se eliminan las opciones del submenú

PASE LA PÁGINA ALEX BLANCO

Informática II

68

5-) De la misma manera, quite los otros dos elementos restantes 6-) Como lo hizo en los pasos anteriores, elimine el submenú del botón desplegable Animales.

En el menú Animales, existe un submenú de opciones dentro de otro. Esas opciones se denominan hijos. Si aparece el siguiente cuadro de diálogo, solo presione el botón Aceptar. Esto si eliminará todas las opciones. Caso contrario, vaya eliminando una por una las opciones que desea quitar.

► AÑADIR UN MENÚ O SUBMENÚ A la barra de navegación que estamos construyendo, le agregaremos un menú nuevo y dos submenús. Para ello usaremos el botón Añadir (+) donde deseamos que se coloque.

1-) Señale la barra y cuando se despliegue el control de la barra de menú Spry, dé un clic sobre dicho control.

2-) Se activarán las opciones en el Inspector de propiedades. Seleccione la celda Plantas y oprima el botón (+) para añadir una nueva opción de submenú

PASE LA PÁGINA

® SERIE VISUAL INFORMÁTICA PARA TODOS

69

Páginas Web y Redes Informáticas

3-) Agregue dos submenús como se señalan abajo y escríbale los nombres que ahí aparecen: Acuáticas y Terrestres

4-) Ahora, seleccione la celda Animales y…

5-) …agregue cinco nuevas opciones: Mamíferos, Aves, Reptiles, Insectos y Microorganismos.

6-) Debe quedar como se ve delante de la siguiente ventana. Guarde

PASE LA PÁGINA ALEX BLANCO

Informática II

70

7-) Guarde la página (Ctrl + S) y observe el funcionamiento activando la vista de diseño a la vista En vivo

8-) Señale cada botón de menú y observe cómo se despliegan los menús de opciones

9-) Presione nuevamente el botón En vivo para desactivar esta opción y volver a la vista Diseño.

La vista En vivo permite tener vista previa del funcionamiento de una página Web o de sus elementos sin necesidad de abrir en un navegador.

® SERIE VISUAL INFORMÁTICA PARA TODOS

71

Páginas Web y Redes Informáticas

Práctica 4: CAMBIAR COLOR A LA BARRA DE MENÚ SPRY ¡Claro que puede personalizar la barra en su color de predilección! Para hacerlo, debemos utilizar las opciones que Dreamweaver trae en el panel de elementos Spry que está a su derecha.

A continuación, cambiaremos el color de fondo de la barra completa: de sus botones, de sus opciones en menús y de la fuente.

1-) Dé un clic izquierdo en el control de la barra de menú

2-) Oprima el botón Todo del panel Estilos CSS

Se activarán las reglas u opciones de configuración de cada elemento que conforma la barra de menú

3-) Busque la regla ul.MenuBarHorizontal a y actívela dando un clic sobre ella.

Acá puede cambiar colores para el fondo y para la letra. Le recomiendo use los mismos que aquí se utilizan

ALEX BLANCO

Informática II

72

4-) Cambie los colores para el fondo de relleno – background-color – y de texto – color – respectivamente usando el botón de color que se despliega con un clic

Observe la apariencia que ha tomado

En este momento se ha cambiado la apariencia de la barra de menú cuando no se señala con el Mouse. Ahora, cambiaremos dicha apariencia cuando el puntero del Mouse señala un elemento de la barra.

5-) Siempre en las propiedades de Estilos CSS, active la regla siguiente:

6-) Cambie el nuevo color de fondo (#CF3) y de la letra (#000) señalados aquí PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

73

Páginas Web y Redes Informáticas

7-) Active la vista En vivo y pruebe la barra de menú pasando el Mouse por ella. Vea:

8-) Desactive la vista En vivo. Guarde los cambios (Ctrl + S)

Práctica 5: PANEL EN FICHAS SPRY Este elemento permite colocar dos, tres o más conjuntos de información en un mismo espacio y se puede acceder a dichos contenidos con tan un solo clic a una pestaña o ficha.

1-) Abra el archivo de práctica Nav_spry 2-) Vaya al área de contenido. Dé un cli ahí

3-) El cursor aparecerá centrada de forma vertical. Debemos colocar el panel de fichas desde la parte superior donde la flecha lo indica seleccionando la opción Vert.

ALEX BLANCO

Informática II

74

4-) Dé clic en la lista desplegable Vert. Y active la opción Superior

5-) El cursor aperecerá en la parte superior

6-) Vaya a la ficha Spry y dé un clic en el botón Paneles en fichas Spry

El panel se insertará en el espacio señalado

PASE LA PÁGINA ® SERIE VISUAL INFORMÁTICA PARA TODOS

75

Páginas Web y Redes Informáticas

7-) Como hizo con la barra de menú Spry de las prácticas anteriores, seleccione las etiquetas Ficha 1 y Ficha 2 y cámbielas por las etiquetas que se ven abajo.

8-) Cuando termine de escribir la etiqueta Bacterias, pulse el ojo que se activa en la ficha Virus cuando pasa el puntero del Mouse

9-) Al pulsar sobre el botón Ojo, se desplegará Contenido 1. Borre Contenido 1 y escriba lo que se ve abajo.

10) Pulse el botón Ojo en la ficha Bacterias para activar el espacio para el siguiente contenido. Escriba la siguiente información.

PASE LA PÁGINA

ALEX BLANCO

Informática II

76

11) Guarde los cambios. Active la vista En vivo y pulse dé clic en ambas fichas. Ahora, vea el funcionamiento en su navegador dando un clic sobre cada ficha. Cierre el navegador

12) Cierre el navegador

® SERIE VISUAL INFORMÁTICA PARA TODOS

77

Páginas Web y Redes Informáticas

Práctica 6: COMBINANDO COLORES Al igual que en la barra de menú Spry de prácticas anteriores, también podemos personalizar los colores. Siga el siguiente procedimiento con cuidado y observe los elementos CSS que debe tocar: 1-) Active el panel Estilos CSS que aparece al lado derecho y presione el botón Todo

2-) Dé clic en el botón (+) para activar el resto de reglas CSS 3-) Dé clic en la regla TabbedPanelsTabSelected.

Esta regla dará color a la ficha que tenemos activada en este momento, la ficha Virus.

4-) Dé clic en el botón de color de fondo, Background-color 5-) Seleccione un color, por ejemplo #9C0

PASE LA PÁGINA ALEX BLANCO

Informática II

78

La ficha activa habrá cambiado de color

6-) Ahora, vaya a la regla TabbedPanelsTab con un clic

7-) Esta regla le permitirá cambiar el color al fondo de la ficha que no se encuentra activa en este momento. En este caso, a la ficha Bacterias desde el botón de color. Aplíquele un color verde un poco más oscuro

8-) Ahora, seleccione la regla CSS TabbedPanelsTabHover

9-) Seleccione el color #CF0. Esta regla permitirá cambiar el color de la ficha que no está seleccionada con solo pasar el puntero del Mouse encima

® SERIE VISUAL INFORMÁTICA PARA TODOS

79

Pรกginas Web y Redes Informรกticas

10) Active la vista En vivo y pruebe con el mouse las fichas

Observe la apariencia de la ficha Bacterias como cambia cuando se pasa el puntero del Mouse encima de dicha ficha.

11) Vaya ahora a la regla CSS TabbedPanelsContentGroup y cambie el color de fondo donde va el contenido. El color puede ser un verde suave 12) Guarde los cambios, pero con otro nombre

ALEX BLANCO

Informática II

80

Práctica 7: CAMBIO DE TIPO DE FUENTE También puede cambiar el tipo de fuente, tanto en las etiquetas de nombres del elemento Spry como dentro del contenido. Para hacer el cambio, debe tener activada las propiedades CSS en el Inspector de propiedades.

1-) Active las propiedades CSS si no están activadas

2-) Seleccione el contenido Virus

3-) Haga clic en el botón de lista desplegable Regla de destino y seleccione la opción <Nuevo estilo en línea>

PASE LA PÁGINA

® SERIE VISUAL INFORMÁTICA PARA TODOS

81

Páginas Web y Redes Informáticas

4-) Ahora, despliegue la lista Fuente y seleccione la opción Arial, Helvética, sans-serif El texto cambiará de fuente con la seleccionada

5-) De la misma manera, active la ficha Bacterias y cambie el tipo de fuente al contenido.

6-) Guarde los cambios con el nombre Fichas_personalizadas

Dentro de cada ficha, usted puede colocar texto y también otros elementos como imágenes.

ALEX BLANCO

Informática II

82

EJERCICIO DE REPASO  Para hacer en clase: 1-) ¿Qué son los elementos Spry y cuál es su utilidad? Explique ________________________________________________________ ________________________________________________________ 2-) ¿De qué están hechos estos elementos? ________________________________________________________ 3-) ¿En qué consisten los Widgets? ________________________________________________________ ________________________________________________________ 4-) ¿Cuál es la utilidad de la barra de menú de navegación? ________________________________________________________ ________________________________________________________ 5-) ¿Cómo se le puede cambiar el nombre a las opciones de la barra de menú de navegación? ________________________________________________________ ________________________________________________________ 6-) Describa brevemente, cómo puede añadir y quitar opciones al menú de navegación Spry ________________________________________________________ ________________________________________________________ 7-) ¿Qué utilidad tiene la vista En vivo? ________________________________________________________ 8-) ¿De qué forma puede cambiarle los colores a la barra de menú Spry?

Explique brevemente ________________________________________________________ ________________________________________________________ 9-) ¿Cuál es la utilidad del elemento Ficha? ________________________________________________________

® SERIE VISUAL INFORMÁTICA PARA TODOS

83

Páginas Web y Redes Informáticas

 Ejercite sus conocimientos: 1-) Crear una nueva página Web con el nombre Astronomía 2-) Inserte una barra de menú Spry 3-) Los botones de navegación tendrán las siguientes opciones: Sistema Solar, Galaxias, Estrellas, Nebulosas, Personajes y otra que diga Instrumentos.

4-) Añada un menú a la opción Sistema Solar con las siguientes opciones: Planetas, Cometas, Asteroides, El Sol 5-) Añada un submenú a Planetas con el nombre de los ocho planetas conocidos y a Estrellas con las opciones: Púlsar, Enanas, Agujeros negros y Binarias. También, agregue un menú de tres opciones a Personajes con información de al menos tres personajes de la historia de la Astronomía más importantes.

6-) Cambie los colores de la barra de menú a su gusto.

7-) Cambie el tipo de fuente a los menús. No olvide utilizar la regla de destino <Nuevo estilo en línea> para hacer los cambios.

8-) Inserte un panel de fichas en la página Instrumentos con las opciones: Telescopio refractor, Telescopio reflector y Radioastronomía. Deberá tener información e imágenes, al menos una en cada contenido de las fichas.

9-) Cambie los colores a su gusto en el panel de fichas

ALEX BLANCO

Informática II

84

PROYECTO

EL CUERPO HUMANO

Descripción de la Página Web:

Crear un sitio Web con una descripción de los diferentes sistemas, aparatos, órganos y tejidos del cuerpo humano, todo, completamente ilustrado.

Página Web

Elementos que llevará: 1-) Ancho de la página: 800 píxeles 2-) Banner Web sobre el tema de la página con 800 píxeles de ancho 3-) Tabla para ubicar los elementos Web con 800 píxeles de ancho, borde cero y fondo de tabla color blanco 4-) Elementos Spry: Barra de menú de navegación horizontal, un acordeón en una posición lateral con ancho de 200 píxeles 5-) Tres tipos de fuente diferentes: para títulos, sub-títulos y contenidos 6-) Fondo de página Web con imagen en mosaico 7-) Imágenes correctamente distribuidas y ubicadas por todo el sitio 8-) Doce enlaces como mínimo 9-) Publicar la página en un hosting gratuito. Debe investigar estos servicios en Internet

Si usted es capaz de elaborar este proyecto sin ayuda, usted tiene la preparación adecuada para trabajar con páginas Web estándar para que puedan verse en computadoras de escritorio, laptops o tablets y desde ya, se ha introducido al mundo de los creadores de páginas Web.

Aspectos a evaluar: 1-) Muy buena ortografía 2-) Funcionalidad correcta de los enlaces de la página 3-) Los botones deben estar alineados correctamente 4-) Buen uso de la combinación de colores 5-) Puntualidad en la entrega 6-) Creatividad y originalidad 7-) Publicación de la página en un servicio de hosting gratuito Fecha de entrega: ______ /_____________ / _______

® SERIE VISUAL INFORMÁTICA PARA TODOS