write requests to: takehiko@mit.edu
original : 95.10.21
last revised : 05.10.28 by TN (student project path changed)
|
4.560
Guide to setting up your class web page write requests to: takehiko@mit.edu
original : 95.10.21
|
|
This tutorial explains the basics of HTML scripts. You may use any text editor and directly make an HTML file for your web page, or you may use software such as DreamWeaver, Netscape Composer, or Flash to design a page through graphics interface and let software build a corresponding HTML file.
How Can I Get Started?
How Does a Simple HTML File Look?
Where can I find more information?
What are my classmates doing? What did 4560/4203 students in the past do?
Make an HTML file for your home page. In your account, this file should be made in your "www" directory in your Athena account
(www directory is a default space that the public can see).
If you are using PC's in the studios and the PC classroom, here is the file you need to make to start with. For the link from our class home page to work properly,
the file should be named index.html and must be placed in a subdirectory named 4560. H:www\4560\index.html If you are using an Athena UNIX workstation, $home/www/4560/index.html Since HTML file is just a text file, you may use any text editor program to make and change it. I list some programs below. Try typing some text in a text editor, save the file to the above location, and look at your page in a browser such as Internet Explorer or Netscape. (Read the next section for how.) When you change the contents of the HTML file, make sure you save the HTML file and then reload the page to make it updated. Use the "reload" button in a browser to do so. (If the content still does not get updated correctly, try holding the shift or control key while clicking the "reload" button.) 1) Text editors on studio PC's You can use any text editor, but make sure to save your file as H:www\4560\index.html and save it in plain text format. A simplest text editor you can find on any studio PC is NOTEPAD, which can read and write a text file. Start>All Programs>Accessories>Notepad You can also use Microsoft Word, but when you save a file, choose plain text format, not Word format. After saving your HTML document in a file named "index.html", check the filename in the Windows desktop. When you use these PC applications (such as Notepad and Word) and save a text file, it may automatically add .txt suffix to the filename. If this happens, change the suffix to .html in the desktop. Once you got the idea of this html file, URL, and browser, it is usually a good idea to use a web design software such as DreamWeaver on studio PC's to design HTML pages through graphic interfaces rather than directly typing up an HTML document. Its tutorial is found in the on-line help of the software itself. For advanced users, there are software such as Flash. In any program, make sure to save your HTML file into the appropriate directory. 2) Text editors on Athena UNIX machine To make a HTML file on a Athena Unix machine, do this in xterm window. mkdir $home/www/4560 cd $home/www/4560 Then you can use any text editor program such as jot, xedit, emacs, vi, etc. to make your home page in HTML format. I recommend either jot (SGI only) or xedit (any Athena machine) for beginners. jot index.html & (recommended for SGI workstations) xedit index.html & (recommended for Sparc5 workstations)
All studio PC's and Macs have one of these browsers.
To start Netscape navigator in a Athena UNIX machine, type below in xterm
add infoagents
netscape &
or use the dashmenu under Communications.
In short, to see your home page in a browser, specify the following URL
in the "Address" or "Location" box.
http://web.mit.edu/your_account_name/www/4560/index.html
There is also links set up from this 4.560 home page.
In this "List of Current Projects" page, your name is linked to your home page.
(Try clicking your name there.)
If you get an error message like this:
"Your client does not have permission to get URL/yonca/index.html from this server..",
it means that you need to change your file permissions.
For your web page to be read by WWW browser like Netscape, the file
permission for your HTML text file should be set to "world-readable",
not just yourself.
1. Windows PC
If you are using studio PC's, this setting is the default, so you
would not have this problem unless you have accidentally changed the setting.
To reset the permission to be world-readable, right-click the www directory
in your H: drive, go to AFS/AccessControlList menu, click Add button, specify
Name as system:anyuser, and set Permissions on for r-Read and l-lookup.
(This is different from the regular Windows method for setting a file's permission.)
You need to do this for your www directory and all your 4560 subdirectories in it
that your web pages use.
2. UNIX
If you are using an Athena UNIX machine and have a permission problem, set the
file permission as below. First, list your www directory by "fs" command.
cd $home
fs la www
This list should tell your current permission setting for www directory such as
Access list for www is
Normal rights:
system:4.560 rl
system:expunge ld
system:anyuser rl
takehiko rlidwka
If it includes the line which says
system:anyuser rl
your www directory is all set (but you still may need to fix 4560 directory
and its subdirectories as well). It is world-readable. Otherwise, set it by
fs sa www system:anyuser rl
Check the result by
fs la www
Finally, repeat this process for all your 4560 and its subdirectories inside www.
Well, at MIT, our web server is set up so that its name is web.mit.edu, and your athena directory H:www\ (in PC's) $home/www (in Athena UNIX machines) corresponds to the internet URL, http://web.mit.edu/your_account_name/www Thus, your file H:www\myfile (in PC's) $home/www/myfile (in Athena UNIX machines) corresponds to http://web.mit.edu/your_account_name/www/myfile In PC's, if you have a subdirectory and a file in H:www such as H:www\myproject\plan.jpg its URL is http://www.mit.edu/your_account_name/www/myproject/plan.jpg This means that basically the drivename and entry point directory H:www is simply replaced in URL as http://www.mit.edu/your_account_name/www and for specifying directories, URL uses Unix-style delimiter / , not \. Got that?
I recommend that you keep all your 4.560 project pages and images in your H:www\4560 (PC's) $home/your_account_name/www/4560 (Athena UNIX machines) directory for now. Then, when you make a link from your home page, you just have to specify the name of the file. You do not need to specify the lengthy full URL, "http://web.mit.edu/...." For instance, suppose you have an image named image_1.jpg. To include this image in your 4560 home page, just put the following line in your index.html. <IMG SRC="image_1.jpg"> It does not have to be (although it works), <IMG SRC="http://web.mit.edu/your_account_name/www/4560/image_1.jpg"> You can also make a directory to put all your image files together. An easy organization is to make this image directory at the same level as your HTML file. For instance, you can make a directory "4560images" in "H:www" and put your image file "image_1.jpg" in there. Then the link from your index.html to this image will simply be <IMG SRC="images/image_1.jpg">
Here is the differenct between these format that you would care.
format capable colors file size loading time quality
GIF 256 colors (8bit) small fast low
TIF millions (24bit) large slow high
JPG millions (24bit) up-to-you up-to-you up-to-you
In general, GIF is smaller but low-quality than TIF. In JPG, you can
choose quality over file size, or file size over quality, but some
color information of the image gets lost.
If you have lots of images to show, you would usually like to set up
as below.
Check out our gallery pages for examples of how to do this.
1. Use small thumnail previews in your page in GIF or low-quality JPG
format. This will load fast even if you have many in-line images
in a page. The quality of each image suffers but it is used just
for previews.
2. Use a few full-size full-color images in TIF format or high-quality JPG
linked from your thumnail previews in separate pages. This will take a
bit more time to load but gives you a much better image quality.
When you make these images, remember that you can go from TIF to GIF/JPG, but
you should not go from JPG/GIF to TIF. For, some information in your original
24 bit color TIF image are lost in JPG/GIF format. In other words,
once the image is converted from 24bit TIF image to 8 bit GIF image, you can
never recover the quality even if you switch the format back to TIF.
Photoshop on Athena is somewhat unstable and use of studio PC's is
recommended for Photoshop.
If you absolutely need to do some image processing on a Athena machine,
you can use "xv" software for quick job.
"XV" let you edit an image simply by crop, scale, etc. and save it in various
formats as in .gif file.
add graphics
xv filename
In SGI, you may also use "imgworks" for quick image processing.
(It does not let you save in .gif file, though.)
imgworks filename
If you use the correct URL/path to specify a link to another HTML/image file and the browser says that the file is not found, the filename could be a problem. For the names of your HTML files and images (tif,jpg,gif,etc), 1) it is always safe just to use alphabet characters and numbers 2) also it is safe just to use lowercase only 3) it is safer not to include space 4) do not use special characters such as * / \ < etc. Another possible problem for broken link is the read permission of your file. Refer to What about file's permission? above for this.
There are different ways of including AutoCAD drawings in your webpage:
1 make a bitmap image (JPEG/GIF)
This is the safest (meaning any browser can see it), but
resolution of the image limits the details you can get for
your drawings.
2 create a DWF file (formated 2D view)
This can show a formated drawing just like a printed layout sheet.
You can also pan/zoom the image in the browser.
Requires a newer version of Internet Explorer.
3 simply use AutoCAD DWG file (3D model interactively viewable)
This posts your 3D model and allows browser to orbit, zoom, etc.
A drawback is that the file tends to be large and thus takes
potentially lots of time to download.
Requires a newer version of Internet Explorer.
DWF and DWG files can only be viewed in the latest versions of Intenet Explorer (version 5
or above). To view a DWG file, you also have to have a DWG viewer plug-in software installed
on your machine. There are a number of such DWG viewer plug-ins avaliable (you can google
them) but a recommended one is Volo View which comes with AutoCAD installation disc.
Here is an example for each. Try clicking on the links below.
JPEG bitmap version 
example of dwf file (after jumping to the page, right
click on the image for manipulation)
example of dwg file (after jumping to the page, right
click on the image for manipulation.
This may take a while to download.)
8.1.
Bitmap images from AutoCAD
The best way to make JPEG images for the web from a 2D drawing in AutoCAD is very much like the procedure to plot images. JPEG images created like that can preserve lineweights and colors. In fact, you have to use the PLOT command to generate these images. File > Plot Instead of selecting a regular printer, in the Plot Device tab, select PublishToWeb JPG.pc3 You need to specify a file name, and a folder in which to save the image. Then you need to indicate the image size (in pixels) of the resulting file (in the Plot Settings tab), and you need to set "Scaled to fit" instead of a regular architectural scale. A good suggestion is to make a large image size and scale it down in Photoshop. If your image size is small, or if you scale the image down by specifying an image size in HTML, you will likely to loose the details of line drawings and quality suffers. Also I suggest you to adjust line colors before you make an image of line drawings from AutoCAD. While you are modeling, your layers have colors such as red, blue, cyan, etc for your convenience. These are not usually the kind of colors you want for your drawings in web presentation. Right? You can also make a "screen capture", and copy the literal image that you are seeing on the screen. This is process might not work very well in 2D drawings because resolution is very limited, but it can be very helpful for 3D objects in shaded mode. In AutoCAD, use the following commands. tools>Image>Save (on a Athena machine) tools>Display Image>Save (on a studio PC) Or just type saveimg in the AutoCAD command line. When you save an image file of your line drawing or shaded view in AutoCAD, you can just use GIF format (name the file with .gif suffix) since AutoCAD only include 256 colors for this view. When you save an image file of your rendered image, use of TIF format (name the file with .tif suffix) with lzw compression option is recommended. Other useful AutoCAD commands for your quick coperations are shademode : makes simple shading, hidden line elimination, etc. render: does cosine shading with multiple lights (This does not work too well.)8.2. DWF (Drawing Web Format)
DWF is a highly compressed format for AutoCAD files, intended for delivery of AutoCAD drawings over the Web. It can contain the view layout information that you usually set up in AutoCAD paper space for printing. DWF files can be viewed only in Internet Explorer 5.0 or above (IE 5.5 or above recommended). The advantage of DWF files is that you can Zoom and pan, turn on/off layers, retain line weights and characters, and it can be printed exactly the same way as you set. To create DWF files, you also use the Plot command. File > Plot Instead of selecting a regular printer, in the Plot Device tab, select PublishToWeb DWF.pc3 You need to specify a file name, and a folder in which to save the image. You don not have to specify image size in pixels, because DWF are vector-based drawings. Instead, you need to set a paper size and an appropriate scale so it can be printed correctly. The rest of the procedure is exactly the same as when you plot: make a window, set the scale, select the pen settings, and so on... DWF are stand-alone objects that can be seen in IE 5.01 or later. You cannot embed them into a webpage unless you use frames. Links to DWF files work exactly the same way as regular links to HTML pages.8.3. DWG
DWG allows interactive viewing of 3D model despite a limited viewing options
(for instance, lighting cannot be changed). However, it does not allow multi-view
layout that DWF file can do. So, use this as a way of distributing models.
For presenting a 3D view in a carefully formated layout, use DWF instead.
Also, I suggest you to do the followings if you are using DWG format for the web.
1. clean up the model
(erase unnecessary objects, delete unused layers, adjust color)
2. move the model to center around 0,0,0 (for ease of orbiting)
DWG file can only be viewed in the latest versions of Internet Explorer and DWG
viewer plug-in such as Volo View that comes free with AutoCAD installation disk.
You can see other people's page's HTML file by selecting "Page Source", "Document Source" or "Source" under "view" menu in your browser.
