Creating Your Own Webpage
Academic
Coordinators: click here.
Contact: Sicco Rood, rood@nospam.wsu.edu
(remove the nospam)
Software Needs for Publishing on Our Web Server
- Copy of FrontPage, preferably FP 2000. If you are not publishing on our web server, than you could use other html editors, such as FirstPage, HomeSite, BBEdit, PageMill, Dreamweaver, GoLive, etc.
- Image editor—ideally Photoshop (4.x), if you're dealing with a lot of images—that allows you to save compressed GIF (for color graphs, etc.) and JPG (specifically for photographs). More on Compression below.
- NT sub web account. This will give you access.
- Or, if the web page is not part of the university or courses, you can use your ISP or free web hosting services.
To publish on WSU's Web Server and Tutorials
- WWW introduction WSU with links to network id and unix login creation.
General Guidelines
1. Visualize Your Structure
- Define your target audience.
Before deciding on anything, define your target audience. For example, a portfolio will target employers. What kind of employers will look at your work—hip designers or conservative businesses? This influences your design: If you target gamer outfits, then you could probably get away with dark backgrounds and flash. However, if your audience will be conservative businesses, you might want to look similar to their site, with white backgrounds, easy navigation, etc.
If you have course instruction web pages that students will view, consider whether they are using Macs or web TVs or if they'll have accessibility problems. Make the same considerations with portfolios—check to see what it looks like on a Mac, so you don't alienate these people. Surf around to look at web sites of companies or designers that inspire you; this way you can see what they value in their designs. Here are a few examples for ideas.
- Examine the goals of your site
What do you want to put online—homework, notes, exams, lectures, case studies, links, and bio? Or do you just want to put up your resume and a portfolio?
- Sketch out your website
The easiest way to visualize your directory structure is to make a sketch of all these needs and how they would best be ordered. You can simply use index cards or Photoshop or Visio. On these cards or layers, write the page name and break down the content and individual goals of the page. This process helps you visualize your site's structure and understand the navigation needed to make it a non-linear whole. By this I mean if someone came on any one page other than the home page they can still get to any other page through navigation and hyperlinks to other areas in your site.
- Physical site structure
For example, you might have a folder in your subweb called classes. It would be logical to put homework, exams, and lectures folder for that class within that folder. If you teach more than one class, you might create a "common" folder for pages that are "global," such as a links page—all classes can probably benefit from the same links, so why create different link pages? The other advantage is that if you do need to change the links page, for example, you only to worry about one—not multiple—pages. Any duplicate information would be best put in the "common" folder.
Put all images in an images folder, so as to not clog up the main root of your directory.
A note on directory browsing: On our web server, we have the option of giving a folder and sub-folders browse permissions, which means that you don't need to have a web page with links to your homework, notes, etc. If you put your files as say word documents in these directories, one can just browse through them.
2. File Naming Conventions
- When naming files, make sure they are understandable, yet not too long. Don't have any punctuation or spaces in a file name, as this will confuse the server, and web browsers. Substitute spaces for an underscore _. In other words, instead of "lecture by Joe Dough %$document.doc," use "01_10_00LectureEM200.doc" or something like that. Don't use special characters in your filenames such as $%#: these will confuse the server extensions and keep you from modifying the files afterwards.
3. Image Compression
- Most images start out very large, both in file size and actual viewing size. For example, a 30K image in a 5K html file could easily take fifteen seconds to download on a 28.8 modem. That is still acceptable. An image over 100K, however, would cause frustration with your site—visitors might wonder why you just didn't include a link to the larger image. In most cases this means your image is too large or not compressed.
- Avoid too-large of files by going into the image editor, cropping out any unnecessary information, and using JPG or GIF compression. Use JPG for photographs and gradations; use GIF format for drawings, graphs, etc. With JPG, you can usually get away with high compression, as in a low setting (between 30 and 50 per cent). When compressing for the GIF format, you can usually get away with adaptive 32 or 64 colors, and get great compression.
- You should be able to compress a large image to fewer than than 20K and still have a good-looking image—unless you have a very large image such as a map. The best thing to do in this case is to either create a smaller version linked to a larger file or create a link to the larger version, letting the visitor know that this will be a large download. Again, it is easier to put all the images in an images folder beneath the root web folder.
4. Text and Headlines
- Consistency in navigation and layout
In order to keep pages consistent (to avoid confusing people and to give a good, consistent impression of WSU), we not only have the same layout and left navigation bars, but also the same fonts throughout the site. For headlines, use a "Heading 4." For regular text, use normal setting 10; you don't need to specify the fonts or size of the regular text, since this is controlled through a linked style sheet.
If you are using our template, the style sheet is assigned to it so that the normal text will be formatted with the best fonts. Studies have found that unlike in print, sans serif fonts are better than serif fonts for reading on the Internet, because of the resolution of monitors. This also saves considerably on font tags and other formatting tags in the html.
- Copying and pasting from Word
When copying text into the page from another document such as a Word document, use paste special in the edit menu and then select normal paragraphs with line breaks, instead of regular paste. This way, the formatting won't get carried into the page, which can cause the page to get messed up in non-Microsoft browsers. Also these proprietary formatting tags add a considerable amount of download time to your page.
5. Content and Image Positioning in Your Webpage
- When you want to position images and have perhaps multiple text columns, make sure you use tables. Absolute positioning, or layering is still very buggy. It won't be compatible with all browsers. Therefore it makes more sense to use tables for positioning; this will force content to stay in the place you want. Use absolute pixel values in tables where you want consistent display. Use percentage values if you want the content to dynamically expand based on browser width.
- Make sure your images have Alt tags in them. An alt tag describes the image, which is useful for speech readers and for browsers that don't display images.
6. Final Check and Tweaks Before Going Live
- Unfortunately, the web is a very different medium from print, so when you look at your page from your computer, using your browser, it does not mean that it will look just as good on your neighbors computer. Ideally you would have all possible computers and browser combinations emulated on your own machine, but that is not available yet. You can get close by at least previewing your page on two different browsers. IE currently dominates the browser market, but Netscape still has a pretty good browser share as well. Download different browsers.
- Also, to make sure you have reasonable load times, you might want to visit someone with a dialup connection, so you can see how fast your page loads, besides seeing what it looks like on a small monitor.
- Check your site from a Mac as well, if possible.
- If you really feel like being hard on yourself, you can look at it from someone's WebTV, or download the WebTV emulator. This market is very small (about one million households) and may not be your target audience.
For more help on actually creating web pages, images and other web related links, please go to the links page
Free Hosting Services
- Yahoo GeoCities Free email account and web pages
- Tripod Lycos: Free web pages (50MB)
- ProHosting: Free web hosting (50MB)
- Premium Banner-Free Hosting
- For Non-profits: http://www.servintfree.net
To compare hosts, try http://www.comparewebhosts.com/search.asp and http://www.budgetweb.com
Paid Hosting Services
- http://www.webhosters.com/index.html
- http://www.webhostingstuff.com
- http://www.pari.com
- http://www.webhostlist.com
- http://www.pair.com
- http://www.media3.com
- http://www.softcomca.com/hostin.html
- http://www.tera-byte.com
- http://www.fatcow.com
- http://www.web66.com
- http://www.tricreations.com
- http://www.icom.com
- http://www.hostsave.com
- http://www.tristarweb.com
- http://www.thehostgroup.com
- http://www.site-works.com