9.4 Inserting text and graphics

Webpage authoring exercise 2

Entering text

1. Open the home.html page and set the view at the top of the screen to DESIGN or LIVE.
2. Press <Enter> or <Return> to leave a blank line and enter the text shown at the right, pressing <Enter> or <Return> after each line.
3. You can spell check the text using CHECK SPELLING from the COMMANDS menu.

Formatting the text

Each paragraph can be formatted individually, but it is much more efficient to create a series of styles, called CSS styles, which will be recorded in a styles.css file.

1. Highlight the first line of text and, in the PROPERTIES panel, turn on the CSS button then set the FONT box to VERDANA.

   

2. 

   The NEW CSS RULE dialogue box should open. Set the SELECTOR NAME to HEADING, the RULE DEFINITION box to NEW CSS RULE and select OK.

3. 

   You will be asked to save the CSS RULE. Its file will store all the formatting that you do for the site. Enter the filename styles.css and select SAVE.
4. In the PROPERTIES panel set the FONT-WEIGHT to BOLDER, the SIZE to 36 px, the COLOUR to YELLOW and the ALIGNMENT to CENTRE to complete the formatting. These formats will be added to the HEADING style.

   

5. Highlight the next line of text and, in the PROPERTIES panel, turn on the CSS button and set the FONT to ARIAL, HELVETICA, SANS SERIF.

   

6. 

   In the CSS RULE dialogue box set the SELECTOR NAME box to Body_Text, the RULE DEFINITION box to the styles.css file and select OK.
7. Complete the style by setting the FONT-WEIGHT to BOLD, the SIZE to 18 px, the COLOUR to PALE BLUE and the ALIGNMENT to CENTRE.

   

8. Highlight the last 3 lines of text and set the TARGETED RULE box in the PROPERTIES panel to the Body_Text style.

   

Adding a background colour to the page

A background colour can be applied to the page.

1. In the PROPERTIES panel click on the PAGE PROPERTIES button.
2. Click on the BACKGROUND COLOUR box, select a DARK BLUE or DARK TEAL and press <Enter> or <Return>.
3. Select OK to return to the page.

Inserting an image

An image will be added below the text.

1. Click on the blank line after the last text then display the INSERT menu and select IMAGE.
2. Open the Ticket image downloaded from the link above.

   

3. You will be asked to copy the file to your site’s ROOT FOLDER, select YES.
4. Create a NEW FOLDER called images. Open the folder and select SAVE to store the image in that folder.
5. In the ALTERNATE TEXT dialogue box set the TEXT NAME to Ticket image and select OK to insert the image.

6. 

   You can use the bottom right handle of the image to adjust its size. Holding down the <Shift> key will maintain the proportions of the image.
7. The Body_Text style can be used to centre the image. Click to the right of the image and set the TARGETED RULE box in the PROPERTIES panel to Body_Text.

Adding a line to separate the heading

A horizontal line can be added to the page to separate the heading from the text.

1. Click at the beginning of the second line of text.
2. Open the INSERT tab in the PANEL GROUP at the right of the screen and, in the COMMON section, click on the HORIZONTAL RULE option.
   

   

   
   Note: The PROPERTIES panel can be used to format the line. If the INSERT panel is not in the PANEL GROUP, you can open it from the WINDOW menu.
3. Select SAVE ALL from the FILE menu to save both the HOME and STYLES pages.
4. You can click on the PREVIEW/DEBUG IN BROWSER icon in the STATUS BAR at the base of the page and select a browser to see how the page will look in a browser, then close the browser.
5. You might also like to open the styles.css file from the files panel to see what formatting information has been recorded. Once you understand the code, you can enter the style code manually.