- ベストアンサー
dreamweaver CS5でフォトアルバム作成は？
- dreamweaver CS5でフォトアルバム作成ができないため、代替ソフトを使う必要があります。
- ウェブフォトアルバムの作成には他のソフトウェアが適しています。
- フォトアルバムの管理を簡単にするために、枚数の多いイラストも考慮する必要があります。
- kuyui
- お礼率52% (49/94)
- ホームページ作成ソフト
- 回答数3
- ありがとう数8
- みんなの回答 （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>
その他の回答 (2)
- dark_kappa
- ベストアンサー率67% (70/103)
画像１枚とその画像のキャプション（タイトルとか説明文）を、とりあえず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ならば、スタイルの適用をボタンクリックで外せますから、スタイルを外して編集すれば、それはそれはシンプルな編集が可能になりますし。
補足
丁寧な解説ありがとうございました。 ちょっとうまく理解できなかった部分があるので確認させてください。 <div class="pict"> <p><img src="ファイル名.jpg" alt="代替文字" width="200" height="150" /></p> <p>キャプション</p> </div> を利用して増やしていくというのは、要するにCSSで任意の大きさのボックスを作って そこに画像とキャプションを入れるということですね。 ＞あとは、これを段組みの要領で1ページに複数設置して行けばいいのでは。 この部分なのですが、pictで作ったボックスというのは「1枚にボックス1個」で 枚数分だけボックスが必要ということでしょうか？ まだ使い方をきちんと理解してないので私が間違っているだけかもしれませんが、 1枚に1ボックスでないと （例えば横１列に1ボックスとか） サイズの異なるサムネイルを掲載したときに間隔がずれますよね？ なので枚数分だけボックスが必要になるのですね？ でもそれだといちいちボックスを設定するのがかなり大変ではありませんか？ 試しにやってみましたが、かなり手間がかかります。 （テンプレートの使い方を知らないだけだからだと思いますが・・・） よろしくお願いします。
やりたいことは、dreamweaverであろうがホームページビルダーであろうが、同じ結果になるでしょう。単にHTMLの書き方の問題です。 画像をブラウザに表示するには、サムネイル（縮小画像）から、その画像に、リンクすればいいだけのことです。表示のさせ方をいろいろやりたいなら、javascriptでやるのがいいでしょう。 とりあえず、dreanweaverはやめて、ホームページビルダーでやってみては？ なお、HTMLは、ソースコードを編集することをお勧めします。 htmlをわからないことには無理です。
お礼
ありがとうございます おかげでdivの使い方やレイアウトの考え方の勉強になりました。 これを元に自分でアレンジを加えてみたいと思います。