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 3.4.4, εκτύπωση σε firefox//

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

----
  - **ΕΓΚΑΤΑΣΤΑΣΗ ΠΡΟΣΘΕΤΟΥ** JCE Editor
    - Θα εγκαταστήσουμε έναν νέο επεξεργαστή άρθρων με περισσότερες δυνατότητες από αυτόν που είναι ήδη εγκατεστημένος
    - Ψάχνουμε στο google για **''Joomla JCE editor download''**. Κατεβάζουμε την **τελευταία** έκδοση και συγκεκριμένο το **legacy** του **editor** για **Joomla 3.x**. Είναι ένα συμπιεσμένο αρχείο **zip**. Αποθηκεύουμε το αρχείο εγκατάστασης στον φάκελο **mathimata/joomla**
    - Από την ΔΙΑΧΕΙΡΙΣΗ του Joomla πηγαίνουμε **Επεκτάσεις/Διαχείριση Επεκτάσεων**
    - Στην καρτέλα **Μεταφόρτωση Αρχείου Εγκατάστασης** πατάμε **Αναζήτηση** και βρίσκουμε το αρχείο που αποθηκεύσαμε προηγουμένως στον φάκελο **mathimata/joomla**
    - Πατάμε **Μεταφόρτωση & Εγκατάσταση**. Όταν ολοκληρωθεί θα πρέπει να μας εμφανίσει μήνυμα **Η εφαρμογή εγκαταστάθηκε επιτυχώς**
  - **ΕΝΕΡΓΟΠΟΙΗΣΗ** JCE Editor
    * Θα ορίσουμε τον JCE Editor ως προκαθορισμένο επεξεργαστή άρθρων.
    - Πηγαίνουμε **Σύστημα / Γενικές Ρυθμίσεις**
    - Στην καρτέλα **Ιστότοπος**, στο πεδίο **Προεπιλεγμένος Κειμενογράφος**, επιλέγουμε **Editor JCE** και πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}}.
  - **ΕΠΕΞΕΡΓΑΣΙΑ ΑΡΘΡΟΥ** - JCE Editor - html
    - Θα επεξεργαστούμε το άρθρο **''Κέρκυρα''**. Πηγαίνουμε **Περιεχόμενο / Διαχείριση Άρθρων** και πατάμε πάνω στο άρθρο **''Κέρκυρα''**
    - Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίζεται html.
    - Εάν τα ελληνικά εμφανίζονται με περίεργους χαρακτήρες //**&kappa&epsilon ..**// 
      - Πατάμε **Κλείσιμο** και πηγαίνουμε **Εφαρμογές / JCE Editor / Global Configuration**
      - Στο πεδίο **DocType** επιλέγουμε **''HTML5''**
      - Πηγαίνουμε **Περιεχόμενο / Διαχείριση Άρθρων** και πατάμε πάνω στο άρθρο **''Κέρκυρα''**
      - Στα εικονίδια του JCE Editor στην τρίτη γραμμή πατάμε πάνω στο εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίζεται πάλι η html, αυτή την φορά χωρίς πρόβλημα στους ελληνικούς χαρακτήρες.
    - **Διαγράφουμε** την ετικέτα **<p></p>** 
    - Βάζουμε το κείμενο **''Το νησί της Κέρκυρας''** σε **Επικεφαλίδα 1**. 
    - Πληκτρολογούμε το κείμενο **''Ιστορικά Στοιχεία''** και το βάζουμε μέσα σε **Επικεφαλίδα 2**
    - Πατάμε πάλι το εικονίδιο {{:el:school:lessons:html:jce_toggle_source_code.png}}. Μας εμφανίστηκαν τα 2 κείμενα με μεγάλα γράμματα, όπως περιμέναμε. Πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}}.
    - Με όμοιο τρόπο επεξεργαζόμαστε το άρθρο **''Παρίσι''** ορίζοντας το κείμενο **''Η πόλη του Παρισιού''** ως **Επικεφαλίδα 1** και εισάγοντας το κείμενο **''Αξιοθέατα''** ως **Επικεφαλίδα 2**. Αποθηκεύουμε και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα. 
  - **ΠΡΟΤΥΠΑ - templates** και αλλαγή εμφάνισης site 
    * Για να καταλάβουμε καλύτερα την σημασία του προτύπου στην εμφάνιση θα πάμε να το αλλάξουμε.
    - Πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων** και πατάμε πάνω στο πρότυπο **Protostar - Default(2)**.
    - Στην καρτέλα **Προηγμένα** βλέπουμε το **Χρώμα Προτύπου** (γραμματοσειράς) και το **Χρώμα Υποβάθρου** (φόντου). Αλλάζουμε και τα 2 επιλέγοντας άλλα χρώματα.
    - Πατάμε {{:el:school:lessons:html:save_n_exit_18.png|}} και πηγαίνουμε στον **Ιστότοπο** για να δούμε την αλλαγή.
    - Κάνουμε και άλλες δοκιμές αν θέλουμε με άλλα χρώματα. 
    - Κρατάμε τα δικά μας χρώματα ή επαναφέρουμε τα προκαθορισμένα **πληκτρολογώντας** στο **Χρώμα Προτύπου** **''#0088cc''** και στο **Χρώμα Υποβάθρου** **''#f4f6f7''**
  - **ΑΛΛΑΓΗ ΠΡΟΤΥΠΟΥ - template**
    * Το πρότυπο **Protostar - Default(2)** έχει εμφανίσεις που διαφέρουν κυρίως χρωματικά, όμως μπορούμε να χρησιμοποιήσουμε και άλλο πρότυπο που θα έχει εντελώς διαφορετική εμφάνιση. 
    - Πηγαίνουμε **Επεκτάσεις / Διαχείριση Προτύπων**. Βλέπουμε ότι είναι προεπιλεγμένο το πρότυπο **Protostar - Default(2)**. Δεξιά από το πρότυπο **Beez3 - Default** πατάμε πάνω στο **πορτοκαλί αστεράκι** ώστε να γίνει αυτό προεπιλεγμένο πρότυπο.
    - Πηγαίνουμε στον **Ιστότοπο** για να δούμε την αλλαγή. Παρατηρούμε ότι άλλαξε εντελώς η εμφάνιση! Τα μενού έγιναν κεφαλαία και άλλαξαν, δεν εμφανίζεται το λογότυπό μας, αλλαξαν τα χρώματα οι γραμματοσειρές, η διάταξη κτλ.
    - Πίσω στην **Διαχείριση Προτύπων** πατάμε πάνω στο πρότυπο **Beez3 - Default**
    - Στην καρτέλα **Προηγμένα** αλλάζουμε το χρώμα του προτύπου σε **Φύση**.
    - Πατάμε {{:el:school:lessons:html:save_n_edit_18.png|}} και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα και στα 2 άρθρα **''Κέρκυρα''** και **''Παρίσι''**. Παρατηρούμε ότι **άλλαξαν τα χρώματα** του site γενικώς από αποχρώσεις του μπλε σε αποχρώσεις του πράσινου.  
    - Δοκιμάζουμε και τις 2 άλλες επιλογές **Κόκκινο** και **Τυρκουάζ**. Αφήνουμε ότι μας αρέσει.
    - Το λογότυπο δεν εμφανίζεται αφού είχε μπει στις ρυθμίσεις του άλλου προτύπου. Μπορείτε να βρείτε την επιλογή να το εμφανίσετε;
    * Βλέπουμε ότι τα υπομενού **Εσωτερικό** και **Εξωτερικό** δεν εμφανίζονται σωστά. Πολλές φορές τα πρότυπα δεν υποστηρίζουν κάποιες δυνατότητες εμφάνισης και θα πρέπει να τα τροποποιήσουμε με αλλαγές στον **κώδικα php**, στα **αρχεία στυλ css** για να τα καταφέρουμε. Αλλιώς τροποποιούμε ρυθμίσεις στο πρότυπο ή στο joomla μέχρι να εμφανιστεί όσο το δυνατόν καλύτερα.
    * Παρατηρούμε επίσης ότι το κείμενο **''Το νησί της Κέρκυρας''** είναι μεγαλύτερο στο πρότυπο **Beez3 - Default** απ' ότι στο πρότυπο **Protostar - Default(2)** παρόλο που και τα 2 είναι στην ίδια ετικέτα **<h1>**.
    * **ΤΙ ΣΥΜΒΑΙΝΕΙ;**. Μέχρι τώρα δημιουργούσαμε απλές html ιστοσελίδες και μας εμφανιζόταν ένα συγκεκριμένο αποτέλεσμα. Η **Επικεφαλίδα επιπέδου 1** ήταν συγκεκριμένου μεγέθους και πάντα στην ίδια γραμματοσειρά εκτός εάν βάζαμε <font face> για να την αλλάξουμε. Στο Joomla όμως έχουμε την λογική των **προτύπων** (templates). Ο δημιουργός του προτύπου **Beez3** αποφάσισε άλλο μέγεθος και άλλη γραμματοσειρά για την ετικέτα **<h1>** απ' ότι ο δημιουργός του προτύπου **Protostar**. 
    * **Κάθε ετικέτα** έχει **το δικό της στυλ** με διαφορετικό **μέγεθος, γραμματοσειρά, χρώμα** και πολλά άλλα..
  - **ΕΠΑΝΑΦΟΡΑ ΠΡΟΤΥΠΟΥ** Protostar - Default
    - Στην **Διαχείριση Προτύπων** ορίζουμε πάλι ως προεπιλεγμένο το πρότυπο **Protostar - Default(2)** και πηγαίνουμε στον **ΙΣΤΟΤΟΠΟ** για να δούμε το αποτέλεσμα.

|{{:el:school:lessons:html:joomla_protostar_other_colors_corfu.png?250|Protostar - Άλλα χρώματα}}|{{:el:school:lessons:html:joomla_beez3_tyrkouaz_corfu.png?250|Beez3 - Τυρκουαζ}}|{{:el:school:lessons:html:joomla_beez3_personal_corfu.png?250|Beez3 - Προσωπικό}}|

<pagebreak>
LinuxFanClub Wiki

User Tools

Site Tools

Page Tools
