Adobe Dreamweaver CS4: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get) web page editor that is very powerful and easy to use. Dreamweaver CS4 uses XHTML XHTML is the next generation of HTML, and is a hybrid between HTML and XML. XML was designed to describe data. HTML was designed to display data. Not all browsers support XML, so XHTML provides an intermediary solution and can be interpreted by XML and HTML browsers. Note: In most cases, you may not notice the difference between HTML and XHTML. XHTML has a stricter syntax than HTML, but Dreamweaver writes the new code just as easily. Dreamweaver even has an option for converting HTML pages to XHTML: File > Convert > XHTML. You will see a new DOCTYPE declaration at the top of the text in Code View, and the tags and properties will be converted to the correct syntax for XHTML. XHTML settings are located in the Edit > Preferences menu The Work Area When you launch Dreamweaver you will have the option as to how the panels display with the work area. Change the view of the Panels and Panel Groups accordingly to reflect what you are creating or editing. The Dreamweaver 8/CS3/CS4 look is streamlined and saves screen space making the interface a lot easier to learn. The Document Window displays your web page approximately as it will appear in a web browser. Insert Bar The Insert Bar contains buttons for inserting common web page elements such as images, tables, layers, hyperlinks, and rollover images. What You Should Know About the Insert Bar In Dreamweaver CS4, use the Classic view to display the Insert Bar in a tabbed Menu. Using the Classic view will display Dreamweaver tools similar to CS3. U:\On-site\FCampana\dreamweaver8\Dreamweaver_cs4.doc Page 2 of 18 © Computer Training Support Services Colorado State University Categories of the Insert Bar Beginning in the MX 2004 version, tools are regrouped in the Insert Bar according to their similarity and are identified as a group by the arrow in the lower right-hand corner of the icon. For example, the Image icon from the Common menu of the Insert Bar has a grouped or fly-out menu containing other image tools. Click the arrow next to the icon to display the menu with the additional image tools. Tip: Most items on the Insert Bar are also available in the Insert Menu. The Properties Inspector The Properties Inspector displays formatting attributes for the selected object in the document. The default view of the Properties Inspector will show HTML formatting tools. Easily switch to CSS tools by clicking on the CSS button. The tools in the Properties Inspector change when working with different objects on the page. For example, if an image is selected, then image tools will appear in the Properties Inspector. U:\On-site\FCampana\dreamweaver8\Dreamweaver_cs4.doc Page 3 of 18 © Computer Training Support Services Colorado State University The Document Window Document Toolbar The Document Toolbar allows access to several page options such as the page title, different document view options, an option to Put or Get files to/from the Remote (Web) Server, preview in browser, and several other options. The Title Bar contains the title of the current Web Page. Note: this title will also appear in the title bar of the Web browser, and will be used as a bookmark name if the end user adds the page to their “favorite” list. Tip: See Page 9 of this document for more information on Document Titles. Tip: An Example of a proper title would be: Staff Information, Foreign Languages Department – Colorado State University It is best practice to identify the page, the department, and end with a reference to Colorado State University. Status Bar At the bottom of the Document Window is the Status Bar, which contains tools to help you get information about the web page. Tag Selector The Tag Selector is located in the lower-left corner of the Status Bar and provides easy access to select HTML tags on your page. Window Size Pop-up Menu The Window Size Pop-up Menu is a guide that you can use when designing web pages. Select the arrow in the lower right corner of the tool to display a list of browser window dimensions. Tip: if the options from the Window Size Pop-up pull down menu are not available, then restore down your document window. Selecting an option from the pull down menu will resize your work area or document to the selected window dimension. Example, when choosing to design a web page at a 1024 x 768 resolution, the actual viewable dimensions in the browser window are 955 x 600 pixels. The dimensions are less than the screen resolution because the browser interface takes up space. U:\On-site\FCampana\dreamweaver8\Dreamweaver_cs4.doc Page 4 of 18 © Computer Training Support Services Colorado State University The Screen resolution helps when designing and viewing a web page because you can see how your document will look at different resolutions. Use this tool to verify that your page looks good at all resolutions. Download Statistics The Download Statistics field is located to the right of the Window Size menu. This field displays the estimated file size and download time for the web page being created based on the modem settings in the Status Bar category of the Dreamweaver Preferences. Note: this tool is only an estimation of download time based on what you think the end user might be using when connecting to the Internet. This tool is not providing a download estimation based on your Internet/modem connection. To set or change the Preferences choose Edit > Preferences, and select the Status Bar category. Recommended modem setting is 56.0 Kilobits. Panels and Panel Groups Panels and Panel Groups are designed to help the User work more efficiently in Dreamweaver. The Panels and Panel Groups work together to help customize the work space. The majority of Dreamweaver commands are located on both a panel and/or a menu. A Panel Group can have multiple Panels to choose from. The Panel Groups can be displayed in an Open style or a Collapsed Style. Change the settings by clicking with the mouse on the arrow to the left of the Panel Group Name. Tip: The Window menu can also be used to open or close a panel. When viewing the Window menu, any item that has a check mark to the left of the panel name is open or displaying. U:\On-site\FCampana\dreamweaver8\Dreamweaver_cs4.doc Page 5 of 18 © Computer Training Support Services Colorado State University Site Management Site Management is a tool used to keep track of web pages you build for a specific web project and the assets you use in a central location. Think of Site Management as a holding tank or a central storage location for all related files. Creating and Defining a Site Create a Site prior to building any pages for your web project. The Site you create will have a unique name and point to a storage folder, Local Root Folder, which will be used to hold all the related pages for the web project. Note, all items used in your web project must be stored in the specified Local Root Folder. From the Menu toolbar select Site > Manage Sites to open the Manage Site dialog box. Select the New button to generate a new Site. Select the Edit button to edit information on an existing Site. Select the Remove button to delete a site. Note, removing a site does not delete the actual files associated with your Site on your computer. For this class example, select the New button and choose Site from the flyout menu to display the Site Definition dialog box. Tip: By default, the Basic tab will be displayed in the dialog box. The Basic tab uses a wizard to walk you through the site setup. This class will focus on using the Advanced tab because it is more straight forward and easier to use. Specify a Site Name by clicking with the mouse in the Site Name field. The Site Name is an internal naming convention used in Dreamweaver. When naming the Site, don’t worry about spaces or capitalization. The Site Name is like a “pet name” for your project. The Site Name is never transferred to the Web or Remote server. The Local Root folder is the central storage location on your computer that will be used to store all files and assets for the web project. U:\On-site\FCampana\dreamweaver8\Dreamweaver_cs4.doc Page 6 of 18 © Computer Training Support Services Colorado State University Browse and select the folder to be used for the central storage or select the Folder icon to the right of the Local Root Folder field to create a new folder. The file folder chosen or created will be known as the Local Root Folder for your project in Dreamweaver. Tip: All files and assets that you plan on using in your web project must be stored in the Local Root folder. All the folders, subfolders and files that are used in your web project should be stored in the specified Local Root folder so that when you create your pages and link to assets all file references will be relative to your Site. The Site dialog box needs to know where all the images are stored within the Site.