4月の授業日記

4/11ホームページ（ウェブサイト）の作成

ワープロとの違い

• 第三者が直接閲覧
• 他人が扱えるよう留意

言語

• HTML言語で記述
• 記述ソフト＝エディタ

閲覧ソフト

• 言語を解釈して読みやすく表示（HTLMは脚本）
• 閲覧専用ソフト＝プラウザ

保存場所

• パブリックスペースのサーバーに保存
• 転送ソフト＝FTPソフト

Dreamweaver

記述・閲覧（プレビュー）・転送の機能を備えワープロのように記述できるソフト

きょうのひとこと

今日の学習では、説明を受けながらや教科書見ながらでしたが、実践となると難しそうだなと感じた。

4/19　テキストの修飾

HTLMでは改行と階段落を区別（ｐ36）

階段落＝enter

• 前後と文脈の意味の違う段落を区切る
• 前後に１行空行が入る。

改行＝Shift+Enter

• 同じ段落内で単に改行だけしたい場合
• 空行は入らない（ワープロと同じ）

区切り線

• 挿入バーor挿入メニューから区切り線を挿入できる。

水平揃え

• 行単位では行えず段単位
• プロパティインスペクタから中央揃え・右揃えなどのアイコンをクリック

リスト（ｐ40）

• 頭にドットがつき箇条書きにできる。

番号つきリスト

1. 頭に数字がつく
2. 番号リスト

解除するにはenterキーを二回

ページ全体に関する設定ページプロパティ

• 背景色
• 文字色

プロパティインスペクタが使えないので修正メニューのページプロパティ

表示効果だけの要素（非推奨）

文字に関係なくドラッグして文字のサイズや色を変えることもできるが、専用のスタイルシートと切り分けられたので比推奨

今日のひとこと

だんだん凝ったホームページを作成できるようになってきたのでおもしろいです。

4月27日　画像の挿入

HTMLにおける画像の扱い

HTLMはテキスト形式なのでファイル内に画像が埋め込めない。

1. 表示させたい画像をHTLMとは別に用意する。
2. その画像がどこにあるのかを記述する。

授業での画像の保存場所

1. とりあえず使えそうなものを保存し（web/DL）
2. そのなかから使用するもんを（web/site/img）をコピー

DWでの画像の貼り付けの流れ

1. 画像の準備
   1. 必要なファイルをDLファイルに保存
2. 画像の挿入
   1. 挿入バーからイメージ
   2. （コピーするように確認を求めてくるので）イメージフォルダを指定しコピーを保存。
   3. 画像があるフォルダやファイル名が記述されることで画像が表示される。
3. アップロード
   1. アップロード時に確認される「依存ファイル」＝貼り付けられている画像のこと。
   2. 「はい」で必要な画像も一緒にアップロードされる。

使用できる画像の種類（ｐ174）

画像ファイルはファイルサイズが大きく、ダウンロードに時間がかかるので圧縮（最適化）したものを使用する。

最適化の種類

1. jpeg(ジェイペグ)

画像を劣化させて計量化する。

• 写真など色数の多いもの
• 背景は透過できないので四角い

gif（ジフ）

画像の色数を減らして軽量化する

• イラスト等色数の少ないもの
• 背景を透過できるものもある
• 動かすことの出来るアニメgifもある。

背景画像

ページの背景に画像を敷き詰めることも出来る。（＝ページプロパティで設定）

• ページのサイズはブラウザの状態により可変するので
• 小さい画像（軽い）をタイル上に繰り返して表示させる

この画像を背景に配置した。

今日の一言

画像を挿入することによって、ページが華やかになった。