CSS | Δημιουργία της περιοχής Header

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από manolism » 01 Μαρ 2010 14:15

Προηγούμενα βοηθήματα

Βοήθημα 1ο. Προετοιμασία για την ανάπτυξη της σελίδας

Σήμερα θα δημιουργήσουμε το βασικό σκελετό του layout και την περιοχή του Header που περιλαμβάνει το logo και τα στοιχεία επικοινωνίας

ΦΟΝΤΟ
Εισάγουμε στο αρχείο layout.css τον παρακάτω κώδικα

Κώδικας: Επιλογή όλων

body{
	padding:0;
	margin:0;
	color:#fff;
	background-image:url(images/main_bg.jpg);
	background-repeat:repeat-x;
	background-color:#FFF;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
	margin:0; padding:0;
}
Το margin και το padding δηλώνει ότι τα περιθώρια όλου του Body από όλες τις πλευρές θα είναι μηδενικά. Το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό main_bg.jpg το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά και το background-color δηλώνει ότι όλο το υπόλοιπο μέρος της σελίδας θα έχει χρώμα άσπρο.
Στην επόμενη δήλωση ορίζουμε για όλα τα αντικείμενα μηδενικά περιθώρια προς όλες τις πλευρές τους.
Τη δήλωση για το background θα μπορούσαμε να την κάνουμε και ως:

Κώδικας: Επιλογή όλων

background:url(images/main_bg.jpg) repeat-x #fff;
LIVE DEMO

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

Κώδικας: Επιλογή όλων

#container {
	width:960px;
	margin:0 auto;
}
Το width δηλώνει ότι το πλάτος του div θα είναι 960px και το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο της οθόνης.
Στην συνέχεια μέσα στο body του index.html θα γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="container"></div>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container"></div>
</body>
Εδώ δεν υπάρχει καμμία επίδραση στη σελίδα μας αφού δεν έχουμε ακόμη περιεχόμενο.

HEADER
Το επόμενο div μας θα είναι το header και στο css αρχείο μας γράφουμε το:

Κώδικας: Επιλογή όλων

#header&#123;
	width&#58;960px;
	height&#58;150px;
	float&#58;left;
	&#125;
Το width είναι το πλάτος του και το height είναι το ύψος του. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά
Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="header"></div>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="header"></div>
</div>
</body>
Εδώ δεν υπάρχει καμμία επίδραση στη σελίδα μας αφού δεν έχουμε ακόμη περιεχόμενο.

LOGO
Το επόμενο div μας θα είναι το logo και στο css αρχείο μας γράφουμε το:

Κώδικας: Επιλογή όλων

#logo &#123;
	width&#58;362px;
	height&#58;58px;
	background-image&#58;url&#40;images/logo.jpg&#41;;
	float&#58;left;
	margin-top&#58;35px;
	text-indent&#58;-10000px;
&#125;
Το width είναι το πλάτος του και το height είναι το ύψος του τα οποία είναι τα ίδια με αυτά που έχει και η εικόνα του logo. To background-image είναι η εικόνα logo που έχουμε κόψει από το template. To float:left δηλώνει ότι το div πάντα θα κολλάει στην αριστερή πλευρά. To margin-top δηλώνει ότι το div με το logo θα απέχει από την πάνω πλευρά του header 35px. Με το text-indent δηλώνουμε ότι το κείμενο που θα τοποθετήσουμε μέσα στο div θα απέχει 10000px και κατά συνέπεια δεν θα είναι ορατό.
Στην συνέχεια μέσα στο div header της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="logo">Smashing DZine</div>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="header">
<div id="logo">Smashing DZine</div>
</div>
</div>
</body>
LIVE DEMO

CONTACT
Το επόμενο div μας θα είναι το contact και στο css αρχείο μας γράφουμε το:

Κώδικας: Επιλογή όλων

#contact &#123;
	width&#58;312px;
	height&#58;50px;
	float&#58;right;
	margin-top&#58;35px;
	background&#58;url&#40;images/contact_icon.jpg&#41; right no-repeat;
	font-family&#58;Verdana, Geneva, sans-serif;
	font-size&#58;12px;
	color&#58;#000;
	text-align&#58;right;
	padding&#58;8px 50px 0 0;
&#125;
Το width είναι το πλάτος του και το height είναι το ύψος του. To float:right δηλώνει ότι το div πάντα θα κολλάει στην δεξιά πλευρά. To margin-top δηλώνει ότι το div με τα στοιχεία επικοινωνίας θα απέχει από την πάνω πλευρά του header 35px. To background-image είναι η εικόνα του τηλεφώνου που έχουμε κόψει από το template. Η εικόνα αυτή θα τοποθετηθεί στο δεξιό μέρος του div με την εντολή right και δεν θα επαναλαμβάνεται σύμφωνα με την εντολή no-repeat. Η εντολή font-family ορίζει ως γραμματοσειρά του div την verdana και η εντολή font-size ορίζει το μέγεθος της γραμματοσειράς σε 12px. Με την εντολή color ορίζουμε το χρώμα της γραμματοσειράς. Το κείμενο θα στοιχιστεί στην δεξιά πλευρά του div σύμφωνα με την εντολή text-align. Με την εντολή padding ορίζουμε τα εσωτερικά περιθώρια του div. Πάνω περιθώριο 8px, δεξί περιθώριο 50px, κάτω και αριστερό περιθώριο 0px;
Στην συνέχεια μέσα στο div header της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<div id="contact"></div>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="header">
<div id="logo">Smashing DZine</div>
<div id="contact"></div>
</div>
</div>
</body>
Στη συνέχεια θα βάλουμε περιεχόμενο μέσα στο div contact εισάγοντας τις παρακάτω γραμμές:

Κώδικας: Επιλογή όλων

<p>+971 55 7457383</p>
<p>If you have any query, feel free to call us</p>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="header">
<div id="logo">Smashing DZine</div>
<div id="contact">
<p>+971 55 7457383</p>
<p>If you have any query, feel free to call us</p>
</div>
</div>
</div>
</body>
LIVE DEMO

Για να μορφοποίησουμε την πρώτη γραμμή του κειμένου εισάγουμε στο css αρχείο μας την παρακάτω κλάση:

Κώδικας: Επιλογή όλων

#contact .btext&#123;
	font-family&#58;Arial, Helvetica, sans-serif;
	font-size&#58;20px;
	font-weight&#58;bold;
	color&#58;#000;
&#125;
Στην κλάση αυτή ορίζουμε εκτός από την γραμματοσειρά, το μέγεθος της και το χρώμα της, με το font-weight να είναι έντονη (bold)
Στο Html αρχείο μας εφαρμόζουμε την κλάση στην πρώτη παράγραφο με τον παρακάτω τρόπο:

Κώδικας: Επιλογή όλων

<p class="btext">+971 55 7457383</p>
Οπότε θα έχουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="header">
<div id="logo">Smashing DZine</div>
<div id="contact">
<p class="btext">+971 55 7457383</p>
<p>If you have any query, feel free to call us</p>
</div>
</div>
</div>
</body>
LIVE DEMO

Αύριο θα δημιουργήσουμε την περιχή του μενού και το μενού
Τελευταία επεξεργασία από το μέλος manolism την 02 Απρ 2010 15:52, έχει επεξεργασθεί 5 φορές συνολικά.

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

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από Joakim » 06 Μαρ 2010 13:59

perimenoume edo kai meres me agonia tin sinexia :)

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από manolism » 06 Μαρ 2010 14:16

Ναι όντως έπηξα λίγο. Από Δευτάρα η συνέχεια

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

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από Joakim » 06 Μαρ 2010 16:42

Κανένα πρόβλημα , ούτος η άλως από καλή καρδιά και διάθεση το κάνεις και μπράβο σου, απλά σου έγραψα για να σου δείξω ότι κάποιος βλέπει το θέμα και περιμένει εξελίξεις, για να μην νιώσεις μόνος βρε παιδί ! :P

Άβαταρ μέλους
xultimatex
Honorary Member
Δημοσιεύσεις: 2505
Εγγραφή: 26 Ιούλ 2003 13:02
Τοποθεσία: Ξάνθη
Επικοινωνία:

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από xultimatex » 06 Μαρ 2010 18:18

Κι εγω βλέπω το θέμα με ενδιαφέρον!
:arrow: Αν προσπαθείς πολύ για να πετύχεις κάτι, ίσως το κάνεις με λάθος τρόπο...


klim
Δημοσιεύσεις: 1
Εγγραφή: 15 Ιουν 2010 19:53

CSS | Δημιουργία της περιοχής Header

Δημοσίευση από klim » 18 Ιουν 2010 13:50

και θα το βλεπουμε

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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