人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

PHPに関するデザインとプログラムの分離、そして編集に関する質問です。

デザイン用ファイル(HTML)をヘッダーとフッターとメニューに分けて、includeして読み込み、テンプレートとして利用しているのですが、テンプレート化すると編集時にCSSが反映されずに、デザインの修正がしづらくなります。

OpenPNEなどのオープンソースシステムを見ると、共通する部分は別ファイルにしていますし、それがPHPとして正しい記述方法だと思うのですが、どうしてもデザイン編集の場合の事を考えると、そうするべきなのか否か迷う時があります。

そこで質問ですが、デザイン制作とプログラム構築を兼業されている方で、どのようなファイル構造をしているのかを教えていただけないでしょうか?

具体的なソース表示は結構なので、出来るだけわかりやすい形で「こうすればPHPに詳しくないWEBデザイナーでも編集しやすい」というのをご回答いただければと思います。よろしくお願いします。

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML OpenPNE PHP WEBデザイナー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● esecua
●27ポイント

ん?素直にテンプレートエンジンのSmartyを使用してみてはいかがでしょうか?


もし仮にすべてのヘッダやフッタ、メニューなどを定期的に書き換えるのであれば、各部品のテンプレートを別々に作成します。


そして各別々のテンプレートからヘッダーやフッタ、メニューなどをincludeしてやればOKかと。

例えばこんな感じでしょうか。

{include file="hedaer.tpl"}

<h1>HTML領域</h1>
このページは{$hatena}です。

{include file="menu.tpl"}
{include file="footer.tpl"}

編集時にCSSが反映されないとありますが、そのCSSは別ファイルでしょうか?それともheader内に記述されているのでしょうか?


CSSはヘッダーから別のCSSを読み込んでやればいいのです。ですのでデザイン変更の際はcssファイルの変更でOKです。

http://smarty.php.net/

もしほしい回答とずれていたらごめんなさい。

◎質問者からの返答

Smartyも利用した事はありますが、基本的にテンプレートファイル内にSmartyのコードが入るので、あまり違いは無いと思っています。

それに「ヘッダーからCSSを読み込んでやればいい」とありますが、それはheader.tplファイルの内部にcssをリンクしているだけで、テキストエディタでコードを修正するなら問題ありませんが、デザインをDreamweaverなどで編集する場合には適しませんよね?

出来ればデザイナー寄りの意見がいただければ幸いです。


2 ● heppokoA
●50ポイント

ファイル構造については,質問でおっしゃっているように共通部分をまとめるなどしていて,上の回答者さんが出されているSmartyも使っています。

HTMLはタグから打っていく派なのであんまりデザインビュー的なものは使わないのですが,Dreamweaverでテンプレートを編集する場合には,「デザインタイムスタイルシート」というのが使えるかと思います。

http://www.google.com/search?hl=ja&lr=lang_ja&ie=UTF-8&a...

◎質問者からの返答

こんな便利な使い方があったんですね。

ブラウザでプレビューした時は表示されませんが、Dreamweaver上で見えるだけでも十分だと思います。

非常に参考になりました。ありがとうございます。


3 ● tezcello
●26ポイント

サーバに多少負荷が掛かるかも知れませんが、PHPで動的に出してはどうでしょうか。

ヘッダ、フッタ、メニューなどの大きな塊だけでは無く、もう少し小さなパーツから全体レイアウトまでのテンプレート様のファイルを色々と用意します。

それらの中に普通のHTMLでは使わない様なタグと属性値を書いておき、それをキーワードにしてPHPで置き換えをします。

例えば、

<source name="table1.htm" raw="3" col="4"> とか
<replace name="parts.htm" repeat="5"> とか

ブログというかCMSのような感じでしょうか。


また、ちょっと違った角度からの回答を(...期待されているモノとずれてしまっていたらゴメンナサイ)。

僕が作るものは社内サーバでの利用が主なので、コンテンツのディレクトリをSAMBA で共有して、Win から開いてエディタで直接変更してます。

確認は実際に使用するブラウザからするので、横幅寸法が違うとか、フォントやキャラクタコードが違って文字化けするとか、プレビューが微妙に異なるとかのズレがありません。

タグ挿入のできるエディタを使えば、手打ちもそれほど苦にはならないと思います。

趣味のサイトは、似た様なディレクトリ配置になるようにしたサーバをローカルに作って、同様な事をしています。

レンタルしているサーバにアップロードする前に、迷惑をかけずにテストが出来るのがメリットですね。

Dreamweaver は使った事がありませんが、この手のヤツはあまり綺麗なHTMLを書いてくれない(事が多かった...今はどれ位進化したかは知りませんが)ので、タグは殆ど手打ちでやってます。TeraPad にはブラウザでのプレビューが簡単に出来るのでよく利用してます。

◎質問者からの返答

ご回答ありがとうございます。ただ、申し訳ありませんが、求める回答と異なります。

自分だけで作業する場合は、手打ちでも全PHP化でも問題ありませんが、他者(デザイナー)と兼業する場合、クライアントに納品する場合、WEBに公開する場合など、”自分以外の第三者がデザインを修正しやすい方法”についての相談です。

ですので、プログラマー視点だけではなく、デザイナー視点も含めていただけると幸いです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ