Important Style Examples

Here are some visual examples of the styles you can achieve in your website using Cascade, as well as an important step-by-step guide on how to create proper data tables:

Page Heading (Heading 2)

This sentence uses the Paragraph style. Most of your text should utilize the Paragraph style.

Links (This is a heading 4)

To create a link with a document type icon:

  1. Create your link as normal
  2. When the link dialog box is open, choose the appropriate class in the dropdown for your doc type.
  3.  The icons will not appear in the WYSIWYG. You will see the changes in preview mode.

Buttons 

You can also create a button from a link:

  1. Create your link as normal. The text should not be too long. Remember, it's a simple buttom.
  2. When the link dialog box is open, choose the 'Link-Button-Color' you want from the class drop-down.
  3. The button will not appear in the WYSIWYG. You will see the changes in preview mode. The button will also take up some 'invisible' space in the WYSIWYG.

Tables

You should style your data tables to make them more presentable within the campus design:

The order below is important. If you do not follow this specific order, your table will not look correct. Advanced directions are below.

  1. Create your table as normal. (cellspacing should be 3-5)
  2. Tables should not be centered.
  3. Select the entire table and choose 'Table-01' from the styles drop-down above.
  4. Submit your page. It is best to do this now as all the table borders will disappear in the WYSIWYG. When you go back to edit the page, they will 'reappear'
  5. Choose table header and cell colors as appropriate
  6. Choose styles for your text.
Majors Students Enrollment
Biochemestry 101 80%
Education 552 95%
Linguistics 256 99%

*This table is for design purposes only and does not reflect actual numbers pertaining to CSUSM enrollment

Advanced Tables 

You can edit and create tables much easier in DreamWeaver. Of course this means playing a bit with HTML. It's not that difficult. Here's how!

  1. Create a new HTML file in DreamWeaver
  2. Click 'Split' for your display. (Top left)
  3. In the Code window, enter the following text between the <title> and </head> lines:
    <link href="http://www.csusm.edu/general/content.css" rel="stylesheet" type="text/css" />
  4. Save the page on your computer. (This will give the page access to the campus stylesheet)
  5. Create a table as normal
  6. To choose styles:
    1. Select the cells you wish to change
    2. Choose the appropriate style from the style drop down in the 'Properties' pane (bottom of the screen)
  7. In the code view, copy all the code between the two <body> tags.
  8. In Cascade, edit your page and click the HTML button.
  9. Paste the code and click 'Update'

Using this method you can have more control over the styles for the table by multi selecting the cells (CTRL+click) and applying the style. In cascade, you have to do this cell by cell, which can be troublesome when you have a large table.

Optional Button Style

Lab times for early October

Oct 7, 2-4
Oct 8, 9-11
Oct 15, 2-4
Oct 17, 2-4
Oct 18, 2-4

Tips for pages