FC2ブログ

スポンサーサイト

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

職業訓練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

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

 

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

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

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

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

感想

今日でDW&FWトレーニングブックの中の内容が終了した。

これで一通りDreamweaverFireworksの機能を学ばせてもらった。

ゆくゆくは、この学習した機能をWEBに公開していこうと考えています。

使用ソフト

DreamweaverFireworks

使用教科書

DW&FWトレーニングブックホームページ辞典

授業の内容

1コマ目

ホットスポット解説 ホームページ辞典 P116~119

イメージタグで画像を挿入

<img src="~画像のファイル~" usemap="#任意で名前を選択">

ホットスポットの定義はHTMLの文章のどこに記述しても作動する。

ホットスポットのタグ

<map></map>で囲んだ部分

<area >タグが範囲の選択の部分・・・一枚の画像で複数のホットスポットを使用したい場合は、この<area>タグを選択する。

ホットスポットの範囲選択図形は3種類で、

  • 四角・・・rect
  • 円・・・circle
  • 多角形・・・poly

になる。

記述のしかたは、<area>の後ろに、<area shape="この部分が図形の定義">と記述する。

範囲選択は、X座標・Y座標の2つの数値を一組として記述し、座標の始まりは左上から数えて座標を記述する。

記述のしかたは、<area shape="この部分が図形の定義" coords="この部分に座標を記述する。">

座標を指定する数は、図形により異なりそれぞれ

  • 四角・・・rect   左上のX・Y座標と、右下のX/Y座標の4点
  • 円・・・circle   中心座標のX・Yと半径の3点
  • 多角形・・・poly 多角形の頂点(線の方向が変わる場所)の各X・Y座標を指定

まとめると、

<map name="上で任意に名前を選択した名前">
<area shape="この部分が図形の定義" coords="この部分に各座標を記述する。">
</map>

ファイアーワークスでドリームウィバーでナビゲーションバーを作成 DW&FWトレーニングブック P162~169

ドリームウィバーのシンボルボタン機能を使う

通常・・・ボタンに対応する画面は表示されていない

オーバー・・・マウスポインタが重なっている

ダウン・・・ボタンに対応するページが表示されている

オーバーダウン・・・上記+マウスポインタが重なっている

作業

●シンボルに変換・・・

ボタンの画像の部分を選択して、修正メニュー→シンボル→シンボルに変換を選択

※シンボルを解除する場合は、修正メニュー→シンボル→シンボルを解除をした後にグループ化になっているので、それも解除してあげる。

 

2コマ目

●シンボルを編集・・・

通常・オーバー・ダウン・オーバーダウンのボタンを編集する。

●ボタンシンボルの複製・・・

メニューバーのボタンは複数あるので、ボタンをシンボルごと複製する。

CTRL+ALT+SHIFTを押しながらドラックして、複製したい場所に持っていく。

●ボタン名の設定・・・

ボタンの名前を変えたいシンボルを選択すると、プロパティインスペクタにテキストの項目があるので、この部分で名前を変更する。

●スライスの設定・・・

ボタン以外の部分を書き出すために、タイトルロゴをスライスツールで選択する。

●イメージの書き出し・・・

ファイル→書き出しを選択します。 CTRL+SHIFT+R

※書き出す際に、HTMLファイルとイメージを設定して、スライスのない領域も含めるをOFF(チェックを外す)サブフォルダにイメージを置くをON(チェックマークを入れる)

●ナビゲーションボタンの配置・・・

ドリームウィバーを起動して、leftFreameに設定されたdummy.htmとP3_B_menu.htmを入れ替える。

●リンクの設定・・・

ナービゲーションボタンを選択し、タグパネルのビヘイビアタグの+マークをクリックして、中のメニューのナビゲーションバーイメージの設定を選択して、立ち上がったウインドウのクリック時にURLに移動の部分にリンクを設定する。

 

3コマ目

ドリームウィバーでサブウィンドウを設定する。 DW&FWトレーニングブック P170~173

●サブウィンドウを開いてそこにコンテンツを表示させる方法・・・

サブウィンドウにしたい部分を選択して、ビヘイビアパネルの+からブラウザウィンドウを開くウィンドウの項目を入力する。

●イベントの設定・・・

このままだと、ページが表示された時にサブウィンドウが立ち上がってしまうので、これを変更する。

サブウィンドウを選択した項目を選択してビヘイビアパネルのブラウザウィンドウを開くの右に「on Load」と書いてる部分を選択する、右側に下向きの矢印を選択し、「onClick」に切り替える。

 

4コマ目

ドリームウィバーでポップアップメニューとジャンプメニューの設定 DW&FWトレーニングブック P174~182

やり方はいろいろあるが、教科書の方法は、

●ポップアップメニューは・・・

ファイアーワークスでポップアップまで作成する。(部品を作成する。)・・・

図形をスライスにして、ビヘイビアの設定をする。

ビヘイビアポップアップエディターを使用する。

●ドリームウィバーでリンク先を設定する・・・

ビヘイビアパネルのポップアップを表示項目をダブルクリックしてそれぞれの項目のリンクを編集する。

 

5コマ目

●ジャンプメニューは ホームページ辞典 P142~144

ドリームウィバーで設定する。(タグによるり設定する。)

ツールバーのジャンプメニューの挿入で挿入できる。

最初のプルダウンメニューに、「移動先項目を選択してください」みたいな案内を入れておくと使いやすい。

今回作ったタグは

<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option selected>移動先を選択してください</option>
<option value="linksaki_A.htm">ケーキの作り方</option>
<option value="linksaki_B.htm">ケーキ用語</option>
<option value="linksaki_C.htm">人気ランキング</option>
<option value="linksaki_D.htm">リンク</option>
</select>
</form>

<form>タグで形成されている。

<select>タグは下向き三角のプルダウンメニューを表示するタグ

<option>タグは選択項目

 

6コマ目

ファイアーワークスで点滅をするGIFを作成する。 DW&FWトレーニングブック P186~187

作成したGIFの書き出し方が異なるので、注意すること。

ロールオーバー等と異なり、アニメーションGIFは一つのファイルとして書き出す。

書き出す際には書き出しプレビューからアニメーションGIFに選択して書き出す。

ファイアーワークスで回転をするGIFを作成する。 DW&FWトレーニングブック P186~187

モーションパスを使用して作成する。

アニメーメーションプロパティ

オブジェクトの移動・・・シンボル化したオブジェクトを移動させる。

方向・・・どの方向に移動するか決める。

拡大・縮小・・・大きくするのか、小さくするのかを決める

不透明度・・・透明にするのか、しないのか決定する

回転・・・オブジェクトを回転させる。

ファイアーワークスで直線移動をするGIFを作成する。 DW&FWトレーニングブック P192~197

2種類の方法がある。

トゥーイーンによる設定

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

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

DW&FWトレーニングブックホームページ辞典

授業の内容

1コマ目

●フレームを作成した場合の削除のしかた・・・

削除したいフレームの幅を0にするとフレームがなくなる。

ドリームウィバーでデザインの統一 DW&FWトレーニングブック P130~137

ライブラリ・・・共通する要素を全てのページに適用させる方法

テンプレート・・・ページデザインを共通化して全てのHTMLファイルに適用させる。

ライブラリの作成

●ライブラリに登録する・・・

登録したいコンテンツ、この教科書だとテーブルをライブラリに登録する。

ファイルパネルのアセットを選択し、パネルの左側のアイコンの中の一番下の本の絵が描かれたアイコンを選択

ライブラリのパネルになったら、ライブラリに登録したい部分を選択して、パネル右下のアイコンの右から3番目の「新規ライブラリ項目」を選択するとライブラリに登録される。

拡張子は.lbiで登録され、ファイルは定義サイトにLibraryフォルダが作成される。

記述タグは、ドリームウィバーで認識するため、コメント部分に定義されている。

<!-- #BeginLibraryItem "/Library/P2_14A.lbi" -->・・・ここから
<table width="570" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<td bgcolor="#FFFF00"><strong>■5周年記念キャンペーンのお知らせ■</strong></td>
</tr>
<tr>
<td><p>7月12日~17日にお申し込み頂いたお客様に<strong>受講料10%オフ</strong>のサービス!!  お申し込みはこちら</p></td>
</tr>
</table><!-- #EndLibraryItem -->・・・ここまでがドリームウィバーでの認識タグ

●ライブラリを挿入する・・・

ライブラリを挿入したい部分を選択して、ファイルパネルからアセットのライブラリからドラック&ドロップしてもっていく。

●ライブラリを編集・・・

アセットパネルからライブラリ登録したファイルをダブルクリックすると画面が立ち上がるので、ファイルを編集して保存する。

するとライブラリ項目の更新画面が立ち上がるので、「更新」ボタンを押す。

すると、ページの更新ウィンドウが立ち上がるので、「閉じる」を押す

使用方法としては

ページで共通のコンテンツ(メニューバーやサイトのリンク等)をライブラリに登録すると、ページを更新する手間が省ける。

 

2コマ目

ドリームウィバーでテンプレートの作成 DW&FWトレーニングブック P135~137

●テンプレートの作成・・・

ファイルメニュー→テンプレートへ保存を選択

※拡張子は、.dwt

保存名を付けて保存をする。

●編集可能領域の指定・・・

編集したい部分を選択して、挿入メニュー→テンプレートオブジェクト→編集領域を選択

※CTRL+ALT+Vでも同じ効果ができる。

新規編集可能領域ウィンドウが立ち上がるので、名前を記入して「OK」を押す。

※間違って名前を付けた場合・・・

その部分を選択しすると、プロパティインスペクタから名前を変更する。

●テンプレートから作成・・・

ファイル→新規を選択すると、ウィンドウが立ち上がるので、テンプレートタブを選択し、今保存したテンプレートを選択する。

データを入力し、新しくファイルを作成する。

●テンプレートの編集・・・

元のテンプレートファイルを変更すると、その変更が適用される。

アセットパネルのテンプレートボタン(左側のアイコンの下から2番目、ページの絵が書かれたアイコン)を選択して、

テンプレート化したテンプレートをダブルクリックするとテンプレートファイルが立ち上がるので、そこから編集する。

使用方法として・・・

テンプレートの使用方法として、ページのデザインを統一して、数多くのページを作成する場合等に使用すると、作業が早くなる。

 

3コマ目

ファイアーワークスでスライス機能を使う DW&FWトレーニングブック P138~142

スライスとは分割する機能である。

画像データの空白部分をスライスでそぎ落として画像の部分されているものを保存する。

ドリームウィバーで表示させる場合は、テーブルタグを使用して表示させる。

●スライスの作成・・・

ツールボックスのWEBセクションにあるスライスツールを使用し、必要なグラフィックが入るように、最小限の矩形で分割する。

※あまり細かく分割しないよう注意する。

●スライスの書き出し・・・

ファイルメニューから書き出しを選択すると書き出される。

書き出しを選択すると、HTML(テーブルタグ)と画像ファイル(分割した画像)が新しくフォルダに作成され、そこに書き出される。

●書き出した画像をドリームウィバーに挿入する場合は、挿入したい部分にカーソルを合わせて、挿入→イメージオブジェクト→FireworksHTMLを選択して、ウィンドウが表示されるので、ファイアーワークスで作成したHTMLを選択する。

※ツールバーのボタンの一般のイメージを挿入から選択も可能

 

4コマ目

ドリームウィバーでリンクボタンを作る DW&FWトレーニングブック P144~151

絶対パスと相対パスについて DW&FWトレーニングブック P144

●絶対パス・・・他人のホームページにリンクをかける場合に使用する

(例)

<a href="http://www.jc-21.co.jp/web/pk19007/10422/">左のようなhttpから始まるリンク先</a>

●相対パス・・・自分のホームページ同士にリンクをはる場合はこちらの場合を使用します。

(例)

<a href="jc-21/test>自分の今いるフォルダからみてどこにファイルがあるか示した方法</a>

つまり、絶対パスの中でリンクをのパスが被ってる部分を省略して記述している形。

ドリームウィバーでテキストリンクを設定する DW&FWトレーニングブック P149

●リンク先の設定・・・

テキスト・またはイメージを選択して、プロパティインスペクタのリンクからリンク先を設定する。

ターゲットアイコンをドラック&ドロップして、ファイルパネルからリンクしたいファイル先を選択するとリンクができる。

●ロールオーバーボタンを作成する

ツールバーのイメージ挿入から「ロールオーバーイメージ」を選択します。

ウィンドウが立ち上がるので、各イメージを選択して挿入する。

出来上がったタグは下記

<a href="P3_A_toy_a.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"><img src="image/toy_a.gif" alt="お気にいりおもちゃ" name="toy" width="100" height="80" border="0"></a>

onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"の部分がJavaScriptでロールオバーをする記述

onMouseOut="MM_swapImgRestore()"で、マウスポイントが外れた場合に起こす行動で、ここでは何も記述されていないので元にもどる。

onMouseOver="MM_swapImage('toy','','image/toy_a_over.gif',1)"で、マウスポインタが重なった場合toy_a_over.gifの画像を表示させるとゆうこと。

 

5コマ目

ドリームウィバーでスワップイメージを作成する DW&FWトレーニングブック P152~157

スワップイメージとは、マウスを重ねたとき、別の場所の画像が切り替わるようにする。

●スワップイメージで表示させたいイメージに名前を付ける。・・・

名前はプロパティインスペクタの左端のイメージの下に名前を付ける。

●スワップイメージの設定・・・

タグパネルを開き、ビヘイビアのタグに切り替える。

タグパネルの+マークをクリックして、スワップイメージを選択する。

先ほど名前を付けたイメージを選択して、ソースの設定部分に入れ変えたい画像のイメージを選択させる。

出来上がったタグがこんな感じ

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('front','','image/front_over.gif',1);MM_swapImage('photo','','image/etc_photo_02.jpg',1)"><img src="image/front.gif" alt="前" name="front" width="50" height="50" border="0"></a>

JavaScriptでスワップイメージの記述がされている。

イメージプレースホルダ DW&FWトレーニングブック P165

画像の大きさをあらかじめ挿入したい場合、ツールバーのイメージからイメージプレースホルダを作成する。

ドリームウィバーでテキストにスワップイメージを設定する P156~157

●スワップイメージで表示させたいイメージに名前を付ける。・・・

名前はプロパティインスペクタの左端のイメージの下に名前を付ける。

●テキストにリンクを張る・・・

ドリームウィバーだとリンクにしかスワップイメージが張れないので、現在のページにリンクを張る。

●あとは先ほど画像で行った処理と同じ・・・

タグパネルを開き、ビヘイビアのタグに切り替える。

タグパネルの+マークをクリックして、スワップイメージを選択する。

先ほど名前を付けたイメージを選択して、ソースの設定部分に入れ変えたい画像のイメージを選択させる。

 

6コマ目

ドリームウィバーでホットスポットを作成する。 DW&FWトレーニングブック P158~161

●ホットスポットの作成・・・

ホットスポットを作成したい画像を選択して、プロパティインスペクタのマップの多角形スポットツールを使い、ホットスポットを作りたい部分を囲む。

●ホットスポットにリンクを張る・・・

ホットスポット部分を選択して、プロパティインスペクタからリンクを設定する。

●ホットスポットをタグで実現するためには・・・

タグは、

<img src="image/mychi_photo_01.jpg" alt="" name="photo" width="120" height="160" border="0" usemap="#photoMap" id="photo">

usemap="#photoMap"がイメージタグについている。

さらに、ホットスポットの定義として、<map name="photoMap"></map>で囲まれた部分がホットスポットの定義

<map name="photoMap">
<area shape="poly" coords="35,1,29,21,27,27,28,31,23,38,22,45,28,51,27,64,29,82,33,97,37,117,37,139,38,146,46,146,47,128,60,128,69,122,68,147,80,154,76,127,82,100,99,76,94,63,91,57,99,48,97,34,102,27,101,16,94,10,81,16,65,16,43,6" href="linksaki.htm">・・・この部分がポインタの座標で、2つでX・Yの座標位置
</map>

が記述されている。

 

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

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

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

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

使用ソフト

Dreamweaver

使用教科書

DW&FWトレーニングブックホームページ辞典

授業の内容

1コマ目

DW&FWトレーニングブックpart2の内容 P86~142

テキストデザイン P86~105 DW&FWトレーニングブック

DW&FWトレーニングブックのP86~91は書式設定方法が記述されている。

ドリームウィバーで「プロパティインスペクタ」でデザインする。 DW&FWトレーニングブック P92~95

●本文の設定・・・

ページのプロパティからページのフォント・サイズ・テキストカラー・背景色を指定する。

今回は、ページ内にスタイルシートを記述する。

●Style1の設定・・・

Style1クラスを新たに設定して、文字の大きさ、太字設定、文字の色を設定。

設定の仕方は、プロパティインスペクタで設定する。

●Style2の設定・・・

上記と同様に スタイルをかけたい文字を選択して適用する。

別の段落にもスタイルを適用する。

スタイルをかけたい文字を選択し、プロパティインスペクタからスタイル項目からスタイル2を選択する。

●リストを選択する・・・

リスト項目にしたい部分を選択し、プロパティインスペクタからリストボタンを押す。

※リストの項目の中にさらにリストの項目を入れたい場合、リスト項目にしたい部分を選択し、プロパティインスペクタからインデントボタンを押す。

●番号リストを作成する・・・

番号リストにしたい部分を選択して、プロパティインスペクタから番号リストボタンを押す。

ドリームウィバーで「CSSスタイル定義」でデザインする。 DW&FWトレーニングブック P96~98

●スタイル1の変更・・・

CSSスタイルパネルからスタイルの編集ボタン(右から2番目)をクリックして、スタイル1の設定を変更する。

または、プロパティインスペクタからスタイル項目を選択して、スタイルの管理をクリックして、スタイル番号を選択すると同様な設定になる。

ここでは、文字のカラー・背景色・テキストの行揃えを変更した。

●スタイル2の変更・・・

上記と同様の設定方法。

ここでは、スタイル2の下線部分にボーダーを設定する。

注意ポイント!!

ブラウザ上では異なるデザインがある。

この場合は、ドリームウィバー上では、実線で表示されているが、上で、ボーダーのスタイルをダッシュ(破線)を設定したので、ブラウザ上では破線で表示される。

●スタイルの新規作成・・・

CSSスタイルから、style3の名前を付けて、下のクラスの設定をすると、設定項目がでてくるので、ボックスの下に1emsのマージンを設定する。

style3を適用したい部分を選択して、プロパティインスペクタから、スタイル項目の中からstyle3を選択する。

●スタイルの削除方法・・・

HTMLの記述で、いらなくなったスタイルがある場合、CSSスタイルパネルから削除したいスタイルを選択し、右下にあるのゴミ箱の絵を押す。

●スタイルの名前の変更方法・・・

プロパティインスペクタからスタイルを選択して名前の変更を選択する。

 

2コマ目

ドリームウィバーでドキュメントにCSSスタイルシートをリンクさせる DW&FWトレーニングブック P99~101

これは、1コマ目に作成したHTMLの中に直接記入したCSSを書き出して、新たなHTMLに外部リンクでスタイルを適用させる方法。

●CSSファイルの書き出し・・・

メニュー項目のファイルを選択し、書き出し項目のCSSファイルを選択する。 

※メニュー→ファイル→書き出し→CSS

●CSSファイルのリンク・・・

新しいHTMLを開き、CSSスタイルパネルから、右下にあるアイコンの右から4番目(スタイルシートの添付)を押して、書き出したCSSをリンクする。

新しいHTMLの適用したい部分を選択して、スタイルを選択し、決定していく。

元のファイル(HTMLの中に直接記入したファイル)に外部CSSリンクを設定する・・・

元のファイルにも上記と同様にCSSファイルをリンクさせる。

そのままだと、直接CSSを記述下部分のCSSが適用されてしまうので、直接記述したCSSをCSSスタイルパネルから削除する。

 

3コマ目

●CSSファイルの設定を変更する・・・

CSSスタイルパネルからスタイルを変更すると、変わる。

ここで、リンクさせてHTMLファイルを変更すると、リンクさせたHTMLファイルの見栄えが変わる。

 

ドリームウィバーで表組 DW&FWトレーニングブック P106~111

●テーブルの挿入

挿入メニュー→テーブルを選択すると、テーブルの画面になる。

今回は、行4 列3 ボーダー3ピクセル セル内余白5 セルの間隔2 ヘッダを両方に選択

できた表が下記

     
     
     
     

●文字を入力・・・

文字を記入したいセルを選択して下記のように入力した。

接続方法 通信速度  
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)  

●セルの結合・・・

結合したいセルを複数選択し、プロパティインスペクタの「選択したセルの結合」ボタン(左下の方にセルと書かれた文字の下のアイコン)をクリックしますと、下記のように結合されます。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

●テーブルのデザイン

テーブル全体を選択して、ボーダーカラーを変更すると下記のようにデザインが変更します。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

●セルのデザイン・・・

デザインを変更したいセルを選択して、プロパティインスペクタで変更していくと下記のようになる。

接続方法 通信速度
ADSL 12Mbps(下り) 900kbps(上り)
CATV 512k~30Mbps(下り) 10Mbps(上り)
FTTH 10M~100Mbps(下り)

テーブルのコードは下記のようになります。

<table border="3" cellpadding="5" cellspacing="2" bordercolor="#3333ff">  ここで、余白5ピクセル セルの間隔2ピクセル 線の色#3333ffと設定される。
<tr bgcolor="3333ff">  行に#3333ffの色を背景指定
<th scope="col">接続方法</th>  scope="colで行をグループとしている。
<th colspan="2" scope="col">通信速度</th>  scope="colで行をグループとしている。
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">ADSL</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td bgcolor="#99CCFF">12Mbps(下り)</td>   #99CCFFの色を背景指定
<td bgcolor="#99CCFF">900kbps(上り)</td>   #99CCFFの色を背景指定
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">CATV</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td bgcolor="#99CCFF">512k~30Mbps(下り)</td>   #99CCFFの色を背景指定
<td bgcolor="#99CCFF">10Mbps(上り)</td>   #99CCFFの色を背景指定
</tr>
<tr>
<th bgcolor="#6699FF" scope="row">FTTH</th>  scope="rowで列をグループとしている。#6699FFの色を背景指定
<td colspan="2" bgcolor="#99CCFF">10M~100Mbps(下り)</td>   #99CCFFの色を背景指定
</tr>
</table>

4コマ目

ドリームウィバーでレイアウト DW&FWトレーニングブック P112~129

●レイアウトの種類

  • テーブル
  • レイヤー<div>タグ
  • フレーム・・・ブラウザの画面分割(現在では使わないように推奨される)

ドリームウィバーでテーブルでレイアウトする DW&FWトレーニングブック P114~121

●テーブルモードの設定・・・

表示メニュー→テーブルモード→レイアウトモード

もしくは、ツールバーを一般からレイアウトに変更し、標準からレイアウトに選択する。

●テーブルの作成・・・

レイアウトテーブルを選択し、テーブルを作成する。

●セルの作成・・・

レイアウトセルを描画をクリックし、テーブル上で範囲を指定して決定すると、できる。

●連続してセルを作成・・・

レイアウトセルを描画をクリックし、CTRLキーを押しながらセルを作ると連続でセルを作成することができる。

※セルを作る際もCTRLキーを話さないでセルを作成する

●イメージの挿入・・・

ファイルパネルから選択したいイメージをドラック&ドロップしてレイアウトのパネルに貼り付ける。

●テキストの挿入・・・

ファイルパネルからテキストを開いて、全文をCTRLキー+Aで全部を選択し、CTRLキー+Cでコピーをする。

テキストを挿入したいレイアウトセルに選択し、文字を打てる状態にしたらペーストをする。

●レイアウトの修正・・・

自動伸縮をする場合、スペーサーイメージをスペーサーイメージを作成して自動伸縮したくない部分にそのスペーサーイメージを挿入する。

スペーサーイメージとは、縦横1ピクセルの白いドットである。

この画像の横幅の幅を固定したい幅に設定(widthタグでスペーサー画像を指定)して、固定させている。

スペーサーが入った部分は下の幅の大きさを記入した部分が二重線になる。

 

5コマ目

●イメージテキストの位置関係・・・

マージンと回り込み設定を駆使してレイアウトをすることも可能

ここでは、写真を左に寄せて画像の横幅にマージンを取りることで似たようなレイアウトにすることが可能になる。

ドリームウィバーでレイヤーでレイアウトする DW&FWトレーニングブック P122~125

●レイヤーの作成・・・

挿入メニュー→レウアウト→レイヤーを描くからレイヤーを作成する。

またはツールバーからレイアウトを選択し、標準の左にあるレイヤーを描くをクリック

クリックしたら、テーブルと同様にCTRLキーをおしながらドラック&ドロップでレイヤー枠を作成する。

レイヤーは<div>タグを使用して、絶対位置で位置を選択している。

例・・・<div id="Layer1" style="position:absolute; left:9px; top:54px; width:317px; height:267px; z-index:1"></div>

これは、position:absoluteで、親要素に対して絶対表示の意味で左から9px上から54pxの位置に幅317px・高さ267pxのボックスを表示する設定z-index:1は重なるときの順番なので、番号が大きくなると前に表示されるので、重なった場合は最背面になる。

変更方法は、プロパティインスペクタのZインデックスで変更するか、レイヤーパネルから変更する。

この方法では、ブラウザによっては形が崩れる場合があるので注意する。

 

6コマ目

ドリームウィバーでフレームでレイアウトする DW&FWトレーニングブック P126~129

ブラウザの画面を分割する方法で現在では減少傾向にある。

やり方は、2分割で作るならば2つのHTMLから成り立つ。3分割なら3つ、といったように分割数だけHTMLファイルを作成していく。

●フレームセットの作成・・・

ファイル→新規またはCTRL+Nから新規ファイルを立ち上げる。

左の項目からフレームセットを設定して、真ん中の項目で左固定を選択すると分割方法を記述するHTMLが作成される。

フレームタグは下記参照

<frameset cols="200,*" frameborder="NO" border="0" framespacing="0">・・・ここがフレームタグ
<frame src="file:///C|/Documents%20and%20Settings/jc-21/My%20Documents/SampleSite/UntitledFrame-2" name="leftFrame" scrolling="NO" noresize>・・・ここが左部分のフレームで、HTMLファイルを指定する場所
<frame src="file:///C|/Documents%20and%20Settings/jc-21/My%20Documents/SampleSite/Untitled-5" name="mainFrame">ここが右フレーム
</frameset>フレームタグの終わり。

cols="200,*"・・・横幅の指定左200px,自動幅

frameborder="NO" border="0" framespacing="0"・・・フレームの線なし・幅0px・幅の間隔0px

scrolling="NO"・・・スクロールをしないとゆう記述

●左フレームの表示設定・・・

ウィンドウメニューからフレームを選択すると、右側のパネル欄にフレームパネルがでる。

フレームパネルから左フレームをクリックして選択する。

プロパティインスペクタのソース部分に左フレームのHTMLファイルを選択する。

●フレーム内ドキュメントの修正・・・

左のフレーム部分を選択すると、左フレームの中にあるファイルを選択できるようになる。

ここでは、テーブルタグを真ん中に揃える修正をしている。

●メインフレームの表示設定・・・

左フレームと同様に、フレームパネルで右のメインフレームを選択し、プロパティインスペクタからメインのHTMLファイルを選択する。

●フレームの分割・・・

分割したいフレームをフレームパネルで選択して、ツールバーのレイアウトツールの右から2番目フレームを選択して、分割したい場所を選択する。

課題の場合、上フレームを選択して、上の部分にフレームを追加した。

●フレーム表示ができないブラウザに対しては、<noframes><body>この部分にコンテンツを記述 </body></noframes>が表示される。

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科16日目

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

感想・・・

昨日・今日と2日間かけてテキストエディタで、サイトを完成することができました。

サイトのテーマは趣味のサイトで、僕のテーマはテニスのサイトです。

気をつけていたことは、すべてCSSにてレイアウトしてみようと頑張ってみました。

1コマ目~6コマ目

制作実習

出来上がったサイトは

ハマーがテニスにハマッたわけ

になります。

是非見てください。

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科15日目

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

感想・・・

今日は、HTML/CSSのタグを練習してきたので、テキストエディタと画像編集ソフトのみで、ホームページ制作に挑む

サイトのテーマは趣味のサイトで、今回は趣味のテニスをテーマにしてみたいと思う。

明日のブログに出来たタグとHTMLについて発表していきたいと思います

予定では、HTMLに内容 CSSでレイアウトや見栄えの演出をする予定にしている。

1コマ目~6コマ目

制作実習

 

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科14日目

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

感想・・・

今日でHTMLでの学習は終了となり、明日はいよいよ演習課題に入ります。

今日まで学習してきたHTMLとCSSのタグを駆使してWEBページを作成していきたいと思います。

そのうち今まで作成した成果をWEB上に掲載したいと思います。

1コマ目

WEB制作のワークフロー ベーシックデザイン P23~41

表示を統一させるために、レイアウトは表を使って表示させる。

データ量・・・4~5秒で表示したほうがよいので、8M~10Mぐらいに抑えておくこと。

チームワーク

チームワークに大切なのは、コミュニケーション能力・・・組織でWEBを制作するにあたって、目的を明確にするため。

ワークフロー(作業手順)

企画・計画・・・組織でWEBを制作するためには、クラインアント・組織を含めた共通の「認識・目的」を持つために行う。

設計・・・設計図を書く。 構造やリンク等を設計する。 現在ツリー構造での制作が多いみたいだ。(クライアントが更新する方法を設計も考慮)

製造・・・WEBを制作する。 設計図に基づいて製造する。  変更部分はクライアントの意向しだいである。

テスト・・・WEBを作成して、動作の確認 計画・企画どうりにできたかテストする。 デバック(不具合)等の修正をする。

運営・・・更新作業 (クライアントが更新する場合もある。)そのままWEB制作会社で行うケースもある。

重要になってくるのは、下に行けばいくほど高くなってくる。

 

2コマ目

役割分担(WEB制作に関わるスタッフ)

ディレクションスタッフ・・・現場監督

プランニングスタッフ・・・計画を立てる人(大体は現場監督が兼任する。)

制作スタッフ・・・WEBの制作~テストをする人まで含む。

  • デザイン・・・レイアウト 色づかい・・・deramweaver
  • コンテンツ・・・WEBページの本文・写真
  • プログラム・・・スクリプト・機能 JavaScript Flash

職業訓練で学習している部分はこの制作スタッフ部分の勉強が主

WEB制作の流れ

コンセプトの設定・・・クライアントから話を聞き箇条書きで要点(目的を設定する。)

ターゲット(WEBページを見る人)を絞る。・・・どんな環境の人が利用しているのか予測する。

コンセプト(サイトの内容を膨らませる)を立案する。

コンテンツのリストアップ・・・ブレインストーミング(箇条書きで挙げていく)

コンテンツの分類・・・フォルダ化にして情報を整理をする

情報の構造化・・・各コンテンツをどのような構造にしていくかを構想する。

デザインのガイドライン・・・大体の方針を決めて、方向性(何色を使うのか)を決める。 基調色(ブルーが強い) ・アクセント(補色で赤色が多い)

トッページのデザイン・・・サイトの顔となるので、ラフスケッチを描く。

デザインのフォーマット(画面の構成)を決める

コーディング・・・javascriptを使用して機能を作る。

デバック・・・環境の違い(OS・ブラウザ・解像度)を確認して、レイアウトが崩れていないかチェックする。 リンク切れ。 データサイズ

データ(ファイル)管理・・・下記のようなルールをあらかじめ決める。

  • 命名規則・・・(例)全て小文字、拡張子 html 
  • ディレクトリ(フォルダ)構成
  • バージョン管理・・・ どれが新しいファイルなのか(チェックイン・・・サイト構成ファイルの一覧に入れる/チェックアウト・・・修正中のフラグを立てる。)
    ※ WEB制作で制作したファイルをファイルサーバーとゆう機械に入れ、分かるようにするようにチェックイン・チェックアウトをする。

 

3コマ目

WEB制作ツール

コンテンツ作成ツール

  • スキャナ・デジタルカメラ
  • 編集ソフト(フォトレタッチ・ペイント)・・・Photoshop・Fireworks等、
  • グラフィックソフト(ドローイング)・・・Illustrator・Fireworks等、

コーディングツール

  • WEBソフト・・・Dreamweave・Golive

FTP(ファイルアップロード)ツール

  • FFFTP等(フリーソフトのものが多い)

企画書・設計書ツール

  • Word・・・文章を作る
  • Excel・・・表を作る
  • Powerpoint・・・プレゼンテーションソフト(授業中にプレゼンテーションをする予定)

 

4コマ目

WEBページをインターネットに公開する WEBサイト作成術 P248~254

いままで、HTMLで作成したデータをWEBサーバーに送る。

今回配布されたセミナー用の情報を使用する。

必要な情報は、

WEBサーバーのアップロードをする先のアドレス

ユーザーアカウント

パスワード

今回は、FFFTPとゆうソフトを使用してアップロードをする。

  1. FFFTPソフトを立ち上げる。
  2. 右側にあるホストの立ち上げをクリックする。
  3. 立ち上がった画面にホストの設定名に名前を付ける ※ここは任意で名前を付ける。
  4. ホスト名を入れる。 ※ここは、アップロードするWEBサーバーへアクセスするため、サーバーのアドレス(ftpで始まる)を入れる。
  5. WEBサーバーで設定されているFTPアカウント・パスワードを各設定項目入力欄に入力する。
  6. ローカル初期フォルダの設定項目で、今回アップロードしたいフォルダを選択する。
  7. ホストの初期フォルダの設定項目は記入しなくてもよい。
  8. OKボタンをクリック
  9. ホスト一覧が表示されるので、接続をクリック

 

5コマ目

WEBページをインターネットに公開する続き WEBサイト作成術 P248~254

  1. 接続したら、FFFFTPのメイン画面が出てくるので、右側に出ているindex.htmlを削除する。
  2. 左側の項目を全部選択して、左側(WEBサーバー側)にドラック&ドロップしてファイルをアップロードすると完了

6コマ目

明日・明後日からの制作の予習

明日・明後日で、HTMLタグを使用して、趣味のサイトを作成する。

今回僕の趣味のテーマてして、テニスを題材にしたいと思います。

 

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科13日目

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

感想

1コマ目

WEBサイト基礎知識

教科書・・・WEBクリエーターのためのベーシックデザイン ウイネット社から販売

教科書内容  目次

一部・・・知識編  P1~122まで

二部・・・演習課題 P123~154

セミナー中は第一話のみ。

進み具合

6月15日・18日はチャプターの1~3まで。

1~3はワークフロー・WEBシステム(仕組み)

6月27日~29日はチャプター4~5まで。

4~5はレイアウト・色(WEBデザイン関連)

7月23日~25日はチャプターの6~7

6~7はユーザビリティ・WEBページのタブー(失敗事例)

チャプター1  WEBの仕組み ベーシックデザイン P3~4

WEBに必要なもの

1・ユーザーのコンピューター

専門用語で、クライアントコンピューター

ブラウザ

WEBページをコンピューター上に表示させるソフト・・・代表例でインターネットエクスプローラ

インターネット

クライアントとWEBサーバーを繋ぐ役割。

2・WEBサーバー(ちょっと大き目のタワー型のパソコン)・・・専門用語で、サーバー

WEBページの提供 WEBページの構成ファイルの保存

WEBサーバーソフト

WEBサーバーにアクセスしたら、データをクライアアントに送るソフト 代表ソフト Apache(アパッチ),IIS(マイクロソフト社)

ソフト同士のやりとり

プロトコル(通信にあたっての約束事)WEBのシステムでは、HTTPとゆう約束事で決められている。

2コマ目

続き

アドレスの仕組み

http://www.XXXX.ac.jp/seminar/test/excel.html

http://・・・お約束事 相手のサーバーにHTTPを使用して通信をするとの命令

XXXX.ac.jp・・・通信相手のWEBサーバーの名前 jpは日本の記号 acは教育機関の称号

/seminar・・・ディレクトリ名 WEBサーバーのどのフォルダへアクセルするかを記述している。

excel.html・・・ファイル名 大抵はhtmlファイルが指定されている。

同じディレクトリにあるデータをアンカータグでアクセスする場合は、ファイル名を記述するだけでもよい。

クライアントのパソコンからWEBサーバーのパソコンにデータを送るためには?

FTPクライアントソフト

WEBページ開発用のコンピューターで開発したWEBページをサーバーと交信するために使用する。

FFFTP等のソフトがある。

FTPサーバーソフト

サーバーがFTPソフトからのアクセスを受けるために使用する。

サーバーと交信するプロトコル(取り決め事)が

FTPとゆうプロトコル

レンタルサーバーの利用

個人でサーバーの運営は大変なので、サーバー会社がレンタルしてくれるサービス

主流は、このレンタルサーバーを借りてWEBページを運営する。

WEBページを構成する要素 ベーシックデザイン P5~9

最近では、HTMLファイルだけではなく、画像データ、CSS、JavaScriptなどの処理プログラムなどで構成される。

クライアント側の処理プログラム

今ページを見ているクライアントにのみプログラムが適用される。

Java・JavaScript・・・直接HTMLに記述が可能

WEBページの見栄え(色使い)を変更したりなど。

WEBサーバー側の処理プログラム

WEBサーバーにアクセスしたクライアント全員の情報に対してのプログラムが可能。

アクセスカウンターやアクセス解析等

ASP・PHP・・・直接HTMLに記述が可能

Perl・Javaサーブレット・・・サーバーソフトがこのプログラムを起動するために使用するものがCGI

プラグイン

プラグインとは、WEBページを作り、その中に新たな枠を設けてその部分にプログラム(ゲームや動画等のコンテンツ)を起動させる技術。

プラグインで必要になるのは、そのプログラムに必要なソフトをクライアントコンピュータにダウンロードしておかないと起動しないので注意!!

WEBページの記述言語の体系 ベーシックデザイン P6~9

WEBページはHTMLが基本

最新のWEBページは

HTMLでレイアウト・CSSでレイアウトの構成(見栄え)・XMLでデータの構成と分けられて構成させるのが主流ブログなどがその代表的なWEBページ。

・マークアップ言語

SGMLからWEBページに簡略かしたものが、HTML。

SGMLから分かれたもので、

HTML・・WEBページを記述するためのマークアップ言語

XML・・・データー構造を記述。  ブログ等で使われる。

これは、表示するレイアウト(HTML)・データそのもの(XML)を分けましょう。

なので、HTMLでレイアウト

XMLでデータの構造(日付・タイトル・本文)を構成。

CSSで見栄えのデザインと分けてWEBページを作成する事が多い。

・スクリプト言語

・プログラミング言語

3コマ目

ユーザー環境により違い ベーシックデザイン P10~11

ガンマによる画像の明るさによる違い

画面解像度による違い

フォントの違い

機種依存文字・・・半角カナ、○で囲まれた数字、ローマ数字

表示されているウィンドウの違い

ブラウザの種類とバージョンの違い ベーシックデザイン P12~13

ブラウザのシェアが高いのが、一位・・・インターネットエクスプローラが85% 二位・・・Firefox8.8%

ブラウザの種類・バージョンの違いにより多少異なるので注意する。

表示解像度について ベーシックデザイン P16~17

表示解像度については、最も小さい画面に合わせて幅を合わせて作ると、基本的にはどの解像度でも表示が崩れない。

VGA 640×480

SVGA 800×600・・・この部分を基準にして考える

XGA 1024×768

SXGA 1280×1024

UXGA 1600×1200

だいたい使用できるのが、760ぐらいの幅で作成するとよい。

幅の指定をどうすればよいか。

テーブルを使うってCSSで幅を指定してあげる。

表示速度の違い。

現在、ブロードバンドが普及してきたのだが、電話回線等でインターネットを繋いでいる人もいるのも現状。

なので、繋がりやすさを考え、だいたい5メガぐらいのWEBページを目指して表示させる。

WEBのメディア特性 ベーシックデザイン P18~21

双方向性・・・掲示板など伝え手と、受け手で双方向で情報を交換できる。

情報の専門性・多様性・・・専門的な部分に対してWEBは情報を発信しやすい。

情報の信憑性、情報源の特定・・・ここが、誰でも発信できるので信憑性が薄い

4コマ目

HTML/CSS

表の行や列をグループ化する方法 WEBサイト作成術 P213~218

表の列をグループかする方法

<colgroup span="ここにグループ化したい列を入れる。"></colgroup>・・・例 3と入力すると、1~3列目がグループとして設定される。

<colgroup span="1" class="number"></colgroup>・・・ここで、1列目をグループ化している。
<colgroup span="1" class="houmen"></colgroup>・・・ここで、2列目をグループ化している。
<colgroup span="1" class="d-shoukai"></colgroup>・・・ここで、3列目をグループ化している。
※尚クラス設定をしているので、この各列に各クラスの設定をしている。

行をグループ化する方法

<thead></thead>・・・表のヘッダー部分をグループ化する

<tfoot></tfoot>・・・表のフッター部分をグループ化する

<tbody></tbody>・・・表の本体部分をグループ化する

<thead>・・・ここから
<tr>
<th>出口番号</th><th>出口の方面</th><th>紹介</th>
</tr>
</thead>・・・ここまでが、ヘッダーとして行をグループ化している。
<tbody class="gaien-e">・・・ここから(gaien-eのクラス設定がされている。)
<tr>
<th>出口1</th><td>外苑東通り方面</td><td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>
</tr>
<tr>
<th>出口2</th><td>外苑東通り方面</td><td>出口1の道路を挟んだ反対側に出ます。</td>
</tr>
<tr>
<th>出口3</th><td>外苑東通り方面</td><td>エスカレーターを上がって、外苑東通りに出ます。</td>
</tr>
<tr>
<th>出口4</th><td>外苑東通り方面</td><td>健保会館(はあといん乃木坂)の入口に出られます。</td>
</tr>
</tbody>・・・ここまでが、表の本体部分としてグループ化している。
<tbody class="reien">・・・ここから(reienのクラス設定がされている。)
<tr>
<th>出口5</th><td>青山霊園方面</td><td>出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。</td>
</tr>
</tbody>・・・ここまでが、表の本体部分としてグループ化している。 ここで2個本体としてグループを作ってある。

CSSの設定を

/*ここからテーブルスタイルの設定*/

/*table要素*/・・・全体のテーブル設定
table {
margin : auto;
border-style : solid;
border-with : 2px;
border-color : #000;
border-collapse : collapse;
width : 85%;
}

/*th,td要素*/セル・見出しセルの設定
th,td {
height : 3em;
border-style : solid;
border-with : 1px;
padding : 0.5em;
}

/*th要素*/・・・見出しセルの設定
th {
background-color : #fb5;
}

/*thead要素*/・・・ヘッダーの行のグループの設定
thead {
vertical-align : middle;・・・垂直位置の設定・・・ここで真ん中に表示する設定
}

/*d-shoukai クラス要素*/・・・3列目のグループにd-shoukai クラスが掛っているので、それの設定
.d-shoukai {
vertical-align : top;・・・垂直位置の設定・・・ここで、上に揃う設定になっている。
}

/* number クラス要素*/・・・1列目のグループにnumberクラスが掛っているので、それの設定
.number {
width : 4em;・・・幅の設定・・・ここで、1列目が4文字分の幅が空くように設定されている。
}

/* houmen クラス要素*/・・・2列目のグループにhoumenクラスが掛っているので、それの設定
.houmen {
width : 9em;・・・幅の設定・・・ここで、2列目が9文字分幅をとる設定になっている。
text-align : center;・・・行揃えの設定・・・ここで、2列目が真ん中に揃うように設定されている。
vertical-align : middle;・・・垂直位置の設定・・・ここで、真ん中に揃う設定になっている。
}

/* gaien-e クラス要素*/・・・ここでは、2行目から5行目までにこのgaien-eクラスが掛っている
.gaien-e {
background-color : #bfa;・・・2行目から5行目まで#bfa色が背景色に設定されている
}

/* reien クラス要素*/・・・6行目にreienクラスが掛っている
.reien {
background-color : #ffa;・・・6行目に#ffa色が背景色に設定されている
}

/*ここまで、テーブル要素*/

で、HTMLの適用タグは

<table>
<colgroup span="1" class="number"></colgroup>
<colgroup span="1" class="houmen"></colgroup>
<colgroup span="1" class="d-shoukai"></colgroup>
<thead>
<tr>
<th>出口番号</th><th>出口の方面</th><th>紹介</th>
</tr>
</thead>
<tbody class="gaien-e">
<tr>
<th>出口1</th><td>外苑東通り方面</td><td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>
</tr>
<tr>
<th>出口2</th><td>外苑東通り方面</td><td>出口1の道路を挟んだ反対側に出ます。</td>
</tr>
<tr>
<th>出口3</th><td>外苑東通り方面</td><td>エスカレーターを上がって、外苑東通りに出ます。</td>
</tr>
<tr>
<th>出口4</th><td>外苑東通り方面</td><td>健保会館(はあといん乃木坂)の入口に出られます。</td>
</tr>
</tbody>
<tbody class="reien">
<tr>
<th>出口5</th><td>青山霊園方面</td><td>出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。</td>
</tr>
</tbody>
</table>

テーブルタグでのCSSでの注意点

重複部分の設定に関しては、範囲が狭い部分の記述が優先される。

なので、行で設定した背景色よりも、セル部分にかかった背景色の方が優先される。

※ただし、同じ部分にクラスが2つ設定されていた場合には後に記述したスタイルが適用される。

5コマ目

テーブルのセルの結合 WEBサイト作成術 P219~221

<td rowspan="結合したい行の数値"></td>・・・結合したい数値分行が結合されます。

<td colspan="結合したい列の数値"></td>・・・結合していたい数値列分が結合されます。

結合したら、その後にある行または列を削除すること。

でないと、表が崩れてしまう。

<tr>
<th>出口1</th><td rowspan="4">外苑東通り方面</td>・・・ここで、4行結合<td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>セルは3つ
</tr>
<tr>
<th>出口2</th><td>出口1の道路を挟んだ反対側に出ます。</td>・・・ここからセルが1つ少なくなっている。
</tr>
<tr>
<th>出口3</th><td>エスカレーターを上がって、外苑東通りに出ます。</td>・・・おなじくセルは2つになる。
</tr>
<tr>
<th>出口4</th><td>健保会館(はあといん乃木坂)の入口に出られます。</td>・・・おなじくセルは2つになる。
</tr>

表にタイトルを追加 WEBサイト作成術 P222~224

<caption></caption>タグをの間に記述する。

そのままだと、表の上にスタイルが適用しないで、表示されるので、

CSSで下記のように記述する。

/*captionの設定(表のタイトル)*/
caption {・・・表のタイトルタグの設定記述
background-color : #350;・・・背景の設定
color : #fff;・・・文字色の設定
}

6コマ目

番号付きリストの作成 WEBサイト作成術 P226~229

<ol></ol>タグを使用する。このタグは番号入りリストのタグ  オーダードリストの略(番号付き)

<li></li>上のタグの中にこのタグを入れる。リストの各行の定義  リストアイテムの略

<ol>・・・ここが、番号付きタグの設定開始
<li><a href="shuuhen.html">乃木坂の周辺</a>・・・<a href="shuuhen.html#eki">乃木坂駅</a>と<a href="shuuhen.html#kouen">乃木公園</a></li>・・・この<li></li>で区切られたところが、リストの行
<li><a href="history.html">乃木坂の歴史</a></li>・・・2項目目のリスト
<li><a href="about.html">このサイトと作者について</a></li>・・・3項目目のリスト
</ol>・・・ここで、番号つきタグの設定終了

表示例が下に表示されます。(尚リンクは飛ばないので、削除させていただきました。)

  1. 乃木坂の周辺・・・乃木坂駅と乃木公園
  2. 乃木坂の歴史
  3. このサイトと作者について

箇条書きのリストを作成 WEBサイト作成術 P230~231

<ul></ul>タグを使用する。

<li></li>は番号付きリスト同様に行の設定で使用

<ul>・・・この部分が箇条書きリストのタグ
<li><a href="shuuhen.html">乃木坂の周辺</a>・・・<a href="shuuhen.html#eki">乃木坂駅</a>と<a href="shuuhen.html#kouen">乃木公園</a></li>・・・この<li></li>で区切られたところが、リストの行
<li><a href="history.html">乃木坂の歴史</a></li>・・・2項目目のリスト
<li><a href="about.html">このサイトと作者について</a></li>・・・3項目目のリスト
</ul>・・・ここで箇条書きリスト終わり

表示が下記

  • 乃木坂の周辺・・・乃木坂駅と乃木公園
  • 乃木坂の歴史
  • このサイトと作者について

項目入りリストの作成 WEBサイト作成術 P232~234

<dl></dl> データリストの略 項目入りリストの設定タグ

<dt></dt>リスト項目の設定タグ

<dd></dd>リストの内容の設定タグ

記述例がこちら

<dl>・・・項目入りリストの設定
<dt>名前</dt>項目のリスト
<dd><a href="mailto:username@xknowledge.co.jp">知識 太郎</a></dd>・・・内容
<dt>趣味</dt>2項目のリスト
<dd>散歩</dd>・・・内容
<dt>好きな食べ物</dt>3項目目のリスト
<dd>ブルーベリー</dd>・・・内容
</dl>

表示例がこちら 尚メールアドレスリンクは削除しています。

名前
知識 太郎
趣味
散歩
好きな食べ物
ブルーベリー

リストの中にリストを作る WEBサイト作成術 P 235~237

<li></li>の中にリストタグを入れる。

リストタグは、<ol></ol>(番号付きリスト)<ul></ul>(箇条書きリスト)<dl></dl>(項目入りリスト)がリストタグである。

例が、

<ul>
<li><a href="shuuhen.html">乃木坂の周辺</a>
<ol>・・・ここから項目の項目
<li><a href="shuuhen.html#eki">乃木坂駅</a></li>
<li><a href="shuuhen.html#kouen">乃木公園</a></li>
</ol>・・・ここで、項目の項目の終わり
</li>
<li><a href="history.html">乃木坂の歴史</a></li>
<li><a href="about.html">このサイトと作者について</a></li>
</ul>

で、表示すると

  • 乃木坂の周辺
    1. 乃木坂駅
    2. 乃木公園
  • 乃木坂の歴史
  • このサイトと作者について

になる

リストにスタイルのCSS設定 WEBサイト作成術 P238~244

CSSで設定する。タグは下記参照

/*ここからリストに関する設定項目*/
/*ul liの設定(箇条書きリストの中の行項目の設定)*/・・・liだけで設定すると、olタグのliタグにも同じ設定になるため。
ul li{
list-style-image : url("img/point.png");。・・・箇条書きのマークに画像を使う設定をかけている。
}

/*ol liの設定(番号付きリストの中の行項目の設定)*/・・・liだけで設定すると、ulタグのliタグにも同じ設定になるため。
ol li{
list-style-image : none;・・・ここでは、上で行った設定が反映されてしまうので、画像を使う設定を解除する設定に変更。
list-style-type : lower-roman;・・・ここで、リストの先頭の種類を小文字のローマ字の設定に変更
}

/*dtの設定(リスト項目名の設定)*/
dt {
float : left;・・・ここでリストの項目名は左に回りこむ設定に変更
}

/*ddの設定(リストの内容項目の設定)*/
dd {
margin : 0 7em;・・・ここで、文字間の余白を縦・・・0 横・・・7文字に設定なので、項目名リストは改行されずに表示される設定に変更
}
/*ここまでがリスト項目の設定要素*/

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科12日目

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

感想

今日は昨日に引き続き、リンクの設定と画像の設定、表の設定をやった。

この部分に関しては、WEBページを作成するにはかなり使うので抑えておきたいポイントである。

1コマ目

リンクスポットの見栄えを調整する。 WEBサイト作成術 P160~163

アンカーの設定をするタグは a { }

a {
text-decoration : none;・・・ここでは、noneでなにも装飾しないように設定する。
}

アンカーのまだクリックされていないリンクスポットの設定 a:link {}で囲った部分で設定する。

a:link {
color : #170;・・・色を#170に設定
text-decoration : underline;・・・underlineで文字に下線を引いて表示する。
}

アンカーのクリック済みのリンクスポットの設定要素 a:visited {}で囲った部分で設定する。

a:visited {
color : #3a0;・・・カラーを#3a0に設定する。
}

アンカーのリンクスポットにマウスポインタが置かれたときの設定要素 a:hover {}で囲った部分で設定する。

a:hover {
color : #fff;・・・カラーを#fffに設定
background-color : #f80;・・・背景を#f80に設定
font-weight : bold;・・・文字を太字に設定
}

アンカーで選択中のリンクスポットの設定要素  a:active {}で囲った部分で設定する。

a:active {
color : #f00;・・・色を#f00に指定
background-color : #ffa;・・・背景を#ffaに設定
font-weight : bold;・・・文字を太字に設定
border-style : solid;・・・枠線の種類を1本線で表示する。
border-with : 1px;・・・枠線の太さを 1pxに設定
border-color : #f00;・・・枠色を#f00に設定
}

2コマ目

ページ内へのリンクを張る WEBサイト作成術 P164~166

ページ内にリンクを張る場合の時も、<a href="リンクの挿入"></a>タグを使用する。

飛ばしたいページのタグの部分にIDタグを挿入する。

<h2 id="eki">乃木坂駅</h2>・・・ id="eki"の部分がアンカー部分

飛ばしたいページのタグに飛ぶように、<a href="リンクの挿入"></a>で設定する。

<a href="#eki">乃木坂駅</a>・・・#ekiが飛ばしたいアンカーの名前 ※アンカーの名前の前に必ず#をつける。

別ページの特定箇所にリンクを張る。 WEBサイト作成術 P167~168

ジャンプさせたいページのリンクを指定して、その後にアンカーポイントを記入する。

例 <a href="shuuhen.html#eki">乃木坂駅</a>別ページから、shuuhen.htmlにリンクさせ、さらに#ekiでekiのIDで指定した場所を表示する。

※リンク先のファイルが長い場合は、普通に最初の画面が表示される時があるので、注意すること。

3コマ目

画像を表示する。 WEBサイト作成術 P174~182

イメージタグを使用する。

<img src="ここに、画像のファイルのパスを記述する。" alt="ここには、画像の代替え文字を記入"width="幅の数値を記述"height="高さの数値を記述">

altは必ず付けること、ブラウザ毎に画像を表示させない設定にしてる人がいるため、または目が見えない人にも何の写真なのか伝えるため。

ユニバーサルデザインを考慮する。

JPEG・・・写真の時に使用。

GIF・・・文字等に使用・アニメーション等もGIFで作る。

PNG・・・文字・イラスト等に使用。 GIFの特許権のためPNGができた。

行内の画像の表示位置の指定(一行の垂直位置の指定)。 WEBサイト作成術 P183~185

vertical-alignタグを使用する。

/*imgタグの部分で、topクラスの要素*/
img.top{
vertical-align : middle;・・・この部分で垂直位置の指定を行うmiddleなので、真ん中に表示設定の記述
}

他の指定タグが、

top・・・上の部分に合わせて表示される。

middle・・・真ん中の部分に合わせて表示される。

baseline・・・下の部分に合わせて表示される。・・・インターネットエクスプローラーは対応していない。

4コマ目

画像の左右の端に文字列を表示する。 WEBサイト作成術 P186~191

CSSにfloatで回り込みの設定をする。

/*imgタグの部分で、.honbun_photoクラスの要素*/
img.honbun_photo {
float : right;・・・この部分で回り込みの設定をする。 ここではrightなので右に回り込みの設定をしている。
}

CSSで回り込みの設定の取り消しをする場合clearで指定する、

/*contentsクラスの要素*/
.contents {
background-color : #fb5・・・背景の色設定;
padding : 0.5em;・・・文字の間隔の設定
margin : 0;・・・ボックスの間隔指定
border-style : solid;・・・枠線の種類の設定
border-with : 3px;・・・枠線の太さの設定
border-color : #350;・・・枠線の色の設定
clear : both;・・・この部分で、回り込みの取り消しをする。 ここでは、bothなので、右・左の要素両方で取り消しの設定をしている。
}

画像が、段落や枠線等の要素に対しては画像を無視して表示(枠線や段落は後ろに回りこんでしまう)してしまうので、タグに対して、ボックスの高さを指定する設定をする。 

/*photoクラスの要素*/・・・このクラスで、高さのボックスを指定している。
.photo {
height : 180px;・・・ここで高さを180ピクセルで指定している。
}

<p class="photo honbun">・・・ここで、photoクラスの設定とhonbunクラスの設定を指定している。
<img src="img/sekihi.jpg" alt="乃木坂の石碑" width="240" height="180" class="honbun_photo">現在の乃木坂は、かつて「幽霊坂」と呼ばれていました。その坂の途中には乃木希典(のぎまれすけ)の邸宅があり、彼の死後に「乃木坂」と改称されました。
</p>

このタグの中でクラスhonbun_photoで設定した回り込みが適用している。

ここで、バグ発見それは・・・

インターネットエクスプローラ6.0では、photoで指定しボックスの高さの指定で、180pxで指定したのですが、この数値を低く設定しても見栄えが変わりませんでした。恐らく、写真の高さの要素が選択されたと思われます。

</div>
<p class="contents">

このタグにも回り込み設定が掛かっているので、contentsのクラスで、回り込みの設定を解除している。

<a href="index.html">トップページへ</a>
</p>

5コマ目

画像にリンクを張るには WEBサイト作成術 P192~193

<a href="リンクの挿入"></a>タグで、<img src="" alt="" width="" height="">タグを囲むと画像にリンクを張ることができる。

例<a href="mailto:username@xknouwledge.co.jp"><img src="img/mail.png" alt="作者へメール" width="60" height="30"></a>

ここで、画像にボーダーラインの表示をしないように設定するため、CSSで設定する。

/*imgタグの部分で、リンククラスの要素*/
img.link {
border : none;・・・この部分でリンクの画像に、枠線を表示させないように設定している。
}

よって記述するタグは、イメージタグにlinkクラスの指定をしている。

<a href="mailto:username@xknouwledge.co.jp"><img src="img/mail.png" alt="作者へメール" width="60" height="30" class="link"></a>

6コマ目

背景に画像を張り込む WEBサイト作成術 P194~202

背景設定はCSSで、bodyタグにて設定をする。

/*bodyの要素*/
body{
background-color : #bf8;・・・背景色の設定
background-image : url("img/back.png");・・・背景画像の指定の設定。 img/back.pngが画像のパス
background-position : right;・・・背景画像の表示位置の指定の設定。 ここでは、右側に設定する。
background-repeat : repeat-y;・・・背景画像の繰り返しの設定。・・・ここでは、Y軸に繰り返し表示する設定。
}

背景画像の呼び込み

background-image : url("ここに画像のパスを指定");

背景画像の表示位置の設定

background-position : ここに位置を設定;

設定は、水平位置では、left・right・center 垂直位置は、top・center・bottom

背景画像の繰り返しの設定

background-repeat : ここに、繰り返し範囲の指定設定;

設定は、repeatが縦横繰り返す。 repeat-x X軸だけ繰り返す。 repeat-y Y軸だけ繰り返す。 no-repeat 繰り返さずに、一箇所だけ表示

表を作るには、WEBサイト作成術 P204~207

<table></table>タグを使います。

表タグで全体の枠を作成します。

<tr></tr>タグで行を作成します。

<td></td>タグで、一つのセルを作ります。

<th></th>タグは、同じセルなのですが、見出しとして定義します。

例・・・ここでは、行が5行で、列が2列の表が表示されます。

<table>
<tr>
<th>出口1</th><td>乃木坂の途中、乃木公園や乃木神社への出口です。</td>
</tr>
<tr>
<th>出口2</th><td>出口1の道路を挟んだ反対側に出ます。</td>
</tr>
<tr>
<th>出口3</th><td>エスカレーターを上がって、外苑東通りに出ます。</td>
</tr>
<tr>
<th>出口4</th><td>健保会館(はあといん乃木坂)の入口に出られます。</td>
</tr>
<tr>
<th>出口5</th><td>出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。</td>
</tr>
</table>

下記のように表示されます。

出口1乃木坂の途中、乃木公園や乃木神社への出口です。
出口2出口1の道路を挟んだ反対側に出ます。
出口3エスカレーターを上がって、外苑東通りに出ます。
出口4健保会館(はあといん乃木坂)の入口に出られます。
出口5出口1~4とはホームの反対側にあり、青山霊園の方面に出ます。

出口1~5が見出しセルの<th></th>で書かれており、その詳細情報が、<td></td>で表示されています。

表にスタイルを適用させる WEBサイト作成術 P208~212

ここではスタイルを適用させるために、CSSにこうやって記述した。

/*table要素*/
table{・・・この部分がテーブル全体に掛かる要素
margin : auto;・・・ブロック間の余白の設定。ここでは、autoなので、自動で余白が設定されている。
border-style : solid;・・・枠線の種類の設定。ここでは、solidなので、1本線の設定
border-with : 2px;・・・枠線の太さの設定。ここでは、なので、2pxに設定されている。
border-color : #000;・・・枠線色設定。ここでは、#000なので黒色に設定されている。
border-collapse : collapse;・・・表のセルとセルの隙間の設定。ここでは、collapseなので、セルとの隙間を開けない設定
width : 75%;・・・全体の幅の設定。ここでは75%なので、全体の幅の75%で表示される。
}
/*th,td要素*/
th,td{・・・この部分で、テーブルのセルと見出しセルの設定要素
height : 3em;・・・高さの設定。ここでは、3em;なので3文字分の高さを開ける設定。
border-style : solid;・・・枠線の種類の設定。ここでは、solidなので1本線に設定。
border-with : 1px;・・・枠線の太さの設定。ここでは、1pxなので太さが1ピクセルの枠線の表示設定
padding : 0.5em;文字間の余白設定。ここでは、0.5emなので0.5文字分の余白が文字とセルの間に設定される。
}

/*th要素*/
th{・・・見出しセルの設定
background-color : #fb5;・・・背景設定。ここでは色は#fb5(オレンジっぽい色)で設定されている。
width : 4em;・・・幅の設定。ここでは、4emなので4文字分の幅が取られる。
}

/*td要素*/
td{セルの設定要素
vertical-align : top;・・・文字の垂直位置設定。ここでは、top要素に設定されているので、上に揃う。
}

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科11日目

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

感想

今日は、CSSとHTMLのタグの学習だった。

Dreamweaveがないと、大変なのを昨日に引き続き身をもって体験した。

1コマ目

昨日の補足・・・背景について

bgcolorはJavaScriptでの背景設定

backround-colorはCSSでの背景設定

フォルダ・ファイルについて

フォルダ・ファイルの構成,名前は正確に。

ファイルの汎用性を考えて、半角でつけるように気をつける。
※半角英数字は文字コードが共通。

拡張子について

.HTML採用すること

UNIX(WEBサーバーのOSのほとんどがこのUNIX)でのWEBページの拡張子は.HTML。

世界標準は.HTML

ウィンドウズのOSのみ、.HTMでWEBページを表示している。

.jpeg・.jpgファイルも同様に世界標準は.jpeg

ただし、画像関係のファイルについてはそんなに気をつけなくてもよい。

HTML・CSSのタグの勉強続き

セレクタとは?

この{と}で囲まれた部分をセレクタとゆう

h{
background-color : #350;
color : #fff;
font-size : 3em;
}

文字の周囲に余白を指定する。 WEBサイト作成術 P104~107

タグはpadding :で、文字の周りの部分の余白の範囲を設定する。

/*クラスの要素*/
.head{
background-color : #fff;
padding : 3em;・・・この部分にで文字も回りの余白を設定の記述
}

2コマ目

ブロックの周囲の余白の設定 WEBサイト作成術 P108~110

タグはmargin : で、ブロックの周りの部分に余白の範囲を設定する。

/*クラスの要素*/
.contents{
background-color : #fb5;
padding : 0.5em;
margin : 0;・・・この部分がブロックの余白の設定の記述
}

ブロックに枠線を引く WEBサイト作成術 P111~117

タグはborderタグで、ブロックの周りの部分に枠線が入る。

/*クラスの要素*/
.contents{
background-color : #fb5;
padding : 0.5em;
margin : 0;
border-style : solid;・・・この部分が枠線の種類の記述
border-with : 3px;・・・この部分が枠線の太さの記述
border-color : #350;・・・この部分が枠線の色の記述
}

場所を指定して設定を記述する場合

padding margin borderので設定できます。区切りは、半角スペースを入れる。

例・・・padding : 0.5em 1.5em 2.5em 3.5em;と記述すると、上に0.5em、右に1.5em、下に2.5em、左に3.5emが余白ができるとゆう意味。

4箇所記述した場合、

: 1番目は上の間隔 二番目は右の間隔 三番目は下の間隔 四番目は左の間隔 ;

3箇所記述した場合

: 1番目は上の間隔 二番目は右と左の間隔 三番目は下の間隔;

2箇所記述した場合

: 1番目は上と下の間隔 二番目は右と左の間隔;

1箇所記述した場合

: 1番目は全体の間隔;

または、上 -top,下 -bottom,右 -right,左 -leftと個別に設定して入力することも可能。

margin-right :3em・・・こうすると、右部分の余白の設定が3em分広がるような設定になります。

行間を指定する WEBサイト作成術 P118~122

line-height : タグで指定する。

/*クラスの要素*/
.honbun{
background-color : #fff;
line-height : 1.5;・・・この部分が行間の設定記述
}

3コマ目

一文字目に変化をつけるには WEBサイト作成術 P123~125

一文字目の変化

first-letterタグを使用する。

/*h2の最初の1文字の要素*/
h2:first-letter {・・・この部分に指定する。ただし終わりに半角スペースを必ず入れる。(インターネットエクスプローラーのバグ対策)
color : #fff;
font-size : 1.3em;
}

インデント(文字間)をつけるには?

text-indent : タグを使用する。

/*クラスの要素*/
.honbun{
background-color : #fff;
line-height : 1.5;
text-indent : 1em・・・この部分がインデント
}

文字の表示位置の設定 WEBサイト作成術 P126~128

text-align : タグを使用

/*h1の要素*/
h1{
background-color : #350;
color : #fff;
font-size : 3em;
margin : 0;
text-align : center・・・この部分が表示位置の設定
}

right・・・右寄せ

left・・・左寄せ

center・・・中央寄せ

文字装飾の設定 WEBサイト作成術 P129~138

文字の太さの設定

font-weight :タグを使用

表示指定が、bold normal 100~900までの数値 bolder lighter

font : の字体(イタリック体)の設定

font-style : タグを使用

表示指定が、normal italic oblique

フォントの種類かフォント名の設定

font-family : タグを使用

表示指定が、serif等

文字の間隔の設定

letter-spacing : タグを使用

表示指示がem px pt

CSSはこんな感じ

/*h2の最初の1文字の要素*/
h2:first-letter {
color : #fff;
font-size : 1.3em;
font-style : italic; ・・・ここが、フォントの字体の設定の記述
font-family : serif;・・・ここが、フォントの種類またはフォント名の設定の記述
}
/*h2の要素*/
h2{
background-color : #fb5;
font-size : 1.2em;
letter-spacing : 0.5em;・・・ここが、文字の間隔の設定の記述
}
/*クラスの要素*/
.head{
background-color : #fff;
padding : 3em;
margin : 0;
font-weight : bold;・・・ここが文字の太さの設定の記述
}

4コマ目

スタイルを指定する。 WEBサイト作成術 P139~144

<div></div>タグで記述する。

このタグはブロックの範囲を指定するので、タグが入っていてもOK

<span></span>タグで記述する。

はタグの一部(インライン)の範囲を指定してあげる。

がある。

リンクを張る WEBサイト作成術 P146~154

href・・・ハイパーリファレンスの略

<a href="リンクの名前"></a>のタグで記述する。

別のフォルダ上にあるリンクについては、 WEBサイト作成術 P152~153にて記述してある。

<a href="○○○/リンクの名前"></a>と記述すると、親ファイルの中の○○○フォルダに移動する。

<a href="○○○/△△△/リンクの名前"></a>と記述すると、親フォルダの中の○○○フォルダさらにその中の△△△フォルダに移動する。

<a href="../リンクの名前"></a>と記述すると親フォルダの前の階層のフォルダに移動する。

<a href="../../リンクの名前"></a>と記述するた親フォルダの前の前の階層フォルダに移動する。

/○○○と記述しないように注意!!

これはWEBサーバーの初めの画面に戻ってそこから、○○○のフォルダに移動する命令になるので注意!!

5コマ目

実際に異なるフォルダへリンクしてみよう。

異なるフォルダにHTMLファイルを移動した時には今まで、リンクしたファイルのリンク切れを起こすので、すべてのリンクに対して変更をする必要がある。

これは、HTMLファイル・CSSファイル両方のファイルが必要である。

6コマ目

電子メールのリンクを張る WEBサイト作成術 P155~159

<a href="リンクの挿入"></a>タグの中に

mailto:メールアドレスを入れる。

つまり<a href="mailto:メールアドレス"></a>となる。

 

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

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

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科10日目

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

感想

今日からは自分でHTMLタグの記述とCSSの設定をする学習に移った。

いかにDreamweaveとゆうソフトがありがたいのかを今日は身をもって体験した。

1コマ目

簡単な先生の自己紹介・・・先生の担当はWEBのネットワーク関連とHTML・CSSが担当分野だそうだ。

この3日間で使用する教科書  HTMLとスタイルシートによるWEBサイト作成術

HTMLとは?

WEBページの記述言語・・・これは英語や日本ごのように、コンピューターがわかるようにしたいわばコンピューター語です。

おもに、ページの構文(内容)などを記述する言語です。

CSSとは?

書式の指定する言語

これは、HTMLで記述した文章の書式(文字の大きさや字体など)を指定するために使います。

最近では、見栄えのデザインに使用している。

HTMLでは、構文CSSでデザインを決める感じかな。

サイト作りのコツ WEBサイト作成術 P24~30

サイトを作るために、自分の気になっている内容などを見つける。

存在するサイトを調べて「まだないサイト」をみつける

2コマ目

サイトの構成を考える WEBサイト作成術 P31~36

ブレインストーミング・・・とりあえず思い当たる内容を挙げていく。

フォルダ分け・・・思いついた内容をフォルダごとに整理する。

見やすいサイト名(英語などわかりにくいタイトルをつけない)・・・タイトルを見てなにについて書かれているサイトなのかわかりやすくする。

WEBサイトを作るのに必要なソフト WEBサイト作成術 P42~45

WEBブラウザ・・・インターネットを見るためのソフト。 例、インターネットエクスプローラ・ファイアーフォックス等。

テキストエディタ・・・HTMLを記述できるソフトで、windowsではメモ帳で、WEBデザインソフトでは、Dreamweave等がある。

グラフィックソフト・・・画像を加工するソフトで、windowsではペイントWEBデザインソフトでは、Fireworks等がある。

FTPソフト・・・WEBページをネットワーク上のサーバーにアップロードするためのソフトで、代表的なのが、フリーソフトのFFFTPがある。

ページの作成 WEBサイト作成術 P46~49

今回作成に使用したソフトは、フリーソフトのTeraPadとゆうテキストエディタを使用しました。

windowsメモ帳でも作成できるのですが、フリーソフトのTeraPadのほうが使いがってがよいので、作成しました。

ページの雛形の作成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">・・・現在のHTMLのバージョンの記述
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">・・・メタタグでこの部分は文字コードの記述
     <title>タイトル</title>・・・タイトルの記述
   </head>
   <body>
    <p>ここに段落を挿入</p>・・・ここから本文
   </body>
</html>

HTMLの構文を作成する際に、決まった文章を記述する必要があるので、これの作成を行いました。

以降HTMLのデータを作成する場合はこの雛形を利用して作成します。

3コマ目

メタダグ WEBサイト作成術 P58~60

メタタグとは実際にはWEBページ上では表示されませんが、HTMLのより詳細の情報をより的確に指示するために使用します。

どんなコンピューターの環境でも文字が表示されるように、どの文字コードで書いてるか記述する。

文字コードにはいくつかの規格があり現在3種類の文字コードが広く使われている。

Shift-JIS・・・ウィンドウズ系のパソコンで広く使われている文字コード

EUC・・・UNIXやMACなどのOSで広く使われている文字コード

Unicode(UTF-8)・・・世界共通の文字コードにしようと最近広まってきた文字コード

文字コードとは、コンピュータで認識文字を認識するためにあらかじめ決められた数字のコード

Aは65番等決められている。

これが、規格によって異なる。

なので、インターネットのソースを表示すると、時々文字化けするソースがでてくるのもこのためである。

HTMLのルール WEBサイト作成術 P63~67

<!--コメント-->で囲むと、コメントになり、ブラウザ上では表示されないので、メモ(ここに何を表示しているか等)を入れるとソースがわかりやすくなる。

タグの中にはブラウザによっては対応していないタグがあり、対応していないタグは無視して表示される。

4コマ目

トップページの作成 WEBサイト作成術 P70~76

トップページは必ずindex.htmlにする。

半角スペースの入力はほとんどブラウザで表示されない。

使用タグ一覧

・・・段落

br・・・改行

hr・・・水平線

見出しを作るには WEBサイト作成術 P77~80

見出しにはh1~h6までレベルがある。

1が大見出しで6にいくにつれて小見出しになっていく。

文字の表示の大きさは各ブラウザによって異なる。

スタイルシートを作成・保存 WEBサイト作成術 P82~P86

スタイルシートの記述はこんな感じ

/*bodyの要素*/・・・/*~*/で囲った部分はコメントなので、表記されない
body{
background-color : #bf8;・・・設定の終わりには必ずセミコロンを入れる
}
/*h1の要素*/
h1 {
background-color : #350;
color : #fff
}

background-colorは背景色の設定

colorは文字色設定

#bf8は色を16進数で表示されている。

1~9までは、1~9

10~16までは、a~fで表記されている。

色の指定順番は、左から赤・緑・青の順番である。

なので、#bf8は赤が11・緑が15・青が8なので、白色に近い黄緑色の設定となる。

5コマ目

CSSをindex.htmlにリンクさせる。 WEBサイト作成術 P85~86

index.htmlのヘッダタグの中に

<meta http-equiv="Content-Style-Type" content="text/css">・・・メタタグで、CSSの種類を設定する記述
<link rel="stylesheet" href="nogizaka.css" type="text/css">・・・CSSのリンクを張る記述

を入れる。

HTMLに直接CSSを埋め込む WEBサイト作成術 P94

ヘッダに直接

<style type="text/css">
h1 {
background-color : #000;
color : #fff
}
</style>

のように<style type="text/css"></style>の間にCSSを記述する方法

タグの中で直接指定する方法 WEBサイト作成術 P94

<h1 style="background-color : #00f">
乃木坂周辺案内へようこそ
</h1>

のように記述する。

CSSの使い勝手 WEBサイト作成術 P95

CSSファイルを作成して使用すると、1つのファイルで共有してページを作ることができるので、統一感ができてくる。

その中でも、個別に設定したい時などは、直接タグを記述すると便利

なので、全体のページレイアウトはCSSファイル・ある一部分の装飾は直接CSSを記述する方法が便利。

CSSファイルの2つ以上のリンクについて WEBサイト作成術 P88~89

同じ部分での書式設定があった場合、優先順位は、後にリンクされたCSSの方が優先される。

CSSファイルのコメントの入れ方 WEBサイト作成術 P93

/*と*/で囲まれた部分はCSSでコメント表示になるので、反映されない。

6コマ目

CSSファイルのクラス設定 WEBサイト作成術 P96~97

/*クラスの要素*/
.head{・・・クラスの名前は任意。
background-color : #fff;
}
/*クラスの要素*/
.contents{・・・クラスの名前の前にピリオドをつける。
background-color : #fb5;
}
をCSSファイルを記述

index.htmlの記述は、

<p class="head">・・・クラスの名前
「乃木坂周辺案内」は、乃木坂の周りを紹介するサイトです。
</p>
<p class="contents">・・・ピリオドは外す
乃木坂の周辺・・・乃木坂駅と乃木公園<br>
乃木坂の歴史<br>
このサイトと作者について
</p>

と変更するとクラスを設定すると反映される。

クラス指定の仕方 WEBサイト作成術 P97~99

タグの指定方法が様々あるので、教科書にわかり易く記述してあるので参照する。

クラスの名前は、内容の意味から作るとわかりやすくなる。

文字の大きさを指定する。 WEBサイト作成術 P100~103

h1{
background-color : #350;
color : #fff;
font-size : 3em;・・・ここがフォントサイズの設定の記述
}

文字の大きさ記述の設定は教科書 WEBサイト作成術 P101を参考にしてください。

種類はem・%・px・pt等がある。

px・ptはサイズがフォントサイズの大きさが変わらなくなるので、注意

 

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

職業訓練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デザインで同じように作成していきたい。

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

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

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

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

使用教科書

DW&FWトレーニングブックFWスーパーリファレンス

今日の大まかな内容

今日は、Fireworksは、写真の切り抜きについて勉強しました。

ようは、写真の一部の素材を切り出したり、写真を合成する時に使う手法です。

Dreamweaverは、ソフトの基本的な使い方(CSSの使い方以外)を覚えました。

授業の内容

1コマ目

写真のトリミング DW&FWトレーニングブック P69~P73 FWスーパーリファレンス P106

コツ・・・被写体を効果的に見せるには、その周りの空間の見せ方を考える。

トリミングの種類

切り抜きツール・・・選択ツールの切り抜きツールを使用し、切り抜きをしたい部分を選択する。
※写真の一部分しか使用しない場合にしようする

書き出し領域ツール・・・選択ツールの書き出し領域ツールを使用し、切り抜きしたい部分を選択し、その領域を新たなデータとして書き出す。
※元の写真を加工したくない場合、この方法で新たに画像を書き出して切り抜く。

ペンツールを使用して切り抜く方法・・・
※画像の被写体だけを切り出して切り抜く場合にしようします。画像の合成等に使用するテクニックです。

2コマ目

いろいろなマスクの方法 FWスーパーリファレンス P103~P107

マスクとは、自分が表示させてい部分以外を見えなくさせる処理で、いくつかのやりかたがあります。

基本的には見え方は同じなので、この3つのやり方で、シチュエーションに合った方法を用いる。

ベクターツールで使用した場合ベクターツール部分に明暗をつけると透過処理がかかる。
※黒に近づくと透過処理が強くなり、白に近づくと透過処理が弱くなる。

マスクとしてグループ化する方法は3種類

ベクターツール選択した部分と画像を合体させて表示させる方法。

選択した部分が画像より下にあると切り抜きしたい部分が無くなるので注意

内部にペーストする方法

ベクターツールで選択した部分に元の切り取った画像を編集の内部にペーストを選択する方法

選択ツールを使用してマスクをかける方法

これは主に自動選択ツールで選択した時に使用する方法です。

3コマ目

レイヤの基本的な操作 FWスーパーリファレンス P92~P98

レイヤーとはオブジェクト(図形や写真等の素材)が格項目ごとに階層状に分かれて表示されているもの。

Fireworksで制作する場合に覚えておいたほうが役に立つ。

レイヤーの非表示

今まで作った素材なのかで一時的に見えなくして作業をする場合使用する。

レイヤーパレットから目のマークを操作する。

新規レイヤーの作成

これはパソコンのデータをフォルダごとにまとめるように、まとまった素材(キャラクター等)とは別に新たに素材(他のキャラクターや背景等)を作成する際に使用すると便利です。

レイヤーパレットの下の方にあるホルダーのアイコンで作れる。

レイヤーに名前をつける

こらは素材に名前をつけていたほうがわかり易い時にしようします。レイヤーの数が多くなってきた場合につけていた方がわかり易い。

レイヤーパレットのレイヤー名をダブルクリックをすると変えることができる。

レイヤーにロックをかける

背景などの動かしたくないレイヤーを動かさないように設定することができる。

レイヤーパレットのエンピツマークをクリックして鍵マークにする。

レイヤーごとに削除する

作成していったが、必要がなくなった時にレイヤーごと削除することができる

レイヤーパレットの下の方にあるゴミ箱ボタンを消したいレイヤーを選択してクリックする。

地図の作成

地図制作の手順

道路を描く

①ベクター系ツールで道のりを描く

4コマ目

地図の作成続き 道路を描く

②アウトライン化

修正からパスの操作のアウトラインでアウトライン化する。

③パスの結合

修正からパスの結合→合体を選択

④色をつける

プロパティインセペクタから色を選択する。

線路の作成

①ベクター系ツールで路線を描く

②破線の設定

ストロークオプション→破線→詳細設定で設定

③線を重ねる

新たにせんを作成し、破線の線に重ねる。
※僕の場合、破線のパスをコピーしそれをアウトライン化してストロークで色をつけて重ねた。

課題で出された佐藤クリニックの地図の作成

このテクニックで課題でだされたものを作成

5コマ目

Dreamweaverでのページの作成

使用したテクニック

表の作成

ツールバー上にある表の作成から作成する。

表に見出しをつける

表の上段を選択し、プロパティインスペクタにあるヘッダにチェックマークを入れる。

表の幅を指定する。

テーブルタグを選択して、プロパティインスペクタから幅を指定する。

表の列を指定する。

列を指定して、プロパティインスペクタから幅を指定する。

セルの文字位置を設定する。

セルを選択し、プロパティインスペクタから縦・横の位置を指定する。

箇条書き

箇条書きしたい段落<P>を選択し、プロパティインスペクタから箇条書きボタンをクリックする。

下線のつけ方

下線をつけたい文章を選択して、テキスト→スタイル→アンダーラインから指定する。

見出し

見出しにしたい文章を指定し、プロパティインスペクタからフォーマットで見出しを選択する。

文章をページの真ん中にレイアウトする。

文章をテープルで囲い、それを中央揃えにする。

※テーブルに枠をつけると、枠がつくので注意

6コマ目

Dreamweaverで作成したWEBページを装飾しよう。

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

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

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

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

今日で、Fireworksの操作については大体教わり、一通りの画像処理はできるようになりました。

1コマ目

ここでは、画像のデータの補正の仕方を練習しました。

DW&FWトレーニングブックFWスーパーリファレンス

●写真の修正 DW&FWトレーニングブック P50~P55

●簡単な写真の補正 DW&FWトレーニングブック P51~P52 FWスーパーリファレンス P189

●高度なカラー補正 DW&FWトレーニングブック P52~P55 FWスーパーリファレンス P187,P189

2コマ目

もっと簡単な写真の修正・・・自動レベル補正をかける。 DW&FWトレーニングブック P55 FWスーパーリファレンス P188

●画像の大きさを変える DW&FWトレーニングブック P61 FWスーパーリファレンス P185

画像を小さくなる場合アンシャープマスクをかける。 FWスーパーリファレンス P185
このフェクトは、画像の編集の最終工程で行うとよい。

●写真の部分修正 DW&FWトレーニングブック P56~P59

●赤目の修正 DW&FWトレーニングブック P57・FWスーパーリファレンス P185

これは、画像で目の部分が赤い部分の修正をする編集で、ビットマップツールの赤目補修ツールを使用します。

●汚れの除去 DW&FWトレーニングブック P58~P59

これは、画像の一部に汚れや傷がある時にそれを除去する作業で、ビットマップツールのスタンプツールと指先ツールを使用します。

3コマ目

●写真の最適化 DW&FWトレーニングブック P60~P65

これは、WEBページで使用する際に、表示速度を速めるために行います。

●イメージサイズの変更 DW&FWトレーニングブック P60

これはWEB上で、使う画像が実際の画像より小さい場合にのみ使用します。

小さい画像を大きくすると画像が荒くなるので、汚くなります。

また、小さくした後に、アンシャープマスクをかけるとよりきれいに見えます。

●パッチ処理による一括変換 DW&FWトレーニングブック P63~P65 FWスーパーリファレンス P291~P295

これは、同じような画像処理を行うデータが複数存在する場合に、一括で同じ作業を繰り返し行う時に使用します。

●一枚の写真で圧縮率を変える DW&FWトレーニングブック P66~P68・FWスーパーリファレンス P176~177

●JPEG圧縮機能 DW&FWトレーニングブック P67~P68

これは、写真の画像の一部分の圧縮比を下げないで、周りの部分だけ、圧縮率を落とすために使用します。

4コマ目

●野菜で、顔を作成してみよう。

いままで練習した、選択ツール・拡大縮小・コピー&ペースト等を使って、顔を作る。

ファイアーワークスの総合演習

5コマ目

Dreamweaverで背景を設定しよう。 DW&FWトレーニングブック P78~P82

※背景にイメージを表示する時の注意点は、できるだけファイルサイズの小さいものにすること。

※背景なので、地味で薄い色にする。

やりかたが2種類あって、ページプロティから設定する方法と、CSSでの設定方法があります。

CSSでの設定の場合は、背景を繰り返し表示を行うか(Y軸でのリピート、X軸でのリピート)繰り返し表示を行わない等の設定ができる。

大きな画像を1つだけ表示させる場合等はCSSで設定を行う。

※最近はCSSでのページデザインが主流になってきている。

6コマ目

これまで習った部分の復習

ここまでやってきて、実感としてはFireworksの操作法は一通りマスターできたように思える。

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

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

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

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

今日の内容

1コマ目

今日は最初Fireworksでカエルのイラストを書くことになりました。

ビットマップグラフィックとベクターグラッフィックの違い

ビットマップグラフィックは、ピクセル(ドット)と呼ばれ小さな四角の集合でかかれたイラストです。
拡大していくと画像が荒くなってしまいます。

ベクターグラッフィックは、イメージのポイントとポイントの間を曲線で結んでかかれたイラストです。
拡大しても画像が荒れにくくなっています。

ドット絵(ビットマップグラフィック)・・・ピットマップツールを使用します。 DW&FWトレーニングブック P34~P36

ここで、ドットを使いカエルのドット絵を描きました。

2コマ目

イラスト絵(ベクターグラフィック)・・・ベクターツールを使用します。 DW&FWトレーニングブック P37~41

ここで、ベクター線や図形を使いかえるを描きました。

3コマ目

ボタンの作り方 DW&FWトレーニングブック P42~P49

4コマ目

ボタンの作り方で、ロールオーバーの別方法

  • フレームパレットを使う方法
  • ボタンをフィットさせる。
  • ①フレームパレットを使い、フレームを複製する
  • ②2番目のフレームを使いボタンに色等の変化をつける。
  • ④スライスツールを使い、ボタン全体を選択する。
  • ⑤書き出しをする。

5コマ目

透過GIFの作成 DW&FWトレーニングブック P74~P77
アンチエイリアス処理を行っていて、透明処理をする場合、背景色に近い色で透明化処理を行う。

6コマ目

Dreamweaverの作り方

  • WEBページで、透過処理を行った画像を掲載したサイトを作る。
  • テキストを入力
  • テーブルを作成する。
  • テーブルの中にイメージを挿入する。
  • テーブルに背景を設定する。

今日は、Fireworksでイラストを作成するのと、Dreamweaverのちょっとした使い方を行いました。

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

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

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

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

今日からいよいよ本格的な授業がスタートしました。

今日はパソコンでの実演だったので、あっとゆうまに時間が過ぎていきましたね。

学校教材は、Dreamweaver&Fireworksトレーニングブック・Fireworksスーパーリファレンス

楽天ブックスで確認したい方はDW&FWトレーニングブックFWスーパーリファレンスをクリックしてみて下さい。

内容

  • 1コマ目 ヤフーメールアドレスの取得
  • 2コマ目 必要なソフトの確認とダウンロード
  • 3コマ目 Fireworksの操作方①
  • 4コマ目 Fireworksの操作方②
  • 5コマ目 Fireworksの操作方③
  • 6コマ目 Fireworksの操作方④

1コマ目 ヤフーメールアドレスの取得

職業訓練をしてる間のメールアドレスを取得するために、全員でヤフーのメールアドレスを取得しました。

2コマ目 必要なソフトの確認とダウンロード

WEB制作を行うために必要なソフトの紹介とそのソフトのダウンロード

  1. Dreamweaver
    このソフトはアドビから発売されている、WEB制作業界の定番ツールといっても過言ではありません。
    WEB制作ソフトで、詳しくはAdobe Dreamweaverで確認してみて下さい。
  2. Fireworks
    このソフトもDreamweaver同様アドビから発売されており、WEB制作業界の定番ツールといっても過言ではありません。
    WEB用のグラッフィックの編集及び作成ソフトで、詳しくはAdobe Fireworksで確認してみて下さい。
  3. Flash
    このソフトはフラッシュの作成ソフトで、同じくWEB制作業界の定番のソフトです。
    詳しくはAdobe Flashで確認してみて下さい。
  4. Acrobat
    このソフトはPDFとゆうデータを見る時に使用するソフトで誰でも無料でダウンロードできます。
    ダウンロードはAdobe Readerでダウンロードしてみて下さい。
  5. FFFTP
    このソフトはWEBページを作成してもサーバーにアプロードしないとインターネット上では公開されません。
    FFFTPはサーバーにデータをアップロードするためのソフトです。
    フリーソフトでダウンロードできます。FFFTPで確認してみて下さい。
  6. TeraPad
    テキストエディターでフリーソフトとしてインターネットでダウンロードできます。
    TeraPadで確認してみて下さい。
  7. +Lhaca
    解凍ソフトで、圧縮ファイルを解凍します。
    フリーソフトで+Lhacaで確認してみて下さい。

3コマ目 Dreamweaverの設定とFireworksの操作方①

Dreamweaverの設定
・サンプルデータをドリームウィバーに設定するために、DW&FWトレーニングブックのP23~P24の手順をした。

Fireworksの操作方①
・解像度について・・・FWスーパーリファレンス P25~P26
・Fireworksの画面の見方・・・FWスーパーリファレンス P39
・Fireworksのズームツールの使い方・・・FWスーパーリファレンス P40~P41

4コマ目 Fireworksの操作方②

・Fireworksで図形ツールの作り方・・・FWスーパーリファレンス P61~P62
・Fireworksで直線ツールの使い方・・・FWスーパーリファレンス P58
・Fireworksでペンツールの使い方・・・FWスーパーリファレンス P59

5コマ目 Fireworksの操作方③

・グリット線の表示の仕方・・・FWスーパーリファレンス P51
・ペンツールで閉じた図形を描く・・・FWスーパーリファレンス P59
・ペンツールで曲線を描く・・・FWスーパーリファレンス P59~P60
・ペンツールでらくだのコブを描く・・・FWスーパーリファレンス P60
・ダイレクト選択ツールでポイントの選択と移動・・・FWスーパーリファレンス P79
・オブジェクトを他の場所にコピーする・・・FWスーパーリファレンス P77
・オブジェクト移動・・・FWスーパーリファレンス P77
・文字を作る・・・DW&FWトレーニングブック P26~P27
・ロゴの作成・・・DW&FWトレーニングブック P28

6コマ目 Fireworksの操作方④

・ロゴの作成の塗りカラーの設定・・・DW&FWトレーニングブック P29
・ロゴの作成のストロークカラーの設定・・・DW&FWトレーニングブック P30
・ロゴのエフェクト効果・・・DW&FWトレーニングブック P31
・エフェクト効果・・・FWスーパーリファレンス P141~P147
・オブジェクトの合体・・・FWスーパーリファレンス P167~P168
・最後総合演習で、エンピツのグラフィックとエンピツのグラフィックの作成

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

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

  1. トップ
  2. WEBクリエーターへの道
  3. 職業訓練WEBクリエーター科4日目

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

今日の学校の内容はざっとこんな感じです。

  • 若年者をとりまく就職の現状
  • キャリア・インサイト
  • 面接

若年者をとりまく就職の現状

働き方の変化

  1. 終身雇用制・年功序列の崩壊
  2. 技術革新の進展
  3. 働く側の意識の変化(就職意識の変化)
  4. 多様化する就業形態
  5. 少子高齢化社会へ突入

1.終身雇用制・年功序列の崩壊

  • 不況のため人件費を抑える必要がある。
  • 必要な時必要なぶんだけ人材を確保(オンデマンド化)が進んでいる。

2.技術革新の進展

  • ITの進展により求められる人材(パソコンのスキル)が変化している。
  • オンラインショップでの商売

3.働く側の意識の変化(就職意識の変化)

  • 正社員が減ってきた(雇用形態の変化)
  • 自分の技術力を上げるため転職

4.多様化する就業形態

  • 正社員・・・企業が安定して確保。
  • 契約社員・・・必要なときに必要な技術力や能力を持った人材を採用する。
  • 派遣社員・・・人材派遣会社に登録し、契約した企業に期限付きで勤める。
  • フリーター・・・自由なアルバイト

キャリアインサイト

これは18歳から35歳つまり若年層を対象にコンピューターを使って自分で自分の適性を検査することができる。

キャリアインサイトのねらいは、「自分の個性は何か」「適性と職業の関係」「将来のキャリアプランを立てるポイントを見つける」ことをパソコンを使ってアンケートに答えていき自分のキャリアを見つける。

面接

  1. 面接の流れ
  2. 企業側の選択基準
  3. 面接の準備
  4. 面接前の注意事項
  5. 面接中の注意事項
  6. 面接後の注意事項

1.面接の流れ

  • 受付訪問・待機
    10分前には到着し、受付を済ませる。
  • 呼び出し・入室
    ドアを二回ノックし、声が掛かってから入室する。
  • 挨拶
    一礼をしてから、自分の名前をはっきり述べる
    椅子には指示があってから「失礼します」と一言断って座る。
  • 面接
    自己紹介・自己PR・志望動機・退職理由・前職の職務内容・スキル・業績・性格・人生観・趣味・入社希望条件の確認
  • 締めくくり
    面接官「本日は長時間お疲れ様でした」○○日後ぐらいに連絡させていただきます。
  • 退室
    最後にあいさつ(面接を開いて頂いたことへの感謝)

2.企業側の選択基準

  • 意欲と熱意
    (この会社に入りたいという意欲)
  • 明るい
    (明朗)
  • 健康

3.面接の準備
  面接企業についての最低限頭に入れておく事

  1. 代表取締役社長名
  2. 業務内容
  3. 沿革(創設時期・現在までの経過)
  4. 経営理念

  必ず準備しておくべき回答項目

  1. 志望動機
  2. 退職理由
  3. 前職での業務内容
  4. セールスポイント
  5. 面接者からの質問

4.面接前の注意事項

  • 面接の時間に遅れないこと
  • 服装のチェック(上着のボタンは掛かっているか)
  • 持ち時間の間も姿勢をただしくして待つ
  • お茶を運んで来た女性社員にお礼を言う

5.面接中の注意事項

  • 質問の意味がわからない時は、質問の意味を確認する
  • 面接時間が長引きそうな時でも、時計を見ない
  • 会社案内を渡された時は必ず開いて目を通す
  • 聞かれていないことまで話過ぎない(無口も駄目)
  • 自分に都合の悪い質問でもはぐらかすことなく明確に答える
  • 前職の会社・上司の批判は避ける

6.面接後の注意事項

  • 終了後も面接中の意識を持つ(社長や面接官が見ているかもしれません)
    会社を出て直ぐくわえ煙草は禁止
    背広を肩にかけない
  • 面接に対する礼状(封書・葉書・Eメール)を出す
    他の人との差別化をはかるチャンス
    誤字・脱字の無いように確認してから送る

明日からはいよいよWEB制作のソフトの訓練です。

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

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

  1. トップ
  2. WEBクリエーターへの道
  3. 職業訓練WEBクリエーター科3日目

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

今日の流れ

  • 自己分析作業の続き
  • コミュニケーションスキル

自己分析作業の続き

これは昨日の続きの部分で、要はあらかじめ決められた質問に答えていき、自分の性格とはどのようなことに興味があるとかを自分の中かから出てきた答えから見出しましょうって作業ですね。

コミュニケーションスキル

これは、結局就職すると人間関係が大事になってくるので、要は目上の人でも同い年の人でも同じようにコミュニケーションを取れるようにしましょうってことですね。

発見!!

コミュニケーションスキルで必要になってくるのは、話すことだと思ったのですが、ズバリ聞くことが大事だといったことに気づかれました。

聞くにも3種類あり、漢字にすると「聞く」「聴く」「訊く」だそうです。

  • 聞く・・・受動的に何気なく聞く(普段BGMを聞いてるような聞き方)
  • 聴く・・・能動的、積極的、意識的(多分興味がある事を聴いてる状態)
  • 訊く・・・尋ねる、質問する(わからないことを尋ねて理解を深める)

まとめると

傾聴する・・・話の内容を余すことなく活用し、話し手に働きかけ、話の内容をより充実させる。

傾聴するテクニックには六種類

  • うなずき効果・・・相手に話しに合わせてうなずく。
  • あいずち効果・・・相手に合わせて「うん」「そうですね」などのあいずちをうつ。
  • 視線効果・・・話しての方を見て聴く
  • 笑顔効果・・・これは話の内容にあった表情をする
  • 質問効果・・・わからなことを相手に聴いてより話を聴く
  • メモ効果・・・要点や大事な部分をメモにとる

そして次に大事になるのが特に第一印象!!

第一印象の大切さ

「応対一瞬、印象一生」とゆうことわざがある?ように出会いのときの一瞬の印象が、相手にとって一生の印象となってしまう。

第一印象を決めるポイントは「外見」

  • TPOにあわせた服装を意識しましょう。
    例・・・結婚式に普段着で行く等

今日の授業の感想

今日はコミュニケーションスキルの勉強を主に行いましたが、いや~~正直おもしろかったですね。

なんかグループで、話し合って作業したり小学校とかに戻ったみたいで新鮮でした。

まだWEBデザインの勉強はしていないですけど、クラスの雰囲気もよくなってきたので、クラス24人みんなで、一丸となって勉強できそうです。

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

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

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

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

05 | 2007/06 | 07
- - - - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。