Anastasis 48 Report post Posted November 10, 2016 Σήμερα θα δημιουργήσουμε το βασικό σκελετό του 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 DEMOCONTAINER Στην συνέχεια θα τοποθετήσουμε το κύριο 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{ width:960px; height:150px; float:left; } Το 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 { width:362px; height:58px; background-image:url(images/logo.jpg); float:left; margin-top:35px; text-indent:-10000px; } Το 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 DEMOCONTACT Το επόμενο div μας θα είναι το contact και στο css αρχείο μας γράφουμε το: κώδικας: #contact { width:312px; height:50px; float:right; margin-top:35px; background:url(images/contact_icon.jpg) right no-repeat; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000; text-align:right; padding:8px 50px 0 0; } Το 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{ font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; color:#000; } Στην κλάση αυτή ορίζουμε εκτός από την γραμματοσειρά, το μέγεθος της και το χρώμα της, με το 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 Quote Share this post Link to post Share on other sites
