web presen1 0709

WebプレゼンテーションＩ第12回最終課題制作講座写真共有サービスを使用する嘉悦大学2009年7月9日担当：田所淳

今日の授業内容

• 最終課題制作に向けてのワークショップ

• Picasaの利用方法を学ぶ• (まだアカウントが無ければ) Googleアカウントを作成• Picasa のダウンロードとインストール• 写真の読込み、Webアルバムへのアップロード• Webアルバムの写真を、自分のWebページに張りつける方法

• フォトエッセーを作成 (最終課題の内容)• Webテンプレートのダウンロード• 自己紹介のページ (index.html) からリンクを張る• Picasa Webアルバムにアップロードした写真を貼ってみる• セクションタイトルや、本文の記述方法• 全体のまとめ

最終課題

• 課題内容

• 最終課題：フォトアルバムを作る• テーマ：自由！ (私の学生生活から変更しました)• 例：旅行記、わたしの趣味、友人の紹介、家族、グルメ日記 ...etc.

• 今日の授業で学習したPicasaをつかって写真を自分のホームページに張りつける方法で、フォトアルバムのページを作成する

• 写真+記事の量：最低5枚( + 記事) 以上• 自己紹介のページとあわせて、サーバーにアップすること

• 締切：7月23日 (必ず提出!!)

最終課題：制作の準備

• Picasaのダウンロード• Googleアカウントの作成• Googleアカウントをまだ取得していない場合は、新規にアカウントを作成する (授業内で説明します)

• Picasaを起動する• Webアルバムのアカウントにログインする

ココ

Picasaの使用方法

• 写真の準備• 写真一式を「ピクチャ」フォルダ内に配置• 自動的にPicasaに読込まれるはず


• 写真をWebアルバムにアップロードする• 写真を1枚選択• 「アップロード」ボタンを押す

ココ


• 新規フォトアルバムの作成• アルバム名の横の「新規」ボタンを押す• アルバムタイトルを設定• アルバムの可視性を「公開」にしてアップロード


• オンラインで確認• アップロード完了画面の「オンライン表示」ボタンを押す• ブラウザが起動して、写真をWebアルバムとして確認できる


• 複数の写真をアップロード• あとは同じ手順で公開したい写真をどんどんアップロードする• 最初に作成したフォトアルバムにアップしていくこと

Picasaの写真をWebページに貼る

• 制作テンプレートを下記からダウンロードする• http://tinyurl.com/lqefab

• このファイルの中にある “photodiary.html” が今回の最終課題のファイルになります。

• 自分が今まで作成してきた「自己紹介」のWebサイトの、”index.html” と同じ場所に、”photodiary.html” をコピーする


• サイトのファイル構造• 最終的なサイトのファイル構造は以下のようになります

www index.html

css default.css

photodiary.html

今回追加したファイル


• photodiary.html を開いてある• おおまかなテンプレートは既に作成されています


• photodiary.html のHTMLを編集する• EmEditorで photodiary.html を開く


• Picasa フォトアルバムから写真を一枚選ぶ• 画面横の「この写真ヘのリンク」に注目！


• 「この写真ヘのリンク」をクリックして設定欄を表示• 「サイズの選択」を「中 400ピクセル」に• アルバムリンクを非表示をチェック


• 「画像を埋め込み」の下に表示されているHTMLコードをコピーする

• EmEditorに戻り、「 」の部分を選択

• 右クリックして、先程コピーしたHTMLをペーストする


• PicasaのHTMLをペーストした状態


• ブラウザで確認：写真が自分のHTMLに貼られているはず


• この方法を繰り返して、Picasaにアップした写真をどんどん自分のページに貼っていく

• 写真の下に説明の文章を入れていく• 自分で設定したテーマに沿って、写真アルバムを作成していく

• 完成したら、Webサーバー (momo) にアップロード• 最終課題完成!!


• 制作サンプル「お散歩写真日記」• http://tinyurl.com/lep87m からダウンロードできます。

web presen1 0709

Documents