通常，ファイルはインターネットから閲覧できない位置に保存されている．そこで，インターネットで公開するためには，ファイルをWebサーバにアップロードする必要がある．本学のWebサーバは以下の手続きで利用できる．
- Webページは，文字を大きくしたり，色を変えたり出来ます．
- 文字の装飾等はHTMLというもので指定します．HTMLは Hyper Text Markup Language の略です．
- Web ページを作成するとは，HTML で書かれたファイルを作成することです．
- sample1.html をサクラエディタで編集して，適時ファイルを保存する．
- Webブラウザの描画を再読込する．
- html のタグ（マークアップ）については，サンプルファイルの他に，
情報実習用手引き（7.4.5章）
や「とほほのWWW入門」（学外リンク）などを参照．
- 箇条書き（リスト書き）：<ul> と <li>
- 図，画像を挿入：<img>
- 表を描画：<table>
■
- 以下のサンプルファイルを「lesson4」ダウンロードする．
- sample2.html ,sampleA.css ,sampleB.css
- 各ファイルを確認する．
- sample2.html の３行目（css の指定）を変更して，見た目の違いを確認する．
- sampleA.css を sampleB.css に変更する．
- sampleB.css を編集して見た目の変更を確認する．
- CSSで使用できるプロパティ一覧（カラーコード有り）
- 文字の大きさ：font-size
- 文字の色：color
- 文字の背景の色：background-color
- 行揃え：text-align
- Dreamweaver では，html タグの知識があまりなくても html ファイルを作成できます．
- Dreamweaver を起動する．
- Dreamweaver で sample2.html を開く．
- 操作画面
- ウィンドウ上部の表示ボタン「コード」「分割（コードとデザインが両方表示される）」「ライブ/デザイン」によって，表示画面がかわります．
- 「コード」画面には html のファイルがそのまま表示されます．
- 「デザイン」画面には html のブラウザから見た目が表示されます．
- 授業では，
- sample2.html のソースコードを「分割」で表示
- sampleA(B).css を別のファイルで表示
- Dreamweaver の特徴
- 【特徴１】コードを編集すると即座にデザインに反映される．
- 【特徴２】デザインを直接編集できる．
- 【特徴３】メニューから箇条書きや図を挿入できる．
- 箇条書き
- 「挿入」-> 「番号なしリスト」
- 図
- 「挿入」-> 「Image」
- 表
- 「挿入」-> 「Table」
- ハイパーリンク
- 「挿入」-> 「Hyperlink」
- 見出し
- 「挿入」-> 「見出し」
- 行揃え（左寄せ・中央寄せ・右寄せ）
- CSSで対応