© Ms. Masihi

 The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files, the ability to create new files and templates, and other information.  If you do not want this screen to show, check the “Don’t Show Again” box at the bottom of the screen. © Ms. Masihi

 To create a new HTML Document, click HTML under Create New.  This opens Dreamweaver in the Design View (default) with panels on the right, menu bar and tabs on top, and property inspector on the bottom of the workspace if you are in CLASSIC layout.  For all class lessons, we will be using the CLASSIC layout. © Ms. Masihi

 In the CLASSIC Layout the Insert Bar is located on the top of the Dreamweaver Workspace and contains several Tabs: Common, Layout, Forms, Data, Spry, Text and Favorites.  Each Tab contains different icons (representing elements you can add to your web page) shown on the line below the tabs. © Ms. Masihi

 The Common Tab contains some of the most frequently used icons to insert links, table, link, named anchors, dates, and images. © Ms. Masihi

 You may customize the Insert Bar using the Favorites Tab by adding the most commonly used icons to the Favorites Tab.  Right click an icon and the Customize Favorite Objects Dialog Box opens. © Ms. Masihi

 Select an item and Click >> to add an item to the favorites tab.  Use the up and down arrows to move an icon up or down.  Click Add Separator to add a separating line between icons. © Ms. Masihi

 The Properties Inspector is a context-sensitive panel located at the bottom of the workspace.  The contents change depending on the item selected on the page and whether you select HTML or CSS setting. © Ms. Masihi

 The Properties Inspector is will create HTML inline styles when you select HTML properties.  Inline styles should only be used for short formatting specific to one area of your document. © Ms. Masihi

 Inline styles are stored in the body of your document surrounding the affected page element.  If you want to change the format you must find each area in your document and modify each element. © Ms. Masihi

 Formatting using CSS will create a CSS Rule which will create a Rule in an Internal Style Sheet.  Using CSS Rules to format page elements is the preferred way to format page elements.  Internal Styles can be saved in an External Styles File and applied to multiple pages. © Ms. Masihi

 Across the top of the document workspace is the Document Toolbar.  You may change how you view the page, title the document, preview the page in a Web Browser, and more. © Ms. Masihi

 You may view your web page in 3 ways – Design View, Code View, or Split View.  Click the appropriate tab above the workspace. © Ms. Masihi

 Design View lets you see the text, images, and other objects on the web page. © Ms. Masihi

 Code View shows you the HTML code which is used by the Web Browser to display your page elements. © Ms. Masihi

 Split View divides the screen in half – showing you the code in the top half and the design (visual layout) in the bottom half. © Ms. Masihi

 You can type in a title for the web page in the Title textbox. Every page you create should have its own title.  This page title shows across the top of the Browser window and is used when someone bookmarks the page. (This is NOT the name of the stored file on your hard drive.) © Ms. Masihi

 The up and down arrows are used to upload and download files to and from a web server.  The globe is used to preview the document in a Web Browser.  The circular arrow in a circle is used to refresh a page in Design View if you have made changes in HTML code that have not appeared in the layout. © Ms. Masihi

 The Document Window is where you will be working with images, text, and other items in your Web Page.  The Insert Bar and the Menu Bar are above the Document Window. © Ms. Masihi

 At the top of the Document Window is the name of the file stored on disk. This is the name you give the file when you save it.  The file name shows in the Path: and must end in.html.  The file name may be different from the Page Title. © Ms. Masihi

 At the bottom of the Document Window is the Tag Selector (also known as the HTML Markup Tree ).  This listing will change depending on the currently selected item in the Document window. © Ms. Masihi

 Click on one of the tags to select a specific area of your web page. © Ms. Masihi

 On the right side are additional icons. Click the Arrow to click and select an item on the page.  Click the Hand Tool to drag web page contents around on the work area.  Click the Magnifying Glass to select the Zoom tool. Click on an area of the web page to zoom in on that area. Hold Alt and click to zoom out. Enter the % of magnification or click the down arrow and select preset zoom levels. © Ms. Masihi

 Panel Groups are on the right side of the work area.  Each group has one or more panels, indicated by each Tab. Click the Tab to bring that panel to the front. © Ms. Masihi

 Double Click the Tab to open and close a panel group. © Ms. Masihi

 Click the double arrows on the top right side of all the panels to collapse the panel groups.  Click the arrow again to expand the panel groups. © Ms. Masihi

 To open a Panel that is not already open, click Window and select the panel to open. © Ms. Masihi

 You may rearrange panels, panel groups, etc and save this customized workspace.  Click Window > Workspace Layout > New workspace….  In the Dialog Box that opens, give the workspace a name and then click OK to save the setting. © Ms. Masihi

 You may change the Dreamweaver Workspace, opening/closing, moving panels, etc.  To return to default Classic workspace, click Window > Workspace Layout > Classic. © Ms. Masihi

 The Menu Bar contains common Tool Menus – File, Edit View, etc to access all of Dreamweaver’s Tools. © Ms. Masihi

 The Application Bar (immediately after the DW logo) contains several quick access functions – Layout, Dreamweaver Extensions, and Manage Sites. Click the black triangle to quickly accomplish the desired task or change document layouts. © Ms. Masihi

 The Layout menu allows you to view both Code and Design View by splitting the Document window Vertically, Horizontally, place the Design on the left and code on the right and view 2 parts of HTML code in separate windows. © Ms. Masihi

 The Insert Bar contains several tabs, each of which contain the most commonly used web page elements.  The Common Tab contains the most used page elements - such as insert links, images, and tables. © Ms. Masihi

 Each Tab contains a different set of Icons relating to that specific tab. © Ms. Masihi

 Below the workspace is the Properties Inspector which contains context sensitive formatting options.  For example, options available in the Properties Inspector for Text (above) are different from options for Images (below). © Ms. Masihi

 The Document Window is the large workspace in the middle of the screen where you add web page elements. © Ms. Masihi

 Above the Document Window is the Document Toolbar. © Ms. Masihi

 The first area lets you view your page in Code View (HTML Code), Design View (WYSIWYG), or Split View (half code, half design). © Ms. Masihi

 The next area is where you can add a Title to your Page.  The Page Title is what appears on the Blue Bar at the top of a Web Page when viewed in a Browser. © Ms. Masihi

 Click the globe to Preview the document in a Browser.  After making changes to the HTML code, you may click the Refresh Button to refresh the Design View. © Ms. Masihi

 Clicking the Visual Aids Icon gives you options for viewing page elements that you want to show or hide. © Ms. Masihi

 If an asterisk (*) appears at the end of a file name, changes have been made to the document since the last save.  A file name without an ending asterisk has had all page elements saved. © Ms. Masihi

 HTML Tags are displayed in the Tag Selector at the bottom of the Document Workspace in the Status Bar.  This Tag Selector is also knows as the HTML Mark Up Tree.  Clicking a Tag in this line is an easy way to select a page element. © Ms. Masihi

 On the right part of the Tag Selector are the Select Tool (arrow) which is selected by default, the Hand that allows you to move your page around without using the scroll bar, and a Zoom Tool. © Ms. Masihi

 You can increase or decrease page magnification by typing in different percentages or clicking the down arrow and selecting a preset percent. © Ms. Masihi

 Click the down arrow by the width and height dimensions will allow you to resize the window to see how a page looks in different sized Browser windows. © Ms. Masihi

 The final section shows the approximate file size and how long it would take the file to download based on a 56K connection. © Ms. Masihi

 To change the download speed, click Edit > Preferences > Status Bar.  You may also change the viewing Window Size in this Dialog Box. © Ms. Masihi

 On the right side of the workspace are Panels.  Single click a tab to bring it to the front.  To Open and Close each panel group, double-click in the gray area on the right of the tabs. © Ms. Masihi

 Within each group are individual Panels, identified by Tabs with the Panel Name on the tab.  Click a tab to bring that panel to the front. © Ms. Masihi

 Each Panel has a Panel Options Icon on the top right corner (3 lines and 3 dots).  Click the Panel Option Icon for an Options Menu listing available options for the current panel.  Panel Options are different for each Panel. © Ms. Masihi

 Panels may be collapsed by clicking the double arrow at the top of the panel groups.  Click the double arrow again to expand the panel groups. © Ms. Masihi

 After a web page has been created, it needs to be tested using different Browsers.  Each Browser interprets the HTML code slightly differently, so it is always a good idea to view your web page in several different Browsers. © Ms. Masihi

 Click the Preview in Browser Icon above the workspace.  Select the Browser, and view the web page as interpreted by the selected Browser. © Ms. Masihi

 The Multiscreen Preview button allows viewing the web page on various handheld devices. © Ms. Masihi

 You may add Browsers to Dreamweaver’s Preview in Browser.  Click Edit > Preferences > Preview in Browser. © Ms. Masihi

 Dreamweaver will list the currently installed Browsers in the text box. © Ms. Masihi

 In the Preferences Dialog Box, click the + to add a Browser.  You may also designate a Primary and Secondary Browser.  By checking Preview using temporary file, you can preview the web page without first saving the file. © Ms. Masihi