CEC公開授業 Webサイト制作にチャレンジ！ 2007年11月20日 於：東京都立板橋有徳高校 学校インターネット教育推進協会.

Presentation on theme: "CEC公開授業 Webサイト制作にチャレンジ！ 2007年11月20日 於：東京都立板橋有徳高校 学校インターネット教育推進協会."— Presentation transcript:

1 CEC公開授業 Webサイト制作にチャレンジ！ 2007年11月20日 於：東京都立板橋有徳高校 学校インターネット教育推進協会

2 CEC公開授業：Webサイト制作にチャレンジ
このレッスンの内容 　■WWWって何？ 　■WWWはどうやって作るの？ 　　◆HTML・CSSとは 　　◆HTMLタグ 　■実際に作ってみよう！ 　　◆雛形ページについて（HTML・CSS） 　　◆文字を変更（HTML） 　　◆写真を変更（HTML） 　　◆背景を変更　色・背景画像（CSS） 　　◆リンクをはる（HTML) 　■どんなWebサイトができたかな？ この授業は、競輪の補助金を受けて実施します。 財団法人コンピュータ教育開発センター

3 ■WWWって何？ ●特徴１ ●特徴２ WWW（ワールドワイドウェブ）は、インターネット上でさまざまな情報を発信するためのしくみです。
ページどうしがリンクしていること。他（ほか）のページともリンクできるので、クリックしていくだけで、いろいろなページに行くことができます。 ●特徴２ 文字だけではなく写真や音やビデオなども発信することができます。

4 ■WWWはどうやって作るの？ WEBページはHTML（エイチ・ティー・エム・エル）という決まりで書かれています。
HTMLはHyper Text Markup Languageの略です。 　●HTMLは文章の内容と構造の記述をします。　　　●見栄え（表現）はCSSで指定します。

5 HTML文書はブラウザーの表示から「ソース」を選択することで見ることができます。

6 ■実際に作ってみよう！ ●雛形ページをもとにして作成 ★文字の修正 ★写真の修正 ★背景画像の修正 ★リンクをはる ●制作方法
　　★文字の修正 　　★写真の修正 　　★背景画像の修正 　　★リンクをはる ●制作方法 　　★エディターでHTML文書を修正 　　★ブラウザーで確認

7 ◆雛形ページについて index.html デスクトップのwww内 profile.html other1.html other2.html

8 ◆文字を変える その１：other1.html ブラウザーの表示メニューから「ソース」を選択するとエディターにHTML・CSSが表示される。
タグは触らず、文章のみ変更する。 other1.html ソース

9 ◆文字を変える その２：profile.htmlの場合
ブラウザーの表示メニューから「ソース」を選択するとエディターにHTML・CSSが表示される。 タグは触らず、文章のみ変更する。 profile.html ソース

10 ◆写真を変える その１：other1.htmlの場合
images_other1というフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_others1この中から選択 other1.html ソース

11 ◆写真を変える その２：other2.htmlの場合
images_other2というフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_others2この中から選択 ソース other2.html

12 ◆写真を変える その3：profile.htmlの場合
images_profileというフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_profile この中から選択 profile.html ソース

13 ◆写真を変える その4：index.htmlの場合
images_indexというフォルダー内の画像の中から好きな画像を選び、ファイル名を変える。 images_index この中から選択 index.html ソース

14 ◆背景を変える　その１：色を変える ＨＴＭＬ色指定チャート を参照の上、body{background-color:#FF0000;} の:#FF0000 を変更。 ←CSS ソース ＨＴＭＬ色指定チャート other1.html

15 ◆背景を変える　その２：背景画像 body{background-color:#FF0000;} を次のように変更body{background-image:url(“画像ファイル名");} 例：body{background-image:url("./images_bg/bg_sample8.gif");} body{background-image:url("./images_bg/bg_sample8.gif");} ソース images_bg この中から選択 profile.html

16 ◆リンクをはる other2.htmlへのリンクをはる
　　＝＞　<li>と</li>の間に　<a href=“other2.html”>タイトル：その２</a>を挿入 <a href=“other2.html”>タイトル：その２</a> index.html ソース

17 ■どんなWebサイトができたかな？ みんなの作品を見てみましょう！