General editing a template, can use some help..

for 10 years now i didn't do anything related to website building.
Decided to build a website last week and was shocked that i didn't understand how to edit a template
Downloaded the template on this server

it is the template for a webshop ( hardware store )
https://freewebsitetemplates.com/preview/hardwarestore/

I work with dreamweaver MX, I have the complete version from macromedia studio mx. and i know the program features basic.

This is the problem i encountered when i opened index.htm in dreamweaver,
I cant find, confused how i edit certain element of the template.
Taking a screen shot of the index.htm

1) There are the hyper links , i dont understand how they get lined out. is it related to a css style?
can somebody explain it to me, or a link for a tutorial about it

2) there are pics, but i was used to see the whole pic when i build a ( simple) website
Its confusing me. I don't understand how this work...

Can it be that my dreamweaver MX is to old for that kind of working with templates?

excuse my English, i don't communicate often in English )

 

Thanks you for replying Mimoun

Okay then i can skip figuring out how to edit it in design mode.
And concentrate on the code instead.

 

when the website template is shown
Top of page in the toolbar (File Edit View History etc)
click on View, then Page Source, it will display the source code of the
template

In the source code,
line 13
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
if you click on "style.css" it should take you to the style sheet

I use Alleycode HTML Editor (free edition)
http://alleycode.com/
To load the template in Alleycode after downloading it executing it
Go to file (in top toolbar) then open. You can then locate it and click
on the template name and it will open in the Editor. If you go to Help
it has a tutorial on how to use the Editor.

line 181
<h1>Flat Monitor</h1>

line 182
<h2>Model 123-E7</h2>

Look at the template under our store
that is where the line 181 and 182 display

line 186
<img src="images/item_new.gif" width="242" height="180" alt="New Item Name" />
new flat monitor

Look at the template under promotion is where the picture flat monitor is

You can change the code to what you want
line 186
<img src="images/item_new.gif"
the image is in the "images folder" and the name of the image is "item_new
and it is a gif image (as opposed to a jpg image) make sure that the
extension (gif or jpg) is the same as labeled in the picture (either small
or caps) or it won't show up when you view on the internet, but will show
up on your desktop.
-
hope this helps
falcon

 

When we develop a custom Website using free templates editing need to change it. Most of us face problem when try to edit a template. "Template editor" is a good one that can help us in this way. Anyone can get this for free. It,s easy to use also.