|
other
pages |
|
|
| |
|
 |
|
other Tools pages text | graphics | data | print documents style sheets | audio | presentation slides | video |
A report on the web. The content is the same as the plain text (.txt) and word processed (.doc) versions. The biggest difference is hypertext. The links.
The second big difference is the dynamic nature of the web report. It can act on its own, and it can react to events that the user can control.
On intranets and, increasingly, on public internet sites.
strengths -- all the strengths of the Web -- immediately accessible for no marginal cost of production or distribution
weaknesses -- not yet as universally accepted and used as paper documents
opportunities -- reduce costs and increase readers
threats -- open to those with whom you wouldn't want to share the paper version
NoteTab
Microsoft's FrontPage, replaced by Expression Web
Adobe's Dreamweaver
open-source KompoZer
Ricci Street's Toolkit webmaking section
Hand-coding your first web page
Your lastname folder will have two files named index.html. One will be the welcome page for your ENG 260 portfolio. It will be at this address:
toLearn.net/eng260/f9/lastname/index.html
The other will be the welcome page for your web report and will be at this address:
toLearn.net/eng260/f9/lastname/web/index.html
The web version of your report will be a self-contained folder, named web/. This folder will go inside your lastname folder. This web folder will have an images subfolder that will have in it all of the graphics that you use in the web version of your report.
This folder will also have at least three or four HTML pages.
This is the welcome page for your report. It will function as the cover sheet and front matter of a printed report. It will have the report's main graphic, title, and the summary. It will also have the table of contents, and the list of illustrations (tables and figures) that will all be linked to the appropriate pages. Finally, it will have a navigation bar that will also link to all of those pages. The same navigation bar will be on all of the pages. In addition, this page can have whatever other text you think appropriate as well as more graphics: informational, decorative and structural (wayfinding).
The other HTML pages will contain the main sections of your report as well as a final page with the conclusions and recommendations. You should give these HTML files names that reflect the content. For example, if you are comparing player A Joe Smith to player B Tom Jones, then you might name the pages smith.htm and jones.htm.
These pages will look like the index page, the same basic 3 x 3 table with title graphic in the top row and ID info in the bottom row.
The main graphic should not exceed 1000 pixels. 800 would be even safer (to avoid horizontal scrolling by user).
The width of your background table should be set to 100% to accommodate every user's window width. However, I would recommend a fixed width outer table of 1000 pixels max to hold the information that you want the user to read. This is one of the few times when I recommend a fixed width for parts of your web page. Within that fixed 1000 pixels, use percentage widths.
|
|||||||||
You need up to a dozen colors that work together to optimize attractiveness and accessibility:
text color, link color,
perhaps separate colors for unvisited and visited links - try
PageTutor's Color
Picker
headings colors
main background color,
secondary background color(s), box (tables and figures) background
color(s) - try ColorJack and
ColorJack's Sphere
highlight, border, and
structural graphics colors
copy what is in the box below, the inside text only, not the box itself, and paste it into the center cell of your page with KompoZer.
|
Heading 1 Heading 2 Heading 3 Heading 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Tag Heading 1 with the h1 tag, Heading 2 with the h2 tag, etc., and the text with the p tag.
With your FTP client copy the file style.css into your lastname/web/images/ subfolder.
Copy the line of code below (including both brackets) and, using KompoZer's source code view, paste it into the <head> section of the index.html page's HTML code:
<link title="New Media Ventures house style" rel="StyleSheet" href="images/style.css" type="text/css">
Save your page. If you haven't already given the page a title (for the <title> tag, do so now).
Your page will look like a page from our course web. Find my colors and change them to yours.
Make any other changes to the style sheet that you think will make your page more attractive and accessible.
When you are happy with the color scheme and overall page design, save this page multiple times.
Save it once as template.htm
Save it several times as each of the file names for the sections of your report. For example, smith.htm, jones.htm, recs.htm
HTML Basics: Nested Tables
How are people going to get around your web site? When you re-purpose your 10-page .doc or .pdf printed report or term paper on your project web, what will replace the staple and page numbers?
If you look at the lower half of the Webmonkey Cheatsheet, you'll see tags for tables and forms (we're ignoring frames). Tables are used for layout, that is, for positioning parts of web pages. The coding is tricky, especially when you nest tables. FrontPage excels at coding tables.
|
How to make a navigation bar that will appear on the same place on all your web pages.
With the center left cell of your template:
1) Draw a four-row, one-column table from with a width
of 100% (of the cell width). You would have as many rows as your have
pages in this web, inclding the index.html page. If you make this inner
table less than 100%, you probably want to center it, too.
2) Within each cell of the four-by-one table, nest a one-row,
one-column table.
3) Type and center text in each of the four one-celled tables.
4) By right-clicking in a cell and selecting Cell Properties, you can
adjust the table and cell attributes to get something interesting.
The example below tries to show some variety; a usable navigation bar probably has more consistency, as does the lower example. Note that "harvest" and "Conclusions and Recommendaitons" is a link, made in the usual way. You would link yours to each of the pages of your report.
I have made each of these differently to show you the possibilities. I highly recommend that for your business report, you follow the principles of consistency and repetition.
After you have made a nav bar that is attractive and accessible, copy it and then paste it into each of the pages of your web.
As you can see, at the bottom of all of my pages, I have three lines: when the page was last (significantly) modified, my name, and the URL in case some well-meaning soul should (gasp!) print out the page and at a later date want to find his way back or link to it.
This information (and more) is also in the meta tags in the head section of all my pages.
|
