FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科21日目

  1. トップ
  2. WEB制作の勉強
  3. 職業訓練WEBクリエーター科21日目

職業訓練WEBクリエーター科21日目

使用ソフト

DreamweaverFireworks

使用教科書

DW&FWトレーニングブックホームページ辞典・ベーシックデザイン

授業の内容

1コマ目

ドリームウィバーのソフトの使用上の注意点

新しくサイトを作成する場合必ずサイトを定義する。

サイトの定義について DW&FWトレーニングブック P13~14

サイトの定義された場所に画像を保存するように心がける。

他の定義サイトから画像を挿入した場合、他のパソコンや、その画像を移動した場合画像が見つからない場合があるので、注意する。

よって新規サイトを作成する場合

サイトを定義する。

新規HTMLファイルは作成したら必ず保存を行う。

画像多く場所(フォルダ)を確保してWEBに挿入する画像はそこに保存する。

 

2コマ目

ドリームウィバーのレイアウトに関しての注意点

前提

WEBでは厳密なレイアウトは不可

→ブラウザによって表示状況が異なる

→文字の大きさに注意

テーブルによるレイアウトの注意

→幅の指定(高さ)は下記の部分の設定は両方の指定が必要

セルの幅と高さ指定・・・最高サイズの指定

画像の指定幅と高さ・・・最低サイズの指定

テキスト部分は、ブラウザによって異なるので、レイアウトをする場合は注意をする。

ベーシクデザイン P64~

画像ファイルのレイアウト

図版率・・・ページの中に画像等の面積の割合

絵の多いページ・・・図版率が高い

文字が多い・・・図版率が低い

ジャンプ率・・・ページの中の画像の大きさの比率の割合

画像の大きさが変わらない・・・ジャンプ率が低い

画像の大きさがある。・・・ジャンプ率が高い

3コマ目~4コマ目

図版率とジャンプ率が高いサイトの作成

練習で用意されたパーツを使用して、図版率とジャンプ率が高いサイトを作成する。

今回はCSSでWEBページを作成してみた。

やり方は、

CSSでヘッダー・コンテンツ・フッダーのボックスを作成した。

コンテンツ部分はさらにボックス1とボックス2のボックスを作成して、フロートの設定をして、右のコンテンツと左のコンテンツを分けて作成した。

下記が今回作成したサイトである。

図版率・ジャンプ率の高いサイト

5コマ目~6コマ目

図版率とジャンプ率が低いサイトの作成

練習で用意されたパーツを使用して、図版率とジャンプ率が低いサイトを作成する。

尚使うパーツは上記と同じパーツを使用する。

今回はCSSのボックスを駆使して、3カラム化に挑戦してみた。

やり方は、上記と同様に、CSSでヘッダー・コンテンツ・フッダーのボックスを作成した。

3カラム化にするには、フロートを使うのだが、右と左しか分けられない。

なので、2つのボックスをグループ化してその中で、右と左にフローとをかけ、さらにそのグループかしたボックスと最後のボックスに右と左のフロートをかけて3カラム化にした。

やり方はコンテンツ部分でボックス1・ボックス2・ボックス3を作成した。

まずボックス1とボックス2を右と左にフロート化しそのボックスをボックス0で囲みグループ化

そのグループ化したボックスとボックス3とを右と左のフロートをかけてグループ化した。

作成したWEBサイトは下記参照

図版率・ジャンプ率の低いサイト

 

スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/43-3e481eeb
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

09 | 2018/10 | 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。