Step 9) Inserting Images. Back to the Costrasa site. So after I prepared the layout for content I went and did the 'latest page' section. I went into photoshop and cropped a 550x70 pixel chunk of of my brother's comic page and inserted it in the layout.

To put a picture into dreaweaver, first go to the table cell where you want the picture. Then just go to the top, click on the picture and then go to Image. Or go to Insert > Image. (This is equivalent of <img src="linkofpic.jpg"> in code.)

After that, I clicked on the image and went down to the properties panel and added a link to it, so now it's clickable and goes to latestpage.html. ( <a href="linkhere.html"><img src="imagelink.jpg"></a> ) You will also see that I added 'H Space'. H Space means horizontal space and V Space is vertical. It refers to the amount of space where there's no text/etc. Example:

H Space = 0 H Space = 5 H Space = 15

Looks like I put extra spaces, but it's useful when you have a picture next to a chunk of words. Looks better. :) (code= <img src="blah" hspace="5" vspace="5"> Just replace 5 with desired value.) Most the pictures in this tutorial are next to paragraphs of text. To put a picture next in the middle of a bunch of words, just go down to the properties and find the Align area. Changing it changes how the picture interacts with the text. For example, that picture above is aligned to the right (lul irony. It says left.) with an H Space of 5 and V Space of 7. (You can insert align code inside the img tag with the rest of the hspace/vspace stuff. <img src="picalign.jpg" vspace="7" hspace="5" align="right"> or some other options are align=left or absbottom, absmiddle, middle, bottom, top, textop, baseline.)

>> Next: Drawing Hotspots

<< Previous: CSS