7

ΠΕΡΙΕΧΟΜΕΝΑ

Εισαγωγή..............................................................................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

Περιεχόμενα

8

Προσθήκη σελίδων σε πλαίσια ...................................................................... 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

Περιεχόμενα

9

Χρήση του 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

Περιεχόμενα

10

Παράρτημα Β: Προσαρμογή και επέκταση του 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

15

ΠΡΟΣΘΗΚΗ ΠΙΝΑΚΩΝ

Θα χρησιμοποιήσετε συχνά πίνακες σε ιστοσελίδες για την πα-ρουσίαση πινακοποιημένων πληροφοριών — δηλαδή δεδομέ-νων που παρουσιάζονται καλύτερα με τη μορφή γραμμών και στηλών. Μπορείτε επίσης να χρησιμοποιήσετε πίνακες για τη δημιουργία της διάταξης — δηλαδή για τη στοίχιση κειμένου και εικόνων στη σελίδα — αλλά όπως θα διαπιστώσετε αργότε-ρα σε αυτό το κεφάλαιο, στις περισσότερες περιπτώσεις πρέπει να χρησιμοποιείτε CSS για τη διάταξη.

Στο παρόν κεφάλαιο, θα μάθετε να δημιουργείτε και να μορφο-ποιείτε πίνακες, να διασφαλίζετε ότι οι πίνακες και τα περιεχό-μενά τους θα έχουν την εμφάνιση που θέλετε, να χρησιμοποιεί-τε τα διάφορα εργαλεία πινάκων του Dreamweaver, και να ε-ξοικονομείτε χρόνο όταν χρησιμοποιείτε πίνακες.

Κεφάλαιο 1

16

Δημιουργία διάταξης χωρίς πίνακες Οι πίνακες χρησιμοποιούνται ευρέως ως μηχανι-σμοί διάταξης (μερικές φορές αποκαλούνται πίνα-κες διάταξης). Μπορείτε να δημιουργήσετε πίνακες στη σελίδα σας, ώστε τα κελιά τους να περιέχουν το κείμενο και τις εικόνες της σελίδας. Επειδή ε-λέγχετε ικανοποιητικά το μέγεθος των κελιών και τη θέση των περιγραμμάτων τους, είστε σε θέση να στοιχίσετε και να διατάξετε τα στοιχεία της σε-λίδας με ακρίβεια, αν και συχνά είναι απαραίτητο να δημιουργήσετε εξαιρετικά πολύπλοκους πίνα-κες. Κρύβοντας τα περιγράμματα των κελιών, κά-νετε αόρατους τους πίνακες για τον επισκέπτη της τοποθεσίας Ιστού. Εδώ και κάποια χρόνια, οι πε-ρισσότερες καλοσχεδιασμένες ιστοσελίδες που βλέπετε είναι δημιουργημένες με αυτόν τον τρόπο. Όμως, η χρήση πινάκων για τη δημιουργία της διάταξης παρουσιάζει πολλά προβλήματα. Καταρ-χήν, ο πίνακας δεν έχει καμία σχέση με το περιε-χόμενο της σελίδας (τις πληροφορίες που βλέπει ο επισκέπτης σας)· το μόνο που κάνει είναι να επη-ρεάζει την παρουσίαση του περιεχομένου. Ένα από τα μεγαλύτερα πλεονεκτήματα των CSS είναι ότι διαχωρίζουν το περιεχόμενο από την παρουσίαση. Το αποτέλεσμα είναι ότι μπορείτε να αλλάξετε τελείως τη σχεδίαση τοποθεσιών Ιστού που βασί-ζονται σε CSS αλλάζοντας ένα αρχείο στις περισ-σότερες περιπτώσεις. Αν η παρουσίασή σας ανα-μιγνύεται με το περιεχόμενο, όπως στη βασισμένη σε πίνακες διάταξη, η αλλαγή της σχεδίασης της τοποθεσίας Ιστού γίνεται δύσκολη και δαπανηρή. Παρόμοια, οι πίνακες δυσκολεύουν τη διατήρηση της οπτικής συνέπειας σε ολόκληρη την τοποθεσία (επειδή οι πίνακες διάταξης στις διαφορετικές σε-λίδες ενδέχεται να μην είναι ίδιοι).

Προσθήκη πινάκων

17

Αυτό λοιπόν είναι το πρόβλημα με τους πίνακες από την οπτική γωνία του σχεδιαστή ιστοσελίδων, αλλά υπάρχουν προβλήματα και για τον επισκέπτη της τοποθεσίας. Οι πίνακες αυξάνουν υπερβολικά το μέγεθος μιας σελίδας HTML (γεγονός που προ-καλεί επιπλέον χρεώσεις για το εύρος ζώνης), και οι επισκέπτες πρέπει να κατεβάζουν τους πίνακες διάταξης σε κάθε σελίδα της τοποθεσίας που επι-σκέπτονται (δηλαδή κατεβάζουν συνεχώς το ίδιο πράγμα). Οι σελίδες φορτώνονται πιο αργά σε σύ-γκριση με μια βασισμένη σε CSS διάταξη, και αυ-τό αποθαρρύνει τους επισκέπτες. Η ανάγνωση σε-λίδων που βασίζονται σε πίνακες είναι πολύ πιο δύσκολη για τους χρήστες με ειδικές ανάγκες και για τους επισκέπτες που χρησιμοποιούν κινητά τηλέφωνα και PDA. Οι πίνακες ήταν απαραίτητοι για να έχουν οι τοπο-θεσίες Ιστού ωραία εμφάνιση μέχρι το 1997, επει-δή οι φυλλομετρητές της εποχής είχαν πολλούς περιορισμούς, ένας από τους οποίους ήταν ότι δεν υποστήριζαν τα αναδυόμενα τότε πρότυπα CSS για τη δημιουργία της διάταξης. Όμως, όλοι οι σύγχρονοι φυλλομετρητές υποστηρίζουν σε ικανο-ποιητικό βαθμό τη χρήση CSS για τη διάταξη (αν και η ειρωνεία είναι ότι ένας από τους δημοφιλείς φυλλομετρητές κατά το χρόνο συγγραφής του βι-βλίου, ο Microsoft Internet Explorer 6 για τα Win-dows, υστερεί σημαντικά σε σχέση με άλλους φυλλομετρητές, όπως οι 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 για τη διάταξη επιτρέπει στους πί-νακες να επιστρέψουν στον αρχικό σκοπό τους, δηλαδή την εμφάνιση πινακοποιημένων πληροφο-ριών που στοιχίζονται σε γραμμές και στήλες. Σκε-φθείτε έναν πίνακα σκορ για το μπάσκετ, ή έναν πίνακα με τα δρομολόγια των λεωφορείων — και οι δύο είναι τέλειοι υποψήφιοι.

Κεφάλαιο 1

18

Δημιουργία πίνακα Οι πίνακες αποτελούνται συνήθως από μία ή πε-ρισσότερες γραμμές και μία ή περισσότερες στή-λες. Κάθε ορθογώνια περιοχή που σχηματίζεται από την τομή μιας γραμμής με μια στήλη ονομάζε-ται κελί (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 σάς επιτρέπει να ξεκινήσετε τη δημιουργία ενός πίνακα.

Προσθήκη πινάκων

19

5. Στο πλαίσιο κειμένου Table width (Πλάτος πίνακα), πληκτρολογήστε έναν αριθμό που α-ντιστοιχεί σε πίξελ ή σε ποσοστό του πλάτους της σελίδας, και επιλέξτε στη συνέχεια τις μο-νάδες από το αναδυόμενο μενού στα δεξιά του πλαισίου κειμένου (Εικόνα 1.3).

6. Καθορίστε ένα ή περισσότερα (ή κανένα) από τα εξής (δείτε το ειδικό πλαίσιο «Ανατομία ε-νός πίνακα» για την ερμηνεία των ρυθμίσεων):

Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Border thickness (Πάχος περι-γράμματος) για να καθορίσετε το πάχος του περιγράμματος των κελιών (σε πίξελ).

Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Cell padding (Συμπλήρωση κε-λιών) για να καθορίσετε το ποσό του χώ-ρου (σε πίξελ) μεταξύ του περιεχομένου και του περιγράμματος των κελιών.

Πληκτρολογήστε έναν αριθμό στο πλαίσιο κειμένου Cell spacing (Απόσταση κελιών) για να καθορίσετε τον αριθμό των πίξελ για το χώρο μεταξύ των κελιών.

7. Στην ενότητα Header (Επικεφαλίδα), επιλέξτε το είδος της επικεφαλίδας που θέλετε: None (Καμία), Left (Αριστερή), Top (Επάνω), ή Both (Και τα δύο). Τα εικονίδια για τις επικε-φαλίδες σάς δείχνουν πώς μοιάζει κάθε επιλο-γή.

8. (Προαιρετικό αλλά συνιστώμενο.) Στην ενότη-τα Accessibility (Προσπελασιμότητα), πλη-κτρολογήστε μια λεζάντα για τον πίνακα. Το κείμενο της λεζάντας θα εμφανίζεται σε όλους τους φυλλομετρητές. Αν πληκτρολογήσετε κείμενο στο πλαίσιο κειμένου Summary (Πε-ρίληψη), αυτό θα εμφανίζεται μόνο στα προ-γράμματα ανάγνωσης οθόνης για άτομα με προβλήματα όρασης.

συνεχίζεται στην επόμενη σελίδα

Εικόνα 1.3 Μπορείτε να καθορίσετε το πλάτος του πίνακα σε πίξελ ή ως ποσοστό του πλάτους της σελίδας του φυλλομετρητή.

Κεφάλαιο 1

20

9. Πατήστε στο κουμπί OK. Ο πίνακας θα εμφανιστεί στη σελίδα σας (Ει-κόνα 1.4). Όταν ένας πίνακας είναι επιλεγμέ-νος, όπως στην εικόνα, ή όταν το σημείο εισα-γωγής βρίσκεται σε ένα κελί του, το Dream-weaver εμφανίζει πράσινες γραμμές διάστασης επάνω από τον πίνακα. Η επάνω γραμμή δεί-χνει το πλάτος του πίνακα σε πίξελ. Κάθε στή-λη έχει επίσης μια γραμμή διάστασης η οποία δείχνει το πλάτος της σε πίξελ, αν έχετε καθο-ρίσει σταθερό πλάτος για τη στήλη. Οι στήλες με πλάτος σχετικό ως προς το πλάτος του πί-νακα εμφανίζουν γραμμές διάστασης (ώστε να μπορείτε να δείτε εύκολα κάθε στήλη) χωρίς τιμές πίξελ. Αυτές οι γραμμές διάστασης εμ-φανίζονται μόνο στην προβολή Σχεδίασης (Design view) του Dreamweaver και όχι στους φυλλομετρητές Ιστού.

Συμβουλές Για να προσθέσετε έναν πίνακα μέσα σε άλ-λον, τοποθετήστε το σημείο εισαγωγής μέσα σε κάποιο κελί ενός υπάρχοντος πίνακα και έπειτα επιλέξτε μια από τις μεθόδους στο βήμα 2. Ο νέος πίνακας θα εμφανιστεί μέσα στον πρώτο (Εικόνα 1.5). Δε χρειάζεται να επιλέξετε εξαρχής το σωστό αριθμό γραμμών και στηλών· μπορείτε να τις προσθέσετε ή να τις διαγράψετε αργότερα. Δείτε τις ενότητες «Προσθήκη γραμμών και στηλών» και «Διαγραφή στοιχείων πίνακα» παρακάτω σε αυτό το κεφάλαιο. Αν δε θέλετε να βλέπετε τις γραμμές διάστα-σης επάνω από τους πίνακες, μπορείτε να τις απενεργοποιήσετε επιλέγοντας View > Visual Aids > Table Widths (Προβολή > Οπτικά βοη-θήματα > Πλάτη πινάκων), ώστε να αφαιρέσε-τε το σημάδι ελέγχου από το στοιχείο του με-νού.

Εικόνα 1.4 Οι πράσινες γραμμές διάστασης σας δίνουν πληροφορίες για το πλάτος του πίνακα σε πίξελ. Οι γραμμές διάστασης επάνω από κάθε στήλη δεν εμφανίζουν το πλάτος σε πίξελ στη συγκεκριμένη εικόνα, επειδή οι στήλες έχουν καθοριστεί ως ποσοστό του πλάτους του πίνακα.

Εικόνα 1.5 Μπορείτε να ενθέσετε ένα δεύτερο πίνακα σε οποιοδήποτε κελί ενός υπάρχοντος πίνακα.

Προσθήκη πινάκων

21

Οι λεζάντες στην πραγματικότητα αποτελούν μέρος του πίνακα. Όταν μετακινείτε τον πίνα-κα, η λεζάντα μετακινείται μαζί του. Οι λεζά-ντες εμφανίζονται εξ ορισμού επάνω από τον πίνακα, αλλά μπορείτε να αλλάξετε την προε-πιλογή στον κώδικα. Μεταφερθείτε σε προβο-λή Κώδικα (Code view) και βρείτε την ετικέτα <caption> του πίνακα. Πατήστε μέσα στην ε-τικέτα για να τοποθετήσετε το σημείο εισαγω-γής μετά από τη λέξη, και πατήστε το πλήκτρο Διαστήματος. Θα εμφανιστεί ένα αναδυόμενο μενού με τις πιθανές ιδιότητες της ετικέτας <caption>. Επιλέξτε align (ώστε να προσθέ-σετε align='' '' στον κώδικα και να δείτε ένα ακόμη αναδυόμενο μενού με τις τιμές στοίχισης), και στη συνέχεια επιλέξτε μια από τις πέντε πιθανές στοιχίσεις (bottom, center, left, right, top) από το αναδυόμενο μενού. Για να επεξεργαστείτε μια λεζάντα, επιλέξτε την και πληκτρολογήστε επάνω στο υπάρχον κείμενο. Για να αλλάξετε την οριζόντια στοί-χιση της λεζάντας σε σχέση με τον πίνακα, το-ποθετήστε το σημείο εισαγωγής μέσα στη λε-ζάντα, πατήστε με το δεξιό πλήκτρο του ποντι-κιού, και διαλέξτε μία από τις επιλογές (Left, Center, Right, ή Justify — Αριστερά, Στο κέ-ντρο, Δεξιά, ή Πλήρης) από το υπομενού Align (Στοίχιση) του μενού συντόμευσης που θα εμ-φανιστεί.

Κεφάλαιο 1

22

Ανατομία ενός πίνακα Εκτός από τις γραμμές και τις στήλες, οι πίνακες έχουν αρκετές άλλες ιδιότητες που επηρεάζουν την εμ-φάνισή τους. Θα βρείτε χειριστήρια γι’ αυτά τα στοιχεία στον Επιθεωρητή Ιδιοτήτων (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 πίξελ, θα δημιουργηθεί παχύ περίγραμμα μεταξύ των κελιών — μια ξεπερασμένη εμφάνιση.

Προσθήκη πινάκων

23

Επιλογή στοιχείων πίνακα Για να επεξεργαστείτε αποτελεσματικά έναν πίνα-κα, θα πρέπει να ξέρετε να επιλέγετε τα στοιχεία του. Μπορείτε να επιλέξετε έναν ολόκληρο πίνα-κα· μία ή περισσότερες γραμμές και στήλες· ένα μεμονωμένο κελί ή πολλά κελιά· και μη γειτονικά κελιά, γραμμές, ή στήλες.

Επιλέξτε ολόκληρο τον πίνακα: ♦ Πατήστε στην επάνω αριστερή γωνία του πί-

νακα. ή Πατήστε στην κάτω ή στη δεξιά πλευρά του πίνακα. ή Πατήστε μέσα στον πίνακα και επιλέξτε Mod-ify > Table > Select Table (Τροποποίηση > Πί-νακας > Επιλογή πίνακα). Γύρω από τον πίνακα θα εμφανιστεί ένα περί-γραμμα με λαβές αλλαγής μεγέθους (Εικόνα 1.9). Θα εμφανιστούν επίσης και γραμμές διάστα-σης.

Συμβουλή Μπορείτε να επιλέξετε ολόκληρο τον πίνακα και πατώντας στο περίγραμμα οποιουδήποτε εσωτερικού κελιού.

Επιλέξτε μια ολόκληρη γραμμή: 1. Τοποθετήστε το δείκτη του ποντικιού στο αρι-

στερό άκρο μιας γραμμής. Ο δείκτης θα μετατραπεί σε βέλος.

2. Πατήστε για να επιλέξετε ολόκληρη τη γραμμή (Εικόνα 1.1). Μπορείτε να πατήσετε και να σύρετε για να ε-πιλέξετε πολλές γραμμές. Τα περιγράμματα των κελιών της επιλεγμένης γραμμής θα επισημανθούν.

Εικόνα 1.9 Μπορείτε να καταλάβετε ότι ο πίνακας είναι επιλεγμένος επειδή διαθέτει ένα παχύ περίγραμμα με λαβές αλλαγής μεγέθους.

Εικόνα 1.10 Όταν μετακινήσετε το δείκτη του ποντικιού προς το αριστερό όριο ενός πίνακα και ο δείκτης αλλάξει σε βέλος, μπορείτε να πατήσετε για να επιλέξετε ολόκληρη τη γραμμή.

Κεφάλαιο 1

24

Επιλέξτε μια ολόκληρη στήλη: 1. Τοποθετήστε το δείκτη του ποντικιού στο επά-

νω όριο μιας στήλης. Ο δείκτης θα μετατραπεί σε βέλος.

2. Πατήστε για να επιλέξετε ολόκληρη τη στήλη (Εικόνα 1.11). Μπορείτε να πατήσετε και να σύρετε για να ε-πιλέξετε πολλές στήλες. ή Πατήστε στο τρίγωνο στη γραμμή διάστασης επάνω από οποιαδήποτε στήλη, για να εμφανί-σετε ένα αναδυόμενο μενού, και έπειτα επιλέξ-τε Select Column (Επιλογή στήλης — Εικόνα 1.12). Τα περιγράμματα των κελιών της επιλεγμένης στήλης θα επισημανθούν.

Επιλέξτε ένα κελί: ♦ Πατήστε και σύρετε μέσα στο κελί.

ή Πατήστε μέσα στο κελί και επιλέξτε Edit > Se-lect All (Επεξεργασία > Επιλογή όλων), ή πα-τήστε τα πλήκτρα Ctrl-A (Cmd-A). ή Αν το κελί είναι κενό, τριπλοπατήστε μέσα σε αυτό. Το κελί θα επισημανθεί για να καταλάβετε ότι έχει επιλεγεί.

Εικόνα 1.11 Ο δείκτης μετατρέπεται επίσης σε βέλος επάνω από τις στήλες. Πατήστε για να επιλέξετε τη στήλη.

Εικόνα 1.12 Αν προτιμάτε, μπορείτε να χρησιμοποιήσετε το αναδυόμενο μενού των στηλών για να επιλέξετε τη στήλη.

Εικόνα 1.13 Πατώντας με το ποντίκι με πατημένο το πλήκτρο Ctrl (Cmd), μπορείτε να επιλέξετε μη γειτονικά κελιά.

Επιλέξτε πολλά γειτονικά κελιά: ♦ Πατήστε μέσα στο πρώτο κελί που θέλετε να

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

Επιλέξτε μη γειτονικά κελιά: ♦ Κρατήστε πατημένο το πλήκτρο Ctrl (Cmd)

και πατήστε μέσα στο πρώτο κελί, και μετά, κρατώντας πατημένο το πλήκτρο Ctrl (Cmd) πατήστε στα υπόλοιπα κελιά που θέλετε να ε-πιλέξετε (Εικόνα 1.13). Με τον ίδιο τρόπο μπορείτε επίσης να επιλέξετε μη διαδοχικές γραμμές ή στήλες.

Προσθήκη πινάκων

25

Χρήση κατάστασης Διευρυμένων πινάκων για επιλογή Όταν επιλέγετε πίνακες και στοιχεία πινάκων, συ-χνά είναι δύσκολο να επιλέξετε το συγκεκριμένο τμήμα που θέλετε, ειδικά αν κάποια από τα κελιά του πίνακα έχουν μικρό οριζόντιο ή κατακόρυφο μέγεθος (Εικόνα 1.14). Για να σας διευκολύνει, το Dreamweaver παρέχει την κατάσταση Διευρυμένων πινάκων (Expanded Tables mode), η οποία προ-σθέτει προσωρινά ένα περίγραμμα (αν δεν υπάρ-χει) και αυξάνει τη συμπλήρωση και την απόσταση των κελιών. Αυτές οι αλλαγές δεν είναι μόνιμες και δεν εμφανίζονται στους φυλλομετρητές.

Μεταφερθείτε σε κατάσταση Διευρυμένων πινάκων: 1. Επιλέξτε View > Table Mode > Expanded Ta-

bles 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 Η κατάσταση Διευρυμένων πινάκων αυξάνει το μέγεθος όλων των πινάκων στο έγγραφο, ώστε να επιλέγετε τα στοιχεία των πινάκων πιο εύκολα. Παρατηρήστε τη γραμμή ενδείξεων στο επάνω τμήμα του παραθύρου εγγράφου, που σας πληροφορεί ότι είστε σε μια ειδική κατάσταση.