4月の授業日記

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

ワープロとの違い

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

言語

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

閲覧ソフト

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

保存場所

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

Dreamweaver

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

きょうのひとこと

サーバーなど今まであまり知らなかったので知れてよかったです。

△カレンダーに戻る

4/19　テキストの修飾

HTLMでは改行と改段落を区別(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もある
• 

背景画像

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

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

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

今日のひとこと

背景や画像の挿入の仕方がわかってよかったです

△カレンダーに戻る