βασικές οδηγίες για το πώς:
- να αξιοποιήσετε απλές εφαρμογές όπως τα MSWord και Paint για τη διαμόρφωση και επεξεργασία εικόνων,
- να κάνετε upload εικόνες, screenshots κλπ,
- να μεταφέρετε αυτές τις εικόνες στην εξωτερική/εσωτερική σελίδα της συμμαχίας,
- να μορφοποιήσετε το κείμενο της εξωτερικής/εσωτερικής σελίδας (fonttype, colour & size, italics, boldfaced) και
- να προσθέσετε hyperlinks (π.χ. για επικοινωνία με διπλωμάτη, αρχηγό, αίτηση ένταξης κλπ.)
2. Διαμόρφωση σελίδας για όσους θέλουν να αποφύγουν τις εντολές HTML
Από τη δική μου (μικρή) εμπειρία το σημείο εκκίνησης για τη διαμόρφωση κάθε σελίδας στο ikariam είναι η διαμόρφωσή της αρχικά σε έναν
επεξεργαστή κειμένου, όπως το Word. Προτείνω σαν αφετηρία το Word γιατί (α) αν δεν μπορείτε να δείτε στην οθόνη του Word το αποτέλεσμα που επιθυμείτε, είναι μάλλον απίθανο να μπορέσετε να το δείτε ποτέ στο ikariam και (β) γιατί μπορεί να σας γλιτώσει από πάρα πολύ κόπο αν δεν θέλετε να μπείτε στη
διαδικασία να μάθετε να χρησιμοποιείτε εντολές HTML.
2.1. Screen shots από MS Word σεαρχείο JPEG
- Αφού διαμορφώσετε τη σελίδα στο Word και έχετε στην οθόνη σας αυτό που θα θέλατε να βλέπετε και στην σελίδα της συμμαχίας σας, επιλέγετε “View” και μετά “Fullscreen” και τέλος πατάτε το πλήκτρο [prtsc].(Σημείωση: Συχνά το [prtsc] δεν είναι ξεχωριστό πλήκτρο και για να ενεργοποιηθεί πρέπει να πατηθεί σε συνδυασμό με [shift] ή [Fn].)
- Ανοίγετε μια οποιαδήποτε εφαρμογή ζωγραφικής (όπως π.χ. το Paint) και κάνετε paste, είτε πιέζοντας ταυτόχρονα [ctrl] και το γράμμα [V], είτε επιλέγοντας από
το μενού “Edit” και μετά “Paste”.
- Μπορείτε αν θέλετε να κάνετε αλλαγές στην εικόνα και στις διαστάσεις της και την σώζετε ως αρχείο JPEG. (Επιλέγετε “File” και μετά “SaveAs…”. Στο παράθυρο που θα ανοίξει στο κάτω μέρος ανοίγετε το μενού δίπλα από το “Saveastype” και διαλέγετε JPEG.)
Τώρα έχετε σώσει την εξωτερική/εσωτερική σας σελίδα σε μορφή εικόνας JPEG. Το επόμενο βήμα είναι να την «ανεβάσετε» σε κάποιο site, από το οποίο θα την «κατεβάζει» το ikariam.
2.2. Uploading αρχεία JPEG
Υπάρχουν διάφορα δωρεάν sites στα οποία μπορεί κανείς να κάνει upload αρχεία, εικόνες κλπ. Στον κανονισμό του Πίνακα Αναφορών Πολιορκιών του Forum υπάρχει το ακόλουθο link:
http://imageshack.us- Στο imageshack θα σας ζητηθεί να εγγραφείτε δίνοντας μια διεύθυνση e-mail και μετά μπορείτε να κάνετε upload το αρχείο JPEG με τη σελίδα σας. (Σημείωση: Η δωρεάν εγγραφή επιτρέπει περιορισμένο μόνο αριθμό downloads των αρχείων σας)
- Αφού την κάνετε upload, πηγαίνετε στο MyImages, βρίσκετε την εικόνα που ανεβάσατε και κάνετε click στο κουμπάκι “imagedetails”.
- Στην επόμενη σελίδα κάνετε κλικ επάνω στην εικόνα και όταν ανοίξει η σελίδα με την εικόνα μόνη της κάνετε copy το url, που γράφει ο browser σας π.χ.
https://2img.net/r/ihimizer/img266/619/fullfade.jpg2.3. Μεταφορά uploaded αρχείου JPEG στη σελίδα της συμμαχίας
Τώρα είστε σε θέση να ανεβάσετε στο ikariam τη σελίδα που έχετε φτιάξει στο Word και έχετε σώσει σε μορφή εικόνας.
- Πηγαίνετε στην πρεσβεία σας και πατάτε «διαμόρφωση εσωτερικής (ή εξωτερικής) σελίδας.
- Στο άδειο πλαίσιο που εμφανίζεται γράφετε τα εξής:
Quoted
<center>
<imgsrc="
https://2img.net/r/ihimizer/img266/619/fullfade.jpg"> </center>
, όπου αντικαθιστάτε το
https://2img.net/r/ihimizer/img266/619/fullfade.jpg με τη διεύθυνση της δικής σας σελίδας.
Αυτός είναι ο πιο απλός τρόπος να φτιάξετε μια σελίδα συμμαχίας που εμφανισιακά θα έχει όλες τις μορφοποιητικές δυνατότητες που σας δίνει ένας επεξεργαστής κειμένου και μια εφαρμογή ζωγραφικής χωρίς να χρειαστεί να δουλέψετε με εντολές HTML. Ουσιαστικά, όμως, η σελίδα της συμμαχίας σας δεν θα είναι τίποτα περισσότερο από μια εικόνα.
Αυτό σημαίνει:
*
πως ενδεχομένως ναυπάρχει κάποια μικρή απώλεια στην ποιότητα εμφάνισης των γραμματοσειρών σε
σχέση με το Word,
*
δεν θα μπορεί να μεταβληθεί το μέγεθος των γραμματοσειρών στη σελίδα μέσω της σχετικής
επιλογής του browser.
*
Το κυριότερο όμως μειονέκτημα είναι πως από τη σελίδα θα απουσιάζει το στοιχείο της
διαδραστικότητας (hyperlinks).
Η επόμενη ενότητα εξηγεί βήμα προς βήμα πως μπορείτε να αναπαράγετε το αποτέλεσμα της παραπάνω σελίδας με ενεργή μορφοποίηση των γραμματοσειρών και τη δυνατότητα εισαγωγής hyperlinks, κάνοντας χρήση κάποιων βασικών εντολών html.
3. Διαμόρφωση σελίδας με χρήση εντολών HTML (BBC code)
Σκοπός της ενότηταςαυτής είναι να αναπαραγάγει το οπτικό αποτέλεσμα της σελίδας που φτιάχτηκε στην ενότητα 2, με την προσθήκη:
- στοιχείων ενεργούς μορφοποίησης που θα επιτρέπουν μεταβλητό μέγεθος γραμματοσειρών μέσω του browser και
- διαδραστικότητα με τη μορφή links.
Για το σκοπό αυτό θαπρέπει να απομονώσουμε τα ζωγραφικά στοιχεία της σελίδας από το κείμενο. Ανοίγοντας το αρχείο JPEG με τη σελίδα μας σε μια απλή ζωγραφική εφαρμογή, όπως το Paint, μπορούμε να φτιάξουμε τα παρακάτω επιμέρους αρχεία JPEG, τα οποία και κάνουμε upload στο imageshack (βλ. ενότητα 2.2.):
https://2img.net/r/ihimizer/img710/7619/fade0.jpghttps://2img.net/r/ihimizer/img682/1120/fade1.jpghttps://2img.net/r/ihimizer/img710/1992/fade2.jpghttps://2img.net/r/ihimizer/img251/3410/fade3.jpghttps://2img.net/r/ihimizer/img230/6440/fade4.jpghttps://2img.net/r/ihimizer/img710/2747/fade5.jpghttps://2img.net/r/ihimizer/img710/1740/fade6.jpghttps://2img.net/r/ihimizer/img710/9396/fade7.jpghttps://2img.net/r/ihimizer/img710/8531/fade8.jpg3.1. Διαμόρφωση φόντου και εισαγωγή αρχικής εικόνας
Τόσο τα ζωγραφικά/διακοσμητικά στοιχεία, όσο και το κείμενο θα «πατήσουν» επάνω σε ένα μαύρο φόντο, το οποίο μας δίνει η εικόνα
https://2img.net/r/ihimizer/img710/7619/fade0.jpgΠροκειμένου να γεμίσουμε το πλαίσιο που μας δίνει το παιχνίδι με το μαύρο μας φόντο γράφουμε την παρακάτω γραμμή:
Quoted
<div style="background-image:url(https://2img.net/r/ihimizer/img710/7619/fade0.jpg);">
</div>
Προσοχή: Η τελευταία εντολή </div> ορίζει το τέλος του πλαισίου μέσα στο οποίο θα εμφανίζεται η σελίδα μας και οτιδήποτε άλλο προσθέσουμε στη συνέχεια θα πρέπει να μπαίνει πριν από το </div> προκειμένου να έχει πίσω του το μαύρο φόντο.
Έχοντας βάλει το φόντο μπορούμε να συνεχίσουμε εισάγοντας την πρώτη μας εικόνα που είναι uploaded στο
https://2img.net/r/ihimizer/img682/1120/fade1.jpgΑυτό το κάνουμε χρησιμοποιώντας την εντολή που χρησιμοποιήσαμε και παραπάνω στην ενότητα 2.3. προσέχοντας να κάνουμε την προσθήκη πριν το </div>.
Quoted
<div style="background-image:url(https://2img.net/r/ihimizer/img710/7619/fade0.jpg);">
<center>
<img src="https://2img.net/r/ihimizer/img682/1120/fade1.jpg">
</center>
</div>
3.2. Μορφοποίηση κειμένου
Έχοντας διαμορφώσει το φόντο και προσθέσει την αρχική εικόνα, χρειαζόμαστε να προσθέσουμε το κείμενο που ακολουθεί, χρησιμοποιώντας τα fonts, το χρώμα και το μέγεθος της επιλογής μας. Αυτό γίνεται με την προσθήκη της παρακάτω γραμμής:
Quoted
<div style="background-image:url(https://2img.net/r/ihimizer/img710/7619/fade0.jpg);">
<center>
<img src="https://2img.net/r/ihimizer/img682/1120/fade1.jpg">
</center>
<center>
<span style="font-family:calibri;font-size:21px;color:rgb(255,255,255);"><i>Αρχηγός: wallace4</i></span>
</center>
</div>
· Η εντολή <center> (που χρησιμοποιήσαμε και νωρύτερα για την εισαγωγή της πρώτης εικόνας) ουσιαστικά μεταφέρει τον cursor στο κέντρο της σελίδας. Είναι δηλαδή σαν να πατάς [enter] στο τέλος μιας παραγράφου στο Word και μετά να βάζεις κεντρική στοίχιση κειμένου. Η εντολή κλείνει με το </center>.
· Η γραμμή:
<span style="font-family:calibri;font-size:21px;color:rgb(255,255,255);"><i>Αρχηγός: wallace4</i></span>
μας επιτρέπει να μορφοποιήσουμε το κείμενο που θα προσθέσουμε, το οποίο είναι στην προκειμένη περίπτωση οι λέξεις «Αρχηγός: wallace4».
· Το font-family καθορίζει το είδος της γραμματοσειράς, που εδώ έχει επιλεγεί να είναι “calibri”. Μπορείτε εναλλακτικά να βάλετε times, arial, cambria, ή οποιαδήποτε άλλη γραμματοσειρά της επιλογής σας.
· Το font-size καθορίζει αντίστοιχα το μέγεθος της γραμματοσειράς και εδώ έχει επιλεγεί να είναι 21.
· Το color:rgb(255,255,255) προσδιορίζει το χρώμα των χαρακτήρων. Στην προκειμένη περίπτωση το χρώμα έχει δοθεί με τη μορφή rgb αν και μπορεί να αποδοθεί και με διαφορετικούς τρόπους. Η μορφή rgb προσδιορίζει το χρώμα με 3 αριθμούς, οι οποίοι εδώ είναι 255, 255 και 255 και αντιστοιχούν στο λευκό. Έναν πλήρη κατάλογο με την απόδοση των χρωμάτων σε μορφή rgb μπορείτε να βρείτε στο:
http://www.web-source.net/216_color_chart.htmΑλλάζοντας τους αριθμούς ορίζετε το χρώμα της επιλογής σας
· Η εντολή <i> σημαίνει italics και κλείνει με το </i>. Εναλλακτικά μπορείτε να χρησιμοποιήσετε bold πλαισιώνοντας
το κείμενο που θέλετε να γράψετε με την αντίστοιχη εντολή <b> και </b> ως:
<spanstyle="font-family:calibri;font-size:21px;color:rgb(255,255,255);"><b>Αρχηγός: wallace4</b></span>
ή και τα δύο μαζί:
<spanstyle="font-family:calibri;font-size:21px;color:rgb(255,255,255);"> <b><i>Αρχηγός: wallace4</i></b></span>
ή φυσικά και τίποτα από τα δύο.
· Τέλος, το </span> στο τέλος της γραμμής κλείνει την εντολή μορφοποίησης. Οτιδήποτε κείμενο προστεθεί μετά από το </span> δεν υπόκειται πλέον στις παραμέτρους της μορφοποίησης.
3.3. Εισαγωγή hyperlinks
To τελευταίο βήμα είναι να προσθέσουμε στο κείμενό μας links για άμεση επικοινωνία με π.χ. τον αρχηγό, τον διπλωμάτη, υποβολή αιτήσεων για ένταξη κλπ. Στην προκειμένη περίπτωση, ας υποθέσουμε ότι θέλουμε να μπορεί κάποιος να στείλει προσωπικό μήνυμα στον αρχηγό της συμμαχίας κάνοντας κλικ πάνω στο ψευδώνυμό του “wallace4”. Θέλουμε δηλαδή να κρατήσουμε το «Αρχηγός:» ως κείμενο και να κάνουμε το wallace4 σύνδεσμο.
Γενικά, αν θέλουμε να προσθέσουμε ένα link για προσωπικό μήνυμα στον παίκτη wallace4 που να έχει τη μορφή της λέξης wallace4, χρειαζόμαστε την παρακάτω γραμμή:
<a href="http://s4.ikariam.gr/index.php?view=sendIKMessage&receiverId=47007">wallace4</a>
, όπου το ροζ κείμενο είναι η διεύθυνση της ιστοσελίδας που μας βγάζει το ikariam όταν γράφουμε προσωπικό μήνυμα στον παίκτη wallace4 και το μπλε κείμενο είναι το κείμενο με το οποίο θα εμφανίζεται το link επάνω στην σελίδα της συμμαχίας μας.
Στην προκειμένη περίπτωση όμως θέλουμε να προσθέσουμε το link “wallace4” δίπλα στη λέξη «Αρχηγός: ». Επιπλέον θέλουμε να μπορούμε να έχουμε έλεγχο στη μορφοποίηση της γραμματοσειράς του link “wallace4”, π.χ. να εμφανίζεται με άλλο χρώμα από ότι η λέξη «Αρχηγός: ». Αυτό το πετυχαίνουμε με την ακόλουθη προσθήκη:
Quoted
<div style="background-image:url(https://2img.net/r/ihimizer/img710/7619/fade0.jpg);">
<center>
<img src="https://2img.net/r/ihimizer/img682/1120/fade1.jpg">
</center>
<center>
<span
style="font-family:calibri;font-size:21px;color:rgb(255,255,255);"><i>Αρχηγός: </i></span><a href="http://s4.ikariam.gr/index.php?view=sendIKMessage&receiverId=47007"><span style="font-family:calibri;font-size:21px;color:rgb(255,255,0);"><i>wallace4</i></span></a>
</center>
</div>
· Κατ’αρχάς σβήσαμε από την γραμμή
<spanstyle="font-family:calibri;font-size:21px;color:rgb(255,255,255);"><i>Αρχηγός: wallace4</i></span>
τη λέξη wallace4, αφού πλέον δεν πρόκειται για απλό κείμενο αλλά θέλουμε να είναι link.
· Χωρίς να αφήσουμε κενό προσθέσαμε ενωμένες 2 γραμμές. Η πρώτη (με πράσινο) είναι η γραμμή που εισάγει το link. Συνδυάζεται όμως και με τη γραμμή της μορφοποίησης που είδαμε στην προηγούμενη ενότητα (με κόκκινο) προκειμένου να αλλάξει το χρώμα με το οποίο θα εμφανίζεται το link “wallace4”. Ενώ για τη λέξη «Αρχηγός: » έχει οριστεί το λευκό χρώμα rgb(255,255,255), το λίνκ “wallace4” θα εμφανίζεται με κίτρινο rgb(255,255,0).
Κάνοντας συνδυαστική χρήση όλων των παραπάνω απλών εργαλείων μπορούμε να αναπαράγουμε πλήρως το οπτικό αποτέλεσμα της σελίδας στο
https://2img.net/r/ihimizer/img266/619/fullfade.jpgΣτο φόρουμ μπορείτε να βρείτε πληρέστερους οδηγούς πάνω στη χρήση πιο εξεζητημένων εντολών, αλλά και χρήσιμα add ons που διευκολύνουν σημαντικά τον σχεδιασμό των σελίδων συμμαχίας.
Θέμα: Σχεδιασμός Εσωτερικής/Εξωτερικής Σελίδας 
Παρ Ιαν 21, 2011 2:28 am