April 7, 2011

Before the homepage switch . . .
Make sure your web pages link to local images, stylesheets

by Diana Pounds

When the switch to a redesigned university homepage occurs early this summer, it's possible that problems like broken images and messy layouts will appear on some units' web pages. Problems will crop up on sites that link to images and stylesheets on www.iastate.edu. Those images and stylesheets should live in the units' own web space. Here's how to check for (and fix) problems on your website.

To see if a site has a problem:

  1. View the source code on the site's homepage. Under the "view" tab on your browser, look for "source," "page source" or "view source." (On Chrome, hover over "developer" to get "view source."

  2. In the source code, search for www.iastate.edu. It's fine if you find links to other web pages, for example, the ISU homepage at www.iastate.edu or the alpha index page at www.iastate.edu/index/alpha/A.shtml.

  3. However, if your images or CSS stylesheets link to an address that includes www.iastate.edu, you'll need to make changes on your pages.

    Sites that need fixes have links like these:

    • <img src="http://www.iastate.edu/img/04/isu200.gif" alt="Iowa State University" width="200" height="15" >
    • <link rel="stylesheet" media="all" href="http://www.iastate.edu/styles/05/isuP.css" >

    Sites that don't need fixes have links like these:

    • <img src="http://www.myunit.iastate.edu/img/04/isu200.gif" alt="Iowa State University" width="200" height="15" >
    • <link rel="stylesheet" media="all" href="http://www.myunit.iastate.edu/styles/05/isuP.css" >
    • <img src="http://www.public.iastate.edu/~myunit/img/04/isu200.gif" alt="Iowa State University" width="200" height="15" >
    • <link rel="stylesheet" media="all" href="http://www.public.iastate.edu/~myunit/styles/05/isuP.css" >

  4. Spot check a few more pages on the site by repeating steps 1-3. If you don't find any images or links in "www.iastate.edu," your site should be good to go and you can quit reading. If you find images or stylesheet links containing www.iastate.edu, read on.

To make the fix:

  1. Move images to your web space.

    • Copy the image you're moving (in most cases, this will be the ISU nameplate). It's probably easiest to call up your web page, right-click the image and save it to your desktop.

    • FTP the image to the desired directory on your web site.

  2. Move stylesheets to your web space.

    • On the source code of your web page, find the URL of the stylesheet. It will be similar to, this:
      <link rel="stylesheet" media="all" href="http://www.iastate.edu/styles/05/isuP.css" >

    • Copy and paste the URL (in this case, http://www.iastate.edu/styles/05/isuP.css) into your browser and hit return. You should see the complete text of your CSS stylesheet

    • Save the text file and copy it to the desired directory on your website.

  3. Change image and stylesheet links on all web pages. Change every page to point to the directories where you have relocated the images and stylesheets. You can go through pages individually, or you might be able to use find-and-replace scripts to change links all at once.

If you have questions about moving images and stylesheets onto your site, contact Diana Pounds.