Webpage Design and Maintenance

1. Webpage Design and Maintenance CTC Summer Workshop June 20, 2012 9:00a.m. – 4:00p.m. Presented by: Janet Cannon

2. Agenda • Workshop 9-4 • Breaks 10:30 & 2:30 • Lunch 12-1 • Introductions • What do you know? What you want to know? • Overview of Internet • Vocabulary • Why need web pages? • What makes a good/ bad web page? • Planning a web page • Create web pages • Practice • Questions, evaluations

3. Introductions and Discussion • Please tell us • Who you are • Why you are taking this workshop • What you already know about web pages • What you would like to know/do with web pages

4. What is the Internet? The Internet is a network of networks. The Internet not only includes physical components such as computers, cables, wires, etc., but also the software that allows computers to talk to each other. Think of one building with hundreds of computers linked together. Then imagine hundreds of those kinds of buildings all linked together. Multiply that by several hundred countries. That is the Internet.

5. Who invented the Internet? The first computers were very limited in their processing power. The Internet was invented so the U.S. Department of Defense could take advantage of the processing power created when computers were linked.

6. What is the WWW? An Internet application (computer program) built “on top” of the Internet so it can identify and access content throughout the entire Internet. The WWW helps format all pages so that all (most) people can view content no matter what hardware or software they have.

7. What is a Web Page/Web Site? • A web site is the location of a set of web pages • A web page includes multimedia objects on the Internet viewable by a web browser • It is also thought of as a digital file written in HTML (a computer language) that tells the computer where to put the text and graphics, what colors and fonts to use, and other formatting information.

8. Why do I need a Web Page? • The Internet is inexpensive way to present instruction and information • Web pages can be interactive, increasing learning by supporting interactions between: • learner and content • learner and instructor • learners

9. Why do I need a Web Page? • Computers can provide information in a variety of ways (video, audio, games, etc.) to support multiple learning modes. • More business and educational institutions are requiring their employees to design and maintain web pages.

10. What does the address mean? www.mywebsite.com/folder/ specificdocument.html • “www” means “World Wide Web.” Not all web pages are on the www. • “mywebsite.com” is the domain name. A domain is the name of the server (master computer) for that network.

11. What does the address mean? www.mywebsite.com/folder/ specificdocument.html • “folder” is the folder where the files for “mywebsite” are located. You don’t have to have a dedicated folder, but it makes working on your web page much easier.

12. What does the address mean? www.mywebsite.com/folder/ specificdocument.html • “specificdocument.html” is the name of the page. • “/” is the division between sections • “html” means the type of document

13. Some Internet/Web Page terms • HTML - “Hypertext Markup Language” the computer code used to create web pages • Web browser – allows you to access the Internet. Most popular web browsers: Internet Explorer, Mozilla Firefox, Opera (PCs), Safari (Macs) • Hyperlink – Picture or text that when clicked sends user to another web page

14. Some Internet/Web Page terms • URL - “Uniform Resource Locator” Each web page has a unique URL so it can be found using a search engine. • A search engine is a program written to help you find information. Popular search engines are Google, Ask, Yahoo, MSN Search, Bing. Some web browsers and web pages have embedded search engines.

15. What Can I put on a Web Page? • Text–a custom/unusual font may not work • Graphics (pictures) – GIF and PNG are usually preferred, but JPEG will also work. Use small pictures with low resolutions (50KB or less) so pages will load quickly. (GB biggest, MB middle, KB smallest). • Animated graphics –on-line, in MS Office Clipart, and can be created with a number of on-line resources. Can slow down loading speed.

16. What Can I put on a Web Page? • Audio - .au, .wav, .aif, .wmf; Don’t overwhelm your audience with too many sounds or sounds that play for a long time. • Video - .mov, .avi, .mpg; Video slows page load time. Some sites offer a text-only version for people who have dial-up Internet. • Interactive games – usually written in Java or Flash (computer programming languages).

17. What Can I put on a Web Page? • PDF – Portable Document Format –text, graphics, or a combination and look just like the printed document. Using this format assures that the user will see exactly what the creator intended. • Buttons, hit counters, search engines, banners, animated cursors, and much more.

18. What makes a good/bad website? • Type in each of the following websites (you only have to type the domain and the extension!) • Discuss what you like, what you don’t like • Note the different layouts • Too many colors? Not enough colors? • Does it fit the intended audience? • Is it easy to navigate/find information? • Write down ideas you would like to use

19. Likes/Dislikes? • http://google.com • http://www.bing.com/ • http://www.differencebetween.net/ • http://radiorivendell.com/ • http://pbskids.org/ • http://coolmath4kids.com/ • http://www.msnbc.msn.com/ • http://www.timeanddate.com/worldclock/

20. Likes/Dislikes? • http://www.powermusic.com/ • http://caperoadrunners.org/ • http://www.sports-reference.com/ • http://www.seriouseats.com/ • http://www.etsy.com/ • http://www.ebay.com/ • http://www.capetigers.com (go to individual teacher sites)

21. What makes a good page? • Easy to read fonts (no more than 3 types) • Easy, predictable, consistent navigation (make sure each page can get HOME) • A few colors, but not too many • A few pictures, but not too many • Info that doesn’t need to change or information that’s ALWAYS up-to-date • Information arranged for your target audience

22. What makes a good page? • Each page takes up about one page of a computer screen • Most important information at the top and/or to the left • Original content so the user needs to/wants to come to your page • Reflection of your personality WITHOUT giving too much personal information • Well-organized

23. Planning your webpages • What is the purpose of my website? • Who is my intended audience? • What pages/sections do I want? • How much time will I have to maintain dated material? • Do I want a color scheme? What is it? • Do I want graphics? What kind? • Is there a source I can use for content? (time saver!) • What other websites do I want to link to?

24. SharePoint – Navigation • Title bar – file name, program name • Menu bar – words on second line • Button bar – buttons under words • Tabs – main web folder, open files

25. SharePoint – Getting Help • Search bar in upper right corner OR click F1 • Type keywords only – any extra words will make the search less accurate • You may have to look at more than one article– Often you’ll find articles on topics that don’t answer your question. Keep searching!

26. SharePoint – Creating a page • Open SharePoint • Click File, New, Page, then click OK. • MAKE A TABLE – Click Table, Insert Table, (adjust # of rows/columns if you want), click OK. You can add rows and columns later • Use double-sided arrows to adjust row and column size. Note: Some cells will grow/shrink based on contents.

27. SharePoint – Creating a page • Modifying table –buttons OR right click • Insert/delete rows/columns • Merge/split rows/columns/cells • Align to top/center/bottom • Distribute rows/columns evenly, AutoFit • Fill cells • Embedded tables and borders

28. SharePoint – Creating a page • Adding text • Title/text – Click a cell. Type. • Word Art – Not available in SharePoint, HOWEVER, you can make one in Word or PowerPoint and copy/paste it over. Once you copy it, you cannot change the text (it’s treated like a picture). Word Art

29. SharePoint – Creating a page • Adding a graphic • Clip Art – Click a cell. Click Insert, Picture, Clip Art. Type a key word. Double-click picture. Adjust the pic size w/white square (btm right corner) • Internet – Go to Internet page, right-click copy on pic, go back to SP, right-click paste in cell where you want it

30. SharePoint – Creating a page • Modifying graphics • Alignment – Click on picture, click on desired alignment button. • Crop – Click on picture, click the crop button in the picture toolbar. Use the black corner/side bars to cut out what you don’t want.

31. SharePoint – Creating a page IMPORTANT! • Add navigation links • Hyperlink to pages on your site– First, create the new page. Then, on the first page, select the text, click Hyperlink, choose the page name and okay. • Hyperlink to other web pages– Highlight the text you want to hyperlink, click Hyperlink, copy and paste (or type) web address, click okay.

32. SharePoint – Creating a page • Tips • Save frequently! – This is a good practice for any type of computer work. • Click F12 to Preview – If you haven’t saved, it will prompt you to do so. Then you’ll see exactly how your page will look on the Internet.

33. SharePoint – Next steps • Create more pages and hyperlink them to your home page. • You can also use your first page as a template so all your pages will look the same. All you have to do is remember to RE-SAVE it as a different name each time. • Don’t hesitate to start over! It’ll be faster most times. Sometimes the program has quirks that just won’t fix after the fact.

34. SharePoint – Other Commands • Line up on a grid (View, Ruler & Grid) • Hide/display additional toolbars (View, Toolbars) • Bookmarks – internal hyperlinks (Insert, Bookmarks or CTRL + G) • Interactive buttons, symbols, and web components (Insert, choose one) • Frames – pre-made layouts (File, New, Frame Pages) • Templates – pre-made web pages (File, New, choose one)

35. Editing Published Web Page • This is specifically for CGPS employees.

36. Resources Free graphic and picture editors: • http://www.gimp.org/ • http://www.freeserifsoftware.com/ • http://www.irfanview.com/ • http://picasa.google.com/ Free clipart and graphics: • http://office.microsoft.com/en-us/images/ • http://www.1clipart.com/ • http://www.bing.com/images • http://www.clipartcastle.com/download/Home/Clip-Art-Collection/?f=K9iW823zb&a=7378&adid=267699090 • http://www.gifanimations.com/ • http://www.thefreesite.com/Free_Graphics/

37. Resources Free sounds: • http://www.findsounds.com/ • http://www.webplaces.com/html/sounds.htm • http://www.templateswise.com • http://soundbible.com/ • http://freesounds.info/ • http://www.audiomicro.com/ • Janet Cannon (specific questions) cannonj@capetigers.com

38. FrontPage Tutorials • http://www.outfront.net/tutorials_02/getting_started/beginner_tutorials.htm • http://www.fgcu.edu/support/office2000/frontpage/ • http://www.electricteacher.com/tutorial2.htm • http://office.microsoft.com/en-us/training/CR006183270.aspx • (OR, use Bing/Google to search for your own)

39. For the rest of the afternoon • Plan, edit, and/or create your web page. You can start from scratch or use a template. • Save your work to a flash drive or e-mail it to yourself if you aren’t already set up through CGPS server. • Check out the tutorials and share with me something you learned from them.

40. Reflection on the class • Pick out 3 or 4 things that are most useful to you. Use/review those concepts within a few days. • If you have any suggestions on how to make the class better, please let me know. • Please fill out an evaluation before you leave. • I hope you learned a great deal and had at least a little fun doing it. Thank you for coming!