Core Concepts of CSS / Dreamweaver CSS Styles Panel
Subtitles of the Movie
By default, Dreamweaver uses Cascading Style Sheets or CSS to format text, the styles that you apply to text using the Property Inspector or the Menu Commands create CSS Rules that are embedded in the head of the current document, however you can also use the CSS Styles Panel which I have opened here to create and edit CSS Rules and properties. This CSS Styles Panel is a much more robust editor then the Property Inspector and displays the CSS Rules defined for the current document. Whether those rules are embedded in the head of the document or an External Style Sheet like I have here, in this case my External Style Sheet is entitled 3ColumnLeftNav.CSS. I recommend that you use the CSS Styles Panel rather then the Property Inspector as the primary tool for creating and editing your CSS, as a result your code will be cleaner and easier to maintain. Now in addition to the Styles and Style Sheets that you create you can also use Style Sheets that come with Dreamweaver to apply Styles to your documents, that's where this style came from, the style sheet here, 3ColLeft.CSS is one that I got from the Dreamweaver program itself and then modified quite a bit to meet my own needs. The CSS Styles Panel lets you track the CSS Rules and Properties affecting a currently selected page element which is the Current Mode accessible by clicking on this Current Tab right here, where all the rules and properties that are available to the document, that's the All Mode, so right now these are all of the styles available on this External Style Sheet that's linked to this document back here. Currently, I have a style here selected Pound Sign Site Name, that's the properties for that Current Style. Let me go through some of the features here in the CSS Panel since it's such an important component in your Dreamweaver work. Down here in the lower left hand corner you have your Mode Selectors, Category View, List View and Set Properties or the Set Properties View. Category View divides the Dreamweaver supported CSS Properties into 8 categories, you'll see these if you select the All Tab here and the categories include Font, Background, Border, Box, List, Positioning and Extensions. Each categories properties are contained in the list that you can expand or collapse by clicking on the Plus Buttons or Negative Buttons to collapse them. Set Properties appear in Blue here at the top of the list, in other words, for my A Visited Style I've set the color and the text decorations since those are in blue. Everything here in Black is undefined currently for that style. List View which is next displays all of the Dreamweaver supported CSS Properties in alphabetical order. Again Set properties appear in blue and the last option, the Set Properties View; this displays only those properties that have been set, again notice that for the A Visited it's only the text decoration and the Color Properties. You also have some icons down here in the lower right hand corner, the first one; Attach Style Sheet opens the link External Style Sheet Dialog Box where you can select an External Style Sheet to link to or import into your current document. Next, we have the New CSS Rule Icon, this opens a dialog box in which you can select the type of Style you're creating. Next you have the Edit Style Button, that'll open up the CSS Rule Definition for that style where you can modify its properties and the last option there, the little icon of the trash can is the Delete CSS Rule, this removes the selected rule or property from the CSS Styles Panel and removes the formatting from any element to which it was supplied. It does not however remove class or ID properties referenced by that style, more about Class and ID Properties in a little while. This Delete CSS rule button can also detach or unlink an attached CSS Style Sheet. Now as I mentioned previously there's two viewing modes for the CSS Styles Panel, All and Current. So let me now move on to the next movies and cover each of these modes in detail, starting with the next movie, the CSS Styles Panel in the All mode.
Tutorial 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 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (20,800 free)
- Video Available as Flash or QuickTime
- Over 782 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 