¿Qué es el Dreamweaver?
El Dreamweaver se define como un editor HTML
profesional para diseñar, codificar y desarrollar
sitios, páginas y aplicaciones Web.
Permite crear sitios de forma totalmente gráfica, y
dispone de funciones para acceder al código HTML
generado. También permite la conexión a un
servidor, a base de datos, soporte para programación
en ASP, PHP, JavaScript, cliente FTP integrado, etc.
Página de Inicio del Dreamweaver
Al entrar por primera vez en Dreamweaver, hay
que elegir el tipo de espacio de trabajo:
Diseñador: Espacio de trabajo integrado en el que
todas las ventanas de documentos y todos los
paneles forman una ventana de aplicación más
grande, con los grupos de paneles apilados a la
derecha.
Codificador: Mismo espacio de trabajo integrado,
pero con los grupos de paneles apilados a la
izquierda; las ventanas de documentos muestran
de forma predeterminada la vista de código.
Después de pulsar Aceptar, aparece la ventana de
inicio de la figura 2.1., que permite abrir ficheros,
crear nuevos así como crear a partir de plantillas.
La barra de herramientas de documento, contiene botones que
proporcionan diversas opciones de visualización y algunas
operaciones comunes como la obtención de una vista previa en un
navegador o la colocación del título del documento.
En la parte de código, se visualiza el documento en HTML mientras
que en Diseño se pre visualiza de la forma en que quedará el
documento definitivo.
La barra vertical de herramientas Codificación (se muestra
únicamente en la vista Código) contiene botones con los que es
posible realizar muchas operaciones de codificación habituales.
El inspector de propiedades, permite ver y cambiar algunas de las
características más utilizadas del objeto o texto seleccionado
actualmente.
El selector de etiquetas, que aparece en la barra de estado en la
parte inferior de la ventana de documento, indica las etiquetas que
rodean al lugar donde está el cursor en cada momento.
Los grupos de paneles son conjuntos de paneles relacionados
apilados bajo un encabezado común. Se pueden ampliar, separar y
ocultar.
El panel de archivos, permite gestionar los archivos y las carpetas,
de un sitio local de Dreamweaver o de un servidor remoto. También
proporciona una vista de todos los archivos del disco local, como
ocurre en el Explorador de Windows (Windows) o en el Finder
(Macintosh).
¿Cómo se crea un sitió? 1
1. Abra Dreamweaver
2. Vaya a crear nuevo>Sitio
de Dreamweaver y abra
la ventana Definición de
sitios.
2
3. Vaya a avanzadas y pulse datos locales
4. En “Nombre del sitio”, escriba
"Sitio Aqueo". Este nombre es sólo
3 para uso propio y no aparecerá en el
sitio web.
5. Vaya al icono “Carpeta”, junto a
carpeta de raíz local. Este punto
define la carpeta principal de
almacenamiento de datos para el
sitio web.
6. Vaya a la carpeta "Sitio _Aquo" y
pulse seleccionar. Con esto
Dreamweaver ya posee la
información mínima para crear un
sitio web.
7. Pulse aceptar, Dreamweaver abre entonces la
carpeta principal y muestra en el panel Archivos
un menú con todas las carpetas, imágenes y
documentos contenidos en ella.
8. Observe que en la parte superior del panel
“archivos” existe un menú desplegable en el que
aparece "Sitio Aquo". Aquí están los nombres de
todos los sitios que están siendo creados. Si es
necesario, se puede navegar por el disco duro para
buscar otras carpetas.
9. Dreamweaver no puede registrar cambios
efectuados fuera de el. Utilice por tanto el panel
Archivo para llevar a cabo todos los cambios en la
estructura de los documentos del sitio web, y no
herramientas del sistema operativo.
¿Cómo se crea un HTML?
1. Seleccione Archivo > Nuevo.
2. En la categoría “nuevo documento”, seleccione el tipo de páginas que quiere
crear en la columna tipo de documento. Por ejemplo, seleccione HTML para
crear una página HTML sencilla.
3. Seleccione un tipo de documento en el menú emergente Tipo de documento.
En la mayoría de los casos, podrá utilizar la selección predeterminada,
HTML5.
4. Elija otras opciones en función del tipo de página que desee crear:
• Ninguno: seleccione esta opción si desea crear un sitio web simple sin utilizar
ningún framework.
• Bootstrap: las plantillas de Bootstrap son diseños predefinidos con el
framework de Bootstrap. Seleccione esta opción si desea crear sitios web
interactivos con el framework de Bootstrap.
5. Si no utiliza un framework:
Título de documento: Introduzca el título
del documento en este campo y
Dreamweaver lo agregará
automáticamente a la sección <head> del
documento.
Tipo de documento: Seleccione un tipo de
documento en este menú emergente.
6. Adjuntar CSS: Adjunte un diseño CSS
existente a la página, haga clic en el icono
“adjuntar hoja de estilos”, junto al panel
“adjuntar archivo CSS”, y seleccione una
hoja de estilos CSS.
7. Si desea crear una página web interactiva con
el framework de Bootstrap:
• CSS de Bootstrap: Indique si crear un nuevo
CSS de Bootstrap o utilizar un archivo CSS
existente, indique la ruta al archivo,
asegúrese de que el archivo CSS se encuentre
dentro de la carpeta raíz del sitio.
• Adjuntar CSS: adjunte un diseño CSS
existente a la página, haga clic en el icono
Adjuntar hoja de estilos, junto al panel
Adjuntar archivo CSS, y seleccione una hoja
de estilos CSS.
• Incluir un diseño ya creado: Seleccione esta
opción si ya dispone de un diseño. Haga clic
en Personalizar para editar los valores de la
cuadrícula y los puntos de corte.
8. Haga clic en “preferencias” si desea establecer las
preferencias predeterminadas del documento, como el tipo
de documento, la codificación y la extensión del archivo.
9. Haga clic en el botón Crear.
10. Guarde el nuevo documento (Archivo > Guardar).
11. En el cuadro de diálogo que aparece a continuación, vaya
hasta la carpeta en la que desea guardar el archivo.
12. En el cuadro “Nombre de archivo”, introduzca un
nombre para el archivo.
Principales Herramientas de Propiedades
Título: Es el título de la página que aparece en la barra de
título de la ventana de documento y la ventana de la
mayoría de los navegadores.
Imagen de fondo y Fondo: Una imagen y un color de fondo
para la página.
Texto y Vínculos: Definen los colores predeterminados de
texto, vínculos visitados y vínculos activos.
Margen izquierdo y Margen superior: Tamaños de los
márgenes de la pág.. en la etiqueta "body“. Netscape
Navigator prescinde de estos valores y utiliza los de "Ancho
de margen" y "Alto de margen". Para obtener un resultado
óptimo en los dos navegadores, proporcione valores de
márgenes para ambos; complete los cuatro valores de
márgenes. Para asegurarse de que no aparecen márgenes en
ningún navegador, configure los cuatro valores con el valor
0. Utilice Vista previa en el navegador para ver los
márgenes.
Ancho de margen y Alto de margen: Tamaños de los márgenes de la página en la
etiqueta body solamente para Netscape Navigator. Para obtener un resultado óptimo
en los dos navegadores, proporcione valores de márgenes para ambos navegadores,
complete los cuatro valores de márgenes.
Codificación del documento: Codificación empleada para los caracteres del documento.
Imagen de rastreo: Imagen empleada como guía para copiar un diseño, sólo sirve como
referencia, ya que no aparece cuando el documento se muestra en un navegador.
Transparencia de imagen: Determina la opacidad de la imagen de rastreo, desde
transparente hasta opaca.
Carpeta de documentos: muestra la carpeta en la que se guarda el documento actual.
Carpeta del sitio: muestra la ruta de la carpeta raíz local del sitio en la que se ha
guardado el documento actual. Consulte "Configuración de un sitio Dreamweaver".
¿Cómo se puede utilizar CSS?
En el menú Archivo, escoja “Nuevo”, elija la categoría “Página de muestra”, en la columna “Carpeta de
muestra” escoja “Hojas de estilos CSS”. Luego, en la columna “Página de muestra” elija el ejemplo de
estilo que prefiera (a la derecha se muestra una vista).
Haga clic en Crear, “Dreamweaver crea un archivo CSS”. En el
panel “Estilos CSS”, puede ver todos los estilos de esta hoja.
A continuación deberá guardar la hoja de
estilos. Ahora basta con que cree una página
HTML y la vincule a este archivo CSS.
Ventajas de Utilizar Dreamweaver
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en
este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están
hechas en JavaScript-C, lo que le ofrece una gran flexibilidad.
Como editor WYSIWYG, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que
alguien pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Permite el uso de "Extensiones“; pequeños programas, que cualquier desarrollador web puede escribir (normalmente
en HTML y JavaScript) ofreciendo funcionalidades añadidas a la aplicación.
Brindará acceso rápido a: Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET, diseño de páginas Webs
con un interfaz completamente gráfico, barra de herramientas de programación (facilita las operaciones de
programación más usuales), contracción del código (para centrarse solo en el que se está utilizando), barra de
herramientas de reproducción de estilos (se puede ver el resultado final), comparar archivos para ver qué ha
cambiado, facilidad para añadir vídeos Flash, notificación y registro de eventos, se integra en Microsoft Word, Flash,
Adobe Photoshop y otras, y optimiza las páginas para las diferentes versiones de los navegadores.
Este programa le ayuda al estudiante a aprender a crear un sitio web, mejora su creatividad y su curiosidad por
emplear todas las herramientas de este diseñador web, sirve para poder diseñar su propio sitio web con todo lo que
deseen ponerle.
CONCLUSIONES
En conclusión el Dreamweaver, es un programa de la
empresa Adobe que sirve para diseño y programación
web, básicamente para hacer o modificar páginas de
Internet y para utilizarlo se necesita al menos algún
conocimiento de lenguaje HTML o PHP, los cuales son
códigos o lenguajes que se utilizan para desarrollar
sitios web.
En resumen, el programa es realmente satisfactorio,
incluso el código generado es de buena calidad. La única
pega consiste en que al ser tan avanzado, puede resultar
un poco difícil su manejo para personas menos
experimentadas en el diseño de web.
