Mas para la carpeta

Por problemas personales no pude preparar el material para hoy, sin embargo Internet me dio la solución a partir de este muy buen sitio que tiene mucho material sobre dreamweaver:

http://www.todo-dreamweaver.com/

De el agregaran a la carpeta los siguientes temas:

Creación de un menú desplegable en Dreamweaver Formularios en DreamWeaver Botones Flash con DreamWeaver Crear una Barra de Navegación en DreamWeaver La composición de páginas usando tablas con DreamWeaver A trabajar, que todos los dias voy a pedir carpeta hasta fin de año.

Que son roll-over?

Son imagenes de sustitución, vínculos a otro documento que cambia de aspecto al pasar el ratón por encima.

Como crear roll-over?
Para crear un roll-over vamos a el menú aplicación/comun y le damos a el icono de imagenes de sustitución (el que aparece en la siguiente imagen)

Ahora se nos abrirá una nueva ventana ( como en la imagen siguiente)

La rellenaremos de la siguiente forma:
En “Nombre de la imagen “ponemos el nombre que queramos darle ( no tiene gran importancia, la podemos dejar como aparece por defecto)
En “Imagen original” e “imagen de sustitución” le damos a examinar como indica en la imagen y buscamos las imagenes que queramos que aparezcan desde el principio (original) y la que queramos que la sustituya ( imagen de sustitución)
En “URL” ponemos el vinculo al que queramos que se dirija al hacer clic
Ahora ya tenemos listo nuestro propio roll-over con dreamweaver.

CREACION DE CAPAS

Para crear una capa, lleve a cabo una de estas operaciones:
Para dibujar una capa, haga clic en el botón Dibujar capa de la barra Insertar y arrástrelo en la vista Diseño de la ventana de documento para dibujar la capa.

Para colocar el código de una capa en un determinado lugar del documento, sitúe el punto de inserción en la ventana de documento y, a continuación, elija Insertar > Capa.


Si tiene activada la opción Elementos invisibles, aparecerá un marcador de código de capa en vista Diseño cada vez que coloque una capa en la página. Si los marcadores de código de capa no están visibles y desea verlas, elija Ver > Ayudas visuales > Elementos invisibles. Cuando la opción Elementos invisibles está activada, los elementos de la página pueden cambiar de posición. Sin embargo, los elementos invisibles no se muestran en los navegadores. Por ello, cuando se ve la página en un navegador, todos los elementos invisibles aparecen en la posición correcta.
Para dibujar múltiples capas consecutivamente:
Haga clic en el botón Dibujar capa del panel Insertar.
Arrastre el ratón mientras presiona la tecla Control para dibujar cada capa. Podrá continuar dibujando nuevas capas mientras no suelte la tecla Control.




PANEL CAPAS
El panel Capas proporciona un medio para manejar las capas del documento. Para abrir el panel Capas, elija Ventana > Otros > Capas. Las capas se muestran en forma de lista de nombres; en orden de índice z. La primera capa que se creó estará situada al final de la lista, mientras que la última aparecerá en la primera posición. Las capas anidadas se muestran como nombres relacionados con las capas padres. Haga clic en los iconos de signo más (+) o menos (-) para mostrar u ocultar las capas anidadas.

CODIGO HTML PARA CAPAS
Configure Dreamweaver para que utilice la etiqueta div o span para las capas. Existen otras dos etiquetas para crear capas: layer e ilayer, sin embargo, estas etiquetas sólo son compatibles con Netscape Navigator 4; Internet Explorer no las reconoce y Netscape abandonó su soporte en las versiones posteriores del navegador. Dreamweaver reconoce las etiquetas layer e ilayer, pero no crea capas utilizándolas.
La diferencia entre la etiqueta div y la etiqueta span estriba en que los navegadores que no admiten capas introducen saltos de línea adicionales antes y después de la etiqueta div. En la mayoría de los casos es más conveniente que el contenido de la capa aparezca en un párrafo independiente en los navegadores que no admiten capas, es decir, será preferible usar div en lugar de span.
Al dibujar una capa en Dreamweaver, ésta se muestra donde la ha dibujado, pero Dreamweaver inserta su código al principio de la página, inmediatamente después de la etiqueta body. Si crea una capa anidada, Dreamweaver insertará el código dentro de la etiqueta que define la capa padre. En los navegadores que no admiten capas el contenido de la capa aparecerá en el punto de la página donde se encuentre el código de la capa.

A continuación se ofrece un ejemplo de código HTML de una capa:
A continuación se ofrece un ejemplo de código HTML de una capa anidada en otra:
Puede definir las propiedades de colocación de las capas en la página, incluidas las coordenadas x e y, índice z y visibilidad.

HOJAS DE ESTILO EN CASCADA (CSS)

Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Puede asignar viñetas de lista personalizadas y especificar distintos tamaños y unidades de fuente para conseguir un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores; puede controlar el formato y la posición de elementos de nivel de bloque (block-level) de una página Web.

Una regla de estilo CSS consta de dos partes: el selector y la declaración. El selector es el nombre del estilo (TR o P) y la declaración define qué elementos forman el estilo. La declaración, a su vez, consta de dos partes: la propiedad y el valor. La expresión “en cascada” hace referencia a la posibilidad de aplicar varias hojas de estilos a una misma página Web.

Cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

En Dreamweaver, utilice el panel Estilos CSS para crear, ver y adjuntar atributos de estilo a los documentos. Además de los estilos y de las hojas de estilos que crea, utilice hojas de estilos suministradas con Dreamweaver.

Para definir los siguientes tipos de hojas de estilos CSS en Dreamweaver:

• Los estilos CSS personalizados, también llamados estilos de clase, le permiten configurar atributos de estilo a cualquier rango o bloque de texto. Consulte Aplicación de un estilo CSS personalizado (clase).
• Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con dicha etiqueta se actualiza inmediatamente.
• Los estilos del selector CSS redefinen el formato de una determinada combinación de etiquetas (por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2 dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id específico (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el par atributo-valor ID=“miEstilo”).
• Las hojas de estilos CSS residen en el área head del documento. Los estilos CSS pueden definir los atributos de formato de etiquetas HTML o rangos de texto identificados mediante un atributo class. Dreamweaver MX reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS.

Para que los estilos CSS controlen el formato de un párrafo, deberá quitar todos los estilos HTML y el formato HTML manual.

La mayoría de los atributos de estilo que aplique se pueden ver en la ventana de documento o en una vista previa del documento en la ventana del navegador para comprobar el resultado. Algunos de los atributos de estilo CSS se reproducen de forma distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no son compatibles actualmente con ningún navegador.

Mientras trabaja en el panel Estilos CSS, utilice la función de Dreamweaver Hoja de estilos de tiempo de diseño para ocultar o mostrar los atributos de hoja de estilos mientras diseña una página con Dreamweaver.

UTILIZACION DEL PANEL ESTILOS

Para abrir el panel Estilos CSS, lleve a cabo una de estas operaciones:

• Elija Ventana > Estilos CSS o pulse Mayús+F11.
• Los botones de opción Aplicar estilos y Editar estilos situados en la parte superior del panel Estilos CSS le permiten seleccionar distintas vistas de los estilos CSS asociados al documento actual.
• La vista Aplicar estilos se utiliza para seleccionar un estilo de clase y aplicarlo a un elemento del documento. Esta vista sólo muestra los estilos personalizados (de clase). Los estilos HTML redefinidos y los estilos del selector no se muestran en este panel. Como están asociados a una etiqueta HTML, sus atributos de estilo se aplican automáticamente a cualquier etiqueta del documento afectada por el estilo definido. Por ejemplo, si define atributos de estilo para la etiqueta table, la tabla de su documento se actualizará automáticamente con las definiciones de estilo que haya seleccionado.
• El vista Editar estilos le permite visualizar la definición de los estilos asociados al documento actual. Esta vista muestra la definición de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas y los estilos CSS del selector. También puede utilizar la vista Editar estilos para visualizar las Hojas de estilos de tiempo de diseño que ha aplicado al documento.
• Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecerán en la vista Editar estilos del panel Estilos CSS. Esta vista muestra una lista de los selectores definidos en todas las etiquetas de estilo y hojas de estilos importadas o vinculadas externamente. Aplicar estilos le permite visualizar los estilos aplicados en el documento actual, así como los estilos disponibles en una hoja de estilos externa adjunta.
• Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en el submenú Texto > Estilos CSS.
• Los botones siguientes se encuentran en la parte inferior del panel Estilos CSS:
  • Adjuntar hoja de estilos abre el cuadro de diálogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual. Para obtener información sobre cómo adjuntar una hoja de estilos externa, consulte Creación y establecimiento de vínculos con una hoja de estilos CSS externa.
  • Nuevo estilo CSS abre el cuadro de diálogo Nuevo estilo CSS. Puede utilizar el cuadro de diálogo Nuevo estilo CSS para seleccionar el tipo de estilo que va a crear, por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS.
  • Editar hoja de estilos abre el cuadro de diálogo Editar hoja de estilos. Edite los estilos en el documento actual o en una hoja de estilos externa.
  • Eliminar estilo CSS elimina el estilo seleccionado del panel Estilos CSS, así como el formato de cualquier elemento al que se haya aplicado dicho estilo. Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el panel Estilos CSS para abrir un menú contextual de opciones de trabajo con comandos de la hoja de estilos CSS.

CREACION DE UN NUEVO ESTILO CSS

Para crear un estilo CSS nuevo que le permitirá automatizar la aplicación de formato a etiquetas HTML o a rangos de texto identificados mediante un atributo class:

• Sitúe el punto de inserción en el documento y lleve a cabo una de las siguientes operaciones para abrir el cuadro de diálogo Nuevo estilo CSS.
• En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botón Nuevo estilo CSS (+) situado en la parte inferior derecha del panel.
• Si es necesario, en el inspector de propiedades, haga clic en el botón Alternar modos CSS/HTML para cambiar al Modo CSS y, a continuación, en el menú emergente Estilo CSS, seleccione Nuevo estilo CSS.
• Elija Texto > Estilos CSS > Nuevo estilo CSS. Aparecerá el cuadro de diálogo Nuevo estilo CSS.

Defina el tipo de estilo CSS que desea crear:

• Para crear un estilo personalizado que se pueda aplicar como atributo clase a un rango o un bloque de texto, seleccione Crear estilo person. (clase) y escriba el nombre del estilo en el campo Nombre.
• Los nombres de estilos personalizados (clase) deben comenzar por un punto y pueden contener cualquier combinación alfanumérica. Por ejemplo, .miencabezado1. Si no introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para redefinir el formato predeterminado de una etiqueta HTML específica, seleccione Redefinir etiqueta HTML. En el campo Etiqueta, introduzca una etiqueta HTML o elija una en el menú emergente.
• Para redefinir el formato predeterminado de una combinación concreta de etiquetas que contengan un código específico de atributo Id, seleccione Usar selector CSS. En el campo Selector, introduzca una o más etiquetas HTML o elíjalas en el menú emergente. Los selectores disponibles en el menú emergente son a:activos, a:activable, a:vínculo y a:visitado.
• Seleccione la ubicación donde se definirá el estilo:Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos.
  • Para incrustar el estilo en el documento actual, seleccione Sólo este documento.
  • Haga clic en Aceptar. Aparecerá el cuadro de diálogo Definición de estilos.
  • Elija las opciones de estilo que desea establecer para el estilo CSS nuevo. Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.

Plantillas de Dreamweaver

Aspectos básicos de las plantillas de Dreamweaver

Una plantilla es un tipo especial de documento que sirve para crear un diseño de página “fijo”; puede crear documentos basados en la plantilla que heredan su diseño de página. Al diseñar una plantilla, usted especifica como "editables" aquellos contenidos de un documento basado en dicha plantilla que los usuarios pueden editar. Las plantillas permiten a los autores controlar qué elementos de la página pueden editar los usuarios de la plantilla (como los redactores, los diseñadores gráficos y otros desarrolladores Web). El autor de una plantilla puede incluir varios tipos de regiones de plantilla en un documento.

Nota: Las plantillas permiten controlar un área de diseño amplia y reutilizar diseños completos. Si desea reutilizar elementos de diseño individuales, como la información de copyright de un sitio o un logotipo, cree elementos de biblioteca.

La utilización de plantillas le permite actualizar varias páginas a la vez. Un documento que se crea a partir de una plantilla permanece conectado a ella (a menos que separe el documento posteriormente). Puede modificar una plantilla e inmediatamente actualizar el diseño en todos los documentos basados en ella.

Nota: Las plantillas de Dreamweaver se diferencian de las plantillas de otras aplicaciones de Adobe Creative Suite en que las secciones de página de las plantillas de Dreamweaver son fijas (no editables) de manera predeterminada.

A continuación un tutorial de como crear una plantilla:

Crear plantilla

Crear Plantillas a partir de un documento elaborado

Una vez que tenemos nuestro sitio web armado, al menos la estructura, solo nos falta la información, pero para efectos de una actualización mas rápida nos conviene convertir este archivo en plantilla.

El proceso es rápido y fácil y lo único que vamos a configurar es la región editable, es decir la única parte de todo el sitio que estará cambiando frecuentemente, esta parte cambiante es el contenido, es decir la columna derecha.

Para crear un documento nuevo en plantilla seguiremos los pasos:

1. Ir al Menu Archivo / Guardar como Plantilla (File / Save as template)

• Dreamweaver crea una carpeta dentro del directorio raíz llamada Templates y dentro de esta carpeta crea el archivo con la extensión .dwt. (No es necesario subir esta carpeta al servidor ya que por su formato requiere de Dreamweaver. No la borres )

2. Debemos darle un nombre a esta plantilla y definir para que sitio funcionará. Dreamweaver te muestra un listado con todos los sitios disponibles, pero por defecto te muestra como primera opción el sitio que tienes abierto y esta es la opción que usaremos, puedes dejar todos los campos como se ven en la figura de abajo, cuando estes listo presiona “save”.

A la pregunta Update Links?, responde SI.

La ventana Files ha cambiado, una vista rápida nos demuestra que Dreamweaver ya guardó la plantilla dentro de Templates.

Podríamos cerrar el documento pero no hemos ingresado aun ninguna región editable, es decir, toda la pagina está bloqueda.

Insertando Región Editable

Para este ejercicio voy a dejar únicamente como región editable la sección del contenido, pero tu puedes agregar como región editable la imagen que se encuentra en la parte superior la imagen que tiene Portada como texto, esto para personalizar cada una de las secciones.

Ademas puedes agregar como región editable el Top, para poder presentar imágenes distintas en cada sección del sitio.

Para insertar una región editable:

1. Seleccionamos el area que vamos a definir como región editable

2. Nos dirigimos al Menu Insertar / Objetos de Plantilla / Region Editable

3. Le damos un Nombre a la región editable

4. Guardamos el documento

Al finalizar estos pasos verás como se le ha agregado a nuestro archivo una pequeña pestaña de color azul Cyan con el nombre de la región editable.

Esto quiere decir que ya estamos listos para usar nuestra plantilla.

Guarda el archivo y ciérralo, no lo volverás a usar a menos que vayas a realizar cambios en el Menú o agregar fotos en las regiones No editables.

Las regiones No editables son las que regiones que en todo el sitio serán de la misma forma, que siempre van a tener las mismas opciones, por ejemplo el Menú.

Para un sitio de 10 o 15 páginas, cambiar los vínculos se puede realizar de forma manual, pero con el tiempo este sitio se va a ir haciendo más grande y si el dueño del sitio desea agregar un par de vínculos en el Menú cuando su sitio tenga 60 páginas, le vamos a dar gracias a Dios de tener la plantilla lista. Ya que cuando hacemos cambios en la plantilla en las regiones No editables estos

cambios afectarán a TODO EL SITIO, siempre que esos documentos estén afectados por la plantilla.

Creando nuevos documentos a partir de nuestra plantilla

1. Selecicona Menu Modificar / Plantillas / Aplicar Plantilla a pagina (Modify /Templates / Apply Template to Page…)

2. Selecciona la plantilla (solo tenemos una), verifica que la casilla (Update page when template changes) esté seleccionada, esta opción es la que te salvará el pellejo más adelante, ya que es la que hará el trabajo de actualización en todo el sitio.

3. Presiona Select para seleccionar o Cancel para cancelar.

El documento se ve exactamente igual al que teníamos, pero si te das una asomadita por el código verás que está en gris y si pasas el Mouse encima del Menú observaras que no lo puedes tocar, esto es porque esta bloqueado.

Entonces podemos decir, que las plantillas nos ayudan a la seguridad ya que protegen la integridad de nuestro diseño. A esta página solo falta agregarle contenido y guardarla en el directorio raíz de nuestro sitio, que ya está listo para ser publicado.

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:

http:www.adobe.com/go/vid0145_es

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.

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.

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

Nuevo Enlace...

Pasen, vean y usen... un nuevo enlace con recursos para sus blogs. Miren que el martes corrijo y en el post "Tarea de hoy 24 de junio" les detalles muy bien lo que voy a tener en cuenta para la nota:

http://www.euroresidentes.com/Blogs/Bitacoras/recursos-para-blogs.htm

Debajo del perfil un ejemplo de como mostrar el horóscopo personal

sigamos trabajando...

Que es un blog?

Aca les dejo un enlace a un tutorial de como crear un blog con Blogger. Es muy sencillo y el resumen de este tutorial tiene que estar en sus carpetas:

http://avalerofer.blogspot.com/2007/02/cmo-crear-un-blog-en-blogger.html

Y otro enlace sobre blogs muy completo donde se indican las partes de un blog e información importante a tener en cuenta a la hora de crearlos:

http://blog.educastur.es/blogs-y-educacion/

impriman la info y agreguenla a la carpeta.

Como ejemplo de lo que pueden llegar a hacer, les dejo un link de un blog interesante:

http://joaclintistgud.wordpress.com/declaracion-de-intenciones/

nos vemos en la escuela...

Tarea de hoy 24 de junio

Como trabajo principal debemos diseñar un blog personal usando las diferentes herramientas que podamos encontrar en los enlaces del post anterior y otras que el alumno conozca o encuentre por su cuenta.

Tendré en cuenta para evaluar el blog:

• Trabajo en clase
• Utilidad y calidad del contenido del blog
• Esfuerzo
• Diseño
• Cantidad y buena utilización de herramientas encontradas y usadas.

Como sabrán estamos un poco apretados con los tiempos, es por esto que solo tendrán tiempo para entregar este trabajo hasta el miércoles 2 de julio

A trabajar!

Agregar servicios al blog

Hola a todos, aca les dejo un compiladito de paginas para ponerle color al blog... Calendarios, relojes, videos, noticias, contador de visitas, chats gratis, musica, buscadores, y muchisimas cosas mas!

http://www.radioblogclub.com/ ------- Esta pagina te genera un codigo donde, agregandolo al blog, pones tu musica.. Hay muchisima musica.
http://miarroba.com/ -------- Aca tenes muchisimas cosas para agregar al blog... Cuestion de buscar!
http://www.interrogantes.com/ ------- Aqui podes crean encuestas, cuestionarios, etc. para que opinen los que entren a tu blog

En este blog tienen un par de ejemplos de los servicios que se brindan en estos links

A crear un buen blog...

Bienvenidos!!!

Hola a todos...
Hoy comenzamos a ver una nueva herramienta (o conjunto de herramientas) disponible en Internet, que se la identifica con el nombre de Web 2.0. tienen un par de vídeos explicativos en la siguiente dirección:
http://magujo.blogspot.com/

Dentro de este conjunto de herramientas la que vamos a aprender a usar es el Blog. Para esto ingresaremos a la siguiente dirección:
https://www.blogger.com/start?hl=es?utm_campaign=es&utm_source=es-ha-latam-google&utm_medium=ha&utm_term=blogger&gclid=CKHWzf_C25MCFRIhxgodtGNlTQ

e ingresaremos en la opción "VISITA RAPIDA" para tomar nota de que es un blog y las posibilidades que nos ofrece y luego realizaremos un resumen de los pasos que debemos seguir para crear uno.