• 締切済み

ベージの一部を入れ替える方法

Web初心者です。 今DreamweaverでCSSを使いながらサイトを作っています。 そこでページ内の一部を入れ替える方法がどうしてもわからないので教えてください。 具体的にいうと、リストの画像ボタンがあって、そのボタンを押すと記事(写真とテキスト)が入れ替わるという風にしたいのです。(1は1の記事、2は2の記事という風に) いったいどうしたらいいのでしょうか??

みんなの回答

  • thila
  • ベストアンサー率73% (45/61)
回答No.3

#2で質問者様が提示されたサイトは、Dreamweaverのテンプレート機能かアセット機能(多分テンプレートだと思います)を使って作成しているようです。 ※独特のコメントアウト(こんなの:<!-- InstanceBeginEditable name="temp01" -->)を吐き出すので、それで判別できます。 コメントアウトが入るのが気になるのであれば、この独特のコメントアウトがないページも書き出すことができた気がします。 テンプレート…自身でテンプレート設定時に指定した範囲以外は固定 アセット…メニュー等の一部分のみ固定 固定部分を作り変える際は雛形をいじれば、テンプレートなりアセット部分なりが入っている全てのページが自動で変更されるというものです。 雛形をいじる時は普通にDreamweaverでページを作る感覚と余り変わりませんので、変更も比較的簡単にできます。 フレームを閲覧できない環境の人やjavascriptをOFFにしている人も中にはいますから、それらの人のことを考慮されるのであればこちらの方法をお勧めします。

全文を見る
すると、全ての回答が全文表示されます。
  • xxsuzuxx
  • ベストアンサー率49% (64/129)
回答No.2

そのホームページの場合は、特に特殊な技術を使ってはいません。 トップページのホームページアドレスと、メニューをクリックした先のホームページアドレスを見るとわかりますが、 トップページはindex.htmlというファイルで、メニューをクリックした先はabout/index.html等になっています。 デザインは同じですが全く別のページへリンクされています。 基本デザインとなる1ページを作成し、それを基にしてコンテンツページを作成していけば 同一デザインでメインコンテンツの異なるページが出来上がります。 メインコンテンツの内容を書き換えてそれぞれ別名で保存し、メニューからリンクさせてください。 多くのページがあるとメニューを書き換えるときに大変・・・という場合は フレームやインラインフレームを使ってメニュー部分とメインコンテンツ部分を分ける方法や javascriptでメニューだけを個別に作成したり等の方法もあります。

kiku1108
質問者

お礼

ありがとうございます! メニューが動かないように見えたのでメニューは動かずにコンテンツが変わっているのかと思っていました。 私の場合ページの10点ほどリンクさせなくてはいけないので、インラインリンクを使って作ってみようと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
noname#39970
noname#39970
回答No.1

そういうのはJavaScriptで入れ替えるか iframe で個々個々のHTMLを読み込む方法が殆ど。 http://www.tohoho-web.com/html/iframe.htm

kiku1108
質問者

お礼

早速ありがとうございます。 インラインフレームでやる方法はわかったのですが、JavaScriptはまったくわかりません。Dreamweaverのビヘイビアで使える機能はありますか?例えばこのサイトhttp://www.healingvilla.com/なんかはメニューとメインコンテンツはジャバスクリプトで入れ替えているのでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • IEでテキストの文字が一部だけ表示されない

    CSSを使い、WEBページを作成しているのですが、 不思議な現象が起きています。 IEでプレビューして確認すると テキストの一部が消えてしまいます。 FireFoxではみることができます。 画像を添付します。 不思議なことに、時々見えたりします。 例えば、別にIEを立ち上げて、元々見えない画面の上にかぶせるようにしたものを どけたりすると、、、 本当は見えているのにメモリ不足などによるものなのでしょうか? CSS等の問題ではないのかなという気もします。 なにかわかる方がいましたら教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • テキストを画像の一部として貼り付ける方法

    いつもお世話になっております。 現在CSSでサイトを作っているのですが、とある疑問があります。 見た目は完全にテキストなのですが、コピーもできず、かつ一枚絵のように画像などとセットで張り付けられているサイトを見かけます。 たとえば、以下のサイトのVISIONやMODELの部分のテキストなどが例です。 http://www.fullspeed.co.jp/about/vision.html このようなテキストはどのような仕組みで作られているのでしょうか? まだまだ初心者なため疑問が多くいつもお世話になってばかりですが、どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • WEBデザインど素人WEBサイトの見栄えがショボイ

    XHTML+CSS+PHP+JavaScriptを勉強しているのですが、 これだけではテキストベースのWEBページになり、そっけないので困っています。 コーディングは独学で勉強してある程度知識がつき、構造記述についてはまぁまぁ可能なのですが、 絵心がないのでWEBデザインや画像加工がとても苦手で、配色センスもなく WEBサイト製作において非常に困っています。 今作ろうとしているのは自営工務店のWEBページです(一人で全部作る予定) ※企業サイトではないので公開して恥ずかしくない程度のデザインや見栄えであればOKな考えです。 WEBページの見栄えを「シンプルかつ、おお!」って思わせるためには、 XHTML+CSS+PHP;+JavaScriptだけ勉強しても無理ですよね? WEBサイトを作る上でphotoshopとかfireworksでの画像加工やデザインカンプ? すら作れません。(絵心がないから?w) ロゴ1つやWEBページで紹介する施工例写真やナビゲーションボタン1つも かっこよく作れず苦戦しています。 例えば、ここはメニューはこのフォントを使うべきだとか、文字をぼかすべきだとか、 影をつけるべきだとか、角を丸くすべきだとか、そういった画像加工のセンスがないのです(泣) こういう人は何千時間かかってもWEBデザイン(画像加工)センスは身につかないのでしょうか? 少しでも早く、具体的にWEBデザイン(画像加工)を学ぶサイトはないでしょうか? デザインカンプを1から作ってパースをスライスしてサイトを作る方法(初心者向け) のサイトなどがなかなか見つかりません。 ある店舗さんや会社さんのWEBサイトを一人で全部作っておられる方など いましたらよろしくお願いします。 【製作環境】 windows XP Adobe イラストレータ CS3(ちょっとだけ使えるが、画像加工のセンスがまったくない) Adobe photoshop CS3(ちょっとだけ使えるが、画像加工のセンスがまったくない) Adobe Fireworks CS3(ちょっとだけ使えるが、画像加工のセンスがまったくない)  Adobe Dreamweaver CS3 (普通に使える) Adobe Flash CS3 (まったくできない。)

  • 使用されていないclass,idを調べる方法は?

    Webページの制作をwinXPのDreamweaver8にて行っております。 外部読み込みのCSSのファイルにおそらく使われていないだろうclassなどが沢山ありそうなのですが、これを楽に探せる機能などはありますでしょうか。 dreamweaverの場合単独ファイルで画像の場合はほぼ使われていないだろう事がわかるのですが、CSSも同様に調べられたら便利だと思っています。 また、皆さんは不要なclassなどの整理をどのようにやっているのでしょうか。 よろしくお願いします。

  • fireworksで大枠を作ったその後

    はじめまして HP作成初心者ですがよろしくお願いします fireworksでwebページの全体像を作り上げた後 スライスをしてパーツごとに画像として保存し dreamweaverで作り上げるという作業をしてwebページを作りたいと考えているのですが 初心者ながらなんとか、もとのレイアウトをcssとhtmでくみ上げ、センタリングもなんとかして、一応見栄えはよいページをできたと思ったのですが 文字を入れることが出来なくなってしまいました そもそも画像の上には、htmlタグで任意の位置に文字入れすることが出来るのでしょうか? jpgを張り合わせたような形で、現在のwebページが出来ているので、更にその上から任意の画像や表、テキストを配置出来たらうれしいのですが、何か方法はありますか? それとも、私の考え方自体、間違っているのでしょうか? 参考になるページや、アドバイス等がありましたら、よろしくお願いします。

  • Dreamweaver ナビゲーションをページごとに変える・・・

    環境:Dreamweaver8.0、WindowsXP Dreamweaverのテンプレートで全ページ共有のグローバルナビゲーションを管理しています。 ページによってそのナビゲーションのボタンを一部差し替え(具体的には、ページを移動すると該当ボタンを反転画像に差し替え)ということをするには、ページごとにテンプレートから切り離して画像を指定するしかないのでしょうか? 何かいい方法ありましたらアドバイスお願いします。

  • Dreamweaverのテンプレートを一部変えたい

    Dreamweaver CS3/MacOS 10.4.11 Dreamweaverのテンプレートをページごとに一部変えたいです。 具体的にはナビゲーション部分がロールオーバーになっているのですが、 今いるページのみオンマウスの時と同じ状態にしておきたいのです。 Dreamweaver上で可能でしょうか? 何かプログラム的なものを使用しないとだめでしょうか?

  • ホームページ全体のデザイン・レイアウトをFireworks CS3でや

    ホームページ全体のデザイン・レイアウトをFireworks CS3でやろうと思っています。 別にDreamweaver CS3との連携は必要ありません。デザインしたページの欲しい部分の 画像だけ切り出すために、デザインしようと思います。 そこで、例えばWEBページ幅を800pxとしようとするWEBページのデザイン(デザインは どんなものでもよいとして)をFireworksで新規作成から行い、実際に必要となる画像をスライスして切り出すまで、一連の流れが載っている参考になるサイトは ありませんか?要するにFireworksにて1つのWEBページのデザイン(ここはにロゴ、ここはメニューボタン ここはコンテンツ)などのサイト全体の枠取り(線や画像が配置された 状態)の製作過程みたいなのが載っている参考になるサイトってないですかね? 最後にスライスして画像を切り出す際には、画像だけ切り出せればよく、htmlは別途自分で XHTML+CSSレイアウトにより作成しますので、htmlの吐き出しは不要です。 Firereworkでページ全体をデザインしたものの、一部の画像をパーツとして欲しいだけです。 よろしくお願いします!

  • 一部の画像のみ左に配置したいとき

    ホームページの記事のページをDIVタグでくくって、 その中の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか? できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 宜しくお願いします!

  • WEBサイトの画像の一部に動きをつける方法を教えてください。

    WEBサイトの画像の一部に動きをつける方法を教えてください。 http://www.pt-honpo.com/ 上記サイトの「なんとポケットティッシュ1個あたり2.55円より」中、 「2.55円」の部分が一定時間で動作するようになっています。 ソースを見ると、jpgが配置してありhtmlを見る限りでは、 そのような動作を行うための記述は見つかりません。 外部CSSやjavascriptによる動作でしょうか? 出来るだけ具体的に教えて頂けると幸いです。 宜しくお願い致します。