Hvordan laver Rulning bannere på en hjemmeside

Findes

flere måder at oprette et banner med rulletekst.Den enkleste måde at få en idé om, hvordan processen fungerer, er at skabe et banner med en tekst redigering program som Notepad, der er en del af Windows.I Notesblok kan du oprette en kort demonstration webside med rulle kapaciteter ved hjælp nogle HTML-elementer eller scripting kode såsom JavaScript eller VBScript.JavaScript foretrækkes, fordi det er en smule mere kompatibel med alle browsere.Med mere sofistikeret software, kan du lave rullende billeder så godt, men de komplikationer af denne proces går ud over rammerne for denne artikel.

hvad du har brug

  • Windows Notesblok eller anden tekst redigeringssoftware

Instruktioner

  1. Opret en grundlæggende rulning banner ved at åbne Notesblok fra "Start" -menuen i Windows.Programmet er placeret i "Tilbehør" gruppe.I Notesblok, skrive følgende linjer, præcis som vist.Denne kode skaber en tekstlinje, der læses et tegn ad gangen og løbende rumlede til højre med komm

    andoerne "delstrengsøgning".Teksten vises derefter i en form, placeres på websiden ved et banner position i toppen af ​​skærmen.For at gøre teksten rulle langsommere, øge antallet i "setTimeout" linje.Reducer dette nummer for at fremskynde rulle.Baggrundsfarven (BGCOLOR) kan uanset farve, du ønsker. & Lt; br / & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & gt; & lt; /head & gt; & lt; br / & gt; & lt; SCRIPT LANGUAGE = \ "JavaScript \" & gt; & lt; br / & gt; var scr = "...."+ \" Disse ord vil holde rulle hen over banneret .... \ "& lt; br / & gt; funktion ScrollAlong () & lt; br / & gt; {& lt; br / & gt; temp = scr.substring (0,1) & lt; br / & gt; GO & lt; br / & gt; scr + = temp & lt; br / & gt; scr = scr.substring (1, scr.length) & lt; br / & gt; GO & lt; br />document.BannerScroll.Banner.value = scr.substring (0,55) & lt; br / & gt; GO & lt; br / & gt; setTimeout (\ "ScrollAlong () \", 100) & lt; br / & gt; GO & lt; br / & gt;} & lt; br / & gt; & lt; / script & gt; & lt; br / & gt; & lt; BODY BGCOLOR = \ "# 00FF00 \" onLoad = \ "ScrollAlong () \" & gt; & lt; br / & gt; & lt; formen name = \"BannerScroll \" & gt; & lt; br / & gt;& lt; div align = \ "center \" & gt; & lt; br / & gt;& lt; input name = \ "Banner \" type = \ "tekst \" værdi = \ "\" size = \ "90 \" / & gt; & lt; br / & gt;& lt; / div & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; br / & gt; Gem denne fil med et navn efter eget valg at erstatte standard".txt" udvidelse med "HTML".Se resultatet ved at finde filen på din pc, klikke på "Åbn med" og vælge "Internet Explorer" eller din foretrukne webbrowser.

  2. Læg over den rulletekst på et billede for en amatør look.Denne metode placerer en tabel på toppen af ​​websiden.Den bygger derefter på "Marquee" element, og flere andre kommandoer til at styre retningen, skal du gentage forsinkelse og størrelse af rulleteksten.Udskift billedet i den linje, der begynder "& lt; td baggrund" med filnavnet og placeringen af ​​dit ønskede billede.Ændre farverne til hvad du vil.Ændre "scrolldelay" og andre kontrolforanstaltninger, der passer til din tekst. & Lt; br / & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & lt; / head & gt;& lt; br / & gt; & lt; body & gt; & lt; br / & gt; & lt; table width = \ "500 \" height = \ "150 \" border = \ "2 \" align = \ "center \" & gt; & lt; br / & gt; & lt; tr & gt; & lt; br / & gt; & lt; td baggrund = \ "C: [bruge dit eget billede her]" bgcolor = \ "# FFFFFF \" & gt; & lt; font size = \ "4\ "face = \" Arial \ "color = \" # 000000 \ "& gt; & lt; b & gt; & lt; br / & gt; & lt; marquee retning = \" rigtige \ "scrolldelay = \" 200 \ "& lt; br /& gt; adfærd = \ "scroll \" scrollamount = \ "20 \" width = \ "700 \" height = \ "50 \" loop = \ "true \" & gt; & lt;.. br / & gt ;. Denne tekstvil holde rulle hen over banneret. & lt;.. br / & gt; & lt; / lysavis & gt; & lt; / b & gt; & lt; / font & gt; & lt; / td & gt; & lt; br / & gt; & lt; / tr & gt; & lt; br /& gt; & lt; / bord & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; / html & gt; & lt; br / & gt; & lt; br / & gt; Gem filen og se det som i trin1.

  3. Gør teksten rulle hen over toppen af ​​billedet med en "Div" tag og øge størrelsen med et "H2" tag.Skift koden i trin 2 som følger, derefter gemme og visning som anvist.& lt; br / & gt; & lt; br / & gt; & lt; html & gt; & lt; br / & gt; & lt; head & gt; & lt; br / & gt; & lt; / head & gt; & lt; br / & gt; & lt; body & gt; & lt; br/ & gt; & lt; div & gt; & lt; br / & gt;& lt; marquee retning = \ "rigtige \" scrolldelay = \ "200 \" & lt; br / & gt; adfærd = \ "scroll \" scrollamount = \ "20 \" width = \ "700 \" height = \ "50 \"loop = \" true \ "& gt; & lt; br / & gt;& lt; h2 & gt ;.Denne tekst vil holde rulle hen over banneret...& lt; / h2 & gt; & lt; br / & gt;& lt; / lysavis & gt; & lt; br / & gt; & lt; img src = \ "[Indsæt filnavnet og placeringen af ​​dit billede] \" width = \ "1000 \" height = \ "175 \" / & gt; & lt; br/ & gt; & lt; / div & gt; & lt; br / & gt; & lt; / body & gt; & lt; br / & gt; & lt; / html & gt;

  4. Indsæt banner kode ind på din egen webside, når tilfredse og overføre den til din webhost.

Tips & amp;Advarsler

  • Den første version af denne rulle kode bruger Active-X kontrol.Afhængigt af dine web browser sikkerhedsindstillinger, kan du få en prompt fortæller dig Windows har blokeret driften af ​​kontrol og beder om tilladelse til at fortsætte.I dette tilfælde er det sikkert at fortsætte, da filen er på din egen PC. & Lt; br / & gt; & lt; br / & gt; Med mindre rulle bannere ændres hyppigt, for eksempel med nyhedsindslag, kan de blive kedeligt for hyppige besøgende.
  • Du skal gemme disse tekstfiler som HTML-filer eller rulle banner proces vil ikke arbejde. & Lt; br / & gt; & lt; br / & gt; Ikke alle webbrowsere understøtter Marquee element.Tænk om tilføjelse læsbar tekst så godt.

Ressourcer

  • http://www.javascript.com/
731
0
0
Java Script