1. HTML Authoring

2. Design  A good website starts its life in the design stage Layout, Color, Sound, Content, Functionality and Maintainability aspects are formed in the design stage.  Designing a website involves: Look and Feel of the site, languages & server resources, programming & data structures involved, the time and programming abilities needed, end user ease, & site maintenance.

3. Good Design v s Bad Design  What makes a good design? Plan the web site structure Plan the navigation setup Plan the page layout, considering how and where to use color and sound Plan your content The 5 w’s: Who, What, When, Where, Why

4. Good Design v s Bad Design  Examples of good web design: http://www.geom.unimelb.edu.au/ http://www.theage.com.au/ http://www.virgintravelstore.com http://www.ge.ucl.ac.uk

5. Good Design v s Bad Design  What makes a bad design? Poor Planning! The 10 Sins of web design http://www.peckwebs.com/sins.htm  Examples of bad web design: http://www.ratz.com/featuresbad.html

6. Building a Website  Set up the web site folder structure first: Example: public_html/index.html-my home page public_html/assignments/-my assignments public_html/images/-my pictures public_html/include/-my style sheet public_html/multimedia/-my multimedia public_html/templates/-my templates

7. Building a Website  Create a template file  Use include files for common content  Frames? OK for managing simple websites though beware – frames can be annoying to work with when you have a large website

8. Building a Website  Other tips: Be consistent E.g. 1. Use a style sheet rather than remember what font style you want to use E.g. 2. If your website uses frames, use the same frame structure throughout E.g. 3. Make comments to yourself in HTML code if it helps:   Remember: Planning and Consistency are the key to a well designed website!

9. Web Development Tools  What kind of tools can be used? Text editors: E.g.. Notepad, WordPad, crimson editor Specific Software: Microsoft Word Netscape Composer Microsoft FrontPage Macromedia Dreamweaver

10. HTML Tags  The first tag in every HTML file Indicates that the content of the file is in HTML All text and HTML commands should fall within the beginning and ending tags A Web Page A simple web page

11. HTML Tags  Reserved section for only a few tags (e.g.. ) A Web Page A simple web page  Each HTML page needs a title to indicate what the page describes  Used by browser’s bookmarks and by other programs that catalog Web pages

12. HTML Tags  The remainder of the page, including all text, graphics etc. is enclosed within the tag A Web Page A simple web page

13. HTML Tags  Page Formatting Background color Background Image

14. HTML Tags  Font Formatting  Alignment ALIGN=CENTER ALIGN=LEFT ALIGN=RIGHT A simple web page

15. HTML Tags  Hyperlinks Link or anchor tag A simple web page Page 2

16. HTML Tags  Hyperlinks Relative Pathname HREF=“file.htm”HREF=“assign2.ppt” HREF=“files/file.htm” HREF=“../file.htm” Absolute Pathname HREF=“/user1/joiana/file.htm” HREF=“http://www.geom.unimelb.edu.au”

17. HTML Tags  Hyperlinks Mail to A simple web page Email me

18. HTML Tags  Tables Holds the table contents and an optional caption Lecturer Subject Cliff Ogleby 451-113

19. HTML Tags  Frames Frameset document This site requires frames.

20. HTML Tags  Images Inline format: GIF, JPG External format: TIFF, BMP, PNG ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM E.g.. An image as a link

21. Web Graphics  Animated GIFs

22. HTML Tags  Inserting Multimedia Flash files Shockwave files Plugins E.g.. A flash animation object:

23. Useful Links http://www.goodpractices.com http://www.w3.org/MarkUp http://www.htmlhelp.com/reference http://www.coolhomepages.com http://www.med.yale.edu/caim/manual/contents.html http://hotwired.lycos.com/webmonkey/design http://www.wpdfd.com/resources/Layout.htm http://webhelp.org http://www.htmlgoodies.com

24. A Web Page A simple web page body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } Advanced HTML  Cascading Style Sheets E.g.. styles.css sets the style for the body tag Web page - index.html Style Sheet – styles.css

25. Advanced HTML  Image Maps

26. Advanced HTML  Layers

27. Javascript  A programming language for adding functionality and features to web pages.  Javascript is embedded into HTML E.g.. Rollover buttons

28. Java  Object oriented programming language  Designed with the intent: Write a program once and run it on many different platforms  Java programs are compiled into bytecode  Applets

29. Flash  Allows vector animation  Is extremely compact  Has streaming capabilities  Used to create entire websites  Used as an advertising tool animations & games

30. Flash  Examples:  http://www.airforce.com/index_fr.htm http://www.airforce.com/index_fr.htm  http://www.lookandfeel.com/ http://www.lookandfeel.com/  http://www.flasharcade.com/ http://www.flasharcade.com/  http://www.flasharcade.com/game.cgi?bubbletrouble http://www.flasharcade.com/game.cgi?bubbletrouble

31. Flash  Principles of flash animation: Animation sequence based on a timeline Vector objects created in Flash Library of objects of which there can be many instances.