Webpage Design and Maintenance

CTC Summer WorkshopJune 20, 2012

9:00a.m. – 4:00p.m.Presented by: Janet Cannon

AgendaOWorkshop 9-4OBreaks 10:30 &

2:30 OLunch 12-1O IntroductionsOWhat do you

know? What you want to know?

OOverview of Internet

OVocabulary

OWhy need web pages?

OWhat makes a good/ bad web page?

OPlanning a web page

OCreate web pagesOPracticeOQuestions,

evaluations

Introductions and Discussion

OPlease tell us OWho you are OWhy you are taking this workshopOWhat you already know about

web pages OWhat you would like to know/do

with web pages

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.

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.

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.

What is a Web Page/Web Site?a.A web site is the location of a set of web

pagesb.A web page includes multimedia objects on

the Internet viewable by a web browser c.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.

Why do I need a Web Page?

a.The Internet is inexpensive way to present instruction and information

b.Web pages can be interactive, increasing learning by supporting interactions between:

i. learner and contentii.learner and instructoriii.learners

Why do I need a Web Page?

c. Computers can provide information in a variety of ways (video, audio, games, etc.) to support multiple learning modes.

d. More business and educational institutions are requiring their employees to design and maintain web pages.

What does the address mean?www.mywebsite.com/folder/

specificdocument.html

O“www” means “World Wide Web.” Not all web pages are on the www.

O“mywebsite.com” is the domain name. A domain is the name of the server (master computer) for that network.

What does the address mean?www.mywebsite.com/folder/

specificdocument.html

O“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.

What does the address mean?www.mywebsite.com/folder/

specificdocument.html

O“specificdocument.html” is the name of the page.

O“/” is the division between sections

O“html” means the type of document

Some Internet/Web Page termsOHTML - “Hypertext Markup Language”

the computer code used to create web pages

OWeb browser – allows you to access the Internet. Most popular web browsers: Internet Explorer, Mozilla Firefox, Opera (PCs), Safari (Macs)

OHyperlink – Picture or text that when clicked sends user to another web page

Some Internet/Web Page terms

OURL - “Uniform Resource Locator” Each web page has a unique URL so it can be found using a search engine.

OA 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.

What Can I put on a Web Page?OText–a custom/unusual font may not workOGraphics (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).

O Animated graphics –on-line, in MS Office Clipart, and can be created with a number of on-line resources. Can slow down loading speed.

What Can I put on a Web Page?OAudio - .au, .wav, .aif, .wmf; Don’t

overwhelm your audience with too many sounds or sounds that play for a long time.

OVideo - .mov, .avi, .mpg; Video slows page load time. Some sites offer a text-only version for people who have dial-up Internet.

OInteractive games – usually written in Java or Flash (computer programming languages).

What Can I put on a Web Page?

OPDF – 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.

OButtons, hit counters, search engines, banners, animated cursors, and much more.

What makes a good/bad website?

OType in each of the following websites (you only have to type the domain and the extension!)

ODiscuss what you like, what you don’t likeONote the different layoutsOToo many colors? Not enough colors?ODoes it fit the intended audience?O Is it easy to navigate/find information?OWrite down ideas you would like to use

Likes/Dislikes?

Ohttp://google.comOhttp://www.bing.com/Ohttp://www.differencebetween.net/Ohttp://radiorivendell.com/Ohttp://pbskids.org/Ohttp://coolmath4kids.com/Ohttp://www.msnbc.msn.com/Ohttp://www.timeanddate.com/worldcloc

k/

Likes/Dislikes?Ohttp://www.powermusic.com/Ohttp://caperoadrunners.org/Ohttp://www.sports-reference.com/Ohttp://www.seriouseats.com/Ohttp://www.etsy.com/Ohttp://www.ebay.com/Ohttp://www.capetigers.com

(go to individual teacher sites)

What makes a good page?

OEasy to read fonts (no more than 3 types)

OEasy, predictable, consistent navigation (make sure each page can get HOME)

OA few colors, but not too manyOA few pictures, but not too manyO Info that doesn’t need to change or

information that’s ALWAYS up-to-date O Information arranged for your target

audience

What makes a good page?

OEach page takes up about one page of a computer screen

OMost important information at the top and/or to the left

OOriginal content so the user needs to/wants to come to your page

OReflection of your personality WITHOUT giving too much personal information

O Well-organized

Planning your webpages

O What is the purpose of my website?O Who is my intended audience?O What pages/sections do I want?O How much time will I have to maintain

dated material?O Do I want a color scheme? What is it?O Do I want graphics? What kind?O Is there a source I can use for content?

(time saver!)O What other websites do I want to link to?

SharePoint – NavigationOTitle bar – file name, program name

OMenu bar – words on second lineOButton bar – buttons under words

OTabs – main web folder, open files

SharePoint – Getting HelpOSearch bar in upperright corner OR click F1OType keywords only – any extra

words will make the search less accurate

OYou may have to look at more than one article– Often you’ll find articles on topics that don’t answer your question. Keep searching!

SharePoint – Creating a page

OOpen SharePointOClick File, New, Page, then click OK.OMAKE A TABLE – Click Table, Insert Table,

(adjust # of rows/columns if you want), click OK. You can add rows and columns later

OUse double-sided arrows to adjust row and column size. Note: Some cells will grow/shrink based on contents.

SharePoint – Creating a page

OModifying table –buttons OR right clickOInsert/delete rows/columnsOMerge/split rows/columns/cellsOAlign to top/center/bottomODistribute rows/columns evenly,

AutoFitOFill cellsOEmbedded tables and borders

SharePoint – Creating a page

OAdding textOTitle/text – Click a cell. Type. OWord 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

SharePoint – Creating a page

OAdding a graphicOClip 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)

OInternet – Go to Internet page, right-click copy on pic, go back to SP, right-click paste in cell where you want it

SharePoint – Creating a page

OModifying graphicsOAlignment – Click on picture,

click on desired alignment button.OCrop – 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.

SharePoint – Creating a page

OAdd navigation linksOHyperlink 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.

OHyperlink to other web pages– Highlight the text you want to hyperlink, click Hyperlink, copy and paste

(or type) web address, click okay.

IMPORTANT!

SharePoint – Creating a pageOTips

OSave frequently! – This is a good practice for any type of computer work.

OClick 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.

SharePoint – Next steps

OCreate more pages and hyperlink them to your home page.

OYou 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.

ODon’t hesitate to start over! It’ll be faster most times. Sometimes the program has quirks that just won’t fix after the fact.

SharePoint – Other CommandsO Line up on a grid (View, Ruler & Grid)O Hide/display additional toolbars (View,

Toolbars)O Bookmarks – internal hyperlinks (Insert,

Bookmarks or CTRL + G)O Interactive buttons, symbols, and web

components (Insert, choose one)O Frames – pre-made layouts (File, New, Frame

Pages)O Templates – pre-made web pages (File, New,

choose one)

Editing Published Web PageOThis is specifically for CGPS employees.

ResourcesFree graphic and picture editors:O http://www.gimp.org/O http://www.freeserifsoftware.com/O http://www.irfanview.com/O http://picasa.google.com/Free clipart and graphics:O http://office.microsoft.com/en-us/images/O http://www.1clipart.com/O http://www.bing.com/imagesO http

://www.clipartcastle.com/download/Home/Clip-Art-Collection/?f=K9iW823zb&a=7378&adid=267699090

O http://www.gifanimations.com/O http://www.thefreesite.com/Free_Graphics/

ResourcesFree sounds:O http://www.findsounds.com/O http://www.webplaces.com/html/sounds.h

tmO http://www.templateswise.comO http://soundbible.com/O http://freesounds.info/O http://www.audiomicro.com/

O Janet Cannon (specific questions) cannonj@capetigers.com

FrontPage TutorialsOhttp://www.outfront.net/tutorials_02/gett

ing_started/beginner_tutorials.htmOhttp://www.fgcu.edu/support/office2000/

frontpage/Ohttp://www.electricteacher.com/tutorial2

.htmOhttp://

office.microsoft.com/en-us/training/CR006183270.aspx

O(OR, use Bing/Google to search for your own)

For the rest of the afternoon

OPlan, edit, and/or create your web page. You can start from scratch or use a template.

OSave your work to a flash drive or e-mail it to yourself if you aren’t already set up through CGPS server.

OCheck out the tutorials and share with me something you learned from them.

Reflection on the classOPick out 3 or 4 things that are most useful

to you. Use/review those concepts within a few days.

O If you have any suggestions on how to make the class better, please let me know.

OPlease fill out an evaluation before you leave.

O I hope you learned a great deal and had at least a little fun doing it. Thank you for coming!