![[Administration]](../figures/1.gif)
![[Schools]](../figures/2.gif)
![[Programs]](../figures/3.gif)
![[Information]](../figures/4.gif)
![[Lifelong Learning]](../figures/5v.gif)
![[Searching the 'Net]](../figures/6.gif)
![[www.MCCSC.edu Menu]](../figures/0.gif)
Plan and Design
Construct
What program do you use to develop web pages?
Pico ... Notepad
Agile ... HTML Assistant
Word97 ... Claris ... Composer ... Front Page
Publish
How do I get the file from my computer to Monon?
View the page
... on Monon
Take the Next Steps:
Learn HTML: HTML Details
Plan and Design
Designing for the Web is not so different from designing for print: You are providing visual cues to help your reader navigate the space. The difference is that people already have a built-in expectation of how paper works: They know the feel of paper, how to turn a page, how to follow instructions like "continued on page 14." With the Web -- and with other interactive media -- you are creating a new environment, and at the same time, training the reader to develop a new set of expectations. Then, of course, you must meet those expectations through consistent design and use of design elements.
The key element of Web design is visual "wayfinding" through a vast and undefined abstract space -- call it "cyberspace," or even conceptualize it as a computer monitor. Just as sign designers present clearly labeled directions, Web designers have to take complex information and clearly point the user in predetermined directions.
A good Web site is clear and easy to read, like a good layout. It also has navigation aids on each separate Web page -- often a toolbar that offers a brief outline of the whole structure; the click of a button returns the user to the home page or to a custom location.
Keep in mind that most people still don't like to read a lot of text on a screen -- [do as I say, not as I do!]. Bite-sized bits of information, often just enough to fit on a single screen without scrolling, coupled with clear directions and navigational assists, will keep a web-surfer's attention long enough, perhaps, to read your material -- the ultimate goal of making information available.
Planning a Web Page. Take a sheet of paper and hold it up to the browser window on the monitor. Notice how much of the visible space is occupied by the browser's tools -- the scrollbars along the side and bottom, the icons and text at the top, the location and data across the bottom. Lightly mark the limits created by those elements and outline a viewing rectangle. Assuming that everyone accessing your page uses his/her browser "full screen," that leaves you an area about 8-8 1/2 inches wide and 6-6 1/2-7 inches high (or deep) to space your message or information.
The Web and nearly all browsers allow the designer to "bleed" images and text off the screen to the right and down the page past the bottom. Practically, though, users are more comfortable using the up-down scrollbar to move down the page than the left-right scrollbar to move side-to-side. Having said that, even if you plan your page to be no wider than 8 inches (about 600 pixels), there is no guarantee that the viewer won't have the browser set to a smaller size. Planning a page for the WWW is a balancing and guessing act. You balance good design and impact against your guess at how the viewer will be seeing your product.
The opening screen. Once you have determined that your opening screen will be 600 pixels wide by 500 pixels deep (about 8 x 7 inches), try to keep the main elements of your presentation in that space. Again, you will see many excellent pages that "violate" that principle. Usually those fall into two categories:
The design is clearly vertical -- elements or navigation is designed to move the user from the top of the page toward the bottom; and the content is primarily textual -- progression down the page is as natural as reading a page in a book or a periodical.
Less effective pages that violate this principle are usually of a horizontal design (across the screen) but have important elements placed so that the viewer must scroll down (without any visual cue) to discover them. For most of us, keeping at least the opening, introductory, material within that 600x400 frame will keep a web-surfer's attention long enough, perhaps, to read our material. The sample pages at http://www.mccsc.edu/samples/class2.html provide additional tips about formatting your page using "Table" cells for placement of text and graphic elements.
More information concerning web page design can be found at More Designing Web Pages
and at Lynda Weinman's pages.
Back to ...
the TopAdd Content | | HTML Details | | www.MCCSC.edu | | Weaving Web Wonders
Construct the Page
"What program do you use to develop web pages?" is probably the most asked question by designers new to the process. "What word processor/spreadsheet/data base do you use to create documents/reports/files?" The answers to these questions depend, for the most part, on personal preference, institutional support, costs, and available technical resources.
Once the developer has a plan and a design for the product, there are two more steps to bringing the page to life on the World Wide Web:
Constructing the page; and Publishing the page on the web server.
Each of these involves sub-steps and processes which are determined by each individual's way of working with the technology, balanced against what the institution or corporation has provided in the way of support for a variety of different applications.
Your choice of program or application in the MCCSC environment is limited by the following:
[Note: while an extension set-up for any ONE of
these applications has been considered, installing the extensions for
multiple applications has created conflicts between the applications on
the web server. See the instructions, below, relating to the FTP protocol to use with these
applications.]
...
... documents and images created on the local computer in any web development tool, text editor, or graphics program must be sent to Monon using File Transfer Protocol (FTP), either through a separate application (such as WS_FTP or Fetch) or through the FTP capability of the web application; and ...
...your individual comfort level with Hyper Text Markup Language (HTML), with graphics-enhanced composing tools versus text-based editing applications, and with the FTP process.
Building the page. Essentially, there are three ways to actually produce an HTML webpage:
On the local workstation, any word processor can serve as a text editor. That means you can use Notepad, WordPad, Word, Claris Works, MS Works, as long as you save the document in "text" format with an "*.htm" or "*.html" extension. In this case, less is actually more. The simpler the application, such as Notepad, the less likely the application will save unwanted control characters which could affect the appearance of the displayed document. On the server, the Pico text editor is available from the Linux/UNIX prompt.
Files created on the local machine have to be sent via FTP to Monon. Files created on Monon are already in place and do not require FTP.
HTML Editor -- These applications are installed on your local workstation. Examples include HoTMetaL, HotDog, Agile, HTML Assistant. While slightly more convenient than having to type the HTML markup tags, these applications require the user to know which tags, which attributes, and which values are needed to produce a desired appearance. The application usually creates a template of HTML tags which outline the opening and closing <HEAD> and <BODY>; areas of the <HTML> document. The user types the page content and inserts other tags by highlighting and using the mouse to point and click selected markup. Files created on the local machine have to be sent via FTP to Monon.
WYSIWYG Composers -- These applications are becoming more and more prevalent and convenient. They allow the developer to design the page using word processor-like features -- including font styles, sizes and colors, background color, and table formats to enhance the vertical and horizontal placement of text and images.
WYSIWYG features are included in Word 97 and Claris Works, as well as in dedicated products such as Netscape Composer, Adobe Page Mill, Microsoft Front Page and others. There are a number of conceptual variations both between these applications and between the concepts of using either text or HTML editors to produce a marked-up document.
See the sample pages created with Word 97 using WYSIWYG applications. The concepts will apply to Claris Works, as well as in dedicated products such as Netscape Composer, Adobe Page Mill, Microsoft Front Page and others. However, personal experience with WYSIWYG may convince you that a little knowledge of HTML mark-up is beneficial. Web pages created using one proprietary composer may appear strange and misbehave on the browser of another company. For a more detailed discussion of this phenomenon, see Browsers and the Web and/or Lynda Weinman's material.
Nearly all "rename" inserted image, sound, or video files to an internal convention. Thus, your class.gif becomes Image1.gif, open.wav becomes Sound1.wav, etc. And nearly all expect that these "inserted" files will reside in the same directory as the root or base HTML document. Some will allow a "relational" location. That is, if the image is in a subdirectory on the local machine called "images," the mark-up expects the image to be in a sub-directory on the server with the same name. Debugging situations created by these conventions is often time-consuming and requires a rudimentary knowledge of HTML mark-up;
Most of the dedicated applications allow the user the option of saving pages and images as separate files or of saving the entire production as a "web." As stated above, The MCCSC web server uses a Linux/UNIX operating system with, at the current time, no proprietary publishing extensions, such as those for Microsoft's Front Page, Adobe Page Mill, or Netscape's Composer. This means that you can not send, directly to Monon, a "web" of documents and images created as a package by one of these applications.;
At least one "web composer," Microsoft Publisher, DOES NOT give the user this option. There is a very cumbersome work-around using the temporary files created by a browser and a separate FTP application; and
a page created with these applications has to be sent via FTP to Monon
Images, sound and video. Each of these will be a separate file, created with any number of different applications, captured from "freeware" or "shareware" websites, floppies or CDs, or scanned from original art or photographs.
The issue of the variety of browser versions is most critical when dealing with images, media, and fancy text elements in Web design. Lynda Weinman's <designing web graphics> from New Riders in In dianapolis is one of the simplest, yet comprehensive, examination of images, artwork, graphics, tables, colors, typography, alignment, other media, and style. Her comparisons of a sampling of the most common browsers in use -- from the many versions of th e ubiquitous Netscape and Mosaic to the proprietary applications offered by the commercial online services -- offer valuable insights into the difficulties Web designers face when deciding between simple text pages and complicated, but more attractive, pages with images and tables.
A more detailed discussion of GIFs and JPGs, transparent GIFs, and imagemaps can be found in the second section of this topic.
Graphics, sound, and video files created on the local machine have to be sent via FTP to Monon.
Back to ...
the TopAdd Content | | HTML Details | | www.MCCSC.edu | | Weaving Web Wonders
Publish the Page
Copying to/from Pico
FTP from...to
FTP protocol in WYSIWYG
"How do I get the page/image/sound file from my computer to Monon?" The critical element in this question is an appropriate account on the MCCSC / Monon webserver. The second critical element is access to that account through FTP or an FTP-component of a WYSIWYG application. Text pages created using Pico on Monon do not need to be moved but are immediately accessible on the WWW. All other files -- images, sounds, videos -- do need to be moved from the local computer to web space on a Monon account.
There are two types of web accounts on the server:
School accounts controlled and managed by a building-level "webmaster" or "web editor"; and Individual accounts related to an e-mail account --
Staff e-mail accounts; and
Class or project accounts created for either e-mail or web activities.
School accounts were created for each school or department as part of the initial development of the MCCSC web site. Each school has an individual assigned responsibility for the username and password for these accounts.
These are accessed via telnet (QVT, Telnet) in the same way as Pine e-mail:
Telnet to monon.mccsc.edu; Login with the appropriate "webmaster" user ID and password; Confirm that the Linux/UNIX prompt displays
[username@monon schoolname]$
and NOT [username@monon username]$
This distinction demonstrates the user's location on the Monon
server.
[username@monon username]$ is the location of
the school "webmaster"'s e-mail directory;
-- a Linux/UNIX "pwd"
command (typing pwd at the $ prompt) would reveal this as
/home/username -- while [username@monon schoolname]$
is the location of the school's home web directory -- -- a Linux/UNIX
"pwd" command would reveal this as /home/httpd/html/schoolname.
If the login takes you to the e-mail prompt [username@monon
username]$, or if you have to
Q - Quit Pine to
get to the [username@monon username]$ prompt, type the
Linux/UNIX command cd [change directory]
/home/httpd/html/schoolname to switch to the proper location
--
[username@monon schoolname]$
It is in this directory that any Pico text editing or text (HTML) file creation can be accomplished. It is also to this directory that any files on the local machine need to be FTP'ed.
The school account can also be accessed via FTP (either a dedicated application such as WS_FTP or Fetch, or an FTP utility associated with the WYSIWYG or HTML editor application.
Individual accounts were created for each staff member as part of the initial development of the MCCSC e-mail process. Class or project accounts are created by request to the MCCSC Webmaster. Each account has an individual assigned responsibility for the username and password for the account.
These are accessed via telnet (QVT, Telnet) in the same way as Pine e-mail:
Telnet to monon.mccsc.edu; Login with the appropriate user ID and password; Q - Quit Pine to get to the [username@monon username]$ prompt Use the Linux/UNIX command "ls" to confirm the presence of a www directory
if present, use the command cd www to change to the www directory --[username@monon www]$ is the appropriate location;
if NOT present, use the command mkdir [make directory] www to create the directory and use the following commands to make the directory "world readable": ...from [username@monon username]$, type chmod 755 . [755 DOT] ... cd www and retype chmod 755 . [755 DOT]
It is in this www directory that any Pico text editing or text (HTML) file creation can be accomplished. It is also to this www directory that any files on the local machine need to be FTP'ed.
These accounts can also be accessed via FTP (either a dedicated application such as WS_FTP or Fetch, or an FTP utility associated with the WYSIWYG or HTML editor application.
Accessing Monon. Once you have determined your account status on Monon -- either the school account or the individual e-mail-associated www space -- moving the *.wav, *.gif, *.jpg or other inserted file requires FTP -- File Transfer Protocol. In terestingly, since *.htm/*.html files are text, these may be moved either with FTP or through a direct "copy-paste" to a open, Pico, file on Monon:
Copying to Pico: With the HTML text document safely saved, use the mouse to highlight the portion you wish to copy. Use the Edit / Copy command to make a copy to the clipboard. With the Pico file open (use Alt-Tab or logon to Monon, Q - Quit to [username@monon username]$, cd www to [username@monon www]$ and open a Pico file -- pico filename.html), use the arrow keys to position your cursor. Then use the Edit - Paste from the terminal (QVT) window.
Copying from Pico:
With the Pico document open, use the mouse to highlight material you wish to copy. You are limited to the "chunk" visible on the screen, so do not try to scroll beyond that area. Use the Pico window's Edit - Copy to put the material on the clipboard. Open the destination file, either a word processor file or another Pico file, and use that document's Edit - Paste command to insert the material at your cursor position. If you are doing Pico-to/from-Pico, you must close (Ctrl-X) the first file and open the destination file -- or just open two (or more) telnet sessions to your Monon account and Alt-Tab or use the Task Bar to switch between them.
FTP the file to Monon:
For more detailed information, see The Mysteries of FTP and/or FTP Primer.
Both Windows and Mac stations can use a "FTP client" to send files to and from the local computer and the monon server -- in much the same way as the "telnet" client connects the two for communication. File Transfer Protocol clients can have sophisticated Windows/Mac interfaces or can be simple text applications. MCCSC uses a "standard" FTP client on all machines and networks.
If you have an FTP client, choose the application (such as WS_FTP, FTP in QVTNet, or Fetch) from the Windows Internet Applications menu group, or from a Mac or Windows 95/NT/98 folder, or from Start / Programs.
Windows 3.x To open a folder or start a new application from Program Manager while leaving the browser (or any other application) running, use the Alt-Tab toggle: Hold down the left Alt key with your thumb and tap the Tab key once; the name of a running program appears in a gray box in the middle of the screen; repeat Tab until you see Program Manager; then, release Alt.
Windows 95/NT/98 The Windows Alt-Tab toggle also works in Windows 95/NT/98, but only for applications which are already running -- already listed in the Task Bar. Use either the Task Bar or Alt-Tab to switch to another application.
To start a new application, use Start, or the application icon from the desktop, or the special suite toolbars (like MS Office).
Mac Tip:
Use the Applications "drop-down" menu to find other running applications and to "task-switch" between applications.
In general, you must identify the server to which you wish to connect -- monon.mccsc.edu, supply your userid to gain access, and specify the directory on that server to which you wish to be connected -- /home/userid/www. Another feature allows you to specify the directory or folder on your Windows or Mac computer which contains the file to be sent to the server. Highlight the file you wish to send and select Send or select a directional arrow pointing to the server directory. Files on the server may be sent "down" to your computer in the same manner. Highlight the file, and select "Retrieve" or the opposite directional arrow.
Mac and Windows 95/NT users will be sending a file all ready for the UNIX format: filename.html. Windows 3.xx users will be sending a file with a three-character extension: filename.htm. The monon server requires that these files be renam ed to filename.html.
The Windows FTP clients will have a command to rename files. Highlight the file, select Rename, and follow the directions. Files retrieved from the server will have the suffix shortened to htm on Windows machines. In QVT, you may use the UNIX mv command from the FTP prompt:
mv filename.htm filename.html
Be sure to Exit from the FTP client. Monon will "time out" the connection if the line is inactive for 15 minutes, but it's better for you to be in control of the connection in a responsible way. Use standard Mac/Windows exiting procedures. Some FTPs also allow command line exits: type quit.
For more detailed information, see The Mysteries of FTP and/or FTP Primer.
FTP from WYSIWYG. With Netscape 4.x Composer, (and other WYSIWYG applications) you appear to have the options of "Publishing the Entire Web" or "Publishing Individual Files." On Monon, you must send ONLY INDIVIDUAL FILES, not the whole web.
Under the PUBLISH icon, set the "HTTP or FTP Location to Publish to:" as
ftp://monon.mccsc.edu/home/yourname/www
or (if school page) as ...
ftp://monon.mccsc.edu/home/httpd/html/school
[the HTTP protocol is the "whole web" tool;
our server is not enabled to publish "whole webs" as
single files].
DO NOT set a trailing "slash" after the last directory.
DO NOT try to send it to: www.mccsc.edu/~yourname/www
[FTP prefers the real name of the server
and will not resolve www.mccsc.edu to monon.mccsc.edu]
[the tilde (~) is an alias for "home/yourname/www"].
Back to ...
the TopAdd Content | | HTML Details | | www.MCCSC.edu | | Weaving Web Wonders
View the Page Locally
View the page that you created by using the browser.
Open your browser. Find the icon or folder for your browser and open the application -- Netscape, Mosaic, Internet Explorer.
To view a file on the local computer, use the mouse to access File, Open file... in your browser's tool bar. Open file... will List files of type (*.htm) in any location on your local computer. Browse the Drives to find your file. Choose the file you wish to view.
View the Page on Monon
Back to ...
the TopAdd Content | | HTML Details | | www.MCCSC.edu | | Weaving Web Wonders
Building Webmaster
Each school and building in the MCCSC has been assigned an Internet Protocol (IP) number identifying it to the world as a separate server. For the time being, those "servers" actually reside as sub-directories in the MCCSC Web server. (See the map.)
Each location has a building-level "Webmaster" who has "write" access to that space on the server. All building-level pages and information should be stored in that "server." Those pages will "link" to the pages of individuals and individual classrooms. This arrangement is necessary so that only the person "responsible " for a page can make changes to the page.
Currently, individuals should begin to design and create Web sites in space on the monon server as outlined above. For example, Mary Teacher from Bloomington Elementary would have a Web page at
which will be linked to the school page which can be found at
http://www.bloomington.mccsc.edu/
["bloomington" in the above URL is only representative of the actual school name. For example, University would be www.university.mccsc.edu, and so on.]
Back to ...
the TopAdd Content | | HTML Details | | www.MCCSC.edu | | Weaving Web Wonders
Administration | | MCCSC Schools | | MCCSC Programs | | Information
Search Tools