Using Dreamweaver to: add background images & colors centering Web page in the browser display modify button links with rollovers or No-Link graphics

Transcription

1 Using Dreamweaver to: add background images & colors centering Web page in the browser display modify button links with rollovers or No-Link graphics By James A Watrous Using Dreamweaver to modify Web files that were created in Photoshop with Save for Web & Devices. It is assumed that the Web pages are created as well as the background tiles and button graphics. The four modifications covered in this set of instructions are: Adding a background color that appears beyond or outside of the designed page size Adding a background image tile that appears beyond or outside of the designed Web page size Centering the Web page in the browser display Replacing any button associated with its own page with a No-Link button graphic Replacing simple buttons with rollover buttons J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 1 of 11

2 Adding Background Color and/or Background Image This next part is an optional set of steps for setting the background color and background tile image that appears beyond the size of the canvas created in Photoshop. The main purpose of this procedure is to file the white space that appears when viewers use higher resolution monitors or wide screen monitors beyond the 1024 pixel width. Starting with the index.html file, in which the zoom tool was used with the Alt key to zoom out, you can see the region beyond the right edge of the home page shown in white (the default for browsers). USEFULL TOOLS: Select tool; Hand tool; & Zoom tool. In the circle noted above, there are three tools that are quite useful. The first is the selection tool, the second is the hand tool and the third is the zoom tool. By default the zoom tool zooms in. Press and hold down the Alt key and the zoom tool zooms out. This step is accomplished by selecting the Modify command and choosing the Page Properties subcommand for the index.html file. In the Page Properties {Appearance(CSS)} select a background color (Yellow in this example) and browse for a background tile image (bkgd_tile2.gif in this example previously placed in the images folder). Now click OK for the Select Image Source, click the Apply button in the Page Properties window, and then click the OK button to finish this step. Now save the index.html file. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 2 of 11

3 .gif tile for areas beyond the Web page boundaries This html page is shown in the next illustration by opening it in Firefox. The tile file was created in Photoshop and is shown here in this paragraph. The white X is actually the transparent part of this gif file and allows you to see whatever color is behind the gif image. Since we set the background color to yellow, we expect to see yellow X s outside the actual canvas size of 1000 by 740 pixels. The rest the gif image is red and green triangles. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 3 of 11

4 As viewed in Firefox In the Firefox browser you can observe the effects created for the Web page when viewed at a resolution of 1280 by 1024 pixels. Note that the Web page is not centered in the Firefox browser. Centering Web page in the browser display This is accomplished by choosing the Select tool and clicking the right side of the Web page in the design portion of Dreamweaver (the lower screen of Dreamweaver). Next, hold down the Shift Key and hit the left arrow key once to select the entire design and its associated table. The Properties panel at the bottom will change its display to reflect choices that can be made for the selected table. In this case choose the Center choice in the Align box noted in the circle in the illustration below. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 4 of 11

5 In the align box choose the Center choice. The index.html page is centered with the background color set to yellow and the background image set to bkgd_tile2.gif. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 5 of 11

6 Replace Deactivated Buttons with No-Link Graphics (No-link graphic buttons are buttons that are deactivated on their own page. For example, the Home button becomes deactivated on the home page and similarly the study technique button becomes deactivated on the study technique page and so on for the other two pages.) Start Dreamwever and open a index.html file that was created in Photoshop Save for Web & Devices... J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 6 of 11

7 In the first step on the Home page (index.html file), select the home button and delete the contents of that particular table cell. Select the insert command and choose image sub-command. In the insert image window navigate to the no-link graphic image and click OK. Then enter the alternate text for this image and click OK a second time. You can see the result of this action for the home button (black text on green background). J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 7 of 11

8 Deleting the Home button and inserting a No-Link graphic J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 8 of 11

9 Create Rollover buttons Select the Study Technique s button and delete its contents. Select Insert command and choose the Image Objects and then Rollover image. When the Insert Rollover Image window appears, browse for and choose the original button state graphic. Repeat this step for the rollover button state graphic. Make sure the check mark is present in the Preload rollover image box. Type the Alternate text and then type the URL for this button. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 9 of 11

10 Repeat this set of steps for the reading skills, the fourth, the fifth, the sixth, the seventh and contact buttons. Use the number symbol (#) for the URL of any button that does not yet have an active link or html file. Once you finish modifying all the buttons in this index.html file, then in Dreamweaver do a Save this file. Now open the studytechnique.html file and repeat these steps with the exception that the no-link graphic will be used for the study Techniqus button graphics that normally links to this page. Now do the steps for the rollover functions for the Home button, Reading Skills button, the fourth, the fifth, the sixth, the seventh and the contact buttons. Similarly, repeat these steps for all other html files. Make sure that you save these files in Dreamweaver. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 10 of 11

11 The Home Web page is displayed in the center of the Firefox Browser. The no link home button is displayed with black text on a green background, the over state button for Study Techniques is displayed with black text on a pink background, and the regular (up) state button is displayed with white text on a red background. Note that the background tile (red and green diamonds) is seen with the yellow background color. The red green diamond tile image has a transparent line around each diamond that allows the background color to show through. J. Watrous Dreamweaver Background_Center_No Link_Rollover Page 11 of 11