Πώς να οικοδομήσουμε μια Picture Show Gallery εικόνας στο Dreamweaver CS3

Α " δείχνουν εικόνα ", ή " γκαλερί εικόνων ", παρουσιάζει φωτογραφίες σε μια ιστοσελίδα χαρτοφυλάκιο μοιάζει . Ενώ οι γκαλερί εικόνα μπορεί να έχει πολλές μορφές, μια δημοφιλής μορφή εμφανίζει thumbnail εικόνες κατά μήκος της πλευράς , επάνω ή κάτω μέρος της σελίδας . Καθώς ο χρήστης κάνει κλικ σε κάθε μικρογραφία , μια αντίστοιχη έκδοση πλήρους μεγέθους της φωτογραφίας εμφανίζεται στο κέντρο της σελίδας . Dreamweaver CS3 υποστηρίζει διάφορους τρόπους για να δημιουργήσετε γκαλερί εικόνων . Ένα από τα ευκολότερα και πιο κοινές μεθόδους είναι η χρήση ενός « πλαισίων ». Μια πλαισίων είναι ένα δοχείο HTML ιστοσελίδα που αποτελείται από δύο ή περισσότερους "καρέ ". Κάθε πλαίσιο εμφανίζει μια μεμονωμένη σελίδα ή URL . Τα πράγματα που θα χρειαστείτε
Adobe Dreamweaver CS3 ή νεότερη έκδοση
Adobe Photoshop , η Apple iPhoto , Ζωγραφική των Windows ή κάποιο άλλο πρόγραμμα επεξεργασίας εικόνας
Η Εμφάνιση Περισσότερες οδηγίες
Προετοιμασία των φωτογραφιών σας

1

Αλλαγή μεγέθους των φωτογραφιών στο λογισμικό επεξεργασίας εικόνας σας . Θα χρειαστείτε δύο εκδόσεις του κάθε εικόνας --- μια έκδοση πλήρους μεγέθους ( ας πούμε , 400 με 300 pixels , ή ό, τι λειτουργεί καλύτερα για το σχήμα και το μέγεθος των φωτογραφιών σας) και μια έκδοση με τις μικρογραφίες ( ας πούμε , 100 κατά 75 pixels ) . 2

Ρυθμίστε την ανάλυση για κάθε εικόνα με το " 72 " τελείες ( ή εικονοστοιχεία ) ανά ίντσα ( ή "96" για οθόνες υψηλής ευκρίνειας ) .
εικόνων 3

Αποθήκευση κάθε εικόνας σε ένα υπο - κατάλογο του καταλόγου όπου σκοπεύετε να δημιουργήσετε την εικόνα γκαλερί ιστοσελίδα σας . Ονομάστε τις υπο-κατάλογο " εικόνες ". Αποθηκεύστε τις εικόνες ως αρχεία JPEG . Ονομάστε τους " photo1 ", " φωτο2 , " και ούτω καθεξής ? Αναφέρουμε τα αντίστοιχα εικονίδια " thumb1 ", " thumb2 , " κλπ.
εικόνων Δημιουργία εικόνας σας Gallery στο Dreamweaver
4

Open Dreamweaver , και στη συνέχεια κάντε κλικ στο " Αρχείο" στη γραμμή μενού . Επιλέξτε " New " για να εμφανιστεί το πλαίσιο διαλόγου New Document .
5

Κάντε κλικ στο " Σελίδα από το Δείγμα " στην αριστερή στήλη του παραθύρου διαλόγου και στη συνέχεια κάντε κλικ στο κουμπί " Frameset " στη στήλη "Folder Δείγμα " . Αυτό εμφανίζει μια λίστα των πλαισίων του δείγματος στην τρίτη στήλη του πλαισίου διαλόγου . Επέλεξε " Σταθερό Αριστερά . "
Η

6 Κάντε κλικ στο κουμπί "Δημιουργία ". Dreamweaver εμφανίζει το παράθυρο διαλόγου " Frame Tag Accessibility Attributes " . Κάντε κλικ στο κουμπί "OK". Τα κουφώματα ονομάζεται σύμφωνα με την τοποθέτησή τους στη σελίδα. Το αριστερό πλαίσιο ονομάζεται " leftFrame , " και το κύριο πλαίσιο με το όνομα " mainframe ".
Η 7

Κάντε κλικ στο " Αρχείο" στη γραμμή μενού και επιλέξτε "Save All ". Dreamweaver θα σας ζητήσει να αναφέρουμε τρία αρχεία , το ένα μετά το άλλο : " . Γκαλερί" Πρώτον, η ίδια πλαισίων --- όνομα Δεύτερον , το κύριο πλαίσιο --- το όνομα " photo1 . " Τρίτον , το αριστερό πλαίσιο --- όνομα " μικρογραφίες".
8

Εισαγωγή " photo1.jpg " στην κύρια ( δεξιά) πλαίσιο και στη συνέχεια κάντε κλικ στο " Αρχείο" στη γραμμή μενού και επιλέξτε " Save Frame . "
Η 9

Δημιουργήστε ένα νέο αρχείο HTML στο κύριο πλαίσιο για κάθε φωτογραφία και να την αποθηκεύσετε , όπως αυτό : Διαγραφή " photo1.jpg " από το κύριο πλαίσιο . Εισαγωγή " photo2.jpg " στο κύριο πλαίσιο . Κάντε κλικ στο " Αρχείο" στη γραμμή μενού και επιλέξτε " Save Frame As." Ονομάστε το αρχείο " photo2 " και να το αποθηκεύσετε . Επαναλάβετε αυτή τη διαδικασία για κάθε μία από τις φωτογραφίες σας , ονομάζοντας κάθε αρχείο HTML με το αντίστοιχο όνομα φωτογραφία .
Η 10

Εισάγετε μικρογραφιών σας στο αριστερό πλαίσιο . Τοποθετήστε τις εικόνες κάθετα προς το πλαίσιο με τη σειρά που τους ονόμασε --- " photo1 " πρώτη " photo2 " δεύτερο, κλπ.
Η 11

Επιλέξτε την πρώτη μικρογραφία . Πηγαίνετε στο πάνελ ιδιοτήτων και πληκτρολογήστε το όνομα του αρχείου και τη διαδρομή για το πρώτο full-size σελίδα HTML φωτογραφία στο " Link" πεδίο , όπως αυτό : " images/photo1.html " ( χωρίς εισαγωγικά )
Η 12 .

Κάντε κλικ στο "Target " drop-down στον πίνακα Properties και επιλέξτε " mainframe ". Αυτό λέει το πρόγραμμα περιήγησης του χρήστη για να φορτώσει photo1.html στο κύριο πλαίσιο , όταν κάνει κλικ στη μικρογραφία .
Η 13

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

14

Κάντε κλικ στο " Αρχείο" στη γραμμή μενού και επιλέξτε "Save Frame " να σώσει " thumbnails.html . "

15

Άνοιγμα " gallery.html " σε ένα πρόγραμμα περιήγησης για να ελέγξετε γκαλερί εικόνων σας .
Η
εικόνων