1 / 25

Fundamentals of Interactive Design

Website Proposal Tag Review. Fundamentals of Interactive Design. http://www.elizabethcastro.com/html6ed/examples/. Website Proposal & Purpose. Mission, audience, perception. Vision and Purpose. Your website: What is the purpose of your website?

carlow
Download Presentation

Fundamentals of Interactive Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Proposal Tag Review Fundamentals of Interactive Design http://www.elizabethcastro.com/html6ed/examples/

  2. Website Proposal & Purpose Mission, audience, perception

  3. Vision and Purpose • Your website: • What is the purpose of your website? • Why should anyone come to your site? What makes it special? • Who is the audience or user of your website? • What is the perception/tone of your website? • A website is always under construction, is flexible but you should have an aim and a goal. • Start small, dream big.

  4. What are the priorities for the site? • Information • Recreation • Public relations • Co-operation • A “virtual library”

  5. Who is the audience? • Students • Staff • Parents • Children • Teachers • Community members • Movie fans • The world at large

  6. Content: What are they looking for? • Information about a library • User or staff information for a business • Reference and study guides • Information about movies • Good games to play • Information about an artist

  7. Structure • How will you organize the website? • Figure out how many pages your website will have • How will the page link to each other • What will the pages be named?

  8. What are the main areas of your site? These will need to be subdivided. How? What makes sense? What will your users be looking for? At first you may not have anything in each section. You will need to have a plan to accommodate further growth. Information Contacts Services Home Weblinks Catalogue Programmes Structural Plan

  9. Speed • Users need to find what they want quickly. • Pages need to load in seconds. • The priority is for each page to load quickly and • provide information as easily as possible

  10. Some Style Guidelines • Design for generic browsers • And test on every version you wish to support • Test pages at least in both FireFox and IE • Provide appropriate “access points” • User needs and navigation strategies differ • Navigation menu • Indicate who is responsible for the content • Helps readers assess authority • Contact page

  11. HTML Tag Review

  12. HTML Tags Review • Tag Description • <html>Defines an HTML document • <head>Defines the document’s header • <title>Defines the document’s title • <body>Defines the document's body • <h1> to <h6>Defines header 1 to header 6 • <p>Defines a paragraph • <br />Inserts a single line break • <hr />Defines a horizontal rule • <!-->Defines a comment • <a>Defines an anchor or a link to another document • <img />Defines an image

  13. HTML Links • External “anchors” – links to other pages • <a href=“http://wdim.aiwdepts.com”>WDIM</a> • <a href=“http://www.aii.edu#students”>Aii Students</a> • To create an anchor point • <a name=“anchor"></a> • <a name=“top"></a> • To move to an anchor point • <a href="#anchor">Link text</a> • <a href="#artmaterials">art materials</a> • Anchor is a point in the document, not a piece of text • Anchor points have a “#” before the anchor name • Typically used on long pages to navigate back to the top of the page. • Also used to navigate to sections of a page.

  14. Images • Insert images • <imgsrc=“URL” width=“50” height=“100” alt=“image description” title=“caption” /> • Make a hyperlink of an image • <a href=“page3.html”><imgsrc=“URL” width=“50” height=“100” alt=“image description” title=“caption” /></a> • Insert images from different locations • Adjust images to different sizes • Background image

  15. CSS

  16. CSS benefits? • Separate form from content • Less code means faster downloads • Less maintenance • Standard compliance

  17. CSS Benefits… • More control over layout, fonts, colours, backgrounds, and other typographical effects; • Greater compatibility across browsers and platforms; and • Less code, smaller pages, and faster downloads

  18. Separate form and structure “Cascading style sheets enable us to get more control the right way: by separating the part that defines structure from the part that defines form.” http://hotwired.lycos.com/webmonkey/98/15/index0a_page2.html?tw=authoring

  19. Styles in line <head> <title>my page</title> <style type="text/css"> p { font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 255); } </style> </head>

  20. Cascade styles <style type="text/css"> h1,h2 { font-family: sans-serif; color: grey; } h1 { border-bottom: 1px solid black; } p { font-family: Arial,Helvetica,sans-serif; color: rgb(51, 51, 255); } </style> Applies to all h1, h2 Applies to just h1 Applies to all paragraphs

  21. Terminology h1,h2 { font-family: sans-serif; color: grey; } Selectors The style applied to the elements This rule specifies how the style of elements h1 and h2 is applied

  22. Linking style sheets to multiple pages <link rel="stylesheet" media="screen" type="text/css" href="styles/global.css" /> Link element ‘links in’ external information ‘rel’ attribute specifies a relationship between the files, as we’re linking to a style sheet, we set the value to ‘stylesheet’ Type of info is ‘text/css’ href specifies where the file is located relative to this file. Media specifies how a document is to be presented to different media, print, braille, handheld, etc

  23. Classes in CSS Have different paragraphs behave differently h1 { border-bottom: 1px solid black; } p { color: blue } p.green { color: green; } p.red { color: red; } Different classes of paragraphs All ‘normal’ <p> elements will be blue text, while others will differ per the class. i.e. <p>Sample</p> <p class=“green”>Sample</p> <p class=“red”>Sample</p>

  24. But what if … We want an h1 to also be ‘green’? h1 { border-bottom: 1px solid black; } p { color: blue } .green { color: green; } .red { color: red; } Different classes of rules for all selectors All ‘normal’ <h1> elements will be black text, while others will differ per the class. i.e. <h1 class=“green”>Sample</h1> <h1 class=“red”>Sample</h1>

  25. Ids in CSS • CSS ID vs. CSS class: • A CSS id style can only be applied to one element in your document. CSS ids start with a “#” followed by the name of the element the style will be applied to: • element#elementId { property: value; } • p#left { background-color: green; } • <p id=“green”>Sample test</p> • A unique id name for each element • A CSS class can be applied to multiple elements in your document.CSS classes start with a “.” followed by a name for the class.

More Related