- ベストアンサー
dreamweaverの画像分割について
下記のようなものをタグうちではなくなるべくdreamweaverの ツールを使って作りたいです。 私が作った方法では、テーブルを挿入して 左をＣＳＳで定義してやったのですが、 今度はそれをやると文章が任意の場所に打てません。 それと、外枠の茶色の部分ですが、他のＨＰをみて、 こういう風にしたかったのですがやり方が良くわかりません。 曖昧な質問ですが、宜しくお願いします。 それと、dreamweaverのｃｓ6はレイヤー機能が見当たりません。 無くなったのでしょうか？
- RIOT1970
- お礼率44% (87/195)
- ホームページ作成ソフト
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
せっかく高機能なDreamweaverを持っているのに、あまりにもったいない。 しかもHTMLの知識があるのに。 HTMLでデザインを考えなくて良いので、以前に比較して、ものすごく簡単になっています。 あとはスタイルシートを覚えることと、Dreamweverの使い方を理解すること。Dreamweverは所詮オーサリングツールですから、あなたの煩雑な作業を手助けする以上のことはできません。 HTMLの基本は、文書をそれを構成する要素に分解して、それぞれの要素を示すタグでマークアップすることです。それによって、『どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、・・・( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』が叶うのです。またそれを叶えるためにHTMLでページを作成するのです。 最初にすべきは、デザインは無視してHTMLをきちんと書くことです。 その後、そのHTMLをスタイルシートを使って、好きなようにデザインしていくのです。文書とデザイン(プレゼンテーション--表現)が分離していますから、HTMLの改定も、デザインの変更も自由に出来るようになるのです。 ★あなたが作成された画像を添付図のように分解して画像を用意してください。 (あなたのされたいこととは齟齬があると思いますが、それは後回しにしてとにかく) HTMLはすでにお分かりのようですから、まず、HTMLをサンプルのように書きます。 ★スタイルシートとの関係がわかるように、分けてあります。HTMLだけで確認しておきます。そのあとで、後述のスタイルシートを <!-- ここにコピーする。 --> の間に入れます。 ★HTMLはShift_JIS、HTML4.01strictです。 ※タブは＿に置換してあるので戻すこと ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) のDATA(右上)を使ってチェックする。 ★スタイルシートを書く(<!--と-->の間に入れる) スタイルシートは ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★たったこれだけで、スマホから幅広ディプレイに対応しています。ウィンドウ幅を縮めてみたりする <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル0</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="./img/title.gif" width="480" height="80" alt="タイトル"></h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"><!-- 章(section) --> ＿＿<h2>見出し</h2> ＿＿<div class="section"> ＿＿＿<h3>本文見出し</h3> ＿＿＿<p>ここに自由な長さの文章を入れてみる</p> ＿＿</div> ＿＿<div class="aside"><!-- 本文と関係ない(aside)記事 --> ＿＿＿<h3>参考サイト</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/l1"><img src="./img/link1.gif" width="240" height="80" alt="Link1へ"></a></li> ＿＿＿＿<li><a href="/l2"><img src="./img/link2.gif" width="240" height="80" alt="Link2へ"></a></li> ＿＿＿＿<li><a href="/l3"><img src="./img/link3.gif" width="240" height="80" alt="Link3へ"></a></li> ＿＿＿＿<li><a href="/l4"><img src="./img/link4.gif" width="240" height="80" alt="Link4へ"></a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [スタイルシート] <!-- ここにコピーする。 --> ↓に変更して表示させて見る。 <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,p{margin:0;line-height:1.8em;} h1{text-align:center;} div.header,div.section,div.footer{width:80%;margin:0 auto;min-width:480px;max-width:800px;} div.section{position:relative;min-height:400px;} div.section h2, div.section p, div.section div.section{margin:0 250px 0 10px;} div.section div.aside{position:absolute;right:0;top:0;} div.section div.aside h3{display:none;} div.section div.aside ol, div.section div.aside ol li{ margin:0;padding:0;list-style:none;display:block;width:240px;height:80px; } /* 色とか背景とか */ body{background:url(./img/body.png);} div.header{background:url(./img/header.png) gray;} div.section{background:url(./img/section.png);} div.section div.section{background-image:none;} div.section div.aside{background-color:white;height:100%;} div.footer{background:url()} -->
