Dreamweaver. Adobe ΒHΜΑ ΠΡΟΣ ΒHΜΑ. Εκδόσεις: Μ. Γκιούρδας. Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού

Transcript

1 Adobe Dreamweaver CC ΒHΜΑ ΠΡΟΣ ΒHΜΑ Απόδοση: Αγαμέμνων Μήλιος Μηχανικός Λογισμικού Εκδόσεις: Μ. Γκιούρδας Ζωοδόχου Πηγής Τηλ.: Αθήνα,

2 Τίτλος Πρωτοτύπου: Adobe Dreamweaver CC Classroom in a Book ISBN-13: ISBN-10: Copyright 2014 Adobe Systems Incorporated. 345 Park Avenue, San Jose, California , USA Αποκλειστικότητα για την Ελληνική Γλώσσα Εκδόσεις: Μόσχος Γκιούρδας Ζωοδόχου Πηγής Τηλ.: Αθήνα, ISBN: Επιμέλεια κειμένων: Μιχαήλ Μεταξάς Desktop Publishing: Κ. Καλαϊτζής, τηλ.: Εκτύπωση: ΑΛΦΑΒΗΤΟ Α.Ε.Β.Ε., τηλ.: Αναδημοσίευση του βιβλίου σε οποιαδήποτε μορ φή, ολόκληρου ή μέ ρους, καθώς και των περιεχομένων προ γραμ μά των, δεν επιτρέπεται χωρίς την έγγραφη εξου σιο δό τη ση του εκδότη.

3 ΤΙ ΠΕΡΙΕΧΕΙ Ο ΙΣΚΟΣ Το DVD του βιβλίου περιλαμβάνει τα αρχεία των μαθημάτων, που θα χρειαστείτε για να ολοκληρώσετε τις ασκήσεις του βιβλίου. Adobe Dreamweaver CC CLASSROOM IN A BOOK WINDOWS /MAC OS 2012 Adobe Systems Incorporated All rights reserved. Made in the USA. ISBN-13: ISBN-10: /12 Adobe, the Adobe logo, Classroom in a Book and Dreamweaver are trademarks of Adobe Systems Incorporated. Macintosh is a trademark of Apple, registered in the U.S. and other countries. Windows is either a registered trademark or a trademark of Microsoft Corporation in the U.S. and/or other countries. Αρχεία μαθημάτων Κάθε μάθημα έχει τον δικό του φάκελο μέσα στον φάκελο Lessons. Θα πρέπει να αντιγράψετε αυτούς τους φακέλους μαθημάτων στον σκληρό σας δίσκο, πριν να αρχίσετε να εργάζεστε με κάθε μάθημα.

4 ΠΕΡΙΕΧΟΜΕΝΑ ΕΙΣΑΓΩΓΗ 1 Σχετικά με το Βήμα προς βήμα...1 TinyURL...1 Προαπαιτούμενα...2 Εγκατάσταση του προγράμματος...2 Λήψη των αρχείων του βιβλίου...2 Προτεινόμενη σειρά μαθημάτων...3 Γρήγορη εκκίνηση...3 ιαμόρφωση του χώρου εργασίας...4 Οδηγίες για Windows και Macintosh... 5 Πώς θα βρείτε πληροφορίες για το Dreamweaver...5 Έλεγχος για ενημερώσεις...5 Πρόσθετοι πόροι...6 Πιστοποίηση από την Adobe ΠΡΟΣΑΡΜΟΓΗ ΤΟΥ ΧΩΡΟΥ ΕΡΓΑΣΙΑΣ 8 Ξενάγηση στο χώρο εργασίας...10 Εναλλαγή και διαχωρισμός προβολών...11 Εργασία με παλέτες...15 Επιλογή διάταξης χώρου εργασίας...18 Προσαρμογή γραμμών εργαλείων...20 Εξατομίκευση προτιμήσεων...21 ημιουργία προσαρμοσμένων συντομεύσεων πληκτρολογίου...21 Χρήση του Property inspector...23 Χρήση του CSS Designer...24 Εξερευνήστε, πειραματιστείτε, μάθετε...25

5 ΠΕΡΙΕΧΟΜΕΝΑ vii 2 ΤΑ ΒΑΣΙΚΑ ΤΗΣ HTML 28 Τι είναι η HTML;...30 Από πού ξεκίνησε η HTML;...30 Σύνταξη του δικού σας κώδικα HTML...32 Κωδικοί HTML 4 που χρησιμοποιούνται συχνά...40 Εισαγωγή στην HTML ΤΑ ΒΑΣΙΚΑ ΤΩΝ CSS 48 Τι είναι τα CSS;...50 Μορφοποίηση HTML εναντίον μορφοποίησης CSS...51 Προεπιλογές της HTML...53 Μοντέλο κουτιού CSS...56 Πολλαπλά στοιχεία, κλάσεις και ID φτάνει!...57 Μορφοποίηση κειμένου...59 Μορφοποίηση αντικειμένων...77 Επισκόπηση και υποστήριξη CSS ΗΜΙΟΥΡΓΙΑ ΙΑΤΑΞΗΣ ΣΕΛΙ ΑΣ 96 Βασική θεωρία σχεδίασης web...98 Εργασία με μικρογραφίες και wireframe Ορισμός ενός site στο Dreamweaver Χρήση της οθόνης υποδοχής Προεπισκόπηση του ολοκληρωμένου αρχείου σας Τροποποίηση υπάρχουσας διάταξης CSS Προσθήκη εικόνας φόντου στην επικεφαλίδα Εισαγωγή νέων στοιχείων Εισαγωγή στοιχείου πλοήγησης Αλλαγή στοίχισης στοιχείου Τροποποίηση του πλάτους της σελίδας και του χρώματος φόντου Τροποποίηση υπάρχοντος περιεχομένου και μορφοποίησης Εισαγωγή στοιχείου υποκατάστασης θέσης εικόνας Εισαγωγή στοιχείου υποκατάστασης θέσης κειμένου Τροποποίηση του υποσέλιδου Επικύρωση ιστοσελίδων...133

6 viii ΠΕΡΙΕΧΟΜΕΝΑ 5 ΕΡΓΑΣΙΑ ΜΕ ΙΑ ΟΧΙΚΑ ΦΥΛΛΑ ΣΤΥΛ 136 Προεπισκόπηση ολοκληρωμένου αρχείου Εργασία με το CSS Designer Εργασία με κείμενο Εργασία με γραφικά φόντου Κλάσεις, ID και απόγονους επιλογείς ημιουργία διαδραστικού μενού ημιουργία ψεύτικων στηλών Μετακίνηση κανόνων σε ένα εξωτερικό φύλλο στυλ ημιουργία φύλλων στυλ για άλλους τύπους μέσων ΕΡΓΑΣΙΑ ΜΕ ΠΡΟΤΥΠΑ 186 Προεπισκόπηση ολοκληρωμένων αρχείων ημιουργία προτύπου από υπάρχουσα διάταξη Εισαγωγή επεξεργάσιμων περιοχών Παραγωγή θυγατρικών σελίδων Ενημέρωση προτύπου Χρήση στοιχείων βιβλιοθήκης Χρήση include διακομιστή ΕΡΓΑΣΙΑ ΜΕ ΚΕΙΜΕΝΟ, ΛΙΣΤΕΣ ΚΑΙ ΠΙΝΑΚΕΣ 212 Προεπισκόπηση ολοκληρωμένου αρχείου ημιουργία και απόδοση στυλ σε κείμενο ημιουργία και απόδοση στυλ σε πίνακες Ορθογραφικός έλεγχος ιστοσελίδων Εύρεση και αντικατάσταση κειμένου ΕΡΓΑΣΙΑ ΜΕ ΕΙΚΟΝΕΣ 250 Επανάληψη βασικής θεωρίας εικόνων στο web Προεπισκόπηση του ολοκληρωμένου αρχείου Εισαγωγή εικόνας Προσαρμογή θέσεων εικόνων με κλάσεις CSS Εργασία με την παλέτα Insert Χρήση του Adobe Bridge για εισαγωγή εικόνων Εισαγωγή ασύμβατων τύπων αρχείων Εργασία με τα έξυπνα αντικείμενα του Photoshop...268

7 ΠΕΡΙΕΧΟΜΕΝΑ ix Αντιγραφή και επικόλληση εικόνων από τα Fireworks και Photoshop Εισαγωγή εικόνων με μεταφορά και απόθεση Βελτιστοποίηση εικόνων με το Property inspector ΕΡΓΑΣΙΑ ΜΕ ΠΛΟΗΓΗΣΗ 280 Τα βασικά για τις υπερσυνδέσεις Προεπισκόπηση του ολοκληρωμένου αρχείου σας ημιουργία εσωτερικών υπερσυνδέσεων ημιουργία συνδέσμου εικόνας ημιουργία εξωτερικού συνδέσμου ημιουργία συνδέσμων ηλεκτρονικού ταχυδρομείου Στόχευση στοιχείων σελίδας Έλεγχος της σελίδας σας ΠΡΟΣΘΗΚΗ ΙΑ ΡΑΣΤΙΚΟΤΗΤΑΣ 300 Μάθετε τις συμπεριφορές του Dreamweaver Προεπισκόπηση ολοκληρωμένου αρχείου Εργασία με τις συμπεριφορές του Dreamweaver Εργασία με τα widget jquery Accordion ΕΡΓΑΣΙΑ ΜΕ ΚΙΝΗΣΗ ΚΑΙ ΒΙΝΤΕΟ ΓΙΑ ΤΟ WEB 322 Τα βασικά για την κίνηση και το βίντεο για το web Προεπισκόπηση ολοκληρωμένου αρχείου Προσθήκη κίνησης web σε μια σελίδα Προσθήκη βίντεο web σε μια σελίδα ΕΡΓΑΣΙΑ ΜΕ ΦΟΡΜΕΣ 338 Προεπισκόπηση ολοκληρωμένου αρχείου Λίγα λόγια για τις φόρμες Προσθήκη φόρμας σε σελίδα Εισαγωγή στοιχείων φόρμας κειμένου Εισαγωγή πλαισίων ελέγχου ημιουργία ραδιοφωνικών κουμπιών Ενσωμάτωση περιοχών κειμένου Εργασία με λίστες Προσθήκη κουμπιού υποβολής...360

8 x ΠΕΡΙΕΧΟΜΕΝΑ Καθορισμός ενέργειας φόρμας Αποστολή δεδομένων φόρμας με ηλεκτρονικό ταχυδρομείο Απόδοση στυλ σε φόρμες Περισσότερα για τις φόρμες ΗΜΟΣΙΕΥΣΗ ΣΤΟ WEB 370 Ορισμός απομακρυσμένου site Απόκρυψη φακέλων και αρχείων Ανακεφαλαίωση Μεταφορά του site στο web Συγχρονισμός τοπικών και απομακρυσμένων site ΣΧΕ ΙΑΣΗ ΓΙΑ ΚΙΝΗΤΕΣ ΣΥΣΚΕΥΕΣ 390 Προεπισκόπηση ολοκληρωμένου αρχείου Σχεδίαση για κινητές συσκευές ημιουργία ερωτήματος μέσου για smartphone Προσθήκη κανόνων σε ερώτημα μέσου Προσαρμογή πλοήγησης CSS σε περιβάλλοντα κινητών συσκευών Εφαρμογή στυλ στο κύριο περιεχόμενο οκιμή ερωτήματος μέσου Σχεδίαση απόκρισης ημιουργία φύλλων στυλ για tablet Edge Inspect Περισσότερες πληροφορίες ΠΡΟΣΘΕΤΟ ΚΕΦΑΛΑΙΟ ΣΤΟ WEB: ΕΡΓΑΣΙΑ ΜΕ ΚΩ ΙΚΑ 422 ΠΑΡΑΡΤΗΜΑ: TINYURL 422 ΕΥΡΕΤΗΡΙΟ 426