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.
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.
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.
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.
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.
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 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.