Αφού είδαμε τα βασικά των CSS, ώρα να προχωρήσουμε στην πράξη. Ο σχεδιασμός, συχνά, ξεκινάει στο χαρτί ή σε κάποιο σχεδιαστικό πρόγραμμα, με πρόχειρα σχέδια, τα οποία δεν αφορούν μόνο στο design αλλά και στην λειτουργικότητα. Βέβαια, το site που δημιούργησα για τα μαθήματα δεν έχει τίποτα ιδιαίτερο — εμένα μου πήρε 4-5 ώρες (τα άρθρα ήταν ήδη έτοιμα) αφού το design είναι πολύ απλό και η λειτουργικότητα περιορισμένη. Ας τα πάρουμε όμως με τη σειρά.
Πριν ακόμα ξεκινήσω να κατασκευάζω το site, είχα αποφασίσει ότι θα έχει μια επικεφαλίδα, μια κολώνα αριστερά για τις βασικές επιλογές και ένα «κουτί» στο κέντρο για το περιεχόμενο των άρθρων. Είναι μια πολύ κοινή διάταξη και τα περισσότερα sites δεν χρειάζονται άλλα «συστατικά». Ας δούμε τον σκελετό της αρχική σελίδας:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="el"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="default.css" type="text/css" title="Default" media="screen"> <title>Πρώτα βήματα στην HTML: Αρχική σελίδα</title> </head> <body> <div id="container"> <div id="header"></div> <div id="content"> </div> <div id="sidebar"> </div> </div> </body> </html>
Η πρώτη γραμμή του index.html είναι η δήλωση DOCTYPE. Το site είναι δηλωμένο σαν HTML 4.01 Strict. Ακολουθεί το <html> με το attribute lang="el" που δηλώνει τα ελληνικά σαν τη γλώσσα του site. Έπειτα ξεκινάει το <head>, με το <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> να καθορίζει την κωδικοποίηση της σελίδας σε Unicode (utf-8). Κατόπιν, φορτώνουμε τα CSS με τη δήλωση <link rel="stylesheet" href="default.css" type="text/css" title="Default" media="screen">. Το rel attribute δηλώνει στον browser να ζητήσει από τον server το αρχείο του href το οποίο είναι type="text/css" με τον τίτλο Default (προαιρετικό) και θα χρησιμοποιείται όταν το site μας προβάλεται στην οθόνη (media="screen"). Μπορούμε να έχουμε διαφορετικά CSS αρχεία για δαφορετικά μέσα — το πιο χρήσιμο από αυτά είναι το print που μας επιτρέπει, τον ίδιο ακριβώς κώδικα HTML να τον εκτυπώσουμε με διαφορετική μορφή και αυτή είναι η ομορφιά των CSS! Μπορούμε, αλλάζοντας ένα μόνο αρχείο να αλλάξουμε την εμφάνιση όλων των σελίδων που το χρησιμοποιούν.
Το <head> κλείνει με το <title> που είναι η επικεφαλίδα της σελίδας.
Το <body> περιέχει το περιεχόμενο — 4 <div>. Τι είναι αυτό; Είναι ένα tag που μας επιτρέπει να δημιουργούμε ενότητες (ή κουτιά) στη σελίδα μας για να οργανώνουμε την πληροφορία μας. Το <div> είναι ένα block level element που σημαίνει ότι, εξ ορισμού, καταλαμβάνει όλο το πλάτος της σελίδας, το ύψος του είναι όσο χρειάζεται για να περικλείει τα περιεχόμενα του ενώ έχει margin, padding και border. Το <div> είναι αόρατο στον χρήστη και χρησιμοποιείται μόνο για λόγους design — αντί για τα tables που χρησιμοποιούσαμε κάποτε.
Κάθε ένα από τα 4 <div> της σελίδας μας έχει μια «ταυτότητα» -ένα id- που μας χρησιμεύει ώστε να μπορούμε να το «βρούμε» μέσω CSS και να το μορφοποιήσουμε. Κάθε id θα πρέπει να είναι μοναδικό. Τα ids που χρησιμοποιώ με βοηθούν να θυμάμαι τι είδους πληροφορία θα περιλαμβάνεται σε καθένα από αυτά — έτσι έχω τα container (που περιλαμβάνει τα υπόλοιπα), header, content και sidebar. Προσέξτε πως, ενώ το sidebar είναι τελευταίο στον κώδικα, εμφανίζεται στα αριστερά του content — αυτό είναι κάτι που γίνεται πολύ εύκολα με τα CSS. Μέσα σε κάθε <div> θα γράψω τα κατάλληλα tags (<p>, <h1>, <ul>) για να παρουσιάσω την πληροφορία που έχω υπόψιν. Στο επόμενο μάθημα θα δούμε το header και το πως χρησιμοποιούμε τα background-image στα CSS. Μέχρι τότε, δείτε όλο το αρχείο default.css:
a, a:link { color: #95a83d; text-decoration: none; }
a:visited { color: #a8743d; }
a:hover, a:active { text-decoration: underline; }
abbr, acronym { cursor: help; }
body { background: #f5f5f5 url(images/headerBg.gif) repeat-x top; color :#0a0a0a; font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 62.5%; margin: 0; padding: 0; }
code { font-size: 1.1em; line-height: 100%; }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: bold; margin: 0 0 1em 0; padding: 0; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
img { border: 0; }
pre { background-color: #f5f5f5; border: 1px dotted #a8743d; display: block; font-size: 1.1em; max-height: 10em; margin: 0; overflow: auto; padding: 2px; width: 98%; }
p { font-size: 1.1em; line-height: 150%; margin: 1em 0 0 0; text-indent: 1em; }
#container { border: 0; margin: 0 20px 20px 20px; padding: 0; width: 760px; }
#content { background: #fff url(images/contentBg.gif) repeat-x top; border: 1px solid #a8743d; float: right; margin-top: -100px; padding: 4px; width: 570px; }
#content h2 { font-size: 14px; margin-bottom: 2em; }
#header { background: url(images/photo.png) no-repeat top left; height: 154px; margin-top: 10px; text-indent: 180px; }
#header h1 { color: #fff; font-size: 18px; padding-top: 24px; }
#sidebar { margin-top: 20px; width: 170px; }
#sidebar ul { list-style-type: none; font-size: 1.1em; margin: 0; padding: 0; }
#sidebar ul li { margin-bottom: 0.5em; }
#sidebar ul li ul { font-size: 1em; margin-top: 0.5em; }
#sidebar ul li ul li { background: url(images/bullet_green.png) no-repeat left bottom; margin-bottom: 0; padding-left: 20px; }
.about { font-size: 1.2em; }
.clearBoth { clear: both; }
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...