4月の授業日記
| 月 |
火 |
水 |
木 |
金 |
土 |
日 |
| |
|
|
|
|
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
13 |
14 |
15 |
| 16 |
17 |
18 |
19 |
20 |
21 |
22 |
| 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30
|
|
|
|
|
|
|
4/11 ホームページ（ウェブサイト）の作成
ワープロとの違い
言語
閲覧ソフト
- 言語を解釈して読みやすく表示（HTMLは脚本）
- 閲覧専用ソフト＝ブラウザ
保存場所
- パブリックスペースのサーバーに保存
- 転送ソフト＝FTPソフト
Dreamweaver
記述・閲覧（プレビュー）・転送の機能を備えワープロのように記述できるソフト
きょうのひとこと
HTMLを担当する安田です。半年間よろしく！
△カレンダーへ
4/19 テキストの修飾
改行と改段落を区別（P36）
改段落＝enter
- 前後と文脈の意味の違う段落を区切る
- 前後に一行空行が入る
改行＝shift+enter
見出しの設定（P38）
- 役割を指定することでそれにあった表示が行われる
- プロパティインスペクタ＞フォーマットから見出しの強さ（1〜6）を選ぶ
水平揃え
- 行単位では行えず段落単位
- プロパティインスペクタから中央揃え・右揃えなどのアイコンをクリック
リスト
番号付きリスト
- 頭に数字がつく
解除するにはenterキーを2回
ページ全体に関する設定＝ページプロパティ
プロパティインスペクタ使えないので修正メニューよりページプロパティ
表示効果だけの要素（非推奨）
文意に関係なくドラッグして文字サイズや文字色を変えることもできるが専用のCSSと切り分けられたので非推奨
△カレンダーへ
4/27 画像の挿入
htmlにおける画像の扱い
htmlはテキスト形式なのでファイル内に画像を埋め込めない
- 表示させたい画像をhtmlとは別に用意する
- その画像がどこにあるかを記述する
授業での画像の保存場所
- とりあえず使えそうなものを保存し（web/DL）
- 必要な物を（web/site/img）にコピー
DWでの画像の貼り付けの流れ（P42）
- 画像の準備
- 必要なファイルをダウンロードフォルダに保存
- 画像の挿入
- 挿入バーから画像の挿入
- （コピーするように確認を求めてくるので）imgフォルダを指定しコピーを保存
- 画像のあるフォルダやファイル名が記述されることで画像が表示される
- アップロード
- アップロード時に確認される依存ファイル＞貼りつけられている画像のこと
- 「はい」で必要な画像も正しい位置に一緒にアップロードされる
使用できる画像の種類（P174）
画像ファイルはファイルサイズが大きく、ダウンロードに時間が掛かるので圧縮（最適化）したものを使用する
最適化の種類
- jpeg（ジェイペグ）
画像を劣化させて軽量化する
- 写真など色数の多いもの
- 背景は透過できないので四角い
- gif(ジフ)
画像の色数を減らして軽量化する
- イラスト等色数の少ないもの
- 背景を透過できるものもある
- 動かすことの出来るアニメgifもある
背景画像
ページの背景に画像を敷き詰める事もできる（＞ページプロパティで設定）
- ページのサイズはブラウザの状態により可変するので合わせることは出来ない
- 小さい画像（軽い）をタイル状に繰り返して表示させる
この画像を背景に配置する
きょうのひとこと
ページの背景に画像が敷けるのがワープロとの大きな違いです
△カレンダーへ