Introduction to Multimedia Lecture #5 Setting up a Website Instructors: Mohamed MAGANGA

1. A Vision of Students Today Introduction to MultimediaLecture #5Setting up a Website Instructors: Mohamed MAGANGA

2. Todays Agenda TODAY: • Announcements • Web Design • Website Creation stages • Working with DreamweaverTips and Things to Know (a lot of info valuable for Assignment #3 and For the EXAM )

3. Let’s Review 3 • Give me 3 examples of TLD? • Are the following valid IP addresses? • 1.1.1.1 • 125.256.3.3 • 1.1.1 • www.uwo.ca is a domain name, true or false? • The following: www.we_love_cs1033.ca is a valid domain name, true or false? • We-love-cs1033a.com? http://www.youtube.com/watch?v=1nNDzhHBv1k

4. Announcements Assignment #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

5. 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

6. Okay! Got my Domain Name Internet Service Provider … Website Design

7. Web Sites – Bad Design Features Bad or annoying features

8. 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/

9. Web Site – Effective Design • Good features

11. Okay! Got my Domain Name Internet Service Provider … Start Designing your Websitebecause……

12. Could you be the next 17 yr old millionaire?(it is too late!) • http://youtube.com/watch?v=So9doa8vuNw • http://www.whateverlife.com

13. Website Creation Cycle START Stages of creating a Website Upload

14. Stage 1 – Planning & Design Planning &Design Meeting with Client Be prepared Do your homework 1 Stages of creating a Website 2 3 Publish Maintenance 4

15. Stage 1 – Planning & Design INFO GATHERING Ask questions and listen Meeting with Client Learn as much as you can about their:

16. Stage 1 – Planning & Design • More Questions to consider Planning &Design Stages of creating a Website Publish Maintenance

17. Stage 1:Planning & Design Decide on: • Colors • Fonts • Background • Links: top, side TIP: ________________

18. Stage 1: –Planning & Design Example 1: Simple layout

19. Stage 1: –Planning & Design Do they point to the same file?? www.iwil.ca/index.htmlwww.iwil.ca Example 1: Simple layout • Layout design on paper • Meet with client to review index.html Homepage or Splash page learn.html events.html programs.html community.html

20. Stage 1: –Planning & Design www.iwil.ca/community.html www.iwil.ca/index.html

21. Planning & Design Example 2: Complex layout http://www.iwil.ca

22. Planning & Design Do they point to the same file?? www.iwil.ca/learn www.iwil.ca/learn/index.html Example 2: Complex layout index.html Homepage or Splash page index.html community learn events programs Learn events programs community index.html leadership.html research.html academic.html camp.html index.html sophia.html conferences.html media.html index.html vision.html leadership.html index.html vision.html leadership.html

23. Planning & Design Ex. 3 File Organization Complex Do they point to the same file?? www.iwil.ca/learn www.iwil.ca/learn/index.html www.iwil.ca/index.html homepage

24. Stage 2: - Implementation • 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 Implementation Stages of creating a Website Publish Maintenance

25. Stage 3 – Publish • Web space • Use FTP software (File Transfer Protocol) • Upload once web site is ready – more testing BACKUP YOUR FILES!!! Stages of creating a Website Publish Maintenance

26. Stage 4 – Maintenance • Who is the maintainer - training • Update frequently/ how often • Documentation • Backup your information Stages of creating a Website Publish Maintenance

27. Stage 4 – Maintenance How often should a website be updated? • A website that will be updated rarely - allow for this in design • Be careful!! tendency for search engine indexes to lose interest in sites that appear to be neglected • Refreshing a site from time to time even if there is no actual news to post.

28. Web Site – Effective Design

29. Designing Your websiteIMPLEMENTATION STAGE Implementation Stages of creating a Website Publish Maintenance

30. 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 pagescreated and maintained by an organization/individual Web Server • a computer that stores web pagesand makes them availablefor 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

31. 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

32. Build with web authoring software WYSIWYG Tag Syntax <tr> xxxx </tr> <body> xxxxxxx </body> <table> xxx</table> Extracted from: The Non-Designer’s Web book by Robin Williams and John Tollett

33. Most HTML tagsstart tag and end tag • <tr> xxxx </tr> • <body> xxxxxxx </body> • <table> xxx </table> Rules: