Εμφάνιση και κρύψιμο στοιχείων

Transcript

1 Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου (χωρίς να εμφανίζεται κενό στη θέση του) block: εμφάνιση του στοιχείου και μάλιστα σε νέα παράγραφο inline: εμφάνιση του στοιχείου χωρίς αλλαγή παραγράφου list item: εμφάνιση του στοιχείου ως μέρος μιας λίστας (ως να χρησιμοποιούνταν ετικέτα <li>) Χρήση της ιδιότητας visibility με επιτρεπτές τιμές: hidden: κρύψιμο του στοιχείου (στη θέση του θα εμφανιστεί κενό) visible: εμφάνιση του στοιχείου 1

2 Εμφάνιση και κρύψιμο στοιχείων: display.hide {display:none <p class="hide"> <img src="middle.jpg" /> </p> Εμφάνιση και κρύψιμο στοιχείων: display.hide {visibility:hidden <p class="hide"> <img src="middle.jpg" " /> </p> 2

3 Δημιουργία rollover buttons a { display:block; padding:2px; p Αφαιρώ υπογράμμιση, αφήνω περιθώρια, και εμφανίζω ως block για να τα τοποθετήσω στα αριστερά της οθόνης text decoration:none; width:5em; margin:2px; color:#8d4f10; font family:"trebuchet MS", Verdana, sans serif a:link, a:visited { background:#ffcfa0; border:2px outset #FFCFA0; Στα links που δεν έχω ακόμα ή έχω ήδη επισκεφθεί βάζω ένα ελαφρύ πορτοκαλί χρώμα ως υπόβαθρο, και ένα περίγραμμα του ίδιου χρώματος για να φαίνεται ως πλήκτρο Δημιουργία rollover buttons a:focus, a:hover { background: #CD8E51; border:2px outset t #CD8E51; color:black a:active { background:#af6a27; border:2px outset #AF6A27 Πιο σκούρο background χρώμα και περίγραμμα στα πλήκτρα που είναι hovered ή έχουν focus Ακόμα πιο σκούρο background χρώμα στα πλήκτρα την ώρα που γίνεται κλικ πάνω τους ("active ) 3

4 Δημιουργία drop down menus ως Χωρίς CSS Με CSS (οι επιλογές 2 ου επιπέδου εμφανίζονται με το πέρασμα του cursor) Δημιουργία drop down menus ως <div id="navbar"> <ul> <li><a href=.">products</a> <ul> <li><a href= >PageWhacker 13.1 </a></li> <li><a href= " >InstaWeb 4.0 </a></li> <li><a href= ">BookWriter 1.0 (beta)</a></li> </ul> </li> <li><a href=.">support</a> <ul> <li><a href="help.html">online Forum</a></li>... </div> 4

5 Δημιουργία drop down menus ως #navbar, #navbar ul { display:block; margin:0; padding:0; list style:none; #navbar li { float:left; width:10em; Η λίστα δε θα εμφανισθεί με τη default μορφοποίησή της Ta πρώτου επιπέδου menu items θα εμφανίζονται σε οριζόντια γραμμή Δημιουργία drop down menus ως #navbar li ul { display:none #navbar li:hover ul { position:absolute; display:block; width:10.1em; #navbar li ul li { float:none; width: auto; Κρύψε τα menu items του δεύτερου επιπέδου Εμφάνισε τα menu items του δεύτερου επιπέδου όταν περνάει ocurser πάνω απ τα menu items του πρώτου επιπέδου Ta πρώτου επιπέδου menu items θα εμφανίζονται σε οριζόντια γραμμή 5

6 Μορφοποιημένο drop down menu Μια σελίδα με ένα ενδιαφέρον διπλό οπτικό εφέ: Άσκηση #1 Κατεβάστε τη σελίδα 01_dropdown_original.html Δημιουργήστε ένα εξωτερικό CSS αρχείο ώστε να δημιουργήσετε μια μπάρα πλοήγησης (navigation bar) που να μοιάζει με την παρακάτω: 6

7 Άσκηση #1: διευκρινήσεις Τα menu items (links) πρώτου επιπέδου έχουν: Μέγεθος γραμματοσειράς 12px, bold, χρώμα γραμματοσειράς #fff, δεν έχουν υπογράμμιση, πλάτος 138px και ύψος 30px, περίγραμμα 1px με συνεχή γραμμή, χρώμα περιγράμματος # και πάχος περιγράμματος 1px, background χρώμα #a6a299, παραγέμισμα 5px από πάνωκάτω και 10px από αριστερά δεξιά, ύψος γραμμής 29px Τα menu items (links) δεύτερου επιπέδου έχουν: χρώμα γραμματοσειράς #000, background χρώμα #e5e1d6, ύψος γραμμής 1em, παραγέμισμα 5px από πάνω και 10px από κάτω, πλάτος 128px και πάχος περιγράμματος 1px από όλες τις πλευρές εκτός από πάνω Άσκηση #2 Δημιουργήστε ένα νέο εξωτερικό CSS αρχείο που να μορφοποιεί το ίδιο XHTML αρχείο έτσι ώστε η μπάρα πλοήγησης ης να γίνεται κάθετη Εδώ εμφανίζεται και ένα γκρι βέλος (background image) που στο hover αντικαθίσταται από μπλε (οι δύο εικόνες σας δίνονται 7