Banner Image
Bullet Main Page
Bullet Syllabus
Bullet Resources
Bullet Students
Bullet Project Hand-in
Bullet Grading
Bullet Student Projects
Instructor: Tim Hendrix
Office: 246 Science & Mathematics Building (SMB)
Phone: 244-8062
Technical Assistant: Michael McKelvey
E-mail class: Send Email
Divider
Creating Your Web Pages

Working With Folders
If you feel very uncomfortable with the idea of working with different folders to place, for example, your images and pages in, you will probably want to just keep everything in the same place. Using folders can become a little tricky when you want to refer or link to a page or image that you have created that is in a different folder than the page you are working on. But if you'd like to try them, here is a little help. Folder names and webpage or image names should all be separated by a backslash. To refer to a site that you have not created, use the whole URL such as http://www.someoneElsesWebpage/folder/page.html. But if you want to link to a page that is in the same folder as the page you are working on, only refer to the very last part of the filename of that page (the section following the last backslash, such as mypage.html. If you are referring to a page or image that is in a folder that is in the folder you are in you would enter folderYourImageIsIn/yourimage.jpg for example. If the page or image you want to refer to is in a folder that you have to go back to, you are going to need to use ../ which says to go back one folder. Use as many ../ as you need to go back and then type in where you need to go from there. Go to a pictoral explanation. In the following, when I refer to only using the last part of your filename, you will have to decide from the previous examples what to use.
Making a link
When you want to create a link, click on the 'Link' button with a picture of a chained link above it. In the 'Enter text to display for a new link:' box enter the text that you want whoever is viewing you page to see. This does not have to be the web address of the page you want to link to. It can be any words you'd like. In the 'Link to a page location or local file:' box, enter the actual location or web address of the page you want to show when the link is clicked. If you are linking to something on the web that you did not create, include the entire address such as: http://www.webpage.com. If you are linking to a different page that you created only enter the last part of the filename of that page such as: mywebpage.html. Click OK.
Setting the Color of Your Links
Click on 'Format' and then 'Page Colors and Properties'. Click on the color box next to the type of link you'd like to change. 'Link text' color is the color that will show up when you create a link. 'Active Link Text' color is the color that the link will change will you are holding it down. 'Followed Link Text' color is the color that a link will appear if it has already been visited.
Inserting a Picture
To insert an image click on the 'Image' button with a picture of three shapes above it. Enter the last part of the filename of the image you want to insert (Remember that you must upload any images that you want to show on your pages into your folder.) For example, you might enter myimage.jpg into this location. You do not need the whole image location, only the last part with the name of your image. Click on 'Leave image at the original location'. If you want this image to cover the the background of your page, click 'Use as background'. Click the way in which you want text to flow around your image. If you'd like, you can enter the height and width of your image, but this is not necessary. Enter the space that you would like around your image and the size of the border if you would like this. If you want the viewer to be able to link to another page by clicking on your image, click on the link tab at the top of the 'Image Properties'. Make your link similar as to how we did in the 'Making a link' section. To align your image left, center, or right click on the paragraph tab and choose.
Setting Your Background
Click on 'Format' and then 'Page Colors and Properties'. If you want your background to be a plain color, click on the color box next to 'Background', and choose a color. If you'd like an image to cover your background, type in or choose the file of the image that you would like next to 'Use Image:' under 'Background Image'. Remember to only keep the last part of the filename, the name of your image, such as myimage.gif. Click on 'Leave image at the original location'.
Setting the Title and Description of Your Page
Click on 'Format' and then 'Page Colors and Properties'. Click the 'General' tab. Enter the title of your webpage in the 'Title' section. This will appear at the top of your page in the title bar when you view your page. This can be whatever you want; it can have spaces and does not need the .html extension. You can set the Author and Description here if you would like.
Creating a Target
When you create a target a picture of a target will be shown on your page when you are in Composer; this will not appear when you are just browsing your page in Navigator. This target just marks a place in your page. To make a target useful, you must create a link to the target. To make your target, go to the place in your page where you would like the target to be and click on the 'Target' button with the picture of a target. Enter name for your target; this name can be anything. Then to link to your target go to the place in your page where you would like the link that when clicked will take you to your target. Click the 'Link' button and enter the text that you want shown for your viewer to click on in the 'Enter text to display for a new link:' box. Below, click on the target that you want to link to, and click OK. You can also link to targets on different pages. Select the page that your target is on, and then select the target. Remember that if your target is on a page that you have created, you will only need the last part of the filename, such as mywebpage.html. Once you have clicked on the target you want to link to, this will show up as mywebpage.html#targetname.
Creating a Table
A table is a set of rows and columns. To create a table click on the 'Table' button with a picture of a grid table. Specify the number of rows and columns that you would like in the table. Specify whether you would like the table to be aligned left, center, or right, on the page. If you'd like to have a caption for the table click the 'Include Caption' box and choose either 'Above table' or 'Below table'. Once you click OK, you will see a space either above or below your table for you to type a caption. Type in the number of pixels that you would like the border of your table to be. If you do not want a border, either unclick the 'Border line width' box or type in that you would like the border to be zero pixels. While creating your table you may want to work with a border and then change it to zero pixels when you have finished. If you are not familiar with pixels, the standard screen is normally 800 by 600 pixels. Some may be larger, but you should create your page assuming that the screen is 800 by 600 pixels. Try not to make the width of anything more than 600 pixels. You may also enter the number of pixels you would like between cells (where your rows and columns cross) and the space you would like within your cells (between what you enter into the cell and the outline of the cell). Enter the table width, either as a percent of the screen's window or as a certain number of pixels. You may choose a background color by clicking the color box next to 'Use Color:'. You can also choose an image for the background of your table. Make sure that the name you enter is not the entire filename, but only the last part of the name such as myimage.jpg. Click on 'Leave image at the original location' if you choose an image. Click OK.
Working With Your Table
To place text or images in your table, place your cursor and click in the cell that you would like, and then continue with what you would like to place in that cell. You can edit your table by right clicking on the table and clicking on 'Table Properties'. You may make changes to a whole row, column, table, or just a cell by clicking on the appropriate tab. If you click on the cell tab you can edit your cell so that it spans across more than one row or more than one column in the 'Cell spans' boxes. If your table has extra cells after you do this, right click on the cell you do not want and go to delete.
Drawing Horizontal Lines
An easy way to show a division or end on your page is to put in a horizontal line. To do this go to the point in your page where you would like the line. Click the 'H. Line' button with the picture of the line. A horizontal line should appear. If it does not have the height, width, shading or alignment that you would like, double click on the line or right click and go to 'Horizontal Line Properties'. Here you can change those settings.
Special Characters
If you need to enter a character that is not located on the keyboard, you might try inserting a special character. Composer has about 100 characters to choose from. Go to 'Tools', then 'Character Tools', and then 'Insert Special Characters...'
Viewing Your Page
Either press the 'Preview' button or go to 'File' and then 'Browse Page'. You will be forced to save your page to the computer you are working on. You will probably just want to save it onto your desktop until you are ready to upload it in the Project Hand In. Make sure not to use any spaces in the name that you save your page as and include the .htm or .html extension. Another window will open your page in Netscape Navigator mode. You will not be able to make changes to your webpage here; you must be in Composer. In Navigator, you will be able to read your page and use the links to jump to other pages or targets in your page. To edit your webpage, close the Navigator window, click back to the Composer Window, or go to 'Communicator' and then 'Composer'. If you have both windows open while you are in Composer, your changes will not automatically show up in Navigator - you will have to save and then go to Navigator and hit the 'Reload' button.

Main Page  |  Syllabus  |  Resources  |  Students  |  Hand-in  |  Grading  |  Projects

Meredith College course satellite website  at  University of Illinois at Urbana-Champaign