Joomla - Άσκηση 6 - Templates και εμφάνιση site - jce editor

Δοκιμασμένο σε Joomla 2.5.8, εκτύπωση σε firefox

• Νέα : Εγκατάσταση προσθέτου JCE Editor, εισαγωγή στα templates και στα css

1. ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΣΘΕΤΟΥ JCE Editor
   1. Θα εγκαταστήσουμε έναν νέο επεξεργαστή άρθρων με περισσότερες δυνατότητες από αυτόν που είναι ήδη εγκατεστημένος
   2. Ψάχνουμε στο google για Joomla 2.5 JCE editor download
   3. Αποθηκεύουμε το αρχείο εγκατάστασης στον φάκελο mathimata/html/joomla
   4. Από την ΔΙΑΧΕΙΡΙΣΗ του Joomla πηγαίνουμε Επεκτάσεις/Διαχείριση Επεκτάσεων
   5. Στο πεδίο Μεταφόρτωση Αρχείου Εγκατάστασης πατάμε Αναζήτηση και βρίσκουμε το αρχείο που αποθηκεύσαμε προηγουμένως στον φάκελο mathimata/html/joomla
   6. Πατάμε Μεταφόρτωση & Εγκατάσταση
2. ΕΝΕΡΓΟΠΟΙΗΣΗ JCE Editor
   • Θα ορίσουμε τον JCE Editor ως προκαθορισμένο επεξεργαστή άρθρων.
   1. Πηγαίνουμε Ιστότοπος / Γενικές Ρυθμίσεις
   2. Στην καρτέλα Ιστότοπος, στο πεδίο Προεπιλεγμένος Κειμενογράφος, επιλέγουμε Editor JCE και πατάμε Αποθήκευση
3. ΕΠΕΞΕΡΓΑΣΙΑ ΑΡΘΡΟΥ - απρόσμενη εμφάνιση
   1. Θα επεξεργαστούμε το άρθρο Κέρκυρα. Πηγαίνουμε Περιεχόμενο / Διαχείριση Άρθρων και πατάμε πάνω στο άρθρο Κέρκυρα
   2. Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο <> (Toggle Source Code). Μας εμφανίζεται html.
   3. Διαγράφουμε την ετικέτα <p></p>
   4. Βάζουμε το κείμενο Το νησί της Κέρκυρας σε Επικεφαλίδα 1.
   5. Πληκτρολογούμε το κείμενο Ιστορικά Στοιχεία και το βάζουμε μέσα σε Επικεφαλίδα 2
   6. Πατάμε πάλι το εικονίδιο <> (Toggle Source Code). Μας εμφανίστηκαν τα 2 κείμενα με μεγάλα γράμματα, όπως περιμέναμε. Πατάμε Αποθήκευση.
   7. Με όμοιο τρόπο επεξεργαζόμαστε το άρθρο Παρίσι ορίζοντας το κείμενο Η πόλη του Παρισιού ως Επικεφαλίδα 1 και εισάγοντας το κείμενο Αξιοθέατα ως Επικεφαλίδα 2. Αποθηκεύουμε και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα.
   • Παρατηρούμε ότι το κείμενο Το νησί της Κέρκυρας αν και είναι μέσα σε <h1>, δεν είναι πολύ μεγάλο και επιπλέον υπάρχει μία γραμμή από κάτω παρόλο που δεν βάλαμε <hr>. Το κείμενο Ιστορικά Στοιχεία που είναι μέσα σε <h2> είναι μεγαλύτερο από αυτό σε <h1> και επιπλέον είναι σε απόχρωση του πράσινου χωρίς να βάλουμε <font color=“”>. Όμοια εμφάνιση έχει και το άρθρο Παρίσι.
   • ΤΙ ΣΥΜΒΑΙΝΕΙ;. Μέχρι τώρα δημιουργούσαμε απλές html ιστοσελίδες και μας εμφανιζόταν ένα συγκεκριμένο αποτέλεσμα. Η Επικεφαλίδα επιπέδου 1 θα έπρεπε να ξεχωρίζει από την Επικεφαλίδα επιπέδου 2 και η απλή html μας την εμφάνιζε μεγαλύτερη. Στο Joomla όμως έχουμε την λογική των προτύπων (templates). Χρησιμοποιούμε το πρότυπο Beez2 που έχει κυρίως αποχρώσεις του πράσινου. Ο δημιουργός του προτύπου Beez2 αποφάσισε ότι η Επικεφαλίδα 1 είναι : μεσαίου μεγέθους με μία γραμμή από κάτω και η Επικεφαλίδα 2 είναι : μεγάλου μεγέθους, και σε απόχρωση του πράσινου και έτσι ξεχωρίζουν.
4. ΠΡΟΤΥΠΑ - templates και αλλαγή εμφάνισης site
   • Για να καταλάβουμε καλύτερα την σημασία του προτύπου στην εμφάνιση θα πάμε να το αλλάξουμε.
   1. Πηγαίνουμε Επεκτάσεις / Διαχείριση Προτύπων και πατάμε πάνω προεπιλεγμένο πρότυπο Beez2 - Default
   2. Στις Προηγμένες Επιλογές αλλάζουμε το χρώμα του προτύπου σε Προσωπικό.
   3. Πατάμε Αποθήκευση και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα και στα 2 άρθρα Κέρκυρα και Παρίσι. Παρατηρούμε ότι άλλαξαν τα χρώματα του site γενικώς από αποχρώσεις του πράσινου σε αποχρώσεις του μπλε. Επίσης η Επικεφαλίδα 1 έγινε από μαύρη → μπλε και η Επικεφαλίδα 2 έγινε από πράσινη → γκρι.
   4. Μπαίνουμε πάλι στο πρότυπο Beez2 - Default και στις Προηγμένες Επιλογές αλλάζουμε το χρώμα του προτύπου πάλι σε Φύση, ώστε να επανέλθει η προηγούμενη εμφάνιση.
5. ΑΛΛΑΓΗ ΠΡΟΤΥΠΟΥ - template
   • Το πρότυπο Beez2 - Default έχει 2 εμφανίσεις που διαφέρουν κυρίως χρωματικά, όμως μπορούμε να χρησιμοποιήσουμε και άλλο πρότυπο που θα έχει εντελώς διαφορετική εμφάνιση.
   1. Στην Διαχείριση Προτύπων ορίζουμε ως προεπιλεγμένο το πρότυπο Atomic - Default και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα.
   2. Βλέπουμε ότι η εμφάνιση άλλαξε εντελώς. Είναι πολύ πιο απλή, καθόλου όμορφη, τα μενού πήγαν δεξιά, και δεν υπάρχουν χρώματα. Όμως τα κείμενα σε Επικεφαλίδα 1 <h1> είναι μεγαλύτερα από τα κείμενα σε Επικεφαλίδα 2.
   3. Στην Διαχείριση Προτύπων ορίζουμε πάλι ως προεπιλεγμένο το πρότυπο Beez2 - Default και πηγαίνουμε στον ΙΣΤΟΤΟΠΟ για να δούμε το αποτέλεσμα.