Como hacer esta ventana

Se trata de copiar su código y pegarlo dentro de tu pagina

en Vista Código, y una vez pegado modificarlo

colores, medidas, borde, texto,..etc.

Se puede utilizar para poner

Textos, Imágenes, Una lista de enlaces

Recordar que la barra  deslizante

solo se verán cuando lo mires en Vista previa

Asi de paso vamos aprendiendo hacer pequeñas modificaciones en códigos

Os explico un poco el total de esta pagina y dentro de ella creáis esta ventana

1º Vamos hacer el fondito de pagina

Abrir un paño de 12 x12 pixeles en el PSP

rellenamos de color, con la herramienta Diseño trazamos una línea en diagonal, ampliar con la lupa para verlo mejor

V-1.jpg picture by nema13

Quedara algo asi:

V-2.jpg picture by nema13

 

INSERTAR TABLA

 Filas 3 Columnas 1

Ancho en pixeles 900

Alineación Centrar

de momento dejamos el Margen, Espaciado y Borde como viene por defecto, ya lo modificaremos después

en la 1ª Celda insertamos otra tabla

Filas 1 Columnas 1 el resto lo dejamos todo a 0

Ancho en pixeles 400

Alineación Centrar

Esta tabla será para meter el código de la ventana

ponemos el cursor en el centro vamos a vista código

<DIV align=center>
<div style="
width: 250pt; height: 200pt;
background-color: #ffff99;
color: #000000;
border-style: inset;
border-color: #A852FF;

border-width=20px;
overflow: auto;
scrollbar-face-color: #cc99ff;
scrollbar-highlight-color: #FFFF52;
scrollbar-shadow-color: #ccccff;
scrollbar-3dlight-color: #FFFF52;
scrollbar-arrow-color: #FFFF52;
scrollbar-darkshadow-color: #8f1fff;

scrollbar-track-color: #A852FF"
<p align="center">
Aquí va tu texto
o
imagen
</P></DIV></DIV>

donde parpadee el cursor pegamos el código y modificamos según los colores de nuestra pagina

1º nos aparecerá asi en vista previa

Aquí va tu texto o imagen

macaco01.gif picture by nema13

Vamos otra vez a vista código y modificamos

Datos para modificarlo:

1.- MARCO EXTERIOR

Width :Ancho del recuadro
Height : Altura del recuadro
Back Ground-color : Color de fondo
Color: Color de la letra ( a menos que lo cambies dentro de el área de código html)
Border-Style: el estilo que tendrá el borde podrás probar con estos:
none | dotted | dashed | solid | double | groove | ridge | inset | outset
Border-Color: Color que tendrá el borde
border-width=20px anchura del marco

2.-COLORES DE BARRA

Guardar esta captura en vuestro PC os puede valer para posibles modificaciones

V-3.jpg picture by nema13

Os dejo otro código mas sencillo, es el que yo tengo en la barra de la pagina

Se puede poner como Pegado especial,  por si no recordáis esta opción,  AQUÍ  explique como

 

<!--webbot bot="HTMLMarkup" startspan --><style>


body { scrollbar-arrow-color: #BF7D89;

scrollbar-base-color: #BF7D89;

scrollbar-face-color: #F8DBDF;

scrollbar-highlight-color: #BF7D89;

scrollbar-shadow-color: #BF7D89; }

</style>

<!--webbot bot="HTMLMarkup" endspan -->

 

A continuación y aprovechando la bromita del monito voy a explicar como insertar una capa

 si os fijáis  al meter el dibujo en una capa podemos jugar con ella y ponerla encima de la parte que queramos

claro, que la imagen debe de ser gif , sin fondo, probé con imágenes en PNG y también funciona

solo que asi se vería con unos exploradores y con otros no, crearía un fondo blanco

existen códigos para eso, yo aun no he conseguido ninguno, por tanto vamos hacer la practica con un GIF

Vamos a

V-4.jpg picture by nema13

se os creara este recuadro,  poniendo el ratón en los puntos, se agranda o achica,

para moverla, ratón encima de donde pone capa, sale la cruceta y ya puedes pasearla por toda la pagina

pegamos nuestro gif dentro

V-5.jpg picture by nema13

Si veis la capa asi solo con pincharla se activa de nuevo

V-6.jpg picture by nema13

lo digo porque a mi a veces me ha pasado la he perdido, se aprecia poco si el color de nuestra pagina es oscuro

la colocamos donde mas nos guste y vamos a Vista previa, notareis que no esta en el mismo punto que se puso

se trata de ir haciendo estos pasos hasta que quede en el sitio

V-7.jpg picture by nema13

estas dos capturas están tomadas en la misma posición la 1ª en Vista diseño, la 2ª en Vista previa

Por ultimo os dejo el enlace a una pagina  de dibujitos en gif muy bonitos

....»»»MÍRALOS http://www.tanjas-gifbildli.ch/

..

Listado lecciones

Fuente:http: //facilspain.spaces.live.com/

macaco02.gif picture by nema13

Tutorial creado por Mane - 2008