Understanding Templates and Working with Them
What is a Template?
Templates are web designs for your website. They define the look-and-feel of your
site. Our templates usually consist of the design for the home (first/splash) page and
one internal page. If you want to create several internal pages, all you need to do is
save the internal page with another file name and make necessary changes in it. For
instance, you can change the header of the page to reflect the page you want
created.
Contents of a Template
The template folder consists of:
1. PSD folder, which contains the design layout in Photoshop (PSD) format.
There are usually two PSD files - one for the home page and one for the
internal page.
2. Images folder, which contains the images that have been used in the HTML
files.
3. Two HTML files, which reflect the layout of the site. Generally, these HTML
files are created using tools, such as Dreamweaver or Frontpage.
Working with Templates
Opening the Design Layout
Open the PSD file that is accompanied with the template in Adobe Photoshop 5.5 or
above. You will see the design layout based on which you want to create the website.
Press the F7 key. You will see a tab with many layers. A layer is a placeholder for
any type of image or text. Each layer is named according to its content. Adobe
Photoshop is used to create the design structure for the website. Based upon this
structure, the images are created and then imported into the HTML file that is
displayed in the browser.
Changing the Design Layout
Locate the layer that you want to change. To do this, select Move Tool ( ). Right-
click on the object in the design and select the layer. This will highlight the layer in
the layer panel. If it’s a textual layer then double-click the layer to make any
changes to the text. Alternatively, you can also replace any existing image in the
design with the image preferred.
For instance, you want to change the text Your URL to your company name. To do
so, select the move tool, right-click on the layer, select and then double-click the
layer. This will open a popup box with an area to type the text. Replace the current
text with what you want and click OK. If you want to place the text to a different
location, click the object and then start dragging it to the place where you want and
leave the object. This should move the object to its new place.
Similarly, if you want to change an image, select the layer containing the image,
import the new image that you want to replace with and place it in where you feel it
will fit. Add any effects to it if you want and then save the PSD file. You can add
effects by selecting the layer, then right-click, select the Effects option. This will
display a dialog box with a drop-down menu. Select the appropriate effect. Click OK.
This will add the desired effect to the layer object.
