Comments
Description
Transcript
ヨーロッパ
ラン ディング ペ ー ジ 課 題【 ペ ー ジ 制 作 】
header
成田発2015年 4月∼6月
ヨーロッパ
セレブツアー
ご予約はこちら
代金は燃油サーチャージ込み
早期申込みで
特別割引
①「lp-site」フォルダを作成し、その中にIllustratorで書き出したimagesフォルダを入れる。
②Dreamweaverを起動して、「サイトの管理」（サイト＞サイトの管理）画面を表示する。
main
149,800円∼399,800円
【サイトの管理】
price
③「新規」をクリックして、サイト名を決めて、ローカルサイトフォルダのアイコンをクリック＞「lp-site」フォルダ
を選択する。
④「サイトの管理」を終了する。今後のページ制作時には、画面右下の［ファイル］パネルで自分のサイト名が表示さ
れているか、チェックしてから作業する。
【画像の配置】（デザインビュー）
price-button
①ファイル＞「新規」で、空白ページ―HTML―なしを選択し、ドキュメントタイプ「HTML5」を選択して、「作成」
２名様から
出発保証
②Ctrl+Sで、ファイル名「index.html」で保存する。
③［分割］表示にして、デザインビュー側で9回Enterキーを押し、9行分の段落を作る。
皆様一緒の
座席をご用意
日本人搭乗員が
ご案内
bodycopy
④１行目にカーソルを置き、挿入＞「イメージ」を実行し、一番上の画像を選択する。代替テキストには、画像の説明
を入力する（例：TSB TOUR）。全体が見えるように、デザインビューの下側の表示倍率を調整する。
⑤同様に、画像を各行に配置する。２箇所のボタンは、priceとnoteの下の行にそれぞれ配置する。
⑥コードビューで、コマンド＞「ソースフォーマットの適用」を実行。コードを綺麗にする。
⑦各画像が行「<p>∼</p>」の中にあることを確認。余分な行（ の行）があれば削除する。
⑧タイトルに「ゆったり巡るヨーロッパセレブツアー - 自分の名前」を入力する。
お 客様の声
【見出しとIDの設定】（コードビュー）
①見出し画像であるmain.pngの「<p>」内にカーソルを置き、画面下のプロパティのフォーマットで「段落」→「見出
し1」に変更する。（表示されていない場合は、ウィンドウ＞「プロパティ」で表示する）
＜フランス・パリ＞
大通りの反対から地下道を通って凱旋門の立つエリアにたどり着きます。まず、そこ
で凱旋門を見上げ、彫刻なども観賞。長い長い階段をあがっていくと、凱旋門の上に
出ます。そこには、素晴らしい眺望が待っていました。東にシャンゼリゼを抜けて
ルーブルが、南にエッフェル塔が、360度見渡せました。感動しました。
＜イギリス・ロンドン＞
トラファルガー広場⇒The Mall⇒バッキンガム宮殿、の流れは、まさに伝統的なロン
ドンを体感できる場所だと思います。オリンピックを見られていた方にとっては、
バッキンガム宮殿前のサークルも印象的な場所です。最寄駅は、Green ParkとVictoria
ですが、Charing Crossから歩いてみるのがお勧めです。
②各画像の行「<p>」または「<h1>」にIDをセットする。pまたはh1内にカーソルを置き、［プロパティ］のIDに左図
の文字をセットする。ボタン画像の行のID名は、「price-button」と「note-button」とする。
voice
＜イタリア・ローマ＞
ローマ観光にはぜったいにはずせないトレビの泉。泉を背にしてコインを投げると、
またここに来られるという言い伝えがあるらしく、皆がコイントスをしています。み
ごとな彫刻は、一見の価値ありです。お勧めは、夜のツアー。ライトアップされた泉
と彫刻は幻想的で、いつまで観ていてもあきません。
note-button
今すぐ ご 旅 行 プ ラ ンと
日程を ご 確 認 く だ さい
ご予約はこちら
©2014 TSB TOUR Co.Ltd. All Rights Reserved.
note
footer
【結果】（数値は異なる）
<body>
<p id="header"><img src="images/header.png" width="xxx" height="xx" alt="○○" /></p>
<h1 id="main"><img src="images/main.png" width="xxx" height="xxx" alt="○○" /></h1>
<p id="price"><img src="images/price.png" width="xxx" height="xxx" alt="○○" /></p>
<p id="price-button"><img src="images/button.png" width="xxx" height="xx" alt="○○" /></p>
<p id="bodycopy"><img src="images/bodycopy.png" width="xxx" height="xx" alt="○○" /></p>
<p id="voice"><img src="images/voice.png" width="xxx" height="xxx" alt="○○" /></p>
<p id="note"><img src="images/note.png" width="xxx" height="xxx" alt="○○" /></p>
<p id="note-button"><img src="images/button.png" width="xxx" height="xx" alt="○○" /></p>
<p id="footer"><img src="images/footer.png" width="xxx" height="xx" alt="○○" /></p>
</body>
-1-
【リンクの設定】（デザインビュー）
【余白のカット】
①ボタン画像を選択し、プロパティのリンクに「http://www.yahoo.co.jp」を入力する。
①現在のページ表示を確認する。地球アイコンでブラウザプレビューを実行する。
<p id="price-button"><a href="http://www.yahoo.co.jp"><img
src="images/body.png" width="xxx" height="xxx" alt="○○" /></a></p>
……
<p id="note-button"><a href="http://www.yahoo.co.jp"><img
src="images/button.png" width="xxx" height="xx" alt="○○" /></a></p>
②地球アイコン＞ブラウザでプレビュー（IExplorerまたはGoogleChrome）を実行して、ブ
ラウザに表示させる。ボタンをクリックして、リンクを確認する。
②CSSスタイルパネルの［新規CSSルール］ボタンをクリックする。
③セレクタータイプ「タグ」、セレクター名「*」（半角）で「OK」。
④カテゴリ「ボックス」のPadding: 0px、Margin: 0pxを設定して「OK」。
⑤［新規CSSルール］＞ セレクタータイプ「タグ」セレクター名「body」（半角）で
「OK」。
⑥カテゴリ「タイプ」Line-height: 1em にして「OK」。
【グループの設定】（コードビュー）
⑦［新規CSSルール］＞ セレクタータイプ「タグ」セレクター名「img」（半角）で
「OK」。
①ページ全体を「ID:container」グループで囲む。bodyの中のすべての行を選択して、挿入
＞「Div」を実行し、idに「container」を入力して「OK」。
⑨次のコードが上部に追加される。
<body>
<div id="container">
……
</div>
</body>
②ボタンを重ねるprice行とprice-button行を選択して「ID:price-group」グループを作成す
る。同様にnote行とnote-button行を「ID:note-group」で囲む。
【結果】
<body>
<div id="container">
<p id="header"><img src="images/header.png" width="xxx" height="xx" ...
<h1 id="main"><img src="images/main.png" width="xxx" height="xxx" …
<div id="price-group">
<p id="price"><img src="images/price.png" width="xxx" height="xxx" …
<p id="price-button"><img src="images/button.png" width="xxx" …
</div>
<p id="bodycopy"><img src="images/bodycopy.png" width="xxx" …
<p id="voice"><img src="images/voice.png" width="xxx" height="xxx" …
<div id="note-group">
<p id="note"><img src="images/note.png" width="xxx" height="xxx" …
<p id="note-button"><img src="images/button.png" width="xxx" …
</div>
<p id="footer"><img src="images/footer.png" width="xxx" height="xx" …
</div>
</body>
⑧カテゴリ「タイプ」Vertical-align: middle にして「OK」。
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body {
line-height: 1em;
}
img {
vertical-align: middle;
}
</style>
⑩CSSスタイルパネルの表示［すべて］であることを確認する。修正する場合は、［すべての
ルール］から設定したセレクターをダブルクリックする。
⑪ブラウザで表示を確認する。すべての余白がなくなっていればOK。
-2-
【ページの設定】
①デザインビューにカーソルを置き、画面左下の表示から「div#container」を選択する。
②［新規CSSルール］ ＞ セレクタータイプ「ID」セレクター名「container」を確認して「OK」。
[header]
③カテゴリ「ボックス」Width:960px、Margin-left:auto、Margin-right:auto（すべて同一をオ
フ）、カテゴリ「背景」Background-color: 白 ＞「OK」
④ブラウザでプレビューして、ブラウザ中央に配置されることを確認する。
【背景レイヤーの背景色】
①Illustratorファイルを開く。
②［背景］レイヤーの長方形を選択して、塗りのカラーピッカーを開く。
③Webの色番号（#xxxxxx）が選択されているので、そのままCtrl＋Cでコピー。
④背景色を設定したい行「h1#main」を選択して、［新規CSSルール］
＞
セレクタータイプ
「ID」セレクター名「main」＞「OK」＞カテゴリ「背景」Background-colorにCtrl＋Vでペー
スト。
成田発2015年 4月∼6月
ヨーロッパ
[main]
セレブツアー
[price]
149,800円∼399,800円
ご予約はこちら
下余白
代金は燃油サーチャージ込み
早期申込みで
特別割引
２名様から
出発保証
【ボタンを重ねる】
①#price-buttonのボタン画像を選択する。
②画面左下「div#price-group」＞新規CSSルール＞ID：price-group＞OK＞カテゴリ［位置］＞
Position: relative＞OK（重ね合わせる基準を設定）
③再度ボタンの行にカーソルを置く。
④画面左下「div#price-button」＞新規CSSルール＞ID：price-button＞OK＞カテゴリ［位置］＞
Position: absolute、Top:0px、Right: 0px＞OK
情報のH
⑤ブラウザでプレビューし、ボタンが右上に重なることを確認する。
情報のW
⑥Illustrator の［ものさしツール］でボタンの上と右の距離を計測する。
ご予約はこちら
距離は［情報］パネルのWとHに表示される。
⑦CSSスタイルパネルで［#price-button］をダブルクリックし、TopとRightの設定値を変更する。
（０以上の整数に変える）
⑧同様に#note-groupと#note-buttonも設定する。 （右からの位置計測は
アートボードから）
（実際の位置は下記を実行しないと合わない）
【スライス画像の配置設定】
ご予約はこちら
①各行のID名を確認しながら、CSSスタイルパネルで次の設定を行う。（右図を参考、整数入力）
下に余白を空ける
カテゴリ［ボックス］ Padding-bottom
値はものさしツールで計測
上に余白を開ける
カテゴリ［ボックス］ Padding-top
値はものさしツールで計測
左に余白を開ける
カテゴリ［ボックス］ Padding-left
値はものさしツールで計測
画像を中央揃えにする カテゴリ［ブロック］ Text-align: center
【ページの背景色】
①CSSスタイルパネル［すべてのルール］からbodyをダブルクリック。
②カテゴリ［背景］background-colorに好きな背景色を設定する。
[bodycopy]
皆様一緒の
座席をご用意
日本人搭乗員が
ご案内
左からの余白
下余白
お客様の声
＜フランス・パリ＞
大通りの反対から地下道を通って凱旋門の立つエリアにたどり着きます。まず、そこ
で凱旋門を見上げ、彫刻なども観賞。長い長い階段をあがっていくと、凱旋門の上に
出ます。そこには、素晴らしい眺望が待っていました。東にシャンゼリゼを抜けて
ルーブルが、南にエッフェル塔が、360度見渡せました。感動しました。
＜イギリス・ロンドン＞
[voice]
トラファルガー広場⇒The Mall⇒バッキンガム宮殿、の流れは、まさに伝統的なロン
ドンを体感できる場所だと思います。オリンピックを見られていた方にとっては、
バッキンガム宮殿前のサークルも印象的な場所です。最寄駅は、Green ParkとVictoria
ですが、Charing Crossから歩いてみるのがお勧めです。
中央揃え・下余白
＜イタリア・ローマ＞
ローマ観光にはぜったいにはずせないトレビの泉。泉を背にしてコインを投げると、
またここに来られるという言い伝えがあるらしく、皆がコイントスをしています。み
ごとな彫刻は、一見の価値ありです。お勧めは、夜のツアー。ライトアップされた泉
と彫刻は幻想的で、いつまで観ていてもあきません。
[note]
今すぐご旅行プランと
日程をご確認ください
中央揃え・下余白
ご予約はこちら
©2014 TSB TOUR Co.Ltd. All Rights Reserved.
[footer]
中央揃え・下余白
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body {
line-height: 1em;
background-color: 背景色;
}
img {
vertical-align: middle;
}
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}
#price-group {
position: relative;
}
#price-button {
position: absolute;
top: XXpx;
right: XXpx;
}
#note-group {
position: relative;
}
#note-button {
position: absolute;
top: XXpx;
right: XXpx;
}
#main {
background-color: 背景色;
padding-left: XXpx;
}
#price {
padding-bottom: XXpx;
}
#bodycopy {
padding-left: XXpx;
padding-bottom: XXpx;
}
#bodycopy {
padding-left: XXpx;
padding-bottom: XXpx;
}
#voice {
text-align: center;
padding-bottom: XXpx;
}
#note {
text-align: center;
padding-bottom: XXpx;
}
#footer {
text-align: center;
padding-bottom: XXpx;
}
</style>
-3-