Welcome To Web Page Design Mr. Ursone

Accessing the Web Web Page: where you see text, graphics, sounds, etc. Web Page: where you see text, graphics, sounds, etc. Uniform Resource Locator (URL): Web address. Ex. Uniform Resource Locator (URL): Web address. Ex. Web Browser: Helps you navigate through the internet. Ex. Internet Explore & Mozilla Firefox. Web Browser: Helps you navigate through the internet. Ex. Internet Explore & Mozilla Firefox. Hyperlink: a button, when clicked, that takes you to another place on the web Hyperlink: a button, when clicked, that takes you to another place on the web

Accessing the Web Website: Group of web pages that are linked together Website: Group of web pages that are linked together Home page or index page: The “main” page of the website. Describes the purpose and content. Home page or index page: The “main” page of the website. Describes the purpose and content.

Types of Websites pg.6 Portal Web Site: Provides many services from one site. Ex. Lycos - provides news, weather, , games, search engine, etc. Portal Web Site: Provides many services from one site. Ex. Lycos - provides news, weather, , games, search engine, etc. News Web Site: News articles relating to current events. Ex. Cbs.com News Web Site: News articles relating to current events. Ex. Cbs.com Informational Web Site: Contains facts, such as research and statistics. Ex. Usa.gov Informational Web Site: Contains facts, such as research and statistics. Ex. Usa.gov Business/marketing site: Promotes or sells products or services. Ex. Amazon.com Business/marketing site: Promotes or sells products or services. Ex. Amazon.com Educational Web Sites: Formal and informal teaching and learning. Ex. Temple.edu Educational Web Sites: Formal and informal teaching and learning. Ex. Temple.edu

Types of Websites Entertainment Web Site: interactive and engaging. Contains music, video, sports, games, etc. Ex. Freearcade.com Entertainment Web Site: interactive and engaging. Contains music, video, sports, games, etc. Ex. Freearcade.com Advocacy Web Site: Describes a cause, opinion, idea. Ex. Americanhumane.org Advocacy Web Site: Describes a cause, opinion, idea. Ex. Americanhumane.org Weblog or blog: Journal that reflects the ideas of the author and/or site visitors Weblog or blog: Journal that reflects the ideas of the author and/or site visitors Wiki: Allows users to add, create, delete, or modify web content Wiki: Allows users to add, create, delete, or modify web content

Types of Websites Social Network: Online community. Ex. Myspace.com Social Network: Online community. Ex. Myspace.com Content Aggregator: A business that gathers Web content and distributes it to subscribers for free or for a fee. Ex. iSyndicate Content Aggregator: A business that gathers Web content and distributes it to subscribers for free or for a fee. Ex. iSyndicate Personal Web Site: Set up by an individual or family typically not associated with any organization. Ex. Ursone.com Personal Web Site: Set up by an individual or family typically not associated with any organization. Ex. Ursone.com s_of_websites s_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 Site Purpose Purpose To keep visitors interested in the site To keep visitors interested in the site Easy to navigate Easy to navigate Organized Organized 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 Website Purpose and Goal Purpose 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 types It may be a combination of types Develop a statement describing this to your visitors Develop a statement describing this to your visitors Target Audience Target Audience Who is your site geared towards? Who is your site geared towards? People with similar interests, gender, education, age range, income, profession, and computer proficiency People with similar interests, gender, education, age range, income, profession, and computer proficiency

Planning a Website Web Technologies Web Technologies Broadband service (fast) Broadband service (fast) Baseband (Slow) Baseband (Slow) If audience has slow connection you will not want to fill your page with images, flash, graphics, etc. If audience has slow connection you will not want to fill your page with images, flash, graphics, etc. Site Comparison Site Comparison Look at sites that are the same type as your site Look at sites that are the same type as your site Incorporate what you like from those sites to your site Incorporate what you like from those sites to your site

Planning a Website (Content) Value-Added Content Value-Added Content What topics do you want to cover What topics do you want to cover How much information will you present about each topic How much information will you present about each topic What will attract your target audience to your site What will attract your target audience to your site How will you keep them revisiting How will you keep them revisiting What changes will you have to make to keep your site updated What changes will you have to make to keep your site updated

Planning a Website (Content) Text: Bulk of the content Text: Bulk of the content Images: The next most commonly included content Images: The next most commonly included content Discussion: What images might be effective to use on a Web site that promotes a neighborhood community center? Why? Discussion: What images might be effective to use on a Web site that promotes a neighborhood community center? Why? Color Palette: What colors will you choose Color Palette: What colors will you choose Limit the number to a select few Limit the number to a select few Multimedia: Adds interactivity and action to your site. Multimedia: Adds interactivity and action to your site. Includes: Animation, audio, and video Includes: Animation, audio, and video

Web Site Navigation Navigation: Pathway through your site Navigation: Pathway through your site Web pages cannot be isolated from the rest of your site Web pages cannot be isolated from the rest of your site On every page of your site, you must answer 3 questions On every page of your site, you must 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 Basics Navigation/Site Map: Outlines the structure of the site Navigation/Site Map: Outlines the structure of the site See Figure 1-7 on page 12 See Figure 1-7 on page 12 Navigation Elements: With a click they help you make your way through a website Navigation Elements: With a click they help you make your way through a website Examples include: Text, buttons, images, site index, a menu, search feature, frames, and a navigation bar Examples include: Text, buttons, images, site index, a menu, search feature, frames, and a navigation bar

Developing a Web Site Typography: the appearance and arrangement of text Typography: the appearance and arrangement of text Use web-safe fonts such as Times, Courier, and Arial Use web-safe fonts such as Times, Courier, and Arial These are more popular and the ones most visitors will have installed on their computers These are more popular and the ones most visitors will have installed on their computers Typography, images, page layout, and color are the key design elements that will make up your website Typography, images, page layout, and color are the key design elements that will make up your website

Developing a Web Site Page Layout: Establish a consistent, logical layout that allows you to add text and images easily Page Layout: Establish a consistent, logical layout that allows you to add text and images easily Use templates when you can to maintain consistency Use templates when you can to maintain consistency Include one topic per page Include one topic per page Use concise statements and bulleted points to get your point across Use concise statements and bulleted points to get your point across Be sure to review and test your web site Be sure to review and test your web site Consistency, grammatical errors, functioning links and multimedia, is it going to be displayed properly Consistency, grammatical errors, functioning links and multimedia, is it going to be displayed properly

Publishing a Web Site Publishing: Making your web site available to visitors Publishing: Making your web site available to visitors Involves uploading the site to a server Involves uploading the site to a server

Understanding Web Addresses (URLs) What does all that abcde.com/fgh/ijkl/ mean anyway??? What does all that abcde.com/fgh/ijkl/ mean anyway??? abcde.com/fgh/ijkl/ abcde.com/fgh/ijkl/ - (Hypertext Transfer Protocol) Ok what does that mean? - (Hypertext Transfer Protocol) Ok what does that mean? It establishes a connection between the web server and your computer and sends you back your web pages It establishes a connection between the web server and your computer and sends you back your web pages

Understanding Web Addresses (URLs) abcde.com /fgh/ijkl/ abcde.com /fgh/ijkl/ abcde.com /fgh/ijkl/ abcde.com /fgh/ijkl/ Domain Name Domain Name The main component of a Web sites URL The main component of a Web sites URL Kind of like the web sites last name Kind of like the web sites last name Usually the Web sites Home page name Usually the Web sites Home page name

Understanding Web Addresses (URLs) fgh/ijkl / fgh/ijkl / fgh/ijkl / fgh/ijkl / Tells the visitor which route they took to get to this page on the website Tells the visitor which route they took to get to this page on the website Path (Subfolder)

Maintaining a Web Site Changing and updating content Changing and updating content By adding new text, images, etc. or by deleting obsolete material By adding new text, images, etc. or by deleting obsolete material Check for broken links and adding new links if necessary Check for broken links and adding new links if necessary Document the last change date Document the last change date Even when no revisions have been made Even when no revisions have been made

Cascading Style Sheets Styles CSS styles you format text, images, headings, tables, etc. on one page and if you apply this style sheet to another page the new page will have the same format. CSS styles you format text, images, headings, tables, etc. on one page and if you apply this style sheet to another page the new page will have the same format. You can have multiple CSS styles per web site You can have multiple CSS styles per web 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.