• ベストアンサー

CSSデザインでのフレーム的な使い方

CSSでのページデザインにおきまして、例えば右にリンク・ナビゲーションバー、左にメインページを配置した場合(divで左右に分割)、リンクをクリックしたとき該当するページをメインページに表示させるにはどのようにするのかお教えください。また参考CSSでも結構です。ご存知の方よろしくお願いいたします。 当方はCS5を利用しています。(←ほとんど機能を理解していません。)

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

まずは、制作方法、HTML,CSSを軽く勉強し、 DWの操作方法も覚えた方が良いでしょう。 折角のDWの価値が無くなりますよ・・・ ----------------------- 初心者が勉強しないで、手っ取り早く作るには、 配布のテンプレートを使うか、 起動 → 新規作成 → 「詳細情報」をクリック ページタイプ: HTML レイアウト: 「2列を固定、右にサイドバー、(その他お好みで)」 ドキュメントタイプ: お好みで選択。 開くと、ページ内に説明が直接書いてあるので、 その説明箇所を見ながら、その文章自体を編集。 ----------------------- または、 以下のようなソースを「コード画面」で、変更・修正しながら埋めていく。 例えば、HTML4.01Transitionalなら(他でもOKですが) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <!-- title,meta,link等は省略しました。 --> <style type="text/css"><!-- body,h1,h2,ul,li{ margin:0; padding:0;} #wrapper{width:600px; margin:0 auto; background:#EEE;} #header,#footer{ height:60px; background:yellow;} #nav{ float:left; width:200px; height:400px; background:lime; list-style:none;} #main{ float:left; width:400px;} #footer{ clear:left;} --></style> </head> <body> <div id="wrapper"> <div id="header"><h1>ヘッダー</h1></div> <div id="main"><h2>メイン</h2><p>内容</p></div> <ul id="nav"><li><a>ナビ</a></li><li><a>リンク</a></li></ul> <div id="footer">フッター</div> </div> </body> </html> まずは、.htmlで保存して、ファイルをクリックしてローカルで確認・表示。 (トップは、index.html) リンクは、<a href="別名.html">別ページへ</a> (この辺は、サイト登録とDWのツールを覚えれば簡単に出来ますが) そのページを複製し、各「内容」の部分だけページ毎に変更、別名.htmlで保存。 あとは、テキスト追加し、HTMLでマークアップ,CSSでデザイン。 その他、詳しくは、 ウェブサイトの作り方やHTML,CSSなどの参考書や解説サイトなどで一回勉強した方が良いでしょう・・・ 制作方法は様々ありますから。

tamagrnd2
質問者

お礼

早速ご回答いただきありがとうございます。書籍は色々購入していますが、一番知りたいことが書いていません。もっと熟読すればどこかにヒントがあるのでしょうがそこまでいっていないようです。いつも思うのですが、何で簡易なソフトで作成したものとDWで作成したHPに違いを感じるんでしょうか?ショボイHPなんか作ったらゴミですので、そうならないようがんばります。 ps.何とかスパーリファレンスと書いてある書籍はスーパーではないことがわかりました。結局、毎日コミュニケーション社のHTML+CSSのちょっとした記事が役に立ちました。  お世話になりました。

関連するQ&A