I.E.S. FORAMONTANOS

Cursos de Informática

No se puede enseñar en un tutorial de pocas páginas todo lo que aprenderás de un libro de 300 o más páginas pero después de seguir este tutorial de Dreamweaver serás capaz de orientarte en su entorno, de diseñar páginas sencillas y administrar tu sitio Web. Tampoco es la intención de enseñar aquí temas avanzados como hojas de estilo, DHTML, JavaScript, etc. Sobre este tema consulta tutoriales o libros correspondientes. Tampoco se ha tocado el tema de las capas, si necesitas información al respecto prueba en este tutorial específico: Trabajo con capas en Dreamweaver
No se requiere ninguna experiencia previa de Dreamweaver para seguir este tutorial pero suponemos que sepas utilizar Windows y aplicaciones para Windows (Word o Word Pefect por ejemplo), entiendas los términos como por ejemplo "barra de tareas", "menú contextual", "teclas de acceso directo", "barra de menús", "barra de herramientas", y sepas como copiar, pegar, insertar objetos y guardar tu trabajo.


Entorno de trabajo en Dreamweaver y creación de una página Web:

Dreamweaver es un editor del tipo WYSIWYG, es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Pero nunca está de más tener el conocimiento de este lenguaje, los editores WYSIWYG no son perfectos y pueden cometer errores o generar también bastante código basura. Para esto Dreamweaver dispone también del editor HTML o permite configurar un editor HTML externo si así lo deseamos. Para ver el código HTML pulsamos F 10 y se abrirá la ventana del editor, en la misma ventana tenemos el botón del editor externo para utilizar otro programa de edición HTML.
En el Dreamweaver 4 además podemos tener ambas vistas: código y diseño a la vez, tienes esta opción en el menú "Ver" o puedes usar los botones correspondientes de la barra de herramientas que están resaltados en rojo en esta imagen:

Para crear una nueva página utiliza el menú "Archivo" / "Nuevo". Tienes las opciones para crear una nueva página o crear una página desde una plantilla previa.
Para insertar objetos ( por ejemplo, imágenes, tablas o animaciones Flash en tu página puedes usar el menú Insertar o la ventana de objetos:

Si no la ves utiliza el menú "Ventana" / "Objetos" o Ctr+F3.

Para utilizar la ventana de los objetos de Dreamweaver, arrastra el icono del objeto que necesites, por ejemplo el icono de la imagen hacia la página, y te aparecerá la ventana del dialogo para indicar la ubicación de la imagen que quieres insertar.
Siempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades de un objeto:

La ventana que ves en esta imagen corresponde a las propiedades del texto, las opciones de la ventana cambiarán según el objeto que insertemos. Para verla, pulsa el objeto con el botón secundario en el objeto que quieras editar o utilizar el menú "Ventana" - "Propiedades", o las teclas Ctrl+F3.
Los objetos de Dreamweaver accesibles desde la ventana de Objetos:
Si pulsamos el pequeño triangulo que aparece en la parte superior derecha de la ventana de objetos podemos acceder a diferentes ventanas de objetos. A continuación viene la descripción de diferentes ventanas y objetos de Dreamweaver:
Común:
Es la ventana que aparece por defecto y contiene los objetos más comunes de Dreamweaver
Insertar imagen - para insertar objetos gráficos: ficheros .gif, .jpg o .png.
Insertar imagen de sustitución - permite crear los efectos "rollover" - botones o imágenes que cambian su apariencia al pasar el cursor sobre ellas.
Insertar tabla - como su nombre lo indica sirve para insertar tablas. Las tablas son un elemento todavía muy popular para colocar los contenidos de las páginas.
Insertar datos tabulares - Permite insertar datos de una hoja de cálculo.
Insertar barra horizontal - el elemento HTML definido por la etiqueta muy popular para separar los contenidos en una página Web.
Insertar barra de exploración - son unas barras de navegación creadas con tablas y JavaScript.
Dibujar capa - este tema se puede observar en profundidad en este tutorial de capas.
Insertar salto de línea - agrega espacio adicional entre los objetos o líneas de texto (la etiqueta
en HTML).
Insertar vínculo de correo electrónico - para insertar vínculos de tipo "mailto" para abrir un nuevo mensaje de correo con la dirección incluida en el campo "Para". Si quieres saber más sobre este tema lee este artículo: Outlook Express: algunos accesos directos de utilidad
Insertar fecha - permite introducir la fecha y la hora de modificación de la página.
Insertar Flash - para insertar objetos creados con Macromedia Flash en tu página.
Insertar Shockwave - para insertar aplicaciones creadas con Macromedia Director.
Insertar Generator - contenidos dinámicos de este programa de Macromedia basados en las plantillas colocadas en el servidor.
Insertar HTML de Fireworks - inserta y convierte el código nativo de Macromedia Fireworks. Insertar subprograma - para agregar applets Java a la página.
Insertar ActiveX - inserta objetos desarrollados con la tecnología ActiveX de Microsoft.
Insertar Plug-in - para insertar los plugins para Netscape (por ejemplo vídeo o sonido).
Insertar Server-Side Include - las instrucciones agregadas por el servidor (SSI), solo podremos utilizar esta opción si nuestro servidor lo permite, los servidores gratuitos no lo permiten.
Caracteres
Permite insertar caracteres especiales en el documento, por ejemplo © ¶ ©, etc.
Formularios
Para insertar formularios en una página Web, no hablaremos del tema en este tutorial porque será tratado en nuestro próximo tutorial de Dreamweaver.
Marcos
Permite crear páginas con marcos ("frames"). No trataremos este tema en este tutorial porque estamos absolutamente en contra de su uso (no son amigables para los navegantes ni para los buscadores). Preferimos utilizar barras de navegación. Es solo nuestra opinión personal, si te gustaría utilizar marcos en tu Web encontrarás la información que necesites en cualquier manual o libro de HTML.
Head
Esta ventana es muy importante: nos permite insertar código en la cabecera del documento.
Insertar Meta - son las etiquetas opcionales para los servidores Web, por ejemplo las etiquetas de palabras clave o de descripción.
Insertar palabras clave - la meta etiqueta de las palabras clave("keywords" en HTML) de nuestra página. Puede ser útil en algunos buscadores aunque la mayoría no le hace demasiado caso.
Insertar descripción - Es una meta etiqueta muy importante ("description" en HTML), trata de colocarla siempre, muchos buscadores la toman en cuenta a la hora de indexar la página. Debe ser una frase completa que describa lo mejor posible el contenido y el propósito de nuestro sitio.
Insertar la actualización - Meta "Refresh" en HTML, obliga al navegador a refrescar la página pasado un intervalo de tiempo o cargar una página diferente. Muy útil en los casos cuando nuestra página había cambiado de dirección y queremos que los navegantes que vengan a la URL antigua sean redirigidos automáticamente a la nueva dirección.
Insertar base - esta opción nos sirve si tenemos todos los documentos en un servidor distinto del de la página raíz, en este caso si utilizamos esta meta etiqueta todos los vínculos relativos serán interpretados automáticamente como absolutos, por ejemplo "Introduccion.htm" se interpretaría como "http://www.svetlian.com/Introduccion.htm" si hemos especificado http://www.svetlian.com/ como base.
Insertar vínculo - permite establecer relaciones entre los documentos, esta opción es muy útil para , por ejemplo, vincular rápidamente las hojas de estilo.
Objetos invisibles
Los objetos invisibles pueden ser puntos de fijación con nombre, comentarios, secuencias de comandos o espacio indivisible (éste último ya no existe en Dreamweaver 4).
Punto de fijación con nombre - nos sirve para poder navegar dentro de un documento. Con este objeto podemos fijar un destino para el vínculo.
Comentario - permite insertar texto de comentarios que permiten ayudar a interpretar el código pro serían invisibles desde el navegador, en HTML correspondería a la etiquetas .
Secuencias de comandos - con esta opción podemos insertar JavaScript y VBScript en nuestro documentos.
Espacio indivisible - inserta un espacio en blanco ( en HTML), ya no existe en Dreamweaver 4.
Y ahora, después de leer todo esto prueba crear algo en tu página, escribir algo de texto, insertar una imagen por ejemplo.
Puedes visualizar tu página en el navegador desde el menú "Archivo" / "Vista previa en el navegador" ("Preview en browser"). Por defecto Dreamweaver mostrará nuestro navegador predeterminado que tengamos instalado pero siempre podemos agregar un navegador secundario desde el mismo menú.

Espero que ya pudieras crear una página sencilla con Dreamweaver pero ahora todavía nos hace falta aprender a manejar nuestro sitio Web como un conjunto.
Para hacerlo utilizaremos el menú "Sitio/Nuevo sitio", no aparecerá una ventana como ésta:

Desde esta ventana podemos determinar la ubicación local y remota de los ficheros de nuestro sitio.
Si especificamos el tipo del servidor remoto como "FTP" podremos sincronizar nuestra carpeta local con el servidor remoto.
Una vez creado el sitio siempre podremos abrir y administrarlo desde el menú "Sitio".
Otra opción muy útil de Dreamweaver es el mapa del sitio:

Bueno, aquí terminamos con esta pequeña introducción a Dreamweaver. Estamos muy conscientes que no es suficiente para dominar este complejo programa pero si lo seguiste con atención y fuiste capaz de investigar por tu cuenta ya tienes una buena base por donde comenzar.

0 comentarios:

Publicar un comentario en la entrada