|
Barra de Scroll:
Algo que
debemos tener en cuenta
es que no todos los
navegadores aceptan la
personalización de la
barra de scroll, es
decir, nosotros podemos
colorearla pero
únicamente será visible
así en Internet
Explorer.
Dreamweaver ajusta su
código html a la
tecnología W3C (World
Wide Web Consortium) que
explicado de forma muy
resumida y sencilla es
una manera de escribir
el código bajo un
standard y que ese
código sea aceptado por
la mayoría de los
navegadores existentes.
Teniendo
lo anteriormente dicho
en cuenta, si añadimos
el código necesario para
modificar el coloreado
de la barra de scroll,
Dreamweaver no nos
dejará visualizarlo
cuando visualicemos
página con F12. Para
ello debemos suprimir
una línea que hay al
principio del código
html:
En el
enlace de Dynamicdrive
nos proporcionan el
código necesario para
colorear la barra lo
copiamos en el
portapapeles y lo
pegamos justo antes de
la etiqueta </head>:
Vamos a
ver a qué se corresponde
cada término, puedes
colorear uno o todos,
fíjate que en el código
que se proporciona en
dynamicdrive aplica 3
colores nada más. Como
siempre, la elección es
tuya:
<style
type="text/css">
<!--
BODY{
scrollbar-face-color:#75EA00;
scrollbar-arrow-color:brown;
scrollbar-track-color:#EEEEEE;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>
Para
obtener el código de los
colores puedes usar
cualquier programa de
diseño gráfico como
Photoshop o Corel Paint
Shop Pro entre otros o
bien usar la carta de
colores web que te pongo
más abajo (usándola
también te aseguras que
lo que tú ves es lo que
los demás verán también
en el navegador ya que
el navegador usa su
propia carta de colores
que puede no coincidir
con los colores del psp
o ps):
Carta de Colores Web
|
#000000
|
#333333
|
#666666
|
#999999
|
#CCCCCC
|
#FFFFFF
|
|
#000000
|
#003300
|
#006600
|
#009900
|
#00CC00
|
#00FF00
|
|
#000033
|
#003333
|
#006633
|
#009933
|
#00CC33
|
#00FF33
|
|
#000066
|
#003366
|
#006666
|
#009966
|
#00CC66
|
#00FF66
|
|
#000099
|
#003399
|
#006699
|
#009999
|
#00CC99
|
#00FF99
|
|
#0000CC
|
#0033CC
|
#0066CC
|
#0099CC
|
#00CCCC
|
#00FFCC
|
|
#0000FF
|
#0033FF
|
#0066FF
|
#0099FF
|
#00CCFF
|
#00FFFF
|
|
#330000
|
#333300
|
#336600
|
#339900
|
#33CC00
|
#33FF00
|
|
#330033
|
#333333
|
#336633
|
#339933
|
#33CC33
|
#33FF33
|
|
#330066
|
#333366
|
#336666
|
#339966
|
#33CC66
|
#33FF66
|
|
#330099
|
#333399
|
#336699
|
#339999
|
#33CC99
|
#33FF99
|
|
#3300CC
|
#3333CC
|
#3366CC
|
#3399CC
|
#33CCCC
|
#33FFCC
|
|
#3300FF
|
#3333FF
|
#3366FF
|
#3399FF
|
#33CCFF
|
#33FFFF
|
|
#660000
|
#663300
|
#666600
|
#669900
|
#66CC00
|
#66FF00
|
|
#660033
|
#663333
|
#666633
|
#669933
|
#66CC33
|
#66FF33
|
|
#660066
|
#663366
|
#666666
|
#669966
|
#66CC66
|
#66FF66
|
|
#660099
|
#663399
|
#666699
|
#669999
|
#66CC99
|
#66FF99
|
|
#6600CC
|
#6633CC
|
#6666CC
|
#6699CC
|
#66CCCC
|
#66FFCC
|
|
#6600FF
|
#6633FF
|
#6666FF
|
#6699FF
|
#66CCFF
|
#66FFFF
|
|
#990000
|
#993300
|
#996600
|
#999900
|
#99CC00
|
#99FF00
|
|
#990033
|
#993333
|
#996633
|
#999933
|
#99CC33
|
#99FF33
|
|
#990066
|
#993366
|
#996666
|
#999966
|
#99CC66
|
#99FF66
|
|
#990099
|
#993399
|
#996699
|
#999999
|
#99CC99
|
#99FF99
|
|
#9900CC
|
#9933CC
|
#9966CC
|
#9999CC
|
#99CCCC
|
#99FFCC
|
|
#9900FF
|
#9933FF
|
#9966FF
|
#9999FF
|
#99CCFF
|
#99FFFF
|
|
#CC0000
|
#CC3300
|
#CC6600
|
#CC9900
|
#CCCC00
|
#CCFF00
|
|
#CC0033
|
#CC3333
|
#CC6633
|
#CC9933
|
#CCCC33
|
#CCFF33
|
|
#CC0066
|
#CC3366
|
#CC6666
|
#CC9966
|
#CCCC66
|
#CCFF66
|
|
#CC0099
|
#CC3399
|
#CC6699
|
#CC9999
|
#CCCC99
|
#CCFF99
|
|
#CC00CC
|
#CC33CC
|
#CC66CC
|
#CC99CC
|
#CCCCCC
|
#CCFFCC
|
|
#CC00FF
|
#CC33FF
|
#CC66FF
|
#CC99FF
|
#CCCCFF
|
#CCFFFF
|
|
#FF0000
|
#FF3300
|
#FF6600
|
#FF9900
|
#FFCC00
|
#FFFF00
|
|
#FF0033
|
#FF3333
|
#FF6633
|
#FF9933
|
#FFCC33
|
#FFFF33
|
|
#FF0066
|
#FF3366
|
#FF6666
|
#FF9966
|
#FFCC66
|
#FFFF66
|
|
#FF0099
|
#FF3399
|
#FF6699
|
#FF9999
|
#FFCC99
|
#FFFF99
|
|
#FF00CC
|
#FF33CC
|
#FF66CC
|
#FF99CC
|
#FFCCCC
|
#FFFFCC
|
|
#FF00FF
|
#FF33FF
|
#FF66FF
|
#FF99FF
|
#FFCCFF
|
#FFFFFF
|
|
|
Estos son
los colores que yo he
elegido:
<style>
<!--
body
{
scrollbar-face-color:
#996633;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color:
#996633;
scrollbar-3dlight-color:
#996633;
scrollbar-shadow-color:
#CC9900;
scrollbar-darkshadow-color:
#CC9900;
scrollbar-track-color:
#CC9900;
}
//.Estilo1 {color:
#ECE9D8}
-->
</style>
Ahora
guardamos nuestra pagina
(clic en F12) y la
visualizamos en el
navegador y esto es lo
que veremos:
Mi página Web
Para
enseñarme este resultado
en el foro: Archivo -
Guardar como y nómbralo
parte5.html
Ya
queda menos. Nos
vemos en el siguiente tutorial. |
Material necesario para empezar a trabajar:
