Nwlapcug.com


Come aggiungere un testo Lightbox-Like in iWeb

Lightbox è uno script che è possibile utilizzare per sovrapporre le immagini nelle pagine Web. Se si utilizza una versione modificata dello script, è possibile sovrapporre testo. Se non si desidera utilizzare uno script sul tuo sito iWeb ma si desidera comunque visualizzare il lightbox-come testo, è possibile utilizzare fogli di stile CSS. Il metodo CSS non è come personalizzabile come lo script Lightbox, ma vi permetterà di visualizzare immagini e testo simile a Lightbox correttamente.

Istruzioni

1

Apri iWeb e creare una nuova pagina, ad esempio "Introduction".

2

Scegliere di pubblicare il sito Web sul disco rigido e selezionare una cartella.

3

Creare un nuovo documento di testo all'interno della cartella in cui avete salvato il sito e il nome "lightbox.css".

4

Aprire il documento "lightbox.css" in un editor di testo come blocco note o WordPad.

5

Copiare e incollare il codice seguente nel documento, quindi salvare e chiudere il file:

.black_overlay () {
display: none;
Posizione: assoluta;
Top: 0%;
sinistra: 0%;
Larghezza: 100%;
Altezza: 100%;
background-color: black;
z-indice: 1001;
-moz-opacità: 0,8;
opacità:. 80;
filtro: alpha(opacity=80);
}

.white_content () {
display: none;
Posizione: assoluta;
parte superiore: 25%;
sinistra: 25%;
Larghezza: 50%;
Altezza: 50%;
Imbottitura: 16px;
confine: 16px arancione a tinta unita;
colore di sfondo: bianco;
z-indice: 1002;
overflow: auto;
}

6

Aprire la pagina "Introduction" nella cartella in cui è stato creato utilizzando il tuo testo editor.

7

Inserire questa riga ovunque tra il "< head >" e "< / head >" tag per caricare il file CSS:

< link rel = "stylesheet" href="lightbox.css" type = "text/css" media = "screen" / >

8

Copiare e incollare il seguente codice tra "< corpo >" e "< / body >" tag per inserire testo simile a lightbox:

< p > Se si desidera visualizzare un lightbox, fare clic su < a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display = 'bloccare'; document.getElementById('fade').style.display = 'bloccare'" > questo Link < /a >< / p >

< div id = "luce" class = "white_content" > questo è il testo di simil-lightbox. Nulla può andare qui, comprese le immagini. < a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display = 'none'; document.getElementById('fade').style.display = 'none'" > Chiudere < /a >< / div >

< div id = "fade" class = "black_overlay" >< / div >

9

Sostituire "Questo Link" nel codice dal passaggio 8 con l'elemento che si desidera all'utente di fare clic per visualizzare il riquadro miniature.

10

Sostituire "questo è il testo di simil-lightbox. Nulla può andare qui, tra cui immagini"con il testo simile a lightbox. È anche possibile includere immagini. Quando l'utente fa clic su "Chiudi", si chiude il lightbox.

11

Salvare e chiudere il file di "Introduction".