What does a webmaster do? |
What does a webmaster do?
Tech Alumni Webmaster Gene Gill's answer:
"He takes care of a website". Of course "taking care
of" includes designing new
pages, preparing the new pages for the internet, uploading them to
the internet, plus keeping all pages on the website continuously
updated with changes and additions, as well as frequently adding new
photos, and making sure that broken links are promptly repaired.
He also arranges for the purchase of
domain names
(memphistechhigh.com),
signs up and pays the monthly/yearly fee for web hosting, and takes care
of the website's email.
Knowing exactly what goes into designing pages for the internet, or
how the pages suddenly appear on the internet, is generally a
mystery to most folks. This page will show you step by step
illustrations of what the webmaster actually does to get a page "up"
- or on the internet.
The illustrations, below, show the process of adding a
complete Tech Yearbook to the Tech Alumni website. The yearbooks
are generally scanned by others and the scanned files of each page
are sent to the webmaster. That's where this process begins.
Each illustration is an actual "screen shot" of the webmaster's
computer, as he goes through the process. |
|
Click on small photos for an enlargement. |
|
|
|
|
 |
 |
|
|
1. Open each scanned
page (file), one by one, in a program called PhotoShop -
which is a photo editing software program.. Page 8
appears in the illustration. |
|
|
2.
Begin
editing each scanned page - lighten, darken, adjust
contrast, sharpen - as necessary.
|
|
|
|
|
|
|
Note: What is the difference between a page, a file, a .jpg
photo? When a yearbook page is scanned, the scanner
takes a picture of the page. The picture is
saved as a .jpg file. Thus, "yearbook page 8" in this
illustration is actually "photo 8.jpg". To distinguish
between the photos in the yearbook and photo files of the
yearbook pages, we will refer to them as either "page" or
"file" |
|
|
|
|
 |
 |
|
3. Format each
scanned page to fit the
design of the website.
|
|
|
4. Reduce the file size of
each scanned page so it doesn't take too long to load on the
website. A new edited page/file has now been created and
must be saved. |
|
|
|
|
 |
When all the scanned
yearbook pages have been edited, formatted and saved as a new .jpg page/file, it's time to create a special
".html page"
to appear on the internet, where all these newly created .jpg
files will be posted. |
|
|
|
5.
Save each new page/file as a .jpg file. The
folder holding all the new files will begin to look like this. |
|
|
|
|
|
 |
 |
|
6. Open a web editing
software program called FrontPage and begin to create a totally
new .html page where all the newly created yearbook
files will be posted.
|
|
|
7. The new .html page
layout is planned with "tables"(those dotted lines),
colors, and heading text. Tables are "invisible"
and are used to keep the various parts of the layout, in
place and from "jumping around" when the .html page is
on the internet. |
|
|
|
 |
 |
|
8. With background
color and text color added, the new .html page
layout will now look like this.
|
|
|
9.
Add a background color to some of the "tables". This
area is
where the new files will be posted/inserted one by one.
|
|
|
|
 |
 |
|
10. When the new
pages are first posted/inserted they are FULL SIZE. |
|
|
11. A thumbnail photo
(TN) of the full size page must be created ... |
|
|
|
 |
 |
|
12. ...and then
inserted in the proper space. Text is added
below the TN. |
|
|
13. Steps 10, 11, 12
will be repeated for the additional yearbook page/files. |
|
|
|
 |
 |
|
|
14. Most yearbooks
contain over 100 pages. The illustration above is
only up to page 8.
|
|
|
15. Code must
be added to each TN so that when the TN is clicked,
a full size pop up of that page will appear.
This code, which is "behind" the page and is unseen is:
<a href="cover.jpg" rel="lightbox"
title="<b></b>"> The
illustration shows all the code.
(More about this
code later) |
|
|
|
|
|
When all
pages/ files
have been added to the .html page, it's time to create a
navigation "menu" for the top of the .html page. |
|
|
|
|
|
|
|
 |
 |
|
|
16. Open a software program
called ToolBox and create "buttons" for "Home", "1969
Yearbook", "New Photos", etc. |
|
|
17. These buttons will be
added to the top of the .html page to create a menu.
|
|
|
|
|
|
|
 |
 |
|
|
18. Links (unseen code) must be
added to each button so that when it is clicked, it will
open a different page. |
|
|
19. The identical menu
must be copied to each page of the 1969 section - page by
page. |
|
|
|
When the above
process has been finished for all pages and files, it's
time to "send up" the files to the internet.
You send up the files using "FTP" which means "file transfer
process". To use FTP, you must have a domain name (memphistechhigh.com)
and pay a company to host this domain on the internet.
You pay them for so much space on the internet and you pretty
much control what you put in this space. |
|
|
 |
 |
|
20. Open a program
called WS-FTP.
When it opens, you see two large windows. The window
on the left shows all the files on the webmaster's
computer. The window on the right shows all the
files that have been sent up to the internet. (You
will have pre-programmed the window on the right to open
to the space on the internet that you pay for). |
|
|
21. Go to the left
window and select each new file that has been created
(click on them and they turn blue). In the middle
between the left and right windows you see two arrows, one
pointing to the left and one pointing to the right.
Since the selected files are going to be sent to the
internet (right side), click on the right arrow.
Immediately the files begin being transferred to the Tech
Alumni space on the internet. |
|
|
Whenever you make
the slightest change to a website file on your computer, if
you want it to be seen on the internet, you must send up the
file again. When it's sent up again, it will over-ride
the file that's already on the internet and the change(s) will
show up immediately. |
|
|
|
|
|
|
|
|
|
More about that
hidden Code... |
|
When the internet first began, everything that
appeared on a computer was written as code. You were never
sure what your design would look like, until you saw it on the
internet. Very complicated. Gradually, software programs
were developed that allowed "what you see is what you get"
design. As you designed a page, the software program wrote the
actual code for you "behind the page, where it would not be seen".
But it's there - on every single page that's on the internet.
The internet reads that code and interprets it as the shape, color,
photo, or text that we see.
Don't believe me? The
"screen shot" on the right shows the actual
source code for the complete yearbook of the Memphis Tech
High-Class of 1969 page. |
|
 |
|
|
|
|
|
If you
want to see for yourself what the code looks like for
absolutely any page, do this: When the page is
open on your computer, RIGHT CLICK anywhere on the page
and then select "VIEW SOURCE". |
|
 |
|
|
A pop up
window will appear showing you the source code for that
page. But if you're not familiar with code, you
won't understand it. |
|
 |
|
|
Some web designers don't want folks to view their source code and
they enter additional code which blocks the source code so you can't see it. As a webmaster, it is necessary to gradually
learn a little of this code so you will know, at least, how to interpret it.
Otherwise you aren't able to completely control what goes into your
designs.
|
|
|
Conclusion: To make
a minor change to any existing page that's already on the Tech
Alumni website (such as a misspelled word), the webmaster must go
through at least half of these steps. To add a single photo to
an existing page, the webmaster will go through almost every step.
To add an obituary, the webmaster will go through almost every step
three times, because he creates the new obituary
(1), works on the existing Obituary Page
(2), and works on the existing Yearbook Page
(3). |
|
PS:
There are over 5,100 pages on
the Tech Alumni website. over 100,000 photos, and over 500 folders,
holding over 200,000 individual files. It is a BIG website. |
|
|
|
|
|
|