Text&Images

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Inserting Text & Images

There are a number of ways of inserting text into a dreamweaver html file. First, you can just type it in just as you would with a wordprocessor. But what if you have a document saved as a different format and would like it in a web page?

You can convert your document to HTML in two ways. The most common method is to Cut & Paste. The other method is to save your wordprocessor document as an HTML file.

In this tutorial we will be doing both. You should have Corel WordPerfect 6.0 +above or Microsoft Word 97 +above on your computer. First we will cut and paste.

1 Download this WordPerfect Document or Microsoft Word document to your C:\Websites\Cyberrez\ folder
2 Right click on the above link(s) and select Save Target As
3 Select the C:\Website\Cyberrez folder and click OK
4 Now open up the document in your wordprocessor

Cut & Paste

A cut & paste is fairly simple, here are the steps:

1 In the wordproccessor highlight the first sentence "Welcomes to the Cyber Rez Website,
I hope you enjoy your visit."
2 Select Edit > Copy from the menu bar (or press CTRL-C)
3 In Dreamweaver open up the homepage that you created, index.htm
4 Place the cursor in the right column and select Edit > Paste from the menu bar (or press CTRL-V)

Voila your text is in dreamweaver now.

The Cut & Paste is the most easiest and simple method to insert text into a dreamweaver document. The only disadvantage to this method is that it removes all text formatting from the original source (like font size, type, and spaces between paragraphs) unless it's an HTML document. Which means you will have to reformat all of the text to look like the original.

Saving As HTML

The other method of inserting text is to save your file as an HTML file from a wordprocessor like WordPerfect or Microsoft Word. These word processors usually keep all the formating the same as the original but sometimes there are small noticable errors. You will have to edit the document when this occurs.

Here we go:

1 Open the file cyberrez.wpd or cyberrez.doc in your wordprocessor
2

In WordPerfect select File > Save As

From the File Type field Select HTML
Choose the folder where you store your website (eg. C:\Website\Cyberrez\)
Click OK
   
In Microsoft Word select File > Save As HTML
Choose the folder where you store your website (eg. C:\Website\Cyberrez\)
Click OK

Your Document is now converted to HTML

In Dreamweaver, open up this new html page called cyberrez.htm

You'll see that most of the formatting from the wordprocessor is the same, but there are some differences. We will cover the advanced section of importing text from wordprocessors in a later tutorial. At the moment this page will serve our needs.

Now we can copy the text to another dreamweaver document without losing any of the text formating

1 Highlight the text from Latest News... to lot of fun
2

Select Edit > Copy from the menu bar (or CTRL-C)

3 Move the cursor to the space after the text in the Cyber Rez homepage
4 Paste the text into the page, by selection Edit > Paste (CTRL-V)

INSERTING AN IMAGE THUMBNAIL AND LINK

A thumbnail is a term used to describe a small image of an original picture. Thumbnails are usually linked to the original so that when you click on the thumbnail, it shows you the large original.

We are going to create a large thumbnail on the homepage of the Cyber Rez site.

1 Insert the image in C:\Websites\Cyberrez\graphics\Image07_small.jpg after the Welcome message and horizontal line
2

Click on the image once so that a border show up around it

3 Beside the Link field in the Property Inspector, click on the target folder icon.
4

In the Select File window, choose the image C:\Websites\Cyberrez\graphics\Image07.jpg and Click OK

The thumbnail is linked to the larger image.

Save the homepage, File > Save

 
Windows Tutorials
Windows 98 Basics
Multimedia Tutorials
Planning A Website
Creating an HTML page
Dreamweaver 3
Fireworks 3
  Adobe Photoshop 6