Introduction to Multimedia

Lecture #5Setting up a

Website

Instructors:

Mohamed MAGANGA

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 )

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

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

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

Okay!

Got my Domain Name

Internet Service Provider

… Website Design

Web Sites – Bad Design Features

Bad or annoying features

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/

Good features

Web Site – Effective Design

1.

2.

3.

4.

Okay!

Got my Domain Name

Internet Service Provider

… Start Designing your Website because……

Could you be the next 17 yr old millionaire?

(it is too late!)

http://youtube.com/watch?v=So9doa8vuNw http://www.whateverlife.com

Website Creation Cycle

Stages of creating

a Website

Upload

START

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

INFO GATHERING

Ask questions and listenMeeting with Client

Learn as much as you can about their:

Stage 1 – Planning & Design

Stage 1 – Planning & Design

Planning &Design

Stages of creating

a Website

Publish

Maintenance

More Questions to consider

Decide on: Colors Fonts Background Links: top, side

TIP:________________

Stage 1:Planning & Design

Stage 1: – Planning & Design

Example 1: Simple layout

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

Stage 1:

– Planning & Design

www.iwil.ca/index.html

www.iwil.ca/community.html

Planning & Designhttp://www.iwil.caExample 2: Complex

layout

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

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

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

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

Stage 4 – Maintenance

Maintenance

Stages of creating

a Website

Publish

Who is the maintainer - training

Update frequently/ how often

Documentation Backup your information

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

Web Site – Effective Design

Stages of creating

a Website

Implementation

Publish

Maintenance

Designing Your website IMPLEMENTATION STAGE

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

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

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>

Most HTML tagsstart tag and end tag

1) <tr> xxxx </tr>

2) <body>

xxxxxxx

</body>

3) <table> xxx </table>

Rules: