Mis pinitos en HTML. Marcos en Dreamweaver.

En esta práctica aprendimos a utilizar los marcos de Dreamweaver para dividir la web en partes y así poder modificarlas individualmente.

Hay dos formas de crear un conjunto de marcos en Dreamweaver: puede diseñarlo usted mismo o seleccionarlo de una serie de conjuntos de marcos predefinidos. Si elige un conjunto de marcos predefinido se configurarán automáticamente todos los conjuntos de marcos necesarios para crear la disposición. Ésta es la forma más sencilla de insertar rápidamente un diseño de marcos en la página. Insertar un conjunto de marcos predefinido Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de marcos que desea crear. Los iconos de conjuntos de marcos predefinidos de la categoría Marcos del panel Objetos proporcionan una representación visual de cada conjunto de marcos al aplicarse a un documento seleccionado. El conjunto de marcos seleccionado rodea al documento actual (el documento en el que se encuentra el punto de inserción). El área azul de un icono de conjunto de marcos predefinido representa la página o el marco seleccionado actualmente en un documento, mientras que el área blanca representa el nuevo o los nuevos marcos. Para insertar un conjunto de marcos predefinido: Sitúe el punto de inserción en el documento. A continuación, lleve a cabo una de estas operaciones: En la categoría Marcos del panel Objetos, seleccione un conjunto de marcos predefinido. Para insertar el conjunto de marcos, puede hacer clic en un icono o arrastrar un icono directamente al documento. Para seleccionar un conjunto de marcos predefinido, elija Insertar > Marcos >Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir. Diseñar e insertar un conjunto de marcos Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, hacia arriba o hacia abajo. Arrastre uno de los bordes del marco a la ventana de documento para dividir el documento vertical u horizontalmente. Arrastre un borde del marco por una de las esquinas para dividir el documento en cuatro marcos nuevos. Presione la tecla Alt mientras arrastra el ratón si desea dividir un marco interior. Modificar un conjunto de marcos Para modificar el cunjunto de marcos puede eliminar marcos, o crear un nuevo conjunto de marcos dentro de un marco ya existente(marcos anidados) Para eliminar un marco: Arrastre el borde del marco fuera de la página o hasta el borde del marco padre. Crear un conjunto de marcos anidado Un conjunto de marcos dentro de otro conjunto recibe el nombre de conjunto de marcos anidado. Cada nuevo conjunto de marcos creado incluye su propio documento HTML de conjunto de marcos y sus documentos de marcos. La mayoría de las páginas Web con marcos utilizan en realidad marcos anidados y varios de los conjuntos de marcos predefinidos en Dreamweaver también utilizan la anidación. Para crear un conjunto de marcos anidado Sitúe el punto de inserción en el marco en el que desea insertar el conjunto de marcos anidado. Lleve a cabo una de estas operaciones: Elija Modificar > Conjunto de marcos > Dividir marco hacia arriba, hacia abajo, a la izquierda o a la derecha. En la categoría Marcos del panel Objetos , seleccione un icono de conjunto de marcos. Elija Insertar > Marcos > Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir. Seleccionar un marco o un conjunto de marcos Los marcos y los conjuntos de marcos son documentos HTML individuales. Para realizar cambios en un marco o en el conjunto de marcos, comience seleccionando el marco o conjunto de marcos que desea cambiar. Puede seleccionar un marco o un conjunto de marcos en la ventana de documento o utilizando el panel Marcos. Cuando seleccione un marco o el conjunto de marcos, aparecerán líneas de selección en el panel Marcos y en la ventana de documento. Utilizar el panel Marcos El panel Marcos proporciona una representación visual de los marcos del documento. Puede hacer clic en un marco o conjunto de marcos en el panel Marcos para seleccionarlo en el documento y, seguidamente, ver o editar las propiedades del elemento seleccionado en el inspector de propiedades. El panel Marcos también muestra la jerarquía de la estructura del conjunto de marcos de una manera que puede no percibirse en la ventana de documento. En el panel Marcos, el conjunto de marcos está rodeado por un borde grueso tridimensional, los marcos están rodeados por una línea delgada gris, mientras que los distintos marcos se identifican a través de sus nombres. Para mostrar el panel Marcos, lleve a cabo una de estas operaciones: Elija Ventana > Marcos . Presione MAY + F 2 Guardar archivos de marcos y de conjunto de marcos Puede guardar de forma individual una página del conjunto de marcos o una página de marco, o bien guardar todos los archivos de marco abiertos y la página de conjunto de marcos. Cuando se utiliza Dreamweaver para crear documentos de marcos, cada nuevo documento de marco recibe un nombre de archivo temporal (por ejemplo, UntitledFrame_1 para la página de conjunto de marcos, Untitled-1, Untitled-2, etc. para las páginas de marcos). Para guardar un archivo de conjunto de marcos: Seleccione el conjunto de marcos en el panel Marcos o en la ventana de documento. Lleve a cabo una de estas operaciones:  Para guardar el archivo de conjunto de marcos , elija Archivo > Guardar conjunto de marcos. Para guardar el archivo de conjunto de marcos como un archivo nuevo , elijaArchivo > Guardar conjunto de marcos como. Para guardar un documento que está dentro de un marco: Haga clic en el marco para seleccionarlo y, a continuación, elija Archivo > Guardar marco o Archivo > Guardar marco como. Para guardar todos los archivos de un conjunto de marcos: Elija Archivo > Guardar todos los marcos. De este modo se guardarán todos los documentos abiertos, incluidos los documentos individuales, los documentos de marcos y los documentos de conjunto de marcos. Nota: Utilice las líneas de selección de marcos de la ventana de documento para identificar los documentos de conjunto de marcos o los documentos de marcos al guardar los archivos.

Break: Cuestionarios en Google.

Un breve Kit-kat en esto del HTML. Nos centramos en la creación de cuestionarios con la herramienta de Google, muy intuitiva y sencilla:

1.- En el primer paso crearemos el formulario en Google Docs. Para ello, accedes a tu cuenta de Gmail y enlazas sobre "Crear/Formulario"; en los primeros pasos puede que te sientas un poco perdido pues la edición alterna entre la definición del formulario, configuraciones y una hoja de cálculo donde se recogerán las respuestas. Pero no te preocupes, con este vídeo te quedará todo claro:

2.- Formato y publicación del formulario. Una vez creado el formulario, vamos ahora a ver cómo mejorar su aspecto y cómo publicarlo por diferentes medios:

3.- Resultados. Una vez publicado el formulario para recoger las encuestas o comentarios veremos cómo desactivar el mismo y cómo acceder a los resultados, tanto de forma puntual como a nivel de gráficos y estadísticas:

Mis pinitos en HTML. Tablas en Dreamweaver.

Bien, llegados a este punto tenemos un conocimiento básico de Dreamweaver y es hora de ir complicando un poco más las cosas. Así, empezamos con una base de un CV aplicable a cualquier programa. Es decir, guardamos la base para tener así una pauta con la que guiarnos para redactar tantos CV como queramos.


En otro documento, rellenamos el CVcon nuestros datos y empezamos a crear la tabla, cambiando colores de fondo, texto, formato, hipervínculos y demás para personalizar nuestra página. En mi caso, el resultado es este:

Siguiendo pasos anteriores, enlazamos las diferentes partes del CV para lograr una navegación más simple. A continuación, una breve explicación de la herramienta TABLAS de Dreamweaver:

Mis pinitos en HTML. Metiendo mano a Dreamweaver y rescatando Wuala.

Tras "toquetear" brevemente los editores de texto y servidores FTP, empezamos a crear webs desde Dreamweaver.


"Adobe Dreamweaver es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa 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 Weby 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."


Aunque este programa nos da la opción de trabajar a partir de plantillas, nosotros lo haremos en un formato simple y "vintage", como se hacían en los orígenes de la web.


Así, creamos una tercera página en la que mostramos las características de un Ipod (algo vintage también), enlazando conceptos con titulares para navegar de una forma más rápida, y utilizando marcos de enlace dentro del mapa de bits para navegar por la misma imagen.
Así:


















































En este punto, abrimos nuestro Wuala y administramos los sitios de Dreamweaver para tener nuestros trabajos accesibles en cualquier lugar. Atención!! Hay que recordar vincular los sitios de Wuala con los de nuestra "casita" web y asegurarnos de que cada vez que guardamos ambos documentos se actualizan.

Mis pinitos en HTML. Mi segunda página y su ubicación en FTP.

En esta clase continuamos con el editor de textos para crear web, pero nos centramos en los servidores FTP para lozalizar nuestros archivos. En ete caso, construimos una web desde cero, muy sencilla, con un titular y una imagen:

A continuación, buscamos su ruta con FTP: 

Abreviatura de File Transfer Protocol, el protocolo para intercambiar archivos en Internet.

El FTP utiliza los protocolos de Internet TCP/IP para permitir la transferencia de datos, de la misma manera que el HTTP en la transferencia de páginas web desde un servidor al navegador de un usuario y el SMTP para transferir correo electrónico a través de Internet.

El FTP se utiliza principalmente para descargar un archivo de un servidor o para subir un archivo a un servidor a través de Internet.

Y para Mac, Transmit:

"Las decenas de características con las que cuenta Transmit lo convierten en uno de los clientes FTP favoritos por los usuarios de Mac.

Compatible con los protocolos FTP, SFTP y TLS/SSL, ofrece un acceso más rápido que Finder a las cuentas iDisk y permite editar un fichero de cualquier aplicación al vuelo, sin tener que descargarlo al disco duro.

Cuenta con un sistema de pestañas que permite mantener abiertas varias conexiones al mismo tiempo y con una función favoritos capaz de alcanzar un directorio determinado de forma fácil y rápida.

Descargas por lotes, sincronización con cuentas .Mac o transferencias servidor a servidor son otras características presentes en Transmit."

Mis pinitos en HTML. Mi primera página.

Tras conocer las etiquetas básicas y el editor, empezamos creando una primera web, muy sencilla, con imágenes y texto "lorem ipsum".


Para esto, empezamos utilizando el editor de textos. Es decir, construimos la web desde cero.
Aquí el ejemplo de mi web:

En esta web jugué con los tamaños, colores y formatos de texto, así como con los tipos de inserción de imágenes. La de mi cara está enñazada desde el archivo del equipo, y la otra desde una dirección web.