ドリームウィーバーについての質問です

もしかしたら、すごく簡単なことなのかもしれませんが、ドリームウィーバーでわからないことがあります。以下のサイトの左上にある、ナビゲーションにある区切り線（点線）はどのように作るのでしょうか？
http://www.olivierpasqual.ch/
自分のホームページ上で見た目的に同じようなものをつくりたくて、区切り点線なしのナビゲーションを、テーブル機能をつかって作りました。ドリームウィーバーをつかってどのように横点線をだすのか、ご存知のかた教えていただけますか？よろしくお願いします。

No.3 回答者： rainbowsix 回答日時： 2007/07/26 12:47

サンプルサイトのようなナビゲーションとして使用するのであれば、<ul>要素を使用することをおすすめします。

<div id="menu">
<ul>
<li><a href="#">list1</a></li>
<li><a href="#">list2</a></li>
<li><a href="#">list3</a></li>
<li><a href="#">list4</a></li>
</ul>
</div>
などとして、
#menu ul li a{
display:block;
width:150px;
border-bottom:1px dotted #000;
}
などと指定してあげてはいかがでしょうか。

ちなみにこの点線、IEで見ると「2pxの点→2pxの空白」の連続となっていることと思います。これ、実はIEのバグでして、本当は「1pxの点→1pxの空白」となるのが正しいのです。他のブラウザではそのように表示されます。私見ですが、1pxのほうがかっこいいです。
コレをIEでも実現しようと思ったら、白1pxと黒1pxが隣り合った、2pxの背景画像を用意して、CSSで「backgrond-repeat:repeat-x;」などとしてあげると吉です。

No.2 回答者： shut0325 回答日時： 2007/07/26 09:07

ＨＰを確認しました。

Ｎｏ.1さんの回答のとおりCSSで製作されています。まずは例に出されたＨＰのソースを見てください。（表示→ソースの表示）　その中の<div class="menu1">～</div>がナビ部分ですが、このクラスの定義はソース上上の方にある、<link rel="StyleSheet" href="style.css" type="text/css"/>で指定されています。

そこでhttp://www.olivierpasqual.ch/style.css　にアクセスするとCSSの中身が見られます。その中の、　div.menu1{～}　が定義部分です。なかにボーダー設定でドットを指定しているのがわかるかと思います。

ＣＳＳを勉強中ということですが、すべての列に<span class="style10">とあるのはスマートではありません。ちゃんとマークアップすると、この部分<td>CV</td>といったようにかなりシンプルに書くことができます。　また<td></td>も必要なくすことも可能かと思います。いろいろな人のソースコードを参照しながらスマートな記述ができるよう頑張ってください。

ちなみに例に出されているＨＰの記述はあまりカッコ良くないので参考程度にされた方が良いかと思います。（タグのほぼ一つ一つにclassを指定している。何でもかんでもdivにマークアップしているなど）

No.1 回答者： meenie 回答日時： 2007/07/25 23:21

DreamWeaverには直接関係のない、単純なCSSかと思われますが。

border-bottom-style:dotted;

で良いと思います。

この回答へのお礼

早速、お答えいただきありがとうございます。ドリームウィーバーを最近はじめたのでHTMLやCSSというものについては現在少しずつ勉強をしています。
現在、製作中のページなのですが、ナビゲーションにPORTFOLIO, CV, CONTACTと項目があります（下にHTMLを貼付けました）。どの部分にお答えいただいた「border-bottom-style:dotted;」を挿入すれば点線が正常に機能するのでしょうか？自分でもいろいろネットで調べておりますが、もしご面倒でなければお答えいただけますでしょうか。よろしくお願い致します。
ーーーー以下がナビゲーションぶぶんのHTMLですーーーーーーーー
<td>&nbsp;</td>
<td><span class="style10">PORTFOLIO </span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><span class="style10">CV</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><span class="style10">CONTACT</span></td>

お礼日時：2007/07/25 23:48