I will be posting some Dreamweaver tutorials for the beginner.  There are many tutorials out there, though they provide good content, I am noticing with the response of many of you out there that you get left in the dust with advance work mixed in with beginner content.  Many are just frustrated as they don’t know what panels are and keyboard shortcuts  and many other things that others instinctively know and just move entirely to fast for someone who just opened Adobe Dreamweaver and wants to start ant square one.  These tutorials are for you.

To start I am posting this image for reference; so when I say that I am in the property inspector you can reference this image to see where I am at and it helps you remember where things are without referencing th image. Make sure you click the image to view the High Resolution form so you can see clearly the marked up information.

Application Bar: This contains all of the DW menus (Windows) and it includes 4 menus that are shared by Mac and Win users.  It also has the search field and workspace switch drop down menu.

Workspace Dropdown: Here you can choose between workspace layouts.  You can also create custom layouts to suit your needs or reset your current layout.

Search for Help: You can enter your search term and this will search and find results on the internet. If your not connected there are still built in search features so you will still get some help with your topic.

Document Toolbar: There are three options here and they include design view, split code, and code view. Design view is for working with your site in a What You See Is What You Get (WYSIWYG). Split code will allow you to work on the design view and the code view by splitting your screen in half.  Code view is similar to using a text editor in that you manually type the code in to get your results.

Additionally you can preview your page in the Document Toolbar, check your code for mistakes and work with a remote server.

Document Window: This is your main area in which you see your content whether its in design view or code view; you simply use this for your editing.

Tag Selector: This is a great way to see where your at in your site by the mouse cursor. It is the document tree that reveals which page elements,  ID or class you have selected.  This is great in combination with the Property inspector as you can select an element then move to the Property Inspector and make your changes.

Property Inspector: This is DW main area for working with code for the area that is selected; and this changes its features depending on what you have selected.  This is called content sensitive which basically means that it changes when you choose certain ID’s, Classes, or other areas of your site. You will also notice that you can select HTML or CSS on the left to make your changes.

Status Bar: This is information that is for the current page; this includes encoding, size and dimensions.

Panel Groups: These panels control how your work with your file.  They can be docked together, floated, changed and customized.  They include panels for common features like site files, CSS and they change depending on your workspace that you choose.

That is it for this post; next I will talk a bit about workspaces, creating your own custom workspace, describe the difference between the default workspaces and working with the panels.