Μπορεί να μην έχουν όλες οι σελίδες στον ιστότοπό σας στο Joomla τον ίδιο σχεδιασμό ή την ίδια εμφάνιση. Ορισμένοι ιστότοποι έχουν ριζικά διαφορετικούς συνδυασμούς χρωμάτων και διάταξη των κύριων μπλοκ για διαφορετικές ενότητες του ιστότοπου. Και το Joomla σας επιτρέπει να το κάνετε αυτό.
Σε αυτό το σεμινάριο θα σας δείξουμε πώς να χρησιμοποιείτε διαφορετικά πρότυπα ή διαφορετικά στυλ του ίδιου προτύπου, για διαφορετικές ενότητες του ιστότοπού σας στο Joomla.
Βήμα 1: Γενικές πληροφορίες σχετικά με τα πρότυπα Joomla
Το Joomla έχει τρία κύρια πρότυπα προεγκατεστημένα από προεπιλογή: Atomic, Beez5 και Beez2.
Αυτά τα τρία πρότυπα επισημαίνονται ως "Ιστότοπος" στη στήλη "Τοποθεσία" και προορίζονται για το δημόσιο μέρος του ιστότοπου. Τα πρότυπα Bluestork και Hathor φέρουν την ετικέτα "Διαχειριστής" και προορίζονται μόνο για χρήση διαχειριστή. Μπορείτε επίσης να εγκαταστήσετε άλλα πρότυπα τρίτων ή να σχεδιάσετε ή να δημιουργήσετε το δικό σας πρότυπο.
Ένα από τα πρότυπα επισημαίνεται πάντα ως προεπιλεγμένο για τον εξωτερικό ιστότοπο και ένα για τον πίνακα διαχείρισης. Για να μάθετε ποιο είναι το προεπιλεγμένο, αναζητήστε το χρυσό αστέρι στη στήλη "Προεπιλογή", όπως φαίνεται στην παρακάτω εικόνα:
Μπορείτε να αλλάξετε το προεπιλεγμένο πρότυπο ανά πάσα στιγμή κάνοντας απλά κλικ σε ένα από τα κενά αστέρια, το οποίο θα το κάνει χρυσό και το αντίστοιχο πρότυπο ως προεπιλογή.
Όταν εγκαθιστάτε για πρώτη φορά το Joomla, το πρότυπο Beez2 εγκαθίσταται από προεπιλογή. Εάν κάνετε κλικ στο όνομα του προτύπου, μπορείτε να επεξεργαστείτε τις ρυθμίσεις του προτύπου.
Όπως μπορείτε να δείτε σε αυτό το παράδειγμα, αυτό είναι το προεπιλεγμένο πρότυπο για Ολοισελίδες και δεν απαιτεί ρύθμιση για κάθε στοιχείο μενού..
Βήμα 2: Εμφάνιση διαφορετικών προτύπων σε διαφορετικές σελίδες
Ας ρίξουμε μια ματιά στις ρυθμίσεις άλλων προτύπων και ας δούμε πώς να το αντιστοιχίσετε σε μια συγκεκριμένη κατηγορία.
- Ανοίξτε τη Διαχείριση προτύπων
- Ελέγξτε το πρότυπο Beez5.
- Κάντε κλικ στο κουμπί Αλλαγή.
- Το CMS εγκαθιστά διάφορα πρότυπα διαφορετικές σελίδεςαχ, με βάση αποκλειστικά τους συνδέσμους του μενού. Μεταβείτε στην ενότητα Σύνδεση μενού και μπορείτε να επιλέξετε για ποιους συνδέσμους μενού θα χρησιμοποιηθεί αυτό το πρότυπο.
- Το στοιχείο Προεπιλογή έχει οριστεί σε Όχι επειδή έχουμε ήδη ένα διαφορετικό προεπιλεγμένο σύνολο προτύπων.
- Επιλέξτε το πλαίσιο δίπλα στο επιθυμητό στοιχείο μενού.
- Αποθηκεύστε αυτόν τον σύνδεσμο μενού και, στη συνέχεια, δοκιμάστε τον ιστότοπό σας.
- Μετά την αποθήκευση, θα δείτε ότι έχετε εγκατεστημένο το πρότυπο Beez_20 από προεπιλογή.
- Και το πρότυπο Beez5 έχει εκχωρηθεί (Ανατεθεί) σε ένα ξεχωριστό στοιχείο μενού και υποδεικνύεται με ένα πράσινο σημάδι επιλογής.
Σαν αυτό αρχική σελίδαφαίνεται με το προεπιλεγμένο πρότυπο - Beez2:
Αξίζει να σας υπενθυμίσουμε ότι η αλλαγή του προτύπου δεν επηρεάζει το περιεχόμενο. Ωστόσο, αυτό θα αλλάξει τον τίτλο, το λογότυπο, το σχέδιο και τη θέση των μονάδων. Αυτό σημαίνει ότι δεν μπορείτε απλώς να αλλάξετε το πρότυπο χωρίς να κάνετε κάποια επιπλέον εργασία.
Θα χρειαστεί να αλλάξετε το λογότυπο τόσο για τα πρότυπα όσο και για τη θέση των μονάδων ώστε να ταιριάζει σε εσάς γενική δομήιστοσελίδα.
Βήμα 3. Εξηγήστε τις διαφορετικές θέσεις των μονάδων σε διαφορετικά πρότυπα
Οι θέσεις των μονάδων Beez5 (πάνω) και Beez2 (κάτω) είναι σχεδόν οι ίδιες, επομένως αυτό δεν θα δημιουργήσει μεγάλο πρόβλημα κατά την αλλαγή της σχεδίασης. Ωστόσο, υπάρχουν και διαφορές.
Μία από τις πιο εμφανείς διαφορές μεταξύ των δύο προτύπων είναι η θέση των μονάδων γύρω από το λογότυπο. Στο Beez5, οι μονάδες position-1 και position-0 βρίσκονται κάτω από το λογότυπο:
Στο Beez 2, η μονάδα position-0 βρίσκεται πάνω από το λογότυπο και η θέση-1 είναι παρακάτω:
Είναι μια πολύ μικρή διαφορά, αλλά Καλό παράδειγμαπώς τα πρότυπα μπορούν να διαφέρουν στις θέσεις των μονάδων τους. Σε αυτή την περίπτωση είναι ένα πολύ απλό παράδειγμα, επειδή όλες οι μονάδες έχουν τα ίδια ονόματα.
Τι γίνεται όμως αν οι θέσεις των ενοτήτων είναι εντελώς διαφορετικές, σε διαφορετικά σημεία με διαφορετικά ονόματα;
- Επιστρέψτε στη Διαχείριση προτύπων και συνδέστε το πρότυπο Atomic με μια άλλη κατηγορία.
- Θα δείτε ότι έχει τελείως διαφορετικές θέσεις μονάδων, μπορείτε να τις δείτε στην παρακάτω εικόνα:
Αυτή η σελίδα περιέχει μόνο τις ακόλουθες θέσεις ενότητας:
- ατομικό-τοπμενού
- ατομικό απόσπασμα
- ατομική αναζήτηση
- ατομική πλαϊνή μπάρα
- ατομικό-κάτω αριστερά
- ατομικό- κάτω μεσαίο
Εάν θέλετε αυτό το πρότυπο στον ιστότοπό σας, εκτός από το Beez2, τότε πρέπει να κάνετε περισσότερη δουλειά.
Βήμα 4. Προσθέστε μια λειτουργική μονάδα μενού για το νέο πρότυπο
- Επιλέξτε Extensions > Module Manager από το μενού και κάντε κλικ στο κουμπί Create.
- Επιλέξτε Μενού.
- Συνδέουμε τη νέα μονάδα στη θέση ατομικής πλευρικής γραμμής.
- Νέα δυνατότητα στο Joomla 2.5 - Πεδίο Σημείωση. Αυτό θα σας βοηθήσει να μην μπερδευτείτε στις ενότητες εάν υπάρχει μεγάλος αριθμός από αυτές.
- Τώρα συνδέουμε το module σε συγκεκριμένες σελίδες.
- Επιλέξτε "Μόνο σε επιλεγμένες σελίδες".
- Επιλέξτε το πλαίσιο δίπλα στο στοιχείο μενού που χρειάζεστε.
- Τώρα έχω το μενού στην πλαϊνή γραμμή. Μπορείτε να δείτε τι είναι οριζόντιο μενούκαι δεν υπάρχει αρκετός χώρος για αυτόν εκεί. Πρέπει να προσπαθήσουμε να βρούμε μια καλύτερη θέση για αυτόν.
- Μεταβείτε στο Module Manager και μετακινήστε το μενού στη θέση ατομικού επάνω μενού. Το μενού θα πρέπει τώρα να μοιάζει με την παρακάτω εικόνα:
Παρείχα αυτό το παράδειγμα απλώς για να δείξω το είδος των προβλημάτων που μπορεί να αντιμετωπίσετε όταν αρχίζετε να προσθέτετε πρότυπα χωρίς να κάνετε πρώτα την έρευνά σας.
Μπορείτε επίσης να χρησιμοποιήσετε ένα αντίγραφο του υπάρχοντος προτύπου σας ως θέμα για μια εναλλακτική ενότητα ή σελίδα. Το μεγάλο πλεονέκτημα είναι ότι όλα θα βρίσκονται σε ένα μέρος και χρειάζεται μόνο να κάνετε τις απαραίτητες αλλαγές στο CSS και αυτό θα αποφύγει σημαντικές επανεγγραφές.
Βήμα 5. Στυλ προτύπων έναντι διαφόρων προτύπων
Αντί να χρησιμοποιείτε εντελώς διαφορετικά πρότυπα για διαφορετικές σελίδες στον ιστότοπό σας, μπορείτε απλά να δημιουργήσετε διάφορες επιλογέςτο προεπιλεγμένο σας πρότυπο. Αυτό νέα ευκαιρίαστο Joomla 2.5. Σας επιτρέπει να δημιουργείτε διαφορετικά σχέδια σε κάθε σελίδα χωρίς να χρειάζεται να ακολουθήσετε όλα τα βήματα που περιγράψαμε παραπάνω.
- Μεταβείτε στη Διαχείριση προτύπων.
- Επιλέξτε το πλαίσιο δίπλα στο πρότυπο που θέλετε να αντιγράψετε. Σε αυτή την περίπτωση θα χρησιμοποιήσουμε το Beez2.
- Κάντε κλικ στο εικονίδιο "Διπλότυπο".
- Επιλέξτε το πλαίσιο δίπλα στο Beez2-Default (2).
- Κάντε κλικ στο κουμπί "Επεξεργασία".
- Το Beez2 έρχεται με δύο χρωματικούς συνδυασμούς, Personal και Nature. Επιλέξτε Φύση από την αναπτυσσόμενη λίστα.
- Συνδέστε το πρότυπο με μια κατηγορία στην ενότητα "Δέσμευση στο μενού".
- Σημειώστε ότι υπάρχουν και άλλες επιλογές, μπορείτε επίσης να αλλάξετε το λογότυπο, το όνομα της τοποθεσίας και τη θέση πλοήγησης.
- Τώρα έχετε έναν ιστότοπο με δύο διαφορετικά στυλ του ίδιου προτύπου, συνδεδεμένο με διαφορετικά στοιχεία μενού.
- Μπορείτε επίσης να συνδέσετε ένα πρότυπο κατά τη δημιουργία στοιχείων μενού.
- Όταν βρίσκεστε στη Διαχείριση Μενού, μπορείτε να ορίσετε την επιλογή του αγαπημένου σας προτύπου για αυτό το στοιχείο μενού (δείτε παρακάτω).
Εάν έχετε οποιεσδήποτε ερωτήσεις, συνιστούμε να χρησιμοποιήσετε το δικό μας
Αυτό το άρθρο δείχνει πώς να φτιάξετε το τυπικό πρότυπο Beez_20 "λάστιχο". Έτσι, ανεξάρτητα από την ανάλυση οθόνης, ο ιστότοπος καταλαμβάνει όλο το πλάτος της οθόνης. Αυτή η μέθοδοςδοκιμασμένο σε Joomla 1.7 και Joomla 2.5
Εάν χρησιμοποιείται διαχείριση αρχείωνπάροχος φιλοξενίας ή διαχειριστής FTP, τότε πρέπει να βρείτε το αρχείο στυλ " our_site\templates\beez_20\css\position.cssΕάν χρησιμοποιείται Πίνακας Ελέγχου Joomla, τότε πρέπει να πάτε στο Επεκτάσεις -> Διαχειριστής προτύπων
Στα δεξιά είναι όλα τα Φύλλα στυλ του προτύπου Beez_20. Βρίσκοντας τη γραμμή Επεξεργασία css/position.cssκαι κάντε κλικ σε αυτό. Θα ανοίξει ένα παράθυρο Διαχειριστής προτύπων: Επεξεργασία αρχείου.
Εδώ μπορούμε να επεξεργαστούμε αυτό το αρχείο.
Βρείτε το πλάτος του κύριου τμήματος. Είναι ίσο με 1050 px.
#όλα
{
περιθώριο: 0 αυτόματο;
μέγιστο πλάτος: 1050 px;
padding: 0px;
text-align: αριστερά;
}
Αλλάξτε αυτήν την τιμή σε 100%.
#όλα
{
περιθώριο: 0 αυτόματο;
μέγιστο πλάτος: 100%;
padding: 0px;
text-align: αριστερά;
}
Στη συνέχεια στο ίδιο αρχείο βρίσκουμε το πλάτος του υποσέλιδου. Είναι ίσο με 1020 px.
#footer-inner
{
μέγιστο πλάτος: 1020 px;
περιθώριο: 0 αυτόματο;
μέγεθος γραμματοσειράς: 0,8em;
padding: 10px 15px 15px 10px;
}
Αλλάξτε αυτήν την τιμή σε 100%.
#footer-inner
{
μέγιστο πλάτος: 100%;
περιθώριο: 0 αυτόματο;
μέγεθος γραμματοσειράς: 0,8em;
padding: 10px 15px 15px 10px;
}
Αποθηκεύστε το αρχείο και μεταβείτε στον ιστότοπό σας - δείτε τι συνέβη. Για να δείτε αμέσως το αποτέλεσμα μετά την αλλαγή του CSS, είναι απαραίτητο το πρόγραμμα περιήγησης να κατεβάσει ξανά τα νέα στυλ. Για να το κάνετε αυτό, κάντε κλικ Ctrl+R
Το τελευταίο πράγμα που πρέπει να κάνετε είναι να προσαρμόσετε την κεφαλίδα. Αφού ο ιστότοπος απλώθηκε σε όλο το πλάτος της οθόνης, η εικόνα της κεφαλίδας μετακινήθηκε προς τα δεξιά και ένα μπλε ορθογώνιο εμφανίστηκε στα αριστερά. Αυτό συνέβη επειδή το πλάτος της εικόνας είναι 1060 px. Η εικόνα της κεφαλίδας βρίσκεται στο φάκελο " our_site\templates\beez_20\images\personal\personal2.jpg" Μπορείτε να δημιουργήσετε τη δική σας μεγαλύτερη εικόνα και να αντικαταστήσετε το αρχείο personal2.jpg με τη δική σας (το όνομα του αρχείου θα πρέπει να μείνει personal2.jpg). Εάν δεν υπάρχει κατάλληλη εικόνα, τότε μπορείτε να απενεργοποιήσετε την εμφάνιση της εικόνας στο φύλλο στυλ και ολόκληρη η κεφαλίδα θα είναι μπλε.
Για να απενεργοποιήσουμε την εικόνα, χρειαζόμαστε ένα αρχείο με ρυθμίσεις στυλ, το οποίο βρίσκεται στο " our_site\templates\beez_20\css\personal.cssΣε αυτό βρίσκουμε:
Logoheader
{
φόντο: #0c1a3e URL(../images/personal/personal2.png) χωρίς επανάληψη κάτω δεξιά ;
color:#fff;
ελάχ. ύψος: 200 px;
}
Κατάργηση URL(../images/personal/personal2.png) χωρίς επανάληψη κάτω δεξιά. Θα πρέπει να μοιάζει με αυτό:
Logoheader
{
φόντο: #0c1a3e;
color:#fff;
ελάχ. ύψος: 200 px;
margin:0em 10px 0 10px !important;
}
Αποθηκεύστε το αρχείο. Αυτό είναι όλο.
Πριν εμβαθύνουμε στη συζήτηση ενός συγκεκριμένου προτύπου, ας προσπαθήσουμε για άλλη μια φορά να καταλάβουμε τι είναι ένα πρότυπο στο joomla. Κατά την κατανόηση των περισσότερων χρηστών, το πρότυπο είναι υπεύθυνο για τον εξωτερικό σχεδιασμό των σελίδων του ιστότοπού σας. Ωστόσο, ένα πρότυπο δεν είναι μόνο σχέδιο.
Περιλαμβάνει επίσης μηχανισμούς που καθορίζουν την τοποθέτηση δεδομένων, μεθόδους και διαστήματα για την εμφάνιση διαφόρων μονάδων δεδομένων, Επιλογές Γλώσσαςκαι τα λοιπά.
ΣΕ ΠΡΟΗΓΟΥΜΕΝΕΣ ΕΚΔΟΣΕΙΣΤο Joomla χρησιμοποίησε το βασικό πρότυπο Beez. ΣΕ πιο πρόσφατες εκδόσειςτα πρότυπα που χτίστηκαν στη βάση του (Beez5, Beez_20) έχουν υποστεί σημαντικές αλλαγές σε σύγκριση με αυτό. Κατά τη δημιουργία του προτύπου Beez, οι προγραμματιστές συμπεριέλαβαν σε αυτό πιθανές επιλογές προσαρμογής στις ανάγκες οποιουδήποτε ιδιοκτήτη ιστότοπου. ΠηγήΤο πρότυπο θα μπορούσε να αλλάξει εύκολα. Κάνοντας αλλαγές σε επικαλυπτόμενα φύλλα στυλ, ήταν εύκολο να δημιουργηθεί πλήρως νέο πρότυποεγγραφή χωρίς να ξοδέψετε σημαντική προσπάθεια. Αλλά στη διαδικασία της εργασίας, οι σχεδιαστές προσπάθησαν να μην χρησιμοποιήσουν αυτό το πρότυπο, αλλά ανέπτυξαν το δικό τους από την αρχή.
Ως αποτέλεσμα, αναπτύχθηκαν δύο εντελώς νέα πρότυπα για το Joomla 2.5. Και τα δύο πρότυπα χρησιμοποιούν τη γλώσσα JavaScript, το πρότυπο beez5 χρησιμοποιεί τη γλώσσα HTML5 και το πρότυπο beez_20 δεν απαιτεί παρακάμψεις. Δεν χρειάζεται να χρησιμοποιείτε πίνακες κατά τη διάταξη. Τα ονόματα των κλάσεων του διαδοχικού πίνακα έχουν αλλάξει.
Ιδιότητες προτύπου
Νέα πρότυπα έχουν γίνει ευρέως διαθέσιμα, είναι πλέον δυνατή η επιλογή της θέσης του μπλοκ πλοήγησης στη σελίδα, έχουν προστεθεί λειτουργικές ετικέτες WAI-ARIA, οι μονάδες σε καρτέλες μπορούν να εμφανίζονται σε αυτόματη λειτουργία, προστέθηκαν πτυσσόμενες θέσεις για μονάδες και στήλες, δύο φόρμες σχεδίασης έχουν ενσωματωθεί στο πρότυπο beez_20: φυσική και ανθρώπινη, στο πρότυπο beez5 προστέθηκε υποστήριξη για τη γλώσσα HTML5.
Δεν είναι μυστικό ότι υπάρχουν άνθρωποι των οποίων η ικανότητα να αντιλαμβάνονται τον κόσμο γύρω τους είναι εξασθενημένη. Κάποιοι είναι ανίκανοι στην οπτική αντίληψη, άλλοι είναι περιορισμένοι στην αντίληψη του ήχου. Ωστόσο, αυτοί οι άνθρωποι χρησιμοποιούν επίσης πηγές πληροφοριώνΔίκτυα Διαδικτύου. Και όλες οι πύλες Διαδικτύου που δημιουργούνται πρέπει να έχουν σχεδιαστεί για αυτήν την κατηγορία χρηστών. Τα πρότυπα Joomla έχουν τα πάντα απαραίτητα εργαλείαπροκειμένου να δοθεί η δυνατότητα στα άτομα με αναπηρία να χρησιμοποιούν το Διαδίκτυο.
Κατά τη δημιουργία προτύπων, πρέπει να τηρείτε τις βασικές απαιτήσεις: τα υλικά του ιστότοπου δεν πρέπει να επικαλύπτονται με τη σχεδίαση αυτών των υλικών, η δομή του ιστότοπου δεν πρέπει να υπερφορτώνεται, η πλοήγηση στις σελίδες του ιστότοπου πρέπει να υποστηρίζεται από εντολές πληκτρολογίου, η έγχρωμη σχεδίαση του περιεχομένου πρέπει να είναι αντίθετη.
Το πιο σημαντικό σημείο από τη σκοπιά ενός προγραμματιστή είναι ο διαχωρισμός του περιεχομένου από τον σχεδιασμό. Για να το κάνετε αυτό, πρέπει να απαλλαγείτε από τον πίνακα σχεδίασης του υλικού στη σελίδα. Μόνο CSS χρησιμοποιείται για μορφοποίηση. Το υλικό πρέπει να τοποθετηθεί γραμμικά από πάνω προς τα κάτω.
Ο σημασιολογικός σχεδιασμός σας επιτρέπει να πλοηγηθείτε μεταξύ σελίδων ιστότοπου με βάση επικεφαλίδες, λίστες κ.λπ., καθώς και να σχηματίσετε μια γενική ιδέα για το υλικό του εγγράφου.
Ωστόσο, το μειονέκτημα του γραμμικού περιεχομένου σελίδας είναι ότι μπορεί να χρειαστεί χρόνος για να φτάσετε στις πληροφορίες που χρειάζεστε (αν οι πληροφορίες βρίσκονται στο κάτω μέρος της σελίδας). Για να διορθώσετε αυτό το πρόβλημα, μπορείτε να χρησιμοποιήσετε σελιδοδείκτες HTML για να επιταχύνετε την πλοήγηση στη σελίδα. Σε αυτήν την περίπτωση, υποτίθεται ότι θα δημιουργηθεί ένα πρόσθετο μενού για να μετακινηθείτε στη σελίδα. Για όσους είναι ήδη εξοικειωμένοι με τη δομή του ιστότοπου, αυτό το μενού μπορεί να είναι κρυφό.
Για παράδειγμα:
- Μετάβαση στο κύριο κείμενο.
- Μεταβείτε στο κύριο μπλοκ πλοήγησης και συνδεθείτε.
Κατά τη δημιουργία ενός ιστότοπου, πρέπει να δώσετε προσοχή στο συνδυασμό χρωμάτων στο σχέδιο. Αν για τακτικός χρήστηςΔεδομένου ότι δεν υπάρχει σημαντική διαφορά στην χρωματική αντίθεση, η αντίθεση έχει ιδιαίτερη σημασία για τα άτομα με αναπηρία. Σε αυτήν την περίπτωση, τα χρώματα του φόντου και του κειμένου θα πρέπει να έχουν αντίθεση. Η μέγιστη αντίθεση είναι δυνατή με μαύρο κείμενο σε λευκό φόντο. Αλλά για να αποφευχθούν προβλήματα με την οπτική παραμόρφωση, το φόντο της σελίδας θα πρέπει να είναι ανοιχτόχρωμο.
Ένα πρότυπο είναι ένας τύπος επέκτασης στο Joomla που αντιπροσωπεύει εμφάνισηη ιστοσελίδα σου. Υπάρχουν δύο τύποι προτύπων που χρησιμοποιούνται σε CMS Joomla: Πρότυπα διεπαφής και πρότυπα υποβάθρου. Front-end (εμπρός) - καθορίζει την εμφάνιση του ιστότοπού σας, αυτό είναι ολόκληρο το οπτικό μέρος του πόρου Διαδικτύου που βλέπει ο χρήστης. Το Back-end είναι ένας τύπος προτύπου που σας επιτρέπει να αλλάξετε την εμφάνιση (διεπαφή) του πίνακα διαχείρισης του Joomla!
Το Joomla 2.5 παρέχει πολλά τυπικά πρότυπα που συνοδεύουν την εγκατάσταση CMS (3 πρότυπα Front-end και 2 Back-end πρότυπα):
Πρότυπα ιστοσελίδων
- Beez 20 (προεπιλεγμένο πρότυπο).
- Beez 5;
- Ατομικός.
Πρότυπα πίνακα διαχείρισης
- Bluestorkk (προεπιλεγμένο πρότυπο);
- Hathor.
Σκοπός προτύπου
Ένα πρότυπο ελέγχει τη διάταξη και την εμφάνιση ενός ιστότοπου. Παρέχει ένα πλαίσιο που συγκεντρώνει κοινά στοιχεία, λειτουργικές μονάδες, στοιχεία και πρόσθετα, και παρέχει επίσης ένα επικαλυπτόμενο φύλλο στυλ για τον ιστότοπο.
Όταν εγκαθιστάτε για πρώτη φορά το Joomla! δύο πρότυπα που αναφέρθηκαν στην παραπάνω ενότητα περιλαμβάνονται αυτόματα. Σε άλλους ιστότοπους μπορείτε να βρείτε πολλά άλλα πρότυπα που ταιριάζουν σε κάθε γούστο και χρώμα. Ένας τεράστιος αριθμός προτύπων είναι διαθέσιμος στους χρήστες σε ελεύθερη μορφή με διάφορες άδειες χρήσης, αλλά υπάρχουν και πρότυπα επί πληρωμή. Οποιοσδήποτε χρήστης μπορεί να δημιουργήσει το δικό του πρότυπο, απλά πρέπει να το ορίσετεη εκτεταμένες γνώσεις σε αυτόν τον τομέα.
Τα πρότυπα εγκαθίστανται μέσω του πίνακα διαχείρισης του Joomlaστο Extension Manager, μετά την εγκατάσταση το πρότυπο θα είναι διαθέσιμο στο Template Manager.
Γιατί Joomla! χρησιμοποιεί πρότυπα;
CMS Joomla! προσδιορίζει διάφορες βασικές εργασίες που εμπλέκονται στην παραγωγή ενός αποτελεσματικού πόρου Διαδικτύου. Μία από αυτές τις εργασίες είναι η δημιουργία ενός ιστότοπου με αισθητική (διάταξη). Αυτή η εργασία περιλαμβάνει τη λήψη αποφάσεων σχετικά με την τοποθέτηση στοιχείων περιεχομένου (ενότητες, πρόσθετα και στοιχεία).
Κατά τη δημιουργία μιας νέας ιστοσελίδας, η διάταξη των περισσότερων στοιχείων περιεχομένου πρέπει να παραμένει η ίδια (μενού, πλαϊνά πάνελ, χώροι πανό, κ.λπ.). Επιπλέον, ο χρήστης θέλει να βλέπει την ίδια εμφάνιση για το καθένα ΝΕΑ ΣΕΛΙΔΑκαι τα περιεχόμενά του (γραμματοσειρές, στυλ επικεφαλίδων, χρωματική παλέτα κ.λπ.). Ο χρήστης μπορεί επίσης να αλλάξει ορισμένα γενικά στοιχεία του ιστότοπου για να καθορίσει άλλες επιλογές εμφάνισης, κ.λπ. (για παράδειγμα, λειτουργικές μονάδες). Ως αποτέλεσμα, μετά από λίγο σχεδιασμό, θα καταλήξετε σε μια γενική διάταξη για τον ιστότοπό σας και θα λύσετε το πρόβλημα της προετοιμασίας ενός προτύπου για κάθε σελίδα και το περιεχόμενό της.
Και τώρα αξίζει να το σκεφτούμε. Γιατί να γράφετε κώδικα για κάθε σελίδα ξεχωριστά όταν μπορείτε να χρησιμοποιήσετε ένα πρότυπο για κάθε ενότητα στον ιστότοπο και όταν προσθέτετε μια νέα σελίδα, πρέπει απλώς να «συμπληρώσετε τα κενά». Όλα αυτά δεν είναι τόσο απλά όσο λένε, αλλά αυτό το υλικό παρέχει βασικές πληροφορίες σχετικά με τη χρήση του προτύπου και τον σκοπό του.
Η κύρια συνέπεια αυτού του υλικού είναι ότι ένα πρότυπο ελέγχει την εμφάνιση του ιστότοπού σας και ταυτόχρονα επιτρέπει στον διαχειριστή του πόρου να δίνει μεγαλύτερη προσοχή στο πραγματικό περιεχόμενο αντί να γράφει κώδικα.
Επεξεργασία προτύπου. Τί μπορεί να γίνει;
Το πρότυπο χρησιμοποιείται για τον οργανικό σχεδιασμό περιεχομένου που φορτώνεται από ένα πρόγραμμα περιήγησης ιστού για περαιτέρω ανάγνωση στην οθόνη. Μπορείτε να αλλάξετε ανεξάρτητα τους συνδυασμούς χρωμάτων, τις εικόνες και τα εφέ, τις γραμματοσειρές και την ίδια τη διάταξη.
Διάταξη.Ένα πρότυπο είναι η περιοχή όπου ορίζονται τα στυλ σχεδίασης του ιστότοπού σας. Αυτό περιλαμβάνει την τοποθέτηση διαφόρων στοιχείων (εξαρτήματα, λειτουργικές μονάδες και πρόσθετα) για τα οποία είναι υπεύθυνα Διάφοροι τύποιπεριεχόμενο. Για παράδειγμα: διαφορετικά μενού (μπορείτε να επιλέξετε στυλ μενού από υπάρχουσες επιλογέςκαι χρησιμοποιήστε το παράδειγμά του για να δημιουργήσετε το δικό σας, μοναδικό μενού).
Παλέτα χρωμάτων.Με το CSS μπορείτε να αλλάξετε το χρώμα του φόντου, των συνδέσμων, του κειμένου κ.λπ.
Γραμματοσειρές.Το ίδιο ισχύει και για τις γραμματοσειρές. Χρησιμοποιώντας στυλ CSS, μπορείτε να ορίσετε μια συνεπή εμφάνιση κειμένου στις σελίδες σας. Αυτό καθιστά εύκολη την αλλαγή της εμφάνισης όλων των πληροφοριών κειμένου με την επεξεργασία ενός ή δύο αρχείων, αντί για την επεξεργασία κάθε μεμονωμένης σελίδας.
Εικόνες και εφέ.Μπορείτε να ελέγξετε πλήρως τον τρόπο εμφάνισης των εικόνων στη σελίδα και ακόμη και να δημιουργήσετε εφέ flash, όπως αναπτυσσόμενα μενού.
18 Ιουνίου 2012Διαφορετικά πρότυπα για διαφορετικές σελίδες του ιστότοπου - 3,8 από 5 με βάση 5 ψήφους
Δεν χρειάζεται όλες οι σελίδες σε έναν ιστότοπο να έχουν τον ίδιο σχεδιασμό. Ορισμένοι ιστότοποι έχουν διαφορετικά χρώματα και στυλ για διαφορετικές σελίδες. Άλλοι ιστότοποι έχουν ριζικά διαφορετικά σχέδια σε ένα τμήμα από το άλλο. Το Joomla σας επιτρέπει να εφαρμόσετε μια παρόμοια ιδέα.
Αυτό το σεμινάριο θα σας δείξει πώς να χρησιμοποιείτε πολλά πρότυπα ή πολλαπλά στυλ ενός προτύπου για διαφορετικά μέρη του ιστότοπού σας Joomla.
Βήμα 1: Ανάλυση του τυπικού προτύπου Joomla
Το Joomla έχει 3 τυπικά πρότυπα: Atomic, Beez5 και Beez2. Αυτά τα τρία πρότυπα είναι για τον ιστότοπο. Τα άλλα δύο - Bluestork και Hathor - προορίζονται για τον πίνακα διαχείρισης του Joomla. Μπορείτε επίσης να εγκαταστήσετε ένα άλλο πρότυπο ή να δημιουργήσετε το δικό σας.
Ένα από τα πρότυπα θα εκχωρείται πάντα από προεπιλογή. Το προεπιλεγμένο πρότυπο επισημαίνεται με ένα χρυσό αστέρι όπως φαίνεται στο σχήμα.
Μπορείτε πολύ εύκολα να αλλάξετε το προεπιλεγμένο πρότυπο κάνοντας κλικ σε ένα από τα ανοιχτά αστέρια. Εάν το αστέρι είναι συμπληρωμένο, σημαίνει ότι έχει εκχωρηθεί ένα νέο προεπιλεγμένο πρότυπο.
Μετά την εγκατάσταση πρότυπο joomlaΤο Beez2 έχει εκχωρηθεί από προεπιλογή. Εάν κάνετε κλικ στο όνομα του προτύπου, μπορείτε να επεξεργαστείτε ορισμένες από τις ρυθμίσεις προτύπου.
Σε αυτό το παράδειγμα, μπορείτε να δείτε τη σελίδα ρυθμίσεων προτύπου. Αυτό το πρότυπο έχει εκχωρηθεί από προεπιλογή και δεν συνδέεται ειδικά με κανένα στοιχείο μενού (Επιλογή: Σύνδεσμος στο μενού).
Βήμα 2: Εκχώρηση διαφορετικών προτύπων σε διαφορετικές σελίδες Joomla
Ας ρίξουμε μια ματιά στην επεξεργασία ενός άλλου προτύπου και ας δούμε πώς να το αντιστοιχίσετε σε μια συγκεκριμένη κατηγορία.
- Κλείστε τη σελίδα επεξεργασίας προτύπου Beez2.
- Ανοίξτε το πρότυπο για επεξεργασία Beez5,επιλέγοντας το πλαίσιο δίπλα στο πρότυπο και κάνοντας κλικ στο κουμπί: "Επεξεργασία".
Η σύνδεση διαφορετικών προτύπων σε διαφορετικές σελίδες του ιστότοπου υλοποιείται αποκλειστικά με τη χρήση στοιχείων μενού. Μεταβείτε στην ενότητα "Σύνδεση μενού" και μπορείτε να επιλέξετε τις σελίδες ιστότοπου για τις οποίες θέλετε να εκχωρήσετε μεμονωμένα πρότυπα.
Σε αυτήν την περίπτωση, το πεδίο "Προεπιλογή" για αυτό το πρότυπο χρησιμοποιεί την τιμή "Οχι",επειδή έχουμε ήδη ένα διαφορετικό πρότυπο που χρησιμοποιείται από προεπιλογή. Επιλέξτε το πλαίσιο δίπλα στο στοιχείο "Κατηγορία 1"ή οτιδήποτε άλλο θα χρησιμοποιήσετε.
Αποθηκεύστε αυτόν τον σύνδεσμο και, στη συνέχεια, ελέγξτε τον ιστότοπό σας. Μετά την αποθήκευση, θα δείτε ότι το πρότυπο Beez20 έχει εκχωρηθεί ως προεπιλογή. Και το πρότυπο Beez5 επισημαίνεται με ένα πράσινο σημάδι επιλογής.
Δείτε πώς φαίνεται η αρχική σελίδα με το προεπιλεγμένο πρότυπο Beez.
Επί αυτή τη στιγμήΑξίζει να θυμάστε ότι η αλλαγή του προτύπου δεν θα επηρεάσει το περιεχόμενο του ιστότοπου. Ωστόσο, ο τίτλος, το λογότυπο, το σχέδιο και η θέση των μονάδων θα αλλάξουν. Αυτό σημαίνει ότι δεν μπορείτε απλώς να αλλάξετε το πρότυπο χωρίς να κάνετε επιπλέον εργασία.
Βήμα 3: Καθορίστε διαφορετικές θέσεις λειτουργικών μονάδων σε διαφορετικά πρότυπα
Οι θέσεις της μονάδας στο πρότυπο Beez5 (επάνω) και στο πρότυπο Beez20 (κάτω) είναι σχεδόν οι ίδιες, επομένως οι αλλαγές είναι μικρές. Ωστόσο, υπάρχουν και διαφορές.
Μία από τις αξιοσημείωτες διαφορές μεταξύ των προτύπων είναι η θέση των μονάδων κοντά στο λογότυπο. Στο πρότυπο Beez5, οι θέσεις 1 και 0 βρίσκονται κάτω από το λογότυπο.
Στο Beez20, η θέση-0 είναι πάνω από το λογότυπο και η θέση-1 είναι κάτω από αυτό.
Αυτή είναι μια αρκετά μικρή διαφορά, αλλά ένα καλό παράδειγμα για το πώς μπορεί να διαφέρουν οι θέσεις των μονάδων στα πρότυπα. Σε αυτήν την περίπτωση, δίνεται ένα απλό παράδειγμα, καθώς οι θέσεις των λειτουργικών μονάδων και στα δύο πρότυπα έχουν τα ίδια ονόματα.
Τι να κάνετε όμως εάν οι θέσεις των μονάδων στα πρότυπα διαφέρουν όχι μόνο ως προς τη θέση αλλά και ως προς το όνομα;
Επιστρέψτε στη Διαχείριση προτύπων και συνδέστε το πρότυπο Atomic στη σελίδα Κατηγορία 2.Θα δείτε το πρότυπο Atomic στη σελίδα Κατηγορία 2.Έχει εντελώς διαφορετικές θέσεις της μονάδας και μπορείτε να το δείτε στην παρακάτω εικόνα.
Αυτή η σελίδα παρουσιάζει τις θέσεις των ενοτήτων:
- ατομικό-τοπμενού
- ατομικό απόσπασμα
- ατομική αναζήτηση
- ατομική πλαϊνή μπάρα
- ατομικό-κάτω αριστερά
- ατομικό- κάτω μεσαίο
Εάν θέλετε το πρότυπο Atomic να λειτουργεί εκτός από το Beez20, πρέπει να κάνετε περισσότερη δουλειά. Δεν είναι εγγυημένο ότι μια θέση μονάδας που λειτουργεί στο Beez20 θα λειτουργεί στο Atomic.
Βήμα 4: Προσθέστε μια λειτουργική μονάδα μενού στο νέο πρότυπο.
- Μεταβείτε στο Extensions - Module Manager και κάντε κλικ στο κουμπί Δημιουργώ.
- Επιλέξτε τον τύπο της μονάδας Μενού.
- Εκχωρήστε μια θέση στη νέα σας ενότητα ατομική πλαϊνή μπάρα.
- Το Joomla 2.5 εισάγει μια νέα δυνατότητα: ένα πεδίο σχολίων για μια ενότητα. Αυτό θα σας αποτρέψει από το να μπερδευτείτε όταν έχετε πολλές ενότητες.
Τώρα θα δεσμεύσουμε το module μόνο σε μια συγκεκριμένη σελίδα.
- Στην επιλογή "Δέσμευση σε στοιχεία μενού", επιλέξτε την τιμή "Μόνο σε καθορισμένες σελίδες."
- Επιλέξτε το πλαίσιο δίπλα στη σελίδα στην οποία θέλετε να εμφανίσετε τη λειτουργική μονάδα.
Η μονάδα μενού είναι τώρα τοποθετημένη στην πλαϊνή γραμμή. Πιθανότατα έχετε παρατηρήσει ότι πρόκειται για ένα οριζόντιο μενού και υπάρχει περιορισμένος χώρος για αυτό. Πρέπει να προσπαθήσουμε ξανά για να βρούμε μια πιο κατάλληλη θέση.
Μεταβείτε στον διαχειριστή λειτουργιών και μετακινήστε το μενού σας στη θέση ατομικό-τοπμενού. Μπορείτε να δείτε το αποτέλεσμα στην επόμενη εικόνα.
Βήμα 5: Δώστε στυλ σε ένα πρότυπο αντί για διαφορετικά πρότυπα.
Αντί να χρησιμοποιείτε εντελώς διαφορετικά πρότυπα σε διαφορετικές σελίδες του ιστότοπού σας, μπορείτε απλώς να κάνετε μια μικρή αλλαγή στο προεπιλεγμένο σας πρότυπο. Αυτή είναι μια νέα δυνατότητα που εισήχθη στο Joomla 2.5. Αυτή η τεχνική θα σας επιτρέψει να δημιουργήσετε περισσότερα λεπτές διαφορέςσε κάθε σελίδα χωρίς να χρειάζεται να κάνετε την εργασία που περιγράφεται παραπάνω.
- Μεταβείτε στη Διαχείριση προτύπων.
- Επιλέξτε το πρότυπο που θέλετε να αντιγράψετε (επιλέξτε το πλαίσιο δίπλα του).
- Κάντε κλικ στο κουμπί "Αντίγραφο".
- Επιλέξτε το πλαίσιο δίπλα στο πρότυπο Beez2-Default (2).
- Κάντε κλικ στο κουμπί "Αλλαγή".
- Το Beez20 έρχεται με δύο χρωματικούς συνδυασμούς: Personal και Nature. Επιλέξτε Φύση από την αναπτυσσόμενη λίστα.
- Αντιστοιχίστε ένα πρότυπο σε ένα στοιχείο μενού Κατηγορία 1στο μπλοκ "Σύνδεσμος στο μενού". Λάβετε υπόψη ότι υπάρχουν άλλες ρυθμίσεις που μπορείτε να αλλάξετε. Για παράδειγμα: λογότυπο, όνομα τοποθεσίας και θέση πλοήγησης.
Τώρα έχετε δύο διαφορετικά στυλ προτύπου στον ιστότοπό σας, που σχετίζονται με δύο σελίδες.
- Μπορείτε επίσης να αντιστοιχίσετε ένα πρότυπο κατά τη δημιουργία στοιχείων μενού.
- Όταν βρίσκεστε στη διαχείριση μενού, μπορείτε να συσχετίσετε ένα στυλ προτύπου κατά τη δημιουργία ενός στοιχείου μενού.
Εκτίμηση 3.80
Προβολές: 25562
Φόρτωση...