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.

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

Build the page structure and add text.

Build the HTML structure
  • Use the Insert panel (0:55)
  • Use the Property Inspector (2:14)
  • Paste placeholder text (4:53)

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.

Add images and links.

Add images and links
  • Insert an image (0:24)
  • Images with captions (1:23)
  • Create links (2:50)

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 the HTML5 <figure> and <figcaption> elements. We’ll also add links to another page in our site and to an external website.

Now for a touch of style.

Style the page
  • Attach a stylesheet (0:22)
  • Apply styles (1:39)
  • Add Edge Web Fonts (3:04)

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.

Style the navigation bar.

Create a navigation bar
  • Style the list (0:27)
  • Add button states (2:52)
  • Show the active page (4:44)

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.

Bonus video: Absolute positioning and rounded corners.

Use absolute positioning
  • Style the article (1:39)
  • Position the article (2:18)
  • Add rounded corners (3:57)

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.