Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We are now going to take a look at the Dreamweaver interface and if you're not familiar with Dreamweaver I'll give you a quick overview and also give you some terminology related to the different areas within Dreamweaver. So what I'm going to do is click this icon here right in the middle column. Create New. This middle column allows you to create brand new web pages. This green area within the middle of Dreamweaver when there are no pages open is known as the welcome screen.
As soon as a page opens you won't be able to see this section. And so I'm going to click Create New HTML. The reason I'm going to do that is to make sure that our panels are open. Now up across the top here, we have a variety of menus. So when I reference the Site menu, that's what I'm referencing. As an example, the Modify menu, so that's the drop down area within Dreamweaver. There are two additional pieces at the top and bottom of this middle section that I will open. You get to those by going to Window > Insert.
And that opens up our Insert bar. And Window > Properties which opens up the Properties at the bottom of the screen. Now if you have just installed Dreamweaver your screen will look a little bit different than mine. When you install Dreamweaver it puts you into the Designer workspace, and if you are on a Mac system, this drop down menu is a little further to the left. This menu toolbar is up on the right-hand side, and the right-hand side is on the left.
So those are reversed on the Mac system. So, if I'm in Designer view, you can see it looks a little bit different. That Insert bar that goes across the top of our page, is now over here, and I think it's much harder to get to the different locations over there. And it's certainly harder for you to see what I am doing. So I'm going to switch this back to the Classic view. Now the Files panel is one of the most important panels in Dreamweaver. That's how we will be opening and closing files.
That's how you should be renaming files, moving files within your website if you need to. All of that should be done in this Files area. Once we install our course files, we will have a listing of the course files in this section. So the Insert Bar has a variety of tabs. Now you can see there is not a tab for PHP up in this area. If I close up this page and select PHP, as my page. You'll see I now get a PHP tab, so anytime Dreamweaver understands you're working in a PHP page, this tab automatically appears for you.
We will be using a couple of features up in this area. The property section, down below, is how you can assign and modify pieces of the page that you drop onto the Designview, which is this area here. The properties has two buttons. Now I'm not assumming you are in the latest version or even the latest couple of version of Dreamweaver. I am using Dreamweaver 5.5 but that does not mean that you need to use that for this course. If you are in a version of Dreamweaver that's a little older, you won't have these two button options.
But the HTML button shows you HTML properties for whatever you have selected in your page. The CSS button allows you to access CSS properties. I tend to keep mine on HTML, personally. Because I find I modify the HTML more within here then I do the CSS. We won't be working much in the properties area in this course. I just want to mention it to you and I'm going to right-click to close this up. Now close closes 1 tab which is all we have here. So right now for the properties whether I choose tab group or close will be exactly the same.
Some of the panels over here have different groupings so the file's panel has three tabs that open. So if you wanted to close all three of those, you would choose Close Tag Group. I'll close that up. Now both the Insert Bar at the top and that properties at the bottom are accessible. They are the first two things in the Window menu. The rest of these are different panels used for particular situations. And I'll be short to point out the panel we're going to use As we go through the course.
So that is the document area. Which is this middle section. These are the panels on the right-hand side. We just moved our Dreamweaver interface to the classic workspace. And here is our insert bar. Now, within this document area we do have some buttons here and if you click this button you will see pure code and it is possible to work in pure code within Dreamweaver. When you're in code, you get a coding toolbar on the left-hand side.
Split, splits you interphase between two pieces and the left-hand side is the Code View, the right-hand side would be your Design View. The Design removes the code from being visible and shows you the Design View. So you can switch between any of these At any given time. Well address how to get our page view able in the browser once we've installed our course files but that is a brief overview of the dream weaver interface.
We will move on and install our cousre files. It's a little more exciting to look at some files as I move through the course and show you some of the interface features. I'll bring them up as we go to use them. But that's the basic view in Dreamweaver, and we have our different panels accessible. I'll try and do things visually so you can see exactly what I'm doing throughout this course within Dreamweaver.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105185 Viewers
56 Video lessons · 116967 Viewers
71 Video lessons · 86167 Viewers
131 Video lessons · 41205 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.