120 likes | 175 Vues
Website Overview. Design Style. Clean Contrasting Colours, Primarily Orange and Black with white background. Use of CSS to allow for customisable design and removal of design element completely leading to ‘text-only’ version.
E N D
Design Style Clean Contrasting Colours, Primarily Orange and Black with white background. Use of CSS to allow for customisable design and removal of design element completely leading to ‘text-only’ version. Addition of Sitemap, News Page, and structured layout affords increased usability.
Comparison of Versions Current Style New Style - Structured
Graphics vs Accessibility Sitemap in Graphics Sitemap in Text Only
Accessibility • CSS can be switched off completely • Uses <h1> tag for page heading • Uses <h2> tag for page description • Uses <h3> tag for section description • <h1>,<h2>,<h3> only appear during no CSS to textually indicate section • All graphics and colours are specified in optional CSS file • Multiple CSS files could be used to give different look and feels – e.g. Seasonal
Base Structure Home Page CSS OFF/ON MTLT Content Delivery Devices Research Sitemap News Terminology Resources Links Contacts
Technical Structure • Default.asp – Server Side Index • \css • \css\basic.css • \css\style1.css • \html – content pages • \images – site images • \assets – images used with permission • \resources – downloadable PDF’s
<DIV> General Layout • Oulogo • Wrap • Intro • Menu1 • Content • LeftNav • Maincontent • Footer
Usage: Page Layout • Use <h4> for section headings • Use <h5> for further sub-headings
Page Layout Heading Bar Top Navigation Side Navigation Section Header <H4> List using <hlink> Page Description Content from HTML file
Adding new content • Store HTML file in \html • Place entry in Select Case in default.asp • Fill in values • strHTML = filename of html file • strTag = page header • strPurpose = section header • strURLsuffix = page where ‘up’ returns to
Creating a ‘HTML’ page • No <html> tags • No <head> section • No <body> tags • Keep all paragraphs between <p></p> • Use <h4> and <h5> for headings • For lists use <ul><li> format • For URL lists use <ul class=“hlink”> • To include a URL within the site the keyword #URL# • E.g. the href=“default.asp?pg=devices” • Becomes #URL#&pg=devices” • Link pages (a href =“etc”) can have cues attached to them: • <a class=“url” href=“”> gives an external URL cue (also UL lists) • <a class=“inlink” href=“”> gives an internal URL cue (also UL lists) • <a class=“pdf” href=“”> gives an Acrobat PDF cue