Σημειώσεις για τη χρήση του FrontPage 2003 (αγγλική έκδοση),για κατασκευή απλών ιστοσελίδων.

Εννοώντας απλές ιστοσελίδες, θεωρούμε ένα σύνολο αρχείων, κατά βάση τύπου HTML ή ΗΤΜ. Το FP2003 δεν διαφέρει πολύ από τον κειμενογράφο word όσον αφορά την σύνταξη αρχείων HTML. Αν κάποιος δεν γνωρίζει καθόλου κώδικα HTML, μέσω του FP2003 και των εργαλείων που αυτό παρέχει μπορεί να:

Γράψει κείμενο και να το μορφοποιήσει Εισάγει εικόνες Εισάγει πίνακες Εισάγει συνδέσμους (Hyperlinks) που οδηγούν σε άλλες ιστοσελίδες.

Πριν όμως κάποιος αρχίσει να “χτίζει” την ιστοσελίδα του είναι άκρως απαραίτητο να έχει κάνει ένα σκαρίφημα στο χαρτί με τη διάρθωση που θέλει να έχει η ιστοσελίδα. Ένας καλός τρόπος είναι η εφαρμογή του Δέντρου, όπου στην κορυφή θα υπάρχει η “Κεντρική Σελίδα” (Homepage), και από κάτω οι επιμέρους σελίδες.

Επίσης, πολύ σημαντικό είναι όλα τα αρχεία που θα απαρτίζουν την ιστοσελίδα μας, να τα σώζουμε και να τα επεξεργαζόμαστε σε ΕΝΑΝ φάκελο. Δλδ, αρχεία HTML, εικόνες, video, κτλ.

Συνήθως η κεντρική σελίδα ονοματίζεται index.htm ή index.html, και περιέχει ένα είδος καλωσορίσματος στον επισκέπτη. Από την κεντρική σελίδα υπάρχουν σύνδεσμοι (hyperlinks) που εμφανίζονται άλλες σελίδες (δικές μας ή άλλων στο διαδίκτυο).

Για το περιβάλλον του FP2003, συντομογραφικά εξηγούνται τα παρακάτω…

Εργαλείο/Εντολή Θέση ΠεριγραφήΚάτω αριστερά Επιλέγεται η προβολή παραθύρου, δλδ με ποιόν τρόπο

θέλουμε να συντάξουμε το αρχείο html:Design: Ότι γράφω αυτό θα εμφανίζεται στον φυλλομετρητή, δηλαδή WYSIWYG (What You See Is What You Get – Αυτό Που Βλέπεις Αυτό Θα Πάρεις)Split: Το κάτω μισό παράθυρο είναι όπως το Design, και το επάνω μισό εμφανίζεται ο html κώδικας.Code: Εμφανίζεται μόνο ο κώδικας (για χρήστες που θέλουν να κάνουν την ιστοσελίδα γράφοντας μόνο κώδικα). Preview: Προεπισκόπηση ιστοσελίδας σε εσωτερικό φυλλομετρητή του FP2003 (Δεν χρειάζεται να έχουμε πρώτα σώσει το αρχείο). Η προεπισκόπηση μπορεί να γίνει και με εξωτερικό φυλλομετρητή, πχ. Internet Explorer, πατώντας F12 ή

, αρκεί να έχουμε σώσει και τις τελευταίες αλλαγές που έχουμε κάνει στο αρχείο.

Επάνω οριζόντια εργαλειοθήκη Μορφοποίησης (formatting)

Περιέχει τα γνωστά από το word εργαλεία μορφοποίησης κειμένου.Μια από τις διαφορές που παρατηρεί κανείς, είναι στα διαθέσιμα μεγέθη γραμματοσειράς, όπου υπάρχουν 8 τυποποιημένα μεγέθη από τα οποία μπορούμε να επιλέξουμε.

Επάνω από το παράθυρο επεξεργασίας περιεχομένου ιστοσελίδων

Με τη μορφή σελιδοδεικτών (ετικετών) εμφανίζονται τα αρχεία html που έχουμε ανοιχτά στο FP2003 και επεξεργαζόμαστε. Οι ετικέτες έχουν το όνομα του αρχείου html, και όταν υπάρχει αστερίσκος στο τέλος (*) σημαίνει ότι έχει γίνει κάποια αλλαγή στο

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 1 από 13

συγκεκριμένο αρχείο αλλά δεν έχει σωθεί ακόμα. Βασική εργαλειοθήκη(Standard)

Τα γνωστά από το word εργαλεία:- Νέο αρχείο, Άνοιγμα αρχείου, Αποθήκευση- Αποκοπή, Αντιγραφή, Επικόλληση, Αντιγρ.Μορφοποίησης

- Αναίρεση, Ακύρωση αναίρεσης-//- Δημιουργία Πίνακα-//- Δημιουργία επιπέδου (Layer). Τα επίπεδα (Layers) στο

FP2003 είναι το αντίστοιχο των πλαισίων κειμένου στο word. Δηλαδή, όπου σχεδιάσουμε ένα layer και γράψουμε κείμενο, γραφικά κτλ, έκει ακριβώς θα παρουσιάζεται και στον φυλλομετρητή ιστοσελίδων.Μπορούμε να έχουμε τοποθετήσει περισσότερα του ενός Layer σε ένα αρχείο HTML, αρκεί να προσέξουμε τις επικαλύψεις μεταξύ τους.

-//- Εισαγωγή εικόνας από αρχείο.-//- Εμφάνιση εργαλειοθήκης σχεδίασης (όμοια με το

word).-//- Εισαγωγή Υπερσύνδεσης (hyperlink).

Για να δημιουργήσουμε ένα hyperlink (ή αλλιώς link) επιλέγουμε πρώτα το κείμενο ή/και την εικόνα που θέλουμε να αντιστοιχεί στο link, και κατόπιν πατάμε το εικονίδιο αυτό. Εμφανίζεται το παρακάτω πλαίσιο διαλόγου:

Text to display: Γράφουμε το κείμενο που θέλουμε να εμφανίζεται όταν η μύτη του ποντικιού παραμείνει πάνω από το link, πριν αυτό πατηθεί. (Προαιρετικό)

Από τη λίστα αρχείων επιλέγουμε εκείνο που θέλουμε να εμφανιστεί πατώντας το Link.

Target Frame: δίνει τις επιλογές

Το Target Frame το δηλώνουμε όταν θέλουμε η σελίδα που θα ανασύρει το link (όταν το επιλέξουμε) να ανοίγει π.χ.:

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 2 από 13

o Same Frame – στο ίδιο παράθυρο φυλλομετρητή

o New Window – σε νέο παράθυρο φυλλομετρητή.

Η επιλογή του Target Frame είναι ιδιαίτερα χρήσιμη, κυρίως όταν κατασκευάζουμε σελίδες με πολλαπλά frames. Όταν δηλ. έχουμε Framesets (επεξηγείται παρακάτω).

Ένα άλλο πολύ χρήσιμο χαρακτηριστικό είναι η χρήση Bookmark (σελιδοδείκτης). Μια σελίδα HTML μπορεί να έχει δηλωμένους σελιδοδείκτες. Έτσι, αφού επιλέξουμε το αρχείο από τη λίστα, πατάμε Bookmark και εμφανίζεται η λίστα των σελιδοδεικτών που έχουν οριστεί στο συγκεκριμένο αρχείο (επεξηγείται παρακάτω).

Αν θέλουμε το link να ανασύρει μια άλλη ιστοσελίδα του Διαδικτύου, τότε στο πεδίο Address γράφουμε απευθείας τη διεύθυνση της ιστοσελίδας που θέλουμε (πχ. http :// www . in . gr ), προσέχοντας να έχουμε συμπεριλάβει και το http:// .

Χρήση Σελιδοδεικτών (Bookmarks) Σε μια ιστοσελίδα (αρχείο html) μπορούμε να ορίσουμε σελιδοδείκτες, ώστε με τη χρήση links να μεταπηδούμε σε αυτούς. Για παράδειγμα, μια σελίδα που έχει ως περιεχόμενο μια λίστα από ερωτήσεις/απαντήσεις υπό μορφή παραγράφων, μπορούμε στην αρχή κάθε ερώτησης να βάλουμε ένα bookmark. Αυτό γίνεται ως εξής:

Στο σημείο που θέλουμε να βάλουμε το σελιδοδείκτη τοποθετούμε τον κέρσορα. Από το μενού Insert (εισαγωγή) επιλέγουμε Bookmark (σελιδοδείκτης)… Εμφανίζεται ένα πλαίσιο διαλόγου που μας ζητά να δώσουμε ένα όνομα στον σελιδοδείκτη

(Bookmark name). Στο ίδιο πλαίσιο διαλόγου εμφανίζεται και μια λίστα με τυχόν ήδη άλλους ορισμένους σελιδοδείκτες, ώστε να δώσουμε ένα μοναδικό όνομα (δεν μπορούμε να έχουμε παραπάνω από έναν σελιδοδείκτη με ίδιο όνομα στο ίδιο αρχείο html).

Πατώντας OK, στο σημείο που είχαμε τον κέρσορα εμφανίζεται ένα σημαιάκι ( ) που υποδηλώνει την παρουσία σελιδοδείκτη. Το σημαιάκι είναι οπτικό βοήθημα στο FP2003, και δεν θα εμφανίζεται στον φυλλομετρητή (Browser, πχ Internet Explorer)

Μια πολύ κοινή τακτική είναι να τοποθετούμε σελιδοδείκτη στην αρχή της σελίδας, με το όνομα top. Έτσι, όταν η σελίδα είναι πολύ μεγάλη (δηλ. έχει μεγάλο μάκρος προς τα κάτω), και έχουμε κατέβει χαμηλά για να τη διαβάσουμε και θέλουμε να μεταπηδήσουμε απευθείας στην κορυφή της, βάζουμε σε κάποια τακτά σημεία μια λέξη (συνήθως «Αρχή») ή εικονίδιο, και τη φτιάχνουμε link που να ανασύρει:

το ίδιο το αρχείο στο ίδιο frame (Target Frame-> Same Frame) στο Bookmark “top”.

Χρήση πλαισίων ( Frames ) Τα Frames είναι χρήσιμα κυρίως για να οργανώνουμε καλύτερα την εμφάνιση πολυπλοκότερων ιστοσελίδων. Στα αρχεία που χρησιμοποιούμε frames (πλαίσια) η ιεραρχία που ακολουθείται είναι η εξής:

Το αρχείο index.html περιέχει πληροφορίες για:o Πόσα πλαίσια υπάρχουνo Που είναι τοποθετημένα τα πλαίσια και τι διαστάσεις έχουνo Τι όνομα έχει κάθε πλαίσιοo Τι αρχείο html θα εμφανίζεται στο πλαίσιο.

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

Θέλουμε να φτιάξουμε μια σελίδα διαρθρωμένη ως εξής:

Λογότυπο (banner)

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 3 από 13

Πλαίσιοbanner

Αρχική σελίδα

Βιογραφικό

Ενδιαφέροντα

Περιεχόμενο αρχικής σελίδας

Το banner θέλουμε πάντα να είναι σταθερό, καθώς θα περιέχει κάποιο λογότυπο κτλ. (banner.html) Kάτω από το banner και αριστερά θέλουμε να έχουμε μια θεματολογία υπό μορφή Links.

(navigation.html) Κάτω από το banner και δεξιά, θέλουμε να είναι ο χώρος όπου θα εμφανίζονται τα περιεχόμενα

των Links που θα επιλέγουμε από την αριστερή θεματική λίστα. (mainpage.html) Η συνολική σελίδα θέλουμε να είναι η index.html, που θα περιέχει τα παραπάνω πλαίσια.

Για να γίνουν τα παραπάνω, κάνουμε τα εξής:1. Δημιουργούμε τα html αρχεία με το αντίστοιχο περιεχόμενο:

banner.html (με λογότυπα κτλ.) navigation.html (με τη θεματολογία, πχ Αρχική σελίδα, Βιογραφικό, Ενδιαφέροντα) mainpage.html (με το κείμενο καλωσορίσματος στην ιστοσελίδα) biography.html (με το κείμενο του βιογραφικού) hobbies.html (με το κείμενο των ενδιαφερόντων)

2. Δημιουργούμε το αρχείο index.html, όπου κάνουμε τα εξής:

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

Αμέσως εμφανίζονται τα αντίστοιχα χωρίσματα υπο μορφή πίνακα:

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 4 από 13

Πλαίσιοnavbar Πλαίσιο

main

Επιλέγουμε τα δύο επάνω οριζόντια κελιά και τα συγχωνεύουμε:

Ο πίνακας πήρε τη μορφή:

Στο πάνω κελί που θέλουμε να έχουμε το banner, τοποθετούμε τον κέρσορα και επιλέγουμε

από το μενού Επαναλαμβάνουμε το ίδιο και για τα άλλα κελιά

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 5 από 13

Τραβάμε από τις κάτω δεξιές άκρες τα frames που φτιάξαμε ώστε να έρθουν στα ίδια (και λίγο μικρότερα) περιθώρια των κελιών του πίνακα. Το αποτέλεσμα θα είναι κάπως έτσι:

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

i. Για τα κελιά, μπορούμε να αλλάξουμε τις παραμέτρους τους κάνοντας δεξί κλικ μέσα σε ένα κενό χώρο τους και επιλέγοντας από το μενού το Cell Properties

ii. Από το πλαίσιο διαλόγου ορίζουμε χειροκίνητα το ύψος (height) και πλάτος (width), σε pixels. Μπορούμε να ορίσουμε και το χρώμα

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 6 από 13

φόντου από το Background Color ώστε να συμπίπτει με το φόντο της σελίδας που θα τοποθετηθεί στο frame.

iii. Για τις παραμέτρους των frames, τοποθετούμε τη μύτη του ποντικιού στην άκρη του frame, κάνουμε δεξί κλικ και επιλέγουμε:

iv. Από το πλαίσιο διαλόγου που εμφανίζεται προσέχουμε τα εξής:

και προσαρμόζουμε κατάλληλα τα περιθώρια και τις λοιπές ρυθμίσεις.v. Για τα τρία frames βάζουμε:

1. Στo επάνω - Name: banner , Initial page: banner.html2. Στo κάτω αριστερά - Name: navbar , Initial page: navigation.html3. Στo κάτω δεξιά - Name: main , Initial page: mainpage.html

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 7 από 13

Το index.html θα έχει πλέον παρόμοια μορφή με την παρακάτω εικόνα:

3. Τέλος, θέλουμε να ρυθμίσουμε κατάλληλα τα Links από το αριστερό frame ώστε να ανοίγει η αντίστοιχη σελίδα στο κύριο (main) frame.

Για το link Αρχική Σελίδαi. Επιλέγουμε το κείμενοii. Πατάμε iii. Στο πλαίσιο διαλόγου Insert Hyperlink

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 8 από 13

επιλέγουμε το αρχείο mainpage.html και στο Target Frame γράφουμε στο πεδίο Target Setting το main.

iv. Ομοίως για τα Links Βιογραφικό και Ενδιαφέροντα. Δηλ.:- Βιογραφικό: αρχείο biography.html και Target Frame -> main- Ενδιαφέροντα: αρχείο hobbies.html και Target Frame -> main

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

Γενικές Ρυθμίσεις αρχείου html Από το μενού File -> Properties… εμφανίζεται το πλαίσιο διαλόγου

όπου υπάρχουν οι καρτέλες:General Title – Βάζουμε έναν τίτλο στη σελίδα (θα εμφανίζεται στο πάνω μέρος του

φυλλομετρητήBackground sound – Προαιρετικά βάζουμε ένα αρχείο ήχου που θέλουμε να ακούγεται

στο παρασκήνιοFormatting Ορίζουμε τα χρώματα στο φόντο της σελίδας, των γραμμάτων (καθολικά), της

εικόνας που θέλουμε να επαναλαμβάνεται στο φόντο, κτλ.Advanced Ορίζουμε τα ελάχιστα περιθώρια που θέλουμε να αφήνονται γύρω από τη σελίδαLanguage Προσέχουμε το HTML encoding να είναι Greek

Γενικές παρατηρήσεις για τα ονόματα των αρχείων Είναι πολύ σημαντικό τα ονόματα όλων των αρχείων που απαρτίζουν την ιστοσελίδα μας (html, γραφικά, ήχοι, video) να:

Είναι γραμμένα με ΜΙΚΡΑ και ΛΑΤΙΝΙΚΑ Να μην υπάρχουν ΚΕΝΑ μεταξύ λέξεων. Αντί κενού μπορεί να μπει ο χαρακτήρας underscore (_).

Δηλαδή, το endiaferonta links.html είναι λάθος, ενώ το endiaferonta_links.html είναι σωστό.

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 9 από 13

Δημοσίευση ιστοσελίδας στο Διαδίκτυο Για να είναι ορατή μια ιστοσελίδα το διαδίκτυο, θα πρέπει να τοποθετηθούν τα αρχεία που την απαρτίζουν (φιλοξενηθούν) σε έναν Εξυπηρετητή Ιστοσελίδων (web server). O web server θα πρέπει να είναι ένας Η/Υ, ο οποίος:

Να έχει πραγματική IP διεύθυνση στο διαδίκτυο (ή έστω να αντιστοιχείται με NAT η ψευδο-IP του με μια πραγματική IP, κάνοντας port-forwarding)

To port 80 να είναι ελεύθερο από firewalls ή access-lists σε κεντρικούς δρομολογητές. Να τρέχει λογισμικό Web Server, πχ Apache ή Microsoft IIS web server.

Σε περίπτωση που δεν έχουμε (ή δεν θέλουμε) να χρησιμοποιήσουμε δικό μας web server, μπορούμε να αξιοποιήσουμε δωρεάν υπηρεσίες web hosting (φιλοξενίας ιστοσελίδων) από εταιρείες στο διαδίκτυο, όπως πχ. η www . tripod . com . Συνήθως όμως, οι δωρεάν υπηρεσίες έχουν κάποιους περιορισμούς. Στην Tripod μεταξύ άλλων, δίδεται χώρος μόνο 20ΜΒ και τοποθετούνται αυτόματα διαφημιστικά της εταιρείας σε κάθε σελίδα.

Για το παράδειγμα ιστοσελίδας με frames που δόθηκε παραπάνω, θα ακολουθήσει ένα παράδειγμα τοποθέτησης της ιστοσελίδας στο Tripod με χρήση εργαλείων του FP2003.

1. Κατ’ αρχήν δημιουργούμε έναν δωρεάν λογαριασμό χρήστη στο www . tripod . com μέσω του συνδέσμου . Δημιουργήσαμε τον χρήστη kdao88 με ένα ανάλογο password (κωδικό).

2. Η διεύθυνση ιστοσελίδας που παραχωρεί το tripod.com εξαρτάται από το όνομα χρήστη που έχουμε επιλέξει από τη διαδικασία sign-up. Στην περίπτωσή μας είναι kdao88.tripod.com .

3. Στο FP2003 από το μενού File επιλέγουμε Publish Site…

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 10 από 13

4. Εμφανίζεται το πλαίσιο διαλόγου

όπου επιλέγουμε FTP και δίνουμε ως server το ftp :// ftp . tripod . com

5. Πατώντας ΟΚ, επικοινωνεί το FP2003 μέσω πρωτοκόλλου FTP με τον διακομιστή της Tripod, και ακολούθως ζητά όνομα χρήστη και κωδικό πρόσβασης

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 11 από 13

6. Μόλις δοθούν τα σωστά στοιχεία το παράθυρο του FP2003 παίρνει τη μορφή

7. Μόλις πατήσουμε το Publish Web Site, αρχίζουν και αντιγράφονται τα αρχεία που απαρτίζουν

την ιστοσελίδα μας από τον τοπικό Η/Υ προς τον web server.8. Όταν ολοκληρωθεί η διαδικασία, στα δυο παράθυρα θα υπάρχουν τα ίδια αρχεία

9. Πλέον η σελίδα δημοσιεύτηκε και είναι ορατή στο διαδίκτυο στη διεύθυνση

http :// kdao 88. tripod . com

Στο εξής, για όποια αλλαγή ή προσθήκη κάνουμε στα αρχεία της ιστοσελίδας μας στον τοπικό H/Y, δεν πρέπει να παραλείπουμε να ενημερώνουμε και τα αρχεία που φιλοξενούνται στον webserver, ακολουθώντας την παραπάνω διαδικασία από το βήμα 3 έως 7.

Ρυθμίσεις αρχείων html για συγκεκριμένες αναλύσεις οθόνης Το FP2003 δίνει τη δυνατότητα να προ-ρυθμίζουμε την ανάλυση οθόνης στην οποία θέλουμε οι χρήστες να βλέπουν την ιστοσελίδα μας. Αυτό γίνεται από το μενού View -> Page Size.

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 12 από 13

Λίστα αρχείων τοπικού

Η/Υ

Λίστα αρχείων

στον web server

Για παράδειγμα αν θέλουμε η ιστοσελίδα να απεικονίζεται πλήρης σε ανάλυση 800x600 pixels (με μεγιστοποιημένο το παράθυρο ενός φυλλομετρητή, τότε επιλέγουμε:

Οι Σημειώσεις αυτές γράφτηκαν από τον πρώην Σπουδαστή μου, σημερινό Συνάδελφο και πάνω απ’ όλα φίλο και αδελφό

Κώστα Οικονομίδη.Βόλος Ιούνιος 2006

Σημειώσεις Frontpage 2003 (by KDAO ®’06) Σελίδα 13 από 13