Thursday, July 21, 2011

Stylesheet for Dreamweaver Users

If you are editing your website in Dreamweaver by pasting this code at the top of the page you will be able to see all of the styles.
<link href="http://www.wou.edu/include_files/css/wou_styles/subsite_dreamweaver_edit.css" rel="stylesheet" type="text/css" />



If you are using the Design view you can select anything you want to style and then under the properties menu select the CSS button.



All of the styles will now appear under the Targeted Rule dropdown.



To preview what your page will look like before saving, hit the Live View button at the top.



You will not be able to edit in the Design mode while the Live View button is on, but it is a nice feature to have to preview the page before you save it.

If you have any questions feel free to contact me, gauntzd@wou.edu.

Adding a dotted line separator to your webpage
Using Dreamweaver

Select either code view or split view so you can paste the code in.


Navigate to where you would like to put the dotted line separator. If you are in the split view, in the design area put your mouse where you would like the dotted line. Then up in the code where your courser appears add this code
<div class="separator">&nbsp;</div>

Here is an example of what the code should look like,


Check out an example of a page using the dotted line separator
http://www.wou.edu/student/finaid/loans.php

Adding a dotted line separator to your webpage
Using Contribue

Open Contribute and navigate to the page that you would like to add the dotted line separator. Hit the Edit Page button. Move your mouse where you want to add the line separator. Then under the image dropdown select "From Internet"


Paste http://wou.edu/images/dots.png into the address bar and hit enter. The dotted separator image should appear in the window. Then hit the ok button.



A window will pop up asking for an alt tag, I would recomend putting some .......... in, that way if someone has their images turned off they will still be able to see a bit of a separation line.



Hit ok and the dotted line separator should appear.

Check out an example of a page using the dotted line separator
http://www.wou.edu/student/finaid/loans.php