ΠΕΡΙΕΧΟΜΕΝΑ Εισαγωγή...11 Κεφάλαιο 1: Προσθήκη πινάκων...15 Δημιουργία διάταξης χωρίς πίνακες... 16 Δημιουργία πίνακα... 18 Επιλογή στοιχείων πίνακα... 23 Χρήση κατάστασης Διευρυμένων πινάκων για επιλογή... 25 Προσθήκη γραμμών και στηλών... 27 Συγχώνευση και διαίρεση κελιών... 30 Αλλαγή μεγέθους στοιχείων πίνακα... 31 Διαγραφή στοιχείων πίνακα... 34 Καθορισμός στοίχισης πίνακα... 35 Καθορισμός ιδιοτήτων κελιού... 36 Ταξινόμηση περιεχομένων πίνακα... 38 Μορφοποίηση πινάκων... 40 Εισαγωγή και εξαγωγή πινακοποιημένων δεδομένων... 41 Κεφάλαιο 2: Χρήση φορμών και πεδίων...45 Προσθήκη φόρμας σε σελίδα... 46 Προσθήκη πεδίων κειμένου... 48 Προσθήκη περιοχής κειμένου... 52 Προσθήκη πλαισίων ελέγχου... 53 Προσθήκη πεδιοσυνόλου... 54 Προσθήκη ομάδας ραδιοπλήκτρων... 55 Προσθήκη λίστας ή μενού... 58 Προσθήκη κουμπιού... 62 Κεφάλαιο 3: Προσθήκη πλαισίων...65 Τρόπος λειτουργίας των πλαισίων... 66 Δημιουργία πλαισιοσυνόλου... 69 Χρήση του πάνελ Frames... 73 7
Περιεχόμενα Προσθήκη σελίδων σε πλαίσια... 79 Αποθήκευση πλαισιοσυνόλων και πλαισίων... 82 Σύνδεσμοι ως προορισμοί πλαισίων... 85 Προσθήκη περιεχομένου χωρίς πλαίσια... 87 Κεφάλαιο 4: Χρήση συμπεριφορών και αντικειμένων πλοήγησης... 89 Χρήση του πάνελ Behaviors... 91 Προσθήκη εφέ εναλλαγής... 96 Προσθήκη γραμμών πλοήγησης... 98 Τροποποίηση γραμμής πλοήγησης... 101 Άνοιγμα νέου παραθύρου φυλλομετρητή... 104 Αναζήτηση συνδεόμενων υπομονάδων... 107 Χρήση μενού μετάβασης... 109 Επικύρωση φορμών... 112 Προσθήκη αναδυόμενων μενού του Fireworks... 114 Κεφάλαιο 5: Δημιουργία δυναμικών σελίδων με τη βιβλιοθήκη Spry... 117 Τι είναι η βιβλιοθήκη Spry;... 118 Προσθήκη στοιχείων Spry... 120 Χρήση του στοιχείου διασύνδεσης γραμμής μενού... 122 Χρήση του στοιχείου διασύνδεσης πάνελ με καρτέλες... 126 Χρήση του στοιχείου διασύνδεσης πολύπτυχου... 128 Χρήση του στοιχείου διασύνδεσης πτυσσόμενου πάνελ... 130 Επικύρωση φορμών με τη βιβλιοθήκη Spry... 132 Προσθήκη συμβουλών οθόνης Spry... 137 Προσθήκη εφέ Spry... 139 Κεφάλαιο 6: Απλοποιήστε τη ζωή σας: χρήση προτύπων, βιβλιοθηκών, και τεμαχιδίων... 143 Δημιουργία προτύπου... 145 Προσθήκη επεξεργάσιμων περιοχών... 147 Αφαίρεση επεξεργάσιμων περιοχών... 149 Δημιουργία σελίδων με βάση πρότυπο... 150 Τροποποίηση προτύπου... 152 Δημιουργία στοιχείου Βιβλιοθήκης... 155 Χρήση στοιχείου Βιβλιοθήκης... 157 Επεξεργασία στοιχείου Βιβλιοθήκης... 158 Χειρισμός στοιχείων Βιβλιοθήκης στον Επιθεωρητή Ιδιοτήτων... 161 Χρήση τεμαχιδίων του Dreamweaver... 163 Κεφάλαιο 7: Χρήση άλλων εφαρμογών... 167 Καθορισμός εξωτερικών προγραμμάτων επεξεργασίας... 168 Επεξεργασία εικόνων με το Fireworks... 171 8
Περιεχόμενα Χρήση του Adobe Bridge... 176 Καθαρισμός εγγράφων HTML του Word... 178 Χρήση περιεχομένου από το Excel... 180 Χρήση του Contribute... 183 Χρήση της υπηρεσίας InContext Editing... 187 Χρήση του Κέντρου συσκευών... 191 Κεφάλαιο 8: Επεξεργασία κώδικα...193 Χρήση της γραμμής εργαλείων Coding... 194 Χρήση της προβολής Διαίρεσης... 200 Χρήση της Ενεργού προβολής κώδικα... 204 Χρήση του Γρήγορου διορθωτή ετικετών... 206 Χρήση του Διορθωτή ετικετών... 208 Χρήση του Επιλογέα ετικετών... 209 Σύμπτυξη κώδικα... 211 Χρήση υποδείξεων κώδικα... 214 Χρήση του Επιθεωρητή Ετικετών... 216 Χρήση του Εξαγωγέα JavaScript... 218 Χρήση της καρτέλας Code Reference... 220 Επικύρωση κώδικα... 222 Χρήση εξωτερικού διορθωτή... 226 Κεφάλαιο 9: Διαχείριση της τοποθεσίας σας...231 Πρόβλεψη της επέκτασης της τοποθεσίας... 232 Επέκταση του πάνελ Files... 233 Διευθέτηση παραλαβής και παράδοσης... 237 Παράδοση και παραλαβή αρχείων... 240 Χρήση Σημειώσεων σχεδίασης... 242 Διευθέτηση του συστήματος Subversion... 245 Δημιουργία αναφορών τοποθεσίας... 247 Έλεγχος για προβληματικούς συνδέσμους... 249 Εντοπισμός εξωτερικών συνδέσμων και ορφανών αρχείων... 250 Έλεγχος συμβατότητας φυλλομετρητή... 251 Διαγραφή τοποθεσιών... 254 Εξαγωγή και εισαγωγή ορισμών τοποθεσιών... 255 Παράρτημα A: Περισσότερες πληροφορίες...259 Τοποθεσίες Ιστού... 260 Άλλοι πόροι στο Διαδίκτυο... 263 Άλλα βιβλία για το Dreamweaver... 265 Βιβλία για τη σχεδίαση ιστοσελίδων και για την JavaScript... 266 9
Περιεχόμενα Παράρτημα Β: Προσαρμογή και επέκταση του Dreamweaver... 267 Προσαρμογή των πλήκτρων συντόμευσης... 268 Εύρεση και εγκατάσταση επεκτάσεων... 272 Παράρτημα Γ: Οδηγός Φύλλων Επάλληλων Στυλ... 275 Ευρετήριο... 283 Περιεχόμενα βιβλίου Dreamweaver CS4 για Windows και Macintosh με εικόνες Μέρος Ι: Εισαγωγή Εισαγωγή... 11 Κεφάλαιο 1: Εισαγωγή στο Dreamweaver... 15 Κεφάλαιο 2: Η πρώτη σας τοποθεσία Ιστού... 47 Κεφάλαιο 3: Δημιουργία της πρώτης σας σελίδας... 73 Κεφάλαιο 4: Προσθήκη κειμένου στις σελίδες σας... 101 Κεφάλαιο 5: Προσθήκη εικόνων και πολυμέσων... 143 Κεφάλαιο 6: Εργασία με συνδέσμους... 179 Κεφάλαιο 7: Μορφοποίηση περιεχομένου σελίδας... 197 Κεφάλαιο 8: Τοποθέτηση περιεχομένου σελίδας... 233 Κεφάλαιο 9: Διαχείριση στυλ... 269 Ευρετήριο... 285 10
ΠΡΟΣΘΗΚΗ ΠΙΝΑΚΩΝ Θα χρησιμοποιήσετε συχνά πίνακες σε ιστοσελίδες για την παρουσίαση πινακοποιημένων πληροφοριών δηλαδή δεδομένων που παρουσιάζονται καλύτερα με τη μορφή γραμμών και στηλών. Μπορείτε επίσης να χρησιμοποιήσετε πίνακες για τη δημιουργία της διάταξης δηλαδή για τη στοίχιση κειμένου και εικόνων στη σελίδα αλλά όπως θα διαπιστώσετε αργότερα σε αυτό το κεφάλαιο, στις περισσότερες περιπτώσεις πρέπει να χρησιμοποιείτε CSS για τη διάταξη. Στο παρόν κεφάλαιο, θα μάθετε να δημιουργείτε και να μορφοποιείτε πίνακες, να διασφαλίζετε ότι οι πίνακες και τα περιεχόμενά τους θα έχουν την εμφάνιση που θέλετε, να χρησιμοποιείτε τα διάφορα εργαλεία πινάκων του Dreamweaver, και να ε- ξοικονομείτε χρόνο όταν χρησιμοποιείτε πίνακες. 15
Κεφάλαιο 1 Δημιουργία διάταξης χωρίς πίνακες Οι πίνακες χρησιμοποιούνται ευρέως ως μηχανισμοί διάταξης (μερικές φορές αποκαλούνται πίνακες διάταξης). Μπορείτε να δημιουργήσετε πίνακες στη σελίδα σας, ώστε τα κελιά τους να περιέχουν το κείμενο και τις εικόνες της σελίδας. Επειδή ε- λέγχετε ικανοποιητικά το μέγεθος των κελιών και τη θέση των περιγραμμάτων τους, είστε σε θέση να στοιχίσετε και να διατάξετε τα στοιχεία της σελίδας με ακρίβεια, αν και συχνά είναι απαραίτητο να δημιουργήσετε εξαιρετικά πολύπλοκους πίνακες. Κρύβοντας τα περιγράμματα των κελιών, κάνετε αόρατους τους πίνακες για τον επισκέπτη της τοποθεσίας Ιστού. Εδώ και κάποια χρόνια, οι περισσότερες καλοσχεδιασμένες ιστοσελίδες που βλέπετε είναι δημιουργημένες με αυτόν τον τρόπο. Όμως, η χρήση πινάκων για τη δημιουργία της διάταξης παρουσιάζει πολλά προβλήματα. Καταρχήν, ο πίνακας δεν έχει καμία σχέση με το περιεχόμενο της σελίδας (τις πληροφορίες που βλέπει ο επισκέπτης σας) το μόνο που κάνει είναι να επηρεάζει την παρουσίαση του περιεχομένου. Ένα από τα μεγαλύτερα πλεονεκτήματα των CSS είναι ότι διαχωρίζουν το περιεχόμενο από την παρουσίαση. Το αποτέλεσμα είναι ότι μπορείτε να αλλάξετε τελείως τη σχεδίαση τοποθεσιών Ιστού που βασίζονται σε CSS αλλάζοντας ένα αρχείο στις περισσότερες περιπτώσεις. Αν η παρουσίασή σας αναμιγνύεται με το περιεχόμενο, όπως στη βασισμένη σε πίνακες διάταξη, η αλλαγή της σχεδίασης της τοποθεσίας Ιστού γίνεται δύσκολη και δαπανηρή. Παρόμοια, οι πίνακες δυσκολεύουν τη διατήρηση της οπτικής συνέπειας σε ολόκληρη την τοποθεσία (επειδή οι πίνακες διάταξης στις διαφορετικές σελίδες ενδέχεται να μην είναι ίδιοι). 16
Προσθήκη πινάκων Αυτό λοιπόν είναι το πρόβλημα με τους πίνακες από την οπτική γωνία του σχεδιαστή ιστοσελίδων, αλλά υπάρχουν προβλήματα και για τον επισκέπτη της τοποθεσίας. Οι πίνακες αυξάνουν υπερβολικά το μέγεθος μιας σελίδας HTML (γεγονός που προκαλεί επιπλέον χρεώσεις για το εύρος ζώνης), και οι επισκέπτες πρέπει να κατεβάζουν τους πίνακες διάταξης σε κάθε σελίδα της τοποθεσίας που επισκέπτονται (δηλαδή κατεβάζουν συνεχώς το ίδιο πράγμα). Οι σελίδες φορτώνονται πιο αργά σε σύγκριση με μια βασισμένη σε CSS διάταξη, και αυτό αποθαρρύνει τους επισκέπτες. Η ανάγνωση σελίδων που βασίζονται σε πίνακες είναι πολύ πιο δύσκολη για τους χρήστες με ειδικές ανάγκες και για τους επισκέπτες που χρησιμοποιούν κινητά τηλέφωνα και PDA. Οι πίνακες ήταν απαραίτητοι για να έχουν οι τοποθεσίες Ιστού ωραία εμφάνιση μέχρι το 1997, επειδή οι φυλλομετρητές της εποχής είχαν πολλούς περιορισμούς, ένας από τους οποίους ήταν ότι δεν υποστήριζαν τα αναδυόμενα τότε πρότυπα CSS για τη δημιουργία της διάταξης. Όμως, όλοι οι σύγχρονοι φυλλομετρητές υποστηρίζουν σε ικανοποιητικό βαθμό τη χρήση CSS για τη διάταξη (αν και η ειρωνεία είναι ότι ένας από τους δημοφιλείς φυλλομετρητές κατά το χρόνο συγγραφής του βιβλίου, ο Microsoft Internet Explorer 6 για τα Windows, υστερεί σημαντικά σε σχέση με άλλους φυλλομετρητές, όπως οι Internet Explorer 7 και 8, Mozilla Firefox, Apple Safari, και Opera). Η μεγάλη πλειονότητα των χρηστών του Ιστού χρησιμοποιούν πλέον φυλλομετρητές Ιστού που μπορούν να χειριστούν σωστά τις βασισμένες σε CSS διατάξεις. Συνεπώς, μπορείτε (και πρέπει!) να χρησιμοποιείτε το Dreamweaver για να κατασκευάσετε ωραίες, βασισμένες σε CSS τοποθεσίες που φορτώνονται πιο γρήγορα, είναι προσπελάσιμες από όλους, και μπορούν να τροποποιηθούν και να συντηρηθούν πιο εύκολα. Για περισσότερες πληροφορίες σχετικά με τη δημιουργία της διάταξης των σελίδων σας με τη χρήση CSS, δείτε το Κεφάλαιο 8 του Μέρους Ι: Εισαγωγή. Επειδή η βασισμένη σε πίνακες διάταξη κυριάρχησε τόσο πολύ για περίπου μία δεκαετία, το Dreamweaver εξακολουθεί να σας δίνει τη δυνατότητα να δημιουργήσετε διατάξεις σελίδας με πίνακες. Όμως, στο Dreamweaver CS4 καταργήθηκε ένα σύνολο εργαλείων με το όνομα Table Layout Mode (Κατάσταση διάταξης πίνακα), το οποίο διευκόλυνε τη χρήση πινάκων για διάταξη. Η Adobe συνιστά σαφώς στους χρήστες να χρησιμοποιούν CSS για τη δημιουργία της διάταξης. Παρεμπιπτόντως, ακόμα και αν κάποια τοποθεσία χρησιμοποιεί πίνακες για τη διάταξη, μπορείτε να χρησιμοποιήσετε CSS για να μορφοποιήσετε το κείμενο μέσα στους πίνακες. Ένα μέρος της σήμανσης των CSS είναι αφιερωμένο στη δημιουργία στυλ για το κείμενο, και ένα άλλο μέρος στην τοποθέτηση των στοιχείων στη σελίδα. Μπορείτε να χρησιμοποιήσετε το μέρος της δημιουργίας στυλ ώστε το κείμενό σας να έχει ωραία εμφάνιση, α- κόμη και μέσα σε έναν πίνακα. Απλώς, δεν πρέπει να αναμιγνύετε με τους πίνακες τα στοιχεία των CSS που αφορούν την τοποθέτηση επιλέξτε τη μια μέθοδο ή την άλλη για την τοποθέτηση των στοιχείων στις σελίδες σας. Η χρήση CSS για τη διάταξη επιτρέπει στους πίνακες να επιστρέψουν στον αρχικό σκοπό τους, δηλαδή την εμφάνιση πινακοποιημένων πληροφοριών που στοιχίζονται σε γραμμές και στήλες. Σκεφθείτε έναν πίνακα σκορ για το μπάσκετ, ή έναν πίνακα με τα δρομολόγια των λεωφορείων και οι δύο είναι τέλειοι υποψήφιοι. 17
Κεφάλαιο 1 Δημιουργία πίνακα Οι πίνακες αποτελούνται συνήθως από μία ή περισσότερες γραμμές και μία ή περισσότερες στήλες. Κάθε ορθογώνια περιοχή που σχηματίζεται από την τομή μιας γραμμής με μια στήλη ονομάζεται κελί (cell). Τα κελιά περιέχουν το κείμενο ή τις εικόνες της σελίδας, και τα στοιχεία μέσα σε ένα κελί δεν μπορούν να εκτείνονται πέρα από τα όρια του κελιού. Μπορείτε να προσθέσετε έναν πίνακα σε οποιαδήποτε θέση της σελίδας, ακόμη και μέσα σε έναν άλλο πίνακα (αυτό ονομάζεται ένθεση nesting πίνακα). Εξ ορισμού, το Dreamweaver δημιουργεί πίνακες με τρεις γραμμές και τρεις στήλες, αλλά μπορείτε να αλλάξετε εύκολα τη συγκεκριμένη μορφή κατά τη διαδικασία προσθήκης του πίνακα. Αφού όντως κάνετε κάποιες αλλαγές, το Dreamweaver τις θυμάται και τις χρησιμοποιεί ως προεπιλογές για τον επόμενο πίνακα που θα δημιουργήσετε. Προσθέστε έναν πίνακα στη σελίδα σας: 1. Τοποθετήστε το σημείο εισαγωγής εκεί που θέλετε να εμφανιστεί ο πίνακας. 2. Στην κατηγορία Layout (Διάταξη) του πάνελ Insert (Προσθήκη), πατήστε στο κουμπί Table (Πίνακας Εικόνα 1.1). ή Επιλέξτε Insert > Table (Προσθήκη > Πίνακας), ή πατήστε τα πλήκτρα Ctrl-Alt-Τ (Cmd- Opt-T). Θα εμφανιστεί το πλαίσιο διαλόγου Table (Εικόνα 1.2). 3. Πληκτρολογήστε τον αριθμό των γραμμών που θέλετε να έχει ο πίνακας, και πατήστε το πλήκτρο Tab. 4. Πληκτρολογήστε τον αριθμό των στηλών που θέλετε να έχει ο πίνακας, και πατήστε το πλήκτρο Tab. Εικόνα 1.1 Με την κατηγορία Layout του πάνελ Insert, μπορείτε να προσθέτετε πίνακες στις σελίδες σας. Εικόνα 1.2 Το πλαίσιο διαλόγου Table σάς επιτρέπει να ξεκινήσετε τη δημιουργία ενός πίνακα. 18
Προσθήκη πινάκων 5. Στο πλαίσιο κειμένου Table width (Πλάτος πίνακα), πληκτρολογήστε έναν αριθμό που α- ντιστοιχεί σε πίξελ ή σε ποσοστό του πλάτους της σελίδας, και επιλέξτε στη συνέχεια τις μονάδες από το αναδυόμενο μενού στα δεξιά του πλαισίου κειμένου (Εικόνα 1.3). 6. Καθορίστε ένα ή περισσότερα (ή κανένα) από τα εξής (δείτε το ειδικό πλαίσιο «Ανατομία ε- νός πίνακα» για την ερμηνεία των ρυθμίσεων): Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Border thickness (Πάχος περιγράμματος) για να καθορίσετε το πάχος του περιγράμματος των κελιών (σε πίξελ). Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Cell padding (Συμπλήρωση κελιών) για να καθορίσετε το ποσό του χώρου (σε πίξελ) μεταξύ του περιεχομένου και του περιγράμματος των κελιών. Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Cell spacing (Απόσταση κελιών) για να καθορίσετε τον αριθμό των πίξελ για το χώρο μεταξύ των κελιών. 7. Στην ενότητα Header (Επικεφαλίδα), επιλέξτε το είδος της επικεφαλίδας που θέλετε: None (Καμία), Left (Αριστερή), Top (Επάνω), ή Both (Και τα δύο). Τα εικονίδια για τις επικεφαλίδες σάς δείχνουν πώς μοιάζει κάθε επιλογή. 8. (Προαιρετικό αλλά συνιστώμενο.) Στην ενότητα Accessibility (Προσπελασιμότητα), πληκτρολογήστε μια λεζάντα για τον πίνακα. Το κείμενο της λεζάντας θα εμφανίζεται σε όλους τους φυλλομετρητές. Αν πληκτρολογήσετε κείμενο στο πλαίσιο κειμένου Summary (Περίληψη), αυτό θα εμφανίζεται μόνο στα προγράμματα ανάγνωσης οθόνης για άτομα με προβλήματα όρασης. συνεχίζεται στην επόμενη σελίδα Εικόνα 1.3 Μπορείτε να καθορίσετε το πλάτος του πίνακα σε πίξελ ή ως ποσοστό του πλάτους της σελίδας του φυλλομετρητή. 19
Κεφάλαιο 1 9. Πατήστε στο κουμπί OK. Ο πίνακας θα εμφανιστεί στη σελίδα σας (Εικόνα 1.4). Όταν ένας πίνακας είναι επιλεγμένος, όπως στην εικόνα, ή όταν το σημείο εισαγωγής βρίσκεται σε ένα κελί του, το Dreamweaver εμφανίζει πράσινες γραμμές διάστασης επάνω από τον πίνακα. Η επάνω γραμμή δείχνει το πλάτος του πίνακα σε πίξελ. Κάθε στήλη έχει επίσης μια γραμμή διάστασης η οποία δείχνει το πλάτος της σε πίξελ, αν έχετε καθορίσει σταθερό πλάτος για τη στήλη. Οι στήλες με πλάτος σχετικό ως προς το πλάτος του πίνακα εμφανίζουν γραμμές διάστασης (ώστε να μπορείτε να δείτε εύκολα κάθε στήλη) χωρίς τιμές πίξελ. Αυτές οι γραμμές διάστασης εμφανίζονται μόνο στην προβολή Σχεδίασης (Design view) του Dreamweaver και όχι στους φυλλομετρητές Ιστού. Συμβουλές Για να προσθέσετε έναν πίνακα μέσα σε άλλον, τοποθετήστε το σημείο εισαγωγής μέσα σε κάποιο κελί ενός υπάρχοντος πίνακα και έπειτα επιλέξτε μια από τις μεθόδους στο βήμα 2. Ο νέος πίνακας θα εμφανιστεί μέσα στον πρώτο (Εικόνα 1.5). Δε χρειάζεται να επιλέξετε εξαρχής το σωστό αριθμό γραμμών και στηλών μπορείτε να τις προσθέσετε ή να τις διαγράψετε αργότερα. Δείτε τις ενότητες «Προσθήκη γραμμών και στηλών» και «Διαγραφή στοιχείων πίνακα» παρακάτω σε αυτό το κεφάλαιο. Αν δε θέλετε να βλέπετε τις γραμμές διάστασης επάνω από τους πίνακες, μπορείτε να τις απενεργοποιήσετε επιλέγοντας View > Visual Aids > Table Widths (Προβολή > Οπτικά βοηθήματα > Πλάτη πινάκων), ώστε να αφαιρέσετε το σημάδι ελέγχου από το στοιχείο του μενού. Εικόνα 1.4 Οι πράσινες γραμμές διάστασης σας δίνουν πληροφορίες για το πλάτος του πίνακα σε πίξελ. Οι γραμμές διάστασης επάνω από κάθε στήλη δεν εμφανίζουν το πλάτος σε πίξελ στη συγκεκριμένη εικόνα, επειδή οι στήλες έχουν καθοριστεί ως ποσοστό του πλάτους του πίνακα. Εικόνα 1.5 Μπορείτε να ενθέσετε ένα δεύτερο πίνακα σε οποιοδήποτε κελί ενός υπάρχοντος πίνακα. 20
Προσθήκη πινάκων Οι λεζάντες στην πραγματικότητα αποτελούν μέρος του πίνακα. Όταν μετακινείτε τον πίνακα, η λεζάντα μετακινείται μαζί του. Οι λεζάντες εμφανίζονται εξ ορισμού επάνω από τον πίνακα, αλλά μπορείτε να αλλάξετε την προεπιλογή στον κώδικα. Μεταφερθείτε σε προβολή Κώδικα (Code view) και βρείτε την ετικέτα <caption> του πίνακα. Πατήστε μέσα στην ε- τικέτα για να τοποθετήσετε το σημείο εισαγωγής μετά από τη λέξη, και πατήστε το πλήκτρο Διαστήματος. Θα εμφανιστεί ένα αναδυόμενο μενού με τις πιθανές ιδιότητες της ετικέτας <caption>. Επιλέξτε align (ώστε να προσθέσετε align='' '' στον κώδικα και να δείτε ένα ακόμη αναδυόμενο μενού με τις τιμές στοίχισης), και στη συνέχεια επιλέξτε μια από τις πέντε πιθανές στοιχίσεις (bottom, center, left, right, top) από το αναδυόμενο μενού. Για να επεξεργαστείτε μια λεζάντα, επιλέξτε την και πληκτρολογήστε επάνω στο υπάρχον κείμενο. Για να αλλάξετε την οριζόντια στοίχιση της λεζάντας σε σχέση με τον πίνακα, τοποθετήστε το σημείο εισαγωγής μέσα στη λεζάντα, πατήστε με το δεξιό πλήκτρο του ποντικιού, και διαλέξτε μία από τις επιλογές (Left, Center, Right, ή Justify Αριστερά, Στο κέντρο, Δεξιά, ή Πλήρης) από το υπομενού Align (Στοίχιση) του μενού συντόμευσης που θα εμφανιστεί. 21
Κεφάλαιο 1 Ανατομία ενός πίνακα Εκτός από τις γραμμές και τις στήλες, οι πίνακες έχουν αρκετές άλλες ιδιότητες που επηρεάζουν την εμφάνισή τους. Θα βρείτε χειριστήρια γι αυτά τα στοιχεία στον Επιθεωρητή Ιδιοτήτων (Property Inspector), όταν επιλέξετε έναν πίνακα. Το πάχος του περιγράμματος (border thickness) είναι το πλάτος του περιγράμματος του πίνακα σε πίξελ (Εικόνα 1.6). Το Dreamweaver καθορίζει εξ ορισμού το πλάτος σε ένα πίξελ, με αποτέλεσμα το περίγραμμα να είναι λεπτό. Αν το πάχος του περιγράμματος είναι μη μηδενικό, βλέπετε ένα περίγραμμα και ανάμεσα στα κελιά του πίνακα. Η τιμή μηδέν δίνεται συχνά στο πάχος του περιγράμματος σε σελίδες που χρησιμοποιούν πίνακες για τη διάταξη της σελίδας όταν ο σχεδιαστής δε θέλει να είναι ορατά τα περιγράμματα. Τα περιγράμματα με μηδενικό πάχος εμφανίζονται στην προβολή Σχεδίασης ως εστιγμένα. Η συμπλήρωση των κελιών (cell padding) είναι η ποσότητα του χώρου (σε πίξελ) ανάμεσα στα περιγράμματα του κελιού και το περιεχόμενό του (Εικόνα 1.7). Χρησιμοποιήστε αυτή τη ρύθμιση για να δώσετε στο περιεχόμενο των κελιών περισσότερο χώρο μέσα στα κελιά. Αν δεν καθορίσετε τιμή εδώ, οι περισσότεροι φυλλομετρητές χρησιμοποιούν την προεπιλεγμένη τιμή του ενός πίξελ. Η απόσταση κελιών (cell spacing) είναι η ποσότητα του χώρου ανάμεσα στα κελιά του πίνακα, και μετράται επίσης σε πίξελ (Εικόνα 1.8). Αν δεν καθορίσετε τιμή εδώ, οι περισσότεροι φυλλομετρητές χρησιμοποιούν την προεπιλεγμένη τιμή των δύο πίξελ. Η μεγάλη απόσταση των κελιών δίνει στον πίνακα παλιομοδίτικη εμφάνιση, οπότε πρέπει να είστε προσεκτικοί με τη συγκεκριμένη ρύθμιση. Οι παρακάτω ιδιότητες πίνακα δεν μπορούν να καθοριστούν στον Επιθεωρητή Ιδιοτήτων, αλλά μπορούν να τροποποιηθούν σε προβολή Κώδικα: Η ιδιότητα table header (επικεφαλίδα πίνακα) καθορίζει ένα τμήμα του πίνακα ως επικεφαλίδα. Η επικεφαλίδα είναι μορφοποιημένη έντονη και κεντραρισμένη, αλλά το πιο σημαντικό είναι ότι έχει την ετικέτα <th> της HTML, η οποία επιτρέπει στα προγράμματα ανάγνωσης οθόνης που χρησιμοποιούν άτομα με προβλήματα όρασης να διαβάζουν σωστά τον πίνακα. Είναι καλύτερα να χρησιμοποιήσετε μια ετικέτα επικεφαλίδας πίνακα στο Dreamweaver παρά να μορφοποιήσετε τοπικά τα κελιά ως έντονα και κεντραρισμένα. Η ιδιότητα border color (χρώμα περιγράμματος) αφορά το χρώμα του περιγράμματος γύρω από τον πίνακα και μεταξύ των κελιών του. Και αυτή η ιδιότητα δίνει μια ξεπερασμένη εμφάνιση, οπότε χρησιμοποιήστε τη με προσοχή. Εικόνα 1.7 Η συμπλήρωση των κελιών έχει οριστεί σε 5 πίξελ, γεγονός που δίνει περισσότερο κενό χώρο γύρω από τα περιεχόμενα του πίνακα. Εικόνα 1.6 Ο ίδιος πίνακας με πάχος περιγράμματος μηδέν πίξελ (επάνω), ένα πίξελ (μέσο), και 10 πίξελ (κάτω). Η συμπλήρωση και η απόσταση των κελιών έχουν την τιμή μηδέν. Εικόνα 1.8 Αν η απόσταση των κελιών καθοριστεί σε 5 πίξελ, θα δημιουργηθεί παχύ περίγραμμα μεταξύ των κελιών μια ξεπερασμένη εμφάνιση. 22
Προσθήκη πινάκων Επιλογή στοιχείων πίνακα Για να επεξεργαστείτε αποτελεσματικά έναν πίνακα, θα πρέπει να ξέρετε να επιλέγετε τα στοιχεία του. Μπορείτε να επιλέξετε έναν ολόκληρο πίνακα μία ή περισσότερες γραμμές και στήλες ένα μεμονωμένο κελί ή πολλά κελιά και μη γειτονικά κελιά, γραμμές, ή στήλες. Επιλέξτε ολόκληρο τον πίνακα: Πατήστε στην επάνω αριστερή γωνία του πίνακα. ή Πατήστε στην κάτω ή στη δεξιά πλευρά του πίνακα. ή Πατήστε μέσα στον πίνακα και επιλέξτε Modify > Table > Select Table (Τροποποίηση > Πίνακας > Επιλογή πίνακα). Γύρω από τον πίνακα θα εμφανιστεί ένα περίγραμμα με λαβές αλλαγής μεγέθους (Εικόνα 1.9). Θα εμφανιστούν επίσης και γραμμές διάστασης. Συμβουλή Μπορείτε να επιλέξετε ολόκληρο τον πίνακα και πατώντας στο περίγραμμα οποιουδήποτε εσωτερικού κελιού. Εικόνα 1.9 Μπορείτε να καταλάβετε ότι ο πίνακας είναι επιλεγμένος επειδή διαθέτει ένα παχύ περίγραμμα με λαβές αλλαγής μεγέθους. Εικόνα 1.10 Όταν μετακινήσετε το δείκτη του ποντικιού προς το αριστερό όριο ενός πίνακα και ο δείκτης αλλάξει σε βέλος, μπορείτε να πατήσετε για να επιλέξετε ολόκληρη τη γραμμή. Επιλέξτε μια ολόκληρη γραμμή: 1. Τοποθετήστε το δείκτη του ποντικιού στο αριστερό άκρο μιας γραμμής. Ο δείκτης θα μετατραπεί σε βέλος. 2. Πατήστε για να επιλέξετε ολόκληρη τη γραμμή (Εικόνα 1.1). Μπορείτε να πατήσετε και να σύρετε για να ε- πιλέξετε πολλές γραμμές. Τα περιγράμματα των κελιών της επιλεγμένης γραμμής θα επισημανθούν. 23
Κεφάλαιο 1 Επιλέξτε μια ολόκληρη στήλη: 1. Τοποθετήστε το δείκτη του ποντικιού στο επάνω όριο μιας στήλης. Ο δείκτης θα μετατραπεί σε βέλος. 2. Πατήστε για να επιλέξετε ολόκληρη τη στήλη (Εικόνα 1.11). Μπορείτε να πατήσετε και να σύρετε για να ε- πιλέξετε πολλές στήλες. ή Πατήστε στο τρίγωνο στη γραμμή διάστασης επάνω από οποιαδήποτε στήλη, για να εμφανίσετε ένα αναδυόμενο μενού, και έπειτα επιλέξτε Select Column (Επιλογή στήλης Εικόνα 1.12). Τα περιγράμματα των κελιών της επιλεγμένης στήλης θα επισημανθούν. Επιλέξτε ένα κελί: Πατήστε και σύρετε μέσα στο κελί. ή Πατήστε μέσα στο κελί και επιλέξτε Edit > Select All (Επεξεργασία > Επιλογή όλων), ή πατήστε τα πλήκτρα Ctrl-A (Cmd-A). ή Αν το κελί είναι κενό, τριπλοπατήστε μέσα σε αυτό. Το κελί θα επισημανθεί για να καταλάβετε ότι έχει επιλεγεί. Επιλέξτε πολλά γειτονικά κελιά: Πατήστε μέσα στο πρώτο κελί που θέλετε να επιλέξετε, και σύρετε μέχρι το τελευταίο κελί. ή Πατήστε μέσα στο πρώτο κελί που θέλετε να επιλέξετε, κρατήστε πατημένο το πλήκτρο Shift, και μετά πατήστε μέσα στο τελευταίο κελί. Θα επιλεγούν και όλα τα ενδιάμεσα κελιά. Με τον ίδιο τρόπο μπορείτε να επιλέξετε και γραμμές ή στήλες. Εικόνα 1.11 Ο δείκτης μετατρέπεται επίσης σε βέλος επάνω από τις στήλες. Πατήστε για να επιλέξετε τη στήλη. Εικόνα 1.12 Αν προτιμάτε, μπορείτε να χρησιμοποιήσετε το αναδυόμενο μενού των στηλών για να επιλέξετε τη στήλη. Εικόνα 1.13 Πατώντας με το ποντίκι με πατημένο το πλήκτρο Ctrl (Cmd), μπορείτε να επιλέξετε μη γειτονικά κελιά. Επιλέξτε μη γειτονικά κελιά: Κρατήστε πατημένο το πλήκτρο Ctrl (Cmd) και πατήστε μέσα στο πρώτο κελί, και μετά, κρατώντας πατημένο το πλήκτρο Ctrl (Cmd) πατήστε στα υπόλοιπα κελιά που θέλετε να ε- πιλέξετε (Εικόνα 1.13). Με τον ίδιο τρόπο μπορείτε επίσης να επιλέξετε μη διαδοχικές γραμμές ή στήλες. 24
Προσθήκη πινάκων Χρήση κατάστασης Διευρυμένων πινάκων για επιλογή Όταν επιλέγετε πίνακες και στοιχεία πινάκων, συχνά είναι δύσκολο να επιλέξετε το συγκεκριμένο τμήμα που θέλετε, ειδικά αν κάποια από τα κελιά του πίνακα έχουν μικρό οριζόντιο ή κατακόρυφο μέγεθος (Εικόνα 1.14). Για να σας διευκολύνει, το Dreamweaver παρέχει την κατάσταση Διευρυμένων πινάκων (Expanded Tables mode), η οποία προσθέτει προσωρινά ένα περίγραμμα (αν δεν υπάρχει) και αυξάνει τη συμπλήρωση και την απόσταση των κελιών. Αυτές οι αλλαγές δεν είναι μόνιμες και δεν εμφανίζονται στους φυλλομετρητές. Μεταφερθείτε σε κατάσταση Διευρυμένων πινάκων: 1. Επιλέξτε View > Table Mode > Expanded Tables Mode (Προβολή > Κατάσταση πίνακα > Κατάσταση Διευρυμένων πινάκων). ή Στην κατηγορία Layout του πάνελ Insert, πατήστε στο κουμπί Expanded (Εικόνα 1.15). ή Πατήστε τα πλήκτρα Alt-F6 (Opt-F6). Η προβολή Σχεδίασης θα αλλάξει σε κατάσταση Διευρυμένων πινάκων (Εικόνα 1.16), αλλάζοντας την εμφάνιση όλων των πινάκων του εγγράφου. Στην κορυφή του παραθύρου εγγράφου θα εμφανιστεί μια γραμμή ενδείξεων που σας ενημερώνει ότι είστε σε κατάσταση Διευρυμένων πινάκων. 2. Επιλέξτε και επεξεργαστείτε τα στοιχεία του πίνακα όπως θέλετε. Συμβουλή Να θυμάστε ότι η κατάσταση Διευρυμένων πινάκων δεν είναι προβολή WYSIWYG (What You See Is What You Get αυτό που βλέπετε, αυτό θα πάρετε), όπως η τυπική προβολή Σχεδίασης. Πρέπει να βγείτε από την κατάσταση Διευρυμένων πινάκων πριν προχωρήσετε σε οποιαδήποτε σημαντική διάταξη ή μορφοποίηση της σελίδας. Εικόνα 1.14 Αν θέλατε να επιλέξετε τα κελιά κάτω από τις επικεφαλίδες Q3 ή Q4, αυτό θα ήταν δύσκολο επειδή τα κελιά είναι πολύ μικρά. Εικόνα 1.15 Πατήστε στο κουμπί Expanded στην κατηγορία Layout του πάνελ Insert, για να μεταφερθείτε σε κατάσταση Διευρυμένων πινάκων. Εικόνα 1.16 Η κατάσταση Διευρυμένων πινάκων αυξάνει το μέγεθος όλων των πινάκων στο έγγραφο, ώστε να επιλέγετε τα στοιχεία των πινάκων πιο εύκολα. Παρατηρήστε τη γραμμή ενδείξεων στο επάνω τμήμα του παραθύρου εγγράφου, που σας πληροφορεί ότι είστε σε μια ειδική κατάσταση. 25