Web Design Quiz Review

Oswego School District 308Plank Jr. High

Digital Imagery and Web DesignMr. Brown

Web Design Why build a Web Site? Worldwide Daily Internet Use Top Web Sites Worldwide URL’s Web Site Design Basics Dreamweaver

Why Build a Web Site? • Share information (a.k.a., Portal) and make money

www.yahoo.com www.espn.com www.bloomberg.com www.wikipedia.org www.mcdonalds.com

• Sell things and make money (i.e., e-Commerce) www.amazon.com www.ebay.com www.homedepot.com www.ticketmaster.com www.expedia.com www.eastbay.com www.abercrombieandfitch.com

• Provide financial services and make money www.visa.com www.tcfbank.com

• Promote a product and make money www.sixflags.com www.mlb.com www.sandiegozoo.org www.atlantis.com

Why Build a Web Site? (cont.) • Social networking and Blogs to meet people with like

minds www.facebook.com www.sina.com.cn www.linkedin.com www.chicagohoops.com

• Create gaming communities and make money www.zynga.com www.worldofwarcraft.com

• Government Agencies communicate with Taxpayers www.irs.gov www.nasa.gov www.nps.gov

• Schools to share information with Students and Parents www.oswego308.org https://hac.oswego308.org/homeaccess/ www.johnshopkins.edu

• And many more reasons…

Worldwide Daily Internet Use*

* According to http://www.internetworldstats.com/stats.htm

Top Web Sites Worldwide*

* According to http://www.alexa.com/topsites

URL’s (Uniform Resource Locator) Also known as “Domain Name” Examples: www.oswego308.org or www.google.com URL’s must be register to a specific owner www.register.com It costs $$$$ (about $30/yr.) Regional Internet Registries (RIR’s) oversee

registration of URL’s within a particular part of the world. There are 5 RIRs in operation:– Asia and Australia region - Asia-Pacific Network Information Centre (APNIC)– Europe, the Middle East and Central Asia region - RIPE Network Coordination

Centre (RIPE NCC)– North America region - American Registry for Internet Numbers (ARIN). In the United

States it’s the responsibility of Internet Corporation for Assigned Names and Numbers

(ICANN)

– Latin America region - Latin American and Caribbean Internet Address Registry (LACNIC)

– Africa region - African Network Information Centre (AfriNIC) Read this page on www.wikipedia.org to better

understand how Internet Domain Naming System works– http://en.wikipedia.org/wiki/Domain_name_system

About URL’s (cont.) URL extentions are intended to have following

meaning:.com Commercial Used by businesses .net Network Used by Service providers initially, now also used by many businesses .org Organization Used by non-profit organizations .edu Education Used by Universities, schools and related bodies.gov Government Used by Government departments and affiliates.info Information Site is designed to provide information rather than sell products or

services.biz Business Used by Businesses, although less common than alternatives above

Often, you will see more letters after the three letter extension. For example www.sina.com.cn– It indicates what country the web site is based– A lack of a country code suggests the United States

Some country codes are:.au Australia.uk United Kingdom.ca Canada.jp Japan.mx Mexico.cn China.vn Vietnam

For a complete list of country codes see - http://en.wikipedia.org/wiki/List_of_Internet_top-level_domains

Web Site Design Basics Planning Your Web Site

– Who is your intended audience– Creating and organizing content (i.e., Text, Animations, Images, Podcasts,

Videos)– Organize Your Web Pages via a Site Map (i.e., hierarchy of your web site)– Basic Page Layout– How Frequently Does the Content Change– Generating traffic and finding advertisers

Web Site Essentials– Page Banner (provides a consist look and feel)– Page Titles (these show up on the browser tab and help get your web site

found through Google searches)– Site Navigation Bar(s) where should it be on the page?– Terms of Use page– Privacy Policy page– About Us page– Contact Us page– Interactivity (Blogs or ability for users to post comments)– Advertiser Links (This is how you make $$$)– Social Networking plugins Share: – Language translation – For large web sites

• Search within• Site Map

The Pirate

Traveler

Home Page

index.html

North America

Famous Place

Web Page

northamerica.html

South America

Famous Place

Web Page

southamerica.html

Europe

Famous Place

Web Page

europe.html

Asia

Famous Place

Web Page

asia.html

Africa

Famous Place

Web Page

africa.html

Australia

Famous Place

Web Page

australia.html

Antarctica

Famous Place

Web Page

antarctica.ht

ml

Web Site Design Basics (cont.) What should the URL or Domain Name

– Has it already been registered by someone else– Check www.whois.com

Web Site Hosting– Where will you host it and how much will it cost?– Will it perform and how much storage space will they give you?– Is their service 24 hours a day 7 days a week

HTML (Stands for Hypertext Markup Language)– It’s the language of the Internet– Includes Tags (for example <html>, <body>, <head>, </html>– The tags are interpreted by your Internet Browser

Web Page Development Tools– Create HTML– Dreamweaver and Kompzer are examples

Web Site Testing– Preview in multiple browsers before you “Go Live”– Make sure all the Multi-media content will play– Make sure all Hyperlinks work– Tests the Interactivity (i.e., Blog/comment posting)

Web Site Design Basics (cont.) Internet Browsers interpret HTML

– Internet Explorer– Foxfire– Chrome– Safari– Opera

* According to http://www.netmarketshare.com

Dreamweaver CS4 Defining Your Site (Local vs. Remote info) Organizing Contents into Folders (i.e., Animations, Images, Podcasts, Videos) Use Windows to copy content into your site Views (Code, Split, or Design)

Properties Panel

Creating Web Pages– Formatting Text and Colors via Page Properties helps give your web site a

uniform look

Use Tables to layout content on the web page– Merging cells– Helps give your web site a uniform look

Dreamweaver CS4 (cont.) Inserting and resizing Images (Thumbnails, etc.) Inserting and resizing Media (Videos and Podcasts)

The Properties Panel allows you to create Hyperlinks– Internal vs. External – On Text and Images (i.e., hotspots)

Site Navigation Bars is used to create links from page to page within your web site

Previewing in Browser– Preview in multiple browsers (IE, Chrome, Safari)– Must do this before Publishing!

Publishing Web Sites to Remote Locations