FC2ブログ

スポンサーサイト

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

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

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

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

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書

ゼロからはじめるJavaScript ホームページ辞典 WEBクリエータのためのベーシックデザイン

授業の内容

FTPの役割

WEBページを自分のパソコンで作成して、そのWEBページをサーバーに転送する。

この転送するために使用するプロトコルがFTPである。

自分PC

どのフォルダのどのファイルを送るのがを把握

サーバー

どのフォルダ(ディレクトリ)に転送(アップロード)するのか?

サーバーに転送するためには

ユーザー名・パスワードが必要

ログインしたら、自分専用のディレクトリ(フォルダ)が使用可能になる。

それ以外のサーバーフォルダーは使用ができない。

画面上で表示されるディレクトリ(フォルダ)は/と表示されるが、実際はログインした個別のディレクトリである。

URLについて

http://www.jc-21.co.jp/web/pk19007

http://・・・定型分HTTPプロトコルの指定

www.jc-21.co.jp・・・はコンピューター名(サーバー名)

/web/pk19007・・・以下コンピュータのディレクトリ(フォルダ)名

サーバーにアクセス(FTPを使う)場合・・・ftp.jc-21.co.jp

このコンピューター名は同一のコンピュータ

FTPのアカウントでアクセスした場合

/で表示されるが、WEBで閲覧する場合は/web/pk19007で表示される。

URLが/で終了した場合index.htmlが自動的に付け加えられる。

CGIファイルを使用するにあたって

CGIファイルをアップロードするだけだと、CGIが実行(起動)できないので、

ファイルの属性を変更しなければならない。

ファイル属性には

呼び出し・・・ページを読み取る(WEBページブラウザで表示)させることができる。

書き込み・・・ページに直接書き込むことができるように許可を与える。

実行・・・プログラムを実行する許可を与える。

の属性がある。

最初は実行を許可しない設定になっているので、これをCGIファイルの場合実行を許可するように変更する。

今後の日程

文書 Power Point 7月26日(木)~27(金)

担当先生・・・小山先生

総合演習(個人) 7月30日(月)~8月7日(火)

制作のロールプレイング

要求使用にしたがってWEBページを作成する。

競合プレゼンテーションをする。

担当先生・・・島崎先生 何日か山田先生

要求使用は何か?を必ず島崎先生に確認する。

発表会 8月7日(火)

実際に企業の方が来ていただける可能性もある。

制作実践(グループ) 8月8日(水)~8月29日(水)

グループ演習

結構大変!!

グループ分け・・・今回まったくのランダム

4名グループ6チーム

追加注文の可能性もある。

チームメイト発表

発表会 8月29日(水)

実際に企業の方が来ていただける可能性もある。

オリエンテーション ビジネスマナー 8月30日(木)

WEBクリエーターのためのベーシックデザイン

第6章 ユーザビリティ(使いやすさ)

P93~P103

ユーザビリティとは?

認知性

それが何であるか瞬時にわかる。

操作性

それを簡単に操作することができる。

快適性

それを使うことで楽しさや満足感が伴う。

リンク

テキストリンクは初心者でも認識しやすい

画像リンクはボタン状の加工をするとリンクしやすい。

ピクトグラム/アイコン

道路の標識のように、直感的にイメージしやすい画像をアクセントとして入れてあげると、認識しやすい。

注意

オリジナルのイメージはユーザーによって解釈が異なる。

アイコンのポイント

誰が見てもわかること

繰り返し利用すること

ロールオーバー

使いやすさとゆう意味では積極的に使う

ロールオーバーは、画像データが2倍になるので、データ量を大きくしないように注意する。

注意

マウスオーバー状態で文字が現れるよなロールオーバーは避けること

CSSによるロールオーバーも可能

画像をロールオーバーをさせたい場合、透過GIFを使用して、a hoverに背景色を設定すると画像の色が変更されるような効果が得られる。

ナビゲーション

WEBサイトの各サイトにどのような手法でたどりつけるのか

ナビゲーションの種類

左メニュー型

ヘッダー・フッダー型

複合型

まとめ

一般的に作る。

アフォーダンス・・・P98

見ただけで直感的にすぐわかるサイトを目指す。

ユーザビリティの10原則

サイトの目的を明確にする

1・ワンセンテンスのタグラインを入れる。

2・ウィンドウタイトルを付ける

3・企業情報は1つエリアにまとめる。

ユーザーが求めるものを見つけやすくする

4・サイトの主要なタスクを強調する。

※トップページのリンクは4つに絞り込む

5・検索入力ボックスを付けておく。

※25文字分のテキストボックスは確保する。

サイトのコンテンツを紹介する。

6・実際のコンテンツの例を提示する。

リンクをクリックするとどのような内容が提示されるか明確にする。

7・リンク名は最も重要なキーワードから始める。

8・最新フィーチャー(情報)にアクセスしやすくしておく

※できるだけ短い更新リストにする。

ビジュアルデザインはインタラクションを強化するもので、定義するものではない

9・重要なコンテンツをフォーマットしすぎない

あまり飾り過ぎない

10・意味のあるグラフィックを使う

余計なグラフィックを使わない

弟7章 WEBページのタブー(禁じ手)

テキストのタブー

文字化け

機種依存文字は使用しない

文字コードの指定

文字のコードを必ず記述する。

CSSによる文字と行間の指定

一行をやたらと長くしない

20文字~25文字

行間を空ける

だいたい150%~120%で指定する。

文字サイズ指定

相対単位を使用する。

ページタイトル

必ず付ける。

ページの見出しタイトルになる。

HTML文書中の改行

HTMLで改行されると、ブラウザによって半角スペースが入ってしまう。

イメージのタブー

イメージサイズの指定

イメージのサイズと同じように指定する。

大きいものを小さくしたり

小さいものを大きいものに変更するのはタブー

<img>タグの中でwidth・heightを指定すると早くなる。

ALT属性を必ず設定してあげる。

画像が表示できなかった場合に画像の中身がわかるように付ける。

音声読み上げソフトを使った場合も画像のALT属性を読み上げる。

テーブルのタブー

不要なテーブルは使わない

テーブルを使うと表示が遅くなる。

テーブルの単純化

罫線が入り組んでいないようにする。

テーブルのテクニック

伸縮する角丸の枠

丸まっている画像を4つの角に作成して、

伸縮する縦・横の画像を1pxの画像として作成する。

空白のセル

ブラウザによっては、空白のセルが歯抜け状態で表示されることがあるので、必ず&nbspを空白セルに挿入する。

リンクのタブー

リンク切れ

サイト内リンクのリンク切れは、WEBページ制作者として評価が下がるので、注意すること。

注意ポイント

1・ファイル名は小文字で統一する。

2・拡張子を統一する。

三文字拡張子を使うのか4文字拡張子を使うのか決める。

3・ファイル名を付ける際にスペルミスや省略をしない。

多少長くなってもフルネームで記述する。

4・WEBページ作成ソフトを使用する。

自動チェック機能を有効に使う

行き止まりページは作らない

初心者が戻り方を知らない場合戻れない。

リンクを新しいウィンドウで開く

スクロールバーは必ず表示させてあげる。

あまり新しいウィンドウで表示させるのは避ける。

フレームの利用

フレームは古い技術なので、使わない。

トップページへアクセスするためのリンクを作る。

 

 

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

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

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

授業の内容

1コマ目

色について ベーシックデザイン P79

色は3つの要素から成り立っている。

  • 色相(H)
  • 彩度(S)
  • 明度(B)

色の三原色

  • 赤(R)
  • 緑(G)
  • 青(B)

光の3原色の混ぜ合わせ

色の三原色の図

2コマ目 色の続き

WEBセーフカラーコンピューターにおける色の指定方法

#573F6B・・・R 57・G 3F・B 6B

この色の番号はそれぞれ二桁ずつにわけてRGBの強さを表している。

入力する数値は、

最低・・・00

最高・・・FF

WEBで正しく表示させるために使える色を指定しておく。

3コマ目~6コマ目 課題練習

配色の練習

あらかじめ用意されたサイトに背景色を設定してサイトのテーマに合わせて見る。

一つ目

秋を題材にしたサイト

縦5マス横9マスのテーブルレイアウトであらかじめ構成されたWEBサイトにテーマに合った色をつける。

秋の色をイメージして、このマス目に色をつけた。

作成成果物は下記参照

色づかいの練習課題1のWEBサイト

2つ目

小さな子供とその親向けの色使

あらかじめ制作されたテーブルレイアウトのWEBページに色をつけ、テーマに合ったサイトイメージに仕上げる。

今回おもちゃの画像を男の子、女の子で分けて色使いを変えてみた。

制作したWEBページは下記参照

子供向けWEBページの色使いの課題

終了したら、今まで作成した課題の手直しを行う。

今回手直しを行ったWEBページは、グリット率の低いサイトをテーブルでレイアウトしていたので、これをCSSによるレイアウトに変更して新たにページを作成した。

新たに作成したWEBページは下記参照

グリット率の低いサイトの画像

このページのトップへ移動する。

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

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

授業の内容

1コマ目

余白(ホワイトスペース) ベーシックデザインP68~

余白が広いページのイメージ

ゆったり、落ち着きがある、ほのぼの、上品、高級感、やさしい、女性的

余白が狭いページのイメージ

情報が濃密、元気、にぎやか、男性的、うるさい、見にくい

2コマ目~3コマ目

演習課題

余白を広くとりゆったりとしたイメージのWEBページを作ろう

作成したWEBページは下記参照です。

今回もCSSを使用してレイアウトをしてみました。

今回のWEBページのテーマはパソコン同好会で、

女性が多いサイトとゆうことだったので、余白を広くとり色使いも女性らしい色にしてみました。

サイトのナビゲーションメニューも少ない点数だったので、ヘッダの下にメニューを設置した。

使用したボックスはヘッダー、メニュー、コンテンツ、フッターの4点をボックス指定してレイアウトを施した。

余白を広くとったレイアウトの制作ページ

4コマ目

文字の扱い ベーシックデザイン P71~

フォント

WEBではほとんど保障されない、大まかな形態で下記のような設定が

CSSの書式・・・font-familyで変えられる。

serif・・・明朝系のフォント

sans-serif・・・ゴシック系のフォント

cursive・・・筆記体・草書体系のフォント(英文系のフォント)

fantasy・・・装飾がメインとなっているフォント(英文系のフォント)

monospace・・・等幅フォント

フォントを特定して指定させたい場合は

画像としてWEBページに埋め込む

文字組

行間をとる。・・・CSSでline-hightで指定してあげる。だいたい120%~160%ぐらい明ける。

一行あたりの文字数の制限・・・一行あたり20~35文字ぐらいにする

5~6コマ目

課題練習

テキストの多いWEBページを読みやすいようにレイアウトをする。

作成したWEBページはこんな感じです。

今回はデザインについてのWEBページで、文字が多いコンテンツです。

今回使用したボックスは、ヘッダー、コンテンツ、右側のボックス、左側のボックス、フッターの6点で、

右側ボックスと左側ボックスは回り込みの指定をして2カラムのレイアウトを施した。

なお段落の行間の文字の間隔を調整して、見出し・小見出しにデザインを施して文字の読みやすさを考慮してデザインを施した。

テキストの読みやすいWEBデザイン

このページのトップへ移動する。

職業訓練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サイトは下記参照

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

 

このページのトップへ移動する。

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

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

授業の内容

1コマ目

WEBクリエーターのベーシックデザイン

レイアウトの基礎 ベーシックデザイン P55~77

概要

●レイアウトのページ全体

基本要素・・・ヘッダー・フッダー等の要素

画面分割パターン・・・コンテンツの配列パターン

グリット高速率・・・グリットに沿ってページレイアウトを作成している率

余白・・・ページの空いている部分

●レイアウトの画像

図版率・・・文字と絵の割合

ジャンプ率・・・写真の大きさの比率

●文章

文字組・・・行間・フォントのお話

●WEBとメディアの違い

コンテンツの構成要素はほぼ同じ

WEBにはナビゲーションが必要

WEBページはサイズが固定されていない

●レイアウトの基本要素

*グリット

コンテンツの配置をする座標の考え方

*ヘッダーとフッダー

ヘッダー・・・ページの見出し

フッダー・・・版権などの表示・各ページの共通の情報を表示

*ナビゲーション

メニューバー

*版面

文字やコンテンツを表示する範囲

●リサイズにしたレイアウト

760pxで作ろう

そのページの中のどの部分に配置するか

現在は中央部分に寄せている配置が多い

●テーブルのサイズ指定

#テーブルによるレイアウト

多くのユーザーに対応しているレイアウト方法はテーブルレイアウト

ユーザーにとって自由度が高い

#レイヤー(div)によるレイアウト

幅の指定をしていないとテーブルが自動的に調整されてしまうので、注意する。

ブラウザ・ユーザーによってレイアウトが崩れる可能性もある。

ユーザーにとって自由度が低い

 

2コマ目

実習・・・テーブルを使ってレイアウトをしてみよう

教科書付属のCDROMから(1-4-1)→(141_2)→(table_fin.html)

ここでは、ウィンドウ幅を固定したい部分にスペーサーGIFを入力して幅を固定させる。

テーブルタグは、何もデータが入っていないとその部分が表示されないので何も記述されていない縦・横1pxのスペーサーGIFを作成しそれを各セルに入れてあげて幅を固定させている。

 これがページ幅を固定して表示した例

HTMLは下記参照

赤色で表示されている部分が5pxで表示させたいので、

<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>

とスペーサーGIFの幅を5pxに指定してあげた。

HTMLはこんな感じ

<TABLE width="550" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="383" BGCOLOR="#FFCC33"><img src="spacer.gif" width="383" height="1"> </TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="152" BGCOLOR="#FFFFCC"><DIV ALIGN="center"><img src="h_title.gif" width="152" height="33"></DIV></TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
</TR>
</TABLE>

 

3コマ目

 これがページ幅により可変する例

・・・※

HTMLは下記参照

テーブル幅を100%にすると、画面の幅100%に自動で調整される。

<TD BGCOLOR="#FFCC33"><img src="spacer.gif" width="1" height="1"></TD>・・・※

この部分は可変幅なのだが、データなしだとこのセルがつぶれるので、縦・横の幅が1pxのスペーサーGIFを入力している。

<TABLE width="100%" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD BGCOLOR="#FFCC33"><img src="spacer.gif" width="1" height="1"></TD>・・・※
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="152" BGCOLOR="#FFFFCC"><DIV ALIGN="center"><IMG SRC="h_title.gif" WIDTH="152" HEIGHT="33"></DIV></TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
</TR>
</TABLE>

 

4コマ目

●レイアウトの基本項目

画面分割の基本パターン

左右分割・・・左の幅が小さく、インデックスを表示させる。

上下分割・・・会社のWEBページなどで使用する

上下+左右分割・・・情報量が多いサイト等でしようする。

●グリット拘束率

グリットに合わせているサイト・・・グリット拘束率が高い

グリットから外れてレイアウトしたサイト・・・グリット拘束率が低い

目立たせるためにわざと目立たせたい部分だけグリットから外す手法も用いられる。

 

5コマ目

課題・・・グリット拘束率の高いサイトと低いサイトを作成する。

テキストのページを参考して、出されたイメージを使ってページを作成してみる。

●グリット拘束率の低いサイト

ドリームウィバーのテーブルレイアウト方法を使用して作成した。・・・DW&FWトレーニングブック P114~121

グリット拘束率の低いレイアウト

 

6コマ目

●グリット拘束率の高いサイト

ドリームウィバーのスタイルシートを使用して作成した。 ・・・DW&FWトレーニングブック P86~105

グリット拘束率の高いサイト

 

このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。