livedoor
アフィリエイトは儲かんないってば2007年11月27日11:38
では実際に、Dreamweavwer（ドリームウィーバー）という私にはちょっと高価で、かなり宝の持ち腐れのホームページ作成ソフトを使用し、ホームページを作ってみます。まずは、サイトを作成します。
「サイト」と「ページ」の違いについてちょっと書いておきます。
ホームページというのはトップページとか、会社概要のページとか、お問い合わせのページとか色々なページが組み合わさって出来ています。
一つ一つのページはHTMLとかで書かれておりCSSで成形され、画像や写真などが含まれています。
「サイト」というのは、これらのHTMLファイルやCSSファイルやら画像ファイルなど全てひっくるめた「フォルダ」と考えて良いと思います。
これに対し「ページ」は、HTMLなどで書かれたひとつのページを指すみたいです。
順番としては、「サイト」というフォルダを作って、いれものを準備します。
「ページ」を作り、そのフォルダに入れる。
「ページ」で参照するCSSや、使用する画像などもなんでもかんでも「サイト」のフォルダに入れておく。
最後にこの「サイト」フォルダごと、レンタルサーバーにアップロードする、という感じです。
そういうわけで、早速「サイト」の作成です。
Dreamweaverの一番上にある、「サイト」から「新規サイト」を選びます。
すると、サイトを作成するウィザードが立ち上がります。
サイト名を入力します。
フォルダ名を決めるだけなので、気楽に決めます。
今回は「カルチャー・ブレーソ」と入力しました。
URLはサイトをアップロードする際にあとでまた設定出来ますので、そのまま入力しないででかまいません。
サーバーテクノロジーは、プログラムなどを使用するかどうかということみたいです。
今回は「使用しない」です。
作業中のファイルの操作方法ですが、自分のパソコン（ローカル）にサイトを作って、それをアップロードするというのが普通かなと思うので、普通に、
「自分のマシンでローカルコピーを編集し、編集終了後にサーバーにアップロード（推奨）」で。
それから、自分のパソコンのどのフォルダを「サイト」のフォルダにするかを決めます。
Dreamweaverのフォルダに作っておいた「TEST」というフォルダに、「カルチャー・ブレーソ」というフォルダを作成し、それを「サイト」のフォルダにしました。
C:\Program Files\Adobe\Adobe Dreamweaver CS3\TEST\カルチャー・ブレーソ\
リモートサーバー、というのはレンタルサーバーと考えて良いと思います。
レンタルサーバーにどうやって接続するか、というのを定義するのですが、あとでアップロードの際にまた設定できるので、「ローカル／ネットワーク」を、「なし」にしておきます。
入力内容が表示されますので、確認して「終了」を選びます。
これで、サイトが作成されます。
さて、それでは今回作るトップページの作成に入ります。
ドリームウィーバーを立ち上げて表示されるメニューから、新規作成の「HTML」を選びます。
メニューバーから、ファイル→新規→空白ページ→HTML
でもいいです。
そうすると、下記のような画面になります。
� 〆鄒�しているHTMLのファイル名が表示されます。デフォルトでは「Untitled-1」となっています。
ページを保存したあとに変更を加えると、ファイル名の右に「＊（アスタリスク）」が表示されます。
�◆〆鄒�しているHTMLの「ビュー」が表示されます。今回は「分割」を選択しています。
「コードビュー」はHTMLのタグが表示されます。
「デザインビュー」は、ブラウザで見た目っぽい感じで表示されます。
行っている作業の用途にあわせて切り替えて使用します。
�� 作成しているHTMLのtitleタグの内容が表示されます。ここを書き換えると、titleタグ内の内容も書き換わります。
早速入力していってみます。
まずは��を書き換えます。
「CALTURE・BREASO「ゲームソフトのドリーム・オブ・アカデミア」（テストページ）と入力しました。
続いて、本文などを入力していきます。
まっさらの状態から入力を迫られると、最初何を考えて入力していいのかちょっと戸惑いますが、
横書きの新聞を作るようなものだと思ってもいいかもしれません。
CSSなど全く無い状態で見る人が見るとサイトがこんな感じで見える、という状態をイメージして淡々とページの内容を入力します。
CSSが全く無い状態で見る人というのがいるかと言いますと、それに近い状態で見る人がいます。
「検索エンジン」です。
検索エンジンに対してページをどのように見せるかを意識して、横書き新聞を作る感じで入力します。
入力はデザインビューが楽です。デザインビューに入力していきます。
まずは普通にページのタイトルにあたる部分を入力。
改行する時は、shift＋リターンキーを押します。
次にページの概要を入力します。
ここで段落を変えたいので、そのままリターンキーを押します。これで「改段落」となります。
リストの部分も段落を変えて入力します。
コードビューで確認すると、
「改行」部分は<br />タグを自動で挿入してくれてます。
「改段落」部分には、pタグを自動で挿入してくれてます。
文字の入力が終わったら、「見出し」をつけてみます。
タイトルにあたる部分を選んで、選択状態にします。
どこからどこまで、というのをきっちり指定したい場合は、「コードビュー」の方が便利です。
コードビューでタイトルにあたる部分を選んで、選択状態にします。
下の方にある「プロパティ」の中から、「フォーマット」という項目の「見出し１」を選びます。
概要にあたる部分には「見出し２」を選びました。
すると。なんと言うことでしょう。
それまでpタグだったものがh1タグとh2タグに置き換わっているではありませんか！
デザインビューでも、これでもかと文字が大きく太くなっているのが確認出来ます。
続いて、リストを定義します。
まずは、コードビューで、リストにあたる部分を選択状態にします。
そして、見出しをつけたときと同様、下の方にある「プロパティ」の中から、リスト定義のボタンを押します。
（とりあえず、順番なしリストのボタン）
これがまた小さくてわかりにくいよ！
すると。なんと言うことでしょう。
リストを全てulタグとかliタグに変えてくれたではありませんか。
Dreamweaver（ドリームウィーバー）、ホームページ制作のマジシャン、HTML作成のスペシャリスト。
まさに匠の技。
そういうわけで、作ったページを忘れずに保存。
メニューバーから、
ファイル→保存。ファイル名はトップページなので「index.html」としました。
右の方にある「ファイル」という「パネル」があります。
「ファイル」の文字をクリックすると、作成したページが保存されているのが確認できます。
つづく。
この記事へのコメント
|
ひよっこ
2007年11月27日 15:16
|
管理人さんのサイト作りは基本に忠実で勉強になります。
いつもホームページビルダーのtableを使って10分くらいで大まかなレイアウトを決定してしまう私が恥ずかしい…ｗ |
|
afiliate
2007年11月27日 16:02
|
どおも〜ひよっこさま。
私もホームページビルダーの9と11、なぜか二つ持っています。 しかし、ホームページビルダーの本も買って、何度かサイト作りにも挑戦したのですが、私には難しすぎて使い切れませんでしたｗ。 というのが、HTMLとCSSの連携をどうやっていいのかわからないんですよね。私はブログから入ったので、HTMLとCSSは少しわかるのですが、それをホームページビルダーでどう使って良いのか理解できなかったのです。 ホームページビルダーで10分くらいで大まかなレイアウトを作れるというのは、私にとってはすごいことです。 基本に忠実、というところはかなりアヤシイのでｗ、私のことはあまり過信されないよう、このシリーズを見守って頂けると幸いです。 |
くろりん＠サラリーマン副業
2007年11月28日 04:45 |
afiliateさん
こんにちは！ 今回の説明わかりやすくじっくりされてますね〜 ところでキャプチャーすごくキレイですが、 何を使ってどんな手順でしてるんですか？ ボクは「キャプラでキャプチャー」＆「ファイヤーワークスでサイズ変更」です。手抜きすぎかな？ |
|
afiliate
2007年11月28日 23:27
|
どおも〜くろりんさま。
こんにちは。というかこんばんわ（＾＾； キャプチャーはQtyCaptureというのを使っています。 http://afiliate.livedoor.biz/archives/50853094.html これ以外のソフトを使ったことがないので、他のソフトでどれがいいのかはよくわかりませんが、キャプラは良さそうですね。 http://www.uka-blog.com/web/web_design/hdd_layout_contrast.html QtyCaptureは鬼のように使っています。 というか、これが無いと私は何も出来ないと言っても過言ではありません。作者さまに感謝しています。これでキャプチャーしてホームページビルダーのオマケソフト「ウェブアートデザイナー」で加工しています。 これでドロップシャドウとかつけてGIFにしてアップしてます。 ウェブアートデザイナーは軽いので、いいですよ。これも手放せません。ホームページビルダーを買うというよりウェブアートデザイナーを買いました（笑）。 |
