Aaron's

1
Aaron's
Web Design Lab Book
2
Goal
Build a personal Website with pictures,music etc.
rules

1. Respect teammates
2. Respect equipment
3. No bad stuff

3
Presenting ideas
ugly
average
awesome
4
Aaron
Aaron

HeroesHarry Potter, Einstein Favorite Quote
Whatever Hobbies
soccer,skiing,listening to music
5
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/
6
Website Designers Plan

• How the internet works
• Web page vocabulary
• Web page grammar
• Tricks
• Pictures, Audio, Video
• Build-Your-Own-Site

www.Build-It-Yourself.com
7
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
8
View Source Code / Save As / Edit
1
Find a Web page you like.
2
View Source
3
Save as intro-page.html in a folder named your
name in the folder My Documents My
Documents/john/intro-page.html
Create a sub-folder called images and save your
favorite pictures in this folder.
4
Launch a text editor like Notepad or Simple Text.
Open the file, intro-page.html
5
Edit the tags, text and image names. Then save
the html file.
6
Launch Internet Explorer. File / Open
intro-page.html Click on Refresh after an
edit is made and saved.
7
www.Build-It-Yourself.com
9
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
10
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.
11
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.
12
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.
13
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. ltfont color redgt Title
lt/fontgt How many HTML commands are there? Web
Browser (What are 2 popular browsers?) Application
that converts HTML to a screen display
14
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
15
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)
16
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
17
View / Source Code
html file sections (index.html) lthtmlgt ltheadgt lt
! - - page description info - -
gt lt/headgt ltbodygt lt ! - - page layout code -
- gt lt/bodygt lt/htmlgt
www.Build-It-Yourself.com
18
HTML Source Code Body Section
Indent your code so it can be read and edited
easily. ltbody bgcolorpurplegt lt ! - - The
Title Section Starts Here - - gt ltcentergt ltfont
size6 colorred facearialgt Hot Shot Web
Designer lt/fontgt ltimg srcturnip-head.jpg
border1gt lt/centergt lt/bodygt
www.Build-It-Yourself.com
19
Web Design
Hot Shot Web Designer
www.Build-It-Yourself.com
20
Web Design
Bad HTML code
Good HTML code
lthtmlgtltheadgtlttitlegt Hot Shot Web Designers
lt/titlegtltmeta namekeywords contenthot shots,
smarties, your namegt ltmeta name description
contentBest Web designers on the
planet!gtlt/headgt ltbody bgcolorpurplegtlt!-- The
Title Section Starts Here --gtltcentergt ltfont
size6 colorred facearialgtHot Shot Web
Designerltpgtlt/fontgtltimg src"images/head-turnip.jpg
" border1 width"250" height"367"gtlt/centergtlt/bod
ygtlt/htmlgt
lthtmlgt ltheadgt lttitlegt Hot Shot Web Designers
lt/titlegt ltmeta namekeywords content hot
shots, smarties, your namegt ltmeta name
description content Best Web designers on
the planet!gt lt/headgt ltbody bgcolorpurplegt lt!--
The Title Section Starts Here --gt ltcentergt
ltfont size6 colorred facearialgt Hot Shot
Web Designerltpgt lt/fontgt ltimg
src"images/head-turnip.jpg" border1gt
lt/centergt lt/bodygt lt/htmlgt
www.Build-It-Yourself.com
21
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
• Click on Intro HTML page
• View Source and edit the color and text.

www.Build-It-Yourself.com
22
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
23
Editing Simple Table
ltdiv align"center"gt lttable border"0"
cellpadding"5" cellspacing"5" width"650"gt
lttrgt lttd width"250" valign"top"
align"left"gt ltimg border"0"
src"images/placemark.jpg"gt lt/tdgt lttd
width"400" valign"top" align"left"gt
ltfont face"Times New Roman" size"4"
color"gray"gt Team 1ltbrgt Add text
here that describes your research, storylines,
goals, and solution. lt/fontgt lt/tdgt
lt/trgt lttrgt lttd width"250"
valign"top" align"left"gt ltimg
border"0" src"images/placemark.jpg"gt
lt/tdgt lttd width"400" valign"top"
align"left"gt ltfont face"Times New
Roman" size"4" color"gray"gt Team
2ltbrgt Add text here that describes your
research, storylines, goals, and solution.
lt/fontgt lt/tdgt lt/trgt
lt/tablegt lt/divgt ltpgt
Change Image
Change Text
www.Build-It-Yourself.com
24
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
25
Deployment (FTP / Backup)
You can set up a free Web Server space
at www.yahoo.tripod.com
26
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

27
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.

28
Website Map and Navigation
Home Page
Favorite Stuff
Favorite Web sites
Friends
Hobbies
Heroes
29
File Structure Folders
Web Site
index.html
Section n
Section 1
Sec1 Images
sec-1.html
sec-n.html
Sec1 Images
30
File Structure

• File Names
• Use long descriptive names like
• patrick-home-page.html
• 2) Use lower case text
• 3) Use - not _ or like hot-shot.html
• not hot_shot.html or
• not hot shot.html

31
Pictures, Audio and Video
This is how to embed an audio ltembed
srcburp.wav autostarttruegt Record or search
for an audio file and then embed it in your page.
32
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. ltbody backgroundsparkle-bac
kground.gifgt
Hannah
33
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.
34
(No Transcript)