Editing Your Web Design Template (Quick Guide)

- Opening HTML File
- Changing Text in an HTML Editor
- Changing Text Font and Color in HTML Editor
- Setting Links in HTML Editor
- Adding Images with HTML Editor

- Opening an HTML File

HTML editors are very commonly available. In fact a few are available for free download over the internet. However, the most commonly used and easily usable is MS-FrontPage.
To open HTML file with Ms-FrontPage, Click on the File menu and select Open. Browse and point the editor to your HTML file. A simpler way to open the file is to right click on the file and select “Open With” and select MS-FrontPage.

Figure: Opening HTML File

You can also drag and drop the HTML file into the FrontPage workspace to open it. Other methods of copy and paste to open are not recommended.

- Changing Text in an HTML Editor

In order to make your web page make sense to the right audience, you will need to change the content in the template to replace it with your own text. All HTML editors support this feature and it is very easy to change text using one. When the HTML file is open in MS-FrontPage, you will see tabs on the bottom-left corner of the workspace that say “Normal”, “HTML” and “Preview”. The normal mode facilitates placement and editing of text and images on you web page.

Figure: FrontPage Normal Tab

While using the “Normal” mode of MS-FrontPage, you can replace the text by either typing or copying and pasting from your own file into FrontPage. You can delete the dummy text contained in old template without any side effects of damaging the design of the original template.

- Changing Text Font and Color in HTML Editor

Now that you have the content typed or pasted into your template, you might need to make it look impressive by using various fonts and colors. In MS-FrontPage, it is very easy to do. Just select the part of the text you want to modify and highlight it.

On the top of your FrontPage window, below the menu bar, you can see many options that can be used to change the font, size and color. You can also assign Bold or Italic tags to your text using this panel.

Figure: FrontPage Toolbar

This is a process that can be used effectively for small parts of text.

Figure: Changing Style of the Entire Page

However, if you need to change the color and style a whole page, it is advisable to use CSS or cascading style sheets. To achieve this you may need to use a style sheet editor or better still add the styles to the HTML code. In case, you are using FrontPage, select Format/Style from the menu. Select the style you need to change and select modify. By selecting the attributes from the bottom left hand corner, you can modify the properties of the whole page.

- Setting Links in HTML Editor

Setting a reference to a desired address on the internet is the main advantage that an HTML document offers. It is very important to know, how easy it is to achieve this. Using an HTML editor, select the text that you want referenced to a website address. Now right-click and select properties and then hyperlink. A window pops up asking you to enter the desired website address. Type in the complete address of the website as below:

Figure: Website address Input Box

- Adding Images with HTML Editor

In order to make your web page look better and to market you products and service more effectively, it is necessary to have images. Adding images to your web page is very easy, especially if you are using MS FrontPage.

Before you proceed further, you need to copy the image files to the images folder of your web design template. After doing this, you can double click on an existing image on your template and click on general on the dialog that pops up. Use the browse button to select the image that you want placed there.

If you want to add images to the template, you can choose Insert/Picture/From File and browse to the location of your image file.

Figure: Adding images to your web page.