|
other
pages |
|
|
| |
|
 |
|
other Tools pages text | graphics | data | print documents style sheets | audio | presentation slides | video this page |
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
In most organizations, you will use a content
management system for communicating on the organization's intranet
or on the Internet. For purposes of this course, you will make your
own, personal content management system out of free (no $$) components.
NoteTab Light
Charles Cook's KompoZer User Guide
list of video tutorials
Christopher Heng's How to Design and Publish Your Website with KompoZer
commercial alternatives: Microsoft's FrontPage, replaced by Expression Web
Adobe's Dreamweaver
Ricci Street's Toolkit webmaking section
Hand-coding your first web page
On our course web, each of you has a folder. Think of it as a portfolio to showcase your design
skills,
emphasizing attractiveness and accessibility.
Its address: http://toLearn.net/eng260/lastname/
After the .net/, all folder names and file names should be all lower case, no spaces, and as short as possible. For instructional purposes, I will refer to yours as your "lastname folder". It will include all of your assignments for this course.
This is your web. As long as you have the images and links I need, you can add any images and text or even widgets (sports scores, weather, links to social media sites) that you would like as well as whatever else you care to put there of a personal nature. In other words, if you want to make a page about your personal interests, feel free. Enjoy yourself and have some fun!
What should be in your portfolio?
This is your "home page" or "welcome page". It has, at a
minimum, links to all the other files and folders in your lastname
folder as well as links to your .txt file and to the off-site
assignments (forum, blog, wiki). The before-and-after image (cropped,
resized, etc.) and the table/chart can be on the welcome page or linked
to it. This is also the place to put your rhetorical situation as an introduction.
Its address:
http://toLearn.net/eng260/f10/lastname/index.html
your folder of harvested images, anything and everything that you download and make, including:
style sheets and screenshots (project palette, tables, charts)
you can further organize them with subfolders -- ex: lastname/images/screenshots/ or lastname/images/webreport/
Its address:
http://toLearn.net/eng260/lastname/images/
note: we will get to these other reports in the second half of the course. You will not have them for the first gateway on October 13 and 14.
a subfolder of your lastname folder
name the folder after your report title or your client -- ex: lastname/hockey/ or lastname/smith/
it will also have a welcome page with the file name index.html.
|
Its address: http://toLearn.net/eng260/lastname/hockey/index.html or lastname/smith/index.html
.doc and .pdf -- word processed for printing
.mp3, .ppt, .mpg/.wmv/.mov -- podcast, slide presentation, video
you can put these reports ...
in your lastname folder, which is what I recommend, for ex: http://toLearn.net/eng260/lastname/video.wmv
all in one subfolder, for ex: http://toLearn.net/eng260/lastname/reports/video.wmv
each in its own subfolder, for ex: http://toLearn.net/eng260/lastname/video/video.wmv
The web version of your report will be a self-contained folder, named web/ or something else that is logical, like a short title or client's last name. 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 in addition to the welcome page (index.html), with a navigation bar, template (template.htm), and stye sheet (style.css).
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/abstract.
the table of contents, and the list of illustrations (tables
and figures) that will all be linked to the appropriate pages.
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
Note and save the hex code for your colors. You will use them repeatedly to give a professional consistency to your portfolio. Hex stands for hexidecimal or 16, which in this case is the 0 - F (ten number, six letters) that will designate your colors. For example,#663300 or #FC3F98.
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 webreportstyle.css file into your
lastname/webreport/images/ subfolder. You may rename it.
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/webreportstyle.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.
The h1 tags will be the same as mine, but the p tags will be in the default font until you specificy a class for the p tags. In KompoZer's Design view, you will be able to right-click on the p tags and select the class.
Find my colors and change them to yours. Look for < color: #663300; > and use the hex code from your palette.
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.ht
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. Web-editing software excels at coding tables.
|
How to make a vertical 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.
How to make a horizontal navigation bar that will appear on the same place on all your web pages.
1) Draw a one-row, four-column table from
50% to 75% of the page
width, centered.
2) Within each cell, nest another 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 upper example below tries to show some variety; a usable navigation bar probably has more consistency, as does the lower example. Note that "harvest" and "myPix" are links, made in the usual way.
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.
|
