Copyright 2012-2015 -SYSTEM- All rights reserved 2/180
ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: Εισαγωγή στο Dreamwever Μάθημα 2: Γραμμές εργαλείων document Μάθημα 3: Προετοιμασία τοποθεσίας ιστού Μάθημα 4: Ορισμός τοπικής τοποθεσίας Μάθημα 5: Δημιουργία και αποθήκευση νέας σελίδας Μάθημα 6: Εξερεύνηση εργαλείων Μάθημα 7: Τίτλος σελίδας Μάθημα 8: Καθορισμός φυλλομετρητή Μάθημα 9: Εισαγωγή και μορφοποίηση κειμένου Μάθημα 10: Στοίχιση και εσοχές κειμένου Μάθημα 11: Προσθήκη ειδικών χαρακτήρων Μάθημα 12: Εισαγωγή εικόνας φόντου Μάθημα 13: Εισαγωγή εικόνας από το πάνελ assets Μάθημα 14: Ροή Κειμένου Γύρω από εικόνες Μάθημα 15: Εισαγωγή Κινούμενων εικόνων Flash Μάθημα 16: Δημιουργία συνδέσμων Μάθημα 17: Δημιουργία εικονοχαρτών Μάθημα 18: Σχεδιασμός με πίνακες Μάθημα 19: Ταξινόμηση πίνακα Μάθημα 20: Ένθετοι πίνακες Μάθημα 21: Ιχνογράφηση Μάθημα 22: Δημιουργία CSS φύλλων στυλ Μάθημα 23: Δημιουργία στοιχείου βιβλιοθήκης Copyright 2012-2015 -SYSTEM- All rights reserved 3/180
Μάθημα 24: Δημιουργία πλαισίων Σύνδεση απομακρυσμένου διακομιστή Μάθημα 25: Δημιουργία φόρμας Μάθημα 34: Ανέβασμα και συγκάλυψη αρχείων Μάθημα 26: Αλληλεπίδρασης με το χρήστη Μάθημα 35: Εύρεση και αντικατάσταση Μάθημα 27: Έλεγχος φυλλομετρητή Μάθημα 36: Έλεγχος ορθογραφίας Μάθημα 28: Δημιουργία αναδυόμενου μενού Μάθημα 29: Εργαλείο αναδυόμενου μενού Μάθημα 30: Επικύρωση φόρμα Μάθημα 31: Πάνελ files Μάθημα 32: Προσθήκη φακέλων σε τοποθεσία Μάθημα 33: Μάθημα 37: Δημιουργία AP στοιχείων Μάθημα 38: Κάνναβος, χάρακας, οδηγός Μάθημα 39: Συμπεριφορά σε AP στοιχεία Μάθημα 40: Επέκταση εγκατάστασης Μάθημα 41: Quick time Copyright 2012-2015 -SYSTEM- All rights reserved 4/180
ΜΑΘΗΜΑ 1 ο ΕΙΣΑΓΩΓΗ ΣΤΟ DREAMWEAVER Το Dreamweaver είναι ένας επεξεργαστής HTML που δίνει στους χρήστες δυνατότητες οπτικού σχεδιασμού και επεξεργασίας, σε συνδυασμό με την άμεση επεξεργασία του κώδικα. Το Dream weaver βοηθάει στη μείωση του χρόνου παραγωγής των τοποθεσιών Ιστού σας και παρέχει εργαλεία για τη διαχείριση και τη συντήρηση αυτών των τοποθεσιών. Κάντε εκκίνηση του Dreamweaver χρησιμοποιώντας το εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. Το Dreamweaver παρέχει δύο επιλογές χώρους εργασίας για τους χρήστες το Designer (Σχεδιαστή) και το Coder (Προγραμματιστή). Ο Χώρος Σχεδιαστή ενσωματώνει όλα τα παράθυρα και τα πάνελ του Dreamweaver σε ένα περιβάλλον βελτιστοποιημένο για την οπτική δημιουργία τοποθεσιών Ιστού, ιδανικό για σχεδιαστές. Μπορείτε να εναλλάσσεστε από τον ένα χώρο εργασίας στον άλλο όποτε θέλετε επιλέγοντας Edit/ Preferences, επιλέγοντας την κατηγορία General και πατώντας το κουμπί Change Workspace (Αλλαγή χώρου εργασίας). Αν αλλάξετε τις ρυθμίσεις χώρου εργασίας, πρέπει να κλείσετε και να ξανανοίξετε το Dreamweaver για να ισχύσει η αλλαγή. Σελίδα Εκκίνησης Αν είναι η πρώτη φορά που ανοίγετε το Dreamweaver, πρέπει να δείτε μια σελίδα εκκίνησης (Start Page) που περιέχει συνδέσμους με πρόσφατα έγγραφα, την επιλογή δημιουργίας εγγράφου από μια ποικιλία τύπων αρχείων, δείγματα σχεδίων σελίδων που μπορούν να σας δώσουν μια αφετηρία για την κατασκευή των δικών σας τοποθεσιών πόρους του προγράμματος. Εξ ορισμού, η σελίδα εκκίνησης εμφανίζεται κάθε φορά που ανοίγετε το Dreamweaver εκτός αν ενεργοποιήσετε το πλαίσιο ελέγχου Don t Show again (Να μην εμφανιστεί ξανά). Όταν αρχίσετε να δημιουργείτε μια σελίδα ή να εξερευνάτε τις υπόλοιπες επιλογές της ενότητας Get Started (Ξεκίνημα), η σελίδα εκκίνησης κλείνει μόνη της. Copyright 2012-2015 -SYSTEM- All rights reserved 5/180
Εξερεύνηση του χώρου εργασίας Copyright 2012-2015 -SYSTEM- All rights reserved 6/180
ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Κάντε εκκίνηση του Dreamwever εάν δεν είναι ανοιχτό χρησιμοποιώντας το εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. ΑΠΑΝΤΗΣΗ. Κάντε διπλό αριστερό πάτημα στο εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. 2 ον Το Dreamwever είναι πρόγραμμα: Α. Δημιουργίας κίνησης; Β. Δημιουργίας γραφικών; Γ. Επεξεργασίας HTML; Επιλέξτε την σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Επεξεργασίας HTML; 3 ον Πόσες επιλογές χώρου εργασίας παρέχει για τους χρήστες το Dreamwever; Και σε ποίους; Α. Ένα; Β. Δύο; Επιλέξτε την σωστή απάντηση με το ποντίκι Γ. Designer; Δ. Coder; Ε. και τους δύο Designer; και Code; Επιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή είναι Β. Δύο και Ε. και τους δύο Designer και Code. 4 ον Κάντε υπόδειξη με το ποντίκι: Στην γραμμή εργαλείων εισαγωγής Σελίδα εκκίνησης Ομάδες πάνελ Επιθεωρητή ιδιοτήτων Γραμμή εργαλείων Insert Γραμμή κατάστασης 5 ον Πόσες προβολές διαθέτει το Dreamwever; Α. Code Β. Design Γ. Split Δ. Όλες τις παραπάνω; Επιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Όλες τις παραπάνω. Copyright 2012-2015 -SYSTEM- All rights reserved 7/180
ΜΑΘΗΜΑ 2 ο ΓΡΑΜΜΕΣ ΕΡΓΑΛΕΙΩΝ DOCUMENT Πριν προχωρήσετε στη δημιουργία ιστοσελίδων, πρέπει να εξοικειωθείτε με την ποικιλία εργαλείων και πάνελ της διασύνδεσης του Dreamweaver, που σας επιτρέπουν να δημιουργείτε εύκολα τοποθεσίες Ιστού. Μετακινήστε το δείκτη του ποντικιού επάνω από το παράθυρο Εγγράφου και τη γραμμή εργαλείων Document. Αφήστε το δείκτη πάνω από κάποιο κουμπί για να δείτε το όνομά του. Το μεγαλύτερο μέρος της εργασίας σχεδιασμού και δημιουργίας κώδικα γίνεται μέσα στο παράθυρο Εγγράφου. Αυτή η περιοχή είναι γνωστή ως το σώμα της σελίδας, όπου μπορείτε να προσθέσετε, να τροποποιήσετε και να διαγράψετε τη μεγάλη ποικιλία των στοιχείων που συνιστούν μια ιστοσελίδα. Κάτω από τις καρτέλες εγγράφων που έχετε ανοίξει θα δείτε τη γραμμή εργαλείων Document. Η γραμμή εργαλείων Document αποτελείται από 3 τμήματα: Κουμπιά κατάστασης προβολής: Σας επιτρέπουν να επιλέξετε μια από τις προβολές Design (Σχεδίασης), code (Κώδικα) και Split (Διαίρεσης) για το έγγραφό σας. Η περιοχή αυτή περιλαμβάνει τα κουμπιά Live View (Ενεργός προβολή) και Live Code (Ενεργός κώδικας). Τίτλος Σελίδας: Κάθε σελίδα χρειάζεται έναν περιγραφικό τίτλο. Για να κάνετε απόκρυψη της γραμμής εργαλείων Insert Window/Insert (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Insert Window/Insert (τσεκάρω) Για να κάνετε απόκρυψη της γραμμής εργαλείων Document View/ Toolbars/Document (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Document View/ Toolbars/Document (τσεκάρω) Copyright 2012-2015 -SYSTEM- All rights reserved 8/180
Για να κάνετε απόκρυψη της γραμμής εργαλείων Standard View/ Toolbars/ Standard (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Standard View/ Toolbars/ Standard (τσεκάρω) Υπάρχουν τρεις καταστάσεις προβολής στο Dreamweaver: η προβολή Σχεδίασης (design), η προβολή κώδικα (Code) και η προβολή Διαίρεσης (Split), η οποία συνδυάζει την προβολή Σχεδίασης και την προβολή Κώδικα. Τα κουμπιά για τις καταστάσεις αυτές είναι στην αριστερή άκρη της γραμμής εργαλείων Document. Γραμμή Κατάστασης Η γραμμή κατάστασης είναι το κατώτατο τμήμα του παραθύρου εγγράφου. Συχνά ονομάζεται επιλογέας ετικετών (tag selector), παρόλο που το όνομα αυτό είναι σωστό μόνο για το αριστερό μέρος. Η δεξιά πλευρά της γραμμής κατάστασης περιέχει περισσότερα χειριστήρια. Τα εργαλεία Select (Επιλογή), Hand (Χέρι) και Zoom (Μεγέθυνση) σας επιτρέπουν αντίστοιχα να επιλέγετε, να κυλάτε τη σελίδα, να μεγεθύνετε ή να σμικρύνετε τη σελίδα. Το επόμενο χειριστήριο δείχνει το τρέχον ποσοστό μεγέθυνσης της σελίδας. Τέλος η γραμμή κατάσταση σας ενημερώνει για την κωδικοποίηση του κειμένου σελίδας. Η κωδικοποίηση λέει στο φυλλομετρητή ποιο σύνολο χαρακτήρων πρέπει να χρησιμοποιήσει για την εμφάνιση των γραμματοσειρών στη σελίδα. Copyright 2012-2015 -SYSTEM- All rights reserved 9/180
ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Κάντε απόκρυψη της γραμμής εργαλείων Insert ΑΠΑΝΤΗΣΗ. Window/Insert (ξετσεκάρω) 2 ον Κάντε εμφάνιση της γραμμής εργαλείων Insert ΑΠΑΝΤΗΣΗ. Window/Insert (τσεκάρω) 3 ον Ποιες από τις παρακάτω είναι καρτέλες της γραμμής εργαλείων Insert; A. Text; B. Common G. Layout όλες οι παραπάνω. Επιλέξτε την σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. όλες οι παραπάνω 4 ον Κάντε απόκρυψη της γραμμής εργαλείων Document ΑΠΑΝΤΗΣΗ. View/ Toolbars/Document (ξετσεκάρω) 5 ον Κάντε εμφάνιση της γραμμής εργαλείων Document ΑΠΑΝΤΗΣΗ.View/ Toolbars/Document (τσεκάρω) 6 ον Κάντε απόκρυψη της γραμμής εργαλείων Standard ΑΠΑΝΤΗΣΗ.View/ Toolbars/ Standard (ξετσεκάρω) 7 ον Κάντε εμφάνιση της γραμμής εργαλείων Standard ΑΠΑΝΤΗΣΗ. View/ Toolbars/ Standard (τσεκάρω) 8 ον Κάντε εναλλαγή προβολής σε: Α. Προβολή κώδικα (code) Β. Προβολή σχεδίασης (design) Γ. Προβολή κώδικα & σχεδίασης (split) ΑΠΑΝΤΗΣΗ. Πατάμε κλικ πάνω στο εικονίδιο κάθε προβολής 9 ον Υποδείξτε με το ποντίκι το εικονίδιο: Α. Διαχείριση αρχείων (File Management) Β. Προεπισκόπησης (Preview) Γ. Ανανέωσης (Refresh) ΑΠΑΝΤΗΣΗ. Πατάμε κλικ πάνω στο κάθε εικονίδιο της γραμμής εργαλείων Document. Copyright 2012-2015 -SYSTEM- All rights reserved 10/180
ΜΑΘΗΜΑ 3 ο ΠΡΟΕΤΟΙΜΑΣΙΑ ΤΟΠΟΘΕΣΙΑΣ ΙΣΤΟΥ Μια καλή τοποθεσία Ιστού πρέπει να λειτουργεί διαισθητικά και να δημιουργεί μια θετική, μοναδική εμπειρία στο χρήστη. Η δημιουργία μιας αποτελεσματικής τοποθεσίας Ιστού ξεκινάει με τον καθορισμό και τη σύνοψη των λόγων για τους οποίους την κατασκευάζετε. Πριν αρχίζει να δουλεύετε με τις σελίδες, θέστε στον εαυτό σας ή στον πελάτη σας τις παρακάτω ερωτήσεις: Ποιο είναι το κοινό σας; Η γνώση του κοινού στο οποίο απευθύνεστε είναι ζωτική. Ο καθορισμός ενός γενικού προφίλ χρήστη σας βοηθάει να προσεγγίσετε απότελεσματικά το κοινό σας. Ίσως έχετε πολλά είδη χρηστών σε αυτή την περίπτωση, αναπτύξτε ένα προφίλ για το καθένα από αυτά. Τι τεχνολογία διαθέτουν οι χρήστες; Είναι σημαντικό να ξέρετε τον τύπο εξοπλισμού που χρησιμοποιείται από τους επισκέπτες σας, ώστε να δημιουργήσετε μια τοποθεσία προσπελάσιμη από το κοινό σας. Τι χρειάζεται αυτή η τοποθεσία; Τι θέλετε να αποκομίσουν οι επισκέπτες της τοποθεσίας σας; Σκεφθείτε το σκοπό που θα εξυπηρετεί η τοποθεσίας σας και πως θα τη χρησιμοποιεί κάθε πιθανός χρήστης. Τι πρέπει να περιλαμβάνει η τοποθεσία για να εξυπηρετεί το σκοπό της; Χρησιμοποιήστε τα προφίλ χρηστών που δημιουργήσατε για να προσδιορίσετε πιθανά σενάρια για τον τρόπο που θα χρησιμοποιούν οι επισκέπτες την τοποθεσία σας. Με βάση αυτά, μπορείτε να προσδιορίσετε τα είδη περιεχομένου που χρειάζονται. Τι περιεχόμενο χρειάζεται για την τοποθεσία; Ο προσδιορισμός και η συγκέντρωση των συστατικών στοιχείων της τοποθεσίας σας αποτελεί ένα σημαντικό τμήμα της προετοιμασίας σχεδιασμού και παραγωγής μιας τοποθεσίας Ιστού. Πρέπει να συγκεντρώσετε όλα τα περιεχόμενα όπως κείμενο, εικόνες και στοιχεία πολυμέσων που θα χρησιμοποιηθούν στην τοποθεσία. Η οργάνωση αυτών των στοιχείων σας επιτρέπει να δημιουργήσετε μια ολοκληρωμένη τοποθεσία Ιστού. Τι μήνυμα θέλετε να μεταδίδει η τοποθεσίας σας; Είναι βασικό να γνωρίζετε ακριβώς τι θέλετε να πείτε στους επισκέπτες σας. Αν δεν έχετε ξεκαθαρίσει τι θέλετε να πείτε, μάλλον το ίδιο πρόβλημα θα έχουν και οι επισκέπτες σας. Αποσαφηνίστε το μήνυμα της τοποθεσίας σας. Η επικοινωνία με τους επισκέπτες σας είναι θεμελιώδες τμήμα της Copyright 2012-2015 -SYSTEM- All rights reserved 11/180
διατήρησης μιας αποτελεσματικής τοποθεσίας, και αυτή η επικοινωνίας εξαρτάται από τη δομή της τοποθεσίας σας. Οι τοποθεσίες Ιστού βασίζονται στη διαχείριση της δομής και των αρχείων: μια τοποθεσία Ιστού με κακή δομή μπορεί να προκαλέσει σύγχυση, να είναι δύσχρηστη, και να σας δυσκολεύει να τη συντηρήσετε. Για να δημιουργήσετε μια τοποθεσία σαφή, επικοινωνιακή, και εύχρηστη για τους επισκέπτες, πρέπει να οργανώσετε τέλεια δομή και την ιεραρχίας των αρχείων και των φακέλων της τοποθεσίας σας πριν αρχίσετε να δημιουργείτε έγγραφα HTML. Η δημιουργία μιας λεπτομερούς διάρθρωσης της τοποθεσίας, καθώς και ενός διαγράμματος ροής ή ενός σχεδιαγράμματος πλάνου, είναι σημαντικό βήμα της διαδικασίας οργάνωσης. Copyright 2012-2015 -SYSTEM- All rights reserved 12/180
ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Πρέπει να θέτετε ερωτήσεις πριν αρχίσετε να δουλεύετε με σελίδες; Α. Όχι Β. Ναι Γ. Όχι πάντα, καμιά φορά Επιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Ναι. 2 ον Είναι απαραίτητο να γνωρίζετε ποιο είναι το κοινό σας για κάθε site; Α. Όχι Β. Ναι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Ναι 3 ον Τι περιεχόμενο απαιτείται για μία τοποθεσία; Α. Κείμενα; Β. Εικόνες; Γ. Στοιχεία πολυμέσων; Δ. Όλα τα παραπάνω; ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Όλα τα παραπάνω. Copyright 2012-2015 -SYSTEM- All rights reserved 13/180
ΜΑΘΗΜΑ 4 ο ΟΡΙΣΜΟΣ ΤΟΠΙΚΗΣ ΤΟΠΟΘΕΣΙΑΣ Το πρώτο βήμα της δημιουργίας μιας τοποθεσίας Ιστού είναι να ορίσετε ή να δημιουργήσετε στον υπολογιστή σας το φάκελο που θα περιέχει όλα όσα θα περιέχονται στην τοποθεσία. Αυτή η διαδικασία ονομάζεται ορισμός τοπικής τοποθεσίας. Ο καθοριζόμενος φάκελος, γνωστός ως τοπικός βασικός φάκελος (local root folder), θέτει τα όρια της τοπικής τοποθεσίας που βρίσκεται στο σκληρό σας δίσκο και λειτουργεί ως είδωλο της απομακρυσμένης τοποθεσίας, η οποία είναι η πραγματική τοποθεσία στο διακομιστή Ιστού που θα βλέπουν οι επισκέπτες σας. Ο ορισμός μιας τοπικής τοποθεσίας σας δίνει τη δυνατότητα να διατηρείτε την ίδια ιεραρχία φακέλων μεταξύ της τοπικής και της απομακρυσμένης έκδοσης, πράγμα κρίσιμο στη δημιουργία και τη διατήρηση μιας λειτουργικής τοποθεσίας. Η δημιουργία μιας τοπικής τοποθεσίας, η οποία από τον τοπικό βασικό φάκελο μέσα στον οποίο κατασκευάζετε τη δομή των αρχείων και των φακέλων της τοποθεσίας σας, δεν επιτρέπει στην τοποθεσία να αποθηκεύσει αρχεία έξω από τον τοπικό βασικό φάκελο. Τα αρχεία του σκληρού σας δίσκου που βρίσκονται έξω από τον τοπικό βασικό φάκελο δεν μπορούν να μεταφερθούν στον απομακρυσμένο διακομιστή. Αυτός ο περιορισμός εξασφαλίζει ότι, καθώς αναπτύσσετε την τοποθεσίας σας, δε θα έχετε πρόσβαση σε αρχεία που δε θα είναι διαθέσιμα όταν οι τοποθεσία γίνει διαθέσιμη στο Διαδίκτυο. Πολλές λειτουργίες του Dreamweaver, όπως η ενημέρωση όλων των αναφορών προς ένα αρχείο που έχει μετακινηθεί σε διαφορετική θέση στην τοποθεσία, απαιτούν τον ορισμό μιας τοπικής τοποθεσίας ώστε να λειτουργήσουν. Πρέπει συστηματικά να δημιουργείτε και να εργάζεστε πάντα σε τοπικές τοποθεσίες. Αν δεν το κάνετε αυτό, ίσως έχετε προβλήματα με τους συνδέσμους, τις διαδρομές και τη διαχείριση των αρχείων. Copyright 2012-2015 -SYSTEM- All rights reserved 14/180
Δείξτε στο μενού Site (Τοποθεσία)/New Site (Νέα τοποθεσία) από το παράθυρο διαλόγου που θα εμφανιστεί είναι επιλεγμένη η κατηγορία Site όπου μπορείτε να καθορίσετε το όνομα του Site και το ποιος θα είναι ο Local Site Folder, πατώντας το εικονίδιο του φακέλου καθορίζετε το φάκελο. Copyright 2012-2015 -SYSTEM- All rights reserved 15/180
ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Δημιουργήστε ένα φάκελο στην επιφάνεια εργασίας με το όνομα σας, στη συνέχεια δημιουργήστε πέντε δικές σας τοποθεσίες, καθορίζοντας πέντε διαφορετικά ονόματα τοποθεσιών, και αποθηκεύστε τα μέσα στον αντίστοιχο φάκελο. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού Site (Τοποθεσία)/New Site (Νέα τοποθεσία) από το παράθυρο διαλόγου που θα εμφανιστεί είναι επιλεγμένη η κατηγορία Site όπου μπορείτε να καθορίσετε το όνομα του Site και το ποιος θα είναι ο Local Site Folder, πατώντας το εικονίδιο του φακέλου καθορίζετε το φάκελο. Copyright 2012-2015 -SYSTEM- All rights reserved 16/180