Στήσιμο του layout

Anastasis · November 10, 2016

Πρώτα θα δημιουργήσουμε ένα αρχείο για το css το οποίο θα το ονομάσουμε index.css και έπειτα θα δημιουργήσουμε και ένα αρχείο html το οποίο θα το ονομάσουμε index.html. Στην συνέχεια θα συνδέσουμε τα δύο αυτά αρχεία γράφοντας το παρακάτω στο head του index.html:

κώδικας:

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

Το πρώτο πράγμα που θα γράψουμε είναι:

κώδικας:

body {
margin: 0;
background-image:url(background.gif);
background-repeat:repeat-x;
}

Το margin δηλώνει ότι τα περιθώριά του από όλες τις πλευρές θα είναι μηδενικά, το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο στην σελίδα μας το γραφικό background.gif και το background-repeat δηλώνει ότι το φόντο θα αναπαραχθεί μόνο ως προς τον άξονα x δηλαδή προς τα δεξιά.
Live demo

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

κώδικας:

#container {
margin: 0 auto;
padding: 0px;
width: 781px;
height:800px;
background-image:url(main_back.gif);
}

Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά και θα τοποθετηθεί στο κέντρο, το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_back.gif
Στην συνέχεια μέσα στο body της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Live demo

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

κώδικας:

#header {
background-image:url(main_banner.jpg);
width: 780px;
height: 117px;
margin: 0;
padding: 0;
}

Το margin δηλώνει ότι περιθώριά του από όλες τις πλευρές θα είναι μηδενικά , το padding είναι τα περιθώρια που θα έχει από τα αντικείμενα που θα δεχτεί εσωτερικά και αυτό είναι μηδενικό ώστε όλα τα νέα αντικείμενα που θα βάλουμε μέσα του να κολλήσουν στις πλευρές του, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό main_banner.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Live demo

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

κώδικας:

#navigation {
background-image:url(navbar.jpg);
width: 780px;
height: 31px;
padding-top:9px;
}

Tο padding-top είναι τα περιθώρια που θα έχει το κείμενο του μενού από το πάνω μέρος του div και αυτό είναι 9 px, το width είναι το πλάτος του και το Height είναι το ύψος του και το background-image δηλώνει ότι θα τοποθετηθεί ως φόντο μέσα στο div μας το γραφικό navbar.gif.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div header θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Live demo

Το επόμενο div θα είναι το main_content μέσα στο οποίο θα τοποθετήσουμε όλα τα divs που θα χρησιμοποιήσουμε για το περιεχόμενο της ιστοσελίδας μας.

κώδικας:

#main_content {
background:none;
width: 741px;
height:600px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}

Όλα τα padding είναι τα περιθώρια που θα έχει το περιεχόμενο του div από τις 4 πλευρές του και αυτό είναι 20 px (παρατηρήστε ότι το άθροισμα του width και των padding-left και padding-right μας κάνουν 781px,) το Width είναι το πλάτος του και το Height είναι το ύψος του και το background:none δηλώνει ότι δεν θα τοποθετηθεί τίποτα σαν φόντο.
Στην συνέχεια μέσα στο div container της σελίδας μας και κάτω από το div navigation θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Live demo

Το επόμενο div θα είναι το retouch δηλαδή το πάνω αριστερά «κουτί»

κώδικας:

#retouch {
float:left;
background-image:url(main_retouch.gif);
width: 218px;
height: 143px;
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content1 δηλαδή το «κουτί» που βρίσκεται δεξιά του retouch.

κώδικας:

#content1 {
float:left;
background-image:url(main_content1.gif);
width: 480px;
height: 133px;
margin-left:20px;
padding-top:40px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.

Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div retouch θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το funny δηλαδή το μεσαίο αριστερά «κουτί»

κώδικας:

#funny {
float:left;
background-image:url(main_funny.gif);
width: 218px;
height: 143px;
margin-top:20px;
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content1 θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το content2 δηλαδή το «κουτί» που βρίσκεται δεξιά του funny.

κώδικας:

#content2 {
float:left;
background-image:url(main_content2.gif);
width: 480px;
height: 133px;
margin-left:20px;
margin-top:20px;
padding-top:40px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
text-align:center;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-left και top δηλώνει ότι θα υπάρχει απόσταση από τα αριστερά και πάνω 20px, τα padding δηλώνουν ότι το περιεχόμενο του div θα απέχει από τα άκρα του τα αντίστοιχα px (παρατηρήστε ότι το άθροισμα του height και των padding top και bottom μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο και το άθροισμα του weight και των padding left και right μας κάνει 500px όσο δηλαδή είναι το πλάτος της εικόνας που έχουμε ως φόντο), το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων και το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div funny θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Το επόμενο div θα είναι το random δηλαδή το κάτω αριστερά «κουτί»

κώδικας:

#random {
float:left;
background-image:url(main_funny.gif);
width: 218px;
height: 143px;
margin-top:20px;
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το margin-top δηλώνει ότι θα υπάρχει απόσταση από πάνω 20px, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 40 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 183px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το line-height είναι η απόσταση των γραμμών του κειμένου που θα εισαχθεί, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div main_content που βρίσκετε μέσα στο div container και κάτω από το div content2 θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Τελευταίο div που θα τοποθετήσουμε είναι το footer:

κώδικας:

#footer {
float:left;
background-image:url(main_footer.jpg);
width: 781px;
height: 24px;
padding-top:10px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}

Το float:left δηλώνει ότι το div θα τοποθετηθεί στο αριστερό μέρος, το background-image δηλώνει το φόντο, το Width είναι το πλάτος του και το Height είναι το ύψος του, το padding-top δηλώνει ότι το περιεχόμενο του div θα ξεκινήσει 10 px από το πάνω άκρο του (παρατηρήστε ότι το άθροισμα του height και του padding-top μας κάνει 34px όσο δηλαδή είναι το ύψος της εικόνας που έχουμε ως φόντο), το text-align δηλώνει ότι το περιεχόμενο του div θα έχει κεντρική στοίχιση, το font-family είναι η γραμματοσειρά, το font-size είναι το μέγεθος των γραμμάτων και το color είναι το χρώμα των γραμμάτων.
Στην συνέχεια μέσα στο div container και κάτω από το σημείο που κλείνει το div main_content θα πρέπει να γράψουμε το παρακάτω:

κώδικας:

Οπότε θα έχουμε το παρακάτω:

κώδικας:

Προσέξτε που ανοίγει και που κλείνει το κάθε div
Live demo

Sign In

Στήσιμο του layout

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity