4月の授業日記
4/11 webサーバー
インターネットで個々のファイルを共有(公開)することで超大な情報量を利用できる
webサーバ
- (インターネット上に公開された)サーバーにファイルを置くと誰もがどこからでもアクセスできる
サーバーとローカル
- ローカル>自分のPC
- サーバー>(インターネット上の)共有ディスク
ローカルで作成しコピーをサーバーにアップロードする
互換性
誰でも見られるように>
- ファイル名などは英数半角
- ワープロではなくHTMLで作る
きょうのひとこと
他人から見られることを意識して作ろう!
アップロード(put)(P237)(設定はP227)
- PC(ローカル)のファイルをサーバーにコピーすること
- アップロードしたいファイルをファイルパネルから選択し、上向きアイコンをクリック
- ファイルパネルメニュー>編集>新しいローカルアイテムの選択で新しく編集したファイルが自動で選択される(P238)
- ブラウザで新たに開いて(再読込・更新)確認
4/18 HTML文章の修飾
マークアップ(P38)
- 文章を(修飾するのではなく)機能毎に区切り、役割を明示する
- ワープロ>意味合いに応じた表現を記述者が行う
- HTML>意味合いの印を記述者がつけ、解釈は他者にゆだねる
- 機能に応じた表示をブラウザが行う
- 環境に応じた解釈が可能になる
- 設定したい部分にカーソルを置き、プロパティーインスペクタより選ぶ
段落(P36)
- Enterで文章が段落毎に区切られる
- 単なる改行はShift+Enter
見出し(P38)
- 段落毎に機能(意味合い)に応じて見出しのレベルをつける
- レベルは1〜6
段落揃え
段落毎にプロパティーインスペクタのアイコンから中央揃え、右揃えなどが選べる
行毎には設定できない
リスト(P40)
リスト
番号付きリスト
- 頭に数字がつく
リストの解除
- Enterキーを2回打つ
- もう一度リストボタンをクリック
テキストインデント
インデントのみされる
ページプロパティ
- ページには背景色やテキストカラーなどが設定できる
- プロパティーインスペクタでは選択できないので 修正>ページプロパティから設定
きょうのひとこと
少し判りやすくなってきた
4/25 画像の挿入
区切り線(P41)
- 区切りの線などパーツの挿入はウインド上部挿入バーより

HTMLにおける画像の扱い
HTMLはテキスト形式なのでファイル内に画像を埋め込めない
- 表示させたい画像を別に用意する
- その画像がどこにあるかを記述する
画像の保存場所
- web/ダウンロード
(バックアップ)
- web/site/img(アップロードされる)
DWでの画像の貼付の流れ
- 画像の準備
- 必要なファイルをダウンロードフォルダに保存
- 画像の挿入
- 挿入バーから画像の挿入
- (コピーするように確認を求めてくるので)imgフォルダにコピーを保存
- アップロード
- アップロード時に確認される依存ファイル>貼り付けられている画像のこと
- 「はい」で必要な画像も正しい場所に一緒にアップロードされる
使用できる画像の種類(P174)
画像ファイルはファイルサイズが大きく、ダウンロードに時間がかかるので圧縮(最適化)したものを使用する
- jpeg(ジェイペグ)

画像を劣化させて軽量化する
- 写真など色数の多いもの
- 背景は透過できないので四角い
- gif(ジフ)

画像の色数を減らして軽量化する
- イラストなど色数の少ないもの
- 背景を透過できるものもある
- 動かすことの出来るアニメgifもある

背景画像
ページの背景には画像を配置できる(>ページプロパティで設定)
- ページのサイズはブラウザの状態に応じて変わるので合わせることはできない
- 小さい画像(軽い)をタイル状に繰りかえして表示させる
この画像を配置する
今日のひとこと
ページの背景に画像が敷けるのがワープロとの大きな違い?