Building Web Pages
Quick
Start
Outlined below are 5 basic
steps to creating a usable web page. It does not really matter what brand
software is used so long as it is easy. I regularly use "Composer" from Communicator
-FREE and "FrontPage" - COSTS LOTS! from Microsoft. These have a graphical
interface - So far I've refused to learn HTML coding -although I've needed
to change some of the HTML when I've become desperate!
1. Text:
(See Tables
below)
Start a new web page.
Type in some text.
You can adjust the colour, size, alignment, etc pretty much the same as in a word processor.
Give your web page a title - it used when people add your site to their list of favourites or bookmarks.
Save your work with a simple file name (e.g. webpage.html) Do not use spaces or special characters in the filename.
2. Images: It's important that you load all images to an online file
and that you use the online address for all pictures. You need to upload
them to a folder called "images" or similar. Take their "online" address
for them not their folder address
on your computer.
1.
Using a digital camera to take a photo.
Make sure the image is no larger than 640 x 480 pixels or you will need
other software to reduce (crop) it to a smaller size. Do not click on the
image until you see 'handles' and drag it to a smaller size! Once the photo
has been loaded onto the computer place your cursor where required and insert
the photo.. You will usually work with a higher number of pixels but as a
general rule try to keep the image file sizes below 100 KB for fast downloading.
2.
Images from the Web
My Clip
Art Site
- has backgrounds and clip art, lines, animations etc.
3. A Massive Links Page
http://www.acu.edu:9090/~armstrongl/geography/geog.htm
The Section on Page Building is Below
Page Building & Concepts
*
Using Netscape Composer
*
Sources of Icons and More
*
Building K-12 Class Web Pages
*
Teacher/Class/StudentWeb Pages
4.
Composer Tutorial
Adding Graphics - The Big Picture
Ready to learn how to put graphics on web pages?
With Composer, nothing could be easier.
Make sure you have a background in place. The reason for this will become clear as we move through this tutorial. You can use a plain colour if you'd like, the results will be the same.
There are two types of graphics that you can use when building web pages that are accepted by almost every browser. One is gif and the other is jpg. The formula for which one to use is entirely up to you. There are other types of graphics that can be used but not all browsers can see these other types. Stick to either of these two choices.
To download a graphic using Netscape
, place your cursor over the graphic. Click
the right mouse button, a menu will pop up. Scroll your mouse down to "Save
image as...". You will need to know which directory you are downloading to
.
Use the Formatting bar to center align your
page. To add graphics to your web page, click on the
Image icon located on your Composition toolbar. You will be presented with
the Image Properties dialog box. Click on the Choose File button. You will
then need to scroll to the directory where you have stored your graphic files
and choose one to open. This will place the path to the image location inside
the text box located next to the Choose File button.
Don't worry about the rest of the formatting features for right now.
3. Just click OK for the graphic to be added
to your web page. I also hit the Enter key to drop me to a new line to add
the other graphic.
As you can see, adding images to web pages with Composer is very easy to
do. Point and click is the only way to go for me!
3. Links:
Links are entered in the web editing software but can only be tested in
preview mode or in a browser such as Explorer or Netscape. There are five
main types:
- links to other pages in your site (e.g. page2.htm)
- links to other web sites (e.g.
http://www.kidmanpkps.sa.edu.au/home/waroy
)
- links to your email (e.g. mailto:waroy@kidmanpkps.sa.edu.au
- links to documents (e.g. slides.ppt)
- links to other places on same page (e.g. #top)
Some working examples are included in this page.
4. Tables
:
Web pages have limited layout options compared to a word processing document
(typically no tabs or multiple spaces)
One easy strategy is to insert a table (e.g.
2 rows by 1 column) and place text, images or links in a suitable cell.
The border of the table can be made invisible if required by setting
the table border size to 0
5. Upload:
General instructions:
- test your site thoroughly in both Netscape and Explorer
- login with sufficient privileges to run FTP (File Transfer Protocol) software
- connect to your ISP (user name and password required)
- upload to your ISP all web pages AND all images
- confirm in a browser that your site uploaded successfully
If you are looking for a site
to put your page,
read this page
on my web site.
If you are looking for
an easy site where you can design a page online,
read this page
.
FOR SCHOOL PAGES READ THIS:-
Logon to your school site
Goto <Homepages> on the left side menu
Choose <Page Uploader>
Click <Browse> and choose the file(s) you want to upload
Click<Upload>
that's it, you're online!
The other way is for you to save it the file so I can put
your page on our Intranet. I'll show you how to do this!
6. FrontPage Tutorials
:
http://www.icemocha.com/tutorials.htm
http://www.fgcu.edu/support/office2000/frontpage/index.html
http://www.electricteacher.com/tutorial2.htm
Updated.
Wayne Roy
November 2002
Update Dec2002
Updated March 2003
Index
