Podemos emplear DreamWeaver para crear sitios de web en forma visual, con una interfaz gráfica de fácil manejo que nos permite visualizar los cambios que efectuamos al mismo tiempo que los realizamos.
Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
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 hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
Uno de los puntos de mayor énfasis en esta edición de Dreamweaver son el soporte y las características de desarrollo en Cascading Style Sheet, haciendo posible creaciones con más facilidad y precisión, aplicando herramientas capaces de inspeccionar el código escrito. Otro aspecto capaz de ser analizado es la compatibilidad de nuestro sitio con los diversos navegadores, para que todos puedan visualizar la página correctamente.
La posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información de Word y Excel, con las funciones de copiar y pegar.
Un diseñador con experiencia encuentra en Dreamweaver una opción completa para desplegar sus conocimientos. Sin embargo, por el otro lado, usuarios principiantes se ven aturdidos por la cantidad de menús y herramientas del programa. La edición 2004 nos presenta un nuevo soporte para CSS, opciones de verificación de código pensado para múltiples navegadores, y facilidades en la administración de la página.
Puede que el atractivo de las características de Dreamweaver llame la atención, pero debe tenerse cuidado, ya que de nada servirá si no se comprenden sus utilidades, con lo cual resultará más productivo un programa como Front Page.
Interfaz de dreamweaver
El interfaz de Dreamweaver, como los de los demás productos de Macromedia (Flash, Fireworks...) puede parecer complicado, pero lo cierto es que una vez nos familiarizamos con su distribución de paneles, inspectores y selectores nos damos cuenta de que está pensado para mejorar la productividad. Además puede personalizarse en función del uso que vaya a darse al programa en cada momento.
Lo primero que llama la atención es encontrar, junto a los elementos habituales (espacio de trabajo, barras de menús y barras de estado), uno o varios conjuntos de paneles. Estos paneles agrupables ofrecen distintas funcionalidades y facilitan el acceso a determinadas tareas de uso frecuente. Para empezar, vamos a despejar el interfaz de elementos que de momento no vamos a usar. Cuando nos hagan falta los volveremos a sacar.
Configurar el entorno de trabajo
- En la barra de menús, clic en Ventana
· Seleccionar los paneles Insertar, Propiedades, Estilos CSS y Archivos. Todos los demás pueden quedar desmarcados (ocultos).
El panel Insertar contiene iconos (de momento inactivos) que nos permitiran insertar distintos elementos (imágenes, tablas, formularios...) en nuestras páginas web
El panel Propiedades mostrará información sobre los elementos que seleccionemos en nuestra página
El panel Estilos CSS nos permitirá seleccionar y editar la hoja de estilos asociada al sitio
El panel Archivos facilitará el trabajo con los diferentes documentos, elementos y carpetas que necesitaremos para crear nuestra web
los numeros que se ven en el perfil izquierdo del area de codigo estan referidos al numero de orden de cada una de las lineas de dicha area
Barra de propiedades
La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño. La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione.
- Para ver u ocultar la barra de herramientas, elija Ver > Barra de herramientas.
- Para ver código sólo en la ventana de documento, haga clic en el botón Mostrar vista de código.
- Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el botón Mostrar vistas de código y diseño. Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño arriba del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
·
· Este pánel contiene botones que permiten la creación e inserción de diversos tipos de objetos, como tablas, vínculos, capas e imágenes. El pánel contiene siete categorías de forma predeterminada: Común, Formularios, Marcos, Head, Invisibles y Caracteres. También contiene botones que cambian de vista: Estándar y Disposición. Cada uno de estos elementos serán explicados en temas posteriores.
Para cambiar de categoría dé clic sobre alguna de las pestañas situadas en la parte superior del pánel.
Si desea insertar un objeto en el documento haga clic en el correspondiente botón del pánel o arrastre el ícono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá un cuadro de diálogo en el cual se le pedirá que seleccione o inserte el archivo u objeto deseado.
Si desea insertar un marcador de posición mantenga presionada la tecla Control mientras da clic en el ícono para insertar el objeto. (Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, mantenga presionada la tecla Control y haga clic en el botón Imagen.)
Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las barras de navegación, las capas, los botones Flash, los marcos, etc., no insertan marcadores de espacio.
El inspector de propiedades permite examinar y editar las propiedades del elemento que esté seleccionado actualmente, puede ser un objeto o texto. Es posible seleccionar los elementos en la ventana de documento o en el inspector de código.
La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventana de documento. (Para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edición de la propiedad, se presiona Enter o se presiona Tab para cambiar a otra propiedad.)
El contenido del inspector de propiedades varía en función del elemento seleccionado. Si quiere obtener información sobre propiedades concretas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono Ayuda, situado en la esquina superior derecha del inspector de propiedades.
El inspector de propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizan con mayor frecuencia; para ver todas las propiedades haga clic en la flecha de ampliación situada en la esquina inferior derecha del inspector de propiedades, para ver más propiedades del elemento.
Menú de contexto
Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esé trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.
Para utilizar un menú contextual:
1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecerá el menú contextual para el objeto o la ventana seleccionados.
2 Seleccione el comando del menú contextual y libere el botón del ratón.
Este apartado es tan interesante que podríamos escribir todo un tratado de él. Vamos a intentar dar tan sólo unas breves nociones para comenzar y ser capaces de dar formato al texto de nuestros documentos de una manera rápida y sencilla.
Antes de comenzar, debes tener en cuenta que:
· Las fuentes de letra que tu tengas instaladas en tu pc puede que los usuarios que te visiten no las tengan instaladas. Para que una fuente de letra se visualice correctamente deben tenerla ambos pc´s, de lo contrario se tomará la fuente que se tenga como predeterminada en el pc que carezca de ella.
· Los usuarios de PC, Macintos y Unix disponen de juegos de fuentes de letra básicos instalados en sus plataformas y algunas fuentes pueden estar disponibles o no en su paquete básico.
Teniendo en cuenta lo anterior, podemos pensar que tenemos un problema. ¿Como solucionamos este pequeño inconveniente?
Podemos establecer listas de fuentes alternativas cuyos caracteres con casi identicos en las diferentes plataformas. En Propiedades de página podemos configurar cualquiera de los grupos disponibles. Personalmente siempre suelo usar Verdana, Arial, Helvetica, sans-serif. Primeramente porque me gusta la forma de estas fuentes, es clara, es elegante dentro de su sencillez, y es bastante difícil que no se encuentren en las otras plataformas.
Te preguntaras... ¿pero usa todas las fuentes a la vez? No. El navegador comprobará si tiene la primera de la lista, de no ser así continua con las fuentes restantes.
Bien, continuando con las propiedades de página, hay otros aspectos que podemos configurar: los encabezados. Si no ponemos valores específicos para ellos, usarán la fuente que hayamos elegido de manera predeterminada para todo el documento, y unos tamaños estandar que por defecto son estos:
Si por el contrario deseamos asignar otros tamaños diferentes, solo hay que abrir el desplegable e ir configurando a nuestro gusto. Lo mismo para el color. En mi documento yo dejaré todo esto por defecto.
Formato de párrafo
Paragraph Format submenu to apply the standard paragraph and heading tags." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Utilice el menú emergente Formato del inspector de propiedades o el texto> submenú Formato de párrafo para aplicar el párrafo estándar y las marcas de encabezado. Formato submenú Párrafo para aplicar el párrafo estándar y las marcas de encabezado." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Utilice El menú emergente Formato en El inspector de Propiedades o El texto> Formato submenú Párrafo párr Class Clase Section El párrafo de Las Marcas y Estándar de Encabezado.
Formato submenú Párrafo para aplicar el párrafo estándar y las marcas de encabezado." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">
Formato submenú Párrafo para aplicar el párrafo estándar y las marcas de encabezado." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'"> 1. Coloque el punto de inserción en el párrafo o seleccione parte del texto del párrafo. Coloque El Punto de Inserción En El párrafo a instancia de parte o del texto Seleccione del párrafo.
2. Paragraph Format submenu or the Format pop‑up menu in the Property inspector, select an option: Uso del Texto> Párrafo submenú Formato o Formato de la de menú emergente en el inspector de propiedades, seleccione la opción:" onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Uso del Texto> Párrafo submenú Formato o Formato en el menú emergente del inspector de propiedades, seleccione una opción: Uso del Texto> Párrafo submenú Formato o Formato de la de menú emergente en El inspector de Propiedades, Seleccione la Opción:
Paragraph Format submenu or the Format pop‑up menu in the Property inspector, select an option: Uso del Texto> Párrafo submenú Formato o Formato de la de menú emergente en el inspector de propiedades, seleccione la opción:" onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'"> * Seleccione un formato de párrafo (por ejemplo, Título 1, Título 2, Texto preformateado, y así sucesivamente). sin Seleccione Formato de párrafo (Por Ejemplo, Título 1, Título 2, Texto preformateado, y Así sucesivamente). La etiqueta HTML asociado con el estilo seleccionado (por ejemplo, para la rúbrica 1 h1, h2 para la rúbrica 2, antes del texto preformateado, y así sucesivamente) se aplica a todo el párrafo. La Etiqueta HTML Asociado Con El Estilo seleccionado (Ejemplo por, párr La rúbrica 1 h1, h2 párr La rúbrica 2, "antes" del texto preformateado, y Así sucesivamente) SE APLICA un Todo El párrafo.
* Seleccione Ninguno para quitar un formato de párrafo. Seleccione el párrafo Ninguno quitar sin Formato de párrafo.
Cuando se aplica una etiqueta de encabezado a un párrafo, Dreamweaver añade automáticamente la siguiente línea de texto en un párrafo estándar. SE APLICA de Cuando Una Etiqueta de Encabezado un párrafo de la ONU, Dreamweaver ANADE automaticamente la Siguiente Línea de texto en Estándar párrafo de la ONU. Preferences (Windows) or Dreamweaver > Preferences (Macintosh); then in the General category, under Editing Options, make sure Switch To Plain Paragraph After Heading is not selected." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Para cambiar esta configuración, seleccione Edición> Preferencias (Windows) o Dreamweaver> Preferencias (Macintosh) y luego en la categoría General, en Opciones de edición, asegúrese de cambiar al llano párrafo después de la partida no está seleccionada. Preferencias (Windows) o Dreamweaver> Preferencias (Macintosh) y luego en la categoría General, en Opciones de edición, asegúrese de cambiar al llano párrafo después de la partida no está seleccionada." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor='#fff'">Para configuracion this switch, Seleccione Edición> Preferencias (Windows) o Dreamweaver> Preferencias (Macintosh) y luego! En la Categoría General, en Opciones de edición, ASEGURESE de switch al llano párrafo Despues De La Partida No Seleccionada ESTA.
Figura 5.13. Lista no ordenada con el carácter por defecto (type="disc").
Figura 5.16. Lista no ordenada. Selección del carácter “círculo” (type="circle").
- Lista ordenada: es un conjunto de texto cuyos párrafos van enumerados secuencialmente. Para crearla se debe seleccionar el texto y se pulsa sobre el botón indicado en la figura 5.18.
Figura 5.18. Lista ordenada con el carácter por defecto (type="disc").
Por defecto se enumeran mediante un número digital, sin embargo se puede cambiar por otro símbolo. Para ello se puede modificar la etiqueta - tal como se hizo con la lista no ordenada anteriormente o bien se selecciona todo el texto de la lista, se pulsa el botón derecho y se elige la opción Lista -> propiedades, figura 5.19.
Figura 5.19. Aplicación de Formato texto: “Lista ordenada”.
Aparecerá la pantalla de la figura 5.20 que permite reenumerar o aplicar otros estilos de etiquetado como se puede observar en la figura 5.21.
Figura 5.20. Propiedades de lista.
Figura 5.21. Estilos de numeración.
Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen (tienes más detalles sobre este tema en nuestro curso de HTML pinchando AQUÍ).
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos:
- Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, por ejemplo:
http://www.ciber-rebellion.com - Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual.
- Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
- Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser:
"nombre_de_documento#nombre_de_punto"
El punto se define dentro de un documento a través del menú Insertar, opción Punto de fijación con nombre.
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.
Por ejemplo, aqui hay un enlace a www.villanos.net/revista, que es de referencia absoluta, por eso contiene http://.
Figura 5.25. Selección de la barra de inserción “Común”.
En las figuras 5.26 y 5.27 se indica respectivamente cómo insertar hipervínculos a páginas de Internet así como hacia otras páginas ubicadas en el sitio actual.
Figura 5.26. Inserción de “Hipervínculo” apuntando a una dirección de Internet
Figura 5.27. Inserción de “Hipervínculo” apuntando a otra página HTML del sitio actual.
Figura 5.28. Inserción de un “anclaje con nombre”.
No hay comentarios:
Publicar un comentario