Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Dreamweaver CS6
Illustration by

Adding content


From:

Creating a First Web Site with Dreamweaver CS6

with Paul Trani

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating a First Web Site with Dreamweaver CS6
2h 48m Beginner Aug 30, 2012

Viewers: in countries Watching now:

Join author Paul Trani as he shows how to create a web site step by step with Adobe Dreamweaver CS6, one of the industry's leading web authoring tools. But not just any web site. A responsive HTML5 web site that works across multiple browsers and devices, complete with rich imagery and text, a robust portfolio, video content, and even a contact form. This course covers how to use web standards such as HTML5 for structure and Cascading Style Sheets (CSS) to control colors, fonts, navigation, and more. The course also demonstrates how to test across multiple browsers and devices and upload your new site to the web.

Topics include:
  • Understanding basic web principles
  • Adding content to a web page
  • Linking to web sites and email addresses
  • Styling content with CSS
  • Creating a layout that fits multiple browsers and devices
  • Building an HTML5 layout
  • Inserting images and video
  • Adding a menu bar
  • Creating a contact form
  • Integrating a Twitter feed
  • Uploading and testing a web site
Subjects:
Web Web Design
Software:
Dreamweaver
Author:
Paul Trani

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.

Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS6.


Expand all | Collapse all
please wait ...
Q: Where do I learn more about how to make a website?
A: Discover more on this topic by visiting how to make a website on lynda.com.
 
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.
Upgrade now


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 Upgrade now

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

Notes cannot be added for locked videos.

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.