Before we go any further, we
should take a look at how the site is laid out and also take a look at
the code controlling the position of the graphics (including the
identification of graphic file names).
header.jpg (the main
title bar at the top of the page)
778x147
2
left_top_2.gif (red bar at the top of the
left menu)
166x20
3
left_bg2.gif
(horizontal striped background in left hand menu)
Can be any size
4
left_bottom2.gif (red bar at
the bottom of the left menu)
166x20
5
bg9.gif
(large striped page background)
Can be any size
6
body_top2a.gif (red bar at
the top of the main body)
599x20
7
bg_slat.gif
(horizontal striped background in main body)
Can be any size
8
body_bottom2.gif (red bar at
the bottom of themain body)
599x20
Editing Image Links
Changing the path of the links to images from within the code
By now you should have created your own
images/edited our template images and have them sitting in a directory
on your server/the server of your web host.
We are now going to edit the HTML code that binds the page together so
that when the browser looks for the images from within the page it
points to the images on your server rather the ones included with the
template.
While still in advanced mode,
click on the 'edit headers' link from the left hand menu.
Once we have arrived in this section you need to look through
the code and replace the image paths in the code with a path to
your own images on your own server.
We need to locate each image containing tag like the one
pictured above and edit the code to include the path to your
image (as illustrated below).
You may have noticed that the code above includes the full
'http://' path compared with the original code which doesn't.
This is because the images that we need to link to aren't
located on the same server as the actual web document where as
the original images for this template are.
It is also worth noting that the url (link) may be different
depending on where the images are located on your server.
Step 4:2
(fig1.
with original header image)
pagegfx/
(fig2. with altered header image)
In the
following example we have changed the "header.jpg"
The code below shows the original code
The code below has been edited so that it now points to a new
folder hosted at DateTec.com called 'tut_gfx'.
This folder contains an image with the same dimensions as the
original header image and is called 'header.jpg'
Once the code has been altered to point to the image on your
server. apply the changes.
Remember!: The path to your web server must be absolute as
apposed to relative. This means you must include 'http' in the
path as well as 'www' or any other relevant prefix.
Once
you have mastered changing the header image you can then move on
to the rest of the code.
The rest of the images and their paths can be changed in the
same way. It is probably wise to get yourself up to speed with
the HTML authoring language before hand as this will give you a
good grounding from which to start.
The image on the left illustrates what can be achieved in a
short amount of time.
In order for you to be able to
create and edit graphics for your site revamp, you will need a
piece of graphic editing software.
We have provided links to software you may find useful below:
Adobe Photshop CS
Professional level image editor which is the package of choice
for the majority of the design world. This package contains high
end profesionnal photography, print and web design tools but
also carries an industry orientated price tag.
Essentially a cut down and more beginner friendly version of
Photoshop 7. Photoshop Elements still remains a useful image
editor with a largely reduced price tage compared with its
bigger brother.
