7 月 20日の授業内容

課題：　ホームページの作成　－各自のページを完成させる－

    Webページの完成イメージ

    受講している環境によって教材が異なる場合がありますが、大学で授業が行われる場合は演習室の
    パソコンを使いますので、なるべくパソコンの教材も見ておくようにしてください！
    HTML による Webページ 作成の授業は、きょうで終わります。

A. 各自の Webページの作成

　A-1．利用している端末（パソコンやスマホ等）によってファイルの管理方法が異なりますが、
　　　　パソコンの場合は「デスクトップ」、Google ドライブの場合は「マイドライブ」の中に、
　　　　"Web"というフォルダを作成し、関係するファイルをその中に移動してファイルを管理
　　　　するようにしてください。
　　　　ドライブ(Google) や OneDrive(Microsoft) 、iCoud(Apple) は、一般的にはクラウド
　　　　ストレージと呼ばれ、インターネットに接続しておれば、どんな端末からでも基本的には
　　　　利用可能です。
　　　　在学中は、ドライブ(Google) を利用すると保存容量が無制限で利用できるのでメリット
　　　　が大きいと思います。

　A-2．サンプルページ を開いて完成イメージを確認する。

　A-3． パソコンによる各自の Webページ作成

　A-4． iOS (iPhone) による各自の Webページ作成

　A-5． Android による各自の Webページ作成


B. 画像の取扱いについて

　B-1. メールを使って画像を送る

　　　・スマホから自分のメールアドレスに画像を添付して送る。 （ 例： s20m999@ge.osaka-sandai.ac.jp ）

　B-2. 画像ファイルの取り出し （USBケーブル接続でスマホからPCに取り込む）

　　　・接続するUSBケーブルは、充電専用のタイプでは無理です。
　　　　データ転送可能なUSBケーブルを使ってください。

　B-3. 画像ファイルの取り出し （カードリーダによる）

　　　※ 注意事項
　　　　microSD カードや SDカードをスマホやデジカメから出し入れするときは、
　　　　必ず電源を切ってから行って下さい。

　B-4. エクスプローラの使い方

　B-5. 画像サイズの変更

　　　・画像解像度の変更（リサイズ）方法

    ※ 注意事項　【画像は全て横構図とする】　　参考のページ（アイティメディア様）
    　(1). 顔写真の画像サイズは、横幅を 180 ピクセルとする。（ "face.jpg" ）（切り抜き OK）
    　(2). 好きな風景の画像のサイズは、横幅を 1,280 ピクセルとする。
    　　　（ "photo-1.jpg"、"photo-2.jpg"、"photo-3.jpg"、"photo-4.jpg" ）
    　(3). 好きな風景のサムネイル画像のサイズは、横幅を 180 ピクセルとする。
    　　　（ "s-photo-1.jpg"、"s-photo-2.jpg"、"s-photo-3.jpg"、"s-photo-4.jpg" ）

　B-6. 各自の顔写真画像や好きな風景画像を WinSCP 、 iOS 、 Android でアップロードする。

　B-7. Webページで扱える画像の保存形式　→　参照してほしいページ（クイックリファレンス様）

    (1). JPEG形式　（ジェイペグと呼ぶ）（***.jpg, ***.jpeg）
    　　　写真画像の一般的な保存形式で、デジタルカメラや携帯・スマフォの写真は殆どが
    　　この形式です。　フルカラー画像（1677万色）を扱いますが、不可逆圧縮（情報量を
    　　減らす圧縮、元に戻らない）なので、保存時に圧縮率を上げれば画像の鮮明さが低下
    　　します。

    (2). GIF形式　（ジフと呼ぶ）（***.gif）
    　　　256色以内で表現する可逆性圧縮（元通り戻る）画像の形式です。ロゴやアイコン、
    　　リンクボタン、イラスト等の画像として使用されます。
    　　　この形式では、透明色の指定や簡単なアニメーションの表現も可能です。

    (3). PNG形式　（ピングと呼ぶ）（***.png）
    　　　この画像形式は、８ビットまたは２４ビットで表現できるので、GIF形式とJPEG形式
    　　の長所を持っています。ただし、可逆圧縮形式なのでフルカラー画像ではJPEG形式に
    　　比べてファイルサイズが大きくなること、アニメーション表現もできません。

C. ファイル管理の説明

    皆さんが、普段生活していると様々な情報があふれていますよね！
    高校の頃も授業で資料が配布され、科目別にファイルなどに綴じた経験があると思います。
    パソコンやスマホの場合も同様で、これからもたくさんのファイルを扱うことになります。
    そこで賢くファイルを整理していくことが重要になってきます。
    そのため、必要なファイルがすぐに取り出せるように整理して管理するためにフォルダー
    を利用します。
    例えば、【授業】というフォルダーを作成し、そのフォルダーの中に各授業の【科目名】
    フォルダーを作成します。さらにその中に【課題名】のフォルダーを作成するというよう
    に、たくさんの引き出しのようなものを作っていく感じです。
    引き出しの中に箱をいくつか入れ、さらにその箱の中にも別の小さい箱を入れていくよう
    なイメージかもしれません。
    この管理の方法は、パソコンでもスマホでも同様です。
    また、ファイルの保存先にも選択肢があってUSBメモリやクラウドストレージ、パソコン
    のストレージなど様々で、それぞれに特徴がありますので、うまく使い分けて行くことが
    重要です。

　C-1. フォルダーを使ったパソコン上での管理

　C-2. クラウドストレージ上での管理（ Googleドライブの場合 ） ← スマホの人も参考にしてください！

D. Webサーバ上のファイルの説明

　全てのファイル名は、原則的にサンプルに合わせてください！

　D-1. 関連画像を保存する

　　　下の画像をクリックして開き、画像上にマウスカーソルを移動して右クリックする。
　　　「名前を付けて画像を保存」を選択してファイル名はそのままで保存する。　→　"osu.gif"、"osu_bg.gif"
　　　　　　

　D-2. 各自が撮影して準備する画像

　　・顔写真の画像（横幅：180ピクセル）　：　"face.jpg"　（横構図に切り抜いて準備してもよい）
　　・撮影した風景の大きい画像（横幅：1,280ピクセル）　：　"photo-1.jpg"、"photo-2.jpg"、"photo-3.jpg"、"photo-4.jpg"
　　・トップページ上の風景表示画像（横幅：180ピクセル）：　"s-photo-1.jpg"、"s-photo-2.jpg、"s-photo-3.jpg、"s-photo-4.jpg"
　　・項目を追加した場合、"photo-5.jpg"、"photo-6.jpg"、"s-photo-5.jpg"、"s-photo-6.jpg" のように数値を変更してください。
　　・縦構図の人は、全体のバランスを考えてサイズを変更してもらってもよいことにします！

　D-3. トップページ用のHTMLファイル　→　"index.html"

　D-4. 自己紹介用のHTMLファイル　→　"profile.html"

　D-5. WinSCPの接続画面

　　　WinSCP で接続したときに、Webサーバ側が以下の画像のようになっておればＯＫです。（スマホの場合も同じです。）

　　　

　D-6. パソコン上のファイル

　　　
　　　※：何度も言いますが、画像サイズについては、横幅を以下のサイズに縮小してからアップロードして下さい！
　　　　・トップページ用 サムネイル画像のサイズ ： 180ピクセル
　　　　・リンク先の大きく表示させる画像のサイズ： 1,280ピクセル
　　　　・画像解像度の変更（リサイズ）方法 は、左のリンク先ページを参考にして下さい。

● 全履修学生のページ

参考ページ

    (1). 表示色サンプル

    (2). アクセスカウンター

    (3). カウンターフォント