Home Photoshop Articles Photoshop to Dreamweaver

Photoshop to Dreamweaver

Author: FotoFects More by this author

Added: Jul 14, 2005 Rating:

Level: Beginner Software: Dreamweaver

	16. Select the table you've pasted and memorize the width and height.

	17. Press the left arrow to deselect the table so that the cell containing the templates' table is selected. With the cell selected, apply the width propertie you've memorized in the previous step to the width of the cell holding the table of the template.

	18. Select the outer table you've created in step 14 and input the height property you've memorized in step 16 to the height field of the outer table.

	19. Lets begin by changing the background of the document. You may simply edit the background property inside the Page Properties (Ctrl+J). However, you may use CSS (Cascading Style Sheets) to specify the background instead. CSS is more customizable than regular HTML styles and should be used when necessary.

	20. For this template, I will use CSS to apply the background colour. To change the background using CSS, create a new CSS style (Text> CSS Styles> New) with the following properties: Selector Type: Tag (redefines the look of a specific tag) Tag: body Define in: (New Style Seet File)

	21. After you've saved the CSS file, a CSS Style definition window will popup. Select the background category and click on the square background color selector. You'll notice that your cursor will change into a color picker cursor. You may use the color picker to select a color from anywhere on your screen. I've selected a color from the bottom of the template so that the background will blend width the bottom of the template. Press OK to close the CSS Style definition window.

	22. Preview the template (F12). If Macromedia Dreamweaver asks you to save the file, select Yes. It may also ask if you want to save other files. If Macromedia Dreamweaver asks you to save other files, select Yes.

	23. One way to blend the left and right sides is to have the left and right side stretched to the width of the screen. To create the images required for this effect, edit the Photoshop template in Adobe Photoshop. If the document is already opened in Adobe ImageReady, transfer the document to Adobe Photoshop (Edit> Edit in Adobe Photoshop).

	24. To create the image required to stretch the left side of the template, use the Canvas Size tool (Image> Canvas Size) to apply the following properties: Relative: Unchecked Width: 1 pixels Anchor: Left middle

	25. Use the Save for Web tool (Alt+Shift+Ctrl+S) to save the image. I will save the image as a *.gif file with an identifiable name such as "bgleft.gif".

	26. After the image has been saved, undo the Canvas Size step. After saving the image, the Undo option will be unavailable. Instead, use the Step Backwards (Alt+Ctrl+Z) technique to undo.

	27. To create the image required to stretch the right side of the template, use the Canvas Size tool (Image> Canvas Size) to apply the following properties: Relative: Unchecked Width: 1 pixels Anchor: Right middle

	28. Use the Save for Web tool (Alt+Shift+Ctrl+S) to save the image. I will save the image as a *.gif file with an identifiable name such as "bgright.gif".

	29. Switch to Macromedia Dreamweaver.

	30. Select the left column and enter or browse for the left stretch image created in step 25. Repeat this step for the right column but use the right stretch image created in step 28 instead.

	31. Save the document (Ctrl+S) and preview (F12). The left and right sides are stretched and the bottom of the template seamlessly blends in with the background.