Questions?
FREE TUTORIALS
Download Now
Get instant access to over 45 minutes of FREE video tutorials and our newsletter.
Introduction to CSS with Dreamweaver
By Craig Campbell
Running Time: 6 hours, 2 minutes
Overview
In this video series, trainer Craig Campbell guides you through the basics of designing, styling, and laying out web pages using CSS and HTML. Beginning with a discussion about the importance of separating content from design, Craig takes you on an introductory tour of CSS. Throughout this series, you'll learn how to code CSS by hand, and then once you've established a foundation, you'll also learn how to apply CSS using Dreamweaver's powerful CSS tools.
Detailed Video Descriptions
1 - Introduction (Running Time - 1:28)
2 - What is CSS? (Running Time - 8:48)
In this video, Craig defines CSS and introduces you to the idea of Semantic HTML. Semantic HTML, when combined with CSS, allows you to separate the content of your web designs from the presentation.
3 - Writing Semantic HTML (Running Time - 14:47)
In order to write good CSS, we first need to learn how to write semantic HTML. Clean, semantic code is the foundation of solid CSS design, so in this video, Craig will show you how to write semantic markup in DreamWeaver.
4 - CSS Syntax (Running Time - 4:19)
In this video, Craig covers the basic structure of CSS. The syntax we learn here will be a foundation for the rest of the series.
5 - Styling Fonts (Running Time - 14:22)
In this video, we’ll write our first CSS as Craig shows us how to change the font of our content.
6 - Font Size (Running Time - 15:38)
When dealing with font sizes in CSS, there are a number of different units of measurement that you can use. In this video, Craig will explain how to use each of these.
7 - Bold and Italics (Running Time - 6:52)
In this video, Craig explores the font-weight and font-style properties, which allow you to add bold and italics styles to your text.
8 - Text Color (Running Time - 13:35)
In this video, Craig will demonstrate how to change the color of your text using CSS. He’ll demonstrate the use of color names as well as six-digit hexadecimal values.
9 - Text Spacing (Running Time - 8:19)
In this video, Craig will show you how to use the letter-spacing and line-height properties in order to adjust the spacing between letters and between lines of text.
10 - Font Shorthand Property (Running Time - 5:41)
CSS provides us a way to combine several lines of code into one, using the “font” shorthand property. This allows us to combine declarations for font size, font family, font style, etc.
11 - Inheritance and Specificity (Running Time - 12:20)
Inheritance and specificity are two CSS concepts that work hand in hand. By default, some elements will automatically inherit certain properties from their parent elements unless specifically told to do otherwise. In this video, Craig will demonstrate these concepts.
12 - Other Text Formatting Options (Running Time - 12:59)
In this video, Craig will show you how to use the text-align, text-indent, text-transform, and text-decoration properties in order to apply some more custom transformations to your text.
13 - Styling Links (Running Time - 11:42)
There are a number of options for styling your links using CSS. In this video, Craig will show you how to style the text for your links in their default state as well as in their hover state. Also, he’ll show you how to style links differently for links that have already been visited.
14 - Styling Lists, Part 1 (Running Time - 12:04)
In this video, Craig shows you how to customize the bullets in your html lists as well as the line-height of your list elements.
15 - Styling Lists, Part 2 (Running Time - 5:47)
In this video, Craig shows you how to use the list-style-position property in CSS. He also discusses the use of margins to add space between list items.
16 - Styling Multiple Selectors (Running Time - 6:14)
If you have a certain style that you’d like to use for more than one html element, there’s a very simple way to do it in CSS, and in this video, Craig will demonstrate that for you.
17 - Descendant (Nested) Selectors (Running Time - 5:39)
If you want to style an element only when it appears inside another specific element (such as an “em” tag inside a “p” tag), you can do so using descendant selectors. In this video, Craig will demonstrate the use of these nested selectors.
18 - The CSS Box Model (Running Time - 6:19)
In order to properly lay your content out using CSS, it’s extremely important to first understand how the box model works. In this video, Craig explains padding, borders, and margins and how these things function within the box model.
19 - The Box Model in Action (Running Time - 10:03)
Now that we have an understanding of how the box model works, Craig demonstrates it for us in CSS.
20 - Applying CSS (Running Time - 8:38)
There are a few different ways to apply CSS styles to your HTML document, and in this video, Craig discusses how to do this using inline styles, embedded styles, and an external (linked) stylesheet.
21 - Classes (Running Time - 10:51)
Classes allow you to create CSS styles for any element that has been assigned a class name. This allows you to style selected paragraphs, for example, without having to apply that style to all paragraphs.
22 - Using ID's(Running Time - 9:17)
An ID works similarly to the way that classes work, except that you can only use any given ID once in your HTML.
23 - Adding CSS with Dreamweaver (Running Time - 9:59)
Now that we’ve got most of the basics down, Craig will demonstrate how to add CSS rules to your document using Dreamweaver’s CSS Panel.
24 - Using the CSS Panel (Running Time - 3:09)
In this video, Craig demonstrates how to use the CSS panel to view, edit, add, and delete your CSS rules and properties.
25 - Advanced Rules with the CSS Panel (Running Time - 4:57)
In this video, Craig shows you how to create rules using multiple selectors and descendant selectors in the Dreamweaver CSS Panel.
26 - Floating Objects (Running Time - 11:07)
Floating an object causes text and other content to flow around that object.
27 - Clearing Floats (Running Time - 8:10)
If you don’t want a certain section of your content to flow around a floated object, you will need to use the “clear” CSS property. In this video, Craig will show you how.
28 - Margins (Running Time - 10:16)
Margins allow you to add padding to the outside of an object. In this video, Craig shows you how to add basic margins to objects.
29 - Using Margins for Layout (Running Time - 12:56)
In this video, Craig demonstrates how to use automatic margins in order to center your content in the browser window.
30 - Borders (Running Time - 8:11)
In this video, Craig explains how to use borders in CSS in order to make objects stand out or to provide some visual separation between pieces of content.
31 - Background Color (Running Time - 8:16)
In this video, Craig covers the basics of adding background color to your HTML files with CSS.
32 - Background Images (Running Time - 7:46)
Instead of just having a solid color for a background, Craig will now show you how to add an image to your background. He’ll also demonstrate how to tile your background images and how to position them.
33 - Gradient Backgrounds (Running Time - 5:57)
In this video, we’ll jump into a photo editing program, and Craig will demonstrate how to make a gradient background image with a very small file size.
34 - Replacing Text with an Image (Running Time - 8:32)
In this video, Craig will show you how to replace the header text with an image in CSS without actually removing the text from your HTML.
35 - A True Two-Column Layout (Running Time - 3:06)
In this video, Craig will show you how to use the margin-right property in conjunction with the ‘float’ property in order to create a true two-column layout.
36 - The 'Display' Property (Running Time - 14:24)
In this video, Craig explains the difference between a block element and an inline element and then he shows you how to change this behavior using the ‘display’ property in CSS.
37 - Using Predefined Layouts (Running Time - 10:49)
Dreamweaver contains some predefined CSS web page layouts that we can use as skeletons for our own web pages. In this video, Craig will show you how to find these layouts and explain how they work.
38 - Editing Predefined Layouts (Running Time - 12:19)
In this video, Craig will walk you through a few edits to the CSS of one of Dreamweaver’s predefined layouts.
39 - CSS Development Tools (Running Time - 15:18)
In this video, Craig walks you through some of the tools you can find online for helping you further your education in CSS and for helping you develop in CSS.
40 - Conclusion (Running Time - 2:57)
Our Risk-Free Lifetime Money-Back
Guarantee
Purchase as many videos as you like. If you discover that the videos do not completely and successfully train you on that subject, simply contact us anytime at support@technicallead.com and we will give you a complete refund.
Why such a generous guarantee? It is simple. We know how powerful the videos are and we know that they will help you. It is our way of assuring you that - in the case that you do not receive maximum benefit from the videos or if for whatever reason you are not completely satisfied - you won't have to pay for something you can't use.
However, you will never know until you try. That's why we are giving you as much time as you need to evaluate the videos. If they don't live up to your expectations you are not out a dime.
Option 1. Introduction to CSS with Dreamweaver Training/Mentoring - You can start learning CSS right now with the help of your personal mentor and our video training for just $244.00 $147.00. That's almost $100.00 off the regular price. This is the most complete training you will get anywhere!
All of the following items are included in this package:
1. You get the training videos available on-demand via instant download AND we will ship you the Introduction to CSS with Dreamweaver videos on CD. That's over 6 hours of focused training that you can view anytime, as many times, as you like.
2. About your secret weapon - your personal WebDevelopment mentor: At any time, you can send an email to your mentor to help you resolve a question about using CSS. You can even send your Dreamweaver files, so he can diagnose the problem quickly and get you back on track.
This service is invaluable, because it can save you countless hours trying to solve a problem, not to mention the frustration we have all experienced trying to get CSS to work like it is suppose to. How many times have you been just 30 seconds away from putting your fist through the computer screen or tossing your keyboard across the room?
Well those days are over.
Now when you hit a roadblock, you can just take a deep breath, fire off an email to our experts and do something productive while we work on the solution.
Here's a summary of what you get with Option 1:
- You get the Introduction to CSS with Dreamweaver videos. That's over 6 hours of video training you can download immediately.
- We will also ship you all the videos on CD so you will have a back-up.
- You get one-on-one support via email from our WebDevelopment experts for a total of 1 hour, to be used within 60 days - this will give you plenty of time to master the basics of Dreamweaver and complete your CSS project with our help.
Option 2. 3 Easy Payments - Introduction to CSS with Dreamweaver Training/Mentoring - You can take advantage of our unique training and mentoring program for just 3 easy payments of $49.00. This is the most complete training you will get anywhere!
Here's a summary of what you get with Option 2:
- You get the Introduction to CSS with Dreamweaver videos. That's over 6 hours of video training you can download immediately.
- We will also ship you all the videos on CD so you will have a back-up.
- You get one-on-one support via email from our WebDevelopment experts for a total of 1 hour, to be used within 60 days - this will give you plenty of time to master the basics of Dreamweaver and complete your CSS project with our help.
|
Yes, I can't wait to start learning Web Development like the pros... and I know there is no time to lose. Thanks for the lifetime guarantee - that takes all the pressure off my decision. In fact, it allows me to see everything for free, if I choose. Option 1. Introduction to CSS with Dreamweaver Video Training - You can take advantage of our unique training for just Click Here To Start Option 1 Securely
Option 2. 3 Easy Payments - Introduction to CSS with Dreamweaver Training/Mentoring - You can take advantage of our unique training for just 3 Easy Payments of $49.00. Click Here To Start Option 2 Securely
For corporate and educational multi-licenses, please contact Casey at casey.rasul@technicallead.com or call him in our sales department at (866) 894-0705 for more information.
|
TechnicalLead.Com, Inc. © 2008 • Privacy Policy | Terms Of Use