1 / 33

Getting Started with Dreamweaver 8

Getting Started with Dreamweaver 8. After completing this tutorial, you should be able to:. Use built-in Help Identify workspace components Customize the workspace Create and save files. The Help System. Opening Help. To open the Help System Help > Dreamweaver Help. Tip.

lucas
Download Presentation

Getting Started with Dreamweaver 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Getting Started withDreamweaver 8 Colby College ITS

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

  3. The Help System Colby College ITS

  4. Opening Help • To open the Help System • Help > Dreamweaver Help Colby College ITS

  5. Tip To search for a specific phraseenclose it inquotes 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 it Colby College ITS

  6. Tip Start typing akeyword to quickly scrollto an entry 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 information Colby College ITS

  7. The Development Window Colby College ITS

  8. Workspace Layout Colby College ITS

  9. 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 Colby College ITS

  10. 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 Colby College ITS

  11. 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 Colby College ITS

  12. 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 <body> 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 Colby College ITS

  13. 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 Colby College ITS

  14. 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 Colby College ITS

  15. 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. Colby College ITS

  16. 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 Colby College ITS

  17. 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 Colby College ITS

  18. 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 Colby College ITS

  19. 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 The Files Panel Colby College ITS

  20. 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 The CSS Styles Panel (1 of 2) Colby College ITS

  21. 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 The CSS Styles Panel (2 of 2) Colby College ITS

  22. Customizing the Workspace Colby College ITS

  23. 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 Colby College ITS

  24. 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. Colby College ITS

  25. 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 Colby College ITS

  26. Managing Your Site Files Colby College ITS

  27. 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 Colby College ITS

  28. 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 Colby College ITS

  29. 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 Colby College ITS

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

  31. 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. Colby College ITS

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

  33. Questions? Comments?Feedback?Contact: Technical TrainingorCall Mel Regnell at ext. 4217 Colby College ITS

More Related