メディアデザイン演習4β
02 Dreamweaverを実際に触ってみる

Dreamweaverを実際に触ってみる

+サイトの定義
これから作成する全てのデータを格納しておくフォルダを作成する
デスクトップにアルファベットの個人名をつけた新しいフォルダを作る
 データはそのフォルダごと持ち運ぶ
 フォルダの中に入っているデータをアップロードする


動画: http://tv.adobe.com/jp/watch/learn-dreamweaver-cc/19706/

http://www.adobe.com/jp/devnet/dreamweaver/articles/dw_getting_started_01.html



環境設定
+環境設定ダイアログ
環境設定を覗いてみる
特に[一般] 環境設定 は設定必須

+ビューの変更
[コード][分割][デザイン]の三つのビュー(画面の表示方法)があります
普段は[分割]を選択すればよいでしょう



新規ドキュメントを作成する

1.作成
「ファイルメニュー」→「新規」
もしくは
スタートページ(立ち上げるとはじめに出てくる画面)から
「HTML」を選んでクリックします

2.まず保存
先ほど作ったサイト(フォルダ)に保存する
 実際の作業に入る前に必ず一度保存しましょう
 Dreamweaverの機能的な仕組みからはじめに保存する事が必要です

3.タイトル
「ページプロパティ」、もしくはツールバーのタイトル部分で設定する

< さて、これで白紙のページがひとつ作成されました!>

4. ページプロパティ
・背景色を変えてみよう
 画面下に出てくるウインドウ「プロパティインスペクタ」の中にある
  「ページプロパティ」をクリックして「背景色」のボックスから色を選んで
  「適用」をクリックしてみましょう
<背景色は変わりましたか? >
ポイント :
ドキュメント上部のファイル名の後ろに * があるのを確認する
これは、最後に保存した状態から変更が会った場合に表示されます

5.再び保存
先ほど作ったサイト(フォルダ)に保存する
 * が消えたかどうか確認してみてください

6.ウェブブラウザで表示してみる
「ブラウザ のプレビュー」(ツールバー内の地球マーク)もしくは F12ポイント:
タイトルは設定したものになっていますか?
背景色はどうですか?

<何度か背景色を変えて保存してプレビューしてみましょう>


フォントの変更/設定

1.作成
「ファイルメニュー」→「新規」
もしくは
スタートページ(立ち上げるとはじめに出てくる画面)から
「HTML」を選んでクリックします

2.まず保存 font.html
 
作ったサイト(フォルダ)に保存する
 実際の作業に入る前に必ず一度保存しましょう
 Dreamweaverの機能的な仕組みからはじめに保存する事が必要です

3.文字を入力する
デザインビューの部分で画面をクリックし、「成安造形大学」と打ち込みましょう。
その後、リターンキーを押して下さい。
改行されたら、次の行にも「成安造形大学」と打ち込み、今度はシフトキーを押したままリターンキーを押して下さい。

注目: <p></p>と<br / >の違い
段落を表すpタグ  リターンキー
改行を表すbrタグ shift+リターンキー
これは、今後CSSスタイルシートを学ぶ際に必要な知識ですので覚えておきましょう。

4.十行作成する
そのまま改行(リターン)して十行の「成安造形大学」を作成しましょう。

5.文字を変更してみる
ここで登場するのが、プロパティウインドウです。
一行目を選択し、サイズを変えてみましょう。
二行目を選択し、色を変えてみましょう。
三行目を選択し、太い字にしてみましょう。
四行目を選択し、フォントの種類をMSPゴシックに変えてみましょう。
五行目を選択し、フォントの種類をMSP明朝に変えてみましょう。
それ以降は、複合技でいろいろな文字を作ってみましょう。

6. 保存してブラウザでプレビューしてみましょう



挿入ウインドウとプロパティウインドウ

挿入ウインドウのメニュー

挿入ウインドウと、プロパティウインドウを使った入力の繰り返しで、ウェブサイトのデザインの骨組みが出来ていく事を体感してもらいます。
  

イメージを配置する

挿入ウインドウからのイメージ配置

1.作成

「ファイルメニュー」→「新規」
もしくは
スタートページ(立ち上げるとはじめに出てくる画面)から
「HTML」を選んでクリックします
 

2.まず保存  image.html

先週作ったサイト(フォルダ)に保存する
 実際の作業に入る前に必ず一度保存しましょう
 Dreamweaverの機能的な仕組みからはじめに保存する事が必要です
 

3.イメージフォルダを作る

自分の名前のついたフォルダの中に、新規で[image]という名前のフォルダを作りましょう。ファイルウインドウから追加してみる。


4.画像をフォルダに保存する



↑この二点をドラッグ&ドロップで、先ほど作成したimageフォルダの中に入れて下さい。
 

5.イメージを挿入する

デザイン画面にカーソルを合わせて、挿入ウインドウの一般メニュー、イメージの中から「イメージ:イメージ」を選択し、image/mailsample2.gifを選択する。
 

6. 保存してブラウザでプレビューしてみましょう
 

7.ロールオーバーイメージを挿入する

先ほど挿入したイメージからリターンキーで改行し(段落)、次は挿入ウインドウの一般メニュー、イメージの中から「ロールオーバーイメージ」を選択 し、元のイメージを「image/mailsample2.gif」に、ロールオーバーイメージを「image/mailsample1.gif」にして OKする。
 

8. 保存してブラウザでプレビューしてみましょう

マウスをかざしてみて、イメージが入れ替わって動き出したら成功です。

9. swfを貼ってみよう
こちらから右クリックで"リンク先保存"ダウンロード
imageフォルダに入れる。
挿入ウインドウの一般メニュー、メディアの中から「Flash」を選択して選択する。

 


[復習][資料] HTMLの基本構造

HTMLの基本構造

1つのHTMLファイルは、大きく次の2つのパートとその中の要素で構成されます。  

<!doctype html>
<html>
<meta charset=”UTF-8”>
  <head>
    <title>○○</title>
  </head>
  <body>
    - - - - - - - - - - - - -
  </body>
</html>

・DOCTYPE宣言■
・html要素■
     head要素■ そのHTML文章に関する情報を示す要素
     body要素■ ブラウザで開くと見える(表示される)内容
 

■DOCTYPE宣言では、以降のHTMLがどのバージョンを使って書かれているのかを示します。

その後の内容は全て<html>と</html>の中に書き込まれまれ、■html要素の中に含まれるようになります。html要素は必ず二つのパートにわかれます。
1つ目の部分をHTMLの■head要素といい、そこにはそのHTML文章に関する情報を示す要素が入ります。2つ目の部分を■body要素といい、ブラ ウザで開くと見える(表示される)内容が入ります。この2つをあわせたもの、つまりHTMLの本体をhtml要素といいます。

head要素には、文書のタイトルを示すtitle要素を必ず入れます。

HTMLの基本書式

タグとは何か

<h1>ここには大きな見出しテキストが入ります</h1>

タグは要素の名前を山括弧( “<” と ” >” )で囲んだものです。
つまり、これはh1要素を表すタグということになります。
例えば、head要素を示すタグは<head>となります。  

要素
タグは、開始タグ “<要素名>” で始まり、終了タグ “</要素名>”で終わります。
そして、タグで囲まれた範囲を「要素」と言います。

空要素
<br> ….. このタグは改行を表します。終了タグがありません。
終了タグである”</要素名>”は、省略できるものもあり、空要素と呼ばれています。
 

属性

<a href=”http://www.google.com/”>googleにリンクする</a>

タグで囲まれた部分の特徴付けは、<要素名 属性名=”値”>と指定します。
この場合、aが要素名、hrefが属性名、”http://www.google.com”が値です。
 
属性は、「属性名=”値”」半角スペース「属性名=”値”」といくつでも入れる事が出来ます。
しかし、各要素に入れられる属性は決まっており、要素により必ず入れなければならない属性も有ります。

HTML5 要素リスト http://www.html5.jp/tag/elements/


 


[資料]サイトデータを持ち出すとき

Dreamweaver サイトの設定の読み込みおよび書き出し
http://helpx.adobe.com/jp/dreamweaver/using/import-export-dreamweaver-site-settings.html


別の環境で作業する場合:
サイトの設定を XML ファイルとして書き出し、後から Dreamweaver に読み込むことができます。サイトの書き出しおよび読み込みでは、サイトの設定を他のコンピューターや製品バージョンに転送したり、他のユーザーとサイト の設定を共有したり、サイトの設定をバックアップすることができます。


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

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

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