目次［PDF］

:FEK<EKJ
x
C\jjfe(
Web サイト制作とは
001
スキルチェック問題.......................................................................... 003
(%( Web ページを作成する............................................................ 004
(%(%( Web ページを構成するそのほかの要素 ........................................... 005
(%) テキストエディタとマークアップ言語 .......................................... 007
(%* Web オーサリングツール.......................................................... 008
(%*%( マークアップ言語を学ぶ理由 ......................................................... 009
(%+ フロントエンドについて............................................................ 010
(%+%( Web ページのアクセシビリティ....................................................... 011
(%+%) Web ページのアクセシビリティで考慮すべき点 ................................ 023
演習 (%( アクセシビリティの検証テストを行う.................................. 024
(%+%* サイ
トマップ .................................................................................. 026
(%+%+ クリエイティブなデザインとブランド戦略 ............................................ 027
(%+%, ポータル....................................................................................... 030
(%+%- Wiki サイ
ト ................................................................................... 031
(%+%. ファイル形式とアクティブコンテンツ ................................................ 032
(%, Web サイトのバックエンド ....................................................... 035
(%,%( データベース接続 ......................................................................... 035
(%,%) ダウンロードにかかる時間と帯域幅の関係 ....................................... 038
(%,%* HTML ファイル名の付け方 ............................................................ 041
レッスンのまとめ.............................................................................. 044
レッスン 1 復習問題 ........................................................................ 045
C\jjfe)
マークアップ言語とサイト制作の基礎
047
スキルチェック問題.......................................................................... 049
)%( マークアップ言語の歴史 ......................................................... 050
)%(%( SGML（Standard Generalized Markup）
..................................... 050
)%(%) HTML（Hypertext Markup Language）....................................... 050
)%(%* XML（Extensible Markup Language）
........................................ 054
)%(%+ XHTML（Extensible Hypertext Markup Language）.................. 058
)%(%, W3C 標準に準拠した Web ページの作成 ...................................... 060
)%) Web サイト制作にあたっての基本方針 .................................... 061
)%)%( プロジェクト管理と Web サイ
ト制作プロジェクトの流れ ...................... 061
)%)%) Web サイ
ト制作の初期プランの立案と文書化................................. 062
演習 )%( 文化的多様性に対応している Web サイトを調査する ....... 065
)%)%* 関係者からの関連情報の入手....................................................... 065
)%)%+ Web サイ
ト制作プランの周知 ........................................................ 067
)%)%, 技術面・非技術面での検討 ......................................................... 068
)%)%- サイ
トの制作................................................................................. 069
)%)%. サイ
トの公開................................................................................. 072
)%)%/ サイ
トの運用................................................................................. 074
Web サイト制作の基礎｜
｜ ©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.
目次｜
｜ :fek\ekj
)%)%0 知的財産権 ................................................................................. 076
)%)%(' アウトソーシング .......................................................................... 077
演習 )%) 知的財産権の概念と法律を調べる .................................. 078
レッスンのまとめ.............................................................................. 080
レッスン 2 復習問題 ........................................................................ 081
C\jjfe*
XHTML のコーディング
083
スキルチェック問題.......................................................................... 085
*%( XHTML の利用について ........................................................ 086
*%) XHTML のタグと要素 ............................................................. 086
*%)%( 要素の書き方 ............................................................................... 086
*%)%) タグの構成 ................................................................................... 087
*%* 文章構造を記述する要素 ........................................................ 087
*%*%( XHTML における大文字と小文字の区別 ....................................... 088
*%*%) DOCTYPE 宣言（文書型宣言）................................................... 090
*%*%* <html> タグ ................................................................................. 092
*%*%+ <head> タグ ................................................................................ 092
*%*%, <body> タグ ................................................................................ 094
*%+ Web サイトのファイル構造 ...................................................... 095
*%, 開発環境の準備 .................................................................... 096
演習 *%( 簡単な XHTML ページを作成する.................................... 097
*%- スタイルシート ........................................................................ 101
*%-%( CSS の用語 ................................................................................ 102
*%-%) CSS の正しい書き方 .................................................................... 103
*%-%* 継承 ............................................................................................ 104
*%-%+ CSS と XHTML ........................................................................... 104
*%-%, CSS 使用の利点 ......................................................................... 105
*%-%- スタイルシートと互換性 .................................................................. 105
演習 *%) XTHML 文書にスタイルシートを適用する ......................... 105
*%. 段落とブロック要素について ................................................... 107
*%.%( 段落指定と改行 ........................................................................... 107
演習 *%* XHTML で段落指定や改行を行う ................................... 108
*%.%) 見出しレベル ................................................................................ 111
*%.%* タグのネスティング......................................................................... 112
演習 *%+ XHTML で見出しを設定する ........................................... 113
*%.%+ 整形済みタグ <pre> ..................................................................... 116
*%.%, インデントとセンタリング.................................................................. 117
演習 *%, XHTML を使ったインデントとセンタリング ......................... 119
*%.%- その他のブロック要素.................................................................... 121
*%/ インライン要素 ....................................................................... 122
*%/%( 太字、イタリック、アンダーラインテキスト........................................ 122
*%/%) フォントスタイル要素とフレーズ要素 ................................................ 123
©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.｜ Web
サイト制作の基礎
xi
:FEK<EKJ
xii
演習 *%- XHTML でテキストレベルの書式設定タグを使う............... 125
*%0 リスト .................................................................................... 126
演習 *%. XHTML でリストを作成する............................................. 128
*%(' より良いコーディング作法 ........................................................ 129
*%('%( 例外 .......................................................................................... 130
*%('%) 非表示のコメントを追加する......................................................... 130
演習 *%/ XHTML コードにおけるコメント........................................ 131
レッスンのまとめ.............................................................................. 133
レッスン 3 復習問題 ........................................................................ 134
C\jjfe+
罫線とグラフィック要素
135
スキルチェック問題.......................................................................... 137
+%( XHTML で罫線を表示する...................................................... 138
+%(%( 罫線の属性 ................................................................................. 139
演習 +%( XHTML の <hr> タグに属性を設定する ........................... 140
+%) 画像と Web ページ................................................................. 142
+%)%( 画像ファイルの形式 ...................................................................... 143
+%)%) 画像への alt 属性の設定 .............................................................. 145
+%)%* 背景画像と背景色の組み合わせ ................................................... 145
演習 +%) XHTML ページに画像を配置する .................................... 146
+%)%+ テキスト中に画像を配置する .......................................................... 148
演習 +%* XHTML でテキストに合わせて画像を配置する ................. 149
+%)%, 画像の表示サイズ変更 ................................................................. 151
+%* 特殊文字 ............................................................................... 152
+%*%( 半角スペース文字（ノーブレークスペース）
...................................... 153
演習 +%+ HTML 特殊文字を使った著作権表示の追加.................... 154
+%+ 色指定 .................................................................................. 155
+%+%( Web セーフカラーパレッ
ト .............................................................. 156
+%, Web ページの表示色と背景色 ................................................ 156
演習 +%, XHTML での Web ページの表示色と背景の変更 ............. 158
+%- フォント書式の指定 ................................................................ 159
演習 +%- タグを使ったテキストの書式設定 ...................................... 160
+%. Web デザイン ........................................................................ 162
+%.%( 配色 ............................................................................................ 162
演習 +%. Web サイトの配色を比較する.......................................... 163
+%.%) Web ページのレイアウト ................................................................ 163
演習 +%/ CSS と <div> タグを使った Web ページのレイアウト構造を確認する......... 168
レッスンのまとめ.............................................................................. 171
レッスン 4 復習問題 ........................................................................ 172
Web サイト制作の基礎｜
｜ ©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.
目次｜
｜ :fek\ekj
C\jjfe,
ハイパーリンク
173
スキルチェック問題.......................................................................... 175
,%( ハイパーリンクとは.................................................................. 176
,%) アンカータグ........................................................................... 176
,%)%( プロトコルの指定 .......................................................................... 178
,%)%) ハイパーリンクを作成する際の問題点 ............................................. 178
,%* ローカルリンクの作成 ............................................................. 179
演習 ,%( XHTML を使ってローカルリンクを作成する ...................... 180
,%+ 外部へのハイパーリンクを作成する.......................................... 184
演習 ,%) XHTML コードで外部のハイパーリンクを作成する ............ 185
,%, 画像にハイパーリンクを追加する ............................................. 185
演習 ,%* XHTML で画像をハイパーリンクとして使う....................... 186
,%- ページ内リンクの作成 ............................................................. 186
,%-%( 用語集の作成 .............................................................................. 187
演習 ,%+ ページ内リンクを使う....................................................... 188
,%-%) 外部ファイルのページ内リンクにアクセスする .................................. 192
,%. ハイパーリンクの管理 ............................................................. 192
レッスンのまとめ.............................................................................. 194
レッスン 5 復習問題 ........................................................................ 195
C\jjfe-
テーブル
197
スキルチェック問題.......................................................................... 199
-%( テーブルとは .......................................................................... 200
-%(%( XHTML とテーブル ....................................................................... 201
-%(%) <table> タグの属性 ...................................................................... 201
-%(%* <tr> タグの属性 ........................................................................... 202
-%(%+ <td> タグの属性 .......................................................................... 203
-%(%, HTML と XHTML の違い .............................................................. 203
演習 -%( ..................................................................................... 204
-%) テーブルとデータの配置オプション ........................................... 209
-%* テーブル要素の高さと幅の変更 ............................................... 211
-%+ セルの連結 ............................................................................ 214
-%, 表内のコンテンツの書式設定 .................................................. 216
演習 -%) XHTML テーブルに書式を設定する ................................. 217
レッスンのまとめ.............................................................................. 219
レッスン 6 復習問題 ........................................................................ 220
©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.｜ Web
サイト制作の基礎
xiii
:FEK<EKJ
xiv
C\jjfe.
Web フォーム
221
スキルチェック問題.......................................................................... 223
.%( Web フォームとは ................................................................... 224
.%) Web フォームと CGI ............................................................... 224
.%)%( CGI セッションの処理の流れ.......................................................... 225
.%)%) データ解析フォーム処理／名前と値のペア／ CGI ....................... 226
.%)%* CGI スクリプトの適用例（FormMail）............................................ 228
.%* <form> タグ ........................................................................... 230
.%*%( method 属性 ............................................................................... 231
.%*%) action 属性 ................................................................................. 231
.%*%* <input> タグ、<select> タグ、<textarea> タグ............................. 231
.%+ Web フォームフィールド ........................................................... 233
.%+%( フォームと name 属性 ................................................................... 236
.%+%) テキストボックス ............................................................................ 236
.%+%* ファイルのアップロード................................................................... 237
.%+%+ ［送信］ボタンと［リセット］ボタン ................................................. 237
演習 .%( 簡単な Web フォームの作成 ............................................ 238
.%+%, ラジオボタン ................................................................................. 241
演習 .%) Web フォームにラジオボタンのグループを追加する ............ 242
.%+%- チェックボックス............................................................................. 244
演習 .%* Web フォームにチェックボックスを追加する....................... 246
.%+%. 選択リスト .................................................................................... 249
演習 .%+ Web フォームに単一選択リストボックスを追加する ........... 250
.%+%/ 複数選択リストボックス.................................................................. 253
演習 .%, Web フォームに複数選択リストボックスを追加する ........... 254
.%+%0 スクロールするテキストボックス ....................................................... 256
演習 .%- スクロール可能なテキストボックスを Web フォームに追加する..... 257
レッスンのまとめ.............................................................................. 259
レッスン 7 復習問題 ........................................................................ 260
C\jjfe/
画像の利用
261
スキルチェック問題.......................................................................... 263
/%( Web での画像の利用 ............................................................. 264
/%(%( 画像の種類 ................................................................................. 264
/%) イメージマップ ........................................................................ 265
/%)%( クライアントサイドのイメージマップの設定 ........................................ 266
演習 /%( クライアントサイドのイメージマップを作成する................... 270
/%* 画像の透過表示 .................................................................... 273
演習 /%) Web ページに透過 GIF 画像や透過 PNG 画像を表示する ... 276
/%+ インターレース ........................................................................ 276
Web サイト制作の基礎｜
｜ ©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.
目次｜
｜ :fek\ekj
/%, アニメーション ........................................................................ 278
/%,%( アニメーション GIF ........................................................................ 278
/%,%) Flash アニメーション ..................................................................... 279
/%,%* Java アプレッ
ト............................................................................. 279
/%,%+ SVG（ScalableVectorGraphics ／スケーラブル・ベクター・グラフィックス）.... 280
/%,%, アニメーション技術を調べる ........................................................... 280
/%,%- アニメーションに関する問題点 ....................................................... 281
レッスンのまとめ.............................................................................. 282
レッスン 8 復習問題 ........................................................................ 283
C\jjfe0
285
フレーム
スキルチェック問題.......................................................................... 287
0%( XHTML におけるフレームとは ................................................. 288
0%) <frameset> タグ .................................................................... 289
0%* <frame> タグ ......................................................................... 290
0%+ フレームセットページ ............................................................... 291
0%+%( フレームセッ
トページのソースを見る................................................. 292
演習 0%( XHTML を用いて、列や行に分かれたフレームを作成する. 292
0%, <noframes> タグ ................................................................... 294
0%- ターゲットフレームへのハイパーリンクの設定 ............................ 295
演習 0%) XHTML を用いて、列や行に分かれたフレームを作成する. 298
0%. Base 要素によるデフォルトのターゲットの指定 ......................... 300
演習 0%* BASE ターゲットをフレームに追加する ............................. 301
0%/ ボーダ（枠）
、マージン、スクロール ....................................... 301
0%/%( ボーダレス（枠なし）フレーム ........................................................ 302
0%/%) フレームマージンの幅と高さ............................................................ 302
0%/%* フレームのスクロール..................................................................... 302
0%0 インラインフレーム .................................................................. 303
0%('フレームの適切な使用 ............................................................. 305
レッスンのまとめ.............................................................................. 306
レッスン 9 復習問題 ........................................................................ 307
C\jjfe('
Web オーサリングツール
309
スキルチェック問題.......................................................................... 311
('%(Web オーサリングツールとは ................................................... 312
('%)Web オーサリングツールの種類 ............................................... 312
('%)%( Web ページエディタ.................................................................... 313
©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.｜ Web
サイト制作の基礎
xv
:FEK<EKJ
xvi
('%)%) Web サイ
ト管理エディタ .............................................................. 313
('%*Web オーサリングツールの機能 ............................................... 314
('%*%( W3C Authoring Tool Accessibility Guidelines .......................... 315
('%+Web オーサリングツールを使って Web ページを作成する........... 316
演習 ('%( Web オーサリングツールを使って Web ページを作成する. 317
演習 ('%) GUI エディタでフォントと背景色を変更する..................... 319
演習 ('%* Web オーサリングツールで Web ページに罫線を挿入する . 320
演習 ('%+ Web オーサリングツールで箇条書きリストと順序付きリストを作成する..... 321
演習 ('%, Web オーサリングツールで他ページへのリンクを作成する 323
演習 ('%- Web オーサリングツールを使って Web ページに画像を挿入する 324
演習 ('%. Web オーサリングツールを使って、 HTML テーブルを作成する .. 325
('%,HTML テキストエディタと Web ページエディタ .......................... 328
('%,%( HTML テキストエディタ................................................................ 328
('%,%) Web ページエディタ.................................................................... 329
('%-ページのプレビューとコードの検証 ............................................ 330
('%-%( DOCTYPE 宣言の選択.............................................................. 330
('%-%) HTML コードの検証.................................................................... 331
演習 ('%/ Web オーサリングツールで生成した
演習 ('%/ HTML コードを検証する ................................................. 331
('%.Web サイトの公開 .................................................................. 332
('%.%( テスト用 Web サーバへの公開 ..................................................... 333
('%.%) NetscapeComposer を使った公開............................................. 334
レッスンのまとめ.............................................................................. 335
レッスン 10 復習問題 ...................................................................... 336
C\jjfe((
高度な Web 技術
337
スキルチェック問題.......................................................................... 339
((%( HTML の拡張 ........................................................................ 340
((%)サーバサイドスクリプトとクライアントサイドスクリプト................. 340
((%)%( プログラミング構文 ...................................................................... 340
((%* サーバサイドスクリプト ............................................................ 341
((%*%( PHP.......................................................................................... 342
((%*%) Perl........................................................................................... 343
((%*%* VBScript を使った ASP .............................................................. 344
((%*%+ C 言語....................................................................................... 344
((%*%, Java ......................................................................................... 345
((%*%- C# ............................................................................................ 346
((%*%. SSI ........................................................................................... 346
((%+ クライアントサイドスクリプト .................................................... 347
((%+%( クライアントサイドスクリプトの問題 ................................................ 348
((%+%) JavaScript ................................................................................ 348
Web サイト制作の基礎｜
｜ ©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.
目次｜
｜ :fek\ekj
演習 ((%( JavaScript スクリプトを使用して Web ブラウザの種類を検出する . 352
演習 ((%) 簡単な JavaScript を使用してインタラクティブな Web ページを作成する.....353
((%+%* VBScript ................................................................................... 355
((%, データベースへの接続............................................................. 355
((%,%( CGI とパーミッション.................................................................... 355
((%,%) N 階層アプリケーション ............................................................... 356
((%- CSS を使ったスタイル適用方法 .............................................. 358
((%-%( インラインスタイルの宣言............................................................. 359
((%-%) 埋め込みスタイルの作成 ............................................................. 360
((%-%* スタイルシートのインポート............................................................ 361
((%-%+ スタイルシートと Web ブラウザの互換性........................................ 362
演習 ((%* CSS を使って Web ページにスタイル設定を行う............. 362
((%. DHTML ................................................................................. 364
((%/ DOM ..................................................................................... 365
((%/%( Web ブラウザの DOM にアクセスする.......................................... 365
演習 ((%+ 使用中の Web ブラウザが W3C 勧告 DOM に準拠しているか確認する. 368
((%0 Web サービスプロバイダの利用 .............................................. 368
((%0%( ハウジング（コロケーション）
、専用ホスティング、バーチャルサーバ..... 370
((%0%) 必要なものを伝えサービス価格を交渉する..................................... 372
((%0%* サービスプロバイダから得ておくべき情報 ....................................... 372
レッスンのまとめ.............................................................................. 374
レッスン 11 復習問題 ...................................................................... 375
C\jjfe()
e コマース（電子商取引）
377
スキルチェック問題.......................................................................... 379
()%( 従来型の商取引と e コマース.................................................. 380
()%) e コマースのモデル ................................................................. 381
()%)%( Consumer-to-Consumer（個人対個人）................................... 382
()%* ビジネスとインターネット技術 ................................................... 383
()%*%( サプライチェーンマネージメント（SCM）
......................................... 383
()%*%) ERP（Enterprise Resource Planning ／経営資源計画）........... 385
()%*%* XML による B2B 情報の共有 ..................................................... 386
()%*%+ インターネッ
トマーケティング ......................................................... 387
()%+ e コマースにおけるデータ形式の設定技術 ................................ 388
()%+%( EDI（電子データ交換）
............................................................... 388
()%+%) OBI ........................................................................................... 390
()%, e コマースの決済技術............................................................. 392
()%,%( 電子資金移動（EFT）................................................................ 392
()%,%) 代金決済ゲートウェイ.................................................................. 394
()%,%* SET（Secure Electronic Transactions）
.................................... 395
()%,%+ OTP（Open Trading Protocol）................................................ 397
()%,%, SSL/TLS................................................................................... 398
©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.｜ Web
サイト制作の基礎
xvii
:FEK<EKJ
xviii
演習 ()%( SSL/TLS セッションの学習 ........................................... 404
()%- グローバル環境での業務 ........................................................ 406
()%-%( 通貨と貿易 ................................................................................ 406
演習 ()%) 通貨の換算.................................................................. 408
()%-%) 海外発送................................................................................... 408
()%-%* 言語に関する問題 ...................................................................... 409
()%-%+ 取引関係管理 ............................................................................ 410
レッスンのまとめ.............................................................................. 411
レッスン 12 復習問題 ...................................................................... 412
Appendix 用語集 .................................................................................... 414
Web サイト制作の基礎｜
｜ ©2013 by CP JAPAN Co.,Ltd. Copyright, All Rights Reserved.

Download Report