Place the index page layout and images in a single table with two columns.  Set the width at 100% and select Window-Properties to align the layout table.  In the drop down menu, select Horz for the left and Vert for the right.  This feature allows you to work with the layout to ensure it is compatible with 1024 resolution. Now you can toggle to Adobe Photoshop and open the layout.  Draw a 1-pixel vertical marquee to cover the background color and copy the image and merge the layer using the Edit Menu-Copy Merged.  Note that this does not merge the layer in the PSD file, you must open a new file and paste the copied data into the new file.  To simplify working with the file in Dreamweaver, you can increase the size of by 1 pixel.  Save the background image as tablebg.gif and open Dreamweaver.  Place the entire layout in one column, then select the right side of the gif and place the gif inmage in the second column.  Click on the Bg in the Window-Properties and select tablebg.gif as the background.  Apply the tablebg.gif to both columns.  The HTML page adjusts itself according to the resolution.  If you have completed all steps, the layout should be compatible with both 800x600 and 1024x768 resolutions.

For simple layouts, a bg image can be placed into the overall background of the HTML page using the Modify Menu and the background impage of the page properties will be tiled according to the HTML page.  CSS, Cascading Style Sheet is an external text file which contains style and formatting specifications.  Select Window-CSS styles to choose a new style.  You will be prompted to say the original style.  The style sheet window has the following options:  Text, Background, Block, Box, Border, List, Positioning and Extensions.  Select Background and assign a file name for the background image.  Here you need to set the coordinates as repeat, no repeat, x-repeat or y-repeat depending upon your particular layout.  At this point, you can also select horizontal and vertical positioning for the image to align the background and apply the selection to the CSS for the body.  Now save the file using the File Menu-Save option and your page will be ready to display.  To check the image of the index page, it is advisable to open it in more than one browser, Internet Explorer and Netscape Explorer will give you a good idea of how your image looks to browsers.

The advantages of using HTML pages with frames are that there are a number of links and buttons with top and left panels that are static.    To create HTML pages with frames, you can slice the page using Adobe Image Ready.  The procedure is the same until you get ready to arrange the pages using the frames option.  Open a new file using the File Menu-New File option.  Select the Window Menu-Frames to display the detailed information on the frames.  Then select the Insert Menu-Frames-Top.  The frameset in the frames window is divided into two parts, a topframe and a mainframe.  Choose the top panel and select File Menu-Open in Frame, then select the top.html.  Adjust the frame border by dragging it to the desired area and click the bottom panel to select Insert Menu-Frames-Left.  Click on the left panel and select File Menu-Open in Frame.  Select the left.html in the frames window and the frameset will be divided into three parts, the topframe, leftframe and mainframe.