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.
Text in HTML Editor
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 dont
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.
Text Font and Color in HTML Editor
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 cant
see it for some reason, select Window/Properties from top
menu to call this properties panel.
Fig 7.5 Dreamweaver Properties Panel
Its 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
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
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:
If you want to change table cell text size to 11px you should add
following code in td tag:
Links in HTML Editor
A hyper reference is the main advantage of HTML documents. So its
very important to know how to add links in your web design template.
This procedure is very simple if youre using HTML editor.
If youre 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 cant see it for any reasons).
In this panel you will see Link input box. Fill it with appropriate
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
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:
Images Using HTML Editor
To make your web site based on our web design template unique you
can substitute included images with your own or add additional images
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
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 doesnt 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
and browse to the location of your image file.
Back to Help Center