ホームページテンプレートダウンロード

質問

ホームページのテンプレートをダウンロードしました。

内容は下記のとおりです。
しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。
他にimageフォルダが付いていてgifが４つあったのですが
これをどこかに貼り付けなければならないのでしょうか？
教えてください。よろしくお願いします。

@charset "UTF-8";

/* ---------------------
* FONTSIZE MODEL *
* ---------------------
* 63% -> 10pxに相当
* 70% -> 11pxに相当
* 75% -> 12pxに相当
* 82% -> 13pxに相当
* 88% -> 14pxに相当
* 94% -> 15pxに相当
* 100% -> 16pxに相当
* 107% -> 17pxに相当
* 113% -> 18pxに相当
* 119% -> 19pxに相当
* 125% -> 20pxに相当
* --------------------- */

/* ========BASIC======== */
* {
font-family:Verdana, Helvetica, sans-serif;
color:#333;
}

body {
margin:0;
padding:0;
line-height:1.6;
letter-spacing:1px;
background:#EFEFEA;
}

br {
letter-spacing:normal;
}

a {
color:#333;
text-decoration:none;
}

a:hover {
color:#DF8713;
text-decoration:none;
}

img {
border:0;
}

h1,h2,h3,h4,h5,h6 {
margin:0;
}

/* ========TEMPLATE LAYOUT======== */
div#top {
width:778px;
margin:0 auto;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background:#fff;
}

div#header {
width:774px;
margin:0 2px;
background:#4f3333;
}

div#menu {
width:774px;
margin:0 2px;
background:#ccc;
}

div#contents {
clear:both;
width:774px;
margin:0 2px;
padding:10px 0;
}

div#main {
float:left;
width:554px;
padding:0 5px;
}

div#sub {
float:right;
width:200px;
padding-right:5px;
}

div#footer {
clear:both;
width:774px;
margin:0 2px;
}

/* 回り込み解除 */
div#contents:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/* ========HEADER CUSTOMIZE======== */
div#header h1 {
margin:0;
padding:0 10px;
font-size:150%;/* 24px相当 */
color:#fff;
line-height:80px;
}

div#header h1 a {
color:#fff;
}

div#header h1 a:hover {
color:#DF8713;
}

/* ========MENU CUSTOMIZE======== */
div#menu ul {
margin:0;
padding:0;
}

div#menu li {
float:left;
font-size:82%;/* 13px相当 */
color:#333;
list-style-type:none;
}

div#menu li a{
display:block;
margin-right:1px;
padding:0 20px;
color:#fff;
line-height:2.5;
background:#9C6565;
}

div#menu li a:hover{
color:#fff;
background:#DF8713;
}

/* 回り込み解除 */
div#menu ul:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/* ========MAIN CONTENTS CUSTOMIZE======== */
div#main a {
color:#DF8713;
}

div#main a:hover {
border:0;
color:#DF8713;
border-bottom:1px solid #DF8713;
}

div#main h2 {
margin-bottom:3px;
padding:2px 2px 2px 5px;
font-size:94%;/* 15px相当 */
font-weight:bold;
border-left:5px solid #4E3333;
background:url(images/bg_h2.gif);
}

div#main h3 {
margin-bottom:2px;
padding-left:25px;
font-size:82%;/* 13px相当 */
background:url("images/bg_h3.gif") 0 50% no-repeat;
}

div#main p{
margin:0 0 1em 0;
font-size:82%;/* 13px相当 */
}

/* ========SUB CONTENTS CUSTOMIZE======== */
div#sub .section {
margin-bottom:10px;
padding:10px;
background:#DEDDD0;
}

div#sub h2 {
padding-bottom:5px;
text-align:center;
font-size:94%;/* 15px相当 */
font-weight:bold;
color:#fff;
border-bottom:1px solid #93847B;
}

div#sub ul {
margin:0;
padding:5px 0 0 10px;
}

div#sub li {
margin:0;
padding-left:12px;
font-size:82%;/* 13px相当 */
background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat;
list-style:none;
}

/* ========TOTOP CUSTOMIZE========= */
div#totop {
padding:10px;
text-align:right;
font-size:82%;/* 13px相当 */
}

div#totop a{
padding:0 0 0 12px;
background:url("images/bg_totop.gif") 0 60% no-repeat;
}

/* ========FOOTER CUSTOMIZE======== */
address{
padding:20px 0;
text-align:center;
font-style:normal;
font-size:75%;/* 12px相当 */
color:#333;
border-top:1px solid #ccc;
}

回答No.1

4649panda

これはCSSファイルですよね。
この記述の中に
"background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat;"
こんな感じのものが幾つかあります。
これは、このCSSファイルと同じ階層内の、"images"フォルダの中にある"bg_list.gif"を参照しています。
なので、このCSSファイルと同じ階層にimageフォルダごとアップしてやれば、当初のデザイン通りになると思います。
画像は、imageフォルダから出すのではなく、imageフォルダに入れたままアップします。

htmlファイルの方にもこのような"相対パス"画使ってあるのでしたら、そちらも注意して見るといいかも知れません。