Modifying the Navigation Column | Part 2 | Adobe Dreamweaver CS6 |

  1. Home
  2. map design tutorials
  3. Modifying the Navigation Column | Part 2 | Adobe Dreamweaver CS6 |

In this lecture, our instructor, Candyce Mairs, further shows how to modify the navigation column. She demonstrates how to edit link text, go about correcting mistakes, insert an image, fix formatting errors, and add a new margin property. 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. 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 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 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 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 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 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 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 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 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 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 You have to keep viewing in the browser and I am going to put it in internet explorer, this time around.0432 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 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 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 What continues to move on and customize this, but what I just did was I modified the sidebar area, added an image.0589 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 Source.

whatsapp button