CIC Student Guide Online
Publishing Online
Students and instructors can use several programs to create web sites: Mozilla SeaMonkey and HTML-Kit are just two options. Whichever tool you use to construct your sites, however, you can save time and effort by thinking about your design plans and setting up your UW Web publishing account before putting your actual site together.
Design Considerations
Deciding on design is something best done before you begin a Web project. Ask yourself the following questions and sketch out a site layout based on your answers.
- Do I want a title banner to appear on each page? A particular image?
- How many pages will the site have? What filename do I want to use for each page?
- Where do I want site navigation elements to appear (top, bottom, left, or right side of each page)?
- Where do I want to place my contact information? Information about when the page was last updated?
- What colors would I like to use for the page? What font(s)?
Once you have developed a draft design, you can use one of the programs available in CIC to create a template page for the site. You should save this page as “template.html” After testing and finalizing the design with the template page, you can build a site by altering the content of the template page and saving with a new filename, for example “index.html,” “links.html,” and so on (for more information, see “URL and HTML File Basics” below).
Templates
Another option for getting started quickly on a basic design is to download a web site template from the web. Thousands of templates are available for free use (usually with the condition that they be used for non-commercial purposes) on web sites such as FreeWebTemplates.com. Once you've found a template you like, download the template file, open it with your editing program (SeaMonkey, Dreamweaver, HTML Kit), and change text and design parameters as you see fit. Save and upload your files and you're done. Using templates also allows you to see how certain design features are built. If you decide you want to recreate these effects on your own later, templates give you a model from which to work.
Uploading to the Web
Activating Student Web Publishing On Your Dante Account
- Go to www.washington.edu/computing
- Select Manage Your UW Net ID Resources.
- Log in with your UW Net ID.
- From the left-hand menu, select Turn services on or off.
- In the “Services that are off” list, click the box for Web Publishing or Student Web Publishing. This feature allows you to publish a personal web page on the student server (http://students.washington.edu/YourUWNetID).
- Click the “Continue” button.
- Accept the terms of Web account use.
- Write down the URL for your home page once the screen displays this information.
Following these steps creates your Web directory. When you access your Dante account via FTP or File Manager, you will see a folder called student_html. When you put a file into that folder, it will be immediately accessible on the Web to you and to others.
Creating Subfolders for Individual Web Projects
Creating and naming folders within your Web publishing folders (student_html and/or public_html) will allow you keep your web pages separate.
- Select the student_html (or public_html) folder and click on the new folder icon.
- Name your new folder. For Web accessible files, use lower-case letters with no spaces between characters (e.g. “engl121” or “finalproject”).
- The folders you create will translate directly to how one finds a file published to the web. For instance, if your home page is called “index.html” and you’ve created a folder called “engl121” within your public_html folder, then your URL will be: http://students.washington.edu/YourUWNetID/engl121/index.html
URL and HTML File Basics
Filenames and Extensions
- When naming web files, use lowercase letters and do not include spaces in the file name (example: analysis.html, index.html, links.html). Browsers often fill spaces with other characters.
- The extension is the end of the filename, which tells what kind of file: web page, image, text, etc. Web pages can be saved with two extensions, either .html or .htm. It is easiest to choose one or the other for consistency, and the former is more common.
- An Easy Method: All Files into a Single Folder
- When starting out with a simple web page, it is a good idea to save all images and any additional pages that you create in the same single folder on your local computer. When using Sea Monkey or Html-kit, for example, you might save your html files and any images you use in a folder (e.g., “111webproject”) in “My Documents,” or on your computer’s desktop.
- Then, when you're ready to publish your completed web page to the WWW, you can easily copy to contents of this folder into your public_html or student_html file using SSH FTP or File Manager.
- Your home page should always be saved as “index.html” Browsers automatically look for the .html file titled “index” as their starting point in any location. This means you will not need to type "index.html" when looking up your homepage. For example, "http://depts.washington.edu/engl" is all that is required to get to the English Department Home; the browser loads the “index” page by default.
Saving Images In The Correct Folder
If you see the following “broken image” icon where an image should be, it most likely means that the browser cannot find your image:
Internet browsers will automatically look in the same file for images and linked pages unless otherwise directed. For instance, if you wish your web page to have a single image of Emily Dickinson (“emily.jpg”), download the image into the folder containing the web page in question (e.g., “111webproject”).