|
|
|
学びキャンパスせと 講座 >
…終了（2010年後期）2010年後期の 【つくろう！じぶんのホームページ】講座は12月7日をもって終了しました。A-11クラス受講生さんの作品 （アドレス＆ケータイでピッと！）
          講座に関する追加説明，役立ち情報，質問への回答など
|
          | ほんとうは、画像加工までマスター出来てこそのホームページ制作だと思うのですが、全18時間の講座でそこまで学習するのはとても難しいので、「ヘッダー画像」はコチラで加工してしまいました。
送っていただいた元画像のサイズやイメージによって、太いヘッダー（高さ140px）だったり、細いヘッダー（高さ100px）だったりします。
ヘッダー画像は何枚か作りましたので、その中からお好みのものを選んでいただけたら…と思います。
←一部、ここに並べてみました。
（タグチセレクション。教室の席順で。） 講座では、
・「画像の配置」は「横：左」，「縦：上」
・「サイトのレイアウト変更」は「100～140ピクセル」
に設定しましたが、じぶんのホームページの雰囲気と相談して、あるいは、テーマに合わせていろいろ変えてみると楽しいと思います。（参照：テキストp147_別1-2） |
 メールフォームは、ホームページ訪問者の感想を聞いたり，アンケートを取ったり，イベントの参加者を募ったり…、コミュニケーションツールとして使うのに便利です。 ここではさらに一工夫！
メールフォームをショッピングカートとして使う例を紹介します。
実際に、商品販売ページを作ってみました。
商品は、「つくろう！じぶんのホームページ」の講座テキストです！
※ただし、インターネット通販を行う場合には、「特定商取引法に基づく表記」を記載する必要があります。詳しくは、経済産業省のウェブサイトをご参考ください。
※これは簡易式のオーダーフォーム例です。本格的なインターネットショップを経営する場合は、 Googleドキュメントでフォームを新規作成。
・スプレッドシートフォームで使った機能は、「テキスト」「ラジオボタン」「リストから選択」「段落テキスト」のみです。
・フォームのプロパティで、「フォームの周囲に枠線を付ける」にチェックを入れ、配置を右寄せにしました。
・ページのレイアウトを「2列」にして、左側に商品の説明と画像，右側に注文フォームを置いてみました。
※実際に注文フォームが載っているページはコチラ
 商品販売ページ フォーム送信後に表示される確認画面です。
 商品は、代金前払いのダウンロード販売物なので、お客さんからの入金が確認できたら、メールにファイル（商品）を添付して送ります。
通常の物販の場合は、フォームに、商品の「届け先住所」，「電話番号」，「配達希望日時」などの欄が必要になりますね。また、宅配便を手配した後、「商品を発送しました」といった通知メールを送信するなど、オンラインショップ管理人として、お客さんに対する細やかなフォローが必要になってくると思います。
|
（「OLIVE」被災者に役立つデザイン・アイデア・ノウハウを共有するプロジェクトサイト）も、Googleサイトで作られています。
|
●背景に「珊瑚色（#f5b1aa）」を設定。
// ソースコード //
<div style="background-color: #f5b1aa">ここに文字</div>
/////////////////////
|
●背景に「山吹色（#f8b500）」 ●枠線に「オリーブ（#72640c）」を設定。 // ソースコード // <div style="border: 3px #72640c solid; background-color: #f8b500">ここに文字</div> ////////////////////// |
●残念ながら・・・
「background-image」は使えませんでした。
※「background-image」は背景に画像を設定するソースコードです。
※2010年11月現在、Googleサイトでは、コンテンツ部分に背景画像は設定できないようです。（背景画像が設定できるのは、ラッパーやヘッダーなど一部の枠に限られています。）
|
（ファイヤーワークス）を使用します。画像の上に画像を乗せて透過させたり、グラデーションをかけたり、反射させたりする場合は、
（フォトショップ）を使います。