Adobe Dreamweaver について

質問

Adobe DreamweaverでHPを作っています。

初心者です。

ホームページ上で「説明書」というボタンを押すと、説明書のPDFに移動するように作ったのですが、Adobeで作って、ブラウザーで確認したときは、そのボタンがきちんとセンターに来ていたのに、実際アップロードされたものを見ると、左寄せになってしまいます。
どのような問題があるのでしょうか。

<div id="click-setumei">
<ul>
<li>
<div align="center"><a href="riyou.pdf">説明書</a></div>
</li>
</ul>
</div>

もう一つ、Dreamweaverで作成、ブラウザーで確認、という手順では見ることの出来た画像が、やはりアップロードした際に赤いバッテン（名前を知りません）で開くことが出来ません。
何が原因で、どうすれば正常にアップされるでしょうか。

<p><img src="image/場所.JPG" width="633" height="193" alt="場所" /></p>

Dreamweaverで作ったものがそのまま反映されないと、素人の私としては、どこをどうメンテナンスすればよいのか見当がつきにくいです。

回答No.1

junktrap · ベストアンサー

こんにちは。
以前に少々かじった程度なので、自信がありませんが……。

・センタリングについて
リストタグのインデントのほうが優先されているのだと思います。
ul、liは使わなくてはならないでしょうか？
見せ方の面で用いていて特にリスト形式でなくてもよいのでしたら、ul・liタグを無くしてしまえば、センタリングが有効になります。
あくまでリスト形式ということであれば、ＣＳＳ（スタイルシート）にて、リスト要素に指定ができます。

下記「CSS」をヘッダ内に記述
※既にヘッダ内にCSSがある場合は宣言の部分は省いて3行目「ul{」から、4行目「}」のみで構いません。
※簡潔さを優先して同一ページ内のリスト形式全てに作用する書き方を用いています。
　（→同ページ内に「センタリングしたくない別のリスト部分」がある場合は記述が変わります）
※これでBODY内のDIV要素による位置指定（align="center"）は不要となります。

<STYLE type="text/css">
<!--
ul{
text-align: center; /* リストを中央寄せ */
list-style-position: inside; /* マーカー位置指定 */
}
-->
</STYLE>

・イメージについて
イメージファイルの名前は「場所.JPG」のとおりでしょうか？
ファイル名が日本語や全角ですと、ローカル環境では表示されてもアップロードした際には反映されませんので、「basho.JPG」のように半角英数のファイル名に直して、再アップすることで解消します。

説明にわかりにくい点がございましたら、補足にてお知らせください。
お役に立てば幸いです。

補足

ありがとうございます！おかげさまで上記2点について解決いたしました。

もう1点、
area内で途中から余白が無くなってしまう原因はお分かりになりますか？
<h2>ご注文はこちらから</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>「補正あり」と「補正なし」があります。</h3>
<h3>お間違えのないようにお願いいたします。</h3>
<ul>
<div id="yoyaku">
<li><a href="http://・・・"><strong>補正なし<br />
注文</strong>はこちらから</a></li>
<div id="yoyaku2">
<li><a href="http://・・・"><strong>補正あり<br />
注文</strong>はこちらから</a></li>
</div>
</div>
</ul>

<br class="clearfloat" />

<h3> 注意事項</h3>

この注意事項からareaの余白が無くなり、左いっぱいに文字がよってしまいます。
お手数をおかけいたしますが、アドバイスをいただけると嬉しいです。