ΜΕΡΟΣ ΔΕΥΤΕΡΟ MS FRONTPAGE 2003. Γιάννης Καζανίδης Τεχνολόγος Μηχανολόγος Μηχανικός MSc Πληροφορικής

ΜΕΡΟΣ ΔΕΥΤΕΡΟ MS FRONTPAGE 2003 Γιάννης Καζανίδης Τεχνολόγος Μηχανολόγος Μηχανικός MSc Πληροφορικής

ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ ΜΕΡΟΣ ΔΕΥΤΕΡΟ...2 MS FRONTPAGE 2003...2 1 ΙΣΤΟΣΕΛΙΔΕΣ...5 1.1 Έννοια και δομή της ιστοσελίδας... 5 1.2 Περιεχόμενα και στοιχεία ιστοσελίδας... 5 1.3 Σύνδεσμοι... 7 1.4 Μέσα για την δημιουργία ιστοσελίδων... 7 1.4.1 Η Γλώσσα HTML... 7 1.4.2 Η Γλώσσα JAVA... 8 1.5 Σχεδιασμός και οργάνωση ιστοσελίδων... 9 1.6 Χρήσιμες συμβουλές για τη δημιουργία ιστοσελίδων... 11 1.6.1 Χρώμα - Εικόνες - Ήχος - Βίντεο - Animation... 13 ΚΕΦΑΛΑΙΟ ΔΕΥΤΕΡΟ... 15 2 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML...15 2.1 Γενικά... 15 2.2 Ετικέτες (Tags)... 15 2.3 Δομή μίας σελίδας HTML... 16 2.3.1 Τίτλος... 18 2.3.2 Επικεφαλίδες... 19 2.3.3 Παράγραφοι...21 2.4 Οι Ετικέτες αναλυτικά... 24 ΚΕΦΑΛΑΙΟ ΤΡΙΤΟ... 33 3 ΕΙΣΑΓΩΓΗ ΣΤΟ FRONTPAGE...33 3.1 Γενικά... 33 3.2 Προβολές του FrontPage... 36 3.2.1 Προβολή Σελίδας (Page View)... 37 3.2.2 Προβολή Καταλόγων (Folders View)... 38 3.2.3 Προβολή Πλοήγησης (Navigation View)... 39 3.2.4 Προβολή υπερσυνδέσμων (Hyperlinks View)... 40 3.2.5 Προβολή διεργασιών (Tasks View)... 41 3.3 Εργασίες στην Προβολή Πλοήγησης... 41 3.3.1 Επεξεργασία του τίτλου μιας σελίδας... 43 3.3.2 Εισαγωγή νέας σελίδας... 43 3.3.3 Μετακίνηση μιας σελίδας στο Site... 43 3.3.4 Διαγραφή μιας σελίδας... 44 3.3.5 Ιδιότητες και εισαγωγή διεργασίας σε σελίδες... 44 3.3.6 Επεξεργασία περιεχομένου σελίδας... 45 3.3.7 Άλλες εργασίες στον Front Page Explorer... 45 3.4 Ο Επεξεργαστής σελίδων του FrontPage... 46 3.4.1 Βασικές εργασίες στον Editor... 47 3.5 Εισαγωγή κειμένου... 48 3.5.1 Μορφοποίηση κειμένου... 48 3.5.2 Μορφές από Λίστες... 50 3.5.3 Μορφές Μετάβασης σε Σελίδα... 51 3.6 Εισαγωγή εικόνων... 52 3.6.1 Γραμμή εργαλείων Pictures... 54 3.6.2 Δημιουργία Image Map... 54 3.6.3 Μορφή Φόντου της Σελίδας... 55 3.7 Εισαγωγή Υπερσυνδέσμων... 56 3.7.1 Δημιουργία συνδέσμου προς μια σελίδα... 56 3.7.2 Δημιουργία συνδέσμου με χρήση σελιδοδεικτών... 58 3.8 Πίνακες... 60 3.8.1 Δημιουργία ενός πίνακα... 60 3.8.2 Προσθήκη γραμμών και στηλών... 62 3.8.3 Διαγραφή γραμμών και στηλών... 63 3.8.4 Χρήσιμες εργασίες της γραμμής εργαλείων (Table toolbar) και του μενού (Table)... 63 3.9 Εισαγωγή Web Component... 66

3.9.1 Interactive Button... 66 3.9.2 Marquees... 67 3.9.3 Hit Counter... 69 ΚΕΦΑΛΑΙΟ ΤΕΤΑΡΤΟ... 70 4 ΑΣΚΗΣΕΙΣ...70 Άσκηση 1... 70 Άσκηση 2... 71 Άσκηση 3... 72 Άσκηση 4... 74 Άσκηση 5... 75 Άσκηση 6... 78 Άσκηση 7... 79 Άσκηση 8... 81

ΚΕΦΑΛΑΙΟ ΠΡΩΤΟ 1 ΙΣΤΟΣΕΛΙΔΕΣ 1.1 Έννοια και δομή της ιστοσελίδας Ο παγκόσμιος ιστός πήρε την ονομασία του από τον τρόπο σύνδεσης μεταξύ των εξυπηρετητών του. Στο Διαδίκτυο βρίσκονται συνδεδεμένα τα πάντα, δηλαδή οποιοσδήποτε υπολογιστής μπορεί να προσπελαστεί από οποιονδήποτε άλλον είναι συνδεδεμένος στο δίκτυο και μπορεί να ανακτηθεί οποιαδήποτε πληροφορία υπάρχει σ αυτόν. Οι σελίδες που βρίσκονται στον παγκόσμιο ιστό δημιουργούνται στην πλειοψηφία τους με τη χρήση μιας ειδικής γλώσσας μορφοποίησης γνωστής ως HTML (Hyper Text Markup Language). H γλώσσα αυτή είναι απλή στην εκμάθηση των βασικών της στοιχείων και επιτρέπει την ενσωμάτωση στο κείμενο συνδέσμων, γραφικών στοιχείων, πολυμέσων όπως κινούμενων εικόνων, video ή ήχου, καθώς και τη μορφοποίηση του κειμένου (μέγεθος και είδος γραμμάτων, στοίχιση παραγράφων κλπ) ώστε το αποτέλεσμα που προκύπτει να είναι οπτικά, λειτουργικό και ευχάριστο. 1.2 Περιεχόμενα και στοιχεία ιστοσελίδας Μία σελίδα στον ιστό περιέχει επικεφαλίδες, λίστες με κουκίδες και κείμενο, αλλά και τη δυνατότητα να καλεί άλλα μεγαλύτερα αρχεία, όπως εικόνες, γραφήματα, ήχο και βίντεο. Κάθε σελίδα του ιστού παρουσιάζει ένα προϊόν ή μία υπηρεσία και μπορεί να έχει τα παρακάτω στοιχεία: Εναν τίτλο Μία κύρια επικεφαλίδα Ενα κύριο γραφικό Βασικό κείμενο Συνδέσεις με άλλες σελίδες της τοποθεσίας

Συνδέσεις με άλλες τοποθεσίες Δυνατότητα αποστολής ηλεκτρονικού ταχυδρομείου από τους επισκέπτες της σελίδας Επιπρόσθετα στοιχεία όπως γραφικά φόντου, εικόνες, κουμπιά, κινούμενες εικόνες, βίντεο και ήχο. Μετρητή επισκέψεων, βιβλίο επισκεπτών και κυλιόμενα μηνύματα στο κάτω μέρος της σελίδας Φόρμες και γραφήματα που εμφανίζουν ενημερωμένα δεδομένα και πίνακες και διευκολύνουν οικονομικές συναλλαγές. Δυνατότητα πολυμέσων όπως προγράμματα ήχου και κίνησης. Εικόνα 1.1 Σελίδα υπερκειμένου

1.3 Σύνδεσμοι Κάθε σελίδα που εμφανίζεται στην οθόνη του υπολογιστή μπορεί να προσπελαστεί από άλλες σελίδες που βρίσκονται στον ίδιο ή σε διαφορετικό εξυπηρετητή με αυτόν που φιλοξενεί την αρχική σελίδα. Αυτό συμβαίνει, επειδή οι σελίδες που μεταφέρονται στον υπολογιστή μας δεν αποτελούν απλά κείμενο αλλά υπερκείμενο (hypertext). Σε αυτές τις σελίδες κάποιες λέξεις, προτάσεις ή ακόμα και εικόνες που αποτελούν συνδέσμους, οι οποίοι όταν επιλεγούν (κάνοντας κλικ επάνω τους με το ποντίκι), έχουν ως αποτέλεσμα την παραπομπή σε κάποια άλλη σελίδα μέσα στον παγκόσμιο ιστό. Για να καταλάβει ο χρήστης του ιστού αν κάποιο στοιχείο της σελίδας του αποτελεί σύνδεσμο ή όχι, αρκεί να μετακινήσει τον δείκτη του ποντικιού του πάνω σ αυτό και αν αυτός αλλάξει από βέλος σε χεράκι, τότε αυτό αποτελεί σύνδεσμο και κάνοντας κλικ πάνω του μπορεί να μεταφερθεί σε άλλη σελίδα. Κάποιος σύνδεσμος μπορεί να μην οδηγεί σε άλλη τοποθεσία ή σε άλλη σελίδα της ίδιας τοποθεσίας αλλά σε κάποιο αρχείο (εικόνα, έγγραφο, ήχο, εκτελέσιμο πρόγραμμα) που προσφέρεται από τον κατασκευαστή της σελίδας. 1.4 Μέσα για την δημιουργία ιστοσελίδων Οι γλώσσες που χρησιμοποιούνται για τη δημιουργία ιστοσελίδων είναι η HTML και, πιο πρόσφατα, η Java και η JavaScript. Οι δύο τελευταίες στην πραγματικότητα εμπλουτίζουν τις ιστοσελίδες. Η επικράτηση της χρήσης της HTML από τους χρήστες, οφείλεται στο γεγονός ότι είναι ιδιαίτερα απλή γλώσσα. Σήμερα υπάρχουν ειδικά πακέτα εφαρμογών που επιτρέπουν στους απλούς χρήστες να δημιουργούν ιστοσελίδες σε HTML, χωρίς την εκμάθηση του κώδικά της. Τα γνωστότερα είναι τα παρακάτω: HTML Assistant Pro, Hot Dog, Web Edit, Hot Metal Pro, GNNpress, Microsoft FrontPage. 1.4.1 Η Γλώσσα HTML Η γλώσσα HTML πήρε το όνομά της από τα αρχικά των λέξεων Hyper Text Markup Language (Γλώσσα Χαρακτηρισμού Υπερκειμένου). Bασίζεται στην SGML (Standard Generalization Markup Language), που είναι ένα μεγαλύτερο σύστημα επεξεργασίας εγγράφων. Η HTML είναι μια γλώσσα χαρακτηρισμού που δίνει στους φυλλομετρητές τη δυνατότητα της ανάγνωσης. Πρόκειται για γλώσσα περιγραφής της δομής ενός εγγράφου

και όχι της πραγματικής του παρουσίασης. Είναι με λίγα λόγια, μέθοδος κωδικοποίησης των δεδομένων για μια κατάλληλη παρουσίασή τους στο WWW. Την παρουσίαση αυτή την αναλαμβάνουν οι φυλλομετρητές οι οποίοι βασίζονται στη περιγραφόμενη από την HTML δομή. Για τη δημιουργία ιστοσελίδων με HTML χρησιμοποιούνται απλοί εκδότες (editors) κειμένου, επεξεργαστές κειμένου, ειδικοί εκδότες HTML, οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML και ενσωματωμένοι εκδότες των φυλλομετρητών. 'Ενα έγγραφο γραμμένο στην γλώσσα HTML είναι ένα απλό ASCII κείμενο. Ο χρήστης που γνωρίζει τη γλώσσα χρησιμοποιεί εκδότες κειμένου ή εκδότες HTML. Διαφορετικά χρησιμοποιεί τον ενσωματωμένο εκδότη του φυλλομετρητή. Η δεύτερη επιλογή έχει δύο πλεονεκτήματα για το χρήστη. Αφενός δεν χρειάζεται να γνωρίζει τη γλώσσα HTML, γιατί ο κώδικας παράγεται αυτόματα την ώρα που σχεδιάζεται η ιστοσελίδα και αφετέρου μπορεί να "τρέξει" τη σελίδα στον ίδιο το φυλλομετρητή για να δει το αποτέλεσμα. Στην περίπτωση λοιπόν που κάποιος έχει την ικανότητα και τις γνώσεις στην γλώσσα HTML, μπορεί να κατασκευάσει με έναν απλό κειμενογράφο όμορφες σελίδες για το web. Η γλώσσα HTML παρουσιάζεται αναλυτικότερα σε επόμενο κεφάλαιο. 1.4.2 Η Γλώσσα JAVA H Java είναι μια αντικειμενοστραφής γλώσσα προγραμματισμού, που απελευθερώνει τους σχεδιαστές ιστοσελίδων από το να δημιουργούν περίπλοκες σελίδες. Λειτουργεί σε περιβάλλον δικτύου και προσφέρει στις ιστοσελίδες δυνατότητες πραγματικής αλληλεπίδρασης με τους χρήστες. Mε την Java μπορούμε να δημιουργήσουμε προγράμματα σύροντας αντικείμενα στην οθόνη αντί να γράφουμε περίπλοκο πρόγραμμα με το χέρι. Μοιάζει με την γλώσσα προγραμματισμού C++, και επιτρέπει στους προγραμματιστές να δημιουργούν μικρά αυτόνομα προγράμματα που μπορούν να εισαχθούν σε μια σελίδα του ιστού. Επίσης μπορούν να δημιουργηθούν φόρμες ή εισαγωγή στοιχείων σε βάσεις δεδομένων, χωρίς να απαιτεί από τον σχεδιαστή της φόρμας τη γνώση προγραμματισμού. Είναι συμβατή από όλους τους σύγχρονους φυλλομετρητές που μπορούν να χρησιμοποιούν μικρά προγράμματα Java (applets) σε οποιασδήποτε σελίδα σχεδιάστηκε με την HTML. Εκτός από τις γλώσσες HTML και JAVA υπάρχουν και άλλα μέσα για την δημιουργία ιστοσελίδων όπως τα προγράμματα Frontpage και FrontPage Express της Microsoft

Τα προγράμματα FrontPage και FrontPage Express πρόκειται για προγράμματα επεξεργασίας σελίδων HTML με οπτικό τρόπο. Μάλιστα το FrontPage Express είναι ενσωματωμένο στον Internet Explorer. Χρησιμοποιώντας αυτά τα προγράμματα μπορούμε με τον ίδιο τρόπο που γράφουμε ένα κείμενο και το μορφοποιούμε με κάποιον επεξεργαστή κειμένου μπορούμε να αλλάξουμε τη στοίχιση, τα χρώματα και να προσθέσουμε εικόνες, φόρμες και άλλα στοιχεία. Η δυνατότητα των φυλλομετρητών να λειτουργούν και εκτός σύνδεσης (off-line) με το δίκτυο, είναι πολύ χρήσιμη κατά τη διάρκεια της δημιουργίας και των δοκιμών των ιστοσελίδων. 1.5 Σχεδιασμός και οργάνωση ιστοσελίδων Ο όρος web site αναφέρεται σε ένα σύνολο ιστοσελίδων, οι οποίες είναι ιεραρχικά συνδεδεμένες πάνω σε ένα λογικό ιστό μιας ηλεκτρονικής τοποθεσίας. Ο σχεδιασμός των ιστοσελίδων μιας ηλεκτρονικής τοποθεσίας είναι μια σημαντική εργασία, στην οποία πρέπει να προβεί ο σχεδιαστής, γιατί θα αποτελέσει την πυξίδα πλοήγησής τους. Ο κάθε χρήστης ή συνδρομητής του Internet μπορεί να δημιουργήσει τη δική του ηλεκτρονική τοποθεσία. Η τοποθεσία αυτή τοποθετείται σε έναν εξυπηρετητή (web server) και είναι προσβάσιμη από όλους τους άλλους χρήστες. Το κάθε web site, ενώ δεν λειτουργεί απαραίτητα γραμμικά, πρέπει να δομηθεί με τέτοιο τρόπο ώστε να μην αποπροσανατολίζει τους χρήστες που το επισκέπτονται. Πρέπει να διαθέτει την δυνατότητα επιστροφής στην αρχική σελίδα. Την αφετηρία αποτελεί η αρχική σελίδα (home page), η οποία είναι η είσοδος για την περιήγηση στο web site. Η σελίδα αυτή περιέχει, περιληπτικά συνήθως, τα συνδεμένα δεδομένα στα οποία οδηγεί, είτε σε μορφή πίνακα, γραφικών κλπ. H περιήγηση γίνεται ακολουθώντας τους συνδέσμους (links). Η οργάνωση των ιστοσελίδων ακολουθεί τις γενικές αρχές σχεδιασμού ενός υπερμέσου. Διακρίνονται τρεις διαφορετικοί τρόποι οργάνωσης ιστοσελίδων. Η γραμμική (σειριακή), η ιεραρχική και η δικτυωτή οργάνωση. Στην πράξη, υπάρχουν συνδυασμοί ιεραρχικής και δικτυωτής δομής. Επίσης, το WWW παρέχει τη δυνατότητα να σύνδεσης ιστοσελίδων του

χρήστη με ιστοσελίδες που έχουν δημιουργηθεί από άλλους, αρκεί αυτός να γνωρίζει την URL διεύθυνσή τους. Στη γραμμική ή σειριακή οργάνωση οι σύνδεσμοι μεταφέρουν το χρήστη από τη μια σελίδα στην επόμενη με σειριακό τρόπο. Είναι η απλούστερη οργάνωση και χρησιμοποιείται σε ηλεκτρονικές τοποθεσίες των οποίων όλες οι ιστοσελίδες είναι ισοδύναμες. Η οργάνωση αυτή θυμίζει τη διαδικασία κάθετης παραγωγής ενός προϊόντος, το οποίο πρέπει να περάσει από όλα τα στάδια. Εικόνα 1.2 Γραμμική οργάνωση ιστοσελίδων Στην ιεραρχική οργάνωση, οι χρήστες διατρέχουν τη δομή από πάνω, όπου τα δεδομένα είναι γενικότερα και περιληπτικά, προς τα κάτω, όπου η παρουσίαση είναι περισσότερο εξειδικευμένη. Εξ αιτίας των πολλών επιπέδων, οι δημιουργοί πρέπει να είναι πολύ προσεχτικοί στο σχεδιασμό των συνδέσμων ώστε να διασφαλίζεται ο προσανατολισμός του επισκέπτη. Αρχική σελίδα Εικόνα 1.3 Ιεραρχική οργάνωση ιστοσελίδων

Στη δικτυωτή οργάνωση, οι χρήστες διατρέχουν τη δομή από πάνω προς τα κάτω αλλά και οριζόντια. Μπορούν συνεπώς να προσπελάσουν απευθείας διαφορετικές σελίδες του ίδιου επιπέδου ή διαφορετικών επιπέδων. Εξ αιτίας των πολλών επιπέδων και της μεγάλης ποικιλίας των δυνατών διαδρομών, οι δημιουργοί πρέπει (όπως και στην ιεραρχική δομή) να είναι πολύ προσεχτικοί στο σχεδιασμό και τη χρήση των συνδέσμων ώστε ο χρήστης να μην αποπροσανατολίζεται. Αρχική σελίδα Εικόνα 1.4 Δικτυωτή οργάνωση ιστοσελίδων Υπάρχουν πολλά εργαλεία λογισμικού για τη δημιουργία των ιστοσελίδων. Ένα από αυτά είναι ο φυλλομετρητής Netscape Communicator που παρέχει, εκτός των άλλων, και τη δυνατότητα δημιουργίας ιστοσελίδων με την εφαρμογή Page Composer. 1.6 Χρήσιμες συμβουλές για τη δημιουργία ιστοσελίδων Τα ερωτήματα και οι προβληματισμοί που πρέπει να τεθούν πριν ξεκινήσει κανείς τη δημιουργία ιστοσελίδων είναι: Ποιος ο σκοπός της δημιουργίας του web-site; Για διαφημιστικούς λόγους της επιχείρησής μας, για λόγους προβολής κάποιου συγκεκριμένου προϊόντος, για προβολή του ίδιου μας τον εαυτού ή μήπως για να κάνουμε εντύπωση σε κάποιους;

Ποιο το επιθυμητό ακροατήριο; Θέλουμε η ιστοσελίδα μας να τραβά την προσοχή τυχαίων επισκεπτών ή απευθύνεται σε συγκεκριμένα άτομα; Τι είδος άτομα θέλουμε να είναι οι επισκέπτες της ιστοσελίδας μας; Ποιο το περιεχόμενο των σελίδων; Θέλουμε η σελίδα μας να παρέχει μια πληθώρα πληροφοριών ή απλώς να δίνει μια γεύση των πληροφοριών ή της εικόνας πον κρύβεται στην εταιρεία μας; Τα στοιχεία που πρέπει να προσέξει είναι τα παρακάτω: σωστή οργάνωση των σελίδων καλαισθησία σαφήνεια "ελαφριές" σελίδες (όχι "φόρτωμα" με πολλά γραφικά) εκμετάλλευση ολόκληρου του χώρου της σελίδας οθόνης έλεγχο ορθογραφίας. σωστή επιλογή φόντου και χρωμάτων. σωστές υποδείξεις. συνδέσμους για επιστροφή στην αρχική σελίδα. δοκιμή εμφάνισης ιστοσελίδων σε περισσότερους φυλλομετρητές. επιλογή ανάλυσης οθόνης κατά τη σχεδίαση. Αφού έχουμε αποκτήσει μια σαφή εικόνα τον περιεχομένου και της δομής, που θα έχουν oι ιστοσελiδες μας, θα πρέπει να μεταφέρουμε όλα αυτά τα στοιχεία και τις πληροφορίες σε μορφή, που θα μπορεί να διακινηθεί μέσα στο Internet. Τα βασικότερα στοιχεία που μπορούμε να συμπεριλάβουμε στις webσελίδες μας είναι τα ακόλουθα: Μορφοποιημένο κείμενο Εικόνες και γραφικά

Video Σύνδεσμοι προς άλλα έγγραφα Μουσική και ομιλία Διαλογικές φόρμες Πίνακες Εφαρμογές Βάσεων Δεδομένων 1.6.1 Χρώμα - Εικόνες - Ήχος - Βίντεο - Animation Το χρώμα είναι ένα στοιχείο που μπορεί να προσδώσει στις σελίδες μια πιο ευχάριστη αισθητικά όψη. Οι εικόνες επίσης είναι απαραίτητο στοιχείο των ιστοσελίδων. Δεν πρέπει όμως να διαφεύγει το γεγονός ότι καταλαμβάνουν πολύ μεγάλο χώρο και αυτό έχει τις συνέπειές του κατά το "φόρτωμα" της σελίδας. Συνιστάται λογική χρήση εικόνων στις ιστοσελίδες. Πρέπει να αποφεύγονται οι μεγάλες διαστάσεις και να χρησιμοποιούνται μορφές εικόνων με καλή συμπίεση, ή, αυτές που δεν διογκώνουν πολύ τα αρχεία τους, π.χ. μορφής JPG και GIF. Ο ήχος συχνά είναι χρήσιμος στις ιστοσελίδες και μπορεί να αξιοποιηθεί σε πολλές περιπτώσεις και μορφές. Τέτοιες μορφές περιλαμβάνουν από την εκτέλεση απλών μουσικών κομματιών μέχρι τη μετάδοση εκπομπών σε πραγματικό χρόνο, από ραδιοφωνικούς σταθμούς συνδεδεμένους στο Internet. Αυτό επιτυγχάνεται με την υποβοήθηση ειδικού λογισμικού, όπως το RealPlayer, το οποίο λειτουργεί ως επιπρόσθετο πρόγραμμα από τους φυλλομετρητές. Ένα αρχείο ήχου wav 2 λεπτών καταλαμβάνει χώρο περίπου 10Mb ενώ ένα αρχείο mid ίδιου χρόνου καταλαμβάνει 20Kb. Αυτός είναι και ο λόγος που τα αρχεία μορφής mid χρησιμοποιούνται πάρα πολύ στο Internet. Το βίντεο είναι το "πιο δύσχρηστο" δεδομένο στο Internet. Τα αρχεία βίντεο, παρά τη συμπίεσή τους, είναι πάρα πολύ μεγάλα σε μέγεθος. Οι μορφές αρχείων βίντεο που χρησιμοποιούνται σήμερα είναι οι MPEG, AVI (Video for Windows της Microsoft), MOV (QuickTime της Apple).

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

ΚΕΦΑΛΑΙΟ ΔΕΥΤΕΡΟ 2 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2.1 Γενικά Οι περισσότερες ιστοσελίδες που βλέπετε στο Internet δημιουργήθηκαν με τη χρήση της γλώσσας υπολογιστών που καλείται HTML (HyperText Markup Language). Για να δημιουργήσετε μια τοποθεσία στο Internet θα χρειαστεί να μάθετε τα βασικά της HTML. Είναι απλή στην εκμάθηση και με λίγη εξάσκηση θα δημιουργήσετε τοποθεσίες στο Internet αρκετά εύκολα. Η HTML δουλεύει με την εισαγωγή ετικετών μέσα σε κείμενο. Έτσι ένα αρχείο HTML μπορεί να γραφεί σε κάποιο συντάκτη κειμένου ή κάποιο πρόγραμμα επεξεργασίας κειμένου όπως το Word ή το Σημειωματάριο. Κάθε ετικέτα περιβάλλεται από γωνιακές αγκύλες (< >). Τα προγράμματα πλοήγησης δουλεύουν διαβάζοντας το κείμενο ενός αρχείου HTML και αποκωδικοποιώντας και εκτελώντας τις εντολές που περιέχονται μέσα στις ετικέτες. Οι ετικέτες καθορίζουν πώς θα γίνεται η εμφάνιση των περιεχομένων της σελίδας. 2.2 Ετικέτες (Tags) Tags λέμε τις ετικέτες που ορίζουν την αρχή και το τέλος μιας λειτουργίας. Περικλείονται σε σύμβολα μικρότερου-μεγαλύτερου: <ετικέτα>. Όταν το tag κλείνει, περιλαμβάνει επιπλέον και μια κάθετο: </ετικέτα>. Αυτό είναι όλο... Για παράδειγμα, η παρακάτω σειρά λέει στον φυλλομετρητή να εμφανίζει με έντονα γράμματα (b=bold) τη λέξη 'έντονα' και με πλάγια (i=italics) τη λέξη 'πλάγια': Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω <b>έντονα</b> ή και <i>πλάγια</i> Το αποτέλεσμα θα είναι το εξής: Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω έντονα ή και πλάγια

Τα tags μπορούν να περικλείουν άλλα, δεν πρέπει όμως να μπαίνουν διασταυρωμένα. Π.χ. Η δομή τύπου 3 2 1 1 2 3 όπου τα τριάρια περικλείουν τα δυάρια και αυτά με τη σειρά τους τούς άσσους είναι σωστή, όχι όμως και η αυτή: 3 2 1 2 3 1 όπου τα ζεύγη μπερδεύονται. Χρησιμοποιώντας τα πιο πάνω tags μαζί με αυτό που ορίζει την υπογράμμιση (u=underlined) μπορούμε να έχουμε συνδυασμούς όπως: Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. Μας δίνει: Μπορώ να έχω έντονα και πλάγια μαζί ή πλάγια και υπογραμμισμένα. 2.3 Δομή μίας σελίδας HTML Το πρόγραμμα που ακολουθεί αποτελεί ένα πολύ απλό παράδειγμα χρήσης της γλώσσας HTML και γράφτηκε με τη βοήθεια ενός διορθωτή κειμένου. <HTML> <HEAD> <TITLE> Ο Τίτλος μιας σελίδας HTML </TITLE> </HEAD> <BODY> </BODY> </HTML> <H1> Αυτή είναι μια σελίδα HTML </Hl> Όπως παρατηρούμε, η HTML έχει τρεις ετικέτες που χρησιμεύουν για να περιγράψουν τη συνολική δομή μιας σελίδας, ενώ ταυτόχρονα παρέχουν κάποια πληροφοριακά στοιχεία για

την σελίδα, όπως είναι ο τίτλος της, ο συγγραφέας της σελίδας κτλ. Οι ετικέτες αυτές είναι οι ακόλουθες: <HTML> Η ετικέτα < HTML> είναι η πρώτη ετικέτα που υπάρχει σε κάθε κώδικα HTML. Πληροφορεί ότι το περιεχόμενο του αρχείου είναι γραμμένο σε γλώσσα HTML. Όλο το κείμενο, καθώς και οι ετικέτες που βρίσκονται σε κάθε σελίδα HTML, θα πρέπει να βρίσκονται εντός της ετικέτας <HTML> ως εξής: <HTML>... το περιεχόμενο της σελίδας </HTML> <HEAD> Η ετικέτα <HEAD> είναι αμφίπλευρη. Πρόκειται για τον πρόλογο της σελίδας και προσδιορίζει το περιεχόμενο της. Υπάρχουν συγκεκριμένες ετικέτες HTML, όπως είναι για παράδειγμα η <TITLE >, που περιέχονται στην ετικέτα < HEAD> μιας σελίδας. Εκτός από τις συγκεκριμένες αυτές ετικέτες καμία άλλη ετικέτα δεν επιτρέπεται να εισάγεται μέσα στο πεδίο της <HEAD>. Ένα παράδειγμα που δείχνει τη χρήση της ετικέτας αυτής είναι το ακόλουθο: <HTML> <HEAD> </HEAD>. </HTML> <TITLE> Αυτός είναι τίτλος </TITLE> <BODY> To κυρίως σώμα μιας σελίδας HTML, το οποίο περιλαμβάνει το κείμενο, τους συνδέσμους με άλλες σελίδες, τις εικόνες κτλ., βρίσκεται εντός μιας αμφίπλευρης ετικέτας που λέγεται <BODY>. Επομένως, σε συνδυασμό και με τις άλλες ετικέτες, η σελίδα παίρνει την ακόλουθη μορφή: <HTML> <HEAD> <TITLE> Αυτός είναι τίτλος </TITLE> </HEAD> <BODY>

</BODY> </HTML> Κάθε ετικέτα HTML είναι εμφωλιασμένη (nested). Αυτό σημαίνει ότι ή ετικέτα <BODY> περιλαμβάνεται εντός της ετικέτας <HTML>. To ίδιο συμβαίνει και με την ετικέτα <HEAD>. Όλες οι HTML ετικέτες τοποθετούνται με ανάλογο τρόπο δίνοντας μορφή και συγκεκριμένα χαρακτηριστικά ή ιδιότητες στα κείμενα που περικλείουν. 2.3.1 Τίτλος Κάθε σελίδα HMTL χρειάζεται έναν τίτλο που να αντιστοιχεί στο περιεχόμενο της. Ο τίτλος χρησιμοποιείται από τους σελιδοδείκτες (bookmarks) του φυλλομετρητή, καθώς και από άλλα προγράμματα που κατασκευάζουν καταλόγους με σελίδες από τον Παγκόσμιο Ιστό. Για να δοθεί τίτλος σε μια σελίδα, θα πρέπει να χρησιμοποιηθεί η ετικέτα <TITLE>. Η ετικέτα <TITLE> είναι αμφίπλευρη και περιλαμβάνεται πάντα εντός της ετικέτας <HEAD>, όπως φαίνεται και στο ακόλουθο παράδειγμα: <HTML> <HEAD> <TITLE> Πληροφορική Ι </TITLE> </HEAD> <BODY> </BODY> </HTML> Σε κάθε σελίδα μπορεί να υπάρχει ένας μόνο τίτλος, και αυτός μπορεί να περιέχει μόνο απλό κείμενο, δηλαδή δεν μπορούν να εισάγονται άλλες ετικέτες μέσα στην ετικέτα <TITLE>. Όταν καλούμε μια σελίδα, ο τίτλος της σελίδας εμφανίζεται στον τίτλο του παραθύρου του φυλλομετρητή. Επίσης ο τίτλος προτείνεται για καταχώρηση στην προθήκη των αγαπημένων του φυλλομετρητη.

2.3.2 Επικεφαλίδες Οι επικεφαλίδες (Headings) χρησιμοποιούνται, για να δώσουν σε τμήματα κειμένου ένα ξεχωριστό στιλ. Η HTML παρέχει έξι επίπεδα από επικεφαλίδες, οι οποίες συντάσσονται με τον παρακάτω τρόπο : <Η1> Αυτό είναι το πρώτο επίπεδο επικεφαλίδας </Η1> <Η2> Αυτό είναι το δεύτερο επίπεδο επικεφαλίδας </Η2> <Η3> Αυτό είναι το τρίτο επίπεδο επικεφαλίδας </Η3> <Η4> Αυτό είναι το τέταρτο επίπεδο επικεφαλίδας </Η4> <Η5> Αυτό είναι το πέμπτο επίπεδο επικεφαλίδας </Η5> <Η6> Αυτό είναι το έκτο επίπεδο επικεφαλίδας </Η6> Το αποτέλεσμα των παραπάνω γραμμών κώδικα θα είναι αυτό : Οι αριθμοί των ετικετών (από Η1 μέχρι Η6) υποδηλώνουν το επίπεδο της επικεφαλί-δας. Οι επικεφαλίδες, όταν εμφανίζονται σε ένα φυλλομετρητή, έχουν ως αποτέλε-σμα να αποκτά το δικό του στιλ το κείμενο το οποίο περικλείουν. Αυτό σημαίνει ότι το κείμενο που περικλείεται έχει συγκεκριμένη γραμματοσειρά και ορισμένο μέγεθος, είναι πιθανώς κεντραρισμένο ή υπογραμμισμένο κτλ. Στο παράδειγμα που ακολουθεί τα κενά των εσοχών που εμφανίζονται από αριστερά στο κείμενο κάποιων επικεφαλί-δων θα αγνοηθούν, όταν αυτές θα εμφανιστούν μέσω κάποιου φυλλομετρητή. Αυτό συμβαίνει διότι οι ετικέτες περιλαμβάνουν

και την παράμετρο ALIGN, η οποία δίνει τη δυνατότητα για στοίχιση. Χαρακτηριστικά είναι τα παραδείγματα που ακολουθούν: Παράδειγμα ΙΙ <H1 ALIGN=CENTER> η επικεφαλίδα αυτή θα έχει κεντρική στοίχιση </H1> <H1 ALIGN = LEFT> η επικεφαλίδα αυτή θα έχει αριστερή στοίχιση </H1> <H1 ALIGN = RIGHT> η επικεφαλίδα αυτή θα έχει δεξιά στοίχιση </H1> Αποτέλεσμα: Παράδειγμα ΙΙΙ <html> <Head><title> HI... H6 </title></head> <body> <H1> Θεματικά Αντικείμενα στο Διαδίκτυο</H1 > <H2> Περιήγηση</H2 > <H2 > Ηλεκτρονικό Ταχυδρομείο(e-mail) </H2 > <H2> Εισαγωγή στην HTML</H2> <H3 > Γενικά </H3 > <H3>Βασικές ετικέτες </H 3 > <H4>Η ετικέτα HTML</H4> <H4> Η ετικέτα BODY</H4> <H4>Η ετικέτα HEAD </H4> <H4>Η ετικέτα TITLE </H4> <H3> Προχωρημένες ετικέτες </H3> </body> </html>

Αποτέλεσμα 2.3.3 Παράγραφοι Στις πρώτες εκδόσεις της γλώσσας HTML είχαμε τη χρήση της ετικέτας <Ρ>, προκειμένου να γίνεται διαχωρισμός των παραγράφων. Η ετικέτα αυτή ήταν μονόπλευρη, δηλαδή δεν υπήρχε το τελικό τμήμα </Ρ>. Όμως, στις πρόσφατες εκδόσεις η ετικέτα παρουσιάζεται ως αμφίπλευρη. Δηλαδή, είναι δυνατή η ύπαρξη του </Ρ> ως προαιρετικού τμήματος. Η ετικέτα <Ρ> εισάγει μια καινούρια γραμμή, γι' αυτό και χρησιμοποιείται από πολλούς, προκειμένου να εξασφαλίζεται κάποια απόσταση μεταξύ των παραγράφων. Αν θέλετε να βάλετε περισσότερες από μία ετικέτες σε ένα κείμενο, τότε η σωστή μορφοποίηση απαιτεί η ετικέτα που ανοίγει πρώτη να κλείνει τελευταία. Για παράδειγμα: <TAG1><TAG2> το κείμενο σας </TAG2></TAG 1> Δεν έχει σημασία πως μορφοποιείται το κείμενο στο διορθωτή. Ο φυλλομετρητής αγνοεί τη μορφοποίηση του διορθωτή και λαμβάνει υπόψη του μόνο τις ετικέτες. Ακολουθούν μερικά παραδείγματα:

Παράδειγμα ΙV <P ALIGN=CENTER> η παράγραφος αυτή θα κεντραριστεί </P> <P ALIGN = LEFT> η παράγραφος αυτή θα έχει αριστερή στοίχιση </P> <P ALIGN = RIGHT> η παράγραφος αυτή θα έχει δεξιά στοίχιση </P> Αποτέλεσμα Παράδειγμα V <html> <head><title>p</title></head> <body> <h2> <P> URL σημαίνει Uniform Resource Locator-Ενιαία θέση Πόρου. Περιγρά φει με ακρίβεια το σημείο όπου βρίσκονται οι πληροφορίες. Εάν δώσετε ένα URL σε ένα φίλο που μένει στη διπλανή πόρτα ή σε έναν φίλο που μένει στην Αμερική, θα μπορέσουν και οι δυο να έχουν πρό σβαση στις ίδιες πληροφορίες στις οποίες έχετε πρόσβαση και εσείς με το ίδιο URL. </P> <P> Ο υπολογιστής σας δεν μπορεί να κολλήσει ιό κάνοντας απλώς κλικ σε μια σελίδα του WEB ακόμα κι αν αυτή έχει εικόνες, ήχο ή τρισδιάστατα αρχεία. Πρέπει όμως να προβληματιστείτε σχετι κά με την τοποθεσία από όπου μεταφέρετε προ γράμματα. </P> </h2> </body> </html>

Αποτέλεσμα: Κλείνοντας αυτή την ενότητα ας δούμε τη δομή μιας απλής σελίδας. Πρέπει να σημειωθεί πως τα tags παρουσιάζονται με τις κατάλληλες εσοχές γραμμής ώστε να φαίνεται που ανοίγει και που κλείνει το καθένα. Μπορείτε να γράψετε τον κώδικα στο σημειωματάριο, να αποθηκεύστε τον κάπου στο δίσκο σας με όνομα test.html και μετά να κάνετε διπλό κλικ στο αρχείο ώστε να το δείτε με τον φυλλομετρητή σας: <html> <head> <title>η πρώτη μου σελίδα</title> </head> <body> Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. </body> </html>

2.4 Οι Ετικέτες αναλυτικά Ακολουθούν συγκεντρωμένα οι περισσότερες από τις διαθέσιμες ετικέτες. Σε κάθε γραμμή θα βρείτε τα εξής: Στην πρώτη στήλη (όπου υπάρχει) αναγράφεται το πεδίο εφαρμογής της εντολής. Το 4.0 σημαίνει πως το tag λειτουργεί σε φυλλομετρητές έκδοσης 4 και μετά. Το NS και τα Ν1 κλπ σημαίνουν πως λειτουργεί μόνον σε NetScape. To ΜS σημαίνει πως λειτουργεί μόνον σε Microsoft Internet Explorer. Όπου δεν αναγράφεται τίποτε, το tag έχει γενική εφαρμογή. Στη δεύτερη στήλη και με έντονη γραφή, υπάρχει η περιγραφή του tag, Στην τρίτη, η σύνταξή του. Στην τέταρτη εμφανίζονται τυχόν σχόλια και διευκρινήσεις. Κάποιες αναγκαίες επεξηγήσεις: Το σύμβολο? δηλώνει αριθμό Τα σύμβολα $ και * δηλώνουν κάποιον αλφαριθμητικό χαρακτήρα (γράμμα) Τύπος εγγράφου <HTML></HTML> Τίτλος Επιφυλλίδα <TITLE></TITLE> <HEAD></HEAD> ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ Ορίζει την αρχή και το τέλος Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Πρέπει να βρίσκεται στην επιφυλλίδα Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java Bασικός Κορμός <BODY></BODY> το κύριο υλικό της σελίδας ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ Έντονη γραφή <B></B> Δοκιμή Πλάγια γραφή <I></I> Δοκιμή 4.0 Υπογράμμιση <U></U> Δοκιμή Διαγραφή <STRIKE></STRIKE> Δοκιμή 4.0 Διαγραφή <S></S> Δοκιμή Εκθέτης <SUP></SUP> Βάση Δοκιμή Δείκτης <SUB></SUB> Βάση Δοκιμή Γραφομηχανή <TT></TT> Δοκιμή Προμορφοποιημένο Πλάτος προμορφοποιημένου <PRE></PRE> <PRE WIDTH=?></PRE> Εμφανίζει τα κενά διαστήματα όπως έχουν γραφεί Σε χαρακτήρες

Στοίχιση στο κέντρο <CENTER></CENTER> Στη θέση του χρησιμοποιείται πλέον το <DIV ALIGN="CENTER"></DIV> N1 Αναβοσβήσιμο <BLINK></BLINK> Δοκιμή Μέγεθος γραμμάτων <FONT SIZE=?></FONT> Με τιμές από 1 ως και 7 Αλλαγή μεγέθους γραμμάτων Χρώμα γραμμάτων 4.0 Επιλογή γραμματοσειράς N4 Επιλογή μεγέθους N4 Βάρος γραμμάτων 4.0 Βασικό μέγεθος γραμμάτων MS Κινούμενο κείμενο <FONT SIZE="+ -?"></FONT> <FONT COLOR="#$$$$$$"></FONT> <FONT FACE="***"></FONT> <FONT POINT-SIZE=?></FONT> <FONT WEIGHT=?></FONT> <BASEFONT SIZE=?> <MARQUEE></MARQUEE> Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς Με τιμές από 1 ως και 7 και προεπιλογή το 3. Ισχύει για όλη τη σελίδα. ΔΙΑΧΩΡΙΣΤΕΣ N Παράγραφος Στοίχιση παραγράφου Πλήρης στοίχιση παραγράφου Αλλαγή σειράς <P></P> <P ALIGN=LEFT CENTER RIGHT></P> <P ALIGN=JUSTIFY></P> <BR> Χωρίς αναδίπλωση <BR CLEAR=LEFT RIGHT ALL> Οριζόντια γραμμή <HR> Στοίχιση γραμμής <HR ALIGN=LEFT RIGHT CENTER> Δεν είναι απαραίτητο το κλείσιμο του tag N1 Πάχος γραμμής <HR SIZE=?> Σε pixels Πλάτος γραμμής <HR WIDTH=?> Σε pixels Πλάτος γραμμής <HR WIDTH="%"> Ως ποσοστό του πλάτους σελίδας Συμπαγής γραμμή <HR NOSHADE> Δίχως την τρισδιάστατη όψη Χωρίς αλλαγές σειράς N1 Αλλαγή γραμμής <NOBR></NOBR> <WBR> Επαναλαμβανόμενη εικόνα φόντου MS Υδατογράφημα ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ <BODY BACKGROUND="URL"> <BODY BGPROPERTIES="FIXED"> Χρώμα φόντου <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue) Βασικό χρώμα κειμένου <BODY TEXT="#$$$$$$"> Χρώμα συνδέσμων <BODY LINK="#$$$$$$"> Χρώμα συνδέσμων που έχουμε <BODY VLINK="#$$$$$$">

επισκεφτεί Ενεργός σύνδεσμος <BODY ALINK="#$$$$$$"> 4.0 4.0 4.0 4.0 N, MS N1 N1 Συνδεσμοςπαραπομπή σε διεύθυνση Παραπομπή σε σημείο εγγράφου Παράθυρο όπου θα ανοίξει ο σύνδεσμος Ενέργεια με το κλικ Ενέργεια όταν περάσει το ποντίκι από πάνω Ενέργεια όταν φύγει το ποντίκι από πάνω Σύνδεσμος για αποστολή email Καθορισμός τίτλου για email Ορισμός θέσης για σύνδεσμο Εμφάνιση εικόνας Στοίχιση εικόνας Στοίχιση εικόνας σε σχέση με το κείμενο Εναλλακτικό κείμενο αντί της εικόνας ΣΥΝΔΕΣΜΟΙ, ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ <A HREF="URL"></A> <A HREF="URL#***"></A> <A HREF="#***"></A> <A HREF="URL" TARGET="***"></A> Αν πρόκειται για άλλο έγγραφο Αν πρόκειται για το τρέχον έγγραφο <A HREF="URL" ONCLICK="***"></A> Javascript <A HREF="URL" ONMOUSEOVER="***"></A> Javascript <A HREF="URL" ONMOUSEOUT="***"></A> Javascript <A HREF="mailto:@"></A> <A HREF="mailto:@?SUBJECT=***"></A> <A NAME="***"></A> Πρέπει να μπει? πριν από τη λέξη SUBJECT Για χρήση με την Παραπομπή (βλέπε παραπάνω) <IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP BOTTOM MIDDLE LEFT RIGHT> <IMG SRC="URL" ALIGN=TEXTTOP ABSMIDDLE BASELINE ABSBOTTOM> <IMG SRC="URL" ALT="***"> <IMG SRC="URL" WIDTH=? HEIGHT=?> Διαστάσεις εικόνας <IMG SRC="URL" WIDTH=% HEIGHT=%> Αν η εικόνα δεν εμφανιστεί Σε pixels Πλαίσιο εικόνας <IMG SRC="URL" BORDER=?> Σε pixels Κενός χώρος γύρω από την εικόνα Εναλλακτική εικόνα χαμηλής ανάλυσης Χάρτης εικόνας με συνδέσμους MS Video Clip MS Ήχος Χάρτης εικόνας χρήστη Τμήμα χάρτη <IMG SRC="URL" HSPACE=? VSPACE=?> <IMG SRC="URL" LOWSRC="URL"> <IMG SRC="URL" ISMAP> <IMG SRC="URL" USEMAP="URL"> <IMG DYNSRC="***" START="***" LOOP=?> <BGSOUND SRC="***" LOOP=? INFINITE> <MAP NAME="***"></MAP> Ως ποσοστό των διαστάσεων της σελίδας Σε pixels Συνήθως ασπρόμαυρη. Εμφανίζεται πρώτη και επικαλύπτεται από την κανονική. Απαιτεί script Περιγραφή χάρτη <AREA SHAPE="DEFAULT RECT CIRCLE POLY" COORDS=",,,"

N1 Ανανέωση περιεχομένου ή μεταπήδηση σε άλλη σελίδα N2 Ενσωματωμένο αντικείμενο N2 Μέγεθος αντικειμένου HREF="URL" NOHREF> <META HTTP-EQUIV="Refresh" CONTENT="χρόνος σε δευτερόλεπτα; URL=ονομασία σελίδας"> Μπαίνει μεταξύ <head> και </head>. Π.χ. <meta httpequiv="refresh" content="10;url=index.html"> <EMBED SRC="URL"> <EMBED SRC="URL" WIDTH=? HEIGHT=?> 4.0 Αντικείμενο <OBJECT></OBJECT> 4.0 Παράμετροι <PARAM> Π.χ. κάποιο flash animation Ορισμός πίνακα <TABLE></TABLE> ΠΙΝΑΚΕΣ 4.0 Στοίχιση πίνακα <TABLE ALIGN=LEFT RIGHT CENTER> Περίγραμμα πίνακα Περίγραμμα πίνακα Απόσταση (διάκενο) κελιών Εσωτερικό περιθώριο κελιών <TABLE BORDER></TABLE> <TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> Υπαρκτό ή μη Oρισμός πάχους Επιθυμητό πλάτος <TABLE WIDTH=?> Σε pixels Ποσοστό πλάτους <TABLE WIDTH=%> Ποσοστό επί του πλάτους της σελίδας 4.0 Χρώμα πίνακα <TABLE BGCOLOR="$$$$$$"></TABLE> 4.0 Πλαίσιο πίνακα <TABLE FRAME=VOID ABOVE BELOW HSIDES LHS RHS VSIDES BOX BORDER></TABLE> 4.0 Χάρακας πίνακα <TABLE RULES=NONE GROUPS ROWS COLS ALL></TABLE> MS Χρώμα περιγράμματος MS Σκούρο περίγραμμα MS Ανοιχτόχρωμο περίγραμμα 4.0 N3 Σειρά πίνακα Στοίχιση σειράς πίνακα Κελί πίνακα Στοίχιση κελιού Κείμενο κελιού χωρίς αναδίπλωση Επέκταση σε στήλες Επέκταση σε σειρές Επιθυμητό πλάτος κελιού Πλάτος κελιού σε ποσοστό <TABLE BORDERCOLOR="$$$$$$"></TABLE> <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> <TR></TR> <TR ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> <TD></TD> Πρέπει να εμπεριέχεται σε ορισμό σειράς <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> <TD NOWRAP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> <TD WIDTH="%"> Σε pixels Επί του πλάτους του πίνακα

4.0 Χρώμα κελιού <TD BGCOLOR="#$$$$$$"> 4.0 N3 4.0 Επικεφαλλίδα στήλης Στοίχιση επικεφαλλίδας Επικεφαλίδα δίχως αναδίπλωση Επέκταση επικεφαλλίδας σε στήλες Επέκταση επικεφαλλίδας σε σειρές Επιθυμητό πλάτος επικεφαλλίδας Πλάτος σε ποσοστό Χρώμα κελιού επικεφαλλίδας <TH></TH> <TH ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> <TH NOWRAP> <TH COLSPAN=?> <TH ROWSPAN=?> <TH WIDTH=?> <TH WIDTH="%"> 4.0 Σώμα πίνακα <TBODY> 4.0 Υποφυλλίδα πίνακα <TH BGCOLOR="#$$$$$$"> <TFOOT></TFOOT> 4.0 Επιφυλλίδα πίνακα <THEAD></THEAD> Επεξήγηση πίνακα <CAPTION></CAPTION> Στοίχιση επεξήγησης <CAPTION ALIGN=TOP BOTTOM LEFT RIGHT> 4.0 Στήλη <COL></COL> 4.0 Επέκταση στηλών <COL SPAN=?></COL> 4.0 Πλάτος στήλης <COL WIDTH=?></COL> 4.0 Πλάτος στήλης σε ποσοστό <COL WIDTH="%"></COL> 4.0 Ομάδα στηλών <COLGROUP></COLGROUP> 4.0 Επέκταση ομάδας στηλών <COLGROUP SPAN=?></COLGROUP> 4.0 Πλάτος ομάδας <COLGROUP WIDTH=?></COLGROUP> 4.0 Πλάτος ομάδας σε ποσοστό <COLGROUP WIDTH="%"></COLGROUP> Έντονα και με στοίχιση στο κέντρο Σε pixels Επί του πλάτους του πίνακα Προηγείται του THEAD> Απλή λίστα Συμπαγής λίστα <UL><LI></UL> <UL COMPACT></UL> ΛΙΣΤΕΣ To <LI> μπαίνει μπροστά από κάθε σειρά Τύπος κουκίδας <UL TYPE=DISC CIRCLE SQUARE> Για όλη τη λίστα Τύπος κουκίδας <LI TYPE=DISC CIRCLE SQUARE> Για τη σειρά και τις επόμενες Αριθμημένη λίστα Συμπαγής αριθμημένη λίστα <OL><LI></OL> <OL COMPACT></OL> Μορφή αρίθμησης <OL TYPE=A a I i 1> Μορφή αρίθμησης <LI TYPE=A a I i 1> Αριθμός έναρξης αρίθμησης <OL START=?> To <LI> μπαίνει μπροστά από κάθε σειρά Για όλη τη λίστα Για τη σειρά και τις επόμενες Για όλη τη λίστα

Αριθμός έναρξης αρίθμησης Λίστα επεξηγήσεων Συμπαγής λίστα επεξηγήσεων <LI VALUE=?> <DL><DT><DD></DL> <DL COMPACT></DL> Για τη σειρά και τις επόμενες (<DT>=όρος, <DD>=επεξήγηση) Λίστα επιλογών <MENU><LI></MENU> Πριν από κάθε σειρά Συμπαγής λίστα επιλογών Λίστα περιεχομένων Συμπαγής λίστα περιεχομένων <MENU COMPACT></MENU> <DIR><LI></DIR> <DIR COMPACT></DIR> Πριν από κάθε σειρά Ορισμός φόρμας 4.0 'Ανέβασμα' αρχείου Πεδίο εισαγωγής δεδομένων Όνομα πεδίου Τιμή πεδίου Τσεκαρισμα ΦΟΡΜΕΣ <FORM ACTION="URL" METHOD=GET POST></FORM> <FORM ENCTYPE="multipart/form-data"></FORM> <INPUT TYPE="TEXT PASSWORD CHECKBOX RADIO FILE BUTTON IMAGE HIDDEN SUBMIT RESET"> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος Μέγεθος πεδίου <INPUT SIZE=?> Σε χαρακτήρες Μέγιστο μέγεθος <INPUT MAXLENGTH=?> Σε χαρακτήρες 4.0 Κουμπί <BUTTON></BUTTON> 4.0 Όνομα κουμπιού <BUTTON NAME="***"></BUTTON> 4.0 Τύπος κουμπιού <BUTTON TYPE="SUBMIT RESET BUTTON"></BUTTON> 4.0 Προεπιλεγμένη τιμή <BUTTON VALUE="***"></BUTTON> 4.0 Ετικέτα <LABEL></LABEL> 4.0 Ετικέτα επιλοής <LABEL FOR="***"></LABEL> Λίστα επιλογής <SELECT></SELECT> Όνομα λίστας <SELECT NAME="***"></SELECT> Αριθμός επιλογών <SELECT SIZE=?></SELECT> Πολλαπλή επιλογή <SELECT MULTIPLE> Επιλογή Προεπιλογή Τιμή επιλογής 4.0 Ομαδοποίηση επιλογών Μέγεθος πεδίου εισαγωγής κειμένου Ονομασία πεδίου εισαγωγής κειμένου <OPTION> <OPTION SELECTED> <OPTION VALUE="***"> <OPTGROUP LABEL="***"></OPTGROUP> <TEXTAREA ROWS=? COLS=?></TEXTAREA> <TEXTAREA NAME="***"></TEXTAREA> Για περισσότερες από μία επιλογές Διαθέσιμα στοιχεία προς επιλογή

N2 Αναδίπλωση κειμένου <TEXTAREA WRAP=OFF HARD SOFT></TEXTAREA> 4.0 Μέλη ομάδας <FIELDSET></FIELDSET> 4.0 Υπόμνημα <LEGEND></LEGEND> 4.0 Στοίχιση υπομνήματος <LEGEND ALIGN="TOP BOTTOM LEFT RIGHT"></LEGEND> Επικεφαλλίδα Στοίχιση επικεφαλλίδας Yποδιαίρεση κειμένου Στοίχιση υποδιαίρεσης 4.0 Καθορισμένο περιεχόμενο Παράθεση σημείωσης <H?></H?> ΟΡΙΣΜΟΣ ΔΟΜΗΣ <H? ALIGN=LEFT CENTER RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT RIGHT CENTER JUSTIFY></DIV> <SPAN></SPAN> <BLOCKQUOTE></BLOCKQUOTE> Δέχεται 6 ορισμούς: H1 ως και H6 Συνήθως με εσοχή παραγράφου 4.0 Σημείωση <Q></Q> Για σύντομες σημειώσεις Έμφαση Έντονη έμφαση Κώδικας Δείγμα Είσοδος από πληκτρολόγιο Μεταβλητή <EM></EM> <STRONG></STRONG> <CODE></CODE> <SAMP></SAMP> <KBD></KBD> <VAR></VAR> Συνήθως εμφανίζει πλάγια (italics) γράμματα Συνήθως εμφανίζει έντονα (bold) γράμματα Για παράθεση γραμμών κώδικα Ορισμός <DFN></DFN> Δε χρησιμοποιείται ευρέως Διεύθυνση συγγραφέα Μεγάλα γράμματα Μικρά γράμματα <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL> 4.0 Παρεμβολή <INS></INS> 4.0 Ώρα αλλαγής <INS DATETIME=":::"></INS> 4.0 Σχόλια <INS CITE="URL"></INS> 4.0 Διαγραφή <DEL></DEL> 4.0 Ώρα διαγραφής <DEL DATETIME=":::"></DEL> 4.0 Σχόλια διαγραφής <DEL CITE="URL"></DEL> 4.0 Αρκτικόλεξο <ACRONYM></ACRONYM> 4.0 Σύντμηση <ABBR></ABBR> Σημειώνει τις προσθήκες σε νέα έκδοση Σημειώνει τις διαγραφές σε νέα έκδοση

ΠΛΑΙΣΙΑ (Frames) 4.0 Σελίδα με πλαίσια <FRAMESET></FRAMESET> Αντί του <BODY> 4.0 Ύψος σειρών <FRAMESET ROWS=,,,></FRAMESET> Σε pixels ή %) 4.0 Ύψος σειρών <FRAMESET ROWS=*></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. 4.0 Πλάτος στηλών <FRAMESET COLS=,,,></FRAMESET> (pixels or %) 4.0 Πλάτος στηλών <FRAMESET COLS=*></FRAMESET> 4.0 Περίγραμμα <FRAMESET FRAMEBORDER="yes no"></frameset> 4.0 Πλάτος περιγράμματος 4.0 Χρώμα περιγράμματος N3 Απόσταση (διάκενο) πλαισίων 4.0 Ορισμός πλαισίου <FRAME> 4.0 Έγγραφο που θα εμφανιστεί <FRAMESET BORDER=?></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> <FRAMESET FRAMESPACING=?></FRAMESET> <FRAME SRC="URL"> Περιεχόμενα μεμονωμένου πλαισίου 4.0 Όνομα πλαισίου <FRAME NAME="***" _blank _self _parent _top> 4.0 Πλάτος περιθωρίου <FRAME MARGINWIDTH=?> Αριστερά και δεξιά 4.0 Ύψος περιθωρίου <FRAME MARGINHEIGHT=?> Πάνω και κάτω 4.0 Εμφάνιση μπάρας κύλισης <FRAME SCROLLING="YES NO AUTO"> 4.0 Σταθερό μέγεθος <FRAME NORESIZE> 4.0 Περίγραμμα πλαισίου 4.0 Χρώμα περιγράμματος 4.0 Περιεχόμενο εκτός πλαισίων <FRAME FRAMEBORDER="yes no"> <FRAME BORDERCOLOR="#$$$$$$"> <NOFRAMES></NOFRAMES> 4.0 Εσωτερικό πλαίσιο <IFRAME></IFRAME> 4.0 Διαστάσεις 4.0 Διαστάσεις <IFRAME WIDTH=? HEIGHT=?></IFRAME> <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> για φυλλομετρητές που δεν υποστηρίζουν πλαίσια Όμοιες παράμετροι με το FRAME

N3 Πολλές στήλες N3 Απόσταση (διάκενο) στηλών N3 Πλάτος στήλης N3 Διαχωριστής N3 Είδος διαχωριστή N3 Μέγεθος διαχωριστή N3 Διαστάσεις διαχωριστή N3 Στοίχιση διαχωριστή N4 Επίπεδο (layer) N4 Όνομα επιπέδου N4 Θέση επιπέδου N4 N4 Σχετική θέση επιπέδου Αρχείο προέλευσης επιπέδου ΤΟΠΟΘΕΤΗΣΗ ΣΤΟΙΧΕΙΩΝ ΣΤΗ ΣΕΛΙΔΑ <MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></MULTICOL> <SPACER> <SPACER TYPE=HORIZONTAL VERTICAL BLOCK> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT RIGHT CENTER> <LAYER></LAYER> <LAYER ID="***"></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> <LAYER SRC="***"></LAYER> N4 Σειρά επικάλλυψης <LAYER Z-INDEX=?></LAYER> <LAYER ABOVE="***" N4 Θέση επικάλλυψης BELOW="***"></LAYER> N4 Διαστάσεις επιπέδου N4 Διαδρομή επιπέδου N4 Εμφάνιση ή μη του επιπέδου N4 Φόντο επιπέδου N4 Χρώμα επιπέδου <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> <LAYER VISIBILITY=SHOW HIDDEN INHERIT></LAYER> <LAYER BACKGROUND="$$$$$$"></LAYER> <LAYER BGCOLOR="$$$$$$"></LAYER> N4 Εσωτερικό επίπεδο <ILAYER></ILAYER> Δέχεται τις ίδιες παραμέτρους με το LAYER

ΚΕΦΑΛΑΙΟ ΤΡΙΤΟ 3 ΕΙΣΑΓΩΓΗ ΣΤΟ FRONTPAGE 3.1 Γενικά Το Microsoft FrontPage είναι ένα εργαλείο συγγραφής ιστοσελίδων το οποίο επιτρέπει την δημιουργία δικτυακών τόπων μέσω της μεθόδου «αυτό που βλέπεις είναι αυτό που παραλαμβάνεις» (What You See Is What You Get WYSIWYG). Αυτό σημαίνει ότι μπορείτε να προβάλλετε μία ιστοσελίδα στο FrontPage όπως θα εμφανιζόταν στον Internet Explorer και να την επεξεργαστείτε χωρίς να είναι απαραίτητη η γνώση εξειδικευμένου HTML κώδικα. Στις επόμενες παραγράφους θα δούμε τον τρόπο με τον οποίο μπορούμε να φτιάξουμε μια ιστοσελίδα με τη χρήση του προγράμματος Microsoft FrontPage. Υπάρχουν πολλά προγράμματα με τα οποία μπορούμε να κάνουμε τις ίδιες εργασίες. Θα χρησιμοποιήσουμε το συγκεκριμένο γιατί είναι από τα πιθανότερα να βρείτε εγκατεστημένο σε κάποιον υπολογιστή όπου θα κληθείτε να δουλέψετε. Η επιφάνεια εργασίας του FrontPage ακολουθεί σχεδιαστικά την φιλοσοφία που ακολουθείται στα προγράμματα της ίδιας εταιρίας (Εικόνα 3.1). Στο αριστερό και μεγαλύτερο κομμάτι της οθόνης είναι ο χώρος σχεδιασμού της σελίδας ενώ στα δεξιά εμφανίζεται το παράθυρο εργασιών όπως και στην υπόλοιπη σουίτα εφαρμογών του Microsoft Office. Το προκαθορισμένο όνομα της κενής ιστοσελίδας η οποία δημιουργείται από το Microsoft Frontpage 2003 είναι new_page_1.html. Η δημιουργία μίας σελίδας ξεκινάει δηλώνοντας το επιθυμητό όνομα και ορίζοντας τον φάκελο όπου θα αποθηκεύονται όλα τα αρχεία μας.

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

Επάνω οριζόντια εργαλειοθήκη Μορφοποίησης (formatting) έχουμε σώσει και τις τελευταίες αλλαγές που έχουμε κάνει στο αρχείο. Περιέχει τα γνωστά από το word εργαλεία μορφοποίησης κειμένου. Μια από τις διαφορές που παρατηρεί κανείς, είναι στα διαθέσιμα μεγέθη γραμματοσειράς, όπου υπάρχουν 8 τυποποιημένα μεγέθη από τα οποία μπορούμε να επιλέξουμε. Επάνω από το παράθυρο επεξεργασίας περιεχομένου ιστοσελίδων Βασική εργαλειοθήκη (Standard) Με τη μορφή σελιδοδεικτών (ετικετών) εμφανίζονται τα αρχεία html που έχουμε ανοιχτά στο FP2003 και επεξεργαζόμαστε. Οι ετικέτες έχουν το όνομα του αρχείου html, και όταν υπάρχει αστερίσκος στο τέλος (*) σημαίνει ότι έχει γίνει κάποια αλλαγή στο συγκεκριμένο αρχείο αλλά δεν έχει σωθεί ακόμα. Τα γνωστά από το word εργαλεία: - Νέο αρχείο, Άνοιγμα αρχείου, Αποθήκευση - Αποκοπή, Αντιγραφή, Επικόλληση, Αντιγρ.Μορφοποίησης - Αναίρεση, Ακύρωση αναίρεσης -//- Δημιουργία Πίνακα -//- Δημιουργία επιπέδου (Layer). Τα επίπεδα (Layers) στο FP2003 είναι το αντίστοιχο των πλαισίων κειμένου στο word. Δηλαδή, όπου σχεδιάσουμε ένα layer και γράψουμε κείμενο, γραφικά κτλ, έκει ακριβώς θα παρουσιάζεται και στον φυλλομετρητή ιστοσελίδων. Μπορούμε να έχουμε τοποθετήσει περισσότερα του ενός Layer σε ένα αρχείο HTML, αρκεί να προσέξουμε τις επικαλύψεις μεταξύ τους. -//- Εισαγωγή εικόνας από αρχείο. -//- Εμφάνιση εργαλειοθήκης σχεδίασης (όμοια με το word). -//- Εισαγωγή Υπερσύνδεσης (hyperlink). Για να δημιουργήσουμε ένα hyperlink (ή αλλιώς link) επιλέγουμε πρώτα το κείμενο ή/και την εικόνα που θέλουμε να αντιστοιχεί στο link, και κατόπιν πατάμε το εικονίδιο αυτό και ακολουθούμε τον οδηγό. Πίνακας 3.1 Κουμπιά στο FrontPage

3.2 Προβολές του FrontPage Το FrontPage περιλαμβάνει μία λίστα από μορφές προβολής της εργασίας μας. Μέσω του μενού View μπορούμε να επιλέξουμε τις διάφορες μορφές προβολής (views), που θα έχει η εργασία μας στην οθόνη (Εικόνα 3.2). Οι προβολές αυτές μπορούν να επιλεχθούν και από τις συντομεύσεις στο κάτω μέρος της οθόνης (Εικόνα 3.3 Συντομεύσεις για τις διαθέσιμες προβολές του FrontPageΕικόνα 3.3) Το FrontPage προσφέρει στον χρήστη επτά διαφορετικούς τρόπους προβολής κατά την επεξεργασία του site μας. Οι διάφορες μορφές προβολής, που μπορούμε να επιλέξουμε, είναι οι ακόλουθες: Page view: Προβάλεται μία συγκεκριμένη σελίδα Folders view: Προβολή Φακέλων Remote Web Site View: Για σύνδεση σε μία απομακρυσμένη ιστοσελίδα Reports: Διάφορες αναφορές Navigation view: Προβολή Πλοήγησης Hyperlinks view: Προβολή Υπερσυνδέσμων Tasks view: Προβολή διεργασιών Παρακάτω θα παρουσιαστούν αναλυτικότερα οι κυριότερες από αυτές. Εικόνα 3.2 Το μενού με τις διαθέσιμες προβολές του FrontPage

Εικόνα 3.3 Συντομεύσεις για τις διαθέσιμες προβολές του FrontPage 3.2.1 Προβολή Σελίδας (Page View) Στην προβολή σελίδας το FrontPage εμφανίζει μία συγκεκριμένη σελίδα σε τέσσερις διαφορετικές μορφές οι οποίες εμφανίζονται στο κάτω μέρος του παραθύρου: Design: Αυτή η προβολή είναι η προεπιλεγμένη και παρουσιάζει την εργασία μας στην γνωστή μορφή WYSIWYG (What Υou See Is What Υou Get: Ότι βλέπεις αυτό θα πάρεις). Σε αυτή την μορφή κατά την επεξεργασία της σελίδας μας βλέπουμε ταυτόχρονα και την εμφάνιση, που θα έχει αργότερα στην πραγματικότητα (εκτός από μερικά στοιχεία). Code: Σε αυτή την προβολή εμφανίζεται το κανονικό περιεχόμενο της σελίδας μας στην γλώσσα υπερκειμένου. Όλες οι μορφοποιήσεις και τα λοιπά στοιχεία, που περιέχονται στην σελίδα μας, βρίσκονται στην πραγματικότητα στο αρχείο μας γραμμένες στην μορφή της γλώσσας του Ιστού. Οι γνώστες της ειδικής αυτής γλώσσας θα μπορούσαν να επεξεργαστούν τις σελίδες τους και σε αυτήν την προβολή. Split: Σε αυτή την προβολή η οθόνη του FrontPage χωρίζεται στα δύο εμφανίζοντας ταυτόχρονα τον κώδικα HTML αλλά και την μορφή σχεδίασης Preview: Στην καρτέλα αυτή δεν μπορούμε να επεξεργαστούμε την σελίδα μας, παρά μόνο να δούμε περίπου πως θα εμφανίζεται στους Φυλλομετρητές (Browsers). Αν πάλι έχουμε εγκατεστημένο κάποιου Browser και θέλουμε να δούμε την εμφάνιση της εργασίας μας σε αυτόν πρέπει να δώσουμε την επιλογή File Preview Ιn Browser που βρίσκεται στο κυρίως μενού και στην βασική γραμμή εργαλείων.

Εικόνα 3.4 Διαφορετικές μορφές για την προβολή σελίδας 3.2.2 Προβολή Καταλόγων (Folders View) Η προβολή αυτή μας θυμίζει την εφαρμογή της Εξερεύνησης των Windows με μία μικρή διαφορά. Εμφανίζεται το κομμάτι του σκληρού δίσκου, από το οποίο έχει ορισθεί η ρίζα της ιστοσελίδας μας και κάτω. Εικόνα 3.5 Προβολή καταλόγων

Στο δεξιό άκρο του παραθύρου εμφανίζονται τρία κουμπιά (Εικόνα 3.6) με τα οποία μπορούμε να προσθέσουμε μία νέα σελίδα, φάκελο ή να πλοηγηθούμε μία θέση πάνω στους καταλόγους. Εικόνα 3.6 Επιλέγοντας μία ιστοσελίδα από αυτές που εμφανίζονται (με διπλό κλικ) επανερχόμαστε πάλι στην προβολή σελίδας από όπου μπορούμε να την τροποποιήσουμε 3.2.3 Προβολή Πλοήγησης (Navigation View) Η προβολή αυτή χρησιμοποιείται πιο συχνά, κατά την διαδικασία δημιουργίας των σελίδων μας. Με αυτή την προβολή μπορούμε να δούμε σε δενδρική μορφή τη δομή των ιστοσελίδων μας και να προσθέσουμε, τροποποιήσουμε ή διαγράψουμε κάποια συγκεκριμένη ιστοσελίδα.

Εικόνα 3.7 Προβολή πλοήγησης 3.2.4 Προβολή υπερσυνδέσμων (Hyperlinks View) Η προβολή αυτή μας δείχνει τους υπερσυνδέσμους που βρίσκονται σε κάθε σελίδα του site μας. Στο κέντρο της οθόνης εμφανίζεται η επιλεγμένη σελίδα μας, έχοντας στα αριστερά της τις σελίδες, που την περιέχουν σαν σύνδεσμο και στα δεξιά της τις σελίδες, που η ίδια περιέχει σαν συνδέσμους. Τα βελάκια, που έχουν κατεύθυνση από τις σελίδες αριστερά (που περιέχουν συνδέσμους προς την τρέχουσα επιλεγμένη σελίδα) προς την κεντρική σελίδα και από αυτήν σελίδα προς τις σελίδες δεξιά (που περιέχονται σαν υπερσύνδεσμοι στην τρέχουσα σελίδα) μας δίνουν μια γραφική άποψη της εργασίας μας.

Εικόνα 3.8 Προβολή υπερσυνδέσμων 3.2.5 Προβολή διεργασιών (Tasks View) Σε αυτή την προβολή το FrontPage μας δίνει την δυνατότητα να έχουμε στην διάθεσή μας σε μορφή λίστας τις εργασίες, που χρειάζονται για να ολοκληρώσουμε την δημιουργία του web site μας. Για να προσθέσουμε μια διεργασία στην λίστα μας θα πρέπει να εκτελέσουμε την επιλογή File New Task... Το πλαίσιο διαλόγου που εμφανίζεται περιέχει τα ακόλουθα στοιχεία: 3.3 Εργασίες στην Προβολή Πλοήγησης Έχοντας επιλέξει την προβολή πλοήγησης εμφανίζεται το web-site μας σε γραφική μορφή. Εμφανίζονται, σε έναν γραφικό χάρτη, οι σελίδες που περιέχονται στο site μας και μάλιστα με μια ιεραρχική δομή. Στον χώρο αυτό γίνεται η σχεδίαση της δομής των σελίδων που θα αποτελέσουν το site μας. Οι σελίδες παρουσιάζονται σε μορφή παραλληλογράμμων,

συνδεδεμένων μεταξύ τους, περιέχοντας τον τίτλο της σελίδας στο κέντρο. Στην αρχή της ιεραρχίας βρίσκεται η αρχική μας σελίδα (Home Page), η οποία περιέχει τις υπόλοιπες σελίδες. Όπως παρατηρούμε στο παράδειγμά μας (Εικόνα 3.7) το παραλληλόγραμμο της αρχικής σελίδας στο κάτω μέρος περιέχει το σύμβολο πλην (ή αντίστοιχα συν), που θα μπορούσε να συρρικνώσει ή αντίστοιχα να εκτείνει, την γραφική απεικόνιση της ιεραρχικής δομής του web-site. Σε αυτό το σημείο προτείνουμε την ταυτόχρονη προβολή της λίστας φακέλων που απαρτίζουν το site μας στο αριστερό μέρος της οθόνης (Εικόνα 3.9). Αυτό επιτυγχάνεται από το μενού View Folder List. Μετά από αυτή την επιλογή στο αριστερό μέρος της οθόνης θα βλέπουμε τους φακέλους και τα αρχεία, που περιέχονται στην εργασία μας. Η μορφή και η διάταξη αυτή των φακέλων και των αρχείων είναι ίδια με την μορφή, που συναντήσαμε και περιγράψαμε αναλυτικότερα παραπάνω στην Προβολή Φακέλων. Να θυμηθούμε ότι όταν βρισκόμαστε σε έναν υποφάκελο, μπορούμε με την αντίστοιχη επιλογή της γραμμής εργαλείων (Up One Level) να ανέβουμε ένα επίπεδο πάνω. Εικόνα 3.9 Προβολή πλοήγησης με ταυτόχρονη προβολή των φακέλων και των αρχείων του site

3.3.1 Επεξεργασία του τίτλου μιας σελίδας Υπάρχουν διάφοροι τρόποι να αλλάξουμε τον τίτλο μιας σελίδας, ο πιο απλός είναι να επιλέξουμε την σελίδα και να κάνουμε απλό κλικ πάνω στον τίτλο της, ή με δεξί κλικ στην σελίδα και επιλογή της επιλογής Rename, ή τέλος με το πλήκτρο F2. Αφού έχουμε αλλάξει το όνομα κάνουμε κλικ σε οποιοδήποτε σημείο ή πατάμε το Enter για να ενεργοποιηθεί η αλλαγή μας. Εδώ θα πρέπει να αναφέρουμε, ότι με την αλλαγή του τίτλου μιας σελίδας δεν αλλάζουμε το πραγματικό όνομα της σελίδας, δηλαδή του αρχείου, που περιέχει την σελίδα αυτή. Αν για παράδειγμα αλλάξουμε τον τίτλο της αρχικής μας σελίδας (Εικόνα 3.9), το αρχείο που θα την περιέχει θα εξακολουθεί να ονομάζεται index.htm. 3.3.2 Εισαγωγή νέας σελίδας Για να εισάγουμε μια νέα σελίδα στο site μας επιλέγουμε πρώτα την σελίδα στην οποία θα είναι υποκείμενη η νέα σελίδα και κατόπιν εκτελούμε την επιλογή Εισαγωγής νέας σελίδας (New Page) από την γραμμή εργαλείων, ή από το μενού File New Page, ή τέλος με δεξί κλικ πάνω στην σελίδα και επιλογή New Page. Σε όλες τις περιπτώσεις δημιουργείται μια νέα σελίδα υποκείμενη στην επιλεγμένη, που είναι διαμορφωμένη ήδη με το προεπιλεγμένο Θέμα (Theme). Αν δεν έχουμε επιλεγμένη καμιά σελίδα, τότε η νέα σελίδα θα ανήκει στο ανώτατο επίπεδο (Τορ Page), όπου ανήκει και η αρχική μας σελίδα. 3.3.3 Μετακίνηση μιας σελίδας στο Site Όταν σε ένα site μια σελίδα δεν είναι στην σωστή θέση, τότε μπορούμε να την πάρουμε από το σημείο που βρίσκεται και να την τοποθετήσουμε σαν υποκείμενη σε κάποια άλλη, ή να την τοποθετήσουμε στο ανώτατο επίπεδο. Η διαδικασία της μετακίνησης γίνεται απλά με το να επιλέξουμε την συγκεκριμένη σελίδα και να την σύρουμε με το ποντίκι (αριστερό πλήκτρο κρατημένο πατημένο) στην σελίδα, που θα είναι υπερκείμενή της, ή στην αρχική σελίδα, αν θέλουμε να είναι στο ανώτατο επίπεδο. Ένας άλλος γνωστός τρόπος είναι αυτός της Αποκοπής (Cut) από την παρούσα θέση και της Επικόλλησης (Paste) στην νέα θέση. Οι γνωστές εργασίες της Αντιγραφής (Copy), Αποκοπής (Cut) και Επικόλλησης (Paste),