< 目次 > ネットコモンズを利用した学校ホームページの作成ネットコモンズ (NetCommons) の特徴 3 ネットコモンズとは 3 NetCommons のサイトにログインします 4 セッティングモードに切り替えページの構成設定をします 5 ページ編集の基本操作 6 学校のロゴを設定します

Size: px

Start display at page:

Download "< 目次 > ネットコモンズを利用した学校ホームページの作成ネットコモンズ (NetCommons) の特徴 3 ネットコモンズとは 3 NetCommons のサイトにログインします 4 セッティングモードに切り替えページの構成設定をします 5 ページ編集の基本操作 6 学校のロゴを設定します"

みさきあると
5 years ago
Views:

1 埼玉県のマスコットコバトン平成 27 年度 NetCommons 活用研修会ホームページ作成 : 初級編 NetCommons 演習テキスト埼玉県立総合教育センター

2 < 目次 > ネットコモンズを利用した学校ホームページの作成ネットコモンズ (NetCommons) の特徴 3 ネットコモンズとは 3 NetCommons のサイトにログインします 4 セッティングモードに切り替えページの構成設定をします 5 ページ編集の基本操作 6 学校のロゴを設定します 6 サイト名の変更をします 9 モジュールの基本操作 11 トップページを編集します 11 初期状態の不要なモジュールを削除します 11 トップページに新着情報のモジュールを追加します 12 お知らせのモジュールを追加します 13 HTML による編集 16 表示するモジュールの順番を変更します 16 お知らせのタイトルの変更や枠線の消すには 17 画面全体をきれいにそろえるには 18 メニュー編集の基本操作 19 メニューを追加します 19 メニューの順番を入れ替えるには? 20 メニューのページを一時的に非表示にするには 20 各モジュールの基本操作 21 日誌のモジュールを追加します 21 日誌のモジュールに投稿します 22 掲示板のモジュールを追加します 23 掲示板のモジュールに投稿します 24 既存のホームページを利用します 25 ページのスタイルを変更するには 28 カレンダーのモジュールを追加します 28 学校説明会の案内を作成します 31 登録モジュールを追加します 32 フォトアルバムを追加します 36 ページにカウンタモジュールを追加します 39 リンクリストのモジュールを追加します 40 学校の地図に google マップを利用します 41 RSS のモジュールを追加します 43 サイトの閉鎖 44 2

ネットコモンズを利用した学校ホームページの作成ネットコモンズ (NetCommons) の特徴ネットコモンズとは (1)CMS(Contents Management System) の1つであるネットコモンズネットコモンズは Web サーバとホームページ作成ソフトウェアが一体になった CMS の一つです CMSを利用しホームページを作成する利点は次のとおりです HTML

3 ネットコモンズを利用した学校ホームページの作成ネットコモンズ (NetCommons) の特徴ネットコモンズとは (1)CMS(Contents Management System) の1つであるネットコモンズネットコモンズは Web サーバとホームページ作成ソフトウェアが一体になった CMS の一つです CMSを利用しホームページを作成する利点は次のとおりです HTML に関する専門的な知識が必要ありません担当者ごとに権限が割り当てられているのでホームページの更新が特定の管理者の負担となることがありませんホームページ作成のための専用のソフトウェアを使わないですべての操作がブラウザ上で行えます必要な機能をモジュールとして追加することが可能ですユーザ管理を行うことによって双方向のコミュニケーションが可能になります電子メールと組み合わせることによって利用者への通知機能を利用することができますアクセス数の解析など戦略的なホームページの作成に役立ちます (2) どのようなページができるのか次のような構成になりますログインにより関係情報を知ることができますトップページの内容です新着情報はサイト内での更新された最新の内容などを表示します必要に応じカレンダーや天気予報カウンタなどを追加することができます必要な内容はモジュールとして追加することができます 3

4 NetCommons のサイトにログインします今回演習で利用するサイトに接続します URL は個人ごとに与えられたものをご使用ください演習用 URL NetCommons のサイトへ移動し管理者用 ID でログインします管理者用の ID とパスワードは指定されたものをお使い下さい演習用管理者 ID 演習用管理者パスワード管理者用の ID はこのサイトにおけるすべての権限を持ったものです取り扱いには十分に気をつけましょう 4

画面の設定を変更する場合はセッティングモードに切り替えます初期値のページスタイルは次のようになっています

5 次のような画面が表示されます仮のホームページが表示されますセッティングモードに切り替えページの構成設定をします NetCommons は必要な機能をモジュールという形で画面上に貼り付けながら作りますこのページは仮のものなので不要なモジュールを削除します画面の設定を変更する場合はセッティングモードに切り替えます初期値のページスタイルは次のようになっています好みによって変更すること可能ですがここでは次の形で作成しますヘッダ部ロゴログインボタンなどを配置します中央カラムコンテンツの内容を配置します左カラムメニューや関係する情報を配置します 5

6 ページ編集の基本操作学校のロゴを設定しますあらかじめロゴを画像作成ツールなどで作成しておきます大きさには指定はありませんが目安として次の通りです配置する段階で縮小ができますがあまり大きなサイズにならないように注意しますピクセル logo.gif マウスカーソルをヘッダ部に合わせると現在表示されている NetCommons のロゴ上にされますをクリックしてヘッダ部のロゴを編集しますが表示クリックしロゴを編集します次の様にワープロの編集画面と同じような画面が表示されます現在表示されているロゴの上でクリックしロゴの画像を選択し Delete キーでロゴを削除します 6

7 残った文字列も削除します画像や文字が消去できたら作成したロゴを登録します画像の挿入ボタンをクリックしますロゴの画像ファイルを指定します参照でファイル名を指定し画像の挿入で画像を貼り付けます大きさは画像のすみにあるハンドルで調節します次のように画像の下に文字列を入力します 7

8 よろしければ決定します次のようにヘッダ部が作成されましたセッティング終了します次のようにロゴが表示されます 8

9 サイト名の変更をします初期のサイト名としてサイト名未設定となっていますこれを学校名に変更します画面上部にある管理をクリックします次のようにコントロールパネルが表示されますその中のシステム管理を選択します一般設定のタブにあるサイト名を変更します 9

10 サイト名を変更後下方向にスクロールし決定をクリックします OK をクリックします下方向にスクロールシステム管理のメニューを終了しますをクリックします管理終了をクリックします次の様にサイト名が変更できました 10

11 モジュールの基本操作トップページを編集します通常ログイン後はプライベートスペースといって個人だけしか見ることができないページが開きますこれからトップページを編集しますのでメニューよりトップページをクリックします初期状態の不要なモジュールを削除しますセッティングモードにしますモジュールの一つ一つが枠に囲まれて現れます Welcome to NetCommons! の削除をクリックしますよろしければ OK もクリックします確認のメッセージが表示されます OK を選択します 11

のモジュールの追加を設定します新着情報のモジュールはサイト内に新しい情報が更新されると自動的に表示されますここではお知らせ掲示板日誌

12 IMAGIN のモジュールを削除しますマウスカーソルを IMAGIN の上に移動すると次のようにが現れますをクリックし削除しますの印次のようにメニューを残すだけになりましたトップページに新着情報のモジュールを追加しますメニューよりトップページを選択し新着情報のモジュールの追加を設定します新着情報のモジュールはサイト内に新しい情報が更新されると自動的に表示されますここではお知らせ掲示板日誌に更新があった場合現れるようにしますチェックができたら決定ボタンをクリックします次のように表示するべき情報がありませんので次のように表示されます 12

お知らせのモジュールを追加しますトップページにサイト作成の案内のお知らせを追加しますモジュールの追加をクリックしお知らせを選択します先ほどロゴを編集した時の画面と同じような画面が出てきました基本的な操作法はワープロと同じです文字だけでなく表や画像添付ファイル

13 お知らせのモジュールを追加しますトップページにサイト作成の案内のお知らせを追加しますモジュールの追加をクリックしお知らせを選択します先ほどロゴを編集した時の画面と同じような画面が出てきました基本的な操作法はワープロと同じです文字だけでなく表や画像添付ファイルリンクまで作成することができます次のように文字を入力し最後に決定をクリックします学校のホームページを新しくしましたこのホームページは NetCommons を利用して開設していますホームページの作成には多くの人の協力によって作られます次のようにお知らせが表示されます修正したい場合は編集を選択して下さい 13

14 下の図は NetCommons の共通エディタで表示されるツールボタンは次の通りです書式設定左からフォントサイズスタイルを設定するためのプルダウンメニューです効果をつけたい箇所の先頭でクリックするか効果をつけたい箇所をカーソルで選択してボタンをクリックします文字効果左から太字斜体下線取り消し線をつけるためのボタンです効果をつけたい箇所の先頭でクリックするか効果をつけたい箇所をカーソルで選択してボタンをクリックします下付上付文字下付文字上付文字をつけるためのボタンです文字色文字の色を変更するためのボタンです右側の下矢印を押すと文字の色を選ぶためのパレットが表示されます効果をつけたい箇所の先頭でクリックするか効果をつけたい箇所をカーソルで選択してボタンをクリックします背景色文字の背景の色を変更するためのボタンです右側の下矢印を押すと背景の色を選ぶためのパレットが表示されます効果をつけたい箇所の先頭でクリックするか効果をつけたい箇所をカーソルで選択してボタンをクリックします書式設定の削除設定した書式を削除するために使います書式を設定した範囲をカーソルで選択してからクリックして使います NetCommons1.1 以降のwysiwygエディタでは独自タグは廃止し HTMLによる本来の指定を用いていますそのため外部のWebページやWORDの文書をコピーペーストすると元のHTML 文書に書かれた指定が予期せずに残ってしまう場合がありますそういうときこのボタンを使えば書式設定をいっせいにクリアすることができます編集のやり直し編集をやり直したり再編集するときに使います文章の揃い文章を左揃い中央揃い右揃いにするときに使います文章を書き始める前にボタンをクリックしてもよいですし文章を書き終えてから範囲を指定してクリックしてもよいでしょう画像を中央にもってくるときにも活用できます段落箇条書き段落番号をつけたり箇条書きをするときに使います段落や箇条書きをはじめる前にボタンをクリックしますインデントの調整インデントの長さを調整するときに使います 14

表の作成文中に表を作成したり作成した表を編集したりするときに使いますまず表のアイコンをクリックすると下の図のようなイメージが表示されます表の上でマウスを動かして挿入したい表の行列の数になるように選んでクリックしますするとエディタ画面に空の表が表示されるので表のセルの中にカーソルを合わせてクリックし

数式を書く時に使いますこのボタンをクリックすると以下のようなユーザープロンプトが別窓で開きます Tex 表記文字を入力してくださいの下のボックスにTexの数式モードの記法にしたがって文字列を入力します ( 数式モードの始まりを示す $ マークは不要です ) プレビューを押すと

を記入します ( 読み上げソフトではこのタイトルを読み上げますので目の不自由な方のためにも適切なタイトルを記入するように心がけてください ) ターゲットとはリンクをクリックしたときの表示方法を指します指定しない場合ユーザがリンクをクリックすると画面がリンク先へ移動します新規ウィンドウを選択すると

15 表の作成文中に表を作成したり作成した表を編集したりするときに使いますまず表のアイコンをクリックすると下の図のようなイメージが表示されます表の上でマウスを動かして挿入したい表の行列の数になるように選んでクリックしますするとエディタ画面に空の表が表示されるので表のセルの中にカーソルを合わせてクリックしセルの中に文字を書き入れますより詳しい表の設定についてはの右側の下向き矢印をクリックしてメニューを表示させてください罫線文中に罫線を引くときに使いますクリックするとその場所に罫線が引かれます絵文字一覧絵文字一覧を表示させるボタンです他の CMS に比べ日本でよく使われるあいまいな表現が多いのが特徴です Tex 数式を書く時に使いますこのボタンをクリックすると以下のようなユーザープロンプトが別窓で開きます Tex 表記文字を入力してくださいの下のボックスにTexの数式モードの記法にしたがって文字列を入力します ( 数式モードの始まりを示す $ マークは不要です ) プレビューを押すとその文字列がどのように画面上に現れるかが表示されますその内容でよければOKをクリックしますリンク文中にリンクを張ったりそれを取り消したりすることができますリンクしたい箇所をカーソルで選択しをクリックするとリンクを挿入するためのプロンプトが別窓で表示されますリンク先のURLを記入しそのリンクを説明するタイトルを記入します ( 読み上げソフトではこのタイトルを読み上げますので目の不自由な方のためにも適切なタイトルを記入するように心がけてください ) ターゲットとはリンクをクリックしたときの表示方法を指します指定しない場合ユーザがリンクをクリックすると画面がリンク先へ移動します新規ウィンドウを選択するとリンク先が別画面として表示されますコンテンツの保存記入したコンテンツを HTML 形式で保存し手元の PC にダウンロードするために使います画像の挿入このボタンを使うと記事の中に画像を挿入することができます添付できる画像やファイルの形式は使っている NetCommonsの管理者が許可した形式に限られますをクリックすると画像挿入用の画面が表示されます参照ボタンをクリックしましょう 15

16 ファイルの添付このボタンを使うとコンテンツにファイルを挿入することができます添付できる画像やファイルの形式は使っているNetCommonsの管理者が許可した形式に限られますボタンをクリックするとファイルアップロード用の画面が表示されます参照ボタンをクリックしファイルを選択しますさきほどのアップロードの挿入のための画面で OK をクリックしますさらに別のファイルを添付したい場合には別のファイルを添付のリンクをクリックし同様の操作を行います編集画面の大きさの変更編集画面が狭すぎるまた広すぎると感じたときは画面右下にある面の大きさを調整することができます部分をつかんでドラッグすると編集画 HTML による編集画面下部にある HTML のタブをクリックすると直接 HTML ファイルを編集することができます表示するモジュールの順番を変更します新着情報とお知らせの順番を変更します新着情報のタイトル付近にマウスカーソルを置きお知らせの上にドラッグすることによって位置の変更ができますこの辺りをつかんでドラッグします 16

17 お知らせのタイトルの変更や枠線の消すにはお知らせのモジュールのブロックスタイルのタブを選択し一般のタブを選択しますその中のブロックの名称を変更し決定をクリックしますテーマや配色の中から希望の枠線を選択します配色の中で枠線の色を背景色に合わせるなどの指定し決定をクリックします 17

18 画面全体をきれいにそろえるには画面のロゴなどを記述するヘッダ部や左カラム中央カラムなど横幅をシステムに任せずに標準的な解像度を想定して横幅を設定するときっちりとしたページを作ることができます例えば最近高解像度のディスプレイが多く使われているので横幅を 1024 と仮定しこのサイトの横幅を 850 ドットとした場合次のようなブロックスタイルの幅が考えられます上左 1 右最小の広さヘッダ部上上左 2 右左 3 右左カラム中央カラム最小の広さ最小の広さ下下ブロックスタイルの設定例最小の広さ上右下左それぞれモジュールにおけるのブロックスタイルの一般の設定値を適当に変更し適用決定の順にクリックします 18

メニュー編集の基本操作メニューを追加しますここではトップページをようこそと変更し校長室より行事予定学校説明会のご案内

パブリックスペースこのスペースは誰もが見ることができるページですこのページを利用すると学校のホームページとして利用することができます

ログインすると現れます ( ゲスト権限は除く ) またプライベートスペースは名称としてハンドル名の部屋として表示されます

19 メニュー編集の基本操作メニューを追加しますここではトップページをようこそと変更し校長室より行事予定学校説明会のご案内学校アルバム学科の紹介事務室よりとの 5 つのページを追加しますメニューは基本的には次のスペースから成っていますパブリックスペースこのスペースは誰もが見ることができるページですこのページを利用すると学校のホームページとして利用することができますプライベートスペース自分以外は見ることができないページですキャビネットを利用して私的なデータを置いたり覚書などで利用しますログインすると現れます ( ゲスト権限は除く ) またプライベートスペースは名称としてハンドル名の部屋として表示されますグループスペース所属するグループの部屋として現れます同じグループに所属する利用者同士で情報を共有することができますページの作成方法は NetCommons2.0 から階層的に設けることができますページを取りまとめるカテゴリを置くことできますメニューの右側の編集をクリックしますまずはトップページをようこそと変更しページ追加をクリックします同様に校長室より行事予定学校説明会のご案内学校アルバム事務室よりのページも追加します 19

20 メニューを階層的に作成する場合はカテゴリ追加を選択しその下にページ追加を行います学科の紹介はカテゴリ追加で行いその中に普通科の紹介外国語科の紹介などと入れることができますページの追加が終わったら編集終了クリックしますメニューの順番を入れ替えるには? メニューの左側のを移動する位置までドラッグ & ドロップしますメニューのページを一時的に非表示にするにはメニューの左側の ON をクリックすると非表示のページになります一時的に見せたくないページは非表示にします表示非表示 20

植物の成長記録や学校行事の記録を掲載することができますメニューの校長室よりを選択しセッティングモードをクリックしますモジュール追加

21 各モジュールの基本操作日誌のモジュールを追加します校長室よりに日誌モジュールを追加します日誌モジュールは日々の記録を文字だけでなく図や写真を入れながら投稿することでブログと同じような使い方ができるモジュールです学校での使い方は毎日の給食を写真を入れて記録したり植物の成長記録や学校行事の記録を掲載することができますメニューの校長室よりを選択しセッティングモードをクリックしますモジュール追加から日誌を選択します新規作成のタブを選択しタイトル名を校長室だよりとし決定をクリックします一度に表示する件数を 5 件とし決定をクリックします 21

22 セッティングモードを終了します日誌のモジュールに投稿します校長室だよりに投稿します記事を書くをクリックします例として次のような内容を記述します内容がよろしければ決定をクリックしますはじめまして校長のと申しますこのたび学校ホームページを公開するにあたり校長だよりを立ち上げましたこれからは学校の様子を日々の記録として保護者の方や地域の皆様に伝えて行きたいと思います今後ともよろしくお願い申しあげます誤って記述した場合でも編集をクリックすれば再編集が可能です 22

23 また書きかけの場合一時保存としますこの場合は一時保存中となり公開されません投稿者には以下のように表示されます日誌のモジュールの特徴は最新のものが一番上に表示されます日々の教育活動の報告などはこのモジュールが有効に活用できますまた過去にさかのぼって内容を見ることができますので学校の記録としても活用できます掲示板のモジュールを追加しますモジュールの追加で掲示板を追加します掲示板に名前をつけます 1 つのサイトに複数の掲示板を作成しますので用途に応じ名前をつけます入力後決定ボタンをクリックします後に学習する投稿する人の権限も指定することができます 23

24 表示方法を指定しますまた返信などがわかるように展開方法も指定します入力後決定ボタンをクリックします掲示板のモジュールに投稿します次の様に掲示板が作成できました投稿は新しい話題の投稿をクリックします投稿する件名と内容を入力します記入の方法は日誌のモジュールと同じです入力後投稿するボタンをクリックしますまた途中の場合は一時保存ボタンをクリックしますこの場合記述品内容は保留のままとなり他の人は見ることはできません 24

掲示板に投稿されました詳しく見たい場合は件名をクリックします記事の内容に返信を書くをクリックします投稿者は

管理者の権限があれば投稿した内容を削除することもできます掲示板の扱いについてはご注意ください

25 掲示板に投稿されました詳しく見たい場合は件名をクリックします記事の内容に返信を書くをクリックします投稿者は投稿した内容に誤りがあった場合は編集ボタンで再編集することができますまた管理者の権限があれば投稿した内容を削除することもできます掲示板の扱いについてはご注意ください掲示板といっても公開できる場所におくとホームページとなりますので通常の学校ホームページの発信の方法と同様な扱いをお願いしますまた後に学習するユーザ管理をすることによって掲示板の内容を電子メールで配信することも可能になります既存のホームページを利用しますパブリックスペースの事務室よりにお知らせのモジュールを追加します事務室よりにメニューを切り替えセッティングモードにしますどちらかをクリック 25

26 お知らせのモジュールを追加しますお知らせのタイトルを各種証明書の申請についてに変更しますブロックスタイルのタブを選択しますブロックスタイルのタブの中の一般を選択しますブロック名称を各種証明書の申請についてに変更しますブロック名称を修正後決定ボタンをクリックします 26

ブロック名称が変更されました内容を記述するため編集をクリックします既存のホームページがある場合はその内容をそのまま

コピーする範囲をドラッグし編集コピー (Ctrl+c) しますコピーしたいお知らせの編集画面で右クリックをし

27 ブロック名称が変更されました内容を記述するため編集をクリックします既存のホームページがある場合はその内容をそのままお知らせのモジュールに取り込むことができます既存のホームページのコピーしたい箇所をドラッグし編集でコピーしますコピーする範囲をドラッグし編集コピー (Ctrl+c) しますコピーしたいお知らせの編集画面で右クリックをし貼り付けを選択しますよろしければ決定しますこのように既存のホームページがある場合簡単に移行することができますしかし注意しなければならないことはコピーする内容に画像などが含まれる場合リンク情報が登録される関係で元のホームページを削除されると画像などが表示されなくなります画像などは個々にアップロードするかもともとのホームページを削除しないようにして下さい 27

28 ページのスタイルを変更するには NetCommons を利用すると間単にページの編集ができることがわかったと思いますが独自のデザインがほしい場合はデザインを変更することができます画面上部にありますページスタイルをクリックしてくださいページスタイルの中から様々なテーマを選ぶことができます気に入ったテーマを選択し決定をクリックします各モジュールからモジュールのテーマを選択することができます気に入ったテーマを選択し決定をクリックしますカレンダーのモジュールを追加します行事予定表のメニューの中にカレンダーのモジュールを追加します 28

29 月ごとに大きく表示したいので月表示 ( 拡大 ) を選択し決定ボタンをクリックしますセッティングモードを終了しますセッティングモードは各ページにモジュールを追加や削除レイアウトの構成を修正する際に切り替えます内容の記述についてはユーザの権限の範囲内でセッティングモードに変更しなくても編集することができますユーザの権限については後に説明します 29

行事予定を追加します予定を追加する日にマウスカーソルを合わせをクリックします件名と公開対象をパブリックスペースとし決定ボタンをクリックしますパブリックスペースに登録するとインターネット上に公開する予定として表示されますプライベートスペースの場合はログインした人でしか見ることができません

30 行事予定を追加します予定を追加する日にマウスカーソルを合わせをクリックします件名と公開対象をパブリックスペースとし決定ボタンをクリックしますパブリックスペースに登録するとインターネット上に公開する予定として表示されますプライベートスペースの場合はログインした人でしか見ることができません次の様に行事が追加されました公開対象がパブリックスペースの場合このサイトの訪問者は登録した行事をカレンダーから確認することができます後に学習するグループ管理の機能を使うと特定のグループのみ内容が見られるログインしたユーザの権限の範囲内で行事を確認することができます公開する必要のない行事などは参加するグループの行事として登録することができます 30

31 学校説明会の案内を作成します学校説明会のご案内に実施内容の詳細のお知らせモジュール参加申し込みの登録フォームモジュールを作成します学校説明会のご案内の中にお知らせモジュールを追加します次の例を参考に学校説明会の案内を作成します 31

32 登録モジュールを追加します登録フォームモジュールを追加参加申し込みフォームを作成しますここでは参加する生徒の名前中学校名学年を入力および選択できるようにします新規作成を選択します管理しやすいよう登録フォーム名称を入力しますまた申込者が申し込みの手続き終了後表示させるメッセージを入力し決定ボタンをクリックします 32

33 不要な項目は削除しますお名前以外を削除します削除の確認のメッセージがありましたらはいを選択します中学校名を入力するテキストボックスを作成するので項目を追加するをクリックします項目名に中学校名必須項目にするを選択し入力タイプをテキストとします説明は次のように入力します最後に決定ボタンをクリックします 33

34 項目名に学年を入力し必須項目にするを選択し入力タイプを選択式 ( 択一 ) とします選択肢に上から順に 1 学年 2 学年 3 学年とし不足分については選択肢追加をクリックしその他を追加してください説明は次のように入力します最後に決定ボタンをクリックします入力する内容を確認したら実施するをクリックします編集終了をクリックします次のように登録フォームができました必要項目を入力後決定をクリックすると申込者がサーバに登録されます 34

35 学校見学会の申し込みに登録した人の確認をします編集ボタンをクリックしてください CSV 出力をクリックします開くを選択します次の様に登録されたデータを確認することができます開いたデータは適当なところへ保存して下さい登録されたデータを削除するにはデータのみ削除を選択します 35

36 フォトアルバムを追加します学校アルバムに学校の風景などの写真を登録します学校アルバムのメニューを選択しフォトアルバムを追加しますフォトアルバムの名称を学校の風景とします後ほど学習しますが管理者以外でも写真の投稿ができるようにするにはモデレータや一般をチェックします表示方法を設定します自動的に写真が入れ替わるようにするにはアルバムの自動スライドショーを選択します一覧として見たい場合はアルバムの一覧表示を選択しますアルバム作成をクリックします 36

37 アルバムの名前を学校の風景とします表示画像を選択するため参照をクリックします表紙となる画像を選択します表示形式を縮小版とすると写真のプレビューができますアップロードボタンをクリックすると写真がサーバにアップロードされますよろしければ決定ボタンをクリックします 37

38 アルバムの写真の追加をクリックします追加する写真を参照で選択し添付ファイルを追加をクリックします複数の場合は選択するごとにクリックします登録する写真がすべて選択できたら決定ボタンをクリックしますスライドの切り替えタイプやスライド間隔時間写真サイズを適当に変更します最後に決定ボタンをクリックします 38

ページにカウンタモジュールを追加します学校ホームページにカウンタをつけどのページがよく見られているか分析することは大切なことです

39 等間隔で自動的に写真が入れ替わりますブログツールなどをうまく活用すると学校の地図案内学校周辺の天気予報また学校ホームページをポータルサイトとして活用するため検索エンジンの窓や時計などを置くことができますページにカウンタモジュールを追加します学校ホームページにカウンタをつけどのページがよく見られているか分析することは大切なことですページごとにカウンタをつけ訪問者数の記録をとることができますカウンタを表示させたいページにカウンタモジュールを追加しますデフォルトでは次の様に設定になっています 39

40 次の様に表示内容を修正します決定ボタンをクリックします次の様にカウンタが表示されますリンクリストのモジュールを追加します学校のホームページから便利に使えるサイトのリンクリストを作りますリンクリストのモジュールを追加します後に学習する一般のユーザからも追加できる場合やカテゴリを追加する権限をつける場合はチェックを入れますリンクリストの名称をつけ決定ボタンをクリックします表示方法変更タブでサイトの表示方法を選択します設定したら決定ボタンをクリックします 40

次に様な表示になりますのでリンク先を追加します登録するサイトのタイトル名と URL を入力します自動取得にチェックを入れておくと自動的にサイトからタイトルを取り込みます最後に決定クリックします同様にいくつかのサイトを登録します学校の地図に google マップを利用します

41 次に様な表示になりますのでリンク先を追加します登録するサイトのタイトル名と URL を入力します自動取得にチェックを入れておくと自動的にサイトからタイトルを取り込みます最後に決定クリックします同様にいくつかのサイトを登録します学校の地図に google マップを利用しますより Google マップのホームページを開き学校の所在地を検索しますホームページ内のリンクボタンをクリックします次にサブウィンドウ内のウェブサイトへの地図埋め込み用 HTMLコードをクリックで選択しコピー ( Ctrl + c ) します 41

タブをクリックして選択すると次のようなります決定ボタンして作業を終了します次のように学校周辺の地図が表示されます

42 メニューに学校までのアクセスなどのメニューを追加しますこのページにお知らせモジュールを追加しますお知らせの編集タブ内の HTML タブをクリックして選択し先ほどコピーしたHTML コードを貼り付け ( Ctrl + v ) ますお知らせの編集タブ内の編集タブをクリックして選択すると次のようなります決定ボタンして作業を終了します次のように学校周辺の地図が表示されます出発地を入力すると学校までの交通機関や乗換え情報を調べることができますこの方 4 法はブログツールなどを利用して学校周辺の天気予報や時計などを画面上に表示することに応用できます 42

43 RSS のモジュールを追加しますホームページをポータルサイトとして利用する場合など RSS を利用することができますここでは朝日ヘッドラインニュースの利用について説明しますヘッドラインニュースの URL を入力し決定ボタンをクリックします次の様に最新のニュースが表示されます詳しく知りたい場合は関心のあるニュースをクリックします 43

44 サイトの閉鎖ホームページの製作途中はあまり見せたくないものですその場合サイト閉鎖を行うと便利です外側からメンテナンス中のため~ と表示され見ることはできませんが管理者の権限でログインすることによってサイトの構築をすることができます管理システム管理の一般設定タブ内にあるサイトの閉鎖のはいを選択すると際と閉鎖が行えますスクロールサイト閉鎖の理由のテキストボックスにメッセージを入れるとメッセージが表示されます 44

45 memo 45

地域ポータルサイト「こむねっとひろしま」

地域ポータルサイト「こむねっとひろしま」 5.1. エディタとは? NetCommons の全モジュールで共通する編集画面です 5.2. 通常のエディタの使い方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19) (20) (21) (22) (23) (24) (1) 書式設定左からフォントサイズスタイルを設定するためのプルダウンメニューです