This is a repeated workshop from 2003, whose purpose of this workshop is to provide an overview of what is involved, how to do things the easy way, but still for them to turn out proper and acceptable (from a technical, not a content, aspect!).
Useful resources:
Interesting sites to visit, compare and comment on:
From 2003 - "We have to let go of the appearance! The user has more or less control of the appearance of our web-site!" Not that true anymore - new technologies.
On-line, imitation is the highest form of flattery. It's OK to copy ideas:
To code or not to code? Well, it's a good idea to have an idea, but go the faster way! Use an html editor or whatever it may be called. Hyper-text markup language (html) is the most popular code for web publishing.
Free popular html editors:
My favorite commercial one:
You can define:
(See also "Cascading style sheets" at the end of the section)
The language of a page is defined in the top line. Define the language and/or character set in which you are posting! Most editors will do this automatically.
Because of the lack of certainty as to the appearance of a document and especially the layout, prefer the pdf format to post long text or reprints.
You can organize your text in tables:
Tables make an excellent text organizer! See an example at: http://www.soest.hawaii.edu/oceanography/.
You can select a piece of text or an image, so that when you click on it with a mouse it takes you to another file. This file could be another page of your web-site or another web-site, it could be an image or an audio/video file, it could be a pdf file. Linking to files such as MS Word and Excel documents is very tricky! Later versions of MS Internet Explorer can open such documents if MS Office is loaded on the machine used.
The preferred format of an image on-line is called jpg - it is a compressed type of image, so it does not take a lot of memory. Another type of image you want to use is the gif format - it allows you to have a transparent background which is useful if you are using different colors for various pages on your web-site. When putting an image in your web-page, always define:
This is an image definitions window of Adobe Photoshop 7.0. What a web browser needs to know is the above set of figures. The one below concerns print. If you open an image in a browser you are usually able to see the dimensions of the image on the top frame of the window.
To create photo galleries faster than coding and converting image sizes:
These files - with suffix .css - define how a web-site looks. In other words, if you have a multi-page web-site and you want all the pages to look alike, it will be a pain to go to every single page and change how the main text, the background, the headings, the justification look. What if you decide you want to change one of these parameters? You would go back to every single page again and change them? No; you can put that style information in a separate file - a style sheet - and link all those pages to that file. Then, if a change is needed, just modify that style sheet.
Technically, you could just throw everything in one folder, but it's usually easier to organize it. Here's an example:
The above example is a portion of my web-site at SOEST the way Dreamweaver MX renders its structure. I have an exact copy of my web-site on my hard disk and I can transfer files back and forth onto the server (see below) while maintaining the same structure (actually Dreamweaver MX can do that automatically, when set up properly). Every directory should have a file called "index.html" or "default.html" (at SOEST and UH servers it is the former). Just entering the name of the directory will load this file automatically.
To load a file onto a server (a machine that can take a request from a browser for a web-page and deliver) you need:
To activate your hawaii.edu web directory, go to https://sunsys.its.hawaii.edu/acctmgmt/. Login, and select "Create Home Page" under "Personal Home Page Options" (the column on the right). Follow the instructions, and make sure you look at the outcome by clicking on the highlighted web-address, which should look like http://www2.hawaii.edu/~yourusername/.
Now, you can use your ftp. You can move files or whole folders from your hard disk or other storage devices onto the server. But you have to make sure it can be seen, by settting the permissions properly, and you can do so for the owner (you), the group (UH, SOEST etc.), and others separately! The example below is from SSH (Windows):
Your url (uniform resource locator) on hawaii.edu is not obvious! For example, a file with the name random.html that sits in your public_html directory can be accessed at http://www2.hawaii.edu/~yourusername/random.html. That is a setting that the folks at ITS control.
If you will set up a web-site on SOEST's web server imina, you need to follow the guidelines discussed at http://www.soest.hawaii.edu/soest_web/soest.web_basic-guides.htm.
Your web-site has to be accessible to people with disabilities, who use special web browsers to look at web-pages. You can check by entering the relevant web address in the free on-line feature of WebXACT by Watchfire: http://webxact.watchfire.com/. Alternatively, you can make sure that your web-page is validated by w3c here: http://validator.w3.org/.
Place on your web-page (typically at the bottom) some indication of the last date on which you modified the web-page, along with your name. This way, visitors can say whether something that looks odd to them is actually dated.
A common problem is broken links, i.e. links that do not work anymore. Check for broken links by using Checklink from w3c, available here http://validator.w3.org/checklink, and fix them!
Check your web-site on a number of different browsers and operating systems (see comparison below of a web-page viewed with Safari and MS IE on the same computer).
You can add a free web statistics counter. Go to StatCounter, at http://statcounter.com/, or to Webstats, at http://www.webstats4u.com/service/. You'll be surprised as to where from and why other people visit your web-site.
Last modified: November 2005