FC2ブログ

スポンサーサイト

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

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

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

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

今日のテーマ・・・課題で出されたWEBページを作成してみよう。

1コマ目~5コマ目

WEB制作

ここではまず、使用しているソフトの紹介から始めます。

ソフトは2種類で、いずれもWEB制作会社の使用率が高いソフトです。

Dreamweaver(ドリームウィーバー)

このソフトは、WEB制作業界のシェアー率が高いソフトで、ワープロ感覚で、WEBサイトの制作が出来るソフトです。

HTMLのタグ打ちが出来ない人でも簡単にサイトを作成できます。

現在Adobe Dreamweaver CS3.0 (V9.0)が最新バージョンになっています。

WEBサイトデザインソフトDreamweave(ドリームウィーバー)について詳しく見てみる。

Fireworks(ファイアーワークス)

このソフトは、ドリームウィバー同様WEB制作業界のシェアー率が高いソフトで、グラフィック制作・編集ソフトです。

画像を加工・イラストの作成・簡単なGIFアニメーションが作成できます。

現在、Adobe Fireworks CS3 が最新バージョンになっています。

グラフィックソフトFireworks(ファイアーワーク)について詳しく見てみる。

WEBサイト制作内容

今回は、この4日間で学習したDreamweaveFireworksの技術を生かして1ページ分のWEBサイトを作成することになりました。

テーマは、病院で佐藤クリニック(仮想クリニック)のWEBページ制作でした。

手順

①WEBページの大体のレイアウトデザインを紙に起こす。

ここでは、最初からDreamweaveでレイアウトしていくのではなく、あらかじめ紙で構想を練っておく。

こうすることで、WEBページの大まかなレイアウトを作っておくことでサイトの作成の効率がよくなる。

今回は病院がテーマなので、清潔感を出すため白色をベースに薄い青色系の色を使い清潔感を出してみた。

Dreamweaveにて、大まかなレイアウトを作成

今回は、CSS(スタイルシート)を習っていなかったので、テーブルにてレイアウトを施した。

実際のレイアウトでは現在CSSでのデザインが主流なようだ。

テーブルを使用して、ページのセンターにレイアウトしてみた、なお横幅はヤフーのサイトと同様に710ピクセルにて制作を行った。

Fireworksにて、写真の加工、ロゴの作成等ページのデザインを作成

今回作成した画像は11点

1点目・・・ヘッダーの背景として雲の画像を加工して、挿入した。

使った技法は、マスク処理にて背景が徐々に透明になるように設定した。・・・FWスーパーリファレンス P103~P111

2・3・4点目・・・ヘッダーに入る佐藤クリニックのロゴ・連絡先のロゴ・クリニックの施設紹介ロゴ

使った技法は、ロゴデザインにてストロークカラーの設定とエフェクト設定のドロップシャドウ・・・DW&FWトレーニングブック P26~P31

GIFで書き出し、透明処理を施して、背景が出るように施した。

5・6・7点目・・・写真の加工

佐藤クリニックの外観・入り口・待合室の写真のサイズを変更し、さらにマスク処理を施した。・・・FWスーパーリファレンス P103~P111 DW&FWトレーニングブック P61

8点目・・・予約診察の画像

夜の予約診察の画像で、マスク処理を施した FWスーパーリファレンス P103~P111

9点目・・・見出しの背景

青色をベースに見出しの背景を作成 ベクターツールを使用 FWスーパーリファレンス P61~P62

10点目・・・アクセスマップの作成

ベークター系のツールを使い地図を作成 FWスーパーリファレンス P58~P79

11点目・・・住所のロゴ

写真にマスク処理を施しその上から住所をテキストツールを使用して記入。 FWスーパーリファレンス P65~P69・P103~P111

6コマ目

全員の成果を確認

それぞれが作成したWEBサイトを見て回った。

感想

24人が同じ課題でWEBサイトを作成したが、全員が違ったデザインや色づかいで作成していていろんなデザインが見れてとっても参考になった。

改善点

始めて作成した割りにはよく出来たと思う。

これからは、HTMLの構文を理解し、さらには最新デザインのスタイルシートでのWEBデザインで同じように作成していきたい。

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

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

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

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

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

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

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

08 | 2018/09 | 10
- - - - - - 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 - - - - - -

ハマーにメールを送る

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

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

QRコード

覗いてくれた人

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