Aprenda Dreamweaver en Ocho Pasos

Registrado en la Biblioteca del Congreso

de los Estados Unidos de Amrica

Copyright 2012 Amado Marin.

All rights reserved.

Prohibida la reproduccin total o parcial de este libro sin previa autorizacin del autor.

PROLOGO

GANE DINERO DISEANDO SU PROPIA PAGINA DE NEGOCIOS en pocas horas

DESCUBRALO Usted Mismo!

Mi estimado amigo, si Usted ya tiene una idea, el Poder de Decisin y un Producto, lo que sigue, es disear su propia Web de Negocios; para ello, es sumamente recomendable, que disee usted mismo su sitio; as podr hacer los cambios o modificaciones a su libre albedro 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 pginas, que demanda mucho tiempo su lectura o estudiar cursos costosos por los cuales hay que invertir muchsimo dinero.

Si usted, es una de stas personas que no dispone de tiempo para la lectura, que desea aprender rpidamente, y sobre, todo desea solucionar sus problemas econmicos con prontitud, entonces el Manual "Aprenda Dreamweaver en ocho pasos" tiene las herramientas que necesita para aprender Dreamweaver fcilmente y disear su Web de negocios en unas cuantas horas sin ser experto en lenguajes de programacin. En este libro encontrar un ejemplo prctico desarrollado paso a paso, en base al cual podr disear la suya, con sus propios logotipos, texto, imgenes y dems objetos de su agrado. Descbralo usted mismo.

Objetivo principal del Libro

Es posible que no haya podido disear su pgina, porque:

1. No tiene dinero para capacitarse o para contratar un diseador. 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 solucin a la vista, pues en este manual encontrar la manera ms sencilla de cmo 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 diseo de pginas poco prcticas; sino, un experto en el uso de las herramientas necesarias e imprescindibles para disear una Web de negocios y ganar dinero online. En este Manual le ensear de manera prctica y sencilla el procedimiento de principio a fin hasta que su negocio est funcionando en la Internet.

Igualmente aprender cmo detectar los plagios de su Web, de esa

manera sabr cmo protegerse y saber quines estn copiando su trabajo para poder hacer la denuncia correspondientes. Tambin le mostrar una relacin de sitios donde debe hacer consultas si lo cree necesario.

Sencillez, Elegancia y Productividad Una pgina Web de negocios debe tener un aspecto sencillo, elegante, y

sobre todo productivo. Una Pgina bien hecha y optimizada debe poder vender sola los 365 das del ao, 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 disposicin 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 disear su pgina de negocios usted mismo.

Por otro lado, para disear Pginas 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 disearlas usted mismo para evitar tener que pagar a terceros cada vez que desea hacer un cambio, lo cual no solamente implica inversin de tiempo sino tambin mucho dinero.

"Aprenda DreamWeaver en ocho pasos", es un manual elaborado de manera acadmica y profesional que lo hace 100 % prctico y sencillo; una poderosa herramienta para que en ocho pasos disee usted mismo su pgina de negocios con el famoso y potente software usado para disear ms del 90% de las pginas de Internet. Solo tiene que descargarlo; ponerse frente a su computador y paso a paso ir disfrutando el aroma de su creacin e ingenio. NO OLVIDE! La indecisin 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 disear, editar y mantener su Pgina de Negocios en la Internet de manera sumamente sencilla.

~ 1 ~

CAPITULO 1 -------------------------------------------------------------------------------------------

1.1 INTRODUCCION

Las primeras pginas Web fueron creadas en Suiza por el CERN (Centro Europeo de Investigacin de Partculas) para comunicarse con otros cientficos europeos. En 1992 aparece el primer navegador Viola WWW para visualizar pginas 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 diseo de pginas Web, el ms representativo es Dreamweaver de la Compaa 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 programacin, ya que Dreamweaver tiene una plataforma interactiva en la cual puede alternar entre las opciones: CODIGO, si es que maneja lenguaje HTML, o bien, DISEO, 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 compaa Adobe en cualquiera de sus tiendas a nivel mundial, de acuerdo al pas 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:

http://www.adobe.com/products/dreamweaver/?promoid=BPDEC

~ 2 ~

Esta, es otra compaa que tiene buenos precios para la adquisicin de este producto, solo tiene que elegir la opcin que ms 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.

http://www.nextag.com/dreamweaver/search-

html?nxtg=2f0a24051e-77C189541F408881 Bien, una vez instalado el software, corremos el programa, lo

abrimos y comenzamos con el diseo de nuestra pgina Web de negocios; en nuestro caso vamos a desarrollar el procedimiento paso a paso de la creacin de una Pgina 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:

Barra de

insertar

Barra de

herramientass

Men principal

Ventana de trabajo

Sector de

etiquetas

Inspector de

propiedades

Panel de

archivos

Grupo de

paneles

~ 3 ~

1.4 ELEMENTOS DEL ESPACIO DE TRABAJO

Estos son los elementos del espacio de trabajo de Dreamweaver, con cuya ventana ir familiarizndose durante el desarrollo de su proyecto de diseo Web.

1. Barra de Men Principal. Como todo programa de software, muestra las

opciones generales con sus respectivos submens.

2. Barra Insertar. Tiene botones para la insercin de diversos tipos de objetos, como imgenes, tablas y otros elementos. Esta barra se activa yendo a Barra de men principal, haciendo clic en Ver, tome la opcin Barra de Herramientas y haga clic en Insertar.

3. Barra de herramientas. Tiene botones que permite ver la vista Diseo y la vista Cdigo, 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 jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido.

7. Grupos de paneles. Conjuntos de paneles relacionados y agrupados bajo un encabezado comn. Para ampliar un grupo de paneles, haga clic en la flecha de ampliacin 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 tambin proporciona acceso a todos los archivos del disco local.

~ 4 ~

1. 5 CONFIGURCION DEL SITIO WEB LOCAL

El sitio Web de Adobe Dreamweaver, es el conjunto de archivos utilizados para la creacin de las pginas Web; el trmino 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 vnculos, administrar y compartir archivos.

Para crear un sitio de Dreamweaver, slo 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 aadir datos para un sitio remoto que nos permita hacer las pruebas correspondientes antes de publicar la Tienda Virtual en la Internet. Bsicamente 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 raz 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 opcin Administrar sitios.

4. En el cuadro de dilogo que aparezca, pulsamos nuevo.

5. Hacemos clic en Sitio y esperamos un momento.

6. Aparecer otro cuadro de dilogo como Sitio sin nombre 2.

7. En vez de sitio sin nombre 2 escribimos SITIO 1.

8. Hacemos clic en el icono amarillo que est a la derecha de la Carpeta raz local y en el cuadro de dilogo, utilizando el botn de flecha hacia abajo hacemos clic en Local Disk [C:].

9. En este cuadro de dilogo hacemos clic en el icono amarillo de la derecha y creamos un nuevo flder al que llamaremos: LIBRO 1.

~ 5 ~

10. Clic en OPEN y luego SAVE, esta accin nos regresar de nuevo al cuadro de dilogo de Definicin de sitio para sitio 1 y ya tenemos la carpeta de raz local quedando de esta manera:

11. Ahora hacemos clic en el botn amarillo que est a la derecha, Carpeta predeterminada de imgenes para crear la carpeta de imgenes y en el cuadro de dialogo que aparezca.

12. Hacemos clic en el botn amarillo que est en la parte superior derecha

para crear la carpeta de imgenes, hacemos clic sobre ella y escribimos el

nombre Imgenes 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 botn SAVE el cual nos regresar al

cuadro de dilogo principal.

14. Hacemos clic en ACEPTAR y luego nos llevar a un pequeo cuadro

de dilogo de Administrar sitios. 15. Hacemos clic en el botn LISTO.

Crear carpeta de

imgenes aqu.

~ 6 ~

Con esto hemos finalizado la creacin 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 cmo debe quedar organizado el orden de las carpetas en el sitio Web local creado:

~ 7 ~

CAPITULO 2 ------------------------------------------------------------------------------------------

2.1 ORGANIGRAMA DEL SITIO WEB

El organigrama del Sitio Web nos muestra la forma cmo est

organizado o estructurado de manera global el Sitio Web; es decir, los niveles de jerarqua de acuerdo al contenido de cada pgina, teniendo como raz la Pgina ndex. Veamos el diagrama:

2.2 ARQUITECTURA DE LA PAGINA WEB EN BLANCO

Dreamweaver tiene una gran variedad de modelos o plantillas

prediseadas, las cuales permiten el ahorro de tiempo en realizar la preparacin de la Web; sin embargo, en este libro tratar de explicarle paso a paso el desarrollo de una pgina en blanco empezando desde cero para que usted aprenda los suficientes detalles que permitan a su pgina responder a sus expectativas de negocios en la Internet y sobre todo poder optimizarla en HTML.

~ 8 ~

Debo recordarle, que el hecho de que una pgina est llena de imgenes, videos, sonido etc. No la hace ms fructfera y competitiva, por lo que siempre recomiendo elaborar una pgina sencilla ya que su rendimiento depender directamente de su optimizacin interna (Contenido relevante) y externa (e- Marketing).

Bien, antes de empezar con la construccin de la pgina en blanco y colocar contenido en ella, usted debe elaborar a mano la estructura de su pgina 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 nmero de tablas, barras, textos, fuentes, colores, mrgenes, imgenes, etc. a insertar; igualmente, use guas que le permitan disear pginas y colocar elementos con precisin. Existen tres modos para crear una pgina Web con Dreamweaver:

1. Modo estndar.

2. Modo de tablas extendidas.

3. Modo de diseo.

Estas opciones las podemos visualizar yendo a la barra de men principal, haciendo clic en Ver y eligiendo la opcin modo de tabla, de estas tres modalidades, slo 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:

~ 9 ~

Esta es la estructura de la pgina principal a la que llamaremos ndex, empezaremos, rellenando informacin en todas las tablas marcadas. La pgina tiene un tamao de 800 px que es la opcin ms recomendable, con la cual los visitantes no tendrn ningn inconveniente.

En la figura anterior tiene inicialmente, 5 filas y 3 columnas, la 1ra. Fila tiene una tabla de borde rojo, para el ttulo de la pgina; 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 navegacin, una para el texto y una para las imgenes.

2.3 CREANDO LA PAGINA EN BLANCO

1. Vamos a la barra men Archivo.

2. Seleccionamos la opcin Nuevo.

3. En el cuadro de dilogo que aparezca, elegimos la categora Pgina en

blanco.

4. Hacemos clic en HTML en la lista Tipo de pgina.

5. Y en la lista Diseo .

6. Luego hacemos clic en el botn CREAR y listo.

~ 10 ~

Es importante recalcar que hay tres modos para crear una pgina Web: Modo estndar, Modo de tablas extendidas y Modo de diseo. Elegimos Modo Estndar. Vamos a la barra de men principal, hacemos clic en Ver y elegimos la opcin modo de tabla, y hacemos clic en Modo Estndar es sumamente sencilla y funcional cuya figura ya la tenemos anteriormente, con todas las opciones necesarias para elaborar un pgina Web de negocios.

Obtendremos nuestra primera Pgina 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 raz local LIBRO 1; y en File name le

asignamos el nombre index.html recomendado para la pgina

principal, luego pulsamos el botn SAVE y en la pantalla de dialogo.

8. Observemos que la etiqueta Ttulo contiene por defecto

Documento sin ttulo 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:

Si observamos la parte superior izquierda el nombre de la pgina tiene el smbolo (*), lo cual significa que el documento no ha sido guardado, por lo tanto procedemos a guardarlo. Vamos al men Archivo, pulsamos en la opcin Guardar inmediatamente el smbolo desaparece. Este mismo procedimiento se aplica a las dems pginas de la Web.

Nombre del documento de

la pgina principal.

~ 11 ~

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 diseo de las pginas, vamos a la barra de Men Principal, hacemos clic en Archivo y otro clic en Guardar todo. Sin las tablas sera imposible crear una Web; esta herramienta es fundamental para la distribucin a travs de toda la pgina de mens, textos, imgenes, etc. Bien, de acuerdo a la arquitectura antes descrita, vamos a empezar creando la pgina 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 dilogo buscamos la

carpeta raz de disco duro y hacemos clic en el archivo index.html

que habamos creado. Estando abierta la pgina en blanco,

procedemos a crear las tablas.

2. Ahora, hacemos un clic en la parte superior izquierda de la pgina (No

olvidar de colocar primero el cursor en el lugar que se desea aparezca lo que

queremos insertar. Esto es vlido para todo el proceso) y en la barra de Men

Principal hacemos clic en Insertar, otro clic en Tabla, y obtendremos

el cuadro de dilogo adjunto En el cual estableceremos los datos

iniciales de la tabla:

~ 12 ~

3. Hemos considerado 5 filas y 3 columnas. 4. Ancho total de la tabla de 800 px.

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 lnea 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 rtulo que inicialmente aparecer sobre la tabla, podemos situarlo en otra posicin mediante la lista Alinear texto. Resumen, contiene la descripcin de la funcin que tendr la tabla en la pgina.

8. Pulsamos el botn Aceptar y obtendremos la siguiente figura:

Esta es la forma original de la tabla, vemos que est alineada a la

izquierda, la centramos utilizando el botn 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 botn izquierdo del ratn jalar hacia la derecha hasta el lugar deseado. En este caso no es necesario.

5 filas y 3 celdas.

~ 13 ~

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 botn izquierdo del ratn jalar hacia abajo hasta el lugar deseado. Veamos la figura adjunta:

Tambin 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 por columna,

colocar el cursor aqu y

jalar hacia abajo

Ampliar por fila,

colocar el cursor aqu

y jalar a la derecha

Ampliar o reducir la columna. Coloque el

cursor aqu y cuando vea el smbolo de dos

lneas paralelas y dos flechitas a la

izquierda, jalar sin soltar el botn izquierdo

del ratn en cualquiera de las direcciones

que desee, hasta obtener las dimensiones

que se muestran en la parte inferior de la

celda.

~ 14 ~

2.5 SELECCIN DE CELDAS

Si deseamos cambiar las caractersticas 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 ms de 3 columnas; solamente para ilustrar este ejemplo:

1. Hacemos clic en una celda y, sin soltar el botn izquierdo del ratn lo

arrastramos hasta la celda final que deseamos seleccionar. Vea la flecha

en la figura adjunta:

2. Igualmente, colocando el puntero del ratn hasta conseguir la flecha,

ligeramente por encima de la tabla hacemos clic, todas las celdas de la

columna que se encuentran debajo quedarn seleccionadas, veamos la

figura adjunta:

~ 15 ~

Para eliminar la columna indicada en la figura anterior, luego de

conseguir la flecha con el cursor sobre sta, hacemos clic en el botn derecho del ratn y en el cuadro de dilogo 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. Tambin 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 ratn 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 quedarn 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 Pgina Principal, como lo muestra la figura

siguiente:

~ 16 ~

2.6 PROPIEDADES DE LA TABLA GENERAL

Luego de haber situado la tabla en la pgina, podremos utilizar los

diferentes elementos del Inspector de Propiedades para Modificar o Editar sus caractersticas, cualquiera sea la celda donde nos encontremos; en caso contrario, tambin podremos utilizar la barra de Men Principal, opcin Modificar, seleccionando Tabla y empleando las opciones de submen como nos muestra la figura:

~ 17 ~

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, alineacin, sangrado y vietas; vamos a analizar la segunda barra tal como lo indica la figura:

1. El botn 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 botn dos C invertidas horizontalmente divide la celda en filas o columnas, para ello hacemos clic en el botn y elegimos filas o columnas a dividir y colocaremos el nmero de filas o columnas requeridas.

3. La opcin Horiz hace el alineamiento horizontal del contenido ya sea texto, imagen, etc. de la celda a la izquierda, a la derecha o al centro, segn nuestra eleccin en la lista.

4. Predet. Coloca el dato arriba, abajo o al centro como est por defecto en el navegador.

5. La opcin Vert hace el alineamiento horizontal del contenido ya sea texto, imagen, etc. de la celda en la parte superior, inferior o en el centro, segn nuestra eleccin 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 tamao horizontal y vertical de la celda. Escribimos el nmero de pxeles o el porcentaje (%) para cada caso.

~ 18 ~

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 botn del ratn. 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 botn del ratn.

1. El campo No aj (no ajustar) desactiva la funcin 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 ample o reduzca manualmente con el ratn.

2. El campo Enc (encabezado) activa la funcin de encabezado en las

celdas seleccionadas. Esta funcin consiste en que se activa la negrita y el centro horizontal del texto en esas celdas automticamente. 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 tambin 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:

~ 19 ~

1. Insertar fila. Esta opcin nos permite aadir una fila a la tabla; para ello, primero debemos seleccionar una celda de la tabla; esta nueva fila se colocar justo en esa posicin y las dems filas se desplazarn hacia abajo.

2. Insertar columnas. Esta opcin permite aadir una columna a la

tabla; para ello, primero debemos seleccionar una celda de la tabla;

esta nueva columna se colocar justo en esa posicin y las dems

columnas se desplazarn hacia la derecha estrechndose entre s.

3. Insertar filas o columnas. Esta opcin nos ofrece el siguiente cuadro

de dilogo en el cual podemos aadir ms filas o columnas sobre o bajo la seleccin:

Un mtodo fcil y rpido para aadir 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 aadir una fila si nos situamos en la ltima celda de la Tabla y pulsamos la tecla Tab del teclado.

1. Eliminar fila. Esta opcin permite borrar la fila de la celda que hayamos seleccionado previamente.

2. Eliminar columna. Esta opcin permite eliminar columnas que

hayamos seleccionado previamente.

~ 20 ~

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 mostrndonos 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 nmero de filas y columnas de la tabla.

2. El campo de texto An (ancho) nos permite cambiar o editar el

tamao de la tabla con solo escribir un valor numrico en pxeles o en porcentaje; si elegimos % la tabla tendr un tamao igual a la ventana del navegador (Internet Explorer por ejemplo); y, si elegimos Pxeles, la tabla tendr un tamao fijo independientemente del tamao 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 pgina del navegador.

5. El campo de texto Borde, nos permite elegir el ancho de las lneas del contorno de la tabla.

6. Convertir anchos de tabla en pxeles. Este botn Px convierte

en pxeles 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.

~ 21 ~

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 opcin Col. Fondo nos permite asignar un color a todas las

celdas de la tabla excepto a las que ya tienen color.

10. La opcin Im. Fondo nos permite escribir el nombre de una imagen de fondo de la tabla; otra manera de hacerlo, es utilizando el botn amarillo de la derecha con el cual podemos buscar la imagen deseada en la carpeta de imgenes.

11. La opcin Col. Borde nos permite elegir el color de las lneas de

todas las celdas de la tabla, excepto aquellas que ya tienen color.

Despus de seleccionar toda la tabla haciendo clic en uno de sus extremos, vamos al men Modificar seleccionado tabla y an nos quedan las siguientes opciones por estudiar:

1. Borrar alto de celda. Esta opcin elimina la altura de las celdas, dejndolas con la altura estndar de las tablas determinadas por Dreamweaver.

2. Borrar ancho de celda. Esta opcin elimina el ancho de las celdas,

dejndolas con el ancho estndar de las tablas determinadas por Dreamweaver.

3. Convertir ancho a pxeles. Esta opcin convierte los valores de

ancho escritos en porcentaje a su equivalente en pxeles.

4. Convertir altos a pxeles. Esta opcin convierte los valores de altura escritos en porcentaje a su equivalente en pxeles.

5. Convertir ancho a porcentaje. Esta opcin convierte los valores de

ancho escritos en pxeles a su equivalente en porcentaje.

6. Convertir altos a porcentaje. Esta opcin convierte los valores de altura escritos en pxeles a su equivalente en porcentaje.

~ 22 ~

2.9 PROPIEDADES DE LA PAGINA USANDO MENU

Es muy importante diferenciar entre Propiedades de la tabla y

Propiedades de la pgina, veamos esta ltima en la cual tomaremos las opciones ms importantes que nos interesan; suponiendo que las celdas de nuestra tabla tienen el color blanco, vamos a darle color amarillo al fondo que est detrs de la tabla que nos muestra el navegador.

2. 9.1 DANDO COLOR AL FONDO DE LA PAGINA

1. Vamos a la barra de men y hacemos clic en Modificar.

2. Luego clic en Propiedades de la pgina.

3. Elegimos la categora Aspecto y luego seleccionamos el color amarillo en el botn Color de Fondo y, finalmente hacemos clic en Aceptar. Del mismo modo podemos elegir imagen de fondo usando el botn Examinar de esta barra Imagen de fondo.

2.9.2 CONFIGURANDO LOS VINCULOS DE NAVEGACION

1. Vamos a la barra de men y hacemos clic en Modificar. Luego clic en Propiedades de la pgina y obtenemos el siguiente cuadro de dilogo:

2. Elegimos la categora Vnculos y luego Estilo de subrayado, hacemos clic en la flechita que apunta hacia abajo y elegimos Siempre subrayado, hacemos clic en Aceptar y ya est.

~ 23 ~

CAPITULO 3 ------------------------------------------------------------------------------------

O 3

3. 1 INSERTANDO IMAGENES

Las imgenes suelen darle un entorno agradable a toda pgina

Web, estas imgenes tienen formatos: GIF, o JPEG que son de buena calidad y ocupan poco espacio en el disco duro y sobre todo permiten ahorro de tiempo en la transferencia de descarga a un navegador.

Es recomendable que guarde todas las imgenes que va utilizar, en la Carpeta de Imgenes creada en su sitio Web del disco duro, para luego ir insertndolas en la pgina, en caso que no las tuviera, puede descargarlas de la Internet, a menos que las disee usted mismo con otros programas; si ese no es su caso, le sugiero que para el Fondo del Ttulo Nombre de su negocio, puede descargar fotos panormicas y luego editarlas de compaas que las ofrecen gratuitamente; para entrar a una de ellas puede hacer clic en: http://images.google.com/images?hl=en&q=panoramic+images&btnG=Search+Images&gbv=2 Considerando que ya tiene los conocimientos preliminares, as como el diseo y estructura de su pgina, lo que le queda es empezar a rellenarla paso a Paso, sin olvidar los pasos y procedimientos estudiados anteriormente:

3.1.1 INSERTANDO IMAGE 1 LOGOTIPO

1. Hacemos clic para colocar el cursor en la primera celda superior izquierda.

2. En la barra de men principal hacemos clic en Insertar.

3. Luego clic en Imagen y obtendremos el siguiente cuadro de dilogo:

~ 24 ~

4. Hacemos doble clic en la Capeta Raz del sitio LIBRO 1 y tendremos la Sub- Carpeta Imgenes.

5. Luego hacemos doble clic sobre ella y obtendremos la imagen deseada:

IMAGENES/logotipo.jpg, nuevamente hacemos doble clic sobre ella.

7. Le damos un nombre en el Texto alternativo; la Descripcin es opcional y finalmente hacemos clic en Aceptar.

8. Hacemos clic en la imagen y en el Inspector de propiedades la configuramos:

9. An: 115 px y Al: 115 px, centramos la imagen con la opcin central de este botn Alinear al centro.

10. Hacemos clic fuera de la Tabla, para que la imagen se reubique automticamente en el lugar deseado, quedando finalmente de esta manera:

~ 25 ~

A partir de este momento, cada vez que insertamos un objeto, si as lo deseamos, debemos verificar la vista de nuestra pgina con cada uno de los ms importantes navegadores a nivel mundial (Explorer, Firefox, etc); para ello, vamos a la Barra de Herramientas, hacemos clic en el botn Vista Previa, luego clic en Vista previa en el navegador, o pulsamos las teclas Ctrl.+Alt+F12 del teclado.

3.1.2 INSERTANDO IMAGE 2 ANIMADA

Para insertar la imagen 2Animada o cualquier otra, primero tenemos que:

1. Colocar el cursor en la 3ra.celda de la 1ra fila.

2. En el Inspector de Propiedades, en la Barra de Celda lo configuramos como:

3. Alineado al centro: Horizontal.

4. Centro y Vertical: Medio.


~ 26 ~

6. Luego clic en Imagen y obtendremos el siguiente cuadro de dilogo:

7. Hacemos doble clic en la Capeta Raz del sitio LIBRO 1 y tendremos

la Sub-Carpeta Imgenes, luego hacemos doble clic sobre ella y obtendremos la imagen deseada: IMAGENES/Libro animado, nuevamente hacemos doble clic sobre ella y en el cuadro de dilogo que aparezca.

8. Le damos un nombre en el Texto alternativo; la Descripcin es

opcional y finalmente hacemos clic en Aceptar.

9. Hacemos clic en la imagen y en el Inspector de propiedades la configuramos:

10. An: 90 px, Al: 80 px.

11. Centramos la imagen con la opcin central de este botn Alinear al

centro y hacemos clic fuera de la Tabla, para que la imagen se reubique automticamente en el lugar deseado.

~ 27 ~

12. Hacemos clic fuera de la Imagen Book dentro de la misma celda y colocamos un fondo de color negro usando este botn Fnd (fondo). Igualmente se puede colocar de fondo una imagen usando el botn Im Fondo (imagen de fondo) quedando finalmente de esta manera:

Observe que las imgenes estn centradas, en todo caso, puede elegir la opcin que ms le convenga: Izquierda, Derecha o Centro.

3.1.3 INSERTANDO IMAGE 3 SEPARACION

Vamos a insertar una imagen de separacin entre el ttulo y el cuerpo de texto de la pgina: Primero vamos a juntar las 3 celdas de la primera fila:

1. Colocamos el cursor en la primera celda y sin soltar el botn derecho del Mouse, jalamos hacia la derecha hasta la tercera celda:

~ 28 ~

2. Vamos al Inspector de Propiedades y hacemos clic en el botn Cuadrado con tres puntos verticales, usando este extensor se convierte en una sola celda.

3. Hacemos clic en la nueva celda y centramos el cursor con el

procedimiento anteriormente explicado.


Luego clic en Imagen y seguimos el mismo procedimiento que utilizamos para insertar las imgenes anteriores; en este caso, la imagen que buscamos es IMAGENES/imagen de separacin.jpg. Como podemos ver las dimensiones de la imagen de separacin son:

An: 800 pixs, que es el ancho total de la tabla en pxs.

Al: 13 pixs. Alineamos a la parte superior usando este botn y hacemos clic fuera de la Tabla, para que la imagen se reubique automticamente en el lugar deseado, quedando finalmente de esta manera:

3.1.4 INSERTANDO IMAGE 4 LIBRO DW CS3

Para insertar la imagen 4 Libro DW, primero vamos a crear una tabla que nos permita insertar tantas imgenes como queramos; veamos:

1. Con un clic colocamos el cursor centrado en la tercera celda de la cuarta fila y en el inspector de propiedades de la parte baja en la barra de celda, configuramos el cursor as:

2. Horizontal: Centro.

~ 29 ~

3. Vertical: Superior.

4. Vamos a la barra de men principal, elegimos Insertar, hacemos clic en Tabla y configuramos la tabla en el cuadro de dilogo que aparezca.

5. Respetamos la configuracin que aparece en el cuadro de dilogo,

hacemos clic en el botn Aceptar.

6. Ahora, haciendo clic en el borde derecho de esta tabla, vamos a configurar los bordes en el Inspector de Propiedades as:

1. Rell. Celda: 2

2. Esp. Celda: 2

3. Borde: 1

Colocamos el curso en el punto donde seala la flecha y jalamos hacia abajo para ampliar la nueva tabla tanto como deseemos, usando el mismo procedimiento que ya hemos estudiado. Sin embargo, debo aclarar, que para insertar un objeto no es necesario este procedimiento, ya que la imagen insertada automticamente ampla la celda de acuerdo a su tamao. Antes de insertar la imagen LIBRO DW CS3, vamos a crear un ttulo como encabezado; veamos el procedimiento siguiente:

~ 30 ~

1. Colocamos el cursor centrado en la primera celda de la primera fila de la tabla creada y escribimos: Mis Libros y en el Inspector de Propiedades, hacemos la siguiente configuracin:

2. Formato: Ninguno.

3. Fuente: Arial.

4. Tam: 14

5. Color: blanco (#FFFFFF).

6. Centrado: Alineado al centro.

7. Fnd: #666633

Ahora, vamos a insertar la Imagen LIBRO DW CS3: (o una imagen a eleccin).

1. Colocamos el cursor centrado en la celda de la segunda fila de la Tabla

creada, debajo del encabezado de imgenes MIS LIBROS.

2. Vamos al barra de men principal y elegimos Insertar.

~ 31 ~

3. Hacemos clic en Imagen y seguimos el mismo procedimiento utilizado anteriormente para insertar imgenes, y finalmente elegimos de la carpeta imgenes.

4. IMAGENES/Libro DW CS3.JPG y en el Inspector de Propiedades

configuramos sus dimensiones:

5. An: 100 pixeles.

6. Al:150 pixs a eleccin y hacemos clic fuera de la Tabla, para que la imagen se reubique automticamente en el lugar deseado, quedando finalmente de esta manera:

7. Hacemos clic en el lado izquierdo fuera de la imagen LIBRO DW

CS3 y pulsamos Enter en el teclado para crear un espacio en la parte superior y all escribimos el nombre del libro Aprenda Dreamweaver en ocho pasos

8. Finalmente, hacemos clic fuera de la Tabla General para que la imagen

tome automticamente su ubicacin deseada.

~ 32 ~

CAPITULO 4 --------------------------------------------------------------------------------------

Con el objeto de contar con Captura de pantallas pequeas para la lecciones siguientes voy obviar temporalmente la figura nmero 4 Libro DW. Continuando con el relleno de la Pgina, ahora vamos preparar el texto en las diferentes celdas de la Tabla de la Pgina Web. Veamos:

4.1 PREPARANDO EL TITULO DE LA PAGINA

1. Para colocar el ttulo de la pgina, primero tenemos que colocar el cursor en la 2da.celda de la 1ra fila y en el Inspector de Propiedades, en la Barra de Celda lo configuramos como alineado as:

2. Horizontal: Izquierda.

3. Vertical: Medio:

4. Luego insertamos una Tabla de 2 filas y una sola celda con el procedimiento ya conocido:

5. Pulsamos el botn Aceptar que tienen todas las ventanas.

6. Colocamos el cursor centrado dentro la primera fila y escribimos

Aprenda DreamWeaver y en la segunda fila el texto EN OCHO PASOS Seleccionamos todo el texto.

7. En el inspector de propiedades de la parte baja lo

configuramos en la Barra de Texto el modo de cmo ir dentro de la celda:


9. Fuente: Geneva (Puede elegir la que desee).

10. Estilo: 525 o ninguno.

~ 33 ~

11. Tamao: 24

12. Letra: Color Negro (#000000) quedando de esta manera:

4.2 INSERTANDO EL FONDO DEL TITULO

Para insertar el fondo del Ttulo, primero, hacemos un clic fuera

de la tabla del Ttulo dentro de la celda en la cual est ubicada la tabla de texto; veamos el procedimiento en el Inspector de Propiedades utilizando solamente la Barra de Celda:

1. Hacemos clic en el smbolo y buscamos la imagen IMAGENES/Fondo de ttulo.jpg que se encuentra en la Carpeta de Imgenes, usando el mismo procedimiento usado para insertar una imagen; luego, hacemos doble clic sobre ella y listo.

~ 34 ~

Nota: Si acaso no tuviera fondos diseados; en la Internet hay muchsimas pginas de donde puede descargar Imgenes panormicas gratuitas las cuales se adaptan para estos trabajos y puede editarlas a su libre albedro.

4.3 EDITANDO EL TEXTO DEL TITULO

Habiendo insertado el fondo del ttulo, ahora tenemos que editar el texto para que adquiera la apariencia deseada:

1. Seleccionamos todo el texto del Ttulo y al activarse el Inspector de Propiedades, cambiamos el color negro usando este botn Color de texto por el color blanco.

2. Hacemos clic en el borde derecho de la tabla del Ttulo y con el

procedimiento ya estudiado, reducimos su tamao y alineamos hacia la Izquierda utilizando la opcin Alinear y usando la flechita que apunta hacia abajo, seleccionamos Centro

4. 4 INSERTANDO LA FECHA

1. Colocamos el cursor haciendo clic en la tercera celda de la tercera fila, vamos a la barra del men principal hacemos clic en Insertar y seleccionamos Fecha.

2. En el cuadro de dilogo que aparezca elegimos el formato de

fecha deseado y activamos la casilla Actualizar automticamente al guardar. Veamos el siguiente cuadro de dilogo:

~ 35 ~

3. Finalmente pulsamos aceptar y obtendremos lo siguiente: Enero

01,2011.

4. Ahora, vamos a editar el texto, para ello sin hacer clic, colocamos el puntero del ratn encima del texto seleccionado de color negro y hacemos clic en el botn derecho del ratn, Vamos a la Barra de Men Principal, hacemos clic en Texto. Y en el cuadro de dilogo:

5. Elegimos Formato de Prrafo.

6. Hacemos clic en Encabezado 5.

7. Vamos a alinear al centro todo el texto, para ello sin hacer clic,

colocamos nuevamente el puntero del ratn encima del texto seleccionado de color negro y hacemos clic en el botn derecho del ratn.

8. Elegimos Alinear.

9. Hacemos clic en Centro y finalmente el texto de la Fecha quedar

centrado.

10. Para editar o cambiar su configuracin, colocamos el cursor fuera del texto hacia el lado derecho dentro de la misma celda, y sin soltar el botn izquierdo del ratn, jalamos hacia la izquierda, hasta que el texto quede totalmente seleccionado, en ese instante el Inspector de Propiedades se activar y podremos hacer todos los cambios que estimemos convenientes.

Para eliminar el texto basta con seleccionarlo y pulsar la tecla Delete

del teclado. Si deseamos recuperarlo, pulsamos las teclas Ctrl. + Z.

~ 36 ~

CAPITULO 5 ---------------------------------------------------------------------------------------

5. 1 INSERTANDO BARRA DE NAVEGACION

Vamos a crear la barra de navegacin, la cual es muy parecida a la barra

de herramientas, con botones sencillos, en los cuales al hacer un clic nos transportaremos a otras pginas Web dentro o fuera de la nuestra. La barra de Centrar Texto en la celda navegacin puede crearse en cualquier parte de la pgina, nosotros vamos a elegir una Barra de Navegacin de solamente 2 botones:Principal y Contacto, veamos:

1. Colocamos el cursor en la primera celda de la 4ta. Fila y en el Inspector de Propiedades configuramos el cursor para que la tabla est centrada al insertarla:

2. Horiz: Centro.

3. Vert: Superior.

4. Utilizando el procedimiento de Insertar Tabla, ya estudiado,

insertamos una tabla de 2 filas y una columna.

5. Hacemos clic en uno de sus extremos para seleccionarla y en el Inspector de Propiedades la configuramos Rell de celda 1, espacio de celda 2 o como lo desee ver en la figura:

~ 37 ~

5. 2 INSERTANDO BOTONES DE NAVEGACION

Si configuramos una barra de navegacin ms compleja, con botones

flash por ejemplo, que obviamente le da ms belleza y colorido a la barra, es posible que muchsimos cibernautas tengan problemas de visualizacin en el momento en que ingresan a nuestra pgina, por no poseer los plugin correspondientes. Es por eso, que vamos a configurar esta barra usando el siguiente mtodo de Navegacin muy sencillo con el cual ningn cliente que nos visite tenga este tipo de problemas:

1. Hacemos un clic colocando el cursor centrado en la Primera celda de la primera fila de la tabla de navegacin insertada.

2. Escribimos el texto Principal al que configuraremos como

nuestro primer botn.

3. Hacemos un clic colocando el cursor centrado en la Segunda celda de la segunda fila de la tabla insertada.

4. Escribimos el texto Contacto al que configuraremos como

nuestro segundo botn.

5. Seleccionamos el texto de ambas celdas, colocando el cursor en la primera celda y sin soltar el botn izquierdo del ratn jalamos hacia abajo hasta la segunda celda de la segunda fila, y en el Inspector de Propiedades configuramos el texto de este modo:


7. Fuente: Arial.

8. Estilo: 4

9. Negrita: (B).

10. Centrado: usando el botn Alinear al centro.

11. Tamao: 12 y obtendremos el cuadro de dilogo siguiente:

~ 38 ~

5. 3 CREANDO ENCABEZADO DE TEXTO

Para esta tarea utilizaremos la 5ta. Fila, y como siempre primero,

configuraremos el cursor de este modo: Colocamos el cursor centrado en la 2da. celda de la 5ta. fila y en el Inspector de Propiedades lo configuramos alineado al centro, as:

Insertamos una tabla de 2 filas y una columna usando el procedimiento ya descrito:

~ 39 ~

1. Vamos a la Barra de Men Principal: Hacemos clic en Insertar, clic en Tabla y otro clic en el botn Aceptar y la nueva tabla est lista.

2. Hacemos clic en el borde derecho de la tabla para seleccionarla, en

el Inspector de Propiedades la configuramos.

3. Hacemos clic en la primera celda de la primera fila con el cursor centrado y escribimos el texto del encabezado, quedando configurado de esta forma:


5. Fuente: Arial.

6. Estilo: Estilo 175

7. Alineado: Central.

8. Tamao: 18

9. Color del texto: Color Rojo, B (Bold).

5. 4 CREANDOCUERPO DE TEXTO

Para esta tarea utilizaremos la celda de la 2da. fila debajo del

Encabezado; para ello, hacemos un clic y colocamos el cursor en dicha celda y lo centramos como hicimos anteriormente en el Encabezado utilizando el Inspector de Propiedades en la Barra de texto, quedando as:

~ 40 ~

Pulsamos Enter en el teclado, para darle un espacio ms abajo y

escribimos el texto deseado de manera continuada; al final del prrafo pulsamos nuevamente Enter en el teclado para darle un espacio de separacin del prximo prrafo; luego, seleccionamos todo el texto y en el Inspector de Propiedades lo configuramos de acuerdo a nuestras preferencias, usando el mtodo ya conocido, quedando de este modo:

5. 5 CORRECCION ORTOGRAFICA

Considerando que una pgina Web, es un documento de acceso

pblico, debe evitarse las fallas ortogrficas. Para ello, hacemos clic y colocamos el cursor al principio de todo el texto y luego:

1. En la barra de Men Principal, hacemos clic en Texto: Luego hacemos clic en la opcin Ortografa o bien, pulsando las teclas Maysculas (Shift) + F7 del teclado y en el cuadro de dilogo que aparezca podremos omitir o cambiar las opciones de las palabras que deseamos corregir.

~ 41 ~

5. 6 INSERTANDO TABLA PARA DESCARGA DIGITAL

Para insertar esta tabla, necesitamos primero insertar una fila; para ello:

1. Colocamos el cursor centrado con el procedimiento ya conocido; al

final del cuerpo de texto y pulsamos la tecla Tab del teclado y ya tenemos una fila ms. Hacemos Enter en el teclado para incrementar un espacio y vamos a la barra de men principal y como siempre, hacemos clic en Insertar, otro clic en Tabla y en el cuadro de dilogo que aparezca, configuramos una tabla de una fila y dos columnas.

2. Colocamos el cursor centrado en la primera celda de la fila y

escribimos: El costo de este manual es de $ 99.95 USD pero puede adquirirlo al precio de promocin por tiempo limitado de solamente $ 49.95 USD.

3. Seleccionamos todo el texto, y en el Inspector de Propiedades

hacemos la configuracin del texto que ms nos convenga, haciendo uso del mismo procedimiento, ya explicado anteriormente, quedando de este modo:

4. En este paso, insertaremos el botn Comprar ahora. Este es el

botn ms importante de la pgina en el cual nuestros clientes

harn clic para comprar y es proporcionado por la Compaa que

va a ejecutar los cobros por las ventas de nuestro producto;

~ 42 ~

en mi caso, PayPal, con la cual tengo mi cuenta de negocios me

proporcion el cdigo HTML del botn que he copiado en mi

pgina Index.html (Pgina principal).

5. De hecho, podemos insertar este botn en cualquier lugar dentro de la pgina en modo CODIGO haciendo uso del mtodo Copiar y pegar.

6. Insertamos la figura tarjetas de pago, que se halla en la Carpeta

IMGENES con el mtodo de insertar imagen, ya estudiado.

7. En la segunda celda de la derecha de esta tabla, centramos el cursor e insertamos la imagen Libro DW que es en este caso el producto que vamos a vender, conservando siempre la configuracin que nos muestra el Inspector de Propiedades:

Las tcnicas y procedimientos para insertar botones de compra, difieren de una compaa a otra, por lo que es muy importante cuando se abre una cuenta de negocios, comprender bien sus herramientas y utilitarios para evitar equivocaciones; no obstante, no hay por qu preocuparse ya que cuentan con un buen Soporte Tcnico para asistirnos con nuestros requerimientos.

~ 43 ~

5. 7 INSERTANDO COPYRIGHT

Antes De insertar el Copyright, primero:

1. Colocamos el cursor en la celda de la ltima fila de la Tabla

General y pulsamos la tecla Tab y obtendremos una fila ms.

2. Colocamos el cursor en la primera celda de esta nueva tabla y con el botn izquierdo del ratn seleccionamos y jalamos hasta la tercera celda de la derecha y en el Inspector de Propiedades; hacemos clic en el botn de extensores cuadrado con tres puntitos verticales, convertimos en una sola fila las tres celdas.

3. Colocamos el cursor centrado en la celda de esta fila.

4. Vamos a la barra de Men Principal hacemos clic en Insertar.

5. Seleccionamos HTML, luego Caracteres especiales.

6. Hacemos clic en Copyright y en el lado izquierdo del smbolo

escribimos la palabra Copyright y al lado derecho del smbolo dejando un espacio, escribimos el nombre del autor por ejemplo el mo Amado Marn seguido del ttulo del libro Aprenda Dreamweaver en ocho pasos y en el Inspector de Propiedades configuramos el texto de acuerdo a nuestras exigencias.

7. Colocamos nuevamente el cursor al final del texto del Copyright y

pulsamos la tecla Tab del teclado y hemos creado una nueva fila, donde escribiremos Prohibida la reproduccin total o parcial de esta informacin sin autorizacin escrita del propietario, usando la misma configuracin empleada para el texto anterior, quedando de esta manera:

~ 44 ~

Para eliminar el Copyright, basta con seleccionar todo el texto y

hacer clic en la tecla Delete del teclado. Habiendo finalizado el diseo de la Pgina Principal Index, veremos a continuacin el procedimiento para disear las dems pginas que dependen de ella.

Antes de continuar con el desarrollo de tutorial, quiero dejar en

claro que es sumamente importante, poner en relevancia este acpite:

PROTECCION DEL DERECHO INTELECTUAL

Para iniciar un negocio, o para poner en prctica nuestras ideas plasmadas en obras de cualquier ndole es imprescindible conocer nuestros derechos y las Normas Legales que las respaldan; en ese sentido la oficina de Derechos de autor de La Biblioteca del Congreso de los Estados Unidos proporciona informacin completa y detallada del procedimiento para la registracin de obras originales incluyndose obras literarias, dramticas, cinticas, musicales, artsticas e intelectuales (Sitios Web). Esta proteccin est disponible, tanto para obras publicadas como para aquellas que an no se han publicado. La Oficina est ubicada en:

U.S. Copyright Office 101 Independence Avenue SE Washington, DC 20559-6000

(202) 707-3000

Los formularios pueden conseguirse gratuitamente en el sitio Web de la Oficina del Derecho de Autor: www.copyright.gov. Tambin hay informacin en espaol en: www.copyright.gov/espanol, o llamando personalmente al telfono: (202) 707-3000.

~ 45 ~

CAPITULO 6 ---------------------------------------------------------------------------------------

6.1 CREANDOPLANTILLAS

Teniendo en cuenta, que este diseo es una pgina de negocio de

un libro electrnico que nos est sirviendo de ejemplo para este curso; es necesario elaborar un documento llamado formulario de pago, donde el cliente anota todos sus datos para llevar a cabo esta transaccin comercial y finalmente descargar el producto inmediatamente despus de realizado su pago.

Para disear un formulario de pago, primero tenemos que crear una pgina nueva que lleve el nombre: Formulario de Pago, para ello, como ya tenemos la pgina ndex vamos a utilizarla como Plantilla para elaborar nuestra nueva pgina.

Una Plantilla, es un documento que sirve de base para la creacin de otros documentos que utilizarn el mismo diseo y estructura; en este caso, tenemos que crear una plantilla en la que dejemos como fijos: El Encabezamiento, el Pie de pgina, el Men de la izquierda y el men de la derecha, sealando como "Regin Editable" la parte central que nos permita aadir otro tipo de contenido en cada una de las pginas nuevas.

Por otro lado cada vez que editamos una plantilla, tenemos que

actualizarla para que automticamente se actualicen cada una de las dems pginas que dependan de ella; por supuesto, tras cualquier actualizacin tenemos que subir o cargar las Pginas modificadas al Servidor Remoto.

1. Abrimos la pgina Index.html que es nuestra pgina principal, luego hacemos clic en el extremo de la Tabla del cuerpo de Texto para seleccionarla.

2. Vamos a la Barra de Insertar, hacemos clic en Comn, clic en el

botn Plantillas de la barra de conos.

3. Hacemos clic en Regin Editable y en el cuadro de dilogo que aparezca, escribiremos Regin Editable 1; veamos:

~ 46 ~

4. Hacemos clic en Aceptar y obtendremos la siguiente ilustracin:

5. Luego, vamos a la Barra de men Principal, hacemos clic en Archivo.

6. Clic en la opcin Guardar como plantilla, en el cuadro de dilogo le damos el nombre de Plantilla 1.

7. Hacemos clic en el botn Guardar y en el cuadro de dilogo que

aparezca, hacemos clic en Yes para actualizar los vnculos y ya tenemos la plantilla con la cual disearemos la pgina Contacto.

6.2 CREANDO PAGINA FORMULARIO CONTACTO

En este paso, vamos a crear un Formulario de Contacto para lo cual

se requiere la creacin de un mnimo de 3 pginas:

1. Pgina Formulario en lenguaje HTML.

2. Pgina Enviar en lenguaje PHP.

3. Pgina Gracias en lenguaje HTML.

Vamos a crear como siempre el Formulario en Modo Diseo, DreamWeaver se encargar de general el cdigo HTML correspondiente, en el que al final vamos a hacer un pequeo agregado, que lo vamos a ver ms adelante, Veamos:

~ 47 ~

1. Vamos a la barra de Men Principal, hacemos clic en Abrir, en la

Carpeta Raz LIBRO 1, buscamos la carpeta Templates creada por Dreamweaver, hacemos doble clic, abrimos Plantilla 1.

2. Eliminamos la tabla central de la regin editable, para ello hacemos

clic en el extremo derecho de esta tabla para seleccionarla:

3. Luego Pulsamos la tecla Delete del teclado, le ponemos por ttulo Formulario de Consulta, vamos a la Barra de men Principal, hacemos clic en Archivo y finalmente en Guardar y ya est.

4. Como siempre; colocamos el cursor centrado en la Regin Editable

de color celeste e insertamos una tabla de 1 fila y 1 columna haciendo uso del mtodo de Insertar Tabla , ya estudiado.

5. Colocamos el cursor centrado dentro de la fila y escribiremos: Si

tiene alguna consulta, por favor llene este formulario y nos comunicaremos con usted tan pronto como sea posible, luego hacemos un clic en la tecla Enter del teclado; vamos a la Barra de Men principal, hacemos clic en Insertar, elegimos la opcin Formulario.

6. Hacemos clic en Formulario y obtendremos la siguiente pantalla

que est en la opcin Diseo:

7. Habiendo colocado el cursor dentro del formulario, en la Barra de herramientas hacemos clic en Cdigo, y en el lenguaje HTML, abrimos las etiquetas del Formulario:

~ 48 ~

Primero marcando

~ 49 ~

12. Hacemos clic en Botn , luego Aceptar, en el cuadro de dilogo

que aparezca no rellenamos nada; hacemos clic en, luego en el botn Enviar y obtendremos:

13. Cambiamos el nombre del botn y el Valor por Enviar Formulario, cuya accin es Enviar el formulario con todos los datos inmersos en l. Queda claro que tambin modificar el formato insertando fondo, modificando tamao y tipo de letras, alineamiento, etc. a nuestra libre eleccin.

6.3 VALIDANDO EL FORMULARIO CONTACTO

Validar un formulario, significa comprobar que todos los datos que

escribe el usuario dentro de l son los correctos. Para que este tipo de comportamiento, funcione correctamente, debemos aplicarlo a cada uno de los elementos del formulario que deseamos comprobar:

1. Abrimos la pgina Contacto. Hacemos clic en el botn Enviar

Fromulario. Vamos al Men Principal, hacemos clic en Ventana.

~ 50 ~

2. Hacemos clic en Inspector de etiquetas, Comportamientos, otro clic en el smbolo o botn + y en el cuadro de dilogo que aparezca, hacemos clic en Validar formulario y obtendremos la siguiente ventana:

3. Para validar hacemos clic en el primer campo de texto cuyo ID es Nombre, colocamos un chec en Valor, para activar la opcin Obligatorio, con el objeto de que el usuario no pueda dejar vaco el campo de texto del elemento Nombre. De igual manera, aplicaremos estos comportamientos a los dems elementos del formulario teniendo en cuenta su naturaleza:

4. Cualquier cosa: Permitir que un usuario escriba cualquier dato.

5. Direccin de correo electrnico: Obligar al usuario escribir

solamente la direccin de un correo electrnico.

6. Nmero: Obligar al usuario a escribir solamente nmeros.

7. Nmero del al: Obligar al usuario a escribir un nmero dentro de un rango determinado.

En nuestro ejemplo, asignamos un valor: obligatorio y aceptar: Cualquier cosa; luego hacemos clic en Aceptar y obtendremos el siguiente cuadro de dilogo:

~ 51 ~

8. Este mismo procedimiento utilizaremos para validar todos los dems campos de texto uno por uno ms el rea de texto para Mensaje, teniendo en cuenta que si es un nmero, como por ejemplo para Telfono le daremos ese comportamiento o si es un Email de igual manera.

6.4 VERIFICANDO COMPORTAMIENTOS DEL FORMULARIO

Para verificar si estos comportamientos funcionan correctamente,

abrimos la pgina Contacto, en la Barra de Herramientas, hacemos clic en Vista Previa.

1. Hacemos clic en Internet Explorer o Firefox que son los navegadores ms utilizados en el mundo y veremos la pgina del mismo modo como la veran los cibernautas. Supongamos que escribieran en el campo Telfono los datos X7512M entonces la veramos as:

~ 52 ~

2. Habiendo hecho esta simulacin de ingreso de datos en los campos

indicados, hacemos clic en el botn y el navegador nos responder

de la siguiente manera:

Este es el Cuadro de dilogo de Respuesta en el que se nos notifica que hay un error y que se debe ingresar nuevamente el dato de manera correcta. Este Mensaje es programado en Lenguaje JavaScript por Dreamweaver CS3. Ahora lo nico que nos resta hacer, es cambiar este mensaje del Ingls al Espaol, porque nuestra pgina est hecha en este idioma. Veamos:

1. Estando abierta la pgina Contacto, vamos a la Barra de Herramientas.

2. Hacemos clic en el botn Cdigo y obtendremos la siguiente

pantalla HTML y dentro de l, el cdigo de respuesta de errores a los datos ingresados en nuestro formulario escritos en JavaScript por Dreamweaver CS3:

~ 53 ~

3. En esta pantalla, tal como est indicado, borramos el texto en ingls y lo reemplazamos manualmente por las frases mostradas en espaol que estn dentro de las flechas, hacemos clic en Actualizar y listo.

4. Vamos a la Barra de Herramientas y hacemos clic en Diseo

para retornar a la pgina del formulario.

5. Nuevamente Vamos a la Barra de Herramientas, hacemos clic en Vista previa en Internet Explorer, si acaso tuvisemos este mensaje en la parte superior de la pgina, tenemos que desbloquearla haciendo clic en la opcin Allow blocked content del cuadrito de dilogo que aparezca.

6. Luego, veremos nuevamente la pgina del mismo modo como la

vern los cibernautas. Supongamos que escribieran en el campo

Telfono los mismos datos X7512M entonces, hacemos clic en

el botn Enviar Formulario y el navegador nos mostrar en

espaol el siguiente mensaje: Los siguientes errores han ocurrido, telfono

debe contener un nmero.

DreamWeaver CS3 durante el proceso de validacin genera este Script con el objeto de evitar que los cibernautas enven formularios vacos y por consiguiente nuestra Base de Datos en el Servidor se llene de mensajes en blanco.

6.5 CREANDO PAGINA ENVIAR.PHP

Despus de haber finalizado la creacin y validacin de la pgina

Contacto y antes de crear la pgina Enviar.php, vamos a vincular ambas pginas para que realicen un trabajo conjunto:

1. Abrimos la pgina Contacto normalmente en modo Diseo. Hacemos clic en el botn Cdigo y en la frase action="">, dentro de las comillas escribimos enviar.phpcon letras minsculas. Veamos la figura siguiente:

~ 54 ~

Aunque el objeto de este libro no es estudiar lenguaje PHP; sin

embargo, para que nuestro formulario de Contacto desempee su labor dentro de nuestra Pgina Web de negocios, es importante contar con este cdigo especfico; de esta manera nuestros clientes pueden hacer consultas desde nuestro sitio sobre nuestro producto sin ninguna dificultad.

2. Vamos a la Barra de Men Principal, hacemos clic en Nuevo y

en el cuadro de dilogo que aparezca elegimos, elegimos Pgina en blanco luego HTML, y finalmente hacemos clic Crear y obteniendo una pantalla en blanco:

3. Hacemos clic en modo Cdigo y en la pantalla que obtengamos

primero borramos todo el cdigo HTML existente y copiamos el siguiente archivo enviar.php:

~ 55 ~

4. En esta pantalla cambiamos [email protected] por el

Email personal o del Negocio, al cual deseamos que lleguen los mensajes de nuestros clientes, por ejemplo:

[email protected].

5. Hacemos clic en el botn Actualizar y listo. Cambiamos el ttulo del documento por Enviar, vamos a la Barra de Men Principal, hacemos clic en Guardar cmo, y en el cuadro de dilogo le damos el nombre a la pgina de enviar.ph. y como siempre, buscamos la carpeta raz LIBRO 1donde debe estar alojada.

6.6 CREACION DE LA PAGINA GRACIAS

Despus de que el cliente llena el formulario de nuestra pgina y

hace clic en el botn Enviar Formulario, es importante que reciba una confirmacin de su envo para asegurarse que su mensaje fue recibido exitosamente; para ello creamos una pgina simple sin utilizar Plantillas.

~ 56 ~

1. Vamos a la barra de Men Principal, hacemos clic en Nuevo y en el cuadro de dilogo que aparezca elegimos Pgina en blanco luego HTML, .

2. Finalmente hacemos clic en Crear obteniendo una pantalla en

blanco. Con el mtodo ya estudiado, insertamos una tabla centrada de una sola fila y una sola columna, escribimos el texto correspondiente y la pgina quedar de este modo:

3. Cambiamos el ttulo del documento por Gracias. Vamos a la barra de Men Principal, hacemos clic en Archivo, clic en Guardar como y en el cuadro de dilogo que aparezca, asignamos a esta pgina el nombre de Gracias con la extensin html.

4. Luego del correo electrnico, hacemos doble Enter en el teclado

para ubicar el cursor en el lugar donde deseamos que aparezca el botn Close Window, para ello, hacemos clic en Cdigo y en el lugar donde aparece el cursor pegamos, usando el mtodo ya explicado un pequeo archivo en JavaScript:

form method="post">

5. Aqu, cambiamos el nombre Close Window que est en ingls,

por Cerrar Ventana en espaol.

~ 57 ~

6. Hacemos clic en Actualizar, luego otro clic en Diseo y Dreamweaver nos mostrar finalmente el botn Cerrar ventana.

6.7 INSERTANDO BOTON Comprar ahora

Para insertar botn de Comprar ahora primero en la Pgina

Principal o Inicio, debemos tener definidos:

1. La carta de presentacin y el producto que deseamos vender; como en este caso, la venta de un libro electrnico.

2. Abrir una cuenta de negocios con las ms representativas

compaas indicadas ms adelante; estas compaas, como en mi caso PayPal son las que se encargan de proporcionar las herramientas para insertar botones que interactuarn con su Formulario de pago, a travs de los cuales los clientes comprarn nuestros productos.

El cdigo de este botn se copia y se pega o inserta en cualquier

pgina de nuestro Sitio Web, yendo a la barra de herramientas, opcin Cdigo y en el lenguaje HTML, pegarlo, actualizarlo como lo hemos visto anteriormente y listo.

Las empresas que brindan estos servicios cuentan con un selecto equipo de Soporte Tcnico para asistirnos cada vez que lo estimemos necesario.

6.8 CREANDO PAGINA FELICITACIONES

Para crear esta pgina, podemos abrir cualquiera de las pginas ya

creadas, por ejemplo Contacto, que acabamos de crear la cual nos servir de plantilla porque ya tiene todo el diseo de la parte superior y una regin editable que nos permitir editar.

~ 58 ~

Realizamos el mismo procedimiento que nos ha permitido crear las pginas anteriores y finalmente tendremos la siguiente figura:

Vamos a la barra de Men Principal, hacemos clic en Archivo luego en Guardar como y le damos el nombre a la pgina Gracias por su compra , y listo.

De esta manera, el cliente, apenas termin con su pago, recibe el enlace a esta pgina para la descarga inmediata del producto, sin necesidad de enviar el enlace a su correo electrnico. PAS

6.9 CREANDOVINCULOS

Bien, hemos terminado con el diseo de las 3 pginas: ndex o

Pgina Principal, Formulario de Pago y Formulario de Contacto; con este mismo procedimiento podemos crear todas las pginas que queramos. Todo lo que tenemos que hacer ahora es crear todos los vnculos en los botones e imgenes de las tres pginas:

6.9.1 VINCULOS EN LA IMAGEN DE LA PAGINA INDEX

Este procedimiento es el mismo para crear vnculos tanto de texto como de imgenes. Veamos el aspecto de la barra original de la Pgina ndex:

~ 59 ~

Seleccionar el texto del primer Botn y con el puntero sobre la seleccin hacer clic en el botn derecho del ratn y hacer clic en Crear Vnculo. Con el mtodo ya estudiado, en el cuadro de dilogo mostrado, buscamos en la Carpeta Raz LIBRO 1 el archivo ndex, hacemos clic en el botn Aceptar y automticamente el texto del primero botn cambiar del color negro al color Azul, debido a que cuando al inicio creamos la Tabla General, en su configuracin original Propiedades de la pgina, Color de vnculo lo configuramos con color Azul. El mismo procedimiento utilizaremos para el segundo botn con la diferencia que el vnculo ser dirigido a la pgina Contacto.

Para crear un vnculo en la imagen, cualquiera que ella fuera, basta con hacer clic sobre ella y con el procedimiento ya conocido, la vinculamos a cualquier otra pgina o direccin electrnica. La imagen adquirir un borde azul, debido a la configuracin original, ya explicado anteriormente, de la Tabla o Pgina Principal. Este mismo procedimiento se utiliza para vincular los botones en cada una de las pginas que llevan su nombre, tanto en la Pgina ndex, Contacto, etc.

De este modo hemos finalizado con el diseo del sitio Web de negocios; La misma que entrar en funcionamiento en la Internet, tan pronto est inscrita en un servidor definitivo. Veamos el aspecto final de la Pgina ndex que visualizarn los cibernautas:

~ 60 ~

La pantalla nos muestra la pgina final sintetizada; de hecho tiene que involucrar todos los elementos para poder vender productos, como cartas de presentacin, artculos, imgenes, y todos los aspectos interactivos que usted estime conveniente. De igual manera podemos hacer otro tipo de enlaces:

ENLACES DENTRO DE UNA MISMA PAGINA

Para crear enlaces o links dentro de una misma Pgina Web ya diseada, que nos permita navegar rpidamente dentro de ella, yendo a los ttulos o captulos especficos, al final o al principio de la misma, abrimos nuestra pgina y seguimos el siguiente procedimiento: 1. Hacemos clic en Cdigo para Ir al cdigo fuente o HTML y

realizar lo siguiente:

Aqu escriba el titulo de la pgina y la guardamos con la extensin html.

Para crear marcadores dentro de una misma pgina necesitamos crear un enlace de origen y otro de destino.

1. Enlace o Link de origen:

Crear tantos ttulos como temas o artculos se deseen; en este ejemplo

consideramos solo dos artculos:

Aqu escriba el 1er. ttulo del tema Aqu escriba el 2do. ttulo del tema

2. Enlace o Link de destino: Enlazar los ttulos de destino iguales a los

de origen uno por uno y escribir o copiar el texto del tema en cada uno

de ellos:

~ 61 ~

Artculo 1: Aqu escriba o copie el texto Artculo 2: Aqu escriba o copie el texto

Nota: Para escribir o copiar el texto, hacemos clic en Diseoluego otro clic en la celda de la tabla de la pgina que deseamos.

4- Para volver al inicio de la pgina despus de haber navegado por ella, igualmente hacer clic en Cdigo y colocar el marcador de este modo:

Y en la parte inferior, colocar el enlace para ir a la parte superior de de lapgina:

Ir Arriba

5- Finalmente, regresar a la Pgina Diseo, haciendo clic en Diseo para verificar el trabajo.

COLOCAR UN ICONO EN UNA PAGINA WEB Insertar un cono en una pgina Web para que se visualice en la barra de un navegador cualquiera, es importante, ya que le da mejor presentacin y cierto perfil de seguridad. Existe una compaa en el Reino Unido, cuya pgina es: www.your-name-here.co.uk, que adems de hospedaje Web y Dominios ofrece un servicio gratuito de Favicn Generator, en su web http://www.favicon.co.uk/.

~ 62 ~

QUE ES UN ICONO?

Un cono, es una imagen representativa de una Web, llamada tambin page icon, url icon, es un cono asociado con un sitio web en particular que, se visualiza en el lado izquierdo de la URL en la barra de direcciones, como lo muestra la URL de una de mis pginas:

De hecho, est sobreentendido que previamente, usted tiene que disear su propio cono ya sea con Photoshop o con cualquier otro programa, de preferencia en foramto png que ofrece mejor calidad, aunque ligeramente ms pesado que jpeg y una vez que lo tenga listo entonces recurre al siguiente procedimiento, que es sumamente sencillo y consta de dos partes:

A- GENERANDO EL ICONO CON FAVICON Hacemos clic en la pgina mencionada: http://www.favicon.co.uk/

Clic en Browse para cargar la imagen del logotipo diseado, en mi caso busco mi cono Logotipo en la carpeta donde se halla gravado, doble clic en Logotipo y obtendremos la siguiente pantalla:

~ 63 ~

Finalmente hacemos clic en Generate Favicon y ya tenemos el cono con el nombre favicon.ico:

Como lo muestra la figura, hacemos clic en Download, lo descargamos y lo gravamos en la carpeta donde est nuestro logotipo, o en la carpeta que usted desee, luego corremos el programa en el cual ha sido diseada la pgina, en mi caso usaremos Dreamweaver CS3.

B- INCERTANDO EL ICONO EN LA PAGINA WEB

Corremos el programa DWCS3 y abrimos la pgina principal o index Hacemos clic en Cdigo para que nos muestre el cdigo fuente o HTML y entre y , escribimos o copiamos este cdigo: , quedando de este modo:

~ 64 ~

Finalmente hacemos clic en Actualizar, que se encuentra en la parte baja de la pgina y listo.

Este procedimiento B, lo repite en todas las dems sub-pginas de su Sitio Web. Para comprobar basta con hacer clic en su URL o como en este caso en mi pgina http://mis-libros.com, donde podr visualizar el cono al principio o lado derecho de la direccin o la URL:

~ 65 ~

CAPITULO 7 ---------------------------------------------------------------------------------------

Antes de desarrollar este captulo, debemos conocer cules

son los pasos ms importantes para concretar un negocio en la red de Internet. Veamos:

1- Crear el producto, u ofrecer servicios profesionales.

2- Disear el Sitio Web para vender el producto.

3- Adquirir el nombre del Dominio.

4- Contratar el Hospedaje Web.

5- Optimizar el Sitio Web.

6- Publicacin en los buscadores.

7- Contratar los servicios de una empresa para que ejecute la venta

con tarjetas.

8- Marketing del producto.

En el caso del desarrollo de este curso, el aspecto nmero uno

es el libro Aprenda Dreamweaver en ocho pasos, el paso nmero dos, el diseo de la Pgina Web, que estamos desarrollando; veamos ahora el Nombre del Dominio:

7.1 NOMBRE DEL DOMINIO

Antes de contratar los servicios de Hospedaje y configurar

el Sitio Remoto, debemos haber definido claramente y con mucho cuidado la direccin URL (Uniform Resource Locator) de nuestra Pgina Web, teniendo en cuenta la naturaleza del producto que deseamos vender y el perfil de usuarios al cual va dirigido; y luego, pagar para adquirir este dominio, en cualquier empresa que ofrece este servicio.

~ 66 ~

El dominio (URL) es el nombre de la direccin Web de un negocio residente en un servidor de Internet que facilita recordar de forma sencilla su direccin IP. Todos los servidores y pginas de Internet tienen una direccin numrica que se conoce como direccin IP (Internet Protocol), por ejemplo 218.29.152.110.

La mejor opcin para registrar el dominio es contratando los servicios

pagados de un proveedor de dominio y hospedaje para alojar nuestra pgina y encargarse de todos los aspectos tcnicos por nosotros. Debemos tener cuidado de que el nombre de nuestro dominio no sea el mismo que de otras empresas; as como tambin, debemos ser cuidadosos y elegir un proveedor de prestigio, ya que si por alguna razn quiebra, desbaratara por completo nuestro negocio. Los dominios estn formados por dos partes:

1. El nombre del dominio, es el que contiene la razn social, marca o nombre de la pgina. Por ejemplo en http://mis-libros.com, el nombre del dominio es mis-libros, he utilizado el guin comn, porque esta es la sintaxis que agrada a Google por ser mucho ms clara y sencilla. Para ayuda especializada sobre el diseo de pginas Web que cumplan con stos requisitos visite la pgina:

http://www.google.com/support/webmasters/bin/topic.py?top

ic=8464

2. La extensin, que identifica el tipo de dominio en nuestro ejemplo es com, u otros como: net, org, es, ru, etc.

7.2 HOSPEDAJE DE LA WEB

Lo que necesitamos ahora, es un servidor para "hospedar" nuestro

Sitio Web. De hecho, debemos tomar en cuenta los diferentes servicios y sobre todo, el tipo de seguridad que ofrecen. Considerando que hay miles de empresas que ofrecen estos servicios, debemos elegir aquellos que ofrezcan en otros aspectos, los siguientes:

~ 67 ~

1- Hospedaje con Sistema Operativo LINUX.

2- Espacio suficiente en el Disco.

3- Transferencia de datos, de 1000 MB a ms.

4- FTP ilimitado.

5- 10 o ms cuentas de e-mail.

6- Auto respondedores para las cuentas de e-mails.

7- Web mail para leer y enviar correos online.

8- Antivirus y Sistema Anti spam.

9- Acceso CGI con Carpeta propia CGI-BIN en nuestro sitio.

10- Estadsticas con grafas y logos de texto.

11- Perl, send mail, PHP.

12- MySQL, PHP My admin.

13- Scripts para foros, formmail, chat, blogs, buscador interno.

14- Sistema de backups diarios.

15- Soporte tcnico, permanentes. Etc.

Hay empresas americanas que son muy buenas y ofrecen muchos servicios ilimitados y son ms econmicas. tenemos por ejemplo:

http://www.fatcow.com http://hospedajeweb.blogazos.com

7.3 CONFIGURCION DEL SITIO WEB REMOTO

La Carpeta raz remota o Sitio remoto, es aquella en la cual se

almacenan los archivos para pruebas, produccin, colaboracin, etc. en el Panel Archivos. La carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web Remoto. Las carpetas de datos locales y remotos debe ser las mismas, permitiendo transferir y administrar archivos entre el Sitio Web Local y el Servidor Web Remoto, como lo muestra la figura:

~ 68 ~

Antes de configurar el Sitio Remoto, debemos contar con los datos del Servidor Remoto donde vamos a transferir todos los archivos de nuestra Pgina Web.

Existen muchas compaas que ofrecen servicio de dominios y hospedajes gratuitos para realizar nuestras pruebas antes de contratar los servicios definitivos y pagados de una compaa, no obstante, no recomiendo este tipo de compaas porque muchas veces no nos ofrecen todas las opciones para hacer una prueba real. Si acaso usted desea probar una de estas; aqu tiene una de las mejores: http://www.freetzi.com/, puede ingresar en ella y crear una cuenta con su Username y su Password, escribe el nombre de su Dominio, hace clic en proceed. y continua registrando sus datos de acuerdo a las instrucciones que le servirn de gua, ellos le enviarn un correo electrnico con la informacin completa de su cuenta que acaba de crear:

~ 69 ~

y con esos datos podr configurar con Dreamweaver el Servidor Remoto, con el objeto de poder subir todos los archivos de su Pgina Web como lo vamos a ver ms adelante.

Bien, habiendo concluido con el diseo de esta Pgina Web, y teniendo configurado el Servidor Local en nuestro disco duro que nos permiti probar progresiva y secuencialmente cada tarea, mas todos los datos proporcionados va e-mail por el servidor, ahora tenemos que configurar nuestro Sitio Remoto con Dreamweaver el cual admite conexiones con servidores remotos aptos para IPv6. Entre los tipos de conexin admitidos figuran FTP, SFTP, WebDav y RDS; para ello:

1- Vamos a la barra de Men Principal, seleccionamos Sitio, hacemos clic en Administrar sitios, obtendremos el siguiente cuadro de dilogo:

3. Teniendo en cuenta que ya tenemos configurado el sitio local,

hacemos clic en el botn Editar. En el cuadro de dilogo que aparezca hacemos clic en la ficha Avanzadas.

4. Clic en categora Datos remotos y seleccionamos el mtodo de

acceso FTP, que utilizaremos para transferir los archivos entre las Carpetas Local y Remota e ingresaremos los datos, tal como lo muestra la figura:

~ 70 ~

5. Hacemos clic en el botn Prueba para comprobar el nombre de conexin y la contrasea y obtendremos un mensaje: Dreamweaver CS3 se ha conectado con el Servidor Web correctamente.

6. Hacemos clic en el botn OK del cuadrito de dilogo. Un clic en el

botn Aceptar y aparecer otro cuadro de dilogo.

7. Hacemos clic en el botn Listo y finalmente, ya podemos transferir nuestro sitio completo al Servidor remoto. Este mismo cuadro de dilogo se utiliza para eliminar el Sitio Web, usando el botn Quitar.

Todos los datos inscritos anteriormente mislibros.freetzi.com son

datos proporcionados por la compaa que me brind gratuitamente el Dominio y el Hospedaje de este sitio; pero para poder realizar las pruebas reales de todas las pginas Web de este Curso he utilizado los servicios pagados de la compaa FatCow.

7. 4 COLOCANDO ARCHIVOS EN EL SITIO REMOTO

1. Hacemos clic en la flechita que apunta al lado izquierdo que

separa la Ventana de Trabajo y el Panel de Archivos y

obtendremos la figura:

2. Hacemos clic en SITIO 1, tal como se ve seleccionado

de color azul. Clic en el botn Flecha azul de la parte

superior y Dreamweaver preguntar:

Est seguro de que desea colocar todo el sitio?

~ 71 ~

3. Decimos que s, pulsando el botn OK y empezar la

transferencia de todos las carpetas y archivos del sitio Web

Local, en un cuadro de dilogo mostrar lo siguiente:

Colocando archivos Formulario de contacto curso.html 0- 8389

bytes.

Para conectar y desconectar el Sitio Remoto use este botn Conectar al servidor remoto que est en la parte superior. En el Panel de Archivos; asimismo puede usar cualquiera de los botones descritos, de acuerdo a sus requerimientos, como lo indica la pantalla adjunta:

~ 72 ~

CAPITULO 8 ----------------------------------------------------------------------------------------

8. 1 OPTIMIZACION INTERNA

El trmino Optimizacin para los motores de bsqueda,

consiste en modificaciones de partes concretas de una Pgina Web, stas se realizan en el cdigo HTML o lenguaje fuente, con el objeto de poder ocupar lugares preferenciales en los resultados de bsqueda.

En consecuencia, finalizado el diseo de la Pgina Web y hecha la verificacin de que todo marcha bien en las pruebas con el Servidor Remoto; debemos Optimizarla Internamente y posteriormente Publicarla o indexarla pgina por pgina, y buscador por buscador manualmente en los Motores de Bsqueda ms importantes: Google, Yahoo y MSN y DMOZ.

8.1.1 LOS META TAGS

Los Meta Tags son una serie de Etiquetas que se escriben en la

seccin de las Pginas HTML, que no son visibles para el cibernauta, pero s lo son para los buscadores. Veamos algunos de los Meta tags: Keywords y Description.

En la actualidad, debido al abuso e ilcito uso de los Spam de los meta tags, los buscadores tienden a ignorarlos, prefiriendo el Meta tag Description y el Contenido relevante, como guas para el rastreo de las pginas.

Antes de subir nuestro sitio Web a los buscadores ms famosos, debemos manipular un poquito el Cdigo Fuente HTML (Hyper text Markup Lenguaje), que es el lenguaje en el cual se escriben las pginas que se publican en Internet, para definir los meta tags de optimizacin. Muchos buscadores toman en cuenta estos datos para generar la lista de resultados, y mientras mejor definidos estn, mejor ser nuestra presencia en esas listas de bsqueda.

~ 73 ~

Como dije al principio, no es necesario ser experto en HTML para

agregar, quitar o editar ciertos elementos de este cdigo fuente, en este caso el modo ms fcil y efectivo de optimizar internamente nuestra pgina es:

USANDO EL BOTON Cdigo

Para realizar este procedimiento, estando en la Pgina ndex abierta o en cualquier otra, hacemos clic en el botn Cdigo y ya estamos en el cdigo fuente HTML de la pgina; ahora solo tenemos que seguir al pie de la letra las instrucciones siguientes: Aqu escribimos el ttulo de nuestra pgina

ETIQUETA

1. Contiene el Ttulo de la pgina y no debe tener ms de 60 70 caracteres incluyendo los espacios.

2. Debe contener la mayor cantidad posible de Palabras Clave.

3. Debe explicar en pocas palabras de qu trata la pgina.

4. No se deben usar maysculas, comas, puntos, guiones ni acentos.

ETIQUETA

1. Debe ser lo ms completa posible sobre el contenido de la pgina.

~ 74 ~

2. Los robots solo consideran de las 13 a 15 primeras palabras de su contenido.

3. No usar los artculos: el, la, los, las preposiciones: a, como, por, dentro de

las primeras 15 palabras.

4. Descripcin diferente para cada pgina.

5. No debe contener ms de 150 a 200 caracteres, incluyendo espacios.

6. No se deben usar maysculas, comas, puntos, guiones ni acentos.

ETIQUETA

Debe contener las palabras o frases clave que definen el contenido de la pgina, las cuales permitan a los motores de bsqueda introducirlas en su base datos.

La Descripcin que hagamos del sitio en nuestra subida a los buscadores ser sin duda el factor fundamental para que qui

Documents

Aprenda Dreamweaver en Ocho Pasos