Joomla - Άσκηση 11 - Εικόνες - Eισαγωγή σε άρθρα

Δοκιμασμένο σε Joomla 2.5.8 και Gimp 2.6.10, εκτύπωση σε firefox -10%

• Νέα : Μεταφόρτωση μέσω joomla και ftp, εισαγωγή εικόνων σε άρθρα μέσω html και JCE Editor

• Έχουμε ήδη ανεβάσει 6 εικόνες στον Ιστότοπό μας μέσω joomla ή μέσω ftp. Στην συνέχεια θα τις εισάγουμε στα αντίστοιχα άρθρα Κέρκυρα και Παρίσι

ΕΙΚΟΝΕΣ

1. ΕΙΚΟΝΕΣ ΣΕ ΑΡΘΡΑ - html - Κέρκυρα
   • Θα εμφανίσουμε τις εικόνες που ανεβάσαμε στον ιστότοπό μας στα αντίστοιχα άρθρα.
   1. Πηγαίνουμε Περιεχόμενο / Διαχείριση Άρθρων και πατάμε στο άρθρο Κέρκυρα για να το επεξεργαστούμε.
   2. Πατάμε στο εικονίδιο <> (Toggle Source Code) για να αλλάξουμε σε εμφάνιση html και κάτω από το κείμενο Ιστορικά Στοιχεία εισάγουμε την εικόνα kerkyra1-small.jpg με την ετικέτα της html που γνωρίζουμε. (Σημ: Οι εικόνες βρίσκονται στον σχετικό φάκελο images και στον υποφάκελο που έχουμε δημιουργήσει από τον Διαχειριστή Πολυμέσων δηλαδή για παράδειγμα images/kerkyra)
   3. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
   4. Με όμοιο τρόπο εισάγουμε και την εικόνα kerkyra2-small.jpg.
2. ΕΙΚΟΝΕΣ ΣΕ ΑΡΘΡΑ - JCE Editor - Κέρκυρα
   • Για διευκόλυνσή μας μπορούμε να εισάγουμε εικόνες και μέσα από τον επεξεργαστή JCE. (Κάτι που θα αποφύγουμε μέχρι να εμπεδώσουμε καλά την html)
   1. Ενώ επεξεργαζόμαστε ακόμα το άρθρο kerkyra, αν είμαστε σε εμφάνιση HTML κώδικα, πατάμε πάνω στο εικονίδιο <> (Toggle Source Code) για να πάμε στην εμφάνιση του επεξεργαστή JCE
   2. Στην τελευταία γραμμή του JCE Editor, πατάμε το 3ο εικονίδιο Show/hide block elements. Μας εμφανίζονται περιγράμματα για την δομή του άρθρου (h1,h2, p κτλ). Πατάμε επίσης στην 3η γραμμή στο 3ο εικονίδιο Toggle Full Screen Mode για να μας εμφανιστεί σε όλη την Οθόνη.
   3. Πάμε στο τέλος του άρθρου, δηλαδή κάνουμε κλικ μετά την 2η εικόνα, δεξιά της (ΠΡΟΣΟΧΗ! ΟΧΙ πάνω στην εικόνα γιατί θα διαγραφεί με την επόμενη κίνηση) και πατάμε ENTER για να δημιουργήσουμε μια νέα γραμμή. Μας τοποθετεί σε ένα πλαίσιο <p>
   4. Στην τελευταία γραμμή του JCE Editor, πατάμε στο εικονίδιο Insert/Edit Image (Εισαγωγή/Επεξεργασία Εικόνας)
   5. Στον Image Manager που ανοίξαμε, στο κάτω μέρος στο κεντρικό πλαίσιο, μπαίνουμε στον φάκελο kerkyra και πατάμε πάνω στην εικόνα kerkyra3-small.
   6. Παρατηρούμε ότι συμπληρώθηκε στο πάνω πλαίσιο, στην καρτέλα image, το πεδίο URL, με images/kerkyra/kerkyra3-small.jpg, αυτό δηλαδή που θα μπει στο <img src=“(εδώ)”>. Επίσης το Alternate text, με kerkyra3-small.jpg που θα μπει στο <img alt=“(εδώ)”>. Αλλάζουμε το kerkyra3-small.jpg σε Κερκυρα - εικόνα 3.
   7. Αντιγράφουμε το Κερκυρα - εικόνα 3 και πατάμε στο πάνω πλαίσιο, πάνω στην καρτέλα Advanced και το κάνουμε επικόλληση στο πεδίο Title, αυτό θα μπει στο <img title=“(εδώ)”>.
   8. Είμαστε έτοιμοι, οπότε κάνουμε κλικ στο Insert. Η εικόνα μας εμφανίστηκε. Πάμε να δούμε την html που δημιουργήθηκε (εικονίδιο <>).
   9. Βλέπουμε ότι η 3η ετικέτα <img> έχει επιπλέον title=“Κέρκυρα - εικόνα 3” alt=“Κέρκυρα - εικόνα 3”. Ομοίως αντιγράφουμε και εισάγουμε και τις 2 ιδιότητες αυτές σε κάθε μία από τις 2 παραπάνω εικόνες ως Κέρκυρα - εικόνα 1 στην 1η εικόνα και ως Κέρκυρα - εικόνα 2 στην 2η εικόνα, αντίστοιχα.
   10. Πατάμε στο εικονίδιο Toggle Full Screen Mode για να φύγουμε από την πλήρη οθόνη, αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ την αλλαγή.
   11. Στον ΙΣΤΟΤΟΠΟ περνάμε με το ποντίκι πάνω από την 1η εικόνα. Θα πρέπει να μας εμφανιστεί μια περιγραφή-βοήθεια (tooltip) με το κείμενο Κέρκυρα - εικόνα 1. Ομοίως αντίστοιχα το βλέπουμε και στις άλλες 2 εικόνες.
   • Η ιδιότητα title εμφανίζει μια περιγραφή-βοήθεια (tooltip) όταν περνάμε με το ποντίκι πάνω από την εικόνα και η ιδιότητα alt εμφανίζει το εναλλακτικό κείμενο εάν δεν εμφανιστεί η εικόνα (σε σπάνιες περιπτώσεις σε περιηγητές). Και οι δύο ιδιότητες είναι απαραίτητες για της μηχανές αναζήτησης για να καταχωρήσουν την εικόνα μας.
3. ΕΙΚΟΝΕΣ ΣΕ ΑΡΘΡΑ - html - JCE - Παρίσι
   • Θα εισάγουμε τις εικόνες και για το Παρίσι. Επειδή η διαδικασία μοιάζει με την προηγούμενη, μπορούμε να κρατάμε 2 καρτέλες για την ΔΙΑΧΕΙΡΙΣΗ, μία για την Κέρκυρα και μια για το Παρίσι, ώστε να μπορούμε να κάνουμε αντιγραφή επικόλληση αν χρειαστεί.
   1. Ανοίγουμε 2η καρτέλα ΔΙΑΧΕΙΡΙΣΗΣ πατώντας με το μεσαίο πλήκτρο του ποντικιού στον σύνδεσμο πάνω δεξιά ΔΙΑΧΕΙΡΙΣΗ. Σε αυτήν την 2η καρτέλα μπαίνουμε στην επεξεργασία για το άρθρο Κέρκυρα.
   2. Στην 1η καρτέλα, μπαίνουμε στην επεξεργασία για το άρθρο Παρίσι.
   3. Αλλάζουμε την εμφάνιση σε html και κάτω από το κείμενο Η πόλη του Παρισιού εισάγουμε την εικόνα paris1-small.jpg με την ετικέτα της html που γνωρίζουμε. Στις ιδιότητες alt και title βάζουμε την περιγραφή Παρίσι - εικόνα 1. (Υπόδειξη: Στην 2η καρτέλα που ανοίξαμε, θα βλέπουμε σε πλήρη οθόνη την html στο άρθρο Κέρκυρα και θα αντιγράψουμε - τροποποιήσουμε τον κώδικα από εκεί. Για την τροποποίηση υπάρχει και Εύρεση (Find) - Αντικατάσταση (Replace), π.χ. Κέρκυρα → Παρίσι και kerkyra → paris)
   4. Με όμοιο τρόπο, πάντα σε html, εισάγουμε την εικόνα paris2-small.jpg με την περιγραφή Παρίσι - εικόνα 2.
   5. Δεν χρειαζόμαστε άλλο την 2η καρτέλα με το άρθρο Κέρκυρα, αλλά ΠΡΟΣΟΧΗ! ΔΕΝ την κλείνουμε κατευθείαν από τον περιηγητή. Στην 2η καρτέλα, φεύγουμε από την πλήρη Οθόνη και πατάμε Κλείσιμο για να φύγουμε και από το άρθρο Κέρκυρα. Τώρα μπορούμε να κλείσουμε την καρτέλα αυτή, από τον περιηγητή μας με ασφάλεια.
   6. Στην 1η καρτέλα στο άρθρο Παρίσι, την 3η εικόνα paris3-small.jpg, με την περιγραφή Παρίσι - εικόνα 3, θα την εισάγουμε από τον JCE, όπως κάναμε και για την 3η εικόνα της Κέρκυρας.
   7. Αποθηκεύουμε με ✔ Αποθήκευση και βλέπουμε στον ΙΣΤΟΤΟΠΟ τις αλλαγές. Θα πρέπει να έχουν εμφανιστεί και οι 3 εικόνες για το Παρίσι και όταν θα περνάμε με το ποντίκι πάνω από αυτές να μας εμφανίζονται οι βοηθητικές περιγραφές (Παρίσι - εικόνα 1 κτλ..)