Υποενότητα 15.2: Θέμα - Νέα σελίδα

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 15.2: Θέμα - Νέα σελίδα
Printed by: Guest user
Date: Friday, 19 April 2024, 5:11 PM

Description

  • Σχετικά με θέματα - themes
  • Τροποποίηση της γραμμής πλοήγησης - Navigation bar
  • Δημιουργία νέας σελίδας HTML

... Θέματα στο blog σας

Τι είναι ένα θέμα - theme;

Ένα θέμα είναι αυτό που ελέγχει το σχεδιασμό ή την εμφάνιση του ιστοτόπου σας. Μπορείτε να προσαρμόσετε τα χρώματα, τις γραμματοσειρές ή τη διάταξη της σελίδας σας (στήλες κ.λπ.)

Χρησιμοποιώντας τα θέματα διαχωρίζουμε τη δομή / το περιεχόμενο του ιστότοπού μας από την εμφάνιση.

Ρύθμιση του προτιμώμενου θέματος

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε θέμα που σας αρέσει. Ωστόσο, για τους σκοπούς αυτής του μαθήματος, θα ήταν καλύτερο να χρησιμοποιήσουμε όλοι το ίδιο θέμα. Εάν συμφωνείτε, κάντε αναζήτηση για να βρείτε το θέμα twenty sixteen και ενεργοποιήστε το. Εξερευνήστε την public view του θέματος.

Η γραμμή πλοήγησης - navigation bar

Η γραμμή πλοήγησης δεν είναι ορατή σε όλα τα θέματα. Αυτό συμβαίνει επειδή κάθε θέμα έχει διαφορετικές θέσεις για αυτήν.

Στο θέμα μας, η γραμμή πλοήγησης είναι ορατή. Ωστόσο, θα δούμε πώς θα μπορούσαμε να την καταστήσουμε ορατό εάν είχαμε ένα διαφορετικό θέμα

Το Primary menu συνήθως εμφανίζει τη γραμμή πλοήγησης προς τα επάνω στη κορυφή της σελίδας και το Social menu προς τα κάτω στο υποσέλιδο.

Σημειώστε ότι μπορείτε να αναδιατάξετε, να αφαιρέσετε και να επανεμφανίσετε μια σελίδα και να δημιουργήσετε υπομενού (υποσελίδες)

Τροποποίηση χρωμάτων και γραμματοσειρών

Μπορούμε να κάνουμε μικρές αλλαγές.

Ταυτότητα - identity ιστοτόπου 

Μπορούμε να τροποποιήσουμε την ταυτότητα του ιστότοπου και να προσθέσουμε μια εικόνα λογότυπου εάν θέλουμε.

Εικόνα επικεφαλίδας - Header image

Μπορούμε να ανεβάσουμε μια εικόνα κεφαλίδας. Αυτό το θέμα λειτουργεί καλύτερα με μια εικόνα με μέγεθος 1200 × 280 εικονοστοιχείων

Άσκηση

Τροποποιήστε το θέμα σας:

  • Χρωματιστά
  • Γραμματοσειρές
  • Εικόνα κεφαλίδας (προαιρετικό)

Νέα σελίδα - Ο επεξεργαστής HTML

Ας δημιουργήσουμε μια νέα σελίδα και να την προσθέσουμε στο μενού.

Θα προσπαθήσουμε να αναδημιουργήσουμε την Choco Home του "Chocolate site". 

Δημιουργήστε τη σελίδα και προσθέστε τη στη γραμμή πλοήγησης

Εισαγωγή κειμένου

Θα προσπαθήσουμε να αντιγράψουμε και να επικολλήσουμε τον κώδικα HTML στο WordPress HTML editor

Όπως μπορείτε να δείτε οι ετικέτες HTML αναγνωρίζονται από τον επεξεργαστή HTML WordPress σε λειτουργία Visual. Ωστόσο, εμφανίστηκαν διαφορετικά στη σελίδα. Αυτό οφείλεται στο γεγονός ότι το WordPress έχει το δικό του CSS που αντικατέστησε τους προεπιλεγμένους κανόνες.

Εισαγωγή εικόνας
  • Θα πρέπει πρώτα να μεταφορτώσουμε τη chocolatethings.jpg στο blog-site

Description είναι η ιδιότητα longdesc που καθορίζει έναν υπερσύνδεσμο σε μια λεπτομερή περιγραφή της εικόνας.

  • μετά την επιτυχή μεταφόρτωση της εικόνας, θα την ενσωματώσουμε στην αρχική σελίδα Choco, χρησιμοποιώντας την ετικέτα <img>

Στο επόμενο βίντεο, θα δούμε πώς μπορούμε να εισαγάγουμε μια εικόνα ως media ή Featured image

Link image 

Άσκηση

Δημιουργήστε στο site σας μια νέα σελίδα. Πρέπει να συμπεριλάβετε:

  • Κείμενο
  • Σύνδεσμο σε εξωτερικό ιστότοπο
  • Μια εικόνα

Αφού δημιουργήσετε τη σελίδα, πρέπει να εμφανίσετε αυτή τη σελίδα στη γραμμή πλοήγησης