1. With Microsoft FrontPage 2003 Publishing a Web Page

2. Agenda Parts of a Web Page Getting Started Technology Issues Constraints Design & Layout FrontPage 2003

3. Parts of a Web Page Text Images and/or Graphics Hyperlinks Layout managed by Tables Line Breaks Frames Layers Lists Style Sheets Backgrounds, Themes Forms Databases Buttons Animation, Video & Sound Interactive programming – Java, Javascript, XML, Applets, Plug-ins, etc.

4. Web Page Example Colorado State University-Pueblo

5. Before you start, ORGANIZE Purpose/goals Market Content Updating Technology Constraints Design & layout

6. Purpose/Goals Why are you creating the web site? What are your goals in creating your site? Personal? Professional? Both?

7. Market Who is the audience? Visitor: “What’s the hook?” “What’s in this for me?” What are their needs?

8. Content What do you want to tell them? What do you want them to do?

9. Updating How will you keep your site current?

10. Technology Issues Monitor window size standard Download time File size

11. Technology Issues Monitor window size standard – 800 x 600 pixels at 72 - 100 ppi – 800 x 600 pixels = 780 x 460 actual Alternative window sizes 640 x 480 pixels @ 72 ppi 640 x 480 800 x 600 „ 1024 x 768„

12. Technology Issues Pixel = a “dot” of color Resolution= pixels per inch (ppi) Pixels can vary in size, depending on resolution

13. Technology Issues Example With resolution = 100 ppi 640 pixels x 480 pixels at 100 ppi = 6.4 " x 4.8" image or page size = Image or page size  resolution

14. Low Resolution, big pixels, small image size, quick loading High Resolution, small pixels, large image size, slow loading Technology Issues

15. Monitor window size standard Download time – connection speeds File size - <100 Kb, should load in 20 seconds

16. Technology Issues ConnectionSpeedSeconds Modem56 Kb/sec15 DSL*256 Kb/sec+< 1 Satellite700 Kb/sec< 1 Cable Modem1.5 Mb/sec< 1 T1 (CSU-Pueblo) 1.6 Mb/sec< 1 Speed vs. Download Time (Bandwidth) File Size 100 Kb * Digital Subscriber Line

17. Technology Issues Monitor window size standard Download time File size - <100 kb, should load in 20 seconds

18. Technology Issues Background < 10 Kb Images & graphics 5-25 Kb Text, etc. 35-75 Kb ___________________ Maximum 50-100 Kb

19. Technology Issues Graphics.gif files –256 colors Images.jpg files – Millions of colors

20. Technology Issues Safe Text Font Families Arial Geneva Helvetica Times New Roman Verdana

21. Technology Issues HTML Coding – NOT!!! Colorado State University-Pueblo Chemistry Department Home Page

23. Constraints CSU-Pueblo Guidelines and Web Aids http://www.colostate- pueblo.edu/its/WebDev/index.asp Include your name and date, contact info Copyright considerations ADA access: The Web Accessibility Initiative A-Prompt

24. Constraints Talent Release Form Required for use of people photos File with ITS

25. Design & Layout Site Presentation – Visual and Audible Check out similar others Check out ugly sites, what NOT to do http://www.websitesthatsuck.com/ Develop Flowchart and Storyboard

26. Design & Layout Tips The Web Style Guide Online! by Patrick J. Lynch, Sarah Horton

27. Design & Layout Tips White space! Don’t cram information. Avoid long scrolls Informative titles Clear, concise, correct spelling & grammar Uniform navigation throughout Any page entry Test on different browsers

28. CSU-Pueblo

29. CSU-Pueblo Logo & Link

30. Design & Layout Gather visuals Organize text Identify links Plan a consistent look fonts, graphics, background Color http://www.pantone.com/allaboutcolor/allaboutcolor.asp?Category=Research http://www.colormatters.com

31. Microsoft FrontPage 2003 And now, on to Publishing a Web Page With