I. Introduction to Dreamweaver MX
Dreamweaver MX is a program that allows you to quickly and easily create and manage static and dynamic websites. This documentation walks you through creating a simple web page with links and graphics. The first thing you need to do is download the files that will be referred to in this documentation.
If you do not already have Dreamweaver, a 30-day trial can be downloaded and installed from the Macromedia's website: http://www.macromedia.com/software/dreamweaver/trial/
Student Computing's Beginning Dreamweaver MX documentation can be found here: http://www.csuchico.edu/stcp/workshops/dreamweaver_i.html
Student Computing's Advanced Dreamweaver MX documentation can be found here: http://www.csuchico.edu/stcp/workshops/dreamweaver_ii.html
II. What are Cascading Style Sheets?
Cascading style sheets are references that attach to your webpage and specify how different elements of it are going to be displayed. A good example of the power of stylesheets can be referenced at the css Zen Garden.
III. Creating a New Custom Style Sheet
We are going to create a new style sheet that will modify the text of the webpage.
1. Go to Text > CSS Styles > New CSS Style
2. A window will come up:
3. Type in the name of the style sheet (such as '.mysite') and click OK. You will be asked to save the style locally.
4. Another, larger window will come up. This is where you can define the different elements of your custom webpage style. There are seven category for styles: type, background, block, border, list, positioning, and extensions. For simplicity's sake, we will just create different font elements.
The font is set as Arial, the font size as 10, as well as different elements.
5. Click OK.
B. Attaching a Style Sheet
Once a custom style sheet has been created it must be attached to the web page in order to be applied. To attach the custom style sheet go to Text > CSS Styles and click on the name of the Style Sheet (mysite). To attach a style sheet that hasn't been created in Dreamweaver, go to Text > CSS Styles and choose Attach Style Sheet. A window will come up where you can browse your computer for the style sheet, or put in its location.
You can attach the style sheet to as many different web pages as you want. Each web page that has the style sheet attached will have the same formatting and properties as the style sheet.
C. Editing a Style Sheet
Custom style sheets can be edited at any time. To edit a style sheet go to Text > CSS Styles > Edit Style Sheet. You can modify the properties of the style sheet.
D. Applying Style Sheet Elements to the Webpage
Different elements or classes of the style sheet can be applied to different sections of the webpage. The classes can be found under Text > CSS Style. In order to modify text or an object such as a table, the text or object must be highlighted before applying the style.