Creating a Dreamweaver Web Page and Local Site (Adobe Dreamweaver CS5) Part 2

Document Tab

The document tab displays the Web page name, which is Untitled-1 for the first Web page you create in a Dreamweaver session, as shown in Figure 1-4. (The “X” is the Close button for the document tab.) After you save and name the Web page, the document tab reflects the changes by displaying the document name. When you make changes to the document, Dreamweaver includes an asterisk following the file name. The asterisk is removed after the document is saved, and the file path leading to the document’s location is displayed to the right of the document tab.

Document Window

The Document window displays the current document, or Web page, including text, tables, graphics, and other items. In Figure 1-4, the Document window is blank. You work in the Document window in one of the following views: Design view, the design environment where you assemble your Web page elements and design your page (Figure 1-4 displays Design view); Code view, which is a hand-coding environment for writing and editing code; Split view, which allows you to see both Code view and Design view for the same document in a single window; Live View, which shows the page such as it would appear in a browser; Live Code, which displays any HTML code produced by JavaScript or server-side programming; or Inspect Mode, which evaluates the code. When you open a new document in Dreamweaver, the default view is Design view.

Panels and Panel Groups

Panel groups are sets of related panels docked together below one heading. Panels provide control over a wide range of Dreamweaver commands and functions. Each panel group can be expanded or collapsed, and can be undocked or docked with other panel groups. Panel groups also can be docked to the integrated Document window. This makes it easy to access the panels you need without cluttering your workspace. Panels within a panel group are displayed as tabs. Each panel is explained in detail as it is used in the topics throughout the topic. Some panels, such as the Insert bar and Property inspector, are stand-alone panels.


The Insert bar allows quick access to frequently used commands. It contains buttons for creating and inserting various types of objects — such as images, tables, links, dates, and so on — into a document. As you insert each object, a dialog box allows you to set and manipulate various attributes. The buttons on the Insert bar are organized into several categories, such as Common and Layout, which you can access through tabs. Some categories also have buttons with pop-up menus. When you select an option from a popup menu, it becomes the default action for the button. When you start Dreamweaver, the category in which you last were working is displayed.

The Property inspector displays settings for the selected object’s properties or attributes. This panel is context sensitive, meaning it changes based on the selected object, which can include text, tables, images, and other objects. When Dreamweaver starts, the Property inspector is positioned at the bottom of the Document window and displays text properties if a Document window is open. Otherwise, the Property inspector is blank.

Status Bar

The status bar located below the Document window (Figure 1-5) provides additional information about the document you are creating.

Figure 1-5

Figure 1-5

The status bar presents the following options:

•    Tag selector: Click any tag in the hierarchy to select that tag and all its contents.

•    Select tool: Use the Select tool to return to default editing after using the Zoom or Hand tool.

•    Hand tool: To pan a page after zooming, use the Hand tool to drag the page.

•    Zoom tool: Available in Design view or Split view, the Zoom tool can be used to check the pixel accuracy of graphics or to better view the page.

•    Set magnification: Use the Set magnification pop-up menu to change the view from 6% to 6400%; default is 100%.


•    Window size: Displays the Window size value, which includes the window’s current dimensions (in pixels) and the Window size pop-up menu.

•    Download size and download time: Displays the size and estimated download time of the current page. Dreamweaver CS5 calculates the size based on the entire contents of the page, including all linked objects such as images and plug-ins.

•    Unicode (UTF-8): An industry standard that allows computers to consistently represent and manipulate text expressed in most of the world’s writing systems.

Vertical/Horizontal Bars

A vertical bar separates the panel groups from the Document window, and a horizontal bar separates the Property inspector from the Document window. Double-clicking the Property inspector bar hides or displays the Property inspector. The panel groups contain a Collapse to Icons/Expand Panels button (Figure 1-6). If your screen resolution is set to 800 X 600, a portion of the Property inspector may not be displayed when the panel groups are expanded.

Application Bar

The Application bar displays the Dreamweaver menu names (Figure 1-6). Each menu contains a list of commands you can use to perform tasks such as opening, saving, modifying, previewing, and inserting data into your Web page. When you point to a menu name on the Application bar, the area of the Application bar containing the name is selected.

To display a menu, such as the Edit menu (Figure 1-6), click the menu name on the Application bar. If you point to a menu command that has an arrow at its right edge, a submenu displays another list of commands. Many menus display some commands that appear gray, or dimmed, instead of black, which indicates they are not available for the current selection.

Figure 1-6

Figure 1-6

Toolbars

In the Classic workspace, or view, Dreamweaver can display four toolbars:

Document, Standard, Style Rendering, and Browser Navigation. You can choose to display or hide the toolbars by clicking View on the Application bar and then pointing to Toolbars. If a toolbar name has a check mark next to it, it is displayed in the window. To hide the toolbar, click the name of the toolbar with the check mark, and it no longer is displayed. The Insert bar is considered a panel and was discussed previously in this topic.

The Document toolbar (Figure 1-7) is the default toolbar displayed in the Document window. It contains buttons that provide different views of the Document window (e.g., Code, Split, and Design), the Document title, and some common operations, such as Preview/Debug in Browser, Refresh Design View, View Options, Visual Aids, and Check Browser Compatibility.

The Standard toolbar (Figure 1-8) contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. The Standard toolbar is not displayed by default in the Dreamweaver Document window when you first start Dreamweaver. You can display the Standard toolbar through the Toolbars command on the View menu, or by right-clicking a blank area on the Document toolbar and then clicking Standard on the context menu. As with other toolbars and panels, you can dock or undock and move the Standard toolbar, so it might be displayed in a different location on your screen.

Figure 1-7

The Standard toolbar (Figure 1-8) contains buttons for common operations from the File and Edit menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. The Standard toolbar is not displayed by default in the Dreamweaver Document window when you first start Dreamweaver. You can display the Standard toolbar through the Toolbars command on the View menu, or by right-clicking a blank area on the Document toolbar and then clicking Standard on the context menu. As with other toolbars and panels, you can dock or undock and move the Standard toolbar, so it might be displayed in a different location on your screen.

The Style Rendering toolbar (not shown by default) provides options for designing for different media types, such as screen, print, handheld, projection, TTY (teletype), television, CSS Styles, and Style Sheets. The CSS (Cascading Style Sheets) Styles button works independently of the other seven buttons and provides the option to disable or enable the display of CSS styles.

Figure 1-8

The Style Rendering toolbar (not shown by default) provides options for designing for different media types, such as screen, print, handheld, projection, TTY (teletype), television, CSS Styles, and Style Sheets. The CSS (Cascading Style Sheets) Styles button works independently of the other seven buttons and provides the option to disable or enable the display of CSS styles.

The Browser Navigation toolbar (also not shown by default) provides feedback regarding browser capability.

Opening and Closing Panels

The Dreamweaver workspace accommodates different work styles and levels of expertise. Through the workspace, you can open and close the panel groups and display or hide other Dreamweaver features as needed. To open a panel group, select and then click the name of a panel on the Window menu. Closing unused panels provides an uncluttered workspace in the Document window. To close an individual panel group, click Close Tab Group on the context menu accessed through the panel group’s title bar (Figure 1-9) or click the Window menu and then click the panel name. To expand/collapse a panel, click the Expand Panels/Collapse to Icons button above the panel groups.

To Display the Standard Toolbar, Change the Icon Colors, and Close and Open Panels

Figure 1-9

To Display the Standard Toolbar, Change the Icon Colors, and Close and Open Panels

The following steps illustrate how to display the Standard toolbar, change the icon colors, and close and open the panels.

Figure 1-10

Figure 1-10

1

•    Click View on the Application bar to display the View menu.

•    If necessary, click the down-pointing arrow at the bottom of the View menu to scroll the menu.

•    Point to Toolbars, and then point to Standard on the Toolbars submenu to highlight Standard on the Toolbars submenu (Figure 1-10).

tmpc05f-3

Figure 1-11

2

•    Click Standard to display the Standard toolbar.

•    If your Dreamweaver window does not display icons in color, right-click a blank spot on the Insert bar to display the context menu.

•    Point to Color Icons on the context menu to highlight the command (Figure 1-11).

Figure 1-12

Figure 1-12

3

•    If a check mark does not appear next to Color Icons, click Color Icons to add color to the icons.

•    Press the F4 key to close all open panels and inspectors and to maximize the workspace available in the Document window.

•    Press the F4 key again to redisplay the panels (Figure 1-12).

Q&A

What is the fastest way to open and close panels?

The fastest way to open and close panels in Dreamweaver is to use the F4 key, which opens or closes all panels and inspectors at one time.

Can the location of the Standard toolbar change?

Yes. Previous settings determine the location of the Standard toolbar. It might be displayed below the Document toolbar or in another location in the Dreamweaver window.

Defining a Local Site

Web design and Web site management are two important skills that a builder of Web sites must understand and apply. Dreamweaver CS5 is a site creation and management tool. To use Dreamweaver efficiently, you first must define the local site. After defining the local site, you then publish to a remote site.

The general definition of a site, or Web site, is a set of linked documents with shared attributes, such as related topics, a similar design, or a shared purpose. In Dreamweaver, however, the term site can refer to any of the following:

•    Web site: A set of pages on a server that are viewed through a Web browser by a visitor to the site.

•    Remote site: Files on the server that make up a Web site, from the author’s point of view rather than a visitor’s point of view.

•    Local site: Files on your computer that correspond to the files on the remote site. You edit the files on your computer, and then upload them to the remote site.

•    Dreamweaver site definition: Set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.

These terms are interchangeable. This folder is no different from any other folder on your computer’s hard drive or other storage media, except for the way in which Dreamweaver views it. When Dreamweaver looks for Web pages, links, images, and other files, it looks in the designated root folder by default. Any media within the Web site that are outside of the root folder are not displayed when the Web site is previewed in a Web browser. Within the root folder, you can create additional folders and subfolders to organize images and other objects. A subfolder (also called a nested folder) is a folder inside another folder.

Dreamweaver provides two options to define a site and create the hierarchy: You can create the root folder and any subfolders, or create the pages and then create the folders when saving the files. In this topic, you create the root folder and subfolders and then create the Web pages.

Determine the location for the local site.

Before you create a Web site, you need to determine where you will save the site and its files.

•    If you plan to work on your Web site in various locations or on more than one computer, you should create your site on removable media, such as a USB flash drive. The Web sites in this topic use a USB flash drive because these drives are portable and can store a lot of data.

•    If you always work on the same computer, you probably can create your site on the computer’s hard drive. However, if you are working in a computer lab, your instructor or the lab supervisor might instruct you to save your site in a particular location on the hard drive or on removable media such as a USB flash drive.

Creating the Local Root Folder and Subfolders

Several options are available to create and manage your local root folder and subfolders: Dreamweaver’s Files panel, Dreamweaver’s Site Setup feature, or Windows file management. In this topic, you use Dreamweaver’s Site Setup feature to create the local root folder and subfolders, the Files panel to manage and edit your files and folders, and Windows file management to download and copy the data files.

To organize and create a Web site and understand how you access Web documents, you need to understand paths and folders. The term path sometimes is confusing for new users of the Web. It is, however, a simple concept: A path is the succession of folders that must be navigated to get from one folder to another. Folders sometimes are referred to as directories. These two terms often are used interchangeably.

A typical path structure has a master folder, usually called the root and designated by the symbol “\”. This root folder contains within it all of the other subfolders or nested folders. Further, each subfolder may contain additional subfolders or nested folders. These folders contain the Web site files. Most sites include a subfolder for images.

For this topic, you first create a local root folder using your last name and first initial. Examples in this topic use David Edwards as the Web site author. Thus, David’s local root folder is edwardsd and is located on drive H (a removable disk). Next, for this topic, you create a subfolder for the Montana Parks site and name it parks. Finally, you create another subfolder within parks and name it images. All Montana parks-related files and subfolders are stored within the parks folder. When you navigate through this folder hierarchy, you are navigating along the path. The path to the Montana Parks Web site is H:\edwardsd\parks\. The path to the images folder is H:\edwardsd\parks\ images\. In all references to H:\edwardsd, substitute your last name and first initial and your drive location.

Next post:

Previous post: