Dreamweaverで、PDFファイルをサーバーにアップできない時

Dreamweaverで、PDFをサーバーにアップしようとするんですが、原因不明のエラーでアップできない！？

いろんな理由があるとは思いますが、ウィンドウズで、フォルダにてプレビューウィンドウを開いている場合は、閉じてみてください。

プレビューウィンドウを閉じるだけではだめで、

フォルダのウィンドウごと、閉じた方がうまくいく場合が多いです。

備忘録でした。

ちなみに参考サイトはこちらです。
クリックでPDFをダウンロードできるようにしました。

画像が表示されないと困ったら（HTML初心者の方へ）

こちらの記事は、アトリエwebの森のブログへ移転しました。

お手数おかけしますが、下記を御覧ください

http://webnomori.net/2016/02/14/post-1252/

WordCamp Tokyo 2008

WordCamp Tokyo 2008に行ってきました。

WordPressってなに？な方のために説明すると、
わたしは常々、ブログやCMSの作成で、WordPressというブログツールを愛用してるんですが、そのソフト、本家は英語版。
日本人のわたしらが使うには、日本語化されたWordPressがなくてはならないわけで・・・そして日本語化には大勢のボランティアの方で支えられていまして
その日本語プロジェクトの主要メンバーさんたちが実行委員会になって開催した公式イベントなわけです。

常々公式サイトのフォーラムで質問に答えてくれている有名な方々や、プラグインなどを日本語化してくれてる方々、プラグインを作って配布してる人とか、すごいメンバーが勢揃い。
とても刺激になって楽しめました。

いろんな方のプレゼンがあってどれもとても勉強になったんですが、
yuriko.netのyurikoさんの
今の時代携帯対応のサイトを無視しては、日本のネットユーザーの半分を切り捨ててるも同然・・・な指摘、かなりショックでした。
自分が携帯触るの苦手というか、文字打つのもとても遅くて、あんな小さい画面で何がわかるのさ・・みたいな日常なもんで、
ケータイユーザーにもちゃんと情報が読めるようにしてあげることが、これからのサイト作りにも必須になってくるんだなぁ・・・と実感しましたです。。
携帯対応プラグインは別のを入れていたんですが、さっそくKtai Style導入してみなければ。。。。

それから何よりびっくりしてしまったことが、、、
Adobeシステムズ社の西村真里子さんのプレゼンで、このモモンガの森が一瞬ですが。。。。
どーんと紹介してくれまして。メガテンです。。。
なんでも「Dreamweaverを使ってWordPressのテーマを作られている人がこんなに多いんですよ」という事例紹介で。
一瞬だったけどみんな。。見てくれたかな～（,,・∀・)

もうちょっとコンテンツ充実させないと恥ずかしいですね。。
WordPressについてももっといろいろ書いていけたらいいなと思ってます。

＞初心者向け動画マニュアルはこちら　WordPress入門　（動画で解説！ワードプレス日本語版）

CSSで高さ可変の角丸ボックス（DreamweaverでCSS）

ちょっと凝ったデザインにしようとして、すぐにぶつかるのがこの角丸ボックスの問題。
基本的には背景画像を使うことになりますが、問題は中身のテキストが増えても崩れないようにするというのが前提ですよね。
てことで、CSS初心者向けの方法を動画マニュアルで紹介しましたので、こちらでも詳細を書いておきます。

＞CSSを使った角丸ボックスの作り方（前編）
＞CSSを使った角丸ボックスの作り方（後編）


――――――――――――――――――――――――――――――――――
（CSS）
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 20px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 10px;
line-height:2;
padding:0;
}

.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 0px 0px 0px -20px;
padding: 0px;
height: 20px;
width: 570px;
}
html*.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 10px 0px 0px -30px;
height: 40px;
}
――――――――――――――――――――――――――――――――――
<ul>
<li>
<a href="#">イベントタイトル</a> ［08年7月29日］
</li>
<div class="ul-after"></div>
</ul>
――――――――――――――――――――――――――――――――――

●<li>から</li>までがループというか、可変する場所です。

●div class="ul-after"のクラス名はなんでもいいです

●html*　というのは、スター7ハックでぐぐって調べてみてください
セレクタの前にこれをつけると、IE5．5～6、MacIE、サファリなどでスタイルが適用され、他のブラウザでは適用されません。
（CSSのルール的には間違った使い方なので自己責任で・・）


もうひとつ、ラストの</li>のうしろにdivを追加しない方法ではul:afterという疑似要素で指定する方法があります（が・・・IEは反映されません。。。）
上記のHTMLから<div class="ul-after">　</div>を削除して、スタイルシートは下記の様に指定します。
marginなどの調整はあくまでも例なので、スタイルに合うように微調整してください。

*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}

ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 0px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 30px;
line-height:2;
padding:0 0 0 0px;
}

ul:after{
content: url("img/maru_bottom.gif");
display:block;
height:60px;
}

この講座で使った画像はこちらのサイトで使っています
京橋タウンガイド
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

２つのクラスを同時に適用させバリエーションを作る方法

動画講座で、２つのクラスを同時に適用させてバリエーションを作る例をやってみました。

背景画像を使った見出し（DreamweaverでCSS）



例で作ったのは見出し５パターンなので、本来ならh2などでマークアップすると思いますが
クラスを２つ適用させてバリエーションを作ってみる見本ということで
div.midasiというクラスにしてみました。
見出しとしてマークアップする場合は
h2 class="green"
になるわけです。
同じパターンのボックスで、一部の要素にバリエーションをつけたい場合
div class"box2 green"
div class"box2 pink"
div class"box2 yellow"
みたいにして、複数のクラスを同時に指定することができます。


ソースはこちら
――――――――――――――――――――――――――――――――――
（CSS）

body{margin:40px;}
.midasi{
width:400px;
padding:2px;
margin:20px 0px;
font-size:16px;
font-weight:bold;
text-align:center;
}
.green{background:url(img2/green.gif) repeat-x;}
.pink{background:url(img2/pink.gif) repeat-x;}
.blue{background:url(img2/blue.gif) repeat-x;}
.orange{background:url(img2/orange.gif) repeat-x;}
.purple{background:url(img2/purple.gif) repeat-x;}

――――――――――――――――――――――――――――――――――
（HTML）

<div class="midasi green">イタリアン</div>
<div class="midasi pink">和食</div>
<div class="midasi blue">中華</div>
<div class="midasi orange">焼肉・韓国料理</div>
<div class="midasi purple">居酒屋・ダイニング</div>
――――――――――――――――――――――――――――――――――
背景で使用した画像の一つはこちら

これを変更して５色のバリエーションを作ってみました。

作例はこちら
京橋タウンガイド
こちらの見出しでこの画像を使っています。見てみてください。

このサイトはxoopsで制作しています。
URLの静的生成と正しいマークアップでseo対策済み。
xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。
今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。
オールCSSにしてあることで、携帯表示にも対応できるというわけです。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

dlを使っての見た目「表組」の作り方（DreamweaverでCSS）

動画マニュアルで、dlタグを使った表組みの作り方を紹介しました。

＞dlを使っての見た目「表組」の作り方




表は表なので、テーブルタグを使っても全然かまわない訳ですが
dlを使うことで、スタイルシートでのデザインがやりやすくなることもあるし
ソースがシンプルになるので、プログラムを組み込むときに、
どこからどこまでループさせる・・簡単に組めるようになるかと思います。

dlというのは、本来定義リストのタグで、たとえば辞書のように
【ほ乳類】タヌキ／キツネ／クマ／ネズミなど
【鳥類】フクロウ／ワシ／タカ／カモ／ヤマセミ／カワセミなど
【昆虫】トンボ／ハチ／チョウ／カブトムシなど
こんなふうに見出しと説明との繰り返しになる文章に使われます。

同じく、項目名と中身との繰り返しになる表組みや、
役柄とセリフとの繰り返しになるシナリオのような形式にも使えますよね。

ということで、動画で紹介したページのソースを紹介します。

――――――――――――――――――――――――――――――――――
（スタイル）
*{
margin:0;
padding:0;
}
body {
color:#333333;
margin-top: 40px;
margin-left: 40px;
font-size: 13px;
line-height: 24px;
}
dl{
background:#E3E1D5 url(img/green.gif) repeat-y 0 0;
width:480px;
border-top: 1px solid #666666;
}

dt {
text-indent:20px;
width:120px;
}

dd {
border-bottom:1px solid #666666;
margin:-24px 0px 0px 0px;
padding-left:140px;
width:340px;
}
――――――――――――――――――――――――――――――――――
（HTML）
<dl id="recruit">
<dt>
仕事内容
</dt>
<dd>
（１）翻訳業務（２）通訳業務（３）外国語教育
</dd>
<dt>
勤務時間
</dt>
<dd>
業務内容による
</dd>
</dl>
――――――――――――――――――――――――――――――――――
動画の中でも紹介しましたが、いくつかポイントがあるので紹介します

●デフォルトのスタイルをリセットする

dlやdt、ddにはそれぞれデフォルトのマージンが入ってしまってるのでスタイルの最初でリセットしています
*{margin:0;padding:0;}

●ネガティブマージンを使用

ddの方のマージントップを-24pxにして（行間と同じサイズ）１行分上にあげてます。
マージンをマイナスするのをネガティブマージンと言うらしいですね。

●dtもdlも幅指定

dlやdt、ddは、ブロック要素なので幅を指定できます。
というか、幅指定ちゃんとしないときれいな表にならなかったので入れてあります。

今回の見本サイトはこちら
京橋タウンガイド

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使ったポータルサイトの制作も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

背景画像を使ったノート罫線の作り方（DreamweaverでCSS）

スタイルシートを使ったwebデザインのテクニック、今回は
背景に点線の画像を敷いて、ノート風にしてみます。

＞動画マニュアルはこちら　背景画像を使ったノート罫線の作り方

おすすめメニューやおしながき、メモ帳など、
短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。
コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、
１行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで指定すること。
ボックスのmargin-topに同じ高さ（この場合24px）を入れて、揃うようにしています。

使った背景画像はこちら





ソースはこちら
――――――――――――――――――――――――――――――――――
body {
background: #CCD6D9 center;
margin: 10px 0px;
padding: 0px;
}
.box{
padding: 0px;
width: 500px;
border: 2px solid #6699FF;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
}
.note {
font-size:12px;
background: url(img/ten.gif) repeat 0px -23px;
margin: 20px;
padding: 0px 0px 1px;
}
.note p{
line-height:24px;
margin-top:24px;
}
――――――――――――――――――――――――――――――――――
<div class="box">
<div class="note">
<p> ●タイ伝統古式マッサージ</p>
<p>65分コース　5,000円<br>
95分コース　7,000円<br>
125分コース　9,000円</p>
<p>●タイ式リフレクソロジー</p>
<p>35分コース　3,500円<br>
65分コース　6,000円</p>
<p>●アロマオイルトリートメント</p>
<p>65分コース　7,000円<br>
95分コース　10,000円<br>
125分コース　13,000円</p>
</div>
</div>
――――――――――――――――――――――――――――――――――
できたページはこちら


実際に稼働しているサイトはこちら
京橋タウンガイド
xoopsで制作しました。
デザイン：webの森

背景画像を使ったボタンの作り方（DreamweaverでCSS）

動画マニュアルで、スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介しましたので、こちらでも解説します。

スタイルシート　定番テクニック集 >> （1）背景画像を使ったボタンの作り方

スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。

１回目は、画像を使ったボタン。マウスオーバーで色が変わります。
CSSでの背景画像を使って、マウスオーバー時には、背景画像の位置指定を変えて、色が変わるような動きをつけています。
ボタンのテキストは、text-indentで大きな数字を入れて飛ばして、一見非表示にしています。
――――――――――――――――――――――――――――――――――

#button {
text-indent:-2000px;
}

#button a,#button a:link,#button a:visited{
display:block;
height:23px;
width:102px;
background:url(img/button.gif) no-repeat 0px 0px;
}
#button a:active,#button a:hover{
background:url(img/button.gif) no-repeat 0px -25px;
}

――――――――――――――――――――――――――――――――――

<div id="button"><a href="#">掲示板</a></div>
――――――――――――――――――――――――――――――――――

動画の最後で、画像をどんなふうに作ってあるかも紹介してますので、参考にしてみてくださいね。

こちらが使用した画像です



最近作った大阪のポータルサイトです。
京橋タウンガイド
グローバルナビゲーションの上にある３つのボタンは、今回の動画で紹介した方法で作りました。

＊＊＊＊＊

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

ホームページにブログの記事を新着表示させる方法

ホームページに、ブログの新着記事を自動で表示する方法は・・・？
検索で出てくる参考サイトは難しいものが多いので、初心者向きに整理してみました。


ブログの利点はいろいろありますが、その中でも特徴的なのが「RSS」といって、ネットの世界に共通の形式で出力される信号のようなものを配信できることです。このRSSを自動で取得できるスクリプトをサイトに埋め込むと、あなたが書いたブログの新着日記が自動でホームページに表示されます。多少のタイムラグがありますが、手動でＨＴＭＬに新着表示を出している手間からすると雲泥の差。
新着日記を表示させて、訪問者に楽しんで貰ってもいいですし、サイトからのお知らせのような、更新案内に使ってもイイデスね。
下記のページで見本のソースを置いておきますので、使ってみて下さい。

難易度としては、
HTMLをソースの方で編集出来る　＆　スタイルシートがある程度わかる方なら設置可能かと思います。


※たまーに直接メッセージで質問が来るんですが、初対面の方にいきなり質問いだきましても対応しきれないので、このブログへのコメントでお願いします。

規約にも書いておきましたが、記事を見て参考になった方は、ご自身のブログで該当ページを紹介していただけると嬉しいです！

＞webの森：ホームページにブログの記事を新着表示させる方法

フロートさせたら崩れた・゜゜(>_<)゜゜・。

スタイルシートでのデザインを勉強しはじめたとたん、「フロートさせたら背景が出ないor崩れた！」という壁にぶつかってパニックになってる方は多いんじゃないでしょうか。
わたしもかつて・・・。背景に画像をしいたのに
下まで表示されなくて、いろんなブラウザで表示しながら一日つぶしてしまったことが・・・

これは、このフロートの後のクリア（解除）ができてないために、フロートのボックスが乗っかっている元のボックスの中に何も入ってない状態になってしまうことから（表現に語弊があるかもしれないけど、なるべく初心者さんにわかりやすい言い方を探しながら書いてます）
元のボックスに指定した背景画像や色などが表示できなかったり、次のブロックが入り込んでしまい崩れたりします。

では、「フロートの後の解除」ってどうやればいいの？という話ですが、
クリアの方法はいろんなやり方があるらしく（ハックを使う、クリアフィックス、hrタグを入れてそこにスタイル指定・・・など・・検索するといろいろ出てきます）
わたしは一番簡単な、
フロートの外側のブロックの閉じタグの前に、クリアするブロックを入れる、というのをよく使っています。

余分なdivを増やしたくない人は他の方法をとったほうが良いと思いますが、初心者さんにはかなり簡単なのでおすすめです。

このやり方は、動画マニュアル　Dreamweaverでのスタイルシートの使い方　フロートの後をクリアする方法に書いてますので、
興味のある人は見てみてください。



この動画では、スニペットを使って便利に使い回す・・・という方法を紹介しています。
わたしはスニペットを知らない頃はなんでもかんでも単語登録してて、
くりあ＠　で変換すると＜div style="clear: both;"＞＜/div＞
がでることになってます (ﾉ_<｡)

ドリームウィーバーを便利なエディタとして使う方法

Dreamweaverでのスタイルシートの使い方というブログを更新していますが、その中のネタより・・・
ソースコードでCSSデザイン（4）スニペットを使ってコードを入力について、もうちょっと詳しく解説してみます。




この動画では、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法を紹介しています。
登録したスタイルは、写真の右寄せスタイル。
こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。

スニペットは元からいろんなものが登録されてるので、利用することもできます。
（私は自分で登録したもの意外使ったことないんですが・・）
よく使うJavaScriptや、メタタグ、なども登録しておくと便利です。

＜写真を右寄せ簡単CSS＞
.photoR{
display:block;
float:right;
margin-left:10px;
}
これをスタイルに追加してから、写真に
class="photoR"
を適用させれば、簡単に右回り込み写真になります。
タグでいうと
＜img src="img/kagami_top.jpg" width="120" height="152" class="photoR" /＞

もしくは、＜p＞か＜div＞に class="photoR"を適用してもいいですね。
＜div class="photoR"＞＜img src="img/kagami_top.jpg" width="120" height="152" /＞＜/div＞

imgは、インライン要素なので、フロート指定は本来できないんですが、
display:block;を入れることで、ブロック要素にできるので、フロートさせることもできるし、マージンなどを指定することもできます。

同じ要領で、
.photoL（左に回り込みさせたい場合）
.phtoC（中央揃えにしたい場合）
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

※ブログの中でタグが有効になっちゃうんで、＜＞は全角で記述してあります

Dreamweaverで作るスタイルシートwebデザイン

Dreamweaverを使ったホームページの作り方という無料講座のブログを更新してるんですが、
コンテンツが増えてきたので、スタイルシート関連は別に新規ブログを作って立ち上げることになりました。

タイトルは、「Dreamweaverで作るスタイルシートwebデザイン」
XHTML＋オールCSSでのコーディング方法を、初心者向けに紹介したいと思います。
スタイルシートに関しては、語り出すとすごく長くなってしまう傾向があり、3分くらいの動画に入れ込むのがなかなか難しく苦労してます。
語りきれない所を端折っているので、もし分からない点がありましたら気軽にコメントくださいね。


おかげさまでたくさん再生してもらってるみたいで「ホームページの作り方」の方は、人気動画の中では２位に上がることができたみたいで、すごいです。
動画マニュアル登録サイト／人気順

「こんな貴重な情報を無料で教えて貰えるなんてすごくありがたいです」というお礼のメールを下さる方もいて、やってみて良かったと感激してます（＾＾
それから思わぬ副産物（？）なんですが、
「パソコンスクールに通っていますが、ホームページ作成初心者向けのスクールはあるけど、実践で役に立つことは教えてもらえない。授業料がかかっても良いので相談に乗ってくれませんか」と、個人教授の相談をいくつか問い合わせいただいてます。

そんなわけで、特に営利目的でやってるブログじゃないんですが、本当にせっぱ詰まっていて、きちんと必要な情報だけ教わってみたいという方のご要望にはできるだけお応えしたいなと思ってます。
質問にお答えする形で、webデザイナーを目指している方が実際に使える技術を個人指導しますのでお問い合わせください。＞モモンガのページ・お問い合わせ先
・illustrator・Photoshop・Fireworks・Flash・Dreamweaverのそれぞれ基礎
・WEB標準＆スタイルシートの基礎・無料ブログのカスタム方法・WordPressの設置とカスタム
・その他、企画書の出し方や見積もりの出し方、契約書の書き方から、ラフデザインからHTMLを起こしていくまでの手順、デザイナーがやらなければいけない最低限のSEO対策など、webデザイナーとしてのノウハウなどもお教えすることができます。


かくいう私も、東京にプログラミングの先生がいまして、教わりに通っています（＾＾；
デザイン畑なもんだから、プログラムはとっても弱くて・・・・。自分への投資は必要ですものね。

動画で学ぶ無料パソコン講座

動画で学ぶ無料パソコン講座「Dreamweaverを使ったホームページの作り方」というブログを更新してます。

このブログは、「動画マニュアル.com」というサイトの中のひとつのコンテンツなんですが、
最初見たときにカンドーしました。
たとえば「Photoshop」。
ひとりで仕事してると、思いこみというか、最初に覚えた機能ばかり使っていて、新しく増えた機能などなかなか面倒で覚えようとしなかったりするんですが
これを見てると「あら〜。。。最新のPhotoshopはこんな便利なこともできるのね」と（自分的に→）目ウロコな機能を紹介してあったりして、とっても役に立ちました。
Googleに、WordやExcelのような操作ができる機能があることもここで始めて知りました。

で、新しもん好きのわたし、さっそくお試し版を申し込んで使ってみたのです。
使い方を覚えたら公開したくなって、web制作の分野がまだほとんどなかったのでDreamweaverをテーマに開始してみたのです。

このブログ、検索に強いと聞いてはいたんだけど、ほんとにすごい実力です。ブログを始めて2カ月くらいですが、
「Dreamweaver　使い方」でGoogle　11位／23万件　Yahoo!　3位／約30万件
ブログでこれだけ強いのもめずらしいし、何よりわたしが一からサイトを作っていたら、今の時間の何倍もかけても、この分野でこれだけの順位は到達できなかったと思います。
何より中身（コンテンツ）作りが簡単ってことも良いです。（やってる内容はほんと初歩の初歩で、中級以上の方には物足りないと思うんですが・・・）
わかりやすくて助かったというお礼のメールを頂いたときは、すんごく嬉しかったです（＾＾

で、ホームページをあちこち見れば見るほど、「動画なのに検索に強い」理由がいろいろ見つかるんだけど、その話は置いておいて・・・
自分のＨＰへの誘致にあれこれ対策たてたり広告費かけたりページ数増やすのに費用がかかることを考えると、（外部に広告費かけてないと分かりづらいけど、自分がコツコツ作業する分の時間を費用に換算すれば知らないうちにうんと費用かけちゃってるってことありですヨネ）こういうサービスを利用するのもひとつの有効な手段かなと思うのです。

テーブルデザインで、ホームページを作る

デザインソースとSEO対策の話。
ワタシがSEO対策を教わったホワイト先生によると、「テーブルで作るホームページが、SEO対策の上で不利ということはない」だそうで、
この先生に出会うまでは、「SEO対策するなら、何がなんでも脱テーブルデザイン　＝　きれいなソース」と思いこんでいたわたしには、まさに目ウロコな説でした。

メンテナンスのことなど考えてもソースがきれいなのには越したことはないんですが、そちらに心血注ぐあまりに他の対策がおろそかになっては元も子もないというか、SEOにはもっと他に山ほどやることがあるんだなと、勉強すればするほど実感してる。。。

というわけで、cssデザインがわからない人でも、簡単に作れるテーブルデザインのホームページの作り方を、動画マニュアルで公開しています。

今回、ただのテーブルデザインでは面白くないのでちょっとだけ小技を入れてみました。（図を参照）

この形のテーブルを作って、それぞれのパーツを入れれば、ソースの順番が、ヘッダ、メイン、ナビ、フッターの順になるので、もし、ナビゲーションがJavaScriputを使ったりして、長いソースになったとしても、全ページの上の方に同じようなナビがと長々繰り返されるということがなくなります。こういった理由から「サイドナビは右が良い」という説もありますが、やっぱりオーソドックスな左にナビを持ってきたい場合もありますよね。

「テーブルでデザインしてもSEO対策の上ではまったく不利ではない」とは言え、やっぱり上の方にクローラーさんに読んで貰いたいテキストを持ってきたいのが人情（;￣ー￣）デスネ

＞Dreamweaverを使ったテーブルデザイン（1）〜（6）

Dreamweaverで、テーブルを使ったレイアウト（1）

動画マニュアルにて、初心者向けに、Dreamweaverの使い方を公開しています。
その見本サイトで使った素材を、こちらからダウンロードできるようにしました。

テーブルを使ったレイアウト（1）と（2）で使った、
htmlとcssファイルと、画像ファイルのセットです。
練習に使ってみてください。

対象は、まったくの素人さんにはちょっと難しいかもしれません。
かといって、オールCSSでコーディングしている人には物足りないかもしれません。

タグとCSSの初歩がわかる人、Dreamweaverをまだ使いこなしていない人向けに
テーブル機能を使って、極力余分なテーブルとタグを使わず、CSSは最低限に使用するという条件で、きれいに見えるようなホームページを目標にしてみます。

>>クリックでzipファイルがダウンロードされます

>>Dreamweaverのテーブルを使ったレイアウト方法