ウェブ制作研修

Transcription

1 サイト更新手順書 旭区社会福祉協議会様 制作 : マチス教育システム

2 目次 サイトマップ 3~5 サイトの構造 6 ファイルの見つけ方 7 HTMLについて 8 CSSについて 9 新規ページを作成 編集する 10~18 新規カテゴリーを作成する 19~21 トラブル対処法 22 Dreamweaverの便利な使い方 23 2

3 サイトのマップ トップページ 旭区社協の紹介 /shakyou/ 社協について 会員について member/ 会員の構成 会員のお申込み moushikomi.html 事業内容 /jigyou/ 事業内容一覧 善意銀行 zengin/ 善意銀行について あんしんセンター anshin/ あんしんセンターについて 子育てサポート kosodate/ 子育てサポートについて おでかけ支援 odekake/ おでかけ支援について 3

4 トップページ 事業内容 /jigyou/ あさひいきいき宣言 ikiiki/ あさひいきいき宣言 広告の出稿について 広告の出稿について advertisement/ 地区社協について /chiku/ 地区社協について ボランティア /volunteer/ ボランティアセンター 広報関連 magazine/ 広報関連 ボランティア募集 ボランティア募集 recruit / 助成金について 助成金について joseikin / 福祉活動拠点 /kyoten/ 福祉活動拠点 イベント情報 /event/ イベント情報 event08.html 4

5 トップページ 福祉団体一覧 /fukushi/ 福祉団体一覧 リンク /link/ リンク インフォメーション /information/ 地図 map.html プライバシーポリシー privacy.html アクセシビリティ accessibility.html サイトマップ sitemap.html xxxxx /xxxxx/ フォルダ xxxxx xxxx.html ファイル 5

6 サイトの構造 サイトの拡張性を考え下記図のようにカテゴリーごとにフォルダを 分けています 全てのページに共通するスタイルと画像 全てのページフッターのスタイルと画像 全てのページヘッターのスタイルと画像 ライブラリのフォルダ メニュー部分のスタイルと画像 テンプレートのフォルダ 社協についてカテゴリーのフォルダ 社協についてで使用するPDFなどのフォルダ社協についてで使用する画像フォルダ 会員についてカテゴリーのフォルダ 社協についてのトップページ 社協についてのスタイルシート 6

7 カテゴリーごとにindex.htmlを作るのは index.htmlというページには本来目次 ( 各ページに飛べるリンクリスト ) であったり そのカテゴリーについての説明テキストを掲載する為のページですが 現在各カテゴリー内の情報が少ないため 1ページのみのカテゴリーに関してもindex.htmlというファイル名にしてあります 今後ページを増やしたときに そのページがカテゴリーのトップページとなるような構造にしていくことをお勧めします ファイルの見つけ方 編集したい目的のファイルを見つけるにはブラウザの URL を見て探します フォルダ名 ファイル名 7

8 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> タグを多用したソースコードよりも見やすく 編集目的のテキスト を見つけやすいので 編集も簡単です 8

9 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> 9

10 新規ページを作成する 編集する テンプレートについて 各 HTMLファイルはテンプレートを使用しています テンプレートとは全ページ または カテゴリー内のページには共通部分 ( メニュー ヘッダー フッターなど ) があり それらを最初にひな形を作っておき 本文などのページごとに違う部分だけを編集していく機能です 各ページは 編集できる部分 ( コードに色がある部分 ) と編集できないテンプレート部分 ( コードがグレーになっている部分 ) があり 基本的には編集できる部分だけ書き換えることにより更新できるようになっています テンプレート部分を編集するにはTemplatesフォルダの中の XXX.dwtを編集してください ( テンプレートを編集するとそのテンプレートを使用しているページ全てに変更が反映されます ) ヘッダーフッター部分テンプレート ヘッダーフッター部分テンプレート ( 福祉団体一覧カテゴリーのみ ) 検索プログラムとの文字コードの関係でこのページだけ別です 10

11 ライブラリについて PDFへのリンクのあるページにつき AdobeReaderのダウンロードの説明を記載します PDFへのリンクがないページもあることと 将来的には記入書類などを除くPDFデータは廃止したいとのご希望でしたので この部分はページによって入れたり入れなかったりを自由にカスタマイズできるように ライブラリにしました ライブラリとは テンプレートはひな形ですが ライブラリはその部分をブロック化したもので簡単に挿入 削除ができます ライブラリの挿入手順 コード画面で下記図の部分を探し カーソルを置く ( 行番号はこの通りではありません ) 画面左のファイルパレットをアセットタブに切り替え a_reader を選択し挿入ボタンを押す 11

12 新規でページをつくる 1 ファイルパレットで ページを作成したいカテゴリーに現在ある html ファイルを右クリックし 編集 複製を選びます 2 複製された Copy of XXXX.html ファイルを選択し付けたい名前に変更し そのファイルを W クリックで開きます 12

13 ページの内容を編集する 1 タイトルを変更する 必ず全ページにタイトルを付けてください 2 コード画面を見ていくと <meta name= description content= 旭区社協 XXXX についのページです など ページの概要を書き換えてください 13

14 3 次に <h1></h1> があるのでページタイトルと同じ内容に書き換えます この部分に反映されます 4 次にコードを見ていくと <!-- ここより各ページコンテンツ部分です --> という部分と <!-- ここまでの --> 部分があります ここが本文部分です 14

15 タグから閉じタグの内容を書き換えて下さい 項目を増やしたい場合はタグごとコピー & ペーストすると 複製できます そのタグを使用することにより 背景や文字サイズなどのスタイルが つくように設定してあります 全ページで使用できるスタイルは 次になります <div class= img520 > <img src= xxxx.gif /></div> 幅 520px の画像を配置するときにはこのタグで囲んでください 画像の幅は 520px が最大です それ以上の画像は配置しないでください <h2> XXXXXXXXX について </h2> 朝顔のピンクの背景が付きます 見出しに使用してください <h3> XXXXXXXXX について </h3> ホタルの緑色の背景が付きます 見出しに使用してください <h4> XXXXXXXXX について </h4> 太字の文字になります 見出しに使用してください <p> XXXXXXXXXXXXXXXXXX </p> 本文テキストはこの中に入れてください 最大幅は 500px です <ol> <li>xx</li><li>xxx</li> </ol> 数字付きリストになります 15

16 <dl class= define > <dt>xxx</dt><dd>xxx</dd></dl> dt 内の内容 dd 内の内容 dd 内の内容 dd 内の内容 dd 内の内容 dd 内の内容 dd 内の内容 dd 内の内容 <dl class= yellow_bar > <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 内の内容 <img src= XXXX.gif alt= class= r_float_img /> 16

17 <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 へリンクする リンクを張る時に使用してください 17

18 5 サブメニューを書き換え リンクを張る 現在のページにはリンクは張らず <span></span> で囲む リンクの貼り方は リンクを張るテキストや画像を選択し プロパティパネルのリンク欄の右のアイコンを飛ばしたい ファイルにドラックする PDF にも同じようにリンクが張れます ドラックする 1 8

19 新規カテゴリーを作成する 新規テンプレートを作成する 1 新規にカテゴリーを作成するには まず そのカテゴリー用のテンプレートを作成します 方法はファイルを複製した時と同じです Templatesフォルダにある各カテゴリーごとのファイル (chiku.dwt, event.dwtなど何でも構いません ) を選択し 右クリックして編集 複製を選びます 2 複製された Copy of XXXX.dwt ファイルを選択し付けたい名前に変更し そのファイルを W クリックで開きます メニューに項目を追加する 1 下記図の部分をコピー & ペーストします この <ul> が入っている <li></li> ごとコピー </ul> の手前にペースト 1 9

20 2 コピー元の <ul class= submenu > を削除する 削除 3 HTML を図のような class 名に書き換える <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 保存する 2 0

21 5 左上 ファイル メニューから新規を選び テンプレートタブを クリックし 先ほど作成したテンプレート選択し 作成ボタンを クリックする 5 ファイルが開いたら ファイル メニューから新規保存で html ファイルを保存する 6 前に述べた編集手順でページを編集する 基本的に コピー & ペーストしていただければスタイルは 付いてきますが <a> タグを含んだコードをコピー & ペーストする 場合はリンク先が適当かどうか確認してください 2 1

22 トラブル対処法 レイアウトが崩れる原因 レイアウトが崩れる原因として一番多くみられるケースは下記のように左のメニューエリアが本文エリアの下に表示されてしまうケースです これは CSSで定義している本文エリアの幅 520pxであるのに対して 本文中にこの幅を超える幅の画像 テーブルなどが挿入された時に起こります 修正方法は 挿入した要素の幅を確認し 適切なサイズのものに変更してください 本文エリア 本文中のさらに <p> タグの中に画像などを挿入するには最大幅は500px です <div> タグに挿入する場合は最大幅 520pxです メニューエリア 原因のあと一つは コピー & ペーストをする時に閉じタグ < /xxx > を落としてしまうことによるレイアウトの崩れです Dreamweaverで編集する場合 デザイン画面のみで編集を行うとタグが選択範囲から漏れてしまうことがよくあります 要素は必ず何かのタグで囲まれているということと 始まりのタグ <xxx> と閉じタグ </xxx> を意識して コード画面でコピー & ペーストを行うことをお勧めします 2 2

23 Dreamweaver の便利な使い方 どのタグで囲まれているか分からない時は タグのネスト ( 入れ子 ) を多用すると どこが始まりでどこが終わりなのかわかりづらくなってきます そういった場合は編集したいテキストにカーソルを置き 図の部分をクリックすることにより そのタグ全体を選択することがせきます ここをクリックする さらにここを右クリックすると タグに対する ID や class を適用すること ができます 2 3