Home
Username:
Password:
Adobe Dreamweaver CS4 Tutorials

Dreamweaver Workspace / Views & Workspaces

Subtitles of the Movie

Let me proceed now by giving you a quick overview of the Dreamweaver workspace starting with the document toolbar up here near the top of the interface, the document toolbar contains buttons that let you toggle between different views of your document quickly, notice over here we have a button labelled Code, this will show you the underlying HTML code with line numbers and icons over here for working directly with the HTML code. Then we have split view which will show code in the top part and then your page design in the lower part or you can go with the design view which hides all the code, new in Dreamweaver CS4 is a Live View which will simulate what this page will look like in a browser, notice that I have an iframe in here, that is pulling in an external file, you can't see this in normal design view in Dreamweaver but if I go to Live View I'm simulating what this would look like in the browser so I can see all of the content you also have some workspace views up here at the top, App developer, App developer plus, Classic coder, Coder plus designer, Designer compact and dual screen. The designer workspace is an integrated workspace using multiple interfaces in which all the document windows and panels are integrated into one larger application window notice you have panel groups over here to the right, we've also got coder workspace above that so this is going to switch things around, this is the same integrated workspace as designer but with the panel groups docked over to the left here and with the document window showing code view by default. The dual screen workspace option at the bottom lets you organize a layout, if you have a secondary monitor, I have a secondary monitor set up and some of my panels and windows are actually on my second monitor so this lets you put all of your panels on your second monitor and it keeps the document window and the Property Inspector here on your primary monitor, let's go back to design view and you can see that my panels are gone, they're over on my secondary monitor. Let me go back and move my workspace to the designer option, the designer workspace will be the one that I will be using for most of the movies in this tutorial. Dreamweaver also lets you increase the magnification or zoom in the window so you can check the pixel accuracy of graphics, select small items more easily, design pages with small text, design larger pages and so on. You'll find that here in the view menu, notice you can zoom in or zoom out or you have also magnification setting, let's go up to 300 percent and now I can scroll through this and see my design in much greater detail. Let's go back and set this to 100 percent which will be also the default setting for the duration of this tutorial. Dreamweaver also has a set of tools to allow you to place and design more precisely in the document window. The chief tool is the ruler right here along the top and along the side, if you don't see your ruler choose View and then Rulers is an option and you want to make sure there's a Show next to that ruler option, you can also from the ruler drag down guides that are by default green to help you line up things both in a horizontal direction and vertical direction. I continue my introduction to the Dreamweaver CS4 workspace in the next movie by reviewing the Insert Bar, Tag Selector, and the Property Inspector.

Tutorial Information

Course: Adobe Dreamweaver CS4
Author: James Gonzalez
SKU: 33968
ISBN: 1-935320-30-0
Release Date: 2009-02-13
Duration: 9.5 hrs / 104 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available