web design lab book by adam savannah & matthew home page adamsavannahmatthewpics fav. sites

Web DesignLab Book

By Adam savannah & Matthew

Home Page

Adam Savannah Matthew Pics

Fav. sites

ugly

average

Way cool!

Respect teammates

Respect your lab

Don’t do stupid stuff

Ugly colors

Good looking

1. Define the problem and set goals

2. Share ideas

3. Work together

4. Break your solution into parts

5. Document

Website Designers Goal

Evolve fromknow-nothing,

nat-brainrookies …

intoIncredibleWebsite

Designers

Reference Websites:http://navigators.com/internet_architecture.htmlhttp://www.rci.rutgers.edu/~au/workshop/int-def.htmhttp://www.profitgate.net/webchart.htmlhttp://www.build-it-yourself.com/project-website/

Website Designers Plan

1. How the Internet works2. Web page vocabulary3. Web page grammar4. Programming tricks5. Pictures, Audio, Video6. Web site plan and navigation7. Build-Your-Own-Site

www.Build-It-Yourself.com

Project Planning (Teamwork)

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


http://www.build-it-yourself.com/

Presenting Ideas

Ugly

Average

Way Cool



Web Design

Hot Shot Web Designer

View / Source Code

html file sections (index.html)

<html>

<head>

< ! - - page description info - - >

</head>

<body>

< ! - - page layout code - - >

</body>

</html>


HTML Source Code Body Section

Indent your code so it can be read and edited easily.

<body bgcolor=“gray”>

< ! - - The Title Section Starts Here - - >

<center>

<font size=“6” color=“purple” face=“arial”>


</font>

<img src=“images/turnip-head.jpg” border=1>

</center>

</body>


Bad HTML code


Web Design

Good HTML code<html><head><title> Hot Shot Web Designers </title><meta name=“keywords” content=hot shots, smarties, your name> <meta name= “description” content=Best Web designers on the planet!></head><body bgcolor=gray><center><font size=6 color=purple face=arial>Hot Shot Web Designer<p></font><img src="images/head-turnip.jpg" border=1 width="250" height="367"></center></body></html>

<html><head> <title> Hot Shot Web Designers </title> <meta name=“keywords” content= hot shots, smarties, your name> <meta name= “description” content= Best Web designers on the planet!></head>

<body bgcolor=gray> <center> <font size=6 color=purple face=arial>

Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center></body></html>

Web Page


Web Design

HTML code

<html><body bgcolor=gray> <center> <font size=6 color=purple face=arial>

Hot Shot Web Designer </font> <p> <!– line feed or space tag --> <img src="images/head-turnip.jpg" border=1> </center></body></html>

Browser (Internet Explorer)

Audio and Video

You can embed sound effects or videos on a page:

<embed src=“images/burp.wav” autostart=true>

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 <body> tags.


View Source Code / Save As / Edit


Find a Web page you like.

View ‘Source’ COPY all source code to a text editor (Notepad or Apple Works).

Save as ‘name-description.html’ in your folder in the folder ‘My Documents’

My Documents/john/john-turnip-head.html

Create a sub-folder called ‘images’ and save your favorite pictures in this folder. To get pictures (JPG’s or GIF’s) from the Web, search Google Images. Right click (or CTRL

click on Mac’s) on a picture and save the image to you images folder.

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.

1

2

3

4

5

6

Set up your work folders.


documents

Desktop

your nameyourname-lab-book.pptyourname-web-page.html

C: orHard Drive

images

cat.jpgball.gifsong.wavmovie.wmv

Never leave your files on the desktop. Files left on the desktop will get deleted.

File Structure

File Names1) Use long descriptive names like

school-date-name-description.html2) Use lower case text.3) Use “-” between words.

Do not use “_” or “ “

Good: biy-hot-shot.html Bad: biy_hot_shot.htmlBad: biy hot shot.html


You,Client

Internet Components

DomainNameServer

Type a URL like ‘www.build-it-yourself.com’ in theaddress 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 pagefrom the Internet at the appropriate IP address.

Your localInternetService

Provider

RouteServer

You,Client

Internet Components

DomainNameServer

Routers&

Switches

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.

Your localInternetServiceProvider

Routers&

SwitchesWebsiteInternetServiceProvider

RouteServer

You,Client

Internet Components

DomainNameServer

Routers&

Switches

I N T E R N E T B A C K B O N E

Your localInternetServiceProvider

Routers&

Switches

WebsiteHost

Server

WebsiteInternetService

Provider

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.

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.


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.

<font color = “red”> Title </font>

How many HTML commands are there?

Web Browser (What are 2 popular browsers?)

Application that converts HTML to a screen display



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


http://www.hotshot.com/


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)


HTML

• 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 is ?


HTML

What are browsers ?


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.


Editing A Simple Table

<table>

<tr><td>

</tr></td>

<tr>

</tr>

</table>

<td>

</td>

<td>

</td>

<td>

</td>

row

row

data data

table

data data

<div align="center"> <table border="0" cellpadding="5" cellspacing="5" width="650"> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 1:<br>

Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> <tr> <td width="250" valign="top" align="left"> <img border="0" src="images/placemark.jpg"> </td> <td width="400" valign="top" align="left"> <font face="Times New Roman" size="4" color="gray"> Team 2<br>

Add text here that describes your research, storylines, goals, and solution. </font> </td> </tr> </table></div><p> www.Build-It-Yourself.com

Editing Simple Table

Change Image

Change Text

<body bgcolor=“gray"> <center>

<font size=6 color=purple face=arial> Hot Shot Web Designer<br></font>

 <font face="arial" size="4">

<a href="index.html">Home</a> | <a href="table.html">Page 2</a>

</font> <p>


Navigation

Preparing Images

1. Capture JPG’s and GIF’s from Web sites

2. Make your own image in Power Point, Appleworks Paint

3. Download photos from a camera

Process image in:

Photoshop

Paintshop Pro

Free Online Tool for editing gif’s (crop and size):http://www.gifworks.com


http://www.gifworks.com/

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


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:

1) Goals and accomplishments

2) Hobbies and interests

3) Friends and heroes

4) Favorite quotes and jokes

5) Short story about how you would like your future to unfold.


Website Map and Navigation

Home Page

FavoriteStuff

Friends FavoriteWeb sites

Hobbies Heroes


File Structure Folders

Web Site

index.html Section 1 Section ‘n’

Sec1 Imagessec-1.html sec-n.html Sec1 Images


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.

<body background=“sparkle-background.gif”>

Hannah


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.


Favorite Web Sites

Build Your Own Toyshttp://www.build-it-yourself.com/

Mechanical Toyshttp://www.cabaret.co.uk/

Mechanismshttp://www.flying-pig.co.uk/mechanisms/


http://www.build-it-yourself.com/

http://www.cabaret.co.uk/

http://www.flying-pig.co.uk/mechanisms/

Deployment (FTP / Backup)

You can set up a free Web Server space at:www.yahoo.tripod.com

URL for Websites built in Build-It-Yourself Workshopshttp://biyweb.tripod.com

FTP URL for transferring files from your computer to the Tripod Web Serverftp.tripod.comUID: biywebPWD: password


http://www.yahoo.tripod.com/

http://biyweb.tripod.com/

ftp://ftp.tripod.com/