Website proposal tag review
1 / 25

Fundamentals of Interactive Design - PowerPoint PPT Presentation

  • Uploaded on

Website Proposal Tag Review. Fundamentals of Interactive Design. Website Proposal & Purpose. Mission, audience, perception. Vision and Purpose. Your website: What is the purpose of your website?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Fundamentals of Interactive Design' - carlow

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Website proposal tag review

Website Proposal

Tag Review

Fundamentals of Interactive Design

Website proposal purpose
Website Proposal & Purpose

Mission, audience, perception

Vision and purpose
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.

W hat are the priorities for the site
What are the priorities for the site?

  • Information

  • Recreation

  • Public relations

  • Co-operation

  • A “virtual library”

Who is the audience
Who is the audience?

  • Students

  • Staff

  • Parents

  • Children

  • Teachers

  • Community members

  • Movie fans

  • The world at large

Content w hat are they looking for
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


  • 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?

Structural plan

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.








Structural Plan


  • 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
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
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
HTML Links

  • External “anchors” – links to other pages

    • <a href=“”>WDIM</a>

    • <a href=“”>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.


  • 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
CSS benefits?

  • Separate form from content

  • Less code means faster downloads

  • Less maintenance

  • Standard compliance

Css benefits1
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
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.”

Styles in line
Styles in line


<title>my page</title>

<style type="text/css">

p {

font-family: Arial,Helvetica,sans-serif;

color: rgb(51, 51, 255);




Cascade styles
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);



Applies to all h1, h2

Applies to just h1

Applies to all paragraphs


h1,h2 {

font-family: sans-serif;

color: grey;



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
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
Classes in CSS

Have different paragraphs behave differently

h1 {

border-bottom: 1px solid black;


p { color: blue

} { color: green;

} { 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
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
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.