Microsoft ExpressionWeb-データテーブル
この章では、Webページにデータテーブルを追加する方法を学習します。新しいHTMLページを作成しましょう。ただし、ここでは、動的WebテンプレートもHTMLページに適用します。
Step 1 − [ファイル]メニューに移動して、[ New → Create from Dynamic Web Template…
次のスクリーンショットに示すように、次のダイアログボックスが開きます。
Step 2 −を選択します master.dwt ファイルを作成し、[開く]ボタンをクリックします。
Step 3 − Webページを保存して、それを呼び出します datatable.html。
Step 4 −デザインビューで、メインコンテンツセクションに移動し、テキストを削除します。
Step 5 −次に、 Table → Insert Table… [テーブルの挿入]ダイアログボックスを開くメニューオプション。
行と列の数を選択します。配置、パディング、境界線のサイズと色、背景色など、さまざまなレイアウトオプションを設定することもできます。完了したら、[OK]をクリックします。
Step 6 − datatable.htmlのデザインビューは次のように表示されます−
ここで、ページのコードビューを見ると、ExpressionWebによって次のコードが追加されていることがわかります。
<table class = "auto-style2" style = "width: 100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>Step 7 −「スタイルの管理」タスクパネルで右クリック “.auto-style2”。[名前の変更を選択]クラス「auto-style2」をクリックします。
Step 8 − [クラス名の変更]ダイアログで、次のように入力します。 mytable の中に New nameフィールド。このページの[クラス参照の名前を変更]にチェックマークが付いていることを確認してから、[OK]をクリックします。
次に、デザインビューでWebページを見てください。次のように表示されます-
Step 9 −このテーブルをフォーマットしてスタイルを適用するには、[スタイルの管理]タスクパネルに移動して[ New Style…
Step 10− [新しいスタイル]ダイアログボックスで、境界線の設定を行い、[OK]をクリックします。データテーブルをフォーマットする別のオプションがあります。デザインビューで、テーブルを右クリックして、Modify → Table AutoFormat…
このダイアログボックスには、さまざまな形式やその他の設定が表示されます。Professional形式を選択して、[OK]をクリックします。
Step 11 −これで、Webページのデザインビューは次のようになります。
デザインビューにデータを追加してみましょう。
Step 12− Webページを保存し、ブラウザでプレビューします。次のスクリーンショットのようになります。
