Macromedia Dreamweaver:
How to work with templates using HTML editor:
Opening HTML File:
First open Dream weaver installed in your system.
1) Select FILE/OPEN from Menu and browse to location of your HTML file
(Or) Just drag and drop it from file browser to your HTML editor.
How to change text in HTML Editor:
It is useless if there is no content in your web design template, so add your own text. Observe that there will be some text blocks that are filled with dummy text when you open HTML file. Substitute it with your own text. Edit your text and see how site will look after publishing at the same time.
- To turn on this view you have to select VIEW/DESIGN from the top menu of Macromedia Dream weaver (or)
Click Normal tab at the bottom for Microsoft FrontPage where you can type your
text directly.
How to change Text Font and Color in HTML Editor:
For changing part of text or some words select TEXT width properties you want to modify.
(Or)
If you use Front page they are tools at the top of toolbox which can change text color, font and its size.
- In Dream weaver there is option for you to check and change text properties at the properties panel. If it’s not viewable select Window/properties from top menu to call this properties panel. But if you decide to change color of text on whole page you can use CSS(Cascade Style Sheets) to change text attributes of whole page or can specify tag. They can be done in two ways one way is to use built-in style sheet editor or just put the style directly to HTML code.
- In Dream weaver MX6 you have to press Ctrl+Shift+E to launch CSS editor
(Or) Choose Text/CSS Styles/Manage Style from top menu .Then you will see list of styles used in this web design template. Now double click style that should be edited and just change font options in pop-up window.
- In Microsoft FrontPage you have to choose Format/Style from the top menu.
and double click style that should be changed. Choose Font button at the bottom of appearing dialog where you can modify all possible text properties.
How to set links in HTML editor:
- Hyper reference is the main advantage of a HTML documents and to add links in your web design template. The HTML code for putting hyper link is by using anchor tag <a href=”your_url_here”> Content goes here </a>.Before using this tag you have to open the tag and after giving the content you have to close the tag.
- And in Dream weaver select text or image that you want to link to some URL and after that go to properties panel (Press CTRL +F3) then a link input box will appear which should be filled with URL.
- For FrontPage you can add link by Right click on the selected text or image and select hyperlink from context menu and then fill address input box with appropriate URL.
How to add images using HTML editor:
- To add images with a new one you should follow these steps. First Copy your image file to the images folder of your web design template.
- Now in Front page double click image that should be changed and in dialog that will appear after the select General tab there will be input box with image name and browse button to the right just click it to your image file.
- For Dream weaver just double click image you have to change and browse to your new image file location. If you want to change with HTML code you have to substitute value of src image attribute.
Before : <img src=”images/logo.jpg”>
After : <img src=”images/new_logo.jpg”>
- If there is any problem while working with double click it means it is not the content image but is a background image. To know how to change images browse our Changing Image in Photoshop tutorial.
- Now if you use Dream weaver for managing out web design template you should choose Insert/Image from top menu and you can browse to your image files.
- And if you use Front Page Choose Insert/Picture/from File and browse to the location of the image file.
|
