Dreamweaverで複雑な流体グリッドデザインを作成する前に、まず、以下の簡単な説明に従って、単純な1列の流体グリッドレイアウトを作成します。
-
ファイル→新規を選択します。
[新規ドキュメント]ウィンドウが開きます。 注: 新しい流体グリッドレイアウトの作業を開始する前に、サイト設定プロセスを完了していることを確認してください。
-
画面の左側から、[流体グリッドレイアウト]を選択します。
<! - 1 - >[新規ドキュメント]ウィンドウのオプションが流体グリッドオプションに変わります。
-
3つのレイアウトのそれぞれに必要な列の数を指定します。
列を追加または削除するには、各列のテキストフィールドを順に選択し、必要な列の数を入力します。
-
各レイアウトでカバーするブラウザウィンドウの割合を指定します。
<! - 2 - >各レイアウトの下のテキストフィールドを順番に選択し、デザインをブラウザウィンドウで表示するときにレイアウトでカバーするスペースの割合を表す数字を入力します。たとえば、デフォルトでは、デスクトップレイアウトは使用可能なスペースの90%を占めるように設定されていますが、デザインスペースを広げてマージンスペースを減らすために95%に変更できます。
-
列幅の割合を変更して、各列間のマージンスペースの量を変更します。
<! - 3 - >Dreamweaverでは、デフォルトで、各余白が使用可能なスペースの25%を占めるように設定されています。
-
ドロップダウンリストを使用して、Doctypeを指定します。
デフォルトでは、流体グリッドのレイアウトはHTML5のdoctypeを使用して作成されます。あなたのウェブサイトで使用されている他のフォーマットと互換性があるようにdoctypeを変更する必要がない限り、HMTL5はレスポンシブなウェブデザインに推奨されるオプションです。
-
「作成」をクリックします。
[名前を付けて保存]ダイアログボックスが開き、CSSファイルを保存できます。
-
CSSファイルの名前を入力し、[保存]をクリックします。
新しいHTMLファイルがDreamweaverワークスペースで開きますが、まだ保存されていません。名前を付けたCSSファイルが保存され、その名前が[ファイル]パネルに表示されます。
注: Dreamweaverで他の種類のページを作成するプロセスとは異なり、CSSファイルが最初に保存され、HTMLファイルは後の手順で保存されます。
-
ファイル→保存を選択
名前を付けて保存ダイアログボックスが開きます。
-
HTMLファイルの名前を入力し、[OK]をクリックします。
名前を付けて保存ダイアログボックスが閉じ、流体グリッドレイアウトに2つの追加ファイルboilerplateが必要であることを示す通知がDreamweaverに表示されます。 cssと応答します。分。 js。
-
ボイラープレートをコピーするには、[OK]をクリックします。cssと応答します。分。 jsファイルをあなたのサイトフォルダにコピーします。
3つのファイルはすべて[ファイル]パネルに追加され、Dreamweaverワークスペースで開いている新しい名前のHTMLファイルに戻ります。
-
ワークスペースの上部にある[タイトル]フィールドにテキストを入力して、ページにタイトルを付けます。
これで、流体グリッドレイアウト用の新しいファイルセットが作成されます。