Sample dreamweaver

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P.

με Σύστημα διδασκαλίας “facetoface”

www.facetoface.gr ΑΘΗΝΑ: ΚΑΝΙΓΓΟΣ 13 ΤΗΛ.: 2103803806 ΔΑΦΝΗ: ΑΒΕΡΩΦ 48 ΤΗΛ.: 210 9761101

ΜΑΡΟΥΣΙ: ΔΗΜΗΤΡΟΣ 3 ΤΗΛ.: 210 8026216

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: Δημιουργία στοιχείου βιβλιοθήκης






Μάθημα 24: Δημιουργία πλαισίων

Μάθημα 25:

Δημιουργία φόρμας

Μάθημα 26: Αλληλεπίδρασης με το χρήστη

Μάθημα 27:

Έλεγχος φυλλομετρητή

Μάθημα 28: Δημιουργία αναδυόμενου μενού

Μάθημα 29:

Εργαλείο αναδυόμενου μενού

Μάθημα 30: Επικύρωση φόρμα

Μάθημα 31:

Πάνελ files

Μάθημα 32: Προσθήκη φακέλων σε τοποθεσία

Μάθημα 33:

Σύνδεση απομακρυσμένου διακομιστή

Μάθημα 34:

Ανέβασμα και συγκάλυψη αρχείων

Μάθημα 35: Εύρεση και αντικατάσταση

Μάθημα 36:

Έλεγχος ορθογραφίας

Μάθημα 37:

Δημιουργία AP στοιχείων

Μάθημα 38: Κάνναβος, χάρακας, οδηγός

Μάθημα 39:

Συμπεριφορά σε AP στοιχεία

Μάθημα 40: Επέκταση εγκατάστασης

Μάθημα 41: Quick time






ΜΑΘΗΜΑ 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 (Ξεκίνημα), η σελίδα εκκίνησης κλείνει μόνη της.






Εξερεύνηση του χώρου εργασίας






ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Κάντε εκκίνηση του Dreamwever εάν δεν είναι ανοιχτό χρησιμοποιώντας το εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. ΑΠΑΝΤΗΣΗ. Κάντε διπλό αριστερό πάτημα στο εικονίδιο συντόμευσης του προγράμματος το οποίο βρίσκεται στην επιφάνεια εργασίας. 2ον Το Dreamwever είναι πρόγραμμα: Α. Δημιουργίας κίνησης; Β. Δημιουργίας γραφικών; Γ. Επεξεργασίας HTML; Επιλέξτε την σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Επεξεργασίας HTML; 3ον Πόσες επιλογές χώρου εργασίας παρέχει για τους χρήστες το Dreamwever; Και σε ποίους; Α. Ένα; Β. Δύο; Επιλέξτε την σωστή απάντηση με το ποντίκι Γ. Designer; Δ. Coder; Ε. και τους δύο Designer; και Code; Επιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή είναι Β. Δύο και Ε. και τους δύο Designer και Code. 4ον Κάντε υπόδειξη με το ποντίκι: Στην γραμμή εργαλείων εισαγωγής Σελίδα εκκίνησης Ομάδες πάνελ Επιθεωρητή ιδιοτήτων Γραμμή εργαλείων Insert Γραμμή κατάστασης 5ον Πόσες προβολές διαθέτει το Dreamwever; Α. Code Β. Design Γ. Split Δ. Όλες τις παραπάνω; Επιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Όλες τις παραπάνω.






ΜΑΘΗΜΑ 2ο

ΓΡΑΜΜΕΣ ΕΡΓΑΛΕΙΩΝ DOCUMENT Πριν προχωρήσετε στη δημιουργία ιστοσελίδων, πρέπει να εξοικειωθείτε με την ποικιλία εργαλείων και πάνελ της διασύνδεσης του Dreamweaver, που σας επιτρέπουν να δημιουργείτε εύκολα τοποθεσίες Ιστού. Μετακινήστε το δείκτη του ποντικιού επάνω από το παράθυρο Εγγράφου και τη γραμμή εργαλείων Document. Αφήστε το δείκτη πάνω από κάποιο κουμπί για να δείτε το όνομά του. Το μεγαλύτερο μέρος της εργασίας σχεδιασμού και δημιουργίας κώδικα γίνεται μέσα στο παράθυρο Εγγράφου. Αυτή η περιοχή είναι γνωστή ως το “σώμα” της σελίδας, όπου μπορείτε να προσθέσετε, να τροποποιήσετε και να διαγράψετε τη μεγάλη ποικιλία των στοιχείων που συνιστούν μια ιστοσελίδα. Κάτω από τις καρτέλες εγγράφων που έχετε ανοίξει θα δείτε τη γραμμή εργαλείων Document. Η γραμμή εργαλείων Document αποτελείται από 3 τμήματα:

Κουμπιά κατάστασης προβολής: Σας επιτρέπουν να επιλέξετε μια από τις προβολές Design (Σχεδίασης), code (Κώδικα) και Split (Διαίρεσης) για το έγγραφό σας. Η περιοχή αυτή περιλαμβάνει τα κουμπιά Live View (Ενεργός προβολή) και Live Code (Ενεργός κώδικας).

Τίτλος Σελίδας: Κάθε σελίδα χρειάζεται έναν περιγραφικό τίτλο. Για να κάνετε απόκρυψη της γραμμής εργαλείων InsertWindow/Insert (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Insert Window/Insert (τσεκάρω)

Για να κάνετε απόκρυψη της γραμμής εργαλείων Document View/ Toolbars/Document (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Document View/ Toolbars/Document (τσεκάρω)






Για να κάνετε απόκρυψη της γραμμής εργαλείων Standard View/ Toolbars/ Standard (ξετσεκάρω) Για να κάνετε εμφάνιση της γραμμής εργαλείων Standard View/ Toolbars/ Standard (τσεκάρω) Υπάρχουν τρεις καταστάσεις προβολής στο Dreamweaver: η προβολή Σχεδίασης (design), η προβολή κώδικα (Code) και η προβολή Διαίρεσης (Split), η οποία συνδυάζει την προβολή Σχεδίασης και την προβολή Κώδικα. Τα κουμπιά για τις καταστάσεις αυτές είναι στην αριστερή άκρη της γραμμής εργαλείων Document. Γραμμή ΚατάστασηςΗ γραμμή κατάστασης είναι το κατώτατο τμήμα του παραθύρου εγγράφου. Συχνά ονομάζεται επιλογέας ετικετών (tag selector), παρόλο που το όνομα αυτό είναι σωστό μόνο για το αριστερό μέρος. Η δεξιά πλευρά της γραμμής κατάστασης περιέχει περισσότερα χειριστήρια. Τα εργαλεία Select (Επιλογή), Hand (Χέρι) και Zoom (Μεγέθυνση) σας επιτρέπουν αντίστοιχα να επιλέγετε, να κυλάτε τη σελίδα, να μεγεθύνετε ή να σμικρύνετε τη σελίδα. Το επόμενο χειριστήριο δείχνει το τρέχον ποσοστό μεγέθυνσης της σελίδας. Τέλος η γραμμή κατάσταση σας ενημερώνει για την κωδικοποίηση του κειμένου σελίδας. Η κωδικοποίηση λέει στο φυλλομετρητή ποιο σύνολο χαρακτήρων πρέπει να χρησιμοποιήσει για την εμφάνιση των γραμματοσειρών στη σελίδα.






ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 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.






ΜΑΘΗΜΑ 3ο

ΠΡΟΕΤΟΙΜΑΣΙΑ ΤΟΠΟΘΕΣΙΑΣ ΙΣΤΟΥ Μια καλή τοποθεσία Ιστού πρέπει να λειτουργεί διαισθητικά και να δημιουργεί μια θετική, μοναδική εμπειρία στο χρήστη. Η δημιουργία μιας αποτελεσματικής τοποθεσίας Ιστού ξεκινάει με τον καθορισμό και τη σύνοψη των λόγων για τους οποίους την κατασκευάζετε. Πριν αρχίζει να δουλεύετε με τις σελίδες, θέστε στον εαυτό σας ή στον πελάτη σας τις παρακάτω ερωτήσεις: Ποιο είναι το κοινό σας; Η γνώση του κοινού στο οποίο απευθύνεστε είναι ζωτική. Ο καθορισμός ενός γενικού προφίλ χρήστη σας βοηθάει να προσεγγίσετε απότελεσματικά το κοινό σας. Ίσως έχετε πολλά είδη χρηστών σε αυτή την περίπτωση, αναπτύξτε ένα προφίλ για το καθένα από αυτά. Τι τεχνολογία διαθέτουν οι χρήστες; Είναι σημαντικό να ξέρετε τον τύπο εξοπλισμού που χρησιμοποιείται από τους επισκέπτες σας, ώστε να δημιουργήσετε μια τοποθεσία προσπελάσιμη από το κοινό σας. Τι χρειάζεται αυτή η τοποθεσία; Τι θέλετε να αποκομίσουν οι επισκέπτες της τοποθεσίας σας; Σκεφθείτε το σκοπό που θα εξυπηρετεί η τοποθεσίας σας και πως θα τη χρησιμοποιεί κάθε πιθανός χρήστης. Τι πρέπει να περιλαμβάνει η τοποθεσία για να εξυπηρετεί το σκοπό της; Χρησιμοποιήστε τα προφίλ χρηστών που δημιουργήσατε για να προσδιορίσετε πιθανά σενάρια για τον τρόπο που θα χρησιμοποιούν οι επισκέπτες την τοποθεσία σας. Με βάση αυτά, μπορείτε να προσδιορίσετε τα είδη περιεχομένου που χρειάζονται. Τι περιεχόμενο χρειάζεται για την τοποθεσία; Ο προσδιορισμός και η συγκέντρωση των συστατικών στοιχείων της τοποθεσίας σας αποτελεί ένα σημαντικό τμήμα της προετοιμασίας σχεδιασμού και παραγωγής μιας τοποθεσίας Ιστού. Πρέπει να συγκεντρώσετε όλα τα περιεχόμενα όπως κείμενο, εικόνες και στοιχεία πολυμέσων που θα χρησιμοποιηθούν στην τοποθεσία. Η οργάνωση αυτών των στοιχείων σας επιτρέπει να δημιουργήσετε μια ολοκληρωμένη τοποθεσία Ιστού. Τι μήνυμα θέλετε να μεταδίδει η τοποθεσίας σας; Είναι βασικό να γνωρίζετε ακριβώς τι θέλετε να πείτε στους επισκέπτες σας. Αν δεν έχετε ξεκαθαρίσει τι θέλετε να πείτε, μάλλον το ίδιο πρόβλημα θα έχουν και οι επισκέπτες σας. Αποσαφηνίστε το μήνυμα της τοποθεσίας σας. Η επικοινωνία με τους επισκέπτες σας είναι θεμελιώδες τμήμα της






διατήρησης μιας αποτελεσματικής τοποθεσίας, και αυτή η επικοινωνίας εξαρτάται από τη δομή της τοποθεσίας σας. Οι τοποθεσίες Ιστού βασίζονται στη διαχείριση της δομής και των αρχείων: μια τοποθεσία Ιστού με κακή δομή μπορεί να προκαλέσει σύγχυση, να είναι δύσχρηστη, και να σας δυσκολεύει να τη συντηρήσετε. Για να δημιουργήσετε μια τοποθεσία σαφή, επικοινωνιακή, και εύχρηστη για τους επισκέπτες, πρέπει να οργανώσετε τέλεια δομή και την ιεραρχίας των αρχείων και των φακέλων της τοποθεσίας σας πριν αρχίσετε να δημιουργείτε έγγραφα HTML. Η δημιουργία μιας λεπτομερούς διάρθρωσης της τοποθεσίας, καθώς και ενός διαγράμματος ροής ή ενός σχεδιαγράμματος πλάνου, είναι σημαντικό βήμα της διαδικασίας οργάνωσης.






ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Πρέπει να θέτετε ερωτήσεις πριν αρχίσετε να δουλεύετε με σελίδες; Α. Όχι Β. ΝαιΓ. Όχι πάντα, καμιά φοράΕπιλέξτε την σωστή απάντηση με το ποντίκι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Ναι. 2ον Είναι απαραίτητο να γνωρίζετε ποιο είναι το κοινό σας για κάθε site; Α. Όχι Β. Ναι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Ναι 3ον Τι περιεχόμενο απαιτείται για μία τοποθεσία; Α. Κείμενα; Β. Εικόνες; Γ. Στοιχεία πολυμέσων; Δ. Όλα τα παραπάνω; ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Όλα τα παραπάνω.






ΜΑΘΗΜΑ 4ο

ΟΡΙΣΜΟΣ ΤΟΠΙΚΗΣ ΤΟΠΟΘΕΣΙΑΣ

Το πρώτο βήμα της δημιουργίας μιας τοποθεσίας Ιστού είναι να ορίσετε ή να δημιουργήσετε στον υπολογιστή σας το φάκελο που θα περιέχει όλα όσα θα περιέχονται στην τοποθεσία. Αυτή η διαδικασία ονομάζεται ορισμός τοπικής τοποθεσίας. Ο καθοριζόμενος φάκελος, γνωστός ως τοπικός βασικός φάκελος (local root folder), θέτει τα όρια της τοπικής τοποθεσίας που βρίσκεται στο σκληρό σας δίσκο και λειτουργεί ως είδωλο της απομακρυσμένης τοποθεσίας, η οποία είναι η πραγματική τοποθεσία στο διακομιστή Ιστού που θα βλέπουν οι επισκέπτες σας. Ο ορισμός μιας τοπικής τοποθεσίας σας δίνει τη δυνατότητα να διατηρείτε την ίδια ιεραρχία φακέλων μεταξύ της τοπικής και της απομακρυσμένης έκδοσης, πράγμα κρίσιμο στη δημιουργία και τη διατήρηση μιας λειτουργικής τοποθεσίας. Η δημιουργία μιας τοπικής τοποθεσίας, η οποία από τον τοπικό βασικό φάκελο μέσα στον οποίο κατασκευάζετε τη δομή των αρχείων και των φακέλων της τοποθεσίας σας, δεν επιτρέπει στην τοποθεσία να αποθηκεύσει αρχεία έξω από τον τοπικό βασικό φάκελο. Τα αρχεία του σκληρού σας δίσκου που βρίσκονται έξω από τον τοπικό βασικό φάκελο δεν μπορούν να μεταφερθούν στον απομακρυσμένο διακομιστή. Αυτός ο περιορισμός εξασφαλίζει ότι, καθώς αναπτύσσετε την τοποθεσίας σας, δε θα έχετε πρόσβαση σε αρχεία που δε θα είναι διαθέσιμα όταν οι τοποθεσία γίνει διαθέσιμη στο Διαδίκτυο. Πολλές λειτουργίες του Dreamweaver, όπως η ενημέρωση όλων των αναφορών προς ένα αρχείο που έχει μετακινηθεί σε διαφορετική θέση στην τοποθεσία, απαιτούν τον ορισμό μιας τοπικής τοποθεσίας ώστε να λειτουργήσουν. Πρέπει συστηματικά να δημιουργείτε και να εργάζεστε πάντα σε τοπικές τοποθεσίες. Αν δεν το κάνετε αυτό, ίσως έχετε προβλήματα με τους συνδέσμους, τις διαδρομές και τη διαχείριση των αρχείων.






Δείξτε στο μενού Site (Τοποθεσία)/New Site (Νέα τοποθεσία) από το παράθυρο διαλόγου που θα εμφανιστεί είναι επιλεγμένη η κατηγορία Site όπου μπορείτε να καθορίσετε το όνομα του Site και το ποιος θα είναι ο Local Site Folder, πατώντας το εικονίδιο του φακέλου καθορίζετε το φάκελο.






ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Δημιουργήστε ένα φάκελο στην επιφάνεια εργασίας με το όνομα σας, στη συνέχεια δημιουργήστε πέντε δικές σας τοποθεσίες, καθορίζοντας πέντε διαφορετικά ονόματα τοποθεσιών, και αποθηκεύστε τα μέσα στον αντίστοιχο φάκελο. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού Site (Τοποθεσία)/New Site (Νέα τοποθεσία) από το παράθυρο διαλόγου που θα εμφανιστεί είναι επιλεγμένη η κατηγορία Site όπου μπορείτε να καθορίσετε το όνομα του Site και το ποιος θα είναι ο Local Site Folder, πατώντας το εικονίδιο του φακέλου καθορίζετε το φάκελο.

Sample dreamweaver

Education

Transcript of Sample dreamweaver