ΜΑΘΗΜΑ 1 ΕΙΣΑΓΩΓΗ ΣΤΟ MACROMEDIA DREAMWEAVER MX

Transcript

1

2 Περιεχόμενα ΕΙΣΑΓΩΓΗ 13 ΜΑΘΗΜΑ 1 ΕΙΣΑΓΩΓΗ ΣΤΟ MACROMEDIA DREAMWEAVER MX Εξερεύνηση του χώρου εργασίας 20 Σελίδα εκκίνησης 20 Προετοιμασία για τη δημιουργία της τοποθεσίας Ιστού σας 22 Ορισμός τοπικής τοποθεσίας 23 Δημιουργία και αποθήκευση νέας σελίδας 31 Εξερεύνηση των εργαλείων 35 Χρήση των πάνελ 38 Ο τίτλος της σελίδας σας 41 Ορισμός χρώματος φόντου 42 Καθορισμός φυλλομετρητών προεπισκόπησης 44 ΜΑΘΗΜΑ 2 ΠΡΟΣΘΗΚΗ ΠΕΡΙΕΧΟΜΕΝΟΥ ΣΕ ΜΙΑ ΣΕΛΙΔΑ 48 Βασική μορφοποίηση κειμένου 50 Προσθήκη αλλαγής γραμμής 51 Ορισμός προτιμήσεων κειμένου 52 Εισαγωγή κειμένου 54 Προσθήκη μη συλλαβιζόμενου διαστήματος 55 Στοίχιση και εσοχές κειμένου 55 Δημιουργία λιστών 57 Δημιουργία λίστας ορισμών 60 Ένθετες λίστες 61 Μορφοποίηση χαρακτήρων 63 Αλλαγή της γραμματοσειράς 64 Αλλαγή μεγέθους γραμματοσειράς 67

3 Περιεχόμενα 7 Ορισμός χρώματος γραμματοσειράς 70 Προσθήκη ειδικών χαρακτήρων 72 Προσθήκη οριζόντιων διαχωριστικών γραμμών 74 Αυτόματη προσθήκη ημερομηνίας 75 Προσθήκη κειμένου Flash 77 Τροποποίηση κειμένου Flash 79 Τι μάθατε 79 ΜΑΘΗΜΑ 3 ΧΡΗΣΗ ΕΙΚΟΝΩΝ 80 Χρήση εικόνας φόντου 83 Τοποθέτηση εικόνων στη σελίδα 85 Ανανέωση και αλλαγή μεγέθους εικόνων 88 Τοποθέτηση γραφικών 90 Προσθήκη περιγράμματος σε εικόνα 91 Ανάθεση ονομάτων και εναλλακτικού κειμένου σε εικόνες 92 Εισαγωγή εικόνας από το πάνελ Assets 93 Διαχείριση εικόνων με τη λίστα Αγαπημένων 97 Ροή κειμένου γύρω από εικόνες 100 Προσαρμογή του χώρου γύρω από μια εικόνα 101 Προσθήκη δεσμευτικού θέσης εικόνας 102 Αντικατάσταση δεσμευτικού θέσης εικόνας 104 Ρύθμιση προτιμήσεων επεξεργασίας εικόνας 104 Βασική επεξεργασία εικόνων 106 Στοίχιση εικόνας ως προς μία μόνο γραμμή κειμένου 108 Προσθήκη κουμπιών Flash 110 Τροποποίηση κουμπιών Flash 112 Προσθήκη κινούμενων εικόνων Flash 113 Εισαγωγή εικόνας για άτομα με ειδικές ανάγκες 115 Χρήση του βοηθήματος προβολής εικόνων (Image Viewer) 117 Χρήση του άλμπουμ φωτογραφιών Ιστού 125 Ενσωμάτωση ταινιών QuickTime 128 ΜΑΘΗΜΑ 4 ΔΗΜΙΟΥΡΓΙΑ ΣΥΝΔΕΣΜΩΝ 132 Ορισμός χρώματος και μορφής σύνδεσμου 134 Δημιουργία συνδέσμων υπερ-κειμένου 136 Συνδέσμοι και δομή αρχείων 139 Δημιουργία συνδέσμων γραφικών 140 Προορισμοί συνδέσμων 141 Προσθήκη και σύνδεση με επώνυμες αγκυρώσεις 142 Δημιουργία εικονοχαρτών 147 Προσθήκη συνδέσμων ηλεκτρονικού ταχυδρομείου 151

4 8 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΜΑΘΗΜΑ 5 ΣΧΕΔΙΑΣΜΟΣ ΜΕ ΠΙΝΑΚΕΣ 154 Δημιουργία πίνακα 156 Εισαγωγή δεδομένων από λογιστικά φύλλα 162 Αντιγραφή και επικόλληση κελιών πίνακα 163 Επιλογή πίνακα 165 Επιλογή και μορφοποίηση κελιών πίνακα 166 Ταξινόμηση πίνακα 172 Τροποποίηση πίνακα 173 Εξαγωγή πίνακα 175 Χρήση εικόνων σε πίνακες 177 Ένθετοι πίνακες 183 Εξωτερικό περίγραμμα πίνακα 187 Σχεδίασμός για οθόνες υπολογιστών 190 Χρήση μεγέθους παραθύρου για τον έλεγχο της διάταξης 191 Δημιουργία πίνακα σε προβολή Διάταξης 192 Τροποποίηση διάταξης πίνακα 195 Εφαρμογή μορφοποίησης κελιού 200 Καθορισμός πλάτους διάταξης 201 Χρήση εικόνας ίχνους 203 ΜΑΘΗΜΑ 6 ΔΗΜΙΟΥΡΓΙΑ ΦΥΛΛΩΝ ΣΤΥΛ 206 Τι είναι τα στυλ 209 Δημιουργία εσωτερικών στυλ 211 Μετατροπή εσωτερικών στυλ σε εξωτερικά 218 Σύνδεση με υπάρχον εξωτερικό φύλλο στυλ 219 Δημιουργία εξωτερικών στυλ 222 Δημιουργία στυλ για συνδυασμούς ετικετών 229 Επεξεργασία υπάρχοντος στυλ 231 Χρήση Προτεραιότητας στυλ 233 Παραδείγματα προσδιορισμού ιδιαιτερότητας 236 Ορισμός φόντου με CSS 240 Δημιουργία βασικής διάταξης με CSS 244 ΜΑΘΗΜΑ 7 ΧΡΗΣΗ ΣΤΟΙΧΕΙΩΝ ΒΙΒΛΙΟΘΗΚΗΣ 252 Δημιουργία στοιχείου βιβλιοθήκης 254 Τοποθέτηση στοιχείου βιβλιοθήκης σε σελίδα 258 Αναδημιουργία στοιχείου βιβλιοθήκης 261 Τροποποίηση στοιχείου βιβλιοθήκης 262 Ενημέρωση αναφορών βιβλιοθήκης 265

5 Περιεχόμενα 9 ΜΑΘΗΜΑ 8 ΧΡΗΣΗ ΠΡΟΤΥΠΩΝ 268 Δημιουργία προτύπων 271 Προσθήκη επεξεργάσιμων περιοχών σε πρότυπο 273 Διαγραφή επεξεργάσιμων περιοχών 278 Δημιουργία προαιρετικού περιεχομένου 279 Προσθήκη επαναλαμβανόμενων περιοχών 281 Δημιουργία σελίδων με βάση πρότυπο 285 Έλεγχος του προαιρετικού περιεχομένου 288 Προσθήκη επαναλαμβανόμενων καταχωρίσεων 289 Τροποποίηση προτύπου 291 Δημιουργία επεξεργάσιμων χαρακτηριστικών ετικέτας 293 Τροποποίηση επεξεργάσιμου χαρακτηριστικού ετικέτας 294 Δημιουργία ένθετων προτύπων 296 ΜΑΘΗΜΑ 9 ΔΗΜΙΟΥΡΓΙΑ ΠΛΑΙΣΙΩΝ 302 Δημιουργία πλαισιοσυνόλου 305 Αποθήκευση πλαισιοσυνόλου 307 Αλλαγή μεγέθους πλαισίων πλαισιοσυνόλου 309 Ορισμός ιδιοτήτων πλαισίου 313 Δημιουργία και επεξεργασία περιεχομένου πλαισίων 316 Δημιουργία εγγράφων άλλου περιεχομένου 320 Ανοιγμα υπάρχουσας σελίδας σε πλαίσιο 321 Έλεγχος του περιεχομένου πλαισίου 322 Έλεγχος περιεχομένου πλαισίου με συνδέσμους 324 Δημιουργία περιεχομένου χωρίς πλαίσια 325 ΜΑΘΗΜΑ 10 ΔΗΜΙΟΥΡΓΙΑ ΦΟΡΜΩΝ 328 Δημιουργία φόρμας 331 Ομαδοποίηση περιεχομένου φόρμας 333 Προσθήκη πεδίων κειμένου μίας γραμμής 335 Προσθήκη πεδίων κειμένου πολλών γραμμών 341 Προσθήκη πλαισίων ελέγχου 344 Προσθήκη ραδιοπλήκτρων 347 Προσθήκη στοιχείων λίστας και μενού 349 Προσθήκη κουμπιών 352 Δημιουργία κρυφών πεδίων 353 Μορφοποίηση φορμών 355 Επεξεργασία φορμών 357 Δοκιμή των φορμών σας 358 Δημιουργία μενού μετάβασης 360

6 10 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΜΑΘΗΜΑ 11 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΜΕ ΤΟ ΧΡΗΣΤΗ 364 Προσθήκη εναλλαγής εικόνων 366 Προσθήκη συμπεριφορών 369 Εναλλαγή πολλών εικόνων με ένα συμβάν 374 Προσθήκη συμπεριφορών σε εικονοχάρτες 376 Επεξεργασία ενεργειών και συμβάντων 378 Δημιουργία μηνύματος γραμμής κατάστασης 381 Έλεγχος του φυλλομετρητή 382 Άνοιγμα νέου παραθύρου φυλλομετρητή 385 Δημιουργία αναδυόμενου μενού 388 Επικύρωση φορμών 393 ΜΑΘΗΜΑ 12 ΔΙΑΧΕΙΡΙΣΗ ΤΗΣ ΤΟΠΟΘΕΣΙΑΣ ΣΑΣ 398 Χρήση του πάνελ Files 401 Πρόσβαση σε αρχεία του υπολογιστή σας έξω από μια τοποθεσία του Dreamweaver 404 Προσθήκη νέων φακέλων και αρχείων σε μια τοποθεσία 406 Δημιουργία χάρτη τοποθεσίας 409 Εμφάνιση τμήματος της τοποθεσίας 411 Χειρισμός συνδέσμων σε προβολή χάρτη τοποθεσίας 413 Τροποποίηση σελίδων στο πάνελ Files 416 Σύνδεση με απομακρυσμένη τοποθεσία 419 Ανέβασμα αρχείων 423 Συγκάλυψη αρχείων και φακέλων 427 Επιστροφή και παραλαβή 431 Χρήση σημειώσεων σχεδιασμού 435 Εξαγωγή ορισμών τοποθεσίας 437 Συμβατότητα με το Contribute 438 Σύνδεση με το διακομιστή 440 Τι μάθατε 441 ΜΑΘΗΜΑ 13 ΕΥΚΟΛΙΑ ΠΡΟΣΒΑΣΗΣ ΚΑΙ ΔΟΚΙΜΕΣ 442 Δημιουργία κώδικα σύμφωνα με την ενότητα Έλεγχος προσπελασιμότητας 444 Έλεγχος συμβατότητας φυλλομετρητών 447 Έλεγχος των συνδέσμων της τοποθεσίας σας 453 Έλεγχος για "ορφανά" αρχεία 455 Δημιουργία αναφορών για μια τοποθεσία 456 Έλεγχος ορθογραφίας 458

7 Περιεχόμενα 11 ΜΑΘΗΜΑ 14 ΕΠΕΞΕΡΓΑΣΙΑ ΤΟΥ ΚΩΔΙΚΑ 460 Εναλλαγή μεταξύ των προβολών ενός εγγράφου 462 Επεξεργασία κώδικα HTML στην προβολή κώδικα 464 Προσαρμογή της θέσης νέου παραθύρου 467 Μετα-ετικέτες και σχόλια 469 Χρήση του επιλογέα ετικετών 474 Επεξεργασία κώδικα με γρήγορες ετικέτες 476 Χρήση των συμβουλών κώδικα 478 Χρήση εξαρτημάτων 481 Καθαρισμός κώδικα HTML 484 Εργασία με κώδικα HTML του Microsoft Word 486 Εκτύπωση από την προβολή Κώδικα 488 ΜΑΘΗΜΑ 15 ΧΡΗΣΗ ΕΥΡΕΣΗΣ ΚΑΙ ΑΝΤΙΚΑΤΑΣΤΑΣΗΣ 490 Αναζήτηση στο έγγραφό σας 492 Αφαίρεση ετικετών HTML 494 Χρήση Εύρεσης και Αντικατάστασης για την προσάρτηση εξωτερικών φύλλων στυλ 498 Εφαρμογή προσαρμοσμένων στυλ με Εύρεση και Αντικατάσταση 504 Αποθήκευση και νέα χρήση των κριτηρίων αναζήτησης 506 Εύρεση και αντικατάσταση με κανονικές παραστάσεις 509 Εύρεση παραλλαγών ονόματος 512 ΜΑΘΗΜΑ 16 ΔΗΜΙΟΥΡΓΙΑ ΣΤΡΩΣΕΩΝ 514 Δημιουργία στρώσεων 516 Ονομασία στρώσεων 521 Τροποποίηση στρώσεων 523 Αλλαγή της σειράς στοίβαξης των στρώσεων 529 Ένθεση και κατάργηση ένθεσης στρώσεων 531 Αλλαγή της ορατότητας στρώσεων 534 Ορισμός επιλογών καννάβου και χάρακα 535 Χρήση της συμπεριφοράς Drag Layer 538 Χρήση της συμπεριφοράς Show-hide layers 541 Μετατροπή στρώσεων σε πίνακες 543 Η διόρθωση του Netscape για την αλλαγή μεγέθους στρώσεων 546

8 12 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΜΑΘΗΜΑ 17 ΕΠΕΚΤΑΣΗ ΤΟΥ DREAMWEAVER 548 Εγκατάσταση επεκτάσεων 550 Χρήση της επέκτασης Calendar 555 Χρήση της επέκτασης Superscript 556 Χρήση της επέκτασης Toggle Checkboxes 557 Χρήση της επέκτασης Lorem and More 559 Δημιουργία ενός απλού αντικειμένου 561 Προσαρμογή για προχωρημένους 565 Τι μάθατε 565 ΠΑΡΑΡΤΗΜΑ Α ΚΑΝΟΝΙΚΕΣ ΠΑΡΑΣΤΑΣΕΙΣ 566 ΠΑΡΑΡΤΗΜΑ B ΣΥΝΤΟΜΕΥΣΕΙΣ ΣΤΟ MACINTOSH 568 ΠΑΡΑΡΤΗΜΑ Γ ΣΥΝΤΟΜΕΥΣΕΙΣ ΣΕ WINDOWS 574 ΕΥΡΕΤΗΡΙΟ 580

9

10 Χρήση εικόνων ΜΑΘΗΜΑ 3 Οι εικόνες και τα στοιχεία πολυμέσων παίζουν σημαντικό ρόλο όταν θέλετε να τραβήξετε την προσοχή του κοινού σας και να μεταδώσετε αποτελεσματικά το μήνυμα που θέλετε να μεταδίδει η τοποθεσία Ιστού σας. Σε αυτό το μάθημα, θα δημιουργήσετε τοποθεσίες Ιστού που περιέχουν γραφικά, καθώς και ταινίες Flash και QuickTime. Στην πορεία, θα μάθετε για τις διαφορετικές μορφές των αρχείων γραφικών, πώς να ελέγχετε την εμφάνισή τους σε ένα έγγραφο HTML, και πώς να τα συνδυάζετε με κείμενο. Οι δυνατότητες του Dreamweaver MX 2004 σάς δίνουν σημαντικό έλεγχο στα γραφικά και σε άλλα στοιχεία πολυμέσων που χρησιμοποιούνται στην τοποθεσία σας. Σας δίνουν τη δυνατότητα να τρο- Σε αυτό το μάθημα, θα δημιουργήσετε μια σελίδα όμοια με αυτή που βλέπετε εδώ, και θα μάθετε πώς να συνδυάζετε εικόνες με κείμενο στις σελίδες σας.

11 Μάθημα 3: Χρήση εικόνων 81 ποποιείτε γρήγορα τις ιδιότητες των εικόνων μέσα στο Dreamweaver, καθώς και να ανοίγετε αμέσως εικόνες μέσα σε ένα εξωτερικό πρόγραμμα επεξεργασίας εικόνων. Το πάνελ Assets (Πόροι) απλοποιεί τη διαχείριση γραφικών, επιτρέποντάς σας να δημιουργείτε καταλόγους όλων των εικόνων της τοποθεσίας σας ή εικόνων που πρέπει να έχετε διαθέσιμες. Αν θέλετε να δείτε το τελικό αποτέλεσμα αυτού του μαθήματος, ανοίξτε τη σελίδα invent_lens.htm, από το φάκελο Completed, που περιέχεται στο φάκελο Lesson_03_Graphics. ΤΙ ΘΑ ΜΑΘΕΤΕ Σε αυτό το μάθημα: Θα αναγνωρίσετε μορφές εικόνων και θα εξερευνήσετε τις διαφορές τους Θα εισαγάγετε εικόνες σε μια σελίδα Θα τροποποιήσετε τις ιδιότητες των εικόνων σας Θα αλλάξετε τη θέση των γραφικών σε μια σελίδα Θα δώσετε στις εικόνες σας ονόματα και χαρακτηριστικά <alt> Θα χρησιμοποιήσετε το πάνελ Assets για τη διαχείριση εικόνων Θα αναδιπλώσετε κείμενο γύρω από μια εικόνα Θα χρησιμοποιήσετε δεσμευτικά θέσης εικόνων Θα χρησιμοποιήσετε βασικά εργαλεία επεξεργασίας εικόνων για την προσαρμογή γραφικών Θα ευθυγραμμίσετε κείμενο με μια εικόνα Θα εισαγάγετε κουμπιά και κινούμενες εικόνες από το Macromedia Flash Θα δημιουργήσετε μια προβολή διαφανειών (slideshow) με τη λειτουργία Image Viewer Θα ενσωματώσετε μια ταινία QuickTime σε μια σελίδα

12 82 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΔΙΑΡΚΕΙΑ ΜΑΘΗΜΑΤΟΣ Αυτό το μάθημα θα διαρκέσει περίπου μία ώρα. ΑΡΧΕΙΑ ΜΑΘΗΜΑΤΟΣ Αρχεία πολυμέσων: Lesson_03_Graphics/Images/bkg_inside_tan.gif Lesson_03_Graphics/Images/invlens_header.gif Lesson_03_Graphics/Images/ptarena_lens.jpg Lesson_03_Graphics/Images/ptarena_outlens.jpg Lesson_03_Graphics/Images/ptarena_belowlight.jpg Lesson_03_Graphics/Images/LenseDemoY.swf Lesson_03_Graphics/Images/ptarena_prisms.jpg Lesson_03_Graphics/Images/cabrillo.mov Lesson_03_Graphics/Images/arena_photo.jpg Lesson_03_Graphics/Images/bonita_photo.jpg Lesson_03_Graphics/Images/bridge_photo.jpg Lesson_03_Graphics/Images/fort_photo.jpg Lesson_03_Graphics/Images/montara_photo.jpg Lesson_03_Graphics/Images/pigeon_photo.jpg Lesson_03_Graphics/Images/reyes_photo.jpg Lesson_03_Graphics/Images/pt_cabrillo_header.jpg Αρχεία αφετηρίας: Lesson_03_Graphics/Text/invent.txt Lesson_03_Graphics/Text/lens_demo.txt Lesson_03_Graphics/cabrillo.htm Lesson_03_Graphics/lightshow.htm Ολοκληρωμένο έργο: Lesson_03_Graphics/Completed/invent_lens.htm Lesson_03_Graphics/Completed/lens_demo.htm Lesson_03_Graphics/Completed/cabrillo.htm Lesson_03_Graphics/Completed/lightshow.htm

13 Μάθημα 3: Χρήση εικόνων 83 ΧΡΗΣΗ ΕΙΚΟΝΑΣ ΦΟΝΤΟΥ Σε αυτή την άσκηση, θα προσθέσετε μια εικόνα φόντου σε ένα νέο έγγραφο, με το οποίο θα δουλέψετε στο υπόλοιπο του μαθήματος. Μια εικόνα φόντου είναι γενικά μια μικρή εικόνα που τοποθετείται σε παράθεση (tiled) στη σελίδα σας, επαναλαμβανόμενη στο πλάτος και το ύψος του παραθύρου τού φυλλομετρητή. Μια τέτοια εικόνα φόντου δεν επηρεάζει την ύπαρξη (ή την έλλειψη) ράβδων κύλισης στη σελίδα σας. Μπορείτε να ορίσετε και χρώμα φόντου και εικόνα φόντου για τις σελίδες σας. Σε αργές συνδέσεις ή σε παλαιότερους αργούς φυλλομετρητές, ίσως δείτε το χρώμα φόντου να εμφανίζεται πρώτο ένας σοβαρός λόγος να ορίζετε χρώμα φόντου ακόμη και αν σχεδιάζετε να χρησιμοποιήσετε εικόνα φόντου. Αφού φορτωθεί, η εικόνα φόντου παραμένει στην οθόνη επικαλύπτοντας το χρώμα φόντου. 1) Δημιουργήστε ένα αρχείο HTML επιλέγοντας HTML στη στήλη Create New (Δημιουργία νέας) της σελίδας εκκίνησης και αποθηκεύστε το με το όνομα invent_lens.htm στο φάκελο DWMX2004_Project/Lesson_03_Graphics. Πληκτρολογήστε τον τίτλο Lights of the Coast: Lights: Creating the Lights μέσα στο πεδίο κειμένου Title της γραμμής εργαλείων Document. Σε αυτό το βήμα δημιουργείτε, αποθηκεύετε, και δίνετε τίτλο σε ένα νέο έγγραφο όπως μάθατε στο Μάθημα 1. Το έγγραφο που δημιουργείτε σε αυτό το μάθημα αποτελεί μέρος της ενότητας Lights του έργου τοποθεσίας Ιστού Lights of the Coast. Για να το δείξετε αυτό στους επισκέπτες, καθώς και τη θέση του μέσα στην τοποθεσία, δίνετε στη σελίδα έναν τίτλο που αρχίζει με το όνομα της τοποθεσίας, το όνομα της ενότητας όπου ανήκει το έγγραφο, και τέλος το όνομα του ίδιου του εγγράφου. Αυτή η μέθοδος ονομασίας κάνει εξαιρετικά σαφές ποια σελίδα εμφανίζεται στο φυλλομετρητή και τη θέση της στην τοποθεσία. 2) Επιλέξτε Modify > Page Properties (Τροποποίηση, Ιδιότητες σελίδας) και επιλέξτε την κατηγορία Appearance (Εμφάνιση). Πληκτρολογήστε τον κωδικό #CCCC99 το πεδίο κειμένου Background color (Χρώμα φόντου) και μετά πληκτρολογήστε # στο πεδίο κειμένου Text color, για να ορίσετε το προεπιλεγμένο χρώμα γραμματοσειράς σε μαύρο. ΣΥΜΒΟΥΛΗ Χρησιμοποιήστε τα πλήκτρα συντόμευσης Command+J (Macintosh) ή Ctrl+J (Windows) για να ανοίξετε αμέσως το πλαίσιο διαλόγου Page Properties. Το καλύτερο είναι να εφαρμόσετε αυτές τις γενικές ρυθμίσεις εγγράφου πριν ξεκινήσετε τη διαμόρφωση των σελίδων σας. Μπορείτε να τις τροποποιήσετε οποιαδήποτε στιγμή αργότερα, αλλά βοηθάει να βλέπετε το έγγραφο με τα χρώματα και τις ρυθμίσεις που θα χρησιμοποιηθούν.

14 84 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX ) Πατήστε στο κουμπί Browse (Αναζήτηση) δίπλα στο πλαίσιο κειμένου Background image (Εικόνα φόντου). Εντοπίστε την εικόνα bkg_inside_tan.gif στο φάκελο Images του φακέλου Lesson_3_Graphics. Πατήστε στη διαταγή Choose (Macintosh) ή στο ΟΚ (Windows) για να ορίσετε την εικόνα ως φόντο της σελίδας, και μετά πατήστε ξανά στο ΟΚ για να κλείσετε το πλαίσιο διαλόγου Page Properties. ΤΟ ΠΛΑΙΣΙΟ ΔΙΑΛΟΓΟΥ PAGE PROPERTIES ΚΑΤΑ ΤΗΝ ΕΠΙΛΟΓΗ ΜΙΑΣ ΕΙΚΟΝΑΣ ΦΟΝΤΟΥ Οι αλλαγές σας εφαρμόζονται στο έγγραφο και βλέπετε την εικόνα φόντου να τοποθετείται σε παράθεση στο παράθυρο Εγγράφου. Η εικόνα bkg_inside_tan.gif τοποθετείται σε παράθεση κατά πλάτος της σελίδας, δημιουργώντας οριζόντιες λωρίδες λευκού, μαύρου, και καφέ χρώματος. Οι εικόνες φόντου τοποθετούνται σε παράθεση και οριζόντια και κατακόρυφα. Αν η σελίδα γινόταν μεγαλύτερη από την εικόνα φόντου, θα βλέπατε τις άσπρες και τις μαύρες γραμμές να επαναλαμβάνονται. Μπορείτε να δημιουργήσετε μια εικόνα φόντου σε ένα πρόγραμμα επεξεργασίας εικόνων όπως το Macromedia Fireworks. ΣΥΜΒΟΥΛΗ Αν έχετε να διαλέξετε από πολλές εικόνες φόντου, μπορείτε να πατήσετε στο κουμπί Apply (Εφαρμογή) για να δείτε την εικόνα φόντου στη σελίδα σας χωρίς να κλείσετε το πλαίσιο διαλόγου Page Properties. Αν θέλετε να διαγράψετε μια εικόνα φόντου, πρέπει να ανοίξετε το πλαίσιο διαλόγου Page Properties και να διαγράψετε το όνομα αρχείου στο πλαίσιο κειμένου Background. Γι' αυτό το μάθημα όμως, αφήστε την εικόνα φόντου στο έγγραφο. Ένα όνομα διαδρομής (pathname), ή διαδρομή (path), περιγράφει τη θέση ενός αρχείου. Αν όταν προσθέσετε μια εικόνα φόντου δεν έχετε αποθηκεύσει ακόμη το αρχείο σας, εμφανίζεται στο πλαίσιο κειμένου ολόκληρο το όνομα διαδρομής της εικόνας στο σκληρό σας δίσκο. Βλέπετε μια προειδοποίηση που σας ενημερώνει γι' αυτό και σας συμβουλεύει να αποθηκεύσετε τη σελίδα σας. Μέχρι να αποθηκεύσετε το αρχείο σας, το Dreamweaver δεν έχει τρόπο να κάνει τέτοιου είδους αναφορές, οπότε τοποθετεί ένα όνομα διαδρομής βασισμένο στη θέση της εικόνας στο σκληρό σας δίσκο αντί για έναν έγκυρο σύνδεσμο. Όταν αποθηκεύετε το αρχείο σας, το όνομα της διαδρομής ενημερώνεται και

15 Μάθημα 3: Χρήση εικόνων 85 δείχνει τη θέση του γραφικού σε σχέση με το έγγραφό σας. Ωστόσο, είναι πάντα καλύτερα να αποθηκεύετε το αρχείο σας πριν εισαγάγετε γραφικά ακόμη και εικόνες φόντου. Τα ονόματα διαδρομών στο σκληρό σας δίσκο δε λειτουργούν στον απομακρυσμένο διακομιστή αν εισαγάγετε γραφικά χωρίς να αποθηκεύσετε πρώτα τη σελίδα σας, διατρέχετε τον κίνδυνο να έχετε "σπασμένες" εικόνες. ΣΗΜΕΙΩΣΗ Αν η εικόνα που θα επιλέξετε στο πλαίσιο διαλόγου Select Image Source (Επιλογή προέλευσης εικόνας) είναι έξω από την τοπική σας τοποθεσία, το Dreamweaver εμφανίζει μια προειδοποίηση και σας δίνει τη δυνατότητα να αντιγράψετε το αρχείο στην τοποθεσία σας. Οι σελίδες και τα στοιχεία (HTML, εικόνες, πολυμέσα, κ.ο.κ.) που χρησιμοποιείτε στην τοποθεσία σας συνήθως βρίσκονται στον τοπικό βασικό σας φάκελο. Μπορείτε επίσης να χρησιμοποιείτε στοιχεία που δεν υπάρχουν στον τοπικό βασικό φάκελο αλλά βρίσκονται σε μια θέση στο Διαδίκτυο, είτε στη δική σας τοποθεσία είτε αλλού, με τη χρήση απόλυτων διαδρομών (καλύπτονται στο Μάθημα 4) μιας τεχνικής που χρησιμοποιείται συχνά για διαφημιστικά πανώ (banners). Επειδή τέτοιου είδους στοιχεία δεν εμφανίζονται στο παράθυρο Εγγράφου του Dreamweaver, πρέπει να δείτε μια προεπισκόπηση της σελίδας (ή των σελίδων) σας στο φυλλομετρητή. ΤΟΠΟΘΕΤΗΣΗ ΕΙΚΟΝΩΝ ΣΤΗ ΣΕΛΙΔΑ Οι πιο συνηθισμένες και ευρέως υποστηριζόμενες μορφές γραφικών στον Ιστό είναι η GIF (Graphics Interchange Format Μορφή Ανταλλαγής Γραφικών) και η JPEG (Joint Photographic Experts Group Ένωση Ειδικών στη Φωτογραφία). Όταν αποφασίζετε αν θα αποθηκεύσετε ένα γραφικό ως GIF ή JPEG, επιδιώξτε την υψηλότερη ποιότητα εικόνας και το μικρότερο δυνατό μέγεθος αρχείου. Ως γενικό κανόνα, χρησιμοποιήστε τη μορφή GIF αν το γραφικό έχει μεγάλες περιοχές ομοιόμορφων χρωμάτων και λίγη ή καθόλου ανάμιξη χρωμάτων. Η μορφή GIF είναι καλή για κείμενο, διανυσματικά γραφικά, εικόνες με περιορισμένο αριθμό χρωμάτων, και πολύ μικρές διαστάσεις εικόνων. Οι εικόνες GIF μπορούν να αποθηκευτούν σε κατάσταση χρώματος 8 bit (το πολύ), όπου μπορούν να α- πεικονιστούν μόνο 256 χρώματα. Τα αρχεία GIF συνήθως φορτώνονται γρηγορότερα, έχουν περισσότερες επιλογές βελτιστοποίησης, και υποστηρίζουν διαφάνεια και κινούμενες εικόνες. Συνήθως επιλέγετε τη μορφή JPEG για φωτογραφικές εικόνες ή εικόνες με πολλές διαβαθμίσεις τόνων. Η μορφή JPEG χειρίζεται πολύ καλά την ανάμιξη χρωμάτων και μπορεί να δώσει πολύ υψηλότερης ποιότητας φωτογραφικές εικόνες σε ένα κλάσμα του μεγέθους ενός αρχείου GIF. Η μορφή JPEG αποθηκεύει την εικόνα σε κατάσταση χρώματος 24 bit, διατηρώντας όλα τα χρώματα και χρησιμοποιώντας μια απωλεστική μέθοδο συμπίεσης, όπου τα δεδομένα που είναι περιττά χάνονται. Όσο χαμηλότερη είναι η ποιότητα μιας εικόνας JPEG, τόσο περισσότερες πληροφορίες για την εικόνα χάνονται μέσω αυτής της απόρριψης δεδομένων. ΣΗΜΕΙΩΣΗ Στον Ιστό, χρησιμοποιείται επίσης μια τρίτη μορφή γραφικών, η PNG (Portable Network Graphic Φορητά Γραφικά Δικτύου). Η μορφή PNG συνδυάζει χαρακτηριστικά των μορφών JPEG και GIF. Τα αρχεία PNG δεν έχουν απώλειες, συμπιέζονται καλύτερα από τα αρχεία GIF, και διατηρούν όλα τα χρώματα όπως ένα αρχείο JPG. Η PNG δεν υποστηρίζει κινούμενες εικόνες και δεν υποστηρίζεται από παλαιότερους φυλλομετρητές. Σε αυτό το βιβλίο, όλες οι εικόνες με τις οποίες θα εργαστείτε έχουν ήδη αποθηκευτεί για χρήση στον Ιστό ως GIF και JPEG. Δε χρειάζεται να αποθηκεύσετε ή να βελτιστοποιήσετε γραφικά.

16 86 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX ) Τοποθετήστε το σημείο εισαγωγής στην πρώτη γραμμή του εγγράφου. Πατήστε στο κουμπί του μενού Images στην κατηγορία Common της γραμμής εργαλείων Insert στη συνέχεια, ενεργοποιήστε την επιλογή Images. Ανοίγει το πλαίσιο διαλόγου Select Image Source (Επιλογή προέλευσης εικόνας), το οποίο σας επιτρέπει να εισαγάγετε μια εικόνα στη σελίδα. Μια εναλλακτική μέθοδος είναι να επιλέξετε Insert > Image. ΜΕΝΟΥ IMAGES ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΣΥΜΒΟΥΛΗ Για τους χρήστες των Windows, το πλαίσιο ελέγχου Preview images (Προεπισκόπηση εικόνων) διαθέτει μια χρήσιμη επιλογή που σας δίνει τη δυνατότητα να βλέπετε μια μικρογραφία των εικόνων στις οποίες πατάτε, κατά την αναζήτησή σας. Όταν αυτή η επιλογή είναι ενεργοποιημένη, οι εικόνες εμφανίζονται στο πλαίσιο διαλόγου Select Image Source μαζί με τις διαστάσεις τους, το μέγεθος αρχείου τους, και έναν κατά προσέγγιση χρόνο φόρτωσης. Στο Macintosh δεν υπάρχει πλαίσιο ελέγχου Preview images, αλλά βλέπετε την προεπισκόπηση των εικόνων μαζί με τις διαστάσεις, το μέγεθος αρχείου, και το χρόνο φόρτωσης στο δεξιό τμήμα του πλαισίου διαλόγου Select Image Source αφού επιλέξετε μια εικόνα. 2) Εντοπίστε το αρχείο Lesson_03_Graphics/Images/invlens_header.gif. Το πλαίσιο διαλόγου Select Image Source περιέχει μια ποικιλία επιλογών. Μπορείτε να καθορίσετε το φάκελο από τον οποίο θέλετε να διαλέξετε μια εικόνα, χρησιμοποιώντας το μενού From (Από Macintosh) ή το μενού Look in (Αναζήτηση σε Windows) ή την παρουσίαση αρχείων και φακέλων από κάτω. Οι χρήστες του Macintosh διαθέτουν μια ιεραρχική προβολή που τους δίνει τη δυνατότητα να μεταφέρονται σε διάφορα επίπεδα αρχείων και φακέλων. Οι χρήστες των Windows έχουν στη διάθεσή τους ένα μενού Files of type (Αρχεία τύπου) που μπορούν να χρησιμοποιήσουν για να περιορίσουν την παρουσίαση σε συγκεκριμένα είδη αρχείων, και ένα πεδίο κειμένου File name (Όνομα αρχείου) που εμφανίζει το όνομα του επιλεγμένου αρχείου (χωρίς την προέκτασή του). Το πεδίο κειμένου URL (Uniform Resource Locator Ενιαίος Εντοπιστής Πόρων) εμφανίζει τη διαδρομή που θα χρησιμοποιηθεί από το έγγραφο για την προσπέλαση της επιλεγμένης εικόνας. Κάτω από το πεδίο κειμένου URL, βρίσκεται το μενού Relative to (Σχετικό με) με προεπιλογή την Document (Έγγραφο), η επιλογή Relative to σας επιτρέπει να διαλέξετε πώς θα αναφέρεται το Dreamweaver στις εικόνες: με αναφορές σχετικές με έγγραφα (document-relative η επιλογή Document) ή σχετικές με τη βασική τοποθεσία (site-root-relative η επιλογή Site [Macintosh] ή Site Root [Windows]). Στην αναφορά σχετικά με το έγγραφο, το Dreamweaver κατασκευάζει τη διαδρομή προς την εικόνα με βάση τη σχετική θέση του εγγράφου της HTML ως προς το αρχείο του γραφικού. Όταν στο μενού Relative είναι ενεργοποιημένη η επιλογή Document, στα δεξιά του μενού εμφανίζεται το όνομα αρχείου του εγγράφου στο οποίο εισάγετε την εικόνα σε αυτή την περίπτωση, θα δείτε το αρχείο invent_lens.htm. Η σχετική με τη βασική τοποθεσία αναφορά

17 Μάθημα 3: Χρήση εικόνων 87 κατασκευάζει τη διαδρομή προς την εικόνα με βάση τη σχετική θέση της επιλεγμένης εικόνας ως προς το βασικό φάκελο της τοποθεσίας, τη ρίζα, δηλαδή το ανώτατο επίπεδο του τοπικού βασικού φακέλου. Αν είναι ενεργοποιημένη η επιλογή Site (Macintosh) ή Site Root (Windows), στα δεξιά τού μενού εμφανίζεται το όνομα της τοποθεσίας. Γενικά, πρέπει να χρησιμοποιείτε συνδέσμους και διαδρομές σε σχέση με έγγραφα. Αν έχετε μια πολύ μεγάλη τοποθεσία ή σχεδιάζετε να μετακινείτε συχνά σελίδες, ίσως πρέπει να χρησιμοποιήσετε αναφορά σχετική με τη βασική τοποθεσία. Στο βιβλίο αυτό, πρέπει να χρησιμοποιείτε για τις εικόνες μόνο διαδρομές σχετικές με έγγραφα. Στο πλαίσιο διαλόγου Select Image Source, έχετε και πολλές άλλες επιλογές που προορίζονται για δυναμικές τοποθεσίες. Στην ενότητα Select file name from (Επιλογή ονόματος αρχείου από), οι χρήστες του Macintosh έχουν ένα κουμπί Data Sources (Προελεύσεις δεδομένων) και ένα κουμπί Sites and Servers (Τοποθεσίες και διακομιστές). Οι χρήστες των Windows έχουν στη διάθεσή τους δύο ραδιοπλήκτρα, τα File System (Σύστημα αρχείων) και Data Sources, καθώς και ένα κουμπί Sites and Servers. Η επιλογή File system είναι η προεπιλεγμένη προβολή τόσο στο Macintosh όσο και στα Windows γι' αυτή την τοποθεσία, και για άλλες όμοιες με αυτή που δε χρησιμοποιούν τεχνολογία διακομιστή (όπως ColdFusion, ASP, JSP, ή PHP). Οι επιλογές Data Sources και Sites and Servers χρησιμοποιούνται για δυναμικές τοποθεσίες όπου ένα έγγραφο εκτελείται σε ένα διακομιστή εφαρμογών (application server). Δε χρειάζεται να χρησιμοποιήσετε αυτές τις επιλογές στα μαθήματα αυτού του βιβλίου επειδή δε θα δημιουργήσετε μια δυναμική τοποθεσία οδηγούμενη από δεδομένα.

18 88 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΣΥΜΒΟΥΛΗ Για τους χρήστες του Macintosh υπάρχει ένα πεδίο κειμένου Go to (Μετάβαση σε) κοντά στο κάτω μέρος του πλαισίου διαλόγου Select Image Source πρόκειται για χαρακτηριστικό του συστήματος OS X. Μπορείτε να χρησιμοποιείτε αυτό το πεδίο κειμένου για να πληκτρολογείτε τη διαδρομή Unix προς μια θέση από την οποία θα θέλατε να επιλέξετε μια εικόνα. Όταν πληκτρολογείτε μια θέση, τα παράθυρα φακέλων και αρχείων ενημερώνονται ώστε να απεικονίζουν τα περιεχόμενα της θέσης που καθορίσατε. Για να μεταφερθείτε σε μια θέση με αυτόν τον τρόπο, πρέπει να γνωρίζετε τη δομή αρχείων του συστήματος Unix στο οποίο βασίζεται το σύστημα OS X. 3) Πατήστε στο κουμπί Choose (Macintosh) ή ΟΚ (Windows). Η εικόνα εμφανίζεται στο παράθυρο Εγγράφου. ΣΗΜΕΙΩΣΗ Αυτή η εικόνα είναι αποθηκευμένη σε μορφή GIF για να διατηρεί τα αδρά περιγράμματα του κειμένου. Σε μορφή JPEG, η ίδια εικόνα θα εμφάνιζε τεχνουργήματα (artifacts) JPEG (μικρά τετράγωνα στις θέσεις που έχουν απορριφθεί πλεονάζοντα δεδομένα, τα οποία είναι πιο συχνά σε περιοχές ομοιόμορφων χρωμάτων) στο λευκό φόντο αν αποθηκευόταν με μικρό μέγεθος αρχείου κοντά σε αυτό της μορφής GIF. Αν η εικόνα αποθηκευόταν ως υψηλής ποιότητας JPEG με στόχο την ίδια ποιότητα με τη μορφή GIF, θα είχε πολύ μεγαλύτερο μέγεθος αρχείου. Σε αυτή την περίπτωση, η GIF ήταν η καλύτερη επιλογή. ΑΝΑΝΕΩΣΗ ΚΑΙ ΑΛΛΑΓΗ ΜΕΓΕΘΟΥΣ ΕΙΚΟΝΩΝ Όταν εισάγετε μια εικόνα, το πλάτος και το ύψος της φαίνονται στον επιθεωρητή Ιδιοτήτων και τοποθετούνται αυτόματα στον κώδικα, δίνοντας στο φυλλομετρητή τις πληροφορίες που χρειάζεται για τη διάταξη της σελίδας. Αυτή η σημαντική επιλογή μπορεί να διαφοροποιήσει την ταχύτητα φόρτωσης των εικόνων σας. 1) Με επιλεγμένη την εικόνα invlens_header.gif, χρησιμοποιήστε τον επιθεωρητή Ιδιοτήτων για να αλλάξετε το πλάτος, στο πεδίο W, σε 220 πίξελ και το ύψος, στο πεδίο H, σε 38 πίξελ. Πρέπει να πατήσετε Return (Macintosh) ή Enter (Windows), ή να πατήσετε μέσα στο παράθυρο Εγγράφου για να εφαρμόσετε την αλλαγή και να ανανεώσετε την προβολή. Τα νέα χαρακτηριστικά πλάτους και ύψους της ετικέτας <img> (image εικόνα) εμφανίζουν την εικόνα σε μικρότερες διαστάσεις, χωρίς να μικραίνει το πραγματικό αρχείο του γραφικού. Παρατηρήστε ότι το μέγεθος αρχείου τής επιλεγμένης εικόνας, που εμφανίζεται στον επιθεωρητή Ιδιοτήτων, δεν αλλάζει. Έχετε πολλά πλεονεκτήματα αν κάνετε όλες τις προσαρμογές, όπως της οξύτητας, της ποιότητας εικόνας, και του μεγέθους αρχείου, σε ένα πρόγραμμα επεξεργασίας εικόνων. Αν μειώνατε το μέγεθος της ίδιας εικόνας σε ένα πρόγραμμα επεξεργασίας εικόνων και τη βελτιστοποιούσατε εκ νέου για τον Ιστό, το αρχείο θα ήταν μικρότερο σε μέγεθος αλλά με υψηλότερη ποιότητα εικόνας.

19 Μάθημα 3: Χρήση εικόνων 89 ΣΗΜΕΙΩΣΗ Το μέγεθος αρχείου παίζει σημαντικό ρόλο στις ιστοσελίδες. Όσο μικρότερο είναι το μέγεθος του αρχείου, τόσο γρηγορότερα φορτώνονται οι εικόνες σας. Και όσο γρηγορότερα φορτώνονται οι εικόνες, τόσο πιθανότερο είναι οι επισκέπτες σας να μείνουν για να δουν την τοποθεσία σας. ΜΕΓΕΘΟΣ ΑΡΧΕΙΟΥ ΠΛΑΤΟΣ ΠΡΟΕΛΕΥΣΗ ΕΙΚΟΝΑΣ ΕΠΑΝΑΦΟΡΑ ΜΕΓΕΘΟΥΣ ΥΨΟΣ ΕΠΑΝΑΦΟΡΑ ΜΕΓΕΘΟΥΣ Ο ΕΠΙΘΕΩΡΗΤΗΣ ΙΔΙΟΤΗΤΩΝ ΜΕ ΤΙΣ ΙΔΙΟΤΗΤΕΣ ΤΗΣ ΕΠΙΛΕΓΜΕΝΗΣ ΕΙΚΟΝΑΣ 2) Πατήστε σε μια από τις λαβές επιλογής τα μαύρα τετράγωνα στο περίγραμμα της επιλεγμένης εικόνας. Σύρετε για να αυξήσετε το αρχικό μέγεθος της εικόνας. Οι ρυθμίσεις πλάτους και ύψους ενημερώνονται αυτόματα. Παρατηρήστε ότι οι νέες διαστάσεις εμφανίζονται με έντονη γραφή. Αυτό είναι μια ένδειξη ότι η εικόνα έχει αλλάξει μέγεθος. Ορισμένες φορές, ίσως αλλάξετε κατά λάθος το μέγεθος μιας εικόνας, οπότε οι έντονοι αριθμοί θα σας το υποδείξουν. ΣΥΜΒΟΥΛΗ Κρατήστε πατημένο το πλήκτρο Shift και σύρετε τις λαβές επιλογής της εικόνας για να διατηρήσετε τις αναλογίες της. Παρατηρήστε ότι, όταν μεγαλώσατε την εικόνα, μειώθηκε η ποιότητά της. Οι εικόνες εμφανίζονται στους φυλλομετρητές σε ανάλυση οθόνης, η οποία είναι 72 dpi. Η ανάλυση δεν είναι αρκετά υψηλή ώστε να εμφανίσει μια εικόνα σε μέγεθος μεγαλύτερο από το φυσικό της άλλος ένας λόγος για να προσαρμόζετε το μέγεθος της εικόνας με λογισμικό επεξεργασίας εικόνων (όπως το Macromedia Fireworks και το Adobe Photoshop) ώστε να εξασφαλίζετε το μικρότερο δυνατό μέγεθος αρχείου. 3) Στον επιθεωρητή Ιδιοτήτων, πατήστε στο κουμπί Reset Image to Original Size (Επαναφορά εικόνας στο αρχικό μέγεθος), που βρίσκεται ακριβώς δεξιά από τα πεδία κειμένου W και H. Το κουμπί Reset Image to Original Size χαρακτηρίζεται από ένα εικονίδιο ανανέωσης. Βρίσκεται στο κέντρο των γραμμών που συνδέουν τα πεδία κειμένου W και H. Το εικονίδιο ανανέωσης και οι γραμμές σύνδεσης σας παρέχουν άλλη μία ένδειξη ότι οι διαστάσεις της εικόνας έχουν αλλάξει. Η εικόνα επανέρχεται στο αρχικό μέγεθός της. Παρατηρήστε ότι οι τιμές πλάτους και ύψους δεν είναι πια έντονες, δείχνοντας ότι η εικόνα έχει το αρχικό της μέγεθος.

20 90 Ο Επίσημος Οδηγός του Macromedia Dreamweaver MX 2004 ΣΗΜΕΙΩΣΗ Όταν χρησιμοποιείτε πολύ μεγάλες εικόνες ή εικόνες που βρίσκονται σε άλλους διακομιστές, μπορείτε να δώσετε ένα δείγμα στους επισκέπτες σας χρησιμοποιώντας μια εικόνα "χαμηλής προέλευσης" (low source). Καθορίζοντας μια χαμηλή προέλευση, επιλέγετε μια εικόνα χαμηλότερης ποιότητας που θα εμφανιστεί πρώτα. Η εικόνα υψηλότερης ποιότητας θα εμφανιστεί στη θέση της όταν ολοκληρωθεί η λήψη της. Όταν είναι επιλεγμένη μια εικόνα, ο επιθεωρητής Ιδιοτήτων παρέχει ένα πεδίο κειμένου Low Src για τον καθορισμό μιας εικόνας χαμηλής προέλευσης. Πατήστε στο εικονίδιο Browse for File Folder (Αναζήτηση φακέλου αρχείων) δίπλα στο πεδίο, για να επιλέξετε μια εικόνα. Αυτή η τεχνική χρησιμοποιείται κάποιες φορές όταν γνωρίζετε ότι η τελική εικόνα θα έχει μεγάλο μέγεθος αρχείου και, συνεπώς, η λήψη της θα διαρκέσει περισσότερο από το χρόνο που ίσως είναι διατεθειμένος να περιμένει ο χρήστης, ή όταν η εικόνα λαμβάνεται από μια προέλευση που καθυστερεί συχνά τις μεταφορές αρχείων. Οι εικόνες χαμηλής προέλευσης που χρησιμοποιούνται σε τέτοιες καταστάσεις συνήθως εμφανίζουν τη λέξη "Loading" (Φόρτωση) ή παρόμοια μηνύματα. ΤΟΠΟΘΕΤΗΣΗ ΓΡΑΦΙΚΩΝ Όταν τοποθετείτε μια εικόνα απευθείας στο σώμα ενός εγγράφου, έχετε περιορισμένο αριθμό επιλογών σχετικά με την τοποθέτησή της. Η παρακάτω άσκηση παρουσιάζει μια μέθοδο στοίχισης που χρησιμοποιεί ετικέτες <div> αποδέκτες (containers) που καθορίζουν τη στοίχιση οποιουδήποτε στοιχείου βρίσκεται μεταξύ των ετικετών έναρξης και τερματισμού. Θα μάθετε άλλους τρόπους τοποθέτησης εικόνων αργότερα σε αυτό το μάθημα. 1) Στο έγγραφο invent_lens.htm, πατήστε στην εικόνα invlens_header.gif για να την επιλέξετε. Στον επιθεωρητή Ιδιοτήτων, πατήστε στο κουμπί Align Center (Στοίχιση στο κέντρο). Αν δε βλέπετε το κουμπί Align Center, πατήστε στο βέλος επέκτασης στην κάτω δεξιά γωνία. Η εικόνα κεντράρεται στη σελίδα. ΕΠΙΛΟΓΕΣ ΣΤΟΙΧΙΣΗΣ ΕΙΚΟΝΩΝ ΣΤΟΝ ΕΠΙΘΕΩΡΗΤΗ ΙΔΙΟΤΗΤΩΝ ΣΤΟΙΧΙΣΗ ΑΡΙΣΤΕΡΑ ΣΤΟΙΧΙΣΗ ΔΕΞΙΑ ΣΤΟΙΧΙΣΗ ΣΤΟ ΚΕΝΤΡΟ ΣΥΜΒΟΥΛΗ Το κουμπί Align Center δεν είναι το ίδιο με το μενού Align που θα δείτε κάτω από τα τρία κουμπιά στοίχισης. 2) Προσθέστε μια αλλαγή παραγράφου μετά την εικόνα του τίτλου της σελίδας, πατώντας έξω από την εικόνα και μετά το πλήκτρο Return (Macintosh) ή Enter (Windows). Αντιγράψτε και επικολλήστε το κείμενο από το αρχείο invent.txt, στη νέα παράγραφο. Επιλέξτε όλο το κείμενο και πατήστε στο κουμπί Align Left (Στοίχιση αριστερά) του επιθεωρητή Ιδιοτήτων για να καθορίσετε αριστερή στοίχιση. Μπορείτε να αντιγράψετε και να επικολλήσετε το κείμενο από το αρχείο invent.txt στο έγγραφο invent_lens.htm, όπως κάνατε και στο Μάθημα 2. Το αρχείο invent.txt είναι στο φάκελο Text του φακέλου Lesson_03_Graphics.