Web Design

1
Web Design
2
Website Designers Goal
Evolve from know-nothing, nat-brain rookies
into Incredible Website Designers
Reference Websites http//navigators.com/internet
_architecture.html http//www.rci.rutgers.edu/au/
workshop/int-def.htm http//www.profitgate.net/web
chart.html http//www.build-it-yourself.com/projec
t-website/
3
Website Designers Plan

• How the Internet works
• Web page vocabulary
• Web page grammar
• Programming tricks
• Pictures, Audio, Video
• Web site plan and navigation
• Build-Your-Own-Site

www.Build-It-Yourself.com
4
Project Planning (Teamwork)
Extreme Programming

• Share ideas
• Build on others ideas
• 2 heads better than 1 teamwork
• www.build-it-yourself.com
• Go to Projects.
• Scroll down to Incredible Web Designers.
• Download your lab book template.

www.Build-It-Yourself.com
5
Presenting Ideas
Ugly
Average
Way Cool
www.Build-It-Yourself.com
6
Web Design
Hot Shot Web Designer
www.Build-It-Yourself.com
7
View / Source Code
html file sections (index.html) ! - - page description info - -
-
www.Build-It-Yourself.com
8
HTML Source Code Body Section
Indent your code so it can be read and edited
easily. Section Starts Here - - size6 colorpurple facearial Hot Shot
Web Designer d.jpg border1
www.Build-It-Yourself.com
9
Web Design
Bad HTML code
Good HTML code
Hot Shot Web Designers
smarties, your name contentBest Web designers on the
planet! colorpurple facearialHot Shot Web
Designer" border1 width"250" height"367"y
Hot Shot Web Designers
shots, smarties, your name description content Best Web designers on
the planet!
Hot Shot
Web Designer space tag -- " border1
www.Build-It-Yourself.com
10
Web Design
Browser (Internet Explorer)
Web Page
HTML code
colorpurple facearial Hot Shot Web
Designer space tag -- " border1
Hot Shot Web Designer
www.Build-It-Yourself.com
11
Audio and Video
You can embed sound effects or videos on a
page autostarttrue Record or search for an audio
file (.WAV) or a video file (.WMV) Save the WAV
or WMV files to your images folder and then
embed them inside your tags.
www.Build-It-Yourself.com
12
View Source Code / Save As / Edit
1
Find a Web page you like.
2
View Source COPY all source code to a text
editor (Notepad or Apple Works).
3
Save as name-description.html in your folder in
the folder My Documents My Documents/john/john-t
urnip-head.html
Create a sub-folder called images and save your
favorite pictures in this folder. To get
pictures (JPGs or GIFs) from the Web, search
Google Images. Right click (or CTRL click on
Macs) on a picture and save the image to you
images folder.
4
5
Edit the tags, text and image names. Then save
the html file.
Launch Internet Explorer. File / Open
john-turnip-head.html Click on Refresh after
an edit is made and saved.
6
www.Build-It-Yourself.com
13
Set up your work folders.
Never leave your files on the desktop. Files
left on the desktop will get deleted.
Desktop
documents
C or Hard Drive
yourname-lab-book.ppt yourname-web-page.html
your name
cat.jpg ball.gif song.wav movie.wmv
images
www.Build-It-Yourself.com
14
File Structure

• File Names
• Use long descriptive names like
• school-date-name-description.html
• 2) Use lower case text.
• Use - between words.
• Do not use _ or
• Good biy-hot-shot.html
• Bad biy_hot_shot.html
• Bad biy hot shot.html

www.Build-It-Yourself.com
15
Internet Components
Your local Internet Service Provider
You, Client
Type a URL like www.build-it-yourself.com in
the address bar of your Web browser. Your local
ISP (or Internet Service Provider) will convert
this URL to an IP (or Internet Protocol) address
by looking it up on a Domain Name Server. Your
local ISP will then request a Web page from the
Internet at the appropriate IP address.
Domain Name Server
16
Internet Components
Routers Switches
Routers Switches
Your local Internet Service Provider
Website Internet Service Provider
You, Client
Domain Name Server
Route Server
I N T E R N E T B A C K B O N E
A Route Server will determine the best route from
your ISP to the ISP that hosts the Website you
want.
17
Internet Components
Routers Switches
Routers Switches
Your local Internet Service Provider
Website Internet Service Provider
Website Host Server
You, Client
Domain Name Server
Route Server
I N T E R N E T B A C K B O N E
When the Website Internet Service Provider gets a
Web page request, it sends back all the
information necessary to display that Web page to
the IP address associated with your client
computer.
18
Internet Definitions
Internet The name given to the collective
electronic network of computers and computer
networks which are inter-connected throughout the
world. Like a network of highways. WorldWideWeb
WWW The name given to the collection of
computers which serve information in hypertext
format to the INTERNET Like the US Post Office
that uses the
network of highways to deliver letters
based on ZIP codes.
19
Internet Definitions
HTML - Hyper Text Markup Language the text
markup language used to insert tags which allow a
Web browser to correctly display a hyper-text
document. Title
How many HTML commands are there? Web
Browser (What are 2 popular browsers?) Application
that converts HTML to a screen display
www.Build-It-Yourself.com
20
Internet Definitions
Server A server is a computer that controls
information on a network. Domain Name
Server Translates a Web address like
www.hotshot.com to an IP address
like 231.987.520.52
www.Build-It-Yourself.com
21
Internet Definitions
Client Dial Up / DSL / Cable / T1 transmission
speed ISP (Internet Service Provider) Domain Name
Servers IP address (Intrnet Protocol) Routers /
Switches Server TCP/IP (Transmission Control
Protocol / Internet Protocol) FTP (File Transfer
Protocol)
www.Build-It-Yourself.com
22
HTML
HTML
What is
?

• Stands for Hypertext Markup Language
• Is the document format used on the world wide web
• Is read by web browsers that then display the web
  page

What are browsers ?
www.Build-It-Yourself.com
23
Editing A Simple Table
Add text here that describes your research,
storylines, goals, and solution.
Add text here that describes your research,
storylines, goals, and solution.
www.Build-It-Yourself.com
24
Editing A Simple Table
Add text here that describes your research,
storylines, goals, and solution.
Add text here that describes your research,
storylines, goals, and solution.
www.Build-It-Yourself.com
25
Editing A Simple Table

table



row
data
data






row
data
data




www.Build-It-Yourself.com
26
Editing Simple Table
cellpadding"5" cellspacing"5" width"650"
align"left" src"images/placemark.jpg" width"400" valign"top" align"left"
color"gray" Team 1
Add text
here that describes your research, storylines,
goals, and solution.
valign"top" align"left" border"0" src"images/placemark.jpg"
align"left" Roman" size"4" color"gray" Team
2
Add text here that describes your
research, storylines, goals, and solution.


Change Image
Change Text
www.Build-It-Yourself.com
27
Navigation
colorpurple facearial Hot Shot Web
Designer
face"arial" size"4" Home
Page 2

www.Build-It-Yourself.com
28
Preparing Images

• Capture JPGs and GIFs from Web sites
• Make your own image in Power Point, Appleworks
  Paint
• Download photos from a camera
• Process image in
• Photoshop
• Paintshop Pro
• Free Online Tool for editing gifs (crop and
  size)
• http//www.gifworks.com

www.Build-It-Yourself.com
29
Designing your Web site
Audience Who are you speaking to? (Young, grown
up, boys or girls? Interested in entertainment,
hobbies, or evaluating your work?) Goals Sell
or Convince (For example, demonstrate that you
have mastered HTML and therefore should have a
budget to buy some new hardware or
software) Share (Share a story, information, or
links to cool sites.)
www.Build-It-Yourself.com
30
Designing your Web site

• Design, code and link 3 pages that would let an
  alien from another universe know who you are.
• Possible sections include
• Goals and accomplishments
• Hobbies and interests
• Friends and heroes
• Favorite quotes and jokes
• Short story about how you would like your future
  to unfold.

www.Build-It-Yourself.com
31
Website Map and Navigation
Home Page
Favorite Stuff
Favorite Web sites
Friends
Hobbies
Heroes
www.Build-It-Yourself.com
32
File Structure Folders
Web Site
index.html
Section n
Section 1
Sec1 Images
sec-1.html
sec-n.html
Sec1 Images
www.Build-It-Yourself.com
33
Development (Code Tricks)
You can add interesting background effects or a
background image. If you do this, make sure your
page information does not get lost in a complex
background picture. kground.gif
Hannah
www.Build-It-Yourself.com
34
Development (Code Tricks)
Design your Web site so that no page, including
pictures, requires more than 100k bytes of
download data. Time to view a page that requires
100K of information ___ Telephone modem download
time. ___ Cable download time. ___ DSL download
time. ___ Wireless download time. ___ T1 download
time.
www.Build-It-Yourself.com
35
Favorite Web Sites
Build Your Own Toys http//www.build-it-yourself.c
om/ Mechanical Toys http//www.cabaret.co.uk/ Me
chanisms http//www.flying-pig.co.uk/mechanisms/
www.Build-It-Yourself.com
36
Deployment (FTP / Backup)
Web Server
You can set up a free Web Server space
at www.yahoo.tripod.com URL for Websites built
in Build-It-Yourself Workshops http//biyweb.tripo
d.com FTP URL for transferring files from your
computer to the Tripod Web Server ftp.tripod.com U
ID biyweb PWD password
www.Build-It-Yourself.com