1. Building Your Web Page

2. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22

3. Building Your Web Page Intro's -- &Your Goals Your Name Type of Page you want to make Web Page experience Intro to Page we will work from www.ticon.net/~cyberian/webauthoring.htm

4. ► URL (importance of naming your files)  Files and Folders ► Bookmarking (importance of naming page your page) ► HTML ► WYSIWYG – authoring tool ► Links  Internal  External ► Frames Web Design Jargon

5. ► FTP ► GIF (Graphics Interchange Format) – most used ---clip art ► JPEG (Joint Photographic Experts Group) Allows for more colors --photos ► …More as we go along.......... ► Please feel free to stop me! ► Find more jargon here: http://www.grantasticdesigns.com/glossary. html http://www.grantasticdesigns.com/glossary. html http://www.grantasticdesigns.com/glossary. html Web Design Jargon a

6. Design Content ► Pinpoint needs of people visiting your site ► Decide purpose and goals of your site ► Determine audience's age and skill level ► Develop Good content--- keep in mind… ► Why do I want viewers to use my site?

7. Develop Structure ► Storyboard to organize your site ► Prioritize and categorize information ► Define links between categories

8. Design Content ► Get started with Storyboarding

9. Create Design ► Develop look and feel with color and font ► Is it a part of a larger site??? ► Design using simplicity, contrast and consistent alignment ► Be consistent when you position navigation links

10. Four Design Principles C. A. R. P. ► Contrast ► Alignment ► Repetition ► Proximity

11. The Four Design Principles C.A.R.P. ► Contrast  If not the same, make them very different ► Alignment  All elements should have a visual connection ► Repetition  Repeat color, shape, texture, space ► Proximity  Group related items

12. Create Design C. =Contrast ► Guides your eyes around the page ► Creates a hierarchy of information ► Allow you to skim information more easily to pick out needed information ► Pertains to text type, graphics and colors used

13. BAD Example Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult? Is there a better choice of font color?

14. GOOD Example Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult? Is there a better choice of font color Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult? Is there a better choice of font color?

15. Contrast ► The principle of contrast states that if two items are not exactly the same, then make them really different. ► Be BOLD !

16. Contrast ► Large type and small type (size) ► Combinations of fonts (Italics)  Robin Williams book, Webpage Design, is excellent ► Color  Robin Williams book, Webpage Design, is excellent

17. Examples of Contrast

18. Create Design A. = Alignment ► Nothing should be placed on the page arbitrarily ► Every item should have a visual connection with something else on the page ► Make the site easy to the eye

19. Alignment – What To Avoid ► Avoid using more than one text alignment on a page.  Don’t center some text and right align other text. ► Break the center alignment habit.  Formal / sedate / dull. ► Remember, people are use to reading from the left to the right

20. Create Design R. = Repetition ► Throughout the project, you repeat certain elements consistently. If there are multiple pages, each page should have a similar look and feel. ► Allows for consistency ► Unifies all parts of a design and multiple pages

21. Create Design R. = Repetition ► The principle of repetition states that you repeat some aspect of the design throughout the entire piece. ► The repeated item could be a font, line, particular bullet, color, image, or format.

22. Create Design P. = Proximity ► Proximity refers to the relationship that items develop when they are close together. ► Two items that are close together appear to belong to each other. ► There is a need to group related items together.

23. Create Design P. = Proximity ► Groups related items together ► Makes pages look smaller ► Increases organization ► Helps viewers skim your page & make your site easier to read

24. ► Look at other sites on the Net to get ideas ► Break up info if possible ► Use “Alt.” tags on graphics ► Check accuracy of your info. ► Check spelling and grammar ► Maintain site  Currency  Links General Web Site Do’s

25. ► Overuse graphics (saves download time) ► Use underline in text ► Use too much animation or annoying background music ► Use copyright material General Web Site Don’ts

26. Web Design in a Nutshell

29. Building Your Web Page

30. Let’s get started! Storyboard Practice with Netscape Composer