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

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 Footer Area

  • To get rid of the extra text in the footer area
    1. Place the cursor into the text that begins with "This footer contains"
    2. Select the <p> tag in the tag selector
    3. Hit the delete key on your keyboard
  • The footer text is even with the left margin of the page so add some spacing
    1. Select footer in the CSS Styles panel
    2. Change the background of the footer to match the header using the eyedropper tool
    3. Note the text is all the way to the left
    4. Select the padding property 7 modify the 0 to say 30px instead, it now says 10px 30px
    5. Note how the text has some space on the left hand side
  • Modify the text within the footer area
  • Select the present text & type Copyright 2013, Wanderlust Travel 877-555-3523
  • Place the cursor in front of the word Copyright
  • Go to insert->HTML->Special Characters->Copyright to insert the copyright symbol
  • Add a space after the copyright symbol

Modifying the Footer Area

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 Footer 0:22
    • Footer Tag
    • Changing the Background Color
    • Customizing Text
    • Customize Address Tag
  • Preview in Safari 5:46
  • Format Troubleshooting 6:09

Transcription: Modifying the Footer Area

We are now going to take a look at modifying the footer area on our Predefined CSS layout page.0000

It is coming along, we are customizing it for us and now we still have this area down at the bottom.0008

Once I get that corrected then I can put it into the browser and decide if there is anything else I want to modify or not but let us get this footer matching the rest of our site, so we will take a look at it.0015

Now, if I put my cursor into this area, you will see that I have a Footer tag and that Footer tag is what is controlling all of the content within this area.0028

And there is actually a couple of different pieces of text within this section, there is one that says address and that is the address content and that might be a good spot to put our copyright information.0041

The other piece we have is this P tag and do not really want a whole bunch of content within my footer, so what I am going to do is right click and say Remove tag.0055

Now, when I did that, notice, it did not remove the text, it just removed the tag surrounding that content, so I am going to control-Z or command-Z back. 0068

What I want to do is just hit the Delete key instead, what that does is remove not just the content but the tag, so it removes more than just the tag itself and that gets us down to specifically our footer. 0080

Now, because this is in the Footer area, let us go take a look at the footer CSS styles within our styles panel.0096

I have my CSS styles panel open and I will go ahead and move down and locate the footer and notice the footer has this background color attached to it.0105

What I want to do is make the footer match my header color as well.0118

I am going to use the little eyedropper feature in this, I will click inside the actual color box, and it turns to an eyedropper.0124

I will drag it up over my header and click and we should now have an orange Footer area, perfect, exactly what I wanted.0133

Now, I want to customize the text in this area and what should we put in?0143

Well, let us add a Copyright, so we will say Copyright 2013 Wanderlust travel and that it is about all we need.0148

Now, when I go to do that, you can see it is right up against the left hand side of the page and that is not exactly what I want.0162

Since I am in this tag, right now, let us go take a look at what properties this tag has, so it is the address tag within our code.0172

If I move over here, and some of these are new tags, the Header tag, the Footer tag, the Address tag, the Aside, the Section, all of those tags that we have been looking at are all new HTML5 tags.0184

What we did was we specified that we wanted an HTML5 page, so we are using HTML5 tags within the page, and that is what these are.0201

Let us see, do we have an address over in this area?0213

Well, I am not really seeing an address, hmm, let s customize an Address tag.0218

So, what we are going to do is, add a new tag, I will hit the plus sign under new CSS rule, I am going to choose a tag, and the tag is going to be the Address tag.0225

Since I had it selected and highlighted, Dreamweaver found it for me.0238

This document only it is what I want and what do we want this to look like?0243

Well, I think the font size should be a little bit smaller , so let s set up -- the font itself looks fine, but let me set the font size to a little bit smaller and for right now I am using pixels as my unit of measure, because most people are pretty comfortable with pixels.0249

Ultimately, when I create my Wanderlust travel site I would not be using pixels and I will explain why at that time.0268

Now, the color is fine, so let me click Apply and what that does is allow me to see the text within that area and 12 might be a little bit small compare to the rest of the text, so I will change it to 14.0277

What Apply does is keep this interface open so you can see and apply the content and that looks a little bit better to me, it does not close the dialog box like OK does.0293

Now, the other thing I want is a little bit of space on that left hand side, this is really close to the left.0307

I am going to go down to the box area, here and what I am going to do is add a little bit of space padding specifically, or uncheck same for all.0313

And I am going to add 25 pixels of padding on the left hand side of this Address area, let me click Apply and you will see what happens.0326

I will leave it up to you how far you want to end it, I think I might go maybe 40 and a little bit more, and there it is.0336

Let us take a look at this in the browser, I will do a file save, we will go out to a browser and I will use safari this time.0346

There is my web page, there is my Footer area, I need to determine if I like this white space at the bottom or not and I think I will leave it there, but what if did not want it?0356

Well, I can put my cursor in this area -- you can see there is an articol.content area, but WHAT happens if I hit Delete?0370

What it did was it actually deleted some content which I did not realize.0382

now I will hit backspace and you can see it is kind of tough to get rid of some of this sometimes, so I want to leave it anyway.0387

But, those are some of the times when it really helps to be somewhat familiar with the HTML code, when you are running to these types of things.0397

But, I am just going to do a control-Z backwards or command-Z and we will leave this area here, I think this is a little bit small, so some white space would be just fine there.0406

One of the other things we need to do, is this background does NOT exactly coordinate with our site, but we will do that moving forward.0418

But that is how we can modify the Footer area of our Predefined CSS layout, customizing it for us, also moving and changing the content that we have added a little bit using our CSS styles and properties within those styles for the specific tags we are working in.0427

So, that was modifying the Footer area on our predefined CSS layout page.0450