1. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 1 Web Design Fundamentals

2. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 2

3. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 3

4. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 4

5. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 5 Planning your Site Setting your goal – purpose, mission, reason for existence. – does the world need another website? – what does YOURS have to offer? – define your target audience. Organizing information –Plan your web pages. –Create or gather content (text usually). –Insert multimedia and links. Choose a webpage creation tool – appropriate for your skill level. (HTML vs. a visual tool).

6. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 6 Create a Storyboard Navigation and usability is paramount when it comes to web design. Work out a directory structure that shadows your story board. Make navigation easy for potential surfers … from any point they may enter your site.

7. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 7

8. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 8

9. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 9

10. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 10 Excellent software package for creating storyboards, for brainstorming or creating concept maps.

11. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 11 What is HTML? HTML stands for HyperText Markup Language. HTML is the language of the World Wide Web (WWW). Many webpages that you see are written with HTML. With HTML, you have the ability to bring together text, pictures, sound and links.

12. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 12 Tools of the Trade Raw HTML editing (coding) HTML Visual Editors (Popular) –Microsoft Front Page –Adobe GoLive –Macromedia Dreamweaver HTML Editors (FREE) –Netscape Composer (netscape.com) –Arachnophilia, 1 st Page, etc. (non-visual) –Go to tucows.com to find many more (shareware, adware, freeware)

13. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 13

14. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 14 Writing in source (HTML) is known for giving more control to the author, however, is often not feasible for the less-experienced user.

15. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 15 Important Points HTML documents are not “complete” in themselves (such as in the case of a MS Word document). HTML files rely on relatively linked data files!!! –Be careful to never move or remove a “data” file from it’s original location. –ALSO, all files in your web must be located in a publicly accessible folder (usually a “website” folder or often a “public_html” folder.

16. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 16

17. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 17

18. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 18 Important Points File management, file naming and organizational skills are vitally important when creating websites. –Do not use spaces or “special” characters in file names (stick to numbers and letters). –Consciously give a meaningful name every file in your web. –Example: Instead of naming a file pageone.html, you might call it introduction.htm.

19. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 19 Adding Graphic Content Scour the web –use Google, Altavista, Ditto or other search engines that provide image searching. (Be aware of copyright). Create your own –from scanning, digital cameras. –Use web-based graphic generators. –Use image editors (Adobe Photoshop, Microsoft Photodraw, the Gimp (free at gimp.org) to edit or create images.

20. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 20 Google and other search engines have a specialized image search.

21. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 21

22. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 22 Link, Link, Link Special caution: –Don’t create just another “hotlist”. –DO incorporate original and useful content. Types of links: –Relative (links to pages on your web). –Absolute (often go to other web pages). –Anchored (link further down the same page). –Email (link directly to an email address). –Action (will trigger events – media or download)

23. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 23 Understanding the URL URL: Uniform Resource Locator Example: –http//:www.uregina.ca/courosa/hobbies/golf.htm The “default” may be named: “index.htm(l)”, OR “default.htm(l)”.. Either.htm or.html extensions can be used for webpage filenames. DomainSubfoldersFile

24. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 24 Where does my webpage live? Your webpage must be hosted on a web server. You can setup your own server, or (more commonly), have your page hosted by a web-hosting service. SaskTel, Access Communications, Shaw Communications, etc. often provide free web space with an Internet account. There are also free ad-driven alternatives (e.g., Geocities, Angelfire, etc.) Often, you will need to use FTP software (file transfer protocol) to upload your webpage.

25. A Free sample background from www.powerpointbackgrounds.com © 2001 By Default!Slide 25 Easier Alternatives Free (ad-driven) services such as Geocites or Angelfire provide free space AND both offer simple “web-creation wizards” to create your webpage. Although these are easier, they restrict originality. Web logs (aka Blogs) have recently become quite popular. These easy-to-use services allow for the posting of online diaries or “logs”. People are finding many other uses. (See Blogger.com or Moveabletype.org. They are free to use.