• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：dreamweaver CS5でフォトアルバム作成は？）

dreamweaver CS5でフォトアルバム作成は？

このQ&Aのポイント
  • dreamweaver CS5でフォトアルバム作成ができないため、代替ソフトを使う必要があります。
  • ウェブフォトアルバムの作成には他のソフトウェアが適しています。
  • フォトアルバムの管理を簡単にするために、枚数の多いイラストも考慮する必要があります。
  • kuyui
  • お礼率52% (49/94)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

No.2です。 > 要するにCSSで任意の大きさのボックスを作ってそこに画像とキャプションを入れるということですね。 そうです。 pictという名前のDIV（これはボックスというイメージで捉えるとややこしいのですけれども）を作って、ひとつのpictに画像１枚（サムネイル）と１行のキャプションを入れます。 class=pictなので、このDIVは繰り返し使用可能になります。 >サイズの異なるサムネイルを掲載したときに間隔がずれますよね？ class=pictのDIVはサイズ固定にしてしまい、その中に入れる画像のサイズはclass=pictのサイズ内であればどのような形状であろうが問題ない、という事だと思って下さい。 >でもそれだといちいちボックスを設定するのがかなり大変ではありませんか？ 複数（例えば６枚）のサムネイルを１画面にバランス良く配置するサンプルを付けておきます。 段組みの基本部分しか載せていませんが、DIV組の参考にはなるはずです。 clear指定は最低限しか入れてないので適宜付け足すなどして下さい。 <html> <head> <title>２×３段組み</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { margin: 0px auto; width: 620px; } #wrapper { width: 410px; float: left; } .pict { height: 160px; width: 180px; padding: 10px; margin-bottom: 10px; background: #CCC; clear: both; } .pict p { text-align: center; } #dan_1 { float: left; width: 200px; } #dan_2, #dan_3 { float: right; width: 200px; } </style> </head> <body> <div id="container"> <div id="wrapper"> <div id="dan_1"> <div class="pict"> <p><img src="サムネイル１.jpg" width="150" height="100" alt="画像１"></p> <p>キャプション１</p> </div> <div class="pict"> <p><img src="サムネイル２.jpg" width="100" height="120" alt="画像２"></p> <p>キャプション２</p> </div> </div> <div id="dan_2"> <div class="pict"> <p><img src="サムネイル３.jpg" width="160" height="120" alt="画像３"></p> <p>キャプション３</p> </div> <div class="pict"> <p><img src="サムネイル４.jpg" width="160" height="120" alt="画像４"></p> <p>キャプション４</p> </div> </div> </div> <div id="dan_3"> <div class="pict"> <p><img src="サムネイル５.jpg" width="100" height="120" alt="画像５"></p> <p>キャプション５</p> </div> <div class="pict"> <p><img src="サムネイル６.jpg" width="150" height="120" alt="画像６"></p> <p>キャプション６</p> </div> </div> </div> </body> </html>

kuyui
質問者

お礼

ありがとうございます おかげでdivの使い方やレイアウトの考え方の勉強になりました。 これを元に自分でアレンジを加えてみたいと思います。

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

その他の回答 (2)

回答No.2

画像１枚とその画像のキャプション（タイトルとか説明文）を、とりあえずdivで括る、というのが一番かな、と思います。 <div class="pict"> <p><img src="ファイル名.jpg" alt="代替文字" width="200" height="150" /></p> <p>キャプション</p> </div> CSSで、クラスpictの<p>でキャプションの文字についてのスタイルを、クラスpictの<img>で画像のスタイルを。 クラスpict自体のスタイルで、タテヨコの幅を。 あとは、これを段組みの要領で1ページに複数設置して行けばいいのでは。 大きな画像へのリンクは、JavaScriptを使うか、画像をクリックすることで別のhtmlを別窓表示するようにするか、どちらかですね。 <div class="pict"> <a href="./album/大きな画像を載せたHTML.html"><img src="ファイル名.jpg" alt="代替文字" width="200" height="150" /></a> <p>キャプション</p> </div> 上記で大きな画像を載せたhtmｌファイル（albumディレクトリにまとめて入れてあると仮定）へジャンプ可能です。 一度アルバムとしてアップしたものは変更せず、追加でいくのならば、Dreamweaverのテンプレート機能を使えばラクですね。 テンプレートを使ってページを増やしていって、メニューを後から増やした場合など、リンクの貼り直しには膨大な時間がかかります。 サイトの設定をしておけば、ファイルを置く位置を変更しても関連するhtmlファイルすべてのリンクを自動的に貼り直してくれますし、テンプレートを使っていれば、テンプレートを変更すると、そのテンプレートから作ったhtmlは全て書き換えられるので、非常に楽です。 Dreamweaverをプロが選ぶ理由が良く解る、そんな機能ですね。 ソシム株式会社　発行 エビスコム　著 「HTML/XHTML＆スタイルシート　デザイン・レイアウト逆引き便利帳」 ISBN978-4-88337-704-6 …という本に、画像周りの取り回しについての様々なテクニックが掲載されています。 他のスタイルシートデザイン本でも同様の物があるでしょう。 （ただしこの本は、スタイル内包型で書かれているので、CSSを別ファイル化するならば臨機応変に対応できなくてはなりませんが…） JavaScriptは良く解らない、というのであれば、上記のようなスタイル本を参考にして、管理しやすく見やすいdivでの段落わけスタイルで作ってみましょう。 Dreamweaverならば、スタイルの適用をボタンクリックで外せますから、スタイルを外して編集すれば、それはそれはシンプルな編集が可能になりますし。

kuyui
質問者

補足

丁寧な解説ありがとうございました。 ちょっとうまく理解できなかった部分があるので確認させてください。 <div class="pict"> <p><img src="ファイル名.jpg" alt="代替文字" width="200" height="150" /></p> <p>キャプション</p> </div> を利用して増やしていくというのは、要するにCSSで任意の大きさのボックスを作って そこに画像とキャプションを入れるということですね。 ＞あとは、これを段組みの要領で1ページに複数設置して行けばいいのでは。 この部分なのですが、pictで作ったボックスというのは「1枚にボックス1個」で 枚数分だけボックスが必要ということでしょうか？ まだ使い方をきちんと理解してないので私が間違っているだけかもしれませんが、 1枚に1ボックスでないと （例えば横１列に1ボックスとか） サイズの異なるサムネイルを掲載したときに間隔がずれますよね？ なので枚数分だけボックスが必要になるのですね？ でもそれだといちいちボックスを設定するのがかなり大変ではありませんか？ 試しにやってみましたが、かなり手間がかかります。 （テンプレートの使い方を知らないだけだからだと思いますが・・・） よろしくお願いします。

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

やりたいことは、dreamweaverであろうがホームページビルダーであろうが、同じ結果になるでしょう。単にHTMLの書き方の問題です。 画像をブラウザに表示するには、サムネイル（縮小画像）から、その画像に、リンクすればいいだけのことです。表示のさせ方をいろいろやりたいなら、javascriptでやるのがいいでしょう。 とりあえず、dreanweaverはやめて、ホームページビルダーでやってみては？ なお、HTMLは、ソースコードを編集することをお勧めします。 htmlをわからないことには無理です。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • フォトアルバムを作りたいです

    フォトアルバムを作りたいです。 1.画像・音声・テキストを入れたい 2.最終的にはDVDに入れたい。 3.ブルーレイレコーダーで再生できたらベスト 要は紙の写真アルバムをDVDで実現したいのですが…。 DVDに静止画などが入ったイメージです。 Adobeの「Adobe Master Collection CS5.5」というソフトではできないでしょうか? できなければ新たに揃えないといけないのでしょうか? よろしくお願いします。

  • DreamweaverでWebフォトアルバムの画像追加は出来ないの？

    Dreamweaver8を使っております。 Adobeのページを読みながら、 コマンドメニューからWebフォトアルバムを作製 したは良いのですが、作成後に画像を追加しようと したところ、やり方が分からない状態です。 後から追加は出来ないのかな？と思いつつ、 質問させて頂きました。 ご存知の方、おられましたら、よろしくお願いいたしますm(__)m。

  • Dreamweaver CS4について・・・

    お聞きします 趣味範囲でビルダーにてHPを作成していますが Dreamweaver CS4にても作成したく考えておりますが Adobeサイトから体験版をインストールしてコツコツ作っていますが なかなかビルダーほど簡単ではなく苦労しておりますが そもそも、Dreamweaver CS4は独学では無理ですかね？ 個々の能力も問われますがソフトも高く、スクールもなかなかの お値段ですが独学に適したサイト、勉強法などお時間のある方、 是非ともアドバイス願います・・・ 使いこなせると面白そうなソフトみたいなんですが？

  • Dreamweaver CS5.5とCS5について

    Adobe Dreamweaverをはじめて購入しようと思っています。 バージョンは Dreamweaver CS5.5が近々発売（5月下旬）のようですが、 Adobe Dreamweaver CS5 Windows版 (Dreamweaver CS5.5への無償アップグレード対象) というのがありました。これはつまり、早く使いたい場合、これを買っても バージョンアップができて5.5と同じになると思っていいのでしょうか？ ※体験版があればいいのですが、日本語版の体験版は まだリリースされていないようです。

  • Dreamweaverの無効になったシリアルの復活方法を教えてください。

    Dreamweaver CS4の体験版を３０日使い試用期間を過ぎていましたが、Dreamweaverを使いたくてオークションでAdobe CS4 Master Collection Windows のシリアルを購入したのですが、インストールするときに再び体験版をインストールしてしまいライセンスの期限切れでシリアルがはじかれてしまいます。どうしたらシリアルがまた使えるようになりますかね。どなたかご指導願います。

  • フォトショップｃｓ３を使いたい

    以前フォトショップｃｓ３を使っていました。又作品を作りたいと思いウェブ版の体験版を使ってみたところ、私の作業はとてもやりにくい。ｃｓ３かｃｓ４を購入する方法はありますか？

  • Windows フォトでアルバム作成

    Windows　フォト、シンプルで簡単にスライドショーが出来るというので使ってみた。新しいアルバムを選択し、コレクションで集められた写真のすべて（419枚）を選択し、作成ボタンを押すと、自動的に”選んだ項目からアルバムを作成します”のメッセージが出て、一見、アルバムが上手く作成されるが、419枚中30枚程しか選択されていない。 全部を取り込みたいのですが、どうすればいいのでしょうか？ 何か制限があるのでしょうか？ 初めてトライした時は４１９枚全部アルバムに取り込まれていました。

  • 【Illustrator CS5 & Dreamweaver CS5】

    【Illustrator CS5 & Dreamweaver CS5】超初心者の質問です。 Mac版を使用しています。 Photoshopはこれまで使っていたのですが、IllustratorとDreamweaverは、ほんの一週間前から手探りで使い始めました。 目的はHP作成です。 質問は２点あります。 １.）Illustratorでロゴを作成しGIF形式で保存するため、 「ファイルメニュー → Webおよびデバイス用に保存」を選択するのですが、背景のキャンバスが大きいまま保存されてしまいます。 最初からキャンバスを小さくすればいいのかとも思ったのですが、そううまいことぴったりのサイズを選ぶのも難しく、いろいろといじってみたのですが、どうもよくわかりません。 仕方なくIllustrator形式で保存して、Photoshopで開いてGIFに変換しているのですが、かなり無駄な作業をしているように思います。 解決方法を教えてください。 ２.）解像度の問題だと思うのですが、 Illustrator上でGIF形式のロゴを作成し、Dreamweaverに持ってきてプレビューすると、文字にギザギザが目立ちます。（画像参照してください。） これの対処方法をご教授願います。 以上、よろしくお願いいたします。

  • Dreamweaver CS3で画像のボタンを押した時に画像を変えたい

    photoshopでボタン画像3つ作りDreamweaver CS3で配置し、挿入バーの一般にある『ロールオーバーイメージ』でボタンのロールオーバーはできたのですが、画像のボタンを押ている時だけ別の画像に変えるにはどうしたらよいでしょうか？ Dreamweaver CS3でやる方法が知りたいです。 Flashでボタンを作る方法と背景画像にボタン画像を使用してCSSでやる方法は知っています。

  • dreamweaver cs3 でのホームページ作成について

    　お世話になります。 以前HPBで全てテーブルレイアウトで添付画像のようなHPを作成致しました。 サイトのページ数が約15枚ほどで、画像の「1,ヘッダー」 「3,左メニュー」「4,フッター」は全てIフレームにして別のHTMLを表示させるようにしています。 「1,ヘッダー」「3,左メニュー」「4,フッター」は全てのページで共通 で表示され「3,コンテンツ」のみ内容が切り替わるようにしています。 　この度ページを更新しようと思ったのですが、段々と左メニューやコンテンツ、フッター等内容が多くなってきてしまい、なおかつテーブルの入れ子に次ぐ入れ子という感じでレイアウトしていたために、どれがどのテーブルかわからず、レイアウトを調整しようと色々といじっていたらレイアウトがぐちゃぐちゃになってしまいました。 そこでこの際勉強も兼ねて一からサイトを作り変えようと思っております。ソフトはdreamweaver cs3でやってみようかと思っています。 cssを使って何とか添付画像のようなレイアウトは作れたのですが、 ヘッダー内や左メニュー内にも細かな段組みレイアウトが作れません。 通常細かな段組み（ヘッダー部分のメニューや左メニューのレイアウト）についてはやはりテーブルでのレイアウトが正しいのでしょうか？ まだdreamweaver cs3も使い始めて間もないもので細かなレイアウトの方法などが理解できていません。今後のサイト更新のためにも分かりやすい形で作りたいのですが・・・。 どなたかレイアウトについての参考URLや方法などご存知の方がいらっしゃいましたらご教授下さいませ。 よろしくお願い申し上げます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する