ACTIVIDAD 7.

CASO PRÁCTICO
“LAS TIC´S EN EL PROCESO DE ENSEÑANZA Y APRENDIZAJE”

AUTOR: Pablo Trujillo García-Ramos

E-MAIL: pablotgr@gmail.com

NIVEL EDUCATIVO: 1º de bachillerato. ÁREA: Tecnología

TÍTULO DE LA WEBQUEST:
Creación de Sitios Webs sencillos con Dreamweaver y Photoshop CS

INTRODUCCIÓN
Actualmente disponemos en Internet de muchos recursos para crear nuestra página Web
personal o nuestro Blog en donde alojar información sobre los más variados temas que
nos interesen u ocupen ,sin embargo si queremos disponer de una Web con un diseño
propio y recursos personalizados que nos distingan de las demás, debemos empezar por
utilizar programas editores del código html y de editores de imágenes.

Además hace falta tener unos criterios funcionales y estéticos para que nuestras páginas
sean atractivas visualmente y cómodas de utilizar, es por ello que en este Webquest
vamos a elaborar un sitio o página Web simple que atienda a estos criterios y que sea un
punto de partida para seguir trabajando en el apasionante mundo virtual.

Necesitamos comprender, al menos a nivel básico, cómo funciona Internet, qué

posibilidades o capacidades de comunicación tiene y cómo manejar ciertas herramientas
para expresarnos por la Red, que es cada vez más importante en el mundo actual.

Podemos encontrar todo tipo de información en Internet reflejada en textos, imágenes,

vídeos etc. y no sólo tenemos que tener claro cómo acceder a lo que nos interesa entre la
gran cantidad de información sino también elaborarla de forma clara y atractiva para que
los demás puedan consultarla fácilmente.

Recuerda que la motivación y el interés son fundamentales para adquirir conocimientos,

avanzar y ponernos al día en el manejo de los programas informáticos en general y de
desarrollo web en particular porque constantemente se actualizan y aparecen nuevas
herramientas, así que debes tener un espíritu investigador y sobre todo curiosidad por
conocer las enormes posibilidades que te ofrece la informática. Ten en cuenta que en
desarrollo Web no se trata de hacer el Sitio más sofisticado o bonito sino del más útil o
práctico para la información que queremos mostrar.

Para realizar la tarea que describo a continuación debes tener conocimientos básicos a
nivel de usuario del sistema operativo Windows (2000, XP, Vista) o del OSX o Leopard de
MAC.

TAREA
Vamos a elaborar un Sitio Web sencillo con una portada en html y otros dos archivos
del mismo formato mediante dos de los programas más empleados en desarrollo Web,
que son el Adobe DreamWeaver y el Adobe Photoshop . Una vez terminado el Sitio, lo
publicaremos en Internet a través de un servidor gratuito para que cualquier usuario
pueda consultarlo.

El tema sobre el que trata nuestra Web es libre; puedes hacerla sobre tu deporte favorito,
sobre un tema de clase que te interese o sobre cualquier hobby.

El programa Adobe Dreamweaver (actualmente en la versión CS4) es un editor de

código html, el que se emplea para estructurar y mostrar los contenidos de los Webs por
el navegador.

El Adobe Photoshop (actualizado a CS4) sirve para crear, optimizar o 'arreglar' las
imágenes que vamos a insertar en los archivos html de nuestro sitio. Estos programas
están disponibles en la Web de Adobe (sus enlaces están en el apartado de Recursos) y
disponibles gratuitamente por un periodo de 30 días.

Tendremos en cuenta que nuestro ordenador debe tener un mínimo de 512 Mb de

memoria Ram, 1 Gb de espacio en disco duro y velocidad de procesador de 1 Ghz con un
monitor de al menos 1.024 por 768 píxeles de resolución para manejar con efectividad los
programas.
Nuestro Sitio Web va a constar de tres archivos html: la portada o index, que sirve para
llamar la atención y presentar, y dos secciones, una sección que desarrolla el contenido
y otra sección de enlaces de interés relacionados con el tema del Sitio.

La portada de nuestro Sitio va a tener título, un texto breve, una imagen de presentación,
una tabla (que es una retícula que estructura el contenido) y un enlace (texto o imagen
que nos lleva a otro archivo al hacer clic sobre él) dirigido a uno de los otros dos archivos
html de nuestro Sitio.

Los dos archivos HTML van a disponer de un título, tablas, textos, una imagen de
cabecera, al menos otra imagen sobre los contenidos y una barra de menús que permita
navegar el sitio.

PROCESOS
Para facilitar la tarea que tenemos por delante nos dividiremos en grupos de dos
usuarios/as por ordenador, alternándonos en el uso del teclado y el ratón.

En primer lugar vamos a instalar en nuestro ordenador los programas de prueba de

Dreamweaver (http://www.adobe.com/go/trydreamweaver_es) y de Photoshop
(http://www.adobe.com/es/products/photoshop/photoshop) desde la web de Adobe.

Al hacer clic en el enlace Versión de prueba vamos a crear primero una cuenta de
Adobe, así que sigue los pasos que te indica la Web. Una vez concluyamos este
requisito, nos identificamos para comenzar a descargar los programas.

Una vez instalado el Dreamweaver lo iniciamos mediante un acceso directo o botón

inicio>>programas de Windows.

Ya dentro de Dreamweaver vamos al menú Sitio>>nuevo Sitio y seguimos el asistente

seleccionando o creando una carpeta vacía en donde se guardarán los archivos de
nuestra Web.

Hemos dado el primer paso, ahora toca crear la portada que servirá para presentar el
Sitio. Muy fácil, podemos ir al menú Archivo>>Nuevo>>HTML>>botón Crear.
Tenemos la página vacía, en blanco, que es la opción por defecto o programada y ahora
tenemos que agregarle el contenido: una imagen, un texto y un enlace. Para posicionar
estros tres elementos en la página vacía, tenemos que situarlos dentro de una tabla, que
es una retícula estructural.

Vamos a hacer una tabla de una columna (celdas en disposición vertical) y tres filas
(celdas en horizontal): menú Insertar>>Tabla y tecleamos las filas y columnas en la
ventana emergente que aparece. El ancho de la tabla podemos establecerlo en 700
píxeles.

Fíjate en la barra o Inspector de Propiedades de Dreamweaver que está en la parte

inferior de la interfaz. Es una barra horizontal contextual, es decir que su contenido
cambia dependiendo del elemento que tengamos seleccionado.

Si tenemos la tabla seleccionada (clic cuando el cursor cambia de aspecto), podremos

editar sus propiedades, tales como el ancho o número de celdas. Vamos a poner el Borde
de la tabla en 0, el relleno de celda (Rell. Celda) en 0, el espaciado de celda (Esp.
Celda) en 2 y la opción Alinear en Centro.

Ahora vamos a insertar un texto introductorio, no muy extenso y que incluya el título de
nuestro Sitio, en la 2ª fila de la tabla, haciendo clic dentro y simplemente tecleándolo o
bien pegándolo desde el portapapeles . Pulsa las teclas mayúsculas + Enter para bajar
una línea si es necesario. Daremos el formato al texto más adelante.

Ahora colocaremos el enlace al archivo de contenidos html, aunque aun no lo hayamos

creado, en la 3ª fila de la tabla, la de abajo, haciendo clic y escribiendo la palabra
'acceder' o 'entrar'.

Con la palabra seleccionada (arrastrando el cursor) vamos al Inspector de

Propiedades y en la opción Vínculo escribimos: contenido.html para que nos dirija a
este archivo cuando hagamos clic en él (aun no lo hemos creado). En la opción Destino
Seleccionamos _self. Ya tenemos en enlace o vínculo creado. Lo situamos en el centro
de la celda seleccionando Centro de la opción Horiz. Del Inspector de Propiedades.
Es conveniente ir guardando los cambios que vamos introduciendo en nuestro archivo, así
que seleccionamos el menú Archivo>>Guardar o con las teclas Control+S y guardamos
la portada con el nombre index.html en la carpeta del Sitio.

Fíjate que estamos trabajando con el archivo html en modo edición pero aun no hemos
visto cómo se representa en el navegador. Para ello vamos a la barra de iconos
Documento (justo debajo de la barra de menús) y pulsamos el icono Vista Previa (con
forma de bola del mundo) y seleccionamos Vista Previa en IExplore. Se abre el
navegador Internet Explorer y vemos el aspecto de nuestra portada. No es necesario
cerrarlo; a medida que vayamos editando el archivo html, podemos guardarlo para luego
actualizar nuestro navegador y ver los cambios.

Ahora vamos a insertar una imagen en nuestra portada; pero no puede ser cualquier
imagen sino que debe tener una resolución y unas medidas adecuadas al ancho de
nuestra celda y no muy alta para que no ocupe mucho espacio del navegador.

¿Qué es la resolución de una imagen? Se mide en píxeles por pulgada (ppp) o por
centímetro y viene a ser la cantidad de información visual por unidad de medida, osea su
calidad. Las pantallas de los monitores tienen 72 ppp o 96 ppp así que si nuestra imagen,
que puede ser una foto que hayas hecho con tu cámara, sobrepasa esta cantidad, vamos
a cambiarla a 72 ppp en un programa editor de imágenes: Photoshop.

Abre Adobe Photoshop. En el menú Archivo>>Abrir, busca la imágen que quieres

insertar en la portada. Vamos a cambiarle la resolución (si no tiene 72 ppp) y el tamaño.

Haz clic en el Menú Imagen>>Tamaño de Imagen. En la ventana emergente que

aparece, escribe 72 en la opción Resolución, si no la tuviera. Ahora cambiamos el
tamaño de la imagen escribiendo en la opción Anchura, un máximo de 700 píxeles.
Asegúrate que el icono de la cadena aparece a la derecha. Si no es así, haz clic en la
casilla Restringir Proporciones que aparece más abajo.

Ya tenemos editada nuestra imagen, ahora vamos a guardarla en la carpeta de nuestro

Sitio en formato JPG. Puedes guardarla en formato GIF si es una imagen sin degradados
o no es una fotografía. Para lo primero, vete al menú Archivo>>Guardar Para Web.
Se abre una ventana en donde vas a seleccionar JPEG con Calidad 75. La guardamos
en la carpeta de nuestro Sitio Web con un nombre que no tenga espacios en blanco, ni
tildes o diéresis, ni la letra Ñ u otros símbolos. ¡Ya tenemos nuestra imagen preparada
para insertar en la portada!.

Ahora accedemos a Dreamweaver , hacemos clic dentro de la primera celda de la tabla y

vamos al menú Insertar>>Imagen. Seleccionamos la imagen JPG y zas! aparece en la
tabla. Fijate en el Inspector de Propiedades. Podemos asignar a la imagen una frase
descriptiva, corta, en la opción Alt. Si queremos centrarla en la celda, hacemos clic sobre
ésta y seleccionamos Centro de la opción Alinear, en las Propiedades.

Vamos a ponerle un título al archivo index.html de la portada. En la casilla Título de la

barra de iconos, la que aparece debajo de la de menús, escribe un título corto y
descriptivo para tu portada, por ejemplo 'Playas naturales del sur de la isla e Tenerife'.

Ahora vamos a cambiar el formato del texto . Haz clic en cualquier zona del fondo de la
página y vete al Inspector de Propiedades, botón Propiedades de Página. En la
ventana emergente que aparece, selecciona el tipo de letra que quieras en la opción
Fuente de Página, por ejemplo Verdana, Geneva, Sans-serif. En la opción Tamaño,
selecciona un tamaño de texto como por ejemplo 12 px (píxeles).

Si queremos cambiar el aspecto sólo del encabezado del texto, lo seleccionamos

arrastrando con el ratón y en el menú Formato, cambiamos la Fuente o el Estilo.

El siguiente paso es cambiar el color del texto y del fondo de la página, opciones que
aparecen a continuación, hacemos clic en las casillas y seleccionamos el color que
queramos. Fijate que si el fondo es oscuro, el texto tiene que ser claro y viceversa
para leerse correctamente. También puedes insertar una imagen de fondo (JPG o GIF)
pero tiene que ser sencilla y no estorbar la lectura del texto. Se repetirá como un mosaico.

Ya tenemos acabada la portada index.html. Guardamos los cambios y la vemos a través

del explorador como hemos explicado o también con al tecla F12.
Ahora vamos a hacer las dos páginas interiores, una de contenidos y otra de enlaces
de interés. En este paso te vamos a dejar mucha más libertad para que puedas investigar
y desarrollar tu creatividad.

Creamos la primera en Dreamweaver, menú Archivo>>Nuevo>>HTML igual que

hicimos con index.html e insertamos una tabla de 3 filas y 1 columna, con ancho de 780
píxeles y borde 0.

En la Primera fila vamos a colocar una imagen de cabecera, la segunda la dejaremos

vacía con un fondo de color y la tercera fila la dividiremos en dos columnas: en la
izquierda insertamos una barra de navegación con tres botones de menús que nos
dirijan a la portada, el contenido y la página de enlaces, y en la derecha el texto y las fotos
de nuestra elección.

Empezamos por la primera fila, insertando la imagen de cabecera que quieras desde
Photoshop, con 72 ppp y ancho máximo de 780 píxeles. No debe ser muy alta para que
no ocupe mucho espacio, por ejemplo de unos 60 px.

Para crear esta imagen en Photoshop, menú Archivo>>Nuevo, tecleamos un texto con
la herramienta homónima y guardamos para Web en GIF o JPG como hemos explicado
antes.

Vamos a Dreamweaver y la insertamos previo clic en la 1ª fila de la tabla.

La segunda fila o celda de la tabla podemos dejarla vacía y añadirle un Fondo de color en
el Inspector de Propiedades para separar visualmente la cabecera del texto

La tercera fila vamos a dividirla en dos columnas (en vertical) haciendo clic y yendo al
menú Modificar>>Tabla>>Dividir Celdas. Luego cambiamos el ancho de la división
manteniendo pulsado el botón izquierdo del ratón y arrastrando. Deja más anchura en la
columna derecha, donde irán el texto y las fotos.

Ahora tecleamos el texto en esta celda o bien lo pegamos desde el portapapeles. Puedes
insertar imágenes entre el texto tal como hemos descrito antes pero cuida de que no
sean muy grandes y estrechen demasiado el texto. Las puedes alinear haciendo clic
sobre ellas y en el Inspector de Propiedades, yendo a la opción Alinear. No cambies el
tamaño de las imágenes en Dreamweaver sino en Photoshop.

Añade formato al texto tal como explicamos anteriormente así como color de fondo a la
página. Recuerda que el texto se debe leer bien por lo que debe haber contraste con el
fondo. Teclea también el título del archivo en la barra de iconos tal como vimos.

Guardamos nuestro archivo en el Sitio con el nombre contenido.html.

Ahora llega el turno de insertar una barra de navegación en la celda de la izquierda.

Vamos a crear primero una tablita de 3 filas y 1 columna dentro de la celda, de ancho
100% y que tenga un borde de 0, espacio 0 y relleno 2

En esta tablita vamos a insertar en cada fila, de arriba a abajo, los tres botones que nos
van a dirigir a la portada o index.html y a las secciones de contenido y enlaces de interés.

Ya sabes cómo crear una imagen en Photoshop (Archivo>>Nuevo) para hacer los
botones del menú. Recuerda seleccionar una resolución de 72 ppp. Establecemos un
tamaño para los botones de 180 px de ancho y 70 px de alto como máximo.

Crea tres botones por cada sección: Portada o Home, Contenido y Enlaces y teclea estos
nombres con la herramienta Texto de Photoshop. Puedes dibujar una viñeta con la
herramienta Polígono.

Ya tenemos las tres imágenes de los botones que aparecerán en el menú de nuestro
Sitio. Ahora tenemos que crear otros tres botones que aparecen cuando situamos el
cursor sobre ellos en el navegador. Sólo tienes que duplicar la imagen en el menú
Imagen>>Duplicar de Photoshop y elegir otro color para el texto. No cambies las
dimensiones de los botones ni la posición del texto.

Llega el turno de guardar las 6 imágenes (tres botones en estado Normal y tres en estado
Sobre). Menú Archivo>>Guardar para Web de Photoshop. Usamos el formato GIF con
64 colores y las guardamos en la carpeta de muestro Sitio.
Insertamos los 3 botones GIF en cada una de las filas de la tablita.

Ahora seleccionamos el primer botón y vamos a la ventana Comportamientos, que

aparece a la derecha de la interfaz o bien en el menú Ventana>>Comportamientos.

Pulsamos el icono con un signo de suma (+) y seleccionamos establecer Imagen como
barra de navegación. En la ventana que aparece buscamos la imagen GIF del estado
Sobre del botón. En la opción Al hacer clic, ir a URL, vamos a buscar el archivo index.html
o lo tecleamos.

Hacemos lo mismo con los otros dos botones. Llama al archivo de enlaces de interés (que
aun no hemos hecho) enlaces.html.

Ya tenemos la barra de navegación o menús. Guardamos otra vez el archivo. Los

botones deben ir a index.html, contenido.html y enlaces.html por este orden, empezando
por arriba. Para comporbarlo, vamos a ver nuestro archivo por el navegador, offline,
pulsando la tecla F12.

Haz clic sobre los botones y comprueba que funcionan, Recuerda que el último nos
lleva a un archivo que aun no hemos creado pero que debe figurar con el nombre
enlaces.html en la barra de direcciones del navegador.

En caso de que los enlaces o vínculos no funcionen, vete al Inspector de

Propiedades con el botón seleccionado y cambia el valor de la opción Vínculo (puedes
examinarlo con el icono de la carpeta a su derecha).

Nos falta crear el tercer y último archivo: los enlaces de interés. Guardamos el actual con
el nombre enlaces.html en el menú Archivo>>Guardar como. Solo tienes que
reemplazar el texto y las fotografías por otros y listo. Acuérdate de guardar los cambios.

Ya tenemos hecho nuestro Sitio Web. Comprueba que esté todo correcto. Ahora vamos
a subirlo a Internet para que cualquiera pueda consultarlo.
Para eso vamos a ir a una Web que nos lo alojará gratuitamente en su servidor:
http://www.fortunecity.es . Lo primero registrarnos (botón rojo). Rellena las casillas, es
muy sencillo. El nombre de usuario es el que va a aparecer en la dirección URL, así que
selecciona uno apropiado, corto, sin símbolos.

Una vez registrados entramos con el nombre de usuario y la contraseña que hemos
elegido para subir nuestro Sitio en el menú Login y vamos a la sección File Manager.

En el apartado Cargar Ficheros, examinamos todos los archivos que componen nuestro
Sitio: HTML, JPG y GIF. Podemos subir 10 a la vez. Luego pulsamos en botón Cargar
Ficheros.

¡Ya está!. Podemos consultar nuestro Sitio en la dirección de fortunecity indicada. Si

por ejemplo hemos elegido el nombre de usuario surfatlantico, nuestra dirección será:
http://surfatlantico.fortunecity.es . No olvides actualizar el navegador si añades cambios a
la Web.

RECURSOS
Para descargar los programas de prueba, Adobe Dreamweaver y Photoshop, puedes
hacer clic sobre los siguientes vínculos:
http://www.adobe.com/es/products/dreamweaver
http://www.adobe.com/es/products/photoshop/photoshop

Si buscas información sobre otros productos o sobre ideas para usar los programas
puedes entrar en la Web oficial de Adobe, la marca que desarrolla los programas:
http://www.adobe.com/es

Para guiarte en el manejo de Dreamweaver y consultar dudas puedes ir a los siguientes

tutoriales:
http://www.manualespdf.es/manual-dreamweaver-mx
http://blog.educamas.es/2007/05/03/dreamweaver-insertar-imagenes
http://www.ivafe.org/curso.html?cnt_id=18064&gclid=CMTlmd6a65cCFQddQgodVwLjBw
http://www.xtorquemadax.com/2007/11/dreamweaver-cs-3-espol-manual.html
Para consultar sobre el manejo de Photoshop tienes los siguientes tutoriales:
http://www.manualespdf.es/manual-photoshop-cs
http://www.solophotoshop.com
http://www.webtaller.com/construccion/diseno/programa/photoshop

Servidor de alojamiento Web gratuito:

http://www.fortunecity.es

EVALUACIÓN
Para evaluar el Sitio Web realizado se considerarán los siguientes aspectos:
-El trabajo activo de los dos integrantes del grupo, para lo cual se les harán cuestionarios
sobre lo realizado.
- El texto y las imágenes deben poder verse claramente a través del navegador Internet
Explorer o Mozilla Firefox en la Red.
- Los botones del menú y del vínculo de entrada de la portada deben funcionar
correctamente de modo que al hacer clic sobre ellos accedamos a los 3 archivos html.
- Corrección ortográfica del texto insertado en el Sitio así como el léxico y la sintaxis
empelados.
-El diseño del Sitio tiene que ser funcional y estético: invitándonos a entrar en él y leer su
contenido cómodamente.
-Las fotografías deben poder distinguirse correctamente sin desenfoques u otros defectos
visuales además de tener un tamaño adecuado con respecto al resto de elementos.
-Los colores empleados en la Web deben ser adecuados al tema tratado, por ejemplo
utilizando los verdes u ocres para contenidos sobre la naturaleza.
-Los usuarios rellenarán un cuestionario de satisfacción con con el tutor o docente.

CONCLUSIÓN
Al finalizar la tarea, se reflexionará en grupo sobre lo aprendido, planteando posibles
dudas que hayan surgido o sobre cómo mejorar aspectos del trabajo. También nos
preguntaremos sobre la utilidad y el diseño de los Sitios Web realizados, proponiendo
alternativas o correcciones a los ejercicios.
Analiza cuales han sido los pasos más difíciles para ti y porqué, tratando de
comprenderlos mejor, si es necesario, repítelos.

Piensa también en cómo te gustaría que fuese tu Web y las posibilidades de hacerlo
mediante los programas empleados e investiga la interfaz de Dreamweaver y Photoshop
para lograr resultados más complejos y sofisticados.

Explora en la Red para obtener recursos útiles en el diseño Web, para lo que tienes varios
enlaces en el apartado de Recursos y propón otros diseños razonando el porqué de cada
propuesta.

La tarea propuesta es una manera de realizar Sitios Webs personalizados para

principiantes pero lógicamente hay más programas para acometerlos tales como el
Frontpage, editor HTML o el Corel Photo-Paint para edición de imágenes. Se han
seleccionado Dreamweaver y Photoshop por ser dos de los programas más eficaces y
usados en desarrollo Web.