Search the Community

Καλησπέρα σας. Το σημερινό άρθρο αναλύει το τι είναι ένα css framework και γιατί είναι καλό να χρησιμοποιώ ένα. Όπως γνωρίζουμε, τα CSS είναι αρχεία τα οποία δίνουν στυλ στις ιστοσελίδες μας. Όταν λέω στυλ, εννοώ από απλά χρώματα γραμματοσειρών μέχρι και δημιουργίας της δομής της ιστοσελίδας. Ας ξεκινήσουμε λοιπόν το σημερινό άρθρο για να δούμε τι μπορεί να μας προσφέρει ένα CSS Framework παραπάνω από τα απλά CSS που γράφουμε εμείς. Τι είναι ένα framework; Καταρχάς πρέπει να δούμε τι είναι ένα framework..Framework θα μπορούσαμε να πούμε ότι είναι ένας «σκελετός» για κάτι.Για παράδειγμα μπορούμε να αναφέρουμε το εξής:Έστω ότι κάποιος θέλει να δημιουργήσει με κώδικα C# (κώδικας που χρησιμοποιείται από την ASP.NET) μία εφαρμογή (application) για το ίντερνετ.Αυτό μπορεί να το κάνει γράφοντας κώδικα από την αρχή μέχρι το τέλος της εφαρμογής.Αυτό όμως έχει κάποια μειονεκτήματα.Είναι χρονοβόρο και επίσης όταν κάποιος δημιουργεί μία εφαρμογή φροντίζει ώστε ο κώδικας να είναι έτσι γραμμένος ώστε να μπορεί ένας άλλος προγραμματιστής να τον πάρει να τον αλλάξει να τον επεκτείνει χωρίς σημαντικές αλλαγές στο πρόγραμμα.Άρα λοιπόν ,ειδικά σε μεγαλύτερες εφαρμογές,οι προγραμματιστές χρησιμοποιούν κάποιο framework ,κάποιο σκελετό δηλαδή πάνω στον οποίο θα χτίσουν την εφαρμογή.Έτσι και πιο γρήγορα δημιουργούν την εφαρμογή και πιο ουσιαστικά και πιο ευέλικτα..(Θα μπορούσαμε να πούμε πολλά για τα applications και ποιες αρχές πρέπει να υπηρετούν αλλά αυτό θα γίνει σε άλλο άρθρο.) Τι είναι ένα CSS framework; Ένα CSS framework είναι ένας σκελετός που χρησιμοποιούμε και μας παρέχει συγκεκριμένους κανόνες για να γράφουμε CSS κώδικα.Κοινώς μπορούμε να χρησιμοποιήσουμε ένα τέτοιο framework σε μία ιστοσελίδα και να γράψουμε CSS ώστε να της δώσουμε στυλ και να της ρυθμίσουμε την εμφάνιση..Η μεγάλη διαφορά του απλού CSS κώδικα και του κώδικα που γράφουμε με τη χρήση ενός framework είναι ότι εάν χρησιμοποιήσουμε κάποιο framework υπάρχουν εντολές CSS οι οποίες εάν τις γράφαμε σε ένα απλό αρχείο CSS δεν θα έκαναν καμία διαφορά..Τα CSS frameworks λοιπόν είναι σχεδιασμένα έτσι ώστε με λιγότερο κώδικα να μπορούμε να έχουμε το ίδιο και καλύτερο αποτέλεσμα από ότι θα είχαμε με απλό CSS κώδικα..Επίσης ένα CSS framework έχει ένα τεράστιο πλεονέκτημα. Έχει αυτό που λέμε «cross browser compatibility».Δηλαδή αυτό που φτιάχνουμε εμφανίζεται ίδιο και στο IE και στον mozilla και στον Chrome κλπ.Αυτό είναι πολύ σημαντικό διότι οι browsers μεταξύ τους έχουν κάποιες διαφορές στον τρόπο που διαβάζουν και εμφανίζουν τα CSS.Και πρέπει πάντα να βλέπουμε αν υπάρχουν bugs και να τα διορθώνουμε ενώ συνήθως με ένα css framework δεν χρειάζεται να γίνεται αυτό..! Τι χρειάζεται να ξέρω για να χρησιμοποιήσω ένα τέτοιο framework.Πώς το χρησιμοποιώ..; Αυτή η ερώτηση θα μπορούσε να απαντηθεί μονολεκτικά.Η απάντηση είναι «CSS»..!Πρέπει να γνωρίζει κάποιος σχετικά καλά CSS ώστε να δημιουργήσει κάτι πολύπλοκο..Αλλά και μέτρια να γνωρίζει μπορεί να δημιουργήσει μία δομή ενός site μέσα σε λίγη ώρα!Η χρήση ενός css framework είναι συνήθως πολύ απλή.Δηλαδή κατεβάζουμε από το αντίστοιχο site το framework,το ενσωματώνουμε στο head της σελίδας μας και εν συνεχεία γράφουμε κώδικα-εντολές ανάλογα με το framework που χρησιμοποιούμε.Είναι λογικό όλα τα παραπάνω να σας φαίνονται δύσκολα και περίεργα.Στο επόμενο άρθρο θα χρησιμοποιήσουμε ένα framework και θα κατασκευάσουμε βήμα – βήμα μία απλή δομή ενός site..Ας δούμε 2 πολύ καλά CSS frameworks τώρα. CSS frameworks Υπάρχουν αρκετά CSS Frameworks στο ίντερνετ.Εμείς θα αναφερθούμε μόνο στα 2-3 καλύτερα.Το «καλύτερο» είναι βέβαια σχετικό..! 960 Grid System CSS framework.Αυτό το CSS framework είναι από τα πιο γνωστά.Αυτό το framework ορίζει ένα «πλέγμα»-grid πάνω στο οποίο χτίζουμε την ιστοσελίδα μας.Αυτό το grid αποτελείται είτε από 12 είτε από 16 στήλες με αντίστοιχο πλάτος 60 και 40 px η κάθε μία στήλη..Οπότε κάθε html στοιχείο που δημιουργούμε πάνω στο grid έχει πλάτος υποπολλαπλάσιο του 960. Blueprint CSS framework.Αυτό το framework είναι που θα χρησιμοποιήσουμε εμείς tutorial για να φτιάξουμε τη δομή της ιστοσελίδας μας.Αυτό το framework μας παρέχει πάρα πολλές ευκολίες και μπορούμε πολύ γρήγορα να δημιουργήσουμε μία δομή.Παρέχει και plugins για δημιουργία κουμπιών και ελέγχει και την εμφάνιση της γραμματοσειράς,της φόρμας επικοινωνίας κλπ/ Λίγα λόγια για το blueprint CSS framework. Το συγκεκριμένο framework θα το βρείτε στη διεύθυνση http://blueprintcss.org.Ας δούμε λίγο την σελίδα αυτή. Διαβάζουμε λοιπόν ότι αυτό το css framework μπορεί να μας παρέχει ένα πλέγμα-grid που ουσιαστικά εξυπηρετεί τη δημιουργία ακόμα και περίπλοκων design.Επίσης μας παρέχεται έτοιμο το λεγόμενο “CSS RESET” που ουσιαστικά κάνει reset στα διάφορα margins και paddings που έχουν τα html στοιχεία από μόνα τους.Αυτό είναι πάρα πολύ σημαντικό.Ο πιο απλός κανόνας που θα μπορούσαμε να γράψουμε ώστε να κάνουμε reset στα παραπάνω είναι o εξής: *{ margin:0; padding:0; } 1 2 3 4 *{ margin:0; padding:0; } To reset CSS αρχείο που περιέχει το blueprint css framework είναι πολύ πιο εξειδικευμένο και πιάνει τα πάντα. Διαβάζουμε επίσης ότι μας παρέχει κανόνες για typography,κοινώς για τις γραμματοσειρές και επίσης μας παρέχει έτοιμα css φορμών επικοινωνίας καθώς και ειδικά css σε περίπτωση που θέλει κάποιος να εκτυπώσει τη σελίδα μας….Κοινώς το συγκεκριμένο CSS framework μας παρέχει τα πάντα…Ας ξεκινήσουμε το πρακτικό μέρος και ας κατεβάσουμε το blueprint css Κατεβάζοντας και εφαρμόζοντας το blueprint css framework. To πρώτο πράγμα που θα κάνουμε είναι να κατεβάσουμε το CSS FRAMEWORK.Κατεβάστε το zip αρχείο που υπάρχει στη σελίδα που σας είπαμε παραπάνω. Πατήστε πάνω στο “zip”.Αποθηκεύστε το αρχείο στο desktop σας και στην συνέχεια αποσυμπιέστε το στο desktop επίσης..Αυτό που θα πρέπει να βλέπετε στο desktop είναι ένας φάκελος όπως στην παρακάτω εικόνα. blueprintcss στο desktop μας Πριν κάνουμε οτιδήποτε με τον φάκελο αυτό ας επιστρέψουμε λίγο στη ιστοσελίδα του blueprint css.Στη δεξιά πλευρά βλέπουμε τα εξής links. Ας τα δούμε λοιπόν ένα-ένα Live Demos—>Στη συγκεκριμένη σελίδα υπάρχουν κάποια demos σχετικά με το blueprint css ,με την εφαρμογή του,με το grid κλπ.Επίσης μας δίνει links για να δούμε πώς θα είναι οι φόρμες μας με την εφαρμογή του blueprint css framework. Blueprint WIKI—>Εδώ υπάρχει το ζουμί.Υπάρχει ένα απλό tutorial καθώς και άρθρα σχετικά με το framework αυτό.Επίσης υπάρχουν εργαλεία ,plugins ,η άδεια χρήσης κλπ.Αυτή την ενότητα θα την δούμε σε λίγο. Bug Tracker—>Εδώ μπορείτε να δηλώσετε αν βρήκατε κάποιο λάθος στο framework αυτό και να δείτε και απαντήσεις σε άλλα bugs που τυχόν υπάρχουν! Discussion Group—>Εδώ είναι το support.Η υποστήριξη.Μπορείτε να ρωτήσετε κάτι και οι άλλοι χρήστες μπορούν να απαντήσουν στην ερώτησή σας. Αυτά είναι λίγο πολύ όλα όσα πρέπει να γνωρίζετε…Ας συνεχίσουμε.. Σχετικά με το grid που υπάρχει στο blueprint css. Το βασικό ζήτημα είναι να κατανοήσουμε τι είναι “grid”.Αυτό μπορεί να γίνει ως εξής.Πατήστε στο link Live Demos και θα δείτε ότι μπροστά σας εμφανίζονται κάποια Links.Πατήστε στο link “Grid”..Θα δείτε ότι ανοίγει μία test σελίδα στην οποία υπάρχει ένα φόντο με μπλε γραμμές κάθετες και ανάμεσα σε αυτές λεπτές γραμμές λευκές. Αυτό είναι και το grid. Απλή επεξήγηση στο grid Διαβάζοντας λίγο το αρχείο “grid.css” που υπάρχει στα δεξιά του link “grid” που προαναφέραμε,βλέπουμε πάνω πάνω την εξής δήλωση:Το grid συνολικά έχει συνολικό μήκος 950px.Αποτελείται από 24 στήλες πλάτους 30px έκαστη οι οποίες έχουν μεταξύ τους 10px απόσταση.Εάν κάνουμε την αριθμητική πράξη βλέπουμε ότι :24*30=720px + 23*10=230px.Αν τα προσθέσουμε όντως έχουμε 950px.(Προφανώς οι λευκές στήλες είναι όσες και οι μπλε μείον μία αφού βρίσκονται ανάμεσα γι αυτό και πολλαπλασιάζουμε επί 23 τις λευκές.. ).Άρα λοιπόν κάθε τι που δημιουργούμε πάνω στο grid θα είναι θα είναι συγκεκριμένου μεγέθους και θα έχει σχέση με το grid αυτό καθεαυτό. Ότι δημιουργούμε στο grid θα είναι υποπολλαπλάσιο του 960px. Και με την βοήθεια του grid όλα μπαίνουν σε σωστή σειρά στην ιστοσελίδα μας. ΑΡΑ ΤΟ GRID ΕΙΝΑΙ ΕΝΑΣ “ΜΠΟΥΣΟΥΛΑΣ” ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΜΕ ΓΙΑ ΝΑ ΚΑΤΑΣΚΕΥΑΣΟΥΜΕ ΣΩΣΤΑ ΤΑ HTML ΣΤΟΙΧΕΙΑ ΜΑΣ ΚΑΙ ΝΑ ΤΑ ΤΟΠΟΘΕΤΗΣΟΥΜΕ ΣΩΣΤΑ… Εφαρμογή του blueprint CSS στην ιστοσελίδα μας… Αφού είδαμε λίγο το “grid” τώρα πλέον μπορούμε να κάνουμε μία εφαρμογή ,να δημιουργήσουμε μία ιστοσελίδα από το μηδέν η οποία θα περιέχει αυτό το framework.Για να το κάνουμε αυτό πρέπει να πάμε στην αρχική σελίδα,να πατήσουμε το link το οποίο έχει τίτλο Blueprint WIKI και αφού ανοίξει η σελίδα να πατήσουμε πάνω στο link “Tutorials” και εν συνέχεια στη νέα σελίδα που θα ανοίξει στο link “Quick Start Tutorial”..Εδώ είμαστε…Από κάτω από το “quick start tutorial” υπάρχουν και άλλα tutorials που αξίζει να διαβαστούν.Το πρώτο πράγμα που βλέπουμε είναι για την εγκατάσταση.Επειδή αυτό μπορεί να σας μπερδέψει ακολουθήστε ένα-ένα τα βήματα που σας προτείνω. Βήμα πρώτο:Δημιουργήστε ένα φάκελο στο desktop τον οποίο ονομάστε “theBlueprintSite”. Βήμα δεύτερο:Ανοίξτε τον αγαπημένο σας html editor και δημιουργήστε ένα καινούργιο html αρχείο.Ονομάστε το “mysite.html”.Τοποθετήστε το αρχείο αυτό μέσα στο φάκελο “theBlueprintSite”. Βήμα τρίτο:Στον παραπάνω φάκελο δημιουργήστε μέσα του ένα νέο φάκελο και ονομάστε τον “css”.Εκεί μέσα θα τοποθετήσετε αργότερα και το css της σελίδας σας αλλά και το blueprint css framework-κάποια αρχεία, θα το δούμε παρακάτω. Βήμα τέταρτο:Ανοίξτε με διπλό κλικ τον φάκελο του blueprint css που αποσυμπιέσατε στην αρχή του tutorial αυτού.Κάντε ένα-δύο διπλά κλικ μέχρι να βρεθείτε στην παρακάτω εικόνα. Τον βλέπετε τον φάκελο με το όνομα “blueprint”;Αντιγράψτε τον έτσι όπως είναι και τοποθετήστε τον μέσα στο φάκελο “css” που δημιουργήσαμε στο βήμα τρία!!! Βήμα πέμπτο:Με τη βοήθεια του αγαπημένου σας html editor δημιουργήστε ένα αρχείο css-ονομάστε τον “styles.css” και τοποθετήστε το μέσα στο φάκελο «css» που αναφέραμε ποιο πάνω.Άρα ο φάκελος «css» που βρίσκεται μέσα στο φάκελο «theBlueprintSite» περιέχει τα εξής: Εφαρμογή του CSS framework στη σελίδα μας. Αφού κάναμε όλα τα παραπάνω,τώρα είμαστε έτοιμοι να εφαρμόσουμε το CSS framework στη σελίδα μας.Στη σελίδα με την εγκατάσταση βλέπουμε ποια αρχεία πρέπει να καλέσουμε στη σελίδα μας και μάλιστα στο head.Εμείς μετά τη δημιουργία και των παραπάνω φακέλων,θα κάνουμε δύο βήματα. Βήμα πρώτο:Ανοίγουμε το αρχείο “mysite.html” στον editor της επιλογής μας. Βήμα δεύτερο:Στο head της σελίδας μας γράφουμε τον παρακάτω κώδικα. <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"/> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"/> <link rel="stylesheet" href="css/styles.css" type="text/css"/> 1 2 3 4 <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"/> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"/> <link rel="stylesheet" href="css/styles.css" type="text/css"/> Απλές επεξηγήσεις: Γραμμή 1:Είναι το css αρχείο που εφαρμόζεται στην ιστοσελίδα μας. Γραμμή 2:Είναι το css αρχείο που χρησιμοποιείται όταν κάνουμε εκτύπωση τη σελίδα μας. Γραμμή 3:Είναι το css αρχείο που διορθώνει τα bugs του internet explorer. Γραμμή 4:Είναι το δικό μας css αρχείο.Εδώ θα χρησιμοποιήσουμε τις ειδικές εντολές οι οποίες ορίζονται μέσα στο αρχείο που καλούμε στη γραμμή 1. Βασικά το framework το καλούμε στη γραμμή 1+2+3.Από κει και πέρα στη γραμμή 4 θα γράψουμε CSS κώδικα ο οποίος θα στηριχτεί σε ειδικές εντολές που ορίζονται μέσα στο framework και λίγες από αυτές βρίσκονται και στη σελίδα με το tutorial που είδαμε παραπάνω. Ας δούμε τα πιο βασικά του blueprint CSS framework.. Στο web development υπάρχει μία div την οποία τη χρησιμοποιούμε για να τοποθετήσουμε μέσα σε αυτή την ιστοσελίδα.Την ονομάζαμε “wrapper” συνήθως. Εδώ,επειδή στα css αρχεία που φορτώσαμε στο head υπάρχει το grid,ορίζεται δηλαδή, γράφουμε το εξής ανάμεσα στα body tags της σελίδας: <div class="container"> Εδώ μέσα πλέον κατασκευάζω τη σελίδα μου.Η class="container" ουσιαστικά ορίζει το grid μας!!!Εάν δεν την γράψουμε τότε έχουμε πρόβλημα,διότι όλα παίζουν πάνω σε αυτό το Grid!!!! </div> 1 2 3 <div class="container"> Εδώ μέσα πλέον κατασκευάζω τη σελίδα μου.Η class="container" ουσιαστικά ορίζει το grid μας!!!Εάν δεν την γράψουμε τότε έχουμε πρόβλημα,διότι όλα παίζουν πάνω σε αυτό το Grid!!!! </div> Κάποιες βασικές εντολές CSS… Για τη χρήση του framework αυτού έχουν οριστεί κάποιες συγκεκριμένες κλάσεις.Δηλαδή ας δούμε λίγο μέσα στην ιστοσελίδα <div class="span-24 last"> //Εδώ δημιουργούμε μία div η οποία έχει πλάτος 24 μπλε στήλες!!!Εάν δείτε το grid και μετρήσετε 24 μπλε στήλες θα διαπιστώσετε ότι μιλάμε για όλο το GRID άρα 950px!!Οπότε αυτή η η div έχει πλάτος 950px.Η κλάση last δηλώνει ότι μετά αυτή την div δεν ακολουθεί άλλη ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ!!!!! </div> 1 2 3 <div class="span-24 last"> //Εδώ δημιουργούμε μία div η οποία έχει πλάτος 24 μπλε στήλες!!!Εάν δείτε το grid και μετρήσετε 24 μπλε στήλες θα διαπιστώσετε ότι μιλάμε για όλο το GRID άρα 950px!!Οπότε αυτή η η div έχει πλάτος 950px.Η κλάση last δηλώνει ότι μετά αυτή την div δεν ακολουθεί άλλη ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ!!!!! </div> Η βασική φόρμουλα για να μην μπερδεύεστε με το πλάτος κάθε html στοιχείου είναι η εξής: (Αριθμός span*40)-10.Δηλαδή παραπάνω έχουμε 24*40=960px από το οποίο αν αφαιρεθεί το 10px κάνει 950px που είναι το σύνολο του grid!Τόσο απλά..! Kάτι σημαντικό!!Σε κάθε γραμμή της σελίδας πρέπει να φροντίσουμε ώστε τα html στοιχεία που υπάρχουν ,εάν προσθέσουμε τα πλάτη τους να μας δίνουν 950px.Επίσης στο τελευταίο στοιχείο κάθε γραμμής πρέπει και οφείλουμε να τοποθετούμε και την κλάση “last” σε περίπτωση που το άθροισμα των πλατών δεν είναι 950px. Θα είναι το καλύτερο. Κατασκευάζοντας τη σελίδα μας Ανοίξτε τη σελίδα “mysite.html” στον αγαπημένο σας html editor καθώς και το αρχείο “styles.css”.. Ας κάνουμε το πρώτο βήμα!Ορίζουμε τη div με την κλάση “container”..Για να δούμε το βασικότερο κομμάτι κώδικα: <!--Αρχή grid--> <div class="container"> <!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!--> </div> <!--Τέλος grid--> 1 2 3 4 5 <!--Αρχή grid--> <div class="container"> <!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!--> </div> <!--Τέλος grid--> To CSS για την κλάση “container” δεν θα το γράψουμε γιατί ορίζεται από το framework και τα αρχεία που καλέσαμε! Το επόμενο βήμα είναι να δημιουργήσουμε μία div με κλάση “clear” -αυτό κάνουμε για να “καθαρίσουμε” τα διάφορα floats που μπορεί να έχουν τα html στοιχεία που θα δημιουργήσουμε.Αυτό συνήθως το τοποθετούμε ακριβώς πριν το κλείσιμο του “container”..Στον παραπάνω κώδικα προσθέτουμε την κλάση ως εξής: <!--Αρχή grid--> <div class="container"> <!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!--> <!--Eδώ είναι η div με την κλαση "clear"--> <div class="clear"></div> </div> <!--Τέλος grid--> 1 2 3 4 5 6 7 8 <!--Αρχή grid--> <div class="container"> <!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!--> <!--Eδώ είναι η div με την κλαση "clear"--> <div class="clear"></div> </div> <!--Τέλος grid--> To css για την div με την κλάση “clear” είναι το εξής: .clear{ clear:both; } 1 2 3 .clear{ clear:both; } Προσοχή!!!Την κλάση αυτή τη τοποθετώ για λόγους προληπτικούς διότι τις περισσότερες φορές έχω floats html στοιχείων .Μετά από τα παραπάνω είμαστε έτοιμοι να δημιουργήσουμε header,navigation,content και footer!! Δημιουργία header. Θα δημιουργήσουμε ένα απλό header.Θα έχει πλάτος όσο το grid μας δηλαδή 950px.Και θα του δώσουμε ένα id ώστε να του πειράξουμε την εμφάνιση και όχι μόνο στο «styles.css».Μέσα στο div με class «container» γράφουμε: <!-- HEADER--> <div class="span24" id="header"> <h1>Αυτό είναι το header μας!!</h1> </div> <!-- ΤΕΛΟΣ HEADER--> 1 2 3 4 5 6 7 <!-- HEADER--> <div class="span24" id="header"> <h1>Αυτό είναι το header μας!!</h1> </div> <!-- ΤΕΛΟΣ HEADER--> Στο «styles.css» προσθέτουμε τον παρακάτω κώδικα: #header{ background-color:navy;/*Το χρώμα της div-το ναυτικό μπλε.*/ height:100px;/*ύψος της div*/ border-bottom:5px solid #00006A;/*5px border στο κάτω μέρος της div*/ text-align:center;/*Ότι κείμενο γράφεται έχει τοποθετήσει στο κέντρο της header div!*/ } #header h1{ color:#ffffff;/*Χρώμα γραμματοσειράς επικεφαλίδας.*/ line-height:100px; /* Με αυτό η επικεφαλίδα μας πάει στο μέσο ύψος της header div.*/ font-family:'Trebuchet MS'; font-size:48px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 #header{ background-color:navy;/*Το χρώμα της div-το ναυτικό μπλε.*/ height:100px;/*ύψος της div*/ border-bottom:5px solid #00006A;/*5px border στο κάτω μέρος της div*/ text-align:center;/*Ότι κείμενο γράφεται έχει τοποθετήσει στο κέντρο της header div!*/ } #header h1{ color:#ffffff;/*Χρώμα γραμματοσειράς επικεφαλίδας.*/ line-height:100px; /* Με αυτό η επικεφαλίδα μας πάει στο μέσο ύψος της header div.*/ font-family:'Trebuchet MS'; font-size:48px; } Ας δούμε ένα στιγμιότυπο: To header της ιστοσελίδας μας Δημιουργία navigation menu. Αφού τελειώσαμε το header ας φτιάξουμε ακριβώς από κάτω ένα navigation menu.Ένα navigation menu όπως γνωρίζετε είναι μία λίστα από links.Στον κώδικα της σελίδας μας, γράφουμε : <!--Navigation--> <ul class="span24 last" id="menu"> <li><a href="#">Αρχική</a></li> <li><a href="#">Σχετικά..</a></li> <li><a href="#">To portfolio</a></li> <li><a href="#">Επικοινωνήστε</a></li> <li><a href="#">Αναζήτηση στο site μας..</a></li> </ul> <!--Τέλος navigation--> 1 2 3 4 5 6 7 8 9 <!--Navigation--> <ul class="span24 last" id="menu"> <li><a href="#">Αρχική</a></li> <li><a href="#">Σχετικά..</a></li> <li><a href="#">To portfolio</a></li> <li><a href="#">Επικοινωνήστε</a></li> <li><a href="#">Αναζήτηση στο site μας..</a></li> </ul> <!--Τέλος navigation--> To αντίστοιχο CSS θα είναι : /*ΤΟ ΜΕΝΟΥ ΜΑΣ*/ #menu { overflow:hidden; padding: 5px 0 5px 0; background:blue; } #menu li { float:left; display: block; line-height: 40px; margin:0 5px 0 5px; color:#fff; } #menu li a{ padding: 17px; color:#fff; text-decoration: none; } /*Τα Links μας όταν κάνουμε hover*/ #menu li a:hover { color: #ffffff; background: #9a9a9a; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /*ΤΟ ΜΕΝΟΥ ΜΑΣ*/ #menu { overflow:hidden; padding: 5px 0 5px 0; background:blue; } #menu li { float:left; display: block; line-height: 40px; margin:0 5px 0 5px; color:#fff; } #menu li a{ padding: 17px; color:#fff; text-decoration: none; } /*Τα Links μας όταν κάνουμε hover*/ #menu li a:hover { color: #ffffff; background: #9a9a9a; } Ας δούμε ένα στιγμιότυπο: Δημιουργία mainContent div και 2 sidebar. Ένα βασικό μέλημα μας είναι ότι πρέπει όλα τα html στοιχεία σε μία γραμμή να είναι σε μήκος 24 στήλες του grid…Άρα μπορώ να κάνω το εξής:Η δεξιά και η αριστερή sidebar να είναι 4 στήλες η κάθε μία και το κεντρικό περιεχόμενο να είναι 16 κοινώς 4+16+4=24 στήλες που είναι το grid για το οποίο μιλούσαμε.Ας ξεκινήσω με την αριστερή sidebar. Η αριστερή sidebar. O html κώδικας που θα χρησιμοποιήσουμε είναι ο εξής: <!--αριστερή sidebar --> <div class="span-4" id="leftSidebar"> Αριστερή sidebar.. </div> 1 2 3 4 <!--αριστερή sidebar --> <div class="span-4" id="leftSidebar"> Αριστερή sidebar.. </div> Αυτός θα είναι ο κώδικας.Όπως βλέπουμε στη div αυτή δίνουμε την κλάση “span-4″ που δηλώνει 4 στήλες του grid δηλαδή 150px(βλέπε παραπάνω για επεξήγηση).Επίσης σε αυτή τη div δίνουμε ένα id,ώστε να μπορέσουμε μέσω των CSS να ελέγξουμε την εμφάνιση της.Ας δούμε λίγο το CSS που θα χρησιμοποιήσουμε για την div αυτή. /*CSS για την αριστερή sidebar*/ #leftSidebar{ margin-top:5px;/*περιθώριο από πάνω,από τη navigation bar */ background: #E5E5E5; /*Το χρώμα του φόντου της sidebar*/ height:300px;/*Το ύψος της sidebar*/ overflow:hidden;/*Με αυτή την εντολή αν τοποθετήσουμε μέσα στη sidebar περιεχόμενο που θα είναι μεγαλύτερο από το μέγεθος της τότε το κόβει στα 300px..*/ } 1 2 3 4 5 6 7 8 /*CSS για την αριστερή sidebar*/ #leftSidebar{ margin-top:5px;/*περιθώριο από πάνω,από τη navigation bar */ background: #E5E5E5; /*Το χρώμα του φόντου της sidebar*/ height:300px;/*Το ύψος της sidebar*/ overflow:hidden;/*Με αυτή την εντολή αν τοποθετήσουμε μέσα στη sidebar περιεχόμενο που θα είναι μεγαλύτερο από το μέγεθος της τότε το κόβει στα 300px..*/ } Κεντρικό περιεχόμενο και δεξιά sidebar.. Ο κώδικας για το κεντρικό περιεχόμενο και τη δεξιά sidebar θα είναι πολύ απλός και θα είναι ο εξής: <!--Βασικό περιεχόμενο--> <div class="span-16" id="mainContent"> Βασικό περιεχόμενο!!!! </div> <!--Δεξιά Sidebar --> <div class="span-4 last" id="rightSidebar"> Δεξιά sidebar.. </div> </p> 1 2 3 4 5 6 7 8 9 10 <!--Βασικό περιεχόμενο--> <div class="span-16" id="mainContent"> Βασικό περιεχόμενο!!!! </div> <!--Δεξιά Sidebar --> <div class="span-4 last" id="rightSidebar"> Δεξιά sidebar.. </div> </p> Στη συνέχεια θα γράψουμε το CSS για τα δύο αυτά html στοιχεία τα οποία έχουν ids «mainContent» το κυρίως περιεχόμενο και «rightSidebar» η δεξιά sidebar.Ας δούμε τον CSS κώδικα.. /*CSS για mainContent*/ #mainContent{ margin-top:5px; margin-bottom:5px;/*Αυτό το περιθώριο θα είναι από οποιοδήποτε html στοιχείο υπάρχει από κάτω από το mainContent--κοινώς τα τρία κουτιά που θα φτιάξουμε μετά..*/ background: #C3C3C3; height:300px; overflow:hidden; } /*CSS για την αριστερή sidebar*/ #rightSidebar{ margin-top:5px; background: #E5E5E5; height:300px; overflow:hidden; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /*CSS για mainContent*/ #mainContent{ margin-top:5px; margin-bottom:5px;/*Αυτό το περιθώριο θα είναι από οποιοδήποτε html στοιχείο υπάρχει από κάτω από το mainContent--κοινώς τα τρία κουτιά που θα φτιάξουμε μετά..*/ background: #C3C3C3; height:300px; overflow:hidden; } /*CSS για την αριστερή sidebar*/ #rightSidebar{ margin-top:5px; background: #E5E5E5; height:300px; overflow:hidden; } Ας δούμε ένα στιγμιότυπο του site μας. Μερικά γρήγορα συμπεράσματα Μετά τις παραπάνω απλές αλλά σημαντικές εξηγήσεις μπορούμε να συνεχίσουμε με τη δημιουργία των τριών κουτιών και του footer. Το πρώτο πράγμα που θέλουμε να τονίσουμε είναι ότι όπως βλέπετε και ιδίοις όμμασι στη δεξιά sidebar η οποία είναι η τελευταία στη γραμμή έχουμε τοποθετήσει και την κλάση “last”.Αυτό είναι πολύ σημαντικό να το κάνουμε…! Βλέπουμε ότι μεταξύ των divs υπάρχει ένα κενό.Αυτό το κενό δημιουργείται λόγω του grid.Εάν δείτε το grid στην ιστοσελίδα του blueprint CSS framework θα διαπιστώσετε ότι μεταξύ των στηλών υπάρχουν 10px κενά..Άρα όταν τελειώνει το ένα html στοιχείο μετά ακολουθεί κενό 10px. Παρατηρείστε το εξής και σκεφτείτε:Θα μπορούσαμε αντί για χρώμα φόντου να βάλουμε border γύρω από κάθε div.Εδώ όμως υπάρχει το εξής θέμα..To border προσθέτει pixels στο στοιχείο το οποίο το προσθέτουμε.Αν το κάνουμε υπάρχει πιθανότητα να σπάσουμε το grid και η δεξιά sidebar να πέσει από κάτω.Στην περίπτωσή μας που η γραμμή με τα τρία html στοιχεία είναι 24 στήλες ,δηλαδή 950px εάν βάλουμε 1px border για να περικυκλώσουμε την αριστερή div τότε η δεξιά sidebar θα πέσει από κάτω ..Αυτό διότι το συνολικό πλάτος των divs μαζί με τα κενά θα είναι 952px(αφού στην αριστερή sidebar το border θα προσθέσει 1px από δεξιά και 1px από αριστερά..) ενώ το grid έχει πλάτος 950px.Η λύση σε αυτές τις περιπτώσεις είναι κάπως πιο περίπλοκη και έχει να κάνει αποκλειστικά με την διαφοροποίηση του κώδικα css ώστε να μπορέσουμε να το φέρουμε εκεί που θέλουμε.. Δημιουργία των τριών κουτιών και footer με το blueprint CSS framework… Με τον ίδιο τρόπο όπως και παραπάνω θα κάνουμε τα τρία κουτιά και εν συνεχεία το footer…Ας δούμε τον κώδικα για τα τρία κουτιά ο οποίος μοιάζει εκπληκτικά με τα προηγούμενα. <!--Τρια κουτιά..--> <div class="span-8" id="leftUnder"> Αριστερό κάτω κουτί.. </div> <div class="span-8" id="middleUnder"> Μεσαίο κάτω κουτί.. </div> <div class="span-8 last" id="rightUnder"> Δεξί κάτω κουτί.. </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 <!--Τρια κουτιά..--> <div class="span-8" id="leftUnder"> Αριστερό κάτω κουτί.. </div> <div class="span-8" id="middleUnder"> Μεσαίο κάτω κουτί.. </div> <div class="span-8 last" id="rightUnder"> Δεξί κάτω κουτί.. </div> Ας δούμε και το αντίστοιχο CSS. /*CSS για leftUnder κουτί*/ #leftUnder{ background: #FED0CF; height:100px; overflow:hidden; } /*CSS για middleUnder κουτί*/ #middleUnder{ background: #FFE0C1; height:100px; overflow:hidden; } /*CSS για rightUnder κουτί*/ #rightUnder{ background: #FF7979; height:100px; overflow:hidden; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 /*CSS για leftUnder κουτί*/ #leftUnder{ background: #FED0CF; height:100px; overflow:hidden; } /*CSS για middleUnder κουτί*/ #middleUnder{ background: #FFE0C1; height:100px; overflow:hidden; } /*CSS για rightUnder κουτί*/ #rightUnder{ background: #FF7979; height:100px; overflow:hidden; } Είμαστε σχεδόν έτοιμοι. Ας προσθέσουμε και ένα footer Δημιουργία footer. <!--Footer--> <div class="span-24" id="footer"> To footer μας!!! </div> 1 2 3 4 <!--Footer--> <div class="span-24" id="footer"> To footer μας!!! </div> Ας δούμε και το CSS μας: /*CSS για footer*/ #footer{ height:20px; background: #AEFFAE; margin-top:5px; overflow:hidden; } 1 2 3 4 5 6 7 /*CSS για footer*/ #footer{ height:20px; background: #AEFFAE; margin-top:5px; overflow:hidden; } Ας δούμε ένα τελικό στιγμιότυπο: Επίλογος Εδώ κάπου φτάνουμε στο τέλος του tutorial αυτού. Ελπίζω να σας βοήθησε να καταλάβετε πώς χρησιμοποιούμε ένα css framework και πόσο γρήγορη είναι η δημιουργία μίας ιστοσελίδας βασιζόμενοι σε ένα τέτοιο. Σας ευχαριστώ πολύ για την ανάγνωση!