Website Redesign Knowledge Transfer Document Academic Personnel Services - California State University, Fresno

Transcription

1 Website Design by Rbin Buttn Phne: FAX: Dcument Date: April 22, 2007 Website Redesign Knwledge Transfer Dcument Academic Persnnel Services - Califrnia State University, Fresn This dcument is nt intended t be used as a web editr sftware manual r as a replacement t ncampus classes fr web editrs r internet fundamentals. It is a guide t explain the develpment and assist in the maintenance f this specific website. Fr mre infrmatin regarding the develpment f this website and fr supprt and training, cnsult the University Web Standard Supprt Site at this link. Server File Structure and Naming Cnventins Only ne dcument shuld reside in the rt directry: index.shtml, the hme page. The Academic Persnnel Services (APS) primary navigatin links are represented by rt directry flders; namely, faculty, and frms_plicies. Hme page left clumn links vacancy, calendars, new, and site_map als reside in rt directry flders. (screensht 1). NOTE: Web pages and web page flders ther than the abve are temprary files serving as redirects frm the prir website. They will eventually be deleted. Screensht 1 Page 1 Knwledge Transfer Dcument Academic Persnnel Services

2 The ther dcuments and flders in the rt directry related t this website as f the date f this dcument are: dcuments cntains external dcuments (pdf, Wrd, ther) linked t web pages within the website. Any dcuments upladed frm Cntribute will autmatically be placed within the dcuments flder (as established thrugh the administratr settings). NOTE: T place dcuments within the dcuments sub-flders, Dreamweaver shuld be used. See Screensht 2 Screensht 2 Images Cntains all images inserted within the website. Images relating t the graphical interface reside within the website sub-flder. Any images upladed frm Cntribute will autmatically be placed within the images flder (as established thrugh the administratr settings). Page 2 Knwledge Transfer Dcument Academic Persnnel Services

3 Prject cntains the dcuments used in the develpment f the website (including this dcument). They will prve useful t future web develpers that may becme invlved in mdifying r expanding this website. They include useful planning dcuments that are prvided as part f the Web Standard Tlkit. The fllwing flders within the rt directry shuld nly be accessed and mdified by a skilled web designer/develper: css cntains the design style sheets that determine the lk and feel f the website. They include the fixed-width980 styles.css (fr the verall website design styles); the fixedwidth980 styles_hme.css (design fr hme page nly); the 1B_template styles fr pages that cntain wide data tables; and cntribute980_styles.css (cntaining styles that are available t cntent editrs within the Cntribute drp-dwn menu). Library This flder cntains assets (cmmn areas) that appear in the website. The fter cntent fr each sectin f the website is cntained in a library item fr ease f maintenance. T edit the fter area in a sectin f the website, the Library item assigned t that sectin must be edited within Dreamweaver. Sme f these files can be designated as assets within Cntribute and used as needed. When mdified, all pages assciated with a library item must be re-upladed t the server. Mre infrmatin and a detailed explanatin f each Library item is in the maintenance sectin f this dcument. kasjs Cntains the javascript file necessary fr the breadcrumbs navigatin. Breadcrumbs navigatin dcumentatin is part f the Web Standards Tlkit. Includes Cntains website SSI (server side includes). If includes require editing, they must be mdified within Dreamweaver. Currently they are: cmpensatin_calculatr.ssi cmpensatin calculatr link. glbal_links.ssi resurce links that appear in the right clumn in several pages. quick_links.ssi the jump links in the hme page. Templates All templates assciated with the website web pages. Every web page in the website is created using ne f the templates in this flder. Templates are named t make them easily identifiable. They include the.dwt dcument extensin. (See Screensht 3, next page) Page 3 Knwledge Transfer Dcument Academic Persnnel Services

4 Screensht 3. Nte templates are named by primary navigatin link, and then by sub-sectin if needed. Naming Cnventins The flder names within the rt directry cincide with the link titles in the tp (primary) navigatin bar f the Cllege website. Example: there is an abut flder fr the abut tp bar link. Template names begin with the primary sectin t make them easy t identify. The includes (ssi), style sheets (css), prject dcuments, and many f the website image naming cnventins are frm the web standard specificatin. It is recmmended that image and dcument names shuld be fllwed by a mnth and year (such as 4_06 r 4_2006) t make it easy t identify and remve utdated files in the future. Images shuld als cntain a width size. 280px designates that the images can be used within the cntent area; 198px r 180px designates placement in the right r left clumns. Naming cnventins n future images and dcuments shuld als be as meaningful as pssible t make it easy t identify them in the future. If yu wish t grup like images and/r dcuments, name them accrdingly. Example: any department dcuments fr RTP culd start with dept_07_(name f dcument)_(file extensin). When naming files, be sure t use underscre between wrds rather than a space bar. Fr Develpers: Mdifying Templates and Style Sheets Templates This website was designed using Adbe Dreamweaver, with the intentin f maintaining it using the cntent editing slutin Cntribute. Dreamweaver, with the check in/check ut feature enabled, can als be used. The apprpriate Dreamweaver Template (file extensin.dwt) shuld be assciated with any new web pages that are created. This website was nt develped t be maintained r revised using ther web develpment sftware such as Frnt Page, as ther web editrs d nt recgnize the Template markup. Page 4 Knwledge Transfer Dcument Academic Persnnel Services

5 Template revisins must ccur within Dreamweaver, with the check in-check ut functinality enabled. This ensures that edits will nt be verridden. All pages assciated with the templates shuld als be checked ut prir t Template revisin. Fllw prcedures fr mdifying templates and inserting page links as utlined in the University Web Standard Training Prgram and the dcumentatin prvided as part f the Web Standard Tlkit. Avid inserting inline styles within the template cde. Cntribute settings shuld prevent cntent editrs frm inserting inline styles. All website styles shuld be determined by the linked style sheets. If a new style is needed, add it t the apprpriate design style sheet, making a decisin as t whether it shuld be available t cntent editrs. If s, add it t the Cntribute style sheet (cntribute980_styles.css). It is very imprtant that the cding between the <head> </head> tag be left as is and nt edited r remved when editing Templates. There are links t style sheets which, if remved, will destry the layut and lk f the website. Editable regins have been carefully determined, and any regin that s editable is nt affected by a change t the template made in thse areas. Hwever, changes t nneditable regins will affect every page linked t that template. Style Sheets At sme pint in the future, it may be desirable t mdify the lk and feel f the website. A web designer/develper can bring this abut thrugh mdificatin f the design style sheets. Backgrund graphics, backgrund and brder clrs, text heading clrs, fnt styles, and link styles can all be changed by mdifying the style sheets. The banner image that appears within the banner div can als be replaced. By keeping the same naming cnventin fr the replacement banner image (banner.jpg) uplading the redesigned banner will initiate the change, and n ther update wrk wuld be needed. The nly exceptin wuld be a different file extensin (such as a Flash file). Breadcrumb Navigatin and Page On Styles The Kasweaver Breadcrumb dcumentatin is available as part f the Web Standard Tlkit. The Page On Styles (persistent page indicatrs) were develped using style sheet markup t ensure cmpliance. This is explained in the Web Standard specificatin as part f the Tlkit, and is als available at the fllwing link: (surce: Stephanie Sullivan, The Nemesis Prject) Cntribute Administratin This website was develped t allw multiple cntent editrs t perfrm maintenance tasks using Cntribute. A Cntribute Administratr was assigned t this website. Subsequently, cntent editr rles were defined by the Administratr which can be mdified as needed. Cntent editrs ther than the Administratr may have restricted access t specific flders rather than the entire website. Cnsult the Cntribute Administratr fr this website regarding questins pertaining t cntent editing and editr rles. It can als be edited using Dreamweaver; the current versin at the time f develpment, Dreamweaver 8, shuld be used. The rles defined fr APS culd be as fllws: Cllege website administratr: May maintain all pages within the website. Respnsible fr establishing rles and distributing cnnectin keys. Will als be able t edit pages using Dreamweaver. Page 5 Knwledge Transfer Dcument Academic Persnnel Services

6 Publisher (Cllege): May maintain all pages, r restricted t specific flders. Multiple publisher rles can be established t suit the ffice needs. Publishers can edit and publish page edits. New publisher rles shuld be set up by functin, nt by the editr s name. If needed: Writer rles may als be defined. Writers are nt allwed t publish; their edits must be apprved by a publisher r administratr as defined in Cntribute settings. Website Maintenance Naming Cnventins Templates used t create new pages are easily identifiable by name. Whenever pssible, new image and dcument names shuld be fllwed by a mnth and year (such as 4_06 r 4_2006) t make it easy t identify and remve utdated files in the future. Images may als cntain a width size. Fr images currently available in the website images flder, 280px in the name designates that the images can be used within the cntent area; 198px r 180px in the name designates placement in the right r left clumns. Naming cnventins n future images and dcuments shuld als be as meaningful as pssible t make it easy t identify them in the future. If yu wish t grup like images and/r dcuments, name them accrdingly. Example: any department dcuments in 2007 fr RTP culd start with dept_07_(name f dcument).(file extensin) When naming files, be sure t use underscre between wrds rather than a space bar. Each page has editable regins defined by the templates assigned t each page. In the example, the editable regins are page title, cntent (cntent area), the left clumn, and the tw right clumn areas. (see screensht 4, next page) Page 6 Knwledge Transfer Dcument Academic Persnnel Services

7 Screensht 4. Nte the editable regins highlighted in green. Editing the Online APS Calendar Within bth Dreamweaver and Cntribute, the drp-dwn menu expands t make the cntent area beneath each link visible. This makes it easy t edit the cntent as needed (See screensht 5, next page). Page 7 Knwledge Transfer Dcument Academic Persnnel Services

8 Screensht 5. Nte that the cntent area beneath each linked heading cntains an editable table. It is advisable t place links t utside websites in the secnd right bar editable regin and links t pages within the website in the left bar editable regin. Javascript rllver image menu systems may nt be inserted within these regins. Assets (residing in the Library flder) are made available t cntent editrs thrugh the settings defined by the Cntribute Administratr. Assets are created t allw repetitive tasks t be prefrmatted. Cntent editrs shuld request additinal assets if they are needed. They are: Accessible_table: use as a starting pint fr inserting a data table in the cntent area. quick_links: These cmmnly used jump links can be inserted in the right clumn f any page. Applying Styles t pages Fnt styles are applied within Cntribute using the drp-dwn menu in the tp left bar. Chices are the heading levels and varius fnt styles and clrs. There are als styles fr indenting and centering text. Yur develper can add additinal styles as needed. Blding and italicizing text can be accmplished using the buttns in the tp bar. Page 8 Knwledge Transfer Dcument Academic Persnnel Services

9 Outside Dcuments The preferred frmat fr read-nly dcuments as f the date f this dcument is pdf, created using the latest versin f Adbe Acrbat (8). This is fr accessibility reasns. Als as f the date f this dcument, the University was in the prcess f develping an accessibility implementatin plan which culd supersede the instructins that fllw. When creating surce dcuments using Wrd r Excel, keep them as simple as pssible and use semantic markup (Assign heading levels such as H1 rather than blding text t make it stand ut). Als avid using the space bar instead f bullets r numbering. Access the frmatting style bar by ging t Frmat - Styles and Frmatting. Insert tables, bjects, r images in yur surce dcuments nly if they are necessary. This will simplify the creatin f accessible pdf s. Newer versins f Micrsft Office will cntinue t streamline the creatin f accessible dcuments. This pdf dcument prvided by Adbe Acrbat prvides an verview, and the prcedure fr checking pdf s fr accessibility. Included with Adbe Acrbat 8 is Adbe LiveCycle, a handy frm designer tl. The advantage t using Adbe LiveCycle is that it is easy t make accessible pdf s and in the lng run, saves time in the creatin f accessible pdf frm dcuments. Placing r Relcating Dcuments t Sub-Flders Because this website cntains s many nline dcumentatin, sub-flders within the dcument flder were created fr rganizatinal purpses. Unfrtunately, Cntribute will nt allw the user t lcate a new dcument int a specific sub-flder. Dcuments can be placed within the dcuments flder, and relcated using Dreamweaver. Or, Dreamweaver can be used fr mdificatins. An alternative methd wuld be t relcate the sub-flder dcuments t the apprpriate web page flder (Example: vacancy flder wuld als cntain all vacancy annuncements). Recmmended Maintenance Schedule As Needed: Insert current events, news, annuncements. Add vacancies t the apprpriate pages. Update plicies. Make changes in staff and cntact infrmatin. Review Weekly: All f the abve, t ensure updates were made. Mnthly: Cnsider if any vacancies shuld be remved (yu may decide upn a different review timeline) Semester: Review every page in the website. Lk fr dated r incrrect cntent and make updates. Yearly: Ask a develper, r smene knwledgeable in Dreamweaver, t delete unwanted dcuments r images frm the server. This is when the meaningful file names becme handy. Als, run a brken link check thrugh Dreamweaver and repair any brken links. Cnsider whether pages r website sectins shuld be added r deleted, depending n cntent needs. Redirects frm Prir Websites and New Server Accunts As f the date f this dcument, the prir APS website, and page redirects, are n the web server. It is recmmended that these files be deleted smetime during Summer Page 9 Knwledge Transfer Dcument Academic Persnnel Services

10 In the Future Redesigning Frequently-Used (and Cmplex) Persnnel Frms Eventually, all pdf frms will need t cmply with accessibility requirements as required by the CSU Web Accessibility Initiative. As time permits, the surce dcuments fr the nline frms shuld be edited r redesigned. The Part-Time Cntract Status Reprts will have t eventually be redesigned t meet accessibility guidelines. Office 2007 may include features t make this prcess easier. Changing the Graphical Interface The lk f the website can be mdified by inserting new banners (either a graphic r Flash image). Type styles, link styles and clrs, heading type sizes and clrs, backgrund clrs, and brders can be changed by mdifying the style sheet in the css flder. Changes t the css style sheet fixed-width_styles.css will affect all pages in the website. Changes shuld be made by a web develper that has attended all seven curses that are part f the Clean Up the Web. Page 10 Knwledge Transfer Dcument Academic Persnnel Services