Instructions for Updating and Maintaining the World Affairs Forum (= WAF) Website

This docume= nt is intended to help current WAF members with a working knowledge of HTML and C= SS coding update the content of the WAF website quickly, easily and regularly.=

I. Updat= ing Content

There is a homepage and three interior pages on the WAF website: “About WAF,” “Events” and “Sister Or= ganizations.” All four pages will need updated.<= /p>

A. Homep= age

There are two parts that need updated on the homepage:= The body text and contact information.

· The body text – Revise and delete the = “What is WAF” section as necessary. As WAF gains recognition such a section may not be necessary.

· Contact information – Update homepage contact information accordingly as WAF gains and looses members and administrators.

To access Hom= epage HTML code:

1. Double-click “WAFwebsite” folder

2. Select “index.html” or “index”

3. Right-click index.html

4. Select “Open With”

5. Click “= NotePad”

HTML Coding T= ips

· All headings on the homepage, including R= 20;What is WAF,” use the <h2> tag.&nbs= p; Code all headings: <h2>Heading text</h2>

· The contact information is formatted in its = own paragraph. It is not part of = the “about” division class or the body text.

· Use= &#8226 to denote bullets

· E-mail addressed are linked by

&= nbsp; <a href=3D"mailto:address@setonhill.edu">kl= apak@setonhill.edu</a>

= ;

B. “About WAF” page

There are two parts that need updated on the About WAF= page: “Recent expansion” section and “members” sect= ion.

·         Recent expansion – Re-label and re-organize current “recent expansion” section when needed. Keep the “recent expansion” sub-heading for the most recent news.

·         Members – Update the Student Council l= ist as students join, leave and change positions. Depict the emerging administrative hierarchy as necessary. Updat= e the Advisory Board similarly.

To access Abo= ut WAF HTML code:

1. Double-click “WAFwebsite” folder

2. Select “about.html” or “about”

3. Right-click about.html

4. Select “Open With”

5. Click “NotePad”

HTML Coding T= ips

·         Uses a heading 1 tag for the page title: <h1>About WAF</h1>

·         Use a heading 2 tag for all other subtitles:= <h2>The Beginning</h2>

·         Use= &#8226 to denote bullets

C. “Events” page

There are four parts of the Events page that need upda= ted: introduction, current events, past ev= ents, and event photographs.

·         Introduction – Condense the introducto= ry overview of events as WAF events gain greater recognition. Update promotional information as necessary.

·         Current Events – Keep an updated sched= ule of events in the top portion of the page.&= nbsp;

Include the date, time, location, brief descrip= tion and contact information for each event.&nb= sp;

·         Past Events – Delete events from event schedule within one day. Keep= a description of past event series. Condense as needed as new events and series are added.

·         Event photographs – Add photographs of future events. Ask permission= of all students, faculty and guests. Label and credit accordingly.

To access Eve= nts HTML code:

1. Double-click “WAFwebsite” folder

2. Select “events.html” or “events”

3. Right-click events.html

4. Select “Open With”

5. Click “NotePad”

HTML Codin= g Tips

·         Format the introduction using successive lin= e beaks: <br /= ><br />

·         Use heading 1 tag for page title: <h1>WAF Events: 2008/2009</h= 1>

·         Use heading 2 tag for spring and fall subheadings <h2>Fall 2008 Ev= ent Series</h2>

·         Use= &#8226 to denote bullets

D.= “Sister Organizations” page

There are two parts of= the Sister Organizations page that need updated: current organizations and new organizations.

·         Current organizations – Add all contin= ued work with the SHU Office of Alumni Relations, City Asylum, and United States Embassy of Zimbabwe.

·         New organizations – Add any other collaborative or associated organizations.= Most major events will have a related organization. Add pictures and links to follow c= urrent formatting (see section III).
To access Sis= ter Organizations HTML code

1. Double-click “WAFwebsite” folder

2. Select “sister.html”

3. Right-click sister.html

4. Select “Open With”

5. Click “NotePad”

HTML Coding T= ips

·         Use heading 1 tag for the page title: <h1>Sister Organizations</h= 1>

·         Use heading 2 tags for each organization tit= le: <h2>Seton Hill University Offi= ce of Alumni Relations</h2>

·         Use empty paragraphs with breaks to space pictures evenly about and around their titles and text: <a href=3D”picture link.html”><img src=3D”picture”></a> / <p><br /><br /></= p> / <h2>Name Of Organization</h2><p>te= xt about organization</p>

E. Future Additions

There may be a need for added new internal pages or el= ements to the site as WAF grows. Pos= sible additions include:

·         Pages for individual events

·         A search engine

·         An e-mail list and registration page

·         A blog or message board

II. Design Coding

The original WAF website was designed using CSS code i= n a Microsoft NotePad 2007 document. One style shee= t is applied to all pages.

To access WAF= Website CSS code:

1. Double-click “WAFwebsite” folder

2. Select “stylesheet.css” or stylesheet=

3. Right-click stylesheet.css

4. Select “Open With”

5. Click “NotePad”

= ;

= ;

= ;

III. CSS/HTML Coding Tips

·         Different sections, images, paragraphs etc., are catego= rized by the “class” tag

<p> vs <p class=3D”special”>

<img src=3D”picture.= jpg”> vs. <i= mg src=3D”picture.jgp” class=3D”title”>

·         HTML <p class=3D“special”> is CSS “p.special” =

It codes/formats the ope= ning paragraph on the homepage

·         Each image is titled, except for the red WAF logo that appears in the sidebar on every page. The WAF logo image is “img” All titled images are “img.title= ” and

·         The navigation bar (HTML Code =3D <ul id=3D”list-nav”>) is formatt= ed in CSS with the = ul#list-nav tag

ul#list-nav tag formats the e= ntire bar

ul#list-nav li formats the text in the bar

ul#list-nav li a formats the various link properties

= ;

·         HTML <div class=3D“footer”> is CSS “div.footer”

It contains only the con= tact information text for Seton Hill University

The SHU logo is coded se= parate from all other elements; it is not part of div.footer<= /span>, div.about, or <body>

Each “div.footer” is preceded by an empty paragraph: <p><br /><b= r /><br />

IV. Troubleshooting

The original WAF website was made with help of these references:

·         Crea= ting a Web Page with HTML by Elizabeth Castro (basic HTLM and CSS coding)

·         Writ= ing for the Web 3.0 by Crawford Kilian (web wri= ting and web design basics)

·         Don&= #8217;t Make me Think: A Common Sense Approach to Web Usability by Steve Krug (= web design and web usability)

·         Van SEO Design CSS blog, http://www.vanseode= sign.com/blog/category/css/ (navigation bar and design HTML/CSS coding)