Microsoft Expression Web-HTMLレイアウト

この章では、ページのレイアウトを設計する別の方法を学びます。前の章では、スタイルシートを使用して、スタイルをヘッダー、フッターなどに適用しました。ただし、追加のスタイルシートを使用せずに、HTMLページ自体でスタイルを指定することもできます。

これはレイアウトを設計するための推奨される方法ではありませんが、目的を理解するためだけに、このテクニックをここで説明します。以下の手順に従ってください。

ステップ1 *-HTMLページを追加して *layoutdemol と呼びましょう

Layoutdemo

ステップ2 *-ツールボックスから <div>タグ*を追加します。

<div>タグ

ステップ3 *-*スタイルの適用*パネルで、*新しいスタイル…*をクリックします

Applystyles

ステップ4 *-[定義]ドロップダウンから[現在のページ]オプションを選択すると、スタイルは同じHTMLページに保存されます。ページのフォントを設定し、[背景]カテゴリに移動します。

定義する

ステップ5 *-背景の色を設定します。境界線、ボックス、および位置のカテゴリを設定して、[OK]をクリックすることもできます。

位置カテゴリ

レイアウト

スタイルが同じHTMLファイルに追加されていることがわかります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
      <title>Untitled 1</title>
      <style type = "text/css">
         #container {
            font-family: Arial, Helvetica, sans-serif;
            font-size: medium;
            font-weight: normal;
            font-style: normal;
            font-variant: normal;
            text-transform: capitalize;
            color: #800000;
            background-color: #C0C0C0;
            padding: 8px;
            margin: 8px;
            width: 90%;
         }
      </style>
   </head>

   <body>
      <div id = "container"></div>
   </body>
</html>

同様に、ヘッダー、フッター、メインコンテンツなど、他のスタイルを追加できます。上記のように。

Microsoft-expression-web-html-layout

Microsoft Expression Web-HTMLレイアウト

レイアウト