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

[復習] HTMLの基本構造

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

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

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

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


HTMLの基本書式

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

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

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



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


CSSの基本書式





■面積をもった範囲  例: <div>を使ったレイアウト  float と clear
・floatは、指定された部分が、余白が開いているぶんだけ左右(leftもしくはright)にひっついていく
・余白がなくなったら次の行の左上端を基準にひっついていく
 
 
■一度、floatをやめてあたらしく左上端からレイアウトを始めたい場合
・clearを使う
{clear:left;}  左寄せをやめる
{clear:right;} 右寄せをやめる
{clear:both;} 左右どちらも寄せをやめる
 
 
■レイアウトの技法
まずは全体を包みこむ大きな範囲を作り、そのサイズを決める(PC画面用だと800〜1000pxくらいが最近よくみるウェブサイトのサイズ。ほかにも現場ではタブレット用やスマートフォン用などを考える必要がある。※レスポンシブレイアウトといいます。)
そのdivの中に、細かい仕切りをつくっていきレイアウトの骨組みをつくる。
その骨組みの中に、文章や画像などの要素を入れこんでいって完成させる。。

 
★ポイント
インライン要素とブロック要素
ブロック要素はdivのようにすでに面積という概念を持った範囲の指定。
もしインライン要素(pやspanなど)をブロックのように扱いたい場合は、{display:block;}というデザイン指示を追加すると良い。
 

[DIVになれてきたら]
より意味をはっきりさせるグループ化要素(タグ)を使っていきましょう。
クラスを使わなくても要素名でCSSの指定ができるので便利です。

<main>
ページの中心になるメインコンテンツを囲む。1つのhtmlに1度だけしか使えない
<article>
ページの記事や中心となるコンテンツを囲む
<section>
記事の一部やページ内のある一部を囲む
<nav>
ページの主要なナビゲーションを囲む
<aside>
ページの本題ではないサイドバーなどを囲む
<header>
ページのヘッダを囲む
<footer>
ページのフッタを囲む



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

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






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. 保存してブラウザでプレビューしてみましょう

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

 



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

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


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


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

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

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