Gua Didctica para el aprendizaje del Submodulo Elaboracin de Pginas Web del Modulo II Creacin de Productos Multimedia a travs de Software de Diseo
Martn Alejandro Guerra Hernndez
Jiquilpan, Michoacn
Agosto, 2010
Presentacin
La Educacin Media Superior (EMS) en Mxico enfrenta desafos que podrn ser atendidos slo si este nivel educativo se desarrolla con una identidad definida que permita a sus distintos actores avanzar ordenadamente hacia objetivos concretos.
El contexto socioeconmico y cultural mundial comporta cambios muy importantes que tambin se expresan en nuestro pas; la educacin no puede ser ajena a estos fenmenos y debe considerarlos para poder cumplir su funcin social. Se ha encomendado a la educacin que los individuos y los grupos tengan una participacin exitosa en la sociedad del conocimiento; que contribuyan a la resolucin de problemas y al mejoramiento en las condiciones de vida desde la perspectiva del desarrollo sustentable; que estn 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 estndares nacionales e internacionales y que esto les permita transitar ms libremente en la esfera de los estudios y del empleo, valorar la multiculturalidad y convivir en la democracia.
La gua didctica desarrollada en este documento se origina debido a lo complejo que es el desarrollar y administrar sitios web, con este material didctico se pretende orientar y facilitar el aprendizaje del educando en el submodulo: Elaborar pginas web correspondientes al Modulo II Creacin de productos multimedia a travs de software de diseo, de la especialidad de Informtica del CBTis No. 12.
El documento se ha estructurado en cuatro apartados: el primero contiene una breve introduccin a internet, el segundo apartado contiene una gua de aprendizaje del lenguaje HTML; el tercer apartado se plantea el uso de un editor de pginas web: Dreamweaver CS3 y el ltimo apartado comprende la administracin de un sitio web.
ndice I. INTRODUCCIN A INTERNET ............................................................................ 1 II. LENGUAJE HTML ................................................................................................ 5 II.1 Estructura bsica de un documento web ........................................................ 5 II.2 Creacin de una pgina web .......................................................................... 6 II.3 Visualizacin del documento web ................................................................... 7 II.4 Edicin de un documento web ........................................................................ 8 II.5 Saltos de lnea y de prrafo ............................................................................ 9 II.6 Cabeceras de ttulo ....................................................................................... 10 II.7 Formato y alineacin de texto ....................................................................... 11 II.8 Control de fuentes ........................................................................................ 14 II.9 Seleccin 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 Diseo de Listas ........................................................................................... 22 II.14 Creacin de Vnculos (Enlaces o Hipervnculos) .......................................... 26 II.15 Insercin de Imgenes ................................................................................. 30 II.16 Fondos con Color Uniforme .......................................................................... 34 II.17 Colores del texto y de los enlaces ................................................................ 36 II.18 Diseo de tablas ........................................................................................... 39 II.19 Multimedia: Audio y Video ............................................................................ 48 II.20 Documentos con Frames .............................................................................. 52 III. ADOBE DREAMWEAVER CS3.......................................................................... 57 III.1 Instalacin..................................................................................................... 57 III.2 Espacio de trabajo ........................................................................................ 66 III.3 Creacin y edicin de archivos ..................................................................... 70 III.4 Insercin de texto ......................................................................................... 78 III.5 Insercin de caracteres especiales ............................................................... 79 III.6 Creacin de listas ordenadas y sin ordenar .................................................. 79 III.7 Bsqueda y sustitucin de texto ................................................................... 81 III.8 Revisin y correccin ortogrfica .................................................................. 83 III.9 Importacin de documentos de Microsoft Office ........................................... 84 III.10 Aplicacin de formato a texto........................................................................ 85 III.11 Utilizacin del inspector de propiedades para dar formato a texto ............... 86 III.12 Aplicacin de formato a prrafos .................................................................. 87 III.13 Cambio del color del texto ............................................................................ 87 III.14 Alineacin de texto ....................................................................................... 88 III.15 Utilizacin de reglas horizontales ................................................................. 89 III.16 Adicin de una nueva combinacin a la lista de fuentes .............................. 90 III.17 Insercin de fechas ....................................................................................... 90 III.18 Adicin y modificacin de imgenes ............................................................. 91 III.19 Insercin de contenido de Flash ................................................................... 97 III.20 Adicin de sonido ....................................................................................... 102 III.21 Insercin de objetos multimedia ................................................................. 104 III.22 Presentacin de contenido en tablas .......................................................... 106 III.23 Establecimiento de vnculos y navegacin ................................................. 119 III.24 Obtencin de vista previa de pginas ......................................................... 125 IV. ADMINISTRACIN Y HOSPEDAJE DEL SITIO WEB ..................................... 126 IV.1 Cmo 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
Introduccin a Internet . by: magh 1 I I. . I In nt t r ro od du uc cc ci i n n a a I In nt t e er rn ne et t Internet es una red de computadoras conectados en toda la extensin del Globo Terrqueo que ofrece diversos servicios a sus usuarios como pueden ser el correo electrnico, el chat o la web. Todos los servicios que ofrece Internet son llevados a cabo por miles de computadoras que estn permanentemente encendidos y conectados a Internet, esperando que los usuarios les soliciten los servicios y sirvindolos una vez que son solicitados. Como decimos, hay servidores para todo, los hay que ofrecen correo electrnico, otros hacen posible nuestras conversaciones por chat, otros la transferencia de archivos o la visita a las pginas web y as hasta completar la lista de servicios de Internet. Tambin 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 mdems (prodigy, megacable, tvrey, etc.). Cuando hacemos la llamada con el mdem a los servidores que proveen el acceso entramos a formar parte de Internet y mientras mantengamos la conexin 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 electrnico 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 introduccin 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 ms que uno de ellos. Probablemente sea el ms 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 ms que consiste en un inmenso conjunto de pginas 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 pginas conectadas con enlaces. Los sistemas de hipertexto se utilizan en otros contextos, como la ayuda del Windows y son muy fciles de utilizar y de encontrar lo que buscamos rpidamente. La web no solo se limita a presentar textos y enlaces, sino que tambin puede ofrecernos imgenes, videos, sonido y todo tipo de presentaciones, llegando a ser el servicio ms rico en medios que tiene Internet. Por esta razn, para referirnos al sistema que implementa el web (hipertexto), se ha acuado un nuevo trmino que es hipermedia, haciendo referencia a que el web permite contenidos multimedia. Multimedia, hace referencia a muchos medios, solamente quiere decir que se estn utilizando muchos medios para presentar informacin como son el vdeo, el audio o realidad virtual.
Introduccin a Internet . by: magh 2 Cmo es una web por dentro Una pgina 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 imgenes, los posibles vdeos y lo ms importante, el cdigo fuente que dice donde colocar cada texto, cada imagen o cada video y la forma que tendrn estos al ser colocados en la pgina. No es problema que las webs estn compuestas por tantos elementos, ya que rpidamente veremos que su organizacin es fcil 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 pginas web. Pero esto es algo que vamos a tratar de explicar poco a poco en los siguientes captulos. Aunque signifique adelantarse a los acontecimientos, es interesante sealar que con una simple accin podemos ver el cdigo fuente de de las pginas, es decir, cmo estn hechas por dentro. Para ello en Internet Explorer se ha de pulsar sobre el men de Ver >Cdigo fuente y en Netscape se ha de seleccionar Ver >Origen de la pgina.
Qu necesitas para empezar Para ponernos a disear pginas web nos hace falta realmente poco material. En la mayora 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 pginas y un navegador web: Internet Explorer, Mozilla Firefox, Netscape, etc.
Construir las pginas Por fin empezamos a trabajar en la pgina 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 ms dedicada y tenemos que trabajar ms duramente. El programar o disear las pginas podr gustar ms o menos que otras acciones como planearlas o promocionarlas ms tarde, pero no cabe duda que es el momento ms excitante porque nuestros sueos y nuestras ideas empiezan a concretarse en los resultados que esperbamos conseguir. Si hemos proyectado un sitio compuesto por un gran nmero de pginas lo ms habitual es empezar diseando una pgina con el marco del sitio, que luego vamos a repetir a modo de plantilla en todas las pginas. Pero esto son tcnicas que aprenderemos con el tiempo. Para ahorrarnos errores cuando hacemos las pginas podemos seguir una serie de consejos tiles. No utilizar espacios en los nombres de los archivos de las pginas o las imgenes. Tampoco utilizar caracteres raros como la o los acentos. Tener cuidado con las maysculas y las minsculas en los nombres de los archivos que tratamos. Si las utilizamos equivocadamente la pgina podr funcionar en nuestro equipo, pero al subirla al servidor Linux o Unix podra ser que no funcionase. Enterarse de cmo 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 extensin del archivo HTML especfica. No mezclar en un mismo proyecto pginas con extensin .html y .htm. Introduccin a Internet . by: magh 3 Imgenes y otros recursos Como se ha podido ver anteriormente, el diseo de una pgina web implica la creacin de un archivo en cdigo HTML, pero no es lo nico que debemos crear. En la mayora de los casos tambin desearemos incluir imgenes y para ello ser necesario crear los correspondientes archivos grficos. El proceso para incluir una imagen en una pgina empieza por la creacin de la imagen con un programa de diseo grfico o mediante su digitalizacin con un escner. Ser necesario que conozcamos alguno de los programas de diseo grfico que existen en el mercado. Entre los que destacan: Photoshop, Corel Draw o Fireworks. Los tipos de archivos grficos que soporta Internet, entres los que destacan: J PG, GIF, PNG. Tienen caractersticas distintas y por tanto usos distintos. Una vez tenemos los archivos grficos los ponemos en el mismo directorio que los archivos HTML o en un subdirectorio de este y en el cdigo de la pgina HTML pondremos una etiqueta especial para incluir la imagen o la insertaremos l con editor web.
Alojar las pginas 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 da y conectado a Internet tambin permanentemente. En el caso de una pgina web, existen unos servidores que son los encargados de mandarla cuando se la solicita, son los servidores web. Nuestras pginas 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 pgina 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 ms difciles cuando te pones a construir las pginas. Igual que cualquier cosa en este mundo, cuando lo has hecho unas cuantas veces el problema se desvanece. Bsicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro sitio web, incluidas imgenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello primero es tarea imprescindible el identificar dnde estn todos los archivos de nuestro web. Si hemos escrito la pgina con cdigo HTML seguramente sabremos perfectamente donde estn nuestros archivos, pero si la pgina la hemos hecho con un editor web como Dreamweaver, Frontpage es probable que estn un poco ms difciles 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 travs de una interfaz web (parecido al administrador de archivos de Windows).
Introduccin a Internet . by: magh 4 Documento por defecto Es importante conocer este concepto, incluso antes de ponerse a disear la pgina. El documento por defecto es el archivo que enva el servidor cuando el cliente no especifica que archivo es el que solicita. Esto se puede ver muy fcilmente con un ejemplo. Cuando escribimos la direccin se enva el documento por defecto del directorio manuales. http://www.desarrolloweb.com/ no estamos especificando ningn nombre de archivo en concreto, entonces el servidor web donde est alojado este sitio web le devolver el documento por defecto del directorio raz del dominio. Cada directorio puede tener un documento por defecto, por ejemplo, cuando escribimos www.desarrolloweb.com/manuales se enva el documento por defecto del directorio manuales. Cada servidor web puede ests configurado de una manera distinta para el documento por defecto, es decir, en cada servidor web el documento por defecto puede ser distinto. Lo ms habitual es que se llame index.html, en desarrolloweb es as y en muchos alojadores gratuitos tambin 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 podran ser: default.html, index.html, home.html, default.php, los ms comunes.
Promocin de las pginas Con el diseo y la publicacin del sitio web en el servidor no se termina el trabajo. Una de las tareas ms importantes para el xito de la web es promocionarla adecuadamente, de manera que su direccin figure en el mayor nmero de sitios. Las acciones que se pueden realizar para promocionar una pgina son muchas y variadas, como hacer que figure su direccin en nuestros correos electrnicos o intercambiar banners, pero la ms importante es el registro en los buscadores. Estas tareas de promocin no son nada complicadas y cualquiera puede realizarlas sin ningn problema, pero conseguir que nuestra web se encuentre situada entre los primeros resultados de la bsqueda reviste ms dificultad.
Actualizar las pginas El ltimo "truco" para que nuestra pgina 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 ms que otras a tener los contenidos actualizados, como son las pginas donde se pueden ver contenidos de actualidad, pero en general todas las pginas 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 imgenes o textos que resalten donde ponga "nuevo" o "new". Tambin 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 dnde se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningn sitio, igual que no es bueno tener una direccin de correo que no existe ya. Si no mantenemos nuestro sitio actualizado el visitante entrar una vez a la pgina pero no lo volver a hacer nunca, con lo que habremos perdido una oportunidad de hacernos con un cliente o un visitante asiduo. HTML . by: magh 5 I II I. . L Le en ng gu ua aj j e e H HT TM ML L
HTML, es acrnimo de HyperText Markup Language, lenguaje de marcas de hipertexto. En informtica, formato estndar de los documentos que circulan en la World Wide Web (WWW); se utiliza desde 1989. Los documentos HTML contienen dos tipos de informacin: la que se muestra en la pantalla (texto, imgenes, videos, etc.) y los cdigos (tags o etiquetas), que indican cmo se debe mostrar esa informacin. Para crear un documento HTML, basta con disponer de un editor de texto: Wordpad, Bloc de Notas, Edit de MS-DOS, teclear el cdigo y las etiquetas que sean necesarias. Tambin se pueden utilizar editores especficos para diseo de pginas web que insertan automticamente las etiquetas correspondientes al formato del texto que se escriba o a las imgenes que se inserten; por ejemplo: Microsoft FrontPage, DreamWeaver, Web Easy Professional, Namo WebEditor, Coffee Cup Editor, etc.
I II I. .1 1 E Es st t r ru uc ct t u ur ra a b b s si i c ca a d de e u un n d do oc cu um me en nt t o o w we eb b 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 maysculas o minsculas, 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 informacin 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 informacin encontrada en el encabezamiento es el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (favoritos o marcadores). Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, video, etc.) Por tanto, la estructura de un documento HTML queda de esta forma: <HTML> <HEAD> [Etiquetas del encabezado de la pgina: autor, descripcin, ttulo] </HEAD> <BODY> [Aqu van las etiquetas o contenido a visualizar en la pgina] </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 informacin de: autor, descripcin, ttulo de la pgina, etc. se escribe entre las etiquetas <head> y </head>. Y el contenido de la pgina, entre <body> y </body> Comentarios Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial: <!--, definindose un comentario de la forma: <!-- Esto es un comentario --> 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 cdigo HTML fuente del documento.
I II I. .2 2 C Cr re ea ac ci i n n d de e u un na a p p g gi i n na a w we eb b Haga clic en el men Inicio/Programas/Accesorios/Bloc de notas.
Ejemplo 1: Disear una pgina web que muestre un saludo en la ventana del navegador. Adems debe mostrar como titulo de la pagina: Iniciando como Desarrollador Web. Guardaremos nuestro documento con el nombre de: ejemplo1.htm <html> <head> <title> Iniciando como Desarrollador Web </title> </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
Despus de teclear el cdigo 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: ej empl o1.ht m, Seleccione la lista desplegable de Tipo: Todos l os archivos, por ltimo haga clic en el botn 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 minsculas y que NO lleve espacios entre palabras, caracteres especiales o . Ejemplo de nombres incorrectos: niez, estudiante del CBTis, proyecto* final, etc.
I II I. .3 3 V Vi i s su ua al l i i z za ac ci i n n d de el l d do oc cu um me en nt t o o w we eb b Para ver el contenido de su pgina web, debe ingresar a MiPC o al Explorador de windows, posteriormente buscar la Carpeta en donde guardo su pgina web, despus haga doble clic sobre el nombre de la pagina web creada y vera en pantalla el Navegador con el contenido de su pgina 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 cdigo 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 I II I. .4 4 E Ed di i c ci i n n d de e u un n d do oc cu um me en nt t o o w we eb b Para modificar el contenido del documento o pagina web, tiene dos alternativas:
1) Ingresar al Bloc de Notas, despus Archivo / Abrir. Del cuadro de dialogo que aparece, seleccione la lista desplegable de Tipo: Todos l os archivos, seleccione la carpeta en donde guardo su documento, posteriormente haga clic en el nombre del documento y clic en el botn Abrir.
En la ventana visualizar el cdigo 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 actualizacin de su pgina, haga clic en el botn Actualizar (Internet Explorer) o botn 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, despus abra el documento web, realice los cambios que necesite, por ultimo guarde su documento con los cambios, cierre el editor y visualice la pgina web con los cambios realizados.
HTML . by: magh 9 I II I. .5 5 S Sa al l t t o os s d de e l l n ne ea a y y d de e p p r rr ra af f o o Cuando un navegador Web muestra pginas HTML, no le pone atencin a los fines de lnea o a la cantidad de espacio entre palabras. Esto quiere decir, que al escribir el texto que ser mostrado en el navegador, no es cmo en un procesador de texto normal, que controla saltos de lnea, espaciado y alineacin. Para controlar el texto, en el caso de los saltos de lnea y prrafos, 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 lnea y <P>produce el efecto de un prrafo. Estas etiquetas son muy utilizadas en todas las pginas Web. Ejemplo 2: Disear una pgina web que contenga texto con algunos saltos de lnea y prrafo. Adems 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 saltos de lnea, cmo <BR>en este ejemplo es necesario utilizar las etiquetas BR y P, <BR> las cuales son de gran utilidad.<BR><P> Si observas en donde se estn especificando <BR> los saltos de lnea y prrafos <BR>en el cdigo fuente, se muestran al ejecutar este programa <BR><P> Fin del documento web. </BODY> </HTML> El resultado del cdigo 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 lnea. La etiqueta P, le permiti salto de prrafo.
HTML . by: magh 10 PRACTICA 1: Disear una pgina web que contenga los datos de una agenda, incluya los datos de 3 personas: Nombre, direccin y telfono. Para cada dato debe aplicar salto de lnea, por cada persona aplique salto de prrafo. Adems debe mostrar como titulo de la pagina: Agenda.
I II I. .6 6 C Ca ab be ec ce er ra as s d de e t t t t u ul l o o En un documento HTML es posible definir seis tipos distintos de cabeceras que sern normalmente el ttulo del documento y los distintos subapartados que lo forman. Las etiquetas que definen las cabeceras sern <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: Disear una pgina web que contenga texto simulando titulo, subtitulo y resto de documento. Adems debe mostrar como titulo de la pagina: Iniciando Ttulos y subttulos. Guardar el documento con el nombre de: titulo_subtitulo3.htm <HTML> <HEAD><TITLE> Iniciando con Titulos y Subtitulos </TITLE></HEAD> <BODY> <h1> Texto como Titulo </h1> <h2> Texto como subtitulo </h2> <h3> Descripcin del contenido </h3> </BODY> </HTML> El resultado del cdigo 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 lnea de titulo. La etiqueta H2, permite indicar lnea de subtitulo. La etiqueta H3, para indicar lneas de texto.
HTML . by: magh 11 PRACTICA 2: Disear una pgina web que contenga ciudades tursticas del mundo. Incluya el nombre del continente, pas y ciudad, considere 3 continentes diferentes. Para el dato de continente use ttulo, el dato de pas use subtitulo y el dato ciudad use otro. Adems debe mostrar como titulo de la pagina: Ciudades Tursticas.
I II I. .7 7 F Fo or rm ma at t o o y y a al l i i n ne ea ac ci i n n d de e t t e ex xt t o o Hacer, una pgina Web puede ser tan fcil como escribir un texto y agregar algunas etiquetas HTML estndar al principio y al final, pero; para mejorar la apariencia del texto en las pginas Web, se requiere saber controlar el texto, por medio las siguientes etiquetas.
Enfatiza el texto con negritas y cursivas. Cundo se crea una pgina Web, hay partes del texto, que son importantes por lo que se deben resaltar (enfatizar), es decir mostrarlas en negr i t a o cursiva o ambas. Para enfatizar las palabras en una pgina Web utilice las siguientes etiquetas. Etiquetas Descripcin <I>...</I> Texto en cursiva <B>...</B> Texto en negrita <U></U> Texto subrayado <Strike></Strike> Texto tachado <Blink> </Blink> Texto parpadeante
Ejemplo 4: Disear una pgina web que contenga texto con formato de negrita y cursiva. Adems 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 Negrita - Subrayado </TITLE> </HEAD> <BODY> <h1> <b> <i> Titulo en Negrita-Cursiva <i> </b> </h1> <h2> <b> Subtitulo en Negrita </b> </h2> <h3> <i> Descripcin del contenido en Cursiva </i> </h3> <h4> <i> <U> Texto Cursivo-Subrayado </U> </h4> <h5> <b> <Strike> Texto Negrita-Tachado </Strike></b> </h5> </BODY> </HTML>
HTML . by: magh 12 El resultado del cdigo 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.
Alineacin del texto Para establecer la alineacin a un prrafo, puede utilizar la etiqueta <P>, junto con su atributo Align ="...", el cual tiene tres valores: Left, Right y Center. Cuando se desea establecer la alineacin de ms de un prrafo, as como de otros elementos contenidos en la pgina; tales como: encabezados, imgenes y lneas 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: Disear una pgina web que contenga un titulo con alineacin centrada, posteriormente un prrafo sin formato, otro prrafo al centro formato negrita y por ultimo un prrafo con alineacin derecha en formato cursiva. No olvide el titulo de la pagina: Texto con alineacin. Guardar el documento con el nombre de: texto_formato5.htm <HTML> <HEAD><TITLE>Texto con alineacion </TITLE></HEAD> <BODY> <P> Este prrafo se muestra sin formato, sin alineacin. <BR> Observe los siguientes ejemplos: <BR> <P Align ="Center"> <B> Este prrafo se muestra con formato negrita. <BR> Y se encuentra alineado al centro de la pgina. </B> <P Align ="Right"> <I> Este prrafo se encuentra alineado al margen derecho <BR> de la pgina Web. <BR> Y con formato cursivo. <BR> </I> </P> Fin de la pgina. </BODY> </HTML> HTML . by: magh 13 El resultado del cdigo 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 prrafo la alineacin centrada y negrita.
La etiqueta P, align=right, i, se aplica al prrafo, alineacin derecha y texto en cursiva.
PRACTICA 3: Disear una pgina web que muestre en un prrafo datos referentes a sus estudios de primaria y otro prrafo datos de la secundaria. El primer prrafo alinearlo centrado en negrita y el segundo con alineacin derecha en cursiva. Adems debe mostrar como titulo de la pagina: Datos Escolares.
Existen otras etiquetas HTML, para aadir formatos especiales al texto. En la siguiente tabla se muestran las etiquetas que pueden ser utilizadas para aadir formato al texto.
Etiquetas Descripcin <SMALL>...</SMALL> El texto es ligeramente menor que lo normal <BIG>...</BIG> El texto es ligeramente ms grande que lo normal <SUP>...</SUP> El texto se muestra como Superndice <SUB>...</SUB> El texto se muestra como Subndice
Ejemplo 6: Disear una pgina web que contenga un titulo con alineacin centrada, posteriormente un prrafo con formato pequeo, otro prrafo con formato grande, en otro prrafo escriba las siguientes expresiones: H 2 O,X 5 +Y 2 . 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 pequeo</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 cdigo anterior se muestra en el navegador Internet Explorer:
Titulo de la pagina con la etiqueta title.
Contenido del documento etiqueta body.
La etiqueta H1, lnea de titulo. Etiqueta H2, lnea de subtitulo La etiqueta P, BR, se aplica al prrafo y un salto de prrafo. La etiqueta SMALL, texto en tamao pequeo. La etiqueta BIG, texto en tamao un poco ms grande. La etiqueta SUP, SUB, texto de forma superndice y subndice.
PRACTICA 5: Disear una pgina web que contenga una expresin algebraica. Incluya lo siguiente: Factorizar la expresin: 8a 2 +(c-d) 2 y x 9 +(m 3 1) 3 , la primer expresin en tamao fuente grande y la segunda expresin en tamao fuente pequeo. Adems debe mostrar como titulo de la pagina: Factorizacin de Binomios.
I II I. .8 8 C Co on nt t r ro ol l d de e f f u ue en nt t e es s La apariencia de una pgina Web, no slo depende de los encabezados, los nfasis y la alineacin; tambin es muy importante, controlar la apariencia de las fuentes y caracteres especiales, esto es, controlando el tipo de fuente, tamao y color, que son propiedades que se aplican al texto, para dar una mejor presentacin a las pginas. HTML . by: magh 15 Tamao y color de las fuentes. Para establecer el tipo de fuente que se desea utilizar, el tamao y color, al texto de una pgina Web, utilice la siguiente etiqueta con sus atributos y definiciones.
Etiqueta Atributo Descripcin <FONT>...</FONT> Controla la apariencia del texto que encierra. FACE ="..." Nombre de la fuente a utilizar. Puede usar nombres mltiples de fuentes separndose por comas y la primera que se encuentre en la lista ser la que se utilice. SIZE ="..." El tamao de la fuente de 1 a 7. El predeterminado es 3. Tambin se puede especificar como un valor relativo al tamao 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 Estndar Black (negro) Blue (azul) Gray (gris) White (blanco) Yellow (amarillo) Lime (lima) Red (rojo) Aqua (can) Maroon (marrn) Green (verde) Fuschia (fucsia) Purple (prpura) Navy (azul marino) Olive (verde oliva) Silver (color plata) Real (azul verdoso)
Ejemplo 8: Disear una pgina web que contenga una lnea de texto en color verde de tamao 6, posteriormente un prrafo con texto color azul tamao 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 tamao 6 <BR> </FONT> <BR><P> <FONT SIZE="4" COLOR="Blue"> Este prrafo se mostrar con la fuente <BR>actual del navegador, con un tamao 4 <BR>y en color azul </FONT><BR> <P>Fin de la pgina. </BODY> </HTML>
HTML . by: magh 16 El resultado del cdigo 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 tamao y color del texto que escriba.
PRACTICA 6: Disear una pgina web que contenga los colores del arco iris. El nombre de cada color mostrarlo con el color de fuente correspondiente, iniciando con tamao de fuente 7 hasta 1. Adems debe mostrar como titulo de la pagina: Colores del Arco Iris.
I II I. .9 9 S Se el l e ec cc ci i n n d de e u un n t t i i p po o d de e f f u ue en nt t e e 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 estndar (Times New Roman) o la configurada en el navegador.
Tambin puede especificarse una fuente de segunda opcin, para cuando no se tenga instalada la fuente de primera opcin. Lo nico que se debe hacer es separar los nombres de las fuentes con una coma en l atributo FACE.
Ejemplo 9: Disear una pagina web que contenga como titulo de la pagina: Tipo de Fuentes, centrado, tipos de fuente: Courier, color Aqua, despus dibujar una lnea color negra. Con un prrafo centrado, tipo de fuente: Century, tamao 4, color azul. Incluir otro prrafo alineado a la derecha, tipo de fuente: ComicSans o Arial, tamao 3, color verde. Por ltimo una lnea con tipo de fuente: Georgia o Arial, tamao 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 prrafo se muestra centrado, <BR> con tipo de fuente Century, HTML . by: magh 17 <BR> de color azul, <BR> tamao 2. </FONT> <BR> <P ALIGN ="Right"> <FONT FACE ="Comic Sans MS, Arial" SIZE="3" COLOR = "Green"> Este prrafo se muestra a la derecha, <BR> con tipo d fuente Comic Sans, <BR> en caso de no encontrar la fuente, <BR> entonces se aplicar la 2da opcin <BR>que es la fuente Arial. </FONT><BR> <P> <FONT FACE="Georgia, Arial Black" SIZE="2" COLOR="Red"> Fin de la pgina. </FONT> </BODY> </HTML>
El resultado del cdigo anterior se muestra en el navegador Mozilla Firefox:
Titulo de la pgina etiqueta title. Contenido del documento etiqueta body. Etiqueta Allign, establece alineacin del texto. La etiqueta Font, controla las propiedades de texto. La etiqueta Face, Size, Color, establece el tipo de fuente, tamao y color del texto. Etiqueta P, aplica al prrafo. Etiqueta BR, salto de lnea.
PRACTICA 7: Disear una pgina web que contenga la definicin de: software, hardware y firmware. La primer definicin aplique para la fuente: Comic Sans, tamao: 6, color: rojo, alineacin: derecha. La segunda definicin aplique para la fuente: Century, tamao: 5, color: azul, alineacin: centrada. La tercer definicin aplique para la fuente: Calibri, tamao: 4, color: amarillo, alineacin: izquierda. Adems debe mostrar el titulo de la pagina: Conceptos Actuales.
I II I. .1 10 0 C Ca ar ra ac ct t e er re es s e es sp pe ec ci i a al l e es s Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los smbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, dara esto lugar a una ambigedad, ya HTML . by: magh 18 que el programa navegador podra interpretarlos como el comienzo o final de una etiqueta, en vez de un carcter ms del texto.
Para resolver este problema, existen unos cdigos para poder escribir estos caracteres y otros relacionados con las etiquetas.
Carcter Cdigo Descripcin Carcter Cdigo Descripcin < < 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 Fraccin © Derechos reservados ½ Medio fraccin ® Marca registrada ¾ Tres cuartos ° Grados centgrados $ $ Signo de dlar · Punto a media lnea
Ejemplo 10: Disear una pgina web que contenga como titulo de la pagina: Titulo con smbolo menor-mayor. Posteriormente una lnea de texto con el smbolo , en la siguiente lnea incluir el smbolo de grados centgrados. Otra lnea que contenga suma de fracciones + = , una lnea con Nombres propios con acentos y por ultimo una lnea que muestre el signo de centavos () y de dlares($). Guardar el documento con el nombre de: texto_especial10.htm
<HTML> <HEAD><TITLE> < Titulo 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 ¢ 10 el segundo, <BR> por tanto al da gana $ 48. </BODY> </HTML>
HTML . by: magh 19 El resultado del cdigo anterior se muestra en el navegador Mozilla Firefox:
PRACTICA 8: Disear una pgina web que las marcas de varias empresas: Microsoft , Intel , adems incluya el siguiente texto: Microsoft obtuvo ganancias de ms que Intel en el primer trimestre del ao. Adems debe mostrar como titulo de la pagina: Empresas.
I II I. .1 11 1 E Ef f e ec ct t o os s e en n e el l T Te ex xt t o o 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 versin adecuada de navegador, en los siguientes ejemplos slo vers el texto, pero no los enmarcados. Etiqueta Atributo Descripcin <FIELDSET>.. </FIELDSET> Permite enmarcar un texto o una imagen. <LEGEND>.. </LEGEND> Permite agregar una leyenda al texto enmarcado, simulando un titulo. ALIGN=.. La posicin de la etiqueta: LEFT (por defecto), RIGHT o CENTER
Ejemplo 11: Disear una pgina web que contenga como titulo de la pgina: 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 ©, muestra el Copyright.
El s mbolo ° muestra el grado centigrado.
Los simbolos ¼ ½ ¾ muestran , , .
El smbolo &a, muestra la letra a con acento HTML . by: magh 20 El resultado del cdigo anterior se muestra en el navegador Mozilla Firefox:
PRACTICA 9: Disear una pgina web que contenga mascotas del mundo acutico. Incluya el nombre de las tres mascotas dentro de recuadros separados. Adems debe mostrar como titulo de la pagina: Mascotas Acuticas.
I II I. .1 12 2 T Te ex xt to o e en n m mo ov vi i m mi i e en nt t o o El elemento <MARQUEE> </MARQUEE>sirve para hacer que el contenido de un bloque se desplace horizontalmente a lo ancho del mismo. Adems de texto el bloque puede contener tambin imgenes.
Etiqueta Atributo Descripcin <MARQUEE> </MARQUEE> Permite dar el efecto de texto en movimiento. DIRECTION =.. Establece en que direccin se mueve el contenido del bloque en la pantalla. Tiene dos valores: LEFT (por defecto) y RIGHT. BEHAVIOR =.. Determina cmo 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 pgina es cargada de nuevo. ALTERNATE El contenido del bloque se mover alternativamente en una direccin y otra, comenzando por la indicada por direction
La etiqueta FIELDSET y LEGEND, muestran el titulo del recuadro.
HTML . by: magh 21 LOOP=n N es un nmero 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 nmero de pixels que se deben tomar entre cada redibujado del bloque. Por defecto, tomar el bloque entero. Este parmetro debe utilizarse con cuidado, puede ser contradictorio con el anterior SCROLLDELAY. ALIGN=.. Indica la posicin de la etiqueta: LEFT (por defecto), RIGHT y CENTER BGCOLOR =rrggbb Indica el color de fondo del bloque
Ejemplo 12: Disear una pgina web que contenga como titulo de la pgina: 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="aguilas.jpg"> Imagen y Texto en Movimiento </MARQUEE> <P Align="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 cdigo anterior se muestra en el navegador Internet Explorer:
PRACTICA 10: Disear una pgina web que contenga los datos personales: nombre, direccin, telfono y correo electrnico, los cuatro datos con tipo de fuente y color diferente adems de agregar movimiento con direcciones opuestas (derecha-izquierda). El titulo de la pagina: Datos en Movimiento.
I II I. .1 13 3 D Di i s se e o o d de e L Li i s st ta as s Cuando se presenta informacin en papel, probablemente incluye listas de pasos numeradas o con vietas; adems de listas sangradas para organizar la informacin, como trminos y sus respectivas definiciones o el lineamiento de un plan de negocios. Puesto que las listas son tan comunes, HTML proporciona etiquetas que automticamente sangran el texto y agregan, nmeros o vietas delante de cada elemento de la lista.
Hay tres tipos de listas HTML, las cuales son: Listas ordenadas: son listas que tienen nmeros o letras frente a cada elemento. Listas no ordenadas: son listas con un smbolo especial de vieta delante de cada elemento. Lista de definiciones: son listas sin ningn nmero o smbolo delante de cada elemento.
En la siguiente tabla se muestran las etiquetas utilizadas para crear las listas, que sern utilizadas en las pginas Web.
La etiqueta MARQUEE, permite mostrar texto en movimiento.
HTML . by: magh 23 Etiqueta Atributo Descripcin <OL>...</OL> Lista ordenada <LH>...</LH> Encabezado de la lista ordenada. <LI> Elemento de la lista ordenada. TYPE ="..." Tipo de numeracin 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 smbolo de vieta 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 numeracin que se utiliza para etiquetar la lista. Los valores posibles son: A, a, I, i, 1. VALUE ="..." El valor numrico 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 definicin. <LH>...</LH> Encabezado de la lista definida. <LI> Elemento de la lista definida. <DT> Un trmino de definicin, como parte de una lista de definicin. <DD> La definicin correspondiente a un trmino de definicin, como parte de una lista de definicin.
Ejemplo 13: Disear una pgina web que contenga como ttulo Lista de los Continentes, adems de mostrar la lista de los nombres de los continentes con numeracin ordinal, numeracin 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>Amrica <LI>Oceana </OL> <HR> <OL type=I> HTML . by: magh 24 <LH>En forma de numeracion romana:</LH> <LI>Europa <LI>Asia <LI>frica <LI>Amrica <LI>Oceana </OL> <HR> <OL type=A> <LH>En forma de numeracin de letras:</LH> <LI>Europa <LI>Asia <LI>frica <LI>Amrica <LI>Oceana </OL> </BODY> </HTML>
HTML . by: magh 25 PRACTICA 11: Disear una pgina web que contenga una lista ordenada de los lenguajes de programacin orientado a la web. Adems debe mostrar como titulo de la pagina: Lenguajes de Programacin Orientados a la Web.
Ejemplo 14: Disear una pgina web que contenga como titulo Lista definida por usuario debe mostrar una lnea centrada, color amarillo, que contenga la clasificacin del software, despus 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 align="Center"> <Font Color="Red"> La clasificacin principal del software,<BR> con la finalidad de usar listas 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 aplicacion </I> </Font> <DD> Se considera a todas las aplicaciones que dirige <BR> las distintas tareas para las que se utilizan las computadoras. </DL> </BODY> </HTML>
PRACTICA 12: Disear una pgina web que contenga como titulo Lista definida por usuario, que contenga la clasificacin de los dispositivos de hardware, despus la definicin. La etiqueta DL define una lista.
La etiqueta DT, agrega uan elemento a la lista.
La etiqueta DD, agrega el texto al elemento de la lista.
HTML . by: magh 26
I II I. .1 14 4 C Cr re ea ac ci i n n d de e V V n nc cu ul l o os s ( (E En nl l a ac ce es s o o H Hi i p pe er rv v n nc cu ul l o os s) )
La caracterstica que ms ha influido en el espectacular xito del Web ha sido, aparte la de su carcter 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 (Obsrvese 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 pgina 2. Enlaces con otra pgina nuestra o con una pgina del web de otro usuario o servidor 3. Enlaces con una direccin de e-mail
Etiqueta Atributo Descripcin <A>...</A> Con el atributo HREF, se crea un vnculo hacia otro documento o ancla; con el atributo NAME; se crea un ancla hacia la cual puede establecerse un vnculo. HREF ="..." La direccin 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 inclusin de la imagen, tambin 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 sera:
<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 podrn localizarlo, pero para maquinas externas la referencia podra 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, considerndose este a partir del directorio actual.
Vincular a un lugar especfico en la misma pgina
Los vnculos especficos en la misma pgina, 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 especfico dentro de la pgina, o en otra.
Ejemplo 15: Disear una pgina web que contenga como titulo Vnculos en pgina, debe mostrar crear el ancla arrb, despus una lnea que indique vnculos en la misma pgina, despus dos lneas que haga referencia a la mitad y al final del documento web, un prrafo con fuente Comic, color verde, varios saltos de lnea, otro prrafo con formato predefinido, crear el ancla mitad, varios saltos de lnea, otro prrafo con formato predefinido, crear el ancla fin y el enlace inicio de pagina. Guarde la pgina como: vinculo_misma_web15.htm
<HTML> <HEAD><TITLE>Vinculos en Pagina</TITLE></HEAD> <BODY> <A Name ="Arrb"></A> <H1 Align ="Center">Vinculos en la<BR>misma pagina</H1><HR> <A Href ="#Mitad">A la mitad de la pgina</A><BR><P> <A Href ="#Fin">Fin de la pgina</A><BR><P> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Green"> Por lo regular este tipo de vnculos se crean, <BR> cuando existe la necesidad de que el usuario<BR> se desplace a un punto en especifico,<BR> HTML . by: magh 28 pero en la misma pgina;<BR> es decir, al inicio, a la mitad, al final <BR> u otro lugar en especifico.<BR><P> Observe como funciona esta pgina. </FONT> <BR> <P> <BR> <BR> <BR> <PRE> Si la pagina se cargara en el navegador, se vera de la siguiente manera: </PRE> Estas en el punto medio de la pgina <A Name ="Mitad"></A> <BR> <BR> <br> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <PRE> Este contenido de la pagina se cargara al final de la ventana. Si no aprecias el efecto agrega mas saltos de linea. </PRE> Fin de la pgina<BR><P> <A Name ="Fin"></A> <A Href ="#Arrb">Inicio de pgina</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: Disear una pgina web que contenga un reportaje o investigacin de tema de su inters (deporte, espectculo, moda, etc.), el contenido debe estar organizado en tres secciones, para que el usuario pueda navegar por la pgina a travs de vnculos, es decir vnculos: arriba, centro y abajo. Muestre el titulo de la pagina: Reportaje.
Crear vnculos con otra pgina Web. Cuando se crean este tipo de vnculos, por lo regular son a una direccin especfica en la Web, como es el caso de algn sitio Web; por ejemplo: buscadores, correo electrnico, etc.
Cuando desea conectar su pgina con otra que se encuentre en la Web, slo tiene que escribir la direccin (URL), en el atributo HREF y para que este vnculo funcione, debe estar colgado a la Internet. En caso de no estar conectado, no podr anclarse al sitio Web.
Ejemplo 16: Disear una pgina web que contenga como titulo Vnculos web, debe mostrar una lnea centrada, color azul, que contenga Vnculos a otros sitios web, despus una lnea de color gris, fuente: Comic Sans o Arial, tamao 3 indicando el texto a continuacin se muestran cinco vnculos, por ltimo centra los prrafos 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>Vnculos Web</TITLE></HEAD> <BODY> <H1 Align ="Center" Color="Blue"> Vinculos a Otros <BR> Sitios Web </H1> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Gray"> A continuacin, se muestran cinco <B>vnculos</B> <BR> que lo llevarn a los siguientes sitios:</FONT><BR><P> <Div align="Center"> <A Href ="http://www.hotmail.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: Disear una pgina 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 pginas web que contenga informacin del lugar en donde naci. Debe enlazarlas una con otra, es decir al ser presionado la palabra1 avance a la pgina 2, al ser presionada la palabra2 retroceda a la pagina 1. Debe mostrar como titulo de la paginas: Palabras con Enlaces.
I II I. .1 15 5 I In ns se er rc ci i n n d de e I Im m g ge en ne es s Una de las caractersticas principales del lenguaje html y de la www es la introduccin de elementos multimedia. En un documento html se puede incluir cualquier imagen en alguno de los siguientes formatos grficos: GIF, J PEG BMP
El formato GIF es ms recomendado para iconos, grfico y el formato J PEG es ms til para imgenes 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, adems de incluir el nombre del archivo de imagen. La etiqueta encargada de mostrar imgenes 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 vnculo a un sitio web.
La etiqueta NAME, permite definir el texto que contiene el vnculo. HTML . by: magh 31 Etiqueta Atributo Descripcin <IMG> Inserta una imagen en la lnea del documento. SRC ="..." nico atributo obligatorio, indica la direccin o nombre de archivo de la imagen. TITLE ="..." Indicar un texto alternativo a mostrar si no fue posible mostrar la imagen. ALIGN ="..." Determina la alineacin 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, AbsMi ddle, o AbsBottom, determinan la alineacin vertical de la imagen con otros elementos de la misma lnea. WIDTH=xx Indica el ancho al que se mostrar la imagen, escalndola a este tamao. Tambin 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 tamao del documento. En caso de que la imagen sea mayor o menor se escalar a este tamao
Ejemplo 17: Disear una pgina web que contenga como titulo Imgenes, debe mostrar una lnea de texto centrada, color rojo, que contenga Esta pgina contiene imgenes, despus una lnea de color rojo, enseguida un texto de fuente: Comic o Arial, tamao: 3, color: azul y junto a este una imagen, en el siguiente prrafo mostrar primero la imagen y junto a esta un texto de fuente: Century o Arial, tamao: 2, color: verde. Debe guardar el documento con el nombre de: imagen17.htm
<HTML> <HEAD> <TITLE>Imagenes</TITLE> </HEAD> <BODY> <H1 Align ="Center" Color="Red">Esta pagina contiene imagenes: <BR></H1> <HR Color="Yellow"> <FONT FACE ="Comic Sans, Arial" SIZE="3" COLOR = "Blue"> Primero se muestra el Texto y en la misma linea muestra la imagen <IMG SRC="aguilas.jpg" TITLE="Club America"> </FONT> <BR> <P> <FONT FACE ="Century, Arial" SIZE="2" COLOR = "Green"> <IMG SRC="aguilas.jpg" TITLE="Club America"> Primero se muestra la Imagen y en la misma linea muestra el texto </FONT> <BR> <P> </BODY> </HTML>
HTML . by: magh 32
Ejemplo 18: Disear una pgina web que contenga como titulo Imagen Combinada, debe mostrar una lnea de texto centrada, color rojo, que contenga Esta pgina contiene imgenes, despus una lnea de color rojo, enseguida un texto de fuente: Comic o Arial, tamao: 3, color: azul, alineado a la mitad respecto a la imagen tomada del subdirectorio imgenes, en la siguiente lnea mostrar primero la imagen tomada del subdirectorio modelos y junto a esta un texto de fuente: Century o Arial, tamao: 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" Align="Center">La pagina tiene imgenes 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. Alineado el texto a la mitad de la imagen <IMG SRC="imagen/firefox.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. Alineado 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: Disear una pgina web que contenga como titulo Distintas Imgenes, debe mostrar una lnea de texto centrada, que contenga La pagina tiene imgenes con distinto tamao, despus una lnea de color verde, enseguida un texto con una imagen de tamao normal, en el siguiente prrafo texto con una imagen aumentando el tamao de la misma con loa atributos: width, height. Por ltimo un texto y una imagen con la referencia o el vnculo al Correo de Hotmail. Debe guardar el documento con el nombre de: imagen_gde19.htm
<HTML> <HEAD> <TITLE> Distintas Imagenes </TITLE> </HEAD> <BODY> <H1 Align="Center">La pagina tiene imagenes con distinto tamao <BR></H1> <HR Color="Green"> Se muestra la imagen de tamao normal <IMG SRC="cbtis12.jpg"> <BR> <P> Se muestra la imagen mas grande, utilizando:WIDTH,HEIGHT <IMG SRC="cbtis12.jpg" WIDTH=200, HEIGHT=200> <BR> <P> Si desea que la imagen sirva como vinculo a la pgina del Hotmail: <A HREF="http://www.hotmail.com"><IMG SRC="cbtis12.jpg"> </A> </BODY> </HTML>
La etiqueta IMG SRC, define la imagen a mostrar.
La etiqueta ALIGN, determina la alineacin de la imagen. HTML . by: magh 34
PRACTICA 16: Disear una pgina web que contenga como titulo Mi Personalidad. Debe contener una serie de imgenes que definan su personalidad, adems de realizar una pequea descripcin del significado de la imagen.
PRACTICA 17: Crear tres pginas web con una foto cada una. Debe enlazarlas una con otra, es decir al ser presionada la foto1 avance a la pgina 2, al ser presionada la foto2 avance a la pgina 3, al ser presionada la foto3 retroceda a la pagina 1. Debe mostrar como titulo de la paginas: Fotos con Enlaces.
I II I. .1 16 6 F Fo on nd do os s c co on n C Co ol l o or r U Un ni i f f o or rm me e Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY>, de la siguiente manera: <BODY BGCOLOR="#rrggbb"> rr Es un nmero indicativo de la cantidad de color rojo gg Es un nmero indicativo de la cantidad de color verde bb Es un nmero indicativo de la cantidad de color azul
Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos. Estos dgitos 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 alto de la imagen.
La etiqueta A HREF, especifica un vnculo a un sitio web. HTML . by: magh 35 Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color rojo es el #FF0000, porque tiene el mximo 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: Disear una pgina web que contenga como titulo Color de Fondo, debe mostrar una lnea de texto centrada, que contenga el texto Color de Fondo Amarillo, lnea de separacin color rojo. Un prrafo de color azul. Despus un texto con un vinculo, en otro prrafo 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 Align="Center"> Color de Fondo Amarillo <BR> </H1> <HR Color="Red"> <FONT COLOR="blue"> Se muestra una linea de texto en color azul </FONT> <BR> <BR> <BR> <BR> <BR> <FONT COLOR="blue"> Se muestra una linea 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 pgina web.
La etiqueta IMG SRC, define la imagen a mostrar.
La etiqueta A HREF, especifica un vnculo a un sitio web.
HTML . by: magh 36 PRACTICA 18: Disear una pgina web que contenga como titulo Fondo, debe mostrar una imagen y texto en color de su eleccin, incluya un color de fondo que haga contraste con su texto e imagen.
I II I. .1 17 7 C Co ol l o or re es s d de el l t t e ex xt t o o y y d de e l l o os s e en nl l a ac ce es s Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podra ocurrir que su lectura contra un fondo oscuro se dificultara 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, aadiendo a la etiqueta Body lo siguiente:
Etiqueta Atributo Descripcin <BODY> . </BODY> Representa algunos atributos que son de definicin global para todo el documento, estos definirn 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 detrs (al fondo) del texto y las imgenes 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 pgina 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 cdigos de los colores son los mismos que se han visto con anterioridad. La etiqueta, con todas sus posibilidades, sera:
Ejemplo 21: Disear una pgina web que contenga como titulo Imagen de Fondo, debe mostrar una lnea de texto centrada, que contenga Uso de Imagen como fondo, lnea de separacin color rojo. Una lnea de texto color verde. Despus un texto color blanco y por ultimo una lnea 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="Yellow"> <H1 Align="Center">Imagen como Fondo de la Pagina <BR></H1> <HR Color="Red"> <FONT COLOR="Blue"> <B> HTML . by: magh 37 Se muestra una linea de texto en color azul </B> </FONT> <BR> <BR> <BR> <BR> <BR> <FONT COLOR="White"> Se muestra una linea de texto en color blanco <BR> </FONT> <BR> <BR> <BR> <BR> <BR> Otra linea de texto con el color especificado <BR> en el atrbuto Text del Body </BODY> </HTML>
La etiqueta BODY BACKGROUND, establece una imagen de fondo de la pgina web.
La etiqueta TEXT, en caso de que no tenga asignado un color especfico, toma el color que de en esta etiqueta.
HTML . by: magh 38 Ejemplo 22: Disear una pgina web que contenga como titulo Atributos del Body, debe mostrar una lnea de texto centrada, que contenga Atributos del Body, lnea de separacin color rojo. Una lnea de texto con una palabra que tenga un link. Despus un texto que tenga link hacia un direccin de correo electrnico. 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 "ROJ O"> <! 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:maghtin@yahoo.com.mx">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: Disear una pgina web que contenga como titulo Atributos del Documento. Una lnea de texto con una palabra que tenga un link hacia un sitio web de su preferencia, otra lnea de texto que tenga link hacia su direccin de correo electrnico; ambos links agregue la propiedad de color verde y cuando sea visitado que cambie a blanco.
I II I. .1 18 8 D Di i s se e o o d de e t t a ab bl l a as s Permite la representacin de datos por filas y columnas, en forma tabular. La definicin es muy flexible indicando solo los elementos que forman cada fila y columna, calculndose de forma automtica el tamao que deben tener las celdas. En una tabla podemos introducir cualquier elemento del lenguaje html como: imagenes, enlaces, texto, listas, cabeceras, etc. Etiqueta Atributo Descripcin <TABLE> </TABLE> Es la etiqueta que permite definir una tabla. border=n Permite definir una tabla con un borde, el grosor es de n pxeles. cellspacing=n Indica el espacio que debe existir entre las distintas celdas de la La etiqueta BGColor, especifica el color de fondo de la pgina. 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 ningn 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 aparecern sin separacin.
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 funcin del tamao del documento. Se recomienda utilizar tamaos 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 ms recomendado en valor absoluto ya que el alto es ms difcil que pueda coincidir con la ventana. rowspan Indicar el nmero de filas que ocupar est celda en la misma fila. Es decir, permite combina celdas en una fila. colspan Indicar el nmero 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 alineacin del elemento dentro de la celda, en este caso afectar a todos los valores situados en la fila actual, tambin se podr indicar individualmente en los elementos TD. Puede tomar uno de los siguientes valores: LEFT: Alineacin a la izquierda de la celda. RIGHT: Alineacin a la derecha de la celda. CENTER: Indicar centrado. valign=top middle bottom Indicar la alineacin vertical del dato dentro de la celda. Se podr especificar donde se colocarn los datos dentro de la celda. Afectarn 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 tendrn 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: Disear una pgina web que contenga como titulo Tabla Simple sin Borde, debe mostrar una lnea de texto centrada, que contenga Uso de Tabla Sin Borde, lnea de separacin color rojo. Un prrafo que explique las etiquetas de la tabla. Por ltimo se define la tabla, se agrega una fila con 3 elementos, adems 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 Align="Center"> Tablas sin Borde <BR></H1> <HR Color="Red"> Con la etiqueta Table especificamos el inicio de una tabla:<BR> La etiqueta TR,especifica la FILA. <BR> La etiqueta TD,especifica cada elemento de la fila. <BR> <BR> <TABLE Border> <TR> <TD>Elemento1 Fila1 <TD> Elemento2 Fila1 <TD> Elemento3 Fila1 <TR> <TD>Elemento1 Fila2 <TD> Elemento2 Fila2 <TD> Elemento3 Fila2 </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 fila.
La etiqueta TD, define una celda en la fila. HTML . by: magh 42 Ejemplo 24: Disear una pgina web que contenga como titulo Tabla Combinada, debe mostrar una lnea de texto centrada, que contenga Tabla con Celdas Combinadas, lnea de separacin. Un prrafo que explique las etiquetas de la tabla. Se define la tabla, se agrega una fila con 1 elemento vaco y otro elemento que combinada 4 celdas de la fila, adems se agrega una 2da. fila con 1 elemento que combina 2 celdas de la 1er. columna adems se agregan 4 elementos de Texto a la misma fila, por ltimo se agrega una fila con 4 elementos numricos. Debe guardar el documento con el nombre de: tabla_combinada24.htm
<HTML> <HEAD> <TITLE>Tabla Combinada</TITLE> </HEAD> <BODY> <H1 Align="Center">Tablas con Celdas Combinadas </H1> <HR> La etiqueta TR, especifica la FILA. <BR> La etiqueta TH ColSpan, permite combinar 4 celdas en la fila <BR> La etiqueta TD, especifica cada elemento de la fila. <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 valign=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 fila.
La etiqueta TH, establece el encabezado de columna.
La propiedad ColSpan, indica el nmero de columnas que ocupar la celda actual (celda combinada).
La etiqueta TD, define una celda en la fila. HTML . by: magh 43 Ejemplo 25: Disear una pgina web que contenga como titulo Tabla Azul Combinada, debe mostrar una lnea de texto centrada, que contenga Tabla con Borde Color y Combinada lnea de separacin color rojo. Un prrafo 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 Align="Center"> Tablas con Borde, Color y Celdas Combinadas <BR></H1> <HR Color="Red"> Con la etiqueta Table especificamos el inicio de una tabla:<BR> Border, especifica el ancho de borde de la tabla <BR> BGColor, especifica el Color de Fondo de la tabla <BR> Caption, muestra el titulo en la parte superior de la tabla <BR> La etiqueta TR,especifica la FILA. <BR> La etiqueta TH ColSpan,especifica combinar 2 celdas en la fila <BR> La etiqueta TR,nuevamente especifica la FILA. <BR> La etiqueta TD,incluye los elementos en las celdas en la fila <BR> <BR> <TABLE BORDER=5 BgColor="Blue"> <Caption>Titulo Externo de Tabla </Caption> <TR> <TH COLSPAN=2>Futbol</TH><TH COLSPAN=2>Basketball</TH> </TR> <TR> <td>america</td><th>morelia</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: Disear una pgina web que contenga como titulo Alineacin de Contenido, debe mostrar una lnea de texto centrada, que contenga Alineacin de Contenido de los Elementos, lnea de separacin color rojo. Un prrafo 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 ms con 3 celdas cada fila y se agrega el contenido. Guarde el documento con el nombre tabla_alineacion26.htm
<HTML> <HEAD> <TITLE>Alineacion de Contentido</TITLE> </HEAD> <BODY> <H2 Align="Center">Alineacion del Contenido de los Elementos<BR> de las Celdas en las Tablas <BR></H2> <HR Color="Red"> Con la etiqueta Table especificamos el inicio de una tabla:<BR> Border, especifica 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 fila.
La etiqueta TH, establece el encabezado de columna.
La propiedad ColSpan, indica el nmero de columnas que ocupar la celda actual (celda combinada).
La etiqueta TD, define una celda en la fila. HTML . by: magh 45 Align, alinea toda la tabla al centro del documento.<BR> La etiqueta TR,especifica la FILA. <BR> La etiqueta TH,especifica el Titulo de las Columnas de la Tabla <BR> Align, alinea el contenido de la celda: centro, derecha o izquierda <BR> La etiqueta TD,especifica cada elemento de la fila. <BR> <BR> <TABLE BORDER=10 Align="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> J apon <TD ALIGN=RIGHT>J alisco </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 fila.
La etiqueta TH, establece el encabezado de columna.
La etiqueta TD, define una celda en la fila. HTML . by: magh 46 Ejemplo 27: Disear una pagina web que contenga como titulo Colores en la Celda, debe mostrar una lnea de texto centrada, que contenga Uso de los Colores en cada Celda, una lnea de separacin color rojo. Un prrafo 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, despus 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, especifica el color de fondo del documento> <BODY BGcolor="Cyan"> <H2 Align="Center">Colores en Cada Celda<BR> de la Tabla <BR></H2> <HR Color="Red"> <!Especificamos el Color de fuente azul.Establecemos Negrita> <FONT Color="Blue"> <B> Con la etiqueta Table especificamos el inicio de una tabla:<BR> Border, especifica el ancho de borde de la tabla <BR> La etiqueta TR,especifica la FILA. BgColor establece color de fondo de la fila<BR> La etiqueta TH,especifica el titulo de las columnas en la tabla <BR> La etiqueta TR,especifica otra FILA. <BR> La etiqueta TD,especifica cada elemento de la fila. <BR> Font,especifica el color de fuente del contenido de la celda <BR> <BR> </B> </FONT> <TABLE BORDER=5 Align="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"> anny@yahoo.com.mx </FONT> <TR> <TD BGCOLOR=GREEN>Betty <TD BGCOLOR=WHITE> 533-33-33 <TD BGCOLOR=RED> betts@yahoo.com.mx </TABLE> </BODY> </HTML>
HTML . by: magh 47
PRACTICA 20: Disear una pgina web que contenga como titulo Agenda Azul, inserte una Tabla con Borde y el fondo Color de su preferencia. Con la siguiente informacin: Nombre, correo electrnico y pgina 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: Disear una pgina web que contenga de titulo directorio turstico, inserte una tabla con la siguiente informacin: ciudad, contacto y una imagen. La primer columna alineacin: centrada, fuente: arial, negrita, color: azul La segunda columna alineacin derecha, fuente: comic sans, cursiva y enlace al email. La tercer columna alineacin: centrada, incluya un enlace a la ciudad que se trate, en caso de ser necesario ajuste la imagen a un tamao 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 fila.
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 fila. HTML . by: magh 48 I II I. .1 19 9 M Mu ul l t t i i m me ed di i a a: : A Au ud di i o o y y V Vi i d de eo o Como se ha explicado hasta ahora las posibilidades multimedia del lenguaje HTML se limita a insertar imgenes dentro de un texto, mostrar un fondo en el documento y modificar los colores que presentarn los distintos textos. Con las instrucciones bsicas de HTML que hemos visto hasta ahora esto es lo mximo que se puede conseguir, la posibilidad de mostrar vdeo o sonido en un documento HTML est limitada a la capacidad y a la configuracin del navegador.
La forma bsica 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 aplicacin externa que trate este tipo de archivos. El navegador tendr definida una lista aplicaciones que trabajarn con los formatos ms comunes de archivos de vdeo, audio o imgenes. Para reproducir sonido, se utiliza la etiqueta con sus atributos:
Etiqueta Atributo Descripcin <BGSOUND ..> Permite incluir msica 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 nmero o INFINITE que indicar de forma indefinida. VOLUME=n El volumen que se escuchar en el sonido (mnimo -10,000 y mximo 0).
Los formato de vdeo ms 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 vdeo, es buena idea acompaarlo de los "codecs" necesarios para el reproductor. Los "codecs" son unos controladores que se instalan en tu mquina y permiten que tu reproductor multimedia pueda decodificar correctamente los distintos formatos de vdeo que existen, y que son muchos.
Etiqueta Atributo Descripcin <IMG DYNSRC...> Permite la reproduccin 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 nmero de veces que se mostrar el vdeo. CONTROLS= CONSOLE o SMALLCONS OLE Indicar si se mostrarn los botones de control, que permitirn para, volver a reproducir, rebobinar. Puede tomar los valores de: CONSOLE (por defecto) o SMALLCONSOLE START= FILEOPEN MOUSEOVER Indica si la secuencia de vdeo empezar al abrir el archivo (FILEOPEN) o cuando pase el cursor del ratn 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 tamaos Standard: 90x120, 120x160, 180x240, 240x320, 300x400
Ejemplo 28: Disear una pgina web que contenga como ttulo Msica de Fondo, que reproduzca de forma automtica una meloda, establezca el color de fondo de la ventana AzulAqua, mostrar un texto como encabezado y por ultimo un prrafo describiendo cada etiqueta del cdigo. 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 Align="Center">Deleita tu oido con musica de fondo <BR> <BR></H1> <HR Color="Red"> <P Align="Center"> <FONT COLOR=BLUE> bgsound src,especifica el sonido a reproducir automaticamente IE<br> embed src,especifica 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 msica de fondo en una pgina 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 automticamente al cargarse la pgina, toma los valores true o false.
HTML . by: magh 50 Ejemplo 29: Disear una pgina web que contenga como titulo Msica Activada por Usuario, el fondo de la ventana AzulAqua, mostrar un texto como encabezado, despus un prrafo describiendo cada etiqueta del cdigo, por ltimo el link a la meloda. Debe guardar el documento con el nombre: sonido_xUsuario29.htm
<HTML> <HEAD> <TITLE>Musica Activada por el Usuario</TITLE> </HEAD> <!BgColor, especifica el color de fondo del documento> <BODY BGcolor="Aquamarine"> <H1 Align="Center">Deleita tu oido en el Momento <BR> que lo Decidas<BR> <BR> </H1> <HR Color="Red"> <P Align="Center"> <FONT COLOR=Red> Cuando el usuario decida escuchar el sonido, <BR> debe hacer clic en el enlace cancion <BR> <BR> A Href,especifica la ubicacion del sonido a reproducir <BR> <BR> O puedes utilizar una imagen que sirva de link. <BR> Alt,permite mostrar un texto alternativo 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.gif" Alt="Escucha Vientos de Cambio"></A> </FONT> </P> </BODY> </HTML>
La etiqueta BGcolor, establece el color de fondo en la pgina web.
La etiqueta A HREF, establece la referencia a un archivo de audio.
HTML . by: magh 51 Ejemplo 30: Disear una pgina web que contenga como titulo Video, el fondo de la ventana Azul, mostrar un texto como encabezado, despus un prrafo describiendo cada etiqueta del cdigo, por ultimo incluir el video para reproduccin automtica. Debe guardar el documento con el nombre video30.htm
<HTML> <HEAD> <TITLE>Video</TITLE> </HEAD> <BODY BGcolor="Blue"> <H1 Align="Center">Observa el video en pantalla<BR> <BR></H1> <HR Color="Red"> <P Align="Center"> <FONT COLOR=Yellow> <B> DYNSRC,especifica el video a reproducir de forma automatica en IE <BR> <BR> WIDTH,especifica la anchura en que se mostrara la reproduccion del video <BR> HEIGHT,especifica la altura en que se mostrara la reproduccion del video <BR> En caso de omitirse ambos valores.Toma el ancho-alto original del video.<BR><BR> Loop,numero de veces que se mostrara el video<BR> <BR> Start,indica que la secuencia de vdeo empezar al abrir el documento web<BR> <BR> EMBED SRC,especifica 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: Disear una pgina web que contenga un tema de sus inters y con msica de fondo que tenga relacin con el contenido investigado.
PRACTICA 23: Disear una pgina web que contenga un tema de sus inters y con un video que tenga relacin con el contenido investigado.
I II I. .2 20 0 D Do oc cu um me en nt t o os s c co on n F Fr ra am me es s 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. Tendrn asociado un nombre, que las distinguirn del resto de las frames de la pantalla y permitir usarlo en los hiperenlaces. La etiqueta IMG DYNSRC, permite la reproduccin del video especificado.
La etiqueta HEIGHT y WIDTH establecen el ancho y alto del video.
La etiqueta LOOP, indica el nmero de veces que se mostrar el vdeo.
La etiqueta Stara, indica que la secuencia de vdeo comience al abrir el archivo.
HTML . by: magh 53 En el caso que se cambie el tamao de la ventana, se podr determinar si la frame se ajusta a este tamao o mantiene su tamao intacto. Esto permite crear nuevos tipos de documentos, en los que por ejemplo se mantendr una regin esttica (lista de enlaces, barra de botones, formulario) y otra zona dinmica en la que se mostrar el resultado. De esta forma una de las principales utilidades de las frames es la creacin de pginas con un ndice o una cabecera esttica, consiguiendo as una mejora de la navegacin al poder acceder al ndice de una manera ms rpida y efectiva. El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, dentro de un documento con frames no tendr utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin entre documentos.
Etiqueta Atributo Descripcin <FRAMESET... /FRAMESET> Permite dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de pginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. ROWS=xx,yy Se definir separado por comas el tamao de cada una de las frames. De esta forma se dividir la pantalla de forma horizontal, segn cada una de las filas definidas. El tamao de la frame, puede expresarse de las siguientes formas: * En valor absoluto, que indicar el tamao en puntos de la pantalla. Los frames ocuparn la totalidad del espacio de la ventana del navegador * En tanto por ciento sobre el tamao de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustar para que coincida con el tamao de la ventana. * De forma relativa con el smbolo * que indica el tamao 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 definirn las frames de forma vertical. NAME Asigna un nombre a un marco para que despus podamos referirnos a l. SRC Indica la direccin 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 decisin. Las otras opciones que tenemos son YES y NO. NORESIZE Si lo especificamos el usuario no podr cambiar de tamao el marco. HTML . by: magh 54
FRAMEBORDER Al igual que su homnimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminar el borde con todos los marcos contiguos que tengan tambin este valor a cero.
MARGINWIDTH Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT Igual al anterior pero con mrgenes verticales. TARGET
target=_blank
target=_self
target=_parent
target=_top
Indicar la frame de destino de la operacin. Normalmente, en pginas sin frames, cuando se segua 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 vaca, 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> Definicin de las frames que forman el documento y de los archivos que incluye cada una. </FRAMESET> </HTML>
Definiremos las frames que formarn 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: Disear una pgina 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
Ejemplo 32: Disear una pgina 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 vnculos a peridicos nacionales y extranjero. Cuando se presione el hipervnculo de peridico nacional actualizar el frame de la derecha con la pgina principal del peridico, cuando se trate de peridico 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 pgina llamada noticias.htm , el cdigo se muestra continuacin: <HTML> <BODY> <A HREF="http://www.milenio.com/" target="destino"> Milenio </A> <BR> <A HREF="http://www.elfinanciero.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.nytimes.com/" target="_blank"> TheNewYork Times </A> </BODY> </HTML> HTML . by: magh 56
PRACTICA 24:
PRACTICA 25:
Adobe Dreamweaver CS3 . by: magh 57 I II II I. . A Ad do ob be e D Dr re ea am mw we ea av ve er r C CS S3 3 I II II I. .1 1 I In ns st t a al l a ac ci i n n
Inserte el DVD de instalacin de la Suite Adobe CS3. Caso contrario puede descargarlo de: http://www.adobe.com/es/downloads/
Despus de insertar el DVD, espere unos segundos a que inicie la instalacin. Observe el men de instalacin en donde puede instalar: Photoshop, Flash, Dreamweaver, Fireworks, Illustrator, Alter Effects Para continuar con la instalacin haga clic en el botn Dw. Adobe Dreamweaver CS3 . by: magh 58
Posteriormente aparecen las especificaciones y caractersticas de Dreamweaver, haga clic en el icono Dw, para continuar la instalacin.
Este proceso tarda algunos minutos, as que tmelo con paciencia. Despus aparece la licencia, para continuar con la instalacin haga en el botn Aceptar. Adobe Dreamweaver CS3 . 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 despus haga clic en el botn Siguiente.
En la siguiente ventana le indica los componentes a instalar, haga clic en el botn Instalar. Espere unos minutos para que el proceso de instalacin se lleve a cabo de forma adecuada. Adobe Dreamweaver CS3 . by: magh 60
Al terminar la instalacin, aparece la ventana indicndole un resumen de los componentes instalados, despus haga clic en el botn Finalizar.
En la siguiente ventana le indica que teclee el Nmero 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. Adobe Dreamweaver CS3 . by: magh 61
Al ejecutar el KeyGen, aparece la ventana ZWT, haga clic en el bton Generate Serial.
Observe el nmero que se genero, seleccione y copie el Nmero de serie. El serial generado con el KeyGen, debe pegarlo en el nmero de serie de la ventana de Dreamweaver, despus haga clic en el botn Siguiente. Adobe Dreamweaver CS3 . by: magh 62
En la siguiente ventana le pide Activar, haga clic en Otras opciones de activacin.
De las alternativas de activacin, haga clic en la opcin A travs de telfono, despus haga clic en el botn Aceptar. En esta ventana le pide que teclee el nmero de activacin. Adobe Dreamweaver CS3 . by: magh 63
Observe que aparece el Numero de serie que tecleo y se genera otro numero de activacin (seleccinelo y cpielo).
El nmero de activacin que copio, ahora pguelo abajo del botn Generate Serial, haga clic en el botn Activate, seleccione ese nmero para utilizarse para la activacin. El nmero de activacin generado debe teclearlo. Por ltimo haga clic en el botn Activar. Adobe Dreamweaver CS3 . by: magh 64
En esta ventana le indica que ha finalizado la activacin de su producto, haga clic en el botn Hecho.
Esta ventana le pide que registre su programa (producto), haga clic en el botn No registrarse. Para finalizar su instalacin, 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 botn Aceptar. Adobe Dreamweaver CS3 . by: magh 65
Cuando finaliza la instalacin de forma correcta, aparece el logo del producto. Listo ha finalizado satisfactoriamente la instalacin de su producto. Adobe Dreamweaver CS3 . by: magh 66 I II II I. .2 2 E Es sp pa ac ci i o o d de e t t r ra ab ba aj j o o El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente. En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao. 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 ttulo. I. Barra de mens Barra de ttulo Contiene el nombre del programa (Adobe Dreamweaver CS3) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.
H I Adobe Dreamweaver CS3 . by: magh 67 Barra de mens Contiene las operaciones de Dreamweaver, agrupadas en mens 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 mens, 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 rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra las vistas Cdigo y Diseo. La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin 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 cdigo B. Mostrar vistas de cdigo y diseo C. Mostrar vista de diseo D. Ttulo del documento E. Administracin de archivos F. Vista previa/Depurar en explorador G. Actualizar vista de diseo 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 cdigo Slo muestra la vista Cdigo en la ventana de documento. Mostrar vistas de cdigo y diseo Divide la ventana de documento entre las vistas Cdigo y Diseo. Cuando seleccione esta vista combinada, se encontrar disponible la opcin Vista de diseo encima del men Ver. Mostrar vista de diseo Slo muestra la vista Diseo en la ventana de documento. Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en cdigo, no podr ver los archivos en la vista Diseo y los botones Diseo y Dividir aparecern atenuados. Ttulo del documento Permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del navegador. Si el documento ya tiene ttulo, ste aparecer en dicho campo. Admi nistracin de archivos Muestra el men emergente Administracin 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 diseo Actualiza la vista Diseo tras realizar cambios en la vista Cdigo. Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer clic en este botn. Adobe Dreamweaver CS3 . by: magh 68 Nota: La actualizacin tambin actualiza funciones de cdigo que dependen del DOM (modelo de objeto de documento), como la capacidad para seleccionar las etiquetas inicial y final de un bloque de cdigo. Ver opciones Permite definir las opciones de las vistas Cdigo y Diseo, 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 Diseo, la vista Cdigo o ambas. Ayudas visuales Permite utilizar distintas ayudas visuales para el diseo de las pginas. 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>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), 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 Tamao de ventana G. Tamao del documento y tiempo de descarga estimado Selector de etiquetas Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. 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 botn de derecho del ratn (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 Tamao de ventana (Slo visible en la vista Diseo.) Permite cambiar el tamao de la ventana de documento a dimensiones predeterminadas o personalizadas. Tamao del documento y tiempo de descarga Muestra la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia. Descripcin general del inspector de propiedades El inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado actualmente, como texto o un objeto insertado. El Adobe Dreamweaver CS3 . by: magh 69 contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen de la pgina, 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.
Introduccin a la barra Insertar La barra Insertar contiene botones para crear e insertar objetos, como tablas, elementos PA e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la herramienta con el nombre del botn. Los botones estn organizados en varias categoras entre las que puede cambiar haciendo clic en las fichas situadas en la parte superior de la barra Insertar. Si el documento actual contiene cdigo de servidor, documentos ASP o CFML, aparecen tambin otras categoras. Cuando se inicia Dreamweaver, se abre la ltima categora con la que ha trabajado.
Algunas categoras tienen botones con mens emergentes. Al seleccionar una opcin de un men emergente, dicha opcin se convierte en la accin predeterminada del botn. Por ejemplo, si selecciona Marcador de posicin de imagen en el men emergente del botn Imagen, la siguiente vez que haga clic en el botn Imagen, Dreamweaver insertar un marcador de posicin de imagen. Siempre que seleccione una nueva opcin del men emergente cambiar la accin predeterminada del botn. La barra Insertar est organizada en las categoras siguientes: Categora Comn Permite crear e insertar los objetos que se utilizan con ms frecuencia, como las imgenes y las tablas. Categora Diseo Permite insertar tablas, etiquetas div, marcos y widgets de Spry. Tambin puede elegir dos vistas para tablas: Estndar (valor predeterminado) y Tablas expandidas. Categora Formularios Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validacin de Spry. Categora Datos Permite insertar objetos de datos de Spry y otros elementos dinmicos, como juegos de registros, regiones repetidas y grabar formularios de insercin y actualizacin. Adobe Dreamweaver CS3 . by: magh 70 Categora Spry Contiene botones para crear pginas de Spry, incluidos objetos de datos y widgets de Spry. Categora Texto Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul. Categora Favoritos Permite agrupar y organizar los botones de la barra Insertar que utiliza con ms frecuencia en un lugar comn. Categoras de cdigo de servidor Slo estn disponibles para las pginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, J SP y PHP. Cada una de estas categoras contiene objetos de cdigo de servidor que pueden insertarse en la vista Cdigo.
I II II I. .3 3 C Cr re ea ac ci i n n y y e ed di i c ci i n n d de e a ar rc ch hi i v vo os s Creacin de documentos de Dreamweaver Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Adems de documentos HTML, es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos ColdFusion Markup Language (CFML), ASP, J avaScript y hojas de estilos en cascada (CSS). Tambin admite archivos de cdigo fuente, como Visual Basic, .NET, C#y J ava. 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 diseos de pgina predefinidos que vienen con Dreamweaver, incluidos ms de 30 diseos de pgina basados en CSS Un documento basado en una de las plantillas existentes
Creacin de una pgina en blanco Puede crear una pgina que contenga un diseo CSS prediseado o bien crear una completamente en blanco y realizar su propio diseo. 1 Seleccione Archivo >Nuevo o presiona las teclas Ctrl +N. 2 En la categora Pgina en blanco del cuadro de dilogo Nuevo documento, seleccione el tipo de pgina que desea crear en la columna Tipo de pgina. Por ejemplo, seleccione HTML para crear una pgina HTML, ColdFusion para crear una pgina ColdFusion, etc. 3 Si desea que su nueva pgina contenga un diseo CSS, seleccione un diseo CSS Adobe Dreamweaver CS3 . by: magh 71 prediseado en la columna Diseo; de lo contrario, seleccione Ninguno. En funcin de su seleccin, aparece una vista previa y una descripcin del diseo seleccionado en el lado derecho del cuadro de dilogo. Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas: Fija El ancho de colu mna se especifica en pxeles. La columna no cambia de tamao en funcin del tamao del navegador o de la configuracin del texto del visitante del sitio. Elstica El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin del texto, pero no en funcin del tamao de la ventana del navegador. Flotante El ancho de columna se especifica como porcentaje del tamao del navegador del visitante. El diseo se adapta si el visitante del sitio amplia o reduce el navegador, pero no en funcin de la configuracin del texto. Hbrida Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo, en el diseo de dos columnas hbridas, la barra lateral derecha tiene una columna principal flotante que se ajusta al tamao del navegador y una columna elstica a la derecha que se ajusta al tamao de la configuracin del texto del visitante del sitio. 4 Seleccione un tipo de documento del men emergente DocType. En la mayora de los casos, puede utilizar la seleccin predeterminada XHTML 1.0 de transicin. Si selecciona una de las definiciones de tipo de documento XHTML en el men DocType (DTD), las pginas nuevas sern compatibles con XHTML. Por ejemplo, puede hacer que un documentoHTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin 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 aplicacin XML. En general, la utilizacin 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 diseo CSS en la columna Diseo, seleccione una ubicacin para el cdigo CSS del diseo en el men emergente Diseo CSS en. Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se va a crear. Crear nuevo archivo Aade cdigo CSS para el diseo a un nuevo archivo CSS externo y la nueva hoja de estilos a la pgina que se va a crear. Vincular a archi vo existente Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseo. 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 opcin es especialmente til cuando desea utilizar el mismo diseo CSS (cuyas reglas CSS se encuentran en un nico archivo) en varios documentos. 6 (Opcional) Tambin puede adjuntar hojas de estilos CSS a la nueva pgina (independientes del diseo 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. Adobe Dreamweaver CS3 . by: magh 72 7 Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificacin y la extensin del archivo. 8 Haga clic en Obtener ms contenido si desea abrir Dreamweaver Exchange y descargar ms contenido de diseo de pginas. 9 Haga clic en el botn Crear. 10 Guarde el nuevo documento (Archivo >Guardar). 11 En el cuadro de dilogo que aparece a continuacin, 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 nmeros. En concreto, no utilice caracteres especiales (como , o ) ni signos de puntuacin (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 vnculos existentes con los archivos.
Creacin de una plantilla en blanco Puede utilizar el cuadro de dilogo 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 dilogo Nuevo documento, seleccione la categora Plantilla en blanco. 3 Seleccione el tipo de pgina que desea crear en la columna Tipo de pgina. 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 pgina contenga un diseo CSS, seleccione un diseo CSS predefinido en la columna Diseo; de lo contrario, seleccione Ninguno. En funcin de su seleccin, aparece una vista previa y una descripcin del diseo seleccionado en el lado derecho del cuadro de dilogo. Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas: Fija El ancho de columna se especifica en pxeles. La columna no cambia de tamao en funcin del tamao del navegador o de la configuracin del texto del visitante del sitio. Adobe Dreamweaver CS3 . by: magh 73 Elstica El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin del texto, pero no en funcin del tamao de la ventana del navegador. Flotante El ancho de columna se especifica como porcentaje del tamao del navegador del visitante. El diseo se adapta si el visitante del sitio amplia o reduce el navegador, pero no en funcin de la configuracin del texto. Hbrida Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo, en el diseo de dos columnas hbridas, la barra lateral derecha tiene una columna principal que se ajusta al tamao del navegador y una columna elstica a la derecha que se ajusta al tamao de la configuracin del texto del visitante del sitio. 5 Seleccione un tipo de documento del men emergente DocType. En la mayora de los casos, utilizar la seleccin predeterminada, XHTML 1.0 de transicin. Si selecciona una de las definiciones de tipo de documento XHTML en el men DocType (DTD), las pginas nuevas sern compatibles con XHTML. Por ejemplo, puede hacer que un documentoHTML sea compatible con XHTML seleccionando. XHTML 1.0 de transicin 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 aplicacin XML. En general, la utilizacin 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 diseo CSS en la columna Diseo, seleccione una ubicacin para el cdigo CSS del diseo en el men emergente Diseo CSS en. Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se va a crear. Crear nuevo archi vo Aade cdigo CSS para el diseo a una nueva hoja de estilos CSS externa y asocia la nueva hoja de estilos a la pgina que se va a crear. Vincular a archi vo existente Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseo. 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 opcin es especialmente til cuando desea utilizar el mismo diseo CSS (cuyas reglas CSS se encuentran en un nico archivo) en varios documentos. 7 (Opcional) Tambin puede adjuntar hojas de estilos CSS a la nueva pgina (independientes del diseo 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. 8 Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificacin y la extensin del archivo. 9 Haga clic en Obtener ms contenido si desea abrir Dreamweaver Exchange y descargar ms contenido de diseo de pginas. 10 Haga clic en el botn Crear. Adobe Dreamweaver CS3 . by: magh 74 11 Guarde el nuevo documento (Archivo >Guardar). Si an no ha aadido regiones editables a la plantilla, aparece un cuadro de dilogo que le indica que no hay regiones editables en el documento. Haga clic en Aceptar para cerrar el cuadro de dilogo. 12 En el cuadro de dilogo Guardar como plantilla, seleccione un sitio para guardar la plantilla y aada una descripcin para la misma en el cuadro Descripcin. 13 En el cuadro Nombre de archivo, introduzca un nombre para la nueva plantilla. No es necesario que aada una extensin de archivo al nombre de la plantilla. Al hacer clic en Guardar, se aade la extensin .dwt a la nueva plantilla y se guarda en la carpeta Templates del sitio.
Creacin de un documento basado en una plantilla 1 Seleccione Archivo >Nuevo o presione las teclas Ctrl +N. 2 En el cuadro de dilogo Nuevo documento, seleccione la categora Pgina de plantilla. 3 En la columna Sitio, seleccione el sitio de Dreamweaver que contiene la plantilla que desea utilizar; a continuacin, seleccione una plantilla de la lista de la derecha. 4 Desactive Actualizar pgina cuando cambie la plantilla si no desea actualizar esta pgina cuando realice cambios en la plantilla en la que se basa. 5 Haga clic en Preferencias si desea establecer las preferencias predeterminadas del documento, como el tipo de documento, la codificacin y la extensin del archivo. 6 Haga clic en Obtener ms contenido si desea abrir Dreamweaver Exchange y descargar ms contenido de diseo de pginas. 7 Haga clic en Crear y guarde el documento (Archivo >Guardar).
Creacin de una pgina basada en un archivo de muestra de Dreamweaver Dreamweaver se suministra con distintos archivos de elementos de diseo y diseos de pgina profesionales. Puede utilizar estos archivos de muestra como punto de partida para el diseo de las pginas 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 descripcin breve de los elementos de diseo de un documento en el cuadro de dilogo Nuevo documento. En el caso Adobe Dreamweaver CS3 . by: magh 75 de las hojas de estilos CSS, puede copiar hojas de estilos predefinidas y, a continuacin, aplicarlas a los documentos. Nota: Si crea un documento a partir de un conjunto de marcos predefinido, slo 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 dilogo Nuevo documento, seleccione la categora Pgina de muestra. 3 En la columna Carpeta demuestra, seleccione Hojas de estilos, Conjunto de marcos o Pginas de inicio y, a continuacin, seleccione un archivo de muestra en la lista de la derecha. 4 Haga clic en el botn Crear. El documento nuevo se abrir en la ventana de documento (vista Diseo). Si ha seleccionado Hojas de estilos CSS, la hoja de estilos se abre en la vista Cdigo. 5 Guarde el archivo (Archivo >Guardar). 6 Si aparece el cuadro de dilogo Copiar archivos dependientes, defina las opciones y haga clic en Copiar para copiar los activos en la carpeta seleccionada. Puede elegir su propia ubicacin para los archivos dependientes o utilizar la ubicacin predeterminada de carpeta que genera Dreamweaver (basada en el nombre original del archivo de muestra).
Cmo abrir y editar documentos existentes Puede abrir una pgina Web existente o un documento basado en texto, aunque no se hayan creado en Dreamweaver, y editarlos en la vista Diseo o la vista Cdigo. 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. Tambin puede abrir archivos de texto no HTML, como archivos J avaScript, 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. Tambin puede utilizar el panel Archivos para abrir los archivos. Adobe Dreamweaver CS3 . by: magh 76 2 Localice y seleccione el documento que desea abrir. Nota: Si todava 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 ubicacin. 3 Haga clic en Abrir. El documento se abrir en la ventana de documento. Los archivos J avaScript, archivos de texto y las hojas de estilos CSS se abren de forma predeterminada en la vista Cdigo. 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 continuacin, utilizar el comando Limpiar HTML de Word para eliminar los cdigos 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 cdigo 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 funcin 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 cdigo HTML generado por Word, cambie a la vista Cdigo: Ver>Cdigo
Adobe Dreamweaver CS3 . by: magh 77 3 Seleccione Comandos >Limpiar HTML de Word. Nota: Si Dreamweaver no logra determinar qu versin de Word se utiliz para guardar el archivo, seleccione la versin correcta en el men emergente.
4 Seleccione (o anule la seleccin de) las opciones de limpieza. Las preferencias que introduzca se guardarn como configuracin de limpieza predeterminada. Dreamweaver aplica la configuracin de limpieza al documento HTML y se abre un registro en el que se reflejan los cambios (a menos que desactive dicha opcin del cuadro de dilogo). Quitar todo el formato especfico de Word Elimina todos los cdigos HTML especficos de Microsoft Word, incluidos los cdigos XML de las etiquetas HTML, los metadatos y las etiquetas de vnculos personalizados de Word situados en la seccin del encabezado del documento, el formato XML de Word, las etiquetas condicionales y su correspondiente contenido y los prrafos y mrgenes vacos de los estilos. Puede seleccionar cada una de estas opciones individualmente utilizando la ficha Detalladas. Limpiar CSS Elimina todos los cdigos CSS especficos de Word, incluidos los estilos CSS en lnea 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 seccin del encabezado. Esta opcin se puede personalizar ms en la ficha Detalladas. Limpiar etiquetas <font> Elimina las etiquetas HTML y convierte el texto normal predeterminado a HTML de tamao 2. Reparar etiquetas mal anidadas Elimina las etiquetas de formato de fuentes insertadas por Word fuera de las etiquetas de prrafo y encabezado (nivel de bloque). Adobe Dreamweaver CS3 . by: magh 78 Definir color de fondo Permite introducir un valor hexadecimal para establecer el color de fondo del documento. Si no define ningn color de fondo, la pgina 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 despus de concluir la limpieza. 5 Haga clic en Aceptar o en la ficha Detalladas si desea seguir personalizando las opciones Quitar todo el formato especfico de Word y Limpiar CSS y luego haga clic en Aceptar.
I II II I. .6 6 C Cr re ea ac ci i n n d de e l l i i s st t a as s o or rd de en na ad da as s y y s si i n n o or rd de en na ar r Puede crear listas ordenadas (numeradas), listas sin ordenar (con vietas) y listas de definicin a partir de texto existente o de texto nuevo que escriba en la ventana de documento. Las listas de definicin no utilizan caracteres iniciales como puntos de vieta o nmeros y suelen utilizarse en glosarios o descripciones. Adems, las listas se pueden anidar. Una lista anidada es aqulla que contiene otras listas. Por ejemplo, en algunos casos puede resultar conveniente anidar una lista ordenada o con vietas en otra numerada u ordenada. Utilice el cuadro de dilogo Propiedades de lista para configurar el aspecto de toda una lista o de sus elementos por separado. Puede establecer el estilo de nmero, restablecer la numeracin o configurar las opciones de las vietas de los distintos elementos o de toda la lista. Adobe Dreamweaver CS3 . by: magh 80 Creacin de una lista nueva 1 En el documento de Dreamweaver, coloque el punto de insercin en el lugar en el que desea aadir la lista y siga uno de estos procedimientos: Haga clic en el botn Lista ordenada o Lista sin ordenar del inspector de propiedades
Seleccione Texto >Lista y elija el tipo de lista deseado: Lista sin ordenar (con vietas), Lista ordenada (numerada) o Lista de definicin.
El carcter 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.
Creacin de una lista usando texto existente 1 Seleccione una serie de prrafos para convertirlos en una lista. 2 Haga clic en el botn 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 definicin.
Creacin de una lista anidada 1 Seleccione los elementos de lista que desea anidar. 2 Haga clic en el botn Sangra del inspector de propiedades o elija Texto >Sangra. Dreamweaver aplicar sangra 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.
Adobe Dreamweaver CS3 . by: magh 81 Configuracin 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 automticamente a todos los elementos que vaya aadiendo a la lista. 2 Coloque el punto de insercin sobre el texto del elemento de lista y seleccione Texto >Lista > Propiedades para abrir el cuadro de dilogo 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 nmeros, con vietas, de directorio o de men. Dependiendo del tipo de lista que seleccione, aparecern determinadas opciones en el cuadro de dilogo. Estilo Determina el estilo de los nmeros o las vietas empleados para una lista numerada o con vietas. Todos los elementos de la lista tendrn 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.
I II II I. .7 7 B B s sq qu ue ed da a y y s su us st t i i t t u uc ci i n n d de e t te ex xt to o 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 bsqueda, que se encuentra el grupo de paneles Resultados, muestra los resultados de la bsqueda con la opcin Buscar todos. Nota: Para buscar archivos en un sitio, utilice diferentes comandos: Localizar en sitio local y Localizar en sitio remoto.
Bsqueda y sustitucin de texto 1 Abra el documento en el que se debe realizar la bsqueda o seleccione los documentos o una carpeta del panel Archivos. 2 Seleccione Edicin > Buscar y reemplazar.
Adobe Dreamweaver CS3 . by: magh 82 3 Utilice la opcin Buscar en para especificar los archivos en los que desea buscar: Texto seleccionado Limita la bsqueda al texto que est seleccionado en el documento activo. Documento actual Limita la bsqueda al documento activo. Abrir documentos Busca en todos los documentos que estn abiertos. Carpeta Limita la bsqueda a una carpeta especfica. Despus de seleccionar Carpeta, haga clic en el icono de carpeta para localizar y seleccionar la carpeta que desea buscar. Archi vos seleccionados en el sitio Limita la bsqueda a los archivos y las carpetas seleccionados actualmente en el panel Archivos. Sitio local actual completo Ampla la bsqueda 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 bsqueda que desea realizar: Cdigo fuente Permite buscar cadenas de texto especficas en el cdigo HTML. Puede buscar etiquetas especficas mediante esta opcin; sin embargo, la bsqueda Etiqueta especfica permite realizar una bsqueda ms flexible de las etiquetas. Texto Permite buscar cadenas de texto especficas en el texto del documento. La bsqueda de texto omite el cdigo 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 especficas que se encuentran dentro o fuera de una o varias etiquetas. Por ejemplo, en un documento que contiene el cdigo HTML siguiente, si busca intenta, especifica No est en etiqueta y la etiqueta i, slo encontrar la segunda aparicin de la palabra intenta: J uan <i>intenta</i> hacer su trabajo a tiempo, pero no siempre lo consigue. Y mira que lo intenta. . Etiqueta especfica Busca etiquetas, atributos y valores de atributos especficos, como todas las etiquetas td con valign definido como top. Nota: Al presionar Control+Intro oMays+Intro, se aadirn saltos de lnea en los campos de bsqueda de texto, lo que le permite buscar un carcter de retorno. Al llevar a cabo esta bsqueda, desactive la opcin Omitir espacio en blanco si no est utilizando expresiones regulares. Este mtodo busca un carcter de retorno en particular, no la aparicin de un salto de lnea. Por ejemplo, no busca etiquetas <br> ni <p>. Los caracteres de retorno aparecen como espacios en la vista Diseo, no como saltos de lnea. 5 Utilice las opciones siguientes para ampliar o limitar la bsqueda: Coincidir maysculas y mi nsculas Limita la bsqueda al texto que coincide exactamente con el uso de maysculas y minsculas 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 bsqueda. Por ejemplo, si esta opcin est seleccionada, este texto coincidir con este texto y con este texto, pero no con este texto. Adobe Dreamweaver CS3 . by: magh 83 Esta opcin no est disponible cuando est activada la opcin Utilizar expresin regular; en este caso es necesario escribir explcitamente la expresin regular para omitir el espacio en blanco. Observe que las etiquetas <p>y <br>no se consideran espacios en blanco. Palabra completa Limita la bsqueda al texto que coincida con una o varias palabras completas. Nota: Utilizar esta opcin equivale a realizar una bsqueda de expresiones regulares en forma de cadena de texto que empiecen y acaben con \b, la expresin normal de lmite de palabra. Utilizar expresin regular Considera algunos caracteres y cadenas cortas (por ejemplo, ?, *, \w y \b) de la cadena de bsqueda 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 Cdigo, realiza cambios en el documento e intenta buscar y reemplazar elementos que no son cdigo, aparecer un cuadro de dilogo informndole de que Dreamweaver est sincronizando las dos vistas antes de realizar la bsqueda. 6 Para buscar sin reemplazar, haga clic en Buscar siguiente o Buscar todos: Buscar siguiente Se desplaza hasta la siguiente aparicin del texto o de las etiquetas de la bsqueda del documento actual y la selecciona. Si la etiqueta no aparece ms veces en el documento actual, Dreamweaver contina con el documento siguiente, en el caso de que realice la bsqueda en ms de un documento. Buscar todos Abre el panel de bsqueda del grupo de paneles Resultados. Si realiza una bsqueda en un solo documento, la opcin Buscar todos muestra todas las apariciones del texto o de las etiquetas de la bsqueda, con el contexto en el que se encuentran. Si realiza una bsqueda 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.
I II II I. .8 8 R Re ev vi i s si i n n y y c co or rr re ec cc ci i n n o or rt t o og gr r f f i i c ca a Utilice el comando Ortografa del men Texto para revisar la ortografa del documento actual. El comando Ortografa no tiene en cuenta las etiquetas HTML ni los valores de atributo. De forma predeterminada, el corrector ortogrfico utiliza el diccionario de ingls de Estados Unidos. Para cambiar el diccionario, seleccione Edicin > Preferencias > General, a continuacin, seleccione el diccionario que desea utilizar en el men emergente Diccionario ortogrfico. 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 >Ortografa o presione Mays+F7. Cuando Dreamweaver encuentra una palabra que no reconoce, aparece el cuadro de dilogo Ortografa. Adobe Dreamweaver CS3 . by: magh 84 2 Seleccione la opcin adecuada teniendo en cuenta las discrepancias mostradas. Aadir a personal Incorpora la palabra no reconocida al diccionario personal. Omitir Ignora esta aparicin de la palabra no reconocida. Omitir todo Ignora todas las apariciones de la palabra no reconocida.
Cambiar Sustituye esta aparicin de la palabra no reconocida por el texto que usted escriba en el cuadro Cambiar a o por la seleccin de la lista Sugerencias. Cambiar todas Reemplaza de la misma manera todas las apariciones de la palabra no reconocida.
I II II I. .9 9 I Im mp po or rt t a ac ci i n n d de e d do oc cu um me en nt t o os s d de e M Mi i c cr ro os so of ft t O Of f f f i i c ce e Puede insertar contenido de un documento de Microsoft Word o Excel a una pgina Web nueva o existente. Al importar un documento de Word o Excel, Dreamweaver recibe el HTML convertido y lo inserta en la pgina Web. El tamao 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, tambin 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 pgina Web en la que desea insertar el documento de Word o Excel. 2 En la vista Diseo, siga uno de estos procedimientos para seleccionar el archivo: Arrastre el archivo desde su ubicacin actual a la pgina 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 dilogo Insertar documento, vaya al archivo que desea aadir, seleccione las opciones de formato adecuadas en el men emergente Formato en la parte inferior del cuadro de dilogo y luego haga clic en Abrir. Slo 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 bsico. Por ejemplo, Adobe Dreamweaver CS3 . by: magh 85 puede pegar texto y conservar la estructura de los prrafos, listas y tablas sin conservar negritas, cursivas u otras caractersticas de formato. Texto con estructura y formato bsico Inserta texto con formato HTML estructurado y simple (por ejemplo, prrafos 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 prrafo de Word Elimina espacios adicionales entre prrafos al pegar el texto si seleccion la opcin Texto con estructura o Formato bsico. El contenido del documento de Word o Excel aparecer en la pgina. NOTA: En caso de que el documento a importar contenga imgenes, aparece el siguiente cuadro de dialogo:
I II II I. .1 10 0 A Ap pl l i i c ca ac ci i n n d de e f f o or rm ma at t o o a a t t e ex xt t o o La aplicacin de formato a texto en Dreamweaver es similar a la utilizacin de un programa estndar de tratamiento de texto. Puede establecer estilos de formato predeterminados (Prrafo, Encabezado 1, Encabezado 2, etc.) para un bloque de texto, cambiar la fuente, el tamao, el color y la alineacin 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 diseadores y desarrolladores Web un mayor control sobre el diseo de la pgina Web, a la vez que les permite utilizar funciones mejoradas que optimizan la accesibilidad y reducen el tamao de archivo. Puesto que el formato y la alineacin se aplican mediante los comandos de formato de Dreamweaver, las reglas CSS estn incrustadas en el documento actual. Esto le permite reutilizar fcilmente los estilos existentes, as como asignar nombre a los estilos que cree. CSS se est convirtiendo en el mtodo preferido para aplicar formato a texto y presentar pginas Web. Si lo prefiere, puede optar por utilizar etiquetas de formato HTML para aplicar formato y alinear el texto de las pginas Web. Para utilizar etiquetas HTML en lugar de CSS, debe cambiar las preferencias de formato de texto predeterminadas de Dreamweaver. La utilizacin de CSS es una forma de controlar el estilo de una pgina Web sin que se vea afectada su estructura. Al separar los elementos visuales de diseo (fuentes, colores, mrgenes, etc.) de la estructura lgica de una pgina Web, CSS permite a los diseadores Web tener un control visual y tipogrfico de la pgina Web sin que ello repercuta negativamente en la integridad del contenido. Adems, al definir el diseo tipogrfico y el diseo de la pgina a partir de un solo bloque de cdigo, sin tener que recurrir a mapas de imagen, etiquetas font, tablas y GIF espaciadores, se pueden llevar a cabo descargas ms Adobe Dreamweaver CS3 . by: magh 86 rpidamente, mejorar el mantenimiento del sitioWeb y establecer un punto central desde el que se pueden controlar los atributos de diseo de varias pginas Web. Los estilos CSS definen el formato del texto de una determinada clase o redefinen el formato de una etiqueta HTML especfica (como h1, h2, p o li). Puede almacenar los estilos CSS que cree directamente en el documento (la configuracin 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 pginas Web, todas las pginas reflejarn automticamente los cambios realizados en la hoja. Para acceder a todas las reglas de estilos CSS de una pgina, utilice el panel Estilos CSS (Ventana >Estilos CSS). Nota: Puede combinar formato CSS y HTML 3.2 en la misma pgina. La aplicacin de formato se realiza de forma jerrquica: 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.
I II II I. .1 11 1 U Ut t i i l l i i z za ac ci i n n d de el l i i n ns sp pe ec ct to or r d de e p pr ro op pi i e ed da ad de es s p pa ar ra a d da ar r f f o or rm ma at t o o a a t t e ex xt t o o 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 convencin de asignacin de nombres: Style1, Style2, Style3, Stylen. Si asigna los mismos atributos de formato a dos o ms elementos del texto, Dreamweaver asigna una etiqueta a los elementos que tengan el mismo ttulo; 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 pgina y aplicar esos mismos estilos simplemente seleccionando el elemento de texto en la pgina y seleccionando un estilo en el men Estilos. Puede cambiar el nombre de los estilos por texto con ms significado, como Encabezado1, Encabezado2, Cuerpo y Cuerpo Tabla. El men emergente Estilo del inspector de propiedades muestra ambos nombres de estilos en la pgina, adems de una vista previa de las propiedades del estilo. Las propiedades mostradas en la vista previa son la familia de fuentes, el tamao y el grosor de la fuente, el color del texto y el color de fondo. Adobe Dreamweaver CS3 . by: magh 87 Cuando utiliza el inspector de propiedades para aplicar el estilo en negrita o cursiva, Dreamweaver aplica automticamente las etiquetas <strong>o <em>, respectivamente. Si disea pginas para navegadores de la versin 3.0 o anterior, debe cambiar esta preferencia en la categora General del cuadro de dilogo Preferencias (Edicin >Preferencias). Para ver un tutorial sobre la aplicacin de formato al texto con el inspector de propiedades, consulte http://www.adobe.com/go/vid0147_es
I II II I. .1 12 2 A Ap pl l i i c ca ac ci i n n d de e f f o or rm ma at t o o a a p p r rr ra af f o os s Dreamweaver admite todas las normas Web que se utilizan para aplicar formato a pginas y objetos. Utilice el men Formato del inspector de propiedades o el submen Texto >Formato de prrafo para aplicar las etiquetas estndar de prrafo y encabezado. 1 Site el punto de insercin en el prrafo o seleccione parte del texto del prrafo. 2 En el submen Texto > Formato de prrafo o en el men emergente Formato del inspector de propiedades, elija una opcin: Elija un formato de prrafo (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 prrafo. Seleccione Ninguno para quitar un formato de prrafo. Cuando aplica una etiqueta de encabezado, se aade automticamente la siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, seleccione Edicin > Preferencias; a continuacin, en la categora General, en la seccin Opciones de edicin, compruebe que la casilla Cambiar a prrafo sencillo tras el encabezado no est activada.
I II II I. .1 13 3 C Ca am mb bi i o o d de el l c co ol l o or r d de el l t t e ex xt t o o Puede cambiar el color predeterminado de todo el texto de una pgina o bien el color del texto seleccionado en la pgina. Definicin de colores de texto predeterminados para una pgina Seleccione Modificar > Propiedades de la pgina >Aspecto o Vnculos y, a continuacin, seleccione colores para las opciones Color del texto, Color de los vnculos, Vnculos visitados y Vnculos activos. Nota: El color del vnculo activo es el que adopta el vnculo cuando se hace clic en l. Adobe Dreamweaver CS3 . 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 nmero 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 botn Tachado (el botn cuadrado blanco y atravesado por una lnea roja que se encuentra en la esquina superior derecha).
I II II I. .1 14 4 A Al l i i n ne ea ac ci i n n d de e t t e ex xt to o Puede alinear texto en la pgina utilizando el inspector de propiedades o el submen Texto > Alinear. Asimismo, puede centrar cualquier elemento en una pgina usando el comando Texto >Alinear >Centro. Alineacin de texto en una pgina 1 Seleccione el texto que desea alinear o, simplemente, inserte el puntero al principio del texto. 2 Haga clic en una opcin de alineacin (Izquierda, Derecha o Centro) en el inspector de propiedades, o seleccione Texto >Alinear y seleccione un comando.
Cmo centrar elementos en la pgina 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 prrafo. Adobe Dreamweaver CS3 . by: magh 89 Aplicacin de sangra al texto El comando Sangra aplica la etiqueta HTML blockquote al prrafo de texto, y aplica sangra a ambos lados de la pgina. 1 Site el punto de insercin en el prrafo al que desea aplicar sangra. 2 Haga clic en el botn Sangra o Anular sangra del inspector de propiedades, seleccione Texto > Sangra o Anular sangra, o seleccione Lista >Sangra o Anular sangra en el men contextual. Nota: Puede aplicar varias sangras a un prrafo, cada vez que seleccione este comando.
I II II I. .1 15 5 U Ut t i i l l i i z za ac ci i n n d de e r re eg gl l a as s h ho or ri i z zo on nt t a al l e es s Las reglas horizontales (lneas) son tiles para organizar la informacin. Puede separar visualmente el texto y los objetos de una pgina con una o ms reglas. Creacin de una regla horizontal 1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertar una regla horizontal. 2 Seleccione Insertar >HTML >Regla horizontal.
Modificacin 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 pxeles o como porcentaje del tamao de la pgina. Alinear Especifica la alineacin de la regla (Predet., Izquierda, Centro o Derecha). Esta configuracin slo 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 opcin para trazar la regla con un color slido.
Adobe Dreamweaver CS3 . by: magh 90 I II II I. .1 16 6 A Ad di i c ci i n n d de e u un na a n nu ue ev va a c co om mb bi i n na ac ci i n n a a l l a a l l i i s st t a a d de e f f u ue en nt t e es s 1 Seleccione Texto > Fuente > Editar lista de fuentes. 2 Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botn <<para aadir la fuente a la lista de Fuentes elegidas. 3 Repita el paso 2 con cada fuente de la combinacin.
Para aadir 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 botn <<para aadirla a la combinacin. Aadir una fuente que no est instalada en el sistema resulta til, por ejemplo, para especificar una fuente slo para Windows cuando desarrolla pginas con Macintosh. 4 Cuando termine de seleccionar fuentes especficas, seleccione una familia genrica de fuentes en el men Fuentes disponibles y haga clic en el botn <<para pasar la familia genrica de fuentes a la lista Fuentes elegidas. Las familias genricas de fuentes son: cursiva, fantasa, 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 genrica de fuentes. Por ejemplo, la fuente monoespacio predeterminada en la mayora de los sistemas es Courier.
I II II I. .1 17 7 I In ns se er rc ci i n n d de e f f e ec ch ha as s 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 dilogo Insertar fecha no son las actuales y tampoco reflejan las que ver el usuario cuando visite el sitio. Slo son ejemplos de la forma en que se puede presentar esta informacin. 1 En la ventana de documento, site el punto de insercin en el lugar donde desea insertarla. 2 Siga uno de estos procedimientos: Seleccione Insertar >Fecha. En la categora Comn de la barra Insertar, haga clic en el icono Fecha. 3 En el cuadro de dilogo que aparece, seleccione el formato de da de la semana, fecha y hora. 4 Si desea que la fecha insertada se actualice cada vez que guarde el documento, seleccione Actualizar automticamente al guardar. Si desea que la fecha se convierta en texto normal cuando se inserte y no se actualice automticamente, desactive esa opcin. Adobe Dreamweaver CS3 . by: magh 91 5 Haga clic en Aceptar para insertar la fecha.
I II II I. .1 18 8 A Ad di i c ci i n n y y m mo od di i f f i i c ca ac ci i n n d de e i i m m g ge en ne es s Imgenes Existen muy diversos formatos de archivo grfico, aunque para pginas Web generalmente se utilizan tres formatos de archivo grfico: GIF, J PEG y PNG. GIF y J PEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayora de los navegadores. Los archivos PNG son los ms adecuados para casi cualquier tipo de grfico Web debido a su flexibilidad y su tamao de archivo reducido; no obstante, la visualizacin de imgenes PNG slo 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 diseando para un tipo de usuario concreto que utilice un navegador compatible con el formato PNG, deber utilizar archivos GIF o J PEG para poder llegar a ms usuarios. Insercin de una imagen Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de imagen en el cdigo 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 imgenes se pueden insertar de forma dinmica. Las imgenes dinmicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotacin de rtulos publicitarios es necesario seleccionar de forma aleatoria un nico rtulo de una lista de posibles rtulos y, despus, mostrar dinmicamente la imagen del rtulo seleccionado cuando se solicite una pgina. 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 cdigo HTML. Para ver un tutorial sobre la creacin de vnculos, vea http://www.adobe.com/go/vid0148_es 1 Coloque el punto de insercin en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuacin, siga uno de estos procedimientos: En la categora Comn de la barra Insertar, haga clic en el icono Imagen . En la categora Comn de la barra Insertar, haga clic en el men Imgenes 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 visualizacin de cdigo, si est trabajando en el cdigo). Seleccione Insertar >Imagen. Arrastre una imagen desde el panel Activos (Ventana >Activos) hasta la posicin deseada de la ventana de documento. A continuacin, siga con el paso 3. Arrastre una imagen desde el panel Archivos hasta la posicin deseada de la ventana de documento. A continuacin, siga con el paso 3. Adobe Dreamweaver CS3 . by: magh 92 Arrastre una imagen desde el escritorio hasta la posicin deseada de la ventana de documento. A continuacin, siga con el paso 3. 2 En el cuadro de dilogo 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 dinmica. Haga clic en el botn 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 imgenes, 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 dilogo en Preferencias (Edicin >Preferencias). 5 Introduzca los valores en los cuadros de texto Texto alternativo y Descripcin larga y haga clic en Aceptar. En el cuadro de dilogo Texto alternativo, escriba un nombre para la imagen o una breve descripcin. El lector de pantalla lee la informacin introducida en dicho cuadro. Debe limitar la entrada a alrededor de 50 caracteres. En el cuadro Descripcin larga, escriba la ubicacin 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 vnculo a un archivo con el que est relacionado u ofrece ms informacin acerca de la imagen. Nota: Puede completar uno o ambos cuadros de texto, en funcin 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.
Adobe Dreamweaver CS3 . by: magh 93 Definicin 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 ampliacin 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 creacin de scripts como J avaScript o VBScript. 3 Defina cualquiera de las opciones de imagen. An (Ancho) y Al (Alto) El ancho y el alto de la imagen en pxeles. Dreamweaver actualiza automticamente estos cuadros de texto con las dimensiones originales de la imagen al insertar una imagen en una pgina. 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 botn de restablecimiento del tamao 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 tamao de visualizacin 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 tamao, utilice una aplicacin de edicin de imgenes. Origen Especfica 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. Vnculo Especifica un hipervnculo para la imagen. Arrastre el icono de sealizacin 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 lnea. Alt Especifica el texto alternativo que aparecer en lugar de la imagen en los navegadores que slo admiten texto o en aqullos configurados para descargar las imgenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que slo admiten texto, el texto se reproduce en voz alta. En algunos navegadores, este texto tambin 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. Adobe Dreamweaver CS3 . by: magh 94 Espacio V y Espacio H Aaden espacio, en pxeles, a los lados de la imagen. Espacio V aade espacio en la parte superior e inferior de una imagen. Espacio H aade espacio a la izquierda y la derecha de una imagen. Destino Especifica el marco o la ventana donde se cargar la pgina vinculada. (Esta opcin 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. Tambin 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 vnculo. Si el marco que contiene el vnculo 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 vnculo. 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 diseadores utilizan una versin de 2 bpc (blanco y negro) de la imagen principal porque se carga ms rpidamente y ofrece a los visitantes una idea de lo que van a ver. Borde El ancho en pxeles del borde de la imagen. La configuracin predeterminada es sin borde. Edicin Inicia el editor de imgenes que ha especificado en las preferencias de editores externos y abre la imagen seleccionada. Optimizar Abre el cuadro de dilogo Optimizacin . Recorte Recorta el tamao 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 tamao se ha cambiado, lo que mejora su calidad en su nuevo tamao 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 tamao Restaura los valores de An (Ancho) y Al (Alto) para devolver el tamao original a la imagen. Este botn aparece a la derecha de los cuadros de texto An (Ancho) y Al (Alto) cuando se ajustan los valores de la imagen seleccionada. Alineacin de una imagen Puede alinear una imagen con el texto, con otra imagen, con un plug-in o con otros elementos de la misma lnea. Adems puede alinear horizontalmente una imagen. Adobe Dreamweaver CS3 . by: magh 95 1 Seleccione la imagen en la vista de diseo. 2 Establezca los atributos de alineacin de la imagen en el inspector de propiedades con el men emergente Alinear. Puede establecer la alineacin con relacin a otros elementos del mismo prrafo o de la misma lnea. Nota: HTML no ofrece ningn mtodo para ajustar texto alrededor del contorno de una imagen, como ocurre con algunos procesadores de textos. Las opciones de alineacin son las siguientes: Predeterminado Especifica una alineacin con la lnea de base. (El valor predeterminado puede variar en funcin del navegador del visitante del sitio.) Lnea de base e Inferior Alinean la lnea de base del texto (u otro elemento del mismo prrafo) con la parte inferior del objeto seleccionado. Superior Alinea la parte superior de una imagen con la parte superior del elemento ms alto (imagen o texto) de la lnea actual. Medio Alinea la parte central de la imagen con la lnea de base de la lnea actual. Texto superior Alinea la parte superior de la imagen con la parte superior del carcter ms alto de la lnea de texto. Medio absoluta Alinea la parte central de la imagen con la parte central del texto de la lnea actual. Inferior absoluta Alinea la parte inferior de la imagen con la parte inferior de la lnea de texto (incluidos los trazos descendentes, como en el caso de la letra g). Izquierda Sita 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 lnea. Derecha Sita 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 lnea. Cmo 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 tamao 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 tamao desea cambiar y vuelva a seleccionarlo o haga clic en la etiqueta correspondiente del selector de etiquetas para seleccionar el elemento. 2 Cambie el tamao del elemento siguiendo uno de estos procedimientos: Para ajustar el ancho del elemento, arrastre el manejador de seleccin del lado derecho. Para ajustar el alto del elemento, arrastre el manejador de seleccin de la parte inferior. Adobe Dreamweaver CS3 . by: magh 96 Para ajustar al mismo tiempo el ancho y el alto del elemento, arrastre el manejador de seleccin de la esquina. Para conservar las proporciones del elemento (su relacin ancho/alto) al ajustar sus dimensiones, arrastre el manejador de seleccin de la esquina mientras presiona la tecla Mays. Si desea ajustar el ancho y el alto de un elemento a un tamao especfico (por ejemplo, 1 por 1 pxel), utilice el inspector de propiedades para introducir un valor numrico. Puede cambiar visualmente el tamao de los elementos hasta un mnimo de 8 por 8 pxeles. 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 botn Restablecer tamao en el inspector de propiedades de imagen.
Recuperacin del tamao original de una imagen Haga clic en el botn Restablecer tamao del inspector de propiedades de imagen .
Recorte de una imagen Dreamweaver permite recortar imgenes 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 pgina 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. Aparecern manejadores de recorte alrededor de la imagen seleccionada. 2 Ajuste los manejadores de recorte de modo que el recuadro de lmite rodee el rea de la imagen de mapa de bits que desea mantener. 3 Haga doble clic en el recuadro de lmite o presione Intro para recortar la seleccin. 4 Un cuadro de dilogo le informa de que el archivo de imagen que est cortando cambiar en el disco. Haga clic en Aceptar. Los pxeles del mapa de bits seleccionado que se encuentren fuera del recuadro de lmite, se eliminarn, pero el resto de los objetos de la imagen permanecern. 5 Muestre una vista previa de la imagen para comprobar que la imagen ha quedado como esperaba. Si no es as, seleccione Edicin >Deshacer Recortar para volver a la imagen original. Nota: Puede deshacer el efecto del comando de recorte. Aj uste del brillo y el contraste de una imagen Brillo/Contraste modifica el contraste o el brillo de los pxeles de la imagen. Esto afecta a los resaltados, sombras y medios tonos de la imagen. Normalmente, la funcin Brillo/Contraste se utiliza para corregir imgenes que son demasiado oscuras o demasiado claras. Adobe Dreamweaver CS3 . by: magh 97 1 Abra la pgina que contiene la imagen que desea ajustar, seleccione la imagen y siga uno de estos procedimientos: Haga clic en el botn 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.
Cmo perfilar una imagen El perfilado aumenta el contraste de los pxeles situados alrededor de los bordes de los objetos para aumentar la definicin o nitidez de la imagen. 1 Abra la pgina que contiene la imagen que desea perfilar, seleccione la imagen y siga uno de estos procedimientos: Haga clic en el botn 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 dilogo 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 Edicin >Deshacer perfilar. Nota: Slo puede deshacer el efecto del comando de perfilado (y con ello volver al archivo de imagen original) antes de guardar la pgina que contiene la imagen. Una vez que haya guardado la pgina, los cambios realizados en la imagen quedarn guardados de forma permanente.
I II II I. .1 19 9 I In ns se er rc ci i n n d de e c co on nt t e en ni i d do o d de e F Fl l a as sh h 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 estn disponibles en Dreamweaver, los tipos de archivos Flash ms utilizados se encuentran: Archi vos (.fla) de Flash Archivos de origen de cualquier proyecto, que se crean en el programa Flash. Este tipo de archivo slo se puede abrir en Flash (no en Dreamweaver ni en los navegadores). Puede abrir el archivo Flash en Flash y, a continuacin, exportarlo a SWF o SWT para utilizarlo en los navegadores. Adobe Dreamweaver CS3 . by: magh 98 Archi vos SWF de Flash (.swf) Versin 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 botn Flash y objetos de texto Flash. Archi vos de plantilla Flash (.swt) Estos archivos permiten modificar y reemplazar informacin de un archivo SWF de Flash. Se utilizan en el objeto de botn Flash, que permite modificar la plantilla con texto o vnculos 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 incorporacin en una pgina Web. Los elementos Flash tienen parmetros personalizables que pueden modificarse para realizar diferentes funciones de la aplicacin. Formato de archivo Flash Video (.flv) Archivo de vdeo que contiene datos codificados de audio y vdeo para enviarlos a travs de FlashPlayer. Por ejemplo, si tuviera un archivo de vdeo de QuickTime o Windows Media, debera utilizar un codificador (como Flash8 Video Encoder o Sorensen Squeeze) para convertir el archivo de vdeo en un archivo FLV. Para ms informacin, visite Centro de desarrolladores http://www.adobe.com/go/flv_devcenter_es
Insercin de un archi vo SWF (contenido de Flash) 1 En la vista Diseo de la ventana de documento, site el punto de insercin en el lugar donde desea insertar el contenido y luego siga uno de estos procedimientos. En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Texto . Seleccione Insertar >Media >Flash. 2 En el cuadro de dilogo que aparece, seleccione un archivo Flash (.swf). En la ventana de documento aparecer un marcador de posicin de Flash (al contrario que en el caso de los objetos de botn 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 posicin 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 botn Reproducir. Haga clic en Detener para poner fin a la vista previa. Tambin 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 pgina, presione Control+Alt+Mays+P. Al hacerlo, todos los objetos Flash y archivos SWF estn configurados para Reproducir. Adobe Dreamweaver CS3 . by: magh 99 Configuracin de propiedades de pelculas Flash y Shockwave Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape Navigator, Dreamweaver inserta las pelculas 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 pelcula Shockwave. Seleccione un archivo FlashSWF o una pelcula 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 ampliacin situada en la esquina inferior derecha del inspector de propiedades.)
Nombre Especifica un nombre para identificar una pelcula en los scripts. Introduzca un nombre en el cuadro de texto sin ttulo que aparece a la izquierda del inspector de propiedades. An (Ancho) y Al (Alto) Especifican el ancho y el alto de la pelcula en pxeles. Archi vo 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 estn instalados en el equipo Dreamweaver y Flash. Para editar un archivo Flash (SWF), deber editar el documento origen de la pelcula. Editar Inicie Flash para actualizar un archivo FLA (un archivo creado en la herramienta de edicin de Flash). Esta opcin estar desactivada si no tiene cargado Flash en el equipo. Restablecer tamao Restaura el tamao original de la pelcula seleccionada. Bucle Hace que la pelcula se reproduzca continuamente; cuando no est seleccionada, la pelcula se reproduce una vez y se detiene. Rep. autom. (Reproduccin automtica) Reproduce automticamente la pelcula al cargar la pgina. Espacio V y Espacio H Especifican el nmero de pxeles de espacio en blanco que habr por encima, por debajo y a ambos lados de la pelcula. Calidad Controla el antialias durante la reproduccin de la pelcula. Los valores altos brindan una mayor calidad a la pelcula, pero requieren un procesador ms rpido 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 automtica da prioridad a la velocidad, pero mejora el aspecto siempre que resulte posible. Alta automtica da prioridad a las dos cualidades, aunque, si es necesario, sacrifica el aspecto en pos de la velocidad. Escala Determina cmo se ajusta la pelcula a las dimensiones establecidas por los cuadros de texto de ancho y alto. La configuracin predeterminada hace que la pelcula se reproduzca entera. Adobe Dreamweaver CS3 . by: magh 100 Sin borde Ajusta la pelcula a las dimensiones establecidas para que no aparezcan bordes y se mantenga la relacin de aspecto original. Aj uste exacto Ajusta la escala de la pelcula a las dimensiones establecidas sin tener en cuenta la relacin de aspecto. Alinear Determina cmo se alinear la pelcula en la pgina. Fnd Especifica un color de fondo para la zona de la pelcula. Este color tambin aparecer cuando la pelcula no se est reproduciendo (mientras se carga y despus de haberse reproducido). Parmetros Abre un cuadro de dilogo para introducir parmetros adicionales que se transferirn a la pelcula. La pelcula deber estar diseada para recibir estos parmetros adicionales. Creacin e insercin de un botn Flash Puede crear e insertar botones Flash en los documentos mientras trabaja en la vista Diseo o en la vista Cdigo. Si tiene Flash instalado, no es necesario hacer esto; el objeto de botn Flash es un botn actualizable basado en una plantilla de Flash. Nota: Deber guardar el documento antes de insertar un objeto de texto o de botn Flash. 1 En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar el botn Flash. 2 Para abrir el cuadro de dilogo Insertar botn Flash, siga uno de estos procedimientos: En la categora Comn de la barra Insertar, seleccione Media y haga clic en el icono Botn Flash . Seleccione Insertar >Media >Botn Flash.
3 Seleccione las opciones deseadas del cuadro de dilogo Insertar botn Flash y haga clic en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.
El cuadro de dialogo Insertar botn, elija de la lista Estilo, observe en el cuadro Muestra los colores y formas, en el cuadro Texto del botn escriba el contenido del botn, 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. Despus de establecer las propiedades, haga clic en el botn Aceptar. Aparece otro cuadro de dialogo que le pregunta sobre los atributos de accesibilidad de flash, haga clic en el botn Aceptar. Adobe Dreamweaver CS3 . by: magh 101 Modificacin de un objeto de botn Flash Puede modificar las propiedades y el contenido del objeto de botn Flash. El inspector de propiedades muestra las propiedades del botn Flash. Puede utilizar el inspector de propiedades para especificar los atributos HTML fsicos del botn, como su ancho, alto y color de fondo. (Haga clic en la flecha de ampliacin, situada en la esquina inferior derecha, para ver ms propiedades.) Para modificar otras propiedades de contenido de un botn Flash, como el texto y el color del botn, as como el URL que abre el navegador cuando se hace clic en el botn, utilice el cuadro de dilogo Insertar botn Flash.
Modificacin del contenido de un objeto Flash 1 Para realizar cambios en el contenido, muestre el cuadro de dilogo Insertar botn Flash siguiendo uno de estos procedimientos: Haga doble clic en el objeto de botn Flash. Haga clic en Editar en el inspector de propiedades. Haga clic con el botn derecho del ratn y elija Editar en el men contextual. 2 Seleccione un estilo de botn de la lista Estilo. Puede ver un ejemplo del botn en el cuadro de texto Muestra. Haga clic en esta muestra para ver cmo funciona en el navegador. 3 Opcional: en el cuadro Texto de botn, escriba el texto que desee mostrar. 4 En el men Fuente, seleccione la fuente del texto del botn. Si la fuente predeterminada de un botn 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 botn en la pgina y obtener una vista previa. 5 En el cuadro Tamao, introduzca un valor numrico para el tamao de la fuente. 6 Opcional: en el cuadro de texto Vnculo, introduzca un vnculo absoluto o relativo al documento para el botn. ste es el URL que el navegador abrir cuando el visitante haga clic en el botn. 7 Opcional: en el cuadro Destino, especifique la ubicacin en la que se abrir el documento vinculado. Puede seleccionar una opcin demarco o ventana en el men emergente. Los nombres de fotograma slo 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. Adobe Dreamweaver CS3 . by: magh 102 10 Haga clic en Obtener ms estilos para pasar al sitio Adobe Exchange y descargar ms estilos de botn. 11 Haga clic en Aplicar o Aceptar para insertar el botn Flash en la ventana de documento.
I II II I. .2 20 0 A Ad di i c ci i n n d de e s so on ni i d do o Formatos de archivo de audio Si lo desea, puede aadir sonido a una pgina 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 mtodo para aadir sonido son: su finalidad, el tipo de usuarios a los que est destinado, el tamao 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 aadir 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 ms comunes junto con algunas de sus ventajas y desventajas en relacin con el diseo Web. El formato .midi o .mid (Interfaz digital para instrumentos musicales, Musical Instrument Digital Interface) Este formato es para msica instrumental. Los archivos MIDI son compatibles con numerosos navegadores y no precisan ningn plug-in. Aunque su calidad de sonido es muy alta, sta puede variar en funcin de la tarjeta de sonido del visitante. Un archivo MIDI pequeo puede contener un clip de sonido de larga duracin. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales. Los archivos de formato .wav (Extensin de forma de onda, Waveform Extension) Estos archivos ofrecen una buena calidad de sonido, son compatibles con numerosos navegadores y no requieren ningn plug-in. Puede grabar sus propios archivos WAV desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de los clips de sonido que se pueden utilizar en las pginas 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 mayora de los navegadores y no requiere plug-in. Tambin se pueden grabar archivos AIFF desde un CD, una cinta, a travs de un micrfono, etc. Sin embargo, el gran tamao de archivo limita considerablemente la duracin de los clips de sonido que se pueden utilizar en las pginas Web. El formato .mp3 (Audio del Grupo de Expertos en Imgenes en Movimiento, Motion Picture Experts Group Audio o MPEGAudi o Nivel-3) Un formato comprimido que reduce considerablemente el tamao 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 tecnologa 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 tamao del archivo es superior al de un archivo Real Audio, por lo que una cancin entera puede tardar bastante en descargarse en una Adobe Dreamweaver CS3 . by: magh 103 conexin de mdem de acceso telefnico (lnea telefnica) tpica. Para reproducir archivos MP3, los visitantes debern descargar e instalar una aplicacin 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 compresin con tamaos de archivo ms pequeos que MP3. Descarga archivos de canciones completas en un perodo 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 debern descargar e instalar la aplicacin auxiliar o plug-in RealPlayer para reproducir estos archivos. .qt, .qtm, .mov o QuickTime Es un formato de audio y de vdeo desarrollado por Apple Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo utilizan la mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin. Los PC tambin pueden reproducir archivos en formato QuickTime, pero requieren un controlador de QuickTime especial. QuickTime admite la mayora de los formatos de codificacin, como Cinepak, J PEG y MPEG. Nota: Adems de los formatos ms comunes enumerados anteriormente, existen muchos otros formatos de archivo de audio y vdeo que pueden utilizarse en la Web. Si encuentra un formato de archivo multimedia que no conoce, localice al creador del formato para obtener informacin sobre cul es la mejor manera de utilizarlo e implementarlo.
Incrustacin de un archi vo de sonido Al incrustar audio se incorpora el sonido directamente en la pgina, pero el sonido slo se reproduce si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Puede incrustar archivos si desea utilizar msica de fondo o si quiere controlar el volumen, el aspecto del reproductor en la pgina o los fragmentos de inicio y final del archivo de sonido. Al incorporar archivos de sonido en pginas Web, medite detenidamente cul ser su uso en el sitio Web y cmo utilizarn los visitantes del sitio estos recursos multimedia. Proporcione siempre un control para desactivar o activar la reproduccin de sonido, por si los visitantes no desean escuchar el contenido de audio. 1 En la vista Diseo, site el punto de insercin en el lugar en el que desea colocar el archivo y luego siga uno de estos procedimientos: En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el icono Plugin del men desplegable. Seleccione Insertar >Media >Plug-in.
Adobe Dreamweaver CS3 . by: magh 104 2 En el inspector de propiedades, haga clic en el icono de carpeta junto al cuadro de texto Vnculo para acceder al archivo de audio o escriba la ruta y el nombre del archivo en el cuadro de texto Vnculo. 3 Especifique el ancho y el alto introduciendo los valores en los cuadros de texto correspondientes o cambiando el tamao del marcador de posicin del plug-in en la ventana de documento. Estos valores determinan con qu tamao se muestran los controles de audio en el navegador.
I II II I. .2 21 1 I In ns se er rc ci i n n d de e o ob bj j e et to os s m mu ul l t t i i m me ed di i a a Puede insertar archivos SWF u objetos de Flash, pelculas QuickTime o Shockwave, applets de J ava, controles ActiveX y otros objetos de audio o vdeo 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 cdigo HTML. 1 Site el punto de insercin en la ventana de documento en la que desea insertar el objeto. 2 Inserte el objeto siguiendo uno de estos procedimientos: En la categora Comn de la barra Insertar, haga clic en el botn 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 dilogo que le permitir seleccionar un archivo origen y especificar diversos parmetros para el objeto multimedia. Para evitar que aparezcan estos cuadros de dilogo, seleccione Edicin > Preferencias > General y desactive la opcin Mostrar dilogo al insertar objetos. Para anular las preferencias de presentacin de cuadros de dilogo, mantenga presionada la tecla Control mientras inserta el objeto. Por ejemplo, para insertar un marcador de posicin para una pelcula Shockwave sin especificar el archivo, mantenga presionada la tecla Control u Opcin y haga clic en el botn Shockwave en el men emergente Media de la categora Comn de la barra Insertar, o bien seleccione Insertar > Media > Shockwave. 3 Seleccione las opciones deseadas en el cuadro de dilogo Seleccionar archivo o Insertar Flash y haga clic en Aceptar. Nota: Aparece el cuadro de dilogo Atributos de accesibilidad si ha elegido mostrar los atributos al insertar medios en el cuadro de dilogo Edicin > Preferencias. 4 Establezca los atributos de accesibilidad. Nota: Tambin puede editar atributos de objetos multimedia seleccionando el objeto y editando el cdigo HTML en la vista Cdigo o Adobe Dreamweaver CS3 . by: magh 105 haciendo clic con el botn derecho del ratn o manteniendo pulsada la tecla Ctrl y, a continuacin, seleccionando Editar cdigo de etiqueta. Ttulo Introduzca un ttulo 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 nmero para el orden de tabulacin del objeto de formulario. Configurar el orden de tabulacin resulta til cuando existen otros vnculos y objetos de formulario en la pgina y es preciso que el usuario se desplace a travs de ellos en un orden especfico. Si establece el orden de tabulacin de un objeto, asegrese de definir el orden de tabulacin de todos ellos. 5 Haga clic en Aceptar para insertar el objeto multimedia. Nota: Si pulsa Cancelar, en el documento aparece un marcador de posicin 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 parmetros y atributos de cada objeto. Puede editar los atributos de accesibilidad de un objeto.
Insercin de pelculas Shockwave Puede utilizar Dreamweaver para insertar pelculas Shockwave en los documentos. Adobe Shockwave, el estndar para multimedia interactivo en la Web, es un formato comprimido que permite la descarga rpida de los archivos multimedia creados en Macromedia Directorde Adobe y su reproduccin en los navegadores de uso ms frecuente. 1 En la ventana de documento, coloque el punto de insercin en el lugar en el que desea insertar una pelcula Shockwave y siga uno de estos procedimientos: En la categora Comn de la barra Insertar, haga clic en el botn Media y seleccione el icono Plugin del men desplegable. Seleccione Insertar >Media >Shockwave. 2 En el cuadro de dilogo que aparece, seleccione un archivo de pelcula. 3 En el inspector de propiedades, introduzca el ancho y el alto de la pelcula en los cuadros An y Al.
Adobe Dreamweaver CS3 . by: magh 106 Adicin de vdeo (formatos distintos de Flash) Puede aadir vdeo a su pgina Web de distintas formas y empleando diferentes formatos. El vdeo 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 vnculo con el videoclip o incrstelo en la pgina. Para establecer un vnculo con el videoclip, introduzca un texto para el vnculo, como Descargar videoclip, seleccione el texto y haga clic en el icono de carpeta del inspector de propiedades. Localice la ubicacin del archivo de vdeo y seleccinelo. Nota: El usuario debe descargarse una aplicacin auxiliar (un plug-in) para ver los formatos de flujo ms habituales, como por ejemplo Real Media, QuickTime o Windows Media.
I II II I. .2 22 2 P Pr re es se en nt t a ac ci i n n d de e c co on nt t e en ni i d do o e en n t t a ab bl l a as s Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseo de texto y grficos en una pgina HTML. Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o ms celdas. Aunque las columnas no suelen especificarse explcitamente en el cdigo HTML, Dreamweaver permite manipular tanto columnas como filas y celdas. Dreamweaver ofrece dos mtodos de visualizacin y manipulacin de tablas: el modo estndar, en el que las tablas se presentan en forma de cuadrcula de filas y columnas, y el modo de diseo, que permite dibujar, cambiar el tamao y mover cuadros en la pgina 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 insercin est en ella. J unto a los anchos se encuentran flechas para el men de encabezado de la tabla y los mens de encabezado de las columnas. Utilice los mens para acceder rpidamente a comandos relacionados con tablas. Puede activar o desactivar los anchos y los mens. Si no ve el ancho de una columna o de una tabla, esta tabla o columna no tiene un ancho especificado en el cdigo HTML. Si aparecen dos nmeros, el ancho visual que aparece en la vista de diseo no coincide con el ancho especificado en el cdigo HTML. Esto puede ocurrir al cambiar el tamao de una tabla arrastrando la esquina inferior derecha o al aadir contenido a la celda cuyo ancho es superior al establecido. Por ejemplo, si establece un ancho de columna en 200 pxeles y aade contenido que se ajusta al ancho de 250 pxeles, se mostrarn dos nmeros para dicha columna: 200 (ancho especificado en el cdigo) y (250) entre parntesis (ancho visual de la columna).
Prioridad de formato de tabla en HTML A la hora de dar formato a tablas en la vista Diseo, 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 alineacin, para toda la Adobe Dreamweaver CS3 . 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 continuacin, 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. Divisin y combinacin de celdas de tabla Podr combinar cualquier nmero de celdas contiguas, siempre que toda la seleccin sea una lnea o un rectngulo 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 automticamente la tabla (aadiendo los atributos colspan o rowspan que sean necesarios) para crear el diseo 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.
Insercin de una tabla y adicin de contenido Utilice la barra o el men Insertar para crear una tabla. A continuacin, aada texto e imgenes a las celdas de una tabla tal como lo hara fuera de una tabla. 1 En la vista Diseo de la ventana de documento, site el punto de insercin donde desee que aparezca la tabla. Seleccione Insertar >Tabla. En la categora Comn de la barra Insertar, haga clic en Tabla 2 Establezca los atributos del cuadro de dilogo Tabla y haga clic en Aceptar para crear la tabla. Filas Determina el nmero de filas de la tabla. Columnas Determina el nmero de columnas de la tabla. Ancho de tabla Especifica el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador. Grosor del borde Especifica el ancho en pxeles de los bordes de la tabla.
Adobe Dreamweaver CS3 . by: magh 108 Espacio entre celdas Determina el nmero de pxeles entre celdas de tabla contiguas. Si no se especifican los valores de grosor del borde o espaciado y relleno de celda, la mayora 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 Especfica el nmero de pxeles 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 informacin de la tabla. Texto Proporciona un ttulo de tabla que aparece fuera de la misma. Alinear texto Especifica el lugar en el que el texto de la tabla aparecer en relacin con la tabla. Resumen Ofrece una descripcin de la tabla. Los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.
Importacin y exportacin de datos de tabla Puede importar datos de tabla creados con otra aplicacin (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. Tambin 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 slo le interesan algunos datos de una tabla, copie las celdas que contienen dichos datos y pguelas fuera de la tabla para crear una nueva tabla y despus exporte la nueva tabla.
Importacin 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. Adobe Dreamweaver CS3 . by: magh 109 Archi vo de datos Nombre del archivo que desea importar. Haga clic en el botn 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 tendrn 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 ms larga en la columna. Seleccione Establecer para especificar un ancho fijo de la tabla en pxeles o como porcentaje del ancho de la ventana del navegador. Borde Especfica el ancho en pxeles de los bordes de la tabla. Relleno de celda Determina el nmero de pxeles entre el contenido de una celda y los lmites de la misma. Espacio entre celdas Nmero de pxeles entre celdas de tabla contiguas. Si no se especifican los valores de borde, espaciado y relleno de celda, la mayora 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.
Exportacin de una tabla 1 Site el punto de insercin en cualquier celda de la tabla. 2 Seleccione Archivo >Exportar >Tabla. 3 Especifique las opciones siguientes: Delimitador Especifica el carcter delimitador que debe utilizarse para separar los elementos en el archivo exportado.
Saltos de lnea 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.
Adobe Dreamweaver CS3 . by: magh 110 Seleccin de elementos de una tabla Puede seleccionar toda una tabla, fila o columna al mismo tiempo. Tambin 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 seleccin para que sepa qu celdas se seleccionarn. 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, quedarn resaltadas. Esto puede resultar til si utiliza tablas anidadas y desea ver la estructura de una de las tablas. Seleccin 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 cuadrcula 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 continuacin, 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 continuacin, seleccione Modificar > Tabla > Seleccionar tabla. Haga clic en una celda de la tabla, despus en el men del encabezado de tabla y, a continuacin, seleccione Seleccionar tabla. Aparecern manejadores de seleccin en los bordes inferior y derecho de la tabla Seleccin de una o varias filas y columnas 1 Site 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 seleccin, haga clic para seleccionar una fila o columna, o arrastre para seleccionar varias filas o columnas.
Seleccin de una sola columna 1 Haga clic en la columna. 2 Haga clic en el men de encabezado de columna y seleccione Seleccionar columna
Adobe Dreamweaver CS3 . by: magh 111 Seleccin de una sola celda Siga uno de estos procedimientos: Haga clic en la celda y, a continuacin, 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 Edicin >Seleccionar todo. Para seleccionar toda una tabla, vuelva a seleccionar Edicin > Seleccionar todo cuando una celda est seleccionada.
Seleccin de una lnea 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 continuacin, presione Mays y haga clic en otra celda. Todas las celdas de la regin lineal o rectangular definida por las dos celdas quedarn 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 ampliacin 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 Nmero de filas y columnas que tendr la tabla. An (Ancho) y Al (Alto) Especifica el ancho de la tabla en pxeles 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 pxeles de los bordes de la tabla. Si no se especifican los valores de borde o espaciado y relleno de celda, la mayora 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 Adobe Dreamweaver CS3 . by: magh 112 con el valor 0. Para ver los lmites de las celdas y la tabla cuando el borde es 0, seleccione Ver > Ayudas visuales > Bordes de tabla. Rell. celda Determina el nmero de pxeles entre el contenido de una celda y los lmites de la misma. Esp. celda Nmero de pxeles entre celdas de tabla contiguas. Alinear Determina dnde aparecer la tabla en relacin con otros elementos del mismo prrafo, como por ejemplo texto o imgenes. Izquierda alinea la tabla a la izquierda de los dems elementos (por lo que el texto del mismo prrafo se ajusta alrededor de la tabla a la derecha); Derecha alinea la tabla a la derecha de los dems 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 alineacin predeterminada. Si la alineacin est establecida como Predeterminado, no se muestra otro contenido junto a la tabla. Para mostrar una tabla junto a otro contenido, utilice la alineacin 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 pxeles y Convertir altos de tabla a pxeles establecen el ancho o el alto de todas las columnas de la tabla en su ancho actual en pxeles (tambin establecen el ancho de toda la tabla en su ancho actual en pxeles). 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 (tambin 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.
Configuracin 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:
Adobe Dreamweaver CS3 . by: magh 113 Horiz Especfica la alineacin 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 alineacin predeterminada del navegador (generalmente a la izquierda para celdas normales y al centro para celdas de encabezado). Vert Especifica la alineacin vertical del contenido de una celda, fila o columna. Puede alinear el contenido con la parte superior, media, inferior o con la lnea de base de la celda, o especificar que se utilice la alineacin predeterminada del navegador (generalmente al medio). An (Ancho) y Al (Alto) Ancho y alto de las celdas seleccionadas en pxeles o comoporcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduzca el smbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto apropiado en funcin 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 ms ancha o la lnea ms larga en una columna. Por esta razn, algunas veces el ancho de una columna resulta mucho ms grande que el de otras columnas de la tabla cuando se le aade contenido. Nota: Puede especificar el alto como porcentaje del alto total de la tabla, aunque quizs 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 sealizacin 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. Slo pueden combinarse celdas que constituyan una bloque rectangular o lineal. Dividir celda Divide una celda para crear dos o ms celdas. Slo puede dividirse una celda cada vez, por lo que este botn estar desactivado al seleccionar ms de una celda. No aj. Impide el ajuste de lnea, mantenindose todo el texto de una celda en una sola lnea. Cuando la opcin No aj. Est activada, las celdas se adaptarn 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 ms larga o la imagen ms grande en la celda y, a continuacin, 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 pxeles o porcentajes y puede convertirse de una unidad a otra. Adobe Dreamweaver CS3 . 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 cdigo HTML ms claro y conciso. 3 Presione el tabulador o la tecla Intro para aplicar el valor.
Aplicacin de formato a tablas y celdas Puede cambiar el aspecto de una tabla configurando las propiedades de la misma y de sus celdas o aplicndole un diseo predefinido. Antes de definir las propiedades de la tabla y de las celdas, tenga en cuenta el orden de prioridad para la aplicacin de formato es ste: celdas, filas y tablas. Para aplicar formato al texto de una celda de tabla, utilice los mismos procedimientos que utilizara 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 ampliacin situada en la esquina inferior derecha y cambie las propiedades como estime oportuno. 3 Cambie las propiedades segn convenga. Para ms informacin 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 cdigo HTML ms claro y conciso.
Cambio del tamao de tablas, columnas y filas Cambio del tamao de una tabla Seleccione la tabla. Para cambiar el tamao horizontal de la tabla, arrastre el manejador de seleccin de la derecha. Para cambiar el tamao vertical de la tabla, arrastre el manejador de seleccin de la parte inferior. Para cambiar ambos, arrastre el manejador de seleccin 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.
Adobe Dreamweaver CS3 . by: magh 115 El ancho de la columna contigua tambin vara; en consecuencia, cambia el tamao de las dos columnas. Se mostrar cmo se ajustan las columnas, pero el ancho general de la tabla no variar. Nota: En las tablas con ancho basados en porcentajes (no pxeles), si arrastra el borde derecho de la columna que se encuentra ms a la derecha, variar todo el ancho de la tabla y las columnas se harn ms anchas o estrechas proporcionalmente.
Cambio del ancho de una columna y mantenimiento del tamao de las dems Mantenga pulsada la tecla Mays mientras arrastra el borde de la columna. Cambiar el ancho de una columna. Las ayudas visuales le mostrarn cmo se ajustan las columnas. El ancho total de la tabla cambia para dar cabida a la columna que ha cambiado de tamao.
Cambio del alto de una fila visualmente Arrastre el borde inferior de la fila. Igualacin de los anchos de columna del cdigo con los anchos de columna visuales 1 Haga clic en una celda. 2 Haga clic en el men del encabezado de tabla y, a continuacin, seleccione Igualar todos los anchos. Dreamweaver restablece el ancho especificado en el cdigo para que coincida con el ancho visual.
Eliminacin 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 botn Borrar alto de fila o en el botn Borrar ancho de columna . Haga clic en el men del encabezado de tabla y, a continuacin, seleccione Borrar todos los altos o Borrar todos los anchos.
Adobe Dreamweaver CS3 . by: magh 116 Eliminacin 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.
Activacin o desactivacin de los anchos y los mens de tablas y columnas 1 Seleccione Ver >Ayudas visuales >Anchos de tabla. 2 Haga clic con el botn derecho del ratn en la tabla, y seleccione Tabla >Anchos de tabla.
Adicin y eliminacin de filas y columnas Para aadir 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 aadir automticamente otra fila a la tabla.
Adicin 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 insercin o una columna a la izquierda del punto de insercin. Haga clic en el men del encabezado de columna y, a continuacin, seleccione Insertar columna izquierda o Insertar columna derecha.
Adicin de varias filas o columnas 1 Haga clic en una celda. 2 Seleccione Modificar >Tabla >Insertar filas o columnas, complete el cuadro de dilogo y haga clic en Aceptar. Insertar Indica si deben insertarse filas o columnas. Nmero de filas o Nmero de columnas El nmero de filas o columnas que deben insertarse. Dnde Especifica si las nuevas filas o columnas deben aparecer antes o despus de la fila o columna de la celda seleccionada.
Eliminacin de una fila o columna Siga uno de estos procedimientos: Adobe Dreamweaver CS3 . by: magh 117 Haga clic en una celda dentro de la fila o de la columna que desea eliminar y, a continuacin, seleccione Modificar >Tabla >Eliminar fila o Modificar >Tabla >Eliminar columna. Seleccione una fila o columna completa y, a continuacin, seleccione Edicin >Borrar o presione Supr.
Adicin o eliminacin 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 aadir o eliminar filas, aumente o reduzca el valor de Filas. Para aadir 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.
Divisin y combinacin de celdas Utilice el inspector de propiedades o los comandos del submen Modificar >Tabla para dividir o combinar celdas. Como alternativa a la divisin y combinacin de celdas, Dreamweaver incluye tambin herramientas que permiten aumentar o disminuir el nmero de filas o columnas que ocupa una celda. Combinacin de dos o ms celdas en una tabla 1 Seleccione las celdas en una lnea contigua y en forma de un rectngulo. En la siguiente ilustracin, la seleccin es un rectngulo 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 sita en la celda combinada resultante. Las propiedades de la primera celda seleccionada se aplicarn a la celda combinada.
Adobe Dreamweaver CS3 . by: magh 118 Divisin 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 dilogo Dividir celda, especifique cmo desea dividir la celda: Dividir celda en Especifica si la celda debe dividirse en filas o en columnas. Nmero de filas/Nmero de columnas Especifica el nmero de filas o de columnas en que debe dividirse la celda.
Aumento o disminucin del nmero de filas o columnas que ocupa una celda Siga uno de estos procedimientos: Seleccione Modificar > Tabla > Aumentar tamao de fila, o bien Modificar > Tabla > Aumentar tamao de columna. Seleccione Modificar >Tabla >Reducir tamao de fila, o bien Modificar >Tabla >Reducir tamao de columna.
Copia, pegado y eliminacin 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 insercin o en el lugar de una seleccin 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 seleccin 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 lnea contigua y en forma de un rectngulo. En la siguiente ilustracin, la seleccin es un rectngulo de celdas, por lo que stas se pueden cortar o copiar.
Adobe Dreamweaver CS3 . by: magh 119 I II II I. .2 23 3 E Es st t a ab bl l e ec ci i m mi i e en nt t o o d de e v v n nc cu ul l o os s y y n na av ve eg ga ac ci i n n Tras configurar un sitio, puede vincular las pginas entre s. Puede crear vnculos HTML, mens de salto, barras de navegacin y mapas de imagen. Acerca de los vnculos Una vez que haya creado pginas HTML y haya configurado un sitio de Dreamweaver para almacenar los documentos, deber establecer conexiones entre sus documentos y otros documentos. Dreamweaver ofrece varios mtodos para crear vnculos con documentos, imgenes, archivos multimedia o software transferible. Puede establecer vnculos con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imgenes situados en un encabezado, lista, tabla, elemento con posicin absoluta o marco. Los vnculos se pueden crear y administrar de varias formas distintas. Algunos diseadores de sitios Web prefieren crear vnculos con pginas o archivos que todava no existen cuando estn trabajando, mientras que otros prefieren crear primero todos los archivos y las pginas y aadir los vnculos ms tarde. Otra forma de administrar vnculos consiste en crear pginas marcadoras de posicin en las que aadir y comprobar los vnculos antes de completar todas las pginas del sitio. Ubicacin y rutas de documentos A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vnculo y el documento con el que lo establece. Cada pgina Web tiene una direccin exclusiva, denominada URL (Localizador Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vnculo local (un vnculo 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 raz del sitio. Existen tres tipos de rutas de vnculos: Rutas absolutas (como http://www.adobe.com/support/dreamweaver/contents.html). Rutas relativas al documento (como dreamweaver/contents.html). Rutas relativas a la raz 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 pginas 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. Tambin puede utilizar rutas absolutas para vnculos locales (con documentos del mismo sitio), pero se desaconseja utilizar este sistema, ya que, si mueve el sitio a otro dominio, se rompern todos los vnculos de las rutas absolutas locales. El uso de rutas relativas para vnculos locales tambin ofrece una mayor flexibilidad si necesita mover archivos dentro del sitio. Nota: Al insertar imgenes (no vnculos), 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). Adobe Dreamweaver CS3 . by: magh 120 Rutas relativas al documento Las rutas relativas al documento suelen ser las ms adecuadas para vnculos locales en la mayora de los sitios Web. Resultan particularmente tiles cuando el documento actual y el documento con el que se establece el vnculo se encuentran en la misma carpeta y es probable que vayan a permanecer juntos. Tambin puede utilizar una ruta relativa al documento para establecer un vnculo con un documento de otra carpeta, pero especificando la ruta a travs de la jerarqua 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 vnculo desde contents.html hasta hours.html (ambos situados en la misma carpeta), utilice la ruta relativa hours.html. Para establecer un vnculo con tips.html (en la subcarpeta resources), utilice la ruta relativa resources/tips.html. Con cada barra diagonal (/), bajar un nivel en la jerarqua de carpetas. Para establecer un vnculo 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 jerarqua de carpetas. Para establecer un vnculo 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 vnculos relativos al documento o un archivo individual que es el destino de un archivo relativo al documento, no necesitar actualizar esos vnculos. (Si mueve o cambia el nombre de los archivos utilizando el panel Archivos, Dreamweaver actualizar automticamente todos los vnculos relevantes.)
Vinculacin de archivos y documentos Antes de crear un vnculo, deber saber cmo funcionan las rutas absolutas, las relativas al documento y las relativas a la raz del sitio. Puede crear varios tipos de vnculos en un documento: Un vnculo con otro documento o archivo, como un archivo grfico, de pelcula, PDF o de sonido. Un vnculo de anclaje con nombre, que salta a un emplazamiento especfico dentro de un documento. Adobe Dreamweaver CS3 . by: magh 121 Un vnculo de correo electrnico, que crea un mensaje de correo electrnico en blanco con la direccin del destinatario ya rellenada. Vnculos nulos y de script, que permiten adjuntar comportamientos a un objeto o crear un vnculo que ejecuta cdigo J avaScript. Puede utilizar el inspector de propiedades y el icono de sealizacin de archivos para crear vnculos desde una imagen, un objeto o texto hasta otro documento o archivo. Dreamweaver crea los vnculos con otras pginas del sitio empleando rutas relativas a documentos. Tambin puede indicar a Dreamweaver que cree vnculos nuevos utilizando rutas relativas a la raz del sitio.
Establecimiento de vnculos con documentos mediante el inspector de propiedades Puede utilizar el icono de carpeta o el cuadro Vnculo del inspector de propiedades para crear vnculos desde una imagen, un objeto o texto hasta otro documento o archivo. 1 Seleccione texto o una imagen en la vista Diseo 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 Vnculo 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 dilogo Seleccionar archivo HTML para indicar si la ruta es relativa al documento o a la raz del sitio y, a continuacin, haga clic en Seleccionar. El tipo de ruta que seleccione slo afectar al vnculo actual. (Puede cambiar la configuracin predeterminada del cuadro Relativa a para el sitio.) Escriba la ruta y el nombre de archivo del documento en el cuadro Vnculo.
Para establecer un vnculo con un documento del sitio, introduzca una ruta relativa al documento o relativa a la raz del sitio. Para establecer un vnculo con un documento externo al sitio, introduzca una ruta absoluta que incluya el protocolo (por ejemplo, http://). Puede utilizar este mtodo para introducir un vnculo para un archivo que an no se ha creado. Adobe Dreamweaver CS3 . by: magh 122 3 En el men emergente Dest., seleccione una ubicacin 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 vnculo. Si el marco que contiene el vnculo 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 vnculo. 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 vnculos de la pgina al mismo destino, puede especificar este destino una vez seleccionando Insertar > HTML > Etiquetas Head > Base y seleccionando la informacin de destino.
Adicin de un vnculo mediante el comando Hipervnculo El comando Hipervnculo permite crear un vnculo de texto hasta una imagen, un objeto u otro documento o archivo. 1 Site el punto de insercin en el documento donde desea que aparezca el vnculo. 2 Siga uno de estos procedimientos para mostrar el cuadro de dilogo Insertar hipervnculo: Seleccione Insertar >Hipervnculo. En la categora Comn de la barra Insertar, haga clic en el botn Hipervnculo 3 Introduzca el texto del vnculo y, tras el vnculo, el nombre del archivo de destino del vnculo (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 pgina vinculada se abrir en una ventana nueva con el nombre que haya especificado. Tambin 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 vnculo. Si el marco que contiene el vnculo 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 vnculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. Adobe Dreamweaver CS3 . 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 nmero para el orden de fichas. 6 En el cuadro Ttulo, escriba un ttulo de pgina para el vnculo. 7 En el cuadro Clave de acceso, introduzca un equivalente de teclado (una letra) para seleccionar el vnculo en el navegador. 8 Por ltimo haga clic en Aceptar.
Establecimiento de vnculos con una parte especfica de un documento Puede utilizar el inspector de propiedades para establecer un vnculo con una determinada seccin 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 especfico o en la parte superior del documento. Despus podr crear vnculos con esos anclajes con nombre que llevarn rpidamente al visitante a la posicin especificada. Para crear un vnculo con un anclaje con nombre, siga este procedimiento de dos pasos. En primer lugar, cree un anclaje con nombre. A continuacin, cree un vnculo con dicho anclaje. Nota: No puede colocar un anclaje con nombre en un elemento con posicin absoluta. Creacin de un anclaje con nombre 1 En la vista Diseo 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 categora Comn de la barra Insertar, haga clic en el botn 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 insercin. Nota: Si no aparece el marcador del anclaje Ver > Ayudas visuales > Elementos invisibles.
Establecimiento de un vnculo con un ancl aje con nombre 1 En la vista Diseo de la ventana de documento, seleccione texto o una imagen para crear un vnculo a partir de ellos. 2 En el cuadro Vnculo del inspector de propiedades, introduzca un signo de nmero (#) y el nombre del anclaje. Por ejemplo, para establecer un vnculo con un anclaje denominado top en el archivo actual, escriba #top. Para establecer un vnculo con un anclaje denominado "superior" en un archivo distinto de la misma carpeta, escriba nombrearchi vo.html#superior Nota: Los nombres de anclaje distinguen entre maysculas y minsculas. Adobe Dreamweaver CS3 . by: magh 124 Establecimiento de un vnculo con un anclaje con nombre mediante el mtodo de sealizacin 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 Diseo de la ventana de documento, seleccione texto o una imagen para crear un vnculo 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 sealizacin de archivos (icono de mira telescpica) situado a la derecha del cuadro de texto Vnculo del inspector de propiedades y arrstrelo hasta el anclaje con el que desea establecer el vnculo: un anclaje en el mismo documento o un anclaje en otro documento abierto. En la ventana de documento, presione la tecla Mays mientras arrastra el texto o la imagen seleccionada hasta el anclaje con el que desea establecer el vnculo: un anclaje en el mismo documento o un anclaje en otro documento abierto.
Creacin de un vnculo de correo electrnico Cuando el usuario hace clic en un vnculo de correo electrnico 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 electrnico, el cuadro Para se actualiza automticamente con la direccin especificada en el vnculo del mensaje de correo electrnico.
Insertar vnculo de correo electrnico 1 En la vista Diseo de la ventana de documento, coloque el punto de insercin donde desea que aparezca el vnculo de correo electrnico o seleccione el texto o la imagen que desea que aparezca como vnculo de correo electrnico. 2 Siga uno de estos procedimientos para insertar el vnculo: Seleccione Insertar >Vnculo de correo electrnico. En la categora Comn de la barra Insertar, haga clic en el botn Vnculo de correo electrnico. 3 En el cuadro Texto, escriba o edite el texto del correo electrnico. 4 En el cuadro Correo electrnico, escriba la direccin de correo electrnico y haga clic en Aceptar.
Adobe Dreamweaver CS3 . by: magh 125 Creacin de un vnculo de correo electrnico mediante el inspector de propiedades 1 Seleccione texto o una imagen en la vista Diseo de la ventana de documento. 2 En el cuadro Vnculo del inspector de propiedades, escriba mailto: seguido de una direccin de correo electrnico. No escriba ESPACIOS entre los dos puntos y la direccin de correo electrnico.
I II II I. .2 24 4 O Ob bt t e en nc ci i n n d de e v vi i s st t a a p pr re ev vi i a a d de e p p g gi i n na as s La vista Diseo de le da una idea de cul ser el aspecto de la pgina en laWeb, pero no muestra las pginas exactamente como lo hacen los navegadores. La funcin Vista previa en el navegador le permite ver el aspecto de las pginas en navegadores concretos conforme vaya creando el diseo. Vista previa en un navegador Siempre que lo desee, puede obtener la vista previa de una pgina en un navegador; no es necesario cargarla primero en un servidor Web. Al obtener una vista previa de una pgina, debern funcionar todas las funciones relacionadas con el navegador, como los comportamientos J avaScript, los vnculos absolutos y relativos al documento, los controles ActiveXy 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, gurdelo; si no lo hace, el navegador no mostrar los cambios ms recientes. 1 Siga uno de estos procedimientos para obtener una vista previa de la pgina: Seleccione Archivo >Vista previa en el navegador y elija uno de los navegadores que aparecen en la lista o haga clic en el botn Vista previa de la barra de Herramientas y de la lista desplegable elija el Navegador que prefiera. Nota: Si no aparece ningn navegador en la lista, seleccione Edicin > Preferencias, y, a continuacin, seleccione la categora 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 vnculos y el contenido de prueba de la pgina. 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 restriccin de visualizacin del contenido activo. Para solucionar este problema puede incluir cdigo Mark of the Web en el archivo. 3 Cierre la pgina del navegador al finalizar la prueba.
Administracin y hospedaje del sitio web . by: magh 126 I IV V. . A Ad dm mi i n ni i s st t r ra ac ci i n n y y h ho os sp pe ed da aj j e e d de el l s si i t t i i o o w we eb b
I IV V. .1 1 C C m mo o e el l e eg gi i r r u un n a al l o oj j a am mi i e en nt t o o Para publicar una pgina en Internet debemos colocarla en un servidor. Los servidores son ordenadores conectados permanentemente a la Red que envan las pginas 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, ms indicado para negocios y pginas que pretendamos que sean populares.
Definir los recursos Para encontrar un alojamiento para nuestra pgina primero nos tenemos que plantear los objetivos que queremos cumplir y los recursos que necesitaremos. Segn sea el proyecto que vamos a publicar necesitaremos ms o menos personalidad propia o determinados recursos como acceso a bases de datos, estadsticas, etc. El primer paso podra ser decidir si vamos a necesitar un dominio propio para nuestro proyecto. Un dominio propio le dar ms personalidad al sitio, se asociar mejor con el nombre de la empresa, a la vez que se hace ms accesible la pgina. Con el reducido precio que tienen actualmente los dominios sera muy indicado adquirir uno para nuestra pgina. 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 ms habitual es que en el proveedor donde alojemos la pgina se encargue tambin del registro del dominio, sin prcticamente otro coste adicional que las tasas del NIC, 30$ aproximadamente. Aparte del dominio existen otros recursos podemos necesitar, como: Programacin en lenguajes especficos, acceso a bases de datos, administracin de las DNS Deberemos definir los recursos a utilizar y buscar un proveedor que los acepte todos. Si ests proyectando una pgina sencilla, probablemente no te preocupar el nmero de recursos avanzados que posea tu servidor, pero siempre ser interesante evaluar otros recursos ms bsicos como: El nmero de direcciones de correo que te van a proporcionar, estadsticas, los CGIs que tenga instalados, como contadores, envo de formularios por correo electrnico, etc.
Velocidad Es una pena que no exista un mtodo realmente fiable para controlar uno de los aspectos que ms preocupa a todos los que buscamos un alojamiento. Para conocer la calidad el servicio que nos va a ofrecer el proveedor deberamos preguntarles a ellos sobre sus lneas y la capacidad que tienen de transferencia con Internet. Pero no solo eso sino tambin preguntarles por la saturacin que tienen sus lneas. Pueden ser muy potentes pero estar super-utilizadas. Como los proveedores no van a revelar estos detalles tal como a nosotros Administracin y hospedaje del sitio web . by: magh 127 nos gustara, lo ms probable es que solo nos quede la posibilidad de probar la velocidad por la prctica. Si navegamos por el sitio de la empresa que estamos evaluando y comprobamos la cantidad de informacin (Kb) que recibimos por segundo podremos saber cmo va de rpido la pgina. Otro factor que tambin condiciona la velocidad es la cercana del servidor. Ten en cuenta que si ests en Mxico, un servidor situado en tu pas ser ms rpido para ti, en la misma condicin de lneas, que uno que est en Espaa o Argentina. Cuanto ms lejos tenga que viajar la informacin, tarda ms. Pero un detalle, si un usuario de Colombia visita una pgina que est en un servidor espaol, para l tu servidor ser ms lento que uno de su pas.
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 pginas web que manda el servidor tienen un peso en Kbytes y el proveedor los va contando, cuando pasamos el lmite que le han asignando al dominio nos cobran el exceso segn un precio. As pues, a la hora de contratar un dominio merece la pena enterarse sobre este aspecto y evaluar tambin 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. Adems, en la mayora 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 pgina muy visitada.
Precio El ltimo factor a considerar, y el ms fcil de comparar, es el precio. Lo importante es comparar la calidad del servicio y el precio del mismo. Seguro que podrs realizar esta comparacin sabiendo los datos que has de evaluar.
I IV V. .2 2 E El l e eg gi i r r a al l o oj j a am mi i e en nt t o o g gr ra at t u ui i t t o o Publicar una pgina web es el objetivo de la mayora de las personas que visitan desarrolloweb.com. Para conseguirlo lo ms imprescindible es tener un servidor donde colocarlas, accesible desde Internet, aparte de construir las propias pginas. Dependiendo de cul sean nuestras intenciones y deseos para el futuro de nuestra pgina 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 ms 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 pginas personales o de empresa de manera gratuita y muchas de estas opciones tienen muy buena calidad. Administracin y hospedaje del sitio web . 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 conexin a Internet, tambin ofrece un espacio para publicar, por el mismo precio que el acceso. Esta opcin 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 algn da el proveedor y nos retiren las pginas publicadas, pero esto se puede evitar teniendo un servicio de redireccin que nos d una URL (direccin de web) para toda la vida, que redireccione a la pgina que est activa en ese momento. En el caso de que nuestro proveedor no ofrezca servicio de publicacin de webs o no nos guste el servicio que ofrece, tenemos la opcin de publicar las pginas 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 pgina, se diferencian fcilmente por los recursos que ponen a nuestra disposicin 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: estadsticas, contadores, direcciones web cortas, mail gratuito, CGI, bases de datos... Los recursos se hacen necesarios cuando construimos una web avanzada, con secciones dinmicas como un buscador, un portal, o en general, una pgina 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 ningn recurso, simplemente podemos publicar la pgina, y en otros sitios ofrecen ms 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 pginas de alguna web que est alojada en ese servidor. Es decir, visitamos una web de Geocities.com y vemos lo rpido 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 cmo funciona y si no nos gusta simplemente nos vamos a otro, es gratis. Un dato a considerar es que, dependiendo de dnde est situado fsicamente el servidor que alojar nuestras pginas, la velocidad ser distinta para nosotros. Es decir, un mexicano ve Administracin y hospedaje del sitio web . by: magh 129 ms rpido un servidor de Mxico, pero un europeo navegar con ms velocidad si el servidor est en Europa. Esto, se lleva al lmite cuando es nuestro proveedor de acceso el que nos ofrece el espacio, en este caso, seremos los que naveguen ms rpido por esa web, por estar tan prximos los dos sitios, tu acceso a Internet y el servidor de tu pgina.
C. Publicidad insertada en las pginas Tambin se pueden clasificar los sitios para publicar en Internet por la publicidad que insertan. Los sitios de espacio gratuito suelen subvencionarse mediante la insercin de anuncios en las pginas de los usuarios del servicio. Los tipos de publicidad que podemos encontrar son los siguientes: Publicidad en un frame inferior. Es tal vez la ms agresiva de las publicidades que pueden hacer, pues el banner permanece siempre visible en la pgina y es un poco feo para las pginas. Publicidad dentro de la pgina, utilizando el banner superior. Es el mtodo de insercin de banners ms habitual. Como desventaja tiene que el banner se exhibe en la propia pgina, 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 pgina. Como desventaja contamos que estas ventanas son muy molestas para muchos usuarios. Publicidad en la propia pgina, en un grafiquito flotando en la propia pgina. 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 algn da y deje de ser tan interesante. Actualmente, muy pocos sitios ofrecen espacio gratuito sin colocar algn 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 pginas de los usuarios: Galeon: En el momento de escribir este reportaje no colocaban banners en las pginas alojadas en su servidor. Sin embargo, actualmente si colocan publicidad en una capa que acompaa tu navegacin y permanece siempre visible. Metropoli 2000: Colocan un banner en la parte de arriba de la pgina. Es una opcin interesante, porque reparten los ingresos por publicidad con el dueo de la pgina. Iespana: Los banners de este sitio se colocan en un frame en la parte inferior de la pgina. 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 pgina, con enlaces a otras partes de Freeservers. Adems, tambin colocan publicidad en ventanas aparte. Todos estos males se pueden eliminar si el usuario paga una cuota mensual. Segn nos ha informado, tambin se puede configurar para que aparezcan flotando arriba, en la izquierda, derecha, abajo, etc. Administracin y hospedaje del sitio web . 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 pgina donde existe un formulario y donde podemos seleccionar los archivos que deseamos subir. En la descripcin de caractersticas del alojamiento suelen indicar acceso por FTP cuando esta permitido realizar este tipo de actualizaciones. Para los principiantes ser ms cmodo subir las pginas por medio de un formulario de una web, pero para las personas experimentadas, a la larga, les ser ms sencillo y tendr menos trabajo el realizar las actualizaciones del sitio va 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 pgina web para que tengamos acceso al formulario, subir un directorio en una sola accin y otra mejora importante, que consiste en que podremos utilizar el programa con el que diseamos las pginas web (tipo Dreamweaver o Homesite) para acceder al servidor y actualizar los contenidos automticamente. Nuestro consejo es aprender a utilizar FTP, si es que deseamos trabajar de manera ms profesional y ahorrar tiempo a la larga. Comparativa y conclusin.
Administracin y hospedaje del sitio web . by: magh 131 *Transferencia: Es la cantidad de informacin que recibes y mandas cada mes el servidor cuando le piden tu pgina. 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 intil debido a que tenga mucho xito tu web y tenga limitado el trfico.
Los Sitios que ofrecen mayores recursos para hacer una pgina web son Iespana.es y Metropoli2000.net, con la principal diferencia de que En Metropoli2000 slo aceptan webs con contenidos de calidad, sin despreciar al diseo. 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 ms abusiva y puede llegar a ser bastante tedioso el visitar una pgina en este servidor. Iespana es bastante verstil, por permitir todo tipo de contenidos, incluso comerciales o de adultos. Adems 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 conexin a Internet, no es del todo agradable. Galen, su publicidad, aunque cada vez es ms abusiva. Actualmente saltan ventanas secundarias por todas partes y encima los cuadros flotantes son cada vez ms grandes. Freeservers no nos funcion del todo bien, sobretodo en el registro, que tuvimos que intentarlo durante un par de das en un total de 5 ocasiones antes de conseguir ver la hoja final de registro. De todos modos, hemos recibido buenas crticas de este servidor.
I IV V. .3 3 D Do om mi i n ni i o os s Un dominio es una forma sencilla de identificar un ordenador en Internet de manera nica, a partir del cual se encontrarn las pginas pertenecientes a la institucin que lo posee. Los dominios tienen un nombre y una terminacin que indica su actividad o procedencia territorial. Por ejemplo, yahoo.com: yahoo es el nombre y .com expresa el mbito de esa pgina, comercial en este caso. Administracin y hospedaje del sitio web . by: magh 132 Escoger bien el nombre del dominio es fundamental, si este tiene gancho podremos ser fcilmente recordados e identificados en Internet. A veces no es tan sencillo realizar una buena eleccin 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 autntico 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 informacin en sus pginas web. Los nombres de las empresas importantes son los que ms han sufrido este pillaje, que ha obligado a las empresas a comprar los dominios "raptados" por un precio astronmico a sus dueos.
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 decamos, los dominios de primer nivel indican el mbito al que pertenecen, hay principalmente dos grupos, genricos 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 institucin al que van dirigidos. .com Para empresas o en general para cualquier web que tenga carcter comercial. En un principio, quera decir que ese dominio que se trataba de una compaa estadounidense, pero en la prctica 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 opcin que a la larga tambin se ha convertido en vlida para cualquier tipo de propsito. .org Destinado para organizaciones, asociaciones, fundaciones y dems entidades muchas veces con fines benficos o si nimo de lucro. .gov Es para las pginas del gobierno de los Estados Unidos. .edu Reservado para las instituciones relativas a la educacin. .mil Se utiliza para instituciones militares de los estados unidos. .int Que pertenece a la Unin 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 especficos previos para el registro, del tipo .com, .net y .org) y el de significado ms genrico, por lo que es el que recibir, probablemente, un volumen de registros mayor. Es la abreviacin anglosajona, en pronunciacin figurada de business. .info Este dominio es tambin abierto (sin requisitos especficos para registrar) pero el significado parece, a priori, un poco menos genrico que .biz o .com. De todas formas, ser tambin un dominio de gran volumen de registros, seguramente por encima del milln de nombres ya en el primer ao. .name Este dominio es (bastante) abierto, pero para un uso especfico, de carcter personal. Est reservado a los individuos, que podrn reservar su nombre con la estructura Administracin y hospedaje del sitio web . 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 podra impedir el registro de miguel.garcia.name, por ejemplo. Son 14 millones de nombres en 5 aos los previstos por Global Name Registry. .pro Este dominio es para un uso especfico reservado a profesionales de determinadas categoras, agrupados en subdominios: inicialmente sern .med.pro (mdicos), .law.pro (abogados) y .cpa.pro (auditores; cpa significa chartered public accountant). En el tercer nivel estar el nombre del profesional en cuestin que deber acreditar su pertenencia al colegio u organizacin profesional correspondiente. .coop Este dominio est reservado a las cooperativas. Un dominio claramente restringido en sus polticas de registro (hace falta demostrar la cualidad de cooperativa a travs 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 an ms restringidos, por lo que no va a tener un gran volumen de entradas en el primer momento. .aero Este dominio, tambin de uso restringido, es para la industria de los servicios areos: compaas areas; compaas aeronuticas; aeropuertos y servicios areos. El volumen esperado por el registro es de entre 100.000 y 300.000 nombres en cuatro aos. .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) segn clasificaciones geogrficas todava est por definir definitivamente. Los promotores esperan unos 50.000 nombres en este dominio.
Dominios territoriales Tambin existen dominios de primer nivel que indican el territorio de origen de la pgina. Estos dominios solo se le otorgan a empresas o personas de los pases relacionados con el dominio. Como ejemplos de dominios territoriales podemos sealar .es para Espaa, .fr para Francia, .mx para Mxico. El registro de los dominios territoriales es regulado en base a unas normas especficas para cada pas. Los encargados de crear estas normas para el registro son los distintos delegados del NIC de cada pas. De este modo, el ES-NIC (www.nic.es) es el encargado en Espaa, mientras que MX-NIC (www.nic.mk) es el de Mxico, o AR-NIC (www.nic.ar) el de Argentina. Espaa, 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. Tambin es posible el registro si se posee una marca registrada en Espaa con ese nombre, siempre llevado a cabo por una empresa y no por una persona fsica. Para consultar los requisitos para el registro de dominios en otros pases podemos visitar las pginas de sus NIC correspondientes, donde siempre estar todo bien explicado y con la informacin ms actualizada. Administracin y hospedaje del sitio web . 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 desempear todo el trabajo de organizacin que conlleva la administracin de los dominios, sobretodo en los distintos pases, como ms adelante se ver.
Para registrar un dominio Anteriormente, el registro de dominios slo lo poda realizar una empresa llamada Network Solutions, que mantuvo el monopolio hasta el verano de 1999. Actualmente se encuentra liberalizado este mercado y existen muchas ms empresas registradoras de dominios. De todos modos, a travs de estas empresas operan muchos ms intermediarios y encontrar un registrador cercano a nosotros puede ser muy sencillo. Slo los dominios del tipo .com .net y .org (y ahora tambin los .info .biz y .edu) se encuentran al alcance de cualquier persona. Para registrarlos podemos acceder a las pginas de las empresas que estn capacitadas para ello. En DesarrolloWeb.com podemos ayudaros tambin en esta tarea. En nuestro servicio de alojamiento puedes solicitar un dominio y registrarlo para cuanto tiempo desees. Adems, 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, podrs registrarlo a travs de nuestras pginas. En estas pginas debemos realizar una bsqueda 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 travs de unos formularios online en esas mismas pginas. Si vamos a colocar unas pginas web en el dominio y vamos a contratar los servicios de hosting en algn proveedor, puede ser aconsejable que este sea el encargado de la labor de registro. Lo har a travs de una de esas empresas capacitadas para ello (sealadas 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 dlares. Esta tasa permite mantener el dominio durante 1 ao. Posteriormente hay que pagar 35 dlares por ao para seguir manteniendo el nombre.
I IV V. .4 4 R Re eg gi i s st t r ro o e en n b bu us sc ca ad do or re es s Una vez tienes realizada tu web el objetivo es que sea visitada. Existen muchas maneras de conseguir esto, una de las ms fciles 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 especfico y a menudo el proceso de registro es diferente. Para encontrar el formulario lo ms fcil es que entres en la pgina principal del buscador y busques un enlace que ponga Aadir pgina, Add URL, nueva direccin, o algo parecido. Administracin y hospedaje del sitio web . by: magh 135 Ese enlace te llevara al formulario de registro o, en su defecto, a la pgina donde explica cmo has de registrarte en ese buscador en concreto. Aun as, existen unos procedimientos bsicos de registro que suelen ser repetirse en los buscadores: Para los ndices, los buscadores que tienen categoras y podemos encontrar pginas clasificadas dependiendo de su temtica. Se suele navegar a la categora en la que se desea incluir el web. All se busca el botn "aadir pgina"(o algo parecido) y se encuentra el formulario para el registro. ndices son Yahoo! o Terra Para los motores de bsqueda, que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas pginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la pgina inicial, con el enlace correspondiente. No hay que navegar las categoras para acceder al formulario. Motores de bsqueda tpicos 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 pgina en distintos buscadores introduciendo una sola vez los datos de la pgina web. Existen tambin 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 ms tiles y accesibles por ser gratuitas. En el buscador de desarrolloweb.com, en la seccin de promocin puedes encontrar alguna de estas herramientas. Nosotros estamos preparando una herramienta multiregistro online, que ya se encuentra operativa y creciendo en el nmero de buscadores contemplados. En desarrolloweb.com disponemos de una seccin dedicada a la promocin de pginas web. Amplia en muchsimo la informacin recogida en este informe y recoge unas herramientas para facilitarte la labor de que tu web sea ms visitada.
I IV V. .5 5 C Co on nt t a ac ct t o o c co on n e el l n na av ve eg ga an nt t e e Bien sabido es que una de las tareas ms importantes y laboriosas del ciclo de vida de una pgina web es su mantenimiento, para conservar la web, su trfico y su importancia con el tiempo. Pero mantener una web no es slo 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. Administracin y hospedaje del sitio web . by: magh 136 Existen muchas formas de comunicarnos con el navegante, vamos a ver los mecanismos que estn ms 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 ms asequibles y los siguientes ms difciles de conseguir, aunque a menudo mejores.
Correo electrnico Lo que nunca debe faltar en una pgina, por su sencillez y utilidad, porque es la forma ms adecuada en muchos casos... Siempre tenemos que incluir una direccin de correo, fcilmente localizable, para que los visitantes puedan comunicarse. Es facilsimo hacer un enlace con una direccin de correo: Se ha de poner un enlace convencional, pero su atributo HREF va direccionado a una direccin de correo con la palabra mailto:. <A HREF="mailto:eugim@desarrolloweb.com">Escrbeme</A>Quedara as: I IV V. .6 6 P Po os si i c ci i o on na am mi i e en nt t o o e en n l l o os s b bu us sc ca ad do or re es s d de e i i n nt te er rn ne et t Escrbeme Poner un enlace a una direccin de correo en un editor de HTML, para los que trabajis con herramientas de edicin, tambin es parecido a como lo hacis para los enlaces normales, pero con esas diferencias.
Libro de visitas Ahora veremos algn mecanismo adicional para comunicarse con el cliente, pero en estos casos no se trata tanto de una comunicacin entre ellos y tu, sino ms es una forma de comunicacin 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 slo los leas tu, sino que tambin los pueden leer todos los demsa usuarios de tus pginas. Esto le da agilidad a la pgina, 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 mayora de los casos no dispondremos de la tecnologa ni conocimientos para implementar esta tecnologa, 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 da disponen de un sitio web, pero muchas de ellas se plantean si esta presencia en la Red ha sido una inversin o un mero gasto de representacin. Para que nuestra presencia en Internet sea rentable es necesaria la promocin de nuestro sitio, y una de las herramientas ms rentables para dar a conocer nuestro site y generar visitas son los buscadores. Administracin y hospedaje del sitio web . by: magh 137 Aparecer en los principales buscadores internacionales, nacionales y en los especficos de nuestro sector es principal, pero no lo es menos aparecer en un lugar destacado segn ciertas palabras clave que definan nuestro negocio en la mente de nuestras audiencias. Puesto la mayora 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 bsqueda debemos conocer su funcionamiento interno. Los buscadores se dividen en dos grandes grupos: los ndices y los motores de bsqueda. Los ndices dividen la informacin en un rbol temtico de categoras y subcategoras. Aqu el ejemplo paradigmtico sera Yahoo!, que nos presenta una serie de grandes categoras temticas entre las que encontramos la subcategora "Economa 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 categora de sitios web, ya que no se nos permitir proponer la inclusin de nuestro sitio web en una categora demasiado amplia. En los ndices lo esencial es encontrar la rama ideal de este rbol temtico en la cual ubicar nuestro sitio web, y digo nuestro sitio, puesto que en los ndices slo es posible incluir una pgina (normalmente la principal) a su directorio, aunque a menudo es posible incluirlo en dos o tres categoras. Para encontrar esta categora ideal en la cual debera estar nuestro web, la estrategia a seguir es puramente marketing; ponerse en la piel de nuestro pblico y pensar en qu categora nos buscar. Para ello, podemos ayudarnos de un estudio de mercado, y como no, del sentido comn y de la observacin de en qu categora se encuentran ubicados nuestros principales competidores. Pero cuidado, quiz ellos no lo hayan echo tan bien y no se encuentren en la categora ideal. Lgicamente dependiendo de la amplitud de nuestros productos o servicios, ser ms obvio o ms difcil hallar esta categora ideal. No obstante tras nuestra peticin de alta existe un proceso de revisin humano e incluso podemos proponer una nueva categora si no nos encontramos debidamente definidos por ninguna de las existentes. Y sobre este proceso de revisin humana es sobre el que quiero hablar a continuacin, puesto que es este el segundo factor que ms diferencia a los ndices de Internet de los motores de bsqueda. Cuando proponemos el alta de nuestro sitio en el ndice de turno, se nos pide toda una serie de datos, como: Ttulo de la pgina, URL, Definicin, Ubicacin geogrfica, persona de contacto y correo electrnico... Y finalmente nuestro site es revisado por un surfer (un especialista en catalogar recursos) del ndice que considera si nuestro site cumple con los estndares de calidad requeridos y si est bien clasificado en la categora elegida por nosotros. Vemos que esto es lo nico que conoce el ndice de nuestro sitio web; los datos suministrados en el formulario de peticin de alta en el buscador. Por lo que debemos ser extremadamente cuidadosos en la definicin que enviamos de nuestro site. El caso de los motores de bsqueda es bien distinto. Podemos tomar como ejemplo a Google, y veremos que la nica informacin que proporcionamos a un motor es la direccin URL (por ejemplo: www.miempresa.com) y quiz una direccin de correo electrnico. El resto del proceso se realiza de forma automtica, ya que nuestra peticin de alta en el buscador entrar en la cola de trabajo de un programa de software llamado spider (araa) que visitar la pgina que hemos dado de alta y a partir de ella todas las que se encuentren enlazadas y as sucesivamente. Simultneamente nuestras pginas sern indexadas utilizando complejos algoritmos, para ser devueltas como resultado cuando un internauta utilizando el buscador, Administracin y hospedaje del sitio web . by: magh 138 introduzca un trmino que se encuentre en alguna de ellas y haga una peticin de extraccin de informacin de su ingente base de datos. Vemos de esta forma que nuestro web puede aparecer en algn motor de bsqueda por la simple razn de que otra pgina de un tercero que est incluida en el buscador enlaza a ella en Internet. As, en los motores de bsqueda, para obtener una notable posicin, lo esencial es el cdigo de nuestras pginas, algo que era verdaderamente indiferente en el caso de los ndices. Tericamente con slo dar de alta nuestra pgina principal el buscador indexar todas las pginas 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 bsqueda, que puede variar entre varias semanas a varios meses segn el motor en cuestin. E incluso a menudo, tras este dilatado periodo de tiempo, no seremos indexados en sus bases de datos. Y esto, en los motores que an admiten el alta gratuita. Como recomendacin, si nuestro tiempo y energas 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 inclusin en alguno de ellos puede suponer la sucesiva inclusin en otros que a menudo son ms "duros" con las admisiones. Una vez que conseguimos que nuestro web aparezca en los buscadores, nuestro trabajo no habr hecho ms que empezar, ya que lo realmente valioso es aparecer en los primeros lugares por aquellas palabras clave que nuestros pblicos utilizan para buscar nuestra categora de productos, y esta s que es una verdadera guerra, puesto que en esa lucha estamos frente a nuestros principales competidores, que tambin batallarn por mejorar la posicin de sus pginas 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 cdigo de nuestras pginas para ubicarla en una u otra posicin de su ranking, as por ejemplo Google valora especialmente cuantas y que tipo de pginas apuntan hacia las nuestras, aplicando una lgica bastante humana, segn la cual si muchos y especialmente importantes hablan de uno, es que uno es importante. Otros motores como AltaVista valoran los Meta Tags (unas lneas de cdigo que informan al motor acerca del contenido de nuestras pginas), etc. En general, los buscadores se fijan en la frecuencia o densidad y ubicacin con la que aparecen ciertos trminos en nuestras pginas, para ubicarlas en un lugar superior de sus resultados frente a otras pginas, en las cuales la frecuencia y ubicacin de este trmino que el navegante ha introducido en la caja de bsqueda del motor aparece. As, una palabra que est presente en nuestra misma direccin de Internet (www.palabra.com) indica un elevado nivel de coincidencia si es el trmino buscado por el internauta. Despus es especialmente valorada esta palabra, en el ttulo del documento, en el primer prrafo ms que en el segundo... Si est en mayscula es ms valorado, al igual que si est en negrita... Si aparece dos veces en una frase ms que si aparece una, etc. A estas alturas, seguro que a ms de un lector se le ha pasado por la cabeza, la idea de llenar de trminos clave la pgina 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 tamao muy pequeo o con el Administracin y hospedaje del sitio web . by: magh 139 mismo color que el fondo, etc, penalizarn nuestras pginas o incluso las eliminarn de la base de datos por tratarse de tcnicas de spam (tcnicas de promocin ilcitas)
I IV V. .7 7 R Re eg gi i s st t r ro o y y h ho os sp pe ed da aj j e e e en n t t r ri i p po od d Uno de los hosting gratuitos ms sencillos de registrarse y administrar el sitio web se encuentra tripod, su direccin es: http://www.multimania.es/, al ingresar a esta pgina aparece la ventana:
Navegue por la pgina 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 contrasea para administrar los archivos de su sitio web. Administracin y hospedaje del sitio web . 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 botn Continuar.
Nota: Cuando sucede algn error, se marcara en rosa. En este caso fue la contrasea. Complete la informacin: fecha de nacimiento, sexo.
No olvide hacer clic en la casilla Acepto los trminos.
En el cuadro Type the two words, escriba las palabras que aparecen.
Por ltimo haga clic en el botn Registrar.
Administracin y hospedaje del sitio web . by: magh 141
Aparece la ventana de confirmacin, en donde se enviar a su correo ciertas indicaciones para concluir el registro de su hosting.
El aviso de confirmacin puede tardar unos minutos incluso algunas horas.
Al recibir el correo de activacin de su cuenta de Multimania, abra el mensaje y despus haga clic en link que se le enva. Administracin y hospedaje del sitio web . by: magh 142
En link que recibi en su correo, aparece la ventana de confirmacin, en donde le pide que introduzca el nombre de su sitio e introduzca la contrasea del FTP.
Teclee el nmero que aparece en el cuadro, por ultimo haga clic en el botn Siguiente. Para iniciar a subir sus archivos al sitio creado, introduzca el nombre del sitio y despus la contrasea, por ltimo haga clic en el botn Iniciar sesin.
Nota: Despus de completar los datos de registro, le dan la bienvenida su registro se realizado satisfactoriamente. Administracin y hospedaje del sitio web . by: magh 143
Despus de introducir el nombre del sitio y su contrasea. Aparece la ventana de bienvenida, observe que aparece el nombre de su sitio.
Adems del nombre del usuario. Para iniciar a subir sus archivos, haga clic en el botn Crear tu web. Administracin y hospedaje del sitio 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 mximo de 8 archivos a la vez.
Tenga en cuenta que todos los archivos que subir en este momento, es dentro del directorio raz de su sitio web. Administracin y hospedaje del sitio web . by: magh 145
En cada recuadro puede agregar un archivo, para ello haga clic en el botn Examinar.
Del cuadro de dialogo Carga de archivos, seleccione el archivo que desea subir. Repita esta operacin 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 botn Subir, esta proceso puede tardar unos minutos, por que se transfieren los archivos de su computadora al servidor en donde se encuentra su hosting.
Administracin y hospedaje del sitio web . by: magh 146
Despus 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 botn de Nuevo, aparece el cuadro de dialogo que le pide teclear el nombre del directorio, escrbalo y haga clic en el botn Aceptar. Administracin y hospedaje del sitio web . 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 botn 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. Administracin y hospedaje del sitio web . by: magh 148
Seleccione el resto de los archivos que desea subir.
Cuando termine de seleccionar sus archivos, haga clic en el botn Subir. Observe que los archivos se enviaron de forma correcta. Una vez que ha terminado de subir la totalidad de los archivos de su pgina web.
Es momento de probar, si ha subido de forma adecuada sus archivos.
Regrese al directorio raz y haga clic en el icono de Visualizar
Administracin y hospedaje del sitio web . by: magh 149
Se abre la ventana mostrando el contenido de su pgina web.
Navegue por ella y vea si el contenido corresponde o no.
Felicidades!, Ha desarrollado la habilidad y los conocimientos necesarios para elaborar pginas web, adems de la administracin del sitio.
Enhorabuena Fuentes de consulta . by: magh 150 V V. . F Fu ue en nt t e es s d de e c co on ns su ul l t t a a