メニュー作成 ソフトか手打ち

質問

このサイトのこんなかんじのメニュー表を作りたいのですが、Ｄｒｅａｍｗｅａｖｅｒのテーブルレイアウトでするか手打ちでやるかどっちのほうが良いでしょうか？http://www.kinoshita1894.com/menu.html

今の僕のＤｒｅａｍｗｅａｖｅｒの状態だと右側のＤｒｅａｍｗｅａｖｅｒプレビューがひどいです。ブラウザ確認では正常ですが。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

やりやすい方でいいです。

Dreamweaverのコードビューで手打ちしてもいいですし、
別のテキストエディタで手打ちしてもいいです。

回答No.3

korokokokoro

>、Ｄｒｅａｍｗｅａｖｅｒのテーブルレイアウトでするか
今時DW使おうがすべて手打ちしようがテーブルで構成しない。
ナビゲーションはリストを使って作ってスタイルシートで整形する。

回答No.2

ORUKA1951

その状態でしたら、手書のほうが良いかも・・

そもそも、HTMLはデザインのためのツールではありません。あくまで、文書を読み解き内容を理解して、要素に分解して要素を示す最適なタグでマークアップしていくマークアップ言語--メタ言語です。用意されているタグで足りなければ、classやidをつけて文書構造がわかるようにしなければなりません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書7.5.4要素のグループ化: DIV要素とSPAN要素 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
★この部分がわかりにくかったので、『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』

　スタイルシートは、その文書構造を元にデザインしていきますから、やはり読解力が必要です。たとえば、本文中のセクションを一文字ずつ字下げしたけりゃ
div.section div.section{margin-left:1em;}
ですし、本文中の挿絵をfloatさせたきゃ
div.section div.figure{width:240px;float:right;}
です。こんなセレクタなんてオーサリングツールでは不可能です。

　そしてなによりもプレゼンテーションと文書構造が分離していますから、後でデザインをまったく変えたくなったときでも、HTMLを触る必要はありません。HTMLもスタイルシートもとっても簡単でわかりやすくなります。

　また、プレビューなんて今はひとつのブラウザで確認するわけには行きませんから、様々なブラウザでプレビューしようとすると、やはり優れたテキストエディタに頼ることになります。

　と言う理由で、私はDreamWeberをHTMLの記述やスタイルシートのセレクタの記述に使うことは、今はまったくありません。せいぜいタグの閉じ忘れやサイト管理とか。
　だって、そのほうが簡単で速いですし、後で誰が見てもわかるソースがかけますし・・・

　オーサリングツールに限界を感じたら手書に移行しても良いのでは？
★HPビルダー16　リストの増やし方 - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7554458.html )
　で示したような、ごく簡単なHTMLやCSSはツールでは無理ですよね。

★なお、この様な場面でtableレイアウトはありえません。
→「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」
→「ページレイアウトの目的で表を用いる。 (http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」
　きちんと、示されたサイトのようにリストでマークアップしましょう。dlでもolでもulでも構いません。
<div class="nav">
　　<ul>
　　　　<li><a href="画像">なんたらかんたら</a></li>
でも良いでしょう。その上でスタイルシートで、そのサイトのようにデザインすれば良いです。