Learn New Technologies 4everyone

Adobe Dreamweaver: Creating CSS Layouts

This course covers how to use Dreamweaver, the world’s leading Web page creation tool, to create web pages formatted with Cascading Style Sheets (CSS). Cascading Style Sheets are widely supported in today’s modern browsers and Web designers are learning to use them in ever more powerful and creative ways. This technology enables web pages across a site to be more consistent while giving designers more control over the layout and design than straight HTML ever did. This course covers everything you will need to know to use Adobe Dreamweaver to start creating your CSS-based layouts and how to modify existing CSS pages to make them your own or to meet a set of specific design needs. If you are already a Dreamweaver user and want to learn how to use CSS to create more sophisticated page layouts and get more control over the look and consistency of your pages, then this is the resource for you. Work files are included. To begin learning, simply click on the movie links.

Introduction

Course Overview
What’s Covered in the Tutorial
What is CSS?
Why Use CSS?
What You Need to Know

Core Concepts of CSS

Understanding Styles
Style Syntax
Creating Embedded Styles
Creating an External Style Sheet pt. 1
Creating an External Style Sheet pt. 2
Organizing & Managing External Style Sheets
Dreamweaver CSS Styles Panel
CSS Styles Panel – All Mode
CSS Styles Panel – Current Mode

Selector Basics

About Selectors
Class Selector
ID Selector
Context Selectors
When to Use ID vs. Class
Editing Style Rules in Dreamweaver

Managing Multiple Styles

How Styles Cascade
Cascading Rules pt. 1
Cascading Rules pt. 2
Inheritance
Tips for Managing Style Cascades & Inheritance

CSS Building Blocks

About Div Tags
Drawing AP Divs in Dreamweaver
Inserting AP Divs in Dreamweaver
Adding Child Divs
Using Contextual Selectors with Divs
Div Widths & Heights
Margin
Padding
Resetting Browser Default Margin & Padding
Border
Border Width & Color
Wireframing with Dashed Borders

Text

Why Formatting Text is Important
Choosing Fonts
Web-safe Fonts
Font Size
Applying Styles to Text
Setting Line Height
Letter Spacing
Other Font Properties
Tips for Improving Text Legibility
Blockqoutes
Indenting Paragraphs
Drop Caps

Color / Backgrounds / Images

Selecting Color Palettes for Your Design
Specifying Colors
Background Properties
The GIF Image Format
The JPEG Image Format
The PNG Image Format
Background Image - Properties
Background Image - Repeat & Positioning

Formatting Links & Lists

Understanding Link States
Link Formatting Options
Setting Up Multiple Link Schemes
Hover Link & Image Linking Tips
CSS List Properties
CSS Bullet Lists Images

Layout Basics

About CSS Page Layouts
Drawing AP Divs in Dreamweaver
Inserting Div Tags
Working with AP Divs in Dreamweaver
HTML Code for AP Div Elements
CSS & the Box Model
Floats & Clearing
Static vs. Relative Positioning
Absolute Positioning
Mixing Absolute & Relative Positioning
Fixed Positioning

Types of Web Page Layouts

Types of Web Page Layouts
Liquid Layouts
Elastic Layouts
Variable Fixed-Width Layouts

Putting it all Together: Sample Projects

Using Dreamweaver CSS Templates
Techniques for Learning Template Styles
Modifying Styles: Div Borders
Modifying Styles: Text Headers
Modifying Styles: Text & Images
Modifying Styles: Div Columns & Links
Creating CSS Pages from Scratch
Creating Styles from Scratch
Tips for Creating Styles
Tips for Applying Styles
Checking for Cross Browser CSS Problems

Wrap Up

Course Wrap Up
Where to Learn More
About the Author