lunes, 20 de enero de 2014

Lo primero que debes saber acerca de una Div es que el término se aplica específicamente a Adobe Dreamweaver. El concepto, sin embargo, se refiere a un componente universal de codificación HTML y es una parte integral de la estructura de la mayoría de los diseños web. PA, o el posicionamiento absoluto, se refiere a un método de diseño de HTML que permite el mayor control sobre los elementos que aparecen en una página, independientemente del navegador utilizado para abrir el sitio.

Puede crear diseños de página insertando manualmente etiquetas div y aplicando a estas estilos de posición CSS. Una etiqueta div es una etiqueta que define las divisiones lógicas existentes en el contenido de una página Web. Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades.Si no está familiarizado con el uso de etiquetas div y de hojas de estilos en cascada (CSS) para crear páginas Web, puede crear un diseño CSS basado en uno de los diseños predefinidos que se suministran con Dreamweaver.

Inserción y edición de etiquetas div

Puede utilizar etiquetas div para crear bloques de diseño CSS y colocarlos en el documento. Esto resulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición. Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes.

En la ventana de documento, sitúe el punto de inserción en el lugar donde desea que aparezca la etiqueta div.

Siga uno de estos procedimientos:

Seleccione Insertar > Objetos de diseño > Etiqueta Div.

En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div

Defina cualquiera de las opciones siguientes:

Insertar

Permite seleccionar la ubicación de la etiqueta div y el nombre de la etiqueta si no es una etiqueta nueva.

Clase

Muestra el estilo de la clase aplicado actualmente a la etiqueta. Si ha adjuntado una hoja de estilos, las clases de la hoja de estilos aparecerán en la lista. Utilice este menú emergente para seleccionar el estilo que desea aplicar a la etiqueta.

ID

Permite modificar el nombre utilizado para identificar la etiqueta div. Si ha adjuntado una hoja de estilos, aparecerán en la lista los ID definidos en la hoja de estilos. No aparecen en la lista los ID de bloques que ya están en el documento.

Edición de etiquetas div

Cuando se asignan bordes a etiquetas div, o cuando se selecciona Contornos de diseño CSS, las etiquetas div tienen bordes visibles. (La opción Contornos de diseño CSS está seleccionada de forma predeterminada en el menú Ver > Ayudas visuales.) Cuando se pasa el puntero por encima de una etiqueta div, Dreamweaver la resalta. Puede cambiar el color de resaltado o desactivar el resaltado.

Cuando se selecciona una etiqueta div, puede ver y editar sus reglas en el panel Estilos CSS. Para añadir contenido a la etiqueta div también puede situar el punto de inserción dentro de la etiqueta div y, a continuación, añadir el contenido como lo haría en una página.

Visualización y edición de reglas aplicadas a una etiqueta div

Siga uno de estos procedimientos para seleccionar la etiqueta div:

Haga clic en el borde de la etiqueta div.

Busque el resaltado para ver el borde.

Haga clic dentro de la etiqueta div y presione las teclas Control + A (Windows) o Comando + A (Macintosh) dos veces.

Haga clic en el interior de la etiqueta div y seleccione la etiqueta div del selector de etiqueta en la parte inferior de la ventana de documento.

Seleccione Ventana > Estilos CSS para abrir el panel Estilos CSS si aún no está abierto.

Las reglas que se aplican a la etiqueta div aparecen en el panel.

Lleve a cabo los cambios necesarios.

Código HTML para elementos Div

Dreamweaver crea elementos PA utilizando la etiqueta div. Al dibujar un elemento PA con laherramienta Dibujar Div PA, Dreamweaver inserta una etiqueta div en el documento y asigna a la etiqueta div un valor de ID (de forma predeterminada, apDiv1 para la primera div dibujada, apDiv2 para la segunda, etc.). Más adelante es posible cambiar el nombre de la Div PA por el que desee mediante el panel Elementos PA o el inspector de propiedades. Dreamweaver también utiliza código CSS incrustado en el encabezado del documento para colocar la Div asignar sus dimensiones exactas.

Puede cambiar las propiedades de colocación de las etiquetas Div PA (o de cualquier elemento PA) en la página, incluidas las coordenadas x e y, el índice z (también denominado orden de apilamiento) y la visibilidad.

Inserción de una Div

Dreamweaver permite crear Div PA y colocarlas en la página fácilmente. También puede crear Div PA anidadas

Al insertar una Div PA, Dreamweaver muestra el contorno de Div PA en la vista Diseño de forma predeterminada y resalta el bloque al desplazar el puntero sobre él. Puede activar los bordes de la Div PA (o de cualquier elemento PA) desactivando Contornos de elementos PA y Contornos de diseño CSS en el menú Ver > Ayudas visuales. También puede activar los fondos y el modelo de cuadro para los elementos PA como ayuda visual durante el diseño.

Después de crear una Div PA, puede añadirle contenido situando el punto de inserción en la Div PA; a continuación, añada contenido cómo lo haría en una página.

vídeo Div

Bibliografía

http://www.deseoaprender.com

http://cursos.papelyweb.com

sábado, 18 de enero de 2014

Un frame es una especie de marco o recuadro independiente en el que podemos cargar una página web.Podemos así dividir una página web en diferentes partes o ventanas, cada una con sus propios bordes ybarras de desplazamiento, pudiendo cargar dentro de cada una de ellas una página externa independiente.Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos,de difícil estructura por los medios convencionales del HTML, son casi insustituibles.

Para qué sirven los Frames

Sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos.

Crear y configurar Frames

Los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.

Haz clic sobre el menú Insertar.

Elige la opción HTML y luego Marcos.
Elige la opción Izquierda
Deberás darle los nombres leftFrame y mainFrame que te vendrán por defecto, para ello tendrás que pulsar únicamente el botón Aceptar dos veces.
Si no aparece el panel Marcos, ábrelo a través del menú Ventana, opción Marcos
Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos
En Título:, que aparece en la barra de documento, escribe Cocina.
En Bordes, del inspector de propiedades, selecciona No.
En Ancho escribe 0.
En Selección Fila Col. pulsa sobre la columna de la izquierda.
En Columna selecciona Píxeles y escribe 270.
Selección Fila Col. pulsa sobre la columna de la derecha.
En Columna selecciona Relativo y escribe 1.
Pulsa sobre el marco izquierdo en el panel Marcos.
En Origen escribe menu.htm.
En Desplaz selecciona No.
En Bordes selecciona No.
Activa la casilla Mismo tamaño
Pulsa sobre el marco derecho en el panel Marcos.
En Desplazar selecciona No
En Bordes selecciona No.
Desactiva la casilla Mismo tamaño.
Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos.
Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre marcos.htm, dentro de la carpeta cocina
En el caso de haber insertado mapas de imagen en la imagen del logotipo, selecciona cada uno de ellos y elige mainFrame en Destino, que aparece en el inspector de propiedades
Selecciona el primer botón Flash, y pulsa sobre el botón Editar, del inspector de propiedades En Destino: selecciona mainFrame.
Pulsa sobre el botón Aceptar.

Captura de Pantalla

Un capturador de pantalla con distintos modos de captura.

Podemos fotografiar toda la pantalla, un fragmento rectangular, una ventana o un simple objeto obteniendo una vista previa y con la posibilidad de guardar la captura en el formato que deseemos.Un detalle a destacar de PC Screen Capture es que, a diferencia de la mayoría de capturadores de pantalla, puede obtener la captura de un vídeo en reproducción, por lo que puede ser muy útil para guardar frames de nuestros ficheros multimedia

Vídeo de como Crear los Frames

Bibliografía

http://www.aulaclic.es/html/t_7_1.htm

http://www.aulaclic.es

Tablas con Adobe DreamWeaver

Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página. Utilice las tablas para presentar datos tabulares, diseñar columnas o disponer texto o gráficos en una página Web. Podrá agregar contenido; añadir, eliminar, dividir y combinar filas y columnas; modificar las propiedades de tablas, de filas o de celdas para añadir color y alineaciones, así como copiar y pegar celdas.

Las tablas constan de tres componentes básicos:

Filas: Espacio horizontal.
Columnas: Espacio vertical.
Celdas: Los contenedores que se originan en las intersecciones de las filas y las columnas.

Crear Tablas

Podemos crear una tabla fácilmente, pulsando en el icono Tabla, de la barra común, del panel insertar, tal como vemos en la imagen inferior.

Cuando pulsamos sobre el icono, Dreamweaver abre una ventana de diálogo como la que vemos abajo.

En ella nos pide que definamos la forma y características de la tabla que estamos creando

Simplemente tenemos que introducir un valor en la celda filas y otro en la celda columnas para definir el tamaño de la tabla, por ejemplo si introducimos 4 y 3 respectivamente, nuestra tabla tendrá 12 celdas, distribuidas en un rectángulo de 4 celdas de alto y 3 celdas de ancho.

Si cambiamos el valor columna 3 por un 5, la tabla tendrá ahora 20 celdas, distribuidas en un rectángulo de 4 celdas de alto por 5 de ancho.

Desde aquí podemos cambiar también el ancho de la tabla, nuestra tabla tiene ahora 300 píxeles. ¿Qué significa esto? Pues los píxeles son una unidad de medida de las pantallas de televisión y monitores, un píxel es el punto más minúsculo que luz que una pantalla puede manejar.

Esto está en relación directa con la configuración de pantalla de nuestro monitor, por ejemplo si tenemos una resolución 800x600, este es el límite máximo de tamaño que puede mostrar.

En las primeras lecciones vimos que Dreamweaver nos aconsejaba que configuráramos los parámetros de nuestra página según las necesidades de nuestros potenciales usuarios. Estos parámetros van a marcar el límite de la cantidad máximas de píxeles que nuestra página podrá mostrar de una forma cómoda.

En la imagen superior vemos que Dreamweaver nos permite crear con un sólo clic diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia más estética a nuestras tablas.

En la parte final del cuadro de diálogo, podemos mejorar la accesibilidad de nuestra tabla, esto significa que podemos escribir un texto que se visualizará en el caso de que la tabla no haya podido ser mostrada en el navegador del usuario, ya sea por problema de la red o por carencias del navegado.

Para que nos sirve una tabla

Las tablas tienen muchísima importancia en lo que se refiere al diseño de páginas Web. Son el esqueleto sobre el que las páginas se construyen y por eso, este tema lo veremos paso a paso.

Crearemos una tabla normal como las que podemos crear en cualquier procesador de textos.

Podemos crear una tabla fácilmente, pulsando en el icono Tabla de la barra Común (Common) del panel Insertar (Insert), tal como vemos en la imagen inferior.

Como se Modifica una tabla

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Elementos Básicos de una Tabla

Las tablas cuentan con tres elementos básicos: filas, columnas y celdas (estas se producen de la intersección de una fila y una columna). Dichos elementos son los que ayudan a organizar y administrar los contenidos de las páginas Web.

Vídeo de como Crear Tablas

Bibliografía

http://new.aulafacil.com

http://www.aulaclic.es

Configuración del Sitio Web

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Configuración de un sitio Web predeterminado

Cuando se instala IIS, está preconfigurado para servir como un sitio de Web predeterminado; Sin embargo, es aconsejable cambiar algunas de las opciones. Para cambiar la configuración básica del sitio Web y para emular los pasos necesarios para configurar Apache por primera vez mediante el archivo de configuración

Inicie sesión en el equipo servidor Web como administrador.
Haga clic en Inicio, seleccione configuración y, a continuación, haga clic en Panel de Control.
Haga doble clic en Herramientas administrativas y, a continuación, haga doble clic en Administrador de servicios Internet.
Haga clic en el sitio Web que desea configurar en el panel izquierdo y, a continuación, haga clic en Propiedades.
Haga clic en la ficha sitio Web.
En el cuadro Descripción, escriba una descripción para el sitio Web.
Escriba la dirección de protocolo Internet (IP) para utilizar para el sitio Web o deje el valor predeterminado de todos (sin asignar) .
Modificar el puerto de protocolo de Control de transmisión (TCP) según corresponda
Haga clic en la ficha Directorio principal.
Para utilizar una carpeta en el equipo local, haga clic en un directorio en este equipo y, a continuación, haga clic en Examinar para localizar la carpeta que desea utilizar.
Para utilizar una carpeta que se ha compartido desde otro equipo de la red, haga clic en un recurso compartido de otro equipo y, a continuación, escriba la ruta de acceso de red o haga clic en Examinar para seleccionar la carpeta compartida.
Haga clic en lectura para conceder acceso de lectura a la carpeta (obligatorio).
Haga clic en Aceptar para aceptar las propiedades del sitio Web.

Configurar una propiedad, de una página

Inicie sesión en su cuenta de Google Analytics. Haga clic en Administrador en la barra de menús situada en la parte superior de cualquier página.

En la columna Cuenta, seleccione la cuenta a la que desee añadir la propiedad en el menú desplegable.

Si tiene muchas cuentas, utilice el cuadro de búsqueda para encontrar la adecuada.

En el menú desplegable de la columna Propiedad, haga clic en Crear nueva propiedad.

Seleccione Sitio web o Aplicación para móviles.

Solo para la Web: seleccione un método de seguimiento. Haga clic en Universal Analytics o en Classic Analytics.

Le recomendamos encarecidamente que elija Universal Analytics. Descubra por qué.Introduzca el Sitio web o el Nombre de la aplicación.

Si piensa realizar un seguimiento de más de una aplicación en su cuenta, utilice un nombre muy específico y descriptivo que incluya la edición o el número de versión. Esto le ayudará a mantener organizadas las propiedades de la aplicación.

Solo para la Web: introduzca la URL del sitio web.

No se puede crear una propiedad si la URL no tiene el formato correcto.

Descubra cómo dar el formato correcto al nombre de dominio.

Seleccione una Categoría del sector.

Seleccione la Zona horaria del informe.

Se utilizará como el día límite de los informes, independientemente del origen de los datos.

Haga clic en Obtener ID de seguimiento.

La propiedad se crea tras hacer clic en este botón, pero debe configurar el código de seguimiento para recopilar datos. Para las propiedades web, al hacer clic en este botón, se genera el fragmento de código de seguimiento. Deberá copiar y pegar dicho fragmento en cada página web cuyo seguimiento desee realizar con Google Analytics.

Vídeo de Configuración de un sitio Web

Bibliografía

http://www.aulaclic.es

http://primeraweb.wordpress.com

Adobe Dreamweaver

Qué es Adobe Dreamweaver

Dreamweaver es un software permite crear páginas web profesionales sin la necesidad de programar manualmente el código HTML con el que se construyen dichas páginas.

¿PARA QUE SIRVE ADOBE Dreamweaver?

Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) que está destinada 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.

HISTORIA de Adobe DreamWeaver

Es un producto de la empresa desarrolladora de software Macromedia, que nació en 1992 tras la fusión de Authorware Inc. (creadora de Authorware) y Macro – Mind Paracomp (responsable de director). El primer producto de esta nueva compañía fue Shockware, un plugin para los navegadores que permitía ver animaciones hechas en Director. A causa del éxito que tuvo, la empresa decidió que debía expandirse más en el sector web y multimedia,

Con esta expansión como objetivo primario, en 1996, Macromedia realizo dos grandes adquisiciones. La primera fue la empresa FutureWave software, creadora del FutureSplash, al que Macromedia rebautizo como flash. La segunda fue iBand software, creadora de Backstage, un programa de edición de HTML, al que Macromedia rebautizo, con algunos cambios, como DREAMWEAVER, del que lanzo su primera versión en 1997. A partir de 1998, Macromedia comenzó a desarrollar una versión del programa por año. En cada una de ellas, agrego componentes clave para un mejor desarrollo de archivo de HTML y de otras expresiones (ASP, PHP, JPS, etcétera). En el año 2006, la empresa fue comprada por Adobe, quien absorbió completamente el nombre Macromedia. Por ello es que la versión CS3 ya no es más Macromedia, sino Adobe.

Cómo funciona el Interfaz de Adobe DreamWeaver

A lo largo de las páginas de este documento iremos desarrollando los diferentes aspectos del diseño de páginas web, combinando tanto las herramientas propias de dreamweaver (DW de ahora en adelante), y recurriendo al código puro y duro en aquellos casos donde sea necesario.

Barra de herramientas

La barra de herramientas nos permite insertar diferentes elementos en nuestro documento. En muchos casos nos ofrece un acceso rápido y cómodo a ciertas funciones del DW.

En el caso de que alguna vez tengamos que activarla (podemos cerrarla accidentalmente), debemos hacerlo desde el Menú Ver > Barras de herramientas > Insertar

La barra de herramientas nos ofrece varias opciones. Según la visualización que escojamos nos aparecerán diferentes herramientas, específicas para cada caso.

En el apartado "Común", que aparece por defecto al abrir el programa por primera vez tenemos las opciones más generales: crear tablas, puntos de ancla, insertar imágenes o crear imágenes de sustitución son las que mejor funcionan.

Herramientas de DW

Tengamos en cuenta que no todas las opciones de la barra de herramientas son recomendables. Destacamos insertar formularios porque DW lo hace de manera aceptable, evitando que escribamos código. Pero en otros casos, DW genera código inadecuado. Aprender a controlar nuestro código es tan fundamental como saber para qué sirven las herramientas del programa.

Si pulsamos "Común" para desplegar las opciones de la barra, tendremos acceso al resto de herramientas propias de cada apartado. Uno de los más útiles para evitarnos escribir código es el de Formulario

Desde aquí podemos definir qué tipo de elementos deseamos para nuestro formulario, insertar campos para pedir información al usuario y botones que validen la información, de tal manera que llegue a nuestro correo. Para más información, consulta el apartado sobre formularios.

¿Código o diseño?

Como ya te habrás dado cuenta, estamos haciendo mención a un buen uso del código XHTML. Esto es importante para no generar un resultado a partir de una etiqueta inadecuada. Puedes consultar más acerca de este tema.

Por tanto, desde aquí aconsejamos utilizar el doble espacio de trabajo que nos ofrece DW. ¿Qué es esto?
Básicamente, se trata de una opción que nos permite trabajar en el documento bien a nivel de código, bien sólo en modo diseño (la apariencia de la web).
Nosotros sugerimos la tercera opción: el modo dividir

De esta manera visualizamos diseño y código al mismo tiempo. Esta opción se encuentra en la barra de herramientas "Documento", a la que accedemos desde el menú Ver > Barras de herramientas > Documento.

Vista de código

Cuando navegamos por internet podemos solicitar al navegador que nos muestre el código fuente de una página para saber cómo está hecha. Cuando trabajamos en nuestro documento en modo dividir también tenemos ese código a mano.

Por defecto, DW suele mostrar el código ocupando tanto ancho como sea necesario. Esto puede generar líneas de código interminables e incómodas de leer.

Para solucionar esto debemos activar una opción que permite visualizar el código según el ancho del área de trabajo, de tal manera que no habremos de recurrir a las barras de desplazamiento horizontales.

A esta opción llegamos desde el menú Ver > Opciones de vista de código > Ajustar texto.

Paletas de trabajo

A medida que vayamos experimentando con DW y dominemos mejor el código necesitaremos nuevas herramientas que nos aporten nuevas posibilidades.

Una de las primeras aspiraciones es, por supuesto, la de colgar nuestra web para que esté accesible en la red y pueda ser visitada. Podemos también usar la paleta de los estilos CSS para gestionarlos desde nuestro documento, o crear comportamientos.

También surgirá la idea de crear un pop-up o abrir una nueva ventana mostrando en detalle alguna foto o cualquier otra cosa. Y a medida que queramos dar consistencia a nuestra página nos vendrá bien aplicar los estilos CSS de manera más rápida que tecleando en código.

Muchas de estas operaciones se realizan desde las paletas que nos ofrece DW. Todas ellas pueden activarse desde el menú Ventana.

vídeo de los primeros pasos de DreamWeaver