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.