libro webmaster profesional - diseño,administracion y optimización de sitios web [espaÑol].pdf

8/20/2019 Libro Webmaster Profesional - Diseño,administracion y optimización de sitios web [PDF] [ESPAÑOL].pdf

1/56

Diseño

del sitio y CSS

¿Cuáles son las diferenciasy ventajas de la utilizaciónde HTML, XHTML y CSS? 14¿Qué aplicaciones pagasy gratuitas existen paradiseñar y administrarun siti o web? 19¿Qué herramientas nos ayudana elegir la paleta de colorespara un sitio? 24¿Qué tipografías pueden utilizarseen el diseño de un sit io weby cuáles son las recom endadas? 28¿Cómo visualizar los sitiosque no muestran los caracteresde manera cor recta? 30¿Cómo se pueden definir estilosde texto para t odas laspáginas de un sitio? 33¿Qué efec tos es posible apl icara los links de una página y cóm o sepueden establecer para un si t io? 39¿Qué aspectos deben considerarsepara diseñar y establecer el formatode las tablas de un sitio? 45¿Cómo es posible cr ear unacapa y ubicar la dentro de otra? 48¿Es posible mostr ar una capa conuna transparenc ia de fondo? 51¿En qué casos se recomiendadiseñar una páginacon dim ensiones fijas y cuándo,con porcent uales? 54¿Cuál es la m ejor f ormade establecer los márgenesde una página y sus elem entos? 58¿Cómo soluci onar l os problemas decentr ado del sitio web en diferent esresoluc iones de pantalla? 59¿Cuáles son las diferentesopciones de menús que sepueden cr ear al uti lizar CSS? 62Resumen 67Actividades 68

Capítulo1

Para comenzar a dar respuesta

a las dudas y problemas

más frecuentes que enfrenta

un diseñador o un desarrollador

de sitios web, en el primer capítulo

de este libro, abordaremos

las soluciones relacionadas

con el diseño del sitio, trabajo

con tablas, utilización de capas,

creación de diferentes tipos

de menús y aplicación de estilos CSS.

Webmaster profesional

SERVICIO DE ATENCIÓN AL LECTOR: [email protected]


2/56

¿Cuáles son las diferencias y ventajas de lautilización de HTML, XHTML y CSS?Para lograr comprender cómo funciona Internet y las tecnologías que

conviven en su infinita telaraña, es importante conocer su evolución; nace como

un proyecto militar denominado ARPANET . Este desarrollo se concreta en1969, año en el cual se produce la primera transmisión por esta vía. A principiosde la década del setenta, cuando aún la conectividad era muy rudimentaria, Ray Tomlinson crea el correo electrónico, una invención que, renovaciones me-diante, se mantiene vigente hasta nuestros días. Hacia fines de la década delochenta, Internet logra su punto de inflexión, cuando se crea lo que conocemoscomo World Wide Web o WWW .

Figura 1 . La entidad que determina los estándares que se util izan

en la Web, World Wide Web, es conocida como W3C

(World Wide Web Consortium) y se encuentra en la dirección www.w3.org .

HTMLCon la llegada de la World Wide Web, fue fundamental contar con un lenguaje que se transformara en un estándar en la construcción de páginas web. A prin-cipios de la década del noventa, nace el HyperText Markup Language, nom-bre que podría traducirse como lenguaje de marcado (o etiquetado) de hipertexto,

HTML. Aún hoy es la base de las páginas web que vemos en Internet, poten-ciado con las ventajas que ofrecen las nuevas tecnologías.HTML utiliza etiquetas que permiten enriquecer o agregar contenido adicional,

1. DISEÑO DEL SITIO Y CSS

14 www.redusers.com


3/56

al estructurar texto y otros elementos que conoceremos más adelante. Cabedestacar que no es un lenguaje de programación ya que, entre otras cosas, nopuede ofrecer las funciones y el trabajo con variables, que sí brindan los lenguajes de programación. La ventaja del HTML es su versatilidad para trabajar con

distintos lenguajes y tecnologías. Por eso, a pesar de sus limitaciones, mantienesu importancia en el armado de sitios web.Dentro de un documento HTML, se puede agregar código de lenguajes, comopor ejemplo Javascript . También, es posible incluir etiquetas para mostrar imá-genes, hipervínculos, películas Flash o reproductores multimedia. Por otra par-te, los desarrolladores que trabajan con PHP, ASP o .NET tienen la posibilidadde incluir fragmentos de código HTML dentro de la programación, para ofrecerdatos al usuario y realizar representaciones en pantalla.

Para poder visualizar un documento HTML, se necesita un software capaz de in-terpretarlo. A este tipo de aplicaciones, se las conoce como navegadores, dentrode los que se pueden mencionar, con sus diferentes versiones: Internet Explorer,Mozilla Firefox, Google Chrome, Safari y Opera, entre otros. En el capítulo 3 deeste libro, analizaremos la compatibilidad de un sitio con estos.

Figura 2. La mayoría de los navegadores modernos ofrecen

una opción para mostrar el código fuente de las páginas web.

El lenguaje HTML ha evolucionado a través de los años y es identificado por versiones.Su revisión actual es la 4.01, que fue dada a conocer en el año 1999. HTML5 aún está en desarrollo. En la tabla 1, veremos las etiquetas más importantes de este lenguaje.

¿Cuáles son las diferencias y ventajas d e la u ti l ización de HTML, XHTML y CSS?

15www.redusers.com


4/56

ETIQUETA HTM L DESCRIPCIÓN DE SU FUNCIÓN4

< ! DOCTYPE> Perm ite estab lecer e l t ip o de docum ento.

< h tm l> Ind ica el in icio del cód igo HTM L.

< head> Estab lece el com ienzo del encab ezado del docum ento .

< t it le> Se inc luye dentro de la cabecera y sirve para ind icar el t ítu lo d el docum ento.Por lo general, este dato puede verse reflejado en la barra de título

del navegador a l acceder a una página.

< link> Perm ite vincula r iconos o arch ivos externos, com o por e jem plo hojas de estilo .

Se def ine dentro del encab ezado.

< style> Se u t il iza para d efin ir los est ilos CSS y cód igos Javascrip t que se incluyen

dentro del documento. Se ubica dentro del encabezado.

< scrip t> Esta et iqueta se u til iza con el fin de incorporar un cód igo scrip t.

< body> Ind ica el com ienzo del cuerpo del docum ento y envuelve el con tenido

que se m uestra en la ventana del navegador.

< h1 > Estas et iquetas, que se u t il izan dentro del cuerpo del docum ento ,

< h2 > perm iten d efin ir los d ist intos n iveles de títu lo que adm ite el estándar

HTML. es el de ma yor impo rtancia, y , e l de menor jerarquía.

< h 4 >

< h 5 >

< h 6 >

< p> Define un párra fo .

< blockquote> M ed iante esta et iqueta, es posib le asignar una sangría al texto .< b r> Con esta opción , se agrega una l ínea en b lanco en el flu jo . Actúa com o

si fuera creada con Enter en un procesador de texto.

< a> Perm ite defin ir la d irección de un en lace y el texto que éste m uestra

en pa ntal la, entre otras opciones.

< tab le> Posib ili ta defin ir una tab la . Dentro d e el la, se u ti l iza < tr> para crear

una f i la y para una celda.

< d iv> Envuelve el área de un conten ido . Se ut il iza para la construcción de capas.

< fram e> Se em p lea para defin ir un m arco. Traba ja jun to con < fram eset> , que determ ina

el conjunto de ma rcos. Por otra parte, la et iqueta < i f ram e> p ermi te insertarun marco en el documento, s in necesidad de que pertenezca a un conjunto.

< fo rm > Envuelve los elem entos de un form ulario .

< im g> Esta et iqueta es u til izada para m ostra r una im agen en panta lla .

< b> Se u t il iza para envo lver texto en negrita o b old . En la actua lidad , se extiende

la opción de reemp lazar esta et iqueta p or , que fuerza al navegador

a dar énfasis o reforzar el texto destacado, por lo general, al mostrarlo en negrita.

< i> Se u t il iza para envo lver texto en itá lica o cursiva .

< u> Se em p lea para envo lver texto sub rayado.

Tabla 1. Código de las etiquetas HTML

m ás im portantes y descripción de su función.


16 www.redusers.com


5/56

Por lo general, en HTML se encierra contenido con etiquetas de apertura y decierre: por ejemplo, para marcar un texto en cursiva, se debe escribir Texto amostrar. Algunas etiquetas especiales, como puede ser
, no envuelven uncontenido, por lo cual no necesitamos cerrarlas.

XML y XHTMLXML, cuyas siglas significan eXtensive Markup Language, es considerado comoun metalenguaje que define reglas, al permitir que otros lenguajes se basen en ellas.Su desarrollo pertenece al World Wide Web Consortium ( W3C).

Figura 3. Cuando ingresamos en www.w3c.es/ divulgacion/ guiasbreves/ tecnologiasXML,

encontramos una guía de XML en castel lano, publicada por la oficina española de W3C.

El término en inglés eXtensible Hypertext Markup Language es un estándarconocido como XHTML y cuya traducción al castellano es lenguaje extensible de marcado de hipertexto. Éste utiliza etiquetas, al igual que el HTML, pero exigemayores requisitos en cuanto a estructura y formación de los documentos, tal co-mo lo establecen las reglas del XML.

¿Cuáles son las diferencias y ventajas d e la u ti l ización de HTML, XHTML y CSS?

17www.redusers.com

❘ ❘ ❘

ASP es una tecnología que fue creada por Microsoft. Permite el desarrollo de páginas web que

son procesadas e interpretadas por un servidor que devuelve un resultado al cliente, para ser

visualizado en el navegador. ASP significa Active Server Pages, que en castellano puede tradu-cirse como páginas activas de servidor .

¿QUÉ ES ASP?


6/56

CSSUno de los conceptos que ha crecido de manera notable en el mundo del diseñoweb, es la utilización de hojas de estilo (Cascading Style Sheets ) conocidas comoCSS. Las características que ofrece CSS resultan muy prácticas para el armado de

un sitio, ya que permiten realizar una separación entre lo que es la estructura delcontenido y la forma de representarlo en la pantalla.Es importante destacar que, si bien algunas de las características que ofrece CSS tam-bién pueden lograrse mediante HTML, CSS ofrece una mayor cantidad de efectosy opciones para personalizar textos y elementos en general, lo que representa otra de las ventajas de integrar esta opción en el diseño de las páginas o de un sitio web.Por sus características, CSS puede incorporarse en un documento HTML o XHTML, o bien incluirse como un archivo aparte. Existen dos formas de incor-

porar CSS en un documento HTML. La primera consiste en declarar los estilosy sus características en la cabecera del documento (entre las etiquetas y ). Esta opción puede ser útil para definir los estilos que tendrá sólo una página en particular y no serán utilizados en otras.La segunda alternativa es incluir los estilos y sus propiedades dentro del cuerpo delHTML, es decir dentro de las etiquetas y . Se recomienda desestimarel uso de esta opción, ya que no colabora con la separación de la estructura, debidoa que no permite tener todos los estilos en un solo lugar para ser modificados.Para trabajar con estilos en un sitio, en especial cuando se utilizan en varias páginas

o se procede a integrarlos con lenguajes de programación, es recomendable colocarlos estilos en un archivo específico, tal como veremos en el punto 6 de este capítulo.

Figura 4. Algunos navegadores, como Internet Explorer o Mozilla Firefox, permiten desactivar

los estilos de un sitio para lograr una visualización de él sin t ener esta característica habilitada.


18 www.redusers.com


7/56

¿Qué aplicaciones pagas y gratuitas existen paradiseñar y administrar un sitio web?Si contamos con el suficiente conocimiento de HTML, la creación de

una página web puede llevarse a cabo con un simple editor de texto, como pue-

de ser el Bloc de notas de Windows. En este caso, sólo debemos escribir el có-digo que deseamos utilizar y guardar el archivo con extensión HTM o HTML.Estas aplicaciones que permiten editar texto plano, son suficientes para crear una página web. Si bien esta afirmación es válida, hay que tener en cuenta que, para afrontar desarrollos de mayor complejidad, esta alternativa no nos ofrece dema-siada ayuda. La elección entre un tipo de editor y otro se basa, principalmente,en el conocimiento que tenemos sobre el lenguaje HTML. Las ventajas de tra-bajar con este tipo de editores es que no nos encontramos limitados por el nú-

mero de opciones que tiene la aplicación.Si nuestro deseo es trabajar con código, para luego probarlo en un navegador, una opción que nos ayudará en gran medida consiste en buscar un editor que reco-nozca las etiquetas HTML y nos ofrezca ayuda en su creación. Dentro de esta ga-ma de aplicaciones, encontraremos software gratuito que permite editar código.UltraEdit es un potente editor de código capaz de trabajar con XHTML,HTML, PHP, Java, Javascript y Perl, entre otros lenguajes. Permite indentadoautomático, Drag & drop y chequeo de palabras mientras se escribe, entre otrasopciones. Se puede obtener una versión trial desde www.ultraedit.com/

downloads/ultraedit_download.html.

Figura 5. Las características de UltraEdit lo ubican como

una excelente opción tanto para el uso personal como profesional.

¿Q ué ap l i c ac i ones pagas y g ra tu i t as ex is t en pa ra d i s eña r y adm i n i s t r a r un s i t i o w eb?

19www.redusers.com


8/56

PSPad es un editor que cuenta con una licencia freeware y es apto para correr ensistemas Windows. Reconoce sintaxis de diferentes lenguajes, y las resalta con co-lor. Entre los lenguajes soportados, se encuentran HTML, XHTML, PHP, Perl,VBScript, Java y JavaScript, entre otros. Para descargar los archivos relacionados con

este programa, debemos acceder a www.pspad.com/es/download.php.La opción de trabajar con editores resulta muy útil para quienes tienen experien-cia en programación o si se necesita realizar ajustes puntuales. Sin embargo, para los diseñadores web, armar un sitio desde línea de código puede resultar poco ami-gable. Como respuesta a este problema, se adoptó el concepto WYSIWYM para aplicaciones de edición de páginas web. Estas siglas, que en inglés significan What You See Is What You Mean, hacen referencia a que lo que se ve en pantalla eslo que se obtiene como resultado. Este modelo, mucho más visual que el ofreci-

do por un editor de código, es el que se impone hoy por hoy en el mundo del di-seño web. La tendencia actual también marca que cada vez son más los progra-mas de este tipo que permiten trabajar en tiempo real con la vista simulada y la línea de código, para brindarle mayor versatilidad al usuario.

Los programas WYSIWYMExiste una variada oferta entre los programas WYSIWYM. Desde aquellos gratui-tos, disponibles para diversas plataformas, hasta potentes suites multimedia de uso

profesional, pensadas para el trabajo individual o en equipo.

Programas gratuitosDentro de las aplicaciones gratuitas, se destaca WYMeditor, un editor open sour-ce (código abierto) que puede trabajar con XHTML y CSS, además de integrarsecon ASP, PHP y Javascript. Al ser una alternativa open source, soporta la inclusiónde plugins, skins y es adaptable en su totalidad a las necesidades del desarrollador.Para descargarlo, hay que ingresar en www.wymeditor.org/download.KompoZer es otra aplicación libre que permite la edición de páginas HTML.Presenta gran facilidad de uso y puede ser manejado por todo tipo de usuariosque deseen armar un sitio web.


20 www.redusers.com

❘ ❘ ❘

PHP es un lenguaje de programación de páginas dinámicas muy difundido en Internet, cuya

primera versión fue lanzada a mediados de la década del noventa. Las páginas desarrolladas

en PHP se alojan en servidores web que interpretan el código ante un requerimiento del usua-rio, para poder ofrecer el resultado en un navegador.

¿QUÉ ES PHP?


9/56

Figura 6. KompoZer es una aplicación que resulta compatible con Windows,

Linux y Mac OS X. Puede ser descargada desde el sitio web: htt p:/ / kompozer.net .

Adobe DreamweaverEn el ámbito profesional, Dreamweaver ha logrado ubicarse en un lugar de privilegioentre las preferencia de los usuarios. En su origen, este programa fue desarrollado poruna empresa llamada Macromedia y lanzado en el año 1997. A raíz del éxito alcanzadopor sus versiones posteriores, Adobe adquirió los derechos del programa y es esta

empresa la que, en la actualidad, tiene en sus manos el desarrollo del producto. La ver-sión CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ven-tajas que ofrece Dreamweaver, se destaca su alto grado de personalización en las vistas,el agregado de nuevas funcionalidades, vista de código con marcado y ayuda de sintaxis.

Figura 7. Dreamweaver permite editar y crear archivos que util izan

código HTML, XML, ASP, PHP, CSS y JavaScript , entr e ot ras opcion es.


21www.redusers.com


10/56


11/56

Figura 9. Para obtener Microsoft Expression Web se debe ingresar

en www.microsoft.com/ spain/ expression/ try-it/ Default.aspx y hacer

cl ic en el botón Evaluar , correspondiente al producto elegido.

Con podemos acceder a una plataforma de edición y creación de pági-nas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibili-

dad de editar y validar código. Este producto cuenta con dos versiones: XML Editor y XML Author. Para acceder a la descarga de una versiónde evaluación, hay que ingresar en www.oxygenxml.com/download.html.

Figura 1 0. ofrece opciones m uy completas para t rabajar con desarrol los

web, tanto para crear y editar archivos, como para manejar proyectos.


23www.redusers.com


12/56

¿Qué herramientas nos ayudan a elegir la paletade colores para un sitio? Aunque para muchos parezca una tarea trivial, la elección de la paleta de

colores que se utilizará en un sitio web consiste en una labor que debe realizarse con

cuidado, ya que una mala elección puede deslucir de manera considerable el resul-tado final. Es parte clave del trabajo de un buen diseñador poder captar la esencia de un sitio, para plasmarla en la combinación de colores que mejor se adapte al es-tilo concordante con los contenidos que se desean transmitir.

Cómo transmitir sensaciones a través de los colores Además de su función estética, los colores permiten transmitir sensaciones. Una po-

sible separación que se puede hacer entre ellos, es ubicarlos como cálidos o fríos.Los colores cálidos son los que transmiten un clima íntimo y cercano. Tambiénpueden dar una sensación de pasión y calidez. Dentro de esta clasificación se en-cuentran los tonos del amarillo, naranja y rojo. Un claro ejemplo de esto son el soly el fuego, representados por los colores mencionados.Por su parte, los colores fríos son aquellos que sirven para marcar distancias y, enalgunos casos, describir situaciones de tristeza. Entre los colores que se ubican eneste rango, se encuentran azul, cian, violeta y verde, en especial en sus tonos másapagados. Para dar un ejemplo de esto, se dice que son algunos metales, fuertemente

identificados con el frío, los que suelen tomar estos colores como base. Al elegir un color, se debe tener muy presente su tonalidad, luminosidad y satura-ción, para ubicarlo en el lugar apropiado y mantener la armonía del diseño.

Colores RGBPara determinar los colores de un sitio web, es fundamental tener en cuenta queel resultado de nuestro diseño será visto en una pantalla, ya sea un monitor obien la de un dispositivo móvil. Por tal motivo, la elección de colores debe rea-lizarse sobre la base de una composición RGB. En HTML, los colores RGB pue-den ser representados en modo hexadecimal con el símbolo # antepuesto. Por


24 www.redusers.com

Frontpage es un editor de páginas web, cuyo desarrollo estuvo en manos de Microsoft a

partir de mediados de la década del noventa. Logró cierta popularidad en aquellos años,

acompañado por el crecimiento que Internet adquiría en todo el mundo. En la actualidad, seha discontinuado y cedió su lugar a Expression Web.

FRONTPAGE


13/56

ejemplo, el color rojo se representa como #ff0000 y el amarillo como #ffff00.Color Cop es una aplicación libre que permite obtener el valor de colores quedespués se puede utilizar en el desarrollo de páginas web o en otras aplicaciones. Al ingresar en la dirección del sitio: http://colorcop.net/download, tenemos la

posibilidad de descargar el software para su utilización.

Figura 11. Para quienes uti l izan editores web del t ipo WYSIWYM, como

Dream weaver , la e lección de un co lor resul ta m ucho más senci l la ,

ya que el program a ofrece una paleta a la vista para elegir e l tono deseado.

Sitios web para elegir paletas de coloresCOLOURlovers es un sitio web que brinda la posibilidad de elegir colores, pa-letas y diseños de patrones ( patterns ). Este espacio se nutre por la contribuciónde los usuarios y permite registrarse de manera gratuita. Entre los servicios adi-cionales, se destacan un foro de discusiones y un blog que aporta muy buenasideas sobre todo lo relacionado con los colores.

Figura 12. Para acceder a COLOURlovers hay que ingresar en www.colourlovers.com .Desde la página principal, se puede acceder a las últimas novedades subidas

por los usuarios, calificar y dejar comentarios, entre otras opciones.

¿Q ué he r ram i en tas nos ay udan a e l eg i r l a pa l e t a de c o l o res pa ra un s i t i o?

25www.redusers.com


14/56

Color Combos es una alternativa que nos permite crear nuestra propia paleta decolores. Entre otras opciones, se encuentra la posibilidad de acceder a las paletassubidas por los usuarios que desean compartir sus combinaciones. Para poten-ciar esta alternativa, podemos suscribirnos al RSS del sitio y, de esta forma, es-

tar al tanto de las actualizaciones que se producen en la página.Si lo deseamos, también contamos con la opción de ingresar una dirección URLpara conocer la paleta de colores utilizada. Para acceder a este beneficio, ingre-samos al sitio web en www.colorcombos.com.

Figura 13. Color Combos ofrece una buena variedad de paletas, permite realizar búsquedas

personalizadas y brinda muchas facilidades, pero sólo se ofrece en inglés.

Aplicaciones para elegir paletas de coloresColorSchemer Studio es una aplicación que nos permite utilizar una rueda de co-lores para seleccionar los tonos de nuestra paleta. Podemos guardar nuestros trabajos y realizar funciones avanzadas. Está disponible para Windows y MAC OS X. Sepuede descargar una versión de evaluación desde www.colorschemer.com.


26 www.redusers.com

❘ ❘ ❘

Se conoce como RGB a la combinación que se forma con los colores de luz primarios: rojo,

verde y azul. Un ejemplo de esto es la pantalla de un monitor o de un televisor. Por su parte,

CMYK es la combinación que se logra al combinar en impresión los colores cian, magenta,amarillo y negro; las impresoras utilizan este sistema.

DIFERENCIAS ENTRE RGB Y CMYK


15/56

Figura 14 . Existe una versión para utilizar en línea,

llamada Color Schemer Online , a la que se puede acceder

desde la dirección web www.colorschemer.com/ online.html .

Otra alternativa que tenemos a nuestro alcance se llama colorbrowser. Su fun-ción principal es ayudarnos con la organización y la edición de paletas de colores.Ofrece varias opciones de exportación, y se puede acceder a la página principal

del proyecto ingresando en http://code.google.com/p/colorbrowser.

Figura 15 . Colorbrowser es una apl icación senci l lade tecnología Adobe AIR que puede ser út i l para aquel las

personas que necesi tan t rabajar con paletas de colores.

¿Q ué he r ram i en tas nos ay udan a e l eg i r l a pa l e t a de c o l o res pa ra un s i t i o?

27www.redusers.com


16/56

¿Qué tipografías pueden utilizarse en el diseñode un sitio web y cuáles son las recomendadas? Al diseñar un sitio web, no se puede dejar de contemplar las tipografías

que se utilizarán en su creación. En este sentido, es importante destacar que las fuen-

tes que visualizará el navegador son las que se encuentran instaladas en el sistema delusuario. Si tenemos en cuenta que, al instalarse el sistema operativo, solamente se in-cluye un reducido conjunto de tipografías, esto hace que las posibilidades sean aco-tadas, ya que no todos los usuarios cuentan con los packs adicionales de fuentes quepueden disponer, por ejemplo, los especialistas en diseño gráfico. En consecuencia,al abordar el diseño de un sitio, hay que utilizar las familias de fuentes que asegurencompatibilidad y se encuentren en los diversos sistemas donde pueda ser visualizado.

Figura 16. Si desconocemos las fuentes que están instaladas en Windows, podemos

acceder a ellas a través del Panel de Cont rol / Apar iencia y personal ización/ Fuentes .

Desde hace unos años, se ha popularizado el concepto de fuentes seguras para utilizar en sitios web, al que, en idioma inglés, se lo suele denominar web-safefonts. Utilizar estas fuentes nos brinda mayor certeza en cuanto a lo que el usua-rio podrá visualizar en su navegador. Entre las fuentes más populares incluidasen Windows y en otros sistemas, se encuentran Arial, Courier New, Georgia,Times New Roman, Verdana, Trebuchet y Lucida Sans.Es posible reunir las fuentes por familias, que son las que permiten agrupar por es-

tilo y características. Dentro de este concepto, se pueden señalar las fuentes serif ,que son aquellas que cuentan con algún tipo de remate o de adorno en sus puntaso extremos, que las distingue, como por ejemplo Times New Roman o Georgia .


28 www.redusers.com


17/56

Por el contrario, las tipografías que se identifican como sans serif son las que nopresentan este remate, en este grupo se incluyen Arial y Verdana , entre otras.

Figura 17. Para comprender claramente las diferencias entre una fuente serif y una sans serif,

basta realizar una com paración visual entre ellas, en la pantalla de la com putadora o en un papel.

Es importante señalar que se pueden marcar otras divisiones entre tipografías. Porejemplo, la letra Courier presenta características que la definen como serif, porsu terminación, pero además es monoespaciada . Esta especificidad hace que ca-da uno de los caracteres, escritos con tipografía Courier, ocupe el mismo espacio.La mayoría de las tipografías no utilizan esta característica. Por ejemplo, en untexto escrito con Verdana, la letra i ocupa menos lugar que la m.

Fuentes y reemplazosUna ventaja que presenta el lenguaje HTML es la posibilidad de establecer fuentesde reemplazo, en caso de que una tipografía no se encuentre en el sistema, como enel ejemplo que se muestra a continuación.

Texto de prueba

La etiqueta debe estar contenida dentro del cuerpo del documento, es de-

cir después de y antes de . Su función es definir las característi-cas del texto. A través de la propiedad face, podemos establecer la tipografía conla que se mostrará el texto y sus posibles reemplazos. Como vimos en el ejemplo

¿Q ué t i pog ra f ías pued en u t i l i za r s e en e l d i s eño de un s i t i o w eb y c uá l es s on l as r ec omendad as ?

29www.redusers.com


18/56

anterior, además de las fuentes de reemplazo se puede indicar la familia.Otras propiedades que es posible aplicar a son size (tamaño de la fuente) y color (color de la fuente). Como podremos ver en el punto 6 de este capítulo, tam-bién se puede establecer una fuente y sus propiedades por medio de CSS.

Fuentes en imágenes y animacionesPara resolver las situaciones en las que es imprescindible utilizar una tipografía determinada, por ejemplo, para crear un logotipo, se puede recurrir a la incorpo-ración de una imagen, generada con un programa de creación y edición, comopor ejemplo Adobe Photoshop o Gimp.De igual forma, se puede proceder para una animación, pero mediante el uso de

otras herramientas, como Adobe Flash, una de las aplicaciones que ha ganadoun lugar destacado en la preferencia de los diseñadores web. Cabe destacar quelas tipografías empleadas al generar una película en Flash quedan incorporadasen el archivo. Por este motivo, no es necesario que el usuario las tenga instala-das en su PC y, por lo tanto, le brinda mayor libertad al diseñador.

¿Cómo visualizar los sitios que no muestranlos caracteres de manera correcta?

A esta altura del siglo XXI, no hay dudas de que Internet es un fenó-meno global que abarca a personas de todo el mundo. Este suceso comunicacio-nal y cultural también implica una enorme cantidad de contenidos escritos enmuchos idiomas y dialectos.Los sistemas operativos en castellano están preparados para visualizar juegos de ca-racteres de los lenguajes que comparten la misma codificación, pero pueden reque-rir la instalación de paquetes adicionales para otros lenguajes, como el árabe o elchino. Por esta causa, un navegador en español puede ver sin problemas páginas es-critas en inglés o en italiano, pero, a veces, presentan caracteres incorrectos uofrecen la descarga de un paquete adicional si el contenido está en idiomas que ma-nejan otro alfabeto, distinto del latino, utilizado por el idioma castellano.


30 www.redusers.com

❘ ❘ ❘

Las fuentes TrueType conforman un estándar entre las tipografías. Su uso se encuentra muy

extendido en sistemas Windows, Mac OS y Linux. Se pueden instalar de manera sencilla y

existe una importante cantidad de familias disponibles para descargar a través de Internet,tanto en forma gratuita como arancelada.

¿QUÉ SON LAS FUENTES TRUETYPE?


19/56

Figura 18. Si nuestro sistema no cuenta con los paquetes de fuentes y configuración

adecuada, el contenido en otros idiomas no será visto de manera correcta.

Para que el navegador tenga la información necesaria de cómo debe mostrar una pá-gina, existen etiquetas específicas que permiten dar información sobre el tipo de do-cumento, el idioma y el juego de caracteres que se necesita utilizar. Se recomienda tener muy presente esta opción, para lograr una mejor compatibilidad con todos losnavegadores del mercado y, además, para colaborar con el trabajo de rastreo de losbuscadores de Internet. Algunos programas, como Dreamweaver, pueden introdu-

cir el código inicial de manera predeterminada.

Figura 19. Quienes util izan Dreamweaver como editor, cuentan con una opción

para definir la codificación y otras características del documento HTML.

Si debemos iniciar un documento desde cero, por nuestros propios medios, el có-digo por ingresar al comienzo es el siguiente:

¿Cómo visual izar los sit ios que no muestran los caracteres de manera correcta?

31www.redusers.com


20/56

Si bien no afectan la codificación de la página, cabe destacar que existen atributosespecíficos de idioma y región que se pueden aplicar a la etiqueta . Para in-dicar que un documento está escrito en español, se debe escribir de siguiente :

Si se desea aclarar el idioma y el país, o región, se deben escribir las letras que loidentifican, separadas por un guión. Por ejemplo, para especificar el idioma inglésy el país Estados Unidos, hay que escribir:

Si el problema persiste en algunos equipos puntuales, se puede recomendar al usua-rio que verifique la configuración de su navegador. En el caso de Internet Explorer,debe ir al menú Ver/Codificacióno en Mozilla Firefox a Ver/Codificación de caracteres.Por defecto, en ambos casos, debería estar seleccionada la opción Unicode.

Figura 20. Si en páginas de uso frecuente se visualizan de manera incorrecta algunos

caracteres, es muy probable que esté mal configurada la codificación del navegador.


32 www.redusers.com


21/56

¿Cómo se pueden definir estilos de textopara todas las páginas de un sitio?Como hemos visto antes, las tipografías de un sitio son parte de su

identidad. Desde un punto de vista estético y para mantener homogeneidad

entre las páginas que lo componen, es importante definir desde el comienzo losestilos de texto que se utilizarán.

Figura 21. Definir los estilos de un sitio nos permite identificarlo

como marca, concepto, o bien dentro de un rubro o especialidad.

¿C ómo s e pu eden d e f i n i r es t i lo s de t ex to pa ra t odas l as pág i nas de un s i t i o?

33www.redusers.com


22/56

Una de las grandes ventajas que nos ofrece la utilización de CSS es la posibili-dad de definir estilos de texto, que podrán ser incorporados en las páginas quecomponen el sitio. Otro de los puntos positivos, que nos brinda trabajar con es-ta modalidad, es que resulta mucho más sencilla cualquier modificación ya que,

al cambiar las propiedades del estilo, éstas se aplicarán a los textos de todas laspáginas vinculadas. En la tabla que veremos a continuación, analizaremoslas principales propiedades que se pueden aplicar por medio de CSS, tanto para texto como para otros elementos.

PROPIEDAD DESCRIPCIÓN VALORES4

colo r Perm ite estab lecer un co lo r. Puede rec ib ir va lo res RGB o el nom bre del co lo r

en inglés. Por ejemplo:

c o l o r : #000099 ;

color: blue;

fon t- fam ily Se u t il iza para d efin ir Se pueden ind icar nom bres de fuen tes o d e

la fa m ilia t ip ográ fica . fa m il ia s. Es p osib le in dica r m á s d e u n va lo r,

separado por coma. Por e jemplo:

font-fam ily: Arial, sans-seri f ;

fon t-size Perm ite defin ir el tam año Puede rec ib ir un va lo r num érico o el tam año

de una fuen te. escrito en inglés. Por ejem p lo:

font-s ize:10pt ;

font-s ize: m edium;fon t-weigh t Se u t il iza para estab lecer Puede rec ib ir el va lo r norm al, bo ld , bo lder,

el gro sor d e un a fu en te. ligh ter o un nú mero entre 1 00 y 9 0 0

(de c ien en c ien). Por e jemplo:

Font-weight : 700;

fon t-style Perm ite estab lecer Se le puede ap l icar un va lo r norm al,

el estilo d e fuen te. ob lique o ita lic. Por ejem plo :

font-style: i tal ic;

text-d eco rat io n Perm ite d efin ir si u n texto Pu ed e ten er u n va lo r n on e, u nd erlin e,

tend rá sub rayado overline o line-th rough. Por e jem plo :o se verá tachado. text-decora tion : underline;

text-t ransfo rm Se u t il iza p ara hacer q ue Se le p ued e asignar cap ita lize, up percase,

e l t ext o t en ga la p rim e ra lo we rc ase o n on e. Po r e je m plo , p a ra to d o

letra en m ayúsculas el texto en m ayúsculas:

(letra capita l), toda s las text-transform : upp ercase;

let ras en m ayúsculas o

todo en minúsculas.

line-heigh t Es un a tribu to q ue perm ite Puede rec ib ir el va lo r norm al o uno num érico .

establecer el interl ineado , Por ejem plo:

de fi n iendo el a lt o de la l ínea. l ine -he ight : 10px;


34 www.redusers.com


23/56

PROPIEDAD DESCRIPCIÓN VALORES4

text-a lign Se u til iza para alinear el texto . Se le p uede ap licar un va lo r left , right , cen ter

o justi fy. Por ejemplo: text-al ign: left;

text-indent Perm ite estab lecer Se puede asignar un valor num érico exp resado

un indentad o. en p ixeles o pu lgadas. Por ejem p lo:text- indent : 1 5p x;

text- indent : 4 in;

b ack gro un d- co lo r Ofre ce la p osib ilid ad d e Pu ed e recib ir va lo res RGB o el n om b re d el c olo r

as ignar un color de fondo en inglés. Por e jemplo:

a un elem ento . color: # FF0 0 0 0 ;

color: red;

b ack gro un d- im a ge S e u til iza p ara est ab lec er Se d eb e a sign ar el n om b re y la ru ta d on de se

una im agen de fond o encuentra alo jad a la im agen. Por e jem plo :

p ara un elem ento . background -im age:

ur l(h t tp :/ / www.mis i ti o .com/ imagne.jpg)

m argin Perm ite asignar un m argen Pued e u til iza rse para izq uierda (m argin -left ) ,

p ara un elem ento . derecha (m argin -righ t) , aba jo (m argin -bo t tom )

y arriba (margin-top). Se le asignan valores

num éricos que p ueden estar expresados en

pixeles, pulgadas o porcentajes. Por ejemplo:

margin- top: 8px;

padd ing Se u til iza para ind icar e l Pued e u til iza rse para izq uierd a (padd ing- left ) ,e sp a ci o en t re u n el em e n to d e re ch a ( p ad d in g- ri gh t ), a b aj o (p a d d in g- b ot to m )

y su in terio r. y a rriba (padd ing-top ). Se le asignan valo res

num éricos que p ueden estar expresados en

pixeles, pulgadas o porcentajes. Por ejemplo:

padd ing-right : 1 in;

border-co lo r Perm ite estab lecer el co lo r Pued e recib ir va lo res RGB o el nom bre del color

d el b o rd e d e u n e le m en to . e n i nglé s. Po r e je m plo :

co lo r: #3 3CC33 ;

color: green;border-style Se em plea para defin ir Se le p uede asignar un va lo r none, d ot ted ,

el esti lo de un bord e. sol id, dou ble, groove, r idge, outset o inset.

Por e jemplo:

border-style: none;

border-wid th Perm ite asignar un ancho Se le asignan va lo res num éricos que pueden

a un bord e. esta r exp resados en p ixeles o en p ulgadas.

Por e jemplo:

border-width: 2 px;

Tabla 2. Tabla de los atributos más utilizados en CSS,

descripción de su uso y valores que pueden recibir.


35www.redusers.com


24/56

Figura 22. Si ingresamos en www.w3.org/ Style/ CSS , podremos obtener

información y novedades sobre Cascading Style Sheets (CSS).

Hojas de estilo dentro del documento HTML Al hablar de las características de CSS, en el punto 1 del presente capítulo, dijimosque puede incluirse dentro del documento HTML o bien en un archivo externo. Sielegimos la primera alternativa, es conveniente declarar los estilos en la cabecera delHTML y serán válidos sólo para el documento en cuestión. A continuación, vere-mos de qué manera se define una clase para aplicar como estilo a un texto.

.miestilo {font-family: “Times New Roman”, Times, serif;

font-size: 12px;

font-style: italic;

color: #000066;

}

El listado del ejemplo debe incorporarse en la cabecera del documento, después dela etiqueta y antes de . En este caso, definimos una clase de texto alespecificar la familia de fuentes, el tamaño, el estilo y su color. Como podemos ver,


36 www.redusers.com


25/56

para incluir los estilos, en la cabecera escribimos . Al finalizartodo el código CSS que deseamos incluir en el documento, cerramos con .Para aplicar la clase creada a un párrafo, debemos escribir:

Texto del párrafo

. Esta opción también puede ser aplicada

a otras etiquetas, como por ejemplo a . Una clase puede ser utilizada para unúnico elemento o para varios. Si deseamos incluir el estilo directamente en un pá-rrafo, sin declararlo en la cabecera, deberíamos proceder de la siguiente forma:

Texto del párrafo

En este caso, definimos los estilos dentro de la etiqueta párrafo (

) y separamoslas propiedades con ;. Si bien en el ejemplo tenemos todo en un mismo lugar, eneste caso, perdemos las ventajas de abstracción del diseño, que brinda CSS, debidoa que el contenido y la apariencia quedan en un mismo lugar. Además, en un ar-chivo más extenso, declarar los estilos dentro del cuerpo del texto hace más engo-rrosa la lectura del código al quitarle claridad.Otro aspecto que debemos remarcar es que también es posible agregarle propieda-des a un selector existente. Por ejemplo, si deseamos que todos los encabezados demáximo nivel de una página sean de color azul, podríamos declarar lo siguiente en

la sección destinada para CSS en el encabezado del documento.

h1 {

color: blue;

}

Con estas líneas, definimos el color para los Encabezados 1 del HTML, pero tam-bién podríamos definir otras propiedades relativas a la forma en que se representa el texto en pantalla. Este ejemplo también podría realizarse con la aplicación delconcepto de clase, como ya hemos visto.


37www.redusers.com

Si bien su historia podría remontarse un poco más en el tiempo, fue en el mes de diciembre de

1996 cuando tuvo su primera revisión el nivel 1 de CSS, también conocido como CSS1. Esta fecha

podría marcarse como su lanzamiento público. CSS2 aparece en mayo de 1998. Por su parte, CSS3se mantiene en desarrollo y algunos navegadores ya son compatibles con sus características

HISTORIA DEL CSS


26/56

Figura 23. Al ingresar en htt p:/ / jigsaw.w3.org/ css-validator , accedemos

a un validador de código CSS que ofrece un completo informe

de los problemas que se pueden encontrar en los archivos analizados.

Hojas de estilo externas

La utilización de estilos en archivos externos a los documentos HTML es una opción que ofrece muchas ventajas, porque nos permite manejar todos los esti-los de un sitio de manera independiente. Esta alternativa nos ofrece una mejordiferenciación entre el contenido y la forma en que se muestra en pantalla. La opción mencionada resulta muy útil cuando se necesita realizar modificaciones,ya que simplifica el trabajo de manera notable.Los archivos de hojas de estilo llevan la extensión .CSS y están conformados poruna estructura muy simple, ya que en ellos sólo se deben incluir los estilos de textoque se utilizarán, de la misma forma que si lo hiciéramos en el encabezado. Se pue-den crear con un editor que reconozca el código, como los que hemos visto en elpunto 2 de este capítulo o desde cualquier otro editor de texto.Como primera línea del archivo CSS, es recomendable indicar el juego de caracte-res utilizado y, luego, declarar los estilos, como vemos en el ejemplo a continuación.

@CHARSET “UTF-8”;

.miestilo1 {

font-size: 10px;

color: #3333CC;}


38 www.redusers.com


27/56

.miestilo2 {

font-size: 12px;

color: #3399FF;

}

Para incluirlo en el archivo HTML, dentro del encabezado, escribimos lo siguiente:

En el valor de href , se indicará la ruta y el nombre del archivo CSS, con su extensión.

Figura 24. Cada n ivel o especificación de CSS incluye las carac terísticas

de las versiones previas y además agrega nuevas funcionalidades. Por ejemplo,

CSS nivel 3 incluye todas las características del nivel 2 e incluye nuevas.

¿Qué efectos es posible aplicar a los links de unapágina y cómo se pueden establecer para un sitio?Una de las características más importante de los sitios web es su

capacidad de enlazar otros contenidos, ya sean del propio sitio o bien de otroslugares. Esta posibilidad es la que permite estructurar un sitio y dar a conocer a

los visitantes las diferentes páginas que lo componen. Además, les ofrece laalternativa de acceder a otros espacios recomendados, que pueden brindar con-tenidos de interés o bien ser auspiciantes que ofrecen sus servicios.

¿Q ué e fec tos es pos i b l e ap l i c a r a l os l i n k s de una p ág i na y c ómo s e pueden es tab l ec e r pa ra un s i t i o?

39www.redusers.com


28/56

Figura 25 . En los primeros años de auge de la web, los links, por lo general, se representaban

al subrayar la palabra o frase que enlazaba hacia otra página o referencia de Internet.

Hoy en día, la representación básica de un link en HTML ofrece las mismas carac-terísticas que conocimos en sus comienzos, sin embargo, con la utilización de CSSy código Javascript, es posible lograr efectos mucho más interesantes.

La ubicación de los linksLa ubicación de los enlaces en una página no es un asunto menor, debido a que su dis-posición, dentro del diseño, define su atractivo y la posibilidad que existe de que elusuario los vea y le resulte tentador hacer un clic en ellos. Como veremos más adelan-te, los enlaces pueden figurar como un texto en HTML, ser enriquecidos por propie-dades CSS, crearse con código Javascript o bien ponerse como imágenes, entre otrasopciones. Es importante tener en cuenta que hay que elegir la opción indicada, segúnel diseño del sitio y también tener en cuenta la función que deseamos asignarle al en-

lace creado. Por ejemplo, se podría incluir una imagen animada muy llamativa para definir el enlace que conduce a la ayuda de uso de un sitio y, a su vez, ubicarla en la cabecera para que resulte bien visible. Sin embargo, en la mayoría de los casos, esta op-ción no es la más relevante en el esquema de un sitio web, por lo cual puede tener una ubicación de menor peso y un tipo de link más discreto.En el capítulo 6, cuando recorramos las características de optimización del sitio (SEO),veremos los lugares más destacados para incluir enlaces de publicidad, pero, por lo pron-to, podemos decir que, en todos los casos, los links que el usuario percibirá como másaccecibles, son los que estén ubicados a menor distancia del contenido que está leyen-do. Por lo general, se ubican a la izquierda o en la parte superior de la pantalla, comopor ejemplo ocurre con las botoneras que, al fin y al cabo, son un conjunto de enlacesque pueden representarse como texto o como gráficos (estáticos o animados).

Crear un link en HTML Antes de centrarnos en los efectos que se pueden generar sobre los links, veamosde qué manera se crea un enlace en HTML.

Contacto


40 www.redusers.com


29/56

El enlace se define con etiqueta y se cierra con . Con el parámetro href , se in-dica el sitio o página web de destino; en este ejemplo, enviamos a la página de contac-to del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direc-ción URL completa, por ejemplo, http://www.direcciondemisitioweb.com/

contacto.htm. Lo que queda envuelto entre las etiquetas y , es el texto quemuestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una imagen con enlace, en lugar de un texto, debemos escribir el siguiente código:

Como vemos, la estructura es similar. Con la etiquetaimg src

, se debe definir elnombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las pro-piedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, conlas que se muestra la imagen en pantalla.

Figura 26 . Utilizar imágenes, en lugar de texto, para crear links, es una opción que puede

resultar m ás atractiva para el usuario y que, a su vez, brinda m ejores alternativas para diseñar.

Agregar efectos a los links con CSSUna opción para darle un estilo distinto o para decorar un enlace consiste en apro-vechar las opciones que nos ofrece CSS, entre las que encontramos:a:link : define las propiedades del link, cuando no ha sido visitado, ni tiene el mouse

sobre él, ni tampoco el foco. Es la opción predeterminada para mostrar un enlace cuan-do carga la página por primera vez y no ha recibido ninguna acción del usuario.a:visited: establece la apariencia de los enlaces que han sido visitados por el usuario.


41www.redusers.com


30/56

a:focus: se utiliza para establecer cómo se muestra un enlace que tiene el foco sobreél. Una manera de hacer foco sobre un enlace es, posicionados sobre la página acti-va, pulsar la tecla TAB. Si bien esta alternativa no es muy utilizada, es una opciónque aún tiene validez y puede servir en algunos casos puntuales.a:hover: esta opción se activa cuando el usuario pasa el mouse por encima del link.Es, quizás, una de las acciones más comunes porque se considera de mucha utilidad.a:active: se activa cuando el usuario hace clic sobre el enlace.Entre las propiedades que se pueden aplicar a cada uno de estos estados, se en-cuentran casi todas las opciones que ofrece CSS para un texto común, por ejem-plo: pasar a negrita, cambiar el color, subrayar, cambiar el tamaño de la fuente,etcétera. De manera habitual, estas opciones se definen junto con el estilo de tex-to que se utilizará. En el siguiente listado, veremos un ejemplo de aplicación, que

nos permitirá comprender mejor el tema.

.MiEstilo {

font-family: Verdana, Arial, sans-serif;

color: #000000;

}

a:link {

text-decoration: none;

color: #2400ff;

}

a:visited {

color: #ff0000;


}

a:focus {

color: #001eff;


font-style: italic;}

a:hover {

text-decoration: underline;

color: #8c7de7;

}

a:active {


color: #6a7cff;}


42 www.redusers.com


31/56

El estilo que definimos en el listado anterior puede incluirse en el encabezado deldocumento, entre las etiquetas y o bien agregarse a una hoja de estilos independiente. En el ejemplo, podemos ver que, en primer lu-gar, definimos las características generales del texto —en este caso la fuente—, sus

reemplazos posibles y el color que tendrá aplicado de manera predeterminada. Enlas siguientes líneas del código podemos apreciar cómo se especifica la forma en quese debe mostrar un enlace según su estado. Por ejemplo, en a:link , definimos el co-lor que tendrá de manera predeterminada el link y, también, especificamos que notendrá decoración, es decir que no se verá subrayado. Para los siguientes estados, de-finimos que cambie el color. Además, para a:hover (cuando el mouse está encima del enlace) indicamos que se muestre subrayado y para a:focus (cuando se hace fo-co en el enlace) especificamos que se muestre el texto inclinado, con el estilo italic.

Figura 27. En algunos casos, puede ser una ventaja no utilizar el subrayado para un link, pero,

en otros, puede resultar más claro para indicarle al usuario que existe un enlace sobre ese texto.

CSS también nos permite trabajar con imágenes. Una alternativa que podemos utilizaren las imágenes que tienen enlaces es aplicarles un borde y hacer que cambie su colorcuando el mouse pasa por encima. Para ello, primero definimos el siguiente código CSS.

#imagenenlace img {

border: 2px solid #333333;

border-width: 2px 2px 2px;

}

#imagenenlace a:hover img {

border: 2px solid #d4d4d4;

border-width: 2px 2px 2px;

color: #CCCCCC;}


43www.redusers.com


32/56

Cuando dentro de los estilos utilizamos #para definirlos, podemos usar su nombrepara referenciarlo en un objeto HTML, por ejemplo, con una capa. Debemos ha-cer que coincida el nombre con la etiqueta iddel objeto HTML. Para aplicarlo so-bre una imagen, es posible incluirla en una capa y escribir el siguiente código:

En el código, debemos reemplazar los valores de href , scr, img alt y longdesc, por

los que deseemos utilizar en la página web.

Figura 28. Cuando se aplica la propiedad al t a una imagen, en algunos navegadores,

por ejemplo en Internet Explorer, veremos el texto al pasar el mouse por encima.


44 www.redusers.com

A diferencia de lo que muchos piensan, la Web 2.0 no es un nuevo estándar de Internet, sino

un concepto que hace referencia a la evolución de la Web hacia un formato de mayor partici-

pación e interacción de los usuarios. La Web 2.0 está identificada con aplicaciones web, blogsy redes sociales, entre otros servicios.

¿QUÉ ES LA WEB 2.0?


33/56

Todos los efectos que se generen con CSS para los links pueden ser incluidos en una hoja de estilo externa. La ventaja de utilizar esta opción es que, como hemos vistoantes, nos permite definir estilos que podrán ser utilizados en todas las páginas delsitio si lo deseamos. Es importante destacar que, también, existen otras formas de

aplicar efectos a los enlaces utilizando Javascript, Flash u otros lenguajes o tecno-logías disponibles para desarrollos de sitios web.

Figura 29. Adobe Flash es una aplicación que, entre sus funciones básicas,

permite crear l inks o botones, pero su potencia resulta m ucho m ayor,ya que es una herram ienta pensada para crear proyectos m ultim edia profesionales.

¿Qué aspectos deben considerarse para diseñary establecer el formato de las tablas de un sitio?Las tablas son elementos HTML que se crean a través de la etiqueta

. Para definir una fila, se utiliza , y para crear una celda. A las tablas, se les puede asignar un nombre y propiedades, como colores y bor-des. A continuación, veremos un ejemplo de una tabla de países y ciudades.

País

Ciudad

ArgentinaBuenos Aires

¿Q ué as pec tos deben c ons i de ra rs e pa ra d i s eña r y es tab l ec e r e l f o rma to de l as t ab l as de un s i t io?

45www.redusers.com


34/56

Paraguay

Asunción

Uruguay

Montevideo

Como vimos, la tabla se abre con la etiqueta

y se cierra con

. Sele asigna el nombre con la propiedad id. Se utiliza width para indicar el anchoque ocupa la tabla. Este valor está expresado en pixeles.

Figura 30. Sin aplicarle ningún diseño, la tabla luce simple y muy poco atractiva.

Aplicar formato a una tablaEn el ejemplo anterior, describimos cómo se forma una tabla y sus característicasbásicas. Para enriquecer el aspecto de una tabla, se pueden aplicar propiedades decódigo HTML o agregar un estilo CSS, opción que nos puede ser útil para repetirel diseño en otras tablas de la página o del sitio.Entre las características que se pueden establecer en una tabla, se encuentra sualineación y la de los elementos contenidos en sus celdas. También es posibledefinir estilos y grosores para sus bordes. Por último, existe la posibilidad de apli-car imágenes o colores a las celdas o a la tabla en su conjunto. Si deseamos esta-blecer el color de la tabla, podemos hacerlo por medio de la propiedad bgcolor,dentro de la etiqueta , por ejemplo:


46 www.redusers.com


35/56

La propiedad bgcolor también puede ser aplicada a una celda si la utilizamoscon la etiqueta .

País

Si lo que deseamos es aplicar una imagen, tanto a la etiqueta como a ,podemos agregarle la propiedad backgrounde indicar la ruta del archivo de imageny su nombre, como vemos en el siguiente ejemplo:

País

Figura 31 . Cuando utilizamos una im agen de fondo para

una celda o una tabla, debemos tener en cuenta sus dim ensiones

y colores para que no perjudique la lectura del t exto m ostrado.

Si buscamos una solución que nos sea útil para poder reutilizarla, en el listadoque veremos a continuación, definiremos un estilo CSS que nos permite apli-carlo a una o a varias tablas de un sitio.

table.paises {

font-family: Arial, Helvetica, sans-serif;

font-size:14px;

color:#FFFFFF;text-align:center;

background-color:#333333;

}

table.paises td{

border:2px solid #CCCCCC;

}

Con table.paises, definimos las propiedades de la tabla y su contenido. Contable.paises td, definimos características específicas de las celdas, en este caso,las propiedades de sus bordes.

¿Q ué as pec tos deben c ons i de ra rs e pa ra d i s eña r y es tab l ec e r e l f o rma to de l as t ab l as de un s i t io?

47www.redusers.com


36/56

Figura 32. Luego de aplicar las propiedades de CSS, la tabla cambia su aspecto

y obtenemos un resultado que podremos integrar en nuestro diseño.

¿Cómo es posible crear una capay ubicarla dentro de otra?El concepto de capas se ha extendido en el ámbito informático a diferen-

tes tipos de aplicaciones. En lo que respecta específicamente al armado de una página web, las capas o divisiones permiten manejar elementos de una manera independien-te. Uno de los aspectos más destacado de una capa es que puede ubicarse con precisióndentro de una página y, además, permite que se le asigne un estilo personalizado para definir su aspecto. También, se le pueden aplicar propiedades de visibilidad, grados detransparencia y orden como elemento en la página. La etiqueta que se utiliza para abrir

una capa o división es , mientras que con se cierra.En el ejemplo que vemos a continuación, ubicaremos una capa en una página y le aplicaremos una imagen de fondo.

Con este listado, definimos una capa que se dibujará a partir de la esquina superiorizquierda de la pantalla, o de la división que la contenga; tendrá unas dimensiones


48 www.redusers.com

Muchas personas ligadas a la programación prefieren editar páginas HTML con un editor de códi-

go. Quienes provienen del mundo del diseño, por lo general, eligen aplicaciones WYSIWYM. Para

ofrecer una solución que pueda ser útil para todos, muchos programas WYSIWYM permiten trabajar con una vista de diseño, otra vista de código y, también, una vista que combina ambas opciones.

EDITORES DE CÓDIGO HTML VS. PROGRAMAS WYSIWYM


37/56

de 750x500 pixeles y utilizará una imagen de fondo que no se repetirá. Esta capa,así definida, sólo mostrará la imagen de fondo. Si deseamos mostrar otros elemen-tos dentro de ella, ya sean otras capas, tablas o cualquier otro objeto HTML, de-bemos declararlos antes de cerrar con la etiqueta .Todo aquello que quede

determinado dentro de este bloque se moverá y ajustará de acuerdo con las di-mensiones y la posición que adquiera la capa que lo contiene. Si deseamos mos-trar una capa dentro de otra, podríamos hacerlo con . Conesta opción, creamos capas anidadas vacías y sin propiedades. A cada una de ellas,podemos asignarle las características que deseemos.

Figura 33. Dentro de un se pueden incluir otros elementos, como por ejemplo

un texto, una imagen, una tabla o incluso, otros contenidos multimedia.

Antes de continuar, debemos detenernos un instante en el valor de position. De ma-nera predeterminada, su valor es static, es decir que los elementos se presentan enpantalla uno a continuación del otro, tal como lo definimos en el código que ge-neramos. Si asignamos un valor relative, las coordenadas de los elementos se fijarána partir de la posición que les correspondería por el flujo. Si optamos por utilizarabsolute, podremos asignar una posición sin tener en cuenta cómo se encuentrenubicados los elementos en el flujo. Como vemos en el ejemplo, al tener en cuenta el contenedor, la posición se puede establecer con top y left, entre otras opciones.En la práctica, deberemos decidir en qué casos es conveniente anidar capas y cuando te-nerlas independientes. Una posibilidad muy útil es ordenarlas por medio de la opciónz-index, que es la que permite determinar el orden en el que se superponen o apilan las

capas. Esta propiedad hace que un elemento se ubique dentro del eje Z , es decir, el queda la profundidad para los objetos tridimensionales. Puede tener asignado un valornumérico que, al ser menor que el de otro, indicará que el elemento está más atrás.

¿C ómo es p os i b l e c rea r una c ap a y ub i c a r l a den t ro de o t r a?

49www.redusers.com


38/56

Figura 34. La posibilidad de controlar el orden de las capas puede tener

variadas aplicaciones, por tal m otivo, es im portante com prender cómo debe

utilizarse z-index , porque puede ayudarnos a solucionar muchos problemas.

La alternativa de utilizar framesSi bien, hoy en día, está en auge la utilización de la etiqueta , cabe recordarque también es posible mostrar páginas HTML dentro de otras, con la opciónque ofrecen los marcos o frames. Con esta alternativa, se puede dividir la pági-na en áreas o subventanas con un elemento contenedor que defina el conjuntocon la etiqueta y cada uno de sus marcos con . La ruta del do-cumento que será incrustado se determina por medio del atributo src.

Figura 3 5. Los frames o marcos no son tan util izadoscomo hace algunos años en el diseño web, ya que existen

otras alternativas que brindan mayor versatil idad.


50 www.redusers.com


39/56

Por otra parte, con la etiqueta , podemos incorporar otro documento delmismo tipo, como si se tratara de un nuevo elemento flotante. Además de la ruta del documento, puede tener asignadas dimensiones, bordes y propiedades de trans-parencia, entre otras opciones. La utilización de marcos puede presentar algunos

problemas de compatibilidad con navegadores antiguos.

Figura 36. Para saber más sobre la util ización de frames,

podemos ingresar en www.w3.org/ TR/ html401/ present/ frames.html .

¿Es posible mostrar una capacon una transparencia de fondo?Como vimos en el punto 9, las capas pueden tener asignadas diferentes

propiedades. Una alternativa que resulta de suma utilidad en el diseño de una pá-gina web consiste en asignarle, a uno o más elementos, un grado de transparencia,para permitir que se vea de manera parcial un fondo. A esta función es posible dar-le diversas aplicaciones prácticas, pero, al utilizarla, es importante contar con los ele-mentos de la página ordenados con la función z-index, que ya hemos visto. Para uti-lizar esta opción con transparencias, si hay una imagen de fondo, debería tener elmenor valor, luego le seguiría la capa transparente y, por último, la capa que debequedar arriba, por ejemplo, un texto, como se muestra en la figura 34.Otro aspecto importante es la elección del color que se aplicará a la capa y có-

mo se representa según el grado de transparencia que se le aplique. En primerlugar, definimos el estilo CSS para la capa; para ello, utilizamos las opciones quepermitan que el efecto funcione en todos los navegadores.

¿Es pos ib l e m os t ra r una c ap a c on una t r ans pa renc ia de f ond o?

51www.redusers.com


40/56

#CapaTransparente {

z-index: 2;

background-color: black;

opacity: 0.3;

-moz-opacity: 0.3;

-khtml-opacity: 0.3;

filter: alpha(opacity=30);

}

La propiedad background-color define el color que se utilizará para la transparencia,en este caso, está asignado black (negro). Cuanto menor sea el valor aplicado a las pro-

piedades de transparencia, menos opaco será el objeto. Por ejemplo, un elemento conopacidad 0, no será visible; por el contrario, si tiene las propiedades de opacidad en 1(o 100 en el filtro alpha), en ese caso será totalmente opaco. A continuación, veremoslas características de cada una de las propiedades utilizadas en el listado.

- opacity: define el nivel de transparencia estándar. Se utiliza, por ejemplo para Opera.-moz-opacity: es una propiedad específica para la familia de navegadores que utili-

zan el código Mozilla.- khtml-opacity: se utiliza para los navegadores que utilizan el framework WebKit,

por ejemplo Google Chrome, Safari y Konqueror.- filter: alpha: se utiliza para lograr compatibilidad con la familia de navegadoresMicrosoft Internet Explorer. También puede aplicarse de la siguiente manera:filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30).

Para aplicar el estilo creado a una capa, lo asignamos a la idy luego ubicamos nor-malmente la capa dentro del diseño de nuestra página.


52 www.redusers.com

La transparencia de un material está dada por las características que presenta para dejar

pasar la luz. Se dice que un elemento es opaco cuando no permite que la luz pase a través

de él. Por otra parte, un objeto translúcido permite pasar la luz, pero no deja ver de mane-ra definida lo que hay del otro lado.

LA TRANSPARENCIA DE LOS MATERIALES


41/56

Figura 37. El efecto de transparencia es ideal para util izarlo, por ejemplo,

con una imagen de fondo y un texto encima. Siempre es conveniente

que el texto tenga un tamaño y color que lo mantenga legible.

Debemos tener en cuenta que todo lo que se encuentre contenido dentro de la eti-queta tendrá asignada las características de transparencia. Por este motivo, porlo general, será recomendable el manejo de manera independiente de la capa con trans-parencia, para no afectar otros elementos de la página que no deseemos que tomenestas características. Es importante destacar que el efecto de transparencia también

puede utilizarse en otros elementos a los que pueden aplicarse estilos, como las tablas.

Figura 38. Algunos navegadores, como Internet Explorer 6, pueden mostrarun alerta y bloquear el efecto de transparencias en páginas ubicadas

en el equipo local. Al publicarlas en Internet, no se mostrará el mensaje.

¿Es pos ib l e m os t ra r una c ap a c on una t r ans pa renc ia de f ond o?

53www.redusers.com


42/56

¿En qué casos se recomienda diseñar una páginacon dimensiones fijas y cuándo, con porcentuales?Hace algunos años, el estándar de monitores estaba dado por panta-

llas de 14”, que, por lo general, se configuran en resoluciones de 640x480 pixe-

les o en 800x600 pixeles. La llegada de los monitores de 17” impuso el estándarde 1024x768 pixeles, respetado por muchos sitios web hoy en día. Los nuevosmonitores ya han superado la marca de las 17” y también el formato. Las di-mensiones estándares de pantallas con relación 4:3 (como los televisores anti-guos), están dando paso a los modelos wide screen de relación 16:9.

Figura 39. Las pantallas wide , como su nom bre lo indica,

son m ás anchas que las estándares (4:3), permiten m ostrar

un área similar a la que ofrece el cine, pero en dimensiones menores.

Estas características, sumadas a que, en la actualidad, se encuentran pantallas de19”, 20”, 22”, entre otras alternativas, hace que exista una gran variedad de ta-maños y, por ende, de resoluciones de pantalla, ya que cada una de estas opcio-nes tiene asociada una resolución recomendada.El dilema de tener que diseñar un sitio sin saber en qué pantalla será visualizado in-fluye en el diseño que vamos a realizar. Quienes deciden inclinarse por un diseñocon dimensiones fijas utilizan como unidad de medida el pixel. Para lograr mayor

compatibilidad, se puede optar por diseñar en una medida de 800x600 pixeles, sinembargo, en la actualidad, cada vez más diseñadores toman como estándar la reso-lución 1024x768, impuesta por los monitores estándares de 17 pulgadas.


54 www.redusers.com


43/56

Figura 40. Si bien no es necesario contar con una placa de video

de última generación para realizar un diseño web, es importante

que esta nos permita visualizar la mayor cantidad de resoluciones posibles.

Figura 41. La resolución de pantalla debe ser soportada tanto por la placa de video,

como por el monitor. De lo contrario, no tendremos una visualización adecuada.

Cualquiera sea la opción que tomemos en el diseño, es recomendable poner un co-lor o una imagen de fondo que logre armonía con el sitio, ya que en las pantallasde más resolución se verá en mayor extensión, en especial hacia los costados.

¿En qué c as os s e rec om i enda d i s eña r una pág i na c on d i m ens i ones f ij a s y cuándo , c on po rc en tua l es ?

55www.redusers.com


44/56

Figura 42. Al visualizar un sitio en diferentes resoluciones de pantallas

y versiones de navegadores, el fondo puede verse en algunos casos

y en otros no, según la configuración del equipo.

El lenguaje HTML nos permite trabajar con medidas porcentuales en diversos ele-mentos, como puede ser en tablas y capas. Por ejemplo, es posible establecer queuna tabla ocupe el 80% del espacio que tiene disponible en su contenedor (por ejem-plo un ) en lugar de definir su medida exacta en pixeles.Como podemos darnos cuenta, la ventaja de utilizar un valor porcentual para los ele-mentos que componen una página web es que se adaptarán según las dimensionesque les ofrezca la pantalla. Además, con un diseño adecuado, utilizando valores por-centuales, se puede aprovechar el máximo espacio disponible en cada una de lasresoluciones. En cambio, al hacerlo fijo, desaprovechamos parte del área de pantalla

si el usuario no tiene configurada la resolución para la cual fue optimizado el sitio.La desventaja de utilizar medidas porcentuales en el diseño reside en que los ele-mentos pueden modificarse de tal forma que aparezcan movidos en la pantalla,


56 www.redusers.com


45/56

si no contemplamos todos los aspectos del diseño. Al igual que las dimensionesexpresadas en pixeles, el porcentaje puede aplicarse a las propiedades width (ancho)y height (alto) de los elementos que lo admitan.Dentro de una misma página web, pueden utilizarse medidas en pixeles o en por-

centaje, aunque hay que evaluar con cuidado en qué casos puede ser útil optarpor esta alternativa. Para indicar que un valor está expresado en pixeles, se utili-za px, por ejemplo: height=”100px”. Para establecer que el valor es porcentual,se usa el símbolo %, por ejemplo: width=”10%”.Como veremos en el punto 13 de este capítulo, más allá de la decisión que to-memos en cuanto a utilizar medidas porcentuales o fijas, es fundamental que elsitio se muestre centrado en todas las resoluciones de monitores ya que, de locontrario, el diseño no lucirá de la mejor manera.

Figura 43. Si ingresamos en www.w3counter.com/ globalstats.php , podremos

conocer estadísticas actualizadas, mes por mes, sobre los navegadores

y resoluciones de pantalla más util izadas por los usuarios.

¿En qué c as os s e rec om i enda d i s eña r una pág i na c on d i m ens i ones f ij a s y cuándo , c on po rc en tua l es ?

57www.redusers.com

❘ ❘ ❘

Pixel es una palabra que proviene del término inglés picture element y que hace referencia a la

unidad de color más pequeña que conforma una imagen digital. Para representar un color, ca-

da pixel puede tomar un valor diferente, que está dado por la profundidad de color de la ima-gen. Por ejemplo, una profundidad de 24 bits permite 16.777.216 colores.

¿QUÉ ES UN PIXEL?


46/56

¿Cuál es la mejor forma de establecer losmárgenes de una página y sus elementos?En la tabla 2 de este capítulo, cuando hablamos de atributos CSS, hicimos

referencia a marginy a padding. El primer concepto se refiere al margen de un elemento

y, como vimos, puede establecerse para cada uno de los lados (arriba, abajo, izquierda o derecha). Por otra parte, paddingse utiliza para definir el espacio en el interior de unelemento y, también, se asigna a cada uno de los lados. Sus valores pueden estar ex-presados en porcentaje, pulgada o pixel. Muchas veces, estos dos conceptos suelen con-fundirse porque, en algunos diseños, ofrecen resultados similares; sin embargo, resulta relevante saber en qué casos es recomendable optar por uno o por otro.

Figura 44. Definir los valores de margin y padding nos puede ser m uy úti l especialm ente

en sitios donde trabajamos con varias columnas de texto, para que no quede encimado

Para comprender este tema de una manera sencilla, pensemos en una alternativa que podemos encontrar, de forma cotidiana, al diseñar un sitio. Por ejemplo, ve-amos qué ocurre con un rectángulo que, en su interior, tiene un texto. Debemostener en cuenta que el rectángulo se encuentra dentro de una página que tambiénposee sus bordes, por lo cual, podríamos pensar que el rectángulo se encuentra dentro de otro rectángulo que, en este caso, es la página. La distancia que hay en-tre el borde de la página y uno de los lados del rectángulo es el margen (margin),que puede ser superior, inferior, derecho o izquierdo. Ahora bien, el espacio que

existe entre los lados del rectángulo y el texto interior es lo que se conoce comopadding. Para entender aún mejor esto, debemos pensar que el texto está envuel-to en su propia caja imaginaria o caja de texto.


58 www.redusers.com


47/56

● MARGIN Y PADDING DE UN SITIO GUÍA VISUAL

Contenido:espacio donde se ubica el texto o el elemento que actúa como contenido.

Padding: espacio entre el contenido y el borde del objeto contenedor.

Borde contenedor: es la línea que determina los límites del objeto contenedor

(puede estar visible o no).

Margin: determina la distancia entre el objeto contenedor y la ventana.

Borde de la ventana: es el borde del área de representación de la páginaweb en el navegador.

Una vez que comprendemos estos conceptos, será nuestra tarea aplicarlos según lo quedeseemos lograr en nuestro diseño. Por ejemplo, establecer un valor de paddingsueleser muy útil para evitar que un texto interior se vea muy encimado sobre las líneas deuna caja. En cambio, margin puede ser útil si pretendemos separar columnas.En algunos casos, estas opciones pueden trabajar en forma conjunta para ofrecermejores resultados.

¿Cómo solucionar los problemas de centradodel sitio web en diferentes resoluciones de pantalla?El problema de centrado de una página web es uno de los más frecuentes

para un diseñador. Si recorremos sitios de Internet, y los visualizamos en diferentes re-soluciones de pantalla -es diferente cuando comparamos monitores de proporciones

16:9 con los de 4:3-, descubriremos que, en muchas ocasiones, este problema no está resuelto de una forma adecuada para ser compatible con las necesidades de todos losusuarios. En este punto, analizaremos las soluciones posibles.

¿C ómo s o l uc i ona r l o s p rob l ema s de cen t rado de l s it i o w eb en d i f e ren tes res o l uc i ones de pan ta l l a?

59www.redusers.com


48/56

Figura 45. El problema de centrado puede ser imperceptible para algunos usuarios,

pero un buen diseñador no debe omitir nunca este tema en sus trabajos.

En algunos casos, para solucionar los problemas de centrado, puede ser suficienteasignar el atributo de centrado a una capa para que los elementos contenidos se

muestren de esa manera. Esto sería: .Sin embargo, en diseños que puedan presentar ciertos aspectos más complejos,deberemos tener en cuenta algunos conceptos adicionales. En primer lugar, esimportante destacar que, además de las diferencias entre las distintas configura-ciones posibles de pantallas, también hay diferencias entre los diferentes tipos denavegadores, tema sobre el cual profundizaremos en el capít ulo 3 de este libro.Sin olvidar esto, para resolver un problema de centrado de una página, podre-mos aprovechar las ventajas que brinda CSS. Para lograrlo, definiremos una capa que actuará como contenedora de los elementos o bien de las demás capasque formen parte de la página. A continuación, veremos un ejemplo, que puedeagregarse a la sección de estilos o en el archivo de estilos externo.

body {

background-color: #778f92;

margin: auto;

background-image: url(fondo.jpg);

background-repeat: repeat-x;

background-attachment:fixed;background-position: 0px 0px;


60 www.redusers.com


49/56


50/56

¿Cuáles son las diferentes opciones de menúsque se pueden crear al utilizar CSS?Los menús son elementos que, desde hace muchos años, se han ganado

un importante lugar en el armado del entorno gráfico de las aplicaciones informá-

ticas. Con el auge de Internet y la necesidad de brindarles a los usuarios una ma-nera práctica y ordenada de acceder a la información, éstos se convirtieron en una herramienta muy importante a la hora de crear interfaces para sitios web.De igual forma que ha ocurrido con las aplicaciones, los menús para sitios webs hanevolucionado, tanto en las funcionalidades que pueden brindar, como también enel diseño que ofrecen para ser más atractivos al público.Con los conceptos que aprendimos en el punto 7 de este capítulo, conocimos cómoaplicar diferentes opciones de estilos a un link. Así podemos darnos cuenta, que esos

efectos son muy similares a los que se utilizan con frecuencia para crear un menú.Como ya hemos explicado anteriormente, una de las ventajas del CSS consisteen permitir la separación de la estructura del diseño. Por este motivo, si creamosun menú HTML, pero basado su aspecto visual en estilos CSS, podremos reali-zar cambios de una manera más sencilla.

Diseñar un menú con estilos CSS a partir de una listaEn este ejercicio, en primer lugar, crearemos el contenido del menú, utilizando las

etiquetas de lista que ofrece HTML. El siguiente listado se ubicará dentro del cuer-po del documento en el lugar donde debe aparecer el menú.

Elemento 1 de menu

Elemento 2 de menu

Elemento 3 de menu

La etiqueta se utiliza para definir una lista conformada por elementos que, a suvez, se envuelven con la etiqueta . Para agregar un link a los elementos, simple-mente, recurrimos a la etiqueta href , y la utilizamos de la forma que ya hemos visto.

Figura 47. Si visualizamos el ejemplo que preparamos en un navegador,

veremos que aún el resultado está lejos de parecer un menú.


62 www.redusers.com


51/56

Para lograr que ese simple listado tenga el aspecto de un menú, debemos definir losestilos necesarios mediante CSS. Si el estilo lista no nos desagrada, pero deseamosmejorarlo, podemos recurrir a la siguiente alternativa.

#EstiloMenu {

list-style-type:square;

}

Con list-style-type, definimos el tipo de viñeta por utilizar. En este caso, definimosun cuadrado (square), pero también podemos determinar un círculo (circle), ningúnobjeto (none). También es posible utilizar una imagen pequeña, si cambiamos la lí-

nea porlist-style-image:url(imagen.gif)

. El valor que aparece entre paréntesis debeser modificado por la ruta y el nombre de la imagen que deseamos incluir. Ahora que conocemos la opción más simple, veremos cómo mejorar el aspectovisual del menú para, por ejemplo, mostrarlo de manera horizontal, con una ima-gen de fondo, otra posibilidad también puede ser un color, y con un efecto alpasar el mouse por encima de los elementos.

#EstiloMenu {

width: 900px;

height: 40px;

background: #c3c3c3 url(“fondoMenu.gif”);

background-repeat: repeat-x;

}

#EstiloMenu ul {

list-style: none;

margin: 0;

padding: 0;}

#EstiloMenu li {

float: left;

border-right: 1px solid #c3c3c3;

border-left: 1px solid #fff;

}

#EstiloMenu li a {display: block;

¿C uá l es son l as d i f e ren tes opc i ones de menú s que s e pueden c rea r a l u t i li za r C SS?

63www.redusers.com


52/56

color: #515e5e;


font-family: Verdana, Arial, Helvetica;

font-size: 11px;

font-weight: 500;

padding: 10px 7px 10px 7px;

}

#EstiloMenu li a:hover {

color: #fff;

background: #819292;

}

Para aplicar el estilo, podemos ubica

libro webmaster profesional - diseño,administracion y optimización de sitios web [espaÑol].pdf

Documents