Join James Williamson for an in-depth discussion in this video The Application toolbar, part of Dreamweaver CS5 Essential Training.
The Application toolbar in Dreamweaver is designed to give you quick access to program options, such as workspaces, document views and site management. It's also where you'll find panels that can extend the functionality of Dreamweaver by downloading interactive widgets or accessing many of Adobe's new online services. So here we are in Dreamweaver. The Application toolbar is found in slightly different locations on the Mac versus the PC. Here I'm on the PC. The Application toolbar can found docked with the menu at the very top right-hand corner of Dreamweaver.
Now on the Mac, you guys are going to find it right down here in your Document toolbar. So it's a slightly different location on the two platforms. Now you can turn it off. If you go up to Window, you'll find a little checkmark besides Application Bar. You can turn that off on both the Mac and the PC, slight difference there as well. When you turn it off on the Mac, it all goes away, but when you turn on the PC, you'll see that this row of icons only went away. So there is really no saving in terms of interface real state unless you're on the Mac. So on the PC, now you can just go ahead and leave that on.
So let's talk about what the Application toolbar does for us. Well, one of the most common uses for the Application toolbar is to switch between workspaces. Workspaces, which we'll talk about in a little bit more detail, little bit later on, allows you to rearrange panels very quickly and switch from one task to another in Dreamweaver very rapidly. So you'll notice that right now, we're currently using the Designer Workspace. But if I grab this pulldown menu, I can switch to the Coder one if I need to do a lot of hand-coding. I can go back to a Dual Screen layout. I can go to what they call a Classic mode, which looks like some of the earlier versions of the Dreamweaver.
Now I can head right back to the Designer Workspace. So it's very quick and easy way to access layouts for different tasks within Dreamweaver. You'll also notice this row of icons right up here. Now the first row of icons has to do with Layout. If you click that, you'll notice that we can switch between our Code View, Design view, a Split Code, which allows us to have code on both sides, which is really handy if you want your CSS on one side and your Code view on the other side, Code and Design, which will put Code on one side and the Design view on the other.
We'll go right back to Design. This same functionality is available right here on the Document toolbar, but I kind of like the fact that we can access it quickly up here through the Application toolbar. We also have the ability to Extend Dreamweaver. If you click on the Extend Gear icon up here, you'll notice that we can access our Extension Manager, which allow us to load our extensions into Dreamweaver, or widget browser or Browse for other Dreamweaver Extensions. Now I cover the Widget browser and its own movie little bit later on, but what this allows us to do is extend the functionality of Dreamweaver by going out and getting third party tools or tools that Adobe provides us that are going to give us extra functionality within Dreamweaver.
Now this is not the only place where you can access CS Live Services, but it's a really central location for those. If I click on the CS Live icon, it's going to open up the CS Live panel. It's going to take us to extended services, such as Adobe's BrowserLab integration, SiteCatalyst, which allows you to view Web Analytics of your site, and even share your screen with Acrobat.com. So you can get into a connect session with other designers or even clients and share your screen, so that you can show them what you have going on. So there is a lot of really cool stuff right in that one place.
Now it may be a little small in size, but the Application toolbar puts considerable power in your hands. Being able to switch between workspaces, toggle Design views, and access all those external services makes it an incredibly handy toolbar to have around.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video
Skill Level Beginner
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.
However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.
HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.
1. Getting Started
2. The Dreamweaver Interface
3. Site Control
4. Creating New Documents
5. Adding Text and Structure
6. CSS Foundations
7. Controlling Typography
8. Working with Images
9. Creating Links
10. Controlling Layout with CSS
11. Working with Tables
12. Working with Forms
Reviewing form design3m 2s
Creating accessible forms7m 33s
Setting form properties4m 6s
The fieldset and legend tags4m 32s
Inserting text fields5m 58s
Inserting list menu items5m 26s
Inserting checkboxes7m 50s
Inserting text areas4m 12s
Inserting submit buttons3m 37s
Form element styling8m 52s
Styling form layout11m 49s
Adding form interactivity2m 47s
Using Spry validation widgets12m 49s
13. Building Templates
14. Adding User Interactivity
15. Working with Flash and Video
16. Managing Sites
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.