15. Creating New Pages



To complete your web site you need to create new pages from Photoshop/ImageReady if you modify the layout or directly from Dreamweaver if you indent to modify only text or to replace images but not to modify the web page's structure.

Open the file index.html from template/html/html_version.

Not let's save it with another name. Go to the main menu File->Save As...

Save the new file where you want it and give it the desired name.

Now let's edit modify our layout trying to create a different one. For example we want to replace the content area with a block of text:

To do that we have to delete all the cell in that area and replace them with new ones. Go to Layout mode to exactly see the cells:

Because we cleverly designed our slices the entire content area is somehow "independent" from the other areas because it forms a rectangular area an then if we delete all the cells in this area the html table will not be affected. Go an click place your mouse over the border of each cell until it turns red then click on it to select the cell (you have to select the cell not its content to delete it):

If you have correctly selected the cell it will turn its border in a solid blue line:

Now press Delete to erase it and continue with the other slices in the content area:

Finally the layout will look like this:

Now you can redefine new cells. Let's create 2 cell like 2 columns. To do that you have to use the Draw Layout Cell tool available only in the Layout mode:

Select the Draw Layout Cell tool and place your mouse inside the empty content area and drag a new rectangular area (it's like defining new slices in Photoshop).

The new defined cell will automatically display the background color because it doesn't have its own background color. Drag a second cell to fill the remaining empty space. Now click select one of the new cells and set a new background color.

Pick the desired color for this cell and then for the other one. Now you can continue adding content to the new cells.

This was an example of how important is to cleverly design your slices in Photoshop.