Al's TAFE Certificate IV I.T. (Website Design) Exercises

Cascading Style Sheets 4

CSS » Using Dreamweaver MX to develop Style Sheets .

In Dreamweaver® you can write your own style sheet, by selecting File > New and on the General Tab choose a CSS Basic Page to create your own external style sheet coding. There are also some built-in Dreamweaver style sheets under the CSS Style Sheets heading.

Another way to work with Styles in Dreamweaver is to use the CSS styles panel which can be opened using Shift + F11 or Windows > CSS Styles.

Click the "New CSS Style" button on the panel to begin a new style.

The New CSS Style dialog box opens

Here you can define a custom class or redefine a tag or selector, and you can choose to put this style information in the local document or in an external style sheet.
The options are: -

• Name – pick a suitable name that will make it easier to know what the style refers to as this name will appear in the styles panel.
• Type – what kind of style will this be?
  1. Make Custom Class – makes a custom class that can be applied to any tag.
  2. Redefine HTML tag - will create a style that will apply to every instance of the selected tag.
  3. CSS Selector – allows you to set link styles.
• Define in – allows you to decide whether this will be an external style sheet applying to many pages, or just applying to this page only.

When you make your choices from the above box you are then presented with the CSS Style Definitions dialog box.

This box allows you to create a new style and to edit existing styles. It has 8 different windows that cover different aspects of CSS, controlled by the Category list at the left of the above picture.

Type

As in the diagram above the type category lists the type options available in the CSS Style Definition dialog box. These are:-

• Font – which sets the font style, using the same groupings as set by Dreamweaver, or you can modify these yourself.
• Size – Lets you specify the font size, which can be a number value or an absolute value. (Absolute is based on the average size in the user's browser.
• Style – Sets the font to normal, italic or oblique.
• Line height – specifies the height of the line of text which is usually about 20% bigger than the type size or text characters themselves.
• Weight – Sets the boldness of the font. You need to check this across browsers.
• Variant – Choices are normal (lowercase) or Small Caps.
• Case – Sets text to all uppercase, all lowercase, or capitalise every word.
• Colour – Sets the font colour.
• Decoration – sets the options for lines on the text. Use none to remove underlining in hyperlinks.

Dreamweaver MX shows most CSS elements in the Design window. Test in a few browsers to be sure though.

Background

As shown in the picture above there are several options available in the Background Category. Background category controls how the background appears and this is used for controlling the background of block elements. This could be applied to elements such as paragraph, layer <div>, table or any other separate elements. They could all have their own background defined for them. Make sure you apply this to the correct tag. The options here are:-

• Background colour – sets the background colour of the element.
• Background image – sets the background image, if any, to the element. This is actually the preferred way to set a background image rather than with the HTML background tag, as you have much more control this way over the background image.
• Repeat – Controls how the image repeats in the background.
• Attachment – Sets whether the background image will remain static or scroll behind the element.
• Horizontal Position – Sets the horizontal position of the image.
• Vertical position – sets the vertical position of the image. Not good in Netscape 4 or lower browsers.

Block

The block category lets you control the style of block elements such as paragraphs, which are discrete pieces of HTML.
You can control:-

• Word spacing – defining the space between words.
• Letter spacing – defining the space between letters.
• Vertical alignment – for subscripts and superscripts
• Text align – to set the justification settings. Left, right, centre and justify.
• Text indent – enables you to choose an indent from the edge of the page
• Whitespace – "Normal" collapses multiple spaces into one space.
• "Pre" leaves multiple spaces
• "Nowrap" will not allow line wrapping without a break tag.
• Display – Limited browser support exists as yet for these display controls for the block element.
  

Box

The box option controls element spacing and placement on the page. This needs to be tested in browser as most will not show up in design view. The options are: -

• Width & height – Sets the width & height of the element.
• Float – Allows an element to be separated from the rest of the page so that other elements on the page will flow and wrap around it.
• Clear – stops other elements from overlapping each other so you can keep block elements such as a paragraph in its own horizontal space.
• Padding – Similar to setting cell padding in a table, but for elements.
• Margin – Defines the amount of space between the element border and other elements.

Border

The border option sets a border around a chosen element. This gives you lots more control than you would have by creating a border by other means.
The border options are:-

• Style – sets the style of the border. For example dotted, dashed or solid borders.
• Width – sets the width value for the border
• Colour – sets the colour of the border
  

List

The list category provides options for making a numbered or bulleted list. Some of the options available are:-

• Type – This controls the type of bullet. Gives you almost as much control as a word processor has.
• Bullet image – allows you to use an image for the bullet.
• Position – Controls the wrap of the item.

Positioning

This is the main means to control where page elements will appear on your page. CSS positioning can be applied to most block level elements, but they are generally used with layers. Layers are really <div> tags that contain an inline style using absolute positioning, (which we learned about in week 2 of CSS). Check for browser support. The options are: -

• Type – what kind of positioning are you using; absolute, relative or static.
• Visibility – controls the initial visibility of the element. Can be hidden when the page is loaded.
• Width – Defines the width of the block element.
• Height – defines the height of the block element.
• Z index – determines the stacking order of the elements, or what goes behind or in front of what.
• Overflow – If the content of a layer is larger than the layer size this determines what happens to the overflow. Options are visible, hidden, scrollbars or auto.
• Placement – where the layer will display.
• Clip – specifies the part of the layer that is visible, and can be used in combo with JavaScript to create some interesting effects.

Extensions

These are CSS level 2 options so they are not supported by some browsers.
The options are:-

• Page breaks – which is used to set where the page breaks will appear for printing your web pages.
• Visual effect – allows you to change the look of the cursor when it is over the element.
• Filter – allows you to set special effects to images on the page, but works in only IE 4.0 and above.