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

Adding content

From: Creating a First Web Site with Dreamweaver CS6

Video: Adding content

Now that I have an HTML page created in Dreamweaver, I can start adding some content to it and then start customizing that content as well. Now you could just start typing in more text in here, but more often than not, you're probably can be pulling the content from an external source, so it might be an email you get, a Word document, maybe even a text file. And that's what I'm going to do, I'm going to actually open up a text file. And if you have access to the Assets, basically all the content for this course, you can open up this Content.txt file, but this content could come from anywhere.

Adding content

Now that I have an HTML page created in Dreamweaver, I can start adding some content to it and then start customizing that content as well. Now you could just start typing in more text in here, but more often than not, you're probably can be pulling the content from an external source, so it might be an email you get, a Word document, maybe even a text file. And that's what I'm going to do, I'm going to actually open up a text file. And if you have access to the Assets, basically all the content for this course, you can open up this Content.txt file, but this content could come from anywhere.

So again, I am just going to take some content from here, this TXT file, opening it up in Dreamweaver, you can start to see my content for the various pages as I start to scroll down. Home, About, I also have Portfolio, and then my Contact page. So I am going to select all of this content, I'm going to Copy it, I'll close that TXT file, and I'm going to go to Design view, and in place of that text, I'll just delete it and Paste this text into place.

All right, here's all my text, everything is going looking good so far, but it's not really, because I actually need to start customizing the look of this, and the easiest way to do that is to use your Properties panel. So I'm going to launch this Page Properties and here I can start to customize the Appearance. So I'm going to change the page font for instance from that boring, it looks like a Time New Roman, to Arial, okay. It's going to be easier to read, a little more legible.

I can make it 12 point, clicking Apply you can see that change take effect. I can change the Text color to white and then the Background color to black, okay, so it's going to could be the inverse of what it was a second ago. But really I have a background image that I made earlier, okay? So this gets to be really important. I actually want to implement that now. So I'm going to select Browse, and I'm going to browse to that specific images folder.

Now keep in mind that this is my index.html, and I'm in this Chapter 02/02 Begin folder, in there you'll find that index.html that I'm working on now, because I want to point to this bkgdHome.jpg. It's going to be relative to where this file is, okay. So as I expand this out, so as I select it, look at the path, simple, that's what I want to see. You don't want to be locating an image that exists on your hard drive somewhere.

So with that in place I'll click Open, there's my path, it's looking good, I'll click Apply, yes, that's what I'm talking about. Now everything is looking really nice now. All right, I'm going to select OK, because for this content I need to start establishing some hierarchy. So I'm going to remove that Home page word right there, this first line right here, I want this to be the heading, so this is going to have a Heading 1 tag that I need to associate with it. So selecting that I'm going to go change the Format from Paragraph to Heading 1, selecting that, there we are default to this very large look, and it works out great! Let's just take a peek at the code, as I go to Split view, you can see that it's changed it from paragraph to this h1, which is my Heading 1.

All right, so going back to Design view, I can go on down the line, do the same thing for this marketing word, changing that to Heading 2. You would do this for the obvious visual reasons, but also search engines pick up on this as well. Search engines can tell what has an h1 tag and what's a secondary information and then also what the body copy is. So you want to start using these h1s, these h2s, these h3s, like I'm doing here, selecting that word, changing that to h2.

Scrolling down a little bit for this About page, I'm going to select Heading 2, okay. For this Starz Entertainment, selecting that, I'm going to change this to Heading 2 as well, and the role that this person did there, I'm going to change that to Heading 3. So you can start to establish that hierarchy, like I'm doing here. All right, and in fact, since I'm formatting this content, I have these two list items, and I can select this line item here, and I can add formatting to it as in an Unordered List, okay, so give it bullet points or give it numbers.

So selecting that, there's my unordered list, same thing for this item. In fact, if I just put my cursor at the beginning and just hit Delete and then Return, you can see how it adds that to the unordered list, as I look at the code right in here, unordered list and my list item. All right, moving on along I'm formatting this content and what I will do is I'll select this Heading 2 for the company and then the role that person did there, right there, scrolling down, Heading 2 and then Heading 3 for the role.

All right, a couple more things to do here, Graphic Design for the portfolio page. I am going to change that to Heading 2 and change even Motion Graphics to Heading 2 just like that, and lastly, let's connect for the Contact page, changing that to Heading 2. So I have established this hierarchy amongst all my content right in here, and it looks pretty good, but know that I can even customize that further as well. So going into Page Properties again, I'm going to go down to the Headings, so in here I can change my Heading 1, I can change the font size, go up to maybe 36 pixels and then even change the color to red, okay.

So this mimics the design I'm going for and then even change my Heading 2 to about 18 pixels and just leaving that as is. But you can customize all your heading tags right in here, clicking Apply, you can see that really stands out, and I'll be formatting this more later on as well, but you can see how I have my basic content in here already styled. And really my next step for this web page is to start to add more of a layout to this content, but before I do that I want to go ahead and add some links to this page, as well as customize those links.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40111 viewers

Paul Trani
Author

 

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 Creating a First Web Site with Dreamweaver CS6.

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.