4月の授業日記

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

ワープロとの違い

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

言語

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

閲覧ソフト

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

保存場所

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

Dreamweaver

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

きょうのひとこと

面白そうだと思いました

△カレンダーに戻る

4/19　テキストの修飾

HTMLでは改行と改段落を区別（P36）

改段落＝enter

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

改行＝shift+enter

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

区切り線（P41)

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

水平揃え

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

リスト（P40)

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

番号付きリスト

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

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

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

• 背景色
• 文字色

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

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

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

きょうのひとこと

見やすくなりました

△カレンダーに戻る

4/27　画像の挿入

HTMLにおける画像の扱い

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

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

授業での画像の保存場所

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

DWでの画像の貼り付けの流れ（P42）

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

    

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

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

最適化の種類

1. jpeg（ジェイペグ）

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

• 写真など色数の多いもの
• 背景は透過できないので四角い
2. gif（ジフ）

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

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

背景画像

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

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

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

きょうのひとこと

色々な画像を貼り付けました

△カレンダーに戻る