ΕΙΣΑΓΩΓΗ ΣΤΟ MICROSOFT FRONTPAGE

Transcript

1 Πανεπιστήμιο Αιγαίου Τμήμα Πολιτισμικής Τεχνολογίας και Επικοινωνίας ΕΙΣΑΓΩΓΗ ΣΤΟ MICROSOFT FRONTPAGE Σημειώσεις του μαθήματος ΕΡΓΑΣΤΗΡΙΟ ΠΛΗΡΟΦΟΡΙΚΗΣ Δρ Ευαγγελία Καβακλή Μυτιλήνη 2001

2 1 Αρχίζοντας Δημιουργώντας ένα νέο FrontPage Web Ο FrontPage Explorer Δουλεύοντας με Σελίδες (pages) Για να προσθέσετε νέες σελίδες στο FrontPage Web Δίνοντας τίτλους σε Σελίδες Εφαρμογή ενός FrontPage Theme Επιλέγοντας ένα θέμα (Theme) στοpersonal Web Εφαρμόζοντας το επιλεγμένο θέμα Ανοίγοντας σελίδες στον FrontPage Editor Ανοίγοντας την Home Page στο FrontPage Editor Η επεξεργασία της Home Page Προσθέτοντας κείμενο στην Home Page Για να αποθηκεύσετε την τρέχουσα σελίδα Η επεξεργασία της σελίδας "Interests" Ανοίγοντας την σελίδα "Interests" στο Editor Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Interests" Προσθέτοντας μία λίστα με βούλες (Bulleted List) Για να αποθηκεύσετε την τρέχουσα σελίδα Η επεξεργασία της σελίδας "Photo Album" Ανοίγοντας την σελίδα "Photo Album" στο Editor Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Photo Album" Εισάγοντας εικόνες στην σελίδα Photo Album Αποθήκευση της σελίδας και των περιεχομένων εικόνων Η επεξεργασία της σελίδας Favorites Ανοιγοντας την σελίδα "Favorites" στο Editor Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Favorites" Δημιουργώντας Hyperlinks απο κείμενο Δημιουργώντας ένα αυτόματο Hyperlink Έξοδος από το Frontpage Ανοίγοντας ένα Frontpage Web Ανοίγοντας ένα Web Προσθέτοντας μία νέα σελίδα Κρύβοντας τα κοινόχρηστα περιθώρια (Shared Borders) και τις μπάρες πλοήγησης Εισάγοντας αρχεία Εισάγοντας ένα αρχείο κειμένου σε μία σελίδα Δημιουργώντας Image Maps Δημιουργώντας Image Hotspots Τοποθετώντας κείμενο πάνω σε εικόνες Τοποθετώντας κείμενο πάνω σε μία εικόνα Δημιουργώντας έναν πίνακα Εισάγοντας κείμενο σε ένα πίνακα Δημιουργώντας Λίστες Προεπισκόπηση Σελίδων... 37

3 ΜΑΘΗΜΑ 1ο 1 Αρχίζοντας Σε αυτό το πρώτο μάθημα, θα αναπτύξετε ένα νέο Frontpage Web στον Frontpage Explorer. 1.1 Δημιουργώντας ένα νέο FrontPage Web 1. Στην Task Bar των Windows, κάντε Click στο Start, Programs, και Microsoft FrontPage. Απο εδώ μπορείτε να ανοίξετε ένα ήδη υπάρχον Frontpage Web ή να δημιουργήσετε ένα νέο. 2. Στο μενού File, επιλέξτε New Web. Έτσι εμφανίζεται το πλαίσιο διαλόγου New FrontPage Web. Από εδώ "λέτε" στο FrontPage τι είδος FrontPage web θέλετε να δημιουργήσετε, καθώς και τον τίτλο του. 3. Στο πλαίσιο διαλόγου New FrontPage Web, επιλέξτε One Page Web Αυτή η επιλογή θα δημιουργήσει μια απλή Home σελίδα. 4. Στο πεδίο του τίτλου πληκτρολογείστε Personal Web. 1

4 Personal Web θα είναι και ο τίτλος του νέου FrontPage web. Καθώς πληκτρολογείτε το όνομα του νέου FrontPage web, το FrontPage Explorer προτείνει μία περιοχή που αυτό το FrontPage web θα αποθηκευτεί. Για αυτό το μάθημα θα αρκεστούμε στην προτεινόμενη επιλογή. 5. Πατήστε OK. Το FrontPage δημιουργεί ένα νέο FrontPage web το οποίο ονομάζει Personal Web. 2

5 2 Ο FrontPage Explorer Ο FrontPage Explorer είναι το κύριο συστατικό του Microsoft FrontPage. Θα χρησιμοποιήσετε τον FrontPage Explorer για να δημιουργήσετε νέα Web sites ή αργότερα να αλλάξετε, να συντηρήσετε και να δημοσιεύσετε τα ήδη εγκατεστημένα FrontPage webs. Τα 6 κουμπιά της Μπάρας FrontPage Explorer s Views μας δίνουν δίνουν διαφορετικούς τρόπους να δείτε τις πληροφορίες στο δικό σας FrontPage web. Από εδώ μπορείτε να επιλέξετε πως θέλετε να βλέπετε τα περιεχόμενα του Web site σας. Navigation button Για να επιλέξετε την Navigation προβολή (view ) κάντε click στο κουμπί Navigation στην μπάρα Views του FrontPage Explorer s. Η Navigation προβολή (view) αποτελείται από δύο διαχωριζόμενες περιοχές, οι οποίες σας δείχνουν την ιεραρχική δομή του FrontPage web στο δεξί μέρος (Η περιοχή πλοήγησης), και έναν Windows Explorer στο αριστερό μέρος της οθόνης (Η περιοχή αρχείων). Περιοχή Αρχείων Περιοχή Πλοήγησης 3

6 3 Δουλεύοντας με Σελίδες (pages) Το FrontPage Web που θα φτιάξετε θα αποτελείται από τέσσερις σελίδες συνδεδεμένες μεταξύ τους. Όταν πρωτοδημιουργήσατε το Personal Web, το FrontPage έφτιαξε την πρώτη από αυτές τις σελίδες και της ονόμασε home page. Η home page είναι η είσοδος σε κάθε Web site. Είναι η σελίδα η οποία φαίνεται εξ ορισμού όταν ένας Web Browser (πχ ο Internet Explorer) επισκέπτεται το Site σας. Για να ολοκληρώσετε την δομή του Personal Web site, θα χρησιμοποιήσετε την Navigation προβολή (view) για να προσθέσετε τρεις νέες σελίδες κάτω από την home page. 3.1 Για να προσθέσετε νέες σελίδες στο FrontPage Web New Page button 1. Στην Navigation view, βεβαιωθείτε ότι η Home Page είναι επιλεγμένη Οι επιλεγμένες σελίδες στην Navigation view εμφανίζονται μπλε. 2. Στην μπάρα εργαλείων (toolbar) του FrontPage Explorer, πατήστε το κουμπί New Page. Το FrontPage προσθέτει μία νέα σελίδα την οποία ονομάζει New Page 1 κάτω από την home page στην περιοχή Navigation. 3. Τώρα πατήστε το κουμπί New Page δύο ακόμα φορές. Το FrontPage προσθέτει δύο ακόμα σελίδες κάτω από τη Home page, τις οποίες ονομάζει New Page 2 και New Page 3. 4

7 Πριν αρχίσετε να δουλεύετε με αυτές τις σελίδες θα ήταν καλό να τους δώσετε ένα όνομα που να σημαίνει κάτι. Μπορείτε να αλλάξετε τους τίτλους των σελίδων σας από την Navigation προβολή (view). 3.2 Δίνοντας τίτλους σε Σελίδες 1. Με την Home Page ήδη επιλεγμένη στην Navigation view, πατήστε το πλήκτρο Tab (αριστερά στο πληκτρολόγιο) Το FrontPage θα φωτίσει την αριστερή σελίδα κάτω από την home page και θα ενεργοποιήσει τον τίτλο της για επεξεργασία. 2. Πληκτρολογείστε Interests, πατήστε ENTER. Το FrontPage αλλάζει το τίτλο από New Page 1 σε Interests. 3. Πατήστε το πλήκτρο Tab. Το FrontPage θα φωτίσει την μεσαία σελίδα κάτω από την Home Page και θα ενεργοποιήσει τον τίτλο της για επεξεργασία. 4. Πληκτρολογείστε Photo Album, και πατήστε ENTER. 5. Πατήστε το πλήκτρο Tab ακόμα μία φορά. 5

8 Το FrontPage θα φωτίσει την δεξιά σελίδα κάτω από την Home Page και θα ενεργοποιήσει τον τίτλο της για επεξεργασία. 6. Πληκτρολογείστε Favorites, και πατήστε ENTER. Η οθόνη θα πρέπει να δείχνει κάπως έτσι: interests.htm photo_album.htm favorites.htm Undo button Εάν κάνετε κάποιο λάθος ή αλλάξετε γνώμη για κάποια αλλαγή που έχετε κάνει, μπορείτε να χρησιμοποιήσετε το κουμπί Undo στην μπάρα εργαλείων (toolbar) του FrontPage Explorer για να αναιρέσετε την προηγούμενη σας ενέργεια. 6

9 4 Εφαρμογή ενός FrontPage Theme Με το FrontPage, μπορείτε εύκολα να δημιουργήσετε δυναμικά ελεγχόμενα Web sites εφαρμόζοντας ένα από τα προσχεδιασμένα θέματα (themes). Πριν εφαρμόσετε ένα θέμα (theme), μπορείτε να δείτε πως αυτό θα εμφανίζεται χρησιμοποιώντας την εντολή Themes του FrontPage Explorer. Στα παρακάτω βήματα θα εφαρμόσετε το Cytrus Punch θέμα (theme) στο Personal Web. 4.1 Επιλέγοντας ένα θέμα (Theme) στοpersonal Web Themes 1. Στο μενού Format, επιλέξετε το Theme. 2. Πατήστε στα υπάρχοντα themes στο scrolling list box. Η περιοχή Theme Preview σας επιτρέπει να προεπισκοπήσετε τα γραφικά αντικείμενα όπως αυτά θα εμφανίζονται στις Web σελίδες σας. Πριν εφαρμόσετε ένα theme, μπορείτε να κάνετε κάποιες επιλογές (options) σχετικά με την εμφάνισή του Επιλέγοντας Vivid Colors θα έχετε πιο έντονα χρώματα στο κείμενο και τα γραφικά, επιλέγοντας Active Graphics θα έχετε κίνηση (animation) σε 7

10 κάποια στοιχεία του theme,και τέλος επιλέγοντας Background Image θα έχετε μία background εικόνα στις σελίδες σας. 3. Για αυτό το μάθημα επιλέξτε, Vivid Colors και Background Image. Από την λίστα με τα θέματα (themes), επιλέξτε Citrus Punch, και πατήστε το κουμπί OK. 4.2 Εφαρμόζοντας το επιλεγμένο θέμα Για να εφαρμοστεί το επιλεγμένο θέμα θα πρέπει να κάνετε τα ακόλουθα: 1. Στο μενού Format, επιλέξετε το Shared Borders. Έτσι εμφανίζεται το πλαίσιο διαλόγου Shared Borders. Από εδώ "λέτε" στο FrontPage ποια από τα αντικείμενα του επιλεγμένου θέματος (τίτλος, πλήκτρα πλοήγησης, υπερσύνδεσμοι), θέλετε να εμφανίζονται στις σελίδες που έχετε δημιουργήσει και που. 2. Επιλέξετε Top και Left, καθώς και Include navigation buttons τσεκάροντας τα αντίστοιχα πλαίσια. 3. Πατήσετε το πλήκτρο OK. 8

11 5 Ανοίγοντας σελίδες στον FrontPage Editor Τώρα που η δομή του Personal Web έχει δημιουργηθεί, θα προσθέσετε τα περιεχόμενα σε κάθε σελίδα. Ενώ η δημιουργία και ο διαχειρισμός των σελίδων γίνεται από το FrontPage Explorer, ο σχεδιασμός και η επεξεργασία τους γίνεται από το FrontPage Editor. Το FrontPage Editor χρησιμοποιείται για να φτιάξετε, να επεξεργασθείτε και να δείτε τις σελίδες σας. Το περιβάλλον εργασίας είναι παρόμοιο με επεξεργαστές κειμένου όπως το Microsoft Word. Οι επόμενες ασκήσεις θα σας παρουσιάσουν τις βασικές λειτουργίες του FrontPage Editor 5.1 Ανοίγοντας την Home Page στο FrontPage Editor 1. Στην περιοχή πλοήγησης διπλοπατήστε στην Home Page. Η home page ανοίγει στο FrontPage Editor. 9

12 6 Η επεξεργασία της Home Page Όταν η home page ανοιχτεί στο FrontPage Editor, παρατηρήστε τα αντικείμενα της σελίδας που έχουν γίνει από το θέμα (theme) που επιλέξατε στην προηγούμενη ενότητα: Η σελίδα έχει κάποιο φόντο (background), ένα πηχυαίο τίτλο (page banner) με τον τίτλο της σελίδας, και τρεις υπερσυνδέσμους (hyperlinks) στο αριστερό περιθώριο της σελίδας, που σας συνδέουν με τις άλλες σελίδες του Personal Web. Για να προσθέσετε κείμενο σε σελίδα, απλά το πληκτρολογείτε σαν να δουλεύατε σε κάποιον επεξεργαστή κειμένου 6.1 Προσθέτοντας κείμενο στην Home Page 1. Πληκτρολογήστε με έντονους χαρακτήρες Καλώς ήρθατε! και πατήστε ENTER. Πατώντας ENTER δημιουργείται μία νέα παράγραφος στην σελίδα. 2. Στην νέα γραμμή, πληκτρολογείστε Παρακαλώ, επισκεφτείτε και τις υπόλοιπες σελίδες μου. και πατήστε ENTER. Η σελίδα θα πρέπει να δείχνει κάπως έτσι : Πριν συνεχίσουμε, καλό θα ήταν να αποθηκεύσετε την σελίδα σας 10

13 6.2 Για να αποθηκεύσετε την τρέχουσα σελίδα 1. Στο μενού File του FrontPage Editor, επιλέξτε Save As. Το πλαίσιο διαλόγου Save As εμφανίζεται. 2. Πατήστε Save χωρίς να κάνετε κάποιες αλλαγές. Το FrontPage θα αποθηκεύσει την σελίδα. 11

14 7 Η επεξεργασία της σελίδας "Interests" Στην δεύτερη σελίδα του Personal Web σας, θα εμφανίζεται μία σύντομη λίστα με κουκκίδες (bulleted list) των προσωπικών σας ενδιαφερόντων. 7.1 Ανοίγοντας την σελίδα "Interests" στο Editor 1. Στο μενού File του FrontPage Editor, επιλέξτε Open. Το πλάσιο διαλόγου Open File εμφανίζεται. Αυτό το πλαίσιο διαλόγου εμφανίζει τις σελίδες και τους φακέλους του Personal Web σας. Μπορείτε επίσης να ανοίξετε σελίδες από το τρέχον FrontPage web, αρχεία από το δίσκο σας, σελίδες από έναν άλλο Web server, ή σελίδες από το World Wide Web. 2. Από την λίστα των αρχείων επιλέξτε interests.htm και πατήστε το κουμπί Open. Η σελίδα Interests εμφανίζεται στο FrontPage Editor. 7.2 Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Interests" 1. Πληκτρολογείστε Αυτά είναι μερικά από τα πράγματα που μου αρέσει να κάνω στον ελεύθερο χρόνο μου: 12

15 2. Πατήστε το κουμπί Center στην μπάρα εργαλείων (toolbar) για να κεντράρετε το κείμενο. 3. Από το μενού Insert, επιλέξτε Horizontal Line. Μία οριζόντια γραμμή προστίθεται στην σελίδα κάτω ακριβώς από το κείμενο που μόλις πληκτρολογήσατε. 7.3 Προσθέτοντας μία λίστα με βούλες (Bulleted List) 1. Από την μπάρα εργαλείων, πατήστε το κουμπί Bulleted List. Το FrontPage αρχίζει την λίστα (bulleted list) και εμφανίζει την πρώτη κουκκίδα. 2. Πληκτρολογείστε Ενδιαφέρον 1: Εδώ θα προστεθεί η περιγραφή, εικόνα ή υπερσύνδεσμος σε μια αγαπημένη απασχόληση ή χόμπι και πατήστε το πλήκτρο ENTER. Πατώντας ENTER προστίθεται μία νέα κουκκίδα στην λίστα. 3. Στην επόμενη γραμμή πληκτρολογείστε Ενδιαφέρον 2: και πατήστε ENTER. 4. Στην τρίτη γραμμή πληκτρολογείστε Ενδιαφέρον 3: και πατήστε ENTER δύο φορές. Πατώντας ENTER δύο φορές τελειώνετε την λίστα Η οθόνη σας θα πρέπει να δείχνει κάπως έτσι: 13

16 Πριν συνεχίσουμε, καλό θα ήταν να αποθηκεύσετε την σελίδα σας 7.4 Για να αποθηκεύσετε την τρέχουσα σελίδα Στη μπάρα εργαλείων (toolbar), πατήστε το κουμπί Save. 14

17 8 Η επεξεργασία της σελίδας "Photo Album" Στην τρίτη σελίδα του Personal Web σας, θα εισάγετε δύο εικόνες 2 φωτογραφίες της Porche 911 Carrera. Το Frontapge μπορεί να εισάγει μία ποικιλία από δημοφιλή γραφικά formats (πχ GIF, JPEG, BMP κτλ). 8.1 Ανοίγοντας την σελίδα "Photo Album" στο Editor 1. Στο μενού File του FrontPage Editor, επιλέξτε Open. 2. Από την λίστα των αρχείων επιλέξτε photo_album.htm και πατήστε OK. Η σελίδα Photo Album εμφανίζεται στο FrontPage Editor. 8.2 Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Photo Album" 1. Στην σελίδα Photo Album, πληκτρολογείστε Αυτές είναι μερικές φωτογραφίες της αγαπημένης μου Porche. 2. Πατήστε το κουμπί Center στην μπάρα εργαλείων (toolbar) για κεντράρετε το κείμενο. 3. Από το μενού Insert, επιλέξτε Horizontal Line. 4. Πατήστε ENTER. Η σελίδα σας θα πρέπει να δείχνει κάπως έτσι: Στη συνέχεια θα προσθέσετε δύο εικόνες στην σελίδα σας. 15

18 8.3 Εισάγοντας εικόνες στην σελίδα Photo Album 1. Από το μενού Insert,επιλέξτε Picture From File. Το πλαίσιο διαλόγου Picture εμφανίζεται. Σε αυτό μπορείτε να επιλέξετε την εικόνα που θα εισάγετε από το τρέχον FrontPage web, από έναν άλλοweb server ή από τον δίσκο σας. 2. Στο πλαίσιο διαλόγου Picture, πατήστε το κουμπί File. Το κουμπί File σας επιτρέπει να "ψάξετε" τον δίσκο σας για να βρείτε την εικόνα που θέλετε να εισάγετε. Για αυτήν την άσκηση θα εισάγετε την εικόνα με το όνομα gt3.jpg. 3. Στο πλαίσιο διαλόγου Select File, πηγαίνετε στον φάκελο: C:\My Documents\ (Υποθέτοντας ότι οι φωτογραφίες της Porche υπάρχουν από την προηγούμενη εργασία υλοποίησης μιας παρουσίασης στο PowerPoint) 4. Eπιλέξτε το αρχείο gt3.gif, και πατήστε OK. Η φωτογραφία ενός αυτοκινήτου θα τοποθετηθεί στην σελίδα σας. 5. Πατήστε ENTER. Η οθόνη σας θα πρέπει να δείχνει κάπως έτσι: 16

19 Επαναλάβετε τα βήματα 1-5 για να εισάγετε την δεύτερη εικόνα με το όνομα cabriolet4.gif. 8.4 Αποθήκευση της σελίδας και των περιεχομένων εικόνων 1. Στη μπάρα εργαλείων (toolbar), πατήστε το κουμπί Save. 2. Στο παράθυρο διαλόγου Save Embedded Files, πατήστε OK για να αποθηκεύσετε τις εικόνες που εισάγατε. 17

20 9 Η επεξεργασία της σελίδας Favorites Στην τέταρτη σελίδα του FrontPage web σας θα περιέχεται μια σύντομη λίστα με υπερσυνδέσμους (hyperlinks) που θα πηγαίνουν τον χρήστη σε άλλα Sites στο World Wide Web. 9.1 Ανοιγοντας την σελίδα "Favorites" στο Editor 1. Στο μενού File του FrontPage Editor, επιλέξτε Open. 2. Απο την λίστα των αρχείων επιλέξτε favorite.htm και πατήστε OK. Η σελίδα Favorites εμφανίζεται στο FrontPage Editor. 9.2 Προσθέτοντας διαμορφωμένο (Formatted) κείμενο στην σελίδα "Favorites" 1. Στην σελίδα Photo Album, πληκτρολογείστε Αυτή είναι μια λίστα με τα αγαπημένα μου sites στο world wide web! 2. Πατήστε το κουμπί Center στην μπάρα εργαλείων (toolbar) για κεντράρετε το κείμενο. 3. Απο το μενού Insert, επιλέξτε Horizontal Line. H σελίδα σας θα πρέπει να δείχνει κάπως έτσι: 18

21 Οι υπερσύνδεσμοι (hyperlinks) είναι ο πιο συνηθισμένος τρόπος για να πλοηγήστε στο World Wide Web. 9.3 Δημιουργώντας Hyperlinks απο κείμενο 1. Πληκτρολογείστε The Microsoft Network και πατήστεenter. 2. Πατήστε και σειρετε (drag) πάνω απο τις τρεις λέξεις για να τις επιλέξετε. 3. Στο μενού Insert, επιλέξτε Hyperlink. Το πλαίσιο διαλόγου Create Hyperlink εμφανίζεται. Σε αυτό το πλαίσιο διαλόγου μπορείτε να επιλέξετε τον "στόχο" του hyperlink. Αυτός μπορεί να είναι κάποια σελίδα στο τρέχον FrontPage web, στο σκληρό σας δίσκο, σε έναν άλλοweb server, ή στο World Wide Web. Μπορείτε επίσης να δημιουργήσετε ένα hyperlink. 4. Στο πεδίο URL πληκτρολογείστε και πατήστε OK. σημαίνει Hypertext Transport Protocol. Ειναι ένα πρωτόκολλο του Internet που επιτρέπει στους World Wide Web browsers να πάρουν πληροφορίες απο του Web servers. είναι η URL του The Microsoft Network. 19

22 5. Πατήστε το ΚΑΤΩ ΒΕΛΟΣ του πληκτρολογίου για να αποεπιλέξετε το κείμενο. Οι λέξεις The Microsoft Network άλλαξαν από το εξ ορισμού μαύρο κείμενο σε έγχρωμο κείμενο, επίσης οι λέξεις είναι τώρα υπογραμμισμένες. 9.4 Δημιουργώντας ένα αυτόματο Hyperlink 1. Στην σελίδα Favorites, πληκτρολογείστε και πατήστε ENTER. Καθώς πατήσατε το ENTER, η URL που μόλις πληκτρολογήσατε γίνεται αυτόματα hyperlink. Η σελίδα σας θα πρέπει να φαίνεται κάπως έτσι: 20

23 10 Έξοδος από το Frontpage 1. Αποθηκεύστε την σελίδα σας πατώντας το το κουμπι Save στη μπαρα εργαλείων. 2. Από το μενού File επιλέξετε Exit 21

24 ΜΑΘΗΜΑ 2ο 11 Ανοίγοντας ένα Frontpage Web Θα χρησιμοποιήσετε το FrontPage που φτιάξατε στο μάθημα 1 για το υπόλοιπο αυτού του μαθήματος Ανοίγοντας ένα Web 1. Πατήστε κουμπί Start, Programs, Microsoft FrontPage. 2. Από το μενού File επιλέξετε Open Web. 3. Από την λίστα με τα FrontPage Webs, επιλέξτε Personal Web και πατήστε OK. Το Personal Web εμφανίζεται στο FrontPage Explorer. 22

25 11.2 Προσθέτοντας μία νέα σελίδα 1. Προσθέσετε μία σελίδα με τον τίτλο Tutorial Practice, χρησιμοποιώντας το FrontPage Explorer (ακολουθήσετε τις οδηγίες που δόθηκαν στην ενότητα 3). 2. Διπλοπατήσετε τη νέα σελίδα με το ποντίκι Η σελίδα Tutorial Practice ανοίγει στο FrontPage Editor. Το θέμα (theme) που εφαρμόσατε στο Personal Web στο μάθημα 1 αυτόματα εφαρμόζεται και στη νέα σελίδα. Η σελίδα Tutorial Practice δεν χρειάζεται κουμπιά πλοήγησης σε άλλες σελίδες. Για το λόγο αυτό θα χρειαστεί "κρύψετε" τα κοινόχρηστα περιθώρια (shared borders) Κρύβοντας τα κοινόχρηστα περιθώρια (Shared Borders) και τις μπάρες πλοήγησης 1. Από το μενού Tools, επιλέξτε Shared Borders. Το πλαίσιο διαλόγου Page Borders εμφανίζεται. Σε αυτό το πλαίσιο μπορείτε να εξουδετερώσετε τις εξ ορισμού ρυθμίσεις των περιθωρίων (borders). 2. Στο πλαίσιο διαλόγου Page Borders,επιλέξτε Current page. 3. "Καθαρίστε" το Top και Left check boxes έτσι ώστε να μην είναι επιλεγμένο κανένα περιθώριο(border),πατήστε OK. Τα Περιθώρια της σελίδας καθώς και η μπάρα πλοήγησης (navigation bar) είναι τώρα κρυμμένα και μόνο το φόντο παραμένει εμφανίσιμο. 23

26 12 Εισάγοντας αρχεία Με το FrontPage Editor, μπορείτε να εισάγετε του ακόλουθους τύπους αρχείων κειμένου στις σελίδες σας : ASCII Text (TXT) Rich Text Format (RTF) Hypertext Markup Language (HTM or HTML) Επεξεργαστές κειμένου (όπως το Microsoft Word) Λογιστικά φύλλα (Spreadsheet) (όπως το Microsoft Excel) 12.1 Εισάγοντας ένα αρχείο κειμένου σε μία σελίδα Με τη σελίδα Tutorial Practice ανοιγμένη στον FrontPage Editor, 1. Από το μενού Insert, επιλέξτε File. Το πλαίσιο διαλόγου Select File εμφανίζεται. Το αρχείο που θέλετε να εισάγετε ονομάζεται tutorial.txt. 2. Στο πλαίσιο διαλόγου Select File, αλλάξτε το πεδίο Files of Type σε Text Files (*.txt). 3. Στην συνέχεια επιλέξτε τον ακόλουθο φάκελο: C:\My Documents 4. Επιλέξτε το αρχείο tutorial.txt, πατήστε Open. 5. Στο πλαίσιο διαλόγου Convert Text, επιλέξτε Normal Paragraphs και πατήστε OK. Το FrontPage εισάγει τα περιεχόμενα του αρχείου κειμένου και τα τοποθετεί στην τρέχουσα σελίδα. 24

27 Αποθηκεύστε την σελίδα σας 25

28 13 Δημιουργώντας Image Maps Image map είναι μία εικόνα με ένα ή περισσότερα hyperlinks. Όταν μία εικόνα διαμορφώνεται σαν image map, ο χρήστης μπορεί να κάνει click σε συγκεκριμένες περιοχές της εικόνας και να "ενεργοποιήσει" τα λεγόμενα hotspots. Τα hotspots ξεκινούν τα hyperlinks που έχουν ενσωματωθεί στην εικόνα από το FrontPage Editor. Πριν δημιουργήσετε μία image map, πρέπει πρώτα να εισάγετε την εικόνα που θα χρησιμοποιήσετε. 1. Απο το μενού Insert επιλέξτε Picture. Το πλαίσιο διαλόγου Picture εμφανίζεται. 2. Στο πλαίσιο διαλόγου Picture πατήστε το κουμπί File. Η εικόνα που θέλετε να εισάγετε ονομάζεται Tutorial_1.gif. 3. Στο πλαίσιο διαλόγου Select File, πηγαίνετε στον φάκελο: C:\My Documents\ 4. Επιλέξτε το αρχείο Tutorial_1.gif, και πατήστε OK. Η εικόνα ενός αυτοκινήτου εμφανίζεται στην σελίδα. 26

29 13.1 Δημιουργώντας Image Hotspots Τα hotspots ξεκινούν τα hyperlinks που έχουν ενσωματωθεί στην εικόνα από το FrontPage Editor. 1. Πατήστε πάνω στην εικόνα του μαυροπίνακα για να την επιλέξτετε Μόλις την επιλέξετε θα εμφανιστεί η εργαλειοθήκη Σχεδίασης 2. Στην συνέχεια πατήστε το κουμπί Rectangle της εργαλειοθήκης Σχεδίασης. Το κουμπί Rectangle δημιουργεί ένα τετράγωνο hotspot πάνω στην εικόνα. Το hotspot είναι η περιοχή η οποία περιέχει ένα hyperlink. 3. Μετακινήστε τον δείκτη του ποντικιού πάνω στην εικόνα. Ο δείκτης τώρα γίνεται μολύβι. 4. Μετακινήστε το μολύβι στον πάνω αριστερή γωνιά της λέξης Interests. 5. Πατήστε και κρατήστε (Click and hold) το αριστερό κουμπί του ποντικιού, και σύρετε (drag) ένα τετράγωνο μέχρι αυτό να περιλάβει όλη τη λέξη Interests. 27

30 Οταν αφήσετε το κουμπί του ποντικιού, το πλαίσιο διαλόγου Create Hyperlink εμφανίζεται 6. Στο πλαίσιο διαλόγου Create Hyperlink επιλέξτε το αρχείο interest.htm, και πατήστε OK. Η λέξη Interests στην εικόνα του μαυροπίνακα είναι τώρα ένα hyperlink. 28

31 Μπορείτε να πειραματιστείτε μόνοι δημιουργώντας και άλλα image map hyperlinks με τις δύο άλλες λέξεις της εικόνας. Δημιουργήστε λοιπόν ένα hyperlink απο τις λέξεις Photo Album που να καλεί την σελίδα photo.htm, καθώς και ένα hyperlink απο τη λέξη Favorites που να καλεί την σελίδα favorite.htm. Αποθηκεύστε την σελίδα σας: Save button Στη μπάρα εργαλείων (toolbar), πατήστε το κουμπί Save. Στο πλαίσιο διαλόγου Save Ebmedded Files πατήστε OK. 29

32 14 Τοποθετώντας κείμενο πάνω σε εικόνες Στο FrontPage Editor, μπορείτε εύκολα να εισάγετε κείμενο πάνω σε οποιαδήποτε εικόνα. Αυτή η λειτουργία είναι χρήσιμη για φτιάχνετε γραφικά λογότυπα, κουμπιά με κείμενο, και κείμενο πανω σε image maps Τοποθετώντας κείμενο πάνω σε μία εικόνα 1. Στην σελίδα Tutorial Practice, τοποθετήστε το κέρσορα πάνω στην εικόνα του μαυροπίνακα, και πατήστε το ENTER δύο φορές. 2. Απο το μενού Insert, επιλέξτε Picture. Το πλαίσιο διαλόγου Picture εμφανίζεται. 3. Σε αυτό το πλαίσιο διαλόγου, επιλέξτε το αρχείο Tutorial_2.gif, που βρίσκεται στο φάκελο C:\My Documents και πατήστε OK. 4. Στην συνέχεια πατήστε πάνω στην νέα εικόνα, για να εμφανιστεί η εργαλειοθήκη Σχεδίασης 5. Στην εργαλειοθήκη Image, πατήστε το κουμπί Text Ενα πεδίο κειμένου εμφανίζεται στη μέση της εικόνας. 6. Πληκτρολογείστε την λέξη Interests. Η λέξη εμφανίζεται κεντραρισμένη στο πεδίο κειμένου. Το εξ ορισμού χρώμα του κειμένου είναι το μαύρο, και η εξ ορισμού γραμματοσειρά η 12-point Arial Bold. Όμως το χρώμα του κειμένου είναι πολύ σκοτεινό για αυτήν την εικόνα. Για να αλλάξετε το χρώμα και το μέγεθος του κειμένου: 1. Διπλοπατήστε στην λέξη Interests έτσι ώστε να την επιλέξετε. 2. Στην εργαλειοθήκη διαμόρφωσης (Format toolbar), πατήστε του κουμπί Text Color. 3. Επιλέξτε ένα φωτεινό χρώμα για το κείμενο της εικόνας, όπως το γαλάζιο 4. Απο το μενού Format επιλέξτε Font. 30

33 Το παράθυρο διαλόγου Font εμφανίζεται. 5. Στο πεδίο Font επιλέξτε Times New Roman. 6. Στο πεδίο Font Style, επιλέξτε Bold. 7. Στο πεδίο Size, επιλέξτε (14 pt), και πατήστε OK για να εφαρμόσετε τις αλλαγές στο κείμενο. Μπορείτε επίσης "σέρνοντας" (drag) το κείμενο να το τοποθετήσετε σε οποιοδήποτε μέρος της εικόνας. Τέλος μπορείτε να προσθέσετε ένα Hyperlink από το κείμενο στη σελίδα Interests. Για το σκοπό αυτό: 1. Με το ποντίκι επιλέξετε το πλαίσιο του κειμένου Interests. 2. Από το μενού Insert, επιλέξετε Hyperlink 3. Στο πλαίσιο διαλόγου Create Hyperlink επιλέξτε το αρχείο interest.htm, και πατήστε OK. Επαναλάβετε ανάλογη διαδικασία για τα κείμενα Favorites και Photo Album. Μετά το τέλος των εργασιών η σελίδα σας θα μοιάζει κάπως έτσι: 31

34 Πριν συνεχίσετε καλό θα ήταν να αποθηκεύσετε την εργασία σας. 32

35 15 Δημιουργώντας έναν πίνακα Οι πίνακες είναι μία συλλογή από κελιά που είναι οργανωμένα σε γραμμές (rows) και στήλες (columns). Μπορείτε να χρησιμοποιήσετε πίνακες για να οργανώσετε και να ομαδοποιήσετε τις πληροφορίες σας, ή να χρησιμοποιήσετε πίνακες με διαφανή περιθώρια για να οργανώσετε καλύτερα την εμφάνιση της σελίδας. 1. Στην σελίδα Tutorial Practice, τοποθετείστε τον κέρσορα μετά την εικόνα του αυτοκινήτου, πατήστε ENTER δύο φορές για να φτιάξετε κάποιο κενό χώρο. 2. Στο μενού Table, επιλέξτε Insert Table. Το πλαίσιο διαλόγου Insert Table εμφανίζεται. 3. Στο πεδίο Rows, δώστε Στο πεδίο Columns, δώστε Στο πεδίο Border Size, δώστε 0. Κρατείστε τις εξ ορισμού ρυθμίσεις για τα πεδία Alignment, Cell Padding, Cell Spacing και Specify Width. 6. Πατήστε OK. Το FrontPage δημιουργεί έναν πίνακα με τέσσερις γραμμές και δύο στήλες. 33

36 16 Εισάγοντας κείμενο σε ένα πίνακα Μπορείτε να εισάγετε κείμενο σε κάποιο πίνακα πληκτρολογώντας απευθείας σε αυτόν. Για αυτήν την άσκηση θα χρησιμοποιήσετε το πίνακα που μόλις εισάγατε με σκοπό να δημιουργήσετε μία απλή περιγραφική λίστα των αρχείων που αποτελούν το Personal Web. 1. Πατήστε στο πάνω αριστερά κελί του πίνακα και πληκτρολογείστε το τίτλο της πρώτης στήλης. Όνομα Σελίδας 2. Στην συνέχεια πληκτρολογείτε τα ονόματα των αρχείων των 3 σελίδων του Personal Web. Χρησιμοποιήστε το ΚΑΤΩ ΒΕΛΟΣ του πληκτρολογίου για να μετακινηθείτε στα κελιά. interests.htm photo_album.htm favorites.htm 3. Πατήστε στο πάνω δεξιά κελί του πίνακα και πληκτρολογείστε το τίτλο της δεύτερης στήλης. Περιγραφή Σελίδας 4. Στην συνέχεια δώστε μια σύντομη περιγραφή σε καθένα από τα τρία αρχεία. Χρησιμοποιήστε το ΚΑΤΩ ΒΕΛΟΣ του πληκτρολογίου για να μετακινηθείτε στα κελιά. Περιγράφει τις αγαπημένες μου ασχολίες Περιλαμβάνει φωτογραφίες από την αγαπημένη μου Porche Περιέχει συνδέσμους σε χρήσιμα sites 5. Χρησιμοποιώντας το mouse, πατήστε και σύρετε από τα κελιά Όνομα Σελίδας και Περιγραφή Σελίδας για να επιλέξετε την κορυφαία γραμμή του πίνακα. Bold button 6. Στην γραμμή εργαλείων, πατήστε το κουμπί Bold. Οι επικεφαλίδες των στηλών διαμορφώνονται με έντονη γραφή. Αυτό τις κάνει πιο ευανάγνωστες. 34

37 7. Στην συνέχεια τοποθετήστε τον δείκτη του ποντικιού στην μέση του πίνακα ( στην κάθετη γραμμή). Ο δείκτης θα αλλάξει σε ένα βέλος με δύο κεφαλές. 8. Πατήστε και κρατήστε το αριστερό κουμπί του ποντικιού και σύρετε το περιθώριο της στήλης προς τα αριστερά. Το να αλλάζετε δυναμικά τις διαστάσεις του πίνακα είναι εύκολο και λειτουργεί εξίσου σε στήλες και γραμμές. Ο πίνακας σας θα πρέπει να δείχνει κάπως έτσι: Αποθηκεύστε την σελίδα σας 35

38 17 Δημιουργώντας Λίστες Ένας άλλος τρόπος να οργανώσετε τις πληροφορίες σας είναι οι λίστες. Οι Web σελίδες μπορούν να έχουν δύο τύπων λίστες, αυτές με κουκκίδες και τις αριθμημένες. Στο 1, δημιουργήσατε λίστες με κουκκίδες στις σελίδες Interests και Favorites. Τώρα θα δημιουργήσετε μία αριθμημένη λίστα. 1. Στην σελίδα Tutorial Practice, τοποθετείστε τον κέρσορα μετά το κείμενο Περιλαμβάνει φωτογραφίες της αγαπημένης μου Porche, στο τελευταίο κελί του πίνακα, και πατήστε CTRL+ENTER. Ο συνδυασμός CTRL+ENTER δημιουργεί μία καινούργια γραμμή κάτω από τον πίνακα. 2. Πατήστε ENTER για να δημιουργήσετε λίγο κενό χώρο κάτω από τον πίνακα. 3. Επιλέξτε Heading 2 από το Change Style drop-down list στην μπάρα εργαλείων. 4. Στην συνέχεια πληκτρολογείστε Τα μοντέλα της σειράς 911 Carrera σε αυτήν την γραμμή και πατήστε ENTER. Μόλις δημιουργήσατε μία Heading 2 παράγραφο κειμένου. Numbered List button 5. Πατήστε το κουμπί Numbered List στην μπάρα εργαλείων. Το FrontPage προσθέτει μια νέα γραμμή με το 1. στην αρχή. 6. Πληκτρολογείστε 911 Carrera Coupe και πατήστε ENTER. Το FrontPage προσθέτει μια νέα γραμμή με το 2. στην αρχή. 7. Στην συνέχεια πληκτρολογείστε το υπόλοιπα στοιχεία για την λίστα: 911 Carrera Cabriolet 911 Carrera 4 Coupe 911 Carrera 4 Cabriolet 911 GT3 36

39 8. Πατήστε το ENTER δύο φορές αφού έχετε εισάγει το τελευταίο στοιχείο. Πατώντας το ENTER δύο φορές τελειώνετε την λίστα. Η λίστα που μόλις δημιουργήσατε θα πρέπει να φαίνεται κάπως έτσι: Αποθηκεύστε την σελίδα σας. 18 Προεπισκόπηση Σελίδων Για να δείτε πώς φαίνονται οι σελίδες σας σε κάποιο πρόγραμμα πλοήγησης (πχ Internet Explorer): Από το μενού File επιλέξετε Preview in Browser Αυτό θα προκαλέσει το άνοιγμα του προγράμματος πλοήγησης με τη σελίδα που έχετε υλοποιήσει. 37