Etiquetas

miércoles, 10 de abril de 2013

Hojas de estilo externo (dreamweaver)


Usted puede tener una Hoja de estilos CSS internas, externas, o en línea.
En este tutorial, voy a discutir una hoja de estilos externa, que creo que es la más útil cuando se trabaja en un sitio web con más de una Página.
Para crear una hoja de estilo externo con Dreamweaver, simple clic "Nuevo" y en "Página básica" elegir "CSS".
Esto le dará una hoja de estilo en blanco.
Lo siguiente que quiero hacer es experimentar y crear una o dos definiciones CSS.
Puede crear una definición CSS llamado "background1 'y hacer que el color verde.
A continuación, guarde la hoja de estilo CSS como algo parecido a 'sample1.css.
A continuación, se abre un archivo HTML en la misma carpeta que tiene algún texto en ella y "fijar" la hoja de estilos externa.
Que adjuntar la hoja seleccionando el menú desplegable "Texto" y elegir "Estilos CSS" y luego "Adjuntar hoja de estilos".
Una vez que se haya adjuntado una hoja de estilos externa a una Página web, usted puede hacer cambios a la hoja de estilos externa y cambiar el contenido de la página. Esto es especialmente importante si usted tiene un sitio web con varias páginas web.
El concepto es que, adjuntando una hoja de estilos externa a todos los de sus páginas web, puede actualizar muchas páginas web de forma instantánea al cambiar la hoja de un estilo CSS que se une a ellos.
De esta manera, un gran sitio web corporativo con 20.000 páginas podría ser actualizado con nuevos colores y fuentes en menos de 15 segundos! ... Simplemente cambiando la hoja de estilos CSS externa.
Así que ya ve la utilidad de hojas de estilo CSS se puede.
Para empezar, basta con entrar en su código HTML después de que haya conectado un hoja CSS externa a la página de Dreamweaver. Usted puede tomar cualquier etiqueta como una etiqueta y empezar a escribir en una clase CSS.
Por ejemplo,. Si usted comienza a agregar una clase CSS a cualquiera de estas etiquetas, Dreamweaver comenzará a auto-completar para usted y usted puede elegir la clase que desea agregar un menú desplegable.
También puede usar esto para los fondos de página estilo, fondos de mesa, fuentes, y mucho más!
Sólo tienes que aprender los fundamentos de la CSS y luego experimentar con Dreamweaver y te prometo que serás capaz de utilizar CSS con Dreamweaver en cuestión de pocas horas.
Para obtener más información acerca de Dreamweaver y hojas de estilo, se puede ver videos paso a paso en http://www.dreamweaverhowto.com


Unitats tipográficas ( pica, px, em, etc..)


Una de las primeras unidades tipográficas fue la pica , nombre dado en la Inglaterra del siglo XV a unos libros destinados a regular el ritual de las fiestas movibles eclesiásticas. Aparentemente se compusieron en un cuerpo de letra que se acabó llamando como ellos. Equivale a 1/6 de pulgada o 12 puntos (4'233 mm.).
Martín Domingo Fertel y Claude Garamond buscaron ya establecer pautas en la fundición de tipos, pero fue Pierre Simon Fournier el Joven, uno de los mejores punzonistas y fundidores del siglo XVIII, quien publicó en 1737 su Manuel Typographique, en el que definió un sistema de proporciones para la fundición sistemática de los caracteres, que llamó duodecimal. Para ello tomó el tipo de letra más pequeño que comúnmente se usaba, llamado nomparela, y lo dividió en seis partes, a cada una de las cuales dio el nombre de punto; y a base de éste empezó a fabricar, desde 1742, todo el material tipográfico que fundía. A la medida 12 puntos (el doble de la nomparela, equivalente a 4,512 mm) la llamócícero , ya que era similar al cuerpo empleado en la edición de la obra Cicerón, de Oratore, que realizó el impresor Schöffer a finales del siglo 15.



En 1760 Francois Ambroise Didot propone mejoras al sistema de Fournier, adoptando como base el pie de rey, medida de longitud usada en aquella época, que dividió en 12 partes, obteniendo una nueva definición de cícero, compuesto ahora por 12 puntos (aproximadamente 0,377 mm). A partir de ese momento se comenzaron a utilizar tipos en tamaños constantes, llamados por el número de puntos que media el cuerpo de los mismos.
Considerando Didot que un punto de pie de rey era excesivamente delgado para formar una apreciable graduación de caracteres, adoptó como unidad básica el grueso de dos puntos. Así, dos puntos de pie de rey equivalen a un punto tipográfico, cuatro puntos de pie de rey equivalen a dos puntos tipográficos, etc.
La altura del tipo la fijó en 63 puntos fuertes (llamados así porque la altura exacta oscila entre 63 puntos y 63 y medio, equivalentes a 23,688 mm).

El sistema Didot ha sido adoptado en todas las fundiciones del mundo, excepto en Inglaterra y Estados Unidos, en donde el punto tipográfico está basado sobre la pulgada inglesa, cuya equivalencia con el sistema métrico es de 0,352 mm. En 1886 la American Type Founder's Association estableció la medida de la pica en 1/72,27 de una pulgada (aproximadamente 0,3515 mm), siendo adoptado este sistema por los Estados Unidos y las colonias inglesas. Los tipos se funden generalmente en tamaños estandarizados que van desde los 6 hasta los 96 puntos, manteniéndose su altura en 63 puntos (23,312 mm).
La escala común de tamaños es la siguiente:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 60, 72, 84, 96
Con la aparición de los ordenadores y su aplicación al trabajo editorial y al diseño gráfico se hizo necesaria la introducción de nuevos sistemas de definición de fuentes para pantalla que permitieran su correcta impresión posterior y de nuevas unidades de medida que se acercaran más a la naturaleza propia de los monitores.

Entre los sistemas surgidos destaca uno de la compañía Adobe, llamado Postscript, que permite a los ordenadores comunicarse con los periféricos de impresión. Este sistema fue lanzado inicialmente lanzado en 1985 dentro del programa de edición Page Maker, opera almacenando los números en forma de pila y está basado en el formato de texto ASCII, el normal para caracteres. Como unidad básica de medida utiliza el punto de pulgada (una pulgada tiene 72 puntos, equivalente a 2,54 centímetros).
Por otra parte, los monitores de ordenador utilizan como unidad de medida el píxel , definido como la menor unidad de información visual que se puede presentar en pantalla, a partir de la cual se construye las imágenes.

El tamaño de un píxel no es absoluto, ya que depende de la resolución usada (un pixels a resolución 800x600 es mayor que uno a resolución 1024x768).

Resumiendo, actualmente se usan dos sistemas de medidas tipográficas para trabajo en imprenta clásica:
  • El europeo, basado en el punto de Didot (0,376 mm) y el cícero, formado por 12 puntos de Didot (4, 512 mm.).
  • El anglosajón, que tiene como unidades el punto de Pica (0,351 mm.) y la Pica, formada por 12 puntos de Pica (4,217 mm.).
La conversión de unas unidades a otras es incómoda, y lo normal es que nadie las realice en los talleres. Normalmente, los cíceros y las picas vienen en unas regletas, llamadas tipómetros, que en ocasiones pueden simultanear ambos sistemas, el anglosajón y el europeo.
Por otra parte, en trabajos digitales se utilizan otros dos sistemas:
  • Adobe Postscript, cuya unidad es el punto de pulgada (unos 0,352 mm). Una pulgada tiene 72 puntos (2,54 centímetros).
  • Píxeles, unidades dependientes de la resolución de pantalla usada.
Existen muchas propuestas por lograr unificar las medidas tipográficas a escala mundial, entre las que destacan las basadas en el sistema métrico decimal, como la propuesta por la ISO (International Organization for Standarization), pero hasta la fecha sin ninguna de ellas ha cuajado.
Por otra parte, el propio avance de los medios digitales está estableciendo por si solo una estandarización basada en el sistema Postcript de Adobe, altamente difundido y aceptado en la actualidad, así como la utilización de los píxeles como unidad de medida, no sólo en el diseño gráfico digital y el diseño web, sino también en sistemas fotográficos digitales y en televisiones de alta gama.

Creació de botons (dreamweaver)

Creación de botones en dreamweaver.

Imatge de substitució (dreamweaver)


La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.
En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON oEncendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.

dreamweaver
dreamweaver
Estado OFF
Estado ON


Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opciónInsertar, inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución, tal como muestra la siguiente imagen.

dreamweaver

En este instante usted deberá rellenar el cuadro de diálogo Insertar imagen de sustitución. A continuación se describirá brevemente cada campo.
Nombre de la imagen:
Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo.
Imagen original:
Esta imagen será la que actuará en estado OFF
Imagen de sustitución:
Esta imagen será la que actuará en estado ON
Carga previa de imagen de sustitución :
Es importante marcar esta casilla de verificación, ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la imagen de sustitución).
Texto Alternativo:
Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Este campo es opcional.
Al hacer clic, ir a URL:
Este campo se refiere a la inserción de un hipervínculo a la imagen. Este campo es opcional.
dreamweaver
En la imagen anterior podrá observar que no se relleno el campo Al hacerse clic, ir a URL, simplemente porque no se tiene intención de hacer un hipervínculo aunque en algunos casos si es conveniente rellenar este campo.
Ahora bien, a pesar de no haber rellenado el último campo del cuadro de diálogoInsertar imagen de sustitución, al hacer clic en la imagen desde el programa Macromedia Dreamweaver se podrá observar en el campo Vínculo en el panel Propiedades que aparece el carácter almohadilla (#), esto se debe porqueMacromedia Dreamweaver genera el código JavaScript necesario para la creación del comportamiento interactivo Sustitución de Imagen o comúnmente llamadoRollover.
En el caso que usted intente eliminar el carácter almohadilla Macromedia Dreamweaver le hará una advertencia, en donde le indica que al eliminar elVínculo se eliminarán los comportamientos generados por el código JavaScript, esto quiere decir en pocas palabras que si usted elimina el evento generado por elVínculo, usted estará eliminando el comportamiento interactivo de Rollover, simplemente aparecerá la imagen en estado ON, no habrá cambio o sustitución alguna.
dreamweaver
En caso que usted posea una imagen fuera de la carpeta raíz de su Sitio Actual,Macromedia Dreamweaver le hará una advertencia, en el caso que usted no le preste atención a esta advertencia es muy seguro que se genere un problema al momento de publicar su sitio en la red, esto se debe a que la imagen deja de ser accesible y se crea un vínculo roto, lo recomendable es que usted copie la imagen a la carpeta raíz de su sitio, preferiblemente en la carpeta que usted almacena todas las imágenes.
dreamweaver


Frames 8dreamweaver)

Los marcos o 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,El marco izquierdo puede contener 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.

Crear Frames


Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.


Tamany pantalles


Taules (dreamweaver)


Para insertar una tabla en un documento de Dreamweaver, llevar a término una de estas operaciones:

a) Situar el punto de inserción en el lugar de la ventana de documento donde se desea que aparezca la tabla - Insertar - Tabla
b) En la barra Insertar hacer clic en el botón Insertar Tabla de la ficha Común
c) Con el puntero del ratón arrastrar el botón Insertar Tabla desde la ficha Común en la barra Insertar hasta la posición deseada en la ventana de documento
2.- En estas tres operaciones aparecerá siempre el cuadro de diálogo Insertar tabla :
a) En el campo Filas, especificar el número de filas de la tabla
b) En el campo Columnas, especificar el número de columnas de la tabla
c) En el campo Relleno de celda, especificar el número de píxeles que habrá entre el contenido de la celta y el límite de ésta. El número predeterminado de relleno es 1 píxel. Introducir 0 para especificar que no se desea relleno
d) En el campo Espacio entre celdas, especificar el número de píxeles que debe haber entre las celdas de la tabla. El valor predeterminado es 2 píxeles. Introducir 0 para especificar que no se desea espaciado
e) En el campo Ancho, especificar el ancho de la tabla como porcentaje de la ventana del navegador o como un número de píxeles
f) En el campo Borde, especificar el ancho en píxeles del borde de la tabla. Poner 0 si no se desea que la tabla tenga borde
g) Aceptar 

MODIFICAR UNA TABLA

1.- Añadir filas y columnas
a) Hacer clic en el lugar en el que se quiere insertar una fila o una columna
b) Modificar - Tabla - Insertar filas o columnas
c) Aparece el cuadro de diálogo Insertar filas o columnas
d) Añadir un número de filas o columnas
2.- Eliminar filas y columnas
a) Hacer clic en una celda de la fila o columna que se desea eliminar
b) Elegir una de estas opciones:
Para eliminar una fila: Modificar - Tabla - Eliminar fila o Hacer clic con el botón de la derecha del ratón - Aparece el menú contextual - Tabla - Eliminar fila
Para eliminar una columna: Modificar - Tabla - Eliminar columna o Hacer clic con el botón de la derecha del ratón - Aparece el menú contextual - Tabla - Eliminar columna
3.- Combinar y dividir celdas
a) Para combinar dos celdas:
Se seleccionan con el puntero del ratón las dos celdas que se quieren combinar
Modificar - Tabla - Combinar celdas
b) Para dividir una celda o columna sencilla
Hacer clic en la celda que se quiere dividir
En el inspector de Propiedades hacer clic en el botón Dividir celda
Aparece el cuadro de diálogo Dividir celda
o En el campo Dividir especificar si la celda se divide en filas o columnas
o En los campos Número de filas o Número de columnas especificar en cuántas filas o columnas se dividirá la celda
o Aceptar
4.- Para combinar el alto de fila y el alto de tabla: Se mueve el puntero del ratón a lo largo del borde inferior de la tabla hasta que adopte la forma de selector de borde. Puede utilizarse este método para cambiar el alto de otras filas de la tabla
5.- Para cambiar el ancho de columna y el ancho de tabla.- Se mueve el puntero del ratón a lo largo de un borde de columna hasta que adopte la forma de selector de borde y se arrastra hacia la izquierda o hacia la derecha para cambiar el ancho de una columna. De forma similar se puede cambiar el ancho de toda la tabla
6.- Anidar tablas
a)Una tabla anidada es una tabla que está dentro de otra tabla
b) Para anidar una tabla en una celda de otra tabla, llevar a cabo una de estas operaciones:
Hacer clic en la celda donde se desea que aparezca la segunda tabla - Insertar- Tabla
Arrastrar el botón Insertar tabla de la categoría Común, que se encuentra en la barra Insertar, hasta la celda donde se desea insertar la segunda tabla
7.- Cortar o copiar y pegar celdas
a) Seleccionar una o más celdas de la tabla
b) Edición - Cortar o Copiar
c) Elegir con el puntero del ratón el lugar donde se desean pegar las celdas
d) Edición- Pegar

SELECCIONAR ELEMENTOS DE UNA TABLA

1.- Seleccionar toda la tabla. Llevar a cabo una de estas operaciones:
Hacer clic en la esquina superior izquierda de la tabla o en cualquier punto del borde derecho o inferior
Hacer clic en la tabla - Modificar - Tabla - Seleccionar tabla
Hacer clic en la tabla - Edición - Seleccionar todo
Hacer clic en la tabla con el botón derecho del ratón - Aparece el menú contextual - Tabla - Seleccionar tabla
2.- Seleccionar filas o columnas. Llevar a cabo una de estas operaciones:
Situar el punto de inserción en el margen izquierdo de una fila o en la parte superior de una columna - Hacer clic cuando aparezca la flecha de selección
Hacer clic en una celda y arrastrar el puntero del ratón en horizontal para seleccionar filas o en vertical para seleccionar columnas
3.- Seleccionar una o varias celdas. Llevar a cabo una de estas operaciones:
Hacer clic en una celda y arrastrar el puntero del ratón en horizontal o en vertical hasta otra celda
Hacer clic en una celda - Presionar la tecla Mayús y hacer clic en otra celda. Todas las celdas de la región rectangular quedarán seleccionadas
4.- Seleccionar un conjunto de celdas no contiguas.
Presionar la tecla Control
Hacer clic en las celdas que se quiere seleccionar