Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS σας δίνουν έλεγχος στον τρόπο με τον οποίο τα κουτιά (boxes) των στοιχείων διατάσσονται σε μια ιστοσελίδα Μπορείτε λοιπόν να ελέγξετε την τοποθέτηση των στοιχείων ώστε να μην ακολουθείτε την κανονική ροή των στοιχείων στη σελίδα (όπως αυτή ορίζεται στον html κώδικα Μπορείτε επίσης να δημιουργήσετε σελίδες με στοιχεία τοποθετημένα σε διαφορετικά σημεία μιας σελίδας χωρίς χρήση πινάκων 1
Κατανοώντας την κανονική ροή των στοιχείων Ο browser διατάσσει τα boxes των στοιχείων από πάνω προς τα κάτω και από αριστερά προς τα δεξιά έως ότου εμφανιστούν όλα τα στοιχεία που αποτελούν τη σελίδα Στην κανονική ροή για block στοιχεία, τα boxes διατάσσονται κατακόρυφα, το ένα μετά το άλλο Η αριστερή πλευρά κάθε box αγγίζει την αριστερή πλευρά του γονικού στοιχείου (container element) εκτός αν το box είναι floated ή το μοντέλο διάταξης είναι από τα δεξιά προς τα αριστερά Η κανονική ροή block στοιχείων 2
Ορίζοντας τον τύπο τοποθέτησης ενός box Η ιδιότητα position επιτρέπει να ορίσουμε τον τύπο τοποθέτησης ενός στοιχείου, εφόσον επιθυμούμε διαφορετικό τύπο από τον default, που είναι ο static Περιγραφές των τιμών της ιδιότητας position Ορίζοντας τις συντεταγμένες της θέσης ενός Box Οι ιδιότητες left και top (offset properties) επιτρέπουν να ορίσουμε τις ακριβές «συντεταγμένες» τοποθέτησης για οποιοδήποτε στοιχείο έχει τιμή absolute, fixed ή relative στην ιδιότητα position div { } position: absolute; left: 130px; top: 100px; background-color: #ffcc33; 3
Ορίζοντας τις ιδιότητες left και top (offset properties) Εδώ ορίζουμε και την ιδιότητα width για να ελέγξουμε περαιτέρω την εμφάνιση του στοιχείου: div {position: absolute; left: 130px; top: 100px; width: 100px; background color: #ffcc33;} 4
Απόλυτη τοποθέτηση (absolute positioning) Όταν ορίζεται absolute τοποθέτηση, η θέση ενός στοιχείου δηλώνεται ρητά σε σχέση ημε το γονικό κουτί που το περιέχει (containing box) Ένα στοιχείο κατά απόλυτο τρόπο τοποθετημένο δεν ακολουθεί την κανονική ροή του εγγράφου και δεν επηρεάζει την εμφάνιση των άλλων στοιχείων Ένα στοιχείο κατά απόλυτο τρόπο τοποθετημένο ορίζει ένα νέο γονικό κουτί (containing box) για τα περιεχόμενα στοιχεία του (child elements) Φωλιασμένα τοποθετημένα στοιχεία (nested positioned elements) με απόλυτη τοποθέτηση 5
Σταθερή τοποθέτηση (fixed positioning) To γονικό κουτί (containing box) ενός fixed στοιχείου είναι πάντα το παράθυρο του browser Τα fixed στοιχεία παραμένουν στην ίδια θέση κάθε στιγμή, ανεξάρτητα από το πως ο χρήστης κυλάει (scrolls) το έγγραφο Θέτοντας σταθερή θέση για ένα στοιχείο επιτρέπει τη δημιουργία διάταξης που προσομοιάζει στα πλαίσια (frame type layout), όπου ένα στοιχείο περιεχομένου μπορεί να κυλιστεί ανεξάρτητα από το διπλανό στοιχείο πλοήγησης Στατική τοποθέτηση 6
Σχετική τοποθέτηση (relative positioning) H relative τοποθέτηση επιτρέπει τη μετακίνηση ενός στοιχείου από τη default θέση του στην κανονική ροή σε μία νέα θέση στο παράθυρο του browser Η νέα θέση είναι σχετική με τη default θέση του στοιχείου Οι offset ιδιότητες επιτρέπουν να ρυθμιστεί η θέση του στοιχείου Κανονική ροή Απόλυτη τοποθέτηση Σχετική τοποθέτηση 7
Ορίζοντας την ορατότητα (visibility) H ιδιότητα visibility ορίζει κατά πόσο ένα στοιχείο θα εμφανίζεται ή θα είναι κρυμμένο στο browser Ορίζοντας το επίπεδο στοίβας (stacking level) Το stacking level αφορά τη σειρά τοποθέτησης των στοιχείων στον άξονα z (z axis), από μπροστά προς τα πίσω, όπως ο χρήστης αντικρίζει την οθόνη του Η/Υ 8
Η σειρά των επιπέδων στοίβας (stacking levels) Τα επίπεδα στοίβας (stacking levels) στο browser 9
Άσκηση Σελίδα αφετηρίας Άσκηση Σελίδα στόχος 10
Εφαρμόστε ένα έτοιμο CSS Αποσυμπιέστε το site.zip (html έγγραφο, ένα αρχικό css, γραφικά) και ανοίξτε το έγγραφο 01_original.html Σας δίνετε ένα έτοιμο CSS αρχείο ( barcelone_original.css ) το οποίο θα πρέπει να εφαρμόσετε στο html αρχείο για να έχετε μια πρώτη μορφοποίηση του κειμένου: Ξεκίνημα: Ορισμός ενοτήτων στο html έγγραφο header main sidebar article 11
Βήμα 1 ο : Ολοκλήρωση μορφοποίησης κειμένου Επιπλέον των κανόνων που περιλαμβάνονται στο CSS που εφαρμόσετε, προσθέστε τους ακόλουθους κανόνες: Οι επικεφαλίδες h2 που βρίσκονται μέσα σε article να αποκτήσουν μέγεθος γραμματοσειράς 1.3em και ύψος γραμμής 1 Οι date να στοιχηθούν δεξιά Το κείμενο της ενότητας sidebar να έχει μέγεθος 80% του κανονικού και τα γράμματα να είναι italic Βήμα 1 ο : Ολοκλήρωση μορφοποίησης κειμένου 12
Προσθήκη νέων <div> Στη συνέχεια της άσκησης θα χρειαστεί να κλείσετε όλο το περιεχόμενο του εγγράφου (δηλαδή του <body>) μέσα σε μια ενότητα <div id="screen"> και αυτή με τη σειρά της σε μια ενότητα <div id="wrap"> Δηλαδή θα έχουμε τη δομή: <body> <div id="wrap"> <div id="screen"> <div id="header"> </div> <div id="main"> <div class="article"> </div> <div class="article"> </div> </div>. Βήμα 2 ο : Αλλαγή background (εικόνα) Ορίστε ως background εικόνα του #wrap την./images/bluebench.jpg Να τοποθετηθεί πάνω αριστερά και να επαναληφθεί κατακόρυφα και οριζόντια Η αναγνωσιμότητα του κειμένου σας θα είναι πλέον κακή 13
Βήμα 2 ο : Αλλαγή background (χρώμα) Ορίστε ως background χρώμα στο screen το #FEF6F8 Αυτό θα έχει ως αποτέλεσμα να εξαφανιστεί η background εικόνα Ορίστε ως background χρώμα στους συνδέσμους όταν είναι σε κατάσταση focus, hover και active το #F3CFB6 Ορίστε ως background χρώμα στο sidebar το #F5F8FA Βήμα 3 ο : περιορίζοντας το ύψος/πλάτος ενός στοιχείου Περιορίστε το πλάτος του wrap στο 90% του πλάτους της οθόνης, με μέγιστο πλάτος (max width) τα 900px και ελάχιστο πλάτος (min width) τα 480px Περιορίστε το πλάτος του main στο 72% του πλάτους του screen Ορίστε τις διαστάσεις των στοιχείων της κλάσης photo σε 100px επί 75px 90% 10% 72% 28% 14
Βήμα 4 ο : θέτοντας όρια (margins) γύρω από ένα στοιχείο #wrap {margin:20px auto;} #sidebar {margin left:74%}.photo_text text {margin left:110px} 20px: left & right margin, auto: top & bottom margin 110px 74% 26% Βήμα 5 ο : προσθέτοντας παραγέμισμα (padding) γύρω από ένα στοιχείο #wrap {padding:30px 20px 0 0} #header {padding bottom:20px} #screen {padding:10px 10px 10px 0} 30px: top 20px: right 0: bottom, left 15
Βήμα 6 ο : μετακινώντας στοιχεία προσδίδοντας μια φυσικότερη ροή Τοποθετήστε τα date 1.1em πιο ψηλά σε σχέση με την κανονική τους θέση Τοποθετήστε τα photo στη θέση 112px από αριστερά και 3px από πάνω ως προς το γονικό τους στοιχείο photo_text Τα.date μετακινήθηκαν 1.1em πιο πάνω Τα.photo μετακινήθηκαν 112px αριστερά (θα πρέπει πρώτα να ρυθμίσετε το position των photo_text ως relative Βήμα 7 ο : διατάσσοντας τη σελίδα σε στήλες Κάντε τη sidebar να έρθει δεξιά από το main Κάντε τη navbar να πάει δεξιά από το description navbuttons main 16
Βήμα 8 ο : εμφανίζοντας όρια/περιγράμματα στα στοιχεία Εμφανίστε διακεκομμένες γραμμές στα δεξιά των article αφήνοντας και λίγο παραγέμισμα (10px) ώστε να μην κολλήσει η γραμμή πάνω στο κείμενο Dashed border Διατάξεις στατικού μεγέθους (fixed layouts) #nav { float: left; width: 180px; height: 150px; background color: #999; margin bottom: 10px; } #content { margin left: 210px; height: 150px; width: 490px; background color: #999; } #footer { clear: both; height: 50px; width: 700px; background color: #666; margin bottom: 10px; } 17
Προσαρμοζόμενες διατάξεις (liquid layouts) #nav { float: left; width: 25%; height: 150px; background color: #999; margin bottom: 10px; } #content { float: left; margin left: 5%; width: 65%; height: 150px; background color: #999; margin bottom: 10px; } Συνδυασμός προσαρμοζόμενων/στατικών διατάξεων (liquid/fixed layouts) #nav { float: lf left; width: 180px; height: 150px; background color: #999; margin bottom: 10px; } #content { margin: 0 30px 10px 210px; height: 150px; background color: #999; } 18
Links (CSS design) http://www.csszengarden.com/ http://www.maxdesign.com.au/ 19