Εισαγωγή στο Dreamweaver. Σταύρος Πολυβίου

Transcript

1 Εισαγωγή στο Dreamweaver Σταύρος Πολυβίου

2 Σχέδιο µαθήµατος Γενική εισαγωγή Τί είναι το Dreamweaver Τί είναι η XHTML ηµιουργία µίας απλής σελίδας µε πίνακα Τοποθέτηση πίνακα µε το ανάρτηµα (tag) <center> Προβλήµατα Μικρή εισαγωγή στο CSS Τοποθέτηση πίνακα µε τοανάρτηµα <div> και το CSS Προβλήµατα Τοποθέτηση πίνακα µε το CSS για τη διασφάλιση της ορθής απόδοσης της σελίδας από διάφορους φυλλοµετρητές ηµιουργία και χρήση σχεδιότυπων (templates) Οµαδική συγγραφή, συντονισµός µε εξυπηρετητή/συνεργάτες Για περισσότερες πληροφορίες...

3 Τί είναι το Dreamweaver Περιβάλλον συγγραφής στατικών ή δυναµικών σελίδων Υποστηρίζει αρκετές τεχνολογίες όπως JSP, PHP, ASP, ColdFusion κ.α. Τόσο ο κώδικας, όσοκαιηεµφάνιση των σελίδων µπορούν να επιθεωρηθούν Συντονισµός της µηχανής υλοποίησης µε τον εξυπηρετητή δοκιµών ή των εξυπηρετητή δηµοσίευσης ιευκόλυνση συνεργασίας µε άλλους προγραµµατιστές/σχεδιαστές (check in/check out) Και πολλά άλλα...

4 Τί είναι η XHTML Τα αρχικά σηµαίνουν extensible Hypertext Markup Language (Επεκτάσιµη Γλώσσα Υπερκειµενικής Σήµανσης) ΣίγουραθαέχετεακούσειγιατηνHTML (Γλώσσα Υπερκειµενικής Σήµανσης) Η XHTML είναι µία πιο καθαρή έκδοση της HTML µε στόχο το διαχωρισµό της δοµής µίας σελίδας από την εµφανισή της (περισσότερα γι αυτο στη συνέχεια...)

5 Γλώσσες σήµανσης Προέκυψαν από τον τοµέα της στοιχειοθέτησης εγγράφων (typesetting) Το κέιµενο προς εκτύπωση σχολιαζόταν (annotated) µε αναρτήµατα (tags) τα οποία υποδηλούσαν τα σηµεία ώπου έπρεπε να αλλάξει λ.χ. η γραµµατοσειράήτοχρώµα στο εκτυπωµένο κείµενο Για την ηλεκτρονική στοιχειοθέτηση εγγράφων δηµιουργήθηκε η SGML (Πρότυπη Γλώσσα Γενικευµένης Σήµανσης )

6 Γλώσσες σήµανσης (2) Στην πραγµατικότητα η SGML είναι µία µέτα-γλώσσα (metalanguage) για τη δηµιουργία εξειδικευµένων γλωσσών σήµανσης για συγκεκριµένες εφαρµογές Η HTML είναι µία τέτοια γλώσσα για τη δηµιουργία υπερκειµένων Σε µία σωστή γλώσσα σήµανσης τα αναρτήµατα υποδηλώνουν το ρόλο του στοιχείου το οποίο περιγράφουν π.χ. Τίτλος, Επικεφαλίδα κ.ο.κ. Για τη στοιχειοθέτηση του εγγράφου χρησιµοποιείται ξεχωριστό φύλλο τεχνοτροπίας (style sheet) Π.χ. Οι τίτλοι εµφανίζονται σε γραµµατοσειρά Arial µεγέθους 14 pt

7 Γλώσσες σήµανσης (3) υστυχώς κατά καιρούς η HTML επεκτάθηκε από τους κατασκευαστές φυλλοµετρητών µε τρόπο ανεξέλεγκτο και µε την πρόσµιξη αναρτηµάτων που σχετίζονταν µε τηνεµφάνιση και όχι µε τηδοµή των ιστοσελίδων Η XML (Επεκτάσιµη Γλώσσα Σήµανσης) είναι µία απλοποιηµένη σε σχέση µε τηνsgml µέτα-γλώσσα για τη δηµιουργία γλωσσών σήµανσης για την ηλεκτρονική ανταλλαγή ή δηµοσίευση πληροφοριών Η XHTML είναι µία αναθεωρηµένηέκδοσητηςhtml µε µόνο δοµικά στοιχεία και βασισµένη πλέον στην XML

8 Η διεπιφάνεια του Dreamweaver

9 Με τα βελάκια µπορούµε να συµπτύξουµε ήνα αναπτύξουµε ταδιάφορα πλάνα. Σελίδες πάνω στις οποίες έχουµε δουλέψει πρόσφατα. Επιλογές γύρω από τον τύπο της σελίδας που θέλουµε να υλοποιήσουµε. Απόαυτήτηλίστα επιλέγουµε τονιστιακό χώρο πάνω στον οποίο θα δουλέψουµε. Απόαυτήτηλίσταεπιλέγουµε το κατά πόσο θέλουµε να δούµε τα αρχεία στον υπολογιστή υλοποίησης ή στον εξυπηρετητή δηµοσίευσης ή δοκιµής. Μπορούµε ακόµη να δούµε ολόκληρο τον ιστιακό χώρο διαγραµµατικά.

10 Επιλέγουµε τηδηµιουργία µίαςστατικήςσελίδαςhtml.

11 Αρχικό ανάρτηµα (start tag) για το στοιχείο (element) µε όνοµα html. Τελικό ανάρτηµα (end tag) για το στοιχείο (element) µε όνοµα html. Το στοιχείο body είναι εµφωλευµένο µέσα στο στοιχείο html. Το στοιχείο meta είναι κενό (empty element) γι αυτό και κλείνει χωρίς τελικό ανάρτηµα. Γνωρίσµατα (attributes) για το στοιχείο µε όνοµα meta.

12 Νόηµα στοιχείων <html>: περικλείει ολόκληρη τη σελίδα <head>: περικλείει ορισµένες πληροφορίες για τη σελίδα οι οποίες δεν εµφανίζονται στην οθόνη <body>: περικλείει το ορατό µέρος της σελίδας

13 Επιλέγουµε την προσθήκη ενός πίνακα στη σελίδα. Μεταφερόµαστε αυτόµατα στην όψη σχεδιασµού (design view), όπου βλέπουµε πως θα εµφανιστεί η σελίδα µας στην οθόνη του φυλλοµετρητή. Σε αυτό το παράθυρο καθορίζουµε τά χαρακτηριστικά του πίνακα.

14 Το συγκεκριµένο είναι µία αναφορά σε οντότητα (entity reference). Υποδηλώνει την προσθήκη σε αυτό το σηµείο ενός nonbreaking space, ενός διαστήµατος δηλαδή το οποίο δεν επιτρέπει τη διάσπαση µίας γραµµής στο σηµείο που βρίσκεται. Τέτοιου είδους αναφορές γενικά χρησιµοποιούνται για να προσθέσουµε χαρακτήρες που είναι δεσµευµένοι στην HTML ή πουδεν υπάρχουν στο πληκτρολόγιο. Μεταφερόµαστε πίσω στην όψη κώδικα (code view), όπου βλέπουµε τονhtml κώδικα της σελίδας µας. Αυτός είναι ο κώδικας που πρόσθεσε ο Dreamweaver στο σηµείο που βρισκόταν ο δροµέας µας βάσει των επιλογών µας για το νέο πίνακα.

15 Εδώ βλέπουµε κάποιες πληροφορίες γύρω από τον πίνακα που είναι επιλεγµένος. Πατώντας τα βελάκια παίρνουµε ένα µενού επιλογών γύρω από ολόκληρο τον πίνακα ή την κάθε στήλη ξεχωριστά. Πίσω στην όψη σχεδιασµού (design view), βλέπουµε πως θα εµφανιστεί ο πίνακας στη σελίδα µας.

16 Στη διπλή όψη (split view), µπορούµε να δούµε τόσο τον κώδικα, όσο και την εµφάνιση της σελίδας µας.

17 Επιλέγοντας τον κώδικα του πίνακα επιλέγεται και ο ίδιος ο πίνακας στην όψη σχεδιασµού και αντίστροφα. Για το εκάστοτε επιλεγµένο στοιχείο πάνω στη σελίδα µας, ο επιθεωρητής χαρακτηριστικών (property inspector) εµφάνίζει τις κατάλληλες επιλογές.

18 Εδώ εντοπίζουµε οµαδοποιηµένα όλα τα αναρτήµατα της HTML. Επιλέγοντας αυτό το εικονίδιο, φέρνουµε στο προσκήνιο τον κατάλογο αναρτηµάτων (tag chooser)

19 Κάνοντας διπλό κλικ, επιλέγουµε τοανάρτηµα center. Κάνοντας κλικ εδώ παίρνουµε περισσότερες πληροφορίες για το επιλεγµένο ανάρτηµα. Το ανάρτηµα πουδιαλέξαµε περικλείει τώρα τον κώδικα που είχαµε προηγουµένως επιλέξει.

20 Επιλέγοντας αυτό το εικονίδιο, παίρνουµε µία λίστα από φυλλοµετρητές µε τους οποίους µπορούµε ναελέγξουµε τηνεµφάνιση της σελίδας µας. Για συντοµία πατάµε το πλήκτρο F12.

21 Το στοιχείο center όπως υποδηλεί το όνοµά του, τοποθετεί το περιεχόµενό του, στην προκειµένη περίπτωση τον πίνακα που είχαµε σχεδιάσει, στο κέντρο της σελίδας.

22 Προβλήµατα µε τοστοιχείο <center> Το ανάρτηµα αυτό υποδηλεί όχι το κέντρο της σελίδας από πλευρά δοµής αλλά τον τρόπο µε τον οποίο θα εµφανιστεί το τµήµα τηςσελίδαςτο οποίο περικλείει στην οθόνη Ας υποθέσουµε ότι θέλουµε να τοποθετούµε στο κέντρο της σελίδας τόσο τους τίτλους των διαφόρων τµηµάτων όσο και τις λεζάντες των εικόνων καθώς επίσης και τις ίδιες τις εικόνες Αν µετά αποφασίσουµε ναστοιχίσουµε αριστερά τους τίτλους; Αν θέλουµε οι λεζάντες επιπλέον να εµφανίζονται µε διαφορετική γραµµατοσειρά;

23 ιαδοχικά φύλλα τεχνοτροπίας (Cascading Style Sheets) Οι αποφάσεις που αφορούν την τεχνοτροπία της σελίδας συγκεντρώνονται σε ένα αρχείο ή σε συγκεκριµένα σηµεία της σελίδας Ξεχωριστό αρχείο: external style sheet Ενσωµατοµένες στη σελίδα: internal style sheet

24 Τρόποι επιλογής στοιχείων στο CSS Θυµηθείτε ότι το κάθε στοιχείο έχει κάποια χαρακτηριστικά (attributes) Βάσει της κλάσης του στοιχείου Μέσω του χαρακτηριστικού class Π.χ. Το κείµενο που περιέχεται σε κάθε γνώρισµα που ανήκει στην κλάση important να είναι µπλέ Βάσει της ταυτότητας του στοιχείου Μέσω του χαρακτηριστικού id

25 Θα µπορούσαµε να κεντράρουµε το περιεχόµενο του στοιχείου div µε το γνώρισµα align, ωστόσο είναι προτιµότερο να χρησιµοποιήσουµε ένα φύλλο τεχνοτροπίας (style sheet) για να διαχωρήσουµε τηδοµή της σελίδας από την εµφάνισή της. Το στοιχείο div είναι ο καλύτερος τρόπος για να διαχωρίσουµε διάφορατµήµατα του κειµένου µας.

26 Όταν επιχειρήσουµε να προσθέσουµε τοστοιχείο div στον κώδικά µας εµφανίζεται το παράθυρο καθορισµού των γνωρισµάτων για το εν λόγω στοιχείο. Σε αυτή την κατηγορία θα βρούµε τα γνωρίσµατα που έχουν σχέση µε τα φύλλα τεχνοτροπίας. Σε αυτό το παράδειγµα επιλέγουµε να καταχωρήσουµε το συγκεκριµένο στοιχείο κάτω από την κλάση centered.

27 Το γνώρισµα class περιέχει το όνοµα της κλάσης στην οποία εντάξαµε το συγκεκριµένο div στοιχείο. Θα πρέπει τώρα να συσχετίσουµε αυτή την κλάση µε κάποιο κανόνα τεχνοτροπίας (style).

28 Πατώντας Ctrl-N εµφανίζεται ο διάλογος δηµιουργίας καινούργιου αρχείου. Επιλέγουµε τοντύπο αρχείου CSS.

29 Επιλέγοντας αυτό το εικονίδιο µπορούµε να δηµιουργήσουµε ένα νέο κανόνα µέσα στο παρόν φύλλο τεχνοτροπίας. Ονοµάζοντας τον κανόνα χρησιµοποιούµε το όνοµα της κλάσης για την οποία ισχύει αφού πρώτα βάλουµε µία τελεία. Αυτό ισχύει για όλους τους κανόνες που αφορούν κλάσεις. Παράλληλα προσδιορίζουµε ότιο κανόνας που θα δηµιουργήσουµε αφορά µία κλάση στοιχείων και όχι ένα τύπο στοιχείων ή κάποιο συγκεκριµένο στοιχείο.

30 Στοπαράθυροπου εµφανίζεται βρίσκουµε κατηγοριοποιηµένα όλαταστοιχείατης εµφάνισης ενός στοιχείου τα οποία µπορεί να καθορίσουµε βάσει ενός κανόνα. Ο κανόνας που προσθέτουµε αφορά το στοιχείο εµφάνισης text-align που καθορίζει τη στοίχιση των περιεχοµένων ενός στοιχείου. Επιλέγουµε τηντιµή center για τη στοίχιση.

31 Έχουµε φυλάξει το φύλλο τεχνοτροπίας στο αρχείο my_style.css Θα πρέπει τώρα να συσχετίσουµε τη σελίδα µας µε το φύλλο τεχνοτροπίας. Κάνουµε δεξί κλικ πάνω στη σελίδα, και απότοεµφανιζόµενο µενού κάνουµε τις εικονιζόµενες επιλογές.

32 Επιλέγουµε το κουµπί Attach

33 ιαλέγουµε την επιλογή link για τη χρήση external style sheet. Επιλέγουµε το κουµπί Browse Στοπαράθυροπου εµφανίζεται επιλέγουµε το φύλλο που δηµιουργήσαµε.

34 Προβλήµατα συµβατότητας µεταξύ φυλλοµετρητών Ως σχεδιαστές ή προγραµµατιστές ιστοσελίδων θα πρέπει να συνηθίσετε στην ιδέα ότι η σελίδα σας πιθανόν να µην εµφανίζεται το ίδιο σε όλους τους φυλλοµετρητές ιαφορετικοί κατασκευαστές δυνατόν να ερµηνεύσουν διαφορετικά διάφορα κοµµάτια ενός προτύπου όπως το CSS Για λόγους συµβατότητας µε προηγούµες εκδόσεις µπορεί συνειδητά να επιλέξουν την παραβίαση του προτύπου υνατό ακόµη να µην έχουν υλοποιήσει ολόκληρο το πρότυπο Στο δικό µας παράδειγµα µερικοί φυλλοµετρητές δε θα µας εµφανίσουν τον πίνακα στο κέντρο της σελίδας Για ασφάλεια, χρειάζεται να καθορίσουµε επιπρόσθετους κανόνες που να διασφαλίζουν την ορθή εµφανιση της σελίδας µας Καλό θα είναι να ελέγχετε τη σελίδα σας µε όσοτοδυνατό περισσότερους φυλλοµετρητές

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

36 Όταν επιχειρήσουµε να δακτυλογραφήσουµε το όνοµα της κλάσης στην οποία ανήκει το στοιχείο µας, εµφανίζετάι µία λίστα µε όλους τους κανόνες που αφορούν κλάσεις στο φύλλο τεχνοτροπίας που έχουµε καθορίσει για τη σελίδα µας. Προσέξτε το σύνδεσµο που συνδέει τη σελίδα µε το εξωτερικό φύλλο τεχνοτροπίας.

37 Με το CSS µπορούµε επίσης να καθορίσουµε ταχρώµατα µε ταοποίαθαεµφανιστεί κάποιο στοιχείο στην οθόνη. Ο Dreamweaver µας βοηθά δίδοντάς µας µία παλέτα µε τα 256 web safe χρώµατα, χρώµατα που µπορούν να εµφανιστούν σε όλα τα λειτουργικά συστήµατα.

38 Σχεδιότυπα (templates) Τα σχεδιότυπα µας επιτρέπουν να δηµιουργήσουµε ιστιακούς τόπους µε πολλές σελίδες οι οποίες να έχουν µεγάλη συνέπεια και οµοιοµορφία µεταξύ τους Επιπλέον, ως σχεδιαστές και προγραµµατιστές µπορούµε να δώσουµε τη δυνατότητα σε κάποιον που δεν έχει απαράιτητα κάποια πείρα µε την HTML να δηµιουργήσει µία επαγγελµατική σελίδα Το σχεδιότυπο είναι µία κανονική σελίδα της οποίας κάποια µέρη µπορεί να τροποποιηθούν, ενώ άλλα παραµένουν προστατευµένα Αποφεύγονται έτσι οι αθέµιτες αλλαγές σε βασικά σηµεία της σελίδας

39 Για να µετατρέψουµε τη σελίδα µας σε σχεδιότυπο, επιλέγουµε την ανάλογη επιλογή από το µενού που κρύβεται πίσω από αυτό το εικονίδιο.

40 ίνουµε έναόνοµα στο καινούργιο σχεδιότυπο.

41 Προσέξτε την αλλαγή στην επέκταση που υποδηλεί ότι το παρόν αρχείο είναι σχεδιότυπο και όχι σελίδα. Τοποθετούµε το δροµέα µας στα σηµεία που θέλουµε να επιτρέψουµε αλλαγέςστη σελίδα µας και τα σηµειώνουµε µε την κατάλληλη επιλογή από το µενού.

42 Κάθε εγγράψιµο σηµείο (editable region) του σχεδιότυπού µας θα πρέπει να έχει ένα µοναδικό όνοµα.

43 Εδώ βλέπουµε πως ο Dreamweaver σηµειώνει την έκταση της εγγράψιµης περιοχής.

44 Το σχεδιότυπο που έχουµε δηµιουργήσει εµφανίζεται πλέον ως ένα από τα στοιχεία (assets) του ιστιακού µας χώρου.

45 Κάνοντας δεξί κλικ πάνω στο σχεδιότυπο µπορούµε να δηµιουργήσουµε καινούργιες σελίδες που να βασίζονται σε αυτό.

46 Στη νέα σελίδα µόνο τα σηµεία που δεν εµφανίζονται µε γκρίζο χρώµα µπορούν να τροποποιηθούν. ΠΡΟΣΟΧΗ: µόνο ο Dreamweaver αναγνωρίζει και διαχειρίζεται σωστά τα σχεδιότυπά του.

47 Συντονισµός µε άλλους προγραµµατιστές και µε τον εξυπηρετητή Καλό είναι να υλοποιούµε και να δοκιµάζουµε αλλαγές σε µία ιστοσελίδα σε διαφορετικό υπολογιστή από αυτόν που παίζει το ρόλο του εξυπηρετητή µέσω του οποίου δηµοσιεύεται η σελίδα Πως συγχρονίζουµε τις αλλαγές στον υπολογιστή υλοποίησης µε ταπεριεχόµενα του εξυπηρετητή; Πολλές φορές χρειάζεται να συνεργαστούµε µε άλλους προγραµατιστές για την υλοποίηση ενός µεγάλου ιστιακού τόπου Τί γίνεται όταν δύο προγραµµατιστές επιχειρήσουν να τροποποιήσουν την ίδια σελίδα;

48 Από το µενού επιλογής ιστιακού τόπου επιλέγουµε τη διαχείριση τόπων.

49 Επιλέγουµε τον ιστιακό τόπο για τον οποίο θέλουµε να διευθετήσουµε τις λεπτοµέρειες που αφορούν στη δηµοσίευση του τόπου και τη συνεργασία µε άλλους προγραµµατιστές.

50 Κάτω από τον στηλοθέτη (tab) Advanced επιλέγουµε την κατηγορία Remote Info. Πρωτόκολλο επικοινωνίας µε τον εξυπηρετητή. ιεύθυνση εξυπηρετητή. Ευρετήριο ρίζας (root directory) για τον ιστιακό τόπο στον εξυπηρετητή. Όνοµα χρήστη και κωδικός πρόσβασης.

51 Με αυτή την επιλογή µπορούµε ναδιασφαλίσουµε αποκλειστική πρόσβαση σε ένααρχείοτοοποίο τροποποιούµε. Τα στοιχεία µας είναι απαραίτητα ούτως ώστε κάποιος άλλος προγραµµατιστής που επιθυµεί να τροποποιήσει ένα αρχείο που κατέχουµε ήδη εµέις να µπορεί να επικοινωνήσει µαζί µας.

52 Μη ξεχνάτε την επιλογή που µας επιτρέπει να δούµε τα αρχεία που βρίσκονται τόσο στον υπολογιστή υλοποίησης όσο και στο εξυπηρετητή. Τοποθέτηση αποκλειστικού αρχείου στον εξυπηρετητή (Check In). Απόκτηση αρχείου από τον εξυπηρετητή (Get File). Αποκλειστική απόκτηση αρχείου από τον εξυπηρετητή (Check Out). Τοποθέτηση αρχείου στον εξυπηρετητή (Put File).

53 Για περισσότερες πληροφορίες