φβακασ ταφροσ θμειϊςεισ του Μακιματοσ χεδίαςθ Ιςτοςελίδων ΙΙ

Transcript

1 Σο Dreamweaver είναι ζνα εργαλείο ανάπτυξθσ Ιςτοφ, που δθμιουργικθκε από τθ Macromedia (ζχει εξαγοραςτεί από τθν Adobe Systems). Οι αρχικζσ εκδόςεισ τθσ εφαρμογισ χρθςιμοποιοφταν ωσ οι απλοί WYSIWYG επεξεργαςτζσ HTML, αλλά οι πρόςφατεσ εκδόςεισ ζχουν ενςωματϊςει ξεχωριςτι υποςτιριξθ για πολλζσ άλλεσ τεχνολογίεσ Ιςτοφ όπωσ CSS, JavaScript, Σο Dreamweaver είναι διαδεδομζνο από το τζλθ τθσ δεκαετίασ του '90 και κρατά αυτιν τθν περίοδο περίπου το 80% τθσ αγοράσ επεξεργαςτϊν HTML. Σο λογιςμικό είναι διακζςιμο και για τθ MAC και για τισ πλατφόρμεσ Windows, αλλά μπορεί επίςθσ να λειτουργιςει ςε Unix πλατφόρμεσ μζςω τθσ χριςθσ του λογιςμικοφ εξομοίωςθσ. Το menu λειτουργιών του dreamwever New Δθμιουργία νζου εγγράφου Open Άνοιγμα ενόσ εγγράφου Open Recent Άνοιγμα ενόσ από τα τελευταία ζγγραφα που ζχουμε επεξεργαςτεί Open in Frame Άνοιγμα ενόσ εγγράφου μζςα ςε ζνα πλαίςιο Close Κλείςιμο του τρζχοντοσ εγγράφου Close All Κλείςιμο όλων των ανοιχτϊν εγγράφων Save Αποκικευςθ ενόσ εγγράφου Save as Αποκικευςθ ενόσ εγγράφου με διαφορετικό όνομα Save All Αποκικευςθ όλων των ανοιχτϊν εγγράφων Save to Remote Server Αποκικευςθ του εγγράφου κατευκείαν ςτο server Save as Template Αποκικευςθ του εγγράφου ωσ πρότυπο Revert Επαναφορά του εγγράφου μετά τθν τελευταία αποκικευςθ Print Code Εκτφπωςθ του κϊδικα HTML Import Ειςαγωγι δεδομζνων από εξωτερικι πθγι Export Εξαγωγι δεδομζνων Convert Μετατροπι τθσ ςελίδασ ςε μορφι XHTML Preview in Browser Προεπιςκόπιςθ τθσ ςελίδασ μασ ςτον Browser Check Pages Ζλεγχοσ των ςελίδων μασ για λάκθ Design Notes θμειϊςεισ του ςχεδιαςτι Exit Ζξοδοσ από το Dreamweaver

2 Undo Αναίρεςθ τθσ τελευταίασ ενζργειασ Redo Αναίρεςθ τθσ αναίρεςθσ Cut Αποκοπι του επιλεγμζνου ςτοιχείου Copy Αντιγραφι του επιλεγμζνου ςτοιχείου Paste Επικόλλθςθ του περιεχομζνου του πρόχειρου Clear Διαγραφι του επιλεγμζνου ςτοιχείου Copy HTML Αντιγραφι κομματιοφ κϊδικα Paste HTML Επικόλλθςθ του παραπάνω κϊδικα Paste Text Επικόλλθςθ κείμενου που υπάρχει ςτο πρόχειρο Select All Επιλογι όλων των ςτοιχείων του εγγράφου Select Parent Tag Επιλογι τθσ πατρικισ ετικζτασ Select Child Επιλογι ζνκετθσ ετικζτασ Find and Replace Εφρεςθ και αντικατάςταςθ κειμζνου Find Next Εφρεςθ επόμενου Go to Line Ενεργοποιείται μόνο ςτθν προβολι κϊδικα και πθγαίνει τον κζρςορα ςτθν γραμμι που κα του ποφμε Show Code Hints Εμφανίηει κάποια Hints ςτον κϊδικα Indent code Προςκζτει ςτον επίλεγμζνο κϊδικα μία εςοχι Outdent code Προςκζτει ςτον επίλεγμζνο κϊδικα μία εξοχι Balance Braces Επιλογι για διόρκωςθ ςτθν HTML Tag Libraries Βιβλιοκικεσ με τισ ετικζτεσ τθσ HTML Keyboard Shortcuts υντομεφςεισ πλθκτρολογίου Preferences Ρυκμίςεισ του Dreamweaver ελίδα 2

3 Code Προβόλθ ςε μορφι κϊδικα Design Προβολι ςε μορφι ςχεδίαςθσ Code and Design Προβολι και των δφο παραπάνω με τθν οκόνθ χωριςμζνθ ςτθ μζςθ Switch Views Διακόπτθσ εναλλαγισ προβολϊν Refresh Design View Ανανζωςθ τθσ προβολισ ςχεδίαςθσ Head Content Προβολι περιεχομζνου του Head Noscript Content Επιλογι να μθν εμφανίηει τα περιεχόμενα ενόσ Script Table Mode Μορφι ζνοσ πίνακα Visual Aids Προβολι κρυφϊν ςτοιχείων (Διαςτάςεισ πίνακα, διαςτάςεισ περιγραμμάτων, αόρατα ςτοιχεία κ.α.) Code View Options Επιλογζσ προβολισ ςτοιχείων ςτον κϊδικα Rulers Εμφάνιςθ και απόκρυψθ του χάρακα Grid Εμφάνιςθ και απόκρυψθ του πλζγματοσ Tracing Image Επιλογι για το Tracing Image που βρίςκεται ςτο Page Properties Plugins Επιλογζσ για διάφορα πρόςκετα προγραμματάκια (Plugins) Hide Panels Απόκρυψθ των βοθκθτικϊν panels Toolbars Εμφάνιςθ και απόκρυψθ των γραμμϊν εργαλείων ελίδα 3

4 Tag Ειςαγωγι ετικζτασ Image Ειςαγωγι εικόνασ Image Objects Ειςαγωγι αντικειμζνων εικόνασ (εικόνεσ εναλλαγισ, ςτοιχείο κράτθςθσ κζςθσ για εικόνα κ.α.) Media Ειςαγωγι αντικειμζνων Flash, Applets, Plugins κ.α. Table Ειςαγωγι πίνακα Table Objects Ειςαγωγι αντικειμζνων πίνακα Layout Objects Ειςαγωγι επιπζδων (Layers) Form Ειςαγωγι φόρμασ και αντικειμζνων φόρμασ Hyperlink Ειςαγωγι υπερςυνδζςμου Link Ειςαγωγι υπερςυνδζςμου που οδθγεί ςε κάποιο Name Anchor Ειςαγωγι άγκυρασ Date Ειςαγωγι θμερομθνίασ Comment Ειςαγωγι ςχολίου HTML Ειςαγωγι ςτοιχείων HTML (Οριηόντια γραμμι, πλαίςια, ςτοιχεία κειμζνου, ςτοιχεία Head, αντικείμενα Scripts, ειδικοφσ χαρακτιρεσ) Templates Objects Επιλογζσ για τθ διαμόρφωςθ ενόσ προτφπου Customize Favorites Επιλογζσ για πρόςκεςθ και αφαίρεςθ εντολϊν ςε αυτό το μενοφ Get More Objects φνδεςθ με το για download περιςςότερων αντικειμζνων ελίδα 4

5 Page Properties Επεξεργαςία των ιδιοτιτων τθσ ςελίδασ Template Properties Επεξεργαςία των ιδιοτιτων ενόσ πρότυπου Selection Properties Εμφάνιςθ και απόκρυψθ των ιδιοτιτων του επιλεγμζνου ςτοιχείου ςτο κάτω μζροσ του Dreamweaver Edit Tag Επεξεργαςία μιασ επιλεγμζνθσ ετικζτασ Quick Tag Editor Γριγορθ επεξεργαςία μιασ επιλεγμζνθσ ετικζτασ Make Link Δθμιουργία υπερςφνδεςμου ςτο επιλεγμζνο ςτοιχείο Remove Link Κατάργθςθ υπερςυνδζςμου εάν υπάρχει Open Linked Page Άνοιγμα τθσ ςυνδεδεμζνθσ ςελίδασ Link Target Επιλογζσ για το άνοιγμα τθσ νζασ τοποκεςίασ Table Εντολζσ επεξεργαςίασ ενόσ πίνακα Image Εντολζσ επεξεργαςίασ μίασ εικόνασ Frameset Εντολζσ επεξεργαςίασ ενόσ Frameset (ςφνολο πλαιςίων) Arrange Εντολζσ επεξεργαςίασ επιπζδων (Layers) Align Εντολζσ ςτοίχιςθσ των ςτοιχείων Library Εντολζσ επεξεργαςίασ των βιβλιοκθκϊν Templates Εντολζσ επεξεργαςίασ πρότυπων ςελίδων Indent Προςκζτει ςτο επιλεγμζνο κείμενο μία εςοχι Outdent Προςκζτει ςτο επιλεγμζνο κείμενο μία εξοχι Paragraph Format Δίνει ςτθ επιλεγμζνθ παράγραφο μορφι επικεφαλίδασ Align τοιχίηει τθν επιλεγμζνθ παράγραφο List Πρόςκεςθ κουκίδων και αρίκμθςθ ςτο επιλεγμζνο κείμενο Font Αλλάηει τθ γραμματοςειρά ςτο επιλεγμζνο κείμενο Style Αλλάηει το ςτυλ ςτο επιλεγμζνο κείμενο CSS Styles Εφαρμόηει ζνα ςτυλ ςτο επιλεγμζνο κείμενο Size Αλλάηει το μζγεκοσ ςτο επιλεγμζνο κείμενο Size Change Αλλάηει το μζγεκοσ ςτο επιλεγμζνο κείμενο με μζτρθςθ του Dreamweaver Color Αλλάηει το χρϊμα ςτο επιλεγμζνο κείμενο\ Check Spelling Εκτελεί τον ορκογράφο (μόνο Αγγλικά) ελίδα 5

6 Start Recording Αρχίηει θ εγγραφι μίασ μακροεντολισ Play Recorded Command Εκτελεί τθ εγγεγραμζνθ μακροεντολι Edit Command List Επεξεργαςία τθσ λίςτασ των εντολϊν Get More Commands φνδεςθ με το για download περιςςότερων commands Manage Extensions Διαχείριςθ πρόςκετων λειτουργιϊν Apply Source Formatting Εντολι ςε περίπτωςθ που γράφουμε εμείσ τον κϊδικα HTML Apply Source Formatting to Selection Εντολι ςε περίπτωςθ που γράφουμε εμείσ τον κϊδικα HTML Clean Up HTML Εντολι ςε περίπτωςθ που γράφουμε εμείσ τον κϊδικα HTML Clean Up Word HTML Εντολι ςε περίπτωςθ που γράφουμε εμείσ τον κϊδικα HTML Add/Remove Netscape Resize Fix Εντολι ςυμβατότθτασ με τον Netscape Optimize Images in Fireworks Εντολι επεξεργαςίασ φωτογραφίασ ςτο Fireworks Create Photo Album Δθμιουργία Photo Album (απαραίτθτο το Fireworks) Set Color Scheme Οριςμόσ ςυδυαςμοφ χρωμάτων τθσ ςελίδασ Format Table Εντολι μορφοποίθςθσ ενόσ πίνακα Sort Table Εντολι ταξινόμθςθσ ενόσ πίνακα Manage Sites Εντολι διαχείρθςθσ των υπαρχόντων Sites Get Εντολι κατεβάςματοσ αρχείων από τον server Check Out Εντολι αν δουλεφουμε ςε τοπικό δίκτυο Put Εντολι ανεβάςματοσ αρχείων ςτον server Check In Εντολι αν δουλεφουμε ςε τοπικό δίκτυο Undo Check Out Αναίρεςθ τθσ εντολισ Check Out Reports Εντολι για αναφορζσ Check Links Sitewide Ζλεγχοσ των Links του Site Change Link Sitewide Αλλαγι των Links του Site Advanced Εντολζσ για προχωρθμζνουσ ελίδα 6

7 Όλεσ οι εντολζσ αυτοφ του μενοφ αφοροφν τθν εμφάνιςθ και απόκρυψθ των βοθκθτικϊν Panel ςτθ δεξιά πλευρά του εγγράφου κακϊσ και όλων των extra παρακφρων που χρθςιμοποιοφμε ςτο Dreamweaver Σο μενοφ αυτό περιζχει εντολζσ ςχετικά με τθ βοικεια του Dreamweaver ςτον τοπικό δίςκο ι ςτο Internet ελίδα 7

8 Επιςκόπηςη διάταξησ χώρου εργαςίασ Ο χϊροσ εργαςίασ του Dreamweaver ςάσ επιτρζπει να δείτε τα ζγγραφα και τισ ιδιότθτεσ των αντικειμζνων. Επίςθσ, πολλζσ από τισ πιο ςυνθκιςμζνεσ ενζργειεσ βρίςκονται ςε γραμμζσ εργαλείων ςτο χϊρο εργαςίασ, ϊςτε να μπορείτε να επιφζρετε γριγορα αλλαγζσ ςτα ζγγραφά ςασ. τα Windows, το Dreamweaver παρζχει μια διάταξθ ενςωμάτωςθσ όλων ςε ζνα παράκυρο. τον ενςωματωμζνο χϊρο εργαςίασ, όλα τα παράκυρα και οι πίνακεσ είναι ενςωματωμζνα ςε ζνα μεγαλφτερο παράκυρο εφαρμογισ. Α.Γραμμή Application Β.Γραμμή εργαλειών Document C.Παράθυρο Document D.Ομάδεσ πινάκων Ε.Εναλλαγή χώρων εργαςίασ F.Εργαλείο επιλογήσ tag G.Εργαλείο επιθεώρηςησ ιδιοτήτων H.Πίνακασ Files ελίδα 8

9 το Mac OS, το Dreamweaver μπορεί να εμφανίςει πολλαπλά ζγγραφα ςε ζνα παράκυρο με καρτζλεσ που επιςθμαίνουν το κάκε ζγγραφο. Σο Dreamweaver μπορεί επίςθσ να εμφανίςει ζναν ανεξάρτθτο χϊρο εργαςίασ, ςτον οποίο κάκε ζγγραφο εμφανίηεται ςτο δικό του παράκυρο. Οι ομάδεσ πινάκων είναι αρχικά ςυγκεντρωμζνεσ όλεσ μαηί, όμωσ θ ςυγκζντρωςθ μπορεί να καταργθκεί και θ κάκε ομάδα να εμφανίηεται ςτο δικό τθσ παράκυρο. Όταν οι ομάδεσ πινάκων είναι ςυγκεντρωμζνεσ και θ περιοχι του εγγράφου μεγιςτοποιθμζνθ, θ αλλαγι μεγζκουσ ι θ εμφάνιςθ και θ απόκρυψθ των πινάκων ζχει ωσ αποτζλεςμα τθν αυτόματθ προςαρμογι μεγζκουσ του κφριου εγγράφου, όπωσ και ςτα Windows. Α.Γραμμή Application Β.Γραμμή εργαλειών Document C.Παράθυρο Document D. Εναλλαγή χώρων εργαςίασ E.Ομάδεσ πινάκων F.Εργαλείο επιλογήσ tag G.Εργαλείο επιθεώρηςησ ιδιοτήτων H.Πίνακασ Files ελίδα 9

10 Χώξνο εξγαζίαο & επηζθόπεζε ζηνηρείσλ Ο ρώξνο εξγαζίαο πεξηιακβάλεη ηα αθόινπζα ζηνηρεία. Σεκείσζε: Τν Dreamweaver παξέρεη πνιινύο άιινπο πίλαθεο, εξγαιεία επηζεώξεζεο θαη παξάζπξα. Γηα λα αλνίμεηε ηνπο πίλαθεο, ηα εξγαιεία επηζεώξεζεο θαη ηα παξάζπξα, ρξεζηκνπνηήζηε ην κελνύ Window. Οζόλε ππνδνρήο Σαο επηηξέπεη λα αλνίμεηε έλα πξόζθαην έγγξαθν ή λα δεκηνπξγήζεηε έλα λέν. Από ηελ νζόλε ππνδνρήο, κπνξείηε επίζεο λα κάζεηε πεξηζζόηεξεο πιεξνθνξίεο γηα ην Dreamweaver θάλνληαο κηα μελάγεζε ζην πξντόλ ή παξαθνινπζώληαο έλα εθπαηδεπηηθό βίληεν. Γξακκή Application Βξίζθεηαη θαηά κήθνο ηεο θνξπθήο ηνπ παξαζύξνπ ηεο εθαξκνγήο θαη πεξηέρεη έλα πιαίζην ελαιιαγήο ρώξσλ εξγαζίαο, κελνύ (κόλν ζηα Windows) θαη άιια ζηνηρεία ειέγρνπ ηεο εθαξκνγήο. Γξακκή εξγαιείσλ Document Πεξηέρεη θνπκπηά πνπ παξέρνπλ επηινγέο γηα δηαθνξεηηθέο πξνβνιέο ηνπ παξαζύξνπ Document (όπσο πξνβνιή Design θαη πξνβνιή Code), δηάθνξεο επηινγέο πξνβνιήο θαη νξηζκέλεο ζπλεζηζκέλεο ιεηηνπξγίεο, όπσο ε πξνεπηζθόπεζε ζε πξόγξακκα πεξηήγεζεο. Γξακκή εξγαιείσλ Standard (Γελ εκθαλίδεηαη ζηελ πξνεπηιεγκέλε δηάηαμε ρώξνπ εξγαζίαο). Πεξηέρεη θνπκπηά γηα ζπλεζηζκέλεο ιεηηνπξγίεο από ηα κελνύ File θαη Edit: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo θαη Redo. Γηα λα εκθαληζηεί ε γξακκή εξγαιείσλ Standard, επηιέμηε View > Toolbars > Standard. Γξακκή εξγαιείσλ Coding (Δκθαλίδεηαη κόλν ζε πξνβνιή Code). Πεξηέρεη θνπκπηά πνπ ζαο επηηξέπνπλ λα εθηειείηε αξθεηέο βαζηθέο ιεηηνπξγίεο θσδηθνπνίεζεο. Γξακκή εξγαιείσλ Style Rendering (Κξπθή από πξνεπηινγή). Πεξηέρεη θνπκπηά πνπ ζαο επηηξέπνπλ λα δείηε πώο θαίλεηαη ε ζρεδίαζή ζαο ζε δηαθνξεηηθνύο ηύπνπο κέζσλ, αλ ρξεζηκνπνηείηε θύιια ζηπι πνπ εμαξηώληαη από ηα κέζα. Πεξηέρεη επίζεο έλα θνπκπί πνπ ζαο επηηξέπεη λα ελεξγνπνηείηε ή λα απελεξγνπνηείηε ηα επηθαιππηόκελα θύιια ζηπι (CSS). Παξάζπξν Document Δκθαλίδεη ην ηξέρνλ έγγξαθν ηελ ώξα πνπ ην δεκηνπξγείηε θαη ην επεμεξγάδεζηε. Εξγαιείν επηζεώξεζεο ηδηνηήησλ Σαο επηηξέπεη λα εκθαλίδεηε θαη λα αιιάδεηε κηα ζεηξά ηδηνηήησλ ηνπ επηιεγκέλνπ αληηθεηκέλνπ ή θεηκέλνπ. Κάζε αληηθείκελν έρεη δηαθνξεηηθέο ηδηόηεηεο. Τν εξγαιείν επηζεώξεζεο ηδηνηήησλ δελ αλαπηύζζεηαη από πξνεπηινγή ζηε δηάηαμε ηνπ ρώξνπ εξγαζίαο Coder. Εξγαιείν επηινγήο tag Βξίζθεηαη ζηε γξακκή Status ζην θάησ κέξνο ηνπ παξαζύξνπ Document. Παξνπζηάδεη ηελ ηεξαξρία ησλ tag πνπ πεξηθιείνπλ ηελ ηξέρνπζα επηινγή. Κάληε θιηθ ζε νπνηαδήπνηε tag ηεο ηεξαξρίαο γηα λα ην επηιέμεηε καδί κε όια ηα πεξηερόκελά ηνπ. Πίλαθεο Σαο βνεζνύλ λα παξαθνινπζείηε θαη λα ηξνπνπνηείηε ηελ εξγαζία ζαο. Παξαδείγκαηα πηλάθσλ είλαη ν πίλαθαο Insert, ν πίλαθαο CSS Styles θαη ν πίλαθαο Files. Γηα λα επεθηείλεηε έλαλ πίλαθα, θάληε δηπιό θιηθ ζηελ θαξηέια ηνπ. ελίδα 10

11 Πίλαθαο Insert Πεξηέρεη θνπκπηά γηα ηελ εηζαγσγή δηάθνξσλ ηύπσλ αληηθεηκέλσλ, όπσο εηθόλσλ, πηλάθσλ θαη ζηνηρείσλ κέζσλ, ζε έλα έγγξαθν. Κάζε αληηθείκελν είλαη έλα ηκήκα θώδηθα HTML πνπ ζαο επηηξέπεη λα νξίδεηε δηάθνξα ραξαθηεξηζηηθά θαηά ηελ εηζαγσγή ηνπ. Γηα παξάδεηγκα, κπνξείηε λα εηζάγεηε έλαλ πίλαθα θάλνληαο θιηθ ζην θνπκπί Table ηνπ πίλαθα Insert. Αλ πξνηηκάηε, κπνξείηε λα εηζάγεηε αληηθείκελα ρξεζηκνπνηώληαο ην κελνύ Insert αληί γηα ηνλ πίλαθα Insert. Πίλαθαο Files Σαο επηηξέπεη λα δηαρεηξίδεζηε ηα αξρεία θαη ηνπο θαθέινπο ζαο είηε απνηεινύλ κέξνο κηαο ηνπνζεζίαο Dreamweaver είηε βξίζθνληαη ζε απνκαθξπζκέλν δηαθνκηζηή. Ο πίλαθαο Files ζάο επηηξέπεη επίζεο λα έρεηε πξόζβαζε ζε όια ηα αξρεία ζηνλ ηνπηθό ζαο δίζθν, κε ηνλ ίδην ζρεδόλ ηξόπν πνπ ρξεζηκνπνηείηε ηελ Δμεξεύλεζε ησλ Windows (Windows) ή ην Finder (Macintosh). Επιςκόπηςη του παραθφρου Document Τν παξάζπξν Document παξνπζηάδεη ην ηξέρνλ έγγξαθν. Μπνξείηε λα επηιέμεηε νπνηαδήπνηε από ηηο παξαθάησ πξνβνιέο: Πξνβνιή Design Έλα πεξηβάιινλ ζρεδίαζεο γηα νπηηθή δηάηαμε ζειίδαο, νπηηθή επεμεξγαζία θαη γξήγνξε αλάπηπμε εθαξκνγώλ. Σε απηή ηελ πξνβνιή, ην Dreamweaver εκθαλίδεη κηα πιήξσο επεμεξγάζηκε νπηηθή αλαπαξάζηαζε ηνπ εγγξάθνπ, παξόκνηα κε απηή πνπ ζα βιέπαηε αλ πξνβάιαηε ηε ζειίδα ζε έλα πξόγξακκα πεξηήγεζεο. Πξνβνιή Code Έλα πεξηβάιινλ εγγξαθήο θώδηθα γηα λα γξάθεηε θαη λα επεμεξγάδεζηε θώδηθα HTML, JavaScript, γιώζζαο δηαθνκηζηή όπσο PHP ή ColdFusion Markup Language (CFML) θαη νπνηνδήπνηε άιιν είδνο θώδηθα. Πξνβνιή Split Code Μηα δηαηξεκέλε εθδνρή ηεο πξνβνιήο Code πνπ ζαο επηηξέπεη ηελ θύιηζε κέζα ζην έγγξαθν ώζηε λα εξγαζηείηε ζπγρξόλσο ζε δηαθνξεηηθέο ελόηεηέο ηνπ. Πξνβνιή Code and Design Σαο επηηξέπεη λα δείηε ην ίδην έγγξαθν ηόζν ζε πξνβνιή Code όζν θαη ζε πξνβνιή Design ζε έλα παξάζπξν. Πξνβνιή Live Η πξνβνιή Live κνηάδεη κε ηελ πξνβνιή Design θαη εκθαλίδεη κηα πην ξεαιηζηηθή αλαπαξάζηαζε ηεο εκθάληζεο ηνπ εγγξάθνπ ζαο ζε έλα πξόγξακκα πεξηήγεζεο, επηηξέπνληάο ζαο λα αιιειεπηδξάηε κε ην έγγξαθν αθξηβώο όπσο ζα θάλαηε ζε έλα πξόγξακκα πεξηήγεζεο. Η πξνβνιή Live δελ είλαη επεμεξγάζηκε. Ωζηόζν, κπνξείηε λα επεμεξγαζηείηε ην έγγξαθν ζε πξνβνιή Code θαη λα θάλεηε αλαλέσζε ηεο πξνβνιήο Live ώζηε λα δείηε ηηο αιιαγέο ζαο. Πξνβνιή Live Code Η πξνβνιή απηή είλαη δηαζέζηκε κόλν όηαλ βιέπεηε έλα έγγξαθν ζε πξνβνιή Live. Σηελ πξνβνιή Live Code εκθαλίδεηαη ν ίδηνο ν θώδηθαο πνπ ρξεζηκνπνηεί έλα πξόγξακκα πεξηήγεζεο γηα λα εθηειέζεη ηε ζειίδα θαη κπνξεί λα αιιάμεη δπλακηθά θαζώο αιιειεπηδξάηε κε ηε ζειίδα ζε πξνβνιή Live. Η πξνβνιή Live Code δελ είλαη επεμεξγάζηκε. ελίδα 11

12 Όηαλ έλα παξάζπξν Document είλαη κεγηζηνπνηεκέλν (πξνεπηινγή), ζηελ θνξπθή ηνπ εκθαλίδνληαη θαξηέιεο πνπ παξνπζηάδνπλ ηα νλόκαηα αξρείσλ όισλ ησλ αλνηρηώλ εγγξάθσλ. Τν Dreamweaver εκθαλίδεη έλαλ αζηεξίζθν κεηά από ην όλνκα αξρείνπ αλ έρεηε θάλεη αιιαγέο νη νπνίεο δελ έρνπλ απνζεθεπηεί αθόκε.γηα λα κεηαβείηε ζε έλα έγγξαθν, θάληε θιηθ ζηελ θαξηέια ηνπ. Τν Dreamweaver εκθαλίδεη επίζεο ηε γξακκή εξγαιείσλ Related Files θάησ από ηελ θαξηέια ηνπ εγγξάθνπ (ή θάησ από ηε γξακκή ηίηινπ ηνπ εγγξάθνπ, αλ βιέπεηε έγγξαθα ζε μερσξηζηά παξάζπξα). Τα ζρεηηθά αξρεία είλαη έγγξαθα πνπ ζρεηίδνληαη κε ην ηξέρνλ αξρείν, όπσο αξρεία CSS ή αξρεία JavaScript. Γηα λα αλνίμεηε έλα από απηά ηα ζρεηηθά αξρεία ζην παξάζπξν Document, θάληε θιηθ ζην αληίζηνηρν όλνκα αξρείνπ ζηε γξακκή εξγαιείσλ Related Files. Επηζθόπεζε ηεο Βαζηθήο γξακκήο εξγαιείσλ Η γξακκή εξγαιείσλ Standard πεξηέρεη θνπκπηά γηα ζπλεζηζκέλεο ελέξγεηεο από ηα κελνύ File θαη Edit: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo θαη Redo. Χξεζηκνπνηήζηε απηά ηα θνπκπηά όπσο ρξεζηκνπνηείηε ηηο αληίζηνηρεο εληνιέο ηνπ κελνύ. Πξνεπηζθόπεζε γξακκήο Status Η θαηάζηαζεο Status ζην θάησ κέξνο ηνπ παξαζύξνπ Document παξέρεη επηπιένλ πιεξνθνξίεο ζρεηηθά κε ην έγγξαθν πνπ δεκηνπξγείηε. Α.Εξγαιείν επηινγήο tag Β.Εξγαιείν επηινγήο C.Εξγαιείν ρεξηνύ D.Εξγαιείν δνπκ E.Οξηζκόο κεγέζπλζεο F.Αλαδπόκελν κελνύ Window size G.Μέγεζνο εγγξάθνπ θαη εθηηκώκελνο ρξόλνο ιήςεο H.Έλδεημε θσδηθνπνίεζεο Εξγαιείν επηινγήο εηηθεηώλ Παξνπζηάδεη ηελ ηεξαξρία ησλ tag πνπ πεξηθιείνπλ ηελ ηξέρνπζα επηινγή. Κάληε θιηθ ζε νπνηνδήπνηε tag ηεο ηεξαξρίαο γηα λα ην επηιέμεηε καδί κε όια ηα πεξηερόκελά ηνπ. Κάληε θιηθ ζηελ εηηθέηα <body> γηα λα επηιέμεηε όιν ην ζώκα ηνπ εγγξάθνπ. Γηα λα νξίζεηε ηα ραξαθηεξηζηηθά class ή ID ελόο tag ζην εξγαιείν επηινγήο tag, ελίδα 12

13 θάληε δεμί θιηθ (Windows) ή Control θαη θιηθ (Macintosh) ζην tag θαη επηιέμηε κηα θαηεγνξία ή έλα ID από ην κελνύ πεξηβάιινληνο. Εξγαιείν επηινγήο Δλεξγνπνηεί θαη απελεξγνπνηεί ην εξγαιείν ρεξηνύ Εξγαιείν ρεξηνύ Σαο επηηξέπεη λα θάλεηε θιηθ ζην έγγξαθν θαη λα ην κεηαθέξεηε ζην παξάζπξν Document. Εξγαιείν δνπκ θαη αλαδπόκελν κελνύ Set Magnification Σαο επηηξέπεη λα νξίζεηε έλα επίπεδν κεγέζπλζεο γηα ην έγγξαθό ζαο. Αλαδπόκελν κελνύ Window size(με δηαζέζηκν ζε πξνβνιή Code). Σαο επηηξέπεη λα θέξεηε ην κέγεζνο ηνπ παξαζύξνπ Document ζε πξνθαζνξηζκέλεο ή πξνζαξκνζκέλεο δηαζηάζεηο. Μέγεζνο εγγξάθνπ θαη ρξόλνο ιήςεο Πξνβάιιεη ην εθηηκώκελν κέγεζνο ηνπ εγγξάθνπ θαη ηνλ εθηηκώκελν ρξόλν ιήςεο ηεο ζειίδαο, ζπκπεξηιακβαλνκέλσλ όισλ ησλ εμαξηώκελσλ αξρείσλ όπσο ησλ εηθόλσλ ή ησλ αξρείσλ κέζσλ. Έλδεημε θσδηθνπνίεζεο Παξνπζηάδεη ηελ θσδηθνπνίεζε ηνπ θεηκέλνπ ηνπ ηξέρνληνο εγγξάθνπ. Επηζθόπεζε ηεο γξακκήο εξγαιείσλ Coding Η γξακκή εξγαιείσλ Coding πεξηέρεη θνπκπηά πνπ ζαο επηηξέπνπλ λα εθηειέζεηε αξθεηέο βαζηθέο ελέξγεηεο ζπγγξαθήο θώδηθα, όπσο λα ζπκπηύμεηε θαη λα αλαπηύμεηε κέξε ηνπ θώδηθα, λα επηζεκάλεηε κε έγθπξν θώδηθα, λα πξνζζέζεηε θαη λα αθαηξέζεηε ζρόιηα, λα δεκηνπξγήζεηε εζνρέο ζηνλ θώδηθα θαη λα εηζαγάγεηε ηκήκαηα ηνπ θώδηθα πνπ έρνπλ ρξεζηκνπνηεζεί πξόζθαηα. Η Γξακκή εξγαιείσλ Coding εκθαλίδεηαη θαηαθόξπθα ζηελ αξηζηεξή πιεπξά ηνπ παξαζύξνπ Document θαη είλαη νξαηή κόλν θαηά ηελ πξνβνιή Code. Γελ κπνξείηε λα θαηαξγήζεηε ηελ αγθύξσζε ηεο γξακκήο εξγαιείσλ Coding νύηε λα ηεκ κεηαθηλήζεηε αιιά κπνξείηε λα ηελ απνθξύςεηε (View > Toolbars > Coding). Μπνξείηε επίζεο λα επεμεξγαζηείηε ηε γξακκή εξγαιείσλ Coding ώζηε λα εκθαλίδνληαη πεξηζζόηεξα θνπκπηά (όπσο ην Word Wrap, ην Show Hidden Characters θαη ην Auto Indent) ή λα θξύςεηε θνπκπηά πνπ δελ ζέιεηε λα ρξεζηκνπνηήζεηε. Γηα λα ην θάλεηε απηό, σζηόζν, πξέπεη λα επεμεξγαζηείηε ην αξρείν XML πνπ δεκηνπξγεί ηε γξακκή εξγαιείσλ. Γηα πεξηζζόηεξεο πιεξνθνξίεο, αλαηξέμηε ζην Δπέθηαζε ηνπ Dreamweaver. ελίδα 13

14 Επηζθόπεζε ηεο γξακκήο εξγαιείσλ Style Rendering Η γξακκή εξγαιείσλ Style Rendering (θξπθή από πξνεπηινγή) πεξηέρεη θνπκπηά πνπ ζαο επηηξέπνπλ λα δείηε πώο θαίλεηαη ε ζρεδίαζή ζαο ζε δηαθνξεηηθνύο ηύπνπο κέζσλ αλ ρξεζηκνπνηείηε θύιια ζηπι πνπ εμαξηώληαη από ην κέζν πνπ ρξεζηκνπνηείηαη. Πεξηέρεη επίζεο έλα θνπκπί πνπ ζαο επηηξέπεη λα ελεξγνπνηήζεηε ή λα απελεξγνπνηήζεηε ηα επηθαιππηόκελα θύιια ζηπι (Cascading Style Sheets - CSS). Γηα λα εκθαληζηεί ε γξακκή εξγαιείσλ, επηιέμηε View > Toolbars > Style Rendering. Απηή ε γξακκή εξγαιείσλ ιεηηνπξγεί κόλν αλ ηα έγγξαθά ζαο ρξεζηκνπνηνύλ θύιια ζηπι ησλ νπνίσλ ε εκθάληζε εμαξηάηαη από ην κέζν πνπ ρξεζηκνπνηείηαη. Γηα παξάδεηγκα, ην θύιιν ζηπι ζαο κπνξεί λα πξνζδηνξίζεη έλαλ θαλόλα ζώκαηνο γηα ηα έληππα κέζα θαη θάπνηνλ άιιν γηα ηηο θνξεηέο ζπζθεπέο. Γηα πεξηζζόηεξεο πιεξνθνξίεο ζρεηηθά κε ηε δεκηνπξγία θύιισλ ζηπι, ησλ νπνίσλ ε εκθάληζε εμαξηάηαη από ην κέζν πνπ ρξεζηκνπνηείηαη, αλαηξέμηε ζηελ ηνπνζεζία web ηνπ World Wide Web Consortium ζηε δηεύζπλζε Τν Dreamweaver εκθαλίδεη από πξνεπηινγή ηε ζρεδίαζή ζαο γηα ηνλ ηύπν κέζσλ κε νζόλε (ζαο παξνπζηάδεη πώο θαίλεηαη ε ζειίδα ζαο ζηελ νζόλε ελόο ππνινγηζηή). Μπνξείηε λα δείηε απνδόζεηο γηα ηνπο αθόινπζνπο ηύπνπο κέζσλ, παηώληαο ζηα αληίζηνηρα θνπκπηά ζηε Γξακκή εξγαιείσλ απόδνζεο ζηπι. Render Screen Media Type Σαο παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζηελ νζόλε ελόο ππνινγηζηή. Render Print Media Type Σαο παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζε έλα εθηππσκέλν θύιιν ραξηί. Render Handheld Media Type Σαο παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζε κηα θνξεηή ζπζθεπή, όπσο έλα θηλεηό ηειέθσλν ή κηα ζπζθεπή BlackBerry. Render Projection Media Type Σαο παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζε κηα ζπζθεπή πξνβνιήο. Render TTY Media Type Παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζε κηα ζπζθεπή ηειεηππίαο. Render TV Media Type Σαο παξνπζηάδεη πώο εκθαλίδεηαη ε ζειίδα ζηελ νζόλε κηαο ηειεόξαζεο. Toggle Displaying Of CSS Styles Σαο επηηξέπεη λα ελεξγνπνηήζεηε ή λα απελεξγνπνηήζεηε ηα ζηπι CSS. Απηό ην θνπκπί ιεηηνπξγεί αλεμάξηεηα από ηα άιια θνπκπηά κέζσλ. ελίδα 14

15 Φύιια ζηπι ζρεδίαζεο-ρξόλνπ Σαο επηηξέπεη λα θαζνξίζεηε έλα Φύιιν ζηπι ζρεδίαζεορξόλνπ. Επηζθόπεζε ηνπ εξγαιείνπ επηζεώξεζεο ηδηνηήησλ Τν εξγαιείν επηζεώξεζεο ηδηνηήησλ ζάο επηηξέπεη λα εμεηάδεηε θαη λα επεμεξγάδεζηε ηηο πην ζπλεζηζκέλεο ηδηόηεηεο ηνπ ηξέρνληνο επηιεγκέλνπ ζηνηρείνπ ζειίδαο, όπσο ηηο ηδηόηεηεο θεηκέλνπ ή εηζαρζέληνο αληηθείηκέλνπ. Τα πεξηερόκελα ηνπ εξγαιείνπ επηζεώξεζεο ηδηνηήησλ δηαθέξνπλ αλάινγα κε ην ζηνηρείν πνπ έρεηε επηιέμεη. Γηα παξάδεηγκα, αλ επηιέμεηε κηα εηθόλα ζηε ζειίδα ζαο, ην εξγαιείν επηζεώξεζεο ηδηνηήησλ αιιάδεη θαη παξνπζηάδεη ηηο ηδηόηεηεο ηεο εηθόλαο (όπσο ηε δηαδξνκή αξρείνπ γηα ηελ εηθόλα, ην πιάηνο θαη ην ύςνο ηεο εηθόλαο, ην πιαίζην γύξσ από ηελ εηθόλα, αλ ππάξρεη, θιπ.). Η πξνεπηιεγκέλε ζέζε ηνπ εξγαιείνπ επηζεώξεζεο ηδηνηήησλ είλαη ζην θάησ κέξνο ηνπ ρώξνπ εξγαζίαο αιιά κπνξείηε λα θαηαξγήζεηε ηελ αγθύξσζή ηνπ θαη λα ην κεηαηξέςεηε ζε θηλνύκελν πίλαθα ζην ρώξν εξγαζίαο. Επηζθόπεζε πίλαθα Insert Ο πίλαθαο Insert πεξηέρεη θνπκπηά γηα ηε δεκηνπξγία ή ηελ εηζαγσγή αληηθεηκέλσλ, όπσο πηλάθσλ, εηθόλσλ θαη ζπλδέζκσλ. Τα θνπκπηά είλαη νξγαλσκέλα ζε αξθεηέο θαηεγνξίεο, ζηηο νπνίεο κπνξείηε λα κεηαβείηε επηιέγνληαο ηελ επηζπκεηή θαηεγνξία από ην αλαδπόκελν κελνύ Category. Όηαλ ην ηξέρνλ έγγξαθν πεξηέρεη θώδηθα δηαθνκηζηή, όπσο ζηα έγγξαθα ASP θαη CFML, εκθαλίδνληαη επηπιένλ θαηεγνξίεο. ελίδα 15

16 Οξηζκέλεο θαηεγνξίεο δηαζέηνπλ θνπκπηά κε αλαδπόκελα κελνύ. Όηαλ ελεξγνπνηείηε κηα επηινγή από έλα αλαδπόκελν κελνύ, απηή κεηαηξέπεηαη ζηελ πξνεπηιεγκέλε ελέξγεηα γηα απηό ην θνπκπί. Γηα παξάδεηγκα, αλ επηιέμεηε Image Placeholder από ην αλαδπόκελν κελνύ ηνπ θνπκπηνύ Image, ηελ επόκελε θνξά πνπ ζα θάλεηε θιηθ ζην θνπκπί Image, ην Dreamweaver ζα εηζαγάγεη έλα ζύκβνιν θξάηεζεο ζέζεο εηθόλαο. Κάζε θνξά πνπ ελεξγνπνηείηεη κηα λέα επηινγή από ην αλαδπόκελν κελνύ, ε πξνεπηιεγκέλε ελέξγεηα γηα ην θνπκπί απηό αιιάδεη. Ο πίλαθαο Insert είλαη νξγαλσκέλνο ζηηο αθόινπζεο θαηεγνξίεο: Η θαηεγνξία Common Σαο επηηξέπεη λα δεκηνπξγήζεηε θαη λα εηζαγάγεηε ηα αληηθείκελα πνπ ρξεζηκνπνηνύληαη κε κεγαιύηεξε ζπρλόηεηα, όπσο νη εηθόλεο θαη νη πίλαθεο. Καηεγνξία Layout Σαο επηηξέπεη λα εηζάγεηε πίλαθεο, ζηνηρεία πηλάθσλ, tag div, πιαίζηα θαη Spry widget. Μπνξείηε επίζεο λα επηιέμεηε δύν πξνβνιέο γηα ηνπο πίλαθεο: Standard (πξνεπηινγή) θαη Expanded Tables. Καηεγνξία Forms Πεξηέρεη θνπκπηά γηα ηε δεκηνπξγία θνξκώλ θαη ηελ εηζαγσγή ζηνηρείσλ θνξκώλ, ζπκπεξηιακβαλνκέλσλ ησλ Spry validation widgets. Καηεγνξία Data Σαο επηηξέπεη λα εηζάγεηε αληηθείκελα δεδνκέλσλ Spry, θαζώο θαη άιια δπλακηθά ζηνηρεία, όπσο ζύλνια εγγξαθώλ, επαλαιακβαλόκελεο πεξηνρέο, θαζώο θαη θόξκεο εηζαγσγήο θαη αλαλέσζεο εγγξαθώλ. Καηεγνξία Spry Πεξηέρεη θνπκπηά γηα ηε δεκηνπξγία ζειίδσλ Spry, ζπκπεξηιακβαλνκέλσλ αληηθεηκέλσλ δεδνκέλσλ Spry θαη Spry widgets. Η θαηεγνξία In Context Editing Πεξηέρεη θνπκπηά γηα ηε δεκηνπξγία ζειίδσλ επεμεξγαζίαο ηνπ InContext, ζπκπεξηιακβαλνκέλσλ θνπκπηώλ γηα επεμεξγάζηκεο πεξηνρέο, επαλαιακβαλόκελεο πεξηνρέο θαη δηαρείξηζε θαηεγνξηώλ CSS. Η θαηεγνξία Text Σαο επηηξέπεη λα εηζάγεηε κηα ζεηξά από tag κνξθνπνίεζεο θεηκέλνπ θαη ιηζηώλ, όπσο b, em, p, h1 θαη ul. ελίδα 16

17 Καηεγνξία Favorites Σαο επηηξέπεη λα νκαδνπνηείηε θαη λα νξγαλώλεηε ζε έλα θνηλό ζεκείν ηα θνπκπηά ηνπ πίλαθα Insert πνπ ρξεζηκνπνηείηε πην ζπρλά. Καηεγνξίεο θώδηθα δηαθνκηζηή Δίλαη δηαζέζηκεο κόλν γηα ζειίδεο πνπ ρξεζηκνπνηνύλ θάπνηα ζπγθεθξηκέλε γιώζζα δηαθνκηζηή, ζπκπεξηιακβαλνκέλσλ ησλ ASP, CFML Basic, CFML Flow, CFML Advanced θαη PHP. Καζεκία από απηέο ηηο θαηεγνξίεο παξέρεη αληηθείκελα θώδηθα δηαθνκηζηή, ηα νπνία κπνξείηε λα εηζάγεηε ζε πξνβνιή Code. Αληίζεηα κε άιινπο πίλαθεο ζην Dreamweaver, κπνξείηε λα κεηαθέξεηε ηνλ πίλαθα Insert έμσ από ηελ πξνεπηιεγκέλε ζέζε αγθύξσζήο ηνπ θαη λα ηνλ αθήζεηε ζε νξηδόληηα ζέζε ζην πάλσ κέξνο ηνπ παξαζύξνπ Document. Αλ ην θάλεηε, ν πίλαθαο κεηαηξέπεηαη ζε γξακκή εξγαιείσλ (αλ θαη δελ κπνξείηε λα ηελ απνθξύςεηε θαη λα ηελ εκθαλίζεηε όπσο ηηο άιιεο γξακκέο εξγαιείσλ). Επηζθόπεζε πίλαθα Files Χξεζηκνπνηήζηε ηνλ πίλαθα Files γηα λα δείηε θαη λα δηαρεηξηζηείηε ηα αξρεία ζηελ ηνπνζεζία Dreamweaver πνπ ζρεδηάδεηε. Όηαλ πξνβάιιεηε ηνπνζεζίεο, αξρεία ή θαθέινπο ζηνλ πίλαθα Files, κπνξείηε λα αιιάμεηε ην κέγεζνο ηεο πεξηνρήο πξνβνιήο θαη λα αλαπηύμεηε ή λα ζπκπηύμεηε ηνλ πίλαθα Files. Όηαλ ν πίλαθαο Files είλαη ζπκπηπγκέλνο, εκθαλίδεη ηα πεξηερόκελα ηεο ηνπηθήο ηνπνζεζίαο, ηεο απνκαθξπζκέλεο ηνπνζεζίαο, ηνπ δηαθνκηζηή δνθηκήο ή ηνπ ρώξνπ απνζήθεπζεο SVN κε ηε κνξθή ιίζηαο αξρείσλ. Όηαλ είλαη αλαπηπγκέλνο, εκθαλίδεη ηελ ηνπηθή ηνπνζεζία θαη ηελ απνκαθξπζκέλε ηνπνζεζία ή ην δηαθνκηζηή δνθηκήο ή ην ρώξν απνζήθεπζεο SVN. Σηηο ηνπνζεζίεο Dreamweaver, κπνξείηε επίζεο λα πξνζαξκόζεηε ηνλ πίλαθα Files αιιάδνληαο ηελ πξνβνιή είηε ζηελ ηνπηθή είηε ζηελ απνκαθξπζκέλε ηνπνζεζία πνπ εκθαλίδεηαη από πξνεπηινγή ζην ζπκπηπγκέλν πίλαθα. Επηζθόπεζε πίλαθα CSS Styles Ο πίλαθαο CSS Styles ζάο επηηξέπεη λα εληνπίδεηε ηνπο θαλόλεο θαη ηηο ηδηόηεηεο CSS πνπ επεξεάδνπλ ην ηξέρνλ επηιεγκέλνη ζηνηρείν ηεο ζειίδαο (ιεηηνπξγία Current) ή ηνπο θαλόλεο θαη ηηο ηδηόηεηεο CSS πνπ επεξεάδνπλ έλα νιόθιεξν έγγξαθν (ιεηηνπξγία All). Έλα θνπκπί ελαιιαγήο ζηελ θνξπθή ηνπ πίλαθα CSS Styles ζάο επηηξέπεη λα κεηαβαίλεηε από ηε κία ιεηηνπξγία ζηελ άιιε. Ο πίλαθαο CSS ελίδα 17

18 Styles ζάο επηηξέπεη επίζεο λα ηξνπνπνηείηε ηηο ηδηόηεηεο CSS ηόζν ζηε ιεηηνπξγία All όζν θαη ζηε ιεηηνπξγία Current. Μπνξείηε λα αιιάμεηε ην κέγεζνο ζε νπνηνδήπνηε από ηα ηκήκαηα παξαζύξνπ κεηαθηλώληαο ηα πεξηγξάκκαηα κεηαμύ ησλ ηκεκάησλ. Σηε ιεηηνπξγία Current, ν πίλαθαο CSS Styles εκθαλίδεη ηξία ηκήκαηα παξαζύξνπ: έλα ηκήκα παξαζύξνπ Summary for Selection πνπ εκθαλίδεη ηηο ηδηόηεηεο CSS ηεο ηξέρνπζαο επηινγήο ζην έγγξαθν, έλα ηκήκα παξαζύξνπ Rules πνπ εκθαλίδεη ηε ζέζε επηιεγκέλσλ ηδηνηήησλ (ή κηα αθνινπζία θαλόλσλ γηα ην επηιεγκέλν tag, αλάινγα κε ηελ επηινγή ζαο) θαη έλα ηκήκα παξαζύξνπ Properties πνπ ζαο επηηξέπεη λα επεμεξγαζηείηε ηδηόηεηεο CSS γηα ηνλ θαλόλα πνπ θαζνξίδεη ηελ επηινγή. Σηε ιεηηνπξγία All, ζηνλ πίλαθα CSS Styles εκθαλίδνληαη δύν ηκήκαηα παξαζύξνπ: έλα ηκήκα παξαζύξνπ All Rules (ζηελ θνξπθή) θαη έλα ηκήκα παξαζύξνπ Properties (ζην θάησ κέξνο). Σην ηκήκα παξαζύξνπ All Rules εκθαλίδεηαη κηα ιίζηα θαλόλσλ πνπ έρνπλ θαζνξηζηεί ζην ηξέρνλ έγγξαθν, θαζώο θαη όινη νη θαλόλεο πνπ έρνπλ θαζνξηζηεί ζηα θύιια ζηπι πνπ είλαη ζπλεκκέλα ζην ηξέρνλ έγγξαθν. Τν ηκήκα παξαζύξνπ Properties ζάο επηηξέπεη λα επεμεξγαζηείηε ηηο ηδηόηεηεο CSS γηα νπνηνλδήπνηε επηιεγκέλν θαλόλα ζην ηκήκα παξαζύξνπ All Rules. Όπνηεο αιιαγέο θάλεηε ζην ηκήκα παξαζύξνπ Properties εθαξκόδνληαη ακέζσο θαη ζαο επηηξέπνπλ λα θάλεηε πξνεπηζθόπεζε ηεο εξγαζίαο ζαο ελώ βξίζθεηαη ζε εμέιημε. Επηζθόπεζε νπηηθώλ νδεγώλ Τν Dreamweaver παξέρεη αξθεηά είδε νπηηθώλ νδεγώλ γηα λα ζαο βνεζήζεη λα ζρεδηάζεηε έγγξαθα θαη λα πξνβιέςεηε πεξίπνπ πώο ζα εκθαλίδνληαη ζηα πξνγξάκκαηα πεξηήγεζεο. Μπνξείηε λα εθηειέζεηε νπνηαδήπνηε από ηηο παξαθάησ ελέξγεηεο: Να θάλεηε ην παξάζπξν Document λα πξνζθνιιεζεί ζην κέγεζνο παξαζύξνπ πνπ επηζπκείηε γηα λα δείηε πώο ηα δηάθνξα ζηνηρεία πξνζαξκόδνληαη ζηε ζειίδα. Να ρξεζηκνπνηήζεηε κηα εηθόλα ηρλνγξάθεζεο σο θόλην ηεο ζειίδαο γηα λα ζαο βνεζήζεη λα αληηγξάςεηε έλα ζρέδην πνπ δεκηνπξγήζεθε ζε κηα εθαξκνγή εηθνλνγξάθεζεο ή επεμεξγαζίαο εηθόλσλ, όπσο ην Adobe Photoshop ή ην Adobe Fireworks. ελίδα 18

19 Να ρξεζηκνπνηήζεηε ράξαθεο θαη νδεγνύο γηα λα έρεηε έλα νπηηθό ζεκείν αλαθνξάο γηα αθξηβή ηνπνζέηεζε θαη αιιαγή κεγέζνπο ησλ ζηνηρείσλ ηεο ζειίδαο. Να ρξεζηκνπνηήζεηε ην πιέγκα γηα αθξηβή ηνπνζέηεζε θαη αιιαγή κεγέζνπο ζηνηρείσλ απόιπηεο ζέζεο (AP elements). Τα ζεκάδηα ηνπ πιέγκαηνο ζηε ζειίδα ζαο βνεζνύλ λα ζηνηρίζεηε ηα ζηνηρεία απόιπηεο ζέζεο θαη όηαλ είλαη ελεξγνπνηεκέλε ε πξνζθόιιεζε, ηα ζηνηρεία απόιπηεο ζέζεο ζα πξνζθνιιεζνύλ απηόκαηα ζην πιεζηέζηεξν ζεκείν ηνπ πιέγκαηνο όηαλ ηα κεηαθηλείηε ή ηνπο αιιάδεηε ην κέγεζνο. (Άιια αληηθείκελα, όπσο εηθόλεο θαη παξάγξαθνη, δελ πξνζθνιιώληαη ζην πιέγκα.) Η πξνζθόιιεζε ιεηηνπξγεί αλεμάξηεηα από ην αλ ην πιέγκα είλαη νξαηό ή όρη. Χξήζηεο ηνπ GoLive Αλ ρξεζηκνπνηείηε ην GoLive θαη ζέιεηε λα αξρίζεηε λα εξγάδεζηε κε ην Dreamweaver, κπνξείηε λα βξείηε κηα online εηζαγσγή ζην ρώξν εξγαζίαο θαη ηε ξνή εξγαζηώλ ηνπ Dreamweaver, θαζώο θαη κηα παξνπζίαζε ησλ ηξόπσλ κεηαθνξάο ησλ ηνπνζεζηώλ ζαο ζην Dreamweaver. Γηα πεξηζζόηεξεο πιεξνθνξίεο, επηζθεθηείηε ηε δηεύζπλζε Ελαιιαγή κεηαμύ πξνβνιώλ ζην παξάζπξν Document Μπνξείηε λα δείηε έλα έγγξαθν ζην παξάζπξν Document ζε πξνβνιή Code, πξνβνιή Split Code, πξνβνιή Design, πξνβνιή Code and Design (πξνβνιή Split) ή πξνβνιή Live. Έρεηε επίζεο ηε δπλαηόηεηα λα βιέπεηε ηελ πξνβνιή Split Code ή ηελ πξνβνιή Code and Design νξηδόληηα ή θαηαθόξπθα. (Η πξνεπηιεγκέλε εκθάληζε είλαη νξηδόληηα). Μεηάβαζε ζηελ πξνβνιή Code Κάληε κία από ηηο παξαθάησ ελέξγεηεο: Δπηιέμηε View > Code. Σηε Γξακκή εξγαιείσλ εγγξάθνπ, θάληε θιηθ ζην θνπκπί Show Code View Μεηάβαζε ζηελ πξνβνιή Split Code Η πξνβνιή Split Code δηαηξεί ην έγγξαθό ζαο ζηα δύν έηζη ώζηε λα κπνξείηε λα εξγαζηείηε ζε δύν ελόηεηεο ηνπ θώδηθα ζπγρξόλσο. Δπηιέμηε View > Split Code. Σεκείσζε: Αλ αιιάμεηε ην κέγεζνο ηνπ παξαζύξνπ Document ή ηνπ παξαζύξνπ εθαξκνγήο ή αλ αιιάμεηε ηε δηάηαμε ηνπ ρώξνπ εξγαζίαο ζαο, ην Dreamweaver δηαηεξεί ηελ αλαινγία δηαίξεζεο ώζηε νη δύν πξνβνιέο λα είλαη πάληα νξαηέο. Ελαιιαγή ζε πξνβνιή Design Κάληε κία από ηηο παξαθάησ ελέξγεηεο: Δπηιέμηε View > Design. Σηε Γξακκή εξγαιείσλ εγγξάθνπ, θάληε θιηθ ζην θνπκπί Show Design View Εκθάληζε ηόζν ηεο πξνβνιήο Code όζν θαη ηεο πξνβνιήο Design ελίδα 19

20 Κάληε κία από ηηο παξαθάησ ελέξγεηεο: Δπηιέμηε View > Code and Design. Σηε γξακκή εξγαιείσλdocument, θάληε θιηθ ζην θνπκπί Show Code and Design Views Η πξνβνιή Code εκθαλίδεηαη από πξνεπηινγή ζηελ θνξπθή ηνπ παξαζύξνπ Document θαη ε πξνβνιή Design εκθαλίδεηαη ζην θάησ κέξνο. Γηα λα εκθαληζηεί ε πξνβνιή Design ζηελ θνξπθή, επηιέμηε View > Design View on Top. Σεκείσζε: Αλ αιιάμεηε ην κέγεζνο ηνπ παξαζύξνπ Document ή ηνπ παξαζύξνπ εθαξκνγήο ή αλ αιιάμεηε ηε δηάηαμε ηνπ ρώξνπ εξγαζίαο ζαο, ην Dreamweaver δηαηεξεί ηελ αλαινγία δηαίξεζεο ώζηε νη δύν πξνβνιέο λα είλαη πάληα νξαηέο. Ελαιιαγή κεηαμύ πξνβνιήο Code θαη πξνβνιήο Design Παηήζηε ηα πιήθηξα Control+backquote (`). Αλ εκθαλίδνληαη θαη νη δύν πξνβνιέο ζην παξάζπξν Document, απηή ε ζπληόκεπζε πιεθηξνινγίνπ αιιάδεη ηελ εζηίαζε ηνπ πιεθηξνινγίνπ από ηε κία πξνβνιή ζηελ άιιε. Καηαθόξπθε δηαίξεζε πξνβνιώλ Απηή ε επηινγή είλαη δηαζέζηκε κόλν ζε πξνβνιή Split Code θαη ζηελ πξνβνιή Code and Design (πξνβνιή Split). Σηελ πξνβνιή Code θαη ζηελ πξνβνιή Design είλαη απελεξγνπνηεκέλν. 1.Βεβαησζείηε όηη βξίζθεζηε ζε πξνβνιή Split Code (View > Split Code) ή ζε πξνβνιή Code and Design (View > Code and Design). 2.Δπηιέμηε View > Split Vertically. Αλ βξίζθεζηε ζε πξνβνιή Code and Design, έρεηε ηε δπλαηόηεηα λα εκθαλίζεηε ηελ πξνβνιή Design ζηα αξηζηεξά (View > Design View on Left). Σεκείσζε: Αλ αιιάμεηε ην κέγεζνο ηνπ παξαζύξνπ Document ή ηνπ παξαζύξνπ εθαξκνγήο ή αλ αιιάμεηε ηε δηάηαμε ηνπ ρώξνπ εξγαζίαο ζαο, ην Dreamweaver δηαηεξεί ηελ αλαινγία δηαίξεζεο ώζηε νη δύν πξνβνιέο λα είλαη πάληα νξαηέο. Επηθάιπςε ή παξάζεζε ησλ Παξαζύξσλ εγγξάθσλ Αλ έρεηε πνιιά έγγξαθα αλνηρηά ζπγρξόλσο, κπνξείηε λα ηα ηνπνζεηήζεηε ζε επηθάιπςε ή ζε παξάζεζε. Δπηθάιπςε ησλ Παξαζύξσλ εγγξάθσλ Δπηιέμηε Window > Cascade. Παξάζεζε ησλ παξαζύξσλ εγγξάθσλ (Windows) Δπηιέμηε Window > Tile Horizontally ή Window > Tile Vertically. (Macintosh) Δπηιέμηε Window > Tile. ελίδα 20