Introduction to Multimedia Lecture #9 Intro to Video Instructors: Mohamed MAGANGA
Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA
description
Transcript of Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA
![Page 1: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/1.jpg)
Introduction to Multimedia
Lecture #5Setting up a
Website
Instructors:
Mohamed MAGANGA
![Page 2: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/2.jpg)
Todays Agenda
TODAY:
1. Announcements
2. Web Design
3. Website Creation stages
4. Working with DreamweaverTips and Things to Know (a lot of info valuable for Assignment #3 and For the EXAM )
![Page 3: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/3.jpg)
Let’s ReviewLet’s Review
3
1.1. Give me 3 examples of TLD?Give me 3 examples of TLD?
2.2. Are the following valid IP addresses?Are the following valid IP addresses?
1.1. 1.1.1.11.1.1.1
2.2. 125.256.3.3125.256.3.3
3.3. 1.1.11.1.1
3.3. www.uwo.cawww.uwo.ca is a domain name, true or false? is a domain name, true or false?
4.4. The following: The following: www.we_love_cs1033.cawww.we_love_cs1033.ca is a valid is a valid domain name, true or false?domain name, true or false?
5.5. We-love-cs1033a.com?We-love-cs1033a.com?
http://www.youtube.com/watch?v=1nNDzhHBv1k
![Page 4: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/4.jpg)
AnnouncementsAssignment #1:
Your mark is posted on webct.
Assignment #2: - 10%
• Due Friday, February 26, 2009
• Must be done in Photoshop
Assignment #3: - 15%
• Due Friday, March 19, 2010 3:00 pm
• Must be done in Photoshop
Exam scheduled for:
• Wednesday April 14 2:00 PM Location: Not known at this time
• Must have everything uploaded and VIEWABLE (will deduct marks)
Dreamweaver MX, MX2004, 8, CS3, CS4
are okay
Note: CS4 has some differences
![Page 5: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/5.jpg)
Lecture Topics
LAST WEEK: Intro to Web Design
• How do I get started?• Domain Names• Web Hosting
THIS LECTURE:
Web Design
• Design Criteria• Bad Designs• Effective Designs• Website Creation stages
• Tips and Things to Know when Working with Dreamweaver
Continue
![Page 6: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/6.jpg)
Okay!
Got my Domain Name
Internet Service Provider
… Website Design
![Page 7: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/7.jpg)
Web Sites – Bad Design Features
Bad or annoying features
![Page 8: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/8.jpg)
Discussion Question
So let’s look at these designs -- Like or dislike?
http://www.avanttravel.com www.cusli.org
http://www.gizishotel-santorini.com/ http://www.case.edu/ http://www.thetravelstore.ca/ http://www.brescia.uwo.ca http://www.ospe.on.ca/ http://www.home-watch.ca/
![Page 9: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/9.jpg)
Good features
Web Site – Effective Design
![Page 10: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/10.jpg)
1.
2.
3.
4.
![Page 11: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/11.jpg)
Okay!
Got my Domain Name
Internet Service Provider
… Start Designing your Website because……
![Page 12: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/12.jpg)
Could you be the next 17 yr old millionaire?
(it is too late!)
http://youtube.com/watch?v=So9doa8vuNw http://www.whateverlife.com
![Page 13: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/13.jpg)
Website Creation Cycle
Stages of creating
a Website
Upload
START
![Page 14: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/14.jpg)
Meeting with Client
Be prepared
Do your homework
Stage 1 – Planning & Design
Planning &Design
Stages of creating
a Website
Publish
Maintenance
1
2
3
4
![Page 15: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/15.jpg)
INFO GATHERING
Ask questions and listenMeeting with Client
Learn as much as you can about their:
Stage 1 – Planning & Design
![Page 16: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/16.jpg)
Stage 1 – Planning & Design
Planning &Design
Stages of creating
a Website
Publish
Maintenance
More Questions to consider
![Page 17: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/17.jpg)
Decide on: Colors Fonts Background Links: top, side
TIP:________________
Stage 1:Planning & Design
![Page 18: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/18.jpg)
Stage 1: – Planning & Design
Example 1: Simple layout
![Page 19: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/19.jpg)
Homepage or Splash page
index.html
learn.html events.html programs.html community.html
Layout design on paper
Meet with client to review
Stage 1: – Planning & Design
Example 1: Simple layout
Do they point to the same file??
www.iwil.ca/index.html www.iwil.ca
![Page 20: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/20.jpg)
Stage 1:
– Planning & Design
www.iwil.ca/index.html
www.iwil.ca/community.html
![Page 21: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/21.jpg)
Planning & Designhttp://www.iwil.caExample 2: Complex
layout
![Page 22: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/22.jpg)
Homepage or Splash page
index.html
Learn events programs communitylearn events programs community
index.html
vision.html
leadership.html
index.html
sophia.html
conferences.html
media.html
Planning & Design
index.html
leadership.html
research.html
academic.html
camp.html
index.html
vision.html
leadership.html
Do they point to the same file??
www.iwil.ca/learn
www.iwil.ca/learn/index.html
index.html
Example 2: Complex layout
![Page 23: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/23.jpg)
Ex. 3 File Organization Complex
homepageDo they point to the same file??
www.iwil.ca/learn
www.iwil.ca/learn/index.html
www.iwil.ca/index.html
Planning & Design
![Page 24: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/24.jpg)
Stage 2: - Implementation
Stages of creating
a Website
Implementation
Publish
Maintenance
Who will the maintainer be?
Straight HTML programming vs Web page software ?
Complexity
KISS principle
Effective Design techniques – CRAP
Test in Netscape & Internet Explorer, FireFox etc
Documentation
![Page 25: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/25.jpg)
Stage 3 – Publish
Web space
Use FTP software (File Transfer Protocol)
Upload once web site is ready – more testing
BACKUP YOUR FILES!!!Publish
Stages of creating
a Website
Maintenance
![Page 26: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/26.jpg)
Stage 4 – Maintenance
Maintenance
Stages of creating
a Website
Publish
Who is the maintainer - training
Update frequently/ how often
Documentation Backup your information
![Page 27: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/27.jpg)
How often should a website be updated?
Be careful!! tendency for search engine indexes to lose interest in sites that appear to be neglected
A website that will be updated rarely
- allow for this in design
Refreshing a site from time to time even if there is no actual news to post.
Stage 4 – Maintenance
![Page 28: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/28.jpg)
Web Site – Effective Design
![Page 29: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/29.jpg)
Stages of creating
a Website
Implementation
Publish
Maintenance
Designing Your website IMPLEMENTATION STAGE
![Page 30: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/30.jpg)
Designing for the Web: What do I need to know?
Web Page HTML - Computer instructions used to
create web pages
Web Site Collection of web pages created
and maintained by an organization/individual
Web Server a computer that stores web
pages and makes them available for people to see on the Internet
Web Browser
program that allows you to view the Internet Ie.(PC) Internet Explorer, Mozilla Firefox, Netscape, (Mac) Safari, Camino
![Page 31: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/31.jpg)
Intro to the Web: How Do I make a Webpage?
Web Page HTML - ____________________________ Computer instructions read by browser Any computer can read HTML files –cross platform Choose to ____________ itself - Use Notepad Use of ________________ ie. Dreamweaver, FrontPage etc
Extracted from: The Non-Designer’s Web book by Robin Williams and John Tollett
![Page 32: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/32.jpg)
Extracted from: The Non-Designer’s Web book by Robin Williams and John Tollett
Build with web
authoring software
WYSIWYG
Tag Syntax
<tr> xxxx </tr>
<body>
xxxxxxx
</body>
<table> xxx</table>
![Page 33: Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA](https://reader036.fdocuments.net/reader036/viewer/2022062803/568146ff550346895db43c66/html5/thumbnails/33.jpg)
Most HTML tagsstart tag and end tag
1) <tr> xxxx </tr>
2) <body>
xxxxxxx
</body>
3) <table> xxx </table>
Rules: