In this lesson, you will learn how to
If you recall, in the previous chapter, we typed the some text (ASCA statement) into Nvu:
We have not specified the font that your web page is to use. This means that your page will appear in the default font of the web browser your visitor is using, whatever that may be. For visitors using Internet Explorer on Windows, this usually means that the "Times New Roman". Since the actual font face varies from system to system, and browser to browser, you may want to specify that a particular font be used by the browser every time it displays your page, so that you have more control over how your page appears.
To do this, select the text of the entire page. You can do this with the mouse by dragging the mouse cursor through the entire statement. Alternatively, type Ctrl-A (type "a" while holding down the key labeled "Ctrl") in Windows to select everything.
Go to "Format" , click on " Font" , select either "Helvetica, Arial", "Times" or "Courier". The appearance of the text should instantly change.
You can also change the point size of the font on the page. Select the text/paragraph, and go to the "Format"---" Size" menu. You can experiment with the various sizes till the text of the page is to your liking. Be careful not to resize the text too small. What looks good on your computer with your particular monitor resolution may be unreadable on a different system with a high resolution monitor.
Type in a header on top of your page. For example, "Tang's Web Site".
While it is possible to simply change the point size of the text using the technique described earlier, headers are usually specified in a different way.
Select the text "Tang's Web Site" -----. Go to the "Format "----"Paragraph" menu and select "Heading 1". "Tang's Web Site" should now be in a large point size and in bold.
You may have noticed from that menu that there are a variety of header styles - "Heading 1" to "Heading 6". Although Nvu will not prevent you from doing so, you should only use "Heading 2" after you have used "Heading 1", "Heading 3" after you have used "Heading 2" etc. That is, "Heading 1" is meant to be used as the topmost header in the hierarchy, with "Heading 2" used for the lower level section headers, and so on.
Note that even though you're using "Heading 1" for "Tang's Web Site", it is still possible to control or change the point size and font face using the method mentioned earlier.
If you want to add an image to your web page, you must have a means of creating that image. For that, you either need to have access to a graphics drawing program, or if you already have the picture on paper that you can use (such as a logo that is printed on your company's letterhead), you will need to scan that picture into the computer, or you can search the Internet for free graphic files.
If you are creating your own pictures, you need a drawing program that can create either PNG, GIF or JPG files.
You will find information
regarding the different image format in When and How to Use Internet
Image Formats.
To insert an image beside the words "Tang's Web Site", first position your cursor to the left of the word "Tang" (or whatever word you have typed in the header). Next, select "Insert---- Image..." from the menu. A dialog box will pop up asking you for the location of the image. Click the "Choose File" button to locate your file.
Ensure that the checkbox for "URL is relative to page location" is checked. Note: if this box is greyed out, making it impossible for you to check it, it probably means that you have not saved or published your page before.
**** Important: Remember to make sure you saved all your web images files in one place (the "images" folder under "My Web Sites"). You should create an "images" folder on your free web hosting account as well, so both of your web site file structure are identical. This way, when you upload files or insert images...etc. , every file would be in the same relative location either on your own computer or in the hosting account. *****
Of course, if you just throw all the files into one folder that will work, too. However, if you want to build a sophisticated web site, organization is the key. Otherwise, file management will become a nightmare later on.
In the "Alternate text" field, enter "Logo for Tang's Web Site". This field will be displayed if the visitor uses a browser that does not display graphics (or has the graphics display deliberately disabled). It is also useful for people who are blind or visually impaired, and rely on speech synthesizers to read web pages out aloud for them. As such, any time you add a picture, it is important that you add some sort of descriptive text in the "Alternate text" field. (see my Web Accessibility Initiative handout and link on Angel for more details)
Click the tab "Appearance" in the dialog box. The dialog box should now allow you to change the alignment of the image. Click the down arrow beside the "Align Text to Image" field to drop down a menu with the options available for that item. Select the item "Wrap to the right" on that drop down menu. This will cause any text that follows your picture to move to the right of the image.
Click the OK button. Your image should display to the left of the words "Tang's Web Site". Depending on the height of your image, it is possible that some of the words in the paragraph that follows are also aligned to the right of the image.
Move your cursor to the start of the main paragraph, that is, move it to the first "T" in the "ASCA statement". Select "Insert"-----"Break Below Image". The paragraph should now start below the image and not wrap to the right of it as before. Note: You do not have to do this if your image did not affect your main paragraph. To undo what you just did, click "Edit ----- "Undo" on the menu. You can always use "Edit ----- Undo" to undo something that you just did, if you decided it was a mistake.
At this point, your page may or may not look good, depending on the size of your image. If your image is too large and the text too small, the alignment will not look good. One way to fix that is to adjust either the size of the image (use your drawing program) or the size of your heading.
If putting the image to the left of your header does not work too well, you can insert the image above your header. To do this, delete the existing image by clicking on it with your mouse, and hitting the Delete key. Next, insert a blank line above your header and move your cursor upwards to the blank line. Insert the image as before, only this time, do not change the alignment of the image in the "Appearance" tab (just leave it set to the default).
If you insert an image in this way, you may want to center both the image and the header "Tang's Web Site" on your web page. To do this, click on the image once to select it. Then select "Format ----- Align----- Center". Similarly, to center "Tang's Web Site", select the text, and then use "Format ---- Align----- Center" from the menu again.
There may be occasions that you need to change the color of certain aspects of your web page. For example, you may wish to change the background color of your page. To do this, select "Format ------ Page Colors and Background" from the menu. Click "Use custom colors", and then the color button beside "Background". You will be presented with a dialog box with many colors to choose from. Select your preferred color then click OK to accept the changes.
If you are changing the colors of your background and text, be sure to select colors that will contrast well so that your text can be easily read.
In the Lessons to come, we will create a number of other pages. In order for your visitors to reach those pages, you need to add links to those pages.
To create a series of links to the other pages on your site, do the following:
Move your cursor to the bottom of the page. Leave a blank line after the the paragraph above. We will be creating a navigation bar for this site at the bottom of this page.
Select "Insert ------ Link" from the menu.
Enter "Home" (without the quotes) in the box entitled "Enter text to display for the link". This will be the underlined text that visitors will see.
For the "Link Location" field, enter "index.html".
Click the OK button.
Using the same procedure, add links to the following pages as well:
Separate the links using a space and a vertical bar.
When you've finished this, the bottom of your page should look like the following:
Select the entire line at the bottom, center the line with "Format | Align | Center", and if you wish, change the font to "Helvetica, Arial" as before.
At this point, your page should look something like the following. I'm assuming that you have placed your picture above your main header, and centered both. Since I don't know what picture you used nor its size, I've put a placeholder in the diagram below:
[ Your Site's Logo Here ]
At this point, you have a working main page for your web site, except that the real text for the page has not yet been written. You will now replace the header on the page (if you have not already done so) with the real content of your site.
Here are some tips on what you can put on your main page.
The header "Tang's Web Site" should of course be replaced with the real name of your website.
Visitors arriving at your site at the main page should be able to tell what your site is about. The text and graphics in your site should work together to that end. This does not mean, though, that you have to write a long story on your front page describing the purpose of your site. However, simply putting a cryptic picture in place of the existing text will not help your visitors figure out what your site is all about.
Your main page should also allow visitors to access the rest of the site. For the purpose of this tutorial, we have placed links to certain pages of the site that are found on a typical company website. If you intend to have other pages, you should create a link to that page as well. Important: when creating filenames for these other pages, create names that do not have any capital letters (ie, uppercase letters) or spaces in them. Spaces and capital letters in the names might lead to problems when you upload them to your web server.
Once you've finished rewriting the text on the page with more appropriate content for your site, publish your web page again. Save the file for the last time. Now upload it to the hosting server. Make sure you also upload the image file on to the server----If you don't you will not be able to see the image on the Internet. If you have not created a folder inside the "htdocs" folder, please do so right now. Once you have an "images" folder, upload your image (logo) file in the "images" folder.
Congratulations - you now have a functional main page for your website.