Embed Size (px)
Citation preview
Εισαγωγή στο Dreamweaver
Σταύρος Πολυβίου
Σχέδιο µαθήµατοςΓενική εισαγωγή
Τί είναι το DreamweaverΤί είναι η XHTML
∆ηµιουργία µίας απλής σελίδας µε πίνακαΤοποθέτηση πίνακα µε το ανάρτηµα (tag) <center>
ΠροβλήµαταΜικρή εισαγωγή στο CSSΤοποθέτηση πίνακα µε το ανάρτηµα <div> και το CSS
ΠροβλήµαταΤοποθέτηση πίνακα µε το CSS για τη διασφάλιση της ορθής απόδοσηςτης σελίδας από διάφορους φυλλοµετρητές∆ηµιουργία και χρήση σχεδιότυπων (templates)Οµαδική συγγραφή, συντονισµός µε εξυπηρετητή/συνεργάτεςΓια περισσότερες πληροφορίες...
Τί είναι το DreamweaverΠεριβάλλον συγγραφής στατικών ή δυναµικώνσελίδωνΥποστηρίζει αρκετές τεχνολογίες όπως JSP, PHP, ASP, ColdFusion κ.α.Τόσο ο κώδικας, όσο και η εµφάνιση των σελίδωνµπορούν να επιθεωρηθούνΣυντονισµός της µηχανής υλοποίησης µε τονεξυπηρετητή δοκιµών ή των εξυπηρετητήδηµοσίευσης∆ιευκόλυνση συνεργασίας µε άλλουςπρογραµµατιστές/σχεδιαστές (check in/check out)Και πολλά άλλα...
Τί είναι η XHTML
Τα αρχικά σηµαίνουν eXtensible Hypertext Markup Language (Επεκτάσιµη ΓλώσσαΥπερκειµενικής Σήµανσης)Σίγουρα θα έχετε ακούσει για την HTML (Γλώσσα Υπερκειµενικής Σήµανσης)
Η XHTML είναι µία πιο ‘καθαρή’ έκδοση της HTML µε στόχο το διαχωρισµό της δοµής µίας σελίδαςαπό την εµφανισή της (περισσότερα γι’ αυτο στησυνέχεια...)
Γλώσσες σήµανσηςΠροέκυψαν από τον τοµέα τηςστοιχειοθέτησης εγγράφων (typesetting)Το κέιµενο προς εκτύπωση σχολιαζόταν(annotated) µε αναρτήµατα (tags) τα οποίαυποδηλούσαν τα σηµεία ώπου έπρεπε νααλλάξει λ.χ. η γραµµατοσειρά ή το χρώµαστο εκτυπωµένο κείµενοΓια την ηλεκτρονική στοιχειοθέτησηεγγράφων δηµιουργήθηκε η SGML (ΠρότυπηΓλώσσα Γενικευµένης Σήµανσης )
Γλώσσες σήµανσης (2)Στην πραγµατικότητα η SGML είναι µία µέτα-γλώσσα(metalanguage) για τη δηµιουργία εξειδικευµένωνγλωσσών σήµανσης για συγκεκριµένες εφαρµογέςΗ HTML είναι µία τέτοια γλώσσα για τη δηµιουργίαυπερκειµένωνΣε µία σωστή γλώσσα σήµανσης τα αναρτήµαταυποδηλώνουν το ρόλο του στοιχείου το οποίοπεριγράφουν π.χ. ‘Τίτλος’, ‘Επικεφαλίδα’ κ.ο.κ.Για τη στοιχειοθέτηση του εγγράφου χρησιµοποιείταιξεχωριστό φύλλο τεχνοτροπίας (style sheet)
Π.χ. Οι τίτλοι εµφανίζονται σε γραµµατοσειρά Arial µεγέθους14 pt
Γλώσσες σήµανσης (3)∆υστυχώς κατά καιρούς η HTML επεκτάθηκε απότους κατασκευαστές φυλλοµετρητών µε τρόποανεξέλεγκτο και µε την πρόσµιξη αναρτηµάτων πουσχετίζονταν µε την εµφάνιση και όχι µε τη δοµή τωνιστοσελίδωνΗ XML (Επεκτάσιµη Γλώσσα Σήµανσης) είναι µίααπλοποιηµένη σε σχέση µε την SGML µέτα-γλώσσαγια τη δηµιουργία γλωσσών σήµανσης για τηνηλεκτρονική ανταλλαγή ή δηµοσίευση πληροφοριώνΗ XHTML είναι µία αναθεωρηµένη έκδοση της HTML µε µόνο δοµικά στοιχεία και βασισµένη πλέον στηνXML
Η διεπιφάνεια τουDreamweaver
Με τα βελάκια µπορούµενα συµπτύξουµε ή νααναπτύξουµε τα διάφοραπλάνα.
Από αυτή τη λίσταεπιλέγουµε τον ιστιακόχώρο πάνω στον οποίο θαδουλέψουµε.
Από αυτή τη λίστα επιλέγουµε το κατά πόσο θέλουµε ναδούµε τα αρχεία στον υπολογιστή υλοποίησης ή στονεξυπηρετητή δηµοσίευσης ή δοκιµής. Μπορούµε ακόµηνα δούµε ολόκληρο τον ιστιακό χώρο διαγραµµατικά.
Επιλογές γύρω από τοντύπο της σελίδας πουθέλουµε να υλοποιήσουµε.
Σελίδες πάνω στις οποίεςέχουµε δουλέψει πρόσφατα.
Επιλέγουµε τη δηµιουργίαµίας στατικής σελίδας HTML.
Αρχικό ανάρτηµα(start tag) για τοστοιχείο (element)µε όνοµα html.
Τελικό ανάρτηµα(end tag) για τοστοιχείο (element)µε όνοµα html.
Γνωρίσµατα (attributes) γιατο στοιχείο µε όνοµα meta.
Το στοιχείο metaείναι κενό (empty element) γι’ αυτόκαι ‘κλείνει’ χωρίςτελικό ανάρτηµα.
Το στοιχείο body είναιεµφωλευµένο µέσαστο στοιχείο html.
Νόηµα στοιχείων
<html>: περικλείει ολόκληρη τη σελίδα<head>: περικλείει ορισµένεςπληροφορίες για τη σελίδα οι οποίεςδεν εµφανίζονται στην οθόνη<body>: περικλείει το ορατό µέρος τηςσελίδας
Επιλέγουµε την προσθήκηενός πίνακα στη σελίδα.
Μεταφερόµαστε αυτόµατα στηνόψη σχεδιασµού (design view), όπου βλέπουµε πως θαεµφανιστεί η σελίδα µας στηνοθόνη του φυλλοµετρητή.
Σε αυτό το παράθυροκαθορίζουµε τάχαρακτηριστικά του πίνακα.
Μεταφερόµαστε πίσω στην όψηκώδικα (code view), όπουβλέπουµε τον HTML κώδικα τηςσελίδας µας.
Αυτός είναι ο κώδικας πουπρόσθεσε ο Dreamweaver στοσηµείο που βρισκόταν οδροµέας µας βάσει τωνεπιλογών µας για το νέο πίνακα.
Το συγκεκριµένο είναιµία αναφορά σεοντότητα (entity reference). Υποδηλώνει τηνπροσθήκη σε αυτό τοσηµείο ενός non-breaking space, ενόςδιαστήµατος δηλαδήτο οποίο δεν επιτρέπειτη διάσπαση µίαςγραµµής στο σηµείοπου βρίσκεται. Τέτοιου είδουςαναφορές γενικάχρησιµοποιούνται γιανα προσθέσουµεχαρακτήρες που είναιδεσµευµένοι στηνHTML ή που δενυπάρχουν στοπληκτρολόγιο.
Πίσω στην όψη σχεδιασµού (design view), βλέπουµε πως θα εµφανιστεί ο πίνακαςστη σελίδα µας.
Εδώ βλέπουµε κάποιεςπληροφορίες γύρω από τονπίνακα που είναι επιλεγµένος. Πατώντας τα βελάκια παίρνουµεένα µενού επιλογών γύρω απόολόκληρο τον πίνακα ή την κάθεστήλη ξεχωριστά.
Στη διπλή όψη (split view), µπορούµε ναδούµε τόσο τον κώδικα, όσο και τηνεµφάνιση της σελίδας µας.
Επιλέγοντας τονκώδικα τουπίνακα επιλέγεταικαι ο ίδιος οπίνακας στηνόψη σχεδιασµούκαι αντίστροφα.
Για το εκάστοτε επιλεγµένο στοιχείοπάνω στη σελίδα µας, οεπιθεωρητής χαρακτηριστικών(property inspector) εµφάνίζει τιςκατάλληλες επιλογές.
Επιλέγοντας αυτό τοεικονίδιο, φέρνουµε στοπροσκήνιο τον κατάλογοαναρτηµάτων (tag chooser)
Εδώ εντοπίζουµεοµαδοποιηµένα όλα τααναρτήµατα της HTML.
Κάνοντας διπλό κλικ, επιλέγουµε το ανάρτηµαcenter.
Το ανάρτηµα που διαλέξαµεπερικλείει τώρα τον κώδικαπου είχαµε προηγουµένωςεπιλέξει.
Κάνοντας κλικεδώ παίρνουµεπερισσότερεςπληροφορίες γιατο επιλεγµένοανάρτηµα.
Επιλέγοντας αυτό το εικονίδιο, παίρνουµε µίαλίστα από φυλλοµετρητές µε τους οποίουςµπορούµε να ελέγξουµε την εµφάνιση της σελίδαςµας. Για συντοµία πατάµε το πλήκτρο F12.
Το στοιχείο center όπως υποδηλεί το όνοµά του, τοποθετεί το περιεχόµενό του, στην προκειµένηπερίπτωση τον πίνακα που είχαµε σχεδιάσει, στοκέντρο της σελίδας.
Προβλήµατα µε το στοιχείο<center>
Το ανάρτηµα αυτό υποδηλεί όχι το κέντρο τηςσελίδας – από πλευρά δοµής – αλλά τον τρόπο µετον οποίο θα εµφανιστεί το τµήµα της σελίδας τοοποίο περικλείει στην οθόνηΑς υποθέσουµε ότι θέλουµε να τοποθετούµε στοκέντρο της σελίδας τόσο τους τίτλους των διαφόρωντµηµάτων όσο και τις λεζάντες των εικόνων καθώςεπίσης και τις ίδιες τις εικόνες
Αν µετά αποφασίσουµε να στοιχίσουµε αριστερά τουςτίτλους;Αν θέλουµε οι λεζάντες επιπλέον να εµφανίζονται µεδιαφορετική γραµµατοσειρά;
∆ιαδοχικά φύλλα τεχνοτροπίας(Cascading Style Sheets)
Οι αποφάσεις που αφορούν τηντεχνοτροπία της σελίδαςσυγκεντρώνονται σε ένα αρχείο ή σεσυγκεκριµένα σηµεία της σελίδαςΞεχωριστό αρχείο: external style sheetΕνσωµατοµένες στη σελίδα: internal stylesheet
Τρόποι επιλογής στοιχείωνστο CSS
Θυµηθείτε ότι το κάθε στοιχείο έχεικάποια χαρακτηριστικά (attributes)Βάσει της κλάσης του στοιχείουΜέσω του χαρακτηριστικού classΠ.χ. Το κείµενο που περιέχεται σε κάθεγνώρισµα που ανήκει στην κλάσηimportant να είναι µπλέ
Βάσει της ταυτότητας του στοιχείουΜέσω του χαρακτηριστικού idΠ χ Η συγκεκριµένη επικεφαλίδα να είναι
Το στοιχείο div είναι ο καλύτερος τρόπος για ναδιαχωρίσουµε διάφορα τµήµατα του κειµένου µας.
Θα µπορούσαµε να‘κεντράρουµε’ τοπεριεχόµενο τουστοιχείου div µε τογνώρισµα align, ωστόσο είναιπροτιµότερο ναχρησιµοποιήσουµε έναφύλλο τεχνοτροπίας(style sheet) για ναδιαχωρήσουµε τη δοµήτης σελίδας από τηνεµφάνισή της.
Όταν επιχειρήσουµε ναπροσθέσουµε το στοιχείοdiv στον κώδικά µαςεµφανίζεται το παράθυροκαθορισµού τωνγνωρισµάτων για το ενλόγω στοιχείο.
Σε αυτή την κατηγορίαθα βρούµε ταγνωρίσµατα που έχουνσχέση µε τα φύλλατεχνοτροπίας.
Σε αυτό το παράδειγµαεπιλέγουµε νακαταχωρήσουµε τοσυγκεκριµένο στοιχείοκάτω από την κλάσηcentered.
Το γνώρισµα classπεριέχει το όνοµα τηςκλάσης στην οποίαεντάξαµε τοσυγκεκριµένο div στοιχείο. Θα πρέπειτώρα να συσχετίσουµεαυτή την κλάση µεκάποιο κανόνατεχνοτροπίας (style).
Πατώντας Ctrl-Nεµφανίζεται ο διάλογοςδηµιουργίας καινούργιουαρχείου.
Επιλέγουµε τον τύποαρχείου CSS.
Επιλέγοντας αυτό το εικονίδιο µπορούµε ναδηµιουργήσουµε ένα νέο κανόνα µέσα στο παρόνφύλλο τεχνοτροπίας.
Ονοµάζοντας τονκανόναχρησιµοποιούµε τοόνοµα της κλάσης γιατην οποία ισχύειαφού πρώταβάλουµε µία τελεία. Αυτό ισχύει για όλουςτους κανόνες πουαφορούν κλάσεις.
Παράλληλαπροσδιορίζουµε ότι οκανόνας που θαδηµιουργήσουµεαφορά µία κλάσηστοιχείων και όχι ένατύπο στοιχείων ήκάποιο συγκεκριµένοστοιχείο.
Στο παράθυρο πουεµφανίζεταιβρίσκουµεκατηγοριοποιηµέναόλα τα στοιχεία τηςεµφάνισης ενόςστοιχείου τα οποίαµπορεί νακαθορίσουµε βάσειενός κανόνα.
Ο κανόνας πουπροσθέτουµε αφοράτο στοιχείοεµφάνισης ‘text-align’που καθορίζει τηστοίχιση τωνπεριεχοµένων ενόςστοιχείου.
Επιλέγουµε την τιµήcenter για τη στοίχιση.
Έχουµε φυλάξει το φύλλοτεχνοτροπίας στο αρχείο‘my_style.css’
Θα πρέπει τώρα νασυσχετίσουµε τησελίδα µας µε τοφύλλο τεχνοτροπίας.
Κάνουµε δεξί κλικπάνω στη σελίδα, καιαπό το εµφανιζόµενοµενού κάνουµε τιςεικονιζόµενεςεπιλογές.
Επιλέγουµε τοκουµπί Attach…
∆ιαλέγουµε τηνεπιλογή link για τηχρήση external style sheet.
Επιλέγουµε τοκουµπί Browse…
Στο παράθυρο πουεµφανίζεταιεπιλέγουµε το φύλλοπου δηµιουργήσαµε.
Προβλήµατα συµβατότηταςµεταξύ φυλλοµετρητών
Ως σχεδιαστές ή προγραµµατιστές ιστοσελίδων θα πρέπει νασυνηθίσετε στην ιδέα ότι η σελίδα σας πιθανόν να µηνεµφανίζεται το ίδιο σε όλους τους φυλλοµετρητές
∆ιαφορετικοί κατασκευαστές δυνατόν να ερµηνεύσουν διαφορετικάδιάφορα κοµµάτια ενός προτύπου όπως το CSSΓια λόγους συµβατότητας µε προηγούµες εκδόσεις µπορείσυνειδητά να επιλέξουν την παραβίαση του προτύπου∆υνατό ακόµη να µην έχουν υλοποιήσει ολόκληρο το πρότυπο
Στο δικό µας παράδειγµα µερικοί φυλλοµετρητές δε θα µαςεµφανίσουν τον πίνακα στο κέντρο της σελίδαςΓια ασφάλεια, χρειάζεται να καθορίσουµε επιπρόσθετουςκανόνες που να διασφαλίζουν την ορθή εµφανιση της σελίδαςµαςΚαλό θα είναι να ελέγχετε τη σελίδα σας µε όσο το δυνατόπερισσότερους φυλλοµετρητές
Επειδή η σελίδα µας έχει τώρα συσχετιστεί µε έναφυλλο τεχνοτροπίας, µπορούµε τώρα ναδηµιουργήσουµε νέους κανόνες σε αυτό.
∆ηµιουργούµε και πάλι ένακανόνα κλάσης, αυτή τηφορά για το στοιχείο table.
Όταν επιχειρήσουµε ναδακτυλογραφήσουµε τοόνοµα της κλάσης στηνοποία ανήκει το στοιχείοµας, εµφανίζετάι µίαλίστα µε όλους τουςκανόνες που αφορούνκλάσεις στο φύλλοτεχνοτροπίας που έχουµεκαθορίσει για τη σελίδαµας.
Προσέξτε το σύνδεσµο πουσυνδέει τη σελίδα µε τοεξωτερικό φύλλοτεχνοτροπίας.
Με το CSS µπορούµε επίσηςνα καθορίσουµε τα χρώµαταµε τα οποία θα εµφανιστείκάποιο στοιχείο στην οθόνη. Ο Dreamweaver µας βοηθάδίδοντάς µας µία παλέτα µετα 256 web safe χρώµατα, χρώµατα που µπορούν ναεµφανιστούν σε όλα ταλειτουργικά συστήµατα.
Σχεδιότυπα (templates)Τα σχεδιότυπα µας επιτρέπουν να δηµιουργήσουµειστιακούς τόπους µε πολλές σελίδες οι οποίες ναέχουν µεγάλη συνέπεια και οµοιοµορφία µεταξύ τουςΕπιπλέον, ως σχεδιαστές και προγραµµατιστέςµπορούµε να δώσουµε τη δυνατότητα σε κάποιονπου δεν έχει απαράιτητα κάποια πείρα µε την HTMLνα δηµιουργήσει µία επαγγελµατική σελίδαΤο σχεδιότυπο είναι µία κανονική σελίδα της οποίαςκάποια µέρη µπορεί να τροποποιηθούν, ενώ άλλαπαραµένουν προστατευµέναΑποφεύγονται έτσι οι αθέµιτες αλλαγές σε βασικάσηµεία της σελίδας
Για να µετατρέψουµε τησελίδα µας σε σχεδιότυπο, επιλέγουµε την ανάλογηεπιλογή από το µενού πουκρύβεται πίσω από αυτό τοεικονίδιο.
∆ίνουµε ένα όνοµα στοκαινούργιο σχεδιότυπο.
Προσέξτε την αλλαγή στηνεπέκταση που υποδηλεί ότιτο παρόν αρχείο είναισχεδιότυπο και όχι σελίδα.
Τοποθετούµε το δροµέα µαςστα σηµεία που θέλουµε ναεπιτρέψουµε αλλαγές στησελίδα µας και τασηµειώνουµε µε τηνκατάλληλη επιλογή από τοµενού.
Κάθε εγγράψιµο σηµείο(editable region) τουσχεδιότυπού µας θα πρέπεινα έχει ένα µοναδικό όνοµα.
Εδώ βλέπουµε πως οDreamweaver σηµειώνει τηνέκταση της εγγράψιµηςπεριοχής.
Το σχεδιότυπο που έχουµεδηµιουργήσει εµφανίζεταιπλέον ως ένα από ταστοιχεία (assets) τουιστιακού µας χώρου.
Κάνοντας δεξί κλικ πάνωστο σχεδιότυπο µπορούµενα δηµιουργήσουµεκαινούργιες σελίδες που ναβασίζονται σε αυτό.
Στη νέα σελίδα µόνο τα σηµεία που δεν εµφανίζονται µε γκρίζοχρώµα µπορούν να τροποποιηθούν.
ΠΡΟΣΟΧΗ: µόνο ο Dreamweaver αναγνωρίζει και διαχειρίζεταισωστά τα σχεδιότυπά του.
Συντονισµός µε άλλους προγραµµατιστέςκαι µε τον εξυπηρετητή
Καλό είναι να υλοποιούµε και να δοκιµάζουµεαλλαγές σε µία ιστοσελίδα σε διαφορετικόυπολογιστή από αυτόν που παίζει το ρόλο τουεξυπηρετητή µέσω του οποίου δηµοσιεύεται η σελίδα
Πως συγχρονίζουµε τις αλλαγές στον υπολογιστήυλοποίησης µε τα περιεχόµενα του εξυπηρετητή;
Πολλές φορές χρειάζεται να συνεργαστούµε µεάλλους προγραµατιστές για την υλοποίηση ενόςµεγάλου ιστιακού τόπου
Τί γίνεται όταν δύο προγραµµατιστές επιχειρήσουν νατροποποιήσουν την ίδια σελίδα;
Από το µενού επιλογήςιστιακού τόπου επιλέγουµετη διαχείριση τόπων.
Επιλέγουµε τον ιστιακό τόπογια τον οποίο θέλουµε ναδιευθετήσουµε τιςλεπτοµέρειες που αφορούνστη δηµοσίευση του τόπουκαι τη συνεργασία µε άλλουςπρογραµµατιστές.
Κάτω από τον στηλοθέτη(tab) Advanced επιλέγουµετην κατηγορία Remote Info.
Πρωτόκολλο επικοινωνίας µετον εξυπηρετητή.
∆ιεύθυνση εξυπηρετητή.
Ευρετήριο ρίζας (root directory) για τον ιστιακότόπο στον εξυπηρετητή.
Όνοµα χρήστη και κωδικόςπρόσβασης.
Με αυτή την επιλογήµπορούµε να διασφαλίσουµεαποκλειστική πρόσβαση σεένα αρχείο το οποίοτροποποιούµε.
Τα στοιχεία µας είναιαπαραίτητα ούτως ώστεκάποιος άλλοςπρογραµµατιστής πουεπιθυµεί να τροποποιήσειένα αρχείο που κατέχουµεήδη εµέις να µπορεί ναεπικοινωνήσει µαζί µας.
Μη ξεχνάτε την επιλογή πουµας επιτρέπει να δούµε τααρχεία που βρίσκονται τόσοστον υπολογιστήυλοποίησης όσο και στοεξυπηρετητή.
Απόκτησηαρχείου απότονεξυπηρετητή(Get File).
Τοποθέτησηαρχείου στονεξυπηρετητή(Put File).
Αποκλειστικήαπόκτησηαρχείου απότονεξυπηρετητή(Check Out).
Τοποθέτησηαποκλειστικούαρχείου στονεξυπηρετητή(Check In).
Για περισσότερεςπληροφορίες...
http://www.itsu.vt.edu/Workshops/DreamweaverMX_Basics/HTML/screen.htm
http://www.siteownersdesign.com/design-tutorials/dreamweaver-mx-tutorial/
http://www.learnthat.com/computers/learn.asp?id=362&offset=53&index=54
http://t3.k12.hi.us/t302-03/tutorials/dw/
