Clase Dreamweaver Postgrado

UNJFSC ESCUELA DE POSTGRADO
PRESENTA SU CURSO:
DICTADO POR:
Ing. Guillermo Martn Rosel Pacora
Ing. Guillermo Martin Rosel Pacora
CONTENIDO
1.
CONCEPTOS PREVIOS
2.
INTRODUCCION A DREAMWEAVER
3.
ESTABLECER UN SERVIDOR WEB LOCAL
4.
ABRIR UNA CUENTA DE HOSTING
5.
ENTORNO DE DREAMWEAVER
6.
CREAR UN NUEVO SITIO DE TRABAJO
7.
CONECTANDO A UN SITIO REMOTO
8.
VISUALIZAR Y EDITAR NUESTRO PRIMER ARCHIVO LOCALMENTE Y PUBLICARLO PARA LA

WEB
9.
VISUALIZAR Y COMPARAR NUESTRA MODIFICACIN DENTRO DEL SERVIDOR WEB LOCAL

Y LUEGO CON EL SERVIDOR WEB REMOTO
10. CREAR UN NUEVO DOMINIO (nombre de nuestra pagina Web)

11. RECOMENDACIONES PARA CREAR Y DISEAR PAGINAS WEB
12. PRACTICAS
1. CONCEPTOS PREVIOS
INTERNET: Internet es una red de redes a escala mundial de millones

de computadoras interconectadas con el conjunto de protocolos TCP/IP.
Tambin se usa este nombre como sustantivo comn y por tanto en
minsculas para designar a cualquier red de redes que use las mismas
tecnologas que la Internet, independientemente de su extensin o de
que sea pblica o privada.
HOST: Un servidor en informtica o computacin es: *Una computadora que realiza algunas
tareas en beneficio de otras aplicaciones llamadas clientes. Algunos servicios habituales son los
servicios de archivos, que permiten a los usuarios almacenar y acceder a los archivos de un
ordenador y los servicios de aplicaciones, que realizan tareas en beneficio directo del usuario
final. Este es el significado original del trmino.
NAVEGADOR WEB: Un navegador Web, o Web browser es una aplicacin software que permite
al usuario recuperar y visualizar documentos de hipertexto, comnmente descritos en HTML,
desde servidores Web de todo el mundo a travs de Internet. Esta red de documentos es
denominada World Wide Web (WWW) o Telaraa Mundial. Los navegadores actuales permiten
mostrar y/o ejecutar: grficos, secuencias de vdeo, sonido, animaciones y programas diversos
adems del texto y los hipervnculos o enlaces.
URL: Sistema unificado de identificacin de recursos en la red. Las

direcciones se componen de protocolo, FQDN, y direccin local del
documento dentro del servidor. Este tipo de direcciones permite identificar
objetos WWW, gopher, ftp, etc.
HTML: El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de
hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma
de hipertexto, que es el formato estndar de las pginas Web. Gracias a Internet y a los
navegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatos
ms populares que existen para la construccin de documentos
FTP: FTP es uno de los diversos protocolos de la red Internet, concretamente significa File
Transfer Protocol (Protocolo de Transferencia de Archivos) y es el ideal para transferir
datos por la red.
HOSTING: Servicio de alojamiento de las pginas Web

que gestionan empresas especializadas. Las empresas
que se dedican a este servicio son como los hoteleros
de la red: ofrecen espacio para que otras compaas
almacenen cualquier informacin que quieran que sea
accesible por una red, desde sus pginas Web hasta la
informacin de su red interna o Intranet.
DOMINIO: Conjunto de caracteres que identifican un sitio de Internet

accesible por un usuario. El estilo de los nombres de "host" utilizado
actualmente en Internet es llamado "nombre de dominio". Algunos de los
dominios ms importantes son: .com (comercial-empresas), .edu
(educacin, centros docentes), .org (organizacin sin fines de lucro), .net
(operacin de la red), .gov (Gobierno USA) y .mil (ejrcito USA). La
mayora de los pases tienen un dominio propio. Por ejemplo, .us (Estados
Unidos de Amrica), .es (Espaa), .au (Australia). As, por ejemplo, el
nombre de dominio ".es" identifica a los usuarios espaoles.
PAGINA WEB: Cualquier pgina de informacin que es accesible a t ravs del www.
SITIO WEB: Conjunto de pginas HTML visibles permanentemente en Internet. Cada sitio Web
se identifica con una direccin (URL) que es la de la pgina principal o portada.
SERVIDOR WEB: Un servidor Web es un programa que implementa el protocolo HTTP

(hypertext transfer protocol). Este protocolo est diseado para transferir lo que llamamos
hipertextos, pginas Web o pginas HTML (hypertext markup language): textos complejos con
enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores
de sonidos.
2. INTRODUCCIN A DREAMWEAVER 8
Macromedia Dreamweaver 8 es un editor HTML profesional para
disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si
desea controlar manualmente el cdigo HTML como si prefiere trabajar en
un entorno de edicin visual, Dreamweaver le proporciona tiles
herramientas que mejorarn su experiencia de creacin Web.
Esta gua es una introduccin para utilizar Macromedia Dreamweaver 8
dirigida a los usuarios que no estn familiarizados con algn aspecto fundamental de esta
aplicacin. Los tutoriales de que consta le guan a travs del proceso de creacin de un sitio Web
sencillo pero funcional.
Iniciar en Men Inicio>Programas>Macromedia 8 >Macromedia Dreamweaver
3. ESTABLECER UN SERVIDOR WEB LOCAL DE PRUEBAS

Un SERVIDOR Web es una computadora con el software adecuado, que se encargara de brindar el
servicio de pginas Web ya sea a una Red Local o a Internet. Tenemos por ejemplo los siguientes
productos: Internet Information Server IIS (Microsoft), Personal Web Server, Apache,
Vertrigo, Abyss Web Server; utilizaremos este ultimo.
Abyss Web Server.
Abyss Web Server es un Servidor Web Personal de pequeo tamao
pero con potentes funciones, vlido tanto para sistemas basados en
Windows como Linux.
Soporta HTTP/1.1, scripts CGI, alias de directorio, descargas parciales y archivos index. Adems,
aadir soporte para PHP y Perl es cuestin de minutos.
Incluye una interfaz grfica que facilita enormemente la configuracin y mantenimiento del servidor
incluso remotamente, ya que funciona como una pgina Web. Es perfecto para su uso a nivel
personal, porque ocupa poco espacio y apenas requiere recursos de sistema.
Instalacin:
Ejecutar el instalador del Servidor Web Abyss.
Aceptar el contrato de licencia
Dejar las opciones predeterminadas a instalarse
Instalar en la carpeta predeterminada
Iniciar el proceso de instalacin, esperar un momento.
Luego elegir la forma de arranque del programa, elegiremos la opcin Automtica:
Y por ultimo pedir ejecutar el servidor Web
Podemos verificar que el Servidor Web Personal se encuentra activa si verificamos el icono ubicado
en el rea de notificacin de Windows
Luego apreciaremos la ventana de configuracin de nuestro Servidor Web, solicitndonos el idioma

con el que se presentara el programa, y luego un Usuario y Contraseas de acceso a este sistema
de configuracin, escribimos los siguientes datos:
USER: admin.
PASSWORD: 123456
Luego cierra la ventana del navegador

Si la instalacin result satisfactoria, en un navegador Web escribir http://localhost, apreciaremos la
pgina inicial al llamar a nuestro sitio Web local.
Los archivos que elijamos publicar estarn almacenados fsicamente en la siguiente direccin local:
C:\Archivos de programa\Abyss Web Server\htdocs, entonces a partir de esta ubicacin
empezaremos a organizar nuestros sitios Web, por ejemplo:
Por lo tanto, para crear nuestros sitios Web, estos archivos debern estar almacenados
dentro de esta carpeta (htdocs) y clasificados por Sitios Web
4. ABRIR UNA CUENTA DE HOSTING VERIFICAR FTP

Primero debemos estar registrados como usuarios del correo de Yahoo, ejemplo: gimar77@Yahoo.es
Crearse una cuenta en algn sitio Web que permita almacenar nuestros archivos de manera gratuita
(Hosting). Automticamente ya podemos usar el servicio de hosting si ya nos hemos registrado
como usuarios de Yahoo
Utilizaremos la Web de http://es.geocities.Yahoo.com/ como Hosting Gratuito; para ello ingresamos
con nuestra cuenta de correo creada previamente en Yahoo mail:
En esta ventana clic sobre la direccin asignada por Geocities para nuestra pagina Web alojada
Solo la primera vez que accedemos a nuestra pgina Web tendremos que elegir alguno de los temas
sugeridos por Yahoo.
10
Luego tendremos el resumen con los datos mas importantes registrados, observe bien cual es su
URL
Ahora la pagina que observamos, al hacerle clic a la URL es la apariencia inicial de nuestra pagina
asignada automticamente por Geocities, esta podemos cambiarla y poner las que deseemos.
11
A la siguiente ventana clic sobre Abrir el Administrador de Archivos

Las siguientes veces la opcin anterior aparecer de manera predeterminada cada vez que
accedamos nuevamente a nuestro Hosting en Geocities
Desde ahora en adelante cuando volvamos a ingresar a la pagina de Geocities con nuestro User y
Password respectivo, Geocities nos presenta diversas herramientas para poder gestionar los
archivos dentro del servidor gratuito que nos ofrece, elegimos la opcin Administrador de archivos
12
Ahora seleccionamos los formatos que deseamos ver, elegir todos los formatos, y clic sobre Abrir el
Administrador de Archivos
Tendremos la siguiente ventana con las siguientes partes:
13
A
B
C
D
A.
Indica las carpetas Web que hemos agregado a nuestro espacio de Hosting en el
servidor de Geocities, as como su respectivo tamao
B.
Indica los archivos Web que hemos agregado a nuestro espacio de Hosting en el
servidor de Geocities, as como su respectivo tamao
C.
Estos botones permiten gestionar los archivos html que pueda tener nuestro sitio Web,
podemos Crear un nuevo documento con el botn Nuevo, modificar uno existente,
copiar, cambiar el nombre, mover o eliminar, algn archivo mostrado, solo tenemos
que seleccionarlo y elegirla opcin respectiva
14
D.
Permite gestionar las carpetas dentro de nuestro sitio Web, as como la edicin de
todas ellas, inclusive de las sub. carpetas
E.
Muestra los resmenes estadsticos del consumo de espacio en disco del servidor,
causado por el almacenamiento de nuestros archivos, tambin nos permite visualizar
los archivos por extensiones.
Ahora debemos de recordar los siguientes datos para ingresar mediante FTP a nuestro espacio de
disco otorgado por Geocities:
15
Trate de ingresar a travs de estos datos mediante un navegador Web:
Si todo esta correcto visualizara los archivos de su Web dentro de una ventana similar a un
explorador de Windows, y desde la cual puede realizar edicin, como por ejemplo, copiar, mover,
eliminar, cambiar nombre a cualquier tipo de archivo.
Esto sirvi para familiarizarnos con el servicio FTP, y poder apreciar los archivos que forman parte
de nuestro Sitio Web
16
5. ENTORNO DE DREAMWEAVER
5.1 Conocer el espacio de trabajo de Dreamweaver 8
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los
objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas
para que pueda realizar cambios en los documentos rpidamente.
1 Barra Insertar: contiene botones para la insercin de diversos tipos de "objeto", como
imgenes, tablas y capas, en un documento. Cada objeto es un fragmento de cdigo HTML que
le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla
haciendo clic en el botn Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos
utilizando el men Insertar en lugar de la barra Insertar.
2 Barra de Herramientas: contiene botones que proporcionan opciones para diferentes
vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones
de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un
navegador.
3 Ventana de Documento: muestra el documento actual mientras lo est creando y
editando.
4 Grupo de Paneles: son conjuntos de paneles relacionados apilados bajo un encabezado
comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin situada a la
izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de
sujecin situado en el borde izquierdo de la barra de ttulo del grupo.
17
5 Selector de etiquetas: aparece en la barra de estado en la parte inferior de la

ventana de documento, muestra la jerarqua de etiquetas que rodean a la seleccin actual.
Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.
6 Inspector de Propiedades: le permite ver y cambiar diversas propiedades del objeto o
texto seleccionado. Cada tipo de objeto tiene diferentes propiedades. El inspector de
propiedades no est ampliado de forma predeterminada en el diseo del espacio de trabajo del
codificador.
7 Panel de Archivos: permite gestionar los archivos y las carpetas, tanto si forman parte de
un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos
tambin proporciona una vista de todos los archivos del disco local, como ocurre en el
Explorador de Windows
NOTA
Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir paneles,
inspectores y ventanas de Dreamweaver, utilice el men Ventana. Si no encuentra un panel,
un inspector o una ventana que haya marcado como abierto, seleccione Ventana >
Organizar paneles para disponer ordenadamente todos los paneles abiertos.
5.2 Utilizacin de la ventana de documento

La ventana de documento muestra el documento actual. Puede ver un documento en la vista
Diseo, la vista Cdigo o las vistas Cdigo y Diseo. La barra de estado de la ventana de
documento proporciona informacin sobre el documento actual.
Cambio de vista en la ventana de documento
Puede ver un documento en la ventana de documento con la vista Cdigo, con la vista Diseo o
con ambas.
Para pasar de una vista a otra en la ventana de documento, siga uno de estos
procedimientos:
Utilice el men Ver:

Seleccione Ver > Cdigo.
Seleccione Ver > Diseo.
Seleccione Ver > Cdigo y diseo.
Utilice la barra de herramientas Documento:
Haga clic en el botn Mostrar vista de cdigo.
Haga clic en el botn Mostrar vistas de cdigo y diseo.
Haga clic en el botn Mostrar vista de diseo.
5.3 Barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentes
vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra
las vistas Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones relativos a la
visualizacin del documento y a su transferencia entre los sitios local y remoto.
18
En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de cdigo slo muestra la vista Cdigo en la ventana de documento.
Mostrar vistas de cdigo y diseo muestra la vista Cdigo en una parte de la ventana de documento
y la vista Diseo en la otra parte. Cuando seleccione esta vista combinada, se encontrar disponible la
opcin Vista de diseo encima del men Ver. Utilice esta opcin para especificar qu vista debe aparecer
en la parte superior de la ventana de documento.
Mostrar vista de diseo slo muestra la vista Diseo en la ventana de documento.
Depuracin del servidor muestra un informe que le ayudar a depurar la pgina de ColdFusion ac tual.
El informe contiene los errores de la pgina, si los hay.
Ttulo del documento permite introducir un ttulo para el documento, que aparecer en la barra de
ttulo del navegador. Si el documento ya tiene ttulo, ste aparecer en dicho campo.
No hay errores de comprobacin de navegador permite comprobar la compatibilidad con distintos
navegadores.
Validar formato permite validar el documento actual o una etiqueta seleccionada.
Administracin de archivos muestra el men emergente Administracin de archivos.
Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un
navegador. Seleccione un navegador en el men emergente.
Actualizar vista de diseo actualiza la vista Diseo tras realizar cambios en la vista Cdigo. Los
cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta que
se efecten determinadas acciones, como guardar el archivo o hacer clic en este botn.
Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, y establecer qu vista va a
aparecer en la parte superior de la ventana. Las opciones del men corresponden a la vista actual: la
vista Diseo, la vista Cdigo o ambas. Para informacin sobre las opciones de la vista Cdigo,
Ayudas visuales permite utilizar distintas ayudas visuales para el diseo de las pginas.
Para mostrar u ocultar una barra de herramientas, siga uno de estos procedimientos:
Seleccione Ver > Barras de herramientas y, despus, seleccione la barra de herramientas

que desee.
5.4 Barra de herramientas Estndar

La barra de herramientas Estndar contiene botones para las operaciones ms habituales de los
mens Archivo y Edicin. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer
y Rehacer. Estos botones se utilizan del mismo modo que los comandos de men equivalentes.
5.5 Utilizacin de la barra Insertar
La barra Insertar contiene botones para crear e insertar objetos tales como tablas e imgenes.
Los botones estn organizados en categoras. Al pasar el puntero sobre un botn, aparece una
descripcin de la herramienta con el nombre del botn.
Visualizacin de la barra Insertar y sus categoras y mens correspondientes
19
Si lo desea, puede ocultar o mostrar y contraer o ampliar la barra Insertar. Tambin puede
mostrar las distintas categoras de la barra Insertar. Algunas categoras de la barra Insertar
tienen botones que constan de mens con comandos comunes.
Si prefiere ver las categoras como fichas en la parte superior de la barra Insertar, puede
cambiar el diseo de dicha barra.
Para ocultar o mostrar la barra Insertar, siga uno de estos procedimientos:
Seleccione Ventana > Insertar.

Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en la barra Insertar o en la barra de herramientas Documento,
Estndar o Codificacin y, a continuacin, seleccione Barra Insertar.
Para mostrar los botones de una categora determinada:
Haga clic en la flecha del men desplegable situada junto al nombre de la categora, en
el extremo izquierdo de la barra Insertar y, a continuacin, seleccione otra categora
en el men emergente.
Para mostrar el men emergente de un botn:
Haga clic en la flecha abajo, situada junto al icono del botn.
Para mostrar las categoras de la barra Insertar en forma de fichas:
Haga clic en la flecha situada junto al nombre de categora en el extremo izquierdo de la

barra Insertar y, a continuacin, seleccione Mostrar como fichas.
La barra Insertar muestra las categoras como fichas en la parte superior.

NOTA Es posible que tenga que hacer c lic en la barra de ttulo de la barra Insertar para volver
a abrirla.
20
Para mostrar las categoras de la barra Insertar en forma de men:
Haga clic con el botn derecho del ratn (Windows), y a continuacin, seleccione
Mostrar como mens.
La barra Insertar muestra las categoras en un men en lugar de mostrarlas en forma de fichas.
5.6 Utilizacin de paneles y grupos de paneles
En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de
paneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse y
acoplarse o desacoplarse con otros grupos de paneles.
Los grupos de paneles tambin se pueden acoplar a la ventana de aplicacin integrada (slo en
Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.
6. CREAR UN NUEVO SITIO DE TRABAJO

6.1 Configuracin de un sitio de Dreamweaver
Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos,
como temas relacionados, un diseo similar o un objetivo comn. Macromedia Dreamweaver
8 es una herramienta de creacin y administracin de sitios, por lo que puede utilizarla para
crear sitios Web completos, adems de documentos por separado.
El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados ptimos,
disee y planifique la estructura del sitio Web antes de crear las pginas que va a contener.
El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructura
bsica del sitio. Si ya dispone de un sitio en un servidor Web, puede utilizar Dreamweaver para
modificarlo.
6.2 Acerca de los sitios de Dreamweaver
Un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web.
La organizacin de los archivos en un sitio permite utilizar Dreamweaver para cargar el sitio en
el servidor Web, controlar y mantener los vnculos de forma automtica, administrar y
compartir archivos. Para aprovechar al mximo las funciones de Dreamweaver, debe definir un
sitio.
Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn el entorno de
desarrollo y el tipo de sitio Web que se desarrolle:
La carpeta local es el directorio de trabajo. En
Dreamweaver esta carpeta se conoce como "sitio
local". Esta carpeta puede colocarse en el equipo
local o en un servidor de red. En ella se almacenan
los archivos con los que est trabajando en un sitio
de Dreamweaver.
Para definir un sitio de Dreamweaver, slo tiene que
configurar una carpeta local. Sin embargo, para
transferir archivos a un servidor Web o desarrollar
aplicaciones Web, tambin necesita aadir datos
para un sitio remoto y un servidor de prueba.
En la carpeta remota se almacenan los archivos,
segn el entorno de desarrollo, para fines de prueba,
produccin, colaboracin, etctera. En Dreamweaver
esta carpeta se conoce como "sitio remoto" en el
panel Archivos. En general, la carpeta remota suele
colocarse en el equipo donde se ejecuta el servidor
Web.
Las carpetas de datos locales y remotos permiten transferir archivos entre el disco local y el
servidor Web, lo cual facilita la administracin de los archivos en los sitios de Dreamweaver.
21
En la carpeta del servidor de prueba, Dreamweaver procesa pginas dinmicas

6.3 Aspectos bsicos de la estructura de carpetas locales y remotas
Cuando configure el acceso a la carpeta remota del sitio de Dreamweaver (vase mas adelante
Configuracin de una carpeta remota), debe determinar el directorio de servidor de la carpeta
remota. El directorio de servidor especificado debe corresponder a la carpeta raz de la carpeta
local. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de una
carpeta remota a la derecha.
Si la estructura de la carpeta remota no coincide con la de la carpeta local, Dreamweaver

cargar los archivos en el lugar incorrecto y los visitantes del sitio no podrn verlos. Adems, se
rompern las rutas de imgenes y vnculos.
El directorio raz remoto deber haberse creado antes de que Dreamweaver intente conectar
con l. Si no dispone de un directorio raz para la carpeta remota, cree uno o pida al
administrador del servidor que le cree uno.
Aunque slo desee editar una parte del sitio remoto, deber duplicar toda la estructura de la
rama correspondiente del sitio, desde su carpeta raz hasta los archivos que desea editar.
Por ejemplo, si la carpeta raz del sitio remoto, denominada public_html, contiene dos carpetas,
Project1 y Project2, y desea trabajar nicamente con los archivos HTML de Project1, no ser
necesario que descargue los archivos de Project2, pero deber asignar su carpeta raz local a
public_html, no a Project1.
22
6.4 Configuracin de un sitio de Dreamweaver nuevo

Despus de planificar la estructura del sitio, o si ya posee un sitio, debe definir un sitio en
Dreamweaver antes de iniciar el desarrollo. Configurar un sitio de Dreamweaver permite
organizar todos los documentos asociados con un sitio Web.
NOTA
Tambin puede editar archivos sin configurar un sitio de Dreamweaver.
Despus de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer de

una copia de seguridad local.
6.5 Para definir un sitio de Dreamweaver:
6.5.1 Seleccione Men Sitio > Administrar sitios.
Aparece el cuadro de dilogo Administrar sitios.
NOTA
Si
no
tiene
ningn
sitio
de
Dreamweaver definido, aparecer el
cuadro de dilogo Definicin del sitio
y podr omitir este paso y continuar
con el siguiente.
6.5.2 Haga clic en el botn Nuevo.

Aparecer el cuadro de dilogo Definicin del sitio.
6.5.3 Siga uno de estos procedimientos:
Haga clic en la ficha Bsicas para utilizar el asistente para la Definicin del sitio, que le
guiar a travs del proceso de configuracin.
NOTA
Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para la

Definicin del sitio. Es probable que los usuarios que tengan ms experiencia con
Dreamweaver prefieran las opciones avanzadas.
Haga clic en la ficha Avanzadas para utilizar las opciones avanzadas, que le permiten
configurar carpetas locales, remotas y de prueba por separado segn conve nga.
NOTA
Para empezar, puede configurar un sitio de Dreamweaver completo, o simplemente

realizar el primer paso, la configuracin de la carpeta local.
6.6 Realice el proceso de definicin del sitio de Dreamweaver:

En el asistente para la Definicin del sitio, responda a las preguntas de cada pantalla y, a
continuacin, haga clic en Siguiente para avanzar en el proceso de configuracin o haga clic en
Atrs para regresar a una pantalla anterior.
6.6.1
Como opciones avanzadas, complete las categoras Datos locales, Datos remotos
y Servidor de prueba segn corresponda
SUGERENCIA
Despus de configurar un sitio de Dreamweaver, es recomendable exportar

el sitio para disponer de una copia de seguridad local. Para ms informacin,
consulte Importacin y exportacin de sitios.
Esto lo realizaremos de la siguiente manera:

6.6.2
Trabajaremos con la ficha Bsica, donde configuraremos nicamente los datos locales,
los datos para acceso remoto al servidor los configuraremos mas tarde. Para este paso
inicial tendremos que escribir el nombre de nuestro SITIO WEB de trabajo.
23
6.6.3
Luego tendremos que elegir una tecnologa de servidor, seleccionamos SI, y elegimos
de la lista PHP MYSQL
6.6.4
Elegimos la opcin para editar los archivos de manera local, para posteriormente
cargarlos al servidor de remoto.
Luego tenemos que indicar el lugar donde se almacenaran los archivos que
conformaran nuestro sitio Web local .
Esta ubicacin debe coincidir con la carpeta Web asignada por nuestro Servidor Web,
para nuestro caso la carpeta asignada por el Abyss Web Server es HTDOCS, ubicada
en C:/Archivos de Programa/Abyss Web Server/htdocs.
Dentro de esta ubicacin organizaremos los diferentes Sitios Web que vayamos a
trabajar (Crear carpeta por cada sitio Web)
24
Una vez dentro de la carpeta, hacer clic sobre Seleccionar. Apreciaremos la siguiente
vista:
6.6.5
Elegimos la opcin para editar los archivos de manera local, para posteriormente
cargarlos al servidor de remoto.
6.6.6
Luego se nos pide seleccionar el servidor de prueba tendremos que seleccionar un

servidor de prueba local. (Esto lo configuraremos mas tarde).
25
6.6.7
Veremos un resumen de los datos que acabamos de configurar. Para terminar

hacemos clic sobre COMPLETADO
6.6.8
Regresaremos a la vista de la ventana Administrador de Sitios, luego solo hacer clic

sobre Listo. Ya entonces hemos creado satisfactoriamente nuestro Sitio Web Local
para nuestro primer ejercicio.
6.6.9
Ahora visualizaremos los archivos que tengamos dentro de nuestro sitio Web desde el
panel Archivos, notemos lo siguiente
26
Carpeta local de nuestro sitio

Web ubicada en HTDOCS
1.
Permite visualizar y cambiar de manera rpida entre todos los sitios Web
configurados por Dreamweaver, estos archivos se visualizaran en la parte
inferior.
2.
Especifica la ubicacin de los archivos que se van a visualizar, ya sea de

manera remota (Hosting), de manera local o dentro del servidor de prueba, o
del mapa del sitio (estructura), estos archivos se visualizaran en la parte
inferior.
3.
Realiza la conexin con el servidor remoto (Hosting)
4.
Actualiza la vista actual de los archivos
5.
Permite colocar (publicar) u obtener (descargar) los archivos desde o hacia

la carpeta seleccionada en ese momento.
6.
Permite proteger
accidentales.
7.
Amplia la vista del explorador de sitios Web
desproteger
un
documento
contra
los
cambios
27
7. CONECTANDO A UN SITIO REMOTO

Ahora conectaremos nuestros archivos locales con nuestro Sitio Web Remoto creado en el Hosting
de Geocities, para ello utilizaremos los datos proporcionados durante la creacin de nuestro
Hosting:
Sigamos estos pasos:

iniciamos el proceso de conexin con el servidor remoto desde el men Sitio>Administrar
Sitios>Editar
Ahora trabajaremos con la pestaa Avanzada, e ingresaremos los datos como corresponde:
28
Para verificar que los datos ingresados son correctos, hacemos clic sobre el botn PRUEBA,
tiene que aparecer el siguiente mensaje
Finalmente clic en Aceptar y luego en Listo.

Ahora manejemos las vistas desde el explorador de archivos (Panel Archivos) y verifiquemos las
distintas vistas para el trabajo de nuestros archivos, apreciaremos las distintas vistas de nuestros
archivos.
Para la vista local veremos nuestro documento (aun vaca)
Para la vista remota de nuestro sitio realizaremos otro procedimiento adicional de la siguiente
manera:
Seleccionar primero Vista Local y luego clic al botn conectar

Apreciaremos un nico archivo (el creado en el Hosting de manera predeterminado).
29
8. VISUALIZAR Y EDITAR NUESTRO PRIMER ARCHIVO LOCALMENTE Y

PUBLICARLO PARA LA WEB
8.1 Descargar El Archivo Desde El Servidor Remoto Al Servidor Local
Desde la vista remota seleccionar al archivo almacenado durante la creacin del Hosting.
Empieza el proceso de descargar del o los archivos seleccionados
Dreamweaver pregunta si deseamos obtener (descargar al servidor local) los archivos

dependientes, es decir, todos los objetos incluidos dentro del archivo Web que vamos a
descargar como imgenes, archivos flash, etc.
Respondemos de acuerdo al contenido de la pagina o lo que necesitemos editar.

Ahora visualicemos la vista local, y apreciaremos el mismo archivo
30
8.2 Abrir El Archivo Remoto Del Servidor

Desde la vista remota hacer doble clic al nico archivo almacenado durante la creacin del
Hosting.
Si no ha descargado previamente el archivo, Dreamweaver pregunta si deseamos obtener

(descargar al servidor local) los archivos dependientes, es decir, todos los objetos incluidos
dentro del archivo Web que vamos a descargar como imgenes, archivos flash, etc.
Respondemos de acuerdo al contenido de la pagina o lo que necesitemos editar.

Ahora estaremos visualizando los archivos desde el servidor remoto
8.3 Hacer una modificacin al archivo local y luego publicarlo

Desde la vista local hacer doble clic al nico archivo almacenado, dicho archivo se presentara en
el rea de la ventana del documento
31
Hacemos Una pequea modificacin, como por ejemplo escribimos nuestro nombre en la parte
superior izquierda del documento y grabamos los cambios presionando [CTRL] + S
Cerrar el archivo
32
9. VISUALIZAR Y COMPARAR NUESTRA MODIFICACIN DENTRO DEL

SERVIDOR WEB LOCAL Y LUEGO CON EL SERVIDOR WEB REMOTO
Debemos visualizar los cambios en nuestro documento antes de publicarlos en la Web, para esto
tenemos que acceder va URL a nuestro servidor Web local (HTDOCS) desde un navegador
utilizando el siguiente formato: http://ServidorLocal/carpeta/archivo.htm, para nuestro caso:
http://LocalHost/sitio_Web01/index.htm.
Ahora veamos y comparemos con el archivo ubicado dentro del servidor remoto desde un
navegador
utilizando
el
siguiente
formato:
http://www.servidor.com/carpeta/archivo.htm,
para
nuestro
caso:
http://es.geocities.com/mis_clases_Web/index.htm.
Como apreciamos, aun ambas pginas son distintas a pesar que ya hemos hecho
modificaciones, lo que sucede en realidad es que esas modificaciones se han realizado de
manera local y no en el servidor remoto, lo que restara simplemente seria entonces actualizar
la pgina en el servidor remoto, de la siguiente forma:
Mantener la vista local de los archivos en Dreamweaver y seleccionar el archivo a publicar
(Colocar), luego hacer clic al botn Colocar:
33
Si tenemos archivos dependientes que hayamos modificados diremos que si deseamos incluirlos
Ahora automticamente empezara la actualizacin de archivos en el servidor remoto.
Terminado este proceso, volvamos a ingresar a nuestra pgina Web del Servidor Remoto. si
todo salio satisfactoriamente se nos mostrara un mensaje de confirmacin
Ir a la URL del servidor remoto y verificar los cambios publicados
34
10.CREAR UN NUEVO DOMINIO (nombre de nuestra pgina Web.)

Utilizaremos una pgina especializada en asignar servicios de nombres de dominio de manera
gratuita (a costo de una pequea publicidad por ser as).
Una vez en la Web de tendremos que elegir un nombre de dominio con el cual ser ubicada
(redireccionada) nuestra pagina Web ubicada en el Hosting de Geocities, es decir, que para acceder
desde
Internet
a
nuestra
pagina,
ya
no
ser
necesario
escribir:
http://es.geocities.com/ID_DE_YAHOO/, sino, simplemente, http://www.CUALQUIER-NOMBRE.TK
Para ello realizamos los siguientes pasos
10.1
Ingresaremos a la pgina http://www.Dot.Tk/es/index.html
10.2
En la parte inferior de la pagina, escribimos la direccin URL con la que deseamos que
nuestra pagina sea localizada, por ejemplo: www.MiPaginaWeb.tk (solo escribir
MiPaginaWeb, el WWW y el .tk son agregados de manera automtica)
35
10.3
10.4
10.5
Para verificar si el nombre esta disponible (ya que es nico para Internet), hacemos clic
sobre el botn siguiente.
Si todo esta correcto visualizamos la pantalla de confirmacin, anunciando que el dominio
elegido esta aun disponible, solo tendremos que seleccionar la opcin Dominio gratis y
luego Siguiente
Ahora tendremos que ingresar la URL asignada por nuestro Hosting gratuito (el de
Geocities), y un correo electrnico personal para que llegue un mensaje de confirmacin de
Dominio creado satisfactoriamente
36
10.6
Ahora crearemos la cuenta dentro del servicio de dominio para la Web de Dot.tk, para ser
usuarios de este servicio.
Ya tendremos creada nuestra cuenta para el servicio de dominio dentro de la pgina de DOT.TK.
37
10.7
Ahora ingresaremos a nuestra cuenta desde la pantalla inicial de

http://www.dot.tk/es/index.html
10.8
En la siguiente ventana Ingresamos nuestro USUARIO Y CONTRASEA inscritos en DOT.TK
Apreciaremos el panel de control del dominio gratuito.

Ahora ya podemos acceder a nuestro sitio Web a travs de nuestro dominio redireccionador
WWW.LoQueQUIERAS.tk y apreciaremos la misma pagina creada en Geocities
38
11.RECOMENDACIONES PARA CREAR PGINAS WEB

11.1
Los nombres de los archivos

Una de las principales dificultades a la hora de realizar un documento WWW es que
nosotros estamos trabajando en un PC con el entorno Windows, pero nuestras pginas van
a residir en una mquina con el sistema operativo UNIX. En UNIX son especialmente
importantes las maysculas/minsculas, lo que debemos tener en cuenta a la hora de
poner el nombre a un fichero y hacer un enlace al mismo: si pusimos el nombre en
minsculas, deberemos hacer igual los enlaces. Si no lo hacemos as, puede que los
enlaces e imgenes se vean bien en nuestro PC, pero no ser as en el servidor. Lo mismo
sucede con las extensiones de los ficheros: podemos emplear ".html" o ".htm", ".jpg" o
".jpeg" pero deberemos respetar esto a la hora de hacer los enlaces.
Otros elementos que debemos evitar al poner nombres a los ficheros son:
Caracteres especiales como , , ", etc.

Espacios en blanco
Letras con acentos
11.2
Longitud de las pginas

Las pginas debern hacerse lo ms cortas y concisas posible. Est demostrado que a la
gente no le gusta leer en la pantalla de un ordenador: la vista se cansa y la gente se
"aburre". Adems, el hecho de tener que desplegar mucha cantidad de texto (y/o
imgenes) en la pantalla, puede producir desorientacin en el lector, ya que pierde las
referencias de la cabecera y las ayudas a la navegacin. Cuanto ms importante sea una
pgina y ms atencin requiera por parte de los lectores, ms corta debe ser. Si el
contenido es especialmente interesante, esto se debe demostrar dentro de lo que se ve en
el primer pantallazo.
Suele recomendarse un mximo de 4 pantallazos como longitud aceptable para una pgina.
11.3
Tipografa
Al escoger la tipografa que vamos a emplear en nuestra pgina, debemos tener en cuenta
que estamos diseando un documento para que ser ledo en la pantalla de un ordenador.
Por lo tanto, debemos escoger tipos de letras no muy grandes, para no hacer demasiado
larga la pgina, pero tampoco excesivamente pequeos, que puedan causar dificultades de
lectura a las personas que no tengan una buena visin.
Usa tipos de letras que sean casi universales, como Arial o Times, ya que el usuario solo
podr ver los tipos de letras que tiene instalados en su ordenador. De nada sirve que se
utilicen letras raras que solo veremos nosotros.
El excesivo uso de maysculas dificulta la lectura.
No se debe usar el subrayado para destacar un texto: en las pginas Web estamos
acostumbrados a que las partes subrayadas sean enlaces y la gente suele pulsar sobre
ellos esperando acceder a otra pgina.
11.4
Pginas con frames o marcos

Las pginas con frames o marcos permiten dividir la pantalla en diferentes ventanas, con
un documento html diferente en cada una de ellas. Se suelen utilizar bastante ya que nos
permiten ejercer un gran control sobre la disposicin general y la apariencia de la pgina.
Sin embargo, deben utilizarse con cautela, ya que tienen algunos inconvenientes:
No se podrn hacer bookmarks o marcadores a las partes.

Habr dificultades para imprimir las pginas individuales.
No se pueden "copiar" las URLs.
El botn de anterior o back de los navegadores puede no funcionar correctamente.
39
Reducen el espacio til donde visualizar la informacin.

No todos los navegadores soportan marcos.
Podemos tener dificultades si alguien quiere hacer un enlace a una de nuestras
pginas: al aislar una parte del resto de los marcos, esta puede perder el sentido.
Algunas recomendaciones para pginas con frames:
Eludir la fragmentacin excesiva. Si se van a utilizar ms de dos frames, hay que
11.5
evitar la impresin de parcelacin en mltiples ventanitas. Por lo menos una de

ellas debe ser mayor que las dems y actuar como pgina principal.
Evitar la rigidez de las frames (uso de las etiquetas html noresize o
scrolling="no"). No debemos impedir que los usuarios puedan "mover" las frames,
ya que lo pueden necesitar por tener una resolucin de pantalla diferente de la
nuestra.
Enlaces exteriores a nuestro Web. No es conveniente que queden prisioneros
dentro de nuestra estructura de frames, ya que suele ser muy molesto debido a
que la nueva pgina quedar en un espacio reducido. Adems, seguramente
tendr un estilo diferente a la nuestra. Todava puede ser peor si la pgina a la
que enlacemos tiene a su vez frames. Para evitar esto podemos utilizar la etiqueta
html
target="_top"
con lo que la nueva pgina se cargar en una pantalla
completa.
Imgenes
Como ya mencionamos al hablar sobre la lentitud de las redes de comunicaciones, la
inclusin de imgenes en nuestras pginas, debe valorarse con detalle a fin de que la carga
de la pgina se lo ms rpida posible. Suelen considerarse pginas rpidas, aquellas de un
tamao no superior a unos 40 o 50 Kb (fichero + imgenes).
Dado que cuanta mayor calidad tiene una imagen, ms ocupa, deberemos encontrar un
compromiso entre la calidad de la misma y la informacin que se quiere mostrar. Son muy
raras las ocasiones en que es necesario poner una imagen de alta calidad en nuestras
pginas. Existen programas de tratamiento de grficos que permiten "bajar" la calidad de
una imagen de forma razonable.
Tambin podemos jugar con el tamao de las imgenes a la hora de quitar peso a nuestra
pgina, tratando de que estas sean lo ms pequeas posible. Si necesitamos incluir alguna
imagen grande, es mejor poner en la pgina una pequea muestra de la misma, indicando
que se puede pinchar sobre ella para verla en tamao grande. As, solo tendrn que
soportar una espera larga aquellos lectores que realmente tengan inters en verla. No se
debe reducir el tamao de la imagen con el programa con el que estamos editando la
pgina (Netscape Composer, etc.): nos da la falsa impresin de que la imagen es ms
pequea, pero lo nico que hace es reducir la forma en que vemos la imagen, que en
realidad es la misma. Para reducir de verdad el tamao de la imagen deberemos usar un
programa de tratamiento de grficos.
Se puede referenciar la misma imagen todas las veces que se quiera. No debemos
sobrecargar el servidor poniendo una y otra vez la misma imagen en diferentes directorios:
basta con ponerla una vez y referenciar la misma. Esto tiene adems la ventaja de que si
un usuario ya ha cargado ese icono en alguna ocasin, lo conservar en la "cach" de su
ordenador y no necesitar cargarla de nuevo, con lo que se acelera la transmisin. Por esta
razn, para iconos sencillos como son las "bolitas" para listados, lneas de separacin, etc.,
puedes utilizar los que estn ya cargados en nuestro Web en nuestro archivo grfico .
Los formatos de imgenes ms extendidos son: GIF y JPG (o JPEG):
El formato GIF utiliza hasta un mximo de 256 colores o 64 tonos de grises (se
pueden usar menos, con lo que ocupa menos la imagen) y permite la posibilidad
de definir fondos transparentes y animacin de grficos. Este formato usa un
sistema de compresin (para reducir el tiempo de transmisin por la red) con el
que no se pierde calidad. Por ello, este formato es apropiado para imgenes
pequeas y con buena resolucin y para dibujos con bordes bien definidos.
40
El formato JPG permite calidades de ms de 256 colores, de hecho permite
hasta 16 millones. El problema es que muchos usuarios tienen una resolucin de

pantalla de solo 256 colores, con lo que puede que se vean las imgenes de forma
defectuosa. Este formato tiene un sistema de compresin que hace que su
transmisin por la red sea ms rpida, por los que es el formato ms apropiado
para imgenes grandes. Sin embrago, este sistema de compresin puede bajar la
calidad de la imagen.
Las imgenes animadas deben utilizarse con mucho cuidado:
11.6
Ocupan bastante ms espacio que las imgenes normales.

Distraen la atencin del lector de la informacin til y acaban cansando.
Dificultan el saber cuando ha terminado de cargarse una pgina.
Si se tiene abierta la pgina Web y se cambia a una ventana distinta con otra
aplicacin, el PC sigue procesando la repeticin de la imagen, con lo que ralentiza
la velocidad de trabajo del ordenador.
Dificultan una impresin "limpia" de la pgina.
Colores y fondos
En nuestras pginas Web deberemos tener cuidado en emplear una armona de colores que
no perturbe la lectura de las pginas, procurando no emplear colores estridentes o
combinaciones extraas. No se deben cambiar los colores standard de los enlaces (azul
para los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De la
misma manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gente
tiene tendencia a pinchar sobre ellos.
Lo mejor es utilizar fondos de colores claros y texto de color oscuro, ya que son tonos que
se suelen leer con ms comodidad, por lo que siempre se debera hacer as en pginas en
las que predomina el texto. En el caso de usar un color de fondo muy oscuro tendremos
que emplear una tipografa en blanco u otro color muy claro, con lo que se impide la
impresin correcta de la pgina (pocas personas tienen configurado su navegador para que
imprima los fondos).
En el caso de que se emplee una imagen como fondo, deben seguirse los mismos
consejos que acabamos de dar y usar texturas simples y tenues, procurando no usar
texturas muy rugosas que se ven mal en pantallas de baja resolucin.
41

Clase Dreamweaver Postgrado

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Clase Dreamweaver Postgrado

Hochgeladen von

Copyright:

Verfügbare Formate

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

ESTABLECER UN SERVIDOR WEB LOCAL

ABRIR UNA CUENTA DE HOSTING

CREAR UN NUEVO SITIO DE TRABAJO

CONECTANDO A UN SITIO REMOTO

VISUALIZAR Y EDITAR NUESTRO PRIMER ARCHIVO LOCALMENTE Y PUBLICARLO PARA LA

VISUALIZAR Y COMPARAR NUESTRA MODIFICACIN DENTRO DEL SERVIDOR WEB LOCAL

10. CREAR UN NUEVO DOMINIO (nombre de nuestra pagina Web)

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

INTERNET: Internet es una red de redes a escala mundial de millones

URL: Sistema unificado de identificacin de recursos en la red. Las

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

HOSTING: Servicio de alojamiento de las pginas Web

DOMINIO: Conjunto de caracteres que identifican un sitio de Internet

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

SERVIDOR WEB: Un servidor Web es un programa que implementa el protocolo HTTP

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

3. ESTABLECER UN SERVIDOR WEB LOCAL DE PRUEBAS

Dejar las opciones predeterminadas a instalarse

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Instalar en la carpeta predeterminada

Iniciar el proceso de instalacin, esperar un momento.

Luego elegir la forma de arranque del programa, elegiremos la opcin Automtica:

Y por ultimo pedir ejecutar el servidor Web

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Luego apreciaremos la ventana de configuracin de nuestro Servidor Web, solicitndonos el idioma

Luego cierra la ventana del navegador

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

4. ABRIR UNA CUENTA DE HOSTING VERIFICAR FTP

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

A la siguiente ventana clic sobre Abrir el Administrador de Archivos

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Tendremos la siguiente ventana con las siguientes partes:

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Trate de ingresar a travs de estos datos mediante un navegador Web:

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora

UNJFSC ESCUELA DE POSTGRADO

5 Selector de etiquetas: aparece en la barra de estado en la parte inferior de la

5.2 Utilizacin de la ventana de documento

Utilice el men Ver:

5.3 Barra de herramientas Documento

Ing. Guillermo Martin Rosel Pacora