Colored Buttons

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.

Anchor Links in Contribute

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.

Websmith - Creating a new page

To create a new webpage for your site you will need to go to
http://www.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.

Code for adding video lightbox

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=http://www.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=http://www.wou.edu/woutv/data/video/VIDEO_NAME.flv&volume=100" title="TITLE_OF_VIDEO"><strong>LINK_TEXT</strong></a></span>
<p>&nbsp;</p></div>

Replace the blue text with YOUR video file name, thumbnail file name, title, alt tag, and link text.

EXAMPLE:

Example Video

Creating a Contribute Connection

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

The password for all connections is, publisher4

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.

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

jShowOff jQuery Content Rotator Plugin

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

Setting Up My Blog

Today, I setup my blog. I designed my own background image in Photoshop using different brushes that I downloaded from Brusheezy (http://www.brusheezy.com/ lots of great brushes to choose from for FREE, which is always nice). I created multiple layers in Photoshop, and used the brushes on several of them, some with color overlays and others with gradient overlays. I then masked a few layers to get the gradient feel. When I was finished with the background image, I implemented my own CSS to get the exact look I wanted.