Dreamweaver Tutorials > Day Two > Page 2

Open up Adobe Photoshop.

In Photoshop, open up one of your old projects in their .PSD format if you still have it. Otherwise, open up the .JPG or whatever else you saved it as. Check the image’s size by going to Image->Image Size. If the pixel dimensions of your project are any bigger than the standard size of 640x480, you should enter a width of 640 and see what it shrinks to.

It’s best to use your judgment when doing the image conversions. You have to have a keen eye to see if the image will actually fit your page well. Once you have your image at or near the size of 640x480, save it a JPEG (.JPG).

Images (Inserting)

Return to Dreamweaver.
To insert an image, either press this button: or select the option to do so from the menu option Insert->Image. Now navigate to where the image you resized in Photoshop was placed, select the image, and press the Okay button. Later in website development, you will want to ensure that the image is relative to the document, but for now, any option will work.

Hyperlinks

Now that the image is inserted in the page, other options like Hyperlinks can be attributed to it or text around it. Write some text on your screen wherever you please. Note that a lot of the same wrapping options apply as if in a word processing program. You’ll mostly want to stick to Left, Right, and Center justifications for the text.

To make text in to a hyperlink, highlight the text you want to be linked by dragging the mouse over that particular text. Next you can either right click and select the option to “Make Link” on that menu, but it’s usually easier to just fill in the field that says “Link” in your bottom tool bar instead.

After doing this, return to your page and their should be blue, underlined text. Just like regular text, hyperlinks can have their attributes change to display differently. This will be covered at a later time.

Just like text, images can have hyperlinks attached to them as well. Assigning a link to an image is done exactly the same way it is done to text in Dreamweaver, so it shouldn’t be any problem figuring out how to do that.

Conclusion

In day three, we will go over one of the more important aspects in designing web pages: table. Keys to designing a web page will be emphasized in addition to the tables.

Back to Page 1


This web page created, developed, and maintained by Kyle Spahn and Mr. Krebs.