Adobe Dreamweaverの画面構成
加工した写真画像やロゴを組み合わせて、 ECサイトの詳細画面をつくってみましょう HTMLファイルを作る
文章ファイルをコンピューターが意味を理解できるようにしたものがHTMLです。見出しや箇条書きにあ たる部分、強調したい部分などをタグで囲っていきます。このタグをつけていく作業をマークアップとい います。写真など、意味のある画像もタグで入れていきます。画面外の要素としては<title>タグなども重 要です。そのページに何が書かれているのか、端的に表した題名を書いておきます。
ドキュメントウィンドウ
プロパティパネル
コードビュー デザインビュー
新規ドキュメント作成
ファイルメニュー ＞新規 ＞空白ページ
レイアウトは＜なし＞、ドキュメントタイプはHTML5を選択し、作成をクリックします
コードビューに上記のように書かれていれば、HTMLを記述する準備が出来た状態です
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>無題ドキュメント</title>
6 </head>
7 8 <body>
9 </body>
10 </html>
11
それぞれの部品を入れる枠組みを作ります。上図の赤い枠とオレンジの枠です あわせて、このページ自体の題名を<title>にいれておきましょう。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>オーガニックコットンTシャツ | うみそら雑貨店</title>
6 </head>
7 <body>
8 <header>
9
10 </header>
11
12 <div class="mod-multiColumn">
13 <div class="colA">
14 a 15 </div>
16 <div class="colB">
17 b 18 </div>
19 </div>
20 <footer>
21
22 </footer>
23 </body>
24 </html>
25
Wordやメモ帳などから原稿をコピーし、
デザインビューで、目印に書いておいた「b」を選択し、テキストをペースとします
コードビュー側では、このように<p>タグがついた状態になっています。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>オーガニックコットンTシャツ | うみそら雑貨店</title>
6 </head>
7 <body>
8 <header>
9
10 </header>
11
12 <div class="mod-multiColumn">
13 <div class="colA">
14 a 15 </div>
16 <div class="colB">
17 <p>地球と肌に優しい、オーガニックコットンを使ったTシャツです。柔らかい着心地を ホワイト・チョコレート・モスグリーンの3色からお選びください。日本サイズでXSとSの2サイズ をご用意しました。<br>
18 海外の有機農家の手で、大切に育てられた原綿を輸入し、日本国内で環境にやさしい方 法で紡いでいます。オーガニックコットンの持つナチュラル感に合わせて、少し細身でシルエット もスタイリッシュに仕上げてあります。</p>
19 <p>S（肩幅：約42cm、着丈：約64cm）<br>
20 XS（肩幅：約36cm、着丈：約61cm）<br>
21 製品は米国サイズを基準に作られておりますので、XS・Sサイズのみで販売いたしてお ります。（普段よりワンサイズ小さめをおすすめいたします）</p>
22 <p>※製品の性質上、お洗濯時に若干の縮みや色落ちが発生します。</p>
23 <p>販売価格 6,700円(税込)</p>
24 </div>
25 </div>
26 <footer>
27
28 </footer>
29 </body>
30 </html>
31
MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1
箇条書きとして表現したい場所を選択し、プロパティパネルからリストを選択
同様に金額の部分を選択して、強調を選択します
HTMLファイルの保存
ここで一度保存します。フォルダを作って、その中に保存しておきましょう。
画像の挿入
前に作った商品写真やロゴなどの画像を同じディレクトリに移動します
その画像をDreamweaverのデザインビューの、「a」と書いてある部分を目標にドラッグアンドドロップ します
同様にロゴ画像もドラッグアンドドロップします。目印に入れておいた「a」や「b」などは削除します
ここまでで、このようなコードになりました。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>オーガニックコットンTシャツ | うみそら雑貨店</title>
6 </head>
7 <body>
8 <header>
9 <img src="logo.png" width="320" height="98">
10 </header>
11
12 <div class="mod-multiColumn">
13 <div class="colA">
14 <img src="img_p1.jpg" width="320" height="200"></div>
15 <div class="colB">
16 <p>地球と肌に優しい、オーガニックコットンを使ったTシャツです。柔らかい着心地を ホワイト・チョコレート・モスグリーンの3色からお選びください。日本サイズでXSとSの2サイズ をご用意しました。<br>
17 海外の有機農家の手で、大切に育てられた原綿を輸入し、日本国内で環境にやさしい方法 で紡いでいます。オーガニックコットンの持つナチュラル感に合わせて、少し細身でシルエットも スタイリッシュに仕上げてあります。</p>
18 <ul>
19 <li>S（肩幅：約42cm、着丈：約64cm）</li>
20 <li>XS（肩幅：約36cm、着丈：約61cm）</li>
21 </ul>
22 <p>製品は米国サイズを基準に作られておりますので、XS・Sサイズのみで販売いたして おります。（普段よりワンサイズ小さめをおすすめいたします）</p>
23 <p>※製品の性質上、お洗濯時に若干の縮みや色落ちが発生します。</p>
24 <p><strong>販売価格 6,700円(税込)</strong></p>
25 </div>
26 </div>
27 <footer>
28
29 </footer>
30 </body>
31 </html>
32
フォーム要素の追加
WebページからWebサーバに向けて「白色を2枚買いたい」などの情報を伝えることで、ショッピング カートなどのシステムはなりなっています
挿入メニュー ＞フォーム ＞選択（リスト/メニュー）
ダイアログが表示されたら、それぞれ「OK」や「はい」をクリックすると、フォーム部品が挿入されます
デザインビューで選択し、プロパティパネルの「リスト値」をクリック
ショッピングカートに入れるボタンの作成
挿入メニュー ＞フォーム ＞ボタン
「送信」ボタンが追加されます
ボタンを選択し、プロパティパネルの値に「ショッピングカートに入れる」と入力します ここまでで、このようなコードになりました。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>オーガニックコットンTシャツ | うみそら雑貨店</title>
6 </head>
7 <body>
8 <header>
9 <img src="logo.png" width="320" height="98">
10 </header>
11
12 <div class="mod-multiColumn">
13 <div class="colA">
14 <img src="img_p1.jpg" width="320" height="200"></div>
15 <div class="colB">
16 <p>地球と肌に優しい、オーガニックコットンを使ったTシャツです。柔らかい着心地を ホワイト・チョコレート・モスグリーンの3色からお選びください。日本サイズでXSとSの2サイズ をご用意しました。<br>
17 海外の有機農家の手で、大切に育てられた原綿を輸入し、日本国内で環境にやさしい方法 で紡いでいます。オーガニックコットンの持つナチュラル感に合わせて、少し細身でシルエットも スタイリッシュに仕上げてあります。</p>
18 <ul>
19 <li>S（肩幅：約42cm、着丈：約64cm）</li>
20 <li>XS（肩幅：約36cm、着丈：約61cm）</li>
21 </ul>
22 <p>製品は米国サイズを基準に作られておりますので、XS・Sサイズのみで販売いたして おります。（普段よりワンサイズ小さめをおすすめいたします）</p>
23 <p>※製品の性質上、お洗濯時に若干の縮みや色落ちが発生します。</p>
24 <p><strong>販売価格 6,700円(税込)</strong></p>
25 <form method="post" action="">
26 <select>
27 <option value="" selected="selected">色を選択してください</option>
28 <option value="ホワイト">ホワイト</option>
29 <option value="ブラウン">ブラウン</option>
30 <option value="グリーン">グリーン</option>
31 </select>
32 <input type="submit" value="ショッピングカートに入れる">
33 </form>
34 </div>
35 </div>
36 <footer>
37
38 </footer>
39 </body>
40 </html>
41
リンクの設定
画像をクリックしたら拡大出来るように、画像自体にリンクを設定します
画像を選択して、プロパティパネルのリンクからファイルの参照をクリック
ここでは、画像ファイルを指定します
最後にページの一番下にコピーライトの1行を追加します
ここまででHTMLファイルが出来上がりました 1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>オーガニックコットンTシャツ | うみそら雑貨店</title>
6 </head>
7 <body>
8 <header>
9 <img src="logo.png" alt="うみそら雑貨店">
10 </header>
11 <h1>オーガニックコットンTシャツ</h1>
12 <div class="multiColumn">
13 <div class="colA">
14 <a href="img_p1.jpg"><img src="img_p1.jpg" width="320" ></a>
15 </div>
16 <div class="colB">
17 <p>地球と肌に優しい、オーガニックコットンを使ったTシャツです。柔らかい着心地を ホワイト・チョコレート・モスグリーンの3色からお選びください。日本サイズでXSとSの2サイズ をご用意しました。<br>
18 海外の有機農家の手で、大切に育てられた原綿を輸入し、日本国内で環境にやさしい方 法で紡いでいます。オーガニックコットンの持つナチュラル感に合わせて、少し細身でシルエット もスタイリッシュに仕上げてあります。</p>
19 <ul>
20 <li>S（肩幅：約42cm、着丈：約64cm）</li>
21 <li>XS（肩幅：約36cm、着丈：約61cm）</li>
22 </ul>
23 <p>製品は米国サイズを基準に作られておりますので、XS・Sサイズのみで販売いたして おります。（普段よりワンサイズ小さめをおすすめいたします）</p>
24 <p>※製品の性質上、お洗濯時に若干の縮みや色落ちが発生します。</p>
25 <p><strong>販売価格 6,700円(税込)</strong></p>
26 <form method="post" action="/">
27 <select>
28 <option value="" selected="selected">色を選択してください</option>
29 <option value="ホワイト">ホワイト</option>
30 <option value="ブラウン">ブラウン</option>
31 <option value="グリーン">グリーン</option>
32 </select>
33 <input type="submit" value="ショッピングカートに入れる">
34 </form>
35 </div>
36 </div>
37 <footer>
38 © 2013 うみそら雑貨店 39 </footer>
40 </body>
41 </html>
42
MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ企画:サンプル:step1:sample.html: 1/1 HTMLファイルである
見えないが重要なhead領域
Webブラウザに表示されるbody領域