« ■少しずつですが体裁を整えてます | Main | ■三岸節子記念美術館 »

2005.04.30

■Dreamweaverにチャレンジ

サイトの構成にかかわるようなリニューアルをする気になったら使ってみたいと思っていたDreamweaver。
初めてこのソフトを使ってみたいって思ったのはいつだったろ???
思い返してみたら、な、なんと4年前!!!!!
使いたい-難しそう-新しいものに取り組む気力がいまいち。。。
このくりかえし(^^ゞ

初めてHPなるものを作ったときから、ずーーーーっと愛用していたホームページビルダー。
当初はバージョンUPする度に飛びついていたのですが、最近はHPへの気力が失せてて、バージョンもあげないままきていたんです。
別にバージョンあげなくたって、使いようで、いくらでも今風のページは作れるはずですが、その知恵もなく(^^;
バージョンUPを考えないでもありませんでしたが、この際、かねてより使ってみたかったDreamweaver MXに手をだしてみることにしました。

このソフトを使うときには、まずサイトの構成をしっかりしておいた方がいいというのを聞いたことがあるのですが、そこはそれ、いきあたりばったりの私(^^;
例のごとく「とえあえずつくりはじめちゃえ~。」

とりあえずトップページを作って(中身なしの)保存しようとしたら、拡張子がhtm。
「そういえば環境設定した時『ん?』だったよなぁこれ。。。」
新規ドキュメントの拡張子のデフォルトがhtmになっていたんです。しかもそこではhtmlと書きかえれない状態で。
「私、htmlの方がいい(-_-)」

調べたら、やはりxmlファイルいじらなくてはいけない様子。
初めて使うソフトでこの手のファイルをいじるのはやっぱりどきどき。何回も痛い目にあってる私としては、元ファイルのコピーだけはとっておいたことは言うまでもありません(*^_^*)

で、ごちゃごちゃあちこちさわりまくりながら、「レイアウトビュー」っていうのを使って実際に作りかけてみたのですが、思うようにいかない(T_T)

スペーサーイメージとかが便利に作れて使えそうだったので、即登録。それを上手に埋め込んでいきたいのだけど、幅の狭いセルとかがうまく選択できないんです。
画面に慣れてないせいなのだけど、テーブルが入れ子状態になってくると、そもそも自分がどのテーブルのどのセルをいじってるのかさっぱり(?_?)

もうタグ見るしかなくって、タグでずいぶん操作するはめになりました。
(テーブル関係のタグなんて今まで避けて通っていたのに(^^ゞ)
コピペで行もずいぶんふやしました。

ごちゃごちゃいじって、2日目にして、やっとおぼろげだけど、「レイアウトビュー」で自分がしてることが見えてきました。
やっぱり習うより慣れろですね。

今まで避けて通ってきたスタイルシートも、影響の少ないフォントの指定に使ってみました。

まだまだ入り口にも入れてないかもしれないけど、おもしろそうなので、これからしばらく使ってみようと思います。
タグのコピペでめんどいことしていたけど、MXには「スニペット」って便利な機能があるようだし。

うん!ガンバp(^o^)q

今風のサイトデザインができたらいいな♪私の目下のささやかな夢です♪

|

« ■少しずつですが体裁を整えてます | Main | ■三岸節子記念美術館 »

Comments

DreamweaverMXって新しいのでしたっけ(笑)殆ど最初に購入した物でやってます。
だから他のソフトと比較した事がないので使い勝手の違いが良く分かりません。でもHPビルダーはちょっとだけ体験版で使ったことがありました。私的には、最初からと言う事もあるのでDreamweaverは使い易いです。でも少しお値段が張りますね。だからバージョンアップできません。以前よりFLASHだけは欲しいと思っていたのですが、それもかなり高額で手が出ません。誰か持て余していたら安くオークションにでも出品してくださいませんか(笑)

CSSについては、MovableTypeのBlogを弄って
概略程度分かってきたような感じです。
でも最近HPの更新も面倒になりつつあります。
Blogのカスタマイズも奥が深いかなぁ、思います。
でも自分なりにデザインを変えるとやる気もでてきますね。楽しんで、頑張ってくださいねぇ。

Posted by: C・バード | 2005.05.01 at 01:42

C・バードさん、お久しぶりです。忘れないでいて下さっててうれしい(笑)m(__)m♪

C・バードさんはDreamweaverをお使いでしたね!心強い!
最近、HPの更新どころか、ネットから離れつつあったのですが、舞い戻ってきました(笑)

blogにしてもすでに浦島太郎状態で(^^ゞ

好きなところからの~んびりとまた楽しみたいと思っています(^o^)/

FLASHもぜひやってみたいと思っています♪

Posted by: rubyruby | 2005.05.04 at 19:38

こちらへは初めてお伺いします。

>DREAMWEAVER
いよいよこれを使い始めましたか?それにしてもMXは高価でしょう。
小生は未だVer.4を使っています。

>拡張子のデフォルト
「編集」-「環境設定」-「一般」-「保存時の拡張子を追加」にチェックを入れ".html"とすればいいですよ。

DWを使い始めると”タグ”操作が多くなると思います。
特にテーブルなどは列、行だけ作って後はタグで作ったほうがいいように思います。

>CSS
これもかなり作りやすいので是非活用ください。

body,table { font-size:95%; } .box1 { border :1px solid #0054A6; } .po { font-size:94%; position: relative; left: 8px; line-height: 13pt; } .po2 { font-size:94%; padding: 10pt; line-height: 13pt; } .po3 { position: relative; left: 8px; line-height: 13pt; }

↑参考に利用ください。

最近はフォントデザインと文字サイズにはまっています。

Posted by: ムッシュ | 2005.05.05 at 11:30

>ムッシュさん
いろんなアドバイスありがとうございます!m(__)m♪
やはりタグの操作が多くなるのですか。。。
半信半疑でいろいろなことしている私にとっては、実際に使っていらっしゃるかたの生のアドバイスがなによりありがたいです。

参考にさせて頂きたいCSS。
今の私のレベルだとなにが書かれてあって、どういう効果があるのか、それより以前にどこにペーストしていいかサッパリわかりません(*^_^*)
さきは長そう!(笑)
まずはこれを宿題にして頑張りますp(^o^)q

ところで、拡張子のデフォルトのことですが、「環境設定」の「一般」のところをみてみました。
でもその項目がなくて(T_T)
調べてみたら、MXは「環境設定」-「新規ドキュメント」の方に表示されていて、設定を変更するためには、ドキュメントタイプXMLファイルにあるデフォルトの拡張子を変更するみたいです。
でも、これみて、環境設定のどこそこってすぐアドバイスできるムッシュさんは、やはりしっかり使いこなしていらっしゃるんですね(@_@)

Posted by: rubyruby | 2005.05.05 at 17:59

おはようございます。

GW中にいろいろ考えましたが、現在製作中のサイトでCSSをそれなりに使ってますので送ります。
メールアドレスを付記しましたので空メールをお願いします。

お互いに協力し合いましょう。

サイトマップ的には
CSSはトップページ(index.html)と同一の階層に置き,外部ファイルとして取り扱い、(head) (/head)間にリンクすると使いやすいです。
タグが使えるようなのでカッコにしました。

(head)

(link rel="stylesheet" href="top.css" type="text/css")

(/head)

Posted by: ムッシュ | 2005.05.09 at 09:41

うわぁ!きっととてもよいお勉強をさせて頂くことになると思いますので、うれしいです♪
空メールというのもなんですので、きちんとメールさせて頂きますm(__)m♪

Posted by: rubyruby | 2005.05.09 at 15:23

rubyrubyさんのやりたい事かどうか分りませんが
CSSの指定じゃないものならこれでいけると
思います。
rubyrubyさんのDreamweaverMXと私のは違うので
少し違うと思いますが参考になればどうぞ。

テーブルを作ると
プロパティに・・・
セルの余白(こちらの数値適宜指定)
セルの間隔(1にします)
ボーダー(0にします)
背景色(ここの外枠の色 例:黒を指定します)

今度は、テーブルの中の色を指定します。
テーブルの中ポイントしますと・・・
プロパティは・・・
背景が2つあると思います。
画像の指定が出来ない方の背景に色指定(例:赤ここが内側の色になります)
これで細い外枠が黒で内側が赤のテーブルが出来ます。
#「レイアウトテーブル」切り替えでも簡単に出来ると思いますが・・・

テーブルを利用して細いラインを指定したいのなら
透過gifで細いラインが指定できますよ。
まずgif画像を作成します。大きさを1×1ピクセル(2×2でもいけます)
の画像を作ります。小さくてプレビューしても画像は見えないです。
それをテーブルにこのようにすれば良いです。

<table WIDTH="50%" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
<td COLSPAN="3" bgcolor="#669933"><img SRC="gif/spacer_clear.gif"
WIDTH="2" HEIGHT="1"></td>
</table>

タグはこうなります。上記の場合は、透過gifは「spacer_clear.gif」になってます。
お分かりだと思いますがこちらを自分で作ったgifを指定。
ラインの色長さは、bgcolor="#669933" WIDTH="50%"などを適宜変更します。

Posted by: C・バード | 2005.05.10 at 10:46

追伸:コメントはメアドを指定しないと受け付けないようになってますが、当方メアドはスパムが来るのでウェブ上では、載せないようにしています。最近スパムも巧妙でフィッシング詐欺など実際来てます。驚いたのは、Yahoo!サイトそのもの(よく見ると若干ちがいますけど)HTMLメールが着たりしました。そこにパスワード指定するように見せかけて情報とるようになってます)ですのでメアドは載せません。このメアドは偽りのメアド(前後省いてます)ご了承ださい。

Posted by: C・バード | 2005.05.10 at 14:26

>C・バードさん
アドバイスありがとうございますm(__)m♪
そういえば、以前にもC・バードさんから表の枠についてのワザを教えて頂きましたね!
本家の方では更新さぼってる私ですが、別口サイトでよく利用させて頂いているんですよ(*^_^*)m(__)m♪
だけど、C・バードさんのこのレスで、ムッシュさんの記述していただいたものの想像がつくようになりました。
みたことないものみるとまずパニック起こす人で(笑)やっと気持ちを落ち着けて見ることができました。(それでも初めてみる文字がいくつかで、どこで調べようかまだパニくってますが(^^ゞ)
ビルダーのビューモードで編集してると、タグがぐちゃぐちゃになっていくことがあって(例えば何回も色変更してるとfontタグが山のように築かれたりする)、タグの整理くらいはたまにすることもありましたが、表に関するタグはできるだけさわらぬ神にたたりなしをきめこんでいました。(入れ子を多様する人なので)
C・バードさんは、ブログのデザイン変更で、CSSも、しっかり習得されたんですね(@_@)
師匠に恵まれラッキ(∩_∩)☆
まずはCSSの記述みてもひるまないようになりたいです。
ところで、C・バードさんは主にスタンダードビューで編集しているのですか?
私は一冊参考書を持っているのですが、きちんと読めばいいものを、やりたいばっかりでつまみ食い的読み方で、レイアウトビューから入ってしまいました。
試しにレイアウトビューで表をかいてみたらデフォルトでボーダーが0になっていて、罫線を意識しなくてデザインできそうで「るん♪」って思って。でも、いくつかセルを、そしてその中に表を→またセルを。。。と追加していくうちに混乱してきて(^^;
自分がどのテーブルで、どんな作業をしているのかわからなくなってしまいました。
さっきC・バードさんの方法(赤に黒枠)をスタンダードビューでやってみました。(出来ました!(∩_∩)v)
表のプロパティはこっちのほうが詳しくてわかりやすいですね。
試しにtopページを見てみたら、私の意図と反する行が隠れてました(^^;
ごちゃごちゃやってるうちに出来たページなので、不審なものがいっぱい(^^;自分で何やったのか、わかりかねるところがたくさんありました(笑)

Dreamweaverは空セルへの対応がしっかりしていますね。
見えないかもしれないけど(笑)topページの黒いセルの下にグレイで影のようにしたセルがあるんですよ(*^_^*)
これは見よう見まねでやってみたんですが、C・バードさんはしっかり活用していらっしゃるんですね!
くどくなりますが、人のお話・やり方は大変勉強になります♪
これからもぜひいろいろ教えて下さいm(__)m♪

メアドの件は了解です。
(そういう手があるのか。。と感心してしまいました(笑))
某掲示板でもスパム対策を少し書いていらっしゃいましたね(^^)それも私はぜひ参考にさせて頂きたいと思っています!!!

Posted by: rubyruby | 2005.05.11 at 15:25

勉強家のrubyrubyさんに釈迦に説法かもしれませんが・・・^^;

CSSについては、私は殆ど理解してませんです。私も論より証拠、まずはやってみよう!
と言うタイプです。基本的にスタンダードビューですが、でも
適当に使い分けてはいますかねぇ。それこそ細いボーダーなどには便利かなぁ。
でもテーブルが沢山になると分かり難くなりますね。そんな時スタンダードに
戻したりしてます。

いまひとつCSSをファイルにしてLINKする方法(ムッシュさんも書いてますけど)
で私のHPのサイドのタイトルをCSSで指定してみました。でもIEとNetscapeでは見えますが
Operaでは駄目みたいです。^^;構文が変なのかな?(その辺は適当ですから)

ファイルでCSSを別に指定すると他のページも利用できるので便利ではあります。
それを取り込む機能がDreamweaverにはあります。(他ソフトもあるのかな?)
でもムッシュさんが書かれて位置に直接指定してあげれば良いのですが。
Blogのようにファイルのあるパスを指定でもOKです。

全体のデザインでstylesheetでつまりテーブルで指定するようにするのが
今一わかりません。個々での指定については少しだけ分ります。そのあたりは
そう難しくはないようですよ。Blogのカスタマイズで確かに勉強になりました。
こんなところを見ながらですけど^^;
http://www.tohoho-web.com/css/index.htm

そうそう前後になりましたがrubyrubyさんの今の問題はなんでしたっけ?(笑)

Posted by: C・バード | 2005.05.11 at 17:01

rubyrubyさんのトップページのソースを見ました。
テーブル内の各セル毎に"spacer.gif width="1" heigh="1""が入ってますね。
これらはスタイルシートの「ボックス」で上下左右のマージンをピクセルで指定できます。
spacer.gifは任意の空白、バーなどとして利用できるのでとっても便利。
Fireworksでキャンパスサイズを1x1にしてgifで書き出し、必要なところに挿入して幅と高さをその都度書き換えればいいので気に入って使ってます。

そうそう、Dreamweaverの解説書は沢山買いましたが、最も的を得ていて有効利用しているのを連絡します。
(サイト構築が終わったので手元にないものですから)

最近作ったサイトです。参考にしてみてください。
http://www.kyouwagroup.co.jp/

Posted by: ムッシュ | 2005.05.11 at 18:20

現在の問題は。。何が問題なのかがわかっていないのが問題です(笑)
なにしろ基本操作がまだよくわからずあたふたしているところですから(^^;
Dreamweaverの操作のことなら、何聞いても「へーぇ!!へーぇ!!へーぇ!!」状態!!
コードビューとデザインビューのスタンダードビュー、レイアウトビューを牛若丸のようにぴょんぴょん自在に動き回わってみることにします(^^)

ところで、CSSのことは気になっています。
ずーーっと以前(6~7年前?)、初めてCSSなるものを知ったとき、そのデザインの自由性にびっくりしたのですが、それと同時にブラウザによる見え方の違いに唖然。その印象がすごく強くて恐くて手がでなかったんです。
設定もむずかしそうだったし、いろんな環境で無難に見えるほうがいいやって(笑)
HPビルダーはCSSを十二分にあつかえるソフトだったけど、私はCSSを、すっかり自分の垣根の外においてしまいました(^^ゞ
でも、ガイドブックみたら、最近ではW3Cによって策定されているCSSをサポートするブラウザも増えてきたとか。
いろんなサイトのソースみると、CSSもいっぱい。
ここへきて一気に玉手箱をおもいっきしあけた気分です(笑)

だけど、C・バードさんのコメント読んでるとブラウザへの影響はやっぱりあるんですね。
Operaかぁ。。
うーん、それにしてもやっぱりC・バードさんはやるなぁです。
ちゃーんとチェックしているんですね。私も以前は、そのみっつでチェックしてたこともありましたが、だんだん横着くなって、今ではIEのみ(^^;それでみえなきゃごめんなさいって開き直っていたので、ちょっと反省しました(^^ゞ(反省だけで終わるかも(笑))

そのガイドブックに、CSS自体を利用できないブラウザ、ユーザ側でCSSの利用を許可してない場合があるので、CSSのみでの運用には注意とありました。
じゃ、どうすればいいの?
って思わず本に向かってつぶやいていましたが(笑)
どのあたりに自分の妥協点を置くかでもそのうち悩みそうです(笑)

教えて頂いたサイトみてきました♪
「お気に入り」入り~♪o(^^o)♪m(__)m♪

Posted by: rubyruby | 2005.05.11 at 19:07

>ムッシュさん
レスがかぶさってしまったようですm(__)m
参考書のご紹介、楽しみにしています♪
お知らせ下さったサイト、ムッシュさんのサイトのtopから、実はときおり覗きにいっておりました(笑)
企業サイトとして模範的なデザインだったものですから(*^_^*)
さらに勉強させて頂きます♪

ところで、ソースをご覧下さったのですねm(__)m
得体のしれないことをずいぶんしてるので(^^ゞ恥ずかしいですが、でもご意見頂くと、また勉強材料となります!
そういう方法もあるのですねφ(..)メモメモ

表のスタイル設定、どのへんまでがあまりブラウザの影響を受けないものなのかまだよくわかっていません。上下左右のマージンの設定のようなものは大丈夫の部類なのですね?

Posted by: rubyruby | 2005.05.11 at 19:28

改めて確認したらOperaでも大丈夫でした。^^;
私も何だかんだ機能的に優れているIE通です。
CSSは見え方がそれぞれ若干違ってきますね。
見る側(ブラウザ)にあわせてCSSを切り替えができるようにしているサイト(Blog)がありました。
見る側にはこれは便利です。

Posted by: C・バード | 2005.05.11 at 22:55

http://www.scc-kk.co.jp/lib_scc/catalog/books/B-99/B-99.html
これはかなりのものです。参考にしてみてください。
ただいまの興味は「フォント」あまり買いすぎだと思うのですが、相手のPCが当該フォントを持っていなければ、見えないので画像にしなければならないし、

その昔、ワープロの設計をしていたとき一つのフォントを開発するのに1億かかっていたのを考えるとデバイスの進歩はコストも大幅に改革ですね。

Posted by: ムッシュ | 2005.05.11 at 22:57

>C・バードさん
はじめまして。
サイトを昔からROMしてましたけど、「柏レイソル」のファンですか?
小生、その親会社にいたこと、西野監督時代、現社長の小○寺さん、とかいろいろな絡みもありローカルながらファンです。
ゴルフバックにはマスコット人形をつけていたり、
これからよろしくです。

Posted by: ムッシュ | 2005.05.11 at 23:02

ムッシュさん、初めまして。
と言いますか、お名前は存じてました。
サイトも何度か覗かせて頂きました。ゴルフがお好きなようですね。

レイソルは地元でもあるので一応
応援してます。レイソルも監督が西野さんの
頃は結構強かったのですが、昨今のレイソルは低迷の一途ですね。

こちらこそ宜しくお願い致します。

Posted by: C・バード | 2005.05.11 at 23:26

>C・バードさん
調べてみたら、IE利用者は9割を占めるとか。
あるものの独占はよいことではないかもしれないけど、作る側からしたら、このかたよりはあり難い気がしてきたりして(笑)
>見る側(ブラウザ)にあわせてCSSを切り替えができるようにしているサイト(Blog)がありました。
理想的ですね(^^;

>ムッシュさん
ご紹介の本、見てきました。私が時折利用するAmazonでも高い評価マークがついていました(^^)頼もしい本をご紹介して頂きありがとうございますm(__)m♪
フォントもおもしろそうですね(^^)手がけていらっしゃる他のサイトのあれがそうかな~なーんて思って見させて頂いています。
それにしても昔は1フォントに一億だったですか(@_@)すごい。。。。。。

Posted by: rubyruby | 2005.05.12 at 14:00

Post a comment



(Not displayed with comment.)




TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/13352/3922577

Listed below are links to weblogs that reference ■Dreamweaverにチャレンジ:

« ■少しずつですが体裁を整えてます | Main | ■三岸節子記念美術館 »