Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.