| How to Build a Website @ UI Required Materials Note: Your web page will not require the use of a Zip disk or any other larger storage format. All of your files will fit on one floppy disk. If they do not, then it is a good indication that your image files are much too large and you should use PhotoShop or another image editor to save them as compressed JPG files. For almost all of your photographic purposes, compressed JPG format will give you the best quality and smallest download size. Format for turning in projects It is vital that you keep two copies of your work at all times, on your computer and on a floppy disk or CD ROM. It is also important to save often while working on your web page. You must save your images on the disk with your HTML files. Images are not embedded in HTML files; they remain separate, and because of that it is important to make sure they are in the same directory structure as the HTML files. You will post your website to your UI server space, and will give the URL (Universal Reference Locator) to your instructor. They will access your site as any other web surfer could. Setting up your UI server space Your web page will be posted to the UI servers in your student server space. This server space is on the UI's Unix servers. Unix is an operating system similar to Windows, but to access it through the computer labs you use a text-based interface, which means it works much more like DOS. In order to activate the website functions on your account, you must go through a few easy steps: Click this link to open a new Telnet window. You will be asked for your Username and Password. This is the same Username and Password that you use to check your email. (Remember that both are case-sensitive, and you cannot backspace. If you make a mistake, press Enter, and you will again be asked for your Username and Password. If you make three mistakes, you will have to start again by closing the window and clicking this link).
After you've logged in, type: WWW-starter-kit (see Figure A). You will be asked a series of questions (see Figure B), and the server will create a public_html directory and put a file in it called "index.html". You must have an index.html file in your directory so people can view your site. Later, when you save the first page of your site, be sure to call it "index.html".
Check to see if the public_html file has been added to your account by typing "ls" at the prompt (see Figure C). This command will give you a list of all the files and directories on your Unix account. There should be a listing for the public_html directory. If the directory isn't shown, but you completed the WWW-starter-kit, then you should call ITS at 885-2725 or email helpdesk@uidaho.edu to have the problem fixed.
If you are determined to code your page by hand, then you didn't need this tutorial. While a few people still code HTML by hand, the vast majority use an HTML Editor and upload their files via FTP. That is the process outlined in this tutorial. You can use a Unix-based text editor, such as Pico, to create your pages, but unless you already know what I'm talking about, I do not suggest it. You may now type "exit" and close the Telnet window. Now you are ready to move on to developing your website. You may see the default page the Starter Kit created for you at your own, personal URL by loading up your web browser and going here: http://www.uidaho.edu/~your_username_here Simply insert your username in place of "your_username_here". The squiggly line is a tilde, and it can be found on most keyboards above the Tab key, next to the 1. But before you give out this URL to all your friends and family, you should probably have something there. How to create your website To create your site, you will use an HTML Editor. There are many editors available, including Frontpage, Homesite, and Dreamweaver, to name just a few. Also, many programs have a "Save as HTML" option. Word and Corel Wordperfect both support this feature. If you are very familiar with text and image layout in these programs, then they may be a good alternative for you. However, for the most part they are more complicated than the strictly HTML editors, and the quality of their conversion to HTML is not always consistent. These instructions focus on using Netscape Composer, an HTML editor available in all of the UI computer labs, to put together your web sites. You will create your site on a hard drive or floppy disk, and then upload the files to your school account using an FTP program. To run Netscape Composer, click on the icon in the lower right of the Netscape Communicator that shows the pen lying on a piece of paper, as indicated in Figure D. A yellow pop-up box will appear saying, "Composer," when you put the mouse pointer over the button.  Figure D Before running Composer, it will be useful to do some background work for your site. Composer can do little for you if you have no content. It is also very difficult to arrange images and buttons if you have no text to put them into. The best approach is to gather some material to put into your web page before going into Composer. Collect images via the web browser, write text in a word processor, and save all of these files into your webwork directory. It is crucial that you keep an ordered directory structure when working on websites. You should make a directory for storing all the files you could possibly use in your site, and save files you gather on the Internet into this directory. You will want to develop your website in a separate directory where you only keep the files needed for your site. Call this directory "public_html"; that is what it is called on your UI server space. Create subdirectories below the public_html directory to keep your site organized. Gathering images with a web browser All web browsers are capable of pulling images, backgrounds, and source code off websites and saving these files to a location you specify. These examples will be of Netscape Communicator 4.5, but all browsers, including Internet Explorer, save images and backgrounds the same way. The instructions will work regardless of the browser you are using. To save a file for use on your website:
Saving background images is very similar to saving regular images. Backgrounds on web pages are created by tiling an image file. Any image can be used as a background, but unless specifically designed as a background most images look horrible when used this way. It is a good idea to get a background from a page that has a background file you like. Follow the same directions to save a background as you do to save a regular image file. Right-click on a place where there is no other image, in other words, on the background itself, as shown in Figure F. It will pop-up a slightly different menu, and you select "Save Background As".
Background images and buttons can often be found on websites that provide free web graphics. Searching for "free web graphics" will yield many results. Cruise around to several of these pages to get a feel for what's available. Then pick the images you want and save them to your disk. Images regarding your content will be found by doing web searches on your individual topic. Remember to make note of which pages you have taken images from. It is both good netiquette and academic style to cite your resources. The important thing to note is the URL (Universal Reference Locator) for the page you have taken the image from (e.g. http://www.uidaho.edu ). This address is displayed in the Location bar on your browser, and will also print out in the header of the page if you print the web page. It is necessary to have the URL to cite web pages in a bibliography, and you should give credit to the creator/owner of the image by providing acknowledgement and a link to your source cite. Putting material into your web pages For the most part, an HTML Editor works like a word processor. When you run Composer you will be presented with a blank HTML file. Figure G shows what the Composer screen will look like. Across the top are several toolbars that perform functions. If you place the cursor over any of the buttons, without pushing the button, a yellow box will pop-up that displays the name of that button. There is also a Help menu in the upper right that can answer many questions about the use of the program.
The first order of business should be to create all of
your pages separately. Begin by opening Composer, then right click on the background of
the page, as shown in Figure H. Select the "Page Properties"
item from the menu that appears.  Figure H Click on the General tab, and fill in your Title, Author, Description, and Keywords boxes. The description should be a sentence of 25 words or less that summarizes your website. The keywords box should be filled with words and phrases, separated by a comma, that people might type into a search engine looking for pages like yours. Once you've filled in these boxes, click on the Colors and Background tab. In Colors and Background you set the background image and the different text colors. First, select colors for your Normal Text, Link Text, Active Link Text and Followed Link Text. These colors should contrast well with your background so that your web page is always readable. Then, click the checkbox that is labeled "Use Image" in the Background Image section of the window. Click on the "Choose File" button in that same area. This will bring up a standard Open File dialogue box. Go to the directory where you have saved your images and select the file you want to use as a background. After you choose your background file, click on the "OK" button at the bottom of the window.
Now you should save your page. Click on "File" then "Save", or you can use the keyboard command CTRL-S. There is also a Save button on the toolbar. The main page of your web should be called "index.html", and all the pages you save must have the ".html" extension. Pages following the index.html can be named however you'd like, but the filenames should be logical and fitting. You should repeat this process until you have created and named all of your files. You can always add files, but you cannot make links to files that do not yet exist. It is also sometimes handy to have multiple pages open at the same time. A lot of repetition may be required to complete your web pages, and learning to work with multiple open files and the Cut, Copy, and Paste commands will save you a lot of time. Adding Images, Text and Links Now that you have all of your web pages created, it's time to fill them up with stuff. Content is undoubtedly the most important part of your website. While the design should be clean, creative, and unobtrusive, the site will be worthless if the material presented is not accurate and insightful. The largest portion of your time on this project should be concerned with collecting and compiling information about your topic, and expressing that information in an organized and thoughtful manner. Hopefully you have collected some rare and exciting virtual artifacts. There are photos, paintings, writing samples, sound and video clips, and all kinds of other interesting tidbits out there about nearly everything. You are encouraged to really dive into the muck and mire and see what treasures you can pull out. Once you've done so you will be able to add them to your web pages.
Text is the anchor of a web page. The design of a page is usually dependant on the amount of text to be presented. Images are located in relation to paragraphs and words. You should have your text written in a word processor. After editing, revising and generally polishing up your writing, you can Copy and Paste it into the HTML editor. To do this simply open your text document in a word processing program, and open your page in Composer as well. Select the text to be copied, and then click on the "Edit" menu, then the "Copy" option. Next, pull up Composer, and position the cursor where you want the text to be inserted. Then, click "Edit" and then "Paste". You may have to tidy up the text, but for the most part the conversion should be smooth. Images are inserted using the "Image" button on the Composer toolbar (See Figure K). Click on this button to bring up the Image Properties dialogue box (Figure L). In the Image Properties dialogue box there are three tabs: Image, Link and Paragraph. Click on "Image", then click on the "Choose File" button. This will bring up an Open File dialogue box. Go to the directory where you've saved your images and select the file you would like to insert into your web page. Also in this box are the buttons to set your text alignment and text wrapping around images. If you want to wrap a chunk of text around an image, you should click on one of the two buttons to the far right of the window with the thick bars around the image icon. These will make the image go to the left or right side of the screen, and the text goes around it to the opposite side. Composer is not a web browser, so it does not show the text wrapped around the image, but if you click on the "Preview" button you will be able to see how it looks.
If you would like the image to link to another page or website, you can click on the "Link" tab in the Image Properties dialogue box, as shown in Figure M. To link an image to another one of your pages or to a website on the internet, simply fill in the address of the page in the box labelled "Link to a page location or local file". If you want to link to a file you have created on your floppy disk, simply type the filename in the box. If you cannot remember the filename, click on the "Choose File" button and select the file you wish to link to in the directory where you've saved your website. If you enter a URL to a website, be sure to doublecheck the address and include the "http://" at the beginning.
Often, text links are better and easier than using
images for buttons. The general rule of thumb is that buttons are used for navigational
purposes to get users to major parts of your website. So you may have, for example, image
buttons that say "Bio", "Chronology," and "Links". For links
to external websites, it is useful to have the name of the site as the link, often
followed by a brief description. First, type out the text that you want to turn into a
link. Then, select the text with the cursor, and press the "Link" button, shown
in Figure N. This will bring up a dialogue box virtually identical to the
Image Link box in Figure M. Fill in the URL as detailed above, and your
link is made.
Uploading your site To upload your site, you will use an FTP program. The UI computer labs all have WS_FTP installed. You can also download WS_FTP for free from www.download.com if you are using your own computer. Upon running the program, you are presented with a "Session Properties" dialogue box. You should click the New button so that it clears the default information. Then, fill out the box as shown in Figure O. The information you will need to insert is the Host Name/Address (ftp.uidaho.edu), the User ID (your username) and Password. Remember that the Username and Password are the same as the ones you used to access your Unix account at the beginning of this tutorial. Also, note that you can check the Save Pwd box to have the program remember your password.
When WS_FTP has connected to your Unix account, you will be presented with a screen similar to Figure P. The left side is your local computer (either the labs or home, whichever you are using) and the right side is your Unix account. You can find the files you want to upload to your account by clicking on the appropriate directories on the left side of the display. You should see the public_html directory on the right side. Doubleclick on that directory to enter it. You must be in the public_html directory to upload your files into the appropriate spot.
You may select multiple files, and even multiple directories, on the left side of the screen to upload to your site (see Figure Q). Simply select the files you want to upload, and then press the arrow button pointing to the right. Likewise, if you would like to download a file from your Unix server space, you could select that file and click the Left Arrow button.
You will want to check your site to make sure everything is working properly. Do this by entering the URL you figured out in the first part of this tutorial into a web browser. More than likely you will find errors, and you will have to work those out. Welcome to the world of web design. If you've kept your directories well-organized and your pages simple, but elegant, then you should easily be able to solve your problems. Remember that you can find a lot of free help on the WWW, and can even ask questions in a lot of different web design Forums. I recommend http://www.builder.com as a good place to start looking for information, whether you're a complete newbie or a l337 haX0r. Maintaining your web page by Shawn Rider |
Figure
K
