To open HTML file with HTML editor you should select File/Open from top menu and browse to the location of your HTML file. Another and more simple way to open file is just drag and drop it from file browser to your HTML editor window.

Fig 7.1 Open HTML File Screenshot

Other ways of file opening, such as copy and paste may cause HTML structure damage and not recommended.

Web design template is useless without content, so first of all you should add own text there. Changing text in HTML file using HTML editor is so easy. When you will open HTML file from your web design template for the first time you will see that all text blocks are filled with dummy text. All you have to do is to substitute it with your own text.

Fig 7.2 Dreamweaver Design Mode

Fig 7.3 FrontPage Normal Tab

All professional HTML editors have design view, so you don’t have to worry about all that HTML tags – you can edit your text and see how site will look after publishing at the same time. To turn this view on you should select View/Design from the top menu for Macromedia Dreamweaver or click Normal tab at the bottom for Microsoft FrontPage. You can type your text directly in HTML editor or copy and paste it from your documents or previous design web site.

To increase impression of your future web site based on our web design templates maybe you will need to change text color or font style. There are some ways of doing that.

If you want to change part of text or some words do the following. Select text, witch properties you want to modify.

If you are Microsoft FrontPage user you can see high amount of tools at the top toolbox. There you can change text color, font and its size, make text bold or italic and so on.

Fig 7.4 FrontPage Toolbar

If you are working with Macromedia Dreamweaver, you can check and change text properties at the properties panel. If you can’t see it for some reason, select Window/Properties from top menu to call this properties panel.

Fig 7.5 Dreamweaver Properties Panel

It’s easy when you are to changing properties of small parts of text. But if you will decide to change color of text on whole page, for example if you have changed color scheme of your web design template and text must conform new web site color, you should use CSS for it.

You can use CSS (Cascade Style Sheets) to change text attributes of whole page or specified tag. Using of style sheet technologies is recommended by W3C standard for future compatibility with new versions of different browsers. There are two ways of doing that – you can use built-in style sheet editor or put style directly to HTML code.

If you are using Macromedia Dreamweaver MX 6 then you have to press Ctrl+Shift+E to launch CSS editor or choose Text/CSS styles/Manage Styles… from the top menu if you are using Macromedia Dreamweaver MX 2004. You will see list of styles used in this web design template. Double click style that you want to edit. Then just change font options in pop-up window.

If you are Microsoft FrontPage user then you should choose Format/Style… from the top menu.

Double click style you want to change. Select font button at the bottom of appearing dialog. Now you can modify all possible text properties.

If you have some HTML skills you can put style directly into code tag. For example if you want to change link color to red you should put following code into reference tag:

< a href="url" style="color:FF0000">Reference Text</a>

If you want to change table cell text size to 11px you should add following code in td tag:

<td style="font-size:11px">Cell content</td>

A hyper reference is the main advantage of HTML documents. So it’s very important to know how to add links in your web design template. This procedure is very simple if you’re using HTML editor.

If you’re using Macromedia Dreamweaver select text or image that you want to be linked to some url. Then go to Properties panel (press CTRL+F3 if you can’t see it for any reasons). In this panel you will see Link input box. Fill it with appropriate url.

Fig 7.6 Link Input Box

For Microsoft FrontPage user link adding procedure is following. Right click on selected text or image and select Hyperlink… from context menu. Fill Address input box with appropriate url.

Fig 7.7 Address Input Box

If you have some skills in HTML coding you can put hyper link directly into HTML code. You have to put opening reference tag before content you want to be linked and closing tag after that:

<a href=”your_url_here”>Content goes here</a>

To make your web site based on our web design template unique you can substitute included images with your own or add additional images there.

To substitute existent image with a new one you should do following. Copy your image file to the images folder of your web design template.

If you are using Microsoft FrontPage double click image you want to change. In dialog that will appear after that select General tab. There will be input box with image name and Browse… button to the right of it. Click it to browse to your image file.

Fig 7.8 FrontPage Picture Properties

For Macromedia Dreamweaver users that routine is quite easy. Just double click image you want to change and browse to your new image file location.

If you want change image directly from html code your have to substitute value of src image attribute:

Before: <img src=”images/logo.jpg”>

After: <img src=”images/new_logo.jpg”>

Note: If double clicking on image doesn’t works it means that this is not a content image but background image. For instructions of how to change it read the Changing Image in Photoshop section.

Adding images to your web design template. Copy your image file to the images folder of your web design template.

If you are using Macromedia Dreamweaver for managing out web design template you should choose Insert/Image… from top menu and browse to your image file.

If you are Microsoft FrontPage user choose Insert/Picture/From File… and browse to the location of your image file.

Back to Help Center