Updating sites from v2.0 template to v3.0
The updates fall primarily into three areas; link revisions in the <head>, new WSU Identifier zone, and the addition and removal of two <div> ids.
There are three links that need to be updated.
Old
<!-- favorites ico -->
New
<link rel="shortcut icon" href="http://www.wsu.edu/favicon.ICO">
<!-- favorites ico -->
Old
<link rel="shortcut icon" href="http://images.wsu.edu/favicon.ico" />
<!-- replace the key below - replace the key below - replace the key below-->
New
<link href="http://designer.wsu.edu/template/css.aspx?key=11f4Caf0axx041" type="text/css" rel="stylesheet" />
<!-- replace the key below - replace the key below - replace the key below-->
Old
<link href="http://designer.wsu.edu/template/css2.aspx?key=0eab28zs011" type="text/css" rel="stylesheet" />
<!-- print style sheet -->
New
<link href="http://www.wsu.edu/navigatewsu/gen2/print.css" rel="stylesheet" type="text/css" media="print"/>
Delete the line above. No new HTML.
1. Updating the links in the <head>
The new WSU Identifier zone updates links and the logo area for the new template.
Old<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for more information. -->
New
<script language="Javascript" src="http://www.wsu.edu/navigatewsu/gen2/wsuidentifier.js" type="text/javascript"></script> <script language="javascript" type="text/javascript">var strHeader; strHeader = getHeader();document.write(strHeader);</script> <noscript> <div id='logo'><a href='http://www.wsu.edu'><img src='http://www.wsu.edu/navigatewsu/gen2/logo2.gif' alt="Washington State University"/></a></div> <div id='globalnav'> <ul style="margin-bottom: 0"> <li><a href="http://www.wsu.edu">Washington State University</a></li> </ul> </div> </noscript>
<!--End of the WSU Identifier Zone. -->
<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for more information. -->
<noscript><div id='globalnav'><ul><li>Washington State University</li></ul></div><div id='logo'><a href='http://www.wsu.edu'><img src='http://images.wsu.edu/global/bg-logo.jpg' alt="WSU Logo"/></a></div></noscript>
<script language="Javascript" src="http://images.wsu.edu/javascripts/wsuidentifierV2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var strHeader; strHeader = getHeader(); document.write(strHeader);
</script>
<!--End of the WSU Identifier Zone. -->
2. New WSU Identifier zone
Version 3.0 requires the addition of <div id="wrapper"> and the removal of <div id="idwrapper">. This is not a replace. The <div id="wrapper"> is located in a different location then <div id="idwrapper">.
Removal of <div id="idwrapper">
- Remove idwrapper in gray.
<!--End of the WSU Identifier Zone. -->
<div id="idwrapper"> - Remove closing div in gray.
</div>
<div id="content">
Addition of <div id="wrapper">
- Add wrapper in orange.
<div id="wrapper">
<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for more information. --> - Add closing div in orange.
</div>
<!--Beginning of the WSU Global Footer Zone. Refer to www.wsu.edu/identity/ for more information. -->
- Remove idwrapper in gray.
3. <div> addition and removal
This update method begins with a site's existing HTML files and uses a Web development tool's "search and replace" function to find three code sections and replace them with updated code.
Note: The site's/page's current design key needs to be put in the fields that have been highlighted. If customizations have been made on the site, then they too will need to reflected in the code below. "Find and replace" can be used to update small sections as outlined in the "What's changed" tab.
Using Dreamweaver
Dreamweaver's "Find and Replace" function can be initiated by pressing the "Ctrl+F" keys or by locating it in the "Edit" menu.
Once the "Find and Replace" window is open, ensure "folder" is selected in the"Find in:" dropdown and "text" in the "Search:" dropdown. The steps below are defined by "Find" and "Replace" which reflect the "Find and Replace" window's fields.
- Be sure to put the current design key into the highlighted area in the Find section and put the new design key into the Replace area.
Find
Replace<!-- favorites ico -->
<link rel="shortcut icon" href="http://www.wsu.edu/favicon.ICO">
<!-- replace the key below - replace the key below - replace the key below-->
<link href="http://designer.wsu.edu/template/css.aspx?key=11f4Caf0axx041" type="text/css" rel="stylesheet" />
<!-- replace the key above -->
<!-- print style sheet -->
<link href="http://images.wsu.edu/css/print.css" rel="stylesheet" type="text/css" media="print"/></head><body>
<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for more information. -->
<script language="Javascript" src="core2-0_files/wsuidentifier.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">var strHeader; strHeader = getHeader();document.write(strHeader);</script><div id="logo"><a href="http://www.wsu.edu/"><img src="core2-0_files/logo2.gif" alt="Washington State University - World Class Face to Face" width="149" height="98"></a></div><div></div><div id="globalnav"><ul><li><a href="http://index.wsu.edu/">A-Z Index</a></li><li><a href="http://www.about.wsu.edu/statewide/">Campuses</a></li><li><a href="https://my.wsu.edu/">myWSU</a></li><li><a href="http://search.wsu.edu/">WSU Search</a></li><li><a href="http://www.wsu.edu/">WSU Home</a></li></ul></div>
<noscript>
<div id='logo'><a href='http://www.wsu.edu'><img src='http://www.wsu.edu/navigatewsu/gen2/logo2.gif' alt="WashingtonState University"/></a></div><div id='globalnav'> <ul> <li><a href="http://www.wsu.edu">Washington State University</a></li> </ul>
</div>
</noscript>
<!--End of the WSU Identifier Zone. -->
<div id="idwrapper">
<!-- favorites ico -->
<link rel="shortcut icon" href="http://images.wsu.edu/favicon.ico" />
<!-- replace the key below - replace the key below - replace the key below-->
<link href="http://designer.wsu.edu/template/css2.aspx?key=0eab28zs011" type="text/css" rel="stylesheet" />
<!-- replace the key above -->
</head>
<body>
<!--Beginning of the WSU Identifier Zone. Refer to www.wsu.edu/identity/ for more information. -->
<div id = "wrapper"><noscript><div id='globalnav'><ul><li>Washington State University</li></ul></div><div id='logo'><a href='http://www.wsu.edu'><img src='http://images.wsu.edu/global/bg-logo.jpg' alt="WSU Logo"/></a></div></noscript>
<script language="Javascript" src="http://images.wsu.edu/javascripts/wsuidentifierV2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var strHeader; strHeader = getHeader(); document.write(strHeader);
</script>
<!--End of the WSU Identifier Zone. --> - Find
</div>
Replace
<div id="content"><div id="content">
- Find
<!--Beginning of the WSU Global Footer Zone. Refer to www.wsu.edu/identity/ for more information. -->
Replace
</div><!--end of wrapper-->
<!--Beginning of the WSU Global Footer Zone. Refer to www.wsu.edu/identity/ for more information. -->
1. Replace all content from the favicon through the idwrapper div
2. Remove the closing div tag for the idwrapper
3. Add the closing div tag for the wrapper
This update method begins with the new template's version 3.0 core HTML file. A page's content is copied over from the old page into the new 3.0 core page. This works best for relatively small sites.
Pros:
- A chance to start over and clean up your pages and sites
- You only need minimal code experience
Cons:
- It takes time
Note: It is advised that you make a backup of your site files before beginning.
Download the core HTML file and open it in a Web editor (Dreamweaver, TextMate, etc.). Use the Template Designer to generate a new design key.
In the core, find the code below and replace the highlighted text with the design key generated by using the new Template Designer.
<!-- replace the key below - replace the key below - replace the key below-->
<link href="http://designer.wsu.edu/template/css2.aspx?key=0eab28zs011" type="text/css" rel="stylesheet" />Copy the navigation, site id, local footer, site specific stylesheet, and other site specific content from the v2.0 site and paste it into the core v3.0 file.
This can be done in one of two ways:
- In code view, find the div that needs to be copied over, <div id="nav">, all the way to the corresponding end div, </div>, and copy it. Then paste it over the the identical tags in your new document.
- In design view of the editor, copy the content from the Web site and paste it into the corresponding area in the editor.
Now a template has been built to update the Web site's pages.
-
Open the page that is to be transferred over. Copy the main, secondary, and additional content areas and paste them into the corresponding areas on the new page. If the copying is done through code view, then each of these sections can be copied at the same time, but if these sections are being copied in design view, then it is recommended that each section be copied separately.
Once the copying and pasting is done, close the old page and "save as" the old pages name. This will overwrite your old page (remember to create backups of your pages).
Continue this process until you are done.
Note: Remember to "save as" every time so work done on the previous page isn't overwritten by the content on the current page.
1. Download the new template core-v3.0 HTML file
2. Enter your key into the core-v3.0 HTML file
3. Create a site-specific template
4. Preparing to move the main, secondary, and additional content
This section outlines how to add a large graphic above the "main" and "secondary" content areas for a home page, by adding a new div. There is a photoshop starter file available to help create home page graphics.
Inserting the home page graphic div
Find the "main" div and place the highlighted code above it.
FindPlace<div id="main">
<div id="home"><img src="your image path here" /></div>
<div id="main">