Μάθημα Web Design 3:Δημιουργήστε τη header div + CSS

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
27/06/2010 από
root

 

Καλησπέρα σας!!!Στο προηγούμενο web design tutorial δημιουργήσαμε το βασικό “σκελετό” της ιστοσελίδας μας και ονομάσαμε τις βασικές divs.

Σε αυτό το web design tutorial tutorial θα κάνουμε το εξής:Θα εφαρμόσουμε κανόνες CSS για το σώμα της σελίδας μας και επίσης θα εφαρμόσουμε CSS για την container και τη header div.Χωρίς καθυστερήσεις ας ξεκινήσουμε το tutorial.. :-)

Το πιο απλό αλλά βασικό ερώτημα και η απάντηση του..

Το πιο απλό αλλά βασικό ερώτημα θα μπορούσε να είναι το εξής:”Όταν ανοίγω τη σελίδα μου στον browser που θα την βλέπω,αριστερά,δεξιά ή στη μέση;;”..Αυτή η απάντηση και η λύση του προβληματισμού θα δοθεί με το CSS που θα εφαρμόσω στη container div.Ανάλογα με το που θέλω να βρίσκεται η ιστοσελίδα μου έτσι θα δημιουργήσω και τους κανόνες CSS.Στο δικό μας παράδειγμα η ιστοσελίδα μας θα βρίσκεται στο κέντρο του browser.

Ξεκινώντας με τον CSS κώδικα.

Αφού αποφασίσαμε το που θα βρίσκεται η σελίδα μας σε σχέση με το παράθυρο του browser τώρα θα κάνουμε το εξής.Θα ορίσουμε κάποιους πολύ βασικούς κανόνες CSS οι οποίοι θα εφαρμόζονται σε όλη την ιστοσελίδα μας και εν συνεχεία θα ασχοληθούμε με τη δημιουργία της “header div“.Ποιοι θα είναι όμως οι γενικοί κανόνες CSS;;

Γενικοί κανόνες CSS

Στην εφαρμογή των CSS σε μία ιστοσελίδα καλό θα είναι να ορίζουμε κάποιους γενικούς κανόνες.Όπως γνωρίζουμε τα CSS εφαρμόζονται στα html στοιχεία κάποιας σελίδας.Μπορεί να εφαρμόσουμε CSS στυλ σε παραγράφους “p“, header tags “h1,h2..h6“, σε divs ,σε εικόνες “img” κλπ…Με τα CSS μπορούμε να ρυθμίζουμε το χρώμα,τη γραμματοσειρά, τα περιθώρια (δειτε box model στο CSS tutorial ) margins και paddings και πολλά άλλα!!!Πρέπει να θυμόμαστε όμως κάτι πολύ σημαντικό :

Κάθε html στοιχείο έχει προκαθορισμένες τιμές margin και padding.Κοινώς τα περιθώρια που μπορεί να έχει ένα html στοιχείο από ένα άλλο (margin) όπως και το περιθώριο που υπάρχει στη μέσα πλευρά του στοιχείου (padding) είναι προκαθορισμένα!

Οπότε λοιπόν το πρώτο πράγμα που πρέπει να κάνουμε είναι να μπορέσουμε να κάνουμε ένα reset σε αυτά τα προκαθορισμένα CSS properties (έτσι λέγονται τα margins και τα paddings και όχι μόνο.)

Στο ίντερνετ υπάρχουν κάποια έτοιμα CSS αρχεία με κώδικα που κάνει reset όχι μόνο στα margins και paddings αλλά και σε πολλά άλλα css attributes διαφόρων στοιχείων.Εμείς εδώ θα κάνουμε το πιο απλό reset που υπάρχει γιατί θέλουμε τα html στοιχεία μας να έχoυν το margin και το padding που θέλουμε εμείς.Θα χρησιμοποιήσουμε το universal selector “*” των CSS που εφαρμόζει το στυλ σε όλα τα html στοιχεία της σελίδας μας

Ξεκινώντας συγγραφή γενικών CSS κανόνων.

Δημιουργήστε ένα νέο φάκελο μέσα στον φάκελο που έχουμε δημιουργήσει το αρχείο html που μιλήσαμε στο προηγούμενο tutorial.Ονομάστε το φάκελο αυτό “css”.Σε αυτό το φάκελο δημιουργήστε ένα κενό αρχείο CSS και ονομάστε το “styles.css”.Αυτό θα είναι το βασικό αρχείο που θα δώσει στυλ στην ιστοσελίδα μας.Ας ξεκινήσουμε το κώδικα..Στο αρχείο “styles.css” γράψτε τον παρακάτω κώδικα.

/*Αυτό το block του κώδικα κάνει reset όλα τα margins και τα paddings σε όλα τα html στοιχεία της σελίδας μας..*/*{margin:0;padding:0;}

Αυτό ήταν το πρώτο και πολύ βασικό κομμάτι του CSS κώδικα.Είδατε πόσο απλό ..Θα συνεχίσουμε δημιουργώντας το επόμενο κομμάτι όπου θα δώσουμε σε όλη τη σελίδα ένα χρώμα background..

Δίνοντας στη σελίδα μας ένα χρώμα φόντου με CSS..

Εδώ μπορούμε να χρησιμοποιήσουμε το “body” όπου στα CSS αναφέρεται σε όλο το σώμα της σελίδας “index.html“(τη δημιουργήσαμε στο προηγούμενο web design tutorial).Θα εφαρμόσουμε ένα χρώμα φόντου και εν συνεχεία θα δούμε ένα στιγμιότυπο!

/*Εφαρμογή χρώμα φόντου στη σελίδα μας...!*/body{background-color: #dcdcdc;}

 

Ας δούμε ένα στιγμιότυπο πώς είναι η σελίδα μας!Προσοχή-στο head της “index.html” σελίδας μη ξεχάσετε να καλέσετε το css αρχείο..Ανάμεσα στα “head tags” θα καλέσουμε το “styles.css” :

<link rel="stylesheet" href="css/styles.css"/>

..Είμαστε έτοιμοι..Για να κάνουμε load τη σελίδα μας να δούμε..

Ωραία!Τώρα η σελίδα μας σαν χρώμα φόντου έχει ένα χρώμα ανοιχτό γκρι.Ας συνεχίσουμε τώρα με την δημιουργία της “container div” όπως επίσης και τη δημιουργία της “header div“.

Δημιουργία Container Div και εφαρμογή CSS

Εάν θυμηθούμε αυτά που έχουμε πει η “container div” περιλαμβάνει όλα τα στοιχεία στην ιστοσελίδα μας..Μέσα σε αυτή υπάρχουν τα πάντα..Και επειδή ακριβώς είπαμε ότι θέλουμε η ιστοσελίδα μας να φαίνεται στη μέση του παραθύρου του browser θα κάνουμε την container div να βρίσκεται στη μέση.Αυτό θα γίνει με χρήση CSS κώδικα..Ας θυμηθούμε όμως πρώτα τον html κώδικα της ιστοσελίδας μας..

Hmtl κώδικας

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>    <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <link rel="stylesheet" href="css/styles.css"/>    <title>Website template</title></head>

<body><!--Αρχή Container-Η div αυτή περιέχει τα πάντα!!!-->

<div id="container">

 <!-- Aρχή header div-->      <div id="header">

      </div> <!-- Τέλος Header div -->

 <!--Aρχη navigation ul-->       <ul id="navigation">

        </ul>  <!-- Tέλος navigation ul -->

  <!-- Αρχή περιεχομένου-mainContent div -->        <div id="mainContent">

        </div>  <!--Tέλος περιεχομένου-mainContent div -->

  <!--Αρχή footer div-->        <div id="footer">

        </div>  <!-- Τέλος footer -->

</div><!--Τέλος Container div -->

</body></html>

 

Βλέπετε ότι η “container div” περιλαμβάνει τα πάντα; Ας κάνουμε λοιπόν τη div αυτή να πάει στη μέση του browser window και μαζί με αυτή θα πάνε όλα τα περιεχόμενά της..Στο “styles.css” προσθέστε τον παρακάτω κώδικα και μετά θα δούμε στιγμιότυπο..

#container{width:950px;margin:150 auto;border:1px solid white;/*debugging purposes */background-color:#ffffff;overflow:hidden;height:400px;/*Μόνο για να δούμε το στιγμιότυπο.Θα το αφαιρέσουμε μετά.*/}

 

Εξηγήσεις κώδικα CSS για την container div.

“width:950px;”:Δίνουμε στην div ένα πλάτος 950px.
“margin:150 auto”:Με αυτή τη γραμμή δίνουμε ένα περιθώριο 150px από την κορυφή της “container div” με την κορυφή της ιστοσελίδας.Κοινώς η container div ξεκινάει 150px κάτω από την κορυφή της σελίδας.
“border:1px solid white;”:Αυτό το border(όριο) το χρησιμοποιούμε για να βλέπουμε ουσιαστικά τι περιβάλλει η container div.Το χρησιμοποιούμε για να δούμε τα όρια της div.Θα το αφαιρέσουμε αργότερα αν δεν μας χρειάζεται.
“background-color:#ffffff;”:Το χρώμα φόντου της div το ορίζω να είναι λευκό.
“overflow:hidden;”:Με αυτή την εντολή ορίζω ότι εάν τοποθετήσω κάτι μέσα στην container div το οποίο είναι πλατύτερο από 950px τότε ότι περισσεύει κόβεται……

Πριν δούμε ένα στιγμιότυπο θα προσθέσουμε ένα height(ύψος) μόνο για τώρα ώστε να δούμε πως φαίνεται και αν κεντράρεται η container div στη μέση της σελίδας.
Ας δούμε ένα στιγμιότυπο..

Είδατε πως φαίνεται η container div..;Αυτό θέλαμε ,ξεκινάει 150px από πάνω,είναι κεντραρισμένη στη μέση κλπ.Το border δεν φαίνεται γιατί είναι λευκό και έχει ίδιο χρώμα με το background.Αφαιρέστε την εντολή με το ύψος και ξεκινάμε τη δημιουργία της “header div“!!

Κάτι σημαντικό πριν δημιουργήσουμε τη “header div

Πριν δημιουργήσουμε τις επόμενες divs σε αυτό το web design tutorial πρέπει να μάθετε κάτι.Όταν έχουμε μία div που περικλείει άλλες,όπως η container div και έχει κάποιο χρώμα φόντου, εάν μέσα σε αυτή τη div περικλείσετε άλλες ,όπως για παράδειγμα την “header div” οι οποίες είναι floated-”float left” ή “float right”(θα εξηγήσουμε αμέσως μετά τι είναι αυτό) θα δείτε ότι το φόντο της container div θα εξαφανιστεί και η div αυτή θα ανέβει πάνω πάνω και θα εμφανίζεται σαν μία γραμμή.Για να μη μας συμβεί αυτό θα πρέπει να κάνουμε κάτι ώστε να καθαριστούν τα .Tα floats θα τα καθαρίσουμε ως εξής:Θα δημιουργήσουμε μία div με id =”clear” και θα την τοποθετήσουμε πριν το κλείσιμο της container div.Στη συνέχεια με το αντίστοιχο CSS θα εφαρμόσουμε σε αυτή τη div κανόνα που θα “καθαρίζει” και τα δεξιά και τα αριστερά floats.
Ας δούμε τι θα προσθέσουμε στον html κώδικα της σελίδας “index.html

<!-- Τέλος footer -->

<!-- Αρχή της Clear div --><div id="clear"></div><!-- Τέλος της Clear div -->

</div><!--Τέλος Container div --></body></html>

 

Τώρα θα προσθέσουμε στο αρχείο “styles.css” τον αντίστοιχο κώδικα που θα εφαρμόσει CSS στη div με id = “clear”.

#clear{clear:both;}

Με την παραπάνω εντολή καθαρίζονται όλα τα floats σε όλη τη σελίδα μας πριν κλείσει η “container div” και έτσι όλα λειτουργούν σωστά!Για πάμε να δημιουργήσουμε και τη header div τώρα!!

Δημιουργία header div και εφαρμογή CSS!

Πριν γράψουμε κώδικα κλπ θα θέλαμε να σκεφτούμε τι θα περιέχει η header div μας.Η div αυτή θα περιέχει το logo μας.Εκτός από αυτό προτείνω να περιέχει και κάποια links πάνω δεξιά καθώς και ένα πεδίο search για να μπορούμε να κάνουμε αναζήτηση στο site μας..Το logo θα μπει αριστερά στη “header div”.Δεξιά πάνω μπορεί να μπει ένα μικρό navigation menu με τα links που θέλουμε καθώς και το search field.Ας δούμε ένα σχέδιο με τα ονόματα των divs που θα χρησιμοποιήσουμε μέσα στη “header div” και στη συνέχεια εξηγούμε..
css header div

Εξήγηση των divs που βρίσκονται μέσα στη header div

Μέσα στη “header div” θα τοποθετήσουμε τις εξής divs:

  1. div με id = “logo
  2. ul με id = “membersAndLogin
  3. Div με id = “search

Logo div:Η div που θα περιέχει το logo μας.
membersAndLogin ul:Η ul αυτή θα είναι μία unordered list που θα περιέχει τα links στο μικρό μενού που θα τοποθετήσουμε πάνω δεξιά μέσα στη “header div”.Τα links που θα έχει αυτό το μενού θα είναι: ” search,sign up,login,contact”.
Search div:Η div αυτή θα περιέχει τη φόρμα με το πεδίο της αναζήτησης.
Μη ξεχνάμε φυσικά ότι όλες αυτές οι divs θα τοποθετηθούν μέσα στη “header div“.

Ας δούμε λίγο τον html κώδικα της header div..

Html κώδικας της header div.

Μετά όσο είπαμε παραπάνω ο html κώδικας της header div γίνεται ως εξής..

<!-- Aρχή header --><div id="header">

<!--Logo div-->  <div id="logo">  <img src="img/logo.png"/><!--το logo μας!-->  </div><!-- Τέλος logo div-->

<!--Αρχή membersAndLogin div -->  <ul id="membersAndLogin">  <li><a href="#">Search</a></li>  <li><a href="#">Sign Up</a></li>  <li><a href="#">Login</a></li>  <li><a href="#">Contact Us</a></li>  </ul><!--Τέλος membersAndLogin div-->

<!--Αρχή search div-->  <div id="search">   <form method="get" action="#" name="searchForm" id="searchForm">   <label for="search">Search</label>   <input type="text" value=""/>   </form>  </div><!-- Τέλος search div --></div><!-- Τέλος Header div -->

Σημείωση:Στο φάκελο που αποθηκεύουμε τα αρχεία της σελίδας μας, δημιουργήστε ένα φάκελο με το όνομα “img” στον οποίο θα τοποθετήσουμε τα αρχεία με τις φωτογραφίες και εικόνες μας.

Μάλιστα!Όλα καλά!Θα εφαρμόσω css τώρα στα αντίστοιχα ids των παραπάνω στοιχείων:”header“, “logo“, “membersAndLogin“, “search“, “searchForm“(id για τη φόρμα επικοινωνίας).Ας δούμε τον CSS κώδικα για κάθε μια div και εξηγούμε!Στο αρχείο “styles.css” προσθέτουμε..
1.)

/*Το css για το header*/#header{width:100%;height: 120px;border-top:1px solid #E6DAFE;border-bottom:1px solid #E6DAFE;}

Στον παραπάνω κώδικα ορίζουμε τα εξής:Η header div έχει πλάτος (width) 100% της div ΠΟΥ ΤΗΝ ΠΕΡΙΕΧΕΙ δηλαδή της container div,είναι 950pixels το πλάτος της.Το ύψος (height) το δίνουμε 120pixels και το κάνουμε γιατί θέλουμε αυτή η div να έχει σταθερό ύψος ,να μην αλλάζει.Αυτό μας βοηθά να να δημιουργήσουμε ένα logo το οποίο θα έχει ύψος 120px και πλάτος όσο θέλουμε.Τέλος με το παραπάνω κομμάτι CSS δίνουμε ένα border στην κορυφή της header div καθώς και ένα στην κάτω πλευρά.
2.)

/*Το css για το logo*/#logo{float:left;width:300px;height:120px;margin-right:30px;}

Στο παραπάνω block κώδικα εφαρμόζουμε στυλ στη div που περιέχει το logo μας.Έχουμε δημιουργήσει από πριν ένα logo το οποίο έχει πλάτος 300px και ύψος 120px.Γι αυτό και τα ίδια τα ορίζουμε για τη συγκεκριμένη div.Επίσης τη logo div την κάνουμε float:left.Με το float:left αναγκάζουμε την logo div να ξεκινάει όσο αριστερότερα γίνεται μέσα στην div που την περιέχει δηλαδή μέσα στη “header div“.Τέλος το “margin-right:30px” μας λέει ότι ο,τιδήποτε υπάρξει μετά την logo div,για παράδειγμα μία div, στην ίδια γραμμή θα ξεκινάει 30px δεξιότερα από την logo div.

Ας δούμε λίγο ένα στιγμιότυπο…..
header div logo css

Όλα καλά με τη “logo div“.Συνεχίσουμε τώρα με τον CSS κώδικα για την membersAndLogin ul..Πάνω στον κώδικα θα βρείτε κάποια σχόλια!!!!
3.)

/*CSS για την div που περιέχει τα login link ,members link κλπ καθώς και css για τη μορφοποίηση των links.*/

#membersAndLogin{float:left;margin-left: 395px;}/*CSS για list items - το κάθε ένα link δηλαδή..*/#membersAndLogin li{list-style: none;/*Αυτή η εντολή εξαφανίζει τις κουκκίδες που υπάρχουν αριστερά από κάθε list item*/float:left;margin-right:10px;/*Περιθώριο 10px δεξιά σε κάθε link της λίστας με τα link.*/font-size:12px;/*Μέγεθος γραμματοσειράς.*/font-family:Kalinga;/*Τύπος γραμματοσειράς.*/}/*CSS για τα links <a>*/#membersAndLogin li a{text-decoration:none;/*Αφαιρεί την γραμμή που υπάρχει by default κάτω από κάθε link.*/color: #818181;/*χρώμα γραμματοσειράς κάθε link.*/}/*CSS που εφαρμόζεται όταν περνάμε το ποντίκι πάνω από ένα link*/#membersAndLogin li a:hover{background: #dFdFdF;}

Ας δούμε λίγο κάτι:

#membersAndLogin{float:left;margin-left: 395px;}

Το “float:left;” κάνει την ul αυτή να ξεκινάει αριστερά μέσα στη header div.Επειδή η logo div ξεκινάει από τελείως αριστερά,η “memberAndLogin” ul ξεκινά αμέσως μετά.Στην ίδια γραμμή όχι από κάτω!
To “margin-left:395px;” κάνει το εξής:H ul αυτή θα απέχει 395px από τα αριστερά από την προηγούμενη div που είναι η logo div και όχι από την αριστερή πλευρά της header div!!!
Ας δούμε ένα στιγμιότυπο τώρα!!

Βλέπετε που τα links μας που πήγαν πάνω δεξιά;Αυτό ακριβώς θέλαμε!Ας κάνουμε τώρα το τελευταίο κομμάτι που θα δώσουμε css στη div που περιέχει τη φόρμα αναζήτησης καθώς και στη φόρμα αναζήτησης αυτή καθ εαυτή!

Ας δούμε το CSS που θα εφαρμόσουμε στη div με id=”search” καθώς και στη φόρμα με id =”searchForm“.

/*Αναζήτηση στο site css..Η div περιέχει την φόρμα search*/#search{float:right;margin: 20px 10px 0 0;/*περιθώρια από πάνω,δεξιά,κάτω,αριστερά*/}

/*css για το label στη φόρμα αναζήτησης.*/#searchForm label{    font-family: Kalinga;    font-size:20px;    color:#818181;}/*CSS για το πεδίο αναζήτησης.Το ύψος είναι 32px γιατί θα βάλουμε ένα εικονίδιο μέσα με μέγεθος 32*32px*/#searchForm input{    height:32px;    color: #B0B0B0;    font-size:20px;    width:150px;}

Στα παραπάνω CSS δεν έχουμε πολλά να εξηγήσουμε είναι πολύ απλά πραγματικά.Ας δούμε ένα στιγμιότυπο:

Κάτι τελευταίο.Θέλετε μέσα στο πεδίο της αναζήτησης να τοποθετήσουμε ένα εικονίδιο;Για να το κάνουμε αυτό κάνουμε το εξής..Θα δώσουμε ένα id στο πεδίο αναζήτησης της φόρμας και θα του εφαρμόσουμε στυλ με CSS ώστε να εμφανίζεται το εικονίδιο μέσα στο πεδίο αυτό.To id αυτό θα είναι το “searchpng”.Ας δούμε την αλλαγή στη “search div”:

<!--Αρχή search div -- ><div id="search"><form method="get" action="#" name="searchForm" id="searchForm"><label for="search">Search</label><input type="text" value="" id="searchpng"/></form></div><!--Τέλος search div -->

Όμορφα.Ας δούμε και το CSS που θα προσθέσουμε!

/*Το εικονίδιο μέσα στο search κουτί.*/#searchpng{background:url(../img/search.png) left no-repeat;padding-left:32px;/*δίνουμε περιθώριο από τη μέσα πλευρά του πεδίου αναζήτησης 32px γιατί το μέγεθος του εικονιδίου είναι 32px πλάτος * 32px ύψος..Επίσης το left -norepeat κάνει background μας,το εικονίδιο δηλαδή, να είναι στα αριστερά και να μην επαναλαμβάνεται κατά μήκος του πεδίου αναζήτησης*/}

Για να δούμε ένα στιγμιότυπο τώρα!!

Τέλεια!!!Μετά από τα παραπάνω η “header div” είναι έτοιμη!!!!

Επίλογος web design tutorial

Εδώ κάπου το web design tutorial φτάνει στο τέλος του.Μπορείτε να κατεβάσετε και pdf αρχείο με τον κώδικα που χρησιμοποιήθηκε μέχρις στιγμής.Σας ευχαριστούμε πολύ για την παρακολούθηση!!!!!!








Hide ↑

extend your possibilities!! xtnd.it

Follow Web Design Forum on Twitter ,

Οδηγός επιβίωσης WordPress για αρχάριους

25 October 2012

                    Ξεκινήσετε το wordpress blog σας μέσα σε λίγα λεπτά!

Read more...

Διαγωνισμός: 5 πακέτα Web Hosting από την StigmaHost

16 October 2012

Με ενθουσιασμό σας ανακοινώνουμε ότι η StigmaHost σας προσφέρει την ευκαιρία[…]

Read more...

Ελληνική Σειρά Εκμάθησης JavaScript (Video Tutorials)

21 September 2012

Η Σειρά περιλαμβάνει τα εξής Μαθήματα:

JavaScript – 1 : Λίγα[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.