United States
Adobe Dreamweaver: Creating CSS Layouts Tutorials
Online Contents For This Course
We have made some of the video tutorials for Adobe Dreamweaver: Creating CSS Layouts freely available to help you evaluate our training.
Click on any of the linked lesson listings below to preview FREE!
Course Description
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.
Choose your media type:
|
Introduction
|
|||
| Course Overview | (03:10) | T | |
| What’s Covered in the Tutorial | (05:16) | T | |
| What is CSS? | (07:16) | T | |
| Why Use CSS? | (04:51) | T | |
| What You Need to Know | (04:19) | T | |
|
Core Concepts of CSS
|
|||
| Understanding Styles | (06:06) | T | |
| Style Syntax | (06:06) | T | |
| Creating Embedded Styles | (06:34) | T | |
| Creating an External Style Sheet pt. 1 | (04:49) | T | |
| Creating an External Style Sheet pt. 2 | (04:37) | T | |
| Organizing & Managing External Style Sheets | (06:33) | T | |
| Dreamweaver CSS Styles Panel | (04:42) | T | |
| CSS Styles Panel – All Mode | (02:41) | T | |
| CSS Styles Panel – Current Mode | (03:15) | T | |
|
Selector Basics
|
|||
| About Selectors | (03:00) | T | |
| Class Selector | (04:28) | T | |
| ID Selector | (02:11) | T | |
| Context Selectors | (03:44) | T | |
| When to Use ID vs. Class | (04:49) | T | |
| Editing Style Rules in Dreamweaver | (04:17) | T | |
|
Managing Multiple Styles
|
|||
| How Styles Cascade | (05:14) | ||
| Cascading Rules pt. 1 | (05:32) | ||
| Cascading Rules pt. 2 | (02:33) | ||
| Inheritance | (05:27) | ||
| Tips for Managing Style Cascades & Inheritance | (05:08) | ||
|
CSS Building Blocks
|
|||
| About Div Tags | (03:57) | ||
| Drawing AP Divs in Dreamweaver | (04:13) | ||
| Inserting AP Divs in Dreamweaver | (05:10) | ||
| Adding Child Divs | (04:48) | ||
| Using Contextual Selectors with Divs | (06:13) | ||
| Div Widths & Heights | (03:06) | ||
| Margin | (06:05) | ||
| Padding | (04:18) | ||
| Resetting Browser Default Margin & Padding | (03:24) | ||
| Border | (05:16) | ||
| Border Width & Color | (05:58) | ||
| Wireframing with Dashed Borders | (05:02) | ||
|
Text
|
|||
| Why Formatting Text is Important | (06:02) | ||
| Choosing Fonts | (04:53) | ||
| Web-safe Fonts | (05:33) | ||
| Font Size | (05:40) | ||
| Applying Styles to Text | (06:56) | ||
| Setting Line Height | (04:22) | ||
| Letter Spacing | (03:40) | ||
| Other Font Properties | (05:42) | ||
| Tips for Improving Text Legibility | (05:11) | ||
| Blockqoutes | (04:32) | ||
| Indenting Paragraphs | (03:53) | ||
| Drop Caps | (04:58) | ||
|
Color / Backgrounds / Images
|
|||
| Selecting Color Palettes for Your Design | (06:01) | ||
| Specifying Colors | (05:36) | ||
| Background Properties | (05:19) | ||
| The GIF Image Format | (05:02) | ||
| The JPEG Image Format | (03:52) | ||
| The PNG Image Format | (03:30) | ||
| Background Image - Properties | (03:07) | ||
| Background Image - Repeat & Positioning | (04:28) | ||
|
Formatting Links & Lists
|
|||
| Understanding Link States | (04:48) | ||
| Link Formatting Options | (05:11) | ||
| Setting Up Multiple Link Schemes | (07:34) | ||
| Hover Link & Image Linking Tips | (06:38) | ||
| CSS List Properties | (05:08) | ||
| CSS Bullet Lists Images | (05:52) | ||
|
Layout Basics
|
|||
| About CSS Page Layouts | (06:37) | ||
| Drawing AP Divs in Dreamweaver | (04:42) | ||
| Inserting Div Tags | (07:12) | ||
| Working with AP Divs in Dreamweaver | (06:31) | ||
| HTML Code for AP Div Elements | (07:30) | ||
| CSS & the Box Model | (06:56) | ||
| Floats & Clearing | (07:52) | ||
| Static vs. Relative Positioning | (07:01) | ||
| Absolute Positioning | (04:53) | ||
| Mixing Absolute & Relative Positioning | (03:11) | ||
| Fixed Positioning | (04:11) | ||
|
Types of Web Page Layouts
|
|||
| Types of Web Page Layouts | (05:07) | ||
| Liquid Layouts | (05:39) | ||
| Elastic Layouts | (07:21) | ||
| Variable Fixed-Width Layouts | (03:40) | ||
|
Putting it all Together: Sample Projects
|
|||
| Using Dreamweaver CSS Templates | (05:58) | ||
| Techniques for Learning Template Styles | (06:49) | ||
| Modifying Styles: Div Borders | (04:35) | ||
| Modifying Styles: Text Headers | (04:32) | ||
| Modifying Styles: Text & Images | (08:25) | ||
| Modifying Styles: Div Columns & Links | (07:13) | ||
| Creating CSS Pages from Scratch | (05:57) | ||
| Creating Styles from Scratch | (08:14) | ||
| Tips for Creating Styles | (07:15) | ||
| Tips for Applying Styles | (06:22) | ||
| Checking for Cross Browser CSS Problems | (05:33) | ||
|
Wrap Up
|
|||
| Course Wrap Up | (04:23) | ||
| Where to Learn More | (04:00) | ||
| About the Author | (01:19) | ||
Email this Page
Send us FeedbackCourse Information
| Course: | Adobe Dreamweaver: Creating CSS Layouts |
| Author: | James Gonzalez |
| SKU: | 33914 |
| ISBN: | 1-934743-99-2 |
| Release Date: | 2008-09-21 |
| Duration: | 8 hrs / 92 tutorials |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
Subscription / Purchase Information
This course is just part of the entire VTC collection of over 700 courses, 79,350 video tutorials (14,200+ free), available to you for just $30 a month.
View All Courses Subscribe Learn More