Κωδικοποίηση Εσωτερικής/Εξωτερικής Σελίδας

Για την διαμόρφωση κάθε εσωτερικής/εξωτερικής σελίδας στο Ικάριαμ απαιτείτε η γνώση 

εντολών HTML.Από εκεί κα πέρα για το θέμα των εικόνων ο χρήστης μπορεί να επιλέξει ανάμεσα σε κάποια προγράμματα Photoshop. 

Παραδείγματα: 

Adobe PhotoshopCS6

Cinema4d

Gimp2

Microsoft Paint

_______________________________________________________________________________

*Ποιες εντολές HTML χρειάζονται για 

την σχεδίαση μιας σελίδας στο Ικάριαμ:

<div style="background-image:url(http://img525.imageshack.us/img525/6818/blackbackgrounde.jpg);">
</div>

Η παραπάνω εντολή χρησιμοποιείται για την τοποθέτηση φόντο στην σελίδα. Δηλαδή, 
είναι η αρχική εντολή που θα περιέχει όλες τις υπόλοιπες ανάμεσά της. Όσο κατεβάζετε πατώντας <<enter>> την εντολή </div> θα δείτε ότι η σελίδα μεγαλώνει. Αυτό συμβαίνει γιατί η εντολή <div> ορίζει το τέλος της σελίδας σας.
Άν θέλετε να αλλάξετε το φόντο, απλώς αλλάζετε το λίνκ της εικόνας.
Στην προκειμένη περίπτωση αυτό -> http://img525.imageshack.us/img525/6818/blackbackgrounde.jpg
_________________________________________________________________
 
*Πως προσθέτω εικόνες:
Αφού επιτυχημένα τοποθετήσατε το φόντο, μπορείτε να προσθέσετε την πρώτη σας εικόνα.

<center>
<img src="http://img703.imageshack.us/img703/6826/300wallpaper.jpg">
</center>

ΠΡΟΣΟΧΗ:
Η παραπάνω εντολή πρέπει να μπει πριν την εντολή <div>. Επομένως θα έχουμε αυτό:

<div style="background-image:url(http://img525.imageshack.us/img525/6818/blackbackgrounde.jpg);"><center>
<img src="http://img703.imageshack.us/img703/6826/300wallpaper.jpg">
</center>
</div> 
_________________________________________________________________

*Μορφοποίηση κειμένου: 
Στην συνέχεια μετά την προσθήκη της εικόνας, είναι ώρα για την επεξεργασία του κειμένου. Η παρακάτω εντολή θα σας βοηθήσει να επεξεργαστείτε την μορφή 
του κειμένου που θα φαίνεται στην σελίδα σας.

<center>
<span style="font-family:comic sans ms;font-size:18px;color:rgb(166,42,42);"><i>Σπαρτιάτες</i></span>
</center>

Η εντολή <center> σημαίνει ότι μεταφέρει το κείμενο ή την εικόνα στο κέντρο της σελίδας,
και η εντολή </center> μέχρι που τελειώνει αυτή η εντολή.

Η εντολή font-family καθορίζει το είδος της γραμματοσειράς, μπορείτε να επιλέξετε ανάμεσα σε arial, georgia ή οτιδήποτε άλλο σας αρέσει.  

Η εντολή font-size αντιστοιχή στο μέγεθος της γραμματοσειράς. 

 Το color:rgb(255,255,255) αναφέρεται στο χρώμα των χαρακτήρων. Το χρώμα έχει γραφτεί με τη μορφή rgb αν και μπορεί να αποδοθεί και με διαφορετικούς τρόπους. Η μορφή rgb προσδιορίζει το χρώμα με 3 αριθμούς, οι οποίοι εδώ είναι 166, 42 και 42 και αντιστοιχούν στο κόκκινο. Έναν πλήρη κατάλογο με την απόδοση των χρωμάτων σε μορφή rgb μπορείτε να βρείτε στο: 
http://web.njit.edu/~kevin/rgb.txt.html 
 Επιλέξτε το χρώμα που θέλετε και αλλάξτε τον αριθμό.

Η εντολή <i> σημαίνει italics και κλείνει με το </i>. Εναλλακτικά μπορείτε να χρησιμοποιήσετε bold πλαισιώνοντας
το κείμενο που θέλετε να γράψετε με την αντίστοιχη εντολή <b> και </b>.

Τέλος, το </span> κλείνει την εντολή μορφοποίησης. Οτιδήποτε κείμενο προστεθεί μετά από το </span> δεν υπόκειται πλέον στις παραμέτρους της μορφοποίησης. 
_________________________________________________________________

*Το αποτέλεσμα είναι αυτό:


<div style="background-image:url(http://img525.imageshack.us/img525/6818/blackbackgrounde.jpg);"><center>
<img src="http://img132.imageshack.us/img132/6470/3000400x250.jpg">
</center>
<center> 
<span style="font-family:comic sans ms;font-size:18px;color:rgb(166,42,42);"><i>Σπαρτιάτες</i></span>
</center> <div>
 _________________________________________________________________

Όλα αυτά σας εξηγούν πως διαμορφώνεται μια σελίδα με εντολές HTML. Απο εκεί και πέρα, μπορείτε να δημιουργήσετε μια σελίδα στο Photoshop με εικόνες/κείμενα και ότι άλλο θέλετε και να την εισάγετε απλά ως εικόνα. 
Την χρήση του Photoshop θα την εξηγήσουμε στην άλλη ανάρτηση.


Καλές δημιουργίες!