Στο τελευταίο σεμινάριο, προσαρμόσαμε την ενότητα "Σύνδεσμοι" για το BloggerTM weblog. Τώρα, θα προσαρμόσουμε την ενότητα Header στην κορυφή του blog. Η κεφαλίδα περιέχει τον τίτλο και την περιγραφή του ιστολογίου σας. Πρόκειται να αλλάξουμε το κείμενο ή τη γραμματοσειρά για το κείμενο και να προσθέσουμε ένα έγχρωμο φόντο.
Όπως και στο τελευταίο σεμινάριο, θα κάνουμε αυτές τις βελτιώσεις αλλάζοντας μερικές γραμμές του κώδικα HTML του προτύπου. Κάντε κλικ στην καρτέλα Πρότυπο στο μενού στο επάνω μέρος της σελίδας, το οποίο θα σας μεταφέρει στην ενότητα Επεξεργασία τρέχοντος προτύπου. Θα βρείτε τον κώδικα HTML για το πρότυπο στο παρακάτω πλαίσιο. Θα κάνουμε κάποιες αλλαγές στον κώδικα στυλ CSS. (Για να μάθετε περισσότερα σχετικά με τα Φύλλα Στιγμιότυπου Στυλ, ακολουθήστε τον παρακάτω σύνδεσμο.) Μετακινηθείτε προς τα κάτω στον κώδικα μέχρι να φτάσετε στην ενότητα Κεφαλίδα μέσα στην ετικέτα στυλ CSS. Όπως βλέπετε, η ετικέτα στυλ είναι πολύ μεγάλη και η ενότητα Header της ετικέτας στυλ έχει έξι μέρη.
- @media όλα
- @media handheld
- #Τίτλος Ιστολογίου
- # blog-title a
- # blog-title α: τοποθετήστε το δείκτη του ποντικιού
- #περιγραφή
- Το πρώτο μέρος του κώδικα (@media all) ελέγχει τα χαρακτηριστικά της κεφαλίδας, συμπεριλαμβανομένου του πλάτους, του περιθωρίου και του μεγέθους των συνόρων. Το δεύτερο μέρος (handheld @media) κληρονομεί αυτά τα χαρακτηριστικά από το πρώτο μέρος και επίσης αλλάζει το πλάτος του Header στο 90% για φορητές οθόνες. Επειδή θέλουμε το νέο χρώμα φόντου να χρησιμοποιηθεί και στις δύο περιπτώσεις, θα προσθέσουμε μια γραμμή κώδικα για το χρώμα φόντου στο πρώτο μέρος (@media all). Αυτή η νέα γραμμή κώδικα εμφανίζεται με έντονους χαρακτήρες παρακάτω. Στο παρακάτω παράδειγμα, χρησιμοποιήσαμε ένα ανοιχτό γκρι χρώμα, αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε χρώμα επιθυμείτε.
@media όλα {
#header {
φόντο-χρώμα: # EFE3EF;
...
- Στη συνέχεια, θα αλλάξουμε την γραμματοσειρά για τον τίτλο στη δημοφιλή, casual γραμματοσειρά που ονομάζεται Comic Sans MS. Φυσικά, μπορείτε να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά θέλετε. Τα επόμενα τρία μέρη του κώδικα CSS του προτύπου (# blog-title, # blog-title a, # blog-title a: hover) ελέγχουν τα χαρακτηριστικά του τίτλου του ιστολογίου. Το πρώτο μέρος ελέγχει τα γενικά χαρακτηριστικά και τα άλλα δύο μέρη ελέγχουν την εμφάνιση του κειμένου όταν λειτουργεί ως υπερσύνδεσμος. Για να ορίσετε την τυπογραφική ή την γραμματοσειρά του τίτλου για όλες τις περιπτώσεις, θα προσθέσουμε τον κωδικό CSS για την οικογένεια γραμματοσειρών στο πρώτο μέρος (# blog-title). Επειδή το όνομα της γραμματοσειράς μας περιέχει κενά, θα πρέπει επίσης να τοποθετηθεί μέσα σε εισαγωγικά ("comic sans ms").
#Τίτλος Ιστολογίου {
γραμματοσειρά-οικογένεια: "comic sans ms";
...
- Τέλος, θα εργαστούμε στον κώδικα CSS για την περιγραφή του ιστολογίου σας (#description). Αυτό είναι το τελευταίο κομμάτι των αρχικών έξι. Όπως μπορείτε να δείτε παρακάτω, όλος ο κώδικας CSS που ελέγχει τα χαρακτηριστικά γραμματοσειράς για το κείμενο περιγραφής αναγράφεται μαζί σε μία γραμμή. Το μόνο που πρέπει να κάνουμε είναι να προσθέσουμε το "comic sans ms" στο μπροστινό μέρος της λίστας γραμματοσειρών που θα κάνει το Comic Sans MS την προεπιλεγμένη γραμματοσειρά για το κείμενο περιγραφής.
#description {
...
γραμματοσειρά: 78% / 1.4εμ "comic sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif.
...
}
Όταν τελειώσετε, κάντε κλικ στο κουμπί Προεπισκόπηση για να δείτε τις αλλαγές σας και, στη συνέχεια, κλείστε το παράθυρο του προγράμματος περιήγησης για να επιστρέψετε στην προηγούμενη ιστοσελίδα. Κάντε κλικ στο κουμπί Αποθήκευση αλλαγών προτύπου. Όταν δείτε το μήνυμα επιβεβαίωσης που υποδεικνύει ότι οι αλλαγές αποθηκεύτηκαν, κάντε κλικ στο κουμπί Αναδημοσίευση. Για να επαληθεύσετε ότι το ιστολόγιό σας έχει ενημερωθεί, κάντε κλικ στην καρτέλα Προβολή ιστολογίου στο μενού που βρίσκεται στην κορυφή της σελίδας. Μπορεί να χρειαστεί να ανανεώσετε την ιστοσελίδα του ιστολογίου σας για να δείτε τις αλλαγές.
Προβολές οθόνης που ανατυπώνονται με την άδεια της Google Inc. GoogleTM, Το BloggerTM και το BlogSpotTM είναι είτε εμπορικά σήματα κατατεθέντα είτε εμπορικά σήματα της Google Inc. στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες. |
