Lightbox is een script dat je kunt gebruiken om beelden overlay op uw webpagina's . U kunt ook tekst overlappen als u een gewijzigde versie van het script gebruiken . Als u niet wilt dat om een script te gebruiken op uw iWeb-site , maar u wilt toch weer lightbox - achtige tekst , kunt u gebruik maken van Cascading Style Sheets . De CSS- methode is niet zo aanpasbaar als de werkelijke lightbox script , maar het zal u toestaan om te laten zien Lightbox - achtige tekst en afbeeldingen goed . Wat je in een map
Need
Alle beelden tonen Meer Aanwijzingen
Open iWeb 1 en maak een nieuwe pagina , zoals " Introduction.html " . < Br > Pagina 2 Kies om de website op uw harde schijf te publiceren en selecteer een map .
3 Maak een nieuw tekstdocument in de map waarin u de site en opgeslagen noem het " lightbox.css " .
4 Open het " lightbox.css " document in een teksteditor zoals Kladblok of WordPad .
Kopieer 5 en plak de volgende code in het document , dan slaan en sluit het bestand :
black_overlay { display: none ; positie : . absolute ; top: 0 % ; left: 0 % ; width : 100 % ; height : 100 % ; background-color : black ; z - index : 1001 ; - moz - opacity : 0.8 ; opacity : .80 ; filter : . alpha ( opacity = 80 ) ; }
white_content { display: none ; position: absolute , boven: 25 % ; left: 25 % ; width : 50 % ; height : 50 % ; padding : 16px ; rand: 16px stevige oranje ; background-color : white ; z - index : 1002 ; overflow : auto ; } < br >
6 Open het " Introduction.html " pagina in de map waar u het hebt gemaakt met behulp van uw teksteditor .
7 Steek deze lijn ergens tussen de " " en " < /head > ' tags om de CSS- bestand te laden :
< koppeling rel = " stylesheet " href = " lightbox.css " type = " text /css " media = " screen " />
Kopieer 8 en plak de volgende code tussen de " " en " < /body > 'tags in te voegen lightbox - achtige tekst : < br > Als u wilt een lichttafel weergeven, klikt u < a href = " javascript : void ( 0 ) " onclick = Link < /a > < /p> Dit is de lightbox - achtige tekst . Alles kan hier gaan , inclusief afbeeldingen . < a href = " javascript : void ( 0 ) " onclick = id = " fade " class = " black_overlay " > < /div > 9 Vervang " deze link " in de code van Stap 8 met het element dat u de gebruiker wilt klik om de lightbox geven .
10 Vervang " Dit is de lightbox - achtige tekst . Alles kan hier gaan , inclusief afbeeldingen ' met uw lightbox - achtige tekst . U kunt zelfs afbeeldingen . Wanneer de gebruiker klikt op ' Close ', de lightbox sluit .
11 Opslaan en sluiten van het " Introduction.html " bestand .
|
