Dear Friend,

Hello & welcome back to Firewire, your friendly guide to the exciting world of web-design & web-solutions!

Homepage and Insidepage has been Sliced, Optimized and Converted in html file format. These html pages need to be edited to make it 800 X 600 pixels and 1024 X 768 pixels resolution compatible with page linking and content incorporation.

Macromedia Dreamweaver MX* (HTML Editor) is used to explain the html editing of this layout. Microsoft FrontPage* can also be used instead of Dreamweaver.

Macromedia Dreamweaver MX is a professional HTML editor used for designing web sites. It is a great tool for creating and managing html web pages. The visual editing features in Dreamweaver lets you to quickly create pages without writing a line of code.

Click here to download .PSD & HTML source files.

Open Macromedia Dreamweaver MX*

1. Choose File > Open , Open index.html file.

The layout is displayed on the screen in the form of images together in a table.

2. Delete the comment icons incase they are displayed at the top and bottom of the layout table.

Editing the home page i.e. index.html

3. Choose Modify > Page Properties

4. Specify the left margin, top margin along with the margin height and width as 0 value.Specify Title to the page as Index.

Steps to make the index.html file i.e Homepage 1024 x 768 resolution compatible.

5. The first step is to incorporate the background color or image in Page Properties.

Background color is applied in the layout which has flat colors at the edges of the layout.

But the current layout has effects so in such case background image is incorporated.

6. Open index.psd in Adobe Photoshop 7.0

Background image can be taken either vertically or horizontally depending on the layout.

In this layout we will take a vertical image from the right side of the layout.

As the layout has client images on the left, so the layout would be aligned left in 1024 resolution therefore the effect on the right side will cover the layout background with the help of background image.

7. Select Rectangular Marquee Tool.

Create a vetical Rectangular selection of width 2 pixels and height that of the layout i.e 434 pixels at the right edge.

8. To copy the image in a new file in one layer.

Select the background layer in the layers window in Photoshop 7.0.

Press Ctrl + Shift + C ( to copy all the above images in one command )

Press Ctrl + N ( to create a new file of the same size as the selection )

Press Ctrl + Shift + V ( to paste the copied image in the new file created )