260 likes | 396 Views
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?
E N D
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? • 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.
What are the priorities for the site? • Information • Recreation • Public relations • Co-operation • A “virtual library”
Who is the audience? • Students • Staff • Parents • Children • Teachers • Community members • Movie fans • The world at large
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
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?
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
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
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
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
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.
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
CSS benefits? • Separate form from content • Less code means faster downloads • Less maintenance • Standard compliance
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
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
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>
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
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
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
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>
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>
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.