Sample Book Dreamweaver

2. Copyright© 2012-2015 -SYSTEM- All rights reserved 2/94

3. Copyright© 2012-2015 -SYSTEM- All rights reserved 3/94
ΠΕΡΙΕΧΟΜΕΝΑ
Μάθημα 1:
3 Εισαγωγή στο Dreamwever
Μάθημα 2:
3 Γραμμές εργαλείων document
Μάθημα 3:
3 Προετοιμασία τοποθεσίας ιστού
Μάθημα 4:
3 Ορισμός τοπικής τοποθεσίας
Μάθημα 5:
3 Δημιουργία και αποθήκευση νέας
σελίδας
Μάθημα 6:
3 Εξερεύνηση εργαλείων
Μάθημα 7:
3 Τίτλος σελίδας
Μάθημα 8:
3 Καθορισμός φυλλομετρητή
Μάθημα 9:
3 Εισαγωγή και μορφοποίηση κειμένου
Μάθημα 10:
3 Στοίχιση και εσοχές κειμένου
Μάθημα 11:
3 Προσθήκη ειδικών χαρακτήρων
Μάθημα 12:
3 Εισαγωγή εικόνας φόντου
Μάθημα 13:
3 Εισαγωγή εικόνας από το πάνελ
assets
Μάθημα 14:
3 Ροή Κειμένου Γύρω από εικόνες
Μάθημα 15:
3 Εισαγωγή Κινούμενων εικόνων Flash
Μάθημα 16:
3 Δημιουργία συνδέσμων
Μάθημα 17:
3 Δημιουργία εικονοχαρτών
Μάθημα 18:
3 Σχεδιασμός με πίνακες
Μάθημα 19:
3 Ταξινόμηση πίνακα
Μάθημα 20:
3 ΄Ένθετοι πίνακες
Μάθημα 21:
3 Ιχνογράφηση
Μάθημα 22:
3 Δημιουργία CSS φύλλων στυλ
Μάθημα 23:
3 Δημιουργία στοιχείου βιβλιοθήκης

4. Copyright© 2012-2015 -SYSTEM- All rights reserved 4/94
Μάθημα 24:
3 Δημιουργία πλαισίων
Μάθημα 25:
3 Δημιουργία φόρμας
Μάθημα 26:
3 Αλληλεπίδρασης με το χρήστη
Μάθημα 27:
3 Έλεγχος φυλλομετρητή
Μάθημα 28:
3 Δημιουργία αναδυόμενου μενού
Μάθημα 29:
3 Εργαλείο αναδυόμενου μενού
Μάθημα 30:
3 Επικύρωση φόρμα
Μάθημα 31:
3 Πάνελ files
Μάθημα 32:
3 Προσθήκη φακέλων σε τοποθεσία
Μάθημα 33:
3 Σύνδεση απομακρυσμένου
διακομιστή
Μάθημα 34:
3 Ανέβασμα και συγκάλυψη αρχείων
Μάθημα 35:
3 Εύρεση και αντικατάσταση
Μάθημα 36:
3 Έλεγχος ορθογραφίας
Μάθημα 37:
3 Δημιουργία AP στοιχείων
Μάθημα 38:
3 Κάνναβος, χάρακας, οδηγός
Μάθημα 39:
3 Συμπεριφορά σε AP στοιχεία
Μάθημα 40:
3 Επέκταση εγκατάστασης
Μάθημα 41:
3 Quick time

5. Copyright© 2012-2015 -SYSTEM- All rights reserved 5/94
ΜΑΘΗΜΑ 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 (Ξεκίνημα), η σελίδα εκκίνησης κλείνει μόνη της.

6. Copyright© 2012-2015 -SYSTEM- All rights reserved 6/94
Εξερεύνηση του χώρου εργασίας
ΣΕΛΙΔΑ ΕΚΚΙΝΗΣΗΣ
ΟΜΑΔΕΣ ΠΑΝΕΛ

7. Copyright© 2012-2015 -SYSTEM- All rights reserved 7/94
ΜΑΘΗΜΑ 2ο
ΓΡΑΜΜΕΣ ΕΡΓΑΛΕΙΩΝ DOCUMENT
Πριν προχωρήσετε στη δημιουργία ιστοσελίδων, πρέπει να εξοικειωθείτε με την ποικιλία
εργαλείων και πάνελ της διασύνδεσης του Dreamweaver, που σας επιτρέπουν να
δημιουργείτε εύκολα τοποθεσίες Ιστού.
Μετακινήστε το δείκτη του ποντικιού επάνω από το παράθυρο Εγγράφου και τη
γραμμή εργαλείων Document. Αφήστε το δείκτη πάνω από κάποιο κουμπί για να δείτε
το όνομά του.
Το μεγαλύτερο μέρος της εργασίας σχεδιασμού και δημιουργίας κώδικα γίνεται μέσα
στο παράθυρο Εγγράφου. Αυτή η περιοχή είναι γνωστή ως το “σώμα” της σελίδας, όπου
μπορείτε να προσθέσετε, να τροποποιήσετε και να διαγράψετε τη μεγάλη ποικιλία των
στοιχείων που συνιστούν μια ιστοσελίδα.
Κάτω από τις καρτέλες εγγράφων που έχετε ανοίξει θα δείτε τη γραμμή εργαλείων
Document. Η γραμμή εργαλείων Document αποτελείται από 3 τμήματα:
9 Κουμπιά κατάστασης προβολής: Σας επιτρέπουν να επιλέξετε μια από τις προβολές
Design (Σχεδίασης), code (Κώδικα) και Split (Διαίρεσης) για το έγγραφό σας. Η περιοχή
αυτή περιλαμβάνει τα κουμπιά Live View (Ενεργός προβολή) και Live Code (Ενεργός
κώδικας).
9 Τίτλος Σελίδας: Κάθε σελίδα χρειάζεται έναν περιγραφικό τίτλο.
Για να κάνετε απόκρυψη της γραμμής εργαλείων Insert
Window/Insert (ξετσεκάρω)
Για να κάνετε εμφάνιση της γραμμής εργαλείων Insert
Window/Insert (τσεκάρω)
Για να κάνετε απόκρυψη της γραμμής εργαλείων Document
View/ Toolbars/Document (ξετσεκάρω)
Για να κάνετε εμφάνιση της γραμμής εργαλείων Document

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

9. Copyright© 2012-2015 -SYSTEM- All rights reserved 9/94
ΜΑΘΗΜΑ 3ο
ΠΡΟΕΤΟΙΜΑΣΙΑ ΤΟΠΟΘΕΣΙΑΣ ΙΣΤΟΥ
Μια καλή τοποθεσία Ιστού πρέπει να λειτουργεί διαισθητικά και να δημιουργεί μια
θετική, μοναδική εμπειρία στο χρήστη. Η δημιουργία μιας αποτελεσματικής τοποθεσίας
Ιστού ξεκινάει με τον καθορισμό και τη σύνοψη των λόγων για τους οποίους την
κατασκευάζετε. Πριν αρχίζει να δουλεύετε με τις σελίδες, θέστε στον εαυτό σας ή στον
πελάτη σας τις παρακάτω ερωτήσεις:
Ποιο είναι το κοινό σας; Η γνώση του κοινού στο οποίο απευθύνεστε είναι ζωτική. Ο
καθορισμός ενός γενικού προφίλ χρήστη σας βοηθάει να προσεγγίσετε απότελεσματικά
το κοινό σας. Ίσως έχετε πολλά είδη χρηστών σε αυτή την περίπτωση, αναπτύξτε ένα
προφίλ για το καθένα από αυτά.
Τι τεχνολογία διαθέτουν οι χρήστες; Είναι σημαντικό να ξέρετε τον τύπο εξοπλισμού
που χρησιμοποιείται από τους επισκέπτες σας, ώστε να δημιουργήσετε μια τοποθεσία
προσπελάσιμη από το κοινό σας.
Τι χρειάζεται αυτή η τοποθεσία; Τι θέλετε να αποκομίσουν οι επισκέπτες της
τοποθεσίας σας; Σκεφθείτε το σκοπό που θα εξυπηρετεί η τοποθεσίας σας και πως θα
τη χρησιμοποιεί κάθε πιθανός χρήστης. Τι πρέπει να περιλαμβάνει η τοποθεσία για να
εξυπηρετεί το σκοπό της; Χρησιμοποιήστε τα προφίλ χρηστών που δημιουργήσατε για
να προσδιορίσετε πιθανά σενάρια για τον τρόπο που θα χρησιμοποιούν οι επισκέπτες
την τοποθεσία σας. Με βάση αυτά, μπορείτε να προσδιορίσετε τα είδη περιεχομένου
που χρειάζονται.
Τι περιεχόμενο χρειάζεται για την τοποθεσία; Ο προσδιορισμός και η συγκέντρωση
των συστατικών στοιχείων της τοποθεσίας σας αποτελεί ένα σημαντικό τμήμα της
προετοιμασίας σχεδιασμού και παραγωγής μιας τοποθεσίας Ιστού. Πρέπει να
συγκεντρώσετε όλα τα περιεχόμενα όπως κείμενο, εικόνες και στοιχεία πολυμέσων που
θα χρησιμοποιηθούν στην τοποθεσία. Η οργάνωση αυτών των στοιχείων σας επιτρέπει
να δημιουργήσετε μια ολοκληρωμένη τοποθεσία Ιστού.
Τι μήνυμα θέλετε να μεταδίδει η τοποθεσίας σας; Είναι βασικό να γνωρίζετε ακριβώς
τι θέλετε να πείτε στους επισκέπτες σας. Αν δεν έχετε ξεκαθαρίσει τι θέλετε να πείτε,
μάλλον το ίδιο πρόβλημα θα έχουν και οι επισκέπτες σας. Αποσαφηνίστε το μήνυμα της