Δεν χρειάζεται να χρησιμοποιείτε μόνο WYSIWYG
Το Dreamweaver είναι ένας μεγάλος επεξεργαστής WYSIWYG , αλλά αν δεν ενδιαφέρεστε να γράφετε ιστοσελίδες σε ένα περιβάλλον "τι βλέπετε είναι αυτό που παίρνετε", μπορείτε ακόμα να χρησιμοποιήσετε το Dreamweaver επειδή είναι επίσης ένας μεγάλος επεξεργαστής κειμένου. Αλλά υπάρχουν πολλά χαρακτηριστικά που γλιστρούν από το παράθυρο μέσα στον επεξεργαστή κώδικα Dreamweaver επειδή η κύρια εστίαση είναι στην "έκδοση σχεδιασμού" ή στο τμήμα επεξεργασίας WYSIWYG του προϊόντος.
Πώς να φτάσετε στην προβολή κώδικα του Dreamweaver
Αν δεν έχετε χρησιμοποιήσει ποτέ το Dreamweaver ως επεξεργαστή HTML, προτού να μην έχετε παρατηρήσει ποτέ τα τρία κουμπιά στο πάνω μέρος της σελίδας: "Code", "Split" και "Design". Το Dreamweaver εκκινείται από προεπιλογή στο "Design view" ή WYSIWYG mode. Αλλά είναι εύκολο να μεταβείτε στην προβολή και επεξεργασία του κώδικα HTML. Απλά κάντε κλικ στο κουμπί "Κωδικός". Ή, μεταβείτε στο μενού Προβολή και επιλέξτε "Κωδικός".
Εάν απλώς μάθετε πώς να γράφετε HTML ή θέλετε να έχετε μια αίσθηση του πώς οι αλλαγές σας θα επηρεάσουν το έγγραφό σας, μπορείτε να ανοίξετε την προβολή κώδικα και την προβολή σχεδίου ταυτόχρονα. Η ομορφιά αυτής της μεθόδου είναι ότι μπορείτε να επεξεργαστείτε και στα δύο παράθυρα. Έτσι, μπορείτε να γράψετε τον κώδικα για την ετικέτα ετικέτας σας σε HTML και στη συνέχεια να χρησιμοποιήσετε την προβολή σχεδίασης για να την μετακινήσετε σε άλλη τοποθεσία στη σελίδα με μεταφορά και απόθεση.
Για να δείτε ταυτόχρονα, είτε:
- Κάντε κλικ στο κουμπί "Διαίρεση" (μεταξύ "Κωδικός" και "Σχεδίαση")
- Στο μενού Προβολή, επιλέξτε "Κωδικός και σχεδίαση"
Αφού εξοικειωθείτε με τη χρήση του Dreamweaver για να επεξεργαστείτε τον κώδικα HTML, μπορείτε να αλλάξετε τις προτιμήσεις σας για να ανοίξετε το Dreamweaver σε προβολή κώδικα από προεπιλογή. Ο ευκολότερος τρόπος είναι να αποθηκεύσετε την προβολή κώδικα ως χώρο εργασίας. Το Dreamweaver θα ανοίξει στον τελευταίο χώρο εργασίας που χρησιμοποιούσατε. Εάν δεν συμβαίνει, απλά πηγαίνετε στο μενού Παράθυρο και επιλέξτε το χώρο εργασίας που θέλετε.
Επιλογές προβολής κώδικα
Το Dreamweaver είναι τόσο ευέλικτο επειδή έχει τόσους πολλούς τρόπους να το προσαρμόσει και να το κάνει να λειτουργεί όπως το θέλετε. Στο παράθυρο επιλογών υπάρχουν χρωματισμοί κώδικα, μορφοποίηση κώδικα, υποδείξεις κώδικα και επιλογές επανεγγραφής κώδικα που μπορείτε να προσαρμόσετε. Αλλά μπορείτε επίσης να αλλάξετε κάποιες ειδικές επιλογές στην ίδια την προβολή κώδικα.
Μόλις δείτε την προβολή κώδικα, υπάρχει ένα κουμπί "Επιλογές προβολής" στη γραμμή εργαλείων. Μπορείτε επίσης να δείτε τις επιλογές μεταβαίνοντας στο μενού Προβολή και επιλέγοντας "Επιλογές προβολής κώδικα". Οι επιλογές είναι:
- Word Wrap - περιτυλίγει τον κώδικα HTML έτσι ώστε να μπορείτε να τον δείτε χωρίς οριζόντια κύλιση. Σημειώστε ότι αυτή η επιλογή δεν εισάγει οποιεσδήποτε αναφορές μεταφοράς στον κωδικό σας, εμφανίζει απλώς τον κώδικα έτσι ώστε να είναι ευκολότερη η ανάγνωση.
- Αριθμοί γραμμών - εμφανίζει αριθμούς γραμμών κατά μήκος της πλευράς του κώδικα. Εμφανίζει ένα σύμβολο περιτύλιξης γραμμής για γραμμές που τυλίγουν περισσότερο από το παράθυρο προβολής.
- Κρυμμένοι χαρακτήρες - εμφανίζει ειδικούς χαρακτήρες αντί για κενά που θα εμφανίζονταν σε μια ιστοσελίδα. Όπως μια τελεία αντικαθιστά ένα κενό, ένα διπλό βλήμα αντικαθιστά κάθε καρτέλα, και ένα δείκτη pilcrow ή σημείου παραγράφου αντικαθιστά κάθε διάλειμμα γραμμής.
- Επισημάνετε τον μη έγκυρο κωδικό - υπογραμμίζει το HTML που είναι εσφαλμένο με κίτρινο χρώμα. Αν επιλέξετε την κίτρινη ετικέτα, ο Επιθεωρητής ιδιότητας θα σας δώσει συμβουλές για το πώς να το διορθώσετε.
- Syntax Coloring - ενεργοποιεί ή απενεργοποιεί την έγχρωμη κωδικοποίηση του κωδικού σας. Αλλάζετε τα χρώματα της έγχρωμης κωδικοποίησης στην ενότητα χρωματισμού κωδικών των προτιμήσεων.
- Αυτόματη απόσπαση - κάνει την απόρριψη του κώδικα σας αυτόματα μετά την επιστροφή ενός καροτσιού αν ο κώδικας πάνω από αυτό είναι χαραγμένος. Μπορείτε να αλλάξετε το μέγεθος της εσοχής αλλάζοντας το μέγεθος της καρτέλας στην ενότητα μορφοποίησης κώδικα των προτιμήσεων.
Επεξεργασία κώδικα HTML στην προβολή κώδικα του Dreamweaver
Είναι εύκολο να επεξεργαστείτε κώδικα HTML στην προβολή κώδικα του Dreamweaver. Απλά ξεκινήστε να πληκτρολογείτε το HTML σας. Όμως, το Dreamweaver σας παρέχει μερικά πρόσθετα που το επεκτείνουν πέρα από έναν βασικό επεξεργαστή HTML. Όταν ξεκινάτε να γράφετε μια ετικέτα HTML, πληκτρολογείτε <. Εάν κάνετε παύση αμέσως μετά από αυτό το χαρακτήρα, το Dreamweaver θα σας εμφανίσει μια λίστα ετικετών HTML . Αυτές ονομάζονται συμβουλές κώδικα. Για να περιορίσετε την επιλογή, ξεκινήστε να πληκτρολογείτε γράμματα - το Dreamweaver θα περιορίσει την αναπτυσσόμενη λίστα στην ετικέτα που ταιριάζει με αυτό που πληκτρολογείτε.
Αν είστε νέοι στην HTML, μπορείτε να μετακινηθείτε στη λίστα των ετικετών HTML και να επιλέξετε διαφορετικές για να δείτε τι κάνουν. Το Dreamweaver θα συνεχίσει να σας ζητά τα χαρακτηριστικά μόλις έχετε πληκτρολογήσει μια ετικέτα. Για παράδειγμα, εάν πληκτρολογήσετε ".
Αλλά οι υποδείξεις κώδικα δεν τελειώνουν στις ετικέτες. Μπορείτε να χρησιμοποιήσετε συμβουλές κώδικα για να εισαγάγετε:
Αν οι συμβουλές κώδικα δεν εμφανίζονται, μπορείτε να πατήσετε το Ctrl-spacebar (Windows) ή το Cmd-spacebar (Macintosh) για να εμφανιστούν. Ο πιο συνηθισμένος λόγος για τον οποίο ενδεχομένως να μην εμφανίζεται μια υπαινιγμός κώδικα είναι εάν μεταβαίνετε σε διαφορετικό παράθυρο πριν τελειώσετε την ετικέτα σας. Επειδή το Dreamweaver αποκλείει την πληκτρολόγηση του χαρακτήρα <, αν αφήσετε το παράθυρο και επιστρέψετε, θα πρέπει να επανεκκινήσετε τις υποδείξεις κώδικα.
Μπορείτε να απενεργοποιήσετε το μενού συμβουλών κώδικα πιέζοντας το πλήκτρο διαφυγής.
Μόλις πληκτρολογήσετε την ετικέτα HTML που ανοίγει, θα πρέπει να την κλείσετε. Το Dreamweaver το κάνει με φυσικό τρόπο. Αν πληκτρολογήσετε την επιλογή "Κλείσιμο ετικετών" που ταιριάζει καλύτερα στις ανάγκες σας.
Εάν δεν είστε έτοιμοι να μεταβείτε στην επεξεργασία των σελίδων σας σε HTML, αλλά θέλετε να παρακολουθήσετε τον κώδικα όπως έχει γραφτεί, θα πρέπει να δοκιμάσετε τον επιθεωρητή κώδικα. Αυτό ανοίγει τον κώδικα HTML σε ξεχωριστό παράθυρο. Λειτουργεί ακριβώς όπως η προβολή κώδικα και, στην πραγματικότητα, είναι βασικά ένα αποσπώμενο παράθυρο προβολής κώδικα για το τρέχον έγγραφο. Για να ανοίξετε τον επιθεωρητή κώδικα, μεταβείτε στο μενού Παράθυρο και επιλέξτε "Επιθεωρητής κώδικα" ή πατήστε το πλήκτρο F10 στο πληκτρολόγιό σας.
Το Dreamweaver θα διαμορφώσει κώδικα HTML, ωστόσο θα θέλατε να εμφανίζεται. Για παράδειγμα, αν χρησιμοποιείτε 3 διαστήματα για να δώσετε εσοχή, αλλά ποτέ μην παύσετε τις ετικέτες IMG, μπορείτε να καθορίσετε αυτές τις πληροφορίες μορφοποίησης στις επιλογές επανεγγραφής κώδικα. Στη συνέχεια, μεταβείτε στο μενού εντολών και επιλέξτε "Εφαρμογή μορφοποίησης προέλευσης". Αυτός είναι ένας πολύ καλός τρόπος για να γράψετε κώδικα από κάποιον άλλο σε μορφή που σας είναι γνωστή.
Μια δυνατότητα που πολλοί κωδικοποιητές HTML δεν γνωρίζουν ή δεν χρησιμοποιούν είναι η δυνατότητα να συμπτύσσουν τον κώδικα HTML. Αυτό δεν αφαιρεί τις ετικέτες από το έγγραφο, αλλά απλώς τους αφαιρεί από την προβολή, έτσι ώστε να μην αποσπά την προσοχή σε αυτό που εργάζεστε. Για να συμπτύξετε τον κωδικό σας:
- Επιλέξτε το τμήμα του κώδικα που θέλετε να κρύψετε
- Στο μενού Επεξεργασία, επιλέξτε "Σύμπτυξη επιλογής" από το υπο-μενού "Σύμπτυξη κώδικα"
Ένας ευκολότερος τρόπος είναι να επιλέξετε τον κώδικα και στη συνέχεια να κάνετε κλικ στα εικονίδια κατάρρευσης του κώδικα που εμφανίζονται στην υδρορροή. Μπορείτε επίσης να κάνετε δεξί κλικ στον επιλεγμένο κωδικό και να επιλέξετε "Σύμπτυξη επιλογής".
Αν θέλετε να αποκρύψετε τα πάντα εκτός από αυτό που επισημαίνεται, επιλέξτε "Συρρίκνωση εξωτερικής επιλογής" σε οποιαδήποτε από τις παραπάνω μεθόδους.
Για να επεκτείνετε τον πτυσσόμενο κώδικα, απλά κάντε διπλό κλικ πάνω του. Αυτό ανοίγει τον κωδικό και το επιλέγει. Στη συνέχεια, μπορείτε να μετακινήσετε αυτήν την επιλογή ή να την διαγράψετε ή να προσθέσετε επιπλέον ετικέτες γύρω από αυτήν.
Μπορείτε να χρησιμοποιήσετε τη λειτουργία σύμπτυξης και επέκτασης όλη την ώρα σε σελίδες όπου δεν θέλετε να επεξεργαστείτε το εξωτερικό πρότυπο. Απλώς επιλέγετε την περιοχή περιεχομένου που θέλετε να επεξεργαστείτε και να συμπτύξετε έξω. Στη συνέχεια, γράψτε το HTML σας. Μπορείτε ακόμα να προβάλετε τη σελίδα στην προβολή Σχεδίαση ή να την προβάλετε σε ένα πρόγραμμα περιήγησης. Ο αναδιπλούμενος κώδικας δεν αφαιρείται από το έγγραφο, απλά κρύβεται από την προβολή. Μπορείτε επίσης να το χρησιμοποιήσετε όταν εργάζεστε σε μια σειρά αντικειμένων. Όταν τελειώσετε, καταρρίψτε το. Ξέρετε ότι τελειώσατε όταν δεν εμφανίζεται κανένας κώδικας.