Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 2 : CSS)

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 2 : CSS)

Δημοσίευση από Joakim » 16 Νοέμ 2010 01:03

Φτιάξτε την δική σας ιστοσελίδα (Μάθημα 2 : CSS)


Τι είναι το CSS (παράθεση από : http://aetos.it.teithe.gr/~fotmpog/whatis.html )
Τα CSS (Cascading Style Sheets) προσδιορίζουν το πως θα προβληθούν τα στοιχεία του HTML. Αποθηκεύονται στην μορφή .css (αφού τα έχουμε γράψει σε οποιοδήποτε text editor), και προστέθηκαν στο HTML 4.0 για να λύσουν ένα πρόβλημα.
Το CSS είναι μια καινοτομία στο Web design γιατί επιτρέπει στους χρήστες να κοντρολάρουν το πως θα είναι η γενική και ειδική εμφάνιση πολλών Web σελίδων μαζί ταυτόχρονα!

Δημιουργία CSS

Η δημιουργία των επάλληλων φύλλων στυλ (Cascading Style Sheets) ήταν κίνηση του οργανισμού W3C.
Η παλιά έκδοση της γλώσσας HTML, συνδύαζε το περιεχόμενο, την δομή, και τις οδηγίες μορφοποίησης σε ένα μόνο έγγραφο, κάτι που απλοποιούσε τα πράγματα αλλά δεν παρείχε και πολλές δυνατότητες.
Οι άνθρωποι του W3C οραματίστηκαν ένα νέο σύστημα στο οποίο οι οδηγίες μορφοποίησης θα αποθηκεύονταν χωριστά από το περιεχόμενο και την δομή, έτσι ώστε να μπορούν να εφαρμοστούν όχι μόνο σε μία παράγραφο ή ιστοσελίδα αλλά και σε μια ολόκληρη τοποθεσία ιστού αν το επιθυμούσε ο σχεδιαστής της.
Οι αρχικές προδιαγραφές του CSS περιορίζονταν κυρίως στην επανάληψη των παλιών εφέ της HTML. Ωστόσο με το δεύτερο επίπεδο του συστήματος CSS, δηλαδή το CSS2 το οποίο δημοσιεύθηκε το 1998, προστέθηκαν νέες δυνατότητες - με σημαντικότερη τη δυνατότητα τοποθέτησης στοιχείων σε μια ιστοσελίδα με μεγάλη ακρίβεια.

CSS1 και CSS2

Το CSS σχεδιάστηκε για να χωρίσει την μορφοποίηση από τις προδιαγραφές του HTML. Όπως και τα στυλ σε ένα πρόγραμμα επεξεργασίας κειμένου, το CSS παρέχει ένα μηχανισμό για να ορίσει εύκολα και να αλλάξει την μορφοποίηση χωρίς να αλλάξει την δομή του κώδικα. Η λέξη "cascade" (επάλληλο) στο όνομα προέρχεται από το γεγονός πως οι προδιαγραφές επιτρέπουν πολλαπλά φύλλα στυλ να αλληλεπιδρούν, επιτρέποντας έτσι ανεξάρτητα Web κείμενα να μορφοποιούνται ελαφρώς διαφορετικά απο τα συγγενικά τους.

Η δεύτερη έκδοση του CSS (CSS2) χτίζεται στις ικανότητες της πρώτης έκδοσης, προσθέτοντας περισσότερες ιδιότητες από τις οποίες μπορεί να επιλέξει ένας Web designer.

Γιατί να χρησιμοποιήσετε CSS στην δημιουργία της ιστοσελίδας σας

Η χρήση φύλλων στυλ CSS για την διάταξη των ιστοσελίδων παρέχει αρκετά πλεονεκτήματα σε σχέση με την χρήση άλλων μεθόδων.
Καταρχάς τα φύλλα στυλ CSS είναι ό,τι πρέπει για την δημιουργία ρευστών διατάξεων, οι οποίες αναπτύσσονται ή συρρικνώνονται ανάλογα με το μέγεθος της οθόνης του επισκέπτη. Εξάλλου η διατήρηση του κειμένου χωριστά από τις οδηγίες της διάταξης σημαίνει ότι μπορείτε πολύ εύκολα να εφαρμόσετε την ίδια διάταξη σε μια ολόκληρη τοποθεσία ιστού με μία μόνο κίνηση.
Έτσι θα μπορείτε αργότερα να αλλάξετε τη διάταξη ολόκληρης της τοποθεσίας τροποποιώντας απλώς το αρχείο CSS. Ο συνδυασμός φύλλων στυλ CSS και (X)HTML οδηγεί επίσης στην παραγωγή μικρότερων αρχείων, κάτι που σημαίνει ότι οι επισκέπτες σας δεν θα χρειάζεται να περιμένουν τόσο πού για να δουν την τοποθεσία σας. Τέλος επειδή τα φύλλα στυλ CSS και η (X)HTML αποτελούν αναμφισβήτητα τα ισχύοντα πρότυπα, οι σελίδες που συμμορφώνονται στους κανόνες τους είναι εξασφαλισμένο ότι θα υποστηρίζονται στις μελλοντικές εκδόσεις των φυλλομετρητών (και θα ζητούνται όλο και περισσότερο από τους επαγγελματίες σχεδιαστές ιστοσελίδων).

Το κυριότερο μειονέκτημα των φύλλων στυλ CSS σε ότι αφορά τη διάταξη είναι ότι οι παλιότεροι φυλλομετρητές είτε δεν τα καταλαβαίνουν είτε τα παρερμηνεύουν.

Τέλος παράθεσης
Περισσότερες γενικές πληροφορίες ασκήσεις και παραδείγματα μπορείτε να βρείτε εδώ:

http://www.w3schools.com/css/default.asp
http://www.freestuff.gr/forums/viewtopic.php?t=27914

Σημείωση : Στο επόμενο εισαγωγικό μάθημα, θα δούμε βήμα προς βήμα την κάθε διαδικασία παρόλα αυτά, σας συνιστώ να διαβάσετε τα πιο πάνω, έτσι ώστε να μάθετε και κατανοήσετε την χρήση του CSS. Εάν δεν το κάνετε πάλη θα είστε σε θέση να ολοκληρώσετε το μάθημα, αλλά δυστυχώς δεν θα είστε σε θέση να δημιουργήσετε ένα δικό σας project.

Στο επόμενο μάθημα, με ονομασία κεφαλαίου Εισαγωγή θα προετοιμάσουμε το βασικό αρχείο CSS, και το βασικό αρχείο HTML τα οποία θα χρειαστούμε. Θα μπορούσαμε να τα δημιουργήσουμε απευθείας, αλλά με αυτό τον τρόπο θα μπορείτε να πειραματιστείτε με τα αρχεία που θα έχετε ώστε να δείτε από μόνοι σας την λειτουργία του CSS. ΔΕΝ θα επικεντρωθούμε στην ανάπτυξη του HTML αρχείου.

Επόμενο μάθημα, δεν το γράφω, τις προηγούμενες φορές δεν τήρησα το χρονοδιάγραμμα και τα ποστάρω λίγες ώρες μετά. Άρα σε λίγες ώρες θα υπάρχει και το επόμενο στάδιο.

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 4 επισκέπτες