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
pages
b.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 terms
OHTML - “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 work
OGraphics (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 – Navigation
OTitle bar – file name, program name
OMenu bar – words on second line
OButton 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 page
OTipsOSave 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 Commands
O 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) [email protected]
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!