Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Navigating Dreamweaver

From: Dynamic Dreamweaver Websites: Creating and Validating Forms

Video: Navigating Dreamweaver

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.

Navigating Dreamweaver

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

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.


Mark all as unwatched Cancel

Congratulations

You have completed Dynamic Dreamweaver Websites: Creating and Validating Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.