1. February 2007Colby College ITS Getting Started with Dreamweaver 8

2. February 2007Colby College ITS After completing this tutorial, you should be able to: Use built-in Help Identify workspace components Customize the workspace Create and save files

3. February 2007Colby College ITS The Help System

4. February 2007Colby College ITS Opening Help To open the Help System –Help > Dreamweaver Help

5. February 2007Colby College ITS Searching Help To search the Help System –For Windows Click the Search tab Type a word or phrase in the text box Click List Topics Double-click any topic in the list to display it –For Macintosh Type a word or phrase in the Ask a Question text box Press Enter Double-click any topic in the list to display itTipTip To search for a specific phrase enclose it in quotes

6. February 2007Colby College ITS Using the Index Windows –Click the Index tab –Scroll to the desired entry –Double-click entry to display information Macintosh –Click the Index link in the table of contents –Click a letter –Scroll to the desired index entry –Click a number beside the entry to display informationTipTip Start typing a keyword to quickly scroll to an entry

7. February 2007Colby College ITS The Development Window

8. February 2007Colby College ITS Workspace Layout

9. February 2007Colby College ITS The Document Window Design view –Visual page layout, editing, and rapid application development –Displays a fully editable representation of the document –Similar to what you would see viewing the page in a browser Code view –Environment for writing and editing HTML, JavaScript, server-language code Code and Design view – lets you view both Code view and Design view for the same document in a single window Title Bar –Displays the page title and, in parentheses, the file’s path and filename –Displays an asterisk if there are unsaved changes

10. February 2007Colby College ITS The Document Toolbar (1 of 2) Show Code View displays only the HTML Code Show Code and Design Views displays both Code and Design Show Design View displays only the Design view Server Debug displays a report to help you debug the current ColdFusion page Document Title allows you to enter a title for your document, to be displayed in the browser’s title bar

11. February 2007Colby College ITS The Document Toolbar (2 of 2) No Browser/Check Errors checks cross-browser compatibility Validate Markup validates current document or selected tag File Management displays the File Management pop-up menu Preview/Debug in Browser previews document in a browser Refresh Design View refreshes the document Visual Aids lets you use different visual aids to design your pages

12. February 2007Colby College ITS The Status Bar (1 of 2) Tag selector shows hierarchy of tags surrounding current selection –Click any tag in the hierarchy to select that tag and all its contents. –Click to select the entire body of the document –To set the class or id attributes for a tag in the tag selector Right-click (Windows) or Control-click (Macintosh) the tag Select a class or ID from the context menu –Tag selector ensures that the tag is selected accurately Hand tool drags the document in the Document window

13. February 2007Colby College ITS The Status Bar (1 of 2) Select tool disables the Hand tool Zoom tool and Set Magnification pop-up menu set magnification levels Window Size pop-up menu resizes the Document window To the right of the Window Size pop-up menu are –Estimated document size –Estimated download time –Includes all dependent files such as images and other media files

14. February 2007Colby College ITS The Insert Bar (1 of 3) Organized into categories Common category –Create and insert most commonly used objects –Images and tables for example Layout category –Inserts tables, div tags, layers, and frames –When Layout mode is selected, you can use the Dreamweaver layout tools Draw Layout Cell and Draw Layout Table

15. February 2007Colby College ITS The Insert Bar (2 of 3) Forms category –Creating forms and inserting form elements Text category –enables you to insert a variety of text- and list- formatting tags, such as b, em, p, h1, and ul. HTML category –enables you to insert HTML tags for horizontal rules, head content, tables, frames, and scripts.

16. February 2007Colby College ITS The Insert Bar (3 of 3) Server-code –Only available ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP –Provides server-code objects Application category –Inserts dynamic elements such as recordsets, repeated regions, and record insertion and update forms Flash elements –Insert Macromedia Flash elements Favorites category –enables you to group and organize the Insert bar buttons

17. February 2007Colby College ITS The Coding Toolbar Contains buttons that let you perform many standard coding operations –Collapsing and expanding code selections –Highlighting invalid code –Applying and removing comments –Indenting code –Inserting recently used code snippets Only visible in Code view –Appears vertically on the left side of the Document window

18. February 2007Colby College ITS The Property Inspector Examine/edit properties for a selected element Contents vary depending on the element selected If you select an image –Shows properties such as File path Width and height Border, etc. Sits at the bottom of the workspace by default –Can be changed

19. February 2007Colby College ITS The Files Panel View and manage site files Change, expand or collapse size of Files panel Displays local, remote and testing site files Can also display a visual site map of the local site

20. February 2007Colby College ITS The CSS Styles Panel (1 of 2) Tracks CSS rules and properties –Current mode for a selected page element –All mode for an entire document Modifies CSS properties in both All and Current mode Resize by dragging the borders Current Mode –Summary for Selection pane Displays CSS properties for selection –Rules pane Displays location of selected properties –Properties pane Edits CSS properties for the rule

21. February 2007Colby College ITS The CSS Styles Panel (2 of 2) All mode –All Rules pane (on top) Rules defined in the current document Rules defined in style sheets attached to the current document –Properties pane (on bottom) Edit CSS properties for any selected rule in the All Rules pane –All changes are applied immediately

22. February 2007Colby College ITS Customizing the Workspace

23. February 2007Colby College ITS Choosing a Layout (Windows) The first time you start Dreamweaver –You are prompted to select a layout Designer is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right Coder is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with the Document window showing Code view by default –Click OK To switch after you’ve chosen –Window > Workspace Layout –Select the workspace layout you prefer Additional selections –Dual Screen Right all panels on the right (secondary) monitor Document on left (primary) monitor – Dual Screen Left All panels on the left (secondary) monitor Documents on the right (primary) monitor

24. February 2007Colby College ITS Displaying Tabbed Docs (Mac) To open in a separate window –Right-click or Control-click the tab –Context > Move to New Window To combine separate documents into tabbed windows –Window > Combine as Tabs To change default tabbed document setting –Dreamweaver > Preferences > General –Select or deselect Open Documents in Tabs –Click OK.

25. February 2007Colby College ITS The Start Page To hide the Start page –Check Don’t Show Again checkbox on the Start page To display the Start page –Edit > Preferences > General (Windows) or –Dreamweaver > Preferences > General (Macintosh) Check Show Start Page checkbox

26. February 2007Colby College ITS Managing Your Site Files

27. February 2007Colby College ITS Dreamweaver Files (1 of 2) HTML ( Hypertext Markup Language).htm or.html –Tag-based language that controls how a page is displayed in a browser CSS ( Cascading Style Sheet).css –Format HTML content and control the positioning of various page elements GIF ( Graphics Interchange Format).gif –Popular web graphic format for cartoons, logos, graphics with transparent areas, and animations limited to 256 colors JPEG ( Joint Photographic Experts Group).jpg Usually used for photographs or high-color images Best for digital or scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors

28. February 2007Colby College ITS Dreamweaver Files (2 of 2) XML (Extensible Markup Language).xml –Contain data in a raw form that can be formatted using XSL –Extension =.xml XSL (Extensible Stylesheet Language).xsl or xslt –Used to style XML data that you want to display on a web page –Extension =.xsl or.xslt CFML (ColdFusion Markup Language).cfm –Used to process dynamic pages –Extension =.cfm ASPX, or ASP.NET (Active Server Pages).aspx –Used to process dynamic pages PHP, or PHP (Hypertext Preprocessor).php –Used to process dynamic pages

29. February 2007Colby College ITS Creating a New File (1 of 2) File > New > General > Category Select: – Basic Page –Dynamic Page –Template Page –Other –Framesets Each selection will display the available types of documents Select the the type of document you want to create Example: –Select Basic Page to create an HTML document –Select Dynamic page to create a ColdFusion or ASP document

30. February 2007Colby College ITS Creating a New File (2 of 2)

31. February 2007Colby College ITS Saving the New File File > Save Navigate to the folder where you want to save the file Type a name for the file –Avoid using spaces and special characters –Do not begin a filename with a numeral –Do not use special characters or punctuation Many servers change these characters during upload, which will cause any links to the files to break Click Save.

32. February 2007Colby College ITS Opening a Saved File File > Open Navigate to the file you want Click Open

33. February 2007Colby College ITS Questions? Comments? Feedback? Contact: Technical Training or Call Mel Regnell at ext. 4217Technical Training