D e s a rrollo de P a gin a s Web: K o m p o Z er

ndice de contenido
INTRODUCCIN:......................................................................................................5
Qu es KompoZer?....................................................................................................................5 Entorno de trabajo.........................................................................................................................7 Barra de titulo: ...........................................................................................................................7 Barra de mens:..........................................................................................................................7 Barra de Redaccin:....................................................................................................................7 Barras de Formato:......................................................................................................................7 Ventana administracin sitios e!: ............................................................................................" Ventana de #rea de edicin: ........................................................................................................" Barra de modo de edicin:..........................................................................................................$ Barra de estado:...........................................................................................................................$ Barras de menus (Amp !ada"......................................................................................................#$ Crea%!&n de un '!t!o (eb............................................................................................................#) Con*!+ura%!&n de a p,+!na.........................................................................................................#%rear una &#'ina (e!...............................................................................................................)* +uardar una &#'ina (e!...........................................................................................................)7 Vista preliminar en el na,e'ador...............................................................................................)7 .rop!edades de .,+!na.................................................................................................................#/

TE0TO................................................................................................................1#
-ntroduccin de te.to................................................................................................................/) 0eleccin de 1e.to....................................................................................................................// 0232%%-45........................................................................................................................// 2l &ortapapeles..........................................................................................................................// 6tras 6peraciones tiles.........................................................................................................../7 B80%9R : R22;&39Z9R.............................................................................................../7 <20=9%2R : R2=9%2R................................................................................................../> %6;&R6B9%-45 6R16+R?F-%9................................................................................./> 2ormato de Te3to.........................................................................................................................12stilo de &#rra@o......................................................................................................................../* Fuente......................................................................................................................................../* 5e'ritaA cursi,a B 0u!raBado..................................................................................................../7 1amaCo....................................................................................................................................../7 9lineacin de &#rra@os............................................................................................................../7 0an'rDa de &#rra@os.................................................................................................................../7 Otros e ementos............................................................................................................................14 3istas........................................................................................................................................./$ 3Dneas........................................................................................................................................7E

EN5ACE'.............................................................................................................66
<irecciones a!solutas B relati,as..............................................................................................77 1ipos de 2nlaces:......................................................................................................................77 Ap !%a%!&n.....................................................................................................................................65 2nlaces -nterno.........................................................................................................................75 2nlaces 2.terno........................................................................................................................75 2nlaces a %orreo 2lectrnico ...................................................................................................................................................75 2nlaces a 9rcFi,os:...................................................................................................................7*

.......................................................................................................................................................67 E3tra: Otras prop!edades de En a%e:........................................................................................6/ Re*eren%!a 7T85........................................................................................................................64 2tiGueta H9I B HJ9I................................................................................................................7$ 9tri!utos de H9I......................................................................................................................7$ 9tri!utos de HB6<:I..............................................................................................................7$

I89:ENE'............................................................................................................)$
Formatos:..................................................................................................................................>E Formato +-F.........................................................................................................................>E Formato K&+.........................................................................................................................>E Formatos &5+......................................................................................................................>) 6!ser,aciones:.....................................................................................................................>) -nsertar ima'en..........................................................................................................................>/ .rop!edades de a Ima+en:..........................................................................................................)6 &estaCa 8!icacin: ...................................................................................................................................................>7 &estaCa <imensiones: ..............................................................................................................>> &estaCa 9pariencia: ..................................................................................................................>> &estaCa 2nlace: ........................................................................................................................>5 6tras opciones:..........................................................................................................................>5 Insertar una !ma+en %omo *ondo................................................................................................)Re*eren%!a 7T85........................................................................................................................)4 2tiGueta H-;+I........................................................................................................................>$ 2tiGueta H;9&I B HJ;9&I.....................................................................................................>$ 9tri!uto !acL'round de B6<:................................................................................................>$ 2tiGueta 6!Mect..........................................................................................................................>$ 2tiGueta <Bnsrc.........................................................................................................................5E

TAB5A'...............................................................................................................5#
-ntroduccin..............................................................................................................................5) <escripcin de las ta!las...........................................................................................................5) %rear 1a!las..............................................................................................................................5) <e@inir la ta!la..........................................................................................................................5/ ;odi@icar ta!las.......................................................................................................................55 &ropiedades de la ta!la..............................................................................................................55 &ropiedades de la celda.............................................................................................................5" Otras 8od!*!%a%!ones...................................................................................................................-# -nsertar elementos.....................................................................................................................*) 2liminando elementos...............................................................................................................*/ %om!inando celdas ..................................................................................................................*7 Cuest!ones de D!se;o...................................................................................................................-5 Resoluciones de pantalla...........................................................................................................*5 E3tra: Re*eren%!a 7T85:..........................................................................................................-7 2tiGueta H19B32I...................................................................................................................*7 9tri!utos de H19B32I.............................................................................................................*7

8ARCO'..............................................................................................................-4
-ntroduccin:.............................................................................................................................*$ Re*eren%!a <tm ............................................................................................................................7$ 2tiGuetas HFR9;2021I B HFR9;2I...................................................................................7E 9tri!utos de HFR9;2021I....................................................................................................7) 9tri!utos de HFR9;2I............................................................................................................7)

2OR8U5ARIO'......................................................................................................71

CA.A'................................................................................................................./#
-ntroduccin..............................................................................................................................") Re*eren%!a 7T85......................................................................................................................../1 2tiGuetas <-V B 0&95.............................................................................................................."/

C''...................................................................................................................../5
=6K90 <2 201-36 ................................................................................................................"5 -ntroduccin ........................................................................................................................."5 RE2ERENCIA 7T85................................................................................................................/-ntroduccin.............................................................................................................................."* 1erminolo'Da empleada en %00................................................................................................"* &ropiedad.................................................................................................................................."* Valor.........................................................................................................................................."* <eclaracin..............................................................................................................................."7 0elector......................................................................................................................................"7 Re'la de estilo..........................................................................................................................."7 =oMa de estilo............................................................................................................................"7 %olocacin de las re'las de estilo............................................................................................."7 8sar FoMas de estilo en cascada................................................................................................."" %rear re'las de estilo.................................................................................................................$E E3tra: est! os %apas......................................................................................................................41

.UB5ICACIN DE .9:INA' (EB............................................................46

%on@i'uracin de pu!licacin...................................................................................................$7 .ub !%ar nuestra =eb...................................................................................................................45 Consejos a tener en %uenta..........................................................................................................47

INTRODUCCIN:
Este tutorial tiene como fin brindar una base de conocimiento a aquellos que buscan una alternativa gratuita y libre para el diseo de una web, sin renunciar por ello a la calidad, ni a la facilidad de otras herramientas pensadas para el mismo fin.

Qu es KompoZer?
KompoZer es un editor de pginas web W !"W # $What you see is what you get % &o que ves es lo que recibes'. Es un derivado de ()*, es decir, una versi+n no oficial de ()*, el cual ha reparado ciertos errores$bugs' que este presentaba. Komposer est basado en ,o-illa .omposer pero con e/ecuci+n independiente. !u ob/etivo es facilitar el desarrollo de pginas web, gracias a las distintas formas de visuali-aci+n disponibles en su interfa- como0 c+digo fuente, ventana W !"W #, visi+n con tags de 12,& real-ados' 3resenta caracter4sticas como el soporte integrado de .!! y me/or gesti+n del soporte 523 para actuali-aci+n de los ficheros, soporte de marcos, formularios, tablas, pantillas de diseo, etc. .abe destacar que est disponible para diversas plataformas0 Windows, ,ac 6!, y &inu7. &a versi+n sobre la cual traba/aremos en este tutorial, es la 8.9.:8, traducida al espaol por el 3royecto (ave. se sentirn c+modos con la interfa- y opciones de KompoZer. ;lgunas de las herramientas de KompoZer son0

Administr dor de sitios !T": cualquier sitio que el usuario haya especificado en sus 6pciones de 3ublicaci+n, podr ser navegado en una barra lateral. 2ambi<n permite filtrar y mostrar archivos o solo documentos 12,& o imgenes. Nue#os se$ector de co$ores: algo ms ligado a lo que los usuarios acostumbran a utili-ar. !e podr elegir entre el selector de colores verde, a-ul y ro/o para crear la tonalidad deseada, as4 como tambi<n elegir la saturaci+n de la mati- $hue saturation' y el brillo. En caso de que esto nos resulte inc+modo, podremos elegir el color deseado con el mouse. "est % s: una de las herramientas ms conocidas de ,o-illa esta disponible para KompoZer facilitando el traba/o y brindndole la posibilidad al usuario de reali-ar acciones de manera ms fluida navegando entre pestaas. !e podr utili-ar la herramienta =eshacer y >ehacer independientemente en cada una de las pestaas.

& rr s de t re s person $i' ($es: se podrn elegir los botones que apare-can en nuestras barras y los que no seg?n nuestros gustos y@o necesidades.

.omo podrs ver, <sta aplicaci+n facilita mucho el desarrollo de sitios web con sus herramientas. http0@@www.difundefirefo7.com@Aompo-er

)NTORNO D) TRA&A*O
&a ventana principal de KompoZer esta formada por varias barras, a continuaci+n una descripci+n de cada una de ellas.

& rr de titu$o:
; la i-quierda de esta barra aparece el ttulo de la pgina web que estamos editando o el nombre del archivo que le hayamos asignado. ; la derecha los botones de control de la venta minimi-ar, ma7imi-ar@restaurar y cerrar.

& rr de men+s:
5ormado por los men?s Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas, Ayuda. ; trav<s de estos men?s podemos acceder a todas las opciones del programa.

& rr de Red cci,n:

Esta barra est formada por botones con las opciones de uso ms habitual que se encuentran en la barra de men?. ; trav<s de estos botones accedemos ms rpidamente. 3or e/emplo los botones0

N u e v o, A b r ir, G u a r d a r, P u b l i c a r, B u s c a r, I m a g e n , e t c. C a b e d e s t a c a r q u e p o d r e m o s m o d i fi c a r d i c h a b a r r a, p a r a a d a p t a rl a a n u e s t r a s n e c e s i d a d e s.

& rr s de !orm to:

.on botones que nos permiten acceder a opciones ms bsicas de formato de te7to y prrafos. Estas son similares a las de cualquier procesador de te7tos. Ba/o esta tenemos otra barra con ms opciones de formatos y adems de otras relacionadas con el formato aplicando estilos y las capas.

-ent n

dministr ci,n sitios .e(:

Esta barra esta situada a la i-quierda y en ella podremos configurar los sitios web, para poder acceder de forma rpida a las distintas pginas web. ; trav<s de ella tambi<n podremos publicar en "nternet Webs y editar directamente las paginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local.

-ent n de /re de edici,n:

Esta es el rea principal, en la que podremos disear y editar la pgina web. Es el espacio de traba/o. .ada pgina que se edite se mostrar en esta rea, pudiendo cambiar de una a otra mediante las pestaas que se muestran en la parte superior con el titulo de cada pgina. 2ambi<n podemos mostrar las reglas en esta rea, que nos ayudaran a dimensionar diversos ob/etos.

& rr de modo de edici,n:

En esta barra nos encontraremos cuatro pestaas que permiten cambiar el modo de edici+n0 C (ormal $o modo Wysiwyg' C Etiquetas 12,& $muestra de forma esquemtica las etiquetas utili-adas' C .+digo 5uente $acceso al c+digo 12,& de la pgina' C )ista 3reliminar $.omo se ver4a la pagina en el navegador'

& rr de est do:

3roporciona informaci+n como la relativa a dentro de qu< etiqueta nos encontramos. ;dems a trav<s de ella podemos seleccionar de forma facil y rpida las etiquetas con sus contenidos para reali-ar acciones sobre ellos como dar formatos, eliminar, etc.

&ARRA0 D) 1)NU0 2A1"3IADA4

V a m o s a v e rl o m a s a f o n d o

1en+ Arc5i#o: .onstituye la primera opci+n del men? principal. En ella podemos contemplar opciones como crear, abrir y guardare imprimir archivos.

1en+ )dit r: &as opciones de edici+n son estndares en casi todas las herramientasD aqu4 se pueden locali-ar las opciones para copiar, pegar, deshacer, rehacer, seleccionar, buscar y reempla-ar. propiedades de publicaci+n del sitio web.

1en+ -er: En esta opci+n se configuran las barras de herramientas, definiendo qu< elementos se desean visuali-ar en el rea de traba/o. 2ambi<n constituye otra v4a para despla-arse entre los diversos modos de edici+n $normal, etiquetas, fuente yvista preliminar', otra opci+n es la de cambiar el Zoom del escenario. $defecto :88E' 1enu Insert r 3ermite incorporar elementos a la escena, tales como tablas, formularios, imgenes, anclas y enlaces e7ternos. *no de los puntos primordiales y de gran inter<s es la inserci+n de caract<res especiales, los cuales son necesarios dentro de cualquier contenido que requiera un c+digo especial para poder ser visuali-ado. &os ob/etos inteligentes de los cuales dispone Kompo-er y que pueden ser insertados, no se visuali-an en el rea de traba/o normal, etiqueta o vista preliminar, s+lo hasta que se vea en un e7plorador se puede tener la seguridad de qu< ob/eto funciona correctamente.

1en+ !orm to 3ermite cambiar la apariencia de los elementos del documento como0 tipograf4a, tamao, color, estilo, formato del prrafo, inserci+n de listas, sangr4a, color del prrafo, letra y fondo.

1en+ T ($ &as tablas permiten tener mayor orden en la estructura de contenido bien sea grfico o te7tual. ;qu4 podemos insertar, seleccionar y borrar una tabla, adems de unir celdas seleccionadas, y definir el color de fondo de la misma. 1en+ 6err mient s !e utili-a para validar el c+digo generado en 12,&, asignar y administrar las contraseas por traba/o, asignar rutinas Fava!cript desde una consola especial, as4 como para verificar la sinta7is generada. &a opci+n de mayor uso es el Editor de ho/as de estilos o .!! $.ascade !tyle !heet' que tratan de dar la separaci+n definitiva de la l+gica $estructura' y el f4sico $presentaci+n' del documento

1en+ A7ud En esta opci+n est el enlace a la ayuda en l4nea desde el sitio oficial de Aompo-er%()*

CR)ACIN D) UN 0ITIO 8)&

KompoZer nos permitir traba/ar directamente sobre el sitio web en "nternet, aunque adems puede traba/ar con archivos en el sistema local. 3ara mantener organi-ados todos los archivos, es necesario crear un sitio web. !eleccionar0 ;en 2ditar %on@i'uracin de &u!licacin 6 sino desde el panel i-quierdo de ;dministrador de sitios $5G', seleccionamos el bot+n Editar !itios.

En ambos casos aparecer la siguiente ventana0

A d mini stra cin de s itio s w eb

; la i-quierda, podemos observar los sitios ya definidos, y a la derecha las propiedades del sitio seleccionado. 3ara crear un nuevo sitio, primero seleccionamos el bot+n (uevo sitioD as4, los campos de la derecha se pondrn en blanco para que sean rellenados0

Nom(re de$ sitio: (ombre del sitio que se va a crear. Es un te7to que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo. Es muy ?til para identificarlo.

Dire c ci n H T T P de s u p gin a ini ci al: *>& de la pgina de inicio del sitio web.

3or e/emplo, si se tiene una pgina en geocities, ser http0@@es.geocities.com@usuario@inde7.html. En caso de que se desee traba/ar en el sistema local, la direcci+n ser de tipo file0@@@.0@=ocuments and !ettings@usuario@sitioweb@inde7.html.

0er#idor de pu($ic ci,n: informaci+n para publicar en el servidor

=irectorio de publicaci+n0 direcci+n 523 $3rotocolo de 2ransferencia de archivos' de publicaci+n. Esta informaci+n nos la suministra el servidor donde se alo/a la pgina. En el caso de #eocities ser ftp0@@ftp.es.geocities.com@. En el caso de que se traba/emos en local, se introducir una *>& local del tipo ile0@@@.0@=ocuments and !ettings@usuario@=irectorio o se seleccionamos la carpeta pulsando en el bot+n !eleccionar directorio. (ombre de usuario .ontrasea

3ara eliminar un sitio, lo seleccionamos en la lista y pulsamos el bot+n Eliminar sitio. 3ara establecer un sitio predeterminado, lo seleccionamos en la lista y pulsamos el bot+n !eleccionar como valor predeterminado. El nombre del sitio se pondr en negrita indicando que es el predeterminado. *na ve- definido el sitio web, en el panel de la i-quierda se mostrarn todos los archivos y sub%carpetas e7istentes. 1aciendo doble pulsaci+n sobre un archivo, se abrir en una solapa nueva de la -ona de traba/o. !i se hace pulsaci+n doble sobre una carpeta, se mostrar el contenido de la misma.

CON!I9URACIN D) 3A ":9INA
Cre r un "/;in 8e(
H 3ara crear una pgina web pulsamos sobre el icono (uevo en la barra de herramientas de composici+n. 6 desde el men? ;rchivo%I (uevo

;parecera la siguiente ventana, 3odremos seleccionar0

un documento en !lancoA Gue !ien puede ser un N=1;3 normalA o un !trict =2=, Gue es un documento N=1;3 en el Gue no soporta etiGuetas anti'uas B el cdi'o de!e estar escrito correctamente. 8n documento !asado en una plantilla. 8na plantilla ,acia.

2ambi<n, podremos decirle que lo cree en una pestaa, o en una ventana nueva.

H 3ara abrir una pgina ya e7istente ir a0 ;rchivo J ;brir archivo. $.trl. K 6' H 3ara abrir una pgina abierta recientemente ir a0 ;rchivo J 3ginas recientes. Es interesante comentar que mediante la opci+n abrir direcci+n web, podremos cargar una web directamente en el programa, observando as4 su disposici+n y contenido.

9u rd r un "/;in 8e(
3odremos guardar un documento de KompoZer en formato 12,& o formato s+lo te7to. En el caso de guardarlo como 12,& $Arc5i#o< 9u rd r como===' preservar el formato del documento, como estilos del te7to, imgenes, etc. !i guardamos el documento como s+lo te7to $Arc5i#o< 9u rd r4 y cambiar codificaci+n de caracteres' eliminaremos todas las etiquetas 12,&, pero se preservar el te7to del documento.

-ist pre$imin r en e$ n #e; dor=

!i queremos comprobar c+mo quedar4a nuestra pgina web en "nternet, podemos reproducirla con el navegador que tengamos instalado. !olo hemos de elegir Arc5i#o/ -isu $i' r "/;in en e$ n #e; dor o pulsar la tecla !>.

"RO"I)DAD)0 D) ":9INA
!e configuran las propiedades de de pgina a trav<s de0 !orm to?T@tu$o 7 propied des de p/;in =

!e abrir la siguiente ventana0 "ntroducimos en esta ventana el ttulo de la pgina, nombre del autor, una breve y Descripci n. Es recomendable ingresar estos datos ya que algunos buscadores lo usan para inde7ar la pgina a su Base de =atos. 3odemos indicar si esta pgina se trata de una plantilla que usaremos en futuros diseos.

;dems podremos introducir en el rea llamada "nternacionali-aci+n las opciones referentes al idioma, direcci+n de escritura $dependiendo del idioma', y el /uego de caracteres utili-ados en la pgina.

2ambi<n, podemos configurar otras propiedades de la pgina, tales como el fondo y los diferentes colores a utili-ar. 3ara ello, accederemos a0 !orm to< Co$ores 7 !ondo de p/;in =

=isponemos de dos opciones para establecer los colores de la pgina0

*sar .olores predeterminados. *sar colores personali-ados.

!i elegimos usar !olores predeterminados, los te7tos, enlaces y el color de fondo de fondo de nuestra pgina se mostraran con los colores configurados en el navegador. .on "sar colores personali#ados, podemos definir el color en que se mostrarn los te7tos, enlaces y fondo de la pgina.

!i decidimos personali-arlo, como vemos en la imagen, podremos ver una pequea ventana en modo de muestra para ver el contraste entre los diferentes elementos que hemos configurado. 2ambi<n disponemos de una Edici+n avan-ada0

=esde aqu4 podremos, mediante los atributos y sus respectivos valores, aplicar diferentes configuraciones a LB6= I, mediante 12,&, como estilos incrustados $.!!', y eventos /avascripts, que se aplicarn por defecto a los diferentes elementos de nuestra web.

T)ATO
Introducci,n de teBto
.omo ya hemos visto en el apartado anterior, podemos establecer un formato predeterminado para todo el te7to de la pgina. 3ero a continuaci+n, vamos a ver como traba/ar directamente con el te7to, para personali-ar cada apartado. En cuanto a la inserci+n de te7tos, esta no tiene ninguna dificultad, ya que es e7actamente igual a como cualquier procesador de te7tos. .abe aclarar, que en lengua/e 12,&, caracteres especiales como vocales acentuadas, ees, par<ntesis, etc. se escriben de una forma especial, utili-ando c+digos, incluso el espacio en blanco se trata de forma especial. !i traba/amos en el modo de edici+n normal, Kompo-er se encargara de traducir los caracteres especiales que escribamos al modo de c+digo de caracteres en 12,&. 3odemos seleccionar el tipo de contenido que estamos insertando $parrafos, t4tulo, direcci+n..' mediante la opci+n Texto del cuerpo, en la Barra de 5ormato0

;s4, en el caso de estar escribiendo un te7to, y requerir un salto de l4nea, , solo tendremos que presionar Mayuscula+Enter , y pasaremos as4 al prrafo siguiente, el cual heredar la personali-aci+n aplicada al anterior. En el caso de necesitar introducir .aracteres Mpoco comunesN, esos que no se encuentran en el teclado o que requieren c+digo 12,& especial, iremos al men? Insertar/Caracteres y Simbolos= En elo cual nos aparecer una solapa, en la que podremos encontrar seg?n la clasificaci+n de la misma el carcter en cuesti+n0

0e$ecci,n de TeBto=
2n cuanto a la seleccin de te.toA KompoZer No permite Facer selecciones discontinuas de te.to. 3os procedimientos m#s usuales para seleccionar te.toA son los si'uientes: ARRA'TRE 0e sita el cursor al inicio del !loGue de te.to B realiOamos un arrastre con el !otn iOGuierdo del ratn.. A% ara%!&n: 0i un !loGue de te.to est# seleccionado B se pulsa cualGuier teclaA sta sustituBe a toda la seleccin. 8A> ? .O'ICIN &ara seleccionar un !loGue de te.to situamos el cursor en el inicio del !loGueA pulsamos B mantenemos pulsada la tecla 8A>A situamos el cursor al @inal del !loGue de te.to. 'E5ECCIN

Una pa abra: <o!le clic so!re la pala!ra Una @nea: %lic en la parte iOGuierda de la lDneaA el cursor cam!ia a @lecFa. Un p,rra*o: 5os situamos al comienOoA B sin soltar el !otn iOGuierdo del ratnA lo arrastramos Fasta el @inal del mismo.

)$ "ort p pe$es=
&as herramientas del 3ortapapeles se sit?an en el men? Edici+n, aunque podremos, una ve- seleccionado el te7to o la posici+n el cuesti+n, pulsar el bot+n derecho, y acceder rapidamente a las siguientes opciones0 Copiar. Edicin/Copiar. 2ecla rpida .6(2>6& K . Cortar. Edicin/Cortar. 2ecla rpida .6(2>6& K O

Pegar. Edicin/Pegar. 2ecla rpida .6(2>6& K ) Pegar sin Formato.

Ac$ r ci,n0 El portapapeles no funciona con imgenes copiadas de otras aplicaciones, mas adelante veremos como se deben de insertar las imgenes.

Otr s Oper ciones +ti$es=

BU'CAR > REE8.5AAAR Este comando nos ayudar a ahorrar tiempo y traba/o0 )dici,nC&usc r 7 reemp$ ' r=

&usc r teBto: 3odemos buscar en el c+digo fuente o en el te7to, dependiendo de la vista seleccionada. Remp$ ' r con: si queremos reempla-ar lo buscado por algo debemos indicar el te7to en este cuadro de te7to. 3odemos configurar las opciones de b?squeda0

.oincidir may?sculas y min?sculas. Buscar el todo el documento. Buscar hacia atrs.

*na ve- configurado el cuadro de dilogo tenemos la posibilidad de buscar o rempla-ar, uno por uno o todos a la ve-. DE'7ACER > RE7ACER

Des<a%er (Contro ? A": seleccionamos Ed!%!&nBDes<a%er o !otn de la !arra de Ferramienta Est,ndar. Re<a%er (Contro ? >": seleccionamos Ed!%!&nCRe<a%er !otn de la !arra de Ferramienta Est,ndar.

CO8.ROBACIN ORTO:R92ICA 3ara poder poner en marcha esta utilidad debemos seleccionar )dit r<Re#isi,n Orto;r/Dic 2Ctr$=EK4. ;parecer el siguiente cuadro de dilogo0

A% dir p $ (r 0 "ncluye la palabra seleccionada a nuestro diccionario personal e impide que KompoZer la recono-ca como palabra err+nea. I;nor r0 "ndica al programa que ignore la palabra seleccionada y contin?e la b?squeda. I;nor r todo0 6mitir todas las repeticiones de la palabra seleccionada en el documento entero. Reemp$ ' r0 !i encontramos la palabra correcta en la lista de sugerencias y queremos cambiarla por la err+nea, la seleccionamos y presionamos este bot+n. !i no encontrsemos ninguna podemos escribir la correcta en el cuadro de te7to Reemp$ ' r con=

Reemp$ ' r tod s0 2odas las repeticiones de la palabra en cuesti+n encontradas en el documento sern reempla-adas por la palabra seleccionada en el cuadro 0u;erenci s.

El programa comprueba el te7to usando el diccionario seleccionado en la casilla Idiom . .abe aclarar que en el caso de no disponer del idioma Espaol, seleccionaremos dentro de la casilla "dioma, =escargar ,as, y seguiremos las instrucciones que all4 aparecern para conseguir el mismo.

!OR1ATO D) T)ATO
!i queremos modificar las caracter4sticas de un te7to, o cualquier otro elemento, se aplican desde la barra de 5ormato o desde men? 5ormato !i no lo tenemos visible seleccionamos -er<1ostr r Ocu$t r< & rr de !orm to *na ve- seleccionado un te7to el inspector de propiedades muestra este aspecto.

En caso de que en la misma no encontremos la opci+n deseada, dentro del men? 5ormato, encontraremos las faltantes.

)sti$o de "/rr Do=

El te7to en 12,& est compuesto principalmente por encabe-ados y prrafos. 3ara asignar a un prrafo un estilo de prrafo, como hemos comentado anteriormente, seleccionamos el mismo, y, seleccionamos en el campo 2e7to del .uerpo, 3arrafo, o Encabe-ado 7, dependiendo del tipo. Estilos accesibles desde esta lista0

Direcci,n: "ntroduce te7to entre saltos de l4nea, no entre etiquetas LpI y L@pI, como har 3rrafo. "reDorm to: estilo de te7to que emplea letra mono espaciada, con este estilo se respetan los espacios entre palabras del c+digo 12,&, se emplea de una manera rudimentaria para alinear te7to. &a etiqueta que emplea es L3>EIL@3>EI. Contenedor 9enrico 2DI-4: Esta opci+n introduce el te7to dentro de una capa, que es un tipo de organi-aci+n del te7to y demas elementos, en el que profundi-aremos mas adelante.

!uente
&a fuente se define con el atributo D ce de la etiqueta F!ontC. KompoZer aplica las fuentes que se encuentran instaladas en el equipo, pero hay que tener en cuenta, que puede que el visitante no posea ese determinado tipo de fuente, por lo que es recomendable que cuidemos este aspecto a la hora de seleccionar alguna de ellas, ya que dependiendo de la fuente seleccionada, el aspecto de nuestra web puede

cambiar mucho. &os pasos para aplicar el formato, son los siguientes0 :. !eleccionamos el te7to. P. =esplegamos, en el "nspector de 3ropiedades, el cuadro de lista desplegable de fuentes o e/ecuta el comando TeBtoC!uente.

Q. !eleccionamos de la lista la fuente deseada.

Ne;rit G cursi# 7 0u(r 7 do

=esde el mismo "nspector de 3ropiedades podemos aplicar estilo directamente a un te7to seleccionado pulsando los iconos correspondientes.

T m %o
;l seleccionar ,enor o ,ayor puede cambiar el tamao del te7to seleccionado usando etiquetas LsmallI y LbigI, respectivamente. !i seleccionamoa ,uy pequeo, 3equeo, ,edio, #rande, ,uy grande y E7tragrande cambiar el tamao del te7to seleccionado usando etiquetas LfontI.

A$ine ci,n de "/rr Dos=

3ara establecer la alineaci+n del 3rrafo0 :. !ituamos el cursor en el 3rrafo que queremos modificar. P. !elecciona en el Inspector de "ropied des la alineaci+n que deseamos pulsando su bot+n correspondiente. &os diferentes c+digos que se introducen son0

"-quierda0 Lp alignRSleftSI.L@pI .entro0 Lp alignRScenterSIL@pI =erecha0 Lp alignRSrightSIL@pI Fustificar0 Lp alignRS/ustifySIL@pI

2ambi<n se puede acceder desde el men? TeBtoCA$ine r, y seleccionamos la alineaci+n elegida.

0 n;r@ de "/rr Dos=

3ara modificar la sangr4a del 3rrafo0 :. !ituamos el cursor en el prrafo que queremos sangrar. P. En el Inspector de "ropied des, pulsamos el icono !angr4a de te7to o ;nular la sangr4a de te7to seg?n deseemos.

OTRO0 )3)1)NTO0
3ist s=
*tili-aremos primordialmente dos tipos de listas0

3ist s sin orden r0 2ambi<n llamadas vietas. 3ist s orden d s0 2ambi<n llamadas numeraciones. 3ist s de deDinici,n: !e utili-an para introducir un termino, seguido de su definici+n. Es muy util en muchos casos, como, por e/emplo, en el glosario de nuestra web.

" r cre r un $ist nue# = :. !ituamos el cursor en el lugar en el que deseamos aadir la lista y hacemos clic en el bot+n determinado. P. Escribimos el te7to del elemento de la lista y presiona INTRO para crear otro elemento de la lista. Q. 3ara terminar la lista, desactivamos el icono de la lista en el inspector de 3ropiedades. " r cre r un $ist us ndo teBto eBistente :. !eleccionamos una serie de prrafos para convertirlos en una lista. P. 1acemos clic en el bot+n espec4ficoG y seleccionamos el tipo de lista deseado0 &ista sin ordenar, &ista ordenada o &ista de definici+n. .RO.IEDADE' DE 5A 5I'TA *na ve- reali-ada una lista se puede modificar. 3ara modificar una lista situamos el cursor dentro de la misma y seleccionamos 5ormatoC3ist sC"ropied des= ;parecer un men? de dialogo.

Tipo de $ist : .ambia la representaci+n de los elementos de toda la lista. )sti$o de -i%et : *na ve- elegido un tipo de lista podemos seleccionar su estilo0 si son vietas, c4rculos o cuadrados, y si es una numeraci+n podemos elegir que sea alfab<tica, en numeraci+n romana, etc. .omen-ar en0 en el caso de seleccionar una lista de numeraci+n, podremos indicarle el n?mero a partir del cual queremos que empiece a contar.

3@ne s
&as lineas son un elemento muy util para dividir y diferenciar de una forma simple, el contenido de nuestra pgina. 3ara insertar una l4nea hori-ontal de separaci+n simplemente habr que seleccionar la opci+n Insert rC3@ne . En el c+digo 12,& de la l4nea se representar como LhrI.

*na ve- insertada se le pueden modificar las propiedades desde el "nspector de 3ropiedades. ;l seleccionar la regla hori-ontal nos ofrece estas posibilidades0

=esde estos campos podemos determinar0

;nchura0 el ancho de la regla $en p47eles o en tanto por ciento con respecto al ancho de la pagina' el alto de la regla $en pi7eles' si tendr sombreado o no su alineaci+n en la pgina 2ambi<n, podremos definirla como predeterminada, para, as4, al insertar otra l4nea en el futuro, que esta posea las mismas propiedades que la anterior. En Edici+n ;van-ada, podremos acceder a una ventana para, as4, en caso de conocer los atributos con sus respectivas propiedades, introducirlos mediante el lengua/e 12,&.

E %o or.
!e puede definir el color para varios elementos de la pgina0 te7to, fondo de pginas, tablas y celdas, hiperv4nculos, bordes de tablas, l4neas hori-ontales, etc.

'e e%%!onar e %o or.

En cualquier momento que tengamos que seleccionar un color en KompoZer lo haremos a trav<s de un bot+n de este tipo0 . ;l pulsarlo aparecer el selector de color0

=esde el cuadro de dilogo que se despliega podremos seleccionar un color predefinido, o seleccionarlo cualquiera de la paleta de colores, as4 como personali-ar su tono, saturaci+n y brillo. 2ambi<n, podremos seleccionarlo por su nombre, o por su valor en he7adecimal. Ac$ r ci,n: &as etiquetas web emplean colores por combinaci+n de >6F6, )E>=E y ;Z*&, el valor m7imo para cada color es PTT $55 en he7adecimal', y el valor m4nimo 8 $8 en he7adecimal'. E/.0 un color codificado as4 U558888 es ro/o puro.

)N3AC)0
&os v4nculos tambi<n llamados enlaces, linAs o hiper%enlaces son los que nos permiten navegar, es decir, ir pasando de una pagina a otra. !e puede usar como enlace un te7to o una imagen, el procedimiento es similar en ambos casos. 1ay dos formas de introducir una direcci+n de la pgina@archivo@etc a enla-ar0

Direcciones (so$ut s 7 re$ ti# s

A(so$ut s: !e utili-an para enla-ar pginas o archivos de un servidor e7terno. *na direcci+n absoluta contiene la *>& completa. !on del tipo0 http0@@www.cprlogrono.com Estas direcciones requieren ser comprobadas periodicamente como labor de mantenimiento. E/0 http0@@www.google.es@. .+digo0 La hrefRShttp0@@www.google.esSI Re$ ti# s: 3ara enla-ar pginas o archivos pertenecientes al mismo sitio. &es falta alguna de las secciones de la *>&. !i el archivo destino no se encuentra dentro de la misma carpeta del sitio web, se le antepone la ruta correspondiente a partir de la ubiaci+n actual. E/0 direccion relativa. .+digo0 La hrefRS..@..@inde7.htmSI

Tipos de )n$ ces:

Interno: (os lleva a otra parte dentro de la misma pgina donde se encuentra el enlace. 3ara ello utili-amos un elemento llamado ancla. 3oc $: !e refiere a alg?n recurso situado en el mismo servidor que nuestra pgina $*>& relativas' )Bterno: !e refiere a alg?n recurso situado en otros servidores diferentes donde se encuentra nuestra pgina $*>& absoluta' De Correo: .uando se da clic en este tipo de enlaces se abre programa de correo electr+nico para enviar un email a la direcci+n que previamente se halla especificado en ese enlace.

A Arc5i#os: El recurso sealado es un archivo y al dar clic nos permiten que se abran o se descargen a nuestro ordenador esos archivos.

A"3ICACIN
)n$ ces Interno
:. !ituamos el cursor a donde estar dirigido nuestro enlace. *na ve- seleccionado, pulsamos el icono Enlace "nterno referencia de nuestro enlace. P. &uego, seleccionamos nuestro futuro linA que, como ya hemos mencionado,puede ser el te7to o la imagen que servir de enlace. Q. Elegimos men? "nsertarJ Enlace o pulsamos el bot+n Enlace V. En *bicaci+n del enlace colocamos la *>& de la pgina a la que debe apuntar el enlace. &a *>& puede ser absoluta $comien-a por http0@@' o relativa, es decir la ruta de un archivo en el propio servidor donde est< alo/ada la pgina. En este caso podremos marcar la opci+n &a *>& es relativa a la direcci+n de la pgina cuando accedamos a las propiedades del enlace. ;l pasar el mouse sobre el ancla colocada, aparecer el nombre que le hemos dado. 3ara cada destino al que queremos llegar en nuestra pgina habr un ancla , y le establecemos un nombre que har de

)n$ ces )Bterno

:. !ituamos el cursor donde ser el enlace. 3or e/emplo seleccionando el te7to o imagen que servir de enlace. P. Elegimos men? "nsertarJ Enlace o pulsamos el bot+n Enlace Q. En *bicaci+n del enlace colocamos la *>& de la pgina a la que debe apuntar el enlace. &a *>& puede ser absoluta o relativa.

)n$ ces

Correo )$ectr,nico

;l insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo electr+nico al cual queremos llegar y marcamos la opci+n M&o anterior es una direcci+n de correo electr+nicoN

)n$ ces

Arc5i#os:

3ara crear un enlace a un archivo, lo reali-amos igual que si fuera a otra pgina, solo que en ve- de seleccionar dicha pgina, seleccionamos el archivo en cuesti+n. Estos enlaces no disponen de mayor comple/idad. Destino de$ )n$ ce:

El archivo llamado por un enlace se muestra en una ventana del navegador. 3or defecto,

esta ventana es la misma en la que estbamos, se sustituye su contenido. 3ero es posible determinar cul va a ser la ventana de destino del enlace. =entro de las propiedades del enlace, podremos seleccionar entre las siguientes opciones0

En la misma ventana, sin marcos $por defecto' En una nueva ventana. En el con/unto de marcos contenedor En el marco actual En este marco0Lnombre marcoI

=e momento solo prestaremos atenci+n a los dos primeros, ya que los marcos los estudiaremos en profundidad en otros apartados de este manual.

)ATRA: OTRA0 "RO"I)DAD)0 D)3 )N3AC):

;l crear enlaces en su pgina web a las de otras personas, KompoZer proporciona la posibilidad de incluir informaci+n O5( $O12,& 5riends (etworA, >ed de ;mistad O12,&'. O5( es una manera muy sencilla de representar las relaciones humanas usando hiperenlaces. 3ara aadir informaci+n O5(0 :. 3ulse con el bot+n derecho en el enlace al que quiere aadir informaci+n O5(. P. !eleccione 3ropiedades del enlace. Q. En la ventana de dilogo 3ropiedades del enlace, pulse en ,s propiedades. V. !eleccione las entradas ba/o la secci+n ;mistad $O5(' que quiera aadir como informaci+n O5(. T. 3ulse ;ceptar. W. 3ulse #uardar para guardar los cambios@adiciones al documento. Not : algunas propiedades O5( son de tipo radio, es decir, s+lo puede pulsar una como m7imo, mientras que otras son casillas de verificaci+n, es decir, puede marcar varias simultneamente.

R)!)R)NCIA 6T13
)tiHuet FAC 7 F<AC
&as etiquetas LaI y L@aI definen un en$ ce0 el te7to o imagen encerrado entre ellas servir de enlace hacia el destino que marquemos. E/0 "r a #oogle .+digo 12,&0 La hrefRShttp0@@www.google.comSI Enlace a la pgina de #oogleL@aI El destino es marcado por el modificador 5reD de la etiqueta.

Atri(utos de FAC

5reDIJ===J0 Es necesaria. "ndica la direcci+n *>& a la que se va a saltar al hacer clic sobre el enlace. n meIJ===J: .onvierte al contenido de la etiqueta L;I en un destino $llamado marcador o punto de ancla'. t r;etIJ===J: =etermina el marco o ventana de destino donde se abrir el archivo enla-ado. tit$eIJ===J: 6pcionalmente podemos aadir un te7to alternativo que se muestra al posicionar el rat+n sobre el enlace.

Atri(utos de F&ODKC
&a etiqueta LB6= I puede tener tres modificadores que definen el aspecto de los enlaces de toda la pgina web0

$inLIJ===J: =etermina el color de los enlaces de la pgina Web #$inLIJ===J: =etermina el color de los enlaces ya visitados de la pgina Web $inLIJ===J0 =etermina el color general de los enlaces activos $al hacer clicA' de la pgina Web

I1:9)N)0
!orm tos:
2ormato :I2 El formato #"5 $#raphics "nterchange 5ormat', naci+ en el ao :GX9 de la mano de .ompuserve con ob/eto de colorear sus imgenes, hasta entonces codificadas en su formato >&E en blanco y negro. &a versi+n original $#"5X9a' fue sustituida por la #"5XGa. ;ctualmente e7iste un problema de licencias que desaconse/a su uso en favor del formato 3n#. !us caracter4sticas ms importantes son0

Es un formato de compresi+n sin p<rdidas lo que aligera el tamao final del archivo, manteniendo su calidad. !e utili-a principalmente para imgenes de colores planos, o sea, grandes manchas de color homog<neo, sin variaci+n cromtica, al modo de los dibu/os infantiles. 3ermite StransparenciasS, es decir, seleccionando uno de los colores de la imagen <ste se vuelve transparente, permitiendo ver a trav<s de <l cualquier fondo, o imagen que est< situada detrs. 3ermite, con el programa adecuado, crear animaciones presentando varias imgenes una tras otra como si de un Sdibu/o animadoS se tratara. *tili-a una paleta de PTW colores como m7imo, lo que nos permite elegir entre varios tamaos para un mismo archivo.

2ormato D.: El formato F3# o F3E# $Foint 3hotographic E7pert #roup ', es el ms utili-ado para la transmisi+n de fotograf4as, naci+ en el ao :GXW. Es un formato muy recomendado para imgenes con una amplia gama de colores y que permite a/ustar el grado de compresi+n y por tanto la calidad de la imagen. !us caracter4sticas ms importantes son0

Es un formato de compresi+n con p<rdida0 aligera el tamao final del archivo, pero le resta calidad. !e utili-a principalmente para incluir en la web fotograf4as con un elevado n?mero de colores $traba/a con un formato de :W millones de colores'. (o permite definir colores transparentes. (o permite crear animaciones. .on el formato F3#, podemos escoger el grado de compresi+n, de manera que

cuanto mayor sea la compresi+n mayor es la p<rdida de calidad de la imagen.

.odifica los colores con PV bits, por lo que puede mane/ar una paleta de ms de :W millones de colores, lo que se llama color verdadero.

2ormatos .N: 3(# $3ortable (etworA #raphics' es un formato grfico basado en un algoritmo de compresi+n sin p<rdida para bitmaps no su/eto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato #"5 y permite almacenar imgenes con una mayor profundidad de color y otros importantes datos. !us caracter4sticas principales son0

Es un formato de compresi+n sin p<rdidas lo que aligera el tamao final del archivo, manteniendo su calidad. !oporta formato de color inde7ado $PTW colores' y profundidades de color de VX bits y escala de grises de :W bits. 3ermite colores transparentes y transparencias graduales. (o permite crear animaciones, e7iste un formato relacionado para animaciones, pero est poco e7tendido0 ,(#. El usuario puede elegir el formato a usar en la codificaci+n de la imagen0 3(#X $anlogo al #"5' o 3(#PV $PV bits de color' no es adoptado por todos los navegadores, y a?n menos por las versiones antiguas de los mismos.

ObserEa%!ones: ; la vista de todo lo anterior, cuando integremos imgenes en nuestra pgina deber4amos tener en cuenta lo siguiente0

=ebemos anali-ar detalladamente el uso de imgenes en nuestra pgina. 1emos de fi/arnos en su necesidad, resoluci+n, tamao, formato, etc. El ob/etivo es lograr que la pgina se cargue lo ms rpidamente posible. El tamao del archivo de imagen depende de las dimensiones de la imagen y del n?mero de colores que la forman. 3ara colores puros con no ms de PTW colores y grficos muy simples usaremos el formato #"5 o 3(#. 3ara imgenes con ms de PTW colores usaremos el formato F3# o 3(#PV. *sar las imgenes con su tamao real, evitando que sea el navegador el encargado de reducirlas. (o colocar demasiadas imgenes en una misma pgina. !i necesitamos mostrar

un numero elevado de imgenes, lo me/or es usar una versi+n muy reducida de las mismas $thumbnails o miniaturas' a modo de 4ndice y enla-ar con pginas individuales donde se muestre cada imagen por separado.

;l disear la estructura del sitio utili-ar una carpeta para las imgenes muy usadas a lo largo de las diferentes pginas del sitio. *sar el atributo ;&2 en las imgenes, para facilitar la comprensi+n del contenido a los usuarios y a los robots usados por los buscadores para inde7ar nuestra pgina.

Insert r im ;en
!e pueden insertar imgenes #"5, F3E#, B,3 y 3(# en una pgina web. 2ambi<n se pueden utili-ar para . .uando se inserta una imagen, KompoZer guarda la referencia a la imagen en la pgina. 3asos para insertar una imagen0 :. 1acemos clic en el sitio donde queramos que apare-ca la imagen. P. 1acemos clic en el bot+n "magen de la barra de herramientas o abra el men? "nsertar y seleccione "magen. ;parecer el cuadro de dilogo 3ropiedades de la imagen. Q. 3odemos escribir la ubicaci+n y nombre del archivo de la imagen o hacer clic en Elegir archivo... para buscar un archivo de imagen en el disco duro o en red local. V. ; continuaci+n, KompoZer nos permite escribir el te7to alternativo que aparecer en los navegadores de s+lo te7to y que aparecer en los otros navegadores mientras se carga la imagen o cuando la carga de imgenes est deshabilitada. Esta opci+n, si bien no es obligatoria, si es recomendable.

"RO"I)DAD)0 D) 3A I1A9)N:
*na ve- que insertamos una imagen en la pgina, podremos editar sus propiedades y personali-ar su diseo, como la altura, anchura, espaciado y alineaci+n del te7to.

3ara editar las propiedades de una imagen seleccionada0 :. 1acemos doble clic en la imagen o la seleccionamos y hacemos clic en el bot+n "magen de la barra de herramientas para visuali-ar el cuadro de dilogo 3ropiedades de la imagen. )eamos las propiedades de este men?0

"est % U(ic ci,n:

U(ic ci,n de $ im ;en0 aqu4 escribimos el nombre y ubicaci+n del archivo de la imagen o hacemos clicA en Elegir archivo... para buscar un archivo de imagen en el disco duro o red local.

3 UR3 es re$ ti#

$ rut de $ p/;in 0 si est seleccionado KompoZer

convierte la *>& a una direcci+n relativa a la ubicaci+n de la pgina. Esto es especialmente ?til si planeamos copiar las pginas a un servidor web para que otra gente pueda verlas. El uso de *>&s relativas permite mantener todos los archivos vinculados en el mismo sitio relativo al resto independientemente de la ruta en el disco duro o servidor web.

;l desmarcar esta opci+n KompoZer convierte la *>& a una *>& completa o absoluta. (ormalmente se utili-an *>&s absolutas cuando se vinculan imgenes en otros servidores web $cuando no estn almacenadas localmente en el disco duro'.

TeBto $tern ti#o0 como hemos mencionado anteriormente, aqu4 introducimos el te7to que se visuali-ar en lugar de la imagen original, por e/emplo, un t4tulo o una breve descripci+n de la imagen. No us r teBto $tern ti#o0 seleccionamos esta opci+n si la imagen no requiere un te7to alternativo o no quiere especificar uno.

"est % Dimensiones:
T m %o re $0 seleccione esta opci+n para deshacer cualquier cambio hecho a las dimensiones de la imagen y devolverle a <sta a su tamao real.

T m %o person $i' do0 seleccionamos esta opci+n para especificar una nueva altura y anchura, en p47eles o como porcenta/e. Esta configuraci+n no afecta al archivo original de la imagen, s+lo a la imagen insertada en la pgina. 1 ntener specto0 marcamos esta opci+n para mantener las proporciones de las imagenes si las vamos a redimencionar, para que estas no apare-can deformadas. !i se seleccionamos esta opci+n s+lo snecesitamos cambiar la altura o la anchura, pero no ambas.

"est % Ap rienci :

)sp ci do0 especificamos aqu4 la cantidad de espacio del contorno de la imagenD el espacio entre la imagen y el te7to cercano. 2ambi<n podemos colocar un borde negro s+lido en el contorno de la imagen, especificando la anchura en p47eles. .olocamos cero si no quiere borde. A$ine r e$ teBto con $ im ;en0 si colocamos la imagen al lado de un te7to, seleccionamos esta opci+n para indicar c+mo se desea que se posicione el te7to en relaci+n con la imagen. 1 p de im ;en0 hacemos clic en Eliminar para borrar cualquier configuraci+n de mapa de imagen. 1asta la versi+n actual, Kompo-er no permite reali-ar el mapeo de imagenes de forma simple, solo mediante los atributos correspondientes.

"est % )n$ ce:

Introdu'c un u(ic ci,n de p/;in .e(0 si queremos definir un enlace a la imagen, introducimos la *>& de una pgina remota o local, o seleccionamos un enlace interno o encabe-ado de la lista desplegable. 2ambi<n, podemos pulsar en Elegir archivo para buscar un archivo de imagen en el disco duro o en la red local. 3 UR3 es re$ ti# $ u(ic ci,n de $ p/;in 0 si la marcamos, KompoZer

convertir la *>& a una relativa a la ubicaci+n de la pgina. =esmarcar esta casilla provoca que KompoZer convierta la *>& a una direcci+n completa $absoluta'. (ormalmente se usan *>&s absolutas cuando se enla-a a pginas en otros servidores web $no almacenadas localmente en su disco duro'.

1ostr r (orde $rededor de $ im ;en0 si se marca, aparecer un borde del color elegido para los enlaces en torno a la imagen.

Otr s opciones:
3ara aplicar atributos adicionales o eventos Fava!cript, hacemos clic en Edici+n avan-ada... para visuali-ar el editor avan-ado de propiedades. 1acemos clic en ;ceptar para confirmar los cambios.

IN0)RTAR UNA I1A9)N CO1O !ONDO

;hora colocaremos una imagen de fondo de pgina. 3ara ello pinchamos sobre la pgina en !orm to < Co$ores 7 Dondo de p/;in .

&uego, en el cuadro de dilogo que se nos muestra elegimos la secci+n de Im ;en de !ondo y pinchamos en el bot+n )$e;ir rc5i#o.

.omo hemos visto antes, la primera ventana que se nos abre es en la que aparece nuestra Web. =entro de la carpeta Mim/;enesM seleccionamos el archivo que deseemos

tener como fondo de pgina.

En la siguiente ventana se comprueba que el archivo seleccionado se ha tomado de la carpeta im/;enes y el archivo responde al nombre de prue( =pn;N tiene una *>& relativa, lo que es preferible a la absolutaD luego se pulsa Acept r.

!i la imagen es ms pequea que la -ona de visuali-aci+n de una pgina $como en esta imagen elegida para el fondo', la repite en forma de mosaico ocupando toda la pantalla. 3or eso las imgenes de fondo siempre hay que seleccionarlas bien para que no dificulten la lectura del te7to. Esto mismo que hemos descrito para el fondo de la pgina sirve para el fondo de una tabla que pongamos en ella.

R)!)R)NCIA 6T13
)tiHuet FI19C
=etermina la locali-aci+n de una imagen. (o tiene cierre. ;tributos de la etiqueta L",#I0

src IJ===J: >uta origen para locali-ar el archivo de la imagen. $source@fuente'. $tIJ===J0 2e7to alternativo que aparece en lugar de la imagen si el navegador no puede mostrar la imagen. 2ambien es mostrado al colocarnos sobre la imagen en un letrero amarillo. .idt5IJ===J0 Establece el ancho de la imagen. 5ei;5tIJ===J: Establece el alto de la imagen. (orderIJ===J: ,uestra un marco con el n?mero de pi7eles deseado. $i;nIJ===J: ;linea la imagen respecto al te7to.

)tiHuet F1A"C 7 F<1A"C

&a etiqueta map permite crear un mapa de imagen con diferentes -onas de manera que, al pulsar sobre ellas, se enla-a a diferentes destinos. .ada mapa de imgenes se determina con un nombre $atributo n meIJ===J'. Entre la apertura y el cierre se definen las areas del mapa por medio de la etiqueta FAR)AC 7 F<AR)AC que tiene a su ve- estos atributos0

s5 peIJ===J 0 5orma del rea de enlace0 circular, rectangular, o poligonal. coordsIJ===J 0 .oordenadas de locali-aci+n del rea en la imagen. 5reDI J===J 0=irecci+n del enlace.

Atri(uto ( cL;round de &ODK

E7isten dos modificadores de body para definir el fondo de una pgina0 su color $Lbody bgcolorRSU555555S I' o una imagen de fondo $F(od7 ( cL;roundIJim ;enDondo=Op;JC'.

)tiHuet O(Oect
3ara incluir ficheros no estandar $pel4culas 5lash, v4deos o sonido' dentro de una pgina se utili-an dos etiquetas combinadas, o(Oect para "nternet E7plorer y em(ed para (etscape.

.ada ve- ms, el v4deo y el sonido son componentes integrales de los sitios Web comerciales. *tili-ando s+lo etiquetas 12,& estndar podemos agregar funcionalidad multimedia atractiva a las pginas Web. 3or e/emplo, para incrustar un clip de v4deo en una pgina Web, podemos utili-ar tambi<n otro tipo de etiqueta.

)tiHuet D7nsrc
simplemente el atributo = (!>. de la etiqueta 12,& L",#I0 L",# = (!>.RS,i)ideo.aviS I El clip de v4deo ,i)4deo.avi se reproduce despu<s de que el usuario cargue una pgina Web que contenga esta etiqueta. .on 12,& tambi<n podemos crear v4nculos a gran n?mero de formatos de archivo, incluidos los de ,icrosoft 6ffice. 3ara que los usuarios puedan ver estos formatos, deben tener e7ploradores Web capaces de ver archivos que no sean 12,&. 3or e/emplo, si sabes que todos los usuarios de una intranet tienen ,icrosoft$r' E7cel y ,icrosoft$r' "nternet E7plorer versi+n Q.8 o posterior, podremos crear v4nculos con una ho/a de clculo de E7cel desde el sitio Web. .uando el usuario hace clic en el v4nculo, el documento aparece en formato de E7cel dentro del e7plorador Web del usuario. Este es un buen m<todo que puede utili-ar para crear sitios Web que compartan y distribuyan documentaci+nD de esta forma ayuda a traba/ar efica-mente.

TA&3A0
Introducci,n
&as tablas no solo son ?tiles para mostrar listas de datos, son tambi<n un elemento primordial para maquetar las pginas web, o sea, para colocar con cierta libertad los elementos que forman la pgina web. &as tablas nos permiten organi-ar y distribuir los espacios de una manera +ptima. 3or e/emplo no permite poner el te7to en columnas como en los peri+dicos, prefi/ar los tamaos ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a una imagen. En el momento en que queremos mostrar pginas webs atractivas y fciles de leer nos veremos en la necesidad de utili-ar las tablas.

Descripci,n de $ s t ($ s
3odemos definir a una tabla como un con/unto de espacios organi-ados en filas y columnas. &a intersecci+n de las filas se llaman celdas. *na cuadr4cula es una tabla, en cuyas celdas podemos poner cualquier elemento 12,&, desde te7to hasta imgenes y otros elementos multimedia. ;lgunos atributos propios de las tablas son0

A$to 7 nc5o 2 eig t 7 !idt 40 pueden medirse en pi7els o en porcenta/e del elemento contenedor $widthR S:88ES indica que ocupa el ancho del elemento en el que est colocada. &order 2(orde4 0 ;nchura del borde que rodea a la tabla. !i es 8 el borde no se ve cellpadding 2re$$eno40 margen del contenido de cada celda. !e mide en pi7els. cellspacing 2esp ci do40 espacio entre las celdas. !e mide en pi7els.

Cre r T ($ s

3ara insertar una tabla mediante KompoZer, tenemos tres posibilidades0

*sar el (ot,n t ($ de la barra de botones0

*sar el men? Insert r y opci+n T ($ 0

*sar el men? T ($ con la opci+n insertar

DeDinir $ t ($
;l insertar la tabla nos aparece un cuadro de dilogo que nos permite definir las caracter4sticas de la tabla. En <l encontramos tres pestaas0 &a primera de ellas es $pido, es la opci+n por defecto y nos permite dimensionar la tabla de manera grfica. 3ara ello despla-amos el cursor con el rat+n por la cuadr4cula. *na ve- tengamos la distribuci+n que nos interesa, hacemos clic y tendremos la tabla insertada en la pgina.

"reciso en esta pestaa podremos escribir directamente el n?mero de filas y columnas de que constar nuestra tabla.

!i$ s0 escribimos el n?mero de filas que tendr nuestra tabla. Co$umn s0 lo mismo, pero para el valor de las columnas. Anc5ur 0 ancho de la tabla. 3odremos colocarlo en p47eles, o en el porcenta/e del espacio que ocupar la tabla dentro del elemento donde se encuentre insertada. &orde0 #rosor en p47eles que tendr la l4nea que forma el borde de la tabla, si queremos que sea %invisible% , daremos al borde el valor cero.

Ce$d , en ella podemos aadir ms detalles a los elementos que vayan en el interior de las celdas de nuestra tabla0

A$ine ci,n 6ori'ont $0 indicaremos si irn sin alineaci+n, alineados a la i-quierda, al centro, o a la derecha, seg?n eli/amos del men? desplegable.

A$ine ci,n -ertic $, que puede ser, sin alinear, arriba, al centro, o aba/o, seg?n el valor que eli/amos del men? desplegable ,arcando el apartado "#ustar, permitiremos que el te7to introducido en la celda ocupe varias l4neas, si deseamos que todo el te7to se muestre en una sola l4nea, marcaremos &o a'ustar . En el apartado )sp cio entre $ s ce$d s introduciremos el valor en p47eles que queremos que haya entre las celdas. En el apartado Re$$eno de $ s ce$d s, el valor en p47eles que habr entre los bordes de la celda y su contenido.

1odiDic r t ($ s
=espu<s de insertar la tabla en nuestra pgina podemos modificar sus caracter4sticas mediante el cuadro de dilogo Spropied des de t ($ S. Este cuadro nos permite por una parte modificar las propiedades generales de la tabla y por otra las propiedades de las celdas. 3ara usarlo la tabla o las celdas han de ser previamente seleccionadas. !eleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de $ t ($ $hacer clicA con el (ot,n i'Huierdo de$ r t,n dentro de la tabla' y a continuaci+n desplegar el men? Tabla y elegir la opci+n (eleccionar, dentro de ella tenemos todos los elementos de la tabla seleccionables0 Tabla, Fila, !olumna, !elda, Todas las celdas. 2ambi<n podemos llevar a cabo esta operaci+n pulsando sobre la tabla con el bot+n derecho del rat+n dentro de la tabla. Esto nos ofrecer la opci+n (eleccionar Tabla)

"ropied des de $ t ($
*na ve- seleccionada la tabla debemos abrir el dilogo de propiedades. Esto se consigue mediante cualquiera de los tres m<todos0

El bot+n derecho del rat+n El men? Tabla El bot+n tabla de la barra de men?s

.ualquiera de estas opciones nos lleva al cuadro de dilogo propiedades de la tabla en el que vemos claramente diferenciados cuatro apartados0 el tamao, los bordes y el interlineado, la alineaci+n, y el color de fondo.

En el apartado T m %o, podemos modificar tanto el n*mero de +ilas como el de columnas introduciendo los valores en las casillas correspondientes. 2ambi<n es posible modificar la altura y anchura de la tabla, especificando el valor absoluto en p47eles o el valor relativo en tanto por ciento de la ventana donde se mostrar la tabla.

El segundo apartado permite modificar el grosor del borde e7terno de la tabla, del espaciado entre las celdas de la tabla y tambi<n el relleno o espacio que hay entre los bordes de la celda y su contenidoD todo ello e7presado en p47eles.

En el tercer grupo modificaremos la alineaci n de la tabla, que puede ser a la "-quierda, en el .entro, o a la =erecha del elemento o ventana donde tengamos la tabla. 2ambi<n podemos reservar un espacio encima, deba/o, a la derecha o a la i-quierda de la tabla para posteriormente, una ve- cerrada la ventana de propiedades, ponerle un Ttulo a la tabla.

El ?ltimo de los apartados nos permite poner color al fondo de la tabla, para ello pulsamos en el rectngulo y se nos abre la ventana donde elegir el color.

a hemos aprendido con anterioridad a utili-ar este cuadro de dialogo, si a?n tienes dudas, te recomendamos volver al primer apartado, en donde se e7plica su utili-aci+n... En nuestro e/emplo la tabla tendr4a un aspecto como este0

"ropied des de $ ce$d

=e forma similar a como modificamos las propiedades de las tablas podemos modificar las propiedades de celdas individuales. !e usa un cuadro de dilogo parecido al de las propiedades de tabla y al que se accede de manera similar. 3icamos con el bot+n i-quierdo sobre la celda que vamos a modificar y luego seguimos uno de los siguientes m<todos0

El bot+n derecho del rat+n en la celda En el men? Formato, -ropiedades de !elda de Tabla El bot+n tabla de la barra de men?s

!ea cual sea el m<todo usado llegaremos a un cuadro de dilogo con las propiedades que podemos modificar en la celda seleccionada. El cuadro se parece bastante al usado en propiedades de 2abla. ;qu4 podemos modificar cinco apartados0 &a selecci+n, el tamao, la alineaci+n, el estilo y a/uste, y el color de fondo.

En el apartado 0e$ecci,n encontramos un men? desplegable para indicar si las modificaciones que vamos a reali-ar se van a aplicar s+lo a la celda seleccionada, a la fila o a la columna donde a la que pertenece esa celda $como si hubi<ramos seleccionado toda la fila o toda la columna' El apartado T m %o funciona igual que las propiedades de la tabla, pudiendo introducir en altura y anchura los valores de tamao absoluto en p47eles o relativos en E sobre el tamao de la tabla. 6/o el alto de la celda afecta a toda la fila y el ancho a toda la columna. &a A$ine ci,n del contenido nos permite dos opciones0 A$ine ci,n #ertic l, en la que el contenido de la celda puede situarse en la parte superior, en el centro, o en la parte inferior de dicha celda. A$ine ci,n 5ori'ont $, en la que el contenido puede ser situado a la i-quierda, en el centro, a la derecha, o /ustificado por igual a ambos bordes laterales de la tabla.
A !nea%!ones

IFGu!erda 'uper!or

Centro 8ed!o In*er!or

Dere%<a

En cuanto al estilo de celdas tenemos dos posibilidades, celdas norm $es, que sern la mayor4a de las celdas de la tabla, y celdas c (ecer $suele aplicarse a la primera fila o la primera columna' cuyo contenido aparecer en mayor tamao y en negrita.

El apartado ;Ouste del te7to ofrece dos opciones, una que el te7to ocupe en la celda una sola l4nea, sin importar su longitud, o que ocupe varias l4neas dentro de la misma celda de forma automtica El ?ltimo de los apartados corresponde a la posibilidad de cambiar los !olores de +ondo de las celdas, ya sea de forma individual, o combinndolo con el apartado selecci n, hacerlo por filas o por columnas, seg?n el diseo que hayamos pensado para nuestra tabla. !u uso es similar al que hemos visto en propiedades de tabla.

OTRA0 1ODI!ICACION)0
*na tabla puede modificarse tambi<n en cuanto a su definici+n e incluso en su cuadriculado aspecto, es lo que les da su gran fle7ibilidad. ;s4 podemos0 la insertar y eliminar de tablas, filas, columnas o celdas y la uni+n o divisi+n de celdas.

Insert r e$ementos
;lgunas de las operaciones que solemos reali-ar con las tablas no implican necesariamente el uso de la pantalla de propiedades de la tabla o celda, sino que estn disponibles directamente en algunos men?s, por e/emplo0 inserci+n o eliminaci+n de una tabla completa, de una fila, de una columna o incluso de celdas individuales $no recomendable'. 3ara insert r un Di$ en un t ($ 7 cre d , basta con hacer clic con el bot+n derecho del rat+n sobre una celda cualquiera de la fila que hayamos elegido, y en el men? emergente, dentro de la opci+n Insertar tabla))., marcar la opci+n Fila superior, o Fila in+erior. 6 tambi<n, si el cursor est en la tabla, podemos usar el men? 2abla de la barra de men?s y en la opci+n "nsertar elegir 5ila superior o inferior como en el caso anterior. ;l insertar una fila podemos ponerla por encima o por deba/o de la fila en la que se encuentre el cursor de edici+n en el momento de abrir este dilogo.

=e la misma forma debemos proceder para insert r co$umn s, solo que ahora las columnas se pueden insertar a la i-quierda del cursor $columna anterior' o a su derecha $columna siguiente'. "ncluso podemos insertar una t ($ comp$et dentro de un ce$d . ;l seleccionar esta opci+n $Insert r T ($ < T ($ ...' nos aparecer el ya conocido men? de inserci+n de tablas, que ya se ha visto en esta misma unidad. Y6bservas ahora su utilidadZ

)$imin ndo e$ementos

=e la misma forma que insertamos filas o columnas o celdas en una tabla podemos eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para borrar tablas y sus elementos es uno de los siguientes0

1acemos clic con el (ot,n derec5o del rat+n en cualquier punto del interior de la tabla y en el men? emergente elegimos la opci+n )$imin r t ($ y dentro de <sta, lo que queremos borrar.

!eleccionar previamente la tabla, y despu<s de desplegar el men? T ($ , elegir la opci+n )$imin r y dentro de <sta, lo que queremos borrar.

Com(in ndo ce$d s

Es posible unir un grupo de celdas contiguas y que <stas compartan su contenido. 3or e/emplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de la primera fila. ;lgo parecido podr4amos hacer para ponerle un pie a la tabla. &a opci+n de combinar varias celdas en una sola permite organi-ar el contenido de la pgina web casi en cualquier forma.

El proceso para unir celdas comien-a seleccionando varias celdas contiguas, para ello arrastramos el rat+n sobre ellas con el bot+n i-quierdo pulsado. ; continuaci+n tenemos dos m<todos

3ulsamos con el (ot,n derec5o del rat+n eligiendo en el men? emergente la opci+n Unir ce$d s se$eccion d s.

=esplegamos el men? T ($ y elegimos unir ce$d s se$eccion d s.

&as celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda combinada y seguir una de las habituales caminos0

.on el bot+n derecho se despliega el men+ y se elige Di#idir ce$d .on el men? T ($ se elige la opci+n Di#idir ce$d =

CU)0TION)0 D) DI0)PO
.omo ya lo hemos dicho, las tablas son una importante herramienta para la maquetaci+n de los contenidos dentro de una pgina. ; efectos de diseo podemos diferenciar dos tipos de tablas0

T ($ s contenedor s0 !e utili-an para alinear contenidos con respecto a la pgina y no suelen llevar bordes. T ($ s de d tos0 !uelen ser anidadas $dentro de las contenedoras'. !on las que estructuran el contenido en s4, es decir, los te7tos, las imgenes, etc.

Ac$ r ci,n: ;l utili-ar tablas contenedoras que utilicen todo el ancho de la pgina $:88E de ancho y alto' hay que tener en cuenta que la pgina tiene un ,;>#E( superior e i-quierda... y ese m r;en supondr/ un esp cio entre $ t ($ 7 e$ $imite de $ p/;in en e$ n #e; dor= !i queremos que esa tabla ocupe re $mente e$ QRRS de nuestra pgina tendremos que eliminar cualquier tipo de margen aplicando como # $or de m r;en R en el cuadro de 3ropiedades de pgina.

Reso$uciones de p nt $$ =
&a resoluci+n de pantalla del ordenador responde a la cantidad de p47eles que se visuali-a a lo ancho y alto. &a resoluci+n normal suele ser de TRR B URR p@Be$es. !i algo en nuestra pgina Web supera los X88 p47eles de ancho, el navegador reproducir un scroll hori-ontal, lo cual resulta antiest<tico. 2ambi<n es conveniente que una pgina web se vea bien en resoluciones superiores $QRVW B XUT p@Be$es'. Esto suele ser problema de las tablas de ancho en porcenta/e $E', relativo al ancho de la ventana de documento. ;l variar la resoluci+n var4a el ancho de la ventana de documento. )eamos a continuaci+n como superar este imprevisto0 0o$uci,n: 2raba/ar con tablas contenedoras con ancho relativo $E' y tablas de datos de ancho absoluto $p47eles'. :. El contenido de la pgina $te7to, imgenes,...' se disea en una tabla de ancho absoluto $en p47eles'. =e esta forma el diseo de esta tabla no variara de una resoluci+n a otra. P. .rear una tabla contenedora sin bordes de :88E de ancho y de alto, de solo una celda. Esta tabla ocupar toda la pantalla en cualquier resoluci+n. Q. "nsertar la tabla con valor absoluto $en p47eles' dentro de la celda de la tabla

contenedora. &a alineaci+n de esa celda nos permitir colocar la tabla del contenido en la -ona deseada.

)ATRA: R)!)R)NCIA 6T13:

)tiHuet FTA&3)C
El elemento bsico dentro del cual se desarrolla la tabla son las etiquetas FTA&3)C 7 F<TA&3)C. =entro de la etiqueta de tabla se definen las Di$ s por medio de las etiquetas FTRC 7 F<TRC. finalmente, dentro de la etiqueta de las filas se definen las celdas que tiene por medio de la etiqueta FTDC 7F<TDC. El n?mero de celdas de una fila dar el n?mero de columnas de la tabla. E7iste un tipo de celdas, las celdas de encabe-ado, que se definen con las etiquetas FT6C 7 F<T6C. El te7to que contienen estas celdas estar destacado y centrado en la tabla. E/emplo bsico0 *na tabla de dos filas y tres columnas. &a tabla tiene P88 pi7els de ancho y el borde de la tabla es de un p47el. ) 9 .

Atri(utos de FTA&3)C

&ORD)R0 =ibu/a bordes alrededor de las celdas. !e puede utili-ar con el valor en p47eles que se desee. El grosor del borde solo afecta al borde e7terior de la tabla, no afecta al borde interior de las celdas. C)330"ACIN9IF# $orC0 .ontrola en p47eles el espacio entre celdas. C)33"ADDIN9IF# $orC0 .ontrola en p47eles el espacio entre los datos de las celdas y los bordes internos de las mismas. 8IDT6IF# $or o porcent OeC0 ;nchura que tendr la tabla en valor absoluto o con tanto por ciento respecto al documento 12,&. 6)I96TIF# $or o porcent OeC0 ;ltura que tendr la tabla en valor absoluto o con tanto por ciento respecto al documento 12,&. A3I9N0 ;linea hori-ontalmente la tabla con respecto al documento 12,&. &9CO3OR0 3ermite especificar el color de fondo de la tabla. &ORD)RCO3OR0 3ermite especificar el color de los bordes de la tabla. &ACK9ROUND0 3ermite introducir una imagen de fondo.

&a etiqueta L2=I, que define las celdas, tiene los mismos atributos, e7ceptuando

cellspacing y cellpadding. ;dems, la etiqueta L2=I tiene atributos propios como co$sp n y ro.sp n que se utili-an para combinar la celda con otras adyacentes.

1ARCO0
Introducci,n:

&os frames $marcos o cuadros' permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se carga una pgina html distinta. &as versiones ms antiguas de los navegadores no tienen implementada esta caracter4stica, por lo que no podrn verlos. 3ara crear una pgina con frames, tendremos que hacerlo desde el modo c+digo, tecleando sentencias 12,&, ya que (vu @ KompoZer aun no esta preparado para traba/ar con frames. ; continuaci+n, e7plicaremos los conceptos bsicos para poder aplicarlos, en el apartado >eferencia 12,&. .uando se utili-an frames es muy habitual usar el atributo target en la etiqueta que define un v4nculo $L;I', con este atributo especificaremos en que frame debe cargarse el destino del vinculo, es decir, la pgina vinculada.

R)!)R)NCIA 6T13
)tiHuet s F!RA1)0)TC 7 F!RA1)C
&a pgina del con/unto de marcos es la que contiene el c+digo 12,& con la estructura de los marcos. =ivide la pantalla en secciones rectangulares $marcos' donde se van a mostrar pginas independientes. )eamos un e/emplo de una pgina bsica elaborada con frames0 HFtmlI HFeadI HtitleI&rue!a FramesHJtitleI HJFeadI H@rameset ro sPQ5EARQ colsPQRQ I H@rame srcPQdocumento.FtmQ namePQca!eceraQ scrollin'PQ56Q noresiOe I H@rameset colsPQ)5EARQ I H@rame srcPQ .'oo'le.esQ namePQ'oo'leQI H@rame srcPQ iLipedia.esQ namePQ iLiQI HJ@ramesetI HJ@ramesetI Hno@ramesIH!odBI6oopsSA tu na,e'ador no soporta @rames...HJ!odBIHJno@ramesI HJFtmlI

&as etiquetas F!RA1)0)TC===F<!RA1)0)TC indican d+nde empie-an y d+nde acaban los marcos, y el tipo y forma de estos. Entre una y otra irn las definiciones de los diferentes marcos o frames. &as etiquetas F!RA1)C representan los marcos y sus atributos $pgina web que contienen, mrgenes, scroll, etc.' El body de la pgina est vac4o, no tiene contenido. &as pginas de definici+n de marcos no nos interesan por su contenido, LbodyI, ya que s+lo van a actuar de contenedor. (o es necesario que apare-ca la etiqueta LbodyI, pero es ?til mantenerla0 las etiquetas FNO!RA1)0C F<NO!RA1)0C determinan el contenido de la pgina de marcos si se abre con un navegador que no permite visuali-ar marcos.

Tod p/;in .e( con m rcos se compone de:

*na p/;in de conOunto de marcos. "/;in s p r c r; r en cada marco creado.

Atri(utos de F!RA1)0)TC

co$sIJ===J0 =efine el n[ de columnas o marcos verticales que va a tener la ventana, y el ancho de cada uno de ellos. ro.sIJ===J0 =efine el n[ de filas o marcos hori-ontales que va a tener la ventana, y el alto de cada uno de ellos. Dr me(orderIJ===J0 =efine si los marcos creados van a tener borde o no. (orderIJ===J0 En el caso de que se haya establecido Dr me(orderIJ===J o no se haya especificado, este atributo nos permite definir el grosor del borde (orderco$orIJ===J0 Establece el color de los bordes de los marcos

Atri(utos de F!RA1)C

n meIJ===J0 ;signa un nombre al marco para diferenciarlo. Este nombre cobrar importancia a la hora de determinar en que marco queremos que se abra un enlace, es decir , el destino de los enlaces. srcIJ===J0 Especifica qu< pagina se va a cargar en el frame. &a ruta de la pagina debe especificar su locali-aci+n en el sitio web o una *>& completa. scro$$in;IJ===J0 Establece si el marco tendr o no barra desli-adora cuando el contenido del marco e7ceda al tamao de este. noresi'e0 impide que el marco pueda ser redimensionado por el visitante arrastrando su borde. !i no se indica este atributo el marco podr ser redimensionado. m r;in.idt5IJ===J0 =efine el margen hori-ontal que queremos que haya dentro del frame, entre los l4mites de este y su contenido. m r;in5ei;5tIJ===J0 =efine el margen vertical que queremos que haya dentro del frame, entre los l4mites de este y su contenido. (orderco$orIJ===J0 !irve para definir el color del borde del marco concreto al que se aplica.

!OR1U3ARIO0
3ara crear formularios con KompoZer, abriremos el programa e iremos a la opci+n Insert r @ !ormu$ rio< DeDinir Dormu$ rio.

Entonces aparecer la ventana "ropied des de$ Dormu$ rio:

>ellenaremos los datos del Nom(re de Dormu$ rioD en el campo UR3 de $

cci,n

pondremos en principio0 http,..+orms)melodyso+t)com ya configuraremos el servicio para que env4e las encuestas que hagamos a los usuarios de nuestra web a un correo determinadoD en m<todo seleccionaremos la opci+n "O0T, es decir... EnviarD finalmente, pulsamos Acept r.

"nmediatamente veremos que el programa ha creado un rea punteada, como una celda de tabla de color celeste. Esto nos indica que el formulario est creado con el m<todo de recogida de datos que le hemos especificado. =entro de ese rea comen-aremos a colocar los elementos que nos permitirn recopilar los datos que consideremos de inter<s para nosotros sobre los visitantes a nuestra web.

3ara comen-ar a crear los botones y los te7tos que nos servirn para recopilar informaci+n haremos lo siguiente. 1acemos clic con el rat+n dentro de ese rea punteada en celeste, escribimos por e/emplo (ombre y seleccionamos la opci+n Insert r< !ormu$ rio< C mpo de !ormu$ rio= >ellenaremos la ventana que nos salga con los siguientes datos0 elegiremos un c mpo de teBto, lo nombraremos a efectos de poder reconocerlo posteriormente en el formulario y pulsaremos cept r.

(uestro formulario ir adquiriendo esta apariencia.

3osteriormente podemos repetir la operaci+n para agregar otro campo que sea apellidos y direcci+n de email. >epetimos la misma operaci+n anterior y nombramos a cada una seg?n el dato que queramos recopilar.

2ras estos datos podremos colocar items para que el visitante eli/a una entre varias opciones o varias a la ve- .olocamos la pregunta /0u1 te parece esta 2eb3 y

aadiremos los siguientes items, cada uno con su opci+n0

3ara conseguir estos items, recurriremos a Insert r< !ormu$ rio< C mpo de !ormu$ rio y en el tipo elegiremos c si$$ de #eriDic ci,n.

; cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario, en este caso son opiniones sobre nuestra web.

=e forma que nuestro formulario va adquiriendo esta presencia0

3ara acabar este sencillo formulario podemos colocar un cuadro de te7to para que nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le solicitemos. &a mecnica para el cuadro de te7to ser4a la siguiente0 Insert r< !ormu$ rio< :re de TeBto

&as propiedades de este rea de te7to sern las siguientes0

lo que obtendremos ser algo parecido a esto0

5inalmente solo quedar insertar los botones que harn posible que el visitante env4e el formulario o limpie la informaci+n del mismo por si se arrepiente de enviarlo o por si se equivoca en la consignaci+n de alg?n dato. 3ara insertar los botones haremos lo siguiente0 Insert r< !ormu$ rio @C mpo de !ormu$ rioD seleccionaremos la opci+n (ot,n de en#@o y bot+n de restablecimiento posteriormente, de forma que completemos el formulario. ; cada uno de los botones pondremos sus propiedades.

El formulario quedar de esta manera0

En formato html este e/emplo resultar4a as4.

CA"A0
Introducci,n
*na capa es un contenedor que tiene la peculiaridad fundamental de poder situ rse en cu $Huier punto de nuestra pgina Web. *na capa puede contener cualquier elemento 12,&, te7to, tablas, imgenes, incluso otras capas. 2ambi<n podemos superponer variar capas, de tal manera que la capa que est por encima ocultar a la de aba/o. 6tra propiedad de las capas es la #isi(i$id d, como consecuencia de un evento, podemos mostrar u ocultar el contenido de una capa. 3or todas estas caracter4sticas, las capas tienen dos utilidades fundamentales0 :. !ervir de contenedor s para situar una parte de documento en cualquier posici+n de la pgina. P. .on la ayuda de c+digo Favascript que se desencadena por eventos, permitir eDectos din/micos, por e/emplo men?s desplegables, te7tos que aparecen al situar el rat+n sobre un enlace, te7tos que se mueven siguiendo al puntero del rat+n, etc. En esta lecci+n e7plicaremos el uso bsico de las capas como elementos contenedores.

R)!)R)NCIA 6T13
)tiHuet s DI- 7 0"AN
&as etiquetas 12,& que permiten el uso de las capas son DI- y 0"AN. 2odas las etiquetas 12,& comprendidas entre las correspondientes etiquetas de apertura y cierre configuran la capa. &a etiqueta =") dispone del modificador id que permite dar un nombre a la capa. =ar un nombre a una capa es fundamental para que los programas Favascript puedan acceder a la misma. &as caracter4sticas de la capa se establecen con un estilo $st7$e' dentro de la etiqueta =") de apertura. El uso de la etiqueta =") y !3;( es similar, la diferencia es que la etiqueta =") genera un salto de l4nea anterior y posterior a su contenido, mientras que la etiqueta !3;( no. &a etiqueta !3;( se utili-a para, por e/emplo, crear una capa que contenga algo y se alinee entre dos palabras de un prrafo.

Crear %apas
En KompoZer crearemos capas mediante el bot+n .apa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho bot+n. Funto a este bot+n aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o deba/o de otra. =entro de las capas podemos incluir otras capas, imgenes, te7to formateado, tablas\etc e incluso definirlas con un color de fondo o imagen de fondo.

El problema es que KompoZer aun no esta preparado totalmente para traba/ar con capas, por lo que su uso puede resultar frustrante. =esde el men? !orm to podemos activar la ReOi$$ de posicionamiento que nos ayudara a mover las capas y colocarlas ms precisamente donde deseemos.

En este apartado, KompoZer puede resultarnos bastante incompleto frente a las demas alternativas, pero a?n as4, veamos como crear y modificar una capa0 :. .reamos alg?n contenido para no crear una capa vac4a0

P. !eleccionamos el mismo, y pulsamos sobre el bot+n 4!apa5,

Q. ;hora, podremos modificar el tamao de la misma, as4 como el contenido, mediante la interfa- grfica0

.omo podemos ver, al arrastrarla, nos ofrece informaci+n acerca del tamao de la misma, esto nos permitir a/ustar el tamao de la misma.

V. ;hora, dentro de la misma, podremos insertar todo el contenido que deseemos, tal y como hemos aprendido a lo largo de este tutorial0 o, por e/emplo, he insertado una imagen. 1asta ;qu4, hemos aprendido a crear la capa, y a introducir el contenido deseado dentro. ,i recomendaci+n es continuar leyendo este tutorial, ya que para aplicarle propiedades a los distintos elementos de las mismas, es necesario crear estilos .!!, los cuales estudiaremos en el siguiente apartado, ya que no e7iste, de momento, ning?n men? que nos permita definir las caracter4sticas de las capas ni de sus elementos de forma directa..

C00
6O*A0 D) )0TI3O
Introdu%%!&n )amos a ver qu< son las ho/as de estilos y c+mo usarlas para dotar a los documentos que creemos de una apariencia personali-ada. Es importante que sepamos que para poder sacarles todo el partido posible a las ho/as de estilos, tenemos que tener ciertos conocimientos del lengua/e 12,&. ;s4 que no est de ms tener a mano un manual bsico de 12,&. *na ho/a de estilos o .!! $$Cascade Style S eet$', es un con/unto de reglas y caracter4sticas que, aplicadas a una pgina web o a un con/unto de ellas, pueden modificar su apariencia. =e esta forma, podemos separar en cierta forma el diseo de la pgina de su contenido. #racias a las ho/as de estilos podemos de alguna manera homogenei-ar y automati-ar el traba/o que supone el diseo de una Web. 3odemos definir un estilo para los t4tulos y otro para el te7to, de forma que no tengamos que modificar cada ve- el te7to y los t4tulos para que tengan la apariencia que queramos. *na ho/a de estilos puede estar contenida en la misma pgina donde se utili-a o puede estar definida en un archivo aparte. =e la segunda forma, podemos definir estilos para todo el sitio web, mientras que de la primera tendremos que escribir el mismo c+digo en cada pgina cada ve- que lo necesitemos. 3or eso la primera se utili-a cuando se quiere aplicar alg?n efecto en particular y la segunda cuando ese efecto es el mismo para todas las pginas. E7iste una tercera posibilidad, y es especificar el estilo en la propia etiqueta 12,& d+nde queramos usarlo, con lo que el efecto s+lo se producir en ese lugar. Esto implica conocer c+digo 12,& y las propiedades que queramos cambiar. Esto tendr4amos que repetirlo para cada elemento del te7to cuyo estilo deseamos cambiar. 3or ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas. Estas formas tambi<n requieren conocer 12,&. 3or ello KompoZer nos facilita el uso de estilos por medio de las plantillas, que nos permite usar ho/as de estilo con pocos conocimientos de 12,&.

R)!)R)NCIA 6T13
Introducci,n
&as 1o/as de estilo en cascada o esti$os C00 $.ascade !tyle !heet' permiten controlar el diseo y el aspecto de las pginas aumentando las posibilidades en cuanto a colores, tipos, tamaos y posicionamiento de cualquier tipo de ob/eto html, ya sea te7to, imagen, tabla o campo de formulario $lo que sea que se pueda identificar con una etiqueta html'. !e puede definir una 5oO de esti$o como una co$ecci,n de re;$ s Hue Dect n p rienci de un documento o p rte de$ mismo= &as venta/as que presenta el uso de .!! son0

Contro$ so(re e$ dise%o de $ p/;in 0 con los estilos .!! se separa el contenido de la pgina web, un documento .html, de todas las reglas referidas a su diseo y aspecto, que estn separadas en un documento e7terno he independiente con e7tension .css. Actu $i' ci,n utom/tic de$ dise%o0 empleando ho/as de estilo se puede modificar la ho/a de estilo individual y cambiar la apariencia de un sitio web completo. Discreci,n0 los navegadores ms antiguos no pueden entender las reglas de las ho/as de estilo pero no dan errores, simplemente las ignoran. =e este modo no se mostrarn los efectos de diseo asignados pero s4 el te7to bsico de las pginas y la apariencia del 12,&.

Termino$o;@ emp$e d en C00

3ara comprender el funcionamiento de las ho/as de estilo en cascada es necesario conocer los t<rminos empleados en las mismas0

"ropied d
*na propiedad es una caracter4stica de un elemento que puede verse modificada mediante una ho/a de estilo. 3or e/emplo co$or o teBtYtr nsDorm. Estas propiedades son muy numerosas permitiendo cambiar muchas caracter4sticas que hasta ahora no era posible.

- $or
)alor es el dato que se asigna a una determinada propiedad. 3or e/emplo Z!!!!!! es un

valor para el color y upperc se es un valor de la propiedad te7t%transform.

Dec$ r ci,n
*na declaraci+n esta formada por una propiedad y su valor. &a declaraci+n comien-a por el nombre de la propiedad seguido de dos puntos y a continuaci+n del valor de la propiedad. En nuestro e/emplo co$or: Z!!!!!!N y teBtYtr nsDorm: upperc seN son dos declaraciones.

0e$ector
*n selector es una etiqueta estndar de 12,& o un nuevo nombre escrito por nosotros al cual se le quiere asignar una declaraci+n. 3or e/emplo0 p, 1:, strong son selectores del 12,&.

Re;$ de esti$o
*na regla es un selector /unto con la declaraci+n, por e/emplo, 1:]color0ro/o^. ;l crear reglas es posible agrupar selectores y declaraciones. *n e/emplo de regla con dos declaraciones ser4a0 stron; [ co$or: Z!!!!!!N teBtYtr nsDorm: upperc seN \ 3ara separar las declaraciones se utili-a punto y coma. 2ambien se pueden agrupar los selectores como en este e/emplo 6QG6V[co$or:roOoNDontYD mi$7: ri $\ 2anto los h: y hP sern mostrados de color ro/o y tipo de letra arial. En este caso se utili-a la coma para separar los selectores.

6oO de esti$o
*na ho/a de estilo es un con/unto de reglas que definen completamente el aspecto de todos los elementos de la pgina.

Co$oc ci,n de $ s re;$ s de esti$o

&as reglas de estilo pueden ir colocadas0 :. Dentro de un etiHuet indi#idu $= Letiqueta !2 &ERSpropied dQ:# $orN===Npropied dN:# $orSI ...te7to... L@etiquetaI Estas reglas s+lo afectan a una etiqueta particular. (o se utili-an las llaves para escribir las declaraciones sino que se escriben entre comi$$ s dentro de$

modiDic dor 0TK3). Este tipo de colocaci+n es el que implementa KompoZer a las capas en cuanto a tamao y dems cuando las modificamos mediante la interfagrfica.

P. ADect ndo

tod $ p/;in =

)an colocadas dentro del 1E;= de la pgina, entre dos etiquetas L!2 &E typeRSte7t@cssSI ..reglas...L@!2 &EI y afectan a todas las etiquetas del mismo tipo que apare-can a lo largo de la pgina. Q. )n un rc5i#o eBterno $$ m do 5oO de esti$os cu7 eBtensi,n es =C00 &o ms interesante es coger todos los estilos que vayamos a utili-ar en un web y e7traerlos a un archivo e7terno en donde almacenamos esas reglas de estilo. Esos archivos tienen e7tensi+n .!!. 3ara vincular las pginas al formato definido en el archivo .!! hay que colocar en cada una de ellas una etiqueta como esta dentro del 1E;=0 L&"(K >E&RSstylesheetS 2 3ERSte7t@cssS 1>E5RS rc5i#o=cssSI =onde archivo.css contiene las reglas de estilo. =e esta forma conseguimos establecer el formato uniforme para todas las pginas y adems cualquier cambio que hacemos en la ho/a de estilos se ve refle/ado de forma inmediata en todas las pginas que usen esta ho/a de estilos. Es por eso que es la opci+n ms utili-ada.

Us r 5oO s de esti$o en c sc d
KompoZer dispone de un editor de ho/as de estilo denominado C 0c de0 $.!!, .ascade !tyle !heets'. .a!cade! puede ser utili-ado para producir tanto ho/as de estilo internas como e7ternas. ; diferencia de los estilos incrustados, las ho/as de estilo internas o e7ternas ayudan a mantener separadas la informaci+n del contenido de la del estilo..a!cade! permite dos modos de edici+n de ho/as de estilo0 a' 1odo p r principi ntes0 este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento. 1odo # n' do0 este modo permite crear reglas sin restricciones. 3ara proporcionar estilo al documento html que se edita, .a!cade! puede iniciarse

haciendo clic en el men? 6err mient s y seleccionando )ditor C00, apareciendo la siguiente ventana a continuaci+n.

En KompoZer contamos con un bot+n espec4fico para activar la 1o/a de estilos .!!, se trata del icono .as.ade!0

3ara crear una 5oO de esti$o intern 0

:. =e/aremos por defecto la opci+n *>&$ninguna, incrustado en el documento.

). T6pcionalU Rellenaremos la in@ormacin so!re 3ista de medios B 1Dtulo de la FoMa de estilo.

P. =aremos clic en Crear <oja de est! o.

3ara crear una 5oO de esti$o eBtern 0

:. 3ulsamos el icono E7portar ho/a de estilos y cambiar a la versi+n e7portada0

P. !eleccionamos el fichero en cuesti+n, !i no e7iste ya, se crear un nuevo fichero en el sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo $nombre.css'

o T6pcionalU Rellenaremos la in@ormacin so!re 3ista de medios B 1Dtulo de la FoMa de estilo.

Q. ;ctivaremos comprobar al crear una ho/a de estilo alternativa si <sta es una alternativa.

ConseOo: guardaremos siempre el documento html antes de agregar una ho/a de estilo local. #uardaremos tambi<n el documento inmediatamente antes de cerrar el editor .!!. ConseOo: utili-aremos el bot+n >ecargar del panel de la i-quierda si la ho/a de estilo no se descarga inmediatamente.

Cre r re;$ s de esti$o

=espu<s de crear una o ms ho/as de estilo para el documento html, se pueden crear reglas para cada ho/a de estilo de forma individual. 3ara usar una ho/a de estilos concreta al crear o modificar reglas, selecci+nela en el panel de la i-quierda haciendo clic sobre ella con el bot+n i-quierdo del rat+n. El panel de la derecha mostrar entonces los detalles de la ho/a de estilo en la pestaa #eneral. 3ara crear reglas nuevas0 :. 1aremos clic en el bot+n Re;$ del panel de la i-quierda. P. El panel de la derecha mostrar opciones para especificar el tipo de regla a crear. Elegiremos una entre las siguientes0

estilo con nombre $introdu-ca aba/o el nombre de la clase' estilo aplicado a todos los elementos del tipo $introdu-ca el tipo aba/o' estilo aplicado a todos los elementos coincidentes con este selector

Q. >ellenaremos el nombre de la regla. V. 1aremos clic en Cre r re;$ de esti$o.

En la parte derecha de esta pantalla de 1o/a de estilos .!!, aparer el elemento creado con el proceso anteriormente descrito.

&as reglas pueden ser definidas usando las pestaas de estilo $2e7to, 5ondo, Bordes, .a/a, ;ural' del panel de la derecha. 3ara ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la i-quierda y haremos clic en la pestaa 9ener $ del panel de la derecha. &a pestaa 9ener $ mostrar todas las definiciones aplicadas a la regla.

)ATRA: )0TI3O0 CA"A0

.omo hemos dicho en el apartado anterior, vamos a aprender a aplicarle estilos a las capas. 3ara personali-ar una capa tendremos que crear un nuevo estilo, en mi caso, se llama Uencabe-ado, y aplicarle todas las propiedades que queramos aplicarle a la capa0

&uego, solo tendremos que modificar mediante la vista del codigo fuente, el nombre de la capa. Esto se consigue agregando dentro de la etiqueta di# el comando idRNnombredelacapaN0

;hora, observamos los resultados obtenidos en el modo vista preliminar0

"U&3ICACIN D) ":9INA0 8)&

KompoZer est pensado para traba/ar directamente sobre el sitio web en "nternet, aunque tambi<n puede traba/ar con archivos en el sistema local.

ConDi;ur ci,n de pu($ic ci,n

3ara organi-ar todos los archivos, lo primero es crear un sitio web. 3ara ello, seleccionar la opci+n de men? )dit r< ConDi;ur ci,n de pu($ic ci,n, o bien, desde el panel i-quierdo ;dministrador de sitios de KompoZer, seleccionar el bot+n Editar sitios, se mostrar una ventana para gestionar los sitios web0

En la -ona i-quierda se muestran los sitios definidos, y en la -ona derecha, las propiedades del sitio seleccionado.

3ara crear un nuevo sitio, seleccionar el bot+n Nue#o sitio, los campos de la derecha se pondrn en blanco para que sean rellenados0

Nom(re de$ sitio0 nombre del sitio que se va a crear $2utorial Kompo-er'. Es un te7to que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo. Direcci,n 6TT" de su p/;in inici l0 *>& de la pgina de inicio del sitio web. En caso de que se desee traba/ar en el sistema local, la direcci+n ser de tipo file:///home/usuario/sitioweb/index.htmlD Nom(re de usu rio0 nombre del usuario. Esta informaci+n la suministra el servidor donde se alo/a la pgina. Contr se% 0 contrasea del usuario. Esta informaci+n la suministra el servidor donde se alo/a la pgina

3ara eliminar un sitio, selecci+nelo de la lista y pulse el bot+n Eliminar sitio. 3ara establecer un sitio predeterminado, selecci+nelo de la lista y pulse el bot+n !eleccionar como valor predeterminado. El nombre del sitio se pondr en negrita indicando que es el predeterminado. *na ve- definido el sitio web, en el panel de la i-quierda se mostrarn todos los archivos y sub%carpetas e7istentes. 1aciendo doble pulsaci+n sobre un archivo, se abrir en una solapa nueva de la -ona de traba/o. !i se hace pulsaci+n doble sobre una carpeta, se mostrar el contenido de la misma.

"U&3ICAR NU)0TRA 8)&

*na ve- configurado el sitio de publicaci+n tal y como se describi+ en el apartado precedente, podremos publicar pginas en "nternet y editar las ya publicadas. 3ara ello es recomendable que previamente se visualice la ventana del ;dministrador de sitios $1enu -er _ 1ostr r Ocu$t r _ Administr dor de sitios'.

3ublicar es similar a cuando guardamos las pginas en nuestro disco duro, con la diferencia que se guardaran en un servidor, el que configuramos en el administrador de sitios. .on el bot+n 3ublicar $o men? archivo _ publicar ' colocaremos las pagina en "nternet $si queremos tambi<n podemos guardarla en nuestro disco duro, como hemos hecho hasta ahora'. .omo puedes comprobar, cuando pulsamos el icono aparece un panel en el que podemos especificar varios datos0

!eleccionar el sitio de publicaci+n si tenemos varios creados "ncluir el t4tulo de la pgina y el nombre con el que se publicar, aunque estos datos se e7traern de la propia pgina.

=esde el ;dministrador de sitios tambi<n podremos modificar las pginas ya publicadas en "nternet, basta con seleccionar el archivo que queremos modificar y se ba/ara directamente de "nternet a nuestro programa de edici+n, KompoZer. *na ve- modificada, volveremos a publicarla para que apare-ca con los nuevos cambios reali-ados.

CON0)*O0 A T)N)R )N CU)NTA

!iguiendo las indicaciones del WQ. $consorcio internacional que se ocupa de normali-ar el uso del 12,&' =octype debe ser el primer elemento que abra un documento. Esto quiere decir que deber4a preceder a L12,&I.!e trata de una marca que no necesita cierre y cuya funci+n es facilitar informaci+n al servidor Web que alo/a la pgina. &a informaci+n facilita por =6.2 3E se refiere al tipo de documento visuali-ado adems de ser necesaria para la comunicaci+n entre navegador y servidor. =6.2 3E se debe escribir de forma estndar0<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">. Esta l4nea proporciona algunos datos sobre el documento0

6T13 "U&3IC0 el documento es p?blico I)T!0 el tipo de 12,& p?blico est gestionado por la "nternet Engineering 2asA 5orce DTD 6T13 W=R0 la versi+n de 12,& soportada es la V.8 )N0 el idioma del documento es el ingl<s

El uso de =6.2 3E no es obligatorio y puede omitirse. !eguramente su uso ayuda al servidor web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta visuali-aci+n.