Pagin as Web

Centro de Bachillerato Tecnológico industrial y de servicios No. 12

Guía Didáctica para el aprendizaje del

Submodulo Elaboración de Páginas Web

del Modulo II Creación de Productos

Multimedia a través de Software de Diseño

Martín Alejandro Guerra Hernández

Jiquilpan, Michoacán

Agosto, 2010

Presentación La Educación Media Superior (EMS) en México enfrenta desafíos que podrán ser atendidos sólo si este nivel educativo se desarrolla con una identidad definida que permita a sus distintos actores avanzar ordenadamente hacia objetivos concretos. El contexto socioeconómico y cultural mundial comporta cambios muy importantes que también se expresan en nuestro país; la educación no puede ser ajena a estos fenómenos y debe considerarlos para poder cumplir su función social. Se ha encomendado a la educación que los individuos y los grupos tengan una participación exitosa en la sociedad del conocimiento; que contribuyan a la resolución de problemas y al mejoramiento en las condiciones de vida desde la perspectiva del desarrollo sustentable; que estén en condiciones de aprender a lo largo de la vida; que cuenten con los elementos para responder a las demandas del mundo del trabajo y de la sociedad; que tengan y demuestren conocimientos y competencias conforme a estándares nacionales e internacionales y que esto les permita transitar más libremente en la esfera de los estudios y del empleo, valorar la multiculturalidad y convivir en la democracia. La guía didáctica desarrollada en este documento se origina debido a lo complejo que es el desarrollar y administrar sitios web, con este material didáctico se pretende orientar y facilitar el aprendizaje del educando en el submodulo: Elaborar páginas web correspondientes al Modulo II Creación de productos multimedia a través de software de diseño, de la especialidad de Informática del CBTis No. 12. El documento se ha estructurado en cuatro apartados: el primero contiene una breve introducción a internet, el segundo apartado contiene una guía de aprendizaje del lenguaje HTML; el tercer apartado se plantea el uso de un editor de páginas web: Dreamweaver CS3 y el último apartado comprende la administración de un sitio web.

Índice

I. INTRODUCCIÓN A INTERNET ............................................................................ 1

II. LENGUAJE HTML ................................................................................................ 5

II.1 Estructura básica de un documento web ........................................................ 5

II.2 Creación de una página web .......................................................................... 6

II.3 Visualización del documento web ................................................................... 7

II.4 Edición de un documento web ........................................................................ 8

II.5 Saltos de línea y de párrafo ............................................................................ 9

II.6 Cabeceras de título ....................................................................................... 10

II.7 Formato y alineación de texto ....................................................................... 11

II.8 Control de fuentes ........................................................................................ 14

II.9 Selección de un tipo de fuente...................................................................... 16

II.10 Caracteres especiales .................................................................................. 17

II.11 Efectos en el Texto ....................................................................................... 19

II.12 Texto en movimiento .................................................................................... 20

II.13 Diseño de Listas ........................................................................................... 22

II.14 Creación de Vínculos (Enlaces o Hipervínculos) .......................................... 26

II.15 Inserción de Imágenes ................................................................................. 30

II.16 Fondos con Color Uniforme .......................................................................... 34

II.17 Colores del texto y de los enlaces ................................................................ 36

II.18 Diseño de tablas ........................................................................................... 39

II.19 Multimedia: Audio y Video ............................................................................ 48

II.20 Documentos con Frames .............................................................................. 52

III. ADOBE DREAMWEAVER CS3.......................................................................... 57

III.1 Instalación..................................................................................................... 57

III.2 Espacio de trabajo ........................................................................................ 66

III.3 Creación y edición de archivos ..................................................................... 70

III.4 Inserción de texto ......................................................................................... 78

III.5 Inserción de caracteres especiales ............................................................... 79

III.6 Creación de listas ordenadas y sin ordenar .................................................. 79

III.7 Búsqueda y sustitución de texto ................................................................... 81

III.8 Revisión y corrección ortográfica .................................................................. 83

III.9 Importación de documentos de Microsoft Office ........................................... 84

III.10 Aplicación de formato a texto........................................................................ 85

III.11 Utilización del inspector de propiedades para dar formato a texto ............... 86

III.12 Aplicación de formato a párrafos .................................................................. 87

III.13 Cambio del color del texto ............................................................................ 87

III.14 Alineación de texto ....................................................................................... 88

III.15 Utilización de reglas horizontales ................................................................. 89

III.16 Adición de una nueva combinación a la lista de fuentes .............................. 90

III.17 Inserción de fechas ....................................................................................... 90

III.18 Adición y modificación de imágenes ............................................................. 91

III.19 Inserción de contenido de Flash ................................................................... 97

III.20 Adición de sonido ....................................................................................... 102

III.21 Inserción de objetos multimedia ................................................................. 104

III.22 Presentación de contenido en tablas .......................................................... 106

III.23 Establecimiento de vínculos y navegación ................................................. 119

III.24 Obtención de vista previa de páginas ......................................................... 125

IV. ADMINISTRACIÓN Y HOSPEDAJE DEL SITIO WEB ..................................... 126

IV.1 Cómo elegir un alojamiento ........................................................................ 126

IV.2 Elegir alojamiento gratuito .......................................................................... 127

IV.3 Dominios ..................................................................................................... 131

IV.4 Registro en buscadores .............................................................................. 134

IV.5 Contacto con el navegante ......................................................................... 135

IV.6 Posicionamiento en los buscadores de internet.......................................... 136

IV.7 Registro y hospedaje en tripod ................................................................... 139

V. FUENTES DE CONSULTA ............................................................................... 150

Introducción a Internet .

by: magh 1

II.. IInnttrroodduucccciióónn aa IInntteerrnneett Internet es una red de computadoras conectados en toda la extensión del Globo Terráqueo que ofrece diversos servicios a sus usuarios como pueden ser el correo electrónico, el chat o la web. Todos los servicios que ofrece Internet son llevados a cabo por miles de computadoras que están permanentemente encendidos y conectados a Internet, esperando que los usuarios les soliciten los servicios y sirviéndolos una vez que son solicitados. Como decimos, hay servidores para todo, los hay que ofrecen correo electrónico, otros hacen posible nuestras conversaciones por chat, otros la transferencia de archivos o la visita a las páginas web y así hasta completar la lista de servicios de Internet. También existe otro tipo de servidores que son los que se encargan de proveer de acceso a Internet a nuestras computadoras, son los proveedores de acceso, los servidores a los que nos conectamos con nuestros módems (prodigy, megacable, tvrey, etc.). Cuando hacemos la llamada con el módem a los servidores que proveen el acceso entramos a formar parte de Internet y mientras mantengamos la conexión podremos acceder a todos los servidores repartidos por todo el mundo y solicitarles sus servicios. En el momento que pedimos un servicio de Internet nos convertimos en clientes del servidor que lo ofrece. Para solicitar uno de estos servicios es necesario contar con un programa especial que suele ser distinto para cada servicio de Internet. Por ejemplo, para acceder al correo electrónico utilizamos Outlook, para acceder a la web utilizamos un navegador: Mozilla Firefox, Netscape, Internet Explorer, etc. o para entrar en el chat utilizamos un programa como: ICQ, MIRc, Pigdin, etc. Todos estos programas que nos dan acceso a los servicios de Internet se denominan clientes, como se puede ver, para ser el cliente de un servidor de Internet necesitamos un programa cliente del servicio al que intentamos acceder. La web es un servicio de Internet Toda esta introducción sirva para que nos demos cuenta que Internet es un conjunto de servicios y el web, que es lo que tratamos de analizar, no es más que uno de ellos. Probablemente sea el más popular en estos momentos y a veces parezca que Internet se limita al web, como en los anuncios de prensa, donde casi siempre nos venden portales o productos de la web como si ellos fueran lo único que se puede hacer en Internet. La web es entonces un servicio más que consiste en un inmenso conjunto de páginas conectadas unas a otras por un sistema de enlaces. El sistema con el que está construido el web se llama hipertexto y es un entrelazado de páginas conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como la ayuda del Windows y son muy fáciles de utilizar y de encontrar lo que buscamos rápidamente. La web no solo se limita a presentar textos y enlaces, sino que también puede ofrecernos imágenes, videos, sonido y todo tipo de presentaciones, llegando a ser el servicio más rico en medios que tiene Internet. Por esta razón, para referirnos al sistema que implementa el web (hipertexto), se ha acuñado un nuevo término que es hipermedia, haciendo referencia a que el web permite contenidos multimedia. Multimedia, hace referencia a muchos medios, solamente quiere decir que se están utilizando muchos medios para presentar información como son el vídeo, el audio o realidad virtual.


by: magh 2

Cómo es una web por dentro Una página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es así, está compuesta por multitud de diferentes archivos, como son las imágenes, los posibles vídeos y lo más importante, el código fuente que dice donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página. No es problema que las webs estén compuestas por tantos elementos, ya que rápidamente veremos que su organización es fácil y que no se nos van a perder o escapar ninguno. Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos construir unos documentos hipertexto, o hipermedia, con sus correspondientes archivos de imagen o video y colocarlos en unas computadoras que son servidores de páginas web. Pero esto es algo que vamos a tratar de explicar poco a poco en los siguientes capítulos. Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una simple acción podemos ver el código fuente de de las páginas, es decir, cómo están hechas por dentro. Para ello en Internet Explorer se ha de pulsar sobre el menú de Ver > Código fuente y en Netscape se ha de seleccionar Ver > Origen de la página. Qué necesitas para empezar Para ponernos a diseñar páginas web nos hace falta realmente poco material. En la mayoría de los equipos que se instalan con Windows o Linux, se encuentran todos los materiales necesarios para empezar sin necesidad de obtener nuevos programas. En concreto, los materiales necesarios son un editor de textos, con el que programaremos nuestras páginas y un navegador web: Internet Explorer, Mozilla Firefox, Netscape, etc. Construir las páginas Por fin empezamos a trabajar en la página y vamos a ver algunos consejos útiles para hacerlo bien. Es el momento en el que nos ponemos manos a la obra de una forma más dedicada y tenemos que trabajar más duramente. El programar o diseñar las páginas podrá gustar más o menos que otras acciones como planearlas o promocionarlas más tarde, pero no cabe duda que es el momento más excitante porque nuestros sueños y nuestras ideas empiezan a concretarse en los resultados que esperábamos conseguir. Si hemos proyectado un sitio compuesto por un gran número de páginas lo más habitual es empezar diseñando una página con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas las páginas. Pero esto son técnicas que aprenderemos con el tiempo. Para ahorrarnos errores cuando hacemos las páginas podemos seguir una serie de consejos útiles.

• No utilizar espacios en los nombres de los archivos de las páginas o las imágenes. Tampoco utilizar caracteres raros como la ñ o los acentos.

• Tener cuidado con las mayúsculas y las minúsculas en los nombres de los archivos que tratamos. Si las utilizamos equivocadamente la página podrá funcionar en nuestro equipo, pero al subirla al servidor Linux o Unix podría ser que no funcionase.

• Enterarse de cómo funciona el documento por defecto, que se cargara al inicio en nuestro sitio (home.html, default.html, index.html, home.php, etc.)

• Trabajar siempre con una extensión del archivo HTML específica. No mezclar en un mismo proyecto páginas con extensión .html y .htm.


by: magh 3

Imágenes y otros recursos Como se ha podido ver anteriormente, el diseño de una página web implica la creación de un archivo en código HTML, pero no es lo único que debemos crear. En la mayoría de los casos también desearemos incluir imágenes y para ello será necesario crear los correspondientes archivos gráficos. El proceso para incluir una imagen en una página empieza por la creación de la imagen con un programa de diseño gráfico o mediante su digitalización con un escáner. Será necesario que conozcamos alguno de los programas de diseño gráfico que existen en el mercado. Entre los que destacan: Photoshop, Corel Draw o Fireworks. Los tipos de archivos gráficos que soporta Internet, entres los que destacan: JPG, GIF, PNG. Tienen características distintas y por tanto usos distintos. Una vez tenemos los archivos gráficos los ponemos en el mismo directorio que los archivos HTML o en un subdirectorio de este y en el código de la página HTML pondremos una etiqueta especial para incluir la imagen o la insertaremos él con editor web. Alojar las páginas Como hemos dicho, cualquier servicio que se quiere ofrecer en Internet tiene que brindarlo un servidor, que es una computadora que se encuentra encendido las 24 horas del día y conectado a Internet también permanentemente. En el caso de una página web, existen unos servidores que son los encargados de mandarla cuando se la solicita, son los servidores web. Nuestras páginas tienen que estar alojadas en un servidor web para que puedan estar accesibles desde Internet. Lo que tendremos que hacer entonces es buscar un lugar para alojar la página que esté acorde con nuestras necesidades, por suerte en muchos de los casos el alojamiento lo podremos conseguir de manera gratuita. Subir los archivos al servidor Es una de las tareas que parecen más difíciles cuando te pones a construir las páginas. Igual que cualquier cosa en este mundo, cuando lo has hecho unas cuantas veces el problema se desvanece. Básicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro sitio web, incluidas imágenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello primero es tarea imprescindible el identificar dónde están todos los archivos de nuestro web. Si hemos escrito la página con código HTML seguramente sabremos perfectamente donde están nuestros archivos, pero si la página la hemos hecho con un editor web como Dreamweaver, Frontpage es probable que estén un poco más difíciles de identificar. Dependiendo del alojamiento que tengamos, la manera de subir los archivos cambiará. Existen, de todos modos, dos maneras de subir los archivos al servidor, ya sea por FTP o a través de una interfaz web (parecido al administrador de archivos de Windows).


by: magh 4

Documento por defecto Es importante conocer este concepto, incluso antes de ponerse a diseñar la página. El documento por defecto es el archivo que envía el servidor cuando el cliente no especifica que archivo es el que solicita. Esto se puede ver muy fácilmente con un ejemplo. Cuando escribimos la dirección se envía el documento por defecto del directorio manuales. http://www.desarrolloweb.com/ no estamos especificando ningún nombre de archivo en concreto, entonces el servidor web donde está alojado este sitio web le devolverá el documento por defecto del directorio raíz del dominio. Cada directorio puede tener un documento por defecto, por ejemplo, cuando escribimos www.desarrolloweb.com/manuales se envía el documento por defecto del directorio manuales. Cada servidor web puede estás configurado de una manera distinta para el documento por defecto, es decir, en cada servidor web el documento por defecto puede ser distinto. Lo más habitual es que se llame index.html, en desarrolloweb es así y en muchos alojadores gratuitos también lo es, pero en otros casos puede variar el documento por defecto y ser lo que los administradores de cada servidor decidan. Otros nombres para el documento por defecto podrían ser: default.html, index.html, home.html, default.php, los más comunes. Promoción de las páginas Con el diseño y la publicación del sitio web en el servidor no se termina el trabajo. Una de las tareas más importantes para el éxito de la web es promocionarla adecuadamente, de manera que su dirección figure en el mayor número de sitios. Las acciones que se pueden realizar para promocionar una página son muchas y variadas, como hacer que figure su dirección en nuestros correos electrónicos o intercambiar banners, pero la más importante es el registro en los buscadores. Estas tareas de promoción no son nada complicadas y cualquiera puede realizarlas sin ningún problema, pero conseguir que nuestra web se encuentre situada entre los primeros resultados de la búsqueda reviste más dificultad. Actualizar las páginas El último "truco" para que nuestra página sea muy visitada y que los visitantes entren una y otra vez se trata de mantenerla siempre bien actualizada. Hay algunas webs que se prestan más que otras a tener los contenidos actualizados, como son las páginas donde se pueden ver contenidos de actualidad, pero en general todas las páginas pueden mantener secciones con contenidos actualizables. Este es un aspecto muy importante, pues si el navegante se percata de que los contenidos se renuevan constantemente volverá con el tiempo unas cuantas veces. Para dar una imagen de web actualizada se pueden utilizar imágenes o textos que resalten donde ponga "nuevo" o "new". También será adecuado poner un área en un sitio visible donde se enumeren las novedades del sitio. Por lo general habrá que volver siempre sobre este punto para ver qué hay de nuevo y dónde se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningún sitio, igual que no es bueno tener una dirección de correo que no existe ya. Si no mantenemos nuestro sitio actualizado el visitante entrará una vez a la página pero no lo volverá a hacer nunca, con lo que habremos perdido una oportunidad de hacernos con un cliente o un visitante asiduo.

http://www.desarrolloweb.com/manuales�

HTML .

by: magh 5

IIII.. LLeenngguuaajjee HHTTMMLL

HTML, es acrónimo de HyperText Markup Language, lenguaje de marcas de hipertexto. En informática, formato estándar de los documentos que circulan en la World Wide Web (WWW); se utiliza desde 1989. Los documentos HTML contienen dos tipos de información: la que se muestra en la pantalla (texto, imágenes, videos, etc.) y los códigos (tags o etiquetas), que indican cómo se debe mostrar esa información. Para crear un documento HTML, basta con disponer de un editor de texto: Wordpad, Bloc de Notas, Edit de MS-DOS, teclear el código y las etiquetas que sean necesarias. También se pueden utilizar editores específicos para diseño de páginas web que insertan automáticamente las etiquetas correspondientes al formato del texto que se escriba o a las imágenes que se inserten; por ejemplo: Microsoft FrontPage, DreamWeaver, Web Easy Professional, Namo WebEditor, Coffee Cup Editor, etc.

IIII..11 EEssttrruuccttuurraa bbáássiiccaa ddee uunn ddooccuummeennttoo wweebb

El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <nombre_etiqueta> Este es el inicio de una etiqueta. </nombre_etiqueta> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Un documento HTML en sí está dividido en dos zonas principales: * El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> * El cuerpo, comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal del navegador(Internet Explorer, NetScape Navigator, Mozilla FireFox) que es utilizado para visualizar el documento HTML, principalmente la información encontrada en el encabezamiento es el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (favoritos o marcadores). Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, video, etc.) Por tanto, la estructura de un documento HTML queda de esta forma: <HTML>

<HEAD> [Etiquetas del encabezado de la página: autor, descripción, título]

</HEAD> <BODY>

[Aquí van las etiquetas o contenido a visualizar en la página] </BODY>

</HTML>

HTML .

by: magh 6

De tal manera que: La etiqueta principal es <html> y debe terminar con su etiqueta de cierre </html>. El encabezado, que contiene información de: autor, descripción, título de la página, etc. se escribe entre las etiquetas <head> y </head>. Y el contenido de la página, entre <body> y </body> Comentarios Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial: 

Los comentarios son útiles para identificar el documento, pudiendo indicar al comienzo del documento su titulo, autor y la fecha en el que fue realizado, esto se hace antes de la etiqueta <HTML>. Los comentarios no se muestran en el documento HTML y el único modo de verlo es viendo el código HTML fuente del documento.

IIII..22 CCrreeaacciióónn ddee uunnaa ppáággiinnaa wweebb Haga clic en el menú Inicio/Programas/Accesorios/Bloc de notas. Ejemplo 1: Diseñar una página web que muestre un saludo en la ventana del navegador. Además debe mostrar como titulo de la pagina: “Iniciando como Desarrollador Web”. Guardaremos nuestro documento con el nombre de: ejemplo1.htm <html> <head> <ti t le> Iniciando como Desarrol lador Web </ti t le> </head> <body>

Saludos, este es mi primer documento web. </body> <html>

Etiqueta html, inicia el documento web. Etiqueta head, inicia los encabezados del documento web. Etiqueta title, muestra el titulo del documento web. Etiqueta body, muestra el contenido del documento web.

HTML .

by: magh 7

Después de teclear el código en el bloc de notas, debe hacer clic en el menú Archivo / Guardar como. Del cuadro de dialogo que aparece, teclee en el cuadro Nombre:

ejemplo1.htm, Seleccione la lista desplegable de Tipo: Todos los archivos, por último haga clic en el botón Aceptar. Listo ha creado su primer documento web. Cierre el bloc de notas. NOTA: Se recomienda que el nombre del documento o pagina web: Utilizar letras minúsculas

y que NO lleve espacios entre palabras, caracteres especiales o ñ. Ejemplo de nombres incorrectos: niñez, estudiante del CBTis, proyecto* final, etc.

IIII..33 VViissuuaalliizzaacciióónn ddeell ddooccuummeennttoo wweebb

Para ver el contenido de su página web, debe ingresar a MiPC o al Explorador de windows, posteriormente buscar la Carpeta en donde guardo su página web, después haga doble clic sobre el nombre de la pagina web creada y vera en pantalla el Navegador con el contenido de su página web, en el ejemplo anterior solo visualizará en la barra de titulo del navegador: Iniciando como Desarrollador Web y dentro de la ventana el texto: Saludos, este es mi primer documento web. El resultado del código anterior se muestra en el navegador Internet Explorer: Titulo de la pagina con la etiqueta title. Contenido que inserto con la etiqueta body.

HTML .

by: magh 8

IIII..44 EEddiicciióónn ddee uunn ddooccuummeennttoo wweebb

Para modificar el contenido del documento o pagina web, tiene dos alternativas: 1) Ingresar al Bloc de Notas, después Archivo / Abrir. Del cuadro de dialogo que aparece, seleccione la lista desplegable de Tipo: Todos los archivos, seleccione la carpeta en donde guardo su documento, posteriormente haga clic en el nombre del documento y clic en el botón Abrir.

En la ventana visualizará el código de la pagina web, haga las modificaciones necesarias y por ultimo haga clic en el menú Archivo / Guardar. Abra su documento web (sin cerrar el bloc de notas), observe que se muestran los cambios realizados en el navegador: Internet Explorer, Mozilla Firefox, etc. Si desea continuar modificando su documento web, haga las modificaciones necesarias y por ultimo haga clic en el menú Archivo / Guardar. Sin cerrar el Bloc de notas, puede ver la actualización de su página, haga clic en el botón Actualizar (Internet Explorer) o botón Recargar (Mozilla Firefox). 2) Puede utilizar un editor web como: Microsoft FrontPage, DreamWeaver, Web Easy Professional, Namo WebEditor, Coffee Cup Editor, etc. Ingrese al editor de su preferencia, después abra el documento web, realice los cambios que necesite, por ultimo guarde su documento con los cambios, cierre el editor y visualice la página web con los cambios realizados.

HTML .

by: magh 9

IIII..55 SSaallttooss ddee llíínneeaa yy ddee ppáárrrraaffoo

Cuando un navegador Web muestra páginas HTML, no le pone atención a los fines de línea o a la cantidad de espacio entre palabras. Esto quiere decir, que al escribir el texto que será mostrado en el navegador, no es cómo en un procesador de texto normal, que controla saltos de línea, espaciado y alineación. Para controlar el texto, en el caso de los saltos de línea y párrafos, se deben utilizar las siguientes etiquetas: <BR> y <P>. Estas etiquetas no necesitan ser cerradas, salvo <P>, que en ocasiones se cierra. La etiqueta <BR> provoca el salto de línea y <P> produce el efecto de un párrafo. Estas etiquetas son muy utilizadas en todas las páginas Web. Ejemplo 2: Diseñar una página web que contenga texto con algunos saltos de línea y párrafo. Además debe mostrar como titulo de la pagina: “Iniciando con Saltos”. Guardar el documento con el nombre de: saltolinea2.htm <HTML> <HEAD><TITLE> Iniciando con Saltos </TITLE></HEAD> <BODY> Si , se desea crear sal tos de l ínea, cómo <BR>en este e jemplo es necesario uti l izar las etiquetas BR y P, <BR> las cuales son de gran util idad.<BR><P> Si observas en donde se están especi f icando <BR> los sal tos de l ínea y párrafos <BR>en el código fuente, se muestran al e jecutar este programa <BR><P> Fin del documento web. </BODY> </HTML> El resultado del código anterior se muestra en el navegador Internet Explorer: Titulo de la pagina con la etiqueta title. Contenido que inserto con la etiqueta body. Utilizo la etiqueta BR, para saltar de línea.

La etiqueta P, le permitió salto de párrafo.

HTML .

by: magh 10

PRACTICA 1: Diseñar una página web que contenga los datos de una agenda, incluya los datos de 3 personas: Nombre, dirección y teléfono. Para cada dato debe aplicar salto de línea, por cada persona aplique salto de párrafo. Además debe mostrar como titulo de la pagina: “Agenda”.

IIII..66 CCaabbeecceerraass ddee ttííttuulloo

En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos subapartados que lo forman. Las etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El texto indicado entre las etiquetas de inicio y de fin será el afectado por las cabeceras: Lo normal es utilizar las cabeceras de forma consecutiva y descendente, es decir, comenzaremos el documento con la cabecera <H1> que definirá el titulo, luego para los apartados principales utilizaremos la cabecera <H2>, para subapartados <H3>, etc. Ejemplo 3: Diseñar una página web que contenga texto simulando titulo, subtitulo y resto de documento. Además debe mostrar como titulo de la pagina: “Iniciando Títulos y subtítulos”. Guardar el documento con el nombre de: titulo_subtitulo3.htm <HTML> <HEAD><TITLE> Iniciando con Ti tulos y Subti tulos </TITLE></HEAD> <BODY> <h1> Texto como Ti tulo </h1> <h2> Texto como subti tulo </h2> <h3> Descripción del contenido </h3> </BODY> </HTML> El resultado del código anterior se muestra en el navegador Mozilla: Titulo de la pagina con la etiqueta title. Contenido que inserto con la etiqueta body. La etiqueta H1, para indicar línea de titulo. La etiqueta H2, permite indicar línea de subtitulo. La etiqueta H3, para indicar líneas de texto.

HTML .

by: magh 11

PRACTICA 2: Diseñar una página web que contenga ciudades turísticas del mundo. Incluya el nombre del continente, país y ciudad, considere 3 continentes diferentes. Para el dato de continente use título, el dato de país use subtitulo y el dato ciudad use otro. Además debe mostrar como titulo de la pagina: “Ciudades Turísticas”. IIII..77 FFoorrmmaattoo yy aalliinneeaacciióónn ddee tteexxttoo Hacer, una página Web puede ser tan fácil como escribir un texto y agregar algunas etiquetas HTML estándar al principio y al final, pero; para mejorar la apariencia del texto en las páginas Web, se requiere saber controlar el texto, por medio las siguientes etiquetas. Enfatiza el texto con negritas y cursivas. Cuándo se crea una página Web, hay partes del texto, que son importantes por lo que se deben resaltar (enfatizar), es decir mostrarlas en negrita o cursiva o ambas . Para enfatizar las palabras en una página Web utilice las siguientes etiquetas.

Etiquetas Descripción <I>...</I> Texto en cursiva

<B>...</B> Texto en negrita <U>…</U> Texto subrayado

<Strike>…</Strike> Texto tachado <Blink>… </Blink> Texto parpadeante

Ejemplo 4: Diseñar una página web que contenga texto con formato de negrita y cursiva. Además debe mostrar como titulo de la pagina: “Texto Cursiva-Negrita-Subrayado”. Guardar el documento con el nombre de: texto_cursivo4.htm

<HTML> <HEAD> <TITLE> Texto Cursiva – Negri ta - Subrayado </TITLE> </HEAD> <BODY> <h1> <b> <i> Ti tulo en Negri ta-Cursiva <i> </b> </h1> <h2> <b> Subti tulo en Negri ta </b> </h2> <h3> <i> Descripción del contenido en Cursiva </i> </h3> <h4> <i> <U> Texto Cursivo-Subrayado </U> </h4> <h5> <b> <Strike> Texto Negri ta-Tachado </Strike></b> </h5> </BODY> </HTML>

HTML .

by: magh 12

El resultado del código anterior se muestra en el navegador Mozilla Firefox: Titulo de la pagina con la etiqueta title. Contenido que inserto con la etiqueta body. La etiqueta H1, b, i, para indicar titulo, negrita y cursiva. La etiqueta H2, b, permite indicar subtitulo en negrita. La etiqueta H3, i, para indicar texto en cursiva. La etiqueta H4, i, u, indica texto en cursiva y subrayado.

Alineación del texto Para establecer la alineación a un párrafo, puede utilizar la etiqueta <P>, junto con su atributo Align ="...", el cual tiene tres valores: Left, Right y Center. Cuando se desea establecer la alineación de más de un párrafo, así como de otros elementos contenidos en la página; tales como: encabezados, imágenes y líneas de texto; al mismo tiempo, puede utilizar la etiqueta <DIV>...</DIV> y su atributo Align ="...", el cual tiene tres valores: Left (Izquierda), Right (Derecha) y Center (Centro). Ejemplo 5: Diseñar una página web que contenga un titulo con alineación centrada, posteriormente un párrafo sin formato, otro párrafo al centro formato negrita y por ultimo un párrafo con alineación derecha en formato cursiva. No olvide el titulo de la pagina: “Texto con alineación”. Guardar el documento con el nombre de: texto_formato5.htm <HTML> <HEAD><TITLE>Texto con al ineacion </TITLE></HEAD> <BODY> <P> Este párrafo se muestra sin formato, sin al ineación. <BR> Observe los siguientes ejemplos: <BR> <P Al ign ="Center"> <B> Este párrafo se muestra con formato negri ta. <BR> Y se encuentra al ineado al centro de la página. </B> <P Al ign ="Right"> <I> Este párrafo se encuentra al ineado al margen derecho <BR> de la página Web. <BR> Y con formato cursivo. <BR> </I> </P> Fin de la página. </BODY> </HTML>

HTML .

by: magh 13

El resultado del código anterior se muestra en el navegador Mozilla Firefox: Titulo de la pagina con la etiqueta title. Contenido del documento etiqueta body. La etiqueta P, align=center, B, se aplica al párrafo la alineación centrada y negrita. La etiqueta P, align=right, i, se aplica al párrafo, alineación derecha y texto en cursiva. PRACTICA 3: Diseñar una página web que muestre en un párrafo datos referentes a sus estudios de primaria y otro párrafo datos de la secundaria. El primer párrafo alinearlo centrado en negrita y el segundo con alineación derecha en cursiva. Además debe mostrar como titulo de la pagina: “Datos Escolares”. Existen otras etiquetas HTML, para añadir formatos especiales al texto. En la siguiente tabla se muestran las etiquetas que pueden ser utilizadas para añadir formato al texto.

Etiquetas Descripción <SMALL>...</SMALL> El texto es ligeramente menor que lo normal

<BIG>...</BIG> El texto es ligeramente más grande que lo normal <SUP>...</SUP> El texto se muestra como Superíndice

<SUB>...</SUB> El texto se muestra como Subíndice Ejemplo 6: Diseñar una página web que contenga un titulo con alineación centrada, posteriormente un párrafo con formato pequeño, otro párrafo con formato grande, en otro párrafo escriba las siguientes expresiones: H2O,X5+Y2. No olvide el titulo de la pagina: “Texto sub-superindice”. Guardar el documento con el nombre de: texto_formato6.htm <HTML> <HEAD>

<TITLE>Texto sub-supeindice</TITLE> </HEAD>

<BODY> <H1 ALIGN ="Center"> FORMATO DEL TEXTO</H1> <H2 ALIGN ="Center"> SUB-SUPERINDICE</H2> <BR><P> Esta parrafo se muestra <BR> sin formato alguno.

HTML .

by: magh 14

Observe los siguientes ejemplos: <BR><BR> <P> <SMALL>Este es un texto pequeño</SMALL><BR> <BIG> Este es un texto grande</BIG><BR> Texto con superindice: X <SUP> 5 </SUP> +Y <SUP> 2 </SUP><BR> Texto usando subindice: H <SUB> 2 </SUB> O <BR><P> </BODY> </HTML> El resultado del código anterior se muestra en el navegador Internet Explorer: Titulo de la pagina con la etiqueta title. Contenido del documento etiqueta body. La etiqueta H1, línea de titulo. Etiqueta H2, línea de subtitulo

La etiqueta P, BR, se aplica al párrafo y un salto de párrafo. La etiqueta SMALL, texto en tamaño pequeño. La etiqueta BIG, texto en tamaño un poco más grande. La etiqueta SUP, SUB, texto de forma superíndice y subíndice. PRACTICA 5: Diseñar una página web que contenga una expresión algebraica. Incluya lo siguiente: Factorizar la expresión: 8a2 + (c-d)2 y x9 + (m3 – 1)3, la primer expresión en tamaño fuente grande y la segunda expresión en tamaño fuente pequeño. Además debe mostrar como titulo de la pagina: “Factorización de Binomios”. IIII..88 CCoonnttrrooll ddee ffuueenntteess

La apariencia de una página Web, no sólo depende de los encabezados, los énfasis y la alineación; también es muy importante, controlar la apariencia de las fuentes y caracteres especiales, esto es, controlando el tipo de fuente, tamaño y color, que son propiedades que se aplican al texto, para dar una mejor presentación a las páginas.

HTML .

by: magh 15

Tamaño y color de las fuentes. Para establecer el tipo de fuente que se desea utilizar, el tamaño y color, al texto de una página Web, utilice la siguiente etiqueta con sus atributos y definiciones.

Etiqueta Atributo Descripción <FONT>...</FONT> Controla la apariencia del texto que encierra.

FACE ="..." Nombre de la fuente a utilizar. Puede usar nombres múltiples de fuentes separándose por comas y la primera que se encuentre en la lista será la que se utilice.

SIZE ="..." El tamaño de la fuente de 1 a 7. El predeterminado es 3. También se puede especificar como un valor relativo al tamaño actual, por ejemplo, +2.

COLOR ="..." Cambia el color al texto. Para establecer un color especifico para la fuente, puede definir en el atributo COLOR, cualquiera de los colores que se muestran en la siguiente tabla.

Colores Estándar Black (negro) Blue (azul) Gray (gris) White (blanco) Yellow (amarillo) Lime (lima) Red (rojo) Aqua (cían) Maroon (marrón) Green (verde) Fuschia (fucsia) Purple (púrpura) Navy (azul marino) Olive (verde oliva) Silver (color plata) Real (azul verdoso)

Ejemplo 8: Diseñar una página web que contenga una línea de texto en color verde de tamaño 6, posteriormente un párrafo con texto color azul tamaño 4. No olvide el titulo de la pagina: “Texto con Color”. Guardar el documento con el nombre de: texto_color8.htm <HTML>

<HEAD> <TITLE>Texto con Color </TITLE></HEAD> <BODY>

<FONT SIZE="6" COLOR="Green">Linea de texto de color verde y tamaño 6 <BR> </FONT> <BR><P> <FONT SIZE="4" COLOR="Blue"> Este párrafo se mostrará con la fuente <BR>actual del navegador, con un tamaño 4 <BR>y en color azul </FONT><BR> <P>Fin de la página.

</BODY> </HTML>

HTML .

by: magh 16

El resultado del código anterior se muestra en el navegador Mozilla Firefox: Titulo de la pagina con la etiqueta title. Contenido del documento etiqueta body. La etiqueta Font, controla las propiedades de texto. La etiqueta Size, Color, establece el tamaño y color del texto que escriba. PRACTICA 6: Diseñar una página web que contenga los colores del arco iris. El nombre de cada color mostrarlo con el color de fuente correspondiente, iniciando con tamaño de fuente 7 hasta 1. Además debe mostrar como titulo de la pagina: “Colores del Arco Iris”. IIII..99 SSeelleecccciióónn ddee uunn ttiippoo ddee ffuueennttee El atributo FACE, permite especificar la fuente exacta que se debe utilizar para mostrar el texto. Las fuentes que se definan en este atributo, deben encontrarse en el sistema del usuario (instaladas), de no hallarse, se aplicará la fuente estándar (Times New Roman) o la configurada en el navegador. También puede especificarse una fuente de segunda opción, para cuando no se tenga instalada la fuente de primera opción. Lo único que se debe hacer es separar los nombres de las fuentes con una coma en él atributo FACE. Ejemplo 9: Diseñar una pagina web que contenga como titulo de la pagina: “Tipo de Fuentes”, centrado, tipos de fuente: Courier, color Aqua, después dibujar una línea color negra. Con un párrafo centrado, tipo de fuente: Century, tamaño 4, color azul. Incluir otro párrafo alineado a la derecha, tipo de fuente: ComicSans o Arial, tamaño 3, color verde. Por último una línea con tipo de fuente: Georgia o Arial, tamaño 2, color rojo. Guardar el documento con el nombre de: tipo_fuente9.htm <HTML>

<HEAD><TITLE>Tipo de Fuentes </TITLE></HEAD> <BODY>

<H1 ALIGN ="Center"> <FONT FACE="Courier" COLOR= "Aqua"> Tipos de Fuente

</H1> <HR COLOR="Black"> <P ALIGN ="Center">

<FONT FACE ="Century" SIZE="4" COLOR= "Blue"> El párrafo se muestra centrado, <BR> con tipo de fuente Century,

HTML .

by: magh 17

<BR> de color azul , <BR> tamaño 2. </FONT> <BR> <P ALIGN ="Right"> <FONT FACE ="Comic Sans MS, Arial" SIZE="3" COLOR = "Green"> Este párrafo se muestra a la derecha, <BR> con tipo d fuente Comic Sans, <BR> en caso de no encontrar la fuente, <BR> entonces se apl icará la 2da opción <BR>que es la fuente Arial . </FONT><BR> <P> <FONT FACE="Georgia, Arial Black" SIZE="2" COLOR="Red"> Fin de la página. </FONT>

</BODY> </HTML> El resultado del código anterior se muestra en el navegador Mozilla Firefox: Titulo de la página etiqueta title. Contenido del documento etiqueta body. Etiqueta Allign, establece alineación del texto. La etiqueta Font, controla las propiedades de texto.

La etiqueta Face, Size, Color, establece el tipo de fuente, tamaño y color del texto. Etiqueta P, aplica al párrafo. Etiqueta BR, salto de línea. PRACTICA 7: Diseñar una página web que contenga la definición de: software, hardware y firmware. La primer definición aplique para la fuente: Comic Sans, tamaño: 6, color: rojo, alineación: derecha. La segunda definición aplique para la fuente: Century, tamaño: 5, color: azul, alineación: centrada. La tercer definición aplique para la fuente: Calibri, tamaño: 4, color: amarillo, alineación: izquierda. Además debe mostrar el titulo de la pagina: “Conceptos Actuales”.

IIII..1100 CCaarraacctteerreess eessppeecciiaalleess Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya

HTML .

by: magh 18

que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto. Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas. Carácter Código Descripción Carácter Código Descripción

< < Signo de menor que á á Letra á > > Signo de mayor que é é Letra é & & Signo ampersand í í Letra í “ " Comillas ó ó Letra ó Ñ ñ Letra ñ ú ú Letra ú Ñ Ñ Letra Ñ Á Á Letra Á Ü ü Letra ü É É Letra É Ü Ü Letra Ü Í Í Letra Í ¿ ¿ Signo ¿ Ó Ó Letra Ó ¡ ¡ Signo ¡ Ú Ú Letra Ú ¢ ¢ Signo de centavos ¢ ¼ ¼ Cuarto Fracción © © Derechos reservados© ½ ½ Medio fracción ® ® Marca registrada ® ¾ ¾ Tres cuartos ° ° Grados centígrados ° $ $ Signo de dólar · &#183 Punto a media línea ·

Ejemplo 10: Diseñar una página web que contenga como titulo de la pagina: “Titulo con símbolo menor-mayor. Posteriormente una línea de texto con el símbolo ©, en la siguiente línea incluir el símbolo de grados centígrados. Otra línea que contenga suma de fracciones ¼ + ½ = ¾ , una línea con Nombres propios con acentos y por ultimo una línea que muestre el signo de centavos (¢) y de dólares($). Guardar el documento con el nombre de: texto_especial10.htm <HTML> <HEAD><TITLE> < Ti tulo simbolo menor-mayor > </TITLE></HEAD> <BODY> Linea de texto con derechos reservados © <BR> La temperatura ambiente es de: 28 ° <BR> Al sumar ¼ + ½ = ¾ <BR> Nombre con acentos: María Hernández <BR> Edemetrio le pagan a &#162 10 el segundo, <BR>

por tanto al día gana $ 48. </BODY> </HTML>

HTML .

by: magh 19

El resultado del código anterior se muestra en el navegador Mozilla Firefox:

PRACTICA 8: Diseñar una página web que las marcas de varias empresas: Microsoft ©, Intel ®, además incluya el siguiente texto: Microsoft obtuvo ganancias de ¼ más que Intel en el primer trimestre del año. Además debe mostrar como titulo de la pagina: “Empresas”. IIII..1111 EEffeeccttooss eenn eell TTeexxttoo Hay un elemento que permite rodear un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del elemento: <FIELDSET>. Recuerda que si no tienes la versión adecuada de navegador, en los siguientes ejemplos sólo verás el texto, pero no los enmarcados.

Etiqueta Atributo Descripción <FIELDSET> .. </FIELDSET>

Permite enmarcar un texto o una imagen.

<LEGEND>.. </LEGEND>

Permite agregar una leyenda al texto enmarcado, simulando un titulo.

ALIGN=”..” La posición de la etiqueta: LEFT (por defecto), RIGHT o CENTER Ejemplo 11: Diseñar una página web que contenga como titulo de la página: Texto en recuadro. Posteriormente realizar el recuadro con: Texto dentro de un marco. Por último mostrar una imagen con el texto: imagen y texto dentro del recuadro. Debe guardar el documento con el nombre de: efecto_texto11.htm <HTML>

<HEAD><TITLE>Texto en Recuadro</TITLE></HEAD> <BODY>

<FIELDSET> <LEGEND> Titulo</LEGEND> Texto dentro de un marco </FIELDSET> <BR> <BR> <BR> <BR> <BR> <FIELDSET> <LEGEND> Imagen</LEGEND>

Imagen y Texto </FIELDSET>

</BODY> </HTML>

El símbolo &#169, muestra el Copyright. El símbolo ° muestra el grado centigrado. Los simbolos ¼ ½ ¾ muestran ¼, ½, ¾. El símbolo &a, muestra la letra a con acento

HTML .

by: magh 20

El resultado del código anterior se muestra en el navegador Mozilla Firefox: PRACTICA 9: Diseñar una página web que contenga mascotas del mundo acuático. Incluya el nombre de las tres mascotas dentro de recuadros separados. Además debe mostrar como titulo de la pagina: “Mascotas Acuáticas”.

IIII..1122 TTeexxttoo eenn mmoovviimmiieennttoo El elemento <MARQUEE> </MARQUEE> sirve para hacer que el contenido de un bloque se desplace horizontalmente a lo ancho del mismo. Además de texto el bloque puede contener también imágenes.

Etiqueta Atributo Descripción <MARQUEE> </MARQUEE>

Permite dar el efecto de texto en movimiento.

DIRECTION =”..”

Establece en que dirección se mueve el contenido del bloque en la pantalla. Tiene dos valores: LEFT (por defecto) y RIGHT.

BEHAVIOR =”..”

Determina cómo se mueve el contenido del bloque en la pantalla. Puede tener tres valores: SCROLL hará que el contenido del bloque aparezca por un extremo, desaparezca por el contrario y vuelva aparacer por donde comenzó. SLIDE (por defecto) hace que el contenido del bloque se deslice hacia el lado indicado por direction y se detenga al llegar al lado opuesto. Solamente volverá a moverse si la página es cargada de nuevo. ALTERNATE El contenido del bloque se moverá alternativamente en una dirección y otra, comenzando por la indicada por direction

La etiqueta FIELDSET y LEGEND, muestran el t i tulo del recuadro.

HTML .

by: magh 21

LOOP=n N es un número que indica las veces que el movimiento programado se realizará. El valor INFINITE (por defecto) producirá un bucle infinito.

scrolldelay=n N indica el tiempo de espera en milisegundos que se debe aplicar entre cada redibujado del bloque, es decir, la velocidad del movimiento.

scrollamount=n N indica el número de pixels que se deben tomar entre cada redibujado del bloque. Por defecto, tomará el bloque entero. Este parámetro debe utilizarse con cuidado, puede ser contradictorio con el anterior SCROLLDELAY.

ALIGN=”..” Indica la posición de la etiqueta: LEFT (por defecto), RIGHT y CENTER

BGCOLOR =”rrggbb”

Indica el color de fondo del bloque

Ejemplo 12: Diseñar una página web que contenga como titulo de la página: Texto en recuadro. Posteriormente realizar el recuadro con el Titulo y dentro del un texto. Por último mostrar una imagen y texto en un recuadro. Debe guardar el documento con el nombre de: texto_movimiento12.htm <HTML>

<HEAD><TITLE>Texto en Movimiento </TITLE></HEAD> <BODY BGCOLOR="BLUE">

<MARQUEE BGColor="YELLOW" > Texto en Movimiento

</MARQUEE> <BR> <BR> <BR> <MARQUEE BGColor="RED" >

<IMG SRC="agui las.jpg"> Imagen y Texto en Movimiento </MARQUEE> <P Al ign="Center"> <FONT COLOR="red"> <BR> <BR> <BR> La etiqueta Marquee, define el objeto en movimiento <BR> BgColor, define el color de fondo del bloque en movimiento<BR> </FONT>

</BODY> </HTML>

HTML .

by: magh 22

El resultado del código anterior se muestra en el navegador Internet Explorer: PRACTICA 10: Diseñar una página web que contenga los datos personales: nombre, dirección, teléfono y correo electrónico, los cuatro datos con tipo de fuente y color diferente además de agregar movimiento con direcciones opuestas (derecha-izquierda). El titulo de la pagina: “Datos en Movimiento”. IIII..1133 DDiisseeññoo ddee LLiissttaass Cuando se presenta información en papel, probablemente incluye listas de pasos numeradas o con viñetas; además de listas sangradas para organizar la información, como términos y sus respectivas definiciones o el lineamiento de un plan de negocios. Puesto que las listas son tan comunes, HTML proporciona etiquetas que automáticamente sangran el texto y agregan, números o viñetas delante de cada elemento de la lista. Hay tres tipos de listas HTML, las cuales son: • Listas ordenadas: son listas que tienen números o letras frente a cada elemento. • Listas no ordenadas: son listas con un símbolo especial de viñeta delante de cada

elemento. • Lista de definiciones: son listas sin ningún número o símbolo delante de cada elemento.

En la siguiente tabla se muestran las etiquetas utilizadas para crear las listas, que serán utilizadas en las páginas Web.

La etiqueta MARQUEE, permite mostrar texto en movimiento.

HTML .

by: magh 23

Etiqueta Atributo Descripción <OL>...</OL> Lista ordenada <LH>...</LH> Encabezado de la lista ordenada. <LI> Elemento de la lista ordenada. TYPE ="..." Tipo de numeración que se utiliza para etiquetar la lista. Los

valores posibles son: A, a, I, i, 1. START ="..." El valor con el cual comienza la lista. <UL>...</UL> Lista no ordenada <LH>...</LH> Encabezado de la lista no ordenada. <LI> Elemento de la lista no ordenada. TYPE ="..." El símbolo de viñeta especifico que se utiliza para marcar los

elementos de la lista. Los valores posibles son: Disc, Circle y Square.

<LI>...</LI> Un elemento de lista que debe utilizarse con <OL> o <UL>. TYPE ="..." Tipo de numeración que se utiliza para etiquetar la lista. Los

valores posibles son: A, a, I, i, 1. VALUE ="..." El valor numérico que debe tener este elemento (afecta a

este elemento y a todos los que le siguen en la lista <OL>). <DL>...</DL> Una lista de definición. <LH>...</LH> Encabezado de la lista definida. <LI> Elemento de la lista definida. <DT> Un término de definición, como parte de una lista de

definición. <DD> La definición correspondiente a un término de definición,

como parte de una lista de definición. Ejemplo 13: Diseñar una página web que contenga como título “Lista de los Continentes”, además de mostrar la lista de los nombres de los continentes con numeración ordinal, numeración romana y con letras. Debe guardar el documento con el nombre de: lista_ordenada13.htm <HTML>

<HEAD><TITLE> "Lista de los Continentes" </TITLE></HEAD> <BODY>

<h1 ALIGN="Center">Continentes</h1> <HR> <OL type=1>

<LH>En forma numeracion ordinal :</LH> <LI>Europa <LI>Asia <LI>África <LI>América <LI>Oceanía

</OL> <HR> <OL type=I>

HTML .

by: magh 24

<LH>En forma de numeracion romana:</LH> <LI>Europa <LI>Asia <LI>África <LI>América <LI>Oceanía

</OL> <HR> <OL type=A>

<LH>En forma de numeración de letras:</LH> <LI>Europa <LI>Asia <LI>África <LI>América <LI>Oceanía

</OL> </BODY>

</HTML>

HTML .

by: magh 25

PRACTICA 11: Diseñar una página web que contenga una lista ordenada de los lenguajes de programación orientado a la web. Además debe mostrar como titulo de la pagina: “Lenguajes de Programación Orientados a la Web”. Ejemplo 14: Diseñar una página web que contenga como titulo Lista definida por usuario debe mostrar una línea centrada, color amarillo, que contenga la clasificación del software, después el concepto con la propiedad de color azul con el elemento que lo defina, por último el concepto con la propiedad de color verde con el elemento que lo defina. Debe guardar el documento con el nombre de: lista_definida14.htm <HTML>

<HEAD> <TITLE> Lista Definida por usuario</TITLE> </HEAD> <BODY>

<h1 al ign="Center"> <Font Color="Red"> La clasi ficación principal del software,<BR> con la f inalidad de usar l istas definidas. </Font> </h1>

<HR> <DL>

<DT> <Font Color="Blue"> <B> Software de sistema </B> </Font> <DD> Se le considera a todos los sistemas operativos<BR> que controlan los trabajos de la computadora. <DT> <Font Color="Green"> <I> Software de apl icacion </I> </Font> <DD> Se considera a todas las aplicaciones que dir ige <BR> las distintas tareas para las que se util izan las computadoras.

</DL> </BODY>

</HTML>

PRACTICA 12: Diseñar una página web que contenga como titulo Lista definida por usuario, que contenga la clasificación de los dispositivos de hardware, después la definición.

La etiqueta DL define una l ista. La etiqueta DT, agrega uan elemento a la l ista. La etiqueta DD, agrega el texto al elemento de la l ista.

HTML .

by: magh 26

IIII..1144 CCrreeaacciióónn ddee VVíínnccuullooss ((EEnnllaacceess oo HHiippeerrvvíínnccuullooss)) La característica que más ha influido en el espectacular éxito del Web ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente estructura: <A HREF="XX"> YY </A> Donde XX es el destino del enlace (Obsérvese las comillas). YY es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado) Tipos de enlaces 1. Enlaces dentro de la misma página 2. Enlaces con otra página nuestra o con una página del web de otro usuario o servidor 3. Enlaces con una dirección de e-mail

Etiqueta Atributo Descripción <A>...</A> Con el atributo HREF, se crea un vínculo hacia otro documento

o ancla; con el atributo NAME; se crea un ancla hacia la cual puede establecerse un vínculo.

HREF ="..." La dirección de un documento o punto de ancla al cual se apunta.

NAME ="..." El nombre de este punto ancla en el documento. Ejemplos: Los enlaces con documentos externos al actual. Se indicará una URL que definirá el documento al que se accede si se sigue el enlace. La forma de indicarlo será: <A HREF="URL a la que se accede">Texto del Hiperenlace</A> El texto indicado entre las etiquetas de comienzo y de fin se presentará de forma resaltada y en el caso de seleccionar este texto el documento actual cambiará por el especificado en la URL. Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusión de la imagen, también dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sería: <A HREF="URL a la que se accede"><IMG SRC="Imagen"> si desea texto</A> En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace. Es importante indicar el nombre completo de la maquina a la que se accede, es decir el nombre y el dominio. Si se indica www, las maquinas de la red local si podrán localizarlo, pero para maquinas externas la referencia podría ser a otra maquina

HTML .

by: magh 27

URL absolutas y relativas Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir: http://maquina.dominio/camino/archivo.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamos un archivo html se considerará que se encuentra en el servidor y directorio del documento que lo referencia. Una URL relativa comenzará siempre por un nombre de directorio o por un archivo, ya que en este caso se asume que el servicio y el servidor - (http://maquina.dominio) - es el mismo del documento actual. Puede comenzar de alguna de las siguientes formas: Por una barra /, que indica que el camino del archivo se especifica desde el directorio raiz del servidor. Por dos puntos y una barra ../, significa subir en la estructura del directorio. Se considerará a partir del directorio anterior. Por un nombre de archivo o directorio, considerándose este a partir del directorio actual. Vincular a un lugar específico en la misma página Los vínculos específicos en la misma página, son creados con la misma etiqueta <A>, pero utilizando su atributo NAME. Este atributo funciona como una etiqueta que permite bifurcar a un lugar en específico dentro de la página, o en otra. Ejemplo 15: Diseñar una página web que contenga como titulo Vínculos en página, debe mostrar crear el ancla arrb, después una línea que indique vínculos en la misma página, después dos líneas que haga referencia a la mitad y al final del documento web, un párrafo con fuente Comic, color verde, varios saltos de línea, otro párrafo con formato predefinido, crear el ancla mitad, varios saltos de línea, otro párrafo con formato predefinido, crear el ancla fin y el enlace inicio de pagina. Guarde la página como: vinculo_misma_web15.htm <HTML>

<HEAD><TITLE>Vinculos en Pagina</TITLE></HEAD> <BODY>

<A Name ="Arrb"></A> <H1 Al ign ="Center">Vinculos en la<BR>misma pagina</H1><HR> <A Href ="#Mitad">A la mitad de la página</A><BR><P> <A Href ="#Fin">Fin de la página</A><BR><P> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Green"> Por lo regular este tipo de vínculos se crean, <BR> cuando existe la necesidad de que el usuario<BR> se desplace a un punto en especi f ico,<BR>

HTML .

by: magh 28

pero en la misma página;<BR> es decir, al inicio, a la mitad, al f inal <BR> u otro lugar en especi f ico.<BR><P> Observe como funciona esta página. </FONT> <BR> <P> <BR> <BR> <BR> <PRE>

Si la pagina se cargara en el navegador, se vería de la siguiente manera:

</PRE> Estas en el punto medio de la página <A Name ="Mitad"></A> <BR> <BR> <br> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <PRE>

Este contenido de la pagina se cargara al f inal de la ventana. Si no aprecias el efecto agrega mas sal tos de linea.

</PRE> Fin de la página<BR><P> <A Name ="Fin"></A> <A Href ="#Arrb">Inicio de página</A>

</BODY> </HTML>

La etiqueta A Name, define el ancla dentro de un mismo documento. La etiqueta A Href ="#, define el vinculo dentro del mismo documento.

HTML .

by: magh 29

PRACTICA 13: Diseñar una página web que contenga un reportaje o investigación de tema de su interés (deporte, espectáculo, moda, etc.), el contenido debe estar organizado en tres secciones, para que el usuario pueda navegar por la página a través de vínculos, es decir vínculos: arriba, centro y abajo. Muestre el titulo de la pagina: “Reportaje”.

Crear vínculos con otra página Web. Cuando se crean este tipo de vínculos, por lo regular son a una dirección específica en la Web, como es el caso de algún sitio Web; por ejemplo: buscadores, correo electrónico, etc. Cuando desea conectar su página con otra que se encuentre en la Web, sólo tiene que escribir la dirección (URL), en el atributo HREF y para que este vínculo funcione, debe estar colgado a la Internet. En caso de no estar conectado, no podrá anclarse al sitio Web. Ejemplo 16: Diseñar una página web que contenga como titulo Vínculos web, debe mostrar una línea centrada, color azul, que contenga Vínculos a otros sitios web, después una línea de color gris, fuente: Comic Sans o Arial, tamaño 3 indicando el texto a continuación se muestran cinco vínculos, por último centra los párrafos siguientes haciendo referencia a los 5 sitios en donde se puede enlazar. Debe guardar el documento con el nombre de: vinculo_web16.htm <HTML>

<HEAD><TITLE>Vínculos Web</TITLE></HEAD> <BODY>

<H1 Al ign ="Center" Color="Blue"> Vinculos a Otros <BR> Sitios Web </H1> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Gray"> A continuación, se muestran cinco <B>vínculos</B> <BR> que lo l levarán a los siguientes si t ios:</FONT><BR><P> <Div al ign="Center"> <A Href ="http://www.hotmai l .com"> Correo Electronico de MSN </A><BR><P> <A Href ="http://www.google.com.mx"> Buscador Google</A> <BR> <P> <A Href ="http: //www.tvazteca.com">TV Azteca</A><BR><P> <A Href ="http: //e-magh.com.mx"> Pagina Personal </A> <BR> <P> <A Href ="http: //www.sep.gob.mx">SEP</A> </Div>

</BODY> </HTML>

HTML .

by: magh 30

PRACTICA 14: Diseñar una página web que muestre enlaces a distintos blogs personales como: myspace, hi5, facebook, metroflog, twitter. Debe mostrar como titulo de la pagina: “Redes Sociales”. PRACTICA 15: Crear dos páginas web que contenga información del lugar en donde nació. Debe enlazarlas una con otra, es decir al ser presionado la palabra1 avance a la página 2, al ser presionada la palabra2 retroceda a la pagina 1. Debe mostrar como titulo de la paginas: “Palabras con Enlaces”.

IIII..1155 IInnsseerrcciióónn ddee IImmáággeenneess Una de las características principales del lenguaje html y de la www es la introducción de elementos multimedia. En un documento html se puede incluir cualquier imagen en alguno de los siguientes formatos gráficos: GIF, JPEG ó BMP El formato GIF es más recomendado para iconos, gráfico y el formato JPEG es más útil para imágenes reales como paisajes, personas. Se recomienda, primero transferir o copiar el archivo de imagen al mismo directorio en que se encuentra el archivo de texto HTML. Inserte la etiqueta HTML en el punto del texto donde desea que aparezca la imagen, además de incluir el nombre del archivo de imagen. La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato: <IMG SRC="URL de la Imagen" TITLE="Texto alternativo a la imagen" ALIGN ="...">

La etiqueta A Href, define un vínculo a un si tio web. La etiqueta NAME, permite definir el texto que contiene el vínculo.

HTML .

by: magh 31

Etiqueta Atributo Descripción <IMG> Inserta una imagen en la línea del documento.

SRC ="..." Único atributo obligatorio, indica la dirección o nombre de archivo de la imagen.

TITLE ="..." Indicará un texto alternativo a mostrar si no fue posible mostrar la imagen.

ALIGN ="..." Determina la alineación de la imagen dada. Si vale Left o Right, la imagen se alinea a la columna izquierda o derecha y todo el texto siguiente fluye al lado de la imagen. Los valores: Top, Middle, Bottom, AbsMiddle, o AbsBottom, determinan la alineación vertical de la imagen con otros elementos de la misma línea.

WIDTH=xx Indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También se expresará en pixeles o en tanto por ciento

HEIGHT=xx Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o menor se escalará a este tamaño

Ejemplo 17: Diseñar una página web que contenga como titulo Imágenes, debe mostrar una línea de texto centrada, color rojo, que contenga Esta página contiene imágenes, después una línea de color rojo, enseguida un texto de fuente: Comic o Arial, tamaño: 3, color: azul y junto a este una imagen, en el siguiente párrafo mostrar primero la imagen y junto a esta un texto de fuente: Century o Arial, tamaño: 2, color: verde. Debe guardar el documento con el nombre de: imagen17.htm <HTML>

<HEAD> <TITLE>Imagenes</TITLE>

</HEAD> <BODY>

<H1 Al ign ="Center" Color="Red">Esta pagina contiene imagenes: <BR></H1> <HR Color="Yel low"> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Blue"> Primero se muestra el Texto y en la misma l inea muestra la imagen <IMG SRC="agui las.jpg" TITLE="Club America"> </FONT> <BR> <P> <FONT FACE ="Century, Arial" SIZE="2" COLOR = "Green"> <IMG SRC="agui las.jpg" TITLE="Club America"> Primero se muestra la Imagen y en la misma l inea muestra el texto </FONT> <BR> <P>

</BODY> </HTML>

HTML .

by: magh 32

Ejemplo 18: Diseñar una página web que contenga como titulo Imagen Combinada, debe mostrar una línea de texto centrada, color rojo, que contenga Esta página contiene imágenes, después una línea de color rojo, enseguida un texto de fuente: Comic o Arial, tamaño: 3, color: azul, alineado a la mitad respecto a la imagen tomada del subdirectorio imágenes, en la siguiente línea mostrar primero la imagen tomada del subdirectorio modelos y junto a esta un texto de fuente: Century o Arial, tamaño: 2, color: verde, centrado respecto a la imagen. Debe guardar el documento con el nombre de: subimagen18.htm <HTML>

<HEAD> <TITLE>Imagen Combinada </TITLE> </HEAD> <BODY>

<H1 Color="Red" Al ign="Center">La pagina tiene imágenes y texto: <BR> </H1> <HR Color="Red"> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Blue"> Primero se muestra el Texto y en la siguiente linea se muestra la imagen tomada del directorio imagen. Al ineado el texto a la mitad de la imagen <IMG SRC="imagen/fi refox. jpg" TITLE="Browser" ALIGN="Middle"> </FONT> <BR> <P> <FONT FACE ="Century, Arial" SIZE="2" COLOR = "Green"> <IMG SRC="imagen/logo.jpg" TITLE="Plantel" ALIGN="Middle"> Primero se muestra la imagen tomada del directorio modelos <BR> y enseguida se muestra el texto. Al ineado a la mitad de la imagen </FONT> <BR> <P>

</BODY> </HTML>

La etiqueta IMG SRC, define la imagen a mostrar. La etiqueta TITLE, muestra un texto cuando el usuario posiciona el puntero encima de la imagen.

HTML .

by: magh 33

Ejemplo 19: Diseñar una página web que contenga como titulo Distintas Imágenes, debe mostrar una línea de texto centrada, que contenga La pagina tiene imágenes con distinto tamaño, después una línea de color verde, enseguida un texto con una imagen de tamaño normal, en el siguiente párrafo texto con una imagen aumentando el tamaño de la misma con loa atributos: width, height. Por último un texto y una imagen con la referencia o el vínculo al Correo de Hotmail. Debe guardar el documento con el nombre de: imagen_gde19.htm <HTML>

<HEAD> <TITLE> Distintas Imagenes </TITLE> </HEAD> <BODY>

<H1 Al ign="Center">La pagina tiene imagenes con distinto tamaño <BR></H1> <HR Color="Green"> Se muestra la imagen de tamaño normal <IMG SRC="cbtis12. jpg"> <BR> <P> Se muestra la imagen mas grande, uti l izando:WIDTH,HEIGHT <IMG SRC="cbtis12. jpg" WIDTH=200, HEIGHT=200> <BR> <P> Si desea que la imagen sirva como vinculo a la página del Hotmai l : <A HREF="http://www.hotmai l .com"><IMG SRC="cbtis12. jpg"> </A>

</BODY> </HTML>

La etiqueta IMG SRC, define la imagen a mostrar. La etiqueta ALIGN, determina la al ineación de la imagen.

HTML .

by: magh 34

PRACTICA 16: Diseñar una página web que contenga como titulo Mi Personalidad. Debe contener una serie de imágenes que definan su personalidad, además de realizar una pequeña descripción del significado de la imagen. PRACTICA 17: Crear tres páginas web con una foto cada una. Debe enlazarlas una con otra, es decir al ser presionada la foto1 avance a la página 2, al ser presionada la foto2 avance a la página 3, al ser presionada la foto3 retroceda a la pagina 1. Debe mostrar como titulo de la paginas: “Fotos con Enlaces”. IIII..1166 FFoonnddooss ccoonn CCoolloorr UUnniiffoorrmmee Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY>, de la siguiente manera: <BODY BGCOLOR="#rrggbb">

rr Es un número indicativo de la cantidad de color rojo gg Es un número indicativo de la cantidad de color verde bb Es un número indicativo de la cantidad de color azul

Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos. Estos dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

La etiqueta IMG SRC, define la imagen a mostrar. Las etiquetas WIDTH, HEIGHT determinan ancho y al to de la imagen. La etiqueta A HREF, especi f ica un vínculo a un si t io web.

HTML .

by: magh 35

Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores.

Los colores primarios: Otros colores son: #FF0000 Rojo #FFFFFF Blanco #00FF00 Verde #000000 Negro #0000FF Azul #FFFF00 Amarillo

Ejemplo 20: Diseñar una página web que contenga como titulo Color de Fondo, debe mostrar una línea de texto centrada, que contenga el texto Color de Fondo Amarillo, línea de separación color rojo. Un párrafo de color azul. Después un texto con un vinculo, en otro párrafo texto con imagen y por último texto e imagen con vinculo a yahoo. Debe guardar el documento con el nombre de: color_fondo20.htm <HTML>

<HEAD><TITLE>Color de Fondo</TITLE></HEAD> <BODY BGCOLOR="#FFFF00"> <H1 Al ign="Center"> Color de Fondo Amari l lo <BR> </H1> <HR Color="Red"> <FONT COLOR="blue"> Se muestra una l inea de texto en color azul </FONT> <BR> <BR> <BR> <BR> <BR> <FONT COLOR="blue"> Se muestra una l inea de texto <BR> <A Href="http:/mx.yahoo.com" TITLE="Yahoo">CON VINCULO </A> </FONT> <BR> <BR> <BR> <BR> <BR> Se muestra una imagen <IMG SRC="cbtis12. jpg"> <BR> <BR> <BR> Se muestra una imagen con vinculo <A Href="http:/www.cbtis12.edu.mx"> <IMG SRC="cbtis12. jpg"> </BODY>

</HTML>

La etiqueta BODY BGCOLOR, establece el color de fondo de la página web. La etiqueta IMG SRC, define la imagen a mostrar. La etiqueta A HREF, especi f ica un vínculo a un si tio web.

HTML .

by: magh 36

PRACTICA 18: Diseñar una página web que contenga como titulo Fondo, debe mostrar una imagen y texto en color de su elección, incluya un color de fondo que haga contraste con su texto e imagen. IIII..1177 CCoolloorreess ddeell tteexxttoo yy ddee llooss eennllaacceess Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectura contra un fondo oscuro se dificultaría o incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden escoger los colores del texto y de los enlaces, añadiendo a la etiqueta Body lo siguiente:

Etiqueta Atributo Descripción <BODY>

…. </BODY>

Representa algunos atributos que son de definición global para todo el documento, estos definirán los colores y el fondo del documento web.

background="url"

Definirá la imagen que se utilizará de fondo del documento HTML, la URL definida será el camino a una imagen. Esta se muestra detrás (al fondo) del texto y las imágenes del documento HTML. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario.

TEXT ="..." Cambia el color de la totalidad del texto de la página LINK ="..." Especifica el Color de los enlaces VLINK ="..." Especifica el color de los enlaces visitados ALINK="..." Especifica el color de los enlaces activos (el que adquieren en el

momento de ser pulsados) Los códigos de los colores son los mismos que se han visto con anterioridad. La etiqueta, con todas sus posibilidades, sería: <BODY BACKGROUND="URL" BGCOLOR=#rrggbb TEXT=#rrggbb LINK=#rrggbb VLINK=#rrggbb ALINK="#rrggbb"> Ejemplo 21: Diseñar una página web que contenga como titulo Imagen de Fondo, debe mostrar una línea de texto centrada, que contenga Uso de Imagen como fondo, línea de separación color rojo. Una línea de texto color verde. Después un texto color blanco y por ultimo una línea de texto. Guarde el documento con el nombre de: body_atributos21.htm <HTML> <HEAD> <TITLE> Imagen de Fondo </TITLE> </HEAD> <! Background, toma la imagen del subdirectorio: imagen> <! TEXT, agrega color al texto de la pagina que no tiene color asignado> <BODY BACKGROUND="imagen/oso.jpg" TEXT="Yel low">

<H1 Al ign="Center">Imagen como Fondo de la Pagina <BR></H1> <HR Color="Red"> <FONT COLOR="Blue"> <B>

HTML .

by: magh 37

Se muestra una l inea de texto en color azul </B> </FONT> <BR> <BR> <BR> <BR> <BR> <FONT COLOR="White"> Se muestra una l inea de texto en color blanco <BR> </FONT> <BR> <BR> <BR> <BR> <BR> Otra l inea de texto con el color especi ficado <BR> en el atrbuto Text del Body

</BODY> </HTML>

La etiqueta BODY BACKGROUND, establece una imagen de fondo de la página web. La etiqueta TEXT, en caso de que no tenga asignado un color específico, toma el color que de en esta etiqueta.

HTML .

by: magh 38

Ejemplo 22: Diseñar una página web que contenga como titulo Atributos del Body, debe mostrar una línea de texto centrada, que contenga Atributos del Body, línea de separación color rojo. Una línea de texto con una palabra que tenga un link. Después un texto que tenga link hacia un dirección de correo electrónico. Debe guardar el documento con el nombre de: body_atributos22.htm <HTML>

<HEAD> <TITLE>Atributos del Body</TITLE>

</HEAD> <! BGColor, especificamos color de fondo "AZUL"> <! TEXT, especifica color de todo el texto de la pagina "AMARILLO"> <! LINK, especifica el color que tomara cualquier texto con link "ROJO"> <! VLINK, especifica el color que tomara cualquier link visitado "VERDE"> <! ALINK, especifica el color que tomara el ultimo link visitado "BLANCO"> <BODY BGColor="Navy" TEXT="Yellow" LINK="Red" VLINK="Green" ALINK="White">

<H1 Align="Center">Atributos del Body <BR></H1> <HR Color="Red"> <P> <FONT COLOR="Black" SIZE="5"> Se muestra una linea de texto en color negro con <A Href="http://www.hotmail.com"> enlace </a> de color rojo </FONT> </P> <BR>Cuando se haga clic sobre es link, <br>cambiara al color especificado (blanco) es el ultimo link visitado <BR>y por ultimo cambiara al color especificado (verde) <BR> <BR> Texto que permite al usuario indicar <A HREF="MAILTO:[email protected]"> contacto </A>. Cualquier duda o comentario. <BR> <BR> Otra linea de texto con el color especificado <BR> en el atributo Text del Body

</BODY> </HTML>

HTML .

by: magh 39

PRACTICA 19: Diseñar una página web que contenga como titulo Atributos del Documento. Una línea de texto con una palabra que tenga un link hacia un sitio web de su preferencia, otra línea de texto que tenga link hacia su dirección de correo electrónico; ambos links agregue la propiedad de color verde y cuando sea visitado que cambie a blanco. IIII..1188 DDiisseeññoo ddee ttaabbllaass Permite la representación de datos por filas y columnas, en forma tabular. La definición es muy flexible indicando solo los elementos que forman cada fila y columna, calculándose de forma automática el tamaño que deben tener las celdas. En una tabla podemos introducir cualquier elemento del lenguaje html como: imagenes, enlaces, texto, listas, cabeceras, etc. Etiqueta Atributo Descripción

<TABLE> </TABLE>

Es la etiqueta que permite definir una tabla.

border=n Permite definir una tabla con un borde, el grosor es de n píxeles. cellspacing=n Indica el espacio que debe existir entre las distintas celdas de la

La etiqueta BGColor, especifica el color de fondo de la página. La etiqueta TEXT, especifica color de todo el texto en caso de que no tenga asignado un color. La etiqueta LINK, especifica el color que tomara cualquier texto con link. La etiqueta VLINK, especifica el color que tomara cualquier link visitado. La etiqueta ALINK, especifica el color que tomara el último link visitado.

HTML .

by: magh 40

tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas

cellpadding=n Es la cantidad de espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0 las celdas aparecerán sin separación.

width=valor o porcentaje%:

Será el ancho de la tabla, se puede indicar como valor absoluto o como porcentaje del ancho del documento. En el primer caso se definirá en puntos y en el segundo en función del tamaño del documento. Se recomienda utilizar tamaños de tabla en porcentaje del documento, ya que de esta forma la tabla queda perfectamente ajustada al documento.

height=valor o

porcentaje%

Definirá el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. En este caso es más recomendado en valor absoluto ya que el alto es más difícil que pueda coincidir con la ventana.

rowspan Indicará el número de filas que ocupará está celda en la misma fila. Es decir, permite combina celdas en una fila.

colspan Indicará el número de columnas que ocupará la celda actual, obtendremos una celda que ocupa varias columnas. Combina celdas en una columna

<caption> ..

</caption>

Especifica el titulo de la tabla, este se mostrará resaltado en la parte superior externa de la tabla. Se mostrará centrado horizontalmente.

align=top o Bottom

Con el atributo ALIGN indicaremos si el titulo debe aparecer arriba (TOP) o abajo (BOTTOM) de la tabla.

<TR>… </TR>

Permite formar cada fila de la tabla. Hay que repetirla tantas veces como filas queremos que tenga la tabla.

align= left o center o right

Indica la alineación del elemento dentro de la celda, en este caso afectará a todos los valores situados en la fila actual, también se podrá indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores: LEFT: Alineación a la izquierda de la celda. RIGHT: Alineación a la derecha de la celda. CENTER: Indicará centrado.

valign= top ó middle ó bottom

Indicará la alineación vertical del dato dentro de la celda. Se podrá especificar donde se colocarán los datos dentro de la celda. Afectarán a toda la fila. Los valores que puede tomar son: TOP: Parte superior de la celda. MIDDLE: Centrado verticalmente dentro de la celda. BOTTOM: En la parte baja de la celda.

bgcolor= rrggbb

Indicará el color de fondo que tendrán todas las celdas de la fila de la tabla. El formato para definir los colores es el mismo que se usa BODY.

<TD>.. </TD>

Permite formar las distintas celdas que contendrá cada fila de la tabla. Hay que repetirlas tantas veces como celdas queramos que tenga la fila.

<TH>.. </TH>

Es utilizada para colocar encabezamientos en negrita sobre las columnas

HTML .

by: magh 41

Ejemplo 23: Diseñar una página web que contenga como titulo Tabla Simple sin Borde, debe mostrar una línea de texto centrada, que contenga Uso de Tabla Sin Borde, línea de separación color rojo. Un párrafo que explique las etiquetas de la tabla. Por último se define la tabla, se agrega una fila con 3 elementos, además se agrega una 2da. fila con 3 elementos Debe guardar el documento con el nombre de: tabla_sinborde23.htm <HTML>

<HEAD> <TITLE>Tabla Simple sin Borde</TITLE> </HEAD> <BODY>

<H1 Al ign="Center"> Tablas sin Borde <BR></H1> <HR Color="Red"> Con la etiqueta Table especi f icamos el inicio de una tabla:<BR> La etiqueta TR,especi fica la FILA. <BR> La etiqueta TD,especi fica cada elemento de la f i la. <BR> <BR> <TABLE Border>

<TR> <TD>Elemento1 Fi la1 <TD> Elemento2 Fila1 <TD> Elemento3 Fi la1

<TR> <TD>Elemento1 Fi la2 <TD> Elemento2 Fila2 <TD> Elemento3 Fi la2

</TABLE> </BODY> </HTML>

La etiqueta TABLE, define una tabla. La etiqueta Border, establece el grosor del borde de la tabla. La etiqueta TR, define una fi la. La etiqueta TD, define una celda en la fi la.

HTML .

by: magh 42

Ejemplo 24: Diseñar una página web que contenga como titulo Tabla Combinada, debe mostrar una línea de texto centrada, que contenga Tabla con Celdas Combinadas, línea de separación. Un párrafo que explique las etiquetas de la tabla. Se define la tabla, se agrega una fila con 1 elemento vacío y otro elemento que combinada 4 celdas de la fila, además se agrega una 2da. fila con 1 elemento que combina 2 celdas de la 1er. columna además se agregan 4 elementos de Texto a la misma fila, por último se agrega una fila con 4 elementos numéricos. Debe guardar el documento con el nombre de: tabla_combinada24.htm <HTML>

<HEAD> <TITLE>Tabla Combinada</TITLE> </HEAD> <BODY>

<H1 Al ign="Center">Tablas con Celdas Combinadas </H1> <HR> La etiqueta TR, especi fica la FILA. <BR> La etiqueta TH ColSpan, permite combinar 4 celdas en la fi la <BR> La etiqueta TD, especi fica cada elemento de la f i la. <BR> La etiqueta TH RowSpan, permite combinar 2 celdas en la columna <BR> <BR> <BR> <TABLE BORDER>

<TR> <TD><TH COLSPAN=4>Grupos <TR>

<TH rowspan=2 val ign=bottom>alumnos<td> H <td> J <td> K <td> M <TR>

<TD> 42 <TD> 42 <TD> 43 <TD> 43 </TABLE>

</BODY> </HTML>

La etiqueta TABLE, define una tabla. La etiqueta Border, establece el grosor del borde de la tabla. La etiqueta TR, define una fi la. La etiqueta TH, establece el encabezado de columna. La propiedad ColSpan, indica el número de columnas que ocupará la celda actual (celda combinada). La etiqueta TD, define una celda en la fi la.

HTML .

by: magh 43

Ejemplo 25: Diseñar una página web que contenga como titulo Tabla Azul Combinada, debe mostrar una línea de texto centrada, que contenga Tabla con Borde Color y Combinada línea de separación color rojo. Un párrafo que explique las etiquetas de la tabla. Se define la tabla, se agrega una fila con 2 elementos combinando 2 celdas de la fila, se agregan 3 filas con 4 elementos cada fila. Guarde el documento con el nombre tablaColor_combina25.htm <HTML>

<HEAD> <TITLE>Tabla Azul Combinada </TITLE>

</HEAD> <BODY>

<H1 Al ign="Center"> Tablas con Borde, Color y Celdas Combinadas <BR></H1> <HR Color="Red"> Con la etiqueta Table especi f icamos el inicio de una tabla:<BR> Border, especi f ica el ancho de borde de la tabla <BR> BGColor, especi f ica el Color de Fondo de la tabla <BR> Caption, muestra el t i tulo en la parte superior de la tabla <BR> La etiqueta TR,especi fica la FILA. <BR> La etiqueta TH ColSpan,especi fica combinar 2 celdas en la fi la <BR> La etiqueta TR,nuevamente especi f ica la FILA. <BR> La etiqueta TD,incluye los elementos en las celdas en la f i la <BR> <BR> <TABLE BORDER=5 BgColor="Blue">

<Caption>Titulo Externo de Tabla </Caption> <TR>

<TH COLSPAN=2>Futbol</TH><TH COLSPAN=2>Basketbal l</TH> </TR> <TR>

<td>america</td><th>morel ia</td><td>chicago</td><td>lakers</td> </TR> <TR>

<td>atlas</td><td>monterrey</td><td>miami</td><td>snantonio</td> </TR> <TR>

<td>santos</td><td>pachuca</td><td>boston</td><td>nyork</td> </TR>

</TABLE> </BODY>

</HTML>

HTML .

by: magh 44

Ejemplo 26: Diseñar una página web que contenga como titulo Alineación de Contenido, debe mostrar una línea de texto centrada, que contenga Alineación de Contenido de los Elementos, línea de separación color rojo. Un párrafo que explique las etiquetas de la tabla. Se define la tabla con borde grosor 10 y centrada, se agrega una fila con 3 elementos como titulo de columnas, se agregan dos filas más con 3 celdas cada fila y se agrega el contenido. Guarde el documento con el nombre tabla_alineacion26.htm <HTML>

<HEAD> <TITLE>Al ineacion de Contentido</TITLE>

</HEAD> <BODY>

<H2 Al ign="Center">Al ineacion del Contenido de los Elementos<BR> de las Celdas en las Tablas <BR></H2> <HR Color="Red"> Con la etiqueta Table especi f icamos el inicio de una tabla:<BR> Border, especi f ica el ancho de borde de la tabla <BR>

La etiqueta TABLE, define una tabla. La etiqueta Border, establece el grosor del borde de la tabla. La etiqueta Bicolor, define el color de fondo de la tabla. La etiqueta TR, define una fi la. La etiqueta TH, establece el encabezado de columna. La propiedad ColSpan, indica el número de columnas que ocupará la celda actual (celda combinada). La etiqueta TD, define una celda en la fi la.

HTML .

by: magh 45

Al ign, al inea toda la tabla al centro del documento.<BR> La etiqueta TR,especi fica la FILA. <BR> La etiqueta TH,especi fica el Ti tulo de las Columnas de la Tabla <BR> Al ign, al inea el contenido de la celda: centro, derecha o izquierda <BR> La etiqueta TD,especi fica cada elemento de la f i la. <BR> <BR> <TABLE BORDER=10 Al ign="Center"> <TR>

<TH ALIGN=CENTER>C o n t i n e n t e <TH ALIGN=CENTER>P a i s<TH ALIGN=CENTER>E s t a d o

<TR> <TD ALIGN=LEFT>America <TD ALIGN=CENTER> Mexico <TD ALIGN=RIGHT>Michoacan

<TR> <TD ALIGN=RIGHT>Asia <TD ALIGN=CENTER> Japon <TD ALIGN=RIGHT>Jal isco

</TABLE> </BODY>

</HTML>

La etiqueta TABLE, define una tabla. La etiqueta Border, establece el grosor del borde de la tabla. La etiqueta TR, define una fi la. La etiqueta TH, establece el encabezado de columna. La etiqueta TD, define una celda en la fi la.

HTML .

by: magh 46

Ejemplo 27: Diseñar una pagina web que contenga como titulo Colores en la Celda, debe mostrar una línea de texto centrada, que contenga Uso de los Colores en cada Celda, una línea de separación color rojo. Un párrafo que explique las etiquetas de la tabla. Se define la tabla con borde grosor 5 y centrada, se agrega una fila con 3 elementos como titulo de columnas con color de fondo de fila amarillo, después se agrega una fila con color de fondo azul agregando los elementos a cada celda y definiendo el color de la fuente. Por último se agrega una fila definiendo el color a cada, agregando los elementos a cada celda. Guarde el documento con el nombre tabla_ColorCelda27.htm <HTML>

<HEAD> <TITLE>Colores en la Celda</TITLE>

</HEAD> <!BgColor, especi fica el color de fondo del documento> <BODY BGcolor="Cyan">

<H2 Al ign="Center">Colores en Cada Celda<BR> de la Tabla <BR></H2> <HR Color="Red"> <!Especi ficamos el Color de fuente azul .Establecemos Negri ta> <FONT Color="Blue"> <B> Con la etiqueta Table especi f icamos el inicio de una tabla:<BR> Border, especi f ica el ancho de borde de la tabla <BR> La etiqueta TR,especi fica la FILA. BgColor establece color de fondo de la f i la<BR> La etiqueta TH,especi fica el ti tulo de las columnas en la tabla <BR> La etiqueta TR,especi fica otra FILA. <BR> La etiqueta TD,especi fica cada elemento de la f i la. <BR> Font,especi f ica el color de fuente del contenido de la celda <BR> <BR> </B> </FONT> <TABLE BORDER=5 Al ign="Center"> <TR BGCOLOR=YELLOW>

<TH> Nombre <TH> Telefono <TH> Correo <TR BGCOLOR=BLUE>

<TD> <FONT COLOR="WHITE"> Ana <TD> <FONT COLOR="WHITE"> 533-33-33 <TD> <FONT COLOR="WHITE"> [email protected] </FONT>

<TR> <TD BGCOLOR=GREEN>Betty

<TD BGCOLOR=WHITE> 533-33-33 <TD BGCOLOR=RED> [email protected]

</TABLE> </BODY>

</HTML>

HTML .

by: magh 47

PRACTICA 20: Diseñar una página web que contenga como titulo Agenda Azul, inserte una Tabla con Borde y el fondo Color de su preferencia. Con la siguiente información: Nombre, correo electrónico y página preferida. Estos dos últimos datos deben contener el vinculo correspondiente, ya sea a su correo y sitio web. Al menos de 5 personas PRACTICA 21: Diseñar una página web que contenga de titulo directorio turístico, inserte una tabla con la siguiente información: ciudad, contacto y una imagen. La primer columna alineación: centrada, fuente: arial, negrita, color: azul La segunda columna alineación derecha, fuente: comic sans, cursiva y enlace al email. La tercer columna alineación: centrada, incluya un enlace a la ciudad que se trate, en caso de ser necesario ajuste la imagen a un tamaño considerable. Al menos de 6 ciudades.

La etiqueta TABLE, define una tabla. La etiqueta Border, establece el grosor del borde de la tabla. La etiqueta TR, define una fi la. La propiedad Bgcolor, establece el color de la celda. La etiqueta TH, establece el encabezado de columna. La etiqueta TD, define una celda en la fi la.

HTML .

by: magh 48

IIII..1199 MMuullttiimmeeddiiaa:: AAuuddiioo yy VViiddeeoo Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita a insertar imágenes dentro de un texto, mostrar un fondo en el documento y modificar los colores que presentarán los distintos textos. Con las instrucciones básicas de HTML que hemos visto hasta ahora esto es lo máximo que se puede conseguir, la posibilidad de mostrar vídeo o sonido en un documento HTML está limitada a la capacidad y a la configuración del navegador. La forma básica de incluir un archivo de un formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el navegador llame a una aplicación externa que trate este tipo de archivos. El navegador tendrá definida una lista aplicaciones que trabajarán con los formatos más comunes de archivos de vídeo, audio o imágenes. Para reproducir sonido, se utiliza la etiqueta con sus atributos:

Etiqueta Atributo Descripción <BGSOUND ..> Permite incluir música de fondo en una pagina web. Se

incluye dentro de las etiquetas <HEAD> </HEAD> SRC="…” Se indicará el archivo de audio que se debe reproducir. El

archivo podrá ser de formato .wav, .au o midi LOOP=n o

INFINITE Indica cuantas veces se ejecutará la pieza musical, podrá indicarse un número o INFINITE que indicará de forma indefinida.

VOLUME=n El volumen que se escuchará en el sonido (mínimo -10,000 y máximo 0).

Los formato de vídeo más habituales son: AVI y los MPEG. El que se puedan ver o no, dependerá de que el formato utilizado sea compatible con nuestro reproductor multimedia. Siempre que se incluyan archivos de vídeo, es buena idea acompañarlo de los "codecs" necesarios para el reproductor. Los "codecs" son unos controladores que se instalan en tu máquina y permiten que tu reproductor multimedia pueda decodificar correctamente los distintos formatos de vídeo que existen, y que son muchos.

Etiqueta Atributo Descripción <IMG DYNSRC...>

Permite la reproducción de video en una pagina web.

DYNSRC="..." Indica la URL del archivo que se mostrará. El archivo podrá ser de formato .avi

LOOP=n o INFINITE

Indica el número de veces que se mostrará el vídeo.

CONTROLS= CONSOLE o SMALLCONS

OLE

Indicará si se mostrarán los botones de control, que permitirán para, volver a reproducir, rebobinar. Puede tomar los valores de: CONSOLE (por defecto) o SMALLCONSOLE

START= FILEOPEN ó

MOUSEOVER

Indica si la secuencia de vídeo empezará al abrir el archivo (FILEOPEN) o cuando pase el cursor del ratón encima (MOUSEOVER).

ALIGN= Sus valores top, bottom, center, left, right, middle y texttop HEIGHT y HEIGHT (alto) y WIDTH (ancho) no pueden omitirse, ya que

HTML .

by: magh 49

WIDTH. sus valores por defecto no permiten ver ninguna imagen real. Los tamaños Standard: 90x120, 120x160, 180x240, 240x320, 300x400

Ejemplo 28: Diseñar una página web que contenga como título Música de Fondo, que reproduzca de forma automática una melodía, establezca el color de fondo de la ventana AzulAqua, mostrar un texto como encabezado y por ultimo un párrafo describiendo cada etiqueta del código. Guarde el documento con el nombre sonido_fondo28.htm <HTML>

<HEAD> <TITLE>Musica de Fondo</TITLE> <BGSOUND SRC="cambio.mid"> <EMBED SRC="cambio.mid" WIDTH=2 HEIGHT=0 AUTOSTART="TRUE">

</HEAD> <BODY BGcolor="Aquamarine">

<H1 Al ign="Center">Delei ta tu oido con musica de fondo <BR> <BR></H1> <HR Color="Red"> <P Al ign="Center">

<FONT COLOR=BLUE> bgsound src,especi f ica el sonido a reproducir automaticamente IE<br> embed src,especi f ica el sonido a reproducir automaticamente NetScape Se recomienda que el archivo de sonido se encuentre en el mismo directorio<BR> <BR> que la pagina. Caso contrario NO olvides direccionar al directorio adecuado.

</FONT> </P>

</BODY> </HTML>

La etiqueta BGSound Scr, permite incluir música de fondo en una página web. La etiqueta EMBED SRC, se utiliza para insertar la ruta de los archivos de sonido. El atributo AUTOSTART, indica si el archivo se reproducirá automáticamente al cargarse la página, toma los valores true o false.

HTML .

by: magh 50

Ejemplo 29: Diseñar una página web que contenga como titulo Música Activada por Usuario, el fondo de la ventana AzulAqua, mostrar un texto como encabezado, después un párrafo describiendo cada etiqueta del código, por último el link a la melodía. Debe guardar el documento con el nombre: sonido_xUsuario29.htm <HTML>

<HEAD> <TITLE>Musica Activada por el Usuario</TITLE> </HEAD> <!BgColor, especi fica el color de fondo del documento>

<BODY BGcolor="Aquamarine"> <H1 Al ign="Center">Delei ta tu oido en el Momento <BR> que lo Decidas<BR> <BR> </H1> <HR Color="Red"> <P Al ign="Center"> <FONT COLOR=Red> Cuando el usuario decida escuchar el sonido, <BR> debe hacer cl ic en el enlace cancion <BR> <BR> A Href,especi f ica la ubicacion del sonido a reproducir <BR> <BR> O puedes uti l izar una imagen que sirva de l ink. <BR> Alt,permite mostrar un texto al ternativo cuando el usuario,<BR> pasa el puntero del raton encima de la imagen <BR> <BR> Escucha esta <A HREF="cambio.mid"> cancion</A> <BR> <BR> <A HREF="cambio.mid"><IMG SRC="sound1.gi f" Al t="Escucha Vientos de Cambio"></A> </FONT> </P>

</BODY> </HTML>

La etiqueta BGcolor, establece el color de fondo en la página web. La etiqueta A HREF, establece la referencia a un archivo de audio.

HTML .

by: magh 51

Ejemplo 30: Diseñar una página web que contenga como titulo Video, el fondo de la ventana Azul, mostrar un texto como encabezado, después un párrafo describiendo cada etiqueta del código, por ultimo incluir el video para reproducción automática. Debe guardar el documento con el nombre video30.htm <HTML>

<HEAD> <TITLE>Video</TITLE>

</HEAD> <BODY BGcolor="Blue">

<H1 Al ign="Center">Observa el video en pantalla<BR> <BR></H1> <HR Color="Red"> <P Al ign="Center"> <FONT COLOR=Yel low> <B> DYNSRC,especi fica el video a reproducir de forma automatica en IE <BR> <BR> WIDTH,especi fica la anchura en que se mostrara la reproduccion del video <BR> HEIGHT,especi fica la al tura en que se mostrara la reproduccion del video <BR> En caso de omiti rse ambos valores.Toma el ancho-al to original del video.<BR><BR> Loop,numero de veces que se mostrara el video<BR> <BR> Start, indica que la secuencia de vídeo empezará al abri r el documento web<BR> <BR> EMBED SRC,especi fica el sonido a reproducir de forma automatica en NetScape<BR> <BR> Se recomienda que el archivo de video se encuentre en el mismo <BR> directorio que la pagina. <BR> Caso contrario NO olvides direccionar al directorio adecuado. </b> </FONT> </P> <IMG DYNSRC=" Waka-waka.avi" WIDTH=400 HEIGHT=400 LOOP=INFINITE START=FILEOPEN> <EMBED SRC=" Waka-waka.avi" WIDTH=200 HEIGHT=200 >

</BODY> </HTML>

HTML .

by: magh 52

PRACTICA 22: Diseñar una página web que contenga un tema de sus interés y con música de fondo que tenga relación con el contenido investigado. PRACTICA 23: Diseñar una página web que contenga un tema de sus interés y con un video que tenga relación con el contenido investigado. IIII..2200 DDooccuummeennttooss ccoonn FFrraammeess

Con las frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite: • Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma

un hiperenlace puede tener como destino un documento y la frame en el que se mostrará.

• Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla y permitirá usarlo en los hiperenlaces.

La etiqueta IMG DYNSRC, permite la reproducción del video especificado. La etiqueta HEIGHT y WIDTH establecen el ancho y alto del video. La etiqueta LOOP, indica el número de veces que se mostrará el vídeo. La etiqueta Stara, indica que la secuencia de vídeo comience al abrir el archivo.

HTML .

by: magh 53

• En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta a este tamaño o mantiene su tamaño intacto.

Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendrá una región estática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará el resultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con un índice o una cabecera estática, consiguiendo así una mejora de la navegación al poder acceder al índice de una manera más rápida y efectiva. El uso de las frames es útil para cierto tipo de documentos, pero puede llegar a dificultar la navegación, dentro de un documento con frames no tendrá utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarán fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botón derecho del ratón sobre ella y seleccionar la opción volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transición entre documentos.

Etiqueta Atributo Descripción <FRAMESET.../FRAMESET>

Permite dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.

ROWS=”xx,yy” Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según cada una de las filas definidas. El tamaño de la frame, puede expresarse de las siguientes formas: * En valor absoluto, que indicará el tamaño en puntos de la pantalla. Los frames ocuparán la totalidad del espacio de la ventana del navegador * En tanto por ciento sobre el tamaño de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustará para que coincida con el tamaño de la ventana. * De forma relativa con el símbolo * que indica el tamaño restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupará dos tercios del espacio restante y la segunda un tercio del espacio restante.

COLS=”xx,yy” Toma los mismos valores que ROWS, pero en este caso para las columnas, se definirán las frames de forma vertical.

NAME Asigna un nombre a un marco para que después podamos referirnos a él.

SRC Indica la dirección del documento HTML que ocupará el marco.

SCROLLING Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto

AUTO Deja al navegador la decisión. Las otras opciones que tenemos son YES y NO.

NORESIZE Si lo especificamos el usuario no podrá cambiar de tamaño el marco.

HTML .

by: magh 54

FRAMEBORDER Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero.

MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.

MARGINHEIGHT Igual al anterior pero con márgenes verticales. TARGET

target=”_blank” target=”_self” target=_parent

target=”_top”

Indicará la frame de destino de la operación. Normalmente, en páginas sin frames, cuando se seguía un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual, con las frames se puede especificar que frame será la de destino, no siendo necesario que sea la frame del documento actual. Indica que se muestre en una nueva ventana vacía, para seguir el enlace se lanza otra ventana distinta del navegador. Se mostrará en la misma ventana o frame que lo referencia, se puede usar para modificar el valor dado por BASE. Se muestra en la frame o estructura de frames que llamó al documento actual. Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana.

Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso no se define la etiqueta BODY. Su estructura es la siguiente:

<HTML> <HEAD>

Definiciones de la cabecera </HEAD> <FRAMESET>

Definición de las frames que forman el documento y de los archivos que incluye cada una.

</FRAMESET> </HTML>

Definiremos las frames que formarán el documento, su sintaxis es similar a la de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente:

<FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas> <FRAME SRC=URL_1 NAME="Nombre de la frame1"> <FRAME SRC=URL_2 NAME="Nombre de la frame1"> . . . <FRAME SRC=URL_N NAME="Nombre de la frameN">

</FRAMESET> Ejemplo 31: Diseñar una página web que contenga como titulo Pagina Dividida Horizontalmente. Debe contener 3 frames horizontales con los valores 20%, 50% y 30%. Debe guardar el documento con el nombre frame31.htm

HTML .

by: magh 55

<HTML> <TITLE> Pagina Dividida Horizontalmente </TITLE> <FRAMESET ROWS="20%,50%,30%"> <FRAME NAME="frame1"> <FRAME NAME="frame2"> <FRAME NAME="frame3"> </FRAMESET> </HTML> Ejemplo 32: Diseñar una página web que contenga como titulo Noticias a la Carta. Debe contener 2 frames verticales con los valores 10% y 90%. El frame de la izquierda inserte una lista de vínculos a periódicos nacionales y extranjero. Cuando se presione el hipervínculo de periódico nacional actualizar el frame de la derecha con la página principal del periódico, cuando se trate de periódico extranjero debe mostrar en una ventana diferente. Debe guardar el documento con el nombre frame32.htm <HTML> <TITLE> Noticias a la Carta </TITLE> <FRAMESET COLS="10%,90%"> <FRAME SRC="noticias.htm" NAME="indice"> <FRAME NAME="destino"> </FRAMESET> </HTML> Observe que el documento web que contiene los frames, hace referencia a una página llamada “noticias.htm”, el código se muestra continuación: <HTML> <BODY> <A HREF="http://www.milenio.com/" target="destino"> Mi lenio </A> <BR> <A HREF="http:/ /www.elf inanciero.com.mx/" target="destino"> Financiero </A> <BR> <A HREF="http://www.cronica.com.mx/" target="destino"> La Cronica </A> <A HREF="http:/ /www.eluniversal.com.mx/" target="destino">El Universal </A> <BR> <A HREF="http://www.abc.es/" target="_blank"> EL ABC </A> <BR> <BR> <A HREF="http:/ /www.avisador.com.uy/" target="_blank">El Avisador </A> <BR> <A HREF="http: //www.nyt imes.com/" target="_blank"> TheNewYork Times </A> </BODY> </HTML>

HTML .

by: magh 56

PRACTICA 24: PRACTICA 25:

Adobe Dreamweaver CS3 .

by: magh 57

IIIIII.. AAddoobbee DDrreeaammwweeaavveerr CCSS33 IIIIII..11 IInnssttaallaacciióónn

Inserte el DVD de instalación de la Suite Adobe CS3. Caso contrario puede descargarlo de: http://www.adobe.com/es/downloads/

Después de insertar el DVD, espere unos segundos a que inicie la instalación.

Observe el menú de instalación en donde puede instalar: Photoshop, Flash, Dreamweaver, Fireworks, Illustrator, Alter Effects Para continuar con la instalación haga clic en el botón Dw.

http://www.adobe.com/es/downloads/�


by: magh 58

Posteriormente aparecen las especificaciones y características de Dreamweaver, haga clic en el icono Dw, para continuar la instalación.

Este proceso tarda algunos minutos, así que tómelo con paciencia.

Después aparece la licencia, para continuar con la instalación haga en el botón Aceptar.


by: magh 59

En caso de que tenga particiones o varias unidades de disco duro, le pregunta en donde desea instalar el paquete, seleccione la unidad y después haga clic en el botón Siguiente.

En la siguiente ventana le indica los componentes a instalar, haga clic en el botón Instalar.

Espere unos minutos para que el proceso de instalación se lleve a cabo de forma adecuada.


by: magh 60

Al terminar la instalación, aparece la ventana indicándole un resumen de los componentes instalados, después haga clic en el botón Finalizar.

En la siguiente ventana le indica que teclee el Número de serie del software (debe usar un Generador de Serial).

El KeyGen se encuentra en el DVD, para ello haga clic en el icono de la llave de Dw.


by: magh 61

Al ejecutar el KeyGen, aparece la ventana ZWT, haga clic en el bóton Generate Serial.

Observe el número que se genero, seleccione y copie el Número de serie.

El serial generado con el KeyGen, debe pegarlo en el número de serie de la ventana de Dreamweaver, después haga clic en el botón Siguiente.


by: magh 62

En la siguiente ventana le pide Activar, haga clic en Otras opciones de activación.

De las alternativas de activación, haga clic en la opción A través de teléfono, después haga clic en el botón Aceptar.

En esta ventana le pide que teclee el número de activación.


by: magh 63

Observe que aparece el Numero de serie que tecleo y se genera otro numero de activación (selecciónelo y cópielo).

El número de activación que copio, ahora péguelo abajo del botón Generate Serial, haga clic en el botón Activate, seleccione ese número para utilizarse para la activación.

El número de activación generado debe teclearlo. Por último haga clic en el botón Activar.


by: magh 64

En esta ventana le indica que ha finalizado la activación de su producto, haga clic en el botón Hecho.

Esta ventana le pide que registre su programa (producto), haga clic en el botón No registrarse.

Para finalizar su instalación, le pide que indique los tipos de archivos que desea editar con su programa Dreamweaver. Se recomienda dejar las opciones y por último haga clic en el botón Aceptar.


by: magh 65

Cuando finaliza la instalación de forma correcta, aparece el logo del producto.

Listo ha finalizado satisfactoriamente la instalación de su producto.


by: magh 66

IIIIII..22 EEssppaacciioo ddee ttrraabbaajjoo El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente. En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.

H E F G A. Barra Insertar B. Barra de herramientas Documento C. Ventana de documento D. Grupos de paneles E. Selector de etiquetas F. Inspector de propiedades G. Panel Archivos. H. Barra de título. I. Barra de menús Barra de título Contiene el nombre del programa (Adobe Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

H I


by: magh 67

Barra de menús Contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles. Barra de herramientas Documento La barra de herramientas Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.

A B C D E F G H I J K A. Mostrar vista de código B. Mostrar vistas de código y diseño C. Mostrar vista de diseño D. Título del documento E. Administración de archivos F. Vista previa/Depurar en explorador G. Actualizar vista de diseño H. Ver opciones I. Ayudas visuales J. Validar formato K. Comprobar compatibilidad con navegadores En la barra de herramientas Documento, aparecen las siguientes opciones: Mostrar vista de código Sólo muestra la vista Código en la ventana de documento. Mostrar vistas de código y diseño Divide la ventana de documento entre las vistas Código y Diseño. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Mostrar vista de diseño Sólo muestra la vista Diseño en la ventana de documento. Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en código, no podrá ver los archivos en la vista Diseño y los botones Diseño y Dividir aparecerán atenuados. Título del documento Permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo. Administración de archivos Muestra el menú emergente Administración de archivos. Vista previa/Depurar en explorador Le permite obtener una vista previa o depurar el documento en un navegador. Seleccione un navegador en el menú emergente. Actualizar vista de diseño Actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.


by: magh 68

Nota: La actualización también actualiza funciones de código que dependen del DOM (modelo de objeto de documento), como la capacidad para seleccionar las etiquetas inicial y final de un bloque de código. Ver opciones Permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas. Ayudas visuales Permite utilizar distintas ayudas visuales para el diseño de las páginas. Validar formato Permite validar el documento actual o una etiqueta seleccionada. Comprobar compatibilidad con navegadores Le permite comprobar si el CSS es compatible con diferentes navegadores.

Barra de estado, nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%). A B C D E F G A. Selector de etiquetas B. Herramienta Seleccionar C. HerramientaMano D. Herramienta Zoom E. Establecer nivel de aumento F. Menú emergente Tamaño de ventana G. Tamaño del documento y tiempo de descarga estimado Selector de etiquetas 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. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mantenga presionada la tecla Control y elija una clase o un ID del menú contextual. Herramienta Seleccionar Activa y desactiva la herramienta Mano. Herramienta Mano Permite hacer clic en el documento y arrastrarlo por la ventana de documento. Herramienta Zoom y menú emergente Establecer nivel de aumento Permiten establecer un nivel de aumento para el documento. Menú emergente Tamaño de ventana (Sólo visible en la vista Diseño.) Permite cambiar el tamaño de la ventana de documento a dimensiones predeterminadas o personalizadas. Tamaño del documento y tiempo de descarga Muestra la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia. Descripción general del inspector de propiedades El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El


by: magh 69

contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen de la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (por ejemplo, la ruta de archivo de la imagen, el ancho y el alto de la imagen, el borde que rodea la imagen en caso de que lo haya, etc.). El inspector de propiedades se encuentra en el borde inferior del espacio de trabajo de forma predeterminada, pero puede colocarlo en el borde superior del espacio de trabajo o convertirlo en un panel flotante del espacio de trabajo. Introducción a la barra Insertar La barra Insertar contiene botones para crear e insertar objetos, como tablas, elementos PA e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón. Los botones están organizados en varias categorías entre las que puede cambiar haciendo clic en las fichas situadas en la parte superior de la barra Insertar. Si el documento actual contiene código de servidor, documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado. Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón. La barra Insertar está organizada en las categorías siguientes: Categoría Común Permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas. Categoría Diseño Permite insertar tablas, etiquetas div, marcos y widgets de Spry. También puede elegir dos vistas para tablas: Estándar (valor predeterminado) y Tablas expandidas. Categoría Formularios Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validación de Spry. Categoría Datos Permite insertar objetos de datos de Spry y otros elementos dinámicos, como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.


by: magh 70

Categoría Spry Contiene botones para crear páginas de Spry, incluidos objetos de datos y widgets de Spry. Categoría Texto Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul. Categoría Favoritos Permite agrupar y organizar los botones de la barra Insertar que utiliza con más frecuencia en un lugar común. Categorías de código de servidor Sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.

IIIIII..33 CCrreeaacciióónn yy eeddiicciióónn ddee aarrcchhiivvooss Creación de documentos de Dreamweaver Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Además de documentos HTML, es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos ColdFusion Markup Language (CFML), ASP, JavaScript y hojas de estilos en cascada (CSS). También admite archivos de código fuente, como Visual Basic, .NET, C# y Java. Dreamweaver proporciona varias opciones para crear un documento nuevo. Puede crear cualquiera de los tipos de documento siguientes: • Un nuevo documento o plantilla en blanco • Un documento basado en uno de los diseños de página predefinidos que vienen con Dreamweaver, incluidos más de 30 diseños de página basados en CSS • Un documento basado en una de las plantillas existentes

Creación de una página en blanco Puede crear una página que contenga un diseño CSS prediseñado o bien crear una completamente en blanco y realizar su propio diseño. 1 Seleccione Archivo > Nuevo o presiona las teclas Ctrl + N. 2 En la categoría Página en blanco del cuadro de diálogo Nuevo documento, seleccione el tipo de página que desea crear en la columna Tipo de página. Por ejemplo, seleccione HTML para crear una página HTML, ColdFusion para crear una página ColdFusion, etc. 3 Si desea que su nueva página contenga un diseño CSS, seleccione un diseño CSS


by: magh 71

prediseñado en la columna Diseño; de lo contrario, seleccione Ninguno. En función de su selección, aparece una vista previa y una descripción del diseño seleccionado en el lado derecho del cuadro de diálogo.

Los diseños CSS predefinidos ofrecen los siguientes tipos de columnas: Fija El ancho de colu mna se especifica en píxeles. La columna no cambia de tamaño en función del tamaño del navegador o de la configuración del texto del visitante del sitio. Elástica El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamaño del texto. El diseño se adapta si el visitante del sitio cambia la configuración del texto, pero no en función del tamaño de la ventana del navegador. Flotante El ancho de columna se especifica como porcentaje del tamaño del navegador del visitante. El diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto. Híbrida Las columnas son una combinación de las tres opciones anteriores. Por ejemplo, en el diseño de dos columnas híbridas, la barra lateral derecha tiene una columna principal flotante que se ajusta al tamaño del navegador y una columna elástica a la derecha que se ajusta al tamaño de la configuración del texto del visitante del sitio.

4 Seleccione un tipo de documento del menú emergente DocType. En la mayoría de los casos, puede utilizar la selección predeterminada XHTML 1.0 de transición. Si selecciona una de las definiciones de tipo de documento XHTML en el menú DocType (DTD), las páginas nuevas serán compatibles con XHTML. Por ejemplo, puede hacer que un documentoHTML sea compatible con XHTML seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato de hipertexto ampliable, Extensible HypertextMarkup Language) es un replanteamiento del lenguaje HTML como aplicación XML. En general, la utilización de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad anterior y futura de los documentos Web.

5 Si ha seleccionado un diseño CSS en la columna Diseño, seleccione una ubicación para el código CSS del diseño en el menú emergente Diseño CSS en. Añadir a Head Añade código CSS para el diseño al encabezado de la página que se va a crear. Crear nuevo archivo Añade código CSS para el diseño a un nuevo archivo CSS externo y la nueva hoja de estilos a la página que se va a crear. Vincular a archivo existente Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseño. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS. Esta opción es especialmente útil cuando desea utilizar el mismo diseño CSS (cuyas reglas CSS se encuentran en un único archivo) en varios documentos.

6 (Opcional) También puede adjuntar hojas de estilos CSS a la nueva página (independientes del diseño CSS) al crearla.

Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.


by: magh 72

7 Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificación y la extensión del archivo.

8 Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y descargar más contenido de diseño de páginas.

9 Haga clic en el botón Crear. 10 Guarde el nuevo documento (Archivo > Guardar). 11 En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que

desea guardar el archivo. Es recomendable guardar el archivo en un sitio de Dreamweaver.

12 En el cuadro Nombre de archivo, introduzca un nombre para el archivo.

Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos.

Creación de una plantilla en blanco Puede utilizar el cuadro de diálogo Nuevo documento para crear plantillas de Dreamweaver. De forma predeterminada, las plantillas se guardan en la carpeta Templates del sitio. 1 Seleccione Archivo > Nuevo o presione las teclas Ctrl + N. 2 En el cuadro de diálogo Nuevo documento, seleccione la categoría Plantilla en blanco. 3 Seleccione el tipo de página que

desea crear en la columna Tipo de página. Por ejemplo, seleccione Plantilla HTML para crear una plantilla HTML, Plantilla de ColdFusion para crear una plantilla de ColdFusion, etc.

4 Si desea que su nueva página contenga un diseño CSS, seleccione un diseño CSS predefinido en la columna Diseño; de lo contrario, seleccione Ninguno. En función de su selección, aparece una vista previa y una descripción del diseño seleccionado en el lado derecho del cuadro de diálogo. Los diseños CSS predefinidos ofrecen los siguientes tipos de columnas: Fija El ancho de columna se especifica en píxeles. La columna no cambia de tamaño en función del tamaño del navegador o de la configuración del texto del visitante del sitio.


by: magh 73

Elástica El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamaño del texto. El diseño se adapta si el visitante del sitio cambia la configuración del texto, pero no en función del tamaño de la ventana del navegador. Flotante El ancho de columna se especifica como porcentaje del tamaño del navegador del visitante. El diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto. Híbrida Las columnas son una combinación de las tres opciones anteriores. Por ejemplo, en el diseño de dos columnas híbridas, la barra lateral derecha tiene una columna principal que se ajusta al tamaño del navegador y una columna elástica a la derecha que se ajusta al tamaño de la configuración del texto del visitante del sitio.

5 Seleccione un tipo de documento del menú emergente DocType. En la mayoría de los casos, utilizará la selección predeterminada, XHTML 1.0 de transición. Si selecciona una de las definiciones de tipo de documento XHTML en el menú DocType (DTD), las páginas nuevas serán compatibles con XHTML. Por ejemplo, puede hacer que un documentoHTML sea compatible con XHTML seleccionando. XHTML 1.0 de transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato de hipertexto ampliable, Extensible HypertextMarkup Language) es un replanteamiento del lenguaje HTML como aplicación XML. En general, la utilización de XHTML permite aprovechar las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad anterior y futura de los documentos Web.

6 Si ha seleccionado un diseño CSS en la columna Diseño, seleccione una ubicación para el código CSS del diseño en el menú emergente Diseño CSS en. Añadir a Head Añade código CSS para el diseño al encabezado de la página que se va a crear. Crear nuevo archivo Añade código CSS para el diseño a una nueva hoja de estilos CSS externa y asocia la nueva hoja de estilos a la página que se va a crear. Vincular a archivo existente Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseño. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS. Esta opción es especialmente útil cuando desea utilizar el mismo diseño CSS (cuyas reglas CSS se encuentran en un único archivo) en varios documentos.

7 (Opcional) También puede adjuntar hojas de estilos CSS a la nueva página (independientes del diseño CSS) al crearla. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.



10 Haga clic en el botón Crear.


by: magh 74

11 Guarde el nuevo documento (Archivo > Guardar). Si aún no ha añadido regiones editables a la plantilla, aparece un cuadro de diálogo que le indica que no hay regiones editables en el documento. Haga clic en Aceptar para cerrar el cuadro de diálogo.

12 En el cuadro de diálogo Guardar como plantilla, seleccione un sitio para guardar la plantilla y añada una descripción para la misma en el cuadro Descripción.

13 En el cuadro Nombre de archivo, introduzca un nombre para la nueva plantilla. No es necesario que añada una extensión de archivo al nombre de la plantilla. Al hacer clic en Guardar, se añade la extensión .dwt a la nueva plantilla y se guarda en la carpeta Templates del sitio.

Creación de un documento basado en una plantilla 1 Seleccione Archivo > Nuevo o presione las teclas Ctrl + N. 2 En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de plantilla. 3 En la columna Sitio, seleccione el sitio de Dreamweaver que contiene la plantilla que desea utilizar; a continuación, seleccione una plantilla de la lista de la derecha. 4 Desactive Actualizar página

cuando cambie la plantilla si no desea actualizar esta página cuando realice cambios en la plantilla en la que se basa.



7 Haga clic en Crear y guarde el documento (Archivo > Guardar).

Creación de una página basada en un archivo de muestra de Dreamweaver Dreamweaver se suministra con distintos archivos de elementos de diseño y diseños de página profesionales. Puede utilizar estos archivos de muestra como punto de partida para el diseño de las páginas de sus sitios. Cuando crea un documento basado en un archivo de muestra, Dreamweaver crea una copia del archivo. Puede obtener una vista previa de un archivo de muestra y leer una descripción breve de los elementos de diseño de un documento en el cuadro de diálogo Nuevo documento. En el caso


by: magh 75

de las hojas de estilos CSS, puede copiar hojas de estilos predefinidas y, a continuación, aplicarlas a los documentos. Nota: Si crea un documento a partir de un conjunto de marcos predefinido, sólo se copiará la estructura del conjunto de marcos, no el contenido. Asimismo, deberá guardar cada archivo de marco por separado. 1 Seleccione Archivo > Nuevo o presione las teclas Ctrl + N. 2 En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de muestra. 3 En la columna Carpeta demuestra, seleccione Hojas de estilos, Conjunto de marcos o Páginas de inicio y, a continuación, seleccione un archivo de muestra en la lista de la derecha. 4 Haga clic en el botón Crear.

El documento nuevo se abrirá en la ventana de documento (vista Diseño). Si ha seleccionado

Hojas de estilos CSS, la hoja de estilos se abre en la vista Código. 5 Guarde el archivo (Archivo > Guardar). 6 Si aparece el cuadro de diálogo Copiar archivos dependientes, defina las opciones y haga

clic en Copiar para copiar los activos en la carpeta seleccionada. Puede elegir su propia ubicación para los archivos dependientes o utilizar la ubicación predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo de muestra).

Cómo abrir y editar documentos existentes Puede abrir una página Web existente o un documento basado en texto, aunque no se hayan creado en Dreamweaver, y editarlos en la vista Diseño o la vista Código. Si el documento que abre es un archivo de Microsoft Word guardado como HTML, puede utilizar el comando Limpiar HTML de Word para eliminar las etiquetas de formato sobrantes que Word inserta en los archivos HTML. Para limpiar HTML o XHTML no generados por Microsoft Word, utilice el comando Limpiar HTML. También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos XML, hojas de estilos CSS o archivos de texto guardados con procesadores de texto o editores de texto. 1 Seleccione Archivo > Abrir o presione las teclas Ctrl + O.

También puede utilizar el panel Archivos para abrir los archivos.


by: magh 76

2 Localice y seleccione el documento que desea abrir. Nota: Si todavía no lo ha hecho, es recomendable organizar los archivos que va a abrir y editar en un sitio de Dreamweaver, en lugar de abrirlos desde otra ubicación. 3 Haga clic en Abrir.

El documento se abrirá en la ventana de documento. Los archivos JavaScript, archivos de texto y las hojas de estilos CSS se abren de forma predeterminada en la vista Código. Puede actualizar el documento mientras trabaja con Dreamweaver y luego guardar los cambios en el archivo.

Limpieza de archivos HTML de Microsoft Word Puede abrir documentos guardados con Microsoft Word como archivos HTML y, a continuación, utilizar el comando Limpiar HTML de Word para eliminar los códigos HTML sobrantes o innecesarios generados por Word. El comando Limpiar HTML de Word se encuentra disponible para documentos guardados como archivos HTML por Word 97 o superior. El código que Dreamweaver elimina lo utiliza Word principalmente para aplicar formato y mostrar documentos en Word, por lo que no es necesario para ver el archivo HTML. Conserve una copia del archivo original de Word (.doc) como copia de seguridad, ya que es posible que no pueda volver a abrir el documento HTML en Word una vez aplicada la función Limpiar HTML de Word. Para limpiar HTML o XHTML no generados por Microsoft Word, utilice el comando Limpiar HTML. 1 Guarde el documento de Microsoft Word como archivo HTML.

Nota: En Windows, cierre el archivo en Word para evitar problemas al compartir el archivo. 2 Abra el archivo HTML en Dreamweaver.

Para visualizar el código HTML generado por Word, cambie a la vista Código: Ver>Código


by: magh 77

3 Seleccione Comandos > Limpiar HTML de Word. Nota: Si Dreamweaver no logra determinar qué versión de Word se utilizó para guardar el archivo, seleccione la versión correcta en el menú emergente. 4 Seleccione (o anule la selección de) las

opciones de limpieza. Las preferencias que introduzca se guardarán como configuración de limpieza predeterminada. Dreamweaver aplica la configuración de limpieza al documento HTML y se abre un registro en el que se reflejan los cambios (a menos que desactive dicha opción del cuadro de diálogo). Quitar todo el formato específico de Word Elimina todos los códigos HTML específicos de Microsoft Word, incluidos los códigos XML de las etiquetas HTML, los metadatos y las etiquetas de vínculos personalizados de Word situados en la sección del encabezado del documento, el formato XML de Word, las etiquetas condicionales y su correspondiente contenido y los párrafos y márgenes vacíos de los estilos. Puede seleccionar cada una de estas opciones individualmente utilizando la ficha Detalladas. Limpiar CSS Elimina todos los códigos CSS específicos de Word, incluidos los estilos CSS en línea cuando el estilo padre tiene las mismas propiedades de estilo, los atributos de estilo que comiencen por “mso”, las declaraciones de estilos ajenos a CSS, los atributos de estilo CSS de las tablas y todas las definiciones de estilo no utilizadas de la sección del encabezado. Esta opción se puede personalizar más en la ficha Detalladas. Limpiar etiquetas <font> Elimina las etiquetas HTML y convierte el texto normal predeterminado a HTML de tamaño 2. Reparar etiquetas mal anidadas Elimina las etiquetas de formato de fuentes insertadas por Word fuera de las etiquetas de párrafo y encabezado (nivel de bloque).


by: magh 78

Definir color de fondo Permite introducir un valor hexadecimal para establecer el color de fondo del documento. Si no define ningún color de fondo, la página HTML de Word tendrá un fondo gris. El valor hexadecimal predeterminado es blanco. Aplicar formato de origen Aplica al documento las opciones de formato de origen que especifique en las preferencias de Formato HTML y en SourceFormat.txt. Mostrar registro al terminar Muestra un cuadro de alerta con detalles acerca de los cambios realizados en el documento inmediatamente después de concluir la limpieza.

5 Haga clic en Aceptar o en la ficha Detalladas si desea seguir personalizando las opciones Quitar todo el formato específico de Word y Limpiar CSS y luego haga clic en Aceptar.

IIIIII..44 IInnsseerrcciióónn ddee tteexxttoo Dreamweaver permite añadir texto a páginas Web escribiendo el texto directamente en una página, copiando y pegando texto de otro documento o arrastrando texto de otra aplicación. También puede importar texto o establecer un vínculo con otros tipos de documentos, como archivos de texto ASCII, archivos en formato de texto enriquecido y documentos de Microsoft Office. Adición de texto a un documento Para añadir texto a un documento de Dreamweaver puede escribir texto directamente en la ventana de documento o puede cortar y pegar texto. También puede importar texto de otros documentos. Al pegar texto en un documento de Dreamweaver, puede utilizar el comando Pegar o Pegado especial. El comando Pegado especial le permite especificar el formato del texto pegado de diversas formas. Por ejemplo, si desea pegar texto de un documento con formato de Microsoft Word en un documento de Dreamweaver pero desea eliminar todo el formato de manera que pueda aplicar su propia hoja de estilos CSS al texto pegado, puede seleccionar el texto en Word, copiarlo al portapapeles y utilizar el comando Pegado especial para seleccionar la opción que le permite pegar sólo texto. Al utilizar el comando Pegar para pegar texto de otras aplicaciones, puede establecer las preferencias de pegado como opciones predeterminadas. Nota: Las teclas Ctrl + V pegan sólo texto (sin formato).

❖ Añada texto al documento siguiendo uno de estos procedimientos: • Escriba texto directamente en la ventana de documento. • Copie texto de otra aplicación, cambie a Dreamweaver, coloque el punto de inserción en la vista Diseño de la ventana de documento y seleccione Edición > Pegar o Edición > Pegado especial. Al seleccionar Edición > Pegado especial o presione las teclas Ctrl + Mayus + V, puede elegir diversas opciones de formato al pegar.


by: magh 79

IIIIII..55 IInnsseerrcciióónn ddee ccaarraacctteerreess eessppeecciiaalleess Algunos caracteres especiales se representan en HTML mediante un nombre o un número, denominado entidad. HTML incluye nombres de entidad para caracteres como el símbolo de copyright (©), el signo ampersand (&) y el símbolo de marca comercial registrada (®). Cada entidad tiene un nombre (como —) y un equivalente numérico (como ). HTML utiliza paréntesis angulares <> en el código, pero quizá necesite expresar los caracteres especiales “mayor que” y “menor que” sin que Dreamweaver los interprete como código. En este caso, utilice > para mayor que (>) y < para menor que (<).

Desgraciadamente, muchos navegadores (especialmente los navegadores antiguos y los que no son Netscape Navigator ni Internet Explorer) no muestran correctamente muchas de las entidades con nombre. 1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertar

un carácter especial. 2 Siga uno de estos procedimientos:

• Seleccione el nombre del carácter en el submenú Insertar>HTML>Caracteres especiales. • En la categoría Texto de la barra Insertar, haga clic en el botón Caracteres y seleccione el carácter en el submenú. Existen otros muchos caracteres especiales disponibles; para seleccionar uno de ellos, seleccione Insertar>HTML> Caracteres especiales > Otro o haga clic en el botón Caracteres en la categoría Texto de la barra Insertar y seleccione la opción Otros caracteres. Seleccione un carácter en el cuadro de diálogo Insertar otro carácter y haga clic en Aceptar.

IIIIII..66 CCrreeaacciióónn ddee lliissttaass oorrddeennaaddaass yy ssiinn oorrddeennaarr Puede crear listas ordenadas (numeradas), listas sin ordenar (con viñetas) y listas de definición a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de definición no utilizan caracteres iniciales como puntos de viñeta o números y suelen utilizarse en glosarios o descripciones. Además, las listas se pueden anidar. Una lista anidada es aquélla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista ordenada o con viñetas en otra numerada u ordenada. Utilice el cuadro de diálogo Propiedades de lista para configurar el aspecto de toda una lista o de sus elementos por separado. Puede establecer el estilo de número, restablecer la numeración o configurar las opciones de las viñetas de los distintos elementos o de toda la lista.


by: magh 80

Creación de una lista nueva 1 En el documento de Dreamweaver, coloque el punto de inserción en el lugar en el que

desea añadir la lista y siga uno de estos procedimientos: • Haga clic en el botón Lista ordenada o Lista sin ordenar del inspector de propiedades • Seleccione Texto > Lista y elija el tipo de lista deseado: Lista sin ordenar (con viñetas), Lista ordenada (numerada) o Lista de definición. El carácter inicial del elemento especificado de la lista aparecerá en la ventana de documento.

2 Escriba el texto del elemento de la lista y presione Intro para crear otro elemento de la lista. 3 Para terminar la lista, presione dos veces Intro. Creación de una lista usando texto existente 1 Seleccione una serie de párrafos para convertirlos en una lista. 2 Haga clic en el botón Lista sin ordenar o Lista ordenada del inspector de propiedades, o

seleccione Texto > Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista de definición.

Creación de una lista anidada 1 Seleccione los elementos de lista que desea anidar. 2 Haga clic en el botón Sangría del inspector de propiedades o elija Texto > Sangría.

Dreamweaver aplicará sangría al texto y creará una lista distinta con los atributos HTML de la lista original.

3 Aplique un nuevo estilo o tipo de lista al texto sangrado siguiendo el procedimiento detallado.


by: magh 81

Configuración de las propiedades de toda una lista 1 En la ventana de documento, cree al menos un elemento de lista: El nuevo estilo se

aplicará automáticamente a todos los elementos que vaya añadiendo a la lista. 2 Coloque el punto de inserción

sobre el texto del elemento de lista y seleccione Texto > Lista > Propiedades para abrir el cuadro de diálogo Propiedades de lista.

3 Configure las opciones que desea definir para la lista:

Tipo de lista Especifica las propiedades de lista, mientras que Elemento de lista especifica un elemento de la lista. Utilice el menú emergente para seleccionar una lista con números, con viñetas, de directorio o de menú. Dependiendo del tipo de lista que seleccione, aparecerán determinadas opciones en el cuadro de diálogo. Estilo Determina el estilo de los números o las viñetas empleados para una lista numerada o con viñetas. Todos los elementos de la lista tendrán este estilo a menos que especifique un estilo nuevo para determinados elementos. Iniciar recuento Establece el valor del primer elemento en una lista numerada.

4 Haga clic en Aceptar para definir las opciones.

IIIIII..77 BBúússqquueeddaa yy ssuussttiittuucciióónn ddee tteexxttoo Puede utilizar el comando Buscar y reemplazar para buscar texto así como etiquetas HTML y atributos en un documento o en un conjunto de documentos. El panel de búsqueda, que se encuentra el grupo de paneles Resultados, muestra los resultados de la búsqueda con la opción Buscar todos. Nota: Para buscar archivos en un sitio, utilice diferentes comandos: Localizar en sitio local y Localizar en sitio remoto. Búsqueda y sustitución de texto 1 Abra el documento en el que se

debe realizar la búsqueda o seleccione los documentos o una carpeta del panel Archivos.

2 Seleccione Edición > Buscar y reemplazar.


by: magh 82

3 Utilice la opción Buscar en para especificar los archivos en los que desea buscar: Texto seleccionado Limita la búsqueda al texto que está seleccionado en el documento activo. Documento actual Limita la búsqueda al documento activo. Abrir documentos Busca en todos los documentos que están abiertos. Carpeta Limita la búsqueda a una carpeta específica. Después de seleccionar Carpeta, haga clic en el icono de carpeta para localizar y seleccionar la carpeta que desea buscar. Archivos seleccionados en el sitio Limita la búsqueda a los archivos y las carpetas seleccionados actualmente en el panel Archivos. Sitio local actual completo Amplía la búsqueda a todos los documentosHTML, los archivos de biblioteca y los documentos de texto del sitio actual.

4 Utilice el menú emergente Buscar para especificar el tipo de búsqueda que desea realizar: Código fuente Permite buscar cadenas de texto específicas en el código HTML. Puede buscar etiquetas específicas mediante esta opción; sin embargo, la búsqueda Etiqueta específica permite realizar una búsqueda más flexible de las etiquetas. Texto Permite buscar cadenas de texto específicas en el texto del documento. La búsqueda de texto omite el código HTML que interrumpe la cadena. Por ejemplo, si busca el perro negro, puede encontrar el perro negro y el perro <i>negro</i>. Texto (avanzado) Permite buscar cadenas de texto específicas que se encuentran dentro o fuera de una o varias etiquetas. Por ejemplo, en un documento que contiene el código HTML siguiente, si busca intenta, especifica No está en etiqueta y la etiqueta i, sólo encontrará la segunda aparición de la palabra intenta: Juan <i>intenta</i> hacer su trabajo a tiempo, pero no siempre lo consigue. Y mira que lo intenta. . Etiqueta específica Busca etiquetas, atributos y valores de atributos específicos, como todas las etiquetas td con valign definido como top. Nota: Al presionar Control+Intro oMayús+Intro, se añadirán saltos de línea en los campos de búsqueda de texto, lo que le permite buscar un carácter de retorno. Al llevar a cabo esta búsqueda, desactive la opción Omitir espacio en blanco si no está utilizando expresiones regulares. Este método busca un carácter de retorno en particular, no la aparición de un salto de línea. Por ejemplo, no busca etiquetas <br> ni <p>. Los caracteres de retorno aparecen como espacios en la vista Diseño, no como saltos de línea.

5 Utilice las opciones siguientes para ampliar o limitar la búsqueda: Coincidir mayúsculas y minúsculas Limita la búsqueda al texto que coincide exactamente con el uso de mayúsculas y minúsculas del texto buscado. Por ejemplo, si busca aguas azules, no encontrará Aguas Azules. Omitir espacio en blanco Considera todos los espacios en blanco como un solo espacio a efectos de búsqueda. Por ejemplo, si esta opción está seleccionada, este texto coincidirá con este texto y con este texto, pero no con este texto.


by: magh 83

Esta opción no está disponible cuando está activada la opción Utilizar expresión regular; en este caso es necesario escribir explícitamente la expresión regular para omitir el espacio en blanco. Observe que las etiquetas <p> y <br> no se consideran espacios en blanco. Palabra completa Limita la búsqueda al texto que coincida con una o varias palabras completas. Nota: Utilizar esta opción equivale a realizar una búsqueda de expresiones regulares en forma de cadena de texto que empiecen y acaben con \b, la expresión normal de límite de palabra. Utilizar expresión regular Considera algunos caracteres y cadenas cortas (por ejemplo, ?, *, \w y \b) de la cadena de búsqueda como operadores de expresiones regulares. Por ejemplo, si busca el perro l\w*\b puede encontrar el perro ladrador y el perro lanudo.

Nota: Si está trabajando en la vista Código, realiza cambios en el documento e intenta buscar y reemplazar elementos que no son código, aparecerá un cuadro de diálogo informándole de que Dreamweaver está sincronizando las dos vistas antes de realizar la búsqueda.

6 Para buscar sin reemplazar, haga clic en Buscar siguiente o Buscar todos: Buscar siguiente Se desplaza hasta la siguiente aparición del texto o de las etiquetas de la búsqueda del documento actual y la selecciona. Si la etiqueta no aparece más veces en el documento actual, Dreamweaver continúa con el documento siguiente, en el caso de que realice la búsqueda en más de un documento. Buscar todos Abre el panel de búsqueda del grupo de paneles Resultados. Si realiza una búsqueda en un solo documento, la opción Buscar todos muestra todas las apariciones del texto o de las etiquetas de la búsqueda, con el contexto en el que se encuentran. Si realiza una búsqueda en un directorio o sitio, Buscar todos muestra una lista de los documentos que contienen la etiqueta.

7 Para reemplazar el texto o las etiquetas encontrados, haga clic en Reemplazar y Reemplazar todos.

8 Cuando acabe, haga clic en Cerrar.

IIIIII..88 RReevviissiióónn yy ccoorrrreecccciióónn oorrttooggrrááffiiccaa Utilice el comando Ortografía del menú Texto para revisar la ortografía del documento actual. El comando Ortografía no tiene en cuenta las etiquetas HTML ni los valores de atributo. De forma predeterminada, el corrector ortográfico utiliza el diccionario de inglés de Estados Unidos. Para cambiar el diccionario, seleccione Edición > Preferencias > General, a continuación, seleccione el diccionario que desea utilizar en el menú emergente Diccionario ortográfico. Se pueden descargar diccionarios de otros idiomas desde el Centro de soporte de Dreamweaver en http://www.adobe.com/go/dreamweaver_support_es 1 Seleccione Texto > Ortografía o presione Mayús+F7. Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de diálogo Ortografía.

http://www.adobe.com/go/dreamweaver_support_es�


by: magh 84

2 Seleccione la opción adecuada teniendo en cuenta las discrepancias mostradas. Añadir a personal Incorpora la palabra no reconocida al diccionario personal. Omitir Ignora esta aparición de la palabra no reconocida. Omitir todo Ignora todas las apariciones de la palabra no reconocida. Cambiar Sustituye esta aparición de la palabra no reconocida por el texto que usted escriba en el cuadro Cambiar a o por la selección de la lista Sugerencias. Cambiar todas Reemplaza de la misma manera todas las apariciones de la palabra no reconocida.

IIIIII..99 IImmppoorrttaacciióónn ddee ddooccuummeennttooss ddee MMiiccrroossoofftt OOffffiiccee Puede insertar contenido de un documento de Microsoft Word o Excel a una página Web nueva o existente. Al importar un documento de Word o Excel, Dreamweaver recibe el HTML convertido y lo inserta en la página Web. El tamaño de archivo, una vez que Dreamweaver recibe el HTML convertido, debe ser inferior a 300 KB. En lugar de importar todo el contenido de un archivo, también es posible pegar fragmentos del documento y conservar el formato Nota: Si utiliza Office 97, no podrá importar el contenido de un documento de Word o Excel. 1 Abra la página Web en la que desea insertar el documento de Word o Excel. 2 En la vista Diseño, siga uno de estos procedimientos para seleccionar el archivo: • Arrastre el archivo desde su ubicación actual a la página en la que desea que aparezca el contenido. • Seleccione Archivo > Importar > Documento de Word, o bien Archivo > Importar > Documento de Excel. 3 En el cuadro de diálogo Insertar documento, vaya al archivo que desea añadir, seleccione las opciones de formato adecuadas en el menú emergente Formato en la parte inferior del cuadro de diálogo y luego haga clic en Abrir. Sólo texto Inserta texto sin formato. Si el texto original tiene formato, se eliminará todo el formato. Texto con estructura Inserta texto que conserva su estructura pero no el formato básico. Por ejemplo,


by: magh 85

puede pegar texto y conservar la estructura de los párrafos, listas y tablas sin conservar negritas, cursivas u otras características de formato. Texto con estructura y formato básico Inserta texto con formato HTML estructurado y simple (por ejemplo, párrafos y tablas, así como texto formateado con la etiqueta b, i, u, strong, em, hr, abbr o acronym). Texto con estructura y formato completo Inserta texto que conserva toda la estructura, el formato HTML y los estilos CSS. Limpiar espaciado de párrafo de Word Elimina espacios adicionales entre párrafos al pegar el texto si seleccionó la opción Texto con estructura o Formato básico. El contenido del documento de Word o Excel aparecerá en la página. NOTA: En caso de que el documento a importar contenga imágenes, aparece el siguiente cuadro de dialogo: IIIIII..1100 AApplliiccaacciióónn ddee ffoorrmmaattoo aa tteexxttoo La aplicación de formato a texto en Dreamweaver es similar a la utilización de un programa estándar de tratamiento de texto. Puede establecer estilos de formato predeterminados (Párrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamaño, el color y la alineación del texto seleccionado o aplicar estilos de texto, como negrita, cursiva, monoespacio y subrayado. De forma predeterminada, Dreamweaver aplica formato a texto mediante hojas de estilos en cascada (CSS). Los estilos CSS ofrecen a los diseñadores y desarrolladores Web un mayor control sobre el diseño de la página Web, a la vez que les permite utilizar funciones mejoradas que optimizan la accesibilidad y reducen el tamaño de archivo. Puesto que el formato y la alineación se aplican mediante los comandos de formato de Dreamweaver, las reglas CSS están incrustadas en el documento actual. Esto le permite reutilizar fácilmente los estilos existentes, así como asignar nombre a los estilos que cree. CSS se está convirtiendo en el método preferido para aplicar formato a texto y presentar páginas Web. Si lo prefiere, puede optar por utilizar etiquetas de formato HTML para aplicar formato y alinear el texto de las páginas Web. Para utilizar etiquetas HTML en lugar de CSS, debe cambiar las preferencias de formato de texto predeterminadas de Dreamweaver. La utilización de CSS es una forma de controlar el estilo de una página Web sin que se vea afectada su estructura. Al separar los elementos visuales de diseño (fuentes, colores, márgenes, etc.) de la estructura lógica de una página Web, CSS permite a los diseñadores Web tener un control visual y tipográfico de la página Web sin que ello repercuta negativamente en la integridad del contenido. Además, al definir el diseño tipográfico y el diseño de la página a partir de un solo bloque de código, sin tener que recurrir a mapas de imagen, etiquetas font, tablas y GIF espaciadores, se pueden llevar a cabo descargas más


by: magh 86

rápidamente, mejorar el mantenimiento del sitioWeb y establecer un punto central desde el que se pueden controlar los atributos de diseño de varias páginas Web. Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de una etiqueta HTML específica (como h1, h2, p o li). Puede almacenar los estilos CSS que cree directamente en el documento (la configuración predeterminada al aplicar formato al texto empleando el inspector de propiedades) o, si desea tener mayor control y flexibilidad, en una hoja de estilos externa. Si adjunta una hoja de estilos externa a varias páginas Web, todas las páginas reflejarán automáticamente los cambios realizados en la hoja. Para acceder a todas las reglas de estilos CSS de una página, utilice el panel Estilos CSS (Ventana > Estilos CSS). Nota: Puede combinar formato CSS y HTML 3.2 en la misma página. La aplicación de formato se realiza de forma jerárquica: el formato HTML 3.2 tiene prioridad sobre el formato aplicado mediante hojas de estilo CSS externas y el estilo CSS incrustado en un documento tiene prioridad sobre el estilo CSS externo.

IIIIII..1111 UUttiilliizzaacciióónn ddeell iinnssppeeccttoorr ddee pprrooppiieeddaaddeess ppaarraa ddaarr ffoorrmmaattoo aa tteexxttoo El inspector de propiedades de texto permite aplicar formato al texto seleccionado actualmente. Puede cambiar el formato estableciendo propiedades nuevas. El estilo se aplica inmediatamente al documento. Puesto que el inspector de propiedades se utiliza para aplicar formato al texto, Dreamweaver realiza un seguimiento de las propiedades de formato que el usuario asigna a todos los elementos del texto y asigna una etiqueta a cada uno de ellos mediante una convención de asignación de nombres: Style1, Style2, Style3, Stylen. Si asigna los mismos atributos de formato a dos o más elementos del texto, Dreamweaver asigna una etiqueta a los elementos que tengan el mismo título; de este modo, se eliminan los nombres de estilo redundantes. La etiqueta que Dreamweaver aplica a un cuerpo de texto determinado se puede aplicar posteriormente mediante el menú emergente Estilo, lo que permite crear una biblioteca de estilos dentro de una página y aplicar esos mismos estilos simplemente seleccionando el elemento de texto en la página y seleccionando un estilo en el menú Estilos. Puede cambiar el nombre de los estilos por texto con más significado, como Encabezado1, Encabezado2, Cuerpo y Cuerpo Tabla. El menú emergente Estilo del inspector de propiedades muestra ambos nombres de estilos en la página, además de una vista previa de las propiedades del estilo. Las propiedades mostradas en la vista previa son la familia de fuentes, el tamaño y el grosor de la fuente, el color del texto y el color de fondo.


by: magh 87

Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva, Dreamweaver aplica automáticamente las etiquetas <strong> o <em>, respectivamente. Si diseña páginas para navegadores de la versión 3.0 o anterior, debe cambiar esta preferencia en la categoría General del cuadro de diálogo Preferencias (Edición > Preferencias). Para ver un tutorial sobre la aplicación de formato al texto con el inspector de propiedades, consulte http://www.adobe.com/go/vid0147_es

IIIIII..1122 AApplliiccaacciióónn ddee ffoorrmmaattoo aa ppáárrrraaffooss Dreamweaver admite todas las normas Web que se utilizan para aplicar formato a páginas y objetos. Utilice el menú Formato del inspector de propiedades o el submenú Texto > Formato de párrafo para aplicar las etiquetas estándar de párrafo y encabezado. 1 Sitúe el punto de inserción en el párrafo o seleccione parte del texto del párrafo. 2 En el submenú Texto > Formato de párrafo o en el menú emergente Formato del inspector de propiedades, elija una opción: • Elija un formato de párrafo (por ejemplo, Encabezado 1, Encabezado 2, Texto con formato predeterminado, etc.). La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para Encabezado 2, pre para Formato predeterminado, etc.) se aplicará a todo el párrafo. • Seleccione Ninguno para quitar un formato de párrafo. Cuando aplica una etiqueta de encabezado, se añade automáticamente la siguiente línea de texto como un párrafo sencillo. Para cambiar esta configuración, seleccione Edición > Preferencias; a continuación, en la categoría General, en la sección Opciones de edición, compruebe que la casilla Cambiar a párrafo sencillo tras el encabezado no esté activada.

IIIIII..1133 CCaammbbiioo ddeell ccoolloorr ddeell tteexxttoo Puede cambiar el color predeterminado de todo el texto de una página o bien el color del texto seleccionado en la página. Definición de colores de texto predeterminados para una página ❖ Seleccione Modificar > Propiedades de la página > Aspecto o Vínculos y, a continuación, seleccione colores para las opciones Color del texto, Color de los vínculos, Vínculos visitados y Vínculos activos. Nota: El color del vínculo activo es el que adopta el vínculo cuando se hace clic en él.

http://www.adobe.com/go/vid0147_es�


by: magh 88

Cambio del color del texto seleccionado ❖ Seleccione el texto y siga uno de estos procedimientos: • Seleccione un color haciendo clic en el cuadro de color del inspector de propiedades. • Seleccione Texto > Color, seleccione un color del selector de colores del sistema y haga clic en Aceptar. • Escriba el nombre del color o un número hexadecimal directamente en el campo del inspector de propiedades. Restablecimiento del color predeterminado del texto 1 En el inspector de propiedades, haga clic en el cuadro de color para abrir la paleta de colores seguros para la Web. 2 Haga clic en el botón Tachado (el botón cuadrado blanco y atravesado por una línea roja que se encuentra en la esquina superior derecha).

IIIIII..1144 AAlliinneeaacciióónn ddee tteexxttoo Puede alinear texto en la página utilizando el inspector de propiedades o el submenú Texto > Alinear. Asimismo, puede centrar cualquier elemento en una página usando el comando Texto > Alinear > Centro. Alineación de texto en una página 1 Seleccione el texto que desea alinear o, simplemente, inserte el puntero al principio del texto. 2 Haga clic en una opción de alineación (Izquierda, Derecha o Centro) en el inspector de propiedades, o seleccione Texto > Alinear y seleccione un comando. Cómo centrar elementos en la página 1 Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro elemento). 2 Seleccione Texto > Alinear > Centro. Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un encabezado o de un párrafo.


by: magh 89

Aplicación de sangría al texto El comando Sangría aplica la etiqueta HTML blockquote al párrafo de texto, y aplica sangría a ambos lados de la página. 1 Sitúe el punto de inserción en el párrafo al que desea aplicar sangría. 2 Haga clic en el botón Sangría o Anular sangría del inspector de propiedades, seleccione Texto > Sangría o Anular sangría, o seleccione Lista > Sangría o Anular sangría en el menú contextual. Nota: Puede aplicar varias sangrías a un párrafo, cada vez que seleccione este comando.

IIIIII..1155 UUttiilliizzaacciióónn ddee rreeggllaass hhoorriizzoonnttaalleess Las reglas horizontales (líneas) son útiles para organizar la información. Puede separar visualmente el texto y los objetos de una página con una o más reglas. Creación de una regla horizontal 1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertar una regla horizontal. 2 Seleccione Insertar > HTML > Regla horizontal.

Modificación de una regla horizontal 1 En la ventana de documento, seleccione la regla horizontal. 2 Seleccione Ventana > Propiedades para abrir el inspector de propiedades y modificar las propiedades que desee: An (Ancho) y Al (Alto) Especifican el ancho y el alto de la regla en píxeles o como porcentaje del tamaño de la página. Alinear Especifica la alineación de la regla (Predet., Izquierda, Centro o Derecha). Esta configuración sólo es aplicable si el ancho de la regla es inferior al ancho de la ventana del navegador. Sombreado Especifica si la regla debe trazarse con sombreado. Desactive esta opción para trazar la regla con un color sólido.


by: magh 90

IIIIII..1166 AAddiicciióónn ddee uunnaa nnuueevvaa ccoommbbiinnaacciióónn aa llaa lliissttaa ddee ffuueenntteess 1 Seleccione Texto > Fuente > Editar lista de fuentes. 2 Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botón << para añadir la fuente a la lista de Fuentes elegidas. 3 Repita el paso 2 con cada fuente de la combinación. Para añadir una fuente que no está instalada en el sistema, escriba el nombre de la fuente en el campo de texto situado bajo la lista Fuentes disponibles y haga clic en el botón << para añadirla a la combinación. Añadir una fuente que no está instalada en el sistema resulta útil, por ejemplo, para especificar una fuente sólo para Windows cuando desarrolla páginas con Macintosh. 4 Cuando termine de seleccionar fuentes específicas, seleccione una familia genérica de fuentes en el menú Fuentes disponibles y haga clic en el botón << para pasar la familia genérica de fuentes a la lista Fuentes elegidas. Las familias genéricas de fuentes son: cursiva, fantasía, monoespacio, sans-serif y serif. Si ninguna de las fuentes de la lista Fuentes elegidas está disponible en el sistema del usuario, el texto aparecerá en la fuente predeterminada asociada con la familia genérica de fuentes. Por ejemplo, la fuente monoespacio predeterminada en la mayoría de los sistemas es Courier. IIIIII..1177 IInnsseerrcciióónn ddee ffeecchhaass Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefiera (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo. Nota: Las fechas y horas que aparecen en el cuadro de diálogo Insertar fecha no son las actuales y tampoco reflejan las que verá el usuario cuando visite el sitio. Sólo son ejemplos de la forma en que se puede presentar esta información. 1 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertarla. 2 Siga uno de estos procedimientos:

• Seleccione Insertar > Fecha. • En la categoría Común de la barra Insertar, haga clic en el icono Fecha. 3 En el cuadro de diálogo que aparece, seleccione el formato de día de la semana, fecha y hora. 4 Si desea que la fecha insertada se actualice cada vez que guarde el documento, seleccione Actualizar automáticamente al guardar. Si desea que la fecha se convierta en texto normal cuando se inserte y no se actualice automáticamente, desactive esa opción.


by: magh 91

5 Haga clic en Aceptar para insertar la fecha.

IIIIII..1188 AAddiicciióónn yy mmooddiiffiiccaacciióónn ddee iimmáággeenneess Imágenes Existen muy diversos formatos de archivo gráfico, aunque para páginas Web generalmente se utilizan tres formatos de archivo gráfico: GIF, JPEG y PNG. GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayoría de los navegadores. Los archivos PNG son los más adecuados para casi cualquier tipo de gráfico Web debido a su flexibilidad y su tamaño de archivo reducido; no obstante, la visualización de imágenes PNG sólo es parcialmente compatible con los navegadores Microsoft Internet Explorer (4.0 y posteriores) y Netscape Navigator (4.04 y posteriores). Por lo tanto, a no ser que esté diseñando para un tipo de usuario concreto que utilice un navegador compatible con el formato PNG, deberá utilizar archivos GIF o JPEG para poder llegar a más usuarios. Inserción de una imagen Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo en el sitio. Asimismo, las imágenes se pueden insertar de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotación de rótulos publicitarios es necesario seleccionar de forma aleatoria un único rótulo de una lista de posibles rótulos y, después, mostrar dinámicamente la imagen del rótulo seleccionado cuando se solicite una página. Tras insertar una imagen, puede definir atributos de accesibilidad de etiqueta de imagen que los lectores de pantalla pueden leer para usuarios ciegos. Estos atributos se pueden editar en el código HTML. Para ver un tutorial sobre la creación de vínculos, vea http://www.adobe.com/go/vid0148_es 1 Coloque el punto de inserción en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuación, siga uno de estos procedimientos: • En la categoría Común de la barra Insertar, haga clic en el icono Imagen . • En la categoría Común de la barra Insertar, haga clic en el menú Imágenes y seleccione el icono Imagen. Con el icono Imagen visible en la barra Insertar, puede arrastrar el icono a la ventana del documento (o a la ventana de visualización de código, si está trabajando en el código). • Seleccione Insertar > Imagen. • Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3. • Arrastre una imagen desde el panel Archivos hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

http://www.adobe.com/go/vid0148_es�


by: magh 92

• Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3. 2 En el cuadro de diálogo que aparece, siga uno de estos procedimientos: • Seleccione Sistema de archivos para elegir un archivo de imagen. • Seleccione Fuente de datos para elegir un origen de imagen dinámica. • Haga clic en el botón Sitios y servidores para elegir un archivo de imagen en una carpeta remota de uno de los sitios de Dreamweaver. 3 Busque y seleccione el origen de imagen o contenido que desee insertar. Si está trabajando en un documento que no está guardado, Dreamweaver genera una referencia con la estructura file:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento. Nota: Al insertar imágenes, se puede utilizar una ruta absoluta a una imagen que se encuentra en un servidor remoto (es decir, una imagen que no está en el disco duro local).. 4 Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro de diálogo en Preferencias (Edición > Preferencias). 5 Introduzca los valores en los cuadros de texto Texto alternativo y Descripción larga y haga clic en Aceptar. • En el cuadro de diálogo Texto alternativo, escriba un nombre para la imagen o una breve descripción. El lector de pantalla lee la información introducida en dicho cuadro. Debe limitar la entrada a alrededor de 50 caracteres. • En el cuadro Descripción larga, escriba la ubicación de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vínculo a un archivo con el que está relacionado u ofrece más información acerca de la imagen. Nota: Puede completar uno o ambos cuadros de texto, en función de sus necesidades. El lector de pantalla lee el atributo Texto alternativo de la imagen. O presione Cancelar, la imagen aparece en el documento, pero no se le asocia etiquetas o atributos de accesibilidad. 6 En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen.


by: magh 93

Definición de propiedades de imagen El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si no ve todas las propiedades de imagen, haga clic en la flecha de ampliación situada en la esquina inferior derecha.

1 Seleccione Ventana > Propiedades para ver el inspector de propiedades para una imagen seleccionada. 2 En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript. 3 Defina cualquiera de las opciones de imagen. An (Ancho) y Al (Alto) El ancho y el alto de la imagen en píxeles. Dreamweaver actualiza automáticamente estos cuadros de texto con las dimensiones originales de la imagen al insertar una imagen en una página. Si establece valores de An (Ancho) y Al (Alto) que no se corresponden con el ancho y el alto reales de la imagen, es posible que ésta no se muestre correctamente en el navegador. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Ancho) y Al (Alto), o bien haga clic en el botón de restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al al introducir un valor nuevo. Nota: Puede cambiar estos valores para establecer la escala del tamaño de visualización de esta instancia de imagen, aunque no por ello se reducirá el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de asignarle una escala. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes. Origen Específica el archivo de origen para la imagen. Haga clic en el icono de carpeta para localizar el archivo de origen o escriba la ruta correspondiente. Vínculo Especifica un hipervínculo para la imagen. Arrastre el icono de señalización hasta un archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL. Alinear Alinea una imagen y texto en la misma línea. Alt Especifica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que sólo admiten texto, el texto se reproduce en voz alta. En algunos navegadores, este texto también aparece al situar el puntero sobre la imagen. Mapa y Herramientas de zona interactiva Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.


by: magh 94

Espacio V y Espacio H Añaden espacio, en píxeles, a los lados de la imagen. Espacio V añade espacio en la parte superior e inferior de una imagen. Espacio H añade espacio a la izquierda y la derecha de una imagen. Destino Especifica el marco o la ventana donde se cargará la página vinculada. (Esta opción no está disponible cuando la imagen no está vinculada a otro archivo.) En la lista Destino figuran los nombres de todos los marcos del conjunto de marcos actual. También puede seleccionar estos nombres de destino reservados: • _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre. • _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador. • _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. • _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos. Orig. (Origen base) Especifica la imagen que debe cargarse antes que la imagen principal. Muchos diseñadores utilizan una versión de 2 bpc (blanco y negro) de la imagen principal porque se carga más rápidamente y ofrece a los visitantes una idea de lo que van a ver. Borde El ancho en píxeles del borde de la imagen. La configuración predeterminada es sin borde. Edición Inicia el editor de imágenes que ha especificado en las preferencias de editores externos y abre la imagen seleccionada. Optimizar Abre el cuadro de diálogo Optimización . Recorte Recorta el tamaño de una imagen, con lo que se eliminan las áreas no deseadas de la imagen seleccionada . Volver a muestrear Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en su nuevo tamaño y forma. Brillo y contraste Ajusta el brillo y el contraste de una imagen , aparece el cuadro de dialogo:

Perfilar Ajusta la intensidad de una imagen . Restablecer tamaño Restaura los valores de An (Ancho) y Al (Alto) para devolver el tamaño original a la imagen. Este botón aparece a la derecha de los cuadros de texto An (Ancho) y Al (Alto) cuando se ajustan los valores de la imagen seleccionada. Alineación de una imagen Puede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de la misma línea. Además puede alinear horizontalmente una imagen.


by: magh 95

1 Seleccione la imagen en la vista de diseño. 2 Establezca los atributos de alineación de la imagen en el inspector de propiedades con el menú emergente Alinear. Puede establecer la alineación con relación a otros elementos del mismo párrafo o de la misma línea. Nota: HTML no ofrece ningún método para ajustar texto alrededor del contorno de una imagen, como ocurre con algunos procesadores de textos.

Las opciones de alineación son las siguientes: Predeterminado Especifica una alineación con la línea de base. (El valor predeterminado puede variar en función del navegador del visitante del sitio.) Línea de base e Inferior Alinean la línea de base del texto (u otro elemento del mismo párrafo) con la parte inferior del objeto seleccionado. Superior Alinea la parte superior de una imagen con la parte superior del elemento más alto (imagen o texto) de la línea actual. Medio Alinea la parte central de la imagen con la línea de base de la línea actual. Texto superior Alinea la parte superior de la imagen con la parte superior del carácter más alto de la línea de texto. Medio absoluta Alinea la parte central de la imagen con la parte central del texto de la línea actual. Inferior absoluta Alinea la parte inferior de la imagen con la parte inferior de la línea de texto (incluidos los trazos descendentes, como en el caso de la letra g). Izquierda Sitúa la imagen seleccionada en el margen izquierdo, ajustando a la derecha el texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva línea. Derecha Sitúa la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva línea. Cómo redimensionar un elemento visualmente 1 Seleccione el elemento (por ejemplo, una imagen o un archivo SWF) en la ventana de documento. Aparecen manejadores de cambio de tamaño en los lados inferior y derecho del elemento y en la esquina inferior derecha. Si no aparecen, haga clic en cualquier punto fuera del elemento cuyo tamaño desea cambiar y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento. 2 Cambie el tamaño del elemento siguiendo uno de estos procedimientos: • Para ajustar el ancho del elemento, arrastre el manejador de selección del lado derecho. • Para ajustar el alto del elemento, arrastre el manejador de selección de la parte inferior.


by: magh 96

• Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de selección de la esquina. • Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar sus dimensiones, arrastre el manejador de selección de la esquina mientras presiona la tecla Mayús. • Si desea ajustar el ancho y el alto de un elemento a un tamaño específico (por ejemplo, 1 por 1 píxel), utilice el inspector de propiedades para introducir un valor numérico. Puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 8 por 8 píxeles. 3 Para restaurar las dimensiones originales de un elemento, elimine los valores de los cuadros An (Ancho) y Al (Alto) o haga clic en el botón Restablecer tamaño en el inspector de propiedades de imagen.

Recuperación del tamaño original de una imagen ❖ Haga clic en el botón Restablecer tamaño del inspector de propiedades de imagen .

Recorte de una imagen Dreamweaver permite recortar imágenes de archivos de mapa de bits. Nota: Cuando se recorta una imagen, se cambia el archivo de imagen de origen en el disco. 1 Abra la página que contiene la imagen que desea recortar, seleccione la imagen y siga uno de estos procedimientos: • Haga clic en el icono Herramienta Recorte del inspector de propiedades de imagen . • Seleccione Modificar > Imagen > Recorte. Aparecerán manejadores de recorte alrededor de la imagen seleccionada. 2 Ajuste los manejadores de recorte de modo que el recuadro de límite rodee el área de la imagen de mapa de bits que desea mantener. 3 Haga doble clic en el recuadro de límite o presione Intro para recortar la selección. 4 Un cuadro de diálogo le informa de que el archivo de imagen que está cortando cambiará en el disco. Haga clic en Aceptar. Los píxeles del mapa de bits seleccionado que se encuentren fuera del recuadro de límite, se eliminarán, pero el resto de los objetos de la imagen permanecerán. 5 Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como esperaba. Si no es así, seleccione Edición > Deshacer Recortar para volver a la imagen original. Nota: Puede deshacer el efecto del comando de recorte. Ajuste del brillo y el contraste de una imagen Brillo/Contraste modifica el contraste o el brillo de los píxeles de la imagen. Esto afecta a los resaltados, sombras y medios tonos de la imagen. Normalmente, la función Brillo/Contraste se utiliza para corregir imágenes que son demasiado oscuras o demasiado claras.


by: magh 97

1 Abra la página que contiene la imagen que desea ajustar, seleccione la imagen y siga uno de estos procedimientos: • Haga clic en el botón Brillo/Contraste en el inspector de propiedades de imagen . • Seleccione Modificar > Imagen > Brillo/Contraste. 2 Arrastre los controles deslizantes de Brillo y Contraste para ajustar los valores. Los valores pueden estar comprendidos entre -100 y 100. 3 Haga clic en Aceptar.

Cómo perfilar una imagen El perfilado aumenta el contraste de los píxeles situados alrededor de los bordes de los objetos para aumentar la definición o nitidez de la imagen. 1 Abra la página que contiene la imagen que desea perfilar, seleccione la imagen y siga uno de estos procedimientos: • Haga clic en el botón Perfilar del inspector de propiedades de imagen. • Seleccione Modificar > Imagen > Perfilar. 2 Para especificar el grado de perfilado que Dreamweaver aplicará a la imagen, puede arrastrar el control deslizante o bien introducir un valor entre el 0 y el 10 en el cuadro de texto. Mientras ajusta la nitidez de la imagen mediante el cuadro de diálogo Nitidez, puede obtener una vista previa del cambio en la imagen. 3 Haga clic en Aceptar cuando esté satisfecho con la imagen. 4 Guarde los cambios; para ello, seleccione Archivo > Guardar, o recupere la imagen original seleccionando Edición > Deshacer perfilar. Nota: Sólo puede deshacer el efecto del comando de perfilado (y con ello volver al archivo de imagen original) antes de guardar la página que contiene la imagen. Una vez que haya guardado la página, los cambios realizados en la imagen quedarán guardados de forma permanente.

IIIIII..1199 IInnsseerrcciióónn ddee ccoonntteenniiddoo ddee FFllaasshh Tipos de archivos de Flash Dreamweaver viene con objetos Flash que pueden utilizarse con independencia de que tenga o no Flash instalado en su equipo. Antes de utilizar los comandos Flash que están disponibles en Dreamweaver, los tipos de archivos Flash más utilizados se encuentran: Archivos (.fla) de Flash Archivos de origen de cualquier proyecto, que se crean en el programa Flash. Este tipo de archivo sólo se puede abrir en Flash (no en Dreamweaver ni en los navegadores). Puede abrir el archivo Flash en Flash y, a continuación, exportarlo a SWF o SWT para utilizarlo en los navegadores.


by: magh 98

Archivos SWF de Flash (.swf) Versión comprimida del archivo Flash (.fla) optimizada para la Web. Este archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se puede editar en Flash. Éste es el tipo de archivo que se crea utilizando el botón Flash y objetos de texto Flash. Archivos de plantilla Flash (.swt) Estos archivos permiten modificar y reemplazar información de un archivo SWF de Flash. Se utilizan en el objeto de botón Flash, que permite modificar la plantilla con texto o vínculos propios, para crear un SWF personalizado e insertarlo en el documento. En Dreamweaver, estos archivos de plantilla se encuentran en las carpetas Dreamweaver/Configuration/Flash Objects/Flash Buttons y Flash Text. Elementos Flash (.swc) Archivos Flash SWF que permiten crear aplicaciones de Internet completas mediante su incorporación en una página Web. Los elementos Flash tienen parámetros personalizables que pueden modificarse para realizar diferentes funciones de la aplicación. Formato de archivo Flash Video (.flv) Archivo de vídeo que contiene datos codificados de audio y vídeo para enviarlos a través de Flash® Player. Por ejemplo, si tuviera un archivo de vídeo de QuickTime o Windows Media, debería utilizar un codificador (como Flash® 8 Video Encoder o Sorensen Squeeze) para convertir el archivo de vídeo en un archivo FLV. Para más información, visite Centro de desarrolladores http://www.adobe.com/go/flv_devcenter_es Inserción de un archivo SWF (contenido de Flash) 1 En la vista Diseño de la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertar el contenido y luego siga uno de estos procedimientos. • En la categoría Común de la barra Insertar, seleccione Media y haga clic en el icono Texto . • Seleccione Insertar > Media > Flash. 2 En el cuadro de diálogo que aparece, seleccione un archivo Flash (.swf). En la ventana de documento aparecerá un marcador de posición de Flash (al contrario que en el caso de los objetos de botón y texto Flash). Vista previa de contenido de Flash en la ventana de documento 1 En la ventana de documento, haga clic en el marcador de posición de Flash para seleccionar el contenido de Flash del que desea obtener una vista previa. 2 En el inspector de propiedades, haga clic en el botón Reproducir. Haga clic en Detener para poner fin a la vista previa. También puede obtener una vista previa del contenido de Flash en un navegador presionando F12. Para obtener una vista previa de todo el contenido de Flash en una página, presione Control+Alt+Mayús+P. Al hacerlo, todos los objetos Flash y archivos SWF están configurados para Reproducir.

http://www.adobe.com/go/flv_devcenter_es�


by: magh 99

Configuración de propiedades de películas Flash y Shockwave Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape Navigator, Dreamweaver inserta las películas Flash y Shockwave mediante las etiquetas object y embed. (Microsoft define la etiqueta object para los controles ActiveX y Netscape Navigator establece la etiqueta embed para los plug-ins.) Para ver las propiedades siguientes en el inspector de propiedades, seleccione un archivo Flash SWF o una película Shockwave. ❖ Seleccione un archivo FlashSWF o una película Shockwave y establezca las opciones en el inspector de propiedades (para ver todas las propiedades del archivo Flash SWF, haga clic en la flecha de ampliación situada en la esquina inferior derecha del inspector de propiedades.) Nombre Especifica un nombre para identificar una película en los scripts. Introduzca un nombre en el cuadro de texto sin título que aparece a la izquierda del inspector de propiedades. An (Ancho) y Al (Alto) Especifican el ancho y el alto de la película en píxeles. Archivo Especifica la ruta del archivo Flash o Shockwave. Haga clic en el icono de carpeta para indicar un archivo o escriba la ruta correspondiente. Origen Especifica la ruta del archivo de documento Flash (FLA) origen si están instalados en el equipo Dreamweaver y Flash. Para editar un archivo Flash (SWF), deberá editar el documento origen de la película. Editar Inicie Flash para actualizar un archivo FLA (un archivo creado en la herramienta de edición de Flash). Esta opción estará desactivada si no tiene cargado Flash en el equipo. Restablecer tamaño Restaura el tamaño original de la película seleccionada. Bucle Hace que la película se reproduzca continuamente; cuando no está seleccionada, la película se reproduce una vez y se detiene. Rep. autom. (Reproducción automática) Reproduce automáticamente la película al cargar la página. Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que habrá por encima, por debajo y a ambos lados de la película. Calidad Controla el antialias durante la reproducción de la película. Los valores altos brindan una mayor calidad a la película, pero requieren un procesador más rápido para reproducirse correctamente en la pantalla. El valor Baja da prioridad a la velocidad sobre el aspecto, mientras que el valor Alta antepone el aspecto a la velocidad. Baja automática da prioridad a la velocidad, pero mejora el aspecto siempre que resulte posible. Alta automática da prioridad a las dos cualidades, aunque, si es necesario, sacrifica el aspecto en pos de la velocidad. Escala Determina cómo se ajusta la película a las dimensiones establecidas por los cuadros de texto de ancho y alto. La configuración predeterminada hace que la película se reproduzca entera.


by: magh 100

Sin borde Ajusta la película a las dimensiones establecidas para que no aparezcan bordes y se mantenga la relación de aspecto original. Ajuste exacto Ajusta la escala de la película a las dimensiones establecidas sin tener en cuenta la relación de aspecto. Alinear Determina cómo se alineará la película en la página. Fnd Especifica un color de fondo para la zona de la película. Este color también aparecerá cuando la película no se esté reproduciendo (mientras se carga y después de haberse reproducido). Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales que se transferirán a la película. La película deberá estar diseñada para recibir estos parámetros adicionales. Creación e inserción de un botón Flash Puede crear e insertar botones Flash en los documentos mientras trabaja en la vista Diseño o en la vista Código. Si tiene Flash instalado, no es necesario hacer esto; el objeto de botón Flash es un botón actualizable basado en una plantilla de Flash. Nota: Deberá guardar el documento antes de insertar un objeto de texto o de botón Flash. 1 En la ventana de documento, coloque el punto de inserción en el lugar en el que desea insertar el botón Flash. 2 Para abrir el cuadro de diálogo Insertar botón Flash, siga uno de estos procedimientos: • En la categoría Común de la barra Insertar, seleccione Media y haga clic en el icono Botón Flash . • Seleccione Insertar > Media > Botón Flash. 3 Seleccione las opciones deseadas del cuadro de diálogo Insertar botón Flash y haga clic en Aplicar o Aceptar para insertar el botón Flash en la ventana de documento. El cuadro de dialogo Insertar botón, elija de la lista Estilo, observe en el cuadro Muestra los colores y formas, en el cuadro Texto del botón escriba el contenido del botón, en el cuadro Fuente elija la fuente deseada, en el cuadro vinculo establezca el enlace (opcional), en caso de que establezca un vinculo el cuadro destino permite que al abrir ese enlace se muestre el contenido en la misma ventana, otra ventana en blanco. Después de establecer las propiedades, haga clic en el botón Aceptar. Aparece otro cuadro de dialogo que le pregunta sobre los atributos de accesibilidad de flash, haga clic en el botón Aceptar.


by: magh 101

Modificación de un objeto de botón Flash Puede modificar las propiedades y el contenido del objeto de botón Flash. El inspector de propiedades muestra las propiedades del botón Flash. Puede utilizar el inspector de propiedades para especificar los atributos HTML físicos del botón, como su ancho, alto y color de fondo. (Haga clic en la flecha de ampliación, situada en la esquina inferior derecha, para ver más propiedades.) Para modificar otras propiedades de contenido de un botón Flash, como el texto y el color del botón, así como el URL que abre el navegador cuando se hace clic en el botón, utilice el cuadro de diálogo Insertar botón Flash. Modificación del contenido de un objeto Flash 1 Para realizar cambios en el contenido, muestre el cuadro de diálogo Insertar botón Flash siguiendo uno de estos procedimientos: • Haga doble clic en el objeto de botón Flash. • Haga clic en Editar en el inspector de propiedades. • Haga clic con el botón derecho del ratón y elija Editar en el menú contextual. 2 Seleccione un estilo de botón de la lista Estilo.

Puede ver un ejemplo del botón en el cuadro de texto Muestra. Haga clic en esta muestra para ver cómo funciona en el navegador. 3 Opcional: en el cuadro Texto de botón, escriba el texto que desee mostrar. 4 En el menú Fuente, seleccione la fuente del texto del botón.

Si la fuente predeterminada de un botón no está disponible en el sistema, seleccione otra fuente en el menú. El cuadro de texto Muestra no refleja la fuente, pero puede hacer clic en Aplicar para insertar el botón en la página y obtener una vista previa. 5 En el cuadro Tamaño, introduzca un valor numérico para el tamaño de la fuente. 6 Opcional: en el cuadro de texto Vínculo, introduzca un vínculo absoluto o relativo al documento para el botón. Éste es el URL que el navegador abrirá cuando el visitante haga clic en el botón. 7 Opcional: en el cuadro Destino, especifique la ubicación en la que se abrirá el documento vinculado. Puede seleccionar una opción demarco o ventana en el menú emergente. Los nombres de fotograma sólo aparecen en la lista si el objeto Flash se edita mientras se encuentra en un conjunto de fotogramas. 8 Opcional: en el cuadro Color de fondo, establezca un color de fondo para el archivo SWF de Flash. Utilice el selector de color o escriba un valor hexadecimal para la Web. 9 En el cuadro Guardar como, introduzca un nombre de archivo para guardar el nuevo archivo SWF.


by: magh 102

10 Haga clic en Obtener más estilos para pasar al sitio Adobe Exchange y descargar más estilos de botón. 11 Haga clic en Aplicar o Aceptar para insertar el botón Flash en la ventana de documento.

IIIIII..2200 AAddiicciióónn ddee ssoonniiddoo Formatos de archivo de audio Si lo desea, puede añadir sonido a una página Web. Existen distintos tipos de archivos de sonido, como .wav, .midi y .mp3 entre otros. Los factores que hay que tener en cuenta antes de optar por un formato y un método para añadir sonido son: su finalidad, el tipo de usuarios a los que está destinado, el tamaño de archivo, la calidad de sonido y las diferencias en los navegadores. Nota:Cada navegador trata los archivos de sonido de una formamuy distinta. Si lo desea, puede añadir un archivo de sonido a un archivo Flash SWF y luego incrustar el archivo SWF para mejorar la coherencia.

La siguiente lista describe los formatos de archivo de audio más comunes junto con algunas de sus ventajas y desventajas en relación con el diseño Web. El formato .midi o .mid (Interfaz digital para instrumentos musicales, Musical Instrument Digital Interface) Este formato es para música instrumental. Los archivos MIDI son compatibles con numerosos navegadores y no precisan ningún plug-in. Aunque su calidad de sonido es muy alta, ésta puede variar en función de la tarjeta de sonido del visitante. Un archivo MIDI pequeño puede contener un clip de sonido de larga duración. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales. Los archivos de formato .wav (Extensión de forma de onda, Waveform Extension) Estos archivos ofrecen una buena calidad de sonido, son compatibles con numerosos navegadores y no requieren ningún plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, a través de un micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente la duración de los clips de sonido que se pueden utilizar en las páginas Web. El formato .aif (Formato de archivo de intercambio de audio, Audio Interchange File Format o AIFF), El formato AIFF, al igual que el formato WAV, ofrece buena calidad de sonido, se puede reproducir en la mayoría de los navegadores y no requiere plug-in. También se pueden grabar archivos AIFF desde un CD, una cinta, a través de un micrófono, etc. Sin embargo, el gran tamaño de archivo limita considerablemente la duración de los clips de sonido que se pueden utilizar en las páginas Web. El formato .mp3 (Audio del Grupo de Expertos en Imágenes en Movimiento, Motion Picture Experts Group Audio o MPEGAudio Nivel-3) Un formato comprimido que reduce considerablemente el tamaño de los archivos de sonido. La calidad de sonido es excelente: si se graba y comprime correctamente un archivo MP3, su calidad es equiparable a la de un CD. La tecnología MP3 permite reproducir el archivo en flujo de modo que el visitante no tenga que esperar a que se descargue todo el archivo para escucharlo. Sin embargo, el tamaño del archivo es superior al de un archivo Real Audio, por lo que una canción entera puede tardar bastante en descargarse en una


by: magh 103

conexión de módem de acceso telefónico (línea telefónica) típica. Para reproducir archivos MP3, los visitantes deberán descargar e instalar una aplicación auxiliar o un plug-in como QuickTime, Windows Media Player o RealPlayer. El formato .ra, .ram, .rpm o Real Audio Este formato tiene un alto grado de compresión con tamaños de archivo más pequeños que MP3. Descarga archivos de canciones completas en un período de tiempo razonable. Dado que los archivos se pueden reproducir en flujo desde un servidorWeb normal, los visitantes pueden comenzar a escuchar el sonido antes de que el archivo se haya descargado por completo. Los visitantes deberán descargar e instalar la aplicación auxiliar o plug-in RealPlayer para reproducir estos archivos. .qt, .qtm, .mov o QuickTime Es un formato de audio y de vídeo desarrollado por Apple Computer. QuickTime está incluido con los sistemas operativos Apple Macintosh, y lo utilizan la mayoría de las aplicaciones de Macintosh que emplean audio, vídeo o animación. Los PC también pueden reproducir archivos en formato QuickTime, pero requieren un controlador de QuickTime especial. QuickTime admite la mayoría de los formatos de codificación, como Cinepak, JPEG y MPEG. Nota: Además de los formatos más comunes enumerados anteriormente, existen muchos otros formatos de archivo de audio y vídeo que pueden utilizarse en la Web. Si encuentra un formato de archivo multimedia que no conoce, localice al creador del formato para obtener información sobre cuál es la mejor manera de utilizarlo e implementarlo. Incrustación de un archivo de sonido Al incrustar audio se incorpora el sonido directamente en la página, pero el sonido sólo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Puede incrustar archivos si desea utilizar música de fondo o si quiere controlar el volumen, el aspecto del reproductor en la página o los fragmentos de inicio y final del archivo de sonido. Al incorporar archivos de sonido en páginas Web, medite detenidamente cuál será su uso en el sitio Web y cómo utilizarán los visitantes del sitio estos recursos multimedia. Proporcione siempre un control para desactivar o activar la reproducción de sonido, por si los visitantes no desean escuchar el contenido de audio. 1 En la vista Diseño, sitúe el punto de inserción en el lugar en el que desea colocar el archivo y luego siga uno de estos procedimientos: • En la categoría Común de la barra Insertar, haga clic en el botón Media y seleccione el icono Plugin del menú desplegable. • Seleccione Insertar > Media > Plug-in.


by: magh 104

2 En el inspector de propiedades, haga clic en el icono de carpeta junto al cuadro de texto Vínculo para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el cuadro de texto Vínculo. 3 Especifique el ancho y el alto introduciendo los valores en los cuadros de texto correspondientes o cambiando el tamaño del marcador de posición del plug-in en la ventana de documento. Estos valores determinan con qué tamaño se muestran los controles de audio en el navegador. IIIIII..2211 IInnsseerrcciióónn ddee oobbjjeettooss mmuullttiimmeeddiiaa Puede insertar archivos SWF u objetos de Flash, películas QuickTime o Shockwave, applets de Java, controles ActiveX y otros objetos de audio o vídeo en un documento de Dreamweaver. Si ha insertado atributos de accesibilidad con un objeto multimedia, puede establecer los atributos de accesibilidad y editar dichos valores en el código HTML. 1 Sitúe el punto de inserción en la ventana de documento en la que desea insertar el objeto. 2 Inserte el objeto siguiendo uno de estos procedimientos:

• En la categoría Común de la barra Insertar, haga clic en el botón Media y seleccione el icono para el tipo de objeto que desea insertar. • Seleccione el objeto adecuado en el submenú Insertar > Media. • Si el objeto que desea insertar no es un objeto Flash, Shockwave, Applet o ActiveX, seleccione Plugin en el submenú Insertar > Media. Aparecerá un cuadro de diálogo que le permitirá seleccionar un archivo origen y especificar diversos parámetros para el objeto multimedia. Para evitar que aparezcan estos cuadros de diálogo, seleccione Edición > Preferencias > General y desactive la opción Mostrar diálogo al insertar objetos. Para anular las preferencias de presentación de cuadros de diálogo, mantenga presionada la tecla Control mientras inserta el objeto. Por ejemplo, para insertar un marcador de posición para una película Shockwave sin especificar el archivo, mantenga presionada la tecla Control u Opción y haga clic en el botón Shockwave en el menú emergente Media de la categoría Común de la barra Insertar, o bien seleccione Insertar > Media > Shockwave. 3 Seleccione las opciones deseadas en el cuadro de diálogo Seleccionar archivo o Insertar Flash y haga clic en Aceptar. Nota: Aparece el cuadro de diálogo Atributos de accesibilidad si ha elegido mostrar los atributos al insertar medios en el cuadro de diálogo Edición > Preferencias. 4 Establezca los atributos de accesibilidad. Nota: También puede editar atributos de objetos multimedia seleccionando el objeto y editando el código HTML en la vista Código o


by: magh 105

haciendo clic con el botón derecho del ratón o manteniendo pulsada la tecla Ctrl y, a continuación, seleccionando Editar código de etiqueta. Título Introduzca un título para el objeto multimedia. Clave de acceso Introduzca un equivalente para teclado (una letra) en el cuadro de texto para seleccionar el objeto multimedia en el navegador. Esto permite al visitante del sitio utilizar la tecla Control (Windows) con la clave de acceso para acceder al objeto. Por ejemplo, si introduce B como Clave de acceso, utilice Control + B para seleccionar el objeto en el navegador. Índice de fichas Introduzca un número para el orden de tabulación del objeto de formulario. Configurar el orden de tabulación resulta útil cuando existen otros vínculos y objetos de formulario en la página y es preciso que el usuario se desplace a través de ellos en un orden específico. Si establece el orden de tabulación de un objeto, asegúrese de definir el orden de tabulación de todos ellos. 5 Haga clic en Aceptar para insertar el objeto multimedia.

Nota: Si pulsa Cancelar, en el documento aparece un marcador de posición de objeto multimedia pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.

Utilice el inspector de propiedades para especificar un archivo de origen o para establecer las dimensiones y otros parámetros y atributos de cada objeto. Puede editar los atributos de accesibilidad de un objeto. Inserción de películas Shockwave Puede utilizar Dreamweaver para insertar películas Shockwave en los documentos. Adobe® Shockwave®, el estándar para multimedia interactivo en la Web, es un formato comprimido que permite la descarga rápida de los archivos multimedia creados en Macromedia® Director® de Adobe y su reproducción en los navegadores de uso más frecuente. 1 En la ventana de documento, coloque el punto de inserción en el lugar en el que desea insertar una película Shockwave y siga uno de estos procedimientos: • En la categoría Común de la barra Insertar, haga clic en el botón Media y seleccione el icono Plugin del menú desplegable. • Seleccione Insertar > Media > Shockwave. 2 En el cuadro de diálogo que aparece, seleccione un archivo de película. 3 En el inspector de propiedades, introduzca el ancho y el alto de la película en los cuadros An y Al.


by: magh 106

Adición de vídeo (formatos distintos de Flash) Puede añadir vídeo a su página Web de distintas formas y empleando diferentes formatos. El vídeo puede descargarse al usuario o reproducirse en flujo (streaming) mientras se descarga. 1 Coloque el videoclip en la carpeta del sitio. Estos videoclips suelen tener el formato de archivo AVI o MPEG. 2 Establezca un vínculo con el videoclip o incrústelo en la página.

Para establecer un vínculo con el videoclip, introduzca un texto para el vínculo, como “Descargar videoclip”, seleccione el texto y haga clic en el icono de carpeta del inspector de propiedades. Localice la ubicación del archivo de vídeo y selecciónelo. Nota: El usuario debe descargarse una aplicación auxiliar (un plug-in) para ver los formatos de flujo más habituales, como por ejemplo Real Media, QuickTime o Windows Media. IIIIII..2222 PPrreesseennttaacciióónn ddee ccoonntteenniiddoo eenn ttaabbllaass Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas. Aunque las columnas no suelen especificarse explícitamente en el código HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. Dreamweaver ofrece dos métodos de visualización y manipulación de tablas: el modo estándar, en el que las tablas se presentan en forma de cuadrícula de filas y columnas, y el modo de diseño, que permite dibujar, cambiar el tamaño y mover cuadros en la página mientras se siguen utilizando tablas para la estructura subyacente. Dreamweaver muestra el ancho de la tabla y de cada columna cuando se selecciona una tabla o cuando el punto de inserción está en ella. Junto a los anchos se encuentran flechas para el menú de encabezado de la tabla y los menús de encabezado de las columnas. Utilice los menús para acceder rápidamente a comandos relacionados con tablas. Puede activar o desactivar los anchos y los menús. Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene un ancho especificado en el código HTML. Si aparecen dos números, el ancho visual que aparece en la vista de diseño no coincide con el ancho especificado en el código HTML. Esto puede ocurrir al cambiar el tamaño de una tabla arrastrando la esquina inferior derecha o al añadir contenido a la celda cuyo ancho es superior al establecido. Por ejemplo, si establece un ancho de columna en 200 píxeles y añade contenido que se ajusta al ancho de 250 píxeles, se mostrarán dos números para dicha columna: 200 (ancho especificado en el código) y (250) entre paréntesis (ancho visual de la columna). Prioridad de formato de tabla en HTML A la hora de dar formato a tablas en la vista Diseño, puede definir propiedades que se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de la misma. Al definir el valor de una propiedad como, por ejemplo, el color de fondo o la alineación, para toda la


by: magh 107

tabla y otro valor para celdas individuales, el formato de celda tiene prioridad sobre el formato de fila, que a su vez tiene prioridad sobre el formato de tabla. El orden de prioridad en el formato de tabla es el siguiente: 1 Celdas 2 Filas 3 Tabla

Por ejemplo, si establece un color de fondo azul para una sola celda y, a continuación, establece el color de fondo de toda la tabla como amarillo, la celda azul no cambiará a amarillo, ya que el formato de celda tiene prioridad sobre el formato de tabla. Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. División y combinación de celdas de tabla Podrá combinar cualquier número de celdas contiguas, siempre que toda la selección sea una línea o un rectángulo de celdas, para obtener una sola celda que se extienda a lo largo de varias columnas o filas. Una celda puede dividirse en las filas o columnas que sea necesario, aunque haya sido combinada anteriormente. Dreamweaver reestructura automáticamente la tabla (añadiendo los atributos colspan o rowspan que sean necesarios) para crear el diseño especificado.

En el siguiente ejemplo, las celdas en la mitad de las dos primeras filas se han combinado en una única celda que ocupa dos filas.

Inserción de una tabla y adición de contenido Utilice la barra o el menú Insertar para crear una tabla. A continuación, añada texto e imágenes a las celdas de una tabla tal como lo haría fuera de una tabla. 1 En la vista Diseño de la ventana de documento, sitúe el punto de inserción donde desee que aparezca la tabla. • Seleccione Insertar > Tabla. • En la categoría Común de la barra Insertar, haga clic en Tabla 2 Establezca los atributos del cuadro de diálogo Tabla y haga clic en Aceptar para crear la tabla. Filas Determina el número de filas de la tabla. Columnas Determina el número de columnas de la tabla. Ancho de tabla Especifica el ancho de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador. Grosor del borde Especifica el ancho en píxeles de los bordes de la tabla.


by: magh 108

Espacio entre celdas Determina el número de píxeles entre celdas de tabla contiguas. Si no se especifican los valores de grosor del borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará el grosor del borde y el relleno de celda configurado en 1 y el del espaciado de celda configurado en 2. Para garantizar que los navegadores muestran la tabla sin borde, relleno ni espaciado, establezca Relleno celda y Espacio celdas con el valor 0. Relleno de celda Específica el número de píxeles entre el borde y el contenido de una celda. Ninguno No permite encabezados de columna o de fila para la tabla. Izquierda Convierte la primera columna de la tabla en una columna para encabezados. Esto le permite introducir un encabezado para cada fila de la tabla. Superior Convierte la primera fila de la tabla en una fila para encabezados, lo que le permite introducir un encabezado para cada columna de la tabla. Ambos Le permite introducir encabezados de columna y de fila en la tabla. Es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla. Texto Proporciona un título de tabla que aparece fuera de la misma. Alinear texto Especifica el lugar en el que el texto de la tabla aparecerá en relación con la tabla. Resumen Ofrece una descripción de la tabla. Los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario. Importación y exportación de datos de tabla Puede importar datos de tabla creados con otra aplicación (por ejemplo, Microsoft Excel) y guardados en un formato de texto delimitado (con elementos separados por tabuladores, comas, dos puntos o puntos y comas) a Dreamweaver y aplicarles formato de tabla. También puede exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una tabla, por lo que es necesario exportar la tabla entera en todos los casos. Si sólo le interesan algunos datos de una tabla, copie las celdas que contienen dichos datos y péguelas fuera de la tabla para crear una nueva tabla y después exporte la nueva tabla. Importación de datos de tabla 1 Siga uno de estos procedimientos: • Seleccione Archivo > Importar > Datos de tabla. • Seleccione Insertar > Objetos de tabla > Importar datos de tabla. 2 Especifique las opciones de los datos de tabla y haga clic en Aceptar.


by: magh 109

Archivo de datos Nombre del archivo que desea importar. Haga clic en el botón Examinar para seleccionar un archivo. Delimitador Delimitador utilizado en el archivo que está importando. Si selecciona Otro, aparecerá un cuadro de texto a la derecha del menú emergente. Introduzca el delimitador utilizado en su archivo. Nota: Especifique el delimitador utilizado cuando se guardó el archivo de datos. De lo contrario, el archivo no se importará correctamente y su datos no tendrán el formato correcto Ancho de tabla Ancho de la tabla.

• Seleccione Ajustar a los datos para que todas las columnas tengan el ancho suficiente para contener la cadena de texto más larga en la columna. • Seleccione Establecer para especificar un ancho fijo de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador. Borde Específica el ancho en píxeles de los bordes de la tabla. Relleno de celda Determina el número de píxeles entre el contenido de una celda y los límites de la misma. Espacio entre celdas Número de píxeles entre celdas de tabla contiguas.

Si no se especifican los valores de borde, espaciado y relleno de celda, la mayoría de los navegadores mostrará la tabla con bordes-relleno de celda en 1 y el espaciado de celda en 2 Formatear primera fila Determina el formato aplicado a la primera fila de la tabla, en caso de que exista alguno. Seleccione una de las cuatro opciones de formato posibles: Sin formato, Negrita, Cursiva o Negrita cursiva. Exportación de una tabla 1 Sitúe el punto de inserción en cualquier celda de la tabla. 2 Seleccione Archivo > Exportar > Tabla. 3 Especifique las opciones siguientes: Delimitador Especifica el carácter delimitador que debe utilizarse para separar los elementos en el archivo exportado.

Saltos de línea Especifica el sistema operativo en el que se abrirá el archivo exportado: Windows, Macintosh o UNIX. 4 Haga clic en Exportar. 5 Introduzca un nombre para el archivo y haga clic en Guardar.


by: magh 110

Selección de elementos de una tabla Puede seleccionar toda una tabla, fila o columna al mismo tiempo. También puede seleccionar una o varias celdas individuales. Cuando se desplaza el puntero sobre una tabla, fila, columna o celda, Dreamweaver resalta todas las celdas de esa selección para que sepa qué celdas se seleccionarán. Esto puede resultar útil si utiliza tablas sin bordes, celdas que ocupan varias columnas o filas, o bien tablas anidadas. Puede cambiar el color de resaltado en las preferencias. Si coloca el puntero encima del borde de una tabla, mantenga presionada la tecla Control y toda la estructura de la tabla, es decir las celdas de la misma, quedarán resaltadas. Esto puede resultar útil si utiliza tablas anidadas y desea ver la estructura de una de las tablas. Selección de una tabla entera ❖ Siga uno de estos procedimientos: • Haga clic en la esquina superior izquierda de la tabla, en cualquier punto del borde derecho o inferior de la tabla o en el borde de una fila o de una columna. Nota: Cuando pueda seleccionar la tabla, el puntero se convertirá en el icono de cuadrícula de tabla (a menos que haga clic en el borde de una fila o columna).

• Haga clic en una celda de la tabla y, a continuación, seleccione la etiqueta <tabla> en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento. • Haga clic en una celda de la tabla y, a continuación, seleccione Modificar > Tabla > Seleccionar tabla. • Haga clic en una celda de la tabla, después en el menú del encabezado de tabla y, a continuación, seleccione Seleccionar tabla. Aparecerán manejadores de selección en los bordes inferior y derecho de la tabla Selección de una o varias filas y columnas 1 Sitúe el puntero en el borde izquierdo de una fila o en el borde superior de una columna. 2 Cuando el puntero se convierta en una flecha de selección, haga clic para seleccionar una fila o columna, o arrastre para seleccionar varias filas o columnas. Selección de una sola columna 1 Haga clic en la columna. 2 Haga clic en el menú de encabezado de columna y seleccione Seleccionar columna


by: magh 111

Selección de una sola celda ❖ Siga uno de estos procedimientos: • Haga clic en la celda y, a continuación, seleccione la etiqueta <td> en el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento. • Presione la tecla Control y haga clic en la celda. • Haga clic en la celda y seleccione Edición > Seleccionar todo. Para seleccionar toda una tabla, vuelva a seleccionar Edición > Seleccionar todo cuando una celda esté seleccionada.

Selección de una línea o un bloque rectangular de celdas ❖ Siga uno de estos procedimientos: • Arrastre de una celda a otra. • Haga clic en una celda, presione Control y haga clic en la misma celda para seleccionarla y, a continuación, presione Mayús y haga clic en otra celda. Todas las celdas de la región lineal o rectangular definida por las dos celdas quedarán seleccionadas. Establecimiento de las propiedades de una tabla Puede utilizar el inspector de propiedades para editar tablas. 1 Seleccione una tabla. 2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliación situada en la esquina inferior derecha y cambie las propiedades como estime oportuno. Id de tabla Especifica un ID para la tabla. Filas y Cols Número de filas y columnas que tendrá la tabla. An (Ancho) y Al (Alto) Especifica el ancho de la tabla en píxeles o como porcentaje del ancho de la ventana del navegador. Nota: Normalmente no es preciso especificar el alto de una tabla. Borde Especifica el ancho en píxeles de los bordes de la tabla.

Si no se especifican los valores de borde o espaciado y relleno de celda, la mayoría de los navegadores mostrará la tabla con los bordes y el relleno de celda configurado en 1 y el espaciado de celda configurado en 2. Para garantizar que los navegadores muestran la tabla sin relleno ni espaciado, establezca Borde con el valor 0 y Relleno celda y Espacio celdas


by: magh 112

con el valor 0. Para ver los límites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes de tabla. Rell. celda Determina el número de píxeles entre el contenido de una celda y los límites de la misma. Esp. celda Número de píxeles entre celdas de tabla contiguas. Alinear Determina dónde aparecerá la tabla en relación con otros elementos del mismo párrafo, como por ejemplo texto o imágenes. Izquierda alinea la tabla a la izquierda de los demás elementos (por lo que el texto del mismo párrafo se ajusta alrededor de la tabla a la derecha); Derecha alinea la tabla a la derecha de los demás elementos (con el texto ajustado alrededor a la izquierda); y Centro centra la tabla (con el texto encima y/o debajo de la tabla). Predeterminado indica que el navegador debe utilizar su alineación predeterminada. Si la alineación está establecida como Predeterminado, no se muestra otro contenido junto a la tabla. Para mostrar una tabla junto a otro contenido, utilice la alineación Izquierda o Derecha. Borrar ancho de columna y Borrar alto de fila eliminan todos los valores especificados para el ancho de columna y alto de fila de la tabla. Convertir ancho de tabla a píxeles y Convertir altos de tabla a píxeles establecen el ancho o el alto de todas las columnas de la tabla en su ancho actual en píxeles (también establecen el ancho de toda la tabla en su ancho actual en píxeles). Convertir ancho de tabla a porcentaje y Convertir altos de tabla a porcentaje establecen el ancho o el alto de todas las columnas de la tabla en su ancho actual expresado como porcentaje del ancho de la ventana de documento (también establecen el ancho de toda la tabla en su ancho actual como porcentaje del ancho de la ventana de documento). Color de fondo Color de fondo de la tabla. Color de borde Color de los bordes de la tabla. Im. fondo Imagen de fondo de la tabla.

Si ha introducido un valor en un cuadro de texto, presione el tabulador o la tecla Intro para aplicar el valor. Configuración de las propiedades de celdas, filas o columnas Puede utilizar el inspector de etiquetas para editar celdas y filas de una tabla. 1 Seleccione la columna o fila. 2 En el inspector de propiedades (Ventana > Propiedades), establezca las siguientes opciones:


by: magh 113

Horiz Específica la alineación horizontal del contenido de una celda, fila o columna. Puede alinear el contenido a la izquierda, a la derecha o al centro de la celda, o bien especificar que se utilice la alineación predeterminada del navegador (generalmente a la izquierda para celdas normales y al centro para celdas de encabezado). Vert Especifica la alineación vertical del contenido de una celda, fila o columna. Puede alinear el contenido con la parte superior, media, inferior o con la línea de base de la celda, o especificar que se utilice la alineación predeterminada del navegador (generalmente al medio). An (Ancho) y Al (Alto) Ancho y alto de las celdas seleccionadas en píxeles o comoporcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduzca el símbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto apropiado en función del contenido de la celda, y el ancho y alto del resto de las columnas y filas, deje el campo en blanco (el valor predeterminado). De forma predeterminada, un navegador selecciona el alto de fila y el ancho de columna de manera que pueda contener la imagen más ancha o la línea más larga en una columna. Por esta razón, algunas veces el ancho de una columna resulta mucho más grande que el de otras columnas de la tabla cuando se le añade contenido. Nota: Puede especificar el alto como porcentaje del alto total de la tabla, aunque quizás la fila no se muestre en los navegadores con el porcentaje de alto especificado. Fnd (campo de texto superior) Nombre de archivo de la imagen de fondo de una celda, columna o fila. Haga clic en el icono de carpeta para seleccionar una imagen, o utilice el icono de señalización de archivo para seleccionar un archivo de imagen. Fnd (muestra de color y campo de texto inferiores) Color de fondo de una celda, columna o fila seleccionado con el selector de color. Borde Color del borde de las celdas. Combinar celdas Combina las celdas, filas o columnas seleccionadas para crear una sola celda. Sólo pueden combinarse celdas que constituyan una bloque rectangular o lineal. Dividir celda Divide una celda para crear dos o más celdas. Sólo puede dividirse una celda cada vez, por lo que este botón estará desactivado al seleccionar más de una celda. No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda en una sola línea. Cuando la opción No aj. Está activada, las celdas se adaptarán para incluir todos los datos a medida que se introducen o pegan en una celda. (Habitualmente, las celdas se expanden horizontalmente para incluir la palabra más larga o la imagen más grande en la celda y, a continuación, se expanden verticalmente cuando es necesario adaptarse a otros contenidos.) Encabezado Aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma predeterminada, el contenido de las celdas de encabezado de la tabla aparecerá en negrita y centrado. El alto y el ancho pueden especificarse en píxeles o porcentajes y puede convertirse de una unidad a otra.


by: magh 114

Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila mediante la etiqueta tr se obtiene un código HTML más claro y conciso. 3 Presione el tabulador o la tecla Intro para aplicar el valor.

Aplicación de formato a tablas y celdas Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o aplicándole un diseño predefinido. Antes de definir las propiedades de la tabla y de las celdas, tenga en cuenta el orden de prioridad para la aplicación de formato es éste: celdas, filas y tablas. Para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos que utilizaría para aplicar formato al texto fuera de una tabla. Cambio del formato de una tabla, fila, celda o columna 1 Seleccione una tabla, celda, fila o columna. 2 En el inspector de propiedades (Ventana > Propiedades), haga clic en la flecha de ampliación situada en la esquina inferior derecha y cambie las propiedades como estime oportuno. 3 Cambie las propiedades según convenga.

Para más información sobre las opciones, haga clic en el icono Ayuda del inspector de propiedades. Nota: Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la etiqueta td correspondientes a cada celda de la columna. Sin embargo, al establecer algunas de las propiedades de una fila, Dreamweaver modifica los atributos de la etiqueta tr en lugar de los atributos de cada etiqueta td de la fila. Al aplicar el mismo formato a todas las celdas de una fila mediante la etiqueta tr se obtiene un código HTML más claro y conciso. Cambio del tamaño de tablas, columnas y filas Cambio del tamaño de una tabla ❖ Seleccione la tabla. • Para cambiar el tamaño horizontal de la tabla, arrastre el manejador de selección de la derecha. • Para cambiar el tamaño vertical de la tabla, arrastre el manejador de selección de la parte inferior. • Para cambiar ambos, arrastre el manejador de selección de la esquina inferior derecha. Cambio del ancho de una columna y mantenimiento del ancho general de la tabla ❖ Arrastre el borde derecho de la columna que desee cambiar.


by: magh 115

El ancho de la columna contigua también varía; en consecuencia, cambia el tamaño de las dos columnas. Se mostrará cómo se ajustan las columnas, pero el ancho general de la tabla no variará. Nota: En las tablas con ancho basados en porcentajes (no píxeles), si arrastra el borde derecho de la columna que se encuentra más a la derecha, variará todo el ancho de la tabla y las columnas se harán más anchas o estrechas proporcionalmente. Cambio del ancho de una columna y mantenimiento del tamaño de las demás ❖ Mantenga pulsada la tecla Mayús mientras arrastra el borde de la columna. Cambiará el ancho de una columna. Las ayudas visuales le mostrarán cómo se ajustan las columnas. El ancho total de la tabla cambia para dar cabida a la columna que ha cambiado de tamaño. Cambio del alto de una fila visualmente ❖ Arrastre el borde inferior de la fila. Igualación de los anchos de columna del código con los anchos de columna visuales 1 Haga clic en una celda. 2 Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Igualar todos los anchos. Dreamweaver restablece el ancho especificado en el código para que coincida con el ancho visual. Eliminación de los anchos y altos especificados de una tabla 1 Seleccione la tabla. 2 Siga uno de estos procedimientos:

• Seleccione Modificar > Tabla > Borrar ancho de celda o Modificar > Tabla > Borrar alto de celda. • En el inspector de propiedades (Ventana > Propiedades), haga clic en el botón Borrar alto de fila o en el botón Borrar ancho de columna . • Haga clic en el menú del encabezado de tabla y, a continuación, seleccione Borrar todos los altos o Borrar todos los anchos.


by: magh 116

Eliminación del ancho establecido de una columna ❖ Haga clic en la columna, haga clic en el menú del encabezado de columna y seleccione Borrar ancho de columna. Activación o desactivación de los anchos y los menús de tablas y columnas 1 Seleccione Ver > Ayudas visuales > Anchos de tabla. 2 Haga clic con el botón derecho del ratón en la tabla, y seleccione Tabla > Anchos de tabla. Adición y eliminación de filas y columnas Para añadir o eliminar filas y columnas, utilice Modificar > Tabla o el menú de encabezado de columna. Si presiona la tecla Tab en la última celda de una tabla se añadirá automáticamente otra fila a la tabla.

Adición de una sola fila o columna ❖ Haga clic en una celda y siga uno de estos procedimientos: • Seleccione Modificar > Tabla > Insertar fila o bien Modificar > Tabla > Insertar columna. Aparecerá una fila encima del punto de inserción o una columna a la izquierda del punto de inserción. • Haga clic en el menú del encabezado de columna y, a continuación, seleccione Insertar columna izquierda o Insertar columna derecha. Adición de varias filas o columnas 1 Haga clic en una celda. 2 Seleccione Modificar > Tabla > Insertar filas o columnas, complete el cuadro de diálogo y haga clic en Aceptar. Insertar Indica si deben insertarse filas o columnas. Número de filas o Número de columnas El número de filas o columnas que deben insertarse. Dónde Especifica si las nuevas filas o columnas deben aparecer antes o después de la fila o columna de la celda seleccionada. Eliminación de una fila o columna ❖ Siga uno de estos procedimientos:


by: magh 117

• Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuación, seleccione Modificar > Tabla > Eliminar fila o Modificar > Tabla > Eliminar columna. • Seleccione una fila o columna completa y, a continuación, seleccione Edición > Borrar o presione Supr. Adición o eliminación de filas o columnas utilizando el inspector de propiedades 1 Seleccione la tabla. 2 En el inspector de propiedades (Ventana > Propiedades), siga uno de estos procedimientos: • Para añadir o eliminar filas, aumente o reduzca el valor de Filas. • Para añadir o eliminar columnas, aumente o reduzca el valor de Cols. Nota: Dreamweaver no advertirá de que las filas o las columnas que desea eliminar contienen datos. División y combinación de celdas Utilice el inspector de propiedades o los comandos del submenú Modificar > Tabla para dividir o combinar celdas. Como alternativa a la división y combinación de celdas, Dreamweaver incluye también herramientas que permiten aumentar o disminuir el número de filas o columnas que ocupa una celda. Combinación de dos o más celdas en una tabla 1 Seleccione las celdas en una línea contigua y en forma de un rectángulo. En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden combinar. 2 Siga uno de estos procedimientos:

• Seleccione Modificar > Tabla > Combinar celdas. • En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en Combinar celdas.

Nota: Si no se muestra el menú, haga clic en la flecha de la esquina inferior derecha del inspector de propiedades para ver todas las opciones. El contenido de las celdas individuales se sitúa en la celda combinada resultante. Las propiedades de la primera celda seleccionada se aplicarán a la celda combinada.


by: magh 118

División de una celda 1 Haga clic en la celda y siga uno de estos procedimientos:

• Seleccione Modificar > Tabla > Dividir celda. • En el inspector de propiedades ampliado (Ventana > Propiedades), haga clic en Dividir celda. Nota: Si no se muestra el menú, haga clic en la flecha de la esquina inferior derecha del inspector de propiedades para ver todas las opciones. 2 En el cuadro de diálogo Dividir celda, especifique cómo desea dividir la celda: Dividir celda en Especifica si la celda debe dividirse en filas o en columnas. Número de filas/Número de columnas Especifica el número de filas o de columnas en que debe dividirse la celda. Aumento o disminución del número de filas o columnas que ocupa una celda ❖ Siga uno de estos procedimientos: • Seleccione Modificar > Tabla > Aumentar tamaño de fila, o bien Modificar > Tabla > Aumentar tamaño de columna. • Seleccione Modificar > Tabla > Reducir tamaño de fila, o bien Modificar > Tabla > Reducir tamaño de columna. Copia, pegado y eliminación de celdas Puede copiar, pegar o eliminar una o varias celdas de una tabla al mismo tiempo, conservando el formato de las celdas. Las celdas se pueden pegar en el punto de inserción o en el lugar de una selección en una tabla existente. Para pegar varias celdas de una tabla, el contenido del Portapapeles debe ser compatible con la estructura de la tabla o la selección de la tabla en la que se van a pegar las celdas. Corte o copia de celdas de una tabla 1 Seleccione una o varias celdas en una línea contigua y en forma de un rectángulo. En la siguiente ilustración, la selección es un rectángulo de celdas, por lo que éstas se pueden cortar o copiar.


by: magh 119

IIIIII..2233 EEssttaabblleecciimmiieennttoo ddee vvíínnccuullooss yy nnaavveeggaacciióónn Tras configurar un sitio, puede vincular las páginas entre sí. Puede crear vínculos HTML, menús de salto, barras de navegación y mapas de imagen. Acerca de los vínculos Una vez que haya creado páginas HTML y haya configurado un sitio de Dreamweaver para almacenar los documentos, deberá establecer conexiones entre sus documentos y otros documentos. Dreamweaver ofrece varios métodos para crear vínculos con documentos, imágenes, archivos multimedia o software transferible. Puede establecer vínculos con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imágenes situados en un encabezado, lista, tabla, elemento con posición absoluta o marco. Los vínculos se pueden crear y administrar de varias formas distintas. Algunos diseñadores de sitios Web prefieren crear vínculos con páginas o archivos que todavía no existen cuando están trabajando, mientras que otros prefieren crear primero todos los archivos y las páginas y añadir los vínculos más tarde. Otra forma de administrar vínculos consiste en crear páginas marcadoras de posición en las que añadir y comprobar los vínculos antes de completar todas las páginas del sitio. Ubicación y rutas de documentos A la hora de crear vínculos resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vínculo y el documento con el que lo establece. Cada página Web tiene una dirección exclusiva, denominada URL (Localizador Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vínculo local (un vínculo de un documento con otro documento del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. En este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raíz del sitio. Existen tres tipos de rutas de vínculos: • Rutas absolutas (como http://www.adobe.com/support/dreamweaver/contents.html). • Rutas relativas al documento (como dreamweaver/contents.html). • Rutas relativas a la raíz del sitio (como /support/dreamweaver/contents.html). Rutas absolutas Las rutas absolutas proporcionan el URL completo del documento vinculado, incluido el protocolo que se debe usar (generalmente, http:// para páginas Web), por ejemplo, http://www.adobe.com/support/dreamweaver/contents.html. Para vincular un documento situado en otro servidor, es preciso emplear una ruta absoluta. También puede utilizar rutas absolutas para vínculos locales (con documentos del mismo sitio), pero se desaconseja utilizar este sistema, ya que, si mueve el sitio a otro dominio, se romperán todos los vínculos de las rutas absolutas locales. El uso de rutas relativas para vínculos locales también ofrece una mayor flexibilidad si necesita mover archivos dentro del sitio. Nota: Al insertar imágenes (no vínculos), puede utilizar una ruta absoluta a una imagen que se encuentra en un servidor remoto (es decir, que no está disponible en la unidad de disco duro local).


by: magh 120

Rutas relativas al documento Las rutas relativas al documento suelen ser las más adecuadas para vínculos locales en la mayoría de los sitios Web. Resultan particularmente útiles cuando el documento actual y el documento con el que se establece el vínculo se encuentran en la misma carpeta y es probable que vayan a permanecer juntos. También puede utilizar una ruta relativa al documento para establecer un vínculo con un documento de otra carpeta, pero especificando la ruta a través de la jerarquía de carpetas desde el documento actual hasta el vinculado. En una ruta relativa al documento se omite la parte de la ruta absoluta que coincide en los documentos actual y vinculado y se indica únicamente la parte de la ruta que difiere. Por ejemplo, supongamos que tiene un sitio con la siguiente estructura:

• Para establecer un vínculo desde contents.html hasta hours.html (ambos situados en la misma carpeta), utilice la ruta relativa hours.html. • Para establecer un vínculo con tips.html (en la subcarpeta resources), utilice la ruta relativa resources/tips.html. Con cada barra diagonal (/), bajará un nivel en la jerarquía de carpetas. • Para establecer un vínculo con index.html (en la carpeta padre, un nivel por encima de contents.html), utilice la ruta relativa ../index.html. Con cada barra diagonal (../), subirá un nivel en la jerarquía de carpetas. • Para establecer un vínculo con catalog.html (en una subcarpeta distinta de la carpeta padre), utilice la ruta relativa ../products/catalog.html. Aquí, ../ sube a la carpeta padre, mientras que products/ baja a la subcarpeta products. No es necesario actualizar las rutas relativas al documento entre archivos que se mueven como un grupo (por ejemplo, al mover una carpeta completa, de forma que todos los archivos de esa carpeta conserven las mismas rutas relativas entre sí).

Sin embargo, cuando se mueve un archivo individual que contiene vínculos relativos al documento o un archivo individual que es el destino de un archivo relativo al documento, no necesitará actualizar esos vínculos. (Si mueve o cambia el nombre de los archivos utilizando el panel Archivos, Dreamweaver actualizará automáticamente todos los vínculos relevantes.) Vinculación de archivos y documentos Antes de crear un vínculo, deberá saber cómo funcionan las rutas absolutas, las relativas al documento y las relativas a la raíz del sitio. Puede crear varios tipos de vínculos en un documento: • Un vínculo con otro documento o archivo, como un archivo gráfico, de película, PDF o de sonido. • Un vínculo de anclaje con nombre, que salta a un emplazamiento específico dentro de un documento.


by: magh 121

• Un vínculo de correo electrónico, que crea un mensaje de correo electrónico en blanco con la dirección del destinatario ya rellenada. • Vínculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un vínculo que ejecuta código JavaScript. Puede utilizar el inspector de propiedades y el icono de señalización de archivos para crear vínculos desde una imagen, un objeto o texto hasta otro documento o archivo. Dreamweaver crea los vínculos con otras páginas del sitio empleando rutas relativas a documentos. También puede indicar a Dreamweaver que cree vínculos nuevos utilizando rutas relativas a la raíz del sitio. Establecimiento de vínculos con documentos mediante el inspector de propiedades Puede utilizar el icono de carpeta o el cuadro Vínculo del inspector de propiedades para crear vínculos desde una imagen, un objeto o texto hasta otro documento o archivo. 1 Seleccione texto o una imagen en la vista Diseño de la ventana de documento. 2 Abra el inspector de propiedades (Ventana > Propiedades) y siga uno de estos procedimientos: • Haga clic en el icono de carpeta situado a la derecha del cuadro Vínculo para localizar y seleccionar un archivo. La ruta del documento vinculado aparecerá en el cuadro URL. Utilice el menú emergente Relativa a del cuadro de diálogo Seleccionar archivo HTML para indicar si la ruta es relativa al documento o a la raíz del sitio y, a continuación, haga clic en Seleccionar. El tipo de ruta que seleccione sólo afectará al vínculo actual. (Puede cambiar la configuración predeterminada del cuadro Relativa a para el sitio.) • Escriba la ruta y el nombre de archivo del documento en el cuadro Vínculo.

Para establecer un vínculo con un documento del sitio, introduzca una ruta relativa al documento o relativa a la raíz del sitio. Para establecer un vínculo con un documento externo al sitio, introduzca una ruta absoluta que incluya el protocolo (por ejemplo, http://). Puede utilizar este método para introducir un vínculo para un archivo que aún no se ha creado.


by: magh 122

3 En el menú emergente Dest., seleccione una ubicación para abrir el documento: • _blank carga el documento vinculado en una nueva ventana sin nombre del navegador. • _parent carga el documento vinculado en el marco padre o en la ventana padre del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se cargará en la ventana completa del navegador. • _self carga el documento vinculado en el mismo marco o la misma ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. • _top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos. Si va a establecer todos los vínculos de la página al mismo destino, puede especificar este destino una vez seleccionando Insertar > HTML > Etiquetas Head > Base y seleccionando la información de destino.

Adición de un vínculo mediante el comando Hipervínculo El comando Hipervínculo permite crear un vínculo de texto hasta una imagen, un objeto u otro documento o archivo. 1 Sitúe el punto de inserción en el documento donde desea que aparezca el vínculo. 2 Siga uno de estos procedimientos para mostrar el cuadro de diálogo Insertar hipervínculo:

• Seleccione Insertar > Hipervínculo. • En la categoría Común de la barra Insertar, haga clic en el botón Hipervínculo 3 Introduzca el texto del vínculo y, tras el vínculo, el nombre del archivo de destino del vínculo (o haga clic en el icono de carpeta para localizar y seleccionar el archivo). 4 En el menú emergente Destino, seleccione la ventana en la que deberá abrirse el archivo o escriba su nombre. En la lista emergente figuran los nombres de todos los marcos a los que ha asignado nombres en el documento actual. Si especifica un marco que no existe, la página vinculada se abrirá en una ventana nueva con el nombre que haya especificado. También puede seleccionar estos nombres de destino reservados: • _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre. • _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador. • _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.


by: magh 123

• _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos. 5 En el cuadro Índice de fichas, introduzca un número para el orden de fichas. 6 En el cuadro Título, escriba un título de página para el vínculo. 7 En el cuadro Clave de acceso, introduzca un equivalente de teclado (una letra) para seleccionar el vínculo en el navegador. 8 Por último haga clic en Aceptar. Establecimiento de vínculos con una parte específica de un documento Puede utilizar el inspector de propiedades para establecer un vínculo con una determinada sección de un documento creando en primer lugar anclajes con nombre. Los anclajes con nombre permiten establecer marcadores en un documento, que a menudo se colocan en un tema específico o en la parte superior del documento. Después podrá crear vínculos con esos anclajes con nombre que llevarán rápidamente al visitante a la posición especificada. Para crear un vínculo con un anclaje con nombre, siga este procedimiento de dos pasos. En primer lugar, cree un anclaje con nombre. A continuación, cree un vínculo con dicho anclaje. Nota: No puede colocar un anclaje con nombre en un elemento con posición absoluta. Creación de un anclaje con nombre 1 En la vista Diseño de la ventana de documento, coloque el anclaje en el lugar donde desea insertar el anclaje con nombre. 2 Siga uno de estos procedimientos: • Seleccione Insertar > Anclaje con nombre. • Presione Control+Alt+A. • En la categoría Común de la barra Insertar, haga clic en el botón Anclaje con nombre. 3 En el cuadro Nombre de anclaje, escriba un nombre para el anclaje y haga clic en Aceptar. (El nombre del anclaje no puede contener espacios). El marcador del anclaje aparecerá en el punto de inserción. Nota: Si no aparece el marcador del anclaje Ver > Ayudas visuales > Elementos invisibles.

Establecimiento de un vínculo con un anclaje con nombre 1 En la vista Diseño de la ventana de documento, seleccione texto o una imagen para crear un vínculo a partir de ellos. 2 En el cuadro Vínculo del inspector de propiedades, introduzca un signo de número (#) y el nombre del anclaje. Por ejemplo, para establecer un vínculo con un anclaje denominado “top” en el archivo actual, escriba #top. Para establecer un vínculo con un anclaje denominado "superior" en un archivo distinto de la misma carpeta, escriba nombrearchivo.html#superior Nota: Los nombres de anclaje distinguen entre mayúsculas y minúsculas.


by: magh 124

Establecimiento de un vínculo con un anclaje con nombre mediante el método de señalización de archivo 1 Abra el documento que contiene el anclaje con nombre. Nota: Si no ve el anclaje, seleccione Ver > Ayudas visuales > Elementos invisibles para poder verlo. 2 En la vista Diseño de la ventana de documento, seleccione texto o una imagen para crear un vínculo a partir de ellos. (Si es otro documento abierto, deberá cambiar a él.) 3 Siga uno de estos procedimientos:

• Haga clic en el icono de señalización de archivos (icono de mira telescópica) situado a la derecha del cuadro de texto Vínculo del inspector de propiedades y arrástrelo hasta el anclaje con el que desea establecer el vínculo: un anclaje en el mismo documento o un anclaje en otro documento abierto. • En la ventana de documento, presione la tecla Mayús mientras arrastra el texto o la imagen seleccionada hasta el anclaje con el que desea establecer el vínculo: un anclaje en el mismo documento o un anclaje en otro documento abierto. Creación de un vínculo de correo electrónico Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la ventana de mensaje de correo electrónico, el cuadro Para se actualiza automáticamente con la dirección especificada en el vínculo del mensaje de correo electrónico. Insertar vínculo de correo electrónico 1 En la vista Diseño de la ventana de documento, coloque el punto de inserción donde desea que aparezca el vínculo de correo electrónico o seleccione el texto o la imagen que desea que aparezca como vínculo de correo electrónico. 2 Siga uno de estos procedimientos para insertar el vínculo:

• Seleccione Insertar > Vínculo de correo electrónico. • En la categoría Común de la barra Insertar, haga clic en el botón Vínculo de correo electrónico. 3 En el cuadro Texto, escriba o edite el texto del correo electrónico. 4 En el cuadro Correo electrónico, escriba la dirección de correo electrónico y haga clic en Aceptar.


by: magh 125

Creación de un vínculo de correo electrónico mediante el inspector de propiedades 1 Seleccione texto o una imagen en la vista Diseño de la ventana de documento. 2 En el cuadro Vínculo del inspector de propiedades, escriba mailto: seguido de una dirección de correo electrónico. No escriba ESPACIOS entre los dos puntos y la dirección de correo electrónico. IIIIII..2244 OObbtteenncciióónn ddee vviissttaa pprreevviiaa ddee ppáággiinnaass La vista Diseño de le da una idea de cuál será el aspecto de la página en laWeb, pero no muestra las páginas exactamente como lo hacen los navegadores. La función Vista previa en el navegador le permite ver el aspecto de las páginas en navegadores concretos conforme vaya creando el diseño. Vista previa en un navegador Siempre que lo desee, puede obtener la vista previa de una página en un navegador; no es necesario cargarla primero en un servidor Web. Al obtener una vista previa de una página, deberán funcionar todas las funciones relacionadas con el navegador, como los comportamientos JavaScript, los vínculos absolutos y relativos al documento, los controles ActiveX® y los plug-ins de Netscape Navigator, siempre que haya instalado los plug-ins o los controles ActiveX necesarios en los navegadores. Antes de obtener una vista previa de un documento, guárdelo; si no lo hace, el navegador no mostrará los cambios más recientes. 1 Siga uno de estos procedimientos para obtener una vista previa de la página:

• Seleccione Archivo > Vista previa en el navegador y elija uno de los navegadores que aparecen en la lista o haga clic en el botón Vista previa de la barra de Herramientas y de la lista desplegable elija el Navegador que prefiera. Nota: Si no aparece ningún navegador en la lista, seleccione Edición > Preferencias, y, a continuación, seleccione la categoría Vista previa en el navegador a la izquierda para seleccionar un navegador.

• Presione F12 para mostrar el documento actual en el navegador principal. • Presione Control+F12 para mostrar el documento actual en el navegador secundario. 2 Haga clic en los vínculos y el contenido de prueba de la página. Si utiliza Internet Explorer en un equipo con Windows XP y Service Pack 2 instalado, es posible que el navegador muestre un mensaje para informar sobre la restricción de visualización del contenido activo. Para solucionar este problema puede incluir código Mark of the Web en el archivo. 3 Cierre la página del navegador al finalizar la prueba.

Administración y hospedaje del sitio web .

by: magh 126

IIVV.. AAddmmiinniissttrraacciióónn yy hhoossppeeddaajjee ddeell ssiittiioo wweebb IIVV..11 CCóómmoo eelleeggiirr uunn aalloojjaammiieennttoo Para publicar una página en Internet debemos colocarla en un servidor. Los servidores son ordenadores conectados permanentemente a la Red que envían las páginas cuando los exploradores la piden. Antes de nada vamos a diferenciar entre dos formas de alojar una web, en un servidor gratuito o en un servidor de pago. Los servidores de pago suelen tener mayores prestaciones y recursos disponibles que los gratuitos. En este manual vamos a tratar de orientar a las personas que tienen que contratar un servicio de pago, más indicado para negocios y páginas que pretendamos que sean populares. Definir los recursos Para encontrar un alojamiento para nuestra página primero nos tenemos que plantear los objetivos que queremos cumplir y los recursos que necesitaremos. Según sea el proyecto que vamos a publicar necesitaremos más o menos personalidad propia o determinados recursos como acceso a bases de datos, estadísticas, etc. El primer paso podría ser decidir si vamos a necesitar un dominio propio para nuestro proyecto. Un dominio propio le dará más personalidad al sitio, se asociará mejor con el nombre de la empresa, a la vez que se hace más accesible la página. Con el reducido precio que tienen actualmente los dominios sería muy indicado adquirir uno para nuestra página. En muchos casos al contratar un espacio para alojar la web nos va a ofrecer directamente nuestro propio dominio, si no es así, lo podemos solicitar expresamente. Lo más habitual es que en el proveedor donde alojemos la página se encargue también del registro del dominio, sin prácticamente otro coste adicional que las tasas del NIC, 30$ aproximadamente. Aparte del dominio existen otros recursos podemos necesitar, como: Programación en lenguajes específicos, acceso a bases de datos, administración de las DNS Deberemos definir los recursos a utilizar y buscar un proveedor que los acepte todos. Si estás proyectando una página sencilla, probablemente no te preocupará el número de recursos avanzados que posea tu servidor, pero siempre será interesante evaluar otros recursos más básicos como: El número de direcciones de correo que te van a proporcionar, estadísticas, los CGIs que tenga instalados, como contadores, envío de formularios por correo electrónico, etc.

Velocidad Es una pena que no exista un método realmente fiable para controlar uno de los aspectos que más preocupa a todos los que buscamos un alojamiento. Para conocer la calidad el servicio que nos va a ofrecer el proveedor deberíamos preguntarles a ellos sobre sus líneas y la capacidad que tienen de transferencia con Internet. Pero no solo eso sino también preguntarles por la saturación que tienen sus líneas. Pueden ser muy potentes pero estar super-utilizadas. Como los proveedores no van a revelar estos detalles tal como a nosotros


by: magh 127

nos gustaría, lo más probable es que solo nos quede la posibilidad de probar la velocidad por la práctica. Si navegamos por el sitio de la empresa que estamos evaluando y comprobamos la cantidad de información (Kb) que recibimos por segundo podremos saber cómo va de rápido la página. Otro factor que también condiciona la velocidad es la cercanía del servidor. Ten en cuenta que si estás en México, un servidor situado en tu país será más rápido para ti, en la misma condición de líneas, que uno que esté en España o Argentina. Cuanto más lejos tenga que viajar la información, tarda más. Pero un detalle, si un usuario de Colombia visita una página que está en un servidor español, para él tu servidor será más lento que uno de su país. Transferencia Otro aspecto que tenemos que evaluar a la hora de contratar un espacio para nuestra web es la cantidad de megas de transferencia mensual que el proveedor permite realizar desde nuestro dominio hacia fuera. Es decir, las páginas web que manda el servidor tienen un peso en Kbytes y el proveedor los va contando, cuando pasamos el límite que le han asignando al dominio nos cobran el exceso según un precio. Así pues, a la hora de contratar un dominio merece la pena enterarse sobre este aspecto y evaluar también las condiciones que nos ofrecen. Si encontramos un servidor que ofrece transferencia ilimitada no nos tiene que decir tampoco mucho de él, el control de la transferencia les permite ajustar su servicio a unos niveles de calidad superiores. Además, en la mayoría de los casos no nos tendrá que preocupar el superar las tasas de transferencia pues las megas que transfiere una web normal nunca superará los niveles propuestos, a no ser que se trate de un portal o una página muy visitada. Precio El último factor a considerar, y el más fácil de comparar, es el precio. Lo importante es comparar la calidad del servicio y el precio del mismo. Seguro que podrás realizar esta comparación sabiendo los datos que has de evaluar. IIVV..22 EElleeggiirr aalloojjaammiieennttoo ggrraattuuiittoo Publicar una página web es el objetivo de la mayoría de las personas que visitan desarrolloweb.com. Para conseguirlo lo más imprescindible es tener un servidor donde colocarlas, accesible desde Internet, aparte de construir las propias páginas. Dependiendo de cuál sean nuestras intenciones y deseos para el futuro de nuestra página deberemos elegir un proveedor gratuito o uno de pago, Será recomendable optar por uno de pago, en un proveedor seleccionado, si tratamos de hacer una web de una empresa o una que pretenda ser muy visitada, una web que ofrezca unos servicios y prestaciones más elevados tanto al administrador como a los visitantes. Si por el contrario, deseamos publicar un trabajo con menores prestaciones, o simplemente no queremos gastar dinero en el hosting, será indicado optar por un servicio de alojamiento gratuito. Por suerte, existe una gran variedad de sitios que ofrecen a sus visitantes la oportunidad de publicar sus páginas personales o de empresa de manera gratuita y muchas de estas opciones tienen muy buena calidad.


by: magh 128

Donde elegir un espacio En un principio, el mejor espacio para publicar una web que podemos elegir puede ser el proporcionado por nuestro proveedor de acceso a Internet. Muchas veces nuestro proveedor, a la vez que ofrece la conexión a Internet, también ofrece un espacio para publicar, por el mismo precio que el acceso. Esta opción tiene sus ventajas:

• Suelen estar libres de publicidad • En muchos casos, existen menos limitaciones por el tipo de contenidos • Casi siempre tienen buena velocidad.

El único inconveniente a destacar (aparte de los problemas puntuales que tenga cada proveedor de acceso) es que abandonemos algún día el proveedor y nos retiren las páginas publicadas, pero esto se puede evitar teniendo un servicio de redirección que nos dé una URL (dirección de web) para toda la vida, que redireccione a la página que esté activa en ese momento. En el caso de que nuestro proveedor no ofrezca servicio de publicación de webs o no nos guste el servicio que ofrece, tenemos la opción de publicar las páginas en alguna web que ofrezca espacio gratuito. Este tipo de servicio es muy popular, existen muchas ofertas en Internet, algunas de ellas mejores de las proporcionadas por los proveedores de acceso, incluso por los proveedores de alojamiento.

A. Recursos permitidos

Existen muchos sitios donde publicar una página, se diferencian fácilmente por los recursos que ponen a nuestra disposición para construirla. Cuando hablamos de recursos nos referimos a la cantidad de herramientas y programas que nos dejan utilizar en nuestra web. Ejemplos de recursos son: estadísticas, contadores, direcciones web cortas, mail gratuito, CGI, bases de datos... Los recursos se hacen necesarios cuando construimos una web avanzada, con secciones dinámicas como un buscador, un portal, o en general, una página que se alimenta de cualquier base de datos o programa para mostrar su contenido. En la gama de recursos que ofrecen estos sitios gratuitos es muy variada. Algunos sitios casi no ofrecen ningún recurso, simplemente podemos publicar la página, y en otros sitios ofrecen más servicios que en algunos proveedores de alojamiento de pago. Al final del reportaje podremos ver una comparativa sobre la cantidad de recursos ofrecida por algunos sitios proveedores de espacio gratuito para publicar webs.

B. Velocidad del servidor Para elegir un servicio suficientemente veloz tenemos la oportunidad de probar la rapidez con que bajan las páginas de alguna web que esté alojada en ese servidor. Es decir, visitamos una web de Geocities.com y vemos lo rápido que llega, una web de Galeon.com y vemos la rapidez, comparando nosotros mismos. En un último caso podemos registrarnos nosotros mismos y probar la velocidad del espacio con nuestros propios contenidos. No pasa nada por registrarse en un sitio, probar cómo funciona y si no nos gusta simplemente nos vamos a otro, es gratis. Un dato a considerar es que, dependiendo de dónde está situado físicamente el servidor que alojará nuestras páginas, la velocidad será distinta para nosotros. Es decir, un mexicano ve


by: magh 129

más rápido un servidor de México, pero un europeo navegará con más velocidad si el servidor está en Europa. Esto, se lleva al límite cuando es nuestro proveedor de acceso el que nos ofrece el espacio, en este caso, seremos los que naveguen más rápido por esa web, por estar tan próximos los dos sitios, tu acceso a Internet y el servidor de tu página.

C. Publicidad insertada en las páginas También se pueden clasificar los sitios para publicar en Internet por la publicidad que insertan. Los sitios de espacio gratuito suelen subvencionarse mediante la inserción de anuncios en las páginas de los usuarios del servicio. Los tipos de publicidad que podemos encontrar son los siguientes:

• Publicidad en un frame inferior. Es tal vez la más agresiva de las publicidades que pueden hacer, pues el banner permanece siempre visible en la página y es un poco feo para las páginas.

• Publicidad dentro de la página, utilizando el banner superior. Es el método de inserción de banners más habitual. Como desventaja tiene que el banner se exhibe en la propia página, modificando nuestra web.

• Publicidad en una ventana aparte. Esta publicidad aparece en una ventanita aparte del explorador. Como ventaja está que no utiliza el espacio de nuestra página. Como desventaja contamos que estas ventanas son muy molestas para muchos usuarios.

• Publicidad en la propia página, en un grafiquito flotando en la propia página. Es muy interesante, pues ocupa muy poco espacio comparado con otros mecanismos y no molesta en exceso.

• Sin publicidad, sin duda el mejor de los casos. Lo que no nos asegura que el sitio no ponga publicidad algún día y deje de ser tan interesante. Actualmente, muy pocos sitios ofrecen espacio gratuito sin colocar algún tipo de publicidad.

Hay muchos tipos de publicidad insertada habitualmente, como se puede ver. Eso no quita que algunos sitios empiecen a utilizar varios sistemas a la vez. Los ejemplos de sitios que estamos evaluando tienen la siguiente forma de insertar la publicidad en las páginas de los usuarios: Galeon: En el momento de escribir este reportaje no colocaban banners en las páginas alojadas en su servidor. Sin embargo, actualmente si colocan publicidad en una capa que acompaña tu navegación y permanece siempre visible. Metropoli 2000: Colocan un banner en la parte de arriba de la página. Es una opción interesante, porque reparten los ingresos por publicidad con el dueño de la página. Iespana: Los banners de este sitio se colocan en un frame en la parte inferior de la página. Pero con un simple aviso podemos pasar cambiar esto para que la publicidad salga en una ventana aparte. Freeservers: Colocan un banner en la parte superior de la página, con enlaces a otras partes de Freeservers. Además, también colocan publicidad en ventanas aparte. Todos estos males se pueden eliminar si el usuario paga una cuota mensual. Según nos ha informado, también se puede configurar para que aparezcan flotando arriba, en la izquierda, derecha, abajo, etc.


by: magh 130

D. Por manera de colgar los archivos Existen diferentes maneras de subir los archivos. Por ejemplo, los podemos subir con FTP o por medio de una página donde existe un formulario y donde podemos seleccionar los archivos que deseamos subir. En la descripción de características del alojamiento suelen indicar acceso por FTP cuando esta permitido realizar este tipo de actualizaciones. Para los principiantes será más cómodo subir las páginas por medio de un formulario de una web, pero para las personas experimentadas, a la larga, les será más sencillo y tendrá menos trabajo el realizar las actualizaciones del sitio vía FTP. Como ventaja de subir archivos con un formulario tenemos que no será necesario disponer de un programa de FTP ni tampoco saber utilizarlo. Como ventaja del FTP destacamos la rapidez de subida de archivos, ya que podemos seleccionar varios archivos de una sola vez y no tenemos que esperar a que se cargue la página web para que tengamos acceso al formulario, subir un directorio en una sola acción y otra mejora importante, que consiste en que podremos utilizar el programa con el que diseñamos las páginas web (tipo Dreamweaver o Homesite) para acceder al servidor y actualizar los contenidos automáticamente. Nuestro consejo es aprender a utilizar FTP, si es que deseamos trabajar de manera más profesional y ahorrar tiempo a la larga. Comparativa y conclusión.


by: magh 131

*Transferencia: Es la cantidad de información que recibes y mandas cada mes el servidor cuando le piden tu página. Empiezan a haber servicios gratuitos que limitan la transferencia porque al fin y al cabo es lo que cuesta dinero del hecho de ofrecer espacio gratuito y poco a poco se cierra el grifo de la Internet gratuita. Tener cuidado con este detalle, porque puede que el alojador gratuito elegido pueda ser inútil debido a que tenga mucho éxito tu web y tenga limitado el tráfico. Los Sitios que ofrecen mayores recursos para hacer una página web son Iespana.es y Metropoli2000.net, con la principal diferencia de que En Metropoli2000 sólo aceptan webs con contenidos de calidad, sin despreciar al diseño. Es decir, necesitas tener una web en Internet previamente publicada y estos te dicen si es de suficiente calidad para poder publicarla en su servidor. Sin embargo, ellos te remuneran por los ingresos de publicidad, aunque actualmente parece ser que el mercado les ha hecho desistir de esta posibilidad. Para colmo de males, la publicidad cada vez es más abusiva y puede llegar a ser bastante tedioso el visitar una página en este servidor. Iespana es bastante versátil, por permitir todo tipo de contenidos, incluso comerciales o de adultos. Además nos permiten programar en PHP 4 con base de datos MySQL (pagando), lo que hace muy interesante para aquellos desarrolladores que deseen programar aplicaciones de servidor. La velocidad del servicio, por lo menos con nuestra conexión a Internet, no es del todo agradable. Galeón, su publicidad, aunque cada vez es más abusiva. Actualmente saltan ventanas secundarias por todas partes y encima los cuadros flotantes son cada vez más grandes. Freeservers no nos funcionó del todo bien, sobretodo en el registro, que tuvimos que intentarlo durante un par de días en un total de 5 ocasiones antes de conseguir ver la hoja final de registro. De todos modos, hemos recibido buenas críticas de este servidor. Direcciones de espacio gratuito Iespana: Metropoli 2000:

http://www.iespana.es

Freeservers: http://www.metropoli2000.net

Geocities: http://www.freeservers.com

Galeón: http://www.geocities.com

Tripod: http://www.galeon.com

http://www.multimania.es

IIVV..33 DDoommiinniiooss Un dominio es una forma sencilla de identificar un ordenador en Internet de manera única, a partir del cual se encontrarán las páginas pertenecientes a la institución que lo posee. Los dominios tienen un nombre y una terminación que indica su actividad o procedencia territorial. Por ejemplo, yahoo.com: yahoo es el nombre y .com expresa el ámbito de esa página, comercial en este caso.

http://www.iespana.es/�

http://www.metropoli2000.net/�

http://www.freeservers.com/�

http://www.geocities.com/�

http://www.galeon.com/�

http://www.multimania.es/�


by: magh 132

Escoger bien el nombre del dominio es fundamental, si este tiene gancho podremos ser fácilmente recordados e identificados en Internet. A veces no es tan sencillo realizar una buena elección del nombre del dominio pues puede que los que nos gusten ya hayan sido registrados por otras personas. En muchos casos, el registro de los dominios ha sido realizado como un auténtico pillaje, solicitando los usuarios de Internet miles de nombres con el único objetivo de poseer ese dominio con gancho, pensando en futuras compensaciones, y sin presentar ninguna información en sus páginas web. Los nombres de las empresas importantes son los que más han sufrido este pillaje, que ha obligado a las empresas a comprar los dominios "raptados" por un precio astronómico a sus dueños. Tipos de dominio En Internet existen varios tipos de terminaciones de dominios o, mejor dicho, dominios de primer nivel. Estos son los.com, .org, .es, etc. Como decíamos, los dominios de primer nivel indican el ámbito al que pertenecen, hay principalmente dos grupos, genéricos y territoriales. Dominios genericos Son dominios que se otorgan a nivel internacional, para empresas y personas de todo el mundo. Los vamos a enumerar aquí, indicando el tipo de institución al que van dirigidos. .com Para empresas o en general para cualquier web que tenga carácter comercial. En un principio, quería decir que ese dominio que se trataba de una compañía estadounidense, pero en la práctica cualquiera ha tenido acceso a estos dominios que se han hecho muy populares y los preferidos para cualquier tipo de fin. .net Indica una red en Internet, la de un proveedor de servicios por ejemplo. Una opción que a la larga también se ha convertido en válida para cualquier tipo de propósito. .org Destinado para organizaciones, asociaciones, fundaciones y demás entidades muchas veces con fines benéficos o si ánimo de lucro. .gov Es para las páginas del gobierno de los Estados Unidos. .edu Reservado para las instituciones relativas a la educación. .mil Se utiliza para instituciones militares de los estados unidos. .int Que pertenece a la Unión Internacional de Telecomunicaciones, y en el que se pueden encontrar organismos que se hayan creado con acuerdos internacionales, como las Naciones Unidas. .biz Este dominio es abierto (en el sentido que no hacen falta requisitos específicos previos para el registro, del tipo .com, .net y .org) y el de significado más genérico, por lo que es el que recibirá, probablemente, un volumen de registros mayor. Es la abreviación anglosajona, en pronunciación figurada de business. .info Este dominio es también abierto (sin requisitos específicos para registrar) pero el significado parece, a priori, un poco menos genérico que .biz o .com. De todas formas, será también un dominio de gran volumen de registros, seguramente por encima del millón de nombres ya en el primer año. .name Este dominio es (bastante) abierto, pero para un uso específico, de carácter personal. Está reservado a los individuos, que podrán reservar su nombre con la estructura


by: magh 133

MiNombre.MiApellido.name, ej: (pedro.garcia.name). El tercer nivel, correspondiente al nombre de pila, es exclusivo del titular, pero el segundo nivel, correspondiente a los apellidos, es compartido con todos los que ostenten dicho apellido. En este caso, Pedro no podría impedir el registro de miguel.garcia.name, por ejemplo. Son 14 millones de nombres en 5 años los previstos por Global Name Registry. .pro Este dominio es para un uso específico reservado a profesionales de determinadas categorías, agrupados en subdominios: inicialmente serán .med.pro (médicos), .law.pro (abogados) y .cpa.pro (auditores; cpa significa chartered public accountant). En el tercer nivel estará el nombre del profesional en cuestión que deberá acreditar su pertenencia al colegio u organización profesional correspondiente. .coop Este dominio está reservado a las cooperativas. Un dominio claramente restringido en sus políticas de registro (hace falta demostrar la cualidad de cooperativa a través las organizaciones locales correspondientes). El nombre de dominio debe ser necesariamente el de la cooperativa. Este dominio tendrá un periodo de lanzamiento/test de seis meses, con procesos aún más restringidos, por lo que no va a tener un gran volumen de entradas en el primer momento. .aero Este dominio, también de uso restringido, es para la industria de los servicios aéreos: compañías aéreas; compañías aeronáuticas; aeropuertos y servicios aéreos. El volumen esperado por el registro es de entre 100.000 y 300.000 nombres en cuatro años. .museum Este dominio es de uso restringido para la comunidad de museos. La posibilidad de registrar en el segundo nivel (mnac.museum) o en el tercero (mnac.bcn.museum o mnac.sp.museum) según clasificaciones geográficas todavía está por definir definitivamente. Los promotores esperan unos 50.000 nombres en este dominio. Dominios territoriales También existen dominios de primer nivel que indican el territorio de origen de la página. Estos dominios solo se le otorgan a empresas o personas de los países relacionados con el dominio. Como ejemplos de dominios territoriales podemos señalar .es para España, .fr para Francia, .mx para México. El registro de los dominios territoriales es regulado en base a unas normas específicas para cada país. Los encargados de crear estas normas para el registro son los distintos delegados del NIC de cada país. De este modo, el ES-NIC (www.nic.es) es el encargado en España, mientras que MX-NIC (www.nic.mk) es el de México, o AR-NIC (www.nic.ar) el de Argentina. España, por ejemplo, las normas para el registro de un dominio .es son bastante restrictivas, y no todo el mundo puede registrarlos. En concreto para acceder a estos debemos ser una empresa y nuestro nombre debe de ser igual al del dominio que queremos registrar, o muy parecido. También es posible el registro si se posee una marca registrada en España con ese nombre, siempre llevado a cabo por una empresa y no por una persona física. Para consultar los requisitos para el registro de dominios en otros países podemos visitar las páginas de sus NIC correspondientes, donde siempre estará todo bien explicado y con la información más actualizada.


by: magh 134

Hay un organismo llamado NIC que es el que se encarga de regular el registro de los dominios a nivel mundial. Se encarga de indicar para que se utilice cada dominio, quien está autorizado a registrarlo, y quien puede ser el registrador. Esta entidad delega en otras para desempeñar todo el trabajo de organización que conlleva la administración de los dominios, sobretodo en los distintos países, como más adelante se verá. Para registrar un dominio Anteriormente, el registro de dominios sólo lo podía realizar una empresa llamada Network Solutions, que mantuvo el monopolio hasta el verano de 1999. Actualmente se encuentra liberalizado este mercado y existen muchas más empresas registradoras de dominios. De todos modos, a través de estas empresas operan muchos más intermediarios y encontrar un registrador cercano a nosotros puede ser muy sencillo. Sólo los dominios del tipo .com .net y .org (y ahora también los .info .biz y .edu) se encuentran al alcance de cualquier persona. Para registrarlos podemos acceder a las páginas de las empresas que están capacitadas para ello. En DesarrolloWeb.com podemos ayudaros también en esta tarea. En nuestro servicio de alojamiento puedes solicitar un dominio y registrarlo para cuanto tiempo desees. Además, en la parte de la derecha puedes ver un formulario donde escribir y buscar el dominio que deseas. Posteriormente, si es que tu dominio está libre, podrás registrarlo a través de nuestras páginas. En estas páginas debemos realizar una búsqueda para saber si se encuentra disponible el dominio que deseamos. Una vez hemos comprobado que no pertenece ya a ninguna persona podemos pasar a su registro, que se realiza a través de unos formularios online en esas mismas páginas. Si vamos a colocar unas páginas web en el dominio y vamos a contratar los servicios de hosting en algún proveedor, puede ser aconsejable que este sea el encargado de la labor de registro. Lo hará a través de una de esas empresas capacitadas para ello (señaladas arriba) y, generalmente, sin un coste adicional, o en el caso de haberlo, no será muy elevado. (probablemente el mismo precio que tenga trasladar ese dominio a sus servidores) Hay unos costes relacionados al registro de los dominios, costes que no se pueden evitar y que no se los queda el proveedor, sino que son destinados al NIC. Para los dominios .com, .net y .org, el coste del registro es de 35 dólares. Esta tasa permite mantener el dominio durante 1 año. Posteriormente hay que pagar 35 dólares por año para seguir manteniendo el nombre.

IIVV..44 RReeggiissttrroo eenn bbuussccaaddoorreess Una vez tienes realizada tu web el objetivo es que sea visitada. Existen muchas maneras de conseguir esto, una de las más fáciles e inmediatas es el registro en buscadores. Para conseguir que tu web sea incluida en un buscador debes rellenar un formulario con los datos de la web que deseas registrar. Cada buscador tiene un formulario específico y a menudo el proceso de registro es diferente. Para encontrar el formulario lo más fácil es que entres en la página principal del buscador y busques un enlace que ponga Añadir página, Add URL, nueva dirección, o algo parecido.


by: magh 135

Ese enlace te llevara al formulario de registro o, en su defecto, a la página donde explica cómo has de registrarte en ese buscador en concreto. Aun así, existen unos procedimientos básicos de registro que suelen ser repetirse en los buscadores:

• Para los índices, los buscadores que tienen categorías y podemos encontrar páginas clasificadas dependiendo de su temática. Se suele navegar a la categoría en la que se desea incluir el web. Allí se busca el botón "añadir página"(o algo parecido) y se encuentra el formulario para el registro. Índices son Yahoo! o Terra

• Para los motores de búsqueda, que son los buscadores que no tienen porque mantener un índice y que tienen robots que constantemente recorren Internet en busca de nuevas páginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la página inicial, con el enlace correspondiente. No hay que navegar las categorías para acceder al formulario. Motores de búsqueda típicos son Altavista o Sol.es.

Salta a la vista que registrarte en varios buscadores puede ser una tarea un poco costosa y otra tanta pesada, pues tienes que ir buscador a buscador introduciendo una y otra vez los mismos datos. Afortunadamente existen herramientas multiregistro. Estas herramientas nos permiten registrar nuestra página en distintos buscadores introduciendo una sola vez los datos de la página web. Existen también dos tipos de herramientas multiregistro:

• Aplicaciones windows, como cualquier otro programa, pero que su objetivo es registrar en buscadores. Este tipo de herramientas suelen tener que comprarse, puedes encontrarlas shareware en www.tucows.com por ejemplo, pero suelen estar limitadas en su uso.

• Herramientas online, estas nos permiten desde Internet, y por lo general gratuitamente, registrarnos en varios buscadores. No suelen ser tan potentes como las anteriores, pero si más útiles y accesibles por ser gratuitas. En el buscador de desarrolloweb.com, en la sección de promoción puedes encontrar alguna de estas herramientas. Nosotros estamos preparando una herramienta multiregistro online, que ya se encuentra operativa y creciendo en el número de buscadores contemplados.

En desarrolloweb.com disponemos de una sección dedicada a la promoción de páginas web. Amplia en muchísimo la información recogida en este informe y recoge unas herramientas para facilitarte la labor de que tu web sea más visitada. IIVV..55 CCoonnttaaccttoo ccoonn eell nnaavveeggaannttee Bien sabido es que una de las tareas más importantes y laboriosas del ciclo de vida de una página web es su mantenimiento, para conservar la web, su tráfico y su importancia con el tiempo. Pero mantener una web no es sólo publicar nuevos contenidos y actualizar los anteriores, entre estas tareas se encuentra una que es fundamental: proporcionar mecanismos para que los visitantes se puedan poner en contacto contigo, y, por supuesto, contestar a cada uno de los mensajes que recibes.


by: magh 136

Existen muchas formas de comunicarnos con el navegante, vamos a ver los mecanismos que están más a nuestro alcance para que a ninguna de nuestras webs les falte la posibilidad de comunicarse con sus visitantes. Hemos ordenado los siguientes puntos por orden de facilidad en su uso, así los primeros son más asequibles y los siguientes más difíciles de conseguir, aunque a menudo mejores. Correo electrónico Lo que nunca debe faltar en una página, por su sencillez y utilidad, porque es la forma más adecuada en muchos casos... Siempre tenemos que incluir una dirección de correo, fácilmente localizable, para que los visitantes puedan comunicarse. Es facilísimo hacer un enlace con una dirección de correo: Se ha de poner un enlace convencional, pero su atributo HREF va direccionado a una dirección de correo con la palabra mailto:. <A HREF="mailto:[email protected]">Escríbeme</A> Quedaría así:

IIVV..66 PPoossiicciioonnaammiieennttoo eenn llooss bbuussccaaddoorreess ddee iinntteerrnneett

Escríbeme Poner un enlace a una dirección de correo en un editor de HTML, para los que trabajáis con herramientas de edición, también es parecido a como lo hacéis para los enlaces normales, pero con esas diferencias. Libro de visitas Ahora veremos algún mecanismo adicional para comunicarse con el cliente, pero en estos casos no se trata tanto de una comunicación entre ellos y tu, sino más es una forma de comunicación te todos para todos. En el caso del libro de visitas está bien claro, es una herramienta donde los visitantes pueden dejar los mensajes que deseen para que estos queden reflejados en la web y así, no sólo los leas tu, sino que también los pueden leer todos los dem´sa usuarios de tus páginas. Esto le da agilidad a la página, dinamismo y hace que los visitantes se sientan integrados en el proyecto, colaboren y vuelvan para ver sus "huellas". Las ventajas son muchas. En la mayoría de los casos no dispondremos de la tecnología ni conocimientos para implementar esta tecnología, pero existen en el mercado varios libros de visitas personalizables e integrables dentro de webs sencillas, es decir, tu no tienes que hacer nada, ellos te proporcionan todos los recursos y explicaciones para montar un libro de visitas en tu web. Aquí puedes ver varios enlaces a estos sitios:

• Melody Soft: http://www.melodysoft.com/ • Cambia.net: http://libros.cambia.net

Todas las empresas con cierta entidad, hoy en día disponen de un sitio web, pero muchas de ellas se plantean si esta presencia en la Red ha sido una inversión o un mero gasto de representación. Para que nuestra presencia en Internet sea rentable es necesaria la promoción de nuestro sitio, y una de las herramientas más rentables para dar a conocer nuestro site y generar visitas son los buscadores.


by: magh 137

Aparecer en los principales buscadores internacionales, nacionales y en los específicos de nuestro sector es principal, pero no lo es menos aparecer en un lugar destacado según ciertas palabras clave que definan nuestro negocio en la mente de nuestras audiencias. Puesto la mayoría de los internautas se conforman con los primeros resultados proporcionados por su buscador favorito. Y para aparecer en un lugar destacado en estas útiles herramientas de búsqueda debemos conocer su funcionamiento interno. Los buscadores se dividen en dos grandes grupos: los índices y los motores de búsqueda. Los índices dividen la información en un árbol temático de categorías y subcategorías. Aquí el ejemplo paradigmático sería Yahoo!, que nos presenta una serie de grandes categorías temáticas entre las que encontramos la subcategoría "Economía y Negocios", dentro de ella "Empresas", y esta a su vez contiene entre otras "productos y servicios para empresas" y así sucesivamente hasta ir acotando la amplitud de la categoría de sitios web, ya que no se nos permitirá proponer la inclusión de nuestro sitio web en una categoría demasiado amplia. En los índices lo esencial es encontrar la rama ideal de este árbol temático en la cual ubicar nuestro sitio web, y digo nuestro sitio, puesto que en los índices sólo es posible incluir una página (normalmente la principal) a su directorio, aunque a menudo es posible incluirlo en dos o tres categorías. Para encontrar esta categoría ideal en la cual debería estar nuestro web, la estrategia a seguir es puramente marketing; ponerse en la piel de nuestro público y pensar en qué categoría nos buscará. Para ello, podemos ayudarnos de un estudio de mercado, y como no, del sentido común y de la observación de en qué categoría se encuentran ubicados nuestros principales competidores. Pero cuidado, quizá ellos no lo hayan echo tan bien y no se encuentren en la categoría ideal. Lógicamente dependiendo de la amplitud de nuestros productos o servicios, será más obvio o más difícil hallar esta categoría ideal. No obstante tras nuestra petición de alta existe un proceso de revisión humano e incluso podemos proponer una nueva categoría si no nos encontramos debidamente definidos por ninguna de las existentes. Y sobre este proceso de revisión humana es sobre el que quiero hablar a continuación, puesto que es este el segundo factor que más diferencia a los índices de Internet de los motores de búsqueda. Cuando proponemos el alta de nuestro sitio en el índice de turno, se nos pide toda una serie de datos, como: Título de la página, URL, Definición, Ubicación geográfica, persona de contacto y correo electrónico... Y finalmente nuestro site es revisado por un surfer (un especialista en catalogar recursos) del índice que considera si nuestro site cumple con los estándares de calidad requeridos y si está bien clasificado en la categoría elegida por nosotros. Vemos que esto es lo único que conoce el índice de nuestro sitio web; los datos suministrados en el formulario de petición de alta en el buscador. Por lo que debemos ser extremadamente cuidadosos en la definición que enviamos de nuestro site. El caso de los motores de búsqueda es bien distinto. Podemos tomar como ejemplo a Google, y veremos que la única información que proporcionamos a un motor es la dirección URL (por ejemplo: www.miempresa.com) y quizá una dirección de correo electrónico. El resto del proceso se realiza de forma automática, ya que nuestra petición de alta en el buscador entrará en la cola de trabajo de un programa de software llamado spider (araña) que visitará la página que hemos dado de alta y a partir de ella todas las que se encuentren enlazadas y así sucesivamente. Simultáneamente nuestras páginas serán indexadas utilizando complejos algoritmos, para ser devueltas como resultado cuando un internauta utilizando el buscador,


by: magh 138

introduzca un término que se encuentre en alguna de ellas y haga una petición de extracción de información de su ingente base de datos. Vemos de esta forma que nuestro web puede aparecer en algún motor de búsqueda por la simple razón de que otra página de un tercero que está incluida en el buscador enlaza a ella en Internet. Así, en los motores de búsqueda, para obtener una notable posición, lo esencial es el código de nuestras páginas, algo que era verdaderamente indiferente en el caso de los índices. Teóricamente con sólo dar de alta nuestra página principal el buscador indexará todas las páginas que cuelgan de ella, pero habitualmente nos encontraremos con problemas derivados de la ventaja que se concede a las altas de pago frente a las gratuitas; el primero es el tiempo a esperar para que nuestro sitio sea introducido en la base de datos del motor de búsqueda, que puede variar entre varias semanas a varios meses según el motor en cuestión. E incluso a menudo, tras este dilatado periodo de tiempo, no seremos indexados en sus bases de datos. Y esto, en los motores que aún admiten el alta gratuita. Como recomendación, si nuestro tiempo y energías son limitadas deberemos optar por el alta de pago en algunos buscadores. Si conocemos las interacciones entre los distintos buscadores de Internet, descubriremos que la inclusión en alguno de ellos puede suponer la sucesiva inclusión en otros que a menudo son más "duros" con las admisiones. Una vez que conseguimos que nuestro web aparezca en los buscadores, nuestro trabajo no habrá hecho más que empezar, ya que lo realmente valioso es aparecer en los primeros lugares por aquellas palabras clave que nuestros públicos utilizan para buscar nuestra categoría de productos, y esta sí que es una verdadera guerra, puesto que en esa lucha estamos frente a nuestros principales competidores, que también batallarán por mejorar la posición de sus páginas frente a las nuestras y las de otros competidores. Desde luego, que la complejidad dependerá de la popularidad de las palabras clave por las que queramos aparecer de forma destacada en el buscador. Realmente cada buscador valora de distinta forma el código de nuestras páginas para ubicarla en una u otra posición de su ranking, así por ejemplo Google valora especialmente cuantas y que tipo de páginas apuntan hacia las nuestras, aplicando una lógica bastante humana, según la cual si muchos y especialmente importantes hablan de uno, es que uno es importante. Otros motores como AltaVista valoran los Meta Tags (unas líneas de código que informan al motor acerca del contenido de nuestras páginas), etc. En general, los buscadores se fijan en la frecuencia o densidad y ubicación con la que aparecen ciertos términos en nuestras páginas, para ubicarlas en un lugar superior de sus resultados frente a otras páginas, en las cuales la frecuencia y ubicación de este término que el navegante ha introducido en la caja de búsqueda del motor aparece. Así, una palabra que está presente en nuestra misma dirección de Internet (www.palabra.com) indica un elevado nivel de coincidencia si es el término buscado por el internauta. Después es especialmente valorada esta palabra, en el título del documento, en el primer párrafo más que en el segundo... Si está en mayúscula es más valorado, al igual que si está en negrita... Si aparece dos veces en una frase más que si aparece una, etc. A estas alturas, seguro que a más de un lector se le ha pasado por la cabeza, la idea de llenar de términos clave la página para que aparezca en las primeras posiciones del buscador, pero lamentablemente esto ya está contemplado por estas herramientas que si encuentran demasiadas palabras repetidas o un texto de tamaño muy pequeño o con el


by: magh 139

mismo color que el fondo, etc, penalizarán nuestras páginas o incluso las eliminarán de la base de datos por tratarse de técnicas de spam (técnicas de promoción ilícitas) IIVV..77 RReeggiissttrroo yy hhoossppeeddaajjee eenn ttrriippoodd Uno de los hosting gratuitos más sencillos de registrarse y administrar el sitio web se encuentra tripod, su dirección es: http://www.multimania.es/, al ingresar a esta página aparece la ventana:

Navegue por la página y vea los servicios y herramientas que le ofrece.

En el cuadro Chosse a username, escriba el nombre que desee dar a su sitio web. Choose a password, teclee la contraseña para administrar los archivos de su sitio web.

http://www.multimania.es/�


by: magh 140

Introduzca los datos que se le piden: Nombre de usuario, correo, pregunta para recordar y la respuesta. Por último haga clic en el botón Continuar. Nota: Cuando sucede algún error, se marcara en rosa. En este caso fue la contraseña.

Complete la información: fecha de nacimiento, sexo. No olvide hacer clic en la casilla Acepto los términos. En el cuadro Type the two words, escriba las palabras que aparecen. Por último haga clic en el botón Registrar.


by: magh 141

Aparece la ventana de confirmación, en donde se enviará a su correo ciertas indicaciones para concluir el registro de su hosting.

El aviso de confirmación puede tardar unos minutos incluso algunas horas. Al recibir el correo de activación de su cuenta de Multimania, abra el mensaje y después haga clic en link que se le envía.


by: magh 142

En link que recibió en su correo, aparece la ventana de confirmación, en donde le pide que introduzca el nombre de su sitio e introduzca la contraseña del FTP. Teclee el número que aparece en el cuadro, por ultimo haga clic en el botón Siguiente.

Para iniciar a subir sus archivos al sitio creado, introduzca el nombre del sitio y después la contraseña, por último haga clic en el botón Iniciar sesión. Nota: Después de completar los datos de registro, le dan la bienvenida su registro se realizado satisfactoriamente.


by: magh 143

Después de introducir el nombre del sitio y su contraseña. Aparece la ventana de bienvenida, observe que aparece el nombre de su sitio. Además del nombre del usuario.

Para iniciar a subir sus archivos, haga clic en el botón Crear tu web.


by: magh 144

Observe que se encuentra dentro de su sitio. Para iniciar a subir sus archivos, haga clic el link Abrir FTP Web.

En cada recuadro, le permite subir un archivo, hasta un máximo de 8 archivos a la vez. Tenga en cuenta que todos los archivos que subirá en este momento, es dentro del directorio raíz de su sitio web.


by: magh 145

En cada recuadro puede agregar un archivo, para ello haga clic en el botón Examinar. Del cuadro de dialogo Carga de archivos, seleccione el archivo que desea subir. Repita esta operación para cada archivo que desee subir.

Observe que cada recuadro tiene un archivo (son los que subirá a su sitio). Cuando termine de agregar los archivos, haga clic en el botón Subir, esta proceso puede tardar unos minutos, por que se transfieren los archivos de su computadora al servidor en donde se encuentra su hosting.


by: magh 146

Después de unos minutos, observe que se transfirieron sus archivos al hosting. Si desea crear una carpeta dentro de su sitio, haga clic en el icono de Nuevo.

Al hacer clic en el botón de Nuevo, aparece el cuadro de dialogo que le pide teclear el nombre del directorio, escríbalo y haga clic en el botón Aceptar.


by: magh 147

Observe que se crea una carpeta con el nombre que tecleo.

Ahora ya se encuentra dentro de la carpeta creada. Seleeccione los archivos que desea subir y ubicarlos dentro de la carpeta creada. Cuando termine de seleccionar sus archivos, haga clic en el botón Subir, para transferir los archivos de su computadora al servidor de su hosting.

Para ingresar a la carpeta creada, haga doble clic sobre el ella.

Observe que los archivos se enviaron de forma correcta.


by: magh 148

Seleccione el resto de los archivos que desea subir. Cuando termine de seleccionar sus archivos, haga clic en el botón Subir.

Observe que los archivos se enviaron de forma correcta.

Una vez que ha terminado de subir la totalidad de los archivos de su página web.

Es momento de probar, si ha subido de forma adecuada sus archivos. Regrese al directorio raíz y haga clic en el icono de Visualizar


by: magh 149

Se abre la ventana mostrando el contenido de su página web. Navegue por ella y vea si el contenido corresponde o no. ¡Fel icidades! , Ha desarrollado la habilidad y los conocimientos necesarios para elaborar páginas web, además de la administración del sitio. Enhorabuena……

Fuentes de consulta .

by: magh 150

VV.. FFuueenntteess ddee ccoonnssuullttaa

http://www.aulacl ic.es/html/index.htm

http://www.desarrol loweb.com/manuales/21/

http://www.webtal ler.com/manual-html/manual_html.php

http://sestud.uv.es/manual.esp/

http://www.programacion.com/html/tutorial /curso/

http://www.ivia.es/htmlref/

http://www.pangea.org/pacoc/manuales/manual1.htm

http://es.t ldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/

http://www.htmlya.com.ar/

http://www.adobe.com/es/products/

http://www.aulacl ic.es/dreamweavercs3/index.htm

http://www.intercambiosvirtuales.org/l ibros-manuales/manual-oficial-adobe-

dreamweaver

http://www.tutorialmanual.net/video-tutorial-de-adobe-dreamweaver-cs3.html

http://www.lynda.com/home/DisplayCourse.aspx?lpk2=410

http://www.multimania.es/

http://www.aulaclic.es/html/index.htm�

http://www.desarrolloweb.com/manuales/21/�

http://www.webtaller.com/manual-html/manual_html.php�

http://sestud.uv.es/manual.esp/�

http://www.programacion.com/html/tutorial/curso/�

http://www.ivia.es/htmlref/�

http://www.pangea.org/pacoc/manuales/manual1.htm�

http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/�

http://www.adobe.com/es/products/�

http://www.aulaclic.es/dreamweavercs3/index.htm�

http://www.intercambiosvirtuales.org/libros-manuales/manual-oficial-adobe-dreamweaver�

http://www.intercambiosvirtuales.org/libros-manuales/manual-oficial-adobe-dreamweaver�

http://www.tutorialmanual.net/video-tutorial-de-adobe-dreamweaver-cs3.html�

http://www.lynda.com/home/DisplayCourse.aspx?lpk2=410�

Documents

Pagin as Web