In the previous chapter of this tutorial, we designed a rudimentary web page and uploaded it to the web host.
In this chapter, you will learn how to
By the end of this chapter you should have a working main page of your real web site.
If you missed the first instalment of this tutorial, you may want to start with that first, since I will assume you know the things covered there. And if you are completely new to making a website, you should start with the article How to Create a Website.
If you recall, in the previous chapter, we typed the following text into Nvu:
Shakespeare's Website
Double, double, toil and trouble; fire burn, and cauldron bubble. Fillet of a fenny snake, in the cauldron boil and bake; eye of newt and toe of frog, wool of bat, and tongue of dog, adder's fork, and blind-worm's sting, lizard's leg and howlet's wing, for a charm of powerful trouble, like a hell-broth boil and bubble.
Let's spruce up the page. As it stands, we have not specified the font face 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" font face will be used (unless your visitor has changed the default setting). 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 everytime 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 from the first "S" in "Shakespeare" to the full stop (period) after the last word. Alternatively, type Ctrl-A (type "a" while holding down the key labelled "Ctrl") in Windows to select everything.
From the "Format | Font" submenu, select either "Helvetica, Arial", "Times" or "Courier". I will assume that you selected "Helvetica, Arial" in this tutorial. "Helvetica, Arial" (actually "Helvetica, Arial, sans-serif" although the menu does not say it) means that if the browser finds a font named "Helvetica" on the visitor's computer, it will use it, otherwise it will use the "Arial" font. If the latter is not available either, the browser will try to use some other sans-serif typeface. For the curious: the Helvetica and Arial fonts are very similar in appearance. Arial is found by default in Windows systems, while Helvetica is available by default in a number of systems.
The appearance of the text should instantly change. If you are running Windows, the Preview window will now show your text using the "Arial" font.
You can also change the point size of the font on the page. For example, if you think that the text of the "Double, double" paragraph is too small for your visitors (for example, your site caters to people who need large print such as the elderly or the visually impaired), select the "Double, double" 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.
Do not change the point size of "Shakespeare's Website". We will do this next, using a different technique.
The text "Shakespeare's Website" is actually the header of the paragraph, or perhaps of the entire page. By convention, both in print and on the web, headers are usually in bold and in a larger point size than the rest of the text on the page.
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 "Shakespeare's Website" at the top of the page. Go to the "Format | Paragraph" menu and select "Heading 1". "Shakespeare's Website" 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 "Shakespeare's Website", 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.
If you are creating your own pictures, you need a drawing program that can create either PNG, GIF or JPG files. If you have no idea where to get such a drawing program, you can find a list of free programs on thefreecountry.com's Free Drawing and Painting Software page.
A basic guide to designing a logo for your site can be found in my tutorial How to Create a Logo for Your Site the Quick and Easy Way: Logo Making for the Graphically Challenged.
To insert an image beside the words "Shakespeare's Website", first position your cursor to the left of the word "Shakespeare" (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. Please return to chapter one of the NVU Tutorial for more information on how to do this and the reasons why this is important.
In the "Alternate text" field, enter "Logo for Shakespeare's Website". 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.
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 "Shakespeare's Website". 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 "D" in "Double, double, toil and trouble". 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 centre both the image and the header "Shakespeare's Website" on your web page. To do this, click on the image once to select it. Then select "Format | Align | Center". Similarly, to centre "Shakespeare's Website", select the text, and then use "Format | Align | Center" from the menu again.
There may be occasions that you need to change the colour of certain aspects of your web page. For example, you may wish to change the background colour of your page. To do this, select "Format | Page Colors and Background" from the menu. Click "Use custom colors", and then the colour button beside "Background". You will be presented with a dialog box with many colours to choose from. Select your preferred colour then click OK to accept the changes.
If you are changing the colours of your background and text, be sure to select colours that will contrast well so that your text can be easily read.
In the chapters 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 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, centre 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 centred 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 ]
Shakespeare's Website
Double, double, toil and trouble; fire burn, and cauldron bubble. Fillet of a fenny snake, in the cauldron boil and bake; eye of newt and toe of frog, wool of bat, and tongue of dog, adder's fork, and blind-worm's sting, lizard's leg and howlet's wing, for a charm of powerful trouble, like a hell-broth boil and bubble.
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) and the incantation by the witches in Macbeth with the real content of your site.
Here are some tips on what you can put on your main page.
The header "Shakespeare's Website" 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 or company. However, simply putting a cryptic picture in place of the existing Shakespearean text will not help your visitors figure out what your site or your company 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, for example a page listing your products, 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. Select "File | Publish". When the dialog box appears, put a check in the checkbox for "Include images and other files". If you don't do this, your images will not be uploaded to your website. Finally, click the OK button to allow Nvu to upload your revised page to your web server.
Congratulations - you now have a functional main page for your website.
In the next chapter of this tutorial, you will learn how to use data tables as the first step to learning how to create multiple column layouts for your website.
Next: Nvu Tutorial 3: Creating Data Tables
Copyright 2003-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
You are here: Top > Getting Started with Your Website > How to Create a Website > Nvu Tutorial 2: Adding Images, Changing Fonts, Changing Colours, Creating Links, Writing Your Content
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add Images, Change Fonts and Colours, Create Links, and Write Your Content in Nvu (Tutorial)
