Registrado en la Biblioteca del Congreso de los Estados Unidos de América. Copyright 2012 Amado Marin. All rights reserved.

Transcripción

1

2 Registrado en la Biblioteca del Congreso de los Estados Unidos de América Copyright 2012 Amado Marin. All rights reserved. Prohibida la reproducción total o parcial de este libro sin previa autorización del autor.

3

4 PROLOGO GANE DINERO DISEÑANDO SU PROPIA PAGINA DE NEGOCIOS en pocas horas DESCUBRALO Usted Mismo! Mi estimado amigo, si Usted ya tiene una idea, el Poder de Decisión y un Producto, lo que sigue, es diseñar su propia Web de Negocios; para ello, es sumamente recomendable, que diseñe usted mismo su sitio; así podrá hacer los cambios o modificaciones a su libre albedrío y no tendrá que pagar cada vez que necesite agregar, cambiar o modificar algo en su Web. Vivimos de prisa, El tiempo es Oro! El siglo 21, sin duda nos obliga a vivir de prisa, generalmente no hay disponibilidad de tiempo para leer libros voluminosos como en este caso el Manual de Adobe Dreamweaver que tiene cerca de mil páginas, que demanda mucho tiempo su lectura o estudiar cursos costosos por los cuales hay que invertir muchísimo dinero. Si usted, es una de éstas personas que no dispone de tiempo para la lectura, que desea aprender rápidamente, y sobre, todo desea solucionar sus problemas económicos con prontitud, entonces el Manual "Aprenda Dreamweaver en ocho pasos" tiene las herramientas que necesita para aprender Dreamweaver fácilmente y diseñar su Web de negocios en unas cuantas horas sin ser experto en lenguajes de programación. En este libro encontrará un ejemplo práctico desarrollado paso a paso, en base al cual podrá diseñar la suya, con sus propios logotipos, texto, imágenes y demás objetos de su agrado. Descúbralo usted mismo.

5 Objetivo principal del Libro Es posible que no haya podido diseñar su página, porque: 1. No tiene dinero para capacitarse o para contratar un diseñador. 2. No tiene tiempo y cree que es imposible crear su propia Web. 3. No cree que pueda ganar dinero desde ella, etc. Pues bien, tiene en sus manos el libro correcto, donde tiene la solución a la vista, pues en este manual encontrará la manera más sencilla de cómo hacer su propia paso a paso. Este libro contiene entre otros aspectos, la parte esencial y necesaria del Programa Dreamweaver completamente ilustrado y, su objetivo primordial no es convertirlo en un experto en diseño de páginas poco prácticas; sino, un experto en el uso de las herramientas necesarias e imprescindibles para diseñar una Web de negocios y ganar dinero online. En este Manual le enseñaré de manera práctica y sencilla el procedimiento de principio a fin hasta que su negocio esté funcionando en la Internet. Igualmente aprenderá cómo detectar los plagios de su Web, de esa manera sabrá cómo protegerse y saber quiénes están copiando su trabajo para poder hacer la denuncia correspondientes. También le mostraré una relación de sitios donde debe hacer consultas si lo cree necesario. Sencillez, Elegancia y Productividad Una página Web de negocios debe tener un aspecto sencillo, elegante, y sobre todo productivo. Una Página bien hecha y optimizada debe poder vender sola los 365 días del año, mientras usted dedica su tiempo a otras actividades. Estos tres atributos se logran gracias a las herramientas adecuadas que las estoy ofreciendo aquí, y con una buena disposición y deseo de hacer bien las cosas, sí se gana dinero y del bueno, tal vez no gane millones como aseguran aquellos que le ofrecen el oro y el moro con tal que compre sus productos tan caros, pero, que va a ganar dinero, va a ganar lo suficiente para darse sus lujos que nunca pudo tenerlos; solo tiene que intentarlo con "Aprenda Dreamweaver en ocho pasos" donde aprenderá de manera asombrosamente simple a diseñar su página de negocios usted mismo.

6 Por otro lado, para diseñar Páginas de negocios y sobre todo Administrarlas y Mantenerlas, así como optimizarlas para ocupar los primeros lugares en los buscadores, mantener y editar sus archivos o hacer cambios en su estructura de acuerdo a sus gustos y necesidades, obligatoriamente necesita diseñarlas usted mismo para evitar tener que pagar a terceros cada vez que desea hacer un cambio, lo cual no solamente implica inversión de tiempo sino también mucho dinero. "Aprenda DreamWeaver en ocho pasos", es un manual elaborado de manera académica y profesional que lo hace 100 % práctico y sencillo; una poderosa herramienta para que en ocho pasos diseñe usted mismo su página de negocios con el famoso y potente software usado para diseñar más del 90% de las páginas de Internet. Solo tiene que descargarlo; ponerse frente a su computador y paso a paso ir disfrutando el aroma de su creación e ingenio. NO OLVIDE! La indecisión es el origen del fracaso. Qué espera? De su primer paso, comience ahora y descubra el sendero que le llevará a ganar dinero en Internet. Salga de sus dudas, Pruebe fortuna! éste manual le ayudará a diseñar, editar y mantener su Página de Negocios en la Internet de manera sumamente sencilla.

7

8 CAPITULO INTRODUCCION Las primeras páginas Web fueron creadas en Suiza por el CERN (Centro Europeo de Investigación de Partículas) para comunicarse con otros científicos europeos. En 1992 aparece el primer navegador Viola WWW para visualizar páginas Web y posteriormente, en 1993 aparece el Mosaic, segundo navegador Web creado por el americano Marc Andressen estudiante de la Universidad de Illinois, marcando el inicio del crecimiento de la Internet. En la actualidad, de todos los programas de software que existen para el diseño de páginas Web, el más representativo es Dreamweaver de la Compañía Adobe, que permite, crear y mantener sitios Web de negocios profesionalmente. Gracias a este software no es necesario que usted tenga conocimientos profundos sobre lenguajes de programación, ya que Dreamweaver tiene una plataforma interactiva en la cual puede alternar entre las opciones: CODIGO, si es que maneja lenguaje HTML, o bien, DISEÑO, si desea que DW lo haga por Usted, traduciendo su trabajo a Lenguaje HTML (Hiper text Marckup Lenguaje). No obstante, si desea administrar y optimizar personalmente sus sitios para los buscadores en la Internet, es imperativo que conozca, aunque no a profundidad este lenguaje y, otros como Jaba Script, PHP, etc. Lo cual va a permitirle un ahorro significativo de dinero. 1.2 INSTALACION DEL SOFTWARE Como aspecto preliminar, usted necesita contar con el software; si no es así, puede adquirirlo en la compañía Adobe en cualquiera de sus tiendas a nivel mundial, de acuerdo al país donde reside o de acuerdo a sus preferencias en cualquier otra tienda que encuentre en la Internet donde los precios sean buenos y se ajusten a sus posibilidades; yo particularmente le recomiendo hacerlo en: ~ 1 ~

9 Esta, es otra compañía que tiene buenos precios para la adquisición de este producto, solo tiene que elegir la opción que más le convenga; recuerde, que todas las versiones Dreamweaver CS, son buenas, lo único que diferencia una de la otra son las opciones que entran de moda. Bien, una vez instalado el software, corremos el programa, lo abrimos y comenzamos con el diseño de nuestra página Web de negocios; en nuestro caso vamos a desarrollar el procedimiento paso a paso de la creación de una Página Web de negocios por ejemplo Aprenda Dreamweaver en ocho Pasos. 1.3 ESPACIO DE TRABAJO Como en todo tipo de actividad humana se requiere elementalmente un área disponible para realizar un trabajo; Dreamweaver nos proporciona su espacio interactivo integrado en una sola ventana, cuya nomenclatura se muestra en la siguiente figura: Menú principal Barra de insertar Barra de herramientass Grupo de paneles Sector de etiquetas Ventana de trabajo Inspector de propiedades Panel de archivos ~ 2 ~

10 1.4 ELEMENTOS DEL ESPACIO DE TRABAJO Estos son los elementos del espacio de trabajo de Dreamweaver, con cuya ventana irá familiarizándose durante el desarrollo de su proyecto de diseño Web. 1. Barra de Menú Principal. Como todo programa de software, muestra las opciones generales con sus respectivos submenús. 2. Barra Insertar. Tiene botones para la inserción de diversos tipos de objetos, como imágenes, tablas y otros elementos. Esta barra se activa yendo a Barra de menú principal, haciendo clic en Ver, tome la opción Barra de Herramientas y haga clic en Insertar. 3. Barra de herramientas. Tiene botones que permite ver la vista Diseño y la vista Código, así como otras visualizaciones y algunas operaciones comunes como la vista previa en un navegador. 4. Ventana de trabajo. Muestra el documento actual, mientras lo está creando y/o editando. 5. Inspector de propiedades. Permite ver y cambiar diversas propiedades de los objetos o textos seleccionados. Cada tipo de objeto tiene diferentes propiedades. 6. Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana del 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. 7. Grupos de paneles. Conjuntos de paneles relacionados y 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. 8. Panel de archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encontraran en un servidor remoto. El panel de archivos también proporciona acceso a todos los archivos del disco local. ~ 3 ~

11 1. 5 CONFIGURCION DEL SITIO WEB LOCAL El sitio Web de Adobe Dreamweaver, es el conjunto de archivos utilizados para la creación de las páginas Web; el término sitio es el lugar de almacenamiento local o remoto de los documentos que pertenecen a un sitio Web, para luego cargarlo en un Servidor Web, controlar, mantener vínculos, administrar y compartir archivos. Para crear un sitio de Dreamweaver, sólo se tiene que configurar una carpeta local (En el Disco Duro); Sin embargo, para transferir todos los archivos a un servidor Web Remoto, hay que añadir datos para un sitio remoto que nos permita hacer las pruebas correspondientes antes de publicar la Tienda Virtual en la Internet. Básicamente un sitio de Dreamweaver consta de tres carpetas: Local, de Prueba y Remota; pero, para obviar pasos solo necesitamos dos: Carpeta Local y Carpeta Remota. La Carpeta raíz local o Sitio local. En ella se almacenan los archivos con los que se está trabajando. Esta carpeta puede encontrarse en el equipo local (PC) o en un servidor de red. Si se trabaja directamente en el servidor, Dreamweaver cargará los archivos en el servidor cada vez que los guarde. Veamos: 1. Corremos el programa Dreamweaver: 2. Vamos a la barra de Menú Principal y hacemos clic en Sitio. 3. Seleccionamos la opción Administrar sitios. 4. En el cuadro de diálogo que aparezca, pulsamos nuevo. 5. Hacemos clic en Sitio y esperamos un momento. 6. Aparecerá otro cuadro de diálogo como Sitio sin nombre En vez de sitio sin nombre 2 escribimos SITIO Hacemos clic en el icono amarillo que está a la derecha de la Carpeta raíz local y en el cuadro de diálogo, utilizando el botón de flecha hacia abajo hacemos clic en Local Disk [C:]. 9. En este cuadro de diálogo hacemos clic en el icono amarillo de la derecha y creamos un nuevo fólder al que llamaremos: LIBRO 1. ~ 4 ~

12 10. Clic en OPEN y luego SAVE, esta acción nos regresará de nuevo al cuadro de diálogo de Definición de sitio para sitio 1 y ya tenemos la carpeta de raíz local quedando de esta manera: Crear carpeta de imágenes aquí. 11. Ahora hacemos clic en el botón amarillo que está a la derecha, Carpeta predeterminada de imágenes para crear la carpeta de imágenes y en el cuadro de dialogo que aparezca. 12. Hacemos clic en el botón amarillo que está en la parte superior derecha para crear la carpeta de imágenes, hacemos clic sobre ella y escribimos el nombre Imágenes hacemos clic con el cursor fuera del archivo que acabamos de crear y luego hacemos clic nuevamente sobre este archivo y clic en OPEN. 13. Finalmente hacemos clic en el botón SAVE el cual nos regresará al cuadro de diálogo principal. 14. Hacemos clic en ACEPTAR y luego nos llevará a un pequeño cuadro de diálogo de Administrar sitios. 15. Hacemos clic en el botón LISTO. ~ 5 ~

13 Con esto hemos finalizado la creación de nuestro sitio Web local el cual podemos visualizarlo en la parte derecha de la pantalla en el Panel de archivos haciendo clic en la flechita que apunta al lado derecho, quedando de este modo: Esta es la manera correcta cómo debe quedar organizado el orden de las carpetas en el sitio Web local creado: ~ 6 ~

14 CAPITULO ORGANIGRAMA DEL SITIO WEB El organigrama del Sitio Web nos muestra la forma cómo está organizado o estructurado de manera global el Sitio Web; es decir, los niveles de jerarquía de acuerdo al contenido de cada página, teniendo como raíz la Página Índex. Veamos el diagrama: 2.2 ARQUITECTURA DE LA PAGINA WEB EN BLANCO Dreamweaver tiene una gran variedad de modelos o plantillas prediseñadas, las cuales permiten el ahorro de tiempo en realizar la preparación de la Web; sin embargo, en este libro trataré de explicarle paso a paso el desarrollo de una página en blanco empezando desde cero para que usted aprenda los suficientes detalles que permitan a su página responder a sus expectativas de negocios en la Internet y sobre todo poder optimizarla en HTML. ~ 7 ~

15 Debo recordarle, que el hecho de que una página esté llena de imágenes, videos, sonido etc. No la hace más fructífera y competitiva, por lo que siempre recomiendo elaborar una página sencilla ya que su rendimiento dependerá directamente de su optimización interna (Contenido relevante) y externa (e- Marketing). Bien, antes de empezar con la construcción de la página en blanco y colocar contenido en ella, usted debe elaborar a mano la estructura de su página principal de acuerdo al tipo de negocio y al perfil del usuario, tomando en cuenta las dimensiones que son muy importantes, considerando que no todos los cibernautas tienen los mismos monitores con las mismas resoluciones; deberá elegir el número de tablas, barras, textos, fuentes, colores, márgenes, imágenes, etc. a insertar; igualmente, use guías que le permitan diseñar páginas y colocar elementos con precisión. Existen tres modos para crear una página Web con Dreamweaver: 1. Modo estándar. 2. Modo de tablas extendidas. 3. Modo de diseño. Estas opciones las podemos visualizar yendo a la barra de menú principal, haciendo clic en Ver y eligiendo la opción modo de tabla, de estas tres modalidades, sólo estudiaremos la primera la cual es sumamente sencilla y funcional con todas las opciones necesarias para elaborar una Web de negocios. Muy profesional. Veamos la figura adjunta: ~ 8 ~

16 Esta es la estructura de la página principal a la que llamaremos Índex, empezaremos, rellenando información en todas las tablas marcadas. La página tiene un tamaño de 800 píx que es la opción más recomendable, con la cual los visitantes no tendrán ningún inconveniente. En la figura anterior tiene inicialmente, 5 filas y 3 columnas, la 1ra. Fila tiene una tabla de borde rojo, para el título de la página; la segunda fila para la barra separadora, la 3ra fila para la fecha, la 4ta. Fila tiene 3 tablas de borde rojo, una para la barra de navegación, una para el texto y una para las imágenes. 2.3 CREANDO LA PAGINA EN BLANCO 1. Vamos a la barra menú Archivo. 2. Seleccionamos la opción Nuevo. 3. En el cuadro de diálogo que aparezca, elegimos la categoría Página en blanco. 4. Hacemos clic en HTML en la lista Tipo de página. 5. Y en la lista Diseño <ninguno>. 6. Luego hacemos clic en el botón CREAR y listo. ~ 9 ~

17 Es importante recalcar que hay tres modos para crear una página Web: Modo estándar, Modo de tablas extendidas y Modo de diseño. Elegimos Modo Estándar. Vamos a la barra de menú principal, hacemos clic en Ver y elegimos la opción modo de tabla, y hacemos clic en Modo Estándar es sumamente sencilla y funcional cuya figura ya la tenemos anteriormente, con todas las opciones necesarias para elaborar un página Web de negocios. Obtendremos nuestra primera Página en blanco con el nombre Untitled- 1 que Dreamweaver le asigna por defecto, por lo tanto vamos a cambiarla de nombre. 7. Vamos al menú Archivo y seleccionamos Guardar como, buscamos en el Disco Duro [C] la Carpeta raíz local LIBRO 1 ; y en File name le asignamos el nombre index.html recomendado para la página principal, luego pulsamos el botón SAVE y en la pantalla de dialogo. 8. Observemos que la etiqueta Título contiene por defecto Documento sin título por lo que hay que asignarle uno cuidadosamente ya que éste será el que aparezca luego en los buscadores. 9. Hacemos clic en el campo de texto y escribimos nombre Aprenda Dreamweaver en ocho pasos finalmente pulsamos la tecla Enter del teclado y obtendremos la figura siguiente: Nombre del documento de la página principal. Si observamos la parte superior izquierda el nombre de la página tiene el símbolo (*), lo cual significa que el documento no ha sido guardado, por lo tanto procedemos a guardarlo. Vamos al menú Archivo, pulsamos en la opción Guardar inmediatamente el símbolo desaparece. Este mismo procedimiento se aplica a las demás páginas de la Web. ~ 10 ~

18 2.4 CREACION DE LA TABLA PRINCIPAL Como norma general, a partir de este momento, no debemos olvidar el grabar cada paso que realicemos en el diseño de las páginas, vamos a la barra de Menú Principal, hacemos clic en Archivo y otro clic en Guardar todo. Sin las tablas sería imposible crear una Web; esta herramienta es fundamental para la distribución a través de toda la página de menús, textos, imágenes, etc. Bien, de acuerdo a la arquitectura antes descrita, vamos a empezar creando la página principal a base de tablas pero antes tenemos que: ABRIR LA PAGINA index.html CREADA: 1. Corremos el programa DW, vamos a la barra de menú y hacemos clic en Archivo, luego clic en Abrir y en el cuadro de diálogo buscamos la carpeta raíz de disco duro y hacemos clic en el archivo index.html que habíamos creado. Estando abierta la página en blanco, procedemos a crear las tablas. 2. Ahora, hacemos un clic en la parte superior izquierda de la página (No olvidar de colocar primero el cursor en el lugar que se desea aparezca lo que queremos insertar. Esto es válido para todo el proceso) y en la barra de Menú Principal hacemos clic en Insertar, otro clic en Tabla, y obtendremos el cuadro de diálogo adjunto En el cual estableceremos los datos iniciales de la tabla: ~ 11 ~

19 3. Hemos considerado 5 filas y 3 columnas. 4. Ancho total de la tabla de 800 píx. 5. Grosor del borde: 0 pixs. 6. Relleno de celada: 0 7. Espacio entre celdas: 0 El grosor de borde, define el ancho de la línea del contorno que Dreamweaver pone a la tabla. El Relleno de celda, es la distancia entre los bordes de las celdas y el texto que contengan. Espacio entre celdas, es la distancia que habrá entre las celdas de la tabla. Encabezado, establece las celdas que deben resaltarse a modo de encabezado. Por ejemplo si seleccionamos Superior, la primera fila de celda mostrará el texto que se escriba en ella de modo resaltado. Texto, se escribirá un rótulo que inicialmente aparecerá sobre la tabla, podemos situarlo en otra posición mediante la lista Alinear texto. Resumen, contiene la descripción de la función que tendrá la tabla en la página. 8. Pulsamos el botón Aceptar y obtendremos la siguiente figura: 5 filas y 3 celdas. Esta es la forma original de la tabla, vemos que está alineada a la izquierda, la centramos utilizando el botón ALINEAR de la parte baja del Inspector de Propiedades. Igualmente, podemos: Ampliarla Por Fila hacia la derecha colocando el cursor en el extremo derecho de la tabla, y manteniendo presionado el botón izquierdo del ratón jalar hacia la derecha hasta el lugar deseado. En este caso no es necesario. ~ 12 ~

20 De igual forma podemos Ampliarla Por Columna hacia abajo, colocando el cursor en el extremo central inferior de la tabla, si solo es una fila y manteniendo presionado el botón izquierdo del ratón jalar hacia abajo hasta el lugar deseado. Veamos la figura adjunta: Ampliar por columna, colocar el cursor aquí y jalar hacia abajo Ampliar por fila, colocar el cursor aquí y jalar a la derecha También podemos Ampliarla Por Celda en nuestro caso tenemos 5 filas, podemos ampliar cualquiera de las celdas de la primera y la tercera filas, para ello solo basta con hacer clic en cualquiera de las celdas de las filas deseadas y luego presionamos la tecla Enter del teclado, tantas veces como sea necesario, quedando la Tabla de la manera siguiente: Ampliar o reducir la columna. Coloque el cursor aquí y cuando vea el símbolo de dos líneas paralelas y dos flechitas a la izquierda, jalar sin soltar el botón izquierdo del ratón en cualquiera de las direcciones que desee, hasta obtener las dimensiones que se muestran en la parte inferior de la celda. ~ 13 ~

21 2.5 SELECCIÓN DE CELDAS Si deseamos cambiar las características de la tabla, entonces debemos seleccionar solamente aquellas celdas que nos interesan modificar; para ello, colocamos el cursor en la tercera celda y pulsamos la tecla Tab del teclado y habremos agregado una fila más de 3 columnas; solamente para ilustrar este ejemplo: 1. Hacemos clic en una celda y, sin soltar el botón izquierdo del ratón lo arrastramos hasta la celda final que deseamos seleccionar. Vea la flecha en la figura adjunta: 2. Igualmente, colocando el puntero del ratón hasta conseguir la flecha, ligeramente por encima de la tabla hacemos clic, todas las celdas de la columna que se encuentran debajo quedarán seleccionadas, veamos la figura adjunta: ~ 14 ~

22 Para eliminar la columna indicada en la figura anterior, luego de conseguir la flecha con el cursor sobre ésta, hacemos clic en el botón derecho del ratón y en el cuadro de diálogo que aparezca hacemos clic en Cortar y la columna estará eliminada. Este procedimiento se utiliza para eliminar columnas cuantas veces se estime necesario, durante el desarrollo de todo el proyecto. Por otro lado, si se deseamos eliminar toda una tabla, incluyendo la tabla general, basta con seleccionar la tabla haciendo clic en un extremo de la misma, usamos el procedimiento anterior y listo. También hay otra manera de eliminar una tabla; seleccionamos la tabla y pulsamos la tecla Delete del teclado y eso es todo. 3. Colocando el puntero del ratón hasta conseguir la flecha, en el lado izquierdo de la tabla hacemos clic y todas las celdas de la fila que se encuentran a la derecha de ese punto quedarán seleccionadas. Tal como lo muestra la figura adjunta: 4. Para seleccionar toda la tabla, basta con hacer clic en uno de sus bordes e inmediatamente el Inspector de propiedades nos proporcionará las siguientes propiedades de la Página Principal, como lo muestra la figura siguiente: ~ 15 ~

23 2.6 PROPIEDADES DE LA TABLA GENERAL Luego de haber situado la tabla en la página, podremos utilizar los diferentes elementos del Inspector de Propiedades para Modificar o Editar sus características, cualquiera sea la celda donde nos encontremos; en caso contrario, también podremos utilizar la barra de Menú Principal, opción Modificar, seleccionando Tabla y empleando las opciones de submenú como nos muestra la figura: ~ 16 ~

24 2.7 OPCIONES DE CELDA Y EL INSPECTOR DE PROPIEDADES Si seleccionamos una celda de la tabla, el Inspector de Propiedades nos ofrece dos barras de botones, una superior y otra inferior cada una de ellas muestra dos grupos de botones, las dos primeras hileras de botones son: fuente, alineación, sangrado y viñetas; vamos a analizar la segunda barra tal como lo indica la figura: 1. El botón cuadrado con tres puntos verticales combina o convierte varias celdas seleccionadas en una sola, utilizando extensores, para ello seleccionamos previamente las celdas que deseamos combinar. 2. El botón dos C invertidas horizontalmente divide la celda en filas o columnas, para ello hacemos clic en el botón y elegimos filas o columnas a dividir y colocaremos el número de filas o columnas requeridas. 3. La opción Horiz hace el alineamiento horizontal del contenido ya sea texto, imagen, etc. de la celda a la izquierda, a la derecha o al centro, según nuestra elección en la lista. 4. Predet. Coloca el dato arriba, abajo o al centro como esté por defecto en el navegador. 5. La opción Vert hace el alineamiento horizontal del contenido ya sea texto, imagen, etc. de la celda en la parte superior, inferior o en el centro, según nuestra elección en la lista. Predet. Coloca el dato arriba, abajo o al centro como esté por defecto en el navegador. 6. Los cuadros de texto An y Al (Ancho y altura), permiten establecer el tamaño horizontal y vertical de la celda. Escribimos el número de píxeles o el porcentaje (%) para cada caso. ~ 17 ~

25 Podemos cambiar el ancho de una columna si se hace clic en una de las separaciones de dos celdas y arrastramos hasta el lugar deseado; liberando luego el botón del ratón. Podemos cambiar el alto de una fila si se hace clic en una de las separaciones de dos filas y arrastramos hasta el lugar deseado; liberando luego el botón del ratón. 1. El campo No aj (no ajustar) desactiva la función de ampliar o reducir el ancho de una columna cuando colocamos texto dentro de ella. Si activamos el campo, el ancho de la celda será fija, a menos que se amplíe o reduzca manualmente con el ratón. 2. El campo Enc (encabezado) activa la función de encabezado en las celdas seleccionadas. Esta función consiste en que se activa la negrita y el centro horizontal del texto en esas celdas automáticamente. Aprenda Dreamweaver en ocho pasos. 3. El cuadro de texto permite escribir el nombre de una imagen que rellenará el fondo de las celdas. Para realizar la misma tarea también podemos emplear el icono amarillo para seleccionar el archivo deseado. 4. El icono Fnd permite hacer los cambios de color del fondo de la celda al hacer un clic en la flechita que apunta hacia abajo del cuadradito Color de texto. Regresando al submenú Tabla, continuamos viendo otras opciones tales como: ~ 18 ~

26 1. Insertar fila. Esta opción nos permite añadir una fila a la tabla; para ello, primero debemos seleccionar una celda de la tabla; esta nueva fila se colocará justo en esa posición y las demás filas se desplazarán hacia abajo. 2. Insertar columnas. Esta opción permite añadir una columna a la tabla; para ello, primero debemos seleccionar una celda de la tabla; esta nueva columna se colocará justo en esa posición y las demás columnas se desplazarán hacia la derecha estrechándose entre sí. 3. Insertar filas o columnas. Esta opción nos ofrece el siguiente cuadro de diálogo en el cual podemos añadir más filas o columnas sobre o bajo la selección: Un método fácil y rápido para añadir o eliminar filas de la tabla es usando el Inspector de propiedades que se logra haciendo clic en cualquiera de los bordes de la Tabla; del mismo modo, podemos añadir una fila si nos situamos en la última celda de la Tabla y pulsamos la tecla Tab del teclado. 1. Eliminar fila. Esta opción permite borrar la fila de la celda que hayamos seleccionado previamente. 2. Eliminar columna. Esta opción permite eliminar columnas que hayamos seleccionado previamente. ~ 19 ~

27 2.8 OPCIONES DE LA TABLA GENERAL Como mencioné anteriormente, basta con hacer clic en cualquiera de los bordes de la tabla y ésta estará seleccionada completamente y por supuesto se activará el Inspector de Propiedades mostrándonos las opciones de cambio disponibles como lo indica la figura adjunta: 1. Los campos de texto Filas y Cols, nos permiten cambiar o editar el número de filas y columnas de la tabla. 2. El campo de texto An (ancho) nos permite cambiar o editar el tamaño de la tabla con solo escribir un valor numérico en píxeles o en porcentaje; si elegimos % la tabla tendrá un tamaño igual a la ventana del navegador (Internet Explorer por ejemplo); y, si elegimos Píxeles, la tabla tendrá un tamaño fijo independientemente del tamaño del navegador. 3. Los campos de texto Rell. Celda (relleno de celda) y Esp.celda (espacio de celda) nos permiten cambiar el relleno y el espacio de celda seleccionada. 4. La lista desplegable Alinear, nos permite alinear la tabla hacia la izquierda, derecha o al centro de la página del navegador. 5. El campo de texto Borde, nos permite elegir el ancho de las líneas del contorno de la tabla. 6. Convertir anchos de tabla en píxeles. Este botón Px convierte en píxeles el valor que hayamos colocado en el campo An. 7. Igualmente, Convertir anchos de tabla en porcentaje % convierte en porcentaje el valor que hayamos colocado en el campo An. ~ 20 ~

28 8. Los botones Borrar alto de fila y Borrar ancho de columna borran los datos que se hayan escrito en los campos Al y An respectivamente. 9. La opción Col. Fondo nos permite asignar un color a todas las celdas de la tabla excepto a las que ya tienen color. 10. La opción Im. Fondo nos permite escribir el nombre de una imagen de fondo de la tabla; otra manera de hacerlo, es utilizando el botón amarillo de la derecha con el cual podemos buscar la imagen deseada en la carpeta de imágenes. 11. La opción Col. Borde nos permite elegir el color de las líneas de todas las celdas de la tabla, excepto aquellas que ya tienen color. Después de seleccionar toda la tabla haciendo clic en uno de sus extremos, vamos al menú Modificar seleccionado tabla y aún nos quedan las siguientes opciones por estudiar: 1. Borrar alto de celda. Esta opción elimina la altura de las celdas, dejándolas con la altura estándar de las tablas determinadas por Dreamweaver. 2. Borrar ancho de celda. Esta opción elimina el ancho de las celdas, dejándolas con el ancho estándar de las tablas determinadas por Dreamweaver. 3. Convertir ancho a píxeles. Esta opción convierte los valores de ancho escritos en porcentaje a su equivalente en píxeles. 4. Convertir altos a píxeles. Esta opción convierte los valores de altura escritos en porcentaje a su equivalente en píxeles. 5. Convertir ancho a porcentaje. Esta opción convierte los valores de ancho escritos en píxeles a su equivalente en porcentaje. 6. Convertir altos a porcentaje. Esta opción convierte los valores de altura escritos en píxeles a su equivalente en porcentaje. ~ 21 ~