Οδηγίες για εισαγωγή Photo Gallery σε Ιστοσελίδα με το SharePoint Designer 2007

Transcript

1 Οδηγίες για εισαγωγή Photo Gallery σε Ιστοσελίδα με το SharePoint Designer 2007 Το πρόγραμμα Share Point Designer 2007 παρέχει την δυνατότητα να εισάγουμε Συλλογή φωτογραφιών, οι οποίες προβάλλονται με κατάλληλες λεζάντες. Για να γίνει αυτό ακολουθούμε τα παρακάτω βήματα: 1. Προετοιμάζουμε τις φωτογραφίες που θέλουμε να προβάλλονται, ρυθμίζοντας το μέγεθος τους με το λογισμικό Light Image Resizer, το οποίο μπορούμε να κατεβάσουμε από την ιστοσελίδα software.html. Προτεινόμενες διαστάσεις για τις φωτογραφίες είναι: 640 Χ 480 ή 800 Χ 600 pixels. Τοποθετούμε το σύνολο των φωτογραφιών σε ένα φάκελο Photos που δημιουργούμε μέσα στο φάκελο της ιστοσελίδας μας. Οι φωτογραφίες πρέπει να είναι τύπου jpeg ή gif ή jpg. 2. Ανοίγουμε την ιστοσελίδα στην οποία θέλουμε να μπουν οι φωτογραφίες. π.χ. H πιο κάτω ιστοσελίδα την οποία ονομάζουμε photografies.html την οποία συνδέουμε (hyperlink) με το κουμπί του μενού αριστερά «Φωτογραφικό Υλικό». Βάζουμε το δείκτη του ποντικιού στο κενό κουτί 3.

2 4. Από το κεντρικό οριζόντιο Μενού ανοίγουμε το Insert/Web Component 5. Από το πιο κάτω παράθυρο διαλόγου που ανοίγει, επιλέγουμε το Photo Gallery και το είδος του Photo Gallery από τα 4 που παρατίθενται. Στην συγκεκριμένη περίπτωση θα επιλέξουμε το 4 ο που εμφανίζεται σε γαλάζιο πλαίσιο πιο κάτω. Πατούμε το Finish.

3 6. Στο παράθυρο που ανοίγει, εισάγουμε τις σχετικές φωτογραφίες με το κουμπί Add/Pictures from Files και κατευθύνουμε στο φάκελο Photos, όπου φυλάξαμε τις φωτογραφίες, τις οποίες επιλέγουμε και πατούμε το Open για να εισαχθούν στην διαδικασία.

4 7. Βλέπουμε ότι στην προηγούμενη Οθόνη έχουν εισαχθεί οι εικόνες αρχεία που θα εμφανίζονται στο Photo gallery [1]. Με το κουμπί Move up/move Down μπορούμε να αλλάξουμε και να καθορίσουμε εμείς τη σειρά που θα εμφανίζονται οι εικόνες. Αριστερά από την εικόνα βλέπουμε το Thumbnail size[2]. Η διαδικασία δημιουργίας Photo gallery θα δημιουργήσει μια μικρή εικόνα (Thumbnail) η οποία θα φαίνεται στην ιστοσελίδα και η οποία θα παραπέμπει στην κανονική φωτογραφία. Με τις ρυθμίσεις που φαίνονται στο πιο κάτω παράθυρο καθορίζουμε το μέγεθος των μικρών αυτών εικόνων. Πριν από αυτό όμως πρέπει να αποφασίσουμε πόσες εικόνες θα φαίνονται σε κάθε σειρά του Photo gallery. Αυτό γίνεται ανοίγοντας τον τομέα του Layout στο πιο κάτω παράθυρο[3]

5 8. Ο αριθμός των εικόνων της κάθε γραμμής καθορίζεται, βάζοντας τον αριθμό που επιθυμούμε στο Number of pictures per row [1] όπως φαίνεται πιο κάτω. Ακολούθως επιστρέφουμε στην προηγούμενη οθόνη πατώντας το Pictures [2] 2 1

6 9. Αν επιλέξουμε να εμφανίζονται 2 εικόνες σε κάθε γραμμή, τότε θα πρέπει να καθορίσουμε ανάλογο μέγεθος του Thumbnail. (Εννοείται ότι αν εμφανίζονται περισσότερες εικόνες σε κάθε γραμμή, θα πρέπει το μέγεθος των εικόνων Thumbnail να είναι πιο μικρό). 10. Επιλέγω την πρώτη εικόνα από τα ονόματα της λίστας που φαίνεται [1]. Καθορίζω το μέγεθος της εικόνας Thumbnail σε Width =200 Pixels (Το 200 είναι ένα προτεινόμενο μέγεθος με δεδομένο ότι θα υπάρχουν 2 εικόνες σε κάθε σειρά). Ταυτόχρονα έχουμε επιλεγμένο και το Maintain aspect ratio, οπότε αυτόματα ρυθμίζεται και το Height, χωρίς να παραμορφώνεται η εικόνα. Αν όλες οι εικόνες έχουν το ίδιο μέγεθος, τότε πατούμε και το Set as Default size και έτσι αποκτούν όλες το ίδιο μέγεθος του Thumbnail. Σε περίπτωση όμως που είναι διαφορετικού σχήματος και μεγέθους οι εικόνες, τότε τις ρυθμίζουμε μια μια, βάζοντας πάντα στο Width =200 και αφήνοντας το πρόγραμμα να ρυθμίσει το height, ώστε να μην παραμορφώνεται η εικόνα. 1

7 11. Το επόμενο βήμα είναι να γράψουμε τις λεζάντες (αν θέλουμε να υπάρχουν) Αφού επιλέξουμε την ανάλογη εικόνα από την λίστα (π.χ jpg) πάμε στο κάτω μέρος του παραθύρου επιλέγω Override and use custom font formatting. Καθορίζουμε την γραμματοσειρά και το μέγεθος /χρώμα κ.λ.π. Γράφουμε τις σχετικές πληροφορίες. Αν θέλουμε να αφήσουμε το πρόγραμμα να καθορίζει το είδος των γραμμάτων /μέγεθος/χρώμα, τότε επιλέγουμε το Use font formatting from page. Όταν ολοκληρώσουμε τη διαδικασία με όλες τις εικόνες πατούμε το ΟΚ και ενεργοποιείται η παραγωγή του Photo gallery.

8 Η ιστοσελίδα παίρνει την πιο κάτω μορφή.