Our Lab Book - Future Website of bluemarshmallows
Download
Report
Transcript Our Lab Book - Future Website of bluemarshmallows
Ruthie, Gabby, Laura
HOME
PAGE
Ruthie
Laura
Gabby
Games
ugly
average
Ugly
Good Looking
1. Set goals
2. Build on others ideas
3. Teamwork
4. Break problems into simple parts
5. Document
Website Designers Goal
Evolve from
know-nothing,
nat-brain
rookies …
Reference Websites:
http://navigators.com/internet_architecture.html
http://www.rci.rutgers.edu/~au/workshop/int-def.htm
http://www.profitgate.net/webchart.html
http://www.build-it-yourself.com/project-website/
into
Incredible
Website
Designers
Website Designers Plan
1.
2.
3.
4.
5.
6.
7.
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
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
Presenting Ideas
Ugly
Average
Way Cool
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
Web Design
Bad HTML code
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 Design
Browser
(Internet Explorer)
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>
www.Build-It-Yourself.com
Web Page
Hot Shot Web Designer
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
View Source Code / Save As / Edit
1
2
3
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
4
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.
5
Edit the tags, text and image names. Then save the html file.
6
Launch Internet Explorer. File / Open ‘john-turnip-head.html’
Click on ‘Refresh’ after an edit is made and saved.
www.Build-It-Yourself.com
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
your name
yourname-lab-book.ppt
yourname-web-page.html
images
www.Build-It-Yourself.com
cat.jpg
ball.gif
song.wav
movie.wmv
File Structure
File Names
1) Use long descriptive names like
school-date-name-description.html
2) Use lower case text.
3) Use “-” between words.
Do not use “_” or “ “
Good:
Bad:
Bad:
biy-hot-shot.html
biy_hot_shot.html
biy hot shot.html
www.Build-It-Yourself.com
Internet Components
Your local
Internet
Service
You, Provider
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.
Domain
Name
Server
Your local ISP will then request a Web page
from the Internet at the appropriate IP address.
Internet Components
Routers
&
Your local
Internet Switches
Service
You, Provider
Client
Domain
Name
Server
Routers
&
Switches
Website
Internet
Service
Provider
Route
Server
INTERNET BACKBONE
A Route Server will determine the best route from your ISP to the ISP that hosts
the Website you want.
Internet Components
Routers
&
Your local
Internet Switches
Service
You, Provider
Client
Domain
Name
Server
Routers
&
Switches
Website
Internet
Service Website
Provider Host
Server
Route
Server
INTERNET BACKBONE
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.
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
HTML
What is 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 are browsers ?
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>
table
<tr>
<td>
<td>
row
data
data
</td>
</td>
<td>
<td>
</tr>
<tr>
row
data
</td>
data
</td>
</tr>
</table>
www.Build-It-Yourself.com
Editing Simple Table
<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>
Change Image
Change Text
www.Build-It-Yourself.com
Navigation
<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>
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
Process image in:
Photoshop
Paintshop Pro
Free Online Tool for editing gif’s (crop and size):
http://www.gifworks.com
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
Favorite
Stuff
Hobbies
Friends
Heroes
www.Build-It-Yourself.com
Favorite
Web sites
File Structure Folders
Web Site
index.html
Section ‘n’
Section 1
sec-1.html
Sec1 Images
sec-n.html
www.Build-It-Yourself.com
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
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
Favorite Web Sites
Build Your Own Toys
http://www.build-it-yourself.com/
Mechanical Toys
http://www.cabaret.co.uk/
Mechanisms
http://www.flying-pig.co.uk/mechanisms/
www.Build-It-Yourself.com
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 Workshops
http://biyweb.tripod.com
FTP URL for transferring files from your computer to the
Tripod Web Server
ftp.tripod.com
UID: biyweb
PWD: password
www.Build-It-Yourself.com