Important Notice:

On July 31st, 2017 the Digital-Tutors library will be retired along with Digital-Tutors concurrent licensing. Effective August 1, 2017 any active group plans will be redirected to www.pluralsight.com. Each group plan will receive one individual user license on Pluralsight for each active Digital-Tutors license. Please contact your account representative for any additional questions.
Styling Web Pages Using CSS Designer in Dreamweaver
See Details
Released Jan 29, 2016
Amy Childers

Pluralsight

Amy Childers
In this series of videos, we will learn how to style our web pages using the CSS Designer and Extract panels within Dreamweaver. We will start by going over the basic workspace set up and interfaces of the CSS Designer and Extract panel. We'll learn how to upload a Photoshop document through the extract panel and also how to go about navigating through each of these sections within Dreamweaver. We'll go over how to style the entire web page, section by section, using only the CSS Designer panel, while extracting style information and assets from PSD comps through the extract panel. We'll finish by styling the footer section of the web page and taking a look at the final CSS code that is generated through the CSS Designer panel. This course goes over the process for creating an external style sheet using the CSS Designer panel and is intended for individuals who already have a basic knowledge of CSS properties and selectors. So throughout this course, we'll be making some really impressive styling changes to our page in a very visual and straightforward way.
Introduction and Project Overview
1

Introduction and Project Overview

 
01:44
CSS Designer Overview and Workspace Set Up
2

CSS Designer Overview and Workspace Set Up

 
08:08
Getting Familiar with the Extract Panel in Dreamweaver
3

Getting Familiar with the Extract Panel in Dreamweaver

 
08:30
Defining the Font-Family and Basic Text Settings
4

Defining the Font-Family and Basic Text Settings

 
10:36
Inserting the Logo Image Using the Extract Panel
5

Inserting the Logo Image Using the Extract Panel

 
07:09
Setting Styles for the Top Navigation
6

Setting Styles for the Top Navigation

 
08:08
Styling Individual List Items in the Top Navigation
7

Styling Individual List Items in the Top Navigation

 
06:05
Adding a Hero Image and Styling the Banner Text Section
8

Adding a Hero Image and Styling the Banner Text Section

 
11:00
Adding a Container Div Class and Styling the Body Text
9

Adding a Container Div Class and Styling the Body Text

 
09:13
Styling the Locations Table
10

Styling the Locations Table

 
09:19
Adding Styles to the Footer Section
11

Adding Styles to the Footer Section

 
07:34