ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage

ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage Τι είναι µια ιστοσελίδα (Web page); Μια ιστοσελίδα (web page) είναι ένα αρχείο που εµφανίζεται στην οθόνη του υπολογιστή από ένα πρόγραµµα που λέγεται φυλλοµετρητής ιστοσελίδων (browser), το οποίο µεταφράζει την κωδικοποίηση της σελίδας και την παρουσιάζει σε ένα παράθυρο. ηµοφιλή τέτοια προγράµµατα είναι ο Internet Explorer, o Netscape Navigator/Communicator, το FireFox, κ.α. Τα αρχεία των ιστοσελίδων έχουν επέκταµα «.html» ή «.htm», είναι γραµµένα µε βάση τη γλώσσα HTML (HyperText Mark-up Language), αποτελούν ουσιαστικά αρχείο κειµένου και είναι ανεξάρτητα πλατφόρµας, δηλαδή µπορούν να παρουσιασθούν µε τον ίδιο τρόπο από οποιοδήποτε πρόγραµµα browser σε οποιοδήποτε λειτουργικό σύστηµα ή υπολογιστή. Η κωδικοποίηση HTML αποτελείται βασικά από µια σειρά από οδηγίες προς τον browser για τον τρόπο που θα εµφανίσει τα περιεχόµενα της σελίδας στην οθόνη. Χρησιµοποιεί µια σειρά από tags, τα οποία λειτουργούν σαν διακόπτες on/off. Τα tags γράφονται συνήθως µε κεφαλαία γράµµατα, έχουν τη µορφή: <TAG> και συνήθως εµφανίζονται (αλλά όχι πάντα) ως ζεύγη: <TAG> </TAG>, το δεύτερο εκ των οποίων είναι το tag κλεισίµατος. Οτιδήποτε περιέχεται µεταξύ ενός τέτοιου ζεύγους εµφανίζεται µε βάση τις οδηγίες που αντιστοιχούν στο πρώτο tag του ζεύγους. Έτσι, ένα tag που ορίζει ότι ένα κείµενο θα εµφανιστεί κεντραρισµένο στο παράθυρο θα έχει τη µορφή: <CENTER>Καλώς ήλθατε!</center> Πολλά HTML tags µπορούν να έχουν και ιδιότητες (attributes), δηλαδή επιπλέον οδηγίες που γράφονται στο πρώτο tag από το ζεύγος. Κάθε ιδιότητα έχει µια τιµή. Για παράδειγµα, ένα tag που ορίζει ότι ένα κείµενο θα εµφανιστεί µε κόκκινα γράµµατα θα έχει τη µορφή, <FONT COLOR="RED"> Καλώς ήλθατε!</font> όπου FONT είναι το tag, COLOR είναι η ιδιότητα και RED είναι η τιµή της ιδιότητας. Μια ιστοσελίδα µπορεί να δοµηθεί µε τη χρήση ενός απλού προγράµµατος επεξεργασίας κειµένου όπως το Σηµειωµατάριο (NotePad), αν κανείς γνωρίζει όλα τα tags της HTML. Μπορεί κανείς να αναζητήσει ένα από τα πολλά εισαγωγικά κείµενα όπως HTML Basics για να µάθει τα βασικά της HTML. Tι είναι ένας εξυπηρετητής Web (Web Server); Μια ιστοσελίδα πρέπει να φιλοξενείται σε έναν Web server, έναν υπολογιστή ο οποίος είναι συνδεδεµένος στο διαδίκτυο και τρέχει ένα πρόγραµµα µε το οποίο διαθέτει ιστοσελίδες στο WWW. Το πανεπιστήµιο και το τµήµα µας διαθέτει Web servers που διαθέτουν χώρο για ιστοσελίδες των φοιτητών ή του προσωπικού. Έτσι, αφού δηµιουργήσετε τις ιστοσελίδες σας σε ένα φάκελο (π.χ. MyWeb) και τις ελέγξετε εξαντλητικά στον υπολογιστή σας, πρέπει να τις αποθηκεύσετε σε ένα φορητό µέσο αποθήκευσης (δισκέτα, CDROM, ή flash stick) και να τις δώσετε στον διαχειριστή ενός Web server για να τις εγκαταστήσει, ώστε να είναι τελικά διαθέσιµες στο διαδίκτυο. Τι είναι κόµβος Web (Web site), Home page και URL (Universal Resource Locator) Το Web site είναι ένα σύνολο από ιστοσελίδες που αφορούν ένα θέµα. Όλα τα αρχεία ενός Web site περιέχονται σε ένα φάκελο που φιλοξενείται σε έναν Web server. Σε αυτόν το φάκελο το αρχείο εκκίνησης, δηλαδή το αρχείο το οποίο επισκέπτεται αρχικά ένας επισκέπτης λέγεται Home page και έχει συνήθως το όνοµα index.htm. Το URL ενός Web site ή µιας ιστοσελίδας είναι η διεύθυνσή τους στο διαδίκτυο. Έτσι αν ο φάκελος ενός Web site είναι ο MyWeb και το όνοµα του Web Server είναι www.chm.auth.gr, το URL του site και της αρχικής ιστοσελίδας είναι: http:// www.chm.auth.gr/myweb/index.htm Τέλος αν ο φάκελος MyWeb περιέχει έναν άλλο φάκελο Personals στον οποίο υπάρχει µια ιστοσελίδα µε όνοµα hobbies.htm, το URL αυτής της ιστοσελίδας είναι: http:// www.chm.auth.gr/myweb/personal/hobbies.htm.

2 Γενικά για το FrontPage To πρόγραµµα FrontPage είναι ένας γραφικός επεξεργαστής HTML, µε τον οποίο δηµιουργούνται ιστοσελίδες. Αντί να γνωρίζουµε και να πληκτρολογούµε τα tags της HTML, όπως <TITLE>, <FONT COLOR="#FFFFFF">, και <TD ALIGN="center" WIDTH="50%">, δηµιουργούµε τη σελίδα µας σε ένα γραφικό περιβάλλον ανάλογο του Microsoft Word και το FrontPage παράγει και αποθηκεύει τον απαραίτητο κώδικα HTML. Εκκίνηση του προγράµµατος FrontPage Εκκινήστε το πρόγραµµα FrontPage επιλέγοντας το µενού Start > Programs > Microsoft FrontPage. Θα δηµιουργηθεί µια νέα κενή σελίδα την οποία µπορείτε να αρχίστε να αναπτύσσετε. Αν έχετε ήδη αρχίσει να αναπτύσσετε µια ιστοσελίδα, την έχετε αποθηκεύσει και θέλετε να συνεχίσετε την ανάπτυξή της κάντε διπλό κλικ στο εικονίδιο του αρχείου για να εκκινήσει η το πρόγραµµα και να ανοίξει η σελίδα ή εκκινήστε το πρόγραµµα, επιλέξτε το µενού File > Open Page, αναζητήστε το αρχείο και ανοίξτε το. ηµιουργία ενός νέου Web site και άνοιγµα ενός Web site Καθώς αναπτύσσετε τις ιστοσελίδες ενός Web site, θα δηµιουργήσετε ένα σχήµα πλοήγησης όπου σε κάθε µια από αυτές θα υπάρχουν σχετικές υπερσυνδέσεις που τη συνδέουν µε τις υπόλοιπες. Έτσι, πριν δηµιουργήσετε ένα Web site πρέπει να δηµιουργήσετε ένα φάκελο που θα φιλοξενήσει τις ιστοσελίδες σας και όλα τα αρχεία που συνδέονται µε το Web site. Προς τούτο: Ανοίξτε το παράθυρο του φακέλου στον οποίο θα δηµιουργήσετε το νέο φάκελο. Με δεξί κλικ σε κενό χώρο του παραθύρου επιλέξτε New, Folder Ονοµάστε τον νέο φάκελο, π.χ. myweb2 ηµιουργία ενός νέου Web site Εκκινήστε το FrontPage Επιλέξτε το µενού File > New > Web. Μπορείτε να επιλέξετε ένα πρόυπο για το νέο We site, αλλά είναι προτιµότερο να δηµιουργήσετε ένα Empty Web. Επιλέξτε ως φάκελο του νέου Web site το φάκελο ου δηµιουργήσατε προηγουµένως. Στο φάκελλο στον οποίο επιλέξατε ως φάκελο του νέου Web site θα δηµιουργηθούν οι παρακάτω φάκελοι: private: φάκελος στον οποίο θα αποθηκευθούν αρχεία χρήσιµα για εξελιγµένες δυνατότητες του Frontpage images: φάκελος στον οποίο πρέπει να αποθηκεύσετε όλα τα αρχεία γραφικών που θα χρησιµοποιήσετε στις ιστοσελίδες του Web site. Άνοιγµα ενός υπάρχοντος Web site Επιλέξτε το µενού File > Open Web from the main menu. Αναζητήστε το φάκελο που φιλοξενεί το Web site. Επιλέξτε Open. Γραµµές εργαλείων (Toolbars) του FrontPage Βασική γραµµή εργαλείων- Η γραµµή αυτή περιέχει κουµπιά για τις βασικές εργασίες διαχείρισης αρχείων που είναι κοινές σε όλα τα προγράµµατα του Microsoft Office. Γραµµή µορφοποίησης- Περιέχει κουµπιά για τη µορφοποίηση κειµένου.

3 Γραµµή πινάκων- Περιέχει κουµπιά για την εισαγωγή, διαχείριση και µορφοποίηση πινάκων. Αν δεν είναι ανοικτή επιλέξτε το µενού View > Toolbars > Tables. Προβολές του Front Page Page View- Σ αυτήν την προβολή δηµιουργείτε τις ιστοσελίδες. Folders View- Εµφανίζει τους φακέλους και τα περιεχόµενα του Web site. Reports View- Εµφανίζει συνόψεις όλων των αρχείων που χρησιµοποιούνται στο Web site. Navigation View- Εµφανίζει ένα χάρτη του Web site. Hyperlinks View- Εµφανίζει τις υπερσυνδέσεις που υπάρχουν µεταξύ των ιστοσελίδων του Web site. Tasks View- Εµφανίζει τον προγραµµατισµό εργασιών για την ολοκλήρωση του Web site. Παράθυρο εργασιών New Page or Web Open a page: Άνοιγµα µιας υπάρχουσας ιστοσελίδας. More pages : Εµφάνιση του πλαισίου διαλόγου για άνοιγµα µιας υπάρχουσας ιστοσελίδας. New: Άνοιγµα µιας νέας ιστοσελίδας ή Web site New from existing page: ηµιουργία άτιτλου αντιγράφου µιας υπάρχουσας ιστοσελίδας. New from Template: ηµιουργία νέας ιστοσελίδας ή Web site µε βάση ένα πρότυπο (template).

4 Έλεγχος της ιστοσελίδας κατά τη δηµιουργία της FrontPage Preview Καθώς αναπτύσσετε µια ιστοσελίδα σε Normal View αυτό που βλέπετε αποτελεί µια προσέγγιση του πως θα εµφανιστεί η ιστοσελίδα στο παράθυρο ενός browser. Έτσι, πρέπει να ελέγχετε περιοδικά τη µορφή της ιστοσελίδας που αναπτύσσετε. Επίσης, µπορεί να επιθυµείτε να δείτε και να ελέγξετε τον κώδικα HTML που παράγεται. Το FrontPage προσφέρει ένα εύκολο τρόπο για αυτό. Στην αριστερή κάτω γωνία του παραθύρου του προγράµµατος υπάρχουν τρία κουµπιά η επιλογή των οποιών οδηγεί σε τρεις τρόπους προβολής ενός εγγράφου (ιστοσελίδας). Normal: Η προβολή στην οποία δηµιουργείτε την ιστοσελίδα HTML: Η προβολή στην οποία φαίνεται ο κώδικας HTML που παράγεται Preview: Η προβολή στην οποία φαίνεται η µορφή της ιστοσελίδας όπως θα εµφανιστεί σε έναν browser. Στην προβολή αυτή δε µπορούµε µα επεξεργαστούµε κανένα στοιχείο της ιστοσελίδας. Έλεγχος ιστοσελίδας στο Web Browser Ο καλύτερος τρόπος να ελέγξετε την ιστοσελίδα που αναπτύσσετε είναι να την ανοίξετε µε έναν Web browse. Προς τούτο: Εκκινήστε τον web browser που επιθυµείτε (Internet Explorer, Firefox, Netscape Navigator/Communicator). Επιλέξτε File > Open Αναζητήστε την ιστοσελίδα που έχετε αποθηκεύσει και ανοίξτε την. Ελέγξτε αν η ιστοσελίδα σας εµφανίζεται όπως αναµένετε Επαναλάβατε τη διαδικασία µε όλους τους browsers που είναι εγκατεστηµένοι στον υπολογιστή σας για να βεβαιωθείτε ότι η ιστοσελίδα σας εµφανίζεται σε όλους µε τον ίδιο αναµενόµενο τρόπο. Αν υπάρχουν διαφορές διορθώστε τη σελίδα στο FrontPage, αποθηκεύστε την και επαναλάβατε την όλη διαδικασία ελέγχου. ηµιουργία νέας ιστοσελίδας Επιλέξτε το µενού File > New Page Στο παράθυρο εργασιών επιλέξτε ένα πρότυπο ή καλύτερα επιλέξτε Blank Page Αποθήκευση ιστοσελίδας Επιλέξτε το µενού File > Save Page. Αν την αποθηκεύετε για πρώτη φορά δώστε ένα όνοµα για το αρχείο.html που θα δηµιουργηθεί. Επιλέξτε το µενού File > Save Page as αν θέλετε να αποθηκεύσετε την ιστοσελίδα µε άλλο όνοµα Ρύθµιση ιδιοτήτων ιστοσελίδας Ορισµός τίτλου ιστοσελίδας Στον κώδικα HTML κάθε ιστοσελίδας υπάρχει το tag <TITLE>. H πληροφορία που περιέχεται σε αυτό το tag εµφανίζεται στη µπλε µπάρα τίτλου του browser όταν εµφανίζεται η συγκεκριµένη σελίδα. Πολλές µηχανές αναζήτησης (Google, yahoo, ) χρησιµοποιούν αυτήν την πληροφορία για να καταχωρήσουν µια σελίδα. Έτσι, είναι σηµαντικό η πληροφορία αυτή να είναι συνοπτική και περιγραφική. Για παράδειγµα ο τίτλος µιας σελίδας δε µπορεί να είναι «Η ιστοσελίδα µου», αλλά «George Sandros CV and interests». Αν δεν εισάγετε τίτλο το FrontPage θα εισάγει αυτόµατα ως τίτλο την πρώτη γραµµή του κειµένου της ιστοσελίδας. Για να εισάγετε έναν τίτλο: To insert the <TITLE> tag information, Επιλέξτε το µενού File > Properties ή µε δεξί κλικ σε κενό χώρο της σελίδας επιλέξτε Page Properties. Στο πλαίσιο διαλόγου Page Properties πληκτρολογήστε τον τίτλο και επιλέξτε ΟΚ.

5 Ο τίτλος της σελίδας εµφανίζεται στη µπάρα τίτλου του Browser και όχι στο σώµα της ιστοσελίδας. Έτσι, δεν είναι απαραίτητο να είναι ίδιος µε οποιονδήποτε τίτλο υπάρχει στο σώµα της σελίδας. Ορισµός περιγραφής της ιστοσελίδας για µηχανές αναζήτησης και Browsers Εκτός από την πληροφορία του τίτλου οι µηχανές αναζήτησης (Google, yahoo, ) χρησιµοποιούν για την καταχώρηση και αναζήτηση της ιστοσελίδα σας και µετα-πληροφορίες που περιέχονται σε µια ιστοσελίδα µέσα στα tags <META>. Οι µετα-πληροφορίες είναι πληροφορίες για τις πληροφορίες που περιέχει η ιστοσελίδα. Υπάρχουν τρία βασικά είδη πληροφοριών που εισάγονται στα tags <META>, η description, τα keywords, και ο author. Όταν κάνετε µια αναζήτηση σε µια µηχανή αναζήτησης πληκτρολογείτε κάποιες λέξεις. Οι λέξεις αυτές είναι οι λέξεις κλειδιά, τα keywords. Η µηχανή αναζήτησης εµφανίζει τη σελίδα σας στις ευρεθείσες αν οι λέξεις κλειδιά που πληκτρολόγησε ο χρήστης ταιριάζουν µε τα keywords που έχετε εισάγει στα tags <ΜΕΤΑ> της σελίδας σας. Κατά τη εµφάνιση των σελίδων που βρέθηκαν η µηχανή αναζήτησης εµφανίζει και µια περιγραφή της σελίδας που είναι το description που έχετε εισάγει στα tags <ΜΕΤΑ> της σελίδας σας. Η εισαγωγή του author στα tags <ΜΕΤΑ> της σελίδας σας είναι ένας τρόπος για να µπορούν οι άλλοι να επικοινωνούν µε εσάς. Η πληροφορία αυτή δεν εµφανίζεται στις µηχανές αναζήτησης, αλλά ένα έµπειρος χρήστης µπορεί να την αναζητήσει στον κώδικα HTML της σελίδας σας. Για να εισάγετε µετα-πληροφορίες στη σελίδα σαςto include meta information in your Web page, Επιλέξτε το µενού File > Properties ή µε δεξί κλικ σε κενό χώρο της σελίδας επιλέξτε Page Properties. Στο πλαίσιο διαλόγου Page Properties επιλέξτε Custom. Οι µετα-πληροφορίες πρέπει να εισαχθούν στην περιοχή User Variables.

6 Author Κάντε κλικ στο κουµπί Add. Στο πλαίσιο διαλόγου User Meta Variable πληκτρολογήστε Author στο πεδίο Name και το όνοµά σας και το Ε-mail σας στο πεδίο Value. Κάντε κλικ στο OK. Keywords Κάντε κλικ στο κουµπί Add. Στο πλαίσιο διαλόγου User Meta Variable πληκτρολογήστε Keywords στο πεδίο Name και τις λέξεις κλειδιά που επιλέξατε στο πεδίο Value. Κάντε κλικ στο OK. Description Κάντε κλικ στο κουµπί Add. Στο πλαίσιο διαλόγου User Meta Variable πληκτρολογήστε Description στο πεδίο Name και την περιγραφή που επιλέξατε στο πεδίο Value. Κάντε κλικ στο OK.

7 Καθώς εισάγετε (Add) νέες µετα-πληροφορίες το πρόγραµµα τις εισάγει στο παράθυρο διαλόγου Page Properties Custom, αλλά και στον κώδικα HTML. Μπορείτε να τις δείτε στην αρχή του κώδικα HTML αν επιλέξετε προβολή HTML. Ρυθµίσεις εµφάνισης της ιστοσελίδας Στο πλαίσιο διαλόγου Page Properties µπορείτε να επιλέξετε το χρώµα του φόντου, του κειµένου, των υπερσυνδέσεων, κ.α. Επίσης µπορείτε να επιλέξετε µια εικόνα σαν φόντο αλλά και ένα θέµα του FrontPage (Theme). Προσθήκη θέµατος (Theme) Ένα θέµα (theme) είναι ένα προκαθορισµένο σύνολο από ρυθµίσεις χρώµατος, φόντου κ.λ.π. από τα πολλά που διαθέτει το FrontPage και µπορούµε να εφαρµόσουµε στη σελίδα µας. Για να εφαρµόσετε ένα θέµα: Επιλέξτε το µενού Formal > Theme Επιλέξτε το θέµα που επιθυµείτε και ρυθµίστε τις λεπτοµέρειες του Επιλέξτε Apply To FrontPage αποθηκεύει τα αρχεία (γραφικά, κ.α.) του θέµατος σε ένα νέο φάκελο µε όνοµα _themes στο φάκελο που φιλοξενεί το Web site σας. Παρόλο που η χρήση ενός θέµατος έχει το πλεονέκτηµα ότι επιτυγχάνετε µια αρκετά καλή σχεδίαση της ιστοσελίδας σας ενώ δεν ασχολείστε µε σχεδιαστικές λεπτοµέρειες, έχει και µερικά µειονεκτήµατα, όπως: Μπορείτε να εφαρµόσετε ένα µόνο θέµα σε κάθε ιστοσελίδα. Τα θέµατα χρησιµοποιούν πολλά γραφικά αρχεία που αποθηκεύονται στο φάκελο µε όνοµα _themes στο φάκελο που φιλοξενεί το Web site σας. Έτσι, πρέπει να δώσετε ιδιαίτερη προσοχή όταν µεταφέρετε το Web site σας στον Web Server ώστε να µην αλλάξει η δοµή και το περιεχόµενο του φακέλου που το περιέχει. Κάθε φορά που εφαρµόζετε ένα νέο θέµα σε µια ιστοσελίδα τα νέα αρχεία γραφικών αποθηκεύονται στο φάκελο _themes, αλλά τα αρχεία του προηγούµενου θέµατος δε διαγράφονται. Έτσι, ο φάκελος _themes αυξάνεται συνεχώς σε µέγεθος αφού περιέχει και αρχεία γραφικών που δε χρησιµοποιούνται πια στις ιστοσελίδες σας. Ορισµός χρωµάτων Μπορείτε να ορίσετε το χρώµα του φόντου, του κειµένου και των υπερσυνδέσεων ως εξής: Επιλέξτε το µενού Format > Background. Στην περιοχή Colors επιλέξτε το χρώµα για κάθε αντικείµενο από το αντίστοιχο µενού χρώµατος.

8 Μπορείτε να επιλέξετε ένα από τα βασικά χρώµατα ή να επιλέξετε More Colors για να δείτε µια παλέτα από τα 256 χρώµατα Web και να κάνετε κλικ σε ένα από αυτά. Κάντε κλικ στο ΟΚ. ώστε προσοχή στο συνδυασµό του χρώµατος του φόντου µε αυτό του κειµένου, ώστε να είναι δυνατή η εύκολη ανάγνωση της σελίδας. Τα χρώµατα που επιλέγετε εµφανίζονται στη συνέχεια στο µενού χρωµάτων στην περιοχή Document Colors. Προσθήκη εικόνας στο φόντο Μπορείτε να ορίστε µια εικόνα ως φόντο της ιστοσελίδας σας. Προς τούτο: Αποθηκεύστε το αντίστοιχο αρχείο εικόνας στο φάκελο «images» µέσα στο φάκελο που περιέχει το Web site σας. Επιλέξτε Format > Background Στην περιοχή Formatting του πλαισίου διαλόγου επιλέξτε Background picture. Κάντε κλικ στο Browse, ανοίξτε το φάκελο «../MyWeb/images» και επιλέξτε το αρχείο εικόνας. Κάντε κλικ στο ΟΚ. ΠΡΟΣΟΧΗ. Το αρχείο γραφικών πρέπει οπωσδήποτε να αποθηκευθούν στο φάκελο «images» µέσα στο φάκελο που περιέχει το Web site σας. Αν επιλέξετε ένα αρχείο γραφικών από φάκελο εκτός του φακέλου που περιέχει το Web site σας, όταν το site σας εγκατασταθεί στο Web server στο γραφικό δε θα εµφανίζεται στην ιστοσελίδα σας. Ορισµός γλώσσας της ιστοσελίδας Όταν δηµιουργούµε µια ιστοσελίδα µε ελληνικό περιεχόµενο πρέπει να ορίζουµε την κωδικοποίηση της γλώσσας ως Greek ώστε οι χαρακτήρες να εµφανίζονται σωστά στο browser κάθε χρήστη. Αν δεν έχει ορισθεί η γλώσσα η σελίδα σας µπορεί να εµφανίζεται µε χαρακτήρες που δεν αναγνωρίζονται. Για να ορίζετε τη γλώσσα: Επιλέξτε το µενού File > Properties ή µε δεξί κλικ σε κενό χώρο της σελίδας επιλέξτε Page Properties. Στο πλαίσιο διαλόγου Page Properties επιλέξτε Language. Σε όλα τα µενού επιλέξτε Greek. Κάντε κλικ στο ΟΚ. Προσθήκη και διαµόρφωση κειµένου H πληκτρολόγηση και προσθήκη κειµένου στο FrontPage γίνεται µε ακριβώς τον ίδιο τρόπο όπως και σε ένα πρόγραµµα επεξεργασίας κειµένου. Πληκτρολογείτε το κείµενο και πατάτε το πλήκτρο <Enter> για να αλλάξετε παράγραφο. Στην HTML χρησιµοποιείται διπλό κενό διάστηµα µεταξύ των δύο παραγράφων. Αν επιθυµείτε απλό διάστηµα πρέπει να κρατήσετε πατηµένο το πλήκτρο <Shift> και να πατήσετε <Enter>. Το <Shift -Enter> εισάγει µια αλλαγή γραµµής και όχι παράγραφο. Η διαµόρφωση του κειµένου γίνεται µε τα κουµπιά της γραµµής εργαλείων διαµόρφωσης και τις εντολές του µενού

9 Format. Στυλ Συνήθως χρησιµοποιείται το στυλ Normal. Ένα άλλο σύνηθες στυλ είναι το στυλ επικεφαλίδας που αντιστοιχεί στα tags της HTMLL <H1> µέχρι <H6>. Οι επικεφαλίδες έχουν πάντα έντονα γράµµατα και κενό χώρο πριν και µετά από αυτές. Για την επικεφαλίδα πρώτου επιπέδου <H1> χρησιµοποιείται γραµµατοσειρά µεγέθους περίπου 14-στιγµών, ενώ για αυτή του έκτου <H6> επιπέδου περίπου 14-στιγµών. Τύπος γραµµατοσειράς Το είδος της γραµµατοσειράς (Font Face) ορίζει το στυλ των χαρακτήρων. Στο µενού της γραµµής µορφοποίησης εµφανίζονται όλες οι γραµµατοσειρές (fonts) που είναι εγκατεστηµένες στον υπολογιστή σας. Και εδώ συνήθως χρησιµοποιείται το default font, πράγµα που σηµαίνει ότι η σελίδας σας θα εµφανίζεται µε τη στάνταρτ γραµµατοσειρά που έχει επιλέξει ο χρήστης κάθε browser. Αν επιλέξετε ένα ασυνήθιστο font που δεν είναι εγκατεστηµένο στον υπολογιστή του χρήστη, ο browser θα εµφανίσει το κείµενο µε τη στάνταρτ γραµµατοσειρά. Υπάρχουν δύο οικογένειες γραµµατοσειρών. Αυτές των οποίων οι χαρακτήρες έχουν ουρές (serif) και αυτές που δεν έχουν (sans serif). Οι γραµµατοσειρές sans serif που είναι εγκατεστηµένες στο σύνολο σχεδόν των υπολογιστών είναι οι Arial, Verdana, Comic Sans MS και Helvetica. Οι γραµµατοσειρά serif που είναι εγκατεστηµένη στο σύνολο σχεδόν των υπολογιστών είναι η Times New Roman. Οι γραµµατοσειρές sans serif είναι περισσότερο κατάλληλες για ανάγνωση κειµένου στην οθόνη του υπολογιστή και χρησιµοποιούνται περισσότερο στις ιστοσελίδες. Μέγεθος χαρακτήρων Και εδώ συνήθως χρησιµοποιείται ο µέγεθος Normal. Αποφύγετε να χρησιµοποιείτε µεγέθη χαρακτήρων µικρότερα από 10 στιγµές γιατί είναι δυσανάγνωστα σε οθόνες µε µεγάλη ανάλυση. Στυλ χαρακτήρων Χρησιµοποιούνται τα στυλ Bold, Italics και Underline. Η χρήση του τελευταίου στυλ απαιτεί ιδιαίτερη προσοχή γιατί όλες οι υπερσυνδέσεις µιας ιστοσελίδας εµφανίζονται αυτόµατα επίσης µε στυλ Underline. Άλλα στυλ, όπως εκθέτες (superscript) και δείκτες (subscript) µπορούν να ορισθούν επιλέγοντας τους χαρακτήρες που επιθυµείτε και επιλέγοντας το µενού Format > Font. Στοίχιση κειµένου Εξ ορισµού το κείµενο στις ιστοσελίδες στοιχίζεται αριστερά (left). Μπορείτε επίσης να επιλέξετε δεξιά στοίχιση (right) ή κεντραρισµένο κείµενο (center). Κουκίδες και αρίθµηση Επιλέγοντας µια σειρά παραγράφων και τα κουµπιά Bullets ή Numbering, οι παράγραφοι µορφοποιούνται και στοιχίζονται ανάλογα. Εσοχή κειµένου (More Indent/Less Indent) Τα κουµπιά (More Indent/Less Indent) αυξάνουν και µειώνουν αντίστοιχα την εσοχή του κειµένου τόσο δεξιά, όσο και αριστερά.

10 Χρώµα χαρακτήρων Μπορείτε να ορίστε ένα χρώµα για το κείµενο διαφορετικό από αυτό που έχει ορισθεί στις ρυθµίσεις του φόντου. Προς τούτο: Επιλέξτε το κείµενο που επιθυµείτε Επιλέξτε ένα χρώµα από το εργαλείο Font Color Μπορείτε να επιλέξετε ένα από τα βασικά χρώµατα ή να επιλέξετε More Colors για να δείτε µια παλέτα από τα 256 χρώµατα Web και να κάνετε κλικ σε ένα από αυτά. Κάντε κλικ στο ΟΚ. ώστε προσοχή στο συνδυασµό του χρώµατος του κειµένου µε αυτό του φόντου, ώστε να είναι δυνατή η εύκολη ανάγνωση της σελίδας. Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις είναι περιοχές της σελίδας σας (κείµενο ή γραφικά) στις οποίες ο χρήστης µπορεί να κάνει κλικ για να επισκεφθεί µια άλλη σελίδα. Υπάρχουν πέντε τύποι υπερσυνδέσεων: Η απόλυτη υπερσύνδεση (absolute link) οδηγεί σε µια σελίδα ενός άλλου Web site Η σχετική υπερσύνδεση (relative link) οδηγεί σε µια σελίδα του ίδιου Web site Η υπερσύνδεση mail (email link) ανοίγει το πρόγραµµα ηλεκτρονικού ταχυδροµείου για αποστολή µηνύµατος σε µια ηλεκτρονική διεύθυνση Η εσωτερική υπερσύνδεση ή υπερσύνδεση σελιδοδείκτη (bookmark or internal link) οδηγεί σε ένα σηµείο στην ίδια σελίδα όπου έχει τοποθετηθεί ένας σελιδοδείκτης. Η σχετική υπερσύνδεση σελιδοδείκτη (bookmarked relative link) οδηγεί σε ένα σηµείο σε άλλη σελίδα όπου έχει τοποθετηθεί ένας σελιδοδείκτης. Εισαγωγή hyperlink Επιλέξτε το κείµενο ή το γραφικό που θέλετε να ορίσετε ως υπερσύνδεση. Κάντε κλικ στο κουµπί Hyperlink, ή επιλέξτε το µενού Insert > Hyperlink. Για να ορίσετε µια απόλυτη υπερσύνδεση σε άλλο Web site επιλέξτε Existing File or Web Page και στο χώρο εισαγωγής της διεύθυνσης πληκτρολογήστε την διεύθυνση URL αυτού του site (π.χ. http://www.chem.auth.gr) Για να ορίσετε µια σχετική υπερσύνδεση στο ίδιο Web site επιλέξτε Existing File or Web Page, αναζητήστε το αρχείο html της ιστοσελίδας που θέλετε να συνδέστε και κάντε κλικ στο ΟΚ.

11 Για να ορίσετε µια υπερσύνδεση mail επιλέξτε E-mail Address, πληκτρολογήστε τη διεύθυνση E-mail, και αν θέλετε το αντικείµενο του µηνύµατος κάντε κλικ στο ΟΚ. ηµιουργία υπερσύνδεσης σε σελιδοδείκτη (Bookmark) Η υπερσύνδεση σε ένα σελιδοδείκτη επιτρέπει στο χρήστη της ιστοσελίδας να οδηγηθεί σε ένα συγκεκριµένο σηµείο της ίδια ή µιας άλλης ιστοσελίδας. Για να γίνει αυτό πρέπει το σηµείο αυτό να περιέχει ένα σελιδοδείκτη (bookmark). Συνεπώς. Πρέπει πρώτα να δηµιουργηθεί ένα bookmark και στη συνέχεια η υπερσύνδεση σε αυτό. ηµιουργία Bookmark Εισάγετε το δείκτη εισαγωγής κειµένου στο σηµείο ακριβώς που επιθυµείτε να εισάγετε το bookmark. Επιλέξτε το µενού Insert > Bookmark. Πληκτρολογήστε ένα όνοµα για το bookmark. Κάντε κλικ στο ΟΚ. ηµιουργία Hyperlink σε ένα Bookmark Επιλέξτε το κείµενο ή το γραφικό που θέλετε να ορίσετε ως υπερσύνδεση. Κάντε κλικ στο κουµπί Hyperlink Insert > Hyperlink., ή επιλέξτε το µενού Για να δηµιουργήσετε µια υπερσύνδεση σε ένα bookmark στην ίδια σελίδα, στο πλαίσιο διαλόγου Create Hyperlink επιλέξτε Place in This Document, επιλέξτε το όνοµα του bookmark και κάντε κλικ στο OK. Για να δηµιουργήσετε µια υπερσύνδεση σε ένα bookmark σε άλλη σελίδα, το πλαίσιο διαλόγου Create Hyperlink επιλέξτε το αρχείο που επιθυµείτε, επιλέξτε Place in This Document, επιλέξτε το όνοµα του bookmark και κάντε κλικ στο OK.

12 Επεξεργασία υπερσύνδεσης Κάντε κλικ οπουδήποτε µέσα στο κείµενο ή το αντικείµενο που έχετε ορίσει ως υπερσύνδεση. Κάντε κλικ στο κουµπί Hyperlink, ή επιλέξτε το µενού Insert > Hyperlink. ιορθώστε τη διεύθυνση URL, τη διεύθυνση Ε-mail ή το σελιδοδείκτη (bookmark) ανάλογα µε το είδος της υπερσύνδεσης. Κάντε κλικ στο ΟΚ. ιαγραφή υπερσύνδεσης Κάντε κλικ οπουδήποτε µέσα στο κείµενο ή το αντικείµενο που έχετε ορίσει ως υπερσύνδεση. Κάντε κλικ στο κουµπί Hyperlink, ή επιλέξτε το µενού Insert > Hyperlink. Κάντε κλικ στο Remove Link. Εισαγωγή και µορφοποίηση εικόνων Οι εικόνες και τα γραφικά, όπως και όλα τα άλλα αντικείµενα που περιέχει µια ιστοσελίδα, δεν εµπεριέχονται στο αρχείο της ιστοσελίδας, όπως συνήθως γίνεται σε ένα αρχείο επεξεργασίας κειµένου. Κάθε εικόνα αποθηκεύεται ως αρχείο γραφικών στο φάκελο images µέσα στο φάκελο του web site. Στην ιστοσελίδα εισάγεται µόνο µια αναφορά προς το αρχείο γραφικών µε τη χρήση του tag <IMG>. Όταν ο web server στέλνει το αρχείο της ιστοσελίδας (.html) στον υπολογιστή του χρήστη στέλνει και τα αρχεία γραφικών που έχουν αναφορές µέσα στην ιστοσελίδα. Με τη σειρά του o browser αναλαµβάνει να εµφανίσει τα γραφικά στις θέσεις που πρέπει µε βάση τις οδηγίες που περιέχονται στο tag <IMG>. Τύποι αρχείων γραφικών Τα αρχεία γραφικών που χρησιµοποιούνται στο Web είναι τριών βασικά τύπων: gif, jpg, ή png. Και οι τρεις τύποι διαθέτουν δυνατότητες συµπίεσης, ώστε το µέγεθος των αρχείων να είναι σχετικά µικρό.

13 Εισαγωγή Clip Art Επιλέξτε το µενού Insert > Picture > Clip Art. Στο πλαίσιο διαλόγου Clip Art αναζητήστε την εικόνα που επιθυµείτε Κάντε κλικ στην εικόνα Μετατροπή Clip Art Τα αρχεία της συλλογής clip art του MS Office είναι αρχεία τύπου bmp ή wmf. Έτσι, παρόλο που το FrontPage µπορεί να τα διαβάσει και να τα εισάγει σε µια σελίδα, τα αρχεία αυτά πρέπει να µετατραπούν σε αρχεία τύπου gif, jpg, ή png για να µπορούν να χρησιµοποιηθούν στο Web. Προς τούτο: Με δεξί κλικ σε µια εικόνα clip art επιλέξτε Picture Properties Επιλέξτε τύπο γραφικού gif, jpg, ή png Κάντε κλικ το ΟΚ Αν δεν µετατρέψετε τις εικόνες clip art, την επόµενη φορά που θα ζητήσετε αποθήκευση της σελίδας, το FrontPage θα σας ζητήσει οδηγίες για τη µετατροπή και αποθήκευση αυτών των γραφικών. Εισαγωγή άλλων γραφικών Υπενθυµίζεται ότι όλα τα αρχεία γραφικών που χρησιµοποιούνται στις ιστοσελίδες ενός Web site καλόν είναι να είναι αποθηκευµένες στο φάκελο images µέσα στο φάκελο του Web site. Έτσι, αφού έχετε αποθηκεύσει το αρχείο που θέλετε να εισάγετε, Κάντε κλικ στο κουµπί Αναζητήστε και επιλέξτε το αρχείο Κάντε κλικ στο ΟΚ., ή επιλέξτε το µενού Insert > Picture. Ορισµός µεγέθους και θέσης γραφικών Παρόλο που είναι δυνατό να αλλάξουµε το µέγεθος ενός γραφικού αφού το εισάγουµε σύροντας τα οκτώ σηµεία χειρισµού που περιβάλλον κάθε γραφικό, µια τέτοια πρακτική αυτή δεν είναι σωστή κατά την ανάπτυξη ιστοσελίδων. Κατ αρχήν πρέπει να καταστεί σαφές ότι το µέγεθος του αρχείου παραµένει το ίδιο ανεξάρτητα από το µέγεθος της εικόνας στην ιστοσελίδα. Έτσι, αν µικρύνουµε το γραφικό στη σελίδα, θα µεταφέρουµε τον ίδιο όγκο πληροφορίας µε αυτόν που θα µεταφέραµε αν το γραφικό είχε το αρχικό µέγεθος.

14 Είναι προτιµότερο λοιπόν να αλλάξουµε τις διαστάσεις του γραφικού σε ένα πρόγραµµα επεξεργασίας γραφικών και στην συνέχεια να το εισάγουµε στη σελίδα µας, εξασφαλίζοντας έτσι και µικρότερη διακίνηση πληροφορίας και συνεπώς µεγαλύτερη ταχύτητα µεταφοράς. Τέλος, αν µεγαλώσουµε την εικόνα είναι σαφές ότι αλλοιώνεται η ποιότητά της. Για να µεταφέρετε µια εικόνα σε µια άλλη θέση στη σελίδα απλά σύρατέ την στη νέα της θέση. Προσέξτε να επιλέγετε την εικόνα από το κέντρο της και όχι από τα οκτώ σηµεία χειρισµού που την περιβάλλον για να αποφύγετε την αλλαγή µεγέθους η την παραµόρφωσή της. Η στοίχιση µια εικόνας στη σελίδα γίνεται, όπως αυτή του κειµένου, µε επιλογή της και χρήση των κουµπιών στοίχισης στη γραµµή εργασιών µορφοποίησης. Μια ιδιαίτερη εφαρµογή της στοίχισης της εικόνας είναι όταν η εικόνα δεν καταλαµβάνει µια παράγραφο αλλά βρίσκεται δίπλα σε κείµενο. Σ αυτήν τη περίπτωση η επιλογή Normal σηµαίνει ότι αν το κείµενο αναδιπλώνεται, η δεύτερη γραµµή κειµένου θα τοποθετηθεί κάτω από την εικόνα, όπως φαίνεται παραπλεύρως. Αν επιλέγει δεξιά στοίχιση της εικόνας το κείµενο αναδιπλώνεται στο σύνολό του αριστερά του γραφικού, ενώ αν επιλέγει αριστερή στοίχιση της εικόνας το κείµενο αναδιπλώνεται στο σύνολό του δεξιά του γραφικού, όπως φαίνεται παρακάτω. Χαρακτηριστική εικόνα των αυστριακών Άλπεων. Κανονική στοίχιση (Normal) Χαρακτηριστική εικόνα των αυστριακών Άλπεων. Χαρακτηριστική εικόνα των αυστριακών Άλπεων. εξιά στοίχιση (εικόνα στα δεξιά) Αριστερή στοίχιση (εικόνα στα αριστερά) Για να επιλέξετε τη στοίχιση της εικόνας Με δεξί κλικ στην εικόνα επιλέξτε Picture Properties Επιλέξτε Appearance Επιλέξτε το σχήµα αναδίπλωσης (Wrap) που επιθυµείτε (None, Left, Right) Για να ορίσετε το µέγεθος του περιθωρίου και κενού χώρου γύρω από την εικόνα Με δεξί κλικ στην εικόνα επιλέξτε Picture Properties Επιλέξτε Appearance Επιλέξτε το Border thickness, Horizontal και Vertical spacing.

15 ηµιουργία και µορφοποίηση λιστών µε κουκίδες ή αρίθµηση Οι κουκίδες και η αρίθµηση των παραγράφων χρησιµοποιείται συχνά στο Web, καθόσον αποτελεί έναν αποτελεσµατικό τρόπο για να οργανωθεί το υλικό µιας σελίδας και να είναι ευανάγνωστο.για να εισάγετε κουκίδες ή αρίθµηση, Τοποθετήστε το δείκτη εισαγωγής σε µια παράγραφο ή επιλέξτε περισσότερες από µια παραγράφους Κάντε κλικ στα κουµπιά,. Όταν πληκτρολογήσετε ENTER στο τέλος µιας παραγράφου µε κουκίδες ή αρίθµηση η νέα παράγραφος που θα δηµιουργηθεί θα έχει κουκίδα ή τον επόµενο αριθµό της µέχρι τώρα αρίθµησης. Για να αυξήσετε την εσοχή των παραγράφων µε κουκίδες και αρίθµηση επιλέξτε τα κουµπιά. Για να χρησιµοποιήσετε γραφικές κουκίδες να αλλάξετε το στυλ των κουκίδων ή της αρίθµησης Τοποθετήστε το δείκτη εισαγωγής σε µια παράγραφο ή επιλέξτε περισσότερες από µια παραγράφους Επιλέξτε το µενου Format > Bullets and Numbering. Κάντε τις απαραίτητες ρυθµίσεις. ηµιουργία και µορφοποίηση πινάκων Οι πίνακες είναι ένα χρήσιµο στοιχείο για την οργάνωση της πληροφορίας σε µια ιστοσελίδα. Πολλές φορές χρησιµοποιούνται πίνακες µε αόρατα περιθώρια για τη δηµιουργία κειµένου δύο ή περισσοτέρων στηλών. Τέλος. Πολλοί δηµιουργοί ιστοσελίδων τοποθετούν όλο το υλικό µιας ιστοσελίδας µέσα σε πίνακες ώστε να έχουν απόλυτη έλεγχο στην εµφάνιση του κειµένου, καθόσον για παράδειγµα ένα κείµενο που είναι µέσα σε ένα κελί πίνακα ορισµένου πλάτους σε pixels, θα έχει πάντα αυτό το πλάτος ανεξάρτητα να ο χρήστης αλλάζει το πλάτος του παραθύρου του browser. H εισαγωγή και διαµόρφωση πινάκων είναι µια εύκολη εργασία στο FrontPage. Παρόλα αυτά, κατά τη δηµιουργία σύνθετων πινάκων και κυρίως τη δηµιουργία πινάκων µέσα σε κελιά άλλων πινάκων, µπορεί να απαιτηθεί η διόρθωση αυτού καθ αυτού του κώδικα HTML και συνεπώς η γνώση των σχετικών tags.

16 ηµιουργία πίνακα Για να εισάγετε ένα πίνακα Κάντε κλικ στο εργαλείο Table,. Σύρατε µέσα στο µενού Table Size για να επιλέξετε το πλήθος των σειρών και των στηλών που επιθυµείτε. Αφήστε το κουµπί του ποντικιού και θα δηµιουργηθεί ένα πίνακας µε αυτές τις διαστάσεις. Οι πίνακες εµφανίζονται στην προβολή σελίδας του FrontPage µε στικτές γραµµές που ορίζουν σειρές, στήλες και κελιά. Εργασία µε πίνακες Για να διαµορφώσετε οποιοδήποτε στοιχείο ενός πίνακα πρέπει ο δείκτης εισαγωγής να είναι µέσα σε αυτό ώστε τα στοιχεία του µενού Table να είναι ενεργά. Για να αλλάξετε πλάτος στηλών ή ύψος σειρών Σύρατε το ποντίκι αργά κοντά στις κατακόρυφες ή οριζόντιες γραµµές αντίστοιχα, που ορίζουν τον πίνακα. Μόλις ο δείκτης αλλάξει σε δύο κατακόρυφες ή οριζόντιες γραµµές αντίστοιχα πιέστε το κουµπί του ποντικιού για να αλλάξετε πλάτος ή ύψος αντίστοιχα. Για να εισάγετε κείµενο σε ένα κελί, κάντε κλικ µέσα στο κελί και πληκτρολογήστε. Για να µετακινηθείτε από κελί σε κελί, πιέστε το πλήκτρο <TAB> ή κάντε κλικ µέσα στο κελί. Για να προσθέστε µια επιπλέον σειρά, τοποθετήστε το δείκτη στο τελευταίο κάτω δεξιά κελί του πίνακα και πιέστε το πλήκτρο <TAB>. Για να προσθέστε επιπλέον σειρές η στήλες σε ένα πίνακα Τοποθετήστε το δείκτη στην τελευταία σειρά ή στήλη αντίστοιχα Επιλέξτε το µενού Table > Insert > Rows ή Column Στο πλαίσιο διαλόγου επιλέξτε Rows ή Columns και το πλήθος σειρών ή στηλών που θέλετε να εισαχθούν. Επιλέξτε αν οι νέες σειρές θα εισαχθούν πάνω ή κάτω από τη σειρά στην οποία βρίσκεστε, ή αν οι νέες στήλες θα εισαχθούν αριστερά ή δεξιά από τη στήλη στην οποία βρίσκεστε. Κάντε κλικ στο ΟΚ. Για να επιλέξετε ένα στοιχείο του πίνακα, τοποθετήστε το δείκτη στο κατάλληλο σηµείο και επιλέξτε το µενού Table > Select > Table/Column/Row/Cell. Για να διαγράψετε ένα στοιχείο του πίνακα,επιλέξτε το στοιχείο όπως προηγουµένως και επιλέξτε το µενού Table > Delete Cells. Για να συγχωνεύσετε κελιά, επιλέξτε τα κελιά όπως προηγουµένως και πιλέξτε το µενού Table > Merge Cells. Για να διαιρέστε κελιά, Επιλέξτε τα κελιά όπως προηγουµένως Επιλέξτε το µενού Table > Split Cells. Στο πλαίσιο διαλόγου επιλέξτε αν τα κουµπιά θα διαιρεθούν σε στήλες ή σειρές Επιλέξτε τον αριθµό των στηλών ή σειρών Κάνττε κλικ στο ΟΚ.

17 Η γραµµή εργασιών πίνακα (Table Toolbar) που αναλύεται παρακάτω παρέχει πρόσβαση στις περισσότερες εργασίες που µπορείτε εκτελέστε από το µενού Table. Αν η γραµµή δεν είναι ορατή επιλέξτε το µενού View >Toolbars > Table. Ορισµός ιδιοτήτων πίνακα και κελιών Μια σειρά από ιδιότητες ενός πίνακα όπως το φόντο, τα πλαίσια, διάφορες αποστάσεις µεταξύ των στοιχείων του και στοίχισής του στη σελίδα κ.α. µπορούν να ρυθµισθούν από το πλαίσιο διαλόγου Τable Properties, που εµφανίζεται αν είµαστε µέσα στον πίνακα και επιλέξουµε το µενού Table > Table properties. Οι σηµαντικότερες από τις ρυθµίσεις είναι οι παρακάτω: Στοίχιση (Alligmnet): Ορίζει τη στοίχιση του πίνακα µέσα στη σελίδα. Πλάτος (Width): Ορίζει το πλάτος του πίνακα. Το πλάτος µπορεί να οριστεί απόλυτα σε pixels (In pixels) ή σχετικά σε % του πλάτους της σελίδας (In percent). Στη δεύτερη περίπτωση όταν ο χρήστης αλλάζει το µέγεθος του παραθύρου του browser, ο πίνακας αλλάζει πλάτος για να διατηρηθεί η αναλογία ενώ στην πρώτη όχι. Σηµειώστε ότι όταν αλλάζετε το πλάτος του πίνακα σύροντας τα όριά του τα πλάτη µετατρέπονται σε pixels. Ύψος (Height): Ορίζει το ύψος του πίνακα. Συνήθως δεν καθορίζεται αφού να το περιεχόµενο του πίνακα είναι µικρότερο θα υπάρχει κενός χώρος στο τέλος του.. Περιθώριο κελιών (Cell padding): Ορίζει το πλάτος του περιθωρίου µεταξύ του άκρου των κελιών και του κειµένου. Απόσταση κελιών (Cell spacing): Ορίζει την απόσταση µεταξύ των άκρων διαδοχικών κελιών Μέγεθος και χρώµα περιγραµµάτων (Borders size and color): Ορίζουν το πάχος, το χρώµα και το στυλ των περιγραµµάτων. Φόντο (Background): Ορίζουν το χρώµα του φόντου του πίνακα. Μπορείτε επίσης να ορίσετε µια εικόνα ως φόντο του πίνακα. Τέλος, µπορείτε να µορφοποιήσετε ιδιαίτερα ένα ή περισσότερα κελιά του πίνακα. Προς τούτο: Επιλέξτε το ή τα κελιά Επιλέξτε το µενού Table > Cell Properties. Καθορίστε ρυθµίσεις ανάλογες µε τις παραπάνω που θα εφαρµοσθούν µόνο στα κελιά που έχετε επιλέξει. Μια σηµαντική και χρήσιµη ρύθµιση των κελιών είναι η κατακόρυφη στοίχιση του περιεχοµένου µέσα στο κελί (Top, Center ή Bottom).

18 Προσθήκη οριζοντίων γραµµών Σε µια σελίδα Web µπορούµε να χρησιµοποιήσουµε γραµµές για να διαχωρίσουµε τµήµατα κειµένου ή γραφικά. Για να εισάγετε µια οριζόντια γραµµή Τοποθετήστε το δείκτη εισαγωγής στην κατάλληλη θέση Επιλέξτε το µενού Insert > Horizontal Line. Για να διαµορφώσετε το στυλ της γραµµής Με δεξί κλικ στη γραµµή επιλέξτε Horizontal Line Properties. Ορίστε το πάχος, το πλάτος, το χρώµα και τη σκίαση (shading) της γραµµής Το πλάτος της γραµµής µπορεί να οριστεί απόλυτα σε pixels ή σχετικά % του πλάτους της σελίδας. Μετατροπή υπαρχόντων αρχείων άλλων τύπων σε ιστοσελίδες Αν έχετε ένα αρχείο κειµένου που δηµιουργήθηκε µε ένα πρόγραµµα επεξεργασίας κειµένου µπορείτε εύκολα να το µετατρέψετε σε αρχείο HTML. Προς τούτο: Επιλέξτε το µενού Insert > File Αναζητήστε και ανοίξτε το αρχείο που επιθυµείτε και το αρχείο µετατρέπεται εµφανίζεται στο παράθυρο Κάντε τις αλλαγές στη µορφοποίησή του Αποθηκεύστε το αρχείο Αν αντιµετωπίστε προβλήµατα µε τη µετατροπή, αποθηκεύστε κατ αρχήν το αρχείο σε µορφή RTF µε το πρόγραµµα επεξεργασίας κειµένου και στη συνέχεια µετατρέψτε το αρχείο RTF µε το FrontPage. Μερικές συµβουλές για τη σχεδίαση ιστοσελίδων Εικόνες φόντου: Χρησιµοποιήστε τις µε εγκράτεια και προσοχή. Εικπονες µε απαλά χρώµατα είναι γενικά αποδεκτές, αλλά πολύπλοκες εικόνες µε έντονα χρώµατα µειώνουν την ευκρίνεια και την αναγνωσιµότητα µιας ιστοσελίδας. Προτιµήστε σαν φόντο ένα απαλό χρώµα. Γραµµατοσειρές: Χρησιµοποιείτε τις κοινές γραµµατοσειρές (Arial και Times New Roman). Αν ο χρήστης δεν έχει εγκατεστηµένο στον υπολογιστή του την γραµµατοσειρά που έχετε επιλέξει ο browser θα χρησιµοποιήσει την στάνταρτ γραµµατοσειρά. Μέγεθος ιστοσελίδας: Αποφεύγετε τις µεγάλες ιστοσελίδες. Φροντίστε η ιστοσελίδα σας να µπορεί να εµφανιστεί σε µια ή το πολύ δύο σελίδες του browser. Κατατµήστε τις πληροφορίες σε περισσότερες µικρές ιστοσελίδες. Ήχος: Αποφύγετε τη χρησιµοποίηση ήχου. Οι ήχοι είναι σχετικά µεγάλα αρχεία και καθυστερούν την εµφάνιση της ιστοσελίδας στον browser. Γραφικά: Αποφύγετε τη χρησιµοποίηση αρχείων γραφικών µεγάλου µεγέθους. Καθυστερούν την εµφάνιση της ιστοσελίδας στον browser. Μετατρέψτε και συµπιέστε τα γραφικά σας πριν τα χρησιµοποιήστε. Υπερσυνδέσεις: Αποφεύγετε το απλό «Κάντε κλικ εδώ!» για να δηλώσετε την ύπαρξη µιας υπερσύνδεσης. Χρησιµοποιείτε καλύτερα περιγραφικές προτάσεις. Για παράδειγµα: Λάθος Αυτό το site περιέχει πληροφορίες για τη θεωρία και την τεχνική της απόσταξης. Για να δείτε τις πληροφορίες κάντε κλικ εδώ. Σωστό - Αυτό το site περιέχει πληροφορίες για τη θεωρία και την τεχνική της απόσταξης. Μέγεθος ιστοσελίδας: Παρόλο που οι περισσότεροι χρήστες του Internet χρησιµοποιούν ανάλυση οθόνης 1024Χ768 ή µεγαλύτερη, υπάρχουν ακόµη χρήστες µε οθόνες ανάλυσης 800X600 Σχεδιάστε τις ιστοσελίδες σας το περιεχόµενο των οποίων είναι ορατό στη µικρή ανάλυση των 800X600. Έτσι, µην εισάγετε γραφικά ή δηµιουργείτε πίνακες µε πλάτος µεγαλύτερο από 770-780 pixels. Μ. Π. Σιγάλας, 2005 sigalas@chem.auth.gr