Προσθέτοντας περιεχόμενο

[Anastasis 48]

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

 

κώδικας:

img { margin-bottom:5px; }

Δηλώνουμε ότι όλες οι εικόνες που θα τοποθετηθούν στην ιστοσελίδα μας θα έχουν κάτω περιθώριο 5px.
 

κώδικας:

.image { margin-left:5px; margin-right:5px; }

Εδώ θα δηλώσουμε μέσα στο html αρχείο μας όσες από τις εικόνες μας θα έχουν περιθώριο δεξιά και αριστερά με τον παρακάτω κώδικα:

κώδικας:

<img src="εικόνα"  class="image" />

Οι δύο αυτές επιλογές είναι ανεξάρτητες μεταξύ τους
 

κώδικας:

.emphasis { font-weight:bold; color:#838181; }

Με αυτές τις επιλογές θα τονίσουμε ορισμένες από τις λέξεις μας με τον παρακάτω κώδικα:

κώδικας:

<span class="emphasis">Λέξη που θέλουμε </span>

Div retouch:

κώδικας:

<img src="retouch.gif" alt="Image Retouch" />  <br />  Μάθετε πως να διορθώνετε<br />  χρωματικά μία εικόνα <br />  με το Photoshop

Div funny:

κώδικας:

<img src="funny.gif" alt="Funny Creation" /><br /> Δημιουργήστε καταπληκτικά <br /> γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop

Div content1:

κώδικας:

<span class="emphasis">Adobe Photoshop</span>, or simply <span class="emphasis">Photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">Adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">Photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office.

Div content2:

κώδικας:

<img src="work1.jpg" alt="Work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="Work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="Work 3" width="134" height="111" class="image" /><br /> Δείγματα εργασιών

Div random:

κώδικας:

<img src="../random.gif" alt="Nike Bug" /><br /> Τυχαίας εμφάνισης εικόνα

Div footer:

κώδικας:

Copyright © 2003-2006 <span class="emphasis">Ilias Antonopoulos</span>. All Rights Reserved. Template created by <span class="emphasis">EkLekTos</span>

Οπότε ολοκληρωμένη την σελίδα την βλέπουμε παρακάτω:
Live demo