martes, 16 de septiembre de 2008

Cuestionario 16/9




Contestar estas preguntas fundamentando las respuesta y entregarlas al profesor en forma individual:

1.¿Los menús de Dreamweaver pueden mostrarse u ocultarse desde el menú Ventana?.

2.¿Desde Dreamweaver se puede trabajar con el código fuente.?
3.¿El código fuente sólo puede modificarse en Dreamweaver?.
4.¿Identifica en la imagen las herramientas: "mostrar vista de código", "menú emergente de tamaño de página" y "ver opciones"?.
5.¿Cómo podemos insertar una regla horizontal en Dreamweaver? (una regla horizontal es un elemento de html para separar textos o párrafos en una página web).
6.¿Cuáles serían los paseos para mostrár los números de linea en la vista de código y aplicar colores a la sintáxis?
7.¿Cómo se pueden mostrar las reglas y la cuadrícula?






Cómo crear una página nueva

1.Vaya a Sitio de Dreamweaver en la pantalla de bienvenida.
2.Pulse la pestaña Avanzadas en la ventana Definición del sitio.
3.Escriba "Aquo Site" en Nombre del sitio.
4.Pulse el icono de la carpeta que se encuentra junto a la carpeta raíz.
5.Seleccione la carpeta Aquo_Site y pulse Seleccionar.
6.Pulse Aceptar. Dreamweaver busca en la carpeta raíz y crea un índice de subcarpetas, documentos de web e imágenes. En el panel Archivo se puede ver la organización de las carpetas (figura 1).
Figura 1: Los archivos de la página web aparecen en el panel Archivos.

7. Seleccione la carpeta Aquo_Site en el panel Archivos. Haga clic con el botón derecho (Windows) o Control+clic (Mac OS) y seleccione Nuevo archivo del menú. Al final del panel Archivos aparece el archivo nuevo, al que hay que asignar un nombre (figura 2).

Figura 2: El archivo nuevo aparece al final del panel Archivos.
8.Ponga de nombre al archivo "faqs.html".
9.Para trabajar en el documento nuevo, haga doble clic sobre él en el icono faqs.html que aparece en el panel Archivos.
10.Vaya a Archivo > Nuevo para abrir la ventana Nuevo documento (figura 3).
Figura 3: Se pueden crear archivos nuevos en la ventana Nuevo documento.

11.Seleccione Página en blanco, HTML y diseño . En esta página se pueden elegir una gran cantidad de documentos.

12.Pulse Crear. Aparece entonces una página similar al documento recién creado, pero que debe ser grabado en la carpeta raíz.

13.Vaya a Archivo > Guardar. Para llegar con más rapidez a su carpeta raíz, pulse Raíz del sitio. Pulse Cancelar.Esta manera de crear una página, a través de Archivo > Nuevo, requiere pasos adicionales y por ello no es la manera más recomendable de crear un archivo vacío. A través del panel Archivo se puede conseguir el mismo resultado de una manera más rápida. Utilice el método Archivo > Nuevo cuando quiera crear una página a partir de una plantilla, ya que Dreamweaver le ofrece multitud de opciones.

14.Vaya a Archivo > Nuevo y seleccione Página en blanco, HTML. Observe la cantidad de plantillas prediseñadas que aparecen a su disposición.

15.Bajo Diseño vaya a 2 columnas flotantes, barra lateral izquierda, para ver en la ventana de la derecha la imagen del diseño (figura 4).

Figura 4: En la ventana Nuevo documento se pueden visualizar las plantillas ya diseñadas.

16. Seleccione 3 columnas elásticas y pulse Crear. Dreamweaver configura entonces una página nueva con el diseño seleccionado y con texto de demostración (figura 5). Si lo desea, pulse Diseño en la parte superior de la ventana para hacer los cambios pertinentes.
Figura 5: Las plantillas ya diseñadas aparecen rellenas con texto de demostración.

17.Fíjese en que parte del texto de demostración explica las funciones de las columnas. Guarde el documento en su carpeta raíz y comience a sustituir el texto de demostración por el suyo propio.
18.Si necesita ejemplos más complejos, en Archivo > Nuevo encontrará variedad de diseños con diferentes combinaciones de color bajo Páginas de muestra.
19.Seleccione Hojas de estilos CSS, donde puede elegir tipos de letras, marcos, colores y muchas opciones más. Deje que estos ejemplos le inspiren en la creación de su página


Configuración y edición de una carpeta raíz local

Después de planificar la estructura del sitio, configure (defina) un sitio en Dreamweaver. También deberá definir un sitio para editar un sitio Web que no se ha creado en Dreamweaver. Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web.
La carpeta raíz local es el directorio de trabajo del sitio de DW. Esta carpeta puede encontrarse en el equipo local o en un servidor de red.
Si desea comenzar a editar archivos en su equipo (sin publicarlos), configure solamente una carpeta local y, más adelante, añada la información remota y de prueba.
Puede utilizar Dreamweaver para editar un sitio Web existente en el disco local o editar un sitio remoto (o una rama de un sitio remoto) aunque no haya utilizado Dreamweaver para crear el sitio original.

Nota: No necesita especificar una carpeta remota si la carpeta raíz local está en el sistema que ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el equipo local.

1 Seleccione una de las siguientes opciones:

• Para configurar un sitio nuevo, seleccione Sitio > Nuevo sitio.
• Para editar la configuración de un sitio existente en el disco local o un sitio remoto (o una rama de un sitio remoto), con independencia de si se creó en Dreamweaver o no, seleccione Sitio > Administrar sitios y haga clic en Editar.

Nota: Si no ha definido ningún sitio de Dreamweaver, aparecerá el cuadro de diálogo Definición del sitio y no tendrá que hacer clic en Nuevo.

2 Introduzca la información de configuración:

• Para configurar un sitio utilizando el asistente para la configuración de sitios, haga clic en la ficha Básicas y siga las instrucciones.
• Para configurar directamente las carpetas local, remota y de prueba (para procesar páginas dinámicas), haga clic en la ficha Avanzadas, seleccione la categoría Datos locales y establezca las opciones.

3 Haga clic en Aceptar y en Listo para crear el sitio (que se muestra en el panel Archivos).

Opciones de configuración de la carpeta local raíz

Si opta por definir las opciones de la carpeta raíz local directamente en lugar de utilizar la ficha Básicas del cuadro de diálogo Definición del sitio, haga clic en la ficha Avanzadas e introduzca la información.

Nota: Sólo es necesario establecer las dos primeras opciones para configurar un sitio que funcione en su equipo.

Nombre del sitio El nombre que aparece en el panel Archivos y en el cuadro de diálogo Administrar sitios; no aparece en el navegador.

Carpeta raíz local El nombre de la carpeta del disco local en la que se almacenan los archivos del sitio, las plantillas y los elementos de biblioteca. Cree una carpeta en el disco duro o haga clic en el icono de carpeta para localizar la carpeta.
Cuando Dreamweaver resuelve vínculos relativos a la raíz, toma como referencia esta carpeta.

Actualizar lista de archivos locales automáticamente Indica si Dreamweaver debe actualizar de forma automática la lista de archivos locales cada vez que se copien archivos en el sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver al copiar estos archivos, pero la vista local del panel Archivos no se actualizará automáticamente y deberá
hacer clic en el botón Actualizar de la barra de herramientas del panel Archivos para actualizar el panel manualmente.

Carpeta predeterminada de imágenes La ruta de la carpeta en la que se almacenan las imágenes que utiliza en el sitio. Introduzca la ruta o haga clic en el icono de carpeta para localizar la carpeta.

Vínculos relativos a Cambia la ruta relativa de los vínculos que cree con otras páginas del sitio. De manera predeterminada, Dreamweaver crea vínculos mediante rutas relativas a documentos. Seleccione la opción Raíz del sitio para cambiar la configuración de ruta y asegúrese de que especifica la dirección HTTP en la opción Dirección HTTP.
El cambio de esta configuración no convierte la ruta de vínculos existentes; la configuración sólo será aplicable a los nuevos vínculos que cree visualmente con Dreamweaver.
El contenido vinculado a la ruta relativa a la raíz del sitio no se muestra en la vista previa de los documentos en un navegador local, a menos que especifique un servidor de prueba o que active la opción Vista previa utilizando el archivo temporal en Edición > Preferencias > Vista previa en el navegador. Esto es así porque los navegadores no reconocen la raíz de los sitios.

Dirección HTTP El URL que utilizará el sitio Web. Esto permite que Dreamweaver verifique los vínculos del sitio que utilicen URL absolutos o rutas relativas a la raíz del sitio. Dreamweaver también utiliza esta dirección para asegurarse de que los vínculos relativos a la raíz del sitio funcionan en el servidor remoto, que puede tener una raíz del sitio diferente. Por ejemplo, si establece un vínculo con un archivo de imagen ubicado en la carpeta C:\Sales\images\ (donde Sales es la carpeta raíz local) y el URL del sitio completo es http://www.mysite.com/SalesApp/ (donde SalesApp es la carpeta raíz remota), la introducción del URL en el cuadro de texto Dirección HTTP garantizará que la ruta de acceso a la imagen vinculada en el servidor remoto sea /SalesApp/images/.

Usar verificación de vínculos con distinción entre mayúsculas y minúsculas Comprueba que coincidan las mayúsculas y minúsculas de los vínculos y los nombres de archivos cuando Dreamweaver comprueba los vínculos. Esta opción resulta útil en sistemas UNIX en los que los nombres de archivo distinguen entre mayúsculas y minúsculas.

Activar caché Indica si debe crearse un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios. Si no selecciona esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes de crear el sitio. Es recomendable seleccionar esta opción porque el panel Activos (en el grupo de paneles Archivos) sólo funciona si se ha creado un caché.

Sitios en dreamweaver

Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos, como temas relacionados, un diseño similar o un objetivo común. Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede utilizarlo para crear documentos individuales y sitios Web completos.
En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y administrar y compartir archivos.
Para aprovechar al máximo las funciones de Dreamweaver, debe definir un sitio.

Nota: Para definir un sitio de Dreamweaver, sólo tiene que configurar una carpeta local. Sin embargo, para transferir archivos a un servidor Web o desarrollar aplicaciones Web, también debe añadir datos para un sitio remoto y un servidor de prueba.

Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web que se desarrolle:
Carpeta raíz local Almacena los archivos con los que está trabajando. Dreamweaver se refiere a esta carpeta como el “sitio local”. Esta carpeta puede encontrarse en el equipo local o en un servidor de red. Si trabaja directamente en el servidor, Dreamweaver cargará los archivos en el servidor cada vez que los guarde.
Carpeta remota Almacena los archivos para pruebas, producción, colaboración, etc. Dreamweaver se refiere a esta carpeta como el “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 duro local y el servidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver.
Carpeta de servidor de prueba La carpeta en la que Dreamweaver procesa páginas dinámicas.

Para ver un tutorial sobre la definición de un sitio de Dreamweaver, consulte:

martes, 9 de septiembre de 2008

El Espacio de trabajo IV

Introducción a la barra de herramientas Estándar

La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archivo y Edición.
Nuevo, Abrir,Guardar,Guardar todo, Cortar, Copiar, Pegar,Deshacer y Rehacer. Estos botones se utilizan del mismomodo que los comandos de menú equivalentes.

Introducción a la barra de estado

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.
A. Selector de etiquetas B. Herramienta Seleccionar C. HerramientaMano D. Herramienta Zoom E. Establecer nivel de aumento F. Menú emergente Tamaño de ventana G. Tamaño del documento y tiempo de descarga estimado

Selector de etiquetas
Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) omantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase
o un ID del menú contextual.
Herramienta Seleccionar
Activa y desactiva la herramienta Mano.
Herramienta Mano
Permite hacer clic en el documento y arrastrarlo por la ventana de documento.
Herramienta Zoom y menú emergente Establecer nivel de aumento
Permiten establecer un nivel de aumento para el documento.
Menú emergente Tamaño de ventana (Sólo visible en la vista Diseño.)
Permite cambiar el tamaño de la ventana de documento a dimensiones predeterminadas o personalizadas.
Tamaño del documento y tiempo de descarga
Muestra la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

miércoles, 3 de septiembre de 2008

El espacio de trabajo III

Introducción a la ventana de documento

La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:

Vista Diseño

Un entorno para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador. Puede configurar la vista Diseño para que muestre el contenido dinámico mientras trabaja en el documento.

Vista Código

Un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.

Vistas Código y Diseño

Le permite ver las dos vistas, Código y Diseño, para el mismo documento en una sola ventana.
Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, Dreamweaver incluye un asterisco después del nombre del archivo.
Cuando se maximiza la ventana de documento en el diseño integrado de espacio de trabajo (sóloWindows), no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título de la ventana principal del espacio de trabajo.
Cuando una ventana de documento está maximizada, aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.


Introducción a la barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño.
La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.
A. Mostrar vista de código B. Mostrar vistas de código y diseño C. Mostrar vista de diseño D. Título del documento E. Administración de
archivos F. Vista previa/Depurar en explorador G. Actualizar vista de diseño H. Ver opciones I. Ayudas visuales J. Validar formato K. Comprobar compatibilidad con navegadores

En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de código
Sólo muestra la vista Código en la ventana de documento.
Mostrar vistas de código y diseño
Divide la ventana de documento entre las vistas Código y Diseño. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver.
Mostrar vista de diseño
Sólo muestra la vista Diseño en la ventana de documento.

Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en código, no podrá ver los archivos en la vista Diseño y los botones Diseño y Dividir aparecerán atenuados.

Título del documento
Permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.
Administración de archivos
Muestra el menú emergente Administración de archivos.
Vista previa/Depurar en explorador
Le permite obtener una vista previa o depurar el documento en un navegador.
Seleccione un navegador en el menú emergente.
Actualizar vista de diseño
Actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la
vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.
Nota: La actualización también actualiza funciones de código que dependen delDOM(modelo de objeto de documento), como la capacidad para seleccionar las etiquetas inicial y final de un bloque de código.
Ver opciones
Permite definir las opciones de las vistas Código y Diseño, 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 Diseño, la vista Código o ambas.
Ayudas visuales
Permite utilizar distintas ayudas visuales para el diseño de las páginas.
Validar formato
Permite validar el documento actual o una etiqueta seleccionada.
Comprobar compatibilidad con navegadores
Le permite comprobar si el CSS es compatible con diferentes navegadores.

martes, 2 de septiembre de 2008

T.P: Creación de galeria de imagenes

En este trabajo crearemos una tabla de 4 columnas por 2 filas y ubicaremos en cada celda imágenes de nuestro interés, optimizadas para el tamaño de cada celda. Cuando hagamos clic en cada imagen se debe abrir una nueva ventana con la imagen en tamaño real.
Las herramientas que usaremos para este trabajo son:

  • Photoshop para la optimización de imágenes
  • Dreamweaver para el diseño de la pagina

Después de terminado el T.P. consultar con el profesor sobre otra forma de realizar la misma acción pero con comportamientos.

El espacio de trabajo II



A. Barra Insertar B. Barra de herramientasDocumento C. Ventana de documento D. Grupos de paneles E. Selector de etiquetas F. Inspector
de propiedades G. Panel Archivos

EnMac OS®, Dreamweaver puede mostrar varios documentos en una sola ventana con fichas que identifican a cada uno de ellos. Dreamweaver también puede mostrar un espacio de trabajo flotante en el que cada documento aparece en su propia ventana individual. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas.
Las ventanas se ajustan automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamaño.

Introducción a los elementos del espacio de trabajo

El espacio de trabajo incluye los siguientes elementos.
Nota: Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir los paneles, inspectores y ventanas, utilice elmenú Ventana. Si no encuentra un panel, un inspector o una ventana que hayamarcado como abierto, seleccione Ventana> Organizar paneles para disponer ordenadamente todos los paneles abiertos.

Ventana de bienvenida
Le permite abrir un documento reciente o crear un documento nuevo. Desde la pantalla de bienvenida, también puede profundizar sus conocimiento sobre Dreamweaver mediante una visita guiada o un tutorial del producto.

Barra Insertar
Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos PA, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.

Barra de herramientas Documento
Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.

Barra de herramientas Estándar (No semuestra en el diseño de espacio de trabajo predeterminado.)
Contiene botones para las operaciones más habituales de los menúsArchivo Y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas > Estándar.

Barra de herramientas Codificación (Sólo se muestra en la vista Código.)
Contiene botones que le permiten realizar numerosas operaciones de codificación estándar.

Barra de herramientas Representación de estilos (Oculta de manera predeterminada.)
Contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. También contiene un botón que le permite
activar o desactivar estilos de hojas de estilos en cascada (CSS).

Ventana de documento
Muestra el documento actual mientras lo está creando y editando.

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 diseño del espacio de trabajo del codificador.

Selector de etiquetas
Situado en la barra de estado de la parte inferior de la ventana de documento. Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

Grupos de paneles
Conjuntos de paneles relacionados agrupados bajo un encabezado común. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto de sujeción situado en el borde izquierdo de la barra de título del grupo.

Panel Archivos
Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder (Macintosh).

Introducción al diseño del espacio de trabajo


A. Barra Insertar B. Barra de herramientas Documento C. Ventana de documento D. Grupos de paneles E. Selector de etiquetas F. Inspector de propiedades G. Panel Archivos

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente. En Windows®, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.


Conceptos básicos


Qué es Dreamweaver


Dreamweaver es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa