Welcome To Web Page Welcome To Web Page DesignDesign
Mr. UrsoneMr. Ursone
Accessing the WebAccessing the Web
Web Page:Web Page: where you see text, where you see text, graphics, sounds, etc.graphics, sounds, etc.
Uniform Resource Locator (URL):Uniform Resource Locator (URL): Web address. Ex. Web address. Ex. http://www.yahoo.comhttp://www.yahoo.com
Web Browser:Web Browser: Helps you navigate Helps you navigate through the internet. Ex. Internet through the internet. Ex. Internet Explore & Mozilla Firefox.Explore & Mozilla Firefox.
Hyperlink:Hyperlink: a button, when clicked, a button, when clicked, that takes you to another place on that takes you to another place on the webthe web
Accessing the WebAccessing the Web
WebsiteWebsite: Group of web pages that : Group of web pages that are linked togetherare linked together
Home page or index page:Home page or index page: The The “main” page of the website. “main” page of the website. Describes the purpose and content.Describes the purpose and content.
Types of Websites Types of Websites pg.6pg.6
Portal Web Site:Portal Web Site: Provides many services Provides many services from one site. Ex. Lycos - provides news, from one site. Ex. Lycos - provides news, weather, email, games, search engine, etc.weather, email, games, search engine, etc.
News Web Site:News Web Site: News articles relating to News articles relating to current events. Ex. Cbs.comcurrent events. Ex. Cbs.com
Informational Web Site:Informational Web Site: Contains facts, Contains facts, such as research and statistics. Ex. Usa.govsuch as research and statistics. Ex. Usa.gov
Business/marketing site:Business/marketing site: Promotes or Promotes or sells products or services. Ex. Amazon.comsells products or services. Ex. Amazon.com
Educational Web Sites:Educational Web Sites: Formal and Formal and informal teaching and learning. Ex. informal teaching and learning. Ex. Temple.eduTemple.edu
Types of WebsitesTypes of Websites
Entertainment Web Site:Entertainment Web Site: interactive and engaging. Contains interactive and engaging. Contains music, video, sports, games, etc. Ex. music, video, sports, games, etc. Ex. Freearcade.comFreearcade.com
Advocacy Web Site:Advocacy Web Site: Describes a Describes a cause, opinion, idea. Ex. cause, opinion, idea. Ex. Americanhumane.orgAmericanhumane.org
Weblog or blog:Weblog or blog: Journal that Journal that reflects the ideas of the author reflects the ideas of the author and/or site visitorsand/or site visitors
Wiki:Wiki: Allows users to add, create, Allows users to add, create, delete, or modify web contentdelete, or modify web content
Types of WebsitesTypes of Websites Social Network:Social Network: Online community. Ex. Online community. Ex.
Myspace.comMyspace.com Content Aggregator:Content Aggregator: A business that A business that
gathers Web content and distributes it to gathers Web content and distributes it to subscribers for free or for a fee. Ex. subscribers for free or for a fee. Ex. iSyndicateiSyndicate
Personal Web Site:Personal Web Site: Set up by an Set up by an individual or family typically not associated individual or family typically not associated with any organization. Ex. Ursone.comwith any organization. Ex. Ursone.com
http://en.wikipedia.org/wiki/Website#Types_of_websites
Let’s discuss some specific Web sites you all are familiar with and how you would classify them according to the nine basic types
Planning a Web SitePlanning a Web Site
PurposePurpose To keep visitors interested in the To keep visitors interested in the
sitesite Easy to navigateEasy to navigate OrganizedOrganized
Discussion: What makes a Web site likable? What is wrong with a Web site when people do not like it? Why is it important for Web site developers to visit existing Web sites during the planning process?
Planning a WebsitePlanning a Website
Purpose and GoalPurpose and Goal What type of website will it be?What type of website will it be?
News, Entertainment, Marketing, etc.News, Entertainment, Marketing, etc. It may be a combination of typesIt may be a combination of types
Develop a statement describing Develop a statement describing this to your visitorsthis to your visitors
Target AudienceTarget Audience Who is your site geared towards?Who is your site geared towards?
People with similar interests, gender, People with similar interests, gender, education, age range, income, education, age range, income, profession, and computer proficiencyprofession, and computer proficiency
Planning a WebsitePlanning a Website
Web TechnologiesWeb Technologies Broadband service (fast)Broadband service (fast) Baseband (Slow)Baseband (Slow)
If audience has slow connection you If audience has slow connection you will not want to fill your page with will not want to fill your page with images, flash, graphics, etc.images, flash, graphics, etc.
Site ComparisonSite Comparison Look at sites that are the same Look at sites that are the same
type as your sitetype as your site Incorporate what you like from Incorporate what you like from
those sites to your sitethose sites to your site
Planning a Website Planning a Website (Content)(Content)
Value-Added ContentValue-Added Content What topics do you want to coverWhat topics do you want to cover How much information will you How much information will you
present about each topicpresent about each topic What will attract your target What will attract your target
audience to your siteaudience to your site How will you keep them revisitingHow will you keep them revisiting What changes will you have to What changes will you have to
make to keep your site updatedmake to keep your site updated
Planning a Website Planning a Website (Content)(Content)
Text: Bulk of the contentText: Bulk of the content Images: The next most commonly Images: The next most commonly
included contentincluded content Discussion: What images might be Discussion: What images might be
effective to use on a Web site that effective to use on a Web site that promotes a neighborhood community promotes a neighborhood community center? Why?center? Why?
Color Palette: What colors will you Color Palette: What colors will you choosechoose Limit the number to a select fewLimit the number to a select few
Multimedia: Adds interactivity and Multimedia: Adds interactivity and action to your site.action to your site. Includes: Animation, audio, and videoIncludes: Animation, audio, and video
Web Site NavigationWeb Site Navigation
Navigation: Pathway through Navigation: Pathway through your siteyour site Web pages cannot be isolated Web pages cannot be isolated
from the rest of your sitefrom the rest of your site On every page of your site, you On every page of your site, you
must answer 3 questionsmust answer 3 questions Where am I?Where am I? Where do I go from here?Where do I go from here? How do I get to the home page?How do I get to the home page?
Design BasicsDesign Basics
Navigation/Site Map: Outlines Navigation/Site Map: Outlines the structure of the sitethe structure of the site
See Figure 1-7 on page 12See Figure 1-7 on page 12
Navigation Elements: With a Navigation Elements: With a click they help you make your click they help you make your way through a websiteway through a website
Examples include: Text, buttons, Examples include: Text, buttons, images, site index, a menu, search images, site index, a menu, search feature, frames, and a navigation barfeature, frames, and a navigation bar
Developing a Web SiteDeveloping a Web Site
Typography: the appearance Typography: the appearance and arrangement of textand arrangement of text
Use web-safe fonts such as Times, Use web-safe fonts such as Times, Courier, and ArialCourier, and Arial
These are more popular and the ones These are more popular and the ones most visitors will have installed on most visitors will have installed on their computerstheir computers
Typography, images, page Typography, images, page layout, and color are the key layout, and color are the key design elements that will make design elements that will make up your websiteup your website
Developing a Web SiteDeveloping a Web Site Page Layout: Establish a consistent, Page Layout: Establish a consistent,
logical layout that allows you to add logical layout that allows you to add text and images easilytext and images easily
Use templates when you can to Use templates when you can to maintain consistencymaintain consistency
Include one topic per pageInclude one topic per page Use concise statements and bulleted Use concise statements and bulleted
points to get your point acrosspoints to get your point across Be sure to review and test your web Be sure to review and test your web
sitesite Consistency, grammatical errors, Consistency, grammatical errors,
functioning links and multimedia, is it functioning links and multimedia, is it going to be displayed properlygoing to be displayed properly
Publishing a Web SitePublishing a Web Site
Publishing: Making your web site Publishing: Making your web site available to visitorsavailable to visitors
Involves uploading the site to a serverInvolves uploading the site to a server
Understanding Web Addresses Understanding Web Addresses (URLs)(URLs)
What does all that What does all that http://http://abcde.com/fgh/ijkl/abcde.com/fgh/ijkl/ mean anyway??? mean anyway???
HTTP:// - (Hypertext Transfer HTTP:// - (Hypertext Transfer Protocol) Ok what does that Protocol) Ok what does that mean?mean? It establishes a connection It establishes a connection
between the web server and your between the web server and your computer and sends you back your computer and sends you back your web pagesweb pages
Understanding Web Addresses Understanding Web Addresses (URLs)(URLs)
http://http://abcde.comabcde.com/fgh/ijkl//fgh/ijkl/
Domain NameDomain Name
The main component of a Web The main component of a Web sites URLsites URL Kind of like the web sites last nameKind of like the web sites last name Usually the Web sites Home page nameUsually the Web sites Home page name
Understanding Web Addresses Understanding Web Addresses (URLs)(URLs)
http://http://abcde.comabcde.com//fgh/ijklfgh/ijkl//
Tells the visitor which route they Tells the visitor which route they took to get to this page on the took to get to this page on the websitewebsite
Path (Subfolder)
Maintaining a Web SiteMaintaining a Web Site
Changing and updating contentChanging and updating content By adding new text, images, etc. By adding new text, images, etc.
or by deleting obsolete materialor by deleting obsolete material Check for broken links and adding Check for broken links and adding
new links if necessarynew links if necessary Document the last change dateDocument the last change date
Even when no revisions have been Even when no revisions have been mademade
Cascading Style Sheets StylesCascading Style Sheets Styles
CSS styles you format text, images, CSS styles you format text, images, headings, tables, etc. on one page headings, tables, etc. on one page and if you apply this style sheet to and if you apply this style sheet to another page the new page will have another page the new page will have the same format. the same format.
You can have multiple CSS styles per You can have multiple CSS styles per web siteweb site
Activity: Use the Internet to find three sources for images that you can use for your own site.
Activity II: Find two sites that have a similar topic to your site. Write down 3 ideas from each site that you would like to incorporate in your site
Put info, including Web addresses (URLs), for Acts I & II on a Word doc. And turn it in. Save this in your H-Drive.