Dreamweaver – Colors and Page Properties

1. Dreamweaver – Colors and Page Properties • So far things are going just dandy aren’t they? You’ve been following FST’s fun instructions religiously and your pages are coming up nicely. But they are kind of boring. Sorry but who reads a plain white page with a few links of text? • So here’s how to add color and some other fun stuff. Click your mouse for next slide

2. Dreamweaver – Colors and Page Properties • First of all there are several ways to change color but the simplest way is to use the Page Properties menu choice. • First start up Dreamweaver, Open your site and open your index page. • Choose the Modify menu choice and choose Page Properties. Click your mouse for next slide

3. Dreamweaver – Colors and Page Properties • Here is what you should see: • The first thing is the Page title. We have it saved as index but the page will be reported on the web a Untitled1.html unless we change it. • SO CHANGE IT RIGHT NOW to index.html Click your mouse for next slide

4. Dreamweaver – Colors and Page Properties • Lets say you want to use this potato sack man as a background. Make sure you have saved him to a location you are aware of. • Any .jpg or .gif image can be used Click your mouse for next slide

5. Dreamweaver – Colors and Page Properties • Click on the browse button next to the Background field • Browse to the image you saved • You may get a message asking you if it is OK to copy your image to the root folder of your site. This is a necessary thing so say yes. Click your mouse for next slide

6. Dreamweaver – Colors and Page Properties • Whoa!! This background image should make you pause right away. • As you can see there are many things wrong with it. • First it is too obvious to be used as a background image. Anything we put on top of it will be overpowered by the image and the page will be confused. • Please remember, backgrounds must stay in the background. • So lets get rid of this and put a color in the background. Click your mouse for next slide

7. Dreamweaver – Colors and Page Properties • To clear out the image, go to the Modify menu and the Page Properties option • Click in the background image field and delete the title of the image. • Now click the Apply button • Instead let’s put a color in there • Click on the down arrow next to the background field and choose a color your like Click your mouse for next slide

8. Dreamweaver – Colors and Page Properties • Now choose colors for text, links, visited links, and active links. • Make sure that if you choose a dark background, your text and anything else in the foreground is a light or contrasting color. • Or if the background color is light, the foreground colors should be dark. • When you are happy with the colors, choose Apply and OK. Click your mouse for next slide

9. Dreamweaver – Colors and Page Properties • You can set the margins of your page if you wish. • Make sure that you stick with the same margins throughout your site and remember that wide margins rob your site of valuable space on which to include pictures. Generally no more than 10. • The tracing image is a useful feature. If you have a page you would like to use a model for the layout of all of your pages, you can use an image of it as a guide for your new pages. • Here is the page, I want to use as a guide. If you don’t have one to load into Dreamweaver, use your browser to find one Click your mouse for next slide

10. Dreamweaver – Colors and Page Properties • Now hold down the Shift key and find the PrtSc key and press it. You have now saved an image of this page on the clipboard (even though you can’t see it – trust me) • Next start up a program called Macromedia Fireworks in the usual way • Choose the File menu and the New choice • Say OK to the size dialogue box Click your mouse for next slide

11. Dreamweaver – Colors and Page Properties • Now insert the picture from the clipboard by holding down the Ctrl key and pressing the V key • Now we have to save that picture Click your mouse for next slide

12. Dreamweaver – Colors and Page Properties • Go back to the File menu and choose the Save As option. • Make sure you are saving into the folder you are using for your site. If necessary browse to that folder. • Give your picture and descriptive name such a tracer.png and choose save. • If you need to you can save this image in other formats such as jpg or gif (very common on the web) by using the File and Export choice Click your mouse for next slide

13. Dreamweaver – Colors and Page Properties • Now we should use that image as a tracing image. • To so this go back to your Dreamweaver file and choose the Modify menu and the Page Properties choice. • Browse to your tracer image • Set the image Transparency by sliding the pointer about 1/3 of the way from the left • Try it out by choosing Apply • When you are happy with the results choose OK. Click your mouse for next slide

14. Super Giant Big Fun Assignment • Wasn’t that fun? Gosh darn it but you must be dying to set up your own first web page, so let’s rock on. • Open your index page, created in the previous lesson • Modify the page properties to have a suitable set of colors which are appealing the very critical eye of FST i.e. remember what I said about the light background dark foreground or vice versa. • Create and choose a tracer image and set that up as well • Oh yeah change the page title to image like I showed you. • When done proudly display your work to FST so he can TICK YOU OFF. Click your mouse for next slide