Inserting Text & Images in Dreamweaver CS3

Step 5: Dreamweaver CS3 Tutorial - Insert Text & Images

Once your template layout (with tables or div tags) and css stylesheet is created, you can insert any images (e.g. logo), common menu items, text (e.g. copyright info) etc. that form part of the general look and feel of the site into the template.

Inserting Text

You can type in text just as you would in any text editing software. You can apply styles to it from the Properties panel.

appy style

You can also format it with the existing html tags (which you would have redefined in the css file).

format text

Inserting Images

You can insert images [Insert > Image]. You can also position them :

  1. Click on the image.
  2. Open the Properties Inspector. Select the required alignment from the 'align' drop down menu. You could also set the alignment of the cell/ div tag in which the image will be placed.

Common Menu Items

Menu items could be simple text with a style applied to it or javascript code etc.

Site Search

If you plan to have a site search on all the pages you can paste in the search code where required. Various free services are available for site search.

Website Traffic Analytics

It is a good idea to build in any website traffic analyzing code too so that you can easily track traffic to the website later.

Go to Step 6 >>


Dreamweaver Video Tutorials
Dreamweaver Interactive Video Tutorials
Discover Everything You Need To Know To Build Your Website Step By Step
From Start To Finish With This Dreamweaver Tutorial.

NOTE: You will need software like Adobe Dreamweaver, Photoshop and Flash to customize these templates.

 

Dreamweaver CS3 Tutorial for Beginners

Step 1: Define a new site in Dreamweaver

Step 2: Create a Dreamweaver Template

Step 3: Create the Page Layout in the Dreamweaver Template

Step 4: Create the CSS Style Sheet

Step 5: Insert Common Elements into the Dreamweaver Template:Text & Images

Step 6: Create Libraries or Server Side Includes

Step 7: Define the Editable Regions of the Template

Step 8: Create the HTML Pages of the Site with Content/ Forms

Step 9: Link the Pages

Step 10: Test the Site Locally and Upload Online to the Hosting Server

Project 1: Table Based Layout Website

Project 2: DIV/ CSS/ Tableless Layout Based Website

Project 3 : Website with Server Side Includes

Spry Tutorial

Free Dreamweaver CS3 Templates

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.

 

Dreamweaver is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!




Share