Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's have you go ahead and open up Dreamweaver. I am using CS 5.5 as the version of Dreamweaver. However, that does not mean this course is based on everything 5.5. So even if you have a prior version of Dreamweaver, even back to Dreamweaver 5, which is the MX version, the features we're going to be using are built into Dreamweaver and have been for quite some time. If there's something new in CS 5.5, I will make mention of it and let you know how you can do it in a prior version. So this course is not specific to Dreamweaver CS 5.5 in any way. Now what you're looking at is the default arrangement when you install Dreamweaver. You are in the Designer view.
This is the PC version. There's a subtle difference between the PC and the Mac. This menu listing here on the Mac side is on the right-hand side, and the right hand side is on the left. So these are just kind of flip-flopped on the Mac side. Now the workspace we're working in, or at least we're looking at right now, is the Designer workspace. My preference is the Classic workspace, so I'm simply going to use the drop-down and go up to Classic.
Now on the Mac side, that drop-down is not so far to the right. It's over here a little bit. But what that does is move the Insert bar to the top, instead of having it as a panel. I think it's easier for you to see what I'm doing as we go through the course, if I use the Insert bar. The panels, there are already so many panels on the right-hand side. It just kind of removes it from that area. Now, there are some panels that we will not be working in. In order to close a panel, like this Browser Lab panel, you can right-click the tab, and say Close Tab Group. What that does is close everything in that tab. An example is these three tabs are all grouped together, so if I did Close Tab Group in this area, it would close all three tabs at the same time. If I only want to close one tab such as this Browser Lab tab, I can say Close. I'm also going to be closing up the Databases tab. So for this one, I'll right-click the word Databases and say Close Tab Group. So we've just customized Dreamweaver.
The other piece I want to do is go over to Edit and go down to Preferences. Now, on the Mac side, Preferences is located in the Dreamweaver menu. So we're going to go out to Preferences. In the New Document area, when you install Dreamweaver, it is set for HTML to be the default document. What I have done is move that and changed it to PHP. I have also unchecked this check box. So when you install Dreamweaver by default this is checked. I am going to uncheck that, and there's one last piece I want to do in this area, previewing browser.
When you install Dreamweaver, Dreamweaver recognizes whatever browsers are on your system. Right now, I have Firefox and Internet Explorer available in Dreamweaver to preview. I am going to uncheck this area, so make sure Preview Using Temporary File is unchecked. This also shows you the shortcuts to get to the browsers if you wish to use the shortcuts to do so. I can certainly add additional browsers. However, there are just two built-in shortcuts for browsers.
I said there was one last piece the last time. And there's actually one other one. I think you'll find this will make your life easier as well. And that is in the Font category. Anything we look at in code view, by default, is down in the 9-point area, which is rather small. So I have enlarged this, to make it easier for you to see the code that I'm showing you. You may find it easier as well. If you make this a little bit larger, it's just easier to see if you make any coding errors.
So I'll click OK, and that's all we need to do. Now, my Insert bar is this piece up here. You can see it's all grayed out. If you don't have a page open in Dreamweaver, things will be grayed out. The Properties is grayed out as well. So I'm going to click Create New PHP within this screen. This is known as the Welcome screen. I will click Create New PHP, and you can see, now my panels become active, those on the right-hand side as well. So my Insert bar has multiple tabs to it.
So we will be working across a few of these tabs within Dreamweaver. The JQuery mobile tab is a brand new tab that came out with Dreamweaver CS 5.5. If you don't have that, it's not a problem. We won't be using that tab in this course. Now this view, these little buttons here, Code Split and Design, this shows me strictly Code view. This shows me the Design view for the page on the right, and the Code view on the left, and the Design button shows you pure design. The design is not always exactly how your browser's going to display the page. It's, I would say, an approximation of how it's going to display. There's no way one interface can show you how every browser will truly display your page.
In order to get to your browsers, the Globe is right here. If I click on this, this is how I can preview this page directly in the browser, from right within Dreamweaver. I also have access to this Live view. This is new as of CS5, and CS4 may have had this in as well. They've modified these two just a little bit between CS4 and 5. If you don't have that view, don't be concerned. You can go right out to preview in the browser instead.
This Properties area I'm going to turn off. We won't be working in that. So, I will right-click and say, Close, just like we did with the panels on the right. If any of these panels are not open, and you need them to be, the Window menu gives you access to all of the panels. This first item is the Insert bar right here. The second one is the Properties area, which I just closed. And the shortcuts for opening and closing those are all listed on the right.
So we have our panels on the right, we have our Insert bar at the top. This is referred to as our Document window. You can have multiple documents open. This is the tab for that particular document, and it's untitled right now. And these are the menus within Dreamweaver. A very small overview of Dreamweaver. As we go to work in specific items, I will go ahead and explain that particular area within Dreamweaver at that time.
That's an overview of the Dreamweaver interface. I'm going to go back to the Common tab, which is where I tend to keep the Insert bar. And we'll get started in working and setting up our course, and getting into the code for forms.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100058 Viewers
56 Video lessons · 113115 Viewers
71 Video lessons · 81971 Viewers
131 Video lessons · 39327 Viewers
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.