Microsoft Expression Web-空白のWebページ

すでにウェブサイトを作成しているので、今度はホームページを作成する必要があります。前の章では、1ページのWebサイトを作成しましたが、その時点でExpression Webによってホームページが自動的に作成されました。したがって、空のWebサイトを作成した場合は、サイトのホームページを作成する必要があります。

Microsoft Expression Webは、次の種類のページを作成できます-

HTML
ASPX
ASP
PHP
CSS
マスターページ
動的Webテンプレート
JavaScript
XML
テキストファイル

この章では、HTMLページとそれに対応するスタイルシートを作成します。

空白のページを作成する

空白のページを作成するには、[ファイル]メニューに移動し、[新規→ページ…]メニューオプションを選択します。

空白ページ

新しいダイアログから、HTMLページ、ASPXページ、CSSページなど、さまざまなタイプの空白ページを作成できます。 OKをクリックします。

空白ページ

ここでわかるように、既定のコードは既にMicrosoft Expression Webによって追加されています。

<!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>
   </head>

   <body>
      <h1>
         This is a blank web page
      </h1>
   </body>
</html>

ご覧のとおり、新しく作成したページのファイル名は Untitled_1l または Untitled_1 です。 Ctrl + Sを押してページを保存し、名前を指定する必要があります。

私たちのウェブサイトにはすでに indexl ページが含まれているため、別のページは必要ありません。ただし、空のWebサイトを作成した場合は、このページに indexl という名前を付けます。

Webをブラウザーで表示するには、[ファイル]メニューに移動し、[ブラウザーでプレビュー]→[任意のブラウザー]を選択します。たとえば、Internet Explorerです。

空白のWebページ

CSSページを作成する

CSSページを作成する手順を追って説明します。

ステップ1 *-CSSページを作成するには、[ファイル]メニューに移動し、[新規作成]→[ページ…]メニューオプションを選択します。

新しいページ

ステップ2 *-*全般→CSS *を選択し、OKをクリックします。

一般的なCSS

ステップ3 *-ページを保存し、スタイルシートの名前を入力します。

ページを保存

ステップ4 *-*保存*ボタンをクリックします。

保存

ステップ5 *-では、indexlページに移動しましょう。

インデックスHtml

ステップ6 *-*スタイルの管理パネル*で、*スタイルシートの添付*をクリックします。

スタイルシートの添付

ステップ7 *-スタイルシートを参照し、「添付」から「現在のページ」を選択し、「添付」からリンクして「OK」をクリックします。

添付

ステップ8 *-これで、新しい行がindexlページに自動的に追加されることがわかります。

<link href = "sample.css" rel = "stylesheet" type = "text/css"/>

ステップ9 *- *body 要素はドキュメントの本文を定義します。 <body> タグのスタイルを設定するには、新しいスタイルを作成する必要があります。まず、デザインビューでbodyタグを選択し、[スタイルの適用]パネルまたは[スタイルの管理]パネルで[新しいスタイル…]をクリックすると、[新しいスタイル]ダイアログが開きます。

スタイルの適用

ここで、スタイルのさまざまなオプションを定義できます。最初の手順は、セレクタドロップダウンリストから本文を選択し、[定義]ドロップダウンリストから既存のスタイルシートを選択することです。

ステップ10 *-URLから、 *sample.css ファイルを選択します。左側には、フォント、背景などのカテゴリリストがあります。現在、フォントが強調表示されています。上記のスクリーンショットに示すように、要件に従ってフォント関連情報を設定し、[OK]をクリックします。

サンプルCSS

ステップ11 *-デザインビューで、背景色とフォントが選択したものに変更されたことを確認できます。これで、sample.cssファイルを開くと、すべての情報がCSSファイルに自動的に保存されていることがわかります。

CSSファイル

ブラウザでWebページをプレビューしましょう。スタイルがCSSファイルから適用されていることがわかります。

スタイルの空白ページ

Microsoft-expression-web-microsoft-expression-blank-web-page

Microsoft Expression Web-空白のWebページ

空白のページを作成する

CSSページを作成する