メディアデザイン演習4β
03 Dreamweaver基礎編

Dreamweaverを実際に触ってみる

前回の授業のふりかえり+途中から

*文字の変更
*イメージのはりつけ
*SWF(Adobe Flashで作成された再生用ムービーファイルの標準ファイル形式)のはりつけ

*サイトの作成 サイトの概念

使いこなしたいウインドウ:
プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ

■まず確認
自分の名前のついた"サイト"になっているかを確認しましょう。
現在、数名でそのマシンを共有しているので、他の人のサイトに間違って保存しない様に気をつけましょう。


スタイルシート基礎 復習

CSS(Cascading Style Sheet)
本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段です。


[スタイルシートの書き方]
1 ヘッダ内style内に
h1 { color: red; }
p{font-size:10px; margin-right:20px; }

2 インラインスタイル(直接タグに)
<span style=“color:red;font-size:large;”>成安造形大学</span>

3 外部リンクファイル(〜〜.css)に書く


divとspan
<span style="color:red;">成安造形大学</span>
<div style="color:red;">成安造形大学</div>

 <span> はインライン要素(前後で改行されない)
 <div> はブロック要素(前後で改行される)

divタグで囲まれた内容はひとつのグループとして操作することができます。

<div>
この部分が<br />
ひとつのグループとして<br />
扱われます。
</div>

spanタグと似ていますが、このタグとの違いは、
divタグ …… ブロックタイプ(前後に改行が入ります)
spanタグ …… インラインタイプ(前後に改行が入りません)

divタグはひとつのエリアをまとめて操作する場合に使用し、spanタグは文章中の一部を操作する場合に使用する、といった感じで使い分けると良いでしょう。


■class :クラス
クラスはスタイルの集合につける名前で、
複数のタグに同じクラス名を指定することが可能です。

<html>
<head>
<title>test</title>

<style type="text/css">
<!--
.change { color: red; }  /* class「change」と指定すると赤色に表示される*/
-->
</style>   
</head>

<body>
<h1 class="change" >成安造形大学(赤くなります)</h1>
<h1>成安造形大学</h1>

<p class="change">ココも赤くなります</p>

</body>
</html>

 

セレクタ:いろんな対象への指定の仕方

h1 { color: red; } /* h1要素に対して指定 */
h1, h2 { color: red; } /* h1 と h2要素に対して指定 */
ul li { color: red; } /* <ul>~</ul> の中にある li要素に対して指定 */
.sample { color: red; } /* class="sample" を持つ要素に対して指定 */
#sample { color: red; }/ * id="sample" を持つ要素に対して指定 */
h1.sample { color: red; } /* class="sample" を持つ div要素に対して指定 */
a:link { color: red; } /* <a href="..."> のリンク(未訪問)に対して指定 */


 


スタイルシートでレイアウト

■相対配置と絶対配置

絶対的な配置
 レイヤー:ピクセル単位での絶対的な位置や重なりの制御

Position(配置場所)
レイヤーは、テキスト、画像、他の HTML 文書などを乗せたアニメのセルシートのようなものです。
JavaScript を用いることで、レイヤの位置を変更したり、非表示にしたりなど、ダイナミックな効果を持つページを作成することができます。

Divでも絶対的な配置を行う事が出来ます

<div style="position:absolute; top:100px; left:200px;">
上から100ピクセル、左から200 ピクセルの位置にこの中の文字や画像が表示されます。
</div>

 

相対的な配置
 Divレイアウト:サイズを指定した領域の、上下左右の組み合わせ

Float (上下左右の位置指定)
 float:left; 左寄せ
 float:right;  右寄せ


[Divでのレイアウト] 

基本的な考え方:
Divとfloatプロパティとの組み合わせによる段組みレイアウト

まずは2つの箱を作る


 挿入/レイアウト/Divタグを挿入
 クラス「left」

 挿入/レイアウト/Divタグを挿入
 クラス「right」

<div class="left"> 左側の内容 </div>
<div class="right">右側の内容 </div>

この段階では、箱が二行にわかれて上下に配置されています
これを左右に分けて配置したいと思います。


新規CSSルールをつくる
 CSSウインドウからbasic.cssをリンクさせる。
コードのDIV "left"の部分にカーソル合わせ、basic.cssを選択した状態で、セレクタの欄の+を押し、.left と出るのを確認する。

.leftのCSS定義クラス
ボックス/幅200px 高さ200px
ボックス/フロート/左

ok

再度編集する
CSSスタイル

背景/背景色/赤

ok


.rightのCSS定義クラス
ボックス/幅500px 高さauto(自動)
ボックス/フロート/右

ok

再度編集する
CSSスタイル

背景/背景色/緑

ok

保存して、ブラウザでプレビュー  


☆ floatプロパティ 左右への配置と回り込みの指定

☆ clearプロパティ floatの解除


続けてやってみましょう

<div id="wrapper"> // 2つをつつみこむようにもうひとつdivを書き込む
  <div class="left">
  左側の内容
 </div>
 <div class="right">
  右側の内容
 </div>
</div> // id:wrapperをとじる


#wrapperのCSS定義クラス


ボックス/幅920px
マージン/左右→自動

ok


 


[資料]DreamweaverでWebページを制作する

資料:https://helpx.adobe.com/jp/dreamweaver/how-to/make-style-web-page.html
Adobe Dreamweaverを使用してWebページを作成する方法を説明します。


使いこなしたいウインドウ

今後、使いこなして行きたいDreamweaverのウインドウ

プロパティウインドウ
挿入ウインドウ
CSS デザイナーウインドウ