Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add 1 Hour Video Workshop - Build a CSS Web Page in Dreamweaver to your Wishlist.

Add to Wishlist

1 Hour Video Workshop - Build a CSS Web Page in Dreamweaver

A step-by-step 1 hour video intensive shows the total beginner how build a modern CSS web page from start to finish.
3.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
19 students enrolled
Created by Lisa Lopuck
Last updated 1/2014
$15 $30 50% off
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

Empower yourself to create your own web sites from scratch, using this practical, step-by-step video course.

In this 1 hour video intensive, you'll learn how to build a web page from the ground up using Dreamweaver, an industry standard for building web sites. This course takes beginners step-by-step through building a CSS based web page, linking it to other pages, and uploading it to a server.

Focuses on a real-world project

This course focuses on a single real-world project, creating a working web page using pre-made graphics. At the end of this course, you'll walk away with a fully functioning, flexible CSS web page that you can later customize for your own purposes.

Includes course files saved in stages

This course includes downloadable files saved in stages, so you can compare your work to each step along the way, or start fresh from any stage.

Who is the target audience?
  • Beginners interested in using Dreamweaver to build their own web site
Students Who Viewed This Course Also Viewed
What Will I Learn?
Learn how to create a web page from the ground up with Dreamweaver
Understand how to use CSS divs to set up a page layout
See how to apply CSS styles to control the look of page elements
Learn how to create links to other pages
Learn how to upload your finished web site to a server
View Curriculum
  • Dreamweaver CS5 +
Curriculum For This Course
Expand All 8 Lectures Collapse All 8 Lectures 55:01
Course introduction
1 Lecture 01:27

1 Hour Video Workshop: Build a CSS Web Page in Dreamweaver

A step-by-step 1 hour video intensive shows the total beginner how build a modern CSS web page from start to finish.

Each video is action packed and you may need to start and stop to follow along. Each video lecture has a downloadable resource .zip file that includes all the files you will need to complete the lesson. In addition, each resource file has the project web site saved to that point so you can pick up the course at any point by opening the index.html file for that lesson.

And finally, each video lesson has a step-by-step PDF edition that you can download, print out, and follow along offline. The PDF has time markers for each step that correspond to the video. This way, you can easily find each step if you need a video reference for it.

Enjoy and post questions if you have them!

Preview 01:27
Building the page structure
3 Lectures 26:36
Getting Started with Dreamweaver

Dreamweaver thinks in terms of "sites" not single web pages. In this video, you'll learn how to properly prepare a new web site project and start your first page.

In this section, you'll learn how to:
  • Creating a site folder structure
  • Get oriented in the Dreamweaver interface
  • Start a new page
  • Add a title to a page
Preview 04:36

Setting up an external CSS style sheet

By default, your Dreamweaver web pages will have a white background with plain black Times Roman text. In this section, you'll learn how to set up an external CSS file loaded with custom styles that govern the overall look of your web page in terms of backgrounds, fonts, and colors.

In this section, you'll learn how to:
  • Create and link to an external CSS file
  • Create CSS styles for HTML tags
  • Add custom CSS classes
  • Hand-code CSS
Preview 09:51

Creating the Web Page's Div Structure

In Dreamweaver, if you want greater control over the layout of your content, you must set up a series of div containers that will hold different parts of your page. In this section, you'll set up a series of nested div tags to create the overall structure of our project web site. You'll then apply CSS styles to each div to control the background color, margins, and borders, establishing the basis of our page's visual design.

In this section, you'll learn how to:
  • Set up a nest div structure
  • Apply CSS styles to divs to control margin, background color, and custom border designs
Creating the Web Page's Div Structure
Adding content and navigation
3 Lectures 24:25
Building the Navigation System

Most web site navigation system start their lives as HTML bulleted lists that use the "ul" tag. From there, CSS controls the look and placement of each bulleted list item ("li" tag) and the ul tag itself. In this section, you'll build a nav bar with links and a set of styles.

In this section, you'll learn how to:
  • Turn a bulleted list into a navigation system
  • Create a compound CSS selector
  • Add links to text items
Building the Navigation System

Adding Content and Graphics

In this section, you'll add text content and graphics to the header and main hero area and use CSS to control their placement and sizing.

In this section, you'll learn how to:
  • Insert images into div elements
  • Create custom CSS classes
  • Apply CSS classes to selected items
  • Create placeholder "dead" links
  • Nest divs to create a layered effect
Adding Content and Graphics

Making a Three-Column Layout

In this section, finish out the design of this web page by creating a three column layout below the main hero space. In doing so, you'll learn how to use the CSS float property and learn how to build a CSS-based button. Finally, you'll use HTML special characters to finish the footer content of the page.

In this section, you'll learn how to:
  • Use the CSS float property
  • Use divs to create three columns
  • Clear the float property
  • Build a CSS-based button
  • Add special HTML characters
Making a Three-Column Layout
Uploading to a server
1 Lecture 02:33
Uploading a Site to a Server

In this section, you'll learn how to update the Site Manager window to include host server and FTP information. This will allow you to use Dreamweaver to connect to your online hosting provider and upload your site files, folders, and images.

In this section, you'll learn how to:
  • Update the Dreamweaver Site Manager with hosting information
  • Connect to your server
  • Upload selected files, folders, and images to your remote host
  • View your web page live on the Internet
Uploading a Site to a Server
About the Instructor
2.0 Average rating
5 Reviews
35 Students
2 Courses
Digital Creative Expert

Lisa Lopuck has over 20 years of experience as an interactive designer and creative leader. With a career that traces back to the Apple Multimedia Lab in 1992, Lisa was one of the first designers to think through the unique challenges of digital media and to invent user interaction conventions -- many that are still in use today.

From eBay to Disney and Monster Energy, she has worked with some of the largest global consumer brands, helping them shape their digital media strategy and build their interactive portfolio across web, mobile, and social media. She has both agency and in-house experience leading and managing cross functional creative teams, developing client pitches, and producing large scale $1m+ web sites, including,, and

She has taught at universities, spoken at web design conferences all over the world, and is the author of 8 books on interactive media.

Report Abuse