Webサイトをデザインする!白紙から完成まで

講座の概要
Webサイト制作の白紙から完成までを学習できる24時間の講座です。Fireworksでデザインを作り、そのデザインをDreamweaverで形にし、さらにCGIを使ってメールフォームも設置した実用的なサイトを作ります。

講座の詳細
チャプター① デザイン編(Fireworks)

 Webサイト制作はデザインから始まります。いきなりDreamweaverで作り始めてしまうと、思い描いたサイトとはかけ離れたデザインのものが出来上がってしまうことが多いため、まずはFireworksを使ってデザインを作ります。


チャプター② コーディング編(Dreamweaver)

 Fireworksで作成したデザインを、Dreamweaverで忠実に再現していきます。Dreamweaverの設定からCSSを使った細かいデザインの方法まで、初心者にも分かりやすいように解説しています。


チャプター③ 完成編(CGI・その他)

 Dreamweaverで作成したサイトにCGIを使ってメールフォームを設置します。CGIは初心者にとっては少々複雑で難しいかもしれませんが、実際に画面で操作を見ながら作業できるので安心です。


<制作するサイト>

デモサイトはこちらからご覧いただけます。


レッスン一覧
チャプターリスト
No.チャプター名合計時間
1Fireworksでサイトデザイン!10:00:20
2Dreamweaverでコーディング!07:45:58
3CGIでメールフォームの設置!06:33:03

動画リスト
No.動画タイトル時間
1Fireworksでサイトデザイン!10:00:20
1WEBサイトの簡単な構造解説!今後の作業手順26:08
2拡張子の説明、メモ帳で簡単なHTMLを作ってみる30:46
3保存先とルール!レイヤーの構造を解説!18:08
4白紙からのスタート、簡単な構造を作る!20:24
5背景のデザイン開始(ファイヤーワークス)containerを制作27:26
6コンテナーの背景デザイン!グラデーション使用36:17
7ヘッダーの背景デザイン、素材制作、ゆがみツール等56:11
8ヘッダー背景デザイン、更に作り込んで拘ろう!19:38
9ヘッダー総合デザイン、文字・写真・図形でほぼ完成まで59:50
10完成したヘッダーを更にドレスアップする手法、サイドナビ53:40
11サイドナビをデザインする19:35
12コンテンツ制作開始、背景のドレスアップ、素材加工31:41
13コンテンツBデザイン、ブロック構造の計算、フッターまで27:50
14GIFアニメーション① 右カラムの制作31:36
15GIFアニメーション② デザイン性を高める42:13
16GIFアニメーション③ フッター部分の作り込み16:58
17デザインの最終回、全体的なデザイン装飾12:48
18デザインをスライスする、ステートを活用30:41
19ロールオーバースライス手法、スライス完成まで38:30
2Dreamweaverでコーディング!07:45:58
20サイト・サーバーのしくみ、初期設定12:05
21カスタマイズ、head内のメタ情報等の設定、テキスト入力36:12
22原稿のチェックandマークアップ作業23:37
23マークアップの修正、仮リンク、クローク、アセットパネル26:04
24タグセレクター、ブロック構造の為のDIVタグを設定する31:02
25CSSの概要・説明、外部CSSファイルの作り方25:34
26CSSスタイルパネル、CSSを使ってデザインし外部CSSへ保存18:51
27ヘッダー部分をCSSでレイアウトする、ポジショニングの使い方20:02
28番外編:CSSルール定義のボックスパネルを図解して解説12:55
29CSSフロートで全体の位置指定(図解&実行)外部リンク色36:21
30細部CSS設定① ナビゲーションAを完成まで23:23
31細部CSS設定② コンテンツA レイアウト調整21:27
32細部CSS設定③ コンテンツB 商品アイテムのブロック要素30:35
33コンテンツB+全体的なロールオーバー・外部Javaファイル設定30:50
34コンテンツBの仕上・CSSでレイアウトの微調整、右カラム制作28:55
35B-NAVIを完成まで、GIFアニメ修正(CSS調整)15:41
36CSSでフッター部分の完成、全体的なTOPページの完成30:04
37ページを増やす手法、テンプレート機能を活用する16:01
38番外編:説明不足の補足説明やCGIの概要26:19
3CGIでメールフォームの設置!06:33:03
39メールフォームCGIの説明、フリーCGIにチャレンジしてみよう!17:42
40メールフォームをデザインする(テーブル使用)33:42
41メールフォームの修正、フォームの挿入、スプライを使用33:30
42メールフォームの詳細調整、スプライをデザインカスタマイズ28:18
43CGIの初期設定、リモートサイト(レンタルサーバー)の解説33:03
44実際にアップロード(更にメール送信テスト)15:05
45フリーCGIのCSSをカスタマイズしデザインする26:27
46全体の仮リンクを修正、CGIアップロードチェック、テスト15:37
47番外編:ページ名の変更・CGIの実験・その他対処法・更新等15:13
48新ページ制作、部品制作フォトショップアクションで効率化40:06
49新ページのレイアウトFW、ボタン制作、ブロック完成31:57
50ドリームウィーバーCSSでレイアウト、コピー複製38:31
51部品制作PS、CSSのカスタマイズ、背景を利用した商品写真30:15
52すべてを完成まで、実際にアップロードして最終チェック17:57
53メールフォームCGIの不具合、簡単な修正と対処15:40


ダウンロードコンテンツ
  • Webサイトの完成フォルダ」(17.7MB)
    講座内で作成するWebサイトの完成状態のフォルダをダウンロードすることができます。Webサイトの制作に使用する画像などのファイルも含まれています。


誰でもオンライン講座を配信できます

    myteeでは、レッスン動画さえあれば誰でもオンライン講座を配信することができます。ユーザー登録後、サイト上部に表示される「インストラクター」アイコンから講師登録ができます。講座の配信手続きは全てWebブラウザ上で行えますが、ご質問・ご相談等ございましたらお気軽にフォーム(ログイン必須)からお問い合わせください。