Adobe Dreamweaver CC

How to make and style a web page in Dreamweaver

Learn how to build a web page from scratch. (Try it, 45 min)

FromDavid Powers

What do I need?

Get files Sample files to practice with (ZIP, 200 KB)

Get PDF Dreamweaver cheat sheet

Want to build a web page like this? Here’s how.

This video tutorial guides you through the process of building a web page from scratch. The first thing you need to do is to download the project assets. Then, together, we’ll define a site in Dreamweaver so that it can create the correct links to images and other pages. If you get stuck during this tutorial, ask us for help in our forum. Let’s get started by setting up your project in Dreamweaver.

Define a site (1:45); Explore the assets (2:50); Create the HTML file (3:08)

Build the page structure and add text.

Dreamweaver’s Insert panel speeds up building web pages by creating all the HTML code for you. However, it is still leaving you in control by allowing you to choose the most appropriate elements and where to place them. After building the HTML structure of the page, we’ll copy and paste the text content from a rich text format file. Using Paste Special converts the formatting of rich text format and Microsoft Word documents into HTML, saving both time and effort.

Use the Insert panel (0:55); Use the Property Inspector (2:14); Paste placeholder text (4:53)

It’s time to brighten up the page with a couple of images. The large header image, commonly referred to as a "hero image", will stretch the full width of the page, but the smaller image will be accompanied by a caption using HTML5 elements. We’ll also add links to another page in our site and to an external website.

 

 

 

Insert an image (0:24); Images with captions (1:23); Create links (2:50)

Now for a touch of style.

What you’ve built may be a functional web page, but it’s a bit of an ugly duckling. In step 4, we’ll attach a style sheet with a set of basic predefined styles. Then we’ll improve the look of the headings using an Edge Web Font, and create a two-column layout using CSS Designer, Dreamweaver’s tool for visually styling web pages.

Attach a stylesheet (0:22); Apply styles (1:39); Add Edge Web Fonts (3:04)

Style the navigation bar.

In the past, building a navigation bar involved using a separate graphics program to create multiple images for each button. Now, you can do it all without images in just HTML and CSS using Dreamweaver to create a few simple style rules. In this step, we’ll make our bulleted navigation list look and behave like a horizontal navigation bar.

So, we’ve gone from nothing to an elegant web page in five relatively simple steps. But hang on… There’s a bonus.

Style the list (0:27); Add button states (2:52); Show the active page (4:44)

Bonus video: Absolute positioning and rounded corners.

In this bonus step, we’ll uncover the secret of placing a text box exactly where you want it over an image (or any other element). We’ll also see how to add rounded corners to a background in seconds.

Style the article (1:39); Position the article (2:18); Add rounded corners (3:57)

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

david-powers_83x83

David Powers

David is the author of seven bestselling books on web design, concentrating mainly on PHP, CSS, and Dreamweaver, including The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP. David can be found frequently offering advice in the Adobe Dreamweaver forums, and is also a moderator for Adobe Community Help. He's an Adobe Community Professional for Dreamweaver, a title shared by only 40 people worldwide.


Purchase by phone: 800-585-0774