LinuxFanClub Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<pagebreak>
====== Joomla - Άσκηση 6 - Templates και εμφάνιση site - jce editor======
//Δοκιμασμένο σε Joomla 2.5.8, εκτύπωση σε firefox//

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

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

|{{:el:school:lessons:html:joomla_beez2_nature_corfu.png?250|Beez2 - Φύση}}|{{:el:school:lessons:html:joomla_beez2_personal_corfu.png?250|Beez2 - Προσωπικό}}|{{:el:school:lessons:html:joomla_atomic_corfu.png?250|Atomic}}|

<pagebreak>
LinuxFanClub Wiki

User Tools

Site Tools

Page Tools
