You are on page 1of 34

ADMINISTRACIÓN DE SITIOS

WEB I CON DREAMWEAVER

 Plantillas web con Etiquetas DIV.


 Insertar componentes internos al Dreamweaver
 Menú (SPRY)
 Vínculos: hipervínculos y marcadores.
 Ventanas emergentes.
 Descarga de archivos.
GUÍA DIDÁCTICA

Descripción
En la actualidad, todo nuestro entorno se encuentra vinculado al ciberespacio,
somos parte de él, en diferentes maneras, por ejemplo cuando estamos visitando
una galería de productos, basada en imágenes o en simulación (realidad virtual),
cuando tenemos una reunión de estudio o trabajo con nuestros compañeros, donde
cada uno está ubicado en diferentes lugares físicos, cuando hacemos un negocio o
tenemos un contacto laboral con representantes de empresas a quienes no
conocemos pero sabemos que existen, etc.
Los ejemplos descritos anteriormente y otros que ustedes puedan identificar
se están presentando por la existencia de servicios en internet, que en muchas
ocasiones son de uso gratuito, a los cuales podemos acceder y utilizar con facilidad,
sin tener la necesidad de crear desde lo más básico el servicio, podemos reutilizar
el código de ciertas aplicaciones y adaptarlo a nuestro trabajo, iniciándose así lo
que se conoce comúnmente como la web colaborativa y posteriormente nos
orientará hacia una web inmersa.
Esta sesión proporciona los fundamentos necesarios para estructurar de
mejor manera los contenidos de sus páginas web haciendo uso de plantillas, con la
finalidad de optimizar el funcionamiento y actualización de nuestro sitio web.

Capacidad
 El participante al final esta unidad estará en capacidad de crear y administrar
los recursos de un sitio web, insertando diferentes componentes internos;
haciendo uso de plantillas en Adobe Dreamweaver.

Actividad
 Crear un sitio web y diseñar una plantilla que de soporte a la gestión de los
contenidos del mismo.

Evaluación
En esta sesión Ud. será evaluado en:
 La administración de un sitio web.
 La creación de una plantilla web.
 La gestión de contenidos internos y externos en las páginas web.
Administra sitios web

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un


diseño similar un objetivo común. El diseño y planificación del sitio web se realizó
en la sesión 02 , por ello iniciaremos esta sesión con la activación del sitio web,
puesto que ya tenemos creado un sitio web llamado Negocios el cual contiene todos
los recursos que venimos usando y tan solo debemos activarlo, para su
implementación.

Información preliminar:
Para crear un sitio web se deberá tener previamente la información sobre el análisis,
diseño (lógico y físico) y luego la implementación del sitio.

 Como se explicó en la sesión 01, el proceso de desarrollo de un sitio web


consta de las etapas de: análisis, diseño (lógico y físico), implementación
y pruebas.
 El diseño consiste en crear diversos elementos que nos brinde el soporte
para la posterior implementación, entre los cuales podemos citar un Diseño
Lógico, un Diseño Físico, un Diseño de Maquetación (para uniformizar el
diseño de mi sitio web en la distribución de espacios), la preparación de los
contenidos, etc, todo ello se desarrolló en la Sesión 06.

Activar un sitio web en Dreamweaver

Es muy frecuente que la carpeta del sitio web la transportemos fácilmente a través
de una unidad de almacenamiento de un computador a otro, sin embargo cuando
queremos seguir trabajando en él, debemos activarlo en el computador donde
retomaremos nuestro trabajo.

Para ello seguir el siguiente proceso:

1. Abrir Dreamweaver
2. Crear el sitio web con el mismo nombre del que hemos creado (Ej.:
Negocio). Observará que no hay archivos.
3. Copiar los archivos que tiene el sitio web no activo (Carpeta Negocio para
Sesión 09), al nuevo sitio que acaba de crear.
4. Actualizar su sitio web.
5. Volverán a mostrarse todos los archivos trabajados en el sitio (ver panel de
Archivos).

1
Recuerde:
La administración del sitio web se puede realizar desde el menú Sitio y luego
Administrar sitios… (Ver Sesión 02).

2
Plantillas web

La suite de Adobe Dreamweaver nos brinda una técnica eficiente y práctica para la
creación de nuestras páginas web y la administración de nuestros sitios web que
consiste en el uso de las denominadas “Plantillas”.
Teniendo el diseño de maquetación del sitio web podemos usar plantillas, para crear
las páginas web del sitio según el diseño físico.

Insertar un marco de página:

Ejercicio:
Considerando el diseño del sitio web Negocio, debemos crear la página index.html
como marco de página (Tipo: Superior e inferior)

1. Activar la página inicio.html (ya que ella es la página de presentación del


sitio web).
2. Hacer clic en el menú Insertar, seleccionar la opción HTML, luego en
Marcos y elegir Superior e inferior.
3. En la ventana que se muestra, elegir el tipo de marco: mainframe

4. Hacer clic en el botón Aceptar, teniendo el siguiente resultado:

3
Marco1

Marco2 Marco
Completo

Marco3

Guardar los marcos de página:


Primero grabaremos las páginas: marco1, marco2, marco3 y luego el marco
completo:
1. Hacer clic en el marco1.
2. Seleccionar en el menú Archivo, la opción Guardar marco.
3. Asignar un nombre al documento (Ej.: título.html) y grabarlo en el sitio web
Negocio.
4. Hacer clic en el marco2.
5. Seleccionar en el menú Archivo, la opción Guardar marco, se actualiza
automáticamente con la página inicio.html.
6. Hacer clic en el marco3.
7. Seleccionar en el menú Archivo, la opción Guardar marco.
8. Asignar un nombre al documento (Ej.: piepagina.html) y grabarlo en el
sitio web Negocio.

Ahora debemos guardar la página de marco completo:


9. Hacer clic en el menú Archivo y elegir Guardar conjunto de marco
como…

4
Seleccione el sitio
web

Grabe el
archivo
Escriba el nombre del
archivo

Plantillas web con Etiquetas DIV

Insertar una Etiqueta DIV

1. Seleccione el menú Insertar y elija Objetos de diseño


2. Luego seleccione “Etiqueta DIV”

1. Diseño de maquetación (distribución de espacios de las páginas que tendrá


el proyecto).
Seguir con la información realizada en la sesión 2.

5
Insertar componentes internos

La inserción de componentes se hará desde diversas aplicaciones empleadas en el


curso con extensiones, jpg, png, gif animado, página html.
Para implementar nuestro sitio web, debemos usar los archivos de la carpeta
Recursos-Sesión09 del libro digital del curso.

1. Insertar textos:
En la página quienes.html
Vamos tener en cuenta la estructura de la página.

(Texto 1)

(Texto 2)

(Texto 3) (Imagen 1) (Texto 4)

Texto e imagen para la página quienes.html


División Información
Texto 1 GUCCI Nature

Texto 2 No somos los únicos, pero sí los mejores...


Texto 3 NOSOTROS
Somos es una empresa dedicada al procesamiento de recursos
botánicos autóctonos del Perú, utilizando para ello un cuidadosa
selección de los recursos empleados para la elaboración de los

6
productos, estandarizando las diferentes líneas de producción,
envasando bajo estrictos lineamientos de limpieza y procesos, y
finalmente realizando rigurosos procesos de control de calidad.
Fitosana analiza numerosas muestras botánicas, estudiando los
principios activos con los que cuenta cada una de las especies.
Imagen Susti1.jpg
1
Texto 4 MISIÓN
GUCCI Nature, se ha posicionado como la marca de productos
naturales más importante a nivel nacional, teniendo como base, la
confianza de cientos de peruanos. Por esta razón, GUCCI Nature se
proyecta como empresa líder en el mercado internacional,
promocionando las riquezas naturales y culturales de nuestro Perú y
entregando a más personas lo mejor en productos altamente
confiables.
VISIÓN
Rescatar el conocimiento ancestral peruano sobre plantas medicinales
y llevar naturaleza pura a millones de hogares a través de sus
productos.

Utilizar la estructura de las páginas creadas en la sesión 2.

a. Aplicar los formatos al texto1:


 Seleccionar el texto. Ej.: GUCCI Nature.
 En la definición de la regla CSS, aplicar los cambios
personalizados. Ej.:

7
Nota: cuando trabajas
con divisiones debes
seleccionar editar para
aplicar estilos CSS.

b. Si aplicamos formatos al texto2 tendríamos lo siguiente:


 Seleccionar el texto. Ej.: No somos los únicos pero si los
mejores ...
 En la definición de la regla CSS, aplicar los cambios
personalizados. Ej.:

8
Regla CSS (tipo)

Regla CSS (fondo)

c. Si aplicamos formatos al texto3 tendríamos lo siguiente:


 Seleccionar el texto. Ej.: NOSOTROS ...

9
 En la definición de la regla CSS, aplicar los cambios
personalizados. Ej.:

 El resultado será:

d. Si aplicamos formatos al texto4 tendríamos lo siguiente:


 Seleccionar el texto. Ej.: MISIÓN ...
 En la definición de la regla CSS, aplicar los cambios
personalizados. Ej.:

10
 El resultado será:

2. Insertar una imagen:


Usando los componentes de la carpeta Recursos-Sesión 09, seguimos los
siguientes pasos:
Sugerencia: Copie los archivos a insertar al sitio web Negocio, a la sub carpeta
Imágenes.

Insertar imagen1 tendríamos lo siguiente:


 Hacer clic en la imagen1 para insertar la imagen susti1.jpg
 Seleccionar el menú Insertar
 Elegir la opción Imagen

11
b
b
c
1

 Ahora, localizar y seleccionar la imagen a insertar. Hacer doble clic


sobre ella. Ej.; susti1.jpg

A. En la página producto.html
Tener en cuenta la siguiente maquetación de la página web

Texto1
Banner
Imagen1 Imagen2 Imagen3
Imagen4 Video Imagen5
Imagen6 Imagen7 Imagen8

Luego que se realizó la maquetación en la sesión 2, ahora vamos


a comenzar a trabajar con textos e imágenes.

12
a. Aplicar los formatos al texto1:
 Seleccionar el texto. Ej.: NUESTROS PRODUCTOS
 En la definición de la regla CSS, aplicar los cambios
personalizados. Ej.:

 El resultado será:

b. Insertar imagen1 tendríamos lo siguiente:


 Hacer clic en la imagen1 para insertar la imagen prod1.jpg
 Seleccionar el menú Insertar
 Elegir la opción Imagen

b
b
c
1

13
 Ahora, localizar y seleccionar la imagen a insertar. Hacer
doble clic sobre ella. Ej.; prod1.jpg

 Y así para cada imagen (prod2, prod3, prod4, ... prod8),


teniendo como resultado:

IMPORTANTE: Si es necesario puede ajustar las dimensiones de


cada etiqueta DIV para cada imagen y también para el contenedor.
Para ello deberá activar la ventana Estilos CSS (Ventana/Estilos
CSS).

B. En la página index.html: (Usar la carpeta Recursos 09 para las


imágenes a usar)
a. Insertaremos la imagen Gucci y el menú SPRY
 En la parte superior: insertar la imagen: Gucci.jpg
 Hacer clic dentro del div banner

14
 Hacer clic en el menú Insertar, elija la opción Imagen
y localice la imagen a insertar. Ejemplo: Gucci.jpg
 El resultado será el siguiente:

 En el menú, insertaremos el menú SPRY: que veremos a


continuación.
b. En la etiqueta Div textopie: Ingresaremos un texto
 Ingresar un texto “Gucci Nature: Todos los derechos
reservados – 2016” y coloreamos el fondo de color verde (tal
como se muestra).

C. En la página inicio.html
a. Hacer clic en banner2 para insertar la imagen banner2.jpg
b. Seleccionar el menú Insertar
c. Elegir la opción Imagen

b
b
c
1

d. Ahora, localizar y seleccionar la imagen a insertar. Hacer doble clic


sobre ella. Ej.; banner2.jpg

15
e. Hacer clic en el botón Aceptar, en la ventana que se muestre.
f. El resultado será:

g. Grabar los cambios realizados al sitio web.

Vista preliminar del documento web en el navegador de Internet


1. Grabar todos los cambios del sitio web (Archivo/Guardar todo).
2. Pulsar la tecla F12 (para verlo en el navegador).

16
3. Insertar Imágenes de sustitución:
Es un componente propio del Dreamweaver, que intercambia imágenes al
apuntar con el puntero del mouse sobre la imagen activa en la página. Estas
imágenes (susti1.jpg y susti2.jpg las encontrarás en la carpeta Recursos-Sesión
10), se sugiere copiarlas a tu sitio web Negocio.

a. Clic en el menú Insertar y luego Objetos de imagen.


b. Clic en la opción Imagen de sustitución.

1
1 2
1
c. Ahora localizar la imagen de original y de sustitución, que lo tiene en su sitio
web Negocio. Use los botones Examinar.

17
d. Hacer clic en el botón Aceptar
e. Grabar los cambios y probar el resultado, pulsando la tecla F12.

4. Insertar aplicaciones multimedia


Para insertar aplicaciones multimedia como video sonido películas swf.
Ej.: Insertar el archivo Gucci.swf (creado en SwishMax), lo encontrarás en la
carpeta Recursos-Sesión 10), se sugiere copiarlo a tu sitio web Negocio.
a. Hacer clic en el menú Insertar y luego en la opción Media.

18
b. Elija la opción correspondiente según la aplicación multimedia a insertar.
Ej.: SWF.

Películas flash

Videos con extensión flv

a
1 Películas/sonido con
extensiones: mp4,avi, wmv,
mov,mp3, etc

c. Seleccionar con doble clic, el archivo multimedia a insertar. Ej.: Gucci.swf.

d. Hacer clic en el botón Aceptar.


e. Grabar los cambios y comprobar el resultado, pulsar la tecla F12 para
ejecutar.

19
Menús (SPRY)

Dreamweaver incorpora múltiples utilidades para crear páginas web sin necesidad
de programar. En esta ocasión vamos a ver cómo diseñar una barra de menú
desplegable SPRY en tan sólo unos pocos minutos, la cual puede ser tanto vertical
como horizontal.

1. Primero, situar el cursor en la zona donde queramos insertar el menú SPRY, lo


más habitual es ajustarlo en la parte superior, junto al banner de la web.

2. Hacer clic dentro de espacio donde se insertará el SPRY.


3. Seleccionar el menú Insertar, luego Objetos de diseño, y luego seleccione
Barra de menús de SPRY.

4. A continuación elegimos la estructura que nos interese: horizontal o vertical, en


este caso Horizontal y hacer clic en el botón Aceptar

20
5. Ya tenemos nuestro menú desplegable en pantalla. Ahora tenemos que
configurar el número de elementos que mostrará y sus vínculos
correspondientes. Para ello, situamos el ratón sobre el menú y pinchamos en el
recuadro azul superior.

6. En el Panel propiedades, donde podemos añadir o eliminar elementos


mediante los símbolos + –.

7. También tenemos el campo texto, que permite escribir los títulos de cada
opción (haciendo clic sobre él y escribiendo), y el campo vínculos que como
su nombre indica, nos permite crear enlaces entre las diferentes páginas del
sitio.

21
Creando un menú SPRY conformado por menús y submenús:

A. Creando los menús

Ejercicio:
Menús
Se pide crear el siguiente menú.

Submenús

Pasos:
1. Seleccione el menú SPRY insertado.

2. Cambiar el título de cada menú:


 Hacer clic en uno de los menús (Ejemplo: Elemento 1) y
escriba el título a mostrar en Texto (Inicio)

Menú Título a mostrar


Elemento 1 Inicio
Elemento 2 Quienes somos
Elemento 3 Productos
Elemento 4 Clientes
Elemento 5 Contacto

3. El resultado será el siguiente:

22
B. Creando submenús:

1. En el panel de Propiedades del SPRY, seleccione el menú y el submenú


que desea crear. Ejemplo: Menú “Productos” y submenú: “Elemento 1”
2. En el recuadro Texto escriba: Nacionales
3. El resultado obtenido será:

4. Grabe sus cambios y pulsar la tecla F12 para mostrarlo en el navegador.

23
Vínculos: hipervínculos y marcadores

Los vínculos son elementos que utilizamos para poder enlazar nuestras páginas
web, archivos de descarga o desplazarnos dentro de la misma página. Estos
enlaces pueden ser configurados en botones o en menús (en caso de ser
agrupados).
Podemos crearlos usando diferentes elementos, desde un simple texto, una imagen,
un gif animado, etc.

Los vínculos pueden ser de dos tipos:


a) Internos. Cuando permiten enlazar una página web con otra dentro del mismo
sitio. Para este tipo de vínculo solamente requerimos conocer la ubicación y el
nombre del archivo a enlazar.
b) Externos. Cuando permite enlazarnos a un sitio web externo. Para este tipo
de vínculo requerimos el nombre de dominio o subdominio del sitio a enlazar.
Los destinos forman parte de las propiedades de los vínculos, indican como se
visualizará el contenido de la página a la que se está enlazando. Pueden ser
básicamente:

 Blank. Me indica que al enlazarme a otra página web, esta se abrirá en


una ventana en blanco.
 New. Me indica que al enlazarme a otra página web, esta se abrirá en una
ventana nueva.
 Self. Me indica que al enlazarme a otra página web, esta se abrirá en la
misma ventana.
 Parent y top, son destinos que se utilizan cuando se está trabajando con
frames (marcos).

Vínculos Internos
Ejercicio:
Para desarrollar una aplicación con vínculos, debemos contar previamente con toda
la información (páginas web y componentes) a usar, dentro del sitio web activo. Pero
ya nosotros tenemos activo nuestro sitio web Negocio que venimos trabajando.

24
Solución:
Según el diseño de nuestro sitio web, la página index.html (página de marco) es la
tiene el menú que generarán el vínculo al resto de páginas, las cuales mostrarán su
información dentro del marco2 en el tipo de destino mainframe.

Importante:
Por ello seleccionar cada menú y verificar en el panel de Propiedades, que el vínculo
muestre la página de enlace. De no estar, deberá escribir el nombre de dicha página.

1. En cualquiera de los casos debemos establecer para cada menú con su


Destino: mainframe.

25
26
1. Grabar todos los cambios (Archivo/Guardar todo)
2. Pulsar la tecla F12 para activar el navegador y probar los botones.

Vínculos Externos

Ejercicio: A partir de la imagen de sustitución de la página quienes.html, generar un


vínculo que se enlace a una página de consulta
(http://salud.univision.com/es/medicina-natural).

1. Abrir la página quienes.html.


2. Activar la vista Diseño y hacer clic en la imagen de sustitución.
3. En el panel de Propiedades, establecer el Vínculo
(http://salud.univision.com/es/medicina-natural) y el Destino (_blank). Copiar
dicho vínculo.

27
4. Guardar todos los cambios (Archivo/Guardar todo) y pulsar F12 para
comprobar el vínculo.

Anclajes (Marcadores)
Son vínculos que nos permitirán desplazarnos dentro de la misma página web.
Ejercicio:
En la página web productos.html, se tiene los productos principales de Gucci Nature;
sin embargo se desea tener un detalle de cada producto. Para nuestro ejemplo,
haremos a uno de ellos.

1. Abrir el archivo Marcadores.docx y copiar el contenido debajo de las imágenes


de productos en la página web productos.html.

2. Insertar el marcador en el texto destino: Ej.: AGUAJE Y COCONA (Extracto


600mL).
a. Clic al final del texto destino: AGUAJE Y COCONA (Extracto 600mL).

b. Hacer clic en el menú Insertar y luego en la opción Anclaje con


nombre, asignar un nombre al marcador (Ej.: aguaje) y Aceptar.

c. Se habrá insertado el marcador

28
3. Seleccionar el objeto origen (el que iniciará el vínculo). Ej.: la primera imagen
de la galería.
4. Hacer clic en el menú Insertar y luego en Hipervínculo, y seleccionar el Vínculo
(#aguaje). Aceptar la ventana.

5. Grabar todos los cambios (Archivo/Guardar todo) y pulsar F12 para


comprobar el vínculo.
6. Hacer clic en el texto Aguaje y Cocona (vínculo del marcador).

Seguir el mismo proceso para la segunda imagen de la galería, insertando el


marcador en el texto NONITO (Extracto 600mL).

29
Ventanas emergentes

Una ventana emergente es un recurso web que permite mostrar una ventana
adicional mientras se muestra la página principal u otra de un sitio web. Se utiliza
para mostrar anuncios temporales, publicidad, etc.

Ejercicio:
Mostrar en una ventana emergente una imagen publicitaria con hierbas medicinales
a mostrar, cuando cargue la página index.html.

1. Crear una página web en blanco, grabarla como emergente.html (donde se


insertaremos la imagen a mostrar como ventana emergente). Ingresar a
Propiedades de Página y asignar a los 04 márgenes el valor de 0.

2. Insertar una imagen de tamaño 300 x 250 px..

3. Configurar la página web emergente.html como ventana emergente en la


página index.html.
a. Abrir la página web index.html.
b. Hacer clic en el menú Ventana y seleccionar Comportamientos.

30
c. Hace un clic en el botón Añadir comportamiento, y seleccionar Abrir
ventana del navegador.

d. Ingresar la siguiente información:


Página
emergente

Tamaño de la
página
emergente

e. Verificar en la ventana de Comportamientos si se insertó el


comportamiento (Abrir ventana del navegador) y el evento (onLoad)

4. Grabar todos los cambios (Archivo/Guardar todo)


5. Activar el navegador, pulsar la tecla F12. Que fácil resultó.

31
Descarga de archivos

Para descargar archivos desde nuestra página web, debemos seguir lo siguiente:
1. Abrir la página productos.html y escribir debajo de la galería de imágenes el
texto: Recetas caseras (Descargar).

2. Seleccionar el texto que permitirá la descarga del archivo. Ej.: (descargar)


3. En el panel de Propiedades, establecer el vínculo de descarga, arrastrando el
botón Señalar archivo hasta el archivo de enlace (Ej.: Recetas caseras.docx)
del panel de archivos.

4. Guardar todos los cambios (Archivo/Guardar todo) y verificar (F12).

¡Felicitaciones!, vamos por buen camino; ya casi tenemos nuestro sitio web
terminado, tan solo en la siguiente sesión insertaremos algunos componentes
externos y la publicación el sitio en la web.

32