19
Introduction to Websites 1
| Date post: | 30-Dec-2015 |
| Category: |
Documents |
| Upload: | calvine-jerom |
| View: | 43 times |
| Download: | 1 times |
1
Introductionto Websites
2
Purpose of Website• Digital version of a physical representation
– Libraries– Online Communities
• Social Networks• Forums
• Online retail presence– Officeworks– Harvey Norman– Ebay
• News• Online Journals / Blogs• EntertainmentAll ways of delivering information, content, and services
3
Analysis of Existing Websites
• http://www.slashdot.org• http://www.theage.com.au• http://www.lifehacker.com.au/• ADD OWN SCHOOLS WEBSITE
4
Key Features of a Website
• Navigation Bar• Content area• Header• Footer• Sidebars• Advertising space (?)
5
Designing a Website
6
Deconstructing Existing Websites
• Useful to determine trending design elements– Helps users in navigation: Why?
• Helps to get an idea for the ‘feel’ of the site, and how it functions
• Easier to make changes and play with variations (add / remove elements)
7
Add screenshot of schools website here,Use to create a rough ‘wireframe’ / mock-up to demonstrate how to deconstruct (and ultimate, construct) a website.
8
Class ActivityDeconstructing a Website
9
[OPTIONAL] insert some screen shots of developmental wireframes / mock-ups and the final version as comparison of real-world projects / sites / software
10
Overview of HTML Structure
• HTML is a scripting language– HyperText Markup Language
• The script is ‘parsed’ (interpreted) by the browser
• Made up of ‘tags’ (known as elements) let the browser know what to do with the content– There is always an opening tag and a
closing tag
11
Lets the browser know what type of document it is
12
Opening / Closing of the <html> declaration.This lets the browser know what type of script it is reading.
13
This is where important information about the document goes.Note: document specific resources (such as links to JavaScript files or CSS files are also placed inside the <head>
14
This lets the browser know how the page is ‘encoded’
15
The title of the page • shown at the top of the browser window or
tab
16
This is where all the content goes
17
Welcome to Dreamweaver
18
19
