First you will need to login to your gmail account. You will want to use a standard gmail account for your whole site for example, bookstore@wou.edu. This way if someone moves on from WOU these forms will still exist. If you would like to create a standard email address for your department or program please email me at gauntzd@wou.edu.

Once you are logged in click on the 9 little squares and this dropdown menu will appear, select “Drive” from it.

Then click the “CREATE” button and select “Form” from the dropdown.

Title your form. Select Default and then click “OK”.

Uncheck the “Require Western Oregon University sign-in to view this form.”

A “Do not require sign-in box” will appear, hit “Ok”.

Type your question in the box “Question Title”.

For the “Question Type” you can select from, Text, Paragraph text, Multiple choice, Checkboxes, Choose from a list, Scale, Grid, Date, or Time depending on what you are asking.

You can make your questions be required for them to answer before they can submit it by checking the “Required question”.

To add another question click the “Add Item” at the top and select the type of question you would like from the drop down and fill out the fields just like I showed above.

For the confirmation page you can type in whatever you want to show up once they have submitted the form. You can check or uncheck any of the other options below as well, then hit “Send form”

Here is a tutorial on how to post this form in Dreamweaver.

If you would like me to post the form you can copy that code and send it to gauntzd@wou.edu with the link to the page you would like it to appear on.

To set up email notifications for when people submit the form click on “View responses”.

Go under the”Tools” menu and select “Notification rules…”

Select the options you would like in the box that pops up and then hit save. These email notifications will only be sent to the gmail account that this form was set up in.

To go back into your form and make edits go under the “Form” menu at the top and select “Edit form”.

When people submit this form the results will show up on the spreadsheet.

If you have any questions feel free to contact me at gauntzd@wou.edu or 503-838-8215.

Open the file in Dreamweaver. Select either “Code” or “Split” view.

Put your cursor where you would like the buttons to appear and paste this code,

<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>

If you would like your buttons to be on the right side of the page you will need to wrap this div around them,
<div style=”float:right; margin-top:7px; margin-left:15px;”>
</div>

Here is what that code would look like,

<div style="float:right; margin-top:7px; margin-left:15px;">
<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
</div>

To change the text on the buttons select “Your Button Name” and type over it what you would like. Look at the blue text below for an example.
<p style=”margin-top:7px;” id=”smallBtn_blue”> <a style=”text-decoration:none;” href=”#”>Your Button Name</a></p>

To link your button select the “#” and type over it where you would like it to link to. Look at the blue text below for an example.
<p style=”margin-top:7px;” id=”smallBtn_blue”>
<a style=”text-decoration:none;” href=”#“>Your Button Name</a></p>

Please feel free to email me if you have any questions, gauntzd@wou.edu.

Select the word or words you would like to link to another part on that page. Right click and select Insert Link…

You will need to have the Advanced section showing, so click on the Advanced button and it will open.

In the HREF: box type a # symbol and then a word to anchor your link to (no spaces in here and it can not be the same as another anchor link)
Then hit OK.

Then scroll down on the page where you would like the anchor to go and put your cursor there. Go up to Insert and select Section Anchor.

Type in the same exact word you used for the HREF box (do NOT put the # symbol in)
Then hit OK.

That’s it, click Publish and it will be live on your site.

To create a new webpage for your site you will need to go to
https://wou.edu/websmith

Enter in your username and password.
Then your site should appear with three links next to it,

• List pages
• New page
• Edit Subsite

You will want to select “New page”

Fill in all the fields of the Page Creation Form,

For the Page URL enter in the name you would like to show up in the url with no spaces and end it with .php

Enter in what you would like for the Page Title.

For the Meta Description enter in a brief description of what this page is about.

For the Meta Keywords enter in any search words that you think someone would use trying to find this page and separate the words with a comma, no spaces.

For the Link file select from the drop down the name of your subsite_nav.php

Then hit the Create Page button

After you hit the Create Page button you will the get a message at the top of the page saying,
“Page data creation succeeded! New ID: 6102. (Security lockdown is currently in effect, so the file could not be created. Your data has still been saved in the database. Please send the page ID number ‘6102’ and the URL ‘/provost/example.php’ to webteam@wou.edu so we can create the page.)”

Send all of this to webteam@wou.edu and your page will get created.

HEAD SECTIONS:
<!– Start VideoLightBox.com HEAD section –> <link rel=”stylesheet” href=”/woutv/engine/css/videolightbox.css” type=”text/css” /> <style type=”text/css”>#videogallery a#videolb{display:none}</style> <link rel=”stylesheet” type=”text/css” href=”/woutv/engine/css/overlay-minimal.css”/> <script src=”/woutv/engine/js/jquery.tools.min.js”></script> <script src=”/woutv/engine/js/swfobject.js”></script> <script src=”/woutv/engine/js/videolightbox.js”></script> <!– End VideoLightBox.com HEAD section –>

BODY SECTIONS:
<!– Start VideoLightBox.com BODY section –> <script type=”text/javascript”> function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById(“video_overlay”); ytplayer.setVolume(100); } </script> <span id=”videogallery”> <a rel=”#voverlay” href=”/woutv/engine/swf/player.swf?url=https://wou.edu/woutv/data/video/VIDEO_NAME.flv&volume=100″ title=”TITLE_OF_VIDEO“><img src=”/woutv/data/thumbnails/THUMB_IMAGE_NAME.jpg” alt=”ALT_TAG_OF_VIDEO” /></a> </span> <!– End VideoLightBox.com BODY section –> <br /> <span id=”videogallery”> <a rel=”#voverlay” href=”/woutv/engine/swf/player.swf?url=https://wou.edu/woutv/data/video/VIDEO_NAME.flv&volume=100″ title=”TITLE_OF_VIDEO“><strong>LINK_TEXT</strong></a></span> <p>&nbsp;</p></div>

EXAMPLE:

Example Video

Click on the video below to watch a tutorial on creating a Contribute connection.

If the file in the _mm folder has a 4 on the end the connections password is, “publisher4“.
If it does not have a 4 on the end then the connections password is just “publisher“.

If you do not have Quicktime you can view the tutorial using a Flash player:

Tutorial Video (Flash Player)

You will only need to go through these steps once. The next time you open Contribute the screen you get will look like this,

Just click on the your sites name and it will open.

Please feel free to email me if you have any questions, gauntzd@wou.edu.

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=”https://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 preview the page before you save it.

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

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
https://wou.edu/student/finaid/loans.php

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 https://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
https://wou.edu/student/finaid/loans.php

I recently implemented jShowOff on the Western Oregon University’s website. jShowOff is a jQuery content rotator plugin which allows you to use any form of html within a <div> tag. With jShowOff we are now able to have multiple links within each slide that rotates. The jShowOff also gives us the capability to navigate through the slides. This feature allows people to quickly navigate to the slide that they would like. Also, if they find that the rotating slides are distracting, they can pause it.

The jShowOff plugin comes with jquery.jshowoff.min.js and jshowoff.css. I was able to go in and change the css so that the links were the color I wanted and placed on top of the image to the right. Here is a link to where you can download this plugin and see demos, http://ekallevig.com/jshowoff/.

The jShowOff is styled to have numbers for the navigation. In order to get the numbers to go away and just have little balls show up, in the css you will need to add/change the font-size and line-height to 1px in the .jshowoff p.jshowoff-slidelinks style and the .jshowoff-slidelinks a, .jshowoff-controls a style. By changing the margins you can have it appear on-top of the image instead of below. If you want to change the effect and speed of the rotating slides you can do that in the jquery.jshowoff.min.js file. The jShowOff has lots of options so you can customize your rotating slideshow to be exactly how you want it.

There is one bug I am still trying to figure out. The style of the play/pause, next, and previous links get pulled from your overall a style, which makes it tough if you want your links within the rotating slides to be different than the rest of your page. Hopefully I will be able to figure this out so I can implement this on webpages within the site.

click on the banner to see Western’s homepage in action