Como Elaborar un Sitio Web con Dreamveaver

1.       Abre Dreamweaver y crear un nuevo archivo .html. Haz clic en cualquier lugar de la página en blanco, a continuación, en la parte inferior de la pantalla, haz clic en "Propiedades de página", a continuación, cambia el color de fondo de la página.

2.       Haz clic en la opción "Capa" en el "Diseño de Objetos" del menú archivo. Esto creará una capa de diseño nuevo. Arrastra la capa para crear el contorno de la barra de navegación.

3.       Selecciona los límites de la nueva capa. A continuación, haz clic en el botón que se parece a un pequeño lápiz en la parte derecha de la pantalla. Esto abrirá el menú de opciones de CSS. Aquí puedes elegir un color de fondo y el borde de la capa. Elige los colores que funcionan bien con tu color de fondo.

4.       Haz doble clic en la capa y escribe todos los botones de navegación de tu sitio web. Una vez hecho esto, selecciona cada uno, a continuación, escribe el .html que se vinculará en la caja de "Link" en la parte inferior de la página.

5.       Crea una nueva capa para el texto, logotipo y la caja de autor, y utiliza el mismo proceso de creación de capa, bordes y relleno para diseñarlos.

6.       Guarda el archivo como "template.html" una vez que has insertado el logotipo e hiciste una barra de derechos de autor. Utiliza este archivo para crear todas las otras páginas del sitio web. Inserta imágenes y texto en el cuadro de contenido que desees para cada página diferente.

Crear sitios web en Dreamweaver - Creación del sitio base

Este tutorial introductorio abarca los sitios webs de tipo relativo y su gestión orientado a los archivos y no a la carpeta raíz del sitio, esto es con una carpeta raíz relativa (que no es fija).

Cuando creamos un sitio web con un programa como Dreamweaver, no podemos hacerlo como se nos ocurra, hay un proceso que permite no equivocarnos y facilita el trabajo.

Crear un nuevo sitio en cuanto a Dreamweaver permite que gestionemos diversos sitios web al mismo tiempo y además permite actualizar en tiempo real el contenido de nuestra web en línea mediante FTP o de manera pasiva.

Para crear un sitio Web basta conque elijamos o creemos una carpeta en el sitio que crea conveniente.

Por ejemplo, Yo he creado un sitio en c:\misitio y además otra carpeta dentro llamada c:\misitio\imagenes, donde almacenaré las imágenes usadas en la plantilla.

Abrimos Dreamweaver y en el menú Sitio pulsamos en la opción Nuevo Sitio...:

Ahora en la ventana que se abre (Definición de sitio) nos vamos a la ficha Avanzada, seleccionamos Datos locales:

En la Categoría de Datos locales agregamos:

• Nombre del sitio por el que será mostrado en la lista de Administrar Sitios.
• Si pulsan en el ícono de la carpetita, al lado de Carpeta raíz local podrán ubicar la carpeta donde almacenaran su nuevo sitio. o escribiendo directamente la dirección en la entrada de texto.

Ahora definan la Carpeta predeterminada de imágenes, esta carpeta, dentro de la carpeta raíz, les permite enlazar a una imagen externa a la carpeta raíz local, que se copiará automáticamente a la misma, sin tener que mover ningún archivo.

En el apartado inferior están "Vínculos relativos a:" que deben estar en modoDocumento.

Regrasamos a Categorias y pulsamos en Datos remotos:
Mediante la opción Acceso podremos usar las capacidades de gestión en tiempo real de la versión web que trabajamos en nuestra PC y la que está publicada en línea (si tienen un sitio en línea). Dreamweaver tiene opciones de Gestoría FTP o superior, por lo que podremos subir o bajar archivos o actualizar sólo los archivos que tiene alguna modificación.
 Los datos de FTP, Local\Red, WebDAV, sin aquellos que le da su proveedor de hosting, de momento sólo tendremos presente esta opción, por lo que la dejaremos enNinguno:

Por último, de Categorías elegimos, Servidor de prueba; este es muy importante, pues permite que usemos aplicaciones del lado del servidor como Apache directamente en el PC.

Necesario para probar webs programadas bajo lenguajes dinámicos de manera local, evitando subir archivos que pueden ser inseguros a nuestro servidor en línea.

Si instalamos un servidor en nuestra PC con Apache


Si elegimos en Modelo de servidor: PHP MySQL debido a que disponemos de un servidor instalado en nuetra PC, en Acceso seleccionen Local/Red.

Deberemos dar la dirección del servidor (Carpeta del Servidor) dentro del disco donde se guardan los sitios creados dinámicamente, si usáramos Appserv, la carpeta del servidor debería estar en C:\AppServ\www o sea; C:\AppServ\www\misitio, por lo que el Prefijo de URL sería: http://localhost/misitio/

Recordemos que salvo que se indique lo contrario el prefijo que simula un servidor como apache se realiza en la dirección interna http://localhost/ o http://127.0.0.1/ que es equivalente a la carpeta www o raíz.

Cuando se diseñe un sitio en PHP por ejemplo podremos ver contenido del lado de servidor que sólo es posible ver si tenemos instalado un Servidor Web como Apache en nuestras PC y tambiñen abriremos sesiones directamente desde el navegador al pulsarF12.

Si usted no ha entendido nada de esto último, es que de momento no lo necesita, al igual que en Datos remotos, lo dejamos como Ninguno. Sólo tome en cuente ambas opciones y úselas según su nivel de conocimientos. Las demás opciones de la listaCategoría son excluibles.

Pulse en aceptar para terminar de guardar el nuevo sitio,si ya tenia un sitio y lo agregó a la lista, se generará la cache del sitio con todos sus archivos y plantillas (si las tuviera) operando.

Ahora nos vamos a las pleca Archivos (Menú Ventana - Archivos) y en la  lista veremos todos los sitios que tengamos creados

 Los iconos de izquierda a derecha que controlan la ficha de Archivos son: 

Conectar: Se conecta con el sitio remoto por FTP u otra ruta

Actualizar: Actualizar la vista de los archivos.

Obtener archivo: Descarga un archivo del servidor remoro

Colocar archivo: Sube un archivo al servidor remoto

Proteger archivo: Bloquea un archivo o recurso, evitando su edición.

Desproteger: Desbloquee un archivo o recurso

Sincronizar: Sincroniza versiones viejas con las de más reciente modificación en el servidor remoto.

Expandir: Muestra el contenido del servidor remoto y el local

Si damos clic derecho en cualquier carpeta del organigrama, podremos crear un carpeta nueva o archivo dentro del destino seleccionado.

  Toda cambio, por ejemplo; el jalar una carpeta u archivo de posición, si está enlazado por otro documento, el programa automáticamente pedirá actualizar las páginas afectadas, evitando errores al mover archivos y que estos no encuentren los recursos que enlazan (Pulsen actualizar en tal caso):

Ahora si queremos editar los datos de un sitio nuevamente para agregar datos remotos u otras cosas nos vamos al menú Sitio y en Administrar sitios...

Aparecerán los sitios web listados, si pulsamos Editar... volveremos a Definición del sitio:

BIBLIOGRAFIA

http://www.youtube.com/watch?v=yfD4DtKOOkE

http://www.ehowenespanol.com/pagina-web-dreamweaver-como_148410/
http://cgnauta.blogspot.com/2008/10/crear-sitios-web-en-dreamweaver-creacin.html

Menu Spry

Menus con Dreamweaver (Spry Menu)

Es muy común ver menús interesantes en diferentes páginas web.  Antes del advenimiento de los estilos CSS, solo podía hacerse en Flash.  Pero ahora Dreamweaver puede hacer menús bastante interesantes… tal vez no tienen la misma calidad gráfica que los de se pueden hacer con Flash, pero igual de funcionales.

Estos son los famosos Spry Menus.  Spry signfica ágil, algo que se mueve de forma ligera y rápida.  Pero en lo referente a sitios web, parece que es un estándar propuesto por Adobe para crear contenido dinámico en páginas web.  Para los que gustan de explicaciones más técnicas, Spry framework es una biblioteca programada en Javascript que provee la funcionalidad que ofrece AJAX (nada que ver con el jabón) que permite crear páginas Web 2.0 de forma sencilla.  Si quieres ver una galería de ejemplos, visita los demos de Adobe.

A continuación presento un tour paso por paso de lo que hay que hacer para crear un menú Spry.

Antes que nada, comencé con una página nueva en un sitio (que ahorita no tiene nada).  Puse una imagen y modifiqué sus propiedades para que no se viera tan feo.  Posicioné el cursor abajo de la imagen.  Hasta ahorita, mi ventana de Dreamweaver se ve así:

Para insertar un menú Spry hay dos formas: voy al menú Insert, Layout Objects y Spry Menu Bar como se ve en la siguiente figura:

También puedo ir a la pestaña Spry y doy clic sobre Spry Menu Bar como se ve en esta figura (hay un círculo rojo alrededor de la opción Spry Menu Bar):

Independientemente de cual de las formas prefieras seleccionar esta opción, aparece una ventana como esta que te pregunta la distribución del menú.  En mi caso voy a elegir la opción horizontal:

Al presionar Ok mi página se ve así:

Y la barra de propiedades se ve así:

Lo primero que voy a hacer es llenar el menú con las opciones que quiero.  Dreamweaver automáticamente lo llena con Item 1, Item 2, etc. pero todo el mundo debe cambiarlo (al menos que su sitio web tenga una página “Item 1”, otra cuyo tema sea “Item 2”, etc.).  Esto se hace de forma sencilla: mientras tengo el menú Spry seleccionado, hago clic sobre el elemento que quiero cambiar (en este caso, “Item 1”) y luego cambio el texto en la propiedad Text.  Al dar Enter después de escribir el nuevo valor, se actualiza mi menú.  La barra de propiedades se ve así:

De igual manera puedo cambiar el resto de elementos.  Si quiero eliminar alguno, lo selecciono y presiono el botón –.  Si quiero agregar uno nuevo, presiono el botón +.  Y puedo seleccionar un elemento y usar los triángulos hacia arriba y hacia abajo para cambiar el orden en el que aparecen.

Al terminar de modificar estas opciones, el panel de propiedades se ve así (aunque no ponga la imagen, también se ven estos cambios en la vista diseño de mi sitio):

Si te fijas, tengo 3 ventanas de opciones.  Estas permiten que tenga un menú principal y hasta 2 subniveles.  En mi caso, voy a modificar las opciones de Sitios (que tiene las opciones Item 1.1, Item 1.2 e Item 1.3) para poner vínculos a mis sitios.  Cambiar nombres se hace igual que como expliqué con anterioridad, solo que ahora voy a cambiar la propiedad Link.  Así se ve con el primero cambiado:

Fíjate que en Link puse la dirección de la página que quiero abrir.  Como no es parte de este sitio, tuve que anteponer http:// a la dirección.  En el campo Target escribí _blank para que lo abra en otra ventana o pestaña (de acuerdo a la manera en que tengan configurado el navegador), pero si pongo _self o lo dejo sin nada lo abre en esta misma ventana.

Cambié el resto de los elementos y así quedó mi ventana de propiedades (todos los URLs que escribí con Link no se ven completos, pero los escribí bien):

Y la página en vista diseño se ve así (bueno, solo puse un pedazo de la ventana del sitio: el único que cambió):

Con el menú de Archivos voy a usar todos los submenus posibles. El primero es el que dice Archivos, va a tener 3 submenus: PDF, DOC y PNG, y adentro de cada uno de estos va a haber ligas para bajar a diferentes archivos.  Antes de hacer esto, copié unos cuantos archivos a mi sitio (se copian a la misma carpeta donde tienes almacenado tu sitio).  Organicé los archivos en carpetas correspondientes para que no hubiera demasiado relajo en mi sitio.  La ventana del sitio quedó así:

Fui agregando los submenus de la misma manera en que lo hice con anterioridad, solo que en esta ocasión las ligas (propiedad Link) son internas, es decir, liga a archivos que están en el sitio.  Por esto, en lugar de escribir un link comenzando con http://, presioné el botón de carpeta que está de lado derecho del campo Link para seleccionar el archivo  deseado.  Cuando terminé la ventana de propiedades quedó así:

BIBLIOGRAFIA

http://tony-valderrama.blogspot.com/2011/02/menus-chuvidubis-con-dreamweaver-spry.html

http://www.youtube.com/watch?v=AUMgWg9hiuE

Que son los Frames

Qué son los frames (1) from Enrique Reyes

¿Qué son los Frames?

Cuando definimos una página que usará frames, dividimos la ventana actual en un conjunto de subpantallas que contienen cada una diversas páginas de HTML (inclusive provenientes de distintos sitios de Internet), cuyo tamaño está dado como un porcentaje de la ventana total o como una distancia en pixeles (algo muy semejante a la definición de tablas). Al realizar esto, el desarrollador puede buscar dos cosas: la primera es presentar de forma concisa y compacta una gran cantidad de información; la segunda, es la posibilidad de interactuar y obtener resultados (en una sola ventana) utilizando diferententes páginas HTML al mismo tiempo. Esto significa que los frames pueden intercambiar información el uno con el otro. Seguramente usted ya habrá visto páginas que usan frames debido a que una de sus aplicaciones más comunes son las relacionadas al establecimiento de una página  de "resultados" y junto a ella (en alguno de los ejemplos por lo regular) existe otra página con botones o ligas que actúan como menú principal. De esta forma, usted puede seguir "navegando" mientras que conserva una serie de recursos disponbles todo el tiempo.

Como ustde debe saber, no todas las versiones de los navegadores pueden usar frames (tal y como ocurre con JavaScript), tiene que tener Netscape Navigator 2.0 o al uno otro browser superior o compatible.

Recordando la Creación de Frames con HTML

Como usted debe comprender, no es el prooósito de este manual el describir detalladamente la estructura  y funcionamiento de la etiqueta FRAMES; sin embargo, es necesario repasar sus características para comprender mejor la foma en que JavaScript puede interactuar con él.

Para utilizar los frames de HTML, necesitamos de dos etiquetas importantes:

a) <FRAMESET>

            Esta etiqueta sustituye a la etiqueta <body> y tiene tres funciones importantes:

            1) Indicar al browser que la página cargada contiene frames.
            2) Definir el número de columnas y renglones en los que deberá ser dividida la pantalla.
            3) Estalecer el tamaño o proporción de cada frame para su correcta visulaización.

b) <FRAME>

            Por su parte, esta etiqueta sirve para definir las propiedades de cada frame, las cuales son:

            i) Scrolling = " yes | no | auto "
            Con esta opción, definimos si la ventana tendrá barra de desplazamiento (por omisión esta en "auto").

            ii) Noresize
            Indica si el usuario podrá o no modificar el tamaño del frame.

            iii) Name
            Como todos los objetos, puede hacerse referencia a un frame por su nombre.

            iv) Marginwidth = " # | % "
            Especifica el ancho del frame, puede ser en pixeles o en porcentaje.

            v) Marginheight = " # | % "
            Especifica el alto del frame, puede ser en pixeles o en porcentaje.
 

Elementos tales como las formas, los botones, las hiperligas, etc. tienen definida la propiedad  Target = "<frame>"; con la cual, podemos definir en que frame o ventana deberán ser arrojados los resultados de hacer click en cualquiera de ellos.

Para entender esto, considere dos casos radicalmente expremos. Por una parte, imagine que en esta misma  página aparece una hiperliga y que usted desea observar el contenido de esta. Dado que en la página actual existen frames, la página será desplegada en el frame en el que se encuentre la hiperliga ( bien en otro frame si usted redirecciona la salida tal y como ocurre en el menú de la izquierda). Ahora bien, puede darse el caso de que usted ya no necesite visualizar la barra de menú; en ese caso, usted deseará ir a la página pero desplegandola completa en la ventana de su browser. Esto puede realizarse mediante la expresión TARGET="_top"

Funcionamiento de los marcos y los conjuntos de marcos

Un marco es una zona de una ventana de navegador que puede mostrar un documento HTML independiente de lo que se muestra en el resto de la ventana. Los marcos permiten dividir la ventana de un navegador en varias regiones, cada una las cuales puede mostrar un documento HTML diferente. Por lo general, un marco muestra un documento que contiene controles de navegación, mientras que otro muestra un documento con contenido

Un conjunto de marcos es un archivo HTML que define el diseño y las propiedades de un grupo de marcos, que incluyen el número, el tamaño, la ubicación de los marcos y el URL de la página que aparece inicialmente en cada marco. El archivo de conjunto de marcos no incluye el contenido HTML que se muestra en el navegador, excepto en la sección noframes. El archivo únicamente ofrece al navegador información sobre cómo debe mostrarse un conjunto de marcos y los documentos que deben incluirse en los marcos.

Para ver un conjunto de marcos en un navegador, introduzca el URL del archivo de conjunto de marcos; el navegador abre entonces los documentos que deben mostrarse en los marcos. El archivo de conjunto de marcos de un sitio suele llamarse index.html. Así, cuando el visitante no especifica ningún nombre de archivo, este archivo se muestra de forma predeterminada.

Cuándo utilizar marcos

Adobe desaconseja el uso de marcos para el diseño de páginas Web. Estas son algunas de las desventajas que presenta el uso de marcos:

·        Lograr una alineación gráfica precisa de los elementos en distintos marcos puede resultar difícil.

·        Comprobar las opciones de navegación puede llevar mucho tiempo.

·        Los URL de las páginas con marcos no aparecen en el navegador, por lo que puede resultar complicado para un visitante marcar una página concreta (salvo que incluya código de servidor que le permita cargar la versión con marcos de una determinada página).

El uso más habitual de los marcos, en el caso de que decida utilizarlos, es para navegación. Un conjunto de marcos suele incluir un marco con una barra de navegación y otro que muestra las páginas de contenido principal. El uso de marcos de esta forma ofrece estas ventajas:

El navegador de un visitante no tendrá que volver a cargar los gráficos de navegación para cada página.

Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. Por ejemplo, si la barra de navegación se encuentra en otro marco, cuando el visitante se desplaza al final de una página de contenido muy grande en un marco no es necesario que vuelva al principio de la página para acceder a la barra de navegación.

En muchos casos, puede crear una página Web sin marcos que logre los mismos objetivos que un conjunto de marcos. Por ejemplo, si desea que la barra de navegación aparezca a la izquierda, puede reemplazar la página por un conjunto de marcos o, simplemente, incluir la barra de navegación en todas las páginas del sitio. (Dreamweaver le ayuda a crear varias páginas con el mismo diseño.) Aunque no utiliza marcos, el siguiente ejemplo muestra un diseño de página que los imita.

BIBLIOGRAFIA

http://manuales.dgsca.unam.mx/javascript/HomeFrames.html

http://help.adobe.com/es_ES/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7d4ea.html

Como Insertar y Modificar Tablas en Dreamweaver

 CREAR UNA TABLA

1.- 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

 

CONFIGURAR LAS PROPIEDADES DE TABLAS Y CELDAS CON EL INSPECTOR DE PROPIEDADES

1.- Propiedades de tablas

a) Seleccionar la tabla

b) Si el inspector no está visible: Ventana - Propiedades - Aparece el inspector de propiedades de tablas 

c) En el campo Tabla del inspector introducir un nombre para la tabla

d) En los campos Filas y Cols, especificar el número de filas y columnas de la tabla

e) En los campos An y Al, especificar el ancho y el alto de la tabla

f) Utilizar el campo Alinear para especificar cómo debe alinearse una tabla: izquierda, centro, derecha

g) En el campo Borde, especificar el ancho del borde de la tabla

h) Para seleccionar un color de borde para toda la tabla:

Seleccionar toda la tabla

Hacer clic en el campo Col. borde

Elegir un color en el selector de colores desplegable

i) Para establecer el color de fondo de la tabla

Seleccionar toda la tabla

Hacer clic en el campo Col. fondo

Elegir un color en el selector de colores desplegable

j) Para establecer la imagen de fondo de la tabla

Seleccionar toda la tabla

Hacer clic en el icono de carpeta Buscar el archivo

Buscar y seleccionar el archivo de imagen

Aceptar - Sale un cuadro de mensaje - Aceptar

2.- Propiedades de celdas, columnas y filas

a) En el campo Rell. Celda del inspector de propiedades, especificar el número de píxeles que habrá entre el contenido de la celda y el límite de ésta

b) En el campo Esp. celda, especificar el número de píxeles que debe haber entre las celdas de la tabla

c) Para alinear horizontalmente el contenido de la celda

Hacer clic en la celda de la tabla en la que se quiere poner un contenido (texto o/e imagen)

Utilizar el menú emergente horiz.. para configurar la alineación horizontal

Seleccionar: izquierda, centro, derecha

Escribir un texto o/e insertar imagen

d) Para alinear verticalmente el contenido de la celda

Hacer clic en la celda de la tabla en la que se quiere poner un contenido

Escribir texto o/e insertar imagen

e) Para determinar el ancho y el alto en píxeles o en porcentajes de las celdas

Seleccionar la celda

En los campos An y Al, especificar el ancho y el alto de la celda

f) Para definir una imagen de fondo para una celda, columna o fila

Seleccionar celda, columna o fila

Utilizar el campo Fnd.

Hacer clic en el icono de carpeta para buscar y seleccionar una imagen

Aceptar

   AÑADIR CONTENIDO A UNA CELDA.- A las celdas de la tabla se pueden añadir texto e imagen

1.- Añadir texto a una celda

a) Hacer clic en la celda en la que se desea añadir texto

b) Llevar a cabo una de estas operaciones:

Escribir el texto en la celda seleccionada. La celda aumentará de tamaño automáticamente a medida que se escriba

Pegar el texto copiado de otro documento

c) Para moverse entre las celdas

Para pasar a la celda siguiente presionar la tecla Tab

Para volver a la celda anterior presionar Mayús+Tab

También se pueden usar las teclas de flecha para moverse entre las celdas

Si se presiona la tecla Tab en la última celda de la tabla, se añadirá automáticamente una fila a la tabla

2.- Añadir una imagen a una celda

a) Hacer clic en la celda en la que se desea añadir la imagen

b) Para insertar la imagen, llevar a cabo una de estas operaciones:

Insertar - Imagen - Sale el cuadro «Seleccionar origen de imagen» - Buscar y seleccionar en «Buscar en:» el archivo de imagen - Si el archivo seleccionado no está en la carpeta del sitio actual, se presentará un cuadro de mensaje preguntando si se quiere copiar el archivo de imagen en el sitio. Si se contesta sí, aparece el cuadro de diálogo Guardar para confirmar nombre y carpeta del sitio donde guardar el archivo. Al pulsar Guardar se guarda el archivo y se guarda la imagen en la tabla. Aceptar

En la barra Insertar hacer clic en el botón Insertar imagen de la ficha Común - Seleccionar y buscar el archivo de imagen - Sale el mismo cuadro de mensaje - Hacer lo mismo que se ha hecho anteriormente - Aceptar

 

 DIBUJAR CELDAS Y TABLAS EN VISTA DE DISPOSICIÓN

 CAMBIAR DE VISTA ESTÁNDAR A VISTA DE DISPOSICIÓN: Hacer clic en la ficha Disposición, que se encuentra en la barra Insertar 

 - Aparece el cuadro de mensaje de «Introducción a la vista de Disposición» 

- Aceptar

 DIBUJAR UNA TABLA O CELDA DE DISPOSICIÓN

1.- Hacer clic en el botón Dibujar tabla de disposición o en el botón Dibujar celda de disposición - El puntero del ratón se convierte en un signo más(+)

2.- Situar el puntero del ratón en la ventana y, a continuación. Hacer clic y arrastrar el ratón para crear la tabla o celda de disposición. Para crear varias tablas o celdas sin necesidad de hacer clic repetidamente en el botón de tabla o celda de disposición, mantener pulsada la tecla Control mientras se van creando las tablas o celdas donde se desee

 DIBUJAR UNA TABLA DE DISPOSICIÓN ALREDEDOR DE TABLAS O CELDAS EXISTENTES

1.- Situarse en la vista de Disposición

2.- En la barra Insertar hacer clic en la ficha Disposición 

3.- Hacer clic en el botón Dibujar tabla de disposición

4.- El puntero del ratón se convertirá en un signo más (+)

5.- Hacer clic y arrastrar el ratón alrededor de las celdas o tablas de Disposición

 DIBUJAR UNA TABLA ANIDADA

1.- Situarse en la vista Disposición

2.- En la barra Insertar hacer clic en la ficha Disposición

3.- Hacer clic en el botón Dibujar tabla de disposición

4.- El puntero del ratón se convertirá en un signo más (+)

5.- Situar el puntero del ratón dentro del espacio gris de una tabla de disposición existente y, a continuación, hacer clic y arrastrar el ratón para crear la tabla de disposición anidada

 

 PARA USAR LA CUADRÍCULA EN LA VENTANA DE DOCUMENTO

1.- Se puede usar la cuadrícula de Dreamweaver como guía al dibujar la tabla de disposición

2.- Para mostrar u ocultar la cuadrícula llevar a cabo una de estas operaciones:

a) Ver - Cuadrícula - Mostrar cuadrícula - Ajustar a cuadrícula , si se quiere activar el ajuste de la tabla a la cuadrícula

b) En la barra de herramientas Documento hacer clic en el último botón de la derecha Ver opciones 

 - En el menú desplegable seleccionar Cuadrícula

3.- Para cambiar la configuración de la cuadrícula: Ver - Cuadrícula - Configuración de la cuadrícula 

 - En el cuadro de diálogo Configuración de la cuadrícula, marcar las opciones deseadas - Aceptar

 INTRODUCIR CONTENIDO EN LAS CELDAS DE DISPOSICIÓN.- En la vista de Disposición se pueden añadir textos, imágenes, películas de Flash, vídeos y otros elementos a la celdas de disposición de la misma forma que en la vista normal o estándar de Dreamweaver

1.- Para añadir texto a una celda

a) Hacer clic en la celda de disposición donde se quiere añadir el contenido

b) Escribir el texto en la celda. La celda aumentará automáticamente de tamaño a medida que se escribe el texto

2.- Para insertar una imagen a una celda.- Llevar a cabo una de estas operaciones

a) Insertar - Imagen - En el cuadro de diálogo Seleccionar imagen, buscar y seleccionar un archivo de imagen - Aceptar

b) En la barra Insertar hacer clic en el botón Insertar imagen de la ficha Común 

3.- Para insertar película de Flash o video, llevar a cabo las operaciones para Añadir una imagen a una celda.

 CAMBIAR EL TAMAÑO DE CELDAS Y TABLAS DE DISPOSICIÓN

1.- Cambiar el tamaño de una celda de disposición

a) Hacer clic en el borde de la celda o mantener pulsada la tecla Control y hacer clic en cualquier punto de la celda

b) Utilizar los manejadores de selección para arrastrar la celda hasta obtener el tamaño deseado

2.- Cambiar el tamaño de una tabla

a) Hacer clic en el borde de la tabla

b) Utilizar los manejadores de selección para arrastrar la tabla hasta obtener el tamaño deseado

MOVER UNA CELDA DE DISPOSICIÓN,- Hacer clic en el borde de la celda y arrastrar o utilizar las teclas de flecha para mover la celda hasta el lugar del documento que se desee. La tecla se mueve de píxel en píxel; si se mantiene presionada la tecla Mayús., se moverá de 10 en 10 píxeles

CONFIGURAR LAS PROPIEDADES DE TABLAS Y CELDAS CON EL INSPECTOR DE PROPIEDADES

1.- Establecer la altura y la anchura de una tabla de disposición

2.- Establecer el relleno de celda y espaciado de una tabla de disposición

3.- Establecer un color de fondo

CONFIGURAR LAS PROPIEDADES DE TABLAS Y CELDAS CON EL INSPECTOR DE PROPIEDADES

1.- Establecer la altura y anchura de una celda de disposición

2.- Establecer un color de fondo

3.- Establecer la alineación 

BIBLOGRAFIA

https://www.youtube.com/watch?v=zwyt5bSKhAM

http://www.ugr.es/~filosofia/recursos/innovacion/curso-dreamweaver/03-Crear-tablas.htm