まずは、「Dreamweaver/Fireworks基本編」からいきましょう。
まずはこの授業で、dreamweaverおよびfireworksの、ごく基本的な使い方について学んでいただきます。
ソフトをまったく触ったことがない、という人も大丈夫！
ゆっくり段階を踏んでやっていきますので、安心してください。
サンプルをご用意しました。見てください。サンプルでは、fireworksの使い方について解説してます。
詳しい内容は、「目次」をご覧くださいね！

fireworksでイメージを作成する
リンクボタン
ポップアップ・ジャンプメニュー

?

イメージの作成
ホームページの作成。テキスト入力

fireworksでイメージを作成する

1　ロゴデザイン
2　イラスト
3　ボタン



デザイン・レイアウト
11　テキストデザイン　１　２　３　４
12　表組み
13　レイアウト　レイアウト２


ボタンメニュー

16　リンクボタン

18　ホットスポット

21　ポップアップ・ジャンプメニュー

アニメーション
22　点滅するアニメ
23　回転するアニメ
24　直接移動するアニメ　移動アニメ２

はい次です。「Dreamweaver基本サイト作成編」
「基本編」で、ソフトの使い方について学びました。
じゃあさっそく、サイトを作っていきましょう。
基本を覚えたら、すぐ実践に移す。これが大事です。

「Dreamweaver基本サイト作成編」の授業に入ります。
この授業の中で、実際に私とあなたで、サイトを作っていきます。

ホームページ作成ソフトのdreamweaverについて、基礎の基礎からじっくりと学んでいける授業です。
ソフトの基本的な使い方からはじめて、実際に一緒にサイトを作っていって、
最後は無料のサーバーを借りて、ホームページを公開するところまでやっていきます。

実際にこういったサイトを作ることになります。これ、実際に教材の中で一緒に作っていくサイトです。
ね、けっこうしっかりしたの作れるでしょ？ちなみにこのサイトには、「ＣＳＳ」をガッチリと組んでいます。
サイトを作って、さらにそれをサーバーにアップロードするところまで、
手取り足取り、動画にて解説させていただきます。

セールスポイントは、ＣＳＳ！！！スタイルシートのところです。
特にＣＳＳ記述のところは非常に詳しく説明しました。
ではサンプル動画をご覧ください。

dreamweaverの起動と終了
サイトを作成する
パネルの基本操作
画像を挿入する
メールリンクを設定する

次に、目次をご覧ください。詳しい授業内容です。

dreamweaverの起動と終了（2分）

基本設定の確認　（4分）
サイトを作成する　（4分）
パネルの基本操作　（4分）
新規ファイルを作成する　（8分）
テキストを入力する
見出しを設定する　（15分）
画像を挿入する　（3分）
ブラウザで確認する　（7分）
同一サイト内のページにリンクを張る　（6分）
メールリンクを設定する　（1分）
スタイルシート
特定のhtmlタグにCSSルールを定義する　（6分）
タグのＣＳＳルールを定義する　（5分）
タグのＣＳＳルールを定義する　（2分）
＜hr＞タグのＣＳＳルールを定義する　（2分）
スタイルシートの書き出しと、リンク設定　（3分）
ｈｔｍｌファイルでＣＳＳファイルをリンクする　（3分）
クラスセレクタでＣＳＳルールを定義する
画像の枠線を消すＣＳＳルールを作成する　（7分）
ＣＳＳ（スタイルシート）でレイアウトする（30分）
まずサイトを作ろう！
任意の領域をボックスにする　（15分）
ボックスのＣＳＳルールを設定する
ページの一部を段組にする　（16分）
ＣＳＳ（スタイルシート）でデザインを仕上げる　（14分）
mainボックスのデザインを設定する
footerボックスのデザインを設定
sidebarボックスのデザインを設定
動画でわかるFireworks編（21分）
FIREWORKSの起動
タイトルロゴの作成
図形の作成
作成した画像をウェブページに挿入する
挿入した画像を編集する
サイト転送　(22分)
（初心者の方がもっともつまづきやすいところです）
無料サーバーにサイトをアップロードしよう！
fc2webのレンタル方法
fc2webの設定確認、ログイン方法
DREAMWEAVERのftp設定方法
サイト管理とアップロード
ファイル名の変更と移動
リモート情報の設定
サイトのアップロード
では、サイトを見てみよう！！！！！

「Dreamweaver大辞典」

次に行きます。次は、辞典。
サイトを作っていくときに、わからなくなることが出てきます。必ず出てきます。
そんなときに、役立つのが、この「Dreamweaver大辞典」なんです。
「ヘルプファイルを動画で確認できるソフト」と思ってください。
Dreamweaverを使うときに、忘れやすい機能、覚えておきたい機能、
そんなものをまとめて、200近い動画にまとめています。

まずサンプル動画を見てもらいましょう。

［挿入］バーをタブ表示に
現在開いているドキュメントのブラウザチェック
ブラウザチェックの結果の詳細を確認
すべてHTMLタグで記述する
改段落・改行
段落にインデントを設定
レイアウトテーブルのサイズを変更
レイヤーを描画する
レイヤーを移動
すべてのレイヤーを一度に表示・非表示に
レイヤーの積み重ね順を変更
テキストのCSSスタイルをほかのテキストに適用
設定したCSSスタイルを削除
フォームの内容を受け取りたい

上記は、一部のサンプルです。
実際には、200近い動画をご用意しています。
ぜひ、逆引きに使ってください！

?

動画でわかるDreamweaver　大辞典　

基本操作
［パネルグループ］を非表示にするには
パネルをフローティングウィンドウにするには
［パネルグループ］を2列以上で表示
特定のパネルだけを独立させたい
［挿入］バーをタブ表示に
［挿入］バーの［お気に入り］を活用
ワークスペースのレイアウトを変更
［スタートページ］を再表示
新規ドキュメントを作成
任意のフォルダ内に新規ファイルを作成
コピー＆ペースト、保存などのコマンドを簡単に実行
複数の手順を一度に取り消すには
過去の手順を別のオブジェクトに適用
色の選択をキャンセル
ドキュメントを開きたい
複数のドキュメントを一度に閉じたい
ファイル名を変更
プレビューするためのブラウザを追加
HTMLタグについて調べたい

サイトの設定と管理
サイトを定義
サイトを追加
サイトの定義した内容を変更
サイト内にスペーサーイメージを作成
現在開いているドキュメントのブラウザチェック
ブラウザチェックの結果の詳細を確認
サイト全体のブラウザチェック
ブラウザチェックを行うターゲットブラウザを選択
リモートサイトに接続
サイト全体をアップロード
選択したファイルやフォルダだけアップロード
最新のファイルだけをアップロード
ローカルサイトとリモートサイトを同期させたい
サイトをマップ表示

Chapter 3　ページの設定
すべてHTMLタグで記述する
ページタイトルを設定
テキストの基本設定
ページのマージンをなくす
背景色を設定
背景に画像を設定
背景に画像を繰り返さずに設定
背景に画像を横一列または縦一列に設定
下絵を設定してレイアウト
ドキュメントの表示サイズを変更
検索エンジン用のキーワードを入力
検索エンジン用のサイト紹介文を入力
［デザインビュー］の表示比率を変えたい
［デザインビュー］をスクロール
［デザインビュー］にガイドを設定
［デザインビュー］のルーラを非表示に
［デザインビュー］にグリッドを表示

Chapter 4　テキスト
改段落・改行
テキストのサイズや色を変えたい
テキストデータのみをコピー＆ペースト
テキストを強調
アンダーラインや取り消し線を適用
強調タグの記述方法を変えたい
段落を見出しとして設定
見出しのサイズと色をカスタマイズ
行揃えを設定
フォントを変更
段落にインデントを設定
Wordのドキュメントを読み込みたい
Wordのデータを活用
リストを作成
リストの行頭記号を変更
説明文を字下げしたリストを作成
番号リストの数字表記を変えたい
日付・時刻を挿入

イメージ・メディア
画像を挿入
画像の大きさを変更
サイズ変更した画像をキレイに
画像の代替テキストを設定
画像にテキストを回りこませたい
画像のマージンを設定
画像をトリミング
画像を補正
仮の画像をドキュメント上に配置
［イメージプレースホルダー］と画像を差し替えたい
［イメージプレースホルダー］から外部イメージエディタを開きたい
ロールオーバーイメージを作成
配置した画像をロールオーバーイメージに
フォトアルバムを作成
Flashを挿入
Flashテキストを作成
Flashボタンを作成
アクセシビリティのダイアログボックスを表示させないように

テーブル
テーブルを挿入
テーブルのサイズを変更
行の高さ、または列の幅を変更
テーブルセル内にコンテンツを挿入
すべての列幅を固定
テーブルの位置を揃えたい
セル内のテキストを1行で表示
セル内のデータの位置を揃えたい
任意のセルを見出しとして設定
行や列を挿入
行や列を削除
複数の行または列を一度に挿入
行または列を入れ替えたい
行または列を複製
セルを分割・統合
セル余白やセル間隔を設定
テーブルの罫線の幅や罫線の色を設定
テーブルに背景色を設定
テーブルに背景画像を設定
テーブルの枠線に画像を設定
テーブルを簡単にデザイン
セルやテーブルを選択しやすく
Excelのドキュメントを読み込みたい
Excelのデータを引用
テーブル内のデータをソート

レイアウトテーブル
レイアウトテーブルを描画する
レイアウトセルを描画する
レイアウトテーブルのサイズを変更
入れ子のレイアウトテーブルを作成
レイアウトテーブルを移動
レイアウトテーブルに色を設定
レイアウトセルにコンテンツを挿入
レイアウトセル内のテキストを1行で表示
レイアウトセル内コンテンツの方向を揃えたい
列にスペーサーイメージを挿入
ウィンドウ幅に合わせて伸縮する列に
レイアウトテーブルを通常のテーブルとして表示

レイヤー
レイヤーを描画する
レイヤーのサイズを変更
レイヤーを移動
レイヤーの背景に画像や色を設定
複数のレイヤー位置を一度に揃えたい
複数のレイヤーのサイズを一度に揃えたい
レイヤーにテキストや画像を挿入
レイヤーの中にレイヤーを作成
既存レイヤーを入れ子の設定に
レイヤーの表示・非表示を切り替えたい
すべてのレイヤーを一度に表示・非表示に
レイヤーの積み重ね順を変更
レイヤーをテーブルに変換
レイヤーの初期設定を変更
レイヤーの名前を変更

リンク
テキストにリンクを設定
画像にリンクを設定
新しいウィンドウを開いてリンク先を表示
指定した大きさでリンク先ウィンドウを開きたい
メールアドレスをリンク先に設定
ページの途中にジャンプさせたい
アンカーポイントにリンクを設定
リンクを削除
ジャンプメニューを作成
移動ボタン付きのジャンプメニューを作成
画像にホットスポットを作成
多角形のホットスポットを作成
ホットスポットにリンクを設定
ナビゲーションバーを作成
ポップアップメニューを作成
テキストリンクの色を設定
テキストリンクの下線を非表示に
リンク設定したテキストだけサイズを変えたい

フレームの作成
フレームセットを作成
フレームを選択
フレームセットをさらに分割
フレーム名を変更
フレームセットを保存
フレームにドキュメントを設定
フレームのサイズを変更
ウィンドウサイズに合わせてフレームサイズを設定
フレームのボーダーを表示
フレームにスクロールバーを設定

CSSの活用
テキストのスタイルを作成
テキストのCSSスタイルをほかのテキストに適用
テキストのCSSスタイルを名前を付けて保存
CSSスタイルを新規作成
リンクのスタイルを設定するには
CSSスタイルの内容を編集
設定したCSSスタイルを削除
CSSスタイルを複製
現在設定されているCSSスタイルを確認
CSSスタイルの名前を変更
CSSスタイルを外部スタイルシートとして書き出す
外部スタイルシート上のCSSスタイルを編集
テキストの行間を設定
罫線の設定を設定
サンプルのCSSスタイルシートを活用

フォームの作成
フォームを挿入
短い文字列を入力するテキストフィールドを作成
長い文章を入力するテキストエリアを作成
選択肢の中から複数選択できるチェックボックスを挿入
選択肢の中から1つだけ選択できるラジオボタンを挿入
ポップアップメニューを挿入
スクロールリストを作成
クリックすると自動的にテキストが表示されるように
送信ボタンやリセットボタンを挿入
フォームの内容を受け取りたい

HTMLコードの編集
［デザインビュー］上でHTMLタグを編集
テキストに折り返しタグを挿入
コードヒントを利用してHTMLタグを入力
［コードビュー］の行番号を非表示に
ソースコードにインデントを使用したくない
区切りなしスペースを挿入
「ポンド」や「コピーライト」といった特殊な文字を挿入
コードの一部を降りたたみたい
区切り線を挿入
ブラウザのステータスバーにテキストを表示
サイトの引っ越しページを作成
イメージの作成
ホームページの作成。テキスト入力

次です。「Dreamweaver CSS編」
お待たせしました。この授業では、ＣＳＳに関してみっちり解説させていただきます。
ＣＳＳを制するものは、Dreamweaverを制するといってもいいくらい、必要不可欠な機能です。
もちろん上級者になるにはPHPなども必要になりますが、まずは何よりもCSSです。

ドリームウィーバーを使う上で、もっとも難しいとされるＣＳＳ/スタイルシートについて、
重点的に学ぶことの出来る動画ソフトウェアです!!!!!

実際に、このサイトを作っていきます。このサイトが作れるようになります。

上記のサイトは、divタグなどＣＳＳルールを多用して作られています。
このサイトを実際に作っていくことで、ＣＳＳを理解していくことができます！
ＣＳＳは、ホームページ製作者としてはいつかは絶対に通らなくてはいけない壁です。
このソフトで乗り越えてください！

サンプルをご覧ください。

新規にサイトを定義する
新規ＨＴＭＬファイルを作成する、タイトルを入力して保存する
見出しh2のボーダーをデザインする
テーブルとセルをデザインする

目次をごらんください。

?

動画でわかるDreamweaver CSS/スタイルシート編

・サイトを定義する
新規にサイトを定義する
・新規ファイルの作成とテキストの入力
新規ＨＴＭＬファイルを作成する、タイトルを入力して保存する

・タグとリンクの指定
タグの指定
リンクを指定
ファイルを互いにリンクさせる

・見出しと段落のデザイン＆リンクのスタイル設定
外部ＣＳＳファイルとセレクタの設定
見出しをデザインする
見出し2、見出し3、段落、アドレスのスタイルを設定する
リンクの色を設定する
カーソルを載せたときのスタイルを設定する
子孫セレクタ、複数のセレクタのリンクを設定する
テキストをグループ化して、スタイルを設定する

・画像とテキストのレイアウト

画像の挿入
画像とテキストの配置
画像にマージンを指定する

・背景色とページ全体のレイアウト／マージンと余白の設定
ページ全体の背景色を指定する
ＣＯＮＴＥＮＴを作成して、背景色と幅を指定する
h1とaddressの背景色を指定して、文字を白抜きにする
2つ目のコンテンツをグループ化して、newsを作成する
各要素に余白（padding）を指定して、レイアウトを整える

・背景に画像を指定する
ページ全体の背景に画像を指定する
背景画像を使ってテキストにアイコンを指定する
・背景画像を使ったヘッダとフッタ/ボーダーを使ったデザイン
h1をヘッダとしてデザインする
ヘッダにサブタイトルをつける
addressをフッタとしてデザインする
menuのマージンを整えて下のボーダーをデザインする
見出しh2をデザインする
見出しh2のボーダーをデザインする
newsのソースをコピー＆ペーストして編集する
・リストの作成/テーブルの作成/テーブルとセルの編集
リストを作成する
リストの種類を変更する
ＣＳＳでリストマーカーをデザインする
テーブルの基本構成
ＣＳＳでテーブルの幅と高さを指定する
セルを編集する
データセルに画像を挿入して、ＣＳＳで幅と背景画像の指定をする
・カレンダーをデザインする
テーブルとセルをデザインする
キャプションとリンクのテキストを装飾する
・ブロックコンテンツで段組を作成する/影のついた画像を挿入する
レイアウト用のＣＳＳファイルをリンクする
body要素のマージンと余白を指定して、背景画像を指定する
タグの役割を知る　＜タグ＞
ホームページを作る準備をしよう
ファイルの種類がわかるようにするには　＜拡張子の表示＞
HTMLファイルを保存するフォルダを作るには　＜作業フォルダの作成＞
HTMLファイルを作るには　＜HTMLファイルの作成＞
HTMLファイルを更新するには　＜HTMLファイルの更新＞
ホームページに表示する文章を作ろう
ホームページの基本部分を作るには　＜基本タグ＞
日本語が正しく表示されるようにするには　＜文字コードの指定＞
ホームページにタイトルを付けるには　＜ホームページのタイトル＞
いろいろな見出しを付けるには　＜見出し＞
本文を入力するには　＜段落と改行＞
一部の文字を強調するには　＜文字の強調＞
箇条書きのリストを作るには　＜リスト＞
リンクを張ってホームページをつなげよう
ほかのホームページにリンクを張るには　＜外部へのリンク＞
見出しにリンクを張るには　＜見出しへのリンク＞
メールを送ってもらえるようにするには　＜メールアドレスへのリンク＞この章のまとめ
スタイルシートでデザインを整えよう
スタイルシートを使う準備をするには　＜スタイルシートの基本設定＞
背景の色を変えるには　＜背景色＞
文字の色を変えるには　＜文字色＞
見出し文字の大きさを変えるには　＜フォントサイズ＞
行間を空けて読みやすくするには　＜行間の調整＞
ページの左右に余白を作るには　＜余白の設定＞
強調文字の見た目を変えるには　＜フォントのスタイルと太さ＞
リンクの設定された文字の色を変えるには　＜リンク色の変更＞
スタイルシートだけのファイルを作るには　＜CSSファイルの作成＞
CSSファイルを編集するには　＜CSSファイルの利用＞
ホームページに画像を表示しよう
ホームページに画像を表示するには　＜画像の表示＞
文字を画像の横に回り込ませるには　＜画像の配置と回り込み＞
画像と文字の間を空けるには　＜余白の設定＞
タイトルロゴを表示するには　＜タイトルロゴの表示＞
アイコン画像を表示するには　＜アイコン画像の利用＞
表を使って項目を見やすくしよう
項目を表にして表示するには　＜表の利用＞
表組を線で区切るには　＜表の枠線＞
表の見出しを目立たせるには　＜見出しセルの設定＞
表に全体の説明文を付けるには　＜キャプション＞
セル内の余白を設定するには　＜余白の設定＞
セルの幅を変えるには　＜セルの幅＞
スタイルシートで表を飾るには　＜スタイルシートの利用＞
たくさんのページでホームページを構成しよう
トップページを作るには　＜トップページの作成＞
サブページを作るには　＜サブページの作成＞
リンク集を作るには　＜リンク集の作成＞
プロフィールページを作るには　＜プロフィールページの作成＞

はい。
ここまでで、dreamweaverについて、じっくり学びました。
ＣＳＳについても、学びました。

ここからは、上級者の授業に入りましょう。
次の授業は、「html/css」についてです。
html言語について、しっかり学びます。
html言語って、わかりますか？＜br＞って書いたら改行するとか、ああいうやつです。
これの基本からしっかり勉強していきましょう。

htmlがわかれば、ホームページを、メモ帳で作ることができます。
サイトを作るのに、別にホームページビルダーもDreamweaverもいらないんですよ。
知ってましたか？
htmlを理解しておけば、メモ帳で作れるんです。
信じられないって人は、このサイトを見てください。
このサイトは、メモ帳だけで作りましたが、きちんとＣＳＳも重ねています。

はい。この授業、「メモ帳で作るホームページ」では、今見ていただいたのとまったく同じサイトを、
いっしょに作っていきます。

サンプル動画です。

「動画でわかるhtml/css」

メモ帳でサイトを作ってる人なんて、あんまりいないと思います。
Dreamweaverで作ったほうが効率がいいですから。
それでも、一度はメモ帳だけでサイトを作っておいたほうがいいんです。
なぜかって？
それはもちろん、htmlやCSSの理解力が深まるからです。
dreamweaverを使えば、直感的な操作でサイトを作ることができます。
それはカンタンでラクですが、コードで作ることを一度は経験しておくべきです。
そうすることで、あなたのサイト作成の能力は飛躍的に向上します。

さらに、のちのちPHPやＣＧＩを使う場面になったときも、
メモ帳でhtmlを理解しておいた経験は、必ず役立ちます。

ですのでぜひ！一緒にがんばりましょう！

さらに、「html/cssの逆引き大辞典」も入れています。
この動画では、html/CSSの複数の項目を動画で解説しています。

目次をご覧ください。

?

「動画でわかるhtml/css メモ帳でサイト作成編」

サンプルフォルダ

完成サイト

タグの役割を知る　＜タグ＞

ホームページを作る準備をしよう
ファイルの種類がわかるようにするには　＜拡張子の表示＞

HTMLファイルを保存するフォルダを作るには　＜作業フォルダの作成＞
HTMLファイルを作るには　＜HTMLファイルの作成＞
HTMLファイルを更新するには　＜HTMLファイルの更新＞

ホームページに表示する文章を作ろう

ホームページの基本部分を作るには　＜基本タグ＞
日本語が正しく表示されるようにするには　＜文字コードの指定＞
ホームページにタイトルを付けるには　＜ホームページのタイトル＞
いろいろな見出しを付けるには　＜見出し＞
本文を入力するには　＜段落と改行＞
一部の文字を強調するには　＜文字の強調＞
箇条書きのリストを作るには　＜リスト＞

リンクを張ってホームページをつなげよう

ほかのホームページにリンクを張るには　＜外部へのリンク＞
見出しにリンクを張るには　＜見出しへのリンク＞
メールを送ってもらえるようにするには　＜メールアドレスへのリンク＞この章のまとめ

スタイルシートでデザインを整えよう
スタイルシートを使う準備をするには　＜スタイルシートの基本設定＞
背景の色を変えるには　＜背景色＞

文字の色を変えるには　＜文字色＞

見出し文字の大きさを変えるには　＜フォントサイズ＞

行間を空けて読みやすくするには　＜行間の調整＞
ページの左右に余白を作るには　＜余白の設定＞
強調文字の見た目を変えるには　＜フォントのスタイルと太さ＞
リンクの設定された文字の色を変えるには　＜リンク色の変更＞
スタイルシートだけのファイルを作るには　＜CSSファイルの作成＞
CSSファイルを編集するには　＜CSSファイルの利用＞

ホームページに画像を表示しよう
ホームページに画像を表示するには　＜画像の表示＞
文字を画像の横に回り込ませるには　＜画像の配置と回り込み＞
画像と文字の間を空けるには　＜余白の設定＞
タイトルロゴを表示するには　＜タイトルロゴの表示＞
アイコン画像を表示するには　＜アイコン画像の利用＞

表を使って項目を見やすくしよう
項目を表にして表示するには　＜表の利用＞
表組を線で区切るには　＜表の枠線＞
表の見出しを目立たせるには　＜見出しセルの設定＞
表に全体の説明文を付けるには　＜キャプション＞
セル内の余白を設定するには　＜余白の設定＞
セルの幅を変えるには　＜セルの幅＞
スタイルシートで表を飾るには　＜スタイルシートの利用＞

たくさんのページでホームページを構成しよう
トップページを作るには　＜トップページの作成＞
サブページを作るには　＜サブページの作成＞
リンク集を作るには　＜リンク集の作成＞
プロフィールページを作るには　＜プロフィールページの作成＞

?

●基本的な内容
HTMLのバージョンを示す
最低限必要な要素
全体の文字色を設定する
全体の背景色を設定する
全体の背景画像を設定する
目的に応じて範囲を設定する
コメントを入れる
●文書情報
タイトルを付ける
文字コードを示す
キーワード・内容の紹介・制作者名を入れる
スタイルシートやスクリプトの言語を示す
基準URLを設定する
自動的にページを読み込む
●テキストの種類
見出しを表す
段落を表す
連絡先を示す
強調する
短い引用文を表す
長い引用文を表す
出典（参照先）を表す
略語を表す
追加したことを示す
削除したことを示す
定義対象の用語であることを示す
プログラム関連のテキストを表す
ルビをふる
特別な文字を表示させる
●スタイルとレイアウト
改行させる
横罫線を入れる
テキストのスタイルを指定する
空白や改行をそのまま表示させる
センタリングする
行揃えを指定する
文字色を指定する
フォントの種類を指定する
フォントサイズを指定する
フォントサイズを相対的に変える
フォントの基本サイズを指定する
●リンク
他のページにリンクする
同じページの特定の位置にリンクする
他のページの特定の位置にリンクする
リンク部分の文字色を設定する
リンク先を別のウィンドウに表示する
リンクでメールソフトを起動する
●リスト
マーク付きのリストを作る
●フォーム
フォームを作る
送信ボタンを作る
リセットボタンを作る
汎用的なボタンを作る
画像で送信ボタンを作る
自由にデザインできるボタンを作る
1行の入力フィールドを作る
複数行の入力フィールドを作る
パスワードの入力フィールドを作る
表示されないフィールドを作る
ラジオボタンを作る
チェックボックスを作る
メニューを作る
メニューの選択肢をグループ化する
リストボックスを作る
ファイル選択の機能を付ける
項目をグループ化する
ラベルテキストと項目を一体化させる
フォームの内容がメールで届くようにする
●CSSの組み込み
CSSの書かれたファイルを読み込む
style要素の内容として組み込む
任意の要素にstyle属性の値として組み込む
●CSSを適用する対象
特定の要素に適用させる
複数の要素に適用させる
すべての要素に適用させる
IDやクラスを指定した要素に適用させる
リンク部分に適用させる
1行目に適用させる
1文字目に適用させる
特定の要素に含まれる要素に適用させる
●フォント
文字色を指定する
フォントを指定する
フォントサイズを指定する
フォントの太さを指定する
フォントスタイルを指定する
フォントをまとめて指定する
●テキスト
行間を設定する
行揃えを指定する
縦方向の位置を指定する
文字間隔・単語間隔を設定する
1行目のインデントを設定する
空白や改行をそのまま表示させる
改行しないで表示させる
全体を大文字または小文字で表示させる
●背景
背景色を指定する
背景画像を指定する
左右への配置と回り込みを指定する
回り込みを解除する
センタリングする

はい。

ここまでの授業を受ければ、dreamweaver、html、CSSについて、かなり理解が深まったと思います。
では、次のステップに移りましょう。
また、新しいことを学びます。

次は、「javascript」です。聞いたこと、ありますか？
サイトを作ったことのある人、インターネットをよくやる人は、聞いたことがあると思います。
「javascript」というのは、言語の一種です。
これはですね、htmlに埋め込んで機能させることができるんですよ。
サーバーサイドで動くんじゃなくって、ブラウザの中で動くんです。
っていっても、ちょっとムズかしいですかね。
あ、注意ですけど、「java」とはまた違うんですよ。「java」と「javascript」はまったく別物ですからね。

どういうことができるのかってのを、とりあえず目次で確認してください。

動画でわかるjavascript　総合計時間　300分 （五時間）

はじめに見てください。拡張子が見られる状態にしてください


javascriptとは何だろう？javascriptについての説明　（２分）

javascriptをはじめてみよう

この章ではこういうプログラムを作ります　

文字列を表示するプログラムを書く　（9分）

プログラムをフォルダに保存する　　（２分）

作成したプログラムをテストしてみる　（２分）

今作成したプログラムを解説する　（9分）

文字列を表示するプログラムを書く

この章ではこういうプログラムを作ります

プログラムを書いてみよう　（5分）

javascriptでhtmlを使う

作るプログラムはこれ！　プログラム記述（10分）　　プログラムの解説（3分）

javascriptの基本的な言葉である、オブジェクト、メソッド、プロパティの三つの言葉について解説（8分）

javascriptで色をつける

作るプログラムはこれ！

javascriptで色をつけるプログラム記述＆解説　（10分）

javascriptでインタラクティブ（対話的）なページを作る

作るプログラムはこれ！　インタラクティヴなページのプログラム記述＆解説（７分）

確認を求めるウインドウを作るjavascriptプログラム！

作るプログラムはこれ！ 　 プログラム記述　（8分）

if構文をやってみようjavascriptプログラム！

作るプログラムはこれ！ 　プログラム記述＆解説 （10分）

データを入力するためのウインドウを開くjavascript 〜　プロンプトメソッドの説明

作るプログラムはこれ！　プログラム記述＆解説　（３分）

変数を使って、promptに変化を加えるjavascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説　（7分）

while構文　繰り返しの処理を行う　変化しながら繰り返すjavascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説（１１分）

for構文で繰り返し処理　文字の大きさを変えながら文字列を繰り返し表示javascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説（７分）

ブラウザの新しいウインドウを開くjavascript　ブラウザの上にもう一枚ウインドウを開くjavascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説（１０分）

新しいウインドウを開き、そのウインドウの種類を変えてみるjavascriptプログラム

作るプログラムはこれ！　

作るプログラムはこれ！2

プログラム記述＆解説　（５分）

用語を解説するウインドウ
大きなウインドウに本文があって、用語をクリックすると小さなウインドウが出て用語を解説するjavascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説１（１３分） 　プログラム記述＆解説２（８分）

ステータスバーに文字列を表示する、更新日時を表示するjavascriptプログラム

作るプログラムはこれ！　作るプログラム２　プログラム記述＆解説　（７分）

イベント処理　イベントに反応してさまざまなことをするjavascriptプログラム
ユーザーの要求があったときに何かを表示する
リンク先にマウスを置いたときに、リンク先の案内を表示する

作るプログラムはこれ！　プログラム記述＆解説 （８分）　 プログラム記述２　（５分）

今見ているページから他のページに写るときに「さようなら」と表示するjavascriptプログラム

作るプログラムはこれ！　プログラム記述＆解説　（８分）

ボタンをクリックするとウインドウが閉じるjavascript

作るプログラムはこれ！　プログラム記述＆解説　（３分）

ボタンをクリックすると、背景色と文字の色が変わるjavascript

作るプログラムはこれ！　プログラム記述＆解説　（８分）

ウインドウ上のボタンで、サブウインドウを開いたり、閉じたり、サイズを変えたりするjavascriptプログラム

プログラム記述＆解説（１８分）　解説２

フォームとエレメントについて　

フォームの入力　ユーザーからのデータ入力　掲示板などで使われるフォームのボタンを作る

作るプログラムはこれ！　プログラム記述＆解説（７分）　プログラム記述＆解説２（７分）

フォームから送信した文字を表示する

作るプログラムはこれ！　プログラム記述＆解説（７分）

フォームとエレメントを利用する　フォームやエレメントを配列で指定する

作るプログラムはこれ！　プログラム記述＆解説（１５分）

配列を使ってフォームとエレメントを指定する

作るプログラムはこれ！　プログラム記述＆解説 （１０分）

配列でフォームとエレメントを指定する２

作るプログラムはこれ！　プログラム記述＆解説（１１分）　←このプログラムの修正箇所　プログラム記述＆解説　（３分）

クイズを作ってみよう！

作るプログラムはこれ！　プログラム記述＆解説（８分）　 　←このプログラムの修正箇所

クイズを作ってみよう２

作るプログラムはこれ！　プログラム記述＆解説（７分）　プログラム記述＆解説（１分）

クイズを作ってみよう３　プルダウンメニュー方式のクイズ

作るプログラムはこれ！　プログラム記述＆解説（７分）　プログラム記述＆解説 （２分）

関数を使う

作るプログラムはこれ！　プログラム解説（２分）　プログラム記述＆解説（５分）

ホームページを訪れる時間によって表示するメッセージを変える

プログラム記述＆解説 （７分）　 プログラム記述＆解説（３分）

まずは ＣＧＩです。

「動画でわかるPerl/CGI」より

ＣＧＩって何？と思う人もいるかもしれません。
代表的なものを挙げます。2ちゃんねるという大型掲示板がありますね。
あのサイトは、ＣＧＩを用いて作られています。
情報をもらって、それを返す。そういう、動的なサイトを作ることができるんです。
ただし、「動画でわかるＣＧＩ」では、ごく基本的なことにしか触れていません。
もっと詳しく学びたい人は、ぜひご自分で勉強をしてください。

?

動画でわかるPERL/CGI

ソフトはすべてここに入っています

CGIの世界

CGIでできること [CGIの具体例]

CGIを動かしてみる

Perlをインストールするには [Perlのインストール]
Perlのインストールを確認するには [Perlのインストール確認]
エディタをインストールするには [秀丸のエディタのインストール]
Webサーバをインストールするには [Apacheのインストール]
Apacheを設定するには [Apacheの設定]
HTMLファイルを表示するには [HTMLファイルの表示]
ブラウザを設定するには [Internet
スクリプトを実行するには [スクリプトの実行] サンプルファイル
CGIスクリプトをブラウザ上で実行するには [ブラウザ上での実行]　続き
CGIを公開するには [サーバーへの設置]　続き

Perlの基本
Perlを記述するには [Perlの記述法]
改行して文字を出力するには [エスケープ文字]
何行にもわたる文字列を出力するには [ヒアドキュメント]
データを一時的に保管するには [スカラー変数]
スカラー変数で文字列を扱うには [スカラー変数／文字列]
スカラー変数を使って計算するには [スカラー変数／数値]　続き
条件で処理を分岐するには [if文]
条件を満たさないときに処理を行うには [elseブロック]
複数条件で別々の処理を行うには [elseifブロック]
一定の条件のときに処理を繰り返すには [whileによる繰り返し]
決まった回数だけ処理を繰り返すには [forによる繰り返し]

配列とハッシュ
スカラー変数に連番をつけて管理するには [配列]
配列のデータを追加・削除するには [配列／データの削除・追加]
配列の全データに対して繰り返し処理を行うには [配列／foreach文]
範囲を決めて繰り返し処理を行うには [配列／for文]
このレッスンはサンプルフォルダのsec29を使ってください　リストを活用するには [リスト]
このレッスンはサンプルフォルダのsec30を使ってください　キーワード付きでデータを格納するには [ハッシュ]

サブルーチン
処理をまとめるには [サブルーチン]
サブルーチンに引数を渡すには [サブルーチン／引数を渡す]
サブルーチンから値を返すには [サブルーチン／値を返す]

ファイル操作
ファイルを開いたり閉じたりするには [ファイルを開く・閉じる]
ファイルから読み込むには [ファイルの読み込み]

はい、最後になりました。ＰＨＰです。
「俺ＰＨＰ使えるんだ」なんて言ったら、ウェブ業界では一目おかれますよ。
今、いちばん熱い言語であるといっても過言ではありません。
とある人がいうには、java以上の言語になるのではないかという話です。

例を挙げますと、mixiというサイトがありますね。
あのサイトはPHPで作られています。
あと、みなさん大好きな「Yahoo! Japan」も、ＰＨＰで作られています。

私の予想ですが、おそらくニコニコ動画やYouTubeもＰＨＰを使って作られているのでは、
と思っています。

ＰＨＰは、言語をそのままhtmlに組み込める点が主な特徴です。
javascriptがブラウザの中で動くのに対し、ＰＨＰはサーバーの中で動きます。
・・・と、専門的な話は、専門書に任せます。
「動画でわかるＰＨＰ」では、ごく基本的なことにだけ触れています。
「ＰＨＰのすべてがわかる」だなんて、思わないでください。
この動画を見たからって、いきなりmixiが作れるようにはなりません。
あくまでも超初心者向けの動画であることに注意してくださいね。

「動画でわかるPHP/MySQＬ」より

動画でわかるPHP/MySQL

PHP本体、apacheなど、ソフトはここに入っています。

PHPはどんな言語？ ［PHPの特徴］
Windowsで稼動させるには ［Windowsにインストール］ 続き

perl/cgiで秀丸とアパッチをインストールされた方は次の二つのレッスン不要です。
エディタをインストールするには [秀丸のエディタのインストール]
Webサーバをインストールするには [Apacheのインストール]
ＰＨＰ設定手順１　［Apacheの設定］1　
ＰＨＰ設定手順２　
ＰＨＰ設定手順３
ＰＨＰ設定手順４　
ＰＨＰ設定手順５

文字を表示するには ［文字の表示］
HTMLにPHPを埋め込むには ［HTMLに埋め込む］
定数を使うには ［定数］
データを並べて操作するには ［配列］
配列２
配列３
配列４

データとキーを関連させて保存するには ［連想配列］
演算子を使うには ［演算子］
条件を判定して処理を分岐するには ［if文］

if文2

if文3

複数の条件で処理を分岐するには ［switch文］　switch文２
ある条件のときだけ繰り返すには ［while文］
指定した回数だけ繰り返すには ［for文］ for文２
配列や連想配列を一度に処理するには ［foreach文］
処理を飛ばして繰り返したり中断するには ［break文］
別ファイルに記述した処理を読み込むには ［require文・include文］
処理をまとめるには ［ユーザー定義関数］
関数に引数を渡すには ［引数］

データベースの準備
データベースのインストール ［データベースのインストール］
Windows版MySQLを設定するには ［Windows版の設定］
データベースを作成するには ［データベースの作成］

データ操作の基本
テーブルを作成するには ［テーブル作成］　テーブル続き　テーブル続き２
データをテーブルに挿入するには ［データの挿入］　テーブル続き　テーブル続き２
データをテーブルから検索するには ［データの検索］　データ検索続き　データ検索続き２
データを更新するには ［データの更新］
データを削除するには ［データの削除］

PHPによるデータベースの利用
データベースに接続するには ［データベース接続］

最後に、「動画でわかるホームページビルダー」に関して解説します。
この商品では、主にDreamweaverを使ってサイトを作る方法を学んでいきますが、
ホームページビルダーの使い方くらい知っておいたほうがいいんじゃないか？と思ったので、
このセットに入れておくことにしました。
ウェブ製作の現場でビルダーを使っている会社はないと思いますが、
ビルダーは人気のあるソフトですから、使い方を知っておいて損はありません。
ビルダーってどういうソフト？という話ですが、まあその名のとおり、ホームページを作るソフトです。
ってそれじゃあ、そのままですね。

ホームページを作ったことのない、まったくのズブの素人さんでも、
この程度のサイトを作れるまでに成長してもらいます。

http://infonet.lunarpages.net/samples/dougadewakaru/syouhin/0001/fc2douga/index.html

「動画でわかるホームページビルダー」の中では、実際に↑これと同じサイトを作っていきます。

このサイトを、実際に一緒に作っていくわけです。
この教材を見れば、このサイトを作るのはすぐです！
ソフトの立ち上げ方から、各画面の使い方、
サーバーの借り方まで手取り足取り解説させていただきます。

ホームページとは？表とは？アップロードとは？
なんて、本で読んで勉強しても、まずやる気なくしますし、
おぼえられません。

ソフトを身につける方法はただひとつ、
「実際に使ってみる」ことです。

実際にサイトを作っていったほうがわかりやすいので、
一緒にサイトを作っていくという勉強形式にしました。

ホームページビルダー、けっこう深いことができるんですねえ。
アニメを作ったりとか、携帯用のサイトを作ったりもできてしまうんです。
昔からホームページビルダーユーザーだったのですが、最近の進歩はほんとすごいです。
では、とりあえず、サンプル動画を見てください。

動画でわかるホームページビルダー
ホームページを作成する準備をする
基本ツールを覚える
ページのタイトルや文字の色を設定する
目立つタイトルロゴを作成する

?

動画でわかるホームページビルダー
ホームページビルダーを起動する
サンプルについて
サンプルを使ってホームページを作成する
どこでも配置モードで文字や画像を移動する
どこでも配置モードで文字や画像を追加する
作成したページを確認する
ホームページビルダーを終了する
ホームページを作成する準備をする
基本ツールを覚える
ページのタイトルや文字の色を設定する
背景の壁紙を設定する
目立つタイトルロゴを作成する
文章を入力する
入力した文章を編集する
文字の大きさを変える
文字の色を変える
文字の書体を変える
ロゴや文章を中央に寄せる
内容を区切る線を引く
作成したページを保存する
ホームページのコンテンツを増やしていく
作成済みのサイトを開く
サイトに新しいページを作成する
画像作成のためにソフトを起動する・ウェブアートデザイナー
バナーの画像を作成する
バナーを挿入する
素材集から画像を挿入する
画像と文字の位置を中央でそろえる
自分の好きな写真をホームページに貼り付ける
写真の横に文章を入れる
別のページからトップページにリンクさせる
外部へのリンクをさせる
トップページからリンクさせる
サイト内のリンクを確認する
表を作成する
表の大きさを変える
表の中に文章を入れる
セルを結合する
セルの中で文字の位置を変える
表の中の色を変える
罫線の太さを変える
行を追加する
写真に効果を加える
マウスポインタを合わせると色が変わるボタンを作成する
ロゴの文字を回転させる
imodeなど携帯用サイトを作る