Dreamweaver を使用した web 開発

Web 開発の最初のステージは、閲覧者のニーズ、技術的な要件およびマーケティングの要件を分析する計画フェーズです。 また、web サイトをデザインおよびパブリッシュするために必要な情報を収集し、次のような質問に対して回答します。

• どのサービスプロバイダーを web サイトのホスティングのために選択すべきですか。 Publishing server にファイルをアップロードするためにアクセスできますか。
• Web サイトにはどのようなドメイン名を使用しますか。
• 既存の web サイトを Dreamweaver に移行中の場合、現時点でファイルとアセットはどこに保存されていますか。 この情報が保存されているサーバーにアクセスできますか。
• 動的 web サイトが必要な場合は、データが動的に表示されているかどうかをテストするためにどのサーバーを使用できますか。 動的データのロードに使用する web アプリケーションサーバーの詳細がありますか。
• Web サイトにはどのような種類のアセットが必要ですか。
• それらは新規にデザインされるアセットですか。 アセットが既に使用可能な場合、それらにアクセスできますか。
• どのようなアプリケーションを使用してアセットをデザインしますか。
• レスポンシブ web サイトの作成を予定していますか。 

開発する web サイトおよびそのサイトをホストする方法と場所について明確に把握した上で、web 開発プロセス用に Dreamweaver と Creative Cloud を選択した場合は、次の手順に進みます。

Web サイトに必要なアセットがすべて揃っているかどうかを確認します。 それらのアセットを集め、ローカルフォルダーまたは Adobe の Creative Cloud ライブラリにまとめます。

次のいずれかを使用して、Dreamweaver で新しいドキュメントを作成します。

• 新しい空白のドキュメント
• Dreamweaver に付属のスターターテンプレート 
• 他のユーザーが作成したテンプレートファイル（*.dwt）

Dreamweaver について十分に理解していない場合や、web 開発の学習中の場合は、web ページのデザインを進めていく上でスターターテンプレートが役立ちます。

web ページを新規にデザインする予定であっても、これらのページを参照し、優れた web ページデザインのエレメントについて把握しておくことをお勧めします。

少し時間を取って、Dreamweaver ワークスペースについて理解します。 使いやすいワークスペースを見つけて、カラーテーマを設定します。 必要に応じて、パネルの構成を変更します。

Dreamweaver でサイトを設定します。 ファイルとアセットを含むフォルダー構造の作成に着手します。 情報を整理し、構造を決定したら、実際にサイトの作成を開始します （Dreamweaver サイトについてを参照してください）。

このステージでは、リモートサーバーへの接続とテストサーバーも設定することをお勧めします（動的コンテンツがある場合）。 

コードビューでの web ページのコーディング、またはデザイン／ライブビューでの web ページのデザインを開始します。

Photoshop カンプを使用する場合は、Dreamweaver にそれらを抽出し、カンプ上で作業することもできます。 Photoshop カンプを使用する方法について詳しくは、Dreamweaver 内のエクストラクトを参照してください。

デザインエレメントを追加します。これには、テキスト、イメージ、ロールオーバーイメージ、イメージマップ、色、ムービー、サウンド、HTML リンク、テーブルなどがあります。

CSS を使用して web ページの外観のスタイルを設定します。 

Dreamweaver では、様々な方法で CSS を操作できます。

• CSS をハンドコーディングできます。 CSS のハンドコーディングに役立つ Dreamweaver のコーディング機能について詳しくは、Dreamweaver のコーディング環境を参照してください。
• CSS ページの作成にあまり詳しくない場合は、CSS デザイナーパネルを使用して CSS を構築できます。 詳しくは、CSS デザイナーを使用したページのレイアウトを参照してください。
• Sass ファイルと Less ファイルを操作する場合、Dreamweaver ではそのオプションもサポートされます。これにより、Sass ファイルと Less ファイルを Dreamweaver サイトに取り込んで使用できます。 Dreamweaver では、これらのファイルが自動コンパイルされ（手動でコンパイルすることも可能）、CSS の変更の結果がリアルタイムで表示されます。 Dreamweaver での Sass ファイルと Less ファイルの使用について詳しくは、CSS プリプロセッサーを参照してください。

動的コンテンツを作成するための web アプリケーションを設定します。

多くの web サイトでは、データベースに保存されている情報をビジターが参照できるようなダイナミックページが使用されています。また、一部のビジターには、参照だけでなく、データベースへの新しい情報の追加やデータベースにある情報の編集を認めることが普通です。 このようなページを作成するには、まず web サーバーとアプリケーションサーバーを設定し、Dreamweaver サイトを作成または修正した後、データベースに接続する必要があります。 詳しくは、動的サイト、ページおよび web フォームを参照してください。

動的ページを作成します。

Dreamweaver では、動的コンテンツのソースとして、データベースから抽出されたレコードセット、フォームパラメーター、JavaBeans コンポーネントなど、様々なものを定義できます。 ページに動的コンテンツを追加するには、そのコンテンツをページ上にドラッグします。

ページに 1 レコードずつ表示することも、複数レコードを一度に表示することもできます。複数のページでレコードを表示するように設定することもできます。あるページから次の（または前の）ページに移動するための特殊なリンクや、表示されているレコードを識別するためのレコードカウンターを追加することもできます。 詳しくは、動的サイト、ページおよび web フォームを参照してください。

webサイトをテスト、プレビュー、公開してください。 

ページの作成時には、ページをプレビューして、web サイトがデザインに従って作成されていることを確認する必要があります。 コーディングの際に、分割ビューでコードビューとライブビューを並べて表示できます。

ブラウザーでリアルタイムに web ページをプレビューすることもできます。

ライブプレビューが不要な場合は、ブラウザーで通常のプレビューを使用できます。

リモートサーバーへの接続を定義済みの場合は、web サイトをパブリッシュするために、リモートサーバーにファイルを配置して利用可能な状態にしておく必要があります。