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!

Adding Content to the Page

  • To set up the main content area of the page
  • Change the text at the top of the page from instructions to Travel Awaits You!
  • Delete the rest of the text on the page
    1. Place cursor into the Background area at the bottom of the page
    2. Select the <section> tag in the tag selector
    3. Click the delete key on your keyboard
    4. Do that same thing for the logo replacement area & the clearing method area
    5. There should only be the text travel awaits you on the page
  • To add the text for the page
    1. Open the predefined-layout.txt file from your site files
    2. This text file has the content already formatted for you with HTML tags
    3. This file will open in code view in Dreamweaver
    4. Choose ctrl/cmd-a to select all the content on the page
    5. Place your cursor in the first line of text
    6. Hit the right arrow key to move the cursor to after the text code
    7. Switch to code view
    8. Paste the copied text from the text file into this page
  • Click the design view button
  • You should see new text on the page
  • Note formatting is pulled in from css automatically

Adding Content to the Page

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 Main Content Area 0:23
    • Removing Content
    • Inserting Code and Content
    • Page and Text Formatting
  • Summary 9:21

Transcription: Adding Content to the Page

We are now going to take a look at modifying the main Content area of my Predefined CSS layouts page. 0000

And in order to do that, I am going to modify some text, I am also going to remove some code and show you another interesting feature of Dreamweaver Tag selector that is such a handy feature within Dreamweaver.0008

So, I have right now, my CSS styles is open and I am going to double click that to close it and open up my Files panel.0024

Now, I am within the Predefined CSS layouts website and within that I am on the same index page that I have been working with.0033

And make sure that you have the course files for this particular site, specifically the predefined layout.txt file.0044

In case you do not have any content within this Predefined CSS layout folder, make sure you go to the Exercise files area, underneath the videos for this section and make sure you pull those in to your website that you have predefined in Dreamweaver.0054

I am going to go up to the Instructions area, here and what I want this to say it is Travel awaits you, with an exclamation mark, so I just select the word Instructions and type right over it.0075

Now, this whole lower portion of the Content area has quite a few pieces to it, there is actually four of them and what we are going to do is delete all of that.0089

I am going to click within that area and I go down to my handy Tag selector, if I click the h2 you can see it just selects that one line, I want to delete more than just that line.0101

I will go to the next tag and when I select that you can see it is a whole box of content, I am going to hit Delete key to get rid of it.0114

I am going to continue to do this, there is actually four of this section tags.0124

Place your cursor in the next area of text, you will see a section tag, click on that and delete and we have two more to go, so you can see how quick it is to be able to do this, so click on Section, Delete.0130

And I will click last but not least in the background area, click Section and hit Delete.0148

What I want to do is I have my cursor after this Travel awaits you text and we are going to add our own text, underneath this area.0156

I have it all set up for you, so we are going to go over to the predefined layout.txt file and open that up and when I do that I am going to select all of the content. 0165

And that is a control-A or a command-A or you can go up to Edit, Select all. 0182

I want to get all of that content by selecting it all and you can see the very first piece of code is a section tag, 0189

I am going to go ahead and copy that using whatever method you want, I am just going to do right click and Copy, I will go back to my index page and right where my cursor is I am going to right click and Paste.0198

Now, if I do that, in Design view look at what happens, I am getting all of my tags showing up on the page that is not what I want to have happen.0215

So, I will control-Z backwards or command-Z on the Mac, and what I need to do is place my cursor here and move into Code view to Paste.0227

Since this content has code in it, I am going to move over here to do that, so I will go up to Edit, Paste, and now we will look at Design view and you can see it has our content on the page.0238

There is an extra spot in here, so I will just put my cursor in it and hit backspace, or the Delete key on the Mac, so there is our page.0254

And we have our content within this page, now you can see that I do have a white space issue up here.0267

Every once in a while, these little things can happen when you change content and, all of the sudden, something else changes.0275

Now, I did fix this earlier, and the way I fixed it was modifying the h1 tag.0284

Let me go take a look at that tag, something in modifying something you could end up deleting something you already did, so you do need to pay attention on your page as you are building it.0291

Never assume what you did previously, is still OK when you do something new, you always want to be double checking everything all over again.0303

So, I will close up the Files panel and I had added a margin bottom to this header1 tag.0314

But somehow in working, either I did a control-Z or command-Z back one too many steps and it deleted it, or when I went to add content, I somehow deleted it.0321

No big deal, I will just click add property, I will scroll down to margin bottom, which is right here and what we did is set margin bottom to 0 for the header1.0334

What a heading tag does is add space above and below the content and you can run into these funny little things and you cannot quite figure out how to get that white space, how to make it disappear. 0348

And I get asked that all the time in class, so I wanted to show you a couple of time this situation and make you aware of it, SO we will troubleshoot as we go through this various lessons. 0362

As soon as I click off of margin bottom you can see that white space is gone, very easy fix.0375

And we have our page with content now, let us take a look at it in the browser, I cannot go to many steps without doing that, otherwise we run into problems, so let us test it in IE and this is Internet Explorer 8.0382

You can see my text up at the top is more than a little large, I can reduce the file size or the text size of that and there is my page.0399

We have the footer to go, I think I might reduce the size of this text just a little bit, so how do I do that?0411

Well, I modified it using the h1 tag, which just happens to be the same tag I am in right now.0420

So, I will select the h1, down in this area you can see my font size is 50, which is pretty large, I will go ahead and drop that down to 40 and let us see what happens.0427

I will save that, to a Save all, and these are the little things you are going to end up doing on your pages, as you move forward you will say OK now, I changed that, this does not look quite right. 0442

Now, I seem to be having a lot of space in here, within this area, now, that I have dropped down my font size, it is not quite right, so there is a little trick you can use with regards to this one.0454

If I look at my various items within the h1, we have a height of 100, let me disable that property and you can see it pulls it up quite nicely.0467

I had an assigned height and what it was doing was pushing it down, keeping it very large, so even though I made my text smaller, that header did not get smaller.0479

So, this is a good way to be able to test, should I modify that or not?0491

Well, that is completely up to you as to how high you want that.0495

I think what I will do, is leave the height in, just to make it a little bit shorter.0499

So, we can start playing around with little pieces of the code, I just want to give you an overview of some of these little things you can start to modify and you can see how handy CSS is.0505

And the CSS panel within Dreamweaver, it really helps you out quite a bit, between the Tag selector and the nice listings and all the properties down in this area. 0519

I know you are not real familiar with the properties piece but as you move to this course, you will start to become more and more familiar with those.0531

I think I will leave the page the way it is now, I will do a Save and I need to tackle the Footer area and then determine if I want to keep this extra space underneath my text or not.0540

But I will save the page and leave it at that for now, doing a little more testing in my browsers before I move forward. 0553

But what we just did was we fixed a couple of little issues and dropped in our text, within the Content area removing the prebuilt CSS layout text that was in that area before we got to the page.0561

So, we just modified the Content area of our page.0577