Introduction to Web DesignIntroduction to Web Design

By: Cara Norton and Randi HillDacula High School

Central Gwinnett High School

Based on a Class by Joshua Hester

New Horizons Training Center Tucker, Georgia

June, 2003

(Revised & Edited by Memory Reed, Harris County High School, May 2009)

What is A Web Site?What is A Web Site?

A group of pages with a common purpose maintained by one person or team

Web Pages can be created in any number of ways:– HTML– XHTML– FrontPage (software)– Dreamweaver (software)

Dreamweaver Dreamweaver (a commonly used web page design software)(a commonly used web page design software)

1. Web Site Creation/Maintenance Program2. WYSIWYG

What You See Is What You Get Allows you to edit pages easily and see what is

changing as you edit It’s both an HTML and Graphical Editor

3. Dynamic Web Page Can individualize Web pages – different users

get different output (pages on the fly)

What Else About What Else About Dreamweaver?Dreamweaver?

1. Developed by Macromedia!

2. Flash, Fireworks, and Dreamweaver are all in the same software suite.

3. Order processing software has to be purchased separately.

4. It’s a whole lot of fun!

5. It’s very easy to use!

The Internet vs. The World The Internet vs. The World Wide WebWide Web

When did the Internet begin?– 1968

Who developed the Internet?– Created by the U.S. Department of Defense– Originally called ARPA

(Advanced Research Project Agency)

Why was it created?– As a way to connect computers so if one machine went

down the others would keep working (SPUTNIK) What organization used it first?

– The National Science Foundation (NSF) introduced it to college campuses in 1983.

Internet QuestionsInternet Questions

What is the Internet?– The physical connection of the

W_________ W_______ W____.– Basically it is hardware

What year do you think email began?– 1971– Before the first web pages were created!

What is WWW?What is WWW?

World Wide Web Began in 1991 Created by Tim Berners-Lee

– He, along with his research team of scientists in Sweden, completed it in 1989.

– Their purpose was to share Physics research electronically, therefore creating HTML code.

A piece of software that runs on the Internet that allows users to share files.

Before HTMLBefore HTML Information was exchanged in two ways:

– ASCII Files: American Standard Code for Information Interchange shared text only, but with no formatting options except line

returns and tabs. Advantage: ALL machines could read it.

– Binary Files: 0’s and 1’s Only read the text if you had the SAME software as the person

who originally created the text. Disadvantage: there used to be over 400 different word

processing software packages available.

HTMLHTMLHyperText Markup Language

– Hyper = fast (speed)– Text = ASCII text so ALL computers can read

it.– Markup = Formatting of the text – an original

printing press term <b>Hello</b> ---- bolds text The greater/less than signs are called WICKETS!

– Language = the language of the Web

Learn the codes before using any editor software – it will be well worth your time!

How Does it all Work?How Does it all Work?

CLIENT

SERVER

Response

1. Who is the client?

• A Web user – You and me!

2. What is the server?

• A machine that provides you what you want – a connection to information on the Internet

• A server used to be a connection outside your company – called OUTSOURCING

3. What is the response?

• The server sends back a COPY of the actual page

• The copy allows you to view the HTML code

URL: Request

Requests From the ServerRequests From the Server URL

– Universal Resource Locator– The request

1. HTTP://– Hypertext Transfer Protocol

Saying you’d like a Web page Domain Name asking you what type of information you’d like

– WWW.MICROSOFT.COM

2. FTP://– File Transfer Protocol

Saying you’d like to download something

3. MAILTO://– Email service

Saying you’d like to email someone

Domain NamesDomain Names

.com = commercial business (microsoft.com) .gov = government institutions (cia.gov) .edu = educational institutions (cornell.edu) .mil = military organizations (army.mil) .net = network organizations (internic.net) .org = organizations that don’t fit in any of the other

categories – usually non-profits (santafecares.org) Country Codes:

– jp = Japan ca = Canada de = Germany– ru = Russia us = United States au = Australia

http://www.gwinnett.k12.ga.us

Interesting InformationInteresting Information1. Web Browser

A user agent that allows you to read HTML.2. MOSAIC

1st browser that allowed for graphics to be viewed on the Web page

3. MOZILLAA search engine that is used by both Netscape and Explorer

4. NETSCAPEDeveloped in 93-94Huge browser which allows for a large influence on HTML codeIs the only browser that has to be purchased!

Interesting Information, cont…Interesting Information, cont…5. W3C

– World Wide Web Consortium– Developed in 1993– Used to set standards and recommendations for regulating HTML– Didn’t work because Netscape was so big!– President: Tim Berners-Lee

He never trademarked or copyrighted his Internet invention, he called it “His Gift to the World”. He says it’s the biggest mistake he’s ever made!

– Current version of HTML is 4.01 – Work is being done on HTML 5

Neither large browser fully supports this standard

5.08 Compliant5.08 CompliantAll webs must be in compliance with the

Americans With Disabilities Act10% of audiences are impaired – couldn’t

access the web 5 years agoDon’t use <b> and <i> tags – voices can’t

speak in italicsGo to www.W3.org and check to see if your

web site is 5.08 compliant!

XML vs. XHTMLXML vs. XHTML XML:

– Came out in 1998– Means Extensible Language – Allows you to create your own tags so that you don’t

have to conform to browsers– Mostly used by programmers behind the scenes right

now

XHTML:– Requires you to use ALL lowercase letters– No optional closing tags

Every code must have beginning & ending tags

Over 60% of people use a combination of both of these today!

GraphicsGraphics

There are many types of graphic files, they differ in the quality and size of the file

Of course, you want the best quality on your web page, but you have to consider what size and quality most customers can handle

This article shows the difference and how to choose your graphics for a website http://www.wfu.edu/~matthews/misc/graphics/formats/formats.html

HyperlinksHyperlinks Hyperlinks are used in web pages to link the

customer from one place or page to another place in the page or to another web page

Links are usually underlined Links can also be “rollover” links, that change

color when you rollover them indicating they are hyperlinks

Some marketers use hyperlinks unethically, see this article - http://www.poeticsystems.com/blog/Ethical-Hyperlinks-SEO.html#

Font ChoicesFont Choices Choosing fonts are an important step in web design Serif (like Times New Roman - has the little feet on the

bottom of the letters) ex: THIS IS SERIF– Best to use in the print industry

Sans Serif (like Arial - clean and simple) ex: This is Sans Serif (Sans means without or NOT)

– Best to use in web design Fancy or decorative fonts (like Script or Comic Sans) ex: This is Script ; Comic Sans; Lucida

– Best not to use for several reasons - Hard to read, off-putting for some people, some people’s computers may not recognize the font

Site Maps Vs. Navigation Site Maps Vs. Navigation SchemesSchemes

Site Maps - ways for webmasters to inform search engines about their pages and make it easier for them to “crawl” or search

Navigation Schemes - A consistent theme throughout the website that makes it easier for visitors to find what they need quickly

Web Design for MarketingWeb Design for Marketing

Know your target audience Build your website with your target audience in

mind Flash & graphics aren’t what builds up customers,

it’s great customer service and customer engagement

Cater to the customer Create positive user experiences, optimize

usability and have technology that fits user needs