Tecnología

Inicio

Cómo hacer de desplazamiento banners en un sitio web

Existen múltiples maneras de crear una pancarta con el desplazamiento de texto. La forma más sencilla de obtener una idea de cómo funciona el proceso es crear una pancarta con un programa de edición de texto, como el Bloc de notas que es parte de Windows. En el Bloc de notas puede crear una página Web corta demostración de desplace de capacidades utilizando algunos elementos HTML o código de scripting como JavaScript o VBScript. JavaScript es preferible porque es un poco más compatible con todos los navegadores. Con el software más sofisticado, puede hacer que las imágenes de desplazamiento también, pero las complicaciones de este proceso de ir más allá del alcance de este artículo.

Instrucciones

1 Crear un banner básica de desplazamiento al abrir el Bloc de notas en el menú "Inicio" de Windows. El programa se encuentra en el grupo de "Accesorios". En Bloc de notas, escriba las líneas siguientes exactamente como se indica. Este código crea una línea de texto que se lee un carácter a la vez y continuamente golpeado a la derecha con los comandos "subserie". Después, el texto aparece en una forma colocado en la página web en una posición de bandera en la parte superior de la pantalla. Para que el texto de desplazamiento más lento, aumentar el número en la línea "setTimeout". Disminuir este número para acelerar el desplazamiento. El color de fondo (BGCOLOR) puede ser cualquier color que desee <br /> <br /> <html> <br /> <head> <br />> </ head> <br /> <script language = \ ". JavaScript \ "> <br /> var scr =". . . . "+ \" Estas palabras se seguirán desplazándose a través del banner .... \ "función <br /> ScrollAlong () <br /> <br /> {temp = scr.substring (0,1) <br /> GO <br /> <br SCR + = temp /> scr = scr.substring (1, scr.length) <br /> <br /> IR document.BannerScroll.Banner.value = scr.substring (0,55) < br /> <br /> IR setTimeout (\ "ScrollAlong () \", 100) <br /> <br /> GO} <br /> </ script> <br /> <body bgcolor = \ "# 00FF00 \ "onLoad = \" ScrollAlong () \ "> <br /> <form name = \" BannerScroll \ "> <br /> <div align = \" centro \ "> <br /> <input name = \" Banner \ "type = \" "value = \" text \ \ "size = \" 90 \ "/> <br /> </ div> <br /> </ body> <br /> <html> <br /> <br /> Guardar este archivo con un nombre de su elección reemplazar el valor por defecto ".txt" extensión con ".HTML". Ver el resultado por localizar el archivo en su PC, al hacer clic en "Abrir con" y eligiendo "Internet Explorer" o su navegador web preferido.

2 Superponer el texto en movimiento en una imagen para una apariencia más elegante. Este método coloca una mesa en la parte superior de la página web. A continuación, se basa en el elemento "Carpa" y varios otros comandos para controlar la dirección, retraso de la repetición y el tamaño del texto de desplazamiento. Vuelva a colocar la imagen en la línea que comienza con "<td fondo" con el nombre de archivo y la ubicación de la imagen deseada. Cambiar los colores a lo que quieras. Alterar el "ScrollDelay" y otros controles para adaptarse a su texto. <br /> <br /> <Html> <br /> <head> <br /> </ head> <br /> <body> <br /> <table width = \ "500 \" height = \ "150 \" border = \ "2 \" align = \ "centro \"> <br /> <tr> <br /> <td fondo = \ "C: [usar su propia imagen aquí] "bgcolor = \" # FFFFFF \ "> <font size = \" 4 \ "face = \" Arial \ "color = \" # 000000 \ "> <b> <br /> < dirección carpa = \ "derecho \" ScrollDelay = \ "200 \" comportamiento <br /> = \ "scroll \" scrollamount = \ "20 \" width = \ "700 \" height = \ "50 \" loop = \ "true \"> <br />... Este texto va a seguir desplazándose a través del banner... <br /> </ marquee> </ b> </ font> </ td> <br /> </ tr > <br /> </ table> <br /> </ body> <br /> </ html> <br /> <br /> Guardar el archivo y visualizarla como en el paso 1.

3 Hacer que el avance de texto en la parte superior de la imagen con una etiqueta de "Div" y aumentar el tamaño con una etiqueta de "H2". Cambiar el código en el paso 2 de la siguiente manera, a continuación, guardar y ver como se indica. <br /> <br /> <html> <br /> <head> <br /> </ head> <br /> <body> <br /> <div> <br /> <dirección carpa = \ " derecho \ "ScrollDelay = \" 200 \ "comportamiento <br /> = \" scroll \ "scrollamount = \" 20 \ "width = \" 700 \ "height = \" 50 \ "loop = \" true \ "> <br /> <h2>. Este texto va a seguir desplazándose a través del banner. . . </ H2> <br /> </ marquee> <br /> <img src = \ "[Inserte el nombre de archivo y la ubicación de la imagen] \" width = \ "1000 \" height = \ "175 \" /> <br /> </ div> <br /> </ body> <br /> </ html>

4 Inserte el código de banner en su propia página web cuando esté satisfecho y subirlo a su servidor web.

Consejos y advertencias

  • La primera versión de este código de desplazamiento utiliza controles Active-X. Dependiendo de la configuración de seguridad del navegador, es posible obtener una indicación que dice Windows ha bloqueado el funcionamiento del control y pidiendo permiso para proceder. En este caso, es seguro continuar ya que el archivo está en su propio PC. <br /> <br /> A menos banderas de desplazamiento se cambian con frecuencia, por ejemplo, con los informes de noticias, que pueden llegar a ser aburrido para los visitantes frecuentes.
  • Debe guardar estos archivos de texto como archivos HTML o el proceso de la bandera de desplazamiento no funcionará. <br /> <br /> No todos los navegadores web soportan el elemento de marquesina. Pensar en añadir texto legible también.