Dreamweaver入門

このコーナーでは、Webサイト制作初心者の筆者が、「Dreamweaver」を使ってWebサイトを制作→完成後には実際に制作したWebサイトをアップロードするまでを記事にしていきます。いささか見切り発進気味のスタートに途中リタイアにならないことを願いつつ、「やるならやらねば」の精神(?)で書き進めていきたいと思いますのでよろしくお願いします。

「Dreamweaver」は、アドビシステムズが販売している高機能Webオーサリングツールで、現在の最新バージョンはCS4となっています。
ちなみに読み方は、「ドリームウィーバー」と読むのが正しいのですが、「ドリームウェーバー」と間違えて呼ぶ人も多いので注意が必要です。

ちょっと古いけどまだまだ使えるDreamweaver バージョン8を使ってWebサイトを制作していきたいと思います。

初期設定を確認する

Webサイトを作成する前に、Dreamweaverの新規ドキュメントの初期設定を確認します。

メニュー[編集]→[環境設定]→カテゴリ[新規ドキュメント]を開きます。

ドキュメントタイプ宣言

ドキュメントタイプ宣言には、「HTML4.01」「XHTML1.0」から数種類選択することができます。
今回は、[新規設定のドキュメントタイプ(DTD)]を[XHTML Transitional(トランジショナル)]に指定します。「XHTML Transitional」は、HTMLをXMLに適合するように定義し直したものです。今回はこのXHTMLと外部スタイルシートを使用して、各ブラウザ独自のタグに頼る事なく、見栄えは全て外部スタイルシートで定義してWeb標準に準拠したサイト作りを目指します。

エンコーディング

日本語の場合は、「UTF-8」「EUC」「シフトJIS」から選択できます。今回は、「UTF-8」に設定します。
「UTF-8」は、日本語含めて幅広い言語に対応していて、文字化けが起こりにくいのがポイントです。

サイトを作成する

Dreamweaverでは「サイト」を設定することで、複数のページや使用する画像を1つのサイトとして管理していきます。
まずは、新規サイトを作成しましょう。
[サイト]→[サイトの管理]→[新規作成]→カテゴリ[ローカル情報]

サイト名

Dreamweaverで管理する上でのサイト名になります。

ローカルルートフォルダ

デフォルト状態でのローカルフォルダを指定します。

初期設定イメージフォルダ

初期設定イメージフォルダを指定することで、Webサイトで使用した画像が指定したイメージフォルダに保存されるようになります。

一応、確認する

初期設定どおりになっているか、コードを確認してみましょう。
[ファイル]→[新規]→[ＨＴＭＬ]で新規ページを作成します。

ドキュメントタイプの宣言を見てみます。
初期設定で[新規ドキュメント]のドキュメントタイプを「XHTML Transitional(トランジショナル)」にしましたので、以下のように表記されています。

また、Dreamweaverでは自動的にxmlns属性が指定されています。

続いて、エンコードを確認します。

「UTF-8」になっていますね。
文字コードの指定タグは、ヘッド内で一番上に表記されています。

あらかじめ初期設定行っておけば、自動的に入力してくれるので手間が省けます。

関連する投稿

• 関連する投稿はありません。