ホームページ改修中

アートファーム・シエロニのブログ、リニューアルです。

afc.png
 
Art Farm Cieloni(アートファーム・シエロニ)のブログがリニューアルしました。
やっとWordPressが始動だぁ〜
 
 
    

| | コメント (0)

Dreamweaver CS5のバリデート

110304-2.JPG相変わらずおしゃべりなチョコちゃんです。
 
ところで、 Dreamweaver CS5のバリデートなんですが、
いじってみて、思いました。

先日購入したこちら

"効率的なサイト制作のためのDreamweaverの教科書" (鷹野雅弘)

で紹介されているFirefoxに
「web developer」アドオンをインストールして
「web developer」ツールバーの「ツール」「ローカルHTMLファイルを検証」で
W3C Markup Validation Serviewのサイトを使う方法
というのは、イマイチでございます。
 
と申しますのは、
ここが変だよと、指摘してくれるわけですが
これこれこういうことだから変なんだよ、という部分が、
当然のことながら英文でございます。
 
私のように英語力が何かと???な人間には
一番知りたいところが、霧の向こうなんですのよ。
トホホでございます。
ローカルファイルを検証できるのはありがたいのですけどね。
 
併せて紹介されている
Another HTML-lint
では、アップしたものであれば検証できるようです。
こちらは日本語。
 
ただですね、、、
 
こちらの本

"Web制作が3倍早くなる!Dreamweaver効率的サイトデザイン術 215 (Web Designing Books)" (茂木葉子)
で、紹介されていた
Extension Managerでダウンロードした
Deremweaver CS5 Validator で検証して
問題ないとされたファイルも、
結構いろいろ指摘されちゃいました。
 
Another HTML-lintのチェックの方が厳しいみたいですね。
 
で、どうする?
 
私的には  Deremweaver CS5 Validator で十分じゃないかと。
 
こちらでOKで、
AdobeのBrowserBab で見た目壊れてなければ
それ以上突っ込んで完成度を求めなくてもいいかなって。
 
ホームページは
規格も流行もどんどん変わっていくものだから
必要十分な程度で、
適度に手を入れていくスタンスの方が良いのではと思っております。
この、「手を入れていく」という部分がなかなか出来なくて
今のようなていたらくに陥っているわけではありますが、、、
 
はいっ、がんばります。。。
こつこつやります。。。
 
なんて、チョコちゃん相手におしゃべりしたりして、、、
だって、相方もうとっくに寝てるし
いつも一人で夜なべ仕事なんだもの。。。。
 
 

| | コメント (0)

カセキの時間、ポータルページつくりました。

bm-minoriCC_kaseki_top-w.jpg
ダラダラと長〜い巻物みたいになってしまっていた「カセキの時間」のホームページですが、
やっとポータルページと詳細ページに切り分けることになりました。
 
詳細ページはまだ一部しかアップできてませんが、随時追加していきます。
 
まだおかしなところとか、あると思いますが、お時間ありましたら見てやってくださいませ。
 
Dreamweaverに頭のてっぺんまで漬かって格闘中でございます。
表示が壊れていたりしたら、教えていただけると助かります。
よろしくお願いいたします。
 
  110223.JPG

| | コメント (0)

Deramweaverの便利 その3

0110227-2.JPG 梅咲きましたね!
本格的に春だなぁ。。。
 
Dreamweaverは基本、htmlやCSSを吐き出すソフトなので
ホームページでこんなことが出来るよ、って部分は
結構htmlやCSSの領域だったりすることもあり、
別にDreamweaverでなくなって実装出来るものが多々あります。
 
それでも、構築にDreamweaverを使ってるからこそ便利だぁということは
いろいろあるようです。
 
最近は「CSSインスペクト」によくお世話になりますなぁ。
ボックスモデルをビジュアルで確認できる機能なのですが、
フロートのクリアが上手くできてるかもわかりますね。
 
ボックスモデルのmargin, paddingが意図したように効いてるか
見てわかるのは、それだけで助かるのですが
floatのクリアに失敗している場合も
ボックスの表示が変になる(具体的には書類全体が領域の色になるようです)ので
見た目OKな時に助かってます。
 
あるのですよね、ブラウザでプレビューすると一応大丈夫だけど
コードは間違ってるってこと。
 
何せ、ヨチヨチコーダーですから、、、、ポリポリ。。。
 
 
    

| | コメント (0)

Dreamweaverの便利 その2

110221-2.JPG チョコが一番外の様子に敏感です。
お隣のワンコが鳴いたりすると、窓際に飛んできます。
 
さて、少々古漬けに片足突っ込んでる昨今ですが
なかなか成果が上がらないのが辛いところ。
 
効率の良いテンプレートの作り方やら、
フレキシブルなCSS分割の考え方とか
試行錯誤がどうしても必要になってしまう。


だって、テンプレート適用の段取りを間違えると
テンプレート以外の部分が全部消えちゃったりサーーー
(バックアップは取ってあったけどね)
 
疑似クラスの記述順番を一カ所間違えただけで
リンク部分の色の設定がちゃらんぽらんになっちゃったりサーーー
(原因確定に時間食っちゃいましたよ、も〜)

 
CSSも共通部分と、パートごとと、
フォントサイズ用に3枚など、
そして、個別テンプレートごとに、
読み込み用CSSに必要なものをリンクさせて準備、などなど。。。
 

そりゃ、画像だって入りますわよ。
Photoshop書類に、Illustrator書類、
ローカルのディレクトリに、一緒に置いておけると
いちいち探さなくて済むので便利、
でも、アップロードや同期にジャマ、
って、そのためにあったんですねー、クローク!
 
実はどうやって使うものかよく知らなくて使ってませんでした。
フォルダや書類にクロークを設定すると
それはアップロードされなくなります。
サイト定義で拡張子で 設定することも出来ます。
あ〜ん、もっと早く使えば良かったぁ〜。 

    

| | コメント (0)

Dreamweaverの便利 

110221-1.JPG ヨリさんはしょっちゅう鼻の頭を擦りむいてます。
(ウソっ)
 
でも、鼻の頭黒かったら、ちょっとはカッコ良かったのにねぇ。

 
Dreamweaver漬けの日々でございます。
もう、ちょっと漬かり過ぎかも。
 
「コードナビゲーター」便利ですね。
最初は意図せずチラチラ出てくるのが迷惑だったのですが
CSSの要素が増えてくると
編集したい部分にすぐジャンプできることがわかって
大変重宝でございます。
 
デザインビューで確認したいところに合わせて
コマンド+オプション
適用されている内容が
どのファイルのなんてID、クラスかが表示されるので、
選ぶだけです。
CSSファイルが開いて、
ドンピシャにカーソルが移動済み。
 
私はコードビューとデザインビューを分割で作業するので
すぐに編集を始められて世話なしでございます。
 

| | コメント (0)

Dreamweaverの本を買う

110212.JPG Dreamweaverをいじっていて
いろいろ便利に出来てるんだろうなぁ、、、と思いつつ
どうもいまいちよくわからないところも多々あり
いちいちネットで調べながら使うのも
何とも効率が悪い気がして
やっぱ、解説本ぐらい買うべきか、と思い立ちました。
(今頃か? 買うならもっと早く買えよっ!)
 
パソコンがらみの事柄は、
ヨドバシカメラのマルチメディア館2Fの書籍コーナーが
私の定番だったので
埼玉に移ってからすっかりご無沙汰だった重い腰を上げて
久々に行ったわけです。
 
・・・なんか、縮小してないですか、、、
CSSの本なんて皆無。。。
 
エンジニアさんが手に取るタイプの本に絞った感じですかね。
さすがにDreamweaverの本は少しありましたけどね。。。
 
 
CSSの本も見たかったので、ちょっと歩いてハンズの隣の紀伊國屋へ。
こちらはそれなりにありました。
 


"Web制作が3倍早くなる!Dreamweaver効率的サイトデザイン術 215 (Web Designing Books)" (茂木葉子)
 
最初こちらが良さげと思いました。
知らないこともいっぱい出てる感じがして、ちょっとプロ仕様っぽい。
 
そしてこちら

"効率的なサイト制作のためのDreamweaverの教科書" (鷹野雅弘)
 
アマゾンの書評でとても評判の良い本です。
ざっと見てみると、ホント、かゆいところに何とやら
丁寧で親切、今の私でしたら、こちらの方が有用なカンジ。
ということで、こちらに決めました。
 
この二冊、どちらも去年の暮れに出たものなので
内容の新しさ古さは差がないと思われます。
違いはおそらく
「制作が早くなる」と「効率的なサイト制作」の
コンセプトの違いにつきるのではと。
 
どこを詳しく書いて、どこを流してるかの基準がそんな雰囲気でした。
 
全部をくまなく比べたわけではないのですが
(立ち読みですから、汗)
たとえはロールオーバーなら
「3倍早くなる」は、割とさらっと別画像を用意するタイプが紹介されていて
「効率的な」はマクロメディアのライブラリを使うもの、
CSSを使うもの、
CSSの背景画像を使うもの、
iQuery+yuga.js、
CSSで不透明度を落とすもの、と出ております。  
 
また、バリデートのないCS5への対処法としては
「3倍早くなる」は
Extension ManagerでDeremweaver CS5 Validatorをダウンロードする方法が紹介されていて
(Zen-Codingとか入れていて文字化けする場合は、Configurationフォルダを捨てると良いそうですよ、フォルダは再作成されます)
「効率的な」は
Firefoxに「web developer」アドオンをインストールして
「web developer」ツールバーの「ツール」「ローカルHTMLファイルを検証」で
W3C Markup Validation Serviewのサイトを使う方法が紹介されています。
 
と、これに関しては Extension Manager使う方がお手軽だだわいなぁ、とか、
ダブる内容とそうでないもの、いろいろなので
余裕があったら両方手元に置いた方がベターかも知れません。  


何はともあれ、買ったからには使い倒してやるぞと、決意するのでありました。
 
 

| | コメント (2)

ホームページ上の印刷ダイアログへのリンク その2

110208.JPG いえいえ、文句なんてこれっぽっちも
はい、おっしゃるとおりです。
羽毛布団はみんとさんのものです。
人間は時々貸していただければ、それでもう・・・十分でございますから、、、
 
昨日の書式は
こちらの方がよろしかったようでございます。
 
<a href="javascript:void(0);" onclick="print(); return false;">print</a>


print

私の環境ではどちらも挙動に差はないのですが、こちらが定番のようです。汗っ
 
まったく、こんな調子だから、ちっとも。。。。
 
 

| | コメント (0)

ホームページ上の印刷ダイアログへのリンク

110207.JPG おつむてんてんにご満悦のヨリさん。
 
ホームページを回っていてよく見かける印刷ダイアログへのリンク、
まぁ、メニューから印刷を選べば出てくるダイアログですけど
時々、ホームページ上のリンクからダイレクトに出るようになってたりしますよね。
 
どうやるんだろうぉなぁ〜、とか、思ってたのですが、
ただ、ダイアログを出すだけなら、あまり大変でないことがわかりました。
 
<p onClick="print()"><a href="#">print</a></p>
 
この場合、print というテキストに空リンクを設定して動くようにするだけのようです。
 
常識???
 

print

こんなヨチヨチのコーディングですから、なかなか行ったり来たりでございますぅ。。。
 

| | コメント (0)

cssとSEO

110201.JPG サイン用のオブジェには、取り付け用のアンカーを溶接します。
オブジェ自体に厚み感があるので、浮かさずに取り付ける予定。
 
 
ところで、新しいホームページ用にcssをいろいろ検討中です。
 
cssはテンプレートとして
フリーで使えるものがダウンロード出来たり
売っていたりするのですね。
 
ウチでそのまま流用できそうなものは見つからなかったのですが
あちこちのホームページを読んでみて
htmlは装飾的なものは極力排除し
レイアウトは、とにかくcssでやる、
装飾的なタグはhtmlを汚すものだ、的な傾向に、
ちょっと頭がクラクラしました。
 
テーブルでレイアウトを整えるなんて目の敵、なんでしょうかね。
 
 
もう、すでにテーブルを多用している古いページがたくさんあるので
とてもその通りには出来そうにないのですが
非推奨タグを使わないように、作り直さないとなぁ、と考えております。
 
それから、
今時のページに多いように感じる
ページ最上部に、小さくサイトの説明文が入っているのは、
見出し1のタグをcssで再定義して、小さく表示させて
SEO対策としていて、定番である、らしきことが、
そこここのホームページで紹介されていて
そういうものかぁ、、、と思い
相方に話したところ(SEOは私より詳しいです)
「それって、もう、スパム扱いじゃないかなぁ・・」ん(?_?)
 
要は皆さんがやる頃には、定番過ぎて対策にならん、と言うことらしいです。
 
 
Dreamweavereでのテンプレート制作中なんですけど
行ったり来たりでなかなか、だなぁ。。。。
 
 
それにしたって、ヨリさんは天下太平。
110201-2.JPG ちなみに上記の「ん(?_?) 」
ドンピシャの位置に、ヨリがキーボードにジャンプしてきながら入力していきました。
記念に残しておきます。
ネコの知能って、いったい・・・?
 
 
 

| | コメント (0)

より以前の記事一覧