Άσκηση 8 - Δημιουργία ιστοσελίδας μουσείο και προβολή εκθεμάτων. Στην παρούσα άσκηση πρόκειται να δημιουργήσετε έναν ιστότοπο, ο οποίος θα αποτελείται από πολλές ιστοσελίδες που θα προβάλουν τα εκθέματα του μουσείου Φυσικής Ιστορίας Κρήτης. Block Λωρίδα επικεφαλίδας Στην κορυφή της σελίδας θα προσθέσετε ένα block με πλάτος 100% και ύψος 96px. Στο block αυτό θα προσθέσετε την εικόνα "Επικεφαλίδα" στα αριστερά. Έχοντας επιλεγμένη την εικόνα, πατήστε στο κουμπί εισαγωγής συνδέσμου: Στο παράθυρο που εμφανίζεται επιλέξτε στο Link Type το Page. Στο Select a Page επιλέξτε το index.htm. Τώρα η εικόνα στην κορυφή της σελίδας σας θα είναι και σύνδεσμος για την αρχική σελίδα του site. Θα τροποποιήσετε το χρώμα φόντου του block από τις ιδιότητες HTML. Πηγαίνετε στην ενότητα Background και στο Color πατάτε και επιλέγετε More Colors... Από το παράθυρο που εμφανίζεται επιλέγετε το κουμπί με το σταγονόμετρο (Select). Με το εργαλείο αυτό μπορείτε να επιλέξετε οποιοδήποτε χρώμα εμφανίζεται στην οθόνη σας. Επιλέξτε με αυτό το πράσινο χρώμα φόντου στα δεξιά της εικόνας που προσθέσατε προηγουμένως.
Block Λωρίδα μενού Από τα εικονίδια στη γραμμή εργαλείων επιλέξτε το Widget List. Πατώντας το ανοίγει παράθυρο επιλογής μιας πληθώρας από έτοιμα εργαλεία (κουμπιά, μενού, προβολή εικόνων κ.α.). Εντοπίστε το εργαλείο SimpleNavBar. Αυτό θα προσθέσει μια λωρίδα από εικονίδια στη σελίδα σας. Πατήστε το κουμπί Insert Widget και σχεδιάστε το block κάτω από το προηγούμενο block. Από τις HTML ιδιότητες του νέου μπλοκ καθορίστε τα εξής: Ύψος 60 Πλάτος 100% Menualign: left Στην ενότητα Background: Color: Διαλέξτε από το σκούρο πράσινο της εικόνας που προσθέσατε προηγουμένως.
Χρώμα hover (όταν το ποντίκι περνά πάνω από το κουμπί): Ίδιο με το ανοιχτό πράσινο της εικόνας Γραμματοσειρά: Lucida, μέγεθος 18, χρώμα λευκό Με διπλό κλικ στο block εμφανίζεται το παράθυρο επιλογών της γραμμής Μενού. Στην αριστερή στήλη επιλέξτε το Menu1. Στο πεδίο name προσθέστε Το Μουσείο. Διαγράψτε από το πεδίο icon όλα τα περιεχόμενα και αφήστε το κενό. Το Menu2 θα το μετονομάσετε ως Έκθεση και διαγράψτε το πεδίο icon όπως προηγουμένως. Πλαϊνή στήλη πληροφοριών Εισάγετε αριστερά από το block κειμένου ένα νέο block στο οποίο θα αναγράφονται βασικές πληροφορίες για το μουσείο. Τοποθετήστε το νέο μπλοκ αριστερά κάτω από τα προηγούμενα. Εισαγωγή κειμένου: Ωράριο Κάθημερινές 09:00-15:00 Σαββατοκύριακα 10:00-18:00 Εισιτήρια Ενήλικες: 9 Παιδιά από 4 ετών εώς 18 ετών: 5,5 Διεύθυνση: Σοφοκλή Βενιζέλου 71202 Ηράκλειο Κρήτης Γραμματοσειρά: Lucida Ιδιότητες Block: Ύψος: 376 px Πλάτος: 276 px Padding 10 px Border: Solid, χρώμα ανοιχτό πράσινο από την εικόνα Σκιά ανοιχτό γκρί
Αντίγραφο σελίδας Δημιουργείστε μια ίδια σελίδα πατώντας το κουμπί Clone Page. Στην αριστερή στήλη παρατηρείστε ότι δημιουργήθηκε μια νέα σελίδα με τίτλο index1.html. Εισαγωγή συνδέσμων στο μενού Στη σελίδα index.html επιλέξτε με διπλό κλικ το μπλοκ που περιέχει τη λωρίδα με τους συνδέσμους. Από την αριστερή στήλη επιλέξτε Το Μουσείο. Στα δεξιά επιλέξτε Targetlink. Θα εμφανιστεί ένα νέο παράθυρο για εισαγωγή του συνδέσμου. Στο πεδίο Link Type εισάγετε Page και στο Page επιλέξτε index.html. Επεναλάβετε την ίδια διαδικασία για το σύνδεσμο Συλλογές: Επιλογή Συλλογές Επιλογή Targetlink Link Type: Page Page: index1.htm
Block παρουσίασης κειμένου Εισάγετε ένα νέο μπλοκ στη σελίδα index.html κάτω από τα προηγούμενα περίπου στο μέσο της σελίδας, όπως φαίνεται στην εικόνα στην τελευταία σελίδα της άσκησης. Διαστάσεις: Ύψος: 784px Πλάτος: 548 px Στο block αυτό θα αντιγράψετε το κειμένο της Ιστορίας του Μουσείου από αντίστοιχο αρχείο κειμένου. Ιδιότητες κειμένου: Γραμματοσειρά: Lucida Στοίχιση: Πλήρης Ιδιότητες block: Περίγραμμα (border) Style: Ridge Χρώμα: Μαύρο Radius: 15px Εισαγωγή σκίασης πλαισίου Εισαγωγή padding Padding 10 px Διαμόρφωση της σελίδας Συλλογές Πατήστε το κουμπί εισαγωγής Widget. Επιλέξτε το Widget Carousel. Τοποθετήστε το στο μέσο της σελίδας. Το συγκεκριμένο widget προβάλει τις επιλεγμένες φωτογραφίες.
Πατήστε διπλό κλικ στο νέο μπλοκ. Σβήστε όλα τα υπάρχοντα αντικείμενα με το κουμπί Delete. Δημιουργήστε 5 νέες κατηγορίες. Για κάθε κατηγορία θα πρέπει να προσθέσετε όνομα (name), περιγραφή (description) και εικόνα (background). Οι πληροφορίες για κάθε πεδίο δίνονται παρακάτω. Φυτά: Με τον όρο φυτό χαρακτηρίζεται ένας από τους τύπους με τους οποίους εμφανίζεται η ζωή στη Γη. Ο όρος φυτό είναι γενική ονομασία που δίνεται στα ποώδη, θαμνώδη και δενδρώδη ζώντα είδη. Φωτογραφία: Φ3 Αρθρόποδα: Τα Αρθρόποδα (Arthropoda) είναι συνομοταξία από το βασίλειο των ζώων. Περίπου το 80% όλων των ειδών ζώων, που ζουν σήμερα, είναι αρθρόποδα. Φωτογραφία: ΑΡ2 Σπονδυλόζωα: Στην κατηγορία αυτή περιλαμβάνονται όλοι εκείνοι οι οργανισμοί που φέρουν σπονδυλική στήλη όπως είναι: τα ψάρια, τα αμφίβια, τα ερπετά, τα πτηνά και τα θηλαστικά. Εκτός της σπονδυλικής στήλης ιδιαίτερο μάλιστα γνώρισμα αυτών των οργανισμών είναι η ύπαρξη γνάθου.
Φωτογραφία: Σ1 Απολιθώματα: Τα απολιθώματα είναι είτε λείψανα (υπολείμματα) φυτικών ή ζωικών οργανισμών που έζησαν πριν από τη σημερινή γεωλογική εποχή και κλείσθηκαν σε στρώματα γης (ιζήματα), δηλαδή σε αποθέσεις, είτε ακόμη και ίχνη (ενδείξεις) ύπαρξης ζωής στο παρελθόν. Φωτογραφία: Α1 Ορυκτά: Ορυκτό ονομάζεται κάθε χημικό στοιχείο ή ανόργανη ένωση φυσικής προέλευσης, που βρίσκεται στο έδαφος ή στο υπέδαφος ή, υπό μορφή διαλύματος, στο νερό, αποτελώντας συστατικό των πετρωμάτων, από τα οποία αποτελείται ο στερεός φλοιός της Γης. Φωτογραφία: Ο3 Προσθήκη λωρίδας κουμπιών Στη σελίδα των εκθεμάτων προσθέστε ένα μενού κουμπιών. Πατήστε το κουμπί widget και προσθέστε το εργαλείο Buttongroup. Τοποθετήστε το νέο block κάτω από τη λωρίδα μενού περίπου στο μέσο της σελίδας όπως φαίνεται στην εικόνα στην τελευταία σελίδα της εκφώνησης. Με διπλό κλικ διαμορφώστε τη λωρίδα κουμπιών ώστε να υπάρχει ένα κουμπί για κάθε μία από τις κατηγορίες εκθεμάτων που αναφέρεται παραπάνω. Κάθε κουμπί από αυτά θα οδηγεί σε μία εξειδικευμένη σελίδα για κάθε κατηγορία εκθεμάτων. Δημιουργείστε τις σελίδες αυτές με τις φωτογραφίες που υπάρχουν στους αντίστοιχους φακέλους.
Σελίδα Το Μουσείο Σελίδα Έκθεση