Πώς να προσθέσει ένα Lightbox -Like Κείμενο σε iWeb

Lightbox είναι ένα script που μπορείτε να χρησιμοποιήσετε για να επικαλύψει τις εικόνες στις ιστοσελίδες σας . Μπορείτε επίσης να επικαλύψει το κείμενο , αν χρησιμοποιείτε μια τροποποιημένη έκδοση του σεναρίου . Εάν δεν θέλετε να χρησιμοποιήσετε μια δέσμη ενεργειών για iWeb site σας, αλλά εξακολουθείτε να θέλετε να εμφανίσετε lightbox , όπως κείμενο , μπορείτε να χρησιμοποιήσετε το Cascading Style Sheets. Η μέθοδος CSS δεν είναι τόσο προσαρμόσιμο όσο το πραγματικό σενάριο Lightbox , αλλά θα σας επιτρέψει να εμφανίσετε Lightbox - όπως κείμενο και εικόνες σωστά . Τα πράγματα Θα
χρειάζεστε Όλες οι εικόνες σε ένα φάκελο
Η Εμφάνιση Περισσότερες οδηγίες
Η

1 Ανοίξτε το iWeb και να δημιουργήσετε μια νέα σελίδα , όπως " Introduction.html " .

2

Επιλέξτε για να δημοσιεύσει την ιστοσελίδα στον σκληρό σας δίσκο και επιλέξτε ένα φάκελο .
εικόνων 3

Δημιουργήστε ένα νέο έγγραφο κειμένου μέσα στο φάκελο στον οποίο αποθηκεύσατε το site και ονομάστε το " lightbox.css » .
Η

4 Ανοίξτε το " lightbox.css " έγγραφο σε ένα πρόγραμμα επεξεργασίας κειμένου, όπως το Notepad ή το WordPad .
5

αντιγραφή και επικόλληση του ακόλουθο κώδικα στο έγγραφο , στη συνέχεια, αποθηκεύστε και κλείστε το αρχείο :

black_overlay { display: none ? θέση : . απόλυτη? κορυφή : 0 % ? αριστερά : 0 % ? width : 100 % ? ύψος: 100 % ? υπόβαθρο-χρώμα : μαύρο? z-index : 1001 ? - moz - αδιαφάνεια : 0.8 ? αδιαφάνεια : .80 ? φίλτρο : άλφα ( αδιαφάνεια = 80 ) ? }

white_content {display : . none ? θέση: απόλυτη ? κορυφή : 25 % ? αριστερά : 25 % ? πλάτος: 50 % ? ύψος : 50 % ? padding : 16px? σύνορα : 16px πορτοκαλί στερεό ? υπόβαθρο-χρώμα : λευκό? z-index : 1002 ? υπερχείλιση: auto? }

6

Ανοίξτε τη σελίδα " Introduction.html " στο φάκελο όπου μπορείτε να δημιουργούνται με τη χρήση επεξεργαστή κειμένου σας .
Η 7

Τοποθετήστε αυτή τη γραμμή οπουδήποτε μεταξύ του " " και " " ετικέτες για να φορτώσετε το αρχείο CSS :

8

Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ανάμεσα στο « " και " " για να εισάγετε ετικέτες lightbox - όπως κείμενο :

Αν θέλετε να εμφανίσετε ένα lightbox , κάντε κλικ στο

Η 9

Αντικατάσταση " συνδέσμου" στον κώδικα από το Στάδιο 8 με το στοιχείο που θέλετε ο χρήστης να κάντε κλικ για να εμφανιστεί το lightbox .
Η 10

Αντικατάσταση " Αυτό είναι το κείμενο lightbox μοιάζει . Οτιδήποτε μπορεί να πάει εδώ , συμπεριλαμβανομένων των εικόνων " με lightbox - όπως σας κείμενο . Μπορείτε να περιλαμβάνουν ακόμη και εικόνες . Όταν ο χρήστης κάνει κλικ στο " Close ", το lightbox κλείνει .
Η 11

Αποθηκεύστε και κλείστε το αρχείο " Introduction.html " .
Η
εικόνων