Dreamweaver - m

by user

on 28 марта 2017

Category: Documents

>> Downloads: 2

views

Report

Comments

Description

Download Dreamweaver - m

Transcript

Dreamweaver - m

Dreamweaver CS3
による CSS デザイン
入門
小松学史
アドビ認定インストラクター(ACI)
2007 Adobe Systems Incorporated. All Rights Reserved.
1
Who is this guy?

小松学史

アクティブファクター

Dreamweaverおよび、Flash アドビ認定インストラク
ター(ACI)

2000年よりフリーランスとして、マルチメディアコン
テンツ、Web サイト制作に携わる。
現在多数の教育機関で講義を担当する。
*A 10 point footnote can go here, if necessary
2007 Adobe Systems Incorporated. All Rights Reserved.
2
本日のテーマ

Dreamweaver CS3を用いて、 CSSレイアウトの初歩をハンズオン
を通して習得します。

Dreamweaver CS3を使用して、効率の良いHTML、CSSの記述
方法を解説します。

Dreamweaverを使用して、CSSレイアウトの初歩の考え方、作成
の仕方を解説します。
2007 Adobe Systems Incorporated. All Rights Reserved.
3
本日の内容
1.
2.
3.
Dreamweaverの基本設定
1.
サイトの定義
2.
HTML、CSSの設定の基本
CSSレイアウトの初歩
1.
ボックスモデルの作成
2.
読みやすい文字の設定
3.
3段カラム、 3列カラムの作成
その他、Tips等
2007 Adobe Systems Incorporated. All Rights Reserved.
4
サイトの定義
2007 Adobe Systems Incorporated. All Rights Reserved.
5
サイトの定義

Dreamweaverを起動したら、最初に行うことは、サイトの定義です。

サイトの定義とは、ローカル上にWebサイトのコピーとなるディレクトリを作成
する作業です。

色々と設定できる箇所はありますが、最初はローカル環境で作成するため
に必要な、2箇所だけ設定しましょう。

ファイルの転送が必要になった場合は、さらにファイルの転送の設定等をし
ます。
2007 Adobe Systems Incorporated. All Rights Reserved.
6
サイトの定義画面
2007 Adobe Systems Incorporated. All Rights Reserved.
7
サイトの定義画面(2)
最初に設定をする
のはこの2箇所だけ
2007 Adobe Systems Incorporated. All Rights Reserved.
8
ローカルサイトの定義は詳細設定で！

ローカルサイトの定義は、「基本」タブのウィザード形式も良いですが、「詳細設定」の
方がより、シンプルかと思います。

サイトの定義を行う項目はたくさんありますが、基本的な機能を使用するのなら、「詳
細設定」タブの「ローカル情報」カテゴリ内の、「サイト名」とローカルルートフォルダの
みでもかまいません。

これだけで、基本的な機能の多くが使用できるようになります。
2007 Adobe Systems Incorporated. All Rights Reserved.
9
なぜローカルサイトの定義をするのか？

色々と意味はありますが、以下のような理由で設定する必要があります。

HTMLやCSSコードを書く上で、ファイルパスが設定できるようになる。

データをアップロードする時に、データの管理や保持する機能を使えるようになる。

ファイルパネルを使用できるようになり、コード作成やファイル管理が便利になる
2007 Adobe Systems Incorporated. All Rights Reserved.
10
Dreamweaverのインターフェイス
2007 Adobe Systems Incorporated. All Rights Reserved.
11
Dreamweaver起動画面
スタートページからできること
・最近開いた書類を開く
・各種新規ファイル作成
最初に表示しなくてもよい
2007 Adobe Systems Incorporated. All Rights Reserved.
12
Dreamweaverインターフェイス
メニューバー
挿入バー
ビュー切り替え
ドキュメントウィンドウ
タグセレクタ
2007 Adobe Systems Incorporated. All Rights Reserved.
プロパティパネル
13
各種パネル
Dreamweaverインターフェイスのそれぞれの役割

メニューバー

Dreamweaverそ操作の基本になるメニュー
挿入バー

複数のカテゴリの中から、必要な要素を直感的に挿入できます。

お気に入りには、よく使用するボタンをカスタマイズして構築できます。
ファイルの切り替え

複数開いているファイルをすぐに選択表示することが可能です。
2007 Adobe Systems Incorporated. All Rights Reserved.
14
Dreamweaverインターフェイスのそれぞれの役割(2)

ビューの切り替え

通常Webページを作成するときには、ブラウザ上での表示とコードを見比べて作成します。

その都度プレビューすることなく、見栄えのチェックとコードのチェックをするために、すばや
く画面を切り替えることができます。
2007 Adobe Systems Incorporated. All Rights Reserved.
15
ドキュメントビューの切り替え→コードビュー
2007 Adobe Systems Incorporated. All Rights Reserved.
16
ドキュメントビューの切り替え→デザインビュー
2007 Adobe Systems Incorporated. All Rights Reserved.
17
ドキュメントビューの切り替え→分割ュー
2007 Adobe Systems Incorporated. All Rights Reserved.
18
Dreamweaverインターフェイスのそれぞれの役割(3)

タグセレクタ

デザインビュー上で選択した要素がどのように入れ子になっているかをチェックできます。

また、それぞれの要素をすばやく選択できます。
プロパティパネル

現在選択している要素の属性を、参照および編集することができます。

Dreamweaverを使用する上で、よく使用するパネルのひとつです。
2007 Adobe Systems Incorporated. All Rights Reserved.
19
Dreamweaverインターフェイスのそれぞれの役割(4)

各種パネル

各種のパネルは、「メニューバー」→「ウィンドウ」の中から選択し表示することが可能です。

各種パネルはフローティングにしたり、必要なパネルだけを表示することができますので、
自分の作業に合わせたワークスペースを構築することが可能です。
2007 Adobe Systems Incorporated. All Rights Reserved.
20
環境設定
2007 Adobe Systems Incorporated. All Rights Reserved.
21
環境設定について

「環境設定」のパネルを使用することで、
アプリケーションの詳細な設定ができ
ます。
2007 Adobe Systems Incorporated. All Rights Reserved.
22
環境設定（新規書類）

新規ドキュメントのカテゴリでは、
Dreamweaver上で新規で作成する初
期ドキュメントの設定をすることができ
ます。
2007 Adobe Systems Incorporated. All Rights Reserved.
23
環境設定（ブラウザでプレビュー）

確認するためのブラウザを設定するこ
とができます。

ブラウザを立ち上げる、ショートカット
キーを割り当てることができます。
2007 Adobe Systems Incorporated. All Rights Reserved.
24
ブラウザでプレビューの方法

メニューから選択するか、ショートカットキーを使用することで、ブラ
ウザですぐに確認できます。

プライマリブラウザに設定されたブラウザは、F12キーですぐに確認
することができます。

セカンダリブラウザを設定した場合は、Cntl+F12でチェックできます。
（Macintoshのh場合は、 Command+F12）
2007 Adobe Systems Incorporated. All Rights Reserved.
25
HTMLの基本設定
2007 Adobe Systems Incorporated. All Rights Reserved.
26
見出し、段落の設定

段落を作る場合はデザインビュー上で「Enterキー（MacはReturnキー）」で作
成します

<br>タグを2つ入れて段落を作成することはやめましょう。見た目が似ているとは言え、
まったく意味が異なります。
改行を作る場合には、Shiftキーを押しながら、「Enterキー（MacはReturn
キー）」で作成します

Dreamweaverでイメージを挿入すると、イ
メージタグのアクセシビリティ属性の設定が
出ます。

代替テキストは必ず挿入しましょう。

Dreamweaver上で、リンクを設定する
には、リンクを設定したい、テキストや
画像を選択した上で、プロパティパネ
ルで設定します。
ターゲットアイコンをド
ラッグし、ファイルパ
ネルにドラッグするこ
とで、リンクするファイ
ルの指定ができます。
直接入力することもで
きます。
2007 Adobe Systems Incorporated. All Rights Reserved.
参照ボタンを押すことで、ファイルを選択す
ることもできます。
32
CSSの適用
2007 Adobe Systems Incorporated. All Rights Reserved.
33
新規CSSの作成

セレクタタイプを選択し、セレクタの内
容を設定します。

クラス、タグ以外のセレクタは、全て詳
細設定にします。

定義場所を「現在のドキュメント」にす
ると内部スタイルシートに記述されます。

CSSパネルから、ルールを新規作成すると同時に作成することもできますが、
最初から外部CSSを作成することもできます。
2007 Adobe Systems Incorporated. All Rights Reserved.
37
外部CSS書類の変更
直接入力
してもOK
2007 Adobe Systems Incorporated. All Rights Reserved.
外部CSS書類上でCSS
パネルを使うのもOK
38
外部CSSの関連付け（１）

Dreamweaverで外部CSSファイルを関
連付ける場合、CSSパネルの「スタイル
シートの添付」を選択します。

「スタイルシートの添付」選択後ファイ
ルを選択すると、htmlとcssのファイル
間のパスを自動的に検出し、linkのタ
グを挿入し、関連付けをしてくれます。
メディアを指定すると、linkタグに
media属性が入力され、CSSの
レンダリング適用先を設定でき
る。
2007 Adobe Systems Incorporated. All Rights Reserved.
40
CSS修正方法
現在ドキュメントに関連して
いるスタイルがすべてが表示
されます。
CSSスタイルパネル
外部のスタイル名（<style>になっている
場合は内部スタイルを指します。）
現在ドキュメント上で選択
している要素についての
み、関連しているスタイル
がすべてが表示されます。
セレクタ名、現在選択しているセレクタ
のみ下のプロパティに表示される。
ダブルクリックすると、編集用のパネル
が表示される。
各プロパティを直接編集可能
外部CSSの添付
新規スタイル作成
CSSスタイルの編集
CSSスタイルの削除
カテゴリビュー
カテゴリ毎にプロパティを表示する
リストビュー
全てのプロパティをアルファベット順に
表示し、現在設定しているものだけ、上
位に表示する
2007 Adobe Systems Incorporated. All Rights Reserved.
設定済みプロパティのみ表示
設定しているプロパティのみ表示する
41
divタグの挿入

Dreamweaverではdivタグの挿入が簡
単にできます。

Divタグを挿入と同時に、クラス名やID
名なども設定できます。
挿入場所を指定できる

また、「新規CSSスタイル」ボタンを押す
と、divタグを設置しつつ、CSSスタイル
ルールを同時に作成することができ便
利です。
ID名、クラス名を設定で
きます。必須ではありま
せん。
新規CSSを作成するこ
ともできます。必須では
ありません。
2007 Adobe Systems Incorporated. All Rights Reserved.
43
ありがとうございました。
2007 Adobe Systems Incorporated. All Rights Reserved.
44
Dreamweaver CS3 による CSS デザイン入門
＜実践偏＞
①CSS の適用の基本
ここでは、文字を読みやすくするための、テキストボックスのクラスを作成しながら、
DreamweaverCS3 を使った CSS の適用方法を学習します。
Step01
始めに、以下のような HTML ファイルを用意します。
（完成例「01basic/finished/textbox01.html」）
↓デザインビュー
↑コードビュー
Step02
CSS パネルを開き、オプションメニューから、CSS を新規作成します。
パネルメニューをクリック！
↓
セレクタタイプを「タグ」に、タグを「body」にします。
定義場所は、外部ファイルに設定したいため、
「新規スタイルシートファイル」を選択しま
す。
「OK」ボタンを押すと、外部 CSS ファイルの保存先を指定するダイアログが起動します。
今回は、HTML と同じ箇所に「style.css」という名称で保存します。
Step03
スタイルシートの設定をパネルで設定します。
上図は、背景カテゴリーの背景色を設定した例
その他にも、自身で編集します。編集が完了したら、「OK」ボタンを押して確定します。
コードビューを見ると、以下の図のように、外部ファイルとのリンクが完了し、html ファ
イルに CSS のスタイルルールが適用されています。
もう一度、上図のダイアログを出すには、以下の図の「body」部分をダブルクリックしま
す。
Step04
テキストボックスのスタイルを与えたい部分を<div>タグを使用して、グループ化します。
グループ化したいタグ部分を、コードビュー、デザインビュー、どちらでもいいので選択
し、挿入バーの「Div タグを挿入ボタン」を押します。
↓
この時点で、クラス名や ID 名を設定することができますが、そのまま「OK」を押してお
きます。
選択範囲の前後に、<div>タグがつきます。
Step05
テキストボックスの作成を行います。
新規 CSS を作成します。
セレクタタイプを「クラス」に、名前を「.textBoxStyle01」と設定します。
定義場所は、同じく、「style.css」設定を行います。
ボックスカテゴリの幅のプロパティ（width プロパティ）の値を 530 ピクセルとします。
その他の設定は、後で行いますので、とりあえず、「OK」を押します。
Step06
コードビュー、もしくはデザインビューで Step04 で設定した、div タグを選択します。
選択後、プロパティパネルから、作成したクラスを適用します。横幅が 530 ピクセルにな
れば成功です。
（完成例「01_basic/finished/textbox02.html および style02.css」）
Step07
Step02~07 の作業を行い、以下のような設定を行います。
.textBoxStyle01 クラス
セレクタ
500 px
・ボックスカテゴリ
幅
・ボックスカテゴリ
余白 →
・背景カテゴリ
背景色
・ボーダーカテゴリ
ボーダー
・タイプカテゴリ
→
10px
全て同一
#FFFFFF（白）
→
→
スタイル、幅、カラーは任意で設定
ライン高（行間）
120%
→
*（アスタリスク：全称）セレクタ
0px
・ボックスカテゴリ
マージン
→
・ボックスカテゴリ
余白
0px
・タイプカテゴリ
サイズ
→
100%
→
※全ての要素の、余白、マージンをなくし、ブラウザの初期設定で空いている余白などを
リセット。フォントサイズ、100%にすると、<h1>～<h6>のタグの文字が通常サイズにな
る。
h1,h2 タイプ
セレクタ
・ボックスカテゴリ
.textBoxStyle01 h3
余白 →
全て同一のチェックを外し
セレクタ
→スタイル、下にのみ幅 1px、カラーは任意で設定
・ボーターカテゴリ
下線の作成
・ボックスカテゴリ
下線への余白
→
2px
・ボックスカテゴリ
下のマージン
→
0.5ems
.textBoxStyle01 p
下に 10px
セレクタ
・ボックスカテゴリ
下のマージン
→
1ems
.textBoxStyle01 img セレクタ
・ボックスカテゴリ
フロート
→
右
・ボックスカテゴリ
左の余白
→
2px
（完成例「finished/textbox03.html および style03.css」）
CSS 完成例（01basic/finished/ style03.css）
----------------------------------------------------------------------------------------------------------@charset "utf-8";
body {
background-color: #996633;
}
.textBoxStyle01 {
width: 500px;
padding: 10px;
line-height: 120%;
border: 5px double #990000;
background-color: #FFFFFF;
}
.textBoxStyle01 h3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #990000;
padding-bottom: 2px;
margin-bottom: 0.5em;
}
.textBoxStyle01 p {
margin-bottom: 1em;
}
.textBoxStyle01 img {
float: right;
padding-left: 10px;
}
*{
margin: 0px;
padding: 0px;
font-size: 100%;
}
h1, h2 {
padding: 10px;
}
②CSS レイアウトの初歩
この演習では、簡単な 3 段カラムの作成、中段のカラムを 2 列作成する項目を考えます。
Step01
作成するレイアウトのアウトラインの確認をします。
完成例の中身を以下のような、グループに分け、名前を付けます。
横幅、750 ピクセル。3 段レイアウト、#header、#content、#footer。
中段の#content 部分は、左 180 ピクセル、右 570 ピクセルの 2 列の設計です。
Step02
「02layout/layout.html」を開きます。
開いたら、中の HTML を確認します。
それぞれの要素を以下のように、Div タグを使用して、HTML 内のグループ分けし、それ
ぞれ ID 属性を設定し、名称を設定します。
<div id="#header"> id "#header" の内容</div>
<div id="content">
id "content" の内容
<div id="sub"> id "sub" の内容</div>
<div id="main"> id "main" の内容/div>
</div>
<div id="footer"> id "footer" の内容がここに入ります</div>
（完成例「02_layout/finished/layout02.html」）
Step03
外部 CSS ファイルの作成をします。
[ファイル]→[新規]を選択し、[空白ページ]→[CSS]を選択し、作成を押します。
CSS パネルを開き、新規 CSS スタイルを作成し、以下の設定を行います。
*（アスタリスク：全称）セレクタ
0px
・ボックスカテゴリ
マージン
→
・ボックスカテゴリ
余白
0px
・タイプカテゴリ
サイズ
→
→
100%
外部 CSS 書類を「layout.css」という名前で保存します。
保存が完了したら、HTML ファイルに戻ります。
CSS パネルのオプションメニューから「スタイルシートの添付」を選択し、リンク設定を
行います。
↓
（完成例「02_layout/finished/layout03.html および style03.css」）
Step04
・各 ID に設定した、ブロックのサイズを設定
#header
ID セレクタ
・ボックスカテゴリ
幅
・ボックスカテゴリ
余白 →
#content #main
→
全て同一
10px
ID セレクタ
・ボックスカテゴリ
幅
・ボックスカテゴリ
余白 →
#content #sub
750px
160px
→
全て同一
10px
ID セレクタ
・ボックスカテゴリ
幅
・ボックスカテゴリ
余白 →
550px
→
全て同一
10px
# footer ID セレクタ
・ボックスカテゴリ
幅
750px
→
（完成例「02_layout/finished/layout04.html および style04.css」）
Step05
各 ID に float および、clear のプロパティの設定をする
#content #main
ID セレクタ
・ボックスカテゴリ
#content #sub
フロート
→
右
→
左
ID セレクタ
・ボックスカテゴリ
フロート
# footer ID セレクタ
・ボックスカテゴリ
クリア
→
両方
ブラウザで見ると形が崩れるので、ID「content」の幅を設定する
#content ID セレクタ
・ボックスカテゴリ
幅
→
・ボックスカテゴリ
クリア
750px
→
両方
※この時点で#content ID のクリアは必要は無いですが、後々必要になるので、設定してあ
ります。
（完成例「02_layout/finished/layout05.html および style05.css」）
Step06
その他の見た目の調整を行って見ましょう。
・body タグの設定、背景色の設定
・①で作成した、textBoxStyle01 クラスをコピーして、ID「main」内のテキストに適用、
調整します。
（適当にテキストの範囲を div タグで括って設定します。
）
・ID「header」部分、メニューの部分のリストの設定
・ ID「sub」部分、ul タグ、h2 タグ、イメージのタグの設定
（完成例「finished/layout06.html および style06.css」）
※ 完成例の CSS ファイルのスタイルルールを DreamweaverCS3 で開いて確認してみま
しょう！
Step07
全ての要素をセンターに来るように設定します。
body 内の全ての要素を包む、div タグを作成し、ID 名を「wrapper」と名前を付けます。
その要素のマージンを「自動」に設定し、全ての要素をセンターに来るように設定します。
（完成例「02_layout/finished/layout07.html および style07.css」）
CSS 完成例（02_layout/finished/ style07.css）
-----------------------------------------------------------------------------------------------------------------@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
font-size: 100%;
}
#content #sub ul {
margin-bottom: 20px;
}
#content #sub h2 {
margin-bottom: 5px;
padding-bottom: 2px;
padding-left: 5px;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #996633;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #996633;
}
#wrapper {
margin: auto;
width: 750px;
text-align: left;
}
body {
background-color: #996633;
text-align: center;
}
#header {
width: 750px;
}
#content #main {
padding: 10px;
width: 550px;
float: right;
}
#content #sub {
width: 160px;
padding: 10px;
float: left;
}
#footer {
width: 750px;
clear: both;
}
#content {
width: 750px;
clear: both;
background-color: #FFFFFF;
overflow: auto;
}
#header li {
padding: 10px;
float: left;
}
#header a {
color: #FFFFFF;
}
.textBoxStyle01 {
width: 500px;
padding: 10px;
line-height: 120%;
border: 5px double #990000;
background-color: #FFFFFF;
margin-bottom: 15px;
}
.textBoxStyle01 h3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #990000;
padding-bottom: 2px;
margin-bottom: 0.5em;
}
.textBoxStyle01 p {
margin-bottom: 1em;
}
.textBoxStyle01 img {
float: right;
padding-left: 10px;
}
li {
list-style-type: none;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
vertical-align: bottom;
}