Lightbox är ett script kan du använda för att överlagra bilder på dina webbsidor . Du kan också lägga över text om du använder en modifierad version av skriptet . Om du inte vill använda ett skript på din iWeb-webbplats , men du ändå vill visa ljusbord - liknande text , kan du använda Cascading Style Sheets . CSS metoden är inte lika anpassningsbar som själva ljusbord manus , men det gör att du kan visa Lightbox - liknande text och bilder på rätt sätt . Saker du behöver
alla bilder i en mapp
Visa fler instruktioner
1
Öppna iWeb och skapa en ny sida , såsom " Introduction.html " .
sida 2
välja att publicera webbplatsen till din hårddisk och välj en mapp .
3
Skapa ett nytt textdokument i mappen där du sparade platsen och namnge den " lightbox.css " .
4
Öppna " lightbox.css " dokument i en textredigerare som Anteckningar eller WordPad .
5
Kopiera och klistra in följande kod i dokumentet , spara och stäng filen :
black_overlay { display : none; ställning : . absolut ; top : 0 % ; vänster : 0 % , bredd : 100 % , höjd : 100 % ; background-color : black ; z - index : 1001 , - moz - opacitet : 0,8; opacitet : 0,80 ; filter : . alfa ( opacitet = 80 ) ; }
white_content { display: none ; position: absolute , top : 25 % , vänster : 25 % , bredd : 50 % , höjd : 50 % ; padding : 16px ; border : 16px solid orange; background- color : white ; z - index : 1002 ; overflow : auto ; }
6
Öppna " Introduction.html " sida i den mapp där du skapade den med din text editor .
7
Infoga denna linje någonstans mellan "
" och " < /head > "taggar för att ladda CSS-fil :
< link rel = " stylesheet " href = " lightbox.css " type = " text /css " media = " screen " />
8
Kopiera och klistra in följande kod mellan "
" och " " taggar för att infoga ljusbord - liknande text :
p Om du vill visa ett ljusbord , klicka < a href = " javascript : void ( 0 ) " onclick = Länk < /a > < /p >
Detta är ljusbord - liknande text . Allt kan gå här , inklusive bilder . < a href = " javascript : void ( 0 ) " onclick = id = " fade " class = " black_overlay " > < /div >
9
Ersätt " Denna länk" i koden från steg 8 med det element som du vill att användaren ska klicka för att visa ljusbord .
10
Ersätt " Detta är det ljusbord - liknande text . Allt kan gå här , inklusive bilder " med din ljusbord - liknande text . Du kan även inkludera bilder . När användaren klickar på " Stäng " i ljusbord stänger .
11
Spara och stäng " Introduction.html " filen .
