Ten Ton Dreamweaver [Electronic resources]

Surveying the Dreamweaver Landscape

Once you've created a blan95 page from Dreamweaver's Start Page, you're ready to tour the main interface. The Dreamweaver window has lots of scenerypanels, toolbars, and inspectorsall waiting to get to know you. Especially note the Insert and Document toolbars at the top, the Property Inspector at the bottom, and the column of panels on the right. The main viewing area is where the current page is displayed. At the top of the window, you'll see the Dreamweaver title bar. This displays the path to where the file is saved (called the document path), the name of the document, and also the technology being used (XHTML by default in Dreamweaver).

If you're running Dreamweaver on Windows, by default all your panels and toolbars are docked.

As usual, the scenery will differ a little depending on whether you're on Windows or Mac. In Windows, by default all your panels and toolbars are dockedthat is, they're attached to the sides of your screen. Later you'll see how to undock the panels, move them around, and begin to customize your workspace a little more.

On the Mac, all the panels and other window elements float over everything else on your screen.

On the Mac, all the panels and other window elements float over everything else on your screen, just as in any other program on the Mac. Again, later you'll see how to rearrange the elements on your screen.

Everybody Outta the CarIt's the Document Toolbar!

The Document toolbar, which appears by default at the top of the Dreamweaver window, contains several buttons and pop-up menus to assist you in managing sites, previewing your work, giving your page a title, and uploading files. It has some tools for working with raw code, too.

Most important is the first set of three buttons: Code View, Split (Code and Design) View, and Design View. Each will change the view of your page, allowing you to work in a way that suits you. We'll talk about these three page views later. Toward the middle of the toolbar is a text field where you can add a title for your page. This title will appear in the visitor's web browser title bar and will also be used when your site is bookmarkedso choose your page names carefully!

If you'd like to turn off the Document toolbar, choose View > Toolbars or right-click (Windows) or Control-click (Mac) any other toolbar. Repeat this process to bring it back.

25-Mile Rest Stop: The Insert Bar

The Insert bar also appears by default at the top of your screen. This toolbar contains groups of layout elements organized into categories, which are available from the pull-down menu on the left. The Insert bar is one of the most common means of placing images, tables, form elements, scripts, and all kinds of other objects on your page. In fact, think of it as your Swiss Army knife, packed full of diverse tools for a variety of purposes.

To toggle the Insert toolbar off and on, choose Window > Insert from the main Dreamweaver menu bar.

The Insert bar has two modes: a menu mode (what you're looking at right now), and a tabbed mode. Both allow you to insert the same objects; the only difference is the way the bar is organized. You may find the tabbed mode a bit easier to use. If you'd like to try it, choose Show as Tabs from the pull-down menu. Now you can move through the Insert bar's categories using the tabs that appear across the top, and even expand and collapse the toolbar by using the arrow that appears in the top-left corner. If you want to go back to the menu mode, in addition to toggling the menu option, you can right-click (Windows) or Control+click (Mac) the tabs at the top and choose Show as Menu.

Whichever mode you prefer, remember that the Insert bar is a multipurpose tool for building your pagesso keep an eye out for it as you make your way through the remaining chapters.

Stick or Automatic? The Standard Toolbar

The Standard toolbar contains buttons similar to those found in Microsoft Word and Excel. If you're familiar with either of those programs, this will be a road-trip cake walk. The toolbar contains common buttons for creating a new document, opening, saving, undoing, and performing other typical commands.

If you want to use the Standard toolbar, you'll have to turn it on first. Choose View > Toolbars > Standard. Or just right-click (Windows) or Control-click (Mac) either the Insert or Document toolbar at the top of the screen and choose Standard from the contextual menu that appears. You'll also be able to show or hide any of the other toolbars that Dreamweaver has to offer from this same menu.

Two commands worth taking a closer look at are Print Code and Save All. Print Code is a handy function for, well, printing your page's code. The Save All command saves all your open files in one shot, which is very handy. When you use Save All, a Save As dialog box appears for any open documents that have not yet been saved. We'll talk more about saving in the sidebar "Saving Savvy" in Chapter 5.

When you right-click (Windows) or Control+click (Mac) a toolbar, you'll see the toolbar contextual menu. The checked toolbars are open.

Personally, I don't use the Standard toolbar, but rely on keyboard shortcuts instead.

Into the Status Bar Countryside

The Status bar at the bottom of the Dreamweaver window relays information about the current page and download speeds and also includes a few navigation and selection tools, some of which are new to Dreamweaver 8.

At the far left of the Status bar, you'll see the Tag Selector, one of the most useful components in the Dreamweaver interface. The Tag Selector keeps track of your cursor position on the page, and you can also use it to select blocks o90 code. At this point, it will say only <body>, because there's nothing on your page. But once you start building layoutsadding tables, images, text, and the likeyou'll see this area fill with tag blocks. Clicking a tag block will highlight that element on your page.

Noteworthy

Toward the right side of the Status bar, you'll see the Select, Hand, and Zoom tools, which allow you to zoom in on your page, navigate, and work with objects. These tools work pretty much the same way as similar tools you may have worked with in page layout or graphics programs.

At the bottom right of the Status bar are the Window Size menu and the load time indicatorgreat tools that give you an idea of how your page will look at different monitor resolutions and how long your page will take to download and open at different modem speeds. To change the monitor resolution, just choose a size from the Window Size pull-down menu, and the Dreamweaver window resizes. You can also customize the window sizes and the download speed through the Status bar preferences (choose Edit > Preferences in Windows or Dreamweaver > Preferences on the Mac), although you may want to leave the default connection speed set to 56k. Even though 56k isn't reflective of modern connection speeds, if your download time is good at this speed, it'll blaze at warp factor 8 on anything faster.

To be honest, I don't use either the monitor resolution or connection speed settings. I rely on my results when I vigorously test my sites once they're live online. In other words, I check different window sizes and download times manually. However, if you want to use these settings, go for it.

Document Tab Detour

Document tabs, which are turned on by default, appear in a row across the top of your screen. When you have more than one file open at a time, each file is given a tab. This makes switching between your open files fast and easy, and the tabs help keep your workspace tidy and uncluttered.

Metric? Imperial? It's All about Pixels and Browsers Now"in Chapter 3.

One Eye on the Map: The Style Rendering Toolbar

Most of us build our web sites to be viewed on a computer screen. However, with the explosion of Internet-capable gadgetry like cell phones, Palm Pilots, and WebTV, who knows what folks might be using to view your sitewhich opens up a whole range of issues. It's hard enough to build sites that look decent in the various web browsers available these days, but now you have to wrestle with these new web-ready devices, too. It's a recipe for an asylum vacation.

Dreamweaver's new Style Rendering toolbar saves the day (and your sanity). This handy little fella will give you an idea of how your page will appear on different media displays, including handheld devices, printers, and television sets. To turn on this toolbar, choose View > Toolbars > Style Rendering. You'll see buttons for switching to different output types, and you'll even be able to toggle the display of Cascading Style Sheets. It's always important to preview your work to see how it will appear, and it's much easier with Dreamweaver's Style Rendering toolbar.

(1) Render Screen Media Type

(2) Render Print Media Type

(3) Render Handheld Media Type

(4) Render Projection Media Type

(5) Render TTY Media Type

(6) Render TV Media Type

(7) Toggle display of CSS styles

A word of caution, though: Because web-ready technology is so new, those who are jumping into it are not expecting sites to look perfect on their Blackberries and cell phones. Besides, most of your visitors will be viewing your site from a computer. The point here is that while it's good to keep these new gadgets in mind, don't murder yourself trying to build the perfect site that'll run on any conceivable device. That's a one-way trip to the loony bin for sure. In the next few chapters, we'll talk more about building sites that are compatible with today's most popular computers, browsers, and settings, so stick around to see what's involved.

Try right-clicking (Windows) or Control+clicking (Mac) a file's tab. You'll see a pop-up menu with some helpful options such as Close All, Close Others, and Save All.

To move the Property Inspector around, just drag the vertical bar on the left side.

If you accidentally close the Property Inspector, just choose Window > Properties to resuscitate it.

Try pressing Ctrl+~ (Windows) or Command+~ (Mac) to flip between the document views. The tilde key is the squiggly guy underneath the Esc key.

Before sounding the alarm and having panic ensue, press F1 to activate Dreamweaver's online help. Then rest easy and search for your answer.