10 Χρήσιμες Dreamweaver Συμβουλές & κόλπα για αρχάριους

Ένας χρήστης του Dreamweaver σίγουρα θα υπολογίζει τι είναι ένα powerhouse. Συσκευασμένα με τους τόνους των χαρακτηριστικών, των επιλογών και αμφισβητήσιμα ένα από τα πιο γνωστά IDE (Integrated Development Environment) στην σημερινή αγορά. Μπορεί να μην πληρούν τα κριτήρια που ορισμένοι προγραμματιστές απαίτησαν εντούτοις, το Dreamweaver προσφέρει αναμφισβήτητα ένα αξιοπρεπές φάσμα εργαλείων ανάπτυξης, συνεργασίας και κωδικοποίησης. Αυτές οι επιλογές και τα εργαλεία είναι κρυμμένα κάτω από τα στρώματα των δυσάρεστων λιγότερο διαισθητικών μενού, γι 'αυτό παρέχουμε tutorials στη σημερινή θέση.

Θα σας δείξουμε κάποιες από τις πιο ισχυρές λειτουργίες του Dreamweaver για να σας βοηθήσουμε γρήγορα να τις προσπελάσετε, μαζί με πολλά άλλα χρήσιμα κόλπα που θα σας λιπάνουν χρόνο ανάπτυξης και θα βελτιώσουν σημαντικά την ποιότητα του κώδικα σας. Πλήρης λίστα μετά από άλμα.

1. Δυναμική προβολή με “Ζωντανή μετάδοση”

Γνωρίζουμε ήδη ότι η DW προσφέρει μια στατική εικόνα των ανοικτών αρχείων μας, αλλά τι γίνεται "δυναμικές προβολές" μιας εφαρμογής όπως το WordPress?

Πρώτον, πρέπει να το κάνουμε λέγω DW ποιες είναι οι ρυθμίσεις που πρέπει να χρησιμοποιήσουμε για να παρουσιάσουμε τη δική μας"δυναμικές προβολές" σωστά. Για να το κάνετε αυτό, επιλέξτε Ρυθμίσεις αιτήματος HTTP από το Προβολή> Επιλογές ζωντανής προβολής , στη συνέχεια, εισαγάγετε το ΠΑΙΡΝΩ ή ΘΕΣΗ παραμέτρους που χρειάζεστε για να δείτε την εφαρμογή σας σωστά.

Στη συνέχεια μεταβαίνοντας σε Ζωντανή μετάδοση στο DW, αντικαθιστά το παλιό Προβολή σχεδίασης παράθυρο με μια ζωντανή, pixel-τέλεια WebKit απόδοση της σελίδας σας? με ζωντανές επεμβάσεις Javascript, DOM, ερωτήματα βάσης δεδομένων, κώδικα διακομιστή και rendered CSS, αντί για τα εικονίδια κράτησης θέσης που βλέπετε Προβολή σχεδίασης.

2. "Πλοηγός κώδικα" είναι το Firebug της DW

Το να το κάνουμε ένα βήμα παραπέρα αφορά το Κωδικοποιητής πλοήγησης και όταν βρίσκεστε στο Ζωντανή μετάδοση παράθυρο, κάνοντας κλικ ALT (Command-Option-κλικ για Mac) οπουδήποτε στο παράθυρο, παρουσιάζει αμέσως τον κώδικα που δημιούργησε αυτό το στοιχείο. Παρόμοια με αυτά που μπορείτε να δείτε αυτή τη στιγμή στο Firefox / Firebug.

3. Ψάχνοντας το JavaScript

Λόγω της δυναμικής φύσης του Ajax, πολλές φορές χρειάζεται να αλληλεπιδράσουμε με μια σελίδα όπου κάποια στοιχεία δεν εμφανίζονται ή διατίθενται στη φόρτωση της πρώτης σελίδας. Αυτά είναι τα στοιχεία που εισάγονται στη σελίδα κάποια στιγμή μετά τη φόρτωση της σελίδας. Ακολουθεί ένα παράδειγμα:

Ίσως θελήσετε να αλλάξετε το στυλ μιας συμβουλή εργαλείου που εφαρμόζεται πλήρως στο JavaScript. Πριν από σήμερα, θα πρέπει να αναζητήσετε μεθοδικά το δρόμο σας μέσα από τα σενάρια σας για να βρείτε τι δημιουργείται και πού.

Αντ 'αυτού, δοκιμάστε αυτό:

Ρυθμίστε τη σελίδα σας μέσα Ζωντανή μετάδοση, τότε χτυπήστε F6 να Freeze JavaScript οποιαδήποτε στιγμή, επιτρέποντάς σας να στοχεύσετε και να αναλύσετε τον κώδικα που σχετίζεται με οποιοδήποτε δυναμικό στοιχείο στη σελίδα.

4. Επόμενος καλύτερος φίλος της Live View - "Live Code"

Οταν χρησιμοποιείτε Ζωντανή μετάδοση, μπορείτε επίσης να ενεργοποιήσετε Live Code. Live Code θα ενημερώσετε τον κώδικα σας καθώς αιωρείτε, κάνετε κλικ και αλληλεπιδράτε με στοιχεία και αντικείμενα στο Παράθυρο Live View!

5. Αυτόματη συμπλήρωση JavaScript

Το Dreamweaver έρχεται με έξυπνη και ολοκληρωμένη ολοκλήρωση κώδικα HTML και CSS, αλλά τι γίνεται με Javascripts? Εάν κωδικοποιήσετε το jQuery ή το Πρωτότυπο στο Dreamweaver, τότε πρέπει να ξέρετε ότι υπάρχουν επεκτάσεις API που παρέχουν συμπλήρωση κώδικα Javascript. Μειώνει την απαιτούμενη πληκτρολόγηση και μπορεί να έρθει σε πολύ βολικό για τους γρήγορους κωδικοποιητές.

Κάντε κλικ εδώ για να διαβάσετε περισσότερα ή κάντε λήψη:

• jQuery επέκταση API για το Dreamweaver
• Πρωτότυπο επέκταση API για το Dreamweaver

6. Καλλιεργήστε τους κώδικες στη μύγα

Η κωδικοσελίδα σας μοιάζει με ανοργάνωτες, ακατάστατες γραμμές κώδικα; Χρησιμοποιήστε το Εφαρμογή μορφοποίησης προέλευσης χαρακτηριστικό και να το αναδιαμορφώσετε ακριβώς στις προτιμήσεις σας. Για να τα καθαρίσετε γρήγορα, κάντε κλικ στο Διαμόρφωση πηγαίου κώδικα εικονίδιο στο κάτω μέρος του Γραμμή εργαλείων κωδικοποίησης (Επεξεργασία> Γραμμές εργαλείων> Κωδικοποίηση) και επιλέξτε Ρυθμίσεις μορφοποίησης κώδικα για να ορίσετε την προτιμώμενη μορφοποίηση.

Μπορείτε επίσης να έχετε πρόσβαση στην επιλογή μορφοποίησης από Εντολές> Εφαρμογή μορφοποίησης προέλευσης ή να το εφαρμόσετε μόνο σε ένα επιλεγμένο μπλοκ κώδικα επιλέγοντας το Εφαρμογή μορφοποίησης προέλευσης στην επιλογή επιλογή.

7. Αποκτήστε widgety

Απλά κάντε κλικ στο Επεκτείνετε το εικονίδιο του Dreamweaver (μοιάζει με εργαλεία) στη γραμμή εφαρμογής και επιλέξτε Περιηγηθείτε σε Widgets στο Web. Αυτό θα σας μεταφέρει στο Adobe Exchange όπου μπορείτε να βρείτε επιπλέον widgets από προμηθευτές όπως το Yahoo !, JQuery και πολλοί άλλοι.

8. Subversion & Dreamweaver

Και ναι, το Dreamweaver υποστηρίζει το Subversion (SVN). Για τους προγραμματιστές που χρησιμοποιούν το SVN για να διατηρήσουν τον έλεγχο αναθεώρησης του έργου τους, αυτό θα μπορούσε να είναι μια καλή είδηση. Ο προγραμματιστής του Dreamweaver Andrew Voltmer συζητά πώς μπορείτε να χρησιμοποιήσετε το Subversions με το Dreamweaver.

9. Δεν υπάρχουν πλέον περιττές στυλ

Πολλοί άνθρωποι χρησιμοποιούν το Dreamweaver ως έναν τρόπο ενημέρωσης του περιεχομένου οπτικά, όπως ένας επεξεργαστής κειμένου. Πριν από το Dreamweaver CS4, αυτό θα μπορούσε να οδηγήσει σε περιττούς κανόνες CSS όπως .class1, .class2, και ούτω καθεξής. Στο Dreamweaver CS4, απλά αλλάξτε το Ιδιοκτήτης ακινήτων προς το HTML (κάντε κλικ στο εικονίδιο HTML στα αριστερά του Επιθεωρητή) και θα πείτε αντίο σε όλα αυτά τα πλεονάζοντα CSS, εισάγοντας μόνο την κατάλληλη σήμανση HTML.

10. Η επικύρωση της φόρμας έγινε εύκολη

Θέλετε να επικυρώσετε τα πεδία φόρμας σας, αλλά ανησυχώντας ότι θα πρέπει να ξαναχτίσουμε από την αρχή; Μην ανησυχείς. Απλά επιλέξτε ένα υπάρχον στοιχείο φόρμας, όπως ένα πεδίο κειμένου, και εφαρμόστε ένα Spri Validation widget από το Εισαγωγή> Μενού Spry. Στη συνέχεια, ελέγξτε τις απαιτήσεις επικύρωσης, όπως ελάχιστοι ή μέγιστοι χαρακτήρες απευθείας από το Ιδιοκτήτης ακινήτων.

Μπόνους: 3 επιπλέον

11. Πρόσβαση σε σχετικά αρχεία Εύκολα

Όταν ανοίγετε ένα αρχείο HTML ή PHP, θα δείτε τώρα μια σειρά εξαρτημένων ονομάτων αρχείων, όπως το CSS, το Javascript και ακόμη και τα αρχεία που περιλαμβάνονται για την PHP, στην κορυφή του παραθύρου του εγγράφου. Μπορείτε εύκολα να μεταβείτε σε αυτά τα αρχεία, να κάνετε αλλαγές και να τα αποθηκεύσετε, όλα χωρίς να τα ανοίξετε. Όταν κάνετε κλικ σε οποιοδήποτε αρχείο στη γραμμή Σχετικά αρχεία, θα δείτε την πηγή του στην προβολή Κώδικας και τη γονική σελίδα στην προβολή σχεδίασης. Ή χρησιμοποιήστε τον Navigator Code για γρήγορη πρόσβαση στον πηγαίο κώδικα CSS που επηρεάζει την τρέχουσα επιλογή σας.

12. Ελέγξτε τη συμβατότητα των προγραμμάτων περιήγησης

Ανοίξτε το έγγραφο που θέλετε να ελέγξετε για συμβατότητα. από την ίδια γραμμή μενού όπου εμφανίζονται οι προβολές Κώδικας / Διαίρεση / Σχεδίαση, κοιτάξτε προς τα δεξιά για 'Ελέγξτε τη σελίδα'κουμπί.

Κάνοντας κλικ σε αυτό θα επεκταθεί ένα αναπτυσσόμενο μενού, επιλέξτε 'Ελέγξτε τη συμβατότητα του προγράμματος περιήγησης'. ο Παράθυρο αποτελεσμάτων συμβατότητας προγράμματος περιήγησης θα εμφανιστεί στο κάτω μέρος του παραθύρου με οποιαδήποτε θέματα που πρέπει να αντιμετωπίσετε.

Σημείωση: Αυτό ΔΕΝ θα ελέγχει τις νέες εκδόσεις του IE σε Mac! Για να επιλέξετε ποια προγράμματα περιήγησης θα χρησιμοποιηθούν για έλεγχο, επιλέξτε Ελέγξτε τη σελίδα > Ρυθμίσεις από το μενού.

13. Προεπισκόπηση PHP σελίδες

Το Dreamweaver σάς επιτρέπει να εκτελέσετε και να δείτε προεπισκόπηση κώδικα PHP μέσα στο λογισμικό. Δείτε πώς μπορείτε να το εγκαταστήσετε.

Ξεκινώντας

1. Πρώτα, επιλέξτε Ιστοσελίδα -> Νέα τοποθεσία από την επάνω πλοήγηση.
2. Θα δείτε και τα δύο Βασικός και Προηγμένος ορισμός τοποθεσίας καρτέλες επιλογής. Ας προχωρήσουμε επιλέγοντας το Σύνθετη καρτέλα Ορισμός τοποθεσίας.
3. Εισαγάγετε ένα όνομα φακέλου για τον ιστότοπο στο κατάλληλο πλαίσιο (για αυτό το παράδειγμα θα χρησιμοποιήσουμε το όνομα "myphp" ως όνομα φακέλου).
4. Δημιουργήστε ένα άλλο φάκελο που ονομάζεται "εικόνες", εισάγοντας το όνομά του στο πεδίο "Προεπιλεγμένες εικόνες".
5. Σύμφωνα με το Τοπικές πληροφορίες, εισάγετε τις ακόλουθες τιμές στα πεδία:
   • Ονομα ιστοσελίδας: το όνομα του ιστότοπου. Να χρησιμοποιείται μόνο στο Dreamweaver
   • Τοπικός φάκελος ριζικού: Αυτό είναι το όνομα του ιστότοπου στον οποίο θα εργάζεστε. Βεβαιωθείτε ότι ονομάζετε ιστότοπους κατά τρόπο ώστε να ελαχιστοποιείτε τις συγκρούσεις ή τα συγχέοντας ονόματα.
   • Ο φάκελος προεπιλεγμένων εικόνων: Αυτό είναι προαιρετικό, αλλά συνιστάται να το δημιουργήσετε τώρα καθώς οι περισσότεροι ιστότοποι θα χρησιμοποιήσουν τις εικόνες σε κάποιο βαθμό. Αυτό είναι όπου η DW θα "κοιτάξει" να εισαγάγει εικόνες στα έγγραφά σας κατά τη διάρκεια της φάσης κωδικοποίησης.
   • Σύνδεσμοι Σχετικά με: Ορίζει τον τρόπο χειρισμού του συνδέσμου εγγράφων στο Dreamweaver. Μπορείτε να επιλέξετε είτε Document είτε Root. Οι διαφορές μεταξύ των δύο είναι:
     • Σχετικό έγγραφο - Θα εισαγάγει μια διαδρομή σχετικά με το αρχείο που εργάζεστε και το στοιχείο στο οποίο συνδέεται.
     • Root Relative - Χρησιμοποιεί / που προκαλεί τη σύνδεση του εγγράφου / αρχείου σε σχέση με το φάκελο ROOT.
     • Μια άλλη εναλλακτική λύση είναι να προσθέσετε κάποια διαμόρφωση στα αρχεία διαμόρφωσης του διακομιστή. Όντας πιο προχωρημένο καθήκον, θα επιμείνουμε στο να χρησιμοποιούμε σχετικό έγγραφο για τώρα.
   • Διεύθυνση HTTP: εισάγετε τον ριζικό φάκελο του ιστότοπου για το έργο σας
   • Ευαίσθητες συνδέσεις: Το Dreamweaver θα ελέγξει αν οποιοδήποτε αρχείο στο έργο μπορεί να έχει πρόβλημα που σχετίζεται με την περίπτωση κατά τη φόρτωση στο διακομιστή. Οι ειδοποιήσεις θα εμφανίζονται όταν χρησιμοποιείτε: Site -> Check Links Sitewide. Μπορείτε να το αφήσετε να ελεγχθεί αν θέλετε. Εγώ προσωπικά δεν το αφήνετε να ελεγχθεί καθώς πάντα τα αρχεία με μικρά γράμματα. Μεγάλο γράμμα δεν συνιστάται.
   • Κρύπτη: Επιλέξτε Έχει ενεργοποιηθεί η προσωρινή μνήμη.
6. Στο Απομακρυσμένες πληροφορίες , είτε ρυθμίστε την πρόσβαση FTP ή άλλη πρόσβαση σε έναν απομακρυσμένο διακομιστή είτε αφήστε το Access to None.
7. Στο Δοκιμή διακομιστή επιλέξτε την επιλογή που σχετίζεται με τον τύπο / το σύστημα αρχείου που θα δοκιμάσετε.
8. Έλεγχος έκδοσης δεν θα χρησιμοποιηθεί για αυτό το παράδειγμα, ώστε να μπορείτε να το αφήσετε κενό, εκτός εάν το γνωρίζετε.
9. Κάλυψη σας επιτρέπει να τοποθετήσετε τα αρχεία .psd, .fla και άλλα αρχεία προέλευσης στο φάκελο των τοποθεσιών σας και η DW θα τα αγνοήσει κατά τη μεταφόρτωση / ενημέρωση του ιστότοπού σας.
10. Σημειώσεις σχεδίασης είναι ιδανικά για μια ομάδα σχεδιασμού ιστοσελίδων καθώς διατηρεί υπό σημείωση τις αλλαγές που έγιναν στα αρχεία. Ελέγχεται από προεπιλογή και είναι καλό για μας να χρησιμοποιήσουμε αυτόν τον τρόπο.
11. Αδεια Στήλη προβολής αρχείου, Συμβάλλει, και Πρότυπα ως προεπιλογή.
12. ο Ευκίνητος η σελίδα δείχνει απλώς το φάκελο "Spry assets" που περιλαμβάνεται αυτόματα με το Dreamweaver. Δεν υπάρχει λόγος να αλλάξετε αυτό το θέμα. Μόλις ολοκληρωθεί κάθε ρύθμιση, κάντε κλικ στην επιλογή Εντάξει.

Προεπισκόπηση PHP στο Dreamweaver

Τώρα ανοίξτε ένα αρχείο PHP και κάντε τις απαραίτητες αλλαγές σε αυτό. Για να δείτε αυτό το αρχείο στο Dreamweaver απλά πατήστε F12 και τα αποτελέσματα θα εμφανίζονται στο προεπιλεγμένο πρόγραμμα περιήγησης. Μπορείτε να αλλάξετε ποιο πρόγραμμα περιήγησης χρησιμοποιείται Επεξεργασία -> Προτιμήσεις -> Προεπισκόπηση στο πρόγραμμα περιήγησης. Αυτό επιτρέπει έναν ταχύτερο χρόνο επεξεργασίας-προεπισκόπησης, εξαλείφει την ανάγκη πληκτρολόγησης μεγάλων διευθύνσεων URL στη γραμμή του προγράμματος περιήγησης ή τη χρήση άλλου λογισμικού διακομιστή για την απόδοση των αρχείων PHP, τα οποία εξοικονομούν χρόνο!

Αυτό είναι όλο. Happy Dreamweaver'ing :-)

Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Jesse Matlock για το Hongkiat.com. Για τα τελευταία 6 χρόνια, ο Jesse βυθίζεται στον σχεδιασμό του UI, στην ανάπτυξη εφαρμογών και στις τάσεις του ιστού. Είναι ο ιδρυτής και το σχεδιαστικό προβάδισμα για μια μικρή, αν και πολύ ταλαντούχα ομάδα ανάπτυξης, η οποία επικεντρώνεται στην ανάπτυξη προσαρμοσμένων εφαρμογών.