Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Modifying the Navigation Column, Part 2

  • We are going to modify the navigation area on our page
  • Replace the words in the link area with the following:
    1. Home
    2. Destinations
    3. Specials
    4. About Us
  • Delete all the text under the hyperlinks
  • Notice how the background color for the column has now shortened since the content in this area is shorter
  • Insert an image into this area:
    1. Choose insert-image & select the clock-tower.jpg image from the Wanderlust Travel website
    2. We added this image as one of the files we transferred over in another lesson
    3. Add the following alt text: The clock tower in Graz, Austria, the oldest working clock tower in the world
    4. Delete the <p> tag surrounding this image
  • Preview the page in the browser

Modifying the Navigation Column, Part 2

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Modifying the Side Bar 0:30
    • Editing Link Text
    • Correcting Mistakes
    • Inserting an Image
    • Fixing Format Errors
  • Modifying the Header 7:28
    • Add new Margin Property
  • Summary 9:52

Transcription: Modifying the Navigation Column, Part 2

Let us take a look at our page based on the predefined CSS layout page and try and figure out a plan for what we need to do.0000

My plan is to get rid of this white space above the sidebar.0010

What we have done so far is modified the header area and customize the style rule.0015

We have moved the navigation from the right side to the left side.0020

We have also customized the colors for text and a few other features within that column.0024

We will just keep moving through customizing this further.0030

Now, one thing I'd like to do is get the text changed here to text I want to use on my site.0034

I am simply going to select it here and start adding some hyperlink text that I want.0041

So, I am going to type Home, I will select where it says Link to and I am in design view now, entry weaver.0048

So, select the text and just start typing.0056

My next one is going to be Destinations, get that spelled correctly.0060

My next one is going to be set up for Specials.0069

And the last one is going to be set up for About us.0074

And, yes, I know Destinations has an issue.0081

We're going to address that.0085

Now, when I click in Destinations and this is something you have to be very careful of.0087

You can see that my text is all the way to the left hand side.0092

This area also looks a little bit squashed.0097

It is not quite as high as the other items.0101

Well, when you work in Dreamweaver don't panic if something like that happens.0104

CTRL+-Z is our friend or Command-Z on the mac side.0109

And what I am going to do is hit CTRL+-Z or Command-Z and just keep doing it.0114

When you are first working on the web is usually best to just stop when you have a problem like that and use CTRL+-Z to go backwards.0120

Instead of trying to move forwards and figure out how to fix it just move backwards and undo a couple of times.0130

You will save a tone of time doing it that way.0138

What actually happened is when I went to delete this I also deleted some extra code in my delete.0144

And because this is all code behind the scenes, you can sometimes grab codes you do not want to in design view.0150

I am just CTRL+-Z-ing backwards, since I am on a PC, or Command-Z.0157

And what you do is just go backwards and I'm just going to retype it.0163

There we are, that's how you can correct some issues.0169

If you continue to try and move forward and correct it, quite often, especially if you're not really familiar with code, it really makes it difficult to work in.0173

Save yourself some time and just go backwards.0182

Do not worry about it, you are going to make mistakes, I do all the time, and that is why we love that backwards or undo.0186

Ok, so there is my text.0196

The other thing I am going to do is all of this other text in the sidebar, and let me close up the properties here.0198

This area here, I am going to select all of that and just get rid of it.0205

I do not want all this text.0210

So, hit the delete key to shorten up my page a little bit here, and just select it all and hit the delete key.0212

Now, you can see I have a nice short sidebar and I can add more content if I want, which I am going to do.0220

Since my cursor is right in this area I might just as well take care of an image.0227

What I want to do is add an image right where my cursor is right now after I deleted the text.0233

To do that I am going to go up to the Insert menu and right up at the top is Insert image.0240

I do have some files within the images folder that we added to this blank folder earlier.0248

I will double-click that and here is my clock tower.0256

I will click OK and it asked for some default text.0260

So, I am going to say Clock tower in Grass Austria. 0265

There we go, click OK, Dreamweaver does the prompt, this is to assist with screen readers.0274

If somebody can't see the image is up to me to make sure that there is some text to describe it, and there it is.0279

Now you can see this image looks like it has a bit of an issue, and part of that is being caused by some of the other code within this area.0288

We will get that issue fixed, do not worry about that.0298

But, for now, we have an image and we have modified our text in the left side.0302

How do we go about fixing some little things like this?0308

Well, we can take care of it very easily.0312

If I click on my image, I kind of work my way back in the tags, open the Properties once again, make it easier for you to see and right now I'm inside an image tag.0315

I will go over to my Properties here and see there is no plain img.0328

So, I'll keep moving, there's a P tag.0335

Let's see if the P is listed in here, no.0338

How about the aside?0341

Notice when I click on the aside, can you see how it highlights that square?0343

Let's go take a look in our styles and see if there's an aside.0349

No aside listed in there, so we just keep going.0354

Our sidebar piece, well, you can see it pretty much highlights everything.0358

If I go up to my sidebar, notice there is a width here of 1.80 and a padding bottom.0364

What is the width of my image?0372

Looks like my image should fit perfectly within this area.0375

So, let me go over to Container, well, it is not that.0380

Now, we can start putting some of these tags together to figure it out.0384

We have image, we have a P, we have an aside and we have a sidebar.0391

Well, first of all, let's try the P.0397

I think that P may have something to do with it.0400

What happens if we remove it? 0404

Remember we can always control our command-C.0406

So, remove that tag, and guess what, that fixed it.0409

Our image does not need a P tag, which is a paragraph to separate content.0414

And, quite often, that P tag you will have assigned elsewhere and modified it a little bit.0420

That is exactly what we needed to take care of our image.0425

Let's take a look in the browser.0429

You have to keep viewing in the browser and I am going to put it in internet explorer, this time around.0432

Things are looking pretty good.0439

Noticed we have a little bit of orange underneath our image.0442

I could determine what I want to do about that, but the piece is bothering me now is this white area right up across the top.0445

And it's kind of odd what is causing this white area, so let's address that.0453

If I scroll up to the top of the page, and put my cursor inside this area, notice I have a header and an h1.0460

What is actually causing this is when you have a Header1, it adds extra space above and below your content.0469

And, because of that, it is actually pushing this down.0478

So, what happens if I play with a few things, well, let's take a look.0483

First of all, my h1 I created, if you look at it, has nothing related to anything at the bottom or underneath it.0488

But, watch what happens if I add a new property and I remove any margin from the bottom of this tag.0498

So, click Add property.0506

I am going to use the down arrow and these are all the CSS properties available to you.0509

You could see it's a bit overwhelming.0516

We are going to choose margin bottom, it is what I want.0518

When I set this to 0 and click off of it, look at that, my white space was removed.0524

These are some of the tricky things that you can have trouble with CSS positioning.0532

It has a bit of a learning curve to it.0538

We are going to be addressing a bit of this later in the course.0540

For now, we fixed that content area+ADs- let me put it in the browser, one more time.0545

This time I will put it in Safari.0552

There it is, you can see is stuck right up underneath.0557

I do have a boarder added to this hyperlinks that I can decide if I want to keep or not.0561

But, you can start to get a feel for how we are modifying these pieces of the page.0567

Notice our page stays centered whatever size I make this browser window.0572

I make it bigger, I make it smaller, and you could see it stays centered.0579

That is built into our style rules also, and that's a great thing.0584

What continues to move on and customize this, but what I just did was I modified the sidebar area, added an image.0589

We also made a couple of corrections and a couple of other tags.0599

That it is giving you a taste for working in CSS and some other style rules and modifying them using the CSS style's panel.0604

I'll continue to do this to build my page and you will get a little bit familiar with the CSS style's panel along the way.0614

But that is modifying a few more of our CSS style rules, to customize this page specifically for how we want it to look for our Wanderlust travel website.0623