Μάθημα Web Design 5a-Δημιουργία mainContent Div + CSS

VN:F [1.9.22_1171]
Rating: 1.0/5 (1 vote cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
15/07/2010 από
root

 

Καλησπέρα σας!!Στο προηγούμενο web design tutorial μιλήσαμε για το πώς θα δημιουργήσουμε το navigation menu του site mας.

Στο σημερινό web design tutorial θα μιλήσουμε για το πώς θα κατασκευάσουμε τη “mainContainer div” της ιστοσελίδας μας.Όπως έχουμε ξαναπεί στη “mainContent div” θα περιέχονται τα βασικά περιεχόμενα μας.Εμείς σήμερα θα δημιουργήσουμε το photo Slider που βρίσκεται στο πάνω μέρος της “mainContent div” και περιέχει τις 3 μικρογραφίες μας και τη μεγάλη φωτογραφία καθώς και τις περιγραφές των φωτογραφιών.Αρκετά με τα εισαγωγικά.Ας ξεκινήσουμε γρήγορα το σημερινό tutorial. :-) :-)

 

Τι περιέχει η “mainContent div”;Ας δούμε ένα σχέδιο…

Η “mainContent div” είναι η βασική ενότητα της ιστοσελίδας μας.Περιέχει το slider με τις φωτογραφίες αλλά και τα κουτάκια με τις επιπρόσθετες πληροφορίες από κάτω από το slider.Ας δούμε λίγο ένα σχέδιο το οποίο περιέχει όλες τις βασικές μας divs και εν συνεχεία θα δούμε ένα σχέδιο πιο αναλυτικό.

Βλέπετε τη “mainContent div“;Είναι ουσιαστικά η μεγαλύτερη div που περιέχει τα βασικά μας περιεχόμενα.Θα δημιουργήσουμε ένα πιο αναλυτικό σχέδιο της mainContent div και μέσα θα τοποθετήσουμε εμείς τα περιεχόμενα που θέλουμε να έχει ώστε να μπορέσουμε να την μετατρέψουμε σε κώδικα html.

Ανάλυση βασικών περιεχομένων της “mainContent div” και αναλυτικό σχέδιο

Μάλιστα.Στη “mainContent div” θέλω να συμβαίνει το εξής.Μπορώ να την χωρίσω σε 2 βασικά μέρη.Σε μία div που θα περιέχει το photo slider και σε μία άλλη div η οποία θα περιέχει όλες τις επιπρόσθετες πληροφορίες.Ας δούμε ένα σχέδιο πρώτα:

Όπως βλέπετε στο σχέδιο γίνεται κατανοητό για το πώς θα χωρίσω τη “mainContent div“..
Στο πρώτο από τα 2 αυτά μέρη μπορούμε να δώσουμε τις εξής ονομασίες:

  1. Η div που θα περιέχει τις 3 μικρογραφίες και τη μεγάλη φώτο να ονομάζεται “bigContainer
  2. Μέσα στη “bigContainer” θα βρίσκεται μία div που θα περιέχει τη μεγάλη φωτογραφία μας.Το όνομα αυτής μπορεί να είναι “photoContainer
  3. Οι τρεις μικρογραφίες μπορεί να είναι και να βρίσκονται μέσα σε μια “ul” και η κάθε μία μικρογραφία να είναι μέλος μίας list η οποία θα βρίσκεται στην “ul” αυτή.Η ul θα έχει id=”thumbContainer”
  4. Η div που θα περιέχει τις επιπρόσθετες πληροφορίες θα μας απασχολήσει στο αμέσως επόμενο web design tutorial.Το όνομα της div αυτής θα είναι “belowContainer“.Αυτή είναι η div που αποτελεί το δεύτερο μέρος της “mainContent

Ας δούμε ένα πιο αναλυτικό σχέδιο-τελικό

Μετά τα παραπάνω μπορούμε να ξεκινήσουμε σιγά – σιγά με τη δημιουργία της “mainContent div” καθώς και των div που περιέχει στο πρώτο και βασικό μέρος:”bigContainer“, “photoContainer” και “thumbContainer

Html κώδικας για τα περιεχόμενα της mainContent div.

Σύμφωνα με όλα τα παραπάνω η mainContent div θα περιέχει τις εξής divs: “bigContainer“, “photoContainer” και “thumbContainer” και “belowContainer“.Ας δούμε λίγο πως θα είναι ο κώδικάς μας τοποθετώντας όλες αυτές τις divs μέσα στη mainContent div..

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

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

    <!--photoContainer περιέχει τη μεγάλη photo-->    <div id="photoContainer">

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

        <!--Aρχή thumbContainer περιέχει τις μικρές φωτό-->        <ul id="thumbContainer">        </ul>  </div><!--Τέλος bigContainer -->

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

   </div>   <!--Τέλος belowContainer--></div><!--Τέλος mainContent div-->

 

Έτοιμο και το markup μας.Ας αρχίσουμε να δίνουμε CSS στυλ.Θα ξεκινήσουμε με την div που περιέχει τις άλλες δηλαδή τη “mainContent div

CSS για τη mainContent div

Στο αρχείο “styles.css” προσθέστε..

#mainContent{ margin:0 5px 5px 5px; background: #F9F9F9;}

Το css στυλ για τη mainContent div είναι όπως βλέπετε υπερβολικά απλό.Με τους κανόνες CSS αυτούς δίνουμε ένα χρώμα background και ζητάμε να υπάρχει ένα περιθώριο 5px προς τα δεξιά,αριστερά και προς τα πάνω από τη mainContent div.

CSS στυλ για τη bigContainer div

Εδώ θα εφαρμόσουμε στυλ στη “bigContainer div“.Αυτή είναι η div που περιέχει το slider μας και τις μικρογραφίες.

/* i div poy periexei to slider kai tis 3 photos */#bigContainer{    margin-bottom:5px;    float:left;    width:100%;    height:280px;    background: #E6E6E6;    overflow: hidden;

}

Ας εξηγήσουμε λίγο τα παραπάνω και θα δούμε και ένα στιγμιότυπο.
Στη div με id=”bigContainer” δίνουμε ένα περιθώριο 5px προς τα κάτω.Κοινώς,η επόμενη div θα ξεκινάει 5px κάτω από την “bigContainer“.Ενημερωτικά η div που ξεκινάει μετά το τέλος της “bigContainer” είναι η “belowContainer“..
Η “bigContainer” θέλουμε να ξεκινάει όσο το δυνατόν πιο αριστερά μέσα στο στο στοιχείο που την περιέχει.Γι αυτό και δίνουμε float:left ;ώστε να ξεκινάει αριστερά μέσα στη “mainContent div“.Επίσης,δίνουμε ένα standard ύψος,280px.To width:100% μας λέει ότι η bigContainer div θα έχει πλάτος ίση με το 100% της div που την περιέχει,δηλαδή το πλάτος της mainContent div.Ας δούμε ένα στιγμιότυπο….

Έτοιμη η div μας..:-)

.Το περιθώριο που υπάρχει στα δεξιά ,αριστερά και πάνω είναι τα 5px margin που είχαμε δώσει στη mainContent div.

CSS για τη photoContainer div

Αφού δημιουργήσαμε τον καμβά για να δουλέψουμε θα δημιουργήσουμε την εμφάνιση της photoContainer div.Αυτή είναι η div που θα περιέχει τη μεγάλη φωτογραφία μας..Θα επιλέξουμε να είναι σε ένα μέγεθος 600*280px.Ας δούμε λίγο το css κώδικα και ένα στιγμιότυπο..

/*Se ayto container tha mpainei i photo.Prospathiste na exei megethos600*280pixels*/#photoContainer{    float:left;    width: 600px;    height:280px;    background:#FF8040;/*Αυτό το χρώμα το δίνουμε για να δούμε οπτικά που θα βρίσκεται η φωτογραφία μας.Μετά θα τη σβήσουμε αυτή τη γραμμή.*?}

Δεν υπάρχει κάτι να εξηγήσουμε!Το μόνο που χρειάζεται είναι να δούμε το στιγμιότυπο.

Βλέπετε που θα μπει η φωτογραφία μας η μεγάλη;

CSS για τη thumbContainer ul

H “thumbContainer ul” είναι ουσιαστικά ο χώρος που θα περιέχονται οι τρεις μικρογραφίες μας.Αυτές θα είναι μέλη μίας λίστας .Κάθε μικρογραφία θα είναι ένα link που θα ανοίγει την αντίστοιχη μεγάλη φωτογραφία.Σε επόμενο web design tutorial θα μιλήσουμε για τη λειτουργικότητα με jQuery.Ας προσθέσουμε λίγο τα τρία list items στον στον html κώδικα της “thumbContainer ul” πρώτα…..

<!--Aρχή thumbContainer περιέχει τις μικρές φωτό--><ul id="thumbContainer"><li><a href="img/large1.png" id="description1"><img src="img/thumb1.png"/></a></li><li><a href="img/large2.png" id="description2"><img src="img/thumb2.png"/></a></li><li><a href="img/large3.png" id="description3"><img src="img/thumb3.png"/></a></li></ul><!--Τελος thumbContainer-->

Στο παραπάνω κομμάτι κώδικα δεν κάνουμε κάτι δύσκολο.Έχουμε 3 list items που είναι οι μικρογραφίες μας και αυτές οι μικρογραφίες είναι links “a” προς τις αντίστοιχες μεγάλες φωτογραφίες τους.Θα φροντίσω να οι μικρογραφίες μου να είναι 328*80 pixels.Επίσης Θα δημιουργήσουμε τα CSS για την “ul” αλλά και τα “li” και θα δούμε στιγμιότυπο.

/*Το container που περιέχει τα thumbnail links μας.*/#thumbContainer{    float:left;    height:280px;    margin:0 0 0 10px;

}#thumbContainer li{    display:block;    width:328px;    height:80px;    text-decoration:none;    border:1px solid #DDDDDD;/*debugging purposes*/    margin-bottom:16px;    overflow:hidden;/*Καλό θα είναι η thumbs εδώ να είναι 328*80px    Εαν δεν ειναι τοτε αυτη η εντολή κάνει όλη τη δουλειά μας.Κόβει ότι περισσεύει*/}#thumbContainer li a img{    border-style:none;}

Στα προηγούμενα tutorials έχουμε εξηγήσει ενδελεχώς κώδικες CSS σαν τους παραπάνω.Δεν χρειάζεται να εξηγήσουμε ξανά.Το μόνο που θα εξηγήσουμε είναι το τελευταίο block κώδικα το οποίο σε img(εικόνες) που είναι links ουσιαστικά και βρίσκονται σε list items στη “thumbContainer div” αφαιρούμε το border.Αυτό το κάνουμε διότι σε browsers όπως ο mozilla γύρω από τα links δημιουργείται μία γραμμή μπλε.

Έτοιμη και η thumbContainer ul..Ας τοποθετήσουμε λοιπόν και την μεγάλη φωτογραφία μας στη “photoContainer div

 

<!--photoContainer περιέχει τη μεγάλη photo--><div id="photoContainer"><img src="img/large1.png"/></div><!-- Τέλος photoContainer-->

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

Βλέπετε πόσο απλό ήταν; Έτοιμο το πρώτο κομμάτι της “mainContent div”..

Επίλογος Web Design tutorial και PDF.

Εδώ κάπου τελειώνει και το σημερινό Web design tutorial.Ελπίζουμε να σας άρεσε!Μπορείτε να κατεβάσετε PDF με τον κώδικα της ιστοσελίδας μέχρι το σημείο που έχουμε φτάσει.Στο επόμενο web design tutorial θα μιλήσουμε για τη δημιουργία της “belowContainer div” και θα ολοκληρώσουμε τη δημιουργία της “mainContent div








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 δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.