practica 1 con adobe dreamweaver.pdf

7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf

1/13

Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 1-

c i b e r e c u s m

x

Administracin

con DreamweaverLa herramienta de administracin de sitios web Adobe Dreamweaver, ha demostrado que

tiene todas las posibilidades de gestionar sitios web simples y complejos, ya que entre sus

mltiples caractersticas, disponemos de una interfaz grfica amigable que potencializan en

gran medida el desarrollo web, integrando diversos componentes con gran eficacia. En esta

pctica daremos un recorrido rpido sobre el manejo del entorno de esta aplicacin tan

prctica.

Como ya lo sabemos, toda pgina Web est escrita en una lenguaje de programacin denominado

HTML. Adobe Dreamweaver permite crear pginas Web sin tener que escribir las etiquetas

HTML, puesto que es un programa orientado a objetos, es decir, es un editor visual de HTML,

en dnde se van insertando todos los elementos que constituyen la pgina Web y

Dreamweaver generar automticamente el cdigo. Sin embargo, los alcances de Dreamweaver

van ms all, puesto que tambin con l es posible administrar un sitio completo, desde su

mantenimiento, hasta el envo de los archivos hacia el servidor que estar conectado a Internet.

Por otra parte, con Dreamweaver tambin es posible generar algunos cdigos JavaScript,

que es un lenguaje exclusivo de Internet para hacer sitios ms interactivos; asimismo,

tambin es posible generar animaciones bidimensionales a travs del llamado HTML

Dinmico. En otras palabras, con Dreamweaver es posible administrar y crear sitios Web

interactivos y dinmicos.


2/13


c i b e r e c u s m

x

PRACTICA 1 CON ADOBE DREAMWEAVER

Primera parte

Administracin del sitio Web

Cmo debe estar estructurado un sitio?

Cuando un sitio Web es pequeo no tenemos problemas en su

administracin, sin embargo, conforme va creciendo, empiezan a

surgir problemas, y definitivamente la organizacin de los archivos

de un sitio Web, es muy importante, como ya se explic al inicio del

curso, considerando que la organizacin jerrquica y los nombres de

los archivos deben reflejar su contenido.

1. CREAR CARPETA DE TRABAJO. Para crear un sitio Web local en

Dreamweaver, primero debemos asignar una carpeta especfica en el

disco duro de nuestra computadora. Ah se encontrarn las pginas

Web, los grficos y todos los elementos que se usarn para desarrollar

el sitio. Para esto genere una carpeta con las siguientes carpetas:

2. NUEVO SITIO.En el panel Archivos,

seleccionamos del men

desplegable y

de la ventana emergenteseleccionamos el botn .

Home Page

El archivo principal de su

sitio o Home Page, debe

denominarse index(htm o

html), para que cuando

escriban su direccin, el

sistema del servidor

busque automticamente

ste archivo. Cabe

mencionar que algunos

servidores buscarn el

Home Page como la pgina

nombrada como

default.html.


3/13


c i b e r e c u s m

x

3. SELECCIONAR CARPETA. En el recuadro que aparece, designe un

nombre a su sitio (en este ejemplo Master) y seleccione como sucarpeta raz a la carpeta que gnero en el paso 1 (Sitioprueba).

Seleccione botn y posteriormente el botn :

Si existieran archivos Dreamweaver solicitara permisos para

permitir Cach (explora los archivos contenidos en todos sus

subdirectorios), simplemente se acepta esta solicitud. De esta

manera su sitio local ya est definido, que a futuro ser realmente su

sitio en Internet.

4. RECOPILACIN DE ARCHIVOS.Ahora busque varias imgenes, archivoPdf y videos en diferentes formatos para colocarlos en las carpetas desu sitio local. Utilice el explorador de Windows para realizar esto fuera

de Dreamweaver. Ubique esta cantidad y tipo de archivos:

Imgenes:

1 gif esttico1 gif animado1 jpg(de preferencia el encabezado que gener en el captulo anterior)

Error de carga de

imgenes.

Cuando en ocasionesuna pgina Web

muestra un recuadro

con una pequea X

de color rojo,

indicando que ese

espacio estaba

asignado a un objeto,

pero que no pudo

recuperarlo del

hosting, ya sea porque

no existe ese archivo o

porque no se hapodido establecer la

comunicacin

adecuada entre las

computadoras.


4/13


c i b e r e c u s m

x

PDF:

1 archivo

Videos:1 mp41 mov1 flv1 swf

Si vamos a la ventana Sitio del men Ventana, podremos

observar todos los archivos y carpetas que existan dentro de

la carpeta raz que indicamos cuando creamos el sitio. Tambin

si abrimos la paleta , veremos todos los archivos

grficos y vnculos, si es que existen, que contiene nuestro sitio.

Si no ve lo archivos que acaba de copiar, presione F5 estando dentro de

Dreamweaver, esto para refrescar el estado del visor de archivos.

5. NUEVO ARCHIVO.Generemos un nuevo archivo Html

y guardmosla como Index.html.

6. INSERTAR ELEMENTO HTML. Insertemos una tabla, men Insertar > Tabla,

solo modifique el parmetro Ancho de Tabla establecindolo en 1200

pixeles.


5/13


c i b e r e c u s m

x

7. MODO DE VISOR. Si en este momento selecciona

podr ver el cdigo Html que Dreamweaver genera de forma automtica.

Vea que la interfaz proporciona y distingue diferentes parmetros:

Etiquetas Html, nmero de lnea de cdigo, etiqueta de cdigo actual

seleccionada, ttulo de la pgina, dimensin de la pgina al cargarse,

tiempo en el que tarda en cargarse y la codificacin de la pgina, entre

varios otros.

8.

GUARDAR CAMBIOS. Si guardamos esta pgina (CTRL+G) y presionamosen este momento la tecla F12, podremos ver el resultado de lo que estamos

generando: una pgina web sin ttulo y con una tabla vaca.

9. PROBAR EN NAVEGADORES.Siempre es conveniente probar el resultado

de nuestra pgina en 2 o ms navegadores distintos, para tratar de evitar

al mximo errores de compatibilidad; por eso ahora debera presionar

SHIFT + F12, esto intentar abrir un navegador secundario, y si no est

definido le pedir que lo defina con una ventana de dialogo que le permitir

realizar esto.


6/13


c i b e r e c u s m

x

10.VISTA DISEO. Seleccione vista diseo y coloque un ttulo a su pgina.

11.SELECCIONAR CELDAS. Seleccione de forma simultnea las celdas de la

primera fila de su tabla. Observe que la Barra de Propiedades cambia apropiedades de tabla.

12.COMBINAR CELDAS. En la barra de propiedades seleccione el botn

13. INSERTAR IMAGEN. Podr observar que ahora tenemos una primer fila de

una columna. As que, ahora desde el panel Archivos, debemos arrastrar

nuestro encabezado en formato JPG (archivo del captulo anterior) dentro

de esta celda. Presione la tecla F12para ver el resultado.

ALT

Cuando inserta una

imagen o cualquier

otro objeto,

Dreamweaver le

solicitar le coloque

una descripcin,

esto es buena idea,

ya que permite a los

Motores de

Bsqueda identificar

las imgenes con un

nombre o

descripcin de la

misma, ya que busca

en estos parmetros

y no en el nombre

del archivo como tal.


7/13


c i b e r e c u s m

x

14.ATRIBUTOS DE CELDA.Como puede darse cuenta, se ven los lmites de la

tabla y adems est alineada a la izquierda. En modo diseo, seleccione la

tabla (puede utilizar los Tags de la barra del rea de trabajo), en barra de

propiedades establezca a en 0, Esp. Celda en 0, como Centro y con valor 0. Presione F12 y acepte elguardar los

cambios.

15.PROPIEDADES DE PGINA.Si ve algn margen blanco en la parte superior

de su pgina, es porque las propiedades de su pgina as lo marcan. Para

eliminar este margen, regrese al modo diseo, de clic al interior de la pgina

(no en la tabla). En la barra de propiedades seleccione

y establezca al en 0, aplique los cambios. Presione

tecla F12 aceptando guardar los cambios.

16.DIVIDIR Y COMBINAR. Modifique la tabla de tal manera que forme la

siguiente estructura. Puede con el simple arrastrar del mouse modificar lasdimensiones de las tablas, y preparar para combinar o dividir celdas.


8/13


c i b e r e c u s m

x

17.COLOR Y MENU. En la barra de herramientas seleccionando celda a celda,

elija un color de relleno de celda para generar una plantilla uniforme.

Ajuste todas las celdas de la segunda fila (6 celdas) a una altura de 20

pixeles y anchura de 200 pixeles. Y coloque los textos que identifiquen las

opciones de men:

Home

Quines somos?

Servicios

Herramientas

Promociones

Contacto

18.DUPLICAR PGINAS. Vamos a guardar la pgina actual con 5 nombres

diferentes, emplee la opcin de men Archivo :

quienes.html

servicios. html

herramientas. html

promociones. html

contacto. html

Utilice la herramienta gotero para

extraer el color de la regin inmediata

superior de cada celda


9/13


c i b e r e c u s m

x

LINKs. El siguiente paso es generar una telaraa de pginas: enlazar laprincipal (index.html) con las 5 pginas que disponemos, y estas a la vez

enlacen a cada una de las dems.

19. VINCULAR. Abra en modo diseo su archivo Index.htmldejando abierto el

visor de Archivos (b), Seleccione el texto denominado Quines somos?

(a) de la segunda celda de la segunda fila de su tabla. Verifique que en la

barra de propiedades el selector HTMLeste activo (c).

La idea es arrastrar desde el visor de Archivos (b) la pgina quienes.html

hacia el cuadro de texto Vinculo (d);

o tambin, arrastrar el control desde Vnculo hacia el

nombre del archivo.


10/13


c i b e r e c u s m

x

Otra opcin es simplemente presionar el icono de carpeta que est a un

costado derecho de Vnculo y seleccionar el archivo destino. Claro esta, que

la mejor opcin es la que usted elija.

NOTA ACLARATORIA: Cuando se selecciona un archivo tiene que definirse

cul ser su Destino; es decir, en que rea se colocar la pgina sealada,

haciendo alusin a la etiqueta HTML . Existen 4 tipos bsicos

diferentes de Destino: Blank, parent, self y top.

20. MS VNCULOS.Realice el mismo procedimiento anterior pero ahora para

cada una de los textos de las celdas restantes, haciendo corresponder el

texto con su respectiva pgina.

21.PRIMEROS CSS. Como podr observar los textos obtienen una apariencia

en color y subrayado, que si los deseamos cambiar, podremos hacerlo en la

barra de propiedades en ,

realicemos un ajuste de colores acorde a nuestra gama en la pgina, y el

Estilo subrayado colquelo en Nunca subrayar. Acepte los cambios y vea

la diferencia. Presione F12 e intente probar los vnculos.

Destinos de los

enlaces de pginas

web ( Target).

_blank

Muestra la nueva

pgina en una ventana

nueva y sin nombre del

navegador.

_self

Muestra la nueva

pgina en el marco

donde est declarado

el enlace.

_parent

Muestra la nueva

pgina en el

que

contiene al marco

donde se declara el

enlace.

_top

Elimina todos los

marcos existentes y

muestra la nuevapgina en la ventana

original sin marcos.


11/13


c i b e r e c u s m

x

22.MS VNCULOS. Como ver el efecto, falta generar los vnculos en las cinco

pginas restantes, por lo tanto, realice los enlaces respectivos en dichas

pginas.

23.Como comprobar parece que no hay ningn efecto ya estando terminadoslos links. Solo falta que realice lo siguiente para cada pgina:

a. Cambie el titulo

b. Agregue un texto a cada pgina correspondiente al nombre de

dicha pgina.

c. Guarde todos los cambios.

Pruebe ahora el funcionamiento, guarde todos los cambios y

resguarde sus archivos, ya que los utilizaremos en la siguienteparte de la prctica.

24. INSERTAR COMPONENTES. Recuperemos los archivos de la primera

parte de esta prctica.

25.Abrir la pgina quienes.html, realizar un clic en la celda que se

encuentra debajo de .

26.Activar men Insertar->Media-Plug-in.

27.Elegir de la carpeta videos, el archivo tipo .MOV.


12/13


c i b e r e c u s m

x

Como puede darse cuenta el icono que aparece es solo un control para que el

elemento pelcula tipo Quicktime aparezca en esa regin, si las dimensiones no son

acordes al espacio de la celda, ser necesario modificar los parmetros en la barra de

propiedades.

28. Insertemos ahora un archivo .FLV en la pgina servicios.html.

Observe que ahora se nos solicita elijamos un estilo de visor para este

componente. Seleccione el que mejor le parezca.

29.En la pgina herramientas.html inserte un componente .SWF.

30.En la pgina promociones.html intente insertar un archivo PDF, y vea

lo que sucede.

31.En la pgina de contacto.html inserte un archivo MP4.

32.Pruebe el ejecutar (F12) todas sus modificaciones.

Ahora se habr dado cuenta, que el insertar componentes es tan simple como activarlos comandos de men, y en algunos casos simplemente arrastrando el componente al

rea que deseamos, ser ms que suficiente


13/13


c i b e r e c u s m

x

AUTOEVALUACIN

Minisitio

Genere un minisitio diseando un encabezado con algn

tema a su eleccin, con 8 pginas mnimo:

5 enlazadas en la parte superior de un men

horizontal.

3 enlazadas en la parte izquierda de un men

vertical.

Cada pgina contendr elementos de texto y plug-in

de video a su eleccin, pero acorde al tema de su

sitio, y acorde a las dimensiones de las celdas de su

tabla.

Solo emplee textos generados por Lorem Ipsum

practica 1 con adobe dreamweaver.pdf

Documents