Upload
gloria-porter
View
213
Download
1
Embed Size (px)
Citation preview
Web DesignLab Book
www.Build-It-Yourself.com
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/http://www.htmlcodetutorial.com/
www.Build-It-Yourself.com
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/
Pixarhttp://www.pixar.com/
www.Build-It-Yourself.com
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
Website Development Tools
www.Build-It-Yourself.com
Gimp: Freeware version of Photoshop.
http://www.gimp.org/downloads/
Free Online Tool for editing gif’s (crop and size).
http://www.picresize.com/
Free Online Tool for making animated gifs.
http://www.myspacegens.com/handler.php?gen=animatedimage&p=view&id=2818834919
Notepad++: Advanced Text Editorhttp://notepad-plus-plus.org/download
Setting up text editor on Mac’shttp://www.build-it-yourself.com/biy-projects/proj-web-design/resources/mission-web-design-textedit-tutorial.ppt
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.
www.Build-It-Yourself.com
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
www.Build-It-Yourself.com
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
www.Build-It-Yourself.com
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 Speed
4/10ths of a second … time to blink your eye.
3/10ths of a second … time to send a signal from Boston to China and back.
www.Build-It-Yourself.com
Web Design
Hot Shot Web Designer
www.Build-It-Yourself.com
View / Source Code
html file sections (index.html)
<html>
<head>
< ! - - page description info - - >
</head>
<body>
< ! - - page layout code - - >
</body>
</html>
www.Build-It-Yourself.com
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”>
Hot Shot Web Designer
</font>
<img src=“images/turnip-head.jpg” border=1>
</center>
</body>
www.Build-It-Yourself.com
RGB000000FFFFFF – WHITEFF0000 - RED
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><!-- The Title Section Starts Here --><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><!-- The Title Section Starts Here --> <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>
www.Build-It-Yourself.com
Web Page
Web Design
HTML code
<html><body bgcolor=gray><!-- The Title Section Starts Here --> <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
Hot Shot Web Designer
www.Build-It-Yourself.com
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
www.Build-It-Yourself.com
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.
www.Build-It-Yourself.com
File Structure
File Names1) Use long descriptive names like
school-date-name-description.html2) Specify names in hierarchical order (Earth,
Country, State, Street)3) Use only lower case text.4) Use “-” between words.
Do not use “_” or “ “
Good: biy-hot-shot.html Bad: biy_hot_shot.htmlBad: biy hot shot.html
www.Build-It-Yourself.com
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.
www.Build-It-Yourself.com
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.
<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
www.Build-It-Yourself.com
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
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
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
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
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
www.Build-It-Yourself.com
<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>
Editing Simple Table
Change Image
Change Text
www.Build-It-Yourself.com
<body bgcolor=“gray"><!-- The Title Section Starts Here --> <center>
<font size=6 color=purple face=arial> Hot Shot Web Designer<br></font>
<!-- Navigation --> <font face="arial" size="4">
<a href="index.html">Home</a> | <a href="table.html">Page 2</a>
</font> <p>
Navigation
www.Build-It-Yourself.com
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.
www.Build-It-Yourself.com
Scrolling Title
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.
www.Build-It-Yourself.com
HTML Questions
If you forget the format for an HTML command, search Google.
Search Key Examples:- html table border color- html align text
A good HTML code syntax reference is:http://www.htmlcodetutorial.com/
www.Build-It-Yourself.com
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.
4. Process images.Gimp: Freeware version of Photoshop.
http://www.gimp.org/downloads/
Free Online Tool for editing gif’s (crop and size).
http://www.picresize.com/
Free Online Tool for making animated gifs.
http://www.myspacegens.com/handler.php?gen=animatedimage&p=view&id=2818834919
www.Build-It-Yourself.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.)
www.Build-It-Yourself.com
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.
www.Build-It-Yourself.com
Website Map and Navigation
Home Page
FavoriteStuff
Friends FavoriteWeb sites
Hobbies Heroes
www.Build-It-Yourself.com
File Structure Folders
Web Site
index.html Section 1 Section ‘n’
Sec1 Imagessec-1.html sec-n.html Sec1 Images
www.Build-It-Yourself.com
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
www.Build-It-Yourself.com
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
Deployment (FTP / Backup)
A free website account can be created on www.tripod.comGoogle also has a free web server (search for 'google web pages')
Or students can use the BIY tripod account:www.tripod.comUID: biywebPWD: password
To upload your files:1) Click on ‘Build a site of your own’2) Click on ‘File Manager’ (top menu bar)3) Click on ‘New Directory’ Create a new folder with your name.4) Create a new directory in your 'name' folder called 'images'5) Change 'upload via' to 'single files'Browse to select your html files and then click on upload to get them on the Tripod web server6) Follow the same procedure to upload your jpg or gif files to the images folder.
To view your files:You should see your new website at:http://biyweb.tripod.com/name/home-page.htmlYou must create your own 'name' folder.Then home-page.html should be the main page file name of your website.
www.Build-It-Yourself.com
Deployment (FTP / Backup)
You can set up a free Web Server space at:www.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
www.Build-It-Yourself.com
Deployment (FTP / Backup)
You can set up a free Web Server space at:http://members.000webhost.com/
URL for Websites built in Build-It-Yourself Workshopshttp://biy.herobo.com
FTP URL for transferring files from your computer to the 000Webhost Web Serverftp://biy.herobo.com ?????UID: [email protected]: west0000
www.Build-It-Yourself.com