【Q】ホームページが大きくなるにつれてナビゲーションの管理(?)に困っています。ページを増やすたびにたくさんのファイルを変更しなくてはいけません・・

   web入門, web知識あれこれ| 

ナビゲーションは、ホームページによっては、サイトのヘッダーにあったり、サイドナビにあったりして、目次の役目を担う部分ですが、ページが増えたり、サイト内で何か変更があったときにナビゲーションも変えないといけないので、数ページ程度のサイトなら問題ないのですが、何十ページと増えてくるとリンクミスを起こしたり、なかなか管理が大変です。

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残していこうと思います。古い情報が入っていますのでご注意ください。

Dreamweaverを使う方法

Dreamweaverを持っている場合は、テンプレートかライブラリーという機能を使えば、サイト内のナビゲーションなどの管理が楽になります。

テンプレートとライブラリーの違いはこうです。
テンプレートは全体のデザインを作っておいて、共通部分(ナビゲーション)はテンプレートに管理させ、テンプレートの中に編集可能領域を設定し、その中にコンテンツを作って行く方法です。
ライブラリーは、ページそのものは普通に作っておいて、共通部分をパーツのようにライブラリーの中にいくつか作って行き、共通部分(ナビゲーション)が変更になったらライブラリーを更新する。すると、サイト内のライブラリーを使っているページが一斉に書き換わるというものです。

[Dreamweaverのテンプレートとライブラリーの違い]
tpllbi

私が使ってみて思うにはテンプレートよりはライブラリーの方が初心者にやさしいです。テンプレートは、リニューアルなど、テンプレートの差し替え等の操作を間違えると、サイト内を壊してしまい大変な状態になってしまう可能性が・・・・。

こちらの動画マニュアルで、Dreamweaverのテンプレートの使い方と、ライブラリーの使い方を紹介していますので初心者の方は参考にしてください。テンプレートとライブラリーは最初の設定を間違えるとおかしいことになるので注意が必要です。
コツとしては、ナビゲーションのリンク先が相対パスになっていること。
テンプレートやライブラリーとして保存したとたんに、そのテンプレートからみたパスに書き換わります。
それが、テンプレートやライブラリーを適用したとたんに、そのファイルからみたパスに自動的に書き換わります。

>Dreamweaverのテンプレートの使い方
>Dreamweaver のライブラリーの使い方

PHPにしてナビゲーション部分を読み込む方法

htmlファイルをphpファイルに変えて、共通部分を読み込ませるという方法があります。サーバーがphpに対応していないと使えません。
ヘッダー部分をheader.phpで作っておき、サイドナビの部分をsidenavi.phpで作っておき、
読み込ませたい部分に下記のコードをいれます。

<?php include(”header.php”); ?>

phpでヘッダーとサイドナビを読み込む方法

phpinclude

ページはindex.phpという拡張子で保存します。
サーバーにアップして、ブラウザのアドレスに
http://www.●●.com/ と打ち込むと 、そのディレクトリに、index.htmlが存在する場合はそちらが出てしまうので注意が必要です。その場合は、index.htmlは削除しておき、index.phpが表示されればOK。だめだったら、.htaccessでサーバーの設定を変更する必要があります。
どう変更するかというと、「スラッシュ以下を省略した場合、最初にindex.phpを読みにいきなさい、そのファイルがない場合は、index.htmlを読みにいきなさい」というような命令を書いてあげないといけません。詳しくは上記の.htaccessの使い方を見てください。

phpファイルについては、もう少し詳しく紹介したいところですが、かな~りざっくり説明すると、

htmlの中に埋め込むことができる便利なプログラムの言語で、全部をこのプログラム言語で書く必要はなく、ウェブデザイナーさんが知っているHTMLの中の一部として使うことができます。
上記で利用した命令は、includeという命令ですが、他にもいっぱい便利な命令があり、ここに今日の日付を入れなさいとか、ここにユーザーの名前を入れなさい(その名前はユーザーによりそのたびに変わる)そんないろんなことができます。
これだけではあまりにも片手落ちなので参考サイトを載せておきます。
>>php.net PHP とはなんでしょう?

htmlファイルではなくなると、作業しているパソコン上でプレビューができなくなってしまいます。(Dreamweaverでphpファイルを作っている場合はできますが)
その場合は、自分のパソコン上にプログラムが動く場所(Apache+PHPの動く場所)を作らなければいけません。
>>PHP制作環境の設定(macもしくはウィンドウズのところを見てください)

拡張子が変わってしまうと外部リンクなどもリンク切れになってしまい困る

htmlという拡張子のままでも、phpを動かす方法はあります。サーバーの設定を変えないといけないんですが、下記を参考にしてください。
>>拡張子htmlのファイルをPHPで動かす
>>さくらサーバーで.php以外の拡張子でphpを動かしたい

 

webの森では、デザイナーの卵さん向けの個人講習も行っています。
会社でweb担当者になったんだけど、基本を知らないとまずいらしい・・・??と思われた方などなど。
詳しくはお問合せください

toi

   web入門, web知識あれこれ| 

  関連記事

古いバージョンのWordPressサイトを、新しいバージョンに上げ、データベースを移転する方法のメモ

サーバーの引っ越し。こまごまといろいろやらなければ行けないことがあって、よく手順を間違えたりしてロス ≫続きを読む

質問:わたしのホームページ検索で出てこないんです・・・その原因

先日、「うちのホームページ、検索しても出てこないんです」という相談をされ、見てみたところ、本当に、サ ≫続きを読む

画像が表示されないと困ったら(HTML初心者の方へ)

「画像が表示されません!どうして???」HTML初心者の方によく質問をされるんですが、いくつか理由が ≫続きを読む

【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?

リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML ≫続きを読む

ブログを作る場合はサブドメインより、独自ドメインの下にが◎

わたしは信州EC実践会というネットマーケティングの勉強会の事務局をしていますが、 ネットショップ運営 ≫続きを読む

illustratorでキャラクターに色を塗る方法

illustratorで、キャラクターに色を塗る方法を紹介します。 1)線でイラストを描きます。後ろ ≫続きを読む

cssのpositionはあまり使いません

モモンガの森で、世界一わかりやすいポジションの使い方という記事を書いたところかなりたくさんの方から「 ≫続きを読む

【Q】ホームページでネットショップをやっています。ツイッターをやったほうがいいよと知人に誘われたのですが何がいいのかいまいちわからないのですが?

ツイッターってなに? 140文字の「つぶやき」を投 稿するだけのシンプルな webサービスです。 無 ≫続きを読む

【Q】お店のfacebookページを作ったのですが、記事を投稿しても、反応があまりないし、誰が見てくれているかわからないんですが・・・?

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残し ≫続きを読む

ヤマト宅急便「配達時間帯」の指定枠変更のマーク

【重要なお知らせ】宅急便「配達時間帯」の指定枠変更についてというメールが、ヤマトさんを利用しているネ ≫続きを読む

▲ページ先頭へ