サイト更新手順書
旭区社会福祉協議会様
目次
サイトマップ・・・・・・
3～5
サイトの構造・・・・・・
6
ファイルの見つけ方・・・
7
HTMLについて・・・・・8
CSSについて・・・・・・9
新規ページを作成・編集する・・・・
10～18
新規カテゴリーを作成する・・・・・
19～21
トラブル対処法・・・・・・・・・・
22
Dreamweaverの便利な使い方・・・・・23
サイトのマップ
旭区社協の 紹介 /shakyou/ トップページ Index.html 会員について member/ 社協について Index.html 会員の構成 Index.html 会員の お申込み moushikomi.html 事業内容 /jigyou/ 善意銀行 zengin/ 事業内容一覧 Index.html 善意銀行について Index.html あんしんセンター について Index.html あんしん センター anshin/ 子育てサポートに ついて Index.html 子育て サポート kosodate/ おでかけ支援につ いて Index.html おでかけ支援 odekake/トップページ Index.html 事業内容 /jigyou/ あさひいきい き宣言 ikiiki/ あさひいきいき 宣言 Index.html 広告の出稿に ついて Index.html 広告の出稿に ついて advertisement/ 地区社協に ついて /chiku/ 地区社協に ついて Index.html ボランティア /volunteer/ ボランティア センター Index.html 広報関連 magazine/ 広報関連 Index.html ボランティア募集 Index.html ボランティア 募集 recruit / 助成金について Index.html 助成金に ついて joseikin / 福祉活動拠点 /kyoten/ 福祉活動拠点 Index.html イベント情報 イベント情報
トップページ Index.html 福祉団体一覧 /fukushi/ リンク /link/ リンク Index.html インフォメー ション /information/ 地図 map.html 福祉団体一覧 Index.html プライバシー ポリシー privacy.html アクセシビリ ティ accessibility.html xxxxx xxxx.html xxxxx /xxxxx/ サイトマップ sitemap.html フォルダ ファイル
サイトの構造
サイトの拡張性を考え下記図のようにカテゴリーごとにフォルダを 分けています。 全てのページに共通するスタイルと画像 全てのページフッターのスタイルと画像 ライブラリのフォルダ メニュー部分のスタイルと画像 テンプレートのフォルダ 全てのページヘッターのスタイルと画像 社協についてカテゴリーのフォルダ 社協についてのトップページ 会員についてカテゴリーのフォルダ 社協についてで使用する画像フォルダ 社協についてで使用するPDFなどのフォルダ 社協についてのスタイルシートカテゴリーごとにindex.htmlを作るのは、index.htmlというページには本来 目次（各ページに飛べるリンクリスト）であったり、そのカテゴリーに ついての説明テキストを掲載する為のページですが、現在各カテゴリー 内の情報が少ないため、1ページのみのカテゴリーに関してもindex.htmlと いうファイル名にしてあります。 今後ページを増やしたときに、そのページがカテゴリーのトップページ となるような構造にしていくことをお勧めします。
ファイルの見つけ方
編集したい目的のファイルを見つけるにはブラウザのURLを見て探します。 フォルダ名 ファイル名HTMLについて
インターネットは、全世界の人々が自由に情報を得ることができる とても「便利」な世界です。 しかし、健常者にとっても、障害者にとっても、同じ様に情報を 得られるサイトでないと一部の人にはとても「丌便」なものとなって しまいます。HTMLを正しく記述することにより、テキストの基本構造 が整えられ、全ユーザーにとって情報を得やすいサイトになります。 本サイトは下記にあげたタグのみで構成されています。 タグの意味を覚え、意識して更新作業を行ってください。 <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>
「見出し」という意味です。数字が小さいほうが重要度が高く、 <h1>は1ページに一度しか使いません。一番の大見出しとなります。 <p></p>
「段落」です。文章を段落で区切る場合は<p>で新たに囲んでください。 <ul><li></li></ul> <ol><li></li></ol>
「リスト」です。olで囲む場合は番号付き（1,2,3,4…）リストです。 <dl><dt></dt><dd></dd></dl>
「定義リスト」です。<dt></dt>で囲まれた内容に関する説明文を <dd></dd>の中に記入します。 <div></div>
CSSの為のBOXを作るタグで、意味は持ちません。 <table><tr><th></th><td><td></tr></table>
「表」です。<th></th>は項目名<td></td>に内容を記入します。 「表」であるという意味以外では使いません。 （レイアウトの為に<table>タグは使用しないでください。） <table>タグを多用したソースコードよりも見やすく、編集目的のテキスト を見つけやすいので、編集も簡単です。CSSについて
CSSを使用する利点の一つは、デザインと情報を切り放すことにより、 シンプルに情報だけを必要とするユーザー（視覚障害者など）にも、 視覚的にサイトを利用する一般ユーザーにも、すべてのユーザーへ確実に 情報を提供できることです。もう一つは、サイトのリニューアルを 考えたときに骨組（HTML）がしっかりできていればデザインの リフォームが容易にできるということです。 CSSは id や class という名前をタグに付けることにより、そのタグに 囲まれた内容にはスタイルが適用されます。 ですので、コピー＆ペーストをする時には、閉じタグ</xxx>や、 <xxx id=“OOO”> <xxx class=“OOO”>をすべてコピーしてください。 CSSは外部ファイルで指定しています。知識がある方は各カテゴリー フォルダの中の XXX.css という拡張子のファイルをご覧ください。 ※<font>タグでテキストスタイルを指定しません。文字色、サイズなど すべてCSSで指定しています。 その他、CSSを利用することで、サイトの左側メニュー部分と、右側の 本文が入る部分をHTMLコードでは記述順序を入れ替えています。 そうすることで、音声読み上げブラウザの場合、ページを移るごとに 何度もメニュー部分を先に読み上げることなく、先に本文を読み上げる ような構造になっています。 メニュー 本文 <div id=“contents”> 本文 </div> <div id=“menu_info”> メニュー </div> デザイン ソースコード新規ページを作成する・編集する
各HTMLファイルはテンプレートを使用しています。テンプレートとは 全ページ、または、カテゴリー内のページには共通部分（メニュー、 ヘッダー、フッターなど）があり、それらを最初にひな形を作っておき、 本文などのページごとに違う部分だけを編集していく機能です。 各ページは、編集できる部分（コードに色がある部分）と編集できない テンプレート部分（コードがグレーになっている部分）があり、 基本的には編集できる部分だけ書き換えることにより更新できるように なっています。テンプレート部分を編集するにはTemplatesフォルダの中の XXX.dwtを編集してください。（テンプレートを編集するとその テンプレートを使用しているページ全てに変更が反映されます。）テンプレートについて
ヘッダーフッター部分テンプレート ヘッダーフッター部分テンプレート （福祉団体一覧カテゴリーのみ） 検索プログラムとの文字コードの関係で このページだけ別です。PDFへのリンクのあるページにつき、AdobeReaderのダウンロードの説明 を記載します。PDFへのリンクがないページもあることと、将来的には 記入書類などを除くPDFデータは廃止したいとのご希望でしたので、 この部分はページによって入れたり入れなかったりを自由にカスタマイズ できるように、ライブラリにしました。 ライブラリとは、テンプレートはひな形ですが、ライブラリはその部分を ブロック化したもので簡単に挿入、削除ができます。
ライブラリについて
ライブラリの挿入手順 コード画面で下記図の部分を探し、カーソルを置く。（行番号はこの通りではありません） 画面左のファイルパレットをアセットタブに切り替え a_reader を選択し 挿入ボタンを押す。ファイルパレットで、ページを作成したいカテゴリーに現在あるhtml ファイルを右クリックし、編集 → 複製 を選びます。
新規でページをつくる
複製されたCopy of XXXX.htmlファイルを選択し付けたい名前に変更し、 そのファイルをWクリックで開きます。1
2
タイトルを変更する。
必ず全ページにタイトルを付けてください。
ページの内容を編集する
コード画面を見ていくと<meta name=“description” content=“旭区社協XXXX
についのページです。”など、ページの概要を書き換えてください。
1
次に、<h1></h1>があるのでページタイトルと同じ内容に書き換えます。 次にコードを見ていくと<!-- ↓ ↓ ↓ ↓ ここより各ページコンテンツ部分です ↓ ↓ ↓ ↓ ↓ ↓ -->という部分と<!-- ここまでの・・・・ -->部分があります。 ここが本文部分です。
3
4
この部分に反映されますタグから閉じタグの内容を書き換えて下さい。 項目を増やしたい場合はタグごとコピー＆ペーストすると 複製できます。 そのタグを使用することにより、背景や文字サイズなどのスタイルが つくように設定してあります。全ページで使用できるスタイルは 次になります。
<div class=“img520”> <img src=“ｘｘｘｘ.gif“ /></div>
幅520pxの画像を配置するときにはこのタグで囲んでください。 画像の幅は520pxが最大です。それ以上の画像は配置しないでください。 <h2> XXXXXXXXXについて</h2> 朝顔のピンクの背景が付きます。見出しに使用してください。 <h3> XXXXXXXXXについて</h3> ホタルの緑色の背景が付きます。見出しに使用してください。 <p> XXXXXXXXXXXXXXXXXX </p> 本文テキストはこの中に入れてください。最大幅は500pxです。 <h4> XXXXXXXXXについて</h4> 太字の文字になります。見出しに使用してください。
<ol> <li>XX</li><li>XXX</li>・・・ </ol>
<dl class=“yellow_bar”> <dt>XXX</dt><dd>XXX</dd></dl> dt 内の内容 dd内の内容dd内の内容dd内の内容dd内の内容dd内の内容dd内 の内容dd内の内容 <dl class=“define”> <dt>XXX</dt><dd>XXX</dd></dl> dt 内の内容 dd内の内容dd内の内容dd内の内容dd内の内容dd内の内容dd内 の内容dd内の内容
<ul class=“list”> <li>XX</li><li>XXX</li>・・・ </ul> li 内の内容
li 内の内容 li 内の内容
<ul class=“list_b”> <li>XX</li><li>XXX</li>・・・ </ul> li 内の内容
li 内の内容 li 内の内容
<p><img src=“XXXX.gif” alt=“” class=“r_float_img” /></p> <p>で囲まれた本文の中に画像を入れると、画像が右寄せになり 文章が回り込む。 XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
画像
<p><span>XXXXXへリンクする</span></p> <dl class=“define”><dt>XXX</dt><dd><span> span>XXXXXへリンクする </span></dd></dl> XXXXXへリンクする リンクを張る時に使用してくださいサブメニューを書き換え、リンクを張る。
5
現在のページには リンクは張らず、<span></span>で囲む リンクの貼り方は、リンクを張るテキストや画像を選択し、 プロパティパネルのリンク欄の右のアイコンを飛ばしたい ファイルにドラックする。PDFにも同じようにリンクが張れます。新規カテゴリーを作成する
新規にカテゴリーを作成するには、まず、そのカテゴリー用の テンプレートを作成します。方法はファイルを複製した時と同じです。 Templatesフォルダにある各カテゴリーごとのファイル（chiku.dwt , event.dwtなど何でも構いません）を選択し、右クリックして 編集 → 複製 を選びます。新規テンプレートを作成する
複製されたCopy of XXXX.dwtファイルを選択し付けたい名前に変更し、 そのファイルをWクリックで開きます。1
2
下記図の部分をコピー＆ペーストします。メニューに項目を追加する
1
この<ul>が入っている<li></li>ごとコピー </ul>の手前にペーストコピー元の<ul class=“submenu”>を削除する。
2
削除
HTMLを図のようなclass名に書き換える。3
<ul id=“”menu><li><a href=“” class=“link_menu”>xxxxx01</li> <li><a href=“” class=“here”>xxxxx02
<ul class=“sub_menu”>
<!-- ↓↓↓↓↓ サブメニュー 現在の・・・・
<li><a href=“” >subxxx1</a></li> <li><span>subxxxx2<span></li> <!-- ↑↑↑↑↑ サブメニューここまで・・・・ </ul> </li> </ul> xxxxx01 xxxxx01 通常時 マウスを のせたとき xxxxx01 xxxxx01 xxxxx01 保存する。
4
左上「ファイル」メニューから新規を選び、テンプレートタブを クリックし、先ほど作成したテンプレート選択し、作成ボタンを クリックする。
