gradient
 
gradient
 
 
 
 
title

18. Creating Content Pages

title
sign
 

 

To create a full web site starting from a template you have to create new pages. Let's say that you have modified the templates layout according to your needs and now you have an index page ready. Almost every time the content pages keep some design elements from the index file but not all the elements...so you have to adapt the layout for the content pages. This means that you have to re-slice and re-export for the web the new layout. To make your work less difficult you have to re-design the main layout so that the resulting content page has as many elements in common with the main layout as possible. Doing this you will have to redo only few slices not all the slices. Let's take a look at our index.psd file.

Open the index.psd file located in template/psd (Note: if the opened file doesn't have the slices visible just press Ctrl+H to unhide them).

As you can see below we have marked the area for our content pages. Only this area will be modified to create content pages. So the rest of the layout will remain the same and we don't need to modify the slices. It is very important that you slice the layout from the beginning in a way that will permit you to create content pages / subpages more easily. As you can see the area we designated to be modified in the content pages in somehow independent from the rest of the layout. It doesn't "share" slices with rest of the layout. This means that if we delete all the user slices in the marked area we'll have only one autoslice and this is perfect because we can start to recreate slices without modifying the rest of the layout.

Let's delete all the slices in the marked area. To do that simply go to Tools and choose Slice Select Tool:

Now click on the every slice inside the area marked above and press Delete from keyboard. You'll notice that every time you delete a user slice it is replaced by an autoslice and the autoslices are then merged into bigger autoslices until you we'll have only one autoslice covering the entire marked area.

And after deleting all the slices the layout will look like this:

As you can see the slices are renumbered but this doesn't influence their names.

Now that we have deleted the slices in the content area let's hide the layers of the index file content. Find the layers in the Layers palette or Ctrl+click on every element to select it and then hide it.

Now let's create a new content. Open the only .jpg image from template/tutorial_images and drag the image on the layout. (See our previous tutorials for more help). Create a block of html text a spacer line and a headline text so that the layout looks like this (You can create the layout as you like. This is just an example):

Now let's create slice for the content we have added using the Slice Tool ("K"):

Now you have to save this new .psd file with a new name to use it for the rest of your content pages. Do not save over the original index.psd. Give new names for the new content slices and open the file in ImageReady. If you don't have rollovers to create just hide the layer with the block of html text and save the layout for web. The new generated html file will have by default the name of the .psd file. You can give it any name. For example you may name it "services.html" if this page is the Services page. When you'll save the file ImageReady will ask you if you want to overwrite some of the image files. These are the common files both for index.html and for content pages. You may overwrite them or not, doesn't matter, because they are identical as you have not modified the slices that generate them.

Now you know what you have to do if you want to reconfigure your slices and create new modified pages.