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
Instructed by Lisa Lopuck Design / Web Design
$19
$30
37% off
Take This Course
  • Lectures 8
  • Length 1 hour
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2014 English

Course Description

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.

What are the requirements?

  • Dreamweaver CS5 +

What am I going to get from this course?

  • 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

What is the target audience?

  • Beginners interested in using Dreamweaver to build their own web site

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

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!

Section 1: Building the page structure
04: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
09:51
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
12:09
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
Section 2: Adding content and navigation
04:48
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
10:11
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
09:26
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
Section 3: Uploading to a server
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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lisa Lopuck, 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 MonsterEnergy.com, DisneyCruiseLine.com, and HongKongDisneyland.com.

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

Ready to start learning?
Take This Course