Practica digida 3 herramienta selecctor y bridge

Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada

Lic. Mario Quiroz

Practica dirigida 3: Herramienta selector y Adobe Bridge Objetivo: Utilizar el programa Adobe Bridge, Adobe Photoshop y Adobe Dreamweaver para el diseño de una página web. Tema: Uso de la Herramienta Sector, Exportar para Web & Dispositivos, Cargar estilos en Dreamweaver. Enlaces hacia páginas web, inserta marcos con la herramienta iframe. Destino de enlaces hacia iframes. Creación de álbum de imágenes para web.

1era. Parte: Generar álbum de fotos en Adobe Bridge Un visor de archivos producido por Adobe Systems como parte de su Suite Creativa (Creative Suite), cuya función primordial es facilitar la localización y nombramiento de archivos, así como la edición de los metadatos. También es un apoyo en la gestión de carpetas. Se le ha agregado las funciones de catálogo para web en html o flash.

1. Luego de ingresar al programa Adobe Bridge ir al pestaña CARPETAS>Escritorio, buscar la carpeta montañas

2. Después ir al extremo derecho del panel de Bridge buscar Salida (Ctrl+F4).

1


Lic. Mario Quiroz 3. Haz clic en el botón “Galería Web” situado en la parte superior derecha del panel. Elije una galería del menú Plantilla (Seleccionar:

Airtight AutoViewer) y pon un tamaño de miniatura en el menú Estilo, buscar.

4. Personaliza a tu gusto la apariencia de la galería mediante las opciones de las herramientas siguientes:

.

5. Haz clic en “Previs. navegador” para ver la galería en el panel Previsualizar de salida de Adobe Bridge.

a. Información del sitio: Puedes añadir la información que aparece en cada página de la galería, el título, la descripción, etc... Poner el nombre de “Galería de Montañas”

b.Paleta Color: Las opciones cambian según la plantilla seleccionada. Selecciona colores para los distintos elementos de la galería, el texto, el texto del encabezado, el fondo y los bordes. Color de Fondo: Blanco, Borde: Blanco

c. Apariencia: Las opciones también cambian según la plantilla seleccionada. Pon el valor del tamaño de las imágenes y las miniaturas, la calidad de las imágenes JPEG, los efectos de transición, las distribuciones y si quieres incluir nombres de archivo en imágenes de la galería HTML. Dejarlo, no hacer cambios.

d. Información de la imagen: Añade un pie de ilustración en las imágenes de la galería. (Sólo para las galerías de Airtight). Activarlo y poner el texto: “Fotos de viajes por el mundo”.

e. Ajustes de salida: Define el tamaño y la calidad de las imágenes de la galería. Poner el Tamaño: 460 px, Calidad: 60%

f. Crear galería: Nombre de Galería: montana_01, Ubicación de almacenamiento: C:\Users\mario007\Desktop\Material Estudiantes Practica 3

2


Lic. Mario Quiroz

6. Para terminar presionar el botón “Guardar”.

7. Revisar la carpeta Material Estudiantes Practica 3 darle doble clip sobre el index.html revisar su funcionamiento y después cambiar el

nombre a galeria_montanas.html

3


Lic. Mario Quiroz 2da. Parte: Convertir imágenes en mapa de bits en tablas en Dreamweaver

8. Luego de ingresar al programa Adobe Photoshop ir al menú Abrir: busqueda.psd

9. Comenzamos sectorizando el Logo Solutions,

Función Sector (nombre por defecto del Photoshop)

Ancho Alto Vínculo Tipo de fondo de sector

Logo SOLUTIONS busqueda_04 100 px 85 px portal.html f00000 sin imagen 01 187 px 27 px ninguno f00000 sin imagen 03 42 px 102 px ninguno f00000 sin imagen 06 102 px 17 px ninguno f00000 Sin imagen 05 45 px 102 px ninguno f00000

4


Lic. Mario Quiroz 10. Ahora trabajamos el menú horizontal a diferencia de anterior menú en la página servicios.html se realizará 4 sectores específicos.

Función Sector

(nombre por defecto del Photoshop) Ancho Alto Vínculo Tipo de fondo de

sector casita busqueda_08 38 px 32 px portal.html 5f6460

búsqueda busqueda_09 45 px 32 px busqueda.html 5f6460 privacidad busqueda_10 50 px 32 px privacidad.html 5f6460 sin imagen busqueda_12 407 px 32 px Insertar código 5f6460

11. En el sector “busqueda_12” con la herramienta Seleccionar selector(C) insertar en el panel: Texto de la celda el siguiente código (copiarlo del pdf) ver gráfico.

<td width="513" bgcolor="5F6460" class="vinculos" style="padding-left:28px ">: Empresa : Servicios : búsqueda : Estadísticas : correo :</td>

12. Seguimos con el menú lateral 13. En el menú lateral, con la herramienta seleccionar sector darle doble clip, sobre el botón “Acerca de nosotros” y en la cuadro de diálogo

de OPCIONES DE SECTOR ir a Tipo de sector seleccionar SIN IMAGEN

E insertar el siguiente código en el campo TEXTO DE LA CELDA (COPIARLO DEL PDF)

<a href="portal.html">Acerca de nosotros</a>

14. En el menú lateral, con la herramienta seleccionar sector darle doble clip, sobre el botón “Soluciones” y en la cuadro de diálogo de OPCIONES DE SECTOR ir a Tipo de sector seleccionar SIN IMAGEN

5


Lic. Mario Quiroz


<a href="servicios.html">Soluciones</a> 15. En el menú lateral, con la herramienta Seleccionar sector darle doble clip, sobre el botón “productos” y en la cuadro de diálogo de

OPCIONES DE SECTOR ir a Tipo de sector seleccionar SIN IMAGEN


<a href="busqueda.html" class="menu">Productos</a> 16. En el menú lateral, con la herramienta seleccionar sector darle doble clip, sobre el botón “clientes” y en la cuadro de diálogo de



<a href="estadisticas.html">Clientes</a>

6


Lic. Mario Quiroz 17. En el menú lateral, con la herramienta seleccionar sector darle doble clip, sobre el botón “contáctenos” y en la cuadro de diálogo de



<a href="contactenos.html">Contáctenos</a> 18. En los extremos superior e inferior de la columna del menú, poner SIN IMAGEN y rellenarlo con el color de la imagen.

19. De igual manera con la sección inferior.

20. En la sección inferior, pie de página o footer, en la sección @2012 UTP

7


Lic. Mario Quiroz 21. En el botón de Audio on/off

22. En la sección Pantalla de contenido, el área de trabajo o el sector es de 461 px. por 386 px. Dejando un área para el título de 461 px. por 26 px.

23. Después de esto ir a Archivo>Guardar para la web. Una pantalla con el nombre Guardar para la web aparecerá.

461 px

386 px

26 px

8


Lic. Mario Quiroz

9

24. En el menú horizontal dale doble clip y aparecerá una pantalla de Opciones de sector.

25. Ahí revisará el código insertado y remplazarlo por:

: Empresa : Servicios : búsqueda : Estadísticas : Correo : (copiarlo del pdf) y pegarlo: 26. Además cambie las opciones de la Alineación de celda, Horizontal: Centro, Vertical: Medio. 27. En todos los sectores del menú lateral cambiar la opción del sector de Alineación de la celda> Horizontal: Derecha

e

Verificar

cambiar


Lic. Mario Quiroz 28. Una pantalla con el nombre: Guardado optimizada como aparecerá. Y llenar la siguiente lista

• Nombre: busqueda.html • Formato: HTML e imágenes, • Ajustes: Otro • Sectores: Todos los sectores

29. En la opción de Ajustes de salida, cambiar en el menú desplegable de HTLM a Sectores

30. En sectores seleccionar la opción GENERAR TABLA, le damos Ok.

31. Guarde la página web en la carpeta de sitio Material Estudiantes Practica 3 (si no existe la carpeta crea una con ese nombre).

Ahora haga clic en Guardar. Verifique que la página en html y la carpeta imágenes se han guardado en la carpeta del sitio Material Estudiantes Practica 3.

10


Lic. Mario Quiroz 3ra. Parte: Tablas en Dreamweaver, cargar estilos CSS y iframes con álbum de fotos 32. Ingrese al Dreamweaver, abrir archivo de la carpeta Material Estudiantes Practica 3: busqueda.html

33. Ir a propiedades de página

34. Poner ceros (0) en los márgenes, para que se pegue la tabla a los márgenes superior e izquierdo.

35. Cargar el archivo style.css del panel de Estilos CSS

11


Lic. Mario Quiroz

36. Ya cargado los estilos seleccionar el menú superior seleccionar el estilo .links botón derecho y Aplicar

37. Ahora el menú lateral (uno por uno), ir al panel de Estilos CSS, y seleccionar .menu botón derecho y Aplicar

12


Lic. Mario Quiroz 38. En el botón de Productos cambiar el color de fondo de la tabla. El color es #DDDEDD

39. Seleccione los textos @2014 UTP y Audio on/off y aplicar el estilo .copy

Insertar el álbum de fotos utilizando iframe 40. Eliminar la imagen de EMPRESAS / PRODUCTOS y reemplazarla por el texto: ÁLBUM DE FOTOGRAFÍAS

13


Lic. Mario Quiroz

41. Sombrear el texto y aplicar el estilo .tit,

42. Quitar en negritas la palabra FOTOGRAFÍAS

43. Elimine la imagen de la Pantalla de contenido, pero antes verificar la medida de la celda: 461 px ancho por 360 px de alto.

14


Lic. Mario Quiroz 44. Haga un clic en esta celda, luego ir al menú: Insertar> HTML> Marcos> IFRAME

45. Se observará una caja gris. Seleccionar el IFRAME y luego ir al menú: Modificar>Editar etiqueta.

15


Lic. Mario Quiroz 46. Defina las siguientes características:

• Fuente: montañas_01/galeria_montanas.html • Nombre: contenedor • Ancho: 461 px • Alto: 360 px • Alineación: Superior • Mostrar bordes desactivado • Aceptar.

47. Pruebe la página presionado F12 o el botón

16

Design

Practica digida 3 herramienta selecctor y bridge