WorkspaceWelcome Screen

Insert BarProperties Inspector

© Ms. Masihi

Welcome Screen 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

Insert Bar 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, email 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

Properties Inspector 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

Document Toolbar

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

Document Views

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

Document Title

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

Document Window

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

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

Customize Workspace Layout

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

Default Workspace

You may change the Dreamweaver Workspace, opening/closing, moving panels, etc.

To return to default Classic workspace, click Window > Workspace Layout > Classic.

© Ms. Masihi

Menu and Application Bar

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

Insert Bar

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

Properties Inspector

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

Document Window

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

© Ms. Masihi

Document Toolbar

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

Panels and Panel Groups

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

Web Page Browsers

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

Sooo.. much more to learn

But not enough time in this course.I encourage enthusiasts to explore at home.

© Ms. Masihi