Transcript Web Design - Oswego 308

Web Design Quiz Review
Oswego School District 308
Plank Jr. High
Digital Imagery and Web Design
Mr. Brown
Web Design





Why Build a Web Site?
Worldwide Internet Use Facts
About 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
Worldwide Top Web Sites*
* 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
.net
.org
.edu
.gov
.info
.biz

Commercial
Network
Organization
Education
Government
Information
Business
Used by businesses
Used by Service providers initially, now also used by many businesses
Used by non-profit organizations
Used by Universities, schools and related bodies
Used by Government departments and affiliates
Site is designed to provide information rather than sell products or services
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
.uk
.ca
.jp
.mx
.cn
.vn
Australia
United Kingdom
Canada
Japan
Mexico
China
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

North
America
Famous
Place
Web
Page
South
America
Famous
Place
Web
Page
Europe
Famous
Place
Web
Page
northamer
ica.html
southame
rica.html
europe.ht
ml
The Pirate
Traveler
Home
Asia
Page
Famous
Place
index.html
Web
Page
Africa
Famous
Place
Web
Page
asia.html
africa.html
Australia
Famous
Place
Web
Page
australia.h
tml
Antarctica
Famous
Place
Web Page
antarctica.ht
ml
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
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