４月の授業日記

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

ワープロとの違い

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

言語

• ＨＴＭＬ言語で記述
• 記述ソフト＝エディタ

閲覧ソフト

• 言語を解釈して読みやすく表示(ＨＴＭＬは脚本)
• 閲覧専用ソフト＝ブラウザ

保存場所

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

Ｄｒｅａｍｗｅａｖｅｒ

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

きょうのひとこと

色々なソフトを使って難しいです。

ソフトを使うと難しいタグもワープロのように表示がされて見やすくて便利だと思いました。

使いこなせるようになりたいです。

４/１９　テキストの修飾

HTMLでは改行と改段落を区別(Ｐ３６)

改段落＝Enter

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

改行＝Shift＋Enter

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

区切り線(Ｐ４１)

• 挿入バーもしくは挿入メニューから区切り線を挿入できる

水平揃え

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

リスト(Ｐ４０)

• 頭にドットがつき箇条書きにできる
• プロパティインスペクタ＞リスト

番号付きリスト

1. 頭に数字が付く。
2. プロパティインスペクタ＞番号リスト

解除するにはEnterキーを２回

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

• 背景色
• 文字色

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

表示効果だけの要素(非推奨)

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

きょうのひとこと

リストが出来るようになって文章が見やすくなって良かったです。
色も綺麗に出来て良い感じです。

４/２７　画像の挿入

ＨＴＭＬにおける画像の扱い

ｈｔｍｌはテキスト形式なのでファイル内に画像を埋め込めない

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

授業での画像の保存場所

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

ＤＷでの画像の挿入の貼り付けの流れ(Ｐ４２)

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

使用できる画像の種類(Ｐ１７４)

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

最適化の種類

1. jpeg(ジェイペグ)

画像を劣化させて軽量化する

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

 

2. gif(ジフ)

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

• イラスト等色数の少ないもの
• 背景を透過できないものもある
• 

背景画像

ページの背景に画像を敷き詰めることもできる(＝ページプロパティで設定)

• ページのサイズはブラウザの状態により可変するので合わせることは出来ない
• 小さい画像(軽い)をタイル状に繰り返して表示させる

この画像を背景に適用した

きょうのひとこと

段々ホームページらしくなってきて嬉しいです。
可愛い背景がつけられて良かったです。