Με το σχεδιασμό μας για το υποσέλιδο όλα έτοιμα για χρήση στο Photoshop, μπορούμε να αρχίσουμε να το δημιουργούμε στο στατικό μας πρότυπο HTML και CSS. Το πρώτο βήμα είναι να δώσουμε στον εαυτό μας κάποια HTML για να δουλέψουμε. Έχουμε ήδη ένα "μέρος" που συμπεριλαμβάνουμε σε όλες τις σελίδες που ονομάζονται "footer.php". Αυτό είναι το ιδανικό μέρος για να συμπεριλάβετε τη σήμανση υποσέλιδου προς το παρόν.
Όπως θα μπορούσατε εκτός, το υποσέλιδο είναι μια ετικέτα. Μέσα σε αυτό, μερικές λίστες συνδέσμων. Συζητάμε πώς μπορεί να μην είναι ιδανικό να βάλετε μια λίστα συνδέσμων σε ένα πραγματικό
- ετικέτα. Δεν είναι πραγματικά μια λίστα, τελικά, είναι μόνο μερικοί σύνδεσμοι. Αφού διάβασα αυτό το άρθρο, δεν έχω πια πλοήγηση σε λίστες.
Χρησιμοποιούμε τη δυνατότητα κωδικοποίησης Zen στο CodePen για να πάρουμε γρήγορα μια δέσμη συνδέσμων για να δουλέψουμε. Για να το δοκιμάσετε, πληκτρολογήστε ένα * 8 στον επεξεργαστή HTML του CodePen και, στη συνέχεια, πατήστε Tab.
Τελειώνουμε γράφοντας τη σήμανση για το κάτω υποσέλιδο επίσης. Εμείς στρίψαμε λίγο για την καλύτερη σήμανση για να το χρησιμοποιήσουμε εκεί, αλλά τελικά επιλέγουμε κάτι και πάμε μαζί του. Τα πράγματα είναι εύκολο να αλλάξουν στον ιστό, ούτως ή άλλως.