web-dev-qa-db-ja.com

ヘッダーとフッターのテンプレートアプローチを使用してWebサイトを設計する

それを維持するのが苦痛なので、私はポートフォリオのウェブサイトをやり直そうとしています。新しいアイテムを追加するたびに、それは永遠にかかり、私を殺します。新しいアイテムを追加するワークフローがスムーズになるように再設計したいと思います。私は派手な効果を探しているのではなく、人々が自分のものを簡単に閲覧できるようにするシンプルなウェブサイトを探しています。

すべてのページはスタンドアロンのHTMLファイルです。各ページには、ページ間を移動するための共通のヘッダーとフッターがあります。現在、コンテンツを変更する必要があるときはいつでも、どのテーブル行にあるかを調べてからコンテンツを追加しようとします。 （はい、メモ帳を使用します）。

誰かが私にそれを進めるための最良の方法は何でしょうか教えてもらえますか？

（PS：私が何かを逃した場合、私に知らせてください）。

htmlweb-developmentwebsite-designheaders
1
brainydexter

これを行うにはおそらく、コスト、制御、複雑さが異なる1000の方法があります。

PHPまたは単にSSIに移動する場合、共通部分を別々のファイルに移動し、必要に応じてそれらを含めることができるため、各ページはほとんどが異なるもので構成されます。

テンプレートシステムを使用すると、Dreamweaverのようなアプリケーションがテンプレートを管理するため、テンプレートを変更するたびに、他のファイルを更新するように求められます。その後、変更を同期する必要があります。

Webページを生成するコンテンツ管理システムを構築または購入することもできます。場合によってはWYSIWYGエディターを使用して、いくつかの複雑な入力フォームにコンテンツを入力すると、プラットフォームは変更を自動的に取得します。これは、Wordpressの機能を単純化しすぎたバージョンです。

3
Itai

Microsoft Web Platform Installer をダウンロードできます。多くの一般的なWebアプリを参照してインストールできます。オーチャードCMSは、非常に役立つことがわかった無料のオープンソースCMSです。これは、Microsoft Web Platform Installerからもダウンロードできます。このツールを使用して、簡単なWebサイトをすばやく作成できます。また、更新や変更もかなり簡単です。

3
texter

シンプルなPHPコードを使用して、サイトを少し動的にすることができます。

まず、.html拡張子を.phpに変更する必要があります（PHPをサポートするLinuxサーバーでホスティングしている場合）。

次に、header.phpというページを作成し、HTMLコード（所有するすべてのページに配置する）、たとえばヘッドコードとメニューコードを挿入します。

次に、このPHPコードをファイルに入れます

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

そして、あなたが持っているすべてのページにそのコードを置きます：

<html>
<head>
....
</head>
<body>
<!-- Sample menu elements -->
<div id="nav">
<ul>
<li><a href="http://example.com/">home</a></li>
<li><a href="http://example.com/about.php">about</a></li>
<li><a href="http://example.com/contact.php">contact</a></li>
</ul>
</div>
<!-- End of sample menu elements -->

したがって、メニュー要素を変更する必要がある場合、すべてのページを更新する必要はありません。 header.phpファイルを更新するだけです。

ちなみに、特にポートフォリオを設計している場合（作業の品質を反映する場合）は、テーブルの使用をやめてDIVまたは HTML5 に進むことをお勧めします。

この投稿を確認してください： HTMLのレイアウトにテーブルを使用しない理由

1
Ammar Alakkad

XSLT を使用してX/HTML出力を生成します。これは一般的なブラウザーでサポートされており、サーバー側の処理なしで単一のテンプレートを複数のドキュメントに適用するのに最適です。

0
danlefree