Authoring Web Pages: References & Tips
This document is provided in support of the material covered
in lecture and to assist you in the development of your website, for the final
project. I’ve tried to provide some useful tips for working through the
project. Also, I’ve provide links to useful references, rather than replicate
it all. Each reference has its pros & cons. Use those that you find most
Publishing your website
This section describes the steps to copy or update your
website files to the web server. It starts with the assumption that you have
already created or edited your HTML file page(s), have saved the updates to
your local disk drive and are able to locate the files in Windows Explorer (the
file management utility).
where the “xxx” should be replace
with your e-mail name.
In other words, if your e-mail
address is email@example.com, you
would use an FTP address of ftp://firstname.lastname@example.org
- When you get the login dialog window, type your e-mail password
into the appropriate field.
- Navigate, or switch, to your Windows Explorer window.
- Copy your files from the Windows Explorer window and paste
them into the web browser window (the one with the active FTP session).
If you get a dialog window warning
you that the files exist, click yes to update the files.
again, replace “xxx” with your
- If this instance of the web browser was previously open
and is displaying the previous copy of your webpage, click the “Refresh”
toolbar button to force the new page down to your client pc from the web
This section is provided as a guideline of how I think you
can be most productive in working through the project.
- Sketch site design
- Sketch page design
- Work on home page function first
- Start simple – use a basic text menu
- Don’t move on until done
- Can fine-tune content later
- Start with 1st secondary page (next type of page)
- Work on integration with home page
- Work through formatting & navigation issues
- Test & rework as necessary
- Decide if you have time to enhance format & function
- Re-work menus, colors, fonts, layout, etc. as necessary
- Use “View Source” option in Internet Explore (IE) to see
how other sites implement features, or look & feel
- Duplicate pages (rename appropriately)
- Edit/refine content on pages
- Proofread, check formatting & test all links
- Submit for grading
- Define a clear purpose
- Why are you creating the web site (i.e. general
information, eCommerce, Marketing, Product Support, etc.)
- Who is the target audience? (Current Customer, Potential
Customer, Employees, Students, etc.)
- What will they be looking for?
- What tools will they be using (browser version,
- Create a site structure
- Organize your content
- “Heirarchy” is useful organizing structure, but others
- What content is available?
- What will be on the home page?
- What is sites purpose?
- Type of content on the site?
- How to find content/information?
- Identify most important elements (sub-structure)
- Create general Page design
- How will the user navigate?
- How will the site maintain consistency?
- Minimize clicks – cross site navigation, home links,
- Graphical elements
- Header, or Banner, and Footer
- Top, Left, Bottom
- Multiple levels (for sites with a lot of content)
- Use restraint
- Don’t Use
- dark text on dark background or light text on light
- hard to read font faces
- underlines in text – confuses user into thinking
- careful of background images/patterns – busy, make text
difficult to read
Site/Page Design Guides
Tools – Trial Downloads
As demonstrated in class, you can create web pages using a
simple text editor such as notepad. However, you may choose to utilize a web
page authoring tool. Each tool has it pros & cons. You will likely be more
productive by utilizing an authoring product, once you install it and get past
the learning curve associated using a new tool. Still, every good web author
also understands, and is able to work with, the underlying HTML source code.
Microsoft’s FrontPage tool functions very much like the
Office products. Unfortunately, I do not see a free trial version available on
their website at this time. I’ve also included a link to a review of these
tools in case you would like to compare them.
- Macromedia Dreamweaver & Homesite
Comes with Office Professional & can be
No current trial capabilities
Recently had a trial download period - $10
- Netscape Composer (part of Communicator)
Special [HTML] Characters:
The following lists useful web pages for identifying HTML
color codes (hexadecimal #s), in the event that you do not have a image editing
tool for this purpose.
A good explanation of web-safe
The following site includes a good overview of tables
More specifically, the following are 3 of the articles can
be found there
The Basic Table
The Not-So-Basic Table
Lean and Mean Tables (a good short
Graphics (Free Clip-art, etc.):
Microsoft clip-art/design gallery
Clip-Art (Search for “Clip art” or
“Free Clip art” in google – be forewarned, you can spend a lot of time browsing
for just the right artwork).
General information on graphics
technology can be found at:
Advanced - Style Sheets
Browser [compatibility] features
Cascading Style Sheets