Transcript Document
Web Design HTML, Frontpage, DreamWeaver μέρος α
ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου
Στόχοι Κεφαλαίου
Σύγκριση μεταξύ Internet και του World Wide Web Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων HTML tags Περιγραφή Εργαλείων Δημιουργίας Ιστοσελίδων 2
Η ιστορία του WWW
Το WWW ξεκίνησε το 1989 από το Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών, (CERN) στην Ελβετία.
Βασικός του σκοπός ήταν να προσφέρει στους επιστήμονες ένα μέσο προκειμένου να ανταλλάσσουν στοιχεία επιστημονικά δεδομένα και μελέτες, μέσω του διαδικτύου.
Η όλη προσπάθεια στηρίχτηκε στην υλοποίηση ενός μέσου που θα επιτρέπει την σύνδεση μεταξύ διαφορετικών εγγράφων.
3
Η ιστορία του WWW
Το μέσο αυτό ονομάστηκε υπερκείμενο(Hyper text) Το 1994 κατασκευάστηκε το πρόγραμμα Mosaic, το οποίο έδινε την δυνατότητα στους χρήστες να προσπελαύνουν τις πληροφορίες που ήταν διαθέσιμες στο WWW με γραφικό τρόπο.
Στα επόμενα χρόνια το WWW έγινε το απόλυτο μέσο αναζήτησης πληροφοριών για εκατομμύρια χρήστες του διαδικτύου.
4
Το Διαδίκτυο και το WWW
Η πλατιά χρήση του WWW δημιούργησε σύγχυση σε πολλούς χρήστες οι οποίοι ταύτισαν το WWW με το Internet.
Στην πραγματικότητα όμως είναι δύο διαφορετικά πράγματα.
Το Ιnternet αποτελεί το φυσικό χώρο στον οποίο διασυνδέονται εκατομμύρια Η/Υ από όλο τον κόσμο, Το WWW αποτελεί το εργαλείο με το οποίο μπορούμε να οργανώσουμε και να διαχειριστούμε τον τεράστιο όγκο πληροφοριών που έχει συσσωρευτεί στο διαδίκτυο.
5
Το Διαδίκτυο ως εργαλείο
Αναζήτηση πληροφοριών. (Ειδήσεις, νέα, πρόσβαση σε διεθνείς οργανισμούς, σε βάσεις δεδομένων δημόσιας διοίκησης κλπ) Επικοινωνίας (ανταλλαγή μηνυμάτων, τηλεδιάσκεψη, τηλεφωνική συνομιλία, κλπ) Διενέργειας Συναλλαγών (Ηλεκτρονικό εμπόριο, ανταλλαγή αρχείων εγγράφων, τραπεζικές οικονομικές συναλλαγές κλπ) Δημιουργίας Διαδικτυακού Χώρου (προσωπικές σελίδες, εταιρικές τοποθεσίες κλπ) Διασκέδασης και Ψυχαγωγία (παιχνίδια, ραδιόφωνο, τηλεόραση κλπ).
6
World Wide Web
To Web περιλαμβάνει κατανεμημένη πληροφορία, καθώς και το σχετικό λογισμικό που χρησιμοποιεί τα δίκτυα ως μέσο ανταλλαγής αυτής της πληροφορίας.
Μία
σελίδα Web
είναι ένα κείμενο που περιέχει ή αναφέρεται σε διάφορα είδη δεδομένων, όπως κείμενο, εικόνες, γραφικά και προγράμματα Οι σελίδες Web περιέχουν συνδέσμους σε άλλες σελίδες τις οποίες ο χρήστης μπορεί να επισκεφθεί 7
The World Wide Web
Ένας
δικτυακός τόπος (Web Site)
είναι μία συλλογή σχετιζομένων σελίδων web To Internet είναι αυτό που επιτρέπει την επικοινωνία, αλλά το Web διευκολύνει την επικοινωνία, την κάνει παραγωγικότερη και περισσότερο διασκεδαστική 8
Πως κατασκευάζουμε ένα υπερκείμενο;
Για την περιγραφή ενός υπερκειμένου χρησιμοποιούμε μια ειδική γλώσσα την Hyper Text Markup Language (HTML).
Η γλώσσα αυτή επιτρέπει στον συγγραφέα να διαμορφώσει ένα κείμενο το οποίο θα παρέχει συνδέσμους με άλλα έγγραφα και διάφορα αρχεία 9
Πως κατασκευάζουμε ένα υπερκείμενο;
Τα υπερκείμενα που βρίσκονται στο WWW ονομάζονται ιστοσελίδες (web pages).
Το σύνολο των ιστοσελίδων αποτελούν το site ( δικτυακός τόπος).
Τα προγράμματα τα οποία απεικονίζουν τις ιστοσελίδες, επιτρέποντας μας την ξενάγηση μας στο διαδίκτυο ονομάζονται πλοηγοί ( Browsers), Π.χ Netscape, Internet Explorer, Mozzila, Opera 10
Web Browser
Ένας
browser
είναι το λογισμικό που στέλνει μία αίτηση για τη σελίδα Web που επιθυμούμε σε ένα ειδικό υπολογιστή Μόλις έρθει η σελίδα, την επιδεικνύει στην οθόνη Συχνά λέμε ότι επισκεπτόμαστε ένα δικτυακό τόπο, ως να είμασταν πράγματι εκεί Στην πραγματικότητα, προσδιορίζουμε την πληροφορία που επιθυμούμε,και αυτή έρχεται σε εμάς 11
Web Browser
Ο υπολογιστής που ανταποκρίνεται στις αιτήσεις για σελίδες Web λέγεται
Web server
Mία διεύθυνση Web είναι το κύριο μέρος του
Uniform Resource Locator (URL)
σε όλο τον κόσμο που προσδιορίζει την σελίδα που έχετε επιλέξει, ανάμεσα σε όλες τις σελίδες poy είναι διαθέσιμες 12
Φυλλομετρητής Web (Web Browser)
Σχήμα 16.2
Ένας φυλλομετρητής που αιτήται και λαμβάνει μία σελίδα web
13
Browsers: Internet Explorer
14
HTML
Οι σελίδες WEB γράφονται σε μία γλώσσα που λέγεται
Hypertext Markup Language, HTML
O όρος αυτό.
markup language
πρωτόγονα σύμβολα της γλώσσα έχουν τη μορφή των
tags,
δηλώνει ότι τα τα οποία βάζουμε σε ένα κείμενο για την επισημείωση της πληροφορίας που είναι αποθηκευμένη σε ή 15
HTML
Σχήμα 16.2
Ένα επισημειωμένο κείμενο
16
HTML
Σχήμα 16.3
H σελίδα Student Dynamics στον Netscape Navigator
17
HTML
Το κείμενο HTML που αντιστοιχεί στην προηγούμενη σελίδα
18
HTML
Τα tags περικλείονται από το μικρότερο και μεγαλύτερο < > Λέξεις όπως τα HEAD, TITLE, και BODY λέγονται elements και προσδιορίζουν τον τύπο του tag Tα tags, συχνά υπάρχουν ανά ζεύγη, π.χ. υπάρχει το αρχικό tag και το tag τέλους το 19
HTML
O browser, προσδιορίζει τον τρόπο εμφάνισης μίας σελίδας βασισμένος στα tags Αγνοεί τον τρόπο μορφοποίησης του HTML, δηλαδή τα enter, τα επιπλέον κενά και τις κενές γραμμές Λαμβάνει υπ’όψιν το πλάτος και το ύψος του παραθύρου του browser Εάν αλλάξετε το μέγεθος του παραθύρου τα περιεχόμενα της Web σελίδας θα αλλάξουν ώστε να προσαρμοστούν στο νέο μέγεθος 20
B ασικά tags στην HTML
Τα tags (
. . .
) δηλώνουν κείμενο που αποτελεί ξεχωριστεί παράγραφο.Τα tags (
B ασικά tags στην HTML β’
Τα elements Β, Ι, U δηλώνουν ότι το περικλειόμενο κείμενο θα πρέπει να είναι σε μορφή bold, italic ή υπογραμμισμένο Το tag
χαράσσει μία οριζόντια γραμμή κατά μήκος της σελίδας 22
B ασικά tags στην HTML γ’
Αν θέλω να δημιουργήσω μία λίστα στοιχείων: Χρησιμοποιώ το UL το οποίο δηλώνει την μη διατεταγμένη λίστα, και το LI αναπαριστά ένα στοιχείο της λίστας Διάφορα elements χρησιμοποιούνται για να δηλώσουν επικεφαλίδες σε ένα κείμενο: Υπάρχουν έξι προκαθορισμένα elements επικεφαλίδων στην HTML: H1, H2, H3, H4, H5 και H6 23
Εικόνες και σύνδεσμοι
Πολλά tags μπορούν να περιέχουν επιπλέον πληροφορίες που δηλώνουν πως η περικλειόμενη πληροφορία πρέπει να επιδειχθεί Μία εικόνα μπορεί να ενσωματωθεί σε ένα Web κείμενο με τη χρήση του στοιχείου (element) IMG, το οποίο έχει ως ιδιότητα (attribute) το αρχείο που θα επιδείξει 24
Εικόνες και σύνδεσμοι ( συνέχεια)
Ένας σύνδεσμος προσδιορίζεται από το στοιχείo A, που σημαίνει anchor To tag περιέχει την ιδιότητα που λέγεται HREF, και προσδιορίζει το URL του κειμένου στόχος Παράδειγμα Documentation Central! 25
Διαδραστικές σελίδες Web
Όταν πρωτο-σχεδιάστηκε η HTML, δεν υπήρχε τρόπος αλληλεπίδρασης με την πληροφορία και τις εικόνες μίας σελίδας Web Οι χρήστες επιθυμούσαν μία δυναμικότερη συμπεριφορά από το Web, αυτό είχε σαν συνέπεια την ανάπτυξη νέων τεχνολογιών που θα την εξυπηρετούσαν Πολλές από αυτές τις ιδέες προήλθαν από την τότε νέα γλώσσα προγραμματισμού Java 26
Java Applets
Ένα
Java applet
είναι ένα πρόγραμμα που σχεδιάστηκε ώστε να ενσωματώνεται σε ένα κείμενο HTML Ένα Java applet μεταφέρεται από τον Web server σε αυτόν που θέλει να τρέξει το πρόγραμμα Για να ενσωματώσω ένα applet σε κώδικα HTML, χρησιμοποιώ το tag APPLET 27
Java Applets
O browser έχει ένα ενσωματωμένο διερμηνέα που εκτελεί το applet, επιτρέποντας στον χρήστη να αλληλεπιδρά με αυτό Υπάρχουν όμως δυσκολίες… Πως μπορεί να εκτελείται ένα πρόγραμμα που γράφηκε σε αν τύπο υπολογιστή σε πολλούς άλλους υπολογιστές 28
Java Applets
Τα προγράμματα Java μετατρέπονται σε Bytecode, που είναι μία αναπαράσταση χαμηλού επιπέδου, αλλά
δεν
είναι κώδικας μηχανής που αφορά μια συγκεκριμένη KME Τα Java applets έχουν περιορισμούς ασφαλείας Για παράδειγμα, ένα Java applet δεν μπορεί να προσπελάsει τοπικά αρχεία, ή να αλλάξει τη διαμόρφωση του υπολογιστή (system settings) 29
Σελίδες Java Server
Μία Java Server Page (JSP), είναι μία σελίδα Web που έχει ενσωματωμένα
JSP scriptlets
Ένα scriptlet είναι ένα μικρό κομμάτι εκτελέσιμου κώδικα που υπάρχει μέσα σε ένα κείμενο HTML 30
Σελίδες Java Server
Ένα JSP scriptlet περικλείεται σε ειδικά tags που αρχίζουν με το <% και τελειώνουν με το %> Τα JSP scriptlets, είναι μία πλήρης γλώσσα προγραμματισμού
σελίδα 488
31
Java Server Pages
Τα JSPs εκτελούνται στον server (όπου βρίσκεται και η σχετική σελίδα) Τι στιγμή που η σελίδα φθάσει στον υπολογιστή σας, όλη η επεξεργασία έχει ήδη ολοκληρωθεί στο server. Εσείς λαμβάνετε μία σελίδα (που έχει δημιουργηθεί δυναμικά στον server) Τα JSPs είναι ιδιαίτερα χρήσιμα για το συσχετισμό μεταξύ μίας σελίδας Web με μία βάση δεδομένων 32
XML
Η HTML έχει προκαθορισμένο σύνολο από tags, και κάθε tag έχει συγκεκριμένη σημασία Τα tags της HTML δεν περιγράφουν το πραγματικό περιεχόμενο ενός κειμένου Η
eXtensible Markup Language (XML),
επιτρέπει στον δημιουργό ενός κειμένου να περιγράψει τα περιεχόμενα του κειμένου με ένα σύνολο δικών του tag 33
XML
H XML είναι μία μεταγλώσσα Μία
μεταγλώσσα
γλώσσες.
είναι μία γλώσσα για μιλήσουμε για, ή να ορίσουμε άλλες 34
XML
Όπως στην HTML, έτσι και στην XML το κείμενο έχει επισημειωμένα δεδομένα
Κειμενο XML που περιέχει διάφορα δεδομένα για βιβλία
35
XML
Document Type Definition (DTD):
είναι μία προδιαγραφή της οργάνωσης του κειμένου.
Η δομή ενός XML περιγράφεται από το σχετικό κείμενο DTD
Το κείμενο DTD που αντιστοιχεί στο κείμενο XML για τα βιβλία
36
XML
XML προσδιορίζεται ο τρόπος που αυτά θα φανούν στην έξοδο.
είναι τρόπος οργάνωσης δεδομένων, χωρίς να
eXtensible Stylesheet Language (or XSL):
γλώσσα για τον ορισμό μετασχηματισμών κειμένων XML σε κείμενα διαφόρων μορφών Μία
Σχήμα 16.7
κείμενο XML μπορεί να μετραπεί σε πολλές μορφές εξόδου Ένα
Μεταφορά Αρχέιων από τον Η-Υ στον WebServer
1. Retrieve file(s) FTP or Web Browser 2. Open file(s), 3. Edit file(s), 4. Save file(s) Dreamweaver or other editor Desktop Web Server 5. Upload file(s) FTP
38
Common Web Page Attributes and Features
Page and text color Link to other web pages Tables Graphics Sound, video 39
More Attributes and Features
JavaScripts and interactive behaviors Interactive images - rollover image, etc.
Media - Flash, applet, plugins, etc.
Dynamic page and database interaction ASP, PHP, etc.
Forms and CGI 40
Some General Guidelines of Basic Web Page Design
Use of a table(s) to organize and hold information. Different cells contain different types of information (directions, pictures, sounds, links to URLs, etc. Table boundaries can be transparent. 41
Guidelines - Continued
Selection of fonts
Serif fonts versus Sans-serif fonts Serif fonts have thin lines and feet such as
Times
Sans-serif fonts have even lines and no feet such as
Geneva
Normally, Sans-serif fonts are easier to read on web pages.
42
Guidelines - Continued
Be careful about web page color - avoid putting more than 5 colors on one page, or not enough contrast in background and text.
Graphics are good, but don’t over-use them Consider file size and download time Accessibility issues - at a minimum, provide alternative text for pictures 43
Word Processing vs. Web
On Web line breaks come in different sizes No tabs Extra spaces between words need coding 44
Word Processing vs. Web,
continued
Same Web page appears differently depending upon monitor, Web browser & operating system Limited number of “safe” fonts & colors 45