Συνήθως κατά την επεξεργασία μιας ιστοσελίδας χρησιμοποιούμε ένα συγκεκριμένο εργαλείο επεξεργασίας όπως το Adobe Dreamweaver, το CoffeeCup, το Bluefish ή ένα από τα άλλα εργαλεία ανάπτυξης. Αλλά τι γίνεται αν είμαστε απλά ιδέες ή θέλουμε να δοκιμάσουμε κάτι σε μια ζωντανή σελίδα; Θα μπορούσαμε να κάνουμε ένα αντίγραφο της σελίδας στο εργαλείο επιλογής μας και να παίξουμε με αυτό. Ή θα μπορούσαμε να το κάνουμε στο πρόγραμμα περιήγησης ιστού. Αυτό το σεμινάριο θα σας δείξει πώς να επεξεργαστείτε μια ιστοσελίδα στον browser σας.
Αναφερόμενο ως Εργαλεία για προγραμματιστές, ο Firefox καλεί τη λειτουργία Έλεγχος στοιχείων ενώ το Chrome το καλεί Επιθεώρηση. Είτε έτσι είτε αλλιώς, είναι ένας τρόπος για το πρόγραμμα περιήγησης να εξετάσει πίσω από τη λάμψη του σχεδίου σας και να ρίξετε μια ματιά στον κώδικα που οδηγεί αυτό. Αυτή η λειτουργία είναι αρκετά γνωστή και χρησιμοποιείται πολύ. Αυτό που δεν είναι τόσο γνωστό είναι η δυνατότητα να κάνετε αλλαγές σε αυτόν τον κώδικα εν πτήσει.
Οποιαδήποτε αλλαγή κάνετε δεν θα αποθηκευτεί και δεν θα επηρεαστεί ζωντανά. Εάν δεν θέλετε να φορτώσετε τη σελίδα στο εργαλείο προγραμματιστή, αυτό είναι ένας τακτικός τρόπος για να πειραματιστείτε.
Επεξεργαστείτε οποιαδήποτε ιστοσελίδα στο πρόγραμμα περιήγησής σας
Το Dreamweaver και τα εργαλεία όπως το έχουν έναν ενσωματωμένο εξομοιωτή περιηγητή που προσομοιώνει τι θα εμφανιστεί ένα σχέδιο σε διαφορετικά προγράμματα περιήγησης. Όσο καλά είναι, δεν είναι πάντα ακριβείς και συχνά βρίσκετε κατά την εκτόξευση ενός ιστότοπου κάτι που φαινόταν φανταστικό στο εργαλείο προγραμματιστών σας φαίνεται ελαφρώς διαφορετικό σε ένα αυτόνομο πρόγραμμα περιήγησης.
Συνήθως θα ξεκινήσατε τον ιστότοπο σε έναν εσωτερικό διακομιστή ιστού και θα δοκιμάσετε σε ένα πρόγραμμα περιήγησης πριν ξεκινήσετε ζωντανά για αυτόν ακριβώς τον λόγο. Εάν μια σελίδα είναι ήδη ζωντανή ή απλώς θέλετε να δοκιμάσετε κάτι, δεν χρειάζεται να την αντιγράψετε και να την φορτώσετε στο αναπτυξιακό σας εργαλείο, μπορείτε απλά να χρησιμοποιήσετε το Εργαλείο προγραμματιστή του προγράμματος περιήγησης.
Χρησιμοποιώ τον Firefox για να σας δείξω πώς να το χρησιμοποιήσετε. Το Chrome είναι το ίδιο το ίδιο όμως.
- Ανοίξτε μια ιστοσελίδα με την οποία θέλετε να πειραματιστείτε στο πρόγραμμα περιήγησής σας.
- Κάντε δεξί κλικ οπουδήποτε στη σελίδα και επιλέξτε Έλεγχος.
Θα πρέπει να δείτε τη σελίδα σας να χωρίζεται σε δύο με ένα νέο παράθυρο που εμφανίζεται στο κάτω μέρος με κάποιο κωδικό σε αυτό. Αυτός ο κώδικας είναι η κινητήρια δύναμη της σελίδας που επιλέξατε. Διαφορετικά στοιχεία σελίδας είναι προσβάσιμα από τις καρτέλες στο πάνω μέρος της κάτω καρτέλας. Για παράδειγμα, βλέπουμε Επιθεωρητή, Κονσόλα, Debugger, Editor στυλ και ούτω καθεξής στον Firefox.
Εάν εκτελέσετε τον κέρσορα πάνω από τις γραμμές στο κάτω τμήμα του παραθύρου, θα δείτε διάφορα σημεία της σελίδας. Η γραμμή κώδικα που χρησιμοποιείτε κατά τη διάρκεια της επισήμανσης είναι ο κώδικας που επηρεάζει αυτό το τμήμα της σελίδας.
- Αν θέλετε να παίξετε γύρω από τον τρόπο εμφάνισης της σελίδας, δοκιμάστε τον επεξεργαστή στυλ.
- Αν θέλετε να παίξετε με τον τρόπο λειτουργίας της σελίδας, δοκιμάστε την Κονσόλα ή την Προσβασιμότητα.
- Αν θέλετε να ακυρώσετε σφάλματα ή να επιλύσετε ένα πρόβλημα, χρησιμοποιήστε την Κονσόλα ή το Debugger
Η απόδοση είναι χρήσιμη για την onsite SEO, αλλά η μνήμη, το δίκτυο και η αποθήκευση δεν χρησιμοποιούνται τόσο πολύ.
Θυμηθείτε, μπορείτε να μπείτε μέσα στα Εργαλεία για προγραμματιστές όσο θέλετε και δεν θα επηρεάσουν τον ιστότοπο. Οποιεσδήποτε αλλαγές γίνονται μόνο στον τρόπο εμφάνισης της σελίδας στο δικό σας πρόγραμμα περιήγησης, δεν επηρεάζετε τον ίδιο τον ιστότοπο. Αφού κλείσετε το εργαλείο, όλες οι αλλαγές χάνονται.
Πραγματοποίηση αλλαγών σε μια σελίδα
Τώρα γνωρίζετε ότι μπορείτε να αλλάξετε οτιδήποτε θέλετε χωρίς να επηρεάσετε τον πραγματικό ιστότοπο, ας είμαστε λίγο διασκεδαστικοί. Βρείτε ένα στοιχείο στη σελίδα που θέλετε να επεξεργαστείτε. Μπορείτε να αλλάξετε μια γραμματοσειρά, ένα χρώμα γραμματοσειράς, εικόνα φόντου ή ό, τι θέλετε. Για αυτό το παράδειγμα, θα αλλάξω το χρώμα γραμματοσειράς της επικεφαλίδας του banner.
- Κάντε δεξί κλικ στο ακριβές στοιχείο που θέλετε να αλλάξετε και επιλέξτε Έλεγχος.
- Επισημάνετε τη γραμμή με "τίτλο" ή "H1", ώστε το κείμενο να επισημαίνεται στο επάνω τμήμα του παραθύρου.
- Πλοηγηθείτε προς τα αριστερά δύο παράθυρα και βρείτε το χρώμα γραμματοσειράς.
- Αλλάξτε την τιμή σε κάτι διαφορετικό ή επιλέξτε τη χρωματική κουκκίδα για να χρησιμοποιήσετε έναν επιλογέα.
Η αλλαγή σας θα εμφανιστεί δυναμικά καθώς ολοκληρώσετε την αλλαγή. Μπορείτε να αλλάξετε το χρώμα, το μέγεθος, τη γραμματοσειρά, το φόντο και τα πάντα σχετικά με τη γραμματοσειρά. Δεν μπορείτε να αποθηκεύσετε την εργασία, αλλά οι αλλαγές σας θα παραμείνουν για αυτήν την περίοδο σύνδεσης.
Μπορείτε να αλλάξετε τα πάντα σχετικά με τη σελίδα που είναι ιδανική αν έχετε μια ιδέα και θέλετε να το ελέγξετε γρήγορα προτού ενεργοποιήσετε όλες τις εφαρμογές ανάπτυξης. Το μόνο που έχετε να κάνετε είναι να θυμηθείτε ποιες αλλαγές κάνατε και πού δεν μπορείτε να τις αποθηκεύσετε εδώ. Θα χρειαστεί να τραβήξετε ένα στιγμιότυπο οθόνης ή να καταγράψετε τις αλλαγές και να τις αντιγράψετε στα εργαλεία προγραμματιστών για να το κολλήσετε.
Η επεξεργασία μιας ιστοσελίδας στο πρόγραμμα περιήγησής σας είναι ένας εύκολος τρόπος να πειραματιστείτε ή να παίξετε με σελίδες. Είναι επίσης ένας καλός τρόπος για να μάθετε λίγο για την ανάπτυξη ιστού χωρίς να χρειάζεται να αγοράσετε σε ακριβά εργαλεία προγραμματιστών. Τώρα ξέρετε πώς, πηγαίνετε και να παίξετε!
