Etiquetas: Tutoriales HTML

Etiquetas: Tutoriales Scrippy

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

Etiquetas: Tutoriales Scrippy

Etiquetas: Tutoriales HTML

Etiquetas: Scrippy

Etiquetas: Tutoriales Scrippy

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

Si estamos muy satisfechas con el stationery que acabamos de hacer y deseamos utilizarlo en el futuro, antes de colocarle el texto, lo guardamos desde el Outlook como .html, porque los archivos de Scrippy (.scc) exigen que ninguno de los elementos insertos haya cambiado de lugar y es muy probable que con el tiempo o los cambies o los borres. Asi que la seguridad está en guardar tu stationery desde Outlook como .html

- - -

Aquí puedes ver el stationery terminado.

Etiquetas: Tutoriales Scrippy