コンピュータ基礎実習(上級) 第六回サイト製作清水淳紀サイト自由作成課題の内容  課題    提出   今までの技術を踏まえて任意のサイトを作成してください。授業中に一度サイトの内容を印刷して、先生のレビューを受けてください。作成したサイトにアクセスするためのアドレス(URL)を moodle に書き込んでください。 http://www.cc.kyoto-su.ac.jp/~g123456/xxxxx/ など締め切り  次週の授業日 11月２日(水) までとします。当日有効。 ※ サイトとは、あるテーマで一まとめに公開されているページ群のことです。今回の課題では、作成したページ群全体を指します。 HTMLでよく使われるテクニック透明テーブルを使ったテクニック１  罫線の見えないテーブル   テーブル作成後、[右クリック] →[プロパティ] →[テーブル]タブにて [枠線] を 0 にする。画像の左右に文字を書く   通常は画像の右側には 1行だけしか文字を入力できない。表に入れれば複数行書ける。透明テーブルを使ったテクニック２  平面的なレイアウト     透明テーブルでサイトに平面的なレイアウトを実現。表の中に表を入れたりしても良い。セルのプロパティで背景色を塗ることで、簡易的なメニューのような表現もできる。 2段組なども実現できる。全体のレイアウトを表で実現する。透明テーブルを使ったテクニック３  余白の確保    端から端まで文字で埋まったページは読みにくい。適度な余白を設けると、読みやすくなる。一般的には、１行４０文字程度が目安。テーブル中にあえて空白のセルを設けることで、余白を実現する。セルの幅指定などで余白の大きさを調整するとよい。透明テーブルを使ったテクニック４  画像を使ったメニュー    ボタンのような画像を作成し、表の中に画像を配置する。各画像をリンク化すれば、高級感のあるインタフェースが作成できる。画像作成のコツ    ボタンのサイズがまちまちだったり、余分な余白が残っていると見苦しい。１ピクセル単位での正確な編集が望ましい。 Paint.NETなど画像編集ツールを併用すると良い。カラーコードの活用１  カラーコードとは        コンピュータで発色できる色を数値で表したもの。 HTMLでの色指定を行う際は基本的にカラーコードを使う。＃に続けてアルファベットと数字６桁で指定する。 (例) #FFFFFF #0088FF 0123456789 と ABCDEF で指定する。６桁の数字は２桁ずつそれぞれRGB(Red,Green,Blue)の色の強さを表す。 RGBそれぞれで、以下の順に色が明るくなる。 00 ＜ 11 ＜ 22 ・・・ 99 ＜ AA ＜ BB ＜ CC ＜ DD ＜ EE ＜ FF カラーコードの利点  同じ色を複数の箇所に塗りたいとき、カラーコードをコピーすれば、まったく同じ色を塗れる。カラーコードの活用２  活用例  同色の実現    テーブルのセル色を決めるときなどに、カラーコードが現れるのでコピーしておく。別のセルに色を塗るときに、先ほどのカラーコードを貼り付けるとまったく同じ色を塗ることが出来る。サイトデザインの統一  サイトのデザインに統一感を出すために複数のページを作ったときも、各ページで同じ色合いを使うようにする。微妙な中間色も完全に一致詳しくはこちらも参考にしてみてください。 http://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/tag_color.html カラーコードの活用３  活用例  画像の背景とページの背景をなじませる   画像編集ツールでは、カラーコードが確認できることが多い。画像の背景色をあらかじめカラーコードで記憶しておき、ページの背景色とそろえれば、画像の背景との継ぎ目が目立たない。例えば Paint.NET を使うと、スポイトツールで選択した部分のカラーコードが分かる。 Kompozerでページの背景色を画像の背景色にそろえた例。画像の境界部に色の差がない。