How to Embed a Google Form

Once you have finished creating your Google form click on the “Send Form” button.

Then click on the “Embed” button.

Change the size to 730. Then copy and past the code to be embedded and then click “Done”

Now open the page that you would like to add the form in Dreamweaver. Select the Code view in Dreamweaver. Then paste the code in between the areas that say and

Then go under the “File” menu and select “Save All”

Open your page in a browser and check out your form.

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

The Western Oregon University Theme

This theme can be used on any of the Western Oregon University blogs. It has the WOU look and feel along with using the top navigation that is throughout the whole WOU website which can be nice for others. For example they can access their Portal or click the A-Z Index once they are done reading through your blog posts.

Adding a dotted line separator to your webpage Using Contribute

Open Contribute and navigate to the page where you would like to add a dotted separator line. Put the cursor where you would like to insert the line.

Hit the return key.

Click on the Styles menu.

Select “separator” from the drop down.

Then click “Publish”.

And your dotted separator will now appear.

Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

jQuery Lightbox

First you will need to save out all your images for the web. You will want the resolution to be 72 and no larger than 900pixels wide or high. You will also need to save out a thumbnail version of your image. It is nice if they are all the same size and same dimension. For example 100pixels by 100pixels and crop them to fit that area.

Then open the page you would like to add the lightbox gallery to in Dreamweaver.

Paste this code right under the <!– TemplateBeginEditable name=”head” –>

    <script src=”/include_files/plugins/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js” type=”text/javascript”></script>
    <link href=”/include_files/plugins/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css” media=”screen” rel=”stylesheet” type=”text/css”></link>
  
    <script type=”text/javascript”>
    $(function() {
        $(‘#gallery a’).lightBox();
    });
    </script>

<style type=”text/css”>

/* jQuery lightBox plugin – Gallery style */
#gallery {
background-color: #fff;
padding: 10px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #fff;
border-width: 5px;
}
#gallery ul a:hover img {
border: 5px solid #3e3e3e;
border-width: 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>

Then paste this code where you want the thumbnails to show up and replace the path to the image, description, path to your thumbnail image, and alt tag. 

<div id=”gallery”>
    <ul>
        <li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked”><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
        </li>
    </ul>
</div>

For each image you have you will want to copy and paste the whole <li> tag. For example if you have four images you will need to have four <li> tags.

       <li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
        </li>

<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>

<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>

<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>

View an example of lightbox being used, https://wou.edu/las/creativearts/theater_dance/dance/photodance_test.php

Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

Editing Upcoming Events

Click on the video below to watch a tutorial on how to Edit Upcoming Events.

If you would like to edit the Upcoming Events section in the left nav of your site you will need to log on to ts.wou.edu on the Remote Desktop. Within the X:drive/include_files/subsite_files folder you will find your site’s folder there. Once inside the folder you will want to double click on the file called left_nav.php. It will open the file in Dreamweaver. Click the Code view button at the top

Depending on which month you want to show it will either be month01 for  January all the way to month12 for December. Change the month to the one you would like. Change the number date to what you would like it to be, if it is only a single digit put a 0 infront. (example January you would put 01) Then change the name of the event.

Then hit save. Refresh the browser and your changes should take effect.

Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215

Updating a PDF Link

Click on the video below to watch a tutorial on how to Update a PDF Link.

To update a PDF link on your site you will need to log on to the Remote Desktop and locate the original file that you created the PDF from. For example a Word Document. Once your changes are made and you are ready to post it to the web do a “Save as a PDF”  Name it the exact name as the current PDF file on the web. Example if the path to the file is https://wou.edu/president/advancement/smith/documents/SeasonTicketsform2012-13.pdf you will need to save the PDF on the X:drive in the presidents/advancement/smith/documents folder with the name SeasonTicketsform2012-13.pdf A message box will pop up saying “The file SeasonTicketsform2012-13.pdf already exists. Do you want to replace the existing file?” Click “Yes” Then open your browser and refresh the page and the new PDF file should appear.

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