Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
One of the things that Dreamweaver is known for is its ability to handle many of the complex tasks of creating Web pages visually, with Dreamweaver automatically generating the code behind the scenes. Even when working with objects that are relatively simple to code such as tables, Dreamweaver can speed up the process of generating that code into just a single click. The secret behind much of this success is the Insert panel, and in this movie I want to take a moment to explore the Insert panel in more detail. Now because of the Custom workspace that I have up, I see the Insert panel docked up here in a horizontal fashion.
You may see it as a vertical panel over here in the panel dock. It doesn't really matter where you have it, just so long as you're comfortable with it being there. I am just going to show you that real quick. If I take the panel and undock it and float it around, notice that it sort of becomes that vertical panel and you might see it in a workspace, where it's sort of over here. So if you like it like that, you can certainly leave it like that. You can switch between the different groupings of objects, by simply grabbing the menu. But if you prefer it in sort of this horizontal space, that's easy to do as well.
Now one of the first things that you're going to notice about the Insert panel is that it has these tabs or menu options up top, and they sort of group objects together. So you're going to hear me refer to these as objects all the time and that shows you. When somebody has been using Dreamweaver for a long time, they will refer to this almost sometimes as the Objects panel because that's what it used to be known as. So it's very tough for me to get out of that habit. But each of these things I refer to as Objects. This is the Common objects for example. These are Layout objects. So essentially they've grouped these object together based on either the type of object that they are, or how frequently you're probably going to be using them.
Common objects, you guessed it, these are objects that you're going to be using fairly frequently within Dreamweaver. They are very common. Our Layout objects are going to be elements or objects that are related to page layout. We have Forms, Data, Spry. Now in some cases you're going to see fewer or more of these based upon on the type of page that you have opened. For example, if you're working with a PHP page, you'll see an entirely new tab that has PHP elements in it. You're working with ColdFusion, you'll see ColdFusion tab. So there are instances where you're going to see more of these or less of these, based on what you have opened.
Now some of these you may never use, if you're not doing InContext Editing, which has actually been discontinued by Adobe. There are plenty people out there, they are still using it. But if you're not using it, you'll probably never open that panel up. If you're not working on any jQuery Mobile projects, you'll probably never use this grouping as well. Now if you have the Insert panel arranged in this sort of horizontal layout as I do and your tabs are taking up too much space, feel free to right-click that and you can actually tell it to show as menu, and that saves even more space by sort of lowering the height of the Insert toolbar, and then you have just as you do when it say vertical menu, you have sort of this pulldown menu option.
Now in my opinion it doesn't really take up that much space. So I actually like to show it as tabs instead. You also may have noticed when I was looking at those options that we have the option of turning these color icons on and off. This sort of becomes a thing within Adobe interfaces, this sort of neutral gray color. If I right-click I can turn the color icons on and off, and there's actually been some debate during the pre-release phase, as to whether Adobe was just going to turn all the icons gray by default. Frankly I don't like it, because I think gray icons looks like something is inaccessible and then when you hover over it, you get the color which is again kind of weird.
But there's a bigger reason, and I'm going to turn the Color icons back on again and sort of discuss that. You can see that these icons have different colors, and there's actually a reason for that. If I go to Spry for example, you'll notice that the Spry Widget objects are blue. The Spry form objects have sort of this green tint to them. So a lot of times the objects are communicating something visually by that color. But again, it's a personal choice. You can turn that on, you can turn it off, doesn't really matter. Okay, so we're going to be using again the Insert panel all the way throughout this title.
I don't want to go through every single setting here and overburden you with that. Just spend some time looking at all these different options. You can insert tables for example. You can insert images. Now you'll notice that some of these have pulldown menus and if you click on the pulldown menu, you can see that there are actually multiple things that you can insert that are grouped with images, or multiple things that are grouped with media like Flash video, or ActiveX Plug-ins and things like that. Now I want to just kind of show off what the Insert panel can do, by coming over here to an area of the page that's really impossible to access in Design view and that's the Head of the document.
There's a lot that goes on in the head of your document, you're going to have keywords, metadata, the title of your document, links to external Style sheets. There's a lot going on there, and unless you go into Code view, it's almost impossible to access that content. But through the Insert panel I can modify content within the head of my document without ever going into Code view. So for example, I can garb this pulldown menu, and notice I can create any custom Meta tag I want, I can use Keywords, Descriptions, Links to external CSS files and things like that, very quickly and very easily.
I'm just going to click Description and that brings up a nice dialog box, this is okay. You want to give this page a description, go right ahead and do that. So I'm going to type in, The Roux Academy provides fine art education across multiple disciplines in an environment that encourages growth and nurtures creativity. All right! I know watching me type is fascinating. Essentially, you can just go in and type in whatever description you want and when I click OK, now my page has a description.
Now what did I actually do, by doing that? Well if I switch over to Code view, you can see that now up in the Head of the document, which we simply couldn't see in Design view, there is a new Meta tag with a description and we've given it one. So now search engines say return to this particular page for example, some of them are going to choose to display that description, and it's going to help people understand what this page is all about, which is really nice. Again through the Insert Panel I'm able to do that without ever having to go into my Code. So I can access things on my page that I might have hard time accessing otherwise, or I can insert really complex objects like Widgets or Tables or Forms right on the page without ever having to go into code.
So if you're the type of designer that just prefers to work visually or if you're just looking for a quick way to generate standards-compliant, clean HTML for complex objects, the Insert Panel is your likely tool of choice.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.