４月の授業日記

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

　　　ワープロとの違い

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

　　　言語

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

　　　閲覧ソフト

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

　　　保存場所

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

　　　Dreamweaver

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

今日の一言
はじめて学んでいるから、さっぱりわからないです。今後よろしくお願いします。

▲カレンダー

4/19　テキストの修飾

　　　改段落＝Enter

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

　　　改行＝Shift+Enter

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

　　　区切り線（P41)

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

　　　水平揃い

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

　　　リスト（P41)

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

　　　番号付きリスト

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

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

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

• 背景色
• 文字色

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

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

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

　　今日の一言
簡単そうだが、まだ覚えてないです。

▲カレンダー

4/27 　画像挿入

　　　HTMLにおける画像の扱い

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

1. 表示させたい画像をｈｔｍｌとは別に用意する
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もある
   • 

　　　背景画像

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

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

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

　　今日の一言
困るわ

▲カレンダー