El primer tutorial fue extenso, porque hubo que explicar, ademas del stationery, muchos otros aspectos que hacen a los programas que tenemos que emplear, dirigido por y para quienes debutan en este tema. (Posteriormente prescindiremos de los programas Front Page y Dreamweaver para realizar los cambios dentro del Outlook)
A partir de este tutorial, me referiré solamente a la modificación del código, para no repetir innecesariamente las mismas indicaciones.
Una vez que te familiarices con éste y veas lo sencillo que es, ya podrás tomar la iniciativa de hacer tus propias prácticas y "experimentos".
He tomado el script de la misma web que en el primer ejemplo: MoleHofje. Tiene una tabla central con dos columnas, en una va el texto y en la otra la imagen principal. Y lleva dos textos en marquee (marquesina) es decir que se desplazan: el titulo, de derecha a izquierda, y el texto del mensaje, de abajo hacia arriba. La música está relacionada con los textos.
Como en el caso anterior, tendremos lista nuestra imagen, trabajando en el mismo ancho que el modelo, el fondo, la música y colores.
En mi caso, como encontré un archivo de música .wav, que es otro formato liviano y de mejor calidad que el midi, con el tema "Diamonds are the girl's best friend", busqué una imagen de Marilyn Monroe, que es quien lo cantaba, y como la que me gustó era en blanco y negro, decidí que todos los colores de mi stationery serian esos, y algun gris. Podría también llevar un fino detalle en rojo.
Cambios en el código: colocaré entre paréntesis, en verde, las acotaciones.
BORDER: #807d46 3px ridge; (color y ancho del borde externo, cambié solo el color)
FONT-WEIGHT: bold; (es la fuente del título o texto superior)
FONT-SIZE: 24pt; (puse aquí un cuerpo mas pequeño)
SCROLLBAR-HIGHLIGHT-COLOR: #b5b266; (todos los colores del scrollbar fueron cambiados por blanco, negro, gris y la flechita "arrow" rojo)
SCROLLBAR-SHADOW-COLOR: #b5b266;
SCROLLBAR-ARROW-COLOR: #b5b266;
SCROLLBAR-TRACK-COLOR: #807d46;
FONT-FAMILY: Georgia; (fuente del título o texto superior, se cambió a Tahoma)
SCROLLBAR-BASE-COLOR: #807d46;
BACKGROUND-COLOR: #fbfcf7; (el color del fondo se cambió a negro, a pesar de que lleva también una imagen de fondo, debemos colocar un color apropiado, pues a veces la imagen demora en cargarse y entonces se ve este color)
MARGIN: 80px 0px 0px;
}
(esta es la zona donde va el texto donde hay que escribir)
/*achter height de hoogte van het plaatje*/
.mess {
BORDER: #b5b266 1px solid; (color del borde)
FONT-WEIGHT: bold;
FONT-SIZE: 12pt; (aquí puse un tamaño más pequeño para la tipografia)
FILTER: shadow(color=#000000, direction=140, strength=2);
WIDTH: 200px;
COLOR: #ece99c; (cambié el color a negro)
FONT-FAMILY: Georgia; (cambie a Tahoma)
HEIGHT: 400px;
TEXT-ALIGN: center;
(si llegamos a agregar la dirección de un sitio web en nuestro texto, al escribir el mail, se crearía un enlace; aquí se definen los colores de los enlaces, se pusieron todos en rojo)
A:link { color: #ECE99C }
A:visited { color: #ECE99C }
A:hover { color: #ECE99C }
A:active { color: #ECE99C }
/style
/head
body background="XXXX.jpg" (la imagen del fondo)
bgsound src="C:\Mijn muziek\XXXX.mid" balance="0" volume="0" loop="-1" (la musica)
DIV style="BORDER-BOTTOM: #807d46 3px ridge; LEFT: 0px; WIDTH: 100%; TOP: 0px; POSITION: absolute; BACKGROUND-" (se refiere a la tabla superior donde va el titulo o texto) (se cambiaron solamente los colores: fondo y borde)
MARQUEE style="FILTER: shadow(color=#ECE99C, direction=140, strength=2)" (se cambió el color de la sombra del texto a blanco)
scrollAmount=3 vspace=5 scrollDelay=15 width="100%"
!-- horizontale marquee --
hier jouw tekst (se reemplazó con parte de la letra de la canción que se escucha)
/MARQUEE/DIVTABLE style="BORDER: #807d46 3px ridge;" cellSpacing=15 align=center bgColor=#807d46 (Estos son los datos de la tabla central; aquí se cambiaron los colores de bordes y fondo, para uno de los bordes se utilizó el rojo igual que las flechitas del scroll)
TR
TD align=center
TABLE cellSpacing=10 borderColorDark=#b5b266 cellPadding=10 align=center
bgColor=#807d46 borderColorLight=#b5b266 border=1
TR
TD align=center
MARQUEE class=mess scrollAmount=2 scrollDelay=15 direction=up
DIV style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 100%"
Hier dubbelklikken voor tekst (se reemplazó por "Hacer doble clic aquí para poner tu texto")
/MARQUEE/TD
TD align=center
!-- hier je plaatje --
IMG src="XXXX.jpg" (ésta es la imagen principal)
/TD/TR/TABLE/TD/TR/TABLE
script language="VBScript"
'------------------------------------------
'please leave all these lines in
'Script (1) gemaakt door JettyM 3-6-2005
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
window.status=" XXXXXXXXXXXXXX " (se reemplazó como en el primer tutorial, con los datos de la autora del script y los propios, es el texto que aparece en la parte inferior de la pantalla, barra de estado)
La vista previa de mi trabajo:
Aquí el stationery de la autora del script y aqui mi versión.
Etiquetas: Tutoriales HTML |
