Using Dreamweaver and Styles

Using styles in your website
Nearly all websites you come across are styled differently. Most are not left in a plain, Times New Roman, 12 point, black font on a white color background. Instead, styles are applied to suit both the web designer's preference and the design of the website.

Using styles in Dreamweaver
Dreamweaver provides a simple outlet for applying styles to not only a single web page, but pages across an entire website. While Dreamweaver does allow a user to individually "tag" each piece of text through a formatting panel similar to that of Microsoft Word, this process can become tedious and inefficient. Instead, we recommend using the Cascading Style Sheets (CSS) already attached to your department site, which enable you to apply a property or group of properties to an object by selecting a style from a menu. We usually think of text when creating and applying styles, but styles can also be used to position objects, apply borders and more. Keep in mind when applying styles that less is usually always more when it comes to formatting a website.

Getting started with CSS
When you open your site in Dreamweaver, you will notice that in the "Properties Panel" you have easy access to a whole bunch of different options for formatting text through the "Style" drop-down menu.

Screenshot of CSS window

Dreamweaver also provides several options for text sizing and decoration within paragraphs (superscript, subscript and strikethrough). Strikethrough is listed under Type, Decoration, "Text Decoration" while superscript ("super") and subscript ("sub") are listed under Block, Vertical Alignment.

Lists are valuable tools to organize certain pieces of inforrmation. HTML categorizes lists into ordered lists and unordered lists. An ordered list uses numbers and should be used when order should be recognized, such as in a list of instructions. An unordered list should be used when order does not matter and/or when bullets are used. For example, say that on your website, you want every unordered list to use square bullets located on the inside of your text. In addition, you want the font color to be blue and in italics. Type "list" into the Selector field and select blue as your font color and italic as your style. Under the "List" category, select "square" under "list-style-type" and "position" under "list-style-position." In order for this CSS style to take effect on your HTML page, your list must be surrounded by ul and /ul (HTML) tags.

Creating your own CSS styles
While a web document's structure is typically done in HTML, we recommend CSS work must be conducted using a separate file structure. To begin, go to File, New, and select CSS under the Basic Page box.

CSS Styles Panel
Dreamweaver provides easy access to all applied styles to each Cascading Style Sheet, located on the right side of your screen. In a convenient hierarchy, the panel shows a list of all rules for that particular sheet. To open this panel, press Shift+F11 or access from the Window menu. From this panel, you may edit a rule, add a rule, delete a rule, attach a style sheet to a page or remove a style sheet from a page.

Screenshot of CSS window

Basic Text Options
The text weight property sets how thick or thin text should be displayed. Herein lies the value of CSS: say your site uses gold text often, yet the gold text is hard to read. To combat this, CSS allows you to set a rule that says "every time that gold text is written, use bold text." To set this property, select the "Add New CSS Rule" button on the bottom right of the CSS Styles Panel. Make sure "Class" is selected, and type "gold" into the "Selector" field. In the "Rule Definition" Menu that pops up, select your desired font-weight, for example, bold. In the "color" option, set this to gold.

Screenshot of CSS window

The line height property sets the distance between lines in a paragraph. This property is useful to show consistency across a website. The property is located in the "Font" properties under "Line Height" and can be set in pixels, points, inches, centimeters, millimeters, picas, ems, exs or percent.

The font stretch property condenses or expands the current font family. In other words, distance between characters is controlled by using this property. It is located under "Font Stretch" under the "Font" properties.

Basic Image Options
Graphically speaking, images look better if they are contained by a border. CSS allows Dreamweaver to draw borders on every image that is written into the code. For instance, say we want to draw a one pixel, black, solid border on every web image. Make a new rule, title it "border" and click on the "border" category. Assure that "same for all" is checked three times. Select "solid" under type, navigate to "1" pixel for size and select black.

Screenshot of CSS window

A second useful property when using images is the "float image" property. For the most part, this property allows a user to align images to the left or right and also allows for text wrapping to the respective image. If you have little text, it is not beneficial to float your images. To utilize this property, go to the "Box" and see the "float" option there.