Upload
martin-san
View
227
Download
0
Embed Size (px)
Citation preview
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
2/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 2-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
3/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 3-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
4/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 4-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
5/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 5-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
6/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 6-
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/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
7/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 7-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
8/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 8-
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
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
9/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 9-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
10/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 10-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
11/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 11-
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.
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
12/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 12-
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
7/23/2019 PRACTICA 1 CON ADOBE DREAMWEAVER.pdf
13/13
Desarrollo de Sitios Web - PRACTICA 1 CON ADOBE DREAMWEAVER- Jos Luis Prez Resendiz - 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