後期スケジュール

9月15日(木)
企画書制作
前期課題修正
9月22日(木)
企画プレゼンテーション
前期課題修正完了
9月29日(木)
サイトマップ作成
メインロゴ作成
10月6日(木)
サイトマップ完成&講師チェック
ワイヤーフレーム作成
メインロゴ作成
10月13日(木)
ワイヤーフレーム完成
Photoshopでトップページデザイン開始
メインロゴ作成
10月20日(木)
Photoshopでトップページデザイン
10月27日(木)
Photoshopでトップページデザイン完成
11月10日(木)
Photoshopでデザイン
11月17日(木)
Photoshopでデザイン完成
11月24日(木)
コーディング開始
12月1日(木)
コーディング
12月8日(木)
コーディング
12月15日(木)
コーディング
12月22日(木)
コーディング完成
講師チェック&修正
1月5日(木)
講師チェック&修正
1月12日(木)
課題提出
1月19日(木)
講評
1月26日(木)
最終修正

HTMLコーディングの注意事項

まず、各内容をHTMLの適切な要素(タグ)でマークアップするように気をつけること。

ターゲットブラウザ

  • Google Chrome 10以降（Mac/Windows）
  • Firefox 4以降（Mac/Windows）
  • Safari 4以降（Mac）
  • Internet Explorer 8以降（Windows）

ブラウザのスタイルのリセット

リセットCSS

各ブラウザ間に差異のあるデフォルトスタイルを、いちど全てクリアしてしまおうというのが「リセットCSS」です。

課題作成では、アメリカのYahoo! User Interface Libraryが提供している、YUI Reset CSSを利用します。

ベースCSS

リセットCSSの問題点は、見出しもリストも段落もWebページ上で全く同じ見た目になってしまうため、そのままでは見分けがつかなくなってしまうことです。

そこで、同じくYahoo! User Interface Libraryが提供しているYUI Base CSSを利用します。

base.cssでは、見出しや段落、リストなどにそれなりのスタイルをあらためて定義し、そのままでも表示された際にWebページとして機能するようになります。

reset.cssとbase.cssを併用することによって、各ブラウザ間のデフォルトスタイルが違う問題をクリアすることができます。

yuga.jsの利用

Webサイトを作る際に欲しい機能をまとめた、jQueryを利用したJavaScriptのライブラリyuga.jsを利用します。

yuga.jsの主な機能

  • ロールオーバー
  • 現在のページをハイライト表示
  • 外部リンクは別ウインドウを設定
  • 画像へ直リンクするとthickboxで表示
  • ページ内リンクはするするスクロール
  • 簡易タブ機能
  • 奇数、偶数を自動追加
  • 最初・最後の要素、空の要素

詳しくはyuga.jsのサイトを参照のこと。

ファイルディレクトリ

ファイルのディレクトリ構造は、以下のようにしてください。

予め必要なCSS、JavaScript、画像ファイルはサーバーの各自のディレクトリに置いてあります。

ファイルディレクトリ

各ファイルの読み込み方法

CSSは後で記述されたスタイルが優先される特性があるため、HTMLのhead要素内で、以下の順番で読み込んでください。style.cssのみ、各自で作成するファイルです。

 
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/base.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

JavaScriptのライブラリは、HTMLのhead要素内で以下のように読み込みます。

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/yuga.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

HTMLのhead要素内に、meta要素のhttp-equiv属性でページの種類（text/html）と共に、スタイルシートの種類（text/css）、スクリプトの種類（text/javascript）を以下のように記述するのを忘れないように。（テキストP.33）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

ヒント

  • 素材について

    写真やパーツ等の素材は、ブックマークページで紹介しているものを利用すると便利です。

  • 著作権について

    制作した課題はWebに公開されますので、使用する素材等の著作権に留意してください。
    クリエイティブ・コモンズ・ライセンスについてはこちら。

  • バリデート

    提出前に必ずバリデートをしてエラーが出ないことを確認すること。

  • 質問について

    質問は、授業時間内とメール等でも受け付けます。

  • 自宅作業について

    自宅で作業したい場合は、図書館にある書籍『Dreamweaver独習ナビ』付属のDVD-ROMにDreamweaver CS3の体験版が入っていますので借りてください。 体験版は、インストールから30日間、機能制限なく使用することができます。
    その他、DreamweaverやPhotoshop、Illustratorの体験版は、AdobeのWebサイトから最新版をダウンロードすることもできます。

  • 参考書籍

    図書館に有用な本が沢山あるので、ぜひ活用してください。

みんなの作品

＊このページではCSS3の要素を使っているため、WindowsのInternetExplorerでは簡易表示です。