Lovely mails

Blog dedicado a stationery, fondos para mails en Outlook.

3/7/07

Lección 6

Aquí se encuentra la lección 6 en inglés. Se trata de un slide show o exposición de diapositivas.

Necesitaremos:
- 4 imágenes del mismo tamaño, aprox. 300 pixeles (Utilicé cuatro fotografias de la misma niña)
- un fondo y
- música.

Todo tiene que estar en la carpeta Stationery.

Guardar el archivo (lo descargas del enlace) en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery.

Seguir las indicaciones y pautas que se han dado para la lección 1.

- - -

Aquí está el código con las indicaciones para realizar los cambios:

HTML
HEAD

STYLE TYPE="text/css"
!--
body {
font-family: "Comic Sans MS"; tipografía
font-size: 14pt; tamaño de la tipografía
margin-left: 350; margen izquierdo, al ancho de la fotografía o imagen hay que sumarle unos 10 pixeles, para que el texto no quede pegado.
margin-right: 10; margen derecho
background-color: #000000; color del fondo
color: #ffffff; color de la letra
}
--
/STYLE
/HEAD
BODY
BODY bgColor= #dad5ce aquí he puesto el mismo color que en el fondo background="C : \ program files \ common files \ microsoft shared \ stationery\ lesson6bk g.jpg" borrar toda la ruta y colocar entre comillas el nombre del archivo para el fondo y la extensión ej.: "fondo6.jpg"

Sample text.
p /p

!--
The DIV below holds the images that will will be shown in the slide-show.
Width and height should equal the largest Image dimensions.
--
DIV id=box style="POSITION: absolute; TOP: 0; LEFT: 0; WIDTH: 250; HEIGHT: 230" las medidas de las imágenes que para todas es la misma width es ancho y height alto, va en pixeles.
!--
This slideshow is much better when all the graphics are the same size.
Also, the graphics for the slide show should be numbered sequentially as shown from pic1 to pic#.
--
IMG id=pic1 src="file : // C: \ Program files \ common files \ microsoft shared \ stationery \ pic1here.gif" style="POSITION: absolute; TOP: 0; LEFT: 0; VISIBILITY: hidden"
IMG id=pic2 src="file : // C: \ Program files \ common files \ microsoft shared \ stationery \ pic2here.gif" style="POSITION: absolute; TOP: 0; LEFT: 0; VISIBILITY: hidden"
IMG id=pic3 src="file : // C: \ Program files \ common files \ microsoft shared \ stationery \ pic3here.gif" style="POSITION: absolute; TOP: 0; LEFT: 0; VISIBILITY: hidden"
IMG id=pic4 src="file : // C: \ Program files \ common files \ microsoft shared \ stationery \ pic4here.gif" style="POSITION: absolute; TOP: 0; LEFT: 0; VISIBILITY: hidden"
/DIV
son cuatro renglones, cuatro imágenes, deben quitar en cada uno toda la ruta y entre comillas colocar el nombre y extensión de cada imagen ej.: "foto1.jpg"

BGSOUND id=music src="file : // C: \ Program files \ common files \ microsoft shared \ stationery \ midinamehere.mid" loop=99
style="display: none"
aquí va la música, borrar toda la ruta y dejar solamente el nombre y extensión de tu archivo de música entre comillas, ej: "nocturno.mid"

SCRIPT language="VBScript"
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca

Dim w, p1, p2, nw, od, numPic, myTimer, tFlag, count, filterDuration, filterType

Set w=document.all

REM Initialize
sub setUp()
REM Enter the total number of images in the next line
numPic=4
REM Enter number of times to cycle images below
count=4
REM Transition filter type selection below.
REM Enter 1 for Blend transition
REM Enter 2 for Reveal Transition
filterType=1
if filterType=1 then box.style.filter="BlendTrans (Duration=2)"
if filterType=2 then box.style.filter="RevealTrans (Duration=2, Transition=3)"
REM Transition duration in seconds
filterDuration="3"
box.filters(0).Duration=filterDuration
nw=1
od=0
REM Transition flag - in case it is needed.
tFlag=0
REM Initially display first image
pic1.style.visibility="visible"
REM Do the transition after delay
myTimer=SetTimeOut("doIt",filterDuration*1000)
end sub

REM Do transition
sub doIt()
ClearTimeOut(myTimer)
REM Set for next images
nw=nw+1
REM Make sure image number is valid
if nwnumPic then
nw=1
count=count-1
end if
od=od+1
if odnumPic then od=1
REM Do the transition here
if tFlag=0 and count0 then
REM Set transition flag to signify transition in progress.
tFlag=3
REM Select Images according to count
REM Previous Image
Set p1=w("pic"&od)
REM Next image
Set p2=w("pic"&nw)
REM Prepare filter
box.filters(0).Apply()
REM Hide previous Image
p1.style.visibility="hidden"
REM Display next Image
p2.style.visibility="visible"
REM Play filter
box.filters(0).Play()
else
if count=0 then
REM Hide the last image
Set p1=w("pic"&od)
box.filters(0).Apply()
p1.style.visibility="hidden"
box.filters(0).Play()
REM Stop everything
exit sub
end if
end if
end sub

REM This subroutine runs when transition has finished.
sub box_OnFilterChange()
REM Transition completed so clear the flag.
tFlag=0
REM Wait a few seconds before next transition
myTimer=SetTimeOut("doIt",filterDuration*1000)
end sub

REM Keeps slide-show window on screen if text scrolls
sub window_OnScroll()
box.style.top=document.body.scrollTop
end sub

REM Everything starts here
sub Window_OnLoad()
On Error Resume Next
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
document.body.style.fontSize = 14+Res
setUp
end sub

/SCRIPT
/BODY
/HTML

- - -

Verificar en Vista previa. Volver a Modificar. Colocar "Aquí va el texto". Insertar la música desde Formato - Fondo. Achivo - Guardar como - Guardar el fondo en tu carpeta especial de stationeries, como archivo.eml
Volver a abrirlo desde allí y en vista Modificar, hacer doble clic sobre "Aquí va el texto" y escribir encima tu mensaje. Completar los datos del destinatario y asunto. Enviar.
El otro archivo guardado queda limpio para usar cuantas veces desees.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 5:39 p. m. 0 comments

20/6/07

Lección 5

Aquí se encuentra la lección 5 en inglés.
Necesitaremos
— un gif animado pequeño, que se moverá después en círculos a causa del script.
— un fondo, puede ser una imagen o una textura.
— un archivo de música.

Utilicé una imagen floral de 1024 x 768 y el gif animado es un colibrí de 61 x 48 pixeles.

Guardar el archivo (lo descargas del enlace) en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery. Seguir las indicaciones y pautas que se han dado para la lección 1.

- - -

Aquí esta el código con las indicaciones para realizar los cambios:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTMLHEAD
META http-equiv=Content-Type content= "text/html; charset = windows-1252 "BASE
href = "file: /// C: / Archivos de programa \ Archivos comunes \ Microsoft Shared \ Stationery \ "
STYLE type=text/css
!--
body {
font-family: "Comic Sans MS"; TIPOGRAFIA
font-size: 14pt; TAMAÑO DE LA LETRA
margin-left: 220; DISTANCIA EN PIXELES DESDE EL MARGEN IZQUIERDO HASTA EL COMIENZO DE LA ESCRITURA (dejar asi o cambiar a gusto)
background-color: #ffffff; DEJAR ASI, BLANCO, O PONER UN COLOR ACORDE CON TU IMAGEN DE FONDO
color: #F0F0FF; COLOR DE LA FUENTE
}
--
/STYLE
!-- An optional background image can be used but it will not scroll --BGSOUND
id=music style="DISPLAY: none"
src="lesson5.mid" MUSICA
loop=99
META content="MSHTML 6.00.2800.1593" name=GENERATOR/HEAD
BODY bgProperties=fixed bgColor= #ffffff DEJAR ASI, BLANCO, O PONER UN COLOR ACORDE CON SU IMAGEN DE FONDO
background="lesson5back.jpg" IMAGEN QUE USARAS COMO FONDO
DIV /DIV!-- This is the object in orbit. You should include the height and width --IMG
id=pic
style="LEFT: 50px; WIDTH: 72px ANCHO DE TU GIF; POSITION: absolute; TOP: 50px; HEIGHT: 95px ALTURA DE TU GIF"
src="lesson5pic.gif" GIF ANIMADO
SCRIPT language=VBScript
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
Dim w, wW, wH, myTimer, A, R, cx, cy, x, y

Set w=document.body

REM Initialize
sub window_OnLoad()
On Error Resume Next
REM Get Window dimensions
wW=w.clientWidth
wH=w.clientHeight
REM Set the Radius
R=75
REM Starting angle. Angles are in Radians. 1 degree = 3.14150/180 radians
A=0
REM Set the center of the circle to the window center
REM Note the offset due to the fact that the object is
REM positioned using its TOP and LEFT properties.
cx=wW/2-pic.offsetWidth
cy=wH/2-pic.offsetHeight
orbit
end sub

REM Move the object in a circle starting at an angle of 0, then increasing the angle.
sub orbit()
ClearTimeOut(myTimer)
REM Increase the angle
A=A+.01
REM Calculate the new coordinates
x=R*COS(A)+cx
y=R*SIN(A)+cy
REM Position the object.
pic.style.left=x
pic.style.top=y
REM Repeat for next angle change.
myTimer=SetTimeOut("orbit",20)
end sub

/SCRIPT
/BODY/HTML

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 3:48 a. m. 0 comments

8/6/07

Lección 4

Aquí se encuentra la lección 4, en inglés.
Se creará un friso sin uniones para utilizar como borde deslizante superior.
Elementos necesarios:
1) imagen según modelo:

espejada, con borde superior e inferior, en la que se deberá disimular la unión. Alto: 250-300 pixeles. Ancho: 300-400.
2) una trama con algún efecto de textura o con un patrón, haciendo juego con la imagen. Este es el mío:

3) música.

Guardar el archivo (lo descargas del enlace) en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery. Seguir las indicaciones y pautas que se han dado para la lección 1.

- - -

Este es el código la presente lección donde se marcará en rojo lo que hay que cambiar y en verde van las aclaraciones.

HTML

HEAD
STYLE
body {font-family: "Comic Sans MS" FUENTE ;font-size: 14pt TAMAÑO DE LA LETRA ;margin-left:30 DISTANCIA EN PIXELES ENTRE EL MARGEN IZQUIERDO Y EL COMIENZO DE LA ESCRITURA, SI NO TE GUSTA PUEDES MODIFICARLO; margin-right:0; background-color: #ffffff; color: #ffffff COLOR DE LA LETRA, PONER DE ACUERDO AL FONDO PARA QUE SEA LEGIBLE}
/STYLE
/HEAD
!-- An optional background image can be used but it will not scroll --
BODY background = "C: \ Program Files \ Common Files \ Microsoft Shared \ Stationery \ lesson4bkg.jpg" AQUI VA LA TRAMA PEQUEÑA CON EL PATRON O TEXTURA. BORRA TODA LA RUTA DE CARPETAS Y DEJA ENTRE COMILLAS SOLAMENTE EL NOMBRE DEL ARCHIVO Y EXTENSION (.jpg)

Sample text.

!-- THIS IS THE TOP BORDER IMAGE - YOU MUST ENTER THE HEIGHT AND WIDTH --
IMG id=bkg src="C: \ Program Files \ Common Files \ Microsoft Shared \ Stationery \ lesson4.jpg" AQUI VA TU IMAGEN O FRISO. BORRA TODA LA RUTA DE CARPETAS Y DEJA ENTRE COMILLAS SOLAMENTE EL NOMBRE DEL ARCHIVO Y EXTENSION (.jpg) style=" position: absolute; left:-1800; height:275 (PONER EN PIXELES LA ALTURA DE LA IMAGEN); width:269" (PONER EN PIXELES EL ANCHO DE TU IMAGEN)

BGSOUND src = "C: \ Program Files \ Common Files \ Microsoft Shared \ Stationery \ lesson4. mid" (AQUI VA LA MUSICA. BORRA TODA LA RUTA DE CARPETAS Y DEJA ENTRE COMILLAS SOLAMENTE EL NOMBRE DEL ARCHIVO Y EXTENSION (.mid) loop=99 style="display:none"

SCRIPT language=VBScript
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca
REM Thanks to Tar'Hom for the idea ; )
REM Revised May 20, 1999
Dim w, wW, wH, sH, wx, pW, pH, myTimer, x, xD, Res, calcFlag
Dim picX, picY, bxW, bxH, numPics

Set w=document.body

REM ************* MAKE CHANGES HERE *************

xD=1

REM *********************************************

REM Initialize
sub setUp()
On Error Resume Next
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
sH=w.scrollHeight
bH=wH
if sHwH then bH=sH
REM Set margins
w.style.marginTop=pH
REM Limit visible area
container.style.width=wW
container.style.top=0
container.style.left=0
REM Set the size of the scrolling area
box.style.height=pH
box.style.left=-(pW)
box.style.top=0
if calcFlag=1 then
calcFlag=0
setUp
end if
REM Start the scroll.
SF
end sub

REM universal scrolling routine.
sub SF()
ClearTimeOut(myTimer)
x=x+xD
if xD0 and x=0 then x=-(pW)
if xD0 and x-(pW) then x=0
REM Position the background image.
box.style.left = x
REM repeat (larger numbers give slower scroll below)
myTimer=SetTimeOut("SF",24)
end sub

REM Everything starts here
sub Window_OnLoad()
REM Get window dimensions
wW=w.clientWidth
wH=w.offsetHeight
REM Get users screen resolution
wx=window.screen.width
REM and adjust font size to match.
Res=INT(wx/128)
w. style. font Size = 14 + Res (HACER COINCIDIR CON EL TAMAÑO DE LA LETRA PUESTO ANTES)
REM Set flag to force one extra calculation
calcFlag=1
x=-(pW)
REM Get dimensions of background image.
pW=bkg.style.posWidth
pH=bkg.style.posHeight
REM Number of images across
numPics=INT((wx)/pW)+2
REM "Tile" the background (NOTE: Image is not positioned.)
for j=1 to numPics
data=""
data="IMG src='" & document.all("bkg"&i).src & "'"
box.insertAdjacentHTML "beforeEnd", data
next
REM Lets get started.
setUp
end sub

REM This runs if the window size is changed.
sub Window_OnResize()
setUp
end sub

/SCRIPT

!-- This is the top border made up of a SPAN inside a DIV - DO NOT CHANGE OR MOVE THE FOLLOWING --
DIV id=container style="position:absolute; top:0; left:-1400; width:800; height:600; z-index:-1; filter: BlendTrans (Duration=0)"
SPAN id=box style="HEIGHT: 4000px; POSITION: absolute; WIDTH: 3000px"/SPAN
/DIV

/BODY/HTML

- - -
Eso es todo. Pestaña Vista previa, verificar que todo luzca bien. Pestaña Modificar, escribir tu texto. Destinatario, Asunto.
Formato - Fondo - Sonido, buscar la música en tu pc y agregar.
Ya puedes enviar.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 4:02 p. m. 0 comments

7/6/07

Lección 3

Se trabaja con el mismo código que en la lección 2. Pero la imagen preparada es a la vez el fondo y la ilustración lateral, debe medir 1027 x 300 pixeles.
Abrir una imagen de 1027 x 300 pixeles. Rellenar con un color acorde a la imagen que vas a utilizar y aplicar un efecto ligero de textura. El mio está hecho con Texturizer - Sand - relieve 2, no muy pronunciado.
Insertar la ilustración a la izquierda que mida justo 300 pixeles de alto y de ancho 300-325. Esto va con recuadros y sombra.
También puedes colocar una imagen sin recuadro (sin fondo, un tube o un gif). Y hacerlo de otro modo: abrir el tube, aplicar filtros si se desea, llevarlo a 300 (hasta 325) de ancho y 300 (en caso de que sea un cuadrito, es decir con marco) o menos de 300 (si no tiene marco, para que exista una pequeña distancia) de alto. Después de terminar todos los detalles de la imagen, Imagen - Tamaño del lienzo, aumentar el ancho, dejando la ilustración a la izquierda, a 1027 (o 1024) pixeles. Poner otra capa, rellenar con color acorde, aplicar efecto de textura, bajar capa y fusionar capas, exportar como .jpg.
Se utiliza la misma explicación que para la lección 2, pero en el código se inserta esta nueva imagen que hace las veces también de fondo.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 6:26 p. m. 0 comments

2/6/07

Lección 2

Aquí se encuentra la lección 2 en inglés.
Se trata de un fondo liso, una imagen en el margen izquierdo, con scroll o deslizamiento y que se repite como un mosaico. Tiene música.
Se necesita una imagen de ancho: 300-325 ; alto: 300-375 pixeles. Y un color acorde para utilizar en el fondo.
Guardar el archivo (lo descargas del enlace) en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery. Seguir las indicaciones y pautas que se han dado para la lección 1.

- - -

Este es el código de la presente lección. Donde se marcará en rojo lo que hay que cambiar y en verde irán los comentarios:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTMLHEAD
META http-equiv=Content-Type content="text/html; charset=windows-1252"BASE
href="file://C: \ Archivos de programa \ Archivos comunes\Microsoft Shared \ Stationery\"
STYLE
body {
background-color: #37588A (ES EL COLOR DEL FONDO, PONDRAS EL NUMERO CORRESPONDIENTE AL COLOR QUE HAS ELEGIDO ACORDE CON TU IMAGEN); /* This sets the Background Colour for your stationery */
background-repeat: repeat-y; /*Left Border - Image repeats down the left side of the screen */
margin-left: 450 (ES LA DISTANCIA EN PIXELES ENTRE EL MARGEN IZQUIERDO Y EL COMIENZO DE LA ESCRITURA, DISTANCIA QUE DEBERAS ADAPTAR AL ANCHO DE TU IMAGEN PARA QUE QUEDE BIEN, ES DECIR QUE SI TU IMAGEN MIDE POR EJEMPLO 325 PIXELES DE ANCHO, ESTA MEDIDA LA TENDRAS QUE PONER EN 345, DE ESTA FORMA LA ESCRITURA ESTARA SEPARADA UNOS 20 PIXELES DEL BORDE DERECHO DE TU IMAGEN) ; /* Left Margin - Sets the margin in from the left side of the screen */
font-family: "Script MT Bold" (FUENTE O TIPOGRAFIA PONER EL NOMBRE CORRECTO Y COMPLETO) ; /* Default Font - Sets the default font for the stationery */
font-size: 18pt; (TAMAÑO O CUERPO DE LA TIPOGRAFIA) /* Default Font - Sets the size of the font */
color: #ffffff; (COLOR DE LA TIPOGRAFIA, DEBE ESTAR EN CONCORDANCIA CON EL COLOR DE FONDO, PARA QUE RESULTE LEGIBLE) /* Default Font - Sets the colour of the font */
text here (REEMPLAZAR ESTO POR UN TEXTO EN ESPAÑOL "AQUI VA EL TEXTO", O "ESCRIBIR AQUI")

}
/STYLE

META content="MSHTML 6.00.2800.1593" name=GENERATOR/HEAD
BODY bgColor= #ffffff (COLOCAR EL MISMO COLOR ELEGIDO PARA EL FONDO O USAR BLANCO PARA TODOS LOS TRABAJOS)
background="C: \ Program Files \ Common Files \ Microsoft Shared \ Stationery \ lesson2pic. jpg" (AQUI VA TU IMAGEN, QUITA TODOS LOS DATOS DE LA RUTA DE CARPETAS Y DEJA SOLAMENTE EL NOMBRE Y LA EXTENSION DE TU IMAGEN, EJ: "bird.jpg") (RECUERDA QUE TODOS LOS ARCHIVOS DEBEN ESTAR GUARDADOS EN LA CARPETA STATIONERY COMO SE EXPLICO EN LA PRIMERA LECCION)
DIV /DIV!--replace X.jpg with the full pathname for your graphic--BGSOUND
src="C: \ Program Files \ Common Files \ Microsoft Shared \ Stationery \ lesson2. mid" (AQUI VA LA MUSICA, QUITA TODOS LOS DATOS DE LA RUTA DE CARPETAS Y DEJA SOLAMENTE EL NOMBRE Y LA EXTENSION DE TU MUSICA, EJ: "vals.midi")
volume=-200 loop=infinite!--replace X.mid with the full pathname for your midi file--!--This is the Majik's scroll script--
DIV id=imageholder
style="Z-INDEX: -1; LEFT: 0px; POSITION: absolute; TOP: 0px"
SCRIPT language=VBScript
placement=0
nail=0
max=9

for temp=0 to max
document.write "img id=pics"&temp&" srcbr"
next

DIM newarray
newarray=Array(pics0,pics1,pics2,pics3,pics4,pics5,pics6,pics7,pics8,pics9)
for temp=0 to max
newarray(temp).src=document.body.background
next

document.body.background=" "
window.status="Click the image to Stop or Restart the scroll" (ESTE ES EL TICKER O LINEA QUE APARECE EN LA BARRA DE ESTADO Y QUE DICE "CLIC EN LA IMAGEN PARA DETENER O REINICIAR EL SCROLL". PONDREMOS EL TEXTO EN ESPAÑOL. Y al lado le podemos agregar nuestro copy. Con cuidado de no tocar ningun otro dato).

sub scroll()
if nail=1 then
exit sub
end if
if placement pics0.height then
setTimeout "move", 1
else
placement=0
setTimeout "move", 1
end if
end sub

sub move()
imageholder.style.top=-placement
placement=placement+1
setTimeout "scroll", 1
end sub

sub imageholder_onclick()
if nail=0 then
nail=1
elseif nail=1 then
nail=0
end if
scroll()
end sub

scroll()

/SCRIPT
/DIV/BODY/HTML

- - -

Antes de enviar vamos a Insertar nuestra música desde Formato para que no aparezca como adjunto.
Menú Formato - Fondo - Sonido - Buscar con Examinar nuestro archivo de música (en la PC), si no se ve es porque está seleccionado por defecto como Tipo de Archivo, Archivos de audio - wav, la otra opción es para midis. Puedes elegir que se reproduzca una a más veces o continuamente.
Escribir el mensaje.
Entonces sí, verificado que todo luzca bien y una vez completados los datos (destinatario y asunto), enviar el mail.
Aqui puedes ver el ejercicio terminado.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 6:49 p. m. 0 comments

20/5/07

Lección 1

Aquí se encuentra la lección 1 en inglés.
Se trata de un fondo liso, y una imagen en el margen izquierdo, sin movimiento y que se repite como un mosaico. No tiene música.
Se necesita una imagen de ancho: 300-325; alto: 300-375 pixeles. Y un color acorde para utilizar en el fondo.

Guardar el archivo (lo descargas del enlace) en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery.
En ese directorio tambien tienes que guardar tu imagen.
Abrir Outlook e ir a Mensaje - Mensaje nuevo con - Seleccionar diseño de fondo y buscar el archivo "lesson1example" con lo cual se abrirá un mail.
En el menu Ver, clic en Modificar Código fuente y eso ya queda así para siempre hasta que lo vuelvas a deseleccionar.
Todos tus mails tendrán en la parte inferior tres pestañas:
Modificar, desde alli puedes escribir el mensaje en si.
Código fuente, que es donde se trabaja haciendo los cambios que se indicarán en cada lección.
Vista previa, para ver cómo va quedando nuestro stationery.

- - -
Este es el código de la presente lección. Marcaré en rojo lo que hay que cambiar.

HTML
HEAD
STYLE type="text/css"
!--
body {
BACKGROUND-Attachment: fixed;
BACKGROUND-Repeat: repeat-y;
BACKGROUND-Color: #A7B6CD;
COLOR: #000000;
FONT-Size: 12pt;
FONT-Family: 'Comic Sans MS';
FONT-Weight: normal;
MARGIN-Left: 400;
MARGIN-Top: 1;
MARGIN-Right: 10;
MARGIN-Bottom: 20;
}
--
/Style
/HEAD
BODY background= "C:/program files/common files/microsoft shared/ stationery/ lesson 1 pic. jpg"
P> /P
!-- Background image will tile along the left side, text will scroll with background image.
--

/BODY
/HTML

- - -

Hay que modificar con cuidado, no quitando ningun signo que pueda afectar el código.
BACKGROUND-Color: #A7B6CD;
Es el color del fondo, quiere decir que allí reemplazarás por los números de tu color elegido. No tocar ningun otro dato, por ej. si quiero poner fondo negro quedaría así:
BACKGROUND-Color: #00000;

El color que sigue es el color de la letra, que será acorde al color del fondo, a fin de que sea legible.
Font Size: es el cuerpo de la letra
Font Family: la fuente (Arial, Times o la que te guste, poner bien el nombre fijándote en el listado de fuentes en otro programa o en el mismo Outlook)
Font - Weight: es el grosor, weight significa peso: normal o bold serían las opciones
Margin left es el margen izquierdo, que estará en relación al ancho de tu imagen; si tu imagen tiene 400 pixeles de ancho, le pondrás 450 aprox. y alli comienza la escritura de tu mail. Por lo que ese dato lo tienes que adaptar.
Margin top: es el margen superior. Puedes poner 10, 15 o lo que te guste.

Ahora viene el dato para poner la imagen que preparaste:
BODY background= "C: / program files /common files / microsoft shared / stationery / lesson 1 pic. jpg"
La imagen la debes de tener guardada en: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery. De lo contrario no se verá.
En esta línea que marqué en rojo, sí tienes que borrar varias palabras que se generan en el código cuando movemos los archivos de un lado a otro.
Supongamos que tu imagen se llama como la mía: ballet.jpg
Entonces quedaría así:
BODY background="ballet.jpg"
es decir que :
todo lo que está en verde lo he borrado y lo he reemplazado por el nombre de mi imagen.
BODY background= "C: / program files / common files / microsoft shared / stationery / lesson 1 pic. jpg"

Eso es todo lo que hay que cambiar.
Volver a la vista Modificar. Escribir el texto y los datos de destinatario y asunto y enviar.

Aclaración: Al transcribir el código en el blog, he tenido que eliminar los símbolos < > para que el blog no lo interpretara justamente como código (tags). Ya que no son necesarios para la explicación y porque el código correcto debes tomarlo del enlace que se ha dejado más arriba.
Aquí puedes ver el ejercicio terminado.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 4:22 a. m. 0 comments

15/5/07

Fondo con imagen lateral en scroll

Este stationery, cuyo script descargas aquí, tiene un fondo con imagen en el lateral izquierdo, que se va deslizando en sentido vertical, y una zona para escribir el texto.

Se hizo en PSP un fondo de 1024 (la medida de mi resolución de pantalla) x 400 pixeles de alto (esta medida se obtuvo de una captura de pantalla del modelo de la autora)
Se tomaron dos colores de las imágenes (uno claro y otro oscuro, que servirán también para cuando se modifique el código) y se aplicó en una capa el filtro Mura's Meister - Copies.

Modificaciones en el código (acotaciones entre parentesis):
background-color: #9A3B37; (color de fondo, se puso el color más oscuro)
border: ridge 2px #9A3B37; (color de borde, el mismo anterior)
scrollbar-base-color: #943231; (los colores de la barra de desplazamiento que aparecerá cuando escribamos un texto extenso en nuestro mail)
scrollbar-track-color: #943231;
scrollbar-highlight-color: #e79e82;
scrollbar-shadow-color: #e79e82;
scrollbar-arrow-color: #e79e82;
}
.mess{
border: double 10px #592320; (el borde doble de la zona de texto, se cambió el color)padding:10px;
text-align:center;
font-family:Verdana; (se cambió la tipografia a Papyrus)
font-weight:bold; (se eliminó este renglón, por no quererla en bold)
font-size:12pt; (se cambió el tamaño de la letra a 14 pt)
color:#522526; (se puso color blanco)
overflow:auto;
width:35%;
height:70%;
right:20px; (distancia del margen derecho, se aumentó a 50 pixeles, para que la zona de texto se acercará más a la imagen del fondo)
top:15%;
position:absolute;
background-color: #EFD7D5; (se puso el color más claro, para esto que es el fondo de la zona de texto)
filter:Alpha(Opacity=45);
}
A:link { color: #522526 } (se cambiaron los colores para un eventual enlace en nuestro mail, por un color que resalta en el fondo elegido)
A:visited { color: #522526 }
A:hover { color: #522526 }
A:active { color: #522526 }
/style
/head
body background="XXXX.jpg" scroll="no"> (aquí va la imagen de nuestro fondo)
bgsound src="D:\Mijn documenten\XxXX.mid" balance="0" volume="0" loop="-1" (aquí va la música elegida)
div class="mess" Hier dubbelklikken voor tekst (aqui se reemplazó el texto por uno en nuestro idioma "Hacer doble clic aquí para poner tu texto")
script language=vbscript>
'------------------------------------------'
please leave all these lines in
'Script gemaakt door JettyM
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
window.status=" XXXXXXXXXXXXXXXXX " (aquí se colocó, como en los casos anteriores, a la autora del script y mis datos como autora de la versión del stationery)
La vista previa de mi trabajo:

Aquí el stationery de la autora del script y aquí mi versión.

Etiquetas: Tutoriales HTML

escrito por Miss Daisy @ 12:21 a. m. 1 comments

13/5/07

Tabla y textos en marquee

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

escrito por Miss Daisy @ 10:08 p. m. 0 comments

12/5/07

Tabla y fondo overflow

Para hacer un stationery sencillo con una tabla central que contiene una imagen, y un fondo deslizante, como se muestra arriba, descargamos el script.
El script está contenido en una página .html que se abre con el programa Front Page o Dreamweaver. (Posteriormente vi que también se puede modificar en Outlook)
Guardar como y debemos seguir esta ruta dentro de nuestra PC: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery, como muestra la siguiente captura:

En cualquiera de los dos programas utilizados lo más probable es que el archivo se abra en vista normal, para poder ver el código html en el Front Page en la parte inferior hay una pestaña llamada HTML, que se debe pulsar:

Y en el Dream hay que ir al Menu Ver - Código:

Esto es lo que veremos, el código html que contiene el script del stationery:

Muchos de estos datos pueden ser cambiados para adaptarlos a nuestro gusto.
Suspendemos entonces esta parte y vamos a preparar los siguientes elementos:
a) una imagen que con sus marcos, debe medir 350 pixeles de ancho.
b) una imagen acorde que se utilizará como fondo.
c) un archivo de música, puede ser .midi (en los Enlaces del margen derecho de este blog encontrarás webs donde puedes descargar música para insertar en los mails)
d) varios colores que puedes tomar de tu imagen o de una tabla de colores.

Una vez que tenemos todos estos elementos, guardar los archivos (las dos imágenes y la música) en la misma carpeta Stationery, donde antes se guardó el html
Abrir nuevamente el archivo .html con el código, ir a vista código y comenzar a cambiar algunos datos.

Border:#ff0000 10px ridge
Aquí podemos cambiar el grosor y el color del borde.Tendremos cuidado en seleccionar y solamente reemplazar los datos que correspondan, y no cambiar ningún otro.
Pondré un color verde tomado de mi imagen, y cambiaré el ancho a 5 px:
Border:#59521e 5px ridge
Y si no queremos borde, directamente borrar ese renglón. O poner 0 px.
- - -
Los que siguen se refieren a los colores de la barra de desplazamiento (scrollbar) y es por eso que debemos tener varios colores preparados, que combinen con nuestra imagen y fondo.
Track es la parte inferior de la barra; base la superior desde donde podemos subir y bajar; shadow, la sombra; highlight, la luz (los bordes) y arrow la flechita.
Puse el mismo verde del borde y deje los datos que estaban en color blanco (ffffff), iguales.

Podemos cambiar y obtener la vista previa de como va quedando el trabajo, en Dreamweaver pulsando la tecla F12 y en Front Page, en la parte inferior, al lado de la pestaña HTML, la que dice "Vista previa".
Siempre hay tiempo de regresar a este archivo y modificarlo, aun cuando ya estemos viendo el fondo en el Outlook.
- - -
Los siguientes datos, se refieren a la tabla donde va el texto:
Border:#ff0000 5px ridge;
Padding:10px;
Font-Family:Broadway;
Font-Size:20;
Color:#ffffff;
background-color:#ff0000;
width:100%;
height:175px;
overflow:auto;

Border: podemos cambiar color y grosor.
Font-Family: podemos indicar otra tipografía.
Font-Size: podemos indicar otro tamaño.
background-color: aquí colocar un color a tono con nuestra composición.
Si cambiamos el color del fondo, tambien la tipografía debe tener un color acorde, por lo menos para que sea legible.
El resto de los datos los dejamos iguales.
- - -
tab1{border: #ff0000 10px ridge;
Esta es la tabla más grande, podemos cambiar el borde y colocarlo con las mismas características que el borde externo.
- - -
body bgcolor=#ffff00
background="XXXX.jpg"
BGSOUND balance=0 src="3.mid"
volume=0 loop=-1
Aquí se hace referencia al color e imagen del fondo y a la música.
Cambiamos el color del fondo y le colocamos el mismo que tiene la tabla más pequeña donde va el texto y en la imagen ponemos los datos de la imagen que hemos preparado para el fondo. Lo mismo hacemos en BGSOUND, reemplazamos y colocamos el nombre de nuestro archivo. mid o midi.
Asi queda mi codigo:
body bgcolor=#cec8d2
background="back189.jpg"
BGSOUND balance=0 src="bjorn__lynne-a_lifetime_of_moments.mid"
volume=0 loop=-1
- - -
Los datos que siguen los dejamos, se refieren a la tabla central y vamos a esto que nos interesa: img src="XXXX.jpg" /
Alli colocaremos el nombre de nuestra imagen principal.
En mi caso queda asi: img src="madre.jpg" /
- - -
Aquí también hacemos un cambio: div class="div1">Hier tekst/div
Reemplazamos "Hier tekst" por "Aquí va el texto" o "Escribir aquí".
- - -
window.status=" XXXXXXXXXXXXXXX "
Aquí podemos poner el texto que deseamos se vea en la parte inferior de la pantalla (barra de estado), puede ser un mensaje o el copyright.
En mi caso colocaré a la autora del script y luego mi nombre:
window.status=" Script by Jetty / http://www.molehofje.com/ ~ Stationery by MissDaisy / http://missdaisymails.blogspot.com/ "
Se puede colocar el nombre del autor de la imagen, de la música, etc.
Eso es todo. Si estamos conformes guardar.

Recomendacion importante: con respecto a los archivos de imágenes y música, muchas veces al mover el archivo html de una carpeta a otra se genera en el código la ruta de las carpetas y nos aparece algo asi como File: Archivos de programa / Archivos... etc., todo eso debe ser eliminado y entre las comillas sólo debe quedar el nombre del archivo limpio y su extensión (jpg, gif, mid, wav, etc.). Ejemplo:
img src="madre.jpg"
background="back189.jpg"
BGSOUND balance=0 src="bjorn__lynne-a_lifetime_of_moments.mid"

- - -
Abrir el programa Outlook Express.
Menú: Mensaje - Mensaje nuevo con - Seleccionar diseño de fondo.

Nos lleva a la carpeta Stationery, buscar el que acabamos de realizar.

Hacer doble clic donde dice Aqui va el texto y escribir nuestro mensaje. Colocar los datos del destinatario y asunto. Si pulsamos en enviar, nos aparecerá el siguiente mensaje:

Y es que tenemos que insertar correctamente la música.
Menú: Formato - Fondo - Sonido:

Al hacer clic en Examinar veremos que no estamos en la carpeta Stationery que es donde tenemos nuestro archivo de música. Asi que buscamos la ruta: C - Archivos de programa - Archivos comunes - Microsoft Shared - Stationery.
Una vez alli, cambiar Tipo de archivos a midi (en este caso porque es un midi):

Seleccionar el tema musical que pusimos en nuestro stationery.
El siguiente cuadro nos presenta la posibilidad de elegir si deseamos que la melodía suene una o más veces o continuamente. Elegir lo que nos parezca mejor. Aceptar.
Ya podemos enviar nuestro mensaje.

Hasta aquí aprendimos a modificar un script y adaptarlo a nuestro gusto y necesidades.
Si el trabajo que hemos realizado lo queremos compartir para que otras personas lo utilicen con sus mensajes (no el script pues éste no nos pertenece y se descarga de la web de la autora, sino el stationery que hemos hecho en este tutorial), lo guardamos como .eml que es el formato más práctico.
Lo podemos enviar adjunto como regalo a una amiga. O dejarlo en una web para descargar.
El procedimiento es muy sencillo. Repetir los primeros pasos en el programa Outlook: Mensaje - Mensaje nuevo con... Abrir el stationery. Insertar la música, como se explicó antes.
Archivo - Guardar como. Por defecto se guarda en el formato que deseamos que es el .eml Buscar un lugar en nuestro PC o crear una carpeta "Mis Stationery", le damos un nombre y guardamos.
Con este formato, quien lo reciba, sólo tendrá que hacerle doble clic para que se abra el stationery en su programa Outlook, luego de lo cual, deberá colocar su propio texto, completar los datos de envío (destinatario y asunto) y enviar. Por la música no se debe preocupar porque ya está inserta en el mensaje.

Una vista previa de mi trabajo: